/* Reset & base */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Helvetica Neue',sans-serif;}
body{background:#121212;color:#fff;overflow-x:hidden;}

/* Header */
.header{
  display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#000;position:sticky;top:0;z-index:10;
}
.logo{font-weight:800;font-size:1.8rem;color:#1db954;}
.nav a{color:#fff;margin-left:1.5rem;text-decoration:none;position:relative;transition:color 0.3s;}
.nav a:hover{color:#1db954;}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:#1db954;transition:width 0.3s;
}
.nav a:hover::after{width:100%;}

/* Hero / Player */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 1rem;}
.cover-container{width:250px;height:250px;overflow:hidden;border-radius:15px;box-shadow:0 0 30px rgba(0,255,150,0.5);margin-bottom:1.5rem;}
.cover-container img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.cover-container img.playing{transform:scale(1.05) rotate(2deg);}

.player h2{font-size:1.5rem;margin-bottom:0.5rem;}
.player p{color:#aaa;margin-bottom:1rem;}

/* Playlist Grid */
.playlist{padding:2rem 1rem;}
.playlist h3{margin-bottom:1rem;font-size:1.3rem;color:#1db954;}
.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;}
.playlist-grid .track-card{
  background:#1a1a1a;padding:1rem;border-radius:10px;display:flex;flex-direction:column;align-items:center;cursor:pointer;
  transition:transform 0.3s, box-shadow 0.3s;
}
.playlist-grid .track-card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(29,185,84,0.5);
}
.track-card img{width:100%;border-radius:10px;margin-bottom:0.5rem;transition:transform 0.5s;}
.track-card img.playing{transform:scale(1.05);}

/* Footer */
.footer{padding:1rem;text-align:center;color:#555;background:#000;margin-top:2rem;font-size:0.9rem;}

/* Responsive */
@media(max-width:768px){
  .nav{display:none;}
  .playlist-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}