:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1f2a34;background:#f5f7f8;font-synthesis:none;line-height:1.45}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}h1,h2,p{margin-top:0}h1{font-size:clamp(1.55rem,3vw,2rem);line-height:1.15;margin-bottom:.45rem;letter-spacing:-.02em}h2{font-size:1rem;margin-bottom:0}.app-shell{min-height:100vh}.topbar{align-items:center;background:#17324d;color:#fff;display:flex;justify-content:space-between;min-height:68px;padding:12px max(18px,calc((100vw - 1180px)/2))}.topbar strong{font-size:1rem}.eyebrow{color:#5b7180;font-size:.7rem;font-weight:700;letter-spacing:.1em;margin-bottom:.3rem;text-transform:uppercase}.topbar .eyebrow{color:#a9c0cd}.account{align-items:center;display:flex;gap:12px;font-size:.82rem}.nav-bar{background:#fff;border-bottom:1px solid #dfe5e9;display:flex;gap:4px;overflow-x:auto;padding:0 max(18px,calc((100vw - 1180px)/2))}.nav-bar a{border-bottom:2px solid transparent;color:#5c6c76;font-size:.86rem;padding:14px 12px 12px;text-decoration:none;white-space:nowrap}.nav-bar a:hover,.nav-bar a.active{border-bottom-color:#2b6174;color:#17324d}.page-content{margin:0 auto;max-width:1180px;padding:30px 18px 64px}.section-heading{align-items:flex-end;display:flex;justify-content:space-between;margin-bottom:24px;gap:18px}.dashboard-actions{align-items:end;display:flex;gap:10px}.muted,.login-hint{color:#687781;font-size:.88rem}.button{border:1px solid #ccd6dc;border-radius:5px;color:#33444f;background:#fff;padding:9px 13px;transition:background .15s,border-color .15s}.button:hover{border-color:#89a0ae;background:#f5f8fa}.button:disabled{cursor:not-allowed;opacity:.58}.button-primary{background:#2b6174;border-color:#2b6174;color:#fff}.button-primary:hover{background:#214e5f;border-color:#214e5f}.button-secondary{background:#edf1f3}.button-ghost{background:transparent;border-color:#6d8997;color:#eef5f8;padding:6px 10px}.button-danger{color:#a0423c}.button-large{min-height:48px;width:100%}.button-small{font-size:.75rem;padding:6px 9px}.button-row{display:flex;flex-wrap:wrap;gap:8px}.panel{background:#fff;border:1px solid #dfe5e9;border-radius:7px;padding:20px}.panel-heading{align-items:flex-start;display:flex;justify-content:space-between;gap:12px;margin-bottom:17px}.panel-heading .muted{margin:4px 0 0}.badge{background:#edf1f3;border-radius:4px;color:#536773;display:inline-block;font-size:.7rem;font-weight:700;padding:3px 7px;white-space:nowrap}.badge-success{background:#e6f2ec;color:#2d6b4b}.status{border:1px solid #d7e1e5;border-radius:5px;font-size:.85rem;padding:10px 12px}.status-info{background:#f2f7f9;color:#3e5c6a}.status-success{background:#e9f5ee;color:#286045}.status-danger{background:#fff1f0;border-color:#f0cfcc;color:#98433e}.form-stack{display:grid;gap:15px}.form-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}.checkbox-field{align-items:center;display:flex;gap:8px}.checkbox-field input{min-height:18px;width:18px}label{color:#40515b;display:grid;font-size:.8rem;font-weight:650;gap:6px}input,select{background:#fff;border:1px solid #cbd6dc;border-radius:5px;color:#1f2a34;min-height:41px;outline:none;padding:9px 10px;width:100%}input:focus,select:focus{border-color:#2b6174;box-shadow:0 0 0 3px #2b61741f}.password-field{display:grid;gap:6px}.password-control{position:relative}.password-control input{padding-right:44px}.password-toggle{align-items:center;background:transparent;border:0;color:#687781;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:2px;top:2px;width:38px}.password-toggle:hover{color:#2b6174}.password-toggle svg{fill:none;height:19px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:19px}.compact-field{min-width:150px}.login-page{align-items:center;background:#f5f7f8;display:flex;justify-content:center;min-height:100vh;padding:20px}.login-panel{background:#fff;border:1px solid #dfe5e9;border-radius:8px;max-width:430px;padding:36px;width:100%}.login-panel h1{color:#17324d;font-size:1.7rem}.login-panel .form-stack{margin-top:28px}.login-hint{border-top:1px solid #e7ecef;font-size:.76rem;margin:25px 0 0;padding-top:16px}.metric-grid{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);margin-bottom:18px}.metric{background:#fff;border:1px solid #dfe5e9;border-radius:7px;padding:16px}.metric span,.metric small{color:#6c7d86;display:block;font-size:.75rem}.metric strong{color:#17324d;display:block;font-size:1.65rem;margin:5px 0 2px}.dashboard-grid,.admin-grid,.scan-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);margin-bottom:18px}.chart{height:280px;margin:0 -7px -6px -10px}.user-counts{display:grid;gap:2px}.user-count{align-items:center;border-bottom:1px solid #edf0f2;display:flex;justify-content:space-between;padding:13px 0}.user-count strong{color:#2b6174}.activity-list{display:grid}.activity-item{align-items:center;border-bottom:1px solid #edf0f2;display:flex;justify-content:space-between;gap:10px;padding:13px 0}.activity-item strong,.activity-item small{display:block}.activity-item small{color:#71808a;font-size:.75rem;margin-top:3px}.success-panel{align-items:center;background:#e9f5ee;border:1px solid #c8e5d4;border-radius:7px;color:#245e43;display:flex;gap:13px;margin-bottom:18px;padding:17px 20px}.success-panel h2{color:#1d503a;font-size:1.15rem;margin:0 0 3px}.success-panel p{margin-bottom:0}.success-mark{align-items:center;background:#2d8256;border-radius:50%;color:#fff;display:flex;font-size:1.15rem;height:30px;justify-content:center;width:30px}.scanner-panel{min-height:420px}.location-readiness{color:var(--brand-muted);font-size:.74rem;margin:5px 0 0}.location-card{background:var(--brand-surface-warm);border:1px solid var(--brand-border);border-radius:12px;display:grid;gap:12px;padding:14px}.location-card .panel-heading,.location-card h3{margin:0}.location-capture-message{font-size:.82rem;margin:0}.capture-success{color:#4d6b35}.capture-warning{color:#9a681d}.capture-error{color:#a33d2e}.captured-location{align-items:center;display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.78rem}.captured-location a{color:var(--brand-terracotta);font-weight:700}.location-manual-fields{margin-top:10px}.location-card details summary{color:var(--brand-muted);cursor:pointer;font-size:.78rem}.account-panel{max-width:560px}.scan-status-badges{align-items:flex-end;display:flex;flex-direction:column;gap:5px}.badge-warning{background:#f8e9c9;color:#77551b}.location-detail{color:var(--brand-muted);display:block;font-size:.76rem;margin-top:7px}.location-evidence{align-items:flex-start;display:inline-flex;flex-direction:column;gap:3px}.location-evidence small{color:var(--brand-muted);font-size:.68rem}.location-verified .badge{background:var(--brand-olive-soft);color:#42532d}.location-outside .badge{background:#fbecea;color:var(--brand-danger)}.retry-button{margin-top:12px}.config-grid{align-items:start;grid-template-columns:repeat(2,minmax(0,1fr))}.config-list{display:grid;gap:10px}.panel-help{color:var(--brand-muted);font-size:.78rem;margin:5px 0 0}.config-card{align-items:center;background:var(--brand-surface-warm);border:1px solid var(--brand-border);border-radius:11px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) auto;padding:14px}.config-card-body{min-width:0}.config-card-heading{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.config-card-heading>div{min-width:0}.config-title{display:block;font-size:.86rem;line-height:1.3}.config-key{background:#fffdf8ad;border-radius:5px;color:var(--brand-taupe);display:inline-block;font-size:.68rem;margin-top:5px;max-width:100%;overflow-wrap:anywhere;padding:2px 5px}.config-description{color:var(--brand-muted);font-size:.75rem;line-height:1.45;margin:8px 0 0}.config-toggle{align-items:center;display:inline-flex;flex:0 0 auto;gap:7px}.config-toggle input{height:1px;opacity:0;padding:0;position:absolute;width:1px}.config-toggle-track{align-items:center;background:#c9bdae;border:1px solid #b7a99a;border-radius:999px;display:flex;height:26px;padding:3px;transition:background .15s,border-color .15s;width:48px}.config-toggle-track span{background:var(--brand-surface);border-radius:50%;box-shadow:0 1px 3px #2e2a2540;height:18px;transform:translate(0);transition:transform .15s;width:18px}.config-toggle input:checked+.config-toggle-track{background:var(--brand-olive);border-color:var(--brand-olive)}.config-toggle input:checked+.config-toggle-track span{transform:translate(21px)}.config-toggle input:focus-visible+.config-toggle-track{box-shadow:0 0 0 3px #c75b3533}.config-toggle-label{color:var(--brand-muted);font-size:.7rem;font-weight:700;min-width:20px}.config-setting-control{align-items:center;display:flex;gap:7px;min-width:145px}.config-setting-control input{min-width:0}.config-setting-suffix{color:var(--brand-muted);font-size:.74rem}.scanner-wrap{margin:0 auto;max-width:390px}#qr-reader{border:0!important}#qr-reader video{border-radius:5px}.scanner-wrap .status{margin-top:10px}.manual-scan{align-items:end;border-top:1px solid #e7ecef;display:flex;gap:9px;margin-top:18px;padding-top:16px}.manual-scan label{flex:1}.filter-panel{align-items:end;display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin-bottom:18px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;min-width:610px;width:100%}th{color:#6d7d86;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-align:left;text-transform:uppercase}th,td{border-bottom:1px solid #edf0f2;padding:12px 10px;vertical-align:middle}td{font-size:.82rem}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}code{color:#536773;font-size:.78rem}.text-link{color:#2b6174;font-size:.8rem;text-decoration:none}.empty-state,.loading{color:#71808a;font-size:.87rem;padding:16px 0}.admin-grid{grid-template-columns:minmax(240px,.75fr) minmax(0,1.75fr)}.qr-preview{align-items:center;background:#fff;display:flex;justify-content:flex-start;padding:2px}.qr-preview-button{border:1px solid transparent;border-radius:5px;cursor:zoom-in}.qr-preview-button:hover,.qr-preview-button:focus-visible{border-color:#2b6174;box-shadow:0 0 0 3px #2b61741f;outline:none}.qr-modal-backdrop{align-items:center;background:#1f2a3494;display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;padding:18px;position:fixed;z-index:20}.qr-modal{background:#fff;border-radius:10px;box-shadow:0 20px 55px #1f2a3447;max-height:calc(100vh - 36px);max-width:500px;overflow:auto;padding:24px;width:100%}.icon-button{background:transparent;border:0;color:#687781;font-size:1.7rem;line-height:1;padding:2px 6px}.icon-button:hover{color:#17324d}.print-qr-sheet{align-items:center;display:flex;flex-direction:column;gap:12px;padding:8px 0 18px;text-align:center}.print-qr-sheet h1{color:#17324d;font-size:1.3rem;margin:0}.qr-large{height:min(320px,70vw);max-width:100%;width:min(320px,70vw)}.qr-modal-actions{justify-content:flex-end}.action-modal{max-width:440px}.action-modal-checkpoint{color:var(--brand-terracotta);font-size:1.1rem;font-weight:700;margin:18px 0 6px}.action-modal-actions{justify-content:flex-end;margin-top:24px}.scan-page{max-width:1050px;margin:0 auto}:root{--brand-background: #F7F2E9;--brand-surface: #FFFDF8;--brand-surface-warm: #F4EBDD;--brand-terracotta: #C75B35;--brand-terracotta-hover: #A9482A;--brand-olive: #747A45;--brand-olive-soft: #E8EAD9;--brand-taupe: #8B7967;--brand-sand: #D9C5A5;--brand-text: #2E2A25;--brand-muted: #756B61;--brand-border: #E5D9C8;--brand-success: #4F8A47;--brand-danger: #A84B43;background:var(--brand-background);color:var(--brand-text)}body{background:var(--brand-background);color:var(--brand-text)}.topbar{background:var(--brand-text)}.topbar-brand{align-items:center;display:flex;gap:10px}.brand-mark{border:2px solid rgba(255,253,248,.72);border-radius:10px;height:38px;object-fit:cover;width:38px}.topbar strong{letter-spacing:-.01em}.nav-bar{background:var(--brand-surface);border-color:var(--brand-border)}.nav-bar a{color:var(--brand-muted)}.nav-bar a:hover,.nav-bar a.active{border-bottom-color:var(--brand-terracotta);color:var(--brand-terracotta)}.page-content{max-width:1200px}.panel,.metric,.login-panel{background:var(--brand-surface);border-color:var(--brand-border);border-radius:12px;box-shadow:0 5px 18px #5f48300b}.eyebrow{color:var(--brand-terracotta)}.muted,.login-hint{color:var(--brand-muted)}.button{border-color:var(--brand-border);border-radius:9px;color:var(--brand-text)}.button:hover{background:var(--brand-surface-warm);border-color:var(--brand-sand)}.button-primary{background:var(--brand-terracotta);border-color:var(--brand-terracotta);color:#fff}.button-primary:hover{background:var(--brand-terracotta-hover);border-color:var(--brand-terracotta-hover)}.button-secondary{background:var(--brand-surface-warm)}.button-danger{color:var(--brand-danger)}.button-ghost{border-color:#d9c5a59e;color:var(--brand-surface)}.status-info{background:var(--brand-surface-warm);border-color:var(--brand-border);color:var(--brand-text)}.status-success,.success-panel{background:var(--brand-olive-soft);border-color:#ccd3a9;color:#42532d}.status-danger{background:#fbecea;border-color:#ebc4bd;color:var(--brand-danger)}.success-panel h2{color:#42532d}.success-mark{background:var(--brand-olive)}.badge{background:var(--brand-surface-warm);color:var(--brand-muted)}.badge-success{background:var(--brand-olive-soft);color:#42532d}input,select{background:var(--brand-surface);border-color:var(--brand-border);border-radius:9px;color:var(--brand-text)}input:focus,select:focus{border-color:var(--brand-terracotta);box-shadow:0 0 0 3px #c75b3524}.metric strong{color:var(--brand-text)}.user-count strong,.text-link{color:var(--brand-terracotta)}.login-page{background:var(--brand-background)}.login-panel h1{color:var(--brand-text)}.login-logo{border-radius:22px;display:block;height:76px;margin:0 0 18px;object-fit:cover;width:76px}.install-button{font-size:.76rem}.qr-preview{background:#fff;border-radius:7px}.table-wrap th{color:var(--brand-taupe)}td,th{border-color:var(--brand-border)}.scanner-panel{background:var(--brand-surface)}@media (max-width: 500px){.topbar-brand{min-width:0}.brand-mark{height:32px;width:32px}.install-button{display:none}.role-satpam .nav-bar{bottom:0;box-shadow:0 -5px 18px #5f48301a;justify-content:space-around;position:sticky;z-index:5}.role-satpam .nav-bar a{flex:1;font-size:.76rem;text-align:center}.role-satpam .page-content{padding-bottom:78px}.role-satpam .scanner-panel{border-radius:14px}}@media (max-width: 780px){.page-content{padding-top:23px}.section-heading{align-items:flex-start;flex-direction:column;margin-bottom:18px}.dashboard-actions{align-items:stretch;flex-wrap:wrap;width:100%}.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.admin-grid,.scan-grid{grid-template-columns:1fr}.chart{height:250px}}@media print{body *{visibility:hidden!important}.qr-modal-backdrop,.qr-modal-backdrop *{visibility:visible!important}.qr-modal-backdrop{background:#fff;display:block;top:0;right:0;bottom:0;left:0;padding:0;position:absolute}.qr-modal{box-shadow:none;left:0;max-height:none;max-width:none;overflow:visible;padding:24px;position:absolute;top:0;width:100%}.qr-modal .panel-heading,.qr-modal-actions{display:none}.print-qr-sheet{padding-top:24px}.print-qr-sheet h1{font-size:24pt}.qr-large{height:320px;width:320px}}@media (max-width: 500px){.topbar{min-height:62px;padding:10px 14px}.topbar strong{font-size:.86rem}.account{gap:6px}.account>span{display:none}.nav-bar{padding:0 9px}.nav-bar a{padding-left:9px;padding-right:9px}.page-content{padding-left:13px;padding-right:13px}.panel{padding:16px}.metric{padding:13px}.metric strong{font-size:1.4rem}.login-panel{padding:27px 21px}.filter-panel,.form-grid{grid-template-columns:1fr}.manual-scan{align-items:stretch;flex-direction:column}.success-panel{align-items:flex-start;padding:14px}.config-card{align-items:stretch;grid-template-columns:1fr}.config-toggle{justify-content:flex-end}.config-setting-control{min-width:0}}@media (max-width: 900px){html,body,#root,.app-shell{max-width:100%;overflow-x:hidden}.page-content{box-sizing:border-box;max-width:100%;min-width:0;overflow-x:hidden;padding:22px 12px 56px;width:100%}.admin-page,.admin-page .section-heading,.admin-page .admin-grid,.admin-page .panel,.admin-page form,.admin-page .form-stack,.admin-page .form-grid,.admin-page .password-field,.admin-page .password-control,.admin-page .location-card,.admin-page details,.admin-page .table-wrap{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.admin-page .section-heading{align-items:stretch;margin-bottom:18px}.admin-page .admin-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)!important}.admin-page .panel{overflow:hidden;padding:16px}.admin-page .form-grid{grid-template-columns:minmax(0,1fr)!important}.admin-page input,.admin-page select,.admin-page label,.admin-page textarea,.admin-page .button-row,.admin-page .location-card,.admin-page details,.admin-page details>*,.admin-page .panel-heading,.admin-page .panel-heading>*{box-sizing:border-box;max-width:100%;min-width:0}.admin-page input,.admin-page select,.admin-page textarea{width:100%}.admin-page .checkbox-field input{flex:0 0 18px;width:18px}.admin-page .captured-location{align-items:flex-start;display:grid;gap:6px;max-width:100%;min-width:0}.admin-page .captured-location span,.admin-page .captured-location strong,.admin-page .captured-location a,.admin-page code,.admin-page td strong,.admin-page td small{max-width:100%;overflow-wrap:anywhere;word-break:break-word}.admin-page .table-wrap{overflow:hidden}.admin-page .responsive-admin-table{display:block;max-width:100%;min-width:0!important;table-layout:fixed;width:100%}.admin-page .responsive-admin-table thead{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.admin-page .responsive-admin-table tbody,.admin-page .responsive-admin-table tr,.admin-page .responsive-admin-table td{box-sizing:border-box;display:block;max-width:100%;min-width:0;width:100%}.admin-page .responsive-admin-table tr{background:var(--brand-surface, #fff);border:1px solid var(--brand-border, #dfe5e9);border-radius:12px;margin-bottom:12px;overflow:hidden;padding:2px 12px}.admin-page .responsive-admin-table td{align-items:center;border-bottom:1px solid var(--brand-border, #edf0f2);display:grid;gap:10px;grid-template-columns:minmax(88px,.34fr) minmax(0,1fr);padding:11px 0}.admin-page .responsive-admin-table td>*{max-width:100%;min-width:0}.admin-page .responsive-admin-table td:last-child{border-bottom:0}.admin-page .responsive-admin-table td:before{color:var(--brand-muted, #6d7d86);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.checkpoint-admin-table td:nth-child(1):before{content:"QR"}.checkpoint-admin-table td:nth-child(2):before{content:"Lokasi"}.checkpoint-admin-table td:nth-child(3):before{content:"Token QR"}.checkpoint-admin-table td:nth-child(4):before{content:"Verifikasi"}.checkpoint-admin-table td:nth-child(5):before{content:"Status"}.checkpoint-admin-table td:nth-child(6):before{content:"Aksi"}.user-admin-table td:nth-child(1):before{content:"User"}.user-admin-table td:nth-child(2):before{content:"Role"}.user-admin-table td:nth-child(3):before{content:"Status"}.user-admin-table td:nth-child(4):before{content:"Aksi"}.admin-page .responsive-admin-table td .button-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.admin-page .responsive-admin-table td .button-row .button{max-width:100%;min-height:40px;min-width:0;white-space:normal;width:100%}.admin-page .qr-preview-button{justify-self:start}}@media (max-width: 480px){.page-content{padding-left:10px;padding-right:10px}.admin-page .panel{padding:14px}.admin-page .responsive-admin-table td{align-items:start;grid-template-columns:74px minmax(0,1fr)}.admin-page .responsive-admin-table td .button-row{grid-template-columns:minmax(0,1fr)}}.pwa-install-prompt{align-items:center;background:#fffdf8;border:1px solid #dccdbd;border-radius:14px;bottom:18px;box-shadow:0 16px 40px #2e2a2533;display:grid;gap:12px;grid-template-columns:auto minmax(0,1fr) auto;left:50%;max-width:720px;padding:14px 16px;position:fixed;transform:translate(-50%);width:calc(100% - 28px);z-index:1200}.pwa-install-icon{border-radius:12px;height:48px;width:48px}.pwa-install-copy{min-width:0}.pwa-install-copy strong{color:#3f352f;display:block;font-size:.92rem;margin-bottom:3px}.pwa-install-copy p{color:#6e6259;font-size:.78rem;line-height:1.4;margin:0}.pwa-install-actions{display:flex;gap:8px}@media (max-width: 640px){.pwa-install-prompt{align-items:start;bottom:10px;gap:10px;grid-template-columns:auto minmax(0,1fr);padding:13px;width:calc(100% - 20px)}.pwa-install-actions{grid-column:1 / -1;width:100%}.pwa-install-actions .button{flex:1;min-height:42px}}