:root { --navy:#0b3d6b; --biru:#1f6fb2; --abu:#64748b; --hijau:#0f766e; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#0f172a; background:#f5f8fc; }
#app { max-width:1100px; margin:0 auto; padding:18px; }
.kepala { display:flex; justify-content:space-between; align-items:center; border-bottom:3px solid var(--navy); padding-bottom:10px; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.kepala h1 { font-size:17px; margin:0; color:var(--navy); }
.kepala .sub { font-size:12px; color:var(--abu); }
.tombol { border:1px solid #cbd5e1; background:#fff; border-radius:8px; padding:6px 12px; font-size:13px; cursor:pointer; }
.tombol.utama { background:linear-gradient(90deg,var(--navy),var(--biru)); color:#fff; border:none; }
.tombol.bahaya { border-color:#fecaca; color:#b91c1c; }
.tombol:disabled { opacity:.5; cursor:default; }
.tab { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.tab button { border:1px solid #cbd5e1; background:#fff; border-radius:20px; padding:6px 14px; font-size:13px; cursor:pointer; }
.tab button.aktif { background:var(--navy); color:#fff; border-color:var(--navy); }
.kartu { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px; margin-bottom:14px; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.kartu h2 { font-size:14px; margin:0 0 10px; color:var(--navy); }
.kisi { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.kotak { background:#f1f7fd; border:1px solid #d7e6f5; border-radius:10px; padding:10px 12px; }
.kotak b { display:block; font-size:20px; color:var(--navy); }
.kotak span { font-size:11px; color:var(--abu); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { background:var(--navy); color:#fff; text-align:left; padding:7px 8px; font-size:12px; }
td { border-bottom:1px solid #e8eef5; padding:6px 8px; vertical-align:top; }
tr:nth-child(even) td { background:#f8fbfe; }
label { font-size:12px; color:#334155; display:block; margin-bottom:2px; }
input, select, textarea { width:100%; border:1px solid #cbd5e1; border-radius:7px; padding:6px 8px; font-size:13px; font-family:inherit; }
.pesan { font-size:12px; margin-top:8px; }
.pesan.ok { color:#0f766e; }
.pesan.galat { color:#b91c1c; }
.kosong { color:var(--abu); font-size:13px; }
.anchor { font-size:11px; color:var(--abu); margin-top:3px; }
.lencana { display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600; }
.l-siap { background:#dcfce7; color:#166534; }
.l-siap2 { background:#fef9c3; color:#854d0e; }
.l-bina { background:#fee2e2; color:#991b1b; }
.l-gate { background:#ede9fe; color:#5b21b6; }
.garis { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.garis > * { flex:1 1 160px; }
.garis .tetap { flex:0 0 auto; }
@media print { .tab, .kepala .tombol, .tanpa-cetak { display:none !important; } body { background:#fff; } }
.subtab { display:flex; gap:6px; flex-wrap:wrap; margin:-6px 0 14px; }
.subtab button { border:1px solid #cfe0f2; background:#eef6ff; color:#0b3d6b; border-radius:8px; padding:5px 12px; font-size:12.5px; cursor:pointer; font-weight:600; }
.subtab button.aktif { background:linear-gradient(90deg,#0b3d6b,#1f6fb2); color:#fff; border-color:#0b3d6b; }
.subtab button.tambah { background:#fff; border-style:dashed; font-weight:500; }
.subtab .logo-bank { height:38px; width:auto; border-radius:8px; border:1px solid #dbe3ee; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.banner-uji { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:10px; padding:9px 13px; font-size:12.2px; line-height:1.5; margin:0 0 12px; }
.banner-uji { position:relative; padding-right:34px; }
.banner-uji .banner-tutup { position:absolute; top:6px; right:8px; border:0; background:transparent; color:#9a3412; font-size:16px; line-height:1; cursor:pointer; font-weight:700; }