/* Base layout is Glass (frosted translucent panels); data-theme switches the style (Claymorphism is the default,
   set by theme.js) and data-color the palette. Correct/missed stay green/red so results read at a glance. */
:root{
  --paper:var(--base); --sheet:#ffffff; --ink:#26222f; --graphite:#686274; --rule:rgba(var(--a),.14);
  --form-soft:rgba(var(--a),.08); --pencil:var(--form);
  --glass:rgba(255,255,255,.56); --glass-strong:rgba(255,255,255,.80); --glass-edge:rgba(255,255,255,.85);
  --solid:#fff; --chip:rgba(255,255,255,.66); --field-bg:rgba(255,255,255,.75); --field-shadow:inset 0 1px 2px rgba(var(--sh),.05);
  --bar-bg:rgba(255,255,255,.62); --btn-bg:linear-gradient(180deg,var(--form),var(--form-deep)); --on-btn:#fff;
  --btn-shadow:0 6px 18px rgba(var(--a),.25),inset 0 1px 0 rgba(255,255,255,.25); --pressed:0 0 0 3px rgba(var(--a),.08);
  --sh:28,32,46; /* shadows stay neutral grey whatever the palette */
  --shadow:0 10px 34px rgba(var(--sh),.10),0 1px 2px rgba(var(--sh),.06);
  --blur:blur(18px) saturate(170%);
  --good:#1d7a4c; --good-soft:rgba(29,122,76,.11); --bad:#c8462c; --bad-soft:rgba(200,70,44,.10); --warn:#a2630d; --warn-soft:rgba(162,99,13,.11);
  --display:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:18px;
  color-scheme:light;
}
/* Colour palettes: one accent (--form, and --a as its RGB for translucent tints), pastel tints for the
   backdrop, and the surfaces Neumorphism and Midnight need. Blueberry is the default; data-color picks another. */
:root,[data-color="blueberry"]{
  --a:79,70,229; --ad:49,46,129; --form:#4f46e5; --form-light:#6366f1; --form-deep:#3730a3; --on-dark:#a5b4fc; --od:165,180,252;
  --t1:#dfe3ff; --t2:#ffe3f1; --t3:#d6ecff; --base:#f6f7ff; --base2:#eceefe; --surface:#fafaff;
  --neu:#e9ebf7; --neu-dark:#c9cde3; --neu-light:#f4f5fc; --night:#0c0b1a; --night2:#16142b}
[data-color="ocean"]{
  --a:14,127,116; --ad:15,80,74; --form:#0e7f74; --form-light:#14b8a6; --form-deep:#0b5d55; --on-dark:#5eead4; --od:94,234,212;
  --t1:#c9f5ec; --t2:#d7e9ff; --t3:#fff1c9; --base:#f3fbf9; --base2:#e6f6f2; --surface:#f9fefd;
  --neu:#e5f1ee; --neu-dark:#c3d6d1; --neu-light:#f2f9f7; --night:#06120f; --night2:#0d1f1b}
[data-color="sunset"]{
  --a:217,72,15; --ad:124,45,18; --form:#d9480f; --form-light:#fb923c; --form-deep:#a8360a; --on-dark:#fdba74; --od:253,186,116;
  --t1:#ffe1cc; --t2:#fff2bf; --t3:#ffd3dc; --base:#fff8f3; --base2:#fff0e5; --surface:#fffbf8;
  --neu:#f5ece5; --neu-dark:#dccdc1; --neu-light:#fbf6f2; --night:#140a05; --night2:#22130b;
  --bad:#dc2626; --bad-soft:rgba(220,38,38,.10)}
[data-color="grape"]{
  --a:124,58,237; --ad:76,29,149; --form:#7c3aed; --form-light:#a78bfa; --form-deep:#5b21b6; --on-dark:#c4b5fd; --od:196,181,253;
  --t1:#ede4ff; --t2:#ffe0f0; --t3:#dbe8ff; --base:#faf7ff; --base2:#f2ecff; --surface:#fdfbff;
  --neu:#eeeaf7; --neu-dark:#d2cbe3; --neu-light:#f7f5fc; --night:#100a1c; --night2:#1b132e}
[data-color="bubblegum"]{
  --a:219,39,119; --ad:131,24,67; --form:#db2777; --form-light:#f472b6; --form-deep:#be185d; --on-dark:#f9a8d4; --od:249,168,212;
  --t1:#ffd9ea; --t2:#e3e4ff; --t3:#fff0c4; --base:#fff7fb; --base2:#ffeef6; --surface:#fffafd;
  --neu:#f6eaf0; --neu-dark:#dccbd4; --neu-light:#fbf5f8; --night:#160a10; --night2:#24121b}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%;min-height:100vh}
/* the light behind the glass: fixed so it doesn't scroll (background-attachment:fixed misbehaves on iOS) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--backdrop)}
:root{--backdrop:
    radial-gradient(38vmax 38vmax at 6% 8%,rgba(var(--a),.24),transparent 62%),
    radial-gradient(30vmax 30vmax at 96% 18%,rgba(var(--a),.12),transparent 60%),
    radial-gradient(42vmax 42vmax at 78% 102%,rgba(var(--a),.16),transparent 62%),
    radial-gradient(26vmax 26vmax at 30% 70%,var(--t1),transparent 60%),
    linear-gradient(160deg,#ffffff 0%,var(--base) 55%,var(--base2) 100%)}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px;padding-block:28px 72px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.12;color:var(--ink)}
h1{font-size:clamp(30px,5vw,44px);font-weight:800;letter-spacing:-.025em}
h2{font-size:24px;font-weight:800;letter-spacing:-.01em}
h3{font-size:18px;font-weight:700}
a{color:var(--form)}
p{margin:0}
.muted{color:var(--graphite)}
.small{font-size:13.5px}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--form)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid rgba(var(--a),.45);outline-offset:2px}
[hidden]{display:none!important}

/* the glass surface, shared by every panel */
.login,.ready,.qcard,.sheet,.card,.chart,.stat,.scorehead,.tp,.rv,.timebars,.tablewrap,.empty,.refsheet,.examhead,.ok-msg{
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);box-shadow:var(--shadow);border-radius:var(--r)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  background:var(--btn-bg);color:var(--on-btn);padding:10px 20px;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:15px;text-decoration:none;line-height:1.2;
  box-shadow:var(--btn-shadow)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--glass-strong);color:var(--form);border-color:rgba(var(--a),.22);box-shadow:0 2px 8px rgba(var(--sh),.06)}
.btn.green{background:var(--btn-bg)}
.btn.small{padding:7px 14px;font-size:14px}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.btn.danger{color:var(--bad);border-color:rgba(200,70,44,.3)}
.btn.danger-fill{background:var(--bad);box-shadow:none}
.linkish{background:none;border:0;padding:0;color:var(--form);font-family:var(--display);font-weight:600;font-size:14.5px}
.row-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spacer{flex:1}

/* top bar: a frosted strip */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bar-bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glass-edge);box-shadow:0 4px 24px rgba(var(--sh),.07);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,calc((100% - 1088px)/2))}
.brand{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.015em}
.brand span{color:var(--form)}
.bar nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.bar nav a{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--graphite);text-decoration:none;padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.bar nav a:hover{color:var(--form)}
.bar nav a.on{color:var(--form);background:var(--form-soft)}
.bar .linkish{padding:6px 8px;color:var(--graphite)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--form);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;display:inline-grid;place-items:center}
#who{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--form);padding:0 6px}

/* login + register */
.login{max-width:440px;margin:7vh auto 0;padding:30px 26px;background:var(--glass-strong)}
.login h1{font-size:34px;margin:6px 0 6px}
.field{display:grid;gap:6px;margin-top:16px}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.field small{font-family:var(--display);font-size:12.5px}
.opt-l{text-transform:none;letter-spacing:0}
.field input,.field textarea{font:inherit;font-family:var(--display);font-size:16px;padding:11px 13px;border:1px solid rgba(var(--a),.18);border-radius:12px;
  background:var(--field-bg);color:var(--ink);width:100%;box-shadow:var(--field-shadow)}
.field textarea{resize:vertical;min-height:64px}
.field input:focus,.field textarea:focus{border-color:var(--form);outline:none;box-shadow:0 0 0 4px rgba(var(--a),.12)}
.err{color:var(--bad);font-size:15px;margin-top:12px;min-height:1.4em}
.login .btn{width:100%;margin-top:16px}
.switch{text-align:center;margin-top:16px;font-family:var(--display);font-size:14.5px}
.done-msg{display:grid;gap:12px}
.done-msg .btn{margin-top:8px}
.bubbles-deco{display:flex;gap:6px;margin-bottom:12px}
.bubbles-deco i{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--form);background:var(--chip)}
.bubbles-deco i.f{background:var(--form)}
.captcha{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.captcha img{display:block;width:220px;height:70px;border-radius:12px;border:1px solid rgba(var(--a),.18);background:var(--solid)}
#cap{font-family:var(--mono);font-size:22px;letter-spacing:.3em;max-width:220px}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;opacity:0}

/* home */
.hello{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
.stat{padding:14px 16px}
.stat .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.stat .v{font-family:var(--display);font-weight:800;font-size:28px;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--form)}
.stat .v small{font-size:14px;font-weight:600;color:var(--graphite)}
.chart{padding:16px 16px 8px;margin-bottom:28px}
.chart svg{display:block;width:100%;height:auto}
.chart text{font-family:var(--mono);font-size:11px;fill:var(--graphite)}
.chart .grid line{stroke:var(--rule)}
.chart .hr{stroke:var(--warn);stroke-dasharray:4 4}
.chart .line{fill:none;stroke:var(--form);stroke-width:2.5}
.chart .area{fill:var(--form-soft)}
.chart .dot{fill:var(--solid);stroke:var(--form);stroke-width:2}
.chart .dot.last{fill:var(--form)}
.chart .hrl{fill:var(--warn)}
.exams{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{padding:18px;display:flex;flex-direction:column;gap:10px}
.card.live{border-color:rgba(162,99,13,.45);box-shadow:var(--shadow),0 0 0 3px rgba(162,99,13,.10)}
.card.locked{background:rgba(255,255,255,.28);border-style:dashed;border-color:rgba(var(--a),.2);box-shadow:none}
.card.locked .no{color:rgba(var(--a),.35)}
.card .top{display:flex;justify-content:space-between;align-items:start;gap:8px}
.card .no{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;color:var(--form)}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:3px 10px;border-radius:999px;white-space:nowrap;border:1px solid var(--rule);color:var(--graphite);background:var(--chip)}
.pill.done{background:var(--good-soft);border-color:transparent;color:var(--good)}
.pill.live{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.pill.off{background:rgba(110,91,98,.1);border-color:transparent;color:var(--graphite)}
.pill.admin{background:var(--form-soft);border-color:transparent;color:var(--form);font-size:10.5px;padding:1px 8px;vertical-align:2px}
.card .meta{font-family:var(--mono);font-size:13px;color:var(--graphite);min-height:2.6em}
.card .meta b{color:var(--ink)}
.card .row-btns{margin-top:auto}

/* exam */
.examhead{position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:4;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding:12px 18px;margin-bottom:20px;background:var(--glass-strong)}
.examhead h2{font-size:20px}
.clock{font-family:var(--mono);font-weight:700;font-size:28px;font-variant-numeric:tabular-nums;line-height:1;color:var(--form)}
.clock.low{color:var(--bad)}
.examhead .info{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.examgrid{display:grid;grid-template-columns:minmax(0,1fr) 324px;gap:24px;align-items:start}
.ready{max-width:620px;margin:6vh auto 0;padding:30px 26px;display:grid;gap:14px;background:var(--glass-strong)}
.ready .rules{margin:0;padding-left:20px;display:grid;gap:8px}
.ready .err{margin:0;min-height:0}
.qcard{padding:24px 24px 20px;background:var(--glass-strong)}
.qnum{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.qnum .n{font-family:var(--display);font-weight:800;font-size:30px;color:var(--form);line-height:1}
.qtext{font-size:19px;line-height:1.6;margin-bottom:18px;max-width:62ch}
.choices{display:grid;gap:8px}
.ch{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border:1px solid rgba(var(--a),.14);background:var(--chip);border-radius:14px;padding:10px 14px 10px 10px;font-family:var(--body);font-size:17px}
.ch .b{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--form);display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--form);flex:none;background:var(--solid)}
.ch:hover{border-color:rgba(var(--a),.45)}
.ch.on{border-color:var(--form);background:var(--form-soft);box-shadow:var(--pressed)}
.ch.on .b{background:var(--form);border-color:var(--form);color:#fff}
/* option eliminator: a crossed-out choice stays clickable, as in Bluebook */
.chrow{display:flex;align-items:stretch;gap:6px}
.chrow .ch{flex:1;min-width:0}
.ch.out{opacity:.5}
.ch.out span:last-child{text-decoration:line-through;text-decoration-thickness:2px}
.xo{flex:none;width:52px;border:1px solid rgba(var(--a),.14);background:var(--chip);border-radius:14px;font-family:var(--mono);font-size:12.5px;color:var(--graphite)}
.xo:hover{border-color:var(--bad);color:var(--bad)}
.xo.on{border-style:dashed}
.clock.hid{visibility:hidden}
.refsheet{padding:16px 20px;margin:-6px 0 20px}
.refsheet h3{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--form);margin-bottom:8px}
.refsheet dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 20px;margin:0}
.refsheet dt{font-family:var(--mono);font-size:12px;color:var(--graphite)}
.refsheet dd{margin:0;font-size:16px}
.refsheet ul{margin:12px 0 0;padding-left:18px;font-size:15px;color:var(--graphite)}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.flag{background:var(--chip);border:1px dashed rgba(var(--a),.3);border-radius:999px;padding:5px 12px;font-family:var(--mono);font-size:12.5px;color:var(--graphite)}
.flag.on{border-style:solid;border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.hint{font-family:var(--mono);font-size:12px;color:var(--graphite);margin-top:12px}
.sheet{position:sticky;top:calc(env(safe-area-inset-top,0px) + 150px);padding:14px 14px 16px}
.sheet h3{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--form)}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin-top:8px}
.srow{display:flex;align-items:center;gap:3px}
.srow .n{width:24px;text-align:right;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--form);background:none;border:0;padding:0 3px 0 0;border-radius:6px}
.srow .n.cur{background:var(--form);color:#fff}
.srow .n.fl{color:var(--warn);text-decoration:underline}
.srow .s{width:19px;height:19px;border-radius:50%;border:1.2px solid rgba(var(--a),.55);background:var(--chip);color:var(--form);font-family:var(--mono);font-size:9px;padding:0;display:grid;place-items:center}
.srow .s.on{background:var(--form);border-color:var(--form);color:#fff}
.sfoot{margin-top:12px;border-top:1px dashed var(--rule);padding-top:12px;display:grid;gap:10px}
.confirm{background:var(--warn-soft);border-radius:14px;padding:12px;font-size:15px;display:grid;gap:10px}
.saving{font-family:var(--mono);font-size:11.5px;color:var(--graphite)}

/* review */
.scorehead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:center;padding:22px 24px;margin:14px 0 22px;background:var(--glass-strong)}
.bigscore{font-family:var(--display);font-weight:800;font-size:76px;line-height:.9;color:var(--form);letter-spacing:-.03em}
.bigscore small{font-size:24px;color:var(--graphite);font-weight:600;letter-spacing:0}
.verdict{font-size:18px;max-width:60ch}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:13px;color:var(--graphite);margin-top:8px}
.facts b{color:var(--ink)}
.band{position:relative;height:40px;margin:30px 4px 30px;grid-column:1/-1}
.band .track{position:absolute;left:0;right:0;top:17px;height:6px;background:var(--rule);border-radius:3px}
.band .fill{position:absolute;left:0;top:17px;height:6px;background:linear-gradient(90deg,var(--form-light),var(--form));border-radius:3px}
.band .mk{position:absolute;top:0;height:40px;border-left:1.5px dashed var(--graphite)}
.band .mk span{position:absolute;top:-20px;white-space:nowrap;font-family:var(--mono);font-size:11px;color:var(--graphite);transform:translateX(-50%)}
.band .mk.lo span{top:42px}
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:26px}
.tp{padding:12px 14px}
.tp .k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--graphite)}
.tp .v{font-family:var(--display);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.tp .meter{height:5px;background:var(--rule);border-radius:3px;margin-top:6px;overflow:hidden}
.tp .meter i{display:block;height:100%;background:var(--form)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 16px}
.tab{border:1px solid var(--glass-edge);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:999px;padding:7px 15px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);box-shadow:0 2px 10px rgba(var(--sh),.06)}
.tab.on{background:var(--btn-bg);border-color:transparent;color:var(--on-btn);box-shadow:var(--btn-shadow)}
.rv{border-left:5px solid var(--rule);padding:18px 20px;margin-bottom:12px}
.rv.wrong{border-left-color:var(--bad)}
.rv.blank{border-left-color:var(--warn)}
.rv.right{border-left-color:var(--good)}
.rv .hd{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:baseline;margin-bottom:8px}
.rv .hd .n{font-family:var(--display);font-weight:800;font-size:21px}
.rv .hd .tags{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--graphite)}
.res{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.res.wrong{color:var(--bad)}.res.blank{color:var(--warn)}.res.right{color:var(--good)}
.rv .q{max-width:65ch;margin-bottom:12px}
.opts{display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:12px}
.opt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);border-radius:999px;padding:3px 11px 3px 4px;font-size:15px;background:var(--chip)}
.opt .b{width:22px;height:22px;border-radius:50%;border:1.3px solid var(--graphite);display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--graphite)}
.opt.key{border-color:var(--good);background:var(--good-soft)}
.opt.key .b{background:var(--good);border-color:var(--good);color:#fff}
.opt.his{border-color:var(--bad);background:var(--bad-soft)}
.opt.his .b{background:var(--bad);border-color:var(--bad);color:#fff}
.how{background:var(--good-soft);border-radius:14px;padding:12px 14px;max-width:72ch}
.how h4,.trap h4{margin:0 0 4px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--good)}
.trap{background:var(--warn-soft);border-radius:14px;padding:10px 14px;margin-top:8px;max-width:72ch;font-size:15.5px}
.trap h4{color:var(--warn)}
.timebars{padding:14px 16px 10px;margin-bottom:26px;overflow-x:auto}
.timebars svg{display:block;min-width:560px;width:100%;height:auto}
.timebars text{font-family:var(--mono);font-size:10px;fill:var(--graphite)}
.timebars .r{fill:var(--good)}.timebars .w{fill:var(--bad)}.timebars .k{fill:var(--warn)}
.timebars .avg{stroke:var(--graphite);stroke-dasharray:3 3}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--graphite);margin-top:4px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.legend .r{background:var(--good)}.legend .w{background:var(--bad)}.legend .k{background:var(--warn)}

/* history + admin tables */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite);font-weight:500}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
.empty{padding:30px;text-align:center;color:var(--graphite);display:grid;gap:8px;justify-items:center}

/* admin */
.ok-msg{padding:12px 16px;margin-bottom:16px;color:var(--good);font-family:var(--display);font-weight:600;font-size:15px;border-left:4px solid var(--good)}
.reqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.req h3{margin-top:4px}
.reqnote{margin:0;padding:10px 14px;border-left:3px solid var(--form);background:var(--form-soft);border-radius:0 12px 12px 0;font-size:15px}
.k-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin-bottom:6px}
.testpick{display:flex;flex-wrap:wrap;gap:6px 14px}
.chk,.field label.chk{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-size:14.5px;color:var(--ink);text-transform:none;letter-spacing:0;cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--form);margin:0}
.req .err,tr.editor .err,.newuser .err{margin:0;min-height:0}
table.users td .small{margin-top:2px}
tr.editor td{background:var(--chip);padding:6px 16px 16px}
.edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 20px;margin-bottom:14px}
.edit-grid .field{margin-top:12px}
.edit-grid .field > .chk{margin-top:2px}
.inline{display:flex;gap:10px;align-items:center}
.inline input{flex:1;min-width:0}
tr.editor .confirm{margin-top:10px;background:var(--bad-soft)}
.meta-line{margin-top:10px}
.newuser{max-width:760px;padding:24px}

@media (max-width:860px){
  .examgrid{grid-template-columns:minmax(0,1fr)}
  .sheet{position:static}
  .sgrid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scorehead{grid-template-columns:1fr}
  .examhead{top:calc(env(safe-area-inset-top,0px) + 58px)}
  .bar{flex-wrap:wrap}
}
@media (max-width:480px){.qcard{padding:16px}.qtext{font-size:18px}.login{padding:24px 18px}.reqs{grid-template-columns:1fr}.brand{font-size:17px}}
@media (prefers-reduced-motion:no-preference){.ch,.srow .s,.tab,.btn{transition:background .15s,border-color .15s,filter .15s,box-shadow .15s}}

/* PSAT: passages, data tables, grid-ins, section scores */
.testtabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.testtabs .tab{text-decoration:none}
.passage{white-space:pre-line;font-size:17px;line-height:1.65;max-width:68ch;background:var(--chip);border-left:3px solid var(--form);border-radius:0 12px 12px 0;padding:12px 16px;margin-bottom:16px}
.rv .passage{font-size:15.5px}
.dtable{overflow-x:auto;margin:0 0 16px}
.dtable table{min-width:0;width:auto;font-size:15px;border:1px solid var(--rule);background:var(--solid)}
.dtable caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--graphite);padding:0 0 6px}
.dtable th,.dtable td{padding:6px 12px;border:1px solid var(--rule)}
.gridin{display:grid;gap:8px;max-width:420px}
.gridin label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.gridin input{font-family:var(--mono);font-size:26px;font-weight:700;padding:10px 14px;border:1.5px solid var(--form);border-radius:14px;background:var(--solid);color:var(--ink);width:100%;max-width:220px}
.gridin p{font-size:12.5px}
.srow .sv{min-width:60px;height:19px;border-radius:10px;border:1.2px dashed rgba(var(--a),.55);background:transparent;color:var(--graphite);font-family:var(--mono);font-size:10px;padding:0 6px}
.srow .sv.on{border-style:solid;background:var(--form);border-color:var(--form);color:#fff}
.sections{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:6px}
.sec{border:1px solid var(--rule);border-radius:14px;padding:12px 14px;background:var(--chip)}
.sec .k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--graphite)}
.sec .v{font-family:var(--display);font-weight:800;font-size:34px;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--form)}
.sec .v small{font-size:15px;color:var(--graphite);font-weight:600}
.band.small{margin:24px 2px 6px;height:30px}
.band.small .track,.band.small .fill{top:12px}
.band.small .mk{height:30px}
.note{grid-column:1/-1;font-size:13.5px}

/* ---------- style picker ---------- */
.stylepick{position:relative}
.stylemenu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:240px;padding:8px;display:grid;gap:4px;border-radius:16px;
  background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);box-shadow:var(--shadow)}
.stylemenu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:8px 10px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink)}
.stylemenu button:hover{background:var(--form-soft)}
.stylemenu button.on{color:var(--form);background:var(--form-soft)}
.stylemenu small{display:block;font-weight:500;font-size:12px;color:var(--graphite)}
.sw{width:30px;height:22px;border-radius:7px;flex:none;border:1px solid rgba(0,0,0,.08)}
.sw.glass{background:linear-gradient(135deg,rgba(var(--a),.35),#fff 70%)}
.sw.neu{background:var(--neu);box-shadow:3px 3px 6px var(--neu-dark),-3px -3px 6px #fff;border:0}
.sw.clay{background:#fff;border-radius:10px;box-shadow:2px 3px 6px rgba(var(--sh),.15),inset -3px -3px 5px rgba(var(--sh),.08),inset 3px 3px 5px #fff}
.sw.minimal{background:#fff;border:1.5px solid var(--form)}
.sw.midnight{background:radial-gradient(circle at 30% 30%,var(--form),var(--night) 75%)}

/* ---------- Neumorphism: one soft blush surface; panels raised out of it, inputs and chosen answers pressed in ---------- */
html[data-theme="neu"]{
  --paper:var(--neu); --backdrop:var(--neu); --rule:rgba(var(--a),.10);
  --glass:var(--neu); --glass-strong:var(--neu); --glass-edge:transparent; --blur:none; --solid:var(--neu-light); --chip:var(--neu);
  --shadow:9px 9px 18px var(--neu-dark),-9px -9px 18px #ffffff;
  --field-bg:var(--neu); --field-shadow:inset 4px 4px 8px var(--neu-dark),inset -4px -4px 8px #ffffff;
  --bar-bg:var(--neu); --btn-bg:linear-gradient(145deg,var(--form),var(--form-deep));
  --btn-shadow:6px 6px 12px var(--neu-dark),-6px -6px 12px #ffffff;
  --pressed:inset 4px 4px 9px var(--neu-dark),inset -4px -4px 9px #ffffff; --r:22px}
html[data-theme="neu"] .bar{border-bottom:0;box-shadow:0 6px 14px var(--neu-dark)}
html[data-theme="neu"] .btn.ghost,html[data-theme="neu"] .tab,html[data-theme="neu"] .flag,html[data-theme="neu"] .xo{border:0;background:var(--neu);box-shadow:5px 5px 10px var(--neu-dark),-5px -5px 10px #fff}
html[data-theme="neu"] .tab.on{background:var(--neu);color:var(--form);box-shadow:var(--pressed)}
html[data-theme="neu"] .ch{border:0;box-shadow:5px 5px 10px var(--neu-dark),-5px -5px 10px #fff}
html[data-theme="neu"] .ch.on{background:var(--neu)}
html[data-theme="neu"] .field input,html[data-theme="neu"] .field textarea{border:0}
html[data-theme="neu"] .pill{border:0;background:var(--neu);box-shadow:inset 2px 2px 4px var(--neu-dark),inset -2px -2px 4px #fff}
html[data-theme="neu"] .card.locked{box-shadow:inset 5px 5px 10px var(--neu-dark),inset -5px -5px 10px #fff;border:0;background:var(--neu)}
html[data-theme="neu"] .srow .s,html[data-theme="neu"] .opt{background:var(--neu)}
html[data-theme="neu"] .bar nav a.on{box-shadow:var(--pressed);background:var(--neu)}

/* ---------- Claymorphism: puffy rounded cards with an inner highlight, as if moulded ---------- */
html[data-theme="clay"]{
  --paper:#ffffff; --backdrop:#ffffff; --rule:rgba(var(--sh),.09);
  --glass:#ffffff; --glass-strong:#ffffff; --glass-edge:transparent; --blur:none; --chip:#ffffff; --field-bg:#ffffff;
  --shadow:10px 14px 30px rgba(var(--sh),.10),inset -6px -6px 14px rgba(var(--sh),.05),inset 6px 6px 14px #fff;
  --field-shadow:inset 3px 3px 7px rgba(var(--sh),.08),inset -3px -3px 7px #fff;
  --bar-bg:rgba(255,255,255,.92); --btn-bg:linear-gradient(145deg,var(--form),var(--form-deep));
  --btn-shadow:4px 6px 14px rgba(var(--sh),.18),inset -3px -4px 7px rgba(0,0,0,.18),inset 3px 3px 7px rgba(255,255,255,.28);
  --pressed:inset 3px 3px 8px rgba(var(--sh),.10),inset -3px -3px 8px #fff; --r:30px}
html[data-theme="clay"] .ch,html[data-theme="clay"] .xo{border:0;border-radius:20px;box-shadow:5px 7px 14px rgba(var(--sh),.08),inset -4px -4px 8px rgba(var(--sh),.04),inset 4px 4px 8px #fff}
html[data-theme="clay"] .btn.ghost,html[data-theme="clay"] .tab{border:0;background:#fff;box-shadow:4px 5px 12px rgba(var(--sh),.09),inset -3px -3px 6px rgba(var(--sh),.04),inset 3px 3px 6px #fff}
html[data-theme="clay"] .tab.on{background:var(--btn-bg)}
html[data-theme="clay"] .field input,html[data-theme="clay"] .field textarea{border:0;border-radius:16px}
html[data-theme="clay"] .bar{border-bottom:0;box-shadow:0 4px 18px rgba(var(--sh),.07)}
html[data-theme="clay"] .card.locked{box-shadow:none;background:#fff;border:1.5px dashed rgba(var(--sh),.14)}

/* ---------- Minimal: flat white, hairlines, no shadows or blur ---------- */
html[data-theme="minimal"]{
  --paper:#ffffff; --backdrop:#ffffff; --rule:rgba(var(--a),.10);
  --glass:#ffffff; --glass-strong:#ffffff; --glass-edge:rgba(var(--a),.16); --blur:none; --shadow:none; --chip:#ffffff;
  --field-bg:#ffffff; --field-shadow:none; --bar-bg:#ffffff; --btn-bg:var(--form); --btn-shadow:none; --pressed:none; --r:10px}
html[data-theme="minimal"] .btn,html[data-theme="minimal"] .tab,html[data-theme="minimal"] .ch,html[data-theme="minimal"] .xo{border-radius:8px}
html[data-theme="minimal"] .bar{box-shadow:none;border-bottom:1px solid var(--glass-edge)}
html[data-theme="minimal"] .tab{box-shadow:none;border-color:var(--glass-edge)}
html[data-theme="minimal"] .field input,html[data-theme="minimal"] .field textarea{border-radius:8px}
html[data-theme="minimal"] .card.live{box-shadow:none}

/* ---------- Midnight: dark glass over deep maroon light ---------- */
html[data-theme="midnight"]{
  --paper:var(--night); --sheet:var(--night2); --ink:#f2f0f7; --graphite:#b4aec0; --rule:rgba(255,255,255,.10);
  --form:var(--on-dark); --form-soft:rgba(var(--od),.13); --pencil:var(--on-dark);
  --backdrop:radial-gradient(38vmax 38vmax at 8% 10%,rgba(var(--a),.45),transparent 62%),radial-gradient(30vmax 30vmax at 95% 20%,rgba(var(--ad),.55),transparent 60%),
    radial-gradient(42vmax 42vmax at 75% 102%,rgba(var(--a),.30),transparent 62%),linear-gradient(160deg,var(--night),var(--night2));
  --glass:rgba(255,255,255,.06); --glass-strong:rgba(255,255,255,.09); --glass-edge:rgba(255,255,255,.12);
  --solid:var(--night2); --chip:rgba(255,255,255,.06); --field-bg:rgba(255,255,255,.07); --field-shadow:none;
  --bar-bg:color-mix(in srgb,var(--night) 60%,transparent); --btn-bg:linear-gradient(180deg,var(--form-light),var(--form-deep)); --on-btn:#fff;
  --btn-shadow:0 6px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15); --shadow:0 10px 40px rgba(0,0,0,.45);
  --good:#62d39c; --good-soft:rgba(98,211,156,.13); --bad:#ff8c70; --bad-soft:rgba(255,140,112,.13); --warn:#f0bb62; --warn-soft:rgba(240,187,98,.13);
  color-scheme:dark}
html[data-theme="midnight"] .ch.on .b,html[data-theme="midnight"] .srow .s.on,html[data-theme="midnight"] .srow .n.cur,html[data-theme="midnight"] .srow .sv.on,html[data-theme="midnight"] .badge{color:var(--night)}
html[data-theme="midnight"] .field input,html[data-theme="midnight"] .field textarea,html[data-theme="midnight"] .ch,html[data-theme="midnight"] .xo{border-color:rgba(255,255,255,.12)}
html[data-theme="midnight"] .btn.ghost{color:var(--form);border-color:rgba(var(--od),.35)}
html[data-theme="midnight"] .card.locked{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.12)}
html[data-theme="midnight"] .captcha img{border-color:transparent}
html[data-theme="midnight"] .card.locked .no{color:rgba(var(--od),.35)}

/* ---------- colour picker (inside the style menu) ---------- */
.stylemenu .k-label{padding:8px 10px 2px;margin:0}
.colors{display:flex;gap:8px;padding:4px 10px 6px}
.stylemenu .colors button{width:30px;height:30px;padding:0;border-radius:50%;background:linear-gradient(145deg,var(--form-light),var(--form-deep));border:3px solid transparent;
  box-shadow:0 2px 6px rgba(0,0,0,.15)}
.stylemenu .colors button.on{border-color:var(--glass-strong);outline:2px solid var(--form)}

/* ---------- motivation: goal, streak, badges, progress map, celebration ---------- */
.motiv{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-bottom:22px}
.mcard{padding:16px 18px;display:grid;gap:8px;align-content:start;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);box-shadow:var(--shadow);border-radius:var(--r)}
.mcard .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.mcard .big{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.2;color:var(--ink)}
.mcard .big em{font-style:normal;color:var(--form)}
.mcard p{font-size:14.5px;color:var(--graphite)}
.mcard a{font-family:var(--display);font-weight:700;font-size:14px;text-decoration:none}
.progress{height:12px;border-radius:999px;background:rgba(var(--a),.12);overflow:hidden;box-shadow:inset 1px 1px 3px rgba(var(--sh),.12)}
.progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--form-light),var(--form))}
.streak{display:flex;align-items:center;gap:12px}
.streak .flame{font-size:34px;line-height:1}
.streak .flame.cold{filter:grayscale(1);opacity:.45}
.badge-row{display:flex;gap:6px;flex-wrap:wrap}
.badge-row span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:var(--chip);box-shadow:0 2px 6px rgba(var(--sh),.12)}
.badge-row span.off{filter:grayscale(1);opacity:.35}

.journey{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:10px 4px 16px;margin-bottom:22px;scrollbar-width:thin}
.node{position:relative;flex:1 0 74px;display:grid;justify-items:center;gap:4px;background:none;border:0;padding:0;font-family:var(--display);color:var(--graphite)}
.node::before{content:"";position:absolute;top:22px;left:-50%;width:100%;height:5px;border-radius:3px;background:rgba(var(--a),.14);z-index:0}
.node:first-child::before{display:none}
.node.done::before,.node.here::before{background:linear-gradient(90deg,var(--form-light),var(--form))}
.node .dot{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;
  background:var(--chip);color:var(--graphite);box-shadow:0 3px 8px rgba(var(--sh),.14),inset -3px -3px 6px rgba(var(--sh),.05),inset 3px 3px 6px rgba(255,255,255,.8)}
.node.done .dot{background:linear-gradient(145deg,var(--form-light),var(--form-deep));color:#fff}
.node.here .dot{background:var(--solid);color:var(--form);box-shadow:0 0 0 3px var(--form),0 6px 14px rgba(var(--sh),.14)}
.node.locked .dot{opacity:.55}
.node .lbl{font-size:12.5px;font-weight:700}
.node .sc{font-family:var(--mono);font-size:11.5px;color:var(--form);min-height:1.3em}
.node.here .lbl{color:var(--form)}
.node:disabled{cursor:default}
@media (prefers-reduced-motion:no-preference){.node.here .dot{animation:pulse 2s ease-in-out infinite}}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(var(--sh),.08),0 6px 14px rgba(var(--sh),.14)}}

.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:26px}
.bdg{padding:16px;display:grid;justify-items:center;text-align:center;gap:6px;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);box-shadow:var(--shadow);border-radius:var(--r)}
.bdg .ic{font-size:40px;line-height:1.1}
.bdg b{font-family:var(--display);font-size:15.5px}
.bdg small{font-size:13px;color:var(--graphite);line-height:1.35}
.bdg.off{box-shadow:none;background:rgba(255,255,255,.25)}
.bdg.off .ic{filter:grayscale(1);opacity:.35}
.bdg.off b{color:var(--graphite)}
.bdg .when{font-family:var(--mono);font-size:11px;color:var(--form)}
h2.group{margin:6px 0 12px;font-size:19px}

.celebrate{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:20px 24px;margin:6px 0 18px;
  background:linear-gradient(135deg,var(--t1),var(--t2));border-radius:var(--r);box-shadow:var(--shadow)}
.celebrate .big{font-size:52px;line-height:1}
.celebrate h2{font-size:26px}
.celebrate p{font-size:16px;margin-top:4px}
.celebrate .badge-row{margin-top:10px}
.celebrate .badge-row span{width:auto;height:auto;padding:5px 12px 5px 8px;border-radius:999px;gap:6px;display:inline-flex;font-family:var(--display);font-weight:700;font-size:14px;background:var(--solid)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px}
html[data-theme="midnight"] .celebrate{background:linear-gradient(135deg,rgba(var(--a),.35),rgba(var(--ad),.45))}

@media (max-width:860px){.motiv{grid-template-columns:1fr}}

/* ---------- focus mode: while an exam clock runs, every style calms down to flat panels ---------- */
body.focus::before{background:var(--paper)}
body.focus .qcard,body.focus .sheet,body.focus .examhead,body.focus .refsheet{box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid var(--rule);border-radius:16px;-webkit-backdrop-filter:none;backdrop-filter:none}
body.focus .ch,body.focus .xo{box-shadow:none;border:1px solid var(--rule);border-radius:12px}
body.focus .ch.on{border-color:var(--form);box-shadow:none}