.swatch {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color_front) 20%, transparent);
  background: var(--swatch-bg);
  color: var(--swatch-fg);
  text-align: left;
  cursor: pointer;
  min-height: 110px;
  transition: transform 0.15s, box-shadow 0.2s;
}

.swatch:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--color_gloomy);
}

.swatch__label {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.swatch__hex {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
}

.swatch__meta {
  font-size: 0.7rem;
  opacity: 0.85;
  word-break: break-all;
}

.badge {
  display: inline-block;
  width: fit-content;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge--aaa {
  background: color-mix(in srgb, #3dd68c 25%, var(--color_back));
  color: #3dd68c;
}

.badge--aa {
  background: color-mix(in srgb, #6eb5ff 25%, var(--color_back));
  color: #6eb5ff;
}

.badge--aalarge {
  background: color-mix(in srgb, #e8c468 25%, var(--color_back));
  color: #e8c468;
}

.badge--fail {
  background: color-mix(in srgb, #f07178 25%, var(--color_back));
  color: #f07178;
}

#preview-panel {
  --pv-back: var(--color_back);
  --pv-mid: var(--color_mid);
  --pv-front: var(--color_front);
  --pv-accent: var(--color_accent);
  --pv-glow: var(--color_glow);
  --pv-text: var(--color_text);
  --pv-gloomy: var(--color_gloomy);
  display: grid;
  gap: var(--space-md);
}

.preview-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--pv-mid);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--pv-front) 25%, transparent);
}

.preview-nav__brand {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--pv-accent);
}

.preview-nav__links {
  display: flex;
  gap: var(--space-md);
  font-size: 0.8rem;
  opacity: 0.8;
}

.preview-card {
  padding: var(--space-md);
  background: var(--pv-mid);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--pv-front) 20%, transparent);
  box-shadow: 0 4px 24px var(--pv-gloomy);
}

.preview-card h3 {
  font-family: var(--font-display);
  color: var(--pv-text);
  margin-bottom: var(--space-xs);
}

.preview-card p {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: var(--space-md);
}

.preview-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.preview-btn {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: default;
  font-size: 0.85rem;
  font-weight: 500;
}

.preview-btn--primary {
  background: var(--pv-accent);
  color: var(--pv-back);
}

.preview-btn--ghost {
  background: transparent;
  color: var(--pv-text);
  border: 1px solid color-mix(in srgb, var(--pv-front) 40%, transparent);
}

.preview-form {
  display: grid;
  gap: var(--space-xs);
}

.preview-form label {
  font-size: 0.8rem;
}

.preview-form input {
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--pv-front) 35%, transparent);
  background: var(--pv-back);
  color: var(--pv-text);
}

.preview-alert {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--pv-glow) 20%, var(--pv-mid));
  border-left: 3px solid var(--pv-glow);
  font-size: 0.85rem;
}

.preview-alert__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pv-glow);
  box-shadow: 0 0 8px var(--pv-gloomy);
}