*{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh;overflow:hidden;background:#000;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100vw;height:100vh;overflow:hidden}button{font-family:inherit;cursor:pointer}.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden}.overlay{position:absolute;top:0;left:0;width:100%;height:100%}:root{--f1-red: #e10600;--f1-dark: #15151e;--f1-black: #000000;--f1-white: #ffffff;--overlay-dark: rgba(0, 0, 0, .8);--overlay-darker: rgba(0, 0, 0, .95)}.f1-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background:#000}.controls-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;opacity:0;transition:opacity .3s;z-index:50}.controls-overlay.visible{opacity:1}.controls-overlay>*{pointer-events:auto}.top-bar{background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent);padding:1.5rem 2rem}.stream-info{display:flex;align-items:center;gap:1rem}.live-indicator{display:flex;align-items:center;gap:.5rem;background:#e10600;padding:.4rem 1rem;border-radius:4px;font-weight:700;font-size:.9rem;color:#fff;letter-spacing:1px}.live-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.stream-title{margin:0;font-size:1.8rem;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.bottom-controls{display:flex;align-items:center;gap:1rem;padding:1.5rem 2rem;background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}.control-button{background:#ffffff1a;border:none;border-radius:4px;color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-button:hover{background:#fff3;transform:scale(1.05)}.control-button:active{transform:scale(.95)}.volume-control{display:flex;align-items:center;gap:.5rem}.volume-slider{width:100px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#e10600;border-radius:50%;cursor:pointer;transition:all .2s}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:14px;height:14px;background:#e10600;border-radius:50%;border:none;cursor:pointer;transition:all .2s}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.spacer{flex:1}@media(max-width:768px){.stream-title{font-size:1.2rem}.volume-slider{width:60px}.bottom-controls{padding:1rem;gap:.5rem}.top-bar{padding:1rem}}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000e6;color:#fff;z-index:100}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top:4px solid #e10600;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-overlay p{font-size:1.2rem;font-weight:600;color:#fff}.error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000000f2;z-index:100}.error-content{text-align:center;padding:2rem;max-width:500px}.error-content h2{color:#e10600;margin-bottom:1rem;font-size:2rem}.error-content p{color:#fff;margin-bottom:2rem;font-size:1.1rem}.retry-button{padding:.75rem 2rem;font-size:1rem;font-weight:600;border:2px solid #e10600;border-radius:4px;background:transparent;color:#e10600;cursor:pointer;transition:all .3s}.retry-button:hover{background:#e10600;color:#fff}.f1-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--f1-black);overflow:hidden;cursor:none}.f1-container:hover{cursor:default}