:root{--c-brand:#0b6e8a;--c-ink:#12263a;--c-muted:#5b6b7a;--c-line:#dbe3ea;--c-bg:#f4f7f9;--c-surface:#fff;--c-danger:#b3261e;--c-danger-bg:#fdedec;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--font:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}body{font:14px/1.5 var(--font);color:var(--c-ink);background:var(--c-bg);margin:0}.topbar{background:var(--c-brand);color:#fff;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 32px;display:flex}.konten{flex-direction:column;gap:20px;padding:32px;display:flex}h1{margin:0;font-size:24px;font-weight:700}.subjudul{color:var(--c-muted);margin:0;font-size:14px}.btn{border-radius:var(--radius-sm);font:600 14px/1.5 var(--font);cursor:pointer;border:1px solid #0000;padding:10px 16px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-utama{background:var(--c-brand);color:#fff}.btn-sekunder{background:var(--c-surface);color:var(--c-brand);border-color:var(--c-brand)}.btn-bahaya{background:var(--c-danger);color:#fff}.field{flex-direction:column;gap:6px;display:flex}.field label{font-size:13px;font-weight:500}.field input,.field select{border:1px solid var(--c-line);border-radius:var(--radius-sm);background:var(--c-surface);font:14px/1.5 var(--font);color:var(--c-ink);padding:10px 12px}.field-error{color:var(--c-danger);margin:0;font-size:13px}.kotak-error{border-radius:var(--radius-sm);background:var(--c-danger-bg);color:var(--c-danger);padding:10px 12px}.kartu{border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-surface);padding:18px 20px}.kartu .judul{color:var(--c-muted);font-size:13px}.kartu .angka{font-size:24px;font-weight:700}.tabel-bungkus{border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-surface);overflow-x:auto}table{border-collapse:collapse;width:100%}th{background:var(--c-bg);color:var(--c-muted);text-align:left;text-transform:uppercase;padding:12px 16px;font-size:12px;font-weight:600}td{border-bottom:1px solid var(--c-line);padding:12px 16px;font-size:14px}.angka{text-align:right}dialog{border-radius:var(--radius-lg);background:var(--c-surface);color:var(--c-ink);border:0;width:min(520px,100vw - 32px);padding:28px}dialog.konfirmasi{width:min(440px,100vw - 32px)}dialog::backdrop{background:#00000073}@media (width<=600px){.topbar{padding:12px 16px}.konten{padding:16px}}[hidden]{display:none!important}.topbar-kiri{flex-direction:column;min-width:0;display:flex}.topbar .brand{font-size:18px}.topbar .tpi{opacity:.85;font-size:13px}.topbar-kanan{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px;display:flex}#topbar-user{font-size:14px}.judul-baris{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.login-latar{justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex}.login-kartu{border:1px solid var(--c-line);border-radius:var(--radius-lg);background:var(--c-surface);flex-direction:column;gap:16px;width:min(420px,100%);padding:32px;display:flex}.login-kartu h1{color:var(--c-brand)}.login-kartu .btn{width:100%}.catatan{color:var(--c-muted);margin:0;font-size:13px}.form-grid{flex-direction:column;gap:14px;margin-top:16px;display:flex}.form-dua{grid-template-columns:1fr 1fr;gap:12px;display:grid}.modal-aksi{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px;display:flex}dialog h2{margin:0;font-size:18px}dialog p{margin:8px 0 0}.pratinjau{border:1px solid var(--c-line);border-radius:var(--radius-sm);background:var(--c-bg);flex-direction:column;gap:6px;padding:12px 14px;display:flex}.pratinjau div{justify-content:space-between;gap:12px;display:flex}.pratinjau strong{font-weight:700}td.aksi{white-space:nowrap}td.aksi .btn{margin-right:6px;padding:6px 12px;font-size:13px}.kosong{text-align:center;color:var(--c-muted);padding:32px 16px}.kosong strong{color:var(--c-ink);margin-bottom:4px;font-size:15px;display:block}.footer-tabel{color:var(--c-muted);margin:0;font-size:13px}.filter{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.filter .field{min-width:150px}.filter-cepat{flex-wrap:wrap;gap:8px;display:flex}.grid-kartu{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.kartu .angka{text-align:left}.keterangan{color:var(--c-muted);margin:0;font-size:13px}@media (width<=900px){.grid-kartu{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.grid-kartu,.form-dua{grid-template-columns:1fr}.filter{flex-direction:column;align-items:stretch}.login-kartu{padding:24px}}