:root{
  --paper:#F7F8FA; --panel:#FFFFFF; --ink:#17202E; --muted:#5A6474; --line:#D9DEE6; --soft:#EEF1F6;
  --accent:#2442B8; --accent-ink:#FFFFFF; --accent-soft:#E6EAFA;
  --ok:#1E7A55; --ok-soft:#E3F2EA; --warn:#A86A0C; --warn-soft:#FBF0DC; --bad:#B4232C; --bad-soft:#FBE6E7;
  --r-sm:6px; --r:10px;
  --font:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#10151E; --panel:#171E2A; --ink:#E7EBF2; --muted:#9AA4B4; --line:#2C3544; --soft:#1E2635;
    --accent:#7F97FF; --accent-ink:#0E1422; --accent-soft:#232E4F;
    --ok:#5CC79A; --ok-soft:#173327; --warn:#E3AE55; --warn-soft:#3A2D14; --bad:#F07B82; --bad-soft:#3D1D21; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--font)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:1.9rem} h2{font-size:1.35rem} h3{font-size:1.05rem}
p{margin:0 0 1em} a{color:var(--accent)}
.muted{color:var(--muted)} .small{font-size:.88rem}
.num{font-variant-numeric:tabular-nums}
.hidden{display:none!important}
.wrap{max-width:1080px;margin:0 auto;padding:28px 20px 64px}
.narrow{max-width:460px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.stack>*+*{margin-top:14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}

label{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px}
.hint{font-weight:400;color:var(--muted);font-size:.85rem;margin-top:4px}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:11px 12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.code-input{font-size:1.6rem;letter-spacing:.3em;text-transform:uppercase;text-align:center;font-weight:700}

button,.btn{font:inherit;font-weight:700;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--panel);
  color:var(--ink);padding:10px 16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
button:hover{border-color:var(--muted)}
button:focus-visible,.btn:focus-visible,.qnav button:focus-visible,.opt:focus-within{outline:3px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.primary:hover{filter:brightness(1.08)}
button.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
button.link{border:none;background:none;padding:4px 6px;color:var(--accent);font-weight:700}
button:disabled{opacity:.55;cursor:not-allowed}
button.block{width:100%;justify-content:center;padding:13px}

.msg{border-radius:var(--r-sm);padding:11px 14px;font-size:.95rem}
.msg.bad{background:var(--bad-soft);color:var(--bad)} .msg.ok{background:var(--ok-soft);color:var(--ok)}
.msg.warn{background:var(--warn-soft);color:var(--warn)}

.tag{display:inline-block;font-size:.8rem;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--soft);color:var(--muted)}
.tag.open{background:var(--ok-soft);color:var(--ok)} .tag.closed{background:var(--bad-soft);color:var(--bad)}
.tag.draft{background:var(--warn-soft);color:var(--warn)} .tag.live{background:var(--accent-soft);color:var(--accent)}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:.93rem;background:var(--panel)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
th{font-size:.82rem;color:var(--muted);background:var(--soft);position:sticky;top:0}
tr:last-child td{border-bottom:none}
td.wrap-cell{white-space:normal;min-width:260px}

/* ── exam paper ── */
.examhead{position:sticky;top:0;z-index:5;background:var(--panel);border-bottom:1px solid var(--line)}
.examhead .inner{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between}
.clock{font-size:1.9rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock.low{color:var(--bad)}
.timebar{height:5px;background:var(--soft)}
.timebar>i{display:block;height:100%;background:var(--ink);transition:width 1s linear}
.timebar.low>i{background:var(--bad)}
.paper{display:grid;grid-template-columns:1fr 250px;gap:26px;align-items:start}
@media (max-width:820px){.paper{grid-template-columns:1fr}.side{order:-1}}
.q{padding:26px 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.q:first-child{padding-top:6px}
.qnum{font-size:.9rem;color:var(--muted);font-weight:700;margin-bottom:6px}
.qtext{font-size:1.12rem;white-space:pre-wrap;margin-bottom:14px;max-width:70ch}
.opt{font-weight:400;font-size:1rem;display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:8px;cursor:pointer;background:var(--panel);max-width:70ch}
.opt:hover{border-color:var(--muted)}
.opt input{margin:4px 0 0;width:18px;height:18px;accent-color:var(--accent);flex:none}
.opt.chosen{border-color:var(--accent);background:var(--accent-soft)}
.opt .letter{font-weight:700;color:var(--muted);min-width:1.2em}
.side{position:sticky;top:110px}
.qnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px}
.qnav button{padding:0;height:38px;justify-content:center;font-size:.9rem;border-radius:5px}
.qnav button.done{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.saved{font-size:.85rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:520px){
  .examhead .inner{padding:10px 14px;gap:10px}
  .clock{font-size:1.35rem}
  #p-who{display:none}
  .examhead button.primary{padding:8px 12px}
  .side{position:static}
}
/* v2 additions */
.langbar{position:absolute;top:10px;right:14px;z-index:6}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:14px;background:var(--panel)}
.seg button{border:none;border-radius:0;padding:9px 16px;color:var(--muted)}
.seg button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.instr{background:var(--soft);border-radius:var(--r-sm);padding:12px 14px;white-space:pre-wrap;margin-bottom:10px}
.instr summary{cursor:pointer;font-weight:700}
dialog{border:1px solid var(--line);border-radius:var(--r);padding:22px;max-width:440px;width:calc(100% - 32px);background:var(--panel);color:var(--ink)}
dialog::backdrop{background:rgba(10,15,25,.45)}
.bigscore{font-size:2.6rem;font-weight:700;line-height:1}
.opt.static{cursor:default}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt .mark{color:var(--muted);width:1em}
.answerbox{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;max-width:70ch}
.answerbox.right{border-color:var(--ok)} .answerbox.wrong{border-color:var(--bad)}
/* exam lockdown */
body.lockdown #questions, body.lockdown .qtext, body.lockdown .instr{user-select:none;-webkit-user-select:none}
body.lockdown textarea, body.lockdown input{user-select:text;-webkit-user-select:text}
body.blurred .examhead, body.blurred main{filter:blur(9px);pointer-events:none}
.watermark{position:fixed;inset:0;z-index:4;pointer-events:none;display:flex;flex-wrap:wrap;gap:60px 40px;align-content:space-around;justify-content:space-around;overflow:hidden;transform:rotate(-24deg) scale(1.4)}
.watermark span{font-size:.8rem;color:var(--ink);opacity:.07;white-space:nowrap;font-weight:700}
.pause{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(10,15,25,.55);padding:20px}
.qclock{font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.qclock.low{color:var(--bad);font-weight:700}
@media print{ body.lockdown *{display:none!important} body.lockdown::after{content:"Printing is disabled during this exam.";display:block;padding:40px;font-size:18px} }