/* =====================================================
   DualTicker – themes.css (AUTHENTIC FONTS & COLORS)
   Research-based: real fonts, real colors, real vibes
   ===================================================== */

/* Import Google Fonts for authentic typography */
/* Google Fonts are loaded via <link> in index.html (moved from @import to avoid CORB and improve LCP). */

/* Default fallback */
:root{
  --dt-radius: 6px;
  --dt-bg: #0b0f16;
  --dt-surface: #0f1724;
  --dt-surface-2: #121b28;
  --dt-text: #e8edf6;
  --dt-muted: #9fb1c9;
  --dt-accent: #7cc4ff;
  --dt-border: rgba(255,255,255,0.10);
  --dt-divider: rgba(255,255,255,0.08);
  --dt-shadow-color: rgba(0,0,0,0.55);
  --dt-shadow: 0 18px 38px var(--dt-shadow-color);
  --dt-shadow-menu-color: rgba(0,0,0,0.40);
  --dt-glow-color: color-mix(in srgb, var(--dt-accent) 45%, transparent 55%);
  --dt-hover: color-mix(in srgb, #0f1724 86%, #ffffff 14%);
  --dt-active: color-mix(in srgb, #0f1724 74%, #000000 26%);
  --dt-focus: #8fb0ff;
  --dt-panel: var(--dt-surface);
  --dt-panelBorder: var(--dt-border);
  --dt-dim: var(--dt-muted);
}


/* -------------------------
   CUSTOM (user-edited; values come from inline --dt-* vars)
   ------------------------- */
body.theme-custom{
  --dt-bg: #0b0f16;
  --dt-surface: #0f1724;
  --dt-surface-2: #121b28;
  --dt-text: #e8edf6;
  --dt-muted: #9fb1c9;
  --dt-accent: #7cc4ff;
  --dt-source: color-mix(in srgb, var(--dt-accent) 68%, var(--dt-text) 32%);
  --dt-border: rgba(255,255,255,0.10);
  --dt-divider: rgba(255,255,255,0.08);
  --dt-shadow-color: rgba(0,0,0,0.55);
  --dt-shadow: 0 18px 38px var(--dt-shadow-color);
  --dt-shadow-menu-color: rgba(0,0,0,0.40);
  --dt-glow-color: color-mix(in srgb, var(--dt-accent) 45%, transparent 55%);
  --dt-hover: color-mix(in srgb, var(--dt-surface) 86%, #ffffff 14%);
  --dt-active: color-mix(in srgb, var(--dt-surface) 74%, #000000 26%);
  --dt-focus: #8fb0ff;
  --dt-surface-menu: color-mix(in srgb, var(--dt-surface, #0f1724) 92%, #ffffff 8%);
  --dt-surface-popover: color-mix(in srgb, var(--dt-surface-2, var(--dt-surface, #0f1724)) 90%, #ffffff 10%);
  --dt-border-menu: color-mix(in srgb, var(--dt-border, rgba(255,255,255,0.1)) 70%, rgba(255,255,255,0.18) 30%);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, var(--dt-hover, var(--dt-surface-menu)) 80%, var(--dt-surface-menu) 20%);
  --dt-active-menu: color-mix(in srgb, var(--dt-active, var(--dt-surface-menu)) 80%, var(--dt-surface-menu) 20%);
  --dt-shadow-menu: 0 14px 34px var(--dt-shadow-menu-color, rgba(0,0,0,0.4));
  --dt-search-bg: color-mix(in srgb, var(--dt-surface) 84%, #05070c 16%);
  --dt-search-border: color-mix(in srgb, var(--dt-border) 70%, var(--dt-text) 14%);
  --dt-search-text: var(--dt-text);
  --dt-search-placeholder: color-mix(in srgb, var(--dt-muted) 70%, var(--dt-text) 30%);
  --dt-search-focus-border: color-mix(in srgb, var(--dt-accent) 58%, var(--dt-border) 42%);
  --dt-search-focus-ring: color-mix(in srgb, var(--dt-focus) 38%, transparent 62%);
}

/* -------------------------
   NEWSROOM (Professional Newspaper)
   Georgia font + clean serif aesthetic with bold red/blue accents
   ------------------------- */
body.theme-newsroom{
  --dt-bg: #f3f5fa;
  --dt-surface: #ffffff;
  --dt-surface-2: #eef1f7;
  --dt-text: #1b1f29;
  --dt-headline-strong: #111827;
  --dt-muted: #5b6371;
  --dt-accent: #1d4ed8;
  --dt-source: rgba(220,38,38,0.95);
  --dt-border: rgba(0,0,0,0.12);
  --dt-divider: rgba(0,0,0,0.08);
  --dt-shadow: 0 18px 44px rgba(12,34,68,0.18);
  --dt-hover: color-mix(in srgb, #ffffff 94%, #dbe2f0 6%);
  --dt-active: color-mix(in srgb, #eef1f7 82%, #cdd2df 18%);
  --dt-focus: #2f56d8;
  --dt-surface-menu: color-mix(in srgb, #ffffff 98%, #e7ecf6 2%);
  --dt-surface-popover: color-mix(in srgb, #ffffff 94%, #e4e9f4 6%);
  --dt-border-menu: rgba(0,0,0,0.12);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, #ffffff 92%, #dbe2f0 8%);
  --dt-active-menu: color-mix(in srgb, #eef1f7 86%, #d9deea 14%);
  --dt-shadow-menu: 0 18px 44px rgba(12,34,68,0.18);
  --dt-text-shadow: none;
  --dt-search-font: "Courier New", "Consolas", ui-monospace, monospace;
  --dt-search-bg: color-mix(in srgb, #ffffff 92%, #dfe6f2 8%);
  --dt-search-border: rgba(0,0,0,0.18);
  --dt-search-text: rgba(20,20,20,0.96);
  --dt-search-placeholder: rgba(20,20,20,0.45);
  --dt-search-focus-border: rgba(29,78,216,0.45);
  --dt-search-focus-ring: rgba(29,78,216,0.2);

  --dt-pill-bg: color-mix(in srgb, #ffffff 90%, #dfe5f1 10%);
  --dt-pill-border: color-mix(in srgb, #1f3a63 26%, #d9e0ec 74%);
  --dt-pill-text: #111827;
  --dt-pill-active-bg: color-mix(in srgb, #1d4ed8 22%, #ffffff 78%);
  --dt-pill-active-border: color-mix(in srgb, #1d4ed8 64%, #0f172a 36%);
  --dt-pill-active-text: #0b1224;

  --dt-pill-cat-bg: var(--dt-pill-bg);
  --dt-pill-cat-border: color-mix(in srgb, var(--dt-pill-border) 70%, #1d4ed8 30%);
  --dt-pill-cat-text: var(--dt-pill-text);
  --dt-pill-cat-bg-active: var(--dt-pill-active-bg);
  --dt-pill-cat-border-active: var(--dt-pill-active-border);
  --dt-pill-cat-text-active: var(--dt-pill-active-text);

  --dt-pill-preset-bg: color-mix(in srgb, var(--dt-pill-bg) 82%, rgba(215,38,56,0.10) 18%);
  --dt-pill-preset-border: color-mix(in srgb, var(--dt-pill-border) 60%, rgba(215,38,56,0.55) 40%);
  --dt-pill-preset-text: var(--dt-pill-text);
  --dt-pill-preset-bg-active: color-mix(in srgb, #d72638 20%, #ffffff 80%);
  --dt-pill-preset-border-active: color-mix(in srgb, #d72638 62%, #7f1d1d 38%);
  --dt-pill-preset-text-active: var(--dt-pill-active-text);

  /* Builder light-theme visual fix */
  --dt-builder-bg: var(--dt-bg);
  --dt-builder-surface: var(--dt-surface);
  --dt-builder-surface-strong: var(--dt-surface-2);
  --dt-builder-border: color-mix(in srgb, var(--dt-border) 70%, rgba(0,0,0,0.08) 30%);
  --dt-builder-text: var(--dt-text);
  --dt-builder-muted: var(--dt-muted);
  --dt-builder-accent: var(--dt-accent);

  font-family: Georgia, 'Times New Roman', serif;

  /* IMPORTANT: background MUST respect --dt-bg so Theme Editor “Page background” works from Newsroom. */
  background-color: var(--dt-bg);
  background-image:
    radial-gradient(1200px 800px at 50% -10%, rgba(29, 78, 216, 0.08), transparent 65%),
    radial-gradient(900px 700px at 80% 50%, rgba(220, 38, 38, 0.06), transparent 60%),
    radial-gradient(900px 700px at 20% 50%, rgba(29, 78, 216, 0.04), transparent 60%),
    /* subtle top glaze without hardcoding white base */
    linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.00) 70%);
  background-repeat: no-repeat;
  background-size: cover;
}

body.theme-newsroom .dt-topbar {
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  box-shadow: var(--dt-shadow);
}

body.theme-newsroom .dt-panel {
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  box-shadow: var(--dt-shadow);
}

body.theme-newsroom .dt-panel__header {
  background: var(--dt-surface-2);
  border-bottom: 1px solid var(--dt-divider);
}

body.theme-newsroom .dt-panel__header h2 {
  color: var(--dt-text) !important;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

body.theme-newsroom .dt-logo {
  background: linear-gradient(135deg, rgba(29,78,216,0.95), rgba(220,38,38,0.90)) !important;
  box-shadow: 0 0 16px rgba(29,78,216,0.4) !important;
}

body.theme-newsroom .dt-headline-source {
  color: var(--dt-source) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

body.theme-newsroom .dt-headline-ago {
  color: var(--dt-muted) !important;
}

body.theme-newsroom .dt-headline-title {
  color: var(--dt-headline-strong, var(--dt-text)) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  line-height: 1.4 !important;
  font-weight: 400;
}

body.theme-newsroom .dt-hud {
  background: linear-gradient(135deg, rgba(29,78,216,0.06), rgba(220,38,38,0.06));
  border: 1px solid rgba(0,0,0,0.12);
  color: rgba(70,70,70,0.90);
}

body.theme-newsroom .hud-live {
  color: rgba(220,38,38,0.95);
  font-weight: 700;
}

body.theme-newsroom .hud-online {
  color: rgba(29,78,216,0.95);
  font-weight: 700;
}

body.theme-newsroom .dt-zoom-slider,
body.theme-newsroom .dt-speed-slider,
body.theme-newsroom .dt-theme-picker,
body.theme-newsroom .dt-flow-toggle button {
  background: rgba(255,255,255,0.90);
  border: 1.5px solid rgba(0,0,0,0.15);
  color: rgba(20,20,20,0.95);
}

body.theme-newsroom .dt-headline:hover {
  background: linear-gradient(90deg, rgba(29,78,216,0.08), rgba(220,38,38,0.04)) !important;
  border-left: 3px solid rgba(220,38,38,0.6);
  padding-left: 8px;
}

body.theme-newsroom .zoom-range::-webkit-slider-thumb,
body.theme-newsroom .speed-range::-webkit-slider-thumb {
  background: linear-gradient(135deg, rgba(29,78,216,0.95), rgba(220,38,38,0.90)) !important;
  box-shadow: 0 0 10px rgba(29,78,216,0.4) !important;
}

body.theme-newsroom .zoom-range::-moz-range-thumb,
body.theme-newsroom .speed-range::-moz-range-thumb {
  background: linear-gradient(135deg, rgba(29,78,216,0.95), rgba(220,38,38,0.90)) !important;
  box-shadow: 0 0 10px rgba(29,78,216,0.4) !important;
}

body.theme-newsroom .dt-brand-tld {
  opacity: 0.4;
  color: rgba(220,38,38,0.7);
}

/* DOC_MODE: Keep the Newsroom landing light and crisp */
body.theme-newsroom.doc-mode #dt-doc{
  background: linear-gradient(180deg, #ffffff 0%, #f3f5fa 100%) !important;
}

body.theme-newsroom.doc-mode #dt-doc .dt-doc__monitor{
  background: #ffffff;
  border-color: color-mix(in srgb, #0f172a 16%, #d9e0ec 84%);
  box-shadow:
    0 14px 36px rgba(12,34,68,0.14),
    0 1px 0 rgba(255,255,255,0.7);
}

body.theme-newsroom.doc-mode #dt-doc .dt-doc__monitor::after{
  opacity: 0;
}

body.theme-newsroom.doc-mode #dt-doc .dt-doc__headline,
body.theme-newsroom.doc-mode #dt-doc .dt-doc__lead,
body.theme-newsroom.doc-mode #dt-doc .dt-doc__bullets,
body.theme-newsroom.doc-mode #dt-doc .dt-doc__value,
body.theme-newsroom.doc-mode #dt-doc .dt-doc__label,
body.theme-newsroom.doc-mode #dt-doc .dt-doc__tag,
body.theme-newsroom.doc-mode #dt-doc .dt-doc__btn{
  color: var(--dt-text);
  text-shadow: none;
  filter: none;
  opacity: 1;
}

body.theme-newsroom .dt-topbar,
body.theme-newsroom .dt-topbar *,
body.theme-newsroom .dt-mode-row,
body.theme-newsroom .dt-mode-row *,
body.theme-newsroom .dt-dd-menu,
body.theme-newsroom .dt-dd-menu *,
body.theme-newsroom .dt-menu-surface,
body.theme-newsroom .dt-menu-surface *,
body.theme-newsroom .dt-advanced-modal,
body.theme-newsroom .dt-advanced-modal *,
body.theme-newsroom .dt-advanced-shell,
body.theme-newsroom .dt-advanced-shell *,
body.theme-newsroom .dt-headline,
body.theme-newsroom .dt-headline *{
  text-shadow: none;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
}

/* -------------------------
   MINIMALIST
   ------------------------- */
body.theme-minimalist{
  --dt-bg: #090c12;
  --dt-surface: #0f131b;
  --dt-surface-2: #141a24;
  --dt-text: #e8edf6;
  --dt-muted: #94a4b9;
  --dt-accent: rgba(245, 158, 11, 0.92);
  --dt-source: rgba(124, 196, 255, 0.95);
  --dt-border: rgba(255,255,255,0.14);
  --dt-divider: rgba(255,255,255,0.10);
  --dt-shadow: 0 18px 38px rgba(0,0,0,0.6);
  --dt-hover: color-mix(in srgb, #161c27 82%, #ffffff 18%);
  --dt-active: color-mix(in srgb, #10151f 74%, #000000 26%);
  --dt-focus: #7cc4ff;
  --dt-surface-menu: color-mix(in srgb, #0f131b 88%, #1b2331 12%);
  --dt-surface-popover: color-mix(in srgb, #141a24 82%, #1f2937 18%);
  --dt-border-menu: rgba(255,255,255,0.14);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, #161c27 82%, #1f2937 18%);
  --dt-active-menu: color-mix(in srgb, #10151f 74%, #1b2331 26%);
  --dt-shadow-menu: 0 18px 38px rgba(0,0,0,0.6);

  background: var(--dt-bg) !important;
}

body.theme-minimalist .dt-brand-tld {
  opacity: 0.5;
}


/* -------------------------
   MINIMAL LIGHT
   ------------------------- */
body.theme-minimal-light{
  --dt-bg: #f7f9fe;
  --dt-surface: #ffffff;
  --dt-surface-2: #f1f4fb;
  --dt-text: #0f172a;
  --dt-muted: #4a5568;
  --dt-headline-strong: #0b1320;
  --dt-accent: rgba(124, 58, 237, 0.92);
  --dt-source: rgba(37, 99, 235, 0.95);
  --dt-border: rgba(0,0,0,0.12);
  --dt-divider: rgba(0,0,0,0.08);
  --dt-shadow: 0 18px 44px rgba(15,23,42,0.12);
  --dt-hover: color-mix(in srgb, #ffffff 93%, #dbe3f1 7%);
  --dt-active: color-mix(in srgb, #f1f4fb 82%, #d4dbe8 18%);
  --dt-focus: #2563eb;
  --dt-surface-menu: color-mix(in srgb, #ffffff 98%, #e8edf8 2%);
  --dt-surface-popover: color-mix(in srgb, #ffffff 94%, #e5ebf7 6%);
  --dt-border-menu: rgba(0,0,0,0.12);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, #ffffff 92%, #dce4f3 8%);
  --dt-active-menu: color-mix(in srgb, #eef2fb 86%, #d9e1f1 14%);
  --dt-shadow-menu: 0 18px 44px rgba(15,23,42,0.12);
  --dt-text-shadow: none;
  --dt-search-font: "Courier New", "Consolas", ui-monospace, monospace;
  --dt-search-bg: color-mix(in srgb, #ffffff 92%, #e2e8f4 8%);
  --dt-search-border: rgba(0,0,0,0.2);
  --dt-search-text: rgba(15,23,42,0.98);
  --dt-search-placeholder: rgba(15,23,42,0.45);
  --dt-search-focus-border: rgba(37,99,235,0.55);
  --dt-search-focus-ring: rgba(37,99,235,0.22);

  --dt-pill-bg: color-mix(in srgb, #ffffff 94%, #e5eaf5 6%);
  --dt-pill-border: color-mix(in srgb, #9ca3af 22%, #d8e2f2 78%);
  --dt-pill-text: #0f172a;
  --dt-pill-active-bg: color-mix(in srgb, #2563eb 18%, #ffffff 82%);
  --dt-pill-active-border: color-mix(in srgb, #2563eb 55%, #111827 45%);
  --dt-pill-active-text: #0b1629;

  --dt-pill-cat-bg: var(--dt-pill-bg);
  --dt-pill-cat-border: color-mix(in srgb, var(--dt-pill-border) 70%, #2563eb 30%);
  --dt-pill-cat-text: var(--dt-pill-text);
  --dt-pill-cat-bg-active: var(--dt-pill-active-bg);
  --dt-pill-cat-border-active: var(--dt-pill-active-border);
  --dt-pill-cat-text-active: var(--dt-pill-active-text);

  --dt-pill-preset-bg: color-mix(in srgb, var(--dt-pill-bg) 86%, rgba(14,165,233,0.10) 14%);
  --dt-pill-preset-border: color-mix(in srgb, var(--dt-pill-border) 62%, rgba(14,165,233,0.55) 38%);
  --dt-pill-preset-text: var(--dt-pill-text);
  --dt-pill-preset-bg-active: color-mix(in srgb, #0ea5e9 20%, #ffffff 80%);
  --dt-pill-preset-border-active: color-mix(in srgb, #0ea5e9 58%, #0f172a 42%);
  --dt-pill-preset-text-active: var(--dt-pill-active-text);

  background: var(--dt-bg) !important;

  /* Builder light-theme visual fix */
  --dt-builder-bg: var(--dt-bg);
  --dt-builder-surface: var(--dt-surface);
  --dt-builder-surface-strong: var(--dt-surface-2);
  --dt-builder-border: color-mix(in srgb, var(--dt-border) 75%, rgba(0,0,0,0.08) 25%);
  --dt-builder-text: var(--dt-text);
  --dt-builder-muted: var(--dt-muted);
  --dt-builder-accent: var(--dt-accent);
}

/* Make the tiny ".com" stay subtle on light */
body.theme-minimal-light .dt-brand-tld {
  opacity: 0.55;
}

/* DOC_MODE: Keep the Minimal Light landing bright and haze-free */
body.theme-minimal-light.doc-mode #dt-doc{
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fe 100%) !important;
}

body.theme-minimal-light.doc-mode #dt-doc .dt-doc__monitor{
  background: #ffffff;
  border-color: color-mix(in srgb, #0f172a 14%, #dbe3f2 86%);
  box-shadow:
    0 12px 32px rgba(15,23,42,0.12),
    0 1px 0 rgba(255,255,255,0.75);
}

body.theme-minimal-light.doc-mode #dt-doc .dt-doc__monitor::after{
  opacity: 0;
}

body.theme-minimal-light.doc-mode #dt-doc .dt-doc__headline,
body.theme-minimal-light.doc-mode #dt-doc .dt-doc__lead,
body.theme-minimal-light.doc-mode #dt-doc .dt-doc__bullets,
body.theme-minimal-light.doc-mode #dt-doc .dt-doc__value,
body.theme-minimal-light.doc-mode #dt-doc .dt-doc__label,
body.theme-minimal-light.doc-mode #dt-doc .dt-doc__tag,
body.theme-minimal-light.doc-mode #dt-doc .dt-doc__btn{
  color: var(--dt-text);
  text-shadow: none;
  filter: none;
  opacity: 1;
}

body.theme-minimal-light .dt-topbar,
body.theme-minimal-light .dt-topbar *,
body.theme-minimal-light .dt-mode-row,
body.theme-minimal-light .dt-mode-row *,
body.theme-minimal-light .dt-dd-menu,
body.theme-minimal-light .dt-dd-menu *,
body.theme-minimal-light .dt-menu-surface,
body.theme-minimal-light .dt-menu-surface *,
body.theme-minimal-light .dt-advanced-modal,
body.theme-minimal-light .dt-advanced-modal *,
body.theme-minimal-light .dt-advanced-shell,
body.theme-minimal-light .dt-advanced-shell *,
body.theme-minimal-light .dt-headline,
body.theme-minimal-light .dt-headline *{
  text-shadow: none;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
}

/* -------------------------
   MATRIX
   ------------------------- */
body.theme-matrix{
  --dt-bg: #020604;
  --dt-surface: #07140c;
  --dt-surface-2: #0b1c12;
  --dt-text: rgba(210,255,235,0.96);
  --dt-muted: rgba(140,230,190,0.82);
  --dt-accent: rgba(0, 210, 255, 0.92);
  --dt-source: rgba(180, 255, 130, 0.92);
  --dt-border: rgba(0,255,140,0.28);
  --dt-divider: rgba(0,255,140,0.22);
  --dt-shadow: 0 22px 50px rgba(0,0,0,0.65);
  --dt-hover: color-mix(in srgb, #0b1c12 86%, #2afc9b 14%);
  --dt-active: color-mix(in srgb, #07140c 76%, #000000 24%);
  --dt-focus: #34f0a3;
  --dt-surface-menu: color-mix(in srgb, #07140c 88%, #0f2618 12%);
  --dt-surface-popover: color-mix(in srgb, #0b1c12 82%, #123424 18%);
  --dt-border-menu: rgba(0,255,140,0.24);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, #0b1c12 78%, rgba(0,255,140,0.25) 22%);
  --dt-active-menu: color-mix(in srgb, #07140c 76%, rgba(0,255,140,0.18) 24%);
  --dt-shadow-menu: 0 22px 50px rgba(0,0,0,0.65);
  --dt-search-font: "Courier New", "Consolas", ui-monospace, monospace;
  --dt-search-bg: color-mix(in srgb, #07140c 82%, #000000 18%);
  --dt-search-border: rgba(0,255,140,0.35);
  --dt-search-text: rgba(210,255,235,0.98);
  --dt-search-placeholder: rgba(210,255,235,0.5);
  --dt-search-focus-border: rgba(0,255,140,0.75);
  --dt-search-focus-ring: rgba(0,255,140,0.35);

  font-family: 'Courier New', 'Consolas', monospace;

  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(0,255,140,0.14), transparent 60%),
    radial-gradient(900px 700px at 10% 60%, rgba(0,255,140,0.06), transparent 55%),
    var(--dt-bg) !important;
}

body.theme-matrix .dt-brand-tld {
  opacity: 0.5;
  color: rgba(0,255,140,0.7);
}

/* -------------------------
   TERMINAL (Amber Monochrome CRT)
   Perfect DOS VGA 437 font aesthetic
   ------------------------- */
body.theme-terminal{
  --dt-bg: #000000;
  --dt-surface: #0c0900;
  --dt-surface-2: #120f04;
  --dt-text: rgba(255,176,0,0.96);
  --dt-muted: rgba(255,176,0,0.68);
  --dt-accent: rgba(0, 255, 140, 0.88);
  --dt-source: rgba(255, 214, 128, 0.98);
  --dt-border: rgba(255,176,0,0.26);
  --dt-divider: rgba(255,176,0,0.20);
  --dt-shadow: 0 18px 44px rgba(0,0,0,0.7);
  --dt-hover: color-mix(in srgb, #120f04 82%, #ffb000 18%);
  --dt-active: color-mix(in srgb, #0c0900 74%, #000000 26%);
  --dt-focus: #ffb000;
  --dt-surface-menu: color-mix(in srgb, #0c0900 88%, #1a1508 12%);
  --dt-surface-popover: color-mix(in srgb, #120f04 82%, #241a0a 18%);
  --dt-border-menu: rgba(255,176,0,0.28);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, #120f04 78%, rgba(255,176,0,0.24) 22%);
  --dt-active-menu: color-mix(in srgb, #0c0900 76%, rgba(255,176,0,0.18) 24%);
  --dt-shadow-menu: 0 18px 44px rgba(0,0,0,0.7);
  --dt-search-font: "Consolas", "Courier New", "Perfect DOS VGA 437", monospace;
  --dt-search-bg: color-mix(in srgb, #0c0900 82%, #000000 18%);
  --dt-search-border: rgba(255,176,0,0.38);
  --dt-search-text: rgba(255,176,0,0.98);
  --dt-search-placeholder: rgba(255,176,0,0.5);
  --dt-search-focus-border: rgba(255,176,0,0.75);
  --dt-search-focus-ring: rgba(255,176,0,0.35);

  font-family: 'Consolas', 'Courier New', 'Perfect DOS VGA 437', monospace;
  letter-spacing: 0.5px;

  background:
    radial-gradient(900px 600px at 50% 50%, rgba(255,176,0,0.08), transparent 65%),
    var(--dt-bg) !important;
}

body.theme-terminal .dt-logo {
  background: linear-gradient(135deg, rgba(255,176,0,0.95), rgba(255,145,0,0.85)) !important;
  box-shadow: 0 0 20px rgba(255,176,0,0.5) !important;
}

body.theme-terminal .dt-headline-source {
  color: var(--dt-source) !important;
  text-shadow: none;
  font-weight: 700;
}

body.theme-terminal .dt-headline-title {
  text-shadow: none;
}

body.theme-terminal .hud-live,
body.theme-terminal .hud-online,
body.theme-terminal .hud-synced {
  color: rgba(255,176,0,0.98);
  text-shadow: none;
}

/* Scanline effect */
body.theme-terminal::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    transparent 1px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 3px
  );
  pointer-events: none;
  z-index: 9999;
  opacity: 0.45;
}

body.theme-terminal .dt-brand-tld {
  opacity: 0.5;
  color: rgba(255,176,0,0.7);
}

/* -------------------------
   LINUX SHELL (Authentic Ubuntu)
   Ubuntu Mono font + real terminal colors
   ------------------------- */
body.theme-linux{
  --dt-bg: #300924;
  --dt-surface: #38102c;
  --dt-surface-2: #401435;
  --dt-text: rgba(255, 255, 255, 0.96);
  --dt-muted: rgba(174, 167, 159, 0.85);
  --dt-accent: rgba(119, 33, 111, 0.92);
  --dt-source: rgba(221, 72, 20, 0.98);
  --dt-border: rgba(221, 72, 20, 0.28);
  --dt-divider: rgba(221, 72, 20, 0.22);
  --dt-shadow: 0 18px 44px rgba(0,0,0,0.65);
  --dt-hover: color-mix(in srgb, #401435 84%, #dd4814 16%);
  --dt-active: color-mix(in srgb, #38102c 74%, #000000 26%);
  --dt-focus: #dd4814;
  --dt-surface-menu: color-mix(in srgb, #38102c 88%, #4a193f 12%);
  --dt-surface-popover: color-mix(in srgb, #401435 82%, #552048 18%);
  --dt-border-menu: rgba(221,72,20,0.28);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, #401435 78%, rgba(221,72,20,0.24) 22%);
  --dt-active-menu: color-mix(in srgb, #38102c 76%, rgba(221,72,20,0.18) 24%);
  --dt-shadow-menu: 0 18px 44px rgba(0,0,0,0.65);
  --dt-search-font: "Ubuntu Mono", "DejaVu Sans Mono", "Consolas", monospace;
  --dt-search-bg: color-mix(in srgb, #38102c 84%, #2b051f 16%);
  --dt-search-border: rgba(221,72,20,0.35);
  --dt-search-text: rgba(255,255,255,0.96);
  --dt-search-placeholder: rgba(255,255,255,0.55);
  --dt-search-focus-border: rgba(221,72,20,0.75);
  --dt-search-focus-ring: rgba(221,72,20,0.32);

  font-family: 'Ubuntu Mono', 'DejaVu Sans Mono', 'Consolas', monospace;
  letter-spacing: 0.3px;

  background:
    radial-gradient(1000px 650px at 50% -5%, rgba(119, 33, 111, 0.4), transparent 60%),
    radial-gradient(800px 550px at 20% 50%, rgba(221, 72, 20, 0.12), transparent 55%),
    var(--dt-bg) !important;
}

body.theme-linux .dt-logo {
  background: linear-gradient(135deg, rgba(221,72,20,0.95), rgba(119,33,111,0.85)) !important;
  box-shadow: 0 0 20px rgba(221,72,20,0.4) !important;
}

body.theme-linux .dt-headline-source {
  color: var(--dt-source) !important;
  font-weight: 700;
  text-shadow: none;
}

body.theme-linux .hud-live,
body.theme-linux .hud-online,
body.theme-linux .hud-synced {
  color: rgba(221, 72, 20, 0.98);
  text-shadow: none;
}

body.theme-linux .dt-panel {
  background: rgba(44, 0, 30, 0.5);
  border-color: rgba(221, 72, 20, 0.2);
}

body.theme-linux .dt-brand-title {
  font-family: 'Ubuntu Mono', monospace !important;
}

body.theme-linux .dt-brand-tld {
  opacity: 0.5;
  color: rgba(221, 72, 20, 0.7);
}

/* -------------------------
   SUBLIME (Sublime Text UI Ode)
   Palette inspired by Sublime Text’s modern dark UI / Mariana-style scheme
   (deep blue-gray base + clean cyan/orange/pink accents)
   ------------------------- */
body.theme-sublime{
  /* Base surfaces */
  --dt-bg: #1f2430;            /* editor chrome / background */
  --dt-surface: #262c3a;
  --dt-surface-2: #2d3342;
  --dt-border: rgba(103, 115, 132, 0.35);
  --dt-divider: rgba(103, 115, 132, 0.30);
  --dt-text: rgba(205, 211, 222, 0.96);
  --dt-muted: rgba(140, 150, 165, 0.92);
  --dt-shadow: 0 22px 48px rgba(0,0,0,0.58);
  --dt-hover: color-mix(in srgb, #2d3342 82%, #5fb3b3 18%);
  --dt-active: color-mix(in srgb, #262c3a 76%, #0f1118 24%);
  --dt-focus: #5fb3b3;
  --dt-surface-menu: color-mix(in srgb, #262c3a 88%, #323a4a 12%);
  --dt-surface-popover: color-mix(in srgb, #2d3342 82%, #364052 18%);
  --dt-border-menu: color-mix(in srgb, rgba(103, 115, 132, 0.35) 80%, rgba(95, 179, 179, 0.35) 20%);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, #2d3342 80%, rgba(95, 179, 179, 0.22) 20%);
  --dt-active-menu: color-mix(in srgb, #262c3a 76%, rgba(103, 115, 132, 0.30) 24%);
  --dt-shadow-menu: 0 22px 48px rgba(0,0,0,0.58);
  --dt-search-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --dt-search-bg: color-mix(in srgb, #2d3342 84%, #1a1e28 16%);
  --dt-search-border: rgba(103, 115, 132, 0.45);
  --dt-search-text: rgba(205, 211, 222, 0.96);
  --dt-search-placeholder: rgba(140, 150, 165, 0.7);
  --dt-search-focus-border: rgba(95, 179, 179, 0.7);
  --dt-search-focus-ring: rgba(95, 179, 179, 0.35);

  /* Theme accents (used in scoped overrides below) */
  --dt-accent-pink: #ec5f67;
  --dt-accent-cyan: #5fb3b3;
  --dt-accent-blue: #6699cc;
  --dt-accent-purple: #c594c5;
  --dt-accent-orange: #f99157;
  --dt-accent-yellow: #fac863;
  --dt-accent-green: #99c794;
  --dt-accent: var(--dt-accent-cyan);
  --dt-source: var(--dt-accent-yellow);

  font-family: Consolas, Monaco, Menlo, "Ubuntu Mono", monospace;
  letter-spacing: 0.15px;

  background:
    radial-gradient(1100px 680px at 50% -5%, rgba(95, 179, 179, 0.10), transparent 60%),
    radial-gradient(900px 620px at 20% 45%, rgba(249, 145, 87, 0.10), transparent 55%),
    radial-gradient(900px 620px at 82% 60%, rgba(236, 95, 103, 0.10), transparent 55%),
    var(--dt-bg) !important;
}

/* Keep headline links looking like the UI (no default blue/underline leak) */
body.theme-sublime a{
  color: inherit;
  text-decoration: none;
}
body.theme-sublime a:hover{
  text-decoration: none;
}

/* Brand / logo */
body.theme-sublime .dt-logo {
  background: linear-gradient(135deg, var(--dt-accent-orange), var(--dt-accent-pink)) !important;
  box-shadow: 0 0 18px rgba(103,115,132,0.32), 0 0 6px rgba(95,179,179,0.14) !important;
}

/* Panels */
body.theme-sublime .dt-panel {
  background: color-mix(in srgb, var(--dt-surface) 92%, rgba(255,255,255,0.04) 8%);
  border-color: var(--dt-border);
  box-shadow:
    var(--dt-shadow),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Panel titles: Sublime UI accent */
body.theme-sublime .dt-panel__header h2{
  color: var(--dt-accent-cyan) !important;
}

/* Topbar + dropdowns: match editor chrome */
body.theme-sublime .dt-topbar{
  background: var(--dt-surface-2);
  border-color: var(--dt-border);
}

body.theme-sublime .dt-dd-btn,
body.theme-sublime .dt-zoom-slider,
body.theme-sublime .dt-speed-slider,
body.theme-sublime .dt-theme-picker,
body.theme-sublime .dt-flow-toggle button{
  background: var(--dt-surface-2);
  border-color: var(--dt-border);
  color: var(--dt-text);
}

body.theme-sublime .dt-dd-menu,
body.theme-sublime .dt-menu-surface{
  background: color-mix(in srgb, var(--dt-surface-2) 94%, #ffffff 6%);
  border-color: var(--dt-border);
}

/* Headline accents (Sublime-ish) */
body.theme-sublime .dt-headline-source {
  color: var(--dt-source) !important;
  font-weight: 700;
}

body.theme-sublime .dt-headline-ago{
  color: var(--dt-accent-purple) !important;
}

body.theme-sublime .dt-headline:hover{
  background: linear-gradient(90deg, rgba(95,179,179,0.10), rgba(249,145,87,0.06)) !important;
  border-left: 3px solid rgba(95,179,179,0.55);
}

/* HUD: use “syntax highlight” accents */
body.theme-sublime .hud-live {
  color: var(--dt-accent-pink, #ec5f67);
  text-shadow: none;
}

body.theme-sublime .hud-online {
  color: var(--dt-accent-cyan, #5fb3b3);
  text-shadow: none;
}

body.theme-sublime .hud-synced {
  color: var(--dt-accent-green, #99c794);
  text-shadow: none;
}

/* Slider thumbs */
body.theme-sublime .zoom-range::-webkit-slider-thumb,
body.theme-sublime .speed-range::-webkit-slider-thumb{
  background: linear-gradient(135deg, var(--dt-accent-cyan), var(--dt-accent-orange)) !important;
  box-shadow: 0 0 10px rgba(95,179,179,0.30) !important;
}

body.theme-sublime .zoom-range::-moz-range-thumb,
body.theme-sublime .speed-range::-moz-range-thumb{
  background: linear-gradient(135deg, var(--dt-accent-cyan), var(--dt-accent-orange)) !important;
  box-shadow: 0 0 10px rgba(95,179,179,0.30) !important;
}

body.theme-sublime .dt-brand-tld {
  opacity: 0.55;
  color: rgba(95, 179, 179, 0.70);
}


/* -------------------------
   BIOS (Authentic VGA Text Mode)
   Perfect DOS VGA + authentic BIOS cyan/yellow
   ------------------------- */
body.theme-bios{
  --dt-bg: #00112f;
  --dt-surface: #03183f;
  --dt-surface-2: #07214f;
  --dt-text: rgba(0, 212, 255, 0.96);
  --dt-muted: rgba(100, 180, 255, 0.8);
  --dt-accent: rgba(0, 153, 255, 0.92);
  --dt-source: rgba(255, 255, 100, 0.98);
  --dt-border: rgba(0, 212, 255, 0.32);
  --dt-divider: rgba(0, 212, 255, 0.26);
  --dt-shadow: 0 22px 50px rgba(0,0,0,0.7);
  --dt-hover: color-mix(in srgb, #07214f 84%, #00d4ff 16%);
  --dt-active: color-mix(in srgb, #03183f 74%, #000000 26%);
  --dt-focus: #00d4ff;
  --dt-surface-menu: color-mix(in srgb, #03183f 88%, #0a275a 12%);
  --dt-surface-popover: color-mix(in srgb, #07214f 82%, #0f2f6f 18%);
  --dt-border-menu: rgba(0, 212, 255, 0.32);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, #07214f 78%, rgba(0,212,255,0.22) 22%);
  --dt-active-menu: color-mix(in srgb, #03183f 76%, rgba(0,212,255,0.18) 24%);
  --dt-shadow-menu: 0 22px 50px rgba(0,0,0,0.7);

  font-family: 'Perfect DOS VGA 437', 'Consolas', 'Courier New', monospace;
  letter-spacing: 1px;

  background:
    radial-gradient(1150px 720px at 50% -12%, rgba(32, 103, 178, 0.25), transparent 62%),
    radial-gradient(950px 650px at 50% 50%, rgba(0, 153, 255, 0.08), transparent 56%),
    linear-gradient(180deg, rgba(0, 20, 60, 0.5) 0%, transparent 100%),
    var(--dt-bg) !important;
}

body.theme-bios .dt-logo {
  background: linear-gradient(135deg, rgba(0,212,255,0.95), rgba(0,153,255,0.85)) !important;
  box-shadow: 0 0 24px rgba(0,212,255,0.6) !important;
}

body.theme-bios .dt-headline-source {
  color: var(--dt-source) !important;
  font-weight: 700;
  text-shadow: none;
}

body.theme-bios .dt-headline-title {
  text-shadow: none;
}

body.theme-bios .dt-panel {
  background: rgba(0, 17, 47, 0.6);
  box-shadow: 
    0 10px 24px rgba(0,0,0,0.7),
    inset 0 0 30px rgba(0, 153, 255, 0.05);
}

body.theme-bios .hud-live,
body.theme-bios .hud-online,
body.theme-bios .hud-synced {
  color: rgba(0, 255, 255, 0.98);
  text-shadow: none;
}

body.theme-bios .dt-brand-title {
  text-shadow: none;
  letter-spacing: 2px;
}

body.theme-bios .dt-brand-tld {
  opacity: 0.5;
  color: rgba(255, 255, 100, 0.7);
}

/* Scanline effect for BIOS authenticity */
body.theme-bios::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.12) 0px,
    transparent 1px,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 3px
  );
  pointer-events: none;
  z-index: 9999;
  opacity: 0.50;
}

/* -------------------------
   CYBERPUNK (Neon Dystopia)
   Hot pink + electric cyan + futuristic font
   ------------------------- */
body.theme-cyberpunk{
  --dt-bg: #0a0014;
  --dt-surface: #130722;
  --dt-surface-2: #1b0b2f;
  --dt-text: #eaf9ff;
  --dt-muted: #c4b4e5;
  --dt-accent: rgba(205, 255, 0, 0.92);
  --dt-accent2: rgba(255, 0, 128, 0.92);
  --dt-source: rgba(255, 0, 128, 0.98);
  --dt-border: rgba(255, 0, 128, 0.32);
  --dt-divider: rgba(0, 255, 255, 0.30);
  --dt-shadow: 0 26px 54px rgba(0,0,0,0.65);
  --dt-hover: color-mix(in srgb, #1b0b2f 82%, #ff73d0 18%);
  --dt-active: color-mix(in srgb, #130722 74%, #000000 26%);
  --dt-focus: #26e3ff;
  --dt-surface-menu: color-mix(in srgb, #130722 88%, #241034 12%);
  --dt-surface-popover: color-mix(in srgb, #1b0b2f 82%, #2a1442 18%);
  --dt-border-menu: color-mix(in srgb, rgba(255, 0, 128, 0.32) 70%, rgba(0, 255, 255, 0.24) 30%);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, #1b0b2f 78%, rgba(255, 0, 128, 0.26) 22%);
  --dt-active-menu: color-mix(in srgb, #130722 76%, rgba(0, 255, 255, 0.20) 24%);
  --dt-shadow-menu: 0 26px 54px rgba(0,0,0,0.65);
  --dt-search-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --dt-search-bg: color-mix(in srgb, #130722 82%, #05000b 18%);
  --dt-search-border: rgba(0, 255, 255, 0.32);
  --dt-search-text: #eaf9ff;
  --dt-search-placeholder: rgba(196,180,229,0.6);
  --dt-search-focus-border: rgba(0, 255, 255, 0.6);
  --dt-search-focus-ring: rgba(0, 255, 255, 0.3);
  --dt-headline-strong: #6be8ff;
  --dt-headline-soft: color-mix(in srgb, var(--dt-headline-strong) 78%, #eaf9ff 22%);
  --dt-headline-glow: 0 0 12px rgba(107, 232, 255, 0.18);
  --dt-headline-soft-glow: 0 0 10px rgba(107, 232, 255, 0.12);

  font-family: 'Rajdhani', 'Orbitron', 'Exo 2', system-ui, sans-serif;
  letter-spacing: 0.8px;
  font-weight: 500;

  background:
    radial-gradient(1200px 750px at 50% -8%, rgba(255, 0, 128, 0.18), transparent 60%),
    radial-gradient(1000px 650px at 15% 50%, rgba(58, 10, 77, 0.5), transparent 58%),
    radial-gradient(900px 600px at 85% 45%, rgba(0, 255, 255, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(10, 0, 20, 0.9) 0%, #0a0014 100%),
    var(--dt-bg) !important;
}

body.theme-cyberpunk .dt-logo {
  background: linear-gradient(135deg, rgba(255,0,128,0.95), rgba(0,255,255,0.85)) !important;
  box-shadow: 
    0 0 20px rgba(255,0,128,0.7),
    0 0 40px rgba(0,255,255,0.4) !important;
}

body.theme-cyberpunk .dt-headline-source {
  color: var(--dt-source) !important;
  font-weight: 700;
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

body.theme-cyberpunk .dt-headline-title {
  color: var(--dt-headline-strong);
  text-shadow: var(--dt-headline-glow, none);
}

body.theme-cyberpunk .dt-panel__body .dt-headline:not(:first-child) .dt-headline-title{
  color: var(--dt-headline-soft, var(--dt-headline-strong));
  text-shadow: var(--dt-headline-soft-glow, var(--dt-headline-glow, none));
  opacity: 0.92;
}

body.theme-cyberpunk .dt-panel {
  background: color-mix(in srgb, var(--dt-surface) 90%, rgba(255, 0, 128, 0.08) 10%);
  border-color: var(--dt-border);
  box-shadow: 
    var(--dt-shadow),
    inset 0 0 40px rgba(255, 0, 128, 0.08);
}

body.theme-cyberpunk .hud-live {
  color: rgba(255, 0, 128, 0.98);
  text-shadow: none;
}

body.theme-cyberpunk .hud-online {
  color: rgba(0, 255, 255, 0.98);
  text-shadow: none;
}

body.theme-cyberpunk .hud-synced {
  color: rgba(176, 255, 0, 0.98);
  text-shadow: none;
}

body.theme-cyberpunk .dt-brand-title {
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 2px;
}

body.theme-cyberpunk .dt-headline:hover {
  background: rgba(255, 0, 128, 0.15) !important;
  box-shadow: 0 0 20px rgba(255, 0, 128, 0.2);
}

body.theme-cyberpunk .dt-brand-tld {
  opacity: 0.5;
  color: rgba(0, 255, 255, 0.7);
}

/* Grid overlay for cyberpunk authenticity */
body.theme-cyberpunk::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,0,128,0.03) 2px, rgba(255,0,128,0.03) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,255,255,0.03) 2px, rgba(0,255,255,0.03) 4px);
  pointer-events: none;
  z-index: 9999;
  opacity: 0.6;
}

/* =====================================================
   Support banner theme awareness
   ===================================================== */

body.theme-newsroom{
  --dt-support-bg: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  --dt-support-border: rgba(0,0,0,0.12);
  --dt-support-divider: rgba(0,0,0,0.08);
  --dt-support-text: rgba(20,20,20,0.94);
  --dt-support-focus: rgba(29,78,216,0.85);
}

body.theme-minimal-light{
  --dt-support-bg: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  --dt-support-border: rgba(0,0,0,0.10);
  --dt-support-divider: rgba(0,0,0,0.06);
  --dt-support-text: rgba(24,24,24,0.94);
  --dt-support-focus: rgba(59,130,246,0.85);
}

body.theme-minimalist{
  --dt-support-bg: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  --dt-support-border: rgba(255,255,255,0.10);
  --dt-support-divider: rgba(255,255,255,0.14);
  --dt-support-focus: rgba(255,255,255,0.9);
}

body.theme-matrix,
body.theme-terminal{
  --dt-support-bg: linear-gradient(180deg, rgba(0,30,0,0.92), rgba(0,18,0,0.88));
  --dt-support-border: rgba(0,255,140,0.24);
  --dt-support-divider: rgba(0,255,110,0.28);
  --dt-support-text: rgba(193, 255, 219, 0.95);
  --dt-support-focus: rgba(77,255,176,0.9);
}

body.theme-cyberpunk,
body.theme-twitch{
  --dt-support-bg: linear-gradient(180deg, rgba(70,20,120,0.65), rgba(18,8,30,0.92));
  --dt-support-border: rgba(255,0,128,0.36);
  --dt-support-divider: rgba(0,212,255,0.38);
  --dt-support-text: rgba(235,235,255,0.94);
  --dt-support-focus: rgba(0,212,255,0.9);
}

body.theme-sublime,
body.theme-linux,
body.theme-bios{
  --dt-support-bg: linear-gradient(180deg, rgba(16,20,26,0.9), rgba(10,12,18,0.9));
  --dt-support-border: rgba(255,255,255,0.14);
  --dt-support-divider: rgba(255,255,255,0.18);
  --dt-support-text: rgba(234,238,245,0.94);
  --dt-support-focus: rgba(0,212,255,0.9);
}


/* =====================================================
   DTRP SAFE — Theme palette-linked pill selected colors
   Goal: make selected Category + Preset pills visibly different,
   and truly theme-dependent (no fallback accent leakage).
   ===================================================== */

body.theme-newsroom{
  /* Blue for category, Red for preset (matches newsroom blue/red accents) */
  --dt-pill-cat-bg-active: var(--dt-pill-active-bg);
  --dt-pill-cat-border-active: var(--dt-pill-active-border);
  --dt-pill-cat-text-active: var(--dt-pill-active-text);

  --dt-pill-preset-bg-active: color-mix(in srgb, #d72638 20%, #ffffff 80%);
  --dt-pill-preset-border-active: color-mix(in srgb, #d72638 62%, #7f1d1d 38%);
  --dt-pill-preset-text-active: var(--dt-pill-active-text);
}

body.theme-minimal-light{
  /* Subtle but clearly visible on light surfaces */
  --dt-pill-cat-bg-active: var(--dt-pill-active-bg);
  --dt-pill-cat-border-active: var(--dt-pill-active-border);
  --dt-pill-cat-text-active: var(--dt-pill-active-text);

  --dt-pill-preset-bg-active: color-mix(in srgb, #0ea5e9 20%, #ffffff 80%);
  --dt-pill-preset-border-active: color-mix(in srgb, #0ea5e9 58%, #0f172a 42%);
  --dt-pill-preset-text-active: var(--dt-pill-active-text);
}

body.theme-minimalist{
  --dt-pill-cat-bg-active: color-mix(in srgb, var(--dt-accent) 44%, var(--dt-panel) 56%);
  --dt-pill-cat-border-active: color-mix(in srgb, var(--dt-accent) 70%, var(--dt-panelBorder) 30%);
  --dt-pill-cat-text-active: var(--dt-text);

  --dt-pill-preset-bg-active: color-mix(in srgb, var(--dt-accent) 28%, var(--dt-panel) 72%);
  --dt-pill-preset-border-active: color-mix(in srgb, var(--dt-accent) 58%, var(--dt-panelBorder) 42%);
  --dt-pill-preset-text-active: var(--dt-text);
}

body.theme-matrix{
  --dt-pill-cat-bg-active: color-mix(in srgb, var(--dt-accent) 46%, var(--dt-panel) 54%);
  --dt-pill-cat-border-active: color-mix(in srgb, var(--dt-accent) 74%, var(--dt-panelBorder) 26%);
  --dt-pill-cat-text-active: var(--dt-text);

  --dt-pill-preset-bg-active: color-mix(in srgb, var(--dt-accent) 30%, var(--dt-panel) 70%);
  --dt-pill-preset-border-active: color-mix(in srgb, var(--dt-accent) 60%, var(--dt-panelBorder) 40%);
  --dt-pill-preset-text-active: var(--dt-text);
}

body.theme-terminal{
  --dt-pill-cat-bg-active: color-mix(in srgb, var(--dt-accent) 44%, var(--dt-panel) 56%);
  --dt-pill-cat-border-active: color-mix(in srgb, var(--dt-accent) 70%, var(--dt-panelBorder) 30%);
  --dt-pill-cat-text-active: var(--dt-text);

  --dt-pill-preset-bg-active: color-mix(in srgb, var(--dt-accent) 28%, var(--dt-panel) 72%);
  --dt-pill-preset-border-active: color-mix(in srgb, var(--dt-accent) 58%, var(--dt-panelBorder) 42%);
  --dt-pill-preset-text-active: var(--dt-text);
}

body.theme-linux{
  --dt-pill-cat-bg-active: color-mix(in srgb, var(--dt-accent) 40%, var(--dt-panel) 60%);
  --dt-pill-cat-border-active: color-mix(in srgb, var(--dt-accent) 66%, var(--dt-panelBorder) 34%);
  --dt-pill-cat-text-active: var(--dt-text);

  --dt-pill-preset-bg-active: color-mix(in srgb, var(--dt-accent) 26%, var(--dt-panel) 74%);
  --dt-pill-preset-border-active: color-mix(in srgb, var(--dt-accent) 54%, var(--dt-panelBorder) 46%);
  --dt-pill-preset-text-active: var(--dt-text);
}

/* Themes that previously lacked --dt-accent: define accents + palette-linked selection colors */
body.theme-bios{
  --dt-accent: rgba(0, 153, 255, 0.92);
  --dt-source: rgba(255, 255, 100, 0.98);

  --dt-pill-cat-bg-active: rgba(0, 153, 255, 0.18);
  --dt-pill-cat-border-active: rgba(0, 153, 255, 0.58);
  --dt-pill-cat-text-active: var(--dt-text);

  --dt-pill-preset-bg-active: rgba(0, 153, 255, 0.12);
  --dt-pill-preset-border-active: rgba(0, 153, 255, 0.48);
  --dt-pill-preset-text-active: var(--dt-text);
}

body.theme-cyberpunk{
  --dt-accent: rgba(205, 255, 0, 0.92);
  --dt-accent2: rgba(255, 0, 128, 0.92);
  --dt-source: rgba(255, 0, 128, 0.98);

  /* Magenta category, Cyan preset (matches cyberpunk palette) */
  --dt-pill-cat-bg-active: rgba(255, 0, 128, 0.18);
  --dt-pill-cat-border-active: rgba(255, 0, 128, 0.60);
  --dt-pill-cat-text-active: var(--dt-text);

  --dt-pill-preset-bg-active: rgba(0, 255, 255, 0.14);
  --dt-pill-preset-border-active: rgba(0, 255, 255, 0.56);
  --dt-pill-preset-text-active: var(--dt-text);
}


body.theme-twitch{
  --dt-accent: rgba(145, 70, 255, 0.95); /* Twitch purple */
  --dt-accent2: rgba(0, 212, 255, 0.92); /* neon cyan used in the theme */

  /* Purple category, Cyan preset */
  --dt-pill-cat-bg-active: rgba(145, 70, 255, 0.18);
  --dt-pill-cat-border-active: rgba(145, 70, 255, 0.60);
  --dt-pill-cat-text-active: var(--dt-support-text, var(--dt-text));

  --dt-pill-preset-bg-active: rgba(0, 212, 255, 0.14);
  --dt-pill-preset-border-active: rgba(0, 212, 255, 0.56);
  --dt-pill-preset-text-active: var(--dt-support-text, var(--dt-text));
}