/* ============================================================
   GLOBAL THEME ENGINE
   ============================================================ */

:root{
  --font-display:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  --font-mono:'SF Mono',ui-monospace,Menlo,monospace;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --transition-theme:
    background-color .6s ease,
    background .6s ease,
    color .4s ease,
    border-color .5s ease,
    box-shadow .5s ease,
    filter .5s ease,
    opacity .5s ease;
}

[data-theme="light-1"]{
  --primary:#4F46E5; --secondary:#6366F1; --accent:#06B6D4;
  --highlight:#10B981; --warning:#F59E0B;
  --bg:#F8FAFC; --bg-2:#F2F7FF; --bg-3:#EEF5FF; --bg-4:#FFFFFF;
  --surface:#FFFFFF; --card:rgba(255,255,255,.72); --glass:rgba(255,255,255,.6);
  --border:rgba(99,102,241,.12); --text:#0F172A; --muted:#475569;
  --grid-op:.035; --mesh-op:1; --orb-op:.05; --particle-op:.35;
  --glow:rgba(6,182,212,.35); --shadow:rgba(15,23,42,.08); --blur:70px;
  --btn-bg:#4F46E5; --btn-text:#fff; --btn-hover:#4338CA;
  --selection:rgba(99,102,241,.25); --scrollbar:#C7D2FE;
  --mesh-speed:40s; --orb-speed:26s;
}
[data-theme="light-2"]{
  --primary:#0284C7; --secondary:#38BDF8; --accent:#22D3EE;
  --highlight:#34D399; --warning:#FBBF24;
  --bg:#F0F9FF; --bg-2:#E0F2FE; --bg-3:#DFF3FF; --bg-4:#FFFFFF;
  --surface:#FFFFFF; --card:rgba(255,255,255,.7); --glass:rgba(255,255,255,.55);
  --border:rgba(56,189,248,.16); --text:#0C2233; --muted:#3E647A;
  --grid-op:.04; --mesh-op:1; --orb-op:.07; --particle-op:.4;
  --glow:rgba(34,211,238,.4); --shadow:rgba(2,132,199,.1); --blur:80px;
  --btn-bg:#0284C7; --btn-text:#fff; --btn-hover:#0369A1;
  --selection:rgba(56,189,248,.3); --scrollbar:#BAE6FD;
  --mesh-speed:30s; --orb-speed:22s;
}
[data-theme="light-3"]{
  --primary:#0071E3; --secondary:#5E9EFF; --accent:#00B4D8;
  --highlight:#30D158; --warning:#FF9F0A;
  --bg:#FBFBFD; --bg-2:#F5F5F7; --bg-3:#F2F2F4; --bg-4:#FFFFFF;
  --surface:#FFFFFF; --card:rgba(255,255,255,.8); --glass:rgba(255,255,255,.65);
  --border:rgba(0,0,0,.08); --text:#1D1D1F; --muted:#6E6E73;
  --grid-op:.02; --mesh-op:.6; --orb-op:.04; --particle-op:.25;
  --glow:rgba(0,113,227,.3); --shadow:rgba(0,0,0,.06); --blur:90px;
  --btn-bg:#0071E3; --btn-text:#fff; --btn-hover:#0058B0;
  --selection:rgba(0,113,227,.22); --scrollbar:#D2D2D7;
  --mesh-speed:55s; --orb-speed:34s;
}
[data-theme="light-4"]{
  --primary:#8B5CF6; --secondary:#A78BFA; --accent:#D946EF;
  --highlight:#34D399; --warning:#F59E0B;
  --bg:#FAF8FF; --bg-2:#F3EEFF; --bg-3:#EFE7FE; --bg-4:#FFFFFF;
  --surface:#FFFFFF; --card:rgba(255,255,255,.72); --glass:rgba(255,255,255,.58);
  --border:rgba(139,92,246,.15); --text:#241A3A; --muted:#6B5C87;
  --grid-op:.03; --mesh-op:1; --orb-op:.06; --particle-op:.35;
  --glow:rgba(217,70,239,.35); --shadow:rgba(139,92,246,.12); --blur:75px;
  --btn-bg:#8B5CF6; --btn-text:#fff; --btn-hover:#7C3AED;
  --selection:rgba(167,139,250,.3); --scrollbar:#DDD6FE;
  --mesh-speed:38s; --orb-speed:28s;
}
[data-theme="light-5"]{
  --primary:#059669; --secondary:#34D399; --accent:#2DD4BF;
  --highlight:#84CC16; --warning:#F59E0B;
  --bg:#F3FBF8; --bg-2:#E6F8F1; --bg-3:#DFF7EE; --bg-4:#FFFFFF;
  --surface:#FFFFFF; --card:rgba(255,255,255,.72); --glass:rgba(255,255,255,.58);
  --border:rgba(5,150,105,.14); --text:#0C2A20; --muted:#4B7566;
  --grid-op:.035; --mesh-op:1; --orb-op:.06; --particle-op:.35;
  --glow:rgba(45,212,191,.35); --shadow:rgba(5,150,105,.1); --blur:72px;
  --btn-bg:#059669; --btn-text:#fff; --btn-hover:#047857;
  --selection:rgba(52,211,153,.3); --scrollbar:#A7F3D0;
  --mesh-speed:42s; --orb-speed:29s;
}
[data-theme="light-6"]{
  --primary:#EA580C; --secondary:#FB923C; --accent:#F59E0B;
  --highlight:#65A30D; --warning:#DC2626;
  --bg:#FFFBF5; --bg-2:#FFF3E6; --bg-3:#FFEDDA; --bg-4:#FFFFFF;
  --surface:#FFFEFA; --card:rgba(255,255,255,.75); --glass:rgba(255,251,245,.6);
  --border:rgba(234,88,12,.16); --text:#2A1608; --muted:#7A5B44;
  --grid-op:.03; --mesh-op:1; --orb-op:.06; --particle-op:.4;
  --glow:rgba(245,158,11,.4); --shadow:rgba(234,88,12,.1); --blur:70px;
  --btn-bg:#EA580C; --btn-text:#fff; --btn-hover:#C2410C;
  --selection:rgba(251,146,60,.3); --scrollbar:#FED7AA;
  --mesh-speed:36s; --orb-speed:25s;
}
[data-theme="light-7"]{
  --primary:#EC4899; --secondary:#8B5CF6; --accent:#38BDF8;
  --highlight:#34D399; --warning:#FBBF24;
  --bg:#FFF9FC; --bg-2:#FDF0FF; --bg-3:#EEF3FF; --bg-4:#FFFFFF;
  --surface:#FFFFFF; --card:rgba(255,255,255,.7); --glass:rgba(255,255,255,.55);
  --border:rgba(236,72,153,.14); --text:#241226; --muted:#6B5470;
  --grid-op:.025; --mesh-op:1; --orb-op:.07; --particle-op:.45;
  --glow:rgba(236,72,153,.4); --shadow:rgba(139,92,246,.1); --blur:68px;
  --btn-bg:#EC4899; --btn-text:#fff; --btn-hover:#DB2777;
  --selection:rgba(56,189,248,.3); --scrollbar:#FBCFE8;
  --mesh-speed:24s; --orb-speed:18s;
}
[data-theme="light-8"]{
  --primary:#475569; --secondary:#64748B; --accent:#94A3B8;
  --highlight:#0EA5E9; --warning:#D97706;
  --bg:#FAFAFA; --bg-2:#F2F3F5; --bg-3:#EDEEF1; --bg-4:#FFFFFF;
  --surface:#FFFFFF; --card:rgba(255,255,255,.78); --glass:rgba(255,255,255,.62);
  --border:rgba(71,85,105,.14); --text:#1E293B; --muted:#64748B;
  --grid-op:.03; --mesh-op:.5; --orb-op:.045; --particle-op:.22;
  --glow:rgba(148,163,184,.35); --shadow:rgba(30,41,59,.08); --blur:85px;
  --btn-bg:#334155; --btn-text:#fff; --btn-hover:#1E293B;
  --selection:rgba(100,116,139,.25); --scrollbar:#CBD5E1;
  --mesh-speed:60s; --orb-speed:38s;
}
[data-theme="light-9"]{
  --primary:#1D4ED8; --secondary:#3B82F6; --accent:#0EA5E9;
  --highlight:#16A34A; --warning:#CA8A04;
  --bg:#F7F9FD; --bg-2:#EEF3FC; --bg-3:#E7EFFB; --bg-4:#FFFFFF;
  --surface:#FFFFFF; --card:rgba(255,255,255,.75); --glass:rgba(255,255,255,.6);
  --border:rgba(29,78,216,.14); --text:#0B1D3A; --muted:#4A628A;
  --grid-op:.04; --mesh-op:.9; --orb-op:.05; --particle-op:.3;
  --glow:rgba(14,165,233,.35); --shadow:rgba(29,78,216,.1); --blur:74px;
  --btn-bg:#1D4ED8; --btn-text:#fff; --btn-hover:#1E40AF;
  --selection:rgba(59,130,246,.28); --scrollbar:#BFDBFE;
  --mesh-speed:44s; --orb-speed:30s;
}
[data-theme="light-10"]{
  --primary:#F97316; --secondary:#FB7185; --accent:#FBBF24;
  --highlight:#A3E635; --warning:#DC2626;
  --bg:#FFF8F4; --bg-2:#FFF0EA; --bg-3:#FFE8DE; --bg-4:#FFFFFF;
  --surface:#FFFEFB; --card:rgba(255,255,255,.74); --glass:rgba(255,250,246,.6);
  --border:rgba(249,115,22,.15); --text:#2E1608; --muted:#7C5646;
  --grid-op:.03; --mesh-op:1; --orb-op:.065; --particle-op:.4;
  --glow:rgba(251,191,36,.4); --shadow:rgba(249,115,22,.1); --blur:70px;
  --btn-bg:#F97316; --btn-text:#fff; --btn-hover:#EA580C;
  --selection:rgba(251,113,133,.28); --scrollbar:#FED7AA;
  --mesh-speed:34s; --orb-speed:24s;
}

[data-theme="dark-1"]{
  --primary:#818CF8; --secondary:#6366F1; --accent:#22D3EE;
  --highlight:#34D399; --warning:#FBBF24;
  --bg:#0B1120; --bg-2:#0E1526; --bg-3:#0A0F1E; --bg-4:#111A2E;
  --surface:#131C30; --card:rgba(19,28,48,.65); --glass:rgba(24,33,54,.55);
  --border:rgba(129,140,248,.18); --text:#E5E9F5; --muted:#94A1BD;
  --grid-op:.05; --mesh-op:1; --orb-op:.12; --particle-op:.5;
  --glow:rgba(34,211,238,.5); --shadow:rgba(0,0,0,.4); --blur:80px;
  --btn-bg:#6366F1; --btn-text:#fff; --btn-hover:#818CF8;
  --selection:rgba(129,140,248,.35); --scrollbar:#2D3652;
  --mesh-speed:44s; --orb-speed:30s;
}
[data-theme="dark-2"]{
  --primary:#E935FF; --secondary:#00F0FF; --accent:#39FF14;
  --highlight:#FFEA00; --warning:#FF3D71;
  --bg:#050109; --bg-2:#0A0212; --bg-3:#08010E; --bg-4:#0D0316;
  --surface:#0F0518; --card:rgba(15,5,24,.65); --glass:rgba(20,6,32,.55);
  --border:rgba(233,53,255,.28); --text:#F3EBFF; --muted:#B79CD9;
  --grid-op:.08; --mesh-op:1; --orb-op:.18; --particle-op:.65;
  --glow:rgba(0,240,255,.6); --shadow:rgba(233,53,255,.25); --blur:65px;
  --btn-bg:#E935FF; --btn-text:#fff; --btn-hover:#00F0FF;
  --selection:rgba(0,240,255,.35); --scrollbar:#4A1E66;
  --mesh-speed:20s; --orb-speed:16s;
}
[data-theme="dark-3"]{
  --primary:#A78BFA; --secondary:#8B5CF6; --accent:#D946EF;
  --highlight:#5EEAD4; --warning:#FBBF24;
  --bg:#120B22; --bg-2:#170F2C; --bg-3:#0F0A1C; --bg-4:#1B1230;
  --surface:#1C1332; --card:rgba(28,19,50,.65); --glass:rgba(34,23,58,.55);
  --border:rgba(167,139,250,.2); --text:#EDE8FB; --muted:#A794C7;
  --grid-op:.05; --mesh-op:1; --orb-op:.14; --particle-op:.5;
  --glow:rgba(217,70,239,.5); --shadow:rgba(0,0,0,.45); --blur:78px;
  --btn-bg:#8B5CF6; --btn-text:#fff; --btn-hover:#A78BFA;
  --selection:rgba(167,139,250,.35); --scrollbar:#3B2A5C;
  --mesh-speed:48s; --orb-speed:32s;
}
[data-theme="dark-4"]{
  --primary:#34D399; --secondary:#10B981; --accent:#84CC16;
  --highlight:#2DD4BF; --warning:#F59E0B;
  --bg:#081410; --bg-2:#0A1913; --bg-3:#061109; --bg-4:#0C1D17;
  --surface:#0D1F18; --card:rgba(13,31,24,.65); --glass:rgba(16,38,29,.55);
  --border:rgba(52,211,153,.2); --text:#DFF5EB; --muted:#8FBBA8;
  --grid-op:.045; --mesh-op:1; --orb-op:.12; --particle-op:.45;
  --glow:rgba(132,204,22,.45); --shadow:rgba(0,0,0,.42); --blur:80px;
  --btn-bg:#10B981; --btn-text:#04150F; --btn-hover:#34D399;
  --selection:rgba(52,211,153,.3); --scrollbar:#1F4536;
  --mesh-speed:50s; --orb-speed:34s;
}
[data-theme="dark-5"]{
  --primary:#818CF8; --secondary:#C084FC; --accent:#F472B6;
  --highlight:#38BDF8; --warning:#FBBF24;
  --bg:#07071A; --bg-2:#0A0A22; --bg-3:#060614; --bg-4:#0D0D28;
  --surface:#0E0E2A; --card:rgba(14,14,42,.65); --glass:rgba(18,18,50,.55);
  --border:rgba(192,132,252,.2); --text:#EDEBFF; --muted:#A6A3D6;
  --grid-op:.04; --mesh-op:1; --orb-op:.16; --particle-op:.7;
  --glow:rgba(244,114,182,.5); --shadow:rgba(0,0,0,.5); --blur:90px;
  --btn-bg:#818CF8; --btn-text:#08081C; --btn-hover:#C084FC;
  --selection:rgba(244,114,182,.3); --scrollbar:#2B2B5C;
  --mesh-speed:60s; --orb-speed:40s;
}
[data-theme="dark-6"]{
  --primary:#D4AF37; --secondary:#F0C75E; --accent:#B8860B;
  --highlight:#E8DCB5; --warning:#DC2626;
  --bg:#0A0806; --bg-2:#0E0B08; --bg-3:#080604; --bg-4:#120E09;
  --surface:#140F0A; --card:rgba(20,15,10,.65); --glass:rgba(24,18,12,.55);
  --border:rgba(212,175,55,.25); --text:#F5EFDD; --muted:#B8A97C;
  --grid-op:.05; --mesh-op:.8; --orb-op:.1; --particle-op:.5;
  --glow:rgba(240,199,94,.5); --shadow:rgba(0,0,0,.5); --blur:75px;
  --btn-bg:#D4AF37; --btn-text:#1A1406; --btn-hover:#F0C75E;
  --selection:rgba(212,175,55,.3); --scrollbar:#4A3B14;
  --mesh-speed:52s; --orb-speed:36s;
}
[data-theme="dark-7"]{
  --primary:#22D3EE; --secondary:#0EA5E9; --accent:#2DD4BF;
  --highlight:#38BDF8; --warning:#FBBF24;
  --bg:#061620; --bg-2:#081C2A; --bg-3:#05121B; --bg-4:#0A2432;
  --surface:#0B2632; --card:rgba(11,38,50,.65); --glass:rgba(14,44,58,.55);
  --border:rgba(34,211,238,.22); --text:#E1F6FB; --muted:#8DB8C4;
  --grid-op:.045; --mesh-op:1; --orb-op:.14; --particle-op:.55;
  --glow:rgba(45,212,191,.5); --shadow:rgba(0,0,0,.45); --blur:82px;
  --btn-bg:#0EA5E9; --btn-text:#04141C; --btn-hover:#22D3EE;
  --selection:rgba(34,211,238,.3); --scrollbar:#124256;
  --mesh-speed:46s; --orb-speed:32s;
}
[data-theme="dark-8"]{
  --primary:#10B981; --secondary:#059669; --accent:#5EEAD4;
  --highlight:#A7F3D0; --warning:#F59E0B;
  --bg:#061410; --bg-2:#081A15; --bg-3:#04100C; --bg-4:#0A1F19;
  --surface:#0B2119; --card:rgba(11,33,25,.65); --glass:rgba(14,40,31,.55);
  --border:rgba(16,185,129,.22); --text:#DEFAEF; --muted:#8BBBA9;
  --grid-op:.045; --mesh-op:1; --orb-op:.12; --particle-op:.5;
  --glow:rgba(94,234,212,.5); --shadow:rgba(0,0,0,.45); --blur:78px;
  --btn-bg:#10B981; --btn-text:#04150F; --btn-hover:#5EEAD4;
  --selection:rgba(16,185,129,.3); --scrollbar:#0F3A2C;
  --mesh-speed:48s; --orb-speed:33s;
}
[data-theme="dark-9"]{
  --primary:#8AB4F8; --secondary:#A0A4AB; --accent:#5EEAD4;
  --highlight:#34D399; --warning:#FBBF24;
  --bg:#0E0E10; --bg-2:#141416; --bg-3:#0A0A0B; --bg-4:#1A1A1D;
  --surface:#1C1C1F; --card:rgba(28,28,31,.65); --glass:rgba(34,34,38,.55);
  --border:rgba(160,164,171,.18); --text:#F2F2F3; --muted:#9B9BA1;
  --grid-op:.035; --mesh-op:.5; --orb-op:.08; --particle-op:.3;
  --glow:rgba(138,180,248,.4); --shadow:rgba(0,0,0,.5); --blur:90px;
  --btn-bg:#3A3A3D; --btn-text:#F2F2F3; --btn-hover:#4A4A4D;
  --selection:rgba(138,180,248,.28); --scrollbar:#333336;
  --mesh-speed:65s; --orb-speed:42s;
}
[data-theme="dark-10"]{
  --primary:#F43F5E; --secondary:#BE123C; --accent:#FB7185;
  --highlight:#E8DCB5; --warning:#FBBF24;
  --bg:#0D0708; --bg-2:#130A0C; --bg-3:#0A0506; --bg-4:#180D0F;
  --surface:#1A0E10; --card:rgba(26,14,16,.65); --glass:rgba(32,17,20,.55);
  --border:rgba(244,63,94,.22); --text:#F7EAEC; --muted:#B98D93;
  --grid-op:.045; --mesh-op:.9; --orb-op:.12; --particle-op:.45;
  --glow:rgba(251,113,133,.5); --shadow:rgba(0,0,0,.5); --blur:80px;
  --btn-bg:#F43F5E; --btn-text:#fff; --btn-hover:#FB7185;
  --selection:rgba(244,63,94,.3); --scrollbar:#4A1720;
  --mesh-speed:54s; --orb-speed:36s;
}

body {
  zoom: 80%;
  color: var(--text);
  transition: var(--transition-theme);
  background: transparent !important;
}
body[data-theme] {
  background: transparent !important;
}

/* THEME SWITCHER */
.ts-panel{
  position:absolute; top:calc(100% + 14px); right:-10px;
  width:320px; max-height:0; overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--card); border:1px solid var(--border);
  backdrop-filter:blur(20px);
  box-shadow:0 20px 50px var(--shadow);
  transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease, var(--transition-theme);
  opacity:0;
  z-index: 99999;
}
.ts-panel::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.sn-theme-hover.open .ts-panel,
.sn-theme-hover:hover .ts-panel {
  max-height:520px; opacity:1; 
  overflow-y: visible;
}
.ts-panel-inner{ padding:14px; }
.ts-mode-row{
  display:flex; gap:6px; margin-bottom:12px;
  background:var(--bg-2); border-radius:999px; padding:4px;
}
.ts-mode-btn{
  flex:1; padding:7px 0; text-align:center;
  border:none; background:transparent; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--muted);
  cursor:pointer; transition:all .3s ease;
}
.ts-mode-btn.active{
  background:var(--btn-bg); color:var(--btn-text);
  box-shadow:0 4px 12px var(--shadow);
}
.ts-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  max-height:280px; overflow-y:auto; padding-right:2px;
}
.ts-option{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface);
  cursor:pointer; font-size:12px; font-weight:500; color:var(--text);
  transition:all .25s ease; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ts-option span:not(.dot) {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ts-option:hover{ transform:translateY(-1px); box-shadow:0 6px 14px var(--shadow); }
.ts-option.active{ border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.ts-option .dot{
  width:14px; height:14px; border-radius:50%; flex:none;
  box-shadow:0 0 6px var(--glow);
}
@media (max-width:480px){
  .ts-panel{ width:250px; right: -50px; }
}

/* Fallbacks for generic dark/light toggles */
[data-theme="dark"]{
  --primary:#818CF8; --secondary:#6366F1; --accent:#22D3EE;
  --highlight:#34D399; --warning:#FBBF24;
  --bg:#0B1120; --bg-2:#0E1526; --bg-3:#0A0F1E; --bg-4:#111A2E;
  --surface:#131C30; --card:rgba(19,28,48,.65); --glass:rgba(24,33,54,.55);
  --border:rgba(129,140,248,.18); --text:#E5E9F5; --muted:#94A1BD;
  --grid-op:.05; --mesh-op:1; --orb-op:.12; --particle-op:.5;
  --glow:rgba(34,211,238,.5); --shadow:rgba(0,0,0,.4); --blur:80px;
  --btn-bg:#6366F1; --btn-text:#fff; --btn-hover:#818CF8;
  --selection:rgba(129,140,248,.35); --scrollbar:#2D3652;
  --mesh-speed:44s; --orb-speed:30s;
}
[data-theme="light"]{
  --primary:#EA580C; --secondary:#FB923C; --accent:#F59E0B;
  --highlight:#65A30D; --warning:#DC2626;
  --bg:#FFFBF5; --bg-2:#FFF3E6; --bg-3:#FFEDDA; --bg-4:#FFFFFF;
  --surface:#FFFEFA; --card:rgba(255,255,255,.75); --glass:rgba(255,251,245,.6);
  --border:rgba(234,88,12,.16); --text:#2A1608; --muted:#7A5B44;
  --grid-op:.03; --mesh-op:1; --orb-op:.06; --particle-op:.4;
  --glow:rgba(245,158,11,.4); --shadow:rgba(234,88,12,.1); --blur:70px;
  --btn-bg:#EA580C; --btn-text:#fff; --btn-hover:#C2410C;
  --selection:rgba(251,146,60,.3); --scrollbar:#FED7AA;
  --mesh-speed:36s; --orb-speed:25s;
}