/* ═══════════════════════════════════════════════════════════════
   Playfinder Theme System
   ─────────────────────────────────────────────────────────────
   Themes: default (dark/light), neon, ocean, nature
   Each theme defines both dark + light variants.
   The active theme is set via html[data-theme="..."] + html.light
   ═══════════════════════════════════════════════════════════════ */

/* ── DEFAULT (Cosmic Purple) ── dark is the base ── */
:root,
html[data-theme="default"] {
  --bg:           #050713;
  --bg-soft:      #090d1d;
  --card:         rgba(12,15,39,.8);
  --card-soft:    rgba(17,22,56,.58);
  --panel:        rgba(12,15,39,.8);
  --panel-strong: rgba(12,15,39,.86);
  --panel-soft:   rgba(17,22,56,.58);
  --border:       rgba(255,255,255,.08);
  --border-hi:    rgba(139,92,246,.34);
  --line:         rgba(255,255,255,.08);
  --line-strong:  rgba(139,92,246,.34);
  --text:         #a9b5d2;
  --text-strong:  #f4f7ff;
  --text-soft:    #7280a2;
  --text-muted:   #7280a2;
  --purple:       #8b5cf6;
  --cyan:         #22d3ee;
  --teal:         #34d399;
  --orange:       #fb923c;
  --green:        #34d399;
  --amber:        #fb923c;
  --rose:         #fb7185;
  --danger:       #f43f5e;
  --nav:          rgba(5,7,19,.68);
  --header:       rgba(5,7,19,.68);
  --btn:          linear-gradient(135deg,#7c3aed,#0ea5e9);
  --button:       linear-gradient(135deg,#7c3aed,#0ea5e9);
  --shadow:       0 20px 80px rgba(0,0,0,.34);
  /* ambient blobs */
  --ambient-1:    rgba(124,58,237,.14);
  --ambient-2:    rgba(8,145,178,.12);
  --ambient-3:    rgba(251,146,60,.08);
  /* radial bg */
  --radial-1:     rgba(139,92,246,.16);
  --radial-2:     rgba(34,211,238,.12);
  --radial-3:     rgba(251,146,60,.08);
  /* accent shine */
  --shine-1:      rgba(139,92,246,.42);
  --shine-2:      rgba(34,211,238,.24);
  /* star canvas */
  --star-alpha:   1;
  --star-hue:     265;
  --star-hue-alt: 193;
}

html[data-theme="default"].light,
html.light:not([data-theme]),
:root.light {
  --bg:           #ece8f4;
  --bg-soft:      #f4eff9;
  --card:         rgba(251,249,255,.82);
  --card-soft:    rgba(242,238,249,.62);
  --panel:        rgba(251,249,255,.82);
  --panel-strong: rgba(251,249,255,.88);
  --panel-soft:   rgba(242,238,249,.62);
  --border:       rgba(102,85,166,.13);
  --border-hi:    rgba(124,58,237,.3);
  --line:         rgba(102,85,166,.13);
  --line-strong:  rgba(124,58,237,.3);
  --text:         #5e5879;
  --text-strong:  #1f1a33;
  --text-soft:    #7f789c;
  --text-muted:   #7f789c;
  --purple:       #7c3aed;
  --cyan:         #0891b2;
  --teal:         #0f766e;
  --orange:       #ea580c;
  --green:        #0f766e;
  --amber:        #ea580c;
  --rose:         #e11d48;
  --danger:       #e11d48;
  --nav:          rgba(236,232,244,.72);
  --header:       rgba(236,232,244,.72);
  --btn:          linear-gradient(135deg,#7c3aed,#0891b2);
  --button:       linear-gradient(135deg,#7c3aed,#0891b2);
  --shadow:       0 16px 64px rgba(86,67,132,.12);
  --ambient-1:    rgba(124,58,237,.08);
  --ambient-2:    rgba(8,145,178,.06);
  --ambient-3:    rgba(251,146,60,.05);
  --radial-1:     rgba(139,92,246,.08);
  --radial-2:     rgba(34,211,238,.06);
  --radial-3:     rgba(251,146,60,.04);
  --shine-1:      rgba(124,58,237,.26);
  --shine-2:      rgba(34,211,238,.14);
  --star-alpha:   .2;
}


/* ── NEON ────────────────────────────────────────────────────── */
html[data-theme="neon"] {
  --bg:           #07020e;
  --bg-soft:      #0e0518;
  --card:         rgba(18,4,36,.82);
  --card-soft:    rgba(24,8,48,.6);
  --panel:        rgba(18,4,36,.82);
  --panel-strong: rgba(18,4,36,.88);
  --panel-soft:   rgba(24,8,48,.6);
  --border:       rgba(255,255,255,.07);
  --border-hi:    rgba(236,72,153,.4);
  --line:         rgba(255,255,255,.07);
  --line-strong:  rgba(236,72,153,.4);
  --text:         #c8b4e0;
  --text-strong:  #fef0ff;
  --text-soft:    #9478b8;
  --text-muted:   #9478b8;
  --purple:       #e946bd;
  --cyan:         #00f0ff;
  --teal:         #06ffa5;
  --orange:       #ff6b2b;
  --green:        #06ffa5;
  --amber:        #ff6b2b;
  --rose:         #ff3586;
  --danger:       #ff3586;
  --nav:          rgba(7,2,14,.78);
  --header:       rgba(7,2,14,.78);
  --btn:          linear-gradient(135deg,#e946bd,#00f0ff);
  --button:       linear-gradient(135deg,#e946bd,#00f0ff);
  --shadow:       0 20px 80px rgba(0,0,0,.5);
  --ambient-1:    rgba(233,70,189,.16);
  --ambient-2:    rgba(0,240,255,.1);
  --ambient-3:    rgba(6,255,165,.06);
  --radial-1:     rgba(233,70,189,.18);
  --radial-2:     rgba(0,240,255,.12);
  --radial-3:     rgba(255,107,43,.06);
  --shine-1:      rgba(233,70,189,.5);
  --shine-2:      rgba(0,240,255,.3);
  --star-alpha:   1;
  --star-hue:     310;
  --star-hue-alt: 180;
}

html[data-theme="neon"].light {
  --bg:           #faf0f8;
  --bg-soft:      #fef5fc;
  --card:         rgba(255,245,253,.85);
  --card-soft:    rgba(252,238,249,.65);
  --panel:        rgba(255,245,253,.85);
  --panel-strong: rgba(255,245,253,.9);
  --panel-soft:   rgba(252,238,249,.65);
  --border:       rgba(180,60,140,.12);
  --border-hi:    rgba(233,70,189,.32);
  --line:         rgba(180,60,140,.12);
  --line-strong:  rgba(233,70,189,.32);
  --text:         #7a4d72;
  --text-strong:  #2d0a26;
  --text-soft:    #9e6e94;
  --text-muted:   #9e6e94;
  --purple:       #c026a3;
  --cyan:         #0891a2;
  --teal:         #059670;
  --orange:       #dc4a10;
  --green:        #059670;
  --amber:        #dc4a10;
  --rose:         #db2777;
  --danger:       #db2777;
  --nav:          rgba(250,240,248,.78);
  --header:       rgba(250,240,248,.78);
  --btn:          linear-gradient(135deg,#c026a3,#0891a2);
  --button:       linear-gradient(135deg,#c026a3,#0891a2);
  --shadow:       0 16px 64px rgba(160,50,120,.1);
  --ambient-1:    rgba(233,70,189,.06);
  --ambient-2:    rgba(0,180,200,.05);
  --ambient-3:    rgba(6,200,130,.04);
  --radial-1:     rgba(192,38,163,.07);
  --radial-2:     rgba(8,145,162,.05);
  --radial-3:     rgba(220,74,16,.03);
  --shine-1:      rgba(192,38,163,.24);
  --shine-2:      rgba(8,145,162,.14);
  --star-alpha:   .15;
}


/* ── OCEAN ───────────────────────────────────────────────────── */
html[data-theme="ocean"] {
  --bg:           #020c18;
  --bg-soft:      #051424;
  --card:         rgba(4,20,44,.82);
  --card-soft:    rgba(6,28,58,.6);
  --panel:        rgba(4,20,44,.82);
  --panel-strong: rgba(4,20,44,.88);
  --panel-soft:   rgba(6,28,58,.6);
  --border:       rgba(255,255,255,.07);
  --border-hi:    rgba(56,189,248,.32);
  --line:         rgba(255,255,255,.07);
  --line-strong:  rgba(56,189,248,.32);
  --text:         #8db8d6;
  --text-strong:  #e8f4ff;
  --text-soft:    #5d8aaa;
  --text-muted:   #5d8aaa;
  --purple:       #38bdf8;
  --cyan:         #06b6d4;
  --teal:         #2dd4bf;
  --orange:       #f59e0b;
  --green:        #2dd4bf;
  --amber:        #f59e0b;
  --rose:         #f472b6;
  --danger:       #f472b6;
  --nav:          rgba(2,12,24,.78);
  --header:       rgba(2,12,24,.78);
  --btn:          linear-gradient(135deg,#0284c7,#06b6d4);
  --button:       linear-gradient(135deg,#0284c7,#06b6d4);
  --shadow:       0 20px 80px rgba(0,0,0,.4);
  --ambient-1:    rgba(2,132,199,.14);
  --ambient-2:    rgba(6,182,212,.1);
  --ambient-3:    rgba(45,212,191,.06);
  --radial-1:     rgba(56,189,248,.14);
  --radial-2:     rgba(6,182,212,.1);
  --radial-3:     rgba(45,212,191,.06);
  --shine-1:      rgba(56,189,248,.42);
  --shine-2:      rgba(6,182,212,.26);
  --star-alpha:   .8;
  --star-hue:     200;
  --star-hue-alt: 175;
}

html[data-theme="ocean"].light {
  --bg:           #ecf6fc;
  --bg-soft:      #f2f9fe;
  --card:         rgba(240,250,255,.85);
  --card-soft:    rgba(230,245,252,.65);
  --panel:        rgba(240,250,255,.85);
  --panel-strong: rgba(240,250,255,.9);
  --panel-soft:   rgba(230,245,252,.65);
  --border:       rgba(30,100,160,.1);
  --border-hi:    rgba(2,132,199,.28);
  --line:         rgba(30,100,160,.1);
  --line-strong:  rgba(2,132,199,.28);
  --text:         #3e6d8a;
  --text-strong:  #0a2a42;
  --text-soft:    #5e8ba6;
  --text-muted:   #5e8ba6;
  --purple:       #0284c7;
  --cyan:         #0891b2;
  --teal:         #0d9488;
  --orange:       #d97706;
  --green:        #0d9488;
  --amber:        #d97706;
  --rose:         #db2777;
  --danger:       #db2777;
  --nav:          rgba(236,246,252,.78);
  --header:       rgba(236,246,252,.78);
  --btn:          linear-gradient(135deg,#0284c7,#0891b2);
  --button:       linear-gradient(135deg,#0284c7,#0891b2);
  --shadow:       0 16px 64px rgba(10,60,100,.1);
  --ambient-1:    rgba(2,132,199,.06);
  --ambient-2:    rgba(6,182,212,.04);
  --ambient-3:    rgba(45,212,191,.03);
  --radial-1:     rgba(2,132,199,.06);
  --radial-2:     rgba(6,182,212,.04);
  --radial-3:     rgba(13,148,136,.03);
  --shine-1:      rgba(2,132,199,.22);
  --shine-2:      rgba(6,182,212,.14);
  --star-alpha:   .15;
}


/* ── NATURE ──────────────────────────────────────────────────── */
html[data-theme="nature"] {
  --bg:           #050e08;
  --bg-soft:      #0a1810;
  --card:         rgba(8,24,14,.82);
  --card-soft:    rgba(12,34,20,.6);
  --panel:        rgba(8,24,14,.82);
  --panel-strong: rgba(8,24,14,.88);
  --panel-soft:   rgba(12,34,20,.6);
  --border:       rgba(255,255,255,.07);
  --border-hi:    rgba(74,222,128,.32);
  --line:         rgba(255,255,255,.07);
  --line-strong:  rgba(74,222,128,.32);
  --text:         #93c4a4;
  --text-strong:  #e6ffe8;
  --text-soft:    #648a72;
  --text-muted:   #648a72;
  --purple:       #4ade80;
  --cyan:         #a3e635;
  --teal:         #34d399;
  --orange:       #fbbf24;
  --green:        #4ade80;
  --amber:        #fbbf24;
  --rose:         #f472b6;
  --danger:       #f472b6;
  --nav:          rgba(5,14,8,.78);
  --header:       rgba(5,14,8,.78);
  --btn:          linear-gradient(135deg,#16a34a,#65a30d);
  --button:       linear-gradient(135deg,#16a34a,#65a30d);
  --shadow:       0 20px 80px rgba(0,0,0,.36);
  --ambient-1:    rgba(74,222,128,.12);
  --ambient-2:    rgba(163,230,53,.08);
  --ambient-3:    rgba(251,191,36,.06);
  --radial-1:     rgba(74,222,128,.14);
  --radial-2:     rgba(163,230,53,.08);
  --radial-3:     rgba(251,191,36,.06);
  --shine-1:      rgba(74,222,128,.42);
  --shine-2:      rgba(163,230,53,.24);
  --star-alpha:   .7;
  --star-hue:     140;
  --star-hue-alt: 80;
}

html[data-theme="nature"].light {
  --bg:           #eef6ed;
  --bg-soft:      #f4faf4;
  --card:         rgba(242,255,243,.85);
  --card-soft:    rgba(234,248,235,.65);
  --panel:        rgba(242,255,243,.85);
  --panel-strong: rgba(242,255,243,.9);
  --panel-soft:   rgba(234,248,235,.65);
  --border:       rgba(40,120,60,.1);
  --border-hi:    rgba(22,163,74,.28);
  --line:         rgba(40,120,60,.1);
  --line-strong:  rgba(22,163,74,.28);
  --text:         #3d6e4a;
  --text-strong:  #0a2e12;
  --text-soft:    #5d8e6a;
  --text-muted:   #5d8e6a;
  --purple:       #16a34a;
  --cyan:         #65a30d;
  --teal:         #0d9488;
  --orange:       #d97706;
  --green:        #16a34a;
  --amber:        #d97706;
  --rose:         #db2777;
  --danger:       #db2777;
  --nav:          rgba(238,246,237,.78);
  --header:       rgba(238,246,237,.78);
  --btn:          linear-gradient(135deg,#16a34a,#65a30d);
  --button:       linear-gradient(135deg,#16a34a,#65a30d);
  --shadow:       0 16px 64px rgba(20,80,30,.1);
  --ambient-1:    rgba(74,222,128,.06);
  --ambient-2:    rgba(163,230,53,.04);
  --ambient-3:    rgba(251,191,36,.03);
  --radial-1:     rgba(22,163,74,.06);
  --radial-2:     rgba(101,163,13,.04);
  --radial-3:     rgba(217,119,6,.03);
  --shine-1:      rgba(22,163,74,.22);
  --shine-2:      rgba(101,163,13,.14);
  --star-alpha:   .15;
}


/* ── VULCANIC ────────────────────────────────────────────────── */
html[data-theme="vulcanic"] {
  --bg:           #090303;
  --bg-soft:      #120606;
  --card:         rgba(24,9,9,.82);
  --card-soft:    rgba(34,14,14,.6);
  --panel:        rgba(24,9,9,.82);
  --panel-strong: rgba(18,6,6,.88);
  --panel-soft:   rgba(34,14,14,.6);
  --border:       rgba(255,255,255,.06);
  --border-hi:    rgba(239,68,68,.4);
  --line:         rgba(255,255,255,.06);
  --line-strong:  rgba(239,68,68,.4);
  --text:         #e2cccc;
  --text-strong:  #fff0f0;
  --text-soft:    #a38585;
  --text-muted:   #a38585;
  --purple:       #ff3b30;
  --cyan:         #ff8f00;
  --teal:         #ffd000;
  --orange:       #ff5e00;
  --green:        #ffd000;
  --amber:         #ff8f00;
  --rose:         #ff3b30;
  --danger:       #ff3b30;
  --nav:          rgba(9,3,3,.78);
  --header:       rgba(9,3,3,.78);
  --btn:          linear-gradient(135deg,#ff3333,#ff8000);
  --button:       linear-gradient(135deg,#ff3333,#ff8000);
  --shadow:       0 20px 80px rgba(0,0,0,.6);
  --ambient-1:    rgba(255,59,48,.16);
  --ambient-2:    rgba(255,143,0,.1);
  --ambient-3:    rgba(255,208,0,.06);
  --radial-1:     rgba(255,59,48,.18);
  --radial-2:     rgba(255,143,0,.12);
  --radial-3:     rgba(255,208,0,.06);
  --shine-1:      rgba(255,59,48,.5);
  --shine-2:      rgba(255,143,0,.3);
  --star-alpha:   .95;
  --star-hue:     12;
  --star-hue-alt: 35;
}

html[data-theme="vulcanic"].light {
  --bg:           #fdf5f5;
  --bg-soft:      #fefafa;
  --card:         rgba(255,245,245,.85);
  --card-soft:    rgba(250,230,230,.65);
  --panel:        rgba(255,245,245,.85);
  --panel-strong: rgba(255,245,245,.9);
  --panel-soft:   rgba(250,230,230,.65);
  --border:       rgba(180,50,50,.12);
  --border-hi:    rgba(239,68,68,.32);
  --line:         rgba(180,50,50,.12);
  --line-strong:  rgba(239,68,68,.32);
  --text:         #7a4d4d;
  --text-strong:  #380b0b;
  --text-soft:    #9e6e6e;
  --text-muted:   #9e6e6e;
  --purple:       #c02626;
  --cyan:         #ea580c;
  --teal:         #b45309;
  --orange:       #dc2626;
  --green:        #16a34a;
  --amber:        #d97706;
  --rose:         #db2777;
  --danger:       #dc2626;
  --nav:          rgba(253,245,245,.78);
  --header:       rgba(253,245,245,.78);
  --btn:          linear-gradient(135deg,#c02626,#ea580c);
  --button:       linear-gradient(135deg,#c02626,#ea580c);
  --shadow:       0 16px 64px rgba(160,50,50,.12);
  --ambient-1:    rgba(239,68,68,.06);
  --ambient-2:    rgba(249,115,22,.05);
  --ambient-3:    rgba(234,179,8,.04);
  --radial-1:     rgba(192,38,38,.07);
  --radial-2:     rgba(234,88,12,.05);
  --radial-3:     rgba(217,119,6,.03);
  --shine-1:      rgba(192,38,38,.24);
  --shine-2:      rgba(234,88,12,.14);
  --star-alpha:   .18;
}


/* ── LIGHTNING ───────────────────────────────────────────────── */
html[data-theme="lightning"] {
  --bg:           #040409;
  --bg-soft:      #080814;
  --card:         rgba(12,12,30,.8);
  --card-soft:    rgba(18,18,44,.55);
  --panel:        rgba(12,12,30,.8);
  --panel-strong: rgba(6,6,18,.88);
  --panel-soft:   rgba(18,18,44,.55);
  --border:       rgba(255,255,255,.05);
  --border-hi:    rgba(234,179,8,.4);
  --line:         rgba(255,255,255,.05);
  --line-strong:  rgba(234,179,8,.4);
  --text:         #e8e8f2;
  --text-strong:  #fffff4;
  --text-soft:    #9898ad;
  --text-muted:   #9898ad;
  --purple:       #eab308;
  --cyan:         #fbbf24;
  --teal:         #fef08a;
  --orange:       #f59e0b;
  --green:        #facc15;
  --amber:        #eab308;
  --rose:         #f59e0b;
  --danger:       #ef4444;
  --nav:          rgba(4,4,9,.78);
  --header:       rgba(4,4,9,.78);
  --btn:          linear-gradient(135deg,#eab308,#facc15);
  --button:       linear-gradient(135deg,#eab308,#facc15);
  --shadow:       0 20px 80px rgba(0,0,0,.65);
  --ambient-1:    rgba(234,179,8,.16);
  --ambient-2:    rgba(250,204,21,.1);
  --ambient-3:    rgba(99,102,241,.06);
  --radial-1:     rgba(234,179,8,.18);
  --radial-2:     rgba(250,204,21,.12);
  --radial-3:     rgba(99,102,241,.08);
  --shine-1:      rgba(234,179,8,.5);
  --shine-2:      rgba(250,204,21,.3);
  --star-alpha:   .9;
  --star-hue:     48;
  --star-hue-alt: 60;
}

html[data-theme="lightning"].light {
  --bg:           #fcfbfa;
  --bg-soft:      #fefdfc;
  --card:         rgba(255,252,240,.85);
  --card-soft:    rgba(250,244,220,.65);
  --panel:        rgba(255,252,240,.85);
  --panel-strong: rgba(255,252,240,.9);
  --panel-soft:   rgba(250,244,220,.65);
  --border:       rgba(180,140,40,.1);
  --border-hi:    rgba(202,138,4,.28);
  --line:         rgba(180,140,40,.1);
  --line-strong:  rgba(202,138,4,.28);
  --text:         #736340;
  --text-strong:  #3b3005;
  --text-soft:    #9c8965;
  --text-muted:   #9c8965;
  --purple:       #ca8a04;
  --cyan:         #eab308;
  --teal:         #854d0e;
  --orange:       #d97706;
  --green:        #b45309;
  --amber:        #ca8a04;
  --rose:         #f59e0b;
  --danger:       #dc2626;
  --nav:          rgba(252,251,250,.78);
  --header:       rgba(252,251,250,.78);
  --btn:          linear-gradient(135deg,#ca8a04,#eab308);
  --button:       linear-gradient(135deg,#ca8a04,#eab308);
  --shadow:       0 16px 64px rgba(120,95,20,.12);
  --ambient-1:    rgba(234,179,8,.06);
  --ambient-2:    rgba(250,204,21,.05);
  --ambient-3:    rgba(99,102,241,.04);
  --radial-1:     rgba(202,138,4,.06);
  --radial-2:     rgba(234,179,8,.04);
  --radial-3:     rgba(99,102,241,.03);
  --shine-1:      rgba(202,138,4,.22);
  --shine-2:      rgba(234,179,8,.14);
  --star-alpha:   .15;
}


/* ═══════════════════════════════════════════════════════════════
   Theme Selector UI
   ═══════════════════════════════════════════════════════════════ */
.theme-selector-wrap {
  position: relative;
}

.theme-selector-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-strong);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}

.theme-selector-btn:hover {
  transform: scale(1.06);
  border-color: var(--line-strong);
}

.theme-selector-btn svg {
  width: 18px;
  height: 18px;
}

.theme-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 200px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel-strong, var(--panel));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow);
  animation: dropIn .2s ease;
}

.theme-dropdown.open {
  display: grid;
  gap: 4px;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.theme-dropdown-label {
  padding: 6px 12px;
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-soft));
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  transition: all .2s;
  width: 100%;
  text-align: left;
}

.theme-option:hover {
  background: rgba(255,255,255,.04);
  border-color: var(--line);
  color: var(--text-strong);
}

.theme-option.active {
  background: rgba(139,92,246,.08);
  border-color: var(--line-strong);
  color: var(--text-strong);
}

html[data-theme="neon"] .theme-option.active { background: rgba(233,70,189,.08); }
html[data-theme="ocean"] .theme-option.active { background: rgba(56,189,248,.08); }
html[data-theme="nature"] .theme-option.active { background: rgba(74,222,128,.08); }
html[data-theme="vulcanic"] .theme-option.active { background: rgba(239,68,68,.08); }
html[data-theme="lightning"] .theme-option.active { background: rgba(234,179,8,.08); }

.theme-swatch {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}

.theme-swatch-default  { background: linear-gradient(135deg, #7c3aed, #0ea5e9); }
.theme-swatch-neon     { background: linear-gradient(135deg, #e946bd, #00f0ff); }
.theme-swatch-ocean    { background: linear-gradient(135deg, #0284c7, #06b6d4); }
.theme-swatch-nature   { background: linear-gradient(135deg, #16a34a, #a3e635); }
.theme-swatch-vulcanic { background: linear-gradient(135deg, #ff3333, #ff8000); }
.theme-swatch-lightning { background: linear-gradient(135deg, #eab308, #fef08a); }

.theme-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--line);
}

.theme-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 14px;
}

.theme-mode-label {
  font-size: 13px;
  color: var(--text);
}

.theme-mode-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: background .25s, border-color .25s;
}

.theme-mode-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-strong);
  transition: transform .25s;
}

html.light .theme-mode-toggle {
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}

html.light .theme-mode-toggle::after {
  transform: translateX(20px);
}


/* ═══════════════════════════════════════════════════════════════
   Override hardcoded ambient/radial colors with CSS vars
   ═══════════════════════════════════════════════════════════════ */
.ambient.a1, .a1 { background: var(--ambient-1) !important; }
.ambient.a2, .a2 { background: var(--ambient-2) !important; }
.ambient.a3, .a3 { background: var(--ambient-3) !important; }

/* Override the body::before radial gradients */
body::before {
  background:
    radial-gradient(circle at 14% 18%, var(--radial-1), transparent 24%),
    radial-gradient(circle at 82% 24%, var(--radial-2), transparent 25%),
    radial-gradient(circle at 52% 86%, var(--radial-3), transparent 22%) !important;
}

/* Override panel shine lines */
.panel::before,
.hero-panel::before,
.surface-panel::before,
.mini-panel::before,
.stage-card::before,
.tech-card::before,
.cta-wrap::before {
  background: linear-gradient(90deg, transparent, var(--shine-1), var(--shine-2), transparent) !important;
}


/* ═══════════════════════════════════════════════════════════════
   Accent glow variables & overrides
   ─────────────────────────────────────────────────────────────
   Every theme defines --glow (button shadow color),
   --accent-soft (tinted backgrounds), --accent-border,
   and --scrollbar. These override all hardcoded purple glows.
   ═══════════════════════════════════════════════════════════════ */

:root,
html[data-theme="default"] {
  --glow:          rgba(124,58,237,.22);
  --glow-hover:    rgba(124,58,237,.28);
  --accent-soft:   rgba(139,92,246,.08);
  --accent-mid:    rgba(139,92,246,.15);
  --accent-border: rgba(139,92,246,.22);
  --accent-bg:     rgba(139,92,246,.12);
  --scrollbar:     rgba(139,92,246,.35);
}
html[data-theme="default"].light {
  --glow:          rgba(124,58,237,.14);
  --glow-hover:    rgba(124,58,237,.18);
  --scrollbar:     rgba(124,58,237,.25);
}

html[data-theme="neon"] {
  --glow:          rgba(233,70,189,.24);
  --glow-hover:    rgba(233,70,189,.32);
  --accent-soft:   rgba(233,70,189,.08);
  --accent-mid:    rgba(233,70,189,.15);
  --accent-border: rgba(233,70,189,.22);
  --accent-bg:     rgba(233,70,189,.12);
  --scrollbar:     rgba(233,70,189,.35);
}
html[data-theme="neon"].light {
  --glow:          rgba(192,38,163,.14);
  --glow-hover:    rgba(192,38,163,.18);
  --scrollbar:     rgba(192,38,163,.25);
}

html[data-theme="ocean"] {
  --glow:          rgba(2,132,199,.24);
  --glow-hover:    rgba(2,132,199,.32);
  --accent-soft:   rgba(56,189,248,.08);
  --accent-mid:    rgba(56,189,248,.15);
  --accent-border: rgba(56,189,248,.22);
  --accent-bg:     rgba(56,189,248,.12);
  --scrollbar:     rgba(56,189,248,.35);
}
html[data-theme="ocean"].light {
  --glow:          rgba(2,132,199,.14);
  --glow-hover:    rgba(2,132,199,.18);
  --scrollbar:     rgba(2,132,199,.25);
}

html[data-theme="nature"] {
  --glow:          rgba(22,163,74,.24);
  --glow-hover:    rgba(22,163,74,.32);
  --accent-soft:   rgba(74,222,128,.08);
  --accent-mid:    rgba(74,222,128,.15);
  --accent-border: rgba(74,222,128,.22);
  --accent-bg:     rgba(74,222,128,.12);
  --scrollbar:     rgba(74,222,128,.35);
}
html[data-theme="nature"].light {
  --glow:          rgba(22,163,74,.14);
  --glow-hover:    rgba(22,163,74,.18);
  --scrollbar:     rgba(22,163,74,.25);
}

html[data-theme="vulcanic"] {
  --glow:          rgba(255,59,48,.24);
  --glow-hover:    rgba(255,59,48,.32);
  --accent-soft:   rgba(255,59,48,.08);
  --accent-mid:    rgba(255,59,48,.15);
  --accent-border: rgba(255,59,48,.22);
  --accent-bg:     rgba(255,59,48,.12);
  --scrollbar:     rgba(255,59,48,.35);
}
html[data-theme="vulcanic"].light {
  --glow:          rgba(192,38,38,.14);
  --glow-hover:    rgba(192,38,38,.18);
  --scrollbar:     rgba(192,38,38,.25);
}

html[data-theme="lightning"] {
  --glow:          rgba(234,179,8,.24);
  --glow-hover:    rgba(234,179,8,.32);
  --accent-soft:   rgba(234,179,8,.08);
  --accent-mid:    rgba(234,179,8,.15);
  --accent-border: rgba(234,179,8,.22);
  --accent-bg:     rgba(234,179,8,.12);
  --scrollbar:     rgba(234,179,8,.35);
}
html[data-theme="lightning"].light {
  --glow:          rgba(202,138,4,.14);
  --glow-hover:    rgba(202,138,4,.18);
  --scrollbar:     rgba(202,138,4,.25);
}


/* ── Button glow overrides ───────────────────────────────────── */

/* Primary CTA / action buttons (landing + portal + app) */
.header-cta,
.nav-cta,
.hero-cta,
.session-link,
.cta-btn,
.btn-primary {
  box-shadow: 0 14px 30px var(--glow) !important;
}

.header-cta:hover,
.nav-cta:hover,
.hero-cta:hover,
.session-link:hover,
.cta-btn:hover,
.btn-primary:hover {
  box-shadow: 0 18px 36px var(--glow-hover) !important;
}

/* Ghost / outline button hover bg */
.ghost-btn:hover {
  background: var(--accent-soft) !important;
}

/* ── Scrollbar override ──────────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar) !important;
}

/* ── Account trigger logged-in glow ──────────────────────────── */
.header-account.logged-in {
  border-color: var(--line-strong) !important;
  background: var(--accent-bg) !important;
  box-shadow: 0 0 15px var(--glow) !important;
}
.header-account.active {
  border-color: var(--purple) !important;
  background: var(--accent-mid) !important;
  box-shadow: 0 0 20px var(--glow-hover) !important;
}

/* ── Step number / badge backgrounds ─────────────────────────── */
.step-number {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
}

/* ── Unit switch active state ────────────────────────────────── */
.unit-switch button.active {
  background: var(--accent-mid) !important;
  box-shadow: inset 0 0 0 1px var(--accent-border) !important;
}

/* ── Hero glow radial (landing page) ─────────────────────────── */
.hero-glow {
  background: radial-gradient(circle, var(--radial-1), transparent 68%) !important;
}

/* ── Bubble field radial (app page) ──────────────────────────── */
.bubble-field {
  background: radial-gradient(circle at top, var(--radial-1), transparent 46%), rgba(255,255,255,.02) !important;
}

/* ── Card art radial ─────────────────────────────────────────── */
.card-art {
  background: radial-gradient(circle at top, var(--radial-1), transparent 52%), rgba(255,255,255,.03) !important;
}

/* ── Progress node active states (app) ───────────────────────── */
.progress-node.active span {
  background: var(--accent-mid) !important;
}
.progress-node.current span {
  box-shadow: 0 0 0 6px var(--accent-soft) !important;
}

/* ── Eyebrow kicker background ───────────────────────────────── */
.eyebrow,
.hero-kicker {
  background: var(--accent-soft) !important;
}

/* ── Bubble hover border ─────────────────────────────────────── */
.bubble:hover {
  border-color: var(--accent-border) !important;
}

/* ── Panel / surface radial accent overlays ──────────────────── */
.hero-panel,
.surface-panel,
.mini-panel,
.explore-modal-dialog {
  background: linear-gradient(180deg, var(--panel-strong, var(--panel)), var(--panel-soft)) !important;
}

/* ── Tag / pill active states ────────────────────────────────── */
.tag-pill.active,
.filter-chip.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
}

/* ── Auth tab active ─────────────────────────────────────────── */
.auth-tab.active {
  border-color: var(--line-strong) !important;
  background: var(--accent-bg) !important;
}