/* ═══════════════════════════════════════════════════════════════════
   MORPHOLOGY · Shared design overlay
   ───────────────────────────────────────────────────────────────────
   Drop this file into the same folder as the HTML files and link it
   from each page AFTER the inline <style> block. It will:
     • Re-skin the existing token palette (--bg, --surf, --blue, …)
     • Add morphing-blob background + particles (via JS)
     • Upgrade .btn, .card, .brand-mark, .tabs, .modal-box, inputs…
   It does not touch any HTML class names or JavaScript.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1 · TOKEN OVERRIDES ─────────────────────────────────────────── */
:root{
  color-scheme:dark;

  /* Background — deeper navy */
  --bg:#07091A;

  /* Surfaces — semi-translucent so blobs glow through */
  --surf:rgba(20,26,46,.72);
  --surf2:rgba(255,255,255,.035);
  --surf3:rgba(255,255,255,.06);
  --surf4:rgba(255,255,255,.09);

  /* Borders — light-on-dark glass borders */
  --bd:rgba(255,255,255,.08);
  --bd2:rgba(255,255,255,.16);
  --bd3:rgba(255,255,255,.24);

  /* Primary brand — indigo + purple + cyan accent */
  --blue:#818CF8;
  --bdim:rgba(99,102,241,.14);
  --bbd:rgba(99,102,241,.42);

  --pur:#C084FC;
  --pdim:rgba(168,85,247,.14);

  --cyan:#67E8F9;
  --cdim:rgba(103,232,249,.14);

  /* Semantic */
  --grn:#5EEAD4;
  --gdim:rgba(94,234,212,.12);
  --gbd:rgba(94,234,212,.38);
  --red:#FB7185;
  --rdim:rgba(251,113,133,.12);
  --rbd:rgba(251,113,133,.38);
  --amb:#FBBF24;
  --adim:rgba(251,191,36,.12);
  --abd:rgba(251,191,36,.38);

  /* Text */
  --tx:#E8ECF5;
  --tx2:#9BA4BC;
  --tx3:#5C6478;
  --tx4:#3A4257;

  /* Radii — softer */
  --r:10px;
  --r2:16px;
}

/* Theme switch */
.mph-theme-toggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:900;
  min-width:92px;
  height:40px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--bd2);
  border-radius:999px;
  background:rgba(13,20,36,.88);
  color:var(--tx);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:transform .2s,background .25s,border-color .25s,box-shadow .25s,color .25s;
}
.mph-theme-toggle:hover{transform:translateY(-1px);border-color:var(--bd3)}
.mph-theme-toggle:active{transform:translateY(0)}
.mph-theme-icon{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mph-theme-toggle[data-theme="dark"] .mph-theme-moon,
.mph-theme-toggle[data-theme="light"] .mph-theme-sun{display:none}

/* ─── 2 · BODY · gradient ambience ────────────────────────────────── */
html{background:var(--bg)}
body{
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(168,85,247,.16),transparent 60%),
    radial-gradient(1000px 700px at -10% 100%,rgba(99,102,241,.16),transparent 60%),
    radial-gradient(700px 500px at 50% 50%,rgba(103,232,249,.04),transparent 70%),
    var(--bg) !important;
  /* Render content above the blob stage */
  position:relative;
  isolation:isolate;
  /* Subtle fade-in on load to mask any layout shift */
  opacity:0;
  animation:mph-page-in .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes mph-page-in{to{opacity:1}}

/* All direct children of body sit above the blob stage */
body > *:not(#mph-stage):not(#mph-particles):not(#mph-theme-toggle):not(#authWrap):not(#gate):not(.modal-bg):not(.modal){
  position:relative;
  z-index:1;
}

/* ─── 3 · MORPHING BLOB STAGE (mounted by JS) ─────────────────────── */
#mph-stage{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.mph-blob{
  position:absolute;filter:blur(90px);opacity:.5;mix-blend-mode:screen;
  will-change:transform,border-radius;
}
.mph-b1{
  width:520px;height:520px;top:-140px;right:-120px;
  background:radial-gradient(circle at 30% 30%,#6366F1,transparent 70%);
  animation:mph-morph1 22s ease-in-out infinite, mph-drift1 30s ease-in-out infinite;
}
.mph-b2{
  width:600px;height:600px;bottom:-180px;left:-160px;
  background:radial-gradient(circle at 60% 40%,#A855F7,transparent 70%);
  animation:mph-morph2 26s ease-in-out infinite, mph-drift2 34s ease-in-out infinite;
}
.mph-b3{
  width:380px;height:380px;top:35%;left:50%;
  background:radial-gradient(circle at 50% 50%,#67E8F9,transparent 70%);
  opacity:.3;
  animation:mph-morph3 18s ease-in-out infinite, mph-drift3 28s ease-in-out infinite;
}
@keyframes mph-morph1{
  0%,100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
  25%{border-radius:30% 60% 70% 40% / 50% 60% 30% 60%}
  50%{border-radius:40% 60% 30% 70% / 60% 40% 60% 40%}
  75%{border-radius:60% 40% 50% 50% / 30% 60% 40% 60%}
}
@keyframes mph-morph2{
  0%,100%{border-radius:40% 60% 60% 40% / 60% 30% 70% 40%}
  33%{border-radius:60% 40% 30% 70% / 40% 50% 60% 50%}
  66%{border-radius:30% 70% 50% 50% / 50% 60% 40% 50%}
}
@keyframes mph-morph3{
  0%,100%{border-radius:50% 50% 40% 60% / 50% 60% 40% 50%}
  50%{border-radius:60% 40% 60% 40% / 40% 60% 40% 60%}
}
@keyframes mph-drift1{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(-40px,30px) rotate(15deg)}
}
@keyframes mph-drift2{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(50px,-40px) rotate(-12deg)}
}
@keyframes mph-drift3{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-30px,-20px)}
}

/* Particle field */
#mph-particles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mph-particle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.4);box-shadow:0 0 8px rgba(255,255,255,.3);
  animation:mph-float linear infinite;
}
@keyframes mph-float{
  0%{transform:translateY(110vh) scale(.6);opacity:0}
  10%{opacity:.6}
  90%{opacity:.6}
  100%{transform:translateY(-10vh) scale(1.1);opacity:0}
}

/* ─── 4 · BRAND MARK — Morphology gradient logo ───────────────────── */
.brand-mark,
.sp-mark{
  background:linear-gradient(135deg,#6366F1 0%,#A855F7 60%,#F472B6 100%) !important;
  color:#fff !important;
  box-shadow:
    0 8px 24px -6px rgba(168,85,247,.5),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.2) !important;
  position:relative;
  overflow:hidden;
  border-radius:10px !important;
  transition:border-radius .5s cubic-bezier(.4,0,.2,1),box-shadow .35s;
}
.brand-mark::before,
.sp-mark::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 60%);
  animation:mph-mark-glow 4s ease-in-out infinite;
}
.brand-mark:hover,
.sp-mark:hover{
  border-radius:16px 10px 16px 10px !important;
  box-shadow:
    0 12px 30px -6px rgba(168,85,247,.7),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}
@keyframes mph-mark-glow{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(10%,10%) scale(1.15)}
}

/* Brand text — switch to serif treatment if not already */
.brand,
.sp-logo,
.brand-title{
  position:relative;
}

/* ─── 5 · GLASS CARDS & SURFACES ──────────────────────────────────── */
.card,
.sp,
.gate-box,
.modal-box,
.res-hero,
.cc,
.rb,
.sb,
.di{
  background:linear-gradient(180deg,rgba(20,26,46,.72),rgba(13,20,36,.7)) !important;
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border-color:var(--bd2) !important;
  box-shadow:
    0 16px 48px -16px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Secondary surfaces — translucent overlay style */
.sp-pill,
.fi,
.gate-inp,
.code-input,
.cm-chip-box,
.fld input,
.fld select,
input[type="text"]:not(.gate-inp):not(.fi):not(.code-input),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select{
  background:rgba(0,0,0,.25) !important;
  border-color:var(--bd) !important;
  color:var(--tx) !important;
  transition:border-color .25s,box-shadow .25s,background .25s !important;
}
.fi:focus,
.gate-inp:focus,
.code-input:focus,
.fld input:focus,
.fld select:focus,
input:focus,
textarea:focus,
select:focus{
  border-color:rgba(99,102,241,.6) !important;
  background:rgba(0,0,0,.35) !important;
  box-shadow:0 0 0 4px rgba(99,102,241,.15) !important;
  outline:none !important;
}

/* Sticky toolbars — glass blur */
.tb,
.actionbar,
.topbar{
  background:rgba(10,12,28,.65) !important;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-color:var(--bd) !important;
}

/* ─── 6 · BUTTONS · morphing on hover ─────────────────────────────── */
.btn,
.btn-go,
.cta-primary{
  border-radius:11px !important;
  font-weight:600 !important;
  letter-spacing:.005em !important;
  transition:
    border-radius .45s cubic-bezier(.4,0,.2,1),
    transform .2s ease,
    box-shadow .35s ease,
    background-position .6s ease,
    opacity .2s,
    filter .25s !important;
  position:relative;
  overflow:hidden;
}
.btn:hover:not(:disabled),
.btn-go:hover:not(:disabled){
  border-radius:18px 11px 18px 11px !important;
  transform:translateY(-1px) !important;
}
.btn:active:not(:disabled),
.btn-go:active:not(:disabled){
  transform:translateY(0) !important;
}

/* Primary (blue) buttons — gradient with glow */
.btn.b-blue,
.btn-go,
.btn:not(.btn-ghost):not(.b-ghost):not(.b-amb):not(.b-red):not(.b-grn):not(.b-pur):not(.btn-danger):not(.btn-warn):not(.btn-ok){
  background:linear-gradient(135deg,#6366F1 0%,#A855F7 100%) !important;
  background-size:200% 200% !important;
  background-position:0% 50% !important;
  color:#fff !important;
  border:none !important;
  box-shadow:
    0 8px 22px -8px rgba(99,102,241,.55),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.btn.b-blue:hover:not(:disabled),
.btn-go:hover:not(:disabled),
.btn:not(.btn-ghost):not(.b-ghost):not(.b-amb):not(.b-red):not(.b-grn):not(.b-pur):not(.btn-danger):not(.btn-warn):not(.btn-ok):hover:not(:disabled){
  background-position:100% 50% !important;
  box-shadow:
    0 14px 30px -10px rgba(168,85,247,.7),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  opacity:1 !important;
}

/* Ghost / secondary buttons */
.btn.btn-ghost,
.btn.b-ghost,
.b-ghost{
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--bd) !important;
  color:var(--tx2) !important;
  box-shadow:none !important;
}
.btn.btn-ghost:hover:not(:disabled),
.btn.b-ghost:hover:not(:disabled),
.b-ghost:hover:not(:disabled){
  background:rgba(255,255,255,.07) !important;
  border-color:var(--bd2) !important;
  color:var(--tx) !important;
}

/* Amber / danger / success variants — keep semantic colors, modernize */
.btn.b-amb,.btn-warn{
  background:linear-gradient(135deg,#FBBF24,#F59E0B) !important;
  color:#0a0c11 !important;border:none !important;
  box-shadow:0 8px 22px -8px rgba(251,191,36,.5),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.btn.b-red,.btn-danger{
  background:linear-gradient(135deg,#FB7185,#E11D48) !important;
  color:#fff !important;border:none !important;
  box-shadow:0 8px 22px -8px rgba(251,113,133,.5),inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.btn.b-grn,.btn-ok{
  background:linear-gradient(135deg,#5EEAD4,#10B981) !important;
  color:#0a1818 !important;border:none !important;
  box-shadow:0 8px 22px -8px rgba(94,234,212,.5),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.btn:disabled{opacity:.45 !important;cursor:not-allowed !important;transform:none !important}

/* ─── 7 · TABS · sliding pill indicator already in markup ─────────── */
.tabs{
  background:rgba(0,0,0,.28) !important;
  border:1px solid var(--bd) !important;
  border-radius:12px !important;
  padding:4px !important;
  position:relative !important;
}
.tab{
  border-radius:9px !important;
  transition:color .35s cubic-bezier(.4,0,.2,1) !important;
  position:relative;z-index:2;
}
.tab.active{
  background:linear-gradient(135deg,#6366F1,#A855F7) !important;
  color:#fff !important;
  box-shadow:0 4px 14px -4px rgba(99,102,241,.5) !important;
  transition:background .4s,box-shadow .35s,border-radius .5s !important;
}

/* ─── 8 · BADGES, PILLS, CHIPS ────────────────────────────────────── */
.badge,
.r-pill,
.s-badge,
.sp-pill,
.nt-tag{
  border-radius:999px !important;
  font-weight:500 !important;
  letter-spacing:.04em !important;
}
.chip{
  border-radius:8px !important;
  transition:all .2s cubic-bezier(.4,0,.2,1) !important;
}
.chip:hover:not(.max-reached){
  transform:translateY(-1px);
  border-color:var(--bd2) !important;
}
.chip.selected{
  background:rgba(99,102,241,.18) !important;
  border-color:rgba(99,102,241,.6) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.12) !important;
}

/* ─── 9 · MESSAGES / MSG-CARD ─────────────────────────────────────── */
.msg{border-radius:10px !important;animation:mph-msg-in .3s ease-out}
@keyframes mph-msg-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

/* ─── 10 · TABLES & ROWS — soft hover ─────────────────────────────── */
table tr{transition:background .15s}
table tr:hover{background:rgba(255,255,255,.025) !important}
th{
  background:rgba(0,0,0,.18) !important;
  border-color:var(--bd) !important;
  color:var(--tx3) !important;
  font-family:'JetBrains Mono',monospace;
  font-size:10px !important;
  text-transform:uppercase;
  letter-spacing:.1em;
}
td{border-color:var(--bd) !important}

/* ─── 11 · MODAL BACKDROP — darker blur ───────────────────────────── */
.modal-bg{
  background:rgba(7,9,26,.78) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal-bg.open .modal-box{
  animation:mph-modal-in .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mph-modal-in{
  from{opacity:0;transform:scale(.92) translateY(8px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* ─── 12 · GATE (password modal in quiz_player) ───────────────────── */
#gate{background:rgba(7,9,26,.94) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#gate.open .gate-box{animation:mph-modal-in .4s cubic-bezier(.34,1.56,.64,1)}

/* ─── 13 · PROGRESS BARS ─────────────────────────────────────────── */
.bar,
.pg-track{
  background:rgba(255,255,255,.06) !important;
  border-radius:999px !important;
  overflow:hidden;
}
.bar-fill,
.pg-fill{
  background:linear-gradient(90deg,#67E8F9,#818CF8,#C084FC) !important;
  background-size:200% 100% !important;
  animation:mph-bar-shimmer 3s linear infinite;
  border-radius:999px !important;
}
@keyframes mph-bar-shimmer{to{background-position:200% 0}}

/* ─── 14 · SCORE RING (results page) ──────────────────────────────── */
.s-ring{
  border-color:transparent !important;
  background:
    conic-gradient(from -90deg,#67E8F9,#818CF8,#C084FC,#67E8F9) border-box,
    rgba(20,26,46,.85);
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  position:relative;
}
/* Wrap the ring number in something readable */
.s-ring .sn{color:var(--tx) !important}

/* ─── 15 · DROPDOWNS (case_builder, quiz_player) ──────────────────── */
.sel-dropdown,
.cm-drop{
  background:rgba(13,20,36,.92) !important;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-color:var(--bd2) !important;
  border-radius:12px !important;
  box-shadow:0 20px 50px -10px rgba(0,0,0,.6) !important;
}
.sel-opt,
.cm-opt{
  border-radius:6px !important;
  margin:2px 4px;
  padding:7px 10px !important;
  transition:background .15s !important;
}
.sel-opt:hover,
.cm-opt:hover{background:rgba(99,102,241,.15) !important;color:var(--tx) !important}

/* ─── 16 · ROLE CARDS (signup form) — handled inline in auth.html ─── */

/* ─── 17 · HEADINGS — Fraunces tone ───────────────────────────────── */
h1,h2{font-family:'Fraunces',serif !important;letter-spacing:-.01em}

/* ─── 18 · LOADING SPINNER ────────────────────────────────────────── */
.loading{
  border-color:currentColor !important;
  border-right-color:transparent !important;
}
.loader-full{background:rgba(7,9,26,.85) !important;backdrop-filter:blur(8px)}

/* ─── 19 · LINKS ──────────────────────────────────────────────────── */
a:not(.btn):not(.brand):not(.logo){transition:color .2s}
a:not(.btn):not(.brand):not(.logo):hover{color:#A5F3FC !important}

/* ─── 20 · SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);background-clip:padding-box}

/* ─── 21 · FOCUS RING (accessibility) ─────────────────────────────── */
:focus-visible{outline:2px solid rgba(103,232,249,.6);outline-offset:2px;border-radius:6px}

/* ─── 22 · CONFETTI (quiz results) — recolor ──────────────────────── */
.cdot{filter:drop-shadow(0 0 6px currentColor)}

/* ─── 23 · LIGHT THEME ────────────────────────────────────────────── */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F7FB;
  --bg-2:#EDF2F8;
  --bg-3:#E4EAF3;

  --surf:rgba(255,255,255,.84);
  --surf2:rgba(30,41,59,.035);
  --surf3:rgba(30,41,59,.065);
  --surf4:rgba(30,41,59,.1);

  --bd:rgba(30,41,59,.11);
  --bd2:rgba(30,41,59,.18);
  --bd3:rgba(30,41,59,.28);

  --blue:#4F46E5;
  --bdim:rgba(79,70,229,.1);
  --bbd:rgba(79,70,229,.34);
  --pur:#8B5CF6;
  --pdim:rgba(139,92,246,.1);
  --cyan:#0891B2;
  --cdim:rgba(8,145,178,.1);

  --grn:#0F9F86;
  --gdim:rgba(15,159,134,.1);
  --gbd:rgba(15,159,134,.32);
  --red:#E11D48;
  --rdim:rgba(225,29,72,.09);
  --rbd:rgba(225,29,72,.3);
  --amb:#B7791F;
  --adim:rgba(183,121,31,.1);
  --abd:rgba(183,121,31,.3);

  --tx:#172033;
  --tx2:#4E5D75;
  --tx3:#738097;
  --tx4:#A0AABC;

  --glass:rgba(255,255,255,.58);
  --glass-bd:rgba(30,41,59,.1);
  --glass-bd-hi:rgba(30,41,59,.18);
  --indigo:#4F46E5;
  --indigo-2:#6366F1;
  --purple:#8B5CF6;
  --purple-2:#7C3AED;
  --cyan-2:#0E7490;
  --pink:#DB2777;
}
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(139,92,246,.14),transparent 60%),
    radial-gradient(1000px 700px at -10% 100%,rgba(79,70,229,.12),transparent 60%),
    radial-gradient(700px 500px at 50% 50%,rgba(8,145,178,.06),transparent 70%),
    var(--bg) !important;
}
html[data-theme="light"] .mph-blob,
html[data-theme="light"] .bg-blob{mix-blend-mode:multiply;opacity:.18}
html[data-theme="light"] .mph-particle,
html[data-theme="light"] .particle{
  background:rgba(30,41,59,.26);
  box-shadow:0 0 8px rgba(30,41,59,.16);
}
html[data-theme="light"] .card,
html[data-theme="light"] .sp,
html[data-theme="light"] .gate-box,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .res-hero,
html[data-theme="light"] .cc,
html[data-theme="light"] .rb,
html[data-theme="light"] .sb,
html[data-theme="light"] .di,
html[data-theme="light"] .sec,
html[data-theme="light"] .auth-card{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,249,253,.86)) !important;
  box-shadow:0 18px 48px -20px rgba(30,41,59,.28),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-theme="light"] .sp-pill,
html[data-theme="light"] .fi,
html[data-theme="light"] .gate-inp,
html[data-theme="light"] .code-input,
html[data-theme="light"] .cm-chip-box,
html[data-theme="light"] .fld input,
html[data-theme="light"] .fld select,
html[data-theme="light"] input[type="text"]:not(.gate-inp):not(.fi):not(.code-input),
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .role-card,
html[data-theme="light"] .social-btn{
  background:rgba(255,255,255,.72) !important;
}
html[data-theme="light"] .fi:focus,
html[data-theme="light"] .gate-inp:focus,
html[data-theme="light"] .code-input:focus,
html[data-theme="light"] .fld input:focus,
html[data-theme="light"] .fld select:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus{
  background:#fff !important;
}
html[data-theme="light"] .tb,
html[data-theme="light"] .actionbar,
html[data-theme="light"] .topbar{
  background:rgba(247,249,253,.82) !important;
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] .settings-bar,
html[data-theme="light"] .workspace,
html[data-theme="light"] .sec-head{background:rgba(247,249,253,.72) !important}
html[data-theme="light"] .btn.btn-ghost,
html[data-theme="light"] .btn.b-ghost,
html[data-theme="light"] .b-ghost,
html[data-theme="light"] .tabs{
  background:rgba(30,41,59,.045) !important;
}
html[data-theme="light"] table tr:hover{background:rgba(79,70,229,.035) !important}
html[data-theme="light"] th{background:rgba(30,41,59,.055) !important}
html[data-theme="light"] .modal-bg{background:rgba(226,232,240,.72) !important}
html[data-theme="light"] #gate{background:rgba(241,245,249,.92) !important}
html[data-theme="light"] .bar,
html[data-theme="light"] .pg-track{background:rgba(30,41,59,.1) !important}
html[data-theme="light"] .s-ring{background:rgba(255,255,255,.9)}
html[data-theme="light"] .sel-dropdown,
html[data-theme="light"] .cm-drop,
html[data-theme="light"] .cmb-drop,
html[data-theme="light"] .chip-drop,
html[data-theme="light"] .tb-menu{
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 20px 50px -14px rgba(30,41,59,.28) !important;
}
html[data-theme="light"] .loader-full{background:rgba(244,247,251,.86) !important}
html[data-theme="light"] .msg-err{color:#BE123C}
html[data-theme="light"] .msg-ok{color:#047857}
html[data-theme="light"] .msg-info{color:#4338CA}
html[data-theme="light"] .msg-warn,
html[data-theme="light"] #setupBanner{color:#92400E}
html[data-theme="light"] #setupBanner code{background:rgba(30,41,59,.08)}
html[data-theme="light"] ::-webkit-scrollbar-thumb{
  background:rgba(30,41,59,.15);
  background-clip:padding-box;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{
  background:rgba(30,41,59,.25);
  background-clip:padding-box;
}
html[data-theme="light"] .mph-theme-toggle{
  background:rgba(255,255,255,.9);
  box-shadow:0 12px 34px -14px rgba(30,41,59,.3),inset 0 1px 0 #fff;
}

@media(max-width:600px){
  .mph-theme-toggle{right:12px;bottom:12px;min-width:40px;width:40px;padding:0}
  .mph-theme-text{display:none}
}

/* ─── 24 · REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.15s !important;
  }
}