مولد CSS لمفتاح التبديل

.switch {
  position: relative;
  width: 60px;
  height: 29px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.3s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(29px - 8px);
  height: calc(29px - 8px);
  border-radius: 999px;
  background: white;
  box-shadow: 0 6px 14px rgba(15,23,42,0.18);
  transition: transform 0.3s ease;
}

.switch.active {
  background: #2563eb;
}

.switch.active::after {
  transform: translateX(30px);
}