/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v4 — Perum Bening · Zalyra Design DNA (Material 3
   Expressive), varian HIJAU. Mockup: claude.ai/artifact/HMkjrdAqx52bygvDuCTGPe

   · Huruf: Google Sans Flex (tersimpan di /fonts, bukan CDN). Dua bobot
     bekerja: 700 untuk yang dibaca dulu (angka, judul), 300 untuk yang
     menjelaskan (keterangan, tanggal). Huruf dasar 17 — warga lansia.
   · Hijau daun dari logo = warna utama. Warna lain = arti status:
     hijau lunas/masuk, kuning menunggu, merah terlambat/keluar, ungu voting.
   · Wadah berwarna, tanpa garis & tanpa bayangan. Bayangan hanya tombol
     melayang (FAB).
   · Bentuk: isian & chip 12, baris 24 (daftar bersegmen), kartu 28,
     tombol & bar penuh bulat.
   · Ikon Material Symbols Rounded (js/inti/ikon.js), terisi saat aktif.
   ═══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Google Sans Flex'; font-style:normal; font-display:swap; font-weight:1 1000;
  src:url(../fonts/google-sans-flex.woff2) format('woff2-variations'), url(../fonts/google-sans-flex.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --font-ui:'Google Sans Flex','Google Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:var(--font-ui);

  /* Skala teks */
  --t-2xs:13px; --t-xs:14px; --t-sm:15px; --t-md:16px; --t-callout:16px; --t-base:17px;
  --t-lg:20px; --t-title2:22px; --t-xl:28px; --t-2xl:32px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* Warna — M3 hijau */
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#EEF4EE;
  --c:#EEF4EE;            /* surface-container: kartu, baris, bar bawah */
  --ch:#E2EBE3;           /* surface-container-high: isian, cari */
  --ink:#191C19; --ink-2:#2A2F2A; --muted:#404940; --label-3:#707970;
  --outline:#707970; --outline-v:#C0C9BF; --sep:rgba(192,201,191,.55); --line:var(--sep);
  --fill:#C0C9BF; --fill-2:#E2EBE3; --fill-3:#EEF4EE;

  --primary:#146C2E; --primary-600:#0F5A25; --on-primary:#FFFFFF;
  --primary-c:#C4EED0; --on-primary-c:#002110;
  --secondary-c:#D3E8D4; --on-secondary-c:#0F2014;
  --primary-soft:#C4EED0; --focus:rgba(20,108,46,.28); --focus-ring:#146C2E;
  --accent:#6E3BC1; --accent-soft:#E9DDFF;

  /* Status: teks/ikon · wadah kuat (chip) · wadah lembut (ubin) */
  --ok:#146C2E;     --ok-c:#C4EED0;   --ok-on:#0D5323;   --ok-soft:#E7F5EC;
  --warn:#7A5900;   --warn-c:#FFEFC2; --warn-on:#5C4300; --warn-soft:#FEF5DA;
  --danger:#B3261E; --danger-c:#F9DEDC; --danger-on:#8C1D18; --danger-soft:#FCEEEE;
  --info:#0B57D0;   --info-c:#D3E3FD; --info-on:#041E49; --info-soft:#EBF1FE;
  --pur:#6E3BC1;    --pur-c:#E9DDFF;  --pur-on:#25005A;  --pur-soft:#F3EDFC;
  --neutral-soft:rgba(25,28,25,.08);
  --ok-line:transparent; --warn-line:transparent; --danger-line:transparent; --info-line:transparent;

  --i-sm:20px; --i-md:24px; --i-lg:28px; --i-xl:32px; --i-2xl:48px;
  --tap:48px; --tap-lg:56px;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.2,0,0,1);
  --tabbar-h:80px;

  --radius:24px; --radius-sm:12px; --radius-lg:28px; --radius-xl:28px;
  --pad:var(--s4); --row-py:12px; --gap:var(--s3);
  --t-body:var(--t-base); --hero-num:38px;

  /* Tanda centang untuk chip/segmen terpilih (Material "check") */
  --cek:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:var(--bg)}
body{font-family:var(--font-ui); font-size:var(--t-body); line-height:1.4; color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility}
::placeholder{color:var(--label-3); font-weight:300}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
p{margin:0}
:focus-visible{outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:12px}

/* Umpan balik tekan: pegas + lapisan 6% */
button,.row,a.row,.navitem,.chip,.check,.btn{
  transition:transform .35s var(--spring), background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), border-radius .35s var(--spring)}
.btn:active,.row:active,.chip:active,.icon-btn:active,.navitem:active,.check:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .btn:active,.row:active,.chip:active,.icon-btn:active,.navitem:active,.check:active{transform:none}
}

/* ── Ikon ─────────────────────────────────────────────────────── */
.ic{width:1em; height:1em; display:block; fill:currentColor}
[data-ic]{display:inline-grid; place-items:center; line-height:0}
.ici{display:inline-grid; place-items:center; line-height:0}

/* ── Panggung: satu viewport HP, dibingkai di layar lebar ─────── */
.app-shell{display:block; min-height:100dvh; padding:0}
.stage{display:block; padding:0}
.phone{width:100%; height:100dvh; max-width:430px; margin:0 auto; position:relative; background:var(--bg);
  /* Lapisan modal diparkir di bawah layar (translateY). overflow:clip
     meniadakan gulir hantu saat papan ketik terbuka. */
  overflow:hidden; overflow:clip}
@media (min-width:431px){ .phone{ box-shadow:0 0 0 1px var(--sep) } body{background:var(--c)} }

/* ── Kerangka layar ───────────────────────────────────────────── */
.screen{display:none; position:absolute; inset:0; flex-direction:column; background:var(--bg)}
.screen.active{display:flex}
.scroll{flex:1; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.scroll.has-nav{padding-bottom:calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom))}
.pad{padding:var(--s2) var(--pad) var(--s4)}

/* ── Bar atas: tombol di baris 1, judul besar di baris 2 ─────── */
.appbar{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1); min-height:64px;
  padding:max(var(--s2), env(safe-area-inset-top)) var(--s1) 0; background:var(--bg); position:relative; z-index:30; flex:none}
/* Tepi 4 + sela 12 dalam tombol 48 + ruang kosong glyph ±4 = tinta ikon di
   20 — segaris dengan judul, judul bagian, dan sapaan Beranda. */
.appbar h2{order:99; flex-basis:100%; margin:0; padding:var(--s1) var(--s4) var(--s3);
  font-size:30px; line-height:38px; font-weight:700; letter-spacing:-.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Layar tab (tanpa tombol Kembali): judulnya sendirian di atas. */
.appbar > h2:first-child{padding-top:var(--s5)}
/* Tombol aksi pertama sesudah judul (urutan DOM) didorong ke kanan. */
.appbar > h2 + .icon-btn, .appbar > h2 + .btn{margin-left:auto}
.icon-btn{width:var(--tap); height:var(--tap); border-radius:999px; display:grid; place-items:center;
  flex:none; font-size:var(--i-md); color:var(--ink); position:relative; background:transparent}
.icon-btn:hover{background:rgba(25,28,25,.06)}
.dot-badge{position:absolute; top:8px; right:8px; width:10px; height:10px; background:var(--danger); border-radius:50%; border:2px solid var(--bg)}
.dot-badge:empty{display:none}
.dot-badge.on{display:block}

/* ── Judul bagian ─────────────────────────────────────────────── */
.sec{display:block; font-size:var(--t-title2); line-height:28px; font-weight:700; letter-spacing:-.2px;
  color:var(--ink); margin:var(--s8) var(--s1) var(--s3); padding:0; text-transform:none}
.sec:first-child{margin-top:var(--s2)}
.pad * + * > .sec:first-child{margin-top:var(--s8)}
.sec-row{display:flex; align-items:center; gap:var(--s3); margin:var(--s8) var(--s1) var(--s3)}
.sec-row .sec{flex:1; margin:0; min-width:0}
.filter-date-btn{display:inline-flex; align-items:center; gap:6px; flex:none; position:relative;
  min-height:40px; padding:0 var(--s3); border:1px solid var(--outline-v); border-radius:12px;
  background:var(--bg); font-size:var(--t-sm); font-weight:500; color:var(--ink)}
.filter-date-btn .ic{font-size:18px}
.filter-date-btn.active{background:var(--secondary-c); border-color:var(--secondary-c); color:var(--on-secondary-c); font-weight:700}
.filter-date-btn .chev{color:inherit}
.filter-date-btn .chev .ic{font-size:16px; transform:rotate(90deg)}
.filter-date-btn::after{content:''; position:absolute; inset:-4px -2px}

/* ── Tipografi ────────────────────────────────────────────────── */
.h-card{font-size:18px; line-height:24px; font-weight:700; margin:0 0 2px; letter-spacing:0}
.h-screen{font-size:30px; line-height:38px; font-weight:700; letter-spacing:-.5px; margin:0 0 var(--s2)}
.t-sm{font-size:var(--t-sm); color:var(--muted); line-height:1.45; font-weight:400}
.t-xs{font-size:var(--t-xs); color:var(--muted); line-height:1.4; font-weight:300}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.money-hero{font-size:var(--hero-num); line-height:44px; font-weight:700; letter-spacing:-.6px; font-variant-numeric:tabular-nums; white-space:nowrap}
.money-md{font-size:var(--t-xl); font-weight:700; letter-spacing:-.4px; font-variant-numeric:tabular-nums}
.rp{font-size:.6em; font-weight:600; margin-right:2px; letter-spacing:0; vertical-align:.14em; opacity:.8}

/* ── Kartu: wadah hijau muda, sudut 28, tanpa garis ───────────── */
.card,.card-raised,.card-quiet{background:var(--c); border-radius:var(--radius-lg); padding:var(--s5)}
.card-quiet{color:var(--muted)}
.card-raised.on-danger{background:var(--danger-soft)}
.card-raised.on-warn{background:var(--warn-soft)}
/* Daftar bersegmen: baris terpisah 3px, ujung atas & bawah membulat 24 */
.card-flat{display:flex; flex-direction:column; gap:3px; background:transparent; border-radius:var(--radius); overflow:visible}
/* :not(.row) di pembungkus: baris tunggal ber-kelas "row card-flat" tidak
   boleh ikut mewarnai anaknya — lingkaran ikonnya jadi hilang. */
.card-flat:not(.row) > :not(.row):not(.sec):not(script){background:var(--c); border-radius:var(--radius)}
.card-flat > .pad{padding:var(--s4)}
.card + .card, .card + .card-quiet, .card-quiet + .card, .card-flat + .card,
.card + .card-flat, .card-raised + .card, .card + .card-raised, .card-flat + .card-flat,
.card-quiet + .card-flat, .card-flat + .card-quiet, .card-raised + .card-flat, .card-flat + .card-raised,
.card-quiet + .card-quiet, .card-raised + .card-raised{margin-top:var(--gap)}
:is(.btn, .btn-row, .note, .stat-grid, .sums) + :is(.card, .card-flat, .card-quiet, .card-raised),
:is(.card, .card-flat, .card-quiet, .card-raised, .note) + :is(.btn, .btn-row),
:is(.sec, .sec-row)[style*="display: none"] + :is(.card, .card-flat, .card-quiet, .card-raised){margin-top:var(--gap)}
.btn + .btn-row{margin-top:var(--s2)}

/* ── Baris daftar ─────────────────────────────────────────────── */
.row{display:flex; align-items:center; gap:14px; padding:var(--row-py) var(--s4);
  min-height:76px; width:100%; text-align:left; position:relative; background:var(--c); color:inherit;
  border-radius:6px}
.card-flat > .row:first-child{border-top-left-radius:var(--radius); border-top-right-radius:var(--radius)}
.card-flat > .row:last-child{border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius)}
.row.card-flat,.row:only-child{border-radius:var(--radius)}
.sheet .row{background:var(--c)}
.row:hover{background:#E6EEE7}
.row-static,.row-static:hover{cursor:default; background:var(--c)}
.row-static:active{transform:none}
.row-main{flex:1; min-width:0}
.row-title{display:block; font-size:18px; font-weight:600; line-height:24px}
.row-sub{display:block; font-size:var(--t-sm); color:var(--muted); margin-top:2px; line-height:20px; font-weight:300}
.row-end{text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:var(--s1)}
.row-end .row-title{font-weight:700}
.row-trunc .row-title,.row-trunc .row-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chev{color:var(--muted); flex:none; font-size:24px}
/* Ikon ujung baris ditarik keluar sebesar ruang kosong di kanan glyph-nya
   (chevron ±9px, telepon/centang ±4px) supaya tintanya berjarak 16 dari
   tepi — sama dengan lingkaran ikon di kiri. */
:is(.row,.ubin-kecil) > .chev{margin-right:-4px}
:is(.row,.ubin-kecil) > .chev[data-ic="next"]{margin-right:-9px}
.pick-row[aria-pressed="true"]{background:var(--secondary-c)}
.pick-row[aria-pressed="true"] .row-title{color:var(--on-secondary-c); font-weight:700}
.row[aria-pressed="true"]{background:var(--secondary-c)}

/* Lingkaran ikon (dulu kotak iOS berwarna) */
.tile{width:48px; height:48px; border-radius:999px; display:grid; place-items:center; flex:none;
  background:var(--bg); color:var(--muted); font-size:24px; font-weight:700}
.tile-sm{font-size:15px; letter-spacing:0; background:var(--secondary-c); color:var(--on-secondary-c)}
.tile-ok{background:var(--primary-c); color:var(--on-primary-c)}
.tile-danger{background:var(--danger-c); color:var(--danger-on)}
.tile-warn{background:var(--warn-c); color:var(--warn-on)}
.tile-info,.tile-cyan{background:var(--info-c); color:var(--info-on)}
.tile-accent,.tile-violet,.tile-pink{background:var(--pur-c); color:var(--pur-on)}
.card .tile,.card-raised .tile,.card-quiet .tile{background:var(--bg)}
.card .tile-ok,.card-raised .tile-ok{background:var(--primary-c)}
.card .tile-danger,.card-raised .tile-danger{background:var(--danger-c)}
.card .tile-warn,.card-raised .tile-warn{background:var(--warn-c)}
.card .tile-info,.card-raised .tile-info{background:var(--info-c)}
.card .tile-sm{background:var(--secondary-c)}

.avatar,button.tile{padding:0}
.ava-in{width:100%; height:100%; border-radius:inherit; overflow:hidden; display:grid; place-items:center}
.ava-in img{width:100%; height:100%; object-fit:cover; display:block}
.ava-edit{position:relative; overflow:visible}
.ava-edit .cam{position:absolute; right:-4px; bottom:-4px; width:30px; height:30px; border-radius:999px;
  background:var(--primary); color:#fff; display:grid; place-items:center; font-size:18px; box-shadow:0 0 0 3px var(--c)}
.ava-file{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

/* ── Tombol: penuh bulat, 56px ────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); position:relative;
  min-height:var(--tap-lg); padding:0 var(--s6); border-radius:999px; width:100%;
  font-size:var(--t-base); font-weight:600; line-height:1.2; border:0; text-align:center}
.btn .ic{font-size:22px}
.btn-lg{min-height:var(--tap-lg)}
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-600)}
.btn-outline{background:var(--secondary-c); color:var(--on-secondary-c)}
.btn-outline:hover{background:#C6DFC8}
.card .btn-outline,.card-raised .btn-outline,.card-quiet .btn-outline,.note .btn-outline{background:var(--bg); color:var(--primary)}
.btn-danger{background:var(--danger); color:#fff}
.btn-quiet{background:transparent; color:var(--primary)}
.btn-quiet:hover{background:rgba(20,108,46,.08)}
.btn-quiet-danger{background:transparent; color:var(--danger)}
.btn-quiet-danger:hover{background:rgba(179,38,30,.08)}
.btn-link{background:none; color:var(--primary); font-weight:600; min-height:var(--tap); padding:0 var(--s3)}
.btn-link:hover{background:rgba(20,108,46,.08)}
.btn-row{display:flex; gap:var(--s2)}
.btn-row .btn{width:auto; flex:1; min-width:0; padding:0 var(--s4)}
.btn-mini{width:auto; min-height:40px; padding:0 var(--s4); font-size:var(--t-sm)}
.btn-mini.btn-quiet{background:var(--bg); color:var(--primary)}
.btn-mini.btn-quiet-danger{background:transparent; color:var(--danger)}
.btn-mini::after{content:''; position:absolute; inset:-4px 0}
.btn[disabled]{opacity:.45; cursor:default}
.btn[disabled]:active{transform:none}
.btn-primary[disabled]:hover{background:var(--primary)}

/* Tombol melayang (FAB) — satu-satunya yang berbayang */
.fab{position:absolute; right:var(--s4); bottom:calc(var(--tabbar-h) + var(--s4) + env(safe-area-inset-bottom)); z-index:35;
  display:inline-flex; align-items:center; gap:10px; min-height:56px; padding:0 var(--s5) 0 var(--s4);
  border-radius:18px; background:var(--primary-c); color:var(--on-primary-c); font-size:var(--t-base); font-weight:600;
  box-shadow:0 3px 6px rgba(0,0,0,.14), 0 6px 18px rgba(0,0,0,.10)}
.fab .ic{font-size:24px}

/* ── Chip status ──────────────────────────────────────────────── */
.pill{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 var(--s3);
  border-radius:999px; font-size:var(--t-xs); font-weight:600; white-space:nowrap; border:0; line-height:1.2}
.pill .ic{font-size:18px}
.pill:has(.ic){padding-left:var(--s2)}
.pill-ok{background:var(--ok-c); color:var(--ok-on)}
.pill-danger{background:var(--danger-c); color:var(--danger-on)}
.pill-warn{background:var(--warn-c); color:var(--warn-on)}
.pill-info{background:var(--info-c); color:var(--info-on)}
.pill-neutral{background:var(--neutral-soft); color:var(--muted)}
.pill-accent{background:var(--pur-c); color:var(--pur-on)}

/* Chip ringkasan: ikon + angka tebal + kata tipis */
.sums{display:flex; gap:var(--s2); flex-wrap:wrap}
.sum{display:inline-flex; align-items:center; gap:var(--s2); min-height:40px; padding:0 14px 0 10px;
  border-radius:12px; font-size:var(--t-sm); font-weight:300; background:var(--c); color:var(--ink); border:0}
.sum b{font-weight:700}
.sum .ic{font-size:20px}
.sum.ok{background:var(--ok-c); color:var(--ok-on)} .sum.bad{background:var(--danger-c); color:var(--danger-on)}
.sum.warn{background:var(--warn-c); color:var(--warn-on)} .sum.info{background:var(--info-c); color:var(--info-on)}
.sum.pur{background:var(--pur-c); color:var(--pur-on)}

/* ── Bar bawah: wadah hijau muda, pil di belakang ikon aktif ──── */
.bottomnav{position:absolute; left:0; right:0; bottom:0; z-index:40;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding:0 var(--s1) env(safe-area-inset-bottom);
  background:var(--c); display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); align-items:start}
/* padding kiri-kanan bawaan <button> (6px) di-nol-kan: dengan 5 tab
   (pengurus + Kelola) tiap tab jadi minimal 76px dan tab Saya terpotong
   di HP 360–375px. */
.navitem{display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 0 0; min-width:0; height:var(--tabbar-h);
  font-size:var(--t-2xs); font-weight:500; color:var(--muted); position:relative}
.navitem .ici{width:64px; max-width:calc(100% - 4px); height:32px; border-radius:16px; display:grid; place-items:center; font-size:24px;
  transition:background-color .2s var(--ease)}
.navitem[aria-current="true"]{color:var(--ink); font-weight:700}
.navitem[aria-current="true"] .ici{background:var(--primary-c); color:var(--on-primary-c)}
.navitem:active{transform:none}
.navitem:active .ici{transform:scale(.92)}
.nav-badge{position:absolute; top:6px; left:calc(50% + 10px); min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--danger); color:#fff; font-size:12px; line-height:18px; font-weight:700; text-align:center}

/* ── Beranda ──────────────────────────────────────────────────── */
.hero{padding:calc(var(--s4) + env(safe-area-inset-top)) var(--s5) var(--s2); color:var(--ink); position:relative}
.hero .hi{font-size:var(--t-md); color:var(--muted); font-weight:300}
.hero .who{font-size:30px; line-height:36px; font-weight:700; letter-spacing:-.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hero .sub-who{font-size:var(--t-sm); color:var(--muted); font-weight:300; margin-top:2px}
.hero .icon-btn{color:var(--ink)}
.avatar{width:48px; height:48px; border-radius:999px; display:grid; place-items:center; flex:none; position:relative;
  background:var(--secondary-c); color:var(--on-secondary-c); font-size:var(--t-sm); font-weight:700}
.hero .avatar::after,.hero .icon-btn::after{content:''; position:absolute; inset:-2px}

/* Ubin besar (kategori): satu baris berwarna per layar */
.headline-card,.tile-besar{border-radius:var(--radius-lg); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4);
  background:var(--c); position:relative}
.headline-card{margin:var(--s3) var(--pad) 0}
.tile-besar.t-ok,.headline-card.t-ok{background:var(--ok-soft)}
.tile-besar.t-warn,.headline-card.t-warn{background:var(--warn-soft)}
.tile-besar.t-bad,.headline-card.t-bad{background:var(--danger-soft)}
.tile-besar.t-pur,.headline-card.t-pur{background:var(--pur-soft)}
.tb-atas{display:flex; align-items:center; justify-content:space-between; gap:var(--s2)}
.tb-ikon{font-size:32px; color:var(--primary)}
.t-warn .tb-ikon{color:var(--warn)} .t-bad .tb-ikon{color:var(--danger)} .t-pur .tb-ikon{color:var(--pur)}
.tb-label{font-size:var(--t-md); line-height:24px; margin:0}
.tb-nilai{font-size:var(--hero-num); line-height:44px; font-weight:700; letter-spacing:-.6px; margin:2px 0 0;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.tb-sub{font-size:var(--t-sm); line-height:20px; color:var(--muted); font-weight:300; margin:4px 0 0}
.tb-sub strong{font-weight:600; color:var(--ink)}
.headline-card .btn{margin:0}
.bal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s2)}
.bal-head > div{min-width:0}
.eye{width:var(--tap); height:var(--tap); border-radius:999px; display:grid; place-items:center;
  font-size:22px; color:var(--muted); margin:-10px -10px 0 0; flex:none}
.eye:hover{background:rgba(25,28,25,.06)}

/* Ubin kecil (Uang kas di Beranda) */
.ubin-kecil{display:flex; align-items:center; gap:14px; width:100%; min-height:88px; text-align:left;
  padding:var(--s3) var(--s4); background:var(--c); border-radius:var(--radius); margin-top:var(--s3)}
.ubin-kecil .uk-ikon{width:52px; height:52px; border-radius:999px; background:var(--bg); color:var(--primary);
  display:grid; place-items:center; font-size:28px; flex:none}
.ubin-kecil .uk-label{display:block; font-size:var(--t-sm); line-height:20px; color:var(--muted); font-weight:300}
.ubin-kecil .uk-nilai{display:block; font-size:24px; line-height:30px; font-weight:700; letter-spacing:-.3px; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── Rumah & denah ────────────────────────────────────────────── */
.segmented{display:flex; min-height:48px; border:1px solid var(--outline); border-radius:999px; overflow:hidden; padding:0; gap:0}
.segmented button{flex:1; min-height:46px; font-size:var(--t-sm); font-weight:500; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:6px; position:relative}
.segmented button + button{border-left:1px solid var(--outline)}
.segmented button .ic{font-size:20px}
.segmented button[aria-pressed="true"]{background:var(--secondary-c); color:var(--on-secondary-c); font-weight:700}
.segmented button[aria-pressed="true"] [data-ic]{display:none}
.segmented button[aria-pressed="true"]::before{content:''; width:18px; height:18px; background:currentColor;
  -webkit-mask:var(--cek) center/contain no-repeat; mask:var(--cek) center/contain no-repeat; flex:none}
.segmented button:active{transform:none}
.legend{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3)}
.lg-item{display:inline-flex; align-items:center; gap:var(--s2); min-height:40px; font-size:var(--t-sm); font-weight:500;
  padding:0 14px 0 10px; border-radius:12px; border:0; background:var(--c); color:var(--ink)}
.lg-swatch{width:18px; height:18px; border-radius:6px; display:grid; place-items:center; font-size:10px; color:#fff; font-weight:700}
.sw-kosong{background:repeating-linear-gradient(45deg,#707970 0 3px,#C0C9BF 3px 6px)!important}
.sw-dijual{background:radial-gradient(circle at 50% 50%,#6E3BC1 0 2px,#E9DDFF 2px)!important}
.map-wrap{position:relative; background:var(--c); border-radius:var(--radius-lg); overflow:hidden; margin-top:var(--s3); touch-action:none}
#siteplan{display:block; width:100%; height:352px; background:var(--c)}
.zoomctl{position:absolute; right:var(--s3); top:var(--s3); display:flex; flex-direction:column; gap:var(--s2)}
.zoomctl button{width:48px; height:48px; border-radius:16px; background:var(--bg); font-size:24px; display:grid; place-items:center; color:var(--ink)}
.zoomctl button[disabled]{color:var(--outline-v)}
.zoomctl button:active{transform:scale(.94)}
.zoom-level{position:absolute; left:var(--s3); bottom:var(--s3); background:var(--bg); color:var(--ink);
  font-size:var(--t-xs); font-weight:600; padding:4px 10px; border-radius:999px; font-variant-numeric:tabular-nums}
.hintbar{display:flex; gap:var(--s3); align-items:flex-start; margin-top:var(--s3); padding:14px var(--s4);
  border-radius:20px; background:var(--warn-soft); color:var(--ink); font-size:var(--t-sm); line-height:1.4}
.hintbar.ok{background:var(--ok-soft)}
.hintbar > [data-ic]{margin-top:1px; color:var(--warn); font-size:22px}
.hintbar.ok > [data-ic]{color:var(--ok)}
.house rect{stroke:#fff; stroke-width:1.5}
.house text{font-size:11px; font-weight:700; fill:#fff; text-anchor:middle; pointer-events:none}
.house.locked{cursor:default}
.blok-label{font-size:10px; font-weight:700; fill:var(--muted); letter-spacing:.06em}
.jalan{fill:#FFFFFF}
.jalan-txt{font-size:10px; fill:var(--label-3); letter-spacing:.1em; font-weight:600}

/* ── Lembar bawah (modal) ─────────────────────────────────────── */
.sheet-scrim{position:absolute; inset:0; background:rgba(25,28,25,.32); z-index:70;
  opacity:0; pointer-events:none; transition:opacity .24s var(--ease)}
.sheet-scrim.open{opacity:1; pointer-events:auto}
.sheet{position:absolute; left:0; right:0; bottom:0; z-index:71; background:var(--bg);
  border-radius:28px 28px 0 0; transform:translateY(100%);
  max-height:90%; display:flex; flex-direction:column;
  /* Lembar yang sedang menutup tidak boleh menerima ketukan: ketukan kedua
     yang cepat bisa mengenai tombol di lembar itu (mis. "Ya, hapus"). Begitu
     animasinya selesai, lembar juga hilang dari Tab & pembaca layar. */
  pointer-events:none; visibility:hidden;
  transition:transform .38s var(--ease), visibility 0s linear .38s}
.sheet.open,.sheet.peek{pointer-events:auto; visibility:visible; transition:transform .38s var(--ease), visibility 0s}
.sheet.open{transform:translateY(0)}
.sheet.peek{transform:translateY(calc(100% - 140px))}
.sheet-grab{width:32px; height:4px; border-radius:999px; background:var(--outline); opacity:.5; margin:var(--s3) auto var(--s2); flex:none}
/* Kanan 3px: glyph Tutup punya ruang kosong 5px → tintanya di 20, sama dengan judul. */
.sheet-head{display:flex; align-items:center; gap:var(--s2); padding:0 3px 0 var(--s5); flex:none; min-height:48px}
.sheet-head h3{flex:1; margin:0; font-size:24px; line-height:32px; font-weight:700; letter-spacing:-.2px}
.sheet-head .icon-btn{color:var(--muted)}
.sheet-body{overflow-y:auto; padding:var(--s2) var(--s4) max(var(--s6), env(safe-area-inset-bottom)); scrollbar-width:none}
.sheet-body::-webkit-scrollbar{display:none}
/* Satu garis teks di lembar = 20px (sama dengan judul, judul bagian, dan
   keterangan di bawah isian); kotak (isian, kartu, tombol) di garis 16px.
   Dulu label & paragraf lepas di 16 → label dan keterangan di bawah
   isian yang sama terpaut 4px. */
/* Berlaku juga di layar (.pad): formulir Daftarkan warga & Lengkapi data. */
:is(.sheet-body, .pad) :is(.label, .t-sm, .t-xs, p):not(:is(.card, .card-quiet, .card-raised, .card-flat, .note, .row, .btn, .chip,
  .check, .kv, .stat, .hintbar, .wa-bubble, .tile-besar, .headline-card, .auth-card, .ubin-kecil, .row-main, .sec-row) *):not(.hintline){padding-inline:var(--s1)}

/* Snackbar */
.toast-wrap{position:absolute; left:var(--s4); right:var(--s4); bottom:calc(var(--tabbar-h) + var(--s4) + env(safe-area-inset-bottom)); z-index:90;
  display:flex; flex-direction:column; gap:var(--s2); pointer-events:none}
.toast{display:flex; align-items:center; gap:var(--s3); min-height:52px; padding:var(--s3) var(--s4);
  border-radius:16px; background:#2E312E; color:#EFF2EC; font-size:var(--t-sm); font-weight:500; line-height:1.35;
  box-shadow:0 4px 12px rgba(0,0,0,.18); animation:toastIn .35s var(--spring) both}
.toast .ic{font-size:22px; flex:none; color:#8BD89D}
.toast.warn .ic{color:#EBC248} .toast.bad .ic{color:#FFB4AB}
.toast.out{animation:toastOut .2s ease-in both}
#mSheet.open ~ .toast-wrap,.toast-wrap.atas{top:calc(var(--s4) + env(safe-area-inset-top)); bottom:auto}
@keyframes toastIn{from{opacity:0; transform:translateY(12px) scale(.97)} to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateY(8px)}}

.upbar{height:8px; border-radius:999px; background:var(--ch); overflow:hidden; margin-top:var(--s2)}
.upbar > i{display:block; height:100%; width:0; background:var(--primary); transition:width .25s linear}

/* ── Isian: terisi, sudut 12, tanpa garis ─────────────────────── */
.field{margin-bottom:var(--s4)}
.label{display:block; font-size:var(--t-sm); font-weight:500; margin:0 0 6px; color:var(--ink)}
.input,.select,.textarea{width:100%; min-height:var(--tap-lg); padding:var(--s3) var(--s4);
  font-size:var(--t-base); border:0; border-radius:12px; background:var(--ch); color:var(--ink);
  font-family:inherit; line-height:1.35; transition:box-shadow .16s var(--ease), background-color .16s var(--ease)}
.card .input,.card .select,.card .textarea,.card-raised .input,.card-quiet .input{background:var(--bg)}
.input:focus,.select:focus,.textarea:focus{outline:none; box-shadow:inset 0 0 0 2px var(--primary)}
.input[readonly],.input:disabled{color:var(--muted)}
.textarea{min-height:120px; resize:none}
.hintline{font-size:var(--t-xs); color:var(--muted); font-weight:300; margin:6px var(--s1) 0; line-height:1.4}
.hintline.err{color:var(--danger); font-weight:600}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{background:var(--danger-soft); box-shadow:inset 0 0 0 2px var(--danger)}
input[type="file"]{font-size:var(--t-sm); color:var(--muted)}
input[type="file"]::file-selector-button{font:inherit; font-weight:600; min-height:40px; padding:0 var(--s4); margin-right:var(--s3);
  border:0; border-radius:999px; background:var(--secondary-c); color:var(--on-secondary-c); cursor:pointer}
.file-pick{position:relative}
.file-pick:focus-within{outline:3px solid var(--focus-ring); outline-offset:2px}
.input-ic{position:relative}
.input-ic > [data-ic]{position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:24px; color:var(--muted); pointer-events:none}
.input-ic .input{padding-left:52px}

.otp-row{display:flex; gap:6px; justify-content:center; margin:var(--s1) 0}
.otp-box{width:44px; height:56px; border-radius:12px; background:var(--ch); display:grid; place-items:center;
  font-size:var(--t-xl); font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); box-shadow:inset 0 0 0 0 transparent}
.otp-box.filled{box-shadow:inset 0 0 0 2px var(--primary)}
.pin-row{position:relative}
.pin-row .otp-box{flex:1 1 0; min-width:0; max-width:44px; color:transparent; position:relative;
  transition:box-shadow .14s var(--ease), background-color .14s var(--ease)}
.pin-row .otp-box.filled::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%; background:var(--ink)}
.pin-row input{position:absolute; inset:0; width:100%; height:100%; opacity:0; font-size:16px; border:0; padding:0; margin:0; cursor:pointer}
.pin-row:has(input:focus):not(.err) .otp-box:not(.filled){box-shadow:inset 0 0 0 1px var(--outline)}
.pin-row.err .otp-box{background:var(--danger-soft); box-shadow:inset 0 0 0 2px var(--danger)}

/* Chip pilihan (filter/jumlah bulan) */
.chip-row{display:flex; flex-wrap:wrap; gap:var(--s2)}
.chip-scroll{display:flex; gap:var(--s2); overflow-x:auto; scrollbar-width:none}
.chip-scroll::-webkit-scrollbar{display:none}
.chip-scroll .chip{flex:none}
.chip-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.chip-grid .chip{width:100%; justify-content:flex-start}
.chip{min-height:44px; padding:0 var(--s4); border-radius:12px; border:1px solid var(--outline-v); background:var(--bg);
  font-size:var(--t-sm); font-weight:500; display:inline-flex; align-items:center; gap:6px; color:var(--ink)}
.chip .ic{font-size:18px}
.chip[aria-pressed="true"]{background:var(--secondary-c); border-color:var(--secondary-c); color:var(--on-secondary-c); font-weight:700; padding-left:10px}
.chip[aria-pressed="true"] [data-ic]{display:none}
.chip[aria-pressed="true"]::before{content:''; width:18px; height:18px; background:currentColor; flex:none;
  -webkit-mask:var(--cek) center/contain no-repeat; mask:var(--cek) center/contain no-repeat}
.chip.d[aria-pressed="true"]{background:var(--danger-c); border-color:var(--danger-c); color:var(--danger-on)}
/* Kotak centang */
.check{display:flex; gap:var(--s3); align-items:center; padding:var(--s3) var(--s4); border-radius:20px;
  background:var(--c); width:100%; text-align:left; min-height:var(--tap-lg)}
.check .box{width:24px; height:24px; border-radius:6px; border:2px solid var(--outline); flex:none;
  display:grid; place-items:center; font-size:18px; color:transparent; background:var(--bg)}
.check[aria-pressed="true"]{background:var(--secondary-c)}
.check[aria-pressed="true"] .box{background:var(--primary); border-color:var(--primary); color:#fff}

/* ── Catatan / insight ────────────────────────────────────────── */
.note{display:flex; gap:var(--s3); padding:14px var(--s4); border-radius:20px; background:var(--c);
  font-size:var(--t-sm); line-height:1.45; color:var(--ink); align-items:flex-start; border:0}
.note > [data-ic]{color:var(--primary); font-size:22px; margin-top:0}
.note-info{background:var(--c)} .note-info > [data-ic]{color:var(--info)}
.note-ok{background:var(--ok-soft)} .note-ok > [data-ic]{color:var(--ok)}
.note-warn{background:var(--warn-soft)} .note-warn > [data-ic]{color:var(--warn)}
.note-danger{background:var(--danger-soft)} .note-danger > [data-ic]{color:var(--danger)}
.note strong{font-weight:700}
.note a,.note .btn-link{color:var(--primary); font-weight:600}

/* ── Utilitas ─────────────────────────────────────────────────── */
/* Nilai panjang turun ke baris sendiri (flex-wrap), bukan diperas. */
.kv{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; column-gap:var(--s4); row-gap:2px;
  padding:10px 0; font-size:var(--t-base)}
.kv .k{color:var(--muted); font-weight:300; font-size:var(--t-sm); flex:none; display:inline-flex; align-items:center; gap:var(--s2)}
.kv .k .ic{font-size:20px}
.kv .v{font-weight:600; color:var(--ink); text-align:left; margin-left:auto; min-width:0}
.kv .v.money-md{font-size:24px; font-weight:700; letter-spacing:-.3px}
.bar{height:10px; border-radius:999px; background:var(--ch); overflow:hidden}
.bar > i{display:block; height:100%; border-radius:999px; background:var(--primary)}
/* minmax(0,1fr): dua kolom selalu sama lebar — 1fr biasa melebar mengikuti
   angka nowrap dan mendorong kolom kanan keluar layar di HP 360px. */
.stat-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2)}
.stat{background:var(--c); border:0; border-radius:20px; padding:var(--s4)}
.stat .n{font-size:min(24px, 7.8vw - 8px); line-height:30px; font-weight:700; letter-spacing:-.3px; font-variant-numeric:tabular-nums; white-space:nowrap}
.stat .l{font-size:var(--t-xs); color:var(--muted); font-weight:300; margin-top:2px; line-height:1.3; display:flex; align-items:center; gap:6px}
.stat .l .ic{font-size:18px; flex:none}
.stat-filter{width:100%; text-align:left}
.stat-filter[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--primary); border-radius:16px}
#kasMasukBtn{background:var(--ok-soft)} #kasKeluarBtn{background:var(--danger-soft)}
#kasKeluarBtn[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--danger)}
.spark-x{display:flex; gap:var(--s1); margin-top:var(--s2)}
.spark-x span{flex:1; text-align:center; font-size:var(--t-2xs); color:var(--muted); font-weight:300}
.spark-x span.on{color:var(--ink); font-weight:700}
.spark-legend{display:flex; align-items:center; gap:var(--s4); margin-top:var(--s2)}
.spark-legend b{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-xs); font-weight:500; color:var(--muted)}
.spark-legend b::before{content:""; width:12px; height:12px; border-radius:4px; background:var(--dot,var(--muted))}
.spark-legend .lg-masuk{--dot:var(--primary)}
.spark-legend .lg-keluar{--dot:#E46962}
.spark2{display:flex; align-items:flex-end; gap:var(--s2); height:120px; margin-top:var(--s4)}
.spark2-col{flex:1; display:flex; align-items:flex-end; justify-content:center; gap:4px; height:100%; opacity:.55}
.spark2-col.on{opacity:1}
.spark2-col i{flex:1; max-width:14px; border-radius:7px}
.spark2-col i.masuk{background:var(--primary)}
.spark2-col i.keluar{background:#E46962}
.timeline{position:relative; padding-left:var(--s8)}
.timeline::before{content:""; position:absolute; left:11px; top:8px; bottom:8px; width:2px; background:var(--outline-v); border-radius:2px}
.tl-item{position:relative; padding-bottom:var(--s5)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:calc(var(--s8) * -1 + 2px); top:2px; width:20px; height:20px;
  border-radius:999px; background:var(--bg); box-shadow:inset 0 0 0 2px var(--outline-v)}
.tl-item.done::before{background:var(--primary); box-shadow:none}
.success-ring{width:104px; height:104px; border-radius:36px; background:var(--primary-c);
  display:grid; place-items:center; font-size:var(--i-2xl); color:var(--on-primary-c); margin:0 auto}
.wa-bubble{background:var(--bg); border-radius:20px 20px 20px 6px; padding:14px var(--s4);
  font-size:var(--t-md); line-height:1.45; color:var(--ink)}
.card .wa-bubble{background:var(--bg)}

/* ── State: kosong & memuat ───────────────────────────────────── */
.empty{text-align:center; padding:var(--s8) var(--s5)}
.empty .ec{width:64px; height:64px; border-radius:999px; background:var(--bg); color:var(--muted);
  display:grid; place-items:center; font-size:32px; margin:0 auto var(--s4)}
.sk{background:linear-gradient(90deg,var(--c) 25%,var(--ch) 50%,var(--c) 75%); background-size:200% 100%;
  animation:sk 1.3s linear infinite; border-radius:8px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Sumber data layar ini belum pernah termuat: isinya disembunyikan,
   hanya catatan Coba lagi yang tampil (tandaiLayarGagal di inti/sesi.js). */
.screen[data-gagal] .pad > :not(.gagal-muat){display:none !important}

/* ── Pita MODE LATIHAN (js/latihan/pintu.js) ──────────────────── */
:root{ --pita-latihan:0px }
html.latihan{ --pita-latihan:36px }
.pita-latihan{position:absolute; top:0; left:0; right:0; height:var(--pita-latihan); z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:0 var(--s3);
  background:var(--warn-on); color:#fff; font-size:var(--t-xs); font-weight:500; line-height:1.2}
.pita-latihan .pita-teks{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pita-latihan button{flex:none; min-height:28px; padding:0 var(--s3); border:0; border-radius:999px; position:relative;
  background:rgba(255,255,255,.22); color:#fff; font:inherit; font-weight:700; cursor:pointer}
.pita-latihan button::after{content:''; position:absolute; inset:-8px 0}
html.latihan .screen{top:var(--pita-latihan)}
html.latihan #sayaLatihan{display:none !important}

/* "Baru ditolak" di Sahkan pembayaran — terlipat, tapi jelas bisa dibuka. */
.ditolak-judul{display:flex; align-items:center; justify-content:space-between; min-height:48px; cursor:pointer; list-style:none}
.ditolak-judul::-webkit-details-marker{display:none}
.ditolak-buka::after{content:'Lihat'; color:var(--primary); font-size:var(--t-md); font-weight:600}
details[open] > .ditolak-judul .ditolak-buka::after{content:'Tutup'}

/* Sakelar hak jabatan & menu warga — seluruh baris yang diketuk. */
.hak-baris{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); width:100%;
  min-height:56px; padding:var(--s2) 0; background:none; border:0; border-top:1px solid var(--sep);
  font:inherit; font-size:var(--t-md); color:var(--ink); text-align:left; cursor:pointer}
.hak-baris:first-child{border-top:0}
.hak-baris[aria-disabled="true"]{cursor:default; color:var(--muted)}
.hak-baris:disabled{opacity:.6}
.switch{flex:none; position:relative; width:52px; height:32px; border-radius:999px; background:var(--ch);
  box-shadow:inset 0 0 0 2px var(--outline); transition:background .2s var(--ease)}
.switch::after{content:''; position:absolute; top:8px; left:8px; width:16px; height:16px; border-radius:50%;
  background:var(--outline); transition:all .3s var(--spring)}
.hak-baris[aria-checked="true"] .switch{background:var(--primary); box-shadow:none}
.hak-baris[aria-checked="true"] .switch::after{top:4px; left:24px; width:24px; height:24px; background:#fff}

/* ── Tarik untuk muat ulang (inti/nav.js) ─────────────────────── */
.ptr{position:absolute; left:50%; top:0; margin-top:-44px; z-index:25; width:40px; height:40px; display:grid; place-items:center;
  border-radius:999px; background:var(--bg); color:var(--muted); font-size:22px; box-shadow:0 2px 8px rgba(0,0,0,.16);
  opacity:0; pointer-events:none; transform:translate(-50%,0); transition:transform .25s var(--ease), opacity .25s var(--ease)}
.ptr.siap,.ptr.putar{color:var(--primary)}
.ptr.putar .ic{animation:ptr-putar .8s linear infinite}
@keyframes ptr-putar{to{transform:rotate(360deg)}}

/* ── Area sentuh minimal 48 ───────────────────────────────────── */
.tombol-teks{min-height:48px; padding:0 var(--s2); border:0; background:transparent; color:var(--primary); font-weight:600}

/* ═══════════════════════════════════════════════════════════════
   LAYAR MASUK & PIN — satu aksi, tanpa bar bawah
   ═══════════════════════════════════════════════════════════════ */
.screen-auth{background:var(--bg)}
.screen-auth .scroll{display:flex; flex-direction:column}
.auth-pad{flex:1; display:flex; flex-direction:column; text-align:center;
  padding-top:max(var(--s6), env(safe-area-inset-top)); padding-bottom:max(var(--s5), calc(env(safe-area-inset-bottom) + var(--s2)))}
.auth-head{margin-top:auto; margin-bottom:var(--s8)}
.auth-pad > form{margin-bottom:auto}
.auth-foot{margin:0; padding-top:var(--s5)}
.auth-brand{flex:none; margin:auto auto var(--s8); padding:0; line-height:0; width:min(56%, 220px)}
.auth-brand img{display:block; width:100%; height:auto; animation:brand-muncul .6s var(--ease) both}
.auth-card{text-align:left; background:var(--c); border-radius:var(--radius-lg); padding:var(--s5)}
.auth-card .input{background:var(--bg)}
.screen-auth[data-screen="login"] .field{margin-bottom:var(--s4)}
.screen-auth[data-screen="login"] .field:last-of-type{margin-bottom:0}
[data-screen="login"] .btn-link{margin-top:var(--s2); width:100%}
#masukHint{min-height:1.4em; margin:var(--s3) 0 var(--s2)}
@media (max-width:359px){ #masukHint{ min-height:2.8em } }
#pinMasuk{letter-spacing:.3em; font-size:var(--t-lg)}
#pinMasuk::placeholder{letter-spacing:normal; font-size:var(--t-base)}
#hp{font-variant-numeric:tabular-nums; letter-spacing:.04em}
.auth-mark{width:64px; height:64px; border-radius:22px; display:grid; place-items:center; font-size:32px;
  margin:0 auto var(--s5); background:var(--primary-c); color:var(--on-primary-c)}
.screen-auth .h-screen{font-size:var(--t-2xl)}
.auth-note{margin:0 auto; max-width:34ch; font-size:var(--t-sm); line-height:1.5; color:var(--muted); font-weight:300}
.auth-note strong{color:var(--ink); font-weight:600}
.screen-auth .field{margin-bottom:var(--s2)}
#pinLupa{max-width:32ch; margin-inline:auto}
.screen-auth .input:-webkit-autofill,.screen-auth .input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink); -webkit-box-shadow:inset 0 0 0 100px #FFFFFF; caret-color:var(--ink)}
#pinKet #pinHp{display:inline-block; margin-top:var(--s2); padding:8px var(--s4); border-radius:999px;
  background:var(--c); font-weight:700; font-variant-numeric:tabular-nums}
@keyframes brand-muncul{from{opacity:0; transform:scale(.95)} to{opacity:1; transform:none}}
.row-act{display:block; font-size:var(--t-xs); line-height:18px; font-weight:700; letter-spacing:.2px; margin-bottom:2px}
.tile-besar .note,.headline-card .note{background:var(--bg); margin:0}
.tile-besar .btn-outline{background:var(--bg); color:var(--primary)}
/* Pilihan jumlah bulan di layar Bayar: empat chip satu baris. */
#praChips{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
#praChips .chip{justify-content:center; padding:0 6px}
#praChips .chip[aria-pressed="true"]{padding-left:6px}
#praChips .chip[aria-pressed="true"]::before{display:none}
.btn-row .btn{padding:0 var(--s3); font-size:var(--t-md)}
.btn-row .btn .ic{font-size:20px}
/* Ruang di bawah daftar Kas supaya tombol melayang Catat tidak menutupi baris terakhir. */
[data-screen="kas"] .scroll.has-nav{padding-bottom:calc(var(--tabbar-h) + 96px + env(safe-area-inset-bottom))}
/* Baris tunggal yang memakai .card-flat sebagai pembungkusnya sendiri. */
.row.card-flat{flex-direction:row; gap:14px; background:var(--c); border-radius:var(--radius)}

/* ── Banner "Pasang di HP" (inti/pasang.js) ───────────────────────
   Melayang di bawah, di atas bar bawah kalau layar itu punya. */
.pasang-banner{position:absolute; left:var(--s4); right:var(--s4); z-index:60;
  bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s1) var(--s3) var(--s3);
  background:var(--bg); border-radius:var(--radius); box-shadow:0 3px 6px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.12);
  opacity:0; transform:translateY(16px); transition:opacity .25s var(--ease), transform .35s var(--spring)}
.phone:has(.screen.active .bottomnav) .pasang-banner{bottom:calc(var(--tabbar-h) + var(--s3) + env(safe-area-inset-bottom))}
.pasang-banner.muncul{opacity:1; transform:none}
.pasang-banner img{width:48px; height:48px; border-radius:12px; flex:none}
.pasang-teks{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.pasang-teks b{font-size:var(--t-base); font-weight:700}
.pasang-teks span{font-size:var(--t-xs); font-weight:300; color:var(--muted)}
.pasang-banner .btn{flex:none}
.pasang-banner .icon-btn{color:var(--muted); margin-left:calc(var(--s1) * -1)}
/* Hanya di layar pintu masuk (Masuk & Beranda) — layar lain punya tombol
   melayang sendiri (Catat di Kas) yang akan tertutup. Isinya diberi ruang
   supaya baris terakhir bisa digulir ke atas banner. */
.phone:not(:has(.screen.active:is([data-screen="login"],[data-screen="beranda"]))) .pasang-banner{display:none}
.phone:has(.pasang-banner) [data-screen="beranda"] .scroll.has-nav{padding-bottom:calc(var(--tabbar-h) + 128px + env(safe-area-inset-bottom))}
.phone:has(.pasang-banner) [data-screen="login"] .auth-pad{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
/* Keterangan strip iuran 6 bulan: ikon yang sama dengan kotaknya, bukan simbol teks. */
.iuran6-ket{display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--s3); row-gap:4px}
.iuran6-ket > span{display:inline-flex; align-items:center; gap:4px}
.iuran6-ket .ici{font-size:16px}
/* Tanda sudah diingatkan lewat WhatsApp (layar Iuran & Tunggakan). */
.ingat-wa{display:inline-flex; align-items:center; gap:4px; color:var(--ok)}
.ingat-wa .ici{font-size:16px}
.row .btn-row .btn-mini{white-space:nowrap}