:root{--app:#173b68;--app2:#2463a2;--soft:#eef5fb;--text:#223047}
body{background:#f5f7fb;color:var(--text);min-height:100vh}.app-navbar{background:linear-gradient(120deg,var(--app),var(--app2));box-shadow:0 3px 18px rgba(20,50,90,.2)}
.card{border:0;border-radius:18px;box-shadow:0 8px 28px rgba(38,58,91,.08)}.card-header{background:transparent;border-bottom:1px solid #edf0f5;font-weight:700}
.stat-card{overflow:hidden;position:relative}.stat-card .icon{position:absolute;right:18px;top:14px;font-size:2.7rem;opacity:.14}.stat-value{font-size:2rem;font-weight:800}.soft{background:var(--soft)}
.table>thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#637188;background:#f6f8fb;white-space:nowrap}.badge-level-ringan{background:#d8f3dc;color:#176b3a}.badge-level-sedang{background:#fff0c2;color:#7b5700}.badge-level-berat{background:#ffd9df;color:#9d1730}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top left,#dfeeff,transparent 40%),linear-gradient(135deg,#173b68,#377db8)}.login-card{width:min(430px,92vw);border-radius:24px}.map-status{border-radius:15px;padding:14px;background:#eef5fb}.attendance-button{min-height:115px;border-radius:20px;font-size:1.15rem;font-weight:800}.attendance-button i{font-size:2rem;display:block}
.autocomplete-box{position:absolute;z-index:1050;width:100%;max-height:330px;overflow:auto;background:white;border:1px solid #ddd;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12)}.autocomplete-item{padding:12px;cursor:pointer;border-bottom:1px solid #eee}.autocomplete-item:hover{background:#f0f6ff}.progress-thin{height:8px}.cursor-pointer{cursor:pointer}
@media(max-width:767px){.stat-value{font-size:1.55rem}.card{border-radius:14px}.table-responsive{font-size:.88rem}}

.scanner-frame{position:relative;background:#101820;border-radius:18px;overflow:hidden;min-height:320px;display:flex;align-items:center;justify-content:center}.scanner-frame video{width:100%;height:420px;object-fit:cover;display:block}.scanner-frame #scannerOverlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;background:rgba(0,0,0,.45);gap:.7rem;text-align:center}.scanner-frame #scannerOverlay.active{background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12));pointer-events:none}.scanner-frame #scannerOverlay i{font-size:5rem}.scanner-frame #scannerOverlay.active i,.scanner-frame #scannerOverlay.active span{opacity:.25}.type-switch{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.type-switch .btn{padding:1rem;font-weight:800;border-radius:14px}.student-confirm{display:flex;align-items:center;gap:1rem}.avatar-circle{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--app);color:#fff;font-size:1.6rem;font-weight:800}.qr-success{display:flex;align-items:center;gap:1rem}.qr-success>i{font-size:2rem}.letter-spacing{letter-spacing:.18em}
@media(max-width:767px){.scanner-frame{min-height:260px}.scanner-frame video{height:320px}}