:root{--bg-primary:#0f0f0f;--bg-secondary:#000;--bg-controls:#000000e6;--bg-controls-gradient:#000000b3;--text-primary:#fff;--text-secondary:#aaa;--button-hover:#ffffff1a;--button-hover-strong:#fff3;--select-bg:#ffffff1a;--select-border:#fff3;--select-hover:#ffffff26;--timeline-bg:#fff3;--speed-bg:#ffffff4d}body.light-theme{--bg-primary:#f9f9f9;--bg-secondary:#fff;--bg-controls:#fffffff2;--bg-controls-gradient:#ffffffd9;--text-primary:#030303;--text-secondary:#606060;--button-hover:#0000001a;--button-hover-strong:#00000026;--select-bg:#0000000d;--select-border:#0003;--select-hover:#0000001a;--timeline-bg:#0003;--speed-bg:#0000004d}.language-selector{z-index:100;align-items:center;gap:12px;display:flex;position:absolute;top:20px;right:20px}#helpBtn.lang-flag{margin-right:8px;font-size:22px}.lang-flag{cursor:pointer;opacity:.6;filter:grayscale(80%);color:var(--text-primary);background:0 0;border:none;padding:0;font-size:24px;transition:opacity .2s,transform .2s}.lang-flag:hover{opacity:1;filter:grayscale(0%);transform:scale(1.1)}.lang-flag.active{opacity:1;filter:grayscale(0%);border-bottom:2px solid var(--text-primary)}*{box-sizing:border-box}body{background:var(--bg-primary);color:var(--text-primary);height:100dvh;margin:0;padding:0;font-family:Roboto,Arial,sans-serif;overflow:hidden}#player-container{background:var(--bg-secondary);cursor:default;flex-direction:column;width:100vw;height:100dvh;display:flex;position:relative;overflow:hidden}#player-container.hide-controls{cursor:none}#canvas-wrapper{background:var(--bg-secondary);-webkit-user-select:none;user-select:none;flex:1;width:100%;position:relative;overflow:hidden}.video-overlay{pointer-events:auto;z-index:10;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.loading-spinner{z-index:15;color:#fff;background:#0006;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:48px;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.overlay-center{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.overlay-icon{color:#fff;opacity:0;pointer-events:none;background:#0006;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:48px;transition:opacity .3s;display:flex}.overlay-icon.show{animation:.6s ease-out forwards fadeOutUp}@keyframes fadeOutUp{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1.1)}40%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}.overlay-side{opacity:0;pointer-events:none;background:#fff0;flex-direction:column;flex:1;justify-content:center;align-items:center;height:100%;transition:background .3s;display:flex}.overlay-side.animate{animation:.6s ease-out ripple}@keyframes ripple{0%{opacity:0;background:#fff0}20%{opacity:1;background:#ffffff1a}to{opacity:0;background:#fff0}}.seek-icon{color:#fff;margin-bottom:8px;font-size:48px}.seek-text{color:#fff;font-size:16px;font-weight:700}canvas{object-fit:contain;width:100%;height:100%;display:block}.controls{background:linear-gradient(to top, var(--bg-controls) 0%, var(--bg-controls-gradient) 100%);z-index:20;flex-direction:column;gap:8px;padding:8px 12px;transition:transform .3s,opacity .3s;display:flex;position:absolute;bottom:0;left:0;right:0}#player-container.hide-controls .controls{opacity:0;pointer-events:none;transform:translateY(100%)}#player-container.hide-controls .video-overlay{cursor:none}.control-row{align-items:center;gap:8px;display:flex}.control-row.top{padding:4px 0}.control-row.bottom{justify-content:space-between}.left-controls,.right-controls{align-items:center;gap:8px;display:flex}button{color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:2px;align-items:center;gap:4px;padding:8px 12px;font-size:14px;transition:background .2s;display:flex}button:hover{background:var(--button-hover)}button.active{color:red;background:#f003}button#playBtn,button#stepBackBtn,button#stepForwardBtn{border-radius:50%;justify-content:center;width:44px;height:44px;padding:8px;font-size:18px}button#playBtn:hover,button#stepBackBtn:hover,button#stepForwardBtn:hover{background:var(--button-hover-strong)}button#playBtn.active,button#stepBackBtn.active,button#stepForwardBtn.active,button#splitViewBtn.active{background:var(--button-hover);color:var(--text-primary)}select{background:var(--select-bg);color:var(--text-primary);border:1px solid var(--select-border);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;border-radius:2px;padding:6px 32px 6px 10px;font-size:12px}select:hover{background-color:var(--select-hover)}#timeline{appearance:none;background:var(--timeline-bg);cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px;position:relative}#timeline:hover{height:6px}#timeline::-webkit-slider-thumb{appearance:none;cursor:pointer;opacity:0;background:red;border-radius:50%;width:12px;height:12px;transition:opacity .2s}#timeline:hover::-webkit-slider-thumb{opacity:1}#timeline::-moz-range-thumb{cursor:pointer;opacity:0;background:red;border:none;border-radius:50%;width:12px;height:12px;transition:opacity .2s}#timeline:hover::-moz-range-thumb{opacity:1}#timeline::-webkit-slider-runnable-track{background:linear-gradient(to right, red 0%, red var(--progress,0%), var(--timeline-bg) var(--progress,0%), var(--timeline-bg) 100%);border-radius:2px;height:4px}#timeline:hover::-webkit-slider-runnable-track{height:6px}#status{color:var(--text-secondary);white-space:nowrap;text-align:right;min-width:120px;font-size:12px}.speed-control{background:var(--select-bg);border-radius:2px;align-items:center;gap:6px;padding:4px 8px;display:flex}#speed{appearance:none;background:var(--speed-bg);cursor:pointer;border-radius:2px;outline:none;width:60px;height:4px}#speed::-webkit-slider-thumb{appearance:none;background:var(--text-primary);cursor:pointer;border-radius:50%;width:10px;height:10px}#speed::-moz-range-thumb{background:var(--text-primary);cursor:pointer;border:none;border-radius:50%;width:10px;height:10px}#speedVal{color:var(--text-secondary);min-width:24px;font-size:11px}#speedSelect{background:var(--select-bg);color:var(--text-primary);border:1px solid var(--select-border);cursor:pointer;border-radius:2px;outline:none;padding:2px 4px;font-size:12px;display:none}#speedSelect:hover{background:var(--select-hover)}@media (width<=768px){body{justify-content:flex-start}#player-container{border-radius:0}.language-selector{top:10px;right:10px}.lang-flag{font-size:20px}.controls{padding:4px 8px}.control-row.bottom{flex-wrap:wrap;justify-content:center;gap:4px}.left-controls,.right-controls{justify-content:space-around;gap:4px;width:100%}.right-controls{border-top:1px solid #ffffff1a;padding-top:4px}body.light-theme .right-controls{border-top:1px solid #0000001a}button{min-width:40px;min-height:40px;padding:8px}#status{min-width:auto;font-size:11px}#fullscreenBtn{display:none!important}.speed-control{flex:1;justify-content:center}#speed{display:none}#speedSelect{display:block}#speedVal{display:none}select{padding:4px 24px 4px 8px;font-size:11px}}@media (width<=480px){.overlay-icon{width:60px;height:60px;font-size:32px}.seek-icon{font-size:32px}.seek-text{font-size:12px}#status{display:none}}@media (orientation:landscape) and (height<=480px){#canvas-wrapper{flex:1}}body.fullscreen-mode #player-container{border-radius:0;width:100vw;max-width:100%;height:100dvh}#player-container:fullscreen{border-radius:0;width:100vw;max-width:100%;height:100dvh}body.fullscreen-mode #canvas-wrapper{flex:1}#player-container:fullscreen #canvas-wrapper{flex:1}body.fullscreen-mode #canvas-wrapper{transition:cursor .3s}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000c;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal-overlay.active{display:flex}.modal-content{background:var(--bg-secondary);color:var(--text-primary);border-radius:8px;flex-direction:column;width:90%;max-width:600px;max-height:80vh;animation:.3s ease-out modalAppear;display:flex;overflow:hidden;box-shadow:0 8px 32px #00000080}@keyframes modalAppear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal-header{border-bottom:1px solid var(--select-border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-header h2{margin:0;font-size:20px}.close-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:28px;line-height:1}.close-btn:hover{color:var(--text-primary);background:0 0}.modal-body{padding:20px;line-height:1.6;overflow-y:auto}.modal-body h3{color:red;margin-top:0;margin-bottom:12px;font-size:18px}.modal-body ul{margin-bottom:20px;padding-left:20px}.modal-body li{margin-bottom:8px}.modal-body b{color:var(--text-primary)}.modal-body p{margin-bottom:16px}#cameraSelect{text-transform:capitalize}