#card.settingscard{max-width:370px;padding:24px 20px 18px;gap:16px;background:radial-gradient(ellipse at 50% 0,rgba(183,107,255,.2),transparent 65%),linear-gradient(160deg,#2c2051,#1d1439);border-color:#61458c;box-shadow:0 8px 0 #0d071c,0 20px 70px #0007,inset 0 1px 0 #ffffff18}
.settings-head h2{margin:8px 0 6px;font-size:28px;text-shadow:0 3px 0 #100820}
.settings-head p{margin:0;color:#c7b8e3;font-size:13px}
.settings-eq{height:31px;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.settings-eq i{display:block;width:8px;height:var(--h);border-radius:3px;background:var(--c);box-shadow:inset 0 -3px 0 #0003,0 0 12px var(--c);transform-origin:bottom;animation:settingsEq .85s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes settingsEq{from{transform:scaleY(.58)}to{transform:scaleY(1)}}
.settings-controls{display:grid;gap:12px}
.setting-row{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:13px 12px;border:1px solid #624c86;border-radius:17px;background:linear-gradient(135deg,#3a2b5d,#2a1e46);color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 5px 0 #110a22,inset 0 1px 0 #ffffff13;transition:transform .15s,border-color .22s,box-shadow .22s}
.setting-row::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff17 50%,transparent 70%);transform:translateX(-150%);pointer-events:none;transition:transform .65s}
.setting-row:hover::after{transform:translateX(150%)}
.setting-row:hover{transform:translateY(-1px)}
.setting-row:active{transform:translateY(3px);box-shadow:0 2px 0 #110a22}
.setting-row.on{border-color:var(--tone);box-shadow:0 5px 0 #110a22,inset 0 1px 0 #ffffff1c,0 0 18px var(--glow)}
.setting-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#ffffff12,#ffffff03);color:var(--tone);box-shadow:inset 0 1px 0 #ffffff19}
.setting-icon svg{width:23px;height:23px;filter:drop-shadow(0 2px 0 #0004)}
.setting-row:not(.on) .setting-icon{opacity:.55}
.setting-copy{flex:1;min-width:0}
.setting-copy b{display:block;font:400 14px/1.25 var(--display)}
.setting-copy small{display:block;margin-top:4px;color:#c3b5dc;font:400 10px/1.4 var(--body)}
.setting-toggle{position:relative;flex:none;width:70px;height:30px;border-radius:999px;border:1px solid #826b9c;background:#170e2a;box-shadow:inset 0 2px 5px #0005;color:#d6c7eb;transition:background .22s,border-color .22s,box-shadow .22s}
.setting-toggle i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:linear-gradient(#fff,#d8cbea);box-shadow:0 2px 3px #0005;transition:transform .3s cubic-bezier(.25,1.7,.5,1)}
.setting-state{position:absolute;right:8px;top:6px;font:900 10px/16px var(--body);text-transform:uppercase}
.setting-row.on .setting-toggle{background:var(--tone);border-color:var(--tone);color:#1a1230;box-shadow:inset 0 2px 3px #0002,0 0 12px var(--glow)}
.setting-row.on .setting-toggle i{transform:translateX(39px);background:linear-gradient(#fff,#fff6df)}
.setting-row.on .setting-state{left:9px;right:auto}
.settings-alerts{display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;width:100%;padding:14px 13px;border:1px solid #ffce59;border-radius:17px;background:linear-gradient(120deg,#ffd955,#ffad53);color:#321932;text-align:left;cursor:pointer;box-shadow:0 5px 0 #9c5725,0 0 23px #ffb34726,inset 0 1px 0 #fff7;transition:transform .15s,box-shadow .15s}
.settings-alerts:hover{transform:translateY(-2px);box-shadow:0 7px 0 #9c5725,0 0 30px #ffb34740}
.settings-alerts:active{transform:translateY(3px);box-shadow:0 2px 0 #9c5725}
.settings-alerts svg{width:25px;height:25px;flex:none;transform-origin:50% 15%}
.settings-alerts:hover svg{animation:settingsBell .6s ease-in-out}
.settings-alerts>span:nth-child(2){flex:1}
.settings-alerts b{display:block;font:400 14px/1.3 var(--display)}
.settings-alerts small{display:block;font:600 10px/1.4 var(--body);margin-top:3px;color:#5a3140}
.settings-arrow{font:700 28px/1 var(--body)}
.settings-back{margin-top:2px!important;min-height:42px;background:transparent!important;border-color:#70578e!important;box-shadow:none!important;color:#d0c0e6!important;font-size:13px!important}
#hSettings svg{transition:transform .45s cubic-bezier(.2,1.5,.4,1)}
#hSettings:hover svg{transform:rotate(55deg)}
#hSettings:active svg{transform:rotate(100deg) scale(.9)}
.setting-row:focus-visible,.settings-alerts:focus-visible{outline:3px solid #fff;outline-offset:4px}
@keyframes settingsBell{20%{transform:rotate(16deg)}40%{transform:rotate(-13deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.setting-row,.setting-row::after,.setting-toggle,.setting-toggle i,.settings-alerts,#hSettings svg{transition:none!important}.settings-eq i,.settings-alerts svg{animation:none!important}.setting-row:hover,.settings-alerts:hover,#hSettings:hover svg,#hSettings:active svg{transform:none}}