:root{--pri:#1565c0;--pri2:#0d47a1;--gold:#ffc107;--ok:#2e7d32;--bad:#c62828;--ink:#14213d;--bg:#eef5ff;--card:#fff;--line:#cfe0f7}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font-family:"Mitr","Sarabun","Tahoma",system-ui,sans-serif;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.hidden{display:none!important}
.muted{color:#64748b;font-size:1rem}

.bar{background:linear-gradient(135deg,var(--pri2),var(--pri));color:#fff;display:flex;justify-content:space-between;align-items:center;padding:8px 18px;gap:12px;flex:0 0 auto}
.bar-title{font-size:clamp(1.1rem,2.4vw,1.8rem);font-weight:600}
.bar-title small{font-weight:300;font-size:.7em;opacity:.9;margin-left:8px}
.bar-right{display:flex;align-items:center;gap:10px;font-size:clamp(1.1rem,2.2vw,1.7rem)}
.icon-btn{font-size:1.2rem;background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:12px;padding:6px 12px;cursor:pointer}

.screen{display:none;flex:1;min-height:0;padding:14px;overflow:auto}
.screen.on{display:block}
.screen.center.on{display:flex;align-items:center;justify-content:center}
.panel{background:var(--card);border:3px solid var(--line);border-radius:24px;padding:22px;max-width:920px;margin:0 auto;box-shadow:0 8px 28px rgba(21,101,192,.12)}
.center-text{text-align:center}
h1{font-size:clamp(1.4rem,3.2vw,2.4rem);margin:.1em 0 .4em;color:var(--pri)}
.big-emoji{font-size:clamp(3rem,9vw,6rem);line-height:1.1;text-align:center}
.note{font-size:1.1rem;color:#8a5a00;background:#fff8e1;border-radius:12px;padding:8px 14px;margin:8px 0}
.note:empty{display:none}

.btn{font:inherit;font-size:clamp(1rem,2.2vw,1.5rem);background:var(--pri);color:#fff;border:0;border-radius:16px;padding:14px 22px;cursor:pointer;box-shadow:0 4px 0 var(--pri2);text-decoration:none;display:inline-block}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pri2)}
.btn.big{font-size:clamp(1.2rem,2.8vw,1.9rem);padding:18px 28px}
.btn.alt{background:#fff;color:var(--pri);border:3px solid var(--pri);box-shadow:none}
.btn.light{background:rgba(255,255,255,.92);color:var(--pri);box-shadow:none}
.btn.ok{background:var(--ok);box-shadow:0 4px 0 #1b5e20}.btn.bad{background:var(--bad);box-shadow:0 4px 0 #8e0000}
.btn:disabled{opacity:.5}
.alt-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:16px}

/* ---- scan ---- */
.scan-wrap{display:flex;flex-wrap:wrap;gap:18px;height:100%;align-items:stretch;justify-content:center}
.cam{position:relative;flex:1 1 520px;max-width:900px;aspect-ratio:4/3;max-height:calc(100vh - 110px);align-self:center;background:#0b132b;border-radius:28px;overflow:hidden;border:6px solid var(--line)}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam canvas#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cam-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,19,43,.85);color:#fff;font-size:1.6rem;text-align:center;padding:20px}
.countdown{position:absolute;inset:0;background:rgba(11,19,43,.88);color:#fff;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:16px}
.cd-text{font-size:clamp(1.2rem,3vw,2rem)}.cd-num{font-size:clamp(4rem,14vw,9rem);font-weight:700;color:var(--gold);line-height:1}
.scan-side{flex:1 1 320px;max-width:520px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.status{font-size:clamp(1.4rem,3.4vw,2.4rem);text-align:center;padding:18px;border-radius:22px;background:#fff;border:4px solid var(--line);min-height:5.2em;display:flex;align-items:center;justify-content:center;line-height:1.35}
.status.s-wait{border-color:#90a4ae;color:#455a64}.status.s-bad{border-color:#e57373;color:#b71c1c}.status.s-warn{border-color:#ffb74d;color:#e65100}.status.s-ok{border-color:#81c784;color:#1b5e20}
.stars{text-align:center;font-size:clamp(2rem,5vw,3.2rem);min-height:1.3em;letter-spacing:6px}
.debug{font:12px/1.4 monospace;background:#0b132b;color:#9ef;padding:8px;border-radius:8px;white-space:pre-wrap}

/* ---- numpad ---- */
.numpad-panel{max-width:560px}
.np-display{font-size:clamp(2.4rem,7vw,4rem);text-align:center;letter-spacing:.2em;min-height:1.4em;background:#f1f6ff;border:3px solid var(--line);border-radius:18px;padding:6px;font-weight:600;color:var(--ink)}
.np-display:empty::before{content:"รหัสนักเรียน";font-size:.4em;letter-spacing:0;color:#94a3b8;font-weight:400}
.np-error{color:var(--bad);text-align:center;min-height:1.6em;font-size:1.2rem;margin:4px 0}
.np-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.np-key{font:inherit;font-size:clamp(1.8rem,5vw,3rem);padding:clamp(10px,2.4vh,22px) 0;border-radius:20px;border:3px solid var(--line);background:#fff;color:var(--pri);cursor:pointer;box-shadow:0 4px 0 var(--line)}
.np-key:active{transform:translateY(3px);box-shadow:none;background:#e3f0ff}
.np-key.fn{background:#fff3e0;color:#e65100}.np-key.ok{background:var(--ok);color:#fff;border-color:var(--ok)}

/* ---- qr / confirm ---- */
.qr-reader{width:100%;max-width:520px;margin:0 auto;min-height:260px;background:#0b132b;border-radius:18px;overflow:hidden}
.photo{width:clamp(140px,28vh,260px);height:clamp(140px,28vh,260px);border-radius:50%;object-fit:cover;border:8px solid var(--pri);box-shadow:0 8px 24px rgba(21,101,192,.3)}
.cf-name{font-size:clamp(1.8rem,4.5vw,3rem);font-weight:600;margin-top:10px}
.cf-class{font-size:clamp(1.2rem,3vw,1.8rem);color:#64748b}

/* ---- rooms ---- */
.rooms-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.rm-who{font-size:clamp(1.1rem,2.6vw,1.8rem);font-weight:600;color:var(--pri)}
.rm-title{font-size:clamp(1.2rem,2.8vw,2rem);font-weight:600}
.rm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding-bottom:20px}
.room{background:#fff;border:4px solid transparent;border-radius:22px;overflow:hidden;box-shadow:0 6px 20px rgba(21,101,192,.15);cursor:pointer;display:flex;flex-direction:column;text-align:left;font:inherit;padding:0}
.room:active{transform:scale(.97);border-color:var(--pri)}
.room img{width:100%;height:clamp(110px,20vh,190px);object-fit:cover;display:block;background:#dbe8fb}
.room-b{padding:12px 14px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.room-n{font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:600;color:var(--pri)}
.badge{background:var(--ok);color:#fff;border-radius:99px;padding:4px 12px;font-size:1rem;white-space:nowrap}
.badge.low{background:#ef6c00}.badge.vlow{background:var(--bad)}
.empty{grid-column:1/-1;text-align:center;font-size:1.6rem;color:#64748b;padding:40px}

/* ---- done / dialog ---- */
.dn-text{font-size:clamp(1.3rem,3vw,2.2rem);margin:10px 0 18px}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.dialog{position:fixed;inset:0;background:rgba(11,19,43,.65);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.dialog-box{background:#fff;border-radius:28px;padding:24px;max-width:640px;width:100%;text-align:center}
.dlg-text{font-size:clamp(1.3rem,3vw,2rem);margin:6px 0}
@media (max-height:520px){.bar{padding:4px 12px}.status{min-height:3em;padding:8px}.alt-row{margin-top:8px}}