.switch { position: relative; display: inline-block; width: var(--switch-w); height: var(--switch-h); border-radius: var(--r-pill); background: var(--switch-off); flex: none; transition: background var(--dur) var(--ease); }
.switch__thumb { position: absolute; top: var(--sp-0-5); left: var(--sp-0-5); width: var(--switch-thumb); height: var(--switch-thumb); border-radius: 50%; background: var(--on-accent); box-shadow: var(--shadow-sm); transition: left var(--dur) var(--ease); }
.switch.is-on { background: var(--primary); }
.switch.is-on .switch__thumb { left: calc(var(--switch-w) - var(--switch-thumb) - var(--sp-0-5)); }
.switch:disabled, .switch.is-disabled { opacity: .5; cursor: not-allowed; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); }
.switch-row__label { font-size: var(--text-body); }
.switch-row__hint { font-size: var(--text-sm); color: var(--text-3); }