Styles name only colour variables the themes define (#529)

ddiff --git a/public/css/chat-shared.css b/public/css/chat-shared.css
iindex ba1942ae..478236ee 100644
---- a/public/css/chat-shared.css
++++ b/public/css/chat-shared.css
@@@ -138,8 +138,8 @@
      word-break: break-all;
  }
  .chat-link:hover {
--    color: var(--accent-hover, var(--accent-light));
--    text-decoration-color: var(--accent-hover, var(--accent-light));
++    color: var(--accent-light);
++    text-decoration-color: var(--accent-light);
  }
  
  /* ── Trust Domain Dialog ─────────────────────────────────────── */
@@@ -265,8 +265,8 @@
      font-weight: 600;
  }
  .link-trust-always:hover {
--    background: var(--accent-hover, var(--accent-light));
--    border-color: var(--accent-hover, var(--accent-light));
++    background: var(--accent-light);
++    border-color: var(--accent-light);
  }
  .link-trust-always i { margin-right: 4px; }
  
ddiff --git a/public/css/features/broadcast.css b/public/css/features/broadcast.css
iindex 0167234b..054d8b5e 100644
---- a/public/css/features/broadcast.css
++++ b/public/css/features/broadcast.css
@@@ -107,7 +107,7 @@
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
--    background: var(--surface);
++    background: var(--bg-card);
      margin-top: 16px;
  }
  .bc-ws-sidebar {
@@@ -116,7 +116,7 @@
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
--    background: color-mix(in srgb, var(--surface) 70%, var(--bg));
++    background: color-mix(in srgb, var(--bg-card) 70%, var(--bg-primary));
  }
  .bc-ws-sidebar-hd {
      display: flex;
@@@ -273,7 +273,7 @@
  .bc-ws-quality {
      margin: 0 0 12px;
      padding: 10px 12px;
--    background: color-mix(in srgb, var(--surface) 50%, var(--bg));
++    background: color-mix(in srgb, var(--bg-card) 50%, var(--bg-primary));
      border: 1px solid var(--border);
      border-radius: 8px;
  }
@@@ -304,7 +304,7 @@
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
--    background: color-mix(in srgb, var(--surface) 50%, var(--bg));
++    background: color-mix(in srgb, var(--bg-card) 50%, var(--bg-primary));
      border: 1px solid var(--border);
      border-radius: 8px;
      gap: 12px;
@@@ -570,7 +570,7 @@
      align-items: center;
      gap: 3px;
      padding: 10px 6px 8px;
--    background: var(--surface, color-mix(in srgb, var(--text-primary, #fff) 4%, transparent));
++    background: color-mix(in srgb, var(--text-primary, #fff) 4%, transparent);
      border: 2px solid var(--border);
      border-radius: var(--radius, 8px);
      color: var(--text-secondary);
@@@ -1668,7 +1668,7 @@
      gap: 12px;
      padding: 10px 14px;
      margin-bottom: 16px;
--    background: var(--surface-raised);
++    background: var(--bg-tertiary);
      border: 1px solid rgba(220, 38, 38, 0.3);
      border-radius: var(--radius);
      flex-wrap: wrap;
@@@ -1752,7 +1752,7 @@
      flex-shrink: 0;
  }
  .bc-ws-method-info {
--    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
++    background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
@@@ -1825,7 +1825,7 @@
  .bc-ws-profile-section { margin-bottom: 20px; }
  .bc-ws-save-btn { min-width: 70px; }
  .bc-ws-endpoint-section {
--    background: var(--surface);
++    background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
@@@ -1887,7 +1887,7 @@
      border-color: var(--text-muted);
  }
  .bc-ws-confirm-dialog {
--    background: var(--surface, #1e1e22);
++    background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
@@@ -2027,7 +2027,7 @@
      gap: 0;
      border-bottom: 1px solid var(--border);
      padding: 0 20px;
--    background: color-mix(in srgb, var(--surface) 80%, var(--bg));
++    background: color-mix(in srgb, var(--bg-card) 80%, var(--bg-primary));
  }
  .bc-ws-tab {
      padding: 10px 16px;
@@@ -2117,7 +2117,7 @@
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
--    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
++    background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
      border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
      border-radius: 8px;
      margin: 12px 0 16px;
@@@ -2144,7 +2144,7 @@
      align-items: center;
      justify-content: space-between;
      gap: 12px;
--    background: color-mix(in srgb, var(--danger, #e74c3c) 10%, var(--surface));
++    background: color-mix(in srgb, var(--danger, #e74c3c) 10%, var(--bg-card));
      border: 1px solid color-mix(in srgb, var(--danger, #e74c3c) 30%, var(--border));
      border-radius: 8px;
      padding: 10px 14px;
@@@ -2183,7 +2183,7 @@
      justify-content: space-between;
      gap: 10px;
      padding: 8px 12px;
--    background: var(--surface);
++    background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 6px;
  }
@@@ -2214,7 +2214,7 @@
      margin-bottom: 12px;
      line-height: 1.5;
      padding: 8px 10px;
--    background: var(--bg);
++    background: var(--bg-primary);
      border: 1px solid var(--border);
      border-radius: 6px;
  }
@@@ -2250,7 +2250,7 @@
  }
  .bc-ws-cli-examples-inner h5:first-child { margin-top: 0; }
  .bc-ws-cli-code {
--    background: var(--bg);
++    background: var(--bg-primary);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px 12px;
@@@ -2303,7 +2303,7 @@
      color: var(--text-secondary);
  }
  .bc-ws-cli-note code {
--    background: var(--bg);
++    background: var(--bg-primary);
      padding: 1px 4px;
      border-radius: 3px;
      font-size: 0.78rem;
@@@ -2325,7 +2325,7 @@
      font-weight: 600;
  }
  .bc-ws-cli-ref-table code {
--    background: var(--bg);
++    background: var(--bg-primary);
      padding: 1px 4px;
      border-radius: 3px;
      font-size: 0.75rem;
@@@ -2426,7 +2426,7 @@
  .bc-workspace { flex: none; border: 0; border-radius: 0; background: transparent; overflow: visible; gap: 14px; align-items: flex-start; margin-top: 6px; }
  .bc-ws-sidebar, .bc-ws-main {
      border: 1px solid var(--border); border-radius: 14px;
--    background: color-mix(in srgb, var(--bg-card, var(--surface)) 92%, transparent);
++    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
      box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent) inset;
  }
  .bc-ws-sidebar { width: clamp(200px, 17vw, 264px); border-right: 1px solid var(--border); overflow: hidden; }
@@@ -2448,7 +2448,7 @@
  
  /* NSFW: a themed switch with what it does, instead of a bare checkbox floating beside a select. */
  .bc-switch { display: flex; align-items: flex-start; gap: 12px; margin: 2px 0 16px; padding: 10px 12px; cursor: pointer;
--    border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg-input, var(--bg)) 70%, transparent);
++    border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg-input, var(--bg-primary)) 70%, transparent);
      transition: border-color var(--ov-dur-2, .18s), background-color var(--ov-dur-2, .18s); }
  .bc-switch:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
  .bc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
@@@ -2725,17 +2725,17 @@ body.bc-studio-on #bc-chat-messages .chat-conn-status { display: block !importan
  .bcs-sheet-who { flex: 1; min-width: 0; display: grid; }
  .bcs-sheet-who b { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bcs-sheet-who small, .bcs-row small, .bcs-tile small { color: var(--text-secondary, #a1a1aa); font-size: 0.76rem; }
--.bcs-x { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--surface-raised, color-mix(in srgb, var(--text-primary, #fff) 8%, transparent)); color: inherit; cursor: pointer; }
++.bcs-x { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--text-primary, #fff) 8%, transparent); color: inherit; cursor: pointer; }
  .bcs-chip {
      display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
--    border: 1px solid var(--border, rgba(255,255,255,0.14)); background: var(--surface-raised, color-mix(in srgb, var(--text-primary, #fff) 6%, transparent));
++    border: 1px solid var(--border, rgba(255,255,255,0.14)); background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent);
      color: inherit; font: inherit; font-weight: 600; font-size: 0.88rem;
  }
  .bcs-chip-strong { background: var(--accent-strong, #2563eb); color: var(--on-accent-strong, #fff); border-color: transparent; }
  .bcs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bcs-tile {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 82px; padding: 10px 6px;
--    border-radius: 14px; border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 8%, transparent)); background: var(--surface-raised, color-mix(in srgb, var(--text-primary, #fff) 5%, transparent));
++    border-radius: 14px; border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 8%, transparent)); background: color-mix(in srgb, var(--text-primary, #fff) 5%, transparent);
      color: inherit; font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer;
  }
  .bcs-tile i { font-size: 1.15rem; color: var(--accent, #60a5fa); }
@@@ -2758,7 +2758,7 @@ body.bc-studio-on #bc-chat-messages .chat-conn-status { display: block !importan
  .bcs-video-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .bcs-video-head h3 { margin: 0; }
  .bcs-video-now { color: var(--text-secondary, #a1a1aa); font-size: 0.76rem; font-variant-numeric: tabular-nums; text-align: right; }
--.bcs-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; margin-bottom: 8px; border-radius: 12px; background: var(--surface-raised, color-mix(in srgb, var(--text-primary, #fff) 5%, transparent)); }
++.bcs-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; margin-bottom: 8px; border-radius: 12px; background: color-mix(in srgb, var(--text-primary, #fff) 5%, transparent); }
  .bcs-seg-b {
      min-height: 40px; border: 0; border-radius: 9px; background: none; color: inherit; cursor: pointer;
      font: inherit; font-size: 0.86rem; font-weight: 700;
@@@ -2768,7 +2768,7 @@ body.bc-studio-on #bc-chat-messages .chat-conn-status { display: block !importan
  .bcs-video .bcs-row { margin-top: 4px; }
  .bcs-switch {
      position: relative; flex: none; width: 52px; height: 32px; padding: 0; border-radius: 999px; cursor: pointer;
--    border: 1px solid var(--border, rgba(255,255,255,0.18)); background: var(--surface-raised, color-mix(in srgb, var(--text-primary, #fff) 10%, transparent));
++    border: 1px solid var(--border, rgba(255,255,255,0.18)); background: color-mix(in srgb, var(--text-primary, #fff) 10%, transparent);
  }
  .bcs-switch-k { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform var(--ov-dur-2, 0.15s); }
  .bcs-switch[aria-checked="true"] { background: #16a34a; border-color: transparent; }
@@@ -2866,7 +2866,7 @@ body.bc-golive-dock-on #page-broadcast { padding-bottom: calc(104px + var(--ovna
  .bc-clip-name-acts { display: flex; gap: 8px; justify-content: flex-end; }
  .bc-clip-name-acts button {
      min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.9rem;
--    border: 1px solid var(--border, rgba(255,255,255,0.16)); background: var(--surface-raised, color-mix(in srgb, var(--text-primary, #fff) 6%, transparent)); color: inherit;
++    border: 1px solid var(--border, rgba(255,255,255,0.16)); background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent); color: inherit;
  }
  .bc-clip-name-acts .bc-clip-name-save { background: var(--accent-strong, #2563eb); color: var(--on-accent-strong, #fff); border-color: transparent; }
  .bc-clip-name-acts button:disabled { opacity: 0.6; cursor: default; }
ddiff --git a/public/css/features/channel.css b/public/css/features/channel.css
iindex b7fd7d83..8c2090ea 100644
---- a/public/css/features/channel.css
++++ b/public/css/features/channel.css
@@@ -581,7 +581,7 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
      margin: 0 auto;
  }
  
--.dpad-btn:hover { background: var(--bg-active); border-color: var(--accent); }
++.dpad-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
  .dpad-btn:active { background: var(--accent); color: #000; }
  .dpad-btn.on-cooldown { opacity: 0.5; pointer-events: none; }
  .zoom-container {
@@@ -598,7 +598,7 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
      font-size: 0.9rem;
  }
  
--.zoom-btn:hover { background: var(--bg-active); border-color: var(--accent); }
++.zoom-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
  .zoom-btn:active { background: var(--accent); color: #000; }
  .zoom-btn.on-cooldown { opacity: 0.5; pointer-events: none; }
  
@@@ -834,7 +834,7 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  }
  .ch-info-bar .ch-avatar {
      width: 44px; height: 44px; border-radius: 50%;
--    background: var(--primary, var(--accent)); color: var(--bg-main, #000);
++    background: var(--accent); color: var(--bg-primary);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; font-weight: 700; flex-shrink: 0;
  }
@@@ -1032,7 +1032,7 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  .weather-main {
      display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  }
--.weather-icon { font-size: 1.3rem; color: var(--primary, var(--accent)); }
++.weather-icon { font-size: 1.3rem; color: var(--accent); }
  .weather-temp { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
  .weather-topline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .weather-condition { font-weight: 600; color: var(--text-primary); font-size: 0.8rem; }
@@@ -1040,7 +1040,7 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  .weather-meta { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .weather-unit-toggle {
      border: 1px solid var(--border);
--    background: var(--bg-elevated, color-mix(in srgb, var(--text-primary, #fff) 6%, transparent));
++    background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent);
      color: var(--text-primary);
      border-radius: 999px;
      padding: 2px 8px;
@@@ -1060,15 +1060,15 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  .weather-hourly-scroll::-webkit-scrollbar { height: 4px; }
  .weather-hourly-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .wh-time { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }
--.wh-icon { font-size: 0.8rem; color: var(--primary, var(--accent)); }
++.wh-icon { font-size: 0.8rem; color: var(--accent); }
  .wh-temp { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
  .wh-precip { font-size: 0.62rem; color: var(--info-text, var(--info, #60a5fa)); }
  .wh-extra { font-size: 0.58rem; color: var(--text-muted); }
  .weather-hour.wh-now {
--    background: color-mix(in srgb, var(--primary, var(--accent)) 18%, var(--bg-tertiary, var(--bg-secondary)));
--    border: 1px solid color-mix(in srgb, var(--primary, var(--accent)) 35%, transparent);
++    background: color-mix(in srgb, var(--accent) 18%, var(--bg-tertiary, var(--bg-secondary)));
++    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  }
--.wh-now .wh-time { color: var(--primary, var(--accent)); font-weight: 700; }
++.wh-now .wh-time { color: var(--accent); font-weight: 700; }
  .weather-tabs {
      display: flex; gap: 2px; margin: 4px 0 2px; padding: 2px;
      background: var(--bg-tertiary, var(--bg-secondary)); border-radius: 6px;
@@@ -1084,7 +1084,7 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
      border-radius: 6px; background: var(--bg-tertiary, var(--bg-secondary));
  }
  .wd-day { font-size: 0.75rem; font-weight: 600; width: 40px; flex-shrink: 0; }
--.wd-icon { font-size: 0.8rem; color: var(--primary, var(--accent)); width: 20px; text-align: center; }
++.wd-icon { font-size: 0.8rem; color: var(--accent); width: 20px; text-align: center; }
  .wd-temps { display: flex; gap: 6px; font-size: 0.78rem; flex: 1; }
  .wd-hi { font-weight: 700; color: var(--text-primary); }
  .wd-lo { color: var(--text-muted); }
@@@ -1100,7 +1100,7 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  /* The offline header's picture (its size is .ch-avatar-lg's): a circle like the live bar's, the letter on the accent. */
  .ch-offline-header .ch-avatar {
      border-radius: 50%; overflow: hidden; flex-shrink: 0;
--    background: var(--primary, var(--accent)); color: var(--bg-main, #000);
++    background: var(--accent); color: var(--bg-primary);
      display: flex; align-items: center; justify-content: center; font-weight: 700;
  }
  .ch-offline-header .ch-username { margin-bottom: 2px; }
@@@ -1131,14 +1131,14 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
      gap:12px; margin-bottom:20px;
  }
  .analytics-stat-card {
--    background:var(--card-bg,rgba(22,22,26,0.74)); border:1px solid var(--border,#333);
++    background:color-mix(in srgb, var(--bg-card) 74%, transparent); border:1px solid var(--border,#333);
      border-radius:10px; padding:14px 16px; text-align:center;
  }
  .analytics-stat-card .stat-value {
--    font-size:1.35rem; font-weight:700; color:var(--text,#fff); line-height:1.2;
++    font-size:1.35rem; font-weight:700; color:var(--text-primary); line-height:1.2;
  }
  .analytics-chart-wrap {
--    background:var(--card-bg,rgba(22,22,26,0.74)); border:1px solid var(--border,#333);
++    background:color-mix(in srgb, var(--bg-card) 74%, transparent); border:1px solid var(--border,#333);
      border-radius:10px; padding:16px; margin-bottom:20px;
  }
  .analytics-chart-wrap canvas { max-height:240px; width:100%; }
@@@ -1147,13 +1147,13 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  .table-responsive { overflow-x:auto; }
  .analytics-table {
      width:100%; border-collapse:collapse; font-size:0.82rem;
--    background:var(--card-bg,rgba(22,22,26,0.74)); border-radius:10px; overflow:hidden;
++    background:color-mix(in srgb, var(--bg-card) 74%, transparent); border-radius:10px; overflow:hidden;
  }
  .analytics-table th { text-align:left; padding:10px 12px; color:var(--text-muted,#888);
      font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em;
      border-bottom:1px solid var(--border,#333);
  }
--.analytics-table td { padding:8px 12px; border-bottom:1px solid var(--border,#222); color:var(--text,#ddd); }
++.analytics-table td { padding:8px 12px; border-bottom:1px solid var(--border,#222); color:var(--text-primary); }
  .analytics-table tbody tr:hover { background:color-mix(in srgb, var(--text-primary, #fff) 3%, transparent); }
  .analytics-table tbody tr:last-child td { border-bottom:none; }
  @media (max-width: 1180px) {
@@@ -1163,7 +1163,7 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  .ch-info-bar .ch-avatar { width: 52px; height: 52px; overflow: hidden; cursor: pointer; }
  .ch-info-bar .ch-avatar img, .ch-offline-header .ch-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
  .ch-info-bar-top h2 a:hover { text-decoration: underline !important; }
--.ch-stream-title { font-size: 1.02rem; color: var(--text); white-space: normal; margin-top: 4px; }
++.ch-stream-title { font-size: 1.02rem; color: var(--text-primary); white-space: normal; margin-top: 4px; }
  .ch-stream-description { font-size: 0.9rem; }
  @media (max-width: 768px) {
      .ch-stream-title { font-size: 0.95rem; white-space: normal; display: block; }
@@@ -1241,7 +1241,7 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  @media (max-width: 560px) { .ai-tl-moment-thumb { width: 72px; height: 40px; } }
  .ai-tl-months { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 6%, transparent)); }
  .ai-tl-months-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; margin-right: 4px; display: inline-flex; align-items: center; gap: 5px; }
--.ai-tl-month { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-elevated, color-mix(in srgb, var(--text-primary, #fff) 4%, transparent)); border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 8%, transparent)); border-radius: 999px; padding: 3px 11px; cursor: pointer; transition: all var(--ov-dur-2, .15s); }
++.ai-tl-month { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); background: color-mix(in srgb, var(--text-primary, #fff) 4%, transparent); border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 8%, transparent)); border-radius: 999px; padding: 3px 11px; cursor: pointer; transition: all var(--ov-dur-2, .15s); }
  .ai-tl-month:hover { color: var(--accent, #8b5cf6); border-color: color-mix(in srgb, var(--accent, #8b5cf6) 45%, transparent); background: color-mix(in srgb, var(--accent, #8b5cf6) 10%, transparent); }
  .ai-tl-moments-toggle { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; color: var(--accent, #8b5cf6); background: color-mix(in srgb, var(--accent, #8b5cf6) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #8b5cf6) 22%, transparent); border-radius: 8px; padding: 5px 11px; cursor: pointer; transition: all var(--ov-dur-2, .15s); }
  .ai-tl-moments-toggle:hover { background: color-mix(in srgb, var(--accent, #8b5cf6) 16%, transparent); }
@@@ -1250,8 +1250,8 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  .ai-tl-moments { margin-top: 10px; }
  .ai-tl-session-vodlink { margin: 3px 0 6px; font-size: 0.78rem; }
  .ai-tl-session-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
--.ai-tl-transcript-toggle { border-color: color-mix(in srgb, var(--text-muted) 30%, transparent); color: var(--text-secondary); background: var(--bg-elevated, color-mix(in srgb, var(--text-primary, #fff) 3%, transparent)); }
--.ai-tl-transcript { margin-top: 10px; max-height: 340px; overflow-y: auto; border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 7%, transparent)); border-radius: 10px; padding: 8px 12px; background: var(--bg-elevated, color-mix(in srgb, var(--text-primary, #fff) 2%, transparent)); }
++.ai-tl-transcript-toggle { border-color: color-mix(in srgb, var(--text-muted) 30%, transparent); color: var(--text-secondary); background: color-mix(in srgb, var(--text-primary, #fff) 3%, transparent); }
++.ai-tl-transcript { margin-top: 10px; max-height: 340px; overflow-y: auto; border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 7%, transparent)); border-radius: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--text-primary, #fff) 2%, transparent); }
  .ai-tl-transcript[hidden] { display: none; }
  .ai-tl-ts:hover { text-decoration: underline; }
  .ai-tl-tr-text { color: var(--text-secondary); }
@@@ -1261,7 +1261,7 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  /* Wide screens: the tabs sit in the main column (app-channel.js _placeBelowFold) and use its full width. */
  .channel-below-fold.is-in-main { padding: 4px 0 28px; }
  .channel-below-fold.is-in-main > .container { max-width: none; width: auto; margin: 0; padding: 0 18px; }
--.ch-about-ai-toggle { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-elevated, color-mix(in srgb, var(--text-primary, #fff) 3%, transparent)); border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 7%, transparent)); }
++.ch-about-ai-toggle { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text-primary, #fff) 3%, transparent); border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 7%, transparent)); }
  .ch-about-ai-hint { font-size: 0.78rem; }
  .ai-tl-side-label { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); margin: 26px 0 14px; display: flex; align-items: center; gap: 9px; padding-bottom: 7px; border-bottom: 2px solid color-mix(in srgb, var(--accent, #8b5cf6) 30%, transparent); }
  .ai-tl-subtabs { display: flex; gap: 6px; margin: 14px 0 16px; border-bottom: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 8%, transparent)); }
@@@ -1308,15 +1308,17 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
  .ai-tl-tr-sounds { align-items: center; padding: 2px 0; }
  .ai-tl-ts--sound { color: var(--text-muted); font-weight: 600; }
  .ai-tl-sound-strip { display: flex; flex-wrap: wrap; gap: 4px; }
--.ai-tl-sound { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; color: var(--text-secondary); background: var(--bg-elevated, color-mix(in srgb, var(--text-primary, #fff) 4%, transparent)); border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 7%, transparent)); }
++.ai-tl-sound { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; color: var(--text-secondary); background: color-mix(in srgb, var(--text-primary, #fff) 4%, transparent); border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 7%, transparent)); }
  .ai-tl-transcript[data-filter="speech"] .ai-tl-tr-sounds { display: none; }
  .ai-tl-transcript[data-filter="sounds"] .ai-tl-tr-speech { display: none; }
  /*  ── from i18n-star.css ──  */
  .ch-lang-chip {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
--    color: #fde68a; background: linear-gradient(135deg, rgba(190,24,93,0.35), rgba(139,92,246,0.3));
--    border: 1px solid rgba(253,230,138,0.45); white-space: nowrap; cursor: help;
++    /* Warm gold mixed with the theme's text: pale gold on dark themes, deep amber on light ones (the fixed #fde68a
++       was unreadable on Daylight's pink). */
++    color: color-mix(in srgb, #f59e0b 35%, var(--text-primary)); background: linear-gradient(135deg, rgba(190,24,93,0.35), rgba(139,92,246,0.3));
++    border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); white-space: nowrap; cursor: help;
  }
  .ch-captions {
      margin: 10px 0 0; border-radius: 14px; overflow: hidden;
ddiff --git a/public/css/features/chatpage.css b/public/css/features/chatpage.css
iindex df49da73..74f4fa45 100644
---- a/public/css/features/chatpage.css
++++ b/public/css/features/chatpage.css
@@@ -69,7 +69,7 @@
      transition: background var(--ov-dur-2, 0.15s), transform var(--ov-dur-1, 0.1s);
  }
  .vc-create-btn:hover {
--    background: var(--accent-hover);
++    background: var(--accent-light);
      transform: scale(1.1);
  }
  .vc-channel-list {
ddiff --git a/public/css/features/dashboard.css b/public/css/features/dashboard.css
iindex 41e95474..89a86369 100644
---- a/public/css/features/dashboard.css
++++ b/public/css/features/dashboard.css
@@@ -37,7 +37,7 @@
  .pc-test-menu-head {
      font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
      color: var(--text-muted, #888); padding: 5px 9px 6px;
--    border-bottom: 1px solid var(--border-color, #2a2a33); margin-bottom: 3px;
++    border-bottom: 1px solid var(--border); margin-bottom: 3px;
  }
  .pc-status.pc-status-block { display: block; }
  .pc-connecting-box {
@@@ -45,14 +45,14 @@
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
      padding: 16px; text-align: center;
  }
--.pc-connecting-head { font-size: 0.98rem; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 10px; }
++.pc-connecting-head { font-size: 0.98rem; font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: 10px; }
  .pc-manual { font-size: 0.82rem; color: var(--text-muted, #999); display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
  .pc-copy-btn {
      background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent); border: 1px solid var(--border); color: var(--text-secondary);
      border-radius: 6px; padding: 3px 9px; font-size: 0.78rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
      transition: background var(--ov-dur-2, .15s), border-color var(--ov-dur-2, .15s);
  }
--.pc-copy-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); }
++.pc-copy-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text-primary); }
  .pc-cancel-btn { opacity: .85; }
  
  .ai-bot-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
@@@ -78,7 +78,7 @@
  .bucks-log-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 440px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
  .bucks-log-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
  .bucks-log-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.05rem; padding: 4px; border-radius: 6px; }
--.bucks-log-close:hover { background: var(--bg-hover); color: var(--text); }
++.bucks-log-close:hover { background: var(--bg-hover); color: var(--text-primary); }
  .bucks-log-body { overflow-y: auto; padding: 8px; }
  .bucks-log-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; }
  .bucks-log-row:hover { background: var(--bg-tertiary); }
@@@ -379,7 +379,7 @@
      display:flex; align-items:center; justify-content:center;
      font-size:1.7rem; font-weight:700; color:var(--text-muted);
  }
--.dash-profile-head .settings-banner-name { font-size:1.15rem; font-weight:700; color:var(--text); }
++.dash-profile-head .settings-banner-name { font-size:1.15rem; font-weight:700; color:var(--text-primary); }
  .settings-avatar-edit:hover { background:var(--accent-dark,var(--accent-dark)); color:#fff; }
  .dash-tips-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .dash-goal { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--bg-secondary); }
ddiff --git a/public/css/features/docs.css b/public/css/features/docs.css
iindex 8d13d6a1..c4732795 100644
---- a/public/css/features/docs.css
++++ b/public/css/features/docs.css
@@@ -4,7 +4,7 @@
  /*  ── from style.css ──  */
  .doc-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
  .doc-table th, .doc-table td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; }
--.doc-table th { background: var(--surface); font-weight: 600; white-space: nowrap; }
++.doc-table th { background: var(--bg-card); font-weight: 600; white-space: nowrap; }
  .doc-table td:first-child { white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 0.85em; }
  .doc-table tr:hover td { background: rgba(var(--accent-rgb, 99,102,241), 0.04); }
  @media (max-width: 720px) {
ddiff --git a/public/css/i18n-star.css b/public/css/i18n-star.css
iindex 0bdf0af8..ccd3ea0f 100644
---- a/public/css/i18n-star.css
++++ b/public/css/i18n-star.css
@@@ -31,7 +31,7 @@
  @keyframes i18nPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 50% { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); } }
  
  /* ── Channel: language chip in the info bar ─────────────────── */
--.ch-lang-chip i { color: #fff; }
++.ch-lang-chip i { color: inherit; }
  
  /* ── Channel: live captions panel (under the player) ─────────── */
  .ch-captions-title i { color: var(--accent-light); }
ddiff --git a/public/css/messenger.css b/public/css/messenger.css
iindex 4abe19cc..c72c7384 100644
---- a/public/css/messenger.css
++++ b/public/css/messenger.css
@@@ -651,7 +651,7 @@
      right: 0;
      z-index: 100;
      background: var(--bg-secondary, #1e1e2e);
--    border: 1px solid var(--border-color, #333);
++    border: 1px solid var(--border);
      border-radius: 8px;
      padding: 4px;
      min-width: 200px;
@@@ -690,7 +690,7 @@
      padding: 12px;
      color: var(--text-muted, #6c7086);
      font-size: 13px;
--    border-top: 1px solid var(--border-color, #333);
++    border-top: 1px solid var(--border);
  }
  .msg-unblock-inline {
      background: none;
ddiff --git a/public/css/style.css b/public/css/style.css
iindex 06346f5b..e83ae015 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -401,7 +401,7 @@ body.ov-nav-overlay .navbar.ovnav-top {
      white-space: nowrap;
      font-size: clamp(1.5rem, 3.8vw, 2.35rem);
      font-weight: 600;
--    color: var(--text);
++    color: var(--text-primary);
      margin: 2px auto 22px;
  }
  /* Two standout callouts under the tagline */
@@@ -439,7 +439,7 @@ body.ov-nav-overlay .navbar.ovnav-top {
  }
  .hero-standout strong {
      display: block;
--    color: var(--text);
++    color: var(--text-primary);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2;
@@@ -3526,7 +3526,7 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .pc-test-menu-wrap { position: relative; display: inline-block; }
  .pc-test-menu {
      position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 230px;
--    background: var(--bg-secondary, #17171d); border: 1px solid var(--border-color, #2a2a33);
++    background: var(--bg-secondary, #17171d); border: 1px solid var(--border);
      border-radius: 10px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.45);
      display: flex; flex-direction: column; gap: 2px; animation: pcFadeIn var(--ov-dur-2, .16s) var(--ov-ease-out, ease-out);
  }
@@@ -3534,7 +3534,7 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
     or the menu renders open on load and the JS toggle can't close it. */
  .pc-test-menu button {
      display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
--    background: none; border: none; color: var(--text, #ddd); font-size: 0.85rem;
++    background: none; border: none; color: var(--text-primary); font-size: 0.85rem;
      padding: 7px 9px; border-radius: 7px; cursor: pointer;
  }
  .pc-test-menu button:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
@@@ -3617,7 +3617,7 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  
  .clip-chat-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
  .clip-chat-label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); }
--.clip-chat-title { font-size: 0.92rem; font-weight: 700; color: var(--text-primary, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
++.clip-chat-title { font-size: 0.92rem; font-weight: 700; color: var(--text-primary, var(--text-primary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .clip-chat-meta { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text-muted); min-width: 0; }
  .clip-chat-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clip-chat-avatar { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; color: #fff; }
@@@ -3782,7 +3782,7 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  
  /* Managed Stream cards */
  .dash-managed-stream-card {
--    background: var(--surface); border: 1px solid var(--border);
++    background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; padding: 14px; margin-bottom: 12px;
  }
  .dash-ms-header {
@@@ -3818,7 +3818,8 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .form-input:focus {
      border-color: var(--accent-dark);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
--    background: rgba(18,18,26,0.96);
++    /* The theme's own field colour: a fixed near-black hid the typed text on light themes. */
++    background: var(--bg-input);
  }
  select.form-input { cursor: pointer; }
  textarea.form-input { resize: vertical; min-height: 60px; }
@@@ -4434,7 +4435,7 @@ body :is(.modal-overlay, .bc-ws-confirm-overlay, .bc-modal, .bc-perm-overlay, .b
      flex-shrink: 0; line-height: 1;
  }
  .live-tab.active .live-tab-num {
--    background: var(--accent); color: var(--bg-main);
++    background: var(--accent); color: var(--bg-primary);
  }
  @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
@@@ -4579,7 +4580,7 @@ body :is(.modal-overlay, .bc-ws-confirm-overlay, .bc-modal, .bc-perm-overlay, .b
  .ch-panel-edit select {
      width: 100%;
      background: var(--bg-input, var(--bg-primary));
--    color: var(--text);
++    color: var(--text-primary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 10px;
@@@ -4706,7 +4707,7 @@ body :is(.modal-overlay, .bc-ws-confirm-overlay, .bc-modal, .bc-perm-overlay, .b
      background: var(--bg-card); border-radius: 0;
      color: var(--text-muted);
  }
--.ch-offline-banner i { margin-bottom: 16px; color: var(--primary, var(--accent)); }
++.ch-offline-banner i { margin-bottom: 16px; color: var(--accent); }
  .ch-offline-banner p { margin: 4px 0; }
  
  /* ── Offline Global Chat ─────────────────────────────────── */
@@@ -4781,7 +4782,7 @@ body :is(.modal-overlay, .bc-ws-confirm-overlay, .bc-modal, .bc-perm-overlay, .b
  .uai-collapsible.uai-open .uai-collapse-preview { display: none; }
  /* Streamer overview leads the popover, set apart from the chat insight below it. */
  .uai-streamer { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
--.uai-streamer h4 { color: var(--text); }
++.uai-streamer h4 { color: var(--text-primary); }
  .uai-group-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 4px 0 10px; display: flex; align-items: center; gap: 6px; }
  .uai-group-sub { margin: -6px 0 12px !important; }
  .uai-tl-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 0.82rem; font-weight: 600; color: var(--accent); text-decoration: none; }
@@@ -4847,7 +4848,7 @@ button.uai-tl-more { background: none; border: none; cursor: pointer; padding: 0
      font-size:0.72rem; color:var(--text-muted,#888); text-transform:uppercase;
      letter-spacing:0.04em; margin-top:2px;
  }
--.analytics-streams-table h3 { font-size:0.95rem; margin:0 0 10px; color:var(--text,#fff); }
++.analytics-streams-table h3 { font-size:0.95rem; margin:0 0 10px; color:var(--text-primary); }
  
  /* ═══════════════════════════════════════════════════════════════
     VOD / Clip Player Pages
@@@ -6040,9 +6041,9 @@ body.theme-light .btn-outline:hover {
  }
  .pastes-filter-btn.active,
  .pastes-filter-btn:hover {
--    background: var(--primary);
++    background: var(--accent);
      color: #fff;
--    border-color: var(--primary);
++    border-color: var(--accent);
  }
  .pastes-search {
      display: flex;
@@@ -6051,14 +6052,14 @@ body.theme-light .btn-outline:hover {
  .pastes-search input {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
--    color: var(--text);
++    color: var(--text-primary);
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 0.85rem;
      width: 220px;
  }
  .pastes-search input:focus {
--    border-color: var(--primary);
++    border-color: var(--accent);
      outline: none;
  }
  
@@@ -6083,7 +6084,7 @@ body.theme-light .btn-outline:hover {
  }
  .paste-card:hover {
      transform: translateY(-2px);
--    border-color: var(--primary);
++    border-color: var(--accent);
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }
  
@@@ -6132,7 +6133,7 @@ body.theme-light .btn-outline:hover {
  .paste-card-title {
      font-weight: 600;
      font-size: 0.9rem;
--    color: var(--text);
++    color: var(--text-primary);
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
@@@ -6163,7 +6164,7 @@ body.theme-light .btn-outline:hover {
      display: flex;
      align-items: center;
      justify-content: center;
--    background: var(--primary);
++    background: var(--accent);
      color: #fff;
      font-size: 0.65rem;
      font-weight: 700;
@@@ -6174,7 +6175,7 @@ body.theme-light .btn-outline:hover {
      gap: 8px;
  }
  .paste-card-lang {
--    background: var(--primary);
++    background: var(--accent);
      color: #fff;
      padding: 1px 6px;
      border-radius: 4px;
@@@ -6281,22 +6282,22 @@ body.theme-light .btn-outline:hover {
  /* ── Documentation Page ──────────────────────────────────── */
  #page-documentation h2 { margin-top: 2.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; }
  #page-documentation h3 { margin-top: 1.5rem; }
--#page-documentation pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; margin: 1rem 0; }
++#page-documentation pre { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; margin: 1rem 0; }
  #page-documentation code { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.85em; }
--#page-documentation p code, #page-documentation li code, #page-documentation td code { background: var(--surface); padding: 0.15em 0.4em; border-radius: 3px; }
++#page-documentation p code, #page-documentation li code, #page-documentation td code { background: var(--bg-card); padding: 0.15em 0.4em; border-radius: 3px; }
  #page-documentation ul, #page-documentation ol { margin: 0.5rem 0 1rem 1.5rem; line-height: 1.7; }
  /* Endpoint tables have nowrap first columns; on a phone they were up to 100px wider than the screen
     and scrolled the whole page sideways. Below tablet width a table scrolls inside its own box. */
  .doc-copy-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; background: var(--accent-strong, var(--accent, #3472d8)); color: var(--on-accent-strong, var(--on-accent, #fff)); border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: opacity var(--ov-dur-2, 0.15s); }
  .doc-copy-btn:hover { opacity: 0.85; }
--.doc-vibe-hero { background: linear-gradient(135deg, var(--surface) 0%, rgba(var(--accent-rgb, 99,102,241), 0.08) 100%); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 2rem; }
++.doc-vibe-hero { background: linear-gradient(135deg, var(--bg-card) 0%, rgba(var(--accent-rgb, 99,102,241), 0.08) 100%); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 2rem; }
  .doc-vibe-hero h2 { margin-top: 0 !important; border: none !important; padding: 0 !important; }
  
  /* Doc tab navigation */
  .docs-tab-wrap { display: flex; align-items: stretch; position: relative; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
  .docs-tab-bar { flex: 1 1 auto; min-width: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; }
  /* Edge fades hint at more tabs beyond the fold */
--.docs-tab:hover { color: var(--text); }
++.docs-tab:hover { color: var(--text-primary); }
  .docs-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
  
  /* ── Paste Viewer ─────────────────────────────────────────── */
@@@ -6316,7 +6317,7 @@ body.theme-light .btn-outline:hover {
  .paste-view-title {
      font-size: 1.4rem;
      font-weight: 700;
--    color: var(--text);
++    color: var(--text-primary);
      margin: 0;
  }
  .paste-view-meta {
@@@ -6448,7 +6449,7 @@ body.theme-light .btn-outline:hover {
      font-size: 0.82rem;
      line-height: 1.55;
      font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
--    color: var(--text);
++    color: var(--text-primary);
      flex: 1 0 auto;
      overflow: visible;
      tab-size: 4;
@@@ -6494,7 +6495,7 @@ body.theme-light .btn-outline:hover {
      color: var(--text-secondary);
  }
  .paste-screenshot-url a {
--    color: var(--primary);
++    color: var(--accent);
      text-decoration: none;
  }
  .paste-screenshot-url a:hover {
@@@ -6548,7 +6549,7 @@ body.theme-light .btn-outline:hover {
      padding: 64px 20px;
  }
  .paste-burned h2 {
--    color: var(--text);
++    color: var(--text-primary);
      margin-bottom: 8px;
  }
  .paste-burned p {
@@@ -6589,7 +6590,7 @@ body.theme-light .btn-outline:hover {
  .paste-modal-header h2 {
      margin: 0;
      font-size: 1.1rem;
--    color: var(--text);
++    color: var(--text-primary);
  }
  .paste-modal-close {
      background: none;
@@@ -6601,7 +6602,7 @@ body.theme-light .btn-outline:hover {
      line-height: 1;
  }
  .paste-modal-close:hover {
--    color: var(--text);
++    color: var(--text-primary);
  }
  .paste-modal-body {
      padding: 20px;
@@@ -6664,7 +6665,7 @@ textarea.paste-textarea {
  }
  .screenshot-upload-zone:hover,
  .screenshot-upload-zone.drag-over {
--    border-color: var(--primary);
++    border-color: var(--accent);
      background: rgba(var(--primary-rgb, 99,102,241), 0.08);
      box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99,102,241), 0.12);
  }
@@@ -6694,7 +6695,7 @@ textarea.paste-textarea {
      opacity: 0.6;
  }
  .screenshot-upload-hint strong {
--    color: var(--primary);
++    color: var(--accent);
  }
  .screenshot-upload-formats {
      display: flex;
@@@ -7278,7 +7279,7 @@ textarea.paste-textarea {
      padding: 4px 8px;
      background: var(--bg-secondary, #1a1a2e);
      border: 1px solid var(--border, #333);
--    color: var(--text, #e0e0e0);
++    color: var(--text-primary);
      border-radius: var(--radius, 8px);
      cursor: pointer;
  }
@@@ -7335,7 +7336,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
  }
  .floating-chat-fab:hover {
      transform: scale(1.08);
--    background: var(--accent-hover, #4f46e5);
++    background: var(--accent-light);
  }
  
  /* ── Draggable floating buttons (messenger toggle + chat FAB) ── */
@@@ -7423,7 +7424,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
      user-select: none;
      font-size: 0.9rem;
      font-weight: 600;
--    color: var(--text, #e0e0e0);
++    color: var(--text-primary);
  }
  .fcw-header i { margin-right: 6px; color: var(--accent, #6366f1); }
  .fcw-header-btns { display: flex; gap: 4px; }
@@@ -7436,7 +7437,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
      font-size: 0.85rem;
      border-radius: 4px;
  }
--.fcw-header-btns button:hover { background: var(--bg-tertiary, #252540); color: var(--text, #e0e0e0); }
++.fcw-header-btns button:hover { background: var(--bg-tertiary, #252540); color: var(--text-primary); }
  .fcw-body {
      flex: 1;
      display: flex;
@@@ -7473,7 +7474,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
      width: 100%;
      background: var(--bg-tertiary, #252540);
      border: 1px solid var(--border, #333);
--    color: var(--text, #e0e0e0);
++    color: var(--text-primary);
      padding: 6px 10px;
      border-radius: var(--radius, 8px);
      font-size: 0.85rem;
@@@ -7568,7 +7569,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
      border-radius: var(--radius, 8px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      font-size: 0.82rem;
--    color: var(--text, #e0e0e0);
++    color: var(--text-primary);
  }
  .vc-mini-dot {
      font-size: 0.5rem;
@@@ -7581,7 +7582,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
  .vc-mini-btn {
      background: var(--bg-tertiary, #252540);
      border: 1px solid var(--border, #333);
--    color: var(--text, #e0e0e0);
++    color: var(--text-primary);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
@@@ -7624,7 +7625,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
  .image-censor-tool {
      background: var(--bg-tertiary, #252540);
      border: 1px solid var(--border, #444);
--    color: var(--text, #ccc);
++    color: var(--text-primary);
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
@@@ -7633,12 +7634,12 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
  }
  .image-censor-tool:hover {
      background: var(--bg-primary, #0e0e1a);
--    border-color: var(--primary, #7c3aed);
++    border-color: var(--accent);
  }
  .image-censor-tool.active {
--    background: var(--primary, #7c3aed);
++    background: var(--accent);
      color: #fff;
--    border-color: var(--primary, #7c3aed);
++    border-color: var(--accent);
  }
  .image-censor-canvas-wrap {
      flex: 1;
@@@ -8098,8 +8099,8 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
      word-break: break-all;
  }
  .chat-link:hover {
--    color: var(--accent-hover, var(--accent-light));
--    text-decoration-color: var(--accent-hover, var(--accent-light));
++    color: var(--accent-light);
++    text-decoration-color: var(--accent-light);
  }
  
  /* ── Trust Domain Dialog ─────────────────────────────────────── */
@@@ -8225,8 +8226,8 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
      font-weight: 600;
  }
  .link-trust-always:hover {
--    background: var(--accent-hover, var(--accent-light));
--    border-color: var(--accent-hover, var(--accent-light));
++    background: var(--accent-light);
++    border-color: var(--accent-light);
  }
  .link-trust-always i { margin-right: 4px; }
  
@@@ -8809,7 +8810,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
  }
  .paste-ai-title { font-weight: 700; color: var(--accent, var(--accent)); margin-bottom: 6px; font-size: 0.9rem; }
  .paste-ai-title i { margin-right: 5px; }
--.paste-ai-summary { font-size: 0.92rem; line-height: 1.45; color: var(--text, #eee); }
++.paste-ai-summary { font-size: 0.92rem; line-height: 1.45; color: var(--text-primary); }
  .paste-ai-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .paste-ai-tag {
      font-size: 0.74rem; padding: 2px 9px; border-radius: 12px;
@@@ -8834,7 +8835,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
  .emote-picker-grid.emote-grid-list { display: block; overflow-y: auto; }
  .emote-cat-header {
      position: sticky; top: 0; z-index: 1;
--    background: var(--bg-elevated, #1c1c22);
++    background: var(--bg-tertiary);
      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px;
      color: var(--text-secondary, #aaa); font-weight: 700;
      padding: 7px 8px 4px; display: flex; align-items: center; gap: 6px;
@@@ -9276,7 +9277,7 @@ html[data-theme-mode="light"] .hero h1 { background-image: linear-gradient(90deg
  .ai-tl-session-title a { color: var(--text-primary); text-decoration: none; }
  .ai-tl-session-title a:hover { color: var(--accent, #8b5cf6); }
  .ai-tl-session-meta i { opacity: 0.75; }
--.ai-tl-moment { display: flex; gap: 10px; padding: 8px; border-radius: 10px; background: var(--bg-elevated, color-mix(in srgb, var(--text-primary, #fff) 3%, transparent)); border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 6%, transparent)); }
++.ai-tl-moment { display: flex; gap: 10px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--text-primary, #fff) 3%, transparent); border: 1px solid var(--border, color-mix(in srgb, var(--text-primary, #fff) 6%, transparent)); }
  .ai-tl-moment-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .ai-tl-empty i { font-size: 2rem; color: color-mix(in srgb, var(--accent, #8b5cf6) 60%, transparent); margin-bottom: 12px; }
  .ai-tl-empty p { margin: 4px 0; }
ddiff --git a/public/js/channel-uploads.js b/public/js/channel-uploads.js
iindex b6f7cf8c..794a3617 100644
---- a/public/js/channel-uploads.js
++++ b/public/js/channel-uploads.js
@@@ -48,7 +48,7 @@
          if (document.getElementById('cu-styles')) return;
          const css = `
          .cu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100000;padding:16px;}
--        .cu-modal{background:var(--bg-elevated,#1c1c22);color:var(--text,#eee);width:min(560px,96vw);max-height:90vh;overflow:auto;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 60px rgba(0,0,0,.5);}
++        .cu-modal{background:var(--bg-tertiary);color:var(--text-primary);width:min(560px,96vw);max-height:90vh;overflow:auto;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 60px rgba(0,0,0,.5);}
          .cu-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);}
          .cu-head h3{margin:0;font-size:16px;}
          .cu-close{background:none;border:none;color:inherit;font-size:20px;cursor:pointer;opacity:.7;}
ddiff --git a/public/js/stream-player.js b/public/js/stream-player.js
iindex 64881e33..a7e6c1dd 100644
---- a/public/js/stream-player.js
++++ b/public/js/stream-player.js
@@@ -3352,7 +3352,7 @@ function promptClipTitle(clipId) {
  
  function _buildClipTitleModal(overlay, clipId) {
      const modal = document.createElement('div');
--    modal.style.cssText = 'background:var(--card-bg, #1a1a2e);border:1px solid var(--border, #333);border-radius:12px;padding:24px;max-width:400px;width:90%;text-align:center;';
++    modal.style.cssText = 'background:var(--bg-card);border:1px solid var(--border, #333);border-radius:12px;padding:24px;max-width:400px;width:90%;text-align:center;';
      modal.innerHTML = `
          <h3 style="margin:0 0 8px 0"><i class="fa-solid fa-scissors"></i> Name Your Clip</h3>
          <p style="margin:0 0 16px 0;opacity:0.7;font-size:0.9rem">Say what happened, or skip it and the AI names it from what was said and shown.</p>
@@@ -3436,7 +3436,7 @@ function _buildClipTrimModal(clipId, dur, defaultTitle) {
      overlay.id = 'clip-trim-overlay';
      overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;';
      const modal = document.createElement('div');
--    modal.style.cssText = 'background:var(--card-bg,#1a1a2e);border:1px solid var(--border,#333);border-radius:14px;padding:22px;max-width:600px;width:100%;box-sizing:border-box;max-height:92vh;overflow:auto;';
++    modal.style.cssText = 'background:var(--bg-card);border:1px solid var(--border,#333);border-radius:14px;padding:22px;max-width:600px;width:100%;box-sizing:border-box;max-height:92vh;overflow:auto;';
      modal.innerHTML = `
          <h3 style="margin:0 0 4px 0"><i class="fa-solid fa-scissors"></i> Trim &amp; Name Your Clip</h3>
          <p style="margin:0 0 14px 0;opacity:0.7;font-size:0.88rem">Drag the handles to trim the start and end. Only the final cut is saved.</p>
ddiff --git a/test/theme-tokens-defined.test.js b/test/theme-tokens-defined.test.js
nnew file mode 100644
iindex 00000000..173fde92
---- /dev/null
++++ b/test/theme-tokens-defined.test.js
@@@ -0,0 +1,48 @@
++'use strict';
++// Live's styles name only colour variables its themes define. Eleven names (--text, --surface, --primary, …) were
++// used across the CSS and two scripts while no theme set them, so the browser fell back to a dark-theme literal
++// (light grey text and near-black cards on Daylight) or, with no fallback, dropped the declaration (see-through
++// studio panels, no hover). They now point at the theme tokens (--text-primary, --bg-card, --accent, …).
++//   node test/theme-tokens-defined.test.js
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const root = path.join(__dirname, '..', 'public');
++function walk(dir, ext) {
++    return fs.readdirSync(dir, { withFileTypes: true }).flatMap((d) => {
++        const p = path.join(dir, d.name);
++        return d.isDirectory() ? walk(p, ext) : (p.endsWith(ext) ? [p] : []);
++    });
++}
++const files = [...walk(path.join(root, 'css'), '.css'), ...walk(path.join(root, 'js'), '.js')];
++const UNDEFINED = ['text', 'primary', 'surface', 'surface-raised', 'bg', 'bg-elevated', 'card-bg', 'bg-main', 'bg-active',
++    'border-color', 'accent-hover'];
++const use = new RegExp(`var\\(--(${UNDEFINED.map((n) => n.replace(/-/g, '\\-')).join('|')})(?![\\w-])`);
++
++// No theme defines them (so the test is about the SPA, not the standalone pages that define their own).
++const style = fs.readFileSync(path.join(root, 'css', 'style.css'), 'utf8');
++for (const n of UNDEFINED) assert.ok(!new RegExp(`(^|[\\s;{])--${n}\\s*:`, 'm').test(style), `style.css defines --${n}: drop it from this list`);
++
++const hits = [];
++for (const f of files) {
++    const src = fs.readFileSync(f, 'utf8').replace(/\/\*[\s\S]*?\*\//g, '');
++    src.split('\n').forEach((line, i) => { if (use.test(line)) hits.push(`${path.relative(root, f)}:${i + 1}  ${line.trim().slice(0, 100)}`); });
++}
++assert.deepStrictEqual(hits, [], 'a style names a colour variable no theme defines:\n' + hits.join('\n'));
++
++// The two scripts that paint their own boxes use the theme's card colour.
++const uploads = fs.readFileSync(path.join(root, 'js', 'channel-uploads.js'), 'utf8');
++assert.match(uploads, /\.cu-modal\{background:var\(--bg-tertiary\);color:var\(--text-primary\)/, 'the upload dialog wears the theme');
++const player = fs.readFileSync(path.join(root, 'js', 'stream-player.js'), 'utf8');
++assert.ok(!/#1a1a2e/.test(player), 'the player has no fixed dark card colour');
++
++// A focused text box keeps the theme's field colour (a fixed near-black hid the typed text on light themes).
++const focus = /\.form-input:focus \{([^}]*)\}/.exec(style);
++assert.ok(focus, '.form-input:focus exists');
++assert.match(focus[1], /background: var\(--bg-input\)/);
++
++// The channel's language chip mixes its gold with the theme's text instead of a pale fixed gold.
++const channel = fs.readFileSync(path.join(root, 'css', 'features', 'channel.css'), 'utf8');
++assert.match(channel, /\.ch-lang-chip \{[^}]*color: color-mix\(in srgb, #f59e0b 35%, var\(--text-primary\)\)/);
++console.log('theme tokens defined: all checks passed');