/* ============================================================
 *  Peerly — Badge
 * ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
}
.badge.online   { background: var(--md-success-soft); color: var(--md-success); }
.badge.offline  { background: var(--md-surface-container-high); color: var(--md-outline); }
.badge.connecting { background: rgba(251, 191, 36, 0.12); color: var(--md-warning); }