body {
  margin:0;
  font-family: sans-serif;
  background:#121212;
  color:#fff;
}
#container { display:flex; height:100vh; }
#sidebar {
  width:250px;
  background:#181818;
  padding:10px;
  overflow-y:auto;
}
#playlist li { padding:10px; cursor:pointer; }
#playlist li.active { background:#1db954; color:#000; }
#player {
  flex:1;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:50px;
}
#player-content { text-align:center; width:400px; }
#duetImg { width:100%; margin-bottom:20px; }
#cover { width:300px; height:300px; object-fit:cover; border-radius:10px; margin-bottom:15px; }
#info { margin-bottom:15px; }
#title { font-size:1.5em; margin:0; }
#artist { font-size:1.2em; margin:0; color:#bbb; }
#customPlayer { text-align:center; }
#progressContainer { width:100%; height:8px; background:#333; border-radius:4px; cursor:pointer; margin-bottom:10px; }
#progress { width:0; height:100%; background:#1DB954; border-radius:4px; }
#controls { display:flex; justify-content:center; gap:10px; margin-bottom:10px; flex-wrap:nowrap; }
#controls button { width:50px; height:50px; background:#181818; border:none; border-radius:10px; cursor:pointer; display:flex; justify-content:center; align-items:center; transition:transform 0.2s; }
#controls button:hover { transform: scale(1.1); }
#controls button.active { background:#1DB954; }
#controls button img { width:36px; height:36px; }
#volumeSlider { width:100%; }

input[type="file"] { margin-bottom:15px; padding:5px; background:#181818; border:none; border-radius:5px; color:#fff; cursor:pointer; }