section{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:16px 0}
.fields{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0}
label{display:flex;flex-direction:column;gap:5px;max-width:100%;font-weight:500}
input,select,button{font:inherit;border:1px solid var(--line);border-radius:6px;padding:8px;background:var(--surface);color:var(--fg);max-width:100%}
input[type=number]{width:180px}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
.toggle{display:flex;flex-direction:row;align-items:center}
.muted{color:var(--muted);font-size:13px}
[data-error]{color:var(--bad)}
[data-result]{white-space:pre-line;line-height:1.9;font-variant-numeric:tabular-nums}
.total{border-color:var(--accent)}
#total-cost{font-size:22px;font-weight:600;color:var(--accent)}
.cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:14px 0}
.cost-grid label{font-size:13px}
details{margin-top:12px}summary{cursor:pointer}
button{cursor:pointer}button:hover{border-color:var(--accent)}
@media(max-width:500px){.fields>label{width:100%}input[type=number]{width:100%}section{padding:12px}}