/* Layout: exam-console — slim status bar, one question at a time, answer sheet beside it; results = readiness report */
:root{
  --bg:#eef2f6; --surface:#ffffff; --surface-2:#f5f7fa; --line:#d5dde7;
  --fg:#16202c; --muted:#5b6878;
  --accent:#2b5b84; --accent-soft:#dbe7f2; --on-accent:#ffffff;
  --flag:#c9940a; --flag-soft:#fbf1cf;
  --good:#1f7a4d; --good-soft:#dcf1e5; --warn:#b7791f; --warn-soft:#fbefd9; --bad:#b3382c; --bad-soft:#f8e0dc;
  --code-bg:#f2f5f9;
  --f-display:"Unbounded","Golos Text",system-ui,sans-serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f151c; --surface:#16202b; --surface-2:#1b2733; --line:#2a3947;
  --fg:#e3e9f0; --muted:#93a1b1;
  --accent:#6fa6d6; --accent-soft:#1d3347; --on-accent:#0b1620;
  --flag:#f0c53f; --flag-soft:#3a3115;
  --good:#5cc48f; --good-soft:#163527; --warn:#e9b45a; --warn-soft:#3a2d16; --bad:#ec7a6c; --bad-soft:#3b1d1a;
  --code-bg:#111a23; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f151c; --surface:#16202b; --surface-2:#1b2733; --line:#2a3947;
  --fg:#e3e9f0; --muted:#93a1b1;
  --accent:#6fa6d6; --accent-soft:#1d3347; --on-accent:#0b1620;
  --flag:#f0c53f; --flag-soft:#3a3115;
  --good:#5cc48f; --good-soft:#163527; --warn:#e9b45a; --warn-soft:#3a2d16; --bad:#ec7a6c; --bad-soft:#3b1d1a;
  --code-bg:#111a23; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 40px}
.wrap{max-width:1060px;margin:0 auto}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
code,pre,.mono{font-family:var(--f-mono)}
h1,h2,h3{font-family:var(--f-display);font-weight:700;text-wrap:balance;margin:0}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}

body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line);
  margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px}
.bar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.chip{font-family:var(--f-mono);font-size:11px;background:var(--accent);color:var(--on-accent);padding:2px 7px;border-radius:4px;font-weight:600}
.spacer{flex:1}
.timer{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:18px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line)}
.timer.low{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
.who{color:var(--muted);font-size:13px}

.btn{border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:9px 16px;border-radius:8px;font-weight:600}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.flagbtn[aria-pressed="true"]{background:var(--flag-soft);border-color:var(--flag)}
.btn:disabled{opacity:.45;cursor:default}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}

/* start */
.start{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;padding-top:34px}
.start h1{font-size:clamp(26px,4.5vw,40px);line-height:1.15;margin:8px 0 14px}
.lead{color:var(--muted);max-width:60ch;margin:0}
.facts{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 14px;min-width:110px}
.fact b{display:block;font-family:var(--f-mono);font-size:20px;font-variant-numeric:tabular-nums}
.fact span{font-size:12px;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px;margin:6px 0 14px;max-width:380px}
.field label,.lbl{font-weight:600;font-size:13px}
.field input{font:inherit;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
.variants{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 16px;max-width:520px}
.variant{text-align:left;background:var(--surface);color:var(--fg);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.variant b{font-family:var(--f-display);font-size:16px}
.variant span{font-size:12.5px;color:var(--muted)}
.variant[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft)}
.opts-row{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:18px}
.opts-row label{display:flex;gap:6px;align-items:center}
.domains{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.domains li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:baseline;font-size:14px}
.domains .n{font-family:var(--f-mono);color:var(--accent);font-weight:600}
.domains .w{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.note{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.hist{margin-top:16px}
.hist table{width:100%;border-collapse:collapse;font-size:13px}
.hist td,.hist th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
.hist th{font-weight:600;color:var(--muted);font-size:12px}
.hist .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
.linkbtn{background:none;border:0;color:var(--accent);padding:0;font-size:12.5px;text-decoration:underline}

/* exam */
.exam{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;padding-top:22px;align-items:start}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px}
.qhead{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:12px}
.qnum{font-family:var(--f-mono);font-weight:600;color:var(--accent)}
.dtag{font-size:12px;color:var(--muted)}
.qtext{font-size:16.5px;font-weight:500;margin:0 0 14px;max-width:68ch}
pre.code{background:var(--code-bg);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:0 0 16px;overflow-x:auto;font-size:14px;line-height:1.6}
.choices{display:flex;flex-direction:column;gap:8px}
.choice{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:11px 14px}
.choice:hover{border-color:var(--accent)}
.choice .key{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--muted)}
.choice .txt{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.choice.mono .txt{font-family:var(--f-mono);font-size:14px}
.choice[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft)}
.choice[aria-checked="true"] .key{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.qnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.sheet h2{font-size:13px;font-family:var(--f-body);font-weight:600;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.cell{aspect-ratio:1;max-width:100%;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-family:var(--f-mono);font-size:11.5px;color:var(--muted);padding:0;position:relative;font-variant-numeric:tabular-nums}
.cell.done{background:var(--accent-soft);color:var(--fg);border-color:var(--accent-soft)}
.cell.cur{outline:2px solid var(--accent);outline-offset:1px;color:var(--fg)}
.cell.flag::after{content:"";position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--flag)}
.legend{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);margin:12px 0 14px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.sheet .btn{width:100%}
.confirm{margin-top:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:13px}
.confirm p{margin:0 0 10px}
.confirm .row{display:flex;gap:8px}
.confirm .row .btn{padding:7px 10px;font-size:13px}

/* results */
.res{padding-top:28px;display:flex;flex-direction:column;gap:20px}
.score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.big{font-family:var(--f-display);font-size:clamp(44px,9vw,72px);line-height:1;font-variant-numeric:tabular-nums}
.big small{font-size:.35em;color:var(--muted);font-family:var(--f-mono)}
.pill{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.lv-good{background:var(--good-soft);color:var(--good)}
.lv-ok{background:var(--accent-soft);color:var(--accent)}
.lv-warn{background:var(--warn-soft);color:var(--warn)}
.lv-bad{background:var(--bad-soft);color:var(--bad)}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.meta{color:var(--muted);font-size:14px}
.scale{position:relative;height:10px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);margin:14px 0 6px;overflow:hidden}
.scale .fill{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.scale .mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fg);left:70%}
.scale-lbl{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sec-h h2{font-size:17px}
.dlist{display:flex;flex-direction:column;gap:14px}
.drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
.drow .nm{font-size:14px;font-weight:500}
.drow .rt{display:flex;gap:8px;align-items:center}
.drow .pct{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:13px;min-width:74px;text-align:right}
.drow .pill{font-size:10.5px;padding:2px 8px}
.dbar{grid-column:1/-1;position:relative;height:8px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.dbar span{display:block;height:100%}
.dbar i{position:absolute;top:0;bottom:0;left:70%;width:2px;background:var(--fg);opacity:.55}
.dbar u{position:absolute;top:1px;bottom:1px;width:3px;border-radius:2px;background:var(--muted);text-decoration:none}
.drow .sub{grid-column:1/-1;font-size:12.5px;color:var(--muted)}
.radar-box{overflow-x:auto}
.radar{width:100%;max-width:440px;display:block;margin:0 auto}
.radar text{font-family:var(--f-body);font-size:11.5px;fill:var(--muted)}
.focus{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.focus li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
.focus .rk{font-family:var(--f-mono);font-weight:600;color:var(--accent);font-size:14px}
.focus b{font-weight:600}
.focus p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-variant-numeric:tabular-nums}
.tag.bad{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.tag.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.tag.good{border-color:var(--good);color:var(--good);background:var(--good-soft)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.kpi b{display:block;font-family:var(--f-mono);font-size:19px;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--muted)}
.insights{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:6px;max-width:80ch}
.tline{display:flex;align-items:flex-end;gap:2px;height:70px;margin-top:14px;padding-bottom:2px;border-bottom:1px solid var(--line)}
.tline span{flex:1;min-width:0;border-radius:2px 2px 0 0}
.tline-lbl{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-top:4px}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp th,.cmp td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
.cmp th{font-size:12px;color:var(--muted);font-weight:600}
.cmp .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.up{color:var(--good)} .down{color:var(--bad)}
.tablewrap{overflow-x:auto}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.review{display:flex;flex-direction:column;gap:12px}
.ritem{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--good);border-radius:8px;padding:16px 18px}
.ritem.wrong{border-left-color:var(--bad)}
.ritem.skip{border-left-color:var(--muted)}
.ritem .qtext{font-size:15px;margin-bottom:10px}
.ritem pre.code{font-size:13px;margin-bottom:10px}
.ans{font-size:14px;display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.ans .mono{font-size:13px;white-space:pre-wrap}
.ans .ok{color:var(--good)} .ans .no{color:var(--bad)}
.ex{font-size:14px;color:var(--muted);max-width:72ch}
.filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.filter .btn{padding:6px 12px;font-size:13px}
.filter .btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:8px;font-size:13px;z-index:20}
.copyta{width:100%;height:180px;margin-top:10px;font-family:var(--f-mono);font-size:12px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px}

@media (max-width:860px){
  .start,.exam,.two{grid-template-columns:minmax(0,1fr)}
  .score{grid-template-columns:minmax(0,1fr)}
  .grid{grid-template-columns:repeat(10,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:440px){.variants{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.choice,.cell,.btn,.variant{transition:border-color .12s,background .12s}}

/* ---- server version additions ---- */
.sync{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good)}
.sync.pending::before{background:var(--warn)}
.sync.off::before{background:var(--bad)}
.errbox{background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad);border-radius:8px;padding:10px 12px;font-size:14px;margin:0 0 12px;max-width:520px}
.field input.code{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.08em}
.locked{display:flex;gap:14px;align-items:flex-start;background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;padding:16px}
.locked p{margin:0}
.center{padding-top:60px;text-align:center;color:var(--muted)}
/* teacher */
.tlayout{padding-top:24px;display:flex;flex-direction:column;gap:20px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row .field{margin:0}
select,.tinput{font:inherit;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 6px;color:var(--fg)}
.toggle i{width:30px;height:18px;border-radius:9px;background:var(--line);position:relative;flex:none}
.toggle i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface)}
.toggle[aria-pressed="true"] i{background:var(--good)}
.toggle[aria-pressed="true"] i::after{left:14px}
.bigcode{font-family:var(--f-mono);font-size:clamp(28px,6vw,48px);font-weight:600;letter-spacing:.06em;color:var(--accent)}
.stbl{width:100%;border-collapse:collapse;font-size:13.5px}
.stbl th,.stbl td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.stbl th{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.stbl td.num,.stbl th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.stbl tr.click{cursor:pointer}
.stbl tr.click:hover td{background:var(--surface-2)}
.heat{display:inline-block;min-width:38px;text-align:center;border-radius:4px;padding:1px 4px;font-family:var(--f-mono);font-size:12px}
.h-good{background:var(--good-soft);color:var(--good)}.h-ok{background:var(--accent-soft);color:var(--accent)}.h-warn{background:var(--warn-soft);color:var(--warn)}.h-bad{background:var(--bad-soft);color:var(--bad)}
.qhard{display:flex;flex-direction:column;gap:10px}
.qh{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:10px}
.qh .pp{font-family:var(--f-mono);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.qh pre.code{font-size:12.5px;padding:8px 10px;margin:6px 0}
.qh p{margin:0;font-size:14px}
.sesslist{display:flex;flex-direction:column;gap:8px}
.sess{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-align:left;color:var(--fg);width:100%}
.sess:hover{border-color:var(--accent)}
.sess b{font-family:var(--f-mono)}
.dialog{position:fixed;inset:0;background:rgba(10,16,24,.55);z-index:30;display:flex;justify-content:center;align-items:flex-start;overflow:auto;
  padding:calc(24px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.dialog .panel{width:100%;max-width:900px}