*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#000;color:#fff;min-height:100vh;overflow-x:hidden}.screen{position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch}.screen.hidden{display:none}.container{text-align:center;max-width:400px;width:100%;flex-shrink:0;margin:auto 0}h1{font-size:2.5rem;margin-bottom:1rem;color:#fff}h2{font-size:2rem;margin-bottom:1rem;color:#fff}p{font-size:1.1rem;margin-bottom:2rem;color:#ccc}.btn{display:block;width:100%;padding:15px 20px;font-size:1.1rem;border:none;border-radius:8px;margin-bottom:15px;cursor:pointer;transition:all .2s}.btn.primary{background:#007aff;color:#fff}.btn.primary:hover{background:#0056cc}.btn.secondary{background:#333;color:#fff}.btn.secondary:hover{background:#555}#qr-container{background:#fff;padding:20px;border-radius:12px;margin-bottom:20px;display:inline-block}#qr-canvas{display:block}#connection-status,#camera-connection-status{margin:20px 0;padding:10px;background:#333;border-radius:6px;font-size:.9rem}video{width:100%;max-width:400px;border-radius:12px;margin:20px 0;background:#333;min-height:200px}#remote-video{background:#333;border:2px solid #007AFF}#viewer-setup.hidden{display:none}#fullscreen-video{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000;z-index:1000;overflow:visible;display:flex;align-items:center;justify-content:center}#fullscreen-video.hidden{display:none}#video-split-container{width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}#video-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;touch-action:none;transform-origin:center center;position:relative;z-index:1}#fullscreen-video video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:none;border-radius:0;margin:0;touch-action:inherit}#fullscreen-video.split-screen{display:flex;flex-direction:column}@media (orientation: portrait){#fullscreen-video.split-screen{flex-direction:column}#fullscreen-video.split-screen #video-split-container,#fullscreen-video.split-screen #snapshot-container{height:50%;width:100%;overflow:hidden}}@media (orientation: landscape){#fullscreen-video.split-screen{flex-direction:row}#fullscreen-video.split-screen #video-split-container,#fullscreen-video.split-screen #snapshot-container{width:50%;height:100%;overflow:hidden}}#snapshot-container{background:#000;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}#snapshot-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;touch-action:none;transform-origin:center center;position:relative}#snapshot-image{max-width:100%;max-height:100%;object-fit:contain;border:none;border-radius:0;margin:0;touch-action:inherit}#scanner-container{position:relative;margin-bottom:20px}#scanner-video{border:3px solid #007AFF}#local-video{transform:none}@supports (-webkit-appearance: none){.btn{-webkit-appearance:none;-webkit-tap-highlight-color:transparent}#camera-screen .container{padding-top:60px;padding-bottom:80px}}@media (max-width: 480px){h1{font-size:2rem}h2{font-size:1.5rem}.container{padding:0 10px}}#scanner-container{position:relative}.stats-overlay{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.8);border-radius:6px;padding:8px 12px;font-size:12px;font-family:Courier New,monospace;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);z-index:10;min-width:120px}.stats-item{display:flex;justify-content:space-between;align-items:center;margin:2px 0;line-height:1.2}.stats-label{color:#888;margin-right:8px;font-weight:500}.stats-overlay span:not(.stats-label){color:#fff;font-weight:600}.stats-overlay.hidden{display:none}@media (max-width: 480px){.stats-overlay{font-size:10px;padding:6px 8px;top:8px;right:8px;min-width:100px}.stats-item{margin:1px 0}}.viewer-resolution-indicator{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.8);color:#fff;padding:6px 10px;border-radius:6px;font-size:12px;font-family:Courier New,monospace;font-weight:700;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);z-index:1001;pointer-events:none;min-width:60px;text-align:center}.fullscreen-btn{position:fixed;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:none;font-weight:700;cursor:pointer;z-index:9999;display:flex;align-items:center;justify-content:center;transition:background .2s;pointer-events:auto;touch-action:manipulation}.fullscreen-btn:hover{background:rgba(0,0,0,.9)}.fullscreen-btn.hidden{display:none}.close-btn{top:10px;left:10px;font-size:20px}.rotate-btn{top:10px;right:10px;font-size:20px}.mirror-btn{top:10px;right:60px;font-size:20px}.snapshot-btn{bottom:10px;left:10px;font-size:18px}.snapshot-btn.active{background:rgba(0,150,255,.8)}.snapshot-btn.active:hover{background:#0096ff}