/* ============================================================
   airlock · geo — shared app theme
   One source of truth for every surface (marketing, signup,
   dashboard, question detail, settings).

   Built on the airlock design system (Aurora light glassmorphism)
   but recast around the warm BRAND FLARE palette so the cockpit
   reads as its own mode of the brand — distinct from the indigo
   marketing identity, still unmistakably airlock.
   ============================================================ */

:root {
  /* ============ PAPER — light foundation ============ */
  --paper:       #f4f5f7;
  --paper-rise:  #fafbfc;
  --paper-deep:  #ecedf0;

  /* ============ GLASS — layered translucency ============ */
  --glass-1:             rgba(255, 255, 255, 0.45);
  --glass-2:             rgba(255, 255, 255, 0.65);
  --glass-3:             rgba(255, 255, 255, 0.82);
  --glass-edge:          rgba(255, 255, 255, 0.9);
  --glass-stroke:        rgba(15, 23, 42, 0.06);
  --glass-stroke-strong: rgba(15, 23, 42, 0.1);

  /* ============ INK — text + structure ============ */
  --ink-900: #0b1220;
  --ink-700: #1f2937;
  --ink-500: #4b5563;
  --ink-400: #6b7280;
  --ink-300: #9ca3af;
  --ink-200: #d1d5db;

  /* ============ BRAND FLARE — the cockpit identity ============
     Lifted from the "Brand Flare" orb option in the design system.
     This is the app's primary accent: orb, links, primary buttons,
     active nav, focus, the lead chart series. */
  --brand-deep:   oklch(0.46 0.13 42);
  --brand-mid:    oklch(0.62 0.17 47);   /* primary accent */
  --brand-bright: oklch(0.73 0.18 55);   /* hover / glow */
  --brand-light:  oklch(0.86 0.09 70);   /* tints / atmosphere */
  --brand-ink:    oklch(0.44 0.13 42);   /* flare text on light = readable */
  --brand-glow:        oklch(0.68 0.18 50 / 0.16);
  --brand-glow-strong: oklch(0.68 0.18 50 / 0.34);
  --brand-soft:        oklch(0.70 0.16 55 / 0.12);
  --brand-soft-strong: oklch(0.70 0.16 55 / 0.20);

  /* Solid orange used for chart fills / sparkline (hex for Chart.js) */
  --brand-hex:      #ea6e1b;
  --brand-hex-soft: rgba(234, 110, 27, 0.12);

  /* ============ SEMANTIC — status only ============ */
  --ok:   #059669;
  --warn: #b45309;   /* nudged darker than flare so it never competes with brand */
  --stop: #dc2626;
  --ok-soft:   rgba(5, 150, 105, 0.12);
  --warn-soft: rgba(180, 83, 9, 0.12);
  --stop-soft: rgba(220, 38, 38, 0.10);

  /* ============ SHADOWS ============ */
  --shadow-glass-sm:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  --shadow-glass:
    0 8px 24px -8px rgba(15, 23, 42, 0.12),
    0 2px 4px -2px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 -1px 0 rgba(255, 255, 255, 0.9) inset;
  --shadow-glass-lg:
    0 24px 48px -16px rgba(15, 23, 42, 0.18),
    0 8px 16px -8px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 -1px 0 rgba(255, 255, 255, 1) inset;

  /* ============ TYPE ============ */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;

  --tracking-eyebrow: 0.14em;

  /* ============ RADII ============ */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;
  --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ============ SPACING (4px scale) ============ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ============ MOTION ============ */
  --ease-craft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui:    cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 160ms; --t-base: 240ms; --t-slow: 360ms;

  /* ============ Z-INDEX ============ */
  --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 2000;

  /* ============ APP SHELL TINTS ============ */
  --shell-bg: rgba(255, 255, 255, 0.72);

  /* Atmosphere — flare-warm body wash (light) */
  --atmos:
    radial-gradient(ellipse 1000px 760px at 6% -12%,  var(--brand-glow) 0%, transparent 60%),
    radial-gradient(ellipse 760px 620px at 112% 8%,   rgba(234, 110, 27, 0.10) 0%, transparent 58%),
    radial-gradient(ellipse 620px 520px at 96% 96%,   oklch(0.86 0.09 70 / 0.18) 0%, transparent 60%);
}

/* ============================================================
   DARK VARIANT — same flare identity, recast for low light
   ============================================================ */
[data-theme="dark"] {
  --paper:      #0a0f1a;
  --paper-rise: #131a2a;
  --paper-deep: #05080f;

  --glass-1: rgba(234, 110, 27, 0.04);
  --glass-2: rgba(255, 255, 255, 0.05);
  --glass-3: rgba(255, 255, 255, 0.08);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-stroke: rgba(255, 255, 255, 0.07);
  --glass-stroke-strong: rgba(255, 255, 255, 0.13);

  --ink-900: #f3f4f6;
  --ink-700: #e5e7eb;
  --ink-500: #9ca3af;
  --ink-400: #6b7280;
  --ink-300: #4b5563;
  --ink-200: #374151;

  --brand-ink: oklch(0.82 0.12 60);

  --ok-soft:   rgba(5, 150, 105, 0.16);
  --warn-soft: rgba(217, 119, 6, 0.18);
  --stop-soft: rgba(220, 38, 38, 0.18);

  --shadow-glass-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04) inset;
  --shadow-glass:
    0 8px 24px -8px rgba(0,0,0,.6), 0 2px 4px -2px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.06) inset;
  --shadow-glass-lg:
    0 24px 48px -16px rgba(0,0,0,.7), 0 8px 16px -8px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.08) inset;

  --shell-bg: rgba(10, 15, 26, 0.72);

  --atmos:
    radial-gradient(ellipse 1000px 760px at 6% -12%,  oklch(0.62 0.17 47 / 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 760px 620px at 112% 8%,   rgba(234, 110, 27, 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 620px 520px at 96% 96%,   oklch(0.50 0.10 250 / 0.18) 0%, transparent 60%);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  background-image: var(--atmos);
  background-attachment: fixed;
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a { color: var(--brand-ink); text-decoration: none; transition: color var(--t-fast) var(--ease-ui); }
a:hover { color: var(--brand-bright); }

::selection { background: var(--brand-soft-strong); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--brand-mid);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::placeholder { color: var(--ink-300); }

/* ============================================================
   BRAND ORB + WORDMARK
   ============================================================ */
.orb {
  width: var(--orb-size, 26px);
  height: var(--orb-size, 26px);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), transparent 35%),
    conic-gradient(from 200deg,
      var(--brand-deep) 0deg, var(--brand-mid) 90deg,
      var(--brand-bright) 180deg, var(--brand-light) 270deg, var(--brand-deep) 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 62%, #000 70%);
          mask: radial-gradient(circle closest-side, transparent 62%, #000 70%);
  filter: drop-shadow(0 4px 12px var(--brand-glow-strong));
  animation: orb-rotate 24s linear infinite;
}
@keyframes orb-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.wordmark {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.wordmark-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-ink);
  padding: 3px 7px;
  border-radius: var(--r-xs);
  background: var(--brand-soft);
  align-self: center;
}

/* ============================================================
   APP BAR — identical across dashboard / question / settings
   ============================================================ */
.appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-8);
  height: 60px;
  background: var(--shell-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-stroke);
}
.appbar-brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.appbar-brand:hover { color: inherit; }

.appbar-context {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12px;
  color: var(--ink-500);
  padding: 5px 12px;
  background: var(--glass-2);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
}
.appbar-context .icon { width: 13px; height: 13px; color: var(--ink-400); }
.appbar-context strong { color: var(--ink-900); font-weight: 600; }

.appbar-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 13px var(--font-sans);
  color: var(--ink-500);
  padding: 7px 13px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui);
}
.nav-link .icon { width: 16px; height: 16px; }
.nav-link:hover { background: var(--glass-2); color: var(--ink-900); }
.nav-link.active {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border-color: var(--brand-soft-strong);
}

.appbar-tools {
  display: flex; align-items: center; gap: var(--s-2);
  margin-left: var(--s-2);
  padding-left: var(--s-3);
  border-left: 1px solid var(--glass-stroke-strong);
}

/* ============================================================
   ICON BUTTONS
   ============================================================ */
.icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-2);
  color: var(--ink-500);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover { background: var(--glass-3); color: var(--ink-900); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn .icon { width: 17px; height: 17px; }

/* ============================================================
   THEME TOGGLE (compact)
   ============================================================ */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-2);
  color: var(--ink-500);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.theme-toggle:hover { background: var(--glass-3); color: var(--brand-ink); }
.theme-toggle .icon { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-8) var(--s-16);
}
.page-narrow { max-width: 920px; }

/* ============ PAGE HEAD ============ */
.page-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font: 500 11px var(--font-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: var(--s-3);
}
.page-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }

.page-title {
  font: 600 30px/1.15 var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--ink-900);
}
.page-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--brand-ink); }
.page-lede { font-size: 15px; color: var(--ink-500); line-height: 1.55; max-width: 620px; margin-top: var(--s-2); }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-6); margin-bottom: var(--s-6); flex-wrap: wrap;
}
.page-actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* ============ SECTION ============ */
.section { margin-bottom: var(--s-8); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-4);
}
.section-label {
  font: 500 11px var(--font-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-400);
  display: inline-flex; align-items: center; gap: 8px;
}
.section-label .icon { width: 14px; height: 14px; color: var(--brand-ink); }

/* ============ BREADCRUMB ============ */
.breadcrumb {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-500); margin-bottom: var(--s-5);
}
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--brand-ink); }
.breadcrumb .sep { color: var(--ink-300); width: 14px; height: 14px; }
.breadcrumb .current { color: var(--ink-900); font-weight: 500; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font: 600 13px var(--font-sans);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: var(--font-sans);
  transition: background var(--t-fast) var(--ease-ui), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast) var(--ease-craft), box-shadow var(--t-fast);
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 15px; height: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--brand-mid); color: #fff;
  box-shadow: 0 4px 14px var(--brand-glow-strong), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.btn-primary:hover:not(:disabled) { background: var(--brand-bright); color: #fff; }
@media (hover: hover) { .btn-primary:hover:not(:disabled) { transform: translateY(-1px); } }

.btn-ghost {
  background: var(--glass-2); color: var(--ink-700); border-color: var(--glass-stroke);
}
.btn-ghost:hover { background: var(--glass-3); color: var(--ink-900); }

.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-block { width: 100%; }

/* ============================================================
   SELECT / INPUT
   ============================================================ */
.select, .input, textarea.input {
  font: 500 13px var(--font-sans);
  padding: 9px 12px;
  border: 1px solid var(--glass-stroke-strong);
  border-radius: var(--r-sm);
  background: var(--glass-2);
  color: var(--ink-900);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.select {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 13px;
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--brand-bright);
  box-shadow: 0 0 0 3px var(--brand-glow);
  background: var(--glass-3);
}
textarea.input { resize: vertical; font-family: var(--font-sans); }

/* ============================================================
   PANEL / CARD
   ============================================================ */
.panel {
  background: var(--glass-2);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-glass-sm);
  transition: box-shadow var(--t-base) var(--ease-craft), border-color var(--t-fast);
}
.panel-flush { padding: 0; overflow: hidden; }
.panel-hover:hover { box-shadow: var(--shadow-glass); border-color: var(--glass-stroke-strong); }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.panel-title {
  font: 500 11px var(--font-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-400);
  display: inline-flex; align-items: center; gap: 8px;
}
.panel-title .icon { width: 14px; height: 14px; color: var(--brand-ink); }

/* ============================================================
   METRIC / KPI GRID
   ============================================================ */
.kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.kpi {
  background: var(--glass-2);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--shadow-glass-sm);
  transition: box-shadow var(--t-base) var(--ease-craft), transform var(--t-fast) var(--ease-craft);
}
.kpi:hover { box-shadow: var(--shadow-glass); transform: translateY(-1px); }
.kpi-label {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-400);
  display: inline-flex; align-items: center; gap: 7px;
}
.kpi-label .icon { width: 14px; height: 14px; color: var(--ink-300); }
.kpi-value {
  font: 600 30px/1 var(--font-sans);
  letter-spacing: -0.03em; color: var(--ink-900);
  margin-top: var(--s-3);
}
.kpi-value.sm { font-size: 26px; }
.kpi-delta {
  font: 500 12px var(--font-sans);
  margin-top: var(--s-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.kpi-delta .icon { width: 13px; height: 13px; }
.kpi-delta.up { color: var(--ok); }
.kpi-delta.dn { color: var(--stop); }
.kpi-delta.flat { color: var(--ink-400); }

/* ============================================================
   GRIDS for charts
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); }
.chart-box { position: relative; }

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-400);
  padding: 10px 14px; text-align: left;
  background: var(--glass-1);
  border-bottom: 1px solid var(--glass-stroke-strong);
  white-space: nowrap;
}
table.data td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--glass-stroke);
  vertical-align: middle;
  color: var(--ink-700);
}
table.data tbody tr:last-child td, table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background var(--t-fast); }
table.data tbody tr:hover td { background: var(--glass-1); }
.cell-strong { color: var(--ink-900); font-weight: 600; }
.cell-muted { color: var(--ink-400); font-weight: 400; }
.num-mono { font: 500 13px var(--font-mono); color: var(--ink-900); }

/* ============================================================
   BADGES — REVISED SYSTEM
   The earlier red "missed" badge implied the run had FAILED.
   It hadn't: the scan ran fine, the brand just wasn't named.
   New taxonomy keeps run-health and result strictly separate:

     .badge-mentioned  → success    brand was named (green)
     .badge-absent     → neutral    valid result, not named (grey, NOT red)
     .badge-failed     → error      the scan itself errored (red — reserved)
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font: 500 11px var(--font-sans);
  border: 1px solid transparent;
  white-space: nowrap;
  min-width: 112px;
}
.badge .icon { width: 12px; height: 12px; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.badge-mentioned {
  background: var(--ok-soft); color: var(--ok);
  border-color: rgba(5, 150, 105, 0.28);
}
.badge-mentioned .dot { background: var(--ok); }

.badge-absent {
  background: var(--glass-2); color: var(--ink-500);
  border-color: var(--glass-stroke-strong);
}
.badge-absent .dot { background: var(--ink-300); }

.badge-failed {
  background: var(--stop-soft); color: var(--stop);
  border-color: rgba(220, 38, 38, 0.3);
}
.badge-failed .dot { background: var(--stop); }

/* Neutral categorical tag (intents, sources) — one calm style, no rainbow. */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font: 500 11px var(--font-sans);
  background: var(--glass-2); color: var(--ink-500);
  border: 1px solid var(--glass-stroke);
  text-transform: capitalize;
}
.tag-brand {
  background: var(--brand-soft); color: var(--brand-ink);
  border-color: var(--brand-soft-strong); text-transform: none;
}

/* Small inline metric chips (question detail) */
.chip-stat {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px var(--font-mono);
  background: var(--glass-1); border: 1px solid var(--glass-stroke);
  color: var(--ink-500); padding: 3px 10px; border-radius: var(--r-pill);
}
.chip-stat strong { color: var(--ink-900); font-weight: 600; }

/* ============================================================
   ACCORDION (answers)
   ============================================================ */
.acc { border: 1px solid var(--glass-stroke); border-radius: var(--r-md); margin-bottom: var(--s-2); overflow: hidden; }
.acc-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 11px 14px; cursor: pointer; user-select: none;
  background: var(--glass-1);
  transition: background var(--t-fast);
}
.acc-head:hover { background: var(--glass-2); }
.acc-head .chev { width: 15px; height: 15px; color: var(--ink-400); transition: transform var(--t-fast) var(--ease-craft); flex-shrink: 0; }
.acc.open .acc-head .chev { transform: rotate(90deg); }
.acc-provider { font: 600 13px var(--font-sans); color: var(--ink-900); }
.acc-q { color: var(--ink-500); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-meta { margin-left: auto; font: 500 11px var(--font-mono); color: var(--ink-400); white-space: nowrap; flex-shrink: 0; }
.acc-body { display: none; padding: var(--s-4); border-top: 1px solid var(--glass-stroke); }
.acc.open .acc-body { display: block; }

.answer-pre {
  white-space: pre-wrap;
  font: 400 12px/1.7 var(--font-mono);
  background: var(--paper-deep);
  color: var(--ink-700);
  padding: 14px 16px; border-radius: var(--r-sm);
  max-height: 260px; overflow: auto;
  border: 1px solid var(--glass-stroke);
}

/* ============================================================
   TOGGLE (settings)
   ============================================================ */
.toggle {
  width: 38px; height: 21px; border-radius: var(--r-pill); border: none;
  cursor: pointer; position: relative; flex-shrink: 0; padding: 0;
  transition: background var(--t-base) var(--ease-craft), transform var(--t-fast);
}
.toggle:active { transform: scale(0.93); }
.toggle.on  { background: var(--brand-mid); }
.toggle.off { background: var(--ink-200); }
.toggle::after {
  content: ""; position: absolute; top: 3px;
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left var(--t-base) var(--ease-craft);
}
.toggle.on::after  { left: 20px; }
.toggle.off::after { left: 3px; }

/* ============================================================
   CALLOUT / BANNER
   ============================================================ */
.callout {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 13px 18px; border-radius: var(--r-md);
  font-size: 13px; line-height: 1.5;
  background: var(--brand-soft); border: 1px solid var(--brand-soft-strong);
  color: var(--brand-ink); margin-bottom: var(--s-6);
}
.callout .icon { width: 17px; height: 17px; flex-shrink: 0; }
.callout strong { color: var(--ink-900); }

/* ============================================================
   EMPTY / LOADING
   ============================================================ */
.empty {
  color: var(--ink-400); padding: var(--s-8); text-align: center;
  font-size: 13px; line-height: 1.6;
}
.loading { text-align: center; padding: 80px 24px; color: var(--ink-400); font-size: 14px; }
.loading .spinner { margin: 0 auto 20px; }
.spinner {
  width: 34px; height: 34px;
  border: 2.5px solid var(--glass-stroke-strong);
  border-top-color: var(--brand-mid);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   FEEDBACK (inline save confirmation)
   ============================================================ */
.feedback {
  font: 500 12px var(--font-sans); color: var(--ok);
  display: none; align-items: center; gap: 6px; padding: 0 16px 12px;
}
.feedback .icon { width: 14px; height: 14px; }

/* ============================================================
   COPY FIELDS / CODE BLOCKS
   ============================================================ */
.copy-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 11px;
  border-radius: var(--r-xs);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-2);
  color: var(--ink-500);
  cursor: pointer;
  font: 500 12px var(--font-sans);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.copy-btn:hover { background: var(--glass-3); color: var(--brand-ink); }
.copy-btn:active { transform: scale(0.95); }
.copy-btn.copied { color: var(--ok); border-color: rgba(5,150,105,.3); }
.copy-btn .icon { width: 14px; height: 14px; }

/* Single-line value (e.g. the MCP endpoint) with a copy button on the right. */
.code-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-1);
  border: 1px solid var(--glass-stroke-strong);
  border-radius: var(--r-sm);
  padding: 5px 5px 5px 14px;
  max-width: 100%; overflow: hidden;
}
.code-field code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font: 500 13px var(--font-mono); color: var(--ink-900);
  background: none; border: none; padding: 0;
  scrollbar-width: none;
}
.code-field code::-webkit-scrollbar { display: none; }

/* Multi-line snippet (e.g. the Claude config) with a corner copy button. */
.code-block { position: relative; }
.code-block pre {
  margin: 0;
  background: var(--paper-deep);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-sm);
  padding: 16px; padding-right: 52px;
  font: 400 12px/1.7 var(--font-mono);
  color: var(--ink-700);
  overflow-x: auto; white-space: pre;
}
.code-block .copy-btn { position: absolute; top: 10px; right: 10px; height: 30px; width: 30px; padding: 0; }

/* Copyable natural-language prompt card. */
.prompt {
  position: relative;
  background: var(--glass-1);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-sm);
  padding: 14px 52px 14px 16px;
  font: 400 13px/1.6 var(--font-sans);
  color: var(--ink-700);
}
.prompt .copy-btn { position: absolute; top: 10px; right: 10px; height: 30px; width: 30px; padding: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .grid-2, .grid-2-1 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .appbar { padding: 0 var(--s-4); }
  .page { padding: var(--s-6) var(--s-5) var(--s-12); }
}
@media (max-width: 600px) {
  .appbar-context { display: none; }
  .nav-link span { display: none; }
  .nav-link { padding: 8px; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .page-title { font-size: 24px; }
}

/* Lucide icons: shared sizing default so icons never jump pre/post hydration.
   Context rules (e.g. `.btn .icon`) are more specific and override these. */
[data-lucide] { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.icon { width: 16px; height: 16px; }
svg.lucide { width: 16px; height: 16px; stroke-width: 2; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}