:root{--bg-deep:#06080d;--bg-surface:#0c111a;--bg-card:#101724d9;--border-color:#ffffff14;--border-glow:#00ffcc4d;--primary:#0fc;--primary-hover:#1affd5;--primary-glow:#0fc6;--secondary:#00b8ff;--accent-rec:#ff3b30;--accent-warn:#fc0;--text-main:#f0f4f8;--text-muted:#8a99ad;--text-dim:#4d5b70;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}html,body{background-color:var(--bg-deep);width:100%;height:100%;color:var(--text-main);font-family:var(--font-sans);touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden}#app{width:100%;height:100%;position:relative;overflow:hidden}.toast-container{z-index:9999;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:24px;right:24px}.toast-item{border:1px solid var(--border-color);border-left:4px solid var(--primary);color:var(--text-main);font-size:13px;font-family:var(--font-sans);backdrop-filter:blur(12px);pointer-events:auto;background:#0c111af2;border-radius:8px;max-width:320px;padding:12px 18px;font-weight:500;animation:.3s cubic-bezier(.16,1,.3,1) forwards toastIn;box-shadow:0 10px 30px #0009}.toast-item.success{border-left-color:#0fc}.toast-item.error{border-left-color:#ff3b30}.toast-item.fade-out{animation:.3s ease-in forwards toastOut}@keyframes toastIn{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-8px)scale(.96)}}.desktop-wrapper{background:var(--bg-deep);width:100%;height:100%;position:relative;overflow:hidden}.scene-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.scene-container canvas{display:block;width:100%!important;height:100%!important}.camera-viewfinder-overlay{z-index:10;pointer-events:none;width:100%;height:100%;font-family:var(--font-mono);position:absolute;top:0;left:0}.viewfinder-frame{pointer-events:none;position:absolute;inset:28px}.corner{border-style:solid;border-color:#fff6;width:32px;height:32px;position:absolute}.corner-tl{border-width:2px 0 0 2px;top:0;left:0}.corner-tr{border-width:2px 2px 0 0;top:0;right:0}.corner-bl{border-width:0 0 2px 2px;bottom:0;left:0}.corner-br{border-width:0 2px 2px 0;bottom:0;right:0}.viewfinder-grid{pointer-events:none;position:absolute;inset:32px}.grid-line{background-color:#ffffff14;position:absolute}.grid-v1{width:1px;top:0;bottom:0;left:33.333%}.grid-v2{width:1px;top:0;bottom:0;left:66.666%}.grid-h1{height:1px;top:33.333%;left:0;right:0}.grid-h2{height:1px;top:66.666%;left:0;right:0}.viewfinder-center{pointer-events:none;justify-content:center;align-items:center;width:160px;height:160px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.crosshair-center{width:16px;height:16px;position:absolute}.crosshair-center:before,.crosshair-center:after{content:"";background:#00ffccb3;position:absolute}.crosshair-center:before{width:16px;height:2px;top:7px;left:0}.crosshair-center:after{width:2px;height:16px;top:0;left:7px}.horizon-level{justify-content:space-between;align-items:center;width:140px;height:2px;transition:transform 50ms linear;display:flex;position:absolute}.horizon-line{background:#00ffcca6;width:48px;height:1.5px;box-shadow:0 0 6px #0fc6}.horizon-dot{background:var(--primary);border-radius:50%;width:4px;height:4px}.hud-top-bar{pointer-events:auto;justify-content:space-between;align-items:center;display:flex;position:absolute;top:36px;left:44px;right:44px}.hud-group{align-items:center;gap:14px;display:flex}.rec-badge{backdrop-filter:blur(8px);background:#00000073;border:1px solid #ffffff1a;border-radius:6px;align-items:center;gap:8px;padding:6px 12px;display:flex}.rec-dot{background-color:var(--accent-rec);width:10px;height:10px;box-shadow:0 0 10px var(--accent-rec);border-radius:50%;animation:1s ease-in-out infinite alternate recBlink}@keyframes recBlink{0%{opacity:.25;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}.rec-label{color:var(--accent-rec);letter-spacing:1px;font-size:13px;font-weight:700}.timecode{color:#fff;letter-spacing:.5px;font-size:14px;font-weight:600}.meta-tag{color:#d1d9e6;letter-spacing:.5px;backdrop-filter:blur(8px);background:#00000073;border:1px solid #ffffff1a;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:600}.status-pill{letter-spacing:.5px;backdrop-filter:blur(8px);background:#00000080;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:8px;padding:6px 12px;font-size:11px;font-weight:600;display:flex}.pill-dot{border-radius:50%;width:8px;height:8px}.status-pill.connected{color:#0fc;border-color:#00ffcc4d}.status-pill.connected .pill-dot{background:#0fc;box-shadow:0 0 8px #0fc}.status-pill.connecting{color:#fc0;border-color:#ffcc004d}.status-pill.connecting .pill-dot{background:#fc0;animation:.6s infinite alternate recBlink}.status-pill.disconnected{color:#ff6b6b;border-color:#ff3c3c4d}.status-pill.disconnected .pill-dot{background:#ff4d4d}.battery-indicator{background:#00000073;border:1px solid #ffffff1a;border-radius:6px;align-items:center;gap:6px;padding:6px 10px;font-size:12px;display:flex}.bat-icon{border:1.5px solid #fff9;border-radius:3px;width:22px;height:12px;padding:1.5px;position:relative}.bat-icon:after{content:"";background:#fff9;border-radius:0 1px 1px 0;width:2px;height:4px;position:absolute;top:3px;right:-3px}.bat-level{background:#0fc;border-radius:1px;height:100%}.hud-bottom-bar{pointer-events:auto;justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:36px;left:44px;right:44px}.meta-item{backdrop-filter:blur(8px);background:#00000073;border:1px solid #ffffff14;border-radius:6px;flex-direction:column;padding:4px 10px;display:flex}.meta-item .lbl{color:var(--text-dim);letter-spacing:.5px;font-size:9px;font-weight:700}.meta-item .val{color:#fff;font-size:13px;font-weight:600}.audio-vu{backdrop-filter:blur(8px);background:#00000073;border:1px solid #ffffff14;border-radius:6px;align-items:center;gap:8px;padding:6px 14px;display:flex}.vu-label{color:var(--text-dim);font-size:10px;font-weight:700}.vu-bar{background:#ffffff1a;border-radius:3px;width:60px;height:6px;overflow:hidden}.vu-fill{background:linear-gradient(90deg,#0fc 60%,#ffea00 85%,#ff3b30 100%);border-radius:3px;width:60%;height:100%;transition:width 80ms}.telemetry-badge{background:#00000073;border:1px solid #ffffff14;border-radius:6px;align-items:center;gap:8px;padding:6px 12px;display:flex}.telemetry-badge .lbl{color:var(--text-dim);font-size:10px;font-weight:700}.telemetry-badge .val{color:var(--primary);font-size:13px;font-weight:700}.desktop-controls-panel{z-index:20;flex-direction:column;gap:8px;display:flex;position:absolute;top:90px;right:44px}.hud-btn{border:1px solid var(--border-color);color:var(--text-main);font-size:12px;font-family:var(--font-sans);cursor:pointer;backdrop-filter:blur(12px);background:#0c111ad9;border-radius:8px;align-items:center;gap:10px;padding:8px 14px;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 14px #0006}.hud-btn:hover{border-color:var(--primary);color:var(--primary);background:#141e30f2;transform:translateY(-2px);box-shadow:0 6px 20px #0fc3}.settings-floating-card{border:1px solid var(--border-color);z-index:20;backdrop-filter:blur(12px);background:#0c111ad9;border-radius:10px;flex-direction:column;gap:10px;width:250px;padding:12px 16px;display:flex;position:absolute;bottom:90px;left:44px;box-shadow:0 10px 25px #00000080}.slider-row{flex-direction:column;gap:4px;display:flex}.slider-row label{color:var(--text-muted);justify-content:space-between;font-size:11px;font-weight:600;display:flex}.slider-row label span{color:var(--primary);font-family:var(--font-mono)}.slider-row input[type=range]{-webkit-appearance:none;appearance:none;background:#ffffff26;border-radius:2px;outline:none;width:100%;height:4px}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--primary);cursor:pointer;width:14px;height:14px;box-shadow:0 0 6px var(--primary-glow);border-radius:50%}.drop-zone-overlay{backdrop-filter:blur(10px);z-index:999;opacity:0;pointer-events:none;background:#06080dd9;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:absolute;inset:0}.drop-zone-overlay.drag-active{opacity:1;pointer-events:auto}.drop-zone-card{border:2px dashed var(--primary);text-align:center;background:#0c111ae6;border-radius:20px;flex-direction:column;align-items:center;gap:14px;padding:50px 70px;animation:2s ease-in-out infinite alternate pulseCard;display:flex;box-shadow:0 0 50px #0fc3}@keyframes pulseCard{0%{transform:scale(.98)}to{transform:scale(1.02)}}.drop-icon{width:64px;height:64px;stroke:var(--primary)}.drop-zone-card h3{color:#fff;font-size:22px}.drop-zone-card p{color:var(--text-muted);font-size:14px}.modal-overlay{backdrop-filter:blur(8px);z-index:100;opacity:0;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:absolute;inset:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-card{background:var(--bg-card);border:1px solid var(--border-glow);text-align:center;border-radius:18px;flex-direction:column;align-items:center;width:440px;max-width:90vw;padding:30px;display:flex;position:relative;box-shadow:0 20px 60px #000c,0 0 30px #00ffcc26}.btn-close-modal{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:26px;line-height:1;transition:color .2s;position:absolute;top:14px;right:16px}.btn-close-modal:hover{color:#fff}.modal-header{align-items:center;gap:10px;margin-bottom:8px;display:flex}.live-pulse{background:var(--primary);width:10px;height:10px;box-shadow:0 0 10px var(--primary);border-radius:50%;animation:.8s infinite alternate recBlink}.modal-header h2{color:#fff;font-size:18px;font-weight:700}.modal-desc{color:var(--text-muted);margin-bottom:20px;font-size:13px;line-height:1.5}.qr-canvas-wrapper{background:#0b0f19;border:2px solid #00ffcc4d;border-radius:12px;margin-bottom:16px;padding:12px;position:relative;box-shadow:0 10px 30px #00000080}.qr-canvas-wrapper canvas{border-radius:6px;display:block}.qr-loader{color:var(--text-muted);background:#0b0f19f2;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:12px;display:flex;position:absolute;inset:0}.spinner{border:2px solid #ffffff1a;border-top-color:var(--primary);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.url-copy-box{gap:8px;width:100%;margin-bottom:14px;display:flex}.url-copy-box input{border:1px solid var(--border-color);color:var(--text-muted);font-size:12px;font-family:var(--font-mono);background:#0006;border-radius:6px;outline:none;flex:1;padding:8px 12px}.btn-copy{border:1px solid var(--primary);color:var(--primary);cursor:pointer;background:#00ffcc26;border-radius:6px;padding:8px 14px;font-size:12px;font-weight:600;transition:all .2s}.btn-copy:hover{background:var(--primary);color:#000}.modal-actions{width:100%;margin-bottom:14px}.btn-secondary{border:1px solid var(--border-color);color:var(--text-main);background:#ffffff0d;border-radius:6px;padding:8px 14px;font-size:12px;font-weight:500;text-decoration:none;transition:all .2s;display:block}.btn-secondary:hover{color:#fff;background:#ffffff1a}.modal-note{color:var(--text-dim);border-top:1px solid var(--border-color);width:100%;padding-top:12px;font-size:11px;line-height:1.4}.controller-wrapper{width:100vw;height:100vh;color:var(--text-main);-webkit-user-select:none;user-select:none;touch-action:none;background:radial-gradient(circle at 50% 30%,#0d1524 0%,#06080d 100%);flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.controller-header{border-bottom:1px solid var(--border-color);backdrop-filter:blur(10px);z-index:10;background:#06080db3;justify-content:space-between;align-items:center;height:52px;padding:0 16px;display:flex}.conn-badge{font-size:11px;font-weight:700;font-family:var(--font-mono);background:#0006;border:1px solid #ffffff1a;border-radius:14px;align-items:center;gap:8px;padding:4px 10px;display:flex}.status-dot{background:#fc0;border-radius:50%;width:8px;height:8px}.conn-badge.connected{color:#0fc;border-color:#00ffcc4d}.conn-badge.connected .status-dot{background:#0fc;box-shadow:0 0 8px #0fc}.conn-badge.connecting{color:#fc0;border-color:#ffcc004d}.conn-badge.connecting .status-dot{background:#fc0;animation:.6s infinite alternate recBlink}.conn-badge.disconnected,.conn-badge.error{color:#ff4d4d;border-color:#ff3c3c4d}.conn-badge.disconnected .status-dot,.conn-badge.error .status-dot{background:#ff4d4d}.header-badges{align-items:center;gap:8px;display:flex}.telemetry-pill{font-family:var(--font-mono);background:#0006;border:1px solid #ffffff14;border-radius:6px;align-items:center;gap:6px;padding:4px 8px;display:flex}.telemetry-pill .lbl{color:var(--text-dim);font-size:9px;font-weight:700}.telemetry-pill .val{color:var(--primary);font-size:11px;font-weight:700}.activation-overlay{backdrop-filter:blur(12px);z-index:100;background:#06080df2;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.activation-card{background:var(--bg-card);border:1px solid var(--border-glow);text-align:center;border-radius:20px;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:380px;padding:28px 22px;display:flex;box-shadow:0 20px 50px #000c,0 0 30px #00ffcc26}.card-icon{background:#00ffcc1a;border:1px solid #00ffcc4d;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;display:flex;box-shadow:0 0 25px #0fc3}.card-icon.error{background:#ff3c3c1a;border-color:#ff3c3c4d;font-size:36px}.activation-card h2{color:#fff;font-size:20px;font-weight:700}.activation-card p{color:var(--text-muted);font-size:13px;line-height:1.5}.alert-box{text-align:left;border-radius:8px;width:100%;padding:10px 14px;font-size:12px;line-height:1.4}.alert-box.warning{color:#ffea70;background:#ffcc001a;border:1px solid #ffcc004d}.input-peer-box{text-align:left;flex-direction:column;gap:8px;width:100%;display:flex}.input-peer-box label{color:var(--text-muted);font-size:12px;font-weight:600}.input-peer-box input{border:1px solid var(--border-color);color:#fff;font-family:var(--font-mono);background:#0006;border-radius:8px;outline:none;padding:10px 14px;font-size:14px}.btn-primary{background:var(--primary);color:#000;cursor:pointer;border:none;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:700;transition:transform .15s,background-color .15s}.btn-primary:active{transform:scale(.97)}.btn-activate{color:#06080d;width:100%;font-size:14px;font-weight:800;font-family:var(--font-sans);letter-spacing:.5px;cursor:pointer;background:linear-gradient(135deg,#0fc 0%,#00b8ff 100%);border:none;border-radius:12px;justify-content:center;align-items:center;gap:10px;padding:16px 20px;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:0 10px 30px #00ffcc59}.btn-activate:active{transform:scale(.96);box-shadow:0 5px 15px #0fc6}.activation-tips{color:var(--text-dim);font-size:11px}.controller-body{flex:1;grid-template-columns:1fr 1fr 1fr;gap:12px;height:calc(100vh - 52px);padding:14px;display:grid;position:relative}@media (orientation:portrait){.controller-body{grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr}.zone-center{order:1;grid-column:span 2}.zone-left{order:2}.zone-right{order:3}}.control-zone{border:1px solid var(--border-color);background:#0c111a66;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:12px;display:flex;position:relative}.zone-label{color:var(--text-dim);letter-spacing:1px;font-size:10px;font-weight:700;position:absolute;top:10px}.joystick-wrapper{justify-content:center;align-items:center;width:160px;height:160px;display:flex;position:relative}.joystick-base{background:radial-gradient(circle,#00ffcc0d 0%,#0c111a99 80%);border:2px solid #00ffcc59;border-radius:50%;justify-content:center;align-items:center;width:140px;height:140px;display:flex;position:relative;box-shadow:inset 0 0 20px #00ffcc1a,0 0 15px #0006}.joystick-ring{pointer-events:none;border:1px dashed #ffffff26;border-radius:50%;width:70px;height:70px}.joystick-thumb{pointer-events:none;background:radial-gradient(circle,#0fc 0%,#097 100%);border-radius:50%;width:54px;height:54px;transition:transform 40ms ease-out;position:absolute;box-shadow:0 4px 15px #0fc9}.zone-center{gap:16px}.btn-calibrate{border:2px solid var(--primary);width:130px;height:130px;color:var(--primary);font-family:var(--font-sans);letter-spacing:.5px;cursor:pointer;background:radial-gradient(circle at 40% 40%,#00ffcc26 0%,#0c111ae6 80%);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:11px;font-weight:700;transition:transform .1s,box-shadow .1s;display:flex;box-shadow:0 10px 30px #00ffcc40,inset 0 0 15px #00ffcc26}.btn-calibrate:active{background:var(--primary);color:#06080d;box-shadow:0 0 35px var(--primary);transform:scale(.92)}.sensor-readouts{font-family:var(--font-mono);gap:12px;display:flex}.readout-item{background:#0006;border:1px solid #ffffff14;border-radius:6px;flex-direction:column;align-items:center;padding:4px 8px;display:flex}.readout-item .lbl{color:var(--text-dim);font-size:9px;font-weight:700}.readout-item .val{color:#fff;font-size:12px;font-weight:600}.elevation-buttons{flex-direction:column;gap:12px;width:100%;max-width:120px;display:flex}.btn-elev{color:var(--text-main);font-family:var(--font-sans);letter-spacing:.5px;cursor:pointer;background:#101724cc;border:1.5px solid #ffffff26;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:16px 10px;font-size:11px;font-weight:700;transition:all .15s;display:flex;box-shadow:0 6px 18px #0006}.btn-elev:active,.btn-elev.active{border-color:var(--secondary);color:var(--secondary);background:#00b8ff33;transform:scale(.95);box-shadow:0 0 20px #00b8ff66}.sim-gyro-box{flex-direction:column;gap:6px;width:100%;margin-top:10px;display:flex}.sim-tag{color:var(--text-dim);text-align:center;font-size:9px}