:root{--bg:#f5f7fb;--card:#fff;--ink:#20242c;--muted:#667085;--line:#e5e7eb;--pri:#7f1d1d;--red:#b91c1c;--green:#166534;--shadow:0 12px 34px rgba(31,41,55,.08)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Thai",sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}.hidden{display:none!important}button{cursor:pointer}.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topin{max-width:1240px;margin:auto;padding:11px 16px;display:flex;align-items:center;gap:10px}.brand{font-weight:850;color:var(--pri)}.grow{flex:1}.wrap{max-width:1240px;margin:auto;padding:22px 16px 70px}.hero{background:linear-gradient(135deg,#7f1d1d,#b91c1c);color:#fff;border-radius:23px;padding:27px;box-shadow:var(--shadow)}.hero h1{margin:0 0 6px;font-size:clamp(1.65rem,4vw,2.6rem)}.hero p{margin:0;opacity:.9}.card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px;box-shadow:var(--shadow)}.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.section{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:23px 0 11px}.section h2{margin:0;font-size:1.16rem}.muted{color:var(--muted)}.small{font-size:.83rem}.btn{border:0;border-radius:10px;padding:9px 13px;font-weight:750}.primary{background:var(--pri);color:#fff}.ghost{background:#fff;border:1px solid var(--line)}.dangerbtn{background:var(--red);color:#fff}.okbtn{background:var(--green);color:#fff}.sm{padding:6px 9px;font-size:.83rem}.field{margin-bottom:11px}label{font-size:.88rem;font-weight:700;display:block;margin-bottom:5px}input,select,textarea{width:100%;border:1px solid #d0d5dd;border-radius:10px;padding:9px 10px;background:#fff}textarea{min-height:78px;resize:vertical}.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.notice{padding:11px 13px;border-radius:11px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}.good{background:#f0fdf4;border-color:#bbf7d0;color:#166534}.bad{background:#fef2f2;border-color:#fecaca;color:#991b1b}.badge{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:.75rem;font-weight:800;background:#f3f4f6}.bactive{background:#dbeafe;color:#1d4ed8}.bdone{background:#dcfce7;color:#166534}.blocked{background:#fee2e2;color:#b91c1c}.bexpired{background:#fef3c7;color:#92400e}.examgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:13px;background:#fff}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:#f9fafb;color:#475467;font-size:.82rem}.metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px}.metric .v{font-size:1.4rem;font-weight:850;color:var(--pri)}.metric .l{font-size:.8rem;color:var(--muted)}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:13px 0}.tab{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-weight:750}.tab.active{background:var(--pri);color:#fff}.toast{position:fixed;right:15px;bottom:15px;z-index:1300;background:#111827;color:#fff;border-radius:10px;padding:10px 13px;max-width:360px}.toast.err{background:#991b1b}.overlay{position:fixed;inset:0;z-index:1100;background:rgba(17,24,39,.72);display:grid;place-items:center;padding:16px}.modal{background:#fff;border-radius:17px;padding:21px;width:min(620px,100%);max-height:90vh;overflow:auto}.lock{position:fixed;inset:0;z-index:1400;background:#7f1d1d;color:#fff;display:grid;place-items:center;text-align:center;padding:22px}.lock h1{font-size:clamp(2rem,5vw,4rem);margin:0 0 8px}
.examhead{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}.examheadin{padding:10px 14px;display:flex;align-items:center;gap:10px}.timer{margin-left:auto;background:#111827;color:#fff;border-radius:10px;padding:8px 11px;font-weight:900;min-width:100px;text-align:center}.timer.warn{background:var(--red)}.progress{height:6px;background:#e5e7eb}.progress>div{height:100%;background:var(--pri);transition:.15s}.standard-exam{max-width:1080px;margin:auto;padding:15px 14px 70px}.qcard{background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px;margin:12px 0}.qtitle{font-weight:800;line-height:1.55;margin-bottom:10px}.choice{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:9px 10px;margin:7px 0;cursor:pointer}.choice input{width:auto;margin-top:4px}.choice.selected,.choice:has(input:checked){border-color:#7f1d1d;background:#fff7f7}.navigator{display:flex;gap:6px;flex-wrap:wrap}.navq{width:35px;height:35px;border-radius:8px;border:1px solid var(--line);background:#fff}.navq.done{background:#dcfce7;border-color:#86efac;color:#166534}
.pdf-exam-layout{height:calc(100dvh - 72px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:0;background:#e9edf3}.pdf-pane{min-width:0;display:flex;flex-direction:column;border-right:1px solid #cfd5df;background:#3f454f}.pdf-toolbar{display:flex;align-items:center;gap:7px;padding:8px 10px;background:#20242c;color:#fff;flex-wrap:wrap}.pdf-toolbar button,.pdf-toolbar input{width:auto}.pdf-toolbar input{max-width:64px;padding:6px 7px;border:0}.pdf-stage{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:16px;overscroll-behavior:contain}.pdf-stage canvas{background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.35);max-width:none}.pdf-loading{color:#fff;margin:auto}.answer-pane{min-width:0;overflow:auto;background:var(--bg);padding:12px}.answer-pane .qcard{box-shadow:none}.answer-footer{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 25%);padding-top:28px;padding-bottom:6px;text-align:right}.pdf-answer-choice{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:8px}.pdf-answer-choice .letter{width:38px;height:38px;border-radius:9px;background:#f3f4f6;display:grid;place-items:center;font-weight:850}.mobile-mode-tabs{display:none}.mobile-exam-bar{display:none}
@media(max-width:900px){.g4,.g3,.g2,.examgrid{grid-template-columns:1fr}.wrap{padding:17px 12px 55px}.hero{padding:21px}.pdf-exam-layout{grid-template-columns:1fr 390px}}
@media(max-width:720px){.examheadin{padding:8px 10px}.examheadin>div:first-child{min-width:0}.examheadin strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58vw}.timer{min-width:82px;font-size:.92rem;padding:7px 8px}.pdf-exam-layout{height:calc(100dvh - 57px);display:block;position:relative}.mobile-mode-tabs{display:flex;position:sticky;top:0;z-index:95;background:#fff;border-bottom:1px solid var(--line);padding:7px;gap:7px}.mobile-mode-tabs button{flex:1}.mobile-show-pdf .answer-pane{display:none}.mobile-show-answer .pdf-pane{display:none}.pdf-pane,.answer-pane{height:calc(100dvh - 103px);border:0}.answer-pane{padding:9px}.pdf-toolbar{padding:6px 7px;gap:5px}.pdf-toolbar .zoom-label{display:none}.pdf-stage{padding:8px}.qcard{padding:14px;margin:9px 0}.pdf-answer-choice{grid-template-columns:39px 1fr}.choice{min-height:50px;align-items:center}.answer-footer{padding-bottom:max(8px,env(safe-area-inset-bottom))}.mobile-exam-bar{display:block;position:sticky;bottom:8px;text-align:center;pointer-events:none}.mobile-exam-bar button{pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.2)}}

/* V4 Live Monitor */
.live-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}.live-green{border-color:#86efac}.live-amber{border-color:#fcd34d}.live-red{border-color:#fca5a5}.live-blue{border-color:#93c5fd}.live-progress{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;min-width:130px;margin-bottom:4px}.live-progress span{display:block;height:100%;background:#166534}.live-table td{vertical-align:middle}.state-LOCKED{background:#fff7f7}.state-ACTIVE_OFFLINE{background:#fffbeb}.state-TIME_UP{background:#fff7ed}.live-actions{min-width:260px}.network-pill{font-size:.76rem;font-weight:800;padding:4px 8px;border-radius:999px;background:#dcfce7;color:#166534}.network-pill.offline{background:#fee2e2;color:#991b1b}
@media(max-width:1000px){.live-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.live-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.live-actions{min-width:220px}}