:root { --ink:#173b32; --green:#1b5d4c; --mint:#bde6d0; --cream:#f8f5ee; --paper:#fffdfa; --coral:#ee8068; --yellow:#e9b850; --slate:#6b7b75; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--cream); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font:inherit; } button { cursor:pointer; }
.app-shell { width:min(100%, 720px); margin:auto; padding:calc(20px + env(safe-area-inset-top)) 18px calc(34px + env(safe-area-inset-bottom)); }
.topbar, .card-head, .category-title, .budget-item, .overview, .hero-card, .dialog-head { display:flex; align-items:center; }
.topbar { justify-content:space-between; gap:12px; margin:0 2px 22px; } h1,h2,h3,p { margin:0; } h1 { font-family:Georgia, serif; font-size:29px; letter-spacing:-.7px; } h2 { font-size:22px; letter-spacing:-.5px; } h3 { font-size:17px; }.header-actions { display:flex; align-items:center; gap:8px; }.month-picker { display:grid; gap:2px; color:var(--slate); font-size:9px; font-weight:800; letter-spacing:.35px; text-transform:uppercase; }.month-picker input { width:112px; padding:5px 7px; border:1px solid #d4dcd6; border-radius:8px; color:var(--ink); background:var(--paper); font-size:12px; font-weight:700; }
.eyebrow { color:var(--green); font-weight:800; letter-spacing:1.15px; font-size:10px; margin-bottom:5px; }.icon-button { width:39px; height:39px; border:1px solid #d4dcd6; background:transparent; color:var(--ink); border-radius:50%; font-size:25px; line-height:1; }
.hero-card { min-height:190px; justify-content:space-between; overflow:hidden; padding:26px; border-radius:24px; color:#fff; background:var(--ink); box-shadow:0 12px 30px #12352d22; }.hero-card .eyebrow { color:var(--mint); }.salary-input { display:flex; align-items:baseline; gap:5px; font-family:Georgia, serif; font-size:22px; }.salary-input input { width:185px; padding:0; border:0; outline:0; color:#fff; background:transparent; font:inherit; font-size:42px; font-weight:700; letter-spacing:-1px; }.quiet { margin-top:7px; color:#d4e1da; font-size:13px; }
.progress-ring { --progress:0deg; display:grid; place-items:center; flex:0 0 auto; width:112px; aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--mint) var(--progress), #ffffff28 0); }.ring-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; width:88px; aspect-ratio:1; border-radius:50%; background:var(--ink); }.ring-inner strong { font-size:22px; }.ring-inner span { color:var(--mint); font-size:11px; }
.overview { justify-content:space-between; gap:12px; margin:13px 0 35px; padding:15px 18px; background:var(--paper); border:1px solid #ebe6db; border-radius:16px; }.overview div { min-width:0; }.overview span { display:block; color:var(--slate); font-size:11px; }.overview strong { display:block; margin-top:3px; color:var(--ink); font-size:14px; white-space:nowrap; }
.save-note { margin:-26px 3px 30px; color:var(--slate); font-size:11px; }
.intro { margin:0 3px 15px; }.intro p:last-child { margin-top:7px; color:var(--slate); font-size:13px; line-height:1.45; }.budget-groups { display:grid; gap:14px; }.budget-card { padding:18px; border:1px solid #e5e2d9; border-radius:18px; background:var(--paper); }.card-head { justify-content:space-between; gap:8px; }.category-title { gap:11px; }.category-dot { width:12px; height:12px; background:var(--dot); border-radius:50%; }.category-title p { margin-top:2px; color:var(--slate); font-size:12px; }.category-total { font-size:15px; }.bar { height:6px; margin:15px 0 5px; overflow:hidden; border-radius:10px; background:#e7eee9; }.bar span { display:block; height:100%; width:var(--ratio); border-radius:inherit; background:var(--dot); }
.item-list { list-style:none; padding:0; margin:6px 0 0; }.budget-item { min-height:49px; gap:10px; border-bottom:1px solid #edf0ed; }.budget-item:last-child { border-bottom:0; }.check-wrap { position:relative; display:grid; place-items:center; flex:none; cursor:pointer; }.check-wrap input { position:absolute; opacity:0; }.custom-check { display:grid; place-items:center; width:21px; height:21px; border:1.5px solid #b4c2ba; border-radius:7px; color:transparent; font-size:13px; font-weight:900; }.check-wrap input:checked + .custom-check { background:var(--green); border-color:var(--green); color:#fff; }.item-name { min-width:0; flex:1; }.item-name input { width:100%; padding:5px 0; border:0; outline:0; background:transparent; color:var(--ink); font-size:14px; }.budget-item:has(input[type="checkbox"]:checked) .item-name input { color:#87958e; text-decoration:line-through; }.amount-input { display:flex; align-items:center; gap:2px; color:var(--slate); font-size:11px; }.amount-input input { width:68px; padding:4px 0; border:0; outline:0; background:transparent; text-align:right; color:var(--ink); font-size:13px; font-weight:700; }.remove-item { display:none; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:#f2e8e3; color:#a34d3c; font-size:18px; line-height:1; }.budget-item:hover .remove-item, .budget-item:focus-within .remove-item { display:block; }
.add-button { width:100%; margin-top:18px; min-height:52px; border:1.5px dashed #aebeb5; border-radius:15px; background:transparent; color:var(--green); font-weight:750; }.add-button span { margin-right:6px; font-size:19px; vertical-align:-1px; }
dialog { width:min(calc(100% - 32px), 430px); border:0; border-radius:22px; padding:0; box-shadow:0 20px 70px #102b2444; } dialog::backdrop { background:#0c292099; } dialog form { display:grid; gap:16px; padding:23px; }.dialog-head { justify-content:space-between; }.close-dialog { width:32px; height:32px; border:0; border-radius:50%; color:var(--ink); background:#edf1ed; font-size:22px; }.dialog-head h2 { font-family:Georgia,serif; } dialog label { display:grid; gap:6px; color:var(--slate); font-size:12px; font-weight:700; } dialog input, dialog select { width:100%; padding:12px; border:1px solid #d8dfda; border-radius:10px; color:var(--ink); background:#fff; outline-color:var(--green); }.save-button { min-height:47px; border:0; border-radius:12px; color:#fff; background:var(--green); font-weight:800; }
@media (max-width:520px) { .topbar { align-items:flex-start; }.header-actions { flex-direction:column; align-items:flex-end; gap:5px; }.month-picker { text-align:right; }.hero-card { padding:23px 20px; }.salary-input input { width:148px; font-size:35px; }.progress-ring { width:94px; }.ring-inner { width:74px; }.overview { padding:14px; gap:8px; }.overview strong { font-size:12px; }.remove-item { display:block; } }