/* ============ KasKeluarga — gaya utama ============ */
/* Tema default: GELAP (dark, profesional). Varian terang: <html data-theme="light"> */
:root{
  color-scheme:dark;
  --bg:#0b1322; --bg-soft:#16223a; --card:#131e33; --panel:#182741; --hover:rgba(255,255,255,.055);
  --thead:#101b30; --row-hover:rgba(255,255,255,.035); --col-hi:#1b2946;
  --ink:#e7eef9; --ink-2:#c3d0e6; --muted:#93a5c0; --muted-2:#9db0cc;
  --line:#243350; --line-soft:#1d2b47; --input-border:#2c3e61; --input-bg:#0f1a2e;
  --pri:#6ea8ff; --pri-teks:#9cc2ff; --pri-solid:#3b82f6; --pri-solid-hover:#2f6fe0;
  --pri-soft:rgba(110,168,255,.14); --pri-ring:rgba(110,168,255,.3);
  --ok:#34d399; --ok-soft:rgba(52,211,153,.13); --ok-line:rgba(52,211,153,.32);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.13); --warn-line:rgba(251,191,36,.32);
  --bad:#f87171; --bad-soft:rgba(248,113,113,.13); --bad-line:rgba(248,113,113,.34); --bad-solid:#dc2626;
  --info:#38bdf8; --info-soft:rgba(56,189,248,.12); --info-line:rgba(56,189,248,.3); --info-ink:#8fd8fb;
  --seg-bg:#0f1a2e; --seg-ink:#93a5c0; --seg-on:#22304f;
  --track:#1e2c49; --code-bg:#1d2b47; --chip-bg:#1c2a46; --chip-ink:#b9c8de;
  --notif-new:rgba(110,168,255,.08); --mask:rgba(3,7,15,.62);
  --topbar:rgba(13,21,38,.88); --auth-grad:linear-gradient(160deg,#0a1222 0%,#0d1a30 55%,#0a1c22 100%);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 28px -14px rgba(0,0,0,.6);
  --shadow-modal:0 28px 70px -12px rgba(0,0,0,.72);
  --plus-glow:rgba(59,130,246,.5);
  --ring-track:#1e2c49;
  --cat1:#6ea8ff; --cat2:#4ade80; --cat3:#fbbf24; --cat4:#f87171; --cat5:#a78bfa; --cat6:#22d3ee; --cat7:#f472b6; --cat8:#a3e635;
  --radius:14px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f6fb; --bg-soft:#f6f8fc; --card:#fff; --panel:#fbfcfe; --hover:#f3f6fc;
  --thead:#f8fafd; --row-hover:#fafcff; --col-hi:#f6f9fe;
  --ink:#16202e; --ink-2:#3d4c61; --muted:#66788f; --muted-2:#526078;
  --line:#e4e9f2; --line-soft:#eef2f8; --input-border:#d7dfeb; --input-bg:#fff;
  --pri:#2f6fed; --pri-teks:#1f56c9; --pri-solid:#2f6fed; --pri-solid-hover:#1f56c9;
  --pri-soft:#e8f0fe; --pri-ring:rgba(47,111,237,.14);
  --ok:#16a34a; --ok-soft:#e7f7ec; --ok-line:#c4e8cf;
  --warn:#d97706; --warn-soft:#fdf3e2; --warn-line:#f3dcae;
  --bad:#dc2626; --bad-soft:#fdeaea; --bad-line:#f6c9c9; --bad-solid:#dc2626;
  --info:#0e7490; --info-soft:#e6f6f9; --info-line:#c3e7ee; --info-ink:#155e75;
  --seg-bg:#eef2f8; --seg-ink:#526078; --seg-on:#fff;
  --track:#e9eef6; --code-bg:#eef2f9; --chip-bg:#f1f4fa; --chip-ink:#43536a;
  --notif-new:#f7faff; --mask:rgba(16,24,40,.45);
  --topbar:rgba(255,255,255,.92); --auth-grad:linear-gradient(160deg,#eef3fc 0%,#f7fafd 55%,#eef7f1 100%);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 26px -14px rgba(16,24,40,.16);
  --shadow-modal:0 24px 60px -12px rgba(16,24,40,.35);
  --plus-glow:rgba(47,111,237,.55);
  --ring-track:#e8edf5;
  --cat1:#2f6fed; --cat2:#16a34a; --cat3:#f59e0b; --cat4:#ef4444; --cat5:#8b5cf6; --cat6:#06b6d4; --cat7:#ec4899; --cat8:#84cc16;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--pri); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; line-height:1.3}
p{margin:.4em 0}
.ic{vertical-align:-3px; flex:0 0 auto}

/* Tombol ganti tema terang/gelap */
.ic-terang,.ic-gelap{display:inline-flex; align-items:center}
html:not([data-theme="light"]) .ic-gelap{display:none}
html[data-theme="light"] .ic-terang{display:none}

/* ============ Rangka ============ */
.app{min-height:100vh}
.sidebar{
  position:fixed; inset:0 auto 0 0; width:238px; background:var(--card);
  border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:40;
}
.brand{display:flex; align-items:center; gap:10px; padding:18px 18px 14px; border-bottom:1px solid var(--line)}
.brand-logo{width:38px;height:38px;border-radius:11px;background:var(--pri-solid);color:#fff;display:grid;place-items:center}
.brand-nama{font-weight:700; font-size:16px}
.nav{padding:10px 10px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:2px}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  color:var(--ink); font-weight:500; text-decoration:none; position:relative;
}
.nav-item:hover{background:var(--hover); text-decoration:none}
.nav-item.on{background:var(--pri-soft); color:var(--pri-teks)}
.nav-badge{
  margin-left:auto; background:var(--bad-solid); color:#fff; font-size:11px; font-weight:700;
  min-width:19px; height:19px; border-radius:10px; display:grid; place-items:center; padding:0 5px;
}
.sidebar-foot{padding:10px; border-top:1px solid var(--line)}
.ver{color:var(--muted); font-size:11.5px; padding:6px 12px 2px}
.main{margin-left:238px; display:flex; flex-direction:column; min-height:100vh}
.topbar{
  position:sticky; top:0; z-index:30; background:var(--topbar); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; padding:12px 20px;
}
.topbar h1{font-size:17.5px; flex:1}
.topbar-aksi{display:flex; align-items:center; gap:8px}
.konten{padding:20px; max-width:1180px; width:100%; margin:0 auto; flex:1}
.menu-btn{display:none}

/* ============ Tombol ============ */
.btn{
  display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; border-radius:10px;
  padding:9px 15px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; line-height:1.2;
}
.btn:hover{text-decoration:none}
.btn-pri{background:var(--pri-solid); color:#fff}
.btn-pri:hover{background:var(--pri-solid-hover)}
.btn-out{background:var(--card); border-color:var(--line); color:var(--ink)}
.btn-out:hover{background:var(--hover)}
.btn-danger{background:var(--bad-solid); color:#fff}
.btn-sm{padding:6px 11px; font-size:13px; border-radius:9px}
.btn-ic{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; border:1px solid transparent; background:transparent; color:var(--ink); cursor:pointer; position:relative;
}
.btn-ic:hover{background:var(--hover)}
.bell .dot{position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--bad-solid); border:1.5px solid var(--card)}
.link{font-weight:500; font-size:13.5px}
.link-danger{color:var(--bad)}

/* ============ Kartu & grid ============ */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px}
.card-head{display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.card-head h2,.card-head h3{font-size:15.5px; flex:1; display:flex; align-items:center; gap:8px}
.card-body{padding:16px 18px}
.card-body.tanpa-pad{padding:0}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; box-shadow:var(--shadow)}
.stat .lbl{color:var(--muted); font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px}
.stat .val{font-size:20px; font-weight:750; margin-top:5px; letter-spacing:-.2px}
.stat .sub{color:var(--muted); font-size:12px; margin-top:2px}
.stat.ok .val{color:var(--ok)} .stat.bad .val{color:var(--bad)} .stat.pri .val{color:var(--pri)}
.muted{color:var(--muted)} .kecil{font-size:12.5px} .kanan{text-align:right} .tengah{text-align:center}
.mt{margin-top:12px}.mb{margin-bottom:12px}.blok{display:block}

/* ============ Hero kondisi keuangan ============ */
.hero{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.hero-teks{flex:1; min-width:260px}
.hero-status{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; border-radius:999px; padding:6px 14px}
.hero-status.ok{background:var(--ok-soft); color:var(--ok)}
.hero-status.warn{background:var(--warn-soft); color:var(--warn)}
.hero-status.bad{background:var(--bad-soft); color:var(--bad)}
.hero h2{font-size:21px; margin:10px 0 4px}
.ring{
  --val:0; width:128px; height:128px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:conic-gradient(var(--ring-c,var(--pri-solid)) calc(var(--val)*1%), var(--ring-track) 0);
}
.ring-inner{width:98px; height:98px; border-radius:50%; background:var(--card); display:grid; place-items:center; text-align:center; box-shadow:inset 0 0 0 1px var(--line)}
.ring-skor{font-size:27px; font-weight:800; line-height:1}
.ring-sub{font-size:11px; color:var(--muted)}
.ulasan{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.ulasan li{display:flex; gap:10px; padding:11px 13px; border-radius:11px; border:1px solid var(--line); background:var(--panel)}
.ulasan li.l-bad{background:var(--bad-soft); border-color:var(--bad-line)}
.ulasan li.l-warn{background:var(--warn-soft); border-color:var(--warn-line)}
.ulasan li.l-ok{background:var(--ok-soft); border-color:var(--ok-line)}
.ulasan .u-ikon{flex:0 0 auto; margin-top:2px}
.ulasan .u-isi b{display:block; font-size:13.5px}
.ulasan .u-isi span{font-size:12.8px; color:var(--muted)}

/* ============ Tabel ============ */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:13.8px; min-width:560px}
.tbl th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  padding:10px 13px; border-bottom:1px solid var(--line); background:var(--thead); white-space:nowrap;
}
.tbl td{padding:10px 13px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.tbl tr:hover td{background:var(--row-hover)}
.tbl .num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.uang-masuk{color:var(--ok); font-weight:650}
.uang-keluar{color:var(--bad); font-weight:650}
.uang-netral{font-weight:600}
.tgl-sel{font-weight:650; background:var(--col-hi)}
.baris-ket .ket-utama{font-weight:600}
.baris-ket .ket-sub{color:var(--muted); font-size:12.3px}
.bukti-ic{display:inline-flex; align-items:center; gap:4px; color:var(--info); font-size:12.5px}

/* ============ Badge & chip ============ */
.badge{display:inline-block; font-size:11.5px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap}
.badge.ok{background:var(--ok-soft); color:var(--ok)}
.badge.bad{background:var(--bad-soft); color:var(--bad)}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.info{background:var(--pri-soft); color:var(--pri-teks)}
.badge.abu{background:var(--chip-bg); color:var(--muted)}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--chip-bg); border-radius:999px; padding:4px 11px; font-size:12.5px; font-weight:600; color:var(--chip-ink)}

/* ============ Form ============ */
.form{display:flex; flex-direction:column; gap:13px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.form-row.g3{grid-template-columns:1fr 1fr 1fr}
.field{display:flex; flex-direction:column; gap:5px}
.field>span{font-size:12.8px; font-weight:650; color:var(--ink-2)}
.field>span em{font-weight:400; color:var(--muted); font-style:normal}
.input,select.input,textarea.input{
  width:100%; border:1px solid var(--input-border); border-radius:10px; padding:9.5px 12px; font:inherit; font-size:14px;
  background:var(--input-bg); color:var(--ink); outline:none;
}
.input:focus{border-color:var(--pri); box-shadow:0 0 0 3px var(--pri-ring)}
textarea.input{min-height:76px; resize:vertical}
.cek{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; padding:3px 0}
.cek input{margin-top:3px}
.help{background:var(--info-soft); border:1px solid var(--info-line); border-radius:11px; padding:11px 13px; font-size:12.8px; color:var(--info-ink)}
.help b{color:inherit}
.seg{display:flex; background:var(--seg-bg); border-radius:12px; padding:4px; gap:4px}
.seg-item{flex:1; position:relative}
.seg-item input{position:absolute; opacity:0; inset:0}
.seg-item span{display:block; text-align:center; padding:8px 6px; border-radius:9px; font-weight:650; font-size:13.5px; cursor:pointer; color:var(--seg-ink)}
.seg-item input:checked+span{background:var(--seg-on); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.25)}
.seg-item input[value="pemasukan"]:checked+span{color:var(--ok)}
.seg-item input[value="pengeluaran"]:checked+span{color:var(--bad)}
.aksi-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.aksi-form .spacer{flex:1}

/* ============ Progress ============ */
.prog{height:9px; background:var(--track); border-radius:999px; overflow:hidden; margin-top:7px}
.prog i{display:block; height:100%; border-radius:999px; background:var(--pri-solid); transition:width .3s}
.prog i.ok{background:var(--ok)} .prog i.warn{background:var(--warn)} .prog i.bad{background:var(--bad)}
.prog-baris{display:flex; justify-content:space-between; font-size:12.8px; margin-top:5px}
.prog-ket{font-weight:650}

/* ============ Notifikasi ============ */
.notif{display:flex; gap:12px; padding:13px 15px; border-bottom:1px solid var(--line-soft)}
.notif:last-child{border-bottom:0}
.notif.baru{background:var(--notif-new)}
.notif .n-ikon{flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:grid; place-items:center}
.notif .n-ikon.ok{background:var(--ok-soft); color:var(--ok)}
.notif .n-ikon.warn{background:var(--warn-soft); color:var(--warn)}
.notif .n-ikon.bad{background:var(--bad-soft); color:var(--bad)}
.notif .n-ikon.info{background:var(--pri-soft); color:var(--pri-teks)}
.notif .n-isi{flex:1; min-width:0}
.notif .n-isi b{font-size:13.6px}
.notif .n-isi p{margin:3px 0 0; font-size:13px; color:var(--ink-2)}
.notif .n-saran{margin-top:6px; font-size:12.6px; background:var(--panel); border-radius:9px; padding:7px 10px; color:var(--ink-2)}

/* ============ Modal & toast ============ */
.modal{position:fixed; inset:0; display:none; z-index:80}
.modal.open{display:block}
.modal-mask{position:absolute; inset:0; background:var(--mask)}
.modal-box{
  position:relative; margin:6vh auto; width:min(560px, calc(100% - 28px)); background:var(--card);
  border-radius:16px; padding:18px 20px 20px; box-shadow:var(--shadow-modal);
  max-height:88vh; overflow-y:auto;
}
.modal-head{display:flex; align-items:center; margin-bottom:12px}
.modal-head h3{flex:1; font-size:16.5px}
.modal-aksi{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; flex-wrap:wrap}
.toasts{position:fixed; top:14px; right:14px; z-index:100; display:flex; flex-direction:column; gap:8px}
.toast{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--pri); border-radius:11px;
  padding:11px 15px; font-size:13.5px; font-weight:550; box-shadow:var(--shadow); max-width:340px;
}
.toast.t-sukses{border-left-color:var(--ok)} .toast.t-gagal{border-left-color:var(--bad)} .toast.t-info{border-left-color:var(--pri)}

/* ============ Grafik ============ */
.chart{width:100%; height:auto}
.chart-grid{stroke:var(--line-soft)}
.chart-axis{stroke:var(--line)}
.bar-masuk{fill:var(--ok)}
.bar-keluar{fill:var(--bad)}
.chart-lbl{font-size:10.5px; fill:var(--muted); font-family:inherit}
.donut{width:100%; max-width:210px; height:auto; margin:0 auto; display:block}
.donut-track{stroke:var(--track)}
.donut-total{font-size:15px; font-weight:750; fill:var(--ink); font-family:inherit}
.donut-sub{font-size:10px; fill:var(--muted); font-family:inherit}
.legend{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; min-width:230px}
.legend li{display:flex; align-items:center; gap:9px; font-size:13px}
.legend .dotc{width:11px; height:11px; border-radius:4px; flex:0 0 auto}
.legend .lg-nama{font-weight:600; width:132px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.legend .lg-bar{flex:1; height:8px; background:var(--track); border-radius:99px; overflow:hidden}
.legend .lg-bar i{display:block; height:100%; border-radius:99px}
.legend .lg-nilai{white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600}
.legend .lg-nilai em{color:var(--muted); font-style:normal; font-weight:400; font-size:12px}
.donut-flex{display:flex; gap:22px; align-items:center; flex-wrap:wrap}

/* ============ Pager, tabs, kosong ============ */
.pager{display:flex; gap:6px; flex-wrap:wrap; padding:14px 4px 2px; justify-content:center}
.pg{padding:6px 12px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:13px; font-weight:600}
.pg.on{background:var(--pri-solid); border-color:var(--pri-solid); color:#fff}
.pg.off{opacity:.45; pointer-events:none}
.pg.dot{border:0; background:transparent}
.tabs{display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:16px; flex-wrap:wrap}
.tab{padding:9px 16px; font-weight:650; font-size:13.8px; color:var(--muted); border:none; background:none; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px}
.tab.on{color:var(--pri-teks); border-bottom-color:var(--pri)}
.kosong{color:var(--muted); text-align:center; padding:26px 12px; font-size:13.5px}
.kosong .big{font-size:30px; display:block; margin-bottom:6px; color:var(--muted)}

/* ============ Login & install ============ */
.halaman-auth{min-height:100vh; display:grid; place-items:center; padding:22px; background:var(--auth-grad)}
.auth-box{width:min(430px,100%); background:var(--card); border-radius:18px; box-shadow:var(--shadow); border:1px solid var(--line); padding:26px 26px 24px}
.auth-brand{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.auth-brand .brand-logo{width:44px;height:44px;border-radius:13px;background:var(--pri-solid);color:#fff;display:grid;place-items:center}
.auth-brand b{font-size:18px}
.auth-brand span{display:block; color:var(--muted); font-size:12.5px}
.lebar{width:min(760px,100%)}

/* ============ Navigasi bawah (HP) ============ */
.mobile-nav{display:none}
@media (max-width: 940px){
  .menu-btn{display:inline-flex}
  .sidebar{transform:translateX(-105%); transition:transform .22s ease; box-shadow:0 0 0 100vmax rgba(0,0,0,0); width:262px}
  body.sb-open .sidebar{transform:none; box-shadow:24px 0 60px rgba(0,0,0,.45)}
  .main{margin-left:0}
  .konten{padding:15px 14px 90px}
  .topbar{padding:11px 14px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .mobile-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--card);
    border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around; align-items:center;
  }
  .mobile-nav a{
    display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10.5px; font-weight:650;
    color:var(--muted); text-decoration:none; padding:4px 10px; min-width:56px;
  }
  .mobile-nav a.on{color:var(--pri)}
  .mobile-plus{
    width:52px; height:52px; border-radius:16px; border:none; background:var(--pri-solid); color:#fff;
    display:grid; place-items:center; margin-top:-24px; box-shadow:0 10px 22px -6px var(--plus-glow); cursor:pointer;
  }
  .btn-catat .label{display:none}
  .btn-catat{padding:9px 12px}
  .legend .lg-nama{width:96px}
}
@media (max-width: 600px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .form-row,.form-row.g3{grid-template-columns:1fr}
  .stat .val{font-size:18.5px}
  .hero{gap:14px}
  .ring{width:108px;height:108px}
  .ring-inner{width:82px;height:82px}
  .ring-skor{font-size:22px}
  .topbar h1{font-size:15.5px}
  .ulasan .u-isi b{font-size:13px}
}
/* ============ Utilitas tambahan ============ */
.baris-antara{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.kotak-info{border:1px dashed var(--line); border-radius:12px; padding:12px 13px; background:var(--panel)}
.langkah{margin:0 0 10px; padding-left:18px; font-size:13.5px; line-height:1.8}
.help code,.langkah code{background:var(--code-bg); padding:1px 5px; border-radius:5px; font-size:12.5px}
.input-rupiah{font-variant-numeric:tabular-nums}
.chart-ket{display:flex; gap:18px; justify-content:center; font-size:12.6px; color:var(--muted); margin-top:8px; flex-wrap:wrap}
.chart-ket .dotc{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.buku-akun{border:1px solid var(--line); border-radius:12px; padding:12px 15px; margin-bottom:10px; background:var(--card)}
.buku-akun summary{cursor:pointer; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.buku-akun[open] summary{margin-bottom:4px; border-bottom:1px solid var(--line-soft); padding-bottom:8px}
@media print{
  :root{
    color-scheme:light;
    --bg:#fff; --bg-soft:#f6f8fc; --card:#fff; --panel:#fbfcfe; --hover:#f3f6fc;
    --thead:#f8fafd; --row-hover:#fafcff; --col-hi:#f6f9fe;
    --ink:#16202e; --ink-2:#3d4c61; --muted:#66788f; --muted-2:#526078;
    --line:#e4e9f2; --line-soft:#eef2f8;
    --shadow:none; --shadow-modal:none;
  }
  .sidebar,.topbar,.mobile-nav,.toasts,.modal,.no-print{display:none!important}
  .main{margin:0}
  .konten{padding:0; max-width:none}
  .card{box-shadow:none; break-inside:avoid}
  body{background:#fff; font-size:12.5px}
}