/* ===== THEME SYSTEM — 14 Curated Skins =====
   Each theme overrides all CSS custom properties.
   Load order: styles.css (defaults/root) → themes.css (overrides)
   ============================================ */

/* ── 1. Midnight Steel — DEFAULT (also in :root) ── */
[data-theme="midnight-steel"] {
  --bg: #1a1a26; --bg-2: #232332; --bg-3: #252535; --bg-4: #2a2a3c;
  --border: #333348; --border-light: #2e2e42;
  --blue: #4a90d4; --blue-hover: #5ba3e0; --blue-dim: rgba(74,144,212,0.15);
  --text: #e8e8f0; --text-2: #c8c8dc; --text-3: #8888a8; --text-4: #555570;
  --surface-0: #1a1a26; --surface-1: #1e1e2e; --surface-2: #252535; --surface-3: #2c2c40;
  --glass: rgba(37,37,53,0.65);
  --glass-subtle: rgba(255,255,255,0.03); --glass-medium: rgba(255,255,255,0.05); --glass-strong: rgba(255,255,255,0.08);
  --glass-border: rgba(74,144,212,0.12); --glass-border-subtle: rgba(255,255,255,0.06);
  --glass-border-active: rgba(74,144,212,0.3); --glass-hover: rgba(74,144,212,0.08);
  --glow-blue: 0 0 20px rgba(74,144,212,0.15); --glow-blue-soft: 0 0 30px rgba(74,144,212,0.08); --glow-blue-strong: 0 0 40px rgba(74,144,212,0.25);
  --glow-green: 0 0 12px rgba(82,196,122,0.1); --glow-green-soft: 0 0 20px rgba(82,196,122,0.08);
  --gradient-primary: linear-gradient(135deg,#4a90d4 0%,#52c47a 100%);
  --gradient-border: linear-gradient(135deg,rgba(74,144,212,0.4),rgba(82,196,122,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.4); --shadow-lg: 0 4px 20px rgba(0,0,0,0.5);
}

/* ── 2. Black & Gold ── */
[data-theme="black-gold"] {
  --bg: #0d0d0d; --bg-2: #151515; --bg-3: #1c1c1c; --bg-4: #242424;
  --border: #303030; --border-light: #282828;
  --blue: #c9a84c; --blue-hover: #d9b85c; --blue-dim: rgba(201,168,76,0.15);
  --text: #e8e8e0; --text-2: #c8c8bc; --text-3: #888878; --text-4: #555550;
  --surface-0: #0d0d0d; --surface-1: #121212; --surface-2: #1c1c1c; --surface-3: #242424;
  --glass: rgba(28,28,28,0.7);
  --glass-subtle: rgba(255,255,255,0.02); --glass-medium: rgba(255,255,255,0.04); --glass-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(201,168,76,0.12); --glass-border-subtle: rgba(255,255,255,0.05);
  --glass-border-active: rgba(201,168,76,0.32); --glass-hover: rgba(201,168,76,0.08);
  --glow-blue: 0 0 20px rgba(201,168,76,0.15); --glow-blue-soft: 0 0 30px rgba(201,168,76,0.08); --glow-blue-strong: 0 0 40px rgba(201,168,76,0.28);
  --glow-green: 0 0 12px rgba(82,196,122,0.1); --glow-green-soft: 0 0 20px rgba(82,196,122,0.08);
  --gradient-primary: linear-gradient(135deg,#c9a84c 0%,#e8c070 100%);
  --gradient-border: linear-gradient(135deg,rgba(201,168,76,0.4),rgba(232,192,112,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.6); --shadow-lg: 0 4px 20px rgba(0,0,0,0.7);
}

/* ── 3. Royal Purple ── */
[data-theme="royal-purple"] {
  --bg: #120e1a; --bg-2: #1a1525; --bg-3: #1e1830; --bg-4: #241d3a;
  --border: #2e2240; --border-light: #281e38;
  --blue: #9b72cf; --blue-hover: #ab82df; --blue-dim: rgba(155,114,207,0.15);
  --text: #ede8f5; --text-2: #cdc8dd; --text-3: #8d88a8; --text-4: #5d5878;
  --surface-0: #120e1a; --surface-1: #181325; --surface-2: #1e1830; --surface-3: #241d3a;
  --glass: rgba(30,24,48,0.68);
  --glass-subtle: rgba(255,255,255,0.03); --glass-medium: rgba(255,255,255,0.05); --glass-strong: rgba(255,255,255,0.09);
  --glass-border: rgba(155,114,207,0.13); --glass-border-subtle: rgba(255,255,255,0.06);
  --glass-border-active: rgba(155,114,207,0.32); --glass-hover: rgba(155,114,207,0.09);
  --glow-blue: 0 0 20px rgba(155,114,207,0.18); --glow-blue-soft: 0 0 30px rgba(155,114,207,0.09); --glow-blue-strong: 0 0 40px rgba(155,114,207,0.3);
  --glow-green: 0 0 12px rgba(82,196,122,0.1); --glow-green-soft: 0 0 20px rgba(82,196,122,0.08);
  --gradient-primary: linear-gradient(135deg,#9b72cf 0%,#7b52af 100%);
  --gradient-border: linear-gradient(135deg,rgba(155,114,207,0.4),rgba(123,82,175,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.45); --shadow-lg: 0 4px 20px rgba(0,0,0,0.55);
}

/* ── 4. Lavender Bloom (light) ── */
[data-theme="lavender-bloom"] {
  --bg: #f5f2fa; --bg-2: #ede8f5; --bg-3: #e4ddf0; --bg-4: #dbd3eb;
  --border: #cac3de; --border-light: #d4ced8;
  --blue: #6b48b8; --blue-hover: #5c3aa8; --blue-dim: rgba(107,72,184,0.12);
  --green: #2a9456; --yellow: #b07a18; --red: #c03050;
  --text: #1a1525; --text-2: #3a3050; --text-3: #6a6080; --text-4: #9a90b0;
  --surface-0: #f5f2fa; --surface-1: #ede8f5; --surface-2: #e4ddf0; --surface-3: #dbd3eb;
  --glass: rgba(200,188,228,0.6);
  --glass-subtle: rgba(0,0,0,0.03); --glass-medium: rgba(0,0,0,0.05); --glass-strong: rgba(0,0,0,0.09);
  --glass-border: rgba(107,72,184,0.16); --glass-border-subtle: rgba(0,0,0,0.08);
  --glass-border-active: rgba(107,72,184,0.38); --glass-hover: rgba(107,72,184,0.09);
  --glow-blue: 0 0 20px rgba(107,72,184,0.14); --glow-blue-soft: 0 0 30px rgba(107,72,184,0.07); --glow-blue-strong: 0 0 40px rgba(107,72,184,0.22);
  --glow-green: 0 0 12px rgba(42,148,86,0.1); --glow-green-soft: 0 0 20px rgba(42,148,86,0.08);
  --gradient-primary: linear-gradient(135deg,#6b48b8 0%,#9b72cf 100%);
  --gradient-border: linear-gradient(135deg,rgba(107,72,184,0.4),rgba(155,114,207,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.14); --shadow-lg: 0 4px 20px rgba(0,0,0,0.18);
}

/* ── 5. Navy Slate ── */
[data-theme="navy-slate"] {
  --bg: #0e1521; --bg-2: #141e2e; --bg-3: #192438; --bg-4: #1e2c44;
  --border: #253450; --border-light: #1e2c44;
  --blue: #5c9ce6; --blue-hover: #6cacf0; --blue-dim: rgba(92,156,230,0.15);
  --text: #e2eaf8; --text-2: #c2cee8; --text-3: #7a96c0; --text-4: #4a6890;
  --surface-0: #0e1521; --surface-1: #121b2c; --surface-2: #192438; --surface-3: #1e2c44;
  --glass: rgba(25,36,56,0.68);
  --glass-subtle: rgba(255,255,255,0.03); --glass-medium: rgba(255,255,255,0.05); --glass-strong: rgba(255,255,255,0.09);
  --glass-border: rgba(92,156,230,0.13); --glass-border-subtle: rgba(255,255,255,0.06);
  --glass-border-active: rgba(92,156,230,0.32); --glass-hover: rgba(92,156,230,0.09);
  --glow-blue: 0 0 20px rgba(92,156,230,0.18); --glow-blue-soft: 0 0 30px rgba(92,156,230,0.09); --glow-blue-strong: 0 0 40px rgba(92,156,230,0.3);
  --glow-green: 0 0 12px rgba(82,196,122,0.1); --glow-green-soft: 0 0 20px rgba(82,196,122,0.08);
  --gradient-primary: linear-gradient(135deg,#5c9ce6 0%,#4a8cd4 100%);
  --gradient-border: linear-gradient(135deg,rgba(92,156,230,0.4),rgba(74,140,212,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.45); --shadow-lg: 0 4px 20px rgba(0,0,0,0.55);
}

/* ── 7. Slate ── */
[data-theme="slate"] {
  --bg: #1a1e24; --bg-2: #21252c; --bg-3: #272b33; --bg-4: #2d323c;
  --border: #363c48; --border-light: #2e343f;
  --blue: #6ca0cc; --blue-hover: #7cb0dc; --blue-dim: rgba(108,160,204,0.15);
  --text: #e4e8f0; --text-2: #c4c8d8; --text-3: #8490a8; --text-4: #545e78;
  --surface-0: #1a1e24; --surface-1: #1e2228; --surface-2: #272b33; --surface-3: #2d323c;
  --glass: rgba(39,43,51,0.68);
  --glass-subtle: rgba(255,255,255,0.03); --glass-medium: rgba(255,255,255,0.05); --glass-strong: rgba(255,255,255,0.08);
  --glass-border: rgba(108,160,204,0.12); --glass-border-subtle: rgba(255,255,255,0.06);
  --glass-border-active: rgba(108,160,204,0.3); --glass-hover: rgba(108,160,204,0.08);
  --glow-blue: 0 0 20px rgba(108,160,204,0.15); --glow-blue-soft: 0 0 30px rgba(108,160,204,0.08); --glow-blue-strong: 0 0 40px rgba(108,160,204,0.25);
  --glow-green: 0 0 12px rgba(82,196,122,0.1); --glow-green-soft: 0 0 20px rgba(82,196,122,0.08);
  --gradient-primary: linear-gradient(135deg,#6ca0cc 0%,#4a80ac 100%);
  --gradient-border: linear-gradient(135deg,rgba(108,160,204,0.4),rgba(74,128,172,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.4); --shadow-lg: 0 4px 20px rgba(0,0,0,0.5);
}

/* ── 8. Ocean Breeze (light) ── */
[data-theme="ocean-breeze"] {
  --bg: #eef6fa; --bg-2: #e2eff6; --bg-3: #d5e8f0; --bg-4: #c8e0ea;
  --border: #b0ccde; --border-light: #bcd4e4;
  --blue: #1a8fac; --blue-hover: #1580a0; --blue-dim: rgba(26,143,172,0.12);
  --green: #1a9460; --yellow: #b07a10; --red: #c03040;
  --text: #0c2232; --text-2: #1c3c52; --text-3: #4a6878; --text-4: #7a9aa8;
  --surface-0: #eef6fa; --surface-1: #e2eff6; --surface-2: #d5e8f0; --surface-3: #c8e0ea;
  --glass: rgba(175,208,228,0.6);
  --glass-subtle: rgba(0,0,0,0.03); --glass-medium: rgba(0,0,0,0.05); --glass-strong: rgba(0,0,0,0.09);
  --glass-border: rgba(26,143,172,0.16); --glass-border-subtle: rgba(0,0,0,0.07);
  --glass-border-active: rgba(26,143,172,0.38); --glass-hover: rgba(26,143,172,0.09);
  --glow-blue: 0 0 20px rgba(26,143,172,0.14); --glow-blue-soft: 0 0 30px rgba(26,143,172,0.07); --glow-blue-strong: 0 0 40px rgba(26,143,172,0.22);
  --glow-green: 0 0 12px rgba(26,148,96,0.1); --glow-green-soft: 0 0 20px rgba(26,148,96,0.08);
  --gradient-primary: linear-gradient(135deg,#1a8fac 0%,#2aafc8 100%);
  --gradient-border: linear-gradient(135deg,rgba(26,143,172,0.4),rgba(42,175,200,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.12); --shadow-lg: 0 4px 20px rgba(0,0,0,0.16);
}

/* ── 9. U of M Wolverines ── */
[data-theme="umich-wolverines"] {
  --bg: #000d1a; --bg-2: #001426; --bg-3: #001a32; --bg-4: #00223e;
  --border: #002c52; --border-light: #002244;
  --blue: #FFCB05; --blue-hover: #ffd418; --blue-dim: rgba(255,203,5,0.15);
  --text: #e4eff8; --text-2: #c4d8ee; --text-3: #7aa0c0; --text-4: #4a7090;
  --surface-0: #000d1a; --surface-1: #001020; --surface-2: #001a32; --surface-3: #00223e;
  --glass: rgba(0,26,50,0.7);
  --glass-subtle: rgba(255,255,255,0.02); --glass-medium: rgba(255,255,255,0.04); --glass-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(255,203,5,0.15); --glass-border-subtle: rgba(255,255,255,0.05);
  --glass-border-active: rgba(255,203,5,0.38); --glass-hover: rgba(255,203,5,0.09);
  --glow-blue: 0 0 20px rgba(255,203,5,0.14); --glow-blue-soft: 0 0 30px rgba(255,203,5,0.07); --glow-blue-strong: 0 0 40px rgba(255,203,5,0.24);
  --glow-green: 0 0 12px rgba(82,196,122,0.1); --glow-green-soft: 0 0 20px rgba(82,196,122,0.08);
  --gradient-primary: linear-gradient(135deg,#FFCB05 0%,#FF9F00 100%);
  --gradient-border: linear-gradient(135deg,rgba(255,203,5,0.4),rgba(255,159,0,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.6); --shadow-lg: 0 4px 20px rgba(0,0,0,0.7);
}

/* ── 10. Michigan State Spartans ── */
[data-theme="msu-spartans"] {
  --bg: #081410; --bg-2: #0d1c16; --bg-3: #12251c; --bg-4: #172c22;
  --border: #1e3c2e; --border-light: #1a3228;
  --blue: #5fc478; --blue-hover: #6fd488; --blue-dim: rgba(95,196,120,0.15);
  --text: #e0ece4; --text-2: #c0d8c8; --text-3: #70a888; --text-4: #407858;
  --surface-0: #081410; --surface-1: #0c1a14; --surface-2: #12251c; --surface-3: #172c22;
  --glass: rgba(18,37,28,0.68);
  --glass-subtle: rgba(255,255,255,0.03); --glass-medium: rgba(255,255,255,0.05); --glass-strong: rgba(255,255,255,0.08);
  --glass-border: rgba(95,196,120,0.13); --glass-border-subtle: rgba(255,255,255,0.05);
  --glass-border-active: rgba(95,196,120,0.32); --glass-hover: rgba(95,196,120,0.09);
  --glow-blue: 0 0 20px rgba(95,196,120,0.18); --glow-blue-soft: 0 0 30px rgba(95,196,120,0.09); --glow-blue-strong: 0 0 40px rgba(95,196,120,0.3);
  --glow-green: 0 0 12px rgba(95,196,120,0.15); --glow-green-soft: 0 0 20px rgba(95,196,120,0.1);
  --gradient-primary: linear-gradient(135deg,#5fc478 0%,#40a458 100%);
  --gradient-border: linear-gradient(135deg,rgba(95,196,120,0.4),rgba(64,164,88,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.5); --shadow-lg: 0 4px 20px rgba(0,0,0,0.6);
}

/* ── 11. Detroit Red Wings ── */
[data-theme="det-redwings"] {
  --bg: #0e0205; --bg-2: #160308; --bg-3: #1e040c; --bg-4: #280613;
  --border: #360a1a; --border-light: #2c0614;
  --blue: #CE1126; --blue-hover: #de2136; --blue-dim: rgba(206,17,38,0.15);
  --text: #f0e8e8; --text-2: #d8c8c8; --text-3: #a08080; --text-4: #705050;
  --surface-0: #0e0205; --surface-1: #130208; --surface-2: #1e040c; --surface-3: #280613;
  --glass: rgba(30,4,12,0.7);
  --glass-subtle: rgba(255,255,255,0.02); --glass-medium: rgba(255,255,255,0.04); --glass-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(206,17,38,0.16); --glass-border-subtle: rgba(255,255,255,0.05);
  --glass-border-active: rgba(206,17,38,0.38); --glass-hover: rgba(206,17,38,0.09);
  --glow-blue: 0 0 20px rgba(206,17,38,0.18); --glow-blue-soft: 0 0 30px rgba(206,17,38,0.09); --glow-blue-strong: 0 0 40px rgba(206,17,38,0.3);
  --glow-green: 0 0 12px rgba(82,196,122,0.08); --glow-green-soft: 0 0 20px rgba(82,196,122,0.06);
  --gradient-primary: linear-gradient(135deg,#CE1126 0%,#ff4444 100%);
  --gradient-border: linear-gradient(135deg,rgba(206,17,38,0.4),rgba(255,68,68,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.6); --shadow-lg: 0 4px 20px rgba(0,0,0,0.7);
}

/* ── 12. Detroit Tigers ── */
[data-theme="det-tigers"] {
  --bg: #080f18; --bg-2: #0c1520; --bg-3: #101c2a; --bg-4: #142234;
  --border: #1c2e44; --border-light: #182838;
  --blue: #e06030; --blue-hover: #f07040; --blue-dim: rgba(224,96,48,0.15);
  --text: #e8eef4; --text-2: #c8d4e0; --text-3: #7898b0; --text-4: #486888;
  --surface-0: #080f18; --surface-1: #0c1420; --surface-2: #101c2a; --surface-3: #142234;
  --glass: rgba(16,28,42,0.68);
  --glass-subtle: rgba(255,255,255,0.03); --glass-medium: rgba(255,255,255,0.05); --glass-strong: rgba(255,255,255,0.08);
  --glass-border: rgba(224,96,48,0.13); --glass-border-subtle: rgba(255,255,255,0.06);
  --glass-border-active: rgba(224,96,48,0.32); --glass-hover: rgba(224,96,48,0.09);
  --glow-blue: 0 0 20px rgba(224,96,48,0.18); --glow-blue-soft: 0 0 30px rgba(224,96,48,0.09); --glow-blue-strong: 0 0 40px rgba(224,96,48,0.3);
  --glow-green: 0 0 12px rgba(82,196,122,0.08); --glow-green-soft: 0 0 20px rgba(82,196,122,0.06);
  --gradient-primary: linear-gradient(135deg,#e06030 0%,#FA4616 100%);
  --gradient-border: linear-gradient(135deg,rgba(224,96,48,0.4),rgba(250,70,22,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.5); --shadow-lg: 0 4px 20px rgba(0,0,0,0.6);
}

/* ── 13. Detroit Lions ── */
[data-theme="det-lions"] {
  --bg: #041530; --bg-2: #081e40; --bg-3: #0c2550; --bg-4: #102c60;
  --border: #163878; --border-light: #123068;
  --blue: #00a8e8; --blue-hover: #10b8f8; --blue-dim: rgba(0,168,232,0.15);
  --text: #e0ecf8; --text-2: #c0d4f0; --text-3: #6898c8; --text-4: #3868a8;
  --surface-0: #041530; --surface-1: #061b3c; --surface-2: #0c2550; --surface-3: #102c60;
  --glass: rgba(12,37,80,0.7);
  --glass-subtle: rgba(255,255,255,0.02); --glass-medium: rgba(255,255,255,0.04); --glass-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(0,168,232,0.16); --glass-border-subtle: rgba(255,255,255,0.05);
  --glass-border-active: rgba(0,168,232,0.38); --glass-hover: rgba(0,168,232,0.09);
  --glow-blue: 0 0 20px rgba(0,168,232,0.18); --glow-blue-soft: 0 0 30px rgba(0,168,232,0.09); --glow-blue-strong: 0 0 40px rgba(0,168,232,0.3);
  --glow-green: 0 0 12px rgba(82,196,122,0.08); --glow-green-soft: 0 0 20px rgba(82,196,122,0.06);
  --gradient-primary: linear-gradient(135deg,#00a8e8 0%,#0076b6 100%);
  --gradient-border: linear-gradient(135deg,rgba(0,168,232,0.4),rgba(0,118,182,0.2));
  --shadow: 0 2px 8px rgba(0,0,0,0.55); --shadow-lg: 0 4px 20px rgba(0,0,0,0.65);
}

/* ── REALTEAM Cobalt ── */
[data-theme="realteam-cobalt"] {
  --bg: #080e18; --bg-2: #0e1624; --bg-3: #131e2e; --bg-4: #192638;
  --border: #1e3050; --border-light: #182840;
  --blue: #1e6fc8; --blue-hover: #2a80da; --blue-dim: rgba(30,111,200,0.15);
  --text: #e4ecf8; --text-2: #c0ceea; --text-3: #6888b8; --text-4: #3858a0;
  --surface-0: #080e18; --surface-1: #0c1420; --surface-2: #131e2e; --surface-3: #192638;
  --glass: rgba(19,30,46,0.70);
  --glass-subtle: rgba(255,255,255,0.03); --glass-medium: rgba(255,255,255,0.05); --glass-strong: rgba(255,255,255,0.08);
  --glass-border: rgba(30,111,200,0.16); --glass-border-subtle: rgba(255,255,255,0.06);
  --glass-border-active: rgba(30,111,200,0.38); --glass-hover: rgba(30,111,200,0.10);
  --glow-blue: 0 0 20px rgba(30,111,200,0.20); --glow-blue-soft: 0 0 30px rgba(30,111,200,0.10); --glow-blue-strong: 0 0 40px rgba(30,111,200,0.32);
  --glow-green: 0 0 12px rgba(82,196,122,0.08); --glow-green-soft: 0 0 20px rgba(82,196,122,0.06);
  --gradient-primary: linear-gradient(135deg,#1e6fc8 0%,#2a8fe8 100%);
  --gradient-border: linear-gradient(135deg,rgba(30,111,200,0.45),rgba(42,143,232,0.25));
  --shadow: 0 2px 8px rgba(0,0,0,0.55); --shadow-lg: 0 4px 20px rgba(0,0,0,0.65);
}

/* ── REALTEAM Dark (Black & White) ── */
[data-theme="realteam"] {
  --bg: #080808; --bg-2: #101010; --bg-3: #181818; --bg-4: #202020;
  --border: #303030; --border-light: #282828;
  --blue: #d8d8d8; --blue-hover: #ffffff; --blue-dim: rgba(216,216,216,0.12);
  --text: #f2f2f2; --text-2: #c0c0c0; --text-3: #787878; --text-4: #505050;
  --surface-0: #080808; --surface-1: #121212; --surface-2: #1a1a1a; --surface-3: #222222;
  --glass: rgba(16,16,16,0.75);
  --glass-subtle: rgba(255,255,255,0.02); --glass-medium: rgba(255,255,255,0.04); --glass-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.10); --glass-border-subtle: rgba(255,255,255,0.05);
  --glass-border-active: rgba(255,255,255,0.28); --glass-hover: rgba(255,255,255,0.06);
  --glow-blue: 0 0 20px rgba(255,255,255,0.10); --glow-blue-soft: 0 0 30px rgba(255,255,255,0.05); --glow-blue-strong: 0 0 40px rgba(255,255,255,0.18);
  --glow-green: 0 0 12px rgba(82,196,122,0.08); --glow-green-soft: 0 0 20px rgba(82,196,122,0.05);
  --gradient-primary: linear-gradient(135deg,#d0d0d0 0%,#888888 100%);
  --gradient-border: linear-gradient(135deg,rgba(200,200,200,0.25),rgba(100,100,100,0.15));
  --shadow: 0 2px 8px rgba(0,0,0,0.7); --shadow-lg: 0 4px 20px rgba(0,0,0,0.85);
}

/* ── REALTEAM Gray ── */
[data-theme="realteam-gray"] {
  --bg: #161616; --bg-2: #202020; --bg-3: #282828; --bg-4: #323232;
  --border: #404040; --border-light: #383838;
  --blue: #909090; --blue-hover: #b0b0b0; --blue-dim: rgba(144,144,144,0.12);
  --text: #efefef; --text-2: #c8c8c8; --text-3: #888888; --text-4: #606060;
  --surface-0: #161616; --surface-1: #1e1e1e; --surface-2: #282828; --surface-3: #323232;
  --glass: rgba(32,32,32,0.72);
  --glass-subtle: rgba(255,255,255,0.02); --glass-medium: rgba(255,255,255,0.04); --glass-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(144,144,144,0.14); --glass-border-subtle: rgba(255,255,255,0.06);
  --glass-border-active: rgba(144,144,144,0.32); --glass-hover: rgba(144,144,144,0.08);
  --glow-blue: 0 0 20px rgba(144,144,144,0.12); --glow-blue-soft: 0 0 30px rgba(144,144,144,0.06); --glow-blue-strong: 0 0 40px rgba(144,144,144,0.20);
  --glow-green: 0 0 12px rgba(82,196,122,0.08); --glow-green-soft: 0 0 20px rgba(82,196,122,0.05);
  --gradient-primary: linear-gradient(135deg,#909090 0%,#606060 100%);
  --gradient-border: linear-gradient(135deg,rgba(144,144,144,0.25),rgba(96,96,96,0.15));
  --shadow: 0 2px 8px rgba(0,0,0,0.65); --shadow-lg: 0 4px 20px rgba(0,0,0,0.80);
}

/* ── Clean Day (light) ── */
[data-theme="clean-day"] {
  --bg: #f8f9fb; --bg-2: #eef1f5; --bg-3: #e4e8ee; --bg-4: #d8dee8;
  --border: #c4ccd8; --border-light: #cdd4df;
  --blue: #2563a8; --blue-hover: #1a52a0; --blue-dim: rgba(37,99,168,0.10);
  --green: #1a9460; --yellow: #b07a10; --red: #c03040;
  --text: #0f1825; --text-2: #283850; --text-3: #5870a0; --text-4: #8898c0;
  --surface-0: #f8f9fb; --surface-1: #eef1f5; --surface-2: #e4e8ee; --surface-3: #d8dee8;
  --glass: rgba(210,218,232,0.65);
  --glass-subtle: rgba(0,0,0,0.02); --glass-medium: rgba(0,0,0,0.04); --glass-strong: rgba(0,0,0,0.08);
  --glass-border: rgba(37,99,168,0.14); --glass-border-subtle: rgba(0,0,0,0.07);
  --glass-border-active: rgba(37,99,168,0.35); --glass-hover: rgba(37,99,168,0.08);
  --glow-blue: 0 0 20px rgba(37,99,168,0.12); --glow-blue-soft: 0 0 30px rgba(37,99,168,0.06); --glow-blue-strong: 0 0 40px rgba(37,99,168,0.20);
  --glow-green: 0 0 12px rgba(26,148,96,0.10); --glow-green-soft: 0 0 20px rgba(26,148,96,0.06);
  --gradient-primary: linear-gradient(135deg,#2563a8 0%,#4a83c8 100%);
  --gradient-border: linear-gradient(135deg,rgba(37,99,168,0.38),rgba(74,131,200,0.20));
  --shadow: 0 2px 8px rgba(0,0,0,0.10); --shadow-lg: 0 4px 20px rgba(0,0,0,0.14);
}

/* ── 16. Central Michigan Chippewas ── */
[data-theme="cmu-chippewas"] {
  --bg: #140010; --bg-2: #200018; --bg-3: #2c0020; --bg-4: #380028;
  --border: #4a0034; --border-light: #3e002c;
  --blue: #FFC82E; --blue-hover: #ffd550; --blue-dim: rgba(255,200,46,0.15);
  --text: #f0e8f0; --text-2: #d0b8c8; --text-3: #987888; --text-4: #685060;
  --surface-0: #140010; --surface-1: #1c0016; --surface-2: #2c0020; --surface-3: #380028;
  --glass: rgba(44,0,32,0.7);
  --glass-subtle: rgba(255,255,255,0.02); --glass-medium: rgba(255,255,255,0.04); --glass-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(255,200,46,0.15); --glass-border-subtle: rgba(255,255,255,0.05);
  --glass-border-active: rgba(255,200,46,0.35); --glass-hover: rgba(255,200,46,0.09);
  --glow-blue: 0 0 20px rgba(255,200,46,0.16); --glow-blue-soft: 0 0 30px rgba(255,200,46,0.08); --glow-blue-strong: 0 0 40px rgba(255,200,46,0.26);
  --glow-green: 0 0 12px rgba(82,196,122,0.08); --glow-green-soft: 0 0 20px rgba(82,196,122,0.06);
  --gradient-primary: linear-gradient(135deg,#FFC82E 0%,#6A0032 100%);
  --gradient-border: linear-gradient(135deg,rgba(255,200,46,0.4),rgba(106,0,50,0.3));
  --shadow: 0 2px 8px rgba(0,0,0,0.6); --shadow-lg: 0 4px 20px rgba(0,0,0,0.7);
}

/* ── 16. Detroit Pistons ── */
[data-theme="det-pistons"] {
  --bg: #0a1030; --bg-2: #0e1840; --bg-3: #122050; --bg-4: #162860;
  --border: #1e3478; --border-light: #182c68;
  --blue: #C8102E; --blue-hover: #d82040; --blue-dim: rgba(200,16,46,0.15);
  --text: #e4ecf8; --text-2: #c0d0e8; --text-3: #7090b8; --text-4: #406090;
  --surface-0: #0a1030; --surface-1: #0c1438; --surface-2: #122050; --surface-3: #162860;
  --glass: rgba(18,32,80,0.7);
  --glass-subtle: rgba(255,255,255,0.03); --glass-medium: rgba(255,255,255,0.05); --glass-strong: rgba(255,255,255,0.08);
  --glass-border: rgba(200,16,46,0.16); --glass-border-subtle: rgba(255,255,255,0.06);
  --glass-border-active: rgba(200,16,46,0.38); --glass-hover: rgba(200,16,46,0.09);
  --glow-blue: 0 0 20px rgba(200,16,46,0.18); --glow-blue-soft: 0 0 30px rgba(200,16,46,0.09); --glow-blue-strong: 0 0 40px rgba(200,16,46,0.3);
  --glow-green: 0 0 12px rgba(82,196,122,0.08); --glow-green-soft: 0 0 20px rgba(82,196,122,0.06);
  --gradient-primary: linear-gradient(135deg,#C8102E 0%,#1D428A 100%);
  --gradient-border: linear-gradient(135deg,rgba(200,16,46,0.4),rgba(29,66,138,0.3));
  --shadow: 0 2px 8px rgba(0,0,0,0.55); --shadow-lg: 0 4px 20px rgba(0,0,0,0.65);
}

/* ── Theme picker UI ── */
.theme-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-3); padding: 8px 8px 4px; margin-top: 4px;
}
.theme-option {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--text-2);
  transition: background 0.15s;
}
.theme-option:hover { background: var(--bg-4); }
.theme-option.active { background: var(--blue-dim); color: var(--blue); font-weight: 600; }
.theme-option-colors {
  display: flex; width: 22px; height: 22px; border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12); flex-shrink: 0;
}
.theme-option-colors span { flex: 1; }