.App{min-height:100vh;background:linear-gradient(135deg,#1db954,#191414);color:#fff;display:flex;flex-direction:column}.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#0000004d;backdrop-filter:blur(10px)}@media (max-width: 768px){.app-header{padding:1rem}.app-header h1{font-size:1.5rem}.user-info{gap:.5rem}.user-info span{display:none}}.app-header h1{font-size:2rem;margin:0}.header-controls{display:flex;align-items:center;gap:1rem}.autoplay-button{padding:.5rem 1rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:20px;cursor:pointer;transition:all .3s;font-size:.9rem;font-weight:500}.autoplay-button:hover{background:#fff3}.autoplay-button.active{background:#1db954;border-color:#1db954;color:#fff}.autoplay-button.active:hover{background:#1ed760}.user-info{display:flex;align-items:center;gap:1rem}.user-avatar{width:40px;height:40px;border-radius:50%}.logout-button{padding:.5rem 1rem;background:transparent;border:1px solid white;color:#fff;border-radius:20px;cursor:pointer;transition:all .3s}.logout-button:hover{background:#fff;color:#191414}.login-button{padding:1rem 2rem;background:#1db954;border:none;color:#fff;border-radius:30px;font-size:1.2rem;cursor:pointer;transition:all .3s}.login-button:hover{background:#1ed760;transform:translateY(-2px)}.main-content{flex:1;display:flex;flex-direction:column;padding:2rem;gap:2rem;padding-bottom:120px}@media (max-width: 768px){.main-content{padding:1rem;padding-bottom:100px}}.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center}.welcome-screen h2{font-size:2.5rem;margin-bottom:1rem}.welcome-screen p{font-size:1.2rem;opacity:.8;margin-bottom:2rem}.search-container{position:relative;margin-bottom:2rem}.search-bar{display:flex;gap:1rem}.search-input{flex:1;padding:1rem;border:none;border-radius:25px;background:#ffffff1a;color:#fff;font-size:1rem}.search-input::placeholder{color:#fff9}.search-button{padding:1rem 1.5rem;background:#1db954;border:none;color:#fff;border-radius:25px;cursor:pointer;font-size:1.2rem}.search-button:disabled{background:#555;cursor:not-allowed}.search-suggestions{position:absolute;top:100%;left:0;right:0;background:#000000f2;backdrop-filter:blur(10px);border-radius:0 0 15px 15px;border:1px solid rgba(255,255,255,.1);border-top:none;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 20px #0000004d}.suggestion-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:all .2s;border-bottom:1px solid rgba(255,255,255,.05)}.suggestion-item:hover,.suggestion-item.active{background:#1db95433}.suggestion-item:last-child{border-bottom:none}.suggestion-image{width:40px;height:40px;border-radius:4px;object-fit:cover;flex-shrink:0}.suggestion-content{flex:1;min-width:0}.suggestion-name{font-weight:500;color:#fff;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-artist{font-size:.8rem;color:#ffffffb3;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-type{font-size:.7rem;color:#ffffff80;text-transform:capitalize}.loading-suggestion,.no-results{justify-content:center;font-style:italic;color:#fff9;cursor:default}.loading-suggestion:hover,.no-results:hover{background:transparent}@media (max-width: 768px){.search-suggestions{max-height:250px}.suggestion-item{padding:.5rem .75rem;gap:.5rem}.suggestion-image{width:35px;height:35px}.suggestion-name{font-size:.9rem}.suggestion-artist{font-size:.75rem}}.track-list{display:flex;flex-direction:column;gap:.5rem;max-height:60vh;overflow-y:auto}.track-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#ffffff1a;border-radius:10px;cursor:pointer;transition:all .3s}.track-item:hover{background:#fff3}.track-item.current{background:#1db9544d;border:2px solid #1db954}.track-album-art{width:50px;height:50px;border-radius:5px}.track-info{flex:1}.track-info h4{margin:0 0 .25rem;font-size:1rem}.track-info p{margin:0 0 .25rem;opacity:.8;font-size:.9rem}.album-name{font-size:.8rem;opacity:.6}.track-duration{font-size:.9rem;opacity:.8}.player{position:fixed;bottom:0;left:0;right:0;background:#000000e6;backdrop-filter:blur(10px);padding:1rem 2rem;display:flex;align-items:center;gap:2rem;border-top:1px solid rgba(255,255,255,.1);z-index:1000}@media (max-width: 768px){.player{padding:.75rem 1rem;gap:.75rem;flex-wrap:wrap;min-height:100px}.player-controls{gap:.5rem;order:1;width:100%;justify-content:center}.autoplay-toggle-container{gap:6px}.autoplay-label{font-size:.65rem}.autoplay-toggle{width:36px;height:20px}.autoplay-toggle-slider{width:14px;height:14px;top:3px}.autoplay-toggle.on .autoplay-toggle-slider{left:19px}}.player.no-track{justify-content:center;padding:2rem}.player-track-info{display:flex;align-items:center;gap:1rem;min-width:300px}@media (max-width: 768px){.player-track-info{min-width:200px;flex:1}}.player-album-art{width:60px;height:60px;border-radius:5px}.player-track-details h3{margin:0 0 .25rem;font-size:1rem}.player-track-details p{margin:0;opacity:.8;font-size:.9rem}.player-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.control-button{background:none;border:none;color:#fff;cursor:pointer;font-size:1.5rem;padding:.5rem;border-radius:50%;transition:all .3s}.control-button:hover{background:#ffffff1a}.play-pause{font-size:2rem}.autoplay-toggle-container{display:flex;align-items:center;gap:8px}.autoplay-label{font-size:.75rem;color:#b3b3b3;font-weight:500;letter-spacing:.5px}.autoplay-toggle{width:44px;height:24px;border-radius:12px;border:none;cursor:pointer;transition:all .3s ease;position:relative;outline:none}.autoplay-toggle.off{background:#4a4a4a}.autoplay-toggle.on{background:#1db954}.autoplay-toggle-slider{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:3px;transition:all .3s ease;box-shadow:0 2px 4px #0003}.autoplay-toggle.off .autoplay-toggle-slider{left:3px}.autoplay-toggle.on .autoplay-toggle-slider{left:23px}.autoplay-toggle:hover{transform:scale(1.05)}.autoplay-toggle.on:hover{background:#1ed760;box-shadow:0 0 8px #1db95466}.player-progress{display:flex;align-items:center;gap:1rem;flex:1}@media (max-width: 768px){.player-progress{order:2;width:100%;flex:none;margin-top:.5rem}}.progress-bar{flex:1;height:4px;background:#ffffff4d;border-radius:2px;overflow:hidden;cursor:pointer;transition:height .2s}.progress-bar:hover{height:6px}.progress-fill{height:100%;background:#1db954;transition:width .1s}.time{font-size:.8rem;opacity:.8;min-width:40px}.callback-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:2rem}.callback-container h2{font-size:2rem;margin-bottom:1rem}.callback-container button{padding:1rem 2rem;background:#1db954;border:none;color:#fff;border-radius:25px;cursor:pointer;font-size:1rem;margin-top:1rem}.recent-plays{margin-bottom:2rem}.recent-plays h2{font-size:1.5rem;margin-bottom:1rem;color:#fff}.recent-tracks{display:flex;flex-direction:column;gap:.5rem;max-height:400px;overflow-y:auto}.recent-track-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#ffffff1a;border-radius:8px;cursor:pointer;transition:all .3s}.recent-track-item:hover{background:#fff3;transform:translateY(-1px)}.recent-track-item.current{background:#1db9544d;border:2px solid #1db954}.recent-track-album-art{width:40px;height:40px;border-radius:4px;flex-shrink:0}.recent-track-info{flex:1;min-width:0}.recent-track-info h4{margin:0 0 .25rem;font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-track-info p{margin:0 0 .25rem;opacity:.8;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-track-album{font-size:.7rem;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.recent-track-duration{font-size:.8rem;opacity:.8;flex-shrink:0}.loading,.error,.empty{padding:2rem;text-align:center;opacity:.7;font-style:italic}.error{color:#ff6b6b}.reauth-button{display:block;margin:1rem auto 0;padding:.75rem 1.5rem;background:#1db954;border:none;color:#fff;border-radius:20px;cursor:pointer;font-size:.9rem;transition:all .3s}.reauth-button:hover{background:#1ed760;transform:translateY(-1px)}.show-more-container{text-align:center;margin-top:1rem}.show-more-button{padding:.75rem 1.5rem;background:#1db95433;border:1px solid #1db954;color:#1db954;border-radius:20px;cursor:pointer;font-size:.9rem;transition:all .3s;font-weight:500}.show-more-button:hover:not(:disabled){background:#1db954;color:#fff;transform:translateY(-1px)}.show-more-button:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width: 768px){.recent-plays{margin-bottom:1rem}.recent-tracks{max-height:300px}.recent-track-item{padding:.5rem;gap:.75rem}.recent-track-album-art{width:35px;height:35px}.show-more-button{padding:.5rem 1rem;font-size:.8rem}}.playlists{margin-bottom:2rem}.playlists h2,.playlists h3{font-size:1.5rem;margin-bottom:1rem;color:#fff}.loading-text{font-size:.8rem;opacity:.7;font-weight:400}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.playlist-item{display:flex;flex-direction:column;background:#ffffff1a;border-radius:10px;padding:1rem;cursor:pointer;transition:all .3s;border:2px solid transparent}.playlist-item:hover{background:#fff3;transform:translateY(-2px)}.playlist-item.active{border-color:#1db954;background:#1db95433}.playlist-image{width:100%;aspect-ratio:1;border-radius:8px;margin-bottom:.75rem;object-fit:cover}.playlist-info h3{margin:0 0 .5rem;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-info p{margin:0;font-size:.8rem;opacity:.8}.playlist-tracks{background:#0000004d;border-radius:10px;padding:1.5rem;border:1px solid rgba(255,255,255,.1)}.playlist-tracks h3{margin-top:0;margin-bottom:1.5rem;font-size:1.2rem;display:flex;align-items:center;gap:.5rem}@media (max-width: 768px){.playlist-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}.playlist-item{padding:.75rem}.playlist-info h3{font-size:.9rem}.playlist-info p{font-size:.7rem}.playlist-tracks{padding:1rem}}.liked-songs{margin-bottom:2rem}.liked-songs-header{display:flex;align-items:center;gap:1rem;cursor:pointer;padding:1rem;background:#ffffff1a;border-radius:10px;transition:all .3s;border:2px solid transparent}.liked-songs-header:hover{background:#fff3;border-color:#1db954}.liked-songs-header h2{margin:0;font-size:1.5rem;flex:1}.liked-songs-count{font-size:.9rem;opacity:.8;color:#1db954;font-weight:500}.expand-icon{font-size:1.2rem;color:#1db954;transition:transform .3s}.liked-songs-tracks{margin-top:1rem;background:#0000004d;border-radius:10px;padding:1rem;max-height:400px;overflow-y:auto}.liked-songs-preview{margin-top:1rem;text-align:center}.preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem;max-width:200px;margin:0 auto 1rem}.preview-item{cursor:pointer;border-radius:4px;overflow:hidden;transition:all .3s;aspect-ratio:1}.preview-item:hover{transform:scale(1.05)}.preview-image{width:100%;height:100%;object-fit:cover}.preview-text{font-size:.9rem;opacity:.8;margin:0;color:#1db954}@media (max-width: 768px){.liked-songs-header{padding:.75rem;gap:.75rem}.liked-songs-header h2{font-size:1.3rem}.liked-songs-count{font-size:.8rem}.liked-songs-tracks{padding:.75rem;max-height:300px}.preview-grid{max-width:160px;gap:.25rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#191414;color:#fff}