From 211287aed57fe0335250686f0e0f11345004aaef Mon Sep 17 00:00:00 2001
From: Keysat <licensing@keysat.xyz>
Date: Tue, 16 Jun 2026 23:36:42 -0500
Subject: [PATCH] Consolidate UI colors behind CSS custom properties; fix
 design drift

Phase 1 of the design-contract conformance cleanup. Add a canonical
:root token block (single source of truth, mirroring
design/tokens.tokens.json) to public/index.html's stylesheet and migrate
the whole <style> block to var(--token); give public/auth.html its own
subset :root and migrate it too.

Fix all color + weight drift across every surface (stylesheet, inline
styles, JS handlers, the SHARE_PAGE_CSS export):
- legacy indigos #6366f1/#4f46e5/#4338ca + rgba(99,102,241) ->
  #818cf8/#a5b4fc/rgba(129,140,248)
- blue #3b82f6 interactive buttons (incl. the whole auth screen) -> indigo
- legacy darks #0a0e17/#0b1120/#020617/#121828/#1f2942 -> the surface ladder
- #f5f9ff -> #f1f5f9, #312e81 -> #1e293b, weights 650->600 / 680->700

The meta theme-color stays a literal #0a0e1a. Verified: 144 tests pass,
both pages serve 200, all var() references resolve. Phase 2 (var-ifying
the long-tail inline styles, snapping off-scale font/radius) is in
ROADMAP.md.
---
 AGENTS.md         |   2 +
 ROADMAP.md        |  60 ++--
 public/auth.html  |  81 +++--
 public/index.html | 778 ++++++++++++++++++++++++----------------------
 4 files changed, 488 insertions(+), 433 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 568625c..ccfc54b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -139,6 +139,8 @@ unsure whether a change is contract-affecting, assume it is and check.
 
 **Done & live:** self-serve Pro/Max purchase (Bitcoin inline-Lightning + Zaprite card, prepaid, relay owns tier/expiry), core-decoupling, per-tenant subscriptions, expiry-reminder emails (`POST /api/admin/reminders/run {test_email}`), **opt-in Daily Digest** (0.2.158, `b4fa5d7`): off-by-default daily email of a user's last ~24h of library recaps, each synthesized via `/relay/analyze` (operator-absorbed); `daily-digest.js` scan at `SEND_HOUR=8`, per-user watermark dedup, public tokenized unsubscribe, admin trigger `POST /api/admin/digest/run`; and **YouTube `/live/` + `/shorts/` URL support** (0.2.159, `cb961cd`): `extractVideoId` now accepts those forms (was rejecting them as "Invalid YouTube URL"). Plans in `docs/*-plan.md`.
 
+**Design system (2026-06-16, committed `1741fb1` + a follow-up commit, NOT yet deployed):** the `design/` contract was extracted from the as-built UI (`design/DESIGN.md` + `design/tokens.tokens.json`; see the **Design** line near the top). Then **Phase 1 of the conformance cleanup landed**: a canonical `:root` token block is now the single source of truth in `public/index.html`'s `<style>`, the whole stylesheet + `public/auth.html` are migrated to `var(--token)`, and all color/weight drift was fixed across every surface (auth's blue accent → indigo, legacy darks → the ladder, etc.). Verified locally (144 tests pass, both pages serve 200, all `var()` resolve) but **not installed/deployed** — reaches recaps.cc when the box serves the new `public/` files. Phase 2 (var-ifying the long-tail inline styles, snapping off-scale font/radius) is queued in `ROADMAP.md`.
+
 **Only loose end:** the Daily Digest's relay-synthesis + SMTP path can't be exercised off-box, so it's installed but **not yet smoke-tested** — that's operator action #5 below. Everything else (schema/upgrade, scheduler boot, unsubscribe flow) is verified.
 
 **Pending operator actions:**
diff --git a/ROADMAP.md b/ROADMAP.md
index ffbaa09..30c1219 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -16,40 +16,36 @@ Longer-term backlog for Recaps. Near-term in-flight work and known issues live i
 ## Design-contract conformance cleanup (from the 2026-06-16 `/design` extract)
 
 The `design/` contract (`design/DESIGN.md` + `design/tokens.tokens.json`) was extracted
-from the as-built UI and reconciled with Grant on 2026-06-16. The code is **structurally
-aligned** (right surface ladder, accent system, premium-purple, components) but a set of
-legacy values survived the reconciliation and now read as off-contract drift. None are
-release-blocking; all are mechanical token migrations. `design-checker` found seven
-categories (counts approximate, from grep) across the three styling surfaces — the main
-`public/index.html` `<style>` block, its `SHARE_PAGE_CSS` string, and `public/auth.html`.
-**Edit all three in lockstep** (the SHARE_PAGE_CSS string carries its own copies that a
-main-stylesheet grep won't catch). Do NOT do this in the same pass as the contract itself.
+from the as-built UI and reconciled with Grant on 2026-06-16. The code was structurally
+aligned but a set of legacy values had survived as off-contract drift.
 
-- **Legacy accent indigo → `#818cf8`** (~12 hard + ~16 tint). `#6366f1`/`#4f46e5`/`#4338ca`
-  fills/borders/hovers and `rgba(99,102,241,…)` tints → `#818cf8`/`#a5b4fc` + `rgba(129,140,248,…)`.
-  Biggest cluster is the activation screen (`index.html:1213-1216`, `:1565,1576,1579`) which
-  uses all three demoted values in one component; also inline buttons `:6496,7776,8183`,
-  `.license-block` `:1593,1601`.
-- **Blue `#3b82f6` as a primary interactive color → indigo** (auth ×4 + index ×8). `auth.html`
-  is the worst offender — its primary button + input focus are blue (`auth.html:99,105-117`);
-  also wallet/sign-up/grant/password buttons (`index.html:5228,5763,8151,8163,7609,12384`).
-  Blue stays only for info/status + speaker chips.
-- **Legacy dark backgrounds → ladder** (~10). `#0a0e17`→`#0a0e1a` (`:1156,1243,8662`);
-  `#0b1120`→`#0a0e1a` (`:1191` + SHARE_PAGE_CSS `:11111`); `#020617`→`#0f172a` (`:1562`);
-  and the auth sub-palette `#121828`→`#111827`, `#1f2942`→`#1e293b` (`auth.html:47-48,83`,
-  `index.html:400-401`).
-- **Stray heading near-white `#f5f9ff` → `#f1f5f9`** (×9; 5 in `auth.html:59,63,87,94,96`,
-  4 in index `:418,660,6335,6343`).
-- **Off-scale font sizes → nearest step** (~23). `15→16`, `24→22`, `9→10`, `12.5/11.5→12`,
-  `10.5→10` (e.g. `index.html:84,899,907`, `auth.html:86,110`).
-- **Off-scale weights** (×3): `650→600` (`:1008`, SHARE_PAGE_CSS `:11133`), `680→700`
-  (SHARE_PAGE_CSS `:11113`).
-- **Off-scale radii → snap** (~18). `3→4`, `5→6`, `7→6|8`, `9→8|10`, `11→10|12` (scrollbars,
+**Phase 1 — DONE 2026-06-16 (not yet deployed to the box).** Introduced a canonical `:root`
+token block (the single source of truth, mirroring `tokens.tokens.json`) at the top of the
+`public/index.html` `<style>` block and migrated the whole stylesheet to `var(--token)`;
+`public/auth.html` got its own subset `:root` and was migrated too. Fixed **all** color +
+weight drift across every surface (stylesheet, ~447 inline styles, JS handlers, the
+`SHARE_PAGE_CSS` export): legacy indigos `#6366f1`/`#4f46e5`/`#4338ca` + `rgba(99,102,241,…)`
+→ `#818cf8`/`#a5b4fc`/`rgba(129,140,248,…)`; blue `#3b82f6` interactive buttons (incl. the
+whole auth screen) → indigo; legacy darks `#0a0e17`/`#0b1120`/`#020617`/`#121828`/`#1f2942`
+→ the ladder; `#f5f9ff`→`#f1f5f9`; `#312e81`→`#1e293b`; weights `650→600`, `680→700`.
+Verified: 144 tests pass, both pages serve 200, all 426+27 `var()` references resolve, no
+undefined vars. (`SHARE_PAGE_CSS` and `auth.html` are standalone documents that each carry
+their own copy — kept in sync; the meta `theme-color` stays a literal `#0a0e1a`.)
+
+**Phase 2 — REMAINING (deliberately deferred; these are *visible* changes, unlike Phase 1's
+no-op var migration).**
+- **Var-ify the long-tail inline `style=` attributes.** Phase 1 fixed the *drift* inline
+  values but left canonically-correct inline hexes as literals (the stylesheet is now the
+  single source of truth; inline styles still hardcode). Convert them to `var(--token)` now
+  that the tokens exist — but dodge the spots that can't take `var()`: the `<meta theme-color>`,
+  SVG `fill`/`stroke` set via JS (e.g. `index.html` sub-icon), and any hex used in JS *logic*
+  rather than as a CSS value. Per-occurrence judgement, not a blind sweep.
+- **Snap off-scale font sizes** to the scale: `15→16`, `24→22`, `9→10`, `12.5/11.5→12`,
+  `10.5→10` (~23 occurrences). Each is a small visible size change — eyeball per component.
+- **Snap off-scale radii**: `3→4`, `5→6`, `7→6|8`, `9→8|10`, `11→10|12` (~18; scrollbars,
   history/queue action buttons, mobile submit/menu, buy inputs).
-- **(stretch) Consolidate inline styles behind CSS custom properties.** ~447 inline `style=`
-  attrs + duplicated values are why this drift accumulates; a `:root` token block (or
-  `design/brand/palette.css` generated from the tokens) would make the contract enforceable
-  instead of advisory. Big diff — schedule deliberately.
+- **(stretch) Generate `design/brand/palette.css` from the tokens** (Style Dictionary) and
+  `@import`/inline it, so the `:root` block isn't hand-maintained in three places.
 
 ## Known debt (P2, from the 2026-06-14 full-eval — `EVALUATION.md`)
 
diff --git a/public/auth.html b/public/auth.html
index b71250e..f44084f 100644
--- a/public/auth.html
+++ b/public/auth.html
@@ -30,12 +30,31 @@
 
   <link rel="icon" type="image/png" href="/assets/icon.png">
   <style>
+    /* Design tokens (subset used by this page) — mirror of design/tokens.tokens.json.
+       This is a standalone document, so it carries its own copy; keep it in sync with
+       the canonical :root in index.html. Accent is indigo, not the old blue. */
+    :root {
+      --bg: #0a0e1a;
+      --surface: #111827;
+      --border: #1e293b;
+      --accent: #818cf8;
+      --accent-hover: #a5b4fc;
+      --text: #e2e8f0;
+      --text-strong: #f1f5f9;
+      --text-body: #cbd5e1;
+      --text-muted: #94a3b8;
+      --text-label: #64748b;
+      --text-faint: #475569;
+      --error-soft: #fca5a5;
+      --success-text: #4ade80;
+    }
+
     * { box-sizing: border-box; margin: 0; padding: 0; }
     html, body { height: 100%; }
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: #0a0e1a;
-      color: #e2e8f0;
+      background: var(--bg);
+      color: var(--text);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -44,8 +63,8 @@
     .card {
       width: 100%;
       max-width: 420px;
-      background: #121828;
-      border: 1px solid #1f2942;
+      background: var(--surface);
+      border: 1px solid var(--border);
       border-radius: 12px;
       padding: 32px 28px;
     }
@@ -56,65 +75,65 @@
       margin-bottom: 28px;
     }
     .logo img { width: 32px; height: 32px; border-radius: 6px; }
-    .logo span { font-size: 18px; font-weight: 600; color: #f5f9ff; }
+    .logo span { font-size: 18px; font-weight: 600; color: var(--text-strong); }
     h1 {
       font-size: 22px;
       font-weight: 600;
-      color: #f5f9ff;
+      color: var(--text-strong);
       margin-bottom: 8px;
     }
     p.lede {
       font-size: 14px;
       line-height: 1.55;
-      color: #94a3b8;
+      color: var(--text-muted);
       margin-bottom: 24px;
     }
     label {
       display: block;
       font-size: 13px;
       font-weight: 500;
-      color: #cbd5e1;
+      color: var(--text-body);
       margin-bottom: 8px;
     }
     input[type=email],
     input[type=password] {
       width: 100%;
-      background: #0a0e1a;
-      border: 1px solid #1f2942;
+      background: var(--bg);
+      border: 1px solid var(--border);
       border-radius: 8px;
       padding: 12px 14px;
-      font-size: 15px;
-      color: #f5f9ff;
+      font-size: 16px;
+      color: var(--text-strong);
       font-family: inherit;
       outline: none;
       transition: border-color 0.15s ease;
       /* Browsers auto-fill password fields with their own bright
          background; -webkit-text-fill-color + a long inset shadow
          override that so the field stays on-brand. */
-      -webkit-text-fill-color: #f5f9ff;
-      -webkit-box-shadow: 0 0 0 1000px #0a0e1a inset;
-      caret-color: #f5f9ff;
+      -webkit-text-fill-color: var(--text-strong);
+      -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
+      caret-color: var(--text-strong);
     }
     input[type=email]:focus,
-    input[type=password]:focus { border-color: #3b82f6; }
+    input[type=password]:focus { border-color: var(--accent); }
     input[type=email]::placeholder,
-    input[type=password]::placeholder { color: #475569; }
+    input[type=password]::placeholder { color: var(--text-faint); }
     button {
       width: 100%;
       margin-top: 16px;
-      background: #3b82f6;
+      background: var(--accent);
       color: white;
       border: none;
       border-radius: 8px;
       padding: 12px 14px;
-      font-size: 15px;
+      font-size: 16px;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.15s ease;
       font-family: inherit;
     }
-    button:hover:not(:disabled) { background: #2563eb; }
-    button:disabled { background: #1e3a8a; cursor: not-allowed; opacity: 0.6; }
+    button:hover:not(:disabled) { background: var(--accent-hover); }
+    button:disabled { background: var(--border); cursor: not-allowed; opacity: 0.6; }
     .feedback {
       margin-top: 20px;
       padding: 14px 16px;
@@ -124,26 +143,26 @@
       display: none;
     }
     .feedback.success {
-      background: rgba(16, 185, 129, 0.1);
-      border: 1px solid rgba(16, 185, 129, 0.3);
-      color: #6ee7b7;
+      background: rgba(34, 197, 94, 0.1);
+      border: 1px solid rgba(34, 197, 94, 0.3);
+      color: var(--success-text);
       display: block;
     }
     .feedback.error {
       background: rgba(239, 68, 68, 0.1);
       border: 1px solid rgba(239, 68, 68, 0.3);
-      color: #fca5a5;
+      color: var(--error-soft);
       display: block;
     }
     .footer {
       margin-top: 28px;
       font-size: 12px;
-      color: #64748b;
+      color: var(--text-label);
       text-align: center;
       line-height: 1.5;
     }
-    .footer a { color: #94a3b8; text-decoration: none; }
-    .footer a:hover { color: #cbd5e1; }
+    .footer a { color: var(--text-muted); text-decoration: none; }
+    .footer a:hover { color: var(--text-body); }
     /* Password group hidden by default — most users want the magic
        link and the optional-password field cluttered the form. The
        "Use password instead" link below the submit button reveals
@@ -153,14 +172,14 @@
       text-align: center;
       margin-top: 14px;
       font-size: 12px;
-      color: #64748b;
+      color: var(--text-label);
     }
     .toggle-pwd-row a {
-      color: #94a3b8;
+      color: var(--text-muted);
       text-decoration: underline;
       cursor: pointer;
     }
-    .toggle-pwd-row a:hover { color: #cbd5e1; }
+    .toggle-pwd-row a:hover { color: var(--text-body); }
   </style>
 </head>
 <body>
diff --git a/public/index.html b/public/index.html
index c809d84..d9169c8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -42,12 +42,50 @@
 
   <link rel="icon" type="image/png" href="/assets/icon.png">
   <style>
+    /* Design tokens — the single source of truth for this stylesheet, mirroring
+       design/tokens.tokens.json (DESIGN.md is the brand brief). Edit a value here,
+       not inline. Accent is indigo; purple is premium-only. The SHARE_PAGE_CSS
+       export and public/auth.html are separate documents with their own copies —
+       keep them in sync. */
+    :root {
+      /* surfaces */
+      --bg: #0a0e1a;               /* page, sticky bars, side panels */
+      --surface: #111827;          /* warm gray-900 — cards, modals, toasts, icon-buttons */
+      --surface-inset: #0f172a;    /* cool slate-900 — fields, list rows, expanded chunk */
+      /* borders */
+      --border: #1e293b;
+      --border-hover: #334155;
+      --border-strong: #475569;    /* shares its value with --text-faint */
+      /* accent (indigo) — the single interactive accent */
+      --accent: #818cf8;
+      --accent-hover: #a5b4fc;
+      /* premium (purple) — paid/upgrade only */
+      --premium: #a855f7;
+      --premium-hover: #c084fc;
+      --premium-deep: #9333ea;
+      --premium-text: #c4b5fd;
+      --premium-text-soft: #d8b4fe;
+      /* text ramp */
+      --text: #e2e8f0;
+      --text-strong: #f1f5f9;
+      --text-body: #cbd5e1;
+      --text-muted: #94a3b8;
+      --text-label: #64748b;
+      --text-faint: #475569;
+      --on-accent: #fff;
+      /* status */
+      --success: #22c55e;  --success-text: #4ade80;  --success-soft: #86efac;  --success-deep: #16a34a;
+      --error: #ef4444;    --error-text: #f87171;    --error-soft: #fca5a5;     --error-deep: #dc2626;
+      --warning: #fbbf24;  --warning-soft: #fcd34d;  --warning-faint: #fde68a;  --warning-deep: #f59e0b;
+      --info: #3b82f6;     --info-mid: #60a5fa;      --info-soft: #93c5fd;
+    }
+
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: #0a0e1a;
+      background: var(--bg);
       min-height: 100vh;
-      color: #e2e8f0;
+      color: var(--text);
     }
 
     .container { max-width: 100%; margin: 0 auto; padding: 36px 24px; transition: margin-left 0.2s ease, max-width 0.2s ease; }
@@ -73,38 +111,38 @@
     }
     .chunks-scroll::-webkit-scrollbar { width: 6px; }
     .chunks-scroll::-webkit-scrollbar-track { background: transparent; }
-    .chunks-scroll::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
-    .chunks-scroll::-webkit-scrollbar-thumb:hover { background: #334155; }
+    .chunks-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    .chunks-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
 
     /* Video sticks to top in split mode */
     .results-left .video-embed {
       margin-bottom: 0; flex-shrink: 0;
     }
     .results-left .video-title {
-      font-size: 15px; font-weight: 600; color: #e2e8f0; line-height: 1.4;
+      font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4;
       padding: 0 2px;
     }
     .results-left .video-meta {
-      font-size: 12px; color: #475569; padding: 0 2px;
+      font-size: 12px; color: var(--text-faint); padding: 0 2px;
     }
 
     /* Minimized video player bar */
     .video-mini-bar {
       display: none; height: 44px; align-items: center; gap: 10px;
-      padding: 0 14px; background: #111827; border: 1px solid #1e293b;
+      padding: 0 14px; background: var(--surface); border: 1px solid var(--border);
       border-radius: 10px; cursor: pointer; transition: all 0.2s;
     }
-    .video-mini-bar:hover { border-color: #334155; background: #1e293b; }
+    .video-mini-bar:hover { border-color: var(--border-hover); background: var(--border); }
     .video-mini-bar .mini-title {
-      flex: 1; font-size: 13px; font-weight: 500; color: #e2e8f0;
+      flex: 1; font-size: 13px; font-weight: 500; color: var(--text);
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
     .video-mini-bar .mini-btn {
-      width: 28px; height: 28px; border-radius: 6px; border: 1px solid #334155;
-      background: none; color: #94a3b8; font-size: 14px; cursor: pointer;
+      width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-hover);
+      background: none; color: var(--text-muted); font-size: 14px; cursor: pointer;
       display: flex; align-items: center; justify-content: center; transition: all 0.15s;
     }
-    .video-mini-bar .mini-btn:hover { background: #334155; color: #e2e8f0; }
+    .video-mini-bar .mini-btn:hover { background: var(--border-hover); color: var(--text); }
     .results-left.minimized .video-embed { display: none; }
     .results-left.minimized .video-title { display: none; }
     .results-left.minimized .video-meta { display: none; }
@@ -115,7 +153,7 @@
       position: absolute; top: 8px; right: 8px; z-index: 5;
       width: 30px; height: 30px; border-radius: 8px;
       background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1);
-      color: #fff; font-size: 16px; cursor: pointer;
+      color: var(--on-accent); font-size: 16px; cursor: pointer;
       display: flex; align-items: center; justify-content: center;
       backdrop-filter: blur(4px); transition: all 0.15s; opacity: 0;
     }
@@ -129,7 +167,7 @@
       }
       .results-left {
         flex: none; max-width: 100%; position: sticky; top: 0;
-        z-index: 10; background: #0a0e1a; padding-bottom: 8px;
+        z-index: 10; background: var(--bg); padding-bottom: 8px;
       }
       .results-left .video-title { font-size: 13px; }
       .results-left .video-meta { font-size: 11px; }
@@ -162,7 +200,7 @@
       .landscape-back {
         position: fixed; top: 12px; left: 12px; z-index: 101;
         width: 36px; height: 36px; border-radius: 50%;
-        background: rgba(0,0,0,0.6); color: #fff; border: none;
+        background: rgba(0,0,0,0.6); color: var(--on-accent); border: none;
         font-size: 18px; cursor: pointer; display: flex;
         align-items: center; justify-content: center;
         backdrop-filter: blur(4px);
@@ -181,7 +219,7 @@
     .mobile-menu-btn { display: none; }
     .mobile-menu-dropdown {
       display: none; position: absolute; top: 100%; right: 0; z-index: 200;
-      background: #111827; border: 1px solid #1e293b; border-radius: 12px;
+      background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
       box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 6px;
       min-width: 180px; animation: slideUp 0.15s ease;
     }
@@ -189,22 +227,22 @@
     .mobile-menu-item {
       display: flex; align-items: center; gap: 10px; width: 100%;
       padding: 10px 14px; background: none; border: none; border-radius: 8px;
-      color: #94a3b8; font-size: 13px; font-weight: 500; cursor: pointer;
+      color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer;
       text-align: left; transition: all 0.15s; white-space: nowrap;
     }
-    .mobile-menu-item:hover { background: #1e293b; color: #e2e8f0; }
-    .mobile-menu-item.active { color: #818cf8; }
-    .mobile-menu-item.danger { color: #f87171; }
+    .mobile-menu-item:hover { background: var(--border); color: var(--text); }
+    .mobile-menu-item.active { color: var(--accent); }
+    .mobile-menu-item.danger { color: var(--error-text); }
     .mobile-menu-item .menu-icon { width: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
     .mobile-menu-item .menu-badge {
       margin-left: auto; min-width: 18px; height: 18px; border-radius: 9px;
-      background: #818cf8; color: #fff; font-size: 10px; font-weight: 700;
+      background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700;
       display: flex; align-items: center; justify-content: center; padding: 0 5px;
     }
     .mobile-menu-item .status-dot {
       width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0;
     }
-    .mobile-menu-sep { height: 1px; background: #1e293b; margin: 4px 8px; }
+    .mobile-menu-sep { height: 1px; background: var(--border); margin: 4px 8px; }
     .mobile-menu-overlay {
       display: none; position: fixed; inset: 0; z-index: 199;
     }
@@ -228,7 +266,7 @@
         position: sticky;
         top: 0;
         z-index: 50;
-        background: #0a0e1a;
+        background: var(--bg);
         padding: 6px 0;
       }
       /* Library button stays visible on mobile (left of the URL input)
@@ -274,13 +312,13 @@
          cramped next to the input/Summarize cluster. */
       .mobile-menu-btn {
         display: flex; order: 2; flex-shrink: 0;
-        width: 48px; height: 48px; border-radius: 11px; border: 1px solid #1e293b;
-        background: #111827; color: #94a3b8; font-size: 24px;
+        width: 48px; height: 48px; border-radius: 11px; border: 1px solid var(--border);
+        background: var(--surface); color: var(--text-muted); font-size: 24px;
         cursor: pointer; align-items: center; justify-content: center;
         transition: all 0.15s; position: relative;
         margin-left: 4px;
       }
-      .mobile-menu-btn:hover { background: #1e293b; color: #e2e8f0; }
+      .mobile-menu-btn:hover { background: var(--border); color: var(--text); }
       /* Mobile menu dropdown items — bigger touch targets too. */
       .mobile-menu-dropdown {
         min-width: 240px;
@@ -293,7 +331,7 @@
       .mobile-menu-item .menu-icon svg { width: 18px; height: 18px; }
       .mobile-menu-btn .dot {
         position: absolute; top: 5px; right: 5px; width: 7px; height: 7px;
-        border-radius: 50%; background: #fbbf24;
+        border-radius: 50%; background: var(--warning);
       }
       /* Queue cards — more compact, allow title wrapping */
       .queue-section { margin-top: 8px; }
@@ -373,8 +411,8 @@
        smaller so it sits flush with the input bar. */
     .info-btn {
       background: transparent;
-      border: 1px solid #1e293b;
-      color: #64748b;
+      border: 1px solid var(--border);
+      color: var(--text-label);
       width: 32px; height: 32px;
       border-radius: 8px;
       display: flex; align-items: center; justify-content: center;
@@ -383,7 +421,7 @@
       transition: all 0.15s ease;
       align-self: center;
     }
-    .info-btn:hover { background: #1e293b; color: #cbd5e1; border-color: #334155; }
+    .info-btn:hover { background: var(--border); color: var(--text-body); border-color: var(--border-hover); }
     .info-btn:active { transform: scale(0.96); }
 
     /* Brand-styled popover card anchored under the info icon. Same
@@ -397,14 +435,14 @@
       top: calc(100% + 8px);
       left: 0;
       width: min(420px, calc(100vw - 24px));
-      background: #121828;
-      border: 1px solid #1f2942;
+      background: var(--surface);
+      border: 1px solid var(--border);
       border-radius: 12px;
       padding: 16px 18px;
       box-shadow: 0 10px 30px rgba(0,0,0,0.4);
       z-index: 50;
       font-size: 13px;
-      color: #cbd5e1;
+      color: var(--text-body);
       line-height: 1.55;
       animation: formatsInfoIn 0.14s ease-out;
     }
@@ -415,15 +453,15 @@
     .formats-info-card-header {
       display: flex; justify-content: space-between; align-items: center;
       margin-bottom: 10px;
-      color: #f5f9ff;
+      color: var(--text-strong);
       font-size: 14px;
     }
     .formats-info-close {
-      background: transparent; border: none; color: #64748b;
+      background: transparent; border: none; color: var(--text-label);
       font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px;
       transition: color 0.15s ease;
     }
-    .formats-info-close:hover { color: #cbd5e1; }
+    .formats-info-close:hover { color: var(--text-body); }
     .formats-info-list {
       list-style: none; margin: 0; padding: 0;
     }
@@ -432,7 +470,7 @@
       border-bottom: 1px solid rgba(31, 41, 66, 0.6);
     }
     .formats-info-list li:last-child { border-bottom: none; }
-    .formats-info-list strong { color: #e2e8f0; font-weight: 600; }
+    .formats-info-list strong { color: var(--text); font-weight: 600; }
 
     /* Inline status + upgrade slot between the URL input and the right
        icons. Wraps on narrow screens; hidden on mobile alongside
@@ -451,7 +489,7 @@
       display: flex; align-items: center; gap: 0;
       padding: 6px 12px;
       background: rgba(30, 41, 59, 0.4);
-      border: 1px solid #1e293b;
+      border: 1px solid var(--border);
       border-radius: 8px;
       margin-right: 8px;
       white-space: nowrap;
@@ -491,19 +529,19 @@
       white-space: nowrap;
     }
     .top-bar-status .upgrade-btn {
-      background: #a855f7; color: #fff; border: none;
+      background: var(--premium); color: var(--on-accent); border: none;
       padding: 7px 12px; border-radius: 8px; text-decoration: none;
       font-size: 11px; font-weight: 700; cursor: pointer;
       white-space: nowrap;
     }
-    .top-bar-status .upgrade-btn:hover { background: #c084fc; }
+    .top-bar-status .upgrade-btn:hover { background: var(--premium-hover); }
     .top-bar-status .have-key-btn {
-      background: transparent; color: #94a3b8;
-      border: 1px solid #334155; padding: 6px 10px; border-radius: 8px;
+      background: transparent; color: var(--text-muted);
+      border: 1px solid var(--border-hover); padding: 6px 10px; border-radius: 8px;
       cursor: pointer; font-size: 11px; font-weight: 600;
       white-space: nowrap;
     }
-    .top-bar-status .have-key-btn:hover { color: #cbd5e1; border-color: #475569; }
+    .top-bar-status .have-key-btn:hover { color: var(--text-body); border-color: var(--text-faint); }
     /* Tier badge — explicit visual confirmation of an active paid
        license. Matches the Upgrade button's accent so users associate
        the color (purple) with "premium tier"; MAX is brighter to
@@ -517,33 +555,33 @@
       border: 1px solid;
     }
     .top-bar-status .tier-badge.tier-pro {
-      color: #c4b5fd; background: rgba(168, 85, 247, 0.14);
+      color: var(--premium-text); background: rgba(168, 85, 247, 0.14);
       border-color: rgba(168, 85, 247, 0.45);
     }
     .top-bar-status .tier-badge.tier-max {
-      color: #fde68a; background: rgba(250, 204, 21, 0.16);
+      color: var(--warning-faint); background: rgba(250, 204, 21, 0.16);
       border-color: rgba(250, 204, 21, 0.50);
     }
 
     /* Top-right icon buttons */
     .top-actions { display: flex; gap: 8px; justify-content: flex-end; }
     .icon-btn {
-      width: 40px; height: 40px; border-radius: 10px; border: 1px solid #1e293b;
-      background: #111827; color: #64748b; font-size: 20px; position: relative;
+      width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
+      background: var(--surface); color: var(--text-label); font-size: 20px; position: relative;
       cursor: pointer; display: flex; align-items: center; justify-content: center;
       transition: all 0.2s;
     }
-    .icon-btn:hover { background: #1e293b; color: #94a3b8; border-color: #334155; }
-    .icon-btn.active { background: #818cf8; color: #fff; border-color: transparent; }
+    .icon-btn:hover { background: var(--border); color: var(--text-muted); border-color: var(--border-hover); }
+    .icon-btn.active { background: var(--accent); color: var(--on-accent); border-color: transparent; }
     .icon-btn .dot {
       position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
-      border-radius: 50%; background: #fbbf24; display: none;
+      border-radius: 50%; background: var(--warning); display: none;
     }
     .icon-btn.needs-key .dot { display: block; }
-    .icon-btn.needs-attention .dot { display: block; background: #ef4444; }
+    .icon-btn.needs-attention .dot { display: block; background: var(--error); }
     .icon-btn .badge-count {
       position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px;
-      border-radius: 8px; background: #818cf8; color: #fff; font-size: 9px;
+      border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 9px;
       font-weight: 700; display: flex; align-items: center; justify-content: center;
       padding: 0 4px;
     }
@@ -556,23 +594,23 @@
     }
     @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
     .settings-modal {
-      background: #111827; border: 1px solid #1e293b; border-radius: 16px;
+      background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
       width: 480px; max-width: 90vw; max-height: 85vh; overflow-y: auto;
       box-shadow: 0 24px 64px rgba(0,0,0,0.5); animation: slideUp 0.2s ease;
     }
     @keyframes slideUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
     .settings-modal-header {
       display: flex; justify-content: space-between; align-items: center;
-      padding: 20px 24px; border-bottom: 1px solid #1e293b;
-      position: sticky; top: 0; background: #111827; z-index: 1; border-radius: 16px 16px 0 0;
+      padding: 20px 24px; border-bottom: 1px solid var(--border);
+      position: sticky; top: 0; background: var(--surface); z-index: 1; border-radius: 16px 16px 0 0;
     }
-    .settings-modal-header h2 { font-size: 16px; font-weight: 700; color: #e2e8f0; }
+    .settings-modal-header h2 { font-size: 16px; font-weight: 700; color: var(--text); }
     .close-btn {
-      width: 32px; height: 32px; border-radius: 8px; border: 1px solid #1e293b;
-      background: none; color: #64748b; font-size: 18px; cursor: pointer;
+      width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
+      background: none; color: var(--text-label); font-size: 18px; cursor: pointer;
       display: flex; align-items: center; justify-content: center; transition: all 0.15s;
     }
-    .close-btn:hover { background: #1e293b; color: #e2e8f0; }
+    .close-btn:hover { background: var(--border); color: var(--text); }
     .settings-modal-body { padding: 20px 24px; }
 
     /* Buy / upgrade modal — same overlay pattern as settings but
@@ -585,26 +623,26 @@
       padding: 20px;
     }
     .buy-modal {
-      background: #0f172a; border: 1px solid #1e293b; border-radius: 16px;
+      background: var(--surface-inset); border: 1px solid var(--border); border-radius: 16px;
       width: 1000px; max-width: 100%; max-height: 90vh; overflow-y: auto;
       box-shadow: 0 24px 64px rgba(0,0,0,0.6); animation: slideUp 0.2s ease;
     }
     .buy-header {
       display: flex; justify-content: space-between; align-items: center;
-      padding: 20px 28px; border-bottom: 1px solid #1e293b;
-      position: sticky; top: 0; background: #0f172a; z-index: 1; border-radius: 16px 16px 0 0;
+      padding: 20px 28px; border-bottom: 1px solid var(--border);
+      position: sticky; top: 0; background: var(--surface-inset); z-index: 1; border-radius: 16px 16px 0 0;
     }
-    .buy-header h2 { font-size: 18px; font-weight: 700; color: #e2e8f0; margin: 0; }
+    .buy-header h2 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
     .buy-body { padding: 28px; }
-    .buy-loading { text-align: center; color: #94a3b8; padding: 40px 20px; font-size: 14px; }
+    .buy-loading { text-align: center; color: var(--text-muted); padding: 40px 20px; font-size: 14px; }
     .buy-error {
       padding: 20px; background: rgba(220,38,38,0.08);
       border: 1px solid rgba(220,38,38,0.30); border-radius: 10px;
-      color: #fca5a5; text-align: center;
+      color: var(--error-soft); text-align: center;
     }
     .buy-retry-btn {
-      margin-top: 12px; background: #1e293b; color: #cbd5e1;
-      border: 1px solid #334155; padding: 8px 18px; border-radius: 8px;
+      margin-top: 12px; background: var(--border); color: var(--text-body);
+      border: 1px solid var(--border-hover); padding: 8px 18px; border-radius: 8px;
       cursor: pointer; font-size: 12px; font-weight: 600;
     }
     /* ── Buy-credits success view ─────────────────────────────────
@@ -626,7 +664,7 @@
     .buy-success-check {
       position: absolute; inset: 0;
       display: flex; align-items: center; justify-content: center;
-      font-size: 56px; font-weight: 800; color: #4ade80;
+      font-size: 56px; font-weight: 800; color: var(--success-text);
       background: rgba(74, 222, 128, 0.12);
       border: 2px solid rgba(74, 222, 128, 0.40);
       border-radius: 50%;
@@ -657,26 +695,26 @@
     .buy-success-title {
       margin: 0 0 4px;
       font-size: 18px; font-weight: 700;
-      color: #f5f9ff;
+      color: var(--text-strong);
     }
     .buy-success-sub {
       margin: 0;
       font-size: 13px; line-height: 1.55;
-      color: #94a3b8;
+      color: var(--text-muted);
     }
     .buy-tier-grid {
       display: grid; gap: 16px;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     }
     .buy-tier {
-      background: #111827; border: 1px solid #1e293b; border-radius: 12px;
+      background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
       padding: 24px; display: flex; flex-direction: column; gap: 12px;
       position: relative; transition: border-color 0.15s, transform 0.15s;
     }
-    .buy-tier:hover { border-color: #334155; transform: translateY(-2px); }
+    .buy-tier:hover { border-color: var(--border-hover); transform: translateY(-2px); }
     .buy-tier-highlighted {
-      border: 2px solid #a855f7;
-      background: linear-gradient(180deg, rgba(168,85,247,0.10), #111827);
+      border: 2px solid var(--premium);
+      background: linear-gradient(180deg, rgba(168,85,247,0.10), var(--surface));
       box-shadow: 0 12px 40px rgba(168,85,247,0.25);
       transform: translateY(-4px);
     }
@@ -687,33 +725,33 @@
       display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
     }
     .buy-tier-name {
-      font-size: 22px; font-weight: 700; color: #e2e8f0; letter-spacing: -0.01em;
+      font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.01em;
     }
     .buy-tier-badges {
       display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
     }
     .buy-badge {
-      background: #a855f7; color: #fff;
+      background: var(--premium); color: var(--on-accent);
       padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700;
       text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
     }
     .buy-discount-badge {
-      background: #16a34a; color: #fff;
+      background: var(--success-deep); color: var(--on-accent);
       padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700;
       text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
     }
-    .buy-tier-desc { font-size: 13px; color: #94a3b8; line-height: 1.5; }
+    .buy-tier-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
     .buy-price-row {
       display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
       margin-top: 4px;
     }
-    .buy-price-new { font-size: 28px; font-weight: 700; color: #e2e8f0; }
+    .buy-price-new { font-size: 28px; font-weight: 700; color: var(--text); }
     .buy-price-old {
-      font-size: 16px; color: #64748b; text-decoration: line-through;
+      font-size: 16px; color: var(--text-label); text-decoration: line-through;
     }
-    .buy-price-unit { font-size: 13px; color: #94a3b8; font-weight: 500; }
+    .buy-price-unit { font-size: 13px; color: var(--text-muted); font-weight: 500; }
     .buy-trial {
-      font-size: 11px; color: #86efac; font-weight: 600;
+      font-size: 11px; color: var(--success-soft); font-weight: 600;
       background: rgba(134,239,172,0.08); border: 1px solid rgba(134,239,172,0.25);
       padding: 4px 8px; border-radius: 6px; align-self: flex-start;
     }
@@ -722,12 +760,12 @@
       flex-direction: column; gap: 8px;
     }
     .buy-bullets li {
-      font-size: 13px; color: #cbd5e1; padding-left: 22px; position: relative;
+      font-size: 13px; color: var(--text-body); padding-left: 22px; position: relative;
       line-height: 1.5;
     }
     .buy-bullets li::before {
       content: "✓"; position: absolute; left: 0; top: 0;
-      color: #86efac; font-weight: 700;
+      color: var(--success-soft); font-weight: 700;
     }
 
     /* Welcome modal bullets — same green-check style as .buy-bullets
@@ -742,23 +780,23 @@
     }
     .welcome-bullets li::before {
       content: "✓"; position: absolute; left: 0; top: 0;
-      color: #86efac; font-weight: 700; font-size: 14px;
+      color: var(--success-soft); font-weight: 700; font-size: 14px;
     }
     .welcome-bullets li strong {
-      display: block; font-size: 14px; color: #e2e8f0; font-weight: 600;
+      display: block; font-size: 14px; color: var(--text); font-weight: 600;
       margin-bottom: 2px;
     }
     .welcome-bullets li span {
-      display: block; font-size: 12.5px; color: #94a3b8; line-height: 1.5;
+      display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
     }
     .buy-select-btn {
-      margin-top: auto; background: #1e293b; color: #e2e8f0;
-      border: 1px solid #334155; padding: 11px 16px; border-radius: 9px;
+      margin-top: auto; background: var(--border); color: var(--text);
+      border: 1px solid var(--border-hover); padding: 11px 16px; border-radius: 9px;
       cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.15s;
     }
-    .buy-select-btn:hover { background: #334155; border-color: #475569; }
-    .buy-select-btn-primary { background: #a855f7; border-color: #a855f7; color: #fff; }
-    .buy-select-btn-primary:hover { background: #c084fc; border-color: #c084fc; }
+    .buy-select-btn:hover { background: var(--border-hover); border-color: var(--text-faint); }
+    .buy-select-btn-primary { background: var(--premium); border-color: var(--premium); color: var(--on-accent); }
+    .buy-select-btn-primary:hover { background: var(--premium-hover); border-color: var(--premium-hover); }
 
     /* Self-serve subscription modal — "Pay with Bitcoin" primary pill
        + a muted "Pay by card" link beneath it. */
@@ -771,23 +809,23 @@
     .sub-pay-btc:disabled { opacity: 0.6; cursor: default; }
     .sub-btc-glyph { font-weight: 800; font-size: 15px; line-height: 1; }
     .sub-pay-card {
-      margin-top: 8px; background: transparent; border: none; color: #94a3b8;
+      margin-top: 8px; background: transparent; border: none; color: var(--text-muted);
       font-size: 13px; font-weight: 500; cursor: pointer; padding: 6px 4px;
       text-decoration: underline; text-underline-offset: 3px;
       align-self: center;
     }
-    .sub-pay-card:hover { color: #cbd5e1; }
+    .sub-pay-card:hover { color: var(--text-body); }
     .sub-pay-card:disabled { opacity: 0.5; cursor: default; }
     .sub-card-note {
-      margin-top: 12px; font-size: 12.5px; color: #fcd34d;
+      margin-top: 12px; font-size: 12.5px; color: var(--warning-soft);
       background: rgba(252,211,77,0.08); border: 1px solid rgba(252,211,77,0.22);
       padding: 8px 12px; border-radius: 8px; text-align: center;
     }
     .sub-busy {
-      margin-top: 12px; font-size: 13px; color: #a5b4fc; text-align: center;
+      margin-top: 12px; font-size: 13px; color: var(--accent-hover); text-align: center;
     }
     .sub-foot-hint {
-      margin-top: 16px; font-size: 12px; color: #64748b; line-height: 1.55;
+      margin-top: 16px; font-size: 12px; color: var(--text-label); line-height: 1.55;
       text-align: center;
     }
 
@@ -795,17 +833,17 @@
       text-align: center; padding: 40px 30px; max-width: 480px; margin: 0 auto;
     }
     .buy-polling-spinner { font-size: 40px; margin-bottom: 12px; }
-    .buy-polling h3 { font-size: 18px; font-weight: 700; color: #e2e8f0; margin: 0 0 12px; }
-    .buy-polling p { font-size: 13px; color: #94a3b8; line-height: 1.6; margin: 0 0 24px; }
+    .buy-polling h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
+    .buy-polling p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0 0 24px; }
     .buy-polling-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
     .buy-secondary-btn {
-      background: #1e293b; color: #cbd5e1; border: 1px solid #334155;
+      background: var(--border); color: var(--text-body); border: 1px solid var(--border-hover);
       padding: 8px 16px; border-radius: 8px; cursor: pointer;
       font-size: 12px; font-weight: 600;
     }
-    .buy-secondary-btn:hover { background: #334155; }
+    .buy-secondary-btn:hover { background: var(--border-hover); }
     .buy-poll-error {
-      margin-top: 16px; padding: 10px 14px; font-size: 11px; color: #fca5a5;
+      margin-top: 16px; padding: 10px 14px; font-size: 11px; color: var(--error-soft);
       background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.25);
       border-radius: 8px;
     }
@@ -817,29 +855,29 @@
     }
     .buy-back-link {
       align-self: flex-start; background: transparent; border: none;
-      color: #94a3b8; cursor: pointer; font-size: 12px; font-weight: 600;
+      color: var(--text-muted); cursor: pointer; font-size: 12px; font-weight: 600;
       padding: 4px 0;
     }
-    .buy-back-link:hover { color: #cbd5e1; }
+    .buy-back-link:hover { color: var(--text-body); }
     .buy-discount-tier {
-      background: #111827; border: 1px solid #1e293b; border-radius: 10px;
+      background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
       padding: 16px;
     }
     .buy-discount-tier-name {
-      font-size: 18px; font-weight: 700; color: #e2e8f0; margin-bottom: 4px;
+      font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px;
     }
     .buy-discount-form { display: flex; flex-direction: column; gap: 6px; }
     .buy-discount-label {
-      font-size: 11px; color: #94a3b8; font-weight: 600;
+      font-size: 11px; color: var(--text-muted); font-weight: 600;
       text-transform: uppercase; letter-spacing: 0.05em;
     }
     .buy-discount-input {
       padding: 11px 14px; font-size: 14px; font-family: ui-monospace, monospace;
-      background: #0f172a; border: 1px solid #334155; border-radius: 9px;
-      color: #e2e8f0; text-transform: uppercase; letter-spacing: 0.05em;
+      background: var(--surface-inset); border: 1px solid var(--border-hover); border-radius: 9px;
+      color: var(--text); text-transform: uppercase; letter-spacing: 0.05em;
     }
     .buy-discount-input:focus {
-      outline: none; border-color: #a855f7;
+      outline: none; border-color: var(--premium);
       box-shadow: 0 0 0 3px rgba(168,85,247,0.15);
     }
     .buy-discount-input:disabled { opacity: 0.6; }
@@ -849,102 +887,102 @@
     .buy-discount-actions .buy-select-btn { flex: 1; min-width: 200px; margin-top: 0; }
     .buy-discount-actions .buy-secondary-btn { flex: 0 0 auto; }
     .buy-discount-preview {
-      background: linear-gradient(180deg, rgba(134,239,172,0.08), #0f172a);
+      background: linear-gradient(180deg, rgba(134,239,172,0.08), var(--surface-inset));
       border: 1px solid rgba(134,239,172,0.30); border-radius: 10px;
       padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
     }
     .buy-discount-row {
       display: flex; justify-content: space-between; align-items: baseline;
-      font-size: 13px; color: #cbd5e1;
+      font-size: 13px; color: var(--text-body);
     }
-    .buy-discount-old { color: #64748b; text-decoration: line-through; }
-    .buy-discount-save { color: #86efac; font-weight: 600; }
+    .buy-discount-old { color: var(--text-label); text-decoration: line-through; }
+    .buy-discount-save { color: var(--success-soft); font-weight: 600; }
     .buy-discount-total {
       margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(134,239,172,0.25);
-      font-size: 16px; font-weight: 700; color: #e2e8f0;
+      font-size: 16px; font-weight: 700; color: var(--text);
     }
     .buy-discount-hint {
-      font-size: 11px; color: #64748b; line-height: 1.5; margin-top: 4px;
+      font-size: 11px; color: var(--text-label); line-height: 1.5; margin-top: 4px;
     }
 
     /* Cards */
     .card {
-      background: #111827;
-      border: 1px solid #1e293b;
+      background: var(--surface);
+      border: 1px solid var(--border);
       border-radius: 14px;
       margin-bottom: 14px;
       overflow: hidden;
       transition: border-color 0.2s;
     }
-    .card:hover { border-color: #334155; }
+    .card:hover { border-color: var(--border-hover); }
     .card-body { padding: 18px 22px; }
 
     /* Model buttons */
     .model-grid { display: flex; gap: 8px; flex-wrap: wrap; }
     .model-btn {
       padding: 8px 16px; font-size: 12px; font-weight: 600;
-      border: 1px solid #1e293b; border-radius: 8px; cursor: pointer;
-      transition: all 0.2s; background: #0f172a; color: #64748b;
+      border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
+      transition: all 0.2s; background: var(--surface-inset); color: var(--text-label);
     }
-    .model-btn:hover { border-color: #334155; color: #94a3b8; }
+    .model-btn:hover { border-color: var(--border-hover); color: var(--text-muted); }
     .model-btn.active {
-      background: #818cf8;
-      color: #fff; border-color: transparent;
+      background: var(--accent);
+      color: var(--on-accent); border-color: transparent;
     }
-    .model-note { font-size: 11px; color: #475569; margin-top: 8px; font-style: italic; }
+    .model-note { font-size: 11px; color: var(--text-faint); margin-top: 8px; font-style: italic; }
 
     /* Input row */
     .input-row { display: flex; gap: 10px; }
     .url-input {
       flex: 1; padding: 14px 18px; font-size: 15px;
-      border: 1px solid #334155; border-radius: 10px;
+      border: 1px solid var(--border-hover); border-radius: 10px;
       outline: none; transition: all 0.2s;
-      background: #1e293b; color: #f1f5f9;
+      background: var(--border); color: var(--text-strong);
     }
-    .url-input::placeholder { color: #64748b; }
-    .url-input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,0.15); }
+    .url-input::placeholder { color: var(--text-label); }
+    .url-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(129,140,248,0.15); }
     .submit-btn {
       padding: 14px 30px; font-size: 15px; font-weight: 600;
-      background: #818cf8;
-      color: #fff; border: none; border-radius: 10px;
+      background: var(--accent);
+      color: var(--on-accent); border: none; border-radius: 10px;
       cursor: pointer; transition: all 0.2s; white-space: nowrap;
     }
-    .submit-btn:disabled { background: #1e293b; color: #475569; cursor: not-allowed; }
-    .submit-btn:not(:disabled):hover { background: #a5b4fc; transform: translateY(-1px); }
+    .submit-btn:disabled { background: var(--border); color: var(--text-faint); cursor: not-allowed; }
+    .submit-btn:not(:disabled):hover { background: var(--accent-hover); transform: translateY(-1px); }
 
     /* API key */
     .key-row { display: flex; gap: 8px; margin-bottom: 6px; }
     .key-input {
       flex: 1; padding: 10px 14px; font-size: 13px;
-      border: 1px solid #1e293b; border-radius: 8px; outline: none;
+      border: 1px solid var(--border); border-radius: 8px; outline: none;
       font-family: "SF Mono", Menlo, Consolas, monospace;
-      background: #0f172a; color: #94a3b8;
+      background: var(--surface-inset); color: var(--text-muted);
     }
-    .key-input:focus { border-color: #818cf8; }
+    .key-input:focus { border-color: var(--accent); }
     .key-toggle {
       padding: 10px 14px; font-size: 12px; font-weight: 600;
-      background: #1e293b; color: #94a3b8; border: 1px solid #334155;
+      background: var(--border); color: var(--text-muted); border: 1px solid var(--border-hover);
       border-radius: 8px; cursor: pointer; white-space: nowrap;
     }
-    .key-toggle:hover { background: #334155; }
-    .key-hint { font-size: 11px; color: #475569; margin-top: 4px; }
-    .field-label { font-size: 12px; font-weight: 600; color: #64748b; display: block; margin-bottom: 6px; margin-top: 16px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .key-toggle:hover { background: var(--border-hover); }
+    .key-hint { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
+    .field-label { font-size: 12px; font-weight: 600; color: var(--text-label); display: block; margin-bottom: 6px; margin-top: 16px; text-transform: uppercase; letter-spacing: 0.05em; }
     .field-label:first-child { margin-top: 0; }
 
     /* Status / Error */
     .error-box {
       background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); border-radius: 12px;
-      padding: 16px; margin-bottom: 20px; color: #f87171; font-size: 14px;
+      padding: 16px; margin-bottom: 20px; color: var(--error-text); font-size: 14px;
       line-height: 1.5; white-space: pre-wrap;
     }
     .loading { text-align: center; padding: 48px 20px; }
     .spinner {
       width: 40px; height: 40px;
-      border: 3px solid #1e293b; border-top-color: #818cf8;
+      border: 3px solid var(--border); border-top-color: var(--accent);
       border-radius: 50%; animation: spin 0.8s linear infinite;
       margin: 0 auto 16px;
     }
-    .status-text { color: #94a3b8; font-size: 15px; font-weight: 500; animation: pulse 2s ease-in-out infinite; }
+    .status-text { color: var(--text-muted); font-size: 15px; font-weight: 500; animation: pulse 2s ease-in-out infinite; }
     @keyframes spin { to { transform: rotate(360deg); } }
     @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
 
@@ -953,18 +991,18 @@
     .step {
       display: flex; align-items: center; gap: 6px;
       padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
-      background: #111827; border: 1px solid #1e293b; color: #475569; transition: all 0.3s;
+      background: var(--surface); border: 1px solid var(--border); color: var(--text-faint); transition: all 0.3s;
     }
-    .step.active { border-color: #818cf8; color: #a5b4fc; font-weight: 600; background: rgba(129,140,248,0.08); }
-    .step.done { border-color: #22c55e; color: #4ade80; background: rgba(34,197,94,0.08); }
-    .step-arrow { color: #334155; font-size: 16px; }
+    .step.active { border-color: var(--accent); color: var(--accent-hover); font-weight: 600; background: rgba(129,140,248,0.08); }
+    .step.done { border-color: var(--success); color: var(--success-text); background: rgba(34,197,94,0.08); }
+    .step-arrow { color: var(--border-hover); font-size: 16px; }
     .step-icon { font-size: 16px; }
 
     /* Video embed */
     .video-embed {
       border-radius: 14px; overflow: hidden; margin-bottom: 20px;
       box-shadow: 0 8px 32px rgba(0,0,0,0.4); aspect-ratio: 16/9;
-      border: 1px solid #1e293b;
+      border: 1px solid var(--border);
     }
     .video-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
 
@@ -973,22 +1011,22 @@
       display: flex; justify-content: space-between; align-items: center;
       margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
     }
-    .stats { display: flex; gap: 12px; font-size: 12px; color: #64748b; }
-    .stats strong { color: #e2e8f0; }
+    .stats { display: flex; gap: 12px; font-size: 12px; color: var(--text-label); }
+    .stats strong { color: var(--text); }
     .expand-btn {
       padding: 7px 16px; font-size: 12px; font-weight: 600;
-      background: #1e293b; color: #94a3b8; border: 1px solid #334155;
+      background: var(--border); color: var(--text-muted); border: 1px solid var(--border-hover);
       border-radius: 8px; cursor: pointer; transition: all 0.15s;
     }
-    .expand-btn:hover { background: #334155; color: #e2e8f0; }
+    .expand-btn:hover { background: var(--border-hover); color: var(--text); }
 
     /* Chunk cards — compact */
     .chunk {
-      background: #111827; border: 1px solid #1e293b; border-radius: 10px;
+      background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
       margin-bottom: 6px; overflow: hidden; transition: all 0.2s;
     }
-    .chunk:hover { border-color: #334155; }
-    .chunk.expanded { border-color: #818cf8; background: #0f172a; }
+    .chunk:hover { border-color: var(--border-hover); }
+    .chunk.expanded { border-color: var(--accent); background: var(--surface-inset); }
     .chunk-header {
       width: 100%; padding: 10px 14px; background: none; border: none;
       cursor: pointer; text-align: left; display: flex; gap: 10px;
@@ -997,34 +1035,34 @@
     .chunk-play-btn {
       width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
       display: flex; align-items: center; justify-content: center;
-      background: #1e293b; color: #64748b; border: none; cursor: pointer;
+      background: var(--border); color: var(--text-label); border: none; cursor: pointer;
       transition: all 0.15s; font-size: 12px; margin-top: 1px;
     }
-    .chunk-play-btn:hover { background: #818cf8; color: #fff; }
-    .chunk.now-playing .chunk-play-btn { background: #22c55e; color: #fff; }
+    .chunk-play-btn:hover { background: var(--accent); color: var(--on-accent); }
+    .chunk.now-playing .chunk-play-btn { background: var(--success); color: var(--on-accent); }
     .chunk-info { flex: 1; min-width: 0; }
     .chunk-title-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
     .chunk-title {
-      font-size: 13px; font-weight: 650; color: #f1f5f9; line-height: 1.3;
+      font-size: 13px; font-weight: 600; color: var(--text-strong); line-height: 1.3;
     }
     .chunk-time {
-      font-size: 10px; color: #475569; font-weight: 500;
+      font-size: 10px; color: var(--text-faint); font-weight: 500;
       font-family: "SF Mono", Menlo, monospace; white-space: nowrap;
     }
     .chunk-summary {
-      margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: #94a3b8;
+      margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted);
     }
     .chunk-arrow {
-      font-size: 22px; color: #475569; transition: transform 0.2s; flex-shrink: 0;
+      font-size: 22px; color: var(--text-faint); transition: transform 0.2s; flex-shrink: 0;
       padding: 4px 8px; border-radius: 6px; line-height: 1;
     }
-    .chunk-arrow:hover { background: #1e293b; color: #818cf8; }
-    .chunk.expanded .chunk-arrow { transform: rotate(180deg); color: #818cf8; }
+    .chunk-arrow:hover { background: var(--border); color: var(--accent); }
+    .chunk.expanded .chunk-arrow { transform: rotate(180deg); color: var(--accent); }
 
     .chunk-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
     .chunk.expanded .chunk-body { max-height: 15000px; }
     .chunk-body-inner {
-      padding: 0 14px 12px 52px; border-top: 1px solid #1e293b; padding-top: 12px;
+      padding: 0 14px 12px 52px; border-top: 1px solid var(--border); padding-top: 12px;
     }
     .transcript-line {
       display: flex; gap: 10px; align-items: flex-start; padding: 5px 8px;
@@ -1033,19 +1071,19 @@
     }
     .transcript-line:hover { background: rgba(129,140,248,0.06); }
     .ts-badge {
-      font-size: 11px; font-family: "SF Mono", Menlo, monospace; color: #818cf8;
+      font-size: 11px; font-family: "SF Mono", Menlo, monospace; color: var(--accent);
       min-width: 52px; padding-top: 2px;
       font-weight: 500; white-space: nowrap; flex-shrink: 0;
     }
-    .transcript-text { font-size: 13px; line-height: 1.55; color: #cbd5e1; }
+    .transcript-text { font-size: 13px; line-height: 1.55; color: var(--text-body); }
 
     /* Active transcript line (synced to playback) */
     .transcript-line.active-line {
-      background: rgba(129,140,248,0.08); border-left: 2px solid #818cf8;
+      background: rgba(129,140,248,0.08); border-left: 2px solid var(--accent);
       padding-left: 6px;
     }
-    .transcript-line.active-line .ts-badge { color: #a5b4fc; font-weight: 600; }
-    .transcript-line.active-line .transcript-text { color: #f1f5f9; }
+    .transcript-line.active-line .ts-badge { color: var(--accent-hover); font-weight: 600; }
+    .transcript-line.active-line .transcript-text { color: var(--text-strong); }
 
     /* Speaker chip — small colored circle + letter shown beside each
        transcript line that has a diarization-assigned speaker. The
@@ -1064,14 +1102,14 @@
     .speaker-chip.low-conf::after {
       content: "?"; margin-left: 1px; opacity: 0.7; font-weight: 500;
     }
-    .speaker-chip.chip-a { background: rgba(239,68,68,0.18); color: #fca5a5; border: 1px solid rgba(239,68,68,0.35); }
-    .speaker-chip.chip-b { background: rgba(59,130,246,0.18); color: #93c5fd; border: 1px solid rgba(59,130,246,0.35); }
-    .speaker-chip.chip-c { background: rgba(34,197,94,0.18); color: #86efac; border: 1px solid rgba(34,197,94,0.35); }
-    .speaker-chip.chip-d { background: rgba(245,158,11,0.18); color: #fcd34d; border: 1px solid rgba(245,158,11,0.35); }
-    .speaker-chip.chip-e { background: rgba(168,85,247,0.18); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.35); }
+    .speaker-chip.chip-a { background: rgba(239,68,68,0.18); color: var(--error-soft); border: 1px solid rgba(239,68,68,0.35); }
+    .speaker-chip.chip-b { background: rgba(59,130,246,0.18); color: var(--info-soft); border: 1px solid rgba(59,130,246,0.35); }
+    .speaker-chip.chip-c { background: rgba(34,197,94,0.18); color: var(--success-soft); border: 1px solid rgba(34,197,94,0.35); }
+    .speaker-chip.chip-d { background: rgba(245,158,11,0.18); color: var(--warning-soft); border: 1px solid rgba(245,158,11,0.35); }
+    .speaker-chip.chip-e { background: rgba(168,85,247,0.18); color: var(--premium-text-soft); border: 1px solid rgba(168,85,247,0.35); }
     .speaker-chip.chip-f { background: rgba(14,165,233,0.18); color: #7dd3fc; border: 1px solid rgba(14,165,233,0.35); }
     .speaker-chip.chip-g { background: rgba(236,72,153,0.18); color: #f9a8d4; border: 1px solid rgba(236,72,153,0.35); }
-    .speaker-chip.chip-h { background: rgba(100,116,139,0.18); color: #cbd5e1; border: 1px solid rgba(100,116,139,0.35); }
+    .speaker-chip.chip-h { background: rgba(100,116,139,0.18); color: var(--text-body); border: 1px solid rgba(100,116,139,0.35); }
 
     /* Speaker legend — appears above the chunks list when diarization
        has produced a speaker map. Each row: colored chip + speaker
@@ -1081,11 +1119,11 @@
       display: flex; flex-wrap: wrap; gap: 8px;
       padding: 8px 12px; margin: 0 0 10px;
       background: rgba(15,23,42,0.5);
-      border: 1px solid #1e293b; border-radius: 8px;
-      font-size: 11px; color: #cbd5e1;
+      border: 1px solid var(--border); border-radius: 8px;
+      font-size: 11px; color: var(--text-body);
     }
     .speakers-legend-title {
-      font-size: 10px; font-weight: 600; color: #64748b;
+      font-size: 10px; font-weight: 600; color: var(--text-label);
       text-transform: uppercase; letter-spacing: 0.06em;
       padding-top: 3px;
       margin-right: 4px;
@@ -1094,11 +1132,11 @@
       display: inline-flex; align-items: center; gap: 6px;
       padding: 3px 8px;
       background: rgba(255,255,255,0.03);
-      border: 1px solid #1e293b; border-radius: 16px;
+      border: 1px solid var(--border); border-radius: 16px;
       font-size: 11px;
     }
     .speakers-legend-item .legend-stats {
-      color: #64748b; font-size: 10px;
+      color: var(--text-label); font-size: 10px;
       font-variant-numeric: tabular-nums;
     }
 
@@ -1115,7 +1153,7 @@
     .clip-badge {
       display: inline-flex; align-items: center; gap: 4px;
       padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
-      background: rgba(129,140,248,0.1); color: #a5b4fc; cursor: pointer;
+      background: rgba(129,140,248,0.1); color: var(--accent-hover); cursor: pointer;
       border: 1px solid rgba(129,140,248,0.2); transition: all 0.15s;
     }
     .clip-badge:hover { background: rgba(129,140,248,0.2); }
@@ -1126,25 +1164,25 @@
       font-size: 13px; display: flex; align-items: center;
       justify-content: space-between; gap: 10px; flex-wrap: wrap;
     }
-    .ytdlp-ok { background: rgba(34,197,94,0.08); color: #4ade80; border: 1px solid rgba(34,197,94,0.15); }
-    .ytdlp-warn { background: rgba(251,191,36,0.08); color: #fbbf24; border: 1px solid rgba(251,191,36,0.15); }
-    .ytdlp-err { background: rgba(239,68,68,0.08); color: #f87171; border: 1px solid rgba(239,68,68,0.15); }
+    .ytdlp-ok { background: rgba(34,197,94,0.08); color: var(--success-text); border: 1px solid rgba(34,197,94,0.15); }
+    .ytdlp-warn { background: rgba(251,191,36,0.08); color: var(--warning); border: 1px solid rgba(251,191,36,0.15); }
+    .ytdlp-err { background: rgba(239,68,68,0.08); color: var(--error-text); border: 1px solid rgba(239,68,68,0.15); }
     .update-btn {
       padding: 6px 14px; font-size: 12px; font-weight: 600;
       border: none; border-radius: 6px; cursor: pointer;
-      background: #f59e0b; color: #0f172a; transition: all 0.15s;
+      background: var(--warning-deep); color: var(--surface-inset); transition: all 0.15s;
     }
-    .update-btn:hover { background: #fbbf24; }
-    .update-btn:disabled { background: #334155; color: #64748b; cursor: not-allowed; }
+    .update-btn:hover { background: var(--warning); }
+    .update-btn:disabled { background: var(--border-hover); color: var(--text-label); cursor: not-allowed; }
 
     /* Activity log entries (shared between drawer) */
     .log-entry { display: flex; gap: 10px; }
-    .log-time { color: #334155; min-width: 52px; text-align: right; flex-shrink: 0; }
-    .log-msg { color: #64748b; }
-    .log-detail { color: #334155; }
-    .log-entry.error .log-msg { color: #f87171; }
-    .log-entry.done .log-msg { color: #4ade80; font-weight: 600; }
-    .log-entry.cost .log-msg { color: #fbbf24; }
+    .log-time { color: var(--border-hover); min-width: 52px; text-align: right; flex-shrink: 0; }
+    .log-msg { color: var(--text-label); }
+    .log-detail { color: var(--border-hover); }
+    .log-entry.error .log-msg { color: var(--error-text); }
+    .log-entry.done .log-msg { color: var(--success-text); font-weight: 600; }
+    .log-entry.cost .log-msg { color: var(--warning); }
 
     /* Log drawer (slide-out panel) */
     .log-drawer-overlay {
@@ -1153,16 +1191,16 @@
     }
     .log-drawer {
       position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw;
-      background: #0a0e17; border-left: 1px solid #1e293b;
+      background: var(--bg); border-left: 1px solid var(--border);
       z-index: 1001; display: flex; flex-direction: column;
       animation: slideIn 0.2s ease; box-shadow: -8px 0 32px rgba(0,0,0,0.4);
     }
     @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
     .log-drawer-header {
       padding: 16px 20px; display: flex; justify-content: space-between;
-      align-items: center; border-bottom: 1px solid #1e293b; flex-shrink: 0;
+      align-items: center; border-bottom: 1px solid var(--border); flex-shrink: 0;
     }
-    .log-drawer-header h2 { font-size: 14px; font-weight: 700; color: #e2e8f0; }
+    .log-drawer-header h2 { font-size: 14px; font-weight: 700; color: var(--text); }
     .log-drawer-body {
       flex: 1; overflow-y: auto; padding: 12px 16px;
       font-family: "SF Mono", "Fira Code", Menlo, Consolas, monospace;
@@ -1170,15 +1208,15 @@
     }
     .log-drawer-body::-webkit-scrollbar { width: 6px; }
     .log-drawer-body::-webkit-scrollbar-track { background: transparent; }
-    .log-drawer-body::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
-    .log-empty { color: #334155; text-align: center; padding: 40px 20px; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+    .log-drawer-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    .log-empty { color: var(--border-hover); text-align: center; padding: 40px 20px; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
 
     /* Glow effect on active elements */
     .submit-btn:not(:disabled) { box-shadow: 0 4px 24px rgba(129,140,248,0.3); }
     .chunk.expanded { box-shadow: 0 2px 16px rgba(129,140,248,0.06); }
 
     /* Now-playing indicator */
-    .chunk.now-playing { border-color: #22c55e; }
+    .chunk.now-playing { border-color: var(--success); }
 
     /* ── Audio-first "Listen" player (Phase 3) ──────────────────────── */
     .rp-overlay {
@@ -1188,59 +1226,59 @@
     }
     .rp-overlay[hidden] { display: none; }
     .rp-panel {
-      width: 100%; max-width: 460px; background: #0b1120;
-      border: 1px solid #1e293b; border-radius: 18px; padding: 20px;
+      width: 100%; max-width: 460px; background: var(--bg);
+      border: 1px solid var(--border); border-radius: 18px; padding: 20px;
       box-shadow: 0 20px 60px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 16px;
     }
     .rp-head { display: flex; align-items: center; gap: 10px; }
-    .rp-source-title { flex: 1; min-width: 0; font-size: 12px; color: #64748b;
+    .rp-source-title { flex: 1; min-width: 0; font-size: 12px; color: var(--text-label);
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .rp-close { background: transparent; border: none; color: #64748b; font-size: 20px;
+    .rp-close { background: transparent; border: none; color: var(--text-label); font-size: 20px;
       cursor: pointer; line-height: 1; padding: 4px; }
-    .rp-close:hover { color: #e2e8f0; }
+    .rp-close:hover { color: var(--text); }
     .rp-now { text-align: center; min-height: 150px; display: flex; flex-direction: column; gap: 8px; }
-    .rp-topic-counter { font-size: 12px; color: #818cf8; font-weight: 600; letter-spacing: 0.04em; }
-    .rp-topic-title { font-size: 20px; font-weight: 700; color: #f1f5f9; line-height: 1.25; }
-    .rp-status { font-size: 12px; color: #94a3b8; min-height: 14px; }
-    .rp-summary { font-size: 13px; color: #cbd5e1; line-height: 1.5; max-height: 160px;
+    .rp-topic-counter { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 0.04em; }
+    .rp-topic-title { font-size: 20px; font-weight: 700; color: var(--text-strong); line-height: 1.25; }
+    .rp-status { font-size: 12px; color: var(--text-muted); min-height: 14px; }
+    .rp-summary { font-size: 13px; color: var(--text-body); line-height: 1.5; max-height: 160px;
       overflow-y: auto; text-align: left; }
     .rp-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
-    .rp-dot { width: 9px; height: 9px; border-radius: 50%; background: #1e293b; transition: background 0.2s; }
-    .rp-dot.ready { background: #334155; }
+    .rp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); transition: background 0.2s; }
+    .rp-dot.ready { background: var(--border-hover); }
     .rp-dot.failed { background: #7f1d1d; }
-    .rp-dot.active { background: #22c55e; transform: scale(1.25); }
+    .rp-dot.active { background: var(--success); transform: scale(1.25); }
     .rp-deeper {
-      width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #6366f1;
-      background: #4f46e5; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
+      width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--accent);
+      background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 600; cursor: pointer;
     }
-    .rp-deeper:hover { background: #4338ca; }
-    .rp-deeper.rp-resume { background: #0f172a; border-color: #334155; color: #e2e8f0; }
-    .rp-keep { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #94a3b8; cursor: pointer; }
-    .rp-keep input { accent-color: #818cf8; }
+    .rp-deeper:hover { background: var(--accent-hover); }
+    .rp-deeper.rp-resume { background: var(--surface-inset); border-color: var(--border-hover); color: var(--text); }
+    .rp-keep { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
+    .rp-keep input { accent-color: var(--accent); }
     .rp-controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
     .rp-ctrl {
-      width: 52px; height: 52px; border-radius: 50%; border: 1px solid #1e293b;
-      background: #0f172a; color: #e2e8f0; font-size: 18px; cursor: pointer;
+      width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border);
+      background: var(--surface-inset); color: var(--text); font-size: 18px; cursor: pointer;
       display: flex; align-items: center; justify-content: center;
     }
-    .rp-ctrl:hover { border-color: #334155; background: #1e293b; }
-    .rp-ctrl.rp-play { width: 64px; height: 64px; background: #22c55e; border-color: #22c55e; color: #04210f; font-size: 24px; }
-    .rp-ctrl.rp-play:hover { background: #16a34a; }
+    .rp-ctrl:hover { border-color: var(--border-hover); background: var(--border); }
+    .rp-ctrl.rp-play { width: 64px; height: 64px; background: var(--success); border-color: var(--success); color: #04210f; font-size: 24px; }
+    .rp-ctrl.rp-play:hover { background: var(--success-deep); }
     .rp-ctrl.rp-play svg { display: block; }
     .rp-ctrl.rp-speed { width: 48px; height: 48px; font-size: 13px; font-weight: 700; }
-    .rp-listen-btn { color: #a5b4fc !important; border-color: #312e81 !important; }
+    .rp-listen-btn { color: var(--accent-hover) !important; border-color: var(--border) !important; }
     /* Deep-dive source transcript (follow-along) */
     .rp-transcript { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 2px 0; -webkit-overflow-scrolling: touch; }
     .rp-transcript[hidden] { display: none; }
-    .rp-tline { display: block; width: 100%; text-align: left; background: transparent; border: none; color: #94a3b8; font-size: 12.5px; line-height: 1.5; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
-    .rp-tline:hover { background: rgba(129,140,248,0.08); color: #cbd5e1; }
-    .rp-tline-active { background: rgba(34,197,94,0.14); color: #f1f5f9; }
-    .rp-tts { color: #64748b; font-variant-numeric: tabular-nums; margin-right: 6px; font-size: 11px; }
+    .rp-tline { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
+    .rp-tline:hover { background: rgba(129,140,248,0.08); color: var(--text-body); }
+    .rp-tline-active { background: rgba(34,197,94,0.14); color: var(--text-strong); }
+    .rp-tts { color: var(--text-label); font-variant-numeric: tabular-nums; margin-right: 6px; font-size: 11px; }
 
     /* History sidebar — persistent, pushes content */
     .history-sidebar {
       position: fixed; top: 0; left: 0; bottom: 0; width: 320px;
-      background: #0a0e17; border-right: 1px solid #1e293b;
+      background: var(--bg); border-right: 1px solid var(--border);
       z-index: 50; display: flex; flex-direction: column;
     }
     .history-sidebar.animate-in {
@@ -1266,52 +1304,52 @@
     }
     .history-header {
       padding: 14px 16px; display: flex; justify-content: space-between;
-      align-items: center; border-bottom: 1px solid #1e293b; flex-shrink: 0;
+      align-items: center; border-bottom: 1px solid var(--border); flex-shrink: 0;
     }
-    .history-header h2 { font-size: 14px; font-weight: 700; color: #e2e8f0; }
+    .history-header h2 { font-size: 14px; font-weight: 700; color: var(--text); }
     .history-actions { display: flex; gap: 6px; }
     .history-action-btn {
-      width: 30px; height: 30px; border-radius: 7px; border: 1px solid #1e293b;
-      background: none; color: #64748b; cursor: pointer;
+      width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border);
+      background: none; color: var(--text-label); cursor: pointer;
       display: flex; align-items: center; justify-content: center; transition: all 0.15s;
     }
-    .history-action-btn:hover { background: #1e293b; color: #94a3b8; }
+    .history-action-btn:hover { background: var(--border); color: var(--text-muted); }
     .history-list {
       flex: 1; overflow-y: auto; padding: 8px;
     }
     .history-list::-webkit-scrollbar { width: 6px; }
     .history-list::-webkit-scrollbar-track { background: transparent; }
-    .history-list::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
+    .history-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 
     /* Folders */
     .history-folder { margin-bottom: 4px; }
     .history-folder-header {
       display: flex; align-items: center; gap: 8px; padding: 8px 10px;
       border-radius: 8px; cursor: pointer; border: none; background: none;
-      width: 100%; text-align: left; color: #94a3b8; font-size: 12px;
+      width: 100%; text-align: left; color: var(--text-muted); font-size: 12px;
       font-weight: 600; transition: background 0.15s;
     }
     .history-folder-header:hover { background: rgba(255,255,255,0.03); }
-    .folder-arrow { font-size: 10px; color: #475569; transition: transform 0.2s; width: 12px; text-align: center; }
+    .folder-arrow { font-size: 10px; color: var(--text-faint); transition: transform 0.2s; width: 12px; text-align: center; }
     .folder-arrow.open { transform: rotate(90deg); }
     .folder-icon { font-size: 14px; }
     .folder-name { flex: 1; }
-    .folder-count { color: #334155; font-size: 11px; font-weight: 500; }
+    .folder-count { color: var(--border-hover); font-size: 11px; font-weight: 500; }
     .folder-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
     .history-folder-header:hover .folder-actions { opacity: 1; }
     .folder-action {
       width: 22px; height: 22px; border-radius: 4px; border: none;
-      background: none; color: #475569; cursor: pointer;
+      background: none; color: var(--text-faint); cursor: pointer;
       display: flex; align-items: center; justify-content: center; font-size: 11px;
     }
-    .folder-action:hover { background: rgba(255,255,255,0.06); color: #94a3b8; }
-    .folder-action.danger:hover { background: rgba(239,68,68,0.15); color: #f87171; }
+    .folder-action:hover { background: rgba(255,255,255,0.06); color: var(--text-muted); }
+    .folder-action.danger:hover { background: rgba(239,68,68,0.15); color: var(--error-text); }
     .folder-items { padding-left: 12px; }
     .folder-items.collapsed { display: none; }
     .folder-drop-zone {
       height: 2px; margin: 2px 0; border-radius: 1px; transition: all 0.15s;
     }
-    .folder-drop-zone.drag-over { height: 4px; background: #818cf8; margin: 4px 0; }
+    .folder-drop-zone.drag-over { height: 4px; background: var(--accent); margin: 4px 0; }
 
     /* History items */
     .history-item {
@@ -1323,52 +1361,52 @@
     .history-item:hover { background: rgba(255,255,255,0.04); }
     .history-item.active { background: rgba(129,140,248,0.1); border-color: rgba(129,140,248,0.2); }
     .history-item.dragging { opacity: 0.3; }
-    .history-item.drop-above { box-shadow: 0 -2px 0 0 #818cf8; }
-    .history-item.drop-below { box-shadow: 0 2px 0 0 #818cf8; }
+    .history-item.drop-above { box-shadow: 0 -2px 0 0 var(--accent); }
+    .history-item.drop-below { box-shadow: 0 2px 0 0 var(--accent); }
     .history-thumb {
       width: 44px; height: 33px; border-radius: 4px; flex-shrink: 0;
-      background: #1e293b; overflow: hidden;
+      background: var(--border); overflow: hidden;
     }
     .history-thumb img { width: 100%; height: 100%; object-fit: cover; }
     .history-info { flex: 1; min-width: 0; }
     .history-title {
-      font-size: 12px; font-weight: 600; color: #e2e8f0; line-height: 1.3;
+      font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
-    .history-meta { font-size: 10px; color: #475569; margin-top: 1px; }
+    .history-meta { font-size: 10px; color: var(--text-faint); margin-top: 1px; }
     .history-delete {
       width: 24px; height: 24px; border-radius: 5px; border: none;
-      background: none; color: #475569; cursor: pointer; flex-shrink: 0;
+      background: none; color: var(--text-faint); cursor: pointer; flex-shrink: 0;
       display: flex; align-items: center; justify-content: center;
       transition: all 0.15s; opacity: 0;
     }
     .history-item:hover .history-delete { opacity: 1; }
-    .history-delete:hover { background: rgba(239,68,68,0.15); color: #f87171; }
+    .history-delete:hover { background: rgba(239,68,68,0.15); color: var(--error-text); }
     .history-action-small {
       width: 24px; height: 24px; border-radius: 5px; border: none;
-      background: none; color: #475569; cursor: pointer; flex-shrink: 0;
+      background: none; color: var(--text-faint); cursor: pointer; flex-shrink: 0;
       display: flex; align-items: center; justify-content: center;
       transition: all 0.15s; opacity: 0;
     }
     .history-item:hover .history-action-small { opacity: 1; }
-    .history-action-small:hover { background: rgba(129,140,248,0.15); color: #818cf8; }
+    .history-action-small:hover { background: rgba(129,140,248,0.15); color: var(--accent); }
 
     .history-section-label {
-      font-size: 10px; font-weight: 700; color: #334155; text-transform: uppercase;
+      font-size: 10px; font-weight: 700; color: var(--border-hover); text-transform: uppercase;
       letter-spacing: 0.06em; padding: 12px 10px 4px; }
     .history-empty {
-      color: #334155; text-align: center; padding: 40px 20px; font-size: 13px;
+      color: var(--border-hover); text-align: center; padding: 40px 20px; font-size: 13px;
     }
     /* Folder name edit */
     .folder-name-input {
-      background: #0f172a; border: 1px solid #818cf8; border-radius: 4px;
-      color: #e2e8f0; font-size: 12px; font-weight: 600; padding: 2px 6px;
+      background: var(--surface-inset); border: 1px solid var(--accent); border-radius: 4px;
+      color: var(--text); font-size: 12px; font-weight: 600; padding: 2px 6px;
       outline: none; width: 100%;
     }
     /* Session title edit */
     .history-title-input {
-      background: #0f172a; border: 1px solid #818cf8; border-radius: 3px;
-      color: #e2e8f0; font-size: 12px; font-weight: 600; padding: 1px 4px;
+      background: var(--surface-inset); border: 1px solid var(--accent); border-radius: 3px;
+      color: var(--text); font-size: 12px; font-weight: 600; padding: 1px 4px;
       outline: none; width: 100%;
     }
 
@@ -1376,40 +1414,40 @@
     .queue-section { margin-top: 10px; }
     .queue-item {
       display: flex; align-items: center; gap: 8px; padding: 8px 14px;
-      background: #0f172a; border: 1px solid #1e293b; border-radius: 8px;
-      margin-bottom: 6px; font-size: 13px; color: #94a3b8; transition: all 0.15s;
+      background: var(--surface-inset); border: 1px solid var(--border); border-radius: 8px;
+      margin-bottom: 6px; font-size: 13px; color: var(--text-muted); transition: all 0.15s;
     }
-    .queue-item.processing { border-color: #818cf8; background: rgba(129,140,248,0.06); }
+    .queue-item.processing { border-color: var(--accent); background: rgba(129,140,248,0.06); }
     .queue-item .queue-pos {
-      width: 22px; height: 22px; border-radius: 6px; background: #1e293b;
+      width: 22px; height: 22px; border-radius: 6px; background: var(--border);
       display: flex; align-items: center; justify-content: center;
-      font-size: 11px; font-weight: 700; color: #475569; flex-shrink: 0;
+      font-size: 11px; font-weight: 700; color: var(--text-faint); flex-shrink: 0;
     }
-    .queue-item.processing .queue-pos { background: #818cf8; color: #fff; }
+    .queue-item.processing .queue-pos { background: var(--accent); color: var(--on-accent); }
     .queue-item .queue-url {
       flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
       text-overflow: ellipsis; font-family: "SF Mono", Menlo, monospace; font-size: 12px;
     }
-    .queue-item .queue-status { font-size: 11px; color: #475569; flex-shrink: 0; }
-    .queue-item.processing .queue-status { color: #a5b4fc; }
+    .queue-item .queue-status { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
+    .queue-item.processing .queue-status { color: var(--accent-hover); }
     .queue-remove {
       width: 22px; height: 22px; border-radius: 5px; border: none;
-      background: none; color: #475569; cursor: pointer; flex-shrink: 0;
+      background: none; color: var(--text-faint); cursor: pointer; flex-shrink: 0;
       display: flex; align-items: center; justify-content: center;
       transition: all 0.15s; opacity: 0;
     }
     .queue-item:hover .queue-remove { opacity: 1; }
     .queue-item.processing .queue-remove { display: none; }
-    .queue-remove:hover { background: rgba(239,68,68,0.15); color: #f87171; }
-    .queue-label { font-size: 11px; color: #475569; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .queue-remove:hover { background: rgba(239,68,68,0.15); color: var(--error-text); }
+    .queue-label { font-size: 11px; color: var(--text-faint); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
     .queue-item .queue-from {
-      font-size: 10px; color: #818cf8; background: rgba(129,140,248,0.1);
+      font-size: 10px; color: var(--accent); background: rgba(129,140,248,0.1);
       padding: 1px 6px; border-radius: 4px; flex-shrink: 0; white-space: nowrap;
     }
-    .queue-item.pending-approval { border-color: #334155; border-style: dashed; background: rgba(129,140,248,0.03); }
+    .queue-item.pending-approval { border-color: var(--border-hover); border-style: dashed; background: rgba(129,140,248,0.03); }
     .queue-item .queue-title {
       flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
-      text-overflow: ellipsis; font-size: 12px; color: #cbd5e1;
+      text-overflow: ellipsis; font-size: 12px; color: var(--text-body);
     }
     .queue-item .queue-actions { display: flex; gap: 4px; flex-shrink: 0; }
     .queue-approve, .queue-reject {
@@ -1417,16 +1455,16 @@
       cursor: pointer; display: flex; align-items: center; justify-content: center;
       transition: all 0.15s; font-size: 14px;
     }
-    .queue-approve { background: rgba(34,197,94,0.12); color: #4ade80; }
-    .queue-approve:hover { background: rgba(34,197,94,0.25); color: #86efac; }
-    .queue-reject { background: rgba(239,68,68,0.1); color: #f87171; }
-    .queue-reject:hover { background: rgba(239,68,68,0.2); color: #fca5a5; }
+    .queue-approve { background: rgba(34,197,94,0.12); color: var(--success-text); }
+    .queue-approve:hover { background: rgba(34,197,94,0.25); color: var(--success-soft); }
+    .queue-reject { background: rgba(239,68,68,0.1); color: var(--error-text); }
+    .queue-reject:hover { background: rgba(239,68,68,0.2); color: var(--error-soft); }
     .queue-approve-all {
-      font-size: 10px; color: #818cf8; background: rgba(129,140,248,0.1);
+      font-size: 10px; color: var(--accent); background: rgba(129,140,248,0.1);
       border: none; border-radius: 4px; padding: 2px 8px; cursor: pointer;
       transition: all 0.15s; font-weight: 600; letter-spacing: 0.02em;
     }
-    .queue-approve-all:hover { background: rgba(129,140,248,0.2); color: #a5b4fc; }
+    .queue-approve-all:hover { background: rgba(129,140,248,0.2); color: var(--accent-hover); }
 
     /* Toast notifications */
     .toast-container {
@@ -1434,8 +1472,8 @@
       display: flex; flex-direction: column; gap: 8px; pointer-events: none;
     }
     .toast {
-      background: #1e293b; border: 1px solid #334155; border-radius: 10px;
-      padding: 10px 16px; color: #e2e8f0; font-size: 13px;
+      background: var(--border); border: 1px solid var(--border-hover); border-radius: 10px;
+      padding: 10px 16px; color: var(--text); font-size: 13px;
       display: flex; align-items: center; gap: 8px;
       box-shadow: 0 8px 24px rgba(0,0,0,0.3);
       animation: toastIn 0.25s ease;
@@ -1448,43 +1486,43 @@
     @keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }
 
     /* Subscriptions */
-    .sub-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid #1e293b; }
+    .sub-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
     .sub-add-row { display: flex; gap: 8px; margin-bottom: 10px; }
     .sub-add-row input {
       flex: 1; padding: 9px 12px; font-size: 12px;
-      border: 1px solid #1e293b; border-radius: 8px; outline: none;
-      background: #0f172a; color: #e2e8f0;
+      border: 1px solid var(--border); border-radius: 8px; outline: none;
+      background: var(--surface-inset); color: var(--text);
     }
-    .sub-add-row input:focus { border-color: #818cf8; }
-    .sub-add-row input::placeholder { color: #475569; }
+    .sub-add-row input:focus { border-color: var(--accent); }
+    .sub-add-row input::placeholder { color: var(--text-faint); }
     .sub-add-btn {
       padding: 9px 16px; font-size: 12px; font-weight: 600;
-      background: #818cf8;
-      color: #fff; border: none; border-radius: 8px; cursor: pointer;
+      background: var(--accent);
+      color: var(--on-accent); border: none; border-radius: 8px; cursor: pointer;
       white-space: nowrap; transition: all 0.15s;
     }
-    .sub-add-btn:disabled { background: #1e293b; color: #475569; cursor: not-allowed; }
-    .sub-add-btn:not(:disabled):hover { background: #a5b4fc; }
+    .sub-add-btn:disabled { background: var(--border); color: var(--text-faint); cursor: not-allowed; }
+    .sub-add-btn:not(:disabled):hover { background: var(--accent-hover); }
     .sub-item {
       display: flex; align-items: center; gap: 10px; padding: 10px 12px;
-      background: #0f172a; border: 1px solid #1e293b; border-radius: 8px;
+      background: var(--surface-inset); border: 1px solid var(--border); border-radius: 8px;
       margin-bottom: 6px; transition: all 0.15s;
     }
     .sub-item.paused { opacity: 0.5; }
     .sub-icon { font-size: 16px; flex-shrink: 0; }
     .sub-info { flex: 1; min-width: 0; }
-    .sub-name { font-size: 13px; font-weight: 600; color: #e2e8f0; }
-    .sub-meta { font-size: 10px; color: #475569; margin-top: 1px; position: relative; }
+    .sub-name { font-size: 13px; font-weight: 600; color: var(--text); }
+    .sub-meta { font-size: 10px; color: var(--text-faint); margin-top: 1px; position: relative; }
     .sub-actions { display: flex; gap: 4px; }
     .sub-action {
-      width: 28px; height: 28px; border-radius: 6px; border: 1px solid #1e293b;
-      background: none; color: #64748b; cursor: pointer;
+      width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
+      background: none; color: var(--text-label); cursor: pointer;
       display: flex; align-items: center; justify-content: center;
       transition: all 0.15s; font-size: 13px;
     }
-    .sub-action:hover { background: #1e293b; color: #94a3b8; }
-    .sub-action.danger:hover { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); }
-    .sub-empty { font-size: 12px; color: #334155; text-align: center; padding: 16px; }
+    .sub-action:hover { background: var(--border); color: var(--text-muted); }
+    .sub-action.danger:hover { background: rgba(239,68,68,0.15); color: var(--error-text); border-color: rgba(239,68,68,0.3); }
+    .sub-empty { font-size: 12px; color: var(--border-hover); text-align: center; padding: 16px; }
 
     /* Server status indicator */
     .server-status {
@@ -1498,26 +1536,26 @@
       transition: background 0.3s;
     }
     .server-status.connected {
-      background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.2);
+      background: rgba(34,197,94,0.1); color: var(--success-text); border: 1px solid rgba(34,197,94,0.2);
     }
-    .server-status.connected .status-dot { background: #4ade80; }
+    .server-status.connected .status-dot { background: var(--success-text); }
     .server-status.sleeping {
-      background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2);
+      background: rgba(251,191,36,0.1); color: var(--warning); border: 1px solid rgba(251,191,36,0.2);
     }
-    .server-status.sleeping .status-dot { background: #fbbf24; }
+    .server-status.sleeping .status-dot { background: var(--warning); }
     .server-status.disconnected {
-      background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2);
+      background: rgba(239,68,68,0.1); color: var(--error-text); border: 1px solid rgba(239,68,68,0.2);
     }
-    .server-status.disconnected .status-dot { background: #f87171; }
+    .server-status.disconnected .status-dot { background: var(--error-text); }
     @keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
 
     /* Skeleton loading cards */
     .skeleton-chunk {
-      background: #111827; border: 1px solid #1e293b; border-radius: 10px;
+      background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
       margin-bottom: 6px; padding: 12px 14px; overflow: hidden;
     }
     .skeleton-line {
-      height: 12px; border-radius: 4px; background: #1e293b; margin-bottom: 8px;
+      height: 12px; border-radius: 4px; background: var(--border); margin-bottom: 8px;
       position: relative; overflow: hidden;
     }
     .skeleton-line::after {
@@ -1531,66 +1569,66 @@
     .skeleton-line.short { width: 40%; }
     .loading-status-bar {
       display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
-      padding: 10px 14px; background: #111827; border: 1px solid #1e293b;
+      padding: 10px 14px; background: var(--surface); border: 1px solid var(--border);
       border-radius: 10px;
     }
     .loading-status-bar .spinner-sm {
-      width: 18px; height: 18px; border: 2px solid #1e293b; border-top-color: #818cf8;
+      width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent);
       border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0;
     }
-    .loading-status-bar .status-msg { font-size: 12px; color: #94a3b8; font-weight: 500; }
+    .loading-status-bar .status-msg { font-size: 12px; color: var(--text-muted); font-weight: 500; }
     .server-status.sleeping .status-dot { animation: pulse-dot 2s ease-in-out infinite; }
 
     /* ── Keysat activation + license UI ───────────────────────────── */
     .activation-screen {
       position: fixed; inset: 0; z-index: 9999;
-      background: radial-gradient(ellipse at top, #1e293b 0%, #0a0e1a 60%);
+      background: radial-gradient(ellipse at top, var(--border) 0%, var(--bg) 60%);
       display: flex; align-items: center; justify-content: center;
       padding: 24px; overflow-y: auto;
     }
     .activation-card {
       width: 100%; max-width: 480px;
-      background: #0f172a; border: 1px solid #1e293b; border-radius: 14px;
+      background: var(--surface-inset); border: 1px solid var(--border); border-radius: 14px;
       padding: 32px 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
     }
-    .activation-card h1 { font-size: 22px; font-weight: 700; color: #e2e8f0; margin-bottom: 6px; }
-    .activation-card .activation-sub { font-size: 13px; color: #94a3b8; line-height: 1.5; margin-bottom: 22px; }
-    .activation-card .activation-label { display: block; font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
+    .activation-card h1 { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
+    .activation-card .activation-sub { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 22px; }
+    .activation-card .activation-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
     .activation-card textarea.activation-key {
       width: 100%; min-height: 88px; padding: 12px;
       font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px;
-      background: #020617; color: #e2e8f0; border: 1px solid #334155; border-radius: 8px;
+      background: var(--surface-inset); color: var(--text); border: 1px solid var(--border-hover); border-radius: 8px;
       outline: none; resize: vertical; line-height: 1.45;
     }
-    .activation-card textarea.activation-key:focus { border-color: #6366f1; }
+    .activation-card textarea.activation-key:focus { border-color: var(--accent); }
     .activation-card .activation-error {
       margin-top: 10px; padding: 10px 12px;
       background: rgba(220, 38, 38, 0.1); border: 1px solid rgba(220, 38, 38, 0.4);
-      border-radius: 8px; color: #fca5a5; font-size: 12px; line-height: 1.4;
+      border-radius: 8px; color: var(--error-soft); font-size: 12px; line-height: 1.4;
     }
     .activation-card .activation-actions {
       display: flex; gap: 10px; margin-top: 16px; align-items: center;
     }
     .activation-card .activation-btn {
       flex: 1; padding: 11px 18px; font-size: 13px; font-weight: 600;
-      background: #6366f1; color: #fff; border: none; border-radius: 8px; cursor: pointer;
+      background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; cursor: pointer;
       transition: background 0.15s;
     }
-    .activation-card .activation-btn:hover:not(:disabled) { background: #4f46e5; }
+    .activation-card .activation-btn:hover:not(:disabled) { background: var(--accent); }
     .activation-card .activation-btn:disabled { opacity: 0.5; cursor: not-allowed; }
     .activation-card .activation-link {
-      font-size: 12px; color: #818cf8; text-decoration: none; padding: 8px 4px;
+      font-size: 12px; color: var(--accent); text-decoration: none; padding: 8px 4px;
     }
-    .activation-card .activation-link:hover { color: #a5b4fc; text-decoration: underline; }
+    .activation-card .activation-link:hover { color: var(--accent-hover); text-decoration: underline; }
     .activation-card .activation-meta {
-      margin-top: 24px; padding-top: 18px; border-top: 1px solid #1e293b;
-      font-size: 11px; color: #64748b; line-height: 1.5;
+      margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border);
+      font-size: 11px; color: var(--text-label); line-height: 1.5;
     }
 
     /* In-settings license block + Pro upsell tiles */
     .license-block {
-      padding: 14px; border: 1px solid #334155; border-radius: 10px;
-      background: rgba(99, 102, 241, 0.06); margin-bottom: 14px;
+      padding: 14px; border: 1px solid var(--border-hover); border-radius: 10px;
+      background: rgba(129, 140, 248, 0.06); margin-bottom: 14px;
     }
     .license-block .lic-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
     .license-block .lic-tier {
@@ -1598,33 +1636,33 @@
       font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
       padding: 3px 8px; border-radius: 999px;
     }
-    .license-block .lic-tier.core { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.4); }
-    .license-block .lic-tier.pro  { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.4); }
-    .license-block .lic-tier.unlicensed { background: rgba(148, 163, 184, 0.1); color: #94a3b8; border: 1px solid #334155; }
-    .license-block .lic-meta { font-size: 11px; color: #64748b; margin-top: 8px; line-height: 1.5; }
-    .license-block .lic-meta .lic-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #94a3b8; }
+    .license-block .lic-tier.core { background: rgba(129, 140, 248, 0.15); color: var(--accent-hover); border: 1px solid rgba(129, 140, 248, 0.4); }
+    .license-block .lic-tier.pro  { background: rgba(168, 85, 247, 0.15); color: var(--premium-text-soft); border: 1px solid rgba(168, 85, 247, 0.4); }
+    .license-block .lic-tier.unlicensed { background: rgba(148, 163, 184, 0.1); color: var(--text-muted); border: 1px solid var(--border-hover); }
+    .license-block .lic-meta { font-size: 11px; color: var(--text-label); margin-top: 8px; line-height: 1.5; }
+    .license-block .lic-meta .lic-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-muted); }
     .license-block .lic-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
     .license-block .lic-btn {
       font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 6px;
-      border: 1px solid #334155; background: #1e293b; color: #94a3b8; cursor: pointer;
+      border: 1px solid var(--border-hover); background: var(--border); color: var(--text-muted); cursor: pointer;
       text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
     }
-    .license-block .lic-btn:hover { background: #334155; color: #e2e8f0; }
-    .license-block .lic-btn.danger { color: #fca5a5; border-color: rgba(220, 38, 38, 0.4); }
+    .license-block .lic-btn:hover { background: var(--border-hover); color: var(--text); }
+    .license-block .lic-btn.danger { color: var(--error-soft); border-color: rgba(220, 38, 38, 0.4); }
     .license-block .lic-btn.danger:hover { background: rgba(220, 38, 38, 0.1); }
 
     .pro-upsell {
-      padding: 14px; border: 1px dashed #334155; border-radius: 10px;
+      padding: 14px; border: 1px dashed var(--border-hover); border-radius: 10px;
       background: rgba(168, 85, 247, 0.05); margin: 8px 0;
     }
-    .pro-upsell .pro-title { font-size: 13px; font-weight: 700; color: #d8b4fe; display: flex; align-items: center; gap: 6px; }
-    .pro-upsell .pro-desc { font-size: 11.5px; color: #94a3b8; margin-top: 6px; line-height: 1.5; }
+    .pro-upsell .pro-title { font-size: 13px; font-weight: 700; color: var(--premium-text-soft); display: flex; align-items: center; gap: 6px; }
+    .pro-upsell .pro-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
     .pro-upsell .pro-cta {
       display: inline-block; margin-top: 10px;
       padding: 6px 12px; font-size: 11px; font-weight: 600;
-      background: #a855f7; color: #fff; border-radius: 6px; text-decoration: none;
+      background: var(--premium); color: var(--on-accent); border-radius: 6px; text-decoration: none;
     }
-    .pro-upsell .pro-cta:hover { background: #9333ea; }
+    .pro-upsell .pro-cta:hover { background: var(--premium-deep); }
   </style>
 </head>
 <body class="history-open">
@@ -3454,8 +3492,8 @@
         <div id="inflight-banner" style="
           margin: 8px 0 12px;
           padding: 10px 14px;
-          background: linear-gradient(90deg, rgba(59,130,246,0.12), rgba(99,102,241,0.10));
-          border: 1px solid rgba(99,102,241,0.4);
+          background: linear-gradient(90deg, rgba(59,130,246,0.12), rgba(129,140,248,0.10));
+          border: 1px solid rgba(129,140,248,0.4);
           border-radius: 10px;
           display: flex;
           align-items: center;
@@ -4034,7 +4072,7 @@
         <div class="upgrade-banner" style="
           margin: 8px 0 12px;
           padding: 10px 14px;
-          background: linear-gradient(90deg, rgba(168,85,247,0.12), rgba(99,102,241,0.10));
+          background: linear-gradient(90deg, rgba(168,85,247,0.12), rgba(129,140,248,0.10));
           border: 1px solid rgba(168,85,247,0.35);
           border-radius: 10px;
           display: flex;
@@ -5225,7 +5263,7 @@
                 style="flex-shrink:0;padding:7px 12px;font-size:11px;font-weight:600;">Copy</button>
             </div>
             <a href="${escAttr(lnUri)}"
-               style="display:block;padding:10px 18px;font-size:13px;font-weight:600;background:#3b82f6;color:#fff;border-radius:8px;text-decoration:none;">
+               style="display:block;padding:10px 18px;font-size:13px;font-weight:600;background:#818cf8;color:#fff;border-radius:8px;text-decoration:none;">
               ⚡ Open in wallet
             </a>
             <div style="margin-top:10px;font-size:10px;color:#64748b;line-height:1.5;">
@@ -5659,7 +5697,7 @@
       // cookies I lose this" risk.
       const isAnon = isMulti() && !state.account?.user;
       const anonWarning = isAnon
-        ? `<div style="margin-top:14px;padding:10px 12px;background:rgba(99,102,241,0.10);border:1px solid rgba(99,102,241,0.30);border-radius:8px;font-size:12px;color:#c7d2fe;line-height:1.55;">
+        ? `<div style="margin-top:14px;padding:10px 12px;background:rgba(129,140,248,0.10);border:1px solid rgba(129,140,248,0.30);border-radius:8px;font-size:12px;color:#c7d2fe;line-height:1.55;">
             <strong style="color:#e0e7ff;">Heads up:</strong> Credits you buy now are tied to this browser. <a href="/auth.html" style="color:#a5b4fc;text-decoration:underline;">Sign up for a free Recaps account</a> (30 seconds) to save them across devices and protect them if you clear cookies.
           </div>`
         : "";
@@ -5760,7 +5798,7 @@
                 style="flex-shrink:0;padding:7px 12px;font-size:11px;font-weight:600;">Copy</button>
             </div>
             <a href="${escAttr(lnUri)}"
-               style="display:block;padding:10px 18px;font-size:13px;font-weight:600;background:#3b82f6;color:#fff;border-radius:8px;text-decoration:none;">
+               style="display:block;padding:10px 18px;font-size:13px;font-weight:600;background:#818cf8;color:#fff;border-radius:8px;text-decoration:none;">
               ⚡ Open in wallet
             </a>
             <div style="margin-top:10px;font-size:10px;color:#64748b;line-height:1.5;">
@@ -6332,7 +6370,7 @@
       return `
         <div style="padding:4px 2px;">
           <button class="buy-back-link" onclick="tierSignupBack()">&larr; Back to tiers</button>
-          <h3 style="font-size:18px;font-weight:600;color:#f5f9ff;margin:14px 0 4px;">${escHtml(tierName)}</h3>
+          <h3 style="font-size:18px;font-weight:600;color:#f1f5f9;margin:14px 0 4px;">${escHtml(tierName)}</h3>
           <p style="font-size:13px;color:#94a3b8;line-height:1.55;margin-bottom:18px;">${escHtml(priceLine)}</p>
           <label style="display:block;font-size:12px;font-weight:600;color:#cbd5e1;margin-bottom:6px;">Email</label>
           <input type="email"
@@ -6340,7 +6378,7 @@
             oninput="state.tierSignupEmail=this.value"
             onkeydown="if(event.key==='Enter')tierSignupSubmit()"
             ${state.tierSignupBusy ? "disabled" : ""}
-            style="width:100%;padding:11px 14px;font-size:15px;background:#0a0e1a;color:#f5f9ff;border:1px solid #1f2942;border-radius:8px;outline:none;font-family:inherit;-webkit-text-fill-color:#f5f9ff;-webkit-box-shadow:0 0 0 1000px #0a0e1a inset;" />
+            style="width:100%;padding:11px 14px;font-size:15px;background:#0a0e1a;color:#f1f5f9;border:1px solid #1e293b;border-radius:8px;outline:none;font-family:inherit;-webkit-text-fill-color:#f1f5f9;-webkit-box-shadow:0 0 0 1000px #0a0e1a inset;" />
           <button class="buy-select-btn buy-select-btn-primary" onclick="tierSignupSubmit()"
             ${state.tierSignupBusy ? "disabled" : ""}
             style="margin-top:14px;width:100%;">
@@ -6493,7 +6531,7 @@
               ${submitDisabled ? "disabled" : ""}
               aria-label="${isSubscribeUrl(state.url) ? "Subscribe" : (state.loading ? "Queue" : "Summarize")}"
               title="${isSubscribeUrl(state.url) ? "Subscribe" : (state.loading ? "Queue" : "Summarize")}"
-              style="${isSubscribeUrl(state.url) ? "background:#6366f1" : ""}">
+              style="${isSubscribeUrl(state.url) ? "background:#818cf8" : ""}">
               <span class="submit-btn-text">${isSubscribeUrl(state.url) ? (state.addingSubLoading ? "Subscribing..." : "Subscribe") : (state.loading ? "Queue" : "Summarize")}</span>
               <span class="submit-btn-icon" aria-hidden="true">
                 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
@@ -6812,14 +6850,14 @@
         credits != null && credits !== Infinity && credits >= 0
           ? `<button onclick="openBuyCreditsModal()"
               title="Top up your Recap credits with Lightning"
-              style="background:rgba(99,102,241,0.20);color:#a5b4fc;border:1px solid rgba(99,102,241,0.45);padding:3px 10px;border-radius:6px;cursor:pointer;font-size:10px;font-weight:600;margin-left:auto;"
-              onmouseover="this.style.background='rgba(99,102,241,0.30)'"
-              onmouseout="this.style.background='rgba(99,102,241,0.20)'">
+              style="background:rgba(129,140,248,0.20);color:#a5b4fc;border:1px solid rgba(129,140,248,0.45);padding:3px 10px;border-radius:6px;cursor:pointer;font-size:10px;font-weight:600;margin-left:auto;"
+              onmouseover="this.style.background='rgba(129,140,248,0.30)'"
+              onmouseout="this.style.background='rgba(129,140,248,0.20)'">
               Buy more &rarr;
             </button>`
           : "";
       return `
-        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 8px;padding:6px 10px;background:rgba(99,102,241,0.10);border:1px solid rgba(99,102,241,0.30);border-radius:8px;font-size:11px;color:#cbd5e1;">
+        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 8px;padding:6px 10px;background:rgba(129,140,248,0.10);border:1px solid rgba(129,140,248,0.30);border-radius:8px;font-size:11px;color:#cbd5e1;">
           <span style="font-weight:600;color:#a5b4fc;">Relay</span>
           <span>&middot; Tier: <strong style="color:#e2e8f0;">${tierLabel}</strong></span>
           <span>&middot; ${creditLabel}</span>
@@ -6844,8 +6882,8 @@
         return `
           <button type="button" onclick="setProviderMode('${mode}')"
             style="flex:1 1 0;padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left;
-              background:${active ? "rgba(99,102,241,0.18)" : "rgba(30,41,59,0.4)"};
-              border:1px solid ${active ? "rgba(99,102,241,0.55)" : "#334155"};
+              background:${active ? "rgba(129,140,248,0.18)" : "rgba(30,41,59,0.4)"};
+              border:1px solid ${active ? "rgba(129,140,248,0.55)" : "#334155"};
               color:${active ? "#e0e7ff" : "#cbd5e1"};">
             <div style="font-size:12px;font-weight:600;">${escHtml(label)}</div>
             <div style="font-size:10px;color:${active ? "#a5b4fc" : "#64748b"};margin-top:2px;">${escHtml(sublabel)}</div>
@@ -6874,7 +6912,7 @@
         `;
       const relayModeBlurb = isRelayMode
         ? `
-          <div style="padding:8px 12px;background:rgba(99,102,241,0.08);border:1px dashed rgba(99,102,241,0.30);border-radius:6px;font-size:11px;color:#cbd5e1;line-height:1.5;">
+          <div style="padding:8px 12px;background:rgba(129,140,248,0.08);border:1px dashed rgba(129,140,248,0.30);border-radius:6px;font-size:11px;color:#cbd5e1;line-height:1.5;">
             The operator's relay handles both transcription and analysis end-to-end.
             One credit per summary. Chunking + concurrency are tuned by the operator
             in their relay dashboard — you don't need to configure anything.
@@ -7583,7 +7621,7 @@
       // is ignored entirely now that tier is the sole source of paid status,
       // so surfacing it was just confusing noise.)
       const adminBadge = t.is_admin
-        ? `<span style="font-size:9px;font-weight:700;padding:2px 6px;background:rgba(99,102,241,0.15);color:#a5b4fc;border:1px solid rgba(99,102,241,0.4);border-radius:4px;">ADMIN</span>`
+        ? `<span style="font-size:9px;font-weight:700;padding:2px 6px;background:rgba(129,140,248,0.15);color:#a5b4fc;border:1px solid rgba(129,140,248,0.4);border-radius:4px;">ADMIN</span>`
         : "";
       const created = t.created_at
         ? new Date(t.created_at).toLocaleDateString()
@@ -7598,7 +7636,7 @@
       const grantOpen = state.ops.grantOpenFor === t.id;
       const grantForm = grantOpen
         ? `
-        <div style="display:flex;gap:6px;align-items:center;padding:6px 8px;background:rgba(99,102,241,0.06);border-top:1px solid rgba(99,102,241,0.2);">
+        <div style="display:flex;gap:6px;align-items:center;padding:6px 8px;background:rgba(129,140,248,0.06);border-top:1px solid rgba(129,140,248,0.2);">
           <input type="number" min="1" max="100000" placeholder="Amount"
             value="${escHtml(state.ops.grantAmount)}"
             oninput="state.ops.grantAmount=this.value"
@@ -7606,7 +7644,7 @@
             style="flex:1;padding:6px 10px;font-size:12px;background:#0a0e1a;color:#e2e8f0;border:1px solid #334155;border-radius:6px;outline:none;" />
           <button onclick="submitGrantCredits('${escHtml(t.id)}')"
             ${state.ops.grantBusy ? "disabled" : ""}
-            style="padding:6px 12px;font-size:11px;font-weight:600;background:#3b82f6;color:#fff;border:none;border-radius:6px;cursor:pointer;${state.ops.grantBusy ? "opacity:0.5;cursor:not-allowed;" : ""}">
+            style="padding:6px 12px;font-size:11px;font-weight:600;background:#818cf8;color:#fff;border:none;border-radius:6px;cursor:pointer;${state.ops.grantBusy ? "opacity:0.5;cursor:not-allowed;" : ""}">
             ${state.ops.grantBusy ? "..." : "Grant"}
           </button>
           <button onclick="toggleGrantCreditsRow('${escHtml(t.id)}')"
@@ -7687,7 +7725,7 @@
       const windowSelector = hoursOptions
         .map(
           (o) => `<button onclick="loadAdminActivity(${o.v})"
-            style="padding:4px 10px;font-size:11px;font-weight:600;border:1px solid #334155;border-radius:6px;cursor:pointer;background:${ops.activityHours === o.v ? "#3b82f6" : "#1e293b"};color:${ops.activityHours === o.v ? "#fff" : "#94a3b8"};">${o.label}</button>`,
+            style="padding:4px 10px;font-size:11px;font-weight:600;border:1px solid #334155;border-radius:6px;cursor:pointer;background:${ops.activityHours === o.v ? "#818cf8" : "#1e293b"};color:${ops.activityHours === o.v ? "#fff" : "#94a3b8"};">${o.label}</button>`,
         )
         .join("");
       let body = "";
@@ -7773,7 +7811,7 @@
             autocomplete="off" autocapitalize="off" spellcheck="false"
             style="flex:1;min-width:0;padding:8px 10px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;outline:none;" />
           <button onclick="submitClaimPurchase()" ${submitting ? "disabled" : ""}
-            style="padding:8px 14px;background:#6366f1;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:${submitting ? "wait" : "pointer"};white-space:nowrap;">
+            style="padding:8px 14px;background:#818cf8;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:${submitting ? "wait" : "pointer"};white-space:nowrap;">
             ${submitting ? "Claiming…" : "Claim"}
           </button>
         </div>
@@ -8050,7 +8088,7 @@
           </div>
           <div style="display:flex;gap:6px;flex-wrap:wrap;">
             <button onclick="copyLicenseKey()"
-              style="padding:6px 14px;font-size:12px;font-weight:600;background:#3b82f6;color:#fff;border:none;border-radius:6px;cursor:pointer;">
+              style="padding:6px 14px;font-size:12px;font-weight:600;background:#818cf8;color:#fff;border:none;border-radius:6px;cursor:pointer;">
               ${th.copied ? "Copied ✓" : "Copy key"}
             </button>
             <button onclick="state.takeHome.revealed=false;state.takeHome.copied=false;render();"
@@ -8148,7 +8186,7 @@
           </div>
           <div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;">
             <button onclick="toggleSettings(); openTierSignupModal()"
-               style="padding:6px 14px;font-size:12px;font-weight:600;background:#3b82f6;color:#fff;border:none;border-radius:6px;cursor:pointer;">Sign up</button>
+               style="padding:6px 14px;font-size:12px;font-weight:600;background:#818cf8;color:#fff;border:none;border-radius:6px;cursor:pointer;">Sign up</button>
             <a href="/auth.html?intent=signin"
                style="padding:6px 14px;font-size:12px;font-weight:600;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;">Sign in</a>
           </div>`;
@@ -8160,7 +8198,7 @@
           <div style="font-size:13px;color:#e2e8f0;font-weight:500;">Not signed in</div>
           <div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;">
             <button onclick="toggleSettings(); openTierSignupModal()"
-               style="padding:6px 14px;font-size:12px;font-weight:600;background:#3b82f6;color:#fff;border:none;border-radius:6px;cursor:pointer;">Sign up</button>
+               style="padding:6px 14px;font-size:12px;font-weight:600;background:#818cf8;color:#fff;border:none;border-radius:6px;cursor:pointer;">Sign up</button>
             <a href="/auth.html?intent=signin"
                style="padding:6px 14px;font-size:12px;font-weight:600;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;">Sign in</a>
           </div>`;
@@ -8180,8 +8218,8 @@
         '<div class="ytdlp-status" style="flex-direction:column;align-items:flex-start;gap:8px;border-color:#334155;background:rgba(30,41,59,0.3);">' +
         '<span style="font-size:11px;color:#94a3b8;line-height:1.5;">Export your full library (summaries, folders, subscriptions) to transfer between devices, or import a library from another instance.</span>' +
         '<div style="display:flex;gap:6px;flex-wrap:wrap;">' +
-        '<button onclick="exportLibrary()" style="padding:6px 14px;font-size:12px;font-weight:600;background:#6366f1;color:#fff;border:none;border-radius:6px;cursor:pointer;" ' +
-        'onmouseover="this.style.background=\'#4f46e5\'" onmouseout="this.style.background=\'#6366f1\'">Export Library</button>' +
+        '<button onclick="exportLibrary()" style="padding:6px 14px;font-size:12px;font-weight:600;background:#818cf8;color:#fff;border:none;border-radius:6px;cursor:pointer;" ' +
+        'onmouseover="this.style.background=\'#818cf8\'" onmouseout="this.style.background=\'#818cf8\'">Export Library</button>' +
         '<label style="display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:12px;font-weight:600;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;" ' +
         'onmouseover="this.style.background=\'#334155\';this.style.color=\'#e2e8f0\'" onmouseout="this.style.background=\'#1e293b\';this.style.color=\'#94a3b8\'">' +
         'Import Library' +
@@ -8244,7 +8282,7 @@
         if (isCh) {
           btn.textContent = state.addingSubLoading ? "Subscribing..." : "Subscribe";
           btn.disabled = !state.url.trim() || state.addingSubLoading;
-          btn.style.background = "#6366f1";
+          btn.style.background = "#818cf8";
           btn.onclick = () => addSubscriptionFromInput();
         } else {
           btn.textContent = state.loading ? "Queue" : "Summarize";
@@ -8659,7 +8697,7 @@
                onmouseout="this.style.background='none';this.style.color='#64748b'">
               Check for new videos now
             </button>
-            <div id="sub-check-log" tabindex="0" onkeydown="if((event.ctrlKey||event.metaKey)&&event.key==='a'){event.preventDefault();var r=document.createRange();r.selectNodeContents(this);var s=window.getSelection();s.removeAllRanges();s.addRange(r)}" style="${state.subCheckLog.length > 0 ? '' : 'display:none;'} margin-top:8px; padding:8px 10px; background:#0a0e17; border:1px solid #1e293b; border-radius:8px; max-height:200px; overflow-y:auto; user-select:text; outline:none;">
+            <div id="sub-check-log" tabindex="0" onkeydown="if((event.ctrlKey||event.metaKey)&&event.key==='a'){event.preventDefault();var r=document.createRange();r.selectNodeContents(this);var s=window.getSelection();s.removeAllRanges();s.addRange(r)}" style="${state.subCheckLog.length > 0 ? '' : 'display:none;'} margin-top:8px; padding:8px 10px; background:#0a0e1a; border:1px solid #1e293b; border-radius:8px; max-height:200px; overflow-y:auto; user-select:text; outline:none;">
               ${state.subCheckLog.map(l => `<div style="font-size:11px;color:#94a3b8;padding:1px 0;font-family:'SF Mono',Menlo,monospace;">${escHtml(l.msg)}</div>`).join("")}
             </div>
           ` : ""}
@@ -8717,7 +8755,7 @@
                 You can still watch the video using the link below the player, or try again — sometimes a different model in the Analysis dropdown gets through when one is overloaded.
               </div>
               <button onclick="processUrl(${JSON.stringify(state.url || "https://www.youtube.com/watch?v=" + state.videoId)})"
-                style="background:#6366f1;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;">
+                style="background:#818cf8;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;">
                 Try again
               </button>
             </div>
@@ -10251,7 +10289,7 @@
         state.account?.state === "anonymous" &&
         (state.account?.available_trial_credits || 0) > 0;
       const anonCreditsLine = showAnonCreditsHint
-        ? `<div style="margin-bottom:12px;padding:10px 12px;background:rgba(99,102,241,0.10);border:1px solid rgba(99,102,241,0.30);border-radius:8px;font-size:12px;color:#a5b4fc;">
+        ? `<div style="margin-bottom:12px;padding:10px 12px;background:rgba(129,140,248,0.10);border:1px solid rgba(129,140,248,0.30);border-radius:8px;font-size:12px;color:#a5b4fc;">
             <strong style="color:#c7d2fe;">${state.account.available_trial_credits} free credit${state.account.available_trial_credits === 1 ? "" : "s"}</strong> — paste a link to claim ${state.account.available_trial_credits === 1 ? "it" : "them"}. Sign up after for more.
           </div>`
         : "";
@@ -11108,9 +11146,9 @@
     // early. Don't "simplify" either away.
     const SHARE_PAGE_CSS =
       '*{box-sizing:border-box}' +
-      'body{margin:0;background:#0b1120;color:#e2e8f0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}' +
+      'body{margin:0;background:#0a0e1a;color:#e2e8f0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}' +
       '.wrap{max-width:860px;margin:0 auto;padding:20px 16px 64px}' +
-      '.rc-head h1{font-size:20px;font-weight:680;color:#f1f5f9;margin:0 0 6px;line-height:1.3}' +
+      '.rc-head h1{font-size:20px;font-weight:700;color:#f1f5f9;margin:0 0 6px;line-height:1.3}' +
       '.rc-meta{font-size:12px;color:#64748b;margin:0 0 16px}' +
       '.rc-meta a{color:#818cf8;text-decoration:none}' +
       '.rc-meta a:hover{text-decoration:underline}' +
@@ -11130,7 +11168,7 @@
       '.chunk.now-playing .chunk-play-btn{background:#22c55e;color:#fff}' +
       '.chunk-info{flex:1;min-width:0}' +
       '.chunk-title-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}' +
-      '.chunk-title{font-size:13px;font-weight:650;color:#f1f5f9;line-height:1.3}' +
+      '.chunk-title{font-size:13px;font-weight:600;color:#f1f5f9;line-height:1.3}' +
       '.chunk-time{font-size:10px;color:#475569;font-weight:500;font-family:"SF Mono",Menlo,monospace;white-space:nowrap}' +
       '.chunk-summary{margin:3px 0 0;font-size:12px;line-height:1.5;color:#94a3b8}' +
       '.chunk-arrow{font-size:22px;color:#475569;transition:transform 0.2s;flex-shrink:0;padding:4px 8px;border-radius:6px;line-height:1}' +
@@ -12381,7 +12419,7 @@
             style="padding:9px 12px;font-size:13px;background:#0a0e1a;color:#e2e8f0;border:1px solid #334155;border-radius:8px;outline:none;" />
           <div style="display:flex;gap:6px;flex-wrap:wrap;">
             <button onclick="submitPasswordSet()" ${state.passwordBusy ? "disabled" : ""}
-              style="padding:8px 16px;font-size:12px;font-weight:600;background:#3b82f6;color:#fff;border:none;border-radius:6px;cursor:pointer;${state.passwordBusy ? "opacity:0.5;cursor:not-allowed;" : ""}">
+              style="padding:8px 16px;font-size:12px;font-weight:600;background:#818cf8;color:#fff;border:none;border-radius:6px;cursor:pointer;${state.passwordBusy ? "opacity:0.5;cursor:not-allowed;" : ""}">
               ${state.passwordBusy ? "Saving..." : hasPwd ? "Update" : "Set password"}
             </button>
             <button onclick="togglePasswordEditor()"