/* Stratify HQ — shared styles for the internal console.
   Palette refreshed (polish batch): higher-chroma blues + lighter panels for
   a more energetic feel. Still dark theme. Do not introduce new tokens;
   reuse what's here. */

:root {
  --bg: #0d1626;
  --panel: #14203a;
  --panel-2: #1c2b4d;
  --border: #2b3d68;
  --text: #f0f4fb;
  --muted: #a3b5cf;
  --accent: #82b6ff;
  --accent-strong: #4a99ff;
  --green: #4ade80;
  --amber: #facc15;
  --red: #f87171;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  /* Theme-system tokens (2026-07 theme picker):
     --hover      → hover/focus surface (was hardcoded #24365e)
     --on-accent  → text drawn ON accent-colored buttons (was #0b1220)
     --accent-rgb → accent as bare R,G,B for rgba() glows/tints */
  --hover: #24365e;
  --on-accent: #0b1220;
  --accent-rgb: 130, 182, 255;
  /* --surface: bg for elevated fields/answer-buttons/inputs. On dark themes
     matches --panel-2. Light themes override to pure white so fields don't
     stack the same tinted color as their card container. */
  --surface: var(--panel-2);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }

/* ---------- Header ---------- */
header.site-header {
  padding: 28px 40px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--accent); font-weight: 700; font-size: 20px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text .name { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.brand-text .sub  { font-size: 12px; color: var(--muted); }

.header-right {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 13px;
  flex-wrap: wrap; justify-content: flex-end;
}
.header-right .nav-link { color: var(--accent); padding: 5px 10px; border-radius: 8px; transition: background .12s; }
.header-right .nav-link:hover { background: var(--panel-2); color: var(--accent-strong); }
.header-right .updated { font-size: 12px; color: var(--muted); }

/* Brand block doubles as the Home link on every page. */
a.brand { color: inherit; }
a.brand:hover { color: inherit; }
a.brand:hover .brand-mark { border-color: var(--accent-strong); }

/* ---------- Admin ▾ dropdown (2026-07 nav rework) ---------- */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-btn {
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.nav-dropdown .nav-caret {
  font-size: 10px; transition: transform .12s ease;
}
.nav-dropdown.dropdown-open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 190px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 300;
  flex-direction: column;
}
.nav-dropdown.dropdown-open .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 7px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: var(--hover);
  color: var(--accent);
  outline: none;
}
.pill {
  padding: 5px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--accent); font-size: 12px; font-weight: 600;
}

/* ---------- Layout ----------
   v3 Phase 2.5: widened from 1280 → 1600 for better use of desktop real estate.
   At 1920 the page still looks centered with generous side margins. */
main.page { max-width: 1600px; margin: 0 auto; padding: 40px; }
footer.site-footer {
  padding: 28px 40px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 12px; text-align: center; margin-top: 60px;
}

/* ---------- Hero / typography ---------- */
.lead-block { margin-bottom: 32px; }
h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: -.01em; }
.lead-block p { margin: 0; color: var(--muted); font-size: 15px; max-width: 760px; line-height: 1.55; }

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 36px 0 14px; }
.section-title h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.section-title .meta { color: var(--muted); font-size: 13px; }

/* ---------- Dashboard grid ---------- */
.grid {
  display: grid;
  /* minmax(0,1fr): cards must be able to shrink below their content
     min-width (the nowrap stat labels) or they overflow the viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Card ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  position: relative;
}
.card.state:hover { transform: translateY(-2px); border-color: var(--accent-strong); box-shadow: var(--shadow); }
/* Don't double-transform when expanded — it jitters. */
.card.state.card--expanded:hover { transform: none; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h3 { margin: 0; font-size: 18px; }

.badge { padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.badge.live   { background: rgba(74, 222, 128, .12); color: var(--green); border: 1px solid rgba(74, 222, 128, .3); }
.badge.draft  { background: rgba(250, 204, 21, .12); color: var(--amber); border: 1px solid rgba(250, 204, 21, .3); }
.badge.coming { background: rgba(148, 163, 184, .12); color: var(--muted); border: 1px solid rgba(148, 163, 184, .3); }

.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.stat .v { font-size: 18px; font-weight: 700; color: var(--text); }
.stat .l {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  /* Labels like "TOWNS SCANNED" must wrap on narrow cards — nowrap here
     forced every dashboard card to ~378px and overflowed phones/tablets. */
  letter-spacing: .08em; margin-top: 2px;
}

/* Two-row button area:
   Row 1 → Full Report (full width)
   Row 2 → All Leads | Regional Leads */
.button-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.button-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.button-row.single { grid-template-columns: 1fr; }

.link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 500;
  transition: background .12s, border-color .12s;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  white-space: nowrap;
}
/* Tighten font slightly at narrower card widths so labels don't wrap */
.button-row .link { font-size: 12.5px; padding: 10px 10px; }
.link:hover  { background: var(--hover); border-color: var(--accent-strong); }
.link .arrow { color: var(--muted); font-size: 14px; }
.link .icon  { color: var(--muted); flex-shrink: 0; transition: transform .18s ease, color .12s; }
.link:hover .icon { color: var(--accent); }
.link.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.link.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.link.primary .arrow,
.link.primary .icon { color: var(--on-accent); }
.link.primary:hover .icon { color: var(--on-accent); }

/* Chevron flip when Regional Leads panel is open */
.link.toggle-regions[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.link.toggle-regions[aria-expanded="true"] {
  background: var(--hover); border-color: var(--accent-strong); color: var(--accent);
}

/* Subtle hint on the count number in region list */
.link .muted-count { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 4px; }

.meta-line { color: var(--muted); font-size: 12px; padding-top: 4px; border-top: 1px dashed var(--border); }
.meta-line .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); margin: 0 8px 2px; vertical-align: middle; }

.placeholder {
  background: transparent;
  border: 1.5px dashed var(--border);
  color: var(--muted);
  text-align: center;
  padding: 28px 22px;
  border-radius: 14px;
  font-size: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 220px;
  transition: border-color .15s, color .15s;
}
.placeholder:hover { border-color: var(--accent-strong); color: var(--text); }
.placeholder svg { color: var(--accent); opacity: .6; }
.placeholder .muted-small { color: var(--muted); font-size: 12px; }
.placeholder code {
  color: var(--accent);
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 4px; font-size: 11.5px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Region expansion ----------
   When .card--expanded is added to a state card:
     • That card pins to column 1
     • The .region-panel becomes visible and spans columns 2 + 3
   Adjacent cards naturally reflow to the next grid line. */

.card--expanded {
  grid-column: 1;
  grid-row: span 1;
  border-color: var(--accent-strong);
  box-shadow: var(--shadow);
}

.region-panel {
  display: none;
  grid-column: 1 / -1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  flex-direction: column; gap: 14px;
  position: relative;
  /* subtle entrance animation when opening */
  animation: panel-in .18s ease-out;
}
.region-panel--open { display: flex; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* 3-col layout: pinned card on left, panel spans cols 2-3 */
@media (min-width: 980px) {
  .region-panel--open { grid-column: 2 / span 2; grid-row: span 1; }
}
/* 2-col layout: pinned card stays col 1; panel spans both cols below it.
   The other state cards reflow naturally to the next rows. */
@media (min-width: 640px) and (max-width: 979px) {
  .region-panel--open { grid-column: 1 / span 2; }
}

.region-panel .panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px dashed var(--border); padding-bottom: 10px;
}
.region-panel .panel-head h3 { margin: 0; font-size: 16px; letter-spacing: .01em; }
.region-panel .panel-close {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 30px; height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px; font-weight: 700;
  display: grid; place-items: center;
  transition: background .12s, color .12s, border-color .12s;
}
.region-panel .panel-close:hover { background: var(--hover); color: var(--text); border-color: var(--accent-strong); }

.region-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .region-grid { grid-template-columns: 1fr 1fr; } }

.region-panel .footer-note { color: var(--muted); font-size: 12px; padding-top: 4px; border-top: 1px dashed var(--border); }

/* ---------- Login ---------- */
.login-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 40px 20px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 30px 28px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 18px;
}
.login-card .brand { justify-content: center; }
.login-card h1 { font-size: 22px; text-align: center; margin: 4px 0 2px; }
.login-card .subhead { color: var(--muted); font-size: 13px; text-align: center; margin: 0 0 6px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card label { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.login-card input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .12s, background .12s;
  width: 100%;
}
.login-card input:focus { outline: none; border-color: var(--accent-strong); background: var(--hover); }
.field { display: flex; flex-direction: column; gap: 6px; }
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.2),
              background .18s ease,
              border-color .18s ease,
              box-shadow .22s ease;
}
.btn-primary:hover {
  background: var(--accent-strong); border-color: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), .28);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(var(--accent-rgb), .22); }
.tiny-note { font-size: 11px; color: var(--muted); text-align: center; margin: 0; letter-spacing: .04em; }
.error-banner {
  background: rgba(248, 113, 113, .1);
  border: 1px solid rgba(248, 113, 113, .35);
  color: var(--red);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  text-align: center;
}

/* ---------- Admin logs ---------- */
.admin-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
@media (min-width: 720px) { .admin-stats { grid-template-columns: repeat(4, 1fr); } }
.admin-stats .stat .v { font-size: 22px; }

.filter-bar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
@media (min-width: 720px) {
  .filter-bar { grid-template-columns: repeat(5, 1fr) auto; align-items: end; }
}
.filter-bar label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.filter-bar select, .filter-bar input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}
.filter-bar .field { gap: 4px; }
.filter-bar .actions { display: flex; gap: 8px; align-items: end; }
.filter-bar .actions .btn-sm { padding: 8px 14px; font-size: 13px; }

.btn-sm {
  /* Base padding + font-size — without these, buttons outside .filter-bar
     (e.g. .filter-actions on the sessions page) fall back to browser defaults
     which clip the label at native <button> font size. */
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.3;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.2),
              background .18s ease,
              border-color .18s ease,
              box-shadow .22s ease;
}
.btn-sm.secondary {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border);
  font-weight: 600;
}
/* Explicit color on hover — the global `a:hover { color: var(--accent-strong) }`
   would otherwise repaint the text to the exact color of the new background,
   making anchor-flavored .btn-sm buttons "disappear" on hover. */
.btn-sm:hover {
  background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(var(--accent-rgb), .26);
}
.btn-sm.secondary:hover {
  background: var(--hover); border-color: var(--accent-strong); color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(var(--accent-rgb), .18);
}
.btn-sm:active, .btn-sm.secondary:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(var(--accent-rgb), .20); }

.table-wrap {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  /* Horizontal scroll instead of silent column clipping on narrow screens. */
  overflow-x: auto; overflow-y: hidden;
  /* Subtle scrollbar styling so it doesn't look ugly */
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
table.audit { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
table.audit th, table.audit td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.audit th {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
table.audit tr:last-child td { border-bottom: none; }
table.audit td.kind { font-weight: 600; }
table.audit td.kind.login_success { color: var(--green); }
table.audit td.kind.login_fail    { color: var(--red); }
table.audit td.kind.logout        { color: var(--muted); }
table.audit td.kind.view_report   { color: var(--accent); }
table.audit td.kind.download      { color: var(--accent-strong); }
table.audit td.kind.admin_logs_view,
table.audit td.kind.admin_logs_export { color: var(--amber); }
table.audit td.ua { color: var(--muted); font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.audit td.resource { color: var(--muted); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px 0; font-size: 13px; color: var(--muted); }
.pager .links a { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-2); color: var(--accent); margin-left: 6px; }
.pager .links a:hover { border-color: var(--accent-strong); }
.pager .links span.disabled { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--muted); margin-left: 6px; opacity: .5; }

/* ---------- 403 ---------- */
.deny-shell {
  min-height: 70vh;
  display: grid; place-items: center;
  padding: 40px 20px;
}
.deny-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 30px 32px;
  text-align: center;
  max-width: 420px;
}
.deny-card h1 { margin-top: 0; }
.deny-card p { color: var(--muted); }

/* ---------- Responsive trims ---------- */
@media (max-width: 640px) {
  main.page { padding: 24px 18px; }
  header.site-header { padding: 20px 18px; }
  /* Keep stat-row at 3 cols — values are short and fit at 360px. */
}
/* Below ~380px the two-up card button row can't fit nowrap labels like
   "Regional Leads" / "Resend to Zoho" — stack to one column. */
@media (max-width: 379px) {
  .button-row { grid-template-columns: 1fr; }
}

/* =====================================================================
 * THEME SYSTEM (2026-07) — 38 selectable themes for sales agents.
 * Applied via html[data-theme="slug"]; persisted in localStorage.hq_theme.
 * Default (no attribute / "stratify-bright") = the :root palette above.
 * Fonts are lazy-loaded by theme.js; the font-family stacks below always
 * have safe system fallbacks so nothing breaks pre-load.
 * Light themes (Newspaper pattern): full surface inversion + darkened
 * --green/--amber/--red so status text holds AA (>=4.5:1) on pale panels,
 * + a softer --shadow. Every palette below was run through a WCAG checker:
 * text/bg >= 4.5, muted/bg >= 3, status colors >= 4.5 on bg AND panel.
 * ===================================================================== */

/* Text selection follows the active accent everywhere (explicit so light
   themes never fall back to an invisible UA default). */
::selection { background: rgba(var(--accent-rgb), .35); color: var(--text); }

/* 1. Stratify Bright — default; defined by :root. Alias block kept empty
      on purpose so data-theme="stratify-bright" is valid. */
html[data-theme="stratify-bright"] { /* :root defaults */ }

/* 2. Stratify Classic — the pre-polish darker navy + periwinkle */
html[data-theme="stratify-classic"] {
  --bg: #0b1220; --panel: #101a30; --panel-2: #16233f;
  --border: #1f2d4d; --text: #e8edf6; --muted: #93a4bf;
  --accent: #a4c2f4; --accent-strong: #6ea1ee;
  --hover: #1d2f52; --on-accent: #0b1220; --accent-rgb: 164, 194, 244;
}

/* 3. Redeemed — warm gold/copper, inspirational (Redeemed Strength) */
html[data-theme="redeemed"] {
  --bg: #171006; --panel: #221809; --panel-2: #2e2010;
  --border: #4a3517; --text: #f7edd8; --muted: #c4ad82;
  --accent: #e0b357; --accent-strong: #c89638;
  --hover: #3a2a12; --on-accent: #201505; --accent-rgb: 224, 179, 87;
}
html[data-theme="redeemed"] body { font-family: 'Inter', system-ui, sans-serif; }
html[data-theme="redeemed"] h1, html[data-theme="redeemed"] h2,
html[data-theme="redeemed"] h3, html[data-theme="redeemed"] .node-question,
html[data-theme="redeemed"] .brand-text .name { font-family: 'Playfair Display', Georgia, serif; }

/* 4. Family Blue — soft blue + cream, FRN-derived warmth */
html[data-theme="family-blue"] {
  --bg: #0f2036; --panel: #16304f; --panel-2: #1e3d63;
  --border: #2f5480; --text: #f5f1e8; --muted: #a8bdd4;
  --accent: #7fb2e5; --accent-strong: #5896d6;
  --hover: #264a75; --on-accent: #0d1c2e; --accent-rgb: 127, 178, 229;
}
html[data-theme="family-blue"] body { font-family: 'Open Sans', system-ui, sans-serif; }
html[data-theme="family-blue"] h1, html[data-theme="family-blue"] h2,
html[data-theme="family-blue"] h3, html[data-theme="family-blue"] .node-question,
html[data-theme="family-blue"] .brand-text .name { font-family: 'Playfair Display', Georgia, serif; }

/* 5. Intake Steel — corporate slate + Stratify-intake teal/gold */
html[data-theme="intake-steel"] {
  --bg: #12161c; --panel: #1a2332; --panel-2: #232e40;
  --border: #35435a; --text: #eef2f6; --muted: #9aa8b8;
  --accent: #5fb6c5; --accent-strong: #d4a731;
  --hover: #2b3950; --on-accent: #0d1218; --accent-rgb: 95, 182, 197;
}

/* 6. Midnight — deep royal blue + silver */
html[data-theme="midnight"] {
  --bg: #070b1d; --panel: #0d1330; --panel-2: #131b41;
  --border: #232e63; --text: #e9ecf8; --muted: #9aa3c7;
  --accent: #c3cbe8; --accent-strong: #8f9fd9;
  --hover: #1a2450; --on-accent: #0a0f26; --accent-rgb: 195, 203, 232;
}
html[data-theme="midnight"] body { font-family: 'Space Grotesk', system-ui, sans-serif; }

/* 7. Aurora — dark violet base, purple/cyan energy */
html[data-theme="aurora"] {
  --bg: #0a0e1a; --panel: #12172b; --panel-2: #1a2040;
  --border: #2c3563; --text: #eef0fa; --muted: #a0a8cc;
  --accent: #a78bfa; --accent-strong: #22d3ee;
  --hover: #232b55; --on-accent: #12071f; --accent-rgb: 167, 139, 250;
}

/* 8. Cyber Neon — black + magenta/cyan, mono type */
html[data-theme="cyber-neon"] {
  --bg: #050508; --panel: #0d0d14; --panel-2: #14141f;
  --border: #2a2a3d; --text: #f2f2f7; --muted: #9494ad;
  --accent: #ff4fd8; --accent-strong: #00e5ff;
  --hover: #1c1c2c; --on-accent: #0a0a0f; --accent-rgb: 255, 79, 216;
}
html[data-theme="cyber-neon"] body { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

/* 9. Forest — FRN forest green + antique gold */
html[data-theme="forest"] {
  --bg: #0c150e; --panel: #14231a; --panel-2: #1b2f22;
  --border: #2d4a33; --text: #eef5ee; --muted: #9db8a2;
  --accent: #d4a017; --accent-strong: #b98a10;
  --hover: #24402e; --on-accent: #141003; --accent-rgb: 212, 160, 23;
}
html[data-theme="forest"] body { font-family: 'Nunito', system-ui, sans-serif; }

/* 10. Ocean — usestratify.com brand navy + sea-foam/cyan */
html[data-theme="ocean"] {
  --bg: #050a1a; --panel: #0c1829; --panel-2: #111d2e;
  --border: #23374a; --text: #eaf4f6; --muted: #8fabba;
  --accent: #2dd4be; --accent-strong: #0ea5e9;
  --hover: #16283c; --on-accent: #04201c; --accent-rgb: 45, 212, 190;
}

/* 11. Sunset — warm orange/pink on dark plum */
html[data-theme="sunset"] {
  --bg: #1c0f16; --panel: #291721; --panel-2: #371f2c;
  --border: #543147; --text: #fdf0ea; --muted: #cfa4a8;
  --accent: #fb923c; --accent-strong: #f472b6;
  --hover: #452939; --on-accent: #2a1005; --accent-rgb: 251, 146, 60;
}
html[data-theme="sunset"] body { font-family: 'Nunito', system-ui, sans-serif; }

/* 12. Rose Gold — soft pink + gold accents */
html[data-theme="rose-gold"] {
  --bg: #1d1417; --panel: #291d21; --panel-2: #36262c;
  --border: #543c45; --text: #f9eef1; --muted: #c9a8b1;
  --accent: #f2a6c0; --accent-strong: #d9a662;
  --hover: #443037; --on-accent: #2b131c; --accent-rgb: 242, 166, 192;
}
html[data-theme="rose-gold"] body { font-family: 'Inter', system-ui, sans-serif; }
html[data-theme="rose-gold"] h1, html[data-theme="rose-gold"] h2,
html[data-theme="rose-gold"] h3, html[data-theme="rose-gold"] .node-question,
html[data-theme="rose-gold"] .brand-text .name { font-family: 'Playfair Display', Georgia, serif; }

/* 13. Terminal — pure black + phosphor green */
html[data-theme="terminal"] {
  --bg: #000000; --panel: #0a0f0a; --panel-2: #101810;
  --border: #1e3320; --text: #d4f7d4; --muted: #6fa578;
  --accent: #33ff66; --accent-strong: #00cc44;
  --hover: #16241a; --on-accent: #001505; --accent-rgb: 51, 255, 102;
}
html[data-theme="terminal"] body { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

/* 14. Newspaper — LIGHT. Off-white stock + serif ink + masthead red.
       Full surface inversion; status colors darkened for AA contrast. */
html[data-theme="newspaper"] {
  --bg: #f4f1ea; --panel: #fdfcf8; --panel-2: #ece8dd;
  --border: #cdc6b6; --text: #1e1b16; --muted: #6b6357;
  --accent: #9c3832; --accent-strong: #772a25;
  --hover: #e4dfd2; --on-accent: #ffffff; --accent-rgb: 156, 56, 50;
  --green: #15803d; --amber: #a16207; --red: #b91c1c;
  --shadow: 0 10px 30px rgba(60, 50, 30, .14);
}
html[data-theme="newspaper"] body { font-family: 'Merriweather', Georgia, serif; }

/* 15. Focus Mono — pure grayscale, zero distraction */
html[data-theme="focus-mono"] {
  --bg: #101012; --panel: #17171a; --panel-2: #1f1f24;
  --border: #333338; --text: #f2f2f3; --muted: #9c9ca3;
  --accent: #d4d4d8; --accent-strong: #a1a1aa;
  --hover: #2a2a30; --on-accent: #111113; --accent-rgb: 212, 212, 216;
}

/* 16. Coffee — warm browns + cream */
html[data-theme="coffee"] {
  --bg: #191210; --panel: #231a16; --panel-2: #2e221d;
  --border: #4a3a30; --text: #f5ece3; --muted: #bfa58f;
  --accent: #d9a366; --accent-strong: #b97f3f;
  --hover: #3b2c24; --on-accent: #201207; --accent-rgb: 217, 163, 102;
}
html[data-theme="coffee"] body { font-family: 'Merriweather', Georgia, serif; }

/* 17. Purple Haze — deep purple + lavender */
html[data-theme="purple-haze"] {
  --bg: #120c1e; --panel: #1b1330; --panel-2: #251a41;
  --border: #3d2d63; --text: #f1ecfa; --muted: #ab9ecb;
  --accent: #c4a7f7; --accent-strong: #9a6ef0;
  --hover: #302253; --on-accent: #170b2b; --accent-rgb: 196, 167, 247;
}
html[data-theme="purple-haze"] body { font-family: 'Space Grotesk', system-ui, sans-serif; }

/* 18. Sky — LIGHT. Soft light blue + white; brand blue accent. */
html[data-theme="sky"] {
  --bg: #eef4fb; --panel: #ffffff; --panel-2: #e3edf8;
  --border: #c3d4e8; --text: #16233a; --muted: #5a6c85;
  --accent: #2d6fc1; --accent-strong: #1c56a0;
  --hover: #d8e6f5; --on-accent: #ffffff; --accent-rgb: 45, 111, 193;
  --green: #15803d; --amber: #a16207; --red: #b91c1c;
  --shadow: 0 10px 30px rgba(30, 60, 110, .12);
}

/* Stratify Light family — LIGHT twins of Stratify Bright.
   Pure white bg, deep-navy text, particles background; only the accent
   swaps between blue / green / orange / rose / purple / teal. All accents
   pass AA on white with white on-accent for button contrast. */
html[data-theme="stratify-light"] {
  /* Slight vibrancy bump on the accent — was #2f5480 (steel navy) which read
     as a bit too muted. #2f66c2 keeps the Family Blue feel but reads as
     "professional & alive" instead of "conservative & tired". */
  --bg: #ffffff; --panel: #eef3fa; --panel-2: #dbe6f4;
  --border: #bcd0e6; --text: #0f2036; --muted: #4c5f7a;
  --accent: #2f66c2; --accent-strong: #1f52a8;
  --hover: #d0dfef; --on-accent: #ffffff; --accent-rgb: 47, 102, 194;
  --green: #15803d; --amber: #a16207; --red: #b91c1c;
  --shadow: 0 10px 30px rgba(15, 32, 54, .10);
}
/* Stratify Vivid — pure white cards on a white bg, defined by an
   accent-tinted translucent border and a punchy accent-tinted shadow.
   No powder-blue tint anywhere — cards feel "productive & alive" rather
   than dull. Accent + particles still carry the vibrancy. */
html[data-theme="stratify-vivid"] {
  --bg: #ffffff; --panel: #ffffff; --panel-2: #eff5fd;
  /* Semi-transparent accent-tinted border reads as a crisp electric line
     on white — none of the muddy solid #bcd0e6 powder-blue look. */
  --border: rgba(43, 109, 216, .24);
  --text: #0f2036; --muted: #4c5f7a;
  --accent: #2b6dd8; --accent-strong: #1c56a0;
  --hover: rgba(43, 109, 216, .07);
  --on-accent: #ffffff; --accent-rgb: 43, 109, 216;
  --green: #15803d; --amber: #a16207; --red: #b91c1c;
  --shadow: 0 14px 34px rgba(43, 109, 216, .15);
}
html[data-theme="stratify-green"] {
  --bg: #ffffff; --panel: #f5fbf7; --panel-2: #e6f3ea;
  --border: #cfe4d6; --text: #0d1626; --muted: #5a6c85;
  --accent: #15803d; --accent-strong: #0f6b31;
  --hover: #d5ecdd; --on-accent: #ffffff; --accent-rgb: 21, 128, 61;
  --green: #15803d; --amber: #a16207; --red: #b91c1c;
  --shadow: 0 10px 30px rgba(30, 90, 60, .10);
}
html[data-theme="stratify-orange"] {
  --bg: #ffffff; --panel: #fdf7f2; --panel-2: #f7e6d6;
  --border: #ead1ba; --text: #0d1626; --muted: #7a604a;
  --accent: #c2410c; --accent-strong: #9a3208;
  --hover: #f2dcc4; --on-accent: #ffffff; --accent-rgb: 194, 65, 12;
  --green: #15803d; --amber: #a16207; --red: #b91c1c;
  --shadow: 0 10px 30px rgba(120, 60, 20, .10);
}
html[data-theme="stratify-rose"] {
  --bg: #ffffff; --panel: #fdf5f8; --panel-2: #f7dfe6;
  --border: #ecc8d3; --text: #1a0d16; --muted: #7a5a68;
  --accent: #be185d; --accent-strong: #9d1149;
  --hover: #f2ccda; --on-accent: #ffffff; --accent-rgb: 190, 24, 93;
  --green: #15803d; --amber: #a16207; --red: #b91c1c;
  --shadow: 0 10px 30px rgba(130, 30, 70, .10);
}
html[data-theme="stratify-purple"] {
  --bg: #ffffff; --panel: #f8f5fd; --panel-2: #e9ddf7;
  --border: #d5c4ea; --text: #16101f; --muted: #6b5d7e;
  --accent: #7c3aed; --accent-strong: #5f27ce;
  --hover: #e2d1f5; --on-accent: #ffffff; --accent-rgb: 124, 58, 237;
  --green: #15803d; --amber: #a16207; --red: #b91c1c;
  --shadow: 0 10px 30px rgba(60, 30, 130, .10);
}
html[data-theme="stratify-teal"] {
  --bg: #ffffff; --panel: #f2fbfa; --panel-2: #dcf1ee;
  --border: #bde0db; --text: #0a1a1a; --muted: #4a6866;
  --accent: #0d9488; --accent-strong: #087467;
  --hover: #c8ebe5; --on-accent: #ffffff; --accent-rgb: 13, 148, 136;
  --green: #15803d; --amber: #a16207; --red: #b91c1c;
  --shadow: 0 10px 30px rgba(15, 80, 75, .10);
}

/* Stratify Intake — palette lifted directly from stratifyintakeservices.com:
   teal primary (#2E8B9A), deep navy heading (#0F1A2A), soft teal-cream panels
   (#EDF6F8), warm gold as the amber accent (#D4A731). Same white-workspace
   posture as the rest of the Stratify Light family, but with the intake
   services brand hue instead of blue. */
html[data-theme="stratify-intake"] {
  --bg: #F8FCFC; --panel: #FFFFFF; --panel-2: #EDF6F8;
  --border: #D1E2E4; --text: #0F1A2A; --muted: #6B7585;
  --accent: #2E8B9A; --accent-strong: #247080;
  --hover: #E8F4F7; --on-accent: #FFFFFF; --accent-rgb: 46, 139, 154;
  --green: #2D9B5A; --amber: #D4A731; --red: #D94444;
  --shadow: 2px 4px 34px rgba(0, 0, 0, .08);
}
/* Signature teal→teal-mid gradient on primary CTAs to match the site's
   button + hero treatments. Scoped to this theme only. */
html[data-theme="stratify-intake"] .btn-primary,
html[data-theme="stratify-intake"] .btn-sm:not(.secondary) {
  background: linear-gradient(135deg, #2E8B9A 0%, #38B2AC 100%);
  border-color: #2E8B9A;
}
html[data-theme="stratify-intake"] .btn-primary:hover,
html[data-theme="stratify-intake"] .btn-sm:not(.secondary):hover {
  background: linear-gradient(135deg, #247080 0%, #2E8B9A 100%);
  border-color: #247080;
}

/* --- Shared surface override for all Stratify Light family themes ---
   Elevated fields (answer buttons, form inputs, option rows) sit on pure
   white so they never stack the same tinted color as the card panels. */
html[data-theme="stratify-light"],
html[data-theme="stratify-vivid"],
html[data-theme="stratify-rose"],
html[data-theme="stratify-orange"],
html[data-theme="stratify-green"],
html[data-theme="stratify-teal"],
html[data-theme="stratify-purple"],
html[data-theme="stratify-intake"] {
  --surface: #ffffff;
}

/* =====================================================================
 * EXPANSION BATCH (2026-07, +20) — themes 19-38. Heavy on LIGHT modes.
 * ===================================================================== */

/* 19. Cream Paper — LIGHT. Warm off-white notebook stock + brown ink +
       burnt orange. on-accent is dark: white on #c96f2b is only 3.6:1. */
html[data-theme="cream-paper"] {
  --bg: #fbf7ee; --panel: #f5eee0; --panel-2: #ece1cd;
  --border: #d4c9b0; --text: #3a2f22; --muted: #71624c;
  --accent: #c96f2b; --accent-strong: #a55620;
  --hover: #e4d6ba; --on-accent: #2a1500; --accent-rgb: 201, 111, 43;
  --green: #28702c; --amber: #8a5a06; --red: #b03030;
  --shadow: 0 10px 30px rgba(70, 55, 30, .14);
}
html[data-theme="cream-paper"] body { font-family: 'Merriweather', Georgia, serif; }

/* 20. Sage Meadow — LIGHT. Pale sage + charcoal ink + moss green. */
html[data-theme="sage-meadow"] {
  --bg: #eef4ec; --panel: #ffffff; --panel-2: #dfeadb;
  --border: #bed1b8; --text: #25302a; --muted: #5b6e5e;
  --accent: #4c7a4c; --accent-strong: #3a5f3a;
  --hover: #d2e2cc; --on-accent: #ffffff; --accent-rgb: 76, 122, 76;
  --green: #2e7d32; --amber: #8a5a06; --red: #b3261e;
  --shadow: 0 10px 30px rgba(40, 70, 40, .12);
}
html[data-theme="sage-meadow"] body { font-family: 'Nunito', system-ui, sans-serif; }

/* 21. Peach Sunrise — LIGHT. Soft peach + warm brown ink + deep coral
       (coral darkened from #e77e5a for link/button contrast). */
html[data-theme="peach-sunrise"] {
  --bg: #fff2ea; --panel: #fffaf6; --panel-2: #fbe2d2;
  --border: #e8c3ac; --text: #48291a; --muted: #8a6553;
  --accent: #c14e26; --accent-strong: #9c3812;
  --hover: #f7d5c0; --on-accent: #ffffff; --accent-rgb: 193, 78, 38;
  --green: #2e7d32; --amber: #8a5a06; --red: #b3261e;
  --shadow: 0 10px 30px rgba(120, 60, 30, .13);
}
html[data-theme="peach-sunrise"] body { font-family: 'Inter', system-ui, sans-serif; }
html[data-theme="peach-sunrise"] h1, html[data-theme="peach-sunrise"] h2,
html[data-theme="peach-sunrise"] h3, html[data-theme="peach-sunrise"] .node-question,
html[data-theme="peach-sunrise"] .brand-text .name { font-family: 'Playfair Display', Georgia, serif; }

/* 22. Lavender Bloom — LIGHT. Pale lavender + deep purple ink + antique
       gold (deepened from #c69649 so links pass on the pale bg). */
html[data-theme="lavender-bloom"] {
  --bg: #f4eef9; --panel: #fdfbff; --panel-2: #e8dcf2;
  --border: #cdbadd; --text: #372a4d; --muted: #6d6083;
  --accent: #8a651c; --accent-strong: #6d4e12;
  --hover: #ddcdeb; --on-accent: #ffffff; --accent-rgb: 138, 101, 28;
  --green: #2e7d32; --amber: #8a5a06; --red: #b3261e;
  --shadow: 0 10px 30px rgba(70, 45, 110, .12);
}
html[data-theme="lavender-bloom"] body { font-family: 'Inter', system-ui, sans-serif; }
html[data-theme="lavender-bloom"] h1, html[data-theme="lavender-bloom"] h2,
html[data-theme="lavender-bloom"] h3, html[data-theme="lavender-bloom"] .node-question,
html[data-theme="lavender-bloom"] .brand-text .name { font-family: 'Playfair Display', Georgia, serif; }

/* 23. Mint Fresh — LIGHT. Cool mint + dark teal ink + coral pop. */
html[data-theme="mint-fresh"] {
  --bg: #e6f5ef; --panel: #ffffff; --panel-2: #d3ebe0;
  --border: #aed4c3; --text: #143b34; --muted: #4c6e65;
  --accent: #c04c2e; --accent-strong: #993617;
  --hover: #c4e2d3; --on-accent: #ffffff; --accent-rgb: 192, 76, 46;
  --green: #1e7a4c; --amber: #8a5a06; --red: #b3261e;
  --shadow: 0 10px 30px rgba(20, 80, 60, .12);
}
html[data-theme="mint-fresh"] body { font-family: 'Nunito', system-ui, sans-serif; }

/* 24. Butter Legal Pad — LIGHT. Buttery yellow stock + brown ink; the
       accent is the classic blue rule line, --red the margin line. */
html[data-theme="butter-legal-pad"] {
  --bg: #fdf6d1; --panel: #fffbe4; --panel-2: #f3e7ae;
  --border: #d3c17e; --text: #3e3213; --muted: #786a3a;
  --accent: #2b5aa0; --accent-strong: #1d4380;
  --hover: #eedf9c; --on-accent: #ffffff; --accent-rgb: 43, 90, 160;
  --green: #59711b; --amber: #8a5a00; --red: #b03030;
  --shadow: 0 10px 30px rgba(90, 75, 20, .14);
}
html[data-theme="butter-legal-pad"] body { font-family: 'Merriweather', Georgia, serif; }

/* 25. Powder Blue — LIGHT. Soft powder blue + navy ink + burnt orange. */
html[data-theme="powder-blue"] {
  --bg: #e9f2fa; --panel: #ffffff; --panel-2: #d7e7f4;
  --border: #b3cde3; --text: #182a3f; --muted: #53667c;
  --accent: #b35a12; --accent-strong: #8e4408;
  --hover: #c8ddef; --on-accent: #ffffff; --accent-rgb: 179, 90, 18;
  --green: #1e7a4c; --amber: #8a5a06; --red: #b3261e;
  --shadow: 0 10px 30px rgba(30, 60, 110, .12);
}

/* 26. Blush Elegance — LIGHT. Soft blush + burgundy ink + deep rose. */
html[data-theme="blush-elegance"] {
  --bg: #fbeeef; --panel: #fffafa; --panel-2: #f3dade;
  --border: #dcb6bc; --text: #491f27; --muted: #875e66;
  --accent: #9c4a56; --accent-strong: #7b333e;
  --hover: #eccdd2; --on-accent: #ffffff; --accent-rgb: 156, 74, 86;
  --green: #2e7d32; --amber: #8a5a06; --red: #b3261e;
  --shadow: 0 10px 30px rgba(110, 45, 55, .12);
}
html[data-theme="blush-elegance"] body { font-family: 'Inter', system-ui, sans-serif; }
html[data-theme="blush-elegance"] h1, html[data-theme="blush-elegance"] h2,
html[data-theme="blush-elegance"] h3, html[data-theme="blush-elegance"] .node-question,
html[data-theme="blush-elegance"] .brand-text .name { font-family: 'Playfair Display', Georgia, serif; }

/* 27. Linen — LIGHT. Beige-tan weave + warm brown ink + sage accent. */
html[data-theme="linen"] {
  --bg: #f2ede2; --panel: #fbf8f1; --panel-2: #e5decb;
  --border: #c9bfa5; --text: #3c3426; --muted: #726853;
  --accent: #5b6f47; --accent-strong: #455636;
  --hover: #dcd3bb; --on-accent: #ffffff; --accent-rgb: 91, 111, 71;
  --green: #28702c; --amber: #8a5a06; --red: #b3261e;
  --shadow: 0 10px 30px rgba(75, 65, 40, .13);
}
html[data-theme="linen"] body { font-family: 'Merriweather', Georgia, serif; }

/* 28. Robin's Egg — LIGHT. Pale robin's-egg blue + navy ink + coral
       (deepened from #e07856 for AA on the pale bg). */
html[data-theme="robins-egg"] {
  --bg: #e0efee; --panel: #ffffff; --panel-2: #cde4e2;
  --border: #a4cac7; --text: #173343; --muted: #516f7a;
  --accent: #bc5028; --accent-strong: #963a16;
  --hover: #bfdbd8; --on-accent: #ffffff; --accent-rgb: 188, 80, 40;
  --green: #1e7a4c; --amber: #8a5a06; --red: #b3261e;
  --shadow: 0 10px 30px rgba(25, 75, 80, .12);
}
html[data-theme="robins-egg"] body { font-family: 'Nunito', system-ui, sans-serif; }

/* 29. Vanilla Bean — LIGHT. Vanilla cream + espresso ink + deep gold. */
html[data-theme="vanilla-bean"] {
  --bg: #f8f2e6; --panel: #fffdf5; --panel-2: #eee3ca;
  --border: #d3c6a4; --text: #332619; --muted: #6f5f48;
  --accent: #8f6a12; --accent-strong: #71530c;
  --hover: #e7d9b9; --on-accent: #ffffff; --accent-rgb: 143, 106, 18;
  --green: #2e7d32; --amber: #8a5a06; --red: #b3261e;
  --shadow: 0 10px 30px rgba(80, 65, 35, .13);
}
html[data-theme="vanilla-bean"] body { font-family: 'Merriweather', Georgia, serif; }

/* 30. Arctic — LIGHT. Pure white + steel-blue ink + bright blue. Panels
       share the white bg, so the gray border carries the card edges. */
html[data-theme="arctic"] {
  --bg: #ffffff; --panel: #ffffff; --panel-2: #f1f5f9;
  --border: #d6dde6; --text: #3a4c60; --muted: #64778c;
  --accent: #1a63d6; --accent-strong: #1149a8;
  --hover: #e7edf4; --on-accent: #ffffff; --accent-rgb: 26, 99, 214;
  --green: #1a7f37; --amber: #8a5a06; --red: #c11c1c;
  --shadow: 0 10px 30px rgba(40, 60, 90, .10);
}

/* 31. Cosmic Ballet — deep space purple + magenta, starfield. */
html[data-theme="cosmic-ballet"] {
  --bg: #150a2c; --panel: #1e1140; --panel-2: #291955;
  --border: #43307c; --text: #f0eafc; --muted: #a898cc;
  --accent: #e654a8; --accent-strong: #c93a8c;
  --hover: #34216a; --on-accent: #24051a; --accent-rgb: 230, 84, 168;
}
html[data-theme="cosmic-ballet"] body { font-family: 'Space Grotesk', system-ui, sans-serif; }

/* 32. Emerald Night — deep forest dark + emerald, gold highlights. */
html[data-theme="emerald-night"] {
  --bg: #0e1a15; --panel: #142520; --panel-2: #1b322b;
  --border: #2e4f43; --text: #eaf5ef; --muted: #93b3a4;
  --accent: #2ec27e; --accent-strong: #d4a017;
  --hover: #234037; --on-accent: #04140c; --accent-rgb: 46, 194, 126;
}
html[data-theme="emerald-night"] h1, html[data-theme="emerald-night"] h2,
html[data-theme="emerald-night"] h3, html[data-theme="emerald-night"] .node-question,
html[data-theme="emerald-night"] .brand-text .name { font-family: 'Playfair Display', Georgia, serif; }

/* 33. Vintage Amber — brown-black CRT + amber phosphor glow, mono. */
html[data-theme="vintage-amber"] {
  --bg: #1c1509; --panel: #261d0d; --panel-2: #322612;
  --border: #55401d; --text: #f5e7c8; --muted: #b39c6e;
  --accent: #f2a900; --accent-strong: #cc8c00;
  --hover: #40311a; --on-accent: #201500; --accent-rgb: 242, 169, 0;
}
html[data-theme="vintage-amber"] body { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

/* 34. Blood Orange — deep charcoal + burnt orange + warm cream. */
html[data-theme="blood-orange"] {
  --bg: #150e0a; --panel: #201511; --panel-2: #2c1c15;
  --border: #4d3225; --text: #f7ede4; --muted: #c2a48f;
  --accent: #e5652f; --accent-strong: #c14e1d;
  --hover: #3a2619; --on-accent: #1f0d04; --accent-rgb: 229, 101, 47;
}
html[data-theme="blood-orange"] body { font-family: 'Space Grotesk', system-ui, sans-serif; }

/* 35. Ice Palace — deep blue-black + ice-crystal cyan, starfield. */
html[data-theme="ice-palace"] {
  --bg: #08111f; --panel: #0e1a2d; --panel-2: #14233c;
  --border: #28405e; --text: #eef4fa; --muted: #93a9c1;
  --accent: #87ceeb; --accent-strong: #4fb3dd;
  --hover: #1b2f4c; --on-accent: #06121e; --accent-rgb: 135, 206, 235;
}

/* 36. Retrowave — 80s synthwave: purple night + hot magenta + cyan. */
html[data-theme="retrowave"] {
  --bg: #16062b; --panel: #200d3d; --panel-2: #2b1452;
  --border: #4b2580; --text: #f4ecff; --muted: #ab93d6;
  --accent: #ff2a92; --accent-strong: #00e5ff;
  --hover: #371b66; --on-accent: #230012; --accent-rgb: 255, 42, 146;
}
html[data-theme="retrowave"] body { font-family: 'Space Grotesk', system-ui, sans-serif; }

/* 37. Sepia Archive — old-photograph browns + antique amber. */
html[data-theme="sepia-archive"] {
  --bg: #2a1e11; --panel: #352719; --panel-2: #413021;
  --border: #634b32; --text: #f0e2c8; --muted: #bda583;
  --accent: #d29a3f; --accent-strong: #b37e26;
  --hover: #4e3a26; --on-accent: #241705; --accent-rgb: 210, 154, 63;
}
html[data-theme="sepia-archive"] body { font-family: 'Merriweather', Georgia, serif; }

/* 38. Botanical Night — deep forest green + fern accent + amber. */
html[data-theme="botanical-night"] {
  --bg: #0a1a0e; --panel: #112616; --panel-2: #17331e;
  --border: #2d5537; --text: #edf6e9; --muted: #9cbb9e;
  --accent: #6fbf73; --accent-strong: #d9a94e;
  --hover: #204329; --on-accent: #05170a; --accent-rgb: 111, 191, 115;
}
html[data-theme="botanical-night"] body { font-family: 'Nunito', system-ui, sans-serif; }

/* ---------- Theme picker (header pill + popover grid) ---------- */
.theme-picker { position: relative; display: inline-flex; flex-shrink: 0; }
.theme-picker-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.theme-picker-btn:hover { color: var(--text); border-color: var(--accent-strong); }
.theme-picker-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.theme-picker-btn .tp-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), .5);
}
@media (max-width: 800px) { .theme-picker-btn .tp-name { display: none; } }

.theme-pop {
  position: absolute; right: 0; top: calc(100% + 8px);
  z-index: 450;
  width: min(560px, 92vw);
  max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--accent-strong);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.theme-pop::-webkit-scrollbar { width: 6px; }
.theme-pop::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.theme-pop[hidden] { display: none; }
.theme-pop .tp-head {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; padding: 2px 4px 10px;
}
.theme-pop .tp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
/* Light / Dark group headers inside the grid (expansion batch, 2026-07). */
.theme-pop .tp-group-head {
  grid-column: 1 / -1;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
  padding: 6px 4px 2px;
  border-bottom: 1px dashed var(--border);
}
.theme-pop .tp-group-head:first-child { padding-top: 0; }
.theme-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid; cursor: pointer;
  font-family: inherit; text-align: left;
  transition: transform .12s, box-shadow .12s;
}
/* Card surfaces are painted inline by theme.js from the theme's own palette
   so every card previews its true colors regardless of the active theme. */
.theme-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.theme-card:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.theme-card.active { box-shadow: 0 0 0 2px var(--accent-strong); }
.theme-card .tc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.theme-card .tc-name { font-size: 12.5px; font-weight: 700; }
.theme-card .tc-swatches { display: inline-flex; gap: 3px; flex-shrink: 0; }
.theme-card .tc-sw {
  width: 11px; height: 11px; border-radius: 3px;
  border: 1px solid rgba(128, 128, 128, .35);
}
.theme-card .tc-sample {
  font-size: 11px; line-height: 1.35; opacity: .75;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.theme-card .tc-tag {
  font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  opacity: .6;
}

/* ---------- Background effects ----------
   #theme-fx sits fixed behind everything (z-index -1 paints above the body
   background but below all in-flow content). pointer-events: none always.
   All motion is CSS-driven so prefers-reduced-motion can freeze it globally. */
#theme-fx {
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  overflow: hidden;
}

/* aurora — slowly rotating conic wash of accent + accent-strong */
#theme-fx.fx-aurora::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 160vmax; height: 160vmax;
  margin: -80vmax 0 0 -80vmax;
  background: conic-gradient(from 0deg,
    rgba(var(--accent-rgb), .14),
    transparent 30%,
    rgba(var(--accent-rgb), .08) 50%,
    transparent 72%,
    rgba(var(--accent-rgb), .14));
  filter: blur(48px);
  will-change: transform;
  animation: fx-aurora-spin 40s linear infinite;
}
#theme-fx.fx-aurora::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 45% at 50% 0%,
    rgba(var(--accent-rgb), .10), transparent 65%);
}
@keyframes fx-aurora-spin { to { transform: rotate(360deg); } }

/* gradient-drift — two soft radial pools translating across the viewport */
#theme-fx.fx-gradient-drift::before,
#theme-fx.fx-gradient-drift::after {
  content: '';
  position: absolute;
  width: 65vmax; height: 65vmax; border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
#theme-fx.fx-gradient-drift::before {
  left: -12vmax; top: -12vmax;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .13), transparent 70%);
  animation: fx-drift-a 34s ease-in-out infinite alternate;
}
#theme-fx.fx-gradient-drift::after {
  right: -12vmax; bottom: -12vmax;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .09), transparent 70%);
  animation: fx-drift-b 42s ease-in-out infinite alternate;
}
@keyframes fx-drift-a { to { transform: translate(28vw, 22vh); } }
@keyframes fx-drift-b { to { transform: translate(-26vw, -20vh); } }

/* grid-pulse — cyber grid lines breathing */
#theme-fx.fx-grid-pulse::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .16) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 85%);
  animation: fx-grid-breathe 6s ease-in-out infinite;
}
@keyframes fx-grid-breathe {
  0%, 100% { opacity: .35; }
  50%      { opacity: .8; }
}

/* stars — two layers of box-shadow dots (built by theme.js), offset twinkle */
#theme-fx .fx-star-layer {
  position: absolute; left: 0; top: 0;
  width: 2px; height: 2px; border-radius: 50%;
  background: transparent;
}
#theme-fx .fx-star-layer.a { animation: fx-twinkle 4.5s ease-in-out infinite; }
#theme-fx .fx-star-layer.b { animation: fx-twinkle 6.5s ease-in-out infinite reverse; }
@keyframes fx-twinkle {
  0%, 100% { opacity: .9; }
  50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  #theme-fx.fx-aurora::before,
  #theme-fx.fx-gradient-drift::before,
  #theme-fx.fx-gradient-drift::after,
  #theme-fx.fx-grid-pulse::before,
  #theme-fx .fx-star-layer { animation: none !important; }
}

/* ---------- Streak counter pill + confetti ---------- */
.streak-pill {
  background: var(--panel-2);
  border: 1px solid rgba(251, 146, 60, .45);
  color: #fb923c;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(251, 146, 60, .18);
}
.streak-pill .streak-n { font-variant-numeric: tabular-nums; }
/* Light themes: burnt orange for AA-ish contrast on pale panels */
html[data-theme="newspaper"] .streak-pill,
html[data-theme="sky"] .streak-pill,
html[data-theme="cream-paper"] .streak-pill,
html[data-theme="sage-meadow"] .streak-pill,
html[data-theme="peach-sunrise"] .streak-pill,
html[data-theme="lavender-bloom"] .streak-pill,
html[data-theme="mint-fresh"] .streak-pill,
html[data-theme="butter-legal-pad"] .streak-pill,
html[data-theme="powder-blue"] .streak-pill,
html[data-theme="blush-elegance"] .streak-pill,
html[data-theme="linen"] .streak-pill,
html[data-theme="robins-egg"] .streak-pill,
html[data-theme="vanilla-bean"] .streak-pill,
html[data-theme="arctic"] .streak-pill { color: #c2410c; border-color: rgba(194, 65, 12, .5); }
#confetti-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none; z-index: 900;
}

/* ---------- Session end summary ("Great work!" stats strip) ---------- */
.completion .end-summary {
  width: 100%;
  background: linear-gradient(135deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid rgba(var(--accent-rgb), .4);
  border-radius: 12px;
  padding: 16px 18px 14px;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .10);
}
.completion .end-summary h3 {
  margin: 0 0 10px; font-size: 17px; color: var(--text);
  letter-spacing: -.01em;
}
.completion .end-summary .es-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.completion .end-summary .es-stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.completion .end-summary .es-stat .v {
  font-size: 17px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.completion .end-summary .es-stat .l {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; margin-top: 2px;
}