/* Unit converter - category picker, a value + from/to row with a swap button,
   and a big live result. Reuses base .field / .select / .btn-outline; colors come
   from theme tokens only. */

.uc-field { display: flex; flex-direction: column; gap: 6px; }
.uc-label { font-size: 14px; color: var(--muted); font-weight: 600; }

.uc-category { max-width: 280px; margin-bottom: 20px; }

.uc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto minmax(0, 1.4fr);
    align-items: end;
    gap: 12px;
}
.uc-value, .uc-row .select { width: 100%; box-sizing: border-box; }

.uc-swap {
    height: 42px; width: 42px; padding: 0; display: inline-flex;
    align-items: center; justify-content: center; flex: none;
}
.uc-swap .icon { width: 1.1em; height: 1.1em; }

.uc-result {
    margin: 24px 0 8px; font-size: 28px; font-weight: 800; line-height: 1.2;
    color: var(--accent-strong); min-height: 1.2em; word-break: break-word;
}

@media (max-width: 640px) {
    .uc-row { grid-template-columns: 1fr 1fr; }
    .uc-swap { grid-column: 1 / -1; width: 100%; }
    .uc-result { font-size: 24px; }
}