*{margin:0;padding:0;box-sizing:border-box}body{background:#1a1a2e;color:#e0e0e0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-user-select:none;user-select:none}.app{min-height:100dvh;display:flex;flex-direction:column}.setup{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}.setup h1{font-size:32px;margin-bottom:8px}.subtitle{color:#888;margin-bottom:32px}.form{width:100%;max-width:360px}.form label{display:block;font-size:13px;color:#aaa;margin-bottom:4px;margin-top:16px}.form input{width:100%;padding:12px 14px;border:1px solid #333;border-radius:10px;background:#16213e;color:#e0e0e0;font-size:15px;outline:none}.form input:focus{border-color:#4ecdc4}.btn-primary{width:100%;margin-top:24px;padding:14px;border:none;border-radius:10px;background:#4ecdc4;color:#1a1a2e;font-size:16px;font-weight:700;cursor:pointer}.btn-secondary{margin-top:16px;padding:10px 20px;border:1px solid #4ecdc4;border-radius:8px;background:transparent;color:#4ecdc4;font-size:14px;cursor:pointer}.remote{flex:1;display:flex;flex-direction:column;padding:16px;max-width:480px;margin:0 auto;width:100%}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px}.connection-status{display:flex;align-items:center;gap:8px;font-size:13px;color:#888}.dot{width:8px;height:8px;border-radius:50%;background:#ff6b6b}.dot.online{background:#4ecdc4}.btn-icon{background:none;border:none;color:#888;font-size:18px;cursor:pointer;padding:4px 8px}.tabs{display:flex;gap:4px;margin-bottom:16px;background:#16213e;border-radius:10px;padding:4px}.tab{flex:1;padding:10px;border:none;border-radius:8px;background:transparent;color:#888;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.tab.active{background:#4ecdc4;color:#1a1a2e}.tab-content{flex:1;display:flex;flex-direction:column;overflow-y:auto}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666;text-align:center;padding:0 16px}.empty-state.small{padding-top:48px;flex:unset}.empty-icon{font-size:64px;margin-bottom:16px;opacity:.3}.player-view{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:8px}.artwork{width:min(260px,65vw);aspect-ratio:1;border-radius:12px;overflow:hidden;margin-bottom:20px;background:#16213e}.artwork img{width:100%;height:100%;object-fit:cover}.artwork-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;opacity:.2}.track-info{text-align:center;margin-bottom:16px;padding:0 16px;width:100%}.track-title{font-size:18px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:14px;color:#aaa;margin-top:4px}.progress-section{width:100%;padding:0 8px;margin-bottom:20px}.progress-bar{width:100%;height:4px;background:#333;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:#4ecdc4;border-radius:2px;transition:width .3s linear}.time-display{display:flex;justify-content:space-between;font-size:11px;color:#666;margin-top:4px}.controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px}.btn-control{background:none;border:none;color:#e0e0e0;font-size:28px;cursor:pointer;padding:8px;border-radius:50%;transition:background .15s;line-height:1}.btn-control:active{background:#ffffff1a}.btn-control.play{font-size:36px;background:#4ecdc4;color:#1a1a2e;width:68px;height:68px;display:flex;align-items:center;justify-content:center}.btn-control.small{font-size:20px;color:#888}.btn-control.small.active{color:#4ecdc4}.volume-section{width:100%;display:flex;align-items:center;gap:12px;padding:0 8px}.volume-icon{font-size:16px;color:#888}.volume-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#333;border-radius:2px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#4ecdc4;cursor:pointer}.search-section{flex:1;display:flex;flex-direction:column}.search-bar{display:flex;gap:8px;margin-bottom:16px}.search-bar input{flex:1;padding:12px 14px;border:1px solid #333;border-radius:10px;background:#16213e;color:#e0e0e0;font-size:15px;outline:none}.search-bar input:focus{border-color:#4ecdc4}.search-btn{padding:0 16px;border:none;border-radius:10px;background:#4ecdc4;color:#1a1a2e;font-size:18px;cursor:pointer}.search-btn:disabled{opacity:.5}.search-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:32px;color:#888}.spinner{width:20px;height:20px;border:2px solid #333;border-top-color:#4ecdc4;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.search-results{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.search-item{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:10px;cursor:pointer;transition:background .15s}.search-item:active{background:#4ecdc41a}.search-thumb{width:48px;height:48px;border-radius:6px;object-fit:cover;flex-shrink:0}.search-thumb-placeholder{width:48px;height:48px;border-radius:6px;background:#16213e;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.search-item-info{flex:1;min-width:0}.search-item-title{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-item-artist{font-size:12px;color:#aaa;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-btn{flex-shrink:0;width:36px;height:36px;border:none;border-radius:50%;background:#4ecdc4;color:#1a1a2e;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}.browse-section{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.shelves{padding-bottom:24px}.shelf{margin-bottom:24px}.shelf-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:12px;padding:0 4px}.shelf-items{display:flex;gap:12px;overflow-x:auto;padding:0 4px 8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}.shelf-items::-webkit-scrollbar{height:0}.shelf-item{flex-shrink:0;width:140px;cursor:pointer;scroll-snap-align:start}.shelf-item:active .shelf-item-thumb{opacity:.8}.shelf-item-thumb{position:relative;width:140px;height:140px;border-radius:8px;overflow:hidden;background:#16213e;margin-bottom:8px}.shelf-item-thumb img{width:100%;height:100%;object-fit:cover}.shelf-item-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;opacity:.3}.shelf-item-play{position:absolute;bottom:8px;right:8px;width:32px;height:32px;border-radius:50%;background:#4ecdc4;color:#1a1a2e;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:0;transition:opacity .2s}.shelf-item:hover .shelf-item-play,.shelf-item:active .shelf-item-play{opacity:1}.shelf-item-title{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shelf-item-subtitle{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}