:root{--spotify-black:#121212;--spotify-base:#000;--spotify-gray:#b3b3b3;--spotify-light-gray:#282828;--spotify-green:#1db954;--spotify-white:#fff;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--spotify-base);color:var(--spotify-white);overflow:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:#ffffff4d;background-clip:content-box;border:3px solid #0000;border-radius:6px}::-webkit-scrollbar-thumb:hover{background-color:#ffffff80}.app-container{grid-template:"sidebar main"1fr"player player"90px/240px 1fr;height:100vh;display:grid}@media (width<=768px){.app-container{grid-template:"main"1fr"player"/1fr}}.sidebar{background-color:var(--spotify-base);z-index:50;flex-direction:column;grid-area:sidebar;padding:8px;transition:transform .3s;display:flex;position:relative}@media (width<=768px){.sidebar{z-index:2000;width:280px;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0)}}.sidebar-container{background-color:var(--spotify-black);border-radius:8px;flex-direction:column;flex:1;padding:8px 12px;display:flex;overflow-y:auto}.nav-item{color:var(--spotify-gray);border-radius:4px;align-items:center;gap:16px;padding:12px 16px;font-weight:700;transition:color .2s;display:flex}.nav-item:hover,.nav-item.active{color:var(--spotify-white)}.library-header{color:var(--spotify-gray);align-items:center;gap:16px;padding:12px 16px;font-weight:700;display:flex}.main-content{background:linear-gradient(180deg, #333 0%, var(--spotify-black) 100%);border-radius:8px;flex-direction:column;grid-area:main;margin:8px 8px 8px 0;display:flex;position:relative;overflow-y:auto}@media (width<=768px){.main-content{margin:8px}}.main-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#121212cc;justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:sticky;top:0}.mobile-menu-btn{color:var(--spotify-white);cursor:pointer;background:0 0;border:none;margin-right:12px;padding:8px;display:none}@media (width<=768px){.mobile-menu-btn{display:block}}.upload-btn{background-color:var(--spotify-white);color:var(--spotify-base);border-radius:500px;align-items:center;gap:8px;padding:12px 32px;font-weight:700;transition:transform .1s,background-color .1s;display:flex}.upload-btn:hover{background-color:#f6f6f6;transform:scale(1.04)}.upload-btn:active{background-color:#e6e6e6;transform:scale(1)}.playlist-view{flex:1;padding:24px}.playlist-title{margin-bottom:24px;font-size:32px;font-weight:900}.song-list{flex-direction:column;width:100%;display:flex}.song-item{color:var(--spotify-gray);cursor:pointer;border-radius:4px;grid-template-columns:40px 1fr 100px;align-items:center;padding:8px 16px;transition:background-color .2s;display:grid}.song-item:hover{color:var(--spotify-white);background-color:#ffffff1a}.song-item.playing{color:var(--spotify-green)}.song-index{text-align:right;padding-right:16px}.song-title{color:var(--spotify-white);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.song-item.playing .song-title{color:var(--spotify-green)}.player-bar{background-color:var(--spotify-base);border-top:1px solid var(--spotify-light-gray);grid-area:player;grid-template-columns:1fr 2fr 1fr;align-items:center;height:90px;padding:0 16px;display:grid}.player-now-playing{align-items:center;gap:14px;display:flex}.now-playing-info{flex-direction:column;justify-content:center;display:flex}.now-playing-title{font-size:14px;font-weight:500}.player-controls-container{flex-direction:column;align-items:center;gap:8px;display:flex}.player-buttons{align-items:center;gap:24px;display:flex}.control-btn{color:var(--spotify-gray);transition:color .2s}.control-btn:hover{color:var(--spotify-white)}.play-pause-btn{background-color:var(--spotify-white);color:var(--spotify-base);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:transform .1s;display:flex}.play-pause-btn:hover{color:var(--spotify-base);transform:scale(1.05)}.playback-bar{align-items:center;gap:8px;width:100%;max-width:600px;display:flex}.time{color:var(--spotify-gray);text-align:right;min-width:35px;font-size:11px}.progress-container{cursor:pointer;flex:1;align-items:center;height:12px;display:flex}.progress-bg{background-color:#4d4d4d;border-radius:2px;width:100%;height:4px;position:relative}.progress-fg{background-color:var(--spotify-white);border-radius:2px;height:100%;position:absolute;top:0;left:0}.progress-container:hover .progress-fg{background-color:var(--spotify-green)}.progress-container:hover .progress-thumb{display:block}.progress-thumb{background-color:var(--spotify-white);border-radius:50%;width:12px;height:12px;display:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.player-volume{justify-content:flex-end;align-items:center;gap:8px;display:flex}.volume-bar{flex:none;width:90px}@media (width<=768px){.player-bar{grid-template-columns:1fr auto;grid-template-areas:"now-playing now-playing""controls controls""playback playback";gap:16px;height:auto;padding:16px;display:grid}.player-controls-container{display:contents}.player-now-playing{grid-area:now-playing;justify-content:center}.player-buttons{grid-area:controls;justify-content:center}.playback-bar{grid-area:playback}.player-volume{display:none}}