:root{--bg:#160a2e;--pink:#ff3d81;--yellow:#ffd23f;--cyan:#22e4d6;--violet:#7b5cff;--ink:#fff8ee}
*{box-sizing:border-box}
body{margin:0;font-family:'Fredoka',sans-serif;color:var(--ink);background:radial-gradient(circle at 15% 0,#3a1a7a,transparent 45%),radial-gradient(circle at 90% 20%,#7a1a5a,transparent 40%),var(--bg);min-height:100vh;padding-bottom:120px}
a{color:inherit;text-decoration:none}
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 5vw;position:sticky;top:0;z-index:5;background:#160a2eee;backdrop-filter:blur(8px)}
.logo{font-family:'Righteous';font-size:1.6rem;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan));-webkit-background-clip:text;color:transparent}
.search{display:flex;flex:1;max-width:460px;min-width:220px}
.search input{flex:1;padding:10px 16px;border:0;border-radius:30px 0 0 30px;font:inherit;background:#2b1856;color:var(--ink)}
.search button,.play,.bar button{border:0;font:inherit;cursor:pointer;background:linear-gradient(90deg,var(--pink),var(--yellow));color:#2a0a3a;font-weight:600;padding:10px 18px;border-radius:0 30px 30px 0}
nav a{background:var(--violet);padding:8px 16px;border-radius:20px}
.hero{position:relative;text-align:center;padding:26px 5vw 12px;overflow:hidden}
.hero h1{font-family:'Righteous';font-size:clamp(1.8rem,5vw,3rem);margin:0;position:relative}
.hero p{position:relative;opacity:.85;margin:.4rem 0 0}
.eq-deco{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-around;opacity:.28}
.eq-deco i{width:3%;height:var(--h);background:linear-gradient(var(--pink),var(--cyan));border-radius:6px 6px 0 0;animation:bounce 1.1s var(--d) infinite alternate}
@keyframes bounce{to{transform:scaleY(.25);transform-origin:bottom}}
.bar2{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 5vw}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{padding:8px 16px;border-radius:20px;background:#2b1856;font-weight:600}
.tabs a.on{background:var(--yellow);color:#2a0a3a}.tabs .c-a.on{background:var(--cyan)}.tabs .c-v.on{background:var(--pink);color:#fff}
.bar2 select{padding:9px 14px;border-radius:20px;border:0;background:#2b1856;color:var(--ink);font:inherit;max-width:100%}
.strip{display:flex;gap:14px;overflow-x:auto;padding:6px 5vw 12px;scrollbar-width:thin}
.strip a{flex:0 0 74px;text-align:center;font-size:.78rem}
.strip .av{width:64px;height:64px;margin:0 auto 4px;border:3px solid transparent;font-size:1.4rem}
.strip a.on .av{border-color:var(--yellow)}
.strip span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:600;background:linear-gradient(135deg,hsl(var(--h) 90% 55%),hsl(calc(var(--h) + 70) 90% 60%))}
.av img{width:100%;height:100%;object-fit:cover}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:10px;padding:10px 5vw}
.card{min-width:0;display:flex;align-items:center;gap:12px;background:#24124d;border-radius:16px;padding:10px 12px;border-left:5px solid var(--cyan)}
.card.c-v{border-color:var(--pink)}
.card.playing{outline:3px solid var(--yellow)}
.meta{flex:1;min-width:0}
.card h3{margin:0;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card p{margin:2px 0 0;opacity:.7;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .play{flex:none;width:44px;height:44px;border-radius:50%;padding:0;font-size:1rem}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:14px 5vw}
.pager a,.pager span{min-width:42px;text-align:center;padding:10px 12px;border-radius:12px;background:#2b1856}
.pager .on{background:var(--yellow);color:#2a0a3a;font-weight:600}
.empty{grid-column:1/-1;text-align:center;opacity:.7}
.player{position:fixed;left:0;right:0;bottom:0;z-index:9;background:#120826f2;backdrop-filter:blur(10px);border-top:3px solid var(--pink);max-height:92vh;overflow:auto}
.hidden{display:none!important}
.bar{display:flex;justify-content:space-between;align-items:center;padding:10px 5vw;gap:10px}
.bar b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar button{border-radius:50%;width:40px;height:40px;padding:0;margin-left:6px}
.audioUI{padding:10px 5vw 0;display:grid;gap:10px;grid-template-columns:2fr 1fr}
#spec{width:100%;height:120px;background:#0b0418;border-radius:14px}
.eq{display:flex;justify-content:space-around;align-items:center;background:#24124d;border-radius:14px;padding:8px}
.eq label{display:grid;justify-items:center;font-size:.75rem;gap:4px}
.eq input{writing-mode:vertical-lr;direction:rtl;height:90px;accent-color:var(--yellow)}
#a{grid-column:1/-1;width:100%}
.tvwrap{display:grid;place-items:center;padding:10px 5vw 0}
.tv{width:min(720px,100%);background:linear-gradient(#b8642a,#7a3a12);border-radius:26px;padding:16px 16px 10px;box-shadow:0 10px 0 #4a2208,0 0 40px #ff3d8155;position:relative}
.tv::before,.tv::after{content:"";position:absolute;top:-34px;width:4px;height:36px;background:#ccc;transform-origin:bottom}
.tv::before{left:42%;transform:rotate(-25deg)}.tv::after{right:42%;transform:rotate(25deg)}
.screen{border-radius:40px/28px;overflow:hidden;background:#000;border:6px solid #1c0d05;aspect-ratio:16/9}
.screen video{width:100%;height:100%;display:block;background:#000}
.knobs{display:flex;justify-content:flex-end;gap:8px;padding-top:6px}
.knobs i{width:14px;height:14px;border-radius:50%;background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
label,input,button{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
@media(max-width:640px){.audioUI{grid-template-columns:1fr}.top{padding:10px 4vw}.hero{padding:16px 4vw 6px}.card{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.eq-deco i{animation:none}}
/* forms / admin */
.box{max-width:560px;margin:30px auto;background:#24124d;border-radius:20px;padding:22px}
.box input,.box select{width:100%;padding:10px;margin:6px 0 12px;border-radius:10px;border:0;font:inherit;background:#2b1856;color:var(--ink)}
.box button{background:linear-gradient(90deg,var(--pink),var(--yellow));border:0;border-radius:20px;padding:10px 20px;font:inherit;font-weight:600;cursor:pointer}
.msg{background:var(--yellow);color:#2a0a3a;padding:8px 12px;border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{padding:6px;border-bottom:1px solid #ffffff22;text-align:left}

.count{padding:0 5vw;margin:8px 0 0;opacity:.75}
body{overflow-x:hidden}
.pbar{height:16px;background:#2b1856;border-radius:10px;overflow:hidden;margin-top:14px}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan));transition:width .15s}
#pg small{display:block;margin-top:6px;opacity:.85}