.budget-shell { width: min(980px, 94vw); }
.budget-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, .95fr); gap: 1rem; align-items: start; }
.budget-card { border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(160deg, #fff 0%, #fefcf8 100%); box-shadow: var(--shadow); padding: 1rem; }
.budget-card h2 { margin: 0 0 .8rem; font-size: 1.08rem; }
.budget-field { margin-bottom: .9rem; }
.budget-field label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .9rem; }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .35rem; }
.pct-pill { border: 1px solid #b8ddcf; background: #e8f8f2; color: #1e5f4c; border-radius: 999px; padding: .16rem .56rem; font-size: .82rem; font-family: "IBM Plex Mono", monospace; }
.input-prefix-wrap { position: relative; }
.input-prefix { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #5f574e; pointer-events: none; }
.budget-field input[type="number"], .budget-field input[type="range"] { width: 100%; }
.budget-field input[type="number"] { border-radius: 10px; border: 1px solid var(--border); background: #fdfcf8; color: #1f1f1f; font-family: "IBM Plex Mono", monospace; font-size: .9rem; padding: .58rem .65rem; }
.input-prefix-wrap input[type="number"] { padding-left: 1.5rem; }
.total-pct-status { margin: .35rem 0 0; padding: .55rem .62rem; border: 1px solid #e5ddd1; border-radius: 10px; background: #fff; color: #4f483f; font-size: .9rem; }
.total-pct-status.ok { border-color: #b6d8ca; background: #eefaf5; color: #145640; }
.total-pct-status.warn { border-color: #e7c491; background: #fff8ef; color: #7c4f12; }
.result-grid { display: grid; gap: .62rem; }
.result-line { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .6rem .65rem; border: 1px solid #e5ddd1; border-radius: 12px; background: #fff; }
.result-line span { color: #5f574e; font-size: .92rem; }
.result-line strong { font-family: "IBM Plex Mono", monospace; font-size: 1rem; }
@media (max-width: 860px) { .budget-layout { grid-template-columns: 1fr; } }