*{box-sizing:border-box}.app-container{min-height:100vh;background:#000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}.login-card{max-width:500px;margin:0 auto;padding:3rem 2rem;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:2rem}.logo-section{text-align:center;color:#fff}.logo-icon{color:#1db954;margin-bottom:1rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.logo-section h1{font-size:3rem;margin:.5rem 0;font-weight:800;color:#fff}.logo-section p{font-size:1.2rem;opacity:.7;color:#b3b3b3}.login-form{background:#181818;padding:2rem;border-radius:1rem;box-shadow:0 20px 60px #00000080}.login-form label{display:block;font-weight:600;margin-bottom:.5rem;color:#fff}.username-input{width:100%;padding:.875rem;border:2px solid #282828;background:#121212;color:#fff;border-radius:.5rem;font-size:1rem;margin-bottom:1rem;transition:border-color .2s}.username-input:focus{outline:none;border-color:#1db954}.connect-button{width:100%;padding:1rem;background:#1db954;color:#fff;border:none;border-radius:2rem;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.spotify-button{background:#1db954}.connect-button:hover{transform:translateY(-2px);background:#1ed760;box-shadow:0 10px 20px #1db95466}.spotify-button:hover{box-shadow:0 10px 20px #1db95466}.connect-button:active{transform:translateY(0)}.info-box{margin-top:1.5rem;padding:1rem;background:#121212;border-radius:.5rem;font-size:.875rem;color:#b3b3b3;border:1px solid #282828}.info-box p{margin:.5rem 0;color:#fff}.info-box ul{margin:.5rem 0;padding-left:1.5rem;color:#b3b3b3}.info-box li{margin:.25rem 0}.permission-note{font-size:.75rem;font-style:italic;color:#666}.app-header{background:#000;border-bottom:1px solid #282828;box-shadow:0 2px 10px #00000080;position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.header-left{display:flex;align-items:center;gap:.75rem;color:#1db954}.header-left h2{margin:0;font-size:1.5rem;font-weight:800;color:#fff}.header-right{display:flex;align-items:center;gap:1rem}.nav-button{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:transparent;border:2px solid transparent;border-radius:2rem;color:#b3b3b3;font-weight:600;cursor:pointer;transition:all .2s}.nav-button:hover{background:#181818;color:#fff}.nav-button.active{background:#1db954;color:#fff;border-color:transparent}.user-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#181818;border-radius:2rem;font-weight:600;color:#fff}.discover-view{max-width:700px;margin:0 auto;padding:2rem}.discovery-controls{background:#181818;padding:1.5rem;border-radius:1rem;margin-bottom:2rem;box-shadow:0 4px 15px #00000080;border:1px solid #282828}.slider-container label{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#fff;margin-bottom:1rem}.slider-labels{display:flex;justify-content:space-between;font-size:.875rem;color:#b3b3b3;margin-bottom:.5rem}.discovery-slider{width:100%;height:8px;border-radius:5px;background:#282828;outline:none;appearance:none;cursor:pointer}.discovery-slider::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:50%;background:#1db954;cursor:pointer;box-shadow:0 2px 8px #1db95480;border:3px solid #000}.discovery-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#1db954;cursor:pointer;box-shadow:0 2px 8px #1db95480;border:3px solid #000}.slider-value{text-align:center;font-weight:600;color:#1db954;margin-top:.5rem}.track-card{background:#181818;border-radius:1rem;overflow:hidden;box-shadow:0 10px 40px #00000080;margin-bottom:2rem;border:1px solid #282828}.track-image{width:100%;aspect-ratio:1;background:#000;display:flex;align-items:center;justify-content:center}.track-image img{width:100%;height:100%;object-fit:cover}.placeholder-image{color:#1db954;opacity:.3}.track-info{padding:2rem;text-align:center}.track-info h2{font-size:1.75rem;margin:0 0 .5rem;color:#fff}.track-info h3{font-size:1.25rem;margin:0 0 .5rem;color:#1db954;font-weight:600}.track-album{font-size:1rem;color:#b3b3b3;margin:0 0 .5rem}.track-stats{font-size:.875rem;color:#666;margin:0 0 1rem}.add-to-liked-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#1db954;color:#fff;border:none;border-radius:2rem;font-weight:700;cursor:pointer;transition:all .2s;margin-top:.5rem;box-shadow:0 4px 12px #1db9544d}.add-to-liked-btn:hover{transform:translateY(-2px);background:#1ed760;box-shadow:0 6px 16px #1db95466}.add-to-liked-btn:active{transform:translateY(0)}.playback-controls{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1.5rem 2rem 0}.playback-btn{width:60px;height:60px;border-radius:50%;background:#1db954;border:none;color:#fff;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 4px 15px #1db95466}.playback-btn:hover:not(:disabled){transform:scale(1.1);background:#1ed760}.playback-btn:active:not(:disabled){transform:scale(.95)}.playback-btn:disabled{background:#282828;color:#666;cursor:not-allowed;opacity:.5}.spotify-open-btn{padding:.75rem 1.5rem;background:#282828;color:#fff;border:2px solid #1DB954;border-radius:2rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.5rem}.spotify-open-btn:hover{background:#1db954;transform:translateY(-2px);box-shadow:0 4px 12px #1db95466}.spotify-open-btn:active{transform:translateY(0)}.player-info{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:0 2rem 1rem}.player-status{font-size:.875rem;color:#b3b3b3;font-style:italic;text-align:center}.player-note{font-size:.75rem;color:#666;text-align:center}.reaction-buttons-simple{display:flex;justify-content:center;align-items:center;gap:3rem;padding:2rem;background:#181818}.reaction-btn-large{width:90px;height:90px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;box-shadow:0 8px 20px #00000080}.reaction-btn-large:hover{transform:scale(1.15)}.reaction-btn-large:active{transform:scale(.9)}.like-btn-large{background:#1db954;color:#fff}.like-btn-large:hover{background:#1ed760;box-shadow:0 8px 24px #1db95499}.dislike-btn-large{background:#282828;color:#b3b3b3}.dislike-btn-large:hover{background:#f44;color:#fff;box-shadow:0 8px 24px #ff444480}.reaction-buttons{display:none}.loading-message{text-align:center;padding:4rem 2rem;color:#fff}.loading-message p{margin-top:1rem;font-size:1.25rem;color:#b3b3b3}.loading-state{text-align:center;padding:2rem;color:#1db954}.loading-state p{margin-top:1rem;font-size:1.125rem;font-weight:600;color:#fff}.spinning{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preference-summary{display:flex;justify-content:center;gap:2rem;background:#181818;padding:1.5rem;border-radius:1rem;box-shadow:0 4px 15px #00000080;border:1px solid #282828}.pref-stat{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#fff}.love-color{color:#1db954}.like-color{color:#1db954;opacity:.7}.dislike-color{color:#b3b3b3}.stats-view{max-width:1200px;margin:0 auto;padding:2rem}.stats-header{text-align:center;color:#fff;margin-bottom:2rem}.stats-header h2{font-size:2.5rem;margin:0 0 .5rem}.total-scrobbles{font-size:1.25rem;opacity:.7;margin:0;color:#b3b3b3}.stats-grid{display:grid;grid-template-columns:1fr;gap:2rem}@media(min-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr)}}.stat-section{background:#181818;padding:1.5rem;border-radius:1rem;box-shadow:0 4px 15px #00000080;border:1px solid #282828}.stat-section.full-width{grid-column:1 / -1}.stat-section h3{margin:0 0 1rem;color:#1db954;font-size:1.25rem}.stat-list{display:flex;flex-direction:column;gap:.75rem}.stat-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#000;border-radius:.5rem;transition:background .2s;border:1px solid #282828}.stat-item:hover{background:#282828}.stat-rank{font-weight:800;color:#1db954;min-width:1.5rem}.artist-image,.track-image-small{width:40px;height:40px;border-radius:50%;object-fit:cover}.track-image-small{border-radius:.25rem}.stat-name{flex:1;font-weight:600;color:#fff}.stat-genre{font-size:.75rem;padding:.25rem .75rem;background:#282828;border-radius:1rem;color:#b3b3b3;text-transform:capitalize}.stat-track-info{flex:1;display:flex;flex-direction:column}.stat-artist{font-size:.875rem;color:#b3b3b3}.stat-count{font-size:.875rem;color:#666}.genre-tags{display:flex;flex-wrap:wrap;gap:.75rem}.genre-tag{padding:.625rem 1rem;background:#1db954;color:#fff;border-radius:2rem;font-weight:700;font-size:.875rem;box-shadow:0 2px 8px #1db9544d}@media(max-width:768px){.header-content{flex-direction:column;gap:1rem}.discover-view,.stats-view{padding:1rem}.reaction-buttons{gap:.5rem}.reaction-btn{width:56px;height:56px}.preference-summary{flex-direction:column;gap:1rem}}