/* Status dot states (works with your existing .topbar .brand .dot)
   Classes added by status-dot.js: online, offline, error, connecting */
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:#ff5252; /* default offline/red */
  box-shadow:0 0 0 0 rgba(255,82,82,.0);
  transition:filter .15s ease, background .15s ease, box-shadow .2s ease;
  display:inline-block;
  vertical-align:middle;
  margin-left:8px;
  animation:none; /* override style.css pulse */
}

/* online (green) with soft pulse */
.brand .dot.online{
  background:#4bd37b;
  box-shadow:0 0 0 2px rgba(75,211,123,.25) inset;
  animation: pmuxPulse 2.2s ease-out infinite;
}
@keyframes pmuxPulse{
  0%   { box-shadow:0 0 0 2px rgba(75,211,123,.25) inset, 0 0 0 0 rgba(75,211,123,.0);}
  60%  { box-shadow:0 0 0 2px rgba(75,211,123,.25) inset, 0 0 0 8px rgba(75,211,123,.18);}
  100% { box-shadow:0 0 0 2px rgba(75,211,123,.25) inset, 0 0 0 12px rgba(75,211,123,.0);}
}

/* connecting (amber) */
.brand .dot.connecting{
  background:#f6c546;
  box-shadow:0 0 0 2px rgba(246,197,70,.25) inset;
}

/* offline (grey-red) */
.brand .dot.offline{
  background:#ff5252;
  box-shadow:none;
}

/* error (pink/red) */
.brand .dot.error{
  background:#ff6b7d;
  box-shadow:0 0 0 2px rgba(255,107,125,.25) inset;
}