/* Sahabat Piutang — token brand "Genap" (LOCKED palette).
   Theme-aware: light (Porselen) & dark (Malam Hutan), dua-duanya digarap serius. */

/* Plus Jakarta Sans — self-host (subset latin, woff2). Nggak ada request ke
   Google Fonts → privasi + offline (PWA) + nggak gantung CDN. Weight kepake:
   400/600/700/800. font-display:swap = teks langsung tampil pakai fallback. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-800.woff2") format("woff2");
}

:root {
  /* Palet locked */
  --lunas-green: #0e8a5f;
  --rimba: #0a5e41;
  --kunyit-amber: #e0942a;
  --terakota: #c5603f;
  --porselen: #f4f3ea;
  --tinta-hutan: #14241d;
  --malam-hutan: #0c1611;

  /* Peran (light default) */
  --bg: var(--porselen);
  --surface: #ffffff;
  --text: var(--tinta-hutan);
  --text-muted: #55665d;
  --primary: var(--lunas-green);
  --accent: var(--kunyit-amber);
  --debt: var(--terakota);
  --border: #e2e0d2;

  /* Semantik netting */
  --credit: var(--lunas-green); /* dipiutangin / lunas */
  --pending: var(--kunyit-amber); /* menunggu konfirmasi */

  /* Varian TEKS dari warna semantik. Hex brand yang dikunci (#0E8A5F / #C5603F)
     cuma dapet ~4.4:1 dan ~4.1:1 di atas putih — di bawah ambang WCAG AA 4.5:1
     buat teks kecil, padahal angka uang justru bobot 700 di bawah 18px.
     Nilai di bawah = hue & chroma sama persis, lightness diturunin secukupnya
     (OKLCH) sampai lolos 4.5:1 di SEMUA latar yang mungkin: putih, porselen,
     dan latar bertona sampai 18%. Pergeserannya nyaris nggak kelihatan.
     Hex terkunci tetap dipakai buat bidang isian, batang logo, dan border.
     Amber sengaja NGGAK punya varian teks — lihat --pending di bawah. */
  --credit-text: #007249;
  --debt-text: #a44321;

  /* Isian tombol primer. Hijau brand #0E8A5F cuma dapet 4.36:1 sama teks putih —
     gagal AA (ambang 4.5:1; label tombol 16px/700, di bawah ambang teks besar).
     Nilai ini sama persis kayak --credit-text: hue & chroma identik sama hijau
     brand, lightness turun secukupnya → 5.99:1. Bedanya nyaris nggak keliatan.
     Hijau brand yang dikunci TETAP megang border, outline fokus, dan batang logo,
     di mana ambangnya 3:1 (non-teks) dan dia lolos. */
  --primary-fill: #007249;

  /* Amber nggak pernah jadi warna teks. Di atas putih dia cuma 2.49:1 dan
     nggak bisa digelapin tanpa berhenti terbaca sebagai amber. Keadaan
     "menunggu konfirmasi" disampaikan lewat border + latar + label teks. */

  /* Elevasi. Sistem ini datar: border 1px + geser tonal dulu, bayangan cuma
     nambahin ketinggian. Di tema gelap bayangan nyaris nggak kebaca — makanya
     di sana kedalaman tetap dari border & tonal, dan opasitas JANGAN dinaikin. */
  --shadow-ambient: 0 1px 2px rgba(12, 22, 17, 0.04), 0 2px 8px rgba(12, 22, 17, 0.06);
  --shadow-raised: 0 2px 4px rgba(12, 22, 17, 0.06), 0 6px 16px rgba(12, 22, 17, 0.1);
  --shadow-overlay: 0 10px 30px rgba(12, 22, 17, 0.18);

  /* Ramp ukuran huruf. Sebelumnya ada 21 nilai berbeda yang numpuk sendiri
     (0.72–2rem, 10 di antaranya di bawah 1rem) — itu akumulasi, bukan sistem.
     Sekarang 9 langkah, semuanya px bulat di root 16px, jadi teks nggak pernah
     jatuh di setengah piksel. Langkahnya rapat di area teks kecil (UI padat
     butuh 12/13/14) dan melebar di judul. Geser maksimum dari nilai lama: 1.6px.
     Ukuran tetap (rem), BUKAN clamp — judul yang mengkerut di layar sempit
     bikin app kerasa goyah. clamp cuma buat .hero h1 di layar sambutan. */
  --fs-3xs: 0.75rem; /* 12px — hint, catatan kaki */
  --fs-2xs: 0.8125rem; /* 13px — meta, caption */
  --fs-xs: 0.875rem; /* 14px — label field, teks pendukung */
  --fs-sm: 1rem; /* 16px — body & input (≥16px = iOS nggak auto-zoom pas fokus) */
  --fs-md: 1.125rem; /* 18px — judul bagian */
  --fs-lg: 1.25rem; /* 20px — judul kartu */
  --fs-xl: 1.5rem; /* 24px — judul halaman */
  --fs-2xl: 1.75rem; /* 28px — cadangan */
  --fs-3xl: 2rem; /* 32px — ikon besar (area jepret struk) */

  /* Tinggi bottom nav. WAJIB token: dipakai bareng sama padding bawah konten DAN
     offset banner A2HS. Kalau ketiganya nulis angka sendiri-sendiri, cepat atau
     lambat salah satunya geser dan bar-nya nutup baris terakhir. */
  --tabbar-h: 60px;
  /* Berapa tinggi yang harus dihindari elemen fixed lain. 0 di landing anonim
     (nggak ada bar di situ) — kalau nggak, banner A2HS ngambang 60px kegantung. */
  --tabbar-offset: 0px;

  /* Radius. Tangga tunggal; 6px & 11px yang nyasar udah dinormalin ke 8 & 12. */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius: 14px;
  --radius-banner: 16px;
  --radius-pill: 999px;

  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* Tema gelap. Varian teks semantik dibalik arahnya: di latar gelap warna brand
   harus DINAIKIN lightness-nya, bukan diturunin (#0E8A5F cuma 3.8:1 di atas
   permukaan gelap). Hue & chroma tetap sama. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: var(--malam-hutan);
    --surface: #14211a;
    --text: #eaf1ec;
    --text-muted: #9bb0a5;
    --border: #24352b;
    --credit-text: #36a376;
    --debt-text: #df7755;
  }
}
:root[data-theme="dark"] {
  --bg: var(--malam-hutan);
  --surface: #14211a;
  --text: #eaf1ec;
  --text-muted: #9bb0a5;
  --border: #24352b;
  --credit-text: #36a376;
  --debt-text: #df7755;
}

* { box-sizing: border-box; }

/* `[hidden]` HARUS menang. Browser nyembunyiin lewat `[hidden] { display: none }`
   di UA stylesheet, dan itu kalah spesifisitas sama aturan kita sendiri kayak
   `.btn-primary { display: inline-block }`. Akibatnya `el.hidden = true` di JS
   DIAM-DIAM nggak ngefek buat semua tombol — tombol "Pasang" tetap nongol
   barengan teks fallback-nya, dan tombol "Coba baca lagi" di layar scan kelihatan
   sebelum ada yang di-scan. Gagalnya sunyi: nggak ada error, cuma elemen yang
   mestinya ilang tapi tetap ada. */
[hidden] { display: none !important; }

/* Fokus keyboard: satu ring buat semua yang bisa dipencet. Sebelumnya cuma input
   dan chip yang punya gaya sendiri, sisanya jatuh ke ring bawaan browser — masih
   kelihatan, tapi beda-beda dan nggak nyambung sama sistem. :focus-visible, jadi
   ring cuma muncul buat keyboard, bukan tiap kali diklik pakai mouse. */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-inline:focus-visible,
.btn-link:focus-visible,
.btn-danger:focus-visible,
.icon-btn:focus-visible,
.circle-item a:focus-visible,
.brand:focus-visible,
.back-link:focus-visible,
.who-chip:focus-visible,
.receipt-thumb:focus-visible,
.proof-thumb:focus-visible,
.scan-drop:focus-visible,
.tab:focus-visible,
.tab-cta:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn-danger:focus-visible { outline-color: var(--debt); }

/* Target ketuk. PRODUCT.md ngunci 44px buat app satu tangan — lebih ketat dari
   WCAG 2.2 AA yang cuma minta 24x24. Tombol-tombol ini dulu 30–33px tingginya.
   Dipakein min-height + grid biar isinya tetap ketengah, TANPA ngegedein kotak
   visualnya lewat padding (yang bakal ngubah tampilan header & toolbar). */
.icon-btn,
.btn-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Ikon tunggal juga perlu lebar; tombol berlabel (mis. Keluar) udah lewat. */
.icon-btn { min-width: 44px; }

/* Elevasi dipakai hemat: cuma permukaan yang bisa diketuk yang naik pas hover,
   dan naiknya bareng perubahan warna border — bayangan nggak pernah jalan
   sendirian. 150ms, cukup buat kerasa tanpa bikin nunggu. */
.circle-item a,
.expense-item {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .circle-item a,
  .expense-item {
    transition: none;
  }
}

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* min-height dipertahankan biar latar tetap nutup layar walau halamannya
     pendek. Flex column-nya dulu buat ngedorong footer ke bawah — footernya
     udah dibuang, tapi `.container { flex: 1 0 auto }` masih dipakai supaya
     konten ngisi tinggi layar dan bottom nav punya jarak yang konsisten. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.container { flex: 1 0 auto; }

/* Angka uang: mono tabular, rata kanan kayak buku kas */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.num.credit { color: var(--credit-text); }
.num.debt { color: var(--debt-text); }
/* SENGAJA nggak ada .num.pending. Amber nggak pernah jadi warna angka — di atas
   putih cuma 2.5:1. Keadaan "menunggu konfirmasi" dibawa sama permukaan
   .settle-pending (border + latar amber) plus label teksnya, bukan sama warna
   angkanya. Kelas ini emang nggak pernah kepake di template mana pun. */

.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  background: var(--surface);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
}
.brand-name { font-size: var(--fs-sm); }

/* Logo "=" — dua batang beda warna (inti makna: hijau + amber) */
.brand-mark,
.hero-mark {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.brand-mark { width: 26px; }
.hero-mark { width: 56px; gap: 8px; margin-bottom: 8px; }
.bar {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
}
.hero-mark .bar { height: 12px; }
.bar-top { background: var(--lunas-green); }
.bar-bottom { background: var(--kunyit-amber); }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
/* Layar sempit (SE lama, Fold ketutup): gutter 20px kiri-kanan makan 12,5% lebar
   layar 320px. Diturunin ke 14px — bukan buat ngejar bug, tapi karena di lebar
   segitu tiap piksel horizontal itu mahal. */
@media (max-width: 360px) {
  .container { padding-left: 14px; padding-right: 14px; }
}

.hero { text-align: center; padding-top: 8vh; }
.hero h1 {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}
.lede {
  color: var(--text-muted);
  max-width: 42ch;
  margin: 0 auto 20px;
}
code {
  font-family: var(--font-num);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* --- Auth (login/logout) --- */
.auth-wrap {
  display: flex;
  justify-content: center;
  padding-top: 6vh;
}
.auth-box {
  width: 100%;
  max-width: 380px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.auth-box h1 {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 10px 0 6px;
}
.auth-box .lede {
  margin-bottom: 18px;
  font-size: var(--fs-sm);
}
.field {
  display: block;
  text-align: left;
  margin-bottom: 16px;
}
.field > span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
}
.field input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.code-input {
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  letter-spacing: 0.4em;
  text-align: center;
}
.btn-primary {
  display: inline-block;
  width: 100%;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary-fill);
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.btn-primary:hover { background: var(--rimba); }
.btn-primary[disabled] { opacity: 0.6; cursor: default; }
.btn-link {
  font: inherit;
  background: none;
  border: 0;
  color: var(--credit-text);
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 6px;
}
.resend { margin-top: 12px; }
.auth-error {
  background: color-mix(in srgb, var(--debt) 12%, transparent);
  color: var(--debt-text);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--fs-xs);
  margin-bottom: 14px;
}
.auth-state {
  margin: 8px 0 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.auth-state .inline { display: inline; }
.auth-state .btn-primary { width: auto; }

/* --- Dashboard & circle (M2.3) --- */
.eyebrow {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin: 0 0 2px;
}
/* Satu definisi aja. Dulu .dash-head kedefinisi dua kali (600 baris kepisah)
   dengan align-items yang bentrok, dan .dash-head h1 nggak punya markup yang
   cocok — judul dashboard pakai .dash-title. */
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.dash-head .inline { display: inline; }
/* Data nggak kebaca ≠ data kosong. Terakota (bukan merah — Never-Red Rule),
   border utuh bukan putus-putus: ini bukan tempat kosong yang nunggu diisi. */
.empty-error {
  color: var(--debt-text);
  border-style: solid;
  border-color: color-mix(in srgb, var(--debt) 35%, var(--border));
  background: color-mix(in srgb, var(--debt) 6%, var(--surface));
}
.empty {
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
}
.circle-list,
.member-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.circle-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
}
.circle-item a:hover { border-color: var(--primary); box-shadow: var(--shadow-raised); }
.circle-name { font-weight: 700; }
.circle-meta { color: var(--text-muted); font-size: var(--fs-xs); }

.circle-form-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 6px;
}
.circle-form-box h2,
.add-member h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin: 0 0 12px;
}
/* Form baris: input mengembang + tombol nempel di kanan (turun kalau sempit). */
.row-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.row-form .field { flex: 1 1 200px; margin-bottom: 12px; }
.row-form .btn-primary { width: auto; margin-bottom: 12px; }

.circle-view .back-link { color: var(--text-muted); text-decoration: none; }
.circle-view .back-link:hover { color: var(--credit-text); }
.circle-view h1 {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2px 0 6px;
}

/* Header circle: nama + tombol rename (inline edit) */
.circle-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.circle-name-box.editing { display: block; }
.circle-name-box h1 { margin: 2px 0 6px; }

/* Baris meta: chip peran · N anggota · dibuat · currency */
.circle-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin: 0 0 14px;
}

/* Tumpukan avatar anggota (overlap) */
.avatar-stack {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
}
.avatar-stack .avatar {
  margin-right: -8px;
  box-shadow: 0 0 0 2px var(--bg);
  border-radius: var(--radius-pill);
}
.avatar-more {
  margin-left: 14px;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-family: var(--font-num);
}

.circle-item-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Zona kelola: hapus / keluar circle */
/* --- Saldo "siapa bayar ke siapa" (M4; sekarang tinggal di home) --- */
.balance-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.balance-item-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-ambient);
}
.balance-item {
  display: flex;
  align-items: center;
  /* Boleh turun baris — sama alasannya kayak .member-item: nama panjang + angka
     + tombol aksi nggak selalu muat sebaris di layar 320px. */
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
}
/* `min-width: 0` doang NGGAK cukup: nama orang bisa punya satu kata panjang, dan
   angka mono ("Rp1.234.567") nggak punya titik patah sama sekali. Tanpa ini,
   satu nama panjang maksa SELURUH halaman bisa digeser ke samping. */
.balance-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.balance-toggle { font-size: var(--fs-2xs); font-weight: 600; padding: 5px 10px; }

/* Rincian asal-usul (per entri, per circle) */
.pair-detail:empty { display: none; }
.pair-detail-inner {
  padding: 4px 14px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.pair-circle { margin-top: 10px; }
.pair-circle-name {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  font-size: var(--fs-xs);
  margin: 0 0 4px;
}
.pair-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pair-entries li { font-size: var(--fs-xs); color: var(--text-muted); }
/* Baris entri (non-expand) + header expand: desc kiri, nominal kanan. */
.pair-entry-row,
.pair-entry-exp > summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}
.pair-entry-desc { min-width: 0; }
/* Expand pakai <details> native. Chevron dari marker default diganti. */
.pair-entry-exp > summary {
  cursor: pointer;
  list-style: none;
  align-items: baseline;
}
.pair-entry-exp > summary::-webkit-details-marker { display: none; }
.pair-entry-exp > summary .pair-entry-desc::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.pair-entry-exp[open] > summary .pair-entry-desc::before { transform: rotate(90deg); }
.pair-entry-exp > summary:hover .pair-entry-desc { color: var(--text); }
/* Rincian item porsi orang itu. */
.pair-item-lines {
  list-style: none;
  margin: 2px 0 6px;
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--border);
}
.pair-item-lines li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  font-size: var(--fs-2xs);
}
.pil-name { min-width: 0; }
.pair-detail-note {
  margin: 10px 0 0;
  font-size: var(--fs-3xs);
  color: var(--text-muted);
}

/* Settlement: tombol tandai-bayar + kartu pending */
.balance-settle {
  padding: 0 14px 12px;
}
.balance-settle .btn-inline { width: auto; padding: 7px 14px; font-size: var(--fs-xs); }
.settle-pending {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--pending) 40%, var(--border));
  background: color-mix(in srgb, var(--pending) 8%, var(--surface));
  flex-wrap: wrap;
}
.settle-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.settle-actions .btn-inline { width: auto; padding: 7px 12px; font-size: var(--fs-xs); }

/* Bukti transfer di pending settlement (#56) — thumbnail baris sendiri. */
.field-hint { display: block; margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-muted); }
.proof-thumb {
  flex: 1 0 100%; display: inline-flex; flex-direction: column; align-items: flex-start;
  margin: 4px 0 2px; text-decoration: none; width: fit-content; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg);
}
.proof-thumb img { display: block; max-height: 160px; max-width: 100%; object-fit: contain; }
.proof-thumb-hint {
  font-size: var(--fs-3xs); color: var(--text-muted); padding: 4px 10px;
  border-top: 1px solid var(--border); align-self: stretch; text-align: center;
}
.proof-thumb:hover { border-color: var(--primary); }
.proof-thumb:hover .proof-thumb-hint { color: var(--credit-text); }

.genap-state {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-ambient);
}
.genap-state .hero-mark { margin: 0 auto 10px; }
.genap-state h2 { margin: 0 0 6px; font-size: var(--fs-lg); font-weight: 800; }

/* --- Pengeluaran (M3) --- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 22px 0 12px;
}
.section-head .section-title { margin: 0; }
.btn-inline { width: auto; padding: 8px 14px; }
.expense-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.expense-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.expense-item > a,
.expense-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.expense-item > a {
  padding: 12px 14px;
  width: 100%;
  text-decoration: none;
  color: var(--text);
}
.expense-item > a:hover { border-radius: var(--radius-lg); }
.expense-item:hover { border-color: var(--primary); box-shadow: var(--shadow-raised); }
.expense-item:not(:has(> a)) { padding: 12px 14px; }
.expense-main { display: flex; flex-direction: column; min-width: 0; }
.expense-desc { font-weight: 700; }
.expense-meta { color: var(--text-muted); font-size: var(--fs-xs); }
.expense-amount { font-weight: 700; }

/* Select + fieldset peserta di form expense */
.field select {
  width: 100%;
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
}
.field select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
fieldset.participants {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  /* Browser ngasih <fieldset> `min-width: min-content` bawaan yang NGGAK ikut
     mengecil — di layar 320px itu bikin form-nya lebih lebar dari layarnya.
     Ini quirk lama <fieldset>, dan `min-width: 0` satu-satunya obatnya. */
  min-width: 0;
}
fieldset.participants > span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
}
fieldset.participants .check { margin-bottom: 6px; color: var(--text); }

/* Pilih cara bagi (split kind) — chip radio */
.split-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-radio { cursor: pointer; }
.chip-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-radio span {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
}
.chip-radio input:checked + span {
  border-color: var(--primary);
  color: var(--credit-text);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.chip-radio input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.split-hint { font-weight: 400; }

/* Baris peserta: [☑ nama ..........] [Rp|input|%]  (kolom porsi cuma di nominal/persen) */
.participant-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.participant-row + .participant-row { border-top: 1px solid var(--border); }
.pr-check {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  color: var(--text);
}
/* Checkbox brand-color; spesifisitas > .field input {width:100%}. */
.pr-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--primary);
}
/* Nama sebaris sama checkbox; kepanjangan → ellipsis (nggak turun/ke-wrap). */
.pr-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grup input porsi (Rp prefix / % suffix). Rata → hidden total (termasuk affix). */
.pr-amt {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
}
#expense-form[data-split="nominal"] .pr-amt,
#expense-form[data-split="persen"] .pr-amt { display: inline-flex; }
.pr-amt:focus-within { border-color: var(--primary); }
.pr-affix { padding: 0 9px; color: var(--text-muted); font-size: var(--fs-xs); }
.pr-pre, .pr-post { display: none; }
#expense-form[data-split="nominal"] .pr-pre { display: inline; }
#expense-form[data-split="persen"] .pr-post { display: inline; }
/* Input: nempel di grup, tanpa border sendiri (spesifisitas > .field input). */
.pr-amt .amt-input {
  width: 92px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  text-align: right;
  padding: 8px 10px;
  color: var(--text);
}
.pr-amt .amt-input:focus { outline: none; }
/* Porsi rata (read-only) — tampil di kanan nama saat mode "Rata". */
.pr-rata {
  display: none;
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
#expense-form[data-split="rata"] .pr-rata { display: inline; }
.participants .participant-row { margin-bottom: 8px; }

.manage-circle {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
#manage-msg:not(:empty) { margin-bottom: 10px; }
.btn-danger {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--debt) 40%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--debt) 10%, transparent);
  color: var(--debt-text);
}
.btn-danger:hover { background: color-mix(in srgb, var(--debt) 18%, transparent); }
.icon-btn-danger { color: var(--debt-text); }
.icon-btn-danger:hover { border-color: var(--debt); color: var(--debt-text); }
.section-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 22px 0 12px;
}
.section-title .count,
.count {
  color: var(--text-muted);
  font-family: var(--font-num);
  font-weight: 600;
}
.member-item {
  display: flex;
  align-items: center;
  /* Boleh turun baris. Baris anggota ghost butuh avatar + nama + chip "belum
     punya akun" + TIGA tombol aksi; di layar 390px itu 372px sementara yang
     tersedia cuma 350 — halamannya jadi bisa digeser ke samping. Tombolnya nggak
     dikecilin (target ketuk 44px itu standar kita), jadi yang ngalah tata
     letaknya: aksi turun ke baris kedua kalau kesempitan. */
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
/* Nama panjang ngecil & dipotong, bukan maksa barisnya melar. */
.member-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.avatar-dot {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}
.chip {
  font-size: var(--fs-3xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.chip-owner {
  color: var(--credit-text);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.chip-ghost {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.member-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

/* Kotak link undangan (invite ghost) */
.member-inviting { display: block; }
.invite-box { width: 100%; }
.invite-label {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.invite-link {
  width: 100%;
  font: inherit;
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  margin-bottom: 10px;
}

.add-member { margin-top: 24px; }
.add-member .hint,
.circle-view > .hint {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin: 0 0 12px;
}

/* --- Avatar generated (inisial + warna, inline SVG) --- */
.avatar {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}
.avatar svg { display: block; border-radius: var(--radius-pill); }
.avatar-img {
  display: block;
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--border);
}

/* Edit avatar: preview + input file + opsi hapus */
.avatar-edit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.file-field { flex: 1 1 auto; margin-bottom: 0; }
.file-field input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.field-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 6px;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 12px;
  cursor: pointer;
}

/* --- Profil (edit nama + warna sendiri) --- */
.dash-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.profile-text { min-width: 0; }
.profile .eyebrow { margin: 0; }
.profile-name {
  margin: 0;
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile.profile-editing { display: block; }
.profile-editing .edit-form,
.member-editing .edit-form { width: 100%; }

.icon-btn {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--primary); color: var(--credit-text); }

/* Form edit inline (profil & anggota ghost) */
.edit-form .field { margin-bottom: 10px; }
.edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.edit-actions .btn-primary { width: auto; }

/* Swatch warna avatar (radio) */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.swatch { cursor: pointer; line-height: 0; }
.swatch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.swatch-dot {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--sw);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px var(--border);
}
.swatch input:checked + .swatch-dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw);
}
.swatch input:focus-visible + .swatch-dot { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ==== Scan struk (M5.1) ==== */
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Tombol sekunder ber-outline (dipakai "Scan struk", "Scan ulang"). */
.btn-ghost {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  text-align: center;
}
.btn-ghost:hover { border-color: var(--primary); color: var(--credit-text); }
/* Kartu berpanel generik. */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }

/* Tawaran scan di atas form catat. Sengaja BUKAN kartu: dia jalan pintas, bukan
   bagian isian form. Cuma satu garis pemisah di bawahnya biar kebedain dari
   field pertama, dan tombolnya ghost supaya nggak berebut sama tombol simpan. */
.scan-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.scan-offer-text {
  margin: 0;
  min-width: 0;
  flex: 1 1 180px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* Area jepret/pilih foto — target ketuk gede, ramah HP. */
.scan-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; cursor: pointer;
  padding: 36px 20px; margin-top: 8px;
  border: 2px dashed var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text-muted);
}
.scan-drop:hover { border-color: var(--primary); color: var(--credit-text); }
.scan-drop-icon { font-size: var(--fs-3xl); line-height: 1; }
.scan-drop-text { font-weight: 600; }
.scan-drop-text small { font-weight: 400; opacity: 0.85; }

.scan-preview { margin: 14px 0 0; }
.scan-preview img {
  display: block; width: 100%; max-height: 320px; object-fit: contain;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg);
}

.scan-status { margin: 14px 0 0; color: var(--text-muted); font-weight: 600; }
.scan-status.scan-error { color: var(--debt-text); }

.scan-result { margin-top: 16px; }
.scan-merchant { margin: 0 0 10px; font-weight: 700; }
.scan-items { list-style: none; margin: 0; padding: 0; }
.scan-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.si-name { min-width: 0; }
.si-amt { flex: 0 0 auto; }
.scan-totals { margin: 12px 0 0; }
.scan-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--text-muted); }
.scan-totals dt, .scan-totals dd { margin: 0; }
.scan-grand { font-weight: 800; color: var(--text); font-size: var(--fs-sm); }
.scan-actions { display: flex; gap: 8px; margin-top: 16px; }
.scan-actions .btn-inline { flex: 1 1 auto; }
.scan-hint { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--text-muted); }

/* ==== Bagi porsi / assign (M5.4) ==== */
.assign { margin-top: 16px; }
.assign-title { font-size: var(--fs-md); margin: 0 0 4px; }
.assign-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.assign-item:first-of-type { border-top: 1px solid var(--border); }
.ai-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ai-name { min-width: 0; font-weight: 600; }
.ai-amt { flex: 0 0 auto; }
.ai-people { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
/* Chip nama — ketuk buat nandain siapa yang ikut item ini. */
.who-chip {
  font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--text-muted);
}
.who-chip:hover { border-color: var(--primary); color: var(--credit-text); }
.who-chip.on {
  border-color: var(--primary); color: var(--credit-text);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.ai-per { font-size: var(--fs-2xs); color: var(--text-muted); font-family: var(--font-num); }
.ai-per.ai-unassigned { color: var(--debt-text); font-family: var(--font-ui); font-style: italic; }

.assign-summary { margin-top: 16px; padding-top: 4px; }
.assign-sub { font-size: var(--fs-sm); margin: 0 0 6px; }
.assign-sub small { font-weight: 400; color: var(--text-muted); }
.assign-people { list-style: none; margin: 0; padding: 0; }
.assign-person {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
}
.ap-name { min-width: 0; }
.ap-amt { flex: 0 0 auto; font-weight: 700; }
.assign-warn { margin: 12px 0 0; color: var(--debt-text); font-weight: 600; font-size: var(--fs-xs); }
.assign .field { margin-top: 16px; }

/* Tombol retry OCR (muncul saat scan gagal, di bawah pesan error). */
.scan-retry { width: auto; margin: 10px 0 0; }

/* ==== Koreksi manual item struk (M5.6) ==== */
.edit-items { margin-top: 4px; }
.edit-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.ei-name {
  flex: 1 1 auto; min-width: 0; font: inherit;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
}
.ei-price {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); padding: 0 8px;
}
.ei-price:focus-within { border-color: var(--primary); }
.ei-affix { color: var(--text-muted); font-size: var(--fs-xs); }
.ei-amt {
  width: 92px; font-family: var(--font-num); text-align: right;
  border: 0; background: transparent; padding: 8px 2px; color: var(--text);
}
.ei-amt:focus { outline: none; }
.ei-name:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.ei-del {
  flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); font-size: var(--fs-lg); line-height: 1; cursor: pointer;
}
.ei-del:hover { color: var(--debt-text); background: color-mix(in srgb, var(--debt) 12%, transparent); }
/* Handle geser (drag-reorder). touch-action:none → sentuhan nge-drag, bukan scroll.
   Target ketuk gede (44px) biar gampang dipegang di HP. */
.ei-drag {
  flex: 0 0 auto; width: 34px; height: 44px; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-muted); cursor: grab;
  font-size: var(--fs-lg); line-height: 1; touch-action: none;
}
.ei-drag:hover { color: var(--credit-text); }
.ei-drag:active { cursor: grabbing; }
/* Slot asli saat diseret: jadi indikator drop (kosong, garis putus). */
.edit-item.ph-drag > * { visibility: hidden; }
.edit-item.ph-drag {
  border: 1px dashed var(--primary); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
/* Clone yang ngikutin jari/kursor. */
.drag-clone {
  position: fixed; z-index: 1000; margin: 0; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border);
  border-bottom: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay); padding: 0 6px;
}
.edit-add { margin-top: 10px; }
/* Input total (grand total, editable) di baris total */
.scan-grand dd { display: inline-flex; align-items: center; gap: 4px; }
.ei-total {
  width: 120px; font-family: var(--font-num); text-align: right;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
}
.ei-total:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }

/* ==== Itemisasi di detail expense (collapsible, #52 lanjutan) ==== */
.items-detail {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin: 4px 0 8px; overflow: hidden;
}
.items-detail > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  list-style: none; padding: 12px 14px; font-weight: 700;
}
.items-detail > summary::-webkit-details-marker { display: none; }
.items-detail > summary::before {
  content: "▸"; color: var(--text-muted); transition: transform 0.15s ease;
}
.items-detail[open] > summary::before { transform: rotate(90deg); }
.items-detail-title { flex: 1 1 auto; }
.items-detail-count { font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }
.items-list { list-style: none; margin: 0; padding: 0 14px 8px; }
.items-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.items-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.items-name { font-weight: 600; }
.items-people { font-size: var(--fs-2xs); color: var(--text-muted); }
.items-amt { flex: 0 0 auto; }

/* ==== Foto struk di detail expense (M5.2 / #32) ==== */
.receipt-thumb {
  display: block; margin: 4px 0 12px; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg); position: relative; width: fit-content;
}
.receipt-thumb img {
  display: block; max-height: 220px; max-width: 100%; object-fit: contain;
}
.receipt-thumb-hint {
  display: block; text-align: center; font-size: var(--fs-3xs);
  color: var(--text-muted); padding: 5px 10px; border-top: 1px solid var(--border);
}
.receipt-thumb:hover { border-color: var(--primary); }
.receipt-thumb:hover .receipt-thumb-hint { color: var(--credit-text); }

/* Judul bagian pertama di halaman nggak perlu jarak atas — dia udah paling atas. */
.section-title-first { margin-top: 0; }
/* Total nempel di judul grup, rata kanan. Sengaja NGGAK bikin blok ringkasan
   sendiri di atas list: itu hero-metric template, dan ngulang isi list di
   bawahnya persis. */
.section-total {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.section-title:has(.section-total) {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Pending KELUAR: nunggu jawaban orang lain, kamu cuma bisa batalin. Lebih redup
   dari pending masuk — amber-nya separuh, karena ini bukan giliran kamu. */
.settle-pending-quiet {
  border-color: color-mix(in srgb, var(--pending) 22%, var(--border));
  background: color-mix(in srgb, var(--pending) 4%, var(--surface));
}

/* First run: bentuknya sama kayak genap-state biar konsisten, tapi TANPA logo
   mark — tanda "=" itu artinya dua orang jadi seimbang, dan di sini belum ada
   apa-apa buat diseimbangin. */
.genap-state.first-run { border-style: dashed; }
.genap-state .btn-inline { margin-top: 12px; }

/* Profil & akun (tab Profil) */
.profile-page {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
/* Aksi akun (ubah profil + keluar) didorong ke kanan blok profil. Section "Akun"
   yang lama dibuang: isinya cuma ngulang nama yang udah ketulis di blok ini. */
.profile-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.profile-actions .inline { display: inline-flex; }
/* Keluar dibedain dari ubah-profil lewat nada terakota pas disentuh — bukan
   warna tetap, biar dia nggak kelihatan kayak peringatan pas lagi diem. */
.icon-btn-logout:hover {
  border-color: color-mix(in srgb, var(--debt) 45%, var(--border));
  color: var(--debt-text);
}
.icon-btn-logout:focus-visible { outline-color: var(--debt); }

/* ==== Antrean catatan offline (outbox) ==== */
/* Catatan yang belum kekirim. Nada AMBER, sama kayak settlement pending: dua-duanya
   berarti "belum selesai, nunggu sesuatu". Bukan terakota — nggak ada yang salah,
   cuma belum sampai. */
.outbox-catatan {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--pending) 40%, var(--border));
  background: color-mix(in srgb, var(--pending) 8%, var(--surface));
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--text);
}
.outbox-item {
  border: 1px solid color-mix(in srgb, var(--pending) 30%, var(--border));
  background: color-mix(in srgb, var(--pending) 5%, var(--surface));
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
/* Ditolak server: terakota, karena ini BUTUH keputusan orangnya — beda dari
   sekadar nunggu sinyal. */
.outbox-item.outbox-gagal {
  border-color: color-mix(in srgb, var(--debt) 35%, var(--border));
  background: color-mix(in srgb, var(--debt) 5%, var(--surface));
}
.outbox-status,
.outbox-alasan {
  display: block;
  font-size: var(--fs-3xs);
  margin-top: 2px;
}
.outbox-status { color: var(--text-muted); }
.outbox-alasan { color: var(--debt-text); }

/* ==== Bottom nav (app shell PWA) ==== */
/* Semua tujuan di zona jempol. Fixed, aman dari safe-area (notch/home indicator). */
body.has-tabbar { --tabbar-offset: var(--tabbar-h); }
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40; /* di bawah A2HS (50) — banner boleh naik di atas bar */
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab,
.tab-cta {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--text-muted);
  /* Garis atas transparan: penanda aktif nanti cuma ganti warnanya, jadi teks
     nggak pernah geser 2px pas tab pindah. */
  border-top: 2px solid transparent;
}
.tab-ico { display: block; }
.tab-label {
  font-size: var(--fs-3xs);
  font-weight: 600;
  line-height: 1;
  /* Label SELALU kelihatan. Ikon doang bikin orang nebak-nebak. */
}
/* Aktif ditandai TIGA cara: garis atas, bobot huruf, warna. Bukan warna doang. */
.tab-on {
  color: var(--credit-text);
  border-top-color: var(--primary);
}
.tab-on .tab-label { font-weight: 800; }
/* Tab Catat aktif: garis atasnya AMBER, ngikutin warna pilnya sendiri — garis
   hijau di atas pil amber bakal kebaca kayak penanda tab sebelahnya. Labelnya
   pakai warna teks normal, bukan amber: amber sebagai teks cuma 2.5:1.
   Penanda aktifnya tetap tiga (garis + bobot + warna), jadi nggak warna doang. */
.tab-cta.tab-on {
  color: var(--text);
  border-top-color: var(--kunyit-amber);
}
.tab:hover { color: var(--text); }
.tab-on:hover { color: var(--credit-text); }

/* Pil berisi di bar: Home (hijau) lalu Catat (amber), bersebelahan. Itu logo "="
   dibikin horizontal — dua batang beda warna, hijau dulu baru amber. Makanya
   urutan Circle→Home→Catat penting: kalau Home ketuker ke kiri, urutan warnanya
   kebalik dan hubungannya ke logo putus.

   Ukurannya identik supaya kebaca sebagai PASANGAN, bukan dua tombol yang
   kebetulan mirip. Ink-nya beda karena kontras maksa, dan kebetulan itu persis
   kombinasi di brand concept versi app icon (ground hijau, batang putih + amber). */
.tab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
/* Hijau butuh ink PUTIH: Tinta Hutan di atas hijau cuma 2.7:1. Pakai
   --primary-fill (bukan hijau brand) karena putih di atas #0E8A5F cuma 4.36:1. */
.tab-pill-green {
  background: var(--primary-fill);
  /* Border ikut tema. Di tema TERANG dia sewarna latar pil (jadi nggak kelihatan)
     dan emang nggak dibutuhin — pil vs bar putih udah 5.99:1. Di tema GELAP,
     #007249 vs permukaan gelap cuma 2.78:1, di bawah ambang batas kontrol 3:1;
     --credit-text di sana jadi #36A376 dan ngasih 5.27:1. Satu deklarasi, dua
     tema, tanpa nambah token baru. */
  border-color: var(--credit-text);
  color: #fff;
}
/* Amber kebalikannya: putih di atasnya cuma 2.49:1, tinta gelap 6.49:1. Aturan
   yang sama kayak kenapa amber nggak pernah jadi warna angka. Border amber
   digelapin biar tepi pil kebedain dari bar putih (3.48:1, ambang kontrol 3:1). */
.tab-pill-amber {
  background: var(--kunyit-amber);
  border-color: color-mix(in srgb, var(--kunyit-amber) 80%, var(--tinta-hutan));
  color: var(--tinta-hutan);
}
.tab-has-pill:hover .tab-pill-green { background: var(--rimba); }
.tab-has-pill:hover .tab-pill-amber {
  background: color-mix(in srgb, var(--kunyit-amber) 88%, var(--tinta-hutan));
}
.tab-pill svg { display: block; }
.tab-cta { color: var(--text-muted); }
.tab-cta:hover { color: var(--text); }

/* Konten & footer nggak boleh ketutup bar. Satu-satunya sumber angkanya: token. */
.container.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); }

/* Section A2HS di tab Profil. Sengaja BUKAN kartu ber-border: dia satu blok
   setara "Akun" di bawahnya, dipisah garis, bukan kotak ngambang. Nggak ada
   tombol tutup — justru itu gunanya, jadi jaring pengaman pas banner-nya
   udah di-dismiss. */
.a2hs-pane { margin-top: 28px; }
.a2hs-pane-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.a2hs-pane-text {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}
.a2hs-pane .a2hs-icon { flex: 0 0 auto; }

/* Banner Add-to-Home-Screen — fixed bawah, ber-brand, dismissible.
   Naik di atas bar (bukan nutupin): dua-duanya kelihatan. */
.a2hs {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(12px + var(--tabbar-offset) + env(safe-area-inset-bottom));
  z-index: 50;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-banner);
  box-shadow: var(--shadow-overlay);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.a2hs.a2hs-in { transform: translateY(0); opacity: 1; }
.a2hs-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-lg); }
.a2hs-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.a2hs-body strong { font-weight: 800; font-size: var(--fs-sm); }
.a2hs-text { font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.3; }
.a2hs-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.a2hs-install { width: auto; padding: 9px 16px; font-size: var(--fs-xs); }
.a2hs-close {
  font: inherit; font-size: var(--fs-xl); line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--text-muted);
  padding: 2px 8px; border-radius: var(--radius-sm);
}
.a2hs-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .a2hs { transition: none; transform: translateY(0); }
}