body{ margin:0; background:#000; color:white; font-family:Arial; }
.app{ display:flex; height:calc(100vh - 120px); }
.sidebar{ width:220px; background:#070707; padding:20px; display:flex; flex-direction:column; gap:10px; }
.sidebar button{ background:#111; border:none; color:white; padding:10px; cursor:pointer; }
.main{ flex:1; padding:20px; overflow-y:auto; }
.search-bar{ display:flex; gap:10px; margin-bottom:20px; }
.search-bar input{ flex:1; padding:10px; background:#111; border:none; color:white; border-radius:20px; }
.search-bar button{ background:#1db954; border:none; color:black; padding:10px 20px; border-radius:20px; cursor:pointer; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:20px; }
.card{ background:#111; padding:10px; border-radius:8px; cursor:pointer; position:relative; }
.card img{ width:100%; border-radius:6px; }
.card .title{ margin-top:6px; font-size:14px; font-weight:bold; }
.card .artist{ font-size:12px; color:#aaa; }
.add-btn,.remove-btn{ position:absolute; top:8px; right:8px; background:#1db954; border:none; color:black; border-radius:50%; width:26px; height:26px; cursor:pointer; }
.video-drawer{ position:fixed; bottom:120px; left:0; right:0; height:400px; background:black; display:flex; justify-content:center; align-items:center; }
.hidden{ display:none; }
.close-btn{ position:absolute; top:10px; right:20px; background:red; border:none; color:white; padding:6px 10px; cursor:pointer; }
.player-bar{ height:120px; background:#111; display:flex; align-items:center; padding:0 20px; gap:15px; border-top:1px solid #222; }
.drawer-btn{ background:#1db954; border:none; color:black; padding:6px 10px; cursor:pointer; }
.player-bar img{ width:60px; height:60px; border-radius:4px; }
.controls button{ background:#1db954; border:none; color:black; padding:10px 14px; border-radius:50%; cursor:pointer; }