:root{
  --acc:#1a1a1a;--ar:26;--ag:26;--ab:26;
  --glow:rgba(26,26,26,.3);--soft:rgba(255,255,255,.03);
  --bg:#000;--card:rgba(20,20,20,.8);--card-b:rgba(50,50,50,.5);
  --glass:rgba(15,15,15,.9);--glass-h:rgba(30,30,30,.95);--surf:rgba(40,40,40,.8);
  --txt:#fff;--sub:rgba(255,255,255,.6);--muted:rgba(255,255,255,.35);
  --sb:rgba(0,0,0,.98);--pl:rgba(0,0,0,.98);
  --fs:12px;--fh:'Unbounded',sans-serif;--fb:'Inter',sans-serif;
  --ease-ui:cubic-bezier(.22,.8,.24,1);
  --dur-fast:.16s;--dur-med:.28s;--dur-slow:.48s;
}
[data-theme=light]{
  --acc:#c55a2b;--ar:197;--ag:90;--ab:43;
  --bg:#fff;--card:rgba(255,255,255,.92);--card-b:rgba(0,0,0,.08);
  --glass:rgba(255,255,255,.85);--glass-h:rgba(255,255,255,.97);--surf:rgba(0,0,0,.04);
  --txt:#111;--sub:rgba(0,0,0,.55);--muted:rgba(0,0,0,.35);
  --sb:rgba(255,255,255,.98);--pl:rgba(255,255,255,.98);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--fb);font-size:var(--fs);background:var(--bg);color:var(--txt);transition:background .4s,color .4s;position:relative}
body::before,body::after{display:none}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surf);border-radius:3px}::-webkit-scrollbar-corner{background:transparent}
button,input,textarea,select{outline:none;border:none;font-family:inherit;font-size:inherit;background:none;color:inherit;cursor:pointer}
body,button,input,textarea,select{font-kerning:normal;text-rendering:optimizeLegibility;letter-spacing:0}
.btn-a,.btn-g,.btn-hp,.btn-hs,.asub-btn,.aguest,.mbtn-p,.mbtn-s,.chip-btn,.sbtn,.dl-btn,.sb-btn,.search-tab,.atab,.mini-btn,.fp-step-btn,.fp-stop,.fp-menu,.fp-x,.fp-lyr-toggle,.fp-lyr-close,.burger,.t3,.tlk{border-radius:999px}
.mini-btn,.fp-step-btn,.fp-stop,.fp-menu,.fp-x,.fp-lyr-toggle,.fp-lyr-close,.burger,.t3,.tlk{aspect-ratio:1}
/* Ensure app buttons don't span full width by default in modals/tasks */
.mbtn-p,.mbtn-s{width:auto; padding:10px 16px; border-radius:999px; font-weight:700; font-size:13px; display:inline-flex; align-items:center; justify-content:center;}
img{display:block}::selection{background:var(--soft)}
#cvs{display:none}
.orb,.bg-scene,.bg-plane,.bg-halo,.bg-core-sphere{display:none}
.nav,.btn-g,.btn-a,.btn-hp,.btn-hs,.feat-card,.acard,.ain,.sbox,.sin,.qc,.nr-card,.artist-card,.sb,.topbar,.si,.sb-btn,.mini-player,.fp-card,.mod,.ctx,.plc,.ti,.nmark,.aw-mark,.sb-mark,.hero-proof,.proof-stat,.compare-panel,.compare-pill{transition:background-color var(--dur-med) var(--ease-ui),color var(--dur-med) var(--ease-ui),border-color var(--dur-med) var(--ease-ui),transform var(--dur-med) var(--ease-ui),opacity var(--dur-med) var(--ease-ui),box-shadow var(--dur-med) var(--ease-ui)}
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;transition:opacity var(--dur-slow) var(--ease-ui),transform var(--dur-slow) var(--ease-ui);overflow:hidden}
.screen.off{opacity:0;pointer-events:none;transform:scale(1.03)}
#land{overflow-y:auto;overflow-x:hidden}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(0,0,0,.92);border-bottom:1px solid var(--card-b)}
.nlogo{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-size:14px;font-weight:700}
.nmark{width:30px;height:30px;border-radius:9px;background:var(--acc);display:flex;align-items:center;justify-content:center}
.nbtns{display:flex;gap:10px}
.btn-g{padding:6px 14px;border-radius:10px;border:1px solid var(--card-b);background:var(--glass);font-weight:600;font-size:12px;transition:all .2s}
.btn-g:hover{background:var(--glass-h);border-color:var(--muted)}
.btn-a{padding:6px 14px;border-radius:10px;background:var(--acc);color:#fff;font-weight:700;font-size:12px;transition:all .25s}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:80px 24px 40px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:30px;border:1px solid var(--card-b);background:var(--glass);font-size:11px;font-weight:700;color:var(--acc);letter-spacing:1px;text-transform:uppercase;margin-bottom:26px}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:blink 2s ease infinite}
.htitle{font-family:var(--fh);font-size:clamp(38px,7vw,80px);font-weight:900;line-height:1.02;letter-spacing:-2px}
.hdim{color:var(--sub)}
.hsub{font-size:15px;color:var(--sub);max-width:480px;line-height:1.75;margin:22px auto 42px}
.hbtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-hp{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:22px;background:var(--acc);color:#fff;font-weight:700;font-size:12px;transition:all .3s}
.btn-hs{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:22px;border:1px solid var(--card-b);background:var(--glass);font-weight:600;font-size:12px;transition:all .3s}
.mqw{overflow:hidden;padding:16px 0;border-top:1px solid var(--card-b);border-bottom:1px solid var(--card-b);margin:36px 0;user-select:none;-webkit-user-select:none}
.mqt{display:flex;width:max-content;animation:mqa 22s linear infinite}
.mqt:hover{animation-play-state:paused}
.mqi{display:inline-flex;align-items:center;gap:9px;padding:0 22px;color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none}
.mqs{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.4}
.hero-proof{margin:48px auto 0;max-width:1100px;width:calc(100% - 40px);position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:18px;padding:28px;border-radius:30px;border:1px solid var(--card-b);background:linear-gradient(145deg,rgba(10,10,18,.94),rgba(18,18,28,.82));box-shadow:0 14px 40px rgba(0,0,0,.3);overflow:hidden}
[data-theme=light] .hero-proof{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.94))}
.hero-proof::before{display:none}
.hero-proof-main,.compare-panel{position:relative;z-index:1;min-width:0}
.hero-proof-main{overflow:hidden}
.hero-proof-main > *{position:relative;z-index:2}
.hero-proof-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(var(--ar),var(--ag),var(--ab),.12);border:1px solid rgba(var(--ar),var(--ag),var(--ab),.22);color:var(--acc);font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase}
.hero-proof-title{font-family:var(--fh);font-size:clamp(22px,3vw,36px);font-weight:800;line-height:1.1;margin-top:18px;max-width:640px}
.hero-proof-sub{font-size:14px;line-height:1.7;color:var(--sub);max-width:620px;margin-top:12px}
.proof-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.proof-stat{padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--card-b);text-align:left;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.proof-value{font-family:var(--fh);font-size:21px;font-weight:700;line-height:1}
.proof-label{font-size:12px;line-height:1.5;color:var(--sub)}
.compare-panel{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:24px;background:rgba(18,18,28,.92);border:1px solid var(--card-b);height:100%}
[data-theme=light] .compare-panel{background:rgba(255,255,255,.92)}
.compare-panel-badge{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:6px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--card-b);font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.compare-panel-title{font-family:var(--fh);font-size:18px;font-weight:700;line-height:1.3;margin-top:4px}
.compare-columns,.compare-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(108px,.8fr) minmax(108px,.8fr);gap:8px;align-items:center}
.compare-columns{padding:2px 4px 0;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.compare-col{text-align:center}
.compare-col-ours{color:var(--txt)}
.compare-row{padding:12px 0;border-top:1px solid var(--card-b)}
.compare-label{font-size:13px;font-weight:600;line-height:1.4}
.compare-pill{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 10px;border-radius:999px;text-align:center;font-size:11px;font-weight:700;line-height:1.25}
.compare-pill-good{background:rgba(var(--ar),var(--ag),var(--ab),.16);border:1px solid rgba(var(--ar),var(--ag),var(--ab),.3);color:var(--txt)}
.compare-pill-muted{background:var(--glass);border:1px solid var(--card-b);color:var(--sub)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:1100px;margin:40px auto;padding:0 20px}
.feat-card{background:var(--card);border:1px solid var(--card-b);border-radius:20px;padding:24px 20px;text-align:center;transition:transform .2s,border-color .2s;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.feat-card::before{display:none}
.feat-card:hover{border-color:var(--muted);transform:translateY(-4px)}
.feat-icon{width:48px;height:48px;border-radius:14px;background:var(--glass);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:22px}
.feat-title{font-weight:700;font-size:16px;margin-bottom:6px}
.feat-desc{color:var(--sub);font-size:12px;line-height:1.5}
.dl-section{max-width:1100px;margin:0 auto 56px;padding:0 20px;text-align:center}
.dl-title{font-family:var(--fh);font-size:22px;font-weight:700;margin-bottom:6px}
.dl-sub{color:var(--sub);font-size:13px;margin-bottom:28px}
.dl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.dl-card{background:var(--card);border:1px solid var(--card-b);border-radius:22px;padding:28px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;transition:transform .2s,border-color .2s;height:100%;text-align:left;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.dl-card::before{display:none}
.dl-card:hover{border-color:var(--muted);transform:translateY(-4px)}
.dl-ico{width:56px;height:56px;border-radius:16px;background:var(--glass);border:1px solid var(--card-b);display:flex;align-items:center;justify-content:center;font-size:26px}
.dl-pname{font-family:var(--fh);font-size:15px;font-weight:700}
.dl-pdesc{color:var(--sub);font-size:12px;text-align:left;line-height:1.5}
.dl-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;border-radius:12px;font-weight:700;font-size:13px;transition:all .25s;text-decoration:none;width:100%;justify-content:center;margin-top:auto}
.dl-btn-pc{background:var(--acc);color:#fff}
.dl-btn-pc:hover{opacity:.85;transform:scale(1.02)}
.dl-btn-and{background:var(--glass);border:1px solid var(--card-b);color:var(--sub);cursor:not-allowed;opacity:.55}
.dl-badge{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);background:var(--glass);border:1px solid var(--card-b);border-radius:6px;padding:3px 8px;align-self:flex-start}
@media(max-width:560px){.dl-cards{grid-template-columns:1fr}}
footer{text-align:center;padding:24px;border-top:1px solid var(--card-b);color:var(--muted);font-size:12px}
#auth{background:var(--bg);align-items:center;justify-content:center}
.aw{position:relative;z-index:1;width:100%;max-width:420px;padding:24px;animation:authFadeIn .5s ease-out}
@keyframes authFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.aw-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:28px}
.aw-mark{width:42px;height:42px;border-radius:14px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;box-shadow:0 4px 16px rgba(108,60,224,.3)}
.aw-t{font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:-.3px}
.acard{background:var(--card);border:1px solid var(--card-b);border-radius:22px;padding:36px 32px;box-shadow:0 8px 40px rgba(0,0,0,.12)}
.a-title{font-family:var(--fh);font-size:22px;font-weight:800;text-align:center;margin-bottom:5px;letter-spacing:-.3px}
.a-sub{text-align:center;color:var(--sub);font-size:13px;margin-bottom:24px}
.atabs{display:flex;gap:4px;background:var(--glass);border-radius:12px;padding:4px;margin-bottom:24px}
.atab{flex:1;padding:11px;border-radius:9px;font-size:13px;font-weight:600;color:var(--sub);text-align:center;cursor:pointer;transition:all .3s ease}
.atab.on{background:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(108,60,224,.25)}
.afield{margin-bottom:16px}
.afl{display:block;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-bottom:7px}
.afw{position:relative;display:flex;align-items:center}
.afi{position:absolute;left:13px;color:var(--muted);transition:color .2s}
.ain{width:100%;padding:14px 44px 14px 40px;background:var(--glass);border:1.5px solid var(--card-b);border-radius:12px;color:var(--txt);font-size:14px;transition:border-color .25s,box-shadow .25s}
.ain:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(108,60,224,.12);outline:none}
.ain:focus~.afi,.afw:focus-within .afi{color:var(--acc)}
.eye-btn{position:absolute;right:12px;color:var(--muted);padding:4px;transition:color .2s}
.eye-btn:hover{color:var(--txt)}
.aerr{background:rgba(255,60,60,.1);border:1px solid rgba(255,80,80,.3);color:#ff7070;border-radius:10px;padding:11px 13px;font-size:13px;margin-bottom:13px;display:none;animation:authShake .4s ease}
@keyframes authShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.auth-note{padding:14px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--card-b);margin-bottom:20px;color:var(--sub);font-size:12px;line-height:1.6}
.auth-note strong{display:block;color:var(--txt);font-size:13px;margin-bottom:6px}
.asub-btn{width:100%;padding:15px;background:var(--acc);color:#fff;font-weight:700;font-size:14px;border-radius:12px;margin-top:8px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px rgba(108,60,224,.25)}
.asub-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(108,60,224,.35)}
.asub-btn:active{transform:translateY(0)}
.adiv{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12px}
.adiv::before,.adiv::after{content:'';flex:1;height:1px;background:var(--card-b)}
.aguest{width:100%;padding:13px;border:1px solid var(--card-b);border-radius:12px;color:var(--sub);font-size:13px;font-weight:500;background:var(--glass);transition:background .2s,border-color .2s}
.aguest:hover{background:var(--card);border-color:var(--muted)}
.aback{text-align:center;margin-top:18px}
.aback-btn{color:var(--sub);font-size:13px;text-decoration:none;opacity:.7;transition:opacity .2s}
.aback-btn:hover{opacity:1}
#app{flex-direction:column}
.sb-ov{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:48;opacity:0;pointer-events:none;transition:opacity .35s}
.sb-ov.show{opacity:1;pointer-events:all}
.sb{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:49;background:var(--sb);border-right:1px solid var(--card-b);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .38s}
.sb.open{transform:translateX(0)}
.sb-head{display:flex;align-items:center;gap:8px;padding:16px 12px 14px;border-bottom:1px solid var(--card-b)}
.sb-x{width:28px;height:28px;border-radius:50%;background:var(--glass);display:flex;align-items:center;justify-content:center;color:var(--sub);margin-left:auto;border:1px solid var(--card-b)}
.sb-mark{width:27px;height:27px;border-radius:8px;background:var(--acc);display:flex;align-items:center;justify-content:center}
.sb-name{font-family:var(--fh);font-size:12px;font-weight:700}
.sb-user{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--card-b);cursor:pointer}
.sb-user:hover{background:var(--glass)}
.sb-av{width:32px;height:32px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid var(--card-b);flex-shrink:0;overflow:hidden}
.sb-av img{width:100%;height:100%;object-fit:cover}
.sb-uname{font-size:13px;font-weight:600}
.sb-ustatus{font-size:11px;color:var(--sub)}
.sb-nav{flex:1;padding:10px 8px;overflow-y:auto}
.sb-sec{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
.si{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;color:var(--sub);font-size:12px;cursor:pointer}
.si:hover{background:var(--glass);color:var(--txt)}
.si.on{background:var(--card);color:var(--txt);border:1px solid var(--card-b)}
.si i{width:18px}
.sb-foot{padding:12px 10px;border-top:1px solid var(--card-b);display:flex;flex-direction:column;gap:6px}
.sb-btn{width:100%;padding:9px 12px;border-radius:9px;font-size:12px;display:flex;align-items:center;gap:7px;justify-content:center;border:1px solid transparent}
.sb-settings{background:var(--glass);color:var(--txt);border-color:var(--card-b)}
.sb-logout{background:var(--glass);color:var(--sub);border-color:var(--card-b)}
.topbar{height:44px;display:flex;align-items:center;padding:0 14px;gap:9px;flex-shrink:0;border-bottom:1px solid var(--card-b);background:var(--sb);z-index:20}
.burger{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--sub)}
.tb-logo{font-family:var(--fh);font-size:13px;font-weight:700}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb-av{width:30px;height:30px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2px solid var(--card-b);overflow:hidden;cursor:pointer}
.tb-av img{width:100%;height:100%;object-fit:cover}
.main{flex:1;overflow-y:auto;padding:14px;padding-bottom:90px}
.pg{display:none}
.pg.on{display:block}
.greet{font-family:var(--fh);font-size:clamp(16px,3.5vw,22px);font-weight:700;margin-bottom:3px}
.greet-s{color:var(--sub);font-size:11px;margin-bottom:14px}
.stitle{font-family:var(--fh);font-size:13px;font-weight:700;margin:20px 0 12px;display:flex;align-items:center;gap:8px}
/* Wave Panel */
.wave-panel{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;margin-bottom:20px;min-height:110px;display:flex;align-items:center;border:1px solid var(--card-b)}
.wave-panel-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(18,18,18,.98) 0%,rgba(28,28,28,.94) 52%,rgba(15,15,15,.98) 100%);z-index:0;transition:opacity .4s}
[data-theme=light] .wave-panel-bg{background:linear-gradient(135deg,rgba(215,215,215,.98) 0%,rgba(200,200,200,.94) 50%,rgba(225,225,225,.98) 100%)}
.wave-panel:hover .wave-panel-bg{opacity:.82}
.wave-panel-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(255,255,255,.06) 0%,transparent 60%)}
[data-theme=light] .wave-panel-bg::after{background:radial-gradient(circle at 80% 30%,rgba(255,255,255,.4) 0%,transparent 60%)}
.wave-panel-content{position:relative;z-index:1;display:flex;align-items:center;gap:18px;padding:26px 28px;width:100%}
.wave-panel-icon{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid var(--card-b);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--txt);flex-shrink:0}
.wave-panel-text{flex:1;min-width:0}
.wave-panel-title{font-family:var(--fh);font-size:18px;font-weight:800;color:var(--txt);letter-spacing:-.3px}
.wave-panel-sub{font-size:12px;color:var(--sub);margin-top:3px}
.wave-panel-play{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--card-b);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--txt);flex-shrink:0;transition:transform .25s,background .25s}
.wave-panel:hover .wave-panel-play{transform:scale(1.1);background:var(--glass-h)}
.wave-panel:active .wave-panel-play{transform:scale(.95)}
/* Wave Queue Modal */
.wave-queue-modal{max-width:640px;max-height:80vh;overflow-y:auto;text-align:left}
.wq-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.wq-title{font-family:var(--fh);font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.wq-close{color:var(--sub);font-size:16px;padding:4px}
.wq-now{background:var(--glass);border:1px solid var(--card-b);border-radius:12px;padding:12px;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.wq-now-thumb{width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--glass);display:flex;align-items:center;justify-content:center}
.wq-now-thumb img{width:100%;height:100%;object-fit:cover}
.wq-now-info{min-width:0;flex:1}
.wq-now-label{font-size:10px;font-weight:700;color:var(--acc);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.wq-now-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wq-now-artist{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wq-list-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.wq-list{display:flex;flex-direction:column;gap:4px}
.wq-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;transition:background .2s}
.wq-item:hover{background:var(--glass)}
.wq-item-num{font-size:12px;color:var(--muted);min-width:20px;text-align:center}
.wq-item-thumb{width:36px;height:36px;border-radius:6px;overflow:hidden;flex-shrink:0;background:var(--glass);display:flex;align-items:center;justify-content:center}
.wq-item-thumb img{width:100%;height:100%;object-fit:cover}
.wq-item-info{min-width:0;flex:1}
.wq-item-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wq-item-dur{font-size:11px;color:var(--muted)}
/* FP queue button */
.fp-queue-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px auto 0;padding:8px 20px;border-radius:10px;background:var(--glass);border:1px solid var(--card-b);color:var(--sub);font-size:12px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.fp-queue-btn:hover{background:var(--card);color:var(--txt)}
/* Qgrid - removed, keep classes to avoid errors */
.qgrid{display:none}
.qc{background:var(--card);border:1px solid var(--card-b);border-radius:12px;padding:8px;cursor:pointer;transition:transform .2s,border-color .2s;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:120px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.qc:hover{border-color:var(--muted);background:var(--glass-h);transform:translateY(-3px)}
.qc-ico{width:40px;height:40px;border-radius:8px;background:var(--glass);display:flex;align-items:center;justify-content:center;margin:6px 0 6px 0;font-size:16px}
.qc-ico img{width:100%;height:100%;object-fit:cover}
.qc-t{font-weight:700;font-size:11px;text-align:center;margin:4px 0 0 0;white-space:normal}
.qc-s{color:var(--sub);font-size:9px;text-align:center;margin:2px 0 6px 0}
/* Horizontal scroll sections */
.hscroll-wrap{overflow-x:auto;padding-bottom:10px;margin:0 -4px;-webkit-overflow-scrolling:touch}
.hscroll-wrap::-webkit-scrollbar{height:6px}
.hscroll-wrap::-webkit-scrollbar-thumb{background:var(--surf);border-radius:3px}
.hscroll-wrap::-webkit-scrollbar-track{background:transparent}
.hscroll{display:flex;gap:14px;padding:4px}
.nr-card{flex-shrink:0;width:155px;background:var(--card);border:1px solid var(--card-b);border-radius:14px;padding:10px;cursor:pointer;transition:transform .2s,border-color .2s;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.nr-card:hover{border-color:var(--muted);background:var(--glass-h);transform:translateY(-3px)}
.nr-cov{width:100%;aspect-ratio:1;border-radius:10px;background:var(--glass);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px}
.nr-cov img{width:100%;height:100%;object-fit:cover}
.nr-t{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr-a{font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
/* Artists row — grid layout 10 per row */
.artists-row{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;padding:4px 0 16px;margin:0}
.artist-card{flex-shrink:0;width:100%;display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:8px 4px;border-radius:14px;background:transparent;border:none;transition:background .2s,transform .2s}
.artist-card:hover{background:var(--glass-h);transform:translateY(-3px)}
.artist-thumb{width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--glass);border:2px solid var(--card-b);display:flex;align-items:center;justify-content:center;margin-bottom:8px;flex-shrink:0;transition:border-color .2s,transform .2s}
.artist-thumb-fallback{background:rgba(var(--ar),var(--ag),var(--ab),.25)}
.artist-fallback{font-family:var(--fh);font-size:28px;font-weight:800;color:#fff}
.artist-card:hover .artist-thumb{border-color:rgba(var(--ar),var(--ag),var(--ab),.35);transform:scale(1.06)}
.artist-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.artist-caption{font-size:11px;font-weight:600;text-align:center;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px}
/* Legacy grid aliases (kept for backward compat) */
.artists-grid{display:flex;gap:0;overflow-x:auto;padding:4px 0 12px}
.artist-img{width:44px;height:44px;border-radius:50%;background:var(--glass);display:flex;align-items:center;justify-content:center;margin-bottom:6px;overflow:hidden;font-size:16px}
.artist-img img{width:100%;height:100%;object-fit:cover}
.artist-name{font-weight:600;font-size:11px;text-align:center;margin-top:6px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
/* Search */
.sbox{background:var(--card);border:1px solid var(--card-b);border-radius:12px;padding:14px;margin-bottom:14px}
.sh{font-family:var(--fh);font-size:16px;font-weight:700;margin-bottom:3px}
.sh-s{color:var(--sub);font-size:13px;margin-bottom:16px}
.search-switch{display:flex;gap:8px;margin-bottom:14px}
.search-tab{flex:1;padding:11px 14px;border-radius:14px;border:1px solid var(--card-b);background:var(--glass);color:var(--sub);font-weight:700;font-size:12px}
.search-tab.on{background:var(--acc);border-color:transparent;color:#fff}
.sbar{display:flex;gap:8px}
.sin{flex:1;padding:12px 16px;background:var(--glass);border:1px solid var(--card-b);border-radius:30px;color:var(--txt);font-size:14px}
.sin:focus{border-color:var(--acc)}
.sbtn{padding:12px 20px;border-radius:30px;background:var(--acc);color:#fff;font-weight:700;font-size:13px;white-space:nowrap}
.result-block{margin-bottom:24px}
.result-label{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.user-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.user-card{background:var(--card);border:1px solid var(--card-b);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.user-top{display:flex;gap:12px;align-items:center}
.user-avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--glass);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.avatar-frame-none{border:2px solid var(--card-b);box-shadow:none}
.avatar-frame-glow{border:2px solid rgba(var(--ar),var(--ag),var(--ab),.8);box-shadow:0 0 0 2px rgba(var(--ar),var(--ag),var(--ab),.25),0 0 14px rgba(var(--ar),var(--ag),var(--ab),.45)}
.avatar-frame-sunset{border:2px solid #ffb26b;box-shadow:0 0 0 2px rgba(255,123,84,.22),0 0 14px rgba(255,188,117,.45)}
.avatar-frame-chrome{border:2px solid #b9c2ce;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 0 10px rgba(185,194,206,.35)}
.avatar-frame-neon{border:2px solid #00e5ff;box-shadow:0 0 0 2px rgba(0,229,255,.22),0 0 16px rgba(0,229,255,.5)}
.avatar-frame-mint{border:2px solid #3fe0a8;box-shadow:0 0 0 2px rgba(63,224,168,.22),0 0 14px rgba(63,224,168,.42)}
.avatar-frame-violet{border:2px solid #a77bff;box-shadow:0 0 0 2px rgba(167,123,255,.24),0 0 14px rgba(130,82,255,.4)}
.avatar-frame-ruby{border:2px solid #ff5d7c;box-shadow:0 0 0 2px rgba(255,93,124,.22),0 0 14px rgba(255,93,124,.4)}
.avatar-frame-gold{border:2px solid #ffd362;box-shadow:0 0 0 2px rgba(255,211,98,.23),0 0 14px rgba(255,196,56,.42)}
.avatar-frame-ocean{border:2px solid #5eb8ff;box-shadow:0 0 0 2px rgba(94,184,255,.22),0 0 14px rgba(94,184,255,.4)}
.avatar-frame-mono{border:2px dashed #d6dbe3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.avatar-frame-candy{border:2px solid #ff93cf;box-shadow:0 0 0 2px rgba(255,147,207,.2),0 0 14px rgba(147,214,255,.36)}
.user-login{font-weight:700;font-size:14px}
.user-meta{color:var(--sub);font-size:11px}
.user-bio{color:var(--sub);font-size:12px;line-height:1.45;min-height:34px}
.profile-look-box{margin-bottom:16px;padding:14px;border:1px solid var(--card-b);border-radius:12px;background:var(--glass)}
.profile-look-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px}
.profile-look-panel{max-height:300px;overflow-y:auto;padding-right:4px;margin-bottom:12px}
.profile-look-panel::-webkit-scrollbar{width:4px}
.profile-look-panel::-webkit-scrollbar-thumb{background:var(--surf);border-radius:4px}
.profile-look-row{margin-bottom:10px}
.profile-look-label{display:block;font-size:11px;color:var(--sub);margin-bottom:6px}
.profile-select{width:100%;padding:10px 12px;background:var(--glass);border:1px solid var(--card-b);border-radius:10px;color:var(--txt)}
.profile-look-hint{margin-top:6px;font-size:11px;line-height:1.4;color:var(--sub)}
.frame-color-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.frame-color-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt)}
.frame-color-toggle input{accent-color:var(--acc)}
.frame-color-picker{width:44px;height:34px;padding:0;border:none;background:transparent;cursor:pointer}
.frame-color-picker:disabled{opacity:.45;cursor:not-allowed}
.profile-look-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:8px}
.frame-pill{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border-radius:12px;border:1px solid var(--card-b);background:var(--card);font-size:11px;font-weight:600;text-align:left}
.frame-pill:hover{background:var(--glass-h)}
.frame-pill.on{border-color:rgba(var(--ar),var(--ag),var(--ab),.75);box-shadow:0 0 0 1px rgba(var(--ar),var(--ag),var(--ab),.35)}
.frame-sample{width:28px;height:28px;flex-shrink:0;font-size:11px}
.profile-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;margin-top:8px}
.emoji-pill{width:100%;min-width:0;height:36px;border-radius:10px;border:1px solid var(--card-b);background:var(--card);display:flex;align-items:center;justify-content:center;font-size:16px}
.emoji-pill:hover{background:var(--glass-h)}
.profile-style-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px}
.style-pill{padding:8px 10px;border-radius:10px;border:1px solid var(--card-b);background:var(--card);font-size:11px;font-weight:700}
.style-pill:hover{background:var(--glass-h)}
.style-pill.on{border-color:rgba(var(--ar),var(--ag),var(--ab),.75);box-shadow:0 0 0 1px rgba(var(--ar),var(--ag),var(--ab),.35)}
.profile-preview{display:flex;align-items:center;gap:10px;padding:10px;border:1px dashed var(--card-b);border-radius:10px;background:var(--card)}
.profile-preview-avatar{width:46px;height:46px;flex-shrink:0;font-size:18px}
.profile-preview-nick{font-weight:700;font-size:13px}
.profile-preview-sub{color:var(--sub);font-size:11px}
.code-row{display:flex;flex-wrap:wrap;gap:8px}
.code-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--card-b);font-size:11px;font-weight:700;letter-spacing:.5px;white-space:nowrap;max-width:100%}
.chip-btn{padding:7px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--card-b);font-size:11px;font-weight:600;white-space:nowrap}
.user-actions{display:flex;flex-wrap:wrap;gap:8px}
.privacy-opt{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--txt)}
.privacy-opt input{accent-color:var(--acc)}
.privacy-pl-list{max-height:150px;overflow-y:auto;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.privacy-pl-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--card-b);border-radius:10px;background:var(--glass)}
.public-prof-list .user-card{margin-bottom:10px}
.public-prof-empty{color:var(--sub);text-align:center;padding:20px}
.playlist-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.playlist-tools .ain{flex:1;min-width:220px;padding-left:14px}
.playlist-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.playlist-owner{font-size:11px;color:var(--sub);margin-top:4px}
.history-list{display:flex;flex-direction:column;gap:10px}
.hist-item{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--card);border:1px solid var(--card-b);cursor:pointer}
.hist-item:hover{background:var(--glass-h)}
.hist-cover{width:44px;height:44px;border-radius:10px;background:var(--glass);overflow:hidden;display:flex;align-items:center;justify-content:center}
.hist-cover img{width:100%;height:100%;object-fit:cover}
.hist-title{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--sub);font-size:11px;margin-top:4px}
.hist-time{font-size:11px;color:var(--muted);white-space:nowrap}
.ld{display:none;align-items:center;gap:12px;justify-content:center;padding:40px;color:var(--sub)}
.ld.show{display:flex}
.spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--card-b);border-top-color:#fff;animation:spin .8s linear infinite}
.rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ra{display:flex;align-items:center;gap:12px}
.rav{width:48px;height:48px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;overflow:hidden}
.rav img{width:100%;height:100%;object-fit:cover}
.rname{font-size:16px;font-weight:700}
.user-login-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-role-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;background:rgba(var(--ar),var(--ag),var(--ab),.14);border:1px solid rgba(var(--ar),var(--ag),var(--ab),.3);color:var(--txt);font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.user-login-special{font-weight:800}
.team-spotlight{margin:14px 0 20px;padding:14px;border:1px solid var(--card-b);border-radius:18px;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,.16)}
.team-spotlight-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.team-spotlight-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
.team-spotlight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.team-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--card-b);cursor:pointer}
.team-card:hover{background:var(--glass-h)}
.team-card-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--acc);flex-shrink:0}
.team-card-avatar img{width:100%;height:100%;object-fit:cover}
.team-card-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.team-card-name{font-weight:800;font-size:13px;line-height:1.2}
.team-card-sub{font-size:11px;color:var(--sub);line-height:1.35}
@media(max-width:640px){
  .code-row,.user-actions,.playlist-card-meta,.user-login-wrap{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-bottom:-4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .code-row > *,.user-actions > *,.playlist-card-meta > *,.user-login-wrap > *{flex:0 0 auto}
  .team-spotlight-grid{display:flex;overflow-x:auto;padding-bottom:4px;margin:0 -2px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .team-card{min-width:min(260px,82vw);scroll-snap-align:start}
}
.special-settings{margin-top:16px;padding-top:14px;border-top:1px solid var(--card-b)}
.special-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.special-settings-grid .profile-look-box{margin:0;padding:12px}
.special-settings-grid .profile-select{width:100%}
.avatar-editor-stage{position:relative;height:320px;max-height:50vh;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,rgba(0,0,0,.88),rgba(25,25,25,.95));border:1px solid var(--card-b);margin-top:10px;touch-action:none}
[data-theme=light] .avatar-editor-stage{background:linear-gradient(135deg,rgba(245,245,245,.98),rgba(230,230,230,.96))}
.avatar-editor-stage::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(var(--ar),var(--ag),var(--ab),.16),transparent 62%);pointer-events:none}
.avatar-editor-img{position:absolute;top:50%;left:50%;transform-origin:center center;will-change:transform;user-select:none;pointer-events:none;max-width:none;max-height:none}
.avatar-editor-frame{position:absolute;inset:18px;border:2px dashed rgba(var(--ar),var(--ag),var(--ab),.35);border-radius:20px;pointer-events:none;box-shadow:inset 0 0 0 999px rgba(0,0,0,.18)}
.avatar-editor-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;text-align:left}
.avatar-editor-control{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--card-b);border-radius:14px;background:var(--glass)}
.avatar-editor-control label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}
.avatar-editor-control input[type=range]{width:100%;accent-color:var(--acc)}
.avatar-editor-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-top:12px}
.avatar-editor-actions .mbtn-s,.avatar-editor-actions .mbtn-p{flex:1;min-width:120px}
/* Track list */
.tlist{display:flex;flex-direction:column;gap:2px}
.ti{display:grid;grid-template-columns:26px 38px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;cursor:pointer;opacity:0;transform:translateY(8px);transition:all .15s}
.ti.show{opacity:1;transform:none}
.ti:hover{background:var(--glass-h)}.ti.np{background:var(--card)}
.ti-num{text-align:center;color:var(--sub);font-size:12px}
.ti-th{width:40px;height:40px;border-radius:8px;background:var(--surf);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ti-th img{width:100%;height:100%;object-fit:cover}
.ti-inf{min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.ti-t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-a{color:var(--sub);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlk{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .2s}
.tlk:hover{transform:scale(1.2)}.tlk.on{color:#ff2d55}
.t3{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:0}
.ti:hover .t3{opacity:1}
/* Playlists */
.plgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.plc{background:var(--card);border:1px solid var(--card-b);border-radius:14px;padding:12px;cursor:pointer;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .2s,border-color .2s}
.plc:hover{transform:translateY(-3px);border-color:var(--muted)}
.plc-cov{aspect-ratio:1;border-radius:10px;background:var(--glass);display:flex;align-items:center;justify-content:center;margin-bottom:8px;overflow:hidden}
.plc-cov img{width:100%;height:100%;object-fit:cover}
.plc-menu{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;opacity:0;color:#fff;font-size:12px}
.plc:hover .plc-menu{opacity:1}
.plc-n{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc-cnt{color:var(--sub);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty-playlist{text-align:center;padding:60px 20px}
.empty-playlist h3{font-size:18px;margin-bottom:8px}
.empty-playlist p{color:var(--sub);margin-bottom:20px}
.empty{text-align:center;padding:40px;color:var(--sub)}
/* Mini player — Yandex Music style */
.mini-player{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(200%);width:calc(100% - 80px);max-width:680px;z-index:40;background:var(--pl);border:1px solid var(--card-b);border-radius:20px;padding:10px 16px 6px;display:flex;flex-direction:column;gap:0;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .4s}
.mini-player.show{transform:translateX(-50%) translateY(0)}
.mini-player-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;overflow:hidden}
.mini-thumb{width:48px;height:48px;border-radius:14px;background:var(--glass);overflow:hidden;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mini-thumb img{width:100%;height:100%;object-fit:cover}
.mini-info{flex:1;overflow:hidden;cursor:pointer;min-width:0;padding-right:4px}
.mini-title{font-weight:700;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-artist{color:var(--sub);font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mini-title,.mini-artist,.fp-tt,.fp-ar{transition:opacity .24s var(--ease-ui),transform .24s var(--ease-ui)}
.meta-fade{opacity:.15;transform:translateY(4px)}
.mini-ctrl{display:flex;align-items:center;gap:6px;flex-shrink:0}
.mini-btn{width:38px;height:38px;border-radius:999px;background:var(--glass);border:1px solid var(--card-b);display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:14px;transition:color .15s,background .15s,transform .15s,border-color .15s}
.mini-btn:hover{color:var(--txt);background:var(--glass-h);border-color:var(--muted);transform:translateY(-1px)}
.mini-btn-step{font-size:13px}
.mini-btn-play{width:42px;height:42px;border-radius:999px;background:var(--txt);color:var(--bg);border:1px solid transparent;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;transition:transform .15s,opacity .15s}
.mini-btn-play:hover{transform:scale(1.08);opacity:.9}
.mini-ctrl .tlk{width:38px;height:38px}
.mini-ctrl .tlk:hover{transform:none}
.mini-ctrl .tlk.on{color:#ff2d55;border-color:rgba(255,45,85,.35)}
.mini-prog-bar{height:2px;background:rgba(255,255,255,.15);border-radius:1px;margin:6px 0 2px;cursor:pointer;position:relative}
[data-theme=light] .mini-prog-bar{background:rgba(0,0,0,.12)}
.mini-prog-fill{height:100%;border-radius:1px;background:var(--txt);width:0%;transition:width .5s linear}
[data-theme=light] .mini-prog-fill{background:#000}
/* Full player */
.fp{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .35s}
.fp.show{opacity:1;pointer-events:all}
.fp-bd{position:absolute;inset:0;background:rgba(0,0,0,.98)}
.fp-card{position:relative;z-index:1;width:min(1100px,96vw);max-height:min(88vh,860px);overflow:auto;background:var(--pl);border:1px solid var(--card-b);border-radius:32px;padding:40px 36px 32px;box-shadow:0 14px 40px rgba(0,0,0,.5);transform:translateY(20px) scale(.95);transition:transform .4s;display:grid;grid-template-columns:minmax(240px,340px) 1fr;grid-template-areas:'cover title' 'cover artist' 'cover progress' 'cover controls' 'cover volume';gap:14px 34px;align-items:center}
.fp.show .fp-card{transform:none}
.fp-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--card-b);display:flex;align-items:center;justify-content:center;color:var(--sub)}
.fp-menu{position:absolute;top:16px;left:16px;width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--card-b);display:flex;align-items:center;justify-content:center;color:var(--sub);cursor:pointer}
.fp-cov{grid-area:cover;width:min(34vw,320px);height:min(34vw,320px);border-radius:26px;background:var(--glass);display:flex;align-items:center;justify-content:center;margin:0 auto;overflow:hidden;border:1px solid var(--card-b);font-size:72px;color:var(--muted)}
.fp-cov img{width:100%;height:100%;object-fit:cover}
.fp-tt{grid-area:title;text-align:left;font-family:var(--fh);font-size:clamp(16px,2vw,26px);font-weight:700;align-self:end;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;padding-right:18px}
.fp-ar{grid-area:artist;text-align:left;color:var(--sub);font-size:15px;align-self:start;padding-right:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-prg{grid-area:progress;display:flex;align-items:center;gap:10px;align-self:end}
.fp-con{grid-area:controls;display:flex;align-items:center;justify-content:flex-start;gap:24px}
.fp-pp{width:56px;height:56px;border-radius:50%;background:var(--txt);display:flex;align-items:center;justify-content:center;color:var(--bg);font-size:20px}
.fp-vol{grid-area:volume;display:flex;align-items:center;gap:10px;padding:0;max-width:560px}
/* WHITE sliders */
.fp-stop{width:40px;height:40px;border-radius:50%;background:var(--glass);border:1px solid var(--card-b);display:flex;align-items:center;justify-content:center;color:var(--sub);margin-left:8px;cursor:pointer}
.fp-stop:hover{background:var(--glass-h)}
/* Heart pop animation for 'like' icons (visible on all sections) */
.heart-pop{position:fixed;z-index:9999;width:28px;height:28px;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:Arial, sans-serif}
@keyframes heart-pop{0%{transform:translate(-50%,-50%) scale(0.3);opacity:1}60%{transform:translate(-50%,-50%) scale(1.2);opacity:1}100%{transform:translate(-50%,-50%) scale(0.6);opacity:0}}
.sl-track{flex:1;height:4px;background:rgba(255,255,255,.2);border-radius:2px;cursor:pointer;position:relative}
[data-theme=light] .sl-track{background:rgba(0,0,0,.15)}
.sl-fill{height:100%;border-radius:2px;background:#ffffff;width:0%}
[data-theme=light] .sl-fill{background:#000}
/* Context menu */
.ctx{position:fixed;z-index:500;background:var(--pl);border:1px solid var(--card-b);border-radius:14px;padding:6px;min-width:200px;opacity:0;transform:scale(.9);transition:all .18s;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.ctx.show{opacity:1;transform:none;pointer-events:all}
.ctx-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:9px;font-size:13px;cursor:pointer;color:var(--sub)}
.ctx-item:hover{background:var(--glass-h);color:var(--txt)}
.ctx-sep{height:1px;background:var(--card-b);margin:4px 0}
/* Modals */
.mod-wrap{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:opacity .3s}
.mod-wrap.show{opacity:1;pointer-events:all}
.mod{background:var(--pl);border:1px solid var(--card-b);border-radius:24px;padding:28px 24px;max-width:400px;width:90%;max-height:85vh;overflow-y:auto;text-align:center;transform:scale(.95);transition:transform .3s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.mod-wrap.show .mod{transform:none}
.mod-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.mod-head-main{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.mod-head-copy{min-width:0;flex:1;text-align:left}
.mod-head .mod-ico{margin:0;flex-shrink:0}
.mod-head .mod-title{margin:0;text-align:left}
.mod-nav-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--card-b);background:var(--glass);display:flex;align-items:center;justify-content:center;color:var(--sub);flex-shrink:0;transition:background .2s,color .2s,transform .2s}
.mod-nav-btn:hover{background:var(--glass-h);color:var(--txt);transform:translateY(-1px)}
.mod-ico{width:56px;height:56px;border-radius:18px;background:var(--glass);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:24px}
.mod-title{font-family:var(--fh);font-size:18px;font-weight:700;margin-bottom:8px}
.mod-text{color:var(--sub);font-size:13px;margin-bottom:20px}
.mod-btns{display:flex;gap:8px;justify-content:center}
.mbtn-p{padding:12px 24px;border-radius:30px;background:var(--acc);color:#fff;font-weight:600;font-size:13px}
.mbtn-s{padding:12px 24px;border-radius:30px;border:1px solid var(--card-b);background:var(--glass);color:var(--txt);font-weight:600;font-size:13px}
.dl-ico-win{color:#00adef}
.dl-ico-android{color:#3ddc84}
#ipass2-field,#team-spotlight,#playlist-json-input,#fp-queue-btn{display:none}
.ld-compact{padding:20px}
.section-spaced{margin-bottom:20px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.btn-hp-compact{padding:10px 18px}
.mini-thumb{position:relative}
.mini-btn-step{font-size:13px}
.fp-time{font-size:11px;color:var(--sub);min-width:32px}
.fp-time-end{text-align:right}
.fp-step-btn{width:44px;height:44px;border-radius:50%;background:var(--glass);border:1px solid var(--card-b);display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:20px;line-height:1;cursor:pointer;flex-shrink:0;transition:color .15s,background .15s,border-color .15s}
.fp-step-btn:hover{color:var(--txt);background:var(--glass-h);border-color:var(--muted)}
.fp-vol-ico{color:var(--sub)}
.fp-vol-fill-default{width:70%}
.cmd-pal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 0}
.cmd-pal-title{font-family:var(--fh);font-size:16px;font-weight:700}
.cmd-pal-sub{font-size:12px;color:var(--sub);margin-top:2px}
.kshow-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.kshow-head-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.kshow-icon-accent{color:var(--acc)}
.panel-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.panel-nav-spacer{flex:1}
.profile-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.profile-avatar-btn{width:60px;height:60px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;overflow:hidden;cursor:pointer;flex-shrink:0}
.profile-file-input{display:none}
.profile-meta-title{font-weight:700;font-size:16px}
.profile-meta-sub{color:var(--sub);font-size:13px}
.profile-code-section,.profile-field{margin-bottom:12px}
.profile-code-row{margin-top:6px}
.field-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
.field-input{padding:10px 14px;margin-top:4px}
.profile-frame-hidden{display:none}
.profile-preview-top{margin-top:10px}
.public-prof-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.public-prof-avatar-lg{width:64px;height:64px;font-size:20px}
.public-prof-login{font-weight:700;font-size:17px}
.public-prof-code{color:var(--sub);font-size:12px}
.public-prof-section{margin-bottom:14px}
.public-prof-section-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
.public-prof-section-title.mb6{margin-bottom:6px}
.public-prof-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.public-prof-count{font-size:11px;color:var(--sub)}
.settings-panel{text-align:left;margin-bottom:16px}
.settings-block{margin-bottom:16px}
.settings-label{font-size:12px;font-weight:600;color:var(--sub)}
.settings-row{display:flex;gap:8px;margin-top:8px}
.settings-action{flex:1}
.settings-divider{margin-top:16px;padding-top:14px;border-top:1px solid var(--card-b)}
.settings-select{width:100%;padding:10px;background:var(--glass);border:1px solid var(--card-b);border-radius:10px;color:var(--txt);margin-top:8px}
.sleep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.timer-btn{padding:8px 0;font-size:12px}
.sleep-status{font-size:11px;color:var(--sub);margin-top:6px;min-height:14px}
.privacy-title{margin-top:12px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
.privacy-note{display:none;margin-top:8px;font-size:12px;color:var(--sub)}
.update-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.app-version{font-size:12px;color:var(--muted);white-space:nowrap}
.upd-btn-main{flex:1;gap:6px}
.upd-msg{font-size:11px;color:var(--sub);margin-top:6px;min-height:14px}
#special-team-settings{display:none}
.people-count,.result-count{color:var(--sub);font-size:12px}
.result-empty{color:var(--sub);text-align:center;padding:40px}
.artist-header-avatar{background:transparent;border:none;overflow:visible}
.artist-header-avatar img{border-radius:50%;width:48px;height:48px;object-fit:cover}
.search-header-thumb{width:48px;height:48px;object-fit:cover;border-radius:8px}
.search-header-thumb.artist{border-radius:50%}
.modal-input-main{margin-bottom:20px;padding-left:14px}
.modal-input-pad{padding-left:14px}
.modal-shell-left{text-align:left}
.modal-shell-scroll{max-height:260px;overflow-y:auto;margin-bottom:12px}
.modal-section-title{border-top:1px solid var(--card-b);padding-top:12px;margin-bottom:8px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
.modal-form-row{display:flex;gap:8px;margin-bottom:12px}
.modal-shell-wide{max-width:620px;text-align:left;max-height:90vh;overflow-y:auto}
.modal-shell-medium{max-width:520px;text-align:left}
.modal-shell-public{max-width:560px;text-align:left}
.modal-scroll-320{max-height:320px;overflow-y:auto;text-align:left}
.modal-actions-top{margin-top:16px}
.modal-actions-14{margin-top:14px}
.public-prof-meta{min-width:0}
.user-bio-auto{min-height:auto}
.public-prof-list-scroll{max-height:280px;overflow-y:auto}
.profile-look-label-spaced{margin-top:8px}
.profile-look-row-tight{margin-bottom:0}
.emoji-ban-icon{font-size:12px}
#update-banner{display:none;position:fixed;top:12px;right:12px;z-index:9999;max-width:360px;padding:14px 18px;background:rgba(16,16,22,.97);border:1px solid rgba(var(--ar),var(--ag),var(--ab),.4);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.5);color:#fff;font-size:13px;font-weight:500;animation:slideDownRight .4s ease-out}
.update-banner-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#update-icon{font-size:18px;color:rgba(var(--ar),var(--ag),var(--ab),1)}
#update-text{flex:1;font-weight:600;letter-spacing:.2px}
#update-close{background:none;border:none;color:#888;cursor:pointer;padding:4px;font-size:14px}
#update-progress-wrap{display:none;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin:6px 0 8px}
#update-progress-bar{height:100%;width:0%;background:rgba(var(--ar),var(--ag),var(--ab),1);border-radius:3px;transition:width .3s}
#update-sub{font-size:11px;color:#a0a0b8;margin-bottom:6px}
#update-install{display:none;width:100%;padding:10px;margin-top:4px;background:rgba(var(--ar),var(--ag),var(--ab),1);border:none;border-radius:10px;color:#fff;font-weight:700;font-size:13px;cursor:pointer;transition:opacity .2s}
.update-install-icon{margin-right:6px}
#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--pl);border:1px solid var(--card-b);color:var(--txt);padding:10px 20px;border-radius:30px;font-size:13px;z-index:700;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .3s}
#yt-wrap{position:fixed;bottom:0;right:0;width:200px;height:200px;opacity:.01;pointer-events:none;overflow:hidden;z-index:-1}
@keyframes like-pop{0%{transform:scale(1)}40%{transform:scale(1.5)}70%{transform:scale(.85)}100%{transform:scale(1)}}
.tlk.pop{animation:like-pop .35s ease}
#mini-time{font-size:10px;color:var(--muted);white-space:nowrap;pointer-events:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes mqa{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(max-width:1024px){
  .nav{padding:14px 24px}
  .hero{padding:60px 20px 36px}
  .hero-proof{grid-template-columns:1fr;padding:22px;width:calc(100% - 32px)}
  .hero-proof-title{max-width:none}
  .compare-panel{padding:18px}
  .fp-card{width:min(760px,94vw);max-height:90vh;grid-template-columns:1fr;grid-template-areas:'cover' 'title' 'artist' 'progress' 'controls' 'volume';gap:18px;padding:32px 24px 24px}
  .fp-cov{width:min(42vw,260px);height:min(42vw,260px)}
}
@media(max-width:768px){
  .nav{padding:14px 16px;flex-wrap:wrap;gap:12px;justify-content:center}.hero{padding:40px 16px 28px}
  .nlogo{width:100%;justify-content:center}.nbtns{width:100%;justify-content:center;flex-wrap:wrap}
  .nbtns button{flex:1;min-width:140px;justify-content:center}
  .htitle{font-size:32px}.hsub{font-size:14px}.hbtns{width:100%;flex-direction:column}.btn-hp,.btn-hs{width:100%;justify-content:center;padding:12px 20px}
  .hero-proof{margin-top:32px;padding:18px;width:calc(100% - 20px);border-radius:24px}
  .hero-proof-title{font-size:24px}.proof-stats{grid-template-columns:1fr 1fr}
  .compare-columns{display:none}.compare-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px;border-radius:18px;background:var(--glass);border:1px solid var(--card-b)}
  .compare-label{margin-bottom:2px}.compare-pill{width:100%}
  .features-grid{grid-template-columns:1fr}
  .qgrid{grid-template-columns:repeat(4,1fr)}.artists-grid{grid-template-columns:repeat(3,1fr)}
  .mini-player{left:12px;right:12px;bottom:12px;padding:8px 10px}
  .mini-thumb{width:38px;height:38px}
  .search-switch{display:grid;grid-template-columns:1fr 1fr}.sbar{flex-direction:column}.sbtn{width:100%;justify-content:center}
  .fp-card{width:min(420px,92vw);display:block;padding:28px 20px 20px}
  .fp-cov{width:160px;height:160px;margin:0 auto 20px}
  .fp-tt,.fp-ar{text-align:center}
  .fp-con{justify-content:center;margin-bottom:16px}
  .fp-vol{padding:0 8px;max-width:none}
  .playlist-tools{flex-direction:column;align-items:stretch}
  .playlist-tools .ain,.playlist-tools button{width:100%}
  .user-results{grid-template-columns:1fr}
  .mod{padding:24px 18px}.mod-btns{flex-direction:column}.mod-btns .mbtn-p,.mod-btns .mbtn-s{width:100%}
  .hist-item{grid-template-columns:44px 1fr}
  .hist-time{grid-column:2}
}
/* Глобальные: только сглаживание, не ломают десктоп */
body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;overscroll-behavior:none}
.sb-nav{-webkit-overflow-scrolling:touch}
/* Responsive wave panel — mobile */
@media(max-width:600px){
  .wave-panel-content{padding:18px 16px;gap:12px}
  .wave-panel-icon{width:42px;height:42px;font-size:18px}
  .wave-panel-title{font-size:16px}
  .wave-panel-sub{font-size:11px}
  .wave-panel-play{width:38px;height:38px;font-size:14px}
  .nr-card{width:140px}
}
/* Только мобильные / маленькие окна */
@media(max-width:600px){
  .topbar{padding-top:env(safe-area-inset-top,0);height:calc(56px + env(safe-area-inset-top,0))}
  .mini-player{bottom:calc(12px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%) translateY(200%);width:calc(100% - 24px);max-width:none;padding:8px 10px 5px}
  .mini-player.show{transform:translateX(-50%) translateY(0)}
  .mini-player-row{gap:8px}
  .mini-ctrl{gap:4px}
  .mini-btn,.mini-ctrl .tlk{width:36px;height:36px}
  .mini-btn-play{width:40px;height:40px}
  .sb{padding-top:env(safe-area-inset-top,0);width:min(300px,86vw)}
  .main{padding:12px;padding-bottom:calc(100px + env(safe-area-inset-bottom,0));-webkit-overflow-scrolling:touch}
  button,.si,.qc,.nr-card,.artist-card,.ti,.plc,.hist-item{min-height:44px}
  .mini-btn{min-width:36px;min-height:36px}
  .sin,.ain{font-size:16px}
  .search-switch{grid-template-columns:1fr}.hero-proof{padding:16px}.proof-stats{grid-template-columns:1fr}
  .dl-card{padding:22px 18px}.aw{padding:16px}.acard{padding:28px 20px}
  .fp-card{max-height:calc(100vh - env(safe-area-inset-top,0) - env(safe-area-inset-bottom,0));display:block;padding:20px 14px 14px}
  .fp-cov{width:180px;height:180px;margin:0 auto 14px}
  .fp-tt,.fp-ar{text-align:center}
  .fp-con{justify-content:center;margin-bottom:10px}
  .fp-vol{padding:0 10px}
  .qgrid{grid-template-columns:repeat(2,1fr)}
  .artists-grid{grid-template-columns:repeat(3,1fr)}
  .artists-row{grid-template-columns:repeat(5,1fr)}
  .features-grid{grid-template-columns:1fr}
}
@media(max-width:420px){
  .mini-player-row{grid-template-columns:auto minmax(0,1fr) auto}
  .mini-eq{display:none}
}
/* ============================================================
   АДАПТИВНОСТЬ — МАЛЕНЬКИЕ ЭКРАНЫ (< 360px)
   Старые iPhone SE, Android Go и узкие окна на ПК
   ============================================================ */
@media(max-width:359px){
  :root{--fs:12px}
  .nav{padding:10px 12px}
  .htitle{font-size:26px;letter-spacing:-1px}
  .hero{padding:30px 12px 20px}
  .hero-proof{padding:12px;border-radius:18px}
  .hero-proof-title{font-size:20px}
  .features-grid{padding:0 12px}
  .feat-card{padding:18px 14px}
  .main{padding:10px;padding-bottom:calc(92px + env(safe-area-inset-bottom,0))}
  .qgrid{grid-template-columns:1fr;gap:8px}
  .qc{height:auto;min-height:96px;padding:10px}
  .mini-player{width:calc(100% - 16px);padding:6px 8px 4px;border-radius:16px}
  .mini-player-row{gap:6px}
  .mini-thumb{width:34px;height:34px}
  .mini-btn,.mini-ctrl .tlk{width:32px;height:32px}
  .mini-btn-play{width:36px;height:36px}
  .mini-title{font-size:11px}.mini-artist{font-size:10px}
  .sb{width:min(260px,90vw)}
  .fp-card{padding:16px 10px 10px;border-radius:20px}
  .fp-cov{width:140px;height:140px}
  .fp-con{gap:14px}
  .fp-pp{width:46px;height:46px;font-size:16px}
  .mod{padding:20px 14px}
  .acard{padding:22px 16px}
  .aw{padding:12px}
  .intro-metrics{gap:8px}
  .intro-metric{padding:12px}
  .proof-stat{min-height:auto;padding:14px}
  .proof-value{font-size:18px}
}

@media(max-width:600px){
  .sbox{padding:12px;border-radius:16px;margin-bottom:12px}
  .sh{font-size:18px;line-height:1.2;margin-bottom:8px}
  .sh-s{font-size:12px;line-height:1.35;margin-bottom:12px}
  .search-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
  .search-tab{min-height:40px;padding:10px 8px;border-radius:999px;font-size:12px}
  .sbar{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;align-items:center}
  .sin{height:48px;min-width:0;padding:0 16px;border-radius:24px;font-size:16px}
  .sbtn{width:48px;height:48px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
  .ld{padding:28px 0}
  .rhead{align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .ra{min-width:0;flex:1}
  .rname{font-size:18px;line-height:1.2;word-break:break-word}
  .result-count,.people-count{line-height:1.35}
  .rhead .btn-hp{width:auto;min-width:128px;padding:10px 14px}
  .tlist{gap:4px}
  .ti{grid-template-columns:22px 42px minmax(0,1fr) 36px 36px;gap:6px;min-height:56px;padding:8px 2px 8px 0;border-radius:12px}
  .ti-num{font-size:11px}
  .ti-th{width:42px;height:42px}
  .ti-t{font-size:13px;line-height:1.2}
  .ti-a{font-size:11px;line-height:1.2}
  .tlk,.t3{width:36px;height:36px;opacity:1}
  .fp-step-btn,.fp-stop{width:42px;height:42px}
}
@media(max-width:420px){
  .rhead .btn-hp{width:100%;margin-left:0}
  .ti{grid-template-columns:20px 40px minmax(0,1fr) 34px 34px;gap:5px}
  .ti-th{width:40px;height:40px}
  .tlk,.t3{width:34px;height:34px}
}

/* ============================================================
   АДАПТИВНОСТЬ — Full HD (1920×1080) — базовый десктоп
   Ограничиваем main, чтобы контент не растягивался бесконечно
   ============================================================ */
@media(min-width:1600px){
  .main{max-width:1440px;margin:0 auto;padding:24px;padding-bottom:120px}
  .nav{padding:18px 72px}
  .hero{padding:100px 32px 50px}
  .intro-shell{max-width:1440px;margin:0 auto}
  .features-grid{max-width:1400px}
  .dl-section{max-width:1400px}
  .hero-proof{max-width:1400px}
  .qgrid{grid-template-columns:repeat(10,minmax(0,1fr));gap:14px}
  .qc{height:140px}
  .mini-player{max-width:820px}
  .fp-card{width:min(1200px,92vw);padding:48px 44px 36px}
  .fp-cov{width:min(30vw,360px);height:min(30vw,360px)}
}

/* ============================================================
   АДАПТИВНОСТЬ — QHD (2560×1440) и большие десктопы
   ============================================================ */
@media(min-width:2200px){
  :root{--fs:15px}
  .main{max-width:1760px;padding:28px;padding-bottom:140px}
  .nav{padding:22px 96px}
  .intro-shell{max-width:1760px;padding:64px 80px 40px}
  .features-grid{max-width:1760px;padding:0 40px}
  .dl-section{max-width:1760px;padding:0 40px}
  .hero-proof{max-width:1760px}
  .sb{width:280px}
  .qgrid{grid-template-columns:repeat(10,minmax(0,1fr));gap:16px}
  .qc{height:160px}
  .qc-ico{width:56px;height:56px;font-size:22px}
  .qc-t{font-size:13px}
  .nr-card{width:180px}
  .artists-row{grid-template-columns:repeat(10,1fr)}
  .artist-thumb{width:92px;height:92px}
  .mini-player{max-width:960px;bottom:24px}
  .mini-thumb{width:56px;height:56px}
  .fp-card{width:min(1400px,90vw);padding:56px 52px 44px}
  .fp-cov{width:min(28vw,400px);height:min(28vw,400px)}
  .htitle{font-size:clamp(48px,6vw,96px)}
  .greet{font-size:clamp(20px,3vw,30px)}
}

/* ============================================================
   АДАПТИВНОСТЬ — 4K / UHD (3840×2160) и выше
   ============================================================ */
@media(min-width:3200px){
  :root{--fs:17px}
  .main{max-width:2400px;padding:36px;padding-bottom:160px}
  .nav{padding:28px 140px}
  .intro-shell{max-width:2400px;padding:80px 120px 60px}
  .features-grid{max-width:2400px;padding:0 60px}
  .dl-section{max-width:2400px;padding:0 60px}
  .hero-proof{max-width:2400px;padding:40px}
  .sb{width:320px}
  .qc{height:180px}
  .mini-player{max-width:1120px}
  .fp-card{width:min(1600px,86vw);padding:64px 60px 48px}
}

/* ============================================================
   АДАПТИВНОСТЬ — Ultrawide (3440×1440, 21:9) и 5120+ (32:9)
   Ограничиваем контент по ширине, не даём ему тянуться
   ============================================================ */
@media(min-aspect-ratio:21/9) and (min-width:2560px){
  .main{max-width:1920px}
  .intro-shell{max-width:1920px}
  .features-grid{max-width:1920px}
  .hero-proof{max-width:1920px}
  .dl-section{max-width:1920px}
  .mini-player{max-width:900px}
}
@media(min-aspect-ratio:30/9){
  .main{max-width:1800px}
  .mini-player{max-width:800px}
}

/* ============================================================
   ОПТИМИЗАЦИЯ ПРОИЗВОДИТЕЛЬНОСТИ ДЛЯ СЛАБЫХ ПК
   Пользователь может включить "режим плавности" через prefers-reduced-motion
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .mqt{animation:none}
  .bdot{animation:none}
  .orb{display:none}
  .bg-scene{display:none}
  #cvs{display:none}
}


/* GPU hints removed — they were forcing compositing layers */
.ti,.qc,.nr-card,.artist-card,.plc,.feat-card{contain:layout style}
/* Запрет выделения текста на элементах управления (лучший UX на десктопе) */
.mini-btn,.mini-btn-play,.fp-pp,.fp-stop,.btn-hp,.btn-hs,.btn-g,.btn-a,.sbtn,.burger,.si,.qc,.feat-card{user-select:none;-webkit-user-select:none}
/* Плавная прокрутка для ПК */
.main,.hscroll-wrap,.artists-row{scroll-behavior:smooth}
/* Запрет overflow-x на уровне html (anti-horizontal-scroll) */
html{overflow-x:hidden}

/* ============================================================
   ✨ 3D / GLASS / PREMIUM BLACK DESIGN LAYER (v2)
   Глубина, перспектива, плавные 3D-трансформы, glow-эффекты.
   Всё проектировано ТОЛЬКО под чёрную тему — цветовые переменные не трогаем.
   ============================================================ */
:root{
  --depth-a: 0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 1px rgba(255,255,255,.04) inset;
  --depth-b: 0 12px 42px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
  --depth-c: 0 18px 60px rgba(0,0,0,.7), 0 6px 20px rgba(0,0,0,.45);
  --glow-acc: 0 0 40px rgba(var(--ar),var(--ag),var(--ab),.18);
  --ease-3d: cubic-bezier(.2,.85,.2,1);
}

/* 3D perspective removed — forced compositor layers and heavy repaints. */

/* ---------- ГРАДИЕНТНЫЙ ФОН (медленная анимация, почти чёрный) ---------- */
body{
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(30,30,36,.55), transparent 60%),
    radial-gradient(900px 700px at 100% 110%, rgba(24,24,34,.55), transparent 60%),
    #000;
  background-attachment: fixed;
}
body::after{ display:none; }
@keyframes bgBreath{
  from{opacity:.5; transform:translateY(-4px)}
  to  {opacity:.85;transform:translateY(4px)}
}
[data-theme=light] body::after{display:none}

/* ---------- CARDS: лёгкий лифт на hover ---------- */
.feat-card, .dl-card, .qc, .nr-card, .plc, .artist-card, .user-card, .hist-item, .team-card{
  position:relative;
  transition: transform .25s var(--ease-ui),
              border-color .2s ease,
              box-shadow .25s ease,
              background-color .2s ease;
  box-shadow: var(--depth-a), var(--depth-b);
}
.feat-card:hover, .dl-card:hover, .qc:hover, .nr-card:hover, .plc:hover, .user-card:hover, .hist-item:hover, .team-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--depth-a), var(--depth-c), var(--glow-acc);
}
.artist-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--depth-a), var(--depth-c), var(--glow-acc);
}
/* Блики поверх карточек — тонкая «стеклянная» засветка */
.feat-card::after, .dl-card::after, .qc::after, .nr-card::after, .plc::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 40%);
  opacity:0; transition: opacity .4s ease;
}
.feat-card:hover::after, .dl-card:hover::after, .qc:hover::after, .nr-card:hover::after, .plc:hover::after{ opacity:1; }

/* ---------- ICON BUMP внутри feat-card / dl-card ---------- */
.feat-card .feat-icon, .dl-card .dl-ico{
  transition: transform .35s var(--ease-3d), box-shadow .35s var(--ease-3d);
}
.feat-card:hover .feat-icon, .dl-card:hover .dl-ico{
  transform: translateZ(24px) rotateY(-6deg) rotateX(6deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 20px rgba(var(--ar),var(--ag),var(--ab),.25);
}

/* ---------- BUTTONS: лёгкий лифт ---------- */
.btn-hp, .btn-a, .sbtn, .dl-btn-pc, .mbtn-p{
  position:relative;
  transition: transform .2s var(--ease-ui), box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.btn-hp:hover, .btn-a:hover, .sbtn:hover, .dl-btn-pc:hover, .mbtn-p:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.6), 0 0 22px rgba(var(--ar),var(--ag),var(--ab),.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  filter: brightness(1.08);
}
.btn-hp:active, .btn-a:active, .sbtn:active, .dl-btn-pc:active, .mbtn-p:active{
  transform: translateY(0) scale(.99);
  filter: brightness(.95);
}
.btn-hs, .btn-g, .mbtn-s{
  transition: transform .2s var(--ease-ui), box-shadow .2s ease, background-color .2s ease;
}
.btn-hs:hover, .btn-g:hover, .mbtn-s:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}

/* ---------- MINI PLAYER: плотная тёмная панель (без backdrop-filter) ---------- */
.mini-player{
  background: linear-gradient(180deg, rgba(14,14,18,.98), rgba(8,8,12,.99));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 22px 60px rgba(0,0,0,.75),
    0 8px 22px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.6) inset;
}
.mini-player.show{ transform: translateX(-50%) translateY(0); }
.mini-btn-play{
  background: linear-gradient(135deg, #fff, #cfcfcf);
  color:#000;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 16px rgba(255,255,255,.15), 0 1px 0 rgba(255,255,255,.4) inset;
  transition: transform .2s var(--ease-3d), box-shadow .2s ease;
}
.mini-btn-play:hover{ transform: scale(1.08) translateZ(6px); box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 22px rgba(255,255,255,.3); }
.mini-btn-play:active{ transform: scale(.95); }

/* ---------- FULL PLAYER: киношная карточка ---------- */
.fp-card, .fp-bd{
  background: linear-gradient(145deg, rgba(26,26,36,.97), rgba(8,8,12,.98));
  box-shadow:
    0 40px 120px rgba(0,0,0,.8),
    0 0 60px rgba(var(--ar),var(--ag),var(--ab),.22),
    0 1px 0 rgba(255,255,255,.06) inset;
  border:1px solid rgba(255,255,255,.08);
}
.fp-pp{
  background: linear-gradient(135deg, #fff, #d8d8d8);
  color:#000;
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 22px rgba(255,255,255,.18), 0 1px 0 rgba(255,255,255,.5) inset;
  transition: transform .25s var(--ease-3d), box-shadow .25s ease;
  transform-style:preserve-3d;
}
.fp-pp:hover{ transform: scale(1.08) translateZ(12px); box-shadow: 0 14px 36px rgba(0,0,0,.7), 0 0 36px rgba(255,255,255,.28); }
.fp-pp:active{ transform: scale(.97); }

/* ---------- MODALS: объёмная «всплывающая» подача ---------- */
.mod{
  background: linear-gradient(180deg, rgba(22,22,28,.96), rgba(10,10,14,.98));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 120px rgba(0,0,0,.85), 0 0 40px rgba(var(--ar),var(--ag),var(--ab),.15);
  transform-style: preserve-3d;
  animation: modalPop .5s var(--ease-3d);
}
@keyframes modalPop{
  from{ opacity:0; transform: translateY(30px) translateZ(-40px) scale(.96); }
  to  { opacity:1; transform: translateY(0)    translateZ(0)     scale(1); }
}

/* ---------- NAV BAR: плотная тёмная панель (без backdrop-filter) ---------- */
.nav, .topbar{
  background: linear-gradient(180deg, rgba(0,0,0,.98), rgba(5,5,8,.96));
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

/* ---------- SIDEBAR ---------- */
.sb{
  background: linear-gradient(180deg, rgba(10,10,14,.95), rgba(4,4,8,.98));
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 8px 0 30px rgba(0,0,0,.5);
}
.sb-btn{
  transition: transform .2s var(--ease-3d), background-color .2s ease, color .2s ease;
}
.sb-btn:hover{ transform: translateX(3px) translateZ(4px); }
.sb-btn.on{
  box-shadow: 0 4px 12px rgba(var(--ar),var(--ag),var(--ab),.3), 0 0 18px rgba(var(--ar),var(--ag),var(--ab),.2) inset;
}

/* ---------- NAV MARKS / LOGO — лёгкий pulse ---------- */
.nmark, .aw-mark, .sb-mark{
  position:relative;
  box-shadow: 0 6px 20px rgba(var(--ar),var(--ag),var(--ab),.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .3s var(--ease-ui);
}
.nmark:hover, .aw-mark:hover, .sb-mark:hover{ transform: scale(1.06); }

/* ---------- SEARCH BOX ---------- */
.sin:focus{
  box-shadow: 0 0 0 3px rgba(var(--ar),var(--ag),var(--ab),.25), 0 10px 30px rgba(0,0,0,.5);
  transform: translateZ(2px);
}
.sin{ transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; }

/* ---------- QUICK-CHIPS (qc) — маленькие подписи ---------- */
.qc:hover{ transform: translateY(-3px); }

/* ---------- TRACK CARDS (ti/nr-card) и ARTISTS ---------- */
.ti{ transition: transform .2s var(--ease-ui), box-shadow .2s ease, background-color .2s ease; }
.ti:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.45); }

/* ---------- PAGE REVEAL ---------- */
@keyframes pageReveal{
  from{ opacity:0; transform: translateY(12px) translateZ(-20px); }
  to  { opacity:1; transform: translateY(0)    translateZ(0); }
}
.screen:not(.off) .main > *, .screen:not(.off) #land > *{
  animation: none; /* выключено по умолчанию, включается только при переключении */
}

/* ---------- HERO: отдельная «3D-сцена» и блеск заголовка ---------- */
.htitle{
  background: linear-gradient(180deg, #fff 0%, #b8b8c2 70%, #8a8a98 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 20px rgba(var(--ar),var(--ag),var(--ab),.2));
}
[data-theme=light] .htitle{
  background: linear-gradient(180deg, #1a1a1a 0%, #333 70%, #4a4a4a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-proof{
  transition: transform .3s var(--ease-ui), box-shadow .3s ease;
}
.hero-proof:hover{
  transform: translateY(-3px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 50px rgba(var(--ar),var(--ag),var(--ab),.18);
}

/* ---------- BADGES / PILLS ---------- */
.badge, .compare-panel-badge, .hero-proof-kicker{
  box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* ---------- TOAST: уведомление (без backdrop-filter) ---------- */
#toast{
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 30px rgba(var(--ar),var(--ag),var(--ab),.3);
}

/* ---------- SPINNER ---------- */
.spin{
  border-color: rgba(255,255,255,.1);
  border-top-color: rgba(var(--ar),var(--ag),var(--ab),1);
  box-shadow: 0 0 16px rgba(var(--ar),var(--ag),var(--ab),.35);
}

/* ---------- SCROLLBAR: тонкая премиальная ---------- */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(var(--ar),var(--ag),var(--ab),.5), rgba(var(--ar),var(--ag),var(--ab),.25));
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(var(--ar),var(--ag),var(--ab),.3);
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(var(--ar),var(--ag),var(--ab),.75), rgba(var(--ar),var(--ag),var(--ab),.4));
}

/* ============================================================
   🔍 КРАСИВЫЙ ПОИСКОВЫЙ ЛОАДЕР
   ============================================================ */
.ld{ align-items:center; justify-content:center; padding:36px 16px; gap:14px; }
.search-loader{
  position:relative; width:72px; height:72px;
  display:grid; place-items:center;
  transform-style:preserve-3d; perspective:400px;
}
.search-loader-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid transparent;
  border-top-color: rgba(var(--ar),var(--ag),var(--ab),1);
  border-right-color: rgba(var(--ar),var(--ag),var(--ab),.55);
  animation: searchSpin 1.2s cubic-bezier(.55,.05,.45,.95) infinite;
  box-shadow: 0 0 20px rgba(var(--ar),var(--ag),var(--ab),.35);
}
.search-loader-ring.s2{
  inset:10px;
  border-top-color: rgba(var(--ar),var(--ag),var(--ab),.8);
  border-left-color: rgba(var(--ar),var(--ag),var(--ab),.4);
  animation-duration:1.6s; animation-direction:reverse;
}
.search-loader-ring.s3{
  inset:20px;
  border-top-color: rgba(255,255,255,.6);
  border-bottom-color: rgba(var(--ar),var(--ag),var(--ab),.5);
  animation-duration:2s;
}
.search-loader-core{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),.95), rgba(var(--ar),var(--ag),var(--ab),.65));
  color:#fff; font-size:12px;
  box-shadow: 0 0 24px rgba(var(--ar),var(--ag),var(--ab),.7), 0 4px 10px rgba(0,0,0,.45);
  animation: searchPulse 1.4s ease-in-out infinite;
  z-index:2;
}
.search-loader-text{
  font-size:13px; font-weight:600; color:var(--sub);
  background: linear-gradient(90deg, var(--sub) 0%, var(--txt) 50%, var(--sub) 100%);
  background-size: 200% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent; color:transparent;
  animation: searchShimmer 2s linear infinite;
}
@keyframes searchSpin{ from{ transform: rotate(0) rotateX(10deg); } to{ transform: rotate(360deg) rotateX(10deg); } }
@keyframes searchPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.12); } }
@keyframes searchShimmer{ from{ background-position: -200% 0; } to{ background-position: 200% 0; } }

/* ============================================================
   ✨ ДОПОЛНИТЕЛЬНЫЕ АНИМАЦИИ
   ============================================================ */
/* Плавное появление треков списком */
@keyframes trackFadeIn{
  from{ opacity:0; transform: translateY(8px) translateZ(-20px) scale(.98); }
  to  { opacity:1; transform: translateY(0)   translateZ(0)    scale(1); }
}
.ti{ animation: trackFadeIn .5s var(--ease-3d) both; }
.ti:nth-child(1){ animation-delay: 0ms; }
.ti:nth-child(2){ animation-delay: 30ms; }
.ti:nth-child(3){ animation-delay: 60ms; }
.ti:nth-child(4){ animation-delay: 90ms; }
.ti:nth-child(5){ animation-delay: 120ms; }
.ti:nth-child(6){ animation-delay: 150ms; }
.ti:nth-child(7){ animation-delay: 180ms; }
.ti:nth-child(8){ animation-delay: 210ms; }
.ti:nth-child(9){ animation-delay: 240ms; }
.ti:nth-child(10){ animation-delay: 270ms; }
.ti:nth-child(n+11){ animation-delay: 300ms; }

/* Карточки появляются со staggered delay */
@keyframes cardFadeIn{
  from{ opacity:0; transform: translateY(14px) rotateX(-4deg) scale(.96); }
  to  { opacity:1; transform: translateY(0)    rotateX(0)     scale(1); }
}
.feat-card, .dl-card, .nr-card, .plc, .user-card{
  animation: cardFadeIn .55s var(--ease-3d) both;
}

/* Плейлист/артист — reveal c поворотом */
@keyframes artistReveal{
  from{ opacity:0; transform: scale(.85) rotateY(-20deg); }
  to  { opacity:1; transform: scale(1) rotateY(0); }
}
.artist-card{ animation: artistReveal .6s var(--ease-3d) both; }
.artist-card:nth-child(2){ animation-delay: 50ms; }
.artist-card:nth-child(3){ animation-delay: 100ms; }
.artist-card:nth-child(4){ animation-delay: 150ms; }
.artist-card:nth-child(5){ animation-delay: 200ms; }
.artist-card:nth-child(n+6){ animation-delay: 250ms; }

/* Wave-panel — ореол отключён для производительности */
.wave-panel{ position:relative; }
.wave-panel:hover{ transform: translateY(-3px); }

/* Toast — slide-in с пружиной */
@keyframes toastIn{
  0%  { opacity:0; transform: translateX(-50%) translateY(40px) scale(.9); }
  70% { opacity:1; transform: translateX(-50%) translateY(-4px) scale(1.02); }
  100%{ opacity:1; transform: translateX(-50%) translateY(0)    scale(1); }
}
#toast.show{ animation: toastIn .45s var(--ease-3d) both; }

/* Heart (лайк) — взрыв при клике */
.tlk.liked i, .mini-btn.liked i{ animation: heartPop .45s cubic-bezier(.4,1.8,.6,1.2); }
@keyframes heartPop{
  0%  { transform: scale(1); }
  30% { transform: scale(1.5) rotate(-8deg); }
  60% { transform: scale(.88) rotate(4deg); }
  100%{ transform: scale(1) rotate(0); }
}

/* Play button / mini thumb — бесконечные анимации отключены для производительности */
.mini-btn-play.playing, .fp-pp.playing{
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 18px rgba(var(--ar),var(--ag),var(--ab),.28);
}

/* Tabs — плавный «подчёркивающий» индикатор */
.atab, .search-tab{ position:relative; overflow:hidden; }
.atab.on::after, .search-tab.on::after{
  content:''; position:absolute; left:10%; right:10%; bottom:3px; height:2px;
  background: linear-gradient(90deg, transparent, rgba(var(--ar),var(--ag),var(--ab),1), transparent);
  border-radius:2px; box-shadow: 0 0 8px rgba(var(--ar),var(--ag),var(--ab),.48);
  animation: tabGlow 2.4s ease-in-out infinite alternate;
}
@keyframes tabGlow{ from{ opacity:.5; } to{ opacity:.82; } }

/* Input focus — расширяющийся блик */
.sin:focus, .ain:focus{
  animation: inputFocusPulse .5s ease-out;
}
@keyframes inputFocusPulse{
  0%{ box-shadow: 0 0 0 0 rgba(var(--ar),var(--ag),var(--ab),.5), 0 10px 30px rgba(0,0,0,.4); }
  100%{ box-shadow: 0 0 0 3px rgba(var(--ar),var(--ag),var(--ab),.25), 0 10px 30px rgba(0,0,0,.5); }
}

/* Burger hover — мягкий поворот */
.burger{ transition: transform .3s var(--ease-3d); }
.burger:hover{ transform: rotate(90deg) scale(1.05); }

/* Team cards — stagger */
.team-card{ animation: cardFadeIn .5s var(--ease-3d) both; }
.team-card:nth-child(2){ animation-delay: 80ms; }

/* Greet text — плавное появление */
.greet, .greet-s{
  animation: greetIn .7s var(--ease-3d) both;
}
.greet-s{ animation-delay: .15s; }
@keyframes greetIn{
  from{ opacity:0; transform: translateY(12px); filter: blur(6px); }
  to  { opacity:1; transform: translateY(0);    filter: blur(0); }
}

/* Section titles — лёгкий slide */
.stitle{
  animation: sectionIn .6s var(--ease-3d) both;
}
@keyframes sectionIn{
  from{ opacity:0; transform: translateX(-8px); }
  to  { opacity:1; transform: translateX(0); }
}

/* Page switch transition */
.pg{
  transition: opacity .35s ease, transform .35s var(--ease-3d);
  transform-origin: top center;
}
.pg:not(.on){ opacity:0; transform: scale(.98) translateZ(-10px); pointer-events:none; position:absolute; width:100%; }

/* ============================================================
   🎨 СВЕТЛАЯ ТЕМА: улучшенная читабельность и контраст
   ============================================================ */
[data-theme=light]{
  --acc:#c55a2b; --ar:197; --ag:90; --ab:43;
  --bg:#fff;
  --card:rgba(255,255,255,.96);
  --card-b:rgba(0,0,0,.09);
  --glass:rgba(248,248,245,.9);
  --glass-h:rgba(255,255,255,.98);
  --surf:rgba(0,0,0,.05);
  --txt:#111;
  --sub:rgba(0,0,0,.62);
  --muted:rgba(0,0,0,.42);
  --sb:rgba(255,255,255,.98);
  --pl:rgba(255,255,255,.98);
}
[data-theme=light] body{background:#fff}
[data-theme=light] body::after{ display:none; }
[data-theme=light] .mini-player{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,250,247,.98));
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.1), 0 4px 14px rgba(0,0,0,.06), 0 0 30px rgba(197,90,43,.1);
}
[data-theme=light] .mini-btn-play{
  background: linear-gradient(135deg, #1a1a1a, #333);
  color:#fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.05) inset;
}
[data-theme=light] .fp-card, [data-theme=light] .fp-bd{
  background: radial-gradient(circle at 30% 0%, #fff, #f5f5f2 70%);
  box-shadow: 0 24px 80px rgba(0,0,0,.12), 0 0 40px rgba(197,90,43,.08);
  border: 1px solid rgba(0,0,0,.08);
}
[data-theme=light] .fp-pp{
  background: linear-gradient(135deg, #1a1a1a, #333);
  color:#fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
[data-theme=light] .nav, [data-theme=light] .topbar{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
[data-theme=light] .sb{
  background: linear-gradient(180deg, rgba(252,252,250,.98), rgba(248,248,245,.98));
  border-right: 1px solid rgba(0,0,0,.08);
  box-shadow: 8px 0 24px rgba(0,0,0,.05);
}
[data-theme=light] .sb-btn.on{
  box-shadow: 0 4px 12px rgba(197,90,43,.25);
}
[data-theme=light] .feat-card, [data-theme=light] .dl-card, [data-theme=light] .nr-card,
[data-theme=light] .qc, [data-theme=light] .plc, [data-theme=light] .user-card,
[data-theme=light] .artist-card, [data-theme=light] .hist-item, [data-theme=light] .team-card{
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04) inset;
}
[data-theme=light] .feat-card:hover, [data-theme=light] .dl-card:hover,
[data-theme=light] .nr-card:hover, [data-theme=light] .qc:hover,
[data-theme=light] .plc:hover, [data-theme=light] .user-card:hover,
[data-theme=light] .artist-card:hover, [data-theme=light] .hist-item:hover,
[data-theme=light] .team-card:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,.12), 0 0 20px rgba(197,90,43,.15);
}
[data-theme=light] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(197,90,43,.4), rgba(197,90,43,.18));
}
[data-theme=light] .search-loader-core{
  background: linear-gradient(135deg, #c55a2b, #a0451f);
  box-shadow: 0 0 24px rgba(197,90,43,.5), 0 4px 10px rgba(0,0,0,.15);
}
[data-theme=light] .mod{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 28px 80px rgba(0,0,0,.18);
}
/* Текст в светлой теме должен быть тёмным — убираем градиент htitle */
[data-theme=light] .htitle{
  -webkit-text-fill-color: initial;
  color: #1a1a1a;
  background: none;
  filter: none;
}
[data-theme=light] #cvs{ opacity:.25; }

/* ---------- MOBILE / WEAK DEVICES: смягчаем 3D ---------- */
@media(max-width:760px){
  .feat-card:hover, .dl-card:hover, .qc:hover, .nr-card:hover, .plc:hover, .user-card:hover, .hist-item:hover, .team-card:hover{
    transform: translateY(-3px);
  }
  body::after{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .feat-card, .dl-card, .qc, .nr-card, .plc, .artist-card, .user-card, .hist-item, .team-card{
    transition-duration:.01ms !important;
  }
  body::after{ animation:none !important; }
}

/* ---------- DOWNLOAD CARDS: missing state styles ---------- */
.dl-card-dev{
  border-color:rgba(var(--ar),var(--ag),var(--ab),.4);
  background:linear-gradient(135deg,var(--card),rgba(var(--ar),var(--ag),var(--ab),.05));
}
.dl-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--sub);
  margin-top:4px;
  padding:6px 10px;
  background:var(--glass);
  border:1px solid var(--card-b);
  border-radius:8px;
  width:100%;
}
.dl-status i{color:var(--acc);font-size:10px;flex-shrink:0}
.dl-btn-disabled{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  background:var(--glass);
  border:1px solid var(--card-b);
  color:var(--muted);
  cursor:not-allowed;
  opacity:.65;
  width:100%;
  justify-content:center;
  margin-top:auto;
  user-select:none;
}

/* ---------- HERO: Windows in-dev badge ---------- */
.hero-platform-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:8px 16px;
  border-radius:999px;
  background:var(--glass);
  border:1px solid var(--card-b);
  font-size:12px;
  color:var(--sub);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hero-platform-badge i{color:#00adef;font-size:13px}
.hero-platform-badge .badge-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--acc);
  animation:sleepPulse 2.2s ease infinite;
  flex-shrink:0;
}

/* ---------- SKIP BUTTON: prevent visual icon glitch on touch ---------- */
[data-player-skip]{-webkit-tap-highlight-color:transparent}
[data-player-skip] i{
  pointer-events:none;
  transition:none !important;
  -webkit-font-smoothing:antialiased;
}
.fp-step-btn:active{opacity:.7}
.mini-btn-step:active{opacity:.7}

/* ============================================================
   LYRICS PANEL (LRCLIB) — smooth Yandex-style scroll
   ============================================================ */
.fp-lyr-toggle{display:none!important}
.fp-lyr-toggle:hover{background:var(--glass-h);color:var(--txt);transform:translateY(-1px)}
.fp-lyr-toggle.on{background:var(--acc);color:#fff;border-color:transparent}
.fp-lyr-panel{position:absolute;inset:0;background:linear-gradient(180deg,var(--pl) 0%, rgba(10,10,14,.98) 50%, var(--pl) 100%);border-radius:32px;padding:64px 36px 36px;opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .35s cubic-bezier(.2,.9,.3,1),transform .35s cubic-bezier(.2,.9,.3,1);overflow:hidden;display:flex;flex-direction:column;z-index:4}
.fp-lyr-panel.show{opacity:1;pointer-events:all;transform:none}
[data-theme=light] .fp-lyr-panel{background:linear-gradient(180deg,var(--pl) 0%, rgba(250,250,252,.98) 50%, var(--pl) 100%)}
.fp-lyr-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-shrink:0}
.fp-lyr-head-ico{width:36px;height:36px;border-radius:12px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.fp-lyr-head-txt{flex:1;min-width:0}
.fp-lyr-head-t{font-family:var(--fh);font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-lyr-head-s{font-size:12px;color:var(--sub);line-height:1.3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-lyr-copy{width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--card-b);display:flex;align-items:center;justify-content:center;color:var(--sub);cursor:pointer;transition:all .2s}
.fp-lyr-copy:hover{background:var(--glass-h);color:var(--txt);transform:translateY(-1px)}
.fp-lyr-close{margin-left:auto;width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--card-b);display:flex;align-items:center;justify-content:center;color:var(--sub);cursor:pointer;transition:all .2s}
.fp-lyr-close:hover{background:var(--glass-h);color:var(--txt);transform:translateY(-1px)}
.fp-lyr-body{flex:1;overflow:hidden;mask-image:linear-gradient(180deg,transparent 0, #000 52px, #000 calc(100% - 64px), transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0, #000 52px, #000 calc(100% - 64px), transparent 100%);padding:40px 8px 60px;scroll-behavior:smooth;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none;scrollbar-width:none}
.fp-lyr-body::-webkit-scrollbar{display:none;width:0;height:0}
.fp-lyr-line{font-family:var(--fh);font-size:20px;font-weight:600;line-height:1.64;color:var(--sub);text-align:center;padding:10px 4px;margin:2px 0;opacity:0;transform:translateY(18px);animation:lyrLineIn .6s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:var(--d,0s);letter-spacing:-.2px;white-space:normal;word-break:break-word;overflow-wrap:anywhere;user-select:none;-webkit-user-select:none;cursor:default;pointer-events:none;transition:color .5s cubic-bezier(.2,.9,.3,1),transform .5s cubic-bezier(.2,.9,.3,1),opacity .5s cubic-bezier(.2,.9,.3,1),text-shadow .5s cubic-bezier(.2,.9,.3,1)}
.fp-lyr-line.blank{min-height:18px;padding:4px 0}
.fp-lyr-line.active{color:var(--txt);transform:translateY(0);text-shadow:0 0 20px rgba(var(--ar),var(--ag),var(--ab),.42)}
.fp-lyr-line.near{color:var(--sub);transform:translateY(0)}
.fp-lyr-line.far{opacity:.35}
.fp-lyr-line.passed{opacity:.42}
@keyframes lyrLineIn{
  0%{opacity:0;transform:translateY(18px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes lyrLineOut{
  0%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-14px)}
}
.fp-lyr-panel.closing .fp-lyr-line{animation:lyrLineOut .25s cubic-bezier(.2,.9,.3,1) forwards}
.fp-lyr-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);text-align:center;padding:20px}
.fp-lyr-empty.loading{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;min-height:100%}
.fp-lyr-empty.loading::before{content:'';position:absolute;inset:9%;background:var(--lyr-art,none) center/cover no-repeat;filter:blur(16px) saturate(1.12);opacity:.18;transform:scale(1.08);z-index:-2}
.fp-lyr-empty.loading::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(var(--ar),var(--ag),var(--ab),.12),transparent 48%),rgba(0,0,0,.08);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);z-index:-1}
[data-theme=light] .fp-lyr-empty.loading::before{opacity:.1}
[data-theme=light] .fp-lyr-empty.loading::after{background:radial-gradient(circle at 50% 42%,rgba(var(--ar),var(--ag),var(--ab),.09),transparent 48%),rgba(255,255,255,.18)}
.fp-lyr-empty-ico{font-size:36px;color:rgba(var(--ar),var(--ag),var(--ab),.6);margin-bottom:4px}
.fp-lyr-empty-t{font-family:var(--fh);font-size:17px;font-weight:700;color:var(--sub)}
.fp-lyr-empty-s{font-size:12px;max-width:340px;line-height:1.5}
.fp-lyr-search{position:relative;width:76px;height:76px;margin-bottom:6px;display:grid;place-items:center;color:#fff}
.fp-lyr-search::before,.fp-lyr-search::after{content:'';position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(var(--ar),var(--ag),var(--ab),.35);animation:lyrSearchRing 1.8s ease-in-out infinite}
.fp-lyr-search::after{inset:0;animation-delay:.45s;opacity:.55}
.fp-lyr-search-core{width:44px;height:44px;border-radius:16px;background:rgba(var(--ar),var(--ag),var(--ab),.82);display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 24px rgba(var(--ar),var(--ag),var(--ab),.22);animation:lyrSearchFloat 2.2s ease-in-out infinite}
.fp-lyr-search-core i{font-size:17px;animation:lyrSearchScan 1.6s ease-in-out infinite}
.fp-lyr-spin{display:flex;gap:6px;margin-top:12px}
.fp-lyr-spin > span{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:lyrDots 1.2s ease-in-out infinite}
.fp-lyr-spin > span:nth-child(2){animation-delay:.15s}
.fp-lyr-spin > span:nth-child(3){animation-delay:.3s}
@keyframes lyrDots{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:1}}
@keyframes lyrSearchRing{0%{transform:scale(.72);opacity:0}45%{opacity:.8}100%{transform:scale(1.18);opacity:0}}
@keyframes lyrSearchFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes lyrSearchScan{0%,100%{transform:translateX(-2px) rotate(-8deg)}50%{transform:translateX(2px) rotate(8deg)}}
@media(max-width:600px){
  .fp-lyr-panel{padding:56px 14px 18px;border-radius:0}
  .fp-lyr-line{font-size:16px;padding:7px 2px}
  .fp-lyr-head-t{font-size:13px}.fp-lyr-head-s{font-size:11px}
}

/* Desktop layout: lyrics are shown next to the player, not over it */
@media(min-width:900px){
  .mini-player{
    max-width:620px;
    padding:12px 16px 8px;
    border-radius:22px;
  }
  .mini-thumb{width:52px;height:52px;border-radius:14px}
  .mini-title{font-size:14px}
  .mini-artist{font-size:12px}
  .fp-cov{width:min(100%,280px);height:min(100%,280px)}

  .fp-card{
    width:min(1280px,96vw);
    max-height:min(92vh,920px);
    grid-template-columns:minmax(210px,280px) minmax(240px,1fr) 0fr;
    grid-template-areas:'cover title lyrics' 'cover artist lyrics' 'cover progress lyrics' 'cover controls lyrics' 'cover volume lyrics';
    gap:16px 14px;
    align-items:stretch;
    transition:transform .4s,grid-template-columns .42s cubic-bezier(.2,.9,.3,1),gap .42s cubic-bezier(.2,.9,.3,1);
  }
  .fp-card.lyrics-open{grid-template-columns:minmax(210px,280px) minmax(240px,1fr) minmax(360px,520px);gap:16px 22px}
  .fp-tt,.fp-ar{padding-right:8px}
  .fp-lyr-panel{
    position:relative;
    inset:auto;
    grid-area:lyrics;
    display:flex;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,16,22,.92),rgba(8,8,12,.95));
    border:1px solid transparent;
    padding:0;
    width:100%;
    min-width:0;
    min-height:520px;
    max-height:min(82vh,780px);
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    transform:translateX(16px);
    z-index:1;
    overflow:hidden;
    transition:opacity .35s cubic-bezier(.2,.9,.3,1),transform .35s cubic-bezier(.2,.9,.3,1),padding .35s cubic-bezier(.2,.9,.3,1),border-color .25s,visibility 0s linear .35s;
  }
  .fp-lyr-panel.show{opacity:1;pointer-events:auto;visibility:visible;transform:none;padding:18px 16px 14px;border-color:var(--card-b);transition-delay:0s}
  .fp-lyr-body{padding:20px 6px 16px;mask-image:none;-webkit-mask-image:none}
  [data-theme=light] .fp-lyr-panel{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(247,247,244,.96))}
}

/* ============================================================
   RIPPLE EFFECT — on clicks
   ============================================================ */
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:rippleFx .6s linear;pointer-events:none;background:rgba(255,255,255,.32);mix-blend-mode:overlay}
[data-theme=light] .ripple{background:rgba(0,0,0,.12);mix-blend-mode:multiply}
@keyframes rippleFx{to{transform:scale(4);opacity:0}}

/* ============================================================
   COMMAND PALETTE (Ctrl+K) — global quick search
   ============================================================ */
.cmd-pal-wrap{position:fixed;inset:0;z-index:800;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(0,0,0,.82);opacity:0;pointer-events:none;transition:opacity .25s}
.cmd-pal-wrap.show{opacity:1;pointer-events:all}
.cmd-pal{width:min(620px,94vw);max-height:70vh;background:var(--pl);border:1px solid var(--card-b);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;transform:translateY(-12px) scale(.97);transition:transform .28s cubic-bezier(.2,.9,.3,1);display:flex;flex-direction:column}
.cmd-pal-wrap.show .cmd-pal{transform:none}
.cmd-pal-in{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--card-b)}
.cmd-pal-in i{font-size:16px;color:var(--sub)}
.cmd-pal-in input{flex:1;font-size:15px;font-weight:500;background:transparent;color:var(--txt)}
.cmd-pal-in input::placeholder{color:var(--muted)}
.cmd-pal-hint{font-size:10px;color:var(--muted);padding:3px 8px;border-radius:6px;border:1px solid var(--card-b);background:var(--glass);font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.cmd-pal-list{flex:1;overflow-y:auto;padding:8px}
.cmd-pal-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;cursor:pointer;transition:background .15s}
.cmd-pal-item:hover,.cmd-pal-item.sel{background:var(--glass-h)}
.cmd-pal-item-ico{width:36px;height:36px;border-radius:10px;background:var(--glass);display:flex;align-items:center;justify-content:center;color:var(--sub);flex-shrink:0}
.cmd-pal-item.sel .cmd-pal-item-ico{background:var(--acc);color:#fff}
.cmd-pal-item-txt{flex:1;min-width:0}
.cmd-pal-item-t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-pal-item-s{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-pal-empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:13px}
.cmd-pal-sect{padding:8px 14px 6px;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1px;text-transform:uppercase}

/* ============================================================
   EQUALIZER in mini-player
   ============================================================ */
.mini-eq{display:flex;align-items:flex-end;gap:2px;width:0;height:14px;padding:0;opacity:0;overflow:hidden;flex-shrink:0;transition:opacity .3s,width .3s,padding .3s}
.mini-eq.on{opacity:1;width:18px;padding:0 1px}
.mini-eq span{display:block;width:3px;background:var(--acc);border-radius:1px;animation:eqBar 1s ease-in-out infinite}
.mini-eq span:nth-child(1){height:40%;animation-delay:-.3s}
.mini-eq span:nth-child(2){height:85%;animation-delay:-.7s}
.mini-eq span:nth-child(3){height:55%;animation-delay:-.1s}
.mini-eq span:nth-child(4){height:70%;animation-delay:-.5s}
@keyframes eqBar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ============================================================
   SLEEP TIMER — indicator on mini-player
   ============================================================ */
.sleep-ind{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--acc);color:#fff;display:none;align-items:center;justify-content:center;font-size:9px;font-weight:700;box-shadow:0 2px 8px rgba(var(--ar),var(--ag),var(--ab),.5);animation:sleepPulse 2.2s ease infinite}
.sleep-ind.on{display:flex}
@keyframes sleepPulse{0%,100%{box-shadow:0 2px 8px rgba(var(--ar),var(--ag),var(--ab),.5)}50%{box-shadow:0 2px 16px rgba(var(--ar),var(--ag),var(--ab),.8)}}

/* ============================================================
   ACCENT COLOR PICKER in settings
   ============================================================ */
.accent-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:8px}
.accent-sw{aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;position:relative;transition:transform .2s,border-color .2s}
.accent-sw:hover{transform:scale(1.12)}
.accent-sw.on{border-color:var(--txt);transform:scale(1.08)}
.accent-sw.on::after{content:'';position:absolute;inset:3px;border-radius:50%;border:2px solid var(--pl)}

/* ============================================================
   BLURRED ALBUM ART BG in fp-card
   ============================================================ */
.fp-bgart{position:absolute;inset:-40px;background:var(--bgart,#000) center/cover no-repeat;filter:blur(50px) saturate(1.4);opacity:0;transition:opacity .5s,background-image .4s;z-index:0;pointer-events:none;border-radius:inherit}
.fp-bgart.on{opacity:.42}
[data-theme=light] .fp-bgart.on{opacity:.3}
.fp-card > *:not(.fp-bgart):not(.fp-lyr-panel){position:relative;z-index:1}
.fp-bd.fp-bgart-active{background:rgba(0,0,0,.95)}

/* ============================================================
   KEYBOARD SHORTCUTS HINT POPUP
   ============================================================ */
.kshow-wrap{position:fixed;inset:0;z-index:750;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);opacity:0;pointer-events:none;transition:opacity .25s}
.kshow-wrap.show{opacity:1;pointer-events:all}
.kshow{background:var(--pl);border:1px solid var(--card-b);border-radius:22px;padding:28px;width:min(560px,92vw);max-height:82vh;overflow-y:auto;transform:scale(.95);transition:transform .28s cubic-bezier(.2,.9,.3,1)}
.kshow-wrap.show .kshow{transform:none}
.kshow-t{font-family:var(--fh);font-size:18px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.kshow-s{color:var(--sub);font-size:12px;margin-bottom:20px}
.kshow-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.kshow-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--card-b)}
.kshow-lbl{font-size:13px;color:var(--sub)}
.kshow-kbd{display:inline-flex;align-items:center;gap:4px}
.kshow-k{padding:3px 8px;background:var(--glass);border:1px solid var(--card-b);border-radius:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-weight:700;min-width:22px;text-align:center}
@media(max-width:600px){.kshow-grid{grid-template-columns:1fr}}

.btn-a,.btn-g,.btn-hp,.btn-hs,.asub-btn,.aguest,.mbtn-p,.mbtn-s,.chip-btn,.sbtn,.dl-btn,.sb-btn,.search-tab,.atab{border-radius:999px}
.mini-btn,.mini-btn-play,.fp-pp,.fp-step-btn,.fp-stop,.fp-menu,.fp-x,.fp-lyr-toggle,.fp-lyr-close,.burger,.t3,.tlk,.eye-btn{border-radius:50%}
body,button,input,textarea,select{letter-spacing:0}

@keyframes slideDownRight{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}
#update-banner #update-install:hover{transform:translateY(-1px) scale(1.01);box-shadow:0 10px 28px rgba(var(--ar),var(--ag),var(--ab),.55)}
#update-banner #update-install:active{transform:translateY(0) scale(.99)}
#update-banner #update-close:hover{color:#fff}