/* ============================================================
 * TV Watching — color themes (66: 33 dark + 33 light)
 * Shared component rules + per-theme CSS variables
 * ============================================================ */

/* ---- shared themed surfaces (all non-default themes) ---- */

[data-theme] body {
  background-attachment: fixed;
}

[data-theme] .hero-panel,
[data-theme] .card,
[data-theme] .new-item,
[data-theme] .empty-state,
[data-theme] .modal,
[data-theme] .search-results,
[data-theme] .season-block,
[data-theme] .sidebar,
[data-theme] .sidebar-stats,
[data-theme] .sidebar-filter,
[data-theme] .shelf,
[data-theme] .episode-card,
[data-theme] .search-shelf {
  background: var(--bg-elev);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

[data-theme] .sidebar {
  background: var(--sidebar-bg, linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%));
  box-shadow: none;
}

[data-theme] .search-shelf {
  background: var(--shelf-bg, color-mix(in srgb, var(--bg-elev) 88%, transparent));
  border-color: var(--shelf-border, var(--border-subtle, var(--border)));
  box-shadow: none;
}

[data-theme] .shelf {
  background: var(--shelf-bg, color-mix(in srgb, var(--bg-elev) 88%, transparent));
  border-color: var(--shelf-border, var(--border-subtle, var(--border)));
  box-shadow: none;
}

[data-theme] .sidebar-stats {
  background: var(--bg-elev-2);
  box-shadow: none;
}

[data-theme] .sidebar-stats strong {
  color: var(--accent);
}

[data-theme] .sidebar-stats .stat-green {
  color: var(--good) !important;
}

[data-theme] .new-item:hover {
  border-color: var(--accent);
}

[data-theme] .episode-card {
  box-shadow: var(--shadow);
}

[data-theme] .episode-card:hover {
  border-color: var(--border-strong);
}

[data-theme] .stat-card,
[data-theme] .season-header,
[data-theme] .provider-pill,
[data-theme] .search-result:hover {
  background: var(--bg-elev-2);
  border-color: var(--border);
}

[data-theme] .card .poster,
[data-theme] .new-item img.poster {
  background: var(--bg-elev-2);
}

[data-theme] .empty-state {
  border-style: solid;
  color: var(--text-muted);
}

[data-theme] .sync-progress {
  background: var(--bg-elev);
  border-bottom-color: var(--border);
}

[data-theme] button:not(.primary):not(.ghost):not(.icon-btn):not(.theme-swatch):not(.progress-style-swatch):not(.progress-color-swatch):not(.tab-btn):not(.sync-btn):not(.shelf-scroll):not(.btn-mark-watched):not(.btn-dismiss):not(.notification-fab):not(.notification-item):not(.dns-optout-allow):not(.dns-optout-continue):not(.user-menu-item):not(.notification-panel-tab):not(.coming-view-tab):not(.view-layout-btn):not(.lv7-nav-link):not(.lv7-nav-menu-item):not(.lv7-menu-btn):not(.lv7-filters-toggle):not(.lv7-search-kbd):not(.library-bottom-nav button):not(.md2-primary):not(.md2-save):not(.md2-action-btn):not(.md2-continue):not(.md2-watched-btn):not(.md2-status-chip):not(.md2-tab):not(.md2-back-link):not(.md2-season-row):not(.md2-season-watch-btn):not(.md2-episode):not(.md2-episode-open):not(.md2-episode-watch):not(.md2-clear-link) {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text);
}

[data-theme] button.ghost {
  background: var(--ghost-bg);
  border-color: var(--border);
  color: var(--text-muted);
}

[data-theme] a.ghost {
  background: var(--ghost-bg);
  border-color: var(--border);
  color: var(--text-muted);
}

[data-theme] button.ghost:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--border-strong);
}

[data-theme] a.ghost:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--border-strong);
}

[data-theme] button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent-dark)));
  border-color: transparent;
  color: var(--accent-text);
  font-weight: 800;
  box-shadow: 0 0 20px var(--accent-glow);
}

[data-theme] button.primary:hover {
  background: linear-gradient(135deg, var(--accent-hover, var(--accent)), var(--accent-strong, var(--accent-dark)));
  color: var(--accent-text-hover);
}

[data-theme] .sync-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent-dark)));
  color: var(--accent-text, #fff);
  box-shadow: 0 0 20px var(--accent-glow, transparent);
}

[data-theme] .tab-strip {
  background: var(--bg-elev);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

[data-theme] .tab-btn {
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-left: 4px solid transparent;
}

[data-theme] .tab-btn:hover {
  color: var(--text);
  background: var(--tab-hover);
}

[data-theme] .tab-btn.active {
  background: var(--tab-active-bg);
  color: var(--text);
  border: none;
  border-left: 4px solid var(--accent);
  box-shadow: none;
}

[data-theme] input[type="search"],
[data-theme] input[type="text"],
[data-theme] select,
[data-theme] .search-input,
[data-theme] .list-filter-input {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text);
}

[data-theme] input[type="search"]:focus,
[data-theme] .list-filter-input:focus,
[data-theme] select:focus {
  border-color: var(--border-strong);
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

[data-theme] .card:hover,
[data-theme] .new-item:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 40px var(--accent-glow);
}

[data-theme] .sync-progress-fill,
[data-theme] .progress-fill {
  background: var(--progress-fill);
}

[data-theme] .progress-segment.is-filled,
[data-theme] .progress-dot.is-filled {
  background: var(--progress-fill);
}

[data-theme] .progress-dot.is-current {
  border-color: var(--progress-fill);
}

[data-theme] .progress-fill--gradient {
  background: linear-gradient(90deg, var(--progress-fill) 0%, var(--progress-gradient-end, #a855f7) 100%);
}

[data-theme] .sync-progress-bar,
[data-theme] .progress-bar {
  background: var(--progress-track);
}

[data-theme-mode="light"] .progress-segment:not(.is-filled),
[data-theme-mode="light"] .progress-dot:not(.is-filled):not(.is-current) {
  background: var(--progress-track);
}

[data-theme] .badge-new {
  background: var(--accent);
  color: var(--accent-text);
}

[data-theme] .stat-value {
  color: var(--accent);
}

[data-theme] .stat-card:nth-child(2) .stat-value {
  color: var(--accent-strong);
}

[data-theme] .hero-panel {
  background: var(--hero-bg);
  border-color: var(--border-strong);
}

[data-theme] .modal-header {
  border-bottom-color: var(--border);
}

[data-theme] .episode-item {
  border-top-color: var(--border-subtle);
}

[data-theme] .episode-row {
  border-top-color: var(--border-subtle);
}

[data-theme] .share-btn {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text);
}

[data-theme] .share-btn:hover,
[data-theme] .share-btn:focus-visible {
  background: var(--bg-elev);
  border-color: var(--border-strong);
}

[data-theme] .icon-btn {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text-muted);
}

[data-theme] .icon-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-elev);
}

[data-theme] .mobile-app-support-btn:hover:not(:disabled),
[data-theme] .mobile-app-support-btn:focus-visible {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent-dark)));
  color: var(--accent-text);
}

/* ---- 1. Broadcast (yellow + green) ---- */

:root[data-theme="broadcast"] {
  --bg: #060504;
  --bg-elev: #221e14;
  --bg-elev-2: #2e281c;
  --border: #6a5c38;
  --border-strong: #8a7848;
  --border-subtle: rgba(106, 92, 56, 0.45);
  --text: #faf6ec;
  --text-muted: #d4c498;
  --text-dim: #a89868;
  --accent: #f5c518;
  --accent-dark: #e0a800;
  --accent-strong: #2ecc71;
  --accent-soft: rgba(245, 197, 24, 0.22);
  --accent-glow: rgba(245, 197, 24, 0.15);
  --accent-text: #1a1400;
  --accent-text-hover: #041208;
  --accent-hover: #ffd84d;
  --good: #2ecc71;
  --good-soft: rgba(46, 204, 113, 0.22);
  --ghost-bg: rgba(46, 36, 20, 0.45);
  --tab-hover: rgba(245, 197, 24, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(245, 197, 24, 0.32), rgba(46, 204, 113, 0.14));
  --tab-active-border: rgba(245, 197, 24, 0.55);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(106, 92, 56, 0.55);
  --hero-bg: linear-gradient(135deg, #2a2418 0%, #221e14 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

[data-theme="broadcast"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(245, 197, 24, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(46, 204, 113, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a0805 0%, #060504 100%);
}

/* ---- dark (default neutral) ---- */

:root[data-theme="dark"] {
  --bg: #0b0d12;
  --bg-elev: #12161f;
  --bg-elev-2: #181d28;
  --border: #232a3a;
  --border-strong: #2f384c;
  --border-subtle: rgba(35, 42, 58, 0.45);
  --text: #e7ecf3;
  --text-muted: #8c97ad;
  --text-dim: #65718a;
  --accent: #6aa3ff;
  --accent-dark: #4d8bff;
  --accent-strong: #38d39f;
  --accent-soft: rgba(106, 163, 255, 0.12);
  --accent-glow: rgba(106, 163, 255, 0.14);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #7eb0ff;
  --good: #38d39f;
  --good-soft: rgba(56, 211, 159, 0.14);
  --watching: #24a968;
  --watching-soft: rgba(36, 169, 104, 0.14);
  --ghost-bg: rgba(24, 29, 40, 0.5);
  --tab-hover: rgba(106, 163, 255, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(106, 163, 255, 0.18), rgba(56, 211, 159, 0.1));
  --tab-active-border: rgba(106, 163, 255, 0.35);
  --tab-active-inset: rgba(255, 255, 255, 0.04);
  --track-bg: rgba(74, 36, 40, 0.5);
  --hero-bg: linear-gradient(135deg, #12161f 0%, #0b0d12 100%);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(106, 163, 255, 0.12), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(56, 211, 159, 0.06), transparent),
    linear-gradient(180deg, #0e1018 0%, #0b0d12 100%);
}

/* ---- watchnext (landing blues + brand gold/green) ---- */

:root[data-theme="watchnext"] {
  --bg: #0a0c10;
  --bg-elev: #12161e;
  --bg-elev-2: #1a2030;
  --border: #3a4558;
  --border-strong: #505c72;
  --border-subtle: rgba(58, 69, 88, 0.45);
  --text: #eef2f8;
  --text-muted: #98a4b8;
  --text-dim: #687488;
  --accent: #f5c518;
  --accent-dark: #22b564;
  --accent-strong: #6aa3ff;
  --accent-soft: rgba(245, 197, 24, 0.18);
  --accent-glow: rgba(106, 163, 255, 0.15);
  --accent-text: #080b10;
  --accent-text-hover: #080b10;
  --accent-hover: #f7d045;
  --good: #2ecc71;
  --good-soft: rgba(46, 204, 113, 0.18);
  --watching: #2ecc71;
  --watching-soft: rgba(46, 204, 113, 0.18);
  --ghost-bg: rgba(26, 32, 48, 0.5);
  --tab-hover: rgba(106, 163, 255, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(106, 163, 255, 0.22), rgba(46, 204, 113, 0.12));
  --tab-active-border: rgba(106, 163, 255, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(58, 69, 88, 0.5);
  --hero-bg: linear-gradient(135deg, #161c28 0%, #12161e 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="watchnext"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(106, 163, 255, 0.18), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(46, 204, 113, 0.08), transparent),
    linear-gradient(180deg, #0c1018 0%, #0a0c10 100%);
}

/* WatchNext brand buttons: gold → green (not gold → blue via accent-strong) */
[data-theme="watchnext"] button.primary,
[data-theme="watchnext"] .sync-btn,
[data-theme="watchnext"] .premium-cta-btn,
[data-theme="watchnext"] .import-cta-btn,
[data-theme="watchnext"] .import-file-label,
[data-theme="watchnext"] .dns-optout-allow {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

[data-theme="watchnext"] button.primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent-strong));
}

[data-theme="watchnext"] .mobile-app-support-btn:hover:not(:disabled),
[data-theme="watchnext"] .mobile-app-support-btn:focus-visible {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

/* ---- 2. Ocean (cyan + blue) ---- */

:root[data-theme="ocean"] {
  --bg: #04080c;
  --bg-elev: #0f1a24;
  --bg-elev-2: #152535;
  --border: #2a5a6e;
  --border-strong: #3a7890;
  --border-subtle: rgba(42, 90, 110, 0.45);
  --text: #e8f4fa;
  --text-muted: #8ec4d8;
  --text-dim: #5a8ca0;
  --accent: #22d3ee;
  --accent-dark: #0891b2;
  --accent-strong: #60a5fa;
  --accent-soft: rgba(34, 211, 238, 0.2);
  --accent-glow: rgba(34, 211, 238, 0.15);
  --accent-text: #042028;
  --accent-text-hover: #021018;
  --accent-hover: #67e8f9;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.2);
  --ghost-bg: rgba(15, 30, 45, 0.5);
  --tab-hover: rgba(34, 211, 238, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(96, 165, 250, 0.14));
  --tab-active-border: rgba(34, 211, 238, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(42, 90, 110, 0.5);
  --hero-bg: linear-gradient(135deg, #122030 0%, #0f1a24 100%);
  --shadow: 0 12px 40px rgba(0, 20, 40, 0.4);
}

[data-theme="ocean"] body {
  background:
    radial-gradient(circle at 20% 0%, rgba(34, 211, 238, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(96, 165, 250, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, #061018 0%, #04080c 100%);
}

/* ---- 3. Crimson (red + amber) ---- */

:root[data-theme="crimson"] {
  --bg: #0a0406;
  --bg-elev: #241014;
  --bg-elev-2: #321820;
  --border: #6e3040;
  --border-strong: #904858;
  --border-subtle: rgba(110, 48, 64, 0.45);
  --text: #faf0f2;
  --text-muted: #d4a0a8;
  --text-dim: #a07078;
  --accent: #f43f5e;
  --accent-dark: #e11d48;
  --accent-strong: #fb923c;
  --accent-soft: rgba(244, 63, 94, 0.2);
  --accent-glow: rgba(244, 63, 94, 0.15);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #fb7185;
  --good: #fb923c;
  --good-soft: rgba(251, 146, 60, 0.2);
  --ghost-bg: rgba(50, 20, 28, 0.5);
  --tab-hover: rgba(244, 63, 94, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.28), rgba(251, 146, 60, 0.14));
  --tab-active-border: rgba(244, 63, 94, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(110, 48, 64, 0.5);
  --hero-bg: linear-gradient(135deg, #301018 0%, #241014 100%);
  --shadow: 0 12px 40px rgba(40, 0, 10, 0.4);
}

[data-theme="crimson"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(244, 63, 94, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(251, 146, 60, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #100608 0%, #0a0406 100%);
}

/* ---- 4. Violet (purple + magenta) ---- */

:root[data-theme="violet"] {
  --bg: #06040a;
  --bg-elev: #1a1228;
  --bg-elev-2: #241a38;
  --border: #5a4080;
  --border-strong: #7858a8;
  --border-subtle: rgba(90, 64, 128, 0.45);
  --text: #f4f0fa;
  --text-muted: #c4a8e0;
  --text-dim: #9078b0;
  --accent: #a855f7;
  --accent-dark: #9333ea;
  --accent-strong: #ec4899;
  --accent-soft: rgba(168, 85, 247, 0.22);
  --accent-glow: rgba(168, 85, 247, 0.15);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #c084fc;
  --good: #ec4899;
  --good-soft: rgba(236, 72, 153, 0.2);
  --ghost-bg: rgba(36, 26, 56, 0.5);
  --tab-hover: rgba(168, 85, 247, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(236, 72, 153, 0.14));
  --tab-active-border: rgba(168, 85, 247, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(90, 64, 128, 0.5);
  --hero-bg: linear-gradient(135deg, #221830 0%, #1a1228 100%);
  --shadow: 0 12px 40px rgba(20, 0, 40, 0.4);
}

[data-theme="violet"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(168, 85, 247, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(236, 72, 153, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a0610 0%, #06040a 100%);
}

/* ---- 5. Forest (emerald + amber) ---- */

:root[data-theme="forest"] {
  --bg: #040806;
  --bg-elev: #122018;
  --bg-elev-2: #1a3024;
  --border: #3a6848;
  --border-strong: #508860;
  --border-subtle: rgba(58, 104, 72, 0.45);
  --text: #eef8f0;
  --text-muted: #98c8a0;
  --text-dim: #689878;
  --accent: #22c55e;
  --accent-dark: #16a34a;
  --accent-strong: #fbbf24;
  --accent-soft: rgba(34, 197, 94, 0.2);
  --accent-glow: rgba(34, 197, 94, 0.15);
  --accent-text: #042810;
  --accent-text-hover: #021808;
  --accent-hover: #4ade80;
  --good: #fbbf24;
  --good-soft: rgba(251, 191, 36, 0.2);
  --ghost-bg: rgba(26, 48, 36, 0.5);
  --tab-hover: rgba(34, 197, 94, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(251, 191, 36, 0.14));
  --tab-active-border: rgba(34, 197, 94, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(58, 104, 72, 0.5);
  --hero-bg: linear-gradient(135deg, #183020 0%, #122018 100%);
  --shadow: 0 12px 40px rgba(0, 20, 10, 0.4);
}

[data-theme="forest"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(34, 197, 94, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(251, 191, 36, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #081008 0%, #040806 100%);
}

/* ---- 6. Slate (steel blue + silver) ---- */

:root[data-theme="slate"] {
  --bg: #080a10;
  --bg-elev: #161c28;
  --bg-elev-2: #1e2838;
  --border: #3a4860;
  --border-strong: #506080;
  --border-subtle: rgba(58, 72, 96, 0.45);
  --text: #eef2f8;
  --text-muted: #98a8c0;
  --text-dim: #687898;
  --accent: #6aa3ff;
  --accent-dark: #4d8bff;
  --accent-strong: #94a3b8;
  --accent-soft: rgba(106, 163, 255, 0.18);
  --accent-glow: rgba(106, 163, 255, 0.12);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #93c5fd;
  --good: #38d39f;
  --good-soft: rgba(56, 211, 159, 0.18);
  --ghost-bg: rgba(30, 40, 56, 0.5);
  --tab-hover: rgba(106, 163, 255, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(106, 163, 255, 0.24), rgba(148, 163, 184, 0.12));
  --tab-active-border: rgba(106, 163, 255, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(58, 72, 96, 0.5);
  --hero-bg: linear-gradient(135deg, #1a2230 0%, #161c28 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="slate"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(106, 163, 255, 0.1) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(148, 163, 184, 0.06) 0%, transparent 40%),
    linear-gradient(180deg, #0c1018 0%, #080a10 100%);
}

/* ---- 7. Paper (light blue-gray) ---- */

:root[data-theme="paper"] {
  --bg: #eef1f6;
  --bg-elev: #ffffff;
  --bg-elev-2: #f4f6fa;
  --border: #d4dbe6;
  --border-strong: #b8c4d4;
  --border-subtle: rgba(180, 196, 212, 0.55);
  --text: #152030;
  --text-muted: #4a5870;
  --text-dim: #687890;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-strong: #0ea5e9;
  --accent-soft: rgba(37, 99, 235, 0.14);
  --accent-glow: rgba(37, 99, 235, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #3b82f6;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(244, 246, 250, 0.85);
  --tab-hover: rgba(37, 99, 235, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.08));
  --tab-active-border: rgba(37, 99, 235, 0.35);
  --tab-active-inset: rgba(255, 255, 255, 0.8);
  --track-bg: rgba(180, 196, 212, 0.45);
  --hero-bg: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  --shadow: 0 8px 28px rgba(21, 32, 48, 0.08);
}

[data-theme="paper"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.06) 0%, transparent 38%),
    linear-gradient(180deg, #f4f6fa 0%, #eef1f6 100%);
}

/* ---- 8. Cream (warm ivory) ---- */

:root[data-theme="cream"] {
  --bg: #f6f0e6;
  --bg-elev: #fffcf6;
  --bg-elev-2: #faf4ea;
  --border: #e0d4c0;
  --border-strong: #c8b89c;
  --border-subtle: rgba(200, 184, 156, 0.55);
  --text: #2a2218;
  --text-muted: #6a5c48;
  --text-dim: #8a7860;
  --accent: #c45c26;
  --accent-dark: #a84818;
  --accent-strong: #0d9488;
  --accent-soft: rgba(196, 92, 38, 0.14);
  --accent-glow: rgba(196, 92, 38, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #d97038;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(250, 244, 234, 0.9);
  --tab-hover: rgba(196, 92, 38, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(196, 92, 38, 0.14), rgba(13, 148, 136, 0.08));
  --tab-active-border: rgba(196, 92, 38, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(200, 184, 156, 0.4);
  --hero-bg: linear-gradient(135deg, #fffaf2 0%, #fffcf6 100%);
  --shadow: 0 8px 28px rgba(42, 34, 24, 0.08);
}

[data-theme="cream"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(196, 92, 38, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 85% 10%, rgba(13, 148, 136, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #faf4ea 0%, #f6f0e6 100%);
}

/* ---- 9. Mint (soft green) ---- */

:root[data-theme="mint"] {
  --bg: #e8f5ef;
  --bg-elev: #f8fdfb;
  --bg-elev-2: #eef8f2;
  --border: #b8dcc8;
  --border-strong: #94c4aa;
  --border-subtle: rgba(148, 196, 170, 0.5);
  --text: #142820;
  --text-muted: #3a6850;
  --text-dim: #588870;
  --accent: #059669;
  --accent-dark: #047857;
  --accent-strong: #f97316;
  --accent-soft: rgba(5, 150, 105, 0.14);
  --accent-glow: rgba(5, 150, 105, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #10b981;
  --good: #f97316;
  --good-soft: rgba(249, 115, 22, 0.12);
  --ghost-bg: rgba(238, 248, 242, 0.9);
  --tab-hover: rgba(5, 150, 105, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(5, 150, 105, 0.14), rgba(249, 115, 22, 0.08));
  --tab-active-border: rgba(5, 150, 105, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(148, 196, 170, 0.4);
  --hero-bg: linear-gradient(135deg, #f4fbf7 0%, #f8fdfb 100%);
  --shadow: 0 8px 28px rgba(20, 40, 32, 0.08);
}

[data-theme="mint"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(5, 150, 105, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(249, 115, 22, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #eef8f2 0%, #e8f5ef 100%);
}

/* ---- 10. Lavender (soft purple) ---- */

:root[data-theme="lavender"] {
  --bg: #f0ecf8;
  --bg-elev: #faf8ff;
  --bg-elev-2: #f4f0fc;
  --border: #d0c4e8;
  --border-strong: #b4a0d8;
  --border-subtle: rgba(180, 160, 216, 0.5);
  --text: #221830;
  --text-muted: #5a4878;
  --text-dim: #786898;
  --accent: #7c3aed;
  --accent-dark: #6d28d9;
  --accent-strong: #db2777;
  --accent-soft: rgba(124, 58, 237, 0.14);
  --accent-glow: rgba(124, 58, 237, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #8b5cf6;
  --good: #db2777;
  --good-soft: rgba(219, 39, 119, 0.12);
  --ghost-bg: rgba(244, 240, 252, 0.9);
  --tab-hover: rgba(124, 58, 237, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(219, 39, 119, 0.08));
  --tab-active-border: rgba(124, 58, 237, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(180, 160, 216, 0.4);
  --hero-bg: linear-gradient(135deg, #f8f4ff 0%, #faf8ff 100%);
  --shadow: 0 8px 28px rgba(34, 24, 48, 0.08);
}

[data-theme="lavender"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(124, 58, 237, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 85% 10%, rgba(219, 39, 119, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #f4f0fc 0%, #f0ecf8 100%);
}

/* ---- 11. Sunrise (peach & coral) ---- */

:root[data-theme="sunrise"] {
  --bg: #fff0e8;
  --bg-elev: #fffaf6;
  --bg-elev-2: #fff4ec;
  --border: #f0c8b0;
  --border-strong: #e0a888;
  --border-subtle: rgba(224, 168, 136, 0.5);
  --text: #301810;
  --text-muted: #785848;
  --text-dim: #987060;
  --accent: #ea580c;
  --accent-dark: #c2410c;
  --accent-strong: #e11d48;
  --accent-soft: rgba(234, 88, 12, 0.14);
  --accent-glow: rgba(234, 88, 12, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #f97316;
  --good: #e11d48;
  --good-soft: rgba(225, 29, 72, 0.12);
  --ghost-bg: rgba(255, 244, 236, 0.9);
  --tab-hover: rgba(234, 88, 12, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(234, 88, 12, 0.14), rgba(225, 29, 72, 0.08));
  --tab-active-border: rgba(234, 88, 12, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(224, 168, 136, 0.4);
  --hero-bg: linear-gradient(135deg, #fff8f2 0%, #fffaf6 100%);
  --shadow: 0 8px 28px rgba(48, 24, 16, 0.08);
}

[data-theme="sunrise"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(234, 88, 12, 0.12) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(225, 29, 72, 0.08) 0%, transparent 38%),
    linear-gradient(180deg, #fff4ec 0%, #fff0e8 100%);
}


/* ---- midnight ---- */

:root[data-theme="midnight"] {
  --bg: #04060c;
  --bg-elev: #121828;
  --bg-elev-2: #1a2238;
  --border: #404878;
  --border-strong: #585898;
  --border-subtle: rgba(64, 72, 120, 0.45);
  --text: #e8eaf8;
  --text-muted: #9898c8;
  --text-dim: #686898;
  --accent: #6366f1;
  --accent-dark: #6366f1;
  --accent-strong: #818cf8;
  --accent-soft: rgba(99, 102, 241, 0.2);
  --accent-glow: rgba(99, 102, 241, 0.15);
  --accent-text: #042810;
  --accent-text-hover: #021808;
  --accent-hover: #818cf8;
  --good: #4ade80;
  --good-soft: rgba(74, 222, 128, 0.2);
  --ghost-bg: rgba(64, 72, 120, 0.35);
  --tab-hover: rgba(99, 102, 241, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(129, 140, 248, 0.14));
  --tab-active-border: rgba(99, 102, 241, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(64, 72, 120, 0.5);
  --hero-bg: linear-gradient(135deg, #141830 0%, #121828 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="midnight"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(129, 140, 248, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a0818 0%, #04060c 100%);
}

/* ---- ember ---- */

:root[data-theme="ember"] {
  --bg: #0a0604;
  --bg-elev: #241810;
  --bg-elev-2: #322418;
  --border: #684830;
  --border-strong: #886048;
  --border-subtle: rgba(104, 72, 48, 0.45);
  --text: #faf0e8;
  --text-muted: #d4a888;
  --text-dim: #a88068;
  --accent: #f97316;
  --accent-dark: #f97316;
  --accent-strong: #fb923c;
  --accent-soft: rgba(249, 115, 22, 0.2);
  --accent-glow: rgba(249, 115, 22, 0.15);
  --accent-text: #1a0800;
  --accent-text-hover: #fff;
  --accent-hover: #fb923c;
  --good: #fbbf24;
  --good-soft: rgba(251, 191, 36, 0.2);
  --ghost-bg: rgba(104, 72, 48, 0.35);
  --tab-hover: rgba(249, 115, 22, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(251, 146, 60, 0.14));
  --tab-active-border: rgba(249, 115, 22, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(104, 72, 48, 0.5);
  --hero-bg: linear-gradient(135deg, #301810 0%, #241810 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="ember"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(249, 115, 22, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(251, 146, 60, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #100804 0%, #0a0604 100%);
}

/* ---- aurora ---- */

:root[data-theme="aurora"] {
  --bg: #040808;
  --bg-elev: #101820;
  --bg-elev-2: #182830;
  --border: #306058;
  --border-strong: #488878;
  --border-subtle: rgba(48, 96, 88, 0.45);
  --text: #e8f8f4;
  --text-muted: #88c8b8;
  --text-dim: #589888;
  --accent: #2dd4bf;
  --accent-dark: #2dd4bf;
  --accent-strong: #a78bfa;
  --accent-soft: rgba(45, 212, 191, 0.2);
  --accent-glow: rgba(45, 212, 191, 0.15);
  --accent-text: #042018;
  --accent-text-hover: #021008;
  --accent-hover: #a78bfa;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.2);
  --ghost-bg: rgba(48, 96, 88, 0.35);
  --tab-hover: rgba(45, 212, 191, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(45, 212, 191, 0.28), rgba(167, 139, 250, 0.14));
  --tab-active-border: rgba(45, 212, 191, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(48, 96, 88, 0.5);
  --hero-bg: linear-gradient(135deg, #142028 0%, #101820 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="aurora"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(45, 212, 191, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(167, 139, 250, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #081018 0%, #040808 100%);
}

/* ---- copper ---- */

:root[data-theme="copper"] {
  --bg: #080604;
  --bg-elev: #201810;
  --bg-elev-2: #2c2218;
  --border: #685038;
  --border-strong: #886848;
  --border-subtle: rgba(104, 80, 56, 0.45);
  --text: #faf4ec;
  --text-muted: #d4b898;
  --text-dim: #a89070;
  --accent: #d97706;
  --accent-dark: #d97706;
  --accent-strong: #ea580c;
  --accent-soft: rgba(217, 119, 6, 0.2);
  --accent-glow: rgba(217, 119, 6, 0.15);
  --accent-text: #1a1000;
  --accent-text-hover: #fff;
  --accent-hover: #ea580c;
  --good: #f59e0b;
  --good-soft: rgba(245, 158, 11, 0.2);
  --ghost-bg: rgba(104, 80, 56, 0.35);
  --tab-hover: rgba(217, 119, 6, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.28), rgba(234, 88, 12, 0.14));
  --tab-active-border: rgba(217, 119, 6, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(104, 80, 56, 0.5);
  --hero-bg: linear-gradient(135deg, #281810 0%, #201810 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="copper"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(217, 119, 6, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(234, 88, 12, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #100804 0%, #080604 100%);
}

/* ---- graphite ---- */

:root[data-theme="graphite"] {
  --bg: #0a0c10;
  --bg-elev: #181c24;
  --bg-elev-2: #242830;
  --border: #484e58;
  --border-strong: #606878;
  --border-subtle: rgba(72, 78, 88, 0.45);
  --text: #eef0f4;
  --text-muted: #989ca8;
  --text-dim: #686e78;
  --accent: #64748b;
  --accent-dark: #64748b;
  --accent-strong: #94a3b8;
  --accent-soft: rgba(100, 116, 139, 0.2);
  --accent-glow: rgba(100, 116, 139, 0.15);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #94a3b8;
  --good: #38bdf8;
  --good-soft: rgba(56, 189, 248, 0.2);
  --watching: #34d399;
  --watching-soft: rgba(52, 211, 153, 0.2);
  --ghost-bg: rgba(72, 78, 88, 0.35);
  --tab-hover: rgba(100, 116, 139, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(100, 116, 139, 0.28), rgba(148, 163, 184, 0.14));
  --tab-active-border: rgba(100, 116, 139, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(72, 78, 88, 0.5);
  --hero-bg: linear-gradient(135deg, #202428 0%, #181c24 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="graphite"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(100, 116, 139, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(148, 163, 184, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #101418 0%, #0a0c10 100%);
}

/* ---- neon ---- */

:root[data-theme="neon"] {
  --bg: #06040a;
  --bg-elev: #180818;
  --bg-elev-2: #241030;
  --border: #603060;
  --border-strong: #804880;
  --border-subtle: rgba(96, 48, 96, 0.45);
  --text: #fce8f4;
  --text-muted: #d898c8;
  --text-dim: #a86898;
  --accent: #f472b6;
  --accent-dark: #f472b6;
  --accent-strong: #22d3ee;
  --accent-soft: rgba(244, 114, 182, 0.2);
  --accent-glow: rgba(244, 114, 182, 0.15);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #22d3ee;
  --good: #a3e635;
  --good-soft: rgba(163, 230, 53, 0.2);
  --ghost-bg: rgba(96, 48, 96, 0.35);
  --tab-hover: rgba(244, 114, 182, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(244, 114, 182, 0.28), rgba(34, 211, 238, 0.14));
  --tab-active-border: rgba(244, 114, 182, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(96, 48, 96, 0.5);
  --hero-bg: linear-gradient(135deg, #201028 0%, #180818 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="neon"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(244, 114, 182, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(34, 211, 238, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a0408 0%, #06040a 100%);
}

/* ---- moss ---- */

:root[data-theme="moss"] {
  --bg: #060804;
  --bg-elev: #181810;
  --bg-elev-2: #242818;
  --border: #505838;
  --border-strong: #687048;
  --border-subtle: rgba(80, 88, 56, 0.45);
  --text: #f0f4e8;
  --text-muted: #b8c898;
  --text-dim: #889868;
  --accent: #84cc16;
  --accent-dark: #84cc16;
  --accent-strong: #a3e635;
  --accent-soft: rgba(132, 204, 22, 0.2);
  --accent-glow: rgba(132, 204, 22, 0.15);
  --accent-text: #142004;
  --accent-text-hover: #fff;
  --accent-hover: #a3e635;
  --good: #eab308;
  --good-soft: rgba(234, 179, 8, 0.2);
  --ghost-bg: rgba(80, 88, 56, 0.35);
  --tab-hover: rgba(132, 204, 22, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(132, 204, 22, 0.28), rgba(163, 230, 53, 0.14));
  --tab-active-border: rgba(132, 204, 22, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(80, 88, 56, 0.5);
  --hero-bg: linear-gradient(135deg, #202818 0%, #181810 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="moss"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(132, 204, 22, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(163, 230, 53, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a0c04 0%, #060804 100%);
}

/* ---- wine ---- */

:root[data-theme="wine"] {
  --bg: #0a0406;
  --bg-elev: #241018;
  --bg-elev-2: #301820;
  --border: #683040;
  --border-strong: #884858;
  --border-subtle: rgba(104, 48, 64, 0.45);
  --text: #faf0f2;
  --text-muted: #d4a0a8;
  --text-dim: #a87080;
  --accent: #be123c;
  --accent-dark: #be123c;
  --accent-strong: #fb7185;
  --accent-soft: rgba(190, 18, 60, 0.2);
  --accent-glow: rgba(190, 18, 60, 0.15);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #fb7185;
  --good: #fda4af;
  --good-soft: rgba(253, 164, 175, 0.2);
  --ghost-bg: rgba(104, 48, 64, 0.35);
  --tab-hover: rgba(190, 18, 60, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(190, 18, 60, 0.28), rgba(251, 113, 133, 0.14));
  --tab-active-border: rgba(190, 18, 60, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(104, 48, 64, 0.5);
  --hero-bg: linear-gradient(135deg, #281018 0%, #241018 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="wine"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(190, 18, 60, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(251, 113, 133, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #100608 0%, #0a0406 100%);
}

/* ---- arctic ---- */

:root[data-theme="arctic"] {
  --bg: #04080c;
  --bg-elev: #101820;
  --bg-elev-2: #182430;
  --border: #386080;
  --border-strong: #508098;
  --border-subtle: rgba(56, 96, 128, 0.45);
  --text: #e8f4fa;
  --text-muted: #98c0d8;
  --text-dim: #6890a8;
  --accent: #38bdf8;
  --accent-dark: #38bdf8;
  --accent-strong: #7dd3fc;
  --accent-soft: rgba(56, 189, 248, 0.2);
  --accent-glow: rgba(56, 189, 248, 0.15);
  --accent-text: #042028;
  --accent-text-hover: #021018;
  --accent-hover: #7dd3fc;
  --good: #67e8f9;
  --good-soft: rgba(103, 232, 249, 0.2);
  --ghost-bg: rgba(56, 96, 128, 0.35);
  --tab-hover: rgba(56, 189, 248, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(125, 211, 252, 0.14));
  --tab-active-border: rgba(56, 189, 248, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(56, 96, 128, 0.5);
  --hero-bg: linear-gradient(135deg, #142030 0%, #101820 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="arctic"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(125, 211, 252, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #081018 0%, #04080c 100%);
}

/* ---- obsidian ---- */

:root[data-theme="obsidian"] {
  --bg: #040404;
  --bg-elev: #141414;
  --bg-elev-2: #1c1c1c;
  --border: #484848;
  --border-strong: #606060;
  --border-subtle: rgba(72, 72, 72, 0.45);
  --text: #f4f4f4;
  --text-muted: #a8a8a8;
  --text-dim: #787878;
  --accent: #eab308;
  --accent-dark: #eab308;
  --accent-strong: #facc15;
  --accent-soft: rgba(234, 179, 8, 0.2);
  --accent-glow: rgba(234, 179, 8, 0.15);
  --accent-text: #1a1400;
  --accent-text-hover: #fff;
  --accent-hover: #facc15;
  --good: #fde047;
  --good-soft: rgba(253, 224, 71, 0.2);
  --ghost-bg: rgba(72, 72, 72, 0.35);
  --tab-hover: rgba(234, 179, 8, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(250, 204, 21, 0.14));
  --tab-active-border: rgba(234, 179, 8, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(72, 72, 72, 0.5);
  --hero-bg: linear-gradient(135deg, #181818 0%, #141414 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="obsidian"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(234, 179, 8, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(250, 204, 21, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #080808 0%, #040404 100%);
}

/* ---- snow ---- */

:root[data-theme="snow"] {
  --bg: #f4f8fc;
  --bg-elev: #ffffff;
  --bg-elev-2: #f0f4f8;
  --border: #c8d8e8;
  --border-strong: #a8c0d8;
  --border-subtle: rgba(200, 216, 232, 0.55);
  --text: #102030;
  --text-muted: #486080;
  --text-dim: #6888a0;
  --accent: #0284c7;
  --accent-dark: #0284c7;
  --accent-strong: #0ea5e9;
  --accent-soft: rgba(2, 132, 199, 0.14);
  --accent-glow: rgba(2, 132, 199, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #0ea5e9;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(200, 216, 232, 0.35);
  --tab-hover: rgba(2, 132, 199, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.14), rgba(14, 165, 233, 0.08));
  --tab-active-border: rgba(2, 132, 199, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(200, 216, 232, 0.4);
  --hero-bg: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="snow"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(2, 132, 199, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #eef4fa 0%, #f4f8fc 100%);
}

/* ---- sand ---- */

:root[data-theme="sand"] {
  --bg: #f4ede0;
  --bg-elev: #faf6ee;
  --bg-elev-2: #f0e8d8;
  --border: #d8c8a8;
  --border-strong: #c0a888;
  --border-subtle: rgba(216, 200, 168, 0.55);
  --text: #302818;
  --text-muted: #786848;
  --text-dim: #988868;
  --accent: #b45309;
  --accent-dark: #b45309;
  --accent-strong: #d97706;
  --accent-soft: rgba(180, 83, 9, 0.14);
  --accent-glow: rgba(180, 83, 9, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #d97706;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(216, 200, 168, 0.35);
  --tab-hover: rgba(180, 83, 9, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(180, 83, 9, 0.14), rgba(217, 119, 6, 0.08));
  --tab-active-border: rgba(180, 83, 9, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(216, 200, 168, 0.4);
  --hero-bg: linear-gradient(135deg, #fffaf2 0%, #faf6ee 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="sand"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(180, 83, 9, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(217, 119, 6, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #f0e8d8 0%, #f4ede0 100%);
}

/* ---- blush ---- */

:root[data-theme="blush"] {
  --bg: #fdf2f8;
  --bg-elev: #fffafc;
  --bg-elev-2: #fce8f0;
  --border: #f0c0d0;
  --border-strong: #e0a0b8;
  --border-subtle: rgba(240, 192, 208, 0.55);
  --text: #301020;
  --text-muted: #885868;
  --text-dim: #a87888;
  --accent: #db2777;
  --accent-dark: #db2777;
  --accent-strong: #ec4899;
  --accent-soft: rgba(219, 39, 119, 0.14);
  --accent-glow: rgba(219, 39, 119, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #ec4899;
  --good: #be185d;
  --good-soft: rgba(190, 24, 93, 0.12);
  --ghost-bg: rgba(240, 192, 208, 0.35);
  --tab-hover: rgba(219, 39, 119, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(219, 39, 119, 0.14), rgba(236, 72, 153, 0.08));
  --tab-active-border: rgba(219, 39, 119, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(240, 192, 208, 0.4);
  --hero-bg: linear-gradient(135deg, #fff4f8 0%, #fffafc 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="blush"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(219, 39, 119, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(236, 72, 153, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #fce8f0 0%, #fdf2f8 100%);
}

/* ---- sky ---- */

:root[data-theme="sky"] {
  --bg: #e8f4fc;
  --bg-elev: #f8fcff;
  --bg-elev-2: #eef6fc;
  --border: #b8d8f0;
  --border-strong: #98c0e0;
  --border-subtle: rgba(184, 216, 240, 0.55);
  --text: #102838;
  --text-muted: #487898;
  --text-dim: #6898b0;
  --accent: #0284c7;
  --accent-dark: #0284c7;
  --accent-strong: #38bdf8;
  --accent-soft: rgba(2, 132, 199, 0.14);
  --accent-glow: rgba(2, 132, 199, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #38bdf8;
  --good: #0891b2;
  --good-soft: rgba(8, 145, 178, 0.12);
  --ghost-bg: rgba(184, 216, 240, 0.35);
  --tab-hover: rgba(2, 132, 199, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.14), rgba(56, 189, 248, 0.08));
  --tab-active-border: rgba(2, 132, 199, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(184, 216, 240, 0.4);
  --hero-bg: linear-gradient(135deg, #f4faff 0%, #f8fcff 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="sky"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(2, 132, 199, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(56, 189, 248, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #eef6fc 0%, #e8f4fc 100%);
}

/* ---- honey ---- */

:root[data-theme="honey"] {
  --bg: #faf6e8;
  --bg-elev: #fffdf4;
  --bg-elev-2: #f8f0d8;
  --border: #e8d0a0;
  --border-strong: #d0b878;
  --border-subtle: rgba(232, 208, 160, 0.55);
  --text: #302810;
  --text-muted: #887848;
  --text-dim: #a89868;
  --accent: #ca8a04;
  --accent-dark: #ca8a04;
  --accent-strong: #eab308;
  --accent-soft: rgba(202, 138, 4, 0.14);
  --accent-glow: rgba(202, 138, 4, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #eab308;
  --good: #ea580c;
  --good-soft: rgba(234, 88, 12, 0.12);
  --ghost-bg: rgba(232, 208, 160, 0.35);
  --tab-hover: rgba(202, 138, 4, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(202, 138, 4, 0.14), rgba(234, 179, 8, 0.08));
  --tab-active-border: rgba(202, 138, 4, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(232, 208, 160, 0.4);
  --hero-bg: linear-gradient(135deg, #fffaf0 0%, #fffdf4 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="honey"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(202, 138, 4, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(234, 179, 8, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #f8f0d8 0%, #faf6e8 100%);
}

/* ---- sage ---- */

:root[data-theme="sage"] {
  --bg: #eef4e8;
  --bg-elev: #f8fbf4;
  --bg-elev-2: #e8f0dc;
  --border: #c0d4a8;
  --border-strong: #a0b888;
  --border-subtle: rgba(192, 212, 168, 0.55);
  --text: #182810;
  --text-muted: #486838;
  --text-dim: #688858;
  --accent: #4d7c0f;
  --accent-dark: #4d7c0f;
  --accent-strong: #65a30d;
  --accent-soft: rgba(77, 124, 15, 0.14);
  --accent-glow: rgba(77, 124, 15, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #65a30d;
  --good: #ca8a04;
  --good-soft: rgba(202, 138, 4, 0.12);
  --ghost-bg: rgba(192, 212, 168, 0.35);
  --tab-hover: rgba(77, 124, 15, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(77, 124, 15, 0.14), rgba(101, 163, 13, 0.08));
  --tab-active-border: rgba(77, 124, 15, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(192, 212, 168, 0.4);
  --hero-bg: linear-gradient(135deg, #f4f8ee 0%, #f8fbf4 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="sage"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(77, 124, 15, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(101, 163, 13, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #e8f0dc 0%, #eef4e8 100%);
}

/* ---- lilac ---- */

:root[data-theme="lilac"] {
  --bg: #f4f0fc;
  --bg-elev: #faf8ff;
  --bg-elev-2: #eee8f8;
  --border: #d0c0e8;
  --border-strong: #b4a0d0;
  --border-subtle: rgba(208, 192, 232, 0.55);
  --text: #281840;
  --text-muted: #685888;
  --text-dim: #8878a0;
  --accent: #9333ea;
  --accent-dark: #9333ea;
  --accent-strong: #c084fc;
  --accent-soft: rgba(147, 51, 234, 0.14);
  --accent-glow: rgba(147, 51, 234, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #c084fc;
  --good: #db2777;
  --good-soft: rgba(219, 39, 119, 0.12);
  --ghost-bg: rgba(208, 192, 232, 0.35);
  --tab-hover: rgba(147, 51, 234, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(147, 51, 234, 0.14), rgba(192, 132, 252, 0.08));
  --tab-active-border: rgba(147, 51, 234, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(208, 192, 232, 0.4);
  --hero-bg: linear-gradient(135deg, #f8f4ff 0%, #faf8ff 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="lilac"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(147, 51, 234, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(192, 132, 252, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #eee8f8 0%, #f4f0fc 100%);
}

/* ---- coral ---- */

:root[data-theme="coral"] {
  --bg: #fff0f0;
  --bg-elev: #fffafa;
  --bg-elev-2: #ffe8e8;
  --border: #f0c0c0;
  --border-strong: #e0a0a0;
  --border-subtle: rgba(240, 192, 192, 0.55);
  --text: #301018;
  --text-muted: #885858;
  --text-dim: #a87878;
  --accent: #f43f5e;
  --accent-dark: #f43f5e;
  --accent-strong: #fb7185;
  --accent-soft: rgba(244, 63, 94, 0.14);
  --accent-glow: rgba(244, 63, 94, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #fb7185;
  --good: #ea580c;
  --good-soft: rgba(234, 88, 12, 0.12);
  --ghost-bg: rgba(240, 192, 192, 0.35);
  --tab-hover: rgba(244, 63, 94, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.14), rgba(251, 113, 133, 0.08));
  --tab-active-border: rgba(244, 63, 94, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(240, 192, 192, 0.4);
  --hero-bg: linear-gradient(135deg, #fff6f6 0%, #fffafa 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="coral"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(244, 63, 94, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(251, 113, 133, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #ffe8e8 0%, #fff0f0 100%);
}

/* ---- linen ---- */

:root[data-theme="linen"] {
  --bg: #f5f0ea;
  --bg-elev: #faf8f4;
  --bg-elev-2: #f0ebe4;
  --border: #d8cfc4;
  --border-strong: #c0b4a8;
  --border-subtle: rgba(216, 207, 196, 0.55);
  --text: #292524;
  --text-muted: #686058;
  --text-dim: #888078;
  --accent: #78716c;
  --accent-dark: #78716c;
  --accent-strong: #a8a29e;
  --accent-soft: rgba(120, 113, 108, 0.14);
  --accent-glow: rgba(120, 113, 108, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #a8a29e;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(216, 207, 196, 0.35);
  --tab-hover: rgba(120, 113, 108, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(120, 113, 108, 0.14), rgba(168, 162, 158, 0.08));
  --tab-active-border: rgba(120, 113, 108, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(216, 207, 196, 0.4);
  --hero-bg: linear-gradient(135deg, #faf6f0 0%, #faf8f4 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="linen"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(120, 113, 108, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(168, 162, 158, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #f0ebe4 0%, #f5f0ea 100%);
}

/* ---- frost ---- */

:root[data-theme="frost"] {
  --bg: #eef2f6;
  --bg-elev: #f8fafc;
  --bg-elev-2: #e8eef4;
  --border: #c8d4e0;
  --border-strong: #a8b8c8;
  --border-subtle: rgba(200, 212, 224, 0.55);
  --text: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;
  --accent: #475569;
  --accent-dark: #475569;
  --accent-strong: #64748b;
  --accent-soft: rgba(71, 85, 105, 0.14);
  --accent-glow: rgba(71, 85, 105, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #64748b;
  --good: #0284c7;
  --good-soft: rgba(2, 132, 199, 0.12);
  --ghost-bg: rgba(200, 212, 224, 0.35);
  --tab-hover: rgba(71, 85, 105, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(71, 85, 105, 0.14), rgba(100, 116, 139, 0.08));
  --tab-active-border: rgba(71, 85, 105, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(200, 212, 224, 0.4);
  --hero-bg: linear-gradient(135deg, #f4f8fc 0%, #f8fafc 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="frost"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(71, 85, 105, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(100, 116, 139, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #e8eef4 0%, #eef2f6 100%);
}

/* ---- noir (cinema black + red) ---- */

:root[data-theme="noir"] {
  --bg: #0c0a0a;
  --bg-elev: #181414;
  --bg-elev-2: #221c1c;
  --border: #4a3838;
  --border-strong: #645050;
  --border-subtle: rgba(74, 56, 56, 0.45);
  --text: #f5f0f0;
  --text-muted: #b8a0a0;
  --text-dim: #887070;
  --accent: #ef4444;
  --accent-dark: #dc2626;
  --accent-strong: #f87171;
  --accent-soft: rgba(239, 68, 68, 0.18);
  --accent-glow: rgba(239, 68, 68, 0.14);
  --accent-text: #1a0808;
  --accent-text-hover: #0a0404;
  --accent-hover: #f87171;
  --good: #22c55e;
  --good-soft: rgba(34, 197, 94, 0.18);
  --watching: #22c55e;
  --watching-soft: rgba(34, 197, 94, 0.18);
  --ghost-bg: rgba(34, 28, 28, 0.5);
  --tab-hover: rgba(239, 68, 68, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(248, 113, 113, 0.1));
  --tab-active-border: rgba(239, 68, 68, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(74, 56, 56, 0.5);
  --hero-bg: linear-gradient(135deg, #201818 0%, #181414 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

[data-theme="noir"] body {
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(239, 68, 68, 0.12), transparent),
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.03), transparent 40%),
    linear-gradient(180deg, #100c0c 0%, #0c0a0a 100%);
}

/* ---- plasma (violet + cyan) ---- */

:root[data-theme="plasma"] {
  --bg: #100818;
  --bg-elev: #1a1028;
  --bg-elev-2: #241838;
  --border: #503870;
  --border-strong: #684898;
  --border-subtle: rgba(80, 56, 112, 0.45);
  --text: #f4eef8;
  --text-muted: #c4a8e0;
  --text-dim: #9078b0;
  --accent: #a855f7;
  --accent-dark: #7c3aed;
  --accent-strong: #22d3ee;
  --accent-soft: rgba(168, 85, 247, 0.2);
  --accent-glow: rgba(34, 211, 238, 0.14);
  --accent-text: #140820;
  --accent-text-hover: #0a0410;
  --accent-hover: #c084fc;
  --good: #22d3ee;
  --good-soft: rgba(34, 211, 238, 0.18);
  --watching: #22d3ee;
  --watching-soft: rgba(34, 211, 238, 0.18);
  --ghost-bg: rgba(36, 24, 56, 0.5);
  --tab-hover: rgba(168, 85, 247, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.24), rgba(34, 211, 238, 0.12));
  --tab-active-border: rgba(168, 85, 247, 0.48);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(80, 56, 112, 0.5);
  --hero-bg: linear-gradient(135deg, #221430 0%, #1a1028 100%);
  --shadow: 0 12px 40px rgba(20, 0, 40, 0.45);
}

[data-theme="plasma"] body {
  background:
    radial-gradient(circle at 20% 0%, rgba(168, 85, 247, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(34, 211, 238, 0.1) 0%, transparent 42%),
    linear-gradient(180deg, #140c20 0%, #100818 100%);
}

/* ---- pebble (soft stone + teal) ---- */

:root[data-theme="pebble"] {
  --bg: #f4f5f2;
  --bg-elev: #fafbf8;
  --bg-elev-2: #eceee8;
  --border: #c8ccc4;
  --border-strong: #a8aea4;
  --border-subtle: rgba(200, 204, 196, 0.55);
  --text: #1a1f1c;
  --text-muted: #5a645c;
  --text-dim: #788078;
  --accent: #0d9488;
  --accent-dark: #0d9488;
  --accent-strong: #64748b;
  --accent-soft: rgba(13, 148, 136, 0.14);
  --accent-glow: rgba(13, 148, 136, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #14b8a6;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --watching: #059669;
  --watching-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(200, 204, 196, 0.35);
  --tab-hover: rgba(13, 148, 136, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(13, 148, 136, 0.14), rgba(100, 116, 139, 0.08));
  --tab-active-border: rgba(13, 148, 136, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(200, 204, 196, 0.4);
  --hero-bg: linear-gradient(135deg, #f8faf6 0%, #fafbf8 100%);
  --shadow: 0 8px 28px rgba(24, 32, 28, 0.08);
}

[data-theme="pebble"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(13, 148, 136, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(100, 116, 139, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #eef0ea 0%, #f4f5f2 100%);
}

/* ---- eclipse (void black + gold corona) ---- */

:root[data-theme="eclipse"] {
  --bg: #08070a;
  --bg-elev: #121018;
  --bg-elev-2: #1a1624;
  --border: #3a3450;
  --border-strong: #524868;
  --border-subtle: rgba(58, 52, 80, 0.45);
  --text: #f0ecf8;
  --text-muted: #a89cc0;
  --text-dim: #786890;
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --accent-strong: #fbbf24;
  --accent-soft: rgba(245, 158, 11, 0.18);
  --accent-glow: rgba(245, 158, 11, 0.14);
  --accent-text: #1a1004;
  --accent-text-hover: #0a0804;
  --accent-hover: #fbbf24;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.18);
  --watching: #34d399;
  --watching-soft: rgba(52, 211, 153, 0.18);
  --ghost-bg: rgba(26, 22, 36, 0.5);
  --tab-hover: rgba(245, 158, 11, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(251, 191, 36, 0.1));
  --tab-active-border: rgba(245, 158, 11, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(58, 52, 80, 0.5);
  --hero-bg: linear-gradient(135deg, #1e1828 0%, #121018 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

[data-theme="eclipse"] body {
  background:
    radial-gradient(ellipse 65% 40% at 50% -5%, rgba(245, 158, 11, 0.18), transparent),
    radial-gradient(circle at 15% 85%, rgba(88, 28, 135, 0.08), transparent 45%),
    linear-gradient(180deg, #0e0c14 0%, #08070a 100%);
}

/* ---- porcelain (warm white + navy) ---- */

:root[data-theme="porcelain"] {
  --bg: #f7f5f2;
  --bg-elev: #fffcfa;
  --bg-elev-2: #f0ece8;
  --border: #ddd4cc;
  --border-strong: #c4b8ae;
  --border-subtle: rgba(212, 200, 188, 0.55);
  --text: #1c1814;
  --text-muted: #5c544c;
  --text-dim: #7c746c;
  --accent: #1e3a5f;
  --accent-dark: #1e3a5f;
  --accent-strong: #2563eb;
  --accent-soft: rgba(30, 58, 95, 0.14);
  --accent-glow: rgba(30, 58, 95, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #2d4a73;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(240, 236, 232, 0.85);
  --tab-hover: rgba(30, 58, 95, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(30, 58, 95, 0.14), rgba(37, 99, 235, 0.08));
  --tab-active-border: rgba(30, 58, 95, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(212, 200, 188, 0.45);
  --hero-bg: linear-gradient(135deg, #faf8f6 0%, #fffcfa 100%);
  --shadow: 0 8px 28px rgba(28, 24, 20, 0.08);
}

[data-theme="porcelain"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(30, 58, 95, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(13, 148, 136, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #f0ece8 0%, #f7f5f2 100%);
}

/* ---- willow (spring yellow-green) ---- */

:root[data-theme="willow"] {
  --bg: #f0f6e4;
  --bg-elev: #f8fbf0;
  --bg-elev-2: #e8f0d8;
  --border: #c8d8a8;
  --border-strong: #a8c088;
  --border-subtle: rgba(200, 216, 168, 0.55);
  --text: #1a2410;
  --text-muted: #4a5838;
  --text-dim: #6a7858;
  --accent: #6b8e23;
  --accent-dark: #6b8e23;
  --accent-strong: #84a829;
  --accent-soft: rgba(107, 142, 35, 0.14);
  --accent-glow: rgba(107, 142, 35, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #7da02a;
  --good: #ca8a04;
  --good-soft: rgba(202, 138, 4, 0.12);
  --ghost-bg: rgba(232, 240, 216, 0.85);
  --tab-hover: rgba(107, 142, 35, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(107, 142, 35, 0.14), rgba(132, 168, 41, 0.08));
  --tab-active-border: rgba(107, 142, 35, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(200, 216, 168, 0.4);
  --hero-bg: linear-gradient(135deg, #f4f8ec 0%, #f8fbf0 100%);
  --shadow: 0 8px 28px rgba(26, 36, 16, 0.08);
}

[data-theme="willow"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(107, 142, 35, 0.12) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(202, 138, 4, 0.08) 0%, transparent 38%),
    linear-gradient(180deg, #e8f0d8 0%, #f0f6e4 100%);
}

/* ---- petal (cherry blossom pink) ---- */

:root[data-theme="petal"] {
  --bg: #fdf2f6;
  --bg-elev: #fffbfc;
  --bg-elev-2: #f8e8ee;
  --border: #e8c8d4;
  --border-strong: #d4a8b8;
  --border-subtle: rgba(232, 200, 212, 0.55);
  --text: #281418;
  --text-muted: #684858;
  --text-dim: #886878;
  --accent: #be185d;
  --accent-dark: #be185d;
  --accent-strong: #e879a9;
  --accent-soft: rgba(190, 24, 93, 0.14);
  --accent-glow: rgba(190, 24, 93, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #db2777;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(248, 232, 238, 0.85);
  --tab-hover: rgba(190, 24, 93, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(190, 24, 93, 0.14), rgba(232, 121, 169, 0.08));
  --tab-active-border: rgba(190, 24, 93, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(232, 200, 212, 0.4);
  --hero-bg: linear-gradient(135deg, #fff6f8 0%, #fffbfc 100%);
  --shadow: 0 8px 28px rgba(40, 20, 24, 0.08);
}

[data-theme="petal"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(190, 24, 93, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(232, 121, 169, 0.08) 0%, transparent 38%),
    linear-gradient(180deg, #f8e8ee 0%, #fdf2f6 100%);
}

/* ---- dune (desert sand + terracotta) ---- */

:root[data-theme="dune"] {
  --bg: #f0e4d4;
  --bg-elev: #faf4ea;
  --bg-elev-2: #e8dcc8;
  --border: #d4c0a4;
  --border-strong: #b8a080;
  --border-subtle: rgba(212, 192, 164, 0.55);
  --text: #2a2014;
  --text-muted: #6a5840;
  --text-dim: #8a7860;
  --accent: #c2410c;
  --accent-dark: #c2410c;
  --accent-strong: #ea580c;
  --accent-soft: rgba(194, 65, 12, 0.14);
  --accent-glow: rgba(194, 65, 12, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #ea580c;
  --good: #a16207;
  --good-soft: rgba(161, 98, 7, 0.12);
  --ghost-bg: rgba(232, 220, 200, 0.85);
  --tab-hover: rgba(194, 65, 12, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(194, 65, 12, 0.14), rgba(234, 88, 12, 0.08));
  --tab-active-border: rgba(194, 65, 12, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(212, 192, 164, 0.4);
  --hero-bg: linear-gradient(135deg, #faf0e4 0%, #faf4ea 100%);
  --shadow: 0 8px 28px rgba(42, 32, 20, 0.08);
}

[data-theme="dune"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(194, 65, 12, 0.12) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(161, 98, 7, 0.08) 0%, transparent 38%),
    linear-gradient(180deg, #e8dcc8 0%, #f0e4d4 100%);
}

/* ---- abyss (deep trench + bioluminescent teal) ---- */

:root[data-theme="abyss"] {
  --bg: #040810;
  --bg-elev: #0a1018;
  --bg-elev-2: #101820;
  --border: #1a3040;
  --border-strong: #284858;
  --border-subtle: rgba(26, 48, 64, 0.45);
  --text: #e8f4f8;
  --text-muted: #88b0c0;
  --text-dim: #588898;
  --accent: #06b6d4;
  --accent-dark: #0891b2;
  --accent-strong: #22d3ee;
  --accent-soft: rgba(6, 182, 212, 0.2);
  --accent-glow: rgba(6, 182, 212, 0.14);
  --accent-text: #041018;
  --accent-text-hover: #020810;
  --accent-hover: #22d3ee;
  --good: #2dd4bf;
  --good-soft: rgba(45, 212, 191, 0.18);
  --watching: #2dd4bf;
  --watching-soft: rgba(45, 212, 191, 0.18);
  --ghost-bg: rgba(16, 24, 32, 0.5);
  --tab-hover: rgba(6, 182, 212, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(6, 182, 212, 0.24), rgba(34, 211, 238, 0.12));
  --tab-active-border: rgba(6, 182, 212, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(26, 48, 64, 0.5);
  --hero-bg: linear-gradient(135deg, #101820 0%, #0a1018 100%);
  --shadow: 0 12px 40px rgba(0, 8, 16, 0.55);
}

[data-theme="abyss"] body {
  background:
    radial-gradient(circle at 50% -10%, rgba(6, 182, 212, 0.16) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(45, 212, 191, 0.06) 0%, transparent 42%),
    linear-gradient(180deg, #080c14 0%, #040810 100%);
}

/* ---- cobalt (deep royal blue + silver) ---- */

:root[data-theme="cobalt"] {
  --bg: #060a14;
  --bg-elev: #0e1424;
  --bg-elev-2: #141c30;
  --border: #283858;
  --border-strong: #385078;
  --border-subtle: rgba(40, 56, 88, 0.45);
  --text: #e8ecf8;
  --text-muted: #98a8c8;
  --text-dim: #687898;
  --accent: #3b82f6;
  --accent-dark: #2563eb;
  --accent-strong: #93c5fd;
  --accent-soft: rgba(59, 130, 246, 0.2);
  --accent-glow: rgba(59, 130, 246, 0.14);
  --accent-text: #060a14;
  --accent-text-hover: #040810;
  --accent-hover: #60a5fa;
  --good: #38bdf8;
  --good-soft: rgba(56, 189, 248, 0.18);
  --watching: #38bdf8;
  --watching-soft: rgba(56, 189, 248, 0.18);
  --ghost-bg: rgba(20, 28, 48, 0.5);
  --tab-hover: rgba(59, 130, 246, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.24), rgba(147, 197, 253, 0.12));
  --tab-active-border: rgba(59, 130, 246, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(40, 56, 88, 0.5);
  --hero-bg: linear-gradient(135deg, #182030 0%, #0e1424 100%);
  --shadow: 0 12px 40px rgba(0, 8, 24, 0.5);
}

[data-theme="cobalt"] body {
  background:
    radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(147, 197, 253, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a101c 0%, #060a14 100%);
}

/* ---- smoke (warm charcoal + silver) ---- */

:root[data-theme="smoke"] {
  --bg: #121110;
  --bg-elev: #1c1a18;
  --bg-elev-2: #262422;
  --border: #484440;
  --border-strong: #605c58;
  --border-subtle: rgba(72, 68, 64, 0.45);
  --text: #f0eeec;
  --text-muted: #a8a4a0;
  --text-dim: #787470;
  --accent: #a8a29e;
  --accent-dark: #78716c;
  --accent-strong: #d6d3d1;
  --accent-soft: rgba(168, 162, 158, 0.18);
  --accent-glow: rgba(168, 162, 158, 0.12);
  --accent-text: #121110;
  --accent-text-hover: #0a0908;
  --accent-hover: #d6d3d1;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.18);
  --watching: #34d399;
  --watching-soft: rgba(52, 211, 153, 0.18);
  --ghost-bg: rgba(38, 36, 34, 0.5);
  --tab-hover: rgba(168, 162, 158, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(168, 162, 158, 0.22), rgba(214, 211, 209, 0.1));
  --tab-active-border: rgba(168, 162, 158, 0.42);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(72, 68, 64, 0.5);
  --hero-bg: linear-gradient(135deg, #222020 0%, #1c1a18 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="smoke"] body {
  background:
    radial-gradient(circle at 50% -5%, rgba(168, 162, 158, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(120, 113, 108, 0.06) 0%, transparent 40%),
    linear-gradient(180deg, #181614 0%, #121110 100%);
}

/* ---- terminal (CRT phosphor green) ---- */

:root[data-theme="terminal"] {
  --bg: #040804;
  --bg-elev: #0a100a;
  --bg-elev-2: #101810;
  --border: #1a4018;
  --border-strong: #285828;
  --border-subtle: rgba(26, 64, 24, 0.45);
  --text: #c8f0c0;
  --text-muted: #78b070;
  --text-dim: #508848;
  --accent: #4ade80;
  --accent-dark: #22c55e;
  --accent-strong: #86efac;
  --accent-soft: rgba(74, 222, 128, 0.18);
  --accent-glow: rgba(74, 222, 128, 0.14);
  --accent-text: #040804;
  --accent-text-hover: #020402;
  --accent-hover: #86efac;
  --good: #4ade80;
  --good-soft: rgba(74, 222, 128, 0.18);
  --watching: #4ade80;
  --watching-soft: rgba(74, 222, 128, 0.18);
  --ghost-bg: rgba(16, 24, 16, 0.5);
  --tab-hover: rgba(74, 222, 128, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(74, 222, 128, 0.22), rgba(134, 239, 172, 0.1));
  --tab-active-border: rgba(74, 222, 128, 0.42);
  --tab-active-inset: rgba(255, 255, 255, 0.04);
  --track-bg: rgba(26, 64, 24, 0.5);
  --hero-bg: linear-gradient(135deg, #121812 0%, #0a100a 100%);
  --shadow: 0 12px 40px rgba(0, 16, 0, 0.45);
}

[data-theme="terminal"] body {
  background:
    radial-gradient(circle at 50% 0%, rgba(74, 222, 128, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(34, 197, 94, 0.05) 0%, transparent 40%),
    linear-gradient(180deg, #080c08 0%, #040804 100%);
}

/* ---- mahogany (dark wood + amber copper) ---- */

:root[data-theme="mahogany"] {
  --bg: #100c08;
  --bg-elev: #1a1410;
  --bg-elev-2: #241c16;
  --border: #503828;
  --border-strong: #684838;
  --border-subtle: rgba(80, 56, 40, 0.45);
  --text: #f4ece4;
  --text-muted: #c0a890;
  --text-dim: #907860;
  --accent: #d97706;
  --accent-dark: #b45309;
  --accent-strong: #fbbf24;
  --accent-soft: rgba(217, 119, 6, 0.2);
  --accent-glow: rgba(217, 119, 6, 0.14);
  --accent-text: #100c08;
  --accent-text-hover: #080604;
  --accent-hover: #fbbf24;
  --good: #84cc16;
  --good-soft: rgba(132, 204, 22, 0.18);
  --watching: #84cc16;
  --watching-soft: rgba(132, 204, 22, 0.18);
  --ghost-bg: rgba(36, 28, 22, 0.5);
  --tab-hover: rgba(217, 119, 6, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.24), rgba(251, 191, 36, 0.12));
  --tab-active-border: rgba(217, 119, 6, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(80, 56, 40, 0.5);
  --hero-bg: linear-gradient(135deg, #281e18 0%, #1a1410 100%);
  --shadow: 0 12px 40px rgba(8, 4, 0, 0.5);
}

[data-theme="mahogany"] body {
  background:
    radial-gradient(circle at 30% 0%, rgba(217, 119, 6, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(180, 83, 9, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #14100c 0%, #100c08 100%);
}

/* ---- chalk (crisp white + soft neutral gray) ---- */

:root[data-theme="chalk"] {
  --bg: #f4f4f4;
  --bg-elev: #ffffff;
  --bg-elev-2: #ececec;
  --border: #d4d4d4;
  --border-strong: #b8b8b8;
  --border-subtle: rgba(212, 212, 212, 0.55);
  --text: #171717;
  --text-muted: #525252;
  --text-dim: #737373;
  --accent: #525252;
  --accent-dark: #525252;
  --accent-strong: #737373;
  --accent-soft: rgba(82, 82, 82, 0.12);
  --accent-glow: rgba(82, 82, 82, 0.08);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #737373;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(236, 236, 236, 0.85);
  --tab-hover: rgba(82, 82, 82, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(82, 82, 82, 0.12), rgba(115, 115, 115, 0.06));
  --tab-active-border: rgba(82, 82, 82, 0.28);
  --tab-active-inset: rgba(255, 255, 255, 0.9);
  --track-bg: rgba(212, 212, 212, 0.45);
  --hero-bg: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  --shadow: 0 8px 28px rgba(23, 23, 23, 0.07);
}

[data-theme="chalk"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(115, 115, 115, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(163, 163, 163, 0.06) 0%, transparent 38%),
    linear-gradient(180deg, #ececec 0%, #f4f4f4 100%);
}

/* ---- ash (cool balanced mid-gray) ---- */

:root[data-theme="ash"] {
  --bg: #e8e8ea;
  --bg-elev: #f2f2f4;
  --bg-elev-2: #dcdce0;
  --border: #c4c4c8;
  --border-strong: #a8a8ae;
  --border-subtle: rgba(196, 196, 200, 0.55);
  --text: #1a1a1e;
  --text-muted: #52525b;
  --text-dim: #71717a;
  --accent: #52525b;
  --accent-dark: #52525b;
  --accent-strong: #71717a;
  --accent-soft: rgba(82, 82, 91, 0.14);
  --accent-glow: rgba(82, 82, 91, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #71717a;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(220, 220, 224, 0.85);
  --tab-hover: rgba(82, 82, 91, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(82, 82, 91, 0.14), rgba(113, 113, 122, 0.08));
  --tab-active-border: rgba(82, 82, 91, 0.3);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(196, 196, 200, 0.4);
  --hero-bg: linear-gradient(135deg, #f0f0f2 0%, #f2f2f4 100%);
  --shadow: 0 8px 28px rgba(26, 26, 30, 0.08);
}

[data-theme="ash"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(82, 82, 91, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(113, 113, 122, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #dcdce0 0%, #e8e8ea 100%);
}

/* ---- mist (silvery pale gray-white) ---- */

:root[data-theme="mist"] {
  --bg: #eef0f2;
  --bg-elev: #f8f9fa;
  --bg-elev-2: #e4e8ec;
  --border: #ccd2d8;
  --border-strong: #b0b8c0;
  --border-subtle: rgba(204, 210, 216, 0.55);
  --text: #1c2024;
  --text-muted: #5c646c;
  --text-dim: #7c848c;
  --accent: #6b7280;
  --accent-dark: #6b7280;
  --accent-strong: #9ca3af;
  --accent-soft: rgba(107, 114, 128, 0.14);
  --accent-glow: rgba(107, 114, 128, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #9ca3af;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(228, 232, 236, 0.85);
  --tab-hover: rgba(107, 114, 128, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(107, 114, 128, 0.14), rgba(156, 163, 175, 0.08));
  --tab-active-border: rgba(107, 114, 128, 0.3);
  --tab-active-inset: rgba(255, 255, 255, 0.88);
  --track-bg: rgba(204, 210, 216, 0.4);
  --hero-bg: linear-gradient(135deg, #f4f6f8 0%, #f8f9fa 100%);
  --shadow: 0 8px 28px rgba(28, 32, 36, 0.07);
}

[data-theme="mist"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(107, 114, 128, 0.09) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(156, 163, 175, 0.06) 0%, transparent 38%),
    linear-gradient(180deg, #e4e8ec 0%, #eef0f2 100%);
}

/* ---- dove (soft warm gray-white) ---- */

:root[data-theme="dove"] {
  --bg: #f6f4f2;
  --bg-elev: #fdfcfa;
  --bg-elev-2: #eeeae6;
  --border: #d8d2cc;
  --border-strong: #c0b8b0;
  --border-subtle: rgba(216, 210, 204, 0.55);
  --text: #242220;
  --text-muted: #646058;
  --text-dim: #848078;
  --accent: #9ca3af;
  --accent-dark: #9ca3af;
  --accent-strong: #b8bcc4;
  --accent-soft: rgba(156, 163, 175, 0.14);
  --accent-glow: rgba(156, 163, 175, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #b8bcc4;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(238, 234, 230, 0.85);
  --tab-hover: rgba(156, 163, 175, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(156, 163, 175, 0.14), rgba(184, 188, 196, 0.08));
  --tab-active-border: rgba(156, 163, 175, 0.3);
  --tab-active-inset: rgba(255, 255, 255, 0.88);
  --track-bg: rgba(216, 210, 204, 0.4);
  --hero-bg: linear-gradient(135deg, #faf8f6 0%, #fdfcfa 100%);
  --shadow: 0 8px 28px rgba(36, 34, 32, 0.07);
}

[data-theme="dove"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(156, 163, 175, 0.09) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(184, 188, 196, 0.06) 0%, transparent 38%),
    linear-gradient(180deg, #eeeae6 0%, #f6f4f2 100%);
}

/* ---- zinc (industrial neutral + dark zinc accent) ---- */

:root[data-theme="zinc"] {
  --bg: #e4e4e7;
  --bg-elev: #f4f4f5;
  --bg-elev-2: #d4d4d8;
  --border: #b8b8be;
  --border-strong: #9c9ca4;
  --border-subtle: rgba(184, 184, 190, 0.55);
  --text: #18181b;
  --text-muted: #3f3f46;
  --text-dim: #52525b;
  --accent: #3f3f46;
  --accent-dark: #3f3f46;
  --accent-strong: #52525b;
  --accent-soft: rgba(63, 63, 70, 0.14);
  --accent-glow: rgba(63, 63, 70, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #52525b;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(212, 212, 216, 0.85);
  --tab-hover: rgba(63, 63, 70, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(63, 63, 70, 0.14), rgba(82, 82, 91, 0.08));
  --tab-active-border: rgba(63, 63, 70, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(184, 184, 190, 0.4);
  --hero-bg: linear-gradient(135deg, #ececee 0%, #f4f4f5 100%);
  --shadow: 0 8px 28px rgba(24, 24, 27, 0.09);
}

[data-theme="zinc"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(63, 63, 70, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(82, 82, 91, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #d4d4d8 0%, #e4e4e7 100%);
}

/* ---- inferno (blazing flame + coal) ---- */

:root[data-theme="inferno"] {
  --bg: #100604;
  --bg-elev: #1a0c08;
  --bg-elev-2: #241410;
  --border: #582818;
  --border-strong: #783828;
  --border-subtle: rgba(88, 40, 24, 0.45);
  --text: #fce8e4;
  --text-muted: #d0a098;
  --text-dim: #a07068;
  --accent: #ef4444;
  --accent-dark: #dc2626;
  --accent-strong: #fb923c;
  --accent-soft: rgba(239, 68, 68, 0.2);
  --accent-glow: rgba(251, 146, 60, 0.14);
  --accent-text: #1a0804;
  --accent-text-hover: #0a0402;
  --accent-hover: #f87171;
  --good: #fbbf24;
  --good-soft: rgba(251, 191, 36, 0.18);
  --watching: #fbbf24;
  --watching-soft: rgba(251, 191, 36, 0.18);
  --ghost-bg: rgba(36, 20, 16, 0.5);
  --tab-hover: rgba(239, 68, 68, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.24), rgba(251, 146, 60, 0.12));
  --tab-active-border: rgba(239, 68, 68, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(88, 40, 24, 0.5);
  --hero-bg: linear-gradient(135deg, #281410 0%, #1a0c08 100%);
  --shadow: 0 12px 40px rgba(40, 0, 0, 0.5);
}

[data-theme="inferno"] body {
  background:
    radial-gradient(circle at 50% -5%, rgba(239, 68, 68, 0.2) 0%, transparent 48%),
    radial-gradient(circle at 80% 20%, rgba(251, 146, 60, 0.1) 0%, transparent 42%),
    linear-gradient(180deg, #140804 0%, #100604 100%);
}

/* ---- storm (thundercloud + lightning) ---- */

:root[data-theme="storm"] {
  --bg: #0c1018;
  --bg-elev: #141a24;
  --bg-elev-2: #1c2430;
  --border: #384858;
  --border-strong: #506070;
  --border-subtle: rgba(56, 72, 88, 0.45);
  --text: #e8eef4;
  --text-muted: #98a8b8;
  --text-dim: #687888;
  --accent: #38bdf8;
  --accent-dark: #0ea5e9;
  --accent-strong: #7dd3fc;
  --accent-soft: rgba(56, 189, 248, 0.2);
  --accent-glow: rgba(56, 189, 248, 0.14);
  --accent-text: #0c1018;
  --accent-text-hover: #060810;
  --accent-hover: #7dd3fc;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.18);
  --watching: #34d399;
  --watching-soft: rgba(52, 211, 153, 0.18);
  --ghost-bg: rgba(28, 36, 48, 0.5);
  --tab-hover: rgba(56, 189, 248, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(125, 211, 252, 0.1));
  --tab-active-border: rgba(56, 189, 248, 0.42);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(56, 72, 88, 0.5);
  --hero-bg: linear-gradient(135deg, #202830 0%, #141a24 100%);
  --shadow: 0 12px 40px rgba(0, 8, 20, 0.5);
}

[data-theme="storm"] body {
  background:
    radial-gradient(circle at 30% 0%, rgba(56, 189, 248, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 75% 15%, rgba(100, 116, 139, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, #101420 0%, #0c1018 100%);
}

/* ---- venom (toxic chartreuse) ---- */

:root[data-theme="venom"] {
  --bg: #060804;
  --bg-elev: #0c1008;
  --bg-elev-2: #121810;
  --border: #284018;
  --border-strong: #385820;
  --border-subtle: rgba(40, 64, 24, 0.45);
  --text: #d8f0c8;
  --text-muted: #88b868;
  --text-dim: #588840;
  --accent: #a3e635;
  --accent-dark: #84cc16;
  --accent-strong: #bef264;
  --accent-soft: rgba(163, 230, 53, 0.18);
  --accent-glow: rgba(163, 230, 53, 0.14);
  --accent-text: #060804;
  --accent-text-hover: #030402;
  --accent-hover: #bef264;
  --good: #a3e635;
  --good-soft: rgba(163, 230, 53, 0.18);
  --watching: #a3e635;
  --watching-soft: rgba(163, 230, 53, 0.18);
  --ghost-bg: rgba(18, 24, 16, 0.5);
  --tab-hover: rgba(163, 230, 53, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(163, 230, 53, 0.22), rgba(190, 242, 100, 0.1));
  --tab-active-border: rgba(163, 230, 53, 0.42);
  --tab-active-inset: rgba(255, 255, 255, 0.04);
  --track-bg: rgba(40, 64, 24, 0.5);
  --hero-bg: linear-gradient(135deg, #161c10 0%, #0c1008 100%);
  --shadow: 0 12px 40px rgba(0, 16, 0, 0.45);
}

[data-theme="venom"] body {
  background:
    radial-gradient(circle at 40% 0%, rgba(163, 230, 53, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(132, 204, 22, 0.06) 0%, transparent 40%),
    linear-gradient(180deg, #0a0c06 0%, #060804 100%);
}

/* ---- lagoon (dark tropical teal) ---- */

:root[data-theme="lagoon"] {
  --bg: #041014;
  --bg-elev: #0a181c;
  --bg-elev-2: #102024;
  --border: #1a4048;
  --border-strong: #285860;
  --border-subtle: rgba(26, 64, 72, 0.45);
  --text: #e0f4f0;
  --text-muted: #88c0b0;
  --text-dim: #589080;
  --accent: #14b8a6;
  --accent-dark: #0d9488;
  --accent-strong: #2dd4bf;
  --accent-soft: rgba(20, 184, 166, 0.2);
  --accent-glow: rgba(20, 184, 166, 0.14);
  --accent-text: #041014;
  --accent-text-hover: #020810;
  --accent-hover: #2dd4bf;
  --good: #2dd4bf;
  --good-soft: rgba(45, 212, 191, 0.18);
  --watching: #2dd4bf;
  --watching-soft: rgba(45, 212, 191, 0.18);
  --ghost-bg: rgba(16, 32, 36, 0.5);
  --tab-hover: rgba(20, 184, 166, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(20, 184, 166, 0.24), rgba(45, 212, 191, 0.12));
  --tab-active-border: rgba(20, 184, 166, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(26, 64, 72, 0.5);
  --hero-bg: linear-gradient(135deg, #142830 0%, #0a181c 100%);
  --shadow: 0 12px 40px rgba(0, 12, 16, 0.5);
}

[data-theme="lagoon"] body {
  background:
    radial-gradient(circle at 20% 0%, rgba(20, 184, 166, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(45, 212, 191, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #081418 0%, #041014 100%);
}

/* ---- raven (blue-black + periwinkle) ---- */

:root[data-theme="raven"] {
  --bg: #080810;
  --bg-elev: #101018;
  --bg-elev-2: #181820;
  --border: #303048;
  --border-strong: #484860;
  --border-subtle: rgba(48, 48, 72, 0.45);
  --text: #ececf4;
  --text-muted: #a0a0c0;
  --text-dim: #707090;
  --accent: #818cf8;
  --accent-dark: #6366f1;
  --accent-strong: #a5b4fc;
  --accent-soft: rgba(129, 140, 248, 0.2);
  --accent-glow: rgba(129, 140, 248, 0.14);
  --accent-text: #080810;
  --accent-text-hover: #040408;
  --accent-hover: #a5b4fc;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.18);
  --watching: #34d399;
  --watching-soft: rgba(52, 211, 153, 0.18);
  --ghost-bg: rgba(24, 24, 32, 0.5);
  --tab-hover: rgba(129, 140, 248, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(129, 140, 248, 0.22), rgba(165, 180, 252, 0.1));
  --tab-active-border: rgba(129, 140, 248, 0.42);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(48, 48, 72, 0.5);
  --hero-bg: linear-gradient(135deg, #1c1c28 0%, #101018 100%);
  --shadow: 0 12px 40px rgba(0, 0, 16, 0.5);
}

[data-theme="raven"] body {
  background:
    radial-gradient(circle at 30% 0%, rgba(129, 140, 248, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0c0c14 0%, #080810 100%);
}

/* ---- forge (iron dark + ember sparks) ---- */

:root[data-theme="forge"] {
  --bg: #141010;
  --bg-elev: #1c1818;
  --bg-elev-2: #242020;
  --border: #484038;
  --border-strong: #605850;
  --border-subtle: rgba(72, 64, 56, 0.45);
  --text: #f0ece8;
  --text-muted: #b0a898;
  --text-dim: #807870;
  --accent: #f97316;
  --accent-dark: #ea580c;
  --accent-strong: #fb923c;
  --accent-soft: rgba(249, 115, 22, 0.2);
  --accent-glow: rgba(249, 115, 22, 0.14);
  --accent-text: #141010;
  --accent-text-hover: #0a0808;
  --accent-hover: #fb923c;
  --good: #78716c;
  --good-soft: rgba(120, 113, 108, 0.18);
  --watching: #78716c;
  --watching-soft: rgba(120, 113, 108, 0.18);
  --ghost-bg: rgba(36, 32, 32, 0.5);
  --tab-hover: rgba(249, 115, 22, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(249, 115, 22, 0.22), rgba(120, 113, 108, 0.12));
  --tab-active-border: rgba(249, 115, 22, 0.42);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(72, 64, 56, 0.5);
  --hero-bg: linear-gradient(135deg, #282420 0%, #1c1818 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="forge"] body {
  background:
    radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(120, 113, 108, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #181414 0%, #141010 100%);
}

/* ---- hollow (twilight purple-gray) ---- */

:root[data-theme="hollow"] {
  --bg: #100e14;
  --bg-elev: #18161c;
  --bg-elev-2: #201e24;
  --border: #403848;
  --border-strong: #585060;
  --border-subtle: rgba(64, 56, 72, 0.45);
  --text: #ece8f0;
  --text-muted: #a8a0b0;
  --text-dim: #787080;
  --accent: #a78bfa;
  --accent-dark: #8b5cf6;
  --accent-strong: #c4b5fd;
  --accent-soft: rgba(167, 139, 250, 0.18);
  --accent-glow: rgba(167, 139, 250, 0.12);
  --accent-text: #100e14;
  --accent-text-hover: #08060c;
  --accent-hover: #c4b5fd;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.18);
  --watching: #34d399;
  --watching-soft: rgba(52, 211, 153, 0.18);
  --ghost-bg: rgba(32, 30, 36, 0.5);
  --tab-hover: rgba(167, 139, 250, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(196, 181, 253, 0.1));
  --tab-active-border: rgba(167, 139, 250, 0.4);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(64, 56, 72, 0.5);
  --hero-bg: linear-gradient(135deg, #242028 0%, #18161c 100%);
  --shadow: 0 12px 40px rgba(8, 0, 16, 0.45);
}

[data-theme="hollow"] body {
  background:
    radial-gradient(circle at 40% 0%, rgba(167, 139, 250, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(88, 80, 96, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #141218 0%, #100e14 100%);
}

/* ---- seaglass (frosted teal-mint) ---- */

:root[data-theme="seaglass"] {
  --bg: #e8f4f2;
  --bg-elev: #f6fcfa;
  --bg-elev-2: #dceeea;
  --border: #b8d8d0;
  --border-strong: #98c4b8;
  --border-subtle: rgba(184, 216, 208, 0.55);
  --text: #142820;
  --text-muted: #486858;
  --text-dim: #688878;
  --accent: #0d9488;
  --accent-dark: #0d9488;
  --accent-strong: #14b8a6;
  --accent-soft: rgba(13, 148, 136, 0.14);
  --accent-glow: rgba(13, 148, 136, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #14b8a6;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(220, 238, 234, 0.85);
  --tab-hover: rgba(13, 148, 136, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(13, 148, 136, 0.14), rgba(20, 184, 166, 0.08));
  --tab-active-border: rgba(13, 148, 136, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.88);
  --track-bg: rgba(184, 216, 208, 0.4);
  --hero-bg: linear-gradient(135deg, #f0faf8 0%, #f6fcfa 100%);
  --shadow: 0 8px 28px rgba(20, 40, 32, 0.08);
}

[data-theme="seaglass"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(13, 148, 136, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(20, 184, 166, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #dceeea 0%, #e8f4f2 100%);
}

/* ---- butter (soft pale yellow) ---- */

:root[data-theme="butter"] {
  --bg: #faf6e0;
  --bg-elev: #fffdf0;
  --bg-elev-2: #f2ecc8;
  --border: #e0d4a0;
  --border-strong: #c8b878;
  --border-subtle: rgba(224, 212, 160, 0.55);
  --text: #282010;
  --text-muted: #686040;
  --text-dim: #888060;
  --accent: #ca8a04;
  --accent-dark: #ca8a04;
  --accent-strong: #eab308;
  --accent-soft: rgba(202, 138, 4, 0.14);
  --accent-glow: rgba(202, 138, 4, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #eab308;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(242, 236, 200, 0.85);
  --tab-hover: rgba(202, 138, 4, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(202, 138, 4, 0.14), rgba(234, 179, 8, 0.08));
  --tab-active-border: rgba(202, 138, 4, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.88);
  --track-bg: rgba(224, 212, 160, 0.4);
  --hero-bg: linear-gradient(135deg, #fffaf0 0%, #fffdf0 100%);
  --shadow: 0 8px 28px rgba(40, 32, 16, 0.08);
}

[data-theme="butter"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(202, 138, 4, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(234, 179, 8, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #f2ecc8 0%, #faf6e0 100%);
}

/* ---- wisteria (pale violet) ---- */

:root[data-theme="wisteria"] {
  --bg: #f4f0fa;
  --bg-elev: #faf8ff;
  --bg-elev-2: #ece6f4;
  --border: #d0c0e4;
  --border-strong: #b8a0d0;
  --border-subtle: rgba(208, 192, 228, 0.55);
  --text: #201828;
  --text-muted: #584870;
  --text-dim: #786890;
  --accent: #8b5cf6;
  --accent-dark: #8b5cf6;
  --accent-strong: #a78bfa;
  --accent-soft: rgba(139, 92, 246, 0.14);
  --accent-glow: rgba(139, 92, 246, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #a78bfa;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(236, 230, 244, 0.85);
  --tab-hover: rgba(139, 92, 246, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(167, 139, 250, 0.08));
  --tab-active-border: rgba(139, 92, 246, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.88);
  --track-bg: rgba(208, 192, 228, 0.4);
  --hero-bg: linear-gradient(135deg, #f8f4ff 0%, #faf8ff 100%);
  --shadow: 0 8px 28px rgba(32, 24, 40, 0.08);
}

[data-theme="wisteria"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(167, 139, 250, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #ece6f4 0%, #f4f0fa 100%);
}

/* ---- flamingo (bright coral pink) ---- */

:root[data-theme="flamingo"] {
  --bg: #fff0ee;
  --bg-elev: #fffafa;
  --bg-elev-2: #fce4e0;
  --border: #f0c0b8;
  --border-strong: #e0a098;
  --border-subtle: rgba(240, 192, 184, 0.55);
  --text: #281410;
  --text-muted: #784840;
  --text-dim: #986860;
  --accent: #f43f5e;
  --accent-dark: #f43f5e;
  --accent-strong: #fb7185;
  --accent-soft: rgba(244, 63, 94, 0.14);
  --accent-glow: rgba(244, 63, 94, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #fb7185;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(252, 228, 224, 0.85);
  --tab-hover: rgba(244, 63, 94, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.14), rgba(251, 113, 133, 0.08));
  --tab-active-border: rgba(244, 63, 94, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.88);
  --track-bg: rgba(240, 192, 184, 0.4);
  --hero-bg: linear-gradient(135deg, #fff6f4 0%, #fffafa 100%);
  --shadow: 0 8px 28px rgba(40, 20, 16, 0.08);
}

[data-theme="flamingo"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(244, 63, 94, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(251, 113, 133, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #fce4e0 0%, #fff0ee 100%);
}

/* ---- almond (warm nut beige) ---- */

:root[data-theme="almond"] {
  --bg: #f5ebe0;
  --bg-elev: #faf6f0;
  --bg-elev-2: #ece0d4;
  --border: #d4c0a8;
  --border-strong: #b8a088;
  --border-subtle: rgba(212, 192, 168, 0.55);
  --text: #2a2014;
  --text-muted: #6a5840;
  --text-dim: #8a7860;
  --accent: #92400e;
  --accent-dark: #92400e;
  --accent-strong: #b45309;
  --accent-soft: rgba(146, 64, 14, 0.14);
  --accent-glow: rgba(146, 64, 14, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #b45309;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(236, 224, 212, 0.85);
  --tab-hover: rgba(146, 64, 14, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(146, 64, 14, 0.14), rgba(180, 83, 9, 0.08));
  --tab-active-border: rgba(146, 64, 14, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.88);
  --track-bg: rgba(212, 192, 168, 0.4);
  --hero-bg: linear-gradient(135deg, #faf4ec 0%, #faf6f0 100%);
  --shadow: 0 8px 28px rgba(42, 32, 20, 0.08);
}

[data-theme="almond"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(146, 64, 14, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(180, 83, 9, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #ece0d4 0%, #f5ebe0 100%);
}

/* ---- cloud (airy white + soft blue-gray) ---- */

:root[data-theme="cloud"] {
  --bg: #f6f8fc;
  --bg-elev: #ffffff;
  --bg-elev-2: #eceef4;
  --border: #d0d4dc;
  --border-strong: #b4bac4;
  --border-subtle: rgba(208, 212, 220, 0.55);
  --text: #1a1e24;
  --text-muted: #545c68;
  --text-dim: #747c88;
  --accent: #64748b;
  --accent-dark: #64748b;
  --accent-strong: #94a3b8;
  --accent-soft: rgba(100, 116, 139, 0.14);
  --accent-glow: rgba(100, 116, 139, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #94a3b8;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(236, 238, 244, 0.85);
  --tab-hover: rgba(100, 116, 139, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(100, 116, 139, 0.14), rgba(148, 163, 184, 0.08));
  --tab-active-border: rgba(100, 116, 139, 0.3);
  --tab-active-inset: rgba(255, 255, 255, 0.9);
  --track-bg: rgba(208, 212, 220, 0.4);
  --hero-bg: linear-gradient(135deg, #fafbfe 0%, #ffffff 100%);
  --shadow: 0 8px 28px rgba(26, 30, 36, 0.07);
}

[data-theme="cloud"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(100, 116, 139, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(148, 163, 184, 0.06) 0%, transparent 38%),
    linear-gradient(180deg, #eceef4 0%, #f6f8fc 100%);
}

/* ---- celadon (pale green-blue ceramic) ---- */

:root[data-theme="celadon"] {
  --bg: #eaf4f0;
  --bg-elev: #f6faf8;
  --bg-elev-2: #dceae4;
  --border: #b8d4c8;
  --border-strong: #98b8a8;
  --border-subtle: rgba(184, 212, 200, 0.55);
  --text: #182820;
  --text-muted: #486858;
  --text-dim: #688878;
  --accent: #059669;
  --accent-dark: #059669;
  --accent-strong: #10b981;
  --accent-soft: rgba(5, 150, 105, 0.14);
  --accent-glow: rgba(5, 150, 105, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #10b981;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(220, 234, 228, 0.85);
  --tab-hover: rgba(5, 150, 105, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(5, 150, 105, 0.14), rgba(16, 185, 129, 0.08));
  --tab-active-border: rgba(5, 150, 105, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.88);
  --track-bg: rgba(184, 212, 200, 0.4);
  --hero-bg: linear-gradient(135deg, #f2f8f4 0%, #f6faf8 100%);
  --shadow: 0 8px 28px rgba(24, 40, 32, 0.08);
}

[data-theme="celadon"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(5, 150, 105, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(16, 185, 129, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #dceae4 0%, #eaf4f0 100%);
}

/* ---- rosewater (barely-there rose) ---- */

:root[data-theme="rosewater"] {
  --bg: #fdf4f6;
  --bg-elev: #fffbfc;
  --bg-elev-2: #f8e8ec;
  --border: #e8c8d0;
  --border-strong: #d4a8b4;
  --border-subtle: rgba(232, 200, 208, 0.55);
  --text: #281820;
  --text-muted: #684858;
  --text-dim: #886878;
  --accent: #ec4899;
  --accent-dark: #ec4899;
  --accent-strong: #f472b6;
  --accent-soft: rgba(236, 72, 153, 0.14);
  --accent-glow: rgba(236, 72, 153, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #f472b6;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(248, 232, 236, 0.85);
  --tab-hover: rgba(236, 72, 153, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(236, 72, 153, 0.14), rgba(244, 114, 182, 0.08));
  --tab-active-border: rgba(236, 72, 153, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.88);
  --track-bg: rgba(232, 200, 208, 0.4);
  --hero-bg: linear-gradient(135deg, #fff8fa 0%, #fffbfc 100%);
  --shadow: 0 8px 28px rgba(40, 24, 32, 0.08);
}

[data-theme="rosewater"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(236, 72, 153, 0.09) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(244, 114, 182, 0.06) 0%, transparent 38%),
    linear-gradient(180deg, #f8e8ec 0%, #fdf4f6 100%);
}

/* Light themes — aurora tab label uses inverted blend so shimmer stays in the glyphs */
:root[data-theme="paper"],
:root[data-theme="cream"],
:root[data-theme="mint"],
:root[data-theme="lavender"],
:root[data-theme="sunrise"],
:root[data-theme="snow"],
:root[data-theme="sand"],
:root[data-theme="blush"],
:root[data-theme="sky"],
:root[data-theme="honey"],
:root[data-theme="sage"],
:root[data-theme="lilac"],
:root[data-theme="coral"],
:root[data-theme="linen"],
:root[data-theme="frost"],
:root[data-theme="pebble"],
:root[data-theme="porcelain"],
:root[data-theme="willow"],
:root[data-theme="petal"],
:root[data-theme="dune"],
:root[data-theme="chalk"],
:root[data-theme="ash"],
:root[data-theme="mist"],
:root[data-theme="dove"],
:root[data-theme="zinc"],
:root[data-theme="seaglass"],
:root[data-theme="butter"],
:root[data-theme="wisteria"],
:root[data-theme="flamingo"],
:root[data-theme="almond"],
:root[data-theme="cloud"],
:root[data-theme="celadon"],
:root[data-theme="rosewater"] {
  --aurora-text: #101010;
  --aurora-blend-mode: lighten;
  --aurora-item-blend-mode: multiply;
  --aurora-item-opacity: 0.72;
  --brand-mark-filter: drop-shadow(0 3px 8px rgba(15, 23, 42, 0.32)) drop-shadow(0 1px 3px rgba(15, 23, 42, 0.22));
}

[data-theme="paper"] .mobile-app-support-bar,
[data-theme="cream"] .mobile-app-support-bar,
[data-theme="mint"] .mobile-app-support-bar,
[data-theme="lavender"] .mobile-app-support-bar,
[data-theme="sunrise"] .mobile-app-support-bar,
[data-theme="snow"] .mobile-app-support-bar,
[data-theme="sand"] .mobile-app-support-bar,
[data-theme="blush"] .mobile-app-support-bar,
[data-theme="sky"] .mobile-app-support-bar,
[data-theme="honey"] .mobile-app-support-bar,
[data-theme="sage"] .mobile-app-support-bar,
[data-theme="lilac"] .mobile-app-support-bar,
[data-theme="coral"] .mobile-app-support-bar,
[data-theme="linen"] .mobile-app-support-bar,
[data-theme="frost"] .mobile-app-support-bar,
[data-theme="pebble"] .mobile-app-support-bar,
[data-theme="porcelain"] .mobile-app-support-bar,
[data-theme="willow"] .mobile-app-support-bar,
[data-theme="petal"] .mobile-app-support-bar,
[data-theme="dune"] .mobile-app-support-bar,
[data-theme="chalk"] .mobile-app-support-bar,
[data-theme="ash"] .mobile-app-support-bar,
[data-theme="mist"] .mobile-app-support-bar,
[data-theme="dove"] .mobile-app-support-bar,
[data-theme="zinc"] .mobile-app-support-bar,
[data-theme="seaglass"] .mobile-app-support-bar,
[data-theme="butter"] .mobile-app-support-bar,
[data-theme="wisteria"] .mobile-app-support-bar,
[data-theme="flamingo"] .mobile-app-support-bar,
[data-theme="almond"] .mobile-app-support-bar,
[data-theme="cloud"] .mobile-app-support-bar,
[data-theme="celadon"] .mobile-app-support-bar,
[data-theme="rosewater"] .mobile-app-support-bar {
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.12);
}

/* ---- theme swatch picker (prefs dialog) ---- */

.theme-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: min(62vh, 540px);
  overflow-y: auto;
  padding-right: 4px;
}

.theme-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-group-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.theme-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 6px 7px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-elev-2);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}

.theme-swatch:hover {
  border-color: var(--border-strong);
}

.theme-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.theme-swatch-colors {
  display: flex;
  gap: 3px;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.theme-swatch-colors span {
  flex: 1;
}

.theme-swatch-name {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .theme-group-grid {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
  }
}

/* ---- v7 layout: inherit themed surfaces (overrides hardcoded v7 leftovers) ---- */

html.library-layout .app-main,
html.library-layout .app-shell {
  background: transparent;
  color: var(--text);
}

[data-theme] html.library-layout .view-layout-toggle,
[data-theme] html.library-layout .lv7-rail-nav button,
[data-theme] html.library-layout .lv7-rail-view-toggle,
[data-theme] html.library-layout .lv7-menu-btn {
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  border-color: var(--border);
  color: var(--text-muted);
}

[data-theme] html.library-layout .list-filter-bar.lv7-search-adapted .list-filter-input {
  background-color: var(--bg-elev-2);
  border: 1px solid var(--border-strong, var(--border));
  color: var(--text);
}

[data-theme] html.library-layout .list-filter-bar.lv7-search-adapted .list-filter-input:focus {
  border-color: var(--border-strong, var(--border));
  box-shadow: 0 0 0 2px var(--accent-soft);
}

[data-theme] html.library-layout .view-layout-btn.active,
[data-theme] html.library-layout .lv7-rail-nav button:hover,
[data-theme] html.library-layout .lv7-rail-view-toggle:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-elev));
  color: var(--accent);
  border-color: var(--border-strong, var(--border));
}

[data-theme] html.library-layout .lv7-nav-menu-item {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

[data-theme] html.library-layout .lv7-nav-menu-item:hover,
[data-theme] html.library-layout .lv7-nav-menu-item:focus-visible,
[data-theme] html.library-layout .lv7-nav-menu-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--lv7-yellow, var(--accent));
  border-color: transparent;
}

[data-theme] html.library-layout .lv7-nav-menu-item:hover .lv7-nav-menu-item-label,
[data-theme] html.library-layout .lv7-nav-menu-item:hover .lv7-nav-menu-item-icon,
[data-theme] html.library-layout .lv7-nav-menu-item:focus-visible .lv7-nav-menu-item-label,
[data-theme] html.library-layout .lv7-nav-menu-item:focus-visible .lv7-nav-menu-item-icon,
[data-theme] html.library-layout .lv7-nav-menu-item.active .lv7-nav-menu-item-label,
[data-theme] html.library-layout .lv7-nav-menu-item.active .lv7-nav-menu-item-icon {
  color: var(--lv7-yellow, var(--accent));
}

/* ---- show detail v2: inherit themed share / provider controls ---- */

[data-theme] html.show-detail-open .show-detail .share-btn {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text);
}

[data-theme] html.show-detail-open .show-detail .share-btn:hover,
[data-theme] html.show-detail-open .show-detail .share-btn:focus-visible {
  background: var(--bg-elev);
  border-color: var(--border-strong);
}

[data-theme] html.show-detail-open .show-detail .provider-pill {
  background: color-mix(in srgb, var(--text) 4%, var(--bg-elev));
  border-color: var(--border);
}

html.show-detail-open[data-theme-mode="light"] .show-detail .md2-back-link {
  background: color-mix(in srgb, var(--bg-elev-2) 70%, var(--border-strong));
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent);
}