:root{--primary-50:#E3F2FD;--primary-100:#BBDEFB;--primary-200:#90CAF9;--primary-300:#90CAF9;--primary-500:#2196F3;--primary-600:#1E88E5;--primary-700:#1565C0;--primary-800:#0D47A1;--accent-400:#FFCA28;--accent-500:#FFC107;--accent-600:#FFB300;--success-50:#E8F5E9;--success-500:#4CAF50;--success-600:#43A047;--warning-50:#FFF8E1;--warning-500:#FF9800;--warning-600:#F57C00;--danger-50:#FFEBEE;--danger-500:#F44336;--danger-600:#E53935;--info-50:#E8EAF6;--info-500:#3F51B5;--gray-50:#FAFAFA;--gray-100:#F5F5F5;--gray-200:#EEEEEE;--gray-300:#E0E0E0;--gray-400:#BDBDBD;--gray-500:#9E9E9E;--gray-600:#757575;--gray-700:#616161;--gray-800:#424242;--gray-900:#212121;--surface-white:#FFFFFF;--surface-bg:#F0F4F8;--surface-card:#FFFFFF;--font-main:'Plus Jakarta Sans',system-ui,sans-serif;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:9999px;--shadow-xs:0 1px 2px rgba(0,0,0,0.06);--shadow-sm:0 2px 8px rgba(0,0,0,0.08);--shadow-md:0 4px 16px rgba(0,0,0,0.10);--shadow-lg:0 8px 32px rgba(0,0,0,0.12);--nav-height:68px;--header-height:60px}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden;font-family:var(--font-main);background:var(--surface-bg);color:var(--gray-900);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#app{display:flex;flex-direction:column;height:100dvh;max-width:480px;margin:0 auto;position:relative;overflow:hidden;background:var(--surface-bg);box-shadow:0 0 40px rgba(0,0,0,.15)}.page{display:none;flex-direction:column;flex:1;overflow:hidden}.page.active{display:flex}#page-splash{background:linear-gradient(160deg,var(--primary-700) 0,var(--primary-800) 60%,#0a2d6e 100%);align-items:center;justify-content:center;gap:20px}.splash-logo-wrap{width:96px;height:96px;background:rgba(255,255,255,.15);border-radius:var(--radius-2xl);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.25)}.splash-logo-wrap .material-symbols-rounded{font-size:52px;color:var(--accent-400)}.splash-title{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.5px}.splash-subtitle{font-size:14px;color:rgba(255,255,255,.65);font-weight:500;text-align:center}.splash-loader{margin-top:48px;display:flex;flex-direction:column;align-items:center;gap:12px}.loader-bar{width:180px;height:4px;background:rgba(255,255,255,.2);border-radius:var(--radius-full);overflow:hidden}.loader-bar-fill{height:100%;width:40%;background:var(--accent-400);border-radius:var(--radius-full);animation:loadingBar 1.8s ease-in-out infinite}@keyframes loadingBar{0%{transform:translateX(-100%)}50%{transform:translateX(200%)}100%{transform:translateX(400%)}}.splash-version{font-size:12px;color:rgba(255,255,255,.4)}#page-login{background:linear-gradient(160deg,var(--primary-700) 0,var(--primary-600) 45%,var(--surface-bg) 45%);overflow-y:auto}.login-header{padding:48px 24px 32px;display:flex;flex-direction:column;align-items:center;gap:12px}.login-logo{width:72px;height:72px;background:rgba(255,255,255,.2);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}.login-logo .material-symbols-rounded{font-size:40px;color:var(--accent-400)}.login-app-name{font-size:22px;font-weight:800;color:#fff}.login-tagline{font-size:13px;color:rgba(255,255,255,.7);font-weight:500}.login-card{margin:0 16px 24px;background:var(--surface-card);border-radius:var(--radius-2xl);padding:28px 24px;box-shadow:var(--shadow-lg)}.login-card h2{font-size:20px;font-weight:700;color:var(--gray-900);margin-bottom:4px;text-align:center}.login-card p{font-size:13px;color:var(--gray-500);margin-bottom:24px;text-align:center}.form-group{margin-bottom:16px}.form-label{display:block;font-size:13px;font-weight:600;color:var(--gray-700);margin-bottom:6px}.input-wrap{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:12px;color:var(--gray-400);font-size:20px;pointer-events:none}.input-wrap input{width:100%;padding:12px 12px 12px 40px;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);font-size:14px;font-family:var(--font-main);color:var(--gray-900);background:var(--gray-50);outline:0;transition:border-color .2s,box-shadow .2s}.input-wrap input:focus{border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-50);background:#fff}.input-toggle{position:absolute;right:12px;background:0 0;border:none;cursor:pointer;color:var(--gray-400);display:flex;align-items:center;padding:4px}.input-toggle .material-symbols-rounded{font-size:20px}.btn-primary{width:100%;padding:14px;background:linear-gradient(135deg,var(--primary-600),var(--primary-700));color:#fff;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:700;font-family:var(--font-main);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 12px rgba(21,101,192,.35);transition:transform .15s,box-shadow .15s}.btn-primary:active{transform:scale(.98);box-shadow:0 2px 6px rgba(21,101,192,.25)}.btn-primary:disabled{opacity:.7;cursor:not-allowed}.btn-primary .material-symbols-rounded{font-size:20px}.login-footer{margin-top:20px;text-align:center;font-size:12px;color:var(--gray-400);display:flex;align-items:center;justify-content:center;gap:6px}.login-info-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:var(--gray-100);color:var(--gray-500);border-radius:50%;cursor:pointer;flex-shrink:0;padding:0}.login-info-btn .material-symbols-rounded{font-size:14px}.login-info-btn:hover{background:var(--primary-50);color:var(--primary-600)}.app-header{height:var(--header-height);background:linear-gradient(135deg,var(--primary-700) 0,var(--primary-600) 100%);display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;box-shadow:0 2px 8px rgba(21,101,192,.3);position:relative;z-index:10}.header-back-btn{display:none;background:rgba(255,255,255,.15);border:none;border-radius:var(--radius-sm);width:36px;height:36px;cursor:pointer;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.header-back-btn .material-symbols-rounded{font-size:22px}.header-back-btn.visible{display:flex}.header-logo-small{width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.header-logo-small .material-symbols-rounded{font-size:22px;color:var(--accent-400)}.header-title-group{flex:1;overflow:hidden}.header-title{font-size:16px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-subtitle{font-size:11px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;gap:6px;flex-shrink:0}.header-btn{background:rgba(255,255,255,.15);border:none;border-radius:var(--radius-sm);width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;transition:background .15s}.header-btn:active{background:rgba(255,255,255,.25)}.header-btn .material-symbols-rounded{font-size:22px}.badge-notif{position:absolute;top:5px;right:5px;width:8px;height:8px;background:var(--accent-500);border-radius:var(--radius-full);border:1.5px solid var(--primary-700)}.page-content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--nav-height) + 12px)}.page-content::-webkit-scrollbar{display:none}.bottom-nav{height:var(--nav-height);background:var(--surface-card);border-top:1px solid var(--gray-200);display:flex;align-items:stretch;flex-shrink:0;box-shadow:0 -4px 16px rgba(0,0,0,.08);position:relative;z-index:20}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;background:0 0;border:none;padding:8px 4px;position:relative;transition:all .2s;-webkit-tap-highlight-color:transparent}.nav-item.nav-hidden{display:none!important}.nav-icon-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:32px;border-radius:var(--radius-full);transition:background .2s}.nav-item .material-symbols-rounded{font-size:24px;color:var(--gray-400);transition:color .2s;font-variation-settings:'FILL' 0}.nav-label{font-size:11px;font-weight:500;color:var(--gray-400);transition:color .2s;font-family:var(--font-main)}.nav-item.active .nav-icon-wrap{background:var(--primary-50)}.nav-item.active .material-symbols-rounded{color:var(--primary-700);font-variation-settings:'FILL' 1}.nav-item.active .nav-label{color:var(--primary-700);font-weight:700}.nav-item.nav-absen .nav-icon-wrap{width:52px;height:52px;background:linear-gradient(135deg,var(--primary-600),var(--primary-700));border-radius:var(--radius-full);box-shadow:0 4px 14px rgba(21,101,192,.4);margin-top:-24px;border:3px solid var(--surface-card)}.nav-item.nav-absen .material-symbols-rounded{color:#fff;font-size:26px}.nav-item.nav-absen .nav-label{color:var(--primary-700);font-weight:700}.nav-item.nav-absen.active .nav-icon-wrap{background:linear-gradient(135deg,var(--primary-700),var(--primary-800))}.home-hero{background:linear-gradient(160deg,var(--primary-700) 0,var(--primary-600) 100%);padding:20px 16px 56px;position:relative;overflow:hidden}.home-hero::after{content:'';position:absolute;bottom:-24px;left:0;right:0;height:48px;background:var(--surface-bg);border-radius:50% 50% 0 0/48px 48px 0 0}.hero-pattern{position:absolute;top:-20px;right:-20px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}.hero-pattern-2{position:absolute;bottom:20px;left:-40px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}.hero-top{display:flex;align-items:center;gap:12px;margin-bottom:20px;position:relative;z-index:1}.hero-avatar{width:48px;height:48px;border-radius:var(--radius-full);background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.hero-avatar .material-symbols-rounded{font-size:28px;color:rgba(255,255,255,.9)}.hero-greeting-text h2{font-size:18px;font-weight:700;color:#fff;line-height:1.2}.hero-greeting-text p{font-size:12px;color:rgba(255,255,255,.7);font-weight:500}.hero-status-card{background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-xl);padding:16px;display:flex;align-items:center;gap:12px;position:relative;z-index:1}.hero-status-icon{width:44px;height:44px;background:var(--success-500);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.hero-status-icon .material-symbols-rounded{font-size:24px;color:#fff}.hero-status-info{flex:1}.hero-status-label{font-size:11px;color:rgba(255,255,255,.7);font-weight:500}.hero-status-value{font-size:16px;font-weight:700;color:#fff}.hero-status-time{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px}.hero-status-badge{background:var(--accent-400);color:var(--gray-900);font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--radius-full)}.section-header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px 12px}.section-title{font-size:15px;font-weight:700;color:var(--gray-900)}.section-link{font-size:12px;font-weight:600;color:var(--primary-600);text-decoration:none;background:0 0;border:none;cursor:pointer;font-family:var(--font-main)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px}.stats-grid-3col{grid-template-columns:repeat(3,1fr);gap:8px}.stats-grid-3col .stat-card{padding:10px 8px;gap:5px}.stats-grid-3col .stat-icon{width:28px;height:28px}.stats-grid-3col .stat-icon .material-symbols-rounded{font-size:16px}.stats-grid-3col .stat-value{font-size:19px}.stats-grid-3col .stat-label{font-size:10.5px;line-height:1.3}.stat-icon.gray{background:var(--gray-100);color:var(--gray-500)}.stat-card.gray .stat-value{color:var(--gray-700)}.stat-card{background:var(--surface-card);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:8px}.stat-card-header{display:flex;align-items:center;justify-content:space-between}.stat-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.stat-icon .material-symbols-rounded{font-size:20px}.stat-icon.green{background:var(--success-50);color:var(--success-600)}.stat-icon.blue{background:var(--primary-50);color:var(--primary-700)}.stat-icon.orange{background:var(--warning-50);color:var(--warning-600)}.stat-icon.red{background:var(--danger-50);color:var(--danger-600)}.stat-trend{font-size:11px;font-weight:600;color:var(--success-600)}.stat-value{font-size:26px;font-weight:800;color:var(--gray-900);line-height:1}.stat-card.green .stat-value{color:var(--success-600)}.stat-card.orange .stat-value{color:var(--warning-600)}.stat-card.blue .stat-value{color:var(--primary-700)}.stat-card.red .stat-value{color:var(--danger-600)}.stat-label{font-size:12px;color:var(--gray-500);font-weight:500}.stat-value.is-loading{color:transparent;background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 37%,var(--gray-100) 63%);background-size:400% 100%;animation:skeleton-pulse 1.4s ease-in-out infinite;border-radius:var(--radius-sm);display:inline-block;min-width:28px}@keyframes skeleton-pulse{0%{background-position:100% 50%}100%{background-position:0 50%}}.stat-card.has-alert{position:relative;border:1.5px solid var(--danger-200,#fecaca)}.stat-card-alert-badge{display:none;position:absolute;top:-8px;right:10px;background:var(--danger-600);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--radius-full);white-space:nowrap;box-shadow:var(--shadow-xs)}.stat-card.has-alert .stat-card-alert-badge{display:inline-block}.quick-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px}.quick-menu-item{display:flex;flex-direction:column;align-items:center;gap:6px;background:0 0;border:none;cursor:pointer;padding:8px 4px;-webkit-tap-highlight-color:transparent}.quick-menu-icon{width:52px;height:52px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);position:relative}.quick-menu-icon .material-symbols-rounded{font-size:26px}.quick-menu-icon.pengumuman{background:linear-gradient(135deg,#e3f2fd,#bbdefb);color:var(--primary-700)}.quick-menu-icon.chat{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);color:#2e7d32}.quick-menu-icon.sosmed{background:linear-gradient(135deg,#fff3e0,#ffe0b2);color:#e65100}.quick-menu-icon.laporan{background:linear-gradient(135deg,#f3e5f5,#e1bee7);color:#6a1b9a}.quick-menu-icon.jadwal{background:linear-gradient(135deg,#e8eaf6,#c5cae9);color:var(--info-500)}.quick-menu-icon.rekap{background:linear-gradient(135deg,#e0f2f1,#b2dfdb);color:#00695c}.quick-menu-icon.pengaturan{background:linear-gradient(135deg,#eceff1,#cfd8dc);color:#37474f}.quick-menu-icon.kelola-guru{background:linear-gradient(135deg,#fce4ec,#f8bbd0);color:#880e4f}.quick-menu-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;background:var(--danger-500);color:#fff;font-size:10px;font-weight:700;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;border:2px solid var(--surface-bg);padding:0 3px}.quick-menu-label{font-size:11px;font-weight:600;color:var(--gray-700);text-align:center;line-height:1.3}.announcement-list{padding:0 16px;display:flex;flex-direction:column;gap:10px}.announcement-card{background:var(--surface-card);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-xs);display:flex;gap:12px;cursor:pointer;border-left:4px solid var(--primary-500)}.announcement-card.warning{border-left-color:var(--warning-500)}.announcement-card.success{border-left-color:var(--success-500)}.announcement-card-icon{width:40px;height:40px;background:var(--primary-50);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--primary-700)}.announcement-card.warning .announcement-card-icon{background:var(--warning-50);color:var(--warning-600)}.announcement-card.success .announcement-card-icon{background:var(--success-50);color:var(--success-600)}.announcement-card-icon .material-symbols-rounded{font-size:22px}.announcement-card-body{flex:1;overflow:hidden}.announcement-card-title{font-size:13px;font-weight:700;color:var(--gray-900);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.announcement-card-excerpt{font-size:12px;color:var(--gray-500);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.announcement-card-time{font-size:10px;color:var(--gray-400);font-weight:600;margin-top:6px}.sosmed-scroll-wrap{padding:0 16px;overflow-x:auto;display:flex;gap:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.sosmed-scroll-wrap::-webkit-scrollbar{display:none}.sosmed-preview-card{background:var(--surface-card);border-radius:var(--radius-lg);padding:14px;min-width:220px;box-shadow:var(--shadow-xs);flex-shrink:0}.sosmed-preview-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.sosmed-avatar{width:34px;height:34px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary-500),var(--primary-700));display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;flex-shrink:0}.sosmed-preview-meta{flex:1;overflow:hidden}.sosmed-preview-name{font-size:13px;font-weight:700;color:var(--gray-900)}.sosmed-preview-mapel{font-size:11px;color:var(--gray-500)}.sosmed-preview-content{font-size:13px;color:var(--gray-700);line-height:1.5}.sosmed-preview-actions{display:flex;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--gray-100)}.sosmed-action-btn{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--gray-500);background:0 0;border:none;cursor:pointer;font-family:var(--font-main);font-weight:500}.sosmed-action-btn .material-symbols-rounded{font-size:18px}.sosmed-action-btn.liked{color:var(--danger-500)}.absen-hero{background:linear-gradient(160deg,var(--primary-700),var(--primary-600));padding:20px 16px 64px;position:relative;overflow:hidden}.absen-hero::after{content:'';position:absolute;bottom:-24px;left:0;right:0;height:48px;background:var(--surface-bg);border-radius:50% 50% 0 0/48px 48px 0 0}.absen-date-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border-radius:var(--radius-full);padding:6px 12px;font-size:12px;font-weight:600;color:#fff;margin-bottom:16px}.absen-date-chip .material-symbols-rounded{font-size:16px}.absen-live-time{font-size:44px;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1;margin-bottom:4px}.absen-live-time-sub{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:16px}.absen-status-row{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}.status-pill{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:700;position:relative;z-index:1}.status-pill .material-symbols-rounded{font-size:14px}.status-pill.hadir{background:var(--success-500);color:#fff}.status-pill.terlambat{background:var(--warning-500);color:#fff}.status-pill.belum{background:rgba(255,255,255,.2);color:rgba(255,255,255,.9)}.status-pill.pulang{background:var(--info-500);color:#fff}.status-pill.pulang-cepat{background:var(--warning-500);color:#fff}.status-pill.pulang-tepat-waktu{background:var(--info-500);color:#fff}.absen-cards-wrap{padding:0 16px;display:flex;flex-direction:column;gap:12px}.absen-action-card{background:var(--surface-card);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm)}.absen-action-card-header{padding:16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--gray-100)}.absen-card-type-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.absen-card-type-icon.masuk{background:var(--success-50);color:var(--success-600)}.absen-card-type-icon.pulang{background:var(--info-50);color:var(--info-500)}.absen-card-type-icon .material-symbols-rounded{font-size:24px}.absen-card-type-label{font-size:16px;font-weight:700;color:var(--gray-900)}.absen-card-type-sub{font-size:12px;color:var(--gray-500);margin-top:2px}.absen-card-type-badge{margin-left:auto;padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:700}.absen-card-type-badge.done{background:var(--success-50);color:var(--success-600)}.absen-card-type-badge.pending{background:var(--warning-50);color:var(--warning-600)}.absen-card-type-badge.locked{background:var(--gray-100);color:var(--gray-500)}.absen-action-card-body{padding:16px}.lokasi-info{display:flex;align-items:center;gap:8px;background:var(--gray-50);border-radius:var(--radius-md);padding:10px 12px;margin-bottom:12px}.lokasi-info .material-symbols-rounded{font-size:18px;color:var(--primary-600)}.lokasi-info-text{flex:1;font-size:12px;color:var(--gray-600)}.lokasi-info-text strong{color:var(--gray-900);font-size:13px;display:block}.lokasi-status-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--radius-full);flex-shrink:0}.lokasi-status-chip.di-lokasi{background:var(--success-50);color:var(--success-600)}.lokasi-status-chip.luar{background:var(--danger-50);color:var(--danger-600)}.peta-lokasi-wrap{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--gray-200);margin-bottom:12px}.peta-lokasi-wrap iframe{display:block;width:100%;height:160px;border:0}.peta-lokasi-koordinat{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--gray-500);padding:6px 10px;background:var(--gray-50);border-top:1px solid var(--gray-200)}.peta-lokasi-koordinat span strong{color:var(--gray-700)}.foto-capture-area{aspect-ratio:4/3;background:var(--gray-100);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;border:2px dashed var(--gray-300);overflow:hidden;position:relative}.foto-capture-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;text-align:center}.foto-capture-placeholder .material-symbols-rounded{font-size:40px;color:var(--gray-400)}.foto-capture-placeholder p{font-size:12px;color:var(--gray-500);font-weight:500}.foto-capture-area img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.foto-retake-btn{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:var(--radius-sm);padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:var(--font-main)}.foto-retake-btn .material-symbols-rounded{font-size:14px}.btn-buka-kamera{width:100%;padding:12px;background:var(--primary-50);color:var(--primary-700);border:1.5px solid var(--primary-200);border-radius:var(--radius-md);font-size:13px;font-weight:700;font-family:var(--font-main);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px}.btn-buka-kamera .material-symbols-rounded{font-size:18px}.btn-buka-kamera:disabled{background:var(--gray-100);color:var(--gray-400);border-color:var(--gray-200);cursor:not-allowed}.btn-absen-masuk{width:100%;padding:14px;background:linear-gradient(135deg,var(--success-500),var(--success-600));color:#fff;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:700;font-family:var(--font-main);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 12px rgba(76,175,80,.35)}.btn-absen-masuk:disabled,.btn-absen-pulang:disabled{opacity:.6;cursor:not-allowed}.btn-absen-masuk .material-symbols-rounded{font-size:20px}.btn-absen-pulang{width:100%;padding:14px;background:linear-gradient(135deg,var(--info-500),#303f9f);color:#fff;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:700;font-family:var(--font-main);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 12px rgba(63,81,181,.35)}.btn-absen-pulang .material-symbols-rounded{font-size:20px}.absen-rekap-mini{background:var(--surface-card);border-radius:var(--radius-xl);padding:16px;box-shadow:var(--shadow-sm)}.absen-rekap-title{font-size:14px;font-weight:700;color:var(--gray-900);margin-bottom:12px}.rekap-row{display:flex;gap:8px}.rekap-item{flex:1;background:var(--gray-50);border-radius:var(--radius-md);padding:10px;text-align:center}.rekap-item-value{font-size:20px;font-weight:800;color:var(--gray-900)}.rekap-item-label{font-size:10px;color:var(--gray-500);font-weight:600;margin-top:2px}.rekap-item.green .rekap-item-value{color:var(--success-600)}.rekap-item.orange .rekap-item-value{color:var(--warning-600)}.rekap-item.red .rekap-item-value{color:var(--danger-600)}.rekap-item.blue .rekap-item-value{color:var(--info-500)}.izin-tabs{display:flex;gap:0;background:var(--surface-card);border-bottom:1px solid var(--gray-200);padding:0 16px}.izin-tab{flex:1;padding:14px 8px;font-size:13px;font-weight:600;color:var(--gray-500);border:none;background:0 0;cursor:pointer;font-family:var(--font-main);border-bottom:2.5px solid transparent;text-align:center;transition:all .2s}.izin-tab.active{color:var(--primary-700);border-bottom-color:var(--primary-700)}.form-section{padding:16px;display:flex;flex-direction:column;gap:14px}.form-card{background:var(--surface-card);border-radius:var(--radius-xl);padding:16px;box-shadow:var(--shadow-xs)}.form-card-title{font-size:14px;font-weight:700;color:var(--gray-900);margin-bottom:14px}.radio-group{display:flex;gap:8px}.radio-option{flex:1;position:relative}.radio-option input[type=radio]{position:absolute;opacity:0;width:0;height:0}.radio-label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:var(--gray-50);border-radius:var(--radius-md);border:2px solid var(--gray-200);cursor:pointer;transition:all .2s}.radio-label .material-symbols-rounded{font-size:24px;color:var(--gray-400)}.radio-label span.label-text{font-size:12px;font-weight:600;color:var(--gray-600)}.radio-option input:checked+.radio-label{background:var(--primary-50);border-color:var(--primary-500)}.radio-option input:checked+.radio-label .material-symbols-rounded{color:var(--primary-700)}.radio-option input:checked+.radio-label .label-text{color:var(--primary-700)}.date-range-row{display:flex;gap:8px;align-items:flex-end}.date-range-row .form-group{flex:1;margin-bottom:0}.date-separator{font-size:12px;font-weight:700;color:var(--gray-400);padding-bottom:12px;flex-shrink:0}.input-wrap textarea{width:100%;padding:12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);font-size:14px;font-family:var(--font-main);color:var(--gray-900);background:var(--gray-50);outline:0;resize:none;height:80px;transition:border-color .2s}.input-wrap textarea:focus{border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-50);background:#fff}.upload-area{border:2px dashed var(--gray-300);border-radius:var(--radius-md);padding:20px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;background:var(--gray-50)}.upload-area .material-symbols-rounded{font-size:32px;color:var(--gray-400)}.upload-area p{font-size:12px;color:var(--gray-500);text-align:center;font-weight:500}.upload-area span{font-size:11px;color:var(--gray-400)}.izin-list{padding:0 16px;display:flex;flex-direction:column;gap:10px}.izin-card{background:var(--surface-card);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-xs);display:flex;gap:12px}.izin-card-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.izin-card-icon.sakit{background:var(--danger-50);color:var(--danger-600)}.izin-card-icon.izin{background:var(--warning-50);color:var(--warning-600)}.izin-card-icon .material-symbols-rounded{font-size:22px}.izin-card-body{flex:1}.izin-card-jenis{font-size:14px;font-weight:700;color:var(--gray-900);margin-bottom:2px}.izin-card-tanggal{font-size:12px;color:var(--gray-500)}.izin-card-ket{font-size:12px;color:var(--gray-600);margin-top:4px}.izin-card-status{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:700;margin-top:6px}.izin-card-status .material-symbols-rounded{font-size:13px}.izin-card-status.pending{background:var(--warning-50);color:var(--warning-600)}.izin-card-status.approved{background:var(--success-50);color:var(--success-600)}.izin-card-status.rejected{background:var(--danger-50);color:var(--danger-600)}.izin-card-lampiran{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--primary-600);margin-top:6px;text-decoration:none}.izin-card-lampiran .material-symbols-rounded{font-size:15px}.izin-card-alasan-tolak{background:var(--danger-50);border-radius:var(--radius-md);padding:8px 10px;margin-top:8px;font-size:12px;color:var(--danger-600)}.izin-card-alasan-tolak b{color:var(--gray-800)}.izin-card-hapus{background:0 0;border:none;color:var(--gray-400);cursor:pointer;width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start}.izin-card-hapus:active{background:var(--gray-100);color:var(--danger-500)}.izin-card-hapus .material-symbols-rounded{font-size:18px}.profile-hero{background:linear-gradient(160deg,var(--primary-700),var(--primary-600));padding:28px 16px 64px;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;overflow:hidden}.profile-hero::after{content:'';position:absolute;bottom:-24px;left:0;right:0;height:48px;background:var(--surface-bg);border-radius:50% 50% 0 0/48px 48px 0 0}.profile-avatar-large{width:88px;height:88px;border-radius:var(--radius-full);background:rgba(255,255,255,.2);border:3px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;z-index:1}.profile-avatar-large .material-symbols-rounded{font-size:52px;color:rgba(255,255,255,.9)}.profile-edit-avatar{position:absolute;bottom:0;right:0;width:28px;height:28px;background:var(--accent-400);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid var(--primary-700)}.profile-edit-avatar .material-symbols-rounded{font-size:14px;color:var(--gray-900)}.profile-name{font-size:20px;font-weight:800;color:#fff;text-align:center;position:relative;z-index:1}.profile-nip{font-size:12px;color:rgba(255,255,255,.7);font-weight:500;position:relative;z-index:1}.profile-role-badge{background:var(--accent-400);color:var(--gray-900);font-size:11px;font-weight:700;padding:4px 12px;border-radius:var(--radius-full);position:relative;z-index:1}.profile-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px}.profile-info-item{background:var(--surface-card);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-xs)}.profile-info-label{font-size:11px;color:var(--gray-500);font-weight:600;margin-bottom:4px}.profile-info-value{font-size:14px;font-weight:700;color:var(--gray-900)}.settings-list{background:var(--surface-card);border-radius:var(--radius-xl);margin:0 16px;overflow:hidden;box-shadow:var(--shadow-xs)}.settings-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background .15s}.settings-item:last-child{border-bottom:none}.settings-item:active{background:var(--gray-50)}.settings-item-icon{width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.settings-item-icon .material-symbols-rounded{font-size:22px}.settings-item-icon.blue{background:var(--primary-50);color:var(--primary-700)}.settings-item-icon.green{background:var(--success-50);color:var(--success-600)}.settings-item-icon.orange{background:var(--warning-50);color:var(--warning-600)}.settings-item-icon.red{background:var(--danger-50);color:var(--danger-600)}.settings-item-icon.purple{background:#f3e5f5;color:#7b1fa2}.settings-item-body{flex:1}.settings-item-title{font-size:14px;font-weight:600;color:var(--gray-900)}.settings-item-sub{font-size:12px;color:var(--gray-500);margin-top:1px}.settings-item-arrow{color:var(--gray-400)}.settings-item-arrow .material-symbols-rounded{font-size:20px}.admin-filter-bar{display:flex;gap:6px;padding:12px 16px;overflow-x:auto;scrollbar-width:none}.admin-filter-bar::-webkit-scrollbar{display:none}.filter-chip{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;border:1.5px solid var(--gray-200);background:var(--surface-card);color:var(--gray-600);font-family:var(--font-main);transition:all .15s}.filter-chip.active{background:var(--primary-700);border-color:var(--primary-700);color:#fff}.filter-chip .material-symbols-rounded{font-size:15px}.kelola-izin-list{padding:0 16px;display:flex;flex-direction:column;gap:10px}.kelola-izin-card{background:var(--surface-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs)}.kelola-izin-card-header{padding:14px;display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--gray-100)}.kelola-guru-avatar{width:40px;height:40px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary-500),var(--primary-700));display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700;flex-shrink:0}.kelola-izin-guru-name{font-size:14px;font-weight:700;color:var(--gray-900)}.kelola-izin-guru-mapel{font-size:12px;color:var(--gray-500)}.kelola-izin-meta{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.meta-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:600;background:var(--gray-100);color:var(--gray-700)}.meta-chip .material-symbols-rounded{font-size:12px}.meta-chip.sakit{background:var(--danger-50);color:var(--danger-600)}.meta-chip.izin{background:var(--warning-50);color:var(--warning-600)}.kelola-izin-card-body{padding:12px 14px}.kelola-izin-ket{font-size:13px;color:var(--gray-600)}.kelola-izin-lampiran{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--primary-600);margin-top:8px;text-decoration:none}.kelola-izin-lampiran .material-symbols-rounded{font-size:15px}.kelola-izin-status-info{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:12px;font-weight:600}.kelola-izin-status-info.approved{background:var(--success-50);color:var(--success-600)}.kelola-izin-status-info.rejected{background:var(--danger-50);color:var(--danger-600)}.kelola-izin-status-info .material-symbols-rounded{font-size:16px}.kelola-izin-alasan-tolak{background:var(--danger-50);border-radius:var(--radius-md);padding:8px 10px;margin-top:8px;font-size:12px;color:var(--danger-600)}.kelola-izin-alasan-tolak b{color:var(--gray-800)}.kelola-izin-card-hapus{background:0 0;border:none;color:var(--gray-400);cursor:pointer;width:30px;height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.kelola-izin-card-hapus:active{background:var(--gray-100);color:var(--danger-500)}.kelola-izin-card-hapus .material-symbols-rounded{font-size:18px}.kelola-izin-card-actions{display:flex;gap:8px;padding:12px 14px}.btn-tolak{flex:1;padding:10px;background:var(--danger-50);color:var(--danger-600);border:1.5px solid var(--danger-500);border-radius:var(--radius-md);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-main);display:flex;align-items:center;justify-content:center;gap:4px}.btn-tolak:disabled{opacity:.6;cursor:not-allowed}.btn-tolak .material-symbols-rounded{font-size:18px}.btn-setujui{flex:2;padding:10px;background:linear-gradient(135deg,var(--success-500),var(--success-600));color:#fff;border:none;border-radius:var(--radius-md);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-main);display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 3px 8px rgba(76,175,80,.3)}.btn-setujui:disabled{opacity:.6;cursor:not-allowed}.btn-setujui .material-symbols-rounded{font-size:18px}.chat-list{display:flex;flex-direction:column}.chat-list-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background .15s}.chat-list-item:active{background:var(--gray-50)}.chat-avatar{width:48px;height:48px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary-500),var(--primary-700));display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:700;flex-shrink:0;position:relative}.chat-avatar.group{background:linear-gradient(135deg,#e65100,#ff9800)}.chat-online-dot{position:absolute;bottom:1px;right:1px;width:12px;height:12px;background:var(--success-500);border-radius:var(--radius-full);border:2px solid #fff}.chat-item-body{flex:1;overflow:hidden}.chat-item-name{font-size:14px;font-weight:700;color:var(--gray-900)}.chat-item-preview{font-size:12px;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.chat-item-preview.unread{color:var(--gray-700);font-weight:600}.chat-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}.chat-item-time{font-size:11px;color:var(--gray-400)}.chat-item-time.unread{color:var(--primary-600);font-weight:700}.chat-unread-badge{min-width:20px;height:20px;background:var(--primary-600);color:#fff;font-size:11px;font-weight:700;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;padding:0 4px}.chat-room-header{background:var(--primary-700);padding:12px 16px;display:flex;align-items:center;gap:12px}.chat-room-back{background:rgba(255,255,255,.15);border:none;border-radius:var(--radius-sm);width:36px;height:36px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.chat-room-back .material-symbols-rounded{font-size:22px}.chat-room-info{flex:1}.chat-room-name{font-size:15px;font-weight:700;color:#fff}.chat-room-status{font-size:11px;color:rgba(255,255,255,.7)}.chat-room-actions{display:flex;gap:6px}.chat-messages-area{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface-bg)}.chat-messages-area::-webkit-scrollbar{display:none}.chat-date-divider{display:flex;align-items:center;gap:8px;margin:4px 0}.chat-date-divider::after,.chat-date-divider::before{content:'';flex:1;height:1px;background:var(--gray-200)}.chat-date-divider span{font-size:11px;color:var(--gray-500);font-weight:600;padding:2px 8px;background:var(--gray-200);border-radius:var(--radius-full)}.msg-row{display:flex;gap:8px}.msg-row.outgoing{flex-direction:row-reverse}.msg-avatar-small{width:32px;height:32px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary-500),var(--primary-700));display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0;align-self:flex-end}.msg-bubble-wrap{max-width:78%;display:flex;flex-direction:column;gap:2px}.msg-sender-name{font-size:11px;font-weight:700;color:var(--primary-700);padding-left:4px}.msg-bubble{padding:10px 12px;border-radius:16px;font-size:14px;color:var(--gray-900);background:var(--surface-card);box-shadow:var(--shadow-xs);line-height:1.5;border-bottom-left-radius:4px;word-break:break-word}.msg-row.outgoing .msg-bubble{background:var(--primary-600);color:#fff;border-bottom-left-radius:16px;border-bottom-right-radius:4px}.msg-meta{font-size:10px;color:var(--gray-400);padding:0 4px;display:flex;align-items:center;gap:4px}.msg-row.outgoing .msg-meta{justify-content:flex-end}.msg-meta .material-symbols-rounded{font-size:14px;color:var(--primary-300)}.chat-input-bar{background:var(--surface-card);border-top:1px solid var(--gray-200);padding:10px 12px;display:flex;align-items:flex-end;gap:8px}.chat-input-attach{width:40px;height:40px;border-radius:var(--radius-full);background:var(--gray-100);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--gray-500);flex-shrink:0}.chat-input-attach .material-symbols-rounded{font-size:22px}.chat-input-wrap{flex:1;background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:20px;padding:8px 14px;display:flex;align-items:center}.chat-input-wrap input{flex:1;border:none;background:0 0;font-size:14px;font-family:var(--font-main);color:var(--gray-900);outline:0}.chat-send-btn{width:40px;height:40px;border-radius:var(--radius-full);background:var(--primary-600);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 2px 8px rgba(21,101,192,.35)}.chat-send-btn .material-symbols-rounded{font-size:22px}.ob-kontak-item{display:flex;align-items:center;gap:12px;padding:10px 4px;border-radius:var(--radius-md);cursor:pointer}.ob-kontak-item:active{background:var(--gray-50)}.ob-kontak-info{flex:1;overflow:hidden}.ob-kontak-nama{font-size:14px;font-weight:600;color:var(--gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ob-kontak-role{font-size:11px;color:var(--gray-500)}.ob-kontak-check{width:22px;height:22px;border-radius:var(--radius-full);border:2px solid var(--gray-300);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}.ob-kontak-check.checked{background:var(--primary-600);border-color:var(--primary-600)}.ob-kontak-check.checked .material-symbols-rounded{font-size:14px;color:#fff}.ob-kontak-item.radio .ob-kontak-check{border-radius:var(--radius-sm)}.sosmed-post-card{background:var(--surface-card);border-radius:0;padding:14px 16px;border-bottom:1px solid var(--gray-100)}.sosmed-post-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sosmed-post-avatar{width:42px;height:42px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary-500),var(--primary-700));display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700;flex-shrink:0}.sosmed-post-meta{flex:1}.sosmed-post-name{font-size:14px;font-weight:700;color:var(--gray-900)}.sosmed-post-mapel-time{font-size:12px;color:var(--gray-500)}.sosmed-post-more{background:0 0;border:none;cursor:pointer;color:var(--gray-400)}.sosmed-post-more .material-symbols-rounded{font-size:22px}.sosmed-post-content{font-size:14px;color:var(--gray-800);line-height:1.6;margin-bottom:10px;word-break:break-word}.sosmed-post-image{width:100%;aspect-ratio:16/9;background:var(--gray-100);border-radius:var(--radius-md);overflow:hidden;margin-bottom:10px}.sosmed-post-image img{width:100%;height:100%;object-fit:cover}.sosmed-post-actions{display:flex;gap:16px;padding-top:10px;border-top:1px solid var(--gray-100)}.sosmed-post-action{display:flex;align-items:center;gap:5px;background:0 0;border:none;cursor:pointer;color:var(--gray-500);font-size:13px;font-weight:600;font-family:var(--font-main)}.sosmed-post-action .material-symbols-rounded{font-size:20px}.sosmed-post-action.liked{color:var(--danger-500)}.compose-bar{background:var(--surface-card);border-bottom:1px solid var(--gray-200);padding:12px 16px;display:flex;gap:10px;align-items:center}.compose-avatar-small{width:38px;height:38px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary-500),var(--primary-700));display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;flex-shrink:0}.compose-placeholder{flex:1;background:var(--gray-100);border-radius:var(--radius-full);padding:10px 16px;font-size:13px;color:var(--gray-400);font-weight:500;cursor:pointer}.pengumuman-list{display:flex;flex-direction:column}.pengumuman-item{background:var(--surface-card);border-bottom:1px solid var(--gray-100);padding:14px 16px;display:flex;gap:12px;cursor:pointer}.pengumuman-item:active{background:var(--gray-50)}.pengumuman-icon-wrap{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.pengumuman-icon-wrap.blue{background:var(--primary-50);color:var(--primary-700)}.pengumuman-icon-wrap.yellow{background:var(--warning-50);color:var(--warning-600)}.pengumuman-icon-wrap.green{background:var(--success-50);color:var(--success-600)}.pengumuman-icon-wrap .material-symbols-rounded{font-size:24px}.pengumuman-body{flex:1;overflow:hidden}.pengumuman-title{font-size:14px;font-weight:700;color:var(--gray-900);margin-bottom:4px}.pengumuman-excerpt{font-size:12px;color:var(--gray-500);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.pengumuman-meta{font-size:11px;color:var(--gray-400);margin-top:6px;font-weight:500}.pengumuman-unread-dot{width:8px;height:8px;background:var(--primary-500);border-radius:var(--radius-full);flex-shrink:0;margin-top:6px}.admin-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px}.admin-stat-card{background:var(--surface-card);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-xs)}.admin-stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.admin-stat-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.admin-stat-icon .material-symbols-rounded{font-size:20px}.admin-stat-icon.blue{background:var(--primary-50);color:var(--primary-700)}.admin-stat-icon.green{background:var(--success-50);color:var(--success-600)}.admin-stat-icon.orange{background:var(--warning-50);color:var(--warning-600)}.admin-stat-icon.red{background:var(--danger-50);color:var(--danger-600)}.admin-stat-percent{font-size:12px;font-weight:700;color:var(--success-600)}.admin-stat-value{font-size:28px;font-weight:800;color:var(--gray-900);line-height:1}.admin-stat-label{font-size:12px;color:var(--gray-500);font-weight:500;margin-top:2px}.admin-table-wrap{background:var(--surface-card);border-radius:var(--radius-xl);margin:0 16px;overflow:hidden;box-shadow:var(--shadow-xs)}.admin-table-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--gray-100)}.admin-table-title{font-size:14px;font-weight:700;color:var(--gray-900)}.admin-table-action{font-size:12px;font-weight:600;color:var(--primary-600);background:0 0;border:none;cursor:pointer;font-family:var(--font-main)}.admin-table-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--gray-50)}.admin-table-row:last-child{border-bottom:none}.admin-row-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary-500),var(--primary-700));display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0}.admin-row-name{flex:1;font-size:13px;font-weight:600;color:var(--gray-900)}.admin-row-status{font-size:11px;font-weight:700;padding:3px 8px;border-radius:var(--radius-full)}.admin-row-status.hadir{background:var(--success-50);color:var(--success-600)}.admin-row-status.terlambat{background:var(--warning-50);color:var(--warning-600)}.admin-row-status.izin{background:var(--info-50);color:var(--info-500)}.admin-row-status.alpha{background:var(--danger-50);color:var(--danger-600)}#admin-dashboard-wrap{display:none}#admin-dashboard-wrap.visible{display:block}.admin-day-status-bar{display:flex;align-items:center;gap:10px;margin:0 16px 12px;padding:10px 14px;background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-xs)}.admin-day-status-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.admin-day-status-icon.kerja{background:var(--success-50);color:var(--success-600)}.admin-day-status-icon.libur{background:var(--gray-100);color:var(--gray-500)}.admin-day-status-icon .material-symbols-rounded{font-size:18px}.admin-day-status-text{flex:1}.admin-day-status-title{font-size:13px;font-weight:700;color:var(--gray-900)}.admin-day-status-sub{font-size:11px;color:var(--gray-500);font-weight:500}.admin-day-libur-chip{font-size:11px;font-weight:700;padding:3px 8px;border-radius:var(--radius-full);background:var(--warning-50);color:var(--warning-600)}.admin-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 16px;margin-bottom:8px}.admin-kpi-card{background:var(--surface-card);border-radius:var(--radius-lg);padding:12px 14px;box-shadow:var(--shadow-xs);cursor:pointer;transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}.admin-kpi-card:active{transform:scale(.97)}.admin-kpi-card.full-width{grid-column:1/-1}.admin-kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.admin-kpi-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.admin-kpi-icon .material-symbols-rounded{font-size:18px}.admin-kpi-icon.blue{background:var(--primary-50);color:var(--primary-700)}.admin-kpi-icon.green{background:var(--success-50);color:var(--success-600)}.admin-kpi-icon.orange{background:var(--warning-50);color:var(--warning-600)}.admin-kpi-icon.red{background:var(--danger-50);color:var(--danger-600)}.admin-kpi-icon.gray{background:var(--gray-100);color:var(--gray-600)}.admin-kpi-value{font-size:30px;font-weight:800;color:var(--gray-900);line-height:1}.admin-kpi-label{font-size:11px;color:var(--gray-500);font-weight:600;margin-top:2px}.admin-kpi-badge{position:absolute;top:10px;right:10px;background:var(--danger-500);color:#fff;font-size:10px;font-weight:800;border-radius:var(--radius-full);min-width:18px;height:18px;display:none;align-items:center;justify-content:center;padding:0 4px}.admin-kpi-badge.show{display:flex}.admin-progress-wrap{margin:0 16px 12px;background:var(--surface-card);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-xs)}.admin-progress-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.admin-progress-label{font-size:13px;font-weight:700;color:var(--gray-800)}.admin-progress-pct{font-size:18px;font-weight:800;color:var(--primary-700)}.admin-progress-track{width:100%;height:8px;background:var(--gray-100);border-radius:var(--radius-full);overflow:hidden}.admin-progress-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--primary-500),var(--success-500));transition:width .6s cubic-bezier(.4,0,.2,1)}.admin-progress-sub{font-size:11px;color:var(--gray-500);font-weight:500;margin-top:6px}.admin-list-card{background:var(--surface-card);border-radius:var(--radius-xl);margin:0 16px 10px;overflow:hidden;box-shadow:var(--shadow-xs)}.admin-list-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--gray-100)}.admin-list-title-wrap{display:flex;align-items:center;gap:8px}.admin-list-icon{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.admin-list-icon .material-symbols-rounded{font-size:16px}.admin-list-icon.orange{background:var(--warning-50);color:var(--warning-600)}.admin-list-icon.gray{background:var(--gray-100);color:var(--gray-600)}.admin-list-title{font-size:13px;font-weight:700;color:var(--gray-900)}.admin-list-count{font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--radius-full)}.admin-list-count.orange{background:var(--warning-50);color:var(--warning-600)}.admin-list-count.gray{background:var(--gray-100);color:var(--gray-600)}.admin-list-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--gray-50)}.admin-list-item:last-child{border-bottom:none}.admin-list-avatar{width:34px;height:34px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary-500),var(--primary-700));display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.admin-list-name{flex:1}.admin-list-nama{font-size:13px;font-weight:600;color:var(--gray-900)}.admin-list-mapel{font-size:11px;color:var(--gray-500);font-weight:500}.admin-list-jam{font-size:12px;font-weight:700;color:var(--warning-600);background:var(--warning-50);padding:2px 8px;border-radius:var(--radius-full)}.admin-list-empty{padding:20px 16px;text-align:center;font-size:13px;color:var(--gray-400);font-weight:500}.admin-list-more{display:block;width:100%;padding:10px 16px;text-align:center;font-size:12px;font-weight:700;color:var(--primary-600);background:0 0;border:none;border-top:1px solid var(--gray-100);cursor:pointer;font-family:var(--font-main)}.admin-gps-card{background:var(--surface-card);border-radius:var(--radius-xl);margin:0 16px 10px;overflow:hidden;box-shadow:var(--shadow-xs);display:none}.admin-gps-card.show{display:block}.admin-gps-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--danger-50);background:var(--danger-50)}.admin-gps-title{font-size:13px;font-weight:700;color:var(--danger-600)}.admin-gps-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--gray-50)}.admin-gps-item:last-child{border-bottom:none}.admin-gps-nama{font-size:13px;font-weight:600;color:var(--gray-900);flex:1}.admin-gps-chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--radius-full);background:var(--danger-50);color:var(--danger-600)}.admin-bulanan-wrap{margin:0 16px 10px}.admin-bulanan-pct-card{background:linear-gradient(135deg,var(--primary-700),var(--primary-800));border-radius:var(--radius-xl);padding:16px;margin-bottom:10px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:14px}.admin-bulanan-pct-num{font-size:40px;font-weight:800;color:#fff;line-height:1}.admin-bulanan-pct-sup{font-size:20px}.admin-bulanan-pct-info{flex:1}.admin-bulanan-pct-label{font-size:14px;font-weight:700;color:rgba(255,255,255,.9)}.admin-bulanan-pct-sub{font-size:12px;color:rgba(255,255,255,.6);font-weight:500}.admin-top-list-card{background:var(--surface-card);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xs);margin-bottom:10px}.admin-top-list-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--gray-100)}.admin-top-list-icon{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.admin-top-list-icon.red{background:var(--danger-50);color:var(--danger-600)}.admin-top-list-icon.orange{background:var(--warning-50);color:var(--warning-600)}.admin-top-list-icon .material-symbols-rounded{font-size:16px}.admin-top-list-title{font-size:13px;font-weight:700;color:var(--gray-900)}.admin-top-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--gray-50)}.admin-top-item:last-child{border-bottom:none}.admin-top-rank{width:22px;height:22px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:var(--gray-100);color:var(--gray-600);flex-shrink:0}.admin-top-rank.rank-1{background:var(--danger-50);color:var(--danger-600)}.admin-top-rank.rank-2{background:var(--warning-50);color:var(--warning-600)}.admin-top-item-name{flex:1}.admin-top-nama{font-size:13px;font-weight:600;color:var(--gray-900)}.admin-top-mapel{font-size:11px;color:var(--gray-500)}.admin-top-val{font-size:16px;font-weight:800;color:var(--danger-600)}.admin-top-val.orange{color:var(--warning-600)}.admin-top-sub{font-size:10px;color:var(--gray-500);text-align:right}.admin-chart-card{background:var(--surface-card);border-radius:var(--radius-xl);margin:0 16px 10px;padding:14px 16px;box-shadow:var(--shadow-xs)}.admin-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.admin-chart-title{font-size:13px;font-weight:700;color:var(--gray-900)}.admin-chart-sub{font-size:11px;color:var(--gray-500);font-weight:500}.admin-chart-canvas-wrap{position:relative;height:140px}.admin-kepsek-status-card{margin:0 16px 10px;background:var(--surface-card);border-radius:var(--radius-lg);padding:12px 16px;box-shadow:var(--shadow-xs);display:flex;align-items:center;gap:12px}.admin-kepsek-avatar{flex-shrink:0}.admin-kepsek-info{flex:1}.admin-kepsek-label{font-size:11px;color:var(--gray-500);font-weight:600}.admin-kepsek-nama{font-size:14px;font-weight:700;color:var(--gray-900)}.admin-kepsek-chip{font-size:12px;font-weight:700;padding:4px 12px;border-radius:var(--radius-full)}.admin-kepsek-chip.hadir{background:var(--success-50);color:var(--success-600)}.admin-kepsek-chip.terlambat{background:var(--warning-50);color:var(--warning-600)}.admin-kepsek-chip.belum{background:var(--gray-100);color:var(--gray-600)}.admin-kepsek-chip.izin{background:var(--info-50);color:var(--info-500)}.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:100;display:none;align-items:flex-end;backdrop-filter:blur(3px)}.modal-overlay.open{display:flex}.modal-sheet{background:var(--surface-card);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;width:100%;max-height:90dvh;overflow-y:auto;animation:slideUp .3s cubic-bezier(.32,.72,0,1)}@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}.modal-handle{width:36px;height:4px;background:var(--gray-300);border-radius:var(--radius-full);margin:10px auto 0}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px}.modal-title{font-size:17px;font-weight:700;color:var(--gray-900)}.modal-close{width:32px;height:32px;border-radius:var(--radius-full);background:var(--gray-100);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--gray-600)}.modal-close .material-symbols-rounded{font-size:18px}.modal-body{padding:0 20px 24px}.toast-container{position:absolute;top:calc(var(--header-height) + 8px);left:12px;right:12px;z-index:200;display:flex;flex-direction:column;gap:6px;pointer-events:none}.toast{display:flex;align-items:center;gap:10px;background:var(--gray-900);color:#fff;padding:12px 14px;border-radius:var(--radius-lg);font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);animation:toastIn .3s ease;pointer-events:all}@keyframes toastIn{from{opacity:0;transform:translateY(-12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.toast.success{background:var(--success-600)}.toast.warning{background:var(--warning-600)}.toast.error{background:var(--danger-600)}.toast .material-symbols-rounded{font-size:20px}.skeleton{background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px}.empty-state-icon{width:72px;height:72px;background:var(--gray-100);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}.empty-state-icon .material-symbols-rounded{font-size:36px;color:var(--gray-400)}.empty-state-title{font-size:15px;font-weight:700;color:var(--gray-700)}.empty-state-sub{font-size:13px;color:var(--gray-500);text-align:center}.hidden{display:none!important}.divider{height:8px;background:var(--gray-100)}.pb-nav{padding-bottom:calc(var(--nav-height) + 16px)}@media (min-width:480px){#app{border-radius:16px;margin:16px auto;height:calc(100dvh - 32px)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}