:root{
  --kertas:#F1F4F3; --kartu:#fff; --tinta:#0E1A20; --redup:#5E6E75; --garis:#D6DEDC;
  --dalam:#0C252E; --masuk:#0B6B4F; --keluar:#9E3A22; --sorot:#FFE45E; --biru:#1E5F8C;
  --angka:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;
  --huruf:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--kertas);color:var(--tinta);font:15px/1.45 var(--huruf)}
body.app{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.n{font-family:var(--angka);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid #1E86A8;outline-offset:2px}

/* ---------- gerbang login ---------- */
body.pintu{background:var(--dalam);min-height:100vh;display:flex}
.gerbang{margin:auto;padding:24px 18px;width:100%;max-width:400px}
.kartu-masuk{background:var(--kartu);border-radius:16px;padding:26px 22px 20px}
.lambang{width:46px;height:46px;border-radius:12px;background:var(--dalam);color:#7FE3B4;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.kartu-masuk h1{font-size:20px;margin:0;letter-spacing:.02em}
.kartu-masuk .sub{margin:2px 0 20px;color:var(--redup);font-size:13.5px}
.galat{background:#FBE3DC;color:var(--keluar);padding:10px 12px;border-radius:8px;
  font-size:13.5px;font-weight:600;margin-bottom:14px}
.sandi-wrap{position:relative}
.sandi-wrap .lihat{position:absolute;right:6px;top:6px;border:0;background:none;
  color:var(--biru);font-size:13px;font-weight:600;padding:6px 8px}
.kaki{margin:18px 0 0;font-size:12px;color:var(--redup);line-height:1.6;text-align:center}

/* ---------- kepala aplikasi ---------- */
header{background:var(--dalam);color:#fff;padding:calc(13px + env(safe-area-inset-top)) 18px 15px}
.merek{display:flex;justify-content:space-between;align-items:center;gap:10px}
.merek b{font-size:13.5px;font-weight:800;letter-spacing:.14em}
.akun{font-size:12px;color:#9CBCC4;display:flex;align-items:center;gap:6px}
.peran{font-style:normal;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:4px}
.peran.admin{background:#7FE3B4;color:#04342C}
.peran.member{background:#2E4A55;color:#CFE3E8}
.judul-saldo{margin-top:15px;font-size:12.5px;color:#9CBCC4}
.saldo{font-size:37px;font-weight:700;line-height:1.05;margin-top:2px}
.saldo small{font-size:16px;font-weight:600;opacity:.6;margin-right:4px}
.belah{display:flex;margin-top:14px;border-top:1px solid rgba(255,255,255,.16);padding-top:11px}
.belah div{flex:1}
.belah div+div{border-left:1px solid rgba(255,255,255,.16);padding-left:12px}
.belah u{display:block;font-size:11.5px;color:#9CBCC4;text-decoration:none}
.belah b{display:block;font-size:16px;font-weight:600;margin-top:1px}
.h{color:#7FE3B4}.m{color:#FFB09B}

/* ---------- isi ---------- */
main{max-width:660px;margin:0 auto;padding:14px 14px 26px}
h2{font-size:13px;font-weight:700;color:var(--redup);margin:20px 0 8px}
h2:first-child{margin-top:2px}
.kotak{background:var(--kartu);border:1px solid var(--garis);border-radius:10px;overflow:hidden}
.baris{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--garis)}
.baris:last-child{border-bottom:0}
.isi{flex:1;min-width:0}
.isi b{display:block;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.isi i{font-style:normal;font-size:12px;color:var(--redup);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nilai{font-weight:600;font-size:14.5px;white-space:nowrap;text-align:right}
.sub{background:#EAEEED;font-weight:700}
.tot{background:var(--sorot)}
.tot .isi b,.tot .nilai{font-weight:800}
.judul-kotak{padding:9px 13px;background:#EAEEED;font-size:12px;font-weight:700;
  color:var(--redup);border-bottom:1px solid var(--garis)}
.kosong{text-align:center;color:var(--redup);padding:28px 16px;font-size:14px}
.kosong b{display:block;color:var(--tinta);margin-bottom:4px}

.kartu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kartu-kecil{background:var(--kartu);border:1px solid var(--garis);border-radius:10px;padding:12px 13px}
.kartu-kecil u{display:block;font-size:11.5px;color:var(--redup);text-decoration:none}
.kartu-kecil b{display:block;font-size:19px;font-weight:700;margin-top:3px}

.tombol-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 2px}
.tbl{border:1px solid var(--garis);background:var(--kartu);color:var(--tinta);padding:13px 10px;
  border-radius:10px;font-weight:600;text-align:center;display:block;width:100%}
.tbl.utama{background:var(--dalam);border-color:var(--dalam);color:#fff}
.tbl.hijau{background:var(--masuk);border-color:var(--masuk);color:#fff}
.tbl.merah{background:var(--keluar);border-color:var(--keluar);color:#fff}
.tbl.lebar{grid-column:1/-1}
.tbl:active{transform:translateY(1px)}
.tbl.kecil{padding:7px 10px;font-size:13px;width:auto;display:inline-block}

.pil-baris{display:flex;gap:6px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none}
.pil-baris::-webkit-scrollbar{display:none}
.pil{border:1px solid var(--garis);background:var(--kartu);color:var(--redup);padding:6px 12px;
  border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.pil[aria-pressed="true"]{background:var(--dalam);border-color:var(--dalam);color:#fff}

.tanda{font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap}
.tanda.minta{background:#FAEEDA;color:#854F0B}
.tanda.kunci{background:#E6F1FB;color:#0C447C}

input,select,textarea{width:100%;font:16px/1.4 var(--huruf);padding:11px 12px;
  border:1px solid var(--garis);border-radius:8px;background:#fff;color:var(--tinta)}
textarea{font:13px/1.55 var(--angka);min-height:190px}
label{display:block;font-size:12.5px;font-weight:600;color:var(--redup);margin:12px 0 5px}
.uang{font-family:var(--angka);font-size:23px;font-weight:700;text-align:right;padding:12px}
.tgl-input{font-family:var(--angka);letter-spacing:.04em}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pilih-jenis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.pilih-jenis button{padding:14px;border-radius:10px;border:1.5px solid var(--garis);
  background:var(--kartu);font-weight:700;color:var(--redup)}
.pilih-jenis button[aria-pressed="true"]{color:#fff}
.pilih-jenis button.masuk[aria-pressed="true"]{background:var(--masuk);border-color:var(--masuk)}
.pilih-jenis button.keluar[aria-pressed="true"]{background:var(--keluar);border-color:var(--keluar)}
.mini{border:0;background:none;color:var(--biru);font-weight:700;font-size:12px;padding:6px}
.mini.bahaya{color:var(--keluar)}

nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--kartu);
  border-top:1px solid var(--garis);padding-bottom:env(safe-area-inset-bottom);z-index:20}
nav button{flex:1;border:0;background:none;padding:9px 2px 10px;color:var(--redup);
  font-size:11px;font-weight:600;position:relative}
nav svg{display:block;margin:0 auto 3px;width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
nav button[aria-current="true"]{color:var(--dalam)}
nav button[aria-current="true"] svg{stroke-width:2.3}
nav .lonceng{position:absolute;top:5px;right:50%;margin-right:-20px;background:var(--keluar);
  color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;
  line-height:16px;padding:0 4px}

.tirai{position:fixed;inset:0;background:rgba(10,25,30,.5);z-index:40;display:none}
.tirai.buka{display:block}
.panel{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--kertas);
  border-radius:16px 16px 0 0;max-height:92vh;overflow-y:auto;
  padding:6px 16px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .22s ease}
.panel.buka{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.panel{transition:none}}
.pegangan{width:38px;height:4px;background:var(--garis);border-radius:2px;margin:8px auto 6px}
.panel h3{margin:6px 0 2px;font-size:18px}
.panel .petunjuk{margin:0;font-size:13px;color:var(--redup)}
.panel .tbl{margin-top:16px;padding:14px}
.pesan{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;z-index:60;background:var(--dalam);
  color:#fff;padding:10px 16px;border-radius:8px;font-size:13.5px;font-weight:600;opacity:0;
  pointer-events:none;transition:opacity .2s;max-width:88%;text-align:center}
.pesan.tampil{opacity:1}
.grafik{width:100%;height:auto;display:block}
.ket-grafik{display:flex;gap:14px;padding:10px 13px;font-size:12px;color:var(--redup);
  border-top:1px solid var(--garis)}
.ket-grafik span{display:flex;align-items:center;gap:5px}
.titik{width:9px;height:9px;border-radius:2px;display:inline-block}
.peringatan{background:#FAEEDA;border:1px solid #EF9F27;color:#633806;padding:11px 13px;
  border-radius:10px;font-size:13px;margin-bottom:12px;font-weight:600}
.catatan{font-size:12px;color:var(--redup);text-align:center;margin-top:24px;line-height:1.6}

/* ---------- navigasi bulan ---------- */
.strip-bulan{display:flex;align-items:center;gap:8px;margin-top:14px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:11px}
.strip-bulan b{flex:1;text-align:center;font-size:14px;font-weight:600;color:#DCEAEE}
.strip-bulan button{width:38px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:#DCEAEE;font-size:19px;line-height:1;padding:0}
.strip-bulan button.mati{opacity:.28}
.balik{width:100%;margin-top:9px;padding:9px;border-radius:8px;border:0;
  background:#7FE3B4;color:#04342C;font-weight:700;font-size:13px}
.tanggal-judul{font-size:12.5px;font-weight:700;color:var(--redup);margin:14px 0 6px}
.saldo.lampau{color:#B9D3DA}
.strip-bulan .balik{margin-top:0}
.cap{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  padding:2px 6px;border-radius:4px;vertical-align:1px;margin-left:5px}
.cap.closed{background:#FFB09B;color:#4A1508}
.cap.jalan{background:#2E4A55;color:#CFE3E8}
.kabar{background:#E6F1FB;border:1px solid #7FA9D4;color:#0C447C;padding:11px 13px;
  border-radius:10px;font-size:13px;margin-bottom:12px;line-height:1.55}
.kabar b{font-weight:800}

/* ---------- tambahan modul voucher ---------- */
.batch{border:1px solid var(--garis);border-radius:10px;background:var(--kartu);
  padding:12px 13px;margin-bottom:8px}
.batch-atas{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.batch-atas b{font-size:14.5px;font-weight:700}
.batch-atas span{font-size:12px;color:var(--redup);white-space:nowrap}
.batch-meta{font-size:12px;color:var(--redup);margin-top:2px}
.angka-baris{display:flex;gap:0;margin-top:10px;border-top:1px solid var(--garis);padding-top:9px}
.angka-baris div{flex:1;text-align:center}
.angka-baris div+div{border-left:1px solid var(--garis)}
.angka-baris u{display:block;font-size:10.5px;color:var(--redup);text-decoration:none}
.angka-baris b{display:block;font-size:16px;font-weight:700;margin-top:1px}
.batang{height:7px;background:#EAEEED;border-radius:4px;overflow:hidden;margin-top:9px;display:flex}
.batang i{display:block;height:7px}
.aksi-batch{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.aksi-batch button{flex:1;min-width:88px;padding:8px 6px;font-size:12.5px;border-radius:8px;
  border:1px solid var(--garis);background:var(--kartu);font-weight:600}
.tanda.aktif{background:#DCF0E7;color:var(--masuk)}
.tanda.selesai{background:#EAEEED;color:var(--redup)}
.tanda.lintas{background:#E6F1FB;color:#0C447C}
.tanda.utang{background:#FAEEDA;color:#854F0B}
.tanda.muka{background:#E6F1FB;color:#0C447C}
.judul-kecil{font-size:12px;font-weight:700;color:var(--redup);margin:14px 0 6px}

/* ---------- panduan ---------- */
.pandu{background:var(--kartu);border:1px solid var(--garis);border-radius:10px;
  margin-bottom:8px;overflow:hidden}
.pandu>summary{padding:13px 14px;font-weight:600;font-size:14.5px;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:9px}
.pandu>summary::-webkit-details-marker{display:none}
.pandu>summary::before{content:"+";font-size:17px;font-weight:700;color:var(--redup);
  width:16px;flex:0 0 16px;text-align:center}
.pandu[open]>summary::before{content:"\2212"}
.pandu[open]>summary{border-bottom:1px solid var(--garis)}
.pandu-isi{padding:4px 14px 14px;font-size:14px;line-height:1.65;color:var(--tinta)}
.pandu-isi p{margin:10px 0}
.pandu-isi ol{margin:10px 0;padding-left:20px}
.pandu-isi li{margin-bottom:7px}
.pandu-isi b{font-weight:700}
table.istilah{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px}
table.istilah td{padding:8px 0;border-bottom:1px solid var(--garis);vertical-align:top}
table.istilah td:first-child{font-weight:700;width:36%;padding-right:12px}
table.istilah tr:last-child td{border-bottom:0}