/* AI Tools Network — Design System v4 "Signal" (universal)
   Sleek modern dark SaaS. Bold display type, one confident accent (warm gold),
   glass-morphism surfaces, real depth via glow/shadow. Covers every template
   variant in the network via shared primitives + attribute selectors.
*/

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --bg: #08080b;
  --bg-2: #0e0e13;
  --surface: rgba(255,255,255,0.045);
  --surface-solid: #131318;
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.18);
  --ink: #f6f6f8;
  --ink-dim: #a5a5b0;
  --ink-faint: #6d6d78;
  --accent: #f5b83d;
  --accent-dim: rgba(245,184,61,0.14);
  --accent-ink: #1a1305;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

html, body {
  background:
    radial-gradient(900px 500px at 15% -8%, rgba(245,184,61,0.10), transparent 60%),
    var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--body) !important;
}

body, p, li, a, input, textarea, select, button, label, td, th {
  font-family: var(--body) !important;
}

h1, h2, h3, .font-bold {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
h1 { line-height: 1.08 !important; }

code, pre, .mono, .font-mono, .prompt-text, .prompt-block, .output-block .prompt-text {
  font-family: var(--mono) !important;
}
.prompt-text { white-space: pre-wrap !important; font-size: 0.82rem !important; line-height: 1.75 !important; color: var(--ink-dim) !important; }

* { scrollbar-color: var(--line-strong) var(--bg); }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ── Nav (where present) — dark glass ── */
nav.sticky, nav.fixed {
  background: rgba(8,8,11,0.72) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(14px) saturate(140%);
}

/* ── Text color mapping (Tailwind → Signal) ── */
.text-white { color: var(--ink) !important; }
.text-slate-200, .text-slate-300 { color: var(--ink-dim) !important; }
.text-slate-400 { color: var(--ink-dim) !important; }
.text-slate-500, .text-slate-600 { color: var(--ink-faint) !important; }

[class*="text-blue-"], [class*="text-sky-"], [class*="text-cyan-"], [class*="text-teal-"],
[class*="text-emerald-"], [class*="text-green-"], [class*="text-lime-"],
[class*="text-amber-"], [class*="text-yellow-"], [class*="text-orange-"],
[class*="text-red-"], [class*="text-rose-"], [class*="text-pink-"], [class*="text-fuchsia-"],
[class*="text-purple-"], [class*="text-violet-"], [class*="text-indigo-"] {
  color: var(--accent) !important;
}

/* ── Surfaces — glass cards ── */
[class*="bg-slate-8"], [class*="bg-slate-9"], .card, .prompt-block, .output-block {
  background: var(--surface) !important;
  backdrop-filter: blur(20px);
  border: 1px solid var(--line) !important;
}
div[class*="bg-[#"], section[class*="bg-[#"] { background: var(--surface) !important; }
[class*="border-slate-"] { border-color: var(--line) !important; }

.card, .prompt-block, .output-block, [class*="rounded-2xl"], [class*="rounded-xl"] {
  border-radius: 16px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 40px 80px -40px rgba(0,0,0,0.6);
}
.prompt-block, .output-block {
  border-left: 3px solid var(--accent) !important;
  border-radius: 14px !important;
}
.prompt-block { color: var(--ink-dim) !important; line-height: 1.75 !important; font-size: 0.84rem !important; }

/* ── Section / output titles ── */
.section-title, .output-title {
  color: var(--accent) !important;
  font-family: var(--body) !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
}

/* ── Inputs — filled glass fields ── */
.input-field, input[type="text"], input[type="email"], textarea, select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}
.input-field:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  background: rgba(255,255,255,0.07) !important;
  outline: none !important;
}
.input-field::placeholder, input::placeholder, textarea::placeholder { color: var(--ink-faint) !important; }
select.input-field option, select option { background: var(--surface-solid); color: var(--ink); }

label, .label {
  color: var(--ink-dim) !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.03em !important;
}

/* ── Toggle chips (tag-btn / opt-toggle / section-btn) ── */
.tag-btn, .opt-toggle, .section-btn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  color: var(--ink-dim) !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}
.tag-btn:hover:not(.active), .opt-toggle:hover:not(.active), .section-btn:hover:not(.active) {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.tag-btn.active, .opt-toggle.active, .section-btn.active {
  background: var(--accent-dim) !important;
  border-color: rgba(245,184,61,0.5) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}
.section-btn { border-radius: 10px !important; }

/* ── Primary CTA — confident solid gold, glow ── */
.generate-btn, button[onclick^="generate"] {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 30px -10px rgba(245,184,61,0.45) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.generate-btn:hover, button[onclick^="generate"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -8px rgba(245,184,61,0.55) !important;
  opacity: 1 !important;
}

.copy-btn {
  background: rgba(255,255,255,0.06) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.copy-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(255,255,255,0.06) !important; }

/* ── Pills & badges ── */
.pill, .badge, span[style*="border-radius:999px"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  font-family: var(--body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--accent) !important;
  background: var(--accent-dim) !important;
  border: 1px solid rgba(245,184,61,0.3) !important;
  border-radius: 999px !important;
  padding: 5px 13px !important;
  text-transform: none !important;
}

/* ── Sponsor cards (inline-styled) — glass + gold ── */
div[style*="border-left:4px solid"] {
  background: var(--surface) !important;
  backdrop-filter: blur(20px);
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -35px rgba(0,0,0,0.6);
}
div[style*="border-left:4px solid"] div { color: var(--ink-dim) !important; }
div[style*="border-left:4px solid"] div[style*="uppercase"] { color: var(--accent) !important; }
div[style*="border-left:4px solid"] div[style*="font-weight:600"] { color: var(--ink) !important; }

a[rel~="sponsored"] {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px -10px rgba(245,184,61,0.45) !important;
  transition: transform 0.15s ease !important;
}
a[rel~="sponsored"]:hover { transform: translateY(-1px); }

/* ── Trust line ── */
.trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ink-faint);
  font-size: 0.76rem;
  margin: 14px 0 4px;
}

/* ── Network cross-links section ── */
.sig-network { max-width: 900px; margin: 56px auto 0; padding: 0 20px; }
.sig-network h2 { font-size: 1.35rem !important; margin-bottom: 6px; }
.sig-sub { color: var(--ink-faint); font-size: 0.84rem; margin-bottom: 18px; }
.sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sig-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line) !important;
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.sig-card:hover { border-color: rgba(245,184,61,0.45) !important; transform: translateY(-2px); }
.sig-name { color: var(--ink) !important; font-weight: 700; font-size: 0.88rem; }
.sig-desc { color: var(--ink-faint) !important; font-size: 0.76rem; line-height: 1.5; }

.sig-footer {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.74rem;
  padding: 34px 20px 30px;
  margin-top: 26px;
  border-top: 1px solid var(--line);
}
.sig-footer a { color: var(--ink-dim) !important; text-decoration: none; }
.sig-footer a:hover { color: var(--accent) !important; }

/* keep absolute copy buttons working (variant with copy-btn inside prompt-block) */
.prompt-block .copy-btn { z-index: 2; }

/* ── Hero banner ── */
.hero-banner {
  margin: 8px 0 28px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface-solid);
  padding: 8px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6), 0 0 50px -20px rgba(245,184,61,0.22);
}
.hero-banner img {
  display: block;
  width: 100%;
  height: 235px;
  object-fit: cover;
  border-radius: 10px;
}

/* ── FAQ section ── */
.sig-faq { max-width: 900px; margin: 56px auto 0; padding: 0 20px; }
.sig-faq h2 { font-size: 1.35rem !important; margin-bottom: 16px; }
.sig-faq details {
  background: var(--surface); backdrop-filter: blur(20px);
  border: 1px solid var(--line) !important; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 10px;
}
.sig-faq summary { cursor: pointer; font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.sig-faq summary::marker { color: var(--accent); }
.sig-faq p { color: var(--ink-dim); font-size: 0.86rem; line-height: 1.65; margin-top: 10px; }

/* ── Offer bar ── */
#sig-offer-bar {
  position: fixed; left: 50%; bottom: 14px; transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 14px;
  background: rgba(19,19,24,0.92); backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 12px 16px; z-index: 60; max-width: min(92vw, 560px);
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.7), 0 0 40px -18px rgba(245,184,61,0.35);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#sig-offer-bar.visible { transform: translate(-50%, 0); }
#sig-offer-bar .sig-offer-text { color: var(--ink); font-size: 0.84rem; font-weight: 600; line-height: 1.4; }
#sig-offer-bar .sig-offer-text small { display: block; color: var(--ink-faint); font-weight: 500; font-size: 0.74rem; }
#sig-offer-bar a {
  background: var(--accent); color: var(--accent-ink) !important; font-weight: 800;
  font-size: 0.8rem; padding: 9px 16px; border-radius: 9px; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
}
#sig-offer-close {
  background: none; border: none; color: var(--ink-faint); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 4px; flex-shrink: 0;
}
#sig-offer-close:hover { color: var(--ink); }