.lms-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius);
  white-space: nowrap;
}

.lms-badge--success {
  background: oklch(0.7 0.15 145 / 0.12);
  color: var(--color-success);
}

.lms-badge--pending {
  background: var(--color-surface-soft);
  color: var(--color-muted-foreground);
}

.lms-badge--certificate {
  background: oklch(0.75 0.15 75 / 0.12);
  color: oklch(0.5 0.15 75);
}