.budget-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:8px 0 30px}.budget-eyebrow{font-size:10px;letter-spacing:.18em;color:#8b815f}.budget-heading h2{font:36px Georgia,serif;margin:8px 0}.budget-heading p{color:#7a8070;margin:0}.budget-overview{display:grid;grid-template-columns:1.7fr 1fr 180px;gap:30px;background:#edeede;border:1px solid #dfdfc9;border-radius:18px;padding:32px;margin-bottom:36px;align-items:center}.budget-main{background:#173e2e;color:#f9f4df;border-radius:13px;padding:30px}.budget-main>strong{display:block;font:clamp(26px,3vw,42px) Georgia,serif;margin:18px 0 24px}.budget-main>span,.budget-main small{font-size:12px;color:#cbd4bb}.budget-strip{display:flex;gap:3px;height:10px;border-radius:5px;overflow:hidden;margin-bottom:12px}.budget-side{display:grid;gap:9px}.budget-side>span{color:#737b66;font-size:12px}.budget-side>strong{font:25px Georgia,serif;margin-bottom:14px}.budget-ring{width:164px;height:164px;border-radius:50%;background:conic-gradient(#a58c4c var(--ratio),#dbdec9 0);padding:10px}.budget-ring>div{background:#edeede;border-radius:50%;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.budget-ring strong{font:32px Georgia,serif}.budget-ring span{font-size:10px;color:#6c765e}.budget-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.budget-toolbar h3{font:24px Georgia,serif;margin:0}.budget-toolbar small{font:12px 'Segoe UI';padding:5px 9px;background:#e9eadc;border-radius:20px}.budget-toolbar input{max-width:280px}.budget-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.budget-tile{text-align:left;padding:23px;background:#fffdf6;color:#243e2c;border:1px solid #dedfce;border-radius:13px;transition:transform .15s,box-shadow .15s;min-width:0}.budget-tile:hover{transform:translateY(-3px);box-shadow:0 12px 22px #24402b0c;border-color:#a9b195}.budget-tile-top{display:flex;align-items:center;gap:12px;font-size:10px;color:#80856c}.budget-tile-top>b{margin-left:auto;font-size:20px;color:#697c52}.budget-index{padding:8px;background:#eeefdf;border-radius:9px;font-size:14px;color:#7e713f}.budget-tile h3{font-size:14px;line-height:1.5;min-height:44px;margin:22px 0 12px;overflow-wrap:anywhere}.budget-amount{font:27px Georgia,serif;display:block;margin:16px 0 24px}.budget-meter{height:5px;background:#eeeee3;border-radius:4px;overflow:hidden}.budget-meter span{display:block;height:100%;background:#809266}.budget-tile-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:10px;color:#80866f}.budget-tile-bottom b{display:block;margin-top:5px;font-size:12px;color:#354e36}.budget-form{margin-top:24px}.budget-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(520px,100%);max-width:100%;height:100%;max-height:100%;padding:36px;background:#faf8ef;border:0;border-left:1px solid #d4d8c2;color:#264332;overflow:auto}.budget-drawer::backdrop{background:#112d2466}.budget-drawer>[data-close]{float:right}.budget-drawer>small{letter-spacing:.12em;font-size:10px;color:#8b7e52}.budget-drawer h2{font:28px Georgia,serif;margin-top:30px;overflow-wrap:anywhere}.budget-detail-total{padding:24px;background:#eaeedc;font:32px Georgia,serif;border-radius:12px;margin:26px 0}.budget-detail-total small{display:block;font:11px 'Segoe UI';margin-top:10px}.budget-record{display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid #ddd}.budget-record span{overflow-wrap:anywhere}.budget-record b{white-space:nowrap}.budget-drawer hr{border:0;border-top:1px solid #ddd;margin:25px 0}@media(max-width:1200px){.budget-overview{grid-template-columns:1.5fr 1fr}.budget-ring{display:none}.budget-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.budget-heading{align-items:flex-start;flex-direction:column}.budget-heading h2{font-size:30px}.budget-overview{grid-template-columns:1fr;padding:15px;gap:20px}.budget-main{padding:22px}.budget-side{grid-template-columns:1fr 1fr}.budget-side>span{grid-column:1}.budget-side>strong{font-size:20px}.budget-cards{grid-template-columns:1fr}.budget-toolbar{flex-direction:column;align-items:stretch}.budget-toolbar input{max-width:none}.budget-drawer{padding:22px}}
