:root{--ink:#102c46;--blue:#1f567d;--paper:#f8f7f2;--line:#d9dfda;--orange:#e96f3b;--mint:#a9d2c4;--mono:'DM Mono',monospace;--sans:'Manrope',sans-serif;--serif:'Playfair Display',serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}.page-shell{max-width:1050px;margin:0 auto;padding:38px clamp(22px,6vw,84px) 70px}.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:19px;letter-spacing:-.8px;font-weight:800}.brand span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #517586;border-radius:50%;font:italic 20px var(--serif)}header{padding:68px 0 38px;border-bottom:1px solid var(--line)}.back{font:500 11px var(--mono);letter-spacing:.04em;color:#4b7178;text-decoration:none}.eyebrow{font:500 10px var(--mono);letter-spacing:.13em;color:#718991;margin:0 0 10px}header .eyebrow{margin-top:40px}h1{font:600 clamp(38px,5.7vw,64px)/.96 var(--serif);letter-spacing:-.06em;margin:0}h1 em{color:var(--blue)}.intro{max-width:480px;color:#60757a;font-size:14px;line-height:1.7;margin:22px 0 0}.summary{display:grid;grid-template-columns:repeat(3,1fr);margin:34px 0;border:1px solid var(--line);border-radius:7px;background:#fff;overflow:hidden}.summary article{padding:22px 24px;border-left:1px solid var(--line)}.summary article:first-child{border-left:0}.summary span{display:block;font:500 10px var(--mono);letter-spacing:.09em;color:#718991;margin-bottom:14px}.summary strong{font-size:24px;letter-spacing:-1px}.budget-panel{background:#e4efeb;border:1px solid #d1dfda;padding:28px;border-radius:7px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:23px}.panel-head h2{margin:0;font-size:23px;letter-spacing:-.9px}.panel-head #status{font-size:11px;color:#52766d;margin:5px 0 0}.budget-list{display:grid;gap:11px}.budget-row{background:#f8fbf9;border:1px solid #d6e2de;padding:16px 17px;border-radius:5px;display:grid;grid-template-columns:minmax(160px,1fr) minmax(180px,1.4fr) 155px;gap:20px;align-items:center}.category{display:flex;align-items:center;gap:10px}.category-icon{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font:15px var(--mono);background:color-mix(in srgb,var(--category) 16%,white);color:var(--category)}.category strong{font-size:13px}.category small{display:block;color:#6d8182;font-size:10px;margin-top:2px}.track{height:7px;border-radius:99px;background:#ccddd7;overflow:hidden}.track span{display:block;height:100%;border-radius:99px;background:var(--category);width:0;transition:width .3s ease}.budget-value{display:flex;align-items:center;justify-content:end;gap:7px}.budget-value input{width:92px;height:34px;border:1px solid #bdccc7;border-radius:4px;padding:0 8px;background:white;font:500 12px var(--mono);color:var(--ink);text-align:right}.budget-value input:focus{outline:0;border-color:#397260;box-shadow:0 0 0 3px #dbece6}.budget-value button{height:34px;border:0;border-radius:4px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;padding:0 10px;cursor:pointer}.budget-value button:disabled{opacity:.55;cursor:wait}.hint{margin:28px 0 0;max-width:430px;border-left:2px solid #efb459;padding:8px 0 8px 17px}.hint span{color:#e08242;font-size:16px}.hint strong{display:block;font-size:14px;margin:5px 0}.hint p{font-size:12px;line-height:1.65;color:#677d81;margin:0}@media(max-width:760px){.summary{grid-template-columns:1fr}.summary article{border-left:0;border-top:1px solid var(--line)}.summary article:first-child{border-top:0}.budget-row{grid-template-columns:1fr}.budget-value{justify-content:start}.panel-head{display:block}.panel-head #status{margin-top:12px}}
.budget-row{grid-template-columns:minmax(160px,1fr) minmax(180px,1.4fr) 190px;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.budget-row.saved{border-color:#72a99b;background:#f1f8f5;box-shadow:0 0 0 3px #cce2db}
.budget-row.save-error{border-color:#c8786b;background:#fff8f6}
.budget-row.saved .budget-value button{background:#397260}
.budget-row.save-error .budget-value button{background:#a84738}
@media(prefers-reduced-motion:reduce){.budget-row{transition:none}}
@media(max-width:760px){.budget-row{grid-template-columns:1fr}}
.budget-name-note{margin:-9px 0 20px;color:#60767d;font-size:11px;line-height:1.55}
.budget-name-note a{color:#245f68;font-weight:800;text-underline-offset:3px}