:root{--bg:#f4f5f7;--card:#fff;--ink:#14171f;--muted:#5f6675;--line:#e2e5eb;--accent:#1f5eff;--accent-ink:#fff;
--ok:#15803d;--ok-bg:#ecfdf3;--ok-line:#a7e3bd;--bad:#c2261d;--bad-bg:#fef1f0;--bad-line:#f4b8b3;--chip:#f7f8fa;--radius:14px}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.topbar{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:18px 20px 6px}
.brand{font-weight:800;font-size:20px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#ffd84d;font-size:16px}
.tag{display:inline-block;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 14px;font-size:13px;font-weight:600;color:#333a48}
.wrap{max-width:1180px;margin:0 auto;padding:14px 20px 30px}
.foot{max-width:1180px;margin:0 auto;padding:10px 20px 40px;color:var(--muted);font-size:12.5px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.muted{color:var(--muted)} .small{font-size:13px}
h1{font-size:30px;line-height:1.2;margin:4px 0 8px;letter-spacing:-.02em}
h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:26px 0 10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.end{justify-content:flex-end}
.btn{appearance:none;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-family:inherit;font-weight:600;font-size:15px;line-height:1;padding:12px 18px;border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(1.07)} .btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.big{padding:15px 26px;font-size:16px}
/* start screen */
.hero p{max-width:640px}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.topic{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--card);user-select:none}
.topic input{width:18px;height:18px;accent-color:var(--accent)}
.topic .n{margin-left:auto;color:var(--muted);font-size:13px}
.topic.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.seg button{border:0;background:none;padding:11px 20px;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;color:var(--ink);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:#fff}
.resume{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:1px dashed var(--accent);background:#f1f5ff;border-radius:12px;padding:14px 16px;margin-bottom:18px}
/* quiz layout */
.quiz{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}
.qlabel{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.qtext{font-size:24px;line-height:1.35;font-weight:750;margin:0 0 22px;letter-spacing:-.01em}
.choices{display:grid;gap:10px}
.choice{display:flex;gap:14px;align-items:center;text-align:left;width:100%;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px 16px;font-family:inherit;font-weight:500;font-size:17px;line-height:1.35;color:var(--ink);cursor:pointer}
.choice:hover:not(:disabled){border-color:#9aa3b5;background:#fafbfc}
.choice:disabled{cursor:default}
.letter{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);font-weight:700;font-size:14px;background:#fff}
.choice.correct{border-color:var(--ok-line);background:var(--ok-bg)} .choice.correct .letter{background:var(--ok);border-color:var(--ok);color:#fff}
.choice.wrong{border-color:var(--bad-line);background:var(--bad-bg)} .choice.wrong .letter{background:var(--bad);border-color:var(--bad);color:#fff}
.choice.dim{opacity:.6}
.result{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.verdict{font-size:20px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.verdict.ok{color:var(--ok)} .verdict.bad{color:var(--bad)}
.ans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.ans .box{border-radius:12px;padding:12px 14px;border:1px solid}
.ans .box small{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.ans .ok{background:var(--ok-bg);border-color:var(--ok-line)} .ans .ok small{color:var(--ok)}
.ans .bad{background:var(--bad-bg);border-color:var(--bad-line)} .ans .bad small{color:var(--bad)}
.ans .box b{font-weight:650}
.sec{margin:16px 0 0}
.sec h3{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.sec p{margin:0}
.calc{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.calc li{display:grid;grid-template-columns:18px 1fr auto;gap:4px 10px;align-items:baseline;padding:10px 14px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.calc li:last-child{border-bottom:0;background:#fafbfc;font-weight:650}
.calc .step{flex:none;color:var(--muted);font-size:12px;font-weight:700;width:18px}
.calc .refs{text-align:right}
.chip{display:inline-block;border:1px solid #c9ceda;background:var(--chip);border-radius:999px;padding:1px 9px;font-size:12.5px;font-weight:600;color:#2b3242;white-space:nowrap;margin:2px 4px 2px 0}
.where{background:#f8f9fb;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.report{display:inline-block;margin-top:16px;font-size:13.5px;color:var(--muted)}
.report:hover{color:var(--bad)}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
/* side grid */
.side{position:sticky;top:14px}
.side .card{padding:18px}
.side h4{margin:0 0 4px;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:12px}
.num{aspect-ratio:1;border:1px solid var(--line);border-radius:9px;background:#fff;font-family:inherit;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.num.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.num.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.num.cur{outline:2px solid var(--ink);outline-offset:1px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px;border:1px solid var(--line)}
.prog{height:6px;background:#eceef2;border-radius:99px;overflow:hidden;margin-top:10px}.prog>div{height:100%;background:var(--accent)}
.side .btn{width:100%;margin-top:14px}
/* summary */
.score{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.ring{--p:0;width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--c,var(--accent)) calc(var(--p)*1%),#eceef2 0);display:grid;place-items:center}
.ring>div{width:104px;height:104px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:30px;font-weight:800}
.bt{width:100%;border-collapse:collapse;font-size:15px}
.bt td,.bt th{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
.bt th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bar{height:8px;background:#eceef2;border-radius:99px;overflow:hidden;min-width:80px}.bar>div{height:100%}
dialog{border:1px solid var(--line);border-radius:16px;max-width:460px;width:92vw;padding:22px}
dialog::backdrop{background:rgba(20,23,31,.35)}
dialog h3{margin:0 0 6px} textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px}
details.mgrid{display:none}
@media (max-width:860px){
  .quiz{grid-template-columns:1fr}
  .side{position:static;order:-1}
  .side .card.full{display:none}
  details.mgrid{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  details.mgrid summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
  details.mgrid .grid{grid-template-columns:repeat(8,1fr)}
  .card{padding:20px}
  .qtext{font-size:20px}
  h1{font-size:25px}
  .ans{grid-template-columns:1fr}
  .choice{font-size:16px}
  .calc li{grid-template-columns:18px 1fr}.calc .refs{grid-column:2;text-align:left}
  .topbar .tag{font-size:12px}
}
button,textarea{font-family:inherit}