/* ══════════════ CORE ══════════════ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(0,240,255,.25); }

/* ══════════════ GLASS CARD ══════════════ */
.glass-card {
  background: rgba(18,18,42,.6);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 1rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.glass-card:hover {
  box-shadow: 0 0 30px rgba(0,240,255,.06);
}

/* ══════════════ INPUTS ══════════════ */
.input-field {
  padding: .75rem 1.25rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: .875rem;
  outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.input-field::placeholder { color: rgba(255,255,255,.25); }
.input-field:focus {
  border-color: rgba(0,240,255,.4);
  box-shadow: 0 0 20px rgba(0,240,255,.08);
}
.input-valid { border-color: #ef4444 !important; box-shadow: 0 0 20px rgba(239,68,68,.15) !important; }
.input-invalid { border-color: #22c55e !important; box-shadow: 0 0 20px rgba(34,197,94,.15) !important; }

/* ══════════════ TOGGLE ══════════════ */
.toggle-slider {
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: rgba(255,255,255,.1);
  transition: background .3s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform .3s;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.sab-check:checked + .toggle-slider { background: rgba(0,240,255,.5); }
.sab-check:checked + .toggle-slider::before { transform: translateX(20px); }

/* ══════════════ HERO BG ══════════════ */
.hero-bg {
  background: radial-gradient(ellipse at 30% 50%, rgba(0,240,255,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(255,0,229,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 50% 80%, rgba(168,85,247,.06) 0%, transparent 50%);
}

/* ══════════════ FLOATING ORBS ══════════════ */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: .35;
}
.orb-1 { width: 400px; height: 400px; background: #00f0ff; top: -100px; left: -100px; }
.orb-2 { width: 350px; height: 350px; background: #ff00e5; bottom: -80px; right: -80px; }
.orb-3 { width: 250px; height: 250px; background: #a855f7; top: 40%; left: 60%; }

/* ══════════════ LEVEL CARDS ══════════════ */
.level-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.level-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--card-glow) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .4s;
}
.level-card:hover::before { opacity: 1; }
.level-card:hover { transform: translateY(-4px); border-color: var(--card-border); }

/* ══════════════ TOAST ══════════════ */
.toast {
  pointer-events: auto;
  padding: .75rem 1.25rem;
  border-radius: 1rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: .8125rem;
  max-width: 320px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.toast-info { background: rgba(0,240,255,.12); color: #00f0ff; }
.toast-warn { background: rgba(255,0,229,.12); color: #ff00e5; }
.toast-error { background: rgba(239,68,68,.12); color: #ef4444; }
.toast-success { background: rgba(34,197,94,.12); color: #22c55e; }

/* ══════════════ SCREEN TRANSITIONS ══════════════ */
.screen { will-change: opacity, transform; }
.screen.hidden { display: none !important; }

/* ══════════════ SCROLLBAR ══════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 999px; }

/* ══════════════ LIGHT MODE OVERRIDES ══════════════ */
html:not(.dark) body { background: #f0f0ff; color: #1a1a2e; }
html:not(.dark) .glass-card { background: rgba(255,255,255,.7); border-color: rgba(0,0,0,.06); }
html:not(.dark) .input-field { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); color: #1a1a2e; }
html:not(.dark) .input-field::placeholder { color: rgba(0,0,0,.3); }
html:not(.dark) #topbar { background: rgba(240,240,255,.8); border-color: rgba(0,0,0,.05); }
html:not(.dark) .toggle-slider { background: rgba(0,0,0,.15); }

/* ══════════════ LONG PRESS VISUAL CHAOS ══════════════ */
@keyframes chaosShake {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-5px, 3px) rotate(-1deg); }
  20% { transform: translate(4px, -4px) rotate(1deg); }
  30% { transform: translate(-3px, 2px) rotate(-0.5deg); }
  40% { transform: translate(5px, -2px) rotate(0.5deg); }
  50% { transform: translate(-4px, 4px) rotate(-1deg); }
  60% { transform: translate(3px, -3px) rotate(1deg); }
  70% { transform: translate(-2px, 5px) rotate(-0.5deg); }
  80% { transform: translate(4px, -1px) rotate(0.5deg); }
  90% { transform: translate(-3px, 3px) rotate(-1deg); }
}
.chaos-shake { animation: chaosShake .3s infinite; }
.chaos-invert { filter: hue-rotate(180deg) saturate(2) !important; transition: filter .3s; }

/* ══════════════ GOOD UX BAR ══════════════ */
.good-ux-bar {
  animation: goodUxBar 4s linear forwards;
}
@keyframes goodUxBar {
  from { width: 100%; }
  to { width: 0%; }
}

/* ══════════════ INTRUSIVE BANNER ══════════════ */
#intrusive-banner {
  will-change: transform;
}
html:not(.dark) #intrusive-banner .glass-card {
  background: rgba(255,255,255,.85);
  border-color: rgba(168,85,247,.2);
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 640px) {
  .orb { opacity: .2; }
  .orb-1 { width: 250px; height: 250px; }
  .orb-2 { width: 200px; height: 200px; }
  .orb-3 { width: 150px; height: 150px; }
}