:root{--primary-color: #646cff;--bg-gradient-start: #1a1a2e;--bg-gradient-end: #16213e;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--text-main: #e0e0e0;--text-muted: #888}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,var(--bg-gradient-start),var(--bg-gradient-end));color:var(--text-main);min-height:100vh;display:flex;justify-content:center;align-items:center}#app{width:100%;max-width:900px;padding:20px}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:20px;padding:30px;box-shadow:0 8px 32px #0000004d}h1{text-align:center;margin-bottom:30px;color:#fff;font-weight:600;letter-spacing:1px}.main-content{display:flex;gap:30px}@media (max-width: 768px){.main-content{flex-direction:column}}.playlist-container{flex:1;background:#0003;border-radius:12px;padding:15px;max-height:400px;overflow-y:auto}.playlist-container h2{font-size:1.2rem;margin-bottom:15px;color:var(--primary-color)}#playlist{list-style:none}#playlist li{padding:12px 15px;margin-bottom:8px;background:#ffffff08;border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center}#playlist li:hover{background:#ffffff1a;transform:translate(5px)}#playlist li.active{background:var(--primary-color);color:#fff;font-weight:700}.player-container{flex:1.5;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0003;border-radius:12px;padding:30px 20px}#current-track-title{font-size:1.4rem;margin-bottom:20px;text-align:center;min-height:34px}.progress-container{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:25px}#progress-bar,#volume-bar{-webkit-appearance:none;width:100%;height:6px;background:#fff3;border-radius:5px;outline:none;cursor:pointer}#progress-bar::-webkit-slider-thumb,#volume-bar::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--primary-color);border-radius:50%;transition:transform .1s}#progress-bar::-webkit-slider-thumb:hover,#volume-bar::-webkit-slider-thumb:hover{transform:scale(1.2)}.controls{display:flex;gap:20px;align-items:center;margin-bottom:25px}.controls button{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;transition:all .2s ease;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}.controls button:hover{background:#ffffff1a}#btn-play-pause{font-size:2rem;background:var(--primary-color);color:#fff}#btn-play-pause:hover{background:#535bf2;transform:scale(1.05)}.volume-container{display:flex;align-items:center;gap:10px;width:60%}