:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;background:#f4f7fb;line-height:1.5;--blue:#1769e0;--blue2:#0f56c7;--navy:#0b1f3a;--ink:#10233f;--muted:#64748b;--line:#e4ebf4;--card:#fff;--green:#16a34a;--orange:#f59e0b;--red:#dc2626}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f4f7fb}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.55;cursor:not-allowed}input,select,textarea{width:100%;padding:11px 13px;border:1px solid #d6e0ec;border-radius:11px;background:#fff;color:#0f172a;outline:0;transition:.2s}input:focus,select:focus,textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f61a}label{display:block;font-size:13px;font-weight:750;color:#334155}label input,label select,label textarea,label .custom-select{margin-top:7px}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:linear-gradient(180deg,#0a1d38,#0c2446);color:#dce9ff;z-index:40;display:flex;flex-direction:column;box-shadow:8px 0 30px #0b1f3a12}.brand-side{height:76px;padding:17px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid #ffffff12}.brand-logo{width:48px;height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;border-radius:0}.brand-logo img{width:100%;height:100%;display:block;object-fit:contain}.brand-side strong{display:block;font-size:15px;letter-spacing:.04em}.brand-side span{display:block;font-size:11px;color:#91acd0;margin-top:1px}.mobile-close{display:none;margin-left:auto;background:#ffffff12;color:#fff;width:34px;height:34px;border-radius:9px}.nav{padding:18px 12px;overflow:auto}.nav-label{font-size:10px;font-weight:800;letter-spacing:.14em;color:#7691b7;padding:8px 12px}.admin-label{margin-top:12px}.nav-item,.nav-subitem{width:100%;display:flex;align-items:center;gap:11px;background:transparent;color:#bcd0ed;padding:11px 12px;border-radius:10px;text-align:left;margin:2px 0;transition:.2s}.nav-item:hover,.nav-subitem:hover{background:#ffffff0d;color:#fff;transform:translate(2px)}.nav-item.active{background:linear-gradient(90deg,#1c6fe7,#1558bf);color:#fff;box-shadow:0 8px 20px #0b4dbd33}.nav-icon{width:21px;text-align:center;font-size:16px}.nav-chevron{margin-left:auto}.nav-sub{max-height:0;overflow:hidden;transition:max-height .25s ease;padding-left:10px}.nav-sub.open{max-height:350px}.nav-subitem{font-size:12px;padding:9px 12px}.nav-subitem span{width:19px;text-align:center}.sidebar-bottom{margin-top:auto;padding:14px;border-top:1px solid #ffffff12}.profile-mini{display:flex;gap:10px;align-items:center;padding:8px}.avatar,.top-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#2c76df;color:#fff;font-weight:800}.profile-mini b{display:block;font-size:12px;max-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-mini small{color:#8fa9cd;font-size:10px}.logout-side{width:100%;display:flex;gap:9px;align-items:center;background:#ffffff0b;color:#cbdaf0;border-radius:9px;padding:10px 12px;margin-top:7px}.logout-side:hover{background:#ffffff16;color:#fff}.main-shell{margin-left:270px;min-height:100vh}.topbar{height:76px;position:sticky;top:0;z-index:20;background:#ffffffeb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,3vw,36px)}.topbar-left{display:flex;align-items:center;gap:13px}.topbar h1{font-size:17px;margin:0;font-weight:800}.topbar p{margin:1px 0 0;color:var(--muted);font-size:11px}.eyebrow{font-size:9px;font-weight:850;letter-spacing:.13em;color:#6481a8;margin-bottom:2px}.top-actions{display:flex;align-items:center;gap:9px;color:#607795;font-size:12px}.live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #22c55e1c;animation:pulse 2s infinite}.top-avatar{width:36px;height:36px}.menu-toggle{display:none;background:#eaf1fb;color:#17375f;width:39px;height:39px;border-radius:10px;font-size:18px}.content{padding:26px clamp(18px,3vw,38px);max-width:1600px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}.section-kicker{font-size:10px;letter-spacing:.15em;color:#5380bd;font-weight:850}.page-head h2{font-size:27px;margin:3px 0}.page-head p{color:var(--muted);margin:0;font-size:13px}.head-date{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:9px 12px;border-radius:10px;color:#547093;font-size:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;font-weight:750;font-size:13px;transition:transform .18s,box-shadow .18s,background .18s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 7px 17px #1769e02b}.btn.ghost{background:#edf3fa;color:#274565}.btn.danger{background:#dc2626;color:#fff}.btn.small{padding:8px 11px;font-size:12px}.btn.tiny{padding:6px 9px;font-size:11px}.wide{width:100%}.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px;display:flex;align-items:center;gap:12px;box-shadow:0 6px 22px #12345a08;transition:.2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px #12345a10}.stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eaf2ff;color:#1769e0;font-size:18px}.stat-card.green .stat-icon{background:#e9f9ef;color:#159447}.stat-card.orange .stat-icon{background:#fff5df;color:#d88700}.stat-card.red .stat-icon{background:#fff0f0;color:#d32b2b}.stat-card span{display:block;color:#64748b;font-size:11px}.stat-card strong{display:block;font-size:23px;line-height:1.2;margin-top:3px}.stat-card small{display:block;color:#8a9ab0;font-size:9px;margin-top:2px}.dashboard-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:17px;margin-bottom:17px}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:0 5px 22px #12345a07;margin-bottom:17px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px}.panel-head h3{margin:0;font-size:15px}.panel-head p{margin:3px 0 0;color:#8291a6;font-size:11px}.date-range{display:flex;gap:7px;align-items:flex-end}.date-range label{font-size:10px}.date-range input{padding:8px 9px;font-size:11px;width:132px}.bar-chart{height:285px;display:flex;gap:9px;align-items:flex-end;border-bottom:1px solid #e8edf4;padding:15px 5px 27px;overflow-x:auto;position:relative}.chart-day{height:100%;min-width:46px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}.bars{height:100%;width:32px;display:flex;gap:3px;align-items:flex-end}.bar{display:block;width:8px;border-radius:5px 5px 2px 2px;min-height:3px;transition:height .35s ease;cursor:pointer}.bar:hover{filter:brightness(.9);transform:scaleX(1.15)}.bar.dhuha,.legend-dot.dhuha{background:#2f7cf6}.bar.dzuhur,.legend-dot.dzuhur{background:#f59e0b}.bar.maghrib,.legend-dot.maghrib{background:#14b8a6}.bar.haid,.legend-dot.haid{background:#a78bfa}.chart-day>span{position:absolute;bottom:-23px;color:#8291a6;font-size:9px;white-space:nowrap}.chart-legend{position:absolute;right:4px;top:2px;display:flex;gap:12px;font-size:10px;color:#657991}.chart-legend span{display:flex;align-items:center;gap:4px}.legend-dot{width:7px;height:7px;border-radius:2px}.today-summary{display:grid;gap:9px}.today-summary>div{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:#f7f9fc;padding:11px;border-radius:10px}.today-summary span{font-size:11px;color:#526985}.today-summary b{font-size:17px}.today-summary em{font-style:normal;font-size:10px;color:#5d7ea9}.dashboard-note{display:flex;gap:10px;margin-top:12px;padding:11px;background:#eff7ff;border-radius:10px;color:#1769e0}.dashboard-note span{font-weight:900}.dashboard-note b{display:block;font-size:11px}.dashboard-note small{display:block;color:#68809e;font-size:9px;margin-top:2px}.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick-scan-panel{margin-bottom:17px}.activity-card{position:relative;text-align:left;background:#f8fbff;border:1px solid #dce8f7;border-radius:13px;padding:13px 42px 13px 13px;transition:.2s}.activity-card:hover{transform:translateY(-2px);border-color:#9fc2f3;box-shadow:0 8px 22px #1769e012}.activity-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:8px;background:#e8f1ff;color:#1769e0}.activity-card.dzuhur .activity-icon{background:#fff3dd;color:#c87c00}.activity-card.maghrib .activity-icon{background:#e8fbf8;color:#0f8f82}.activity-card.haid .activity-icon{background:#f3edff;color:#7c5ac2}.activity-card b{display:block;font-size:12px}.activity-card small{display:block;color:#8190a5;font-size:9px}.activity-card em{position:absolute;right:13px;top:50%;font-style:normal;color:#7a9dca;font-size:18px}.filter-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr auto;gap:9px;align-items:end;margin-bottom:15px}.search-field{position:relative;width:100%}.search-field>span{position:absolute;left:12px;top:50%;bottom:auto;transform:translateY(-50%);color:#7b90aa;font-size:16px;line-height:1;z-index:2;pointer-events:none}.search-field input,.search-field input[type=text],.search-field input[type=search]{width:100%;font-size:11px;padding:9px 10px 9px 42px!important;box-sizing:border-box}.filter-grid label{font-size:10px}.filter-grid input,.filter-grid select{font-size:11px;padding:9px 10px}.table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#75869c;font-size:11px;margin:7px 0 10px}.table-toolbar label{display:flex;align-items:center;gap:7px;font-size:10px}.table-toolbar select{width:76px;padding:6px 7px;font-size:11px}.toolbar-search{width:230px;padding:8px 10px}.data-table-wrap{max-height:calc(100vh - 340px);min-height:120px;overflow:auto;border:1px solid var(--line);border-radius:11px}.compact-table{max-height:300px}.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}.data-table th,.data-table td{text-align:left;padding:11px 12px;border-bottom:1px solid #edf1f6;white-space:nowrap}.data-table th{position:sticky;top:0;z-index:2;background:#f7faff;color:#6a7e97;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.data-table tbody tr:hover{background:#f8fbff}.data-table tr:last-child td{border-bottom:0}.strong{font-weight:700;color:#203a59}.badge{display:inline-flex;padding:5px 9px;border-radius:6px;background:#edf4ff;color:#2765ad;font-size:11.5px;font-weight:800}.status{display:inline-flex;padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:800}.status.hadir{background:#e9f8ef;color:#168243}.status.inactive{background:#f1f4f7;color:#74849a}.activity-badge{background:#f0f6ff}.row-actions{display:flex;gap:6px;flex-wrap:nowrap}.btn.tiny{padding:7px 11px;font-size:11.5px;border-radius:8px;font-weight:700;gap:5px}.btn.tiny.act-edit{background:#eaf2ff;color:#1558bf}.btn.tiny.act-edit:hover{background:#dbe9ff}.btn.tiny.act-warn{background:#fff4e0;color:#a8620a}.btn.tiny.act-warn:hover{background:#ffe9c4}.btn.tiny.act-ok{background:#e6f8ec;color:#15803d}.btn.tiny.act-ok:hover{background:#d5f2e0}.btn.tiny.act-danger{background:#fde8e8;color:#c81e1e}.btn.tiny.act-danger:hover{background:#fbd6d6}.custom-select{position:relative}.custom-select .native-hidden-select{position:absolute;inset:0;width:1px;height:1px;opacity:0;pointer-events:none}.custom-select-btn{width:100%;text-align:left;background:#fff;border:1px solid #d6e0ec;border-radius:11px;padding:9px 30px 9px 10px;font-size:11px;color:#0f172a;position:relative;transition:.2s}.custom-select-btn:after{content:"";position:absolute;right:12px;top:46%;width:7px;height:7px;border-right:2px solid #7b90aa;border-bottom:2px solid #7b90aa;transform:translateY(-60%) rotate(45deg);pointer-events:none}.custom-select.open .custom-select-btn{border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f61a}.custom-select-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #d6e0ec;border-radius:12px;box-shadow:0 16px 36px #12345a22;max-height:228px;overflow-y:auto;z-index:30;padding:6px;display:none;scrollbar-width:thin;scrollbar-color:#c3d2e6 transparent}.custom-select.open .custom-select-menu{display:block}.custom-select-menu::-webkit-scrollbar{width:1px}.custom-select-menu::-webkit-scrollbar-track{background:transparent}.custom-select-menu::-webkit-scrollbar-thumb{background:#c3d2e6;border-radius:999px}.custom-select-option{padding:9px 11px;border-radius:8px;font-size:12px;color:#334155;cursor:pointer;transition:.15s}.custom-select-option:hover{background:#f0f6ff}.custom-select-option.active{background:#eaf2ff;color:#1558bf;font-weight:750}.sync-status-box{text-align:left;margin-bottom:14px}.sync-status-box .alert{margin:0}.alert code{background:#0000000f;padding:1px 5px;border-radius:5px;font-size:11px}.percent{display:flex;align-items:center;gap:8px;min-width:150px}.percent>span{width:44px;font-weight:750}.percent i{display:block;height:6px;flex:1;background:#e8eef5;border-radius:9px;overflow:hidden}.percent b{display:block;height:100%;background:linear-gradient(90deg,#4d91f5,#1769e0);border-radius:9px}.pagination{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:13px}.page-btn{min-width:29px;height:29px;padding:0 8px;border-radius:8px;background:#f1f5f9;color:#52677f;font-size:11px}.page-btn.active{background:#1769e0;color:#fff}.page-btn:disabled{opacity:.4}.admin-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.admin-card{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px;min-height:155px;transition:.2s;box-shadow:0 5px 20px #12345a07}.admin-card:hover{transform:translateY(-3px);border-color:#a8c7f4;box-shadow:0 12px 28px #1769e012}.admin-card>span{width:40px;height:40px;border-radius:11px;background:#eaf2ff;color:#1769e0;display:grid;place-items:center;font-size:18px}.admin-card b{display:block;margin-top:14px;font-size:13px}.admin-card small{display:block;color:#7a8da5;font-size:10px;margin-top:4px;max-width:90%}.admin-card em{position:absolute;right:17px;bottom:17px;color:#5c84b8;font-style:normal}.admin-form-panel{max-width:900px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}.inline-form{display:flex;gap:10px;align-items:flex-end}.inline-form label{flex:1}.list-row{display:grid;grid-template-columns:35px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);padding:10px 12px;border-radius:10px;margin-top:7px}.index{color:#8a9bb0;font-size:10px}.mt{margin-top:18px}.import-drop{border:1.5px dashed #9dbce5;background:#f8fbff;border-radius:15px;min-height:230px;display:grid;place-items:center;text-align:center;padding:25px}.drop-icon{width:50px;height:50px;border-radius:14px;background:#eaf2ff;color:#1769e0;display:grid;place-items:center;font-size:22px;margin:auto}.import-drop b{display:block;margin-top:10px}.import-drop small{display:block;color:#8191a5;margin:5px 0 15px}.import-errors{margin-top:10px;max-height:230px;overflow:auto;background:#fff7ed;border:1px solid #fed7aa;padding:10px;border-radius:9px;font-size:11px}.qr-generator,.sync-card{text-align:center;padding:35px 20px}.qr-generator h3,.sync-card h3{margin:12px 0 4px}.qr-generator p,.sync-card p{color:#7b8ca2;font-size:12px;max-width:600px;margin:0 auto 18px}.sync-icon{font-size:38px;color:#1769e0}.empty{min-height:100px;display:grid;place-items:center;text-align:center;color:#7d8ea3;font-size:11px;padding:20px}.empty span{font-size:25px;color:#b7c4d3}.empty b{font-weight:600}.loading{text-align:center;color:#7c8da2;font-size:11px;padding:70px 10px}.scanner-page{padding:0}.scanner-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.scanner-head h2{margin:2px 0;font-size:20px}.scanner-head p{margin:0;color:#71839b;font-size:11px}.scanner-actions{display:flex;gap:7px}.scanner-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:16px}.camera-card{position:relative;background:#06152a;border-radius:18px;overflow:hidden;min-height:500px;display:grid;place-items:center;box-shadow:0 12px 35px #081a3325}.camera-card video{width:100%;height:100%;min-height:500px;object-fit:cover}.scan-frame{position:absolute;width:min(62vw,310px);height:min(62vw,310px);border:2px solid #5ee58c;border-radius:22px;box-shadow:0 0 0 9999px #0005}.camera-card p{position:absolute;bottom:15px;color:#fff;background:#06152acc;padding:8px 12px;border-radius:20px;font-size:11px}.scan-side{display:flex;flex-direction:column;gap:12px}.big-counter,.result,.scan-help{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px}.big-counter span{color:#7c8ea5;font-size:11px}.big-counter b{display:block;font-size:44px;color:#1769e0;line-height:1.1;margin-top:5px}.result{font-size:14px;min-height:105px}.result.ok{border-color:#a8dfbc;background:#f6fff9}.result.warn{border-color:#f3d58c;background:#fffaf0}.result.error{border-color:#f3b2b2;background:#fff7f7}.result small{display:block;color:#71839a;margin-top:7px}.scan-help{display:grid;gap:5px;color:#74869c;font-size:10px}.scan-help b{color:#314b69;font-size:11px}.toast{position:fixed;right:18px;bottom:18px;z-index:100;padding:11px 14px;border-radius:10px;background:#10243e;color:#fff;box-shadow:0 10px 30px #0003;font-size:12px;animation:toastIn .2s ease}.toast.ok{background:#15803d}.toast.error{background:#b91c1c}.alert{padding:11px 13px;border-radius:9px;font-size:12px;margin:10px 0}.alert.error{background:#fee2e2;color:#991b1b}.alert.ok{background:#dcfce7;color:#166534}.alert.warn{background:#fff7ed;color:#9a3412}.modal-backdrop{position:fixed;inset:0;background:#06152ab8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:grid;place-items:center;z-index:80;padding:16px}.modal{position:relative;background:#fff;border-radius:17px;padding:24px;width:min(520px,100%);max-height:90vh;overflow:auto;box-shadow:0 30px 80px #06152a45}.modal-close{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:9px;background:#eef3f8;color:#455a72;font-size:18px}.modal h2{margin:0 0 7px;font-size:19px}.modal-actions{display:flex;justify-content:center;margin-top:13px}.totp-modal{text-align:center}.totp-qr-wrap{width:max-content;max-width:100%;margin:18px auto;padding:13px;border:1px solid var(--line);border-radius:13px}.totp-qr-wrap canvas{display:block;max-width:68vw}.totp-uri-box{text-align:left;margin-top:12px}.totp-uri-box label{font-size:10px;text-transform:uppercase;color:#71839a;letter-spacing:.08em}.totp-uri-box textarea{font-size:10px;font-family:ui-monospace,monospace}.form-stack{display:grid;gap:12px}.switch-row{display:flex;align-items:center;gap:8px}.switch-row input{width:auto;margin:0}.link-button{background:transparent;color:#1769e0;font-size:12px;margin:15px auto 0;display:block}.login-page{min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(circle at 15% 10%,#2e7ce544,transparent 28%),linear-gradient(135deg,#06152a,#0e3462);position:relative;overflow:hidden}.login-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:#1769e020;right:-160px;top:-170px}.login-card{position:relative;width:min(440px,100%);background:#fff;border-radius:20px;padding:29px;box-shadow:0 30px 90px #0004}.login-brand{display:flex;gap:11px;align-items:center}.login-logo{width:58px;height:58px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:0;overflow:hidden;flex-shrink:0}.login-logo img{width:100%;height:100%;display:block;object-fit:contain}.login-brand b{display:block;font-size:12px;letter-spacing:.06em}.login-brand span{display:block;color:#8191a5;font-size:10px;margin-top:2px}.login-heading{margin:28px 0 18px}.login-heading h1{font-size:25px;margin:0}.login-heading p{color:#71839a;font-size:12px;margin:4px 0}.login-note{margin-top:17px;text-align:center;color:#8494a8;font-size:9px}.sidebar-overlay{display:none}@keyframes pulse{50%{opacity:.45;transform:scale(.85)}}@keyframes toastIn{0%{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}@media(max-width:1150px){.stats-grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr}.filter-grid{grid-template-columns:1fr 1fr 1fr}.filter-grid .search-field{grid-column:1/-1}.admin-cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){.sidebar{transform:translate(-101%);transition:transform .25s ease}.main-shell{margin-left:0}.menu-toggle,.mobile-close{display:block}.sidebar-overlay{display:block;position:fixed;inset:0;background:#06152a66;z-index:35;opacity:0;pointer-events:none;transition:.2s}.sidebar-open .sidebar{transform:translate(0)}.sidebar-open .sidebar-overlay{opacity:1;pointer-events:auto}.stats-grid{grid-template-columns:1fr 1fr}.topbar{height:68px}.top-actions .live-text{display:none}.page-head{align-items:flex-start;flex-direction:column}.date-range{flex-wrap:wrap}.filter-grid{grid-template-columns:1fr 1fr}.scanner-layout{grid-template-columns:1fr}.camera-card,.camera-card video{min-height:55vh}.scanner-head{align-items:flex-start;flex-wrap:wrap}.scanner-actions{margin-left:auto}.content{padding:20px 15px}}@media(max-width:600px){.content{padding:16px 11px}.stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:12px;gap:9px}.stat-icon{width:35px;height:35px}.stat-card strong{font-size:19px}.stat-card span{font-size:10px}.stat-card small{font-size:8px}.topbar{padding:0 12px}.page-head h2{font-size:22px}.panel{padding:13px;border-radius:12px}.filter-grid{grid-template-columns:1fr}.filter-grid .search-field{grid-column:auto}.activity-grid,.admin-cards,.form-grid{grid-template-columns:1fr}.inline-form,.form-actions{display:grid}.date-range{width:100%}.date-range label{flex:1}.date-range input,.date-range .btn{width:100%}.chart-panel .panel-head{display:block}.bar-chart{height:245px}.chart-legend{position:static;margin-top:7px}.data-table-wrap{max-height:65vh}.data-table{min-width:700px}.table-toolbar{align-items:flex-start;flex-direction:column}.toolbar-search{width:100%}.scanner-head{display:grid;grid-template-columns:auto 1fr}.scanner-actions{grid-column:1/-1;margin-left:0;width:100%}.scanner-actions .btn{flex:1}.camera-card,.camera-card video{min-height:58vh}.scan-frame{width:68vw;height:68vw}.login-card{padding:23px}.topbar-left>div{min-width:0}.topbar h1{font-size:15px}.top-avatar{width:32px;height:32px}.totp-qr-wrap canvas{width:240px;height:240px}}@media(max-width:600px){.data-table-wrap{overflow:visible;border:0;max-height:none}.data-table{min-width:0;display:block}.data-table thead{display:none}.data-table tbody,.data-table tr{display:block;width:100%}.data-table tbody tr{background:#fff;border:1px solid #e4ebf4;border-radius:12px;margin-bottom:9px;padding:6px 10px;box-shadow:0 4px 14px #12345a08}.data-table td{display:flex;align-items:center;justify-content:space-between;gap:15px;border:0;padding:7px 0;white-space:normal;text-align:right}.data-table td:before{content:attr(data-label);font-weight:700;color:#7890ab;font-size:10px;text-align:left;flex:0 0 42%}.data-table td[colspan]{display:block;text-align:center}.data-table td[colspan]:before{display:none}.data-table .percent{min-width:0;width:58%;justify-content:flex-end}.data-table .percent i{max-width:90px}.compact-table{max-height:330px;overflow:auto}.compact-table .data-table{min-width:650px;display:table}.compact-table .data-table thead{display:table-header-group}.compact-table .data-table tbody{display:table-row-group}.compact-table .data-table tr{display:table-row;border:0;margin:0;padding:0;box-shadow:none}.compact-table .data-table td,.compact-table .data-table th{display:table-cell;white-space:nowrap;padding:9px}.compact-table .data-table td:before{display:none}}*{scrollbar-width:thin;scrollbar-color:#ffffff35 transparent}*::-webkit-scrollbar{width:1px;height:1px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:#ffffff35;border-radius:999px}*::-webkit-scrollbar-thumb:hover{background:#fff5}.nav::-webkit-scrollbar{width:1px}.nav::-webkit-scrollbar-thumb{background:#ffffff42}.schedule-intro{display:flex;gap:13px;align-items:flex-start;background:#f5f9ff;border:1px solid #dce9f8;border-radius:13px;padding:14px 15px;margin-bottom:16px}.schedule-intro-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;background:#e7f0ff;color:#1769e0;font-size:18px}.schedule-intro-main{min-width:0;flex:1}.schedule-intro b{display:block;font-size:13px;color:#1f3857}.schedule-intro p{margin:3px 0 0;color:#71849c;font-size:11px;line-height:1.55}.schedule-server-time{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:9px}.schedule-server-time span{font-size:9px;font-weight:850;letter-spacing:.12em;color:#6c83a0}.schedule-server-time strong{font-size:17px;letter-spacing:.03em;color:#102c50;font-variant-numeric:tabular-nums}.schedule-server-time em{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-style:normal;color:#4d6c8e}.schedule-server-time em i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #22c55e18}.schedule-list{display:grid;gap:10px}.schedule-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px 15px;box-shadow:0 4px 16px #12345a06}.schedule-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.schedule-activity-icon{width:36px;height:36px;border-radius:10px;background:#eaf2ff;color:#1769e0;display:grid;place-items:center;font-size:17px}.schedule-card-head b{display:block;font-size:13px;color:#203a59}.schedule-card-head small{display:block;color:#8292a7;font-size:10px;margin-top:2px}.schedule-time-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:10px;background:#f8fbff;border:1px solid #e7eef7;margin-bottom:11px}.schedule-range{display:flex;align-items:center;gap:9px;color:#183858;font-size:15px;font-variant-numeric:tabular-nums}.schedule-range strong{font-weight:800}.schedule-range span{color:#8aa0b9}.schedule-live-status{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:750;white-space:nowrap}.schedule-live-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.schedule-live-status.active{color:#168243}.schedule-live-status.active .schedule-live-dot{background:#22c55e;box-shadow:0 0 0 4px #22c55e18}.schedule-live-status.upcoming{color:#557394}.schedule-live-status.upcoming .schedule-live-dot{background:#94a3b8}.schedule-live-status.ended{color:#9a6a18}.schedule-live-status.ended .schedule-live-dot{background:#f59e0b}.schedule-fields{display:grid;grid-template-columns:minmax(120px,1fr) 22px minmax(120px,1fr) auto;align-items:end;gap:9px}.schedule-fields label{font-size:10px}.schedule-fields input{font-size:12px;padding:9px 10px}.schedule-arrow{align-self:end;padding-bottom:10px;text-align:center;color:#8aa0b9;font-size:14px}.schedule-save{height:38px;min-width:96px}.schedule-status{min-height:16px;margin-top:7px;font-size:10px;color:#8191a5}.schedule-status.saving{color:#64748b}.schedule-status.saved{color:#168243}.schedule-status.error{color:#b91c1c}.activity-card small{white-space:nowrap}@media(max-width:600px){.schedule-fields{grid-template-columns:1fr 1fr}.schedule-arrow{display:none}.schedule-save{grid-column:1/-1;width:100%}}.report-hero{position:relative;display:flex;align-items:center;gap:15px;padding:17px 18px;margin-bottom:16px;border:1px solid #dce9f8;border-radius:16px;background:linear-gradient(135deg,#f7fbff,#eef5ff);overflow:hidden;animation:reportRise .45s ease both}.report-hero:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-65px;top:-85px;background:#1769e012}.report-hero-icon{position:relative;z-index:1;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#1769e0;color:#fff;font-size:21px;box-shadow:0 10px 25px #1769e02e;flex:0 0 48px}.report-hero h3{margin:2px 0 4px;font-size:17px;color:#17385d}.report-hero p{margin:0;color:#71849c;font-size:11px;line-height:1.55;max-width:760px}.report-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);gap:16px}.report-config,.report-preview-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 7px 25px #12345a08}.report-config{padding:20px;animation:reportRise .5s ease .05s both}.report-preview-card{padding:20px;animation:reportRise .55s ease .1s both}.report-step{display:flex;align-items:center;gap:10px;margin:2px 0 10px}.report-step span{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:#eaf2ff;color:#1769e0;font-size:10px;font-weight:850}.report-step b{display:block;color:#244362;font-size:12px}.report-step small{display:block;color:#8292a7;font-size:9px;margin-top:1px}.report-config>label{font-size:10px;margin-bottom:17px}.report-config .custom-select-btn{font-size:12px;padding:10px 31px 10px 11px}.report-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:17px}.report-date-grid label{font-size:10px}.report-date-grid input{font-size:12px;padding:10px}.report-actions{display:flex;gap:9px;flex-wrap:wrap;padding-top:3px}.report-actions .btn{min-height:41px}.report-actions .btn.primary{min-width:155px}.report-status{display:flex;align-items:center;gap:7px;min-height:19px;margin-top:12px;color:#6e829a;font-size:10px;line-height:1.45}.report-status-dot{width:7px;height:7px;border-radius:50%;background:#94a3b8;flex:0 0 7px}.report-status.ok{color:#15803d}.report-status.ok .report-status-dot{background:#22c55e;box-shadow:0 0 0 4px #22c55e18}.report-status.warn{color:#a16207}.report-status.warn .report-status-dot{background:#f59e0b}.report-status.error{color:#b91c1c}.report-status.error .report-status-dot{background:#ef4444}.report-status.loading{color:#2563eb}.report-status.loading .report-status-dot{background:#3b82f6;animation:pulse 1s infinite}.report-preview-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-bottom:13px;border-bottom:1px solid #edf1f6}.report-preview-top>div>span{display:block;color:#7a91ad;font-size:8px;letter-spacing:.14em;font-weight:850}.report-preview-top b{display:block;color:#193858;font-size:15px;margin-top:3px}.report-file-badge{display:inline-flex;padding:5px 7px;border-radius:7px;background:#e9f8ee;color:#15803d;font-size:8px;font-weight:850;letter-spacing:.08em}.report-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0}.report-metrics>div{padding:11px 9px;border-radius:11px;background:#f7faff;border:1px solid #e8eef7}.report-metrics small{display:block;color:#8191a5;font-size:8px}.report-metrics strong{display:block;color:#173a5e;font-size:19px;margin-top:2px}.report-format-list{display:grid;gap:8px}.report-format-list>div{display:grid;grid-template-columns:22px 1fr;column-gap:6px;align-items:center;padding:8px 9px;border-radius:10px;background:#fbfcfe}.report-format-list span{grid-row:1/3;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:#e8f8ee;color:#16a34a;font-size:11px;font-weight:900}.report-format-list b{font-size:10px;color:#3d5773}.report-format-list small{font-size:8px;color:#8999ac}.report-folder-note{display:flex;gap:9px;margin-top:12px;padding:10px;border-radius:10px;background:#f5f8fc;color:#6d8097}.report-folder-note>span{font-size:16px;color:#1769e0}.report-folder-note b{display:block;color:#405b78;font-size:9px}.report-folder-note small{display:block;font-size:8px;line-height:1.45;margin-top:2px}.report-data-preview{margin-top:16px}.report-preview-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}.report-preview-head b{font-size:12px;color:#274565}.report-preview-head small{font-size:9px;color:#8292a7}.report-mini-table{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;animation:reportFade .35s ease both}.report-mini-table table{width:100%;border-collapse:collapse;min-width:600px}.report-mini-table th,.report-mini-table td{padding:9px 10px;border-bottom:1px solid #edf1f6;text-align:left;font-size:10px;white-space:nowrap}.report-mini-table th{background:#f7faff;color:#647b96;font-size:9px;letter-spacing:.03em}.report-mini-table td{color:#334e6b}.report-mini-table tr:last-child td{border-bottom:0}.report-mini-table td:nth-child(3),.report-mini-table td:nth-child(4){font-weight:700}.report-config .custom-select{margin-top:7px}@keyframes reportRise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes reportFade{0%{opacity:0}to{opacity:1}}@media(max-width:900px){.report-layout{grid-template-columns:1fr}.report-preview-card{animation-delay:.05s}}@media(max-width:600px){.report-hero{align-items:flex-start;padding:14px}.report-hero-icon{width:42px;height:42px;flex-basis:42px}.report-hero h3{font-size:15px}.report-layout{gap:11px}.report-config,.report-preview-card{padding:14px;border-radius:13px}.report-date-grid{grid-template-columns:1fr}.report-actions{display:grid;grid-template-columns:1fr}.report-actions .btn{width:100%}.report-actions .btn.primary{min-width:0}.report-metrics{gap:6px}.report-metrics>div{padding:9px 7px}.report-metrics strong{font-size:17px}.report-preview-head{display:block}.report-preview-head small{display:block;margin-top:2px}}.filter-fixed{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:9px 13px;border:1px solid #d9e3f1;border-radius:12px;background:#f8fbff;box-sizing:border-box}.filter-fixed span{font-size:11px;color:#7a8aa0;line-height:1.1}.filter-fixed b{font-size:13px;color:#12375d;margin-top:3px}.attendance-summary-info{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.summary-chip{display:inline-flex;gap:6px;align-items:center;padding:7px 10px;border:1px solid #dfe8f3;border-radius:999px;background:#f8fbff;font-size:12px;color:#65778e}.summary-chip b{color:#173f68}.attendance-pill{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}.attendance-pill.present{background:#e9f8ef;color:#177344}.attendance-pill.excused{background:#fff4df;color:#a66500}.attendance-pill.absent{background:#fff0f0;color:#b43b3b}.attendance-pill.pending{background:#eef5ff;color:#2f68a3}.attendance-pill.muted{background:#f1f4f8;color:#7a8796}.attendance-summary-table th{white-space:nowrap}.attendance-summary-table td{vertical-align:middle}.report-fixed-class{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border:1px solid #d9e5f3;border-radius:12px;background:#f8fbff}.report-fixed-class b{color:#123e68}.report-fixed-class small{color:#7b8da3}@media(max-width:760px){.attendance-summary-info{gap:6px}.summary-chip{font-size:11px}.attendance-pill{min-width:78px;font-size:11px}.filter-fixed{min-width:0}}.page-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.export-page-btn{position:relative;min-width:132px;min-height:40px;overflow:hidden;isolation:isolate}.export-page-btn:before{content:"";position:absolute;inset:-35%;background:linear-gradient(115deg,transparent 35%,#ffffff55 48%,transparent 61%);transform:translate(-70%) rotate(8deg);animation:exportShine 2.7s ease-in-out infinite;z-index:-1}.export-page-btn:hover{box-shadow:0 9px 24px #1769e055}.export-page-icon{display:inline-grid;place-items:center;font-size:17px;line-height:1;animation:exportFloat 1.8s ease-in-out infinite}.export-page-btn.is-exporting .export-page-icon{animation:exportSpin .8s linear infinite}.export-page-btn.is-exporting{animation:exportWorking 1.2s ease-in-out infinite}@keyframes exportShine{0%,55%{transform:translate(-70%) rotate(8deg)}75%,to{transform:translate(70%) rotate(8deg)}}@keyframes exportFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes exportSpin{to{transform:rotate(360deg)}}@keyframes exportWorking{0%,to{box-shadow:0 7px 17px #1769e02b}50%{box-shadow:0 8px 28px #1769e070}}.pdf-capture-mode .export-page-btn:before,.pdf-capture-mode .export-page-btn.is-exporting{animation:none!important}.pdf-capture-mode *{animation:none!important;transition:none!important}@media(max-width:760px){.page-head-actions{width:100%;justify-content:stretch}.page-head-actions .export-page-btn,.page-head-actions .head-date{flex:1}.page-head-actions .head-date{justify-content:center}}@media(max-width:600px){.page-head-actions{display:grid;grid-template-columns:1fr}.page-head-actions .export-page-btn,.page-head-actions .head-date{width:100%}}body.pdf-table-export .attendance-summary-table{display:table!important;width:100%!important;min-width:0!important;table-layout:fixed;border-collapse:collapse}body.pdf-table-export .attendance-summary-table thead{display:table-header-group!important}body.pdf-table-export .attendance-summary-table tbody{display:table-row-group!important}body.pdf-table-export .attendance-summary-table tr{display:table-row!important;width:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}body.pdf-table-export .attendance-summary-table th,body.pdf-table-export .attendance-summary-table td{display:table-cell!important;text-align:left!important;vertical-align:middle;padding:11px 10px!important;border-left:0;border-right:0;white-space:normal!important;overflow-wrap:anywhere;line-height:1.3}body.pdf-table-export .attendance-summary-table td{border-bottom:1px solid #e4ebf4!important}body.pdf-table-export .attendance-summary-table td:before{display:none!important;content:none!important}body.pdf-table-export .attendance-summary-table td[colspan]{text-align:center!important}body.pdf-table-export .attendance-summary-table th:first-child,body.pdf-table-export .attendance-summary-table td:first-child{text-align:center!important;padding-left:4px!important;padding-right:4px!important}body.pdf-table-export .attendance-summary-table .percent{min-width:0!important;width:100%!important;justify-content:flex-start!important;gap:9px}body.pdf-table-export .attendance-summary-table .percent>span{width:auto!important;min-width:62px}body.pdf-table-export .attendance-summary-table .percent i{max-width:none!important;height:8px}body.pdf-table-export .attendance-summary-table .attendance-pill{min-width:0!important;padding:5px 12px}body.pdf-export-nonim .attendance-summary-table{font-size:19.5px}body.pdf-export-nonim .attendance-summary-table th{font-size:17px;letter-spacing:.02em}body.pdf-export-nonim .attendance-summary-table .attendance-pill{font-size:17px}body.pdf-export-petugas .attendance-summary-table{font-size:17.7px}body.pdf-export-petugas .attendance-summary-table th{font-size:16px;letter-spacing:.02em}body.pdf-export-petugas .attendance-summary-table .attendance-pill{font-size:15.5px}body.pdf-table-export .page-head p{font-size:16px}body.pdf-table-export .summary-chip{font-size:16px;padding:8px 13px}body.pdf-table-export .table-toolbar,body.pdf-table-export .table-toolbar span,body.pdf-table-export .table-toolbar small{font-size:16px}