:root{color-scheme:light;--ink:#14212b;--muted:#65737e;--line:#d9e2e8;--surface:#fff;--page:#f4f7f8;--blue:#1769aa;--green:#147d64;--red:#b33b35;--gold:#966d12;--teal:#0f7b8f}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--page);color:var(--ink);font-family:Arial,"Noto Sans Hebrew",sans-serif}button,input,select{font:inherit}button{min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;padding:9px 14px;white-space:nowrap}.topbar{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:22px clamp(14px,4vw,42px) 14px;background:var(--surface);border-bottom:1px solid var(--line)}.kicker,.subtitle{margin:0}.kicker{color:var(--blue);font-weight:700}.subtitle{margin-top:5px;color:var(--muted)}h1,h2{margin:0;letter-spacing:0}h1{font-size:clamp(26px,4vw,38px)}h2{font-size:18px}.month-picker{display:grid;gap:6px;color:var(--muted);min-width:170px}.tabs{position:sticky;top:0;z-index:5;display:flex;gap:6px;overflow-x:auto;padding:10px clamp(14px,4vw,42px);background:var(--surface);border-bottom:1px solid var(--line)}.tab.active,button[type=submit],.quick-actions button{background:var(--blue);border-color:var(--blue);color:#fff}button.secondary{background:#fff;color:var(--muted)}main{padding:18px clamp(14px,4vw,42px) 86px}.view{display:none}.view.active{display:block}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}.metric,.panel,.data-card{background:var(--surface);border:1px solid var(--line);border-radius:8px}.metric{padding:16px;min-height:98px}.metric span{display:block;color:var(--muted);margin-bottom:10px}.metric strong{font-size:26px}.income strong{color:var(--green)}.expense strong{color:var(--red)}.balance strong{color:var(--blue)}.saving strong{color:var(--gold)}.workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.75fr);gap:16px}.panel{margin-bottom:16px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border-bottom:1px solid var(--line)}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:13px;padding:16px}.form-grid.compact{grid-template-columns:repeat(3,minmax(150px,1fr))}label{display:grid;gap:6px;color:var(--muted);min-width:0}input,select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:9px 10px}input:focus,select:focus,button:focus{outline:3px solid color-mix(in srgb,var(--teal),transparent 72%);outline-offset:1px}.wide{grid-column:span 2}.check{align-content:end;grid-auto-flow:column;justify-content:start;align-items:center}.check input{width:18px;min-height:18px}.actions{display:flex;align-items:end;gap:8px}.cards-table{display:grid;gap:10px;padding:14px}.data-card{padding:13px}.card-head,.card-row,.bar-meta,.list-item{display:flex;justify-content:space-between;gap:12px}.card-head{align-items:start;margin-bottom:10px}.card-title{font-weight:700}.card-subtitle,.card-row span,.empty,.settings-copy{color:var(--muted)}.card-row{padding:6px 0;border-top:1px solid #edf1f4}.row-actions{display:flex;gap:7px;justify-content:end;flex-wrap:wrap;margin-top:10px}.row-actions button{min-height:36px;padding:6px 10px}.bars,.list{padding:16px}.bar-row{display:grid;gap:8px;margin-bottom:14px}.bar-meta{color:var(--muted)}.bar-track{height:12px;background:#e8edf1;border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:var(--green);width:0}.list-item{padding:12px 0;border-bottom:1px solid var(--line)}.pill{display:inline-flex;align-items:center;border-radius:999px;background:#edf5fa;color:#125f85;padding:4px 9px;font-size:13px}.danger{color:var(--red)}.ok{color:var(--green)}.settings-copy{padding:16px;line-height:1.65}.empty{padding:8px 0}@media(max-width:920px){.topbar{align-items:stretch;flex-direction:column}.metric-grid,.workbench,.form-grid,.form-grid.compact{grid-template-columns:1fr}.wide{grid-column:auto}.quick-actions{grid-template-columns:1fr 1fr 1fr}.metric{min-height:86px}.tabs{bottom:0;top:auto;position:fixed;left:0;right:0;justify-content:start;padding:8px;background:#fff}.tab{min-width:92px}.card-head,.card-row,.list-item{align-items:flex-start}.actions{align-items:stretch}.actions button{flex:1}}@media(max-width:460px){.quick-actions{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr 1fr}.metric strong{font-size:22px}main{padding-inline:10px}.panel-head,.form-grid,.cards-table,.bars,.list{padding-inline:12px}}
.data-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.file-import{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:9px 14px;cursor:pointer}.file-import input{display:none}

.dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px;padding:14px}.dashboard-card{min-height:180px}.compact-bar{margin:10px 0}.sparkline{display:flex;align-items:end;gap:10px;min-height:112px;padding-top:18px}.spark-item{display:grid;justify-items:center;gap:6px;flex:1;color:var(--muted)}.spark-bar{width:100%;max-width:34px;min-height:6px;border-radius:6px 6px 0 0;background:var(--blue)}@media(max-width:920px){.dashboard-grid{grid-template-columns:1fr}.dashboard-card{min-height:auto}}

.profit-positive{color:var(--green)}.profit-negative{color:var(--red)}

.goal-progress{width:100%;height:10px;background:#e8edf1;border-radius:999px;overflow:hidden;margin:8px 0}.goal-progress div{height:100%;background:var(--green);border-radius:999px}

.event-chip{display:inline-flex;border-radius:999px;background:#fff3d6;color:#795200;padding:3px 8px;font-size:12px}

.sync-box{display:grid;gap:12px;margin-top:12px}.sync-status{margin:0;color:var(--muted);white-space:pre-line}.sync-status.danger{color:var(--red)}

#backupStatus{font-size:13px}

.topbar-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.refresh-button{white-space:nowrap}.last-updated{font-size:.85rem;color:var(--muted);background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:8px;padding:7px 10px}.list-tools{margin-bottom:12px}.list-tools label{display:block;max-width:420px}.list-tools input{width:100%;margin-top:6px}@media(max-width:720px){.topbar-tools{justify-content:stretch}.topbar-tools>*{flex:1 1 auto}.last-updated{text-align:center}.refresh-button{min-height:44px}}

.top-sync-status{font-size:.85rem;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 10px;max-width:min(520px,100%)}.top-sync-status.danger{color:var(--red);border-color:color-mix(in srgb,var(--red),#fff 60%);background:#fff7f6}@media(max-width:720px){.top-sync-status{flex-basis:100%;text-align:center}}

#settings .panel{overflow:visible}.settings-copy{display:grid;gap:14px}.settings-intro p{margin:0 0 10px}.sync-box{align-content:start}.sync-box>label{color:var(--ink);font-weight:700}.sync-box #syncEndpoint{font-weight:400;direction:ltr;text-align:left}.data-tools button,.file-import{justify-content:center;text-align:center}
@media(max-width:920px){main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}.settings-copy{padding:12px}.settings-intro{display:none}.sync-box{gap:10px;margin-top:0}.data-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}.data-tools button,.file-import{width:100%;min-width:0;white-space:normal;line-height:1.2;padding:9px 10px}.data-tools [data-save-sync]{grid-column:1/-1;order:1}.data-tools [data-export-json]{order:2}.data-tools .file-import{order:3}.data-tools [data-pull-sync]{order:4}.data-tools [data-test-sync]{order:5}.data-tools [data-push-sync]{order:6}.data-tools [data-create-backup]{order:7}.data-tools [data-restore-backup]{order:8}.sync-status{font-size:13px;line-height:1.35;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}.sync-status.danger{border-color:color-mix(in srgb,var(--red),#fff 62%);background:#fff7f6}.settings-list{display:none}}
@media(max-width:460px){main{padding-bottom:calc(168px + env(safe-area-inset-bottom))}#settings .panel{margin-bottom:0}.settings-copy{padding:10px}.data-tools{grid-template-columns:1fr}.data-tools [data-save-sync],.data-tools [data-export-json],.data-tools .file-import{grid-column:auto}.sync-box #syncEndpoint{font-size:14px}.sync-status{font-size:12.5px}}



.home-sync-summary{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px;color:var(--muted);font-size:14px}.home-sync-summary strong{color:var(--ink);font-size:16px}.setup-data-source{min-height:36px;padding:6px 10px}.cloud-status{display:inline-flex;align-items:center;gap:6px;font-weight:700}.cloud-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green)}.cloud-status.danger{color:var(--red)}.cloud-status.danger::before{background:var(--red)}.cloud-status.ok{color:var(--green)}.diagnostics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}.diagnostic-panel{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;min-width:0}.diagnostic-panel h3{margin:0 0 12px;font-size:16px}.wide-diagnostic{grid-column:1/-1}.diagnostic-list{display:grid;gap:8px;margin:0}.diagnostic-list div{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);gap:10px;border-top:1px solid #edf1f4;padding-top:8px}.diagnostic-list div:first-child{border-top:0;padding-top:0}.diagnostic-list dt{color:var(--muted)}.diagnostic-list dd{margin:0;font-weight:700;word-break:break-word;direction:ltr;text-align:right}.diagnostic-table-wrap{overflow:auto}.diagnostic-table{width:100%;border-collapse:collapse;font-size:13px}.diagnostic-table th,.diagnostic-table td{border-bottom:1px solid #edf1f4;padding:8px;text-align:right;vertical-align:top}.diagnostic-panel pre{margin:0;max-height:260px;overflow:auto;direction:ltr;text-align:left;white-space:pre-wrap;background:#f7fafb;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px}@media(max-width:920px){.diagnostics-grid{grid-template-columns:1fr;padding:12px}.diagnostic-list div{grid-template-columns:1fr}.home-sync-summary{display:grid;gap:6px}.setup-data-source{width:100%}}

.checking-balance small{display:block;margin-top:8px;color:var(--muted);line-height:1.35}

.commitment-summary-grid{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;padding:14px}.commitment-summary-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;min-height:82px}.commitment-summary-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}.commitment-summary-card strong{font-size:22px}.commitment-summary-card.active strong{color:var(--green)}.commitment-summary-card.paused strong{color:var(--muted)}.commitment-summary-card.needs_review strong{color:var(--gold)}.commitment-summary-card.inactive strong{color:#7c8790}.commitment-filters{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 14px}.commitment-filters button{min-height:38px;padding:7px 11px}.commitment-filters button.active{background:var(--blue);border-color:var(--blue);color:#fff}.commitments-layout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:14px;padding:0 14px 14px}.commitments-list{display:grid;gap:10px;align-content:start}.commitment-card{border-right:5px solid var(--line)}.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700;background:#edf1f4;color:var(--muted)}.commitment-card.status-active{border-right-color:var(--green)}.status-pill.status-active{background:#e9f7f2;color:var(--green)}.commitment-card.status-needs_review{border-right-color:var(--gold)}.status-pill.status-needs_review{background:#fff6df;color:var(--gold)}.commitment-card.status-paused{border-right-color:#7c8790}.status-pill.status-paused{background:#eef1f3;color:#57636d}.commitment-card.status-inactive,.commitment-card.status-completed,.commitment-card.status-archived{border-right-color:#a3adb5;opacity:.92}.status-pill.status-inactive,.status-pill.status-completed,.status-pill.status-archived{background:#f0f2f4;color:#65737e}.commitment-detail-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;position:sticky;top:72px}.commitment-detail-card h3{font-size:15px;margin:16px 0 10px}.commitment-detail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.commitment-timeline{display:grid;gap:8px;margin:0;padding:0;list-style:none}.commitment-timeline li{display:grid;grid-template-columns:100px 90px minmax(0,1fr);gap:8px;align-items:center;border-top:1px solid #edf1f4;padding-top:8px}.commitment-timeline time{color:var(--muted);direction:ltr;text-align:right}.commitment-timeline span{color:var(--muted);min-width:0;overflow-wrap:anywhere}
@media(max-width:1100px){.commitment-summary-grid{grid-template-columns:repeat(3,minmax(120px,1fr))}.commitments-layout{grid-template-columns:1fr}.commitment-detail-card{position:static}}
@media(max-width:560px){.commitment-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}.commitments-layout{padding:0 12px 12px}.commitment-filters{padding:0 12px 12px}.commitment-filters{display:grid;grid-template-columns:1fr 1fr}.commitment-filters button{white-space:normal}.commitment-timeline li{grid-template-columns:1fr;gap:4px}.commitment-detail-card{padding:12px}}


.update-app-button{margin-top:6px;width:100%}

/* v1.0.16 Step 1: bank-grade navigation and dashboard refresh */
:root{--navy:#102a43;--soft-blue:#eaf4fb;--soft-green:#e8f6f0;--soft-red:#fff0ee;--shadow:0 18px 42px rgba(16,42,67,.10);--radius-lg:8px}
body{background:linear-gradient(180deg,#eef5f8 0,#f7fafb 340px,#f4f7f8 100%)}
.topbar{align-items:center;position:sticky;top:0;z-index:30;box-shadow:0 1px 0 rgba(16,42,67,.06)}
.topbar>div:first-of-type{min-width:0}.hamburger-button{width:46px;height:46px;padding:0;border-color:#c9d8e2;background:#fff;font-size:24px;line-height:1}
.drawer-backdrop{position:fixed;inset:0;background:rgba(10,28,44,.38);z-index:60;opacity:0;transition:opacity .18s ease}.drawer-backdrop.open{opacity:1}
.app-drawer.tabs{position:fixed;top:0;bottom:0;right:0;left:auto;z-index:70;width:min(330px,86vw);display:flex;flex-direction:column;gap:6px;overflow-y:auto;padding:16px;background:#fff;border-left:1px solid var(--line);border-bottom:0;box-shadow:var(--shadow);transform:translateX(105%);transition:transform .2s ease}
.app-drawer.open{transform:translateX(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}.drawer-close{min-height:38px;width:38px;padding:0;font-size:24px}.app-drawer hr{width:100%;border:0;border-top:1px solid var(--line);margin:8px 0}.app-drawer .tab{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:46px;border-radius:8px;text-align:right;background:#fff;border-color:transparent;color:var(--ink)}.app-drawer .tab span{width:24px;text-align:center}.app-drawer .tab.active{background:var(--soft-blue);border-color:#c8e4f4;color:var(--blue);font-weight:700}.app-drawer .drawer-secondary{color:var(--muted)}
main{max-width:1240px;margin:0 auto;padding-top:20px}.panel,.metric,.data-card,.commitment-summary-card,.diagnostic-panel{border-radius:var(--radius-lg);box-shadow:0 8px 22px rgba(16,42,67,.04)}.panel-head h2{font-size:17px}
.balance-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(220px,.55fr);gap:14px;margin-bottom:14px}.balance-hero>div{background:var(--navy);color:#fff;border-radius:8px;padding:22px;box-shadow:var(--shadow);min-height:150px}.balance-hero>div:first-child{display:grid;align-content:space-between}.balance-hero span{display:block;color:rgba(255,255,255,.78);font-weight:700}.balance-hero strong{display:block;margin-top:10px;font-size:clamp(34px,7vw,58px);letter-spacing:0}.balance-hero small{display:block;margin-top:12px;color:rgba(255,255,255,.72)}.balance-hero .checking-balance{background:#fff;color:var(--ink);border:1px solid var(--line)}.balance-hero .checking-balance span{color:var(--muted)}.balance-hero .checking-balance strong{font-size:clamp(24px,4vw,32px);color:var(--green)}
.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quick-card{min-height:88px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon title" "icon copy";align-items:center;justify-content:start;gap:2px 12px;text-align:right;border-radius:8px;border:1px solid transparent;color:#fff;padding:16px 18px;box-shadow:0 12px 26px rgba(16,42,67,.08)}.quick-card span{grid-area:icon;font-size:26px}.quick-card strong{grid-area:title;font-size:18px}.quick-card small{grid-area:copy;color:rgba(255,255,255,.82)}.quick-card.income-action{background:var(--green);border-color:var(--green)}.quick-card.expense-action{background:var(--red);border-color:var(--red)}
.bank-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.home-dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.home-dashboard-grid .panel{margin-bottom:0}.recent-transactions{grid-column:1/-1}.ai-insights{background:linear-gradient(135deg,#fff,#eef7fb)}.ai-insights p{margin:0;padding:16px;color:var(--muted)}
.needs-dashboard{padding:16px}.donut-wrap{display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:center}.donut-chart{width:150px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--green) 0 calc(var(--needs)*1%),var(--red) calc(var(--needs)*1%) calc((var(--needs) + var(--wants))*1%),#dfe7ed 0)}.donut-chart::after{content:"";position:absolute;inset:28px;border-radius:50%;background:#fff}.donut-chart strong,.donut-chart span{position:relative;z-index:1}.donut-chart strong{font-size:26px;color:var(--navy)}.donut-chart span{align-self:start;color:var(--muted);font-size:12px}.donut-legend{display:grid;gap:10px}.donut-legend div{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.donut-legend em{font-style:normal;color:var(--muted);font-size:13px}.dot{width:10px;height:10px;border-radius:50%}.dot.needs{background:var(--green)}.dot.wants{background:var(--red)}.dot.savings{background:var(--gold)}.needs-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;color:var(--muted)}.needs-summary span{background:#f4f8fa;border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.mini-goal{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}.mini-goal>div:first-child{display:flex;justify-content:space-between;gap:12px}.mini-goal span,.mini-goal em{color:var(--muted);font-style:normal}.transaction-mini strong{white-space:nowrap}.income-text{color:var(--green)}.expense-text{color:var(--red)}
@media(max-width:920px){.topbar{position:sticky;align-items:stretch;padding:12px 12px 10px}.topbar>div:first-of-type h1,.topbar>div:first-of-type .subtitle{display:none}.topbar-tools{display:grid;grid-template-columns:1fr 1fr}.month-picker{min-width:0}.tabs.app-drawer{bottom:0;top:0;left:auto;right:0;padding:16px}.app-drawer .tab{min-width:0}.balance-hero,.home-dashboard-grid{grid-template-columns:1fr}.bank-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-actions{grid-template-columns:1fr 1fr}main{padding-bottom:calc(88px + env(safe-area-inset-bottom))}.donut-wrap{grid-template-columns:1fr;justify-items:center}.donut-legend{width:100%}}
@media(max-width:460px){main{padding-inline:10px}.balance-hero>div{min-height:auto;padding:18px}.quick-actions{grid-template-columns:1fr}.bank-kpis{grid-template-columns:1fr 1fr}.metric{padding:13px}.metric strong{font-size:20px}.topbar-tools{grid-template-columns:1fr}.home-sync-summary{margin-bottom:10px}.donut-chart{width:136px}}

/* v1.0.16 focused polish: donut, refresh button, month navigation */
.refresh-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 16px;border-color:#c8d8e3;background:#fff;color:var(--navy);font-weight:700;line-height:1;box-shadow:0 6px 14px rgba(16,42,67,.06)}.refresh-button span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--soft-blue);color:var(--blue);font-size:17px;line-height:1}.refresh-button strong{font-size:14px}.refresh-button:hover{border-color:#9fc7dd;background:#f7fbfd}
.month-control{direction:ltr;display:grid;grid-template-columns:44px minmax(170px,1fr) 44px;align-items:stretch;gap:8px;min-height:46px}.month-arrow{position:relative;z-index:2;display:grid;place-items:center;min-height:46px;width:44px;padding:0;border-radius:8px;border-color:#c8d8e3;background:#fff;color:var(--navy);font-size:26px;line-height:1;box-shadow:0 6px 14px rgba(16,42,67,.05)}.month-arrow:hover{border-color:#9fc7dd;background:#f7fbfd}.month-picker{direction:rtl;position:relative;display:grid;place-items:center;gap:0;min-width:0;height:46px;padding:0 14px;border:1px solid #c8d8e3;border-radius:8px;background:#fff;box-shadow:0 6px 14px rgba(16,42,67,.05);cursor:pointer}.month-picker span{color:var(--navy);font-weight:800;font-size:15px;line-height:1;pointer-events:none}.month-picker input{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;cursor:pointer}
.needs-dashboard{padding:18px}.donut-wrap{grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center}.donut-chart{width:148px;background:conic-gradient(var(--green) 0 calc(var(--needs)*1%),var(--red) calc(var(--needs)*1%) calc((var(--needs) + var(--wants))*1%),var(--gold) calc((var(--needs) + var(--wants))*1%) 100%);box-shadow:inset 0 0 0 1px rgba(16,42,67,.04),0 12px 24px rgba(16,42,67,.07)}.donut-chart::after{inset:30px;box-shadow:0 0 0 1px rgba(16,42,67,.04)}.donut-chart strong{align-self:end;line-height:1;font-size:28px;margin-bottom:1px}.donut-chart span{align-self:start;margin-top:2px;font-size:12px;font-weight:700}.donut-legend{gap:8px;align-content:center}.donut-legend div{grid-template-columns:auto minmax(64px,1fr) auto;gap:8px;min-height:38px;padding:8px 10px;border:1px solid #edf2f5;border-radius:8px;background:#fff}.donut-legend strong{font-size:14px}.donut-legend em{font-size:13px;color:var(--ink);white-space:nowrap}.dot{width:11px;height:11px}.needs-summary{margin-top:12px;justify-content:center}.needs-summary span{font-size:13px;background:#fff}
@media(max-width:920px){.topbar-tools{grid-template-columns:1fr;gap:8px}.refresh-button{width:100%}.month-control{grid-template-columns:42px minmax(0,1fr) 42px}.month-arrow{width:42px}.donut-wrap{grid-template-columns:1fr;gap:14px}.donut-legend{width:100%;max-width:440px}.needs-summary{justify-content:flex-start}}
@media(max-width:460px){.refresh-button,.month-picker,.month-arrow{min-height:44px}.month-control{gap:6px}.month-picker span{font-size:14px}.donut-chart{width:132px}.donut-chart::after{inset:27px}.donut-legend div{grid-template-columns:auto 1fr;align-items:start}.donut-legend em{grid-column:2;white-space:normal}}

/* v1.0.16 focused polish: soft quick actions, balance card, interactive donut */
.quick-card{color:var(--ink);border-color:#d8e7df;background:#fff;box-shadow:0 10px 22px rgba(16,42,67,.06)}.quick-card small{color:var(--muted)}.quick-card span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:22px}.quick-card.income-action{background:#ecfbf5;border-color:#bee8d8;color:#12382e}.quick-card.income-action span{background:#d6f4e8;color:var(--green)}.quick-card.expense-action{background:#fff1f3;border-color:#f2c9cf;color:#472025}.quick-card.expense-action span{background:#ffe0e5;color:var(--red)}
.balance-hero .checking-balance{display:grid;align-content:start;gap:8px}.balance-hero .checking-balance span{margin:0;color:var(--muted);font-size:14px}.balance-hero .checking-balance strong{margin:0;font-size:clamp(28px,4vw,38px);line-height:1.1}.balance-hero .checking-balance small{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.donut-chart{border:0;padding:0;cursor:pointer;color:inherit}.donut-chart:focus-visible,.donut-legend-row:focus-visible{outline:3px solid color-mix(in srgb,var(--teal),transparent 70%);outline-offset:3px}.donut-legend-row{display:grid;grid-template-columns:auto minmax(64px,1fr) auto;gap:8px;align-items:center;min-height:38px;width:100%;padding:8px 10px;border:1px solid #edf2f5;border-radius:8px;background:#fff;color:var(--ink);text-align:right;box-shadow:none}.donut-legend-row.active{border-color:#bdd8e7;background:#f5fbfe}.donut-legend-row strong{font-size:14px}.donut-legend-row em{font-style:normal;font-size:13px;color:var(--ink);white-space:nowrap}.donut-legend div{display:contents}
@media(max-width:460px){.donut-legend-row{grid-template-columns:auto 1fr;align-items:start}.donut-legend-row em{grid-column:2;white-space:normal}.quick-card span{width:38px;height:38px}}

/* v1.0.16 Design System palette and final UI polish */
:root{
  --color-primary:#1769aa;
  --color-secondary:#102a43;
  --color-success:#0f6b50;
  --color-danger:#9e3436;
  --color-warning:#966d12;
  --color-info:#0f7b8f;
  --color-background:#f4f7f8;
  --color-surface:#ffffff;
  --color-card:#ffffff;
  --color-border:#d9e2e8;
  --color-text-primary:#14212b;
  --color-text-secondary:#65737e;
  --color-text-muted:#8a98a4;
  --income-soft:#ddf6ea;
  --income-soft-strong:#c6eddc;
  --income-border:#a9dec9;
  --expense-soft:#ffe3e2;
  --expense-soft-strong:#ffd0ce;
  --expense-border:#f2b8b5;
  --card-radius:8px;
  --card-padding:16px;
  --card-shadow:0 10px 28px rgba(16,42,67,.055);
  --card-shadow-hover:0 14px 34px rgba(16,42,67,.085);
}
body{color:var(--color-text-primary);background:linear-gradient(180deg,#eef5f8 0,#f8fbfc 360px,var(--color-background) 100%)}
.panel,.metric,.data-card,.commitment-summary-card,.diagnostic-panel{background:var(--color-card);border-color:var(--color-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow)}
.panel,.metric,.quick-card,.balance-hero>div,.commitment-summary-card,.data-card{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease,background-color .18s ease}
.panel:hover,.metric:hover,.quick-card:hover{box-shadow:var(--card-shadow-hover)}
.panel-head{padding:16px 18px}.panel-head h2{font-size:18px;font-weight:800;color:var(--color-secondary)}.metric{padding:var(--card-padding)}.metric span,.card-subtitle,.card-row span,.empty,.settings-copy{color:var(--color-text-secondary)}.metric strong,.card-title{color:var(--color-text-primary);font-weight:800}.income strong{color:var(--color-success)}.expense strong{color:var(--color-danger)}.saving strong{color:var(--color-warning)}
.home-dashboard-grid{gap:16px}.bank-kpis{gap:14px}.balance-hero{gap:16px;margin-bottom:16px}.quick-actions{gap:14px;margin-bottom:16px}
.quick-card{min-height:92px;border-width:1px;color:var(--color-text-primary);transform:translateY(0)}.quick-card:active{transform:translateY(1px)}.quick-card.income-action{background:var(--income-soft);border-color:var(--income-border);color:#12382e}.quick-card.income-action span{background:var(--income-soft-strong);color:var(--color-success)}.quick-card.expense-action{background:var(--expense-soft);border-color:var(--expense-border);color:#4a2024}.quick-card.expense-action span{background:var(--expense-soft-strong);color:var(--color-danger)}.quick-card strong{font-weight:850}.quick-card small{color:var(--color-text-secondary)}
.balance-hero .checking-balance{padding:22px;gap:9px}.balance-hero .checking-balance strong{color:var(--color-success);font-weight:850}.balance-hero .checking-balance small{color:var(--color-text-secondary)}
.refresh-button{border-color:#b9cfdd;background:#fff;color:var(--color-secondary);box-shadow:var(--card-shadow)}.refresh-button span{background:#e8f4fb;color:var(--color-primary)}.refresh-button:hover{border-color:#94bed5;background:#f6fbfe;box-shadow:var(--card-shadow-hover)}.refresh-button:active,.month-arrow:active{transform:translateY(1px)}
.month-control{gap:10px}.month-arrow,.month-picker{border-color:#b9cfdd;box-shadow:var(--card-shadow)}.month-arrow:hover,.month-picker:hover{border-color:#94bed5;background:#f6fbfe}.month-picker span{font-weight:850;color:var(--color-secondary)}
.needs-dashboard{padding:20px}.donut-wrap{gap:22px}.donut-chart{width:154px;transition:transform .18s ease,box-shadow .18s ease}.donut-chart:hover{transform:scale(1.015)}.donut-chart:active{transform:scale(.995)}.donut-chart strong{font-size:32px;font-weight:900;animation:donutCenterSwap .2s ease}.donut-chart span{font-size:13px;color:var(--color-text-secondary);animation:donutCenterSwap .2s ease}.donut-legend{gap:9px}.donut-legend-row{border-color:#e4edf2;transition:background-color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}.donut-legend-row:hover{border-color:#c9dce8;background:#f8fcfd}.donut-legend-row.active{border-color:#a9cfe2;background:#eef8fc;box-shadow:0 8px 18px rgba(16,42,67,.05)}.donut-legend-row:active{transform:translateY(1px)}.donut-legend-row strong{font-weight:800}.donut-legend-row em{color:var(--color-text-secondary)}
@keyframes donutCenterSwap{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:920px){.panel-head{padding:15px 16px}.home-dashboard-grid{gap:14px}.month-control{gap:8px}.donut-chart{width:142px}.needs-dashboard{padding:18px}}
@media(max-width:460px){.quick-card{min-height:88px}.balance-hero,.quick-actions,.bank-kpis,.home-dashboard-grid{gap:12px}.panel-head{padding:14px}.needs-dashboard{padding:16px}.donut-chart{width:134px}.donut-chart strong{font-size:28px}}

/* v1.0.17: Appearance System and optional monthly budget */
:root{
  --accent:#147d64;
  --accent-strong:#0f6b50;
  --accent-soft:#ddf6ea;
  --accent-surface:#ecfbf5;
  --accent-border:#a9dec9;
  --danger-soft:#ffe3e2;
  --danger-surface:#fff1f3;
  --danger-border:#f2b8b5;
}
html[data-accent="emerald"]{--accent:#147d64;--accent-strong:#0f6b50;--accent-soft:#ddf6ea;--accent-surface:#ecfbf5;--accent-border:#a9dec9}
html[data-accent="blue"]{--accent:#1769aa;--accent-strong:#125889;--accent-soft:#e2f1fb;--accent-surface:#f1f8fd;--accent-border:#a9d2ec}
html[data-accent="indigo"]{--accent:#4f46b5;--accent-strong:#3f3794;--accent-soft:#ecebff;--accent-surface:#f6f5ff;--accent-border:#c7c4f4}
html[data-accent="orange"]{--accent:#c56a20;--accent-strong:#9d5419;--accent-soft:#fff0df;--accent-surface:#fff7ee;--accent-border:#efc08d}
html[data-theme="light"]{color-scheme:light;--ink:#14212b;--muted:#65737e;--line:#d9e2e8;--surface:#fff;--page:#f4f7f8;--navy:#102a43;--color-primary:var(--accent);--color-secondary:#102a43;--color-success:#0f6b50;--color-danger:#9e3436;--color-warning:#966d12;--color-info:#0f7b8f;--color-background:#f4f7f8;--color-surface:#fff;--color-card:#fff;--color-border:#d9e2e8;--color-text-primary:#14212b;--color-text-secondary:#65737e;--color-text-muted:#8a98a4;--soft-blue:var(--accent-soft);--blue:var(--accent);--green:#147d64;--red:#b33b35;--teal:var(--accent)}
html[data-theme="dark"]{color-scheme:dark;--ink:#edf4f7;--muted:#a8b6c0;--line:#263946;--surface:#142330;--page:#0c141c;--navy:#071018;--color-primary:var(--accent);--color-secondary:#edf4f7;--color-success:#41c797;--color-danger:#f0827d;--color-warning:#f0bf58;--color-info:#5ec5d6;--color-background:#0c141c;--color-surface:#142330;--color-card:#172938;--color-border:#263946;--color-text-primary:#edf4f7;--color-text-secondary:#a8b6c0;--color-text-muted:#7f91a0;--soft-blue:rgba(255,255,255,.07);--blue:var(--accent);--green:#41c797;--red:#f0827d;--teal:var(--accent);--shadow:0 18px 42px rgba(0,0,0,.34);--card-shadow:0 10px 28px rgba(0,0,0,.24);--card-shadow-hover:0 14px 34px rgba(0,0,0,.32)}
html[data-theme="dark"] body{background:linear-gradient(180deg,#0e1b25 0,#101b24 360px,var(--color-background) 100%)}
html[data-theme="dark"] button,html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] .app-drawer.tabs,html[data-theme="dark"] .topbar,html[data-theme="dark"] .donut-legend-row,html[data-theme="dark"] .month-picker,html[data-theme="dark"] .month-arrow,html[data-theme="dark"] .refresh-button,html[data-theme="dark"] .file-import{background:var(--color-surface);color:var(--color-text-primary);border-color:var(--color-border)}
html[data-theme="dark"] .donut-chart::after{background:var(--color-card)}
html[data-theme="dark"] .balance-hero .checking-balance,html[data-theme="dark"] .diagnostic-panel,html[data-theme="dark"] .commitment-detail-card,html[data-theme="dark"] .commitment-summary-card{background:var(--color-card);color:var(--color-text-primary);border-color:var(--color-border)}
.tab.active,button[type=submit],.commitment-filters button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.kicker,.app-drawer .tab.active,.balance strong{color:var(--accent)}
.app-drawer .tab.active{background:var(--accent-surface);border-color:var(--accent-border)}
.bar-fill,.goal-progress div{background:var(--accent)}
.refresh-button span{background:var(--accent-soft);color:var(--accent)}
input:focus,select:focus,button:focus{outline-color:color-mix(in srgb,var(--accent),transparent 70%)}
.monthly-budget-card{margin-bottom:16px}.monthly-budget-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:16px;padding:18px}.monthly-budget-body span{display:block;color:var(--color-text-secondary);font-weight:700}.monthly-budget-body strong{display:block;margin-top:8px;font-size:clamp(30px,6vw,46px);color:var(--accent-strong)}.monthly-budget-body dl{display:grid;gap:10px;margin:0}.monthly-budget-body dl div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--color-border);padding-top:10px}.monthly-budget-body dt{color:var(--color-text-secondary)}.monthly-budget-body dd{margin:0;font-weight:800}.budget-progress{grid-column:1/-1;height:12px;background:color-mix(in srgb,var(--accent-soft),var(--color-border) 16%);border-radius:999px;overflow:hidden}.budget-progress span{display:block;height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .22s ease}.monthly-budget-card.over-budget .monthly-budget-body strong{color:var(--color-danger)}.monthly-budget-card.over-budget .budget-progress span{background:var(--color-danger)}
.monthly-budget-suggestion{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;margin-bottom:16px;background:var(--accent-surface);border-color:var(--accent-border)}.monthly-budget-suggestion h2{font-size:18px;margin:0 0 6px;color:var(--color-text-primary)}.monthly-budget-suggestion p{margin:0;color:var(--color-text-secondary)}.budget-suggestion-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.budget-suggestion-actions input{max-width:140px}.appearance-note{align-self:center;color:var(--color-text-secondary);line-height:1.5}
html[data-theme="dark"] .monthly-budget-suggestion{background:color-mix(in srgb,var(--accent),var(--color-card) 86%);border-color:color-mix(in srgb,var(--accent),var(--color-border) 55%)}
@media(max-width:720px){.monthly-budget-body,.monthly-budget-suggestion{grid-template-columns:1fr}.budget-suggestion-actions{display:grid;grid-template-columns:1fr 1fr}.budget-suggestion-actions input{grid-column:1/-1;max-width:none}.monthly-budget-body{padding:16px}}

/* v1.0.17 critical UX fixes */
body:not([data-active-view="home"]) .month-control{display:none}
.transactionFormTitle{font-weight:800}
.typed-transaction-form .transaction-type-field{display:none}
.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.quick-card.secondary-quick{grid-column:1/-1;min-height:62px;grid-template-columns:auto 1fr auto;background:var(--color-card);border-color:var(--color-border);color:var(--color-text-primary);box-shadow:var(--card-shadow)}
.quick-card.secondary-quick span{background:var(--accent-soft);color:var(--accent)}
.quick-card.secondary-quick small{color:var(--color-text-secondary)}
.quick-card.secondary-quick::after{content:"משני";font-size:12px;font-weight:800;color:var(--color-text-muted);background:color-mix(in srgb,var(--accent-soft),var(--color-card) 55%);border:1px solid var(--accent-border);border-radius:999px;padding:4px 8px}
html[data-theme="dark"] .quick-card.secondary-quick::after{background:color-mix(in srgb,var(--accent),var(--color-card) 86%)}
@media(max-width:560px){.quick-actions{grid-template-columns:1fr}.quick-card.secondary-quick{grid-column:auto}.quick-card.secondary-quick::after{display:none}}

/* v1.0.18 UI polish + dark mode foundation */
:root{
  --control-height:42px;
  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --radius-sm:8px;
  --radius-md:10px;
}
html[data-theme="light"]{
  --app-bg:#f5f8fa;
  --app-surface:#ffffff;
  --app-card:#ffffff;
  --app-input:#ffffff;
  --app-border:#d8e3ea;
  --app-text:#14212b;
  --app-muted:#667784;
  --app-muted-2:#8795a0;
  --app-shadow:0 10px 28px rgba(16,42,67,.055);
  --app-shadow-soft:0 6px 16px rgba(16,42,67,.045);
  --state-success-bg:#eaf8f2;
  --state-warning-bg:#fff7e8;
  --state-danger-bg:#fff0f0;
  --state-info-bg:#edf7fb;
}
html[data-theme="dark"]{
  --app-bg:#0b1218;
  --app-surface:#111c25;
  --app-card:#152431;
  --app-input:#0f1a23;
  --app-border:#2b3c49;
  --app-text:#edf5f7;
  --app-muted:#a7b7c3;
  --app-muted-2:#7f92a0;
  --app-shadow:0 14px 34px rgba(0,0,0,.28);
  --app-shadow-soft:0 8px 22px rgba(0,0,0,.22);
  --state-success-bg:#123328;
  --state-warning-bg:#332817;
  --state-danger-bg:#351d20;
  --state-info-bg:#102d37;
}
html[data-theme="dark"] body{
  background:radial-gradient(circle at top right,rgba(31,92,114,.20),transparent 320px),var(--app-bg);
  color:var(--app-text);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .app-drawer.tabs,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .data-card,
html[data-theme="dark"] .commitment-summary-card,
html[data-theme="dark"] .commitment-detail-card,
html[data-theme="dark"] .diagnostic-panel,
html[data-theme="dark"] .balance-hero>div,
html[data-theme="dark"] .home-sync-summary,
html[data-theme="dark"] .last-updated{
  background:var(--app-card);
  color:var(--app-text);
  border-color:var(--app-border);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] button,
html[data-theme="dark"] .file-import,
html[data-theme="dark"] .month-picker,
html[data-theme="dark"] .month-arrow,
html[data-theme="dark"] .refresh-button,
html[data-theme="dark"] .donut-legend-row,
html[data-theme="dark"] .reference-row{
  background:var(--app-input);
  color:var(--app-text);
  border-color:var(--app-border);
}
html[data-theme="dark"] input::placeholder{color:var(--app-muted-2)}
html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .card-row span,
html[data-theme="dark"] .metric span,
html[data-theme="dark"] label,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .settings-copy,
html[data-theme="dark"] .donut-legend-row em,
html[data-theme="dark"] .needs-summary,
html[data-theme="dark"] .reference-row small{
  color:var(--app-muted);
}
html[data-theme="dark"] .app-drawer .tab{background:transparent;color:var(--app-text)}
html[data-theme="dark"] .app-drawer .tab.active{background:color-mix(in srgb,var(--accent),var(--app-card) 82%);border-color:color-mix(in srgb,var(--accent),var(--app-border) 45%)}
html[data-theme="dark"] .quick-card.secondary-quick{background:var(--app-card);border-color:var(--app-border)}
html[data-theme="dark"] .donut-chart::after{background:var(--app-card)}
html[data-theme="dark"] .bar-track,
html[data-theme="dark"] .budget-progress{background:#263947}
html[data-theme="dark"] .empty{background:rgba(255,255,255,.035);border-color:var(--app-border)}
.panel,.metric,.data-card,.commitment-summary-card,.diagnostic-panel,.balance-hero>div{
  border-radius:var(--radius-md);
  box-shadow:var(--app-shadow);
}
.panel-head{min-height:54px;gap:var(--space-2)}
.panel-head h2{line-height:1.25}
input,select,button,.file-import{
  min-height:var(--control-height);
  border-radius:var(--radius-sm);
}
.form-grid{gap:var(--space-3)}
.internal-field{display:none!important}
.empty{
  padding:12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--color-card),var(--color-background) 40%);
}
.topbar{padding:12px clamp(12px,3vw,32px) 10px;align-items:center}
.topbar>div:first-of-type h1{font-size:clamp(22px,3.2vw,32px)}
.topbar .subtitle{font-size:14px}
.topbar-tools{gap:8px}
.month-control{
  grid-template-columns:38px minmax(150px,1fr) 38px;
  min-height:40px;
  gap:6px;
}
.month-arrow,.month-picker{
  min-height:40px;
  height:40px;
  box-shadow:var(--app-shadow-soft);
}
.month-arrow{
  width:38px;
  font-size:22px;
}
.month-picker span{font-size:14px}
body:not([data-active-view="home"]):not([data-active-view="transactions"]) .month-control{display:none}
.refresh-button{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding-inline:14px;
}
.inline-refresh{
  min-height:34px;
  padding:6px 10px;
  margin-top:8px;
  font-size:13px;
}
.checking-balance{
  display:grid;
  gap:6px;
  align-content:center;
}
.checking-balance strong{line-height:1.15}
.quick-card{border-radius:var(--radius-md)}
.donut-wrap{grid-template-columns:142px minmax(0,1fr);gap:18px}
.donut-chart{
  width:140px;
  overflow:hidden;
}
.donut-chart strong{
  font-size:30px;
  line-height:1;
}
.donut-chart span{
  max-width:72px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
}
.donut-legend-row{
  grid-template-columns:auto minmax(74px,1fr) auto;
  min-height:40px;
}
.management-grid{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.management-subsection{
  grid-column:1/-1;
  padding:14px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-card);
}
.management-subsection h3{
  margin:0 0 10px;
  font-size:16px;
}
.reference-list{display:grid;gap:8px}
.reference-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:40px;
  padding:8px 10px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
}
.reference-row span{font-weight:800}
.reference-row small{color:var(--color-text-secondary)}
.roadmap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
@media(max-width:920px){
  .topbar{align-items:stretch}
  .topbar-tools{grid-template-columns:1fr}
  .month-control{grid-template-columns:40px minmax(0,1fr) 40px}
  .month-arrow{width:40px}
  .donut-wrap{grid-template-columns:1fr;justify-items:center}
  .donut-legend{width:100%}
}
@media(max-width:460px){
  .topbar{padding:10px}
  .panel-head{min-height:50px;padding:13px}
  .form-grid{gap:11px}
  .month-control{min-height:38px}
  .month-arrow,.month-picker{height:38px;min-height:38px}
  .donut-chart{width:128px}
  .donut-chart strong{font-size:27px}
  .donut-legend-row{grid-template-columns:auto 1fr}
  .donut-legend-row em{grid-column:2;white-space:normal}
}

/* v1.0.19 - RTL, management clarity, and design refresh */
:root{
  --radius-md:8px;
  --button-shadow:0 8px 18px rgba(16,42,67,.08);
}
html[data-theme="dark"]{
  --button-shadow:0 10px 22px rgba(0,0,0,.22);
}
.topbar,
.panel,
.metric,
.data-card,
.commitment-summary-card,
.commitment-detail-card,
.diagnostic-panel,
.balance-hero>div{
  border-radius:8px;
}
.topbar{
  border-bottom:1px solid color-mix(in srgb,var(--color-border),transparent 25%);
}
.app-drawer.tabs{
  border-radius:0;
}
.app-drawer .tab{
  min-height:46px;
  border:1px solid transparent;
  border-radius:8px;
  margin-inline:8px;
  padding-inline:12px;
}
.app-drawer .tab:hover{
  background:color-mix(in srgb,var(--accent),var(--color-card) 88%);
}
.app-drawer .tab.active{
  background:color-mix(in srgb,var(--accent),white 86%);
  color:var(--accent-strong);
  border-color:color-mix(in srgb,var(--accent),white 60%);
}
html[data-theme="dark"] .app-drawer .tab.active{
  background:color-mix(in srgb,var(--accent),var(--app-card) 76%);
  color:#f7fbfc;
}
button,
.file-import{
  font-weight:800;
  letter-spacing:0;
  box-shadow:none;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease;
}
button:hover:not(:disabled),
.file-import:hover{
  transform:translateY(-1px);
  box-shadow:var(--button-shadow);
}
button:active:not(:disabled){transform:translateY(0)}
button:not(.secondary):not(.quick-card):not(.month-arrow):not(.hamburger-button):not(.drawer-close):not(.donut-chart):not(.donut-legend-row),
button[type="submit"]{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
button.secondary,
.file-import{
  background:var(--color-card);
  color:var(--color-text-primary);
  border-color:var(--color-border);
}
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .file-import{
  background:color-mix(in srgb,var(--app-input),white 3%);
  color:var(--app-text);
}
.row-actions button[data-delete-transaction],
.row-actions button[data-delete-commitment],
.row-actions button[data-delete-category],
.row-actions button[data-delete-goal],
.row-actions button[data-delete-investment]{
  background:var(--state-danger-bg)!important;
  color:var(--danger)!important;
  border-color:color-mix(in srgb,var(--danger),transparent 55%)!important;
}
.refresh-button{
  background:color-mix(in srgb,var(--accent),white 82%)!important;
  color:var(--accent-strong)!important;
  border-color:color-mix(in srgb,var(--accent),white 55%)!important;
}
html[data-theme="dark"] .refresh-button{
  background:color-mix(in srgb,var(--accent),var(--app-input) 74%)!important;
  color:#effcff!important;
}
.month-control{
  direction:rtl;
}
html[dir="ltr"] .month-control{
  direction:ltr;
}
.month-arrow{
  font-size:0;
  background:var(--color-card);
  color:var(--color-text-primary);
  border:1px solid var(--color-border);
}
.month-arrow::before{
  font-size:22px;
  line-height:1;
}
html[dir="rtl"] .month-arrow[data-month-nav="prev"]::before{content:"\203A"}
html[dir="rtl"] .month-arrow[data-month-nav="next"]::before{content:"\2039"}
html[dir="ltr"] .month-arrow[data-month-nav="prev"]::before{content:"\2039"}
html[dir="ltr"] .month-arrow[data-month-nav="next"]::before{content:"\203A"}
.quick-actions{
  direction:rtl;
}
html[dir="ltr"] .quick-actions{direction:ltr}
html[dir="rtl"] .expense-action{order:1}
html[dir="rtl"] .income-action{order:2}
html[dir="rtl"] .commitment-action{order:3}
html[dir="ltr"] .income-action{order:1}
html[dir="ltr"] .expense-action{order:2}
html[dir="ltr"] .commitment-action{order:3}
.quick-card{
  border-radius:8px;
  min-height:104px;
}
.quick-card strong,
.quick-card small{
  direction:rtl;
}
.balance-helper{
  display:block;
  max-width:34ch;
  color:var(--color-text-secondary);
  line-height:1.45;
}
.checking-balance .inline-refresh{
  justify-self:start;
}
.preview-data-notice,
.empty-state{
  display:grid;
  gap:8px;
  padding:14px;
  margin:0 0 14px;
  border:1px solid color-mix(in srgb,var(--accent),var(--color-border) 70%);
  border-radius:8px;
  background:color-mix(in srgb,var(--accent),var(--color-card) 94%);
  color:var(--color-text-primary);
}
.preview-data-notice[hidden]{display:none}
.preview-data-notice strong,
.empty-state strong{
  font-size:16px;
}
.preview-data-notice span,
.empty-state span{
  color:var(--color-text-secondary);
  line-height:1.5;
}
.preview-data-notice div{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.panel-head{
  border-bottom:1px solid color-mix(in srgb,var(--color-border),transparent 35%);
}
.panel-head h2,
.data-card h3,
.management-subsection h3{
  letter-spacing:0;
}
.goal-card{
  display:grid;
  gap:14px;
}
.goal-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.goal-card-head h3{
  margin:0 0 4px;
}
.goal-card-head strong{
  font-size:24px;
  color:var(--accent-strong);
}
.goal-progress.large{
  height:10px;
  border-radius:999px;
}
.goal-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.goal-stats span{
  display:grid;
  gap:2px;
  padding:10px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-surface);
}
.goal-stats b{font-size:15px}
.goal-stats small{color:var(--color-text-secondary)}
.home-goal-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:8px;
  padding:10px;
}
.management-subsection{
  box-shadow:var(--app-shadow-soft);
}
.donut-chart{
  background:conic-gradient(
    var(--green) 0 var(--needs-end,0%),
    var(--red) var(--needs-end,0%) var(--wants-end,0%),
    var(--savings-color,var(--gold)) var(--wants-end,0%) 100%
  );
}
.donut-legend-row strong,
.donut-legend-row em{
  color:var(--color-text-primary);
}
html[data-theme="dark"] .donut-legend-row strong{
  color:var(--app-text);
}
html[data-theme="dark"] .donut-legend-row em{
  color:var(--app-muted);
}
.checking-balance #homeCheckingBalance{
  font-size:clamp(18px,3vw,30px);
  color:var(--color-text-primary);
}
.checking-balance #homeCheckingBalanceMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--color-text-secondary);
}
.appearance-form select:disabled{
  opacity:.72;
  cursor:not-allowed;
}
@media(max-width:560px){
  .quick-actions{
    grid-template-columns:1fr 1fr;
  }
  .commitment-action{
    grid-column:1/-1;
    min-height:74px;
  }
  .goal-stats{
    grid-template-columns:1fr;
  }
  .preview-data-notice div{
    display:grid;
  }
}

/* v1.0.20 - UX and design polish */
@media(min-width:921px){
  body{
    font-size:16px;
    line-height:1.55;
  }
  main{
    max-width:1180px;
    padding:28px 28px 56px;
  }
  .topbar{
    padding:16px clamp(24px,4vw,48px);
  }
  .topbar>div:first-of-type h1{
    font-size:30px;
  }
  .subtitle{
    font-size:15px;
  }
  .panel{
    margin-bottom:20px;
  }
  .panel-head h2{
    font-size:19px;
  }
  .cards-table{
    gap:14px;
  }
  .balance-hero{
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  }
  .quick-actions{
    max-width:760px;
  }
}
body.drawer-open{
  position:fixed;
  width:100%;
  overflow:hidden;
  touch-action:none;
}
.drawer-backdrop{
  background:rgba(9,18,26,.32);
  backdrop-filter:blur(2px);
}
.app-drawer.tabs{
  overscroll-behavior:contain;
}
.app-drawer .tab{
  position:relative;
  background:transparent!important;
  border-color:transparent!important;
  color:var(--color-text-primary);
  font-weight:800;
}
.app-drawer .tab span{
  color:var(--accent);
  opacity:.9;
}
.app-drawer .tab:hover{
  background:color-mix(in srgb,var(--accent),transparent 92%)!important;
  border-color:color-mix(in srgb,var(--accent),transparent 78%)!important;
}
.app-drawer .tab.active{
  background:transparent!important;
  color:var(--color-text-primary);
  border-color:transparent!important;
}
.app-drawer .tab.active::before{
  content:"";
  position:absolute;
  inset-block:9px;
  inset-inline-start:0;
  width:4px;
  border-radius:999px;
  background:var(--accent);
}
html[dir="rtl"] .app-drawer .tab.active::before{
  inset-inline-start:auto;
  inset-inline-end:0;
}
html[data-theme="dark"] .app-drawer .tab:hover{
  background:color-mix(in srgb,var(--accent),var(--app-card) 88%)!important;
}
.quick-card.income-action{
  background:linear-gradient(135deg,#d5f5e5,#b9ebd4);
  border-color:#8bd5b9;
  color:#0d3329;
}
.quick-card.expense-action{
  background:linear-gradient(135deg,#ffd8dc,#f5afb8);
  border-color:#e88b98;
  color:#42191f;
}
html[data-theme="dark"] .quick-card.income-action{
  background:linear-gradient(135deg,#164b3c,#0f3b31);
  border-color:#2c8068;
  color:#e8fff5;
}
html[data-theme="dark"] .quick-card.expense-action{
  background:linear-gradient(135deg,#5a242b,#441a21);
  border-color:#934853;
  color:#fff0f1;
}
html[data-theme="dark"] .quick-card small{
  color:rgba(255,255,255,.76);
}
.month-arrow{
  font-size:22px!important;
}
.month-arrow::before{
  content:none!important;
}
.category-primary-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
  padding:16px;
}
.category-primary-card{
  min-height:104px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"icon title" "icon meta";
  align-items:center;
  gap:4px 12px;
  text-align:right;
  background:var(--color-card)!important;
  color:var(--color-text-primary)!important;
  border:1px solid var(--color-border)!important;
  border-radius:8px;
  padding:14px;
}
.category-primary-card.active{
  border-color:var(--accent)!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent),transparent 86%);
}
.category-primary-card.new-primary{
  border-style:dashed!important;
  color:var(--accent-strong)!important;
}
.category-icon{
  grid-area:icon;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:900;
}
.category-primary-card strong{
  grid-area:title;
  font-size:17px;
}
.category-primary-card small{
  grid-area:meta;
  color:var(--color-text-secondary);
}
.category-detail-panel{
  margin:0 16px 16px;
  padding:16px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-card);
}
.category-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  border-bottom:1px solid var(--color-border);
  padding-bottom:14px;
  margin-bottom:14px;
}
.category-detail-head>div{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 10px;
  align-items:center;
}
.category-detail-head h3{
  margin:0;
  font-size:22px;
}
.category-detail-head p{
  grid-column:1/-1;
  margin:0;
  color:var(--color-text-secondary);
}
.subcategory-list{
  display:grid;
  gap:10px;
}
.subcategory-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-surface);
}
.subcategory-row.disabled{
  opacity:.62;
}
.subcategory-row small{
  display:block;
  margin-top:3px;
  color:var(--color-text-secondary);
}
.category-roadmap-note{
  margin:14px 0 0;
  color:var(--color-text-secondary);
  font-size:13px;
}
html[data-theme="dark"] .category-primary-card,
html[data-theme="dark"] .category-detail-panel,
html[data-theme="dark"] .subcategory-row{
  background:var(--app-card)!important;
  border-color:var(--app-border)!important;
}
@media(max-width:560px){
  .category-primary-list{
    grid-template-columns:1fr;
    padding:12px;
  }
  .category-detail-panel{
    margin:0 12px 12px;
    padding:12px;
  }
  .category-detail-head,
  .subcategory-row{
    display:grid;
  }
}

/* v1.0.21 - final UX fixes before architecture docs */
.app-drawer.tabs{
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease;
}
.drawer-backdrop{
  transition:opacity .24s ease,backdrop-filter .24s ease;
}
html[data-theme="light"] .app-drawer .tab,
html[data-theme="light"] .app-drawer .drawer-secondary{
  color:#172530;
}
html[data-theme="light"] .app-drawer .tab.active{
  color:#172530;
}
html[data-theme="light"] .app-drawer .tab.active span,
html[data-theme="light"] .app-drawer .tab:hover span{
  color:var(--accent-strong);
}
html[data-theme="dark"] .app-drawer .tab,
html[data-theme="dark"] .app-drawer .drawer-secondary{
  color:var(--app-text);
}
/* v1.0.21 final polish: stable drawer contrast and RTL month icons */
html[dir="rtl"] .month-arrow[data-month-nav="prev"]::before{content:"\203A"}
html[dir="rtl"] .month-arrow[data-month-nav="next"]::before{content:"\2039"}
html[dir="ltr"] .month-arrow[data-month-nav="prev"]::before{content:"\2039"}
html[dir="ltr"] .month-arrow[data-month-nav="next"]::before{content:"\203A"}
html[data-theme="light"] .app-drawer.tabs{
  background:#ffffff;
  color:#14212b;
}
html[data-theme="light"] .drawer-head,
html[data-theme="light"] .drawer-head strong{
  color:#14212b;
}
html[data-theme="light"] .app-drawer .tab{
  color:#1b2d3a!important;
}
html[data-theme="light"] .app-drawer .tab span{
  color:var(--accent-strong);
}
html[data-theme="light"] .app-drawer .tab:hover,
html[data-theme="light"] .app-drawer .tab:focus-visible{
  background:color-mix(in srgb,var(--accent),white 91%)!important;
  border-color:color-mix(in srgb,var(--accent),white 66%)!important;
  color:#102332!important;
}
html[data-theme="light"] .app-drawer .tab.active{
  color:#102332!important;
  font-weight:850;
}
html[data-theme="light"] .app-drawer .tab:disabled,
html[data-theme="light"] .app-drawer .tab[aria-disabled="true"]{
  color:#7c8b96!important;
  opacity:1;
}
html[data-theme="dark"] .app-drawer .tab:hover,
html[data-theme="dark"] .app-drawer .tab:focus-visible{
  color:var(--app-text)!important;
}
.commitment-flow-field{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-surface);
}
.commitment-flow-field[hidden]{display:none}
.commitment-flow-field p{
  margin:0;
  color:var(--color-text-secondary);
  line-height:1.45;
}
.reference-management{
  padding:16px;
}
.reference-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-surface);
}
.reference-toolbar span{
  color:var(--color-text-secondary);
}
.reference-manage-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-card);
}
.reference-manage-row+ .reference-manage-row{
  margin-top:10px;
}
.reference-manage-row small{
  display:block;
  margin-top:3px;
  color:var(--color-text-secondary);
}
.payment-method-row.credit-method{
  border-color:color-mix(in srgb,var(--accent),var(--color-border) 64%);
}
.payment-method-actions{
  align-items:center;
}
.credit-day-inline{
  display:inline-grid;
  grid-template-columns:auto minmax(58px,76px);
  align-items:center;
  gap:8px;
  min-width:0;
  margin:0;
  color:var(--color-text-secondary);
  font-size:13px;
  white-space:nowrap;
}
.credit-day-inline input{
  min-height:36px;
  width:72px;
  padding-inline:8px;
  text-align:center;
}
.credit-day-muted{
  align-self:center;
  color:var(--color-text-secondary);
  font-size:13px;
}
html[data-theme="dark"] .commitment-flow-field,
html[data-theme="dark"] .reference-toolbar,
html[data-theme="dark"] .reference-manage-row{
  background:var(--app-card);
  border-color:var(--app-border);
}

/* v1.0.22 - mobile header, RTL arrows, balanced actions and goal snapshots */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea{
  text-align:right;
}
html[dir="ltr"] body,
html[dir="ltr"] input,
html[dir="ltr"] select,
html[dir="ltr"] textarea{
  text-align:left;
}
.topbar>div:first-of-type h1{
  display:block;
}
.topbar>div:first-of-type .subtitle{
  display:block;
}
.kicker{
  font-size:13px;
  line-height:1;
}
.month-arrow{
  font-size:22px!important;
  font-weight:900;
}
.month-arrow::before{
  content:none!important;
}
.quick-actions{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.quick-card,
.quick-card.secondary-quick,
.commitment-action{
  grid-column:auto;
  min-height:104px;
  height:100%;
}
.quick-card.secondary-quick::after{
  display:none;
}
.goal-snapshot-label{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  margin:0 0 10px;
  padding:8px 10px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:color-mix(in srgb,var(--accent-soft),var(--color-card) 68%);
  color:var(--color-text-secondary);
  font-size:13px;
  font-weight:800;
}
.home-goal-card small{
  color:var(--color-text-secondary);
  font-size:12px;
}
@media(max-width:920px){
  .topbar{
    padding:16px 12px 12px;
  }
  .topbar>div:first-of-type h1,
  .topbar>div:first-of-type .subtitle{
    display:block;
  }
}
@media(max-width:560px){
  .quick-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .quick-card,
  .quick-card.secondary-quick,
  .commitment-action{
    min-height:96px;
    padding:12px 10px;
    grid-template-columns:1fr;
    grid-template-areas:"icon" "title" "copy";
    justify-items:start;
    gap:5px;
  }
  .quick-card span{
    width:34px;
    height:34px;
    font-size:18px;
  }
  .quick-card strong{
    font-size:15px;
  }
  .quick-card small{
    font-size:11px;
    line-height:1.25;
    white-space:normal;
  }
}

.category-form-panel[hidden]{
  display:none;
}
.category-inline-form-host{
  position:relative;
  min-height:104px;
  border:1px solid var(--accent-border);
  border-radius:8px;
  background:color-mix(in srgb,var(--accent-soft),var(--color-card) 72%);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  animation:inlineFormReveal .22s ease both;
}
.category-inline-form-host #categoryForm{
  padding:14px;
}
.category-inline-form-host .form-grid.compact{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.category-inline-form-host .actions{
  align-items:end;
}
.category-inline-form-host #categoryForm.subcategory-mode .category-main-field{
  display:none;
}
.subcategory-inline-form{
  margin:12px 0;
}
.category-under-primary-form{
  grid-column:1/-1;
  margin-block:-2px 4px;
  border-inline-start:4px solid var(--accent);
  box-shadow:0 14px 30px color-mix(in srgb,var(--accent),transparent 88%);
}
.category-under-primary-form::before{
  content:"";
  position:absolute;
  inset-block-start:-10px;
  inset-inline-start:28px;
  width:18px;
  height:18px;
  border-inline-start:1px solid var(--accent-border);
  border-block-start:1px solid var(--accent-border);
  background:inherit;
  transform:rotate(45deg);
}
@keyframes inlineFormReveal{
  from{opacity:0;transform:translateY(-6px);max-height:0}
  to{opacity:1;transform:translateY(0);max-height:520px}
}
@media(max-width:560px){
  .category-inline-form-host #categoryForm,
  .category-inline-form-host .form-grid.compact{
    grid-template-columns:1fr;
  }
  .category-inline-form-host .actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

/* v1.0.22 - Actions page collapsed form polish */
.actions-list-panel{
  position:relative;
}
.actions-panel-head{
  align-items:center;
}
.actions-panel-head p{
  margin:5px 0 0;
  color:var(--color-text-secondary);
  font-size:14px;
}
.actions-month-row{
  padding:14px 16px 0;
}
.actions-month-row .month-control{
  max-width:440px;
}
body[data-active-view="transactions"] .topbar .month-control{
  display:none;
}
.transaction-add-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:132px;
  border-color:var(--accent-border);
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:800;
}
.transaction-add-button:hover,
.transaction-add-button[aria-expanded="true"]{
  background:var(--accent-surface);
  border-color:var(--accent);
}
.transaction-form-panel[hidden]{
  display:none;
}
.transaction-form-panel:not([hidden]){
  animation:inlineFormReveal .24s ease both;
  border-color:var(--accent-border);
}
.transaction-form-panel .panel-head{
  background:color-mix(in srgb,var(--accent-soft),var(--color-card) 68%);
}
@media(min-width:921px){
  #transactions{
    position:relative;
  }
  .transaction-add-button{
    margin-inline-start:auto;
  }
}
@media(max-width:620px){
  .actions-panel-head{
    align-items:stretch;
    display:grid;
    gap:10px;
  }
  .actions-month-row{
    padding:12px 12px 0;
  }
  .actions-month-row .month-control{
    max-width:none;
  }
  .transaction-add-button{
    width:100%;
    min-height:46px;
  }
}

/* v1.0.22 - final chevron side fix, visual placement only */
html[dir="rtl"] .month-control{
  direction:ltr;
}
html[dir="rtl"] .month-arrow[data-month-nav="prev"]{
  grid-column:3;
}
html[dir="rtl"] .month-picker{
  grid-column:2;
}
html[dir="rtl"] .month-arrow[data-month-nav="next"]{
  grid-column:1;
}
html[dir="ltr"] .month-arrow[data-month-nav="prev"]{
  grid-column:1;
}
html[dir="ltr"] .month-picker{
  grid-column:2;
}
html[dir="ltr"] .month-arrow[data-month-nav="next"]{
  grid-column:3;
}

/* v1.0.22 - final month navigator layout: one no-wrap horizontal component */
.month-control{
  display:inline-flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch;
  justify-content:center;
  width:auto;
  max-width:100%;
  white-space:nowrap;
}
.month-control .month-arrow{
  flex:0 0 44px;
}
.month-control .month-picker{
  flex:1 1 190px;
  min-width:160px;
  max-width:260px;
}

/* v1.0.24 - Mobile transaction save and contextual subcategory creation */
.field-with-action{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
.inline-add-subcategory{
  min-height:44px;
  padding-inline:12px;
  color:var(--accent);
  border-color:var(--accent-border);
  background:var(--accent-soft);
  font-weight:800;
}
.inline-add-subcategory:hover{
  background:var(--accent-surface);
  border-color:var(--accent);
}
.form-grid .actions{
  align-self:end;
}
@media(max-width:620px){
  .field-with-action{
    grid-template-columns:1fr;
  }
  .transaction-form-panel{
    margin-bottom:calc(112px + env(safe-area-inset-bottom));
  }
  .transaction-form-panel .actions{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:3;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:10px;
    margin:4px -2px 0;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:color-mix(in srgb,var(--color-card),transparent 4%);
    box-shadow:var(--card-shadow);
    backdrop-filter:blur(10px);
  }
  .transaction-form-panel .actions button{
    width:100%;
    min-height:48px;
  }
}
html[dir="rtl"] .month-arrow[data-month-nav="next"]{
  order:1;
}
html[dir="rtl"] .month-picker{
  order:2;
}
html[dir="rtl"] .month-arrow[data-month-nav="prev"]{
  order:3;
}
html[dir="ltr"] .month-arrow[data-month-nav="prev"]{
  order:1;
}
html[dir="ltr"] .month-picker{
  order:2;
}
html[dir="ltr"] .month-arrow[data-month-nav="next"]{
  order:3;
}
.actions-month-row .month-control{
  width:min(100%,440px);
}
@media(max-width:560px){
  .month-control{
    width:100%;
  }
  .month-control .month-arrow{
    flex-basis:44px;
  }
  .month-control .month-picker{
    min-width:0;
    max-width:none;
  }
}

/* v1.0.25 - Premium top hero image, scoped to header only */
.topbar{
  position:sticky;
  isolation:isolate;
  overflow:hidden;
  min-height:186px;
  align-items:flex-end;
  padding:24px clamp(14px,4vw,42px) 18px;
  color:#fff;
  border-bottom:0;
  background:#091018;
  box-shadow:0 18px 46px rgba(7,16,24,.18);
}
.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url("assets/city-horizon.jpg");
  background-size:cover;
  background-position:center;
  transform:scaleX(1);
  transform-origin:center;
}
html[dir="ltr"] .topbar::before{
  transform:scaleX(-1);
}
.topbar::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(180deg,rgba(5,11,17,.16) 0%,rgba(5,11,17,.07) 10%,transparent 22%,transparent 70%,rgba(5,11,17,.24) 100%);
  backdrop-filter:none;
}
.topbar>*{
  position:relative;
  z-index:1;
}
.topbar>div:first-of-type{
  display:grid;
  justify-items:start;
  text-align:start;
  width:100%;
}
html[dir="ltr"] .topbar>div:first-of-type{
  justify-items:start;
  text-align:start;
}
.topbar::marker{
  color:transparent;
}
.topbar .kicker,
.topbar h1,
.topbar .subtitle{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.38);
}
.topbar .kicker{
  display:inline-flex;
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  text-shadow:0 1px 5px rgba(0,0,0,.38);
}
.topbar .subtitle{
  color:rgba(255,255,255,.86);
  max-width:520px;
}
.topbar .hamburger-button,
.topbar .month-arrow,
.topbar .month-picker{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.28);
  color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
}
.topbar .month-picker span{
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.32);
}
.topbar .hamburger-button:hover,
.topbar .month-arrow:hover,
.topbar .month-picker:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.42);
}
html[data-theme="light"] .topbar::after{
  background:linear-gradient(180deg,rgba(5,11,17,.18) 0%,rgba(5,11,17,.08) 10%,transparent 22%,transparent 70%,rgba(5,11,17,.22) 100%);
}
html[data-theme="dark"] .topbar{
  background:#071018;
}
@media(max-width:920px){
  .topbar{
    display:grid;
    grid-template-columns:1fr;
    align-content:start;
    min-height:164px;
    padding:calc(16px + env(safe-area-inset-top)) 12px 14px;
    gap:12px;
  }
  .topbar .hamburger-button{
    justify-self:start;
  }
  .topbar>div:first-of-type{
    justify-self:stretch;
  }
  .topbar>div:first-of-type h1,
  .topbar>div:first-of-type .subtitle{
    display:block;
  }
  .topbar>div:first-of-type h1{
    font-size:clamp(24px,8vw,34px);
  }
  .topbar .subtitle{
    font-size:13px;
    line-height:1.35;
  }
  .topbar-tools{
    width:100%;
  }
}
@media(max-width:460px){
  .topbar{
    min-height:155px;
  }
  .topbar .kicker{
    padding:4px 9px;
  }
}

/* v1.0.26 - direction-aware hero menu and drawer */
.app-drawer.tabs{
  left:auto;
  right:auto;
  inset-inline-start:0;
  inset-inline-end:auto;
  border-left:0;
  border-right:0;
  border-inline-end:1px solid var(--color-border);
  transform:translateX(var(--drawer-closed-x, 105%));
}
html[dir="ltr"] .app-drawer.tabs{
  --drawer-closed-x:-105%;
}
.app-drawer.open{
  transform:translateX(0);
}
.topbar .hamburger-button{
  justify-self:start;
}

/* v1.0.28 - stable categories and refined hero fades */
.topbar::after{
  background:linear-gradient(180deg,
    rgba(5,11,17,.09) 0%,
    rgba(5,11,17,.035) 5%,
    transparent 11%,
    transparent 62%,
    rgba(5,11,17,.10) 78%,
    rgba(5,11,17,.24) 100%);
}
html[data-theme="light"] .topbar::after{
  background:linear-gradient(180deg,
    rgba(5,11,17,.10) 0%,
    rgba(5,11,17,.04) 5%,
    transparent 11%,
    transparent 62%,
    rgba(5,11,17,.10) 78%,
    rgba(5,11,17,.22) 100%);
}
.category-accordion-list{
  display:grid;
  gap:12px;
  padding:14px;
}
.category-accordion-card{
  overflow:visible;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-card);
  box-shadow:var(--card-shadow);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.category-accordion-card.selected,
.category-accordion-card.expanded{
  border-color:var(--accent-border);
  box-shadow:0 14px 30px color-mix(in srgb,var(--accent),transparent 88%);
}
.category-card-main{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
}
.category-card-title{
  min-width:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
}
.category-card-title h3{
  margin:0;
  font-size:18px;
  line-height:1.25;
  color:var(--color-text-primary);
}
.category-card-title small{
  display:block;
  margin-top:3px;
  color:var(--color-text-secondary);
}
.category-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.category-expand-button{
  min-height:40px;
  padding-inline:14px;
}
.category-add-sub-button{
  width:42px;
  min-width:42px;
  min-height:42px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:8px;
  font-size:22px;
  line-height:1;
}
.category-collapse{
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding:0 14px;
  transition:max-height .24s ease,opacity .2s ease,padding .24s ease;
}
.category-collapse.expanded{
  max-height:2200px;
  opacity:1;
  padding:0 14px 14px;
}
.category-under-primary-form{
  margin:0 14px 14px;
}
.category-add-primary-button{
  min-height:96px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"icon title" "icon meta";
  align-items:center;
  gap:4px 12px;
  width:100%;
  text-align:start;
  padding:16px;
  border:1px dashed var(--accent-border);
  border-radius:8px;
  background:color-mix(in srgb,var(--accent-soft),var(--color-card) 72%);
  color:var(--accent-strong);
  box-shadow:none;
}
.category-add-primary-button span{
  grid-area:icon;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:22px;
  font-weight:900;
}
.category-add-primary-button strong{
  grid-area:title;
  color:var(--color-text-primary);
}
.category-add-primary-button small{
  grid-area:meta;
  color:var(--color-text-secondary);
}
.category-add-card.open{
  border:1px solid var(--accent-border);
  border-radius:8px;
  background:var(--color-card);
  box-shadow:var(--card-shadow);
  overflow:hidden;
}
.category-add-card.open .category-inline-form-host{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.category-inline-form-host #categoryForm.subcategory-mode .category-main-field{
  display:none!important;
}
html[data-theme="dark"] .category-accordion-card,
html[data-theme="dark"] .category-add-card.open{
  background:var(--app-card);
  border-color:var(--app-border);
}
@media(max-width:560px){
  .category-accordion-list{
    padding:12px;
  }
  .category-card-main{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .category-card-actions{
    justify-content:space-between;
  }
  .category-expand-button{
    flex:1;
  }
  .category-under-primary-form{
    margin-inline:12px;
  }
}

/* v1.0.29 - beta polish: natural hero transition, stable navigation and actions layout */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}
.topbar::after{
  background:linear-gradient(180deg,
    rgba(5,11,17,.055) 0%,
    rgba(5,11,17,.02) 5%,
    transparent 12%,
    transparent 50%,
    color-mix(in srgb,var(--app-bg),transparent 94%) 66%,
    color-mix(in srgb,var(--app-bg),transparent 70%) 82%,
    var(--app-bg) 100%);
}
html[data-theme="light"] .topbar::after{
  background:linear-gradient(180deg,
    rgba(5,11,17,.055) 0%,
    rgba(5,11,17,.02) 5%,
    transparent 12%,
    transparent 50%,
    color-mix(in srgb,var(--app-bg),transparent 94%) 66%,
    color-mix(in srgb,var(--app-bg),transparent 70%) 82%,
    var(--app-bg) 100%);
}
.month-control{
  width:min(calc(100vw - 24px),520px);
  margin-inline:auto;
  justify-self:center;
  align-self:center;
}
.topbar-tools{
  justify-items:center;
}
.topbar-tools .month-control,
.actions-month-row .month-control{
  margin-inline:auto;
}
.actions-list-panel,
.transaction-form-panel,
.view,
.cards-table,
.data-card{
  min-width:0;
  max-width:100%;
}
#transactions{
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow-x:hidden;
}
#transactions .transaction-form-panel{
  order:1;
  margin-inline:0;
}
#transactions .actions-list-panel{
  order:2;
}
.actions-list-panel{
  min-height:60vh;
}
.actions-panel-head{
  grid-template-columns:minmax(0,1fr) auto;
}
.transaction-add-button{
  min-width:0;
  min-height:38px;
  padding:8px 12px;
  font-size:13px;
  border-style:dashed;
  background:color-mix(in srgb,var(--accent-soft),transparent 18%);
  box-shadow:none;
}
.actions-month-row{
  display:flex;
  justify-content:center;
  padding-inline:12px;
}
.list-tools,
#transactionsTable{
  min-width:0;
}
.category-card-main{
  cursor:pointer;
}
.category-add-sub-button,
.category-expand-button{
  cursor:pointer;
}
@media(max-width:620px){
  .actions-panel-head{
    grid-template-columns:1fr auto;
  }
  .transaction-add-button{
    width:auto;
    min-height:38px;
    justify-self:end;
  }
  .actions-list-panel{
    min-height:64vh;
  }
}
.topbar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "menu title"
    "month month";
  align-items:end;
}
.topbar .hamburger-button{
  grid-area:menu;
  justify-self:start;
}
.topbar>div:first-of-type{
  grid-area:title;
}
.topbar-tools{
  grid-area:month;
  width:100vw;
  margin-inline:calc((100% - 100vw) / 2);
  padding-inline:12px;
  display:flex;
  justify-content:center;
}
@media(max-width:920px){
  .topbar{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "menu menu"
      "title title"
      "month month";
  }
}

/* v1.0.30 - UX cleanup: softer hero dissolve, centered month navigation and RTL category rows */
.topbar::after,
html[data-theme="light"] .topbar::after{
  background:linear-gradient(180deg,
    rgba(5,11,17,.045) 0%,
    rgba(5,11,17,.018) 4%,
    transparent 10%,
    transparent 42%,
    color-mix(in srgb,var(--app-bg),transparent 98%) 52%,
    color-mix(in srgb,var(--app-bg),transparent 84%) 68%,
    color-mix(in srgb,var(--app-bg),transparent 48%) 82%,
    var(--app-bg) 100%);
}
.topbar-tools,
.actions-month-row{
  justify-content:center;
  justify-items:center;
  text-align:center;
}
.topbar-tools .month-control,
.actions-month-row .month-control,
body[data-active-view="home"] .topbar .month-control,
body[data-active-view="transactions"] .actions-month-row .month-control{
  display:grid;
  margin-inline:auto;
  flex:0 1 min(calc(100vw - 24px),520px);
}
body[data-active-view="home"] .topbar-tools{
  position:relative;
  z-index:4;
}
.category-card-main{
  width:100%;
  border-radius:var(--radius-md);
}
.category-card-main:hover{
  background:color-mix(in srgb,var(--accent-soft),transparent 46%);
}
.category-card-title .category-icon{
  grid-area:auto;
}
.category-card-title>div{
  min-width:0;
}
.view:not(.active){
  display:none!important;
}
.view.active{
  display:block;
}
#transactions.view.active{
  display:flex;
}
html[dir="rtl"] .category-card-title{
  direction:rtl;
  grid-template-columns:42px minmax(0,1fr);
  text-align:right;
}
html[dir="rtl"] .category-card-title .category-icon{
  justify-self:end;
}
html[dir="rtl"] .category-card-title h3,
html[dir="rtl"] .category-card-title small{
  text-align:right;
}
body:not([data-active-view="home"]) .topbar .month-control{
  display:none!important;
}
body:not([data-active-view="transactions"]) .actions-month-row .month-control{
  display:none!important;
}
body[data-active-view="home"] .topbar .month-control,
body[data-active-view="transactions"] .actions-month-row .month-control{
  display:grid!important;
}

/* v1.0.31 - hero edge cleanup, single-purpose entry screen and category controls */
.topbar{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.topbar::after,
html[data-theme="light"] .topbar::after{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--app-bg),transparent 72%) 0%,
    color-mix(in srgb,var(--app-bg),transparent 90%) 5%,
    transparent 10%,
    transparent 45%,
    color-mix(in srgb,var(--app-bg),transparent 94%) 57%,
    color-mix(in srgb,var(--app-bg),transparent 64%) 76%,
    var(--app-bg) 100%);
}
html[data-theme="light"] main{
  background:var(--app-bg);
}
#transactions.transaction-entry-mode{
  gap:0;
}
#transactions.transaction-entry-mode .actions-list-panel{
  display:none!important;
}
#transactions.transaction-entry-mode .transaction-form-panel{
  order:1;
  margin-block:0 18px;
}
#transactions.transaction-entry-mode .transaction-form-panel .panel-head{
  padding-bottom:6px;
}
.income-source-field{
  display:none;
}
.commitment-link-field[hidden],
.commitment-flow-field[hidden]{
  display:none!important;
}
#transactionForm.income-transaction-form .expense-category-field,
#transactionForm.income-transaction-form .expense-subcategory-field,
#transactionForm.income-transaction-form .inline-add-subcategory,
#transactionForm.income-transaction-form .payment-method-field,
#transactionForm.income-transaction-form .charge-type-field,
#transactionForm.income-transaction-form .commitment-link-field,
#transactionForm.income-transaction-form .commitment-flow-field{
  display:none!important;
}
#transactionForm.income-transaction-form .income-source-field{
  display:grid;
}
#transactionForm.expense-transaction-form .income-source-field{
  display:none!important;
}
.category-card-actions{
  align-items:center;
}
.category-delete-main-button{
  min-height:36px;
  padding:7px 10px;
  color:var(--color-danger);
  border-color:color-mix(in srgb,var(--color-danger),var(--color-border) 62%);
}
.category-add-sub-bottom{
  width:100%;
  min-height:44px;
  margin-top:8px;
  justify-content:center;
  border-style:dashed;
}
.subcategory-list{
  padding-bottom:16px;
}
.subcategory-row{
  overflow:visible;
}
.reference-toolbar{
  align-items:center;
}
@media(max-width:620px){
  .transaction-form-panel{
    margin-bottom:0;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .transaction-form-panel .actions{
    position:static!important;
    left:auto;
    right:auto;
    bottom:auto;
    z-index:auto;
    margin:10px 0 0;
    backdrop-filter:none;
  }
  #transactions.transaction-entry-mode .transaction-form-panel{
    min-height:auto;
  }
  #transactions.transaction-entry-mode .transaction-form-panel{
    max-height:calc(100svh - 188px);
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  #transactions.transaction-entry-mode .transaction-form-panel .actions{
    position:sticky!important;
    bottom:0;
    z-index:2;
    background:linear-gradient(180deg,color-mix(in srgb,var(--color-card),transparent 18%),var(--color-card) 42%);
  }
}

/* v1.0.31 - stable colored Needs / Wants / Savings donut */
:root{
  --donut-needs:#168967;
  --donut-wants:#d65f57;
  --donut-savings:#d69b24;
  --donut-empty:color-mix(in srgb,var(--color-border),transparent 18%);
}
html[data-theme="dark"]{
  --donut-needs:#35c397;
  --donut-wants:#ff8a82;
  --donut-savings:#f1bb4c;
  --donut-empty:color-mix(in srgb,var(--app-border),transparent 18%);
}
.donut-chart{
  background:conic-gradient(
    var(--donut-needs) 0 var(--needs-end,0%),
    var(--donut-wants) var(--needs-end,0%) var(--wants-end,0%),
    var(--savings-color,var(--donut-savings)) var(--wants-end,0%) 100%
  )!important;
}
.dot.needs{background:var(--donut-needs)!important}
.dot.wants{background:var(--donut-wants)!important}
.dot.savings{background:var(--donut-savings)!important}
.donut-legend-row{
  border-color:color-mix(in srgb,var(--color-border),transparent 8%);
}
.donut-legend-row.active{
  border-color:color-mix(in srgb,var(--accent),var(--color-border) 48%);
  background:color-mix(in srgb,var(--accent-soft),var(--color-card) 62%);
}

/* v1.0.23 - Settings sync maintenance */
.sync-maintenance{
  gap:16px;
}
.sync-maintenance-actions{
  margin-top:0;
}
.settings-sync-details{
  display:grid;
  gap:10px;
  margin:0;
}
.settings-sync-details div{
  display:grid;
  grid-template-columns:minmax(120px,.55fr) minmax(0,1fr);
  gap:10px;
  padding:10px 0;
  border-top:1px solid var(--color-border);
}
.settings-sync-details div:first-child{
  border-top:0;
}
.settings-sync-details dt{
  color:var(--color-text-secondary);
}
.settings-sync-details dd{
  margin:0;
  font-weight:800;
  color:var(--color-text-primary);
  overflow-wrap:anywhere;
}
.settings-sync-details dd.danger{
  color:var(--color-danger);
}
@media(max-width:560px){
  .settings-sync-details div{
    grid-template-columns:1fr;
  }
}
@media(max-width:560px){
  .reference-toolbar,
  .reference-manage-row{
    display:grid;
  }
  .payment-method-actions{
    display:grid;
    justify-content:stretch;
  }
  .credit-day-inline{
    width:100%;
    grid-template-columns:1fr 84px;
  }
}

/* v1.0.26 - Settings control center and About */
.settings-control-center-panel{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft),var(--color-card) 72%),var(--color-card));
}
.settings-control-center{
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  align-items:stretch;
}
.settings-control-center .data-card{
  display:grid;
  align-content:start;
  gap:6px;
  min-height:188px;
}
.settings-control-center .card-title{
  font-size:17px;
}
.settings-control-center .card-subtitle{
  line-height:1.45;
}
.settings-control-center .row-actions{
  margin-top:auto;
}
.settings-about-card{
  border-color:color-mix(in srgb,var(--accent),var(--color-border) 72%);
  text-align:right;
}
.about-product-name{
  font-size:22px;
  font-weight:850;
  color:var(--color-text-primary);
}
.about-version{
  color:var(--color-text-secondary);
  font-weight:700;
}
.about-credit{
  display:grid;
  grid-template-columns:minmax(90px,.45fr) minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:7px 0;
  border-top:1px solid color-mix(in srgb,var(--color-border),transparent 38%);
}
.about-credit span{
  color:var(--color-text-secondary);
}
.about-credit strong{
  color:var(--color-text-primary);
}
.about-divider{
  height:1px;
  margin:12px 0 4px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent),var(--color-border) 52%),transparent);
}
.about-story-title{
  margin-top:8px;
  color:var(--color-text-primary);
  font-weight:850;
}
.about-story{
  margin:10px 0 0;
  padding:12px 13px;
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--accent-soft),var(--color-card) 78%);
  color:var(--color-text-secondary);
  line-height:1.65;
}
@media(max-width:560px){
  .about-credit{
    grid-template-columns:1fr;
    gap:2px;
  }
}
@media(max-width:920px){
  #settings .settings-control-center{
    display:grid;
    padding:12px;
  }
  .settings-control-center .data-card{
    min-height:auto;
  }
}