:root{--green:#176b4d;--green-dark:#0f5039;--green-soft:#e9f7f0;--ink:#18342b;--muted:#6d7e77;--line:#dce7e1;--bg:#f3f7f5;--white:#fff;--red:#c63c31;--gold:#f3b84b;--shadow:0 18px 48px rgba(22,70,51,.09)}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--ink);font:16px/1.5 Inter,"Segoe UI",system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.brand-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#278363,var(--green));color:#fff;font-size:22px;font-weight:900;box-shadow:0 9px 22px #176b4d38}.login-page{min-height:100vh;background:linear-gradient(135deg,#0d4e37 0,#176b4d 52%,#1d7958 100%)}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}.login-intro{color:#fff;padding:clamp(32px,6vw,88px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-intro:after{content:"";position:absolute;width:520px;height:520px;border:1px solid #ffffff20;border-radius:50%;right:-250px;bottom:-220px;box-shadow:0 0 0 70px #ffffff08,0 0 0 140px #ffffff06}.school-brand{display:flex;align-items:center;gap:12px;position:relative;z-index:1}.school-brand>div{display:flex;flex-direction:column}.school-brand strong{font-size:15px}.school-brand small{opacity:.7}.intro-copy{max-width:670px;position:relative;z-index:1}.secure-pill{display:inline-block;padding:7px 12px;border:1px solid #ffffff35;border-radius:99px;background:#ffffff12;font-size:13px;font-weight:700}.intro-copy h1{font-size:clamp(38px,5vw,68px);line-height:1.04;letter-spacing:-.045em;margin:22px 0}.intro-copy p{font-size:18px;max-width:610px;color:#d7eee5}.intro-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;z-index:1}.intro-points>div{display:flex;gap:12px;padding:16px;border-top:1px solid #ffffff2b}.intro-points>b{color:#92d1ba}.intro-points span{display:flex;flex-direction:column}.intro-points small{color:#cfe5dc}.login-panel{background:#f6faf8;border-radius:34px 0 0 34px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px}.login-card{width:min(430px,100%);background:#fff;border:1px solid #dfeae4;border-radius:24px;padding:34px;box-shadow:var(--shadow)}.login-card-head{display:flex;gap:12px;align-items:center}.mobile-logo{display:none}.login-card-head p{color:var(--green);font-weight:800;margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.08em}.login-card h2{font-size:30px;margin:2px 0}.login-hint{color:var(--muted);margin:10px 0 24px}.login-card label,.modal-card label,.settings-form label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:700;margin-bottom:16px}.login-card input,.modal-card input,.modal-card select,.settings-form input,.settings-form select{width:100%;border:1px solid #cddbd4;background:#fff;border-radius:12px;padding:12px 13px;outline:none}.login-card input:focus,.modal-card input:focus,.settings-form input:focus{border-color:var(--green);box-shadow:0 0 0 3px #176b4d1b}.pin-field{display:flex;border:1px solid #cddbd4;border-radius:12px;overflow:hidden}.pin-field:focus-within{border-color:var(--green);box-shadow:0 0 0 3px #176b4d1b}.pin-field input{border:0;box-shadow:none!important}.pin-field button{border:0;background:#fff;padding:0 13px;color:var(--green);font-weight:800}.primary-button,.primary-small{border:0;background:linear-gradient(135deg,#1f7a59,var(--green-dark));color:#fff;border-radius:12px;font-weight:800;box-shadow:0 9px 24px #176b4d28}.primary-button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 16px}.primary-small{padding:10px 15px}.primary-button:disabled,.primary-small:disabled{opacity:.55;cursor:not-allowed}.login-help,.login-footer{text-align:center;color:var(--muted);font-size:13px}.login-footer{margin-top:22px}.alert,.notice{padding:12px 14px;border-radius:12px;background:#fff0ee;color:#9d2f27;margin:0 0 16px}.app-header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:#ffffffdf;border-bottom:1px solid var(--line);backdrop-filter:blur(15px);position:sticky;top:0;z-index:20}.app-brand{display:flex;align-items:center;gap:11px;min-width:0}.app-brand>div{display:flex;flex-direction:column;min-width:0}.app-brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-brand small{color:var(--muted)}.header-actions{display:flex;gap:8px}.soft-button,.icon-button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:9px 12px;font-weight:700}.app-main{width:min(1120px,92vw);margin:auto;padding:34px 0 92px}.welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.welcome p{margin:0 0 5px;color:var(--green);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.welcome h1{font-size:clamp(28px,4vw,42px);line-height:1.1;margin:0;letter-spacing:-.04em}.welcome span{color:var(--muted)}.clock{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:0 8px 25px #174a3710}.clock b{font-size:20px;font-variant-numeric:tabular-nums}.clock small{margin-left:5px;color:var(--muted)}.notice{background:#fff5dd;color:#86560b;border:1px solid #eed493}.app-tabs{display:flex;gap:4px;width:max-content;background:#e8efeb;border:1px solid #d7e2dc;padding:4px;border-radius:12px;margin-bottom:18px}.app-tabs button{border:0;background:transparent;border-radius:9px;padding:9px 28px;color:var(--muted);font-weight:800}.app-tabs button.active{background:#fff;color:var(--green);box-shadow:0 4px 14px #164b3712}.tab-panel{display:none}.tab-panel.active{display:block}.attendance-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.surface{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}.surface-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px}.surface h2{font-size:18px;margin:0}.surface-head p{margin:3px 0 0;color:var(--muted);font-size:14px}.status-badge{padding:5px 10px;border-radius:99px;background:#f0f1f2;color:var(--muted);font-size:12px;font-weight:800}.status-badge.ready{background:var(--green-soft);color:var(--green)}.status-badge.warning{background:#fff3d8;color:#8d5d0d}.schedule-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;background:#eef7f2;border-radius:12px;color:var(--green);font-size:14px}.schedule-bar strong{font-variant-numeric:tabular-nums}.location-orbit{width:210px;height:210px;border-radius:50%;border:1px solid #acd8c6;display:grid;place-items:center;margin:20px auto;background:radial-gradient(circle,#fff 0 32%,#e8f7f0 33% 58%,transparent 59%);position:relative}.location-orbit:before,.location-orbit:after{content:"";position:absolute;border:1px dashed #aad3c2;border-radius:50%}.location-orbit:before{inset:20px}.location-orbit:after{inset:50px}.location-dot{width:96px;height:96px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,#268260,var(--green-dark));z-index:1;box-shadow:0 15px 32px #176b4d45;font-size:22px}.location-dot b{font-size:16px}.location-dot small{font-size:10px;opacity:.8}.location-note{text-align:center;color:var(--muted);font-size:13px}.attendance-action{justify-content:center;margin-top:12px}.form-error{color:var(--red);text-align:center}.side-column{display:flex;flex-direction:column;gap:18px}.progress{height:8px;background:#e9eeeb;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:var(--green);transition:width .3s}.timeline>div{display:flex;align-items:center;gap:11px;padding:15px 0;border-bottom:1px solid #edf1ef}.timeline>div:last-child{border:0}.timeline i{width:40px;height:40px;border-radius:12px;background:#eef1ef;color:#819189;display:grid;place-items:center;font-style:normal;font-weight:900}.timeline i.done{background:var(--green-soft);color:var(--green)}.timeline span{display:flex;flex-direction:column}.timeline small{color:var(--muted)}.timeline b{font-size:19px}.security-card{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-radius:20px;padding:22px}.security-card p{margin:6px 0 0;color:#d5e9e0;font-size:14px}.history-row,.record-row,.teacher-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #edf1ef}.history-row:last-child,.record-row:last-child,.teacher-row:last-child{border:0}.history-row>span:nth-child(2),.record-row>span:nth-child(2),.teacher-row>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.history-row small,.record-row small,.teacher-row small{color:var(--muted)}.history-row em,.record-row em{font-style:normal;background:var(--green-soft);color:var(--green);border-radius:99px;padding:4px 9px;font-size:12px;font-weight:800}.history-row em.late,.record-row em.late{background:#fff0ee;color:var(--red)}.date-tile,.avatar{width:42px;height:42px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--green-soft);color:var(--green);font-weight:900}.date-tile small{font-size:10px;text-transform:uppercase}.list-state .empty{padding:50px 10px;text-align:center;color:var(--muted)}.admin-panel{display:flex;flex-direction:column;gap:18px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat-grid article{background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column}.stat-grid span{color:var(--muted);font-size:13px}.stat-grid b{font-size:30px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.row-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.row-actions button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 8px;font-size:11px}.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.settings-form .wide{grid-column:1/-1}.location-inputs{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}.schedule-editor{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:16px}.schedule-heading{display:flex;justify-content:space-between;align-items:center;padding:13px;background:#edf4f0}.schedule-heading>div{display:flex;flex-direction:column}.schedule-heading small{color:var(--muted)}.schedule-heading>span{font-size:12px;font-weight:800;color:var(--green);background:#fff;padding:5px 8px;border-radius:99px}.schedule-row{display:grid;grid-template-columns:1fr 140px 140px;gap:12px;align-items:end;padding:11px 13px;border-top:1px solid var(--line)}.schedule-row label{margin:0}.day-toggle{flex-direction:row!important;align-items:center}.day-toggle input{width:18px;height:18px;accent-color:var(--green)}.day-toggle span{display:flex;flex-direction:column}.day-toggle small{color:var(--muted)}.form-actions{display:flex;justify-content:flex-end}.modal{border:0;padding:0;background:transparent}.modal::backdrop{background:#102b2280;backdrop-filter:blur(5px)}.modal-card{width:min(520px,92vw);background:#fff;border-radius:20px;padding:24px;box-shadow:0 24px 70px #102b224d}.modal-head{display:flex;justify-content:space-between;margin-bottom:18px}.modal-head p{margin:0;color:var(--green);font-size:12px;font-weight:800;text-transform:uppercase}.modal-head h2{margin:3px 0}.close-button{border:0;background:#eef3f0;width:36px;height:36px;border-radius:10px;font-size:22px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:80;padding:12px 18px;border-radius:12px;color:#fff;background:var(--green);box-shadow:0 15px 40px #102b2240;font-weight:700}.toast.error{background:var(--red)}
.brand-link{text-decoration:none;color:inherit}.soft-link{display:inline-flex;align-items:center;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:9px 12px;font-weight:700;text-decoration:none}.admin-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.admin-shortcuts>a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}.admin-shortcuts>a:hover{transform:translateY(-2px);border-color:#9bc8b5}.admin-shortcuts span:nth-child(2){display:flex;flex-direction:column}.admin-shortcuts small{color:var(--muted);margin-top:2px}.admin-shortcuts em{font-style:normal;color:var(--green);font-size:20px}.shortcut-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--green-soft);color:var(--green);font-size:21px;font-weight:900}.admin-main{width:min(1240px,94vw)}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}.page-heading p{margin:0 0 5px;color:var(--green);font-size:13px;font-weight:800;letter-spacing:.06em}.page-heading h1{font-size:clamp(28px,4vw,42px);line-height:1.1;margin:0;letter-spacing:-.04em}.page-heading span{display:block;color:var(--muted);margin-top:6px}.admin-nav{display:flex;gap:4px;overflow-x:auto;background:#e8efeb;border:1px solid #d7e2dc;padding:4px;border-radius:12px;margin-bottom:18px;width:max-content;max-width:100%}.admin-nav a{white-space:nowrap;text-decoration:none;color:var(--muted);font-weight:800;padding:9px 18px;border-radius:9px}.admin-nav a.active{background:#fff;color:var(--green);box-shadow:0 4px 14px #164b3712}.schedule-page-grid{grid-template-columns:minmax(430px,.9fr) minmax(480px,1.1fr);align-items:start}.filter-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}.filter-bar label,.recap-controls label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:13px;font-weight:700}.filter-bar select,.recap-controls input,.recap-controls select{border:1px solid #cddbd4;background:#fff;border-radius:10px;padding:9px 11px}.legend{display:flex;gap:6px;flex-wrap:wrap}.legend span,.holiday-row em{font-style:normal;border-radius:99px;padding:4px 8px;font-size:11px;font-weight:800}.holiday-national{background:#e7f1ff!important;color:#285f9b!important}.holiday-joint{background:#fff0df!important;color:#9c5b14!important}.holiday-regional{background:#f4eaff!important;color:#75439b!important}.holiday-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #edf1ef}.holiday-row:last-child{border:0}.holiday-row>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.holiday-row small{color:var(--muted);line-height:1.8}.danger-text{color:var(--red)!important}.helper-text{border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:12px;margin:12px 0 0}.location-page-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr);gap:18px;align-items:start}.location-guide ol{padding-left:21px;color:var(--muted)}.location-guide li{margin:8px 0}.location-orbit.small{width:175px;height:175px;margin:15px auto}.location-orbit.small .location-dot{width:82px;height:82px}.security-card.compact{border-radius:14px;padding:16px;margin-top:18px}.settings-form select{width:100%;border:1px solid #cddbd4;background:#fff;border-radius:12px;padding:12px 13px;outline:none}.recap-controls{margin-bottom:16px}.recap-controls form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.recap-controls label{min-width:190px}.excel-button{margin-left:auto;display:inline-flex;align-items:center;background:#e9f7f0;color:var(--green);border:1px solid #b8dbc9;border-radius:11px;padding:10px 14px;font-weight:800;text-decoration:none}.recap-stat-grid{grid-template-columns:repeat(6,1fr);margin-bottom:16px}.recap-summary{margin-bottom:16px}.table-wrap{width:100%;overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:720px}.data-table th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;background:#f5f8f6}.data-table th,.data-table td{padding:11px 12px;border-bottom:1px solid #e9efec;vertical-align:middle}.data-table td small{display:block;color:var(--muted)}.status-chip{display:inline-flex;padding:4px 8px;border-radius:99px;font-size:11px;font-weight:800;white-space:nowrap}.status-present{background:var(--green-soft)!important;color:var(--green)!important}.status-late{background:#fff3d8!important;color:#8d5d0d!important}.status-absent{background:#fff0ee!important;color:var(--red)!important}.status-muted{background:#eef1ef!important;color:#718079!important}.status-pending{background:#e7f1ff!important;color:#285f9b!important}.detail-table{min-width:900px}.detail-table td:nth-child(6){max-width:300px;color:var(--muted)}
.passkey-panel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:14px;padding:11px 12px;border:1px solid #eed493;background:#fff8e8;border-radius:12px}.passkey-panel.active{border-color:#b8dbc9;background:var(--green-soft)}.passkey-panel.pending{border-color:#bed4ed;background:#eef6ff}.passkey-panel>span:nth-child(2){display:flex;flex-direction:column}.passkey-panel small{color:var(--muted)}.passkey-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--green);font-size:22px;font-weight:900}.security-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;align-items:start;margin-bottom:18px}.mode-option{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:10px;cursor:pointer}.mode-option:has(input:checked){border-color:#75b39a;background:var(--green-soft)}.mode-option input{margin-top:5px;accent-color:var(--green)}.mode-option span{display:flex;flex-direction:column}.mode-option small{color:var(--muted)}.confirm-check{display:flex;align-items:flex-start;gap:9px;padding:11px;border-radius:11px;background:#fff3d8;color:#79530f;font-size:13px;margin:12px 0}.confirm-check input{margin-top:3px}.device-row{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid #edf1ef}.device-row:last-child{border:0}.device-row>span:nth-child(2){display:flex;flex-direction:column}.device-row small{color:var(--muted)}.device-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;background:var(--green-soft);color:var(--green);font-weight:900}.approve-button{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}.security-teachers{margin-bottom:18px}.security-table button.tiny{padding:6px 8px;font-size:11px}.compact-empty{padding:25px 10px!important}
.admin-shortcuts{grid-template-columns:repeat(3,1fr)}
@media(max-width:1050px){.schedule-page-grid,.location-page-grid,.security-layout{grid-template-columns:1fr}.admin-shortcuts{grid-template-columns:repeat(2,1fr)}.recap-stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.login-shell{grid-template-columns:1fr}.login-intro{display:none}.login-panel{min-height:100vh;border-radius:0}.mobile-logo{display:grid;width:42px;height:42px;border-radius:13px;place-items:center;background:var(--green);color:#fff;font-weight:900}.attendance-layout,.admin-grid{grid-template-columns:1fr}.admin-shortcuts{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:1fr 1fr}.schedule-row{grid-template-columns:1fr 1fr}.schedule-row .day-toggle{grid-column:1/-1}.location-inputs{grid-template-columns:1fr 1fr}.location-inputs button{grid-column:1/-1}}
@media(max-width:560px){.app-header{height:64px;padding:0 3vw}.app-brand strong{max-width:150px}.app-brand small{display:none}.header-actions #install-app{display:none}.header-actions button{padding:8px;font-size:12px}.app-main{width:94vw;padding-top:20px}.welcome{align-items:flex-start}.welcome h1{font-size:27px}.welcome>div>span{display:block;font-size:14px;max-width:250px}.clock{padding:8px}.clock b{font-size:15px}.clock small{display:none}.app-tabs{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:50;width:calc(100vw - 20px);justify-content:space-around;background:#ffffffee;box-shadow:0 14px 40px #103a2b38;backdrop-filter:blur(12px)}.app-tabs button{flex:1;padding:10px 12px}.surface{padding:16px;border-radius:16px}.side-column{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr;gap:8px}.stat-grid article{padding:12px 15px;flex-direction:row;align-items:center;justify-content:space-between}.stat-grid b{font-size:24px}.settings-form{grid-template-columns:1fr}.settings-form .wide{grid-column:1}.location-inputs,.schedule-row{grid-template-columns:1fr}.schedule-row .day-toggle,.location-inputs button{grid-column:1}.surface-head{flex-wrap:wrap}.teacher-row{grid-template-columns:auto 1fr}.teacher-row .row-actions{grid-column:2;justify-content:flex-start}.two-cols{grid-template-columns:1fr}.login-card{padding:25px 20px}.toast{top:72px;width:90vw;text-align:center}.location-orbit{width:190px;height:190px}}
@media(max-width:560px){.passkey-panel{grid-template-columns:auto 1fr}.passkey-panel button{grid-column:1/-1;width:100%}.device-row{grid-template-columns:auto 1fr}.device-row .row-actions{grid-column:2;justify-content:flex-start}.admin-nav a{padding:8px 12px}.admin-shortcuts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Visual verifikasi perangkat dan pemasangan PWA */
.install-pwa-button{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;margin-top:14px;padding:12px;border:1px solid #b8dbc9;border-radius:13px;background:#edf8f2;color:var(--ink);text-align:left;cursor:pointer}.install-pwa-button:hover,.install-pwa-button.ready{border-color:var(--green);background:var(--green-soft)}.install-pwa-button>span:nth-child(2){display:flex;flex-direction:column}.install-pwa-button small{color:var(--muted);font-weight:500;margin-top:2px}.install-pwa-button em{font-style:normal;color:var(--green);font-weight:900}.install-pwa-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--green);font-size:24px;font-weight:900;box-shadow:0 5px 15px #176b4d18}
.verification-preview{display:flex;align-items:center;gap:10px;margin:4px 0 12px;padding:11px 12px;border:1px solid #b8dbc9;border-radius:12px;background:#edf8f2}.verification-preview>span:last-child{display:flex;flex-direction:column}.verification-preview small{color:var(--muted);font-size:12px;margin-top:2px}.mini-fingerprint{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--green);font-size:25px;font-weight:900}
.verification-card{width:min(470px,92vw);text-align:center}.verification-card .modal-head{text-align:left}.fingerprint-visual{width:104px;height:104px;display:grid;place-items:center;margin:0 auto 12px;border-radius:50%;background:linear-gradient(145deg,#edf9f3,#d8f0e5);box-shadow:inset 0 0 0 1px #b8dbc9,0 14px 35px #176b4d1f}.fingerprint-visual svg{width:72px;height:72px;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.verification-copy{color:var(--muted);margin:0 auto 15px;max-width:390px}.verification-choices{display:grid;gap:10px;text-align:left}.verification-choices>button{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}.verification-choices>button:hover,.verification-choices>button:focus{border-color:var(--green);background:var(--green-soft);outline:none}.verification-choices>button>span:nth-child(2){display:flex;flex-direction:column}.verification-choices small{color:var(--muted);margin-top:2px}.verification-choices em{font-style:normal;color:var(--green);font-size:22px}.choice-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-size:24px;font-weight:900}.verification-progress{min-height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:15px;border:1px solid #b8dbc9;border-radius:14px;background:var(--green-soft)}.verification-progress small{color:var(--muted)}.security-loader{width:34px;height:34px;border:4px solid #b8dbc9;border-top-color:var(--green);border-radius:50%;animation:security-spin .8s linear infinite}.verification-privacy{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.45}@keyframes security-spin{to{transform:rotate(360deg)}}
@media(max-width:560px){.verification-card{padding:20px}.fingerprint-visual{width:88px;height:88px}.fingerprint-visual svg{width:62px;height:62px}.verification-choices>button{padding:11px}.install-pwa-button{grid-template-columns:auto 1fr}.install-pwa-button em{grid-column:2}}

/* Rekap visual dan peringkat kedisiplinan */
.recap-visual-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;margin-bottom:16px}.attendance-chart{display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:center}.donut-chart{width:180px;height:180px;border-radius:50%;display:grid;place-items:center;position:relative;background:#e8efeb}.donut-chart:after{content:"";position:absolute;inset:25px;border-radius:50%;background:#fff;box-shadow:0 4px 18px #163f3012}.donut-chart span{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}.donut-chart b{font-size:30px}.donut-chart small{color:var(--muted)}.chart-legend>div{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:7px 0}.chart-legend i{width:11px;height:11px;border-radius:50%}.chart-legend span{display:flex;flex-direction:column;font-weight:700}.chart-legend small{color:var(--muted);font-weight:400}.chart-legend>p{font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin:8px 0 0}.ranking-list{display:flex;flex-direction:column;gap:6px}.ranking-row{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:10px 11px;border:1px solid var(--line);border-radius:13px}.ranking-row.best{background:linear-gradient(90deg,#eaf8f1,#fff);border-color:#a8d7c3}.ranking-row.attention{background:#fff8f0;border-color:#efd6b3}.rank-number{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f1f5f3;font-weight:900}.ranking-row>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.ranking-row small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ranking-row strong{font-size:20px;color:var(--green)}.ranking-row em{height:5px;background:#e8efeb;border-radius:99px;overflow:hidden;margin-top:6px}.ranking-row em i{display:block;height:100%;background:linear-gradient(90deg,#49a17d,var(--green));border-radius:99px}.score-pill{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;background:var(--green);color:#fff;font-size:12px;font-weight:900}.status-early{background:#f4eaff!important;color:#75439b!important}.status-excused{background:#e7f1ff!important;color:#285f9b!important}.recap-exceptions{margin-bottom:16px}.exception-table{min-width:760px}.recap-summary-table{min-width:900px}
@media(max-width:1050px){.recap-visual-grid{grid-template-columns:1fr}.attendance-chart{grid-template-columns:180px 1fr}}
@media(max-width:620px){.attendance-chart{grid-template-columns:1fr}.donut-chart{margin:auto}.recap-controls form>*{width:100%;margin-left:0}.ranking-row small{white-space:normal}.recap-visual-grid{gap:10px}}

/* Logo resmi madrasah */
.school-logo-box{padding:3px;background:#fff;overflow:hidden;border:1px solid #dce7e1;box-shadow:0 9px 22px #102f2426}.school-logo-box img{display:block;width:100%;height:100%;object-fit:contain}.mobile-logo.school-logo-box{background:#fff;color:transparent}

/* Keterangan wajib untuk pulang sebelum jadwal */
.modal-card textarea{width:100%;min-height:105px;border:1px solid #cddbd4;background:#fff;border-radius:12px;padding:12px 13px;outline:none;resize:vertical;font:inherit;color:var(--ink)}.modal-card textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px #176b4d1b}.modal-card label small{color:var(--muted);font-weight:400}.early-leave-warning{display:flex;flex-direction:column;gap:3px;margin-bottom:16px;padding:12px 13px;border:1px solid #eed493;border-radius:12px;background:#fff7e4;color:#79530f}.early-leave-warning span{font-size:13px}.history-row em.early,.record-row em.early{background:#f4eaff;color:#75439b}.early-reason{color:#8d5d0d!important;white-space:normal}

/* Hari kerja khusus dan acara sekolah */
.event-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.event-overview article{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;padding:15px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.event-overview article>span:last-child{display:flex;flex-direction:column}.event-overview small{color:var(--muted)}.event-overview-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--green-soft);color:var(--green);font-weight:900}.event-filter{padding-bottom:12px;border-bottom:1px solid var(--line)}.event-row{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid #edf1ef}.event-row:last-child{border:0}.event-date{width:52px;height:52px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#edf9f3,#d9efe5);color:var(--green)}.event-date b{font-size:20px;line-height:1}.event-date small{text-transform:uppercase;font-size:10px;font-weight:800}.event-main{display:flex;flex-direction:column;min-width:0}.event-main>small{color:var(--muted)}.event-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.event-note{margin-top:5px;color:#79530f!important}.event-modal-card{width:min(680px,94vw);max-height:90vh;overflow:auto}.event-fieldset{border:1px solid var(--line);border-radius:14px;padding:12px 13px;margin:0 0 16px}.event-fieldset legend{padding:0 6px;color:var(--green);font-size:13px;font-weight:800}.event-choice{display:grid!important;grid-template-columns:auto 1fr;gap:9px!important;align-items:flex-start;margin:0 0 10px!important;padding:8px;border-radius:10px}.event-choice:last-child{margin-bottom:0!important}.event-choice:has(input:checked){background:var(--green-soft)}.event-choice input{width:18px!important;height:18px;margin-top:3px;accent-color:var(--green)}.event-choice span{display:flex;flex-direction:column}.participant-picker{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:220px;overflow:auto;margin-top:10px;padding:10px;background:#f5f8f6;border-radius:11px}.participant-picker label{display:grid!important;grid-template-columns:auto 1fr;gap:8px!important;align-items:center;margin:0!important;padding:8px;background:#fff;border:1px solid var(--line);border-radius:10px}.participant-picker input{width:17px!important;height:17px;accent-color:var(--green)}.participant-picker span{display:flex;flex-direction:column}.participant-picker small{font-size:11px}
@media(max-width:850px){.event-overview{grid-template-columns:1fr}.event-overview article{padding:12px}}
@media(max-width:560px){.event-row{grid-template-columns:auto 1fr}.event-row .row-actions{grid-column:2;justify-content:flex-start}.participant-picker{grid-template-columns:1fr}.event-modal-card{padding:18px}.event-overview{gap:8px}}

/* Notifikasi absensi admin dan kepala sekolah */
.notification-bell{position:relative;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);padding:0}.notification-bell:hover{border-color:#94c3af;background:var(--green-soft);color:var(--green)}.notification-bell svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.notification-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;border:2px solid #fff;border-radius:99px;background:var(--red);color:#fff;font-size:10px;font-weight:900}.notification-scrim{position:fixed;inset:0;z-index:58;background:#102b2245;backdrop-filter:blur(2px)}.notification-panel{position:fixed;z-index:60;top:78px;right:max(16px,4vw);width:min(410px,calc(100vw - 24px));max-height:calc(100vh - 94px);display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 28px 80px #102b2240;text-align:left}.notification-panel-head{display:flex;justify-content:space-between;align-items:flex-start;padding:19px 20px 14px;border-bottom:1px solid var(--line)}.notification-panel-head small{color:var(--green);font-size:11px;font-weight:900;letter-spacing:.08em}.notification-panel-head h2{margin:2px 0 0;font-size:20px}.notification-panel-head button{width:34px;height:34px;border:0;border-radius:10px;background:#eef3f0;color:var(--ink);font-size:22px}.notification-device{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 16px 8px;padding:13px;border:1px solid #b8dbc9;border-radius:14px;background:var(--green-soft)}.notification-device>div{display:flex;flex-direction:column;min-width:0}.notification-device small{color:var(--muted);font-size:12px}.notification-device button{flex:0 0 auto;padding:8px 11px}.notification-settings{margin:0 16px 10px;border:1px solid var(--line);border-radius:12px;background:#fafcfb}.notification-settings summary{padding:10px 12px;color:var(--green);font-size:13px;font-weight:800;cursor:pointer}.notification-settings>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px}.notification-settings label{display:flex;align-items:flex-start;gap:7px;color:var(--muted);font-size:12px}.notification-settings input{margin-top:3px;accent-color:var(--green)}.notification-list{min-height:130px;overflow:auto;border-top:1px solid #edf1ef}.notification-item{width:100%;display:grid;grid-template-columns:auto 1fr;gap:11px;padding:13px 17px;border:0;border-bottom:1px solid #edf1ef;background:#fff;color:var(--ink);text-align:left}.notification-item:hover{background:#f7faf8}.notification-item.unread{background:#edf8f3}.notification-item.unread b:after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%;background:var(--green);vertical-align:middle}.notification-item>span:last-child{display:flex;flex-direction:column;min-width:0}.notification-item b{font-size:13px}.notification-item small{margin-top:2px;color:var(--muted);font-size:12px;white-space:normal}.notification-item em{margin-top:5px;color:#8b9993;font-size:10px;font-style:normal}.notification-kind{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:var(--green-soft)}.notification-kind:before{font-size:17px;font-weight:900}.notification-kind.check_in:before{content:"↓";color:var(--green)}.notification-kind.late:before{content:"!";color:#98620b}.notification-kind.late{background:#fff3d8}.notification-kind.check_out:before{content:"↑";color:#285f9b}.notification-kind.check_out{background:#e7f1ff}.notification-kind.early_leave:before{content:"↗";color:#75439b}.notification-kind.early_leave{background:#f4eaff}.notification-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;padding:25px;text-align:center;color:var(--muted)}.notification-empty b{color:var(--ink)}.notification-empty.error b{color:var(--red)}.notification-panel-foot{padding:11px 16px;border-top:1px solid var(--line);background:#fafcfb}.notification-panel-foot button{width:100%;border:0;background:transparent;color:var(--green);font-size:12px;font-weight:800}.header-actions>.notification-panel,.header-actions>.notification-scrim{font-weight:400}
@media(max-width:560px){.notification-panel{top:70px;right:8px;width:calc(100vw - 16px);max-height:calc(100vh - 78px);border-radius:17px}.notification-settings>div{grid-template-columns:1fr}.notification-device{align-items:flex-start}.notification-bell{width:38px;height:38px}.header-actions{gap:5px}}

/* Tombol unduh APK pada halaman login */
.app-download-divider{display:flex;align-items:center;gap:10px;margin:16px 0 11px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.11em}.app-download-divider:before,.app-download-divider:after{content:"";height:1px;flex:1;background:var(--line)}.apk-download-button{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:13px;border:1px solid #a9d3c0;border-radius:14px;background:linear-gradient(135deg,#f2fbf6,#e5f6ed);color:var(--ink);text-align:left;text-decoration:none;box-shadow:0 8px 22px #176b4d12;transition:transform .15s,border-color .15s,box-shadow .15s}.apk-download-button:hover,.apk-download-button:focus{transform:translateY(-1px);border-color:var(--green);box-shadow:0 12px 28px #176b4d20;outline:none}.apk-download-button>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.apk-download-button small{color:var(--muted);font-weight:500;margin-top:2px}.apk-download-button em{font-style:normal;color:#fff;background:var(--green);border-radius:9px;padding:7px 10px;font-size:12px;font-weight:900}.apk-download-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--green);box-shadow:0 7px 17px #176b4d2b}.apk-download-icon svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.apk-download-button.unavailable{opacity:.68;background:#f3f5f4;border-color:var(--line);box-shadow:none;cursor:not-allowed}.apk-download-button.unavailable:hover{transform:none;border-color:var(--line);box-shadow:none}.apk-download-button.unavailable .apk-download-icon{background:#809088;box-shadow:none}.apk-download-button.unavailable em{background:#e2e7e4;color:#68766f;white-space:nowrap}@media(max-width:560px){.apk-download-button{grid-template-columns:auto 1fr}.apk-download-button em{grid-column:2;justify-self:start}.app-download-divider{margin-top:15px}}

/* Jarak antarkartu pada menu admin */
.tab-panel.admin-panel.active{display:flex;flex-direction:column;gap:22px}.admin-shortcuts{gap:18px}.admin-shortcuts>a{min-height:100px;padding:18px}.stat-grid{gap:18px}
@media(max-width:850px){.tab-panel.admin-panel.active{gap:18px}.admin-shortcuts{gap:14px}.admin-shortcuts>a{min-height:0;padding:16px}}
@media(max-width:560px){.tab-panel.admin-panel.active{gap:14px}.stat-grid{gap:10px}.admin-shortcuts{gap:12px}.admin-shortcuts>a{padding:15px}}

/* Pilihan aplikasi pada halaman login: APK menjadi pilihan utama guru Android */
.teacher-app-choice{margin-top:20px}.apk-feature-card{position:relative;overflow:hidden;border-radius:19px;padding:17px;background:linear-gradient(145deg,#176b4d 0%,#0d5038 74%,#093d2b 100%);color:#fff;box-shadow:0 16px 34px rgba(14,82,57,.25)}.apk-feature-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-72px;top:-84px;border:1px solid rgba(255,255,255,.17);box-shadow:0 0 0 24px rgba(255,255,255,.035),0 0 0 48px rgba(255,255,255,.025);pointer-events:none}.apk-feature-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.apk-feature-top>span{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid rgba(255,255,255,.24);border-radius:99px;background:rgba(255,255,255,.12);font-size:10px;font-weight:900;letter-spacing:.045em}.apk-feature-top small{color:#d7eee5;font-size:11px;font-weight:800}.apk-feature-heading{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}.apk-feature-heading>span:last-child{display:flex;flex-direction:column}.apk-feature-heading b{font-size:20px;line-height:1.2}.apk-feature-heading small{margin-top:4px;color:#d7eee5;line-height:1.4}.apk-phone-visual{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);font-size:24px;font-weight:900}.apk-phone-visual svg{width:35px;height:35px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.apk-benefits{position:relative;z-index:1;display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.apk-benefits span{padding:5px 8px;border-radius:99px;background:rgba(255,255,255,.105);color:#e9f7f0;font-size:10px;font-weight:800}.apk-primary-download{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 13px;border-radius:13px;background:#fff;color:#124d38;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.17);transition:transform .15s,box-shadow .15s}.apk-primary-download:hover,.apk-primary-download:focus{transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,0,0,.22);outline:3px solid rgba(255,255,255,.2)}.apk-primary-download>span:first-child{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#e5f6ed;color:#176b4d;font-size:21px;font-weight:900}.apk-primary-download>span:nth-child(2){display:flex;flex-direction:column}.apk-primary-download b{font-size:14px}.apk-primary-download small{font-size:10px;color:#6d7e77}.apk-primary-download em{font-style:normal;padding:7px 10px;border-radius:9px;background:#176b4d;color:#fff;font-size:11px;font-weight:900}.apk-install-note{position:relative;z-index:1;margin:10px 2px 0;color:#cfe8dd;font-size:10px;text-align:center}.apk-feature-card.unavailable{background:linear-gradient(145deg,#6d7e77,#495a53);box-shadow:none}.web-option-divider{display:flex;align-items:center;gap:10px;margin:17px 0 10px;color:#829189;font-size:9px;font-weight:900;letter-spacing:.12em}.web-option-divider:before,.web-option-divider:after{content:"";height:1px;flex:1;background:#dce7e1}.install-pwa-button.secondary-install{margin-top:0;padding:10px 11px;border-color:#dce7e1;background:#f8faf9;box-shadow:none}.install-pwa-button.secondary-install:hover,.install-pwa-button.secondary-install.ready{border-color:#b8cabf;background:#f2f6f4}.install-pwa-button.secondary-install .install-pwa-icon{width:34px;height:34px;border-radius:10px;background:#edf3f0;color:#60766c;font-size:18px;box-shadow:none}.install-pwa-button.secondary-install em{color:#60766c;font-size:11px}.device-ios .apk-feature-card{display:none}.device-ios .web-option-divider{margin-top:18px}.device-ios .install-pwa-button.secondary-install{padding:13px;border-color:#9fcbb8;background:#edf8f2}.device-ios .install-pwa-button.secondary-install .install-pwa-icon{background:#fff;color:#176b4d}.device-ios .install-pwa-button.secondary-install em{color:#176b4d}
@media(max-width:560px){.teacher-app-choice{margin-top:17px}.apk-feature-card{padding:15px;border-radius:17px}.apk-feature-heading b{font-size:18px}.apk-phone-visual{width:49px;height:49px}.apk-benefits{margin:12px 0}.apk-primary-download{grid-template-columns:auto 1fr auto}.apk-primary-download em{grid-column:auto;justify-self:auto}.apk-install-note{line-height:1.4}.install-pwa-button.secondary-install{grid-template-columns:auto 1fr auto}.install-pwa-button.secondary-install em{grid-column:auto}}

/* Gerakan halus untuk website dan PWA */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:180ms;--motion-normal:300ms}html{scroll-behavior:smooth}.login-card{animation:motion-rise .42s var(--motion-ease) both}.login-intro .school-brand{animation:motion-fade .34s ease-out both}.login-intro .intro-copy{animation:motion-rise .46s var(--motion-ease) .05s both}.login-intro .intro-points{animation:motion-rise .46s var(--motion-ease) .1s both}.app-main{animation:motion-fade .3s ease-out both}.tab-panel.active{animation:motion-panel .28s var(--motion-ease) both}.modal[open]::backdrop{animation:motion-backdrop .2s ease-out both}.modal[open] .modal-card{animation:motion-dialog .28s var(--motion-ease) both}.notification-scrim:not(.hidden){animation:motion-backdrop .18s ease-out both}.notification-panel:not(.hidden){animation:motion-panel-right .28s var(--motion-ease) both}.toast:not(.hidden){animation:motion-toast .26s var(--motion-ease) both}.notice:not(.hidden),.alert:not(.hidden),.pk-setup:not(.hidden){animation:motion-panel .25s var(--motion-ease) both}.history-row,.record-row,.teacher-row,.event-row,.holiday-row,.ranking-row,.notification-item{animation:motion-row .24s var(--motion-ease) both}.progress span,.ranking-row em i{transition:width .45s var(--motion-ease)}button,a,summary,input,select,textarea{transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,opacity var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)}.surface,.stat-grid article,.admin-shortcuts>a,.event-overview article,.ranking-row,.apk-feature-card,.install-pwa-button{transition:transform var(--motion-normal) var(--motion-ease),box-shadow var(--motion-normal) var(--motion-ease),border-color var(--motion-fast) ease}.app-tabs button,.admin-nav a{transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)}button:active,.primary-button:active,.primary-small:active,.soft-button:active,.icon-button:active,.apk-primary-download:active,.install-pwa-button:active{transform:scale(.975)}
@media(hover:hover) and (pointer:fine){.surface:hover,.stat-grid article:hover,.event-overview article:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(22,70,51,.12)}.admin-shortcuts>a:hover,.apk-feature-card:hover{transform:translateY(-3px)}.app-tabs button:hover,.admin-nav a:hover{transform:translateY(-1px)}}
@keyframes motion-fade{from{opacity:0}to{opacity:1}}@keyframes motion-rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}@keyframes motion-panel{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}@keyframes motion-dialog{from{opacity:0;transform:translate3d(0,18px,0) scale(.975)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}@keyframes motion-panel-right{from{opacity:0;transform:translate3d(18px,0,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}@keyframes motion-backdrop{from{opacity:0}to{opacity:1}}@keyframes motion-toast{from{opacity:0;transform:translate3d(-50%,-10px,0) scale(.98)}to{opacity:1;transform:translate3d(-50%,0,0) scale(1)}}@keyframes motion-row{from{opacity:0;transform:translate3d(0,5px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(max-width:560px){:root{--motion-fast:150ms;--motion-normal:240ms}.login-card{animation-duration:.32s}.surface:hover,.stat-grid article:hover,.event-overview article:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Tata letak admin yang lebih rapi */
.admin-overview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:4px 2px 0}.admin-overview-head>div{min-width:0}.admin-overview-head p{margin:0 0 3px;color:var(--green);font-size:11px;font-weight:900;letter-spacing:.09em}.admin-overview-head h2{margin:0;font-size:clamp(22px,3vw,30px);line-height:1.15;letter-spacing:-.025em}.admin-overview-head>div>span{display:block;margin-top:5px;color:var(--muted);font-size:13px}.admin-live-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #b8dbc9;border-radius:99px;background:var(--green-soft);color:var(--green);font-size:11px;font-weight:800}.admin-live-pill i{width:7px;height:7px;border-radius:50%;background:#2a986c;box-shadow:0 0 0 4px #2a986c1c}.admin-stat-grid{gap:16px}.admin-stat-grid .admin-stat-card{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px;min-height:104px;padding:18px 20px;border-radius:18px}.admin-stat-grid .admin-stat-card:after{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 99px 99px 0;background:#6d8f81}.admin-stat-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#edf3f0;color:#47685b;font-size:20px;font-weight:900}.admin-stat-copy{display:flex!important;flex-direction:column;color:inherit!important}.admin-stat-copy small{color:var(--muted);font-size:12px;font-weight:700}.admin-stat-copy b{margin-top:1px;font-size:31px;line-height:1.1;color:var(--ink)}.admin-stat-card.present:after{background:#2a986c}.admin-stat-card.present .admin-stat-icon{background:#e5f7ee;color:#16734f}.admin-stat-card.late:after{background:#e0a12b}.admin-stat-card.late .admin-stat-icon{background:#fff4dc;color:#95600a}.admin-stat-card.accounts:after{background:#4e7ca7}.admin-stat-card.accounts .admin-stat-icon{background:#eaf3fb;color:#315f8b}.admin-section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:2px 2px -7px}.admin-section-heading.compact{margin-top:3px}.admin-section-heading h2{margin:0;font-size:17px;letter-spacing:-.015em}.admin-section-heading p{margin:2px 0 0;color:var(--muted);font-size:12px}.admin-shortcuts>a{align-items:center;min-height:104px;border-color:#d8e5df;background:linear-gradient(145deg,#fff,#fbfdfc)}.admin-shortcuts>a:hover{border-color:#85bca5}.admin-shortcuts .shortcut-icon{width:46px;height:46px;border-radius:14px}.admin-shortcuts span:nth-child(2) b{line-height:1.25}.admin-shortcuts span:nth-child(2) small{line-height:1.45}.admin-shortcuts em{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#f1f6f3;font-size:17px}.admin-detail-grid{align-items:start}.admin-list-card{min-width:0}.admin-list-card .surface-head{padding-bottom:14px;border-bottom:1px solid #edf1ef}.admin-list-card .list-state{min-height:90px}.admin-list-card .history-row,.admin-list-card .record-row,.admin-list-card .teacher-row{padding:13px 6px}.admin-list-card .history-row:hover,.admin-list-card .record-row:hover,.admin-list-card .teacher-row:hover{background:#f7faf8}.admin-list-card .row-actions button{padding:6px 9px;border-radius:9px}.admin-page .page-heading{padding:22px 24px;border:1px solid #dbe8e2;border-radius:20px;background:linear-gradient(135deg,#fff,#f3faf6);box-shadow:0 12px 34px #164b370c}.admin-page .page-heading h1{font-size:clamp(27px,3.6vw,38px)}.admin-page .admin-nav{position:sticky;top:80px;z-index:15;width:100%;padding:5px;background:rgba(232,239,235,.92);box-shadow:0 8px 24px #164b370d;backdrop-filter:blur(12px);scrollbar-width:none}.admin-page .admin-nav::-webkit-scrollbar{display:none}.admin-page .admin-nav a{flex:0 0 auto;text-align:center}.admin-page .surface-head{padding-bottom:13px;border-bottom:1px solid #edf1ef}.admin-page .data-table tbody tr{transition:background-color var(--motion-fast) ease}.admin-page .data-table tbody tr:nth-child(even){background:#fbfdfc}.admin-page .data-table tbody tr:hover{background:#edf8f3}.admin-page .data-table th{position:sticky;top:0;z-index:2}.admin-page .settings-form input,.admin-page .settings-form select,.admin-page .recap-controls input,.admin-page .recap-controls select{min-height:43px}.admin-page .filter-bar,.admin-page .recap-controls form{gap:10px 12px}
@media(min-width:851px){.admin-list-card .list-state{max-height:520px;overflow:auto;padding-right:4px}.admin-detail-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:850px){.admin-overview-head{align-items:flex-start}.admin-stat-grid{grid-template-columns:repeat(3,1fr)}.admin-stat-grid .admin-stat-card{grid-template-columns:1fr;gap:8px;min-height:126px;padding:15px}.admin-stat-icon{width:40px;height:40px}.admin-stat-copy b{font-size:27px}.admin-page .admin-nav{top:70px}.admin-page .page-heading{padding:19px 20px}.admin-section-heading{margin-bottom:-4px}}
@media(max-width:620px){.admin-overview-head{display:block}.admin-live-pill{margin-top:11px}.admin-stat-grid{grid-template-columns:1fr}.admin-stat-grid .admin-stat-card{grid-template-columns:auto 1fr;min-height:0;padding:13px 15px}.admin-stat-grid .admin-stat-card:after{top:12px;bottom:12px}.admin-stat-copy b{font-size:25px}.admin-section-heading{margin-bottom:-2px}.admin-shortcuts>a{min-height:0}.admin-page .page-heading{padding:17px;border-radius:17px}.admin-page .page-heading span{font-size:13px}.admin-page .header-actions .soft-link{width:38px;height:38px;display:grid;place-items:center;padding:0;font-size:0}.admin-page .header-actions .soft-link:before{content:"⌂";font-size:20px}.admin-page .admin-nav{top:66px;margin-left:-3vw;width:calc(100% + 6vw);max-width:none;border-radius:0;padding-left:3vw;padding-right:3vw}.admin-list-card .surface-head{align-items:flex-start}.admin-list-card .surface-head>a,.admin-list-card .surface-head>button{width:100%;justify-content:center;text-align:center}.admin-list-card .teacher-row{padding:12px 2px}}

/* Penyempurnaan visual v3.9.8 */
.ui-icon{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.admin-stat-icon .ui-icon{width:24px;height:24px}.shortcut-icon .ui-icon{width:23px;height:23px}.header-profile{display:flex;align-items:center;gap:9px;min-width:0;padding:4px 9px 4px 4px;border:1px solid var(--line);border-radius:12px;background:#fff}.header-user-avatar{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#e8f7f0,#cfe9dc);color:var(--green);font-size:13px;font-weight:900}.header-user-copy{display:flex;flex-direction:column;max-width:135px;min-width:0}.header-user-copy b,.header-user-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-user-copy b{font-size:11px;line-height:1.3}.header-user-copy small{color:var(--muted);font-size:9px}.admin-trend-card{padding-bottom:18px}.trend-legend{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;font-weight:700}.trend-legend i{width:9px;height:9px;border-radius:3px;background:linear-gradient(180deg,#45a17d,var(--green))}.attendance-trend{min-height:170px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:10px;padding:5px 4px 0}.trend-column{height:145px;display:grid;grid-template-rows:21px 1fr 18px 15px;align-items:end;text-align:center;min-width:0}.trend-column>b{font-size:12px;color:var(--green);font-variant-numeric:tabular-nums}.trend-track{height:88px;display:flex;align-items:flex-end;justify-content:center;border-radius:8px;background:linear-gradient(180deg,#f7faf8,#eef5f1);overflow:hidden}.trend-track i{display:block;width:min(30px,68%);min-height:3px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#51a886,var(--green));box-shadow:0 5px 14px #176b4d2c;animation:trend-grow .5s var(--motion-ease) both}.trend-column strong{font-size:11px;text-transform:capitalize}.trend-column small{color:var(--muted);font-size:9px}.skeleton-list{display:grid;gap:9px;padding:5px 0}.skeleton-list>span{display:block;height:58px;border-radius:13px;background:linear-gradient(100deg,#edf2ef 25%,#f8faf9 40%,#edf2ef 55%);background-size:220% 100%;animation:skeleton-shimmer 1.25s ease-in-out infinite}.skeleton-chart{align-items:end}.skeleton-chart>span{display:block;height:var(--skeleton-height,70%);min-height:45px;border-radius:9px;background:linear-gradient(100deg,#edf2ef 25%,#f8faf9 40%,#edf2ef 55%);background-size:220% 100%;animation:skeleton-shimmer 1.25s ease-in-out infinite}.skeleton-chart>span:nth-child(2),.skeleton-chart>span:nth-child(6){--skeleton-height:48%}.skeleton-chart>span:nth-child(3){--skeleton-height:82%}.skeleton-chart>span:nth-child(4){--skeleton-height:61%}.skeleton-chart>span:nth-child(5){--skeleton-height:90%}.empty-state{min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--muted)}.empty-state-icon{width:44px;height:44px;display:grid;place-items:center;margin-bottom:9px;border-radius:14px;background:#edf5f1;color:var(--green);font-size:22px;font-weight:800}.empty-state b{color:var(--ink);font-size:14px}.empty-state small{max-width:330px;margin-top:3px;font-size:11px}.attendance-trend>.empty-state{grid-column:1/-1}.toast{display:flex;align-items:center;gap:9px;max-width:min(92vw,540px)}.toast-icon{width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;border-radius:8px;background:#ffffff24;font-size:13px;font-weight:900}@keyframes skeleton-shimmer{from{background-position:100% 0}to{background-position:-120% 0}}@keyframes trend-grow{from{height:0}to{height:inherit}}
@media(max-width:1000px){.header-user-copy{display:none}.header-profile{padding:4px}}
@media(max-width:620px){.dashboard-page .app-brand>div{display:none}.header-profile{padding:3px;border-radius:11px}.header-user-avatar{width:31px;height:31px;flex-basis:31px}.attendance-trend{gap:5px;padding-left:0;padding-right:0}.trend-track{height:80px}.trend-column{height:136px}.trend-column strong{font-size:10px}.admin-trend-card{padding-left:13px;padding-right:13px}.empty-state{min-height:125px;padding:18px}.toast{align-items:flex-start}}
.trend-track i{transform-origin:center bottom}@keyframes trend-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.admin-page .empty{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px!important;border:1px dashed #d7e5de;border-radius:14px;background:#fafcfb;color:var(--muted);text-align:center}.admin-page .empty:before{content:"○";width:38px;height:38px;display:grid;place-items:center;margin-bottom:7px;border-radius:12px;background:var(--green-soft);color:var(--green);font-size:19px;font-weight:900}

/* Status koneksi, konfirmasi visual, dan tema waktu otomatis v3.9.9 */
:root{--time-accent:#176b4d;--time-wash:#e9f7f0;--time-halo:rgba(42,152,108,.12)}
body{transition:background-color .55s ease,background-image .55s ease}.dashboard-page{background:radial-gradient(circle at 88% 3%,var(--time-halo),transparent 31%),var(--bg)}
body.theme-morning{--time-accent:#a06b13;--time-wash:#fff4d8;--time-halo:rgba(244,185,75,.18)}
body.theme-day{--time-accent:#176b4d;--time-wash:#e9f7f0;--time-halo:rgba(42,152,108,.12)}
body.theme-evening{--time-accent:#315f70;--time-wash:#e9f2f5;--time-halo:rgba(74,126,147,.15)}
body.theme-night{--time-accent:#304d68;--time-wash:#eaf0f6;--time-halo:rgba(45,74,103,.15)}
.theme-morning.login-page{background:linear-gradient(135deg,#604719 0,#8f6a24 52%,#b07d28 100%)}
.theme-day.login-page{background:linear-gradient(135deg,#0d4e37 0,#176b4d 52%,#1d7958 100%)}
.theme-evening.login-page{background:linear-gradient(135deg,#234553 0,#315f70 52%,#4d7887 100%)}
.theme-night.login-page{background:linear-gradient(135deg,#172a3c 0,#263e55 52%,#34566f 100%)}
.welcome p,.page-heading p{color:var(--time-accent)}.welcome-tools{display:flex;align-items:center;gap:9px}.connection-pill{display:inline-flex!important;align-items:center;gap:7px;width:max-content;max-width:none!important;margin:0!important;padding:6px 10px;border:1px solid #cad8d1;border-radius:99px;background:#fff;color:#64756d!important;font-size:11px!important;font-weight:800;line-height:1.2;white-space:nowrap;box-shadow:0 5px 18px rgba(22,70,51,.06)}.connection-pill i{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#9aa6a0;box-shadow:0 0 0 4px rgba(154,166,160,.13)}.connection-pill>span{display:inline!important;margin:0!important;color:inherit!important;font-size:inherit!important}.connection-pill.online{border-color:#b7d9c8;background:#f4fbf7;color:#176b4d!important}.connection-pill.online i{background:#279668;box-shadow:0 0 0 4px rgba(39,150,104,.13)}.connection-pill.offline{border-color:#ecc2bd;background:#fff5f3;color:#a83b31!important}.connection-pill.offline i{background:#c84b3f;box-shadow:0 0 0 4px rgba(200,75,63,.12)}.page-heading>.connection-pill{align-self:center;flex:0 0 auto}
.success-dialog{width:auto;max-width:none}.success-card{width:min(420px,92vw);padding:29px;border:1px solid #d8e7df;border-radius:24px;background:#fff;text-align:center;box-shadow:0 26px 80px rgba(16,43,34,.3)}.success-check{width:76px;height:76px;display:grid;place-items:center;margin:0 auto 15px;border-radius:24px;background:linear-gradient(145deg,#e5f8ee,#ccebdc);color:var(--green);box-shadow:0 13px 30px rgba(23,107,77,.18)}.success-check svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.success-card>p{margin:0;color:var(--green);font-size:11px;font-weight:900;letter-spacing:.12em}.success-card h2{margin:5px 0 4px;font-size:26px;line-height:1.2;letter-spacing:-.025em}.success-card>span:not(.success-check){display:block;color:var(--muted);font-size:13px}.success-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:21px 0}.success-summary>span{display:flex;flex-direction:column;padding:13px;border:1px solid var(--line);border-radius:14px;background:#f8fbf9}.success-summary small{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.success-summary b{margin-top:2px;color:var(--ink);font-size:18px;font-variant-numeric:tabular-nums}.success-card .primary-button{justify-content:center}
@media(max-width:620px){.welcome-tools{flex-direction:column-reverse;align-items:flex-end;gap:6px}.connection-pill{padding:5px 8px}.page-heading{align-items:flex-start}.page-heading>.connection-pill{align-self:flex-start;margin-top:4px!important}.success-card{padding:24px 20px;border-radius:21px}.success-check{width:68px;height:68px;border-radius:21px}.success-card h2{font-size:23px}}
.success-auto-close{display:block;margin-top:9px;color:var(--muted);font-size:10px}

/* Penyegaran antarmuka v4.0: fokus guru dan pengelompokan admin */
.welcome-modern{padding:4px 2px 2px}.welcome-modern h1{max-width:760px}.time-theme-pill{display:inline-flex;align-items:center;gap:7px;width:max-content;padding:6px 10px;border:1px solid color-mix(in srgb,var(--time-accent) 24%,#fff);border-radius:99px;background:var(--time-wash);color:var(--time-accent);font-size:11px;font-weight:900;line-height:1.2}.time-theme-pill i{width:17px;height:17px;display:grid;place-items:center;font-style:normal;font-size:15px}.app-tabs button{display:flex;align-items:center;justify-content:center;gap:8px}.tab-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.section-kicker{margin:0 0 3px!important;color:var(--time-accent)!important;font-size:10px!important;font-weight:900!important;letter-spacing:.1em!important}.attendance-primary{position:relative;overflow:hidden;padding:25px;background:linear-gradient(145deg,#fff 0%,#fff 62%,var(--time-wash) 150%)}.attendance-primary:after{content:"";position:absolute;right:-105px;top:-125px;width:230px;height:230px;border-radius:50%;border:1px solid var(--time-halo);box-shadow:0 0 0 28px color-mix(in srgb,var(--time-halo) 45%,transparent),0 0 0 56px color-mix(in srgb,var(--time-halo) 22%,transparent);pointer-events:none}.attendance-card-head,.attendance-primary>*{position:relative;z-index:1}.attendance-card-head h2{font-size:24px;letter-spacing:-.025em}.schedule-modern{padding:14px 16px;border:1px solid color-mix(in srgb,var(--time-accent) 18%,#fff);background:var(--time-wash);color:var(--ink)}.schedule-modern>span{display:flex;flex-direction:column}.schedule-modern small{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.schedule-modern b{color:var(--time-accent);font-size:14px}.schedule-modern>strong{font-size:19px;color:var(--time-accent)}.attendance-journey{display:grid;grid-template-columns:1fr minmax(22px,.45fr) 1fr minmax(22px,.45fr) 1fr;align-items:start;margin:23px 0 20px}.attendance-journey>em{height:3px;margin-top:22px;border-radius:99px;background:#dfe8e3}.journey-step{display:flex;flex-direction:column;align-items:center;text-align:center;color:#89958f}.journey-step>i{width:46px;height:46px;display:grid;place-items:center;margin-bottom:8px;border:1px solid #dce6e1;border-radius:15px;background:#f5f8f6;color:#7d8c85;font-style:normal}.journey-step svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.journey-step b{font-size:12px;color:#617169}.journey-step small{font-size:9px}.journey-step.current>i{border-color:color-mix(in srgb,var(--time-accent) 32%,#fff);background:var(--time-wash);color:var(--time-accent);box-shadow:0 9px 22px var(--time-halo)}.journey-step.current b{color:var(--time-accent)}.journey-step.done>i{border-color:var(--green);background:var(--green);color:#fff}.journey-step.done b{color:var(--green)}.journey-step.done+em{background:linear-gradient(90deg,var(--green),#75b79e)}.location-compact{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:#fbfdfc}.location-compact-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--green-soft);color:var(--green)}.location-compact-icon svg,.security-card-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.location-compact>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.location-compact b{font-size:13px}.location-compact small{color:var(--muted);font-size:10px}.location-compact small strong{color:var(--ink)}.location-compact>em{padding:5px 8px;border-radius:99px;background:#edf5f1;color:var(--green);font-size:9px;font-style:normal;font-weight:900;letter-spacing:.05em}.attendance-primary .location-note{margin:12px auto 0;max-width:560px}.attendance-action{min-height:54px;margin-top:17px;border-radius:15px;font-size:15px;box-shadow:0 13px 28px rgba(23,107,77,.24)}.attendance-action:not(:disabled):before{content:"→";width:27px;height:27px;display:grid;place-items:center;margin-right:9px;border-radius:9px;background:#ffffff1f;font-size:17px}.attendance-action[data-kind="out"]:before{content:"←"}.day-progress-card{min-height:265px}.day-progress-card .progress{height:6px;margin-top:6px}.day-progress-card .timeline>div{padding:17px 2px}.day-progress-card .timeline i{width:44px;height:44px;border-radius:14px}.security-modern{display:flex;align-items:flex-start;gap:12px;padding:18px;background:linear-gradient(135deg,#176b4d,#0f5039)}.security-card-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid #ffffff28;border-radius:13px;background:#ffffff12}.security-modern>span:last-child{display:flex;flex-direction:column}.security-modern p{font-size:12px;line-height:1.5}.admin-overview-tools{display:flex;align-items:center;gap:12px}.admin-presence-ring{--progress:0deg;width:74px;height:74px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 74px;border-radius:50%;background:conic-gradient(var(--green) var(--progress),#e5eee9 0)}.admin-presence-ring:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}.admin-presence-ring b,.admin-presence-ring small{position:relative;z-index:1}.admin-presence-ring b{font-size:16px;line-height:1}.admin-presence-ring small{margin-top:3px;color:var(--muted);font-size:8px;font-weight:800;text-transform:uppercase}.admin-menu-groups{display:flex;flex-direction:column;gap:16px}.admin-menu-group{padding:18px;border:1px solid #dce8e2;border-radius:20px;background:#f8fbf9}.admin-menu-group .admin-section-heading{margin:0 2px 13px;align-items:flex-start}.admin-menu-group .admin-section-heading p{margin:0 0 2px;color:var(--green);font-size:9px;font-weight:900;letter-spacing:.1em}.admin-menu-group .admin-section-heading h2{font-size:17px}.admin-menu-group .admin-section-heading span{display:block;margin-top:2px;color:var(--muted);font-size:11px}.admin-menu-group .admin-shortcuts{gap:12px}.admin-shortcuts-three{grid-template-columns:repeat(3,1fr)!important}.admin-shortcuts-two{grid-template-columns:repeat(2,1fr)!important}.admin-menu-group .admin-shortcuts>a{min-height:92px;padding:15px;background:#fff}.admin-menu-group .shortcut-icon{width:42px;height:42px}.admin-menu-group .admin-shortcuts em{background:var(--green-soft)}
@media(max-width:850px){.welcome-modern{align-items:flex-start}.welcome-modern .welcome-tools{flex-wrap:wrap;justify-content:flex-end}.admin-shortcuts-three{grid-template-columns:1fr!important}.admin-shortcuts-two{grid-template-columns:1fr 1fr!important}.attendance-card-head h2{font-size:22px}.attendance-primary{padding:20px}}
@media(max-width:620px){.welcome-modern{display:grid;grid-template-columns:1fr auto;gap:12px}.welcome-modern>div:first-child{min-width:0}.welcome-modern .welcome-tools{flex-direction:column;align-items:flex-end;gap:5px}.time-theme-pill{padding:5px 8px}.welcome-modern .clock{order:-1}.attendance-layout{gap:13px}.attendance-primary{padding:17px}.attendance-card-head{margin-bottom:14px}.attendance-card-head h2{font-size:20px}.schedule-modern{padding:12px 13px}.schedule-modern>strong{font-size:16px}.attendance-journey{grid-template-columns:1fr 18px 1fr 18px 1fr;margin:19px -3px 17px}.attendance-journey>em{margin-top:19px}.journey-step>i{width:39px;height:39px;border-radius:12px}.journey-step svg{width:20px;height:20px}.journey-step b{font-size:11px}.journey-step small{font-size:8px}.location-compact{gap:10px;padding:11px}.location-compact-icon{width:38px;height:38px}.attendance-action{min-height:51px}.app-tabs button{flex-direction:column;gap:2px;padding:7px 10px!important;font-size:10px}.tab-icon{width:21px;height:21px}.admin-overview-tools{margin-top:12px;justify-content:space-between}.admin-presence-ring{width:67px;height:67px;flex-basis:67px}.admin-menu-group{padding:13px;border-radius:17px}.admin-shortcuts-two{grid-template-columns:1fr!important}.admin-menu-group .admin-shortcuts>a{min-height:0}.security-modern{padding:16px}.day-progress-card{min-height:0}}
@supports not (color:color-mix(in srgb,#000 50%,#fff)){.time-theme-pill{border-color:#c9ddd4}.schedule-modern{border-color:#c9ddd4}.attendance-primary:after{display:none}}

/* Perbaikan kerapian mobile v4.0.1 */
.welcome-modern .welcome-tools .time-theme-pill{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center;width:auto!important;min-width:0;min-height:30px;margin:0!important;padding:5px 9px!important;gap:5px;white-space:nowrap}.welcome-modern .welcome-tools .time-theme-pill i{width:16px;height:16px;flex:0 0 16px;font-size:14px}.welcome-modern .welcome-tools .time-theme-pill>span{display:inline!important;margin:0!important;color:inherit!important;font-size:11px!important;line-height:1!important}.admin-overview-head .admin-overview-tools>.admin-live-pill{display:inline-flex;margin:0;color:var(--green);font-size:11px}.admin-overview-head .admin-overview-tools>.admin-presence-ring{display:flex;margin:0;color:var(--ink)}.admin-overview-head .admin-overview-tools>.admin-presence-ring b,.admin-overview-head .admin-overview-tools>.admin-presence-ring small{display:block;margin:0;text-align:center}.admin-overview-head .admin-overview-tools>.admin-presence-ring b{font-size:16px;line-height:1}.admin-overview-head .admin-overview-tools>.admin-presence-ring small{margin-top:3px;font-size:8px;line-height:1;color:var(--muted)}
@media(max-width:620px){.welcome-modern .welcome-tools{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:end;justify-items:end;gap:6px}.welcome-modern .welcome-tools .clock{grid-column:1/-1;justify-self:end;order:initial}.welcome-modern .welcome-tools .connection-pill{min-height:30px;padding:5px 9px}.admin-overview-tools{display:flex;align-items:center;justify-content:flex-start;width:max-content;max-width:100%;margin-top:14px;padding:9px 10px;border:1px solid #dce8e2;border-radius:17px;background:#fff;box-shadow:0 10px 28px rgba(22,70,51,.07)}.admin-overview-head .admin-overview-tools>.admin-live-pill{min-height:34px;padding:7px 10px}.admin-overview-head .admin-overview-tools>.admin-presence-ring{width:64px;height:64px;flex:0 0 64px}.admin-overview-head .admin-overview-tools>.admin-presence-ring:before{inset:5px}}

/* Landing page ringkas dan rapi v4.0.2 */
.login-shell{grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr)}.login-panel{padding:32px clamp(24px,4vw,58px)}.login-card{width:min(470px,100%);padding:30px;border-radius:28px;box-shadow:0 24px 70px rgba(10,50,36,.14)}.login-card h2{font-size:28px;line-height:1.16;letter-spacing:-.025em}.login-hint{margin:9px 0 21px}.login-card form{padding-bottom:20px;border-bottom:1px solid #e7eeea}.login-card label{margin-bottom:13px}.login-card input{padding:11px 13px}.login-card .primary-button{min-height:51px;border-radius:14px}.intro-copy h1{max-width:720px}.intro-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.intro-trust span{padding:7px 10px;border:1px solid #ffffff24;border-radius:99px;background:#ffffff0d;color:#ddf0e7;font-size:11px;font-weight:800}.landing-app-options{margin-top:18px}.landing-app-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 10px}.landing-app-heading>span{display:flex;flex-direction:column}.landing-app-heading b{font-size:12px}.landing-app-heading small{margin-top:1px;color:var(--muted);font-size:10px}.landing-app-heading>em{padding:4px 7px;border-radius:99px;background:var(--green-soft);color:var(--green);font-size:8px;font-style:normal;font-weight:900;letter-spacing:.09em}.landing-app-option{width:100%;min-height:66px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;margin-top:8px;padding:10px 11px;border:1px solid #dce7e1;border-radius:16px;background:#f9fbfa;color:var(--ink);text-align:left;text-decoration:none;box-shadow:none}.landing-app-option>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.landing-app-option>span:nth-child(2) b{font-size:13px;line-height:1.25}.landing-app-option>span:nth-child(2) small{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.25}.landing-app-option>em{min-width:54px;padding:7px 9px;border-radius:10px;background:#edf3f0;color:#557066;text-align:center;font-size:10px;font-style:normal;font-weight:900}.landing-app-icon{width:42px;height:42px;display:grid!important;place-items:center;flex:0 0 42px;border-radius:13px;background:#edf3f0;color:#60766c;font-size:17px;font-weight:900}.landing-app-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.landing-app-android{border-color:#bcdccc;background:linear-gradient(135deg,#f1fbf6,#fbfdfc)}.landing-app-android .landing-app-icon{background:linear-gradient(145deg,#21805c,#12533b);color:#fff;box-shadow:0 8px 18px rgba(23,107,77,.2)}.landing-app-android>em{background:var(--green);color:#fff}.landing-app-web.ready{border-color:#badacb;background:#f2faf6}.landing-app-option:hover,.landing-app-option:focus-visible{transform:translateY(-1px);border-color:#9fcbb7;box-shadow:0 10px 24px rgba(22,70,51,.09);outline:0}.landing-app-unavailable{opacity:.75}.landing-app-unavailable>em{background:#f0f2f1}.login-help{margin:17px 0 0}.device-ios .landing-app-heading>em{background:#edf4fa;color:#315f70}.device-ios .landing-app-web{border-color:#b9d7ca;background:linear-gradient(135deg,#f1fbf6,#fff)}.device-ios .landing-app-web .landing-app-icon{background:var(--green);color:#fff}.device-ios .landing-app-web>em{background:var(--green);color:#fff}
@media(max-width:850px){.login-shell{grid-template-columns:1fr}.login-panel{min-height:100svh;padding:22px 16px 28px}.login-card{padding:24px 22px}.login-card-head{align-items:center}.mobile-logo{width:56px;height:56px;padding:5px;border-radius:17px;background:#f0f8f4}.login-footer{margin:16px 0 0}}
@media(max-width:560px){.login-panel{justify-content:flex-start;padding:14px 12px 24px}.login-card{padding:20px 17px;border-radius:24px}.login-card h2{font-size:25px}.login-card-head{gap:11px}.mobile-logo{width:51px;height:51px;border-radius:16px}.login-hint{margin-bottom:18px;font-size:13px}.landing-app-options{margin-top:16px}.landing-app-option{min-height:62px;padding:9px 10px;border-radius:15px}.landing-app-icon{width:39px;height:39px;flex-basis:39px;border-radius:12px}.landing-app-option>em{min-width:50px;padding:6px 8px}.login-help{font-size:11px}.login-footer{font-size:10px;letter-spacing:.03em}}
@media(max-width:360px){.landing-app-option{grid-template-columns:auto 1fr}.landing-app-option>em{grid-column:2;justify-self:start;margin-top:-3px}.landing-app-heading small{display:none}}

/* Pengaturan batas terlambat fleksibel v4.0.4 */
.schedule-row{grid-template-columns:1fr 125px 135px 125px}.three-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.three-cols small{color:var(--muted);font-weight:500}
@media(max-width:850px){.schedule-row{grid-template-columns:repeat(3,minmax(0,1fr))}.schedule-row .day-toggle{grid-column:1/-1}}
@media(max-width:560px){.schedule-row,.three-cols{grid-template-columns:1fr}.schedule-row .day-toggle{grid-column:1}}

/* Grafik admin ringkas v4.0.5 */
.admin-trend-card{padding-bottom:14px}.admin-trend-card .surface-head{margin-bottom:7px}.attendance-trend{min-height:118px;gap:8px;padding-top:0}.trend-column{height:108px;grid-template-rows:18px 1fr 16px 13px}.trend-track{height:58px;background:#f1f6f3}.trend-track i{width:min(26px,62%)}
@media(max-width:620px){.attendance-trend{min-height:108px;gap:4px}.trend-column{height:100px}.trend-track{height:52px}.trend-column small{font-size:8px}}

/* Absensi pulang tidak lengkap v4.0.7 */
.recap-stat-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.status-incomplete,.history-row em.incomplete,.record-row em.incomplete{background:#fff3d8!important;color:#8d5d0d!important}.incomplete-reason{color:#9a6207!important;white-space:normal}.needs-attention td{background:#fffaf2}.needs-attention td:first-child{box-shadow:inset 3px 0 #e2a032}.recap-incomplete{margin-bottom:16px}.incomplete-table{min-width:820px}.correction-account{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:11px;margin-bottom:16px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#f8fbf9}.correction-account>span:last-child{display:flex;flex-direction:column}.correction-account small{color:var(--muted)}
@media(max-width:1050px){.recap-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.recap-stat-grid{grid-template-columns:1fr 1fr}.recap-stat-grid article:last-child{grid-column:1/-1}.history-row em.incomplete,.record-row em.incomplete{max-width:118px;white-space:normal;text-align:center;line-height:1.2}}

/* Landing page selaras dengan APK Android v2.1.0 */
.landing-app-heading>em{padding:5px 9px;background:#dff3e9;color:#11583e;letter-spacing:.055em}.landing-app-android{position:relative;overflow:hidden;min-height:78px;padding:13px;border:0;background:linear-gradient(135deg,#1d7958 0%,#11583f 58%,#0d4633 100%);color:#fff;box-shadow:0 14px 30px rgba(15,80,57,.24)}.landing-app-android:after{content:"";position:absolute;right:-46px;top:-63px;width:130px;height:130px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 20px rgba(255,255,255,.035),0 0 0 40px rgba(255,255,255,.025);pointer-events:none}.landing-app-android>*{position:relative;z-index:1}.landing-app-android .landing-app-icon{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow:none}.landing-app-android>span:nth-child(2) b{color:#fff;font-size:14px}.landing-app-android>span:nth-child(2) small{color:#d8eee5}.landing-app-android>em{min-width:74px;background:#fff;color:#12533b;box-shadow:0 7px 18px rgba(0,0,0,.16)}.landing-app-android:hover,.landing-app-android:focus-visible{border-color:transparent;box-shadow:0 18px 36px rgba(15,80,57,.3)}.landing-android-note{display:flex;align-items:center;justify-content:center;gap:5px;margin:8px 2px 12px;color:#527066;font-size:9.5px;font-weight:700}.landing-android-note span{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:var(--green-soft);color:var(--green);font-size:10px;font-weight:900}.landing-app-web{min-height:59px;background:#f7f9f8;border-color:#e2e9e5}.landing-app-web .landing-app-icon{background:#edf2ef;color:#6d7e77}.landing-app-web>em{background:#edf2ef;color:#607168}.device-ios .landing-app-web{min-height:70px}.device-ios .landing-app-web>span:nth-child(2) b{font-size:14px}
@media(max-width:560px){.landing-app-android{min-height:74px;padding:11px}.landing-app-android>em{min-width:68px}.landing-android-note{margin-bottom:10px}.landing-app-heading>em{font-size:7.5px}}
@media(max-width:360px){.landing-app-android{grid-template-columns:auto 1fr}.landing-app-android>em{grid-column:2;justify-self:start;margin-top:1px}.landing-android-note{justify-content:flex-start;margin-left:49px;text-align:left}}