/* ===== Design tokens: black + dark blue ===== */
:root{
  --black:#05070d;--navy-900:#0a1020;--navy-800:#0f1a33;--navy-700:#14224a;--navy-600:#1c2f63;
  --blue:#3b82f6;--cyan:#38bdf8;--gold:#fbbf24;
  --bg:#05070d;--panel:#0f1a33;--panel-2:#14224a;--line:#24366b;
  --ink:#e8eefc;--text:#e8eefc;--muted:#9fb0d6;--faint:#7f90b8;
  --primary:#3b82f6;--secondary:#38bdf8;--accent:#fbbf24;--good:#34d399;--bad:#f87171;
  --radius:18px;--radius-sm:12px;
  --shadow:0 6px 0 rgba(0,0,0,.45);--shadow-lg:0 18px 50px rgba(0,0,0,.55);--glow:0 0 0 1px rgba(59,130,246,.35),0 8px 30px rgba(59,130,246,.25);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:40px;
  --fs-sm:.9rem;--fs-base:1.05rem;--fs-lg:1.25rem;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Trebuchet MS",system-ui,sans-serif;
  --font:var(--body);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:var(--fs-base)/1.55 var(--font);min-height:100vh;
  background-color:var(--black);
  background-image:radial-gradient(900px 520px at 12% -5%,rgba(28,47,99,.65),transparent 70%),radial-gradient(800px 500px at 100% 30%,rgba(20,34,74,.55),transparent 70%),radial-gradient(700px 480px at 20% 100%,rgba(15,26,51,.7),transparent 70%);
  background-attachment:fixed}
body.noscroll{overflow:hidden}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:.2em 0 .4em;font-weight:700;letter-spacing:.2px}
h1{font-size:clamp(2rem,6vw,3.2rem)}h2{font-size:clamp(1.5rem,4vw,2.1rem)}
a{color:var(--cyan);font-weight:700}
a:hover{color:#7dd3fc}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{max-width:1000px;margin:0 auto;padding:20px 16px 60px;position:relative;z-index:1}
.muted{color:var(--muted);opacity:1}
.hidden{display:none!important}

/* ===== nav ===== */
.topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 14px;background:rgba(5,7,13,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.topnav .brand{font-family:var(--display);font-weight:700;font-size:1.3rem;color:#fff;text-decoration:none;margin-right:auto;white-space:nowrap;background:linear-gradient(90deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.topnav a.nl{color:var(--ink);text-decoration:none;font-weight:800;padding:7px 14px;border-radius:999px;transition:transform .15s,background .15s,color .15s}
.topnav a.nl:hover{background:var(--navy-700);color:#fff;transform:translateY(-2px)}
.topnav a.nl.active{background:var(--blue);color:#fff;box-shadow:0 0 18px rgba(59,130,246,.5)}
.topnav .chip{background:var(--navy-800);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:800;white-space:nowrap}
.topnav .nbtn{border:1px solid var(--line);background:var(--navy-800);color:var(--ink);font:inherit;font-weight:800;border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .15s}
.topnav .nbtn:hover{background:var(--navy-700)}
@media(max-width:560px){.topnav{gap:2px;padding:6px 8px}.topnav .brand{width:100%;text-align:center}.topnav a.nl,.topnav .nbtn{padding:6px 10px;font-size:.95rem}}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:inherit;font-family:var(--display);font-weight:600;font-size:1.1rem;color:#fff;background:#2563eb;padding:12px 22px;min-height:48px;border-radius:999px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.2);text-decoration:none;transition:transform .12s,box-shadow .12s,filter .12s;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.12);color:#fff}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.45)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.4)}
.btn-blue{background:linear-gradient(180deg,#2563eb,#1d4ed8)}
.btn-green{background:linear-gradient(180deg,#38bdf8,#0ea5e9);color:#031526}
.btn-green:hover{color:#031526}
.btn-yellow{background:linear-gradient(180deg,#fcd34d,var(--gold));color:#1c1400}
.btn-yellow:hover{color:#1c1400}
.btn-ghost{background:var(--navy-800);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--navy-700)}
.btn-sm{font-size:.95rem;padding:7px 14px;min-height:36px}

/* ===== cards / badges ===== */
.card{background:linear-gradient(180deg,var(--navy-800),var(--navy-900));color:var(--ink);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.badge{display:inline-flex;align-items:center;gap:4px;background:var(--navy-700);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-weight:800;font-size:var(--fs-sm)}
.badge.gold{background:rgba(251,191,36,.15);color:var(--gold);border-color:rgba(251,191,36,.5)}

/* ===== animations ===== */
.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}

/* ===== forms ===== */
label{font-weight:800;display:block;margin:12px 0 4px;color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;font:inherit;font-size:1.1rem;padding:12px 14px;border:2px solid var(--line);border-radius:14px;background:var(--navy-900);color:var(--ink);min-height:48px;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(56,189,248,.28)}
option{background:var(--navy-900);color:var(--ink)}
.err{background:rgba(248,113,113,.12);color:#fecaca;border:2px solid var(--bad);border-radius:12px;padding:8px 12px;font-weight:700;margin:10px 0}
.err:empty{display:none}

/* ===== modal ===== */
.modal,.overlay,.modal-bg{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,4,10,.78);backdrop-filter:blur(6px)}
.modal .box,.modal-box,.modal>.card{background:var(--navy-800);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-lg);max-width:480px;width:100%;max-height:90vh;overflow:auto;animation:pop .35s both}

/* ===== toasts ===== */
#toasts{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:9000;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(92vw,420px);pointer-events:none}
.toast{pointer-events:auto;background:var(--navy-700);color:#fff;border:1px solid var(--blue);padding:12px 18px;border-radius:16px;font-weight:800;box-shadow:var(--shadow-lg),0 0 24px rgba(59,130,246,.3);animation:pop .35s both;text-align:center;width:100%}
.toast.good{background:#06352a;border-color:var(--good);color:#a7f3d0}
.toast.bad{background:#3b0d12;border-color:var(--bad);color:#fecaca}
.toast.out{opacity:0;transform:translateY(-10px);transition:.3s}
#confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9500}

/* ===== floating emoji decor ===== */
.floaties{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.floaties span{position:absolute;font-size:2.4rem;opacity:.16;animation:bob 5s ease-in-out infinite;filter:saturate(.8)}
@media(max-width:600px){.floaties span{font-size:1.8rem;opacity:.12}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===== footer / legal ===== */
.legal-foot{text-align:center;padding:24px 16px;font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);margin-top:24px}.legal-foot a{color:var(--cyan)}
.legal h1{margin-top:0}.legal h2{margin:22px 0 6px}.legal p,.legal li{line-height:1.65;color:var(--ink)}