.unicode-variants-page .tool-body {
  align-items: stretch;
}

.unicode-variants-page textarea {
  min-height: 120px;
  resize: vertical;
}

.unicode-variant-results {
  display: grid;
  gap: var(--space-sm);
}

.unicode-variant-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-md);
  border: var(--surface-card-border);
  border-radius: var(--surface-card-radius);
  background: var(--surface-card-bg);
}

.unicode-variant-meta h3 {
  margin-bottom: 2px;
  font-size: 0.98rem;
}

.unicode-variant-meta p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.unicode-variant-preview {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-sm);
  border: var(--surface-card-border);
  border-radius: var(--surface-panel-radius);
  background: var(--bg);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.unicode-variants-page .actions {
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .unicode-variants-page .tool-wrap {
    width: calc(100% - (var(--space-md) * 2)) !important;
    max-width: calc(100% - (var(--space-md) * 2)) !important;
    padding-inline: 0 !important;
  }

  .unicode-variants-page .tool {
    padding-inline: var(--space-md);
  }

  .unicode-variant-card {
    grid-template-columns: 1fr;
  }

  .unicode-variant-card .btn {
    width: 100%;
  }
}