/* Premium, iOS-inspired settings controls */
.settings-list {
  border-color: #e2e9f4;
  box-shadow: 0 16px 45px rgba(29, 57, 102, .07);
}

.setting-row {
  padding: 20px 22px;
  transition: background .22s ease;
}

.setting-row:hover { background: #fbfcff; }

.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 51px;
  height: 31px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #d9dfeb, #c9d1df);
  box-shadow: inset 0 1px 2px rgba(10, 29, 58, .16), 0 1px 2px rgba(17, 42, 78, .08);
  cursor: pointer;
  position: relative;
  transition: background .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, transform .2s ease;
}

.switch:after {
  width: 25px;
  height: 25px;
  top: 3px;
  left: 3px;
  background: linear-gradient(145deg, #fff, #edf1f7);
  box-shadow: 0 2px 5px rgba(13, 34, 67, .24), 0 1px 1px rgba(255,255,255,.9) inset;
  transition: left .32s cubic-bezier(.2,1.15,.35,1), transform .25s ease;
}

.switch:hover { transform: scale(1.04); }
.switch:active:after { transform: scale(.9); }
.switch.on {
  background: linear-gradient(135deg, #3d8cff, #1764e8);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.26), 0 5px 12px rgba(37,99,235,.28);
}
.switch.on:after { left: 23px; }
.switch:focus-visible { outline: 3px solid rgba(72,136,255,.35); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .switch, .switch:after, .setting-row { transition: none; }
}