/* ASORIN — settings.css (settings.html only). Needs common.css first. */
/* ---------- SETTINGS ---------- */
.settings { margin-bottom: clamp(70px, 8vw, 110px); border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; }
.setting + .setting { border-top: 1px solid var(--line); }
.setting h4 { margin: 0 0 2px; font-size: 1.02rem; }
.setting p { margin: 0; font-size: .88rem; color: var(--fg-2); }
.toggle { position: relative; width: 54px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: var(--bg-3); cursor: pointer; flex-shrink: 0; transition: background-color .3s; }
.toggle::after { content: ''; position: absolute; top: 4px; inset-inline-start: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg-3); transition: inset-inline-start .35s var(--ease), background-color .3s; }
.toggle.on { background: var(--gold); }
.toggle.on::after { inset-inline-start: 28px; background: var(--on-gold); }

@media (max-width: 600px) {
  .setting { padding: 18px; }
}