/* BilancioCloud — unified responsive design system, shell and PWA experience. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  --ink:#20372f; --muted:#7f8c83; --primary:#1b6752; --green:#207457;
  --red:#cc695f; --line:#e6eae2; --shadow:0 9px 30px rgba(31,57,44,.035);
  --deep:#153f35; --canvas:#f6f7f3; --lime:#b9e9b2; --radius:21px;
  font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body { background:var(--canvas); color:var(--ink); min-width:320px; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
button[disabled] { opacity:.53; cursor:not-allowed; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #99d3a2; outline-offset:3px; }
.sr-only { position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
::selection { background:#d5f2d4; color:#163f35; }
.app { display:grid; grid-template-columns:258px minmax(0,1fr); min-height:100vh; min-height:100dvh; align-items:start; }
/* Left rail */
.side { position:sticky;top:0; min-height:100vh;min-height:100dvh; height:100dvh; width:auto; padding:29px 19px 22px; background:var(--deep); color:#eaf7eb; display:flex;flex-direction:column;overflow:auto; }
.brand { display:flex;align-items:center;gap:12px;padding:0 9px 67px;font-size:25px;line-height:.87;letter-spacing:-1.4px;font-weight:800;color:white; }
.brand>span { display:block; }
.brand .brand-accent, .mobile-brand .brand-accent, .auth-brand .brand-accent, .auth-mobile-logo .brand-accent { color:#b9e9b2; }
.brand small { display:block;font-size:8px;letter-spacing:2.5px;margin:11px 0 0 2px;font-weight:800;color:#9dbcb0; }
.brand-mark { width:42px;height:42px; flex-shrink:0; }
.nav-caption { font-size:10px;font-weight:750;letter-spacing:1.9px;color:#86a69a;margin:0 17px 12px; }
.nav { display:flex;flex-direction:column;gap:7px; }
.nav button { width:100%;display:flex;align-items:center;gap:14px;border:1px solid transparent;border-radius:12px;background:transparent;color:#bdd3ca;padding:13px 16px;text-align:left;font-size:13.5px;font-weight:580;transition:background .18s,color .18s,transform .18s; }
.nav button:hover { background:#28584b; color:#fff; }
.nav button.active { background:#c3eac0;color:#194639;font-weight:800;box-shadow:0 6px 24px rgba(7,25,17,.12); }
.nav-icon { width:20px;height:20px;display:block;flex:none; }
.side-foot { margin-top:auto;border:none;padding:22px 14px 5px;color:#cedfd6;line-height:1.55;position:relative; }
.side-foot::before { content:"";position:absolute;left:0;right:0;top:6px;border-top:1px solid #386255; }
.side-foot-emblem { width:32px;height:32px;border-radius:11px;background:#2e6254;display:grid;place-items:center;color:#b8e9b1;font-size:19px;margin:5px 0 13px; }
.side-foot strong { font-size:13px;display:block;color:white;letter-spacing:-.1px; }
.side-foot p { margin:8px 0 18px;font-size:12px;color:#b7cec3; }
.sidebar-install { width:100%;border-radius:10px;border:1px solid #508070;background:#275649;color:#e9fbec;padding:10px 7px;font-size:11px;font-weight:700; }
.sidebar-install:hover { background:#346958; }
.side-foot-line { font-size:8px;letter-spacing:1.5px;color:#89a69a;margin-top:23px; }
/* Main shell */
.main { max-width:1540px;width:100%;padding:38px clamp(24px,4vw,65px) 45px;margin:0 auto;min-width:0;min-height:100vh; }
.mobile-topbar { display:none; }
.top { display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:25px; }
.top-heading { min-width:0; }
.eyebrow { color:#839b8d;font-size:10px;letter-spacing:1.5px;font-weight:800;line-height:1.5; }
.eyebrow-dot { color:#a7bcb0;padding:0 7px; }
.page-title { margin:7px 0 2px;font-size:clamp(27px,2.6vw,38px);line-height:1.14;letter-spacing:-1.6px;font-weight:780;color:#193c31; }
.page-subtitle { font-size:13px;color:var(--muted);margin:8px 0 0;line-height:1.5; }
.top-actions { display:flex;align-items:center;flex-direction:row;gap:10px;flex-shrink:0; }
.month-wrapper { position:relative; }
.month-wrapper::before { content:"◫";position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:18px;color:#5a7567;pointer-events:none; }
.month { min-width:167px;padding:12px 33px 12px 39px;font-size:12px;border:1px solid #e0e7dd;background:#fff;border-radius:12px;font-weight:750;color:#365548;box-shadow:0 3px 14px #153d3507; }
.primary { display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#216e56;border-color:#216e56;color:#fff;border-radius:12px;font-size:12.5px;line-height:1.2;padding:13px 18px;font-weight:750;box-shadow:0 7px 16px #2268511c;transition:transform .16s,background .16s,box-shadow .16s; }
.primary:hover { background:#15513f;transform:translateY(-1px);box-shadow:0 10px 20px #22685125; }
.secondary { display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #dde6dc;border-radius:11px;background:#fff;color:#355649;font-size:12px;font-weight:740;padding:11px 15px;box-shadow:none; }
.secondary:hover { background:#eef5ef; }
.smallbutton { border:0;background:#ebf5ec;color:#237053;font-size:11px;font-weight:780;border-radius:10px;padding:9px 12px;white-space:nowrap; }
.smallbutton:hover { background:#daf0d9;color:#175b43; }
.sync-rail { position:relative;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e5ebe2;border-radius:13px;background:#fff;padding:10px 13px;margin-bottom:24px;min-height:47px; }
.sync-left { display:flex;gap:10px;align-items:center;min-width:0; }
.sync-dot { display:block;width:8px;height:8px;border-radius:50%;background:#75b994;box-shadow:0 0 0 4px #eaf4eb;flex:none; }
.cloud-status { color:#617b69;font-size:11px;font-weight:670; }
.cloud-status.pending { color:#b68738; }
.cloud-status.error { color:#b34e47; }
.sync-details { position:relative;flex-shrink:0; }
.sync-details summary { list-style:none;display:flex;align-items:center;gap:6px;border-radius:9px;padding:6px 8px;color:#597365;font-size:11px;font-weight:750;cursor:pointer; }
.sync-details summary::-webkit-details-marker { display:none; }
.sync-details[open] summary, .sync-details summary:hover { background:#f0f5ee; }
.sync-details[open] summary svg { transform:rotate(180deg); }
.sync-menu { position:absolute;top:calc(100% + 8px);right:0;z-index:21;width:214px;background:#fff;border:1px solid #dfe9dd;box-shadow:0 16px 38px #122d2230;border-radius:13px;padding:6px; }
.sync-menu button { width:100%;display:block;text-align:left;padding:12px 10px;font-size:12px;font-weight:640;color:#385c4a;border:0;background:transparent;border-radius:9px; }
.sync-menu button:hover { background:#f1f6ef; }
.page-content { min-height:52vh; }
.app-footer { display:flex;justify-content:space-between;align-items:center;gap:12px;color:#91a097;font-size:10px;margin-top:38px;padding:19px 0;border-top:1px solid #e7ece5; }
.app-footer span span { color:#619775; }
/* Summary */
.overview-hero { min-height:255px;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;border-radius:24px;padding:30px 37px;color:#ecfcf1;background:radial-gradient(ellipse at 80% 8%,#376b58 0,transparent 45%),linear-gradient(118deg,#1a463b,#15382f 74%);margin:0 0 17px;box-shadow:0 16px 28px #153d3520; }
.hero-main { position:relative;z-index:2; }
.hero-kicker { font-size:9px;letter-spacing:1.7px;font-weight:800;color:#c6e7c9;display:flex;align-items:center;gap:7px; }
.hero-sparkle { font-size:17px;color:#c4f3b8; }
.hero-label { color:#c6dccd;font-size:13px;margin:30px 0 6px; }
.hero-amount { font-size:clamp(38px,4.6vw,57px);line-height:1.1;letter-spacing:-2px;font-weight:780;font-variant-numeric:tabular-nums;white-space:nowrap; }
.hero-description { color:#b1d0bb;font-size:11px;line-height:1.5;margin:8px 0 19px; }
.hero-chip { border:1px solid #ffffff29;background:#ffffff14;border-radius:30px;display:inline-flex;align-items:center;gap:8px;padding:8px 13px;color:#e4f7e7;font-size:11px; }
.hero-chip strong { color:#d2f7c1; }
.hero-art { position:absolute;right:-23px;top:-55px;width:400px;height:400px;z-index:1;pointer-events:none; }
.hero-ring { position:absolute;border:1px solid #d4e6d32b;border-radius:50%; }
.hero-ring.ring-one { width:340px;height:340px;top:42px;left:25px; }
.hero-ring.ring-two { width:270px;height:270px;top:77px;left:60px;background:#e0f3d80b; }
.hero-ring.ring-three { width:186px;height:186px;top:119px;left:102px;background:#dfefcf16; }
.hero-art-symbol { position:absolute;inset:0;display:grid;place-items:center;color:#cfefbe99;font-size:160px;font-weight:300; }
.metrics { grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:21px; }
.metric { border-radius:19px;border-color:#e6ebe2;padding:20px 22px;box-shadow:var(--shadow);min-width:0; }
.metric .toplabel { color:#647f70;font-size:11px;font-weight:700;gap:10px; }
.circle { width:33px;height:33px;border-radius:11px;color:#277454;font-size:21px;flex:none; }
.circle.mint { background:#e7f6e5; }
.circle.coral { background:#fff0e8;color:#c27756; }
.circle.lilac { background:#f0edfb;color:#8370bc; }
.metric strong { font-size:clamp(19px,2.1vw,27px);color:#214638;letter-spacing:-.8px;margin:12px 0 5px;line-height:1.2; }
.metric strong.gain { color:#1e7357; }
.metric small { font-size:10px;color:#94a398; }
.overview-layout { grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:20px; }
.panel { background:#fff;border:1px solid #e6eae2;box-shadow:var(--shadow);border-radius:20px;padding:23px 24px;margin-bottom:19px;min-width:0; }
.panel-head { gap:10px;margin-bottom:22px; }
.panel-head h2 { margin:3px 0 0;font-size:16px;line-height:1.35;font-weight:780;color:#254539;letter-spacing:-.45px; }
.section-eyebrow { color:#91a59a;letter-spacing:1.4px;font-size:9px;font-weight:800;margin-bottom:4px; }
.item { padding:13px 0;border-color:#edf0eb;gap:9px; }
.itemleft { min-width:0;gap:12px; }
.itemleft>div:last-child { min-width:0; }
.itemicon { border-radius:12px;background:#f0f6ed;color:#376f52;width:42px;height:42px;font-size:20px; }
.itemtitle { font-size:12px;color:#274339; }
.itemmeta { font-size:10px;color:#899c8e;margin-top:5px;line-height:1.4;white-space:normal; }
.money { font-size:13px;color:#264538;font-weight:800; }
.money.gain { color:#23815c; }
.money.loss { color:#c9766d; }
.hint, .footnote { color:#84998b;font-size:12px;line-height:1.65; }
.empty { color:#8fa096;line-height:1.6; }
.empty-state { display:flex;align-items:center;flex-direction:column;text-align:center;padding:21px 12px 26px; }
.empty-illustration { display:grid;place-items:center;width:55px;height:55px;border-radius:19px;background:#e8f5e7;color:#398061;font-size:27px;margin-bottom:13px; }
.empty-state strong { font-size:14px;color:#355f48; }
.empty-state p { color:#8fa095;font-size:12px;line-height:1.55;max-width:255px;margin:8px 0 15px; }
.empty-state.compact { padding:13px 8px; }
.bar-row { margin-bottom:21px; }
.barlabel { font-size:12px;color:#45644f;gap:8px; }
.barlabel span+span { font-size:10px;color:#8a9b8b; }
.track { height:8px;background:#eef2e9; }
.track>div { background:#78ba88; }
.track.over>div { background:#d47767; }
.progress-note { font-size:10px;color:#9eaa9f;margin-top:8px; }
.available-panel { background:#f0f6ed;border-color:#e4ecdf; }
.available-line { display:flex;justify-content:space-between;align-items:center;gap:12px;margin:15px 0 8px;font-size:13px;font-weight:680;color:#476b54; }
.available-line strong { color:#1e5741;letter-spacing:-.5px;font-size:21px;white-space:nowrap; }
.available-split { display:flex;justify-content:space-between;gap:9px;color:#7f9582;font-size:10px;border-bottom:1px solid #dbe7d7;padding-bottom:13px; }
.available-panel .footnote { margin:14px 0 0;font-size:10px; }
.salary-panel { background:#fffdf8;border-color:#f1ebda; }
.salary-panel .salary-amount { color:#1b654c;font-size:33px;font-weight:800;letter-spacing:-1px;margin:5px 0; }
.salary-panel .badge { background:#e9f4e9;color:#3b8058; }
.salary-panel .badge.warn { background:#fff1e5;color:#b27c4f; }
.salary-panel .footnote { margin:12px 0 0;font-size:10px; }
.badge { font-size:10px;border-radius:99px;background:#e5f3e7;color:#3b8058;padding:6px 9px; }
.badge.warn { background:#ffefe7;color:#ac7854; }
/* Other views: transactions, budgets, accounts, goals, insights */
.record-head { display:flex;gap:12px;margin:0 0 19px; }
.search, .filter { border:1px solid #dfe8df;background:white;border-radius:12px;padding:13px 15px;color:#294f3d;font-size:12px; }
.search { max-width:none;min-width:0; }
.filter { flex-shrink:0; }
.account-grid, .fund-grid, .budget-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:19px; }
.account-card, .fund-card, .budget-card { border:1px solid #e3eae0;background:#fff;border-radius:20px;padding:22px 22px 19px;box-shadow:var(--shadow); }
.account-card h3, .fund-card h3, .budget-card h3 { font-size:13px;color:#637c69;font-weight:700;margin:17px 0 9px; }
.account-card strong, .fund-card strong, .budget-card strong { font-size:clamp(22px,2.6vw,30px);letter-spacing:-.9px;color:#1d523d;font-variant-numeric:tabular-nums; }
.account-card .iconhead { color:#26674c; }
.account-card .hint { margin:14px 0 19px;font-size:11px; }
.fund-card .foot, .budget-card .foot { font-size:10px;color:#90a18f; }
.fund-card .track, .budget-card .track { margin-top:16px; }
.budget-card .note { font-size:11px;line-height:1.6; }
.budget-toolbar { padding:18px;background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:20px;gap:13px; }
.budget-summary { gap:12px; }
.budget-buttons { gap:9px; }
.budget-buttons .primary { background:#216e56; }
.category-chip { background:#f2f8ef;border-color:#e3eddf;color:#3d664e;border-radius:11px;padding:10px 12px; }
.category-tag { color:#307853;background:#def1df; }
.section-subhead { color:#8a9e90;letter-spacing:.4px; }
.note { background:#f3f7ef;color:#718473;border-radius:13px;font-size:12px;line-height:1.65; }
.statgrid { gap:19px; }
.stat-line { color:#658270;font-size:12px; }
.stat-track { background:#eaf0e7; }
.stat-track b { background:#69a981; }
.itemtools { gap:11px; }
.delete { color:#a5b8a8; }
.delete:hover { color:#b84d44; }
/* Forms, dialogs and controls */
.overlay { z-index:70;backdrop-filter:blur(5px);background:#09241dad;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom)); }
.modal { border:1px solid #e4ebdf;max-height:min(92vh,92dvh);padding:26px;border-radius:23px;box-shadow:0 25px 65px #061d164d; }
.modal h2 { color:#1f4b38;font-size:21px;font-weight:780; }
.close { border-radius:12px;background:#f0f5ed;color:#47614b;width:35px;height:35px;font-size:20px; }
.field { margin:14px 0; }
.field label { color:#516e59;font-size:11px;font-weight:730;margin-bottom:7px; }
.field input, .field select { border:1px solid #dce7dc;background:#fff;border-radius:11px;padding:12px 13px;font-size:14px;color:#244934;min-height:44px; }
.field input:focus, .field select:focus { border-color:#76af88;outline-color:#c4eac6; }
.radio-tabs { background:#eef3eb;border-radius:12px;padding:4px; }
.radio-tabs button { border-radius:9px; }
.radio-tabs button.active { color:#1d7151; }
.actions { margin-top:24px; }
.toast { background:#214b3d;color:#fff;border-radius:13px;padding:13px 18px;box-shadow:0 13px 35px #0c2d1f38;font-size:12px; }
.install-modal { max-width:430px; }
.install-icon { margin:6px 0 17px; }
.install-icon .brand-mark { width:58px;height:58px; }
.install-steps { padding:0;list-style:none;counter-reset:steps;margin:23px 0; }
.install-steps li { counter-increment:steps;display:flex;gap:12px;align-items:flex-start;color:#456351;line-height:1.65;font-size:12px;padding:10px 0; }
.install-steps li::before { content:counter(steps);flex:none;display:grid;place-items:center;color:#1c6248;background:#e1f2df;border-radius:50%;width:27px;height:27px;font-weight:750; }
.install-warning { color:#7c8d80;font-size:11px;line-height:1.6;background:#f2f6ef;padding:13px;border-radius:11px; }
.install-done { width:100%;margin-top:10px; }
/* Login — split editorial with mobile card. */
.auth-bg { min-height:100vh;min-height:100dvh;padding:0;background:var(--canvas);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:stretch; }
.auth-aside { position:relative;overflow:hidden;padding:48px clamp(35px,6vw,100px);display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 92% 83%,#427d5e 0,transparent 44%),linear-gradient(140deg,#1e5948,#15392f 75%);color:white; }
.auth-aside::before { content:"✳";position:absolute;right:-73px;bottom:-146px;font-size:480px;line-height:1;color:#ffffff09;pointer-events:none; }
.auth-brand { position:relative;display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-1px;font-size:25px; }
.auth-brand .brand-mark { width:43px;height:43px; }
.auth-story { position:relative;z-index:2;max-width:560px; }
.auth-tag { font-size:10px;letter-spacing:1.8px;font-weight:760;color:#c8eccc;margin-bottom:24px; }
.auth-story h2 { font-weight:800;font-size:clamp(48px,6vw,90px);line-height:1.07;letter-spacing:-4px;margin:0 0 27px; }
.auth-story h2 em { font-style:normal;color:#c1ecb4; }
.auth-story p { max-width:400px;font-size:15px;line-height:1.75;color:#c5ddd0;margin:0 0 35px; }
.auth-feature { display:inline-flex;align-items:center;gap:10px;border:1px solid #ffffff29;border-radius:50px;padding:11px 16px;background:#ffffff12;font-size:11px;color:#e4f6e7; }
.auth-feature span { font-size:18px;color:#c5f2b9; }
.auth-aside-foot { position:relative;font-size:9px;font-weight:700;letter-spacing:2px;color:#a0c5b1; }
.auth-panel { display:flex;flex-direction:column;justify-content:center;align-items:center;gap:25px;padding:55px clamp(22px,6vw,95px);min-width:0; }
.auth-card { width:min(410px,100%);max-width:100%;padding:0;background:transparent;box-shadow:none;border:0;border-radius:0; }
.auth-card .eyebrow { font-size:10px;color:#598c6b;letter-spacing:2px; }
.auth-card h1 { color:#1d4335;font-weight:800;font-size:clamp(32px,3.5vw,44px);line-height:1.14;letter-spacing:-1.7px;margin:13px 0 11px; }
.auth-card .title-period { color:#6fae78; }
.auth-card>.hint { font-size:13px;margin:0 0 33px;color:#819586; }
.auth-card .field { margin:0 0 17px; }
.auth-card .field label { font-size:12px;color:#4b6e56; }
.auth-card .field input { width:100%;min-height:50px;border:1px solid #dbe6d9;border-radius:13px;background:#fff;padding:15px;font-size:14px; }
.auth-card .primary { width:100%;min-height:50px;margin-top:5px;display:flex;justify-content:space-between;padding-left:18px;padding-right:17px;font-size:13px; }
.auth-card .primary span { font-size:19px; }
.auth-card .auth-error { margin-top:13px;font-size:12px; }
.auth-separator { margin:29px 0 20px;height:1px;background:#e5ebe2; }
.auth-security { font-size:11px;color:#8da292;text-align:center; }
.auth-install { display:block;border:0;background:transparent;color:#377458;font-size:11px;font-weight:750;text-align:center;margin:18px auto 0;padding:8px; }
.auth-install:hover { color:#154f38;text-decoration:underline; }
.auth-bottom { font-size:10px;color:#9daa9f;text-align:center;margin:0; }
.auth-mobile-logo { display:none; }
.boot-screen { min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#275c46;gap:8px; }
.boot-pulse { width:58px;height:58px;border-radius:20px;background:#d9edd8;display:grid;place-items:center;color:#1c674d;font-size:36px;animation:breathe 1.5s ease-in-out infinite; }
.boot-screen p { font-size:20px;font-weight:800;letter-spacing:-.5px;margin:11px 0 0; }
.boot-screen span { font-size:12px;color:#819889; }
@keyframes breathe { 50%{transform:scale(1.05);opacity:.8} }
/* The quick-add button is mobile-only. */
.fab-add { display:none; }
/* Adaptive layouts */
@media (max-width:1240px) {
 .app { grid-template-columns:225px minmax(0,1fr); }
 .side { padding-left:13px;padding-right:13px; }
 .main { padding:32px 27px 50px; }
 .overview-layout { grid-template-columns:1fr;gap:0; }
 .overview-right { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;align-items:start; }
 .overview-right .available-panel { grid-column:1/-1; }
 .overview-right .panel { margin-bottom:0; }
 .brand { font-size:23px; }
}
@media (max-width:900px) {
 .app { display:block; }
 .side { display:none; }
 .main { max-width:830px;padding:0 20px calc(112px + env(safe-area-inset-bottom)); }
 .mobile-topbar { display:flex;align-items:center;justify-content:space-between;min-height:83px;padding:calc(11px + env(safe-area-inset-top)) 0 12px;margin:0; }
 .mobile-brand { display:flex;align-items:center;gap:9px;font-size:22px;letter-spacing:-.9px;font-weight:800;color:#234f3c; }
 .mobile-brand .brand-mark { width:36px;height:36px; }
 .mobile-brand .brand-accent { color:#61996e; }
 .icon-button { width:40px;height:40px;display:grid;place-items:center;border:1px solid #dfe9dc;background:#fff;border-radius:13px;color:#24674d; }
 .icon-button .nav-icon { width:21px;height:21px; }
 .top { align-items:flex-end;margin:10px 0 19px; }
 .page-title { font-size:32px; }
 .eyebrow { font-size:9px; }
 .page-subtitle { font-size:12px; }
 .top-actions { flex-direction:row;align-self:flex-end; }
 .add-primary { display:none; }
 .month { min-width:155px; }
 .sync-rail { margin-bottom:18px; }
 .metrics { grid-template-columns:repeat(3,minmax(0,1fr));gap:11px; }
 .metric { padding:17px; }
 .metric strong { font-size:21px; }
 .overview-layout { grid-template-columns:1fr; }
 .overview-right { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .layout,.twocol,.statgrid { grid-template-columns:1fr;gap:0; }
 .sticky-bottom { display:grid;position:fixed;z-index:40;left:0;bottom:0;right:0;grid-template-columns:repeat(6,minmax(0,1fr));padding:9px 7px calc(10px + env(safe-area-inset-bottom));background:#ffffffed;backdrop-filter:blur(18px);border-top:1px solid #e4ebe2;box-shadow:0 -9px 23px #183e3210; }
 .sticky-bottom button { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;padding:8px 2px 5px;border:0;border-radius:10px;color:#90a298;background:transparent;font-size:9px;font-weight:650; }
 .sticky-bottom button span { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; }
 .sticky-bottom button.active { color:#1b7252;background:#eff7ed;font-weight:800; }
 .sticky-bottom button .nav-icon { width:20px;height:20px; }
 .fab-add { position:fixed;display:grid;place-items:center;z-index:39;right:21px;bottom:calc(91px + env(safe-area-inset-bottom));width:55px;height:55px;background:#206a51;color:white;border:2px solid #f8faf6;border-radius:19px;box-shadow:0 9px 25px #1b634937;font-size:31px;line-height:1; }
 .fab-add:hover { background:#164e3c; }
 .app-footer { margin-top:30px; }
 .account-grid,.fund-grid,.budget-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .auth-bg { grid-template-columns:1fr; }
 .auth-aside { display:none; }
 .auth-panel { justify-content:flex-start;min-height:100vh;min-height:100dvh;padding:max(28px,env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom)); }
 .auth-mobile-logo { display:flex;align-items:center;gap:10px;align-self:flex-start;width:100%;font-size:23px;font-weight:800;letter-spacing:-1px;color:#20563c; }
 .auth-mobile-logo .brand-mark { width:39px;height:39px; }
 .auth-mobile-logo .brand-accent { color:#61996e; }
 .auth-card { background:#fff;border:1px solid #e5ebe1;border-radius:25px;padding:29px 25px;box-shadow:0 15px 40px #2044340b;margin:auto 0; }
 .auth-card h1 { font-size:36px; }
 .auth-bottom { margin:0 auto; }
}
@media (max-width:640px) {
 .main { padding-left:16px;padding-right:16px; }
 .mobile-topbar { min-height:68px; }
 .top { display:flex;flex-wrap:wrap;align-items:flex-start;gap:13px; }
 .top-actions { width:100%;align-self:auto; }
 .month-wrapper { width:100%; }
 .month { width:100%;padding-top:11px;padding-bottom:11px; }
 .page-title { font-size:29px;letter-spacing:-1px; }
 .page-subtitle { margin-top:6px; }
 .overview-hero { min-height:235px;border-radius:20px;padding:25px 23px; }
 .hero-kicker { font-size:8px; }
 .hero-label { margin-top:22px; }
 .hero-amount { font-size:clamp(32px,9vw,49px);letter-spacing:-1.6px; }
 .hero-art { width:310px;height:310px;right:-149px;top:-31px;opacity:.49; }
 .hero-ring.ring-one { width:250px;height:250px; }
 .hero-ring.ring-two { width:190px;height:190px;top:72px;left:55px; }
 .hero-ring.ring-three { width:132px;height:132px;top:100px;left:84px; }
 .hero-art-symbol { font-size:115px; }
 .metrics { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
 .metric { padding:17px 16px;border-radius:17px; }
 .metric:last-child { grid-column:1/-1; }
 .metric strong { font-size:clamp(18px,5.2vw,23px); }
 .metric small { font-size:10px;line-height:1.4;display:block; }
 .metric .toplabel { font-size:10px; }
 .circle { width:29px;height:29px; }
 .overview-right { display:block; }
 .overview-right .panel { margin-bottom:18px; }
 .panel { padding:19px 18px;border-radius:18px;margin-bottom:16px; }
 .panel-head { gap:8px;flex-wrap:wrap; }
 .itemtitle { font-size:12px; }
 .itemicon { width:37px;height:37px;font-size:17px; }
 .money { font-size:12px; }
 .account-grid,.fund-grid,.budget-grid { grid-template-columns:1fr;gap:12px; }
 .account-card,.fund-card,.budget-card { padding:20px; }
 .budget-toolbar { padding:14px; }
 .budget-buttons { grid-template-columns:1fr 1fr; }
 .budget-buttons button { white-space:normal;min-height:40px; }
 .record-head { flex-wrap:wrap; }
 .record-head .search { flex:1 1 100%;max-width:none; }
 .record-head .filter { flex:1; }
 .statgrid { grid-template-columns:1fr; }
 .formrow { grid-template-columns:1fr; }
 .modal { padding:23px 18px;border-radius:19px; }
 .modal .actions { flex-wrap:wrap; }
 .auth-card { padding:28px 21px; }
 .auth-card h1 { font-size:32px; }
 .auth-panel { padding-left:17px;padding-right:17px; }
 .app-footer { display:block;font-size:9px; }
 .app-footer>span:last-child { display:none; }
}
@media (max-width:365px) {
 .hero-amount { font-size:31px; }
 .sticky-bottom { padding-left:2px;padding-right:2px; }
 .sticky-bottom button { font-size:8px; }
 .metric .toplabel { align-items:flex-start; }
 .metric strong { font-size:17px; }
 .page-title { font-size:27px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }