:root {
  --bg: #f4f6f5; --kartu: #ffffff; --teks: #1b2420; --teks-2: #5d6b65; --garis: #e1e6e3;
  --utama: #0f766e; --utama-2: #0d5f59; --hijau: #2e9e5b; --merah: #c2410c; --merah-lembut: #f0a07a;
  --biru: #3b82c4; --oranye: #b7791f; --kuning-bg: #fff8e1;
  --k-kebutuhan: #0f766e; --k-keinginan: #d97706; --k-tabungan: #3b82c4;
  --radius: 12px; --bayang: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111614; --kartu: #1a211e; --teks: #e7ece9; --teks-2: #9aa8a1; --garis: #2c3531;
    --utama: #2bb3a6; --utama-2: #22958a; --hijau: #4cc27d; --merah: #f08a5d; --merah-lembut: #b8603d;
    --biru: #6aa9e0; --oranye: #e0a64b; --kuning-bg: #2b2715;
    --k-kebutuhan: #2bb3a6; --k-keinginan: #e0a64b; --k-tabungan: #6aa9e0;
    --bayang: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--teks); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--utama); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.35rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 1.2rem 0 .5rem; color: var(--teks-2); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 16px 16px 96px; }
.muted { color: var(--teks-2); }
.kecil { font-size: .82rem; }
.hijau { color: var(--hijau); } .merah { color: var(--merah) !important; } .biru { color: var(--biru); } .oranye { color: var(--oranye); }

.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--kartu); border-bottom: 1px solid var(--garis); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--teks); white-space: nowrap; }
.logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--utama); color: #fff; font-size: .8rem; font-weight: 800; }
.logo.besar { width: 56px; height: 56px; font-size: 1.3rem; border-radius: 14px; margin: 0 auto 12px; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--teks-2); display: flex; gap: 6px; align-items: center; }
.nav a.on { background: color-mix(in srgb, var(--utama) 12%, transparent); color: var(--utama); font-weight: 600; }
.nav a:hover { text-decoration: none; background: color-mix(in srgb, var(--teks) 6%, transparent); }
.keluar { display: flex; align-items: center; gap: 8px; margin: 0; }

.card { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--bayang); }
.card.sorot { border-color: var(--oranye); background: var(--kuning-bg); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid2 > .card { margin-bottom: 16px; min-width: 0; }

.kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.navbulan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pilih-bulan input { padding: 6px 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--garis); background: var(--kartu); color: var(--teks); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none !important; }
.btn:hover { border-color: var(--teks-2); }
.btn.utama { background: var(--utama); border-color: var(--utama); color: #fff; }
.btn.utama:hover { background: var(--utama-2); }
.btn.bahaya { color: var(--merah); border-color: color-mix(in srgb, var(--merah) 40%, transparent); }
.btn.tipis { padding: 6px 10px; font-weight: 500; }
.btn.lebar { width: 100%; margin-top: 8px; }

label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--teks-2); }
label.cek { flex-direction: row; align-items: center; gap: 8px; margin: 8px 0; }
input, select, textarea { font: inherit; font-size: 16px; color: var(--teks); background: var(--kartu); border: 1px solid var(--garis); border-radius: 8px; padding: 9px 10px; width: 100%; min-width: 0; }
input[type=checkbox], input[type=radio] { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--utama) 50%, transparent); border-color: var(--utama); }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.form-grid .seg, .form-grid .span2 { grid-column: 1 / -1; }
.form-grid .aksi { grid-column: 1 / -1; }
.aksi { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.seg { display: flex; gap: 8px; }
.seg-item { flex: 1; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--garis); border-radius: 9px; cursor: pointer; font-weight: 600; color: var(--teks); font-size: .95rem; }
.seg-item input { accent-color: var(--utama); }
.seg-item.masuk:has(input:checked) { border-color: var(--hijau); background: color-mix(in srgb, var(--hijau) 12%, transparent); }
.seg-item.keluar:has(input:checked) { border-color: var(--merah); background: color-mix(in srgb, var(--merah) 10%, transparent); }
.baris-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.baris-form > * { flex: 1 1 150px; }
.baris-form > .btn { flex: 0 0 auto; }
.hapus-form { margin-top: 20px; border-top: 1px solid var(--garis); padding-top: 16px; }

details.catat > summary { cursor: pointer; font-weight: 700; list-style: none; }
details.catat > summary::before { content: "+ "; color: var(--utama); }
details.catat[open] > summary { margin-bottom: 12px; }
details.catat[open] > summary::before { content: "− "; }

.flash { padding: 10px 14px; border-radius: 9px; margin-bottom: 12px; border: 1px solid; }
.flash.ok { background: color-mix(in srgb, var(--hijau) 12%, var(--kartu)); border-color: color-mix(in srgb, var(--hijau) 40%, transparent); }
.flash.error { background: color-mix(in srgb, var(--merah) 12%, var(--kartu)); border-color: color-mix(in srgb, var(--merah) 40%, transparent); }

.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 14px; box-shadow: var(--bayang); min-width: 0; }
.tile .lbl { font-size: .78rem; color: var(--teks-2); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.tile .val { font-size: 1.3rem; font-weight: 750; margin: 4px 0 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .sub { font-size: .8rem; color: var(--teks-2); }

.bar { position: relative; height: 8px; background: color-mix(in srgb, var(--teks) 9%, transparent); border-radius: 99px; overflow: visible; margin: 6px 0 2px; min-width: 60px; }
.bar > span { display: block; height: 100%; border-radius: 99px; background: var(--utama); }
.bar > span.lebih { background: var(--merah); }
.bar.besar { height: 14px; }
.bar .ideal { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--teks); border-radius: 2px; }
.k-kebutuhan { background: var(--k-kebutuhan) !important; } .k-keinginan { background: var(--k-keinginan) !important; } .k-tabungan { background: var(--k-tabungan) !important; }
.bar > span.k-kebutuhan.lebih, .bar > span.k-keinginan.lebih { outline: 2px solid var(--merah); }
.pola { margin-bottom: 14px; }
.pola-kepala { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; flex-wrap: wrap; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .75rem; color: #fff; background: var(--teks-2); white-space: nowrap; }
.chip.k-pemasukan { background: var(--hijau); }

.catatan { margin: 0; padding-left: 20px; }
.catatan li { margin-bottom: 4px; }

.chart-box { position: relative; height: 260px; }
.chart-box.tinggi { height: 320px; }

.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--teks-2); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--garis); white-space: nowrap; }
.tabel td { padding: 8px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.tabel tfoot th { border-top: 2px solid var(--garis); border-bottom: 0; color: var(--teks); font-size: .85rem; }
.tabel.ringkas td { padding: 5px 8px; }
.tabel tr.muted td { color: var(--teks-2); }
.angka { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lebar-bar { width: 22%; }
.matriks td, .matriks th { padding: 6px; font-size: .82rem; }
.matriks td:first-child { white-space: nowrap; }
.form-tabel td { padding: 4px; }
.form-tabel input, .form-tabel select { padding: 6px 8px; }

.filter { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; align-items: end; }
.filter .aksi { margin: 0; }
.ringkas-baris { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 4px 12px; font-size: .9rem; }
.ringkas-baris .kanan { margin-left: auto; }
.daftar { padding: 4px 0; }
.daftar .tgl { padding: 10px 16px 4px; font-size: .78rem; font-weight: 700; color: var(--teks-2); text-transform: uppercase; letter-spacing: .03em; }
.daftar .item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--garis); color: var(--teks); }
.daftar .item:hover { background: color-mix(in srgb, var(--teks) 4%, transparent); text-decoration: none; }
.item-kiri { min-width: 0; }
.item-kiri .kecil { overflow: hidden; text-overflow: ellipsis; }
.item-judul { font-weight: 600; }
.daftar .item .angka { font-weight: 700; }
.daftar > p { padding: 0 16px; }

.tab-kecil { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px; }
.tab-kecil a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--garis); background: var(--kartu); font-size: .85rem; }
.salin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.salin code { background: var(--kartu); border: 1px solid var(--garis); padding: 8px 10px; border-radius: 8px; word-break: break-all; flex: 1; }
textarea { resize: vertical; }

.login-box { max-width: 380px; margin: 10vh auto 0; text-align: center; padding: 28px; }
.login-box form { text-align: left; display: grid; gap: 12px; margin-top: 16px; }
.login-box h1 { margin-bottom: 4px; }

@media (max-width: 860px) {
  .grid2 { grid-template-columns: 1fr; gap: 0; }
  .filter { grid-template-columns: 1fr 1fr; }
  .filter .aksi { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  body { font-size: 14.5px; }
  .topbar { padding: 8px 12px; }
  .nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--kartu); border-top: 1px solid var(--garis); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; z-index: 20; }
  .nav a { flex-direction: column; gap: 0; font-size: .72rem; padding: 4px 8px; }
  .nav a .ic { font-size: 1.15rem; line-height: 1.2; }
  .keluar { margin-left: auto; }
  .keluar .muted { display: none; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid > label:nth-of-type(3) { grid-column: 1 / -1; }
  .kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 12px; }
  .tile .val { font-size: 1.08rem; }
  .card { padding: 14px; }
  .kepala h1 { font-size: 1.15rem; }
  .kepala > .btn { width: 100%; }
  .pilih-bulan { display: none; }
  .lebar-bar { width: auto; }
  .ringkas-baris .kanan { margin-left: 0; width: 100%; }
  .sembunyi-hp { display: none; }
  .tabel td, .tabel th { padding: 7px 5px; }
}

/* v1.2.0: dompet, rencana */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid3 > .card { margin-bottom: 16px; min-width: 0; }
.card.mini h2 a { color: var(--teks); }
.besar { font-size: 1.3rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.rek-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.rek { display: block; border: 1px solid var(--garis); border-radius: var(--radius); padding: 12px 14px; color: var(--teks); min-width: 0; }
.rek:hover { text-decoration: none; border-color: var(--utama); }
.rek.dipilih { border-color: var(--utama); box-shadow: 0 0 0 1px var(--utama); }
.rek.mati { opacity: .55; }
.rek-nama { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rek-saldo { font-size: 1.25rem; font-weight: 750; font-variant-numeric: tabular-nums; margin: 2px 0; }
.ubah-rek { margin-top: 12px; }
.ubah-rek form { margin-top: 10px; }
.target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 12px; }
.target { display: block; border: 1px solid var(--garis); border-radius: var(--radius); padding: 12px 14px; color: var(--teks); min-width: 0; }
.target:hover { text-decoration: none; border-color: var(--utama); }
.target-kepala { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.target-angka { margin: 6px 0 2px; }
.target-angka .besar { font-size: 1.15rem; }
.target-mini { display: block; color: var(--teks); margin-bottom: 10px; }
.target-mini:hover { text-decoration: none; }
.bar > span.penuh { background: var(--hijau); }
.chip.st-telat { background: var(--merah); }
.chip.st-segera { background: var(--oranye); }
.chip.st-aman, .chip.st-berjalan { background: var(--utama); }
.chip.st-lunas, .chip.st-tercapai { background: var(--hijau); }
.chip.st-lewat { background: var(--oranye); }
.baris-tagihan { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--garis); color: var(--teks); font-size: .9rem; }
.baris-tagihan:hover { text-decoration: none; }
.baris-tagihan .angka { display: flex; gap: 6px; align-items: center; }
.daftar .item .bar { max-width: 260px; }
details.catat:not(.card) { margin-top: 12px; border-top: 1px solid var(--garis); padding-top: 12px; }
.status-tg { display: inline-flex; gap: 6px; align-items: center; }
.span2 { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .grid3 { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 680px) {
  .nav a.sembunyi-hp { display: none; }
  .nav a { padding: 4px 4px; }
  .rek-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .target-grid { grid-template-columns: 1fr; }
  .rek-saldo { font-size: 1.05rem; }
}
@media (max-width: 400px) {
  .rek-grid, .target-grid { grid-template-columns: 1fr; }
}