/* ===== Check-in siswa, kuis, review, monitoring ===== */

/* ---------- gerbang check-in ---------- */
.gate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(900px 600px at 50% 30%,rgba(30,62,122,.85),rgba(6,13,31,.97));backdrop-filter:blur(6px);transition:opacity .5s}
.gate[hidden]{display:none}
.gate.bye{opacity:0}
.gate-card{position:relative;width:min(460px,100%);display:flex;flex-direction:column;gap:14px;padding:84px 30px 30px;border-radius:26px;background:var(--panel);border:1px solid rgba(124,196,240,.3);box-shadow:0 40px 90px -30px rgba(0,0,0,.9);animation:aZoom .7s var(--ease) both}
.gate-char{position:absolute;left:50%;top:-70px;width:140px;transform:translateX(-50%);filter:drop-shadow(0 16px 24px rgba(0,0,0,.6));animation:hop 1s cubic-bezier(.3,1.6,.5,1) .5s both}
.gate-card .eyebrow{font-size:13px;justify-content:center}
.gate-card .eyebrow::after{display:none}
.gate-card h2{margin:0;text-align:center;font:900 42px/1 var(--disp);text-transform:uppercase}
.gate-card h2 em{font-style:normal;color:var(--gold)}
.gate-card>p{margin:0;text-align:center;font-size:15px;line-height:1.5;color:var(--muted)}
.gate-card label{display:flex;flex-direction:column;gap:6px;font:600 12px var(--mono);letter-spacing:.12em;color:var(--sky);text-transform:uppercase}
.gate-card label small{font:500 11px var(--mono);letter-spacing:.04em;color:var(--muted);text-transform:none}
.gate-card input{min-height:48px;border-radius:12px;border:1px solid rgba(234,240,250,.2);background:var(--night);color:var(--text);padding:0 14px;font:16px var(--body);letter-spacing:normal;text-transform:none}
.gate-card input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(233,185,73,.18)}
.gate-card input[readonly]{color:var(--soft);background:rgba(6,13,31,.5)}
.gate-err{min-height:18px;margin:0;color:#FF9A8A;font-size:14px;text-align:center}
.gate-btn{min-height:50px;border:0;border-radius:999px;background:var(--gold);color:var(--navy);font:700 16px var(--body);cursor:pointer}
.gate-btn[disabled]{opacity:.6;cursor:wait}

.who{position:fixed;top:66px;right:22px;z-index:21;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:999px;background:rgba(11,22,48,.85);border:1px solid rgba(124,196,240,.3);backdrop-filter:blur(8px);font:500 13px var(--mono);color:var(--soft);transition:opacity .4s}
.who[hidden]{display:none}
.who b{color:var(--gold)}
.who a{color:var(--sky);text-decoration:none}
.who button{border:1px solid rgba(234,240,250,.25);background:transparent;color:var(--text);border-radius:999px;padding:5px 12px;font:600 12px var(--mono);cursor:pointer}
.hud-top.idle ~ .who{opacity:0}
.who.who-ic{padding:0;background:none;border:none;backdrop-filter:none;display:block}
.who.who-ic[hidden]{display:none}
.who .who-btn{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%;background:rgba(11,22,48,.88);border:1px solid rgba(124,196,240,.35);color:var(--text);backdrop-filter:blur(8px);cursor:pointer;transition:border-color .2s,color .2s}
.who .who-btn:hover,.who .who-btn[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
.who.is-staff .who-btn{border-color:var(--gold);color:var(--gold)}
.who.is-staff .who-btn::after{content:'';position:absolute;right:1px;top:1px;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--navy)}
.who .who-menu{position:absolute;right:0;top:52px;min-width:230px;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px;border-radius:16px;background:rgba(11,22,48,.96);border:1px solid rgba(124,196,240,.3);box-shadow:0 20px 40px -20px #000;font:500 13px var(--mono);color:var(--soft)}
.who .who-menu[hidden]{display:none}
.who .who-menu button{padding:9px 12px;text-align:center}
.who .who-menu button:hover{border-color:var(--gold);color:var(--gold)}
@media (max-height:560px){.who{top:auto;bottom:50px}}

/* ---------- kuis ---------- */
.quiz-slide{display:flex;flex-direction:column}
.qz-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.qz-steps{display:flex;gap:10px;padding-bottom:10px}
.qz-step{min-width:52px;height:52px;padding:0 14px;border-radius:14px;border:2px solid rgba(234,240,250,.2);background:rgba(15,29,61,.9);color:var(--soft);font:700 20px var(--mono);cursor:pointer;transition:all .25s}
.qz-step[disabled]{opacity:.35;cursor:default}
.qz-step.ok{border-color:var(--mint);color:var(--mint)}
.qz-step.bad{border-color:var(--rose);color:var(--rose)}
.qz-step.cur{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.qz-step.res{font-size:15px;letter-spacing:.08em}
.qz-body{flex:1;margin-top:26px;min-height:0}
.qz-wait{font:500 18px var(--mono);color:var(--muted)}
.qz-note{padding:30px;border-radius:22px;border:1px dashed rgba(124,196,240,.35);background:rgba(15,29,61,.6)}
.qz-note b{display:block;font:800 32px var(--disp);text-transform:uppercase;margin-bottom:6px}
.qz-note p{margin:0;font-size:20px;color:var(--soft)}
.qz-card{max-width:1400px;padding:34px 40px;border-radius:26px;background:linear-gradient(160deg,rgba(20,39,82,.95),rgba(11,22,48,.95));border:1px solid rgba(124,196,240,.25);animation:aUp .5s var(--ease) both}
.qz-n{font:600 16px var(--mono);letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.qz-card h3{margin:12px 0 24px;font:600 34px/1.3 var(--body)}
.qz-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qz-o{display:flex;align-items:center;gap:18px;min-height:86px;padding:14px 22px;border-radius:18px;border:2px solid rgba(234,240,250,.16);background:rgba(6,13,31,.5);color:var(--text);font:500 23px/1.35 var(--body);text-align:left;cursor:pointer;transition:border-color .25s,background .25s,transform .25s}
.qz-o:hover:not([disabled]){border-color:var(--gold);transform:translateY(-3px)}
.qz-o[disabled]{cursor:default}
.qz-l{width:46px;height:46px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(124,196,240,.14);color:var(--sky);font:800 24px var(--disp)}
.qz-o.sending{border-color:var(--gold);animation:blink .8s infinite}
.qz-o.right{border-color:var(--mint);background:rgba(91,227,168,.12)}
.qz-o.right .qz-l{background:var(--mint);color:var(--navy)}
.qz-o.wrong{border-color:var(--rose);background:rgba(255,138,122,.12)}
.qz-o.wrong .qz-l{background:var(--rose);color:var(--navy)}
.qz-o[disabled]:not(.right):not(.wrong){opacity:.45}
.qz-exp{margin-top:20px;padding:16px 22px;border-radius:16px;background:rgba(124,196,240,.08);border:1px solid rgba(124,196,240,.25);font-size:21px;line-height:1.5;color:var(--soft);animation:aUp .4s var(--ease) both}
.qz-exp[hidden]{display:none}
.qz-exp b.ok{color:var(--mint)}.qz-exp b.bad{color:var(--rose)}
.qz-nav{display:flex;justify-content:flex-end;margin-top:18px}
.qz-next{min-height:56px;padding:0 28px;border:0;border-radius:999px;background:var(--gold);color:var(--navy);font:700 19px var(--body);cursor:pointer}
.qz-next[hidden]{display:none}
.qz-next.ghost{background:transparent;border:1px solid rgba(234,240,250,.35);color:var(--text)}
.qz-next[disabled]{opacity:.5}
.qz-guide{position:absolute!important;right:110px;bottom:70px;max-width:560px}
.qz-guide img{width:110px}
.qz-guide .bubble{font-size:18px}
.qz-result{display:flex;gap:46px;align-items:flex-start;animation:aUp .5s var(--ease) both}
.qz-score{--p:0;width:300px;height:300px;flex:none;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(closest-side,#0B1630 78%,transparent 79%),conic-gradient(var(--gold) calc(var(--p) * 1%),rgba(234,240,250,.1) 0)}
.qz-score b{font:900 120px/1 var(--disp);color:var(--gold)}
.qz-score span{font:600 17px var(--mono);color:var(--soft)}
.qz-res-r{flex:1;max-width:1040px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.qz-res-r h3{margin:0;font:800 40px/1.1 var(--disp);text-transform:uppercase}
.qz-rev{margin:0;padding-left:28px;display:flex;flex-direction:column;gap:8px}
.qz-rev li{font-size:18px;line-height:1.35;color:var(--soft)}
.qz-rev li b{display:block;color:var(--text);font-weight:600}
.qz-rev li.ok::marker{color:var(--mint)}.qz-rev li.bad::marker{color:var(--rose)}
.qz-rev li.ok span{color:var(--mint)}.qz-rev li.bad span{color:#FFB3A8}

/* ---------- monitoring di slide (admin) ---------- */
.mon{display:flex;flex-direction:column;gap:18px}
.mon-stats{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mon-stats>div{display:flex;align-items:baseline;gap:10px;padding:12px 20px;border-radius:16px;background:rgba(15,29,61,.9);border:1px solid var(--line)}
.mon-stats b{font:900 44px/1 var(--disp);color:var(--gold)}
.mon-stats span{font:500 15px var(--mono);color:var(--soft)}
.mon-btn{display:inline-flex;align-items:center;min-height:50px;padding:0 22px;border-radius:999px;border:0;background:var(--gold);color:var(--navy);font:700 16px var(--body);text-decoration:none;cursor:pointer}
.mon-btn.ghost{background:transparent;border:1px solid rgba(234,240,250,.35);color:var(--text)!important}
.mon-stats .mon-btn:first-of-type{margin-left:auto}
.mon-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:600px;overflow:auto;padding-right:6px}
.mr{display:grid;grid-template-columns:16px minmax(0,1fr) 96px 170px 110px 64px;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:rgba(15,29,61,.9);border:1px solid var(--line);animation:aUp .4s var(--ease) both}
.mr.done{border-color:rgba(91,227,168,.35)}
.dot{width:12px;height:12px;border-radius:50%;background:#3a4a6c}
.dot.on{background:var(--mint);box-shadow:0 0 10px var(--mint)}
.mr-n{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-id{font:500 14px var(--mono);color:var(--muted)}
.mr-bar{position:relative;height:26px;border-radius:999px;background:rgba(234,240,250,.08);overflow:hidden}
.mr-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--sky),var(--gold));transition:width .6s var(--ease)}
.mr-bar em{position:relative;display:block;text-align:center;font:700 14px/26px var(--mono);font-style:normal;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.mr-marks{display:flex;gap:5px}
.mr-marks i{width:16px;height:16px;border-radius:4px;background:rgba(234,240,250,.12)}
.mr-marks i.ok{background:var(--mint)}.mr-marks i.bad{background:var(--rose)}
.mr-score{font:900 34px/1 var(--disp);text-align:right;color:var(--muted)}
.mr-score.hi{color:var(--mint)}.mr-score.mid{color:var(--gold)}.mr-score.lo{color:var(--rose)}
.mon-keys{display:flex;flex-direction:column;gap:10px;max-height:620px;overflow:auto}
.mk{display:grid;grid-template-columns:48px 1fr 130px;gap:16px;align-items:center;padding:14px 18px;border-radius:14px;background:rgba(15,29,61,.9);border:1px solid var(--line)}
.mk-n{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--gold);color:var(--navy);font:800 22px var(--disp)}
.mk b{font-size:19px}
.mk p{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:16px;color:var(--muted)}
.mk p .key{color:var(--mint);font-weight:700}
.mk-p{font:700 18px var(--mono);color:var(--mint);text-align:right}
.mk-p.low{color:var(--rose)}

/* ---------- review ---------- */
.rv-body{margin-top:30px}
.rv-form{display:grid;grid-template-columns:1fr 560px;gap:40px;align-items:start}
.rv-grid{display:flex;flex-direction:column;gap:12px}
.rv-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 22px;border-radius:16px;background:rgba(15,29,61,.9);border:1px solid var(--line);font-size:23px}
.stars{display:flex;gap:6px}
.star{width:52px;height:52px;border:0;border-radius:12px;background:transparent;color:rgba(234,240,250,.2);font-size:40px;line-height:1;cursor:pointer;transition:transform .2s,color .2s}
.star:hover{transform:scale(1.15)}
.star.on{color:var(--gold);text-shadow:0 0 16px rgba(233,185,73,.6)}
.rv-side{display:flex;flex-direction:column;gap:14px}
.rv-ta{min-height:230px;border-radius:16px;border:1px solid rgba(234,240,250,.2);background:var(--night);color:var(--text);padding:16px;font:19px/1.5 var(--body);resize:none}
.rv-ta:focus{outline:none;border-color:var(--gold)}
.rv-thanks{display:flex;align-items:center;gap:30px;animation:aUp .5s var(--ease) both}
.rv-thanks img{width:220px;animation:hop 1s cubic-bezier(.3,1.6,.5,1) both}
.rv-thanks h3{margin:0 0 10px;font:900 56px/1 var(--disp);text-transform:uppercase;color:var(--gold)}
.rv-thanks p{margin:0 0 20px;font-size:24px;color:var(--soft)}
.rv-admin{display:grid;grid-template-columns:260px 1fr 1fr;gap:36px;align-items:start}
.rv-overall{display:flex;flex-direction:column;align-items:center;padding:30px;border-radius:22px;background:rgba(15,29,61,.9);border:1px solid rgba(233,185,73,.4)}
.rv-overall b{font:900 110px/1 var(--disp);color:var(--gold)}
.rv-overall span{font:600 15px var(--mono);color:var(--soft)}
.rv-overall small{margin-top:8px;font:500 14px var(--mono);color:var(--muted)}
.rv-bars{display:flex;flex-direction:column;gap:14px}
.rb{display:grid;grid-template-columns:1fr 60px;grid-template-rows:auto 14px;gap:6px 12px;font-size:19px;color:var(--soft)}
.rb i{grid-column:1;display:block;height:14px;border-radius:999px;background:rgba(234,240,250,.08);overflow:hidden}
.rb u{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--gold));transition:width .6s}
.rb b{grid-row:1 / 3;grid-column:2;align-self:center;font:800 30px var(--disp);color:var(--gold);text-align:right}
.rv-com{display:flex;flex-direction:column;gap:12px;max-height:560px;overflow:auto}
.rv-com blockquote{margin:0;padding:14px 18px;border-radius:14px;background:rgba(15,29,61,.9);border-left:4px solid var(--gold)}
.rv-com p{margin:0;font-size:18px;line-height:1.45;color:var(--text)}
.rv-com cite{display:block;margin-top:6px;font:500 13px var(--mono);font-style:normal;color:var(--muted)}
.qz-guide{right:56px;bottom:64px;max-width:370px;pointer-events:none}
.qz-guide .bubble{font-size:16px;pointer-events:auto}
.qz-guide img{width:96px}

/* kuis wajib — kunci slide berikutnya */
.lock-toast{position:fixed;left:50%;bottom:92px;z-index:60;display:flex;align-items:center;gap:12px;max-width:min(92vw,720px);padding:14px 22px;border-radius:16px;background:rgba(11,22,48,.97);border:1px solid rgba(233,185,73,.6);color:var(--text);font:500 16px/1.45 var(--body);box-shadow:0 18px 40px rgba(0,0,0,.5);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.lock-toast.on{opacity:1;transform:translate(-50%,0)}
.lock-toast svg{flex:none;color:var(--gold)}
.lock-toast b{color:var(--gold-hi)}
.ib.is-locked{border-color:rgba(233,185,73,.6);color:var(--gold);position:relative}
.ib.is-locked::after{content:'🔒';position:absolute;right:-6px;top:-8px;font-size:12px}
@media (max-height:560px){.who .who-menu{top:auto;bottom:52px}}

/* ---------- ekspor PDF (instruktur) ---------- */
.who .who-menu .who-pdf{border-color:rgba(233,185,73,.6);color:var(--gold)}
.pdf-ov{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(6,13,31,.88);backdrop-filter:blur(6px)}
.pdf-ov[hidden]{display:none}
.pdf-ov-card{width:min(440px,90vw);display:flex;flex-direction:column;gap:12px;padding:26px 28px;border-radius:20px;background:#0F1D3D;border:1px solid rgba(233,185,73,.5);color:var(--text);font:500 15px var(--body)}
.pdf-ov-card b{font:800 26px var(--disp);text-transform:uppercase;color:var(--gold)}
.pdf-ov-card i{height:8px;border-radius:8px;background:rgba(124,196,240,.2);overflow:hidden}
.pdf-ov-card u{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
.pdf-ov-card span{font:600 14px var(--mono);color:var(--soft)}
.pdf-ov-card small{color:var(--muted);line-height:1.5}
.pdf-key{display:none}
.pdf-mode *,.pdf-mode *::before,.pdf-mode *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
.pdf-mode .quiz-slide>:not(.qz-head):not(.slide-foot):not(.pdf-key){display:none!important}
.pdf-mode .quiz-slide .qz-steps{display:none!important}
.pdf-mode .pdf-key{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin-top:26px}
.pdf-q{padding:16px 20px;border-radius:16px;background:rgba(15,29,61,.85);border:1px solid rgba(124,196,240,.2)}
.pdf-q p{margin:0 0 8px;font-size:19px;line-height:1.35;color:var(--text)}
.pdf-q b{color:var(--gold)}
.pdf-q ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.pdf-q li{font-size:15px;line-height:1.3;color:var(--soft);display:flex;gap:8px}
.pdf-q li span{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font:700 12px var(--mono);background:rgba(124,196,240,.15);color:var(--sky)}
.pdf-q li.ok{color:var(--mint);font-weight:700}
.pdf-q li.ok span{background:var(--mint);color:var(--navy)}
.pdf-q small{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--muted)}
@media print{
  @page{size:1920px 1080px;margin:0}
  html,body{width:1920px!important;height:auto!important;overflow:visible!important;background:#091329!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hud,.progress,.who,.buddy,.hint,.rotate,.overview,.gate,.pdf-ov,#lockToast,.lock-toast{display:none!important}
  .viewport{position:static!important;display:block!important;background:none!important}
  .stage{transform:none!important;width:1920px!important;height:auto!important;overflow:visible!important;border-radius:0!important;box-shadow:none!important}
  .track{position:static!important;transform:none!important;display:block!important;height:auto!important}
  .slide{break-after:page;page-break-after:always;break-inside:avoid}
  .slide:last-child{break-after:auto;page-break-after:auto}
}

/* PDF key: many questions */
.pdf-key.dense{grid-template-columns:repeat(3,1fr);gap:10px 18px;margin-top:16px}
.pdf-key.dense .pdf-q{padding:10px 14px}
.pdf-key.dense .pdf-q p{font-size:15px;margin-bottom:6px}
.pdf-key.dense .pdf-q ol{grid-template-columns:1fr;gap:2px}
.pdf-key.dense .pdf-q li{font-size:13px}
.pdf-key.dense .pdf-q li span{width:18px;height:18px;font-size:10px}
.pdf-key.dense .pdf-q small{font-size:12px;margin-top:5px}

.srv-warn{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:900;max-width:min(900px,92vw);padding:12px 18px;border-radius:14px;background:#3a1420;border:1px solid #FF8A7A;color:#fff;font:500 15px/1.45 var(--body);box-shadow:0 20px 50px -20px #000;display:flex;flex-direction:column;gap:4px}
.srv-warn b{font:800 15px var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#FF8A7A}
.pdf-mode .srv-warn{display:none}