:root{--brand:#1d4ed8;--brand-dark:#1e3a8a;--brand-soft:#eef2ff;--ink:#0f172a;--muted:#64748b;--bg:#f1f5f9;--card:#ffffff;--garis:#e2e8f0;--hijau:#15803d;--hijau-soft:#dcfce7;--kuning:#b45309;--kuning-soft:#fef3c7;--merah:#b91c1c;--merah-soft:#fee2e2;--radius:14px}*{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100dvh;font-size:16px}a{color:var(--brand);text-decoration:none}h1{font-size:1.35rem}h1,h2{margin:0}h2{font-size:1.1rem}h3{font-size:1rem}h3,p{margin:0}code{background:var(--brand-soft);color:var(--brand-dark);padding:2px 6px;border-radius:6px;font-size:.85rem}.masuk-layar{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}.masuk-kartu{width:100%;max-width:380px;background:var(--card);border-radius:20px;padding:28px 22px;box-shadow:0 12px 40px rgba(15,23,42,.12)}.masuk-merek{display:flex;align-items:center;gap:12px;margin-bottom:20px}.masuk-merek img{border-radius:14px}.masuk-merek small{display:block;color:var(--muted);font-size:.82rem}.shell{max-width:720px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}.shell-header{position:-webkit-sticky;position:sticky;top:0;z-index:20;background:var(--brand);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 8px}.shell-header-atas{justify-content:space-between}.shell-header-atas,.shell-merek{display:flex;align-items:center;gap:10px}.shell-merek{color:#fff}.shell-merek img{border-radius:10px}.shell-merek strong{display:block;font-size:.98rem}.shell-merek small{display:block;font-size:.75rem;opacity:.85}.tombol-keluar{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:8px 12px;font-size:.85rem;cursor:pointer}.shell-nav{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--garis);position:-webkit-sticky;position:sticky;top:0;z-index:15;-webkit-overflow-scrolling:touch}.nav-tautan{white-space:nowrap;padding:8px 14px;border-radius:999px;font-size:.88rem;color:var(--muted);background:#f1f5f9}.nav-aktif{background:var(--brand);color:#fff}.shell-isi{flex:1 1;padding:14px 14px 60px}.koneksi{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.78rem;margin-top:8px;color:#fff}.koneksi-status{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 10px}.titik{width:8px;height:8px;border-radius:50%;background:#4ade80}.koneksi-offline .titik{background:#f87171}.koneksi-antrean{display:inline-flex;align-items:center;gap:8px;background:#f59e0b;color:#1f2937;border-radius:999px;padding:3px 6px 3px 12px;font-weight:600}.koneksi-pesan{color:#bbf7d0}.kartu{background:var(--card);border:1px solid var(--garis);border-radius:var(--radius);padding:16px;margin-bottom:14px}.kartu-judul{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}.bantuan{color:var(--muted);font-size:.85rem;margin-top:4px}.bantuan.kecil{font-size:.78rem}.badge{display:inline-block;background:var(--brand);color:#fff;font-size:.72rem;padding:3px 9px;border-radius:999px;letter-spacing:.02em}.tombol-biasa,.tombol-foto,.tombol-mini,.tombol-utama{cursor:pointer;border-radius:10px;font-family:inherit;font-size:.92rem;border:1px solid transparent}.tombol-utama{background:var(--brand);color:#fff;padding:11px 16px;font-weight:600}.tombol-utama:disabled{opacity:.6}.tombol-biasa{background:#f1f5f9;color:var(--ink);border-color:var(--garis);padding:11px 16px}.tombol-mini{background:#fff;border:1px solid var(--garis);color:var(--brand);padding:5px 10px;font-size:.78rem}.tombol-mini.bahaya{color:var(--merah);border-color:#fecaca}.tombol-baris{display:flex;gap:8px;margin-top:6px}.tombol-blok{display:block;width:100%;text-align:center;padding:14px;font-size:1rem}.formulir{background:#f8fafc;border:1px dashed var(--garis);border-radius:12px;padding:14px;margin-bottom:14px;display:grid;grid-gap:10px;gap:10px}.isian{display:grid;grid-gap:5px;gap:5px;font-size:.9rem}.isian>span{font-weight:600;color:#334155}.isian input,.isian select,.isian textarea,input[type=date],input[type=email],input[type=number],input[type=password],input[type=text],select,textarea{width:100%;padding:11px 12px;border:1px solid var(--garis);border-radius:10px;font-size:1rem;font-family:inherit;background:#fff;color:var(--ink)}textarea{min-height:70px;resize:vertical}.isian-centang{display:flex;align-items:center;gap:8px;font-weight:500}.isian-centang input{width:20px;height:20px}.daftar-kartu{list-style:none;margin:0;padding:0;display:grid;grid-gap:10px;gap:10px}.kartu-baris{border:1px solid var(--garis);border-radius:12px;padding:12px;background:#fff}.kartu-baris-isi{display:grid;grid-gap:6px;gap:6px;margin-bottom:10px}.kartu-baris-field small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}.kartu-baris-field span{font-size:.95rem}.kartu-baris-aksi{display:flex;gap:8px;justify-content:flex-end}.pekan-daftar{display:grid;grid-gap:10px;gap:10px}.pekan-kartu{display:flex;align-items:center;justify-content:space-between;gap:12px;border-left:1px solid var(--garis);border:1px solid var(--garis);border-left-width:6px;border-radius:12px;padding:14px;background:#fff}.pekan-kartu.status-kosong{border-left-color:var(--merah)}.pekan-kartu.status-sebagian{border-left-color:#f59e0b}.pekan-kartu.status-lengkap{border-left-color:var(--hijau)}.pekan-kartu strong{display:block;font-size:1rem}.pekan-kartu small{color:var(--muted);font-size:.82rem}.status-lencana{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}.status-lencana.kosong{background:var(--merah-soft);color:var(--merah)}.status-lencana.sebagian{background:var(--kuning-soft);color:var(--kuning)}.status-lencana.lengkap{background:var(--hijau-soft);color:var(--hijau)}.baris-jurnal{border:1px solid var(--garis);border-radius:12px;padding:12px;margin-bottom:12px;background:#fff}.baris-judul{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}.baris-judul strong{font-size:.95rem}.baris-judul small{color:var(--muted);font-size:.8rem}.kehadiran-grup{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:6px;gap:6px;margin-bottom:10px}.tombol-kehadiran{padding:12px 4px;border-radius:10px;border:1px solid var(--garis);background:#fff;font-size:.78rem;font-weight:700;cursor:pointer;color:var(--muted)}.tombol-kehadiran.dipilih{color:#fff;border-color:transparent}.tombol-kehadiran.dipilih.hadir{background:var(--hijau)}.tombol-kehadiran.dipilih.izin{background:#2563eb}.tombol-kehadiran.dipilih.sakit{background:#b45309}.tombol-kehadiran.dipilih.alfa{background:var(--merah)}.baris-grid{display:grid;grid-gap:10px;gap:10px}@media (min-width:560px){.baris-grid{grid-template-columns:1fr 2fr}}.tanda-antrean{background:var(--kuning-soft);color:var(--kuning)}.tanda-antrean,.tanda-tersimpan{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px}.tanda-tersimpan{background:var(--hijau-soft);color:var(--hijau)}.foto-blok{margin-top:8px}.foto-tombol{display:flex;gap:8px}.tombol-foto{flex:1 1;padding:12px;background:var(--brand-soft);color:var(--brand-dark);font-weight:600}.foto-pratinjau img{width:100%;max-height:200px;object-fit:cover;border-radius:10px}.foto-aksi{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}.foto-nama{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabel-gulir{overflow-x:auto;-webkit-overflow-scrolling:touch}table.tabel{border-collapse:collapse;width:100%;font-size:.82rem;min-width:480px}table.tabel td,table.tabel th{border:1px solid var(--garis);padding:7px 8px;text-align:left}table.tabel th{background:#f1f5f9;font-weight:700}table.tabel tr.jenjang-baris td{background:#dbeafe;font-weight:700}.aspek-blok{border:1px solid var(--garis);border-radius:12px;padding:12px;margin-bottom:12px;background:#fff}.aspek-blok h3{margin-bottom:8px;color:var(--brand-dark)}.aspek-grid{display:grid;grid-gap:10px;gap:10px}@media (min-width:560px){.aspek-grid{grid-template-columns:1fr 1fr}}.memuat{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--muted)}.pemutar{width:18px;height:18px;border:3px solid var(--garis);border-top-color:var(--brand);border-radius:50%;animation:putar .8s linear infinite}@keyframes putar{to{transform:rotate(1turn)}}.pesan-galat{background:var(--merah-soft);color:var(--merah)}.pesan-galat,.pesan-sukses{padding:10px 12px;border-radius:10px;font-size:.88rem;margin:8px 0}.pesan-sukses{background:var(--hijau-soft);color:var(--hijau)}.pesan-info{background:var(--brand-soft);color:var(--brand-dark);padding:10px 12px;border-radius:10px;font-size:.88rem;margin:8px 0}.baris-seleksi{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.baris-seleksi select{max-width:260px}.tautan-blok{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border:1px solid var(--garis);border-radius:12px;background:#fff;margin-bottom:10px}.tautan-blok strong{display:block}.tautan-blok small{color:var(--muted);font-size:.8rem}.grid-tautan{display:grid;grid-gap:10px;gap:10px}@media (min-width:560px){.grid-tautan{grid-template-columns:1fr 1fr}}.kosong{text-align:center;color:var(--muted);padding:30px 10px;font-size:.9rem}.wrap{max-width:640px;margin:0 auto;padding:24px 20px 48px}.hero{display:flex;align-items:center;gap:14px;margin-bottom:20px}.hero img{border-radius:16px}p.lead{color:var(--muted);margin:4px 0 0;font-size:.95rem}ul{margin:8px 0 0;padding-left:20px}