:root{
  --bg:#eef1f5;--surface:#ffffff;--ink:#1c2430;--muted:#5b6676;--line:#d5dbe3;
  --brand:#1f4e79;--brand-soft:#e3ecf5;
  --ans:#2e8b57;--nans:#c8382c;--nv:#e2e6ec;--nv-ink:#1c2430;--mark:#6b3fa0;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#12161c;--surface:#1b2129;--ink:#e6eaf0;--muted:#9aa5b4;--line:#2c3540;--brand:#173a5c;--brand-soft:#1f2b38;--nv:#2c3540;--nv-ink:#e6eaf0}
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI","Nirmala UI","Noto Sans","Noto Sans Devanagari","Mangal",system-ui,sans-serif;font-size:16px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #f0b429;outline-offset:2px}
.hidden{display:none!important}

.bar{background:var(--brand);color:#fff;display:flex;align-items:center;gap:16px;padding:10px 20px;flex-wrap:wrap}
.bar h1{font-size:1.15rem;margin:0;font-weight:600;line-height:1.2}
.bar small{display:block;opacity:.8;font-size:.85rem;font-weight:400}
.bar .sp{flex:1}
.bar a{color:#fff}
.cand{display:flex;align-items:center;gap:10px}
.avatar{width:40px;height:40px;border-radius:6px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-weight:700}
.cand div{line-height:1.25;font-size:.9rem}
.timer{background:rgba(0,0,0,.25);border-radius:8px;padding:4px 14px;text-align:center;min-width:120px}
.timer span{display:block;font-size:.75rem;opacity:.8}
.timer b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.timer.low{background:#a32b22}

.page{max-width:760px;margin:32px auto;padding:0 16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;margin-bottom:20px}
.card h2{margin:0 0 4px;font-size:1.4rem;line-height:1.25}
.card h3{margin:0 0 12px;font-size:1.1rem}
.lead{color:var(--muted);margin:0 0 20px}
label.f{display:block;margin-bottom:14px;font-weight:500}
label.f input,label.f select,label.f textarea,.in{display:block;width:100%;margin-top:6px;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
textarea{resize:vertical}
.btn{border:0;border-radius:6px;padding:9px 18px;font-weight:600;background:var(--bg);border:1px solid var(--line)}
.btn.pri{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.green{background:var(--ans);color:#fff;border-color:var(--ans)}
.btn.purple{background:var(--mark);color:#fff;border-color:var(--mark)}
.btn.red{background:var(--nans);color:#fff;border-color:var(--nans)}
.btn.sm{padding:4px 10px;font-size:.85rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.err{color:var(--nans);font-size:.92rem;min-height:1.4em;margin:0 0 8px}
.okmsg{color:var(--ans)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row-end{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 16px}

.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:16px 0 24px;font-size:.92rem}
.legend div{display:flex;align-items:center;gap:10px}
.agree{display:flex;gap:10px;align-items:flex-start;margin-bottom:20px}
.agree input{margin-top:5px;width:18px;height:18px}
.instr ol{padding-left:22px}
.instr li{margin-bottom:8px}

.pb{width:42px;height:38px;border:0;font-weight:600;font-size:.95rem;display:grid;place-items:center;position:relative;background:var(--nv);color:var(--nv-ink);border-radius:4px;flex:none}
.pb.na{background:var(--nans);color:#fff;border-radius:14px 14px 4px 4px}
.pb.a{background:var(--ans);color:#fff;border-radius:4px 4px 14px 14px}
.pb.m,.pb.am{background:var(--mark);color:#fff;border-radius:50%;width:38px;margin:0 2px}
.pb.am::after{content:"";position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;background:var(--ans);border:2px solid var(--surface)}
.pb.cur{box-shadow:0 0 0 3px var(--surface),0 0 0 5px #f0b429}

.sec-row{display:flex;align-items:center;gap:8px;padding:8px 20px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs{display:flex;gap:6px;overflow-x:auto;flex:1}
.tab{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:6px 14px;white-space:nowrap;font-size:.92rem}
.tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.lang{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}
.lang select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.grid{display:grid;grid-template-columns:1fr 320px;min-height:calc(100vh - 130px)}
/* exam screen: hamesha poori screen (position fixed) — page kabhi scroll nahi hota.
   Question aur palette apni jagah ke andar scroll hote hain, buttons neeche fixed patti me. */
#s-exam:not(.hidden){position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
#s-exam > .bar,#s-exam > .sec-row{flex:none}
#s-exam .grid{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
#s-exam .qpane,#s-exam .side{min-height:0;overflow:hidden}
#s-exam .qbody{min-height:0}
#s-exam .pal{min-height:0}
#s-exam .counts{flex:none}
.exam-foot{flex:none;display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--surface);border-top:2px solid var(--line);box-shadow:0 -2px 8px rgba(0,0,0,.06);flex-wrap:nowrap}
.exam-foot .sp{flex:1}
.exam-foot .btn{white-space:nowrap;padding:10px 18px}
.exam-foot #btn-submit{min-width:140px;margin-left:12px}
/* kam oonchai wali screen (laptop + zoom) par sab thoda compact */
@media (max-height:720px){
  #s-exam .bar{padding:6px 16px} #s-exam .timer b{font-size:1.25rem} #s-exam .avatar.has-photo{height:46px;width:38px}
  #s-exam .sec-row{padding:5px 16px} #s-exam .qhead{padding:8px 20px} #s-exam .qbody{padding:14px 20px}
  #s-exam .counts{padding:10px 12px;gap:6px} #s-exam .pal{padding:10px;gap:8px} #s-exam .pal-h{padding:8px 12px 2px}
  .exam-foot{padding:7px 16px} .exam-foot .btn{padding:8px 14px}
}
/* chhoti chaudai (tablet/mobile): buttons 2 line me, phir bhi neeche fixed */
@media (max-width:900px){
  .exam-foot{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .exam-foot .sp{display:none}
  .exam-foot .btn{flex:1 1 40%;padding:9px 8px;font-size:.92rem}
  .exam-foot #btn-submit{margin-left:0;min-width:0}
}
.qpane{display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--line)}
.qhead{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px}
.qhead h3{margin:0;font-size:1.05rem}
.marks{font-size:.88rem;color:var(--muted)}
.marks b.p{color:var(--ans)}.marks b.n{color:var(--nans)}
.qbody{padding:24px;flex:1;overflow:auto;user-select:none;-webkit-user-select:none}
.qtext{font-size:1.15rem;line-height:1.65;margin:0 0 24px;max-width:70ch;white-space:pre-wrap}
.opts{display:flex;flex-direction:column;gap:10px;max-width:640px}
.opt{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--bg);text-align:left;width:100%}
.opt .k{width:28px;height:28px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center;font-size:.85rem;font-weight:600;flex:none}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt.sel .k{background:var(--brand);border-color:var(--brand);color:#fff}
.actions{display:flex;gap:10px;padding:14px 24px;border-top:1px solid var(--line);flex-wrap:wrap}
.actions .sp{flex:1}
.side{background:var(--surface);display:flex;flex-direction:column}
.counts{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;padding:16px;border-bottom:1px solid var(--line);font-size:.82rem;line-height:1.2}
.counts div{display:flex;align-items:center;gap:8px}
.counts .pb{width:34px;height:30px;font-size:.85rem}
.counts .pb.m,.counts .pb.am{width:30px}
.counts .wide{grid-column:1/-1}
.pal-h{padding:12px 16px 4px;font-weight:600;background:var(--brand-soft);margin:0}
.pal{display:flex;flex-wrap:wrap;gap:10px;padding:16px;align-content:flex-start;flex:1;overflow:auto;background:var(--brand-soft)}
.side .foot{padding:14px 16px;border-top:1px solid var(--line)}
.side .foot .btn{width:100%}
.paltoggle{display:none}
.saved{font-size:.8rem;opacity:.85}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 18px;border-radius:8px;font-size:.92rem;z-index:60}
.modal{position:fixed;inset:0;background:rgba(10,15,25,.55);display:grid;place-items:center;z-index:50;padding:16px}
.modal .card{max-width:640px;width:100%;max-height:90vh;overflow:auto;margin:0}

.tbl-wrap{overflow-x:auto;margin:12px 0}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{border:1px solid var(--line);padding:7px 9px;text-align:center;vertical-align:middle}
th{background:var(--brand-soft);font-weight:600}
td.l,th.l{text-align:left}
.ok{color:var(--ans);font-weight:600}.bad{color:var(--nans);font-weight:600}.skip{color:var(--muted);font-weight:600}
.pill{display:inline-block;padding:1px 10px;border-radius:20px;font-size:.8rem;font-weight:600;background:var(--nv)}
.pill.g{background:var(--ans);color:#fff}.pill.r{background:var(--nans);color:#fff}.pill.y{background:#e3a008;color:#1c2430}

@media (max-width:900px){
  .grid{grid-template-columns:1fr;min-height:auto}
  #s-exam .qpane{overflow:hidden}
  .side{position:fixed;top:0;right:0;bottom:0;width:min(320px,88vw);z-index:30;transform:translateX(100%);transition:transform .2s;box-shadow:-8px 0 24px rgba(0,0,0,.25)}
  .side.open{transform:none}
  .paltoggle{display:inline-block}
  .cand div{display:none}
  .qbody,.qhead,.actions{padding-left:16px;padding-right:16px}
}
a.btn{text-decoration:none;color:inherit;display:inline-block}a.btn.pri{color:#fff}

/* lockdown overlay */
.lock{position:fixed;inset:0;z-index:100;background:rgba(15,25,40,.96);color:#fff;display:grid;place-items:center;padding:24px;text-align:center}
.lock h2{margin:0 0 10px;font-size:1.6rem}.lock p{margin:0 0 20px;opacity:.9;max-width:52ch}
.lock .btn{font-size:1.05rem;padding:12px 26px}