/* Stanzai dev styles 11/14 — v246 consolidated: scrollbars, toasts, buttons, inputs, tabbar, chat/composer (v9-*), Song Brain (sb-*), modals, Nocturne route cards — extracted VERBATIM from index.html <style> block lines 5564-6072 (CSS split PR, 2026-06-10). Files load via <link> in numeric order; cascade position matters — do not reorder rules across files. */

/* ── SCROLLBARS ─────────────────────────────────────────────────────────── */
body.light-mode .sz-scroll                                   { scrollbar-color: var(--lm-ink-10) transparent; }
body.light-mode .sz-scroll:hover                             { scrollbar-color: var(--lm-ink-20) transparent; }
body.light-mode .sz-scroll::-webkit-scrollbar-thumb          { background: var(--lm-ink-10); }
body.light-mode .sz-scroll:hover::-webkit-scrollbar-thumb    { background: var(--lm-ink-20); }
body.light-mode .sz-scroll::-webkit-scrollbar-thumb:hover    { background: var(--lm-ink-30); }
body.light-mode .sz-scroll::-webkit-scrollbar-thumb:active   { background: var(--lm-ink-40); }
body.light-mode .sz-scroll-gold                              { scrollbar-color: rgba(var(--gold-rgb),0.30) transparent; }
body.light-mode .sz-scroll-gold:hover                        { scrollbar-color: rgba(var(--gold-rgb),0.45) transparent; }
body.light-mode .sz-scroll-gold::-webkit-scrollbar-thumb     { background: rgba(var(--gold-rgb),0.30); }
body.light-mode .sz-scroll-gold:hover::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb),0.45); }

/* ── TOASTS ─────────────────────────────────────────────────────────────── */
body.light-mode .sz-toast {
  background: rgba(253,250,242,0.96);
  border-color: var(--lm-ink-10);
  box-shadow: 0 4px 12px rgba(90,60,20,0.10), 0 1px 3px rgba(90,60,20,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
}
body.light-mode .sz-toast--success { color: #7a4f10; }
body.light-mode .sz-toast--info    { color: #1e6a5e; }
body.light-mode .sz-toast--error   { color: #9a304a; }

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
body.light-mode .sf-btn {
  background: var(--s1); border-color: var(--lm-ink-10); color: var(--t1);
  box-shadow: var(--lm-shadow-sm);
}
body.light-mode .sf-btn::after { background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%); }
body.light-mode .sf-btn:hover  { background: var(--s2); border-color: var(--lm-ink-15); box-shadow: var(--lm-shadow-md); }
body.light-mode .sf-btn--primary {
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  border-color: rgba(var(--gold-rgb),0.55); color: #fffdf4;
  box-shadow: 0 2px 6px rgba(var(--gold-rgb),0.25), 0 0 0 1px rgba(var(--gold-rgb),0.30);
}
body.light-mode .sf-btn--primary:hover {
  box-shadow: 0 4px 12px rgba(var(--gold-rgb),0.30), 0 0 0 1px rgba(var(--gold-rgb),0.45);
}
body.light-mode .sf-btn--secondary           { background: var(--s2); border-color: var(--lm-ink-12); color: var(--t1); }
body.light-mode .sf-btn--secondary:hover     { background: var(--s3); }
body.light-mode .sf-btn--ghost:hover         { background: var(--lm-ink-04); }

body.light-mode .nextbtn {
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  border: 1px solid rgba(var(--gold-rgb),0.55); color: #fffdf4;
  box-shadow: 0 2px 6px rgba(var(--gold-rgb),0.25);
}
body.light-mode .nextbtn:hover  { box-shadow: 0 4px 12px rgba(var(--gold-rgb),0.35); }
body.light-mode .nextbtn:active { box-shadow: inset 0 1px 2px rgba(var(--gold-rgb),0.40); }
body.light-mode .secbtn:hover   { background: var(--s2); border-color: var(--lm-ink-15); }

/* ── INPUTS ─────────────────────────────────────────────────────────────── */
body.light-mode .sf-field {
  background: var(--s1); border-color: var(--lm-ink-10); color: var(--t1);
  box-shadow: inset 0 1px 2px var(--lm-ink-04);
}
body.light-mode .sf-field::placeholder { color: var(--lm-ink-40); }
body.light-mode .sf-field:hover        { border-color: var(--lm-ink-15); }
body.light-mode .sf-field:focus,
body.light-mode .sf-field:focus-visible {
  background: #fff; border-color: rgba(var(--gold-rgb),0.50);
  box-shadow: var(--focus-ring), var(--focus-soft);
}

/* Generic icon buttons */
body.light-mode .sva-icon-btn,
body.light-mode .dt-icon-btn {
  background: var(--s1); border-color: var(--lm-ink-10); color: var(--t2);
}
body.light-mode .sva-icon-btn:hover,
body.light-mode .dt-icon-btn:hover {
  background: var(--s2); color: var(--t1); border-color: var(--lm-ink-15);
}

/* ── HOME ENTRY ROW ─────────────────────────────────────────────────────── */
body.light-mode .home-entry {
  background: var(--s1); border-color: var(--lm-ink-10); box-shadow: var(--lm-shadow-sm);
}
body.light-mode .home-entry:hover {
  background: var(--s2); border-color: var(--lm-ink-15); box-shadow: var(--lm-shadow-md);
}
body.light-mode .home-entry:focus-visible {
  box-shadow: var(--focus-ring), var(--focus-soft), var(--lm-shadow-md);
}
body.light-mode .home-entry-arrow { background: var(--lm-ink-06); color: var(--t2); }

/* ── SETTINGS TOGGLES ───────────────────────────────────────────────────── */
body.light-mode .setitemicon { color: var(--gold); }
body.light-mode .toggle {
  background: var(--lm-ink-10); border-color: var(--lm-ink-08);
}
body.light-mode .toggle:hover { background: var(--lm-ink-15); }
body.light-mode .toggle.on {
  background: var(--gold); border-color: rgba(var(--gold-rgb),0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}
body.light-mode .tknob {
  background: #fff;
  box-shadow: 0 1px 3px rgba(90,60,20,0.20), 0 0 0 1px var(--lm-ink-06);
}

/* ── TABBAR / NAV ───────────────────────────────────────────────────────── */
body.light-mode .tabbar {
  background: var(--s1); border-top: 1px solid var(--lm-ink-08);
  box-shadow: 0 -4px 20px rgba(90,60,20,0.05);
}
body.light-mode .tabbar::before { background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent); }
body.light-mode .swi-tabbar    { background: var(--s1); border-color: var(--lm-ink-08); box-shadow: var(--lm-shadow-lg); }
body.light-mode #tab-new {
  background: radial-gradient(circle at 35% 30%, var(--gold2), var(--gold));
  box-shadow: 0 4px 14px rgba(var(--gold-rgb),0.35), 0 2px 4px rgba(var(--gold-rgb),0.20), inset 0 1px 0 rgba(255,255,255,0.35);
  border: 1px solid rgba(var(--gold-rgb),0.55); color: #fffdf4;
}

/* ── DESKTOP NAV / POPOVERS (NEW in v246) ───────────────────────────────── */
body.light-mode .dt-nav-menu {
  background: rgba(253,250,242,0.98);
  border: 1px solid var(--lm-ink-10);
  box-shadow: var(--lm-shadow-lg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.light-mode .dt-nav-menu-item:hover { background: var(--lm-ink-04); }
body.light-mode .dt-user-chip {
  background: var(--s1); border: 1px solid var(--lm-ink-08); color: var(--t1);
}
body.light-mode .dt-user-chip:hover { background: var(--s2); border-color: var(--lm-ink-15); }
body.light-mode .dt-home-btn {
  background: var(--s1); border: 1px solid var(--lm-ink-08); color: var(--t1);
}
body.light-mode .dt-home-btn:hover { background: var(--s2); border-color: var(--lm-ink-15); }

body.light-mode .dtpk-backlink {
  background: var(--s1); border: 1px solid var(--lm-ink-08); color: var(--t2);
}
body.light-mode .dtpk-navrow:hover { background: var(--lm-ink-04); }

body.light-mode .help-dropdown {
  background: rgba(253,250,242,0.98);
  border: 1px solid var(--lm-ink-10);
  box-shadow: var(--lm-shadow-lg);
}
body.light-mode .help-sc-row:hover { background: var(--lm-ink-04); }
body.light-mode .help-sc-key {
  background: var(--s2); border: 1px solid var(--lm-ink-10); color: var(--t2);
  box-shadow: 0 1px 0 var(--lm-ink-06);
}

body.light-mode .hub-jump:hover { background: var(--s2); border-color: var(--lm-ink-15); }

/* ── CHAT / COMPOSER (v9-*) ─────────────────────────────────────────────── */
body.light-mode .v9-chat-bg { background: radial-gradient(ellipse at 50% 20%, #fbf7ee 0%, var(--bg) 70%); }
body.light-mode .v9-ai {
  background: var(--s1); border: 1px solid var(--lm-ink-08); color: var(--t1);
  box-shadow: var(--lm-shadow-sm);
}
body.light-mode .v9-user {
  background: linear-gradient(180deg, #fff7e4, #f6ead0);
  border: 1px solid rgba(var(--gold-rgb),0.30); color: var(--t1);
}
body.light-mode .v9-ai-label { color: var(--gold); }
body.light-mode .v9-chip {
  background: var(--s2); border: 1px solid var(--lm-ink-10); color: var(--t1);
}
body.light-mode .v9-chip:hover { background: var(--s3); border-color: var(--lm-ink-15); }
body.light-mode .v9-chip.glow {
  background: linear-gradient(180deg, #fff3d6, #fae4b4);
  border-color: rgba(var(--gold-rgb),0.45); color: #6a4c14;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb),0.30), 0 2px 8px rgba(var(--gold-rgb),0.20);
}
body.light-mode .v9-input  { background: var(--s1); border: 1px solid var(--lm-ink-10); color: var(--t1); }
body.light-mode .v9-input:focus {
  background: #fff; border-color: rgba(var(--gold-rgb),0.45);
  box-shadow: var(--focus-ring), var(--focus-soft);
}
body.light-mode .v9-input::placeholder { color: var(--lm-ink-40); }
body.light-mode .v9-input-area {
  background: linear-gradient(to top, var(--bg) 70%, rgba(245,240,232,0) 100%);
  border-top: 1px solid var(--lm-ink-06);
}
body.light-mode .v9-send {
  background: var(--gold); color: #fffdf4;
  box-shadow: 0 2px 6px rgba(var(--gold-rgb),0.30);
}
body.light-mode .v9-send:disabled { background: var(--lm-ink-10); color: var(--t3); box-shadow: none; }
body.light-mode .v9-nav, body.light-mode .v9-dna-bar, body.light-mode .v9-ctx-bar {
  background: var(--s1); border-color: var(--lm-ink-08);
}
body.light-mode .v9-nav-btn:hover { background: var(--lm-ink-04); color: var(--t1); }
body.light-mode .v9-dna-chip {
  background: var(--s2); border: 1px solid var(--lm-ink-10); color: var(--t2);
}
body.light-mode .v9-collapsed {
  background: var(--s1); border: 1px solid var(--lm-ink-08);
  box-shadow: var(--lm-shadow-sm);
}
body.light-mode .v9-collapsed-text { color: var(--t2); }
body.light-mode .v9-phase-card, body.light-mode .v9-concept,
body.light-mode .v9-lyrics, body.light-mode .v9-sp,
body.light-mode .v9-status, body.light-mode .v9-prompt-card {
  background: var(--s1); border: 1px solid var(--lm-ink-08);
  box-shadow: var(--lm-shadow-sm); color: var(--t1);
}
body.light-mode .v9-act {
  background: var(--s2); border: 1px solid var(--lm-ink-10); color: var(--t1);
}
body.light-mode .v9-act:hover { background: var(--s3); border-color: var(--lm-ink-15); }
body.light-mode .v9-concept-lock {
  background: linear-gradient(180deg, #fff6e0, #f8e8bf);
  border-color: rgba(var(--gold-rgb),0.45); color: #6a4c14;
}

body.light-mode .v9-prog-circle {
  background: var(--s2); border: 1px solid var(--lm-ink-15); color: var(--t3);
}
body.light-mode .v9-prog-circle.active {
  background: var(--gold); color: #fff; border-color: rgba(var(--gold-rgb),0.55);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.15);
}
body.light-mode .v9-prog-circle.seeded {
  background: var(--s3); border-color: rgba(var(--gold-rgb),0.35); color: var(--gold);
}
body.light-mode .v9-prog-circle.done {
  background: var(--gold); color: #fff; border-color: rgba(var(--gold-rgb),0.45);
}
body.light-mode .v9-prog-line { background: var(--lm-ink-10); }

body.light-mode .v9-sess-row          { background: var(--s1); border-color: var(--lm-ink-08); }
body.light-mode .v9-sess-row:hover    { background: var(--s2); border-color: var(--lm-ink-15); }
body.light-mode .v9-sess-row:active   { background: var(--s3); }
body.light-mode .v9-sess-row.active {
  background: linear-gradient(180deg, #fff6e0, #fbead0);
  border-color: rgba(var(--gold-rgb),0.35);
}
body.light-mode #v9CollapsedStrip { background: var(--s1); border-color: var(--lm-ink-08); }

/* ── SONG BRAIN (sb-*) ──────────────────────────────────────────────────── */
body.light-mode .sb-section    { background: var(--s1); border: 1px solid var(--lm-ink-08); }
body.light-mode .sb-pill-dim   { background: var(--s2); border: 1px solid var(--lm-ink-08); color: var(--t2); }
body.light-mode .sb-group      { background: var(--s2); border: 1px solid var(--lm-ink-08); }
body.light-mode .sb-struct-row,
body.light-mode .sb-struct-step { background: var(--s1); border: 1px solid var(--lm-ink-06); }
body.light-mode .sb-hint       { color: var(--t3); }

/* ── SESSION MAP (smap-*) ───────────────────────────────────────────────── */
body.light-mode .smap-dot       { background: var(--s2); border: 1px solid var(--lm-ink-15); }
body.light-mode .smap-line      { background: var(--lm-ink-10); }
body.light-mode .smap-line.done { background: rgba(var(--gold-rgb),0.5); }
body.light-mode .smap-label     { color: var(--t2); }

/* ── OPTION/MOOD CARDS, CHIPS ───────────────────────────────────────────── */
body.light-mode .opticon {
  background: var(--lm-ink-06); border: 1px solid var(--lm-ink-08); color: var(--gold);
}
body.light-mode .optcard          { background: var(--s1); border: 1px solid var(--lm-ink-10); }
body.light-mode .optcard:hover    { background: var(--s2); border-color: var(--lm-ink-15); }
body.light-mode .optcard.active,
body.light-mode .optcard[aria-selected="true"] {
  background: linear-gradient(180deg, #fff6e0, #faebcb);
  border-color: rgba(var(--gold-rgb),0.45);
}
body.light-mode .moodpill         { background: var(--s1); border: 1px solid var(--lm-ink-10); color: var(--t1); }
body.light-mode .moodpill:hover   { background: var(--s2); border-color: var(--lm-ink-15); }
body.light-mode .moodpill.active {
  background: linear-gradient(180deg, #fff6e0, #faebcb);
  border-color: rgba(var(--gold-rgb),0.45); color: #6a4c14;
}
body.light-mode .moodemoji       { background: var(--lm-ink-04); border-radius: 50%; }
body.light-mode .gchip           { background: var(--s2); border: 1px solid var(--lm-ink-10); color: var(--t1); }
body.light-mode .gchip:hover     { background: var(--s3); border-color: var(--lm-ink-15); }
body.light-mode .gchip.active {
  background: linear-gradient(180deg, #fff6e0, #faebcb);
  border-color: rgba(var(--gold-rgb),0.45);
}
body.light-mode .soundchip       { background: var(--s2); border: 1px solid var(--lm-ink-08); color: var(--t2); }
body.light-mode .soundchip:hover { background: var(--s3); color: var(--t1); }

/* ── NEW (v246) CHIPS / TILES ───────────────────────────────────────────── */
body.light-mode .hack-chip:hover   { background: var(--s2); border-color: var(--lm-ink-15); }
body.light-mode .sel-pill          { background: var(--s2); border: 1px solid var(--lm-ink-10); color: var(--t1); }
body.light-mode .sel-pill:hover    { background: var(--s3); border-color: var(--lm-ink-15); }
body.light-mode .vrange-chip:hover { background: var(--s2); border-color: var(--lm-ink-15); }

body.light-mode .ptile:hover  { background: var(--s2); border-color: var(--lm-ink-15); }
body.light-mode .scard:hover  { background: var(--s2); border-color: var(--lm-ink-15); box-shadow: var(--lm-shadow-md); }
body.light-mode .tool-card:hover { background: var(--s2); border-color: var(--lm-ink-15); box-shadow: var(--lm-shadow-md); }
body.light-mode .theme-card:hover { box-shadow: var(--lm-shadow-md); border-color: var(--lm-ink-15); }

body.light-mode .rail-item:hover { background: var(--lm-ink-04); }
body.light-mode .rail-search, body.light-mode .rail-vault {
  background: var(--s1); border: 1px solid var(--lm-ink-08); color: var(--t1);
}

/* ── LIBRARY / TOPNAV / SESS STRIP ──────────────────────────────────────── */
body.light-mode .topnav, body.light-mode .lib-topnav {
  background: rgba(250,246,238,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lm-ink-06);
}
body.light-mode .lib-search {
  background: var(--s1); border: 1px solid var(--lm-ink-08); color: var(--t1);
}
body.light-mode .lib-search:focus-within {
  border-color: rgba(var(--gold-rgb),0.45);
  box-shadow: var(--focus-ring), var(--focus-soft);
}
body.light-mode .lib-filter {
  background: var(--s2); border: 1px solid var(--lm-ink-08); color: var(--t2);
}
body.light-mode .lib-filter:hover  { background: var(--s3); border-color: var(--lm-ink-15); color: var(--t1); }
body.light-mode .lib-filter.active { background: var(--gold); color: #fffdf4; border-color: rgba(var(--gold-rgb),0.55); }
body.light-mode .lib-card-chip {
  background: var(--s2); border: 1px solid var(--lm-ink-08); color: var(--t2);
}
body.light-mode .lib-hero-art::after { opacity: 0.08; mix-blend-mode: multiply; }
body.light-mode .lib-song-card {
  background: var(--s1); border: 1px solid var(--lm-ink-08); box-shadow: var(--lm-shadow-sm);
}
body.light-mode .lib-song-card:hover {
  background: var(--s2); border-color: var(--lm-ink-12); box-shadow: var(--lm-shadow-md);
}
body.light-mode .song-card { background: var(--s1); border: 1px solid var(--lm-ink-08); }
body.light-mode .hist-panel {
  background: var(--s1); border: 1px solid var(--lm-ink-10); box-shadow: var(--lm-shadow-lg);
}

/* Vault picker (vp-*) */
body.light-mode .vp-search {
  background: var(--s1); border: 1px solid var(--lm-ink-08); color: var(--t1);
}
body.light-mode .vp-item-chip { background: var(--s2); border: 1px solid var(--lm-ink-08); color: var(--t2); }
body.light-mode .vp-item-kind { background: var(--lm-ink-06); color: var(--t2); }

/* Song view / lyrics card */
body.light-mode .svt-lyrics-card {
  background: var(--s1); border: 1px solid var(--lm-ink-08); box-shadow: var(--lm-shadow-sm);
}
body.light-mode .svt-dock-secondary:active { background: var(--lm-ink-08); }

/* ── AI RESPONSE BLOCKS ─────────────────────────────────────────────────── */
body.light-mode .ai-resp-header {
  background: var(--s1); border-bottom: 1px solid var(--lm-ink-06); color: var(--t1);
}
body.light-mode .ai-resp-body { background: var(--s1); color: var(--t1); }
body.light-mode .ai-act       { background: var(--s2); border: 1px solid var(--lm-ink-10); color: var(--t1); }
body.light-mode .ai-act:hover { background: var(--s3); border-color: var(--lm-ink-15); }

/* ── SUNO BLOCK / COPY ──────────────────────────────────────────────────── */
body.light-mode .suno-block       { background: var(--s2); border: 1px solid var(--lm-ink-08); }
body.light-mode .suno-block:hover { background: var(--s3); border-color: var(--lm-ink-15); }
body.light-mode .copybtn, body.light-mode .suno-copy-btn {
  background: var(--s2); border: 1px solid var(--lm-ink-10); color: var(--t1);
}
body.light-mode .copybtn:hover, body.light-mode .suno-copy-btn:hover {
  background: var(--s3); border-color: var(--lm-ink-15);
}

/* ── PHASE HERO / CONTEXT BAR / SESSSTRIP ───────────────────────────────── */
body.light-mode .phasehero {
  background: var(--s1) !important; border: 1px solid var(--lm-ink-08);
  box-shadow: var(--lm-shadow-sm);
}
body.light-mode .pro-context-bar { background: var(--s1); border-bottom: 1px solid var(--lm-ink-08); }
body.light-mode .sessstrip {
  background: linear-gradient(135deg, rgba(var(--gold-rgb),0.08), rgba(var(--gold-rgb),0.03));
  border: 1px solid rgba(var(--gold-rgb),0.25);
}
body.light-mode .send-btn {
  background: var(--gold); color: #fffdf4;
  border: 1px solid rgba(var(--gold-rgb),0.55);
  box-shadow: 0 2px 6px rgba(var(--gold-rgb),0.25);
}
body.light-mode .send-btn:disabled { background: var(--lm-ink-10); color: var(--t3); box-shadow: none; }

/* ── PROFILE / HUB ──────────────────────────────────────────────────────── */
body.light-mode .profhdr { background: var(--s1); border-bottom: 1px solid var(--lm-ink-06); }
body.light-mode .setitem { background: var(--s1); border: 1px solid var(--lm-ink-06); }
body.light-mode .setitem:hover { background: var(--s2); }
body.light-mode .statcard { background: var(--s1); border: 1px solid var(--lm-ink-08); box-shadow: var(--lm-shadow-sm); }
body.light-mode .hub-acc-head { background: var(--s1); border: 1px solid var(--lm-ink-06); }
body.light-mode .hub-acc-body { background: var(--s1); border: 1px solid var(--lm-ink-06); border-top: 0; }

/* ── MISC CARDS ─────────────────────────────────────────────────────────── */
body.light-mode .card         { background: var(--s1); border: 1px solid var(--lm-ink-08); box-shadow: var(--lm-shadow-sm); }
body.light-mode .cardhead:hover  { background: var(--lm-ink-04); }
body.light-mode .cardhead:active { background: var(--lm-ink-06); }
body.light-mode .pbox         { background: var(--s1); border: 1px solid var(--lm-ink-10); color: var(--t1); }
body.light-mode .sf-card      { background: var(--s1); border: 1px solid var(--lm-ink-08); box-shadow: var(--lm-shadow-sm); }
body.light-mode .sess-recent  { background: var(--s2); border: 1px solid var(--lm-ink-06); }
body.light-mode .revision-chip{ background: var(--s2); border: 1px solid var(--lm-ink-10); color: var(--t1); }
body.light-mode .ctx-pill     { background: var(--s2); border: 1px solid var(--lm-ink-08); color: var(--t2); }

body.light-mode .stage-btn:hover,
body.light-mode .stage-btn.active-shelved:hover,
body.light-mode .dna-chip:hover,
body.light-mode .dna-from-card:hover {
  background: var(--s2); border-color: var(--lm-ink-15);
}

/* ── MODALS / OVERLAYS ──────────────────────────────────────────────────── */
body.light-mode .whatis-modal, body.light-mode .ob-overlay {
  background: rgba(245,240,232,0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
body.light-mode .whatis-close {
  background: var(--s1); border: 1px solid var(--lm-ink-10); color: var(--t1);
}
body.light-mode .whatis-close:hover { background: var(--s2); border-color: var(--lm-ink-15); }

body.light-mode .stchip       { background: var(--s2); border: 1px solid var(--lm-ink-08); color: var(--t2); }
body.light-mode .stchip:hover { background: var(--s3); color: var(--t1); }

/* ── NOCTURNE HOME — ROUTE CARDS & CONTINUE BAR ─────────────────────────── */
body.light-mode #s-home .nh-route {
  background: linear-gradient(180deg, #fdfaf2 0%, var(--s2) 100%);
  border-color: rgba(var(--accent-rgb),0.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 2px 8px rgba(90,60,20,0.06),
    0 12px 28px -18px rgba(90,60,20,0.18);
}
body.light-mode #s-home .nh-route::after  { opacity: 0.06; mix-blend-mode: multiply; }
body.light-mode #s-home .nh-route::before {
  background: radial-gradient(ellipse 60% 40% at 80% 100%, rgba(var(--accent-rgb),0.14), transparent 70%);
  opacity: 0.7;
}
body.light-mode #s-home .nh-route:hover {
  border-color: rgba(var(--accent-rgb),0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 20px 40px -18px rgba(90,60,20,0.20),
    0 0 40px -10px rgba(var(--accent-rgb),0.35);
}
body.light-mode #s-home .nh-route:focus-visible {
  box-shadow: var(--focus-ring), var(--focus-soft), var(--focus-halo),
              0 20px 40px -24px rgba(90,60,20,0.18);
}
body.light-mode #s-home .nh-route-title { color: rgba(var(--accent-rgb),1); }
body.light-mode #s-home .nh-route-sub   { color: var(--t2); }
body.light-mode #s-home .nh-route-label { color: rgba(var(--accent-rgb),0.85); }
body.light-mode #s-home .nh-route-cta {
  background: rgba(var(--accent-rgb),0.10);
  border: 1px solid rgba(var(--accent-rgb),0.35);
  color: rgba(var(--accent-rgb),1);
}
body.light-mode #s-home .nh-route:hover .nh-route-cta {
  background: var(--accent); color: #fffdf4; border-color: var(--accent);
  box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb),0.45);
}
body.light-mode #s-home .nh-continue-bar {
  background: rgba(253,250,242,0.70);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--lm-ink-08);
  box-shadow: var(--lm-shadow-sm);
}
body.light-mode #s-home .nh-cb-item:hover { background: rgba(var(--gold-rgb),0.09); }
body.light-mode #s-home .nh-cb-title      { color: var(--t2); }
body.light-mode #s-home .nh-cb-item:hover .nh-cb-title { color: var(--t1); }
body.light-mode #s-home .nh-cb-meta       { color: var(--t3); }
body.light-mode #s-home .nh-cb-sep        { background: var(--lm-ink-12); }
body.light-mode #s-home .nh-cb-dot        { background: var(--lm-ink-20); }
body.light-mode #s-home .nh-cb-all        { color: var(--t3); }
body.light-mode #s-home .nh-cb-all:hover  { color: var(--gold); background: rgba(var(--gold-rgb),0.09); }
body.light-mode #s-home .nh-embers span {
  background: rgba(var(--gold-rgb),0.55);
  box-shadow: 0 0 5px rgba(var(--gold-rgb),0.35);
  mix-blend-mode: multiply;
}
body.light-mode #s-home .nh-aurora::before { opacity: 0.30; }
body.light-mode #s-home .nh-sd-pill { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
body.light-mode #s-home .nh-sd-lbl { color: rgba(0,0,0,0.45); }

/* ── FREEFLOW ROUTE CARD — accent fix for light mode ────────────────────────
   In dark mode freeflow's accent is cream (--t1 = #E0DCD0) on warm dark.
   In light mode that cream equals the page bg → accent, title, CTA vanish.
   Swap to a warm espresso ink so it reads clearly without stealing gold/teal. */
body.light-mode #s-home .nh-route--freeflow {
  --accent: #2a1f18;
  --accent-rgb: 42, 31, 24;
}
body.light-mode #s-home .nh-route--freeflow .nh-route-title {
  color: rgba(var(--accent-rgb), 0.95);
}
body.light-mode #s-home .nh-route--freeflow .nh-route-sub {
  color: var(--t2);
}
body.light-mode #s-home .nh-route--freeflow .nh-route-label {
  color: rgba(var(--accent-rgb), 0.70);
}
body.light-mode #s-home .nh-route--freeflow .nh-route-cta {
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: rgba(var(--accent-rgb), 0.95);
}
body.light-mode #s-home .nh-route--freeflow:hover .nh-route-cta {
  background: rgba(var(--accent-rgb), 0.95);
  color: #fdfaf2;
  border-color: rgba(var(--accent-rgb), 0.95);
  box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), 0.40);
}
body.light-mode #s-home .nh-route--freeflow .nh-route-accent {
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.25);
}

/* ── DESKTOP NAV MENU — subtitle contrast ───────────────────────────────── */
body.light-mode .dt-nav-menu-title { color: var(--t1); }
body.light-mode .dt-nav-menu-sub   { color: var(--t2); }
body.light-mode .dt-nav-menu-item {
  color: var(--t1);
}