.lead { color: var(--text-2); max-width: 62ch; line-height: 1.55; }
.uc-cat { max-width: 220px; margin: 16px 0; }

.uc-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; }
.uc-row .field { gap: 6px; }
.uc-result {
  display: block; min-height: 40px; padding: 8px 11px;
  border: 1px solid var(--line-2); border-radius: var(--radius-in);
  background: var(--surface-2); font-family: var(--mono); font-size: .95rem;
  overflow-x: auto; white-space: nowrap;
}
.uc-swap { align-self: center; margin-bottom: 4px; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 1.1rem; color: var(--text-2); }
.uc-swap:hover { color: var(--text); border-color: var(--line-3); }

.uc-h { margin: 26px 0 12px; font-size: 1rem; }
.uc-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.uc-cell { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--surface); display: grid; gap: 2px; }
.uc-cell.from { border-color: var(--accent); background: var(--accent-bg); }
.uc-cell span { font-size: .72rem; color: var(--text-2); font-weight: 700; }
.uc-cell code { font-family: var(--mono); font-size: .84rem; cursor: pointer; word-break: break-all; }

@media (max-width: 560px) {
  .uc-row { grid-template-columns: 1fr; }
  .uc-swap { justify-self: center; transform: rotate(90deg); }
}