*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:#121212;color:#fff;min-height:100vh}.app{max-width:400px;margin:0 auto;padding:16px;min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;justify-content:space-between;align-items:center;padding:8px 0;margin-bottom:24px;border-bottom:1px solid #333}.app-title{font-size:20px;font-weight:600}.user-name{font-size:14px;color:#999}.header-actions{display:flex;align-items:center;gap:12px}.sync-button{background:none;border:1px solid #333;border-radius:6px;color:#999;font-size:13px;padding:4px 10px;cursor:pointer}.sync-button:hover:not(:disabled){color:#fff;border-color:#555}.sync-button:disabled{opacity:.5;cursor:default}.loading{display:flex;align-items:center;justify-content:center;flex:1;color:#999}.login-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;gap:16px}.login-prompt h1{font-size:32px}.login-prompt p{color:#999}.login-button{display:inline-block;background:#1db954;color:#fff;padding:12px 32px;border-radius:24px;text-decoration:none;font-weight:600;transition:background .2s}.login-button:hover{background:#1ed760}.reconnect-banner{background:#311;border:1px solid #662222;border-radius:8px;padding:16px;text-align:center}.reconnect-banner p{margin-bottom:12px}.now-playing{display:flex;flex-direction:column;align-items:center;gap:16px}.now-playing.empty{justify-content:center;flex:1;color:#999}.now-playing.error{color:#ff6b6b}.album-art{width:100%;max-width:300px;aspect-ratio:1;border-radius:8px;object-fit:cover;transition:opacity .15s}.album-art.loading{opacity:.5}.track-info{text-align:center;width:100%}.track-name{font-size:20px;font-weight:600;margin-bottom:4px}.artist-name{font-size:16px;color:#b3b3b3;margin-bottom:2px}.album-name{font-size:14px;color:#666}.progress-bar{width:100%;height:4px;background:#333;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:#1db954;transition:width .3s linear}.controls{display:flex;align-items:center;gap:24px}.controls button{background:none;border:none;color:#fff;font-size:32px;cursor:pointer;padding:8px;transition:transform .1s}.controls button:hover{transform:scale(1.1)}.controls button:active{transform:scale(.95)}.device-info{position:relative;width:100%}.device-button{width:100%;background:#282828;border:none;color:#fff;padding:12px;border-radius:8px;cursor:pointer;font-size:14px}.device-button:hover{background:#333}.device-list{position:absolute;bottom:100%;left:0;right:0;background:#282828;border-radius:8px;margin-bottom:8px;padding:8px;display:flex;flex-direction:column;gap:4px}.device-list button{background:#333;border:none;color:#fff;padding:12px;border-radius:4px;cursor:pointer;text-align:left;font-size:14px}.device-list button:hover{background:#444}.device-list button.active{background:#1db954}.device-list p{color:#999;padding:8px;text-align:center;font-size:14px}.feedback-controls{display:flex;align-items:center;gap:32px}.feedback-btn{background:#282828;border:none;color:#fff;font-size:28px;cursor:pointer;padding:12px 20px;border-radius:50px;transition:all .15s}.feedback-btn:hover{background:#333;transform:scale(1.05)}.feedback-btn:active{transform:scale(.95)}.feedback-btn.down.active{background:#e74c3c}.feedback-btn.up.active{background:#1db954}.auto-bar{width:100%;background:#1e1e1e;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px}.auto-header{display:flex;justify-content:space-between;align-items:center}.auto-title{font-size:14px;font-weight:600}.auto-toggle{background:#282828;border:none;color:#fff;font-size:13px;padding:6px 14px;border-radius:50px;cursor:pointer}.auto-toggle.start{background:#1db954}.auto-toggle:disabled{opacity:.6;cursor:default}.auto-balance{display:flex;align-items:center;gap:8px;font-size:12px;color:#999}.auto-balance input{flex:1;accent-color:#1db954}.auto-upcoming{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px}.auto-upcoming li{display:flex;align-items:baseline;gap:6px;min-width:0}.auto-badge{flex-shrink:0;font-size:11px;padding:1px 6px;border-radius:4px;background:#333;color:#ccc}.auto-badge.discovery{background:#1db95433;color:#1db954}.auto-track{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auto-artist{color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auto-reconnect,.auto-error{font-size:13px;color:#e74c3c}.auto-reconnect{color:#1db954}.tabs{display:flex;gap:8px;margin:-12px 0 20px}.tabs button,.playlists-sort button{background:none;border:1px solid #333;border-radius:50px;color:#999;font-size:13px;padding:6px 14px;cursor:pointer}.tabs button.active,.playlists-sort button.active{background:#282828;border-color:#282828;color:#fff}.playlists{display:flex;flex-direction:column;gap:12px}.playlists-toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.playlists-sort{display:flex;gap:6px;flex-wrap:wrap}.playlists-sort button{font-size:12px;padding:4px 10px}.playlists-empty{color:#999;font-size:14px}.playlist-list{list-style:none;display:flex;flex-direction:column;gap:10px}.playlist-row{display:flex;gap:12px;align-items:center;min-width:0}.playlist-cover{width:48px;height:48px;flex-shrink:0;border-radius:4px;background:#282828;object-fit:cover}.playlist-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.playlist-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-done{margin-left:6px;color:#1db954;font-weight:600}.playlist-progress{height:4px;background:#333;border-radius:2px;overflow:hidden}.playlist-progress-fill{height:100%;background:#1db954}.playlist-meta{display:flex;gap:10px;font-size:12px;color:#999;white-space:nowrap;overflow:hidden}.playlist-row.clickable{cursor:pointer;border-radius:6px}.playlist-row.clickable:hover{background:#1e1e1e}.playlist-back{align-self:flex-start;background:none;border:none;color:#999;font-size:13px;cursor:pointer;padding:0}.playlist-back:hover{color:#fff}.track-list{list-style:none;display:flex;flex-direction:column}.track-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #222;min-width:0}.track-position{width:24px;flex-shrink:0;text-align:right;font-size:12px;color:#666}.track-body{flex:1;min-width:0}.track-title,.track-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-title{font-size:14px}.track-sub{font-size:12px;color:#999}.track-rating{flex-shrink:0;min-width:32px;text-align:center;font-size:15px;color:#666}.track-rating.mixed{color:#f39c12}.track-votes{display:block;font-size:10px;color:#999}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#333;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;animation:toast-in .2s ease-out;z-index:100}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}