/* =========================================================
   GEXI — styles.css  (v2)
   ========================================================= */

/* =========================================================
   TEMPORARY — hide ONLY the AI-tool recommender surfaces on the
   search results page. We still want:
     • AI Overview (the AI response)
     • Web results
     • Built-in tools panel (calculator, mortgage, translate, etc.)
       so query-driven tool matches AND the homepage quicklinks
       still open their utility apps.
     • The conditional utility / generate CTA cards
   What stays hidden: the third-party AI tool list (#results), the
   filter chips that target it, mode tabs, and compare bar.
   Remove this block to restore the full Phase-2 UI.
   ========================================================= */
.results-state #mode-tabs,
.results-state #filter-toggle,
.results-state #filter-panel,
.results-state #results,
.results-state #categories,
#compare-bar {
  display: none !important;
}

/* =========================================================
   CHAT LAYOUT — Generate page (text mode = multi-turn chat).
   Sidebar of saved sessions on the left, thread + input on right.
   Replaces the legacy single-shot form when modality === 'text'.
   ========================================================= */
.chat-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  margin-top: 8px;
  min-height: 540px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
}
.chat-sidebar {
  border-right: 1px solid var(--line);
  background: var(--bg-soft, #f7f7f9);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
:root[data-theme="dark"] .chat-sidebar { background: rgba(255,255,255,0.02); }
.chat-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.chat-sidebar-head h2 { margin: 0; font-size: 14px; letter-spacing: -0.01em; }
.chat-new-btn {
  background: var(--accent, #22c55e);
  color: #fff; border: 0; border-radius: 8px;
  padding: 6px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.chat-new-btn:hover { filter: brightness(1.05); }
.chat-retention {
  font-size: 11.5px; color: var(--muted);
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.chat-list {
  list-style: none; margin: 0; padding: 6px;
  overflow-y: auto; flex: 1; min-height: 0;
}
.chat-list-empty {
  padding: 24px 14px; font-size: 12.5px; color: var(--muted); text-align: center;
}
.chat-list-item {
  position: relative; display: flex; align-items: stretch;
  border-radius: 8px;
}
.chat-list-item:hover { background: rgba(0,0,0,0.04); }
:root[data-theme="dark"] .chat-list-item:hover { background: rgba(255,255,255,0.04); }
.chat-list-item.active { background: rgba(34, 197, 94, 0.12); }
.chat-list-pick {
  flex: 1; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 10px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.chat-list-title {
  font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-list-meta { font-size: 10.5px; color: var(--muted); }
.chat-list-del {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 16px; line-height: 1;
  padding: 0 8px; opacity: 0; transition: opacity 0.15s;
}
.chat-list-item:hover .chat-list-del { opacity: 1; }
.chat-list-del:hover { color: #b91c1c; }
.chat-signin-hint {
  padding: 12px 14px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--line);
}
.chat-signin-hint a { color: var(--accent, #22c55e); cursor: pointer; }

.chat-main {
  display: flex; flex-direction: column;
  min-height: 0;
}
.chat-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 32px;
  text-align: center;
}
.chat-empty-mark {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, #10b981, #22c55e, #84cc16);
  color: #fff; font-size: 28px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.chat-empty h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.chat-empty p  { margin: 0; font-size: 13px; color: var(--muted); max-width: 380px; }

.chat-thread {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
}
.chat-msg { display: flex; }
.chat-msg-user      { justify-content: flex-end; }
.chat-msg-assistant { justify-content: flex-start; }
.chat-msg-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  word-wrap: break-word;
}
.chat-msg-user .chat-msg-bubble {
  background: var(--accent, #22c55e); color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg-assistant .chat-msg-bubble {
  background: var(--bg-soft, #f1f1f4); color: var(--ink);
  border-bottom-left-radius: 4px;
}
:root[data-theme="dark"] .chat-msg-assistant .chat-msg-bubble {
  background: rgba(255,255,255,0.06);
}
.chat-bubble-error { color: #b91c1c; }
.chat-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); opacity: 0.5;
  animation: chatBlink 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatBlink {
  0%,80%,100% { transform: scale(0.7); opacity: 0.4; }
  40%         { transform: scale(1);   opacity: 1; }
}

.chat-input-wrap {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  display: flex; gap: 8px; align-items: flex-end;
  background: var(--card);
}
#chat-input {
  flex: 1; resize: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px; min-height: 40px; max-height: 200px;
  font: inherit; color: var(--ink);
  background: var(--bg-soft, #fff);
}
:root[data-theme="dark"] #chat-input {
  background: rgba(255,255,255,0.04);
}
#chat-input:focus {
  outline: none; border-color: var(--accent, #22c55e);
}
#chat-send {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent, #22c55e); color: #fff; border: 0;
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#chat-send:hover { filter: brightness(1.05); }
#chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-error {
  padding: 8px 14px; font-size: 12.5px; color: #b91c1c;
  border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
  .chat-shell { grid-template-columns: 1fr; min-height: 480px; }
  .chat-sidebar { display: none; }

  /* On mobile, surface the chat input ABOVE the welcome / thread block.
     The input becomes the focal element (like a search bar) and the
     "How can GEXI help today?" greeting drops below it. Once a real
     conversation starts, the thread renders below the input too. */
  .chat-main         { display: flex; flex-direction: column; }
  .chat-input-wrap   { order: 0; border-top: none; border-bottom: 1px solid var(--line); }
  .chat-empty        { order: 1; flex: 0 1 auto; padding: 28px 24px; }
  .chat-thread       { order: 2; }
}


/* =========================================================
   DESIGN TOKENS
   --------------------------------------------------------
   Single source of truth for every visual decision.
   Tweak a colour or spacing here → propagates everywhere.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---- Brand palette: gecko-green ramp. ----
     Reads "GEX = gecko" — fresh, bright, distinctive vs the violet/pink
     sea every other AI tool uses. The 500 stop is the primary brand;
     accent (lime) is the warmer end of the gradient. */
  --brand-50:   #ecfdf5;
  --brand-100:  #d1fae5;
  --brand-200:  #a7f3d0;
  --brand-300:  #6ee7b7;
  --brand-400:  #34d399;
  --brand-500:  #10b981;   /* emerald — primary brand */
  --brand-600:  #059669;
  --brand-700:  #047857;
  --brand-800:  #065f46;
  --brand-900:  #064e3b;
  --accent:     #22c55e;   /* vibrant gecko green — the bright tip of the gradient */
  --accent-2:   #84cc16;   /* lime — used in creative surfaces + secondary highlights */

  /* Gradients: the signature look across hero, primary buttons, badges */
  --grad-brand:      linear-gradient(135deg, #10b981 0%, #22c55e 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(34,197,94,0.10) 100%);
  --grad-creative:   linear-gradient(135deg, #10b981 0%, #22c55e 50%, #84cc16 100%);

  /* Legacy aliases — keep these so existing rules referring to --indigo* still work */
  --indigo:        var(--brand-500);
  --indigo-hover:  var(--brand-600);
  --indigo-active: var(--brand-700);
  --indigo-soft:   var(--brand-50);

  /* ---- Surfaces + text (light mode) ---- */
  --ink:           #0f0f1a;
  --ink-2:         #2a2a3d;
  --muted:         #5e5e72;
  --line:          #ececf4;
  --line-strong:   #d8d8e3;
  --bg:            #fafafd;
  --card:          #ffffff;
  --card-alt:      #f6f6fb;

  /* ---- Status colours ---- */
  --green:         #059669;
  --green-soft:    #d1fae5;
  --amber:         #d97706;
  --amber-soft:    #fef3c7;
  --red:           #dc2626;
  --red-soft:      #fee2e2;
  --slate:         #475569;
  --slate-soft:    #e2e8f0;

  /* ---- Elevation ---- */
  --shadow-sm:     0 1px 2px rgba(15,15,26,0.04), 0 1px 1px rgba(15,15,26,0.03);
  --shadow:        0 4px 12px rgba(15,15,26,0.05), 0 1px 3px rgba(15,15,26,0.04);
  --shadow-md:     0 8px 24px rgba(15,15,26,0.07), 0 2px 6px rgba(15,15,26,0.04);
  --shadow-lg:     0 24px 48px rgba(15,15,26,0.10), 0 0 0 1px rgba(15,15,26,0.04);
  --shadow-glow:   0 0 0 4px rgba(16,185,129,0.18);

  /* ---- Geometry ---- */
  --radius-sm:     6px;
  --radius:        10px;
  --radius-md:     14px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-pill:   999px;

  /* ---- Type ---- */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =========================================================
   DARK THEME — confident "AI lab" surfaces.
   Same brand gradient, but on deeper backgrounds with a
   subtle violet undertone so it doesn't feel like a flat
   mid-grey app.
   ========================================================= */
[data-theme="dark"] {
  --brand-500:  #a78bfa;   /* lift slightly so it pops on dark bg */
  --brand-600:  #059669;
  --brand-700:  #047857;

  --indigo:        var(--brand-500);
  --indigo-hover:  var(--brand-400);
  --indigo-active: var(--brand-300);
  --indigo-soft:   #1e1b3a;

  --ink:           #f5f5fa;
  --ink-2:         #c4c4d4;
  --muted:         #8d8da3;
  --line:          #24243a;
  --line-strong:   #36364f;
  --bg:            #0a0a14;
  --card:          #14142a;
  --card-alt:      #1a1a30;

  --green:         #4ade80;
  --green-soft:    #064e3b;
  --amber:         #fbbf24;
  --amber-soft:    #78350f;
  --red:           #f87171;
  --red-soft:      #7f1d1d;
  --slate:         #cbd5e1;
  --slate-soft:    #1e293b;

  --shadow-sm:     0 1px 2px rgba(0,0,0,0.4);
  --shadow:        0 4px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:     0 8px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg:     0 24px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-glow:   0 0 0 4px rgba(167,139,250,0.25);

  color-scheme:    dark;
}

* { box-sizing: border-box; }

/* Make sure [hidden] always wins, even on flex/grid elements. */
[hidden] { display: none !important; }

/* Visually hidden — keeps content for assistive tech but removes from layout. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter alternates: cleaner letterforms */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Subtle violet glow behind the page on dark mode — gives it the "AI lab" depth */
[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(16,185,129,0.12), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgba(132,204,22,0.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }

/* ---- Header ---- */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
[data-theme="dark"] .hero {
  background: rgba(20, 20, 42, 0.72);
  border-bottom: 1px solid var(--line);
}
/* Wordmark uses the brand gradient — turns the logo into the "always-on" identity moment */
.brand {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: var(--card-alt); color: var(--ink); }

/* ---- Main layout ---- */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 24px 120px;
}

/* =========================================================
   SEARCH PAGE (Phase 1 — Google-clone home + results layout)
   ========================================================= */
.search-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

/* On the empty homepage, the top header becomes a transparent bar so the
   centered hero owns the page. Keep it in normal flow (no absolute) so
   the verify-email banner and any future top-of-page banners don't overlap. */
body.search-empty > header.hero,
body:has(.search-page[data-state="empty"]) > header.hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  position: static;
  box-shadow: none;
}
/* The big centered brand IS the headline now — hide the small one
   in the corner so we don't double up. */
body.search-empty > header.hero .brand,
body:has(.search-page[data-state="empty"]) > header.hero .brand {
  visibility: hidden;
}
/* Tighten the empty hero's vertical centering to account for header in flow. */
body.search-empty .empty-state,
body:has(.search-page[data-state="empty"]) .empty-state {
  min-height: calc(100vh - 280px);
}

/* ---- Empty state: centered logo + giant search ---- */
.empty-state {
  min-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px 40px;
  gap: 18px;
  position: relative;
  /* Make sure the page content (brand + search bar + chips) sits ABOVE
     the gecko-tracks decoration. */
  isolation: isolate;
}

/* ---- Gecko footprints — a continuous trail across the homepage ----
   Seven prints walking diagonally from upper-left to lower-right, each
   one alternating left/right foot (mirrored along X) and rotated to
   "face" along the path. They pass behind the centered search bar
   thanks to z-index isolation on the empty-state — looks like a gecko
   walked through.
   • Light mode:  ~13% opacity — visible but never competing.
   • Dark  mode:  ~22% baseline that pulses with a soft green glow,
                  giving a literal "glow-in-the-dark" feel that suits
                  the gecko theme.
   Pure decoration: pointer-events disabled, hidden on mobile. */
.gecko-tracks-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.empty-state > .empty-brand,
.empty-state > .empty-tagline,
.empty-state > .empty-search-form,
.empty-state > .empty-quicklinks {
  position: relative;
  z-index: 1;
}
.gecko-print {
  position: absolute;
  width: 60px; height: 60px;
  fill: var(--accent, #22c55e);
  opacity: 0;                  /* fades in via animation */
  animation-fill-mode: forwards;
}
/* Hindfeet are smaller — geckos' back feet are noticeably smaller than
   their front feet, and the trail looks more authentic with the size
   variation. */
.gecko-print-hind {
  width: 48px; height: 48px;
}

/* ---- Lateral-sequence gait — two stride cycles separated by the
   search bar. The path traces a rightward-bowed curve from upper-left
   to lower-right. Each cycle: LF → RH → RF → LH.
   Within each cycle, prints alternate left and right of the centerline
   so the trail visibly zig-zags like a real walking gecko. ---- */

/* Cycle 1 — above the search bar (the gecko walks IN from upper left). */
.gecko-print-1 { top:  4%;  left: calc(14% - 18px); transform: rotate(-30deg);              animation: geckoFadeIn 0.9s ease-out 0.10s forwards; }
.gecko-print-2 { top: 13%;  left: calc(22% + 14px); transform: rotate(-22deg) scaleX(-1);   animation: geckoFadeIn 0.9s ease-out 0.22s forwards; }
.gecko-print-3 { top: 24%;  left: calc(30% - 16px); transform: rotate(-12deg);              animation: geckoFadeIn 0.9s ease-out 0.34s forwards; }
.gecko-print-4 { top: 33%;  left: calc(40% + 12px); transform: rotate( -2deg) scaleX(-1);   animation: geckoFadeIn 0.9s ease-out 0.46s forwards; }

/* Cycle 2 — below the search bar (the gecko continues, exiting lower right). */
.gecko-print-5 { top: 60%;  left: calc(56% - 18px); transform: rotate( 12deg);              animation: geckoFadeIn 0.9s ease-out 0.58s forwards; }
.gecko-print-6 { top: 69%;  left: calc(66% + 14px); transform: rotate( 20deg) scaleX(-1);   animation: geckoFadeIn 0.9s ease-out 0.70s forwards; }
.gecko-print-7 { top: 80%;  left: calc(76% - 14px); transform: rotate( 28deg);              animation: geckoFadeIn 0.9s ease-out 0.82s forwards; }
.gecko-print-8 { top: 90%;  left: calc(86% + 10px); transform: rotate( 36deg) scaleX(-1);   animation: geckoFadeIn 0.9s ease-out 0.94s forwards; }

@keyframes geckoFadeIn {
  from { opacity: 0;    }
  to   { opacity: 0.16; }
}

/* The search bar sits above the gecko-prints layer via z-index. The input
   itself already has its own background (see .empty-search-form input
   below), and the trail's positions leave a clean vertical gap around
   the form's row, so prints can't bleed through. We just need to make
   sure the form has a higher stacking order than the prints. */
.empty-search-form {
  position: relative;
  z-index: 2;
}

/* ---- Dark mode: glow-in-the-dark slow pulse ----
   After the initial fade-in (handled by geckoFadeIn), each print runs
   an infinite slow pulse that brightens the green glow and bumps
   opacity. We chain two animations on each print — the in-and-out
   delay carries through. */
:root[data-theme="dark"] .gecko-print {
  fill: #34d399;          /* brighter green so the glow reads on dark */
}
:root[data-theme="dark"] .gecko-print-1 { animation: geckoFadeInDark 0.9s ease-out 0.10s forwards, geckoGlow 4.5s ease-in-out 1.0s infinite; }
:root[data-theme="dark"] .gecko-print-2 { animation: geckoFadeInDark 0.9s ease-out 0.22s forwards, geckoGlow 4.5s ease-in-out 1.3s infinite; }
:root[data-theme="dark"] .gecko-print-3 { animation: geckoFadeInDark 0.9s ease-out 0.34s forwards, geckoGlow 4.5s ease-in-out 1.6s infinite; }
:root[data-theme="dark"] .gecko-print-4 { animation: geckoFadeInDark 0.9s ease-out 0.46s forwards, geckoGlow 4.5s ease-in-out 1.9s infinite; }
:root[data-theme="dark"] .gecko-print-5 { animation: geckoFadeInDark 0.9s ease-out 0.58s forwards, geckoGlow 4.5s ease-in-out 2.2s infinite; }
:root[data-theme="dark"] .gecko-print-6 { animation: geckoFadeInDark 0.9s ease-out 0.70s forwards, geckoGlow 4.5s ease-in-out 2.5s infinite; }
:root[data-theme="dark"] .gecko-print-7 { animation: geckoFadeInDark 0.9s ease-out 0.82s forwards, geckoGlow 4.5s ease-in-out 2.8s infinite; }
:root[data-theme="dark"] .gecko-print-8 { animation: geckoFadeInDark 0.9s ease-out 0.94s forwards, geckoGlow 4.5s ease-in-out 3.1s infinite; }
@keyframes geckoFadeInDark {
  from { opacity: 0;    filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.0)); }
  to   { opacity: 0.24; filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.4)); }
}
@keyframes geckoGlow {
  /* Slow breath: 4.5s cycle. The 8 prints are staggered 0.3s apart so
     the pulse travels along the trail like a wave — one print near peak
     while the next is rising. */
  0%, 100% {
    opacity: 0.20;
    filter: drop-shadow(0 0 6px  rgba(52, 211, 153, 0.35));
  }
  50% {
    opacity: 0.38;
    filter: drop-shadow(0 0 16px rgba(52, 211, 153, 0.85));
  }
}

@media (max-width: 720px) {
  /* Phones already feel tight — drop the prints rather than crowd. */
  .gecko-tracks-layer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Respect users who disable animation — no fade-in, no pulse. */
  .gecko-print { animation: none !important; opacity: 0.13; }
  :root[data-theme="dark"] .gecko-print { opacity: 0.22; filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.35)); }
}
.empty-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -2px;
  line-height: 1;
}
.empty-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  /* The SVG carries its own plate gradient + shine; we just provide the
     drop shadow for that floating "logo" feel. Falls back to the gradient
     background only when the inner SVG isn't present (e.g. on smaller
     header instances of this mark). */
  background: transparent;
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 36px;
  filter: drop-shadow(0 8px 22px rgba(16, 185, 129, 0.30));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.empty-brand-mark:hover { transform: rotate(-4deg) scale(1.04); }
.empty-brand-mark .gexi-logo-svg {
  width: 100%; height: 100%;
  display: block;
}
/* Smaller instances of empty-brand-mark (e.g., results header) still
   need the old gradient-square + letter look as a fallback when the
   inline SVG isn't used. Keep the brand gradient on those. */
.results-brand .empty-brand-mark {
  background: var(--grad-brand);
}
.empty-brand-name {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.empty-tagline {
  font-size: 17px;
  color: var(--muted);
  margin: 0 0 14px;
  letter-spacing: -0.1px;
}

/* The empty-state search bar is bigger and bolder than the results one. */
.empty-search-form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 640px;
}
.empty-search-form .search-input-wrap { flex: 1; position: relative; }
/* The search-icon glyph sits absolute-left inside the input so the
   input itself has padding-left to clear it. Same on the results-page
   form via .results-search-form below. */
.empty-search-form .search-icon,
.results-search-form .search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--muted);
  pointer-events: none;
  line-height: 1;
}
.empty-search-form input {
  width: 100%;
  padding: 22px 26px 22px 56px;   /* extra left-padding to clear icon */
  font-size: 17px;
  font-family: var(--font-sans);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.empty-search-form input::placeholder { color: var(--muted); }
.empty-search-form input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-glow), var(--shadow);
}
.empty-search-form button {
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--grad-brand);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  letter-spacing: -0.1px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.empty-search-form button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  filter: brightness(1.05);
}

/* Trending strip on the empty homepage stays compact and unobtrusive. */
.empty-trending {
  margin-top: 10px;
  background: transparent;
  border: none;
  padding: 0;
  justify-content: center;
}

/* Soft brand glow behind the centered hero in dark mode. */
[data-theme="dark"] .empty-state::before {
  content: '';
  position: absolute;
  top: 30%; left: 50%;
  width: 800px; height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(16,185,129,0.18), transparent 70%);
  filter: blur(70px);
  z-index: -1;
  pointer-events: none;
}

/* ---- Results state: compact search bar at top + mode tabs ---- */
.results-state { padding-top: 8px; }
.results-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}
.results-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.5px;
  flex-shrink: 0;
  text-decoration: none;
}
.results-brand .empty-brand-mark { width: 36px; height: 36px; font-size: 18px; border-radius: var(--radius-sm); }
.results-brand .empty-brand-name { font-size: 18px; }
.results-search-form .search-input-wrap { flex: 1; position: relative; }
/* Smaller icon offset for the compact results-page form. */
.results-search-form .search-icon { left: 14px; font-size: 16px; }
.results-search-form input {
  width: 100%;
  padding: 12px 18px 12px 40px;   /* left-padding to clear the icon */
  font-size: 15px;
  font-family: var(--font-sans);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.results-search-form input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-glow);
}
.results-search-form button {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--grad-brand);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
}

/* Mode tabs row */
.mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.mode-tab {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s ease;
}
.mode-tab:hover { color: var(--ink); }
.mode-tab.active {
  color: var(--brand-700);
  border-bottom-color: var(--brand-500);
}
[data-theme="dark"] .mode-tab.active { color: var(--brand-300); }

/* Utility card (calculator, converter, etc.) */
.utility-card {
  background: var(--card);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.utility-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-brand);
}
[data-theme="dark"] .utility-card { border-color: var(--line-strong); }
.utility-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 700;
}
.utility-card-icon { font-size: 18px; }
.utility-card-label {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.utility-card-body {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.utility-expr {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-2);
  font-family: var(--font-sans);
}
.utility-equals {
  font-size: 24px;
  color: var(--muted);
  font-weight: 300;
}
.utility-result {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* =========================================================
   GENERATION INTENT — live hint chip + CTA card

   The chip surfaces under the empty-state search bar AS the user
   types something like "create an image of a sunset". One click
   jumps them to /generate.html with prompt + modality preserved.
   The CTA card is the same idea, but on the results page (richer,
   shows the cleaned prompt + a primary button). Both are styled
   with the brand gradient so they read as a featured action — not
   chrome — without overpowering the rest of the surface.
   ========================================================= */
.gen-hint {
  /* Pill that sits below the empty-state search input. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 9px 16px 9px 12px;
  font: 600 13.5px/1.2 var(--font-sans);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--brand-300, #6ee7b7);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  /* Subtle inner glow + soft drop-shadow keeps it readable on the
     gecko-trail background without being a heavy box. */
  box-shadow: 0 4px 14px rgba(16,185,129,0.12), 0 0 0 4px rgba(16,185,129,0.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  animation: genHintPop .22s ease-out;
}
.gen-hint:hover {
  transform: translateY(-1px);
  border-color: var(--accent, #22c55e);
  box-shadow: 0 8px 20px rgba(16,185,129,0.20), 0 0 0 4px rgba(16,185,129,0.10);
}
.gen-hint:active { transform: translateY(0); }
.gen-hint .gen-hint-spark {
  /* Gradient sparkle dot on the left. */
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 13px;
  flex: none;
}
.gen-hint .gen-hint-label { color: var(--muted); font-weight: 500; }
.gen-hint .gen-hint-kbd {
  margin-left: 6px;
  padding: 2px 7px;
  font: 600 11px/1 var(--font-sans);
  color: var(--muted);
  background: var(--bg-soft, #f7f7f9);
  border: 1px solid var(--line);
  border-radius: 6px;
}
[data-theme="dark"] .gen-hint .gen-hint-kbd { background: rgba(255,255,255,0.04); }
@keyframes genHintPop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The chip is inline-flex; .empty-state is a column flexbox with
   align-items: center, so it centers naturally. We only need to
   override the default block alignment when the parent isn't flex. */
.gen-hint { align-self: center; }

/* ---- Results-page CTA card ---- */
.generate-cta {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-300, #6ee7b7);
  background:
    linear-gradient(135deg, rgba(16,185,129,0.08), rgba(132,204,22,0.04)),
    var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.generate-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-brand);
}
[data-theme="dark"] .generate-cta {
  border-color: var(--line-strong);
  background:
    linear-gradient(135deg, rgba(16,185,129,0.10), rgba(132,204,22,0.04)),
    var(--card);
}
.generate-cta-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  box-shadow: 0 6px 16px rgba(16,185,129,0.30);
}
.generate-cta-text { min-width: 0; }
.generate-cta-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: 2px;
}
.generate-cta-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  /* Keep long prompts on one line with ellipsis. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.generate-cta-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
}
.generate-cta-btn {
  padding: 10px 16px;
  font: 600 13.5px/1 var(--font-sans);
  color: #fff;
  background: var(--grad-brand);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 6px 14px rgba(16,185,129,0.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.generate-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 10px 20px rgba(16,185,129,0.32); }
.generate-cta-btn:active { transform: translateY(0); }

/* On narrow screens stack the CTA into rows. */
@media (max-width: 560px) {
  .generate-cta {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    row-gap: 10px;
  }
  .generate-cta-btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* =========================================================
   QUICK LINKS on empty homepage
   ========================================================= */
.empty-quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  max-width: 720px;
}
.quicklink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.quicklink:hover {
  border-color: var(--brand-300);
  color: var(--brand-700);
  background: var(--brand-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .quicklink:hover { background: var(--indigo-soft); color: var(--brand-300); border-color: var(--brand-700); }
.quicklink span { font-weight: 600; }

/* =========================================================
   TOOLS PANEL — grid of utility apps + active tool host
   ========================================================= */
.tools-panel {
  margin-bottom: 18px;
}
.tools-grid-head {
  margin-bottom: 16px;
}
.tools-grid-head h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 4px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.tools-grid-help {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 18px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: all 0.18s ease;
  box-shadow: var(--shadow-sm);
}
.tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-300);
  box-shadow: var(--shadow-md);
}
.tool-card-icon { font-size: 26px; line-height: 1; }
.tool-card-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.tool-card-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

.tool-host {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.tool-back {
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
}
.tool-back:hover { color: var(--brand-700); }
[data-theme="dark"] .tool-back:hover { color: var(--brand-300); }
.tool-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.tool-head h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0;
}
.tool-app {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.tool-app input,
.tool-app textarea,
.tool-app select {
  padding: 11px 14px;
  font-size: 14.5px;
  font-family: var(--font-sans);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  width: 100%;
}
.tool-app input:focus,
.tool-app textarea:focus,
.tool-app select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-glow);
}
.tool-app label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.tool-note {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}

/* ---- Calculator UI ---- */
.calculator-app .calc-display {
  text-align: right;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  padding: 18px 16px;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}
.calc-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.calc-key {
  padding: 16px 0;
  font-size: 17px;
  font-weight: 600;
  background: var(--card-alt);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.1s ease;
  font-family: var(--font-sans);
}
.calc-key:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-300); }
[data-theme="dark"] .calc-key:hover { background: var(--indigo-soft); color: var(--brand-300); }
.calc-key:active { transform: scale(0.96); }
.calc-key.calc-op { color: var(--brand-700); font-weight: 700; }
[data-theme="dark"] .calc-key.calc-op { color: var(--brand-300); }
.calc-key.calc-eq {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
}
.calc-key.calc-eq:hover { filter: brightness(1.05); color: #fff; }
.calc-key-wide { grid-column: span 2; }

/* ---- Mortgage / Tip / BMI shared output blocks ---- */
.mortgage-out, .tip-out {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--card-alt);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
}
.mortgage-out-row, .tip-out > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mortgage-label, .tip-out span { font-size: 13px; color: var(--muted); }
.mortgage-value {
  font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.mortgage-secondary { font-size: 16px; -webkit-text-fill-color: var(--ink); color: var(--ink); background: none; }
.tip-out strong { font-size: 18px; font-weight: 800; color: var(--ink); }

/* ---- Currency / Unit row ---- */
.currency-row, .unit-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 8px;
}
.currency-arrow {
  text-align: center;
  font-size: 22px;
  color: var(--muted);
  font-weight: 300;
  margin: 4px 0;
}
.unit-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.unit-cat {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all 0.15s ease;
}
.unit-cat:hover { color: var(--brand-700); border-color: var(--brand-300); }
.unit-cat.active { background: var(--grad-brand); color: #fff; border-color: transparent; }

/* ---- BMI ---- */
.unit-toggle { display: flex; gap: 14px; font-size: 13px; }
.unit-toggle label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.bmi-out {
  text-align: center;
  padding: 18px;
  background: var(--card-alt);
  border-radius: var(--radius-md);
  margin-top: 6px;
}
.bmi-num {
  font-size: 56px; font-weight: 800; letter-spacing: -2px; line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bmi-cat { font-size: 14px; color: var(--muted); margin-top: 4px; font-weight: 600; }

/* ---- Password Generator ---- */
.password-app input[type="range"] { width: 100%; accent-color: var(--brand-500); }
.pw-toggles {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--ink-2);
}
.pw-toggles label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.pw-output { display: flex; gap: 6px; align-items: center; }
.pw-output input {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.pw-strength { margin-top: 2px; font-weight: 500; }

/* ---- Word counter ---- */
.wc-app textarea {
  min-height: 180px;
  font-family: var(--font-sans);
  resize: vertical;
}
.wc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.wc-stats > div {
  background: var(--card-alt);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-align: center;
  display: grid; gap: 2px;
}
.wc-stats strong {
  font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.wc-stats span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }

/* ---- Document Chat ---- */
.docchat-app { gap: 16px; }
.docchat-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 36px 18px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--card-alt);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.docchat-drop:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}
[data-theme="dark"] .docchat-drop:hover { background: var(--indigo-soft); }
.docchat-drop-icon  { font-size: 36px; line-height: 1; margin-bottom: 4px; }
.docchat-drop-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.docchat-drop-help  { font-size: 12.5px; color: var(--muted); }

.docchat-doc-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.docchat-doc-icon { font-size: 22px; }
.docchat-doc-info { flex: 1; min-width: 0; }
.docchat-doc-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docchat-doc-meta { font-size: 12px; color: var(--muted); }

.docchat-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding: 6px 4px 12px;
  margin-bottom: 8px;
}
.docchat-thread:empty::after {
  content: 'Ask anything about this document. Try: "summarize the main points" or "what does it say about X?"';
  display: block;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px 12px;
  font-style: italic;
}
.docchat-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  line-height: 1.5;
  font-size: 14px;
}
.docchat-msg-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.docchat-msg-user {
  align-self: flex-end;
  background: var(--grad-brand);
  color: #fff;
}
.docchat-msg-user .docchat-msg-role { color: rgba(255,255,255,0.85); }
.docchat-msg-assistant {
  align-self: flex-start;
  background: var(--card-alt);
  color: var(--ink);
  border: 1px solid var(--line);
}

.docchat-input-row {
  display: flex;
  gap: 8px;
}
.docchat-input-row input {
  flex: 1;
}
.docchat-input-row button {
  padding: 0 18px;
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
}
.docchat-input-row button:disabled { opacity: 0.6; cursor: progress; }

.docchat-history-head {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 16px 0 10px;
}
.docchat-history-list {
  display: grid;
  gap: 8px;
}
.docchat-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: all 0.15s ease;
}
.docchat-history-item:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
[data-theme="dark"] .docchat-history-item:hover { background: var(--indigo-soft); }
.docchat-history-icon { font-size: 18px; }
.docchat-history-info { display: grid; gap: 2px; flex: 1; min-width: 0; }
.docchat-history-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docchat-history-meta { font-size: 11.5px; color: var(--muted); }

/* ---- Voice / TTS ---- */
.voice-app textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--font-sans);
  line-height: 1.55;
}
.voice-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.voice-controls label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 220px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.voice-controls select {
  flex: 1;
  padding: 9px 12px;
  font-size: 13.5px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}
.voice-counter {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.voice-controls button {
  padding: 10px 20px;
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: -0.1px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.voice-controls button:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: var(--shadow-md); }
.voice-controls button:disabled { opacity: 0.6; cursor: progress; transform: none; }
.voice-error {
  padding: 10px 14px;
  background: var(--red-soft);
  color: var(--red);
  border-radius: var(--radius);
  font-size: 13px;
}
.voice-result {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 16px;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.voice-result audio { width: 100%; }
.voice-actions {
  display: flex;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
}
.voice-actions a, .voice-actions button {
  background: transparent;
  color: var(--brand-700);
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-sans);
}
[data-theme="dark"] .voice-actions a, [data-theme="dark"] .voice-actions button { color: var(--brand-300); }
.voice-actions a:hover, .voice-actions button:hover { text-decoration: underline; }
.voice-meta {
  font-size: 12px;
  color: var(--muted);
  display: none;
}

/* ---- Transcription ---- */
.transcribe-app { gap: 14px; }
.trx-progress {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.trx-progress-bar {
  height: 6px;
  background: var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.trx-progress-fill {
  height: 100%;
  background: var(--grad-brand);
  width: 0;
  transition: width 0.3s ease;
}
.trx-progress-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.trx-result {
  display: grid;
  gap: 10px;
}
.trx-meta {
  font-size: 12px;
  color: var(--muted);
}
.trx-result textarea {
  width: 100%;
  min-height: 240px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  resize: vertical;
}
.trx-actions {
  display: flex;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
}
.trx-actions button {
  background: transparent;
  color: var(--brand-700);
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-sans);
}
[data-theme="dark"] .trx-actions button { color: var(--brand-300); }
.trx-actions button:hover { text-decoration: underline; }

/* ---- Image ops (background remover, upscaler) ---- */
.imageop-app { gap: 14px; }
.imageop-result { display: grid; gap: 12px; }
.imageop-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.imageop-pair figure {
  margin: 0;
  display: grid;
  gap: 8px;
}
.imageop-pair figcaption {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.imageop-pair img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    repeating-conic-gradient(var(--card-alt) 0 25%, transparent 0 50%) 50% / 16px 16px,
    var(--card);
}

/* ---- Translate ---- */
.translate-app { gap: 12px; }
.translate-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: end;
}
.translate-row label {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.translate-row select {
  padding: 9px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
}
.translate-row #tr-swap {
  height: 38px;
  width: 38px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  font-family: var(--font-sans);
  transition: all 0.15s ease;
}
.translate-row #tr-swap:hover { border-color: var(--brand-300); color: var(--brand-700); }
[data-theme="dark"] .translate-row #tr-swap:hover { color: var(--brand-300); }
.translate-app textarea {
  min-height: 130px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  resize: vertical;
}
.translate-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.translate-actions button {
  padding: 10px 22px;
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.translate-actions button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.translate-actions button:disabled { opacity: 0.6; cursor: progress; }

/* ---- Generated music + video result cards on the Generate page ---- */
.gen-audio, .gen-video {
  width: 100%;
  border-radius: var(--radius);
  background: var(--card-alt);
}
.gen-placeholder {
  padding: 36px 18px;
  text-align: center;
  background: var(--card-alt);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Content (gallery) action row + Submit button ---- */
.content-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.content-submit-btn {
  background: var(--accent, #22c55e);
  color: #fff; border: 0; border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.content-submit-btn:hover { filter: brightness(1.05); }

/* Right-side group: sort dropdown + Submit button */
.content-actions-right {
  display: flex; align-items: center; gap: 10px;
}
.content-sort {
  appearance: none; -webkit-appearance: none;
  padding: 7px 28px 7px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--ink); font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.content-sort:focus { outline: 2px solid var(--accent, #22c55e); outline-offset: 2px; }

/* ---- Submit-content modal ---- */
.submit-modal-card {
  max-width: 540px; width: 100%;
}
.submit-kind-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-top: 14px;
}
.submit-kind-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px; font-size: 12.5px; font-weight: 600;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.submit-kind-btn span { font-size: 12px; }
.submit-kind-btn:hover {
  border-color: var(--accent, #22c55e);
  transform: translateY(-1px);
}
/* Big emoji on top of each kind button */
.submit-kind-btn { font-size: 22px; }

.submit-form-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.submit-form-kind { font-weight: 600; color: var(--ink); }
.submit-tool-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.submit-tool-half { width: 100%; }
.submit-preview { margin: 6px 0 4px; }

/* Upload progress bar inside the submit modal */
.submit-progress {
  margin: 10px 0 6px;
  display: grid; gap: 6px;
}
.submit-progress-bar {
  height: 8px; border-radius: 999px;
  background: var(--bg-soft, rgba(0,0,0,0.08));
  overflow: hidden;
}
:root[data-theme="dark"] .submit-progress-bar { background: rgba(255,255,255,0.08); }
.submit-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2, #84cc16), var(--accent, #22c55e));
  transition: width 0.18s ease;
}
.submit-progress-label {
  font-size: 12px; color: var(--muted); text-align: right;
}

/* Tool tile — show prompt snippet on the card */
.gallery-tool-tile {
  aspect-ratio: 1;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(132,204,22,0.06));
  border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] .gallery-tool-tile {
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(132,204,22,0.12));
}
.gallery-tool-head {
  display: flex; align-items: center; gap: 8px;
}
.gallery-tool-tile .gallery-tool-icon { font-size: 28px; line-height: 1; }
.gallery-tool-tile .gallery-tool-label {
  font-size: 11px; font-weight: 600; color: var(--accent, #22c55e);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.gallery-tool-snippet {
  flex: 1; min-height: 0;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.45; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
  overflow: hidden;
  background: rgba(255,255,255,0.5);
  padding: 8px 10px; border-radius: 8px;
}
:root[data-theme="dark"] .gallery-tool-snippet { background: rgba(255,255,255,0.04); }
.gallery-tool-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 10.5px; color: var(--muted);
}
.gallery-tool-meta span {
  background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 4px;
  text-transform: capitalize;
}
:root[data-theme="dark"] .gallery-tool-meta span { background: rgba(255,255,255,0.06); }

/* Lightbox keyboard hints — small text bottom-center */
.lightbox-hints {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* ---- Marketplace: price tag, lock badge, bookmark, locked stage ---- */
.gallery-title-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.gallery-price {
  font-size: 13px; font-weight: 700;
  color: var(--accent, #22c55e);
  white-space: nowrap;
}
.gallery-lock-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 8px; border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.gallery-item-locked .gallery-image,
.gallery-item-locked .gallery-video {
  filter: blur(8px);
  opacity: 0.7;
}
.bookmark-btn {
  background: transparent; border: 0; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 4px 6px;
  color: var(--muted);
}
.bookmark-btn:hover { color: var(--ink); }
.bookmark-btn.bookmarked { color: #fbbf24; }
.bookmark-btn.bookmarked .bookmark-icon { font-size: 18px; }

.lightbox-locked {
  background: var(--card);
  color: var(--ink);
  max-width: 480px; padding: 36px 32px;
  border-radius: 14px; text-align: center;
  box-shadow: 0 12px 60px rgba(0,0,0,0.5);
}
.lightbox-locked-icon {
  font-size: 48px; margin-bottom: 8px;
}
.lightbox-locked h3 { margin: 0 0 8px; font-size: 18px; }
.lightbox-locked p  { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.lightbox-locked p strong { color: var(--accent, #22c55e); font-size: 18px; }
.lightbox-locked .auth-submit { width: 100%; }

/* ---- Tile variants for non-image kinds ---- */
.gallery-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.25));
  pointer-events: none; transition: opacity 0.15s;
}
.gallery-body { position: relative; cursor: pointer; }
.gallery-body:hover .gallery-overlay { opacity: 1; }
/* Document tile — centered icon (tool tile has its own layout below). */
.gallery-doc-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1; padding: 24px;
  background: linear-gradient(135deg, var(--bg-soft, #f7f7f9), var(--card));
  border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] .gallery-doc-tile {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.gallery-doc-icon {
  font-size: 56px; line-height: 1;
}
.gallery-doc-label {
  margin-top: 10px; font-size: 12px; color: var(--muted); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.gallery-views {
  font-size: 11.5px; color: var(--muted); margin-left: auto;
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(8, 8, 16, 0.92);
  display: flex; flex-direction: column;
  padding: 32px 16px;
}
.lightbox-stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.lightbox-image {
  max-width: 96vw; max-height: 80vh; object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 60px rgba(0,0,0,0.5);
}
.lightbox-video, .lightbox-doc {
  width: 96vw; max-width: 1200px; max-height: 80vh;
  border-radius: 8px; background: #000;
}
.lightbox-doc { background: #fff; }
.lightbox-audio-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.lightbox-audio-art {
  font-size: 96px; line-height: 1;
  background: linear-gradient(135deg, #10b981, #22c55e);
  width: 240px; height: 240px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.lightbox-audio { width: 480px; max-width: 90vw; }
.lightbox-tool {
  background: var(--card);
  color: var(--ink);
  max-width: 720px; width: 100%;
  padding: 28px 32px; border-radius: 14px;
  box-shadow: 0 12px 60px rgba(0,0,0,0.5);
  text-align: left;
}
.lightbox-tool-icon {
  font-size: 40px;
}
.lightbox-tool-modality {
  display: inline-block; margin-top: 6px;
  padding: 2px 10px; border-radius: 999px;
  background: rgba(34, 197, 94, 0.15); color: var(--accent, #22c55e);
  font-size: 12px; font-weight: 600;
}
.lightbox-tool h3 { margin: 8px 0 10px; }
.lightbox-tool-prompt {
  background: var(--bg-soft, #f7f7f9);
  padding: 14px 16px; border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  max-height: 50vh; overflow-y: auto;
}
:root[data-theme="dark"] .lightbox-tool-prompt { background: rgba(255,255,255,0.05); }
.lightbox-tool-extras {
  margin-top: 10px; font-size: 12px; color: var(--muted);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.lightbox-meta {
  margin: 12px auto 0;
  max-width: 1200px; width: 100%;
  background: rgba(255,255,255,0.06);
  color: #f5f5fa;
  border-radius: 12px;
  padding: 14px 18px;
  backdrop-filter: blur(6px);
}
.lightbox-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.lightbox-meta-title { margin: 0; font-size: 16px; }
.lightbox-meta-byline { font-size: 12.5px; opacity: 0.75; margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.lightbox-meta-byline a { color: inherit; text-decoration: underline; }
.lightbox-meta-desc { margin: 8px 0 0; font-size: 13.5px; opacity: 0.9; }
.lightbox-meta-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.lightbox-meta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lightbox-meta .link-btn { color: #fff; }
.lightbox-meta .link-btn:hover { color: #fff; opacity: 0.8; }

.lightbox-close, .lightbox-nav {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  border: 0; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-nav {
  top: 50%; transform: translateY(-50%);
  font-size: 32px;
}
.lightbox-prev { left: 18px; right: auto; }
.lightbox-next { right: 18px; }
.lightbox-empty {
  color: rgba(255,255,255,0.6); font-size: 14px;
}

@media (max-width: 600px) {
  .lightbox-meta-row { flex-direction: column; align-items: flex-start; }
  .submit-tool-row   { grid-template-columns: 1fr; }
  .lightbox-nav      { width: 36px; height: 36px; font-size: 24px; }
}

/* ---- Content (gallery) filter pills ---- */
.content-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -8px 0 22px;
  padding: 4px;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  width: fit-content;
}
.content-filter-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.content-filter-btn:hover { color: var(--ink); }
.content-filter-btn.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ---- Audio + video cards inside the Content gallery ---- */
.gallery-audio-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  padding: 24px 16px 16px;
  background: var(--grad-brand-soft);
  gap: 16px;
}
[data-theme="dark"] .gallery-audio-wrap {
  background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(132,204,22,0.06));
}
.gallery-audio-art {
  font-size: 64px;
  line-height: 1;
  opacity: 0.85;
}
.gallery-audio {
  width: 100%;
  max-width: 280px;
}
.gallery-video {
  width: 100%;
  height: auto;
  display: block;
  background: var(--card-alt);
}

/* =========================================================
   PRICING PAGE
   ========================================================= */
.billing-period-toggle {
  display: inline-flex;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
  margin-top: 18px;
}
.period-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
}
.period-btn:hover { color: var(--ink); }
.period-btn.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}
.plan-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.plan-card.plan-featured {
  border-color: var(--brand-400);
  box-shadow: var(--shadow-md);
}
.plan-card.plan-elite {
  /* Subtle dark/luxe treatment so Elite reads "premium" instantly. */
  background: linear-gradient(180deg, var(--card) 0%, var(--card-alt) 100%);
  border-color: var(--brand-700);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(16,185,129,0.20);
}
.plan-card.plan-elite .plan-tag {
  background: linear-gradient(135deg, #1f2937, #111827);
  color: #fff;
}
[data-theme="dark"] .plan-card.plan-elite .plan-tag {
  background: var(--grad-creative);
}
.plan-card.plan-elite .plan-price-num {
  background: var(--grad-creative);   /* violet → pink → orange */
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.plan-card.plan-featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: var(--grad-brand);
  z-index: -1;
  opacity: 0.05;
  pointer-events: none;
}
.plan-tag {
  position: absolute;
  top: -10px; left: 24px;
  background: var(--grad-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.plan-head h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.4px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.plan-price-num {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.5px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.plan-price-per { font-size: 14px; color: var(--muted); font-weight: 600; }
.plan-blurb { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.plan-replaces {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--green-soft);
  color: var(--green);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}
[data-theme="dark"] .plan-replaces {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
}
.plan-replaces strong {
  font-weight: 800;
  letter-spacing: -0.2px;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.plan-features li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.plan-features li::before {
  content: '✓';
  color: var(--brand-600);
  font-weight: 800;
  flex-shrink: 0;
}
[data-theme="dark"] .plan-features li::before { color: var(--brand-300); }
.plan-limits {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.plan-limits ul {
  list-style: none;
  padding: 0; margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  display: grid;
  gap: 5px;
}
.plan-cta { margin-top: auto; }
.plan-cta .auth-submit {
  width: 100%;
  cursor: pointer;
  text-align: center;
}
.plan-cta .auth-submit.secondary {
  background: var(--card-alt);
  color: var(--ink-2);
  box-shadow: none;
}

.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}
.pack-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  text-align: center;
  display: grid;
  gap: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pack-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pack-credits {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.pack-credits span { font-size: 13px; font-weight: 600; color: var(--muted); -webkit-text-fill-color: var(--muted); margin-left: 6px; }
.pack-price { font-size: 16px; font-weight: 700; color: var(--ink); }
.pack-btn { width: 100%; cursor: pointer; }

/* =========================================================
   PRICING PAGE — value-prop, full feature comparison, FAQ
   ========================================================= */

/* Why-not-them section: grid of competitor cards + a totals block */
.value-prop {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  margin-top: 24px;
}
.competitors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.comp-card {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: grid;
  gap: 4px;
}
.comp-name { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.1px; }
.comp-cap  { font-size: 11.5px; color: var(--muted); }
.comp-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink-2);
  letter-spacing: -0.4px;
  margin-top: 4px;
}
.comp-price span { font-size: 11px; font-weight: 500; color: var(--muted); }

.value-totals {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 28px;
  display: grid;
  gap: 14px;
}
.total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-sans);
}
.total-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.total-num {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
}
.total-num small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.total-bad .total-num { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.total-good .total-num {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.value-tagline {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  text-align: center;
}
.value-tagline strong {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* Five-tier plan grid is denser than the three-tier original */
.plans-grid.five-tier {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.plans-grid.five-tier .plan-card {
  padding: 22px 20px;
}
.plans-grid.five-tier .plan-head h3 { font-size: 19px; }
.plans-grid.five-tier .plan-price-num { font-size: 30px; }
.plans-grid.five-tier .plan-features { font-size: 13px; gap: 6px; }
.plans-grid.five-tier .plan-features li { font-size: 13px; }

/* Full comparison table */
.compare-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px;
}
.compare-table-full {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-family: var(--font-sans);
  min-width: 720px;
}
.compare-table-full th, .compare-table-full td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}
.compare-table-full th {
  background: var(--card-alt);
  font-weight: 700;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 1;
}
.compare-table-full thead th { padding: 16px 14px; }
.compare-table-full .row-label {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
}
.compare-table-full td.row-label { background: var(--card-alt); }
.compare-table-full .col-name { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; }
.compare-table-full .col-price { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.compare-table-full .col-price small { font-size: 11px; }
.compare-table-full .col-featured {
  background: var(--brand-50);
  color: var(--ink);
}
[data-theme="dark"] .compare-table-full .col-featured { background: var(--indigo-soft); }
.compare-table-full .col-featured .col-price { color: var(--brand-700); }
[data-theme="dark"] .compare-table-full .col-featured .col-price { color: var(--brand-300); }
.compare-table-full tbody tr:last-child td { border-bottom: none; }
.cell-yes { color: var(--brand-600); font-weight: 800; font-size: 16px; }
[data-theme="dark"] .cell-yes { color: var(--brand-300); }
.cell-no  { color: var(--muted); font-weight: 700; }

/* FAQ */
.faq-grid {
  display: grid;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-item[open] {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .faq-item[open] { border-color: var(--line-strong); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  position: relative;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--muted);
  font-weight: 300;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* Billing page table */
.billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.billing-table th, .billing-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.billing-table th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 700;
}
.billing-table tr:last-child td { border-bottom: none; }

/* =========================================================
   MOBILE — empty hero, results, tools panel
   We make two passes:
     - <= 640px : tablet / large phones in landscape
     - <= 480px : true phone portrait — search bar goes UP, not center
   The big change vs. before: on small phones we anchor the hero to
   the top of the viewport instead of vertically centering it. Vertical
   centering pushes the search bar to ~50% of viewport on tall phones,
   so a thumb has to reach down past the brand block to tap the input.
   By anchoring near the top we bring the search bar into thumb range.
   ========================================================= */
@media (max-width: 640px) {
  .empty-brand          { font-size: 40px; gap: 8px; }
  .empty-brand-mark     { width: 48px; height: 48px; font-size: 24px; }
  .empty-search-form    { flex-direction: column; }
  .empty-search-form button { padding: 14px; }
  .results-search-form  { flex-wrap: wrap; }
  .results-brand        { flex: 0 0 auto; }
  .mode-tabs            { overflow-x: auto; flex-wrap: nowrap; }
  .mode-tab             { white-space: nowrap; }
  .utility-result       { font-size: 28px; }
  .tools-grid           { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .calculator-app .calc-key { padding: 14px 0; font-size: 15px; }
}

/* Phone portrait — pull the search bar up where thumbs can reach it.
   This is the layout the user actually sees on a phone-in-hand. */
@media (max-width: 480px) {
  /* Hero anchors to the top of the available space, not center. */
  .empty-state {
    min-height: auto;
    justify-content: flex-start;
    padding: 20px 14px 28px;
    gap: 12px;
  }
  body.search-empty .empty-state,
  body:has(.search-page[data-state="empty"]) .empty-state {
    min-height: auto;
  }

  /* Brand mark + name compress so they stop dominating the fold. */
  .empty-brand          { font-size: 34px; gap: 8px; line-height: 1; }
  .empty-brand-mark     { width: 44px; height: 44px; }
  .empty-brand-mark     { filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.25)); }

  /* Tagline isn't load-bearing on mobile — the brand carries the tone.
     Hide rather than shrink: every saved pixel pulls the input up. */
  .empty-tagline        { display: none; }

  /* Search input — slightly less tall so it doesn't dominate either. */
  .empty-search-form input {
    padding: 16px 18px 16px 44px;
    font-size: 16px;          /* 16px+ stops iOS Safari auto-zooming on focus */
  }
  .empty-search-form .search-icon { left: 14px; font-size: 18px; }

  /* Quicklinks — wrap onto 2–3 rows on a phone so every chip is
     visible without scrolling. Compact padding + smaller font so 3
     chips fit per row on a typical 360–420px-wide phone. */
  .empty-quicklinks {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0 4px;
    max-width: 100%;
  }
  .quicklink {
    flex: 0 0 auto;
    padding: 7px 11px;
    font-size: 12.5px;
    gap: 5px;
    line-height: 1.1;
  }
  .quicklink span { font-size: 12.5px; }

  /* Generation hint chip — reduce padding so it doesn't push content. */
  .gen-hint { padding: 7px 13px 7px 9px; font-size: 13px; }
  .gen-hint .gen-hint-spark { width: 20px; height: 20px; font-size: 12px; }

  /* Generate-CTA card on results page — switch to single-column rows
     a touch earlier so it doesn't overflow on narrow screens. */
  .generate-cta {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    row-gap: 8px;
    padding: 14px 16px;
  }
  .generate-cta-icon { width: 44px; height: 44px; }
  .generate-cta-btn  { grid-column: 1 / -1; justify-content: center; }
}
.headline {
  font-size: 48px;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -1.2px;
  line-height: 1.05;
}
.subhead {
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 36px;
  max-width: 600px;
  line-height: 1.55;
}

/* ---- Search form + autocomplete ---- */
.search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.search-input-wrap {
  flex: 1;
  position: relative;
}
.search-form input {
  width: 100%;
  padding: 18px 22px;
  font-size: 16px;
  font-family: var(--font-sans);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.search-form input::placeholder { color: var(--muted); }
.search-form input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-glow), var(--shadow-sm);
}
.search-form button {
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--grad-brand);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  letter-spacing: -0.1px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.search-form button:hover  { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.search-form button:active { transform: translateY(0); filter: brightness(0.95); }

.suggestions {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
}
.suggestions li {
  padding: 10px 14px;
  font-size: 14.5px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
}
.suggestions li:hover,
.suggestions li.active { background: var(--card-alt); color: var(--ink); }

/* ---- Category chips ---- */
.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.cat-chip {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: capitalize;
}
.cat-chip:hover {
  border-color: var(--brand-400);
  color: var(--brand-600);
  background: var(--brand-50);
}
[data-theme="dark"] .cat-chip:hover { background: var(--indigo-soft); color: var(--brand-300); }
.cat-chip .cat-count {
  margin-left: 6px;
  font-weight: 500;
  opacity: 0.7;
}

/* ---- Did-you-mean banner ---- */
.suggestion-bar {
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  color: var(--amber);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .suggestion-bar { color: #fbbf24; border-color: rgba(251,191,36,0.4); }
.suggestion-bar a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- Status ---- */
.status {
  font-size: 14px;
  color: #777;
  min-height: 22px;
  margin-bottom: 12px;
}

/* ---- Result cards ---- */
.results { display: grid; gap: 14px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
}
.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.card.selected {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-glow);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 4px;
}
.card-name {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge {
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
  font-size: 12px;
  letter-spacing: 0.1px;
}
.badge.cat   { background: var(--brand-50); color: var(--brand-700); }
.badge.free  { background: var(--green-soft);  color: var(--green); }
.badge.price { background: var(--slate-soft);  color: var(--slate); }
[data-theme="dark"] .badge.cat   { background: var(--indigo-soft); color: var(--brand-300); }
[data-theme="dark"] .badge.free  { background: rgba(74,222,128,0.12); color: #4ade80; }
[data-theme="dark"] .badge.price { background: var(--card-alt); color: var(--ink-2); }

.rating { color: #555; font-weight: 600; }

.card-desc {
  color: #444;
  font-size: 15px;
  margin: 8px 0 12px;
}

.features-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
.features-list li {
  font-size: 13.5px;
  color: #444;
  position: relative;
  padding-left: 14px;
}
.features-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--indigo);
  font-weight: 700;
}

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.card-foot-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.score-tag { font-size: 12px; color: #888; }

.compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--slate);
  cursor: pointer;
  user-select: none;
}
.compare-toggle input { accent-color: var(--indigo); }

.visit-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-700);
  border: 1.5px solid var(--brand-300);
  background: var(--brand-50);
  border-radius: var(--radius);
  padding: 8px 16px;
  transition: all 0.15s ease;
}
[data-theme="dark"] .visit-btn { color: var(--brand-300); background: var(--indigo-soft); border-color: var(--brand-700); }
.visit-btn:hover {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* =========================================================
   WEB RESULTS — Google-style blue links
   ========================================================= */
.web-results {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.web-results-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.web-results-meta {
  font-size: 11px;
  font-weight: 500;
  color: #999;
  text-transform: none;
  letter-spacing: 0;
}

.web-results-list {
  display: grid;
  gap: 22px;
}

.web-result {
  display: block;
  text-decoration: none;
  color: inherit;
}
.web-result-source {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.web-result-title {
  font-size: 18px;
  color: #1a0dab;       /* classic Google blue (light mode) */
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 4px;
}
.web-result:visited .web-result-title { color: #6c5ce7; }
.web-result:hover   .web-result-title { text-decoration: underline; }
.web-result-snippet {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ---- Dark mode overrides for web results ---- */
[data-theme="dark"] .web-result-title       { color: #93c5fd; }   /* readable blue on dark */
[data-theme="dark"] .web-result:visited .web-result-title { color: #c4b5fd; }
[data-theme="dark"] .web-result-source      { color: var(--muted); }
[data-theme="dark"] .web-result-snippet     { color: var(--ink); opacity: 0.85; }

.web-result-skeleton {
  height: 56px;
  background: linear-gradient(90deg, var(--card-alt) 0%, var(--card) 50%, var(--card-alt) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: shimmer 1.4s ease infinite;
}

/* Infinite-scroll footer for web results — sentinel is invisible (just a
   target for IntersectionObserver), the loading hint spins while the next
   page is fetching, and the end message tells the user we're done. */
.web-results-footer {
  margin-top: 22px;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
}
.web-results-sentinel {
  width: 100%;
  height: 1px;        /* invisible scroll trigger */
}
.web-results-loading {
  font-size: 13px;
  color: var(--muted);
  padding: 12px 16px;
  background: var(--card-alt);
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 8px;
}
.web-results-loading::before {
  content: '';
  width: 12px; height: 12px;
  border: 2px solid var(--brand-300, #6ee7b7);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.web-results-end {
  font-size: 12px;
  color: var(--muted);
  padding: 16px 0 8px;
  letter-spacing: 0.3px;
}

/* ---- Empty state ---- */
.empty {
  background: var(--card);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  color: #777;
}
.empty-headline { font-size: 16px; color: var(--ink); margin: 0 0 6px; }
.empty-sub      { margin: 0 0 14px; }
.empty-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* ---- Compare bar (sticky bottom) ---- */
.compare-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(20,20,40,0.06);
  z-index: 30;
}
.compare-bar-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.compare-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.compare-chip {
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.compare-chip .x {
  cursor: pointer;
  font-weight: 700;
  opacity: 0.7;
}
.compare-chip .x:hover { opacity: 1; }

.compare-btn {
  background: var(--indigo);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 14px;
}
.compare-btn:hover     { background: var(--indigo-hover); }
.compare-btn:disabled  { background: #c7c9d6; cursor: not-allowed; }

.compare-clear {
  background: transparent;
  color: var(--muted);
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 6px 8px;
}
.compare-clear:hover { color: var(--ink); }

/* ---- Compare modal ---- */
.compare-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 35, 0.55);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.compare-modal-card {
  background: var(--card);
  border-radius: 14px;
  padding: 28px 28px 32px;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.compare-modal-card h2 {
  margin: 0 0 18px;
  font-size: 22px;
}
.compare-close {
  position: absolute;
  top: 14px; right: 16px;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.compare-close:hover { color: var(--ink); }

.compare-table {
  display: grid;
  gap: 14px;
}
.compare-row {
  display: grid;
  gap: 14px;
  align-items: stretch;
}
.compare-row.head .compare-cell { border-bottom: 2px solid var(--indigo); padding-bottom: 10px; }
.compare-cell {
  font-size: 14px;
  color: #333;
  padding: 12px 14px;
  background: #fafbfd;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.compare-cell.label {
  background: transparent;
  border: none;
  padding: 12px 0;
  font-weight: 700;
  color: var(--ink);
}
.compare-cell .name {
  font-size: 17px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.compare-cell .small {
  font-size: 12px;
  color: var(--muted);
  display: block;
}
.compare-cell ul {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
}
.compare-cell ul li { margin-bottom: 2px; }

/* =========================================================
   ANALYTICS DASHBOARD
   ========================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.stat-num {
  font-size: 36px;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.panel-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
}

.bar-list { display: grid; gap: 10px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr 50px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-2);
  font-size: 13.5px;
}
.bar-track {
  background: var(--card-alt);
  height: 12px;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: var(--radius-pill);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bar-count {
  text-align: right;
  font-weight: 700;
  color: var(--brand-700);
}
[data-theme="dark"] .bar-count { color: var(--brand-300); }

.refresh-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}
.refresh-note a {
  color: var(--indigo);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* =========================================================
   VERIFY-EMAIL BANNER (shown when logged-in user is unverified).
   Thin, calm, on-brand. Used to be loud yellow which fought the header.
   ========================================================= */
.verify-banner {
  background: var(--amber-soft);
  color: var(--amber);
  border-bottom: 1px solid var(--line);
  padding: 8px 20px;
  font-size: 13px;
  text-align: center;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
[data-theme="dark"] .verify-banner {
  background: rgba(217,119,6,0.12);
  color: #fbbf24;
}
.verify-banner .link-btn {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: inherit;
}
.verify-banner-success {
  background: var(--green-soft);
  color: var(--green);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .verify-banner-success {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
}
.verify-banner-error {
  background: var(--red-soft);
  color: var(--red);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .verify-banner-error {
  background: rgba(248,113,113,0.12);
  color: #f87171;
}

.auth-forgot {
  display: inline-block;
  margin-top: 6px;
  color: var(--indigo);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* =========================================================
   SITE FOOTER (injected by footer.js)
   ========================================================= */
.site-footer {
  margin-top: 80px;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.site-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: var(--grad-brand);
  color: #fff;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.brand-name {
  font-weight: 800;
  letter-spacing: -0.3px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.site-footer-meta { margin-left: 4px; opacity: 0.7; }
.site-footer-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer-nav a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.site-footer-nav a:hover { color: var(--brand-600); }
[data-theme="dark"] .site-footer-nav a:hover { color: var(--brand-300); }

/* =========================================================
   LEGAL / ABOUT PROSE
   ========================================================= */
.container-narrow { max-width: 720px; }
.legal-prose {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 32px;
  line-height: 1.7;
  font-size: 15px;
  color: #333;
}
.legal-prose h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 22px 0 8px;
  color: var(--ink);
}
.legal-prose ul {
  padding-left: 20px;
  margin: 6px 0 14px;
}
.legal-prose li { margin-bottom: 4px; }
.legal-prose code {
  background: #f3f4f6;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.legal-prose a { color: var(--indigo); }

/* =========================================================
   ADMIN PAGE
   ========================================================= */
.hero-admin {
  background: linear-gradient(135deg, #1f1f3a 0%, #4f46e5 100%);
}
.admin-badge {
  font-size: 10px;
  background: #ff4757;
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
  letter-spacing: 1px;
  vertical-align: middle;
}

.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.admin-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  padding: 8px 10px;
  white-space: nowrap;
}
.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table tr:hover td { background: #fafbfd; }
.admin-table .muted-cell { color: var(--muted); white-space: nowrap; }
.admin-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-table .short-id { color: var(--muted); }

.actions-cell {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.link-btn {
  background: none;
  border: none;
  color: var(--indigo);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: #b91c1c; }

.status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.status-active   { background: var(--green-soft); color: var(--green); }
.status-disabled { background: #fef3c7;          color: #92400e; }
.status-blocked  { background: #fee2e2;          color: #991b1b; }

.admin-pill {
  font-size: 10px;
  font-weight: 700;
  background: #4f46e5;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.muted-tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.kv-grid .muted { color: var(--muted); font-size: 12px; display: block; margin-bottom: 2px; }

/* =========================================================
   PROFILE PAGE
   ========================================================= */
.profile-tabs {
  display: inline-flex;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin: 24px 0 22px;
  gap: 2px;
}
.profile-tab {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
}
.profile-tab:hover { color: var(--ink); }
.profile-tab.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.profile-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.profile-card h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.profile-help {
  font-size: 13px;
  color: var(--muted);
  margin: -6px 0 16px;
}
.profile-subheading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 18px 0 8px;
}
.profile-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-size: 14px;
}
.profile-row label { color: var(--muted); font-weight: 600; }
.profile-readonly {
  color: var(--ink);
  font-weight: 500;
}

.profile-form {
  display: grid;
  gap: 12px;
}
.profile-form label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="tel"],
.profile-form input[type="date"],
.profile-form input[type="password"] {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}
.profile-form input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}
.profile-fieldset {
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 6px 0;
  display: grid;
  gap: 12px;
}
.profile-fieldset legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.profile-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.profile-success {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid #bbf7d0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.insights-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.insights-tag {
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-theme="dark"] .insights-tag { background: var(--indigo-soft); color: var(--brand-300); }
.insights-tag-count {
  background: var(--brand-500);
  color: #fff;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.activity-list li {
  background: #fafbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.activity-list .activity-meta {
  font-size: 12px;
  color: var(--muted);
}
.activity-empty {
  font-style: italic;
  color: var(--muted);
  background: transparent !important;
  border: none !important;
}

/* =========================================================
   "Best AI for this prompt" recommendation bar (Generate page)
   ========================================================= */
.recommend-bar {
  background: var(--grad-brand-soft);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
[data-theme="dark"] .recommend-bar { border-color: var(--line-strong); }
.rec-icon { font-size: 18px; }
.rec-text strong {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.rec-meta { font-size: 12px; color: var(--muted); margin-left: 4px; }
.rec-personal {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: help;
  box-shadow: var(--shadow-sm);
}
.rec-tags-line {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--muted);
  padding-top: 6px;
  border-top: 1px dashed var(--line-strong);
}
.rec-tag {
  display: inline-block;
  background: var(--card);
  color: var(--brand-700);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  margin: 0 4px;
  font-size: 11.5px;
  border: 1px solid var(--line);
}
[data-theme="dark"] .rec-tag { color: var(--brand-300); }

/* =========================================================
   USER PROFILE PAGE (/u/<username>)
   ========================================================= */
.user-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 24px 0 12px;
  padding: 26px 28px;
  background: var(--grad-brand-soft);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .user-header { border-color: var(--line-strong); }
.user-header-mark .brand-mark {
  width: 60px;
  height: 60px;
  font-size: 28px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.user-handle {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.8px;
  margin: 0 0 4px;
}
.user-joined {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
.user-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13.5px;
  color: var(--muted);
}
.user-stat strong {
  color: var(--ink);
  font-weight: 800;
  margin-right: 4px;
}

/* Make byline links visually linkable but understated */
a.gallery-author, a.comment-author {
  color: var(--indigo);
  text-decoration: none;
}
a.gallery-author:hover, a.comment-author:hover { text-decoration: underline; }

/* =========================================================
   GALLERY HERO SECTIONS (Trending + Featured)
   ========================================================= */
.hero-section {
  margin: 26px 0 8px;
}
.hero-section-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin: 22px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#all-recent-title { margin-top: 30px; }

.hero-grid .gallery-item {
  position: relative;
}
/* Make the featured cards subtly stand out — soft purple ring */
#featured-grid .gallery-item {
  box-shadow: 0 0 0 2px rgba(34,197,94,0.18);
}
#featured-grid .gallery-item::before {
  content: '✨';
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(34,197,94,0.95);
  color: #fff;
  font-size: 12px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

/* =========================================================
   GALLERY — public grid of community-shared generations
   ========================================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.gallery-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}
.gallery-body {
  position: relative;
  background: var(--card-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}
.gallery-image {
  width: 100%;
  height: auto;
  display: block;
}
.gallery-text {
  padding: 18px;
  font-size: 13.5px;
  color: #333;
  line-height: 1.55;
}
.gallery-meta {
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}
/* =========================================================
   SUBSCRIPTION TAB — self-serve plan management on /profile.html
   ========================================================= */
.sub-current {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  background: var(--bg-soft, transparent);
  margin-bottom: 18px;
}
.sub-current-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 14px;
}
.sub-label  { color: var(--muted); }
.sub-value  { color: var(--ink); font-weight: 600; }
.sub-banner-cancel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 9px;
  background: rgba(245, 158, 11, 0.12);
  color: #92400e; font-size: 13px;
  width: 100%;
}
:root[data-theme="dark"] .sub-banner-cancel { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }

.sub-action-row {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}
.sub-action-row:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.sub-other-plans {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.sub-plan-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--card);
}
.sub-plan-head {
  display: flex; justify-content: space-between; gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.sub-plan-price {
  font-size: 18px; font-weight: 700;
  color: var(--ink); white-space: nowrap;
}
.sub-plan-price span { font-size: 12px; color: var(--muted); font-weight: 500; }
.sub-plan-actions {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.link-btn.danger { color: #b91c1c; }
.link-btn.danger:hover { color: #991b1b; }
:root[data-theme="dark"] .link-btn.danger { color: #fca5a5; }

.content-source-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  background: rgba(34, 197, 94, 0.12); color: var(--accent, #22c55e);
}
.content-source-pill.content-source-legacy {
  background: rgba(100, 116, 139, 0.15); color: var(--muted);
}

/* ---- Credits & usage block ---- */
.sub-credits-card {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  margin-bottom: 14px;
}
.sub-credits-num {
  font-size: 26px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 6px;
}
.sub-credits-suffix {
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.sub-credits-help {
  flex: 1; font-size: 12.5px; color: var(--muted); min-width: 200px;
}
.sub-usage {
  display: grid; gap: 12px; margin-top: 4px;
}
.sub-usage-row {}
.sub-usage-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; margin-bottom: 5px;
}
.sub-usage-label   { color: var(--ink); font-weight: 600; }
.sub-usage-numbers { color: var(--ink); }
.sub-usage-of      { color: var(--muted); font-weight: 400; }
.sub-usage-note    { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.sub-usage-bar {
  height: 8px; border-radius: 999px;
  background: var(--bg-soft, rgba(0,0,0,0.08));
  overflow: hidden;
}
:root[data-theme="dark"] .sub-usage-bar { background: rgba(255,255,255,0.08); }
.sub-usage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2, #84cc16), var(--accent, #22c55e));
  transition: width 0.3s ease;
}
.sub-usage-bar-warn   .sub-usage-fill { background: #f59e0b; }
.sub-usage-bar-danger .sub-usage-fill { background: #ef4444; }

/* Public title shown above each Content card. The user's actual prompt is
   intentionally NOT rendered — it stays server-side as proprietary signal. */
.gallery-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.gallery-byline {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}
.gallery-author {
  font-weight: 600;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.gallery-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Like + comment-toggle row */
.gallery-engage {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.like-btn {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.like-btn:hover { border-color: #22c55e; color: #22c55e; }
.like-icon { font-size: 14px; line-height: 1; }
.like-btn.liked {
  background: #ffe4ec;
  color: #be185d;
  border-color: #f9a8d4;
}
.like-btn.liked .like-icon { transform: scale(1.05); }
.comment-toggle {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
}

.comment-own-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
}
.comment-own-actions .link-btn { font-size: 11px; }

/* Inline comment thread */
.gallery-comments {
  background: #fafbfd;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.comment-row {
  font-size: 13px;
  line-height: 1.5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
}
.comment-author { color: var(--indigo); font-weight: 600; font-size: 12px; }
.comment-body   { color: #333; word-break: break-word; }
.comment-date   { color: var(--muted); font-size: 11px; white-space: nowrap; }
.comments-empty, .comments-loading {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}
.comment-form {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.comment-input {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}
.comment-input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.comment-error {
  flex-basis: 100%;
  font-size: 12.5px;
  color: #991b1b;
}
.gallery-footer {
  display: flex;
  justify-content: center;
  margin: 22px 0 8px;
}

/* Visibility badges in the user's library */
.vis-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 6px;
}
.vis-public   { background: var(--green-soft); color: var(--green); }
.vis-pending  { background: #fef3c7;          color: #92400e; }
.vis-rejected { background: #fee2e2;          color: #991b1b; }

.profile-username-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-readonly.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =========================================================
   LIBRARY (My Generations) — grid of generation cards
   ========================================================= */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.library-item {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.library-item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.library-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.library-item-date {
  font-size: 11px;
  color: var(--muted);
}
.library-prompt {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  border-left: 3px solid var(--line);
  padding-left: 10px;
}
.library-body {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 60px;
}
.library-text {
  font-size: 13.5px;
  color: #333;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.library-text.muted { color: var(--muted); font-style: italic; }
.library-image {
  display: block;
  max-width: 100%;
  border-radius: 6px;
}
.library-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.library-empty {
  font-style: italic;
  color: var(--muted);
}
.library-empty a { color: var(--indigo); font-weight: 600; }

@media (max-width: 640px) {
  .profile-row { grid-template-columns: 1fr; gap: 4px; }
  .profile-row-2col { grid-template-columns: 1fr; }
}

/* =========================================================
   AUTH (header nav + modal)
   ========================================================= */
.hero-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-button {
  background: transparent;
  font-family: var(--font-sans);
  cursor: pointer;
  border: 1px solid var(--line);
  color: var(--ink);
}
#auth-trigger.nav-button {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
#auth-trigger.nav-button:hover {
  filter: brightness(1.05);
  background: var(--grad-brand);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.user-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.user-email {
  font-size: 13px;
  font-weight: 500;
  background: var(--card-alt);
  color: var(--ink-2);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.user-email:hover { background: var(--brand-50); color: var(--brand-700); }
[data-theme="dark"] .user-email:hover { background: var(--indigo-soft); color: var(--brand-300); }

/* ----- Notifications bell + dropdown ----- */
.notif-wrap {
  position: relative;
  display: inline-block;
}
.notif-bell {
  position: relative;
  background: var(--card-alt);
  border: 1px solid var(--line);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 15px;
  transition: all 0.15s ease;
}
.notif-bell:hover  { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-300); }
[data-theme="dark"] .notif-bell:hover { background: var(--indigo-soft); color: var(--brand-300); border-color: var(--brand-700); }
.notif-bell:active { transform: scale(0.94); }
.notif-bell-icon  { line-height: 1; }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(15,15,35,0.85);
  pointer-events: none;
}
.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--card);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
}
.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 14px;
}
.notif-mark-read {
  font-size: 12px;
  color: var(--indigo);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
}
.notif-mark-read:hover { text-decoration: underline; }
.notif-list {
  overflow-y: auto;
  flex: 1;
}
.notif-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s ease;
}
.notif-item:hover { background: var(--card-alt); }
.notif-item-unread { background: var(--indigo-soft); }
.notif-item-unread:hover { filter: brightness(1.05); }
.notif-item-icon {
  font-size: 18px;
  width: 24px;
  flex-shrink: 0;
  text-align: center;
}
.notif-item-body {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
}
.notif-item-line strong { font-weight: 600; }
.notif-item-time {
  color: var(--muted);
  font-size: 11px;
  margin-left: 6px;
  opacity: 0.85;
}
.notif-item-prompt {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-item-snippet {
  color: var(--ink);
  font-size: 12px;
  margin-top: 4px;
  background: var(--card-alt);
  padding: 4px 7px;
  border-radius: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 35, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.auth-modal-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 440px;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.auth-close {
  position: absolute;
  top: 12px; right: 16px;
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  transition: all 0.15s ease;
}
.auth-close:hover { color: var(--ink); background: var(--card-alt); }

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--card-alt);
  padding: 4px;
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
}
.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 9px 12px;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: all 0.15s ease;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.auth-form { display: grid; gap: 12px; }
.auth-form input {
  padding: 13px 16px;
  font-size: 16px;            /* 16px+ avoids iOS Safari auto-zoom on focus */
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  background: var(--card);
  color: var(--ink);
}
.auth-form input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-glow);
}

.auth-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
}

/* Password strength meter */
.pw-meter {
  display: grid;
  gap: 6px;
  margin-top: -2px;
}
.pw-meter-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.pw-meter-bars span {
  height: 5px;
  border-radius: 999px;
  background: #e7eaf3;
  transition: background 0.2s ease;
}
.pw-meter[data-score="1"] .pw-meter-bars span:nth-child(-n+1) { background: #dc2626; }
.pw-meter[data-score="2"] .pw-meter-bars span:nth-child(-n+2) { background: #d97706; }
.pw-meter[data-score="3"] .pw-meter-bars span:nth-child(-n+3) { background: #ca8a04; }
.pw-meter[data-score="4"] .pw-meter-bars span                 { background: #15803d; }
.pw-meter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.pw-meter[data-score="0"] .pw-meter-label { color: #dc2626; }
.pw-meter[data-score="1"] .pw-meter-label { color: #dc2626; }
.pw-meter[data-score="2"] .pw-meter-label { color: #d97706; }
.pw-meter[data-score="3"] .pw-meter-label { color: #ca8a04; }
.pw-meter[data-score="4"] .pw-meter-label { color: #15803d; }

/* Honeypot — visually hidden but technically focusable for accessibility */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auth-submit {
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.auth-submit:hover    { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.auth-submit:disabled { background: var(--card-alt); color: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; }

.auth-help {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Rate-limited banner inside results area */
.rate-limited {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
}
.rate-limited a {
  color: #92400e;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* =========================================================
   LANDING HERO — top of homepage above the search bar
   ========================================================= */
.hero-block {
  margin-bottom: 28px;
  max-width: 760px;
}
.hero-centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.hero-centered .hero-subhead { margin-left: auto; margin-right: auto; }
.hero-headline {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -2px;
  margin: 0 0 20px;
}
.hero-accent {
  background: var(--grad-creative);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.hero-subhead {
  font-size: 19px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  max-width: 640px;
}
.hero-subhead strong {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.1px;
}

/* Soft glowing aura behind the hero — only visible in dark mode, gives the
   landing surface that "AI lab" depth without overwhelming light mode. */
.hero-centered::before {
  content: '';
  position: absolute;
  top: -40px; left: 50%;
  width: 720px; height: 360px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(16,185,129,0.22), transparent 70%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
[data-theme="dark"] .hero-centered { position: relative; }
[data-theme="dark"] .hero-centered::before { opacity: 1; }

/* =========================================================
   EXAMPLE QUERY CHIPS — "Try:" row under the search bar
   ========================================================= */
.examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.examples-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-right: 4px;
}
.example-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}
.example-chip:hover {
  border-color: var(--indigo);
  color: var(--indigo);
  background: var(--indigo-soft);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .hero-headline { font-size: 32px; letter-spacing: -0.5px; }
  .hero-subhead  { font-size: 16px; }
}

/* =========================================================
   FILTERS & CATEGORIES — disclosure toggle
   ========================================================= */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  margin-bottom: 14px;
  transition: all 0.15s ease;
}
.filter-toggle:hover {
  border-color: var(--indigo);
  color: var(--indigo);
}
.filter-toggle-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
}
.filter-toggle.open .filter-toggle-chevron {
  transform: rotate(180deg);
}
.filter-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  display: grid;
  gap: 12px;
}
.filter-panel .filters,
.filter-panel .categories {
  margin-bottom: 0;
}

/* =========================================================
   FILTER CHIPS + TRENDING SEARCHES
   ========================================================= */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.filters-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 4px;
}
.filter-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--slate);
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-chip:hover {
  border-color: var(--indigo);
  color: var(--indigo);
}
.filter-chip.active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.trending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--grad-brand-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.trending-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--brand-700);
  margin-right: 6px;
}
[data-theme="dark"] .trending-label { color: var(--brand-300); }
.trending-chip {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}
.trending-chip:hover {
  border-color: var(--brand-400);
  color: var(--brand-700);
  background: var(--card);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .trending-chip:hover { color: var(--brand-300); }

.reset-link {
  color: #b91c1c !important;
}

/* =========================================================
   MODE TABS — Search vs Generate
   ========================================================= */
.mode-tabs {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 22px;
  box-shadow: 0 1px 4px rgba(20,20,40,0.04);
}
.mode-tab {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mode-tab:hover { color: var(--ink); }
.mode-tab.active {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,0.25);
}

/* =========================================================
   AI OVERVIEW BLOCK
   ========================================================= */
.ai-overview {
  background: var(--grad-brand-soft);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.ai-overview::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-brand);
  opacity: 0.7;
}
[data-theme="dark"] .ai-overview {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(132,204,22,0.06));
  border-color: var(--line);
}
.ai-overview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--muted);
}
.ai-overview-icon { font-size: 16px; }
.ai-overview-label {
  font-weight: 700;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.3px;
}
.ai-overview-meta {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.7;
}
.ai-overview-body {
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.65;
}
.ai-overview-body p { margin: 0 0 8px; }
.ai-overview-body p:last-child { margin: 0; }

/* "Interpreting as: …" notice when the LLM cleaned up a garbled query */
.ai-interpreting {
  background: rgba(34,197,94,0.08);
  border-left: 3px solid var(--accent, #22c55e);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 10px;
}
.ai-interpreting strong { color: var(--ink); }
[data-theme="dark"] .ai-interpreting {
  background: rgba(34,197,94,0.12);
  color: var(--ink);
}
.ai-interpret-action {
  margin-left: 8px;
  font-weight: 700;
  color: var(--indigo);
  cursor: pointer;
  text-decoration: underline;
}

/* Inline citation markers — clickable superscript footnotes */
.ai-cite a {
  display: inline-block;
  background: rgba(79,70,229,0.12);
  color: var(--indigo);
  font-weight: 700;
  font-size: 11px;
  padding: 0 5px;
  border-radius: 999px;
  margin: 0 1px;
  text-decoration: none;
  vertical-align: super;
  line-height: 1.4;
  cursor: pointer;
}
.ai-cite a:hover { background: var(--indigo); color: #fff; }

/* Sources — compact cards with favicons. Replaces the old numbered list.
   Uses a responsive grid so 2–3 cards fit per row on desktop and 1–2 on
   mobile. Each card shows the source number, favicon, page title, and
   domain — much more recognisable than a plain text list. */
.ai-sources-head {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed rgba(34,197,94,0.22);
}
.ai-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.ai-source-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;             /* lets text-overflow ellipsis work inside */
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.ai-source-card:hover {
  transform: translateY(-1px);
  border-color: var(--brand-300, #6ee7b7);
  box-shadow: 0 4px 12px rgba(16,185,129,0.10);
}
.ai-source-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card-alt);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-source-fav {
  width: 16px; height: 16px;
  border-radius: 4px;
  flex: 0 0 16px;
  background: var(--card-alt);
}
.ai-source-text { min-width: 0; flex: 1; }
.ai-source-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-source-domain {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark-mode AI source cards — slightly brighter borders + hover so they
   stay legible on the soft brand-tinted gradient background. */
[data-theme="dark"] .ai-source-card {
  background: rgba(255,255,255,0.04);
  border-color: var(--line-strong);
}
[data-theme="dark"] .ai-source-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--brand-300, #6ee7b7);
  box-shadow: 0 4px 12px rgba(16,185,129,0.18);
}
[data-theme="dark"] .ai-source-num {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
[data-theme="dark"] .ai-source-fav {
  background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .ai-source-title { color: var(--ink); }
[data-theme="dark"] .ai-sources-head { border-top-color: rgba(132,204,22,0.22); }

/* Inline citation chip — boost contrast on dark. */
[data-theme="dark"] .ai-cite a {
  background: rgba(132, 204, 22, 0.18);
  color: #a3e635;
}
[data-theme="dark"] .ai-cite a:hover {
  background: var(--accent, #22c55e);
  color: #0b0b1a;
}

/* Follow-up chips below the AI Overview body */
.ai-followups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(79,70,229,0.20);
}
.ai-followups-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-right: 4px;
}
.ai-followup-chip {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  cursor: pointer;
  transition: all 0.15s ease;
}
[data-theme="dark"] .ai-followup-chip { color: var(--brand-300); border-color: var(--line-strong); }
.ai-followup-chip:hover {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.ai-overview-skeleton {
  height: 14px;
  background: linear-gradient(90deg, #e7eaf3 0%, #f0f3fa 50%, #e7eaf3 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  margin-bottom: 8px;
  animation: shimmer 1.4s ease infinite;
}
.ai-overview-skeleton.short { width: 65%; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================
   GENERATE PANEL
   ========================================================= */
.demo-pill {
  display: inline-block;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.1px;
}

/* =========================================================
   GENERATE PAGE — centered, minimal layout that mirrors the
   homepage search experience. No headline / subhead; the modality
   picker + prompt input carry the page. On mobile the layout
   anchors to the top of the viewport so the input sits in thumb
   range, just like the empty-state search bar.
   ========================================================= */
.container.generate-page {
  max-width: 720px;          /* tighter column = calmer page */
  padding-top: 56px;
  text-align: center;        /* centers inline children: pill, picker */
}
.container.generate-page #demo-pill {
  display: inline-block;
  margin: 0 auto 14px;
}
.container.generate-page .modality-picker { margin-bottom: 22px; }
/* The form itself is full-width but stays visually centered: we
   don't reset text-align here because the generate-form is grid +
   the textarea/button take width:100%. */
.container.generate-page .generate-form,
.container.generate-page .image-controls,
.container.generate-page .generate-history,
.container.generate-page .generate-error,
.container.generate-page .chat-shell {
  text-align: left;
}

/* On phones, copy the empty-state hero treatment: top-anchored layout,
   bigger softer prompt input that reads as the focal element, prominent
   green pill submit button. */
@media (max-width: 640px) {
  .container.generate-page {
    padding: 24px 16px 80px;
    text-align: center;
  }
  /* Modality picker — sits at the top, centered, friendlier spacing. */
  .container.generate-page .modality-picker {
    margin: 0 auto 18px;
    flex-wrap: nowrap;          /* keep 4 chips on one row */
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
  }
  .container.generate-page .modality-picker::-webkit-scrollbar { display: none; }

  /* Prompt input styled to match the empty-state search bar:
     pill-ish radius, soft shadow, generous padding. */
  .container.generate-page .generate-form { gap: 10px; }
  .container.generate-page .prompt-wrap textarea,
  .container.generate-page .generate-form textarea {
    padding: 16px 18px;
    border-radius: 22px;        /* bigger radius — friendlier feel */
    font-size: 16px;            /* prevents iOS auto-zoom on focus */
    min-height: 88px;
    box-shadow: var(--shadow);
  }

  /* Generate button takes full width on mobile, brand gradient — same
     visual weight as the search bar's primary action elsewhere. */
  .container.generate-page .generate-form #generate-submit {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    border-radius: var(--radius-pill);
  }
}

.modality-picker {
  display: inline-flex;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: 18px;
  gap: 2px;
}
.modality-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
}
.modality-btn:hover { color: var(--ink); }
.modality-btn.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ----- Image-only controls: style + aspect ratio chips ----- */
.image-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.control-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.control-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  width: 64px;
  flex-shrink: 0;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.preset-chip {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--card-alt);
  border: 1px solid transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.preset-chip:hover {
  border-color: var(--brand-300);
  color: var(--brand-600);
  background: var(--brand-50);
}
[data-theme="dark"] .preset-chip:hover { background: var(--indigo-soft); color: var(--brand-300); }
.preset-chip.active {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* ----- Image-to-image source-upload row ----- */
.i2i-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.i2i-upload-btn {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px dashed var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}
.i2i-upload-btn:hover { border-color: var(--indigo); color: var(--indigo); }
.i2i-help {
  font-size: 12px;
  color: var(--muted);
}
.i2i-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 8px;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.i2i-preview img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--card);
}
.i2i-preview-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.i2i-filename {
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.generate-form {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}
.generate-form textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 16px 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  resize: vertical;
  min-height: 96px;
  line-height: 1.55;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.generate-form textarea::placeholder { color: var(--muted); }
.generate-form textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-glow), var(--shadow-sm);
}
.generate-form button {
  justify-self: start;
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 13px 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.generate-form button:hover    { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.generate-form button:disabled { background: var(--card-alt); color: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; }

/* ----- Prompt enhance button (sparkle, top-right of textarea) ----- */
.prompt-wrap {
  position: relative;
}
.prompt-wrap textarea {
  width: 100%;
  /* Leave room on the right so the Enhance button doesn't overlap text. */
  padding-right: 130px;
}
/* On phones the Enhance button drops below the textarea so the user
   gets the full width to type. The button is no longer absolutely
   positioned — it sits as a normal flex pill above the Generate button. */
@media (max-width: 640px) {
  .prompt-wrap textarea { padding-right: 18px; }
  .enhance-btn {
    position: static;
    align-self: flex-start;
    margin-top: 8px;
  }
  .modality-picker {
    /* Let the picker chips wrap on a really tight phone screen instead
       of overflowing the page. */
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    max-width: 100%;
  }
}
.enhance-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--card-alt);
  color: var(--brand-700);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.15s ease;
}
[data-theme="dark"] .enhance-btn { color: var(--brand-300); }
.enhance-btn:hover {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.enhance-btn:disabled { opacity: 0.6; cursor: progress; }
.enhance-status {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 4px;
}
.enhance-status .enhance-ok   { color: var(--indigo); font-weight: 600; }
.enhance-status .enhance-warn { color: #b45309; font-weight: 600; }
.enhance-status a {
  margin-left: 8px;
  color: var(--indigo);
  text-decoration: none;
  font-weight: 600;
}
.enhance-status a:hover { text-decoration: underline; }

.generate-error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 14px;
}
.generate-error a {
  color: #991b1b;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- Generation history items ---- */
.generate-history {
  display: grid;
  gap: 14px;
}
.gen-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color 0.15s ease;
}
.gen-item.gen-running { border-color: rgba(79,70,229,0.35); }
.gen-item.gen-done    { border-color: rgba(21,128,61,0.25); }
.gen-item.gen-error   { border-color: rgba(220,38,38,0.30); }

/* =========================================================
   DARK MODE — overrides for tinted status / error / code
   backgrounds. The light-mode values (amber, red, gray)
   are kept; we just darken them so dark-mode users don't
   see jarring bright pills against a dark page.
   ========================================================= */
:root[data-theme="dark"] .legal-prose code {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
:root[data-theme="dark"] .status-disabled,
:root[data-theme="dark"] .vis-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
:root[data-theme="dark"] .status-blocked,
:root[data-theme="dark"] .vis-rejected {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}
:root[data-theme="dark"] .auth-error,
:root[data-theme="dark"] .generate-error {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.30);
}
:root[data-theme="dark"] .rate-limited {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.30);
}
/* Make sure text inputs that use var(--card) for fill have a slightly
   different contrast against the surrounding card — otherwise the
   field disappears in dark mode. Soft surface fills the gap. */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-color: var(--line-strong);
}

/* =========================================================
   MOBILE POLISH SWEEP — 2026-04-30
   Page-by-page audit findings consolidated into one block at the
   end of the file so it overrides everything cleanly. Targets two
   breakpoints: 640px (large phones, small tablets) and 480px (true
   phone portrait). Each section is keyed to a specific issue from
   the audit so it's easy to find / undo later.
   ========================================================= */

@media (max-width: 640px) {
  /* ---- Header / hero — tighten padding so nav fits on 375px ---- */
  .hero {
    padding: 12px 16px;
    gap: 8px;
  }
  .hero-nav {
    gap: 6px;
    flex-wrap: wrap;            /* allow nav links to wrap if extreme */
    justify-content: flex-end;
  }
  .nav-link { font-size: 13px; padding: 7px 10px; }
  #auth-trigger.nav-button { padding: 7px 13px; font-size: 13px; }
  .brand { font-size: 19px; }

  /* User-email pill — shrink so it doesn't crowd nav. */
  .user-email { max-width: 140px; font-size: 12px; padding: 6px 10px; }

  /* Profile row 2-col collapses earlier (was at 640px in profile sheet,
     but cramped 480–640; force single column at this width to be safe) */
  .profile-row-2col { grid-template-columns: 1fr; gap: 4px; }

  /* Profile tabs — wrap onto 2 rows instead of overflow scroll. */
  .profile-tabs {
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
  }
  .profile-tab {
    flex: 1 1 auto;
    min-width: max-content;
    font-size: 13px;
    padding: 8px 10px;
  }

  /* Plans grid five-tier — single column on mobile so each tier has
     room to breathe (was 200px minmax which forced 1 col but cramped). */
  .plans-grid.five-tier { grid-template-columns: 1fr !important; gap: 12px; }
  .plans-grid.five-tier .plan-card { padding: 18px; }

  /* Hero headline scales down — landing pages otherwise wrap to 4 lines. */
  .hero-headline,
  .headline { font-size: 32px; letter-spacing: -0.6px; }

  /* Pricing compare table — denser on phones so two columns can show. */
  .compare-table-full { font-size: 12px; }
  .compare-table-full td,
  .compare-table-full th { padding: 8px 10px; }

  /* Billing actions — stack vertically so each button is full-width
     and tappable, instead of wrapping awkwardly side-by-side. */
  #billing-actions { flex-direction: column; }
  #billing-actions > * { width: 100%; }

  /* Sub-other-plans grid — just make sure it stays single-column on
     mobile (no harm if already grid: 1fr). */
  .sub-other-plans { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* ---- Even tighter on true phone portrait ---- */

  /* Header — Brand and nav share a row but nav can wrap below if it must. */
  .hero { padding: 10px 12px; }
  .brand { font-size: 18px; }

  /* User-email — even narrower so it fits with notif bell + sign-out. */
  .user-email { max-width: 100px; font-size: 11.5px; }

  /* Auth modal — reclaim every spare pixel. */
  .auth-modal { padding: 14px; }
  .auth-modal-card {
    padding: 20px 18px;
    border-radius: 14px;
  }

  /* Hero headline — give big landing-page H1s a smaller default. */
  .hero-headline { font-size: 26px; letter-spacing: -0.3px; }
  .headline      { font-size: 28px; letter-spacing: -0.4px; }

  /* Gallery grid — let 2 cards fit per row on 375px (was 1 with 300px min). */
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  /* Competitor cards — let 2 fit per row at 140px min. */
  .competitors {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
  }

  /* Content filter — switch to horizontal scroll on smallest screens
     so all 6 filter buttons stay reachable without messy wrap. */
  .content-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    justify-content: flex-start;
  }
  .content-filter::-webkit-scrollbar { display: none; }
  .content-filter > * { flex: 0 0 auto; }
}