/* --- Mode Pills for Sidebar --- */
.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.32em 0.85em;
  border-radius: 999px;
  font-size: 0.97em;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255,255,255,0.07);
  color: #d1d5db;
  border: 1.2px solid #2c3e50;
  transition: background 0.18s, color 0.18s, border 0.18s, box-shadow 0.18s;
  user-select: none;
  min-width: 70px;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(44,62,80,0.04);
}
.mode-pill.on {
  background: rgba(60, 180, 120, 0.13);
  color: #2ecc71;
  border-color: #2ecc71;
}
.mode-pill.off {
  background: rgba(255,255,255,0.04);
  color: #888;
  border-color: #444a57;
}
.mode-pill .status {
  font-size: 0.85em;
  margin-left: 0.3em;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.mode-pill:hover {
  background: rgba(44,62,80,0.13);
  color: #fff;
  border-color: #2ecc71;
  box-shadow: 0 2px 8px rgba(44,62,80,0.10);
}
.mode-pill.loading {
  opacity: 0.6;
  pointer-events: none;
}