/* ============ Find My Driving Instructor - Dark Neon 2026 (keeps token names) ============ */
:root{
  /* remapped to DARK so all existing inline styles flip automatically */
  --cream:#0a0e17;            /* page background */
  --card:#131a2b;            /* panels */
  --card2:#171f34;
  --navy:#1c2540;            /* was dark accent; now a raised dark surface */
  --navy2:#232e4e;
  --ink:#eaf0ff;             /* main text (now light) */
  --muted:#8b97b8;
  --line:#242f49;
  --line2:#2c3856;
  --brass:#f2c14e; --brass-d:#d9a635; --brass-l:#ffd970;
  --blue:#5b8cff; --ok:#3ee686; --danger:#ff6b5e;
  --neon:#38e1c8; --neon2:#5b8cff;
  --sh1:0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.6);
  --sh2:0 10px 40px -12px rgba(0,0,0,.75);
  --glowb:0 0 0 1px rgba(242,193,78,.3), 0 8px 30px -6px rgba(242,193,78,.4);
  --r:16px; --rlg:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);line-height:1.6;min-height:100vh;
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(91,140,255,.16), transparent 60%),
    radial-gradient(760px 460px at -8% 6%, rgba(56,225,200,.12), transparent 55%),
    radial-gradient(700px 500px at 60% 115%, rgba(242,193,78,.07), transparent 60%),
    #0a0e17;
  background-attachment:fixed;}
a{color:inherit;text-decoration:none}
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif;letter-spacing:-.01em;color:#fff}

/* generic surfaces get subtle glass borders */
.panel,.card{position:relative;background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1)}
.panel::before,.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

.app{display:flex;min-height:100vh}
/* Sidebar */
.side{width:246px;flex-shrink:0;position:relative;overflow:hidden;padding:24px 16px;color:var(--ink);
  background:linear-gradient(180deg,rgba(19,26,43,.92),rgba(10,14,23,.92));border-right:1px solid var(--line)}
.side::before{content:"";position:absolute;top:-120px;left:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(56,225,200,.4),transparent 65%);filter:blur(36px);opacity:.55;animation:aurora1 14s ease-in-out infinite}
.side::after{content:"";position:absolute;bottom:-100px;right:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(91,140,255,.42),transparent 65%);filter:blur(40px);opacity:.55;animation:aurora2 18s ease-in-out infinite}
@keyframes aurora1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,40px)}}
@keyframes aurora2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-30px)}}
.side>*{position:relative;z-index:1}
.side .lg{display:flex;align-items:center;gap:11px;font-family:'Fraunces';font-weight:600;font-size:22px;padding:0 8px 26px;color:#fff}
.side .lg .m{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,var(--brass-l),var(--brass-d));color:#0a0e17;display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-weight:700;box-shadow:0 0 20px -2px rgba(242,193,78,.7)}
.side nav{display:flex;flex-direction:column;gap:3px}
.side nav a{position:relative;display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:12px;color:var(--muted);font-weight:500;font-size:15px;transition:all .22s cubic-bezier(.2,.8,.2,1)}
.side nav a:hover{color:#fff;background:rgba(255,255,255,.05);transform:translateX(2px)}
.side nav a.on{background:linear-gradient(100deg,rgba(56,225,200,.18),rgba(91,140,255,.1));color:#eafffb;box-shadow:inset 0 0 0 1px rgba(56,225,200,.3),0 0 24px -8px rgba(56,225,200,.6)}
.side nav a.on::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:4px;height:22px;border-radius:0 4px 4px 0;background:var(--neon);box-shadow:0 0 12px var(--neon)}
.side nav a .i{width:18px;text-align:center;font-size:16px}
.side nav a .navbadge{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 0 12px -2px var(--danger)}
.side .ft{margin-top:auto;font-size:13px;color:#5f6d92;padding:14px;border-top:1px solid var(--line)}
.side .ft b{color:var(--neon)}

/* Main */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:flex-end;justify-content:space-between;padding:26px 40px 20px;background:rgba(10,14,23,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.topbar .k{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--neon)}
.topbar h1{font-size:33px;font-weight:600;margin-top:4px;color:#fff}
.content{padding:26px 40px 70px;flex:1;animation:fadeup .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Buttons */
.btn{position:relative;background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--line2);font-weight:600;font-size:14px;padding:12px 22px;border-radius:12px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.btn:hover{transform:translateY(-2px);border-color:var(--neon);box-shadow:0 0 24px -6px rgba(56,225,200,.5)}
.btn.brass{background:linear-gradient(145deg,var(--brass-l),var(--brass-d));color:#0a0e17;border:none}
.btn.brass:hover{box-shadow:var(--glowb)}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid var(--line2)}
.btn.ghost:hover{border-color:var(--neon);background:rgba(56,225,200,.08)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.block{width:100%;justify-content:center;padding:14px}

/* Stats */
.stats{display:flex;background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:28px;box-shadow:var(--sh1)}
.stat{flex:1;padding:20px 24px;border-right:1px solid var(--line);transition:background .2s}
.stat:hover{background:rgba(56,225,200,.05)}
.stat:last-child{border:none}
.stat .v{font-family:'Fraunces';font-size:32px;font-weight:600;color:#fff}
.stat .l{color:var(--muted);font-size:13px;margin-top:3px}

/* Forms */
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font-size:15px;font-family:inherit;background:rgba(255,255,255,.04);color:var(--ink);transition:all .2s}
.field input::placeholder,.field textarea::placeholder{color:#5f6d92}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--neon);background:rgba(56,225,200,.06);box-shadow:0 0 0 4px rgba(56,225,200,.12)}
.field select option{background:var(--card);color:var(--ink)}
.field .hint{font-size:12px;color:#5f6d92;margin-top:5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips .c{flex:1;text-align:center;border:1px solid var(--line2);border-radius:11px;padding:11px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;user-select:none;transition:all .18s;background:rgba(255,255,255,.03)}
.chips .c:hover{border-color:var(--neon)}
.chips .c.on{border-color:var(--neon);background:rgba(56,225,200,.14);color:#eafffb;box-shadow:0 0 16px -6px rgba(56,225,200,.5)}
.chip{transition:all .18s}.chip.on,.chip:hover{transform:translateY(-1px)}

/* Flash */
.flash{background:rgba(62,230,134,.1);border:1px solid rgba(62,230,134,.35);color:#8ffcc0;padding:13px 16px;border-radius:12px;margin-bottom:20px;font-size:14px;font-weight:500}
.err{background:rgba(255,107,94,.1);border:1px solid rgba(255,107,94,.35);color:#ffb3ab;padding:13px 16px;border-radius:12px;margin-bottom:16px;font-size:14px}

/* Auth */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;background:#0a0e17}
.authwrap::before{content:"";position:absolute;top:-10%;left:12%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(56,225,200,.28),transparent 60%);filter:blur(50px);animation:aurora1 16s ease-in-out infinite}
.authwrap::after{content:"";position:absolute;bottom:-15%;right:6%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(91,140,255,.28),transparent 60%);filter:blur(54px);animation:aurora2 20s ease-in-out infinite}
.authcard{position:relative;z-index:1;background:linear-gradient(160deg,rgba(19,26,43,.88),rgba(13,18,32,.88));backdrop-filter:blur(20px);border:1px solid var(--line2);border-radius:24px;padding:40px;width:100%;max-width:430px;box-shadow:var(--sh2)}
.authcard .lg{display:flex;align-items:center;gap:11px;font-family:'Fraunces';font-weight:600;font-size:24px;margin-bottom:4px;color:#fff}
.authcard .lg .m{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,var(--brass-l),var(--brass-d));color:#0a0e17;display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-weight:700;font-size:22px;box-shadow:0 0 24px -4px rgba(242,193,78,.7)}
.authcard .sub{color:var(--muted);font-size:15px;margin-bottom:26px}
.authcard .rem{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);margin:4px 0 20px}.authcard .rem input{width:auto}
.authcard .alt{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}.authcard .alt a{color:var(--neon);font-weight:600}

/* Mobile */
.mtabs{display:none}
@media(max-width:860px){
  .side{display:none}.topbar{padding:18px 18px 14px}.content{padding:16px 18px 96px}.topbar h1{font-size:25px}
  .stats{flex-wrap:wrap}.stat{flex:1 1 50%;border-bottom:1px solid var(--line)}.grid2{grid-template-columns:1fr}
  .mtabs{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0));background:rgba(10,14,23,.92);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .mtabs a{flex:1;text-align:center;color:var(--muted);font-size:11px;font-weight:600;position:relative}
  .mtabs a .i{display:block;font-size:20px;margin-bottom:2px}.mtabs a.on{color:var(--neon)}
  .mtabs a .navbadge{position:absolute;top:2px;right:22px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center}
  .mtop{display:flex !important}
}
.mtop{display:none;align-items:center;gap:10px}
.mtop .m{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--brass-l),var(--brass-d));color:#0a0e17;display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-weight:700}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ================= THEME VARIANTS (data-theme on <html>) ================= */
/* Default (no attribute) = Midnight Neon, already defined in :root above. */

/* Royal Gold - dark navy + warm gold, minimal neon */
html[data-theme="gold"]{
  --cream:#0c0f1a; --card:#151a2c; --card2:#1a2033; --navy:#20263f; --navy2:#28304d;
  --ink:#f3eede; --muted:#a99f86; --line:#2a2f45; --line2:#343a55;
  --brass:#e7b84e; --brass-d:#c99a34; --brass-l:#ffd873; --neon:#e7b84e; --neon2:#c99a34; --blue:#6b8cff;
}
html[data-theme="gold"] body{background:
  radial-gradient(900px 480px at 88% -10%, rgba(231,184,78,.16), transparent 60%),
  radial-gradient(760px 460px at -8% 6%, rgba(231,184,78,.08), transparent 55%), #0c0f1a;}
html[data-theme="gold"] .side::before{background:radial-gradient(circle,rgba(231,184,78,.4),transparent 65%)}
html[data-theme="gold"] .side::after{background:radial-gradient(circle,rgba(231,184,78,.25),transparent 65%)}

/* Aurora Purple - deep indigo + magenta/violet neon */
html[data-theme="purple"]{
  --cream:#0c0a1a; --card:#161329; --card2:#1c1733; --navy:#231d44; --navy2:#2c2456;
  --ink:#efeaff; --muted:#9b93c4; --line:#2a2450; --line2:#352d63;
  --brass:#c77dff; --brass-d:#a24dff; --brass-l:#e0a9ff; --neon:#ff6ec7; --neon2:#8b5cff; --blue:#8b5cff;
}
html[data-theme="purple"] body{background:
  radial-gradient(900px 480px at 88% -10%, rgba(139,92,255,.2), transparent 60%),
  radial-gradient(760px 460px at -8% 6%, rgba(255,110,199,.14), transparent 55%), #0c0a1a;}
html[data-theme="purple"] .side::before{background:radial-gradient(circle,rgba(255,110,199,.4),transparent 65%)}
html[data-theme="purple"] .side::after{background:radial-gradient(circle,rgba(139,92,255,.42),transparent 65%)}

/* Daylight - light, clean (Apple-vari) */
html[data-theme="light"]{
  --cream:#f4f1ea; --card:#fffdf9; --card2:#fbf8f1; --navy:#0f1d2e; --navy2:#16293f;
  --ink:#14202e; --muted:#6f6752; --line:#e6ddcb; --line2:#efe7d6;
  --brass:#c9a24b; --brass-d:#a5813a; --brass-l:#e0c078; --neon:#a5813a; --neon2:#3b6fe0; --blue:#3b6fe0;
}
html[data-theme="light"] body{background:
  radial-gradient(1100px 520px at 88% -8%, rgba(201,162,75,.10), transparent 60%),
  radial-gradient(900px 500px at -10% 8%, rgba(59,111,224,.06), transparent 55%), #f4f1ea;}
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3{color:var(--ink)}
html[data-theme="light"] .topbar h1{color:var(--ink)}
html[data-theme="light"] .side{background:linear-gradient(180deg,#0f1d2e,#16293f)} /* keep sidebar dark for contrast */
html[data-theme="light"] .btn{background:#fff;color:var(--ink);border-color:var(--line)}
html[data-theme="light"] .btn.ghost{background:#fff}
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:#fff}
html[data-theme="light"] .stat .v,html[data-theme="light"] .serif{color:var(--ink)}

/* --- Daylight readability fix: hardcoded white/light inline text inside content -> dark --- */
html[data-theme="light"] .content [style*="color:#fff"],
html[data-theme="light"] .content [style*="color:#eaf0ff"],
html[data-theme="light"] .content [style*="color:#eef"],
html[data-theme="light"] .content [style*="color: #fff"]{color:var(--ink) !important}
/* keep text readable on genuinely dark inline boxes (navy) even in light theme */
html[data-theme="light"] .content [style*="background:var(--navy)"],
html[data-theme="light"] .content [style*="background:var(--navy)"] *{color:#eaf0ff !important}

/* ===== WCAG 2.2 accessibility layer ===== */
/* 2.4.7 / 2.4.11 visible focus — strong, theme-aware, never obscured */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:3px solid var(--neon) !important;outline-offset:2px !important;border-radius:6px;scroll-margin:120px}
/* skip link (keyboard users jump past nav) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--brass);color:#0a0e17;font-weight:700;padding:10px 16px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
/* 2.5.8 target size — small controls get a min hit area */
.btn.sm,.navbtns a,.chips .c{min-height:24px}
/* 2.3.3 respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}