:root{--ink:#eaf1ef;--muted:#7f928e;--line:#9abab22a;--green:#9cff8b;--cyan:#68e3d1}*{box-sizing:border-box}html,body{color:var(--ink);background:#071011;margin:0}button,a{color:inherit;font:inherit}button{cursor:pointer}body{font-family:Arial,sans-serif}.app-shell{background:radial-gradient(circle at 50% 20%,#17302e,#060d0e 65%);height:100vh;min-height:720px;overflow:hidden}.topbar{border-bottom:1px solid var(--line);z-index:10;background:#070e0fef;grid-template-columns:290px 1fr 290px;align-items:center;height:68px;padding:0 22px;display:grid;position:relative}.brand{letter-spacing:.16em;align-items:center;gap:12px;font-size:12px;font-weight:800;text-decoration:none;display:flex}.brand small{color:var(--muted);margin-top:4px;font-size:8px;display:block}.brand-mark{background:var(--green);color:#071011;border-radius:8px 2px;place-items:center;width:34px;height:34px;font-size:14px;display:grid}.scenario{border:1px solid var(--line);background:#0c1516;border-radius:7px;justify-self:center;align-items:center;gap:13px;padding:8px 9px 8px 15px;display:flex}.scenario span{letter-spacing:.18em;color:var(--muted);font-size:8px}.scenario strong{font-size:11px}.scenario button{background:0 0;border:0}.top-actions{justify-self:end;align-items:center;gap:12px;display:flex}.connection{font:700 9px monospace}.connection i,.toast i,.mqtt-note i{background:var(--green);width:7px;height:7px;box-shadow:0 0 9px var(--green);border-radius:50%;margin-right:7px;display:inline-block}.icon-button,.avatar{border:1px solid var(--line);background:#0c1516;border-radius:7px;height:34px}.icon-button{width:36px}.avatar{width:34px;color:var(--green);font-size:10px}.workspace{grid-template-columns:272px minmax(420px,1fr) 292px;height:calc(100vh - 68px);min-height:652px;display:grid}.panel{z-index:4;background:#0a1213ef}.left-panel{border-right:1px solid var(--line);padding:0 16px}.right-panel{border-left:1px solid var(--line);padding:0 18px}.panel-title{border-bottom:1px solid var(--line);letter-spacing:.17em;color:#98aaa6;justify-content:space-between;align-items:center;height:51px;font-size:9px;font-weight:800;display:flex}.panel-title button{color:var(--green);background:0 0;border:0;font-size:18px}.panel-title em{color:var(--green);border:1px solid #9cff8b4d;border-radius:3px;padding:4px 7px;font-size:8px;font-style:normal}.mission-list{border-bottom:1px solid var(--line);padding:11px 0}.mission{text-align:left;color:#879793;background:0 0;border:1px solid #0000;border-radius:7px;grid-template-columns:30px 1fr 18px;align-items:center;gap:8px;width:100%;padding:10px 8px;display:grid}.mission.active{color:var(--ink);background:#68e3d112;border-color:#68e3d12e}.mission-index{color:var(--cyan);font:10px monospace}.mission strong{font-size:11px;display:block}.mission small{color:var(--muted);margin-top:4px;font-size:8px;display:block}.mission b{color:var(--green);font-size:9px}.telemetry-title{letter-spacing:.16em;color:#9baca8;justify-content:space-between;padding:19px 4px 12px;font-size:9px;display:flex}.telemetry-title em{color:var(--cyan);font:8px monospace}.telemetry-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.metric{border:1px solid var(--line);background:#0c1516;border-radius:6px;padding:10px}.metric>span{color:var(--muted);font-size:7px;display:block}.metric strong{margin-top:5px;font:22px monospace;display:block}.metric strong small{color:var(--muted);margin-left:4px;font-size:8px}.metric>i{background:#1d2b2a;height:2px;margin-top:8px;display:block}.metric>i b{background:var(--cyan);height:100%;display:block}.signal{border:1px solid var(--line);color:var(--muted);border-radius:6px;grid-template-columns:1fr auto;gap:7px;margin-top:12px;padding:10px;font-size:7px;display:grid}.signal div{grid-row:2}.signal div i{background:var(--green);width:14px;height:3px;margin-right:3px;display:inline-block}.signal div .dim{background:#243432}.signal strong{color:#b9c7c4;grid-row:2;font:8px monospace}.viewport{perspective:900px;background:linear-gradient(#19312f,#0a1516);position:relative;overflow:hidden}.viewport:before{content:"";transform-origin:bottom;opacity:0;background-color:#0000;background-image:linear-gradient(#77baab0e 1px,#0000 1px),linear-gradient(90deg,#77baab0e 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:34px 34px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0;transform:perspective(500px)rotateX(62deg)scale(1.8)}.viewport.show-grid:before{opacity:1}.sky-glow{background:radial-gradient(#4ebaa32e,#0000 67%);width:55%;height:45%;position:absolute;top:16%;left:25%}.scene-label{position:absolute;top:18px;left:22px}.scene-label span{color:var(--green);font:7px monospace;display:block}.scene-label strong{font:12px monospace}.coordinates{border:1px solid var(--line);border-radius:5px;display:flex;position:absolute;top:17px;right:19px}.coordinates span{color:var(--muted);border-right:1px solid var(--line);padding:7px 8px;font:7px monospace}.coordinates b{color:var(--ink);font-size:9px}.world{width:380px;height:260px;transform-style:preserve-3d;position:absolute;top:54%;left:50%;transform:translate(-50%,-50%)rotateX(57deg)rotate(-10deg)}.pad{color:#74918a;background:radial-gradient(circle,#263636 0 36%,#172423 37% 53%,#90d47b 54% 57%,#12201f 58% 71%,#314943 72% 73%,#101a1a 74%);border:3px solid #314943;border-radius:50%;place-items:center;font:700 100px Arial;display:grid;position:absolute;inset:0;box-shadow:0 30px 70px #020606}.pad-ring{border:1px dashed #a0eddb59;border-radius:50%;position:absolute;inset:16px}.drone{--lift:0px;width:116px;height:92px;transform:translate3d(var(--dx),var(--dy),calc(30px + var(--lift))) rotateZ(var(--yaw)) rotateX(-57deg);transform-style:preserve-3d;z-index:5;transition:all .18s;position:absolute;top:calc(50% - 46px);left:calc(50% - 58px)}.drone.flying{--lift:75px}.arm{background:#263d3b;border-radius:5px;width:88px;height:7px;position:absolute;top:43px;left:14px}.arm.a2{transform:rotate(90deg)}.rotor{background:repeating-conic-gradient(#9cff8b33 0 8deg,transparent 8deg 20deg);border:2px solid #6e8983;border-radius:50%;width:34px;height:34px;animation:.22s linear infinite paused spin;position:absolute}.flying .rotor{animation-play-state:running}.r1{left:0}.r2{right:0}.r3{bottom:0;left:0}.r4{bottom:0;right:0}.drone-body{color:#10201e;background:linear-gradient(145deg,#cdf6ed,#476e68);border-radius:11px 11px 16px 16px;place-items:center;width:38px;height:32px;font:700 10px Arial;display:grid;position:absolute;top:30px;left:39px;box-shadow:0 5px 14px #000}.camera{background:#071011;border:2px solid #5c7c76;border-radius:50%;width:15px;height:11px;position:absolute;bottom:24px;left:51px}.shadow{filter:blur(8px);width:84px;height:34px;transform:translate(var(--dx),var(--dy));background:#0008;border-radius:50%;position:absolute;top:calc(50% - 17px);left:calc(50% - 42px)}@keyframes spin{to{transform:rotate(360deg)}}.map-card{border:1px solid var(--line);background:#081011db;border-radius:7px;width:134px;height:112px;padding:8px;position:absolute;bottom:18px;left:18px}.map-grid{background-color:#0000;background-image:linear-gradient(#162827 1px,#0000 1px),linear-gradient(90deg,#162827 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:14px 14px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;height:76px;position:relative}.map-grid i{background:var(--green);width:8px;height:8px;box-shadow:0 0 12px var(--green);border-radius:50%;position:absolute}.map-card>span,.map-card>strong{color:var(--muted);font:7px monospace;position:absolute;bottom:8px}.map-card>strong{right:8px}.view-tools{border:1px solid var(--line);background:#081011e6;border-radius:7px;display:flex;position:absolute;bottom:18px;right:18px}.view-tools button{border:0;border-right:1px solid var(--line);color:#8fa09c;background:0 0;width:58px;height:48px}.view-tools button.selected{color:var(--green);background:#9cff8b12}.view-tools span{font-size:6px;display:block}.flight-status{text-align:center;padding:20px 0 15px}.flight-status>span{color:var(--green);font:8px monospace;display:block}.flight-status strong{margin:7px;font:34px monospace;display:block}.flight-status small{color:var(--muted);font-size:7px}.takeoff{text-align:left;background:linear-gradient(90deg,#9cff8b1f,#68e3d10d);border:1px solid #9cff8b40;border-radius:7px;align-items:center;gap:13px;width:100%;padding:12px;display:flex}.takeoff i{background:var(--green);color:#0c1716;border-radius:50%;place-items:center;width:35px;height:35px;font-size:20px;display:grid}.takeoff strong{font-size:10px;display:block}.takeoff small{color:var(--muted);margin-top:4px;font-size:7px;display:block}.takeoff.land i{background:#ffb97b}.control-label{color:#93a5a1;justify-content:space-between;margin:21px 0 10px;font-size:8px;display:flex}.control-label small{font-size:7px}.dpad{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:4px;width:146px;height:146px;margin:auto;display:grid}.dpad button{border:1px solid var(--line);color:#91a6a1;background:#101d1e;border-radius:6px;font-size:17px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-area:2/1}.dpad .center{color:var(--green);border-radius:50%;grid-area:2/2;font-size:9px}.dpad button:nth-child(4){grid-area:2/3}.dpad button:nth-child(5){grid-area:3/2}.dual-controls{grid-template-columns:1fr 1fr;gap:7px;margin-top:15px;display:grid}.dual-controls span{color:var(--muted);font-size:7px}.dual-controls>div>div{border:1px solid var(--line);grid-template-columns:30px 1fr 30px;height:32px;margin-top:6px;display:grid}.dual-controls button{color:#879b96;background:#101d1e;border:0}.dual-controls b{place-items:center;font:10px monospace;display:grid}.mission-run{background:var(--green);color:#0a1514;border:0;border-radius:6px;width:100%;height:40px;margin-top:16px;font-size:9px;font-weight:900}.mission-run:disabled{opacity:.25}.mission-run.stop{background:#ffbc78}.mqtt-note{color:var(--muted);font:7px/1.7 monospace}.mqtt-note i{width:5px;height:5px}.toast{z-index:20;border:1px solid var(--line);background:#10201f;border-radius:20px;padding:8px 14px;font-size:8px;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.toast i{width:5px;height:5px}@media (max-width:1050px){.workspace{grid-template-columns:220px 1fr 260px}.topbar{grid-template-columns:230px 1fr 230px}.world{width:310px;height:220px}.left-panel,.right-panel{padding:0 10px}}@media (max-width:820px){.app-shell{height:auto;min-height:900px;overflow:auto}.topbar{grid-template-columns:1fr auto}.scenario{display:none}.workspace{grid-template-columns:1fr 250px;height:auto}.left-panel{display:none}.viewport,.right-panel{min-height:830px}.connection{display:none}}@media (max-width:620px){.workspace{flex-direction:column;display:flex}.viewport{min-height:520px}.right-panel{min-height:720px}.coordinates,.map-card{display:none}.world{width:270px;height:190px}}.connection.offline{color:#8b9895}.connection.offline i{background:#f2a65a;box-shadow:0 0 9px #f2a65a}.viewport{background:0 0}.three-scene{z-index:1;position:fixed;inset:68px 292px 0 272px}.three-scene canvas{cursor:grab;width:100%;height:100%;display:block}.three-scene canvas:active{cursor:grabbing}.orbit-hint{z-index:2;letter-spacing:.12em;color:#d7e8e4;pointer-events:none;background:#071011b8;border:1px solid #d9fff02e;border-radius:20px;padding:7px 12px;font:7px monospace;position:absolute;bottom:19px;left:50%;transform:translate(-50%)}.world,.sky-glow{display:none}@media (max-width:1050px){.three-scene{left:220px;right:260px}}@media (max-width:820px){.three-scene{height:830px;bottom:auto;left:0;right:250px}}@media (max-width:620px){.three-scene{height:520px;position:absolute;top:68px;left:0;right:0}}