/* MeasureMake */
.calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }
.calc .panel { margin: 0; }
.calc h2 { margin-top: 0; font-size: 1.3rem; }
.unit-row { display: flex; gap: 8px; }
.unit-row input { flex: 1; min-width: 0; }
.unit-row select { width: auto; }
.results { position: sticky; top: 12px; }
.results .result { margin-top: 0; }
.results dl { display: grid; grid-template-columns: auto auto; gap: 6px 16px; margin: 8px 0 0; }
.results dt { color: var(--muted); }
.results dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.formula { font: .9rem var(--mono); background: #f1f4f2; border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; margin-top: 12px; color: #334; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs button { font: 600 .95rem var(--sans); padding: 8px 14px; border-radius: 99px; border: 1px solid var(--rule); background: var(--surface); cursor: pointer; color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.oil-row { display: grid; grid-template-columns: 1fr 110px 36px; gap: 8px; margin-bottom: 8px; }
.danger { background: #fdecec; border-left: 4px solid #c92a2a; padding: 10px 14px; border-radius: 6px; }
.diagram { width: 100%; max-width: 340px; display: block; margin: 10px auto; }