From 82e544af47a746af50ba4ca62de53a5158982730 Mon Sep 17 00:00:00 2001
From: Keysat <licensing@keysat.xyz>
Date: Wed, 17 Jun 2026 08:22:48 -0500
Subject: [PATCH] Var-ify inline styles and snap off-scale type/radii (design
 Phase 2)

Phase 2 of the design-contract cleanup:
- 346 inline-style hexes (+7 #475569, mapped by property) -> var(--token),
  scoped to CSS-value position so JS-logic/quoted hex, the meta theme-color,
  SVG attrs, and the no-:root share-export region stay literal; #fff and
  no-token hexes left as-is.
- Snap off-scale font sizes (9/10.5->10, 11.5/12.5->12, 15->16, 24->22) and
  radii (3->4, 5->6, 7->6, 11->12, 9->8|10) to the scale.
- Bump to 0.2.161, which also ships the previously-uninstalled 0.2.160
  share-page HTML export.
---
 AGENTS.md                    |   6 +-
 ROADMAP.md                   |  34 +-
 public/index.html            | 606 +++++++++++++++++------------------
 startos/versions/index.ts    |   5 +-
 startos/versions/v0.2.161.ts |  12 +
 5 files changed, 341 insertions(+), 322 deletions(-)
 create mode 100644 startos/versions/v0.2.161.ts

diff --git a/AGENTS.md b/AGENTS.md
index dfbd199..2887a43 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -136,11 +136,11 @@ unsure whether a change is contract-affecting, assume it is and check.
 
 ## Current state
 
-**Live on the operator's StartOS box** — app **0.2.159** + relay **0.2.126**. Tests: `cd server && npm test` → **144 pass**.
+**Live on the operator's StartOS box** — app **0.2.161** + relay **0.2.126**. Tests: `cd server && npm test` → **144 pass**.
 
-**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`.
+**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`; **YouTube `/live/` + `/shorts/` URL support** (0.2.159, `cb961cd`): `extractVideoId` now accepts those forms (was rejecting them as "Invalid YouTube URL"); and **self-contained shareable HTML export** (0.2.160, `621af7c`; first installed in 0.2.161): the Export menu offers a standalone `.html` with the embedded video + expandable timestamped summaries baked in, no account needed (native share sheet on mobile, download on desktop). Plans in `docs/*-plan.md`.
 
-**Design system (NEW this session, NOT yet deployed):** the `design/` contract is live (`design/DESIGN.md` + `design/tokens.tokens.json`; see the **Design** line up top). Phase 1 of the conformance cleanup is done — a canonical `:root` token block is the single source of truth in `public/index.html`'s `<style>`, the stylesheet + `public/auth.html` use `var(--token)`, and all color/weight drift is fixed across every surface (auth blue→indigo, legacy darks→ladder). Verified locally (144 tests, both pages serve 200, all `var()` resolve); **not installed** — reaches recaps.cc only on the next box-serve / `make install`. Phase 2 (var-ify the long-tail inline styles; snap off-scale font/radius — both *visible* changes) is queued in `ROADMAP.md`.
+**Design system — DONE & live (0.2.161).** The `design/` contract (`design/DESIGN.md` + `design/tokens.tokens.json`; see the **Design** line up top) plus both cleanup phases are now installed. Phase 1: a canonical `:root` token block is the single source of truth in `public/index.html`'s `<style>`; the stylesheet + `public/auth.html` use `var(--token)`; all color/weight drift fixed. Phase 2: var-ified the long-tail inline `style=` hexes (346 + 7 `#475569` → `var()`, scoped to CSS-value position so JS-logic/quoted hex, the `<meta theme-color>`, SVG attrs, and the no-`:root` `SHARE_PAGE_*` region were dodged; `#fff` and no-token hexes left literal on purpose), and snapped off-scale font sizes (21) + radii (18) to the scale. Verified: 144 tests, both pages serve 200, every `var()` resolves, no off-scale residue. Phase 2 details + the remaining Style-Dictionary stretch goal are 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.
 
diff --git a/ROADMAP.md b/ROADMAP.md
index 30c1219..02134ba 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -32,20 +32,26 @@ Verified: 144 tests pass, both pages serve 200, all 426+27 `var()` references re
 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) 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.
+**Phase 2 — DONE 2026-06-17 (shipped in app 0.2.161).**
+- **Var-ified the long-tail inline `style=` attributes** — 346 inline-style hexes (+7
+  `#475569`, mapped by property to `--text-faint`/`--border-strong`) → `var(--token)`. Scoped
+  to CSS-value position (hex preceded by `:`/space/`,`, never a quote), which cleanly dodged
+  the non-`var()` spots: the `<meta theme-color>`, SVG `fill`/`stroke` attrs, and hex held in
+  JS *logic* (quoted ternary branches like `${cond ? "#1e293b" : ...}`, `const colour = …`).
+  Left as literals on purpose: `#fff` (its uses split between on-accent button text and
+  functional white — `--on-accent` doesn't cleanly cover both, zero visual gain), no-token
+  hexes (`#e0e7ff`/`#c7d2fe`/`#a78bfa`/`#04210f`/etc.), and the entire `SHARE_PAGE_*` export
+  region (a standalone doc with no `:root` — `var()` wouldn't resolve there).
+- **Snapped off-scale font sizes** (21 occ): `9/10.5→10`, `11.5/12.5→12`, `15→16`, `24→22`.
+  Left `40px`/`56px` display glyphs (success numeral, buy spinner) — off-scale by design.
+- **Snapped off-scale radii** (18 occ): `3→4`, `5→6`, `7→6`, `11→12`; `9→10` for the two 18px
+  capsules (`.menu-badge`, `.rc-spk` — radius clamps at 9 on an 18px box, so on-scale and
+  visually identical) and `9→8` for `.icon-btn`/`.buy-select-btn`/`.buy-discount-input`. Left
+  the `1px` hamburger-bar radius. Verified: 144 tests pass, both pages serve 200, every
+  introduced `var()` resolves against `:root`, no off-scale residue.
+- **(stretch, NOT done) 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. Still open.
 
 ## Known debt (P2, from the 2026-06-14 full-eval — `EVALUATION.md`)
 
diff --git a/public/index.html b/public/index.html
index d9169c8..d50a050 100644
--- a/public/index.html
+++ b/public/index.html
@@ -111,7 +111,7 @@
     }
     .chunks-scroll::-webkit-scrollbar { width: 6px; }
     .chunks-scroll::-webkit-scrollbar-track { background: transparent; }
-    .chunks-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    .chunks-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
     .chunks-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
 
     /* Video sticks to top in split mode */
@@ -119,7 +119,7 @@
       margin-bottom: 0; flex-shrink: 0;
     }
     .results-left .video-title {
-      font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4;
+      font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4;
       padding: 0 2px;
     }
     .results-left .video-meta {
@@ -235,7 +235,7 @@
     .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;
+      margin-left: auto; min-width: 18px; height: 18px; border-radius: 10px;
       background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700;
       display: flex; align-items: center; justify-content: center; padding: 0 5px;
     }
@@ -298,7 +298,7 @@
          the hamburger. */
       .top-bar-input .submit-btn {
         padding: 0; width: 48px; height: 48px; flex-shrink: 0;
-        border-radius: 11px; font-weight: 600;
+        border-radius: 12px; font-weight: 600;
         display: flex; align-items: center; justify-content: center;
       }
       .top-bar-input .submit-btn .submit-btn-text { display: none; }
@@ -312,8 +312,8 @@
          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 var(--border);
-        background: var(--surface); color: var(--text-muted); font-size: 24px;
+        width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--border);
+        background: var(--surface); color: var(--text-muted); font-size: 22px;
         cursor: pointer; align-items: center; justify-content: center;
         transition: all 0.15s; position: relative;
         margin-left: 4px;
@@ -337,14 +337,14 @@
       .queue-section { margin-top: 8px; }
       .queue-item { padding: 8px 10px; gap: 6px; flex-wrap: wrap; }
       .queue-item .queue-title { font-size: 12px; min-width: 60%; }
-      .queue-item .queue-from { font-size: 9px; }
+      .queue-item .queue-from { font-size: 10px; }
       .queue-item .queue-url { font-size: 11px; }
       .queue-approve, .queue-reject { width: 28px; height: 28px; }
       /* Queue header */
       .queue-label { font-size: 10px; }
       .queue-approve-all { font-size: 10px !important; padding: 3px 8px !important; }
       /* Icon buttons smaller on mobile */
-      .icon-btn { width: 36px; height: 36px; border-radius: 9px; }
+      .icon-btn { width: 36px; height: 36px; border-radius: 8px; }
       /* Stats bar wraps better */
       .stats-bar { gap: 4px; flex-wrap: wrap; }
       .stats { gap: 6px; font-size: 11px; flex-wrap: wrap; }
@@ -581,7 +581,7 @@
     .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: var(--accent); color: var(--on-accent); font-size: 9px;
+      border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 10px;
       font-weight: 700; display: flex; align-items: center; justify-content: center;
       padding: 0 4px;
     }
@@ -787,11 +787,11 @@
       margin-bottom: 2px;
     }
     .welcome-bullets li span {
-      display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
+      display: block; font-size: 12px; color: var(--text-muted); line-height: 1.5;
     }
     .buy-select-btn {
       margin-top: auto; background: var(--border); color: var(--text);
-      border: 1px solid var(--border-hover); padding: 11px 16px; border-radius: 9px;
+      border: 1px solid var(--border-hover); padding: 11px 16px; border-radius: 8px;
       cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.15s;
     }
     .buy-select-btn:hover { background: var(--border-hover); border-color: var(--text-faint); }
@@ -807,7 +807,7 @@
       display: inline-flex; align-items: center; justify-content: center; gap: 7px;
     }
     .sub-pay-btc:disabled { opacity: 0.6; cursor: default; }
-    .sub-btc-glyph { font-weight: 800; font-size: 15px; line-height: 1; }
+    .sub-btc-glyph { font-weight: 800; font-size: 16px; line-height: 1; }
     .sub-pay-card {
       margin-top: 8px; background: transparent; border: none; color: var(--text-muted);
       font-size: 13px; font-weight: 500; cursor: pointer; padding: 6px 4px;
@@ -817,7 +817,7 @@
     .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: var(--warning-soft);
+      margin-top: 12px; font-size: 12px; 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;
     }
@@ -873,7 +873,7 @@
     }
     .buy-discount-input {
       padding: 11px 14px; font-size: 14px; font-family: ui-monospace, monospace;
-      background: var(--surface-inset); border: 1px solid var(--border-hover); border-radius: 9px;
+      background: var(--surface-inset); border: 1px solid var(--border-hover); border-radius: 8px;
       color: var(--text); text-transform: uppercase; letter-spacing: 0.05em;
     }
     .buy-discount-input:focus {
@@ -934,7 +934,7 @@
     /* Input row */
     .input-row { display: flex; gap: 10px; }
     .url-input {
-      flex: 1; padding: 14px 18px; font-size: 15px;
+      flex: 1; padding: 14px 18px; font-size: 16px;
       border: 1px solid var(--border-hover); border-radius: 10px;
       outline: none; transition: all 0.2s;
       background: var(--border); color: var(--text-strong);
@@ -942,7 +942,7 @@
     .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;
+      padding: 14px 30px; font-size: 16px; font-weight: 600;
       background: var(--accent);
       color: var(--on-accent); border: none; border-radius: 10px;
       cursor: pointer; transition: all 0.2s; white-space: nowrap;
@@ -982,7 +982,7 @@
       border-radius: 50%; animation: spin 0.8s linear infinite;
       margin: 0 auto 16px;
     }
-    .status-text { color: var(--text-muted); font-size: 15px; font-weight: 500; animation: pulse 2s ease-in-out infinite; }
+    .status-text { color: var(--text-muted); font-size: 16px; 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; } }
 
@@ -1033,7 +1033,7 @@
       align-items: flex-start; color: inherit;
     }
     .chunk-play-btn {
-      width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
+      width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
       display: flex; align-items: center; justify-content: center;
       background: var(--border); color: var(--text-label); border: none; cursor: pointer;
       transition: all 0.15s; font-size: 12px; margin-top: 1px;
@@ -1208,7 +1208,7 @@
     }
     .log-drawer-body::-webkit-scrollbar { width: 6px; }
     .log-drawer-body::-webkit-scrollbar-track { background: transparent; }
-    .log-drawer-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    .log-drawer-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
     .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 */
@@ -1262,7 +1262,7 @@
       display: flex; align-items: center; justify-content: center;
     }
     .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 { width: 64px; height: 64px; background: var(--success); border-color: var(--success); color: #04210f; font-size: 22px; }
     .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; }
@@ -1270,7 +1270,7 @@
     /* 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: var(--text-muted); font-size: 12.5px; line-height: 1.5; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
+    .rp-tline { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text-muted); font-size: 12px; 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; }
@@ -1309,7 +1309,7 @@
     .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 var(--border);
+      width: 30px; height: 30px; 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;
     }
@@ -1319,7 +1319,7 @@
     }
     .history-list::-webkit-scrollbar { width: 6px; }
     .history-list::-webkit-scrollbar-track { background: transparent; }
-    .history-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    .history-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
 
     /* Folders */
     .history-folder { margin-bottom: 4px; }
@@ -1375,7 +1375,7 @@
     }
     .history-meta { font-size: 10px; color: var(--text-faint); margin-top: 1px; }
     .history-delete {
-      width: 24px; height: 24px; border-radius: 5px; border: none;
+      width: 24px; height: 24px; border-radius: 6px; border: none;
       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;
@@ -1383,7 +1383,7 @@
     .history-item:hover .history-delete { opacity: 1; }
     .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;
+      width: 24px; height: 24px; border-radius: 6px; border: none;
       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;
@@ -1405,7 +1405,7 @@
     }
     /* Session title edit */
     .history-title-input {
-      background: var(--surface-inset); border: 1px solid var(--accent); border-radius: 3px;
+      background: var(--surface-inset); border: 1px solid var(--accent); border-radius: 4px;
       color: var(--text); font-size: 12px; font-weight: 600; padding: 1px 4px;
       outline: none; width: 100%;
     }
@@ -1431,7 +1431,7 @@
     .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;
+      width: 22px; height: 22px; border-radius: 6px; border: none;
       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;
@@ -1596,7 +1596,7 @@
     .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;
+      font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
       background: var(--surface-inset); color: var(--text); border: 1px solid var(--border-hover); border-radius: 8px;
       outline: none; resize: vertical; line-height: 1.45;
     }
@@ -1656,7 +1656,7 @@
       background: rgba(168, 85, 247, 0.05); margin: 8px 0;
     }
     .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-desc { font-size: 12px; 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;
@@ -3442,10 +3442,10 @@
                   ${state.licenseActivating ? "Activating…" : "Activate"}
                 </button>
                 <button class="activation-link"
-                  style="background:none;border:none;color:#a5b4fc;cursor:pointer;padding:0;font-size:13px;text-decoration:underline;"
+                  style="background:none;border:none;color:var(--accent-hover);cursor:pointer;padding:0;font-size:13px;text-decoration:underline;"
                   onclick="dismissActivation(); openBuyModal();">Buy a key &rarr;</button>
                 <button class="activation-link"
-                  style="background:none;border:none;color:#94a3b8;cursor:pointer;padding:0;font-size:13px;"
+                  style="background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0;font-size:13px;"
                   onclick="dismissActivation()">
                   Skip &mdash; use free mode
                 </button>
@@ -3499,13 +3499,13 @@
           align-items: center;
           gap: 10px;
           flex-wrap: wrap;
-          color: #e2e8f0;
+          color: var(--text);
           font-size: 13px;
         ">
           <span style="flex:1; min-width: 0; overflow: hidden; text-overflow: ellipsis;">
-            <strong style="color:#93c5fd;">${aborted ? "Cancelling…" : "Processing"}</strong>
-            <span style="color:#cbd5e1;"> &middot; ${escHtml(what)}</span>
-            <span style="color:#94a3b8;"> &middot; <span class="inflight-elapsed">${elapsedStr}</span></span>
+            <strong style="color:var(--info-soft);">${aborted ? "Cancelling…" : "Processing"}</strong>
+            <span style="color:var(--text-body);"> &middot; ${escHtml(what)}</span>
+            <span style="color:var(--text-muted);"> &middot; <span class="inflight-elapsed">${elapsedStr}</span></span>
           </span>
           <button onclick="cancelCurrentJob()"
             ${aborted ? "disabled" : ""}
@@ -3968,7 +3968,7 @@
         // available trial credits + a Buy more CTA so they don't have
         // to summarize anything before they see the pricing path.
         pillHtml =
-          `<span class="have-key-btn" style="cursor:default;color:#a5b4fc;">${anonAvailable} free credit${anonAvailable === 1 ? "" : "s"} ready</span>` +
+          `<span class="have-key-btn" style="cursor:default;color:var(--accent-hover);">${anonAvailable} free credit${anonAvailable === 1 ? "" : "s"} ready</span>` +
           `<button onclick="openBuyCreditsModal()" class="have-key-btn" title="Buy more Recap credits — they'll attach to your trial and transfer to your account when you sign up">+ Buy more</button>`;
       } else if (isMulti() && !state.account?.user && state.account?.trial_blocked_reason === "ip_cap_reached") {
         // Anonymous visitor whose server-side IP cap is reached.
@@ -3980,14 +3980,14 @@
         // pill buttons open paths that ACTUALLY work (sign up for
         // a fresh account; buy credits a la carte without signup).
         pillHtml =
-          `<button onclick="showTrialExhaustedModal({})" class="have-key-btn" title="Out of free credits — sign up or buy credits" style="color:#fcd34d;">Out of free credits</button>` +
+          `<button onclick="showTrialExhaustedModal({})" class="have-key-btn" title="Out of free credits — sign up or buy credits" style="color:var(--warning-soft);">Out of free credits</button>` +
           `<button onclick="openBuyCreditsModal()" class="have-key-btn" title="Buy Recap credits a la carte">+ Buy credits</button>`;
       } else if (byo) {
-        pillHtml = `<span class="status-pill" title="At least one AI provider key is configured" style="color:#86efac;background:rgba(134,239,172,0.10);border-color:rgba(134,239,172,0.25);">BYO AI keys configured</span>`;
+        pillHtml = `<span class="status-pill" title="At least one AI provider key is configured" style="color:var(--success-soft);background:rgba(134,239,172,0.10);border-color:rgba(134,239,172,0.25);">BYO AI keys configured</span>`;
       } else if (rs.configured && rs.lastError) {
         // Relay configured but unreachable AND no BYO fallback — make
         // sure the user sees something so they know summarize will fail.
-        pillHtml = `<span class="status-pill" title="${escHtml(rs.lastError)}" style="color:#fca5a5;background:rgba(252,165,165,0.10);border-color:rgba(252,165,165,0.30);">Relay unreachable</span>`;
+        pillHtml = `<span class="status-pill" title="${escHtml(rs.lastError)}" style="color:var(--error-soft);background:rgba(252,165,165,0.10);border-color:rgba(252,165,165,0.30);">Relay unreachable</span>`;
       }
 
       // ── Multi-tenant signin widget ──────────────────────────────────
@@ -4079,20 +4079,20 @@
           align-items: center;
           gap: 10px;
           flex-wrap: wrap;
-          color: #e2e8f0;
+          color: var(--text);
           font-size: 13px;
         ">
           <span style="flex:1; min-width: 220px;">
-            <strong style="color:#c4b5fd;">${label}</strong>
+            <strong style="color:var(--premium-text);">${label}</strong>
             &middot; ${descr}
           </span>
           <button onclick="openBuyModal()"
-             style="background:#a855f7;color:#fff;border:none;padding:6px 12px;border-radius:6px;text-decoration:none;font-size:12px;font-weight:600;cursor:pointer;">
+             style="background:var(--premium);color:#fff;border:none;padding:6px 12px;border-radius:6px;text-decoration:none;font-size:12px;font-weight:600;cursor:pointer;">
             Upgrade
           </button>
           ${free ? `
             <button onclick="showActivationScreen()"
-               style="background:transparent;color:#94a3b8;border:1px solid #334155;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;">
+               style="background:transparent;color:var(--text-muted);border:1px solid var(--border-hover);padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;">
               I have a key
             </button>
           ` : ""}
@@ -4581,7 +4581,7 @@
       return `
         <div class="buy-error">
           <strong>Couldn't load tiers.</strong>
-          <div style="margin-top:6px;font-size:12px;color:#fca5a5;">${escHtml(state.buyError)}</div>
+          <div style="margin-top:6px;font-size:12px;color:var(--error-soft);">${escHtml(state.buyError)}</div>
           <button class="buy-retry-btn" onclick="loadBuyPolicies()">Try again</button>
         </div>
       `;
@@ -5099,7 +5099,7 @@
         inner = `
           <div class="buy-error">
             <strong>Couldn't load plans.</strong>
-            <div style="margin-top:6px;font-size:12px;color:#fca5a5;">${escHtml(state.subscribeError)}</div>
+            <div style="margin-top:6px;font-size:12px;color:var(--error-soft);">${escHtml(state.subscribeError)}</div>
             <button class="buy-retry-btn" onclick="loadSubscribePlans()">Try again</button>
           </div>`;
       } else {
@@ -5250,28 +5250,28 @@
         return `
           <div style="text-align:center;max-width:300px;margin:0 auto;">
             <h3 style="margin:0 0 2px;font-size:18px;">Pay ${satsText} sats</h3>
-            <div style="font-size:11px;color:#94a3b8;margin-bottom:14px;">
+            <div style="font-size:11px;color:var(--text-muted);margin-bottom:14px;">
               ${escHtml(info.label)} · scan with any Lightning wallet
             </div>
             <div id="subscribe-qr-mount"
                  style="background:#fff;padding:10px;border-radius:8px;display:inline-block;margin-bottom:12px;line-height:0;">
-              <div style="color:#94a3b8;font-size:11px;padding:80px 60px;line-height:1.4;">Generating QR…</div>
+              <div style="color:var(--text-muted);font-size:11px;padding:80px 60px;line-height:1.4;">Generating QR…</div>
             </div>
             <div style="display:flex;gap:6px;align-items:center;margin-bottom:10px;">
-              <code style="flex:1;min-width:0;font-size:11px;color:#94a3b8;background:#0a0e1a;padding:7px 9px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:left;">${escHtml(inv.bolt11)}</code>
+              <code style="flex:1;min-width:0;font-size:11px;color:var(--text-muted);background:var(--bg);padding:7px 9px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:left;">${escHtml(inv.bolt11)}</code>
               <button class="buy-secondary-btn" onclick="copyInvoiceId('${escAttr(inv.bolt11)}', this)"
                 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:#818cf8;color:#fff;border-radius:8px;text-decoration:none;">
+               style="display:block;padding:10px 18px;font-size:13px;font-weight:600;background:var(--accent);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;">
+            <div style="margin-top:10px;font-size:10px;color:var(--text-label);line-height:1.5;">
               Your plan activates automatically when payment lands.
             </div>
             ${pollError}
             <button onclick="closeSubscribeModal()"
-              style="margin-top:10px;background:transparent;color:#64748b;border:none;font-size:11px;text-decoration:underline;cursor:pointer;">
+              style="margin-top:10px;background:transparent;color:var(--text-label);border:none;font-size:11px;text-decoration:underline;cursor:pointer;">
               Cancel
             </button>
           </div>
@@ -5361,14 +5361,14 @@
             '<h2>' + headline + '</h2>' +
             '<button class="close-btn" id="trial-exhausted-close">&times;</button>' +
           '</div>' +
-          '<div class="settings-modal-body" style="font-size:14px; line-height:1.6; color:#cbd5e1;">' +
+          '<div class="settings-modal-body" style="font-size:14px; line-height:1.6; color:var(--text-body);">' +
             '<p style="margin-top:0;">' + body + '</p>' +
             '<div style="display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;">' +
               '<button class="submit-btn" id="trial-exhausted-signup" style="flex:1; min-width:140px;">Sign up free</button>' +
               '<button class="expand-btn" id="trial-exhausted-buy" style="flex:1; min-width:140px;">Buy credits</button>' +
             '</div>' +
-            '<div style="margin-top:14px; font-size:12px; color:#94a3b8; line-height:1.5;">' +
-              'Already have an account? <a href="#" id="trial-exhausted-signin" style="color:#a5b4fc;">Sign in</a>' +
+            '<div style="margin-top:14px; font-size:12px; color:var(--text-muted); line-height:1.5;">' +
+              'Already have an account? <a href="#" id="trial-exhausted-signin" style="color:var(--accent-hover);">Sign in</a>' +
             '</div>' +
           '</div>' +
         '</div>';
@@ -5603,7 +5603,7 @@
         inner = `
           <div class="buy-error">
             <strong>Couldn't open purchase.</strong>
-            <div style="margin-top:6px;font-size:12px;color:#fca5a5;">${escHtml(state.buyCreditsError)}</div>
+            <div style="margin-top:6px;font-size:12px;color:var(--error-soft);">${escHtml(state.buyCreditsError)}</div>
             <button class="buy-retry-btn" onclick="openBuyCreditsModal()">Try again</button>
           </div>
         `;
@@ -5698,7 +5698,7 @@
       const isAnon = isMulti() && !state.account?.user;
       const anonWarning = isAnon
         ? `<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.
+            <strong style="color:#e0e7ff;">Heads up:</strong> Credits you buy now are tied to this browser. <a href="/auth.html" style="color:var(--accent-hover);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>`
         : "";
       return `
@@ -5757,16 +5757,16 @@
       const isAnon = isMulti() && !state.account?.user;
       const invoiceIdBlock = invoiceId && isAnon
         ? `
-          <div style="margin-top:16px;padding:12px;background:rgba(15,23,42,0.6);border:1px solid #1e293b;border-radius:8px;text-align:left;">
-            <div style="font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;">
+          <div style="margin-top:16px;padding:12px;background:rgba(15,23,42,0.6);border:1px solid var(--border);border-radius:8px;text-align:left;">
+            <div style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;">
               Invoice ID
             </div>
             <div style="display:flex;gap:8px;align-items:center;">
-              <code style="flex:1;font-size:11px;color:#e2e8f0;background:#0f172a;padding:8px 10px;border-radius:6px;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;">${escHtml(invoiceId)}</code>
+              <code style="flex:1;font-size:11px;color:var(--text);background:var(--surface-inset);padding:8px 10px;border-radius:6px;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;">${escHtml(invoiceId)}</code>
               <button class="buy-secondary-btn" onclick="copyInvoiceId('${escAttr(invoiceId)}', this)"
                 style="flex-shrink:0;padding:8px 12px;font-size:11px;">Copy</button>
             </div>
-            <div style="margin-top:8px;font-size:11px;color:#94a3b8;line-height:1.5;">
+            <div style="margin-top:8px;font-size:11px;color:var(--text-muted);line-height:1.5;">
               Save this if you plan to sign up later — paste it into <em>Settings → Claim a previous purchase</em> to move these credits to your account if they don't transfer automatically.
             </div>
           </div>`
@@ -5785,29 +5785,29 @@
         return `
           <div style="text-align:center;max-width:280px;margin:0 auto;">
             <h3 style="margin:0 0 2px;font-size:18px;">Pay ${sats} sats</h3>
-            <div style="font-size:11px;color:#94a3b8;margin-bottom:14px;">
+            <div style="font-size:11px;color:var(--text-muted);margin-bottom:14px;">
               ${credits} credit${credits === 1 ? "" : "s"} · scan with any Lightning wallet
             </div>
             <div id="buy-credits-qr-mount"
                  style="background:#fff;padding:10px;border-radius:8px;display:inline-block;margin-bottom:12px;line-height:0;">
-              <div style="color:#94a3b8;font-size:11px;padding:80px 60px;line-height:1.4;">Generating QR…</div>
+              <div style="color:var(--text-muted);font-size:11px;padding:80px 60px;line-height:1.4;">Generating QR…</div>
             </div>
             <div style="display:flex;gap:6px;align-items:center;margin-bottom:10px;">
-              <code style="flex:1;min-width:0;font-size:11px;color:#94a3b8;background:#0a0e1a;padding:7px 9px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:left;">${escHtml(bolt11)}</code>
+              <code style="flex:1;min-width:0;font-size:11px;color:var(--text-muted);background:var(--bg);padding:7px 9px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:left;">${escHtml(bolt11)}</code>
               <button class="buy-secondary-btn" onclick="copyInvoiceId('${escAttr(bolt11)}', this)"
                 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:#818cf8;color:#fff;border-radius:8px;text-decoration:none;">
+               style="display:block;padding:10px 18px;font-size:13px;font-weight:600;background:var(--accent);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;">
+            <div style="margin-top:10px;font-size:10px;color:var(--text-label);line-height:1.5;">
               Updates automatically when payment lands.
             </div>
             ${pollError}
             ${invoiceIdBlock}
             <button onclick="closeBuyCreditsModal()"
-              style="margin-top:10px;background:transparent;color:#64748b;border:none;font-size:11px;text-decoration:underline;cursor:pointer;">
+              style="margin-top:10px;background:transparent;color:var(--text-label);border:none;font-size:11px;text-decoration:underline;cursor:pointer;">
               Cancel
             </button>
           </div>
@@ -5855,7 +5855,7 @@
       if (typeof qrcode !== "function") {
         // QR library failed to load (offline, blocked, etc.) — leave
         // the placeholder text. BOLT11 + Open-in-wallet still work.
-        mount.innerHTML = `<div style="color:#64748b;font-size:12px;text-align:center;padding:24px 0;">QR unavailable — copy the invoice text below or tap "Open in wallet".</div>`;
+        mount.innerHTML = `<div style="color:var(--text-label);font-size:12px;text-align:center;padding:24px 0;">QR unavailable — copy the invoice text below or tap "Open in wallet".</div>`;
         return;
       }
       try {
@@ -5882,7 +5882,7 @@
         mount.dataset.bolt11 = inv.bolt11;
       } catch (err) {
         console.warn("[buy] QR render failed:", err);
-        mount.innerHTML = `<div style="color:#fca5a5;font-size:12px;text-align:center;padding:24px;background:transparent;">Couldn't render QR — copy the invoice below.</div>`;
+        mount.innerHTML = `<div style="color:var(--error-soft);font-size:12px;text-align:center;padding:24px;background:transparent;">Couldn't render QR — copy the invoice below.</div>`;
       }
     }
 
@@ -5897,7 +5897,7 @@
       if (!mount) return;
       if (mount.dataset.bolt11 === inv.bolt11) return; // already painted
       if (typeof qrcode !== "function") {
-        mount.innerHTML = `<div style="color:#64748b;font-size:12px;text-align:center;padding:24px 0;">QR unavailable — copy the invoice text below or tap "Open in wallet".</div>`;
+        mount.innerHTML = `<div style="color:var(--text-label);font-size:12px;text-align:center;padding:24px 0;">QR unavailable — copy the invoice text below or tap "Open in wallet".</div>`;
         return;
       }
       try {
@@ -5909,7 +5909,7 @@
         mount.dataset.bolt11 = inv.bolt11;
       } catch (err) {
         console.warn("[subscribe] QR render failed:", err);
-        mount.innerHTML = `<div style="color:#fca5a5;font-size:12px;text-align:center;padding:24px;background:transparent;">Couldn't render QR — copy the invoice below.</div>`;
+        mount.innerHTML = `<div style="color:var(--error-soft);font-size:12px;text-align:center;padding:24px;background:transparent;">Couldn't render QR — copy the invoice below.</div>`;
       }
     }
 
@@ -5995,7 +5995,7 @@
               <button class="close-btn" onclick="dismissWelcome()" aria-label="Close">&times;</button>
             </div>
             <div class="buy-body">
-              <p style="font-size:14px;color:#cbd5e1;line-height:1.55;margin-bottom:18px;">
+              <p style="font-size:14px;color:var(--text-body);line-height:1.55;margin-bottom:18px;">
                 Recaps turns long videos and podcasts into scannable, timestamped summaries
                 so you only spend time on the parts that interest you.
               </p>
@@ -6245,7 +6245,7 @@
         inner = `
           <div class="buy-error">
             <strong>Couldn't load tiers.</strong>
-            <div style="margin-top:6px;font-size:12px;color:#fca5a5;">${escHtml(state.tierSignupError)}</div>
+            <div style="margin-top:6px;font-size:12px;color:var(--error-soft);">${escHtml(state.tierSignupError)}</div>
             <button class="buy-retry-btn" onclick="openTierSignupModal()">Try again</button>
           </div>`;
       } else if (state.tierSignupView === "email") {
@@ -6370,15 +6370,15 @@
       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:#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>
+          <h3 style="font-size:18px;font-weight:600;color:var(--text-strong);margin:14px 0 4px;">${escHtml(tierName)}</h3>
+          <p style="font-size:13px;color:var(--text-muted);line-height:1.55;margin-bottom:18px;">${escHtml(priceLine)}</p>
+          <label style="display:block;font-size:12px;font-weight:600;color:var(--text-body);margin-bottom:6px;">Email</label>
           <input type="email"
             value="${escAttr(state.tierSignupEmail || "")}"
             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:#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;" />
+            style="width:100%;padding:11px 14px;font-size:16px;background:var(--bg);color:var(--text-strong);border:1px solid var(--border);border-radius:8px;outline:none;font-family:inherit;-webkit-text-fill-color:var(--text-strong);-webkit-box-shadow:0 0 0 1000px var(--bg) inset;" />
           <button class="buy-select-btn buy-select-btn-primary" onclick="tierSignupSubmit()"
             ${state.tierSignupBusy ? "disabled" : ""}
             style="margin-top:14px;width:100%;">
@@ -6531,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:#818cf8" : ""}">
+              style="${isSubscribeUrl(state.url) ? "background:var(--accent)" : ""}">
               <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">
@@ -6800,7 +6800,7 @@
       return `
         <div class="license-block">
           <div class="lic-row">
-            <strong style="font-size:12px;color:#e2e8f0;">License</strong>
+            <strong style="font-size:12px;color:var(--text);">License</strong>
             <span class="lic-tier ${tier.className}">${tier.label}${lic.isTrial ? " (trial)" : ""}</span>
           </div>
           ${isLicensed() ? `
@@ -6810,7 +6810,7 @@
               <div>Entitlements: ${(lic.entitlements || []).map(e => escHtml(e)).join(", ") || "none"}</div>
             </div>
             <div class="lic-actions">
-              ${!isProTier() ? `<button class="lic-btn" onclick="openBuyModal()" style="background:#a855f7;color:#fff;border-color:#a855f7;cursor:pointer;">Upgrade to Pro</button>` : ""}
+              ${!isProTier() ? `<button class="lic-btn" onclick="openBuyModal()" style="background:var(--premium);color:#fff;border-color:var(--premium);cursor:pointer;">Upgrade to Pro</button>` : ""}
               <button class="lic-btn danger" onclick="deactivateLicense()">Deactivate</button>
             </div>
           ` : `
@@ -6839,7 +6839,7 @@
           ? "unlimited"
           : `${credits} credit${credits === 1 ? "" : "s"} remaining`;
       const errorBadge = rs.lastError
-        ? `<span style="color:#f87171;font-size:10px;">&middot; ${escHtml(rs.lastError.slice(0, 80))}</span>`
+        ? `<span style="color:var(--error-text);font-size:10px;">&middot; ${escHtml(rs.lastError.slice(0, 80))}</span>`
         : "";
       // "Buy more" button — opens the credit-purchase modal. Hidden
       // on the unlimited / unknown-balance branches (no scarcity to
@@ -6850,16 +6850,16 @@
         credits != null && credits !== Infinity && credits >= 0
           ? `<button onclick="openBuyCreditsModal()"
               title="Top up your Recap credits with Lightning"
-              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;"
+              style="background:rgba(129,140,248,0.20);color:var(--accent-hover);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(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>
+        <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:var(--text-body);">
+          <span style="font-weight:600;color:var(--accent-hover);">Relay</span>
+          <span>&middot; Tier: <strong style="color:var(--text);">${tierLabel}</strong></span>
           <span>&middot; ${creditLabel}</span>
           ${errorBadge}
           ${buyMoreBtn}
@@ -6894,25 +6894,25 @@
         ? ""
         : `
           <div style="display:flex;flex-direction:column;gap:4px;">
-            <span style="font-size:11px;color:#94a3b8;font-weight:600;">Transcription</span>
+            <span style="font-size:11px;color:var(--text-muted);font-weight:600;">Transcription</span>
             <div style="display:flex;gap:6px;flex-wrap:wrap;">
               ${renderProviderSelect("transcription", NON_RELAY_TRANSCRIBE_PROVIDERS, state.transcriptionProvider)}
               <span data-model-slot="transcription" style="display:flex;flex:1 1 160px;min-width:140px;">${renderModelInput("transcription", tp, state.transcriptionModel)}</span>
             </div>
-            <span style="font-size:10px;color:#64748b;">${escHtml(tp.canTranscribe ? "Audio → text" : "(provider does not support audio — pick gemini or openai)")}</span>
+            <span style="font-size:10px;color:var(--text-label);">${escHtml(tp.canTranscribe ? "Audio → text" : "(provider does not support audio — pick gemini or openai)")}</span>
           </div>
           <div style="display:flex;flex-direction:column;gap:4px;">
-            <span style="font-size:11px;color:#94a3b8;font-weight:600;">Analysis</span>
+            <span style="font-size:11px;color:var(--text-muted);font-weight:600;">Analysis</span>
             <div style="display:flex;gap:6px;flex-wrap:wrap;">
               ${renderProviderSelect("analysis", NON_RELAY_ANALYZE_PROVIDERS, state.analysisProvider)}
               <span data-model-slot="analysis" style="display:flex;flex:1 1 160px;min-width:140px;">${renderModelInput("analysis", ap, state.analysisModel)}</span>
             </div>
-            <span style="font-size:10px;color:#64748b;">Topic structuring (text → JSON) &middot; falls back through remaining models if your chosen one fails</span>
+            <span style="font-size:10px;color:var(--text-label);">Topic structuring (text → JSON) &middot; falls back through remaining models if your chosen one fails</span>
           </div>
         `;
       const relayModeBlurb = isRelayMode
         ? `
-          <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;">
+          <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:var(--text-body);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.
@@ -6922,29 +6922,29 @@
       return `
         <label class="field-label" style="margin-top:14px;">AI Providers</label>
         ${renderRelayStatusPill()}
-        <div style="display:flex;flex-direction:column;gap:10px;border:1px solid #334155;background:rgba(30,41,59,0.3);border-radius:8px;padding:12px;">
+        <div style="display:flex;flex-direction:column;gap:10px;border:1px solid var(--border-hover);background:rgba(30,41,59,0.3);border-radius:8px;padding:12px;">
           <div style="display:flex;gap:8px;flex-wrap:wrap;">
             ${modeButton("relay", "Recaps Relay", "Operator's pipeline, comped credits")}
             ${modeButton("custom", "Custom Provider / Local", "Bring your own API keys or run locally")}
           </div>
           ${relayModeBlurb}
           ${customPickers}
-          <label style="display:flex;align-items:center;gap:8px;font-size:11px;color:#cbd5e1;cursor:pointer;padding-top:6px;border-top:1px solid #1e293b;">
+          <label style="display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-body);cursor:pointer;padding-top:6px;border-top:1px solid var(--border);">
             <input type="checkbox" ${state.useYouTubeCaptions ? "checked" : ""} onchange="setUseYouTubeCaptions(this.checked)" style="margin:0;" />
             <span>
               Use YouTube captions when available
-              <span style="color:#64748b;display:block;font-size:10px;margin-top:1px;">Skips audio download + transcription. Faster, but captions don't have speaker labels — uncheck if you want them.</span>
+              <span style="color:var(--text-label);display:block;font-size:10px;margin-top:1px;">Skips audio download + transcription. Faster, but captions don't have speaker labels — uncheck if you want them.</span>
             </span>
           </label>
         </div>
 
         <label class="field-label" style="margin-top:14px;display:flex;align-items:center;justify-content:space-between;">
           <span>API Keys & Endpoints</span>
-          <button onclick="toggleShowKey()" style="background:none;border:none;color:#94a3b8;cursor:pointer;font-size:11px;">${state.showKey ? "Hide values" : "Show values"}</button>
+          <button onclick="toggleShowKey()" style="background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:11px;">${state.showKey ? "Hide values" : "Show values"}</button>
         </label>
-        <div style="display:flex;flex-direction:column;gap:10px;border:1px solid #334155;background:rgba(30,41,59,0.3);border-radius:8px;padding:12px;">
+        <div style="display:flex;flex-direction:column;gap:10px;border:1px solid var(--border-hover);background:rgba(30,41,59,0.3);border-radius:8px;padding:12px;">
           ${PROVIDERS.map(renderProviderCredentials).join("")}
-          <p style="font-size:10px;color:#64748b;margin:0;line-height:1.5;">
+          <p style="font-size:10px;color:var(--text-label);margin:0;line-height:1.5;">
             Keys typed here are saved locally in this browser. Keys set via the <strong>Set ${escHtml('<Provider>')} API Key</strong> StartOS actions are saved on the server (shared across devices); look for the green &ldquo;✓ Server-configured&rdquo; hint under a field. <strong>Delete</strong> clears both at once.
           </p>
         </div>
@@ -7030,9 +7030,9 @@
       const opts = state.providerOpts[provider.id] || {};
       const inputType = state.showKey ? "text" : "password";
       const expanded = isProviderExpanded(provider.id);
-      let inner = `<div style="font-size:11px;color:#cbd5e1;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;" onclick="toggleProviderSection('${provider.id}')">
+      let inner = `<div style="font-size:11px;color:var(--text-body);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;" onclick="toggleProviderSection('${provider.id}')">
         <span style="display:flex;align-items:center;gap:6px;">
-          <span data-provider-chevron style="color:#64748b;font-size:10px;width:10px;display:inline-block;">${expanded ? "▾" : "▸"}</span>
+          <span data-provider-chevron style="color:var(--text-label);font-size:10px;width:10px;display:inline-block;">${expanded ? "▾" : "▸"}</span>
           ${escHtml(provider.name)}
         </span>
         <div style="display:flex;gap:6px;align-items:center;" onclick="event.stopPropagation()">
@@ -7056,9 +7056,9 @@
             oninput="setProviderOpt('${provider.id}', '${provider.urlField.key}', this.value)"
             class="key-input" style="width:100%;" />`;
         if (discovered) {
-          inner += `<div style="font-size:10px;color:#86efac;">Auto-detected on this StartOS server &mdash; leave blank to use it</div>`;
+          inner += `<div style="font-size:10px;color:var(--success-soft);">Auto-detected on this StartOS server &mdash; leave blank to use it</div>`;
         } else if (!localUrl && urlOnServer) {
-          inner += `<div style="font-size:10px;color:#86efac;">✓ Server-configured via StartOS action &mdash; leave blank to use it</div>`;
+          inner += `<div style="font-size:10px;color:var(--success-soft);">✓ Server-configured via StartOS action &mdash; leave blank to use it</div>`;
         }
       }
       if (provider.keyField) {
@@ -7071,7 +7071,7 @@
             oninput="setProviderOpt('${provider.id}', '${provider.keyField.key}', this.value)"
             class="key-input" style="width:100%;" />`;
         if (!localValue && onServer) {
-          inner += `<div style="font-size:10px;color:#86efac;">✓ Server-configured via StartOS action &mdash; leave blank to use it</div>`;
+          inner += `<div style="font-size:10px;color:var(--success-soft);">✓ Server-configured via StartOS action &mdash; leave blank to use it</div>`;
         }
       }
       if (provider.modelsField) {
@@ -7079,17 +7079,17 @@
         const ph = provider.modelsField.placeholder;
         const hintParts = [provider.modelsField.hint];
         if (discoveredModels.length > 0) {
-          hintParts.push(`Detected on your server: <code style="color:#86efac;font-size:10px;">${escHtml(discoveredModels.join(", "))}</code>`);
+          hintParts.push(`Detected on your server: <code style="color:var(--success-soft);font-size:10px;">${escHtml(discoveredModels.join(", "))}</code>`);
         }
         inner += `
           <input type="text" placeholder="${escHtml(ph)}"
             value="${escHtml(opts[provider.modelsField.key] || '')}"
             oninput="setProviderOpt('${provider.id}', '${provider.modelsField.key}', this.value)"
             class="key-input" style="width:100%;" />
-          <div style="font-size:10px;color:#64748b;">${hintParts.join(" &middot; ")} &middot; <em>click Save to refresh the model dropdown above</em></div>`;
+          <div style="font-size:10px;color:var(--text-label);">${hintParts.join(" &middot; ")} &middot; <em>click Save to refresh the model dropdown above</em></div>`;
       }
       if (!provider.urlField && !provider.keyField) {
-        inner += `<div style="font-size:10px;color:#64748b;">No configuration needed.</div>`;
+        inner += `<div style="font-size:10px;color:var(--text-label);">No configuration needed.</div>`;
       }
       // Inline test result lands here when the user hits Test.
       const test = state.providerTestResults?.[provider.id];
@@ -7097,13 +7097,13 @@
         const colour = test.ok ? "#86efac" : "#fca5a5";
         const icon = test.ok ? "✓" : "✗";
         const body = test.ok
-          ? `${escHtml(test.text || "(empty response)")} <span style="color:#64748b;">&middot; ${test.latencyMs}ms</span>`
+          ? `${escHtml(test.text || "(empty response)")} <span style="color:var(--text-label);">&middot; ${test.latencyMs}ms</span>`
           : escHtml(test.error || "failed");
         inner += `<div style="font-size:10px;color:${colour};margin-top:2px;">${icon} ${body}</div>`;
       }
       // Close the data-provider-body div opened in the header block.
       inner += `</div>`;
-      return `<div data-provider-section="${provider.id}" style="display:flex;flex-direction:column;gap:5px;border-top:1px solid #1e293b;padding-top:8px;">${inner}</div>`;
+      return `<div data-provider-section="${provider.id}" style="display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--border);padding-top:8px;">${inner}</div>`;
     }
 
     // The small "Test" button + spinner shown next to each provider's
@@ -7113,10 +7113,10 @@
       if (!provider.canAnalyze) return "";
       const testing = state.providerTesting?.[provider.id];
       if (testing) {
-        return `<span style="font-size:10px;color:#94a3b8;">Testing…</span>`;
+        return `<span style="font-size:10px;color:var(--text-muted);">Testing…</span>`;
       }
       return `<button onclick="testProvider('${provider.id}')"
-        style="background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:4px;padding:2px 8px;font-size:10px;cursor:pointer;">Test</button>`;
+        style="background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:4px;padding:2px 8px;font-size:10px;cursor:pointer;">Test</button>`;
     }
 
     // Returns true when the provider has any user-configurable field
@@ -7139,17 +7139,17 @@
       if (!providerHasConfigurableFields(provider)) return "";
       const saved = state.providerSaveState?.[provider.id] === "saved";
       if (saved) {
-        return `<span style="font-size:10px;color:#86efac;display:inline-flex;align-items:center;gap:3px;background:rgba(134,239,172,0.08);border:1px solid rgba(134,239,172,0.4);border-radius:4px;padding:2px 8px;">✓ Saved</span>`;
+        return `<span style="font-size:10px;color:var(--success-soft);display:inline-flex;align-items:center;gap:3px;background:rgba(134,239,172,0.08);border:1px solid rgba(134,239,172,0.4);border-radius:4px;padding:2px 8px;">✓ Saved</span>`;
       }
       const hasAnyValue = providerHasAnyStoredValue(provider);
       const deleteBtn = hasAnyValue
         ? `<button onclick="deleteProviderSection('${provider.id}')" title="Clear this provider's credentials from both this browser AND the server"
-            style="background:transparent;color:#94a3b8;border:1px solid #334155;border-radius:4px;padding:2px 10px;font-size:10px;font-weight:600;cursor:pointer;"
+            style="background:transparent;color:var(--text-muted);border:1px solid var(--border-hover);border-radius:4px;padding:2px 10px;font-size:10px;font-weight:600;cursor:pointer;"
             onmouseover="this.style.borderColor='#dc2626';this.style.color='#f87171'"
             onmouseout="this.style.borderColor='#334155';this.style.color='#94a3b8'">Delete</button>`
         : "";
       return `${deleteBtn}<button onclick="saveProviderSection('${provider.id}')"
-        style="background:#1e293b;color:#cbd5e1;border:1px solid #475569;border-radius:4px;padding:2px 10px;font-size:10px;font-weight:600;cursor:pointer;margin-left:6px;">Save</button>`;
+        style="background:var(--border);color:var(--text-body);border:1px solid var(--border-strong);border-radius:4px;padding:2px 10px;font-size:10px;font-weight:600;cursor:pointer;margin-left:6px;">Save</button>`;
     }
 
     // Returns true if this provider has a stored value in EITHER the
@@ -7421,11 +7421,11 @@
 
               ${state.admin.enabled && state.admin.authed ? `
                 <label class="field-label" style="margin-top:12px;">Admin Session</label>
-                <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;">
+                <div class="ytdlp-status" style="flex-direction:column;align-items:flex-start;gap:8px;border-color:var(--border-hover);background:rgba(30,41,59,0.3);">
+                  <span style="font-size:11px;color:var(--text-muted);line-height:1.5;">
                     Signed in as <strong>${escHtml(state.admin.username || "admin")}</strong>. The password is set on the server via the <strong>Set Admin Password</strong> StartOS action.
                   </span>
-                  <button onclick="submitAdminLogout()" style="padding:6px 14px;font-size:12px;font-weight:600;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;">Sign out</button>
+                  <button onclick="submitAdminLogout()" style="padding:6px 14px;font-size:12px;font-weight:600;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">Sign out</button>
                 </div>
               ` : ""}
 
@@ -7452,16 +7452,16 @@
         // straight from the menu (matches the desktop "+ Buy more"
         // affordance on the toolbar pill).
         creditLine = `
-          <div class="mobile-menu-item" style="cursor:default;color:#cbd5e1;">
+          <div class="mobile-menu-item" style="cursor:default;color:var(--text-body);">
             <span class="menu-icon">⚡</span>
             ${credits} Recap credit${credits === 1 ? "" : "s"}
           </div>
-          <button class="mobile-menu-item" onclick="closeMobileMenu(); openBuyCreditsModal()" style="color:#cbd5e1;">
+          <button class="mobile-menu-item" onclick="closeMobileMenu(); openBuyCreditsModal()" style="color:var(--text-body);">
             <span class="menu-icon">＋</span>
             Buy more credits
           </button>`;
       } else if (credits != null && credits < 0) {
-        creditLine = `<div class="mobile-menu-item" style="cursor:default;color:#cbd5e1;">
+        creditLine = `<div class="mobile-menu-item" style="cursor:default;color:var(--text-body);">
           <span class="menu-icon">⚡</span> Unlimited Recap credits
         </div>`;
       } else if (acct.state === "anonymous" && (acct.available_trial_credits || 0) > 0) {
@@ -7473,11 +7473,11 @@
         // "Buy more should be visible whenever there's a credit count").
         const n = acct.available_trial_credits;
         creditLine = `
-          <div class="mobile-menu-item" style="cursor:default;color:#a5b4fc;">
+          <div class="mobile-menu-item" style="cursor:default;color:var(--accent-hover);">
             <span class="menu-icon">⚡</span>
             ${n} free Recap credit${n === 1 ? "" : "s"} ready
           </div>
-          <button class="mobile-menu-item" onclick="closeMobileMenu(); openBuyCreditsModal()" style="color:#cbd5e1;">
+          <button class="mobile-menu-item" onclick="closeMobileMenu(); openBuyCreditsModal()" style="color:var(--text-body);">
             <span class="menu-icon">＋</span>
             Buy more credits
           </button>`;
@@ -7491,11 +7491,11 @@
           ? acct.user.email.slice(0, 28) + "…"
           : acct.user.email;
         identityRow = `
-          <div class="mobile-menu-item" style="cursor:default;color:#cbd5e1;flex-direction:column;align-items:flex-start;gap:2px;">
-            <span style="font-size:11px;color:#64748b;">Signed in as</span>
-            <span style="font-size:13px;color:#e2e8f0;font-weight:500;">${escHtml(shortEmail)}</span>
+          <div class="mobile-menu-item" style="cursor:default;color:var(--text-body);flex-direction:column;align-items:flex-start;gap:2px;">
+            <span style="font-size:11px;color:var(--text-label);">Signed in as</span>
+            <span style="font-size:13px;color:var(--text);font-weight:500;">${escHtml(shortEmail)}</span>
           </div>
-          <a href="/auth/signout" class="mobile-menu-item" style="text-decoration:none;color:#94a3b8;">
+          <a href="/auth/signout" class="mobile-menu-item" style="text-decoration:none;color:var(--text-muted);">
             <span class="menu-icon">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
@@ -7512,7 +7512,7 @@
         // exposed "Sign in", which left new visitors without an
         // obvious path to create an account.
         identityRow = `
-          <button class="mobile-menu-item" onclick="closeMobileMenu(); openTierSignupModal()" style="color:#a5b4fc;font-weight:600;">
+          <button class="mobile-menu-item" onclick="closeMobileMenu(); openTierSignupModal()" style="color:var(--accent-hover);font-weight:600;">
             <span class="menu-icon">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="9" cy="7" r="4"></circle>
@@ -7522,7 +7522,7 @@
               </svg>
             </span> Sign up
           </button>
-          <a href="/auth.html?intent=signin" class="mobile-menu-item" style="text-decoration:none;color:#94a3b8;">
+          <a href="/auth.html?intent=signin" class="mobile-menu-item" style="text-decoration:none;color:var(--text-muted);">
             <span class="menu-icon">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
@@ -7551,13 +7551,13 @@
           // already top tier — nothing to upgrade
         } else if (hasEntitlement("pro")) {
           upgradeRows = `
-            <button class="mobile-menu-item" onclick="closeMobileMenu(); openBuyModal('max')" style="color:#fde68a;font-weight:600;">
+            <button class="mobile-menu-item" onclick="closeMobileMenu(); openBuyModal('max')" style="color:var(--warning-faint);font-weight:600;">
               <span class="menu-icon">★</span>
               Upgrade to Max
             </button>`;
         } else {
           upgradeRows = `
-            <button class="mobile-menu-item" onclick="closeMobileMenu(); openBuyModal()" style="color:#c4b5fd;font-weight:600;">
+            <button class="mobile-menu-item" onclick="closeMobileMenu(); openBuyModal()" style="color:var(--premium-text);font-weight:600;">
               <span class="menu-icon">★</span>
               Upgrade
             </button>`;
@@ -7582,25 +7582,25 @@
       const tenants = ops.tenants;
       let body = "";
       if (ops.tenantsLoading && tenants == null) {
-        body = `<div style="font-size:12px;color:#94a3b8;padding:6px 0;">Loading tenants…</div>`;
+        body = `<div style="font-size:12px;color:var(--text-muted);padding:6px 0;">Loading tenants…</div>`;
       } else if (ops.tenantsError) {
-        body = `<div style="font-size:12px;color:#fca5a5;padding:6px 0;">Couldn't load tenants: ${escHtml(ops.tenantsError)}</div>`;
+        body = `<div style="font-size:12px;color:var(--error-soft);padding:6px 0;">Couldn't load tenants: ${escHtml(ops.tenantsError)}</div>`;
       } else if (Array.isArray(tenants) && tenants.length === 0) {
-        body = `<div style="font-size:12px;color:#94a3b8;padding:6px 0;">No tenants yet. The first email to sign up becomes the operator account (already you).</div>`;
+        body = `<div style="font-size:12px;color:var(--text-muted);padding:6px 0;">No tenants yet. The first email to sign up becomes the operator account (already you).</div>`;
       } else if (Array.isArray(tenants)) {
         body = tenants.map((t) => renderTenantRow(t)).join("");
       } else {
-        body = `<div style="font-size:12px;color:#94a3b8;padding:6px 0;">Tap Refresh to load.</div>`;
+        body = `<div style="font-size:12px;color:var(--text-muted);padding:6px 0;">Tap Refresh to load.</div>`;
       }
       return `
         <label class="field-label" style="margin-top:14px;display:flex;align-items:center;justify-content:space-between;">
           <span>Tenants${Array.isArray(tenants) ? ` (${tenants.length})` : ""}</span>
           <button onclick="loadAdminTenants()"
-            style="font-size:11px;font-weight:600;padding:4px 10px;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+            style="font-size:11px;font-weight:600;padding:4px 10px;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
             ${ops.tenantsLoading ? "Loading…" : "Refresh"}
           </button>
         </label>
-        <div class="tenants-list" style="border:1px solid #1e293b;background:rgba(15,23,42,0.4);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px;max-height:340px;overflow:auto;">
+        <div class="tenants-list" style="border:1px solid var(--border);background:rgba(15,23,42,0.4);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px;max-height:340px;overflow:auto;">
           ${body}
         </div>
       `;
@@ -7612,16 +7612,16 @@
       // primary status indicator now that the Keysat license is decoupled.
       const tierVal = (t.tier || "core").toLowerCase();
       const tierStyles = {
-        max: "background:rgba(234,179,8,0.15);color:#fde68a;border:1px solid rgba(234,179,8,0.4);",
-        pro: "background:rgba(168,85,247,0.15);color:#d8b4fe;border:1px solid rgba(168,85,247,0.4);",
-        core: "background:rgba(100,116,139,0.12);color:#94a3b8;border:1px solid rgba(100,116,139,0.35);",
+        max: "background:rgba(234,179,8,0.15);color:var(--warning-faint);border:1px solid rgba(234,179,8,0.4);",
+        pro: "background:rgba(168,85,247,0.15);color:var(--premium-text-soft);border:1px solid rgba(168,85,247,0.4);",
+        core: "background:rgba(100,116,139,0.12);color:var(--text-muted);border:1px solid rgba(100,116,139,0.35);",
       };
-      const tierBadge = `<span style="font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;${tierStyles[tierVal] || tierStyles.core}">${tierVal.toUpperCase()}</span>`;
+      const tierBadge = `<span style="font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;${tierStyles[tierVal] || tierStyles.core}">${tierVal.toUpperCase()}</span>`;
       // (Removed the "LIC" badge — a leftover pre-decoupling Keysat license
       // 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(129,140,248,0.15);color:#a5b4fc;border:1px solid rgba(129,140,248,0.4);border-radius:4px;">ADMIN</span>`
+        ? `<span style="font-size:10px;font-weight:700;padding:2px 6px;background:rgba(129,140,248,0.15);color:var(--accent-hover);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()
@@ -7630,7 +7630,7 @@
         ? new Date(t.last_signin_at).toLocaleDateString()
         : "never";
       const ipLine = t.signup_ip
-        ? `<span style="color:#475569;">· ${escHtml(t.signup_ip)}</span>`
+        ? `<span style="color:var(--text-faint);">· ${escHtml(t.signup_ip)}</span>`
         : "";
       const sessions = t.session_count || 0;
       const grantOpen = state.ops.grantOpenFor === t.id;
@@ -7641,14 +7641,14 @@
             value="${escHtml(state.ops.grantAmount)}"
             oninput="state.ops.grantAmount=this.value"
             onkeydown="if(event.key==='Enter')submitGrantCredits('${escHtml(t.id)}')"
-            style="flex:1;padding:6px 10px;font-size:12px;background:#0a0e1a;color:#e2e8f0;border:1px solid #334155;border-radius:6px;outline:none;" />
+            style="flex:1;padding:6px 10px;font-size:12px;background:var(--bg);color:var(--text);border:1px solid var(--border-hover);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:#818cf8;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:var(--accent);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)}')"
-            style="padding:6px 10px;font-size:11px;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+            style="padding:6px 10px;font-size:11px;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
             Cancel
           </button>
         </div>`
@@ -7661,7 +7661,7 @@
       const tierChoice = (val, label, color) =>
         `<button onclick="setTenantTier('${escHtml(t.id)}','${val}')"
           ${state.ops.tierBusy ? "disabled" : ""}
-          style="flex:1;padding:6px 10px;font-size:11px;font-weight:600;background:${tierVal === val ? color : "#1e293b"};color:${tierVal === val ? "#fff" : "#cbd5e1"};border:1px solid #334155;border-radius:6px;cursor:${state.ops.tierBusy ? "not-allowed" : "pointer"};${state.ops.tierBusy ? "opacity:0.5;" : ""}">${label}</button>`;
+          style="flex:1;padding:6px 10px;font-size:11px;font-weight:600;background:${tierVal === val ? color : "#1e293b"};color:${tierVal === val ? "#fff" : "#cbd5e1"};border:1px solid var(--border-hover);border-radius:6px;cursor:${state.ops.tierBusy ? "not-allowed" : "pointer"};${state.ops.tierBusy ? "opacity:0.5;" : ""}">${label}</button>`;
       const tierForm = tierOpen
         ? `
         <div style="display:flex;gap:6px;align-items:center;padding:6px 8px;background:rgba(168,85,247,0.06);border-top:1px solid rgba(168,85,247,0.2);">
@@ -7671,35 +7671,35 @@
         </div>`
         : "";
       return `
-        <div class="tenant-row" style="background:#0f172a;border:1px solid #1e293b;border-radius:6px;overflow:hidden;flex-shrink:0;">
+        <div class="tenant-row" style="background:var(--surface-inset);border:1px solid var(--border);border-radius:6px;overflow:hidden;flex-shrink:0;">
           <div style="padding:10px 12px;">
-            <div style="font-size:13px;color:#e2e8f0;font-weight:500;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;">
+            <div style="font-size:13px;color:var(--text);font-weight:500;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;">
               <span style="word-break:break-all;min-width:0;">${escHtml(t.email || "(no email)")}</span>
               ${adminBadge}
               ${t.is_admin ? "" : tierBadge}
             </div>
-            <div style="font-size:10.5px;color:#64748b;margin-top:4px;line-height:1.5;">
+            <div style="font-size:10px;color:var(--text-label);margin-top:4px;line-height:1.5;">
               ${balance} credit${balance === 1 ? "" : "s"} · ${sessions} session${sessions === 1 ? "" : "s"} · joined ${created} · last seen ${lastSeen} ${ipLine}
             </div>
             <div style="display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;justify-content:flex-end;">
               <button onclick="toggleGrantCreditsRow('${escHtml(t.id)}')"
                 title="Grant additional credits to this user"
-                style="padding:6px 10px;font-size:11px;font-weight:600;background:${grantOpen ? "#334155" : "#1e293b"};color:#cbd5e1;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+                style="padding:6px 10px;font-size:11px;font-weight:600;background:${grantOpen ? "#334155" : "#1e293b"};color:var(--text-body);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
                 ${grantOpen ? "Close" : "+ Credits"}
               </button>
               ${!t.is_admin && state.ops.operatorKeyConfigured ? `<button onclick="toggleTierRow('${escHtml(t.id)}')"
                 title="Set this user's subscription tier (Core / Pro / Max)"
-                style="padding:6px 10px;font-size:11px;font-weight:600;background:${tierOpen ? "#334155" : "#1e293b"};color:#cbd5e1;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+                style="padding:6px 10px;font-size:11px;font-weight:600;background:${tierOpen ? "#334155" : "#1e293b"};color:var(--text-body);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
                 ${tierOpen ? "Close" : "Tier"}
               </button>` : ""}
               ${sessions > 0 ? `<button onclick="revokeAllSessionsForTenant('${escHtml(t.id)}', '${escHtml((t.email || "").replace(/'/g, "\\'"))}')"
                 title="Sign this user out of every active session"
-                style="padding:6px 10px;font-size:11px;font-weight:600;background:#1e293b;color:#fca5a5;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+                style="padding:6px 10px;font-size:11px;font-weight:600;background:var(--border);color:var(--error-soft);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
                 Sign out
               </button>` : ""}
               ${!t.is_admin ? `<button onclick="adminDeleteTenant('${escHtml(t.id)}', '${escHtml((t.email || "").replace(/'/g, "\\'"))}')"
                 title="Delete this user and their library"
-                style="padding:6px 10px;font-size:11px;font-weight:600;background:#1e293b;color:#fca5a5;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+                style="padding:6px 10px;font-size:11px;font-weight:600;background:var(--border);color:var(--error-soft);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
                 Delete
               </button>` : ""}
             </div>
@@ -7725,58 +7725,58 @@
       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 ? "#818cf8" : "#1e293b"};color:${ops.activityHours === o.v ? "#fff" : "#94a3b8"};">${o.label}</button>`,
+            style="padding:4px 10px;font-size:11px;font-weight:600;border:1px solid var(--border-hover);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 = "";
       if (ops.activityLoading && a == null) {
-        body = `<div style="font-size:12px;color:#94a3b8;padding:6px 0;">Loading activity…</div>`;
+        body = `<div style="font-size:12px;color:var(--text-muted);padding:6px 0;">Loading activity…</div>`;
       } else if (ops.activityError) {
-        body = `<div style="font-size:12px;color:#fca5a5;padding:6px 0;">Couldn't load activity: ${escHtml(ops.activityError)}</div>`;
+        body = `<div style="font-size:12px;color:var(--error-soft);padding:6px 0;">Couldn't load activity: ${escHtml(ops.activityError)}</div>`;
       } else if (a) {
         const total = a.totals || {};
         const ipRows = (a.signups_by_ip || []).slice(0, 10);
         const linkIpRows = (a.magic_links_by_ip || []).slice(0, 10);
         const renderIpList = (rows, kind) =>
           rows.length === 0
-            ? `<div style="font-size:11px;color:#64748b;padding:6px 0;">No ${kind} in this window.</div>`
+            ? `<div style="font-size:11px;color:var(--text-label);padding:6px 0;">No ${kind} in this window.</div>`
             : rows
                 .map(
-                  (r) => `<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:#0f172a;border:1px solid #1e293b;border-radius:6px;margin-bottom:4px;font-size:11px;">
-                    <span style="color:#e2e8f0;font-family:ui-monospace,monospace;">${escHtml(r.ip || "—")}</span>
-                    <span style="color:#94a3b8;">${r.count} ${kind === "magic-link requests" ? `· ${r.distinct_emails || 0} emails` : ""}</span>
+                  (r) => `<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:var(--surface-inset);border:1px solid var(--border);border-radius:6px;margin-bottom:4px;font-size:11px;">
+                    <span style="color:var(--text);font-family:ui-monospace,monospace;">${escHtml(r.ip || "—")}</span>
+                    <span style="color:var(--text-muted);">${r.count} ${kind === "magic-link requests" ? `· ${r.distinct_emails || 0} emails` : ""}</span>
                   </div>`,
                 )
                 .join("");
         body = `
-          <div style="display:flex;gap:12px;padding:10px 12px;background:#0f172a;border:1px solid #1e293b;border-radius:8px;margin-bottom:10px;flex-wrap:wrap;">
+          <div style="display:flex;gap:12px;padding:10px 12px;background:var(--surface-inset);border:1px solid var(--border);border-radius:8px;margin-bottom:10px;flex-wrap:wrap;">
             <div style="flex:1;min-width:100px;">
-              <div style="font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;">Signups</div>
-              <div style="font-size:22px;color:#e2e8f0;font-weight:600;">${total.signups || 0}</div>
+              <div style="font-size:10px;color:var(--text-label);text-transform:uppercase;letter-spacing:0.5px;">Signups</div>
+              <div style="font-size:22px;color:var(--text);font-weight:600;">${total.signups || 0}</div>
             </div>
             <div style="flex:1;min-width:100px;">
-              <div style="font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;">Magic-link requests</div>
-              <div style="font-size:22px;color:#e2e8f0;font-weight:600;">${total.magic_link_requests || 0}</div>
+              <div style="font-size:10px;color:var(--text-label);text-transform:uppercase;letter-spacing:0.5px;">Magic-link requests</div>
+              <div style="font-size:22px;color:var(--text);font-weight:600;">${total.magic_link_requests || 0}</div>
             </div>
           </div>
           <div style="margin-bottom:8px;">
-            <div style="font-size:11px;color:#94a3b8;font-weight:600;margin-bottom:6px;">Signups by IP (top 10)</div>
+            <div style="font-size:11px;color:var(--text-muted);font-weight:600;margin-bottom:6px;">Signups by IP (top 10)</div>
             ${renderIpList(ipRows, "signups")}
           </div>
           <div>
-            <div style="font-size:11px;color:#94a3b8;font-weight:600;margin-bottom:6px;">Magic-link requests by IP (top 10) — high counts with few signups are sus</div>
+            <div style="font-size:11px;color:var(--text-muted);font-weight:600;margin-bottom:6px;">Magic-link requests by IP (top 10) — high counts with few signups are sus</div>
             ${renderIpList(linkIpRows, "magic-link requests")}
           </div>
         `;
       } else {
-        body = `<div style="font-size:12px;color:#94a3b8;padding:6px 0;">Tap a window above to load.</div>`;
+        body = `<div style="font-size:12px;color:var(--text-muted);padding:6px 0;">Tap a window above to load.</div>`;
       }
       return `
         <label class="field-label" style="margin-top:14px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;">
           <span>Recent Activity</span>
           <div style="display:flex;gap:4px;">${windowSelector}</div>
         </label>
-        <div style="border:1px solid #1e293b;background:rgba(15,23,42,0.4);border-radius:8px;padding:10px;">
+        <div style="border:1px solid var(--border);background:rgba(15,23,42,0.4);border-radius:8px;padding:10px;">
           ${body}
         </div>
       `;
@@ -7802,16 +7802,16 @@
         : "";
       return `
         <label class="field-label" style="margin-top:14px;">Claim a previous purchase</label>
-        <div style="font-size:11px;color:#94a3b8;line-height:1.55;margin-bottom:8px;">
+        <div style="font-size:11px;color:var(--text-muted);line-height:1.55;margin-bottom:8px;">
           Bought credits anonymously and they didn't transfer to your account?
           Paste the invoice ID from your purchase (shown after payment or in your BTCPay receipt email).
         </div>
         <div style="display:flex;gap:6px;align-items:stretch;">
           <input id="claim-purchase-input" type="text" placeholder="invoice ID"
             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;" />
+            style="flex:1;min-width:0;padding:8px 10px;background:var(--surface-inset);border:1px solid var(--border-hover);border-radius:6px;color:var(--text);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;outline:none;" />
           <button onclick="submitClaimPurchase()" ${submitting ? "disabled" : ""}
-            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;">
+            style="padding:8px 14px;background:var(--accent);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>
@@ -7869,11 +7869,11 @@
       const ms = state.mySessions;
       let body = "";
       if (ms.loading && ms.rows == null) {
-        body = `<div style="font-size:12px;color:#94a3b8;padding:6px 0;">Loading…</div>`;
+        body = `<div style="font-size:12px;color:var(--text-muted);padding:6px 0;">Loading…</div>`;
       } else if (ms.error) {
-        body = `<div style="font-size:12px;color:#fca5a5;padding:6px 0;">Couldn't load sessions.</div>`;
+        body = `<div style="font-size:12px;color:var(--error-soft);padding:6px 0;">Couldn't load sessions.</div>`;
       } else if (Array.isArray(ms.rows) && ms.rows.length === 0) {
-        body = `<div style="font-size:12px;color:#94a3b8;padding:6px 0;">No active sessions.</div>`;
+        body = `<div style="font-size:12px;color:var(--text-muted);padding:6px 0;">No active sessions.</div>`;
       } else if (Array.isArray(ms.rows)) {
         body = ms.rows
           .map((s) => {
@@ -7883,17 +7883,17 @@
             const last = s.last_used_at
               ? new Date(s.last_used_at).toLocaleString()
               : "—";
-            return `<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:#0f172a;border:1px solid #1e293b;border-radius:6px;margin-bottom:4px;gap:8px;">
+            return `<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--surface-inset);border:1px solid var(--border);border-radius:6px;margin-bottom:4px;gap:8px;">
               <div style="flex:1;min-width:0;">
-                <div style="font-size:12px;color:#e2e8f0;">${escHtml(shortUa)} ${isCurrent ? '<span style="font-size:10px;font-weight:700;color:#86efac;margin-left:6px;">CURRENT</span>' : ''}</div>
-                <div style="font-size:10.5px;color:#64748b;">${s.ip_address ? escHtml(s.ip_address) + ' · ' : ''}last used ${last}</div>
+                <div style="font-size:12px;color:var(--text);">${escHtml(shortUa)} ${isCurrent ? '<span style="font-size:10px;font-weight:700;color:var(--success-soft);margin-left:6px;">CURRENT</span>' : ''}</div>
+                <div style="font-size:10px;color:var(--text-label);">${s.ip_address ? escHtml(s.ip_address) + ' · ' : ''}last used ${last}</div>
               </div>
-              ${!isCurrent ? `<button onclick="revokeMySession('${escHtml(s.id)}')" style="padding:5px 10px;font-size:11px;font-weight:600;background:#1e293b;color:#fca5a5;border:1px solid #334155;border-radius:6px;cursor:pointer;">Revoke</button>` : ''}
+              ${!isCurrent ? `<button onclick="revokeMySession('${escHtml(s.id)}')" style="padding:5px 10px;font-size:11px;font-weight:600;background:var(--border);color:var(--error-soft);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">Revoke</button>` : ''}
             </div>`;
           })
           .join("");
       } else {
-        body = `<div style="font-size:12px;color:#94a3b8;padding:6px 0;">Tap Refresh to load.</div>`;
+        body = `<div style="font-size:12px;color:var(--text-muted);padding:6px 0;">Tap Refresh to load.</div>`;
       }
       const otherCount = Array.isArray(ms.rows)
         ? ms.rows.filter((s) => s.id !== ms.currentId).length
@@ -7902,14 +7902,14 @@
         <label class="field-label" style="margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;">
           <span>Active Sessions</span>
           <button onclick="loadMySessions()"
-            style="font-size:11px;font-weight:600;padding:4px 10px;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+            style="font-size:11px;font-weight:600;padding:4px 10px;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
             ${ms.loading ? "Loading…" : "Refresh"}
           </button>
         </label>
-        <div style="border:1px solid #1e293b;background:rgba(15,23,42,0.4);border-radius:8px;padding:8px;">
+        <div style="border:1px solid var(--border);background:rgba(15,23,42,0.4);border-radius:8px;padding:8px;">
           ${body}
           ${otherCount > 0 ? `<button onclick="revokeOtherSessions()"
-            style="margin-top:8px;width:100%;padding:8px 12px;font-size:12px;font-weight:600;background:#1e293b;color:#fca5a5;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+            style="margin-top:8px;width:100%;padding:8px 12px;font-size:12px;font-weight:600;background:var(--border);color:var(--error-soft);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
             Sign out of all other devices (${otherCount})
           </button>` : ''}
         </div>
@@ -7926,13 +7926,13 @@
         d.enabled === null || d.loading || d.saving ? "disabled" : "";
       return `
         <label class="field-label" style="margin-top:14px;">Daily digest</label>
-        <div style="border:1px solid #1e293b;background:rgba(15,23,42,0.4);border-radius:8px;padding:12px;">
-          <label style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#cbd5e1;cursor:${checkboxAttrs ? "default" : "pointer"};">
+        <div style="border:1px solid var(--border);background:rgba(15,23,42,0.4);border-radius:8px;padding:12px;">
+          <label style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-body);cursor:${checkboxAttrs ? "default" : "pointer"};">
             <input type="checkbox" ${d.enabled ? "checked" : ""} ${checkboxAttrs}
               onchange="setDigestEnabled(this.checked)" style="margin:2px 0 0;" />
             <span>
               Email me a daily digest
-              <span style="color:#64748b;display:block;font-size:10px;margin-top:2px;line-height:1.5;">
+              <span style="color:var(--text-label);display:block;font-size:10px;margin-top:2px;line-height:1.5;">
                 ${d.enabled === null
                   ? "Loading…"
                   : "A once-a-day email summarizing the recaps you added to your library in the last 24 hours. Off by default; skipped on days with nothing new."}
@@ -7950,13 +7950,13 @@
     // catches the rest.
     function renderTenantDangerZone() {
       return `
-        <label class="field-label" style="margin-top:14px;color:#fca5a5;">Danger Zone</label>
+        <label class="field-label" style="margin-top:14px;color:var(--error-soft);">Danger Zone</label>
         <div style="border:1px solid rgba(248,113,113,0.30);background:rgba(127,29,29,0.10);border-radius:8px;padding:14px;">
-          <div style="font-size:12px;color:#cbd5e1;line-height:1.55;margin-bottom:10px;">
+          <div style="font-size:12px;color:var(--text-body);line-height:1.55;margin-bottom:10px;">
             Delete your Recaps account, library, and active sessions. Your relay-side credit pool (if you're a paying customer) stays intact at the relay — let your license expire naturally or contact support.
           </div>
           <button onclick="deleteMyAccount()"
-            style="padding:8px 14px;font-size:12px;font-weight:600;background:transparent;color:#fca5a5;border:1px solid rgba(248,113,113,0.45);border-radius:6px;cursor:pointer;">
+            style="padding:8px 14px;font-size:12px;font-weight:600;background:transparent;color:var(--error-soft);border:1px solid rgba(248,113,113,0.45);border-radius:6px;cursor:pointer;">
             Delete account
           </button>
         </div>
@@ -8006,10 +8006,10 @@
         if (!lic.expiresAt) return "Never expires.";
         const date = new Date(lic.expiresAt).toLocaleDateString();
         if (expired) {
-          return `<span style="color:#fca5a5;">Expired ${date}</span>`;
+          return `<span style="color:var(--error-soft);">Expired ${date}</span>`;
         }
         if (expiringSoon) {
-          return `<span style="color:#fbbf24;">Renews ${date} · ${daysLeft} day${daysLeft === 1 ? "" : "s"} left</span>`;
+          return `<span style="color:var(--warning);">Renews ${date} · ${daysLeft} day${daysLeft === 1 ? "" : "s"} left</span>`;
         }
         return `Renews ${date} · ${daysLeft} day${daysLeft === 1 ? "" : "s"} left`;
       })();
@@ -8032,18 +8032,18 @@
         ctaLabel = "Upgrade";
       }
       const ctaStyle = !licensed || expiringSoon || expired
-        ? "background:#a855f7;color:#fff;border-color:#a855f7;"
-        : "background:#1e293b;color:#a5b4fc;border-color:#334155;";
+        ? "background:var(--premium);color:#fff;border-color:var(--premium);"
+        : "background:var(--border);color:var(--accent-hover);border-color:var(--border-hover);";
 
       return `
         <label class="field-label">Plan</label>
-        <div class="ytdlp-status" style="flex-direction:column;align-items:stretch;gap:10px;border-color:#334155;background:rgba(30,41,59,0.3);padding:14px;">
+        <div class="ytdlp-status" style="flex-direction:column;align-items:stretch;gap:10px;border-color:var(--border-hover);background:rgba(30,41,59,0.3);padding:14px;">
           <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;">
             <div>
-              <div style="font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:3px;">Tier</div>
+              <div style="font-size:11px;color:var(--text-label);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:3px;">Tier</div>
               <div style="display:flex;align-items:center;gap:8px;">
                 <span class="lic-tier ${tier.cls}" style="font-size:12px;">${tier.label}</span>
-                ${expiresLine ? `<span style="font-size:12px;color:#94a3b8;">${expiresLine}</span>` : ""}
+                ${expiresLine ? `<span style="font-size:12px;color:var(--text-muted);">${expiresLine}</span>` : ""}
               </div>
             </div>
             <button onclick="openBuyModal(${ctaPreselect ? `'${ctaPreselect}'` : ""})"
@@ -8065,44 +8065,44 @@
       let inner = "";
       if (!th.revealed) {
         inner = `
-          <div style="font-size:12px;color:#cbd5e1;line-height:1.55;margin-bottom:10px;">
+          <div style="font-size:12px;color:var(--text-body);line-height:1.55;margin-bottom:10px;">
             Run Recaps on your own StartOS server with the same license. Your subscription stays active on both your cloud account and your install.
           </div>
           <button onclick="revealLicenseKey()"
-            style="padding:8px 14px;font-size:12px;font-weight:600;background:#1e293b;color:#a5b4fc;border:1px solid #334155;border-radius:8px;cursor:pointer;">
+            style="padding:8px 14px;font-size:12px;font-weight:600;background:var(--border);color:var(--accent-hover);border:1px solid var(--border-hover);border-radius:8px;cursor:pointer;">
             Get my license key
           </button>`;
       } else if (th.loading) {
-        inner = `<div style="font-size:12px;color:#94a3b8;padding:6px 0;">Loading…</div>`;
+        inner = `<div style="font-size:12px;color:var(--text-muted);padding:6px 0;">Loading…</div>`;
       } else if (th.error) {
-        inner = `<div style="font-size:12px;color:#fca5a5;padding:6px 0;">${escHtml(th.error)}</div>
+        inner = `<div style="font-size:12px;color:var(--error-soft);padding:6px 0;">${escHtml(th.error)}</div>
           <button onclick="state.takeHome.revealed=false;state.takeHome.error=null;render();"
-            style="margin-top:6px;padding:6px 12px;font-size:11px;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;">Close</button>`;
+            style="margin-top:6px;padding:6px 12px;font-size:11px;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">Close</button>`;
       } else if (th.licenseKey) {
         inner = `
-          <div style="font-size:12px;color:#cbd5e1;line-height:1.55;margin-bottom:8px;">
+          <div style="font-size:12px;color:var(--text-body);line-height:1.55;margin-bottom:8px;">
             Paste this on your self-hosted Recaps (Settings → I have a key):
           </div>
-          <div style="font-family:ui-monospace,monospace;font-size:11.5px;color:#e2e8f0;background:#0a0e1a;border:1px solid #334155;border-radius:8px;padding:10px 12px;word-break:break-all;margin-bottom:8px;">
+          <div style="font-family:ui-monospace,monospace;font-size:12px;color:var(--text);background:var(--bg);border:1px solid var(--border-hover);border-radius:8px;padding:10px 12px;word-break:break-all;margin-bottom:8px;">
             ${escHtml(th.licenseKey)}
           </div>
           <div style="display:flex;gap:6px;flex-wrap:wrap;">
             <button onclick="copyLicenseKey()"
-              style="padding:6px 14px;font-size:12px;font-weight:600;background:#818cf8;color:#fff;border:none;border-radius:6px;cursor:pointer;">
+              style="padding:6px 14px;font-size:12px;font-weight:600;background:var(--accent);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();"
-              style="padding:6px 14px;font-size:12px;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+              style="padding:6px 14px;font-size:12px;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
               Hide
             </button>
           </div>
-          <div style="font-size:11px;color:#64748b;margin-top:10px;line-height:1.5;">
+          <div style="font-size:11px;color:var(--text-label);margin-top:10px;line-height:1.5;">
             Treat this like a password — anyone with the key can use your subscription's credit pool until it expires.
           </div>`;
       }
       return `
-        <div style="border-top:1px solid #334155;padding-top:12px;margin-top:6px;">
-          <div style="font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">
+        <div style="border-top:1px solid var(--border-hover);padding-top:12px;margin-top:6px;">
+          <div style="font-size:11px;color:var(--text-label);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">
             Take Recaps Home
           </div>
           ${inner}
@@ -8155,16 +8155,16 @@
       let bodyHtml = "";
       if (user) {
         const emailLine = user.email
-          ? `<div style="font-size:13px;color:#e2e8f0;font-weight:500;">${escHtml(user.email)}</div>`
+          ? `<div style="font-size:13px;color:var(--text);font-weight:500;">${escHtml(user.email)}</div>`
           : "";
         bodyHtml = `
           ${emailLine}
-          <div style="font-size:11px;color:#94a3b8;margin-top:4px;">
+          <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">
             ${user.has_license ? "Pro account" : "Free account"}
           </div>
           <div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;">
             <a href="/auth/signout"
-               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;"
+               style="padding:6px 14px;font-size:12px;font-weight:600;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;"
                onmouseover="this.style.background='#334155';this.style.color='#e2e8f0'"
                onmouseout="this.style.background='#1e293b';this.style.color='#94a3b8'">Sign out</a>
           </div>`;
@@ -8177,35 +8177,35 @@
         // Free path). closeSettings runs first so the modal swap
         // is clean (no double overlay flash).
         bodyHtml = `
-          <div style="font-size:13px;color:#e2e8f0;font-weight:500;">Free trial</div>
-          <div style="font-size:11px;color:#94a3b8;margin-top:4px;">
+          <div style="font-size:13px;color:var(--text);font-weight:500;">Free trial</div>
+          <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">
             ${remaining} of ${trial.credits_total} trial credit${trial.credits_total === 1 ? "" : "s"} remaining
           </div>
-          <div style="font-size:11px;color:#cbd5e1;margin-top:8px;line-height:1.5;">
+          <div style="font-size:11px;color:var(--text-body);margin-top:8px;line-height:1.5;">
             Sign up free to get more credits and save your summaries to a library.
           </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:#818cf8;color:#fff;border:none;border-radius:6px;cursor:pointer;">Sign up</button>
+               style="padding:6px 14px;font-size:12px;font-weight:600;background:var(--accent);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>
+               style="padding:6px 14px;font-size:12px;font-weight:600;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;">Sign in</a>
           </div>`;
       } else {
         // Not-signed-in, no trial cookie. Same dual CTA as the trial
         // branch — Sign up opens the 3-tier modal so the visitor
         // sees pricing options before committing.
         bodyHtml = `
-          <div style="font-size:13px;color:#e2e8f0;font-weight:500;">Not signed in</div>
+          <div style="font-size:13px;color:var(--text);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:#818cf8;color:#fff;border:none;border-radius:6px;cursor:pointer;">Sign up</button>
+               style="padding:6px 14px;font-size:12px;font-weight:600;background:var(--accent);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>
+               style="padding:6px 14px;font-size:12px;font-weight:600;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;">Sign in</a>
           </div>`;
       }
       return `
         <label class="field-label">Account</label>
-        <div class="ytdlp-status" style="flex-direction:column;align-items:flex-start;gap:4px;border-color:#334155;background:rgba(30,41,59,0.3);padding:14px;">
+        <div class="ytdlp-status" style="flex-direction:column;align-items:flex-start;gap:4px;border-color:var(--border-hover);background:rgba(30,41,59,0.3);padding:14px;">
           ${bodyHtml}
         </div>
       `;
@@ -8215,12 +8215,12 @@
 
     function renderLibraryTransfer() {
       return '<label class="field-label" style="margin-top:12px;">Library Transfer</label>' +
-        '<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 class="ytdlp-status" style="flex-direction:column;align-items:flex-start;gap:8px;border-color:var(--border-hover);background:rgba(30,41,59,0.3);">' +
+        '<span style="font-size:11px;color:var(--text-muted);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:#818cf8;color:#fff;border:none;border-radius:6px;cursor:pointer;" ' +
+        '<button onclick="exportLibrary()" style="padding:6px 14px;font-size:12px;font-weight:600;background:var(--accent);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;" ' +
+        '<label style="display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:12px;font-weight:600;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);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' +
         '<input type="file" accept=".json" style="display:none" onchange="importLibrary(this.files[0])">' +
@@ -8250,7 +8250,7 @@
       if (!file) return;
       const resultEl = document.getElementById("library-transfer-result");
       try {
-        if (resultEl) resultEl.innerHTML = '<span style="color:#fbbf24;font-size:12px;">Importing...</span>';
+        if (resultEl) resultEl.innerHTML = '<span style="color:var(--warning);font-size:12px;">Importing...</span>';
         const text = await file.text();
         const data = JSON.parse(text);
         const res = await fetch(`${API_BASE}/api/library/import`, {
@@ -8260,12 +8260,12 @@
         });
         const result = await res.json();
         if (result.error) throw new Error(result.error);
-        if (resultEl) resultEl.innerHTML = '<span style="color:#4ade80;font-size:12px;">Imported ' + result.imported + ' sessions (' + result.skipped + ' already existed)</span>';
+        if (resultEl) resultEl.innerHTML = '<span style="color:var(--success-text);font-size:12px;">Imported ' + result.imported + ' sessions (' + result.skipped + ' already existed)</span>';
         await loadHistory();
         render();
         showToast("Library imported: " + result.imported + " sessions added", "✓");
       } catch (e) {
-        if (resultEl) resultEl.innerHTML = '<span style="color:#f87171;font-size:12px;">Import failed: ' + escHtml(e.message) + '</span>';
+        if (resultEl) resultEl.innerHTML = '<span style="color:var(--error-text);font-size:12px;">Import failed: ' + escHtml(e.message) + '</span>';
         showToast("Import failed: " + e.message, "!");
       }
     }
@@ -8338,7 +8338,7 @@
             </span>
             <button onclick="${ctaHandler}"
               style="padding:6px 12px; font-size:11px; font-weight:600;
-                background:#a855f7; color:#fff; border:none; border-radius:6px; cursor:pointer; white-space:nowrap;"
+                background:var(--premium); color:#fff; border:none; border-radius:6px; cursor:pointer; white-space:nowrap;"
               onmouseover="this.style.background='#9333ea'"
               onmouseout="this.style.background='#a855f7'">
               ${ctaLabel} &rarr;
@@ -8354,18 +8354,18 @@
           <span style="font-size:12px; color:#a78bfa; font-weight:500; flex:1; min-width:160px;">
             Channel detected — subscribe to track new videos
           </span>
-          <label style="font-size:10px; color:#64748b; white-space:nowrap;">Since:</label>
+          <label style="font-size:10px; color:var(--text-label); white-space:nowrap;">Since:</label>
           <input type="date" value="${escHtml(state.addingSubSince || todayStr)}"
             oninput="state.addingSubSince=this.value"
             title="Only process videos uploaded on or after this date"
             style="padding:5px 6px; font-size:11px;
               border:1px solid rgba(139,92,246,0.2); border-radius:6px; outline:none;
-              background:#0f172a; color:#94a3b8; cursor:pointer;" />
+              background:var(--surface-inset); color:var(--text-muted); cursor:pointer;" />
           <label style="display:inline-flex; align-items:center; gap:6px; font-size:11px; color:${state.addingSubAuto ? "#fbbf24" : "#94a3b8"}; cursor:pointer; white-space:nowrap;"
             title="When ON, new videos from this subscription bypass the approval queue and start processing immediately.">
             <input type="checkbox" ${state.addingSubAuto ? "checked" : ""}
               onchange="state.addingSubAuto=this.checked; render()"
-              style="accent-color:#fbbf24; cursor:pointer;" />
+              style="accent-color:var(--warning); cursor:pointer;" />
             ⚡ Auto-process new videos
           </label>
         </div>
@@ -8526,7 +8526,7 @@
       if (!logEl) return;
       if (state.subCheckLog.length > 0) {
         logEl.style.display = "block";
-        logEl.innerHTML = 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("");
+        logEl.innerHTML = state.subCheckLog.map(l => `<div style="font-size:11px;color:var(--text-muted);padding:1px 0;font-family:'SF Mono',Menlo,monospace;">${escHtml(l.msg)}</div>`).join("");
         logEl.scrollTop = logEl.scrollHeight;
       }
     }
@@ -8640,14 +8640,14 @@
               oninput="state.addingSubSince=this.value"
               title="Only process videos uploaded on or after this date"
               style="flex:0 0 auto; padding:9px 8px; font-size:11px;
-                border:1px solid #1e293b; border-radius:8px; outline:none;
-                background:#0f172a; color:#94a3b8; cursor:pointer;" />
+                border:1px solid var(--border); border-radius:8px; outline:none;
+                background:var(--surface-inset); color:var(--text-muted); cursor:pointer;" />
             <button class="sub-add-btn" onclick="addSubscription()"
               ${!state.addingSubUrl.trim() || state.addingSubLoading ? "disabled" : ""}>
               ${state.addingSubLoading ? "Adding..." : "Subscribe"}
             </button>
           </div>
-          <p style="font-size:10px; color:#475569; margin:-4px 0 8px;">Date = only process videos/episodes published on or after this date. Defaults to today.</p>
+          <p style="font-size:10px; color:var(--text-faint); margin:-4px 0 8px;">Date = only process videos/episodes published on or after this date. Defaults to today.</p>
           ${state.subscriptions.length === 0
             ? `<div class="sub-empty">No subscriptions yet. Add a channel URL or podcast RSS feed.</div>`
             : state.subscriptions.map(sub => {
@@ -8662,13 +8662,13 @@
                     <span class="sub-since-link" onclick="event.stopPropagation(); this.nextElementSibling.showPicker?.()" title="Click to change date" style="cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px;">Since ${sinceDate}</span><input type="date" value="${sinceIso}" style="position:absolute;opacity:0;width:0;height:0;pointer-events:none;" onchange="updateSubSince('${sub.id}', this.value)" />
                     ${sub.lastChecked ? " · Checked " + timeAgo(sub.lastChecked) : ""}
                     ${sub.paused ? " · Paused" : ""}
-                    ${sub.autoDownload ? ' · <span style="color:#fbbf24">\u26A1 Auto-process</span>' : ""}
+                    ${sub.autoDownload ? ' · <span style="color:var(--warning)">\u26A1 Auto-process</span>' : ""}
                   </div>
                 </div>
                 <div class="sub-actions">
                   <button class="sub-action" onclick="event.stopPropagation(); toggleAutoDownload('${sub.id}')"
                     title="${sub.autoDownload ? "Auto-process: ON — new videos skip the queue and process immediately. Click to disable." : "Auto-process: OFF — new videos require approval in the queue. Click to enable auto-processing."}"
-                    style="${sub.autoDownload ? "color:#fbbf24" : ""}">
+                    style="${sub.autoDownload ? "color:var(--warning)" : ""}">
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="${sub.autoDownload ? "#fbbf24" : "none"}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                       <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                     </svg>
@@ -8691,14 +8691,14 @@
           ${state.subscriptions.length > 0 ? `
             <button id="check-subs-btn" onclick="checkSubscriptionsNow()" style="
               margin-top: 10px; padding: 7px 14px; font-size: 11px; font-weight: 600;
-              background: none; color: #64748b; border: 1px solid #1e293b; border-radius: 6px;
+              background: none; color: var(--text-label); border: 1px solid var(--border); border-radius: 6px;
               cursor: pointer; transition: all 0.15s; width: 100%;
             " onmouseover="this.style.background='#1e293b';this.style.color='#94a3b8'"
                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:#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 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:var(--bg); border:1px solid var(--border); border-radius:8px; max-height:200px; overflow-y:auto; user-select:text; outline:none;">
+              ${state.subCheckLog.map(l => `<div style="font-size:11px;color:var(--text-muted);padding:1px 0;font-family:'SF Mono',Menlo,monospace;">${escHtml(l.msg)}</div>`).join("")}
             </div>
           ` : ""}
         </div>
@@ -8750,12 +8750,12 @@
           </div>
           <div class="results-right">
             <div style="padding:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;">
-              <div style="font-size:13px;color:#fca5a5;font-weight:600;">Processing failed before summary was ready.</div>
-              <div style="font-size:12px;color:#94a3b8;line-height:1.5;">
+              <div style="font-size:13px;color:var(--error-soft);font-weight:600;">Processing failed before summary was ready.</div>
+              <div style="font-size:12px;color:var(--text-muted);line-height:1.5;">
                 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:#818cf8;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;">
+                style="background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;">
                 Try again
               </button>
             </div>
@@ -8775,11 +8775,11 @@
       if (isPod) {
         return `
           <div style="padding: 0 4px;">
-            <div style="display:flex; align-items:center; gap:10px; padding:12px 0 8px; border-bottom:1px solid #1e293b; margin-bottom:12px;">
+            <div style="display:flex; align-items:center; gap:10px; padding:12px 0 8px; border-bottom:1px solid var(--border); margin-bottom:12px;">
               <span style="font-size:20px;">🎙</span>
               <div style="flex:1; min-width:0;">
-                <div style="font-size:14px; font-weight:600; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${escHtml(state.videoTitle || "Podcast Episode")}</div>
-                <div style="font-size:11px; color:#64748b;">Processing podcast audio...</div>
+                <div style="font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${escHtml(state.videoTitle || "Podcast Episode")}</div>
+                <div style="font-size:11px; color:var(--text-label);">Processing podcast audio...</div>
               </div>
             </div>
             <div class="chunks-scroll" style="max-height: calc(100vh - 200px);">
@@ -8858,11 +8858,11 @@
       // Browser cache caveat: if it ever shows up larger than this,
       // hard-refresh — the spec-side renderer is locked at 10px.
       const streamingIndicator = state.streaming
-        ? `<div class="streaming-indicator" style="padding:7px 14px; text-align:center; color:#94a3b8; font-size:12px !important; line-height:1.4; opacity:0.95; letter-spacing:0.02em;">⟳ Analyzing window ${state.streamWindowsDone}${state.streamWindowsTotal ? " / " + state.streamWindowsTotal : ""}…</div>`
+        ? `<div class="streaming-indicator" style="padding:7px 14px; text-align:center; color:var(--text-muted); font-size:12px !important; line-height:1.4; opacity:0.95; letter-spacing:0.02em;">⟳ Analyzing window ${state.streamWindowsDone}${state.streamWindowsTotal ? " / " + state.streamWindowsTotal : ""}…</div>`
         : "";
       const chunksHtml = state.chunks.map((chunk, i) => renderChunk(chunk, i)).join("");
       const placeholder = state.chunks.length === 0 && stillAnalyzing
-        ? `<div style="padding:24px 14px; text-align:center; color:#64748b; font-size:12px;">Topics will appear here as the model analyzes each section…</div>`
+        ? `<div style="padding:24px 14px; text-align:center; color:var(--text-label); font-size:12px;">Topics will appear here as the model analyzes each section…</div>`
         : "";
       // Preserve scroll position across the innerHTML swap so the
       // operator's "I was reading the third section" view doesn't
@@ -8934,9 +8934,9 @@
           if (stage !== 4) pulse = "animation: top-breadcrumb-pulse 1.2s infinite;";
         }
         const dot = `<span style="color:${dotColor};font-size:11px;${pulse}">●</span>`;
-        const text = `<span style="color:${textColor};font-size:10.5px;font-weight:600;">${escHtml(label)}</span>`;
+        const text = `<span style="color:${textColor};font-size:10px;font-weight:600;">${escHtml(label)}</span>`;
         const arrow = i < labels.length - 1
-          ? ` <span style="margin:0 5px; color:#475569;">→</span> `
+          ? ` <span style="margin:0 5px; color:var(--text-faint);">→</span> `
           : "";
         return dot + " " + text + arrow;
       }).join("");
@@ -8985,8 +8985,8 @@
       // result event arrives and clears state.streaming.
       const stillAnalyzing = state.streaming;
       const streamingIndicator = stillAnalyzing
-        ? `<div class="streaming-indicator" style="padding:9px 14px; text-align:center; color:#94a3b8; font-size:12px !important; line-height:1.4; opacity:0.95; letter-spacing:0.02em; border-top:1px dashed #1e293b; margin-top:8px;">
-             <span class="streaming-dot" style="display:inline-block; width:6px; height:6px; border-radius:50%; background:#818cf8; margin-right:7px; animation:pulse 1.2s ease-in-out infinite;"></span>
+        ? `<div class="streaming-indicator" style="padding:9px 14px; text-align:center; color:var(--text-muted); font-size:12px !important; line-height:1.4; opacity:0.95; letter-spacing:0.02em; border-top:1px dashed var(--border); margin-top:8px;">
+             <span class="streaming-dot" style="display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:7px; animation:pulse 1.2s ease-in-out infinite;"></span>
              Analyzing topics… ${state.streamWindowsDone || 0}${state.streamWindowsTotal ? "/" + state.streamWindowsTotal : ""} windows ready
            </div>`
         : "";
@@ -8997,8 +8997,8 @@
             <div style="display:flex; align-items:center; gap:10px; padding:12px 0 8px;">
               <span style="font-size:20px;">🎙</span>
               <div style="flex:1; min-width:0;">
-                <div style="font-size:14px; font-weight:600; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${escHtml(state.videoTitle || "Podcast Episode")}</div>
-                <div style="font-size:11px; color:#64748b;">${stillAnalyzing ? "" : `${state.chunks.length} topics &middot; ${formatTime(totalDuration)} total`}</div>
+                <div style="font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${escHtml(state.videoTitle || "Podcast Episode")}</div>
+                <div style="font-size:11px; color:var(--text-label);">${stillAnalyzing ? "" : `${state.chunks.length} topics &middot; ${formatTime(totalDuration)} total`}</div>
               </div>
               <button class="expand-btn" onclick="toggleVideoMinimize()" title="${state.videoMinimized ? "Show player" : "Hide player"}" style="margin-right:4px;">
                 ${state.videoMinimized ? "Show Player" : "Hide Player"}
@@ -9012,11 +9012,11 @@
               <audio id="podcast-audio" preload="none" style="width:100%; height:36px; margin-bottom:12px; border-radius:8px; outline:none;"
                 controls src="${escHtml(state.url)}"></audio>
             ` : ""}
-            <div style="border-top:1px solid #1e293b; padding-top:12px;"></div>
+            <div style="border-top:1px solid var(--border); padding-top:12px;"></div>
             ${renderSpeakersLegend()}
             <div class="chunks-scroll" style="max-height: calc(100vh - ${state.videoMinimized ? "200" : "260"}px);">
               ${state.chunks.map((chunk, i) => renderChunk(chunk, i)).join("")}
-              ${state.chunks.length === 0 && stillAnalyzing ? `<div style="padding:24px 14px; text-align:center; color:#64748b; font-size:12px;">Topics will appear here as the model analyzes each section…</div>` : ""}
+              ${state.chunks.length === 0 && stillAnalyzing ? `<div style="padding:24px 14px; text-align:center; color:var(--text-label); font-size:12px;">Topics will appear here as the model analyzes each section…</div>` : ""}
               ${streamingIndicator}
             </div>
           </div>
@@ -9069,7 +9069,7 @@
             ${renderSpeakersLegend()}
             <div class="chunks-scroll">
               ${state.chunks.map((chunk, i) => renderChunk(chunk, i)).join("")}
-              ${state.chunks.length === 0 && stillAnalyzing ? `<div style="padding:24px 14px; text-align:center; color:#64748b; font-size:12px;">Topics will appear here as the model analyzes each section…</div>` : ""}
+              ${state.chunks.length === 0 && stillAnalyzing ? `<div style="padding:24px 14px; text-align:center; color:var(--text-label); font-size:12px;">Topics will appear here as the model analyzes each section…</div>` : ""}
               ${streamingIndicator}
             </div>
           </div>
@@ -9087,7 +9087,7 @@
       const url = `https://www.youtube.com/watch?v=${encodeURIComponent(state.videoId)}`;
       return `
         <a href="${url}" target="_blank" rel="noopener"
-          style="display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#94a3b8;text-decoration:none;margin-top:6px;"
+          style="display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);text-decoration:none;margin-top:6px;"
           title="Open in YouTube (some channels disable embedding)">
           Watch on YouTube
           <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.7">
@@ -9872,7 +9872,7 @@
 
     function renderYtdlpStatus() {
       if (state.ytdlpVersion === null && !state.ytdlpUpdateAvailable) {
-        return `<div class="ytdlp-status" style="color:#475569;background:rgba(255,255,255,0.02);border:1px solid #1e293b">Checking yt-dlp...</div>`;
+        return `<div class="ytdlp-status" style="color:var(--text-faint);background:rgba(255,255,255,0.02);border:1px solid var(--border)">Checking yt-dlp...</div>`;
       }
       if (state.ytdlpVersion === false) {
         return `<div class="ytdlp-status ytdlp-err">
@@ -9900,26 +9900,26 @@
     // just not displayed anywhere user-visible.
 
     function renderCookieStatus() {
-      const uploadBtn = '<label style="display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-size:11px;font-weight:600;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;transition:all 0.15s;" ' +
+      const uploadBtn = '<label style="display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-size:11px;font-weight:600;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;transition:all 0.15s;" ' +
         'onmouseover="this.style.background=\'#334155\';this.style.color=\'#e2e8f0\'" onmouseout="this.style.background=\'#1e293b\';this.style.color=\'#94a3b8\'">' +
         'Upload cookies.txt' +
         '<input type="file" accept=".txt,.cookies" style="display:none" onchange="uploadCookieFile(this.files[0])">' +
         '</label>';
-      const testBtn = '<button onclick="testCookies()" style="padding:5px 12px;font-size:11px;font-weight:600;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;" ' +
+      const testBtn = '<button onclick="testCookies()" style="padding:5px 12px;font-size:11px;font-weight:600;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;" ' +
         'onmouseover="this.style.background=\'#334155\'" onmouseout="this.style.background=\'#1e293b\'">Test Cookies</button>';
-      const deleteBtn = '<button onclick="deleteCookieFile()" style="padding:5px 12px;font-size:11px;font-weight:600;background:rgba(239,68,68,0.1);color:#f87171;border:1px solid rgba(239,68,68,0.2);border-radius:6px;cursor:pointer;">Remove</button>';
+      const deleteBtn = '<button onclick="deleteCookieFile()" style="padding:5px 12px;font-size:11px;font-weight:600;background:rgba(239,68,68,0.1);color:var(--error-text);border:1px solid rgba(239,68,68,0.2);border-radius:6px;cursor:pointer;">Remove</button>';
 
       let html = "";
 
       // ── PO Token Plugin status (most important for bot detection) ──
       {
         html += '<label class="field-label">YouTube Bot Detection</label>' +
-          '<div class="ytdlp-status" style="flex-direction:column;align-items:flex-start;gap:6px;border-color:#334155;background:rgba(30,41,59,0.3);">' +
-          '<span style="font-size:12px;color:#e2e8f0;">Smart retry: <strong style="color:#4ade80;">enabled</strong></span>' +
-          '<span style="font-size:11px;color:#94a3b8;line-height:1.5;">' +
+          '<div class="ytdlp-status" style="flex-direction:column;align-items:flex-start;gap:6px;border-color:var(--border-hover);background:rgba(30,41,59,0.3);">' +
+          '<span style="font-size:12px;color:var(--text);">Smart retry: <strong style="color:var(--success-text);">enabled</strong></span>' +
+          '<span style="font-size:11px;color:var(--text-muted);line-height:1.5;">' +
           'If YouTube blocks a download ("Sign in to confirm you\'re not a bot"), the app ' +
           'will automatically wait and retry up to 3 times with increasing delays (30s, 60s, 2min).<br><br>' +
-          '<span style="color:#64748b;">Common causes of blocks: VPN/proxy use, too many downloads in a short period, ' +
+          '<span style="color:var(--text-label);">Common causes of blocks: VPN/proxy use, too many downloads in a short period, ' +
           'or YouTube\'s general anti-bot measures. Turning off VPN and waiting usually resolves it.</span></span>' +
           '</div>';
       }
@@ -9927,16 +9927,16 @@
       // ── Cookie status ──
       let cookieHtml = "";
       if (state.cookieMethod === "none") {
-        cookieHtml = '<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="color:#94a3b8;">No YouTube cookies configured</span>' +
-          '<span style="font-size:11px;color:#64748b;line-height:1.5;">' +
+        cookieHtml = '<div class="ytdlp-status" style="flex-direction:column;align-items:flex-start;gap:8px;border-color:var(--border-hover);background:rgba(30,41,59,0.3);">' +
+          '<span style="color:var(--text-muted);">No YouTube cookies configured</span>' +
+          '<span style="font-size:11px;color:var(--text-label);line-height:1.5;">' +
           'Cookies authenticate your server with YouTube to avoid bot detection blocks and access restricted videos.<br><br>' +
-          '<strong style="color:#94a3b8;">To set up:</strong><br>' +
+          '<strong style="color:var(--text-muted);">To set up:</strong><br>' +
           '1. Install the "Get cookies.txt LOCALLY" browser extension on your laptop<br>' +
           '2. Go to youtube.com and make sure you\'re signed in<br>' +
           '3. Click the extension icon and export cookies for youtube.com<br>' +
           '4. Upload the downloaded cookies.txt file here<br><br>' +
-          '<span style="color:#fbbf24;">Note:</span> Cookies expire after ~2 weeks. You\'ll need to re-upload periodically.</span>' +
+          '<span style="color:var(--warning);">Note:</span> Cookies expire after ~2 weeks. You\'ll need to re-upload periodically.</span>' +
           '<div style="display:flex;gap:6px;flex-wrap:wrap;">' + uploadBtn + '</div>' +
           '</div>';
       } else if (state.cookieMethod === "cookies.txt") {
@@ -9945,7 +9945,7 @@
         if (state.cookieFileExpiring) {
           cookieHtml = '<div class="ytdlp-status ytdlp-warn" style="flex-direction:column;align-items:flex-start;gap:8px;">' +
             '<span>cookies.txt is ' + ageStr + ' \u2014 likely expiring soon</span>' +
-            '<span style="font-size:11px;color:#94a3b8;line-height:1.4;">Cookies typically expire after ~14 days. Upload a fresh cookies.txt to keep Premium/ad-free downloads.</span>' +
+            '<span style="font-size:11px;color:var(--text-muted);line-height:1.4;">Cookies typically expire after ~14 days. Upload a fresh cookies.txt to keep Premium/ad-free downloads.</span>' +
             '<div style="display:flex;gap:6px;flex-wrap:wrap;">' + uploadBtn + ' ' + testBtn + ' ' + deleteBtn + '</div>' +
             '</div>';
         } else {
@@ -9958,7 +9958,7 @@
         // Browser cookies
         cookieHtml = '<div class="ytdlp-status ytdlp-ok" style="flex-direction:column;align-items:flex-start;gap:8px;">' +
           '<span>YouTube auth: <strong>' + escHtml(state.cookieMethod) + '</strong> browser cookies</span>' +
-          '<span style="font-size:11px;color:#94a3b8;">Stay signed into YouTube in ' + escHtml(state.cookieMethod) + '. For remote servers, upload a cookies.txt instead.</span>' +
+          '<span style="font-size:11px;color:var(--text-muted);">Stay signed into YouTube in ' + escHtml(state.cookieMethod) + '. For remote servers, upload a cookies.txt instead.</span>' +
           '<div style="display:flex;gap:6px;flex-wrap:wrap;">' + uploadBtn + ' ' + testBtn + '</div>' +
           '</div>';
       }
@@ -10023,8 +10023,8 @@
       const el = document.getElementById("cookie-test-result");
       if (!el) return;
       el.innerHTML = '<div style="margin-top:6px;padding:8px 12px;border-radius:6px;font-size:12px;' +
-        (isError ? 'background:rgba(239,68,68,0.1);color:#f87171;border:1px solid rgba(239,68,68,0.2);' :
-                   'background:rgba(34,197,94,0.1);color:#4ade80;border:1px solid rgba(34,197,94,0.2);') +
+        (isError ? 'background:rgba(239,68,68,0.1);color:var(--error-text);border:1px solid rgba(239,68,68,0.2);' :
+                   'background:rgba(34,197,94,0.1);color:var(--success-text);border:1px solid rgba(34,197,94,0.2);') +
         '">' + escHtml(msg) + '</div>';
       // Auto-clear after 8 seconds
       setTimeout(() => { if (el) el.innerHTML = ""; }, 8000);
@@ -10056,7 +10056,7 @@
             <div style="display:flex; align-items:center; gap:8px;">
               ${state.logs.length > 0 ? `
                 <button onclick="clearLogHistory()" title="Clear all activity-log entries"
-                  style="background:transparent; border:1px solid #334155; color:#94a3b8; padding:4px 10px; border-radius:6px; cursor:pointer; font-size:11px; font-weight:600;"
+                  style="background:transparent; border:1px solid var(--border-hover); color:var(--text-muted); padding:4px 10px; border-radius:6px; cursor:pointer; font-size:11px; font-weight:600;"
                   onmouseover="this.style.borderColor='#dc2626'; this.style.color='#f87171';"
                   onmouseout="this.style.borderColor='#334155'; this.style.color='#94a3b8';">
                   Clear
@@ -10094,10 +10094,10 @@
           const chevron = activeCollapsed ? "▸" : "▾";
           out += `
             <div class="log-entry log-group-header" onclick="toggleLogGroup(${i})"
-              style="cursor:pointer; user-select:none; border-top:1px solid #1e293b; margin-top:8px; padding-top:8px; color:#818cf8; font-weight:600; font-size:11px; display:flex; align-items:center; gap:6px;">
+              style="cursor:pointer; user-select:none; border-top:1px solid var(--border); margin-top:8px; padding-top:8px; color:var(--accent); font-weight:600; font-size:11px; display:flex; align-items:center; gap:6px;">
               <span style="display:inline-block; width:10px; transform:translateY(-1px);">${chevron}</span>
               <span class="log-msg" style="flex:1;">${escHtml(l.message)}</span>
-              <span class="log-group-count" data-group="${i}" style="font-size:10px; color:#64748b; font-weight:400;"></span>
+              <span class="log-group-count" data-group="${i}" style="font-size:10px; color:var(--text-label); font-weight:400;"></span>
             </div>
             <div class="log-group-body" data-group="${i}" style="${activeCollapsed ? "display:none;" : ""}">`;
           continue;
@@ -10199,7 +10199,7 @@
               <polyline points="6 9 12 15 18 9"></polyline>
             </svg>
             Queue (${state.queue.length})
-            ${state.queueCollapsed && summaryParts.length ? `<span style="font-size: 10px; color: #818cf8; font-weight: 400; text-transform: none; letter-spacing: 0;">— ${summaryParts.join(", ")}</span>` : ""}
+            ${state.queueCollapsed && summaryParts.length ? `<span style="font-size: 10px; color: var(--accent); font-weight: 400; text-transform: none; letter-spacing: 0;">— ${summaryParts.join(", ")}</span>` : ""}
             ${!state.queueCollapsed && pendingCount > 1 ? `<button class="queue-approve-all" onclick="event.stopPropagation(); approveAllQueue()">Approve All (${pendingCount})</button>` : ""}
           </div>
           ${state.queueCollapsed ? "" : state.queue.map((q, i) => {
@@ -10211,9 +10211,9 @@
               })() : "";
               return `
               <div class="queue-item pending-approval">
-                <span class="queue-pos" style="background: #1e293b; color: ${q.type === 'podcast' ? '#34d399' : '#818cf8'}; font-size: 10px;">${q.type === 'podcast' ? '🎙' : 'NEW'}</span>
+                <span class="queue-pos" style="background: var(--border); color: ${q.type === 'podcast' ? '#34d399' : '#818cf8'}; font-size: 10px;">${q.type === 'podcast' ? '🎙' : 'NEW'}</span>
                 <span class="queue-title" title="${escHtml(q.url)}">${escHtml(q.title || q.url)}</span>
-                ${dateStr ? `<span style="font-size:10px; color:#64748b; flex-shrink:0; white-space:nowrap;">${dateStr}</span>` : ""}
+                ${dateStr ? `<span style="font-size:10px; color:var(--text-label); flex-shrink:0; white-space:nowrap;">${dateStr}</span>` : ""}
                 ${q.fromSubscription ? `<span class="queue-from">${escHtml(q.fromSubscription)}</span>` : ""}
                 <span class="queue-actions">
                   <button class="queue-approve" onclick="approveQueueItem('${q.id}')" title="Approve">
@@ -10278,7 +10278,7 @@
       const hasSubs = hasEntitlement("subscriptions");
       const subsItem = hasSubs
         ? `<li><strong>Subscribe to channels and podcasts</strong> — Recaps auto-summarizes new episodes as they're published. Find the Subscribe button by pasting a channel or feed URL.</li>`
-        : `<li style="opacity:0.75;"><strong>Subscribe to channels and podcasts</strong> <span style="color:#a5b4fc;font-size:11px;font-weight:600;">&middot; Pro</span> — auto-summarize new episodes as they're published.</li>`;
+        : `<li style="opacity:0.75;"><strong>Subscribe to channels and podcasts</strong> <span style="color:var(--accent-hover);font-size:11px;font-weight:600;">&middot; Pro</span> — auto-summarize new episodes as they're published.</li>`;
       // Free-credits hint shown ONLY to anonymous visitors who haven't
       // yet minted a trial cookie. After their first summarize the
       // trial counter takes over and this line goes away. Hidden for
@@ -10289,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(129,140,248,0.10);border:1px solid rgba(129,140,248,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:var(--accent-hover);">
             <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>`
         : "";
@@ -10707,7 +10707,7 @@
           onclick="${isEditing ? "" : "loadSession('" + h.id + "')"}">
           <div class="history-thumb">
             ${h.type === "podcast"
-              ? `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#1e293b;border-radius:6px;font-size:20px;">🎙</div>`
+              ? `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--border);border-radius:6px;font-size:20px;">🎙</div>`
               : `<img src="https://img.youtube.com/vi/${h.videoId}/default.jpg" alt="" loading="lazy" />`}
           </div>
           <div class="history-info">
@@ -10869,7 +10869,7 @@
 
       let clipListHtml = "";
       if (clips.length === 0) {
-        clipListHtml = '<div style="text-align:center; padding:32px 16px; color:#475569; font-size:13px;">' +
+        clipListHtml = '<div style="text-align:center; padding:32px 16px; color:var(--text-faint); font-size:13px;">' +
           '<p style="margin-bottom:8px;">No clips collected yet.</p>' +
           '<p style="font-size:12px;">Click 📎 on any topic or transcript line to add it here.<br>' +
           'You can collect clips from multiple videos to build a curated export.</p></div>';
@@ -10878,20 +10878,20 @@
           const session = state.historySessions[sessionId];
           const sessionTitle = session ? escHtml(session.title) : "Unknown Video";
           clipListHtml += '<div style="margin-bottom:16px;">';
-          clipListHtml += '<div style="font-size:13px; font-weight:600; color:#e2e8f0; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid #1e293b;">' + sessionTitle + '</div>';
+          clipListHtml += '<div style="font-size:13px; font-weight:600; color:var(--text); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border);">' + sessionTitle + '</div>';
           for (const clip of sessionClips) {
             const label = clip.entryIndex !== null
               ? "Topic " + (clip.chunkIndex + 1) + ", line " + (clip.entryIndex + 1)
               : "Topic " + (clip.chunkIndex + 1) + " (full)";
             const noteHtml = clip.note
-              ? '<div style="font-size:11px; color:#818cf8; font-style:italic; margin-top:2px; padding-left:2px;">' +
+              ? '<div style="font-size:11px; color:var(--accent); font-style:italic; margin-top:2px; padding-left:2px;">' +
                 '💬 ' + escHtml(clip.note) + '</div>'
               : '';
             clipListHtml += '<div style="padding:6px 8px; border-radius:6px; margin-bottom:4px;" onmouseover="this.style.background=\'rgba(129,140,248,0.06)\'" onmouseout="this.style.background=\'none\'">' +
               '<div style="display:flex; align-items:center; gap:8px;">' +
-                '<span style="flex:1; font-size:12px; color:#94a3b8;">' + escHtml(label) + '</span>' +
-                '<button style="border:none; background:none; color:#64748b; cursor:pointer; font-size:11px; padding:2px 6px; border-radius:4px;" onclick="editClipNote(' + clip._idx + ')" title="Edit note">✏️</button>' +
-                '<button style="border:none; background:none; color:#475569; cursor:pointer; font-size:14px; padding:2px 6px; border-radius:4px;" onclick="removeFromClipCollection(' + clip._idx + ')" title="Remove">&times;</button>' +
+                '<span style="flex:1; font-size:12px; color:var(--text-muted);">' + escHtml(label) + '</span>' +
+                '<button style="border:none; background:none; color:var(--text-label); cursor:pointer; font-size:11px; padding:2px 6px; border-radius:4px;" onclick="editClipNote(' + clip._idx + ')" title="Edit note">✏️</button>' +
+                '<button style="border:none; background:none; color:var(--text-faint); cursor:pointer; font-size:14px; padding:2px 6px; border-radius:4px;" onclick="removeFromClipCollection(' + clip._idx + ')" title="Remove">&times;</button>' +
               '</div>' +
               noteHtml +
               '</div>';
@@ -10908,7 +10908,7 @@
               <div style="display:flex; gap:8px;">
                 ${clips.length > 0 ? `
                   <button class="expand-btn" onclick="exportClipCollectionPDF()" style="font-size:11px; padding:5px 12px;">Export PDF</button>
-                  <button class="expand-btn" onclick="clearClipCollection()" style="font-size:11px; padding:5px 12px; color:#f87171;">Clear All</button>
+                  <button class="expand-btn" onclick="clearClipCollection()" style="font-size:11px; padding:5px 12px; color:var(--error-text);">Clear All</button>
                 ` : ""}
                 <button class="close-btn" onclick="toggleClipPanel()">&times;</button>
               </div>
@@ -11163,7 +11163,7 @@
       '.chunk.expanded{border-color:#818cf8;background:#0f172a;box-shadow:0 2px 16px rgba(129,140,248,0.06)}' +
       '.chunk.now-playing{border-color:#22c55e}' +
       '.chunk-header{width:100%;padding:10px 14px;background:none;border:none;text-align:left;display:flex;gap:10px;align-items:flex-start;color:inherit}' +
-      '.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;transition:all 0.15s;font-size:12px;margin-top:1px}' +
+      '.chunk-play-btn{width:26px;height:26px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#1e293b;color:#64748b;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-info{flex:1;min-width:0}' +
@@ -11181,7 +11181,7 @@
       '.transcript-line:hover{background:rgba(129,140,248,0.06)}' +
       '.ts-badge{font-size:11px;font-family:"SF Mono",Menlo,monospace;color:#818cf8;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}' +
-      '.rc-spk{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#1e293b;color:#a5b4fc;font-size:10px;font-weight:600;flex-shrink:0;margin-top:1px}' +
+      '.rc-spk{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:#1e293b;color:#a5b4fc;font-size:10px;font-weight:600;flex-shrink:0;margin-top:1px}' +
       '.rc-foot{margin-top:28px;text-align:center;font-size:11px;color:#475569}' +
       '.rc-foot a{color:#64748b;text-decoration:none}' +
       '@media (max-width:640px){.wrap{padding:14px 10px 48px}.chunk-title{font-size:12px}.chunk-summary{font-size:11px}.transcript-text{font-size:12px}.chunk-body-inner{padding-left:14px}}';
@@ -11317,7 +11317,7 @@
       const popover = document.createElement("div");
       popover.id = "export-menu-popover";
       popover.style.cssText =
-        "position:absolute; z-index:5000; background:#0f172a; border:1px solid #334155; " +
+        "position:absolute; z-index:5000; background:var(--surface-inset); border:1px solid var(--border-hover); " +
         "border-radius:8px; padding:4px; box-shadow:0 8px 24px rgba(0,0,0,0.6); " +
         "min-width:170px;";
       const opts = [
@@ -11331,8 +11331,8 @@
         btn.type = "button";
         btn.style.cssText =
           "display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; " +
-          "background:transparent; border:none; color:#e2e8f0; font-size:13px; cursor:pointer; " +
-          "border-radius:5px; text-align:left; min-height:36px;";
+          "background:transparent; border:none; color:var(--text); font-size:13px; cursor:pointer; " +
+          "border-radius:6px; text-align:left; min-height:36px;";
         btn.onmouseover = () => { btn.style.background = "rgba(255,255,255,0.06)"; };
         btn.onmouseout = () => { btn.style.background = "transparent"; };
         btn.innerHTML =
@@ -11763,8 +11763,8 @@
         '<div class="settings-modal-body">' +
           '<label class="field-label" style="margin-top:0">Note (optional)</label>' +
           '<textarea id="clip-note-input" rows="3" placeholder="Why is this interesting? Add context for when you share it..." ' +
-            'style="width:100%; padding:10px 14px; font-size:13px; border:1px solid #1e293b; border-radius:8px; ' +
-            'background:#0f172a; color:#e2e8f0; resize:vertical; font-family:inherit; outline:none; line-height:1.5;"></textarea>' +
+            'style="width:100%; padding:10px 14px; font-size:13px; border:1px solid var(--border); border-radius:8px; ' +
+            'background:var(--surface-inset); color:var(--text); resize:vertical; font-family:inherit; outline:none; line-height:1.5;"></textarea>' +
           '<div style="display:flex; gap:8px; justify-content:flex-end; margin-top:14px;">' +
             '<button id="clip-note-skip" class="expand-btn" style="font-size:12px; padding:8px 16px;">Skip</button>' +
             '<button id="clip-note-save" class="submit-btn" style="font-size:12px; padding:8px 20px;">Add Clip</button>' +
@@ -11811,8 +11811,8 @@
         '</div>' +
         '<div class="settings-modal-body">' +
           '<textarea id="clip-edit-input" rows="3" placeholder="Add your thoughts about this clip..." ' +
-            'style="width:100%; padding:10px 14px; font-size:13px; border:1px solid #1e293b; border-radius:8px; ' +
-            'background:#0f172a; color:#e2e8f0; resize:vertical; font-family:inherit; outline:none; line-height:1.5;">' +
+            'style="width:100%; padding:10px 14px; font-size:13px; border:1px solid var(--border); border-radius:8px; ' +
+            'background:var(--surface-inset); color:var(--text); resize:vertical; font-family:inherit; outline:none; line-height:1.5;">' +
             escHtml(clip.note || "") + '</textarea>' +
           '<div style="display:flex; gap:8px; justify-content:flex-end; margin-top:14px;">' +
             '<button id="clip-edit-save" class="submit-btn" style="font-size:12px; padding:8px 20px;">Save</button>' +
@@ -12416,14 +12416,14 @@
             value="${escHtml(state.passwordInput || "")}"
             oninput="state.passwordInput=this.value"
             onkeydown="if(event.key==='Enter')submitPasswordSet()"
-            style="padding:9px 12px;font-size:13px;background:#0a0e1a;color:#e2e8f0;border:1px solid #334155;border-radius:8px;outline:none;" />
+            style="padding:9px 12px;font-size:13px;background:var(--bg);color:var(--text);border:1px solid var(--border-hover);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:#818cf8;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:var(--accent);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()"
-              style="padding:8px 14px;font-size:12px;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+              style="padding:8px 14px;font-size:12px;background:var(--border);color:var(--text-muted);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
               Cancel
             </button>
           </div>
@@ -12437,15 +12437,15 @@
         : open ? "Close" : "Set a password";
       return `
         <label class="field-label" style="margin-top:14px;">Password</label>
-        <div class="ytdlp-status" style="flex-direction:column;align-items:stretch;gap:6px;border-color:#334155;background:rgba(30,41,59,0.3);padding:14px;">
-          <div style="font-size:12px;color:#cbd5e1;line-height:1.55;">${description}</div>
+        <div class="ytdlp-status" style="flex-direction:column;align-items:stretch;gap:6px;border-color:var(--border-hover);background:rgba(30,41,59,0.3);padding:14px;">
+          <div style="font-size:12px;color:var(--text-body);line-height:1.55;">${description}</div>
           <div style="display:flex;gap:6px;flex-wrap:wrap;">
             <button onclick="togglePasswordEditor()"
-              style="padding:7px 14px;font-size:12px;font-weight:600;background:#1e293b;color:#cbd5e1;border:1px solid #334155;border-radius:6px;cursor:pointer;">
+              style="padding:7px 14px;font-size:12px;font-weight:600;background:var(--border);color:var(--text-body);border:1px solid var(--border-hover);border-radius:6px;cursor:pointer;">
               ${ctaLabel}
             </button>
             ${hasPwd ? `<button onclick="submitPasswordClear()" ${state.passwordBusy ? "disabled" : ""}
-              style="padding:7px 14px;font-size:12px;background:transparent;color:#fca5a5;border:1px solid rgba(248,113,113,0.40);border-radius:6px;cursor:pointer;${state.passwordBusy ? "opacity:0.5;cursor:not-allowed;" : ""}">
+              style="padding:7px 14px;font-size:12px;background:transparent;color:var(--error-soft);border:1px solid rgba(248,113,113,0.40);border-radius:6px;cursor:pointer;${state.passwordBusy ? "opacity:0.5;cursor:not-allowed;" : ""}">
               Remove
             </button>` : ""}
           </div>
diff --git a/startos/versions/index.ts b/startos/versions/index.ts
index 8eafa84..76c5fef 100644
--- a/startos/versions/index.ts
+++ b/startos/versions/index.ts
@@ -179,8 +179,9 @@ import { v_0_2_157 } from './v0.2.157'
 import { v_0_2_158 } from './v0.2.158'
 import { v_0_2_159 } from './v0.2.159'
 import { v_0_2_160 } from './v0.2.160'
+import { v_0_2_161 } from './v0.2.161'
 
 export const versionGraph = VersionGraph.of({
-  current: v_0_2_160,
-  other: [v_0_2_159, v_0_2_158, v_0_2_157, v_0_2_156, v_0_2_155, v_0_2_154, v_0_2_153, v_0_2_152, v_0_2_151, v_0_2_150, v_0_2_149, v_0_2_148, v_0_2_147, v_0_2_146, v_0_2_145, v_0_2_144, v_0_2_143, v_0_2_142, v_0_2_141, v_0_2_140, v_0_2_139, v_0_2_138, v_0_2_137, v_0_2_136, v_0_2_135, v_0_2_134, v_0_2_133, v_0_2_132, v_0_2_131, v_0_2_130, v_0_2_129, v_0_2_128, v_0_2_127, v_0_2_126, v_0_2_125, v_0_2_124, v_0_2_123, v_0_2_122, v_0_2_121, v_0_2_120, v_0_2_119, v_0_2_118, v_0_2_117, v_0_2_116, v_0_2_115, v_0_2_114, v_0_2_113, v_0_2_112, v_0_2_111, v_0_2_110, v_0_2_109, v_0_2_108, v_0_2_107, v_0_2_106, v_0_2_105, v_0_2_104, v_0_2_103, v_0_2_102, v_0_2_101, v_0_2_100, v_0_2_99, v_0_2_98, v_0_2_97, v_0_2_96, v_0_2_95, v_0_2_94, v_0_2_93, v_0_2_92, v_0_2_91, v_0_2_90, v_0_2_89, v_0_2_88, v_0_2_87, v_0_2_86, v_0_2_85, v_0_2_84, v_0_2_83, v_0_2_82, v_0_2_81, v_0_2_80, v_0_2_79, v_0_2_78, v_0_2_77, v_0_2_76, v_0_2_75, v_0_2_74, v_0_2_73, v_0_2_72, v_0_2_71, v_0_2_70, v_0_2_69, v_0_2_68, v_0_2_67, v_0_2_66, v_0_2_65, v_0_2_64, v_0_2_63, v_0_2_62, v_0_2_61, v_0_2_60, v_0_2_59, v_0_2_58, v_0_2_57, v_0_2_56, v_0_2_55, v_0_2_54, v_0_2_53, v_0_2_52, v_0_2_51, v_0_2_50, v_0_2_49, v_0_2_48, v_0_2_47, v_0_2_46, v_0_2_45, v_0_2_44, v_0_2_43, v_0_2_42, v_0_2_41, v_0_2_40, v_0_2_39, v_0_2_38, v_0_2_37, v_0_2_36, v_0_2_35, v_0_2_34, v_0_2_33, v_0_2_32, v_0_2_31, v_0_2_30, v_0_2_29, v_0_2_28, v_0_2_27, v_0_2_26, v_0_2_25, v_0_2_24, v_0_2_23, v_0_2_22, v_0_2_21, v_0_2_20, v_0_2_19, v_0_2_18, v_0_2_17, v_0_2_16, v_0_2_15, v_0_2_14, v_0_2_13, v_0_2_12, v_0_2_11, v_0_2_10, v_0_2_9, v_0_2_8, v_0_2_7, v_0_2_6, v_0_2_5, v_0_2_4, v_0_2_3, v_0_2_2, v_0_2_1, v_0_2_0, v_0_1_18, v_0_1_17, v_0_1_16, v_0_1_15, v_0_1_14, v_0_1_13, v_0_1_12, v_0_1_11, v_0_1_10, v_0_1_9, v_0_1_8, v_0_1_7, v_0_1_6, v_0_1_5, v_0_1_4, v_0_1_3, v_0_1_2, v_0_1_1, v_0_1_0],
+  current: v_0_2_161,
+  other: [v_0_2_160, v_0_2_159, v_0_2_158, v_0_2_157, v_0_2_156, v_0_2_155, v_0_2_154, v_0_2_153, v_0_2_152, v_0_2_151, v_0_2_150, v_0_2_149, v_0_2_148, v_0_2_147, v_0_2_146, v_0_2_145, v_0_2_144, v_0_2_143, v_0_2_142, v_0_2_141, v_0_2_140, v_0_2_139, v_0_2_138, v_0_2_137, v_0_2_136, v_0_2_135, v_0_2_134, v_0_2_133, v_0_2_132, v_0_2_131, v_0_2_130, v_0_2_129, v_0_2_128, v_0_2_127, v_0_2_126, v_0_2_125, v_0_2_124, v_0_2_123, v_0_2_122, v_0_2_121, v_0_2_120, v_0_2_119, v_0_2_118, v_0_2_117, v_0_2_116, v_0_2_115, v_0_2_114, v_0_2_113, v_0_2_112, v_0_2_111, v_0_2_110, v_0_2_109, v_0_2_108, v_0_2_107, v_0_2_106, v_0_2_105, v_0_2_104, v_0_2_103, v_0_2_102, v_0_2_101, v_0_2_100, v_0_2_99, v_0_2_98, v_0_2_97, v_0_2_96, v_0_2_95, v_0_2_94, v_0_2_93, v_0_2_92, v_0_2_91, v_0_2_90, v_0_2_89, v_0_2_88, v_0_2_87, v_0_2_86, v_0_2_85, v_0_2_84, v_0_2_83, v_0_2_82, v_0_2_81, v_0_2_80, v_0_2_79, v_0_2_78, v_0_2_77, v_0_2_76, v_0_2_75, v_0_2_74, v_0_2_73, v_0_2_72, v_0_2_71, v_0_2_70, v_0_2_69, v_0_2_68, v_0_2_67, v_0_2_66, v_0_2_65, v_0_2_64, v_0_2_63, v_0_2_62, v_0_2_61, v_0_2_60, v_0_2_59, v_0_2_58, v_0_2_57, v_0_2_56, v_0_2_55, v_0_2_54, v_0_2_53, v_0_2_52, v_0_2_51, v_0_2_50, v_0_2_49, v_0_2_48, v_0_2_47, v_0_2_46, v_0_2_45, v_0_2_44, v_0_2_43, v_0_2_42, v_0_2_41, v_0_2_40, v_0_2_39, v_0_2_38, v_0_2_37, v_0_2_36, v_0_2_35, v_0_2_34, v_0_2_33, v_0_2_32, v_0_2_31, v_0_2_30, v_0_2_29, v_0_2_28, v_0_2_27, v_0_2_26, v_0_2_25, v_0_2_24, v_0_2_23, v_0_2_22, v_0_2_21, v_0_2_20, v_0_2_19, v_0_2_18, v_0_2_17, v_0_2_16, v_0_2_15, v_0_2_14, v_0_2_13, v_0_2_12, v_0_2_11, v_0_2_10, v_0_2_9, v_0_2_8, v_0_2_7, v_0_2_6, v_0_2_5, v_0_2_4, v_0_2_3, v_0_2_2, v_0_2_1, v_0_2_0, v_0_1_18, v_0_1_17, v_0_1_16, v_0_1_15, v_0_1_14, v_0_1_13, v_0_1_12, v_0_1_11, v_0_1_10, v_0_1_9, v_0_1_8, v_0_1_7, v_0_1_6, v_0_1_5, v_0_1_4, v_0_1_3, v_0_1_2, v_0_1_1, v_0_1_0],
 })
diff --git a/startos/versions/v0.2.161.ts b/startos/versions/v0.2.161.ts
new file mode 100644
index 0000000..ad143d0
--- /dev/null
+++ b/startos/versions/v0.2.161.ts
@@ -0,0 +1,12 @@
+import { VersionInfo } from '@start9labs/start-sdk'
+
+export const v_0_2_161 = VersionInfo.of({
+  version: '0.2.161:0',
+  releaseNotes: {
+    en_US: 'New: shareable HTML export for YouTube recaps — a self-contained .html file with the embedded video and expandable timestamped summaries baked in, openable by anyone with no account (native share sheet on mobile, download on desktop). Plus a design-system pass: colors, type sizes, and corner radii now follow one consistent set of tokens across the app.',
+  },
+  migrations: {
+    up: async ({ effects }) => {},
+    down: async ({ effects }) => {},
+  },
+})