:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --text: #101828;
  --muted: #667085;
  --border: #e4e7ec;
  --soft: #f2f4f7;
  --positive: #067647;
  --positive-bg: #ecfdf3;
  --negative: #b42318;
  --negative-bg: #fef3f2;
  --shadow: 0 12px 34px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
a { color: inherit; }

.app-shell {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 16px calc(14px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px 14px;
}
.brand { text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.brand strong { font-weight: 800; }
.read-only {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.hero {
  padding: 28px 24px;
  border-radius: 24px;
  background: #101828;
  color: #fff;
  box-shadow: var(--shadow);
}
.eyebrow {
  margin: 0 0 6px;
  color: inherit;
  opacity: .68;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  font-size: clamp(20px, 5vw, 30px);
  line-height: 1.18;
  letter-spacing: -.035em;
}
.balance {
  margin: 28px 0 4px;
  font-size: clamp(34px, 9vw, 52px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1;
}
.updated { margin: 10px 0 0; color: #d0d5dd; font-size: 12px; }

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.summary-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.summary-card > span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.summary-card > strong { display: block; overflow-wrap: anywhere; font-size: clamp(16px, 4vw, 22px); letter-spacing: -.025em; }
.summary-card.wide { grid-column: 1 / -1; }
.month-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.month-summary > span { min-width: 0; padding: 13px 14px; border-radius: 14px; background: var(--soft); }
.month-summary small { display: block; color: var(--muted); font-size: 11px; }
.month-summary strong { display: block; margin-top: 4px; font-size: 16px; overflow-wrap: anywhere; }

.transactions-section {
  margin-top: 28px;
  padding: 22px 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.section-heading .eyebrow { color: var(--muted); }
.section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.count { color: var(--muted); font-size: 12px; white-space: nowrap; }

.filters { display: grid; gap: 10px; margin: 18px 0 8px; }
.search-field input, .filter-row select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: #fff;
  color: var(--text);
}
.search-field input { padding: 0 13px; }
.search-field input:focus, .filter-row select:focus { border-color: #98a2b3; box-shadow: 0 0 0 3px rgba(152,162,179,.15); }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filter-row select { padding: 0 10px; }

.transaction-list { margin-top: 10px; }
.date-group { padding-top: 16px; }
.date-group + .date-group { margin-top: 4px; }
.date-heading { margin: 0 0 10px 2px; color: var(--muted); font-size: 12px; font-weight: 800; }
.transaction {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0 0 10px;
  padding: 15px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(16,24,40,.045);
  overflow: hidden;
}
.transaction::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 16px 0 0 16px;
  background: #98a2b3;
}
.transaction.masuk::after { background: var(--positive); }
.transaction.keluar::after { background: var(--negative); }
.transaction:last-child { margin-bottom: 0; }
.transaction-main { min-width: 0; padding-left: 2px; }
.transaction-category-card {
  position: relative; display: inline-flex; align-items: center; max-width: calc(100% - 8px); min-height: 28px; margin: 0 0 8px 8px; padding: 5px 11px 5px 14px;
  border: 1px solid currentColor; border-left: 0; border-radius: 5px 10px 10px 5px; background: var(--soft); color: var(--muted); box-shadow: 0 3px 10px rgba(16,24,40,.06);
}
.transaction-category-card::before {
  content: ""; position: absolute; left: -8px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%) rotate(45deg);
  border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; border-radius: 3px 0 3px 0; background: inherit;
}
.transaction-category-tag-hole { position: absolute; z-index: 1; left: 1px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(16,24,40,.12); }
.transaction-category-name { position: relative; z-index: 1; color: inherit; font-size: 11.5px; line-height: 1.3; font-weight: 820; overflow-wrap: anywhere; }
.transaction.masuk .transaction-category-card { border-color: #75c99c; background: var(--positive-bg); color: var(--positive); }
.transaction.keluar .transaction-category-card { border-color: #e89a93; background: var(--negative-bg); color: var(--negative); }
.transaction-title { margin: 0; font-size: 14px; font-weight: 750; overflow-wrap: anywhere; }
.transaction-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; color: var(--muted); font-size: 11px; }
.transaction-meta span:not(:last-child)::after { content: "·"; margin-left: 6px; }
.transaction-note { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.transaction-note strong { color: var(--text); font-weight: 700; }
.transaction-evidence { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.transaction-evidence-link { display: block; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-soft); }
.transaction-evidence-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.transaction-evidence-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.transaction-amount { align-self: center; font-size: 14px; font-weight: 800; white-space: nowrap; }
.transaction.masuk .transaction-amount { color: var(--positive); }
.transaction.keluar .transaction-amount { color: var(--negative); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tag { padding: 3px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 10px; }
.empty-state { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.error-state { color: var(--negative); }

.load-more {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-weight: 750;
  cursor: pointer;
}
.load-more:active { background: var(--soft); }

.proxyz-footer{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px auto 0;padding:11px 8px max(9px,env(safe-area-inset-bottom));border-top:1px solid var(--border);color:var(--muted);font-size:11.5px;line-height:1.2;text-align:center}.proxyz-footer-signature{display:inline-flex;align-items:center;justify-content:center;gap:7px}.proxyz-footer-mark{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#101828;color:#fff;font-size:11px;font-weight:900}.proxyz-footer-credit{white-space:nowrap}.proxyz-footer-credit strong{color:#101828;font-weight:900}.proxyz-footer-o{text-transform:uppercase}.proxyz-footer-xyz{letter-spacing:.02em}.proxyz-footer-meta{color:#98a2b3;font-size:10.5px;white-space:nowrap}

.list-page .hero { margin-bottom: 14px; }
.kas-list { display: grid; gap: 10px; }
.kas-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  text-decoration: none;
}
.kas-card h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.kas-card p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.kas-card .arrow { color: var(--muted); font-size: 22px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 420px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .hero { padding: 24px 18px; border-radius: 20px; }
  .summary-card { padding: 15px; }
  .transactions-section { padding: 19px 14px; }
  .filter-row { grid-template-columns: 1fr; }
  .transaction { gap: 8px; padding: 14px 12px; }
  .transaction-amount { font-size: 13px; }
  .proxyz-footer { gap: 5px 9px; }
  .proxyz-footer-meta { width: 100%; }
}

/* Dashboard privat */
.unlock-panel {
  margin-top: 28px;
  padding: 30px 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  text-align: center;
}
.unlock-panel[hidden], #dashboard-content[hidden] { display: none !important; }
.lock-icon { font-size: 32px; margin-bottom: 10px; }
.unlock-panel h1 { margin: 5px 0 10px; font-size: clamp(22px, 6vw, 30px); letter-spacing: -.04em; }
.unlock-copy { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.6; }
.unlock-form { max-width: 440px; margin: 22px auto 0; text-align: left; }
.unlock-form label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 750; }
.password-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.password-row input {
  width: 100%; min-width: 0; min-height: 46px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 12px; outline: none;
  background: #fff; color: var(--text);
}
.password-row input:focus { border-color: #98a2b3; box-shadow: 0 0 0 3px rgba(152,162,179,.15); }
.password-row button {
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 12px;
  background: var(--text); color: #fff; font-weight: 800; cursor: pointer;
}
.password-row button:disabled { opacity: .6; cursor: wait; }
.unlock-error { min-height: 18px; margin: 9px 2px 0; color: var(--negative); font-size: 12px; }
.kas-card.private { border-style: dashed; }

@media (max-width: 420px) {
  .password-row { grid-template-columns: 1fr; }
  .password-row button { width: 100%; }
}

/* V3 — Kas privat login WhatsApp */
.unlock-error.success { color: #067647; }
.unlock-error.error { color: var(--negative); }
.text-button {
  display: inline-flex;
  margin: 10px auto 0;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: #475467;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.text-button:active { color: #101828; }
#kas-otp { letter-spacing: .18em; font-weight: 800; text-align: center; }
@media (max-width: 420px) {
  .unlock-panel { margin-top: 16px; padding: 24px 16px; }
  .unlock-copy { font-size: 12.5px; }
}
/* BEGIN PROxyz GLOBAL FOOTER V095 */
.proxyz-footer{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;flex-wrap:nowrap!important;width:max-content!important;max-width:100%!important;margin:14px auto 2px!important;padding:7px 10px max(7px,env(safe-area-inset-bottom))!important;border:1px solid rgba(16,24,40,.08)!important;border-radius:999px!important;background:linear-gradient(135deg,#101828 0%,#1d2939 100%)!important;color:#d0d5dd!important;font-size:11.5px!important;line-height:1!important;text-align:center!important;box-shadow:0 8px 20px rgba(16,24,40,.10)!important}.proxyz-footer-signature{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-width:0!important}.proxyz-footer-mark{display:grid!important;place-items:center!important;flex:0 0 auto!important;width:23px!important;height:23px!important;border-radius:8px!important;background:rgba(217,72,15,.16)!important;color:#ff9b73!important;font-size:11px!important;font-weight:900!important;box-shadow:none!important}.proxyz-footer-credit{white-space:nowrap!important;color:#d0d5dd!important}.proxyz-footer-credit strong{color:#fff!important;font-weight:900!important}.proxyz-footer-o{text-transform:uppercase!important}.proxyz-footer-xyz{color:#ff8a5b!important;letter-spacing:.02em!important}.proxyz-footer-meta{padding-left:8px!important;border-left:1px solid rgba(255,255,255,.12)!important;color:#98a2b3!important;font-size:10.5px!important;white-space:nowrap!important}@media(max-width:360px){.proxyz-footer{gap:6px!important;padding-inline:8px!important;font-size:10.8px!important}.proxyz-footer-mark{width:21px!important;height:21px!important}.proxyz-footer-meta{padding-left:6px!important;font-size:9.8px!important}}
/* END PROxyz GLOBAL FOOTER V095 */



/* BEGIN PROxyz GLOBAL FOOTER V096 */
.proxyz-footer{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;flex-wrap:wrap!important;max-width:100%!important;margin:14px auto 2px!important;padding:0 6px max(6px,env(safe-area-inset-bottom))!important;border:0!important;background:transparent!important;color:#667085!important;font-size:11.5px!important;line-height:1.2!important;text-align:center!important;box-shadow:none!important}.proxyz-footer-signature{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-width:0!important}.proxyz-footer-mark{display:grid!important;place-items:center!important;flex:0 0 auto!important;width:20px!important;height:20px!important;border-radius:999px!important;background:transparent!important;color:#d9480f!important;font-size:12px!important;font-weight:900!important;box-shadow:none!important}.proxyz-footer-credit{white-space:nowrap!important;color:#667085!important}.proxyz-footer-credit strong{color:#101828!important;font-weight:900!important}.proxyz-footer-o{text-transform:uppercase!important}.proxyz-footer-xyz{color:#d9480f!important;letter-spacing:.02em!important}.proxyz-footer-meta{color:#98a2b3!important;font-size:10.5px!important;white-space:nowrap!important;border:0!important;padding-left:0!important}@media(max-width:360px){.proxyz-footer{gap:6px!important;font-size:10.8px!important}.proxyz-footer-mark{width:18px!important;height:18px!important}.proxyz-footer-meta{width:100%!important;font-size:9.8px!important}}
/* END PROxyz GLOBAL FOOTER V096 */


/* BEGIN PROxyz PUBLIC HEADER FOOTER REFRESH V103 */
.proxyz-wordmark{display:inline-flex!important;align-items:baseline!important;justify-content:center!important;gap:0!important;white-space:nowrap!important;line-height:1!important;font-variant-ligatures:none!important;text-transform:none!important;letter-spacing:0!important}.proxyz-wordmark-pro,.proxyz-wordmark-xyz{font-weight:900!important;letter-spacing:-.05em!important}.proxyz-wordmark-pro{color:#101828!important}.proxyz-wordmark-xyz{color:#d9480f!important}.proxyz-wordmark-web{display:inline-block!important;margin-left:.24em!important;color:#667085!important;font-size:.72em!important;font-weight:840!important;letter-spacing:-.02em!important}.topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:center!important;gap:10px!important;padding:16px 2px 14px!important}.topbar-side{min-width:0}.app-name{justify-self:start;text-decoration:none;font-weight:800;letter-spacing:-.02em;color:#101828}.topbar-center{display:flex;align-items:center;justify-content:center}.topbar-wordmark.proxyz-wordmark{font-size:19px!important}.read-only{justify-self:end;padding:5px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--muted);font-size:11px;font-weight:800}.proxyz-footer{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px 10px!important;flex-wrap:wrap!important;max-width:100%!important;margin:16px auto 2px!important;padding:0 8px max(6px,env(safe-area-inset-bottom))!important;border:0!important;background:transparent!important;color:#667085!important;font-size:11.5px!important;line-height:1.25!important;text-align:center!important;box-shadow:none!important}.proxyz-footer-signature{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important}.proxyz-footer-mark{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;border-radius:0!important;background:transparent!important;color:#d9480f!important;font-size:12px!important;font-weight:900!important;box-shadow:none!important}.proxyz-footer-credit{display:inline-flex!important;align-items:baseline!important;justify-content:center!important;gap:5px!important;white-space:nowrap!important;color:#667085!important}.proxyz-footer-name{color:#344054!important;font-weight:700!important}.proxyz-footer-gen{color:#98a2b3!important}.proxyz-footer-xyz{color:#101828!important}.proxyz-footer-meta{color:#98a2b3!important;font-size:10.5px!important;white-space:nowrap!important}@media(max-width:520px){.topbar-wordmark.proxyz-wordmark{font-size:17px!important}.app-name{font-size:15px}.read-only{font-size:10.5px}}
/* END PROxyz PUBLIC HEADER FOOTER REFRESH V103 */


/* BEGIN PROxyz PUBLIC BRAND FORCE V104 */
body .proxyz-footer{
  width:100%!important;
  max-width:100%!important;
  margin:16px auto 2px!important;
  padding:0 8px max(6px,env(safe-area-inset-bottom))!important;
  border:0!important;
  border-top:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:#667085!important;
}
body .proxyz-footer-mark{width:auto!important;height:auto!important;border:0!important;border-radius:0!important;background:transparent!important;color:#d9480f!important;box-shadow:none!important}
body .proxyz-footer-credit{color:#667085!important}
body .proxyz-footer-name{color:#344054!important;font-weight:700!important}
body .proxyz-footer-gen{color:#98a2b3!important}
body .proxyz-footer-xyz{color:#101828!important;font-weight:900!important}
.topbar-center{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
.topbar-center .proxyz-wordmark{font-size:20px!important;justify-content:center!important}
@media(max-width:520px){.topbar-center .proxyz-wordmark{font-size:18px!important}}
/* END PROxyz PUBLIC BRAND FORCE V104 */

/* BEGIN PROXYZ PUBLIC FOOTER REFRESH V105 */
.proxyz-footer{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;flex-wrap:wrap!important;max-width:100%!important;margin:16px auto 2px!important;padding:0 6px max(8px,env(safe-area-inset-bottom))!important;border:0!important;background:transparent!important;color:#667085!important;font-size:12px!important;line-height:1.25!important;text-align:center!important;box-shadow:none!important;width:auto!important}.proxyz-footer-signature{display:inline-flex!important;align-items:baseline!important;justify-content:center!important;gap:8px!important;min-width:0!important}.proxyz-footer-mark{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:auto!important;height:auto!important;border-radius:0!important;background:transparent!important;color:#d9480f!important;font-size:15px!important;font-weight:900!important;box-shadow:none!important}.proxyz-footer-credit{white-space:nowrap!important;color:#667085!important;font-weight:700!important}.proxyz-footer-credit strong{color:#101828!important;font-weight:900!important;letter-spacing:-.03em!important}.proxyz-footer-o{color:#d9480f!important;font-weight:900!important;text-transform:none!important}.proxyz-footer-xyz{color:#d9480f!important;letter-spacing:.03em!important;font-weight:900!important}.proxyz-footer-meta{color:#98a2b3!important;font-size:10.5px!important;white-space:nowrap!important;border:0!important;padding-left:0!important}@media(max-width:360px){.proxyz-footer{gap:6px!important;font-size:11.1px!important}.proxyz-footer-signature{gap:7px!important}.proxyz-footer-mark{font-size:14px!important}.proxyz-footer-meta{width:100%!important;font-size:9.8px!important}}
/* END PROXYZ PUBLIC FOOTER REFRESH V105 */

/* BEGIN KAS PUBLIC FOOTER MATCH ADMIN V1.2.9 */
body .proxyz-footer{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;max-width:100%!important;gap:8px!important;flex-wrap:wrap!important;
  margin:30px auto 18px!important;padding:0 8px max(16px,env(safe-area-inset-bottom))!important;
  border:0!important;background:transparent!important;color:#667085!important;
  font-size:12.2px!important;line-height:1.25!important;text-align:center!important;box-shadow:none!important;
}
body .proxyz-footer-signature{display:inline-flex!important;align-items:baseline!important;justify-content:center!important;gap:8px!important;min-width:0!important}
body .proxyz-footer-mark{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#d9480f!important;font-size:15px!important;font-weight:900!important;box-shadow:none!important}
body .proxyz-footer-credit{display:inline-flex!important;align-items:baseline!important;justify-content:center!important;gap:0!important;white-space:nowrap!important;color:#667085!important;font-weight:700!important}
body .proxyz-footer-name{color:#344054!important;font-weight:700!important}
body .proxyz-footer-gen{margin-left:8px!important;color:#98a2b3!important;font-weight:700!important}
body .proxyz-footer-xyz{margin-left:5px!important;color:#d9480f!important;font-weight:900!important;letter-spacing:.03em!important}
body .proxyz-footer-meta{color:#98a2b3!important;font-size:10.5px!important;white-space:nowrap!important;border:0!important;padding-left:0!important}
@media(max-width:640px){body .proxyz-footer{margin-top:28px!important;margin-bottom:16px!important;padding-bottom:max(18px,env(safe-area-inset-bottom))!important}}
@media(max-width:420px){body .proxyz-footer-signature{font-size:11.5px!important;gap:7px!important}body .proxyz-footer-mark{font-size:14px!important}}
/* END KAS PUBLIC FOOTER MATCH ADMIN V1.2.9 */