:root{--page:#f4f6fb;--paper:#fff;--alt:#f8faff;--ink:#172741;--muted:#64748c;--line:#e0e7f1;--blue:#3456e9;--soft:#edf2ff;--green:#168568;--green-soft:#eaf7f1;--orange:#a7621d;--orange-soft:#fff5e9;--red:#c45666;--shadow:0 4px 24px #20334c04}

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button{cursor:pointer}
button,input,select{color:inherit}
button{border:0}
button:disabled{cursor:default;opacity:.55}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
svg{flex-shrink:0}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.shell{max-width:1248px;margin:auto;padding:32px 28px 24px}
.eyebrow{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:10px;letter-spacing:1.7px;text-transform:uppercase;font-weight:750}
.eyebrow:before{content:"";height:6px;width:6px;border-radius:50%;background:var(--blue)}
h1{font-size:clamp(29px,3.1vw,40px);letter-spacing:-1.4px;line-height:1.15;font-weight:760;margin:12px 0 11px}
h2,h3,p{margin:0}
h2{font-size:17px;letter-spacing:-.45px}
h3{font-size:14px;letter-spacing:-.2px}
.lead{font-size:13px;color:var(--muted);line-height:1.8}
.page-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px}
.title-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 14px;border:1px solid var(--line);border-radius:11px;background:var(--paper);font-size:12px;font-weight:650;white-space:nowrap}
.btn .i{width:16px;height:16px}
.btn:hover,.icon-btn:hover{background:var(--soft)}
.btn.primary{background:#3456e9;color:#fff;border-color:#3456e9}
.btn.primary:hover{background:#2948ce}
.btn.quiet{border-color:transparent;background:transparent;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:650;letter-spacing:.1px;padding:5px 8px;border-radius:7px;background:var(--soft);color:var(--blue);white-space:nowrap}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.orange{background:var(--orange-soft);color:var(--orange)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);min-width:0}
.pad{padding:22px}
.card-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}
.card-title p{color:var(--muted);font-size:11px;margin-top:4px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}
.field label,.field>span{font-size:11px;font-weight:650;color:var(--muted)}
input:not([type=range]):not([type=checkbox]),select{width:100%;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--alt);font-size:13px;outline-offset:2px}
input[type=checkbox]{accent-color:#3456e9;width:17px;height:17px}
input[type=range]{width:100%;accent-color:#3456e9}
.field small,.hint{font-size:10px;line-height:1.7;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.small{font-size:11px;color:var(--muted)}
.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.footnote{font-size:10px;color:var(--muted);line-height:1.8}
.note{padding:12px 14px;border-radius:10px;background:var(--alt);font-size:11px;line-height:1.7;color:var(--muted)}
.note.orange{background:var(--orange-soft);color:var(--orange)}
.line{height:1px;background:var(--line);margin:20px 0}
.finance-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-nav button{display:flex;align-items:center;gap:11px;width:100%;min-height:43px;background:transparent;border-radius:10px;padding:10px 12px;font-size:12px;color:var(--muted);text-align:left}
.side-nav button .i{width:17px;height:17px}
.side-nav button[aria-current=page]{background:var(--soft);color:var(--blue);font-weight:700}
.side-nav button:hover{background:var(--soft)}
.side-divider{height:1px;background:var(--line);margin:14px 0}
.workspace-card{padding:14px 12px;margin-bottom:22px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.workspace-card small{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.workspace-card strong{font-size:12px;display:block;margin-top:4px}
.workspace-card span{font-size:10px;color:var(--muted)}
.finance-main{min-width:0}
.finance-title h1{font-size:30px;margin:0 0 7px}
.finance-title{margin-bottom:25px}
.period-chip{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:10px;font-size:11px}
.period-chip .i{height:15px;width:15px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:20px}
.stat{padding:17px 16px}
.stat-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px}
.stat-top .i{width:15px;height:15px}
.stat strong{display:block;font-size:22px;letter-spacing:-.75px;margin:10px 0 6px;font-weight:720}
.stat small{font-size:9px;color:var(--muted)}
.stat .positive{color:var(--green)}
.widgets{display:flex;flex-direction:column;gap:18px}
.analytics-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.chart-head strong{font-size:24px;letter-spacing:-.8px}
.chart-legend{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px}
.chart-legend:before{content:"";height:6px;width:6px;background:var(--blue);border-radius:50%}
.chart{width:100%;height:175px;display:block;overflow:visible}
.chart text{fill:var(--muted);font-size:9px;font-family:inherit}
.category-row{display:flex;align-items:center;gap:10px;margin-top:18px}
.category-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.category-data{flex:1;min-width:0}
.category-label{display:flex;justify-content:space-between;font-size:10px;margin-bottom:6px}
.category-track{height:5px;border-radius:4px;background:var(--page);overflow:hidden}
.category-track span{height:100%;display:block;border-radius:4px}
.table-wrap{overflow-x:auto}
.transactions{width:100%;border-collapse:collapse;font-size:11px}
.transactions th{font-size:9px;font-weight:550;color:var(--muted);text-align:left;padding:12px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.transactions td{padding:13px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.transactions td:first-child{padding-left:0}
.transactions tr:last-child td{border-bottom:0}
.transactions th:last-child,.transactions td:last-child{text-align:right}
.transaction-label{display:flex;align-items:center;gap:10px}
.transaction-symbol{height:32px;width:32px;border-radius:9px;background:var(--alt);display:grid;place-items:center;color:var(--muted)}
.transaction-symbol .i{width:15px;height:15px}
.transaction-label strong{font-size:11px;display:block;font-weight:650}
.transaction-label small{font-size:9px;color:var(--muted);display:block;margin-top:2px}
.income{color:var(--green)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.filters input{flex:1;min-width:170px!important}
.filters select{width:auto;min-width:130px}
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.account-icon{height:40px;width:40px;background:var(--soft);color:var(--blue);border-radius:12px;display:grid;place-items:center;margin-bottom:18px}
.account-card .balance{font-size:28px;letter-spacing:-.8px;margin:12px 0 4px;font-weight:700}
.budget-row{padding:18px 0;border-bottom:1px solid var(--line)}
.budget-row:last-child{border:0}
.budget-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:12px}
.budget-top>div{display:flex;gap:9px;align-items:center;font-size:12px}
.budget-top input{width:100px!important;min-height:36px!important;padding:7px 10px!important;text-align:right}
.progress{height:7px;border-radius:8px;background:var(--page);overflow:hidden;margin-bottom:8px}
.progress span{display:block;height:100%;background:#6984ef;border-radius:8px}
.budget-foot{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.stack{display:grid;gap:16px}
.record-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:19px;border-bottom:1px solid var(--line)}
.record-row:last-child{border-bottom:0}
.record-row strong{font-size:12px}
.record-row p{font-size:11px;color:var(--muted);margin-top:4px}
.record-actions{display:flex;align-items:center;gap:18px}
.record-actions strong{white-space:nowrap}
.goal-card{display:flex;flex-direction:column;gap:15px}
.goal-amount{font-size:25px;letter-spacing:-.8px;font-weight:700}
.goal-amount span{font-size:12px;color:var(--muted);font-weight:450;letter-spacing:0}
.goal-icon{font-size:22px}
.config-list{display:flex;flex-direction:column;gap:9px}
.config-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;background:var(--alt);border:1px solid var(--line);border-radius:10px}
.config-row label{display:flex;gap:10px;align-items:center;font-size:12px}
.config-row .icon-btn{min-height:32px;min-width:32px;background:var(--paper)}
.config-buttons{display:flex;gap:5px}
.stat-strip{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;background:var(--soft);border-radius:11px}
.stat-strip strong{font-size:21px;letter-spacing:-.7px;color:var(--blue)}

dialog{border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);max-width:min(530px,calc(100vw - 28px));width:100%;padding:26px;box-shadow:0 20px 100px #10182730;max-height:90vh;overflow:auto}
dialog::backdrop{background:#111c3750;backdrop-filter:blur(3px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}
.modal-head h2{font-size:20px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:12px 18px;background:var(--ink);color:var(--paper);border-radius:12px;box-shadow:0 5px 30px #0002;font-size:12px;z-index:50;max-width:calc(100vw - 28px);text-align:center}
.nav-caption{font-size:10px;color:var(--muted);padding:4px 12px 10px;text-transform:uppercase;letter-spacing:1px}
.empty{padding:35px 20px;text-align:center;color:var(--muted);font-size:12px}
.screen-reader-note{margin-bottom:15px}

.month-navigation{display:flex;align-items:center;gap:5px;min-width:0}
.month-navigation input[type=month]{max-width:163px;min-height:44px;font-size:12px;background:var(--paper);padding:8px}
.month-navigation .icon-btn{font-size:22px;min-width:38px;min-height:44px}
.finance-title{flex-wrap:wrap}
.finance-title .title-actions{min-width:0}
.finance-callout{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;flex-wrap:wrap}
.finance-callout>div{min-width:0;flex:1}
.finance-callout p{font-size:11px;color:var(--muted);line-height:1.8}
.finance-callout h2{margin-bottom:6px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0 13px}
.forecast-line{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:10px;color:var(--muted);line-height:1.8}
.forecast-line strong{font-weight:550}
.mini-btn{min-height:40px;padding:7px 10px;font-size:10px;white-space:normal}
.account-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.account-card-title h2{overflow-wrap:anywhere}
.account-card .record-actions{flex-wrap:wrap;gap:7px}
.record-row>div:first-child{min-width:0}
.record-row strong,.record-row p,.goal-card h2,.budget-top strong{overflow-wrap:anywhere}
.record-actions{flex-wrap:wrap}
.record-actions .money{white-space:normal;overflow-wrap:anywhere}
.finance-editor-actions{flex-wrap:wrap}
.finance-editor-actions .danger{margin-right:auto;color:var(--red);border-color:var(--red)}
.recurrence-preview{padding:13px;background:var(--soft);color:var(--blue);font-size:11px;line-height:1.8;border-radius:10px;margin-top:16px}
.finance-editor-actions .primary{white-space:normal}
.workspace-card strong{overflow-wrap:anywhere}
.account-card .balance{font-size:clamp(21px,2.3vw,28px)}
#finance-editor-fields .field>input[type=color]{padding:4px;max-width:100px}

@media(max-width:760px){.finance-title .title-actions{width:100%;justify-content:flex-start}
.finance-callout{align-items:flex-start}
.finance-callout>.btn{width:100%}
.budget-top{flex-wrap:wrap}
.record-row{flex-wrap:wrap}
.record-row .record-actions{margin-left:auto;justify-content:flex-end}
.account-grid .goal-amount{font-size:23px}
.account-grid .goal-amount span{display:block}
.section-title .badge{white-space:normal}
.finance-editor-actions{gap:7px}
.finance-editor-actions .primary{flex:1}
}

@media(max-width:420px){#finance-editor-dialog .row2{grid-template-columns:1fr;gap:0}
.finance-title .title-actions>.btn.primary{flex-basis:100%;width:100%}
.month-navigation{width:100%}
.month-navigation input[type=month]{max-width:none;flex:1}
.account-card .record-actions{justify-content:flex-start;margin:0}
.budget-top .mini-btn{width:100%;text-align:left}
.stat strong{font-size:18px}
.stat .money{white-space:normal;overflow-wrap:anywhere}
}


.investment-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:18px}
.investment-result-column{display:grid;gap:18px;align-content:start;min-width:0}
.investment-rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.investment-rates .field label{font-size:10px}
.investment-rates input{padding:10px 6px!important}
.investment-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0}
.investment-kpis>div{padding:12px;background:var(--alt);border-radius:10px;min-width:0}
.investment-kpis span{font-size:10px;color:var(--muted);line-height:1.8;display:block}
.investment-kpis strong{font-size:15px;display:block;margin-top:8px;white-space:normal;overflow-wrap:anywhere}
.investment-chart{width:100%;height:auto;margin:20px 0 12px}
.investment-chart text{fill:var(--muted);font-family:inherit;font-size:10px}
.investment-detail{margin-top:18px}
.investment-detail .mini-result{flex-wrap:wrap;line-height:1.8}
.history-bars{display:grid;gap:9px;margin:16px 0}
.history-bar-row{display:grid;grid-template-columns:40px minmax(0,1fr) 75px;gap:9px;align-items:center;font-size:10px;color:var(--muted)}
.history-bar-row strong{text-align:right;font-weight:600}
.history-bar-track{height:7px;background:var(--page);border-radius:5px;overflow:hidden}
.history-bar-track>span{display:block;height:100%;border-radius:5px}

@media(max-width:1180px){.investment-layout{grid-template-columns:1fr}
}

@media(max-width:760px){.investment-kpis{grid-template-columns:1fr}
.investment-kpis>div{display:flex;align-items:center;justify-content:space-between;gap:10px}
.investment-kpis strong{margin:0}
.investment-rates{grid-template-columns:1fr}
.investment-rates .field{margin-bottom:12px}
.investment-chart{margin-top:15px}
.investment-layout>.card{min-width:0}
.investment-result-column .card-title{flex-wrap:wrap}
}



/* Common PESEV theme variables and focused responsive Finances layouts. */
:root{--alt:var(--pesev-surface-alt,#f8faff);--soft:var(--pesev-soft,#edf2ff);--orange:var(--pesev-amber,#a7621d);--orange-soft:var(--pesev-amber-soft,#fff5e9)}

.shell{max-width:1248px;min-height:65vh;padding-top:30px}
.finance-side{min-width:0}
.finance-side .side-nav{position:sticky;top:18px}
.finance-title .lead{max-width:580px}

.side-nav button,.btn,.icon-btn,.config-row .icon-btn{min-height:44px}
.config-row .icon-btn{min-width:44px}
.table-wrap{max-width:100%;overscroll-behavior-x:contain}
.table-wrap:focus-visible{outline:3px solid var(--blue)}

.investment-summary{background:var(--soft);padding:18px;border-radius:12px;margin-top:18px}
.investment-summary strong{display:block;font-size:28px;letter-spacing:-.8px;margin:9px 0}
.investment-summary span{font-size:11px;color:var(--muted)}

.comparison-table{width:100%;border-collapse:collapse;font-size:11px}
.comparison-table th,.comparison-table td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.comparison-table th:first-child,.comparison-table td:first-child{text-align:left}
.comparison-table th{font-size:10px;color:var(--muted)}

.rates-advanced{border:1px solid var(--line);border-radius:12px;padding:15px;margin-top:20px}
.rates-advanced summary{cursor:pointer;font-size:12px;font-weight:650;line-height:1.6}
.rates-advanced .row2{margin-top:18px}
.rates-check{display:flex;align-items:center;gap:9px;font-size:12px;margin-top:12px;line-height:1.7}
.rates-check input{flex-shrink:0}
.rates-source{color:var(--blue);text-underline-offset:3px}

.empty-start{margin-bottom:20px;padding:22px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(135deg,var(--soft),var(--paper))}
.empty-start h2{font-size:21px;letter-spacing:-.7px}
.empty-start p{font-size:12px;color:var(--muted);line-height:1.8;margin:7px 0 15px}
.empty-start .title-actions{gap:8px}

@media(max-width:1080px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.analytics-grid{grid-template-columns:1fr}
.finance-layout{grid-template-columns:165px minmax(0,1fr);gap:20px}
.projection-grid{grid-template-columns:1fr}
}

@media(max-width:760px){.shell{padding:24px 18px 18px}
.finance-layout{grid-template-columns:minmax(0,1fr);gap:20px}
.workspace-card,.finance-side>.small,.nav-caption,.side-divider{display:none}
.side-nav{flex-direction:row;overflow-x:auto;max-width:100%;padding-bottom:6px;gap:5px}
.side-nav button{width:auto;white-space:nowrap;padding:10px 12px;flex-shrink:0}
.side-nav button .i{display:none}
.finance-title{align-items:flex-start;gap:16px}
.finance-title h1{font-size:28px}
.finance-title .title-actions{width:100%;justify-content:flex-start}
.page-title{flex-wrap:wrap}
.finance-callout{align-items:flex-start}
.finance-callout>.btn{width:100%}
.record-row{padding:16px;flex-wrap:wrap;gap:12px}
.record-actions{flex-wrap:wrap;gap:8px;max-width:100%;margin-left:auto}
.record-actions .btn{font-size:11px}
.account-grid{gap:12px}
.finance-editor-actions{flex-wrap:wrap}
.finance-editor-actions .primary{flex:1}
.card-title{flex-wrap:wrap}
.category-label{gap:10px}
.config-row{gap:8px}
.config-row label{min-width:0;overflow-wrap:anywhere}
.config-buttons{flex-shrink:0}
.filters input,.filters select{min-width:0!important;flex:1 1 100%}
.chart{height:auto}
.table-wrap{overflow-x:auto}
.transaction-label strong{white-space:normal;min-width:130px;max-width:240px}
.budget-top{flex-wrap:wrap}
.budget-top>div{min-width:0;overflow-wrap:anywhere}
.record-actions .money{white-space:normal}
.finance-side .side-nav{position:static}
.empty-start .btn{flex:1}
}

@media(max-width:420px){.shell{padding:22px 14px 16px}
.pad{padding:18px}
.stats{gap:9px}
.stat{padding:15px 12px}
.stat strong{font-size:18px;white-space:normal;overflow-wrap:anywhere}
.stat-top{font-size:10px}
.account-grid{grid-template-columns:1fr}
.row2,#finance-editor-dialog .row2{grid-template-columns:1fr;gap:0}
.finance-title .title-actions>.btn.primary{width:100%;flex-basis:100%}
.month-navigation{width:100%}
.month-navigation input[type=month]{flex:1;max-width:none}
.record-row .record-actions{justify-content:flex-end}
.section-title .badge{white-space:normal}
.account-card .record-actions{margin-left:0}
.budget-top .mini-btn{width:100%;white-space:normal;text-align:left}
.goal-amount span{display:block}
.modal-foot{flex-wrap:wrap}
.modal-foot .primary{flex:1}
.investment-summary strong{font-size:23px}
}


@media print{.pesev-site-header,.pesev-tools,.finance-side,.title-actions,.pesev-site-footer,.toast,dialog{display:none!important}
.shell{max-width:none;padding:0}
.finance-layout{display:block}
.card{break-inside:avoid;box-shadow:none}
body{background:white;color:#172741}
}

/* Shared financial result primitives. */
.section-caption{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin-bottom:13px}
.bar-legend{display:flex;gap:14px;font-size:10px;color:var(--muted);flex-wrap:wrap;margin:10px 0 4px}.bar-legend i{display:inline-block;height:7px;width:7px;border-radius:2px;margin-right:5px}
.mini-result{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.mini-result strong{font-size:12px;color:var(--ink);font-weight:650}
.big-money{font-size:clamp(27px,3vw,37px);line-height:1.2;letter-spacing:-1.4px;font-weight:750;display:block;margin:10px 0;overflow-wrap:anywhere}
.projection-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.finance-side .side-nav{position:static}
@media(max-width:1080px){.projection-grid{grid-template-columns:1fr}}
@media(max-width:760px){.mini-result{flex-wrap:wrap}}
.icon-btn{display:inline-grid;place-items:center;min-width:44px;min-height:44px;border-radius:11px;border:1px solid var(--line);background:var(--paper);color:var(--muted)}
.side-nav button[aria-current=page],.badge,.eyebrow,.rates-source,.stat-strip strong{color:var(--pesev-link,var(--blue))}

.category-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin:-5px 0 18px}.category-suggestions .btn{font-size:11px;min-height:44px;padding:7px 10px}.income-oneoff{margin-bottom:22px}.subscription-amount{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
@media(pointer:coarse),(max-width:650px){.month-navigation .icon-btn{min-width:44px}input#finance-month{font-size:16px;min-height:44px}}