/* ════════════════════════════════════════════════════════════════════
   responsive.css — Lapisan responsif GLOBAL KasWarga  (v1)
   Dimuat oleh includes/pwa_head.php → berlaku di SEMUA halaman.
   Aman: hanya merapikan; style khusus tiap halaman tetap menang.
   ════════════════════════════════════════════════════════════════════ */

/* ── Dasar ──────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { overflow-x:hidden; -webkit-tap-highlight-color:rgba(15,61,62,.12); }
@supports (overflow:clip) { body { overflow-x:clip; } }
a, button, input, select, textarea, label, [role="button"] { touch-action:manipulation; }
img, video { max-width:100%; height:auto; }
canvas { max-width:100%; }
:where(.page-content, .page-wrapper, main) :where(div, section, article, aside, form, fieldset, header, footer) { min-width:0; }
:where(.page-content, .page-wrapper, main) { overflow-wrap:break-word; }
:where(.page-content, .page-wrapper, main) pre { white-space:pre-wrap; }

/* Fokus keyboard jelas (aksesibilitas) */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline:2px solid var(--kl-accent, var(--accent, #c8932c)); outline-offset:2px;
}

/* ── Tabel: wadah scroll otomatis (dibuat oleh pwa.js) ─────────────── */
.kw-table-scroll {
  width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; scrollbar-width:thin;
}
.kw-table-scroll > table { margin:0; }
.kw-table-scroll.kw-has-more { box-shadow: inset -14px 0 10px -10px var(--ks-00000024, rgba(0,0,0,.14)); }
.kw-scroll-hint { display:none; font-size:.7rem; color:var(--text-muted,var(--kt-66756f, #66756f)); padding:4px 2px 0; text-align:right; }
.kw-table-scroll.kw-has-more + .kw-scroll-hint { display:block; }

/* Opt-in: <table class="kw-stack"> → jadi kartu di HP (label dari <th>) */
@media (max-width:640px) {
  table.kw-stack thead { display:none; }
  table.kw-stack, table.kw-stack tbody, table.kw-stack tfoot, table.kw-stack tr, table.kw-stack td { display:block; width:100%; }
  table.kw-stack tr { padding:10px 12px; border-bottom:1px solid var(--border,var(--kl-e3e8e5, #e3e8e5)); }
  table.kw-stack td { border:0 !important; padding:3px 0 !important; text-align:right; display:flex; justify-content:space-between; gap:12px; }
  table.kw-stack td::before { content:attr(data-label); font-weight:600; font-size:.74rem; color:var(--text-muted,var(--kt-66756f, #66756f)); text-align:left; }
  table.kw-stack td:not([data-label])::before, table.kw-stack td[data-label=""]::before { content:none; }
  table.kw-stack tbody td:first-child { display:block; text-align:left; font-size:.92rem; padding-bottom:6px !important; }
  table.kw-stack tbody td:first-child::before { content:none; }
  table.kw-stack tbody tr { border-radius:0; }
  table.kw-stack tfoot td { justify-content:space-between; }
  table.kw-stack tfoot td[colspan]::before { content:none; }
  table.kw-stack { min-width:0 !important; }
  table.kw-stack td > form, table.kw-stack td > div { margin-left:auto; }
  /* data-judul="2": kolom ke-2 (mis. Keterangan) jadi judul kartu, kolom 1 (tanggal) jadi baris biasa */
  table.kw-stack[data-judul="2"] tbody tr { display:flex; flex-direction:column; }
  table.kw-stack[data-judul="2"] tbody td:nth-child(2) { order:-1; display:block; text-align:left; font-weight:700; font-size:.92rem; padding-bottom:6px !important; }
  table.kw-stack[data-judul="2"] tbody td:nth-child(2)::before { content:none; }
  table.kw-stack[data-judul="2"] tbody td:first-child { display:flex; text-align:right; font-size:inherit; padding-bottom:3px !important; }
  table.kw-stack[data-judul="2"] tbody td:first-child::before { content:attr(data-label); }
}

/* ── Tablet & HP (sidebar disembunyikan, tabbar tampil) ────────────── */
@media (max-width:900px) {
  .main-area { padding-bottom:calc(var(--tabbar-h, 70px) + env(safe-area-inset-bottom, 0px) + 18px) !important; }
  :where(.page-content, .page-wrapper) [style*="display:flex"],
  :where(.page-content, .page-wrapper) [style*="display: flex"] { flex-wrap:wrap; }
  .page-header { flex-wrap:wrap; gap:10px; }
}

/* ── HP ────────────────────────────────────────────────────────────── */
@media (max-width:640px) {
  .page-content { padding:1rem max(.85rem, env(safe-area-inset-left)) 1rem max(.85rem, env(safe-area-inset-right)) !important; }
  .page-title { font-size:1.2rem; line-height:1.3; }
  .page-header > * { min-width:0; }

  /* Input 16px → iOS tidak auto-zoom saat diketik */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select, textarea { font-size:16px !important; max-width:100%; }

  /* Grid inline yang kaku (repeat(4,1fr) dll) → otomatis menyesuaikan */
  :where(.page-content, .page-wrapper) [style*="grid-template-columns"]:not(.kw-keep) {
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 145px), 1fr)) !important;
  }

  /* Modal / dialog muat layar */
  dialog, [role="dialog"] { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; }
}

/* ── HP kecil (≤380px: Galaxy A/J lama, iPhone SE 1) ───────────────── */
@media (max-width:380px) {
  html { font-size:15px; }
  .page-content { padding-left:.65rem !important; padding-right:.65rem !important; }
}

/* ── Layar sentuh: target tap minimal ~40px ────────────────────────── */
@media (pointer:coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  select { min-height:42px; }
  input[type=checkbox], input[type=radio] { min-width:18px; min-height:18px; }
}

/* ── HP landscape (tinggi pendek) ──────────────────────────────────── */
@media (max-height:480px) and (orientation:landscape) {
  .main-area { padding-bottom:calc(var(--tabbar-h, 70px) + 8px) !important; }
}

/* ── Layar lebar (≥1600px) — konten tidak melar ────────────────────── */
@media (min-width:1600px) {
  .page-content > .page-wrapper { max-width:1480px; margin-left:auto; margin-right:auto; }
}

/* ── Mode aplikasi terpasang (PWA standalone) ──────────────────────── */
@media (display-mode: standalone) {
  body { overscroll-behavior-y:none; }
}

/* ── UI PWA: tombol pasang, toast update, banner offline ───────────── */
.kw-pwa-toast {
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar-h, 70px) + env(safe-area-inset-bottom, 0px) + 14px);
  z-index:9990; width:min(440px, calc(100vw - 24px));
  display:flex; align-items:center; gap:12px;
  background:var(--kb-0f3d3e, #0f3d3e); color:var(--kt-ffffff, #fff); border-radius:14px; padding:12px 12px 12px 14px;
  box-shadow:0 10px 30px var(--ks-00000040, rgba(0,0,0,.25)); font:500 .86rem/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  animation:kwUp .25s ease-out;
}
@media (min-width:901px) { .kw-pwa-toast { bottom:20px; left:auto; right:20px; transform:none; } }
.kw-pwa-toast img { width:36px; height:36px; border-radius:9px; flex-shrink:0; }
.kw-pwa-toast .kw-t { flex:1; min-width:0; }
.kw-pwa-toast .kw-t b { display:block; font-size:.9rem; }
.kw-pwa-toast .kw-t small { opacity:.8; font-size:.76rem; }
.kw-pwa-toast button { border:0; border-radius:9px; min-height:38px; padding:0 14px; font-weight:700; font-size:.82rem; cursor:pointer; }
.kw-pwa-toast .kw-go { background:var(--kb-c8932c, #c8932c); color:var(--kt-1c1500, #1c1500); }
.kw-pwa-toast .kw-x { background:transparent; color:var(--kt-ffffff, #fff); opacity:.75; padding:0 8px; font-size:1.2rem; line-height:1; }
.kw-offline-bar {
  position:fixed; top:0; left:0; right:0; z-index:9995;
  padding:calc(6px + env(safe-area-inset-top, 0px)) 12px 6px; text-align:center;
  background:var(--kb-8b1a1a, #8b1a1a); color:var(--kt-ffffff, #fff); font:600 .8rem system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  transform:translateY(-100%); transition:transform .25s;
}
.kw-offline-bar.on { transform:none; }
.kw-offline-bar.back { background:var(--kb-1a7f4b, #1a7f4b); }
@keyframes kwUp { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }

/* Tombol submit yang sedang diproses (anti dobel-klik) */
.kw-busy { opacity:.6; pointer-events:none; cursor:progress !important; }

/* ── Kurangi animasi bila diminta OS ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ── Cetak: buang navigasi ─────────────────────────────────────────── */
@media print {
  .sidebar, .tabbar, .topbar, .kw-pwa-toast, .kw-offline-bar, .kw-scroll-hint { display:none !important; }
  .main-area { margin:0 !important; padding:0 !important; }
  .kw-table-scroll { overflow:visible; box-shadow:none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v2 — APP SHELL "native feel"
   ════════════════════════════════════════════════════════════════════ */

/* ── Transisi antar-halaman (Chrome/Android/TWA 126+) ──────────────── */
@view-transition { navigation: auto; }
.topbar  { view-transition-name: kw-topbar; }
.sidebar { view-transition-name: kw-sidebar; }
.tabbar, .kw-tabbar, nav.tab-bar { view-transition-name: kw-tabbar; }
.page-content { view-transition-name: kw-page; }
::view-transition-old(kw-page) { animation: kwPageOut .16s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(kw-page) { animation: kwPageIn .28s cubic-bezier(.2,.8,.2,1) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@keyframes kwPageOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes kwPageIn  { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── Bar progres navigasi (atas) ───────────────────────────────────── */
.kw-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000; pointer-events: none; overflow: hidden; }
.kw-progress i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--kb-accent, var(--accent,#c8932c)), var(--kb-f0c36a, #f0c36a));
                 transform: scaleX(0); transform-origin: left; box-shadow: 0 0 8px var(--ks-c8932c99, rgba(200,147,44,.6)); }
.kw-progress.on i { animation: kwProg 8s cubic-bezier(.08,.8,.2,1) forwards; }
@keyframes kwProg { 0% { transform: scaleX(0); } 10% { transform: scaleX(.35); } 100% { transform: scaleX(.92); } }

/* ── Efek sentuh v3: ripple + tekan + status sibuk ─────────────────── */
/* Ripple digambar di lapisan dalam (.kw-rpl) supaya badge/angka di tombol tidak ikut terpotong */
.kw-rpl { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; contain: strict; }
.kw-rpl > i { position: absolute; border-radius: 50%; background: currentColor; opacity: .16; transform: scale(0);
              animation: kwRpl .42s cubic-bezier(.2,.75,.25,1) forwards; transition: opacity .38s ease-out; }
.kw-rpl > i.out { opacity: 0; }
@keyframes kwRpl { to { transform: scale(1); } }
/* kompatibel dengan kode lama */
.kw-ripple-host { position: relative; }

/* Tekan = mengecil sedikit, kembali dengan pantulan halus */
:where(button, a.kw-btn, a.btn, a[class$="-btn"], a[class*="-btn "], a[class*="-btn-"], [data-sheet-open], .kw-back,
       a.kw-tile, a.bx-card, .bx-q, .tab-item, .more-item, .stat-card, .nav-item, a[class*="-item"], a[class*="-card"], a[class*="-tile"], summary) {
  transition-property: transform, background-color, border-color, color, box-shadow, opacity;
  transition-duration: .18s; transition-timing-function: cubic-bezier(.2,.9,.3,1.25);
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled):not(.kw-raw):active, a:is(.kw-btn, .btn, [class$="-btn"], [class*="-btn "], [class*="-btn-"]):active, [data-sheet-open]:active { transform: scale(.96); transition-duration: .07s; }
:is(a.kw-tile, a.bx-card, .bx-q, a[class*="-item"], a[class*="-card"], a[class*="-tile"], .stat-card, .more-item):active { transform: scale(.98); transition-duration: .07s; }
.tab-item:active svg, .nav-item:active svg { transform: scale(.86); transition: transform .07s; }
.tab-item svg, .nav-item svg { transition: transform .22s cubic-bezier(.2,.9,.3,1.4); }
/* tab aktif: ikon "meletup" sekali saat halaman dibuka */
.tab-item.active svg, .tab-item.is-active svg { animation: kwPop .45s cubic-bezier(.2,.9,.3,1.5) .05s both; }
@keyframes kwPop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* kartu tautan: terangkat sedikit saat diarahkan mouse */
@media (hover: hover) {
  :is(a.kw-tile, a.bx-card, a[class*="-item"]:not(.nav-item):not(.tab-item), a[class*="-card"]):hover { box-shadow: 0 10px 26px -14px var(--ks-0f3d3e59, rgba(15,61,62,.35)); }
}
/* Tombol yang sedang memproses kiriman formulir */
.kw-busy { pointer-events: none; cursor: progress; position: relative; }
.kw-busy { -webkit-text-fill-color: transparent; opacity: .9 !important; }
.kw-busy > :not(.kw-rpl):not(.kw-spin) { opacity: 0; }
.kw-busy .kw-spin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
                    border: 2.5px solid currentColor; border-right-color: transparent; animation: kwSpin .7s linear infinite; }
/* Konten halaman muncul halus */
@supports not (view-transition-name: none) { .page-content { animation: kwRise2 .26s cubic-bezier(.2,.8,.2,1) backwards; } }
@keyframes kwRise2 { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .kw-rpl, .page-content, .tab-item.active svg { animation: none !important; }
  :where(button, .kw-btn, a.kw-tile, a.bx-card) { transition: none !important; }
}

/* ── Bottom sheet (<dialog class="kw-sheet">) ──────────────────────── */
dialog.kw-sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 640px; max-height: 88dvh;
  border: 0; padding: 0 0 env(safe-area-inset-bottom, 0); border-radius: 22px 22px 0 0; background: var(--kb-ffffff, #fff); color: var(--text-base,var(--kt-1c2b2b, #1c2b2b));
  box-shadow: 0 -10px 40px var(--ks-0000002e, rgba(0,0,0,.18)); display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
dialog.kw-sheet:not([open]) { display: none; }
dialog.kw-sheet.is-in { transform: translateY(var(--kw-drag, 0px)); }
dialog.kw-sheet.is-dragging { transition: none; }
dialog.kw-sheet::backdrop { background: var(--kb-091a1b73, rgba(9,26,27,.45)); opacity: 0; transition: opacity .3s; backdrop-filter: blur(2px); }
dialog.kw-sheet.is-in::backdrop { opacity: 1; }
.kw-sheet__grip { width: 40px; height: 5px; border-radius: 99px; background: var(--kb-d5dbd9, #d5dbd9); margin: 10px auto 2px; flex-shrink: 0; }
.kw-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px 10px; border-bottom: 1px solid var(--border,var(--kl-e0e4e2, #e0e4e2)); flex-shrink: 0; touch-action: none; }
.kw-sheet__head h3 { margin: 0; font-size: 1rem; font-weight: 750; }
.kw-sheet__x { width: 36px; height: 36px; border-radius: 12px; border: 0; background: var(--surface,var(--kb-f6f7f5, #f6f7f5)); color: var(--text-muted,var(--kt-66756f, #66756f)); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kw-sheet__body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 4px 16px; }
.kw-sheet__body:has(> :is(.kg-foot, .rd-foot, .sr-foot, .tm-foot, .as-foot):last-child) { padding-bottom: 0; }
@media (min-width: 900px) {
  dialog.kw-sheet { inset: 0; margin: auto; border-radius: 20px; max-height: 80vh; transform: translateY(16px) scale(.98); opacity: 0; transition: transform .25s, opacity .2s; }
  dialog.kw-sheet.is-in { transform: none; opacity: 1; }
  .kw-sheet__grip { display: none; }
}

/* ── Tarik untuk muat ulang (mode aplikasi) ────────────────────────── */
.kw-ptr { position: fixed; left: 50%; top: 0; z-index: 9000; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
          background: var(--kb-ffffff, #fff); box-shadow: 0 4px 14px var(--ks-0000002e, rgba(0,0,0,.18)); display: flex; align-items: center; justify-content: center;
          transform: translateY(-60px); color: var(--kt-primary, var(--primary,#0f3d3e)); pointer-events: none; }
.kw-ptr svg { width: 22px; height: 22px; transition: transform .1s; }
.kw-ptr.is-spin svg { animation: kwSpin .7s linear infinite; }
@keyframes kwSpin { to { transform: rotate(360deg); } }

/* ── Toast singkat (KasWargaPWA.toast) ─────────────────────────────── */
.kw-snack { position: fixed; left: 50%; bottom: calc(var(--tabbar-h, 70px) + env(safe-area-inset-bottom, 0px) + 18px); z-index: 9991;
            transform: translate(-50%, 20px); opacity: 0; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s;
            background: var(--kb-1f2b2b, #1f2b2b); color: var(--kt-ffffff, #fff); padding: 12px 16px; border-radius: 12px; font: 600 .86rem/1.35 system-ui, sans-serif;
            max-width: calc(100vw - 32px); box-shadow: 0 8px 24px var(--ks-00000040, rgba(0,0,0,.25)); pointer-events: none; }
.kw-snack.on { transform: translate(-50%, 0); opacity: 1; }
@media (min-width: 901px) { .kw-snack { bottom: 24px; } }

/* ── Mode aplikasi terpasang: rasa native ──────────────────────────── */
@media (display-mode: standalone) {
  html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea, select, [contenteditable], .selectable, td, p, .page-content pre { -webkit-user-select: text; user-select: text; }
  .topbar { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--topbar-h, 60px) + env(safe-area-inset-top, 0px)); }
}

html { scroll-behavior: smooth; }

/* ════════════════════════════════════════════════════════════════════
   v3 — DESIGN SYSTEM "KasWarga App" (selaraskan SEMUA halaman lama)
   Bentuk, sudut, bayangan, tombol, input & hero mengikuti Beranda baru.
   Hanya mengatur tampilan (radius/bayangan/ukuran) — tata letak & logika
   tiap halaman tidak diubah. Opt-out per elemen: tambahkan class "kw-raw".
   ════════════════════════════════════════════════════════════════════ */
:root {
  --kw-r-xl: 22px; --kw-r-lg: 18px; --kw-r-md: 14px; --kw-r-sm: 12px;
  --kw-sh: 0 1px 2px var(--ks-0f3d3e0d, rgba(15,61,62,.05)), 0 4px 14px -6px var(--ks-0f3d3e1f, rgba(15,61,62,.12));
  --kw-sh-hero: 0 18px 40px -18px var(--ks-0a2a2ba6, rgba(10,42,43,.65));
  --kw-hero: radial-gradient(120% 140% at 100% 0%, #1d6466 0%, #0f3d3e 45%, #0a2a2b 100%);
  --kw-ease: cubic-bezier(.2,.8,.2,1);
}

/* Judul halaman — besar & tegas ala app */
.page-content .page-header { align-items: flex-end; margin-bottom: 1.1rem; }
.page-content .page-title { font-size: 1.5rem; font-weight: 850; letter-spacing: -.025em; line-height: 1.15; }
.page-content .page-sub { font-size: .84rem; margin-top: .3rem; }
@media (max-width: 640px) { .page-content .page-title { font-size: 1.3rem; } }

/* Kartu — semua varian kartu lama (.card, .xx-card, panel, summary, stat) */
.page-content :is(.card, .chart-card, .panel-card, .upload-card, .summary-item, .stat-card,
  [class$="-card"], [class*="-card "]):not(.kw-raw):not(svg *) {
  border-radius: var(--kw-r-xl);
  border-color: var(--kl-0f3d3e14, rgba(15,61,62,.08));
  box-shadow: var(--kw-sh);
}
.page-content :is([class$="-card"], [class*="-card "]) :is([class$="-card"], [class*="-card "]):not(.kw-raw) {
  border-radius: var(--kw-r-md); box-shadow: none;   /* kartu di dalam kartu: lebih kalem */
}
@media (hover: hover) {
  .page-content .stat-card:hover, .page-content .summary-item:hover { transform: translateY(-2px); }
}

/* Hero / kartu total (xx-total berisi xx-total-value) → gradien merek seragam */
.page-content :is([class$="-total"], [class*="-total "]):has(> * [class*="-total-value"], > [class*="-total-value"]):not(.kw-raw) {
  background: var(--kw-hero); color: var(--kt-ffffff, #fff); border: 0;
  border-radius: var(--kw-r-xl); box-shadow: var(--kw-sh-hero);
  position: relative; overflow: hidden; isolation: isolate;
}
.page-content :is([class$="-total"], [class*="-total "]):has(> * [class*="-total-value"], > [class*="-total-value"])::before {
  content: ''; position: absolute; z-index: -1; width: 240px; height: 240px; border-radius: 50%; right: -80px; top: -100px;
  background: radial-gradient(closest-side, var(--kb-ffffff29, rgba(255,255,255,.16)), transparent); pointer-events: none;
}
.page-content [class*="-total-value"] { letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* Laporan Keuangan (dulu biru navy) → warna merek */
.page-content .lk-header { background: var(--kw-hero); }
.page-content .lk-filter-submit { background: var(--kb-primary, var(--primary)); border-radius: var(--kw-r-sm); min-height: 42px; }
.page-content .lk-filter-card select:focus { border-color: var(--kl-primary-light, var(--primary-light)); }

/* Tombol — sudut, tinggi sentuh & bobot huruf seragam */
.page-content :is(.btn, .btn-save, .action-btn, [class$="-btn"], [class*="-btn "],
  [class*="-btn-primary"], [class*="-btn--primary"], [class*="-btn-ghost"], [class*="-btn--ghost"],
  [class*="-btn-danger"], [class*="-btn--danger"]):not(.kw-raw) {
  border-radius: var(--kw-r-sm);
  min-height: 42px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  transition: transform .15s var(--kw-ease), filter .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.page-content :is(.btn-save, [class*="-btn-primary"], [class*="-btn--primary"]):not(.kw-raw) {
  box-shadow: 0 6px 16px -8px var(--ks-0f3d3e8c, rgba(15,61,62,.55));
}
.page-content :is(.btn, .btn-save, .action-btn, [class$="-btn"], [class*="-btn "], [class*="-btn-"]):not(.kw-raw):active { transform: scale(.97); }
@media (max-width: 640px) {
  .page-content :is(.btn-save, [class*="-btn-primary"], [class*="-btn--primary"]):not(.kw-raw) { min-height: 46px; }
}

/* Input, select, textarea */
.page-content :is(input[type=text], input[type=number], input[type=date], input[type=month], input[type=email],
  input[type=password], input[type=search], input[type=tel], input[type=url], input:not([type]), select, textarea):not(.kw-raw) {
  border: 1px solid var(--kl-dde3e1, #dde3e1); border-radius: var(--kw-r-sm);
  background-color: var(--kb-ffffff, #fff); color: var(--text-base);
  min-height: 42px; padding-left: .8rem; padding-right: .8rem;
  transition: border-color .15s, box-shadow .15s;
}
.page-content select:not(.kw-raw) { padding-left: .7rem; padding-right: 1.7rem; }
.page-content textarea:not(.kw-raw) { padding-top: .6rem; padding-bottom: .6rem; }
.page-content :is(input, select, textarea):not(.kw-raw):focus {
  outline: none; border-color: var(--kl-primary-light, var(--primary-light, #15565a));
  box-shadow: 0 0 0 3px var(--ks-15565a24, rgba(21,86,90,.14));
}
.page-content :is(input, select, textarea):disabled { background-color: var(--kb-f2f4f3, #f2f4f3); color: var(--kt-8a9692, #8a9692); }
.page-content :is(.form-row, .form-group, [class$="-fg"], [class*="-fg "]) > label,
.page-content :is([class$="-form"], [class*="-form "]) label:not([class]) {
  font-size: .78rem; font-weight: 700; color: var(--text-base); letter-spacing: .01em;
}

/* Tabel — kepala tabel seragam & angka rata */
.page-content table:not(.kw-raw) { font-variant-numeric: tabular-nums; }
.page-content table:not(.kw-raw) thead th {
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.page-content table:not(.kw-raw) tbody tr { transition: background .12s; }
.page-content .kw-table-scroll { border-radius: var(--kw-r-md); }

/* Alert, catatan, toast, modal */
.page-content :is(.alert-blok, .badge-alert, [class$="-alert"], [class*="-alert "], [class$="-note"], [class*="-note "]):not(.kw-raw) {
  border-radius: var(--kw-r-md);
}
:is([class$="-modal"], [class*="-modal "]):not(.kw-raw) > :first-child:not(script):not(style) { border-radius: var(--kw-r-xl); }
:is([class$="-toast"], [class*="-toast "]):not(.kw-raw) { border-radius: var(--kw-r-md); }

/* Badge, tag, pill, chip → kapsul */
.page-content :is([class$="-badge"], [class*="-badge "], [class$="-tag"], [class*="-tag "], [class$="-pill"], [class*="-pill "], [class*="-pill--"], [class$="-chip"], [class*="-chip "]):not(.kw-raw):not(.tab-badge):not(.more-badge):not(.nav-badge) {
  border-radius: 999px;
}

/* Toolbar filter → baris rapi */
.page-content :is([class$="-toolbar"], [class*="-toolbar "]):not(.kw-raw) { gap: .6rem; }

/* Empty state */
.page-content :is(.empty-state, [class$="-empty"], [class*="-empty "]):not(.kw-raw) { color: var(--text-muted); }

/* Ikon kotak di kartu statistik */
.page-content :is(.stat-icon, .stat-icon-chip, [class$="-ico"], [class*="-ico "]):not(.kw-raw):not(svg) { border-radius: var(--kw-r-sm); }

/* Animasi masuk halus untuk kartu-kartu lama */
@media (prefers-reduced-motion: no-preference) {
  .page-content > :is(.page-wrapper, div, section) > :is(.card, [class$="-card"], [class*="-card "], .stat-grid, .summary-strip, [class$="-stats"], [class$="-grid"]):not(.kw-raw) {
    animation: kwRise .45s var(--kw-ease) both;
  }
  .page-content > :is(.page-wrapper, div, section) > :nth-child(2) { animation-delay: .04s; }
  .page-content > :is(.page-wrapper, div, section) > :nth-child(3) { animation-delay: .08s; }
  .page-content > :is(.page-wrapper, div, section) > :nth-child(4) { animation-delay: .12s; }
  .page-content > :is(.page-wrapper, div, section) > :nth-child(n+5) { animation-delay: .16s; }
  @keyframes kwRise { from { opacity: 0; transform: translateY(8px); } }
}

/* ════════════════════════════════════════════════════════════════════
   v4 — KOMPONEN STANDAR (dipakai halaman yang sudah dirombak)
   kw-head · kw-hero · kw-tiles · kw-card · kw-list · kw-chips
   ════════════════════════════════════════════════════════════════════ */
.kw-page { max-width: 1180px; margin: 0 auto; display: grid; gap: 14px; grid-template-columns: minmax(0,1fr); }
.kw-page > * { min-width: 0; }
@media (min-width: 1100px) {
  .kw-page--2 { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 18px; align-items: start; }
  .kw-page--2 > .kw-full { grid-column: 1 / -1; }
  .kw-col { display: grid; gap: 18px; align-content: start; min-width: 0; }
}
@media (max-width: 1099px) { .kw-col { display: contents; } }

/* Kepala halaman */
.kw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kw-head__t { min-width: 0; }
.kw-head__t h1 { margin: 0; font-size: 1.5rem; font-weight: 850; letter-spacing: -.025em; line-height: 1.15; color: var(--text-base); }
.kw-head__t p { margin: .3rem 0 0; font-size: .84rem; color: var(--text-muted); }
.kw-head__a { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .kw-head__t h1 { font-size: 1.3rem; }
  .kw-head__a { width: 100%; }
  .kw-head__a > * { flex: 1 1 0; }
}

/* Tombol standar */
.kw-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px;
          border-radius: 14px; border: 1px solid transparent; font: inherit; font-size: .88rem; font-weight: 750; text-decoration: none; cursor: pointer;
          background: var(--kb-primary, var(--primary)); color: var(--kt-ffffff, #fff); box-shadow: 0 6px 16px -8px var(--ks-0f3d3e8c, rgba(15,61,62,.55)); white-space: nowrap;
          transition: transform .15s var(--kw-ease), filter .15s; -webkit-tap-highlight-color: transparent; }
.kw-btn:active { transform: scale(.97); }
.kw-btn--ghost { background: var(--kb-ffffff, #fff); color: var(--kt-primary, var(--primary)); border-color: var(--border); box-shadow: none; }
.kw-btn--soft { background: var(--primary-soft); color: var(--kt-primary, var(--primary)); box-shadow: none; }
.kw-btn--danger { background: var(--kb-danger, var(--danger)); }
.kw-btn--sm { min-height: 36px; padding: 0 12px; font-size: .8rem; border-radius: 11px; }
.kw-btn svg { flex-shrink: 0; }

/* Hero */
.kw-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--kw-r-xl); color: var(--kt-ffffff, #fff); padding: 20px;
           background: var(--kw-hero); box-shadow: var(--kw-sh-hero); }
.kw-hero.is-neg  { background: radial-gradient(120% 140% at 100% 0%, var(--kb-b8443a, #b8443a) 0%, var(--kb-8c2a22, #8c2a22) 45%, var(--kb-5e1a14, #5e1a14) 100%); box-shadow: 0 18px 40px -18px var(--ks-5e1a14b2, rgba(94,26,20,.7)); }
.kw-hero.is-ok   { background: radial-gradient(120% 140% at 100% 0%, var(--kb-2bb673, #2bb673) 0%, var(--kb-1a7f4b, #1a7f4b) 45%, var(--kb-0d5c36, #0d5c36) 100%); box-shadow: 0 18px 40px -18px var(--ks-0d5c36b2, rgba(13,92,54,.7)); }
.kw-hero.is-warn { background: radial-gradient(120% 140% at 100% 0%, var(--kb-d6a23a, #d6a23a) 0%, var(--kb-b07d1a, #b07d1a) 45%, var(--kb-7d580d, #7d580d) 100%); box-shadow: 0 18px 40px -18px var(--ks-7d580db2, rgba(125,88,13,.7)); }
.kw-hero::before { content: ''; position: absolute; z-index: -1; width: 260px; height: 260px; border-radius: 50%; right: -90px; top: -110px; background: radial-gradient(closest-side, var(--kb-ffffff29, rgba(255,255,255,.16)), transparent); }
.kw-hero__lbl { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .74rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; opacity: .9; }
.kw-hero__lbl a, .kw-hero__lbl button { color: var(--kt-ffffff, #fff); text-decoration: none; text-transform: none; letter-spacing: 0; font: inherit; font-size: .78rem; font-weight: 650; display: inline-flex; align-items: center; gap: 3px;
                     background: var(--kb-ffffff24, rgba(255,255,255,.14)); border: 1px solid var(--kl-ffffff38, rgba(255,255,255,.22)); padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.kw-hero__val { font-size: 2.1rem; font-weight: 850; letter-spacing: -.035em; line-height: 1.05; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kw-hero__val small { font-size: .95rem; opacity: .75; margin-right: 3px; font-weight: 700; }
.kw-hero__sub { font-size: .82rem; opacity: .88; margin-top: 4px; }
.kw-hero__rows { margin-top: 16px; border-radius: 16px; background: var(--kb-0000002e, rgba(0,0,0,.18)); border: 1px solid var(--kl-ffffff1f, rgba(255,255,255,.12)); padding: 4px 14px; }
.kw-hero__rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: .82rem; border-bottom: 1px dashed var(--kl-ffffff24, rgba(255,255,255,.14)); }
.kw-hero__rows > div:last-child { border-bottom: 0; }
.kw-hero__rows span { opacity: .88; } .kw-hero__rows b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw-hero__rows .m b::before { content: '− '; opacity: .7; }
.kw-hero__chips { display: flex; gap: 8px; overflow-x: auto; margin: 14px -20px -4px; padding: 0 20px 4px; scrollbar-width: none; }
.kw-hero__chips::-webkit-scrollbar { display: none; }
.kw-hero__chips > * { flex-shrink: 0; padding: 8px 12px; border-radius: 14px; background: var(--kb-ffffff1a, rgba(255,255,255,.1)); border: 1px solid var(--kl-ffffff29, rgba(255,255,255,.16)); font-size: .74rem; }
.kw-hero__chips b { display: block; font-size: .9rem; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .kw-hero__val { font-size: 1.8rem; } }

/* Petak statistik */
.kw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.kw-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; background: var(--kb-ffffff, #fff); border: 1px solid var(--kl-0f3d3e14, rgba(15,61,62,.08));
           box-shadow: var(--kw-sh); text-decoration: none; color: var(--text-base); min-width: 0; }
.kw-tile__ic { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--kt-primary, var(--primary)); margin-bottom: 6px; }
.kw-tile small { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }
.kw-tile b { font-size: clamp(1.05rem, 4.4vw, 1.35rem); font-weight: 850; letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-tile b i { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.kw-tile span { font-size: .74rem; color: var(--text-muted); line-height: 1.35; }
.kw-tile.is-g b { color: var(--kt-success, var(--success)); } .kw-tile.is-g .kw-tile__ic { background: var(--kb-e8f6ee, #e8f6ee); color: var(--kt-success, var(--success)); }
.kw-tile.is-r b { color: var(--kt-danger, var(--danger)); }  .kw-tile.is-r .kw-tile__ic { background: var(--kb-fdecea, #fdecea); color: var(--kt-danger, var(--danger)); }
.kw-tile.is-y b { color: var(--kt-a06a0a, #a06a0a); }        .kw-tile.is-y .kw-tile__ic { background: var(--kb-fdf3e2, #fdf3e2); color: var(--kt-a06a0a, #a06a0a); }
.kw-tile.is-b b { color: var(--kt-2f6fa3, #2f6fa3); }        .kw-tile.is-b .kw-tile__ic { background: var(--kb-e8f0f8, #e8f0f8); color: var(--kt-2f6fa3, #2f6fa3); }
a.kw-tile::after { content: ''; position: absolute; right: 12px; top: 14px; width: 7px; height: 7px; border-right: 2px solid var(--kl-b5bfbc, #b5bfbc); border-top: 2px solid var(--kl-b5bfbc, #b5bfbc); transform: rotate(45deg); }

/* Kartu standar */
.kw-card { background: var(--kb-ffffff, #fff); border: 1px solid var(--kl-0f3d3e14, rgba(15,61,62,.08)); border-radius: var(--kw-r-xl); box-shadow: var(--kw-sh); min-width: 0; }
.kw-card__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 0; }
.kw-card__h h2, .kw-card__h h3 { margin: 0; font-size: .95rem; font-weight: 750; color: var(--text-base); display: inline-flex; align-items: center; gap: 8px; }
.kw-card__h svg { color: var(--kt-primary, var(--primary)); }
.kw-card__b { padding: 14px 18px 18px; }
.kw-link { font-size: .8rem; font-weight: 650; color: var(--kt-primary-light, var(--primary-light)); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }

/* Daftar gaya aplikasi */
.kw-list { list-style: none; margin: 0; padding: 4px 0 8px; }
.kw-list > li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; }
.kw-list > li + li { border-top: 1px solid var(--kl-f0f2f1, #f0f2f1); }
.kw-list .av { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface); color: var(--text-muted); font-weight: 800; font-size: .8rem; }
.kw-list .t { flex: 1; min-width: 0; }
.kw-list .t b { display: block; font-size: .86rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-list .t small { font-size: .74rem; color: var(--text-muted); }
.kw-list .v { font-size: .86rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw-list .v.g { color: var(--kt-success, var(--success)); } .kw-list .v.r { color: var(--kt-danger, var(--danger)); }

/* Catatan */
.kw-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); color: var(--text-base); font-size: .8rem; line-height: 1.55; }
.kw-note svg { color: var(--kt-primary, var(--primary)); flex-shrink: 0; margin-top: 2px; }
.kw-note.is-warn { background: var(--kb-fff7e6, #fff7e6); } .kw-note.is-warn svg { color: var(--kt-a06a0a, #a06a0a); }

/* ── Judul besar ala iOS/Flutter: judul topbar muncul saat judul halaman tergulir ── */
@media (max-width: 900px) {
  body.kw-lt .topbar-title { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
  body.kw-lt.kw-lt-off .topbar-title { opacity: 1; transform: none; }
  .topbar { transition: box-shadow .2s; }
  body.kw-lt-off .topbar { box-shadow: 0 4px 14px -8px var(--ks-0f3d3e40, rgba(15,61,62,.25)); }
  /* footer web disembunyikan di HP — navigasi sudah di tabbar */
  .footer { display: none; }
}
@media (display-mode: standalone) { .footer { display: none; } }

/* Grid statistik lama → selalu 2 kolom rapi di HP (bukan 1 kartu per baris) */
@media (max-width: 640px) {
  .page-content :is(.stat-grid, .summary-strip, [class$="-stats"], [class$="-summary"]):not(.kw-raw):not(:has(> :only-child)) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
  }
  .page-content :is(.stat-card, .summary-item, [class$="-stat"], [class*="-stat "]):not(.kw-raw) { padding: 12px 13px; min-width: 0; }
  .page-content :is([class$="-stat__val"], [class$="-stat-value"], .stat-value, .summary-value):not(.kw-raw) { font-size: 1.12rem; overflow-wrap: anywhere; }
}

/* Hero lama yang masih datar → gradien merek (Kasbon, Tarif IPL, Aturan Kategori, Akun Kas lama) */
.page-content :is(.kb-total, .trf-now, .kr-banner, .ak-total):not(.kw-raw) {
  background: var(--kw-hero) !important; border: 0; border-radius: var(--kw-r-xl) !important; box-shadow: var(--kw-sh-hero);
  position: relative; overflow: hidden; isolation: isolate;
}
.page-content :is(.kb-total, .trf-now, .kr-banner, .ak-total)::before {
  content: ''; position: absolute; z-index: -1; width: 240px; height: 240px; border-radius: 50%; right: -80px; top: -100px;
  background: radial-gradient(closest-side, var(--kb-ffffff29, rgba(255,255,255,.16)), transparent); pointer-events: none;
}
/* Footer web: sembunyikan di HP (selektor lebih kuat dari style bawaan footer) */
@media (max-width: 900px) { body footer.footer { display: none; } }
@media (display-mode: standalone) { body footer.footer { display: none; } }

/* ── Batch 4: Kelola User, Verifikasi Bukti, Pengaturan, Inventaris, Laporan ── */
@media (max-width: 640px) {
  /* angka ringkas sebaris (3–4 petak) */
  .page-content :is(.vb-grid-stat, .ku-grid-stat) { display: grid !important; gap: 8px !important; padding: 0 !important; }
  .page-content .vb-grid-stat { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .page-content .ku-grid-stat { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .page-content :is(.vb-stat, .ku-stat) { padding: 10px 6px !important; text-align: center; border-radius: 14px !important; }
  .page-content :is(.vb-stat__label, .ku-stat__label) { font-size: .6rem !important; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-content :is(.vb-stat__val, .ku-stat__val) { font-size: 1.25rem !important; }
  /* tab Pengaturan: rata dengan gutter halaman */
  .page-content .pg-tabs-wrap { margin-left: -.85rem !important; margin-right: -.85rem !important; padding-left: .85rem !important; padding-right: .85rem !important; }
}
@media (max-width: 380px) {
  .page-content .pg-tabs-wrap { margin-left: -.65rem !important; margin-right: -.65rem !important; padding-left: .65rem !important; padding-right: .65rem !important; }
}
/* kolom cari dengan ikon di dalam (Inventaris) */
.page-content .iv-search input:not(.kw-raw) { padding-left: 38px !important; }
/* angka laporan: font aplikasi, bukan mesin ketik */
.page-content :is(.lk-neraca, .lk-table) .text-right { font-family: inherit !important; font-weight: 600; font-size: .84rem; }

/* Kepala dengan tombol kembali (halaman edit / detail) */
.kw-head__t.has-back { display: flex; align-items: flex-start; gap: 12px; }
.kw-back { flex: 0 0 auto; width: 40px; height: 40px; margin-top: 1px; border-radius: 13px; display: grid; place-items: center;
  background: var(--kb-ffffff, #fff); border: 1px solid var(--kl-0f3d3e1f, rgba(15,61,62,.12)); color: var(--kt-primary, var(--primary, #0f3d3e)); box-shadow: 0 1px 2px var(--ks-0f3d3e0f, rgba(15,61,62,.06));
  text-decoration: none; transition: transform .1s, background .15s; }
.kw-back:hover { background: var(--primary-soft, var(--kb-e6f1f1, #e6f1f1)); }
.kw-back:active { transform: scale(.94); }
/* Jarak kepala halaman di luar .kw-page (halaman lama yang memakai kw_head) */
.page-content .kw-head { margin-bottom: 14px; }
.page-content .kw-page > .kw-head { margin-bottom: 0; }

/* Performa: kartu daftar panjang (tabel kw-stack di HP) baru digambar saat mendekati layar */
@media (max-width: 640px) {
  table.kw-stack tbody tr { content-visibility: auto; contain-intrinsic-size: auto 150px; }
}

/* Laporan Tunggakan: input/select di dalam kotak .lt-field jangan dapat bingkai kedua */
.page-content .lt-field { height: 44px; border-radius: var(--kw-r-sm, 12px); background: var(--kb-ffffff, #fff); }
.page-content .lt-field :is(input, select):not(.kw-raw) {
  border: 0 !important; box-shadow: none !important; background-color: transparent !important;
  min-height: 0 !important; height: 100%; padding-left: 0 !important; border-radius: 0 !important;
}

/* Tablet: Laporan Keuangan 1 kolom sampai layar cukup lebar (angka tidak patah baris) */
@media (min-width: 768px) and (max-width: 1199px) { .lk-masonry { column-count: 1 !important; } }
/* Tablet / laptop kecil (sidebar tampil, konten sempit): grid "form + daftar" jadi 1 kolom */
@media (max-width: 1199px) {
  .page-content :is(.ak-grid, .tp-grid) { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Area sentuh minimal untuk tombol kecil (diberi kelas oleh pwa.js, hanya layar sentuh) */
.kw-hit-rel { position: relative; }
.kw-hit::after { content: ''; position: absolute; top: var(--kw-hy, 0); bottom: var(--kw-hy, 0); left: var(--kw-hx, 0); right: var(--kw-hx, 0); }
/* Ikon di dalam tombol tidak boleh "gepeng" (mis. tombol hapus keyword di Aturan Kategori) */
.page-content button > svg { flex-shrink: 0; }
.page-content .kr-chip button { padding: 0 !important; width: 22px; height: 22px; }
.page-content :is(.ib-note, .kw-note, [class$="-note"], [class$="-alert"], [class*="-alert "]) > svg { flex-shrink: 0; }
/* Kontras teks: angka kuning-emas di kartu statistik iuran → lebih gelap agar terbaca */
.page-content .ib-stat--amber .ib-stat__val { color: var(--kt-8a5d08, #8a5d08) !important; }
.page-content .wi-note { color: var(--kt-4a5852, #4a5852); }

/* ════════════════════════════════════════════════════════════════════
   v5 · GLOSSY & SPACING (Okt 2026)
   Satu lapisan di atas semua halaman: cahaya tepi (glossy), bayangan
   berlapis yang lembut, kilau di kartu gelap, ritme jarak 8-pt, dan
   latar halaman yang tidak datar. Tidak mengubah warna isi kartu.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --kw-edge: inset 0 1px 0 rgba(255,255,255,.95);
  --kw-sh:   0 1px 1px var(--ks-0f3d3e0a, rgba(15,61,62,.04)), 0 2px 6px -2px var(--ks-0f3d3e12, rgba(15,61,62,.07)), 0 16px 32px -20px var(--ks-0f3d3e4c, rgba(15,61,62,.30));
  --kw-sh-lift: 0 1px 1px var(--ks-0f3d3e0d, rgba(15,61,62,.05)), 0 6px 14px -4px var(--ks-0f3d3e1a, rgba(15,61,62,.10)), 0 24px 44px -22px var(--ks-0f3d3e61, rgba(15,61,62,.38));
  --kw-sh-hero: 0 2px 6px -2px var(--ks-0a2a2b59, rgba(10,42,43,.35)), 0 26px 50px -24px var(--ks-0a2a2bb8, rgba(10,42,43,.72));
  --kw-line: var(--kl-0f3d3e13, rgba(15,61,62,.075));
  --kw-sheen: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 38%, rgba(255,255,255,0) 60%);
  --kw-s1: 8px; --kw-s2: 12px; --kw-s3: 16px; --kw-s4: 24px;
}

/* Latar halaman: lembut berlapis, tidak datar */
body {
  background-color: var(--surface, var(--kb-f4f5f2, #f4f5f2));
  background-image:
    radial-gradient(1100px 520px at -10% -12%, var(--kb-1d646612, rgba(29,100,102,.07)), transparent 60%),
    radial-gradient(900px 480px at 112% 0%, var(--kb-c8932c0f, rgba(200,147,44,.06)), transparent 58%);
  background-attachment: fixed;
}

/* Topbar kaca */
.topbar {
  background: var(--kb-ffffffcc, rgba(255,255,255,.80)) !important;
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: var(--kl-0f3d3e12, rgba(15,61,62,.07)) !important;
}

/* Kartu: tepi bercahaya + bayangan berlapis (warna latar kartu tetap) */
.page-content :is(.card, .chart-card, .panel-card, .upload-card, .summary-item, .stat-card,
  [class$="-card"], [class*="-card "], .kw-card, .kw-tile, .kw-list):not(.kw-raw):not(svg *) {
  border-color: var(--kw-line) !important;
  box-shadow: var(--kw-edge), var(--kw-sh) !important;
}
.page-content :is([class$="-card"], [class*="-card "], .kw-card) :is([class$="-card"], [class*="-card "], .kw-card):not(.kw-raw) {
  box-shadow: var(--kw-edge) !important;   /* kartu di dalam kartu: tanpa bayangan ganda */
}
@media (hover: hover) {
  .page-content a:is(.kw-tile, [class$="-card"]):hover { box-shadow: var(--kw-edge), var(--kw-sh-lift) !important; transform: translateY(-1px); }
}
.page-content :is(.kw-tile, a[class$="-card"]) { transition: transform .18s var(--kw-ease), box-shadow .18s var(--kw-ease); }

/* Kartu gelap / hero: kilau kaca di bagian atas + tepi bercahaya */
.page-content :is(.kw-hero, .ks-hero, .kb-total, .trf-now, .kr-banner, .ak-total, .lk-hero) {
  box-shadow: inset 0 1px 0 var(--ks-ffffff38, rgba(255,255,255,.22)), inset 0 0 0 1px var(--ks-ffffff0f, rgba(255,255,255,.06)), var(--kw-sh-hero) !important;
}
.page-content :is(.kw-hero, .ks-hero, .kb-total, .trf-now, .kr-banner, .ak-total)::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--kw-sheen);
}
.page-content .bx-bill { box-shadow: inset 0 1px 0 var(--ks-ffffff38, rgba(255,255,255,.22)), inset 0 0 0 1px var(--ks-ffffff0f, rgba(255,255,255,.06)), var(--kw-sh-hero) !important; }

/* Tombol utama: gradien halus + cahaya atas */
.page-content :is(.kw-btn:not(.kw-btn--ghost):not(.kw-btn--soft):not(.kw-btn--danger),
  .btn-primary, .btn--primary, [class$="-btn-primary"], [class*="-btn--primary"], [class$="-btn--primary"], [class*="btn-submit"], [class$="-submit"]):not(.kw-raw) {
  background-image: linear-gradient(180deg, var(--kb-ffffff24, rgba(255,255,255,.14)), var(--kb-ffffff00, rgba(255,255,255,0)) 55%) !important;
  box-shadow: inset 0 1px 0 var(--ks-ffffff38, rgba(255,255,255,.22)), 0 1px 2px var(--ks-0a2a2b40, rgba(10,42,43,.25)), 0 8px 18px -10px var(--ks-0a2a2b8c, rgba(10,42,43,.55)) !important;
}
.page-content :is(.kw-btn--ghost, [class*="btn--ghost"], [class*="btn-outline"]):not(.kw-raw) {
  box-shadow: var(--kw-edge), 0 1px 2px var(--ks-0f3d3e0f, rgba(15,61,62,.06)) !important;
}

/* Input: kesan "terbenam" lembut */
.page-content :is(input[type=text], input[type=number], input[type=date], input[type=month], input[type=email],
  input[type=password], input[type=search], input[type=tel], input[type=url], input:not([type]), select, textarea):not(.kw-raw) {
  border-color: var(--kl-0f3d3e21, rgba(15,61,62,.13));
  box-shadow: inset 0 1px 2px var(--ks-0f3d3e0d, rgba(15,61,62,.05));
  background-color: var(--kb-ffffff, #fff);
}

/* Catatan / info: tepi halus */
.page-content .kw-note { border: 1px solid var(--kl-0f3d3e0f, rgba(15,61,62,.06)); box-shadow: var(--kw-edge); }

/* ── Ritme jarak (8-pt) ── */
.page-content .kw-page { gap: var(--kw-s3); }
.page-content .kw-tiles { gap: var(--kw-s2); }
.page-content .kw-head { margin-bottom: var(--kw-s3); }
.page-content .kw-page > .kw-head { margin-bottom: 0; }
.page-content .kw-card__h { padding: 18px 18px 4px; }
.page-content .kw-card__b { padding: 14px 18px 18px; }
@media (max-width: 640px) {
  .page-content { padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; padding-top: 18px !important; }
  .page-content .pg-tabs-wrap { margin-left: -16px !important; margin-right: -16px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .page-content .kw-hero { padding: 20px 18px; }
}
@media (max-width: 380px) {
  .page-content { padding-left: 12px !important; padding-right: 12px !important; }
  .page-content .pg-tabs-wrap { margin-left: -12px !important; margin-right: -12px !important; padding-left: 12px !important; padding-right: 12px !important; }
}
/* Judul seksi kecil (KESEHATAN ARUS KAS, IURAN (IPL), dll.) seragam */
.page-content :is(.lk-section-title, .pnd-sec-title, .nt-grp, .pa-grp, .kw-sec) {
  font-size: .7rem !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--text-muted) !important;
}

/* Tabbar: kaca lebih jernih + tepi bercahaya */
.tabbar-pill { box-shadow: inset 0 1px 0 var(--ks-ffffffe6, rgba(255,255,255,.9)), 0 2px 8px -2px var(--ks-0f3d3e1f, rgba(15,61,62,.12)), 0 18px 40px -16px var(--ks-0f3d3e59, rgba(15,61,62,.35)) !important; }

/* ── v6: modal lama selalu di atas tabbar — sembunyikan tabbar selama modal terbuka ── */
@media (max-width: 900px) {
  body:has(:is(.ku-modal-bd, .wg-modal-backdrop, .vb-modal-bd, .mr-modal-overlay, .ib-modal-bd, .ib-modal, .bi-modal, .modal, .wg-modal):is(.open, .show, .active, .is-open, [open]))
    nav.tabbar { display: none !important; }
}

/* ── Panel filter yang bisa dilipat di HP ([data-kw-lipat]) ─────────── */
.kw-lipat-btn { display: none; }
@media (max-width: 640px) {
  .kw-lipat-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; margin: 0 0 12px;
    border-radius: 16px; border: 1px solid var(--kl-0f3d3e1f, rgba(15,61,62,.12)); background: var(--kb-ffffff, #fff); color: var(--text-base, var(--kt-1c2b2b, #1c2b2b)); font: inherit; font-size: .9rem; font-weight: 700;
    box-shadow: 0 1px 2px var(--ks-0f3d3e0d, rgba(15,61,62,.05)); cursor: pointer; text-align: left; }
  .kw-lipat-btn svg { color: var(--kt-primary, var(--primary, #0f3d3e)); flex-shrink: 0; }
  .kw-lipat-btn span { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 7px 0; }
  .kw-lipat-btn em { font-style: normal; }
  .kw-lipat-btn small { font-size: .74rem; font-weight: 600; color: var(--text-muted, var(--kt-66756f, #66756f)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kw-lipat-btn i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform .2s; }
  .kw-lipat-btn[aria-expanded="true"] { border-radius: 16px 16px 0 0; margin-bottom: 0; border-bottom-color: transparent; }
  .kw-lipat-btn[aria-expanded="true"] i { transform: rotate(-135deg) translateY(-2px); }
  .kw-lipat-btn.is-add svg { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--kb-primary, var(--primary, #0f3d3e)); color: var(--kt-ffffff, #fff); }
  .kw-lipat:not(.is-open) { display: none !important; }
  .kw-lipat > :is([class$="-head"], [class$="-card-head"]):first-child { display: none; }
  .kw-lipat.is-open { animation: kwUp .2s ease-out; margin-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
}

/* ── Mode gelap: sakelar cepat ─────────────────────────────────────── */
.kw-tema-sw { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 10px; border-radius: 99px; border: 1px solid var(--border, var(--kl-e0e4e2, #e0e4e2)); background: var(--surface, var(--kb-f6f7f5, #f6f7f5)); color: var(--text-muted, var(--kt-66756f, #66756f)); font: inherit; font-size: .74rem; font-weight: 750; letter-spacing: 0; text-transform: none; cursor: pointer; }
.kw-tema-sw i, .nav-tema__sw { position: relative; width: 30px; height: 18px; border-radius: 99px; background: var(--kb-c9d2cf, #c9d2cf); flex-shrink: 0; transition: background .2s ease; }
.kw-tema-sw i::after, .nav-tema__sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--kb-ffffff, #fff); box-shadow: 0 1px 2px var(--ks-00000040, rgba(0,0,0,.25)); transition: transform .22s cubic-bezier(.34,1.56,.5,1); }
.kw-tema-sw.is-on, .kw-tema-sw[aria-checked="true"] { color: var(--kt-primary, #0f3d3e); border-color: var(--kl-primary, #0f3d3e); }
:is(.kw-tema-sw, .nav-tema)[aria-checked="true"] :is(i, .nav-tema__sw) { background: var(--kb-2a8a84, #2a8a84); }
:is(.kw-tema-sw, .nav-tema)[aria-checked="true"] :is(i, .nav-tema__sw)::after { transform: translateX(12px); }
.nav-tema { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.nav-tema span { flex: 1; }
.nav-tema .nav-tema__sw { background: var(--kb-ffffff38, rgba(255,255,255,.22)); }

/* ── Popup "Pasang aplikasi" (pwa.js §2) ───────────────────────────── */
.kw-inst { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: flex-end; justify-content: center; }
.kw-inst__bg { position: absolute; inset: 0; background: var(--kb-08181880, rgba(8,24,24,.5)); opacity: 0; transition: opacity .28s ease; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.kw-inst__sheet { position: relative; width: 100%; max-width: 460px; background: var(--kb-ffffff, #fff); color: var(--text-base, var(--kt-1c2b2b, #1c2b2b)); border-radius: 26px 26px 0 0; padding: 10px 20px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -18px 50px -20px var(--ks-00000073, rgba(0,0,0,.45)); transform: translateY(105%); transition: transform .34s cubic-bezier(.2,.9,.25,1); }
.kw-inst.is-in .kw-inst__bg { opacity: 1; } .kw-inst.is-in .kw-inst__sheet { transform: none; }
@media (min-width: 700px) { .kw-inst { align-items: center; } .kw-inst__sheet { border-radius: 26px; transform: translateY(24px) scale(.97); opacity: 0; transition: transform .3s cubic-bezier(.2,.9,.25,1), opacity .25s ease; } .kw-inst.is-in .kw-inst__sheet { transform: none; opacity: 1; } .kw-inst__grip { display: none; } }
.kw-inst__grip { width: 40px; height: 5px; border-radius: 99px; background: var(--kb-d9e0de, #d9e0de); margin: 0 auto 12px; }
.kw-inst__x { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 12px; border: 0; background: var(--surface, var(--kb-f6f7f5, #f6f7f5)); color: var(--text-muted, var(--kt-66756f, #66756f)); display: grid; place-items: center; cursor: pointer; }
.kw-inst__hd { display: flex; align-items: center; gap: 14px; padding: 6px 40px 4px 0; }
.kw-inst__hd img { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 8px 20px -8px var(--ks-0f3d3e80, rgba(15,61,62,.5)); flex-shrink: 0; }
.kw-inst__hd b { display: block; font-size: 1.12rem; font-weight: 850; letter-spacing: -.01em; }
.kw-inst__hd small { display: block; font-size: .78rem; color: var(--text-muted, var(--kt-66756f, #66756f)); margin-top: 2px; }
.kw-inst__why { list-style: none; margin: 16px 0 14px; padding: 0; display: grid; gap: 10px; }
.kw-inst__why li { display: flex; align-items: center; gap: 12px; font-size: .88rem; font-weight: 600; }
.kw-inst__why svg { width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: var(--kb-e6f1f1, #e6f1f1); color: var(--kt-0f3d3e, #0f3d3e); flex-shrink: 0; box-sizing: border-box; }
.kw-inst__go { width: 100%; height: 52px; border: 0; border-radius: 16px; background: linear-gradient(180deg, var(--kb-17595a, #17595a), var(--kb-0f3d3e, #0f3d3e)); color: var(--kt-ffffff, #fff); font: inherit; font-size: .98rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 10px 22px -12px var(--ks-0f3d3ecc, rgba(15,61,62,.8)); }
.kw-inst__go:active { transform: scale(.98); }
.kw-inst__go.is-ghost { background: var(--surface, var(--kb-f6f7f5, #f6f7f5)); color: var(--text-base, var(--kt-1c2b2b, #1c2b2b)); box-shadow: none; border: 1px solid var(--border, var(--kl-e0e4e2, #e0e4e2)); height: 46px; }
.kw-inst__steps { list-style: none; margin: 0 0 12px; padding: 12px; display: grid; gap: 10px; border-radius: 16px; background: var(--kb-f4f8f7, #f4f8f7); border: 1px solid var(--kl-e3ecea, #e3ecea); }
.kw-inst__steps li { display: flex; align-items: center; gap: 12px; }
.kw-inst__steps li > span { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--kb-ffffff, #fff); color: var(--kt-0f3d3e, #0f3d3e); border: 1px solid var(--kl-dbe6e3, #dbe6e3); flex-shrink: 0; font-size: .86rem; }
.kw-inst__steps p { margin: 0; font-size: .86rem; line-height: 1.4; }
.kw-inst__later { display: block; margin: 10px auto 0; padding: 8px 14px; border: 0; background: none; color: var(--text-muted, var(--kt-66756f, #66756f)); font: inherit; font-size: .84rem; font-weight: 650; cursor: pointer; }
html.kw-standalone [data-kw-install] { display: none !important; }
.more-inst { display: flex; align-items: center; gap: 12px; width: calc(100% - 4px); margin: 0 2px 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--kl-cfe3df, #cfe3df); background: linear-gradient(135deg, var(--kb-eef7f5, #eef7f5), var(--kb-e3f1ef, #e3f1ef)); color: var(--kt-0f3d3e, #0f3d3e); font: inherit; text-align: left; cursor: pointer; }
.more-inst img { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.more-inst b { display: block; font-size: .88rem; } .more-inst small { display: block; font-size: .74rem; color: var(--kt-4f6662, #4f6662); }
.more-inst i { margin-left: auto; font-style: normal; font-size: .78rem; font-weight: 800; padding: 6px 12px; border-radius: 99px; background: var(--kb-0f3d3e, #0f3d3e); color: var(--kt-ffffff, #fff); white-space: nowrap; }