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

/* Import Google Fonts for authentic typography */
@import url('https://fonts.googleapis.com/css2?family=Georgia&family=Ubuntu+Mono:wght@400;700&display=swap');

/* Default fallback */
:root{
  --dt-radius: 6px;
  --dt-bg: #0b0f16;
  --dt-panel: rgba(255,255,255,0.04);
  --dt-panelBorder: rgba(255,255,255,0.08);
  --dt-text: rgba(255,255,255,0.92);
  --dt-dim: rgba(255,255,255,0.6);
}

/* -------------------------
   NEWSROOM (Professional Newspaper)
   Georgia font + clean serif aesthetic with bold red/blue accents
   ------------------------- */
body.theme-newsroom{
  --dt-bg: #fafafa;
  --dt-panel: rgba(255,255,255,0.98);
  --dt-panelBorder: rgba(0,0,0,0.15);
  --dt-text: rgba(20,20,20,0.95);
  --dt-dim: rgba(70,70,70,0.85);
  --dt-accent: rgba(220, 38, 38, 0.92);

  font-family: Georgia, 'Times New Roman', serif;
  
  background:
    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%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
}

body.theme-newsroom .dt-topbar {
  background: rgba(255,255,255,0.98);
  border: 2px solid rgba(220,38,38,0.15);
  border-bottom: 3px solid rgba(29,78,216,0.2);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

body.theme-newsroom .dt-panel {
  background: rgba(255,255,255,0.98);
  border: 2px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

body.theme-newsroom .dt-panel__header {
  background: linear-gradient(90deg, rgba(29,78,216,0.04) 0%, rgba(220,38,38,0.04) 100%);
  border-bottom: 2px solid rgba(0,0,0,0.08);
}

body.theme-newsroom .dt-panel__header h2 {
  color: rgba(20,20,20,0.95) !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: rgba(220,38,38,0.95) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

body.theme-newsroom .dt-headline-ago {
  color: rgba(70,70,70,0.75) !important;
}

body.theme-newsroom .dt-headline-title {
  color: rgba(20,20,20,0.95) !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-search,
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);
}

/* -------------------------
   MINIMALIST
   ------------------------- */
body.theme-minimalist{
  --dt-bg: #0b0b0c;
  --dt-panel: rgba(255,255,255,0.03);
  --dt-panelBorder: rgba(255,255,255,0.10);
  --dt-text: rgba(255,255,255,0.92);
  --dt-dim: rgba(255,255,255,0.62);
  --dt-accent: rgba(124, 196, 255, 0.95);

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

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


/* -------------------------
   MINIMAL LIGHT
   ------------------------- */
body.theme-minimal-light{
  --dt-bg: #f6f6f8;
  --dt-panel: rgba(0,0,0,0.04);
  --dt-panelBorder: rgba(0,0,0,0.10);
  --dt-text: rgba(0,0,0,0.88);
  --dt-dim: rgba(0,0,0,0.58);
  --dt-accent: rgba(29, 78, 216, 0.92);

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

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

/* -------------------------
   MATRIX
   ------------------------- */
body.theme-matrix{
  --dt-bg: #020705;
  --dt-panel: rgba(0, 255, 140, 0.06);
  --dt-panelBorder: rgba(0, 255, 140, 0.22);
  --dt-text: rgba(210,255,235,0.92);
  --dt-dim: rgba(160,255,210,0.62);
  --dt-accent: rgba(0, 255, 140, 0.92);

  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-panel: rgba(255,176,0,0.04);
  --dt-panelBorder: rgba(255,176,0,0.18);
  --dt-text: rgba(255,176,0,0.96);
  --dt-dim: rgba(255,176,0,0.68);
  --dt-accent: rgba(255, 176, 0, 0.92);

  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: rgba(255,255,255,0.98) !important;
  text-shadow: 0 0 8px rgba(255,176,0,0.4);
  font-weight: 700;
}

body.theme-terminal .dt-headline-title {
  text-shadow: 0 0 4px rgba(255,176,0,0.2);
}

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

/* 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-panel: rgba(255, 255, 255, 0.04);
  --dt-panelBorder: rgba(221, 72, 20, 0.25);
  --dt-text: rgba(255, 255, 255, 0.96);
  --dt-dim: rgba(174, 167, 159, 0.85);
  --dt-accent: rgba(221, 72, 20, 0.92);

  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: rgba(221, 72, 20, 0.98) !important;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(221, 72, 20, 0.2);
}

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

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-panel: rgba(35, 42, 54, 0.78);
  --dt-panelBorder: rgba(103, 115, 132, 0.35);

  /* Text */
  --dt-text: rgba(205, 211, 222, 0.96);
  --dt-dim: rgba(140, 150, 165, 0.92);

  /* 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;

  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: rgba(35, 42, 54, 0.80);
  border-color: rgba(103, 115, 132, 0.35);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.45),
    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: rgba(28, 33, 43, 0.78);
  border-color: rgba(103, 115, 132, 0.32);
}

body.theme-sublime .dt-dd-btn,
body.theme-sublime .dt-search,
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: rgba(28, 33, 43, 0.78);
  border-color: rgba(103, 115, 132, 0.32);
  color: rgba(205, 211, 222, 0.96);
}

body.theme-sublime .dt-dd-menu,
body.theme-sublime .dt-menu-surface{
  background: rgba(28, 33, 43, 0.92);
  border-color: rgba(103, 115, 132, 0.36);
}

/* Headline accents (Sublime-ish) */
body.theme-sublime .dt-headline-source {
  color: var(--dt-accent-yellow) !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: 0 0 10px rgba(236, 95, 103, 0.28);
}

body.theme-sublime .hud-online {
  color: var(--dt-accent-cyan, #5fb3b3);
  text-shadow: 0 0 10px rgba(95, 179, 179, 0.24);
}

body.theme-sublime .hud-synced {
  color: var(--dt-accent-green, #99c794);
  text-shadow: 0 0 10px rgba(153, 199, 148, 0.22);
}

/* 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-panel: rgba(0, 153, 255, 0.05);
  --dt-panelBorder: rgba(0, 212, 255, 0.28);
  --dt-text: rgba(0, 212, 255, 0.96);
  --dt-dim: rgba(100, 180, 255, 0.8);

  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: rgba(255, 255, 100, 0.98) !important;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 255, 100, 0.3);
}

body.theme-bios .dt-headline-title {
  text-shadow: 0 0 4px rgba(0, 212, 255, 0.2);
}

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: 0 0 12px rgba(0, 255, 255, 0.5);
}

body.theme-bios .dt-brand-title {
  text-shadow: 0 0 14px rgba(0, 212, 255, 0.5);
  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-panel: rgba(48, 25, 52, 0.65);
  --dt-panelBorder: rgba(255, 0, 128, 0.35);
  --dt-text: rgba(0, 255, 255, 0.96);
  --dt-dim: rgba(176, 255, 0, 0.75);

  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: rgba(255, 0, 128, 0.98) !important;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255, 0, 128, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

body.theme-cyberpunk .dt-headline-title {
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
}

body.theme-cyberpunk .dt-panel {
  background: rgba(48, 25, 52, 0.75);
  border-color: rgba(255, 0, 128, 0.4);
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.8),
    inset 0 0 40px rgba(255, 0, 128, 0.08);
}

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

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

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

body.theme-cyberpunk .dt-brand-title {
  text-shadow: 0 0 18px rgba(255, 0, 128, 0.6);
  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);
}

/* -------------------------
   XMAS (Festive Broadcast Control)
   Rich crimson/emerald glow, incandescent lights, and high-visibility snow
   ------------------------- */
body.theme-xmas{
  --dt-bg: #030a0d;
  --dt-panel: rgba(8, 16, 18, 0.95);
  --dt-panelBorder: rgba(244, 211, 94, 0.38);
  --dt-text: #e9f8f2;
  --dt-dim: rgba(233, 248, 242, 0.72);

  font-family: 'Ubuntu Mono', 'Courier New', monospace;
  color: var(--dt-text);

  background-color: var(--dt-bg) !important;
  background-image:
    radial-gradient(1400px 900px at 14% 0%, rgba(214, 40, 40, 0.18), transparent 55%),
    radial-gradient(1200px 900px at 86% 12%, rgba(47, 191, 113, 0.18), transparent 58%),
    radial-gradient(1200px 960px at 50% 120%, rgba(5, 18, 18, 0.7), transparent 65%),
    linear-gradient(180deg, #050c10 0%, #03080b 68%, #050c10 100%) !important;
  background-blend-mode:
    screen,
    screen,
    normal,
    normal;
}

body.theme-xmas .dt-topbar {
  background: linear-gradient(90deg, rgba(6, 16, 16, 0.94), rgba(4, 12, 13, 0.94));
  border: 2px solid rgba(244, 211, 94, 0.45);
  border-bottom: 3px solid rgba(214, 40, 40, 0.55);
  box-shadow:
    0 0 0 2px rgba(47, 191, 113, 0.28),
    0 0 0 4px rgba(244, 211, 94, 0.20),
    0 12px 28px rgba(0, 0, 0, 0.55);
}

body.theme-xmas .dt-panel {
  background: linear-gradient(180deg, rgba(7, 15, 17, 0.96), rgba(3, 8, 9, 0.95));
  border: 1.5px solid rgba(244, 211, 94, 0.42);
  box-shadow:
    0 0 0 2px rgba(47, 191, 113, 0.30),
    0 0 0 4px rgba(214, 40, 40, 0.22),
    0 12px 26px rgba(0, 0, 0, 0.46);
}

body.theme-xmas .dt-panel__header {
  background:
    linear-gradient(180deg, rgba(7, 18, 18, 0.95), rgba(4, 10, 12, 0.96)),
    radial-gradient(260px 180px at 0% 0%, rgba(47, 191, 113, 0.10), transparent 70%),
    radial-gradient(260px 180px at 100% 0%, rgba(214, 40, 40, 0.12), transparent 70%);
  background-blend-mode: screen, screen, normal;
  border-bottom: 2px solid #f4d35e;
  box-shadow:
    inset 0 -1px 0 rgba(244, 211, 94, 0.55),
    0 6px 12px rgba(0, 0, 0, 0.35);
}

body.theme-xmas .dt-panel__header h2 {
  color: #f8fffa !important;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(244, 211, 94, 0.25);
}

body.theme-xmas .dt-logo {
  background: linear-gradient(135deg, rgba(47, 191, 113, 0.96), rgba(214, 40, 40, 0.94)) !important;
  box-shadow:
    0 0 0 2px rgba(244, 211, 94, 0.55) !important,
    0 0 0 4px rgba(47, 191, 113, 0.30) !important,
    0 12px 22px rgba(0, 0, 0, 0.52) !important;
}

body.theme-xmas .dt-headline-source {
  color: rgba(214, 40, 40, 0.98) !important;
  font-weight: 800;
  letter-spacing: 0.35px;
}

body.theme-xmas .dt-headline-ago {
  color: rgba(233, 248, 242, 0.76) !important;
}

body.theme-xmas .dt-headline-title {
  color: #e9f8f2 !important;
  line-height: 1.38 !important;
  font-weight: 400;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
}

body.theme-xmas .dt-headline:hover {
  background: linear-gradient(90deg, rgba(47, 191, 113, 0.24), rgba(244, 211, 94, 0.20), rgba(214, 40, 40, 0.24)) !important;
  border-left: 3px solid rgba(214, 40, 40, 0.82);
  padding-left: 8px;
  box-shadow:
    0 0 0 2px rgba(77, 208, 225, 0.28),
    inset 0 0 0 1px rgba(244, 211, 94, 0.30),
    0 0 16px rgba(214, 40, 40, 0.28);
}

body.theme-xmas .dt-hud {
  background: linear-gradient(135deg, rgba(6, 16, 16, 0.94), rgba(4, 12, 14, 0.92));
  border: 1px solid rgba(244, 211, 94, 0.38);
  color: rgba(233, 248, 242, 0.88);
  box-shadow:
    0 0 0 2px rgba(47, 191, 113, 0.28),
    inset 0 0 18px rgba(47, 191, 113, 0.18);
}

body.theme-xmas .hud-live {
  color: rgba(214, 40, 40, 0.98);
  text-shadow:
    0 0 4px rgba(214, 40, 40, 0.85),
    0 0 10px rgba(244, 211, 94, 0.45);
}

body.theme-xmas .hud-online {
  color: rgba(47, 191, 113, 0.98);
  text-shadow:
    0 0 4px rgba(47, 191, 113, 0.85),
    0 0 10px rgba(77, 208, 225, 0.45);
}

body.theme-xmas .dt-search,
body.theme-xmas .dt-zoom-slider,
body.theme-xmas .dt-speed-slider,
body.theme-xmas .dt-theme-picker,
body.theme-xmas .dt-flow-toggle button {
  background: linear-gradient(180deg, rgba(7, 16, 18, 0.96), rgba(4, 12, 14, 0.94));
  border: 1.5px solid rgba(77, 208, 225, 0.42);
  color: #e9f8f2;
  box-shadow:
    0 0 0 2px rgba(47, 191, 113, 0.32),
    inset 0 0 0 1px rgba(244, 211, 94, 0.36),
    0 0 10px rgba(214, 40, 40, 0.20);
}

body.theme-xmas .dt-dd-menu,
body.theme-xmas .dt-menu-surface {
  background: linear-gradient(180deg, rgba(6, 14, 16, 0.97), rgba(5, 12, 14, 0.95));
  border-color: rgba(244, 211, 94, 0.42);
  box-shadow:
    0 0 0 2px rgba(77, 208, 225, 0.30),
    0 0 0 4px rgba(214, 40, 40, 0.22),
    0 16px 32px rgba(0, 0, 0, 0.48);
}

body.theme-xmas .dt-ham-theme .dt-dd-item.is-active,
body.theme-xmas .dt-dd-item.is-active {
  background: linear-gradient(90deg, rgba(47, 191, 113, 0.22), rgba(244, 211, 94, 0.20), rgba(214, 40, 40, 0.22));
  border-left: 3px solid rgba(214, 40, 40, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(244, 211, 94, 0.35),
    0 0 16px rgba(47, 191, 113, 0.28);
}

body.theme-xmas .zoom-range::-webkit-slider-thumb,
body.theme-xmas .speed-range::-webkit-slider-thumb {
  background: linear-gradient(135deg, rgba(47, 191, 113, 0.96), rgba(244, 211, 94, 0.96)) !important;
  box-shadow:
    0 0 0 2px rgba(77, 208, 225, 0.65) !important,
    0 0 0 4px rgba(214, 40, 40, 0.55) !important;
}

body.theme-xmas .zoom-range::-moz-range-thumb,
body.theme-xmas .speed-range::-moz-range-thumb {
  background: linear-gradient(135deg, rgba(47, 191, 113, 0.96), rgba(244, 211, 94, 0.96)) !important;
  box-shadow:
    0 0 0 2px rgba(77, 208, 225, 0.65) !important,
    0 0 0 4px rgba(214, 40, 40, 0.55) !important;
}

body.theme-xmas .dt-brand-tld {
  opacity: 0.55;
  color: rgba(244, 211, 94, 0.90);
}

body.theme-xmas .dt-brand-title {
  color: #e9f8f2;
}

body.theme-xmas .dt-dd-caret {
  color: rgba(244, 211, 94, 0.90);
}

body.theme-xmas .dt-system-rail {
  box-shadow:
    0 0 0 1px rgba(244, 211, 94, 0.40),
    inset 0 0 16px rgba(214, 40, 40, 0.28),
    inset 0 0 24px rgba(47, 191, 113, 0.24);
}

body[data-theme="xmas"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(28, 46, 40, 0.92) 12px, rgba(14, 24, 21, 0.9) 16px, transparent 16px),
    repeating-linear-gradient(0deg, rgba(84, 110, 96, 0.7), rgba(84, 110, 96, 0.7) 2px, transparent 2px, transparent 8px),
    radial-gradient(circle at 14px 12px, #d62828 0px, #d62828 6px, transparent 8px),
    radial-gradient(circle at 42px 12px, #2fbf71 0px, #2fbf71 6px, transparent 8px),
    radial-gradient(circle at 70px 12px, #f4d35e 0px, #f4d35e 6px, transparent 8px),
    radial-gradient(circle at 98px 12px, #e6f7ff 0px, #e6f7ff 6px, transparent 8px);
  background-size:
    100% 26px,
    120px 26px,
    120px 26px,
    120px 26px,
    120px 26px,
    120px 26px;
  background-repeat: repeat-x;
  filter:
    drop-shadow(0 0 6px rgba(244, 211, 94, 0.65))
    drop-shadow(0 0 8px rgba(214, 40, 40, 0.55))
    drop-shadow(0 0 8px rgba(47, 191, 113, 0.55));
  z-index: 12000;
}

@media (max-width: 720px) {
  body[data-theme="xmas"]::before {
    height: 21px;
    background-size:
      100% 21px,
      112px 21px,
      112px 21px,
      112px 21px,
      112px 21px,
      112px 21px;
  }
}

body[data-theme="xmas"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(140% 80% at 50% -10%, rgba(244, 211, 94, 0.18), transparent 55%),
    radial-gradient(120% 90% at 50% 115%, rgba(0, 0, 0, 0.65), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.45;
  z-index: 11000;
}

#xmas-snow {
  display: none;
}

body[data-theme="xmas"] #xmas-snow {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(245, 252, 255, 0.26) 0px, rgba(245, 252, 255, 0.26) 1.5px, transparent 3px),
    radial-gradient(circle at 70% 20%, rgba(230, 244, 255, 0.22) 0px, rgba(230, 244, 255, 0.22) 2px, transparent 4px),
    radial-gradient(circle at 40% 70%, rgba(240, 250, 255, 0.20) 0px, rgba(240, 250, 255, 0.20) 3.5px, transparent 7px),
    radial-gradient(circle at 80% 55%, rgba(220, 238, 255, 0.22) 0px, rgba(220, 238, 255, 0.22) 5px, transparent 10px);
  background-size: 180px 180px, 260px 260px, 420px 420px, 620px 620px;
  background-position: 10px 20px, 80px 120px, 40px 180px, 120px 240px;
  opacity: 0.22;
}

/* 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);
}

body.theme-xmas{
  --dt-support-bg: linear-gradient(180deg, rgba(6, 14, 16, 0.95), rgba(4, 10, 12, 0.96));
  --dt-support-border: rgba(77,208,225,0.38);
  --dt-support-divider: rgba(244,211,94,0.38);
  --dt-support-text: #e8f7ef;
  --dt-support-focus: rgba(47,191,113,0.90);
}

/* =====================================================
   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: rgba(29, 78, 216, 0.16);
  --dt-pill-cat-border-active: rgba(29, 78, 216, 0.55);
  --dt-pill-cat-text-active: var(--dt-text);

  --dt-pill-preset-bg-active: rgba(220, 38, 38, 0.16);
  --dt-pill-preset-border-active: rgba(220, 38, 38, 0.55);
  --dt-pill-preset-text-active: var(--dt-text);
}

body.theme-minimal-light{
  /* Subtle but clearly visible on light surfaces */
  --dt-pill-cat-bg-active: rgba(29, 78, 216, 0.14);
  --dt-pill-cat-border-active: rgba(29, 78, 216, 0.48);
  --dt-pill-cat-text-active: var(--dt-text);

  --dt-pill-preset-bg-active: rgba(2, 132, 199, 0.14);
  --dt-pill-preset-border-active: rgba(2, 132, 199, 0.48);
  --dt-pill-preset-text-active: var(--dt-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-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(255, 0, 128, 0.92);
  --dt-accent2: rgba(0, 255, 255, 0.92);

  /* 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-xmas{
  --dt-accent: rgba(34, 197, 94, 0.92);
  --dt-accent2: rgba(239, 68, 68, 0.92);

  /* Green category, Red preset */
  --dt-pill-cat-bg-active: rgba(34, 197, 94, 0.16);
  --dt-pill-cat-border-active: rgba(34, 197, 94, 0.56);
  --dt-pill-cat-text-active: var(--dt-text);

  --dt-pill-preset-bg-active: rgba(239, 68, 68, 0.16);
  --dt-pill-preset-border-active: rgba(239, 68, 68, 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));
}