.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.sm {
  padding: 0.1rem 0.4rem;
  font-size: 0.6875rem;
}

.suffix {
  font-weight: 500;
  opacity: 0.75;
}

.good {
  background: var(--accent-teal-bg, rgba(45, 125, 125, 0.12));
  color: var(--accent-teal, #2d7d7d);
}

.bad {
  background: var(--accent-coral-bg, rgba(224, 114, 86, 0.12));
  color: var(--accent-coral, #e07256);
}

.neutral {
  background: var(--bg-secondary, #f3ede4);
  color: var(--text-muted, #8a847a);
}