.badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.badge-neutral,
.status-neutral,
.status-inactive,
.status-closed,
.status-resolved {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg-muted);
}

.badge-accent,
.status-active,
.status-approved,
.status-published {
  border: 1px solid rgba(212, 168, 67, 0.15);
  background: var(--accent-soft);
  color: var(--accent);
}

.badge-success,
.status-success,
.status-completed,
.status-qualified,
.status-open {
  background: var(--success-soft);
  color: var(--success);
}

.badge-danger,
.status-danger,
.status-failed,
.status-error,
.status-rejected {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-warning,
.status-warning,
.status-pending,
.status-waiting,
.status-draft {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-info,
.status-info,
.status-in-progress {
  background: var(--info-soft);
  color: var(--info);
}

.badge-lg,
.status-badge-lg {
  padding: 5px 14px;
  font-size: 12px;
}

.status-tone-active,
.status-tone-approved,
.status-tone-completed,
.status-tone-open,
.status-tone-qualified,
.status-tone-success,
.status-tone-live,
.status-tone-verified {
  background: var(--success-soft);
  color: var(--success);
}

.status-tone-pending,
.status-tone-warning,
.status-tone-paused,
.status-tone-waiting,
.status-tone-draft,
.status-tone-review {
  background: var(--warning-soft);
  color: var(--warning);
}

.status-tone-processing,
.status-tone-info,
.status-tone-submitted,
.status-tone-in-progress,
.status-tone-running {
  background: var(--info-soft);
  color: var(--info);
}

.status-tone-danger,
.status-tone-rejected,
.status-tone-failed,
.status-tone-error,
.status-tone-blocked,
.status-tone-terminated {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-tone-muted,
.status-tone-inactive,
.status-tone-cancelled,
.status-tone-expired,
.status-tone-unverified,
.status-tone-stopped {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg-muted);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  background: currentColor;
}

.status-dot.status-tone-active,
.status-dot.status-tone-success,
.status-dot.status-tone-verified,
.status-dot.status-tone-live {
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.status-dot-lg {
  width: 12px;
  height: 12px;
}