:root{
  --bg:#121212;
  --panel:#181818;
  --muted:#b3b3b3;
  --accent:#1db954;
}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;font-family:Inter, 'Segoe UI', Roboto, Arial, sans-serif;
  background:linear-gradient(180deg,#0f0f0f 0%, #121212 100%);
  color:#fff;font-size:14px;
}
.app{display:flex;height:100vh;}
.sidebar{width:220px;background:var(--panel);padding:20px;display:flex;flex-direction:column;gap:18px}
.logo{font-weight:800;font-size:20px}
.logo span{color:var(--accent)}
.sidebar nav a{display:block;padding:8px 6px;border-radius:6px;color:var(--muted);cursor:pointer}
.sidebar nav a.active{background:rgba(255,255,255,0.05);color:#fff}
.playlists{margin-top:auto;color:var(--muted);font-size:13px}
.main{flex:1;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 26px}
.search input{background:#101010;border:1px solid rgba(255,255,255,0.04);padding:10px 12px;border-radius:20px;color:var(--muted);width:420px}
.hero{display:flex;gap:18px;padding:20px 26px}
.hero-left{flex:1}
.hero-left h1{margin:0;font-size:28px}
.hero-right{width:200px;height:120px;background:linear-gradient(135deg,#2a2a2a,#111);border-radius:8px}
.tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:0 26px 120px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:12px;border-radius:10px;display:flex;gap:12px;align-items:center}
.cover{width:64px;height:64px;border-radius:6px;background:linear-gradient(135deg,#333,#0c0c0c);flex-shrink:0}
.track-meta{display:flex;flex-direction:column}
.track-meta .title{font-weight:600}
.track-meta .artist{color:var(--muted);font-size:13px}
.play-btn{margin-left:auto;background:var(--accent);border:none;color:#000;padding:8px 12px;border-radius:6px;cursor:pointer}
.player{position:fixed;left:220px;right:0;bottom:0;height:92px;background:var(--panel);display:flex;align-items:center;padding:10px 18px;gap:14px}
.player-left{display:flex;align-items:center;gap:12px;width:280px}
.player-center{flex:1;display:flex;flex-direction:column;gap:8px;align-items:center}
.controls button{background:none;border:none;color:#fff;font-size:20px;margin:0 8px;cursor:pointer}
.progress{display:flex;align-items:center;gap:8px;width:80%}
.progress input[type=range]{flex:1}
.player-right{display:flex;gap:8px}
@media(max-width:900px){.sidebar{display:none}.player{left:0}}