/* ─── Theme Toggle Slider ──────────────────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tt-track {
  display: block;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  position: relative;
  transition: background .35s ease, border-color .35s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}

.tt-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c8d0f0;
  border: 1px solid rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s cubic-bezier(.4,0,.2,1), background .35s, border-color .35s;
  color: #1a1a2e;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Icons — moon visible in dark, sun in light */
.tt-knob .icon-sun  { display: none; }
.tt-knob .icon-moon { display: block; }

/* ── Light mode: knob slides right ── */
html[data-theme="light"] .tt-track {
  background: rgba(0,153,255,.18);
  border-color: rgba(0,153,255,.5);
  box-shadow: inset 0 1px 3px rgba(0,100,200,.15);
}
html[data-theme="light"] .tt-knob {
  transform: translateX(24px);
  background: #fff;
  border-color: rgba(0,153,255,.4);
  color: #0077cc;
  box-shadow: 0 1px 4px rgba(0,100,200,.25);
}
html[data-theme="light"] .tt-knob .icon-sun  { display: block; }
html[data-theme="light"] .tt-knob .icon-moon { display: none; }

/* ─── Light Mode — Index + Login shared ───────────────────────────────────── */
html[data-theme="light"] body {
  background: #f0f4f8;
  color: #0a0a1a;
}

/* Grid background → blue tint */
html[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(0,153,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,153,255,.07) 1px, transparent 1px);
}
html[data-theme="light"] .grid-bg::after {
  background: radial-gradient(ellipse 65% 65% at 50% 50%, transparent 35%, #f0f4f8 100%);
}

/* Scanlines subtler in light */
html[data-theme="light"] .scanlines {
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.04) 2px, rgba(0,0,0,.04) 4px
  );
}

/* ─── Light Mode — Index specific ─────────────────────────────────────────── */
html[data-theme="light"] nav {
  background: rgba(240,244,248,.88);
  border-bottom-color: rgba(0,153,255,.18);
}
html[data-theme="light"] .nav-brand   { color: #0a0a1a; }
html[data-theme="light"] .nav-login   { color: rgba(10,10,26,.4); border-color: rgba(0,153,255,.25); }
html[data-theme="light"] .nav-login:hover { color: #0a0a1a; border-color: #0099ff; background: rgba(0,153,255,.07); }

/* CSS variable overrides via custom props used inline in index/login */
html[data-theme="light"] { --red: #0099ff; --red-dim: rgba(0,153,255,.12); --red-glow: rgba(0,153,255,.45); --white: #0a0a1a; --dim: #666; --bg: #f0f4f8; }

/* HUD SVG: hue-rotate red → neon blue */
html[data-theme="light"] .hud-svg { filter: hue-rotate(208deg) saturate(1.15) brightness(.95); }

/* Hero text */
html[data-theme="light"] .glitch { color: #0a0a1a; }
html[data-theme="light"] .hero-desc { color: #4a5a7a; }
html[data-theme="light"] .hero-desc .hl { color: #1a2a4a; }
html[data-theme="light"] .hero-version { color: #8a9ab0; }

/* Footer */
html[data-theme="light"] footer { border-top-color: rgba(0,153,255,.1); }
html[data-theme="light"] footer span { color: #8a9ab0; }
html[data-theme="light"] footer .dot { color: #0099ff; }

/* Status strip */
html[data-theme="light"] .hud-status { color: rgba(10,10,26,.35); }
html[data-theme="light"] .hs-sep     { background: rgba(10,10,26,.1); }

/* ─── Light Mode — Login card ─────────────────────────────────────────────── */
html[data-theme="light"] .brand   { color: #0a0a1a; }
html[data-theme="light"] .card    { background: rgba(255,255,255,.97); border-color: rgba(0,153,255,.22); box-shadow: 0 8px 40px rgba(0,153,255,.08); }
html[data-theme="light"] .card-title { color: #0a0a1a; }
html[data-theme="light"] .field label { color: rgba(10,10,26,.4); }
html[data-theme="light"] .field input {
  background: rgba(0,153,255,.03);
  border-color: rgba(0,153,255,.15);
  color: #0a0a1a;
}
html[data-theme="light"] .field input::placeholder { color: rgba(10,10,26,.22); }
html[data-theme="light"] .field input:focus { border-color: rgba(0,153,255,.5); box-shadow: 0 0 0 3px rgba(0,153,255,.08); }
html[data-theme="light"] .push-status  { background: rgba(0,153,255,.05); border-color: rgba(0,153,255,.1); color: rgba(10,10,26,.45); }
html[data-theme="light"] .push-hint    { color: rgba(10,10,26,.3); }
html[data-theme="light"] .push-hint strong { color: rgba(10,10,26,.55); }
html[data-theme="light"] .back-link    { color: rgba(10,10,26,.55); }
html[data-theme="light"] .back-link:hover { color: rgba(0,153,255,.95); }
html[data-theme="light"] .btn-ghost    { border-color: rgba(10,10,26,.12); color: rgba(10,10,26,.35); }
html[data-theme="light"] .btn-ghost:hover { border-color: rgba(0,153,255,.35); }
html[data-theme="light"] .toggle-pw    { color: rgba(10,10,26,.25); }
html[data-theme="light"] .toggle-pw:hover { color: rgba(10,10,26,.55); }

/* ─── Light Mode — Dashboard ──────────────────────────────────────────────── */
html[data-theme="light"] { --bg: #f0f4f8; --bg-2: #e8edf5; --bg-3: #dde4f0; --bg-4: #d0daea; --bg-hover: #cdd6e8; --border: #c0cce0; --border-2: #aabbd4; --text: #0a0a1a; --text-2: #3a4a6a; --text-3: #7a8aa0; --red: #0099ff; --red-2: #0088ee; --red-dark: #0066cc; --red-glow: rgba(0,153,255,.15); --red-dim: rgba(0,153,255,.08); }
html[data-theme="light"] .app      { background: #f0f4f8; }
html[data-theme="light"] .topbar   { background: rgba(255,255,255,.95); border-bottom-color: rgba(0,153,255,.15); box-shadow: 0 1px 20px rgba(0,153,255,.06); }
html[data-theme="light"] .brand-name { color: #0a0a1a; }
html[data-theme="light"] .brand-dot  { color: #0099ff; }
html[data-theme="light"] .brand-suffix { color: #3a4a6a; }
html[data-theme="light"] .sidebar    { background: #e8edf5; border-right-color: #c8d4e8; }
html[data-theme="light"] .nav-section { color: #8a9ab0; }
html[data-theme="light"] .nav-item   { color: #3a4a6a; }
html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active { background: rgba(0,153,255,.08); color: #0099ff; }
html[data-theme="light"] .main        { background: #f0f4f8; }
html[data-theme="light"] .stat-card   { background: #fff; border-color: #c0cce0; }
html[data-theme="light"] .stat-label  { color: #7a8aa0; }
html[data-theme="light"] .stat-value  { color: #0a0a1a; }
html[data-theme="light"] .btn-logout  { border-color: #c0cce0; color: #7a8aa0; }
html[data-theme="light"] .btn-logout:hover { border-color: rgba(0,153,255,.4); color: #3a4a6a; }
html[data-theme="light"] .user-avatar { background: rgba(0,153,255,.15); color: #0099ff; border-color: rgba(0,153,255,.25); }