/* Rukun — responsive layouts on the Warm Household Harmony design system. */

:root {
  --money-in: #006c49;
  --money-out: #a71923;
  --tap: 44px; /* target sentuh minimum */
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--color-accent-700); }

.ic { width: 1em; height: 1em; display: block; flex-shrink: 0; }
.small { font-size: 12.5px; }
.tiny { font-size: 10.5px; }
.text-muted { opacity: 1; }

/* ---------- kerangka ---------- */

.shell { min-height: 100dvh; }

.main {
  padding: max(20px, env(safe-area-inset-top)) 20px calc(84px + env(safe-area-inset-bottom));
  max-width: 760px;
  margin: 0 auto;
}

.sidebar { display: none; }

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  display: grid;
  /* Five destinations keep the dock readable on small phones. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--tap);
  padding: 8px 2px;
  font-size: 10px;
  color: var(--color-text);
  opacity: 0.6;
  text-decoration: none;
}
/* Label tab tidak boleh membungkus jadi dua baris: tingginya lalu berbeda-beda
   dan seluruh baris tab ikut bergoyang. Yang tidak muat dipotong, bukan
   dilipat. */
.tabbar a span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabbar a .ic { width: 19px; height: 19px; }
.tabbar a.on { opacity: 1; color: var(--color-accent-700); }

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
}
/* Judul dibiarkan turun ke baris berikutnya, bukan dipotong. Sebagai anak
   flex, min-width bawaannya auto — ia menolak menyusut di bawah lebar teksnya
   dan meluber keluar layar, lalu terpotong di tepi tanpa tanda apa pun. Nama
   seperti "SP Funds S&P 500 Sharia Industrial Exchange Traded Fund" kehilangan
   justru bagian yang membedakannya dari saudaranya. */
.topbar h5 {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}
.back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--color-divider);
  border-radius: 50%;
  color: var(--color-text);
}
.back .ic { width: 16px; height: 16px; }

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 216px 1fr; }
  .tabbar { display: none; }
  .main { padding: 32px 40px; max-width: 940px; margin: 0; }
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    height: 100dvh;
    position: sticky;
    top: 0;
    padding: 24px 16px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-divider);
  }
  .sidebar nav { display: flex; flex-direction: column; gap: 2px; }
  .sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--color-text);
    opacity: 0.75;
    text-decoration: none;
  }
  .sidebar nav a .ic { width: 16px; height: 16px; }
  .sidebar nav a.on {
    opacity: 1;
    color: var(--color-accent-700);
    background: var(--color-accent-100);
  }
  .sidebar-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    padding-left: 10px;
  }
}

.brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.linkish {
  all: unset;
  cursor: pointer;
  color: var(--color-accent-700);
  font-size: 12.5px;
  width: fit-content;
}

/* ---------- susunan umum ---------- */

.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* Alasan min-width yang sama dengan .topbar h5 di atas. */
.page-head h4 { margin: 0; min-width: 0; overflow-wrap: break-word; }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.sec-head h6 { margin: 0; }
.group-head { margin: 0 0 6px; }

.alert {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--money-out);
  border-radius: var(--radius-md);
  color: var(--money-out);
  font-size: 13px;
}
.banner {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--color-accent-700);
  font-size: 12px;
}
.banner-teks { margin: 0; }
/* Pesan mentah dari sumbernya: kode status, URL, cuplikan balasannya. Ditulis
   monospace dan boleh dipotong di tengah kata — ia memang bukan kalimat, dan
   URL panjang tanpa ini melebarkan seluruh halaman. */
.banner-sebab {
  margin: 6px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  opacity: 0.75;
  overflow-wrap: anywhere;
}

.head-aksi { display: flex; align-items: center; gap: var(--space-2); }
.note, .empty {
  margin: 0;
  font-size: 13px;
  padding: var(--space-3) 0;
}
.hint { margin: 4px 0 0; font-size: 12px; color: var(--color-text-muted); }

/* ---------- dashboard ---------- */

.greet h4 { margin: 0; }

/* Peringatan tagihan di puncak dashboard. Diberi tepi merah dan latar tipis,
   bukan blok penuh: yang perlu menonjol tenggatnya, bukan warnanya. */
.perhatian { display: flex; flex-direction: column; gap: 8px; }
.perhatian-baris {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--money-out);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--money-out) 6%, transparent);
}
.perhatian-teks { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.perhatian-nama { font-size: 13.5px; }
.perhatian-nominal {
  font-family: var(--font-heading);
  font-size: 16px;
  white-space: nowrap;
}
.big-figure { font-family: var(--font-money); font-size: clamp(26px, 7.8vw, 36px); font-weight: 700; color: var(--color-accent-700); line-height: 1.1; }
.mid-figure { font-family: var(--font-money); font-size: 20px; font-weight: 700; }

.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary .sum-main { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .summary { grid-template-columns: 1.3fr 1fr 1fr; }
  .summary .sum-main { grid-column: auto; }
  .big-figure { font-size: 34px; }
  .mid-figure { font-size: 26px; }
}

.report-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.report-flow h6 { margin: 0; }
.report-flow-row + .report-flow-row { margin-top: var(--space-3); }
.report-flow-label { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.report-flow-label strong { font-weight: 500; }
.report-track { height: 8px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--color-neutral-200); }
.report-track span { display: block; height: 100%; min-width: 0; border-radius: inherit; }
.report-track .t-in { background: var(--money-in); }
.report-track .t-out { background: var(--money-out); }
.report-net { justify-content: center; }
.report-net p { margin: 0; }
.report-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.report-kpis .card { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.report-kpis strong { font-size: 18px; overflow-wrap: anywhere; }
.report-insight { margin: 12px 0 0; }
.report-budget > p { margin: -4px 0 12px; }
.report-budget-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 12px; padding: 10px; border-radius: var(--radius-md); background: var(--color-neutral-200); color: var(--color-text); text-decoration: none; }
.report-budget-row progress { grid-column: 1 / -1; }
.report-budget-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.report-budget-amount { white-space: nowrap; font-size: 12px; }
.report-budget-status { grid-column: 1 / -1; text-align: right; }
.report-budget-row:hover .report-budget-name { text-decoration: underline; }
.report-empty { margin: 8px 0; padding: 10px 0; color: var(--color-neutral-600); font-size: 13px; }
.report-chart { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; }
.report-pie { display: block; width: 112px; height: 112px; max-width: 100%; cursor: pointer; }
.report-legend { min-width: 0; }
.report-legend-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 5px 0; color: var(--color-text); text-decoration: none; font-size: 12px; }
.report-legend-row + .report-legend-row { border-top: 1px solid var(--color-divider); }
.report-legend-row:hover .report-legend-name { text-decoration: underline; }
.report-legend-row strong { font-weight: 500; white-space: nowrap; }
.report-legend-share { color: var(--color-neutral-600); white-space: nowrap; }
.report-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-swatch { width: 10px; height: 10px; border-radius: 50%; }
.pie-0 { stroke: #0d6e6e; background: #0d6e6e; }
.pie-1 { stroke: #5b9277; background: #5b9277; }
.pie-2 { stroke: #b85e55; background: #b85e55; }
.pie-3 { stroke: #6d83ad; background: #6d83ad; }
.pie-4 { stroke: #98729d; background: #98729d; }
.pie-5 { stroke: #718c52; background: #718c52; }
.pie-6 { stroke: #cc8847; background: #cc8847; }
.pie-7 { stroke: #4f8b91; background: #4f8b91; }
@media (min-width: 700px) {
  .report-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-summary { grid-template-columns: minmax(0, 1fr) minmax(190px, .55fr); }
}

.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  min-height: var(--tap);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-size: 11px;
  text-align: center;
  color: var(--color-text);
  text-decoration: none;
}
.quick .ic { width: 18px; height: 18px; }

/* Di layar lebar, transaksi dan dompet berdampingan seperti di handoff desain;
   di layar sempit keduanya menumpuk. */
.dash-cols { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 900px) {
  .dash-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-6); align-items: start; }
  .dash-cols .wallet-strip { flex-direction: column; overflow: visible; }
  .dash-cols .card.mini { width: auto; }
}

.wallet-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.wallet-strip::-webkit-scrollbar { display: none; }
.card.mini {
  flex-shrink: 0;
  width: 138px;
  gap: 6px;
  text-decoration: none;
  color: var(--color-text);
}
.mini-name { font-size: 12.5px; }
.mini-amt { font-size: 13.5px; }

/* Bilah per kategori: latar berwarna menunjukkan porsi terhadap kategori
   terbesar, teksnya tetap di atasnya supaya tidak perlu legenda terpisah. */
.cat-cols { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 900px) {
  .cat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
}
.cat-col-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  margin-bottom: var(--space-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-divider);
}
.cat-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
  font-size: 13px;
}
.cat-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-md); }
.cat-bar-name, .cat-bar-amt { position: relative; }
.cat-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-bar-amt { flex-shrink: 0; }

/* ---------- kartu kredit ---------- */

.kk { gap: var(--space-2); }
.kk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kk-nama { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.kk-nama .ic { width: 16px; height: 16px; }
.kk-angka { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.kk-utama { font-family: var(--font-money); font-size: 24px; font-weight: 700; }
.kk-sisa { font-family: var(--font-money); font-size: 18px; opacity: 0.75; }
.kk-kaki { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kk-telat { border-color: var(--money-out); }
.kk-segera { border-color: var(--color-accent); }
.kk-limit { display: flex; flex-direction: column; gap: 5px; }
.kk-bar { height: 6px; border-radius: 999px; background: var(--color-neutral-300); overflow: hidden; }
.kk-bar-isi { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); }
.kk-bar-tipis { background: var(--money-out); }
.kk-strip { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 900px) {
  .kk-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* ---------- hutang dan piutang ---------- */

.pihak { gap: 6px; text-decoration: none; color: var(--color-text); }
.pihak-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pihak-baris { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* Tiga kolom di kartu selebar layar ponsel menyisakan ruang sempit, dan angka
   sebesar .mid-figure akan patah di tanda minusnya. */
.pihak-angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.pihak-angka .mid-figure { font-size: 15px; white-space: nowrap; }
@media (min-width: 480px) {
  .pihak-angka { gap: var(--space-3); }
  .pihak-angka .mid-figure { font-size: 19px; }
}
.aksi-pihak { display: flex; gap: 10px; }
.aksi-pihak .btn { flex: 1; justify-content: center; }
.kelola { margin-top: var(--space-6); }
.kelola summary { cursor: pointer; padding: var(--space-2) 0; }
.kelola form { margin-top: var(--space-3); }

/* ---------- baris transaksi ---------- */

.rows { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  min-height: var(--tap);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
  text-decoration: none;
}
.row-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent-100);
}
.row-ic .ic { width: 16px; height: 16px; }
.t-out { background: color-mix(in srgb, var(--money-out) 14%, transparent); color: var(--money-out); }
.t-in { background: color-mix(in srgb, var(--money-in) 14%, transparent); color: var(--money-in); }
.t-neutral { background: var(--color-accent-100); color: var(--color-accent-700); }

.row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.row-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.row-sub { font-size: 11px; }
.row-amt { font-size: 14px; font-weight: 600; font-family: var(--font-money); flex-shrink: 0; }

.cat-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cat-item-expense { grid-template-columns: minmax(0, 1fr) auto; }
.cat-item-deletable { grid-template-columns: minmax(0, 1fr) auto auto; }
.cat-item-deletable > form[action$="/hapus"] { grid-column: 3; grid-row: 1; }
.cat-item > .row-main { min-width: 0; }
.cat-item form { display: flex; align-items: center; }
.cat-budget { gap: 8px; }
.cat-budget label { white-space: nowrap; }
.cat-budget .input { width: 105px; min-width: 0; }
.cat-budget .btn { min-height: 36px; padding: 6px 10px; }
@media (max-width: 599px) {
  .cat-item { grid-template-columns: minmax(0, 1fr) auto; }
  .cat-budget { grid-column: 1 / -1; justify-content: flex-end; }
  .cat-budget label { margin-right: auto; }
  .cat-item-deletable > form[action$="/hapus"] { grid-column: 2; grid-row: 1; }
}
progress { width: 100%; accent-color: var(--color-accent-700); }

.budget-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.budget-summary .card { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.budget-summary strong { font-size: 19px; overflow-wrap: anywhere; }
.budget-total { grid-column: 1 / -1; }
.budget-item { display: flex; flex-direction: column; gap: 8px; }
.budget-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.budget-item-head > strong { min-width: 0; overflow-wrap: anywhere; }
.budget-value { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; }
.budget-item-foot { text-align: right; }
.budget-edit { border-top: 1px solid var(--color-divider); padding-top: 8px; }
.budget-edit > summary { display: flex; cursor: pointer; list-style: none; font-size: 12px; }
.budget-edit > summary::-webkit-details-marker { display: none; }
.budget-edit > summary::before { content: "＋"; margin-right: 5px; }
.budget-edit[open] > summary::before { content: "−"; }
.budget-edit .cat-budget { display: flex; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.budget-edit .cat-budget label { margin-right: auto; }
.budget-edit .cat-budget .input { flex: 1; width: 120px; }
@media (min-width: 600px) {
  .budget-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .budget-total { grid-column: auto; }
}

.anggota-item { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.anggota-item form { display: flex; margin-left: auto; }
/* Anggota yang aksesnya dicabut tetap terbaca, hanya mundur ke belakang:
   namanya masih menempel di transaksi yang pernah dicatatnya. */
.anggota-mati .row-title { text-decoration: line-through; }
.anggota-mati { opacity: 0.7; }

.account-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.account-grid > * { min-width: 0; }
.account-period-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.account-period-form label { grid-column: 1 / -1; }
.account-profile form { margin-top: auto; }
@media (min-width: 700px) {
  .account-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
}

.wallet-item { flex-direction: row; align-items: center; gap: 12px; }
.wallet-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14px; }
.wallet-item form { display: flex; }

/* Baris dompet yang bisa dibuka, dipakai akun kredit. <details> mengurus
   buka-tutupnya sendiri, jadi tidak ada JS di sini — hanya segitiga bawaannya
   yang diganti chevron supaya seragam dengan ikon lain. */
.wallet-drop { gap: 0; }
.wallet-drop > summary { display: flex; cursor: pointer; list-style: none; }
.wallet-drop > summary::-webkit-details-marker { display: none; }
/* Chevron dan tombol hapus menempati kolom terakhir yang sama, satu per jenis
   baris. Kotaknya disamakan dengan .btn-icon: chevron yang cuma selebar
   ikonnya menggeser nominal di sebelah kiri sejauh selisihnya, dan dua baris
   bersebelahan lalu berhenti di garis yang berbeda. */
.wallet-drop .chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.15s;
}
.wallet-drop[open] .chev { transform: rotate(180deg); }
.wallet-isi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

/* ---------- form ---------- */

.seg { display: flex; width: 100%; }
.seg .seg-opt { flex: 1; justify-content: center; min-height: var(--tap); }
a.seg-opt {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
}
a.seg-opt.on { background: var(--color-accent-100); color: var(--color-accent-700); }

.filter-row {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.tx-toolbar { display: flex; align-items: center; gap: var(--space-2); }
.tx-search {
  display: flex;
  flex: 1;
  min-width: 0;
}
.tx-search .input { width: 100%; min-width: 0; }
.tx-filter-menu { flex: 0 0 auto; }

/* Pemilih periode: panah tetap menempel pada rentang yang digesernya. */
.periode {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.periode-controls { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.periode-label {
  font-family: var(--font-heading);
  font-size: clamp(14px, 4vw, 18px);
  white-space: nowrap;
}
.periode-semua { margin-left: auto; }
.tx-filter-menu .menu-pop { left: auto; right: 0; width: min(320px, calc(100vw - 40px)); }

/* Menu gantung yang label-nya sekaligus tombolnya, dipakai pemilih periode dan
   pemilih mode pencatatan. Digantung di <details> supaya buka-tutupnya jalan
   tanpa JS. Segitiga bawaannya diganti chevron supaya seragam dengan ikon lain,
   dan panelnya mengambang di atas isi halaman — bukan mendorongnya turun,
   karena yang sedang dilihat orangnya justru isi itu. */
.menu { position: relative; }
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .ic {
  width: 15px;
  height: 15px;
  opacity: 0.5;
  transition: transform 0.15s;
}
.menu[open] > summary .ic { transform: rotate(180deg); }
.menu-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  /* Panel mengambang harus buram: .card sendiri berlatar transparan, dan daftar
     di bawahnya akan tembus. */
  background: var(--color-surface);
  max-width: calc(100vw - 40px);
}
.menu-pop form { display: flex; flex-direction: column; gap: var(--space-3); }
.menu-pop-catatan { margin: 0; }
.menu-pop-kaki { display: flex; align-items: center; gap: var(--space-3); }
/* Menu yang jangkarnya menempel di tepi kanan: dibuka ke kiri, kalau tidak
   panelnya menjulur keluar layar. */
.menu-pop-kanan { left: auto; right: 0; }
.tx-date-picker { width: min(760px, calc(100vw - 40px)); max-height: calc(100dvh - 120px); overflow-y: auto; }
.tx-date-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-3); }
.tx-date-presets { display: flex; flex-direction: column; gap: 2px; }
.tx-date-presets button {
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.tx-date-presets button:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.tx-calendar { min-width: 0; }
.tx-calendar-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px; }
.tx-calendar-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); min-width: 0; }
.tx-calendar-month h5 { margin: 4px 0 12px; text-align: center; text-transform: capitalize; }
.tx-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.tx-calendar-weekday { padding: 6px 0; color: var(--color-text-muted); font-size: 12px; }
.tx-calendar-day {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.tx-calendar-day.outside { color: var(--color-text-muted); opacity: .45; }
.tx-calendar-day.in-range { border-radius: 0; background: var(--color-accent-100); }
.tx-calendar-day.selected { border-radius: 50%; background: var(--color-accent-700); color: white; }
.tx-calendar [data-calendar-selection] { margin: var(--space-2) 0 0; text-align: center; }
@media (max-width: 479px) {
  .tx-date-body { grid-template-columns: minmax(0, 1fr); }
  .tx-date-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-date-presets button { font-size: 12px; }
  .tx-calendar-months { grid-template-columns: minmax(0, 1fr); }
  .tx-calendar-month:not(:first-child) { display: none; }
}
.menu-list { display: flex; flex-direction: column; }
.menu-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  min-height: var(--tap);
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: 13.5px;
}
.menu-list a.on { color: var(--color-accent-700); background: var(--color-accent-100); }

/* Kepala form pencatatan: pemilih jenis selebar layar, pemilih mode menggantung
   di kanan bawahnya sebagai jalan keluar dari alur biasa.
   Bertumpuk, bukan berdampingan: di 375px keduanya berebut lebar yang sama dan
   "Pengeluaran" ikut terpotong demi label mode yang jauh lebih jarang dibaca. */
.form-head { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.form-head .seg { width: 100%; }
.form-head .menu > summary { white-space: nowrap; }

/* Pemilih jenis berdiri sendiri di atas form, bukan bagian dari .stack-nya. */
.seg + form, .form-head + form { margin-top: var(--space-4); }

/* Centang "terapkan ke seluruh rangkaian". Kotaknya diperbesar dan seluruh
   barisnya bisa ditekan: di ponsel kotak centang bawaan lebih kecil dari target
   sentuh minimum. */
.pilih-semua {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  font-size: 12.5px;
  cursor: pointer;
}
.pilih-semua input { width: 18px; height: 18px; flex-shrink: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip .tag {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--color-divider);
  background: transparent;
}
.chip input:checked + .tag {
  border-color: var(--color-accent);
  color: var(--color-accent-700);
  background: var(--color-accent-100);
}
.chip input:focus-visible + .tag { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.input-affix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.input-affix .affix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
  opacity: 0.6;
  border-right: 1px solid var(--color-divider);
  white-space: nowrap;
}
.input-affix .input { border: none; border-radius: 0; flex: 1; min-width: 0; }
/* Affix yang duduk di belakang kolom, mis. "bulan": garisnya pindah ke sisi
   yang menghadap kolomnya, kalau tidak ia menempel di tepi luar kotak. */
.input-affix .affix:last-child { border-right: none; border-left: 1px solid var(--color-divider); }

.siklus { display: flex; gap: var(--space-2); }
.siklus .input-affix { flex: 1; }

.rate-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rate-row .input-affix { flex: 1; min-width: 140px; }

.danger-row { margin-top: var(--space-6); }

/* ---------- detail ---------- */

.detail-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; text-align: center; }
.detail-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.detail-ic .ic { width: 24px; height: 24px; }
.detail-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; }
.detail-card { gap: 10px; }
.dl { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.dl-long { text-align: right; max-width: 60%; }
.detail-actions { display: flex; gap: 10px; }
.detail-actions > * { flex: 1; display: flex; }
.detail-actions .btn { flex: 1; justify-content: center; }

/* ---------- login ---------- */

.auth-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card { width: 100%; max-width: 380px; gap: var(--space-3); }
.auth-brand { font-size: 26px; }
.auth-alt { margin: 0; }

/* Utilitas warna uang ditaruh paling akhir supaya menang atas komponen yang
   punya warna sendiri. .big-figure mewarnai dirinya dengan aksen, dan tanpa
   urutan ini selisih hutang yang negatif akan tampil emas, bukan merah. */
.m-in { color: var(--money-in); }
.m-out { color: var(--money-out); }
.m-accent { color: var(--color-accent-700); }
.m-neutral { color: var(--color-text); }

/* Varian merah dari .btn-primary, untuk tindakan yang menghapus. Berkotak,
   bukan polos: tombol tanpa bingkai di sebelah tombol berbingkai tetap terbaca
   sebagai tulisan biasa, dan yang satu ini justru yang paling perlu terlihat
   sebagai tombol sebelum ditekan. Ditaruh di sini, bukan di rukun.css,
   karena --money-out bagian dari palet uang yang tinggal di berkas ini. */
.btn-danger { color: var(--money-out); border-color: var(--money-out); }
.btn-danger:hover { background: color-mix(in srgb, var(--money-out) 12%, transparent); }
.btn-danger:active { background: color-mix(in srgb, var(--money-out) 22%, transparent); }

.theme-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-switch button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 10px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-surface); font: inherit; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.theme-preview { display: flex; align-items: center; gap: 2px; width: 32px; height: 24px; padding: 3px; border: 1px solid var(--color-divider); border-radius: 7px; background: #f4f4f1; }
.theme-preview i { width: 7px; height: 14px; border-radius: 4px; background: #435955; }
.theme-preview i:nth-child(2) { height: 18px; background: #eae9e9; }
.theme-preview i:nth-child(3) { background: #2f4541; }
.theme-preview-ceria { background: #f9f9f6; border-color: #bec9c8; }
.theme-preview-ceria i { background: #0d6e6e; }
.theme-preview-ceria i:nth-child(2) { background: #6cf8bb; }
.theme-preview-ceria i:nth-child(3) { background: #005454; }
.account-overview { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .account-overview { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
}

/* ---------- investasi ---------- */

/* Nilai sekarang berdiri paling depan, selisih tepat di bawahnya. Yang ingin
   diketahui saat membuka halaman ini bukan berapa yang sudah dikeluarkan,
   melainkan apakah yang dikeluarkan itu sedang bertambah atau menyusut. */
.inv-selisih {
  margin: 0;
  font-size: 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.inv-row {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
  text-decoration: none;
}
.inv-angka {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  text-align: right;
}
.inv-nilai { font-size: 14px; }

/* Kotak centang berdampingan dengan labelnya, bukan di atasnya seperti label
   kolom lain. */
.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* ---------- Stitch: Warm Household Harmony ---------- */
.main { padding: max(16px, env(safe-area-inset-top)) 16px calc(112px + env(safe-area-inset-bottom)); max-width: 640px; min-width: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px; background: white; }
.skip-link:focus { top: 12px; }
.family-header { display: flex; gap: 12px; align-items: center; margin: -16px -16px 20px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--color-divider); }
.family-header > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.family-header strong { color: var(--color-accent-700); font-size: 16px; overflow-wrap: anywhere; }
.family-avatar, .family-account { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; flex-shrink: 0; }
.family-avatar { background: var(--color-accent-100); border: 1px solid var(--color-accent-200); }
.family-avatar .ic { width: 22px; height: 22px; }
.family-account .ic { width: 21px; height: 21px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--color-accent-700); text-decoration: none; font-size: 26px; }
.brand > .ic { width: 38px; height: 38px; padding: 8px; background: var(--color-accent-100); border-radius: 12px; }
.brand small { display: block; color: var(--color-text-muted); font: 400 11px var(--font-body); letter-spacing: 0; }
.greet h4 { font-size: 16px; letter-spacing: -.01em; margin-bottom: 2px; }
.greet .small { font-size: 12px; }
.stack-lg { gap: 20px; }
.page-head p { margin: 4px 0 0; }
.sec-head { gap: 12px; flex-wrap: wrap; }
.sec-head a { font-weight: 600; text-decoration: none; }
.head-aksi { flex-wrap: wrap; }
.balance-hero { position: relative; padding: 24px; border: 0; border-radius: 24px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-800)); color: #fff; box-shadow: 0 10px 24px rgb(13 110 110 / 18%); }
.balance-hero .big-figure, .balance-hero .mid-figure, .balance-hero > strong { color: white; line-height: 1.3; overflow-wrap: anywhere; }
.balance-hero .card-body, .balance-hero .card-kicker, .balance-hero .text-muted, .balance-hero .hint { color: #c6e7e6; opacity: 1; }
.balance-hero .inv-selisih.m-in { color: #9dedc8; }
.balance-hero .inv-selisih.m-out, .balance-hero .mid-figure.m-out { color: #ffd6d4; }
.balance-hero .mid-figure.m-in { color: #b2f5d4; }
.balance-hero .big-figure { margin: 8px 0 0; }
.hero-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #c6e7e6; }
.hero-badge { background: rgb(255 255 255 / 14%); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 10px; }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 12px; margin-top: 10px; border-top: 1px solid rgb(255 255 255 / 15%); }
.hero-stats > div { display: flex; align-items: center; gap: 8px; padding: 10px; background: rgb(0 32 32 / 22%); border-radius: 16px; min-width: 0; }
.hero-stats .ic { width: 24px; height: 24px; flex-shrink: 0; }
.hero-stats span { font-size: 11px; min-width: 0; color: #c6e7e6; }
.hero-stats strong { display: block; font: 600 clamp(11px, 3.1vw, 15px)/1.5 var(--font-money); color: white; overflow-wrap: anywhere; }
.quick { gap: 8px; }
.quick a { background: white; border-color: var(--color-divider); border-radius: 20px; box-shadow: var(--shadow-sm); padding: 12px 4px; gap: 6px; font-size: 12px; }
.q-ic { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 16px; }
.quick .q-ic .ic { width: 23px; height: 23px; }
.quick small { font-size: 10px; color: var(--color-text-muted); }
.t-warning { background: #fff5cf; color: #9a4c00; }
.t-in { background: #dcfff0; color: var(--money-in); }
.t-out { background: #fff0f0; color: var(--money-out); }
.t-neutral { background: #e8f5f1; color: var(--color-accent-700); }
.perhatian-baris { background: #fffbeb; border: 1px solid #f9d885; border-radius: 20px; padding: 16px; align-items: flex-start; flex-wrap: wrap; }
.perhatian-teks { gap: 4px; }
.perhatian .card-kicker { color: #9a4c00; font-size: 10px; }
.perhatian .btn { background: #fff1cc; color: #8d4600; }
.perhatian .m-out { font-family: var(--font-money); }
.card.mini { width: 180px; padding: 16px; }
.mini-name { font-weight: 600; overflow-wrap: anywhere; }
.mini-amt { font-family: var(--font-money); font-weight: 700; }
.subscription-preview { flex-direction: row; align-items: center; gap: 12px; text-decoration: none; color: var(--color-text); }
.subscription-preview > strong { font-family: var(--font-money); }
.rows { background: white; border: 1px solid var(--color-divider); border-radius: 20px; box-shadow: var(--shadow-sm); padding: 0 16px; overflow: hidden; }
.row { padding: 18px 0; gap: 10px; flex-wrap: wrap; }
.row:last-child { border-bottom: 0; }
.row-ic { border-radius: 16px; width: 44px; height: 44px; }
.row-ic .ic { width: 21px; height: 21px; }
.row-main { gap: 3px; }
.row-sub { font-size: 11px; }
.row-amt { max-width: 48%; overflow-wrap: anywhere; }
.recorded-by { font-size: 10px; font-weight: 600; color: var(--color-accent-700); background: var(--color-accent-100); border-radius: 999px; width: fit-content; padding: 2px 8px; }
.group-head { margin: 8px 0 12px; font-size: 13px; color: var(--color-text-muted); font-weight: 600; }
.row-title { line-height: 1.5; }
.big-figure, .mid-figure, .wallet-amt, .inv-angka, .report-kpis strong, .budget-summary strong, .cat-bar-amt, .report-legend-row strong { font-family: var(--font-money); font-variant-numeric: tabular-nums; }
.big-figure, .mid-figure, .kk-utama, .kk-sisa { overflow-wrap: anywhere; }
.topbar { margin: -16px -16px 24px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--color-divider); gap: 12px; }
.topbar h5 { flex: 1; font-size: 18px; }
.back { width: 44px; height: 44px; background: var(--color-neutral-200); border: 0; text-decoration: none; }
.back .ic { width: 20px; height: 20px; }
.has-back .tabbar { display: none; }
.has-back .main { padding-bottom: 32px; }
.tabbar { background: rgb(255 255 255 / 96%); border-radius: 24px 24px 0 0; padding: 8px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-divider); box-shadow: 0 -4px 24px rgb(13 110 110 / 6%); }
.tabbar > a { opacity: 1; color: var(--color-text-muted); font-size: 10px; min-height: 56px; gap: 5px; }
.tabbar > a.on { font-weight: 700; }
.tabbar a .ic { width: 22px; height: 22px; }
.catat-menu { position: static; }
.catat-menu > summary { display: flex; flex-direction: column; gap: 4px; color: var(--color-accent-700); min-height: 56px; font-size: 10px; margin-top: -26px; }
.catat-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: 4px solid #fff; border-radius: 50%; background: var(--color-accent); color: white; box-shadow: 0 6px 18px rgb(13 110 110 / 28%); }
.catat-menu > summary .ic { width: 28px; height: 28px; opacity: 1; }
.catat-menu[open] > summary .ic { transform: rotate(45deg); }
.catat-sheet { position: absolute; top: auto; bottom: calc(100% + 12px); left: 12px; right: 12px; width: auto; max-width: none; padding: 20px; box-shadow: var(--shadow-lg); border-radius: 24px; max-height: calc(100dvh - 140px); overflow-y: auto; }
.catat-sheet .sec-head { margin: 0; }
.catat-sheet > a { flex-direction: row; text-align: left; padding: 12px; color: var(--color-text); gap: 12px; border-radius: 16px; font-size: 14px; }
.catat-sheet > a:hover { background: var(--color-neutral-100); }
.catat-sheet > a > span:last-child { flex: 1; }
.catat-sheet small { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.more-item { text-decoration: none; color: var(--color-text); padding: 16px; }
.more-item:hover, .more-account:hover { border-color: var(--color-accent); }
.more-item strong { font-size: 14px; }
.more-account { display: flex; flex-direction: row; align-items: center; gap: 12px; text-decoration: none; color: var(--color-text); }
.ledger-form { max-width: 580px; margin-inline: auto; gap: 20px; }
.ledger-form > .field { padding: 18px; border: 1px solid var(--color-divider); background: white; border-radius: 20px; box-shadow: var(--shadow-sm); }
.ledger-form > .field > label { color: var(--color-text); }
.amount-entry { text-align: center; padding: 24px 20px !important; }
.amount-entry > label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted) !important; }
.amount-entry > label .text-muted { display: block; text-transform: none; font-size: 10px; margin-top: 4px; }
.amount-entry .input-affix { border: 0; border-radius: 0; align-items: center; justify-content: center; background: transparent; }
.amount-entry .input { background: transparent; font: 700 clamp(26px, 8vw, 36px)/1.3 var(--font-money); padding: 12px 4px; text-align: center; }
.amount-entry .affix { color: var(--color-accent-700); font: 600 22px var(--font-money); opacity: 1; padding: 0 6px; border: 0; }
.input-affix { background: var(--color-neutral-100); }
.input-affix:focus-within { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.input-affix .input:focus-visible { outline: 0; }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chip .tag { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; min-height: 80px; padding: 12px 6px; border-radius: 16px; text-align: center; font-size: 11px; background: white; overflow-wrap: anywhere; }
.chip .tag .ic { width: 22px; height: 22px; }
.chip input:checked + .tag { border-width: 2px; padding: 11px 5px; background: var(--color-accent-100); }
.recorder-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 16px; background: var(--color-accent-100); border-radius: 16px; font-size: 12px; color: var(--color-accent-700); margin: 0; }
.ledger-form > .btn-block { min-height: 54px; font-size: 15px; border-radius: 16px; margin-top: 0; }
.transfer-pair { gap: 12px; background: linear-gradient(120deg, white, #f0fffa); }
.transfer-arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--color-accent); color: white; border-radius: 50%; align-self: center; }
.transfer-arrow .ic { width: 20px; height: 20px; transform: rotate(90deg); }
.transfer-pair .field > label { font-size: 11px; text-transform: uppercase; }
.transfer-form > .field:has([data-sym-to]) .input { color: var(--color-accent-700); font: 600 24px var(--font-money); }
.detail-head { padding: 28px 20px; background: radial-gradient(ellipse at 100% 0%, #fff1f1, transparent 65%), radial-gradient(ellipse at 0% 100%, #ecfafa, transparent 65%), white; }
.detail-ic { width: 76px; height: 76px; border-radius: 50%; }
.detail-ic .ic { width: 34px; height: 34px; }
.detail-title { font-size: 18px; }
.detail-head .big-figure { margin: 8px 0; }
.detail-card { gap: 0; }
.dl { padding: 12px 0; align-items: flex-start; }
.dl + .dl { border-top: 1px solid var(--color-divider); }
.dl > :last-child { min-width: 0; max-width: 65%; overflow-wrap: anywhere; text-align: right; font-weight: 500; }
.detail-card .hr { margin: 0; }
.detail-actions { flex-wrap: wrap; }
.detail-actions .btn { min-height: 52px; }
.wallet-grid, .subscription-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.wallet-drop { padding: 18px; }
.wallet-amt { font-size: 15px; font-weight: 600; max-width: 45%; overflow-wrap: anywhere; text-align: right; }
.wallet-item { gap: 10px; flex-wrap: wrap; }
.wallet-item .row-main { flex-basis: 100px; }
.wallet-drop .chev { width: 24px; }
.wallet-credit { border-color: #f0dada; }
.wallet-credit > summary { padding: 18px; background: linear-gradient(135deg, #29374a, #101c2c); border-radius: 16px; color: white; }
.wallet-credit > summary .text-muted { color: #c6d6e3; }
.wallet-credit > summary .wallet-amt > span:first-child { color: #ffd6d4; }
.wallet-credit .row-ic { background: rgb(255 255 255 / 12%); color: white; }
.wallet-credit .kk-angka { background: #fff5f5; padding: 16px; border: 1px solid #ffd6d4; border-radius: 16px; }
.kk-angka > div { min-width: 0; }
.kk-utama { font-size: 24px; }
.kk-sisa { font-size: 17px; }
.kk-bar { height: 8px; }
.wallet-isi { border-top: 0; }
.wallet-bank .row-ic { background: #eaf3ff; color: #285baf; }
.wallet-cash .row-ic { background: #fff5cf; color: #9a4c00; }
.wallet-broker .row-ic { background: #f2eaff; color: #7850a1; }
.summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.summary .mid-figure { font-size: clamp(16px, 4.8vw, 24px); }
.debt-summary .sum-main { background: linear-gradient(130deg, white, #effafa); }
.debt-summary .big-figure { font-size: 30px; }
.party-name, .budget-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.party-name strong { font-size: 17px; }
.pihak-baris { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--color-divider); flex-wrap: wrap; }
.pihak-baris > :last-child { font: 600 16px var(--font-money); }
.budget-summary { gap: 12px; }
.budget-summary strong { font-size: 22px; }
.budget-summary .balance-hero strong { font-size: 32px; }
.budget-item { gap: 12px; }
.budget-item-head { flex-wrap: wrap; align-items: center; }
.budget-name { flex: 1; }
.budget-name strong { overflow-wrap: anywhere; font-size: 14px; }
.budget-value { max-width: 100%; flex-shrink: 1; }
.budget-value strong { font-family: var(--font-money); }
.budget-item-foot { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 12px; }
.budget-over { border-color: #f5b6b8; --progress-color: var(--money-out); }
.budget-warning { --progress-color: #b85a00; }
progress { display: block; appearance: none; -webkit-appearance: none; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--color-neutral-200); color: var(--progress-color, var(--color-accent)); }
progress::-webkit-progress-bar { background: var(--color-neutral-200); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--progress-color, var(--color-accent)); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--progress-color, var(--color-accent)); border-radius: 999px; }
.subscription-head { display: flex; align-items: center; gap: 12px; }
.subscription-head strong { font-size: 16px; }
.subscription-amount, .subscription-date { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; }
.subscription-amount { border-top: 1px solid var(--color-divider); margin-top: 8px; }
.subscription-amount strong { font: 600 17px var(--font-money); }
.subscription-date { padding: 10px 12px; font-size: 12px; background: var(--color-neutral-100); border-radius: 12px; }
.subscription-actions { display: flex; justify-content: space-between; align-items: center; }
.subscription-paused { background: var(--color-neutral-100); box-shadow: none; }
.inv-total { gap: 12px; }
.inv-row { flex-wrap: wrap; align-items: flex-start; padding: 20px; }
.inv-row .row-main { flex-basis: 140px; }
.inv-row .row-title { font-size: 16px; }
.inv-angka { width: 100%; padding: 14px; background: var(--color-neutral-100); border-radius: 12px; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.inv-nilai { font-size: 18px; font-weight: 600; }
.price-status { font-size: 11px; margin-top: 6px; color: var(--color-accent-700); }
.inv-row .m-in { background: #dcfff0; border-radius: 999px; padding: 4px 8px; }
.inv-row .m-out { background: #fff0f0; border-radius: 999px; padding: 4px 8px; }
.report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-kpis > .card:last-child { grid-column: 1 / -1; }
.report-kpis .card { padding: 16px; }
.report-net { padding: 24px; }
.report-net .mid-figure { font-size: 28px; }
.report-categories { gap: 16px; }
.report-chart { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.report-pie { width: 160px; height: 160px; }
.report-legend { width: 100%; }
.report-legend-row { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; padding: 12px 0; }
.report-legend-name { overflow: visible; white-space: normal; font-weight: 500; }
.report-legend-share { grid-column: 2; grid-row: auto; font-size: 11px; }
.report-legend-row strong { grid-column: 3; grid-row: span 2; font-size: 12px; }
.report-flow-label { align-items: center; flex-wrap: wrap; }
.report-flow-label strong { font: 600 16px var(--font-money); }
.report-budget-row { padding: 14px; background: var(--color-neutral-100); }
.report-budget-name { white-space: normal; }
.periode { padding: 8px; background: white; border: 1px solid var(--color-divider); border-radius: 16px; justify-content: center; }
.periode-controls { max-width: 100%; gap: 4px; }
.periode-label { font-family: var(--font-body); font-size: 13px; white-space: normal; font-weight: 600; }
.tx-date-picker { left: -52px; }
.tx-calendar-day { font: inherit; }
.tx-search .input { background: white; }
.empty { padding: 32px 20px; background: white; border: 1px dashed #bec9c8; border-radius: 20px; text-align: center; color: var(--color-text-muted); }
.empty::before { content: '🌱'; display: block; font-size: 32px; margin-bottom: 12px; }
.note { color: var(--color-text-muted); font-size: 12px; }
.banner { background: var(--color-neutral-100); border-color: var(--color-divider); padding: 16px; font-size: 13px; color: var(--color-text-muted); }
.alert { background: #fff0f0; margin-bottom: 16px; }
.account-profile { background: linear-gradient(110deg, white, #effafa); }
.account-profile .mid-figure { font-family: var(--font-heading); font-size: 22px; }
.account-profile .card-kicker::before { content: '●'; display: inline-block; color: var(--money-in); margin-right: 6px; }
.account-profile .btn { color: var(--money-out); }
.copy-row { display: flex; align-items: center; gap: 8px; }
.copy-row .input { flex: 1; }
.invite-code { font-weight: 700; color: var(--color-accent-700); font-size: 14px; }
.anggota-item { background: var(--color-neutral-100); box-shadow: none; border-radius: 16px; }
.theme-switch { grid-template-columns: minmax(0, 1fr); }
.theme-switch button { padding: 16px; }
.linkish { min-height: 44px; display: inline-flex; align-items: center; }
.auth-shell { padding: 24px 16px; background: radial-gradient(ellipse at 15% 15%, #e8f5f1, transparent 60%), var(--color-bg); }
.auth-card { padding: 28px; max-width: 420px; border-radius: 28px; gap: 16px; }
.auth-brand { justify-content: center; font-size: 32px; }
.auth-card > h4, .auth-card > p { text-align: center; }
.auth-mark { width: 72px; height: 72px; align-self: center; display: flex; align-items: center; justify-content: center; background: var(--color-accent-100); color: var(--color-accent); border-radius: 24px; transform: rotate(-5deg); }
.auth-mark .ic { width: 36px; height: 36px; }
.auth-card .btn-block { min-height: 50px; }
.auth-card section + section { padding-top: 20px; border-top: 1px solid var(--color-divider); }
.btn-danger { background: #fff0f0; border-color: #f5d4d4; }
.siklus { flex-wrap: wrap; }
.siklus .input-affix { min-width: 180px; }
@media (max-width: 379px) {
  .card { padding: 16px; }
  .row-amt { font-size: 12px; }
  .hero-stats > div { padding: 8px; gap: 5px; }
  .hero-stats .ic { width: 18px; height: 18px; }
  .wallet-amt { font-size: 13px; }
  .wallet-item { gap: 8px; }
  .pihak-angka { grid-template-columns: minmax(0, 1fr); }
  .pihak-angka .mid-figure { white-space: normal; }
}
@media (min-width: 600px) {
  .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .report-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-kpis > .card:last-child { grid-column: auto; }
}
@media (min-width: 900px) {
  .shell { grid-template-columns: 240px minmax(0, 1fr); }
  .main { width: 100%; max-width: 1200px; margin-inline: auto; padding: 32px; }
  .has-back .main { max-width: 760px; }
  .sidebar { background: white; padding: 28px 16px; overflow-y: auto; }
  .sidebar nav a { min-height: 44px; font-size: 13px; border-radius: 12px; opacity: 1; color: var(--color-text-muted); }
  .sidebar nav a.on { color: var(--color-accent-700); font-weight: 700; }
  .family-header { margin: -12px 0 24px; padding: 12px 0 20px; }
  .topbar { margin: 0 0 24px; padding: 0 0 20px; }
  .page-dashboard > .shell > .main > .stack-lg { gap: 24px; }
  .balance-hero { padding: 28px; }
  .balance-hero .big-figure { font-size: 40px; }
  .hero-stats { max-width: 540px; }
  .quick a { flex-direction: row; gap: 12px; padding: 20px 12px; font-size: 14px; }
  .quick small { font-size: 12px; }
  .wallet-grid, .subscription-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .page-anggaran .budget-page > section.stack-sm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .page-anggaran .budget-page > section.stack-sm > .sec-head { grid-column: 1 / -1; }
  .summary { grid-template-columns: 1.3fr 1fr 1fr; }
  .summary .sum-main { grid-column: auto; }
  .inv-row .inv-angka { width: auto; min-width: 240px; }
  .tabbar { display: none; }
  .tx-date-picker { left: 0; }
}
/* Keep full currency amounts legible instead of splitting their digits. */
.kk-angka { grid-template-columns: minmax(0, 1fr); }
.amount-entry .input-affix .input { flex: 0 1 auto; width: 100%; max-width: calc(100% - 48px); field-sizing: content; min-width: 100px; }
@supports (field-sizing: content) { .amount-entry .input-affix .input { width: auto; } }
.wallet-credit > summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; }
.wallet-credit > summary .wallet-amt { grid-column: 2; max-width: 100%; align-items: flex-start; text-align: left; }
.wallet-credit > summary .chev { grid-column: 3; grid-row: 1 / span 2; width: 18px; }
@media (min-width: 480px) { .kk-angka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.report-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.report-highlights .card { position: relative; padding: 20px 16px; }
.report-highlights strong { font: 700 clamp(15px, 4vw, 22px) var(--font-money); overflow-wrap: anywhere; }
.report-highlights .row-ic { width: 32px; height: 32px; margin-bottom: 8px; }
.budget-summary .card:not(.balance-hero) strong { font-size: clamp(14px, 4vw, 20px); white-space: nowrap; }
.summary-wide { grid-template-columns: minmax(0, 1fr); }
.row-main { flex: 1 1 100px; }
.row-amt { max-width: 100%; }
@media (min-width: 600px) { .summary-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }