.toggle-switch {
  display: flex;
  background: var(--surface, #f7f7f7);
  border-radius: 20px;
  border: 1.5px solid var(--primary, #3772ff);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(55, 114, 255, 0.07);
}

.toggle-btn {
  background: transparent;
  border: none;
  color: var(--primary, #3772ff);
  font-weight: 600;
  font-size: 16px;
  padding: 10px 32px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  outline: none;
}

.toggle-btn.active {
  background: var(--primary, #3772ff);
  color: var(--bg-main, #fff);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(55, 114, 255, 0.12);
}

.toggle-btn:not(.active):hover {
  background: var(--bg-overlay, #e6edff);
}