[hidden]{display:none!important}
img{max-width:100%}
/* Layout: one column study guide with four tabs. Asphalt neutrals, road-marking yellow as the only accent. Sign colours stay literal so they match the real thing. */
:root{
  --bg:#F2F5F9; --surface:#FFFFFF; --ink:#142033; --muted:#566478; --line:#D5DCE6; --tab:#E6ECF4;
  --accent:#F2B705; --accent-soft:rgba(242,183,5,.30); --on-accent:#1A1500;
  --good:#17794A; --bad:#C0302B; --focus:#2F5BEA;
  --shadow:0 1px 2px rgba(20,32,51,.08),0 6px 18px rgba(20,32,51,.06);
  --font-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E141C; --surface:#172130; --ink:#E7EDF5; --muted:#9AA9BC; --line:#2B3A4D; --tab:#1F2B3B;
    --accent-soft:rgba(242,183,5,.28); --good:#4CC38A; --bad:#FF8A82; --focus:#7FA2FF;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E141C; --surface:#172130; --ink:#E7EDF5; --muted:#9AA9BC; --line:#2B3A4D; --tab:#1F2B3B;
  --accent-soft:rgba(242,183,5,.28); --good:#4CC38A; --bad:#FF8A82; --focus:#7FA2FF;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font-body)}
.wrap{max-width:960px;margin:0 auto;padding:20px max(16px,env(safe-area-inset-right,0px)) 64px max(16px,env(safe-area-inset-left,0px))}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

h1{margin:4px 0 14px;font:700 clamp(32px,6vw,44px)/1.05 var(--font-display);text-wrap:balance}
h1:focus{outline:none}
h2{margin:28px 0 8px;font:700 26px/1.1 var(--font-display);text-wrap:balance}
h3{margin:0 0 6px;font:700 24px/1.15 var(--font-display)}
.hint{margin:0 0 16px;color:var(--muted)}

/* shape explorer */
.shapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.shape-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:600 15px var(--font-body);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.shape-btn svg{width:46px;height:46px}
.shape-btn:hover{border-color:var(--muted)}
.shape-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.explain{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:24px;align-items:center;margin-top:14px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.stage svg{display:block;width:100%;height:auto}
.stage .o{stroke-dasharray:1}
.stage.play svg{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.stage.play .o{animation:draw .8s ease-out,fillin .4s .55s both}
.stage.play .deco{animation:fadein .4s .75s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fillin{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{scale:.82}60%{scale:1.06}100%{scale:1}}
.ex-type{margin:0 0 2px;font:600 12px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ex-rule{margin:0 0 12px;max-width:52ch}
.ex-signs{display:flex;flex-wrap:wrap;gap:4px}
.ex{display:flex;flex-direction:column;align-items:center;gap:4px;width:96px;padding:6px;border:0;border-radius:10px;background:none;color:var(--ink);font:500 12px/1.2 var(--font-body);text-align:center;cursor:pointer}
.ex svg{width:62px;height:62px}
.ex:hover{background:var(--tab)}
.colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.col{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sw{height:46px}
.col div+div{padding:12px 14px 14px}
.col strong{display:block;font:700 20px/1.1 var(--font-display);margin-bottom:4px}
.col p{margin:0;font-size:14px;color:var(--muted)}
.col p b{color:var(--ink);font-weight:600}

/* gallery */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chipbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px var(--font-body);cursor:pointer}
.chipbtn svg{width:18px;height:18px}
.chipbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.card{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;perspective:900px;animation:rise .35s both;animation-delay:calc(var(--i)*22ms)}
@keyframes rise{from{translate:0 8px}to{translate:0 0}}
.in{position:relative;display:block;height:232px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.card.flip .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.back{transform:rotateY(180deg);align-items:flex-start;justify-content:flex-start;gap:8px}
.front .sg{width:112px;height:112px}
.hintline{font-size:12px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chip svg{width:16px;height:16px}
.back strong{font:700 20px/1.1 var(--font-display)}
.tip{font-size:13.5px;line-height:1.4;color:var(--muted)}
.card[data-cat="warning"]:hover .front .sg{animation:wobble .6s ease}
.card[data-cat="prohibition"]:hover .front .sg{animation:pulse .6s ease}
.card[data-cat="mandatory"]:hover .front .sg{animation:nudge .6s ease}
.card[data-cat="priority"]:hover .front .sg{animation:shake .5s ease}
.card[data-cat="info"]:hover .front .sg{animation:pop .5s ease}
.card[data-cat="marking"]:hover .front .sg{animation:pulse .6s ease}
@keyframes wobble{0%,100%{rotate:0deg}25%{rotate:-6deg}75%{rotate:6deg}}
@keyframes pulse{0%,100%{scale:1}50%{scale:1.1}}
@keyframes nudge{0%,100%{translate:0}50%{translate:7px}}
@keyframes shake{0%,100%{translate:0}20%{translate:-5px}40%{translate:5px}60%{translate:-3px}80%{translate:3px}}

/* overtaking lines */
.lines-layout{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;align-items:start}
.road-box svg{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.lopts{display:grid;gap:8px;margin-bottom:14px}
.lopt{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:600 15px var(--font-body);text-align:left;cursor:pointer}
.lopt svg{flex:0 0 auto;width:28px;height:36px}
.lopt[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.primary{padding:12px 22px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);font:700 16px var(--font-body);cursor:pointer}
.primary:disabled{opacity:.45;cursor:not-allowed}
.msg{min-height:3.4em;margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--tab);border-left:4px solid var(--line)}
.msg.ok{border-left-color:var(--good)}
.msg.no{border-left-color:var(--bad)}
.rule{margin:14px 0 0;font-size:14px;color:var(--muted)}

/* quiz */
.qhead{display:flex;justify-content:space-between;font:600 14px var(--font-body);color:var(--muted)}
.bar{height:6px;margin:8px 0 14px;border-radius:99px;background:var(--tab);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.qcard{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.qsign{display:flex;justify-content:center;margin-bottom:6px}
.qsign svg{width:140px;height:140px}
.qprompt{margin:8px 0 16px;font:700 26px/1.15 var(--font-display);text-wrap:balance}
.qopts{display:grid;gap:10px}
.qopts.art{grid-template-columns:repeat(3,minmax(0,1fr))}
.qopt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:500 17px/1.3 var(--font-body);text-align:left;cursor:pointer}
.qopts.art .qopt{flex-direction:column;justify-content:center;padding:12px 8px}
.qopts.art .qopt svg{width:100%;max-width:96px;height:auto}
.key{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--tab);font:700 13px var(--font-body)}
.qopt:hover{border-color:var(--muted)}
.qopt.right{border-color:var(--good)}
.qopt.wrong{border-color:var(--bad)}
.mark{margin-left:auto;font-weight:700}
.qopt.right .mark{color:var(--good)}
.qopt.wrong .mark{color:var(--bad)}
.fb{min-height:3em;margin-top:14px}
.fb .okt{color:var(--good);font-weight:700}
.fb .not{color:var(--bad);font-weight:700}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}
.keys{font-size:13px;color:var(--muted)}
.score-big{margin:0;font:700 72px/1 var(--font-display)}
.miss{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 18px}
.miss .ex{cursor:default}
.miss .ex:hover{background:none}
.foot{margin-top:36px;font-size:13px;color:var(--muted)}

.scbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px var(--font-body);cursor:pointer}
.scbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lt{fill:#5A2D2D}
.lt.on{animation:blink .7s steps(1) infinite}
@keyframes blink{0%{fill:#FF3B30}50%{fill:#5A2D2D}}
.fp-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:20px;align-items:start}
.fp-list{display:grid;gap:8px}
.fp-gh{margin:14px 0 2px;font:600 12px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fp-gh:first-child{margin-top:0}
.fp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.fp-row:hover{border-color:var(--muted)}
.fp-row.has{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fp-name{grid-column:1;font-weight:600}
.fp-add{grid-column:2;grid-row:1;font:700 13px var(--font-body);color:var(--muted);white-space:nowrap}
.fp-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--muted)}
.fp-meta b{color:var(--ink);font-variant-numeric:tabular-nums}
.pill{padding:2px 9px;border-radius:99px;background:var(--tab);color:var(--ink);font:600 12px var(--font-body)}
.pill.hi{background:transparent;border:1.5px solid var(--bad);color:var(--bad)}
.fp-note{grid-column:1/-1;font-size:13px;color:var(--muted)}
.fp-rec{position:sticky;top:12px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.fp-big{display:flex;align-items:baseline;gap:8px;font:700 60px/1 var(--font-display);font-variant-numeric:tabular-nums}
.fp-big small{font:600 14px var(--font-body);color:var(--muted)}
.fp-meter{height:12px;margin:12px 0 6px;border-radius:99px;background:var(--tab);overflow:hidden}
.fp-meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s,background .3s}
.fp-rec.over .fp-meter i{background:var(--bad)}
.fp-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.fp-status{margin:10px 0 4px;font-weight:700}
.fp-rec.over .fp-status{color:var(--bad)}
.fp-total{margin:0 0 12px;color:var(--muted)}
.fp-total b{color:var(--ink);font-variant-numeric:tabular-nums}
.fp-added{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.fp-x{padding:4px 10px;border:1.5px solid var(--line);border-radius:99px;background:var(--bg);color:var(--ink);font:500 13px var(--font-body);cursor:pointer}
.fp-x:hover{border-color:var(--bad)}
.fp-empty{font-size:13px;color:var(--muted)}
.fp-small{margin:12px 0 0;font-size:12px;color:var(--muted)}
.fp-sources{margin-top:22px;max-width:70ch;font-size:13px;color:var(--muted)}
.fp-sources a{color:var(--focus)}
@media (max-width:760px){.fp-layout{grid-template-columns:1fr}.fp-rec{position:static;order:-1}}
@media (max-width:640px){
  .explain,.lines-layout{grid-template-columns:1fr}
  .stage{max-width:170px;margin:0 auto}
  .qopts.art{gap:8px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- app shell ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.topbar{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar::after{content:"";display:block;height:3px;background:repeating-linear-gradient(90deg,var(--accent) 0 22px,transparent 22px 36px)}
.topbar-in{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px}
.brand{font:700 24px var(--font-display);color:var(--ink);text-decoration:none;letter-spacing:.01em}
.brand span{color:var(--muted)}
.mainnav{display:flex;gap:4px}
.mainnav a{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;color:var(--muted);font:600 16px var(--font-body);text-decoration:none}
.mainnav a:hover{background:var(--tab);color:var(--ink)}
.mainnav a[aria-current]{background:var(--tab);color:var(--ink)}
.mainnav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px;font:600 14px var(--font-body);color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs .sep{opacity:.6}
.save-warn{margin:0;padding:10px 16px;background:var(--bad);color:#fff;font-weight:600;text-align:center}
.save-warn code{background:rgba(0,0,0,.2);padding:1px 6px;border-radius:5px}
@media (max-width:640px){
  .mainnav{position:fixed;left:0;right:0;bottom:0;z-index:10;justify-content:space-around;gap:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
  .mainnav a{flex-direction:column;gap:2px;padding:6px 12px;font-size:12px}
  .mainnav a[aria-current]{background:none;color:var(--ink)}
  .mainnav a[aria-current] svg{stroke:var(--ink)}
  .wrap{padding-bottom:96px}
  .topbar-in{justify-content:center}
}

/* ---------- shared controls ---------- */
a.primary{display:inline-block;text-decoration:none}
.primary.big{padding:14px 28px;font-size:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 15px var(--font-body);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.ghost{background:transparent}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
details.more{margin:18px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
details.more>summary{padding:12px 16px;font-weight:600;cursor:pointer;list-style-position:inside}
details.more[open]>summary{border-bottom:1px solid var(--line)}
details.more>:not(summary){margin-left:16px;margin-right:16px}
details.more>:last-child{margin-bottom:16px}
details.more>:nth-child(2){margin-top:14px}
details.more.danger>summary{color:var(--muted);font-weight:500}
.split{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.split svg{width:100%;height:auto;border-radius:10px}

/* ---------- home ---------- */
.next{padding:28px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-left:6px solid var(--accent)}
.next-k{margin:0;font:600 13px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.next h2{margin:6px 0 6px;font-size:clamp(30px,5vw,40px)}
.next p{margin:0 0 18px;color:var(--muted)}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.stat{display:flex;flex-direction:column;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.stat:hover{border-color:var(--muted)}
.stat-l{font-size:13px;color:var(--muted)}
.stat-v{font:700 32px/1.1 var(--font-display)}
.stat-s{font-size:13px;color:var(--muted)}

/* ---------- hubs ---------- */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.hub-card{display:block;padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
a.hub-card:hover{border-color:var(--accent)}
.hub-card h2{margin:0 0 6px;font-size:24px}
.hub-card p{margin:0;color:var(--muted)}
.hub-card.off{opacity:.6;box-shadow:none}
.hub-card.topic{display:flex;gap:16px;align-items:center}
.hub-card.topic svg{flex:0 0 56px;width:56px;height:56px}

/* ---------- learn topics ---------- */
.topic-head{margin-bottom:8px}
.key-rule{margin:0 0 8px;max-width:60ch;padding:12px 16px;border-radius:12px;background:var(--accent-soft);font-weight:600}
.check{margin-top:36px;padding-top:4px;border-top:2px dashed var(--line)}

/* ---------- sections and progress ---------- */
.sec-list{display:grid;gap:10px}
.sec-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(120px,2fr) auto;align-items:center;gap:16px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.sec-name strong{display:block;font:700 20px var(--font-display)}
.sec-name span{font-size:14px;color:var(--muted)}
.sec-bar{display:flex;height:10px;border-radius:99px;background:var(--tab);overflow:hidden}
.sec-bar .ok{background:var(--good)}
.sec-bar .bad{background:var(--bad)}
.sec-act{display:flex;gap:6px}
@media (max-width:640px){.sec-row{grid-template-columns:1fr auto}.sec-bar{grid-column:1/-1;grid-row:2}}
.miss-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.miss-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.miss-list img{flex:0 0 auto;width:64px;height:64px;object-fit:contain;background:#fff;border-radius:6px}
.miss-list b{display:block}
.miss-list span{color:var(--good);font-size:15px}
@media (max-width:640px){.stat-row{gap:8px}.stat{padding:10px}.stat-v{font-size:26px}}

/* ---------- question images: fill their space, grow on hover ----------
   The hover target is the unscaled .zoom box and the image ignores the pointer, so the
   enlarged picture never blocks the answers: leave its original spot and it shrinks back. */
.zoom{display:inline-block;position:relative;max-width:100%;vertical-align:top}
.qopts.art .zoom{display:block;width:100%}
.zoom img{pointer-events:none}
.q-img{display:block;width:auto;max-width:100%;max-height:300px;background:#fff;border-radius:8px;transition:transform .2s ease,box-shadow .2s ease;transform-origin:top center;position:relative}
.opt-img{display:block;width:100%;max-height:220px;object-fit:contain;background:#fff;border-radius:8px;transition:transform .2s ease,box-shadow .2s ease;position:relative}
.qopts.art .qopt{position:relative}
.qopts.art .qopt:nth-child(1) .opt-img{transform-origin:left center}
.qopts.art .qopt:nth-child(2) .opt-img{transform-origin:center center}
.qopts.art .qopt:nth-child(3) .opt-img{transform-origin:right center}
@media (hover:hover){
  .zoom:hover .q-img{transform:scale(1.8);box-shadow:0 12px 40px rgba(0,0,0,.35)}
  .zoom:hover .opt-img{transform:scale(1.9);box-shadow:0 12px 40px rgba(0,0,0,.35)}
}
.zoom:hover,.qopt:has(.zoom:hover),.qsign:has(.zoom:hover){z-index:5;position:relative}

/* ---------- focus mode for questions ---------- */
body.focus .topbar,body.focus .crumbs,body.focus .foot,body.focus #bankTitle{display:none}
body.focus .wrap{max-width:780px;padding-top:12px}
body.focus .mainnav{display:none}
.fq-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.fq-exit{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:20px}
.fq-exit:hover{background:var(--tab);color:var(--ink)}
.fq-title{flex:1;font:600 15px var(--font-body);color:var(--muted)}
.fq-count{padding:7px 12px;border:0;border-radius:10px;background:var(--tab);color:var(--ink);font:600 15px var(--font-body);font-variant-numeric:tabular-nums;cursor:pointer}
.fq-bar{height:4px;border-radius:99px;background:var(--tab);overflow:hidden;margin-bottom:22px}
.fq-bar i{display:block;height:100%;background:var(--accent)}
.fq-pal{display:flex;flex-wrap:wrap;gap:5px;margin:-8px 0 20px;padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.pal-b{width:36px;height:32px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 13px var(--font-body);cursor:pointer}
.pal-b.ok{background:var(--good);border-color:var(--good);color:#fff}
.pal-b.bad{background:var(--bad);border-color:var(--bad);color:#fff}
.pal-b.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pal-b.cur{outline:2px solid var(--ink);outline-offset:1px}
.fq .qsign{margin-bottom:18px}
.fq-q{margin:0 0 22px;font:600 clamp(21px,3.2vw,26px)/1.35 var(--font-body);letter-spacing:-.005em;text-wrap:pretty;max-width:46ch}
.fq .qopts{gap:12px}
.fq .qopt{padding:16px 18px;border-radius:14px;background:var(--surface);font:500 18px/1.45 var(--font-body);gap:14px;transition:border-color .15s,background .15s}
.fq .qopt:hover:not(:disabled){border-color:var(--ink)}
.fq .qopt:disabled{cursor:default;opacity:1}
.fq .qopt.right{background:color-mix(in srgb,var(--good) 12%,var(--surface))}
.fq .qopt.wrong{background:color-mix(in srgb,var(--bad) 10%,var(--surface))}
.fq .qopt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.fq .opt-t{flex:1}
.fq .key{width:30px;height:30px;font-size:14px}
.fq .fb{min-height:2.2em;margin-top:16px;font-size:17px}
.fq-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.fq-nav-r{display:flex;gap:8px}
.fq-prev{border:0;background:none;padding:10px 4px;color:var(--muted);font:600 16px var(--font-body);cursor:pointer}
.fq-prev:hover:not(:disabled){color:var(--ink)}
.fq-prev:disabled{opacity:.35;cursor:default}
.fq-keys{margin:28px 0 0;font-size:13px;color:var(--muted);text-align:center}
@media (hover:none){.fq-keys{display:none}}
@media (max-width:640px){body.focus .wrap{padding-bottom:32px}.fq .qopt{font-size:17px;padding:14px}}

/* Mock test: timer, flag, submit check, start screen, review and history. */
.fq-time{padding:7px 10px;border-radius:10px;font:700 16px var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink)}
.fq-time.low{background:var(--accent);color:var(--on-accent)}
.fq-nav-l{display:flex;align-items:center;gap:6px}
.fq-flag{border:0;background:none;padding:10px 8px;color:var(--muted);font:600 16px var(--font-body);cursor:pointer;border-radius:8px}
.fq-flag:hover{color:var(--ink)}
.fq-flag[aria-pressed="true"]{color:var(--ink);background:var(--accent-soft)}
.pal-b.flag{box-shadow:inset 0 -4px 0 var(--bad)}
.mk-sum{font-size:18px;margin:0 0 28px}
.mk-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.mk-opt{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;font:500 15px var(--font-body);cursor:pointer}
.mk-opt b{font-size:19px}
.mk-opt span{color:var(--muted)}
.mk-opt[aria-checked="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.mk-rules{margin:0 0 24px;padding-left:1.2em;line-height:1.6;color:var(--muted);max-width:60ch}
.mk-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--bad);margin-bottom:16px}
.mk-score.pass{border-left-color:var(--good)}
.mk-score .hint{flex-basis:100%;margin:0}
.mk-big{font:700 40px var(--font-body);font-variant-numeric:tabular-nums}
.mk-verdict{font:700 22px var(--font-body);color:var(--bad)}
.mk-score.pass .mk-verdict{color:var(--good)}
.mk-filter{display:flex;gap:6px;margin:20px 0 12px}
.mk-filter button{padding:8px 14px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px var(--font-body);cursor:pointer}
.mk-filter button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.rv-list{padding-left:1.6em;margin:0}
.rv{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.rv-q{font:600 18px/1.4 var(--font-body);margin:0 0 10px;max-width:60ch}
.rv-q-img{display:block;max-height:160px;max-width:100%;background:#fff;border-radius:8px;margin-bottom:10px}
.rv-blank{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;background:var(--bad);color:#fff;font-size:13px;vertical-align:2px}
.rv-opts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rv-o{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;border:1.5px solid var(--line);font-size:16px}
.rv-o em{font-style:normal;font-weight:700;font-size:13px;white-space:nowrap}
.rv-o.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,var(--surface))}
.rv-o.right em{color:var(--good)}
.rv-o.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--surface))}
.rv-o.wrong em{color:var(--bad)}
.rv-img{max-height:90px;max-width:60%;background:#fff;border-radius:6px}
.mk-hist{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:6px}
.mk-hist a{display:grid;grid-template-columns:9em 1fr auto 3em;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.mk-hist a:hover{border-color:var(--muted)}
.mk-hbar{height:8px;border-radius:99px;background:var(--tab);overflow:hidden}
.mk-hbar i{display:block;height:100%}
.mk-hbar .ok{background:var(--good)}
.mk-hbar .bad{background:var(--bad)}
@media (max-width:640px){.mk-hist a{grid-template-columns:1fr auto auto}.mk-hbar{display:none}}
.mk-hist .okt{color:var(--good);font-weight:700}
.mk-hist .not{color:var(--bad);font-weight:700}

/* Mock answer rows: a select circle plus a separate text button that reads the answer aloud. */
.fq .mk-row{padding:0;gap:0;cursor:default}
.fq .mk-row:hover{border-color:var(--line)}
.mk-radio{display:flex;align-items:center;gap:10px;align-self:stretch;padding:14px 12px 14px 16px;border:0;border-right:1px solid var(--line);border-radius:12px 0 0 12px;background:none;color:var(--ink);cursor:pointer}
.mk-radio:hover .mk-dot{border-color:var(--ink)}
.mk-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center}
.mk-radio[aria-checked="true"] .mk-dot{border-color:currentColor}
.mk-radio[aria-checked="true"] .mk-dot::after{content:"";width:12px;height:12px;border-radius:50%;background:currentColor}
.mk-row.sel .mk-radio{color:var(--accent)}
.mk-row.wrong .mk-radio{color:var(--bad)}
.mk-say{flex:1;align-self:stretch;padding:14px 18px;border:0;border-radius:0 12px 12px 0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mk-say:hover{background:var(--tab)}
.qopts.art .mk-row{padding-bottom:10px}
.qopts.art .mk-radio{align-self:center;border-right:0}
.fq-voice{display:inline-grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:var(--tab);color:var(--ink);cursor:pointer}
/* The whole question is one button: tapping its text reads it aloud again. */
.mk-play{display:flex;align-items:flex-start;gap:12px;box-sizing:border-box;width:calc(100% + 20px);margin:0 -10px;padding:6px 10px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mk-play:hover{background:var(--tab)}
.mk-play svg{flex:0 0 auto;margin-top:.25em;color:var(--muted)}
.fq-voice{position:relative}
.fq-voice[aria-pressed="false"]{color:var(--muted);background:none}
.fq-voice[aria-pressed="false"]::after{content:"";position:absolute;width:24px;height:2px;background:currentColor;transform:rotate(-45deg)}
.mk-row .mark{flex:0 0 auto;padding:0 16px;font-weight:700}
.mk-radio:disabled{cursor:default}
/* Tap-to-hear text outside the question screen. */
[data-say]{cursor:pointer;border-radius:6px}
[data-say]:hover{background:var(--tab)}

/* Sign-in: signed out, only the Clerk box shows. */
body.signed-out .mainnav,body.signed-out #main,body.signed-out .user-btn{display:none}
.signin{max-width:440px;margin:48px auto;padding:0 16px;text-align:center}
.signin #clerkSignIn{display:flex;justify-content:center;margin-top:20px}
.user-btn{display:flex;align-items:center;margin-left:12px;min-width:32px}

/* Admin */
.adm-tabs{display:flex;gap:4px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.adm-tabs a{padding:10px 14px;color:var(--muted);text-decoration:none;font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1px}
.adm-tabs a[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.adm-invite{padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:8px}
.adm-invite label{display:block;font-weight:600;margin-bottom:8px}
.adm-invite-row{display:flex;gap:8px;flex-wrap:wrap}
.adm-invite input,.adm-q input,.adm-q textarea,.adm-q select{flex:1 1 220px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:500 16px var(--font-body)}
.adm-invite .hint{margin:8px 0 0}
.adm-invites{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.adm-invites li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.adm-sub{display:block;font-size:13px;color:var(--muted)}
.adm-badge{display:inline-block;padding:1px 8px;border-radius:99px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;vertical-align:1px}
.adm-badge.off{background:var(--bad);color:#fff}
.adm-scroll{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.adm-table th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
.adm-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.adm-table a{color:var(--ink)}
.adm-acts{white-space:nowrap;text-align:right}
.adm-acts .btn{padding:6px 10px;font-size:13px;margin-left:4px}
.adm-err{display:block;color:var(--bad);font-size:13px;white-space:normal}
.adm-sec{grid-template-columns:minmax(150px,1fr) minmax(120px,2fr)}
@media (max-width:640px){
  .adm-table thead{display:none}
  .adm-table tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .adm-table td{display:flex;justify-content:space-between;border:0;padding:3px 0}
  .adm-table td[data-l]::before{content:attr(data-l);color:var(--muted)}
  .adm-acts{text-align:left;padding-top:8px}
}
.adm-q input[type=search]{width:100%;box-sizing:border-box}
.adm-qlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.adm-qlist a{display:block;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.adm-qlist a:hover{border-color:var(--muted)}
.adm-edit{display:grid;gap:6px;max-width:720px}
.adm-edit label,.adm-lbl{font-weight:600;margin-top:10px}
.adm-edit textarea,.adm-edit input,.adm-edit select{width:100%;box-sizing:border-box}
.adm-orig{margin:0;font-size:13px;color:var(--muted)}
.adm-pic{max-height:140px;max-width:100%;background:#fff;border-radius:8px;justify-self:start}
.adm-log{padding-left:1.2em;color:var(--muted);font-size:14px}
.q-note{margin:10px 0 0;padding:10px 14px;border-left:4px solid var(--accent);background:var(--surface);border-radius:8px;color:var(--ink);font-size:16px}