:root { --bg:#f5f4ed; --border:#e2e5d9; --shadow:0 3px 18px #243d2c08; }
body { font-size:16px; padding-bottom:calc(98px + env(safe-area-inset-bottom)); }
header { padding-top:calc(22px + env(safe-area-inset-top)) !important; }
h1 { font-size:30px !important; letter-spacing:-1.2px; }
.font-display { font-family:Georgia,'Times New Roman',serif; }
main { padding-top:12px; }
.card { border-radius:20px; }
button { min-height:44px; touch-action:manipulation; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
input,select { min-height:46px; font-size:16px !important; }
#view-filter-bar { background:var(--surface-2); border-radius:16px; padding:5px; gap:4px; }
.filter-btn { border-radius:12px !important; font-size:14px !important; }
#month-nav-bar { justify-content:space-between; margin-top:12px; }
#month-label { font-size:15px; }
.overview-card { border-top:4px solid var(--accent); background:linear-gradient(135deg,var(--surface),var(--surface-2)); }
#dash-surplus { font-size:clamp(28px,8vw,40px); letter-spacing:-1.4px; }
.overview-card>.flex { flex-wrap:wrap; }
.overview-card .surface-2 { background:var(--surface); border:1px solid var(--border); }
.overview-card>.text-\[11px\] { font-size:12px; line-height:1.55; }
.home-add { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:15px 18px; border-radius:16px; background:var(--accent); color:var(--accent-ink); font-weight:600; }
.home-add span:last-child { font-size:12px; font-weight:400; }
nav { padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 24px #142a1910; }
.navbtn { font-size:11px !important; padding:14px 0; position:relative; }
.navbtn.active::before { content:''; position:absolute; top:0; width:25px; height:3px; border-radius:0 0 4px 4px; background:var(--accent); }
.navbtn.active { background:var(--surface-2); }
.progress-track { height:7px; }
#dash-categories>div>div:first-child { flex-wrap:wrap; gap:6px; }
#dash-categories>div>div:first-child>span { margin-left:22px; }
#transactions-list button { min-width:36px; }
dialog { max-height:85dvh; overflow-y:auto; border:1px solid var(--border); border-radius:22px; }
dialog::backdrop { background:#10271988; backdrop-filter:blur(3px); }
.text-xs { line-height:1.55; }
@media(min-width:800px){ body { max-width:680px !important; } nav>div { max-width:680px !important; } main { padding-left:28px !important; padding-right:28px !important; } }
@media(prefers-reduced-motion:reduce){ * { scroll-behavior:auto !important; transition:none !important; } }