:root{
  --bg:#f5f7fb;--surface:#fff;--surface-2:#f2f5fa;--text:#172033;--muted:#657083;--line:#dfe5ee;
  --primary:#0a7cff;--primary-2:#005fd1;--success:#168a55;--warning:#b66a00;--danger:#d83b3b;--info:#2369b5;
  --shadow:0 10px 28px rgba(34,49,74,.08);--radius:20px;--radius-sm:13px;--sidebar:266px;
}
[data-theme="dark"]{--bg:#10141c;--surface:#181e28;--surface-2:#222a36;--text:#f2f5fb;--muted:#a8b0bd;--line:#303947;--primary:#409cff;--primary-2:#1978dc;--shadow:none}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;line-height:1.5}a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) 1fr}.sidebar{position:sticky;top:0;height:100vh;background:#0d2b51;color:#fff;padding:22px 16px;overflow:auto}.brand{display:flex;align-items:center;gap:12px;padding:8px 10px 22px}.brand-mark{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:#fff;color:#0d62b8;font-weight:900;font-size:23px}.brand strong{display:block;font-size:19px;letter-spacing:.02em}.brand small{display:block;color:#bfd7f3}.nav-group{margin:14px 0}.nav-title{padding:9px 12px;color:#87add6;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.nav-link{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:3px 0;border-radius:12px;color:#e8f2ff;text-decoration:none;font-weight:650}.nav-link:hover,.nav-link.active{background:#174778;color:#fff}.nav-icon{width:22px;text-align:center}.sidebar-footer{margin-top:20px;padding:14px 12px;border-top:1px solid rgba(255,255,255,.13);color:#c9dbef;font-size:12px}.sidebar-footer a{color:#fff;font-weight:700;text-decoration:none}
.main{min-width:0}.topbar{position:sticky;z-index:50;top:0;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px}.topbar-left{display:flex;align-items:center;gap:12px}.mobile-menu{display:none;border:0;background:var(--surface-2);border-radius:11px;padding:9px 11px}.page-heading h1{font-size:20px;margin:0}.page-heading p{margin:2px 0 0;color:var(--muted);font-size:12px}.top-actions{display:flex;align-items:center;gap:9px}.user-chip{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.avatar{width:34px;height:34px;border-radius:11px;background:#d9eaff;color:#145b9c;display:grid;place-items:center;font-weight:900}.user-chip strong{display:block;font-size:12px}.user-chip small{display:block;color:var(--muted);font-size:10px}.content{padding:24px;max-width:1540px;margin:0 auto}.page-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-7{grid-column:span 7}.col-6{grid-column:span 6}.col-5{grid-column:span 5}.col-4{grid-column:span 4}.col-3{grid-column:span 3}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;min-width:0}.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.card-header h2,.card-header h3{margin:0;font-size:17px}.card-header p{margin:3px 0 0;color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:17px;box-shadow:var(--shadow)}.stat-label{color:var(--muted);font-size:12px}.stat-value{font-size:28px;font-weight:850;margin:6px 0}.stat-foot{font-size:12px;color:var(--muted)}.stat.success .stat-value{color:var(--success)}.stat.warning .stat-value{color:var(--warning)}.stat.danger .stat-value{color:var(--danger)}.stat.info .stat-value{color:var(--info)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:0;border-radius:12px;padding:10px 15px;background:var(--primary);color:#fff;text-decoration:none;font-weight:750}.button:hover{background:var(--primary-2)}.button.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}.button.danger{background:var(--danger)}.button.success{background:var(--success)}.button.small{min-height:34px;padding:7px 10px;font-size:12px}.button.block{width:100%}.button[disabled]{opacity:.55;cursor:not-allowed}.icon-button{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--text)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.form-group{min-width:0}.form-group.full{grid-column:1/-1}.form-group label{display:block;font-weight:750;margin-bottom:6px}.form-group .help{display:block;color:var(--muted);font-size:12px;margin-top:5px}.input,select,textarea,input[type="text"],input[type="password"],input[type="email"],input[type="date"],input[type="time"],input[type="number"],input[type="search"],input[type="url"]{width:100%;min-height:43px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);padding:10px 12px;outline:none}textarea{min-height:100px;resize:vertical}.input:focus,select:focus,textarea:focus,input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(10,124,255,.13)}.checkbox{display:flex;align-items:center;gap:9px}.checkbox input{width:18px;height:18px}.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px}
.alert{display:flex;align-items:flex-start;gap:10px;border-radius:14px;padding:12px 14px;margin-bottom:15px;border:1px solid}.alert.success{background:#eaf8f1;border-color:#b8e5cc;color:#116a40}.alert.error,.alert.danger{background:#fff0f0;border-color:#f0c3c3;color:#a92323}.alert.warning{background:#fff8e8;border-color:#efd59e;color:#825000}.alert.info{background:#edf6ff;border-color:#bddbfa;color:#1e5e99}[data-theme="dark"] .alert{background:var(--surface-2)}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;background:var(--surface-2);color:var(--muted);white-space:nowrap}.badge.success{background:#e4f6ec;color:#147345}.badge.warning{background:#fff1d7;color:#945800}.badge.danger{background:#ffe5e5;color:#a52929}.badge.info{background:#e4f1ff;color:#165d9b}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px}.table{width:100%;border-collapse:collapse;min-width:760px}.table th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);text-align:left;padding:12px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;z-index:2}.table td{padding:12px;border-top:1px solid var(--line);vertical-align:top}.table tr:hover td{background:rgba(10,124,255,.035)}.cell-main{font-weight:800}.cell-sub{color:var(--muted);font-size:12px;margin-top:2px}.actions{display:flex;gap:6px;flex-wrap:wrap}.contact-stack span{display:block}.empty{text-align:center;padding:34px;color:var(--muted)}.pagination{display:flex;align-items:center;gap:6px;margin-top:15px;flex-wrap:wrap}.pagination a{min-width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;text-decoration:none;background:var(--surface)}.pagination a.active{background:var(--primary);color:#fff;border-color:var(--primary)}.pagination span{color:var(--muted);font-size:12px;margin-left:6px}
.filters{display:grid;grid-template-columns:2fr repeat(3,minmax(130px,1fr)) auto;gap:10px;margin-bottom:15px}.filters.compact{grid-template-columns:2fr 1fr auto}.section-title{margin:0 0 12px}.split{display:flex;align-items:center;justify-content:space-between;gap:12px}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.reference{background:var(--surface-2);padding:11px;border-radius:12px;font-family:ui-monospace,monospace;margin:14px 0}
.login-page{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.login-visual{background:linear-gradient(145deg,#0b3769,#0979de);color:#fff;padding:55px;display:flex;align-items:flex-end}.login-visual h2{font-size:42px;line-height:1.12;margin:12px 0}.login-visual p{max-width:620px;color:#d7eaff;font-size:17px}.login-panel{display:grid;place-items:center;padding:28px}.login-card{max-width:460px;width:100%}.login-logo{width:60px;height:60px;border-radius:19px;background:#ddecff;color:#0868c3;display:grid;place-items:center;font-size:29px;font-weight:900}.login-card h1{margin:20px 0 5px}.login-card>p{margin:0 0 20px;color:var(--muted)}
.scan-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:18px}.scanner-card{min-height:580px}.camera-box{background:#071423;border-radius:20px;min-height:390px;display:grid;place-items:center;overflow:hidden;position:relative}.camera-box video{width:100%;height:100%;object-fit:cover}.scan-frame{position:absolute;width:min(64%,320px);aspect-ratio:1;border:3px solid #55d39c;border-radius:25px;box-shadow:0 0 0 999px rgba(0,0,0,.28)}.scan-result{min-height:240px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}.person-avatar{width:82px;height:82px;border-radius:25px;background:#dcecff;color:#145b9c;display:grid;place-items:center;font-size:28px;font-weight:900;overflow:hidden}.person-avatar img{width:100%;height:100%;object-fit:cover}.result-time{font-size:36px;font-weight:900;margin:8px 0}.direction-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.direction-switch label{position:relative}.direction-switch input{position:absolute;opacity:0}.direction-switch span{display:block;text-align:center;padding:10px;border:1px solid var(--line);border-radius:11px}.direction-switch input:checked+span{background:var(--primary);color:#fff;border-color:var(--primary)}
.card-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:15px}.id-card-preview{aspect-ratio:85.6/54;border-radius:17px;background:linear-gradient(140deg,#fafdff,#dcecff);border:1px solid #c8d9ee;padding:16px;position:relative;overflow:hidden;color:#10233c}.id-card-preview.teacher{background:linear-gradient(140deg,#f4fff8,#d4f2e2)}.id-card-preview .qr{position:absolute;right:14px;bottom:12px;width:80px;height:80px;background:#fff;padding:4px;border-radius:8px}.id-card-preview .photo{width:68px;height:82px;border-radius:11px;background:#fff;border:1px solid #cbd7e6;display:grid;place-items:center;overflow:hidden;font-size:20px;font-weight:900}.id-card-preview .photo img{width:100%;height:100%;object-fit:cover}.id-card-preview .school{font-size:9px;font-weight:900;letter-spacing:.05em}.id-card-preview .card-title{font-size:11px;color:#1a5c99;font-weight:900;margin-bottom:8px}.id-card-preview .name{font-size:14px;font-weight:900;margin:6px 0}.id-card-preview .details{font-size:9px;max-width:150px}.id-card-preview .number{position:absolute;left:15px;bottom:11px;font-size:8px;font-family:ui-monospace,monospace}.id-card-preview .logo-circle{position:absolute;right:15px;top:14px;width:30px;height:30px;border-radius:10px;background:#0a78df;color:#fff;display:grid;place-items:center;font-weight:900}
.card-print-toolbar{position:sticky;top:0;z-index:10;background:#fff;padding:12px;border-bottom:1px solid #ddd;display:flex;gap:10px;justify-content:center}.print-sheet{margin:0 auto;background:white;page-break-after:always}.print-sheet.print-sheet-landscape{width:210mm;min-height:297mm;padding:10mm 12.4mm;display:grid;grid-template-columns:85.6mm 85.6mm;grid-auto-rows:54mm;gap:2.5mm 4mm}.print-sheet.print-sheet-portrait{width:297mm;min-height:210mm;padding:10mm 11.5mm;display:grid;grid-template-columns:repeat(5,54mm);grid-auto-rows:85.6mm;gap:4mm 2.5mm}.print-card{width:85.6mm;height:54mm;border:.2mm solid #bdc9d8;border-radius:3mm;overflow:hidden;position:relative;background:linear-gradient(140deg,#fff,#e4f1ff);color:#0d2542;padding:4mm;font-family:Arial,sans-serif}.print-card.teacher{background:linear-gradient(140deg,#fff,#dff6e9)}.print-card .photo{width:18mm;height:22mm;border-radius:2mm;border:.3mm solid #b7c6d8;background:#fff;overflow:hidden;display:grid;place-items:center;font-size:5mm;font-weight:bold}.print-card .photo img{width:100%;height:100%;object-fit:cover}.print-card .qr{position:absolute;right:3mm;bottom:3mm;width:22mm;height:22mm}.print-card .school{font-size:2.5mm;font-weight:bold;letter-spacing:.05em}.print-card .title{font-size:2.7mm;font-weight:bold;color:#1264a8;margin-bottom:2mm}.print-card .name{font-size:3.3mm;font-weight:900;max-width:47mm;margin-top:1.5mm}.print-card .detail{font-size:2.35mm;max-width:48mm}.print-card .num{position:absolute;left:4mm;bottom:3mm;font-size:2mm;font-family:monospace}.print-card .mark{position:absolute;right:4mm;top:3mm;width:8mm;height:8mm;border-radius:2.2mm;background:#0977d7;color:#fff;display:grid;place-items:center;font-size:4mm;font-weight:bold}.print-card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#f5f9ff}.print-card-back h3{font-size:3mm;margin:0 0 2mm}.print-card-back p{font-size:2.3mm;margin:1mm 0;max-width:70mm}.cut-mark{position:absolute;width:3mm;height:3mm;border-color:#999}.error-page{min-height:100vh;display:grid;place-items:center;padding:25px}.error-card{max-width:650px}.error-mark{width:58px;height:58px;background:var(--danger);color:#fff;border-radius:18px;display:grid;place-items:center;font-size:28px;font-weight:900}
.install-page{min-height:100vh;padding:34px;display:grid;place-items:center}.install-card{width:min(860px,100%)}.steps{display:flex;gap:8px;margin:16px 0}.step{flex:1;padding:9px;text-align:center;border-radius:11px;background:var(--surface-2);font-size:12px}.step.active{background:var(--primary);color:#fff}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr)}.col-8,.col-7,.col-6,.col-5,.col-4,.col-3{grid-column:span 12}.scan-layout{grid-template-columns:1fr}.filters{grid-template-columns:repeat(2,1fr)}.filters>*:first-child{grid-column:1/-1}}
@media(max-width:820px){.app-shell{display:block}.sidebar{position:fixed;left:-290px;z-index:100;width:270px;transition:none}.sidebar.open{left:0}.mobile-menu{display:block}.topbar{padding:11px 14px}.content{padding:14px}.user-chip .user-text{display:none}.page-heading p{display:none}.form-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}.filters,.filters.compact{grid-template-columns:1fr}.login-page{grid-template-columns:1fr}.login-visual{display:none}.table.mobile-cards{min-width:0}.table.mobile-cards thead{display:none}.table.mobile-cards,.table.mobile-cards tbody,.table.mobile-cards tr,.table.mobile-cards td{display:block;width:100%}.table.mobile-cards tr{border-bottom:1px solid var(--line);padding:11px}.table.mobile-cards td{border:0;padding:5px 0;display:grid;grid-template-columns:110px 1fr;gap:8px}.table.mobile-cards td:before{content:attr(data-label);font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase}.card-preview-grid{grid-template-columns:1fr}.scanner-card{min-height:auto}.camera-box{min-height:300px}}
@media(max-width:520px){.stat-grid{grid-template-columns:1fr}.top-actions .button{display:none}.content{padding:10px}.card{padding:15px;border-radius:16px}.direction-switch{grid-template-columns:1fr 1fr 1fr}.table.mobile-cards td{grid-template-columns:90px 1fr}}
@media print{body{background:#fff}.card-print-toolbar{display:none!important}.print-only{display:block!important}.print-sheet{margin:0;box-shadow:none}}

/* HADIRIYA v0.2.0 — Operasional Gerbang & Guru Piket */
.connection-pill{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);font-size:12px;font-weight:750;color:var(--muted)}
.connection-dot{width:9px;height:9px;border-radius:50%;background:#8b96a8;box-shadow:0 0 0 3px rgba(139,150,168,.14)}
.connection-pill.healthy .connection-dot{background:var(--success);box-shadow:0 0 0 3px rgba(22,138,85,.14)}
.connection-pill.warning .connection-dot,.connection-pill.waiting .connection-dot{background:#e69a16;box-shadow:0 0 0 3px rgba(230,154,22,.16)}
.connection-pill.stale .connection-dot,.connection-pill.unconfigured .connection-dot{background:var(--danger);box-shadow:0 0 0 3px rgba(216,59,59,.14)}

.scan-workspace-page{overflow:hidden}.scan-workspace-page .app-shell{grid-template-columns:1fr}.scan-workspace-page .sidebar{display:none}.scan-workspace-page .content{max-width:none;padding:14px;height:calc(100vh - 69px)}.scan-workspace-page .topbar{padding:10px 16px}.scan-workspace-page .page-heading p{display:none}
.gate-workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.65fr);gap:14px;height:100%}.gate-main,.gate-side>section{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.gate-main{min-width:0;padding:14px;display:flex;flex-direction:column;gap:12px}.gate-toolbar,.summary-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.gate-stage{min-height:0;flex:1;display:grid;grid-template-columns:minmax(260px,.85fr) minmax(360px,1.15fr);gap:14px}.gate-camera{min-height:360px;height:100%;border-radius:17px;background:#07182c}.gate-camera .camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#d8e8fb;padding:30px}.gate-camera .camera-placeholder strong{font-size:24px}.gate-camera .camera-placeholder span{color:#a9c4e2;margin-top:6px}.camera-active .gate-camera .camera-placeholder{display:none}
.gate-result{height:100%;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px solid var(--line);border-radius:17px;background:var(--surface-2);padding:22px}.gate-result.success{border-color:#8ed8b3;background:#eefaf4}.gate-result.warning{border-color:#efcb84;background:#fff9ea}.gate-result.danger{border-color:#ecaaaa;background:#fff1f1}.gate-avatar{width:116px;height:116px;border-radius:30px;font-size:38px;overflow:hidden}.gate-avatar img{width:100%;height:100%;object-fit:cover}.result-kicker{margin-top:13px;font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--muted)}.gate-result .result-time{font-size:34px;font-weight:900;margin-top:2px}.gate-result h2{font-size:30px;line-height:1.15;margin:7px 0 2px}.gate-result p{font-size:16px;color:var(--muted);margin:0 0 14px}.result-status{border-radius:999px;padding:8px 15px;font-weight:850;background:#e8eef6;color:#38506d}.result-status.success{background:#d9f4e6;color:#0d7544}.result-status.warning{background:#fff0c9;color:#8b5700}.result-status.danger{background:#ffdddd;color:#a52222}.result-status.info{background:#e5f2ff;color:#155e9d}
.gate-control{display:grid;grid-template-columns:auto minmax(280px,1fr);gap:12px;align-items:center}.gate-direction{margin:0}.gate-input-wrap{display:flex;gap:8px;min-width:0}.gate-input-wrap input{font-size:16px;font-weight:700}.gate-hints{grid-column:1/-1;display:flex;gap:15px;flex-wrap:wrap;color:var(--muted);font-size:11px;padding-left:3px}.gate-side{min-height:0;display:flex;flex-direction:column;gap:14px}.gate-side>section{padding:16px;min-height:0}.live-summary{flex:0 0 auto}.summary-head strong{display:block}.summary-head span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.summary-grid article{background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:11px}.summary-grid span{display:block;color:var(--muted);font-size:11px}.summary-grid strong{display:block;font-size:24px;margin-top:2px}.recent-panel{flex:1;display:flex;flex-direction:column}.recent-scans{margin-top:11px;overflow:auto;min-height:0}.recent-scan{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}.recent-scan:last-child{border-bottom:0}.recent-body{min-width:0}.recent-body strong,.recent-body small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-body small{color:var(--muted);font-size:11px}.recent-scan time{font-size:11px;color:var(--muted)}.mini-avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#dcecff;color:#155e9d;font-weight:900;flex:0 0 auto}

.piket-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding:18px 20px;border-radius:20px;background:linear-gradient(135deg,#0d2b51,#155e9d);color:#fff}.piket-hero h2{font-size:25px;margin:2px 0}.piket-hero p{margin:0;color:#cfe3f8}.piket-hero .connection-pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}.eyebrow{font-size:10px;font-weight:900;letter-spacing:.14em;color:#abd0f4}.piket-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.identity-cell{display:flex;align-items:center;gap:10px}.identity-cell strong,.identity-cell small{display:block}.identity-cell small{color:var(--muted);font-size:11px}.quick-action{display:grid;grid-template-columns:105px minmax(140px,1fr) auto;gap:6px;align-items:center}.quick-action select,.quick-action input{min-height:36px;padding:7px 9px;font-size:12px}.action-list-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.action-list-item:last-child{border-bottom:0}.action-list-item strong,.action-list-item span{display:block}.action-list-item div span{font-size:11px;color:var(--muted)}.quick-links{display:grid;gap:8px}.quick-links a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.mini-form{display:grid;grid-template-columns:95px minmax(130px,1fr) auto;gap:6px;margin-top:7px}.mini-form input{min-height:35px;padding:7px 9px;font-size:12px}.empty.compact{padding:15px}
.active-duty-strip{display:flex;align-items:center;gap:14px;margin:-4px 0 16px;padding:11px 14px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.active-duty-strip>strong{white-space:nowrap}.active-duty-strip>div{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.incident-table{min-width:1060px}.incident-resolution-form{display:grid;gap:7px;margin-top:8px;min-width:240px}.incident-resolution-form textarea{min-height:72px;font-size:12px;padding:8px}

@media(max-width:1100px){.gate-workspace{grid-template-columns:1fr}.gate-side{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.scan-workspace-page{overflow:auto}.scan-workspace-page .content{height:auto}.gate-stage{min-height:560px}.piket-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.scan-workspace-page .topbar .user-chip,.scan-workspace-page .topbar [data-theme-toggle]{display:none}.scan-workspace-page .content{padding:8px}.gate-main{padding:10px}.gate-toolbar{align-items:flex-start}.gate-stage{display:block;min-height:0}.gate-camera{height:250px;min-height:250px;margin-bottom:10px}.gate-result{height:390px;min-height:390px}.gate-result h2{font-size:25px}.gate-control{grid-template-columns:1fr}.gate-input-wrap{display:grid;grid-template-columns:1fr auto}.gate-side{display:block}.gate-side>section{margin-top:10px}.summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:auto}.summary-grid article{min-width:105px}.piket-hero{align-items:flex-start;flex-direction:column}.active-duty-strip{align-items:flex-start;flex-direction:column}.piket-stats{grid-template-columns:1fr 1fr}.quick-action,.mini-form{grid-template-columns:1fr}.quick-action .button,.mini-form .button{width:100%}}
.integration-status-pills{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
@media(max-width:760px){.integration-status-pills{justify-content:flex-start;width:100%}}
@media(max-width:430px){.gate-result{height:345px;min-height:345px}.gate-avatar{width:92px;height:92px}.gate-result .result-time{font-size:29px}.piket-stats{grid-template-columns:1fr 1fr}.piket-stats .stat{padding:13px}.piket-stats .stat-value{font-size:24px}}

/* v0.2.1 camera compatibility */
.camera-mode-badge{display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border-radius:999px;background:#e8f3ff;color:#155b96;border:1px solid #c9e1f8;font-size:12px;font-weight:800;white-space:nowrap}.camera-mode-badge.success{background:#eaf8f1;color:#177049;border-color:#c6ead8}.camera-mode-badge.warning{background:#fff5dc;color:#8a5a00;border-color:#f0ddb0}.camera-mode-badge.danger{background:#feecee;color:#a3313b;border-color:#f3cbd0}.camera-mode-badge.hidden{display:none}.gate-camera canvas[data-qr-canvas]{display:none}
.device-badge{display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--text);border:1px solid var(--line);font-size:11px;font-weight:800;white-space:nowrap}.gate-device-settings{border-top:1px solid var(--line);padding-top:9px}.gate-device-settings summary{cursor:pointer;color:var(--muted);font-size:11px;font-weight:800}.device-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:8px;align-items:center;margin-top:9px}.device-form input{min-height:36px;padding:7px 9px;font-size:12px}.device-form [data-device-message]{grid-column:1/-1;color:var(--muted);font-size:11px}
@media(max-width:760px){.gate-toolbar .actions{flex-wrap:wrap;justify-content:flex-end}.camera-mode-badge{order:3;width:100%;justify-content:center}}
@media(max-width:760px){.device-badge{width:100%;justify-content:center}.device-form{grid-template-columns:1fr}.device-form .button{width:100%}}

/* HADIRIYA v0.2.2 — Mobile Camera Viewport Fix */
html,body{max-width:100%;overflow-x:hidden}
.scan-workspace-page,
.scan-workspace-page .app-shell,
.scan-workspace-page .main,
.scan-workspace-page .content,
.gate-workspace,
.gate-main,
.gate-stage,
.gate-camera,
.gate-result,
.gate-control,
.gate-input-wrap,
.gate-side,
.gate-toolbar,
.gate-toolbar .actions{min-width:0;max-width:100%}
.scan-workspace-page .app-shell,.scan-workspace-page .main{width:100%}
.camera-box,.gate-camera{width:100%;max-width:100%;contain:layout paint}
.camera-box video,.gate-camera video{
  display:block;position:absolute;inset:0;width:100%!important;height:100%!important;
  min-width:0;max-width:100%;object-fit:cover;object-position:center;
}
.gate-camera canvas[data-qr-canvas]{position:absolute!important;width:1px!important;height:1px!important;max-width:1px!important;overflow:hidden!important;pointer-events:none}
.gate-input-wrap input{min-width:0;max-width:100%}
.summary-grid,.recent-scans{max-width:100%}

@media(max-width:760px){
  .scan-workspace-page{width:100%;overflow-x:hidden}
  .scan-workspace-page .topbar{width:100%;min-width:0;overflow:hidden;padding:9px 10px}
  .scan-workspace-page .topbar-left{min-width:0;flex:1}
  .scan-workspace-page .page-heading{min-width:0}
  .scan-workspace-page .page-heading h1{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .scan-workspace-page .top-actions{min-width:0;flex:0 0 auto}
  .scan-workspace-page .top-actions>a.button{display:none}
  .scan-workspace-page .content{width:100%;max-width:100%;padding:8px}
  .gate-workspace{width:100%;display:block}
  .gate-main{width:100%;max-width:100%;overflow:hidden}
  .gate-toolbar{display:block;width:100%}
  .gate-toolbar>.connection-pill{width:100%;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gate-toolbar .actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;margin-top:8px}
  .gate-toolbar .actions .button{width:100%;min-width:0;padding-inline:8px;white-space:normal;text-align:center}
  .gate-toolbar .camera-mode-badge{grid-column:1/-1;order:0;width:100%;max-width:100%;white-space:normal;text-align:center;line-height:1.25}
  .gate-stage{width:100%;max-width:100%}
  .gate-camera{width:100%;max-width:100%;height:min(62vw,280px);min-height:220px;margin-bottom:10px}
  .gate-result{width:100%;max-width:100%;height:auto;min-height:330px;padding:16px}
  .gate-result h2{max-width:100%;overflow-wrap:anywhere}
  .gate-result p{max-width:100%;overflow-wrap:anywhere}
  .gate-control{width:100%;max-width:100%}
  .gate-direction{width:100%;min-width:0}
  .direction-switch span{padding-inline:6px;font-size:12px}
  .gate-input-wrap{grid-template-columns:minmax(0,1fr) auto;width:100%}
  .gate-input-wrap input{width:100%;min-width:0;font-size:16px}
  .gate-hints{max-width:100%}
  .gate-side{width:100%;max-width:100%;overflow:hidden}
  .gate-side>section{width:100%;max-width:100%}
  .summary-grid{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .recent-scan{min-width:0}
}

@media(max-width:430px){
  .scan-workspace-page .page-heading h1{font-size:15px}
  .gate-toolbar .actions{grid-template-columns:1fr}
  .gate-toolbar .camera-mode-badge{grid-column:1}
  .gate-camera{height:64vw;min-height:210px;max-height:270px}
  .gate-result{min-height:300px}
  .gate-input-wrap{grid-template-columns:1fr}
  .gate-input-wrap .button{width:100%}
}


/* HADIRIYA v0.3.0 — Professional Card Center */
.card-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;margin-bottom:16px;border-radius:22px;background:linear-gradient(135deg,#0d2b51,#0b71c9);color:#fff}.card-hero h2{font-size:28px;margin:3px 0}.card-hero p{margin:0;color:#d6e9fb}.card-hero .eyebrow{color:#a9d1f3}.card-hero .button.secondary{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.25)}
.card-stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}.card-stat-grid article{padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.card-stat-grid span{display:block;font-size:11px;color:var(--muted)}.card-stat-grid strong{display:block;font-size:25px;margin-top:3px}.card-stat-grid article.success strong{color:var(--success)}.card-stat-grid article.warning strong{color:var(--warning)}.card-stat-grid article.danger strong{color:var(--danger)}
.card-filter-grid{display:grid;grid-template-columns:1.2fr 2fr 1.3fr 1.3fr 1.3fr 1.3fr auto auto;gap:8px;margin-bottom:13px}.batch-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 12px;margin-bottom:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.professional-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:17px}.card-person-item{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--surface-2);padding:12px}.card-select{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;margin-bottom:9px}.card-select input{width:18px;height:18px}.readiness-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.card-item-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.card-item-actions form{margin:0}.temporary-card-form{width:100%;border:1px dashed var(--line);border-radius:11px;padding:6px 9px}.temporary-card-form summary{cursor:pointer;font-size:12px;font-weight:800}.temporary-card-form form{display:grid;grid-template-columns:135px minmax(150px,1fr) auto;gap:6px;margin-top:7px}.temporary-card-form input{min-height:35px;padding:7px 9px;font-size:12px}
.id-card-preview.pro{aspect-ratio:85.6/54;min-height:0;border:0;border-radius:16px;padding:14px;background:linear-gradient(145deg,#fff,#e7f2ff);box-shadow:0 8px 22px rgba(30,55,85,.12);color:#10233c;overflow:hidden}.id-card-preview.pro:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,var(--card-accent),transparent 52%);opacity:.11;pointer-events:none}.id-card-preview.pro:after{content:"";position:absolute;right:-38px;top:-38px;width:115px;height:115px;border-radius:50%;background:var(--card-accent);opacity:.10}.id-card-preview.pro .logo-mark{position:absolute;right:14px;top:13px;width:32px;height:32px;border-radius:9px;background:var(--card-accent);color:#fff;display:grid;place-items:center;font-weight:900;z-index:2;overflow:hidden}.id-card-preview.pro .logo-mark.image{background:#fff;padding:3px}.id-card-preview.pro .logo-mark img{width:100%;height:100%;object-fit:contain}.id-card-preview.pro .school{position:relative;font-size:9px;max-width:72%;z-index:1}.id-card-preview.pro .card-title{position:relative;color:var(--card-accent);z-index:1}.id-card-preview.pro .photo{position:absolute;left:14px;top:46px;width:67px;height:80px;z-index:1}.id-card-preview.pro .name{position:absolute;left:92px;top:58px;right:92px;margin:0;font-size:14px;line-height:1.15;z-index:1;font-weight:900}.id-card-preview.pro .details{position:absolute;left:92px;top:83px;right:88px;line-height:1.25;z-index:1;font-size:8.5px}.id-card-preview.pro .details b{display:block;margin-bottom:3px;font-size:8.8px;line-height:1.2}.id-card-preview.pro .details .line{display:block;margin-top:2px}.id-card-preview.pro .details .address{font-size:7.6px;line-height:1.18;max-height:28px;overflow:hidden}.id-card-preview.pro .number{position:absolute;left:14px;bottom:12px;right:96px;z-index:1;font-size:8px;line-height:1.1}.id-card-preview.pro .qr{position:absolute;right:12px;bottom:11px;width:70px;height:70px;padding:4px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px rgba(16,35,60,.08);z-index:2;display:grid;place-items:center;overflow:hidden}.id-card-preview.pro .qr svg,.id-card-preview.pro .qr canvas{display:block;width:100%!important;height:100%!important;max-width:100%;max-height:100%}.id-card-preview.template-clean{background:#fff}.id-card-preview.template-navy{background:linear-gradient(145deg,#f9fbff,#d9e2f2);--card-accent:#173f73}.id-card-preview.template-green{background:linear-gradient(145deg,#fff,#dcf4e7)}
.section-divider{border-top:1px solid var(--line);padding-top:14px;margin-top:5px}.section-divider h3{margin:0}.section-divider span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.print-preview-body{background:#d7dbe1}.print-card{--card-accent:#0a78df;background:linear-gradient(145deg,#fff,#e4f1ff);border-color:#c3cfdd;padding:3.5mm;overflow:hidden}.print-card:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,var(--card-accent),transparent 48%);opacity:.10}.print-card.template-clean{background:#fff}.print-card.template-green{background:linear-gradient(145deg,#fff,#dff6e9)}.print-card.template-navy{background:linear-gradient(145deg,#f9fbff,#d9e2f2)}.print-card.temporary{--card-accent:#d47a00}.print-card .mark{background:var(--card-accent);z-index:3;overflow:hidden}.print-card .mark.image{background:#fff;padding:.5mm}.print-card .mark img{width:100%;height:100%;object-fit:contain}.print-card .school,.print-card .title,.print-card .photo,.print-card .identity,.print-card .qr,.print-card .validity,.print-card .num{position:absolute;z-index:2}.print-card .school{left:4mm;top:3.2mm;right:15mm}.print-card .title{left:4mm;top:7mm;color:var(--card-accent)}.print-card .photo{left:4mm;top:12mm}.print-card .identity{left:24.5mm;top:12mm;right:27mm}.print-card .name{position:static;max-width:none;margin:0 0 1mm;font-size:3.25mm;line-height:1.08}.print-card .detail{max-width:none;font-size:2.1mm;line-height:1.15}.print-card .detail b{display:block;margin-bottom:.5mm;font-size:2.15mm;line-height:1.2}.print-card .detail span{display:block;margin-top:.35mm}.print-card .detail .address{font-size:1.9mm;line-height:1.08;max-height:8.6mm;overflow:hidden}.print-card .qr{right:3.2mm;bottom:4mm;width:21mm;height:21mm;padding:1.2mm;border-radius:1.4mm;background:#fff;overflow:hidden;display:grid;place-items:center}.print-card .qr svg,.print-card .qr canvas{display:block;width:100%!important;height:100%!important;max-width:100%;max-height:100%}.print-card .validity{left:24.5mm;bottom:7mm;font-size:1.9mm;font-weight:bold;color:var(--card-accent)}.print-card .num{left:4mm;bottom:2.7mm;right:27mm;line-height:1.1}.print-card-back:before{opacity:.06}.print-card-back .mark{position:relative;right:auto;top:auto;margin-bottom:2mm}.print-card-back .mark.image{width:11mm;height:11mm}.print-card-back .back-contact{font-size:2mm;margin-top:2mm;display:grid;gap:.4mm}.with-cut-marks .print-card{outline:.18mm dashed #7b8795;outline-offset:.7mm}
@media(max-width:1200px){.card-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-filter-grid .button{width:100%}}
@media(max-width:760px){.card-hero{align-items:flex-start;flex-direction:column;padding:18px}.card-hero .actions{width:100%}.card-hero .button{flex:1}.card-stat-grid{grid-template-columns:1fr 1fr}.card-filter-grid{grid-template-columns:1fr}.professional-card-grid{grid-template-columns:1fr}.temporary-card-form form{grid-template-columns:1fr}.card-item-actions>.button,.card-item-actions>form,.card-item-actions>form .button{width:100%}.id-card-preview.pro .name{right:88px;top:56px}.id-card-preview.pro .details{right:84px;top:81px;font-size:8px}.id-card-preview.pro .qr{width:64px;height:64px;right:10px;bottom:10px}}

/* HADIRIYA v0.4.0 — Kartu Pelajar Portrait */
.student-portrait-card{position:relative;width:100%;aspect-ratio:54/85.6;border-radius:18px;background:#fff;color:#0b1f3b;overflow:hidden;border:1px solid #d9e2ef;box-shadow:0 10px 26px rgba(22,50,85,.12);font-family:Arial,sans-serif}.student-portrait-card *{box-sizing:border-box}.student-portrait-card.is-preview{max-width:360px;margin:auto}.portrait-head{position:relative;height:23%;display:grid;grid-template-columns:22% 1fr;gap:4%;align-items:center;padding:5.8% 7% 4%;overflow:hidden}.portrait-logo{position:relative;z-index:2;width:100%;aspect-ratio:1;display:grid;place-items:center}.portrait-logo img{width:100%;height:100%;object-fit:contain}.portrait-school{position:relative;z-index:2;display:grid;gap:1.6%;line-height:1.12}.portrait-school span{font-size:2.25%;letter-spacing:.03em}.portrait-school strong{font-size:4.1%;line-height:1.04}.portrait-school em{font-size:2.2%;font-style:normal}.portrait-school small{font-size:1.9%;line-height:1.25}.portrait-accent{position:absolute;right:-9%;top:-10%;width:45%;height:115%;background:linear-gradient(145deg,rgba(35,126,235,.18),rgba(105,174,255,.04));clip-path:polygon(35% 0,100% 0,100% 100%,0 25%)}.portrait-rule{height:1px;background:#75aff2;margin:0 6.8%}.portrait-body{position:relative;height:68%;padding:5.5% 6.8%}.portrait-title{font-size:4.3%;font-weight:800;color:#0870db;letter-spacing:.04em;margin-bottom:7%}.portrait-title:after{content:"";display:block;width:13%;height:3px;background:#0870db;border-radius:99px;margin-top:2.7%}.portrait-body h2{font-size:5.2%;line-height:1.12;margin:0;width:58%;font-weight:850}.portrait-info{position:absolute;left:6.8%;top:39%;width:53%;display:grid;gap:5.8%;font-size:3.05%;line-height:1.22}.info-row{display:flex;align-items:flex-start;gap:5.5%;min-height:7%}.info-row>span:last-child{display:block;flex:1}.inline-icon{width:9%;min-width:9%;aspect-ratio:1;display:inline-grid;place-items:center;color:#0870db;flex-shrink:0}.inline-icon svg{display:block;width:100%;height:100%}.birth-line{padding-left:0}.portrait-photo{position:absolute;right:6.8%;top:7%;width:35%;height:32%;border-radius:6%;overflow:hidden;background:#0c79e8;display:grid;place-items:center;font-size:7%;font-weight:800}.portrait-photo img,.portrait-photo .student-avatar-placeholder{width:100%;height:100%}.portrait-photo img{object-fit:cover}.portrait-qr{position:absolute;right:6.8%;bottom:10%;width:35%;aspect-ratio:1;background:#fff;border:1px solid #d6dde8;border-radius:4.5%;padding:3%;display:grid;place-items:center;overflow:hidden}.portrait-qr svg,.portrait-qr canvas{width:100%!important;height:100%!important;display:block}.portrait-qr.empty-qr{font-size:2.5%;text-align:center;color:#6d7a8d}.portrait-card-number{position:absolute;right:6.8%;bottom:5.4%;width:35%;text-align:center;font-size:2.65%;font-weight:700;letter-spacing:.02em}.portrait-validity{position:absolute;left:6.8%;bottom:9.3%;width:43%;border:1px solid #9cc8fa;border-radius:8%;padding:3.2% 4%;background:#f7fbff}.portrait-validity small{display:block;font-size:2.5%;margin-bottom:1%}.portrait-validity strong{display:block;color:#0870db;font-size:3.8%;line-height:1.1}.portrait-footer{position:absolute;left:6.8%;right:6.8%;bottom:2.1%;height:4.2%;border-top:1px solid #8dbdf3;display:flex;align-items:flex-end;justify-content:center;gap:3%;font-size:2%;white-space:nowrap}.portrait-footer span{display:inline-flex;align-items:center;gap:2.2%}.portrait-footer em{font-style:normal}.portrait-footer .inline-icon{width:1.7em;min-width:1.7em;color:#0870db}.portrait-footer b{font-weight:400;color:#7b8797}.student-portrait-back .portrait-head{height:22%}.back-body{position:relative;height:69%;padding:4.5% 6.8%}.back-body h2{font-size:4.1%;color:#0870db;margin:0 0 4.5%;letter-spacing:.03em}.back-body h2:after{content:"";display:block;width:10%;height:3px;background:#0870db;border-radius:99px;margin-top:2.3%}.back-body ul{margin:0;padding-left:5.2%;display:grid;gap:2.5%;font-size:2.65%;line-height:1.3}.back-body li::marker{color:#0870db}.return-box{margin-top:4.2%;border:1px solid #9cc8fa;border-radius:4%;padding:3.5% 4%;display:grid;gap:1.2%;background:#fbfdff;font-size:2.4%;line-height:1.2}.return-box b{font-size:3.1%}.return-box a{color:#0870db}.date-box{margin-top:3%;border:1px solid #a8cff9;border-radius:4%;display:grid;grid-template-columns:1fr 1fr;padding:3% 4%;gap:5%}.date-box>div+div{border-left:1px solid #b6d7fa;padding-left:8%}.date-box small{display:block;font-size:2.25%;margin-bottom:1%}.date-box strong{color:#0870db;font-size:3.2%}.principal-box{position:absolute;right:6.8%;bottom:3.2%;width:46%;display:grid;justify-items:center;align-content:end;text-align:center;font-size:2.35%;line-height:1.28;row-gap:1.2%}.principal-box span,.principal-box strong,.principal-box b{display:block;width:100%}.principal-box strong{font-size:3.2%}.principal-box .principal-space{height:18%;min-height:18%}.principal-box b{text-align:center;font-weight:600;letter-spacing:.01em}.print-sheet-portrait .student-portrait-card{width:54mm;height:85.6mm;aspect-ratio:auto;border-radius:2.8mm;box-shadow:none}.print-sheet-portrait .student-portrait-card.is-print{border:.2mm solid #cad5e4}.print-sheet-portrait .portrait-title:after,.print-sheet-portrait .back-body h2:after{height:.45mm}.print-sheet-portrait .portrait-rule,.print-sheet-portrait .portrait-footer{border-width:.2mm}.print-sheet-portrait .portrait-qr{border-width:.2mm}.print-sheet-portrait .portrait-validity,.print-sheet-portrait .return-box,.print-sheet-portrait .date-box{border-width:.2mm}.print-sheet-portrait .portrait-school span{font-size:1.25mm}.print-sheet-portrait .portrait-school strong{font-size:2.2mm}.print-sheet-portrait .portrait-school em{font-size:1.15mm}.print-sheet-portrait .portrait-school small{font-size:1.02mm}.print-sheet-portrait .portrait-title{font-size:2.3mm}.print-sheet-portrait .portrait-body h2{font-size:2.8mm}.print-sheet-portrait .portrait-info{font-size:1.65mm}.print-sheet-portrait .portrait-card-number{font-size:1.45mm}.print-sheet-portrait .portrait-validity small{font-size:1.35mm}.print-sheet-portrait .portrait-validity strong{font-size:2.05mm}.print-sheet-portrait .portrait-footer{font-size:1.08mm}.print-sheet-portrait .back-body h2{font-size:2.2mm}.print-sheet-portrait .back-body ul{font-size:1.43mm}.print-sheet-portrait .return-box{font-size:1.3mm}.print-sheet-portrait .return-box b{font-size:1.7mm}.print-sheet-portrait .date-box small{font-size:1.2mm}.print-sheet-portrait .date-box strong{font-size:1.72mm}.print-sheet-portrait .principal-box{font-size:1.25mm}.print-sheet-portrait .principal-box strong{font-size:1.72mm}
@media(max-width:760px){.student-portrait-card.is-preview{max-width:330px}.portrait-school span{font-size:2.1%}.portrait-school strong{font-size:3.8%}.portrait-school small,.portrait-school em{font-size:1.85%}}

/* HADIRIYA v0.4.1 — Foto Kartu Pelajar 3:4 dan avatar gender */
.student-portrait-front .portrait-photo{
  width:32%;
  height:auto;
  aspect-ratio:3/4;
  top:7%;
  border-radius:6%;
  background:#eaf4ff;
}
.student-portrait-front .portrait-photo>img,
.student-portrait-front .portrait-photo>.student-avatar-placeholder,
.student-portrait-front .portrait-photo>.student-avatar-placeholder svg{
  width:100%;
  height:100%;
  display:block;
}
.student-portrait-front .portrait-photo>img{object-fit:cover;object-position:center top}
.student-avatar-placeholder{overflow:hidden;background:#eaf4ff}
.student-avatar-placeholder svg{object-fit:cover}
.print-sheet-portrait .student-portrait-front .portrait-photo{
  width:32%;
  height:auto;
  aspect-ratio:3/4;
}


/* HADIRIYA v0.4.4 — Tempat/tanggal lahir dan masa berlaku minimal */
.student-portrait-front .info-row-birth{align-items:flex-start}
.student-portrait-front .portrait-validity{
  left:6.8%;
  bottom:7.35%;
  width:50%;
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
  display:flex;
  align-items:baseline;
  gap:2%;
  white-space:nowrap;
  color:#65758a;
}
.student-portrait-front .portrait-validity small{
  display:inline;
  margin:0;
  font-size:2.25%;
  line-height:1.1;
}
.student-portrait-front .portrait-validity strong{
  display:inline;
  color:#405a77;
  font-size:2.5%;
  font-weight:700;
  line-height:1.1;
}
.print-sheet-portrait .student-portrait-front .portrait-validity{border:0;padding:0;background:transparent}
.print-sheet-portrait .student-portrait-front .portrait-validity small{font-size:1.18mm}
.print-sheet-portrait .student-portrait-front .portrait-validity strong{font-size:1.32mm}

/* HADIRIYA v0.5.0 — Identitas depan multi-tahun tanpa kelas */
.student-portrait-front .portrait-body h2{width:58%;font-size:18px;line-height:1.08}
.student-portrait-front .portrait-title{font-size:14px;margin-bottom:5%}
.student-portrait-front .portrait-info{left:6.8%;top:33%;width:55%;gap:2.5%;font-size:inherit;line-height:1.1}
.student-portrait-front .info-row{gap:5%;min-height:0;align-items:center}
.student-portrait-front .info-row .inline-icon{width:10%;min-width:10%;color:#0870db}
.student-portrait-front .info-copy{display:grid;gap:1px;min-width:0;line-height:1.08}
.student-portrait-front .info-copy small{display:block;color:#1269be;font-size:7px;font-weight:800;letter-spacing:.035em;line-height:1.05}
.student-portrait-front .info-copy strong{display:-webkit-box;overflow:hidden;color:#0b1f3b;font-size:10.5px;font-weight:750;line-height:1.08;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.student-portrait-front .info-row-card .info-copy strong{font-size:9.5px;letter-spacing:.01em}
.student-portrait-front .portrait-photo{right:6.8%;top:7%;width:32%}
.student-portrait-front .portrait-qr{right:6.8%;bottom:11%;width:32%;padding:2.5%}
.student-portrait-front .portrait-validity{bottom:6.8%;width:56%;gap:1.6%}
.student-portrait-front .portrait-validity small{font-size:7px}
.student-portrait-front .portrait-validity strong{font-size:8px}
.student-portrait-back .principal-box small{display:block;width:100%;font-size:8px;color:#405a77}
.student-portrait-back .principal-box .principal-space{width:100%;height:34px;min-height:34px}
.student-portrait-card.is-preview .portrait-school span{font-size:7px}.student-portrait-card.is-preview .portrait-school strong{font-size:14px}.student-portrait-card.is-preview .portrait-school em{font-size:7px}.student-portrait-card.is-preview .portrait-school small{font-size:6.5px}
.student-portrait-card.is-preview .portrait-footer{font-size:7px}
.student-portrait-back.is-preview .back-body h2{font-size:14px}.student-portrait-back.is-preview .back-body ul{font-size:9.5px}.student-portrait-back.is-preview .return-box{font-size:8.5px}.student-portrait-back.is-preview .return-box b{font-size:10.5px}.student-portrait-back.is-preview .date-box small{font-size:7.5px}.student-portrait-back.is-preview .date-box strong{font-size:10.5px}.student-portrait-back.is-preview .principal-box{font-size:8px}.student-portrait-back.is-preview .principal-box strong{font-size:10.5px}
.print-sheet-portrait .student-portrait-front .portrait-title{font-size:2.3mm}
.print-sheet-portrait .student-portrait-front .portrait-body h2{font-size:2.8mm}
.print-sheet-portrait .student-portrait-front .portrait-info{top:33%;gap:1.05mm;font-size:inherit}
.print-sheet-portrait .student-portrait-front .info-row .inline-icon{width:3mm;min-width:3mm}
.print-sheet-portrait .student-portrait-front .info-copy{gap:.2mm}
.print-sheet-portrait .student-portrait-front .info-copy small{font-size:1mm}
.print-sheet-portrait .student-portrait-front .info-copy strong{font-size:1.45mm}
.print-sheet-portrait .student-portrait-front .info-row-card .info-copy strong{font-size:1.3mm}
.print-sheet-portrait .student-portrait-front .portrait-validity small{font-size:1.02mm}
.print-sheet-portrait .student-portrait-front .portrait-validity strong{font-size:1.18mm}
.print-sheet-portrait .student-portrait-back .principal-box small{font-size:1.05mm}
.print-sheet-portrait .student-portrait-back .principal-box .principal-space{height:6mm;min-height:6mm}

/* HADIRIYA v0.5.1 — Ukuran kartu 5,4 × 8,6 cm */
.id-card-preview,.id-card-preview.pro{aspect-ratio:86/54}
.print-sheet.print-sheet-landscape{padding:8.5mm 12.4mm;grid-template-columns:86mm 86mm}
.print-card{width:86mm;height:54mm}
.student-portrait-card{aspect-ratio:54/86}
.print-sheet.print-sheet-portrait{padding:10mm 8.5mm;grid-auto-rows:86mm}
.print-sheet-portrait .student-portrait-card{width:54mm;height:86mm}

/* HADIRIYA v0.6.0 — Modern Institutional Premium */
.premium-card{--premium-blue:#075fbd;--premium-navy:#08254a;--premium-sky:#eaf4ff;isolation:isolate;border-color:#c8d8eb;background:linear-gradient(165deg,#fff 0%,#fff 62%,#f1f7ff 100%);box-shadow:0 16px 38px rgba(8,37,74,.18)}
.premium-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0,transparent 12px,rgba(8,92,181,.025) 12px,rgba(8,92,181,.025) 13px)}
.premium-card::after{content:"H";position:absolute;z-index:0;right:-9%;top:36%;font-size:260px;font-weight:900;line-height:1;color:rgba(8,92,181,.028);pointer-events:none}
.premium-card .portrait-head,.premium-card .portrait-body,.premium-card .back-body,.premium-card .portrait-footer,.premium-card .portrait-microtext,.premium-card .portrait-dept-accent{z-index:1}
.premium-card .portrait-head{height:24%;padding:4.7% 6.5% 5.3%;grid-template-columns:21% 1fr;gap:4.2%;color:#fff;background:linear-gradient(142deg,#0877df 0%,#0759ad 58%,#063c7b 100%);overflow:hidden}
.premium-card .portrait-head::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 85% 18%,rgba(255,255,255,.18) 0 1px,transparent 1.5px) 0 0/12px 12px,linear-gradient(120deg,transparent 45%,rgba(255,255,255,.08) 45% 46%,transparent 46%)}
.premium-card .portrait-head::after{content:"";position:absolute;z-index:1;left:-6%;right:-6%;bottom:-1px;height:10%;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0}
.premium-card .portrait-school,.premium-card .portrait-logo{z-index:2}
.premium-card .portrait-school span,.premium-card .portrait-school em,.premium-card .portrait-school small{color:rgba(255,255,255,.88)}
.premium-card .portrait-school strong{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.16)}
.premium-card .portrait-logo{padding:5%;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(5,40,80,.25);transform:translateY(3%)}
.premium-card .portrait-accent{right:-8%;top:-35%;width:48%;height:150%;opacity:.55;background:linear-gradient(145deg,rgba(255,255,255,.15),transparent);clip-path:polygon(52% 0,100% 0,100% 100%,0 70%)}
.premium-card .portrait-dept-accent{position:absolute;right:0;top:27%;width:1.25%;height:48%;border-radius:99px 0 0 99px;background:var(--dept-accent);box-shadow:0 0 12px color-mix(in srgb,var(--dept-accent) 35%,transparent)}
.premium-card .portrait-body{height:69%;padding:4.6% 6.8%}
.premium-card .portrait-title{display:flex;align-items:center;gap:3%;margin:0 0 4.5%;color:var(--premium-blue);letter-spacing:.035em}
.premium-card .portrait-title::after{display:none}
.premium-card .portrait-title span{font-size:14px;font-weight:900}
.premium-card .portrait-title small{display:inline-flex;align-items:center;border:1px solid #b9d9fa;border-radius:999px;padding:1.2% 2.4%;background:#f0f7ff;color:#40729f;font-size:6px;font-weight:850;letter-spacing:.08em;white-space:nowrap}
.premium-card .portrait-body h2{color:var(--premium-navy);letter-spacing:-.02em;text-wrap:balance}
.premium-card .portrait-info{top:33.5%;width:54%;gap:2.25%}
.premium-card .info-row .inline-icon{padding:1.4%;border-radius:28%;background:linear-gradient(145deg,#e7f3ff,#f7fbff);box-shadow:inset 0 0 0 1px #c8e0f8;color:var(--premium-blue)}
.premium-card .info-copy small{color:#3475b4}
.premium-card .info-copy strong{color:var(--premium-navy)}
.premium-card .info-row-department .inline-icon{color:var(--dept-accent);background:color-mix(in srgb,var(--dept-accent) 9%,white);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dept-accent) 24%,white)}
.premium-card .portrait-photo{right:6.3%;top:5.4%;width:32.5%;padding:1.1%;border:0;border-radius:8%;background:#fff;box-shadow:0 0 0 1px #b9d7f5,0 8px 18px rgba(8,67,126,.2)}
.premium-card .portrait-photo img,.premium-card .portrait-photo .student-avatar-placeholder{border-radius:6%}
.premium-card .portrait-photo .photo-corner{position:absolute;z-index:2;right:-1px;top:-1px;width:28%;height:16%;border-radius:0 0 0 65%;background:var(--dept-accent)}
.premium-card .portrait-qr-panel{position:absolute;right:6.3%;bottom:10.4%;width:32.5%;display:grid;gap:2px;padding:2.1%;border:1px solid #c7d9ec;border-radius:7%;background:#fff;box-shadow:0 7px 18px rgba(8,50,95,.13);text-align:center}
.premium-card .portrait-qr-panel>small{color:#2869a7;font-size:6px;font-weight:900;letter-spacing:.08em;line-height:1}
.premium-card .portrait-qr{position:relative;right:auto;bottom:auto;width:100%;padding:2%;border:0;border-radius:4%;background:#fff}
.premium-card .portrait-validity{left:6.8%;bottom:5.8%;width:54%;display:flex;align-items:center;gap:3%;padding:2.2% 3%;border:1px solid #c8e0f8;border-radius:999px;background:linear-gradient(90deg,#e9f4ff,#f8fbff);color:#405d78}
.premium-card .portrait-validity i{width:14%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--premium-blue);color:#fff;font-size:8px;font-style:normal;font-weight:900}
.premium-card .portrait-validity span{display:grid;min-width:0}
.premium-card .portrait-validity small{font-size:6px;font-weight:800;letter-spacing:.06em}
.premium-card .portrait-validity strong{color:var(--premium-navy);font-size:8px}
.premium-card .portrait-microtext{position:absolute;left:6.8%;right:6.8%;bottom:6.4%;overflow:hidden;color:#7792ae;font-size:5.2px;line-height:1;letter-spacing:.1em;text-align:center;white-space:nowrap}
.premium-card .portrait-footer{left:4.8%;right:4.8%;bottom:1.25%;height:4.45%;padding:0 3%;border:0;border-radius:999px;background:linear-gradient(90deg,#e8f3ff,#f4f9ff,#e8f3ff);align-items:center;color:#254f79;box-shadow:inset 0 0 0 1px #d1e4f7}
.premium-card .portrait-footer .inline-icon{color:var(--premium-blue)}
.premium-card .portrait-footer b{color:#9eb7cf}
.premium-card.student-portrait-back .portrait-head{height:21.5%}
.premium-card .back-body{height:71.5%;padding:3.8% 6.8%}
.premium-card .back-kicker{margin-bottom:1%;color:#5980a8;font-size:6.5px;font-weight:850;letter-spacing:.12em}
.premium-card .back-body h2{margin:0 0 3.2%;color:var(--premium-navy);font-size:14px;letter-spacing:.025em}
.premium-card .back-body h2::after{width:13%;margin-top:1.8%;background:linear-gradient(90deg,var(--premium-blue),var(--dept-accent))}
.premium-card .back-body ul{padding:0;margin:0;list-style:none;gap:2.1%}
.premium-card .back-body li{position:relative;padding-left:6%;color:#17324f}
.premium-card .back-body li::before{content:"✓";position:absolute;left:0;top:.05em;width:4.2%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#e5f2ff;color:var(--premium-blue);font-size:.8em;font-weight:900}
.premium-card .return-box{grid-template-columns:12% 1fr;align-items:center;gap:3%;margin-top:3.4%;padding:3% 3.4%;border:0;border-radius:5%;background:linear-gradient(110deg,#e5f2ff,#f5faff);box-shadow:inset 0 0 0 1px #c6def6}
.premium-card .return-box>i{width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#0b7de6,#0755a8);color:#fff;font-size:13px;font-style:normal;font-weight:900}
.premium-card .return-box>span{display:grid;gap:1px;min-width:0}
.premium-card .return-box strong{color:#1b659f;font-size:6.5px;letter-spacing:.055em}
.premium-card .return-box b{color:var(--premium-navy);font-size:9px}
.premium-card .return-box em{overflow:hidden;color:#54718d;font-size:6.2px;font-style:normal;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.premium-card .date-box{margin-top:2.6%;padding:2.7% 3.5%;border:0;border-radius:5%;background:#fff;box-shadow:inset 0 0 0 1px #c8ddf3,0 4px 10px rgba(8,55,104,.06)}
.premium-card .date-box small{color:#5a7b9b;font-weight:800;letter-spacing:.045em}
.premium-card .date-box strong{color:var(--premium-navy)}
.premium-card .principal-box{bottom:3.2%;color:#355572}
.premium-card .principal-box strong,.premium-card .principal-box b{color:var(--premium-navy)}
.premium-card .principal-box b{padding-top:1.5%;border-top:1px solid #b8cee4}
.premium-card .principal-box small{color:#607d99}
.premium-card.student-portrait-back .portrait-microtext{bottom:6.3%}
.print-sheet-portrait .premium-card{box-shadow:none}
.print-sheet-portrait .premium-card::after{font-size:41mm}
.print-sheet-portrait .premium-card .portrait-title span{font-size:2.3mm}
.print-sheet-portrait .premium-card .portrait-title small{font-size:.82mm}
.print-sheet-portrait .premium-card .portrait-qr-panel{gap:.3mm;border-width:.2mm}
.print-sheet-portrait .premium-card .portrait-qr-panel>small{font-size:.82mm}
.print-sheet-portrait .premium-card .portrait-validity{border-width:.2mm}
.print-sheet-portrait .premium-card .portrait-validity i{font-size:1.1mm}
.print-sheet-portrait .premium-card .portrait-validity small{font-size:.82mm}
.print-sheet-portrait .premium-card .portrait-validity strong{font-size:1.1mm}
.print-sheet-portrait .premium-card .portrait-microtext{font-size:.7mm}
.print-sheet-portrait .premium-card .back-kicker{font-size:.9mm}
.print-sheet-portrait .premium-card .back-body h2{font-size:2.15mm}
.print-sheet-portrait .premium-card .return-box{border-width:.2mm}
.print-sheet-portrait .premium-card .return-box>i{font-size:1.8mm}
.print-sheet-portrait .premium-card .return-box strong{font-size:.88mm}
.print-sheet-portrait .premium-card .return-box b{font-size:1.25mm}
.print-sheet-portrait .premium-card .return-box em{font-size:.82mm}

/* HADIRIYA v0.6.1 — Layout overlap and clipping fixes */
.premium-card .portrait-school{gap:0}
.premium-card .portrait-title{width:54%;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:2.8%}
.premium-card .portrait-title small{order:-1;max-width:100%;padding:1.1% 2.8%}
.premium-card .portrait-microtext{bottom:6.65%;overflow:visible;font-size:4.8px;line-height:1.35}
.premium-card.student-portrait-back .portrait-microtext{bottom:6.65%}
.premium-card .return-box em{overflow:visible;display:block;white-space:normal;text-overflow:clip;line-height:1.22}
.print-sheet-portrait .premium-card .portrait-microtext{font-size:.66mm;line-height:1.35}
.print-sheet-portrait .premium-card .return-box em{font-size:.78mm;line-height:1.22}

/* HADIRIYA v0.7.0 — Configurable department colors */
.department-color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.form-group .department-color-item{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.department-color-item>span{display:grid;min-width:0}
.department-color-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.department-color-item small{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.department-color-item input[type="color"]{width:54px;height:40px;flex:0 0 auto;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.department-color-item input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.department-color-item input[type="color"]::-webkit-color-swatch{border:0;border-radius:6px}
@media(max-width:520px){.department-color-grid{grid-template-columns:1fr}}

/* HADIRIYA v0.7.1 — Centered print and PDF pages */
.print-sheet{box-sizing:border-box;justify-content:center;align-content:center}
@media print{
  html,body{margin:0!important;padding:0!important}
  body.print-preview-body{min-width:0!important;background:#fff!important}
  .print-only{display:block!important;width:100%!important;margin:0!important;padding:0!important}
  .print-sheet{margin:0 auto!important;overflow:hidden;box-shadow:none!important;break-after:page;page-break-after:always}
  .print-sheet:last-child{break-after:auto;page-break-after:auto}
  .print-sheet.print-sheet-portrait{width:297mm!important;height:210mm!important;min-height:210mm!important}
  .print-sheet.print-sheet-landscape{width:210mm!important;height:297mm!important;min-height:297mm!important}
}

/* HADIRIYA v0.8.0 — Principal title and PNG export */
.premium-card .principal-box .principal-role{color:inherit;font:inherit;font-weight:400;white-space:nowrap}
.premium-card .portrait-dept-accent{box-shadow:0 0 12px rgba(8,67,126,.18)}
.premium-card .info-row-department .inline-icon{background:#f7fbff;box-shadow:inset 0 0 0 1px var(--dept-accent)}
.card-print-toolbar{flex-wrap:wrap}
.png-export-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.png-export-controls select{width:min(310px,34vw);min-height:38px;padding:7px 10px;background:#fff;color:#10233c}
.png-export-controls .button{min-height:38px;padding:8px 12px;font-size:12px}
.png-export-status{min-width:120px;color:#405a77;font-size:11px;font-weight:700}
.png-export-status.error{color:#a92323}
@media(max-width:820px){.png-export-controls{width:100%}.png-export-controls select{width:100%}.png-export-status{width:100%;text-align:center}}

/* HADIRIYA v0.8.1 — One canonical student-card render across preview, PDF, and PNG */
.student-portrait-card.premium-card:is(.is-preview,.is-print){container-type:inline-size}
.student-portrait-card.premium-card:is(.is-preview,.is-print){border-radius:5% / 3.14%}
.student-portrait-card.premium-card:is(.is-preview,.is-print)::before{
  background:linear-gradient(135deg,transparent 0 46%,rgba(8,92,181,.025) 47% 50%,transparent 51%) 0 0/4.72cqw 4.72cqw repeat;
}
.student-portrait-card.premium-card:is(.is-preview,.is-print)::after{font-size:72.22cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-head::before{
  background:radial-gradient(circle at 85% 18%,rgba(255,255,255,.18) 0 7%,transparent 11%) 0 0/3.33cqw 3.33cqw,linear-gradient(120deg,transparent 45%,rgba(255,255,255,.08) 45% 46%,transparent 46%);
}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-head{font-size:3.89cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-school span{font-size:1.94cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-school strong{font-size:3.89cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-school em{font-size:1.94cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-school small{font-size:1.81cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-footer{font-size:1.94cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-microtext{font-size:1.33cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-title span{font-size:3.89cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-title small{font-size:1.67cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-title{gap:.56cqw;font-size:3.89cqw}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-title small{border-width:.28cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-body h2{font-size:5cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-body{font-size:3.89cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-info{left:6.8%;top:33.5%;width:54%;gap:.78cqw;font-size:3.89cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .info-row .inline-icon{width:10%;min-width:10%;font-size:3.89cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .info-copy{gap:.28cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .info-copy small{font-size:1.94cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .info-copy strong{font-size:2.92cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .info-row-card .info-copy strong{font-size:2.64cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-photo{right:6.3%;top:5.4%;width:32.5%;height:auto;aspect-ratio:3/4;padding:1.1%}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-qr-panel{gap:.56cqw;border-width:.28cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-qr-panel>small{font-size:1.67cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-validity{left:6.8%;bottom:5.8%;width:54%;display:flex;align-items:center;gap:3%;padding:2.2% 3%;border:.28cqw solid #c8e0f8;border-radius:999px;background:linear-gradient(90deg,#e9f4ff,#f8fbff);color:#405d78}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-validity i{font-size:2.22cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-validity small{font-size:1.67cqw}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-validity strong{font-size:2.22cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .back-kicker{font-size:1.81cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .back-body h2{font-size:3.89cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .back-body h2::after{height:.83cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .back-body ul{font-size:2.64cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .return-box{font-size:2.36cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .return-box>i{font-size:3.61cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .return-box>span{gap:.28cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .return-box strong{font-size:1.81cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .return-box b{font-size:2.5cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .return-box em{font-size:1.72cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .date-box{font-size:3.89cqw;line-height:1.5}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .date-box small{font-size:2.08cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .date-box strong{font-size:2.92cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .principal-box{font-size:2.22cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .principal-box b{border-top-width:.28cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .principal-box small{font-size:2.22cqw}
.student-portrait-card.premium-card.student-portrait-back:is(.is-preview,.is-print) .principal-box .principal-space{height:9.44cqw;min-height:9.44cqw}

/* HADIRIYA v0.8.2 — PNG ZIP scope selector */
.png-batch-scope{display:flex;align-items:center;gap:6px;color:#405a77;font-size:11px;font-weight:800;white-space:nowrap}
.png-export-controls .png-batch-scope select{width:auto;min-width:132px}
@media(max-width:820px){.png-batch-scope{width:100%;justify-content:center}.png-export-controls .png-batch-scope select{width:min(220px,60vw)}}

/* HADIRIYA v0.8.3 — Shadow-free student cards for print and PNG */
.student-portrait-card,
.student-portrait-card *,
.student-portrait-card::before,
.student-portrait-card::after,
.student-portrait-card *::before,
.student-portrait-card *::after{box-shadow:none!important;text-shadow:none!important;filter:none!important}
.student-portrait-card.premium-card .portrait-photo{border:.28cqw solid #b9d7f5}
.student-portrait-card.premium-card .info-row .inline-icon{border:.28cqw solid #c8e0f8}
.student-portrait-card.premium-card .info-row-department .inline-icon{border-color:var(--dept-accent)}
.student-portrait-card.premium-card .portrait-footer{border:.28cqw solid #d1e4f7}
.student-portrait-card.premium-card .return-box{border:.28cqw solid #c6def6}
.student-portrait-card.premium-card .date-box{border:.28cqw solid #c8ddf3}

/* HADIRIYA v0.8.4 — Cleaner front-card decorative layers */
.student-portrait-card.premium-card .portrait-accent{display:none!important}
.student-portrait-card.premium-card::after{content:none!important;display:none!important}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-head::before{
  background:radial-gradient(circle at 85% 18%,rgba(255,255,255,.18) 0 7%,transparent 11%) 0 0/3.33cqw 3.33cqw;
}
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-validity{
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
}

/* HADIRIYA v0.8.5 — Straight header with rounded lower corners */
.student-portrait-card.premium-card .portrait-head{border-radius:0 0 4cqw 4cqw}
.student-portrait-card.premium-card .portrait-head::after{content:none!important;display:none!important}

/* HADIRIYA v0.8.6 — School logo without a white circular backing */
.student-portrait-card.premium-card .portrait-logo{
  padding:0;
  border-radius:0;
  background:transparent;
}

/* HADIRIYA v0.8.7 — Principal line, clean photo, and unified department icon */
.student-portrait-card.premium-card .portrait-photo .photo-corner{display:none!important}
.student-portrait-card.premium-card .info-row-department .inline-icon{
  color:var(--premium-blue);
  border-color:#c8e0f8;
  background:linear-gradient(145deg,#e7f3ff,#f7fbff);
}
.student-portrait-card.premium-card .principal-box b{
  justify-self:center;
  width:fit-content;
  max-width:100%;
  padding:0 0 1.5%;
  border-top:0;
  border-bottom:.28cqw solid #b8cee4;
}

/* HADIRIYA v0.8.8 — Larger, proportional card-header typography */
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-school{
  min-width:0;
  gap:1%;
  line-height:1.08;
}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-school span{
  font-size:2.35cqw;
  line-height:1.08;
}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-school strong{
  font-size:4.55cqw;
  line-height:1;
}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-school em{
  font-size:2.3cqw;
  line-height:1.08;
}
.student-portrait-card.premium-card:is(.is-preview,.is-print) .portrait-school small{
  font-size:2.15cqw;
  line-height:1.16;
}

/* HADIRIYA v0.8.9 — More space below the student-card title */
.student-portrait-card.premium-card.student-portrait-front:is(.is-preview,.is-print) .portrait-title{
  margin-bottom:5.5%;
}


/* HADIRIYA v0.9.8 — Mobile Bottom Navigation */
.sidebar-backdrop,.mobile-bottom-nav{display:none}
.mobile-bottom-icon{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto}
.mobile-bottom-icon svg{display:block;width:23px;height:23px}
.mobile-bottom-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:820px){
  body.has-mobile-bottom-nav{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  body.has-mobile-bottom-nav .content{padding-bottom:24px}
  body.nav-open{overflow:hidden;touch-action:none}
  .mobile-menu{display:none}
  .sidebar,.scan-workspace-page .sidebar{
    display:block;
    left:0;
    width:min(86vw,320px);
    max-width:320px;
    height:100dvh;
    padding:18px 14px calc(24px + env(safe-area-inset-bottom,0px));
    transform:translateX(-104%);
    transition:transform .24s cubic-bezier(.2,.75,.25,1);
    box-shadow:18px 0 50px rgba(3,18,38,.22);
    overscroll-behavior:contain;
    z-index:130;
  }
  .sidebar.open{left:0;transform:translateX(0)}
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    border:0;
    padding:0;
    background:rgba(7,20,38,.42);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    z-index:120;
  }
  body.nav-open .sidebar-backdrop{opacity:1;pointer-events:auto}
  .mobile-bottom-nav{
    position:fixed;
    display:grid;
    grid-template-columns:repeat(var(--mobile-nav-count),minmax(0,1fr));
    align-items:stretch;
    left:10px;
    right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    min-height:64px;
    padding:5px;
    border:1px solid color-mix(in srgb,var(--line) 84%,transparent);
    border-radius:20px;
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    box-shadow:0 14px 40px rgba(21,41,71,.18),0 2px 8px rgba(21,41,71,.08);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    z-index:110;
  }
  .mobile-bottom-item{
    appearance:none;
    -webkit-appearance:none;
    min-width:0;
    min-height:54px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 3px;
    border:0;
    border-radius:15px;
    background:transparent;
    color:var(--muted);
    text-decoration:none;
    font-size:10px;
    font-weight:760;
    line-height:1.05;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .mobile-bottom-item:active{transform:scale(.96)}
  .mobile-bottom-item.active{
    color:var(--primary);
    background:color-mix(in srgb,var(--primary) 11%,var(--surface));
  }
  .mobile-bottom-item.active .mobile-bottom-icon{transform:translateY(-1px)}
  .mobile-bottom-menu{font-family:inherit;cursor:pointer}
  .scan-workspace-page{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto}
  .scan-workspace-page .content{height:auto;padding-bottom:24px}
}

@media(max-width:390px){
  .mobile-bottom-nav{left:6px;right:6px;bottom:calc(5px + env(safe-area-inset-bottom,0px));border-radius:18px}
  .mobile-bottom-item{padding-inline:2px;font-size:9px}
  .mobile-bottom-icon,.mobile-bottom-icon svg{width:22px;height:22px}
}

@media print{
  .mobile-bottom-nav,.sidebar-backdrop{display:none!important}
  body.has-mobile-bottom-nav{padding-bottom:0!important}
}

/* HADIRIYA v0.9.9 — Stable Mobile Viewport & Scanner Toolbar */
html{
  width:100%;
  min-height:100%;
  overflow-x:clip;
  overscroll-behavior-x:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:clip;
}
.button,.icon-button,.mobile-menu,.mobile-bottom-item{touch-action:manipulation}
.gate-status-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start;line-height:1.12}
.gate-status-copy small{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.72}
.gate-status-copy strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.fullscreen-unavailable{opacity:.58;cursor:default}

@media(max-width:820px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea{
    font-size:16px!important;
  }
  .app-shell,.main,.content,.page-grid,.card,.form-grid,.table-wrap{
    min-width:0;
    max-width:100%;
  }
  .scan-workspace-page{
    overscroll-behavior-x:none;
    -webkit-overflow-scrolling:touch;
  }
  .scan-workspace-page .topbar,
  .scan-workspace-page .content,
  .gate-main{
    contain:layout paint;
  }
  .gate-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    align-items:stretch;
  }
  .gate-toolbar>.connection-pill{
    width:100%;
    min-height:48px;
    justify-content:flex-start;
    border-radius:14px;
    padding:8px 11px;
    overflow:hidden;
    white-space:normal;
  }
  .gate-toolbar>.connection-pill .connection-dot{flex:0 0 auto}
  .gate-toolbar>.connection-pill .gate-status-copy{flex:1}
  .gate-toolbar .actions.gate-toolbar-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin-top:0;
  }
  .gate-toolbar .gate-status-tile,
  .gate-toolbar .gate-toolbar-button{
    width:100%;
    min-width:0;
    min-height:48px;
    margin:0;
    padding:8px 9px;
    border-radius:14px;
    justify-content:center;
    text-align:center;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.18;
    font-size:11px;
  }
  .gate-toolbar .camera-mode-badge{
    order:initial;
    grid-column:auto;
    max-width:none;
  }
  .gate-toolbar .device-badge{
    width:100%;
  }
  .gate-toolbar .gate-toolbar-button span{
    min-width:0;
  }
  .gate-input-wrap input{
    font-size:16px!important;
  }
  .mobile-bottom-nav{
    background:var(--surface);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transform:translateZ(0);
    backface-visibility:hidden;
    contain:layout paint style;
  }
}

@media(max-width:430px){
  .gate-toolbar .actions.gate-toolbar-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .gate-toolbar .gate-status-tile,
  .gate-toolbar .gate-toolbar-button{
    min-height:46px;
    padding:7px 6px;
    font-size:10.5px;
  }
  .gate-status-copy strong{font-size:10.5px}
}

/* HADIRIYA v0.9.10 — Mobile Camera Clip, Focus Mode & Visible Scan Status */
.gate-camera{
  position:relative;
  overflow:hidden!important;
  overflow:clip!important;
  isolation:isolate;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  clip-path:inset(0 round 17px);
  -webkit-clip-path:inset(0 round 17px);
}
.gate-camera-viewport{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:inherit;
  isolation:isolate;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  contain:strict;
}
.gate-camera-viewport video{
  z-index:1;
  transform:translateZ(0) scale(1.001);
  -webkit-transform:translateZ(0) scale(1.001);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.gate-camera .scan-frame{z-index:2;pointer-events:none}
.gate-camera .camera-placeholder{z-index:3}
.camera-scan-status{
  position:absolute;
  z-index:4;
  left:10px;
  right:10px;
  bottom:10px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  min-width:0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px;
  background:rgba(8,24,43,.88);
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  pointer-events:none;
}
.camera-scan-status span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.78;
}
.camera-scan-status strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  line-height:1.18;
}
.camera-scan-status small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1.25;
  opacity:.9;
}
.camera-scan-status.success{background:rgba(12,112,67,.94);border-color:rgba(190,255,222,.48)}
.camera-scan-status.warning{background:rgba(142,88,0,.94);border-color:rgba(255,229,168,.5)}
.camera-scan-status.danger{background:rgba(157,32,38,.95);border-color:rgba(255,198,201,.52)}
.camera-scan-status.info{background:rgba(8,38,68,.9);border-color:rgba(184,219,255,.42)}
.gate-toolbar-button.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* Native Fullscreen API */
.gate-workspace:fullscreen,
.gate-workspace:-webkit-full-screen{
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  padding:10px;
  overflow:hidden;
  background:var(--bg);
}
.gate-workspace:fullscreen .gate-side,
.gate-workspace:-webkit-full-screen .gate-side,
.gate-workspace:fullscreen .gate-device-settings,
.gate-workspace:-webkit-full-screen .gate-device-settings{
  display:none!important;
}
.gate-workspace:fullscreen .gate-main,
.gate-workspace:-webkit-full-screen .gate-main{
  height:100%;
}

/* Fullscreen fallback for iPhone/Safari and browsers without element fullscreen. */
html.scan-focus-mode,
body.scan-focus-mode{
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden!important;
  overscroll-behavior:none;
}
body.scan-focus-mode{
  position:fixed;
  inset:0;
  padding:0!important;
  background:var(--bg);
}
body.scan-focus-mode .topbar,
body.scan-focus-mode .mobile-bottom-nav,
body.scan-focus-mode .sidebar,
body.scan-focus-mode .sidebar-backdrop{
  display:none!important;
}
body.scan-focus-mode .app-shell,
body.scan-focus-mode .main,
body.scan-focus-mode .content,
body.scan-focus-mode .gate-workspace{
  width:100%;
  height:100dvh!important;
  min-height:0!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
body.scan-focus-mode .gate-workspace{display:block}
body.scan-focus-mode .gate-main{
  width:100%;
  height:100%;
  min-height:0;
  padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  border:0;
  border-radius:0;
  box-shadow:none;
}
body.scan-focus-mode .gate-side,
body.scan-focus-mode .gate-device-settings{display:none!important}

@media(max-width:820px){
  .gate-camera{
    width:100%;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4/3;
    margin-bottom:10px;
    border-radius:16px;
    clip-path:inset(0 round 16px);
    -webkit-clip-path:inset(0 round 16px);
  }
  .camera-scan-status{left:8px;right:8px;bottom:8px;padding:9px 10px;border-radius:12px}
  .camera-scan-status strong{font-size:15px}
  .camera-scan-status small{font-size:10.5px}
  .gate-result{
    width:100%;
    height:auto!important;
    min-height:0!important;
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:
      "avatar kicker"
      "avatar time"
      "avatar title"
      "avatar detail"
      "status status";
    column-gap:12px;
    row-gap:1px;
    align-items:center;
    justify-content:stretch;
    justify-items:stretch;
    padding:13px;
    text-align:left;
  }
  .gate-result .gate-avatar{grid-area:avatar;width:64px;height:64px;border-radius:18px;font-size:22px}
  .gate-result .result-kicker{grid-area:kicker;margin:0;font-size:9px}
  .gate-result .result-time{grid-area:time;margin:0;font-size:20px;line-height:1.1}
  .gate-result h2{grid-area:title;margin:2px 0 0;font-size:19px;line-height:1.12;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gate-result p{grid-area:detail;margin:1px 0 0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gate-result .result-status{grid-area:status;width:100%;margin-top:9px;border-radius:11px;padding:8px 10px;text-align:center;line-height:1.25}

  body.scan-focus-mode .gate-main{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  body.scan-focus-mode .gate-toolbar{
    flex:0 0 auto;
  }
  body.scan-focus-mode .gate-toolbar>.connection-pill,
  body.scan-focus-mode .gate-toolbar .gate-status-tile{
    display:none!important;
  }
  body.scan-focus-mode .gate-toolbar .actions.gate-toolbar-actions{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
    gap:8px;
  }
  body.scan-focus-mode .gate-stage{
    display:block;
    flex:1 1 auto;
    min-height:0;
    height:auto;
    overflow:hidden;
  }
  body.scan-focus-mode .gate-camera{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto;
    margin:0;
  }
  body.scan-focus-mode .gate-result{display:none!important}
  body.scan-focus-mode .gate-control{
    flex:0 0 auto;
    gap:7px;
  }
  body.scan-focus-mode .gate-hints{display:none}
  body.scan-focus-mode .gate-input-wrap input{min-height:44px}
  body.scan-focus-mode .gate-input-wrap .button{min-height:44px}
}

@media(max-width:430px){
  .gate-camera{aspect-ratio:1/1}
  .gate-result{grid-template-columns:58px minmax(0,1fr);padding:11px;column-gap:10px}
  .gate-result .gate-avatar{width:58px;height:58px;border-radius:16px}
  .gate-result h2{font-size:17px}
  .gate-result .result-time{font-size:18px}
  .camera-scan-status strong{font-size:14px}
  body.scan-focus-mode .gate-camera{aspect-ratio:auto}
}

/* HADIRIYA v0.10.0 — Pusat Laporan */
.print-report-header{display:none}.report-filter-card{margin-bottom:16px}.report-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}.report-filter-grid .form-group{margin:0}.report-search-field{grid-column:span 2}.report-check{display:flex;align-items:center;gap:8px;min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-weight:700}.report-check input{width:17px;height:17px}.report-filter-actions{display:flex;gap:8px}.report-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.report-tabs{display:flex;gap:7px;flex-wrap:wrap}.report-tab{display:inline-flex;align-items:center;min-height:40px;padding:9px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;font-weight:750;color:var(--muted)}.report-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}.report-actions{display:flex;gap:8px;flex-wrap:wrap}.report-overview{margin-bottom:18px}.report-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.report-status-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:12px}.report-status-card{padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--surface);min-width:0}.report-status-card span,.report-status-card small{display:block;color:var(--muted);font-size:11px}.report-status-card strong{display:block;font-size:23px;margin:4px 0}.report-status-card.success strong{color:var(--success)}.report-status-card.warning strong{color:var(--warning)}.report-status-card.info strong{color:var(--info)}.report-status-card.danger strong{color:var(--danger)}.report-alert-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.report-alert-grid article{padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2)}.report-alert-grid span{display:block;color:var(--muted);font-size:11px}.report-alert-grid strong{display:block;margin-top:3px;font-size:17px}.report-table-card{padding-bottom:15px}.report-table{min-width:1120px}.report-detail-table{min-width:1180px}.report-table th,.report-table td,.report-detail-table th,.report-detail-table td{vertical-align:top}.cell-link{display:block;text-decoration:none}.cell-link:hover .cell-main{color:var(--primary)}.report-note{max-width:300px;white-space:normal;overflow-wrap:anywhere}.alert.warning{padding:13px 15px;margin-bottom:16px;border-radius:14px;background:#fff5dc;border:1px solid #f0ddb0;color:#7b5000}
@media(max-width:1180px){.report-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.report-status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.report-kpi-grid,.report-alert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.report-filter-grid{grid-template-columns:1fr 1fr}.report-search-field{grid-column:1/-1}.report-toolbar{align-items:stretch;flex-direction:column}.report-tabs,.report-actions{width:100%}.report-tab{flex:1;justify-content:center;text-align:center}.report-actions .button{flex:1}.report-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-kpi-grid,.report-alert-grid{grid-template-columns:1fr 1fr}.report-filter-actions{grid-column:1/-1}.report-filter-actions .button{flex:1}.report-table,.report-detail-table{min-width:0}.report-table-card .table.mobile-cards tr{padding:13px}.report-note{max-width:none}}
@media(max-width:430px){.report-filter-grid{grid-template-columns:1fr}.report-search-field,.report-filter-actions{grid-column:1}.report-kpi-grid,.report-alert-grid{grid-template-columns:1fr}.report-status-card strong{font-size:21px}}
@media print{.no-print,.sidebar,.topbar,.mobile-bottom-nav{display:none!important}.app-shell{display:block}.content{max-width:none;padding:0}.card,.stat,.report-status-card,.report-alert-grid article{box-shadow:none}.print-report-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;border-bottom:2px solid #111;padding-bottom:9px;margin-bottom:14px}.print-report-header strong,.print-report-header span{display:block}.report-overview{break-inside:avoid}.report-status-grid{grid-template-columns:repeat(8,1fr)}.report-kpi-grid,.report-alert-grid{grid-template-columns:repeat(4,1fr)}.report-table-card{border:0;padding:0}.report-table,.report-detail-table{min-width:100%;font-size:9px}.report-table th,.report-table td,.report-detail-table th,.report-detail-table td{padding:5px}.pagination{display:none!important}body{background:#fff;color:#000}}

/* HADIRIYA v0.10.1 — Audit & Anomali */
.anomaly-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}.anomaly-risk-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 14px;margin-bottom:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}.anomaly-risk-strip>span{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}.anomaly-risk-strip strong{color:var(--text)}.dot{width:9px;height:9px;border-radius:999px;display:inline-block}.dot.danger{background:var(--danger)}.dot.warning{background:var(--warning)}.dot.info{background:var(--info)}.anomaly-filter-card,.audit-filter-card{margin-bottom:14px}.anomaly-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}.anomaly-filter-grid .form-group,.audit-filter-grid .form-group{margin:0}.anomaly-person-field,.anomaly-search-field{grid-column:span 2}.anomaly-filter-actions,.audit-filter-actions{display:flex;gap:8px}.anomaly-toolbar,.audit-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px}.anomaly-table-card,.audit-table-card{padding-bottom:15px}.anomaly-table{min-width:1320px}.anomaly-table th,.anomaly-table td{vertical-align:top}.anomaly-evidence,.audit-metadata{max-width:360px;white-space:normal;overflow-wrap:anywhere;line-height:1.45}.anomaly-review-note{margin-top:7px;padding:7px 9px;border-radius:9px;background:var(--surface-2);font-size:12px;white-space:normal;overflow-wrap:anywhere}.anomaly-review-form{display:grid;gap:8px;min-width:260px;margin-top:8px}.anomaly-review-form textarea{min-height:78px;font-size:12px;padding:9px}.audit-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}.audit-search-field{grid-column:span 2}.audit-table{min-width:1180px}.audit-table th,.audit-table td{vertical-align:top}.audit-metadata{max-width:420px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:.92em}
@media(max-width:1180px){.anomaly-filter-grid,.audit-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.anomaly-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.anomaly-person-field,.anomaly-search-field,.audit-search-field{grid-column:span 2}}
@media(max-width:760px){.anomaly-filter-grid,.audit-filter-grid{grid-template-columns:1fr 1fr}.anomaly-person-field,.anomaly-search-field,.audit-search-field{grid-column:1/-1}.anomaly-filter-actions,.audit-filter-actions{grid-column:1/-1}.anomaly-filter-actions .button,.audit-filter-actions .button{flex:1}.anomaly-toolbar,.audit-toolbar{align-items:stretch;flex-direction:column}.anomaly-toolbar .actions,.audit-toolbar .actions{width:100%}.anomaly-toolbar .button,.audit-toolbar .button{flex:1}.anomaly-table,.audit-table{min-width:0}.anomaly-evidence,.audit-metadata{max-width:none}.anomaly-risk-strip{gap:10px}.anomaly-risk-strip>a{flex:1;text-align:center;justify-content:center}}
@media(max-width:430px){.anomaly-filter-grid,.audit-filter-grid{grid-template-columns:1fr}.anomaly-person-field,.anomaly-search-field,.audit-search-field,.anomaly-filter-actions,.audit-filter-actions{grid-column:1}.anomaly-kpi-grid{grid-template-columns:1fr}.anomaly-risk-strip>span{width:100%}}
@media print{.anomaly-filter-card,.audit-filter-card,.anomaly-toolbar,.audit-toolbar,.anomaly-review-form,.anomaly-table details{display:none!important}.anomaly-table-card,.audit-table-card{border:0;padding:0}.anomaly-table,.audit-table{min-width:100%;font-size:8px}.anomaly-table th,.anomaly-table td,.audit-table th,.audit-table td{padding:4px}.anomaly-kpi-grid{grid-template-columns:repeat(4,1fr)}.anomaly-risk-strip{break-inside:avoid}.anomaly-evidence,.audit-metadata{max-width:none}}

/* HADIRIYA v0.10.4 — Dashboard Analitik Kehadiran */
.analytics-filter-card{margin-bottom:16px}.analytics-filter-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:end}.analytics-person-filter{grid-column:span 2}.analytics-filter-actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.analytics-quick-periods{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.analytics-quick-periods a{padding:6px 10px;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:var(--surface-2);color:var(--text);font-weight:750}.analytics-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 15px}.analytics-toolbar>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.analytics-toolbar>div:first-child{display:grid;gap:2px}.analytics-toolbar span{font-size:12px;color:var(--muted)}.analytics-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.analytics-delta{font-size:12px;font-weight:750}.analytics-delta.up{color:var(--success)}.analytics-delta.down{color:var(--danger)}.analytics-delta.flat{color:var(--muted)}.analytics-main-grid{align-items:start}.analytics-trend-card{min-height:390px}.analytics-chart-legend{display:flex;gap:13px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:12px}.analytics-chart-legend span{display:inline-flex;align-items:center;gap:6px}.analytics-chart-legend span:before{content:"";width:18px;height:3px;border-radius:99px;background:var(--primary)}.analytics-chart-legend .physical:before{background:var(--success)}.analytics-chart-scroll{width:100%;overflow:hidden}.analytics-line-chart{display:block;width:100%;min-width:560px;height:auto}.analytics-grid-line{stroke:var(--line);stroke-width:1}.analytics-axis-label{fill:var(--muted);font-size:11px}.analytics-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.analytics-line-admin{stroke:var(--primary)}.analytics-line-physical{stroke:var(--success)}.analytics-status-card{box-shadow:none;height:100%}.analytics-status-stack{height:18px;border-radius:999px;display:flex;overflow:hidden;background:var(--surface-2);margin-bottom:17px}.analytics-status-segment{display:block;height:100%}.analytics-status-segment.success,.analytics-dot.success{background:var(--success)}.analytics-status-segment.warning,.analytics-dot.warning{background:var(--warning)}.analytics-status-segment.danger,.analytics-dot.danger{background:var(--danger)}.analytics-status-segment.info,.analytics-dot.info{background:var(--info)}.analytics-status-legend{display:grid;gap:8px}.analytics-status-legend>div{display:grid;grid-template-columns:10px minmax(0,1fr) auto 54px;gap:8px;align-items:center;font-size:12px}.analytics-status-legend small{text-align:right;color:var(--muted)}.analytics-dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}.analytics-class-card,.analytics-late-card{box-shadow:none}.analytics-class-list{display:grid;gap:14px}.analytics-class-row{padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2)}.analytics-class-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.analytics-class-heading a{text-decoration:none}.analytics-class-heading strong{display:block}.analytics-class-heading small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.analytics-class-heading>span{font-weight:850;white-space:nowrap}.analytics-progress{position:relative;height:10px;background:var(--surface);border-radius:999px;overflow:hidden;margin:10px 0 7px;border:1px solid var(--line)}.analytics-progress span{position:absolute;left:0;top:0;height:100%;border-radius:999px}.analytics-progress-admin{background:rgba(10,124,255,.32)}.analytics-progress-physical{background:var(--success);height:4px!important;top:2px!important}.analytics-class-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px}.analytics-ranking{display:grid;gap:10px}.analytics-ranking article{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px}.analytics-ranking article>div:nth-child(2){min-width:0}.analytics-ranking strong,.analytics-ranking small{display:block}.analytics-ranking small{color:var(--muted);font-size:11px}.analytics-rank-number{width:26px;height:26px;display:grid;place-items:center;background:var(--surface-2);border-radius:9px;font-weight:850}.analytics-rank-bar{height:5px;background:var(--surface-2);border-radius:999px;margin-top:7px;overflow:hidden}.analytics-rank-bar span{display:block;height:100%;background:var(--warning);border-radius:999px}.analytics-rank-value{text-align:right;white-space:nowrap}.analytics-priority-table{min-width:780px}.analytics-data-note{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2);color:var(--muted);font-size:12px}.analytics-data-note strong{color:var(--text);white-space:nowrap}

@media(max-width:1200px){.analytics-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.analytics-person-filter{grid-column:span 2}.analytics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-main-grid>.col-8,.analytics-main-grid>.col-4,.analytics-main-grid>.col-7,.analytics-main-grid>.col-5{grid-column:span 12}}
@media(max-width:720px){.analytics-filter-grid{grid-template-columns:1fr 1fr}.analytics-person-filter{grid-column:1/-1}.analytics-filter-actions{grid-column:1/-1}.analytics-filter-actions .button{flex:1}.analytics-toolbar{align-items:flex-start;flex-direction:column}.analytics-toolbar>div:last-child{width:100%}.analytics-toolbar .button{flex:1}.analytics-kpi-grid{grid-template-columns:1fr}.analytics-chart-scroll{overflow-x:auto}.analytics-line-chart{min-width:620px}.analytics-status-legend>div{grid-template-columns:10px minmax(0,1fr) auto 48px}.analytics-data-note{display:grid}.analytics-class-heading{align-items:flex-start}.analytics-class-meta{gap:8px 12px}}
@media(max-width:480px){.analytics-filter-grid{grid-template-columns:1fr}.analytics-person-filter,.analytics-filter-actions{grid-column:auto}.analytics-quick-periods span{width:100%}.analytics-toolbar>div:last-child{display:grid;grid-template-columns:1fr 1fr}.analytics-class-heading{display:grid}.analytics-class-heading>span{justify-self:start}}
@media print{.analytics-page .sidebar,.analytics-page .topbar,.analytics-page .mobile-bottom-nav,.analytics-page .sidebar-backdrop,.analytics-page .analytics-filter-card,.analytics-page .analytics-toolbar,.analytics-page .no-print{display:none!important}.analytics-page .app-shell{display:block}.analytics-page .content{max-width:none;padding:0}.analytics-page .analytics-kpi-grid{grid-template-columns:repeat(4,1fr);gap:7px}.analytics-page .stat,.analytics-page .card{box-shadow:none;break-inside:avoid}.analytics-page .page-grid{gap:10px}.analytics-page .analytics-main-grid>.col-8{grid-column:span 8}.analytics-page .analytics-main-grid>.col-4{grid-column:span 4}.analytics-page .analytics-main-grid>.col-7{grid-column:span 7}.analytics-page .analytics-main-grid>.col-5{grid-column:span 5}.analytics-page .analytics-line-chart{min-width:0}.analytics-page .analytics-priority-table{min-width:0;font-size:10px}.analytics-page .analytics-data-note{break-inside:avoid}}


/* HADIRIYA v0.10.5 — Hotfix cetak/PDF halaman aplikasi */
@media print{
  body:not(.print-preview-body) .app-shell{display:block!important;min-height:0!important}
  body:not(.print-preview-body) .main{display:block!important;width:100%!important}
  body:not(.print-preview-body) .content{display:block!important;max-width:none!important;width:100%!important}
  .analytics-page .print-report-header{display:flex!important}
  .analytics-page .analytics-chart-scroll,.analytics-page svg{overflow:visible!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* HADIRIYA v0.10.6 — Pusat Tindak Lanjut Kehadiran */
.followup-page .content{max-width:1500px}.followup-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);margin-bottom:14px}.followup-hero h2{margin:4px 0 8px;font-size:25px}.followup-hero p{margin:0;color:var(--muted);max-width:800px}.followup-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.followup-hero-actions form{margin:0}.followup-refresh-info{display:flex;justify-content:flex-end;margin:0 2px 14px;color:var(--muted);font-size:12px}.followup-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.followup-filter{margin-bottom:18px}.followup-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;align-items:end}.followup-filter label,.followup-settings label,.followup-dialog label{display:grid;gap:6px}.followup-filter label>span,.followup-settings label>span,.followup-dialog label>span{font-size:12px;font-weight:750;color:var(--muted)}.followup-filter input,.followup-filter select,.followup-settings input,.followup-dialog textarea{width:100%;min-height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);padding:10px 12px;outline:none}.followup-filter input:focus,.followup-filter select:focus,.followup-settings input:focus,.followup-dialog textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(10,124,255,.13)}.followup-search{grid-column:span 2}.followup-settings{margin-bottom:18px;padding:0;overflow:hidden}.followup-settings summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:18px 20px}.followup-settings summary span{font-size:12px;color:var(--muted)}.followup-settings[open] summary{border-bottom:1px solid var(--line)}.followup-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px 20px;align-items:end}.followup-list-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:22px 2px 12px}.followup-list-header h2{margin:0;font-size:19px}.followup-list-header p,.followup-list-header>span{margin:2px 0 0;color:var(--muted);font-size:12px}.followup-list{display:grid;gap:14px}.followup-case{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow);overflow:hidden}.followup-severity-critical{border-left-color:#8c1d1d}.followup-severity-danger{border-left-color:var(--danger)}.followup-severity-warning{border-left-color:var(--warning)}.followup-severity-info{border-left-color:var(--info)}.followup-case-main{min-width:0}.followup-case-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.followup-case-heading>div{display:flex;gap:7px;flex-wrap:wrap}.followup-case-heading small{color:var(--muted);white-space:nowrap}.followup-case h3{margin:11px 0 1px;font-size:18px}.followup-person-meta{margin:0 0 12px;color:var(--muted);font-size:12px}.followup-issue{display:grid;gap:3px;padding:12px 14px;border-radius:14px;background:var(--surface-2)}.followup-issue strong{font-size:13px}.followup-issue span{color:var(--muted)}.followup-period{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;color:var(--muted);font-size:12px}.followup-action-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.followup-action-note span{color:var(--muted)}.followup-action-note small{color:var(--muted);white-space:nowrap}.followup-case-actions{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;flex-wrap:wrap;max-width:390px}.followup-case-actions form{margin:0}.followup-dialog{width:min(560px,calc(100vw - 28px));border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);padding:0;box-shadow:0 24px 80px rgba(0,0,0,.25)}.followup-dialog::backdrop{background:rgba(10,20,35,.55);backdrop-filter:blur(3px)}.followup-dialog form{padding:20px}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.dialog-heading h3{margin:0}.followup-dialog textarea{resize:vertical;min-height:120px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.badge.secondary{background:var(--surface-2);color:var(--muted)}.badge.critical{background:#f7d7d7;color:#751616}.analytics-card-actions{display:flex;gap:8px;flex-wrap:wrap}.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.pagination>div{display:flex;gap:8px}.pagination>span{color:var(--muted);font-size:12px}
@media(max-width:1100px){.followup-filter-grid,.followup-settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.followup-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.followup-case{grid-template-columns:1fr}.followup-case-actions{justify-content:flex-start;max-width:none}}
@media(max-width:760px){.followup-hero{align-items:flex-start;flex-direction:column;padding:18px}.followup-hero h2{font-size:21px}.followup-hero-actions,.followup-hero-actions form,.followup-hero-actions .button{width:100%}.followup-filter-grid,.followup-settings-grid{grid-template-columns:1fr}.followup-search{grid-column:auto}.followup-stat-grid{grid-template-columns:1fr 1fr}.followup-settings summary{align-items:flex-start;flex-direction:column}.followup-list-header{align-items:flex-start;flex-direction:column}.followup-case{padding:16px}.followup-case-heading{align-items:flex-start;flex-direction:column}.followup-action-note{grid-template-columns:1fr}.followup-case-actions,.followup-case-actions form,.followup-case-actions .button{width:100%}.pagination{align-items:stretch;flex-direction:column}.pagination>div,.pagination .button{width:100%}}
@media print{body.followup-page .sidebar,body.followup-page .topbar,body.followup-page .mobile-bottom-nav,body.followup-page .no-print,body.followup-page .followup-filter,body.followup-page .followup-settings,body.followup-page .followup-refresh-info,body.followup-page .pagination,body.followup-page .followup-dialog{display:none!important}body.followup-page .content{padding:0;max-width:none}body.followup-page .followup-hero{display:block;border:0;box-shadow:none;padding:0 0 5mm;margin:0}body.followup-page .followup-hero .eyebrow{display:none}body.followup-page .followup-hero h2{font-size:17pt;margin:0 0 2mm}body.followup-page .followup-stat-grid{grid-template-columns:repeat(4,1fr);gap:3mm}body.followup-page .stat{box-shadow:none;border-radius:3mm;padding:3mm}body.followup-page .stat-value{font-size:18pt}body.followup-page .followup-list{gap:3mm}body.followup-page .followup-case{display:block;break-inside:avoid;box-shadow:none;border-radius:3mm;padding:4mm}body.followup-page .followup-list-header>span{display:none}body.followup-page .followup-action-note{grid-template-columns:auto 1fr auto}}

/* HADIRIYA v0.10.7 — Pusat Notifikasi & Laporan Otomatis */
.notification-page .page-content{max-width:1500px}
.notification-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,var(--panel)),var(--panel));box-shadow:var(--shadow);margin-bottom:18px}
.notification-hero h2{margin:5px 0 8px;font-size:clamp(24px,3vw,38px);letter-spacing:-.035em}
.notification-hero p{max-width:720px;margin:0;color:var(--muted);line-height:1.6}
.notification-generate-form{display:grid;grid-template-columns:minmax(145px,1fr) minmax(160px,1fr) auto;gap:10px;align-items:end;min-width:min(100%,520px)}
.notification-generate-form label,.notification-filter label,.notification-admin-grid label,.recipient-row label{display:grid;gap:6px}
.notification-generate-form label>span,.notification-filter label>span,.notification-admin-grid label>span,.recipient-row label>span{font-size:12px;font-weight:700;color:var(--muted)}
.notification-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.notification-kpis article{padding:18px 20px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow-soft);display:grid;gap:4px}
.notification-kpis strong{font-size:26px;letter-spacing:-.03em}.notification-kpis span{font-size:13px;color:var(--muted)}
.notification-filter{margin-bottom:16px}.notification-filter .filter-grid{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:12px;align-items:end}.notification-filter .filter-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.notification-list{display:grid;gap:14px}.notification-card{border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow-soft);overflow:hidden}
.notification-card>header{display:flex;justify-content:space-between;gap:18px;padding:20px 22px 14px}.notification-card h3{margin:5px 0 4px;font-size:19px}.notification-card header p{margin:0;color:var(--muted);font-size:13px}.notification-frequency{font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--accent)}
.notification-status{height:max-content;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.notification-status.status-ready{background:color-mix(in srgb,#f59e0b 18%,transparent);color:#b56b00}.notification-status.status-sent{background:color-mix(in srgb,#16a34a 16%,transparent);color:#15803d}.notification-status.status-cancelled{background:color-mix(in srgb,#64748b 16%,transparent);color:var(--muted)}
.notification-card pre{margin:0 22px;padding:16px;border-radius:16px;background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:14px;line-height:1.65;color:var(--text)}
.notification-card>footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px 20px}.notification-meta{font-size:12px;color:var(--muted)}.notification-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.notification-admin-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}.notification-admin-grid details{padding:0}.notification-admin-grid summary{cursor:pointer;font-weight:800;padding:18px 20px}.notification-admin-grid details[open] summary{border-bottom:1px solid var(--line)}.settings-form{display:grid;gap:14px;padding:20px}.checkbox-row,.recipient-flags{display:flex;gap:16px;flex-wrap:wrap}.checkbox-row label,.recipient-flags label{display:flex;align-items:center;gap:7px;font-size:13px}
.recipient-list{display:grid;gap:10px;padding:16px}.recipient-row{display:grid;grid-template-columns:minmax(190px,1.25fr) 140px minmax(150px,1fr) minmax(155px,1fr) minmax(190px,1.15fr) auto auto;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--surface) 72%,transparent)}.recipient-heading{align-self:center;display:grid;gap:3px}.recipient-heading span{font-size:12px;color:var(--muted);text-transform:capitalize}.recipient-flags{align-self:center;max-width:210px}.field-help{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
@media(max-width:1100px){.notification-hero{align-items:stretch;flex-direction:column}.notification-generate-form{min-width:0;width:100%}.notification-filter .filter-grid{grid-template-columns:repeat(3,minmax(140px,1fr))}.recipient-row{grid-template-columns:repeat(2,minmax(0,1fr))}.recipient-heading,.recipient-flags{grid-column:1/-1}}
@media(max-width:720px){.notification-hero{padding:20px;border-radius:21px}.notification-generate-form{grid-template-columns:1fr}.notification-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.notification-filter .filter-grid{grid-template-columns:1fr}.notification-card>header,.notification-card>footer{align-items:flex-start;flex-direction:column}.notification-card pre{margin:0 14px}.notification-actions{justify-content:flex-start}.recipient-row{grid-template-columns:1fr}.recipient-heading,.recipient-flags{grid-column:auto}}
@media print{.notification-page .app-shell{display:block!important}.notification-page .sidebar,.notification-page .topbar,.notification-page .mobile-bottom-nav,.notification-page .notification-generate-form,.notification-page .notification-filter,.notification-page .notification-actions,.notification-page .notification-admin-grid{display:none!important}.notification-page .page-content{max-width:none!important;padding:0!important}.notification-page .notification-hero{box-shadow:none;background:#fff;padding:12px 0;border:0;border-radius:0}.notification-page .notification-kpis{grid-template-columns:repeat(4,1fr)}.notification-page .notification-kpis article,.notification-page .notification-card{box-shadow:none;break-inside:avoid}.notification-page .notification-card pre{background:#fff}}


/* HADIRIYA v0.11.2 — Audit Stabilitas & Regresi */
.app-shell,.main,.content,.page-grid,.card,.gate-workspace,.gate-main,.gate-side,.table-wrap{min-width:0}
.page-heading,.page-heading h1,.page-heading p,.top-actions,.alert,.badge,.cell-main,.cell-sub,.gate-status-copy,.gate-status-copy strong,.gate-status-copy small{overflow-wrap:anywhere}
.gate-toolbar,.gate-toolbar-actions{flex-wrap:wrap;min-width:0}
.gate-status-tile{max-width:100%}
@media(max-width:820px){
  input[type="text"],input[type="password"],input[type="email"],input[type="date"],input[type="time"],input[type="number"],input[type="search"],input[type="url"],select,textarea{font-size:16px}
  .top-actions{min-width:0}
  .gate-toolbar-actions{width:100%}
  .gate-toolbar-button{flex:1 1 auto}
}

/* HADIRIYA v0.12.0 — Pusat Anomali Presensi */
.anomaly-case-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.anomaly-case-table td{vertical-align:top}
.anomaly-case-table .case-owner{margin-top:8px;font-size:.88rem;overflow-wrap:anywhere}
.case-quick-action{margin-bottom:8px}
.anomaly-case-table details{min-width:150px}
.anomaly-case-table details[open]{position:relative;z-index:4}
.anomaly-case-table .anomaly-review-form{min-width:min(340px,76vw);display:grid;gap:10px;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.anomaly-case-table .anomaly-review-form label{display:grid;gap:6px;font-size:.82rem;font-weight:700}
.anomaly-case-table .anomaly-review-form select,
.anomaly-case-table .anomaly-review-form textarea{width:100%;min-width:0}
@media(max-width:1180px){.anomaly-case-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .anomaly-case-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anomaly-case-kpis .stat:last-child{grid-column:1/-1}
  .anomaly-case-table details,.anomaly-case-table .anomaly-review-form{min-width:0;width:100%}
  .anomaly-case-table .button{width:100%;justify-content:center}
}
/* HADIRIYA v0.13.0 — koreksi presensi berjenjang */
.form-grid.compact{gap:8px;min-width:260px}.form-grid.compact textarea{min-height:72px}.table td form .actions{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:720px){.form-grid.compact{min-width:0}.table.mobile-cards td[data-label="Peninjauan"]{overflow:visible}}

/* HADIRIYA v0.14.0 — Notifikasi Orang Tua melalui MYPIA */
.parent-notification-form{display:grid;gap:14px}
.toggle-row{display:flex!important;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.toggle-row>span{display:grid;gap:4px;min-width:0}.toggle-row small{color:var(--muted);line-height:1.45}
.toggle-row input[type="checkbox"]{width:22px;height:22px;flex:0 0 auto}
.notification-readonly-list{display:grid;gap:0}.notification-readonly-list .split{padding:12px 0;border-bottom:1px solid var(--line)}
.parent-notification-table .event-error{max-width:360px;white-space:normal;overflow-wrap:anywhere}
.parent-notification-table code{font-size:.82rem}
@media(max-width:760px){
  .parent-notification-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toggle-row{align-items:flex-start}.toggle-row input[type="checkbox"]{margin-top:2px}
  .parent-notification-table .event-error{max-width:none}
}
@media(max-width:430px){.parent-notification-stats{grid-template-columns:1fr 1fr}.parent-notification-stats .stat-value{font-size:1.65rem}}

/* HADIRIYA v0.15.0 — Mode Offline & Sinkronisasi Pemindai */
.offline-mode-badge{display:inline-flex;align-items:center;gap:7px;min-width:150px;justify-content:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:.78rem;font-weight:750;background:var(--surface-2);color:var(--muted)}
.offline-mode-badge.healthy{background:color-mix(in srgb,var(--success) 12%,var(--surface));border-color:color-mix(in srgb,var(--success) 32%,var(--line));color:var(--success)}
.offline-mode-badge.warning,.offline-mode-badge.waiting{background:color-mix(in srgb,var(--warning) 13%,var(--surface));border-color:color-mix(in srgb,var(--warning) 34%,var(--line));color:var(--warning-strong,var(--warning))}
.offline-mode-badge.danger{background:color-mix(in srgb,var(--danger) 11%,var(--surface));border-color:color-mix(in srgb,var(--danger) 30%,var(--line));color:var(--danger)}
.offline-mode-badge.unconfigured{opacity:.72}
.offline-panel{padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.offline-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.offline-summary-grid article{min-width:0;padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.offline-summary-grid span{display:block;font-size:.78rem;color:var(--muted);line-height:1.3}
.offline-summary-grid strong{display:block;margin-top:4px;font-size:1.45rem;line-height:1}
.offline-shell-page{min-height:100dvh;background:var(--page)}
.offline-shell-main{width:min(1500px,100%);min-height:100dvh;margin:0 auto;padding:18px}
.offline-shell-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.offline-shell-header>div{display:flex;flex-direction:column;min-width:0}
.offline-shell-header strong{font-size:1.05rem;letter-spacing:.04em}
.offline-shell-header span{font-size:.82rem;color:var(--muted)}
.scan-result .result-status.success:has(+*){display:block}
@media(max-width:820px){
  .offline-mode-badge{min-width:0;flex:1 1 145px}
  .offline-shell-main{padding:10px 10px calc(18px + env(safe-area-inset-bottom))}
  .offline-shell-header{position:sticky;top:8px;z-index:20}
  .offline-summary-grid{grid-template-columns:1fr 1fr}
}

/* HADIRIYA v0.15.1 — Perangkat Android */
.android-device-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-bottom:18px}.android-enrollment-secret{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--card)),var(--card))}.android-enrollment-code{font-size:clamp(2rem,7vw,4.4rem);font-weight:900;letter-spacing:.12em;text-align:center;padding:22px 12px;margin:14px 0;border:1px dashed var(--accent);border-radius:18px;background:color-mix(in srgb,var(--accent) 8%,transparent);overflow-wrap:anywhere}.android-device-list{display:grid;gap:14px}.android-device-card{border:1px solid var(--border);border-radius:20px;padding:18px;display:grid;gap:16px;background:color-mix(in srgb,var(--card) 94%,transparent);min-width:0}.android-device-main{display:flex;gap:14px;align-items:flex-start;min-width:0}.android-device-main h3{margin:0 0 4px;overflow-wrap:anywhere}.android-device-main p{margin:0;color:var(--muted)}.android-device-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:0 0 auto;font-weight:900;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#8b5cf6));color:#fff;box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 25%,transparent)}.android-device-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}.android-device-meta div{padding:10px 12px;border-radius:14px;background:var(--surface-soft);min-width:0}.android-device-meta dt{font-size:.75rem;color:var(--muted);margin-bottom:4px}.android-device-meta dd{margin:0;font-weight:700;overflow-wrap:anywhere}.android-device-actions .inline-form{display:flex;gap:8px;align-items:center}.android-device-actions input{min-width:0;flex:1}.android-device-card .chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.android-device-card .chip{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--surface-soft);font-size:.78rem;font-weight:700}.table-wrap td small{display:block;color:var(--muted);margin-top:3px}
@media(max-width:900px){.android-device-grid{grid-template-columns:1fr}.android-device-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.android-enrollment-code{font-size:2rem;letter-spacing:.07em}.android-device-card{padding:14px}.android-device-meta{grid-template-columns:1fr}.android-device-actions .inline-form{flex-direction:column;align-items:stretch}.android-device-actions .button{width:100%}}


/* HADIRIYA v0.15.3 — Konsolidasi Web & fitur eksperimental */
.experimental-feature-banner{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-left:4px solid var(--warning);background:color-mix(in srgb,var(--warning) 8%,var(--surface))}
.experimental-feature-banner.is-paused{border-left-color:var(--success);background:color-mix(in srgb,var(--success) 7%,var(--surface))}
.experimental-feature-banner h2{margin:.25rem 0 .35rem}
.experimental-feature-banner p{margin:0;max-width:780px;color:var(--muted)}
button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.58}
@media(max-width:720px){.experimental-feature-banner{flex-direction:column}.experimental-feature-banner .badge{align-self:flex-start}}

/* HADIRIYA v0.16.0 — Laporan Semester & Dasbor Eksekutif */
.executive-page{display:grid;gap:18px;min-width:0}
.executive-period-card{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface))}
.executive-period-card h2{margin:3px 0 4px;font-size:clamp(1.25rem,2.2vw,1.8rem)}
.executive-period-card p{margin:0;color:var(--muted)}
.executive-scope-tabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.executive-filter-card{padding:15px 18px}
.executive-filter-grid{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto auto;gap:10px;align-items:end}
.executive-filter-grid .form-group{margin:0}
.executive-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.executive-content-grid{margin-top:0}
.executive-trend-list{display:grid;gap:15px}
.executive-trend-list article{display:grid;gap:8px}
.executive-trend-heading,.executive-trend-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.executive-trend-heading span,.executive-trend-meta{font-size:.8rem;color:var(--muted)}
.executive-trend-track{height:11px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.executive-trend-track span{display:block;height:100%;min-width:4px;border-radius:999px;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 52%,#8b5cf6))}
.executive-quality-row{padding:12px 0;border-bottom:1px solid var(--line)}
.executive-integration-status{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;margin-top:17px;padding:13px;border-radius:14px;background:var(--surface-2);min-width:0}
.executive-integration-status small{color:var(--muted)}
.executive-integration-status strong{font-size:.82rem;overflow-wrap:anywhere}
.executive-class-table{min-width:980px}
.executive-priority-table{min-width:720px}
.executive-device-list{display:grid;gap:10px}
.executive-device-list article{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);min-width:0}
.executive-device-list article>div{display:grid;gap:4px;min-width:0}
.executive-device-list article>div:last-child{text-align:right;justify-items:end}
.executive-device-list strong,.executive-device-list small{overflow-wrap:anywhere}
.executive-device-list small{color:var(--muted);font-size:.78rem}
.executive-settings-card{border-style:dashed}
.executive-top-actions{justify-content:flex-end}
@media(max-width:1180px){.executive-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.executive-period-card{align-items:flex-start;flex-direction:column}.executive-scope-tabs{justify-content:flex-start}.executive-filter-grid{grid-template-columns:1fr 1fr}.executive-filter-grid .button{width:100%}}
@media(max-width:720px){.executive-kpi-grid{grid-template-columns:1fr 1fr}.executive-scope-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.executive-scope-tabs .report-tab{justify-content:center}.executive-filter-grid{grid-template-columns:1fr}.executive-device-list article{flex-direction:column}.executive-device-list article>div:last-child{text-align:left;justify-items:start}.executive-top-actions{width:100%}.executive-top-actions .button{display:inline-flex;flex:1}}
@media(max-width:430px){.executive-kpi-grid{grid-template-columns:1fr}.executive-scope-tabs{grid-template-columns:1fr}.executive-integration-status{grid-template-columns:1fr}.executive-period-card{padding:16px}}
@media print{
  .executive-dashboard-page .sidebar,.executive-dashboard-page .topbar,.executive-dashboard-page .mobile-bottom-nav,.executive-dashboard-page .no-print{display:none!important}
  .executive-dashboard-page .app-shell,.executive-dashboard-page .main,.executive-dashboard-page .content{display:block!important;max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
  .executive-dashboard-page{background:#fff!important;color:#111!important}
  .executive-dashboard-page .executive-kpi-grid{grid-template-columns:repeat(4,1fr)}
  .executive-dashboard-page .page-grid{display:block}
  .executive-dashboard-page .card,.executive-dashboard-page .stat{box-shadow:none!important;break-inside:avoid;margin-bottom:12px;border-color:#ccc!important}
  .executive-dashboard-page .table-wrap{overflow:visible;border-color:#ccc}
  .executive-dashboard-page .table{min-width:0;font-size:9px}
  .executive-dashboard-page .table th,.executive-dashboard-page .table td{padding:6px}
}