.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}

.brand {
  font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; gap: var(--space-2);
}

.conn-dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
}
.conn-live        { background: var(--up); }
.conn-reconnecting{ background: var(--warn); }
.conn-down        { background: var(--down); }

.badges { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.badge {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 12px;
}
.badge.accent { border-color: var(--accent); color: var(--accent); }
.badge.up { border-color: var(--up); color: var(--up); }
.badge.down { border-color: var(--down); color: var(--down); }