.card { margin: 14px 0; }
.card h2 { margin-top: 0; font-size: 1.15rem; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid label { display: block; }
.grid input[type=text] { width: 100%; }
.grid input[type=range] { width: 100%; margin-top: 6px; }
.results { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 14px 0; }
.stat { padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.stat b { display: block; font-size: 1.4rem; }
.stat span { color: var(--muted); font-size: .9rem; }
.err { color: #d9534f; min-height: 1.2em; }
.note { color: var(--muted); font-size: .92rem; margin: 4px 0; }
#chart { width: 100%; height: 280px; display: block; margin-top: 8px; }
table.t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.t th, table.t td { text-align: right; padding: 6px 8px; border-bottom: 1px solid rgba(128,128,128,.3); }
table.t th:first-child, table.t td:first-child { text-align: left; }
.scroll { max-height: 360px; overflow: auto; }
.disclaimer { font-size: .88rem; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 10px; margin: 14px 0; }
.quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }