/* Tunivo V5.3 production CSS */
:root{
  --bg:#080a0d;--panel:#0f1318;--panel2:#141922;--panel3:#0c1015;--line:#242c37;
  --text:#f6f8fb;--muted:#909aa8;--accent:#c8ff59;--accent-rgb:200,255,89;
  --accent2:#72d8ff;--accent2-rgb:114,216,255;--accent3:#b481ff;--hot:#ff6d91;
  --hero-a:#151b24;--hero-b:#10141a;--card-a:#12171f;--card-b:#0d1117;
  --ad-a:#11161c;--ad-b:#151b22;--side-a:#2e2251;--side-b:#153d4d;
  --shadow:0 18px 60px rgba(0,0,0,.30);--ease:.35s cubic-bezier(.2,.8,.2,1)
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:radial-gradient(circle at 12% -5%,rgba(var(--accent-rgb),.07),transparent 23%),radial-gradient(circle at 90% 0%,rgba(var(--accent2-rgb),.07),transparent 23%),var(--bg);transition:background var(--ease),color var(--ease)}
a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.app{padding-bottom:86px}
.topbar{position:sticky;top:0;z-index:80;height:66px;display:grid;grid-template-columns:226px minmax(300px,1fr) auto;gap:18px;align-items:center;padding:0 18px;background:rgba(8,10,13,.90);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.05)}
.brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:.12em}.logo{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#0a1105;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.search{position:relative}.search input{width:100%;height:42px;border:1px solid var(--line);border-radius:13px;background:var(--panel3);color:var(--text);outline:none;padding:0 44px 0 14px}.search span{position:absolute;right:9px;top:8px;color:var(--muted);font-size:10px;border:1px solid var(--line);border-radius:7px;padding:4px 6px}
.top-right{display:flex;align-items:center;justify-content:flex-end;gap:10px}.theme-switcher{display:flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(15,19,24,.88)}
.theme-dot{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0;box-shadow:0 0 0 1px rgba(255,255,255,.08)}.theme-dot.active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.09),0 0 18px rgba(var(--accent-rgb),.35)}
.theme-dot[data-theme=lime]{background:#c8ff59}.theme-dot[data-theme=cyan]{background:#59e7ff}.theme-dot[data-theme=violet]{background:#a879ff}.theme-dot[data-theme=rose]{background:#ff6fa3}.theme-dot[data-theme=amber]{background:#ffbd59}
.top-actions{display:flex;gap:8px}.top-actions button{height:36px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:#d6dde6;padding:0 11px}
.layout{display:grid;grid-template-columns:226px minmax(0,1fr) 310px;gap:18px;padding:18px}.left,.right{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 174px);overflow:auto}
.nav-block{margin-bottom:22px}.nav-title{font-size:9px;letter-spacing:.14em;color:#626d7b;font-weight:900;margin:0 0 7px 10px}.nav-link{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:11px;color:#acb6c3;font-size:12px;font-weight:700;margin-bottom:2px}.nav-link:hover,.nav-link.active{background:rgba(var(--accent-rgb),.07);color:#fff}.nav-link.active{box-shadow:inset 3px 0 var(--accent)}.count{font-size:9px;color:#737f8d}.create{width:100%;height:40px;border-radius:12px;border:1px dashed rgba(var(--accent-rgb),.28);background:var(--panel3);color:#d8dfe7;font-weight:800}
.main{min-width:0}.hero{min-height:285px;border:1px solid var(--line);border-radius:26px;padding:28px;background:radial-gradient(circle at 80% 28%,rgba(var(--accent2-rgb),.20),transparent 22%),radial-gradient(circle at 74% 74%,rgba(var(--accent-rgb),.12),transparent 21%),linear-gradient(135deg,var(--hero-a),var(--hero-b) 60%,var(--panel3));position:relative;overflow:hidden;box-shadow:var(--shadow)}
.live{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:rgba(255,109,145,.09);border:1px solid rgba(255,109,145,.23);color:#ff98b0;font-size:10px;font-weight:900}.live i{width:6px;height:6px;border-radius:50%;background:var(--hot)}.hero-copy{position:relative;z-index:3;max-width:590px;margin-top:20px}.hero .eyebrow{font-size:10px;color:var(--accent);font-weight:900;letter-spacing:.13em}.hero h1{font-size:clamp(34px,4.3vw,58px);line-height:.95;letter-spacing:-.05em;margin:10px 0 12px}.hero p{max-width:530px;color:#b4bdc8;line-height:1.58;margin:0;font-size:14px}.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.btn{height:41px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:#fff;padding:0 14px;font-weight:850;font-size:12px}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#0b1105}
.vinyl{position:absolute;right:4%;top:8%;width:180px;height:180px;border-radius:50%;background:repeating-radial-gradient(circle,#11161d 0 5px,#181f28 6px 8px),conic-gradient(from 40deg,var(--accent),var(--accent2),var(--accent3),var(--accent));opacity:.9}.vinyl:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--panel3);border:12px solid rgba(255,255,255,.05)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.quick a{min-height:78px;border:1px solid var(--line);border-radius:16px;padding:13px;background:linear-gradient(135deg,var(--card-a),var(--card-b));position:relative;overflow:hidden}.quick b{font-size:13px}.quick span{display:block;font-size:9px;color:var(--muted);margin-top:4px}.quick i{position:absolute;right:8px;bottom:-18px;font-style:normal;font-size:54px;color:var(--accent);opacity:.11}
.section{margin-top:28px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}.section-head h2{margin:0;font-size:20px}.section-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.section-head a{font-size:11px;color:var(--accent2)}
.card-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.track{border:1px solid var(--line);border-radius:17px;padding:8px;background:linear-gradient(180deg,var(--card-a),var(--card-b));min-width:0}.cover{aspect-ratio:1;border-radius:13px;background:var(--cover);position:relative;overflow:hidden}.cover-title{position:absolute;left:10px;bottom:10px;font-weight:950;font-size:16px;text-transform:uppercase}.track h3{font-size:12px;margin:9px 3px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track p{font-size:10px;color:var(--muted);margin:0 3px 7px}.tags{display:flex;gap:5px;flex-wrap:wrap;margin:0 3px}.tag{font-size:8px;padding:3px 6px;border:1px solid rgba(var(--accent-rgb),.18);border-radius:999px;color:#aab4c1}
.personal-row{display:grid;grid-template-columns:1.05fr .95fr;gap:12px}.panel{border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden}.panel-head{padding:14px 14px 8px}.panel-head h3{font-size:14px;margin:0}.panel-head span{font-size:9px;color:var(--muted)}.personal-feature{min-height:210px;margin:12px;border-radius:15px;padding:18px;display:flex;align-items:end;background:linear-gradient(180deg,transparent,rgba(0,0,0,.83)),radial-gradient(circle at 30% 25%,rgba(var(--accent-rgb),.30),transparent 20%),linear-gradient(135deg,var(--hero-a),var(--side-b) 58%,var(--hero-b))}.personal-feature h3{font-size:21px;margin:0 0 5px}.personal-feature p{font-size:11px;color:#d2d9e0;margin:0 0 12px}.rising-row{display:grid;grid-template-columns:34px 42px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px 13px;border-top:1px solid var(--line)}.rank{font-weight:900;font-size:12px}.delta{font-size:8px;color:var(--accent)}.thumb{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--accent3),var(--accent2))}.info b{display:block;font-size:11px}.info span{font-size:9px;color:var(--muted)}
.ad-label{font-size:8px;letter-spacing:.16em;color:#7b8796;font-weight:900;text-transform:uppercase}.native-ad{margin-top:18px;border:1px solid rgba(var(--accent-rgb),.22);border-radius:18px;padding:16px;background:radial-gradient(circle at 84% 25%,rgba(var(--accent-rgb),.12),transparent 20%),linear-gradient(135deg,var(--ad-a),var(--ad-b));display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}.native-ad h3{margin:6px 0 5px;font-size:17px}.native-ad p{margin:0;color:#aab4c1;font-size:11px}.native-ad .cta{height:39px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a1105;padding:0 14px;font-weight:900;font-size:11px}.native-ad .ad-brand{color:var(--accent2);font-weight:900}
.banner-ad{margin-top:28px;border:1px solid rgba(var(--accent2-rgb),.22);border-radius:17px;background:linear-gradient(90deg,var(--ad-a),var(--ad-b));min-height:92px;padding:14px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}.banner-art{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,var(--accent3),var(--accent2));display:grid;place-items:center;font-weight:950;font-size:22px}.banner-ad h4{margin:4px 0;font-size:15px}.banner-ad p{margin:0;color:#a7b2bf;font-size:10px}.banner-ad button{height:36px;border:1px solid rgba(var(--accent-rgb),.24);border-radius:10px;background:rgba(var(--accent-rgb),.06);color:#fff;padding:0 12px;font-size:10px;font-weight:800}
.right-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:14px;margin-bottom:11px}.right-card h3{font-size:11px;margin:0 0 10px}.now-card{text-align:center}.now-cover{aspect-ratio:1;border-radius:15px;background:linear-gradient(135deg,var(--accent3),var(--accent2));margin-bottom:10px}.now-card b{display:block;font-size:13px}.now-card span{font-size:10px;color:var(--muted)}.queue-item,.trend-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}.qthumb{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent3),var(--accent2))}.queue-item b,.trend-item b{display:block;font-size:10px}.queue-item span,.trend-item span{font-size:8px;color:var(--muted)}.time{font-size:8px;color:#788390}
.sidebar-ad{border:1px solid rgba(var(--accent2-rgb),.20);border-radius:18px;overflow:hidden;background:var(--panel2);margin-bottom:11px}.sidebar-ad-visual{min-height:185px;padding:18px;display:flex;align-items:flex-end;position:relative;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78)),radial-gradient(circle at 68% 25%,rgba(var(--accent2-rgb),.42),transparent 22%),linear-gradient(135deg,var(--side-a),var(--side-b))}.sidebar-ad-visual h3{margin:4px 0 5px;font-size:19px}.sidebar-ad-visual p{margin:0 0 11px;color:#dde3e9;font-size:10px}.sidebar-ad-visual button{height:34px;border:0;border-radius:10px;background:#fff;color:#101318;padding:0 11px;font-size:10px;font-weight:900}
.player{position:fixed;left:0;right:0;bottom:0;z-index:90;height:76px;background:rgba(7,9,12,.96);backdrop-filter:blur(20px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:center;gap:18px;padding:0 18px}.player-now{display:flex;align-items:center;gap:10px;min-width:0}.mini-cover{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--accent3),var(--accent2));flex:0 0 auto}.player-now b,.player-now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-now b{font-size:11px}.player-now span{font-size:9px;color:var(--muted);margin-top:3px}.controls{text-align:center}.control-row{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:6px}.ctrl{border:0;background:none;color:#c5cdd6}.main-play{width:36px;height:36px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a0d11;font-weight:900}.progress{height:3px;border-radius:999px;background:#29313d;overflow:hidden}.progress i{display:block;height:100%;width:31%;background:linear-gradient(90deg,var(--accent),var(--accent2))}.player-actions{display:flex;justify-content:flex-end;gap:11px;color:#9ba5b1;font-size:10px}
@media(max-width:1200px){.topbar,.layout{grid-template-columns:200px minmax(0,1fr)}.right{display:none}.top-actions{display:none}.card-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.topbar{grid-template-columns:auto 1fr auto}.brand span{display:none}.layout{display:block;padding:14px}.left{display:none}.quick{grid-template-columns:repeat(2,1fr)}.card-row{grid-template-columns:repeat(2,1fr)}.personal-row{grid-template-columns:1fr}.native-ad{grid-template-columns:1fr}.banner-ad{grid-template-columns:1fr}.hero{min-height:300px;padding:24px}}
@media(max-width:600px){.topbar{padding:0 10px;gap:8px}.search span{display:none}.theme-dot{width:17px;height:17px}.card-row{display:flex;overflow-x:auto}.track{min-width:74%}.player{grid-template-columns:1fr auto;height:70px}.controls,.player-actions{display:none}}

.youtube-player-shell{
  margin-top:14px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:#05070a;box-shadow:0 10px 32px rgba(0,0,0,.22)
}
.youtube-player-shell .player-label{
  display:flex;justify-content:space-between;gap:8px;align-items:center;
  padding:8px 10px;background:var(--panel3);border-bottom:1px solid var(--line);
  font-size:9px;color:var(--muted)
}
.youtube-player-shell .player-label strong{color:var(--accent);letter-spacing:.08em}
.youtube-frame{aspect-ratio:16/9;min-height:160px;background:#05070a}
#youtube-player,#youtube-player iframe{width:100%!important;height:100%!important;min-height:160px}
.radio-mini-controls{display:grid;grid-template-columns:1fr auto auto;gap:6px;margin-top:8px}
.radio-mini-controls button{
  min-height:34px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font-size:10px;font-weight:800
}
.radio-mini-controls button:first-child{
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#091005;border:0
}
#radioStatus{font-size:9px;color:var(--muted);margin-top:7px}
.cover{background-image:var(--cover);background-size:cover;background-position:center}