.basic-tool-workspace[data-tool-route="palette"] .palette-controls .field {
  margin-bottom: 0;
}

.basic-tool-workspace[data-tool-route="palette"] .palette-hint {
  margin-top: var(--space-2xs);
}

.basic-tool-workspace[data-tool-route="palette"] .palette-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin: var(--space-sm) 0 0;
}

.basic-tool-workspace[data-tool-route="palette"] .palette-swatch {
  min-width: 0;
  min-height: 48px;
  padding: var(--space-2xs) var(--space-xs);
  overflow: hidden;
  appearance: none;
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-5);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.basic-tool-workspace[data-tool-route="palette"] .palette-swatch:hover {
  transform: translateY(-1px);
}

.basic-tool-workspace[data-tool-route="palette"] .palette-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--component-focus-ring);
}

.basic-tool-workspace[data-tool-route="palette"] .palette-actions {
  margin-top: var(--space-sm);
}

.tool-page--palette .tool-effect-card__media > .tool-media-asset {
  object-fit: cover;
}

@media (max-width: 479px) {
  .basic-tool-workspace[data-tool-route="palette"] .palette-swatches {
    gap: var(--space-2xs);
  }

  .basic-tool-workspace[data-tool-route="palette"] .palette-swatch {
    min-height: 44px;
    padding-inline: var(--space-2xs);
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .basic-tool-workspace[data-tool-route="palette"] .palette-swatch {
    transition: none;
  }
}