:root{--bg: #f4f6fb;--kartu: #ffffff;--ink: #152029;--redup: #6b7a8c;--garis: #e5eaf1;--utama: #4f46e5;--utama-2: #6d5efc;--hijau: #0f9d76;--kuning: #e08a1e;--biru: #3b7ddd;--merah: #d94a5a;--r: 16px;--bayang: 0 1px 2px rgba(21, 32, 41, .06), 0 8px 24px -12px rgba(21, 32, 41, .18)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}button,input,select{font:inherit;color:inherit}button{cursor:pointer}h1,h2,h3{margin:0;line-height:1.25;letter-spacing:-.01em}h1{font-size:1.5rem}h2{font-size:1.02rem}.app{max-width:860px;margin:0 auto;padding:0 14px 32px}.redup{color:var(--redup)}.kecil{font-size:.82rem}.teks-kecil{font-size:.8rem;color:var(--redup);margin:0}.tautan{background:none;border:0;padding:0;color:var(--utama);font-weight:600;text-decoration:underline;text-underline-offset:2px}.kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 2px 12px}.merek{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;text-align:left}.merek-ikon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--utama),var(--utama-2));font-size:1.15rem;box-shadow:0 8px 18px -10px var(--utama)}.merek strong{display:block;font-size:1.02rem}.merek small{display:block;color:var(--redup);font-size:.76rem}.kepala-kanan{display:flex;align-items:center;gap:8px}.titik-muat{width:14px;height:14px;border-radius:50%;border:2px solid var(--garis);border-top-color:var(--utama);animation:putar .8s linear infinite}@keyframes putar{to{transform:rotate(360deg)}}.nav{position:sticky;top:0;z-index:20;display:flex;gap:4px;padding:6px;margin-bottom:16px;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--garis);border-radius:16px;box-shadow:var(--bayang);overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav-item{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 10px;border:0;border-radius:11px;background:none;color:var(--redup);font-size:.86rem;font-weight:600;white-space:nowrap}.nav-item span{font-size:.95rem}.nav-item.aktif{background:#eef0ff;color:var(--utama)}.tombol{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:12px;padding:11px 16px;font-weight:650;font-size:.9rem;background:#eef1f6;color:var(--ink);transition:transform .06s ease,filter .15s ease;text-decoration:none}.tombol:active{transform:scale(.98)}.tombol:disabled{opacity:.6;cursor:default}.tombol.utama{background:linear-gradient(135deg,var(--utama),var(--utama-2));color:#fff;box-shadow:0 10px 20px -12px var(--utama)}.tombol.garis{background:#fff;border-color:var(--garis);color:var(--ink)}.tombol.garis-terang{background:#ffffff24;border-color:#ffffff4d;color:#fff}.tombol.bahaya{background:var(--merah);color:#fff}.tombol.kecil{padding:7px 12px;font-size:.82rem;border-radius:10px}.tombol.admin{background:#fff;border-color:var(--garis);padding:9px 14px;box-shadow:var(--bayang)}.tombol.admin.aktif{background:#e9f8f1;border-color:#b9e8d6;color:#0a7a5b}.halaman{display:flex;flex-direction:column;gap:14px}.judul-halaman{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.judul-halaman p{margin:2px 0 0}.sambutan{position:relative;overflow:hidden;border-radius:22px;padding:22px 20px;color:#fff;background:linear-gradient(135deg,#1c2b46,#38406e 55%,#5b46a6);box-shadow:0 18px 36px -24px #38406e}.sambutan h1{font-size:1.55rem;margin-bottom:4px}.eyebrow{margin:0 0 6px;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#ffffffb8}.redup-di{color:#ffffffc7}.sambutan .redup{color:#fffc;margin:0 0 16px;font-size:.9rem;max-width:46ch}.sambutan-aksi{display:flex;flex-wrap:wrap;gap:8px}.grid-stat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r);padding:14px;box-shadow:var(--bayang);display:flex;flex-direction:column;gap:2px}.stat-ikon{font-size:1.05rem;margin-bottom:4px}.stat strong{font-size:1.5rem;letter-spacing:-.02em}.stat small{color:var(--redup);font-size:.78rem}.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r);padding:16px;box-shadow:var(--bayang)}.kartu-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}.kartu-kepala h2{display:inline-flex;align-items:baseline;gap:6px}.kepala-aksi{display:flex;gap:6px}.daftar-ringkas,.daftar-kartu,.daftar-siswa,.daftar-absen-isi{list-style:none;margin:0;padding:0}.daftar-ringkas li+li{margin-top:8px}.baris-kelas{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--garis);border-radius:13px;background:#fbfcfe;text-align:left}.baris-kelas:hover{background:#f5f7fd}.avatar{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:.78rem;font-weight:700;color:#3c3a86;background:#eaeaff}.avatar.besar{width:46px;height:46px;font-size:.92rem;border-radius:14px}.baris-kelas-teks{flex:1;min-width:0}.baris-kelas-teks strong,.baris-siswa-teks strong{display:block;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.baris-kelas-teks small,.baris-siswa-teks small{display:block;color:var(--redup);font-size:.78rem}.baris-kelas-kanan{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}.baris-kelas-kanan small{color:var(--redup);font-size:.74rem}.lencana{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}.lencana.hijau{background:#e6f8f0;color:#0a7a5b}.lencana.abu{background:#f0f2f6;color:#6b7a8c}.lencana.kuning{background:#fdf3e0;color:#9a6413}.lencana.status-H{background:#e6f8f0;color:#0a7a5b}.lencana.status-S{background:#fdf3e0;color:#9a6413}.lencana.status-I{background:#e8f1fd;color:#215fa8}.lencana.status-A{background:#fdeaec;color:#ad2b3b}.baris-status{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.baris-status.kecil{gap:6px}.pil-stat{border-radius:13px;padding:10px 8px;text-align:center;border:1px solid var(--garis);background:#fbfcfe}.pil-stat strong{display:block;font-size:1.2rem}.pil-stat small{color:var(--redup);font-size:.72rem}.pil-stat.kecil{padding:7px 4px}.pil-stat.kecil strong{font-size:1rem}.pil-stat.kecil small{font-size:.68rem}.pil-stat.s-H{background:#effaf5;border-color:#cdeee0}.pil-stat.s-H strong{color:var(--hijau)}.pil-stat.s-S{background:#fef7eb;border-color:#f6e2c1}.pil-stat.s-S strong{color:var(--kuning)}.pil-stat.s-I{background:#eef5ff;border-color:#d3e3fb}.pil-stat.s-I strong{color:var(--biru)}.pil-stat.s-A{background:#fdeff1;border-color:#f8d6db}.pil-stat.s-A strong{color:var(--merah)}.pesan{border-radius:13px;padding:11px 14px;font-size:.88rem;border:1px solid transparent}.pesan.gagal{background:#fdeff1;border-color:#f6ccd3;color:#a2283a}.pesan.info{background:#eef3fb;border-color:#d8e3f4;color:#2c4a70}.pesan.sukses{background:#eaf9f2;border-color:#c8ecdb;color:#0a7a5b}.daftar-kartu{display:grid;gap:10px}.kartu-kelas{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r);padding:14px;box-shadow:var(--bayang)}.kartu-kelas-atas{display:flex;align-items:center;gap:10px}.kartu-kelas-atas>div{flex:1;min-width:0}.kartu-kelas-atas strong{display:block;font-size:.98rem}.kartu-kelas-atas small{color:var(--redup);font-size:.78rem}.kartu-kelas p{margin:8px 0 0}.kartu-aksi{display:flex;gap:8px;margin-top:12px}.pil-gulir{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.pil-gulir::-webkit-scrollbar{display:none}.pil{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--garis);background:#fff;font-size:.85rem;font-weight:600;color:var(--redup)}.pil span{opacity:.7;font-size:.76rem}.pil.aktif{background:#eef0ff;border-color:#d5d8ff;color:var(--utama)}.daftar-siswa{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r);box-shadow:var(--bayang);overflow:hidden}.baris-siswa{display:flex;align-items:center;gap:10px;padding:11px 14px}.baris-siswa+.baris-siswa{border-top:1px solid var(--garis)}.nomor{flex:0 0 auto;width:24px;text-align:center;font-size:.76rem;font-weight:700;color:var(--redup)}.baris-siswa-teks{flex:1;min-width:0}.baris-siswa-aksi{display:flex;gap:2px}.ikon-tombol{border:0;background:none;padding:7px;border-radius:9px;font-size:.95rem;line-height:1}.ikon-tombol:hover{background:#f1f4f9}.panel-pilih{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r);padding:14px;box-shadow:var(--bayang)}.ringkas-absensi{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.kosong-stat strong{color:var(--redup)}.status-simpan{margin:0;font-size:.82rem;font-weight:600}.status-simpan.ok{color:var(--hijau)}.status-simpan.menyimpan{color:var(--redup)}.status-simpan.gagal{color:var(--merah)}.daftar-absen{padding:14px}.daftar-absen-isi{margin:0 -14px -14px}.baris-absen{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--garis);flex-wrap:wrap}.baris-absen.terisi{background:#fcfdff}.baris-absen-teks{display:flex;align-items:center;gap:8px;min-width:140px;flex:1}.baris-absen-teks strong{display:block;font-size:.92rem}.baris-absen-teks small{color:var(--redup);font-size:.74rem}.grup-status{display:flex;gap:5px}.status-tombol{display:flex;align-items:center;gap:3px;padding:7px 9px;border-radius:11px;border:1px solid var(--garis);background:#fff;font-size:.82rem;font-weight:700;color:var(--redup);min-width:44px;justify-content:center}.status-tombol em{font-style:normal;font-size:.72rem}.status-tombol.s-H.aktif{background:var(--hijau);border-color:var(--hijau);color:#fff}.status-tombol.s-S.aktif{background:var(--kuning);border-color:var(--kuning);color:#fff}.status-tombol.s-I.aktif{background:var(--biru);border-color:var(--biru);color:#fff}.status-tombol.s-A.aktif{background:var(--merah);border-color:var(--merah);color:#fff}.ringkasan-rekap{display:flex;flex-direction:column;gap:12px}.bar-progres{height:8px;border-radius:999px;background:#eef1f6;overflow:hidden}.bar-progres span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#0f9d76,#34c48f);transition:width .3s ease}.kartu-rekap p{margin:8px 0 0}.daftar-tidak-hadir{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}.daftar-tidak-hadir li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.86rem;padding:7px 10px;border-radius:10px;background:#f8fafd}.kosong{background:var(--kartu);border:1px dashed #d7deea;border-radius:var(--r);padding:28px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.kosong-ikon{font-size:1.6rem}.kosong p{margin:0;color:var(--redup);font-size:.88rem;max-width:34ch}.latar-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#10182880;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;padding:0}.modal{width:100%;max-width:440px;background:#fff;border-radius:20px 20px 0 0;padding:18px;max-height:90vh;overflow-y:auto;box-shadow:0 -10px 40px -12px #10182866;animation:naik .18s ease-out}@keyframes naik{0%{transform:translateY(14px);opacity:.7}}.modal-kepala{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.tombol-x{border:0;background:#f1f4f9;width:30px;height:30px;border-radius:9px;color:var(--redup);font-size:.85rem}.tumpuk{display:flex;flex-direction:column;gap:10px}.tumpuk p{margin:0;font-size:.9rem}.bidang{display:flex;flex-direction:column;gap:5px;font-size:.82rem;font-weight:600;color:#3a4756}.bidang small{font-weight:500;color:var(--redup);font-size:.74rem}.bidang input,.bidang select{width:100%;padding:11px 12px;border-radius:11px;border:1px solid var(--garis);background:#fbfcfe;font-weight:500;color:var(--ink);outline:none}.bidang input:focus,.bidang select:focus{border-color:#b9bdfa;background:#fff;box-shadow:0 0 0 3px #4f46e51f}.kaki{margin-top:24px;text-align:center;color:var(--redup);font-size:.76rem}@media (min-width: 620px){h1{font-size:1.7rem}.grid-stat{grid-template-columns:repeat(4,1fr)}.daftar-kartu{grid-template-columns:repeat(2,1fr)}.latar-modal{align-items:center;padding:20px}.modal{border-radius:20px}.kartu,.daftar-absen{padding:18px}.daftar-absen-isi{margin:0 -18px -18px}}