.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-3);
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }

.badge--owner { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.badge--manager { background: var(--color-info-soft); color: var(--color-info); }
.badge--operator { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--viewer { background: var(--color-surface-muted); color: var(--color-text-muted); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }