:root { --ink:#14211d; --green:#173f35; --mint:#dce9df; --cream:#f6f2e9; --red:#a43c32; --line:#d7d8d1; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font:15px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif; padding-bottom:100px; }
header,main { width:min(920px,100%); margin:auto; }
header { padding:34px 22px 22px; display:flex; align-items:end; justify-content:space-between; gap:16px; }
h1,h2,p { margin:0; } h1 { font:700 clamp(26px,5vw,38px)/1.1 ui-serif,Georgia,serif; } h2 { font:700 24px/1.15 ui-serif,Georgia,serif; }
.eyebrow { display:block; margin-bottom:7px; color:#547068; font-size:11px; font-weight:800; letter-spacing:.14em; }
input,select,button { font:inherit; } header input { border:1px solid var(--line); border-radius:10px; padding:9px; background:#fff; color:var(--ink); }
main { padding:0 22px; }
.totals { display:grid; grid-template-columns:repeat(3,1fr); margin:8px 0 34px; background:var(--green); color:white; border-radius:18px; overflow:hidden; box-shadow:0 9px 26px #173f3520; }
.totals div { padding:20px; border-right:1px solid #ffffff24; } .totals div:last-child{border:0}.totals span{display:block;color:#c9dbd3;font-size:12px;margin-bottom:5px}.totals strong{font-size:22px}
.section-title { display:flex; align-items:end; justify-content:space-between; margin:0 0 13px; }.section-title small{color:#69756f}
.allocation-card{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #e3e1da;border-radius:14px;margin-bottom:34px;overflow:hidden}.allocation-card div{padding:16px;border-right:1px solid #e8e6df}.allocation-card div:last-child{border:0}.allocation-card span,.allocation-card strong{display:block}.allocation-card span{font-size:12px;color:#69756f;margin-bottom:5px}.allocation-card strong{font-size:18px}.allocation-result{background:var(--mint)}.edit-hint{color:#6a7771;font-size:12px;margin:-5px 0 11px}
.auth-card{width:min(460px,100%);margin:45px auto;background:#fff;border:1px solid #e3e1da;border-radius:18px;padding:24px;box-shadow:0 9px 26px #173f3512}.auth-card p{color:#69756f;margin:8px 0 18px}.secondary{border:1px solid var(--green);background:transparent;color:var(--green);font-weight:750}
.text-button{border:0;background:transparent;color:var(--green);font-size:13px;font-weight:750;padding:7px 0}
.categories { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:36px; }
.savings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.saving-card{background:#fff;border:1px solid #e3e1da;border-radius:14px;padding:16px}.saving-card span,.saving-card small{display:block;color:#69756f;font-size:12px}.saving-card strong{display:block;font-size:21px;margin:5px 0}.saving-card.accent{background:var(--mint);border-color:#c7dbce}.saving-note{font-size:13px;color:#65726c;margin:10px 2px 34px}.savings-grid+.saving-note.hidden{display:block!important;visibility:hidden;margin-bottom:18px}
.category { background:#fff; border:1px solid #e3e1da; border-radius:14px; padding:15px; cursor:pointer; }.category:hover,.category:focus{border-color:#8aa99d;outline:none}.category-top{display:flex;justify-content:space-between;gap:8px}.category h3{font-size:15px;margin:0;text-transform:capitalize}.available{font-weight:800}.negative{color:var(--red)!important}.category p{font-size:12px;color:#738079;margin-top:5px}.bar{height:6px;background:#e8ece8;border-radius:9px;margin-top:12px;overflow:hidden}.bar i{display:block;height:100%;background:#5b8f7d;border-radius:9px}.bar i.over{background:var(--red)}
.transactions { background:#fff; border:1px solid #e3e1da; border-radius:14px; overflow:hidden; }.transaction{width:100%;border:0;border-bottom:1px solid #ecebe6;background:#fff;padding:14px;display:flex;text-align:left;align-items:center;gap:12px;color:var(--ink)}.transaction:last-child{border:0}.transaction .meta{flex:1;min-width:0}.transaction strong,.transaction small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transaction small{color:#78817d;margin-top:2px}.transaction .sum{font-weight:750}.empty{padding:24px;color:#69756f;text-align:center}
.fab { position:fixed; z-index:5; right:max(20px,calc((100vw - 920px)/2 + 22px)); bottom:max(20px,env(safe-area-inset-bottom)); border:0; border-radius:999px; padding:15px 20px; background:var(--green); color:white; font-weight:750; box-shadow:0 8px 25px #14211d55 }.fab span{font-size:20px;vertical-align:-1px}
dialog { width:min(500px,calc(100% - 24px)); border:0; border-radius:20px; padding:0; background:var(--cream); box-shadow:0 24px 80px #0007; }dialog::backdrop{background:#0b1b16aa}form{padding:22px}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.icon{border:0;background:transparent;font-size:27px;color:#64716b}label{display:block;font-size:12px;font-weight:750;color:#52615b;margin-top:13px}label input,label select{width:100%;display:block;margin-top:6px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px;color:var(--ink)}.amount-field{position:relative}.amount-field span{position:absolute;left:12px;top:12px;font-size:22px}.amount-field input{padding-left:30px;font-size:22px;font-weight:750}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.form-actions button{padding:12px 16px;border-radius:10px}.primary{border:0;background:var(--green);color:#fff;font-weight:750}.danger{border:1px solid #d8b5b1;background:transparent;color:var(--red);margin-right:auto}.hidden{display:none!important}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#14211d;color:#fff;padding:10px 15px;border-radius:9px;opacity:0;pointer-events:none;transition:.2s;z-index:10}#toast.show{opacity:1;transform:translate(-50%,0)}
.category-edit-name{font:700 22px/1.2 ui-serif,Georgia,serif;text-transform:capitalize}
@media(max-width:600px){header{padding-top:24px;align-items:start;flex-direction:column}.totals div{padding:15px 12px}.totals strong{font-size:17px}.allocation-card{grid-template-columns:repeat(2,1fr)}.allocation-card div:nth-child(2){border-right:0}.categories{grid-template-columns:1fr}.savings-grid{grid-template-columns:1fr}.section-title{align-items:start;flex-direction:column;gap:5px}.fab{left:22px;right:22px}.transaction{padding:13px 12px}}