/* ============================================================
   AI PROMPT SYNC — Design System + All Screens
   Dark-first, premium. One tight file.
   ============================================================ */

/* Brand faces — Inter (UI/display) + JetBrains Mono (live preview/code).
   Standardized per the redesigned design system. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  /* Tell native controls (select popups, options, autofill, date pickers,
     scrollbars) to render dark — without this they default to the OS light
     rendering and produce black-on-dark text. Overridden per theme below. */
  color-scheme: dark;

  /* Brand gradient: purple #7857ff into a brighter violet #b14dff (matches the purple starfield) */
  --grad-start: #7857ff;
  --grad-end:   #b14dff;
  --grad: linear-gradient(135deg, var(--grad-start) 0%, var(--grad-end) 100%);
  /* Solid accent: the mid-blue for restrained UI use (nav active, focus, links) */
  --accent:     #7857ff;

  /* Dark-mode surfaces (default) */
  --bg-base:        #090912;
  --bg-raised:      #0f0f1e;
  --bg-card:        rgba(255, 255, 255, 0.04);
  --bg-card-hover:  rgba(255, 255, 255, 0.07);
  --bg-input:       rgba(255, 255, 255, 0.06);
  --bg-input-focus: rgba(255, 255, 255, 0.09);
  --bg-overlay:     rgba(9, 9, 18, 0.85);
  --bg-nav:         rgba(9, 9, 18, 0.80);
  --bg-toast:       rgba(15, 15, 35, 0.97);

  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.15);
  --border-focus:   rgba(120, 87, 255, 0.60);

  --text-primary:   #f0f0fa;
  --text-secondary: rgba(240, 240, 250, 0.58);
  --text-tertiary:  rgba(240, 240, 250, 0.35);
  --text-accent:    #b08cff;

  --shadow-card:    0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 12px rgba(0, 0, 0, 0.40);
  --shadow-raised:  0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-accent:  0 0 24px rgba(120, 87, 255, 0.22);
  --shadow-btn:     0 4px 24px rgba(120, 87, 255, 0.45);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 9999px;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  /* ── Redesigned design-system tokens (additive — formalized type scale,
        richer depth/glow, pack/status colors, live-preview token highlight) ── */
  /* Brand aliases */
  --aps-blue: #7857ff; --aps-cyan: #b14dff; --aps-accent: #7857ff; --aps-accent-ink: #b08cff;
  --grad-brand: var(--grad);
  --grad-brand-soft: linear-gradient(135deg, rgba(120,87,255,.22), rgba(177,77,255,.18));
  --grad-sheen: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  /* Pack / category accents */
  --pack-purple: #7857ff; --pack-teal: #22b8cf; --pack-blue: #2272ff; --pack-green: #0ca678; --pack-orange: #e0823c;
  /* Status */
  --status-success: #1f9d57; --status-warning: #e0823c; --status-danger: #f1556c; --status-info: #2272ff;
  /* Live-preview token highlight */
  --token-bg: rgba(120,87,255,.20); --token-ink: #c4b0ff; --token-edge: rgba(120,87,255,.45);
  /* Type scale */
  --fs-display: 2.125rem; --fs-h1: 1.75rem; --fs-h2: 1.375rem; --fs-h3: 1.125rem;
  --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.75rem; --fs-mono: 0.875rem;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --fw-black: 900;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6;
  --ls-display: -0.03em; --ls-heading: -0.02em; --ls-eyebrow: 0.08em; --ls-mono: 0;
  /* Elevation extras */
  --edge-light: 0 1px 0 rgba(255,255,255,.06) inset;
  --sh-card: var(--shadow-card); --sh-raised: var(--shadow-raised);
  --sh-sheet: 0 1px 0 rgba(255,255,255,.08) inset, 0 -8px 48px rgba(0,0,0,.55);
  --sh-pop: 0 12px 40px rgba(0,0,0,.50);
  --glow-accent: var(--shadow-accent); --glow-btn: var(--shadow-btn);
  --glow-btn-lg: 0 6px 36px rgba(120,87,255,.50);
  --ring-focus: 0 0 0 3px rgba(120,87,255,.45);
  /* Layout chrome */
  --tap-min: 44px; --btn-h: 52px; --icon-btn: 54px; --screen-max: 430px; --gutter: 16px;
  --blur-chrome: 20px; --blur-sheet: 28px;
  --ease-std: cubic-bezier(.4, 0, .2, 1); --press-scale: 0.97;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-mid: 220ms;
  --dur-slow: 320ms;

  /* Nav heights + safe area */
  --nav-h: 60px;
  --header-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ── Light Mode Override ────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg-base:        #f2f4fb;
    --bg-raised:      #ffffff;
    --bg-card:        rgba(0, 0, 0, 0.035);
    --bg-card-hover:  rgba(0, 0, 0, 0.065);
    --bg-input:       rgba(0, 0, 0, 0.05);
    --bg-input-focus: rgba(0, 0, 0, 0.08);
    --bg-overlay:     rgba(242, 244, 251, 0.90);
    --bg-nav:         rgba(242, 244, 251, 0.88);
    --bg-toast:       rgba(10, 12, 40, 0.96);

    --border:         rgba(0, 0, 0, 0.10);
    --border-strong:  rgba(0, 0, 0, 0.18);
    --border-focus:   rgba(120, 87, 255, 0.50);

    --text-primary:   #0a0c1a;
    --text-secondary: rgba(10, 12, 26, 0.62);
    --text-tertiary:  rgba(10, 12, 26, 0.42);
    --text-accent:    #6638c4;

    --shadow-card:    0 1px 0 rgba(255,255,255,0.85) inset, 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-raised:  0 1px 0 rgba(255,255,255,0.85) inset, 0 8px 28px rgba(0, 0, 0, 0.12);
    --shadow-accent:  0 0 20px rgba(120, 87, 255, 0.15);
    --shadow-btn:     0 4px 20px rgba(120, 87, 255, 0.38);
  }
}

[data-theme="light"] {
  color-scheme: light;
  --bg-base:        #f2f4fb;
  --bg-raised:      #ffffff;
  --bg-card:        rgba(0, 0, 0, 0.035);
  --bg-card-hover:  rgba(0, 0, 0, 0.065);
  --bg-input:       rgba(0, 0, 0, 0.05);
  --bg-input-focus: rgba(0, 0, 0, 0.08);
  --bg-overlay:     rgba(242, 244, 251, 0.90);
  --bg-nav:         rgba(242, 244, 251, 0.88);
  --bg-toast:       rgba(10, 12, 40, 0.96);

  --border:         rgba(0, 0, 0, 0.10);
  --border-strong:  rgba(0, 0, 0, 0.18);
  --border-focus:   rgba(120, 87, 255, 0.50);

  --text-primary:   #0a0c1a;
  --text-secondary: rgba(10, 12, 26, 0.62);
  --text-tertiary:  rgba(10, 12, 26, 0.42);
  --text-accent:    #6638c4;

  --shadow-card:    0 1px 0 rgba(255,255,255,0.85) inset, 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-raised:  0 1px 0 rgba(255,255,255,0.85) inset, 0 8px 28px rgba(0, 0, 0, 0.12);
  --shadow-accent:  0 0 20px rgba(120, 87, 255, 0.15);
  --shadow-btn:     0 4px 20px rgba(120, 87, 255, 0.38);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-base:        #090912;
  --bg-raised:      #0f0f1e;
  --bg-card:        rgba(255, 255, 255, 0.04);
  --bg-card-hover:  rgba(255, 255, 255, 0.07);
  --bg-input:       rgba(255, 255, 255, 0.06);
  --bg-input-focus: rgba(255, 255, 255, 0.09);
  --bg-overlay:     rgba(9, 9, 18, 0.85);
  --bg-nav:         rgba(9, 9, 18, 0.80);
  --bg-toast:       rgba(15, 15, 35, 0.97);

  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.15);
  --border-focus:   rgba(120, 87, 255, 0.60);

  --text-primary:   #f0f0fa;
  --text-secondary: rgba(240, 240, 250, 0.58);
  --text-tertiary:  rgba(240, 240, 250, 0.35);
  --text-accent:    #b08cff;

  --shadow-card:    0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 12px rgba(0, 0, 0, 0.40);
  --shadow-raised:  0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-accent:  0 0 24px rgba(120, 87, 255, 0.22);
  --shadow-btn:     0 4px 24px rgba(120, 87, 255, 0.45);
}

/* ── Reset + Base ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient brand glow — lives in the background, visible behind the header */
body::before {
  content: '';
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(120, 87, 255, 0.08) 0%, rgba(177, 77, 255, 0.04) 50%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* Dim the glow in light mode */
[data-theme="light"] body::before {
  background: radial-gradient(ellipse, rgba(120, 87, 255, 0.04) 0%, rgba(177, 77, 255, 0.02) 50%, transparent 80%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body::before {
    background: radial-gradient(ellipse, rgba(120, 87, 255, 0.04) 0%, rgba(177, 77, 255, 0.02) 50%, transparent 80%);
  }
}

/* ── Deep-space starfield: global fixed background layer (dark only) ── */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #090912;
  /* concentrate the heavier stars in the text-free top + bottom bands;
     dim the central reading band so stars sit off the text */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.32) 40%,
    rgba(0, 0, 0, 0.32) 60%,
    rgba(0, 0, 0, 1) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.32) 40%,
    rgba(0, 0, 0, 0.32) 60%,
    rgba(0, 0, 0, 1) 100%);
  background-image:
    /* soft nebula bloom (top-right corner), purple, low opacity */
    radial-gradient(58% 48% at 86% 6%,
      rgba(124, 92, 255, 0.10) 0%,
      rgba(98, 60, 200, 0.06) 40%,
      rgba(98, 60, 200, 0.0) 72%),
    /* secondary faint bloom (bottom-left), deep violet, very low */
    radial-gradient(48% 42% at 6% 96%,
      rgba(124, 92, 255, 0.05) 0%,
      rgba(124, 92, 255, 0.0) 70%),

    /* fine star dust: twelve offset tiled layers of tiny faint white dots */
    radial-gradient(1px 1px at 24px 38px, rgba(240, 244, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 86px 112px, rgba(220, 232, 255, 0.40) 50%, transparent 51%),
    radial-gradient(1px 1px at 152px 64px, rgba(240, 244, 255, 0.34) 50%, transparent 51%),
    radial-gradient(1px 1px at 196px 168px, rgba(210, 226, 255, 0.46) 50%, transparent 51%),
    radial-gradient(1px 1px at 58px 188px, rgba(240, 244, 255, 0.32) 50%, transparent 51%),
    radial-gradient(1px 1px at 124px 226px, rgba(225, 235, 255, 0.40) 50%, transparent 51%),
    radial-gradient(1px 1px at 244px 96px, rgba(235, 242, 255, 0.38) 50%, transparent 51%),
    radial-gradient(1px 1px at 268px 204px, rgba(220, 232, 255, 0.34) 50%, transparent 51%),
    radial-gradient(1px 1px at 12px 150px, rgba(240, 244, 255, 0.36) 50%, transparent 51%),
    radial-gradient(1px 1px at 168px 18px, rgba(225, 235, 255, 0.42) 50%, transparent 51%),
    radial-gradient(1px 1px at 104px 70px, rgba(215, 228, 255, 0.30) 50%, transparent 51%),
    radial-gradient(1px 1px at 212px 130px, rgba(240, 244, 255, 0.44) 50%, transparent 51%),

    /* a couple of brighter near-stars on a larger tile */
    radial-gradient(1.4px 1.4px at 360px 120px, rgba(245, 248, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 150px 360px, rgba(235, 242, 255, 0.50) 50%, transparent 51%),

    /* deep-space depth wash: dark violet corner darkening to near-black edges */
    radial-gradient(135% 115% at 80% 4%,
      #17112e 0%,
      #100b1f 30%,
      #090912 60%,
      #070510 100%);
  background-repeat:
    no-repeat, no-repeat,
    repeat, repeat, repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat, repeat, repeat,
    repeat, repeat,
    no-repeat;
  background-size:
    auto, auto,
    280px 240px, 280px 240px, 280px 240px, 280px 240px,
    280px 240px, 280px 240px, 280px 240px, 280px 240px,
    280px 240px, 280px 240px, 280px 240px, 280px 240px,
    520px 460px, 520px 460px,
    auto;
}

/* gentle drift, motion only when the user allows it */
@media (prefers-reduced-motion: no-preference) {
  #starfield {
    animation: drift 200s linear infinite alternate;
  }
  @keyframes drift {
    from { background-position:
      0 0, 0 0,
      0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
      0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
      0 0, 0 0,
      0 0; }
    to { background-position:
      0 0, 0 0,
      -20px -16px, 14px -22px, -10px 18px, 18px 12px,
      -16px -10px, 12px 20px, -22px 8px, 10px -14px,
      -14px 16px, 16px -12px, -18px -8px, 12px 14px,
      -8px -6px, 6px 8px,
      0 0; }
  }
}

/* Hide the starfield in light mode (mirror the glow's 3-selector pattern) */
[data-theme="light"] #starfield { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) #starfield { display: none; }
}

/* ── App Shell ──────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;
}

/* Screen container — all screens live here */
#screen-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(var(--header-h) + var(--safe-top));
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--sp-4));
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  background: transparent;
  /* Expose local bg for chip edge-fade to match */
  --local-bg: var(--bg-base);
  /* hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition:
    opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
  will-change: transform, opacity;
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.screen.slide-out-left {
  opacity: 0;
  transform: translateX(-24px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .screen, .screen.active, .screen.slide-out-left {
    transition: opacity var(--dur-fast) linear;
    transform: none !important;
  }
  #starfield, #starfield * { animation: none !important; }
}

/* ── App Header ─────────────────────────────────────────────── */
#app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  padding-left: calc(var(--sp-4) + var(--safe-left));
  padding-right: calc(var(--sp-4) + var(--safe-right));
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-nav);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--border);
}

.header-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}

.header-back-btn:active {
  background: var(--bg-card-hover);
  transform: scale(0.92);
}

.header-back-btn.visible {
  display: flex;
}

#app-header h1.header-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
}

.logo-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  /* No gradient bg — the logo.png IS the mark */
}

.logo-mark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.logo-text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Solid — gradient text is unreadable at small sizes */
  color: var(--text-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.icon-btn:hover { background: var(--bg-card); color: var(--text-primary); }
.icon-btn:active { transform: scale(0.88); }

/* ── Bottom Navigation ──────────────────────────────────────── */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  background: var(--bg-nav);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: var(--sp-1) 0;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
  min-height: 44px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.nav-tab svg {
  width: 22px;
  height: 22px;
  transition: transform var(--dur-mid) var(--ease-spring);
}

.nav-tab span {
  /* clamp keeps all five labels on one line even at ~360px;
     nowrap stops a longer label from breaking the row. */
  font-size: clamp(8.5px, 2.4vw, 10px);
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-tab.active {
  color: var(--aps-accent-ink);
}

.nav-tab.active svg {
  transform: translateY(-1px);
}

/* Active tab accent indicator — solid bar + brand glow */
.nav-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 0 0 var(--r-pill) var(--r-pill);
  background: var(--accent);
  box-shadow: var(--glow-accent);
}

.nav-tab:active {
  transform: scale(0.88);
}

/* ── Screen Inner Container ─────────────────────────────────── */
.screen-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
}

/* ── Typography Utilities ───────────────────────────────────── */
/* Hero gradient text — use ONLY on large display sizes, not small labels */
.text-gradient {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-sm { font-size: 13px; }
.text-base { font-size: 15px; }
.text-lg { font-size: 17px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  /* Glassy bevel: 1px top highlight via box-shadow inset — the elevation tell */
  box-shadow: var(--shadow-card);
  /* No backdrop-filter on cards — it's a GPU perf hit with no visible benefit here */
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-out);
  cursor: pointer;
  overflow: hidden;
}

.card:hover {
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-raised);
}

.card:active {
  transform: scale(0.98);
  background: var(--bg-card-hover);
}

/* ── Search Bar ─────────────────────────────────────────────── */
.search-wrap {
  position: relative;
  margin-bottom: var(--sp-5);
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
  width: 18px;
  height: 18px;
}

.search-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--sp-4) 0 42px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  outline: none;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-appearance: none;
  appearance: none;
}

.search-input::placeholder {
  color: var(--text-tertiary);
}

.search-input:focus {
  border-color: var(--border-focus);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 3px rgba(120, 87, 255, 0.14);
}

.search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--text-tertiary);
  border: none;
  cursor: pointer;
  color: var(--bg-base);
  padding: 0;
}

.search-clear.visible { display: flex; }
.search-clear svg { width: 14px; height: 14px; }

/* ── Section Headers ────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

/* Unified micro-label — ONE canonical style across the whole app */
.section-title,
.category-label-name,
.settings-section-title,
.ai-picker-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.section-action {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── Directory Cards (Library) ──────────────────────────────── */
.dir-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.dir-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4);
}

.dir-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.dir-card-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dir-accent, var(--accent));
  opacity: 0.18;
  border-radius: inherit;
}

[data-theme="light"] .dir-card-icon::before { opacity: 0.22; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .dir-card-icon::before { opacity: 0.22; }
}

.dir-card-body {
  flex: 1;
  min-width: 0;
}

.dir-card-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dir-card-tagline {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.dir-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.dir-card-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

.dir-card-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--bg-input);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
}

.dir-card-chevron {
  color: var(--text-tertiary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Featured banner */
.featured-banner {
  background: var(--grad);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  position: relative;
  overflow: hidden;
}

.featured-banner::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.featured-banner::after {
  content: '';
  position: absolute;
  bottom: -50px;
  right: 20px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.featured-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}

.featured-label svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.featured-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--sp-1);
  position: relative;
  z-index: 1;
}

.featured-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  position: relative;
  z-index: 1;
}

/* ── Directory Screen ───────────────────────────────────────── */
.dir-header-banner {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.dir-header-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dir-accent, var(--accent));
  opacity: 0.18;
}

/* In light mode, the tint needs to be more visible */
[data-theme="light"] .dir-header-banner::before { opacity: 0.20; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .dir-header-banner::before { opacity: 0.20; }
}

.dir-header-emoji {
  font-size: 36px;
  line-height: 1;
  position: relative;
  z-index: 1;
  margin-bottom: var(--sp-1);
}

.dir-header-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 1;
}

.dir-header-tagline {
  font-size: 14px;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}

.dir-header-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
  position: relative;
  z-index: 1;
}

.dir-header-stat {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.category-group {
  margin-bottom: var(--sp-6);
}

.category-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: 0 var(--sp-1);
}

.category-label-emoji {
  font-size: 15px;
}

/* .category-label-name is now defined in the unified micro-label block above */

.prompt-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── Prompt Cards (Directory) ───────────────────────────────── */
.prompt-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
}

.prompt-card-body {
  flex: 1;
  min-width: 0;
}

.prompt-card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
  line-height: 1.3;
}

.prompt-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: var(--sp-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prompt-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--bg-input);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
}

.prompt-card-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.fav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}

.fav-btn:active {
  transform: scale(0.80);
}

.fav-btn.active {
  color: #f59e0b;
}

.fav-btn svg {
  width: 20px;
  height: 20px;
}

/* ── Prompt Screen (The Money Screen) ──────────────────────── */
.prompt-screen-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-2);
}

.prompt-screen-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: var(--sp-6);
}

/* Fill-in fields */
.fill-in-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.field-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* {{token}} chips — deliberate brand element: faint blue tint, mono, readable */
.field-label-key {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-accent);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: rgba(120, 87, 255, 0.10);
  border: 1px solid rgba(120, 87, 255, 0.22);
  letter-spacing: 0.03em;
}

.field-input,
.field-textarea,
.field-select {
  width: 100%;
  padding: 12px var(--sp-4);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  outline: none;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-appearance: none;
  appearance: none;
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--text-tertiary);
}

.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  border-color: var(--border-focus);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 3px rgba(120, 87, 255, 0.14);
}

.field-textarea {
  resize: none;
  min-height: 96px;
  overflow-y: hidden;
  field-sizing: content; /* native auto-size where supported */
}

.field-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

/* The native dropdown popup renders outside our styled box — force its
   option rows to readable colors so they never come out black-on-black. */
.field-select option,
select option {
  background: var(--bg-raised);
  color: var(--text-primary);
}

/* Segmented control for selects with few options */
.field-segments-wrap {
  position: relative;
}

/* Right edge-fade mask — fades to the SCREEN background, not always --bg-base */
.field-segments-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  /* Use --local-bg so the fade matches wherever this sits (screen bg = --bg-base for prompt) */
  background: linear-gradient(to right, transparent, var(--local-bg, var(--bg-base)));
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur-fast);
}

.field-segments-wrap.no-fade::after {
  opacity: 0;
}

.field-segments {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* No flex-wrap — chips stay on one row and scroll */
  scroll-snap-type: x proximity;
  /* Small padding-right so the last chip isn't hidden under the fade */
  padding-right: 28px;
  padding-bottom: 2px; /* room for scroll thumb on desktop if ever shown */
}

.field-segments::-webkit-scrollbar {
  display: none;
}

.segment-btn {
  flex-shrink: 0;
  padding: 8px var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  scroll-snap-align: start;
  transition:
    background var(--dur-fast),
    color var(--dur-fast),
    border-color var(--dur-fast),
    transform var(--dur-fast) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}

.segment-btn.active {
  background: rgba(120, 87, 255, 0.12);
  border-color: rgba(120, 87, 255, 0.40);
  color: var(--text-accent);
  font-weight: 600;
}

.segment-btn:active {
  transform: scale(0.95);
}

/* Live Preview */
.preview-section {
  margin-bottom: var(--sp-4);
}

.preview-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast), border-radius var(--dur-fast);
}

.preview-toggle .preview-icon {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-mid) var(--ease-out);
}

.preview-toggle.open .preview-icon {
  transform: rotate(180deg);
}

.preview-toggle.open {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.preview-body {
  display: none;
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}

.preview-body.open {
  display: block;
}

.preview-placeholder {
  color: var(--text-tertiary);
  font-style: italic;
  font-family: var(--font);
  font-size: 13px;
}

/* Highlight fill-in tokens in preview — brand blue chip */
.preview-token {
  color: var(--token-ink);
  background: var(--token-bg);
  border: 1px solid var(--token-edge);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 600;
}

/* ── Sticky Bottom Bar (Prompt Screen) ─────────────────────── */
.prompt-actions-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + var(--safe-bottom) + var(--nav-h));
  background: var(--bg-nav);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid var(--border);
  display: none; /* shown only on prompt screen */
}

.prompt-actions-bar.visible {
  display: block;
}

.prompt-actions-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 600px;
  margin: 0 auto;
}

/* Primary CTA */
.btn-primary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 52px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--grad);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--glow-btn);
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* gradient sheen — the CTA gloss */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad-sheen);
  pointer-events: none;
}
.btn-primary > * { position: relative; z-index: 1; }

.btn-primary:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(120, 87, 255, 0.30);
}

/* Success state — brand tint (cyan-shifted from the gradient end) */
.btn-primary.success {
  background: linear-gradient(135deg, #1680f4, #24d4f0);
  box-shadow: 0 4px 24px rgba(120, 87, 255, 0.50);
}

.btn-primary .btn-icon {
  width: 20px;
  height: 20px;
  transition: transform var(--dur-mid) var(--ease-spring), opacity var(--dur-fast);
}

.btn-primary .btn-text { transition: opacity var(--dur-fast); }

.btn-primary .btn-check {
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: 0;
  transform: scale(0.5) rotate(-30deg);
  transition:
    opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-spring);
}

.btn-primary.success .btn-check {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.btn-primary.success .btn-icon,
.btn-primary.success .btn-text {
  opacity: 0;
}

/* Secondary copy button */
.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background var(--dur-fast),
    color var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}

.btn-secondary:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.btn-secondary:active { transform: scale(0.92); }
.btn-secondary svg { width: 20px; height: 20px; }

/* AI Picker chip */
.ai-picker-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 var(--sp-3);
  height: 52px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}

.ai-picker-chip:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.ai-picker-chip:active { transform: scale(0.95); }
.ai-picker-chip .chip-icon { width: 16px; height: 16px; }
.ai-picker-chip .chip-caret { width: 12px; height: 12px; color: var(--text-tertiary); }

/* AI Picker Sheet */
.ai-picker-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}

.ai-picker-sheet.open {
  opacity: 1;
  pointer-events: auto;
}

.ai-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ai-picker-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: var(--bg-raised);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  padding: var(--sp-4) var(--sp-4);
  padding-bottom: calc(var(--sp-4) + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-spring);
}

.ai-picker-sheet.open .ai-picker-panel {
  transform: translateY(0);
}

.ai-picker-handle {
  width: 36px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  margin: 0 auto var(--sp-4);
}

.ai-picker-title {
  /* Base style from unified micro-label block; only layout here */
  margin-bottom: var(--sp-3);
}

.ai-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ai-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}

.ai-option:hover { background: var(--bg-card-hover); }
.ai-option:active { transform: scale(0.97); }

.ai-option.active {
  background: rgba(120, 87, 255, 0.10);
  border-color: rgba(120, 87, 255, 0.35);
}

.ai-option-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-input);
  color: var(--text-secondary);
}

.ai-option-icon svg {
  width: 20px;
  height: 20px;
}

.ai-option-body {
  flex: 1;
}

.ai-option-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.ai-option-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.ai-option-check {
  width: 20px;
  height: 20px;
  color: var(--text-accent);
  opacity: 0;
  transition: opacity var(--dur-fast);
}

.ai-option.active .ai-option-check {
  opacity: 1;
}

/* ── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 80px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 300;
  background: var(--bg-toast);
  color: #fff;
  padding: 10px var(--sp-4);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--border-strong);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-spring);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Toast check icon — brand cyan (on the dark toast bg it reads cleanly) */
.toast-icon { width: 16px; height: 16px; color: #b14dff; }

/* ── Search Screen ──────────────────────────────────────────── */
.search-screen-wrap {
  padding-top: var(--sp-2);
}

.search-results-empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-4);
  color: var(--text-tertiary);
}

.search-results-empty .empty-icon {
  font-size: 40px;
  margin-bottom: var(--sp-4);
  opacity: 0.5;
}

.search-results-empty p {
  font-size: 15px;
  margin-bottom: var(--sp-2);
  color: var(--text-secondary);
}

.search-results-empty span {
  font-size: 13px;
}

.search-result-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
}

.search-result-item .result-dir {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ── Favorites Screen ───────────────────────────────────────── */
.favorites-empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-4);
}

.favorites-empty .empty-icon { font-size: 48px; margin-bottom: var(--sp-4); }
.favorites-empty p { font-size: 16px; font-weight: 600; margin-bottom: var(--sp-2); }
.favorites-empty span { font-size: 13px; color: var(--text-secondary); }

/* ── Me / Settings Screen ───────────────────────────────────── */
.settings-section {
  margin-bottom: var(--sp-6);
}

.settings-section-title {
  /* Base style from unified micro-label block; only layout here */
  padding: 0 var(--sp-1);
  margin-bottom: var(--sp-3);
}

.settings-rows {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast);
  min-height: 52px;
  -webkit-tap-highlight-color: transparent;
  /* these rows are <button>s (a11y) — reset native button chrome so dark mode isn't grey */
  width: 100%;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.settings-row:last-child { border-bottom: none; }
.settings-row:active { background: var(--bg-card-hover); }
.settings-row.no-hover { cursor: default; }
.settings-row.no-hover:active { background: transparent; }

.settings-row-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
}

.settings-row-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-row-icon svg {
  width: 16px;
  height: 16px;
}

.settings-row-label {
  font-size: 15px;
  font-weight: 500;
}

.settings-row-value {
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.settings-row-value svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.settings-row-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

/* Theme toggle buttons */
.theme-options {
  display: flex;
  gap: var(--sp-2);
}

.theme-btn {
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}

.theme-btn.active {
  background: rgba(120, 87, 255, 0.12);
  border-color: rgba(120, 87, 255, 0.40);
  color: var(--text-accent);
}

.me-profile {
  text-align: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
}

.me-avatar {
  width: 88px;
  height: 88px;
  border-radius: var(--r-2xl);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
  /* No gradient fill — the logo IS the brand mark */
}

.me-avatar img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
}

.me-lockup {
  margin: 0 auto var(--sp-1);
  display: block;
  max-width: 200px;
  height: auto;
}

.me-app-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  /* Solid — gradient-clip text is unreadable at this size */
  color: var(--text-primary);
}

.me-app-version {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Recents strip on library */
.recents-strip {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: var(--sp-6);
  padding-bottom: 2px;
}

.recents-strip::-webkit-scrollbar { display: none; }

.recent-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}

.recent-chip:active { transform: scale(0.95); background: var(--bg-card-hover); }

.recent-chip-emoji { font-size: 14px; }

.recent-chip-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Empty / Loading States ─────────────────────────────────── */
.empty-state,
.favorites-empty,
.search-results-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Fill the area between header and nav so the content sits truly centered. */
  min-height: calc(100dvh - var(--header-h) - var(--nav-h) - var(--safe-top) - var(--safe-bottom) - var(--sp-6));
  padding: var(--sp-6);
}

.empty-state-icon {
  font-size: 52px;
  margin-bottom: var(--sp-4);
  display: block;
  opacity: 0.6;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
}

.empty-state-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ── Utility ─────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-5) 0;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px var(--sp-2);
  border-radius: var(--r-pill);
}

.pill-badge.new {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scrollbar style for preview */
.preview-body::-webkit-scrollbar {
  width: 4px;
}
.preview-body::-webkit-scrollbar-track {
  background: transparent;
}
.preview-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
}

/* ── Prompt detail extra spacing for sticky bar ─────────────── */
.screen.prompt-screen {
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 80px);
}

/* ── Add / Import Screen ────────────────────────────────────── */
.add-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.add-tab {
  flex: 1;
  padding: var(--sp-3) var(--sp-2);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}

.add-tab.active {
  color: var(--text-accent);
  border-bottom-color: var(--accent);
}

.add-panel {
  /* nothing special — uses .add-form inside */
}

.add-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.add-panel-wrap {
  /* panels swap visibility */
}

.add-fillins-section {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.fillin-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.fillin-row:last-child { border-bottom: none; padding-bottom: 0; }

.fillin-row-fields {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.fillin-remove {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast), background var(--dur-fast);
}

.fillin-remove:hover { color: #ef4444; background: rgba(239,68,68,0.10); }
.fillin-remove svg { width: 14px; height: 14px; }

.fillins-empty-hint {
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: var(--sp-2) var(--sp-1);
}

.btn-save-prompt {
  width: 100%;
  height: 52px;
  border-radius: var(--r-xl);
  border: none;
  background: var(--grad);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
  margin-top: var(--sp-2);
}

.btn-save-prompt:active { transform: scale(0.96); opacity: 0.92; }
.btn-save-prompt:disabled { opacity: 0.6; cursor: not-allowed; }

.import-error {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  color: #ef4444;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  line-height: 1.5;
}

/* Fork panel */
.fork-results {
  margin-top: var(--sp-2);
}

.fork-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
}

.fork-btn {
  padding: 6px var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  color: var(--text-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}

.fork-btn:active { transform: scale(0.94); background: var(--bg-card-hover); }

/* Recents full list */
.recent-full-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  cursor: pointer;
}

/* ── Focus visible polish ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(120, 87, 255, 0.80);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* ── Copy Recovery Modal (#3) ──────────────────────────────── */
.copy-recovery-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 300;
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}

.copy-recovery-panel {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.copy-recovery-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.copy-recovery-textarea {
  width: 100%;
  min-height: 160px;
  max-height: 50vh;
  resize: vertical;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  padding: var(--sp-3);
  line-height: 1.55;
  box-sizing: border-box;
}

.copy-recovery-close {
  align-self: flex-end;
  padding: 8px 20px;
  border-radius: var(--r-pill);
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.copy-recovery-close:hover { background: var(--bg-card-hover); }

/* ── SW Update Banner (#4) ─────────────────────────────────── */
.sw-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--accent, #7857ff);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  z-index: 500;
}

.sw-update-reload-btn {
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 4px 14px;
  cursor: pointer;
}

.sw-update-reload-btn:hover { background: rgba(255,255,255,0.35); }

/* ── Lib results region (#8 debounce scope) ─────────────────── */
.lib-results-region {
  margin-top: var(--sp-4);
}

/* ── Custom AI icons in picker + settings ───────────────────── */
.ai-icon-svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

.ai-option-icon .ai-icon-svg {
  width: 22px;
  height: 22px;
}

.chip-icon .ai-icon-svg {
  width: 16px;
  height: 16px;
}

/* Settings row icons for Library/Favorites/Recents etc */
.settings-row-icon.icon-sq {
  background: rgba(120, 87, 255, 0.10);
  border-radius: var(--r-sm);
}

/* Empty state icons: no emoji — SVG only */
.empty-state-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-xl);
  background: rgba(120, 87, 255, 0.08);
  color: var(--text-accent);
}

.empty-state-icon-svg svg {
  width: 28px;
  height: 28px;
}

/* Featured banner label icon */
.featured-label-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Directory card icon tile colors — distinct per pack */
.dir-icon-tile {
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.dir-icon-tile svg {
  width: 26px;
  height: 26px;
  position: relative;
  z-index: 1;
}

.dir-icon-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tile-color, var(--accent));
  opacity: 0.85;
}

/* Light mode: slightly more visible tile */
[data-theme="light"] .dir-icon-tile::before { opacity: 0.75; }

/* Nav icon sizes are already 22px via .nav-tab svg */

/* ── B3 UX Pass — New / Extended Styles ──────────────────────── */

/* Featured banner: "Try this" example prompt link */
.featured-example {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-sm);
  font-size: 13px;
  /* Inside the gradient banner — text is always white */
  color: rgba(255, 255, 255, 0.90);
  position: relative;
  z-index: 1;
}
.featured-example-label {
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.featured-example-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.80);
}

/* Browse library button — empty states */
.btn-browse-library {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-5);
  padding: var(--sp-2) var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.btn-browse-library:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
.btn-browse-library:active { transform: scale(0.96); }

/* Add/Import screen: Advanced toggle */
.add-advanced-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: color var(--dur-fast);
}
.add-advanced-toggle:hover { color: var(--text-secondary); }
.add-advanced-toggle .preview-icon {
  margin-left: auto;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.add-advanced-toggle.open .preview-icon {
  transform: rotate(180deg);
}
.add-advanced-section {
  padding: var(--sp-3) 0 0;
}

/* AI picker: More / Less toggle */
.ai-more-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: color var(--dur-fast);
}
.ai-more-toggle:hover { color: var(--text-secondary); }
.ai-more-section {
  padding: 0;
}

/* Me screen: privacy & roadmap notes */
.settings-privacy-note {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-top: 2px;
  max-width: 320px;
}
.settings-roadmap-note {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-top: 2px;
}
.settings-sync-note {
  font-size: 12px;
  color: var(--text-accent);
  line-height: 1.5;
  margin-top: 4px;
  font-style: italic;
}

/* ── First-Run Onboarding Sheet ──────────────────────────────── */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background var(--dur-slow) var(--ease-out);
  padding: 0 0 var(--safe-bottom);
}
.onboarding-overlay.ob-open {
  background: rgba(0, 0, 0, 0.60);
}
.onboarding-overlay.ob-fade-out {
  background: rgba(0, 0, 0, 0) !important;
  pointer-events: none;
}
.onboarding-overlay.ob-fade-out .onboarding-sheet {
  transform: translateY(100%);
  opacity: 0;
}

.onboarding-sheet {
  width: 100%;
  max-width: 480px;
  height: 94dvh;
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: var(--sp-4) var(--sp-5) 0;
  box-shadow: var(--shadow-raised);
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out);
  position: relative;
  /* Pull handle */
}
.onboarding-overlay.ob-open .onboarding-sheet {
  transform: translateY(0);
  opacity: 1;
}
.onboarding-overlay.ob-fade-out .onboarding-sheet {
  transition:
    transform var(--dur-mid) var(--ease-out),
    opacity var(--dur-mid) var(--ease-out);
}

/* Drag handle */
.onboarding-sheet::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: var(--r-pill);
  margin: 0 auto var(--sp-5);
}

.onboarding-pane {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.onboarding-headline {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.25;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.onboarding-sub {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: -var(--sp-2);
}

/* 3-step loop visualization */
.onboarding-steps {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.onboarding-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
}

.onboarding-step-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--grad);
  color: #fff;
  flex-shrink: 0;
}
.onboarding-step-icon svg {
  width: 20px;
  height: 20px;
}

.onboarding-step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.onboarding-step-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.onboarding-step-arrow {
  width: 16px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 0;
}
.onboarding-step-arrow svg {
  width: 14px;
  height: 14px;
}

/* AI picker grid in onboarding */
.onboarding-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.ob-ai-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast),
    transform var(--dur-fast) var(--ease-spring);
}
.ob-ai-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}
.ob-ai-btn:active { transform: scale(0.96); }
.ob-ai-btn.selected {
  border-color: var(--accent);
  background: rgba(120, 87, 255, 0.08);
}

.ob-ai-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-accent);
}
.ob-ai-icon svg { width: 24px; height: 24px; }
.ob-ai-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.ob-ai-desc {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Primary CTA button in onboarding */
.btn-ob-primary {
  width: 100%;
  padding: var(--sp-4);
  background: var(--grad);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: var(--r-lg);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.btn-ob-primary:hover { opacity: 0.92; }
.btn-ob-primary:active { transform: scale(0.98); opacity: 0.88; }

/* Skip button */
.btn-ob-skip {
  display: block;
  width: 100%;
  margin-top: var(--sp-3);
  padding: var(--sp-2);
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: color var(--dur-fast);
}
.btn-ob-skip:hover { color: var(--text-secondary); }

/* Pane progress dots */
.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.ob-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  transition: background var(--dur-mid), width var(--dur-mid) var(--ease-out);
}
.ob-dot.active {
  background: var(--accent);
  width: 18px;
}

/* ── Onboarding: hybrid welcome → question → magic moment ── */
.onboarding-pane.ob-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 0; }
.ob-grow { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: var(--sp-4); scrollbar-width: none; }
.ob-grow::-webkit-scrollbar { display: none; }
.ob-grow.ob-center { justify-content: center; align-items: center; text-align: center; }
.ob-footer { flex: none; padding: var(--sp-3) 0 calc(var(--sp-5) + var(--safe-bottom)); display: flex; flex-direction: column; gap: var(--sp-3); }
.ob-footer .onboarding-dots { margin: 0 0 var(--sp-1); }

.ob-topbar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-1) 0 var(--sp-4); }
.ob-back { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--bg-card); border: 1px solid var(--border); display: grid; place-items: center; cursor: pointer; color: var(--text-primary); }
.ob-back svg { width: 18px; height: 18px; }
.ob-step { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.05em; }

.ob-mark-lg { width: 74px; height: 74px; border-radius: 21px; object-fit: cover; box-shadow: 0 8px 28px rgba(120,87,255,.45); margin: 0 auto; display: block; }
.ob-wordmark { margin-top: var(--sp-4); font-weight: 700; font-size: 15px; color: var(--text-secondary); }
.ob-h-xl { margin-top: var(--sp-6); font-size: 32px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; color: var(--text-primary); }
.ob-h-lg { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--text-primary); }
.ob-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ob-sub { margin-top: var(--sp-4); color: var(--text-secondary); font-size: 15px; line-height: 1.55; max-width: 340px; }
.ob-center .ob-sub { margin-left: auto; margin-right: auto; }
.ob-sub.ob-sm { font-size: 13.5px; margin-top: var(--sp-2); }

.ob-textarea { width: 100%; margin-top: var(--sp-5); min-height: 92px; border-radius: var(--r-md); background: var(--bg-input); border: 1px solid var(--border); padding: 14px 16px; color: var(--text-primary); font-family: var(--font); font-size: 15px; line-height: 1.5; resize: none; }
.ob-textarea:focus { outline: none; border-color: var(--border-focus); }
.ob-textarea::placeholder { color: var(--text-tertiary); }
.ob-field-lbl { margin-top: var(--sp-5); margin-bottom: var(--sp-3); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ob-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ob-chip { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: var(--r-pill); background: var(--bg-card); border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--text-primary); cursor: pointer; font-family: var(--font); }
.ob-chip svg { width: 15px; height: 15px; color: var(--text-secondary); }
.ob-chip.on { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 4px 16px rgba(120,87,255,.35); }
.ob-chip.on svg { color: #fff; }

.ob-kicker { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--sp-3); }
.ob-spark { font-size: 13px; }
.ob-agent-card { margin-top: var(--sp-4); display: flex; gap: var(--sp-3); align-items: center; padding: 14px; border-radius: var(--r-lg); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.ob-agent-ico { width: 46px; height: 46px; border-radius: var(--r-md); background: linear-gradient(150deg,#f0a93a,#d9821c); display: grid; place-items: center; flex: none; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.ob-agent-ico svg { width: 23px; height: 23px; }
.ob-agent-name { font-size: 16px; font-weight: 700; }
.ob-agent-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.ob-preview { margin-top: var(--sp-4); border-radius: var(--r-md); background: #06060d; border: 1px solid var(--border); padding: 15px; }
.ob-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.ob-preview-t { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.ob-preview-t svg { width: 14px; height: 14px; color: var(--text-accent); }
.ob-live { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2bbd6e; display: inline-flex; align-items: center; gap: 6px; }
.ob-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2bbd6e; box-shadow: 0 0 8px #2bbd6e; }
.ob-preview-body { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--text-secondary); white-space: pre-wrap; }
.ob-tok { background: rgba(120,87,255,.18); color: #c4b0ff; border-radius: 4px; padding: 1px 5px; font-weight: 600; }
#ob-tailor { margin-top: var(--sp-4); }

.ob-footer.ob-dock { flex-direction: row; align-items: center; gap: var(--sp-2); }
.ob-footer.ob-dock .btn-ob-primary { flex: 1; margin: 0; }
.ob-ic { width: 54px; height: 54px; border-radius: var(--r-md); background: var(--bg-card); border: 1px solid var(--border); display: grid; place-items: center; cursor: pointer; flex: none; color: var(--text-primary); }
.ob-ic svg { width: 20px; height: 20px; }
.ob-arrow { display: inline-flex; width: 18px; height: 18px; align-items: center; }
.ob-arrow svg { width: 18px; height: 18px; }

/* ── Learn / AI Academy ─────────────────────────────────────── */
.learn-screen {
  --learn-accent: #7857ff;
  --learn-accent-soft: rgba(120, 87, 255, 0.13);
  padding: var(--sp-4) var(--sp-4) 0;
  max-width: 720px;
  margin: 0 auto;
}

.learn-hero { padding: var(--sp-2) 0 var(--sp-5); }
.learn-hero-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.learn-hero-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 52ch;
}

.learn-section { margin-bottom: var(--sp-2); }

/* Collapsible section header — acts as the page's table of contents */
.learn-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  padding: var(--sp-4) 2px;
  text-align: left;
  font-family: var(--font);
  /* land below the sticky header + jump-chip row on smooth-scroll */
  scroll-margin-top: calc(var(--header-h) + var(--safe-top) + 56px);
}
.learn-section-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.learn-section-main { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; }
.learn-section-titlerow { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.learn-section-level {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--bg-input);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.learn-section-blurb {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-tertiary);
  line-height: 1.35;
}
.learn-section-meta { display: inline-flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.learn-section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--learn-accent);
  background: var(--learn-accent-soft);
  border-radius: var(--r-pill);
  padding: 2px 9px;
}
.learn-section-chevron {
  display: inline-flex;
  color: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease-out);
}
.learn-section-chevron svg { width: 18px; height: 18px; }
.learn-section-head.open .learn-section-chevron { transform: rotate(180deg); }
.learn-section-head:active { opacity: 0.7; }

.learn-section-body { display: none; padding-top: var(--sp-1); }
.learn-section-body.open { display: block; }

.learn-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-card);
}
.learn-card-title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.learn-card-teach {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}

/* Source block — verbatim quote (accent bar) or attributed paraphrase */
.learn-source {
  border-left: 2px solid var(--border-strong);
  padding: 2px 0 2px var(--sp-3);
  margin-bottom: var(--sp-4);
}
.learn-source.is-quote { border-left-color: var(--learn-accent); }
.learn-source-quote {
  font-size: 13.5px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.learn-source-quote::before { content: '\201C'; }
.learn-source-quote::after  { content: '\201D'; }
.learn-source-idea {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.learn-source-attr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
}
.learn-source-cite { font-size: 12px; color: var(--text-tertiary); }
.learn-source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--learn-accent);
  text-decoration: none;
}
.learn-source-link svg { width: 12px; height: 12px; }
.learn-source-link:active { opacity: 0.6; }

/* Build CTA — deep-links into the matching Agent Builder prompt */
.learn-build-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--learn-accent);
  padding: 9px 12px 9px 16px;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 16px rgba(120, 87, 255, 0.35);
  transition: transform var(--dur-fast) var(--ease-spring), filter var(--dur-fast);
}
.learn-build-btn:hover { filter: brightness(1.07); }
.learn-build-btn:active { transform: scale(0.96); }
.learn-build-arrow { display: inline-flex; }
.learn-build-arrow svg { width: 16px; height: 16px; }
.learn-build-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }

/* Deep-dive (Playbook) lesson */
.learn-card.is-deepdive { border-color: var(--learn-accent); }
.learn-card-kicker {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--learn-accent);
  background: var(--learn-accent-soft);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-2);
}
.learn-dd-h {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--sp-3) 0 var(--sp-1);
}
.learn-dd-p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}
.learn-dd-steps { margin: var(--sp-1) 0 var(--sp-3); padding-left: 1.3em; }
.learn-dd-steps li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.learn-dd-steps li::marker { color: var(--learn-accent); font-weight: 700; }

/* Closing CTA into the full builder pack */
.learn-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--learn-accent);
  background: var(--learn-accent-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin: var(--sp-1) 0 var(--sp-8);
  transition: transform var(--dur-fast) var(--ease-spring), filter var(--dur-fast);
}
.learn-cta:hover { filter: brightness(1.04); }
.learn-cta:active { transform: scale(0.985); }
.learn-cta-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.learn-cta-sub { font-size: 13px; color: var(--text-secondary); }
.learn-cta-arrow { display: inline-flex; color: var(--learn-accent); flex-shrink: 0; }
.learn-cta-arrow svg { width: 22px; height: 22px; }

/* ── Directory: search + sticky jump-chips + accordion ──────── */
.dir-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin: var(--sp-3) 0 var(--sp-3);
}
.dir-search-icon {
  position: absolute;
  left: 13px;
  display: inline-flex;
  color: var(--text-tertiary);
  pointer-events: none;
}
.dir-search-icon svg { width: 18px; height: 18px; }
.dir-search-input {
  width: 100%;
  padding: 11px 38px 11px 40px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.dir-search-input::placeholder { color: var(--text-tertiary); }
.dir-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dir-search-input:focus { border-color: var(--border-focus); background: var(--bg-input-focus); }
.dir-search-clear {
  position: absolute;
  right: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 50%;
}
.dir-search-clear.visible { display: inline-flex; }
.dir-search-clear svg { width: 15px; height: 15px; }

.dir-chips {
  position: sticky;
  top: calc(var(--header-h) + var(--safe-top));
  z-index: 20;
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--sp-4)) var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dir-chips::-webkit-scrollbar { display: none; }
.dir-chip {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.dir-chip:active { transform: scale(0.95); }
.dir-chip.active {
  background: var(--dir-accent, var(--accent));
  border-color: var(--dir-accent, var(--accent));
  color: #fff;
  box-shadow: var(--glow-accent);
}
/* Learn jump-chips: count badge + Playbooks accent + taller tap target */
.dir-chip-count { opacity: 0.5; font-weight: 700; font-size: 11px; margin-left: 3px; }
.dir-chip.active .dir-chip-count { opacity: 0.85; }
.dir-chip-accent:not(.active) { border-color: var(--dir-accent, var(--accent)); color: var(--text-primary); }
.learn-screen .dir-chip { min-height: 34px; display: inline-flex; align-items: center; }

/* Academy progress */
.learn-progress { margin: 0 0 var(--sp-4); }
.learn-progress-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.learn-progress-count { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.learn-progress-streak { font-size: 13px; font-weight: 700; color: #e0a83c; }
.learn-progress-bar { height: 7px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.learn-progress-fill { height: 100%; border-radius: 999px; background: var(--grad-brand); box-shadow: var(--glow-accent); transition: width var(--dur-slow) var(--ease-out); }
.learn-nextup {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  margin-top: var(--sp-3); padding: 12px var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card); color: var(--text-primary);
  font-family: var(--font); font-size: 14px; cursor: pointer; text-align: left;
}
.learn-nextup:hover:not([disabled]) { border-color: var(--accent); }
.learn-nextup[disabled] { cursor: default; justify-content: center; color: var(--text-secondary); }
.lp-next-label { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); flex: 0 0 auto; }
.lp-next-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-next-arrow { display: inline-flex; width: 16px; height: 16px; color: var(--text-tertiary); flex: 0 0 auto; }
.lp-next-arrow svg { width: 16px; height: 16px; }

/* Mark-as-done */
.learn-done-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-3); padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: none; color: var(--text-tertiary);
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
}
.learn-done-btn.done { border-color: #16a85a; color: #6fcf97; background: rgba(22,168,90,0.10); }
.learn-done-check { display: inline-flex; width: 14px; height: 14px; }
.learn-done-check svg { width: 14px; height: 14px; }
.learn-card.is-done .learn-card-title::after { content: ' ✓'; color: #6fcf97; font-weight: 700; }

/* Collapsible deep-dive playbooks — tappable preview header + hidden body */
.learn-card-head {
  display: block; width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; font-family: var(--font); padding: 0 24px 0 0; position: relative; color: inherit;
}
.learn-card-body { display: none; }
.learn-card-body.open { display: block; }
.learn-card-expand {
  position: absolute; top: 2px; right: 0; display: inline-flex; width: 18px; height: 18px;
  color: var(--text-tertiary); transition: transform var(--dur-fast);
}
.learn-card-head.open .learn-card-expand { transform: rotate(180deg); }
.learn-card-expand svg { width: 18px; height: 18px; }
.learn-card.is-deepdive .learn-card-head .learn-card-teach { margin-bottom: 0; }

.cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  padding: var(--sp-4) 2px;
  text-align: left;
  font-family: var(--font);
  scroll-margin-top: calc(var(--header-h) + var(--safe-top) + 52px);
}
.cat-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cat-meta { display: inline-flex; align-items: center; gap: var(--sp-3); }
.cat-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--dir-accent, var(--accent));
  background: var(--bg-card-hover);
  border-radius: var(--r-pill);
  padding: 2px 9px;
}
.cat-chevron {
  display: inline-flex;
  color: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cat-chevron svg { width: 18px; height: 18px; }
.cat-head.open .cat-chevron { transform: rotate(180deg); }
.cat-head:active { opacity: 0.7; }
.cat-body { display: none; padding-top: var(--sp-1); }
.cat-body.open { display: block; }
/* In the directory accordion, stack category heads tightly (border-top divides them) */
.dir-sections .category-group { margin-bottom: 0; }
.dir-sections .cat-body.open { padding-bottom: var(--sp-3); }

.dir-results-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: var(--sp-2) 2px var(--sp-3);
}
.dir-results-empty {
  font-size: 14px;
  color: var(--text-tertiary);
  padding: var(--sp-4) 2px;
}

/* ── Shared modal shell (upgrade-* reused by Sync, Sandbox, Deploy, Profile, etc.) ─────────── */
.upgrade-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  padding: 0 0 var(--safe-bottom);
  transition: background var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
.upgrade-overlay.open { background: rgba(0, 0, 0, 0.6); pointer-events: auto; }
.upgrade-panel {
  width: 100%;
  max-width: 460px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: var(--sp-6) var(--sp-5) calc(var(--sp-6) + var(--safe-bottom));
  box-shadow: var(--shadow-raised);
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.upgrade-overlay.open .upgrade-panel { transform: translateY(0); }
.upgrade-title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 4px; }
.upgrade-sub { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-bottom: var(--sp-2); }
.upgrade-cta {
  width: 100%;
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  background: var(--grad);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: var(--r-lg);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  font-family: var(--font);
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast);
}
.upgrade-cta:active { transform: scale(0.98); opacity: 0.92; }
.upgrade-dismiss {
  width: 100%;
  padding: var(--sp-2);
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font);
}

/* Danger zone — destructive account/data delete */
.danger-label { color: var(--status-danger); }
.delete-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin: var(--sp-3) 0 var(--sp-4);
}
.delete-confirm-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.upgrade-cta.danger-cta { background: var(--status-danger); }
.upgrade-cta.danger-cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* Smart Context — personalize toggle on the prompt screen */
.personalize-row { margin: var(--sp-4) 0 0; }
.personalize-chip, .personalize-add {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary); transition: background var(--dur-fast), border-color var(--dur-fast);
}
.personalize-chip.on {
  border-color: var(--accent);
  background: rgba(120, 87, 255, 0.12);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-primary);
}
.personalize-chip .pc-state {
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  padding: 1px 7px; border-radius: 999px; background: var(--border); color: var(--text-tertiary);
}
.personalize-chip.on .pc-state { background: var(--accent); color: #fff; }
.personalize-add { color: var(--accent); border-style: dashed; text-align: left; }
.pc-spark { font-size: 14px; line-height: 1; }

/* Tune-Up */
.tu-note { font-size: 12px; color: #e0a83c; background: rgba(224,168,60,0.12); border-radius: var(--r-sm); padding: 8px 10px; margin: 0 0 var(--sp-3); line-height: 1.4; }
/* Test Sandbox — 2-step */
.sb-hint { font-size: 12px; color: var(--text-tertiary); text-align: center; margin: 4px 0 var(--sp-3); line-height: 1.4; }
.sb-step2 { background: none; color: var(--text-primary); border: 1px solid var(--accent); box-shadow: none; }
.agent-actions-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); }
.agent-action-btn {
  flex: 1 1 calc(50% - var(--sp-2));
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: none; color: var(--text-secondary);
  font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.agent-action-btn:active { transform: scale(0.99); }
.agent-action-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.agent-action-btn[disabled] { opacity: 0.6; cursor: default; }
.agent-action-icon { display: inline-flex; width: 16px; height: 16px; color: var(--accent); }
.agent-action-icon svg { width: 16px; height: 16px; }
.tuneup-row-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  border: none; background: none; cursor: pointer; color: var(--text-tertiary);
  font-family: var(--font);
}
.tuneup-row-btn:active { transform: scale(0.92); }
.tuneup-row-btn svg { width: 18px; height: 18px; }

/* Shared agent (public #/s/<id> view) */
.share-loading { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-tertiary); }
.share-view { padding: var(--sp-2) 0 var(--sp-6); }
.share-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); }
.share-title { font-size: 24px; font-weight: 800; line-height: 1.2; margin-bottom: var(--sp-2); }
.share-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: var(--sp-4); }
.share-agent {
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.5;
  color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4); margin: 0 0 var(--sp-4);
  max-height: 50vh; overflow: auto;
}
.share-footer { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: 13px; color: var(--text-tertiary); text-align: center; line-height: 1.5; }
.share-footer b { color: var(--text-secondary); }

/* Deploy anywhere */
.deploy-targets { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); }
.deploy-target {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: 12px var(--sp-3); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-primary); font-family: var(--font); font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.deploy-target:hover { border-color: var(--accent); }
.deploy-target:active { transform: scale(0.99); }
.deploy-target-icon { display: inline-flex; width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
.deploy-target-icon svg { width: 18px; height: 18px; }
.deploy-target-name { flex: 1; }
.deploy-target-chev { display: inline-flex; width: 16px; height: 16px; color: var(--text-tertiary); flex: 0 0 auto; }
.deploy-steps { font-size: 13px; line-height: 1.5; color: #6fcf97; background: rgba(22,168,90,0.12); border-radius: var(--r-sm); padding: 10px 12px; margin: var(--sp-2) 0 var(--sp-3); }

/* Your Profile editor */
.profile-panel .profile-fields { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0; text-align: left; }
.profile-field { display: flex; flex-direction: column; gap: 5px; }
.profile-field > span { font-size: 12px; font-weight: 600; color: var(--text-tertiary); }

.sync-code-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
  padding: 10px var(--sp-3);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.sync-code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}
.sync-copy-btn {
  flex-shrink: 0;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font);
}
.sync-copy-btn:active { transform: scale(0.96); }

/* Save (bookmark) button — accent once saved */
.btn-secondary.saved { color: var(--accent); border-color: var(--border-focus); }

/* ── Support / Donate screen ──────────────────────────────────
   Understated, calm: no animation, gradient reserved for the hero
   heart. Tokens only. */
.donate-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-6);
}
.donate-heart {
  color: var(--grad-end);
  filter: drop-shadow(var(--glow-btn));
  margin-bottom: var(--sp-2);
}
.donate-heart svg {
  width: 52px;
  height: 52px;
  display: block;
}
.donate-hero h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
.donate-sub {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin: 0;
}
.donate-why {
  max-width: 34ch;
  margin: var(--sp-4) auto 0;
  padding: var(--sp-2) 0;
}
.donate-why-title {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--sp-3);
}
.donate-why p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.donate-why p + p {
  margin-top: var(--sp-3);
}
.donate-quote {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  border-left: 2px solid transparent;
  border-image: var(--grad) 1;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.donate-quote-cite {
  display: block;
  margin-top: var(--sp-2);
  font-style: normal;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-tertiary);
}
.donate-body {
  max-width: 34ch;
  margin: 0 auto;
  padding: var(--sp-2) 0;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.donate-body p {
  margin: 0 0 var(--sp-4);
}
.donate-body p:last-child {
  margin-bottom: 0;
}
.donate-soon {
  max-width: 34ch;
  margin: var(--sp-6) auto 0;
  text-align: center;
  font-size: var(--fs-eyebrow);
  color: var(--text-tertiary);
  line-height: var(--lh-normal);
}
.donate-note {
  max-width: 34ch;
  margin: var(--sp-5) auto 0;
  text-align: center;
  font-size: var(--fs-eyebrow);
  color: var(--text-tertiary);
  line-height: var(--lh-normal);
}
.donate-sign {
  max-width: 34ch;
  margin: var(--sp-3) auto var(--sp-6);
  text-align: right;
  font-size: var(--fs-eyebrow);
  color: var(--text-tertiary);
}
.donate-social {
  max-width: 34ch;
  margin: var(--sp-6) auto var(--sp-8);
  text-align: center;
  font-size: var(--fs-eyebrow);
}
.donate-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-secondary);
  text-decoration: none;
}
.donate-social a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* Orchestrators hero — the single featured banner leading the Library,
   tinted with the orchestration accent (pack-purple) instead of the brand
   gradient so "Start here" reads as the loudest element on the screen. */
.featured-banner.is-orchestration {
  background: linear-gradient(135deg, var(--pack-purple) 0%, #9d7bff 100%);
}

/* ── First-run legal consent bar ─────────────────────────────────
   Compact, visible, out of the way. Sits above the bottom nav and below the
   onboarding overlay (z 500) so first-run onboarding shows first, then this
   remains until the user agrees. */
.legal-consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 480;
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--safe-bottom, 0px));
  background: var(--bg-toast);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
  transform: translateY(110%);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.legal-consent-bar.open { transform: translateY(0); }
/* While the consent bar is showing, reserve space at the bottom of every
   scrolling screen so no interactive row (e.g. the email login row on short
   phones) renders behind the fixed bar and steals taps. 260px covers the
   tallest bar case (stacked layout under 520px) plus the device safe area. */
body.has-consent-bar .screen {
  padding-bottom: calc(260px + var(--safe-bottom, 0px));
}
.legal-consent-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.legal-consent-copy { flex: 1 1 auto; min-width: 0; }
.legal-consent-disclaimer {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 4px;
  max-height: 32vh;
  overflow-y: auto;
}
.legal-consent-agree {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
}
.legal-consent-link { color: var(--text-accent); text-decoration: none; font-weight: 600; }
.legal-consent-link:hover { text-decoration: underline; }
.legal-consent-btn {
  flex: 0 0 auto;
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
}
.legal-consent-btn:active { transform: scale(0.97); }
@media (max-width: 520px) {
  .legal-consent-inner { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .legal-consent-btn { width: 100%; }
}

/* ── Share caution note (Prompt screen, under the agent actions) ── */
.share-risk-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--sp-3);
  padding: 10px var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.share-risk-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: inline-flex;
  margin-top: 2px;
  color: var(--text-secondary);
}