:root{
  --ink:#172936;--muted:#52616b;--mint:#1dc8a8;--gold:#ffca45;
  --paper:#faf6e9;--white:#fffef9;--line:#c9d2cf;--red:#9e3c38;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.5 "Trebuchet MS",Arial,sans-serif;background-color:var(--paper);background-image:linear-gradient(rgba(23,41,54,.035) 1px,transparent 1px);background-size:100% 34px}
.wrap{max-width:1220px;margin:auto;padding:28px 22px 70px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);gap:22px;align-items:start}
.hero{grid-column:1/-1;background:var(--ink);border:3px solid var(--ink);border-bottom:10px solid var(--mint);box-shadow:8px 8px 0 var(--gold);color:#fff;padding:26px 30px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:start;margin-bottom:6px}
.brand{color:var(--gold);font-size:.9rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.brand-logo{grid-column:2;grid-row:1/5;width:94px;height:94px;object-fit:contain;align-self:start}
h1,h2,h3{line-height:1.12}
h1{font-family:Arial,sans-serif;font-size:clamp(2.2rem,5vw,4.2rem);font-weight:900;letter-spacing:-.055em;margin:5px 0 8px}
.hero p{margin:0;max-width:690px;color:#ecf7f1}
.tools{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:18px}
.tools label{color:#d4e7df}
.tools select{min-width:230px}
.privacy{grid-column:1/-1;font-size:.82rem;color:#d6e3dd;margin:14px 0 0}
.panel{min-width:0;background:var(--white);border:2px solid var(--ink);box-shadow:6px 6px 0 rgba(23,41,54,.22);padding:24px}
.income-panel{grid-column:1}.summary-panel{grid-column:2}.bills-panel,.comparison{grid-column:1/-1}
h2{font-size:clamp(1.45rem,2.3vw,1.9rem);margin:0 0 8px;font-weight:900;letter-spacing:-.035em}
h3{font-size:1.1rem}
.help{color:var(--muted);margin:0 0 17px}
.row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(110px,.7fr) minmax(145px,.8fr) auto;gap:10px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}.wide{min-width:0}
label{display:block;font-size:.88rem;font-weight:700;color:#344954;margin-bottom:5px}
input,select{width:100%;min-width:0;padding:11px 12px;border:2px solid #aebeb9;border-radius:5px;background:#fff;font:inherit;color:var(--ink)}
input:focus,select:focus{border-color:var(--mint)}
button{border:2px solid var(--ink);border-radius:5px;padding:10px 14px;min-height:44px;font:700 .9rem "Trebuchet MS",Arial,sans-serif;cursor:pointer;box-shadow:3px 3px 0 rgba(23,41,54,.25)}
button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(23,41,54,.35)}
.gold{background:var(--gold);color:var(--ink)}.soft{background:var(--mint);color:var(--ink)}.remove{background:#fff3ef;color:var(--red);border-color:#bb817b;box-shadow:none}
.category{border-top:2px solid var(--ink);padding:4px 0 0;margin-top:14px}
.category:first-child{margin-top:0}
.category summary{font-size:1.12rem;font-weight:900;cursor:pointer;padding:11px 8px;background:#e4f8f1}
.category summary::marker{color:#0c756a}.category .add{margin:13px 0 4px}
.summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:17px}
.metric{min-width:0;background:#eef7f4;padding:15px;border-left:5px solid var(--mint)}
.metric small{display:block;font-size:.83rem;color:#3b515a;line-height:1.3}
.metric strong{display:block;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.2;margin-top:8px;overflow-wrap:anywhere}
.balance{background:var(--gold);border-color:var(--ink)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;min-width:440px;border-collapse:collapse;margin-top:18px;font-variant-numeric:tabular-nums}
.table th,.table td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left}
.table th{font-size:.83rem;color:var(--muted)}
.right{text-align:right!important}
.note{margin-top:19px;background:#fff0bb;border-left:5px solid var(--ink);padding:15px;line-height:1.5}
.footer{font-size:.82rem;line-height:1.55;color:var(--muted);margin:18px 0 0}
.comparison>summary{font-size:1.45rem;font-weight:900;cursor:pointer}
.compare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.compare-card{border:2px solid var(--line);padding:14px;background:#fff}
.compare-card.active{border-color:var(--ink);background:#e4f8f1;box-shadow:4px 4px 0 var(--gold)}
.compare-card h3{font-size:1.05rem;margin:0 0 10px}.compare-card dt{font-size:.83rem;color:var(--muted);margin-top:10px}.compare-card dd{margin:2px 0 0;line-height:1.35}.compare-card small{font-size:.8rem;font-weight:400}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:960px){.wrap{grid-template-columns:1fr}.income-panel,.summary-panel,.bills-panel,.comparison{grid-column:1}.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wrap{padding:15px 12px 50px;gap:16px}.hero{padding:18px 16px 16px;box-shadow:5px 5px 0 var(--gold)}.brand-logo{width:66px;height:66px}.brand{font-size:.72rem;max-width:210px}h1{font-size:2.25rem;line-height:1}.hero p{font-size:.95rem}.tools{grid-column:1/-1}.tools>div,.tools select{width:100%}.privacy{font-size:.78rem}.panel{padding:17px;box-shadow:4px 4px 0 rgba(23,41,54,.22)}.row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.row .wide,.row .remove{grid-column:1/-1}.row .remove{justify-self:start}.compare-grid{grid-template-columns:1fr}}
@media print{body{background:white}.wrap{display:block;padding:0}.hero{color:var(--ink);background:white;box-shadow:none;border:0;border-bottom:2px solid var(--ink)}.hero p,.privacy{color:var(--ink)}.panel{box-shadow:none;border:1px solid #999;margin:16px 0;break-inside:avoid}.tools,.remove,.add{display:none!important}.comparison{display:none}}