.budget-v4-page{--b4-surface:#0B1020;--b4-raised:#10162A;--b4-text:#F3F6FF;--b4-secondary:#9AA6C7;--b4-muted:#66708D;--b4-border:rgba(140,160,220,.10);display:grid;gap:16px;width:100%;min-width:0;max-width:none;margin:0;color:var(--b4-text)}
.budget-v4-heading,.budget-v4-detail-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.budget-v4-heading .eyebrow,.budget-v4-detail-heading .eyebrow{color:#A995FF}.budget-v4-heading h1,.budget-v4-detail-heading h1{margin:3px 0 5px;font-size:clamp(25px,2.1vw,32px);letter-spacing:-.035em}.budget-v4-heading p,.budget-v4-detail-heading p{margin:0;color:var(--b4-secondary);font-size:13px}.budget-v4-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.budget-v4-search{height:42px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--b4-border);border-radius:10px;background:var(--b4-surface);color:var(--b4-muted)}.budget-v4-search svg{width:16px;height:16px}.budget-v4-search input{width:170px;border:0!important;outline:0;background:transparent!important;color:var(--b4-text);font-size:12px}.budget-v4-menu>div button{width:100%;min-height:42px;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;text-align:left;color:var(--b4-secondary);font-size:12px}.budget-v4-menu>div button:hover{background:rgba(140,160,220,.08);color:var(--b4-text)}
.budget-v4-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.budget-v4-kpi{min-width:0;min-height:76px;display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid var(--b4-border);border-radius:12px;background:linear-gradient(145deg,rgba(16,22,42,.96),rgba(11,16,32,.96))}.budget-v4-kpi-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(157,132,255,.18);border-radius:10px;background:rgba(124,92,252,.10);color:#A995FF}.budget-v4-kpi-icon svg{width:17px;height:17px}.budget-v4-kpi>div,.budget-v4-kpi:not(:has(div)){display:grid;gap:4px}.budget-v4-kpi small{color:var(--b4-muted);font-size:9px;font-weight:700;letter-spacing:.10em}.budget-v4-kpi strong{font-size:19px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.budget-v4-list,.budget-v4-panel,.budget-v4-workspace,.budget-v4-notes{border:1px solid var(--b4-border);border-radius:13px;background:var(--b4-surface)}.budget-v4-list{padding:14px}.budget-v4-list-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.budget-v4-filter-tabs,.budget-v4-main-tabs,.budget-v4-subtabs{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}.budget-v4-filter-tabs button,.budget-v4-main-tabs button,.budget-v4-subtabs button{min-height:40px;flex:0 0 auto;padding:7px 12px;border:1px solid transparent;border-radius:8px;color:var(--b4-secondary);font-size:11px;white-space:nowrap}.budget-v4-filter-tabs button.active,.budget-v4-main-tabs button.active,.budget-v4-subtabs button.active{border-color:rgba(160,137,255,.22);background:rgba(124,92,252,.13);color:#C9BCFF}.budget-v4-count{color:var(--b4-muted);font-size:10px}.budget-v4-grid{max-height:540px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:auto}.budget-v4-card{position:relative;min-width:0;border:1px solid var(--b4-border);border-radius:11px;background:linear-gradient(150deg,#10162A,#0B1020);transition:border-color .15s,transform .15s}.budget-v4-card:hover{border-color:rgba(164,143,255,.28);transform:translateY(-1px)}.budget-v4-card-main{width:100%;min-height:160px;display:grid;align-content:start;gap:10px;padding:14px 15px;text-align:left}.budget-v4-card-title{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-right:26px}.budget-v4-card-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.budget-v4-type{color:var(--b4-muted);font-size:10px}.budget-status{min-height:21px;display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;border:1px solid rgba(140,160,220,.13);border-radius:20px;color:#AAB5D1;font-size:9px;white-space:nowrap}.budget-status.is-active,.budget-status.is-paid,.budget-status.is-completed{border-color:rgba(83,215,171,.18);background:rgba(83,215,171,.07);color:#76D8B5}.budget-status.is-overdue{border-color:rgba(255,108,128,.22);background:rgba(255,108,128,.08);color:#FF8295}.budget-status.is-due-soon,.budget-status.is-due-today,.budget-status.is-planning{border-color:rgba(245,187,103,.18);background:rgba(245,187,103,.07);color:#EDBD77}.budget-v4-amount-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:3px 0}.budget-v4-amount-row span{display:grid;gap:4px}.budget-v4-amount-row small{color:var(--b4-muted);font-size:8px;font-weight:700;letter-spacing:.08em}.budget-v4-amount-row b{overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.budget-progress{height:5px;display:block;overflow:hidden;border-radius:9px;background:rgba(140,160,220,.10)}.budget-progress i{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#886BFF,#56C8DB)}.budget-v4-card-foot{display:flex;justify-content:space-between;color:var(--b4-muted);font-size:9px}.budget-v4-menu{position:absolute;right:8px;top:8px;z-index:4}.budget-v4-menu summary{width:34px;height:34px;display:grid;place-items:center;list-style:none;border-radius:8px;color:var(--b4-secondary);cursor:pointer}.budget-v4-menu summary::-webkit-details-marker{display:none}.budget-v4-menu summary:hover{background:rgba(140,160,220,.09)}.budget-v4-menu summary svg{width:17px;height:17px}.budget-v4-menu>div{position:absolute;right:0;top:37px;width:178px;padding:5px;border:1px solid rgba(140,160,220,.15);border-radius:10px;background:#10162A;box-shadow:0 15px 36px rgba(0,0,0,.44)}.budget-v4-menu>div button{min-height:36px;font-size:11px}.budget-v4-list-foot{padding:11px 3px 0;color:var(--b4-muted);font-size:10px}.budget-v4-panel{min-height:170px;overflow:hidden}.budget-v4-panel>header{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--b4-border)}.budget-v4-panel h2,.budget-v4-workspace h2,.budget-v4-notes h2{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:620}.budget-v4-panel h2 svg{width:16px;height:16px;color:#A995FF}.budget-v4-panel .eyebrow{margin:0 0 4px;color:var(--b4-muted);font-size:8px}.budget-v4-panel-body{max-height:230px;overflow:auto;padding:5px 13px}.budget-v4-category-row,.budget-v4-mini-row{width:100%;min-height:48px;display:grid;grid-template-columns:minmax(100px,1fr) auto minmax(70px,.7fr) auto;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid rgba(140,160,220,.06);text-align:left}.budget-v4-category-row span:first-child,.budget-v4-mini-row span:first-child{min-width:0;display:grid;gap:3px}.budget-v4-category-row b,.budget-v4-mini-row b{overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:550;white-space:nowrap}.budget-v4-category-row small,.budget-v4-mini-row small{color:var(--b4-muted);font-size:9px}.budget-v4-category-row>span:nth-child(2),.budget-v4-mini-row strong{font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}.budget-v4-mini-row{grid-template-columns:minmax(100px,1fr) auto auto}.budget-v4-health-facts{display:grid;gap:11px;padding:14px}.budget-v4-health-facts p{display:flex;align-items:center;gap:9px;margin:0;color:var(--b4-secondary);font-size:10px}.budget-v4-health-facts p .budget-progress{flex:1}.budget-v4-health-facts p span:last-child{flex:1}.budget-v4-empty{padding:24px;text-align:center;color:var(--b4-muted);font-size:11px}.budget-v4-empty-state{min-height:330px;display:grid;justify-items:center;align-content:center;gap:12px;padding:30px;text-align:center;border:1px solid var(--b4-border);border-radius:14px;background:radial-gradient(ellipse at 50% 40%,rgba(124,92,252,.09),transparent 55%),#0B1020}.budget-v4-empty-state h2{margin:0;font-size:20px}.budget-v4-empty-state p{max-width:420px;margin:0 0 5px;color:var(--b4-secondary);font-size:12px}.budget-v4-empty-icon{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(157,132,255,.21);border-radius:16px;background:rgba(124,92,252,.1);color:#A995FF}.budget-v4-empty-icon svg{width:25px;height:25px}
.budget-v4-detail-heading{align-items:center}.budget-v4-detail-heading>div:first-child{display:grid;justify-items:start;gap:5px}.budget-v4-detail-heading .text-link{min-height:36px;display:flex;align-items:center;gap:7px;color:#A995FF;font-size:11px}.budget-v4-detail-heading .text-link svg{width:15px;height:15px}.budget-v4-detail-heading .eyebrow{margin-top:5px}.budget-v4-detail-heading p{display:flex;align-items:center;gap:8px}.budget-v4-main-tabs{min-height:48px;border-bottom:1px solid var(--b4-border)}.budget-v4-main-tabs button{min-width:100px;min-height:46px;border-radius:0;border-bottom:2px solid transparent}.budget-v4-main-tabs button.active{border-color:#9E84FF;background:transparent;color:#D1C6FF}.budget-v4-overview,.budget-v4-detail-grid{display:grid;gap:12px}.budget-v4-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.budget-v4-overview>.budget-v4-kpis{margin-bottom:2px}.budget-v4-workspace{padding:12px}.budget-v4-workspace-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 2px 10px}.budget-v4-workspace-top .button{min-height:40px}.budget-v4-subtabs button{min-height:38px}.budget-v4-workspace>.budget-v4-filter-tabs{padding:7px 0;border-top:1px solid var(--b4-border)}.budget-v4-table-head,.budget-v4-table-row{display:grid;grid-template-columns:minmax(140px,1.5fr) minmax(80px,.8fr) minmax(92px,.9fr) minmax(80px,.8fr) minmax(75px,.7fr) 42px;align-items:center;gap:10px;padding:0 10px}.budget-v4-table-head{min-height:36px;color:var(--b4-muted);font-size:9px;font-weight:700;letter-spacing:.06em}.budget-v4-table-scroll{max-height:440px;overflow:auto}.budget-v4-table-row{min-height:52px;border-top:1px solid rgba(140,160,220,.07);font-size:10px}.budget-v4-table-row>span:first-child{min-width:0;display:grid;gap:4px}.budget-v4-table-row b{overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:550;white-space:nowrap}.budget-v4-table-row small{overflow:hidden;color:var(--b4-muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.budget-v4-table-row>strong{font-size:11px;font-variant-numeric:tabular-nums}.budget-v4-bill-row{grid-template-columns:minmax(140px,1.5fr) minmax(80px,.8fr) minmax(92px,.9fr) minmax(80px,.8fr) minmax(75px,.7fr) 42px}.budget-v4-bill-row .budget-v4-menu{position:relative;right:auto;top:auto;justify-self:end}.budget-v4-bill-row .budget-v4-menu>div{top:34px}.budget-v4-bill-row>.budget-status{justify-self:start}.budget-v4-category-row{grid-template-columns:minmax(120px,1.1fr) minmax(100px,.8fr) minmax(100px,1fr) minmax(95px,.8fr) auto;padding:10px;border-bottom:1px solid rgba(140,160,220,.07);font-size:10px}.budget-v4-category-row>span:nth-child(2){font-size:10px}.budget-v4-notes{min-height:320px;padding:15px}.budget-v4-note{max-width:900px;padding:13px 4px;border-bottom:1px solid var(--b4-border)}.budget-v4-note h3{margin:0;font-size:13px}.budget-v4-note p{white-space:pre-wrap;color:var(--b4-secondary);font-size:11px}.budget-v4-note small{color:var(--b4-muted);font-size:9px}.budget-v4-form .budget-v4-full{grid-column:1/-1}.budget-v4-form textarea{width:100%;min-height:90px;resize:vertical}.budget-v4-history{max-height:50vh;overflow:auto;padding:8px;color:var(--b4-secondary);font-size:11px}.budget-v4-category-drawer .budget-v4-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.budget-v4-category-drawer .budget-v4-kpi{min-height:65px;padding:10px}.budget-v4-category-drawer .budget-v4-kpi strong{font-size:14px}.budget-v4-category-drawer h3{font-size:12px}.budget-v4-category-drawer>p{display:grid;gap:10px;color:var(--b4-secondary);font-size:10px}.negative{color:#FF8295}
@media(max-width:1199px){.budget-v4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.budget-v4-page:not(.budget-v4-detail)>.budget-v4-summary-header>.budget-v4-kpis{gap:8px}.budget-v4-kpi{padding:11px}}
@media(max-width:899px){.budget-v4-heading,.budget-v4-detail-heading{align-items:flex-start;flex-direction:column}.budget-v4-actions{width:100%;justify-content:flex-start}.budget-v4-search{flex:1}.budget-v4-search input{width:100%}.budget-v4-grid{max-height:500px}.budget-v4-detail-heading>.budget-v4-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.budget-v4-detail-heading>.budget-v4-actions>*{justify-content:center}.budget-v4-table-head{display:none}.budget-v4-table-row,.budget-v4-bill-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px}.budget-v4-table-row>*:nth-child(n+2):not(.budget-v4-menu){grid-column:2}.budget-v4-category-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}.budget-v4-category-row>span:nth-child(2){grid-column:1}.budget-v4-category-row>.budget-progress,.budget-v4-category-row>.budget-status{grid-column:2}.budget-v4-category-row>span:nth-child(3){grid-column:1/-1;grid-row:2}.budget-v4-category-row>span:nth-child(4){grid-column:1;grid-row:3}}
@media(max-width:619px){.budget-v4-page{gap:12px}.budget-v4-heading h1,.budget-v4-detail-heading h1{font-size:25px}.budget-v4-heading p{max-width:34ch;font-size:11px}.budget-v4-actions{display:grid;grid-template-columns:minmax(0,1fr) auto}.budget-v4-search{grid-column:1/-1}.budget-v4-actions>.button.primary{grid-column:2;grid-row:2}.budget-v4-heading .budget-v4-actions{grid-template-columns:minmax(0,1fr)}.budget-v4-heading .budget-v4-search{grid-column:1}.budget-v4-heading .budget-v4-actions>.button.primary{grid-column:1;grid-row:auto;justify-self:end}.budget-v4-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.budget-v4-kpi{min-height:68px;gap:8px;padding:9px}.budget-v4-kpi-icon{width:29px;height:29px}.budget-v4-kpi strong{font-size:15px}.budget-v4-kpi small{font-size:8px}.budget-v4-list{padding:9px}.budget-v4-list-top{align-items:flex-start;flex-direction:column}.budget-v4-filter-tabs{width:100%}.budget-v4-filter-tabs button{min-height:44px;padding:7px 9px;font-size:10px}.budget-v4-grid{grid-template-columns:1fr;max-height:470px}.budget-v4-card-main{min-height:145px}.budget-v4-detail-grid{grid-template-columns:1fr}.budget-v4-panel{min-height:145px}.budget-v4-category-row{grid-template-columns:minmax(0,1fr) auto;padding:9px 4px}.budget-v4-category-row b{font-size:11px}.budget-v4-mini-row{grid-template-columns:minmax(0,1fr) auto}.budget-v4-mini-row .budget-status{grid-column:2;grid-row:2}.budget-v4-main-tabs button{flex:1;min-width:0}.budget-v4-workspace{padding:9px}.budget-v4-workspace-top{align-items:flex-start}.budget-v4-workspace-top .button{min-height:44px;padding-inline:9px;font-size:10px}.budget-v4-table-scroll{max-height:500px}.budget-v4-table-row{min-height:62px}.budget-v4-bill-row>span:nth-of-type(2){grid-column:1;grid-row:2}.budget-v4-bill-row>span:nth-of-type(3){grid-column:1;grid-row:3}.budget-v4-bill-row>span:nth-of-type(4){grid-column:1;grid-row:4}.budget-v4-bill-row>.budget-status{grid-column:2!important;grid-row:2!important}.budget-v4-bill-row>.budget-v4-menu{grid-column:2;grid-row:1}.budget-v4-bill-row>strong{grid-column:2;grid-row:3}.budget-v4-category-row>span:nth-child(3){grid-column:1/-1;grid-row:2}.budget-v4-category-row>span:nth-child(4){grid-column:1;grid-row:3}.budget-v4-category-row>.budget-status{grid-column:2;grid-row:3}.budget-v4-detail-heading>.budget-v4-actions{grid-template-columns:1fr 1fr}.budget-v4-detail-heading>.budget-v4-actions button{min-height:44px}.budget-v4-category-drawer .budget-v4-kpis{grid-template-columns:1fr}.budget-v4-category-drawer .budget-v4-kpi{min-height:55px}}
@media(max-width:619px){.budget-v4-subtabs button,.budget-v4-menu summary{min-height:44px;min-width:44px}}
@media(min-width:900px){.budget-v4-panel .budget-v4-category-row{grid-template-columns:minmax(0,1fr) auto minmax(55px,.7fr)}}
.budget-v4-spending{display:grid;grid-template-columns:minmax(145px,.8fr) minmax(0,1.2fr);align-items:center;gap:12px;min-height:170px}.budget-v4-spending-visual{display:grid;place-items:center;min-width:0}.budget-v4-donut{width:min(150px,100%);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--donut);position:relative}.budget-v4-donut::before{content:"";position:absolute;inset:17%;border:1px solid rgba(140,160,220,.12);border-radius:50%;background:#0B1020}.budget-v4-donut-center{position:relative;z-index:1;display:grid;justify-items:center;gap:3px;text-align:center}.budget-v4-donut-center strong{font-size:19px;font-weight:650;font-variant-numeric:tabular-nums}.budget-v4-donut-center span{color:var(--b4-secondary);font-size:10px}.budget-v4-donut-center small{color:var(--b4-muted);font-size:9px}.budget-v4-spending-list{max-height:205px;display:grid;gap:6px;overflow:auto;margin:0;padding:3px 4px 3px 0;list-style:none}.budget-v4-spending-row{display:grid;grid-template-columns:minmax(0,1fr) auto 32px;align-items:center;gap:5px 8px;min-width:0;padding:5px 2px;border-bottom:1px solid rgba(140,160,220,.06)}.budget-v4-spending-name{display:flex;align-items:center;gap:7px;min-width:0}.budget-v4-spending-name i{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--category-color)}.budget-v4-spending-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:550}.budget-v4-spending-row>strong,.budget-v4-spending-percent{font-size:9px;font-variant-numeric:tabular-nums;white-space:nowrap}.budget-v4-spending-percent{color:var(--b4-muted);text-align:right}.budget-v4-spending-row .budget-progress{grid-column:1/-1;width:100%;height:4px}.budget-v4-spending-row .budget-progress i{background:var(--category-color)}.budget-v4-spending-row .budget-progress[aria-label="0% of spending"] i{width:0!important}.budget-v4-spending .budget-v4-empty{grid-column:1/-1}.budget-v4-action-empty{display:grid;justify-items:center;gap:12px;padding:18px;text-align:center;color:var(--b4-secondary);font-size:12px}.budget-v4-action-empty p{margin:0}.budget-v4-action-occurrences{display:grid;gap:8px;max-height:38vh;overflow:auto;padding:5px;color:var(--b4-secondary);font-size:11px}.budget-v4-action-occurrences label{display:flex;align-items:center;gap:9px;min-height:42px;padding:7px;border:1px solid var(--b4-border);border-radius:8px}.budget-v4-action-occurrences input{accent-color:#9278FF}
@media(max-width:1199px){.budget-v4-spending{grid-template-columns:minmax(112px,.72fr) minmax(0,1.28fr);gap:8px}.budget-v4-donut{width:min(126px,100%)}.budget-v4-donut-center strong{font-size:16px}.budget-v4-spending-row{gap:4px 6px}.budget-v4-spending-name b{font-size:9px}}
@media(max-width:619px){.budget-v4-spending{grid-template-columns:minmax(0,1fr);gap:10px;padding:6px 0}.budget-v4-donut{width:132px}.budget-v4-donut-center strong{font-size:18px}.budget-v4-spending-list{max-height:220px}.budget-v4-spending-name b{font-size:11px}.budget-v4-spending-row{grid-template-columns:minmax(0,1fr) auto 36px}.budget-v4-action-occurrences label{min-height:44px}}
.budget-v4-donut{background:transparent}.budget-v4-donut>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}.budget-v4-donut-track,.budget-v4-donut-segment{fill:none;stroke-width:12}.budget-v4-donut-track{stroke:rgba(140,160,220,.18)}.budget-v4-donut-segment{stroke-linecap:butt}.budget-v4-spending-name i{background:var(--category-color)}.budget-v4-spending-row progress{grid-column:1/-1;width:100%;height:4px;border:0;border-radius:8px;overflow:hidden;background:rgba(140,160,220,.10);appearance:none}.budget-v4-spending-row progress::-webkit-progress-bar{border-radius:8px;background:rgba(140,160,220,.10)}.budget-v4-spending-row progress::-webkit-progress-value{border-radius:8px;background:var(--category-color)}.budget-v4-spending-row progress::-moz-progress-bar{border-radius:8px;background:var(--category-color)}.budget-color-0{--category-color:#9B83FF}.budget-color-1{--category-color:#56C8DB}.budget-color-2{--category-color:#54D7AB}.budget-color-3{--category-color:#F2BB67}.budget-color-4{--category-color:#FF8295}.budget-color-5{--category-color:#719CFF}.budget-color-6{--category-color:#B88DF2}.budget-color-7{--category-color:#97A5C3}.budget-v4-donut-segment.budget-color-0{stroke:#9B83FF}.budget-v4-donut-segment.budget-color-1{stroke:#56C8DB}.budget-v4-donut-segment.budget-color-2{stroke:#54D7AB}.budget-v4-donut-segment.budget-color-3{stroke:#F2BB67}.budget-v4-donut-segment.budget-color-4{stroke:#FF8295}.budget-v4-donut-segment.budget-color-5{stroke:#719CFF}.budget-v4-donut-segment.budget-color-6{stroke:#B88DF2}.budget-v4-donut-segment.budget-color-7{stroke:#97A5C3}
.budget-v4-subtabs button{min-height:44px}
.budget-v4-spending-list .budget-v4-category-row{grid-template-columns:minmax(0,1fr) auto 32px;gap:5px 8px;padding:5px 2px;border-bottom:1px solid rgba(140,160,220,.06);font-size:inherit}
.budget-v4-spending-list .budget-v4-category-row>span:nth-child(2){font-size:9px}
.budget-v4-spending-list .budget-v4-category-row>span:nth-child(3){grid-column:auto;grid-row:auto}
.budget-v4-spending-list .budget-v4-category-row>span:nth-child(4){grid-column:1/-1;grid-row:auto}
.budget-v4-spending-list .budget-v4-category-row progress{grid-column:1/-1}

/* Figma-aligned creation dialogs: real fields and form values stay unchanged. */
dialog#editor:not([open]){display:none!important}
dialog#editor.budget-v4-modal-standard .dialog-heading{position:sticky;top:-18px;z-index:2;background:var(--surface)}
dialog#editor.budget-v4-modal-create,
dialog#editor.budget-v4-modal-bill,
dialog#editor.budget-v4-modal-edit{display:flex;flex-direction:column;gap:0;overflow:hidden;padding:0;border-color:rgba(140,160,220,.14);border-radius:14px;background:#10162A}
dialog#editor.budget-v4-modal-create{width:min(580px,calc(100% - 32px))}
dialog#editor.budget-v4-modal-bill{width:min(480px,calc(100% - 32px))}
dialog#editor.budget-v4-modal-edit{width:min(520px,calc(100% - 32px))}
dialog#editor .dialog-heading.budget-v4-designed-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex:0 0 auto;margin:0;padding:16px 20px;border-bottom:1px solid rgba(140,160,220,.08)}
dialog#editor .budget-v4-modal-heading-copy{display:flex;align-items:flex-start;gap:11px;min-width:0}
dialog#editor .budget-v4-modal-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border:1px solid rgba(124,92,252,.2);border-radius:9px;background:rgba(124,92,252,.12);color:#A995FF}
dialog#editor .budget-v4-modal-icon svg{width:18px;height:18px}
dialog#editor .budget-v4-modal-heading-copy h2{margin:0;color:#F3F6FF;font-size:16px;font-weight:700}
dialog#editor .budget-v4-modal-heading-copy p{margin:3px 0 0;color:#66708D;font-size:11px;line-height:1.45}
dialog#editor .dialog-heading.budget-v4-designed-heading>button{width:36px;height:36px;min-width:36px;min-height:36px;margin:-3px -5px 0 0;border-radius:8px;color:#8390B0}
dialog#editor .dialog-heading.budget-v4-designed-heading>button:hover{background:rgba(140,160,220,.08);color:#F3F6FF}
dialog#editor .budget-v4-create-form,
dialog#editor .budget-v4-bill-form,
dialog#editor .budget-v4-edit-form{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}
dialog#editor .budget-v4-create-form .form-grid,
dialog#editor .budget-v4-bill-form .form-grid,
dialog#editor .budget-v4-edit-form .form-grid{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;min-height:0;overflow-y:auto;padding:16px 20px}
dialog#editor .budget-v4-modal-section,
dialog#editor .budget-v4-choice-section,
dialog#editor .budget-v4-modal-field-row{grid-column:1/-1;min-width:0;margin:0}
dialog#editor .budget-v4-modal-field{display:grid;gap:6px;color:#9AA6C7;font-size:11px;font-weight:550}
dialog#editor .budget-v4-modal-field input,
dialog#editor .budget-v4-modal-field textarea,
dialog#editor .budget-v4-select-wrap select{min-height:42px;padding:9px 11px;border-color:rgba(140,160,220,.12);border-radius:7px;background-color:#0B1020;color:#F3F6FF;font-size:12px}
dialog#editor .budget-v4-modal-field input::placeholder,
dialog#editor .budget-v4-modal-field textarea::placeholder{color:#66708D}
dialog#editor .budget-v4-modal-field input:focus,
dialog#editor .budget-v4-modal-field textarea:focus,
dialog#editor .budget-v4-select-wrap:focus-within select{border-color:rgba(124,92,252,.55);outline:none}
dialog#editor .budget-v4-modal-field textarea{min-height:66px;resize:vertical;line-height:1.5}
dialog#editor .budget-v4-modal-field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px}
dialog#editor .budget-v4-money-input{position:relative;display:flex;align-items:center;min-width:0}
dialog#editor .budget-v4-money-input>span{position:absolute;left:11px;color:#66708D;font-size:12px;pointer-events:none}
dialog#editor .budget-v4-money-input input{padding-left:25px}
dialog#editor .budget-v4-select-wrap{position:relative;display:block;min-width:0}
dialog#editor .budget-v4-select-wrap select{appearance:none;width:100%;padding-right:34px;cursor:pointer}
dialog#editor .budget-v4-select-wrap select option{background:#10162A;color:#F3F6FF}
dialog#editor .budget-v4-select-wrap>svg{position:absolute;top:50%;right:11px;width:14px;height:14px;transform:translateY(-50%);color:#8390B0;pointer-events:none}
dialog#editor .budget-v4-choice-section{display:grid;gap:8px}
dialog#editor .budget-v4-modal-label{color:#9AA6C7;font-size:11px;font-weight:600}
dialog#editor .budget-v4-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-width:0}
dialog#editor .budget-v4-choice-grid>input[type=hidden]{display:none}
dialog#editor .budget-v4-choice-card{position:relative;display:grid;align-content:start;justify-items:start;gap:4px;min-width:0;min-height:68px;padding:9px 10px;border:1px solid rgba(140,160,220,.1);border-radius:8px;background:rgba(140,160,220,.035);color:#F3F6FF;text-align:left;transition:background .15s,border-color .15s,box-shadow .15s}
dialog#editor .budget-v4-choice-card:hover{border-color:rgba(124,92,252,.32);background:rgba(124,92,252,.075)}
dialog#editor .budget-v4-choice-card.is-selected{border-color:rgba(124,92,252,.52);background:rgba(124,92,252,.14);box-shadow:inset 0 0 0 1px rgba(124,92,252,.08)}
dialog#editor .budget-v4-choice-card:focus-visible{outline:2px solid rgba(169,149,255,.85);outline-offset:2px}
dialog#editor .budget-v4-choice-title{display:block;color:#F3F6FF;font-size:10.5px;font-weight:650;line-height:1.25}
dialog#editor .budget-v4-choice-card.is-selected .budget-v4-choice-title{color:#CBBEFF}
dialog#editor .budget-v4-choice-card small{display:block;color:#7683A2;font-size:9px;font-weight:400;line-height:1.35}
dialog#editor .budget-v4-template-preview{display:grid;gap:9px;padding:11px 12px;border:1px solid rgba(140,160,220,.08);border-radius:8px;background:rgba(140,160,220,.035)}
dialog#editor .budget-v4-template-preview>div:first-child{display:grid;gap:2px}
dialog#editor .budget-v4-template-preview strong{color:#9AA6C7;font-size:10px;font-weight:600}
dialog#editor .budget-v4-template-preview small,
dialog#editor .budget-v4-blank-hint,
dialog#editor .budget-v4-disclosure>small{color:#66708D;font-size:9px;line-height:1.45}
dialog#editor .budget-v4-template-chips{display:flex;flex-wrap:wrap;gap:5px}
dialog#editor .budget-v4-template-chips span{display:inline-flex;align-items:center;min-height:26px;padding:4px 8px;border:1px solid rgba(124,92,252,.18);border-radius:20px;background:rgba(124,92,252,.09);color:#A995FF;font-size:9px;font-weight:550}
dialog#editor .budget-v4-blank-hint{margin:0;padding:9px 11px;border:1px dashed rgba(140,160,220,.12);border-radius:8px}
dialog#editor .budget-v4-disclosure{display:grid;gap:6px;padding:10px;border:1px solid rgba(140,160,220,.08);border-radius:8px;background:rgba(140,160,220,.025)}
dialog#editor .budget-v4-source-empty{margin:0;color:#F2BB67;font-size:9px;line-height:1.45}
dialog#editor .budget-v4-rollover-list{display:grid;grid-template-columns:1fr;gap:7px;margin:0;padding:10px;border:1px solid rgba(140,160,220,.1);border-radius:8px;background:rgba(140,160,220,.025)}
dialog#editor .budget-v4-rollover-list[hidden],
dialog#editor [data-budget-target-date][hidden],
dialog#editor [data-budget-copy-source][hidden],
dialog#editor [data-budget-template-preview][hidden],
dialog#editor [data-budget-blank-hint][hidden]{display:none!important}
dialog#editor .budget-v4-rollover-list legend{padding:0 5px;color:#9AA6C7;font-size:10px;font-weight:600}
dialog#editor .budget-v4-rollover-list [data-rollover-category-options]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 10px}
dialog#editor .budget-v4-rollover-list .budget-v4-check{display:flex;align-items:center;gap:7px;min-width:0;min-height:34px;color:#9AA6C7;font-size:10px;font-weight:450}
dialog#editor .budget-v4-rollover-list .budget-v4-check input{width:16px;min-height:16px;height:16px;margin:0;accent-color:#8D75FF}
dialog#editor .budget-v4-rollover-list .budget-v4-check span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog#editor .budget-v4-optional{color:#66708D;font-size:9px;font-weight:400}
dialog#editor .budget-v4-recurrence-options .budget-v4-choice-card{min-height:48px;align-content:center;padding:7px 9px}
dialog#editor .budget-v4-recurrence-options .budget-v4-choice-card small{font-size:8px}
dialog#editor .budget-v4-create-form .form-error,
dialog#editor .budget-v4-bill-form .form-error{margin:0 20px}
dialog#editor .budget-v4-create-form .form-actions,
dialog#editor .budget-v4-bill-form .form-actions{flex:0 0 auto;margin:0;padding:12px 20px;border-top:1px solid rgba(140,160,220,.08)}
dialog#editor .budget-v4-create-form .form-actions .button,
dialog#editor .budget-v4-bill-form .form-actions .button,
dialog#editor .budget-v4-edit-form .form-actions .button{min-height:42px;padding:9px 16px;border-radius:7px;font-size:11px}
dialog#editor .budget-v4-create-form .form-actions .button.primary,
dialog#editor .budget-v4-bill-form .form-actions .button.primary,
dialog#editor .budget-v4-edit-form .form-actions .button.primary{background:linear-gradient(135deg,#7C5CFC,#6D4EE8);box-shadow:0 5px 15px rgba(124,92,252,.2)}
dialog#editor .budget-v4-edit-form .form-actions{flex:0 0 auto;margin:0;padding:12px 20px 16px;border-top:1px solid rgba(140,160,220,.08)}
dialog#editor .budget-v4-edit-form .budget-v4-modal-field-row{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:619px){
 .budget-v4-page.budget-v4-detail{grid-template-columns:minmax(0,1fr)}
 .budget-v4-page.budget-v4-detail>*{min-width:0}
  dialog#editor.budget-v4-modal-create,dialog#editor.budget-v4-modal-bill,dialog#editor.budget-v4-modal-edit{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  dialog#editor .dialog-heading.budget-v4-designed-heading{padding:13px 14px}
  dialog#editor .budget-v4-create-form .form-grid,dialog#editor .budget-v4-bill-form .form-grid,dialog#editor .budget-v4-edit-form .form-grid{gap:12px;padding:13px 14px}
  dialog#editor .budget-v4-edit-form .form-actions{padding:10px 14px 14px}
  dialog#editor .budget-v4-modal-field-row{gap:9px}
  dialog#editor .budget-v4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  dialog#editor .budget-v4-choice-card{min-height:64px;padding:8px}
  dialog#editor .budget-v4-rollover-options .budget-v4-choice-card:last-child{grid-column:1/-1}
  dialog#editor .budget-v4-recurrence-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  dialog#editor .budget-v4-recurrence-options .budget-v4-choice-card{min-height:48px;padding:6px 4px}
  dialog#editor .budget-v4-recurrence-options .budget-v4-choice-title{font-size:9.5px}
  dialog#editor .budget-v4-recurrence-options .budget-v4-choice-card small{font-size:7.5px}
  dialog#editor .budget-v4-create-form .form-actions,dialog#editor .budget-v4-bill-form .form-actions{padding:10px 14px}
  dialog#editor .budget-v4-create-form .form-actions .button,dialog#editor .budget-v4-bill-form .form-actions .button{flex:1;min-height:44px}
}

/* Responsive V3: on phones, keep Budget's financial summary visible and put
   the longer overview modules behind one compact, keyboard-operable section
   tablist. Desktop continues to use the existing four-panel composition. */
.budget-v4-mobile-tabs{display:none}
.budget-v4-mobile-panel{display:contents}
@media(max-width:699px){
 .budget-v4-heading p{max-width:38ch;margin-top:4px}
 .budget-v4-mobile-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--b4-border);border-radius:11px;background:rgba(11,16,32,.72)}
 .budget-v4-mobile-tabs button{min-width:0;min-height:44px;padding:5px 2px;border:1px solid transparent;border-radius:8px;color:var(--b4-secondary);font-size:clamp(10px,2.9vw,12px);white-space:nowrap}
 .budget-v4-mobile-tabs button.active{border-color:rgba(160,137,255,.22);background:rgba(124,92,252,.15);color:#D1C6FF}
 .budget-v4-mobile-panel{display:grid;gap:10px;min-width:0}
 .budget-v4-page[data-budget-mobile-tab="budgets"] [data-budget-content]:not([data-budget-content="budgets"]),
 .budget-v4-page[data-budget-mobile-tab="spending"] [data-budget-content]:not([data-budget-content="spending"]),
 .budget-v4-page[data-budget-mobile-tab="bills"] [data-budget-content]:not([data-budget-content="bills"]),
 .budget-v4-page[data-budget-mobile-tab="activity"] [data-budget-content]:not([data-budget-content="activity"]){display:none}
 .budget-v4-page .budget-v4-dashboard,.budget-v4-page .budget-v4-dashboard-primary,.budget-v4-page .budget-v4-dashboard-secondary{display:contents}
 .budget-v4-page .budget-v4-dashboard .budget-v4-panel{padding:12px;border-radius:12px}
 .budget-v4-page .budget-v4-dashboard .budget-v4-panel>header{padding:0 0 8px;margin:0 0 8px}
 .budget-v4-page .budget-v4-dashboard .budget-v4-panel>header h2{font-size:12px}
 .budget-v4-page .budget-v4-dashboard .budget-v4-panel-body>.budget-v4-empty{padding:9px 5px}
 .budget-v4-page .budget-v4-list{padding:8px}
 .budget-v4-page .budget-v4-list-top{gap:4px;margin-bottom:7px}
 .budget-v4-page .budget-v4-grid{gap:8px}
 .budget-v4-page .budget-v4-card-main{min-height:160px;gap:8px;padding:11px}
 .budget-v4-page .budget-v4-empty-state{min-height:0;gap:8px;padding:16px 13px}
 .budget-v4-page .budget-v4-empty-state .budget-v4-empty-icon{width:42px;height:42px;border-radius:12px}
 .budget-v4-page .budget-v4-empty-state h2{font-size:16px}
 .budget-v4-page .budget-v4-empty-state p{margin:0;font-size:11px;line-height:1.45}
}

.budget-v4-rollover-list{display:grid;grid-template-columns:1fr;gap:7px;margin:0;padding:10px;border:1px solid rgba(140,160,220,.12);border-radius:9px;color:var(--b4-secondary);font-size:10px}.budget-v4-rollover-list legend{padding:0 5px;color:var(--b4-muted);font-size:9px;font-weight:700}.budget-v4-rollover-list [data-rollover-category-options]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 10px}.budget-v4-check{display:flex;align-items:center;gap:7px;min-height:34px;color:var(--b4-secondary);font-size:10px}.budget-v4-check input{accent-color:#8D75FF}.positive{color:#76D8B5}
.budget-v4-card-main{justify-content:stretch;justify-items:stretch}
dialog:has(.budget-v4-category-drawer) .form-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

.budget-v4-period-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.budget-v4-period-header>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.budget-v4-period-header .button{min-height:38px;padding:7px 10px;font-size:10px}@media(max-width:619px){.budget-v4-period-header{align-items:flex-start;flex-wrap:wrap}.budget-v4-period-header>div{width:100%;justify-content:flex-start}.budget-v4-period-header .button{min-height:42px}}

/* UI Standard V3: the Mail/Fitness/Investing/Planner locked-shell bottom-spacing pattern was
   evaluated for Budget and reverted - Budget's dialog scroll-lock/restore logic and its own tests
   (tests/budget-v4-quick-actions-browser.test.js) depend on document-level scrolling
   (document.scrollingElement.scrollHeight, window.scrollY). Moving Budget to the locked-shell/
   inner-scroll model broke that real, tested behavior. Per priority order (functionality/
   correctness above shared-shell consistency), Budget keeps its existing document-scroll behavior;
   see docs/ui-design-standard-v3.md ss10 for the full note. */

/* Wide Budget workspace with natural-height dashboard sections. */
.budget-v4-page:not(.budget-v4-detail){gap:16px}
.budget-v4-page:not(.budget-v4-detail)>.budget-v4-summary-header>.budget-v4-kpis{gap:10px}
.budget-v4-page:not(.budget-v4-detail)>.budget-v4-summary-header>.budget-v4-kpis>.budget-v4-kpi{min-height:0;padding:14px 16px;border-color:rgba(140,160,220,.10);border-radius:10px;background:#10162A;box-shadow:none}
.budget-v4-page:not(.budget-v4-detail)>.budget-v4-summary-header>.budget-v4-kpis .budget-v4-kpi-icon{width:34px;height:34px}
.budget-v4-page:not(.budget-v4-detail)>.budget-v4-summary-header>.budget-v4-kpis .budget-v4-kpi strong{font-size:19px}
.budget-v4-list{align-self:start;height:auto;flex:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.budget-v4-list .budget-v4-filter-tabs button{min-height:36px}
.budget-v4-grid{height:auto;max-height:none;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),320px));gap:12px;overflow:visible;align-content:start;grid-auto-rows:max-content}
.budget-v4-card{min-height:160px;padding:0;border-color:rgba(140,160,220,.10);border-radius:12px;background:#10162A;box-shadow:none}
.budget-v4-card-main{min-height:160px;gap:12px;padding:16px}
.budget-v4-dashboard{display:grid;gap:16px;align-content:start}
.budget-v4-dashboard-primary,.budget-v4-dashboard-secondary{display:grid;gap:16px}
.budget-v4-dashboard-primary{grid-template-columns:repeat(2,minmax(0,1fr))}
.budget-v4-dashboard-secondary{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.budget-v4-dashboard .budget-v4-panel{min-height:0;border-color:rgba(140,160,220,.10);border-radius:12px;background:#10162A;box-shadow:none}
.budget-v4-dashboard .budget-v4-panel>header{padding:0 0 12px;margin:0 0 12px;border-bottom:0;background:none}
.budget-v4-dashboard .budget-v4-panel-body{max-height:none;overflow:visible;padding:0}
.budget-v4-dashboard .budget-v4-spending-list{max-height:none;overflow:visible}
/* Large-desktop adaptive density: only a maximized ultrawide/tall-desktop window (see the matching
   comment above .ht-dashboard in styles.css for the measured viewport numbers) gives .budget-v4-page
   a real min-height floor (document scrolling is untouched - this is a floor, not a fixed height, so
   a page with many budgets/categories still grows and scrolls normally), switches it to a flex
   column so the real leftover space (after the header/KPI row/budget list, all left untouched) goes
   to .budget-v4-dashboard via flex:1, then splits THAT between the two dashboard rows proportionally
   (primary ~62%, secondary ~38%, matching "Spending by Category/Upcoming Bills" needing more room
   than "Recent Transactions/Budget Health") via flex-grow, each still floored at its own clamp()
   minimum so a short page never squeezes a row below a usable size. The knife-edge 212px constant
   (re-measured on the real scaled ~1700x1200 viewport, not the unscaled ~3440 automation one) left a
   real but larger-than-intended ~40px visible gap below the footer with zero scrollbar - the true
   remaining distance has to be measured as document.documentElement.scrollHeight vs innerHeight, not
   the dashboard's or even the footer's own bottom, because .shell's own shared .content rule
   (public/styles.css, line ~5) still adds its generic 40px bottom padding below the footer regardless
   of where this page's own floor puts things. Rather than shrink the floor further (which previously
   reintroduced a scrollbar, since that shared 40px was still fully present and unaccounted for), the
   fix recovers exactly the gap being reduced from the shared padding ON THIS PAGE ONLY - scoped via
   .shell:has(.budget-v4-page) .content (the same :has()-scoped-override idiom already used for Mail/
   Fitness/Investing/Planner's own shell content rules, gated to this same trigger so normal desktop
   and half-screen keep the shared, untouched 40px) - and gives that exact 20px back to the page's own
   min-height floor (212px -> 192px), so the total footprint is unchanged and no scrollbar reappears:
   less padding, more usable dashboard, by the same amount.
     A second, separate gap remained ABOVE the footer: the dashboard/page end with zero internal
   slack (.budget-v4-dashboard's bottom exactly equals .budget-v4-page's bottom - confirmed by direct
   measurement, no flex free-space anywhere inside the page), so that gap is caused entirely by the
   shared .footer{margin-top:40px} rule (public/styles.css, "Shared components" section) - a fixed
   spacing value applied after wherever the page ends, independent of how tall the page/dashboard is,
   so growing the dashboard further can never close it. Fixed the same way as the padding above:
   .shell:has(.budget-v4-page) .content .footer{margin-top:20px} shrinks that gap from ~40px to the
   target ~20px, ON THIS PAGE ONLY, same gating, footer's own padding-top/border-top/bottom spacing
   untouched. Shrinking the margin by 20px moves the footer 20px closer to the page - to avoid
   re-opening the already-fixed gap below the footer, the page's own floor is grown by that same 20px
   (192px -> 172px) so the footer's own absolute position (and the 20px gap below it) stays exactly
   where it was; only the gap above it shrinks. Unlike Today/Planner, Budget is not a locked 100dvh
   shell and keeps its visible footer, so the floor still has to subtract everything the normal
   document flow consumes above AND below the page (including that footer) so the floor itself
   doesn't introduce a document scrollbar that would shift the page horizontally - not just use 100vh
   directly. Real content (many budgets/categories) still grows and scrolls past this floor exactly as
   before - a budget with several real categories already exceeds even this floor at this viewport
   height, so it only ever governs the sparse-content case. Trigger: see the matching comment above
   .ht-dashboard in styles.css for why this is min-width:1500px, not an earlier 1800px.
     Both gaps were then locked at 20px, matching Today's own reference bottom-breathing-space (Today
   hides its footer via the locked-shell pattern, so its lower boundary is just .content's own edge -
   also 20px below its final row). The remaining visual gap vs. Today was the footer element itself:
   the shared .footer rule gives it padding-top:20px but padding-bottom:0 (measured footer height 36px
   = 1px border + 20px padding-top + 15px text, nothing below), so all of its own internal breathing
   room sat above the text and none below. Rebalanced to padding-top:10px/padding-bottom:10px, which
   keeps the footer's total height at 36px (10+15+10+1, same as 20+15+0+1) - a height-neutral change
   that cannot move the footer's top or bottom edge, so it never touched the two gaps above/below it.
     On further visual review at ultrawide, the 20px dashboard-to-footer gap itself read as too large -
   superseded down to a 6px target. footer margin-top (its OWN spacing above the footer, distinct from
   its now-locked internal padding) is the one rule that sets that gap, so it drops 20px -> 6px,
   recovering 14px. That 14px is handed to the page's own floor (172px -> 158px subtracted, i.e. 14px
   less subtracted = 14px taller) so .budget-v4-dashboard (flex:1, zero internal slack against the
   page) grows downward by the same 14px it gave up above - the footer's own top/bottom position (and
   therefore the already-approved 20px gap BELOW the footer, and the footer's own internal padding)
   stay exactly where they were; only the dashboard-to-footer gap shrinks, and the recovered space goes
   to real dashboard height instead of being left as unused viewport.
     Final polish: the horizontal line above the footer is the shared .footer rule's own
   border-top:1px solid var(--border) (public/styles.css, "Shared components"), not a ::before or
   box-shadow. Setting border-top-width:0 (or style:none) would shrink the footer's box by that 1px
   and pull its bottom edge up by 1px, re-opening exactly the kind of 1px drift this page has spent
   several passes eliminating - so instead only border-top-color is overridden to transparent, which
   keeps the 1px reserved (box height, and therefore the footer's top/bottom position and the 6px/20px
   gaps on either side, all stay byte-identical) while the line itself becomes invisible.
     Final positioning: the whole ending (dashboard + footer, as one unit) sits too high, with 20px of
   unused space below the footer - that bottom margin is exactly this page's own .content
   padding-bottom, so it drops 20px -> 6px, recovering 14px. Unlike every gap fixed above, this one
   deliberately moves the footer itself (not just the space around it): the recovered 14px is handed
   to the page's own floor (158px -> 144px subtracted, 14px taller) so .budget-v4-page's bottom edge -
   and with it the footer, which merely rides along via its own unchanged margin-top - moves down by
   the same 14px. Because margin-top(6px), padding(10px/10px) and height(36px) are all untouched, the
   6px dashboard-to-footer gap and the footer's internal look are unaffected; only its absolute
   position, and the space below it, shift.
     Final 4px nudge: the same technique, smaller amount - .content padding-bottom 6px -> 2px (recovers
   4px), page floor 144px -> 140px (4px taller) so the footer rides down the same 4px, landing at
   ~2-4px above the viewport edge instead of 6px, with margin-top/padding/height/gap-above all still
   untouched.
     Absolute final 2px nudge: .content padding-bottom 2px -> 0px (recovers the last 2px), page floor
   140px -> 138px (2px taller), landing the footer flush (0-1px) with the viewport edge.
     Final cleanup: the footer itself is now hidden at this breakpoint (matching Today, which never
   shows one), so all of the margin-top/padding/border-color tuning above is superseded here - it still
   applies below the gate, where the footer stays visible and behaves exactly as before. Hiding it
   recovers its entire footprint: margin-top(6px) + height(36px) + the already-zero content
   padding-bottom = 42px, which was exactly what the 138px floor constant accounted for
   (96px page-top + 42px footprint = 138px). Giving that whole 42px back to the floor (138px -> 96px)
   would land the page flush with the viewport with zero breathing room; instead 4px is kept as
   .content's own padding-bottom (the only thing left below the page now that the footer is gone), so
   the floor only drops to 100px (96px + 4px), landing the dashboard ~4px from the viewport edge -
   within the requested 0-6px range - the same way every earlier pass in this page reserved a small
   gap rather than running flush to 0. */
@media(min-width:1500px) and (min-height:1000px){
  .shell:has(.budget-v4-page) .content{padding-bottom:4px}
  .shell:has(.budget-v4-page) .content .footer{display:none}
  .budget-v4-page{display:flex;flex-direction:column;min-height:calc(100vh - 100px)}
  .budget-v4-dashboard{flex:1;min-height:0;display:flex;flex-direction:column}
  .budget-v4-dashboard-primary{flex:1.6;min-height:clamp(280px,26vh,350px)}
  .budget-v4-dashboard-secondary{flex:1;min-height:clamp(190px,18vh,240px)}
}
@media(max-width:1199px){.budget-v4-page:not(.budget-v4-detail)>.budget-v4-summary-header>.budget-v4-kpis{gap:8px}}
@media(max-width:899px){.budget-v4-dashboard-primary,.budget-v4-dashboard-secondary{grid-template-columns:minmax(0,1fr)}}
@media(max-width:619px){.budget-v4-page:not(.budget-v4-detail){gap:12px}.budget-v4-grid{grid-template-columns:minmax(0,1fr);max-height:none;overflow:visible}}

/* Responsive V3 C3: keep desktop summary geometry while prioritizing actual financial figures on phones. */
.budget-v4-summary-header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"heading actions" "kpis kpis";align-items:end;gap:16px 20px;min-width:0}
.budget-v4-summary-header>.budget-v4-heading{grid-area:heading;min-width:0}
.budget-v4-summary-header>.budget-v4-actions{grid-area:actions}
.budget-v4-summary-header>.budget-v4-kpis{grid-area:kpis}
@media(max-width:1199px){.budget-v4-summary-header>.budget-v4-kpis{gap:8px}}
@media(max-width:899px){.budget-v4-summary-header{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "actions" "kpis";gap:12px}.budget-v4-summary-header>.budget-v4-actions{width:100%;justify-content:flex-start}}
@media(max-width:619px){
 .budget-v4-summary-header{grid-template-areas:"heading" "kpis" "actions";gap:10px}
 .budget-v4-summary-header>.budget-v4-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
 .budget-v4-summary-header .budget-v4-search{grid-column:1;height:44px;min-width:0}
 .budget-v4-summary-header .budget-v4-actions>.button.primary{grid-column:1;grid-row:auto;justify-self:stretch;min-height:44px}
 .budget-v4-detail-heading{align-items:stretch;max-width:100%}
 .budget-v4-detail-heading>div:first-child{width:100%;min-width:0}
 .budget-v4-detail-heading>.budget-v4-actions{width:100%;max-width:100%;min-width:0;align-self:stretch;box-sizing:border-box;grid-template-columns:repeat(2,minmax(0,1fr))}
 .budget-v4-detail-heading>.budget-v4-actions>*{min-width:0;max-width:100%;padding-inline:7px;white-space:normal;line-height:1.2}
 .budget-v4-list .budget-v4-filter-tabs,.budget-v4-workspace>.budget-v4-filter-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%;overflow:visible}
 .budget-v4-list .budget-v4-filter-tabs button,.budget-v4-workspace>.budget-v4-filter-tabs button{min-width:0;width:100%;min-height:44px;padding:6px 3px;white-space:normal;line-height:1.15;font-size:clamp(9px,2.7vw,11px)}
 .budget-v4-dashboard .budget-v4-panel{min-height:0}
 .budget-v4-dashboard .budget-v4-panel-body>.budget-v4-empty{padding:12px 8px}
 .budget-v4-spending{gap:7px;padding:2px 0}
 .budget-v4-donut{width:112px}
 .budget-v4-spending-list{gap:3px;max-height:none;padding-top:0;padding-bottom:0}
 .budget-v4-spending-row{padding:3px 2px;gap:3px 6px}
 .budget-v4-list .budget-v4-menu summary,.budget-v4-card .budget-v4-menu summary{width:44px;height:44px;min-width:44px;min-height:44px}
}

/* Responsive V3 C3 final mobile polish: keep the full Budget Detail control set reachable. */
@media(max-width:619px){
 .budget-v4-detail-heading{gap:8px}
 .budget-v4-detail-heading>div:first-child{gap:2px}
 .budget-v4-detail-heading>.budget-v4-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .budget-v4-detail-heading>.budget-v4-actions>.button.primary{grid-column:auto;grid-row:auto}
 .budget-v4-detail-heading>.budget-v4-actions>*{display:flex;align-items:center;justify-content:center;gap:3px;grid-column:auto;grid-row:auto;min-width:0;min-height:44px;padding:4px 2px;font-size:clamp(9px,2.6vw,10px);white-space:normal;overflow-wrap:anywhere}
 .budget-v4-workspace .budget-v4-workspace-top{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:0 0 8px}
 .budget-v4-workspace .budget-v4-subtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;min-width:0;overflow:visible}
 .budget-v4-workspace .budget-v4-subtabs button{width:100%;min-width:0;min-height:44px;padding:5px 2px;font-size:clamp(9px,2.7vw,11px);white-space:normal;line-height:1.15}
 .budget-v4-workspace .budget-v4-workspace-top>.button{width:100%;min-width:0;min-height:44px;justify-content:center}
 .budget-v4-workspace #budget-subpanel>.budget-v4-filter-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%;overflow:visible;padding:7px 0}
 .budget-v4-workspace #budget-subpanel>.budget-v4-filter-tabs button{width:100%;min-width:0;min-height:44px;padding:5px 2px;font-size:clamp(9px,2.7vw,11px);white-space:normal;line-height:1.15}
}