:root{--merah:#d8232a;--merah-muda:#fdecec;--kuning:#b45309;--kuning-muda:#fef3c7;--biru:#1d4ed8;--biru-muda:#e8eefc;--latar:#f6f7f9;--kartu:#fff;--teks:#111827;--redup:#6b7280;--garis:#e5e7eb}@media (prefers-color-scheme:dark){:root{--merah:#f05252;--merah-muda:#3b1618;--kuning:#fbbf24;--kuning-muda:#3a2a0c;--biru:#93b4ff;--biru-muda:#17223d;--latar:#0f1115;--kartu:#171a21;--teks:#e5e7eb;--redup:#9ca3af;--garis:#2a2f3a}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--latar);color:var(--teks);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.45}a{color:inherit}.kecil{font-size:12px}.redup{color:var(--redup)}.tebal{font-weight:600}.merah{color:var(--merah)}.halaman{max-width:1180px;margin:0 auto;padding:20px 16px 48px}.kepala{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.logo{align-items:center;gap:10px;font-weight:700;display:flex}.logo-tanda{background:var(--merah);color:#fff;letter-spacing:.5px;border-radius:8px;place-items:center;width:34px;height:34px;font-size:13px;display:inline-grid}.judul{font-size:18px;font-weight:700}.logo .kecil{font-weight:400}.akun{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.email{text-overflow:ellipsis;white-space:nowrap;max-width:240px;overflow:hidden}.tombol{border:1px solid var(--garis);background:var(--kartu);color:var(--teks);font:inherit;cursor:pointer;white-space:nowrap;border-radius:8px;justify-content:center;align-items:center;padding:7px 12px;font-weight:500;text-decoration:none;display:inline-flex}.tombol:hover{border-color:var(--redup)}.tombol:disabled{opacity:.6;cursor:default}.tombol-utama{background:var(--merah);border-color:var(--merah);color:#fff}.tombol-utama:hover{filter:brightness(1.08);border-color:var(--merah)}.tombol-lebar{width:100%;margin-top:8px;padding:11px 14px}.galat{color:var(--merah)}.kotak{background:var(--merah-muda);border-radius:10px;margin-bottom:16px;padding:12px 14px}.ringkas{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px;display:grid}.ubin{text-align:left;background:var(--kartu);border:1px solid var(--garis);cursor:pointer;font:inherit;color:inherit;border-radius:12px;padding:14px}.ubin.aktif{border-color:var(--merah);box-shadow:0 0 0 1px var(--merah) inset}.ubin-judul{margin-bottom:6px;font-weight:600}.ubin-angka{align-items:baseline;gap:6px;margin-bottom:4px;display:flex}.angka{font-size:28px;font-weight:700;line-height:1}.filter{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;display:flex}.segmen{background:var(--kartu);border:1px solid var(--garis);border-radius:10px;flex-wrap:wrap;gap:2px;padding:3px;display:inline-flex}.segmen button{color:var(--teks);font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:7px;padding:6px 10px}.segmen button.aktif{background:var(--teks);color:var(--kartu)}.jumlah{background:var(--latar);color:var(--teks);border-radius:999px;margin-left:4px;padding:1px 6px;font-size:11px;font-weight:600}.segmen button.aktif .jumlah{color:inherit;background:#fff3}.keterangan{margin:6px 0 4px;font-size:13px}.cari{border:1px solid var(--garis);background:var(--kartu);min-width:0;color:var(--teks);font:inherit;border-radius:10px;flex:240px;padding:8px 12px}.tabel-bungkus{background:var(--kartu);border:1px solid var(--garis);border-radius:12px;margin-top:8px;overflow:hidden}.tabel{border-collapse:collapse;width:100%}.tabel th{text-align:left;color:var(--redup);border-bottom:1px solid var(--garis);padding:10px 12px;font-size:12px;font-weight:600}.tabel td{border-bottom:1px solid var(--garis);vertical-align:middle;padding:10px 12px}.tabel tr:last-child td{border-bottom:0}.aksi{text-align:right}.kosong{text-align:center;color:var(--redup);padding:28px}.lencana{background:var(--latar);border:1px solid var(--garis);white-space:nowrap;border-radius:999px;padding:2px 8px;font-size:12px;display:inline-block}.status{white-space:nowrap;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:600;display:inline-block}.s-lewat{background:var(--merah-muda);color:var(--merah)}.s-jt30{background:var(--kuning-muda);color:var(--kuning)}.s-jt90{background:var(--biru-muda);color:var(--biru)}.s-tanpa,.s-aman{background:var(--latar);color:var(--redup)}.masuk{place-items:center;min-height:100vh;padding:16px;display:grid}.masuk-kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:14px;width:100%;max-width:380px;padding:28px 24px}.masuk-kartu h1{margin:18px 0 6px;font-size:20px}@media (max-width:760px){.ringkas{gap:8px}.ubin{padding:10px}.ubin-judul{font-size:12px}.angka{font-size:22px}.ubin-angka .kecil,.ubin>.kecil,.tabel thead{display:none}.tabel,.tabel tbody,.tabel tr,.tabel td{width:100%;display:block}.tabel tr{border-bottom:1px solid var(--garis);padding:10px 12px}.tabel tr:last-child{border-bottom:0}.tabel td{text-align:right;border:0;justify-content:space-between;gap:12px;padding:3px 0;display:flex}.tabel td:before{content:attr(data-label);color:var(--redup);text-align:left;font-size:12px}.tabel td:first-child{text-align:left;display:block}.tabel td:first-child:before{content:none}.aksi{justify-content:flex-end!important;padding-top:8px!important}.aksi:before{content:none!important}.aksi .tombol{width:100%}}