:root{
  --bg:#f4f6fa;--panel:#fff;--ink:#172033;--muted:#697386;--line:#dfe4ec;
  --accent:#008f45;--accent2:#006b34;--good:#15803d;--bad:#c2413b;--warn:#b7791f;
  --shadow:0 8px 30px rgba(22,32,51,.09);--radius:18px
}
*{box-sizing:border-box}html{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
body{margin:0;min-height:100vh}.hidden{display:none!important}
.app-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(244,246,250,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
h1{font-size:1.35rem;margin:0;letter-spacing:-.5px}h1 span{color:var(--accent)}.app-header p{margin:2px 0 0;font-size:.78rem;color:var(--muted)}

.brand-lockup{display:flex;align-items:center;gap:11px;min-width:0}
.brand-logo{display:block;width:58px;height:55px;object-fit:contain;flex:0 0 auto}
.brand-copy{min-width:0}
.brand-copy h1{line-height:1.05}
@media(max-width:380px){.brand-logo{width:50px;height:48px}.app-header{padding-left:12px;padding-right:12px}.brand-lockup{gap:8px}}

.icon-btn{border:0;background:transparent;font-size:1.65rem;line-height:1;padding:6px;color:var(--ink);cursor:pointer}
main{max-width:720px;margin:auto;padding:18px 16px 80px}.panel{background:var(--panel);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);text-align:center;margin-top:10vh}
button{font:inherit;cursor:pointer}.primary,.secondary{border-radius:12px;padding:12px 18px;font-weight:700;border:1px solid transparent}.primary{background:var(--accent);color:#fff}.primary:hover{background:var(--accent2)}.secondary{background:#fff;color:var(--ink);border-color:var(--line)}.small{padding:7px 12px;font-size:.85rem}.text-btn{border:0;background:transparent;color:var(--accent);font-weight:700}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.summary-card{background:var(--panel);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.summary-card.hero{grid-column:1/-1;background:linear-gradient(135deg,#172033,#263b66);color:#fff}.summary-card span{display:block;font-size:.82rem;opacity:.78}.summary-card strong{display:block;font-size:1.75rem;margin:5px 0}.summary-card.hero strong{font-size:2.5rem}.summary-card small{color:var(--muted)}.summary-card.hero small{color:#dce6ff}
.section-heading{display:flex;justify-content:space-between;align-items:center;margin:24px 4px 10px}.section-heading h2{font-size:1rem;margin:0}
.category-list,.transaction-list{display:grid;gap:10px}.category-card{background:var(--panel);border-radius:16px;padding:14px 15px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border-left:5px solid var(--accent)}.category-card[data-type="bill"]{border-left-color:var(--warn)}.category-card[data-type="savings"]{border-left-color:var(--good)}.category-name{font-weight:800}.category-meta{font-size:.77rem;color:var(--muted);margin-top:3px}.category-values{text-align:right}.category-values strong{font-size:1.05rem;display:block}.category-values small{display:block;margin-top:2px}.good{color:var(--good)}.bad{color:var(--bad)}.muted{color:var(--muted)}.category-actions{grid-column:1/-1;display:flex;gap:8px}.category-actions button{flex:1;padding:8px;border-radius:10px;border:1px solid var(--line);background:#fff}.category-actions .spend{background:var(--accent);color:#fff;border-color:var(--accent)}
.transaction{background:var(--panel);padding:12px 14px;border-radius:14px;display:flex;justify-content:space-between;gap:12px;border:1px solid var(--line)}.transaction strong{display:block}.transaction small{color:var(--muted)}.transaction .amount{font-weight:800;color:var(--bad);white-space:nowrap}.empty-mini{text-align:center;color:var(--muted);padding:20px;background:var(--panel);border-radius:14px}
.drawer{position:fixed;right:-310px;top:0;height:100%;height:100dvh;max-height:100vh;max-height:100dvh;width:min(310px,86vw);background:#fff;z-index:30;box-shadow:-10px 0 35px rgba(0,0,0,.18);padding:18px;transition:right .2s ease;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.drawer.open{right:0}.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.drawer>button,.drawer-file{border:0;background:#f5f7fb;text-align:left;padding:13px;border-radius:10px;color:var(--ink)}.drawer-file input{display:none}.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20}
dialog{border:0;border-radius:18px;padding:0;width:min(520px,94vw);box-shadow:0 24px 80px rgba(0,0,0,.25);color:var(--ink)}dialog::backdrop{background:rgba(15,23,42,.55)}dialog form,dialog>div:not(.dialog-head){padding:0}dialog form{padding:18px}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}form .dialog-head{margin:-18px -18px 16px}.dialog-head h2{font-size:1.15rem;margin:0}label{display:block;font-size:.83rem;font-weight:700;margin:13px 0}input,select{width:100%;padding:12px;border:1px solid #cfd6e2;border-radius:10px;margin-top:6px;font:inherit;background:#fff;color:var(--ink)}input:focus,select:focus{outline:2px solid #9ad5b7;border-color:var(--accent)}.money-entry{display:grid;grid-template-columns:110px 1fr;gap:8px}.hint,.allocation-note{font-size:.78rem;color:var(--muted);line-height:1.4}.check-row{display:flex;gap:9px;align-items:center;font-weight:500}.check-row input{width:auto;margin:0}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.dialog-scroll{max-height:65vh;overflow:auto;padding:16px 18px}.manage-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}.manage-row button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 9px}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#172033;color:#fff;padding:11px 16px;border-radius:12px;z-index:50;box-shadow:var(--shadow);max-width:90vw}
@media(max-width:420px){.summary-card strong{font-size:1.45rem}.summary-card.hero strong{font-size:2.15rem}.category-actions{flex-wrap:wrap}.category-actions button{min-width:42%}}

.segmented{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px;background:#eef2f8;padding:4px;border-radius:12px}
.mode-btn{border:0;background:transparent;padding:10px;border-radius:9px;font-weight:700;color:var(--muted)}
.mode-btn.active{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgba(22,32,51,.10)}
.danger-item{color:var(--bad)!important}
.status-line{font-weight:700}

.version-label{margin-top:2px!important;font-size:.7rem!important;color:var(--accent)!important;font-weight:800}
.version-panel{background:#eaf7f0;border:1px solid #b9dec9;border-radius:14px;padding:12px;margin-bottom:8px}
.version-panel>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px}
.version-panel span{color:var(--muted);font-size:.78rem}
.version-panel strong{font-size:.82rem}
.version-panel small{display:block;color:var(--muted);margin-top:7px;line-height:1.35}
.update-btn{width:100%;border:0;background:var(--accent);color:#fff;border-radius:9px;padding:9px;font-weight:800;margin-top:6px}
.update-banner{position:sticky;top:70px;z-index:9;max-width:720px;margin:10px auto 0;padding:10px 14px;background:#fff7db;border:1px solid #e5c65b;border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:var(--shadow)}
.update-banner small{color:#665b35}

.developer-card{max-width:620px}
.developer-card .dialog-header p{margin:3px 0 0;color:var(--muted);font-size:.82rem}
.developer-section{padding:14px 0;border-top:1px solid var(--border)}
.developer-section:first-of-type{border-top:0}
.developer-section h3{margin:0 0 10px;font-size:.92rem}
.diagnostic-grid{display:grid;grid-template-columns:1fr;gap:7px;margin-bottom:10px}
.diagnostic-row{display:flex;justify-content:space-between;gap:16px;padding:8px 10px;background:#f5f7fb;border-radius:10px}
.diagnostic-row span{color:var(--muted);font-size:.78rem}
.diagnostic-row strong{font-size:.78rem;text-align:right;word-break:break-word}
.wide{width:100%;margin-top:7px}
.danger-zone{background:#fff6f6;margin:12px -16px -16px;padding:14px 16px 16px;border-radius:0 0 16px 16px}
.danger-btn{border:1px solid #d88;background:#fff;color:var(--bad);border-radius:10px;padding:11px;font-weight:800}
.danger-zone small{display:block;color:var(--muted);margin-top:9px;line-height:1.35}

.category-card[data-type="prepaid"]{border-left-color:#7c3aed}.today-main{font-size:1.45rem!important}.balance-badge{display:inline-block;margin-top:4px;padding:3px 7px;border-radius:999px;font-size:.72rem;font-weight:800}.balance-badge.good{background:#e9f8ef}.balance-badge.bad{background:#fff0ef}.balance-badge.neutral{background:#eef2f8;color:var(--muted)}.account-chip{font-size:.72rem;color:var(--muted)}.category-actions .transfer{background:#fff7df;border-color:#e7c75b}.flow-positive{color:var(--good)!important}.transfer-amount{color:var(--accent)!important}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.developer-card{padding:18px}.developer-card .dialog-header{margin:-18px -18px 10px}.developer-section{border-top:1px solid var(--line)}

.category-meta{display:grid;gap:2px}
.spend-limit{margin-top:3px;font-weight:700;color:var(--good)}

/* Mobile Settings dialog: keep the panel inside the visible viewport and scroll its form. */
#settingsDialog{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:hidden}
#settingsDialog #settingsForm{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Keep touch scrolling inside the open navigation drawer. */
body.drawer-open{overflow:hidden;touch-action:none}
body.drawer-open .drawer{touch-action:pan-y}

/* Spend entry date and time override. */
.date-time-entry{display:grid;grid-template-columns:1fr 1fr;gap:10px}.date-time-entry label{margin-bottom:4px}@media(max-width:360px){.date-time-entry{grid-template-columns:1fr}}


/* Transaction history: padded, searchable, and independently scrollable. */
#listDialog.transaction-history-dialog{height:min(780px,calc(100vh - 20px));height:min(780px,calc(100dvh - 20px));max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow:hidden}
#listDialog.transaction-history-dialog #listDialogBody{height:calc(100% - 61px);max-height:none;overflow-y:auto;padding:16px 18px!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.history-open{overflow:hidden;touch-action:none}
body.history-open #listDialogBody{touch-action:pan-y}
.history-search-wrap{position:sticky;top:-16px;z-index:2;background:#fff;padding:0 0 12px}
.history-search-wrap input{margin:0}
.history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid var(--line)}
.history-copy{min-width:0}.history-copy strong{display:block;overflow-wrap:anywhere}.history-copy small{display:block;color:var(--muted);line-height:1.4;margin-top:3px;overflow-wrap:anywhere}
.history-amount{white-space:nowrap;text-align:right}.history-empty{text-align:center;color:var(--muted);padding:24px 8px}
@media(max-width:420px){.history-row{grid-template-columns:1fr}.history-amount{text-align:left}}
.history-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.history-actions{display:flex;gap:7px}.history-actions button{padding:6px 10px;font-size:.78rem}.history-actions .danger-link{border-color:#d7a4a4;color:#9f1d1d;background:#fff6f6}@media(max-width:420px){.history-side{align-items:flex-start}.history-actions{width:100%}.history-actions button{flex:1}}
.manage-pocket-actions{display:flex;gap:6px;align-items:center}.manage-pocket-actions button:disabled{opacity:.35;cursor:not-allowed}