/* ============================================================
   WIZARD ADS — THEME LAYER  ·  palette switching
   Loaded LAST so it wins. Two palettes:
     · Obsidian  (data-theme="obsidian" or unset) — original dark
       cinematic glass. Untouched baseline lives in styles.css :root.
     · Arctic    (data-theme="arctic", DEFAULT) — fresh, frosty,
       Apple-grade liquid glass. Soft gray-blue light surfaces,
       white frosted panes, juicy glassy cyan as the one accent.
   ============================================================ */

/* New tokens introduced by the theme refactor (field wells were
   tokenized across all module CSS). Obsidian baseline values: */
:root{
  --well:   rgba(0,0,0,.28);
  --well-2: rgba(0,0,0,.36);

  /* Blueprint node-graph palette — obsidian baseline.
     "Macaron" system: hue = MEANING, so every category reads apart at a glance.
     Soft pastels at a shared lightness/chroma so the wheel stays cohesive, not rainbow.
       input→blue · gen→violet · ai→pink · overlay→gold · media→peach
       audio→green · fx→mint · logic→slate · output→terracotta
     (colors live in JS as var() refs so the graph re-tints per theme.) */
  --bpc-input:#6fa3ee;   /* periwinkle blue  — incoming source        */
  --bpc-gen:#b295f0;     /* lavender violet  — AI generates new footage */
  --bpc-ai:#ee8fd0;      /* rose pink        — AI transforms existing  */
  --bpc-overlay:#ebc766; /* butter gold      — graphics drawn on top   */
  --bpc-media:#f0a85f;   /* peach orange     — ready-made asset clips  */
  --bpc-audio:#82d58a;   /* pistachio green  — sound                   */
  --bpc-fx:#5fd6c6;      /* mint teal        — color / visual fx       */
  --bpc-logic:#98a1bc;   /* slate lavender   — neutral flow / routing  */
  --bpc-output:#ec7e72;  /* terracotta red   — publish / terminal      */
  /* port (wire) colors — echo the data meaning: video blue · audio green ·
     data amber · mask violet · any slate. Distinct hues = readable splines. */
  --bpp-video:#6fa3ee; --bpp-audio:#82d58a; --bpp-data:#ebc07a; --bpp-mask:#b295f0; --bpp-any:#98a1bc;
}

/* ============================================================
   ARCTIC BLUE  —  token palette
   ============================================================ */
html[data-theme="arctic"]{
  /* surfaces — fresh arctic daylight: near-white, faint icy tint, no gray */
  --bg:        #e9f2f6;
  --bg-grad-a: #f4fafb;
  --bg-grad-b: #deeaef;

  /* glass tints — bright white frost over the icy gradient */
  --glass:       rgba(255,255,255,.60);
  --glass-2:     rgba(255,255,255,.48);
  --glass-3:     rgba(255,255,255,.72);
  --glass-head:  rgba(255,255,255,.64);
  --glass-rail:  rgba(252,254,255,.66);
  --blur:        blur(24px) saturate(172%) brightness(1.07);
  --blur-lg:     blur(40px) saturate(184%) brightness(1.08);

  /* legacy solid fallbacks */
  --panel:   rgba(255,255,255,.60);
  --panel-2: rgba(255,255,255,.48);
  --elev:    rgba(255,255,255,.96);
  --hover:   rgba(16,72,98,.055);
  --hover-2: rgba(16,72,98,.095);

  /* field wells — frosted instead of smoked */
  --well:    rgba(255,255,255,.52);
  --well-2:  rgba(255,255,255,.74);

  /* lines — cool ink hairlines on light */
  --line:        rgba(18,70,95,.16);
  --line-soft:   rgba(18,70,95,.10);
  --line-strong: rgba(18,70,95,.30);

  /* ink — deep arctic slate, never pure black */
  --ink:    #0f2c36;
  --ink-2:  #36545f;
  --ink-3:  #5e7c87;
  --ink-4:  #80969f;

  /* accent — the juicy glassy cyan (the one accent everywhere) */
  --acc:      #11b6cf;
  --acc-2:    #0f9cb4;    /* deepened so cyan TEXT/icons read on light */
  --acc-ink:  #0e93a8;   /* readable cyan for text on light fills (landing parity) */
  --acc-soft: rgba(17,182,207,.17);
  --acc-line: rgba(17,182,207,.48);
  --acc-glow: rgba(17,182,207,.48);
  --on-acc:   #04222b;

  /* "AI" gradient — retuned to an icy aqua (still legible w/ white) */
  --ai-a: #1f93d4;
  --ai-b: #12b6cf;
  --ai-c: #2ec7c2;
  --ai-grad: linear-gradient(125deg,#1f93d4 0%,#13b6cf 52%,#2ec7c2 100%);
  --ai-glow: rgba(20,190,210,.5);

  /* status — deepened a touch for light-bg contrast */
  --good: #11a888;
  --warn: #d98a25;
  --bad:  #e2536c;

  /* depth — soft, cool, weightless shadows (lifted hue, lower alpha = airy) */
  --shadow-pop:   0 22px 60px -20px rgba(28,116,142,.20), 0 4px 14px rgba(28,116,142,.07);
  --shadow-soft:  0 12px 32px -16px rgba(28,116,142,.15);
  --shadow-float: 0 40px 88px -32px rgba(28,116,142,.24), 0 14px 32px -14px rgba(28,116,142,.12);

  /* misc theme-local helpers */
  --scrim:    rgba(78,124,150,.24);
  --pop-bg:   rgba(255,255,255,.90);
  --media-a:  #b6dfec;
  --media-b:  #e3f3f9;
}

/* ============================================================
   ARCTIC  —  ambient backdrops (literal indigo glows → icy cyan)
   ============================================================ */
html[data-theme="arctic"] .app{
  background:
    radial-gradient(1500px 980px at 12% -22%,  rgba(17,182,207,.085), transparent 62%),
    radial-gradient(1300px 900px at 106% 0%,   rgba(108,176,222,.055), transparent 60%),
    radial-gradient(1500px 1020px at 112% 120%, rgba(120,224,205,.075), transparent 62%),
    radial-gradient(1000px 720px at -12% 116%,  rgba(86,190,230,.045), transparent 60%),
    linear-gradient(160deg,var(--bg-grad-a),var(--bg-grad-b));
}
html[data-theme="arctic"] .app::after{ opacity:.016; }

html[data-theme="arctic"] *::-webkit-scrollbar-thumb{ background:rgba(18,70,95,.20); background-clip:content-box; }
html[data-theme="arctic"] *::-webkit-scrollbar-thumb:hover{ background:rgba(18,70,95,.34); background-clip:content-box; }

/* liquid-glass polish — luminous top highlight on the big frosted panes */
html[data-theme="arctic"] .pane,
html[data-theme="arctic"] .stage-wrap,
html[data-theme="arctic"] .timeline{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

/* ============================================================
   ARCTIC  —  active states
   (original code paints white text on a faint accent wash, which
    vanishes on light — repaint with readable cyan-ink / cyan fills)
   ============================================================ */
html[data-theme="arctic"] .nav-item.on{
  color:var(--acc-ink);
  background:linear-gradient(180deg,rgba(17,182,207,.20),rgba(17,182,207,.07));
}
html[data-theme="arctic"] .nav-item.on svg{ filter:drop-shadow(0 0 7px var(--acc-glow)); }
html[data-theme="arctic"] .vr-ic.on{
  color:var(--acc-ink);
  background:linear-gradient(180deg,rgba(17,182,207,.20),rgba(17,182,207,.07));
}
html[data-theme="arctic"] .tool.on,
html[data-theme="arctic"] .tool-ai,
html[data-theme="arctic"] .folder-chip.on,
html[data-theme="arctic"] .pp-ctl.on,
html[data-theme="arctic"] .compact-trigger:hover,
html[data-theme="arctic"] .bp-cbtn.acc,
html[data-theme="arctic"] .bp-seg button.on,
html[data-theme="arctic"] .bp-plat.on,
html[data-theme="arctic"] .bp-sim,
html[data-theme="arctic"] .ws-drop:hover,
html[data-theme="arctic"] .ws-drop.over,
html[data-theme="arctic"] .nh-mark:hover{ color:var(--acc-ink); }

html[data-theme="arctic"] .tool-ai,
html[data-theme="arctic"] .bp-sim{ background:var(--acc-soft); }

/* segment pills sit bright-white on the frosted track */
html[data-theme="arctic"] .seg button.on,
html[data-theme="arctic"] .auth-tab.on,
html[data-theme="arctic"] .ws-seg button.on{
  box-shadow:0 2px 8px -3px rgba(28,116,142,.3), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ============================================================
   ARCTIC  —  popovers & menus (dark glass → white frost)
   ============================================================ */
html[data-theme="arctic"] .popover,
html[data-theme="arctic"] .acct-pop{
  background:var(--pop-bg);
  border-color:var(--line-strong);
}
html[data-theme="arctic"] .notif-row.unread{ background:rgba(17,182,207,.08); }

/* scrims — soft frosted dim instead of near-black */
html[data-theme="arctic"] .set-scrim,
html[data-theme="arctic"] .ov-scrim,
html[data-theme="arctic"] .mtx-modal-ov{
  background:var(--scrim);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}

/* ============================================================
   ARCTIC  —  media placeholders (dark stripes → frosty)
   ============================================================ */
html[data-theme="arctic"] .thumb{
  background:repeating-linear-gradient(135deg,var(--media-a) 0 9px,var(--media-b) 9px 18px);
}
html[data-theme="arctic"] .frow .ft{
  background:repeating-linear-gradient(135deg,var(--media-a) 0 7px,var(--media-b) 7px 14px);
}
html[data-theme="arctic"] .thumb::after{
  background:linear-gradient(180deg,rgba(255,255,255,.4),transparent 32%,rgba(13,99,123,.14));
}
html[data-theme="arctic"] .frame{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.7), transparent 60%),
    repeating-linear-gradient(135deg,var(--media-a) 0 13px,var(--media-b) 13px 26px);
  box-shadow:
    0 50px 110px -32px rgba(28,116,142,.4),
    0 24px 60px -26px rgba(28,116,142,.28),
    0 0 70px -10px rgba(17,182,207,.32),
    0 0 0 1px var(--line-strong),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 1px 0 rgba(255,255,255,.7);
}
/* Studio frame edge overlay: the obsidian base paints a black bottom band
   (rgba(0,0,0,.35)) that survived on frost as a dirty grey smudge — repaint
   to a luminous icy top-light + a faint cyan floor so the preview reads as
   fresh arctic glass top-to-bottom. */
html[data-theme="arctic"] .frame::before{
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 24%,transparent 74%,rgba(17,120,148,.12));
}
html[data-theme="arctic"] .frame-ph .ic{ background:rgba(255,255,255,.55); }
html[data-theme="arctic"] .safe-zone{ border-color:rgba(18,70,95,.16); }
html[data-theme="arctic"] .ui-caption .bar{ background:rgba(18,70,95,.18); }

/* ============================================================
   ARCTIC  —  Studio stage + timeline clips
   ============================================================ */
html[data-theme="arctic"] .stage{
  background:
    radial-gradient(58% 56% at 50% 42%, rgba(17,182,207,.12), transparent 70%),
    radial-gradient(40% 40% at 50% 100%, rgba(120,224,205,.1), transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(18,70,95,.035) 27px 28px),
    repeating-linear-gradient(90deg,transparent 0 27px,rgba(18,70,95,.035) 27px 28px);
}
html[data-theme="arctic"] .stage::after{ box-shadow:none; }

html[data-theme="arctic"] .clip.video{
  background:linear-gradient(180deg,#3f97b4,#2c7593);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12);
}
html[data-theme="arctic"] .clip-thumbs i{
  background:repeating-linear-gradient(135deg,#4f9fb8 0 6px,#458fa8 6px 12px);
  border-right-color:rgba(255,255,255,.18);
}
html[data-theme="arctic"] .clip.overlay{
  background:linear-gradient(180deg,rgba(17,182,207,.22),rgba(17,182,207,.09));
  border-color:var(--acc-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(17,182,207,.14);
}
html[data-theme="arctic"] .clip.overlay .ov-t{ color:var(--acc-ink); }
html[data-theme="arctic"] .scr-format .ar{
  background:repeating-linear-gradient(135deg,#bcd6df 0 5px,#cfe2e8 5px 10px);
}

/* ============================================================
   ARCTIC  —  prominent cards: retune indigo→aqua washes
   ============================================================ */
html[data-theme="arctic"] .virality{
  background:linear-gradient(135deg,rgba(17,182,207,.18),rgba(120,224,205,.10));
  border-color:var(--acc-line);
}
html[data-theme="arctic"] .virality::after{
  background:radial-gradient(circle,rgba(46,199,194,.30),transparent 70%);
}
html[data-theme="arctic"] .acct-plan,
html[data-theme="arctic"] .bp-preset{
  background:linear-gradient(135deg,rgba(17,182,207,.16),rgba(120,224,205,.07));
}
html[data-theme="arctic"] .bp-note{ background:rgba(17,182,207,.08); }

/* ============================================================
   ARCTIC  —  module canvases & phone mocks
   ============================================================ */
html[data-theme="arctic"] .bp-canvas{
  background:
    radial-gradient(60% 55% at 50% 36%, rgba(17,182,207,.12), transparent 70%),
    radial-gradient(46% 44% at 84% 110%, rgba(120,224,205,.10), transparent 70%),
    radial-gradient(40% 40% at 6% -8%, rgba(60,180,230,.08), transparent 70%),
    linear-gradient(160deg,#f0f8fa,#dfeaf0);
}
html[data-theme="arctic"] .bp-grid{
  background-image:
    radial-gradient(circle, rgba(18,70,95,.10) 1.1px, transparent 1.2px),
    radial-gradient(circle, rgba(17,182,207,.10) 1.1px, transparent 1.2px);
}
html[data-theme="arctic"] .script{
  background:
    radial-gradient(900px 540px at 22% -12%, rgba(17,182,207,.14), transparent 60%),
    radial-gradient(780px 560px at 104% 116%, rgba(120,224,205,.10), transparent 58%);
}
html[data-theme="arctic"] .bp-screen{
  background:
    radial-gradient(70% 50% at 50% 32%, rgba(17,182,207,.22), transparent 70%),
    repeating-linear-gradient(135deg,var(--media-a) 0 10px,var(--media-b) 10px 20px);
}
/* preview sheen: black bottom band → clean icy top-light + faint cyan floor */
html[data-theme="arctic"] .bp-screen .sheen{
  background:linear-gradient(180deg, rgba(255,255,255,.45), transparent 30%, rgba(13,99,123,.16));
}
/* Teleprompter device — kept dark (a real prompter screen is dark to read)
   but retuned from the muddy obsidian slab to an intentional arctic-night:
   a clean teal-navy body with a soft cyan ambient + frosty bezel rim, so it
   reads as a deliberate device sitting in the light app, not a holdover. */
html[data-theme="arctic"] .scr-phone{
  background:
    radial-gradient(120% 70% at 50% 8%, rgba(17,182,207,.18), transparent 56%),
    radial-gradient(90% 60% at 50% 108%, rgba(31,199,154,.12), transparent 60%),
    linear-gradient(180deg,#0d2a36,#071a23 60%,#04121a);
  border-color:rgba(120,200,220,.22);
  box-shadow:0 50px 110px -30px rgba(28,116,142,.5), 0 0 64px -12px var(--acc-glow),
    inset 0 0 0 1px rgba(150,210,230,.10), inset 0 1px 0 rgba(180,230,245,.16);
}
/* silhouette subject — drop the purple cast for a cool teal-slate */
html[data-theme="arctic"] .scr-sil::before{
  background:radial-gradient(50% 60% at 50% 0%, #1a3744, #08171f 72%); }
html[data-theme="arctic"] .scr-sil::after{
  background:radial-gradient(circle at 50% 40%, #21424f, #0c1d26 70%); }
/* teleprompter audio cue tags → cool family (was indigo VO / warm MUS) */
html[data-theme="arctic"] .scr-atag[data-k="VO"] b{ background:linear-gradient(135deg,#2f74c8,#11b6cf); }
html[data-theme="arctic"] .scr-atag[data-k="SFX"] b{ background:linear-gradient(135deg,#3aa8ff,#16bba2); }
html[data-theme="arctic"] .scr-atag[data-k="MUS"] b{ background:linear-gradient(135deg,#11b6cf,#1fc79a); }
/* beat-sheet audio/speech cell + chat quote: white text → readable ink */
html[data-theme="arctic"] .scr-cell.aud .ctxt{ color:var(--ink); }
html[data-theme="arctic"] .scr-beat.on .scr-cell.aud .ctxt{ text-shadow:0 0 22px rgba(17,182,207,.22); }
html[data-theme="arctic"] .scr-quote{
  color:var(--ink);
  background:linear-gradient(135deg,rgba(17,182,207,.14),rgba(120,224,205,.07));
}

/* ============================================================
   ARCTIC  —  auth gate
   ============================================================ */
html[data-theme="arctic"] .auth{
  background:
    radial-gradient(1100px 720px at 14% -10%, rgba(17,182,207,.20), transparent 56%),
    radial-gradient(1000px 700px at 108% 110%, rgba(120,224,205,.16), transparent 56%),
    linear-gradient(155deg,var(--bg-grad-a),var(--bg-grad-b));
}
html[data-theme="arctic"] .sso-btn .g{ background:#1f2733; color:#fff; }

/* ============================================================
   ARCTIC  —  LEFTOVER SWEEP  (module-level dark holdovers)
   ============================================================ */

/* Blueprint graph node bodies: dark glass → white frost */
html[data-theme="arctic"] .bp-gnode{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.72));
  box-shadow:0 18px 40px -22px rgba(28,116,142,.40), inset 0 1px 0 rgba(255,255,255,.8);
}

/* Vault — active collection row (white-on-light → readable cyan) */
html[data-theme="arctic"] .col-row.on{
  color:var(--acc-ink);
  background:linear-gradient(100deg,var(--acc-soft),rgba(17,182,207,.06));
}
html[data-theme="arctic"] .col-row.on .col-ic,
html[data-theme="arctic"] .col-row:hover .col-ic{ color:var(--acc-ink); }
html[data-theme="arctic"] .col-row.on .badge{ background:rgba(17,182,207,.18); color:var(--acc-ink); }

/* Matrix / Script / Modules — remaining white-on-light active states */
html[data-theme="arctic"] .pf.on{ color:var(--ink); }
html[data-theme="arctic"] .scr-beat.on .scr-kind{ color:var(--acc-ink); }
html[data-theme="arctic"] .mc-tag.hover{ color:var(--acc-ink); }
html[data-theme="arctic"] .mc-tag.anim{ background:rgba(17,182,207,.10); border-color:var(--acc-line); color:var(--acc-ink); }

/* Script — chat avatar + user bubble + screen grade (indigo → arctic) */
html[data-theme="arctic"] .scr-av.me{ background:linear-gradient(135deg,#dceaf0,#c5d8e2); color:var(--ink); }
html[data-theme="arctic"] .scr-msg.user .scr-bubble{
  background:linear-gradient(135deg,rgba(17,182,207,.22),rgba(17,182,207,.09));
  border-color:var(--acc-line);
}
html[data-theme="arctic"] .scr-grade{
  background:linear-gradient(180deg,rgba(17,182,207,.05),transparent 30%,transparent 58%,rgba(13,99,123,.5));
}

/* Faint white-fill badges / kbd hints / empty-state rings → cool tint
   (rgba(255,255,255,.0x) vanishes on white) */
html[data-theme="arctic"] .bp-acc-head .ct,
html[data-theme="arctic"] .bp-hint kbd,
html[data-theme="arctic"] .scr-kind,
html[data-theme="arctic"] .mtx-rhint kbd,
html[data-theme="arctic"] .pf .n,
html[data-theme="arctic"] .mc-tag,
html[data-theme="arctic"] .mod-scount,
html[data-theme="arctic"] .col-row .badge,
html[data-theme="arctic"] .vw-search .kbd,
html[data-theme="arctic"] .vw-sub .title .cnt,
html[data-theme="arctic"] .t-status,
html[data-theme="arctic"] .mgr-chip,
html[data-theme="arctic"] .brand-row .ws-plan{ background:rgba(18,70,95,.06); }

html[data-theme="arctic"] .bp-insp-empty .ring,
html[data-theme="arctic"] .cfg-empty .ring,
html[data-theme="arctic"] .vw-empty .ring,
html[data-theme="arctic"] .frame-ph .ic,
html[data-theme="arctic"] .mod-node-line{ background:rgba(18,70,95,.06); }

/* ============================================================
   ARCTIC  —  Modules styleguide chrome + media-placeholder thumbs
   (literal color-token swatches are left as obsidian reference docs)
   ============================================================ */
html[data-theme="arctic"] .mod-hero{ background:linear-gradient(135deg,rgba(17,182,207,.16),rgba(120,224,205,.07)); }
html[data-theme="arctic"] .mod-hero::after{ background:radial-gradient(circle,rgba(46,199,194,.26),transparent 70%); }
html[data-theme="arctic"] .mod-hero h2{
  background:linear-gradient(118deg,#0d7e93,#13b6cf 52%,#2ec7c2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(17,182,207,.22);
}
html[data-theme="arctic"] .mod-hstat{ background:rgba(255,255,255,.55); }

/* video-thumbnail placeholders: dark stripes → frosty, keep per-clip hue */
html[data-theme="arctic"] .mtx-clip .cthumb{
  background:radial-gradient(120% 80% at 30% 16%, hsl(var(--ch) 72% 60% / .38), transparent 58%),
    repeating-linear-gradient(135deg,var(--media-a) 0 8px,var(--media-b) 8px 16px);
}
html[data-theme="arctic"] .cfg-prev{
  background:radial-gradient(130% 80% at 30% 16%, hsl(var(--ch) 72% 60% / .38), transparent 56%),
    repeating-linear-gradient(135deg,var(--media-a) 0 9px,var(--media-b) 9px 18px);
}
html[data-theme="arctic"] .mod-frame916{
  background:radial-gradient(135% 90% at 28% 16%, hsl(var(--ch) 72% 60% / .38), transparent 56%),
    radial-gradient(120% 70% at 82% 96%, hsl(calc(var(--ch) + 40) 70% 54% / .26), transparent 60%),
    repeating-linear-gradient(135deg,var(--media-a) 0 10px,var(--media-b) 10px 20px);
}
html[data-theme="arctic"] .mtx-clip .cthumb::after,
html[data-theme="arctic"] .cfg-prev .pv-grad,
html[data-theme="arctic"] .mod-frame916::after{
  background:linear-gradient(180deg,rgba(13,99,123,.10),transparent 36%,rgba(13,99,123,.22));
}
html[data-theme="arctic"] .mod-frame916 .scan{ background:linear-gradient(180deg,rgba(17,182,207,.22),transparent); }

/* Vault video thumbnails (grid + list + inspector): frosty + per-clip hue */
html[data-theme="arctic"] .vw-thumb{
  background:
    radial-gradient(135% 90% at 28% 16%, hsl(var(--ch) 72% 62% / .34), transparent 56%),
    radial-gradient(120% 70% at 82% 96%, hsl(calc(var(--ch) + 40) 70% 56% / .24), transparent 60%),
    repeating-linear-gradient(135deg,var(--media-a) 0 10px,var(--media-b) 10px 20px);
}
html[data-theme="arctic"] .vw-thumb::after{
  background:linear-gradient(180deg,rgba(13,99,123,.16) 0%,transparent 26%,transparent 52%,rgba(13,99,123,.30) 100%);
}
html[data-theme="arctic"] .vw-thumb .scan{ background:linear-gradient(180deg,rgba(17,182,207,.20),transparent); }
html[data-theme="arctic"] .vw-trow .tthumb{
  background:radial-gradient(120% 80% at 30% 20%, hsl(var(--ch) 70% 60% / .34), transparent 60%),
    repeating-linear-gradient(135deg,var(--media-a) 0 7px,var(--media-b) 7px 14px);
}
html[data-theme="arctic"] .insp-preview{
  background:
    radial-gradient(130% 80% at 30% 16%, hsl(var(--ch) 72% 62% / .34), transparent 56%),
    radial-gradient(110% 60% at 80% 96%, hsl(calc(var(--ch) + 40) 70% 56% / .24), transparent 60%),
    repeating-linear-gradient(135deg,var(--media-a) 0 11px,var(--media-b) 11px 22px);
}
html[data-theme="arctic"] .insp-preview .pv-grad{
  background:linear-gradient(180deg,rgba(13,99,123,.14),transparent 30%,transparent 60%,rgba(13,99,123,.28));
}

/* ============================================================
   ARCTIC  —  MODULES gallery: chrome, stages & demo holdovers
   The Design-Bible was authored on obsidian; this ports the
   remaining dark/indigo chrome to the frosty arctic system.
   ============================================================ */

/* ambient backdrop behind the index rail (indigo radials → icy) */
html[data-theme="arctic"] .mod{
  background:
    radial-gradient(1000px 600px at 14% -12%, rgba(17,182,207,.13), transparent 58%),
    radial-gradient(860px 620px at 106% 8%, rgba(90,170,220,.09), transparent 56%),
    radial-gradient(1000px 700px at 104% 118%, rgba(120,224,205,.12), transparent 56%),
    linear-gradient(160deg,var(--bg-grad-a),var(--bg-grad-b));
}

/* index rail title (white→indigo clip text vanished on light) */
html[data-theme="arctic"] .mod-index-head h1{
  background:linear-gradient(118deg,#0d7e93,#13b6cf 54%,#2ec7c2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px rgba(17,182,207,.22);
}
/* active TOC row (was white text + indigo wash) */
html[data-theme="arctic"] .mod-toc-row.on{
  color:var(--acc-ink);
  background:linear-gradient(100deg,var(--acc-soft),rgba(17,182,207,.05));
}

/* section headers — white h3 + indigo number outline */
html[data-theme="arctic"] .mod-stt h3{ color:var(--ink); }
html[data-theme="arctic"] .mod-snum{
  -webkit-text-stroke:1.4px rgba(17,182,207,.5);
  text-shadow:0 0 30px rgba(17,182,207,.16);
}

/* live stages — frosty recessed well by default; deep-arctic
   "display case" for .dark cells so neon/glass still read true */
html[data-theme="arctic"] .mod-stage{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(17,182,207,.09), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(230,242,247,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 10px 26px -20px rgba(28,116,142,.22);
}
html[data-theme="arctic"] .mod-stage::before{
  background-image:radial-gradient(circle, rgba(18,70,95,.07) 1px, transparent 1.2px);
}
html[data-theme="arctic"] .mod-stage.dark{
  background:
    radial-gradient(120% 95% at 50% 0%, rgba(17,182,207,.16), transparent 60%),
    linear-gradient(180deg,#d3e6ed,#c2dae3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 14px 32px -22px rgba(28,116,142,.34);
}
html[data-theme="arctic"] .mod-stage.dark::before{
  background-image:radial-gradient(circle, rgba(18,70,95,.09) 1px, transparent 1.2px);
}

/* swatch chips — firm cool edge so white-glass tokens stay visible */
html[data-theme="arctic"] .mod-sw{ border-color:var(--line); }
html[data-theme="arctic"] .mod-sw .chip{ box-shadow:inset 0 0 0 1px rgba(18,70,95,.12); }

/* in-cell chips & wells (smoked-black → frosted) */
html[data-theme="arctic"] .mc-code{ background:rgba(18,70,95,.06); color:var(--ink-2); border-color:var(--line-soft); }
html[data-theme="arctic"] .mod-ease-track{ background:rgba(16,72,98,.07); border-color:var(--line-soft); }

/* foundation demo tiles retuned indigo→cyan */
html[data-theme="arctic"] .mod-radius .box{
  background:linear-gradient(135deg,rgba(17,182,207,.32),rgba(120,224,205,.18));
  border-color:var(--acc-line);
}
html[data-theme="arctic"] .mod-type-display{
  background:linear-gradient(118deg,#0d7e93,#13b6cf 60%,#2ec7c2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* status badge demo → frosted floating pill (was near-black glass) */
html[data-theme="arctic"] .mod-statusbadge{
  background:var(--pop-bg); color:var(--ink); border-color:var(--line-strong);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.7);
}

/* node demo → white frost, matching the real .bp-gnode */
html[data-theme="arctic"] .mod-node{
  --nc:#11b6cf;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.8));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--nc) 30%,transparent),
    0 18px 40px -22px rgba(28,116,142,.42), inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-theme="arctic"] .mod-node-head{ border-bottom-color:var(--line-soft); }
html[data-theme="arctic"] .mod-node-ic{
  background:color-mix(in srgb,var(--nc) 86%,#fff); color:#fff;
  border-color:color-mix(in srgb,var(--nc) 60%,transparent);
}
html[data-theme="arctic"] .mod-node-tt .nn{ color:var(--ink); }
html[data-theme="arctic"] .mod-node-port{ background:#fff; }

/* watermark transform box (indigo wash → cyan) */
html[data-theme="arctic"] .wm-box{ background:var(--acc-soft); }

/* showcased real components whose dark wells survived on the frosty
   stages (scoped to the gallery so the live tabs stay untouched) */
html[data-theme="arctic"] .mod .vw-search{ background:var(--well); }
html[data-theme="arctic"] .mod .sm-bar,
html[data-theme="arctic"] .mod .le-band .btr,
html[data-theme="arctic"] .mod .vw-storage .bar{ background:rgba(16,72,98,.08); }

/* remaining white-on-light ACTIVE states (white text on light-cyan
   fills survived from obsidian) — repaint to the readable cyan-ink */
html[data-theme="arctic"] .vw-mi.on,
html[data-theme="arctic"] .vw-mi.on .ti,
html[data-theme="arctic"] .set-tab.on,
html[data-theme="arctic"] .mtx-seg button.on,
html[data-theme="arctic"] .sm-again:hover,
html[data-theme="arctic"] .vw-fclear:hover,
html[data-theme="arctic"] .toast-action{ color:var(--acc-ink); }
/* watermark logo: white over a light box → readable cyan-ink */
html[data-theme="arctic"] .wm-logo{ color:var(--acc-ink); text-shadow:none; }

/* ============================================================
   ARCTIC  —  MODULES · Cards (04.01–04.03) + Nodes (07) recalibration
   The Design-Bible's node & card showcases were authored on obsidian's
   multi-hue accent system (indigo · purple · green). On the frosty
   arctic palette those clash with the single glacial-cyan accent and
   the icy reference mood. Here the demo palette is remapped to ONE cool
   cyan→aqua family, and the surviving dark-glass holdovers (icon chips,
   port wells, 9:16 thumbs, white card text) are ported to frost.
   ============================================================ */

/* demo accent palette → one icy-cyan family (sky-blue · glacial cyan · aqua) */
html[data-theme="arctic"] .mod{
  --demo-c1:#2f9fd4;   /* glacier sky-blue */
  --demo-c2:#11b6cf;   /* glacial cyan — the signature accent */
  --demo-c3:#1cb3ac;   /* aqua-teal */
}

/* node / port / menu / inspector icon chips: dark-base mix → bright
   cyan-tinted chip with a white glyph (mirrors the real .mod-node-ic) */
html[data-theme="arctic"] .mod .bp-block-ic,
html[data-theme="arctic"] .mod .bp-menu-item .mi-ic,
html[data-theme="arctic"] .mod .bp-nodehdr .ic,
html[data-theme="arctic"] .mod .mtx-branch-ic{
  background:color-mix(in srgb,var(--nc) 82%,#fff);
  border-color:color-mix(in srgb,var(--nc) 55%,transparent);
  box-shadow:0 6px 14px -6px var(--nc), inset 0 1px 0 rgba(255,255,255,.5);
}

/* port dots: near-black wells → white frost ringed in the accent hue */
html[data-theme="arctic"] .mod .bp-pdot,
html[data-theme="arctic"] .mod .mtx-node .port{ background:var(--elev); }

/* inspector node-header lockup: faint tint → readable on frost */
html[data-theme="arctic"] .mod .bp-nodehdr{
  background:linear-gradient(135deg, color-mix(in srgb,var(--nc) 18%,transparent), rgba(255,255,255,.4));
  border-color:color-mix(in srgb,var(--nc) 34%,transparent);
}

/* schedule-card + leaderboard 9:16 micro-thumbs: dark stripes → frosty
   arctic media keeping the per-clip hue wash (global — shared with the
   real Matrix + Stats views, not just the bible) */
html[data-theme="arctic"] .mtx-thumb,
html[data-theme="arctic"] .lb-thumb{
  background:
    radial-gradient(130% 80% at 30% 16%, hsl(var(--ch,200) 64% 60% / .42), transparent 60%),
    repeating-linear-gradient(135deg,var(--media-a) 0 6px,var(--media-b) 6px 12px);
}

/* leaderboard tiers: white name text vanished on white frost; the gold/
   silver/bronze podium hues are deepened so they hold contrast on light */
html[data-theme="arctic"] .lb-nm{ color:var(--ink); }
html[data-theme="arctic"] .lb-card.gold{   --tier:#c8901a; --tier-soft:rgba(214,160,40,.18); --tier-glow:rgba(214,160,40,.45); }
html[data-theme="arctic"] .lb-card.silver{ --tier:#5d7da6; --tier-soft:rgba(96,140,188,.16); --tier-glow:rgba(96,140,188,.42); }
html[data-theme="arctic"] .lb-card.bronze{ --tier:#b06a37; --tier-soft:rgba(184,112,58,.16); --tier-glow:rgba(184,112,58,.42); }

/* ---- the 9:16 MEDIA CARD shell (.vw-card) ----
   was a hard #0c0e16 near-black with NO arctic override, so the card body
   + footer-meta strip stayed black under the frosty thumb. Repaint the
   shell to frost so it reads as a light arctic card. (global — the real
   Vault grid uses the same class.) */
html[data-theme="arctic"] .vw-card{
  background:var(--elev); border-color:var(--line);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-theme="arctic"] .vw-card:hover{
  border-color:var(--acc-line);
  box-shadow:0 30px 60px -22px rgba(28,116,142,.4), 0 0 0 1px var(--acc-line), 0 0 40px -14px var(--acc-glow);
}
html[data-theme="arctic"] .vw-card.on{
  border-color:var(--acc-line);
  box-shadow:0 0 0 1.5px var(--acc-line), 0 26px 60px -20px rgba(28,116,142,.4), 0 0 46px -10px var(--acc-glow);
}

/* ---- list-view sticky header (.vw-thead) ----
   used a hard #0c0e16 near-black gradient as its scroll mask → showed as
   a black strip on the icy theme. Repaint to the frosty elevated surface. */
html[data-theme="arctic"] .vw-thead{
  background:linear-gradient(180deg, var(--elev) 72%, transparent);
}

/* ---- WHITE-TEXT RULE ----
   White is only legible on a DENSE backing. The floating overlay chips
   (Live badge, AI score, platform stack, duration, mini-metrics, the
   leaderboard thumb chips, the play button) were all near-black glass
   (rgba(8,9,14,.6)) carrying white text. On the icy theme that black
   clashes — but the text must stay white, so the backing is repainted to
   a DENSE ARCTIC-CYAN scrim. White now sits on solid cyan, never on the
   light-blue/grey frost. */
html[data-theme="arctic"] .st-badge,
html[data-theme="arctic"] .ai-score,
html[data-theme="arctic"] .metric-mini,
html[data-theme="arctic"] .vw-dur,
html[data-theme="arctic"] .plat-stack .pi,
html[data-theme="arctic"] .lb-plat,
html[data-theme="arctic"] .lb-vir{
  background:color-mix(in srgb, var(--acc-2) 46%, #08252f);
  border-color:color-mix(in srgb, var(--acc) 42%, transparent);
  color:#fff;
  box-shadow:0 6px 16px -6px rgba(18,70,90,.55);
}
/* play button on the media thumb: glassy-white glyph → dense cyan puck */
html[data-theme="arctic"] .vw-thumb .pulsebtn{
  background:color-mix(in srgb, var(--acc-2) 60%, #06212b);
  border-color:color-mix(in srgb, var(--acc) 50%, rgba(255,255,255,.45));
  color:#fff;
}
html[data-theme="arctic"] .lb-play{
  background:color-mix(in srgb, var(--acc-2) 55%, #06212b);
  border-color:color-mix(in srgb, var(--acc) 50%, rgba(255,255,255,.4));
}
/* slide-up quick-action bar: black gradient → deep cyan-ink gradient so
   its white button labels keep dense-cyan backing */
html[data-theme="arctic"] .vw-qa{
  background:linear-gradient(180deg,transparent, color-mix(in srgb, var(--acc-2) 58%, #06202a) 42%);
}
html[data-theme="arctic"] .qa-btn{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); color:#fff;
}
html[data-theme="arctic"] .qa-btn:hover{ background:rgba(255,255,255,.3); }

/* ============================================================
   ARCTIC  —  AUTO · Blueprint node graph (site-wide, not just bible)
   The graph was authored on obsidian's multi-hue category system
   (indigo · purple · violet · orange · green). On the frosty theme
   those warm hues fight the icy mood, so the whole category + port
   palette becomes a semantic "macaron" wheel — deeper than obsidian so each
   hue stays legible on the light canvas, but the same meaning→hue mapping. */
html[data-theme="arctic"]{
  --bpc-input:#3e78d8;   /* azure blue      — source        */
  --bpc-gen:#8a63e0;     /* violet          — AI generate   */
  --bpc-ai:#d85aa6;      /* magenta pink    — AI transform  */
  --bpc-overlay:#c99a2e; /* deep gold       — overlays      */
  --bpc-media:#db8636;   /* amber orange    — media         */
  --bpc-audio:#3fb05a;   /* green           — audio         */
  --bpc-fx:#1fae9c;      /* teal mint       — color / fx    */
  --bpc-logic:#6e7794;   /* cool slate      — flow / logic  */
  --bpc-output:#d85f54;  /* terracotta      — publish       */
  --bpp-video:#3e78d8;   /* blue  — the main video flow */
  --bpp-mask:#8a63e0;    /* violet */
  --bpp-audio:#3fb05a;   /* green */
  --bpp-data:#c99a2e;    /* amber */
  --bpp-any:#7a8498;     /* slate */
}

/* node icon chips (toolbox blocks, graph-node heads, add-menu items,
   inspector header): dark-base color-mix → bright cyan-tinted chip with
   a white glyph, matching the bible's .mod-node-ic treatment */
html[data-theme="arctic"] .bp-block-ic,
html[data-theme="arctic"] .bp-gnode-ic,
html[data-theme="arctic"] .bp-menu-item .mi-ic,
html[data-theme="arctic"] .bp-nodehdr .ic,
html[data-theme="arctic"] .bp-pv-stage .si,
html[data-theme="arctic"] .bp-acc-ic{
  background:color-mix(in srgb,var(--nc,var(--acc)) 80%,#fff) !important;
  border-color:color-mix(in srgb,var(--nc,var(--acc)) 55%,transparent);
  color:#fff;
}
/* graph-node body + head: white frost (head keeps the cool --nc wash) */
html[data-theme="arctic"] .bp-gnode{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.8));
  border-color:color-mix(in srgb,var(--nc) 26%,var(--line));
  box-shadow:0 18px 40px -22px rgba(28,116,142,.42), inset 0 1px 0 rgba(255,255,255,.85);
}
/* port sockets on the real graph: dark wells → white frost (filled +
   candidate dots keep their port-hue fill) */
html[data-theme="arctic"] .bp-pdot:not(.filled):not(.cand){ background:var(--elev); }

/* AUTO node viewport edge vignette: the obsidian base sinks the canvas rim
   in a heavy inset black (rgba(0,0,0,.55)) that turned the frosty viewport
   edges a dirty grey. Repaint to a soft, clean arctic-blue rim so the graph
   sits in fresh glacial light instead of smoke. */
html[data-theme="arctic"] .bp-canvas::after{
  box-shadow:none;
}

/* ============================================================
   ARCTIC  —  STATISTIC · Mission Control (site-wide)
   The dashboard was authored on obsidian neon-indigo data viz with a
   dark video frame and white numerals. On frost the black frame, the
   purple comets/rings and every white-on-light numeral break. Repaint:
   frame → frosty, indigo data → icy cyan, white text → ink, and the
   floating video chips → the dense-cyan scrim (white stays legible).
   ============================================================ */
html[data-theme="arctic"] .stx{
  background:
    radial-gradient(900px 520px at 30% -10%, rgba(17,182,207,.12), transparent 60%),
    radial-gradient(800px 600px at 108% 120%, rgba(120,224,205,.10), transparent 58%);
}
/* HUD big numerals + title (white / indigo clip → ink + cyan) */
html[data-theme="arctic"] .sx-metric-num{ color:var(--ink); text-shadow:0 0 24px rgba(17,182,207,.22); }
html[data-theme="arctic"] .sx-hud-title{
  background:linear-gradient(120deg,#0d7e93,#13b6cf 60%,#2ec7c2);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
}
html[data-theme="arctic"] .sx-hring-num{ color:var(--ink); }
html[data-theme="arctic"] .hr-track{ stroke:rgba(18,70,95,.14); }
html[data-theme="arctic"] .sx-range button.on{ color:var(--acc-ink); }

/* Retention X-Ray: the black video frame → frosty media + per-clip hue */
html[data-theme="arctic"] .rx-frame{
  background:
    radial-gradient(135% 90% at 28% 16%, hsl(var(--ch) 70% 60% / .34), transparent 56%),
    repeating-linear-gradient(135deg,var(--media-a) 0 13px,var(--media-b) 13px 26px);
  box-shadow:0 30px 70px -28px rgba(28,116,142,.4), 0 0 50px -12px hsl(var(--ch) 70% 58% / .3),
    0 0 0 1px var(--line-strong), inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-theme="arctic"] .rx-grad{
  background:radial-gradient(120% 80% at 30% 16%, hsl(var(--ch) 72% 58% / .42), transparent 58%),
    linear-gradient(180deg, transparent 46%, rgba(13,99,123,.30));
}
/* subtitle bars on the frame: white → readable cool ink */
html[data-theme="arctic"] .rx-cap i{ background:rgba(13,99,123,.55); }
html[data-theme="arctic"] .rx-cap i.s{ background:rgba(13,99,123,.3); }
/* floating video chips → dense-cyan scrim (white stays legible) */
html[data-theme="arctic"] .rx-platform,
html[data-theme="arctic"] .rx-dur{
  background:color-mix(in srgb, var(--acc-2) 46%, #08252f);
  color:#fff;
  border-color:color-mix(in srgb, var(--acc) 42%, transparent);
}
html[data-theme="arctic"] .rx-play{
  background:color-mix(in srgb, var(--acc-2) 60%, #06212b);
  border-color:color-mix(in srgb, var(--acc) 50%, rgba(255,255,255,.45));
}
html[data-theme="arctic"] .rx-pstats .ps b{ color:var(--ink); }
/* chart: indigo line glow + faint white grid → cyan + cool grid */
html[data-theme="arctic"] .rx-line{ filter:drop-shadow(0 3px 10px rgba(17,182,207,.5)); }
html[data-theme="arctic"] .rx-grid{ stroke:rgba(18,70,95,.07); }
html[data-theme="arctic"] .rx-guide{ stroke:rgba(18,70,95,.28); }

/* Sentiment matrix: dark particle cloud + dark core → frost + cyan core */
html[data-theme="arctic"] .sm-cloud{
  background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.5), rgba(150,210,228,.14));
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
html[data-theme="arctic"] .sm-core{
  background:radial-gradient(circle, color-mix(in srgb,var(--acc-2) 60%,#06212b), color-mix(in srgb,var(--acc-2) 30%,#06212b) 70%, transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
html[data-theme="arctic"] .sm-bar{ background:rgba(18,70,95,.10); }
html[data-theme="arctic"] .sm-leg .lp{ color:var(--ink); }

/* Loop-velocity engine: indigo rings/comets + white numerals → icy */
html[data-theme="arctic"] .le-ring{ stroke:rgba(17,182,207,.18); }
html[data-theme="arctic"] .le-ring.r2{ stroke:rgba(17,182,207,.13); }
html[data-theme="arctic"] .le-ring.r3{ stroke:rgba(17,182,207,.10); }
html[data-theme="arctic"] .le-tick{ stroke:rgba(17,182,207,.26); }
html[data-theme="arctic"] .le-comet.c1{ fill:#11b6cf; filter:drop-shadow(0 0 8px #11b6cf); }
html[data-theme="arctic"] .le-comet.c2{ fill:#4f8fe0; filter:drop-shadow(0 0 7px #4f8fe0); }
html[data-theme="arctic"] .le-comet.c3{ fill:#1fc79a; filter:drop-shadow(0 0 6px #1fc79a); }
html[data-theme="arctic"] .le-avg,
html[data-theme="arctic"] .le-pct .big,
html[data-theme="arctic"] .le-band .bp{ color:var(--ink); }
html[data-theme="arctic"] .le-band .btr{ background:rgba(18,70,95,.10); }
html[data-theme="arctic"] .le-note{
  background:linear-gradient(120deg,rgba(17,182,207,.14),rgba(120,224,205,.07));
}

/* ============================================================
   ARCTIC  —  FINAL SWEEP v2  (live-tab dark holdovers)
   The earlier sweep tokenized most wells but a handful of fills
   were either hardcoded smoked-black with NO override, or only
   patched inside the .mod styleguide (so the REAL tabs still
   leaked dark). White-on-light selected-state text (invisible on
   frost) is repainted to readable cyan-ink. Each rule below maps
   a surviving obsidian fill → the frosty arctic equivalent.
   ============================================================ */

/* ---- A · untokenized dark WELLS / tracks / rails (live tabs) ---- */
/* Vault: AI search bar + storage track + dropdown hover were .mod-only */
html[data-theme="arctic"] .vw-search{ background:var(--well); }
html[data-theme="arctic"] .vw-storage .bar{ background:rgba(18,70,95,.10); }
html[data-theme="arctic"] .vw-dd:hover{ background:var(--hover-2); }
/* Settings: invite field + usage-meter track + payment-card chip */
html[data-theme="arctic"] .invite-bar .set-input{ background:var(--well); }
html[data-theme="arctic"] .bh-meter .mbar{ background:rgba(18,70,95,.10); }
html[data-theme="arctic"] .pay-row .pc-chip{
  background:linear-gradient(135deg,#cfe0e8,#a9c4d0); border-color:var(--line-strong); color:var(--ink-2); }
/* Matrix: config rail tint + weekend day cells */
html[data-theme="arctic"] .mtx-cfg{ background:rgba(18,70,95,.04); }
html[data-theme="arctic"] .mtx-day.weekend{ background:rgba(18,70,95,.05); }

/* ---- B · white-on-light SELECTED/ACTIVE text → readable cyan-ink ---- */
/* (#fff on var(--elev)/var(--acc-soft)/var(--well) vanished on frost) */
html[data-theme="arctic"] .vw-dd.open,
html[data-theme="arctic"] .vw-dd.active,
html[data-theme="arctic"] .vw-seg button.on,
html[data-theme="arctic"] .sx-dd.open,
html[data-theme="arctic"] .sx-mi.on,
html[data-theme="arctic"] .dpill.on,
html[data-theme="arctic"] .dpill.on .dn,
html[data-theme="arctic"] .cfg-slots .slot.on,
html[data-theme="arctic"] .fpill,
html[data-theme="arctic"] .fpill .x{ color:var(--acc-ink); }
html[data-theme="arctic"] .fpill .x:hover{ background:var(--acc-soft); color:var(--acc-ink); }

/* Vault audience tag — indigo wash holdover → cyan wash, readable */
html[data-theme="arctic"] .atag.on{
  background:linear-gradient(120deg,rgba(17,182,207,.20),rgba(120,224,205,.10));
  color:var(--acc-ink); }

/* Matrix platform segment — #fff on a faint platform-hue wash → hued ink */
html[data-theme="arctic"] .cfg-seg.plat button.on{ color:color-mix(in srgb,var(--pc) 64%,#06303a); }

/* Stats live-now viewer count — #fff numeral on the now-light card → ink */
html[data-theme="arctic"] .sx-live-meta .row2{ color:var(--ink); text-shadow:0 0 14px rgba(17,168,136,.28); }

/* ---- C · floating VIDEO-THUMB overlay chips (dark glass → dense-cyan
   scrim, so the white text stays legible — same rule as Vault/Stats) ---- */
html[data-theme="arctic"] .cscore,
html[data-theme="arctic"] .cdur,
html[data-theme="arctic"] .cfg-prev .pv-score,
html[data-theme="arctic"] .cfg-prev .pv-dur{
  background:color-mix(in srgb, var(--acc-2) 46%, #08252f);
  border-color:color-mix(in srgb, var(--acc) 42%, transparent); color:#fff; }
html[data-theme="arctic"] .cscore svg{ color:#bfeef6; }
/* play pucks: faint white glass → dense cyan puck */
html[data-theme="arctic"] .cplay,
html[data-theme="arctic"] .cfg-prev .pv-play,
html[data-theme="arctic"] .insp-preview .pv-play,
html[data-theme="arctic"] .mod-frame916 .play{
  background:color-mix(in srgb, var(--acc-2) 60%, #06212b);
  border-color:color-mix(in srgb, var(--acc) 50%, rgba(255,255,255,.45)); color:#fff; }
/* card delete control: smoked-black → cool ink scrim (white × reads) */
html[data-theme="arctic"] .mtx-card-x{
  background:color-mix(in srgb, var(--ink) 78%, #06212b); border-color:var(--line-strong); }

/* ---- D · Matrix routing graph (live tab — was .mod-scoped only) ---- */
/* node port sockets: near-black wells → white frost (ring stays hued) */
html[data-theme="arctic"] .mtx-node .port{ background:var(--elev); }
/* source-node 9:16 thumb: dark stripes + indigo wash → frosty + cyan */
html[data-theme="arctic"] .mtx-src-thumb{
  background:radial-gradient(120% 80% at 30% 16%, hsl(var(--ch,200) 64% 60% / .34), transparent 60%),
    repeating-linear-gradient(135deg,var(--media-a) 0 6px,var(--media-b) 6px 12px); }
html[data-theme="arctic"] .mtx-src-thumb::after{
  background:linear-gradient(180deg,rgba(17,182,207,.16),transparent 50%,rgba(13,99,123,.34)); }
/* routing icon chips: dark color-mix base → bright cyan chip (bible match) */
html[data-theme="arctic"] .mtx-branch-ic{
  background:color-mix(in srgb,var(--nc,var(--acc)) 80%,#fff);
  border-color:color-mix(in srgb,var(--nc,var(--acc)) 55%,transparent); color:#fff; }
html[data-theme="arctic"] .mtx-tip-ic{
  background:color-mix(in srgb,var(--pc,var(--acc)) 80%,#fff);
  border-color:color-mix(in srgb,var(--pc,var(--acc)) 55%,transparent); color:#fff; }
html[data-theme="arctic"] .mtx-rhead .ic{
  background:color-mix(in srgb,var(--acc) 80%,#fff); color:#fff; }

/* ============================================================
   PALETTE SWITCHER  —  popover + theme cards (both themes)
   ============================================================ */
.theme-pop{ width:248px; }
.theme-opt{ display:flex; align-items:center; gap:12px; width:100%; padding:9px 10px; border-radius:12px;
  cursor:pointer; transition:.16s var(--out); border:1px solid transparent; text-align:left; }
.theme-opt:hover{ background:var(--hover); }
.theme-opt.on{ background:var(--acc-soft); border-color:var(--acc-line); }
.theme-sw{ display:flex; flex:0 0 auto; border-radius:9px; overflow:hidden; width:54px; height:34px;
  box-shadow:0 3px 10px -3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.16); }
.theme-sw i{ flex:1; height:100%; }
.theme-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.theme-meta .n{ font-size:var(--fs-base); font-weight:var(--fw-black); letter-spacing:-.01em; color:var(--ink); }
.theme-meta .s{ font-size:var(--fs-eyebrow); font-weight:var(--fw-med); color:var(--ink-3); }
.theme-ck{ flex:0 0 auto; color:var(--acc-2); }