/* Finals Prep Hub — clean & bright minimal (with dark mode) */
:root{
  --bg:#f5f7fb; --bg2:#eef1f8; --surface:#ffffff; --surface2:#f7f9fc;
  --ink:#1b2030; --muted:#6b7385; --line:#e6e9f2; --line2:#d8dced;
  --accent:#4f6ef7; --accent-ink:#ffffff;
  --good:#16a34a; --good-bg:#e9f9ef; --bad:#e5484d; --bad-bg:#fdecec; --warn:#d98a00;
  --shadow:0 6px 22px rgba(30,40,80,.08); --shadow-lg:0 16px 50px rgba(30,40,80,.16);
  --radius:18px; --radius-sm:12px;
  --sp:#ef5b54; --ge:#3b82f6; --en:#8b5cf6; --bi:#10b981; /* subject accents */
}
[data-theme="dark"]{
  --bg:#0e1220; --bg2:#0b0f1a; --surface:#161b2b; --surface2:#1c2233;
  --ink:#eaeefb; --muted:#9aa4bd; --line:#283149; --line2:#323c58;
  --accent:#6d8bff; --good:#34d399; --good-bg:#0f2a20; --bad:#f87171; --bad-bg:#2a1416; --warn:#fbbf24;
  --shadow:0 6px 22px rgba(0,0,0,.35); --shadow-lg:0 18px 50px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(1200px 600px at 80% -10%, var(--bg2), var(--bg)); color:var(--ink);
  font:16px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.container{width:min(980px,94vw); margin:0 auto}
a{color:var(--accent)}
.hidden{display:none !important}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.2) blur(8px);
  background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; gap:14px; padding:12px 0}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; text-decoration:none; color:var(--ink)}
.brand .logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#8b5cf6);color:#fff;font-size:17px}
.spacer{flex:1}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;font-size:16px;display:grid;place-items:center;transition:.15s}
.icon-btn:hover{border-color:var(--accent); transform:translateY(-1px)}
.user-chip{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;font-weight:600;font-size:14px}
.user-chip:hover{border-color:var(--accent)}
.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;background:var(--accent)}
.back-link{color:var(--accent);text-decoration:none;font-weight:600;font-size:14px}

/* ---------- name modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(15,20,35,.55);display:grid;place-items:center;padding:20px;backdrop-filter:blur(4px)}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);max-width:440px;width:100%;padding:34px;text-align:center;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal .big{font-size:48px}
.modal h2{margin:10px 0 4px;font-size:24px}
.modal p{color:var(--muted);margin:0 0 18px}
.modal input{width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line2);background:var(--surface2);color:var(--ink);font-size:17px;text-align:center;outline:none}
.modal input:focus{border-color:var(--accent)}
.profiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.profile-pill{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);cursor:pointer;font-size:13px;font-weight:600}
.profile-pill:hover{border-color:var(--accent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;background:var(--accent);color:var(--accent-ink);border:none;
  padding:13px 24px;border-radius:13px;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none;transition:.15s;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent);box-shadow:none}
.btn.subtle{background:var(--surface2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.lg{padding:16px 30px;font-size:17px}

/* ---------- home ---------- */
.hero{padding:30px 0 8px}
.hero h1{font-size:30px;margin:0 0 4px;letter-spacing:-.3px}
.hero p{color:var(--muted);margin:0}
.overall-card{margin:18px 0 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:18px}
.overall-card .ring-wrap{flex:0 0 auto}
.overall-card .ov-text h3{margin:0 0 3px;font-size:16px}
.overall-card .ov-text p{margin:0;color:var(--muted);font-size:14px}
.subject-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:14px 0 32px}
.subject-card{position:relative;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:.16s;overflow:hidden}
.subject-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--sc) 50%,var(--line))}
.subject-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--sc)}
.subject-card .top{display:flex;align-items:flex-start;justify-content:space-between}
.subject-card .emoji{font-size:32px}
.subject-card h3{margin:8px 0 2px;font-size:20px}
.subject-card .info{color:var(--muted);font-size:13px;min-height:34px}
.pill{align-self:flex-start;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;margin-top:8px}
.pill.passed{background:var(--good-bg);color:var(--good)}
.pill.progress{background:color-mix(in srgb,var(--sc) 14%,transparent);color:var(--sc)}
.pill.pending{background:#fff5e6;color:var(--warn)}
.pill.untouched{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
[data-theme="dark"] .pill.pending{background:#3a2e12}

/* progress ring */
.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring .bg{stroke:var(--line2)}
.ring .fg{stroke:var(--sc,var(--accent));transition:stroke-dashoffset .6s ease}
.ring-label{font-weight:800;font-size:14px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:8px;margin:20px 0 18px;flex-wrap:wrap}
.tab-btn{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:10px 16px;border-radius:999px;cursor:pointer;font-weight:700;font-size:14px;transition:.15s}
.tab-btn:hover{border-color:var(--accent)}
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tab-btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- subject header ---------- */
.subj-head{display:flex;align-items:center;gap:14px;padding:22px 0 4px}
.subj-head .emoji{font-size:34px}
.subj-head h1{margin:0;font-size:26px;color:var(--sc)}
.subj-head p{margin:2px 0 0;color:var(--muted);font-size:14px}

/* ---------- lesson carousel ---------- */
.lesson-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow);animation:slidein .25s ease}
@keyframes slidein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.lesson-card h3{margin:0 0 12px;font-size:22px;color:var(--sc)}
.lesson-card p{margin:10px 0}
.lesson-card table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.lesson-card th,.lesson-card td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.lesson-card th{background:var(--surface2);font-weight:700}
.lesson-card code{background:color-mix(in srgb,var(--sc) 12%,transparent);color:var(--ink);padding:2px 7px;border-radius:7px;font-size:.92em;font-weight:600}
.callout{border-left:4px solid var(--sc,var(--accent));background:color-mix(in srgb,var(--sc) 8%,var(--surface2));padding:12px 16px;border-radius:10px;margin:14px 0}
.stepper{display:flex;align-items:center;gap:12px;margin:18px 0 6px}
.step-bar{flex:1;height:8px;background:var(--line2);border-radius:999px;overflow:hidden}
.step-bar>span{display:block;height:100%;background:var(--sc,var(--accent));transition:width .35s ease}
.step-count{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.nav-row{display:flex;justify-content:space-between;gap:12px;margin-top:16px;align-items:center}

/* flashcards */
.flash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px}
.flash{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:18px;min-height:84px;display:grid;place-items:center;text-align:center;cursor:pointer;font-weight:700;transition:.15s;perspective:600px}
.flash:hover{border-color:var(--sc);transform:translateY(-2px)}
.flash .back{display:none;color:var(--sc)}
.flash.flipped .front{display:none}
.flash.flipped .back{display:block}

/* ---------- scope / unit menu ---------- */
.scope-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:6px}
.scope-btn{display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;color:var(--ink);transition:.16s}
.scope-btn:hover{transform:translateY(-2px);border-color:var(--sc);box-shadow:var(--shadow)}
.scope-btn .meta{flex:1}
.scope-btn .nm{font-weight:700;font-size:15px}
.scope-btn .sub{color:var(--muted);font-size:12.5px}
.scope-btn.full{background:linear-gradient(120deg,color-mix(in srgb,var(--sc) 14%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--sc) 35%,var(--line))}

/* ---------- quiz ---------- */
.intro{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.intro h3{margin:0 0 8px;color:var(--sc)}
.q-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.qnum{color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.02em}
.qtext{font-size:19px;margin:8px 0 16px;font-weight:600;line-height:1.45}
.opt{display:flex;align-items:center;gap:11px;padding:13px 15px;border:1.5px solid var(--line2);border-radius:13px;margin:9px 0;cursor:pointer;transition:.12s;background:var(--surface)}
.opt:hover{border-color:var(--accent);background:var(--surface2)}
.opt input{accent-color:var(--accent);width:17px;height:17px}
.opt.correct{border-color:var(--good);background:var(--good-bg)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.disabled{pointer-events:none}
.fill-input{width:100%;padding:13px 15px;border-radius:13px;border:1.5px solid var(--line2);background:var(--surface2);color:var(--ink);font-size:16px;outline:none}
.fill-input:focus{border-color:var(--accent)}
.feedback{margin-top:14px;padding:13px 16px;border-radius:13px;font-size:14.5px;animation:slidein .2s ease}
.feedback.ok{background:var(--good-bg);color:var(--good);border:1px solid color-mix(in srgb,var(--good) 35%,transparent)}
.feedback.no{background:var(--bad-bg);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent)}
.feedback .ex{color:var(--ink);margin-top:6px}
.progressline{height:8px;background:var(--line2);border-radius:999px;overflow:hidden;margin-bottom:16px}
.progressline>span{display:block;height:100%;background:var(--sc,var(--accent));transition:width .3s}
.hintbox{margin-top:12px;background:var(--surface2);border:1px dashed var(--line2);border-radius:12px;padding:12px 14px;color:var(--muted);font-size:14px}

/* results */
.result{padding:26px;border-radius:var(--radius);text-align:center;margin-bottom:18px;border:1px solid var(--line)}
.result.pass{background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.result.fail{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.result .score{font-size:52px;font-weight:900;line-height:1}
.result .msg{font-size:16px;margin-top:6px}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:800;margin-top:12px;box-shadow:var(--shadow)}
.review-q{background:var(--surface);border:1px solid var(--line);border-left-width:4px;border-radius:13px;padding:14px 16px;margin:10px 0}
.review-q.correct{border-left-color:var(--good)}
.review-q.wrong{border-left-color:var(--bad)}

.pending-note{background:var(--surface);border:1px dashed var(--warn);border-radius:var(--radius);padding:26px;color:var(--muted)}

/* ---------- mascot ---------- */
.mascot{position:fixed;right:18px;bottom:18px;z-index:30;display:flex;align-items:flex-end;gap:10px;max-width:min(330px,80vw);pointer-events:none}
.mascot .bubble{background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:10px 14px;box-shadow:var(--shadow-lg);font-size:14px;font-weight:600;opacity:0;transform:translateY(8px) scale(.96);transition:.25s}
.mascot.show .bubble{opacity:1;transform:none}
.mascot .face{font-size:42px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));transition:transform .2s}
.mascot.bounce .face{animation:bounce .5s}
@keyframes bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-12px) rotate(-6deg)}60%{transform:translateY(-4px)}}

/* ---------- confetti ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90}

/* ---------- footer ---------- */
.foot{margin:40px 0 110px;text-align:center;color:var(--muted);font-size:13px}

@media(max-width:560px){
  .hero h1{font-size:24px}
  .lesson-card{padding:20px}
  .mascot{display:none}
}

/* ---------- learn diagrams ---------- */
.diagram{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:16px;margin:18px 0;text-align:center}
.dg-title{font-weight:800;font-size:14px;margin-bottom:12px;color:var(--sc,var(--accent))}
.dg-cap{margin-top:12px;font-size:13px;color:var(--muted)}
/* punnett square */
.pq{border-collapse:collapse;margin:0 auto}
.pq th,.pq td{width:54px;height:46px;text-align:center;font-weight:800;border:1px solid var(--line2)}
.pq th{background:var(--surface);color:var(--muted)}
.pq .cnr{border:none;background:transparent}
.pq td.g,.pq td.r{transform:scale(0);animation:pqpop .45s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:var(--d)}
.pq td.g{background:rgba(16,163,74,.18);color:#0a7a37}
.pq td.r{background:rgba(217,138,0,.22);color:#8a5a00}
@keyframes pqpop{to{transform:scale(1)}}
/* dna helix */
.dna{display:inline-flex;flex-direction:column;gap:6px;padding:4px 0}
.dna .rung{display:flex;align-items:center;gap:2px;animation:dnasway 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -0.4s)}
@keyframes dnasway{0%,100%{transform:translateX(-12px)}50%{transform:translateX(12px)}}
.dna .b{width:24px;height:24px;border-radius:6px;color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.dna .rod{width:34px;height:4px;background:var(--line2);border-radius:2px}
.b.a{background:#16a34a}.b.t{background:#d98a00}.b.g{background:#3b82f6}.b.c{background:#e5484d}.b.u{background:#8b5cf6}
/* geometry figures */
.figs{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:flex-end}
.fig{width:130px;height:auto}.fig.wide{width:185px}
.fig .body{fill:color-mix(in srgb,var(--sc) 12%,transparent);stroke:var(--sc);stroke-width:2}
.fig .top,.fig .eq{fill:color-mix(in srgb,var(--sc) 20%,transparent);stroke:var(--sc);stroke-width:2}
.fig .dim{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 2}
.fig .lbl{fill:var(--ink);font-size:11px;font-weight:800}
.fig .frm{fill:var(--muted);font-size:9px;font-weight:700}
.fig .pt{fill:var(--sc)}
.fig .ray.c{stroke:#3b82f6;stroke-width:2.5}
.fig .ray.i{stroke:#e5484d;stroke-width:2.5}