:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#152643;background:#f4f7fb;font-synthesis:none;--navy:#132945;--blue:#2356ba;--border:#dee5ef;--muted:#718197;--shadow:0 10px 32px rgba(18,36,65,.08)}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}[hidden]{display:none!important}.appbar{background:#102342;color:#fff;position:sticky;top:0;z-index:10;box-shadow:0 4px 18px #0c1b3222}.appbar-inner{max-width:1240px;margin:auto;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 24px}.logo{display:flex;gap:10px;align-items:center;font-size:21px;font-weight:800;white-space:nowrap}.logoicon{font-size:29px;color:#63aaff}.accent{color:#6cb5ff}.logo small{font-size:10px;letter-spacing:1.2px;color:#a8bacf}.bar-right{display:flex;align-items:center;gap:8px;min-width:0}.chip{color:#c7d9ee;border:1px solid #34506f;border-radius:999px;padding:7px 10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}main{max-width:1240px;margin:auto;padding:30px 24px 70px}.auth-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,460px);gap:7%;align-items:center;min-height:calc(100svh - 180px)}.auth-copy{padding:20px 0}.auth-copy h1{font-size:clamp(32px,4vw,58px);line-height:1.09;letter-spacing:-2px;margin:20px 0}.auth-copy h1 span{color:#2762c5}.auth-copy p{max-width:480px;font-size:17px;line-height:1.7;color:#68788f}.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:850;color:#3978ce}.checkgrid{display:grid;grid-template-columns:1fr 1fr;max-width:390px;gap:14px;color:#305b93;font-size:13px;font-weight:700;margin-top:32px}.card{background:#fff;border:1px solid var(--border);border-radius:17px;padding:24px;box-shadow:var(--shadow);min-width:0}.login-card{padding:29px}.card-head h2,.card h2{font-size:19px;margin:0;font-weight:800;letter-spacing:-.4px}.card-head p{font-size:13px;color:var(--muted);margin:8px 0 20px}.roles{display:grid;gap:9px}.role{display:flex;gap:13px;align-items:center;text-align:left;width:100%;border:1px solid var(--border);background:#fff;padding:13px 14px;border-radius:12px;color:inherit;transition:.15s}.role.active{background:#eef5ff;border:2px solid #3978d4;padding:12px 13px}.roleicon{border-radius:10px;background:#eff3fa;color:#2560ae;font-size:25px;width:46px;height:46px;display:grid;place-items:center;flex-shrink:0}.role strong{display:block;font-size:14px}.role small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.role .dot{width:17px;height:17px;border:1.5px solid #b1c0d2;border-radius:50%;margin-left:auto;flex-shrink:0}.role.active .dot{background:#2865c5;border:4px solid #d5e7ff;outline:1px solid #2865c5}.subtle,.footnote,.hint{color:var(--muted)}.tiny,.footnote{font-size:11px}.footnote{text-align:center;margin-top:18px;line-height:1.6}.stack{display:grid;gap:15px}.stack label,label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#43546b}input,select,textarea{width:100%;min-height:44px;border:1px solid #cbd5e3;border-radius:9px;padding:11px 12px;background:#fff;color:#1c2f46;font-size:14px;outline:none;max-width:100%}textarea{resize:vertical}input:focus,select:focus,textarea:focus{border-color:#3270cd;box-shadow:0 0 0 3px #3474df22}.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;border:1px solid transparent;padding:11px 17px;border-radius:10px;font-weight:750;font-size:13px;white-space:normal;text-align:center;min-height:42px;transition:.16s}.btn.primary{background:#235bc3;color:#fff}.btn.success{background:#167752;color:#fff}.btn.danger{background:#b54040;color:#fff}.btn.soft{background:#eff4fb;border-color:#dce5f2;color:#2454a2}.btn.ghost{background:transparent;color:inherit;border-color:#d9e3ef}.btn.full{width:100%}.btn.small{min-height:34px;padding:7px 11px;font-size:12px}.btn:hover:not(:disabled){filter:brightness(.95)}.divider{height:1px;background:var(--border)}.dash-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:23px}.dash-top h1{margin:7px 0;font-size:clamp(25px,3vw,34px);letter-spacing:-.7px}.dash-top p{font-size:14px;color:var(--muted);margin:0}.status-tag,.tag{border-radius:999px;background:#edf3fc;color:#49688a;padding:7px 11px;font-size:11px;font-weight:750;white-space:nowrap}.status-tag.green{background:#e4f6ec;color:#137148}.status-tag.red{background:#ffeceb;color:#ae3838}.dash-grid{display:grid;grid-template-columns:minmax(0,510px) minmax(0,1fr);gap:20px;align-items:start}.card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}.hint{font-size:12px;line-height:1.7;margin:12px 0 0}.fieldgrid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px}.kv{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #edf1f6;margin-top:15px;padding-top:13px;gap:8px;font-size:12px}.kv span{color:var(--muted)}.kv strong{text-align:right;word-break:break-word}.pair-result{padding:17px;background:#eef7ff;border:1px solid #d3e6f7;border-radius:12px;margin-bottom:12px;color:#1a5395;font-size:13px}.pair-result.empty{background:#f7f9fc;border-color:var(--border);color:#7a899f}.qrwrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.qrbox{display:grid;place-items:center;background:white;width:216px;height:216px;border:1px solid #d8e3ee;border-radius:11px;padding:12px}.qrbox img,.qrbox canvas{max-width:190px!important;max-height:190px!important}.qr-meta{display:grid;gap:12px;align-content:center}.qr-meta strong{font-size:16px}.qr-meta span{font-size:12px;color:var(--muted)}.btnrow{display:flex;flex-wrap:wrap;gap:8px}.btnrow .btn{flex:1}.records{display:grid;gap:9px;max-height:600px;overflow:auto}.record{border:1px solid var(--border);border-radius:10px;padding:12px;display:grid;gap:5px;font-size:12px}.record .top{display:flex;justify-content:space-between;gap:7px}.record strong,.record code{overflow-wrap:anywhere}.record small{color:var(--muted)}.record .dup{color:#ad5a18}.record .fresh{color:#18774c}.empty-state{padding:24px;text-align:center;color:#8994a6;font-size:13px}.manual{border-top:1px solid var(--border);margin-top:15px;padding-top:15px}.manual summary{font-size:12px;font-weight:700;color:#51739b;cursor:pointer}.manual form{margin-top:15px}.notice{border:1px solid #b7dfc9;background:#e9f8ef;border-radius:14px;padding:18px;line-height:1.55;font-size:13px;overflow-wrap:anywhere}.notice.warning{border-color:#f5d5a1;background:#fff6e7}.notice h3{margin:0 0 8px;font-size:16px}.notice p{margin:5px 0}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metrics div{padding:19px;background:#eff4fb;border-radius:11px}.metrics strong{display:block;font-size:29px}.metrics small{color:#718299;font-size:12px}.log{margin-top:15px;max-height:380px;overflow:auto;font-size:12px}.log p{border-bottom:1px solid #ecf0f5;padding:9px 0;margin:0;overflow-wrap:anywhere}.statgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.stat{background:#fff;border:1px solid var(--border);border-radius:13px;padding:18px}.stat strong{font-size:27px;display:block}.stat span{font-size:12px;color:var(--muted)}.gridtwo{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px}.table-scroll{overflow-x:auto;max-width:100%}table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}th,td{padding:10px 9px;border-bottom:1px solid #e9eef4;vertical-align:top;overflow-wrap:anywhere}th{background:#f6f8fb;color:#6b7e98;white-space:nowrap;font-size:11px}td{max-width:280px}.table-scroll button{font-size:11px;padding:5px 9px;border:1px solid #d9e2ed;border-radius:7px;background:#f6f8ff;color:#28599d}.modal{position:fixed;inset:0;background:#07172acb;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px}.modal-card{background:white;width:min(100%,480px);padding:18px;border-radius:16px;max-height:95dvh;overflow:auto}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal-head h2{font-size:18px;margin:0}.camera-area{margin:15px 0;min-height:180px;background:#f5f7fa;border-radius:9px;overflow:hidden}.camera-area video{object-fit:cover}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:50;min-width:220px;max-width:min(90vw,510px);padding:14px 20px;border-radius:11px;background:#162f50;color:#fff;font-size:13px;box-shadow:0 12px 38px #0a1d3c50;text-align:center}footer{text-align:center;color:#92a0b4;font-size:11px;padding:15px 12px 28px}
@media(max-width:860px){.auth-page{grid-template-columns:1fr;max-width:520px;margin:auto;gap:12px;min-height:0}.auth-copy{padding:6px 0}.auth-copy h1{font-size:34px;letter-spacing:-1px;margin:10px 0}.auth-copy p{font-size:13px;margin:9px 0}.checkgrid{margin-top:16px;gap:9px}.dash-grid,.gridtwo{grid-template-columns:1fr}.statgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:540px){.appbar-inner{padding:0 14px;min-height:58px}.logo{font-size:18px}.logo small{display:none}.chip{font-size:10px;padding:6px;max-width:120px}.bar-right{gap:6px}main{padding:17px 12px 44px}.auth-copy h1{font-size:28px}.auth-copy p{line-height:1.45}.checkgrid{grid-template-columns:repeat(2,1fr);font-size:11px}.card{border-radius:13px;padding:17px;box-shadow:0 3px 16px #132d5310}.login-card{padding:20px}.card-head h2,.card h2{font-size:17px}.role{padding:10px}.role.active{padding:9px}.roleicon{width:41px;height:41px;font-size:22px}.role strong{font-size:13px}.role small{font-size:10px}.dash-top{align-items:flex-start}.dash-top h1{font-size:25px}.dash-top p{font-size:12px}.status-tag{font-size:10px;white-space:normal;text-align:center}.dash-grid,.stack{gap:12px}.fieldgrid{grid-template-columns:1fr}.statgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stat{padding:13px}.stat strong{font-size:21px}.qrwrap{justify-content:center}.qr-meta{text-align:center;justify-items:center}.btnrow{flex-direction:column}.btnrow .btn{width:100%}.qrbox{width:210px;height:210px}.toast{bottom:12px}input,select,textarea{font-size:16px}footer{font-size:10px}}
@media(min-width:541px) and (max-width:860px){.auth-copy{max-width:470px}.card.login-card{max-width:470px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Pendaftaran dan persetujuan Scanner; nyaman untuk layar telepon. */
#registerForm{padding-top:12px;border-top:1px solid var(--border)}#registerForm h3{margin:0;font-size:17px}#registrationResult{margin-top:12px}#pendingTable button{white-space:nowrap}

/* V7: konfirmasi toga: satu tombol utama pada smartphone, identitas jelas */
#confirmToga{min-height:62px;font-size:16px;font-weight:800}#confirmationActions{border:2px solid #a9dcc2}#scannerAdminSwitch.wide{grid-column:1/-1}#togaWisuda{font-size:16px;font-weight:750}.pair-result strong{font-size:21px}#reportResults{max-height:560px;overflow:auto}@media print{.appbar,.dash-top,.btn,#logout,#scannerDash,.auth-page,.statgrid,.gridtwo,.card:not(:has(#reportResults)),footer{display:none!important}#reportResults{max-height:none;overflow:visible}main{padding:0}table{font-size:10pt}th,td{border:1px solid #ccc}}

/* V8: empat menu besar, mobile-first reporting */
.admin-nav{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 18px}
.admin-nav button.active{background:#235bc3;color:white;border-color:#235bc3}
.admin-pane{min-width:0}
.admin-pane .statgrid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.admin-pane .fieldgrid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.report-actions{margin:14px 0}
.report-actions .btn{flex:0 1 auto}
.report-remote{margin-top:22px;background:#f8fbff;box-shadow:none}
#reportSummary{margin:15px 0;background:#eef5fc;border-color:#d8e7f7;color:#264a7c}
.delegation{padding:16px;border:1px solid #d9e3f2;border-radius:12px;margin-top:12px}
.checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:9px;margin:12px 0}
.checklist label{display:flex;align-items:center;gap:9px;font-size:12px}
.checklist input{width:17px;min-height:17px;flex:none}
#reportResults{max-height:65vh;overflow:auto}
@media(max-width:540px){.admin-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.admin-nav button{font-size:11px;padding:8px 6px}.report-actions .btn{flex:1 1 45%}.report-remote{padding:13px}.admin-pane .fieldgrid{grid-template-columns:1fr}}
@media print{.admin-nav,.report-remote,.admin-pane:not([data-admin-pane="laporan"]),#reportSummary{display:none!important}
 .admin-pane[data-admin-pane="laporan"]{display:block!important}#reportResults{max-height:none!important}
 #reportResults table{font-size:8pt}#reportResults tr{page-break-inside:avoid}}