/* ── THEME VARS (single source of truth — was duplicated per-page, now shared) ── */
:root,[data-theme="dark"]{
  --bg:#08081a;--bg1:#0d0d22;--bg2:#12122e;--bg3:#1a1a3e;--bg4:#22224e;
  --br:rgba(124,58,237,.14);--br-md:rgba(124,58,237,.26);--br-hi:rgba(124,58,237,.45);
  --p:#7c3aed;--pb:#9061f9;--pd:rgba(124,58,237,.38);--pg:rgba(124,58,237,.12);
  --sec:#3b82f6;--green:#34d399;--red:#f87171;--amber:#fbbf24;
  --t1:#ede9ff;--t2:#a89fd6;--t3:#7b72b0;--t4:#3d3870;
  --nb:rgba(8,8,26,.92);--sh:0 24px 80px rgba(0,0,0,.7);
}
[data-theme="light"]{
  --bg:#f5f3ff;--bg1:#fff;--bg2:#ede8ff;--bg3:#e0d8ff;--bg4:#d0c5ff;
  --br:rgba(109,40,217,.1);--br-md:rgba(109,40,217,.2);--br-hi:rgba(109,40,217,.35);
  --p:#6d28d9;--pb:#7c3aed;--pd:rgba(109,40,217,.4);--pg:rgba(109,40,217,.1);
  --sec:#2563eb;--green:#059669;--red:#dc2626;--amber:#b45309;
  --t1:#1a1040;--t2:#3d3464;--t3:#6b5fa0;--t4:#c4b5fd;
  --nb:rgba(245,243,255,.94);--sh:0 24px 80px rgba(109,40,217,.12);
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--t1);font-family:'Inter',sans-serif;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;}
a{color:var(--pb);text-decoration:none;}
a:hover{color:var(--p);}
::selection{background:var(--pg);color:var(--pb);}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--p),var(--sec));border-radius:2px;}
:focus-visible{outline:2px solid var(--pb);outline-offset:3px;border-radius:4px;}
.mono{font-family:'JetBrains Mono',monospace;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}}

.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 50% at 50% -10%,var(--pg),transparent 70%);}
.grid-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(var(--br) 1px,transparent 1px),linear-gradient(90deg,var(--br) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 0%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 75% 60% at 50% 0%,#000 10%,transparent 72%);}

/* ── NAV + LOGO ─────────────────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:80px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--nb);backdrop-filter:blur(24px);border-bottom:1px solid var(--br);}
.nlogo{display:flex;align-items:center;gap:10px;}
.nlogo-img{width:100px;height:100px;object-fit:contain;display:block;}
[data-theme] .logo-dk{display:block;}
[data-theme] .logo-lg{display:none;}
[data-theme="light"] .logo-dk{display:none;}
[data-theme="light"] .logo-lg{display:block;}
.nav-mid{display:flex;align-items:center;gap:14px;}
.nr{display:flex;align-items:center;gap:12px;}
.nav-link{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;border:1px solid var(--br-md);background:var(--bg1);color:var(--t2);font-size:12.5px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;}
.nav-link:hover{border-color:var(--pd);color:var(--pb);}
.nav-link svg{width:14px;height:14px;}

/* Theme toggle */
.t3d-toggle{width:60px;height:30px;cursor:pointer;position:relative;border:none;background:none;padding:0;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.t3d-track{width:100%;height:100%;border-radius:15px;background:linear-gradient(180deg,var(--bg3),var(--bg4));border:1px solid var(--br-md);transition:all .3s;}
.t3d-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:linear-gradient(145deg,#c4b5fd,#ede9ff);box-shadow:0 2px 8px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s;}
.t3d-knob svg{width:11px;height:11px;stroke:var(--p);fill:none;stroke-width:2;}
[data-theme="light"] .t3d-track{background:linear-gradient(135deg,var(--p),var(--sec));border-color:transparent;}
[data-theme="light"] .t3d-knob{transform:translateX(30px);background:linear-gradient(145deg,#fef3c7,#fffbeb);}
[data-theme="light"] .t3d-knob svg{stroke:#f59e0b;}

/* ── NAV RESPONSIVE ──────────────────────────────────────────────────────────
   This file had no breakpoints, so every page that gets its header from here
   (login, signup, forgot, resetpassword, mailconfirmation, onetapsignup) kept
   the full 80px bar and the full 100px logo on a phone — a wordmark more than
   twice the size the dashboard shows at the same width, with the controls
   squeezed against it. The steps below are the same ones the dashboard and
   public/css/app-header.css use, so all three now shrink together. */
@media(max-width:1100px){
  #nav{padding:0 32px;}
}
@media(max-width:960px){
  #nav{height:66px;padding:0 18px;}
  .nlogo-img{width:52px;height:52px;}
  .nav-link{padding:8px 13px;}
}
@media(max-width:600px){
  #nav{height:58px;padding:0 12px;gap:8px;}
  .nlogo-img{width:44px;height:44px;}
  .nr{gap:7px;}
  /* Labels go, icons and their tap targets stay. */
  .nav-link span{display:none;}
  .nav-link{padding:0;width:36px;height:36px;justify-content:center;}
  .t3d-toggle{width:42px;height:22px;}
  .t3d-knob{width:16px;height:16px;top:2px;left:2px;}
  .t3d-knob svg{width:9px;height:9px;}
  [data-theme="light"] .t3d-knob{transform:translateX(20px);}
}
@media(max-width:360px){
  #nav{padding:0 10px;gap:6px;}
  .nlogo-img{width:38px;height:38px;}
}

/* ── PANEL SYSTEM ───────────────────────────────────────────────────────── */
.panel{background:var(--bg1);border:1px solid var(--br-md);border-radius:16px;overflow:hidden;}
.panel-hd{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--br);}
.panel-t{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);display:flex;align-items:center;gap:8px;}
.panel-t svg{width:13px;height:13px;color:var(--pb);}

/* ── BADGE SYSTEM ───────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--br-md);}
.bdg-easy{background:rgba(52,211,153,.1);color:var(--green);border-color:rgba(52,211,153,.25);}
.bdg-med{background:rgba(251,191,36,.1);color:var(--amber);border-color:rgba(251,191,36,.25);}
.bdg-hard{background:rgba(248,113,113,.1);color:var(--red);border-color:rgba(248,113,113,.25);}
.bdg-p{background:var(--pg);color:var(--pb);}
.bdg-sub{background:rgba(59,130,246,.1);color:var(--sec);border-color:rgba(59,130,246,.3);}
.badge svg{width:11px;height:11px;}