/* ============================================================
Vtrio Exam Portal — design system
Palette derived from the Vtrio mark: navy #14329b + red #c8102e.
Teal is the interactive/hover accent; red is reserved for
destructive + integrity violations only.
============================================================ */
:root{
/* brand */
--navy:#14329b; --navy-700:#0f2578; --navy-900:#0a1330; --navy-50:#eef1fb;
/* interactive accent (hover / focus) */
--teal:#0e9384; --teal-700:#0b7c70; --teal-50:#e6f7f4;
/* semantic — separate from the accent */
--red:#c8102e; --red-50:#fdeaec; --red-200:#f6c3cb;
--green:#12805c; --green-50:#e7f6f0;
--amber:#b54708; --amber-50:#fef3e8;
/* neutrals, biased blue toward the brand */
--ink:#0b1740; --slate:#5b6684; --slate-400:#8b95ad;
--line:#e4e8f2; --paper:#f5f7fb; --surface:#fff;
/* form */
--r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
--sh-1:0 1px 2px rgba(11,23,64,.05), 0 1px 3px rgba(11,23,64,.04);
--sh-2:0 6px 18px rgba(11,23,64,.08);
--sh-3:0 16px 40px rgba(11,23,64,.16);
--ring:0 0 0 4px rgba(14,147,132,.18);
--ease:cubic-bezier(.4,0,.2,1);
--font:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
:root{color-scheme:light}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--navy);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--teal)}
code{font-family:var(--mono);background:var(--navy-50);color:var(--navy-700);
padding:2px 6px;border-radius:6px;font-size:.86em}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em;margin:0}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.hidden{display:none!important}
.muted{color:var(--slate);font-size:.9rem}
.err{color:var(--red);font-weight:600}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* ---------- motion ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
}
/* ============================ APP SHELL ============================ */
body.appshell{display:flex;min-height:100vh}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.3}}
/* icons */
.ico{width:20px;height:20px;flex-shrink:0;display:block}
.sidebar{width:256px;flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;
flex-direction:column;background:#fff;border-right:1px solid var(--line)}
.side-logo{padding:24px 20px 14px;text-align:center}
.side-logo img{width:112px;height:auto}
.side-portal{display:block;margin-top:8px;font-size:.62rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--slate-400);font-weight:700}
.side-user{display:flex;align-items:center;gap:12px;margin:6px 16px 14px;padding:11px 13px;
border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line)}
.su-meta{min-width:0;line-height:1.3}
.su-meta b{display:block;font-size:.86rem;color:var(--ink);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.su-meta small{color:var(--slate-400);text-transform:capitalize;font-size:.7rem;font-weight:600}
.avatar{width:38px;height:38px;border-radius:var(--r-pill);display:flex;align-items:center;
justify-content:center;font-weight:800;color:#fff;flex-shrink:0;font-size:1rem;
background:linear-gradient(135deg,var(--navy),#2a54d4);box-shadow:0 3px 10px rgba(20,50,155,.3)}
.side-nav{display:flex;flex-direction:column;padding:6px 14px;gap:3px;flex:1;overflow-y:auto}
.side-nav a{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:var(--r-pill);
color:var(--slate);font-weight:600;font-size:.9rem;position:relative;
transition:background .18s var(--ease),color .18s var(--ease),transform .16s var(--ease)}
.side-nav a .ico{color:var(--slate-400);transition:color .18s var(--ease),transform .18s var(--ease)}
.side-nav a:hover{background:var(--teal-50);color:var(--teal-700);text-decoration:none;transform:translateX(3px)}
.side-nav a:hover .ico{color:var(--teal);transform:scale(1.1)}
.side-nav a.on{background:var(--navy-50);color:var(--navy);font-weight:700}
.side-nav a.on .ico{color:var(--navy)}
.live-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--red);margin-left:auto;
animation:pulseDot 1.8s infinite;flex-shrink:0}
.side-foot{padding:14px 16px 18px;border-top:1px solid var(--line)}
.side-logout{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px;
border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);
color:var(--slate);font-size:.86rem;font-weight:600;
transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.side-logout:hover{background:var(--red-50);color:var(--red);border-color:var(--red-200);text-decoration:none}
.appmain{flex:1;min-width:0;display:flex;flex-direction:column}
.apptop{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 32px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.apptop h1{font-size:1.45rem;font-weight:800;color:var(--ink)}
.appbody{padding:26px 32px 56px;max-width:1240px;width:100%;animation:riseIn .3s var(--ease) both}
/* ============================ CARDS / PANELS ============================ */
.panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh-1)}
.panel{padding:24px 26px;margin:0 0 20px;animation:riseIn .34s var(--ease) both}
.panel:nth-of-type(2){animation-delay:.04s}
.panel:nth-of-type(3){animation-delay:.08s}
.panel h2{font-size:1.06rem;font-weight:700;margin:0 0 16px;color:var(--ink)}
.card{padding:26px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.rowbetween{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.btnrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* stat tiles */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:16px;margin-bottom:22px}
.statcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:18px 20px;display:flex;align-items:center;gap:15px;box-shadow:var(--sh-1);
animation:riseIn .34s var(--ease) both;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.statcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--teal)}
.statcard:nth-child(2){animation-delay:.05s}.statcard:nth-child(3){animation-delay:.1s}
.statcard:nth-child(4){animation-delay:.15s}.statcard:nth-child(5){animation-delay:.2s}
.statcard b{font-size:1.85rem;font-weight:800;line-height:1;display:block;color:var(--ink);
font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.statcard span:last-child{color:var(--slate);font-size:.82rem;font-weight:500}
.s-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
font-size:1.25rem;flex-shrink:0}
.s-ico.blue{background:var(--navy-50)}.s-ico.green{background:var(--green-50)}
.s-ico.amber{background:var(--amber-50)}.s-ico.teal{background:var(--teal-50)}
.s-ico.violet{background:#efeafd}
/* quick actions — circular icon chip + label */
.quickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:13px}
.quick{display:flex;align-items:center;gap:14px;padding:15px 18px;
border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
color:var(--ink);font-weight:600;font-size:.9rem;
transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.quick:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--teal);
color:var(--teal-700);text-decoration:none}
.q-ico{width:44px;height:44px;border-radius:var(--r-pill);display:flex;align-items:center;
justify-content:center;flex-shrink:0;transition:transform .2s var(--ease)}
.q-ico .ico{width:21px;height:21px}
.quick:hover .q-ico{transform:scale(1.08)}
.q-ico.blue{background:var(--navy-50);color:var(--navy)}
.q-ico.teal{background:var(--teal-50);color:var(--teal)}
.q-ico.green{background:var(--green-50);color:var(--green)}
.q-ico.amber{background:var(--amber-50);color:var(--amber)}
.q-ico.red{background:var(--red-50);color:var(--red)}
.q-ico.violet{background:#efeafd;color:#6d43d1}
/* stat icons now hold SVG */
.s-ico .ico{width:22px;height:22px}
.s-ico.blue{color:var(--navy)}.s-ico.green{color:var(--green)}
.s-ico.amber{color:var(--amber)}.s-ico.teal{color:var(--teal)}
.s-ico.violet{color:#6d43d1}
/* greeting header */
.greet{display:flex;align-items:center;gap:13px;margin:0 0 20px}
.greet .g-ico{width:44px;height:44px;border-radius:var(--r-pill);background:var(--amber-50);
color:var(--amber);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.greet h2{font-size:1.25rem;font-weight:800;margin:0;color:var(--ink)}
.greet p{margin:2px 0 0;color:var(--slate);font-size:.88rem}
.steps{line-height:2.05;padding-left:20px;margin:0;color:var(--ink)}
/* ============================ FORMS ============================ */
input,textarea,select,button{font:inherit;color:inherit}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],
input:not([type]),textarea,select{
width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r);
background:#fff;margin:6px 0;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}
input:hover,textarea:hover,select:hover{border-color:#c6cfe4}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}
textarea{resize:vertical;line-height:1.55}
/* selects: match the text fields, force LIGHT native popup (macOS dark mode renders it dark otherwise) */
select{appearance:none;-webkit-appearance:none;color-scheme:light;background-color:#fff;color:var(--ink);
font-weight:500;cursor:pointer;padding-right:40px;
background-image:url("data:image/svg+xml;utf8, — stack the options with block children, not flex on the cell itself */
.qopts{font-size:.8rem;color:var(--slate);max-width:380px}
.qopts > span{display:block;margin-bottom:3px}
.qopts > span:last-child{margin-bottom:0}
.qopts .ansok{color:var(--green);font-weight:700}
/* NEVER set display:flex on a — it pulls the cell out of the table formatting
context, so column widths stop aligning and the buttons escape the row box. Keep the
cell a real table-cell and lay the buttons out inline instead. */
.qactions{white-space:nowrap;text-align:right}
.qactions > *{display:inline-block;vertical-align:middle}
.qactions > * + *{margin-left:5px}
.qactions form{display:inline-block;margin:0}
/* candidates table is the widest in the app — keep its row controls compact so the
table fits its panel at 1280px without a scroll wrapper (a wrapper would clip the
Group/Invigilator dropdown menus) */
.candtable .qactions .btn{padding:6px 11px;font-size:.78rem}
.candtable td,.candtable th{padding-left:7px;padding-right:7px}
.candtable .badge{padding:3px 8px;font-size:.68rem}
.ckcol{width:26px;padding-left:6px!important;padding-right:2px!important}
.ckcol input{width:15px;height:15px;margin:0;accent-color:var(--navy);cursor:pointer}
.bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
padding:11px 14px;background:var(--rail,#f2f4fa);border:1px solid var(--line);
border-radius:var(--r)}
.bulkcount{font-size:.8rem;font-weight:700;color:var(--navy);min-width:76px}
.bulkbar .btn[disabled]{opacity:.45;cursor:not-allowed}
.bulkbar .muted{font-size:.78rem}
/* inline field validation */
.fielderr{display:block;color:var(--red);font-size:.78rem;font-weight:600;margin:-2px 0 4px}
input.invalid{border-color:var(--red)!important}
input.invalid:focus{box-shadow:0 0 0 3px rgba(200,16,46,.14)!important}
/* which exam a candidate actually resolves to (shown under the Group cell) */
.examhint{display:block;font-size:.68rem;line-height:1.3;margin-top:3px;color:var(--teal);
max-width:130px;overflow-wrap:anywhere}
.examhint.dim{color:var(--slate-400)}
.examhint.bad{color:var(--red);font-weight:700}
/* long questions must stay readable: a single-line input hid all but ~80 chars */
.settings textarea.qtext{width:100%;min-height:76px;resize:vertical;line-height:1.5;
font:inherit;overflow-wrap:anywhere}
.qtext-cell{overflow-wrap:anywhere;max-width:420px}
.emailcell{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-wrap{display:flex;flex-direction:column;align-items:center;width:100%;max-width:430px}
.site-owner{max-width:430px;margin:20px auto 0;text-align:center;font-size:.8rem;
line-height:1.7;color:var(--slate-400)}
.site-owner b{color:var(--ink)}
.site-owner a{color:var(--navy)}
/* monitor bars */
.bar-wrap{display:flex;align-items:center;gap:14px;margin:12px 0}
.bar-wrap span{width:72px;font-size:.82rem;color:var(--slate);font-weight:600}
.bar{flex:1;height:12px;background:#eef1f7;border-radius:var(--r-pill);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--green);border-radius:var(--r-pill);
transition:width .5s var(--ease),background .4s var(--ease)}
/* danger zone */
.danger-zone{border:1px solid var(--red-200);background:linear-gradient(180deg,#fffafb,#fff5f6);
border-radius:var(--r-lg);padding:22px 24px}
.danger-zone h2{color:var(--red)}
.danger-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
padding:14px 0;border-bottom:1px solid #fbdde2}
.danger-row:last-child{border-bottom:0}
/* ============================ LIVE PROCTORING ============================ */
.live-layout{display:grid;grid-template-columns:1fr 430px;gap:20px;align-items:start}
.livegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:13px}
.tile{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
background:#fff;box-shadow:var(--sh-1);
transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.tile:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:var(--teal)}
.tile.off{opacity:.6}
.tile.hasmsg{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-50)}
.thumbwrap{aspect-ratio:4/3;background:var(--navy-900);display:flex;align-items:center;justify-content:center}
.thumb{width:100%;height:100%;object-fit:cover}
.thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
color:#7f8db5;font-size:.78rem;font-weight:600}
.tinfo{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 11px;font-size:.8rem}
.tinfo b{flex:1;min-width:60px;font-weight:700}
.flag{color:var(--amber);font-weight:800}
.dot{width:9px;height:9px;border-radius:var(--r-pill)}
.dot.g{background:var(--green);box-shadow:0 0 0 3px var(--green-50)}
.dot.r{background:var(--slate-400)}
.detail-card{position:sticky;top:92px}
.feeds{display:grid;gap:12px}
.feeds figure{margin:0}
.feeds figcaption{font-size:.7rem;color:var(--slate-400);margin-bottom:5px;text-transform:uppercase;
letter-spacing:.09em;font-weight:800}
.feed{width:100%;border-radius:var(--r);background:var(--navy-900);aspect-ratio:4/3;object-fit:cover}
.feed.screen{aspect-ratio:16/10}
.talkrow{display:flex;align-items:center;gap:10px;margin:14px 0;flex-wrap:wrap}
.btn.talk{background:var(--teal);user-select:none;box-shadow:0 2px 8px rgba(14,147,132,.25)}
.btn.talk:hover{background:var(--teal-700)}
.btn.talk.recording{background:var(--red);animation:pulseDot 1s infinite}
.chatbox{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.chatlog{height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px}
.msg{max-width:85%;padding:9px 13px;border-radius:14px;font-size:.87rem;line-height:1.4}
.msg .who{display:block;font-size:.64rem;opacity:.65;margin-bottom:2px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em}
.msg.me{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.msg.them{align-self:flex-start;background:#eef1f7;border-bottom-left-radius:4px}
.chatform{display:flex;gap:9px;margin-top:10px}
.chatform input{margin:0}
.flags{columns:2;list-style:none;padding:0;margin:0}
.flags li{padding:4px 0;font-size:.88rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:9px}
.gallery img{width:100%;border-radius:var(--r);border:1px solid var(--line);
transition:transform .2s var(--ease)}
.gallery img:hover{transform:scale(1.05)}
.clips{display:flex;gap:13px;flex-wrap:wrap}
.clips video{max-width:100%;width:430px;border-radius:var(--r);background:#000}
/* ============================ LOGIN ============================ */
.loginbg{position:relative;overflow:hidden;
background:radial-gradient(1000px 560px at 50% -10%,#e9eefc 0%,transparent 62%),var(--paper)}
.blob{position:absolute;border-radius:var(--r-pill);filter:blur(2px);opacity:.5;pointer-events:none;
animation:floaty 14s ease-in-out infinite}
.b1{width:340px;height:80px;background:linear-gradient(90deg,var(--navy),#5b7ce8);
top:16%;left:-90px;transform:rotate(-18deg)}
.b2{width:260px;height:64px;background:linear-gradient(90deg,var(--teal),#7fd8cd);
bottom:18%;right:-70px;transform:rotate(-18deg);animation-delay:-5s}
.b3{width:180px;height:52px;background:linear-gradient(90deg,#f2a0ac,var(--red));
bottom:8%;left:12%;transform:rotate(-18deg);opacity:.32;animation-delay:-9s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-18deg)}50%{transform:translateY(-16px) rotate(-18deg)}}
.logincard{max-width:412px;width:100%;position:relative;z-index:1;padding:36px 34px;
border-radius:24px;box-shadow:var(--sh-3);animation:riseIn .45s var(--ease) both}
.logincard h1{font-size:1.5rem;font-weight:800;color:var(--navy);text-align:center;margin:0 0 2px}
.logincard .exam-sub{margin-bottom:22px}
.fieldwrap{position:relative;display:block;margin:12px 0}
.fieldwrap .fi{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--slate-400);
pointer-events:none;transition:color .18s var(--ease);display:flex}
.fieldwrap .fi .ico{width:18px;height:18px}
.fieldwrap input{margin:0;padding:14px 16px 14px 46px;border-radius:var(--r-pill);background:var(--paper)}
.fieldwrap input:focus{background:#fff}
.fieldwrap:focus-within .fi{color:var(--teal)}
.logincard button{width:100%;margin-top:8px;padding:14px;font-size:.98rem}
.loginfoot{text-align:center;margin:18px 0 0;font-size:.82rem;line-height:1.6}
/* ============================ BRANDING ============================ */
.brand-logo{width:124px;height:auto;display:block;margin:0 auto 14px}
.nav-logo,.bar-logo{height:22px;width:auto;background:#fff;padding:3px 6px;border-radius:var(--r-sm)}
/* ============================ CANDIDATE — INTRO / CONSENT ============================ */
#preexam,#detailsBox{background:
radial-gradient(1100px 520px at 50% -10%,#e8edfb 0%,transparent 60%),var(--paper)}
.exam-intro{max-width:720px;width:100%;animation:riseIn .4s var(--ease) both}
.exam-intro h1{font-size:1.6rem;font-weight:800;color:var(--navy);text-align:center;margin:0 0 4px}
.exam-sub{text-align:center;color:var(--slate);font-size:.94rem;margin:0 0 20px}
.consent{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:18px 0}
.consent-head{background:var(--navy-50);padding:12px 18px;font-weight:800;font-size:.82rem;
color:var(--navy-700);text-transform:uppercase;letter-spacing:.09em;
border-bottom:1px solid var(--line)}
.consent-body{padding:24px 26px;max-height:none;font-size:1rem;line-height:1.85;color:#33405c}
.consent-body p{margin:0 0 20px}
.consent-body p:last-child{margin-bottom:0}
.consent-list{list-style:none;padding:0;margin:4px 0 22px;display:flex;flex-direction:column;gap:14px}
.consent-list li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-lg);
background:#fbfcff;border:1px solid var(--line)}
.consent-list .ci{font-size:1.05rem;line-height:1.3}
.consent-list b{display:block;color:var(--ink);font-size:1rem;margin-bottom:5px}
.consent-list span.d{color:var(--slate);font-size:.94rem;line-height:1.7}
.legal-note{font-size:.94rem;color:var(--slate);border-left:3px solid var(--teal);
padding:6px 0 6px 16px;margin:4px 0 0;line-height:1.75}
.agree-box{display:flex;gap:12px;align-items:flex-start;padding:15px;border-radius:var(--r);
border:1.5px solid var(--line);background:#fbfcff;margin:16px 0 14px;cursor:pointer;
transition:border-color .18s var(--ease),background .18s var(--ease)}
.agree-box:hover{border-color:var(--teal);background:var(--teal-50)}
.agree-box input{margin:2px 0 0;flex-shrink:0}
.agree-box label,.agree-box span{font-size:.98rem;line-height:1.7;font-weight:500;cursor:pointer}
#startBtn{width:100%;padding:15px;font-size:1rem;border-radius:var(--r)}
#startMsg{text-align:center;margin:12px 0 0;min-height:20px}
#detailsBox .exam-intro label{display:block;margin:12px 0;font-weight:600}
/* ============================ CANDIDATE — EXAM ============================ */
.exam-wrap{display:grid;grid-template-columns:1fr 236px;gap:22px;max-width:1080px;
margin:86px auto 48px;padding:0 20px;animation:riseIn .3s var(--ease) both}
.qcard{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:30px 34px;box-shadow:var(--sh-2)}
.qmeta{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
padding-bottom:14px;border-bottom:1px solid var(--line)}
.qmeta .sec{color:var(--teal-700);font-weight:800;font-size:.72rem;text-transform:uppercase;
letter-spacing:.1em}
.qmeta .qcount{color:var(--slate);font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums}
.qcard .qtext{font-size:1.28rem;font-weight:600;line-height:1.5;margin:0 0 24px;color:var(--ink);
letter-spacing:-.01em}
.qcard .opts{display:flex;flex-direction:column;gap:11px}
.qcard .opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid var(--line);
border-radius:var(--r);cursor:pointer;font-size:1.03rem;line-height:1.45;color:var(--ink);
background:#fff;transition:background .15s var(--ease),border-color .15s var(--ease),transform .12s var(--ease)}
.qcard .opt:hover{background:var(--teal-50);border-color:var(--teal);transform:translateX(3px)}
.qcard .opt:has(input:checked){background:var(--navy-50);border-color:var(--navy);font-weight:600;
box-shadow:inset 0 0 0 1px var(--navy)}
.qcard .opt input{width:19px;height:19px;margin:0;accent-color:var(--navy);flex-shrink:0;cursor:pointer}
.qfoot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;
padding-top:20px;border-top:1px solid var(--line);gap:12px}
.qwarn{color:var(--amber);font-size:.84rem;font-weight:600}
.btn-skip{background:#fff;color:var(--red);border:1.5px solid var(--red-200);box-shadow:none}
.btn-skip:hover{background:var(--red-50);color:var(--red);border-color:var(--red)}
#nextBtn{padding:13px 30px;font-size:.98rem}
/* question palette */
.palette{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:18px;position:sticky;top:78px;height:max-content;box-shadow:var(--sh-1)}
.palette h3{margin:0 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;
color:var(--slate-400);font-weight:800}
.palette .legend{display:flex;gap:10px;font-size:.68rem;color:var(--slate);margin-bottom:14px;flex-wrap:wrap}
.palette .legend i{width:11px;height:11px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:4px}
.leg-ans{background:var(--green)}.leg-skip{background:var(--red-200)}.leg-cur{background:var(--navy)}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.pnum{aspect-ratio:1;border:1.5px solid var(--line);border-radius:var(--r-sm);display:flex;
align-items:center;justify-content:center;font-size:.8rem;font-weight:700;cursor:pointer;
background:#fff;color:var(--slate);position:relative;font-variant-numeric:tabular-nums;
transition:transform .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease)}
.pnum:hover{border-color:var(--teal);transform:scale(1.09)}
.pnum.answered{background:var(--green);color:#fff;border-color:var(--green)}
.pnum.answered::after{content:"✓";position:absolute;top:-5px;right:-5px;background:#fff;color:var(--green);
border-radius:var(--r-pill);font-size:.55rem;width:15px;height:15px;display:flex;align-items:center;
justify-content:center;border:1.5px solid var(--green);font-weight:900}
.pnum.skipped{background:var(--red-50);color:var(--red);border-color:var(--red-200)}
.pnum.current{outline:3px solid var(--navy);outline-offset:2px;color:var(--navy)}
.palette .p-actions{margin-top:16px;display:flex;flex-direction:column;gap:10px}
#submitBtn{width:100%}
/* proctor bar */
#proctorbar{position:fixed;top:0;left:0;right:0;height:52px;z-index:50;font-size:.84rem;
display:flex;align-items:center;gap:14px;padding:0 18px;color:#fff;
background:linear-gradient(90deg,var(--navy-900),#152560);
box-shadow:0 2px 14px rgba(11,23,64,.3)}
#proctorbar .tlabel{color:#8b98bd;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;
margin-left:8px;font-weight:800}
#pb-timer{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
#pb-timer.low{color:#ff9d9d;animation:pulseDot 1s infinite}
#pb-qtimer{font-size:1.02rem;font-weight:800;font-variant-numeric:tabular-nums;color:#ffd88a}
#pb-qtimer.low{color:#ff9d9d;animation:pulseDot 1s infinite}
.pb-on,.pb-off{font-weight:600;font-size:.76rem}
.pb-on{color:#6ee7c4}.pb-off{color:#ff9d9d}
.pb-on::before,.pb-off::before{content:"● "}
#proctorbar #camPreview{margin-left:auto;height:40px;border-radius:var(--r-sm);background:#000;
border:1px solid rgba(255,255,255,.16)}
/* candidate chat widget */
.cc-toggle{position:fixed;bottom:20px;right:20px;z-index:60;border-radius:var(--r-pill);
padding:13px 20px;box-shadow:var(--sh-3)}
.cc-toggle.ping{animation:pulseDot .9s infinite;background:var(--red)}
.candchat{position:fixed;bottom:20px;right:20px;z-index:61;width:330px;background:#fff;
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;
animation:riseIn .25s var(--ease) both}
.cc-head{background:var(--navy-900);color:#fff;padding:12px 15px;font-weight:700;font-size:.9rem;
display:flex;justify-content:space-between;align-items:center}
.cc-head button{background:transparent;padding:0 6px;font-size:1.2rem;box-shadow:none}
.cc-head button:hover{background:transparent;color:var(--teal);transform:none}
.candchat .chatlog{height:250px}
#cc-form{display:flex;gap:7px;padding:10px}
#cc-form input{margin:0}
/* overlay */
.overlay{position:fixed;inset:0;background:rgba(10,19,48,.94);display:flex;align-items:center;
justify-content:center;z-index:100;padding:20px;animation:fadeIn .2s var(--ease) both;
backdrop-filter:blur(4px)}
.overlay .card{max-width:440px;text-align:center;animation:riseIn .3s var(--ease) both}
.overlay .card h2{color:var(--ink);margin-bottom:10px;font-size:1.2rem}
.overlay .card button{margin-top:14px;width:100%}
.instructions{background:var(--navy-50);border:1px solid #cdd7f3;border-radius:var(--r);
padding:14px 16px;margin:8px 0 16px}
.instructions b{color:var(--navy-700);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.instructions p{margin:7px 0 0;font-size:.92rem;color:#33405c;line-height:1.6}
.rules{line-height:2.2;padding-left:22px;font-size:1rem;color:#33405c}
.rules li{margin-bottom:6px}
/* ============================ RESPONSIVE ============================ */
@media(max-width:1080px){.live-layout{grid-template-columns:1fr}.detail-card{position:static}}
@media(max-width:900px){
.cols2,.settings{grid-template-columns:1fr}
.sidebar{width:66px}
.side-nav a{font-size:0;justify-content:center;padding:12px 0}
.side-nav a span{font-size:1.06rem}
.side-portal,.side-user span,.side-logout{font-size:0}
.side-logo img{width:42px;padding:5px}
.appbody,.apptop{padding-left:18px;padding-right:18px}
}
@media(max-width:820px){.exam-wrap{grid-template-columns:1fr;margin-top:74px}
.palette{position:static}.pgrid{grid-template-columns:repeat(10,1fr)}}
.consent-list .ci{width:34px;height:34px;border-radius:var(--r-pill);background:var(--navy-50);
color:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.consent-list .ci .ico{width:17px;height:17px}
/* candidate mic indicator — must be visible whenever an invigilator is listening */
#pb-mic{font-weight:700;font-size:.76rem;color:#ff9d9d;display:none;align-items:center;gap:5px}
#pb-mic.on{display:inline-flex;animation:pulseDot 1.2s infinite}
#pb-mic::before{content:"";width:7px;height:7px;border-radius:999px;background:#ff5c5c;display:inline-block}
.btn.listen.on{background:var(--red)}
.rules-head{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
color:var(--slate-400);font-weight:800;margin:22px 0 6px}
/* nested bold inside a description must stay inline (was inheriting display:block) */
.consent-list .d b{display:inline;font-size:inherit;margin:0;color:var(--ink)}
/* ============================ CUSTOM DROPDOWN ============================
Native popups are OS-drawn (dark on macOS dark mode) and unstylable,
so select.js renders this menu instead. The real stays hidden underneath. */
.vsel{position:relative;display:block;width:100%;margin:6px 0}
.vsel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0}
.vsel-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
color:var(--ink);font-weight:500;font-size:1rem;text-align:left;cursor:pointer;box-shadow:none;
transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.vsel-btn:hover{background:#fff;color:var(--ink);border-color:#c6cfe4;transform:none;box-shadow:none}
.vsel-btn::after{content:"";width:9px;height:9px;flex-shrink:0;border-right:2px solid var(--slate);
border-bottom:2px solid var(--slate);transform:rotate(45deg) translate(-2px,-2px);
transition:transform .2s var(--ease),border-color .2s var(--ease)}
.vsel.open .vsel-btn{border-color:var(--teal);box-shadow:var(--ring)}
.vsel.open .vsel-btn::after{transform:rotate(-135deg) translate(-3px,-3px);border-color:var(--teal)}
.vsel-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vsel-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;display:none;
background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);
padding:6px;max-height:260px;overflow-y:auto;animation:riseIn .14s var(--ease) both}
.vsel-menu.up{top:auto;bottom:calc(100% + 6px)}
.vsel.open .vsel-menu{display:block}
.vsel-item{padding:10px 12px;border-radius:var(--r-sm);font-size:.94rem;color:var(--ink);cursor:pointer;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s var(--ease),color .12s var(--ease)}
.vsel-item:hover{background:var(--teal-50);color:var(--teal-700)}
.vsel-item.on{background:var(--navy-50);color:var(--navy);font-weight:700}
.vsel-item.on::after{content:"✓";float:right;font-weight:900}
/* compact variant inside tables */
.inline-select .vsel{width:auto;min-width:118px;margin:0}
.inline-select .vsel-btn{padding:7px 10px;font-size:.82rem;border-radius:var(--r-pill)}
.bulkbar .vsel{width:auto;min-width:190px;margin:0}
.filterbar .vsel{width:auto;min-width:170px;margin:0}