*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000}.player-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000}#canvas-render-layer,.render-surface{width:100%;height:100%;display:block;object-fit:contain}#audio-stream-layer,.audio-stream{display:none}.controls{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);opacity:0;transition:opacity .3s ease;z-index:10}.player-container:hover .controls,.controls.show{opacity:1}.progress-bar{width:100%;height:4px;background:#ffffff4d;border-radius:2px;margin-bottom:10px;cursor:pointer;position:relative}.progress-bar-filled{height:100%;background:#e82127;border-radius:2px;width:0%;transition:width .1s linear}.control-buttons{display:flex;align-items:center;gap:15px;color:#fff}.btn{background:none;border:none;color:#fff;cursor:pointer;padding:8px;transition:all .2s ease}.btn:hover{color:#e82127;transform:scale(1.1)}.btn svg{width:24px;height:24px}.time-display{font-size:14px;color:#fff;margin-left:auto}.loading{position:fixed;top:0;left:0;right:0;bottom:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;z-index:1000;color:#fff;pointer-events:none}.loading-content{display:flex;flex-direction:column;align-items:center;background:#000000d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:30px 40px;border-radius:16px;box-shadow:0 8px 32px #00000080}.loading-spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.2);border-top-color:#e82127;border-radius:50%;animation:spin .8s cubic-bezier(.5,0,.5,1) infinite;margin-bottom:20px}.loading p{margin:0;font-size:16px;font-weight:500;letter-spacing:.5px;opacity:.9;animation:pulse 1.5s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.error{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999}.error p{color:#f44;font-size:18px;font-weight:500;text-align:center;background:#ff44441a;padding:30px 40px;border-radius:12px;border:2px solid #ff4444;max-width:80%;margin:0}.volume-control{display:flex;flex-direction:row;align-items:center;gap:0}.volume-slider-container{display:flex;flex-direction:row;align-items:center;gap:0;max-width:0;opacity:0;overflow:hidden;transition:max-width .3s ease,opacity .3s ease;margin:0 8px}.volume-slider-container.show,.volume-control:hover .volume-slider-container{max-width:150px;opacity:1}.volume-percentage{color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.5);min-width:38px;text-align:right;white-space:nowrap;margin:0 0 0 6px;line-height:1}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer;transition:all .2s ease;margin:0}.volume-slider:hover{background:#fff6}.volume-slider::-webkit-slider-runnable-track{width:100%;height:4px;background:transparent;border-radius:2px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#e82127;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #e8212780;margin-top:-5px}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 2px 10px #e82127cc}.volume-slider::-webkit-slider-thumb:active{transform:scale(1.1)}.volume-slider::-moz-range-track{width:100%;height:4px;background:#ffffff4d;border-radius:2px;border:none}.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#e82127;cursor:pointer;border:none;transition:all .2s ease;box-shadow:0 2px 6px #e8212780}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 2px 10px #e82127cc}.volume-slider::-moz-range-thumb:active{transform:scale(1.1)}.volume-slider::-moz-range-progress{background:#e82127;border-radius:2px;height:4px}.ws-button{position:fixed;bottom:30px;right:30px;width:60px;height:60px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;cursor:pointer;box-shadow:0 4px 15px #667eea66;transition:all .3s ease;z-index:9999;display:flex;align-items:center;justify-content:center}.ws-button svg{width:28px;height:28px;stroke:#fff}.ws-button:hover{transform:translateY(-3px);box-shadow:0 6px 20px #667eea99}.ws-button:active{transform:translateY(-1px)}.qr-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10000;animation:fadeIn .3s ease}.qr-modal.show{display:flex;align-items:center;justify-content:center}.qr-modal-content{background:#fff;border-radius:20px;padding:40px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease}.qr-close{position:absolute;top:15px;right:15px;width:40px;height:40px;border:none;background:#f0f0f0;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;transition:all .2s;color:#666}.qr-close:hover{background:#e0e0e0;transform:rotate(90deg)}.qr-modal-content h2{font-size:24px;color:#333;margin-bottom:10px;text-align:center}.qr-desc{font-size:14px;color:#666;text-align:center;margin-bottom:30px}.qr-container{background:#f8f9fa;border-radius:15px;padding:20px;display:flex;align-items:center;justify-content:center;min-height:400px}.qr-loading{text-align:center}.qr-loading p{margin-top:15px;color:#666;font-size:14px}.qr-container img{max-width:100%;border-radius:10px}.qr-info{margin-top:20px;text-align:center}.qr-tip{font-size:14px;color:#667eea;margin-bottom:10px}.qr-url{font-size:12px;color:#999;word-break:break-all;padding:10px;background:#f8f9fa;border-radius:8px}.qr-status{margin-top:20px;padding:15px;background:#d4edda;color:#155724;border-radius:10px;text-align:center;font-size:14px;animation:fadeIn .3s ease}.qr-error{margin-top:20px;padding:15px;background:#f8d7da;color:#721c24;border-radius:10px;text-align:center;font-size:14px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}