/* ═══════════════════════════════════════════════════════════════════════
   tater-themes.css — Optional interface themes
   Loaded by TATER, Ops, Manage, and My TATER. Persists in a cookie scoped
   to *.tatersecurity.com so the same theme applies across all four apps.

   Themes override CSS custom properties (variables) and a few targeted
   selectors. Some hardcoded colors in deeper components may not reskin.
   ═══════════════════════════════════════════════════════════════════════ */

/* Theme-specific Google Fonts (Cinzel/Bangers/Bungee/Black Ops One/Anton/Russo One).
   Loaded only when needed via @import; browser ignores unused families until a
   theme that uses them is active. */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Black+Ops+One&family=Bungee&family=Cinzel:wght@600;700&family=Russo+One&family=Anton&family=Pacifico&family=Dancing+Script:wght@600;700&family=Mochiy+Pop+One&family=M+PLUS+Rounded+1c:wght@500;700&display=swap');

/* ─── Star Trek (LCARS) ──────────────────────────────────────────────────
   Reference: Michael Okuda's LCARS color palette (thelcars.com/colors.php)
   Canonical names — Mars #ff2200, Gold #ffaa00, African Violet #cc99ff,
   Pumpkin #ff7700, Space White #f5f6fa, Eggplant #6644aa, Blueprint #5599ff.
   Shape language: pill-end frame blocks, "elbow" rounded corners, all-caps
   condensed sans (Swiss 911 ULTRA / Antonio fallback), big block sidebar
   buttons in pumpkin/gold/violet rotation.
   ─────────────────────────────────────────────────────────────────────── */
[data-user-theme="startrek"] {
  --bg: #000000;
  --surface: #0a0a0a;
  --raised: #181818;
  --mid: #111111;
  --text: #f5f6fa;        /* space-white */
  --sub: #cc99ff;          /* african-violet */
  --accent: #ffaa00;       /* gold (canonical) */
  --accent2: #cc99ff;      /* african-violet */
  --accent3: #ff7700;      /* pumpkin */
  --border: #ffaa00;
  --border2: #cc99ff;
  --pass: #99ccff;         /* blueprint — LCARS uses blue/cyan for "operational" */
  --fail: #ff2200;         /* mars (canonical alert red) */
  --warn: #ffaa00;
  --manual: #cc99ff;
  --info: #5599ff;
}
[data-user-theme="startrek"] body {
  background: #000;
  font-family: 'Antonio', 'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: 0.04em;
  font-weight: 500;
}
[data-user-theme="startrek"] h1,
[data-user-theme="startrek"] h2,
[data-user-theme="startrek"] h3,
[data-user-theme="startrek"] .page-title,
[data-user-theme="startrek"] .topbar-title {
  color: #ffaa00;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-family: 'Antonio', 'Oswald', sans-serif;
  font-weight: 600;
}
[data-user-theme="startrek"] .topbar,
[data-user-theme="startrek"] .sidebar,
[data-user-theme="startrek"] .docs-header,
[data-user-theme="startrek"] .docs-sidebar {
  background: #000 !important;
  border-color: #ffaa00 !important;
}
/* LCARS sidebar — alternating pumpkin / violet / gold blocks with elbow ends */
[data-user-theme="startrek"] .nav-item {
  border-radius: 0 999px 999px 0 !important;
  margin: 4px 8px 4px 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
[data-user-theme="startrek"] .nav-item:nth-of-type(3n+1) { background: rgba(255,170,0,.12) !important; color: #ffaa00 !important; }
[data-user-theme="startrek"] .nav-item:nth-of-type(3n+2) { background: rgba(204,153,255,.12) !important; color: #cc99ff !important; }
[data-user-theme="startrek"] .nav-item:nth-of-type(3n)   { background: rgba(255,119,0,.12) !important; color: #ff7700 !important; }
[data-user-theme="startrek"] .nav-item.active {
  background: #ffaa00 !important;
  color: #000 !important;
  border-radius: 0 999px 999px 0 !important;
  border-left: 12px solid #cc99ff !important;
}
[data-user-theme="startrek"] .nav-item:hover { filter: brightness(1.4); }
[data-user-theme="startrek"] .btn-primary,
[data-user-theme="startrek"] button.btn-primary {
  background: #ffaa00 !important;
  color: #000 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-left: 24px !important; padding-right: 24px !important;
}
/* LCARS "elbow" frame on cards — characteristic rounded top-right corner only */
[data-user-theme="startrek"] .card,
[data-user-theme="startrek"] .metric-card,
[data-user-theme="startrek"] .kpi {
  border-radius: 0 22px 0 0 !important;
  border-top: 4px solid #ffaa00 !important;
  border-right: 4px solid #ffaa00 !important;
}

/* ─── Matrix ─────────────────────────────────────────────────────────────
   Reference: Matrix green canonically #03a062 (rezmason/matrix research)
   with brighter #00ff41 highlights and bloom glow. Raster scanlines layered
   on top. Body text gets multi-stop text-shadow for the phosphor-bloom feel.
   ─────────────────────────────────────────────────────────────────────── */
[data-user-theme="matrix"] {
  --bg: #000000;
  --surface: #020602;
  --raised: #051005;
  --mid: #030a03;
  --text: #00ff41;
  --sub: #03a062;          /* canonical matrix green */
  --accent: #00ff41;
  --accent2: #39ff14;
  --accent3: #00ff88;
  --border: #03a062;
  --border2: #006b3c;
  --pass: #00ff41;
  --fail: #ff0033;
  --warn: #ffd700;
  --manual: #03a062;
  --info: #88ff88;
}
[data-user-theme="matrix"] body {
  background: radial-gradient(ellipse at center, #051a08 0%, #000 60%) !important;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  position: relative;
}
[data-user-theme="matrix"] body,
[data-user-theme="matrix"] .topbar-title,
[data-user-theme="matrix"] h1,
[data-user-theme="matrix"] h2,
[data-user-theme="matrix"] h3 {
  text-shadow: 0 0 4px rgba(0,255,65,.7), 0 0 12px rgba(0,255,65,.35), 0 0 24px rgba(3,160,98,.2);
}
[data-user-theme="matrix"] *::selection { background: #00ff41; color: #000; }
[data-user-theme="matrix"] .topbar,
[data-user-theme="matrix"] .sidebar {
  background: #000 !important;
  border-color: #03a062 !important;
}
/* Subtle scanline overlay — every 3px, characteristic phosphor CRT look */
[data-user-theme="matrix"] body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,255,65,.03) 2px,
    rgba(0,255,65,.03) 3px
  );
  pointer-events: none;
  z-index: 9997;
  mix-blend-mode: screen;
}
[data-user-theme="matrix"] body::after {
  content: '01001100 01000011 01000001 01010010 01010011 :: 0xFEEDFACE :: WAKE_UP';
  position: fixed; bottom: 4px; right: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(0, 255, 65, 0.22);
  pointer-events: none;
  z-index: 1;
  letter-spacing: 0.1em;
}

/* ─── Pip-Boy (Fallout) ──────────────────────────────────────────────────
   Reference: Apple II green-phosphor CRT inspiration; Mojave amber palette
   #ffb641. Heavy phosphor bloom (multi-stop text-shadow), sharper scanline
   contrast, vignette darkening at edges, Vault-Tec yellow secondary, all-mono.
   ─────────────────────────────────────────────────────────────────────── */
[data-user-theme="pipboy"] {
  --bg: #0a0400;
  --surface: #14080a;        /* slightly warmer base */
  --raised: #1d0e00;
  --mid: #170a02;
  --text: #ffb641;            /* canonical Mojave amber */
  --sub: #cc7a00;
  --accent: #ffb641;
  --accent2: #ff8800;
  --accent3: #ffd966;
  --border: #ffb641;
  --border2: #8a5500;
  --pass: #1aff80;            /* Mutant-green — Fallout 4 pass color */
  --fail: #ff3030;
  --warn: #ffd700;
  --manual: #cc7a00;
  --info: #ffd966;
}
[data-user-theme="pipboy"] body {
  background: radial-gradient(ellipse at center, #1f0e02 0%, #0a0400 75%) !important;
  font-family: 'Monaco', 'IBM Plex Mono', 'Courier New', monospace;
  position: relative;
}
[data-user-theme="pipboy"] body,
[data-user-theme="pipboy"] h1,
[data-user-theme="pipboy"] h2,
[data-user-theme="pipboy"] h3 {
  text-shadow: 0 0 2px rgba(255,182,65,.85), 0 0 8px rgba(255,182,65,.5), 0 0 18px rgba(255,136,0,.3);
}
[data-user-theme="pipboy"] h1,
[data-user-theme="pipboy"] h2,
[data-user-theme="pipboy"] h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Layer 1: scanlines — sharper than before for stronger CRT feel */
[data-user-theme="pipboy"] body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 1px,
    rgba(255,182,65,.06) 1px,
    rgba(255,182,65,.06) 2px,
    rgba(0,0,0,.18) 2px,
    rgba(0,0,0,.18) 3px
  );
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: screen;
}
/* Layer 2: vignette darkening at corners — gives the curved-CRT-tube feel */
[data-user-theme="pipboy"] body::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
  z-index: 9999;
}
[data-user-theme="pipboy"] .topbar,
[data-user-theme="pipboy"] .sidebar {
  background: #0a0400 !important;
  border-color: #ffb641 !important;
}
[data-user-theme="pipboy"] .nav-item.active {
  background: rgba(255,182,65,.25) !important;
  color: #ffd966 !important;
  text-shadow: 0 0 4px rgba(255,217,102,.9);
}

/* ─── Battlestar Galactica (DRADIS / CIC) ────────────────────────────────
   Reference: BSG CIC + DRADIS console (scifiinterfaces.com). "Das Boot in
   space" — submarine aesthetic, militaristic. CIC orange #ff8c00, DRADIS
   green for friendlies, action-stations red. Thicker borders (riveted-
   bulkhead feel), monospace for numeric data, all-caps stencil headers,
   subtle radar-sweep teal info color.
   ─────────────────────────────────────────────────────────────────────── */
[data-user-theme="bsg"] {
  --bg: #050a10;
  --surface: #0d1722;
  --raised: #18293c;
  --mid: #112030;
  --text: #d6e1ed;
  --sub: #8595a8;
  --accent: #ff8c00;        /* CIC alert orange */
  --accent2: #44d27e;       /* DRADIS friendly green */
  --accent3: #c95d00;
  --border: #ff8c00;
  --border2: #4a5566;
  --pass: #44d27e;          /* DRADIS friendly green */
  --fail: #ff2d2d;          /* Action stations red */
  --warn: #ff8c00;
  --manual: #ffaa44;
  --info: #6b9dc4;
}
[data-user-theme="bsg"] body {
  background: linear-gradient(180deg, #050a10 0%, #0d1722 100%) !important;
  font-family: 'Black Ops One', 'Russo One', 'Impact', 'Helvetica Neue', sans-serif;
  letter-spacing: 0.02em;
}
[data-user-theme="bsg"] h1,
[data-user-theme="bsg"] h2,
[data-user-theme="bsg"] h3 {
  color: #ff8c00;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: 'Black Ops One', 'Russo One', 'Impact', sans-serif;
  text-shadow: 0 0 8px rgba(255,140,0,.4);
}
[data-user-theme="bsg"] .topbar,
[data-user-theme="bsg"] .sidebar {
  background: #050a10 !important;
  border-bottom: 3px solid #ff8c00 !important;
  border-right: 3px solid #4a5566 !important;
}
[data-user-theme="bsg"] .nav-item {
  border-left: 3px solid transparent !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
[data-user-theme="bsg"] .nav-item.active {
  background: rgba(255,140,0,.18) !important;
  border-left-color: #ff8c00 !important;
  color: #ff8c00 !important;
  text-shadow: 0 0 6px rgba(255,140,0,.5);
}
[data-user-theme="bsg"] .btn-primary {
  background: #ff8c00 !important;
  color: #050a10 !important;
  border: 2px solid #ffaa44 !important;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
}
/* Numeric data feels military when monospace — kpi/metric values stenciled */
[data-user-theme="bsg"] .kpi-value,
[data-user-theme="bsg"] .metric-value,
[data-user-theme="bsg"] .stat-num {
  font-family: 'Russo One', 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.04em;
}
/* Bulkhead-frame feel: thick top/bottom borders on cards */
[data-user-theme="bsg"] .card,
[data-user-theme="bsg"] .metric-card,
[data-user-theme="bsg"] .kpi {
  border-color: #4a5566 !important;
  border-top: 3px solid #ff8c00 !important;
  border-bottom: 1px solid #ff8c00 !important;
}

/* ─── Star Wars (Imperial / Sith) ────────────────────────────────────────
   Reference: Death Star/Sith aesthetic — black + Sith crimson (lightsaber
   #c91824) + Imperial gold (#ffce00). Headers in Cinzel/Trajan-style serif
   with extreme letter-spacing (mimics opening-crawl text). Hex-grid Death-
   Star surface SVG background. Lightsaber-blade text-shadow on links.
   ─────────────────────────────────────────────────────────────────────── */
[data-user-theme="starwars"] {
  --bg: #000000;
  --surface: #0d0408;
  --raised: #1a0a10;
  --mid: #15080c;
  --text: #d4d4d4;
  --sub: #888888;
  --accent: #c91824;
  --accent2: #ffce00;
  --accent3: #6ab04c;        /* Yoda lightsaber green */
  --border: #4a0a10;
  --border2: #2d0508;
  --pass: #6ab04c;
  --fail: #c91824;
  --warn: #ffce00;
  --manual: #c91824;
  --info: #5ec4ff;            /* Luke lightsaber blue */
}
[data-user-theme="starwars"] body {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><path d='M30 0 L60 17.5 L60 42.5 L30 60 L0 42.5 L0 17.5 Z' fill='none' stroke='%231a0a10' stroke-width='.5'/></svg>"),
    radial-gradient(ellipse at center, #0d0408 0%, #000000 70%) !important;
  background-size: 60px 60px, auto;
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
}
[data-user-theme="starwars"] h1,
[data-user-theme="starwars"] h2,
[data-user-theme="starwars"] h3 {
  color: #ffce00;
  font-family: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  letter-spacing: 0.18em;          /* Wider — matches opening-crawl spacing */
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(201,24,36,.55), 0 0 24px rgba(201,24,36,.25);
}
[data-user-theme="starwars"] .topbar,
[data-user-theme="starwars"] .sidebar { background: #000 !important; border-color: #4a0a10 !important; }
[data-user-theme="starwars"] .nav-item.active {
  background: rgba(201,24,36,.20) !important;
  border-left: 3px solid #c91824 !important;
  color: #ffce00 !important;
  box-shadow: inset 0 0 12px rgba(201,24,36,.3);
}
[data-user-theme="starwars"] .btn-primary {
  background: #c91824 !important;
  color: #fff !important;
  border: 2px solid #ffce00 !important;
  text-shadow: 0 0 4px rgba(255,206,0,.5);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
[data-user-theme="starwars"] a {
  text-shadow: 0 0 4px rgba(201,24,36,.6);   /* Lightsaber-blade glow */
}

/* ─── DC Universe (Gotham + Bat-yellow + ben-day dot comic) ──────────────
   Reference: classic Bat-symbol yellow oval + Gotham black + Superman red.
   Comic-book ben-day dot pattern background, Bangers bold-impact headers
   with stacked color shadow ("BLAM!" effect).
   ─────────────────────────────────────────────────────────────────────── */
[data-user-theme="dc"] {
  --bg: #0a0e1a;
  --surface: #14182a;
  --raised: #1d2240;
  --mid: #181c33;
  --text: #f4d03f;
  --sub: #a89a4a;
  --accent: #f4d03f;
  --accent2: #c0392b;
  --accent3: #2980b9;
  --border: #f4d03f;
  --border2: #6b5e1e;
  --pass: #58d68d;
  --fail: #c0392b;
  --warn: #f4d03f;
  --manual: #2980b9;
  --info: #2980b9;
}
[data-user-theme="dc"] body {
  background:
    /* Ben-day dots — characteristic 60s comic halftone */
    radial-gradient(circle at 4px 4px, rgba(244,208,63,.06) 1px, transparent 1px),
    linear-gradient(135deg, #0a0e1a 0%, #14182a 100%) !important;
  background-size: 8px 8px, auto;
  font-family: 'Bangers', 'Anton', 'Impact', 'Helvetica Neue', sans-serif;
}
[data-user-theme="dc"] h1,
[data-user-theme="dc"] h2,
[data-user-theme="dc"] h3 {
  color: #f4d03f;
  font-family: 'Bangers', 'Anton', 'Impact', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #c0392b, 4px 4px 0 #0a0e1a;
}
[data-user-theme="dc"] .topbar,
[data-user-theme="dc"] .sidebar { background: #0a0e1a !important; border-color: #f4d03f !important; }
[data-user-theme="dc"] .nav-item.active { background: #f4d03f !important; color: #0a0e1a !important; border-left-color: #c0392b !important; font-weight: 700; }
[data-user-theme="dc"] .btn-primary { background: #f4d03f !important; color: #0a0e1a !important; border: 2px solid #0a0e1a !important; font-weight: 800; text-transform: uppercase; }

/* ─── Anime / Vaporwave ──────────────────────────────────────────────────
   Reference: 80s outrun palette (retrowave.com) — Hot Magenta #ff00ff,
   Electric Cyan #00ffff, Hot Pink #ff5acd, Laser Lemon #fef65b. Add the
   characteristic "laser grid" perspective floor as an SVG background and
   sunset gradient at the horizon. Multi-layer pink+cyan text glow.
   ─────────────────────────────────────────────────────────────────────── */
[data-user-theme="anime"] {
  --bg: #1a0a2e;
  --surface: #2d1b54;
  --raised: #3d2670;
  --mid: #2d1b54;
  --text: #f0e6ff;
  --sub: #ff5acd;            /* hot pink (vaporwave canon) */
  --accent: #ff00ff;          /* hot magenta */
  --accent2: #00ffff;          /* electric cyan */
  --accent3: #fef65b;          /* laser lemon */
  --border: #ff00ff;
  --border2: #00ffff;
  --pass: #00ffff;
  --fail: #ff00ff;
  --warn: #fef65b;
  --manual: #ff5acd;
  --info: #00ffff;
}
[data-user-theme="anime"] body {
  background:
    /* Horizon sunset glow */
    radial-gradient(ellipse 70% 30% at 50% 70%, rgba(255,90,205,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 20% at 50% 75%, rgba(254,246,91,.10) 0%, transparent 70%),
    /* Perspective laser grid (SVG) — receding horizontal lines */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='1' x2='0' y2='0'><stop offset='0%25' stop-color='%23ff00ff' stop-opacity='.15'/><stop offset='100%25' stop-color='%23ff00ff' stop-opacity='0'/></linearGradient></defs><path d='M0 100 L50 60 L100 100 M0 100 L50 60 M50 60 L100 100 M0 80 L100 80 M0 90 L100 90 M0 70 L100 70' stroke='url(%23g)' stroke-width='.4' fill='none'/></svg>") repeat-x bottom,
    linear-gradient(180deg, #1a0a2e 0%, #2d1b54 60%, #4a1a4d 100%) !important;
  background-size: auto, auto, 100% 200px, auto;
  font-family: 'Bungee', 'M PLUS Rounded 1c', 'Helvetica Neue', sans-serif;
}
[data-user-theme="anime"] h1,
[data-user-theme="anime"] h2,
[data-user-theme="anime"] h3 {
  color: #ff00ff;
  font-family: 'Bungee', 'Bangers', sans-serif;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 6px rgba(255,0,255,.8),
    0 0 14px rgba(0,255,255,.4),
    0 2px 0 rgba(0,255,255,.5);
}
[data-user-theme="anime"] .topbar,
[data-user-theme="anime"] .sidebar {
  background: rgba(26,10,46,.85) !important;
  backdrop-filter: blur(8px);
  border-color: #ff00ff !important;
}
[data-user-theme="anime"] .nav-item.active {
  background: linear-gradient(90deg, #ff00ff, #00ffff) !important;
  color: #1a0a2e !important;
  border-left-color: #fef65b !important;
  font-weight: 700;
  text-shadow: none;
}
[data-user-theme="anime"] .btn-primary {
  background: linear-gradient(90deg, #ff00ff, #00ffff) !important;
  color: #1a0a2e !important;
  border: none !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 0 20px rgba(255,0,255,.6), 0 0 40px rgba(0,255,255,.25);
}

/* ─── Doctor Who (TARDIS) ────────────────────────────────────────────────
   Reference: TARDIS Police Box exterior blue (BBC officially #003b6f-ish,
   "TARDIS Blue") + door-sign/lettering gold #ffd700. Console-room hexagonal
   roundel walls — recreated as a subtle cog/hex SVG pattern background.
   Cinzel headers for the time-traveller-archaic feel. Dalek-bronze for
   warning, Cyberman-grey for info.
   ─────────────────────────────────────────────────────────────────────── */
[data-user-theme="drwho"] {
  --bg: #001a33;
  --surface: #002a4d;
  --raised: #003b6f;
  --mid: #00264a;
  --text: #e6f0ff;
  --sub: #8baacc;
  --accent: #ffd700;
  --accent2: #6caee0;
  --accent3: #cc6600;        /* Dalek bronze */
  --border: #ffd700;
  --border2: #4a7396;
  --pass: #5fbf60;
  --fail: #cc4444;
  --warn: #ffd700;
  --manual: #cc6600;
  --info: #b3c4d4;            /* Cyberman polished steel */
}
[data-user-theme="drwho"] body {
  /* Background: TARDIS interior orange-glow at center over deep blue, with
     a hexagonal "roundel wall" SVG tile for the console-room feel */
  background:
    radial-gradient(ellipse at top, rgba(255,215,0,.06) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><circle cx='40' cy='40' r='18' fill='none' stroke='%23003b6f' stroke-width='1' opacity='.3'/><circle cx='40' cy='40' r='10' fill='none' stroke='%23003b6f' stroke-width='1' opacity='.25'/></svg>"),
    radial-gradient(ellipse at top, #003b6f 0%, #001a33 70%) !important;
  background-size: auto, 80px 80px, auto;
  font-family: 'Cinzel', 'Helvetica Neue', sans-serif;
}
[data-user-theme="drwho"] h1,
[data-user-theme="drwho"] h2,
[data-user-theme="drwho"] h3 {
  color: #ffd700;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255,215,0,.35), 0 0 14px rgba(255,215,0,.15);
}
[data-user-theme="drwho"] .topbar,
[data-user-theme="drwho"] .sidebar {
  background: #001a33 !important;
  border-color: #ffd700 !important;
}
[data-user-theme="drwho"] .nav-item.active {
  background: rgba(255,215,0,.15) !important;
  border-left-color: #ffd700 !important;
  color: #ffd700 !important;
  text-shadow: 0 0 4px rgba(255,215,0,.4);
}
[data-user-theme="drwho"] .btn-primary {
  background: #ffd700 !important;
  color: #001a33 !important;
  border: 2px solid #6caee0 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 0 0 4px rgba(0,59,111,.4);
}

/* ─── Barbie ─────────────────────────────────────────────────────────── */
[data-user-theme="barbie"] {
  --bg: #2a0a1f;
  --surface: #3d1530;
  --raised: #571f44;
  --mid: #4a1838;
  --text: #fff0f8;
  --sub: #ffb6d9;
  --accent: #ff1493;
  --accent2: #ffb6d9;
  --accent3: #ffd700;
  --border: #ff1493;
  --border2: #cc1075;
  --pass: #ffd700;
  --fail: #ff1493;
  --warn: #ffd700;
  --manual: #ffb6d9;
  --info: #ffb6d9;
}
[data-user-theme="barbie"] body {
  background: linear-gradient(135deg, #2a0a1f 0%, #571f44 50%, #2a0a1f 100%) !important;
  font-family: 'M PLUS Rounded 1c', 'Helvetica Neue', sans-serif;
}
[data-user-theme="barbie"] h1,
[data-user-theme="barbie"] h2,
[data-user-theme="barbie"] h3 {
  color: #ff1493;
  font-family: 'Pacifico', 'Dancing Script', cursive;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(255,20,147,.4), 2px 2px 0 #ffd700;
}
[data-user-theme="barbie"] .topbar,
[data-user-theme="barbie"] .sidebar { background: #2a0a1f !important; border-color: #ff1493 !important; }
[data-user-theme="barbie"] .nav-item.active { background: linear-gradient(90deg, #ff1493, #ffb6d9) !important; color: #fff !important; border-left-color: #ffd700 !important; font-weight: 700; }
[data-user-theme="barbie"] .btn-primary { background: linear-gradient(90deg, #ff1493, #ffb6d9) !important; color: #fff !important; border: 2px solid #ffd700 !important; font-weight: 700; box-shadow: 0 0 16px rgba(255,20,147,.4); }

/* ─── Hello Kitty (Kawaii) ───────────────────────────────────────────── */
[data-user-theme="hellokitty"] {
  --bg: #2d1018;
  --surface: #3a1922;
  --raised: #4d2230;
  --mid: #421b28;
  --text: #fff5f7;
  --sub: #ffd6e0;
  --accent: #ff85a2;
  --accent2: #ffd6e0;
  --accent3: #fff5f7;
  --border: #ff85a2;
  --border2: #cc6a83;
  --pass: #b8e0b8;
  --fail: #ff85a2;
  --warn: #ffd966;
  --manual: #ffd6e0;
  --info: #b8d8ff;
}
[data-user-theme="hellokitty"] body {
  background: linear-gradient(135deg, #2d1018 0%, #4d2230 100%) !important;
  font-family: 'Mochiy Pop One', 'M PLUS Rounded 1c', 'Comic Sans MS', sans-serif;
}
[data-user-theme="hellokitty"] h1,
[data-user-theme="hellokitty"] h2,
[data-user-theme="hellokitty"] h3 {
  color: #ff85a2;
  font-family: 'Mochiy Pop One', 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 0.02em;
}
[data-user-theme="hellokitty"] .topbar,
[data-user-theme="hellokitty"] .sidebar { background: #2d1018 !important; border-color: #ff85a2 !important; }
[data-user-theme="hellokitty"] .nav-item.active { background: rgba(255,133,162,.3) !important; color: #ff85a2 !important; border-left-color: #ffd6e0 !important; }
[data-user-theme="hellokitty"] .btn-primary { background: #ff85a2 !important; color: #2d1018 !important; border: 2px solid #ffd6e0 !important; border-radius: 999px !important; font-weight: 700; }
[data-user-theme="hellokitty"] .card,
[data-user-theme="hellokitty"] .metric-card,
[data-user-theme="hellokitty"] .kpi { border-radius: 16px !important; }

/* ─── Wicked (Defying Gravity / Emerald City) ────────────────────────── */
[data-user-theme="wicked"] {
  --bg: #051010;
  --surface: #0a1f15;
  --raised: #142d20;
  --mid: #0f2419;
  --text: #d4f5e0;
  --sub: #88c0a0;
  --accent: #00ff7f;
  --accent2: #d946ef;
  --accent3: #ffd700;
  --border: #00ff7f;
  --border2: #2dcc71;
  --pass: #00ff7f;
  --fail: #d946ef;
  --warn: #ffd700;
  --manual: #d946ef;
  --info: #88c0a0;
}
[data-user-theme="wicked"] body {
  background: radial-gradient(ellipse at top, #142d20 0%, #051010 70%) !important;
  font-family: 'Cinzel', 'Helvetica Neue', sans-serif;
}
[data-user-theme="wicked"] h1,
[data-user-theme="wicked"] h2,
[data-user-theme="wicked"] h3 {
  color: #00ff7f;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0,255,127,.5), 0 0 24px rgba(217,70,239,.2);
}
[data-user-theme="wicked"] .topbar,
[data-user-theme="wicked"] .sidebar { background: #051010 !important; border-color: #00ff7f !important; }
[data-user-theme="wicked"] .nav-item.active { background: rgba(0,255,127,.15) !important; color: #00ff7f !important; border-left-color: #d946ef !important; }
[data-user-theme="wicked"] .btn-primary { background: linear-gradient(90deg, #00ff7f, #d946ef) !important; color: #051010 !important; border: none !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 0 16px rgba(0,255,127,.4); }

/* ═══════════════════════════════════════════════════════════════════════
   PASS-3 EXTRA COVERAGE for the 5 new themes
   ═══════════════════════════════════════════════════════════════════════ */
[data-user-theme="bsg"] a, [data-user-theme="bsg"] [style*="color:#3b9eff"], [data-user-theme="bsg"] [style*="color: #3b9eff"] { color: #ff8c00 !important; }
[data-user-theme="bsg"] [style*="background:#3b9eff"], [data-user-theme="bsg"] [style*="background: #3b9eff"] { background: #ff8c00 !important; color: #0a1118 !important; }
[data-user-theme="bsg"] .kpi-value, [data-user-theme="bsg"] .metric-value, [data-user-theme="bsg"] .stat-num { color: #ff8c00 !important; }
[data-user-theme="bsg"] .card, [data-user-theme="bsg"] .metric-card, [data-user-theme="bsg"] .kpi { border-color: #4a5566 !important; }
[data-user-theme="bsg"] .btn-ghost { color: #ff8c00 !important; border-color: #4a5566 !important; }

[data-user-theme="starwars"] a, [data-user-theme="starwars"] [style*="color:#3b9eff"], [data-user-theme="starwars"] [style*="color: #3b9eff"] { color: #ffce00 !important; }
[data-user-theme="starwars"] [style*="background:#3b9eff"], [data-user-theme="starwars"] [style*="background: #3b9eff"] { background: #c91824 !important; color: #fff !important; }
[data-user-theme="starwars"] .kpi-value, [data-user-theme="starwars"] .metric-value, [data-user-theme="starwars"] .stat-num { color: #ffce00 !important; }
[data-user-theme="starwars"] .card, [data-user-theme="starwars"] .metric-card, [data-user-theme="starwars"] .kpi { border-color: #4a0a10 !important; }
[data-user-theme="starwars"] .btn-ghost { color: #ffce00 !important; border-color: #4a0a10 !important; }

[data-user-theme="dc"] a, [data-user-theme="dc"] [style*="color:#3b9eff"], [data-user-theme="dc"] [style*="color: #3b9eff"] { color: #f4d03f !important; }
[data-user-theme="dc"] [style*="background:#3b9eff"], [data-user-theme="dc"] [style*="background: #3b9eff"] { background: #f4d03f !important; color: #0a0e1a !important; }
[data-user-theme="dc"] .kpi-value, [data-user-theme="dc"] .metric-value, [data-user-theme="dc"] .stat-num { color: #f4d03f !important; }
[data-user-theme="dc"] .card, [data-user-theme="dc"] .metric-card, [data-user-theme="dc"] .kpi { border-color: #f4d03f !important; }
[data-user-theme="dc"] .btn-ghost { color: #f4d03f !important; border-color: #f4d03f !important; }

[data-user-theme="anime"] a, [data-user-theme="anime"] [style*="color:#3b9eff"], [data-user-theme="anime"] [style*="color: #3b9eff"] { color: #ff10f0 !important; }
[data-user-theme="anime"] [style*="background:#3b9eff"], [data-user-theme="anime"] [style*="background: #3b9eff"] { background: #ff10f0 !important; color: #fff !important; }
[data-user-theme="anime"] .kpi-value, [data-user-theme="anime"] .metric-value, [data-user-theme="anime"] .stat-num { color: #00ffe0 !important; text-shadow: 0 0 8px rgba(0,255,224,.5); }
[data-user-theme="anime"] .card, [data-user-theme="anime"] .metric-card, [data-user-theme="anime"] .kpi { border-color: #ff10f0 !important; box-shadow: 0 0 12px rgba(255,16,240,.15); }
[data-user-theme="anime"] .btn-ghost { color: #ff10f0 !important; border-color: #ff10f0 !important; }

[data-user-theme="drwho"] a, [data-user-theme="drwho"] [style*="color:#3b9eff"], [data-user-theme="drwho"] [style*="color: #3b9eff"] { color: #ffd700 !important; }
[data-user-theme="drwho"] [style*="background:#3b9eff"], [data-user-theme="drwho"] [style*="background: #3b9eff"] { background: #ffd700 !important; color: #001a33 !important; }
[data-user-theme="drwho"] .kpi-value, [data-user-theme="drwho"] .metric-value, [data-user-theme="drwho"] .stat-num { color: #ffd700 !important; }
[data-user-theme="drwho"] .card, [data-user-theme="drwho"] .metric-card, [data-user-theme="drwho"] .kpi { border-color: #ffd700 !important; }
[data-user-theme="drwho"] .btn-ghost { color: #ffd700 !important; border-color: #ffd700 !important; }

[data-user-theme="barbie"] a, [data-user-theme="barbie"] [style*="color:#3b9eff"], [data-user-theme="barbie"] [style*="color: #3b9eff"] { color: #ff1493 !important; }
[data-user-theme="barbie"] [style*="background:#3b9eff"], [data-user-theme="barbie"] [style*="background: #3b9eff"] { background: #ff1493 !important; color: #fff !important; }
[data-user-theme="barbie"] .kpi-value, [data-user-theme="barbie"] .metric-value, [data-user-theme="barbie"] .stat-num { color: #ff1493 !important; text-shadow: 0 0 8px rgba(255,20,147,.4); }
[data-user-theme="barbie"] .card, [data-user-theme="barbie"] .metric-card, [data-user-theme="barbie"] .kpi { border-color: #ff1493 !important; box-shadow: 0 0 12px rgba(255,20,147,.15); }
[data-user-theme="barbie"] .btn-ghost { color: #ff1493 !important; border-color: #ff1493 !important; }

[data-user-theme="hellokitty"] a, [data-user-theme="hellokitty"] [style*="color:#3b9eff"], [data-user-theme="hellokitty"] [style*="color: #3b9eff"] { color: #ff85a2 !important; }
[data-user-theme="hellokitty"] [style*="background:#3b9eff"], [data-user-theme="hellokitty"] [style*="background: #3b9eff"] { background: #ff85a2 !important; color: #2d1018 !important; }
[data-user-theme="hellokitty"] .kpi-value, [data-user-theme="hellokitty"] .metric-value, [data-user-theme="hellokitty"] .stat-num { color: #ff85a2 !important; }
[data-user-theme="hellokitty"] .card, [data-user-theme="hellokitty"] .metric-card, [data-user-theme="hellokitty"] .kpi { border-color: #ff85a2 !important; border-radius: 16px !important; }
[data-user-theme="hellokitty"] .btn-ghost { color: #ff85a2 !important; border-color: #ff85a2 !important; border-radius: 999px !important; }

[data-user-theme="wicked"] a, [data-user-theme="wicked"] [style*="color:#3b9eff"], [data-user-theme="wicked"] [style*="color: #3b9eff"] { color: #00ff7f !important; }
[data-user-theme="wicked"] [style*="background:#3b9eff"], [data-user-theme="wicked"] [style*="background: #3b9eff"] { background: #00ff7f !important; color: #051010 !important; }
[data-user-theme="wicked"] .kpi-value, [data-user-theme="wicked"] .metric-value, [data-user-theme="wicked"] .stat-num { color: #00ff7f !important; text-shadow: 0 0 8px rgba(0,255,127,.5); }
[data-user-theme="wicked"] .card, [data-user-theme="wicked"] .metric-card, [data-user-theme="wicked"] .kpi { border-color: #00ff7f !important; }
[data-user-theme="wicked"] .btn-ghost { color: #00ff7f !important; border-color: #00ff7f !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PLATFORM-INSPIRED THEMES (ADO #493)
   Trademark-safe — no logos, no official wordmarks. Inspired by Microsoft
   Fluent / Apple macOS / Ubuntu / Material design languages.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Fluent (Microsoft-inspired) ────────────────────────────────────── */
[data-user-theme="fluent"] {
  --bg: #1b1a19; --surface: #252423; --raised: #323130; --mid: #2b2a29;
  --text: #f3f2f1; --sub: #c8c6c4;
  --accent: #0078d4; --accent2: #2b88d8; --accent3: #50e6ff;
  --border: #3b3a39; --border2: #484644;
  --pass: #6bb700; --fail: #d13438; --warn: #ffaa44; --manual: #797775; --info: #0078d4;
}
[data-user-theme="fluent"] body { background: linear-gradient(180deg, #201f1e 0%, #1b1a19 100%) !important; font-family: 'Segoe UI', 'Segoe UI Variable', 'Helvetica Neue', sans-serif; }
[data-user-theme="fluent"] h1, [data-user-theme="fluent"] h2, [data-user-theme="fluent"] h3 { color: #f3f2f1; font-weight: 600; }
[data-user-theme="fluent"] .topbar, [data-user-theme="fluent"] .sidebar { background: #252423 !important; border-color: #3b3a39 !important; }
[data-user-theme="fluent"] .nav-item.active { background: rgba(0,120,212,.15) !important; border-left-color: #0078d4 !important; color: #50e6ff !important; }
[data-user-theme="fluent"] .btn-primary { background: #0078d4 !important; color: #fff !important; border: 1px solid #0078d4 !important; border-radius: 2px !important; font-weight: 600; }

/* ─── Cupertino (Apple-inspired) ─────────────────────────────────────── */
[data-user-theme="cupertino"] {
  --bg: #1c1c1e; --surface: #2c2c2e; --raised: #3a3a3c; --mid: #2c2c2e;
  --text: #ffffff; --sub: #98989d;
  --accent: #0a84ff; --accent2: #5e5ce6; --accent3: #30d158;
  --border: #38383a; --border2: #48484a;
  --pass: #30d158; --fail: #ff453a; --warn: #ff9f0a; --manual: #98989d; --info: #0a84ff;
}
[data-user-theme="cupertino"] body { background: linear-gradient(180deg, #1c1c1e 0%, #000 100%) !important; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; letter-spacing: -0.01em; }
[data-user-theme="cupertino"] h1, [data-user-theme="cupertino"] h2, [data-user-theme="cupertino"] h3 { color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; font-weight: 600; letter-spacing: -0.02em; }
[data-user-theme="cupertino"] .topbar, [data-user-theme="cupertino"] .sidebar { background: rgba(28,28,30,.85) !important; backdrop-filter: blur(20px) saturate(1.5); border-color: #38383a !important; }
[data-user-theme="cupertino"] .nav-item.active { background: rgba(10,132,255,.18) !important; border-radius: 8px !important; border-left-color: transparent !important; color: #0a84ff !important; margin: 2px 8px !important; }
[data-user-theme="cupertino"] .btn-primary { background: #0a84ff !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-weight: 500; }
[data-user-theme="cupertino"] .card, [data-user-theme="cupertino"] .metric-card, [data-user-theme="cupertino"] .kpi { border-radius: 14px !important; }

/* ─── Ubuntu (Linux-inspired) ────────────────────────────────────────── */
[data-user-theme="ubuntu"] {
  --bg: #2c001e; --surface: #3d1934; --raised: #4d2244; --mid: #3d1934;
  --text: #f5f5f5; --sub: #d0c0c8;
  --accent: #e95420; --accent2: #ff8c5a; --accent3: #aea79f;
  --border: #5e2d52; --border2: #774064;
  --pass: #38d977; --fail: #df382c; --warn: #f99b11; --manual: #aea79f; --info: #19b6ee;
}
[data-user-theme="ubuntu"] body { background: linear-gradient(135deg, #2c001e 0%, #3d1934 100%) !important; font-family: 'Ubuntu', 'Inter', 'Helvetica Neue', sans-serif; }
[data-user-theme="ubuntu"] h1, [data-user-theme="ubuntu"] h2, [data-user-theme="ubuntu"] h3 { color: #f5f5f5; font-family: 'Ubuntu', 'Inter', sans-serif; font-weight: 500; }
[data-user-theme="ubuntu"] .topbar, [data-user-theme="ubuntu"] .sidebar { background: #2c001e !important; border-color: #5e2d52 !important; }
[data-user-theme="ubuntu"] .nav-item.active { background: rgba(233,84,32,.20) !important; border-left-color: #e95420 !important; color: #ff8c5a !important; }
[data-user-theme="ubuntu"] .btn-primary { background: #e95420 !important; color: #fff !important; border: none !important; border-radius: 4px !important; font-weight: 500; }

/* ─── Material (Google-inspired) ─────────────────────────────────────── */
[data-user-theme="material"] {
  --bg: #202124; --surface: #2d2e30; --raised: #3c4043; --mid: #292a2d;
  --text: #e8eaed; --sub: #9aa0a6;
  --accent: #4285f4; --accent2: #8ab4f8; --accent3: #34a853;
  --border: #3c4043; --border2: #5f6368;
  --pass: #34a853; --fail: #ea4335; --warn: #fbbc04; --manual: #9aa0a6; --info: #4285f4;
}
[data-user-theme="material"] body { background: linear-gradient(180deg, #202124 0%, #17181a 100%) !important; font-family: 'Roboto', 'Inter', 'Segoe UI', sans-serif; letter-spacing: 0.005em; }
[data-user-theme="material"] h1, [data-user-theme="material"] h2, [data-user-theme="material"] h3 { color: #e8eaed; font-family: 'Roboto', 'Inter', sans-serif; font-weight: 500; }
[data-user-theme="material"] .topbar, [data-user-theme="material"] .sidebar { background: #202124 !important; border-color: #3c4043 !important; }
[data-user-theme="material"] .nav-item.active { background: rgba(66,133,244,.20) !important; border-radius: 0 24px 24px 0 !important; border-left-color: #4285f4 !important; color: #8ab4f8 !important; margin-right: 12px !important; }
[data-user-theme="material"] .btn-primary { background: #4285f4 !important; color: #fff !important; border: none !important; border-radius: 4px !important; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
[data-user-theme="material"] .card, [data-user-theme="material"] .metric-card, [data-user-theme="material"] .kpi { border-radius: 8px !important; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }

/* Picker grouping — group headers in the modal */
.tater-theme-modal h3.tater-theme-group {
  font-family: var(--mono);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sub);
  margin: 16px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.tater-theme-modal h3.tater-theme-group:first-of-type { margin-top: 0; }

/* ─── Marvel (comic-book half-tone) ──────────────────────────────────────
   Bold red/yellow/blue with ben-day dot halftone background like DC theme,
   Bangers display headers with stacked color shadow.
   ─────────────────────────────────────────────────────────────────────── */
[data-user-theme="marvel"] {
  --bg: #0d0d2b;
  --surface: #15153a;
  --raised: #1f1f52;
  --mid: #181840;
  --text: #ffffff;
  --sub: #c9c9d8;
  --accent: #ed1d24;
  --accent2: #ffce00;
  --accent3: #1d4ed8;
  --border: #ed1d24;
  --border2: #ffce00;
  --pass: #00d26a;
  --fail: #ed1d24;
  --warn: #ffce00;
  --manual: #1d4ed8;
  --info: #1d4ed8;
}
[data-user-theme="marvel"] body {
  background:
    /* Ben-day dot halftone */
    radial-gradient(circle at 5px 5px, rgba(237,29,36,.08) 1px, transparent 1px),
    linear-gradient(135deg, #0d0d2b 0%, #1a0a3a 100%) !important;
  background-size: 10px 10px, auto;
  font-family: 'Bangers', 'Impact', 'Anton', 'Helvetica Neue', sans-serif;
  letter-spacing: 0.02em;
}
[data-user-theme="marvel"] h1,
[data-user-theme="marvel"] h2,
[data-user-theme="marvel"] .page-title {
  font-family: 'Bangers', 'Impact', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ed1d24;
  text-shadow: 2px 2px 0 #ffce00, 4px 4px 0 #1d4ed8;
}
[data-user-theme="marvel"] .topbar,
[data-user-theme="marvel"] .sidebar {
  background: #0d0d2b !important;
  border-color: #ed1d24 !important;
}
[data-user-theme="marvel"] .btn-primary {
  background: #ed1d24 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-user-theme="marvel"] .nav-item.active {
  background: #ed1d24 !important;
  color: #fff !important;
  border-left-color: #ffce00 !important;
}

/* ─── Springfield (Simpsons cell-shading) ────────────────────────────────
   Bright Simpsons-yellow surfaces with thick black 2-3px cell-shading
   borders, square accent rims, blue + white-doughnut accents. Cartoon
   display face via Bowlby One SC + Fredoka One Google fonts. Designed
   to evoke the show's flat 2D cel look without infringing trademarks.
   ─────────────────────────────────────────────────────────────────────── */
[data-user-theme="springfield"] {
  /* The signature Simpsons yellow body — slightly more saturated than #ffd521 for legibility */
  --bg:       #ffd521;
  --surface:  #fff7c0;
  --raised:   #fff2a0;
  --mid:      #ffe566;
  --card:     #fff7c0;
  --text:     #1a1a1a;
  --sub:      #4a3a00;
  --muted:    #7a6a00;
  /* Blue accent matches Marge's hair / sky / signature title-card blue. */
  --accent:   #1473c5;
  --accent2:  #ff6600;
  --accent3:  #c63838;
  --border:   #000000;
  --border2:  #1a1a1a;
  --raised-border: #000000;
  --pass:     #2dcc71;
  --fail:     #d92500;
  --warn:     #ff8c00;
  --manual:   #1473c5;
  --info:     #1473c5;
  --accent-bg: rgba(20, 115, 197, 0.12);
  --focus-ring: 0 0 0 3px rgba(20, 115, 197, 0.4);
}
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Fredoka:wght@500;700&family=Patrick+Hand&display=swap');
[data-user-theme="springfield"] body {
  background:
    /* Faint hand-drawn paper texture via diagonal scribble lines */
    repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0 1px, transparent 1px 14px),
    /* Solid Simpsons yellow underneath */
    #ffd521 !important;
  font-family: 'Fredoka', 'Patrick Hand', 'Comic Sans MS', 'Marker Felt', sans-serif !important;
  letter-spacing: 0.01em;
}
[data-user-theme="springfield"] h1,
[data-user-theme="springfield"] h2,
[data-user-theme="springfield"] h3,
[data-user-theme="springfield"] .page-title {
  font-family: 'Bowlby One SC', 'Fredoka', 'Impact', sans-serif !important;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-shadow: 2px 2px 0 #1473c5;
}
[data-user-theme="springfield"] .topbar,
[data-user-theme="springfield"] .sidebar {
  background: #fff7c0 !important;
  border-color: #000 !important;
  border-width: 2px !important;
}
[data-user-theme="springfield"] .card,
[data-user-theme="springfield"] .modal,
[data-user-theme="springfield"] .modal-body,
[data-user-theme="springfield"] .kpi-card,
[data-user-theme="springfield"] .metric-card {
  background: #fff7c0 !important;
  border: 2.5px solid #000 !important;
  border-radius: 6px !important;
  box-shadow: 4px 4px 0 #1473c5 !important;
}
[data-user-theme="springfield"] .modal-backdrop {
  background: rgba(255, 213, 33, 0.55) !important;
}
[data-user-theme="springfield"] .btn {
  border: 2.5px solid #000 !important;
  border-radius: 4px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 2px 2px 0 #000 !important;
  transition: transform .05s var(--ease), box-shadow .05s var(--ease) !important;
}
[data-user-theme="springfield"] .btn:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 #000 !important;
}
[data-user-theme="springfield"] .btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0 0 0 #000 !important;
}
[data-user-theme="springfield"] .btn-primary {
  background: #1473c5 !important;
  color: #fff !important;
  border-color: #000 !important;
}
[data-user-theme="springfield"] .btn-secondary,
[data-user-theme="springfield"] .btn-ghost {
  background: #fff7c0 !important;
  color: #1a1a1a !important;
}
[data-user-theme="springfield"] .nav-item {
  border: 2px solid transparent !important;
  border-left-width: 4px !important;
}
[data-user-theme="springfield"] .nav-item:hover {
  background: #ffe566 !important;
  border-left-color: #1473c5 !important;
}
[data-user-theme="springfield"] .nav-item.active {
  background: #1473c5 !important;
  color: #fff !important;
  border-color: #000 !important;
  border-left-width: 4px !important;
  border-left-color: #ff6600 !important;
}
[data-user-theme="springfield"] .form-input,
[data-user-theme="springfield"] .form-select,
[data-user-theme="springfield"] .form-control,
[data-user-theme="springfield"] input[type="text"],
[data-user-theme="springfield"] input[type="email"],
[data-user-theme="springfield"] input[type="password"],
[data-user-theme="springfield"] input[type="number"],
[data-user-theme="springfield"] input[type="date"],
[data-user-theme="springfield"] select,
[data-user-theme="springfield"] textarea {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 2px solid #000 !important;
  border-radius: 3px !important;
  font-family: 'Patrick Hand', 'Fredoka', sans-serif !important;
  font-size: 1rem !important;
}
[data-user-theme="springfield"] .form-input:focus,
[data-user-theme="springfield"] input:focus,
[data-user-theme="springfield"] select:focus,
[data-user-theme="springfield"] textarea:focus {
  outline: none !important;
  border-color: #1473c5 !important;
  box-shadow: 2px 2px 0 #1473c5 !important;
}
[data-user-theme="springfield"] .data-table,
[data-user-theme="springfield"] .table {
  border: 2.5px solid #000 !important;
  background: #fff7c0 !important;
}
[data-user-theme="springfield"] .data-table th,
[data-user-theme="springfield"] .table th {
  background: #1473c5 !important;
  color: #fff !important;
  border-bottom: 2.5px solid #000 !important;
  font-family: 'Bowlby One SC', sans-serif !important;
  letter-spacing: 0.04em;
}
[data-user-theme="springfield"] .data-table td,
[data-user-theme="springfield"] .table td {
  border-bottom: 1.5px solid #000 !important;
}
[data-user-theme="springfield"] .badge,
[data-user-theme="springfield"] .status-badge,
[data-user-theme="springfield"] .pill {
  border: 2px solid #000 !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  font-family: 'Fredoka', sans-serif !important;
}
[data-user-theme="springfield"] .topbar-icon-btn,
[data-user-theme="springfield"] .theme-toggle-btn {
  border: 2px solid #000 !important;
  border-radius: 3px !important;
  background: #fff7c0 !important;
}
/* Aggressive brand-color overrides so hardcoded inline styles (color:#3b9eff
   etc.) pick up the Springfield blue accent. */
[data-user-theme="springfield"] [style*="color:#3b9eff"],
[data-user-theme="springfield"] [style*="color: #3b9eff"],
[data-user-theme="springfield"] [style*="color:var(--accent)"] { color: #1473c5 !important; }
[data-user-theme="springfield"] [style*="background:#3b9eff"],
[data-user-theme="springfield"] [style*="background: #3b9eff"],
[data-user-theme="springfield"] [style*="background-color:#3b9eff"] { background: #1473c5 !important; }
[data-user-theme="springfield"] [style*="border:2px solid #3b9eff"],
[data-user-theme="springfield"] [style*="border-color:#3b9eff"] { border-color: #1473c5 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   AGGRESSIVE BRAND COLOR OVERRIDES
   Many components use hardcoded brand colors (inline style="color:#3b9eff",
   gradients, etc.) that bypass CSS variables. The rules below catch the
   most common patterns to make themes more impactful. Logos (img elements)
   are intentionally NOT filtered — they stay original.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Star Trek aggressive overrides ─────────────────────────────────── */
[data-user-theme="startrek"] a,
[data-user-theme="startrek"] .nav-item:hover,
[data-user-theme="startrek"] .stat-num,
[data-user-theme="startrek"] .kpi-num,
[data-user-theme="startrek"] [style*="color:#3b9eff"],
[data-user-theme="startrek"] [style*="color: #3b9eff"],
[data-user-theme="startrek"] [style*="color:var(--accent)"] { color: #f6a000 !important; }
[data-user-theme="startrek"] [style*="background:#3b9eff"],
[data-user-theme="startrek"] [style*="background: #3b9eff"],
[data-user-theme="startrek"] [style*="background-color:#3b9eff"] { background: #f6a000 !important; }
[data-user-theme="startrek"] [style*="border:2px solid #3b9eff"],
[data-user-theme="startrek"] [style*="border-color:#3b9eff"] { border-color: #f6a000 !important; }
[data-user-theme="startrek"] [style*="color:#b060e0"],
[data-user-theme="startrek"] [style*="color: #b060e0"] { color: #cc99cc !important; }
[data-user-theme="startrek"] .badge-pass,
[data-user-theme="startrek"] [class*="status-pass"] { background: rgba(102,204,102,.15) !important; color: #66cc66 !important; border-color: #66cc66 !important; }
[data-user-theme="startrek"] .badge-fail,
[data-user-theme="startrek"] [class*="status-fail"] { background: rgba(255,85,68,.15) !important; color: #ff5544 !important; border-color: #ff5544 !important; }

/* ─── Matrix aggressive overrides ────────────────────────────────────── */
[data-user-theme="matrix"] a,
[data-user-theme="matrix"] .nav-item:hover,
[data-user-theme="matrix"] .stat-num,
[data-user-theme="matrix"] .kpi-num,
[data-user-theme="matrix"] [style*="color:#3b9eff"],
[data-user-theme="matrix"] [style*="color: #3b9eff"],
[data-user-theme="matrix"] [style*="color:#b060e0"],
[data-user-theme="matrix"] [style*="color: #b060e0"],
[data-user-theme="matrix"] [style*="color:#2dcc71"],
[data-user-theme="matrix"] [style*="color: #2dcc71"],
[data-user-theme="matrix"] [style*="color:var(--accent)"] { color: #00ff41 !important; }
[data-user-theme="matrix"] [style*="background:#3b9eff"],
[data-user-theme="matrix"] [style*="background: #3b9eff"],
[data-user-theme="matrix"] [style*="background-color:#3b9eff"],
[data-user-theme="matrix"] [style*="background:#b060e0"],
[data-user-theme="matrix"] [style*="background: #b060e0"] { background: #00ff41 !important; color: #000 !important; }
[data-user-theme="matrix"] [style*="border:2px solid #3b9eff"],
[data-user-theme="matrix"] [style*="border-color:#3b9eff"],
[data-user-theme="matrix"] [style*="border-color:#b060e0"] { border-color: #00b32d !important; }
[data-user-theme="matrix"] .badge-pass,
[data-user-theme="matrix"] [class*="status-pass"] { background: rgba(0,255,65,.15) !important; color: #00ff41 !important; border-color: #00ff41 !important; }
[data-user-theme="matrix"] .badge-fail,
[data-user-theme="matrix"] [class*="status-fail"] { background: rgba(255,0,51,.15) !important; color: #ff0033 !important; border-color: #ff0033 !important; }
[data-user-theme="matrix"] .btn,
[data-user-theme="matrix"] button,
[data-user-theme="matrix"] input,
[data-user-theme="matrix"] select,
[data-user-theme="matrix"] textarea { border-color: #00b32d !important; }

/* ─── Pip-Boy aggressive overrides ───────────────────────────────────── */
[data-user-theme="pipboy"] a,
[data-user-theme="pipboy"] .nav-item:hover,
[data-user-theme="pipboy"] .stat-num,
[data-user-theme="pipboy"] .kpi-num,
[data-user-theme="pipboy"] [style*="color:#3b9eff"],
[data-user-theme="pipboy"] [style*="color: #3b9eff"],
[data-user-theme="pipboy"] [style*="color:#b060e0"],
[data-user-theme="pipboy"] [style*="color: #b060e0"],
[data-user-theme="pipboy"] [style*="color:#2dcc71"],
[data-user-theme="pipboy"] [style*="color: #2dcc71"],
[data-user-theme="pipboy"] [style*="color:var(--accent)"] { color: #ffb000 !important; }
[data-user-theme="pipboy"] [style*="background:#3b9eff"],
[data-user-theme="pipboy"] [style*="background: #3b9eff"],
[data-user-theme="pipboy"] [style*="background-color:#3b9eff"],
[data-user-theme="pipboy"] [style*="background:#b060e0"],
[data-user-theme="pipboy"] [style*="background: #b060e0"] { background: #ffb000 !important; color: #0c0500 !important; }
[data-user-theme="pipboy"] [style*="border:2px solid #3b9eff"],
[data-user-theme="pipboy"] [style*="border-color:#3b9eff"],
[data-user-theme="pipboy"] [style*="border-color:#b060e0"] { border-color: #ffb000 !important; }
[data-user-theme="pipboy"] .badge-pass,
[data-user-theme="pipboy"] [class*="status-pass"] { background: rgba(102,255,102,.15) !important; color: #66ff66 !important; border-color: #66ff66 !important; }
[data-user-theme="pipboy"] .badge-fail,
[data-user-theme="pipboy"] [class*="status-fail"] { background: rgba(255,85,68,.15) !important; color: #ff5544 !important; border-color: #ff5544 !important; }

/* ─── Marvel aggressive overrides ────────────────────────────────────── */
[data-user-theme="marvel"] a,
[data-user-theme="marvel"] .nav-item:hover,
[data-user-theme="marvel"] [style*="color:#3b9eff"],
[data-user-theme="marvel"] [style*="color: #3b9eff"],
[data-user-theme="marvel"] [style*="color:var(--accent)"] { color: #ed1d24 !important; }
[data-user-theme="marvel"] .stat-num,
[data-user-theme="marvel"] .kpi-num { color: #ffce00 !important; }
[data-user-theme="marvel"] [style*="background:#3b9eff"],
[data-user-theme="marvel"] [style*="background: #3b9eff"],
[data-user-theme="marvel"] [style*="background-color:#3b9eff"] { background: #ed1d24 !important; color: #fff !important; }
[data-user-theme="marvel"] [style*="background:#b060e0"],
[data-user-theme="marvel"] [style*="background: #b060e0"] { background: #1d4ed8 !important; }
[data-user-theme="marvel"] [style*="border:2px solid #3b9eff"],
[data-user-theme="marvel"] [style*="border-color:#3b9eff"] { border-color: #ed1d24 !important; }
[data-user-theme="marvel"] .badge-pass,
[data-user-theme="marvel"] [class*="status-pass"] { background: rgba(0,210,106,.15) !important; color: #00d26a !important; border-color: #00d26a !important; }
[data-user-theme="marvel"] .badge-fail,
[data-user-theme="marvel"] [class*="status-fail"] { background: rgba(237,29,36,.15) !important; color: #ed1d24 !important; border-color: #ed1d24 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PASS-2 COVERAGE: high-frequency element classes across all four apps
   (kpi tiles, metric cards, btn-primary/ghost, page headers, cards).
   Without these the themes felt half-applied on Manage/Ops dashboards.
   ═══════════════════════════════════════════════════════════════════════ */

/* Star Trek extra coverage */
[data-user-theme="startrek"] .btn-primary,
[data-user-theme="startrek"] .btn.btn-primary { background: #f6a000 !important; color: #000 !important; border: none !important; }
[data-user-theme="startrek"] .btn-ghost { color: #f6a000 !important; border-color: #f6a000 !important; }
[data-user-theme="startrek"] .kpi-value,
[data-user-theme="startrek"] .metric-value { color: #f6a000 !important; }
[data-user-theme="startrek"] .kpi-label,
[data-user-theme="startrek"] .metric-label { color: #cc99cc !important; text-transform: uppercase; letter-spacing: .06em; }
[data-user-theme="startrek"] .card,
[data-user-theme="startrek"] .metric-card,
[data-user-theme="startrek"] .kpi { border-color: #f6a000 !important; }
[data-user-theme="startrek"] .page-header h1,
[data-user-theme="startrek"] .page-header h2 { color: #f6a000 !important; }

/* Matrix extra coverage */
[data-user-theme="matrix"] .btn-primary,
[data-user-theme="matrix"] .btn.btn-primary { background: #00ff41 !important; color: #000 !important; border-color: #00ff41 !important; text-shadow: none; }
[data-user-theme="matrix"] .btn-ghost { color: #00ff41 !important; border-color: #00b32d !important; }
[data-user-theme="matrix"] .kpi-value,
[data-user-theme="matrix"] .metric-value { color: #00ff41 !important; text-shadow: 0 0 6px rgba(0,255,65,.5); }
[data-user-theme="matrix"] .kpi-label,
[data-user-theme="matrix"] .metric-label { color: #00b32d !important; }
[data-user-theme="matrix"] .card,
[data-user-theme="matrix"] .metric-card,
[data-user-theme="matrix"] .kpi { border-color: #00b32d !important; }
[data-user-theme="matrix"] .page-header h1,
[data-user-theme="matrix"] .page-header h2 { color: #00ff41 !important; }

/* Pip-Boy extra coverage */
[data-user-theme="pipboy"] .btn-primary,
[data-user-theme="pipboy"] .btn.btn-primary { background: #ffb000 !important; color: #0c0500 !important; border-color: #ffb000 !important; text-shadow: none; }
[data-user-theme="pipboy"] .btn-ghost { color: #ffb000 !important; border-color: #ffb000 !important; }
[data-user-theme="pipboy"] .kpi-value,
[data-user-theme="pipboy"] .metric-value { color: #ffb000 !important; text-shadow: 0 0 3px rgba(255,176,0,.45); }
[data-user-theme="pipboy"] .kpi-label,
[data-user-theme="pipboy"] .metric-label { color: #cc8800 !important; }
[data-user-theme="pipboy"] .card,
[data-user-theme="pipboy"] .metric-card,
[data-user-theme="pipboy"] .kpi { border-color: #ffb000 !important; }
[data-user-theme="pipboy"] .page-header h1,
[data-user-theme="pipboy"] .page-header h2 { color: #ffb000 !important; }

/* Marvel extra coverage */
[data-user-theme="marvel"] .btn-ghost { color: #ed1d24 !important; border-color: #ed1d24 !important; }
[data-user-theme="marvel"] .kpi-value,
[data-user-theme="marvel"] .metric-value { color: #ffce00 !important; }
[data-user-theme="marvel"] .kpi-label,
[data-user-theme="marvel"] .metric-label { color: #c9c9d8 !important; text-transform: uppercase; }
[data-user-theme="marvel"] .card,
[data-user-theme="marvel"] .metric-card,
[data-user-theme="marvel"] .kpi { border-color: #ed1d24 !important; background: rgba(31,31,82,.4); }
[data-user-theme="marvel"] .page-header h1,
[data-user-theme="marvel"] .page-header h2 { color: #ed1d24 !important; }

/* ─── Logos: never tint, always render at full original color ────────── */
[data-user-theme] img[src*="TATER.png"],
[data-user-theme] img[src*="TATER-icon.png"],
[data-user-theme] img[alt*="TATER"],
[data-user-theme] img[alt*="logo" i] {
  filter: none !important;
  opacity: 1 !important;
}

/* ─── Theme picker UI (used by tater-themes.js) ──────────────────────── */
.tater-theme-picker-btn {
  background: transparent;
  border: 1px solid var(--border, #2a2f3a);
  color: var(--sub, #8b95a3);
  width: 32px; height: 32px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  flex-shrink: 0;
}
.tater-theme-picker-btn:hover {
  color: var(--accent, #3b9eff);
  border-color: var(--accent, #3b9eff);
}
.tater-theme-picker-btn svg { width: 16px; height: 16px; }

.tater-theme-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.tater-theme-modal {
  background: var(--surface, #161a22);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 12px;
  padding: 24px;
  max-width: 540px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  z-index: 99999;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.tater-theme-modal h2 {
  margin: 0 0 6px 0;
  font-size: 1.15rem;
  color: var(--text, #f0f3f8);
}
.tater-theme-modal p.tt-desc {
  margin: 0 0 18px 0;
  color: var(--sub, #8b95a3);
  font-size: .85rem;
}
.tater-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.tater-theme-card {
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
  background: var(--raised, #1c2028);
  text-align: left;
  font-family: inherit;
  color: var(--text, #f0f3f8);
}
.tater-theme-card:hover {
  border-color: var(--accent, #3b9eff);
  transform: translateY(-2px);
}
.tater-theme-card.tt-active {
  border-color: var(--accent, #3b9eff);
  box-shadow: 0 0 0 2px rgba(59, 158, 255, 0.25);
}
.tater-theme-card-name {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 4px;
}
.tater-theme-card-desc {
  font-size: .78rem;
  color: var(--sub, #8b95a3);
  line-height: 1.35;
}
.tater-theme-swatch {
  display: inline-flex;
  gap: 4px;
  margin-top: 8px;
}
.tater-theme-swatch span {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.tater-theme-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #2a2f3a);
}
.tater-theme-modal-footer button {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border, #2a2f3a);
  background: transparent;
  color: var(--text, #f0f3f8);
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
}
.tater-theme-modal-footer button:hover {
  border-color: var(--accent, #3b9eff);
  color: var(--accent, #3b9eff);
}