:root{--h1:290;--h2:190;--h3:335;--ink:#f6f3ff;--mut:#aaa5c8;--acc:hsl(var(--h3) 100% 62%);--acc2:hsl(var(--h2) 100% 58%);--glass:rgba(18,14,38,.62);--line:rgba(255,255,255,.14)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#0a0816;color:var(--ink);font:15px/1.6 Vazirmatn,Tahoma,system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden;display:flex;flex-direction:column}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button,select,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px}
/* backgrounds */
#bg{position:fixed;inset:0;z-index:-2;transition:opacity .5s;background:#0a0816}
#bg.out{opacity:0}
#bg.b0{background:radial-gradient(60% 50% at 20% 20%,hsl(var(--h1) 90% 45%/.75),transparent),radial-gradient(55% 55% at 85% 30%,hsl(var(--h2) 95% 42%/.65),transparent),radial-gradient(60% 60% at 50% 100%,hsl(var(--h3) 90% 45%/.7),transparent),#0a0816}
#bg.b1{background:conic-gradient(from 210deg at 50% 60%,hsl(var(--h1) 90% 12%),hsl(var(--h2) 95% 38%),hsl(var(--h3) 90% 40%),hsl(var(--h1) 90% 12%))}
#bg.b2{background:linear-gradient(180deg,hsl(var(--h1) 80% 8%) 0,hsl(var(--h1) 80% 22%) 45%,hsl(var(--h3) 95% 50%) 78%,hsl(var(--h2) 100% 65%) 100%)}
#bg.b3{background:linear-gradient(hsl(var(--h2) 100% 60%/.18) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,hsl(var(--h3) 100% 60%/.18) 1px,transparent 1px) 0 0/44px 44px,radial-gradient(80% 60% at 50% 110%,hsl(var(--h1) 100% 40%),transparent),#07050f}
#bg.b4{background:repeating-linear-gradient(115deg,hsl(var(--h1) 90% 14%) 0 40px,hsl(var(--h2) 90% 18%) 40px 80px),#0a0816}
#bg.b5{background:radial-gradient(circle at 30% 70%,hsl(var(--h3) 100% 55%/.8),transparent 40%),radial-gradient(circle at 75% 25%,hsl(var(--h2) 100% 55%/.8),transparent 38%),radial-gradient(circle at 50% 50%,hsl(var(--h1) 90% 30%),#08060f 70%)}
.grain{position:fixed;inset:0;z-index:-1;background:radial-gradient(transparent 40%,rgba(0,0,0,.55));pointer-events:none}
/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:max(14px,env(safe-area-inset-top)) 18px 0;gap:12px}
.clock{display:flex;align-items:baseline;gap:10px}
.clock b{font-size:1.9rem;font-weight:600;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.clock span{color:var(--mut);font-size:.85rem}
.tools{display:flex;gap:8px}
.tools button,.ctrl button,.sub>button,.panel .ph button{width:42px;height:42px;border-radius:50%;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:1.1rem;transition:transform .15s,background .15s}
button:active{transform:scale(.92)}
@media(hover:hover){.tools button:hover,.ctrl button:hover,.sub>button:hover{background:rgba(255,255,255,.14)}}
/* player */
.player{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 20px max(20px,env(safe-area-inset-bottom));min-height:0;width:100%;max-width:560px;margin:0 auto}
.stage{position:relative;width:min(78vw,46vh,420px);aspect-ratio:1}
#eq{position:absolute;inset:-12%;width:124%;height:124%}
.logo{position:absolute;inset:19%;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.16),var(--glass) 60%);border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:0 0 60px hsl(var(--h3) 100% 55%/.35),inset 0 0 30px rgba(255,255,255,.05);transition:transform .08s}
.logo span{font-size:clamp(1.3rem,6.2vw,2.1rem);font-weight:700;letter-spacing:.02em}
.logo i{color:var(--acc);font-style:normal}
.logo small{margin-top:4px;font-size:.62rem;letter-spacing:.3em;color:var(--mut)}
.playing .logo small{color:#fff;text-shadow:0 0 10px var(--acc)}
.playing .logo small::before{content:"";display:inline-block;width:6px;height:6px;margin-inline-end:6px;border-radius:50%;background:#ff3b3b;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.meta{text-align:center;width:100%;min-height:3.6em}
.meta h2{font-size:1.25rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta p{color:var(--mut);font-size:.9rem}
.seek{display:flex;align-items:center;gap:10px;width:100%;font-size:.78rem;color:var(--mut);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--acc2),var(--acc)) 0/var(--p,0%) 100% no-repeat,rgba(255,255,255,.18);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--acc)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#fff}
.ctrl{display:flex;align-items:center;gap:14px}
.ctrl .big{width:68px;height:68px;font-size:1.6rem;background:linear-gradient(135deg,var(--acc),var(--acc2));border:0;box-shadow:0 8px 30px hsl(var(--h3) 100% 55%/.45)}
#fav[aria-pressed=true]{color:var(--acc);background:rgba(255,255,255,.16);animation:pop .35s}
@keyframes pop{50%{transform:scale(1.35)}}
.sub{display:flex;align-items:center;gap:14px;width:100%;justify-content:center}
.sub>button{width:38px;height:38px;font-size:.95rem;opacity:.55}
.sub>button[aria-pressed=true]{opacity:1;border-color:var(--acc2)}
.vol{display:flex;align-items:center;gap:8px;width:min(52%,200px)}
/* panels */
.panel{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(380px,100%);z-index:10;background:var(--glass);backdrop-filter:blur(22px);border-inline-start:1px solid var(--line);padding:max(16px,env(safe-area-inset-top)) 18px 20px;overflow:auto;display:flex;flex-direction:column;gap:12px;transform:translateX(0)}
.panel[hidden]{display:none}
[dir=rtl] .panel{animation:inR .25s}
@keyframes inR{from{transform:translateX(-100%);opacity:0}}
.ph{display:flex;justify-content:space-between;align-items:center}
.ph h2{font-size:1.1rem}.ph small{color:var(--mut);font-weight:400}
.panel h3{font-size:.9rem;color:var(--acc2);margin-top:6px}
.panel label{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--mut);font-size:.9rem}
.panel label input[type=range]{max-width:55%}
.panel select,.panel #q{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--ink)}
.panel select option{color:#000}
.wide{padding:10px;border:1px solid var(--line)!important;border-radius:10px;margin-top:8px}
.bands{display:flex;justify-content:space-between;gap:6px;height:150px}
.bands div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.7rem;color:var(--mut)}
.bands input{writing-mode:vertical-lr;direction:rtl;width:22px;height:110px;flex:none;background:rgba(255,255,255,.18)}
.tabs{display:flex;gap:8px}.tabs button{flex:1;padding:6px;border-radius:10px;border:1px solid var(--line)}.tabs .on{background:var(--acc);color:#fff;border-color:transparent}
#ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
#ul li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;content-visibility:auto;contain-intrinsic-size:0 46px}
#ul li:hover{background:rgba(255,255,255,.08)}
#ul li.on{background:rgba(255,255,255,.14);box-shadow:inset 3px 0 var(--acc)}
#ul li b{font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ul li small{color:var(--mut)}
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,30px);background:#000c;border:1px solid var(--line);padding:8px 16px;border-radius:99px;opacity:0;transition:.3s;pointer-events:none;z-index:20;font-size:.85rem}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-height:640px){.meta{min-height:2.8em}.ctrl .big{width:58px;height:58px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}