*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0c10;--bg2:#10141a;--bg3:#161b24;--border:#1e2533;--text:#c8d4e8;--text2:#6b7a99;--accent:#3b82f6;--green:#22c55e;--yellow:#f59e0b;--red:#ef4444;--purple:#a855f7}html,body,#root{background:var(--bg);height:100%;color:var(--text);font-family:JetBrains Mono,Fira Code,monospace;font-size:13px;overflow:hidden}.app{flex-direction:column;height:100vh;display:flex}.topbar{background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:16px;height:48px;padding:0 16px;display:flex;position:relative}.logo{color:var(--accent);letter-spacing:2px;margin-right:8px;font-size:16px;font-weight:700}.conn-dot{background:var(--red);border-radius:50%;flex-shrink:0;width:8px;height:8px}.conn-dot.ok{background:var(--green);box-shadow:0 0 6px var(--green)}.conn-dot.err{background:var(--red)}.conn-label{color:var(--text2);font-size:11px}.topbar-left{align-items:center;gap:8px;min-width:140px;display:flex}.topbar-stats{flex:1;gap:16px;display:flex}.stat{flex-direction:column;align-items:center;display:flex}.stat span{color:var(--text2);text-transform:uppercase;font-size:10px}.stat b{font-size:14px}.stat.warn b{color:var(--yellow)}.topbar-right{align-items:center;gap:8px;margin-left:auto;display:flex}.mission-menu{cursor:pointer;position:relative}.mission-label{color:var(--accent);border:1px solid var(--border);border-radius:4px;padding:4px 8px;font-size:12px}.mission-dropdown{background:var(--bg3);border:1px solid var(--border);z-index:100;border-radius:6px;min-width:240px;display:none;position:absolute;top:100%;right:0}.mission-menu:hover .mission-dropdown{display:block}.mission-item{text-align:left;width:100%;color:var(--text);cursor:pointer;background:0 0;border:none;flex-direction:column;gap:2px;padding:8px 12px;display:flex}.mission-item:hover{background:var(--bg2)}.mission-item b{color:var(--accent)}.mission-item span{color:var(--text2);font-size:11px}.auth-popup{background:var(--bg3);border:1px solid var(--border);z-index:200;border-radius:8px;flex-direction:column;gap:8px;min-width:260px;padding:12px;display:flex;position:absolute;top:52px;right:16px}.auth-title{color:var(--text2);text-transform:uppercase;font-size:11px}.auth-input{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:4px;width:100%;padding:6px 8px;font-family:inherit;font-size:12px}.auth-msg{color:var(--green);font-size:12px}.auth-demo{border-top:1px solid var(--border);flex-direction:column;gap:4px;margin-top:2px;padding-top:8px;display:flex}.auth-demo-label{color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.auth-demo-item{background:var(--bg2);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:4px;justify-content:space-between;align-items:center;padding:5px 8px;font-family:inherit;font-size:12px;display:flex}.auth-demo-item:hover{border-color:var(--accent)}.auth-demo-item.active{border-color:var(--green);background:#00ff800f}.auth-demo-item span{color:var(--text2);font-size:11px}.main{flex:1;display:flex;overflow:hidden}.sidebar{background:var(--bg2);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:200px;display:flex;overflow:hidden}.sidebar-title{color:var(--text2);text-transform:uppercase;border-bottom:1px solid var(--border);padding:10px 12px;font-size:11px}.drone-list{flex:1;overflow-y:auto}.drone-item{cursor:pointer;border-bottom:1px solid var(--border);padding:8px 12px;transition:background .15s}.drone-item:hover,.drone-item.selected{background:var(--bg3)}.drone-item.selected{border-left:2px solid var(--accent)}.drone-item-header{align-items:center;gap:6px;margin-bottom:4px;display:flex}.drone-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.drone-id{flex:1;font-size:12px;font-weight:600}.iff-badge{font-size:9px;font-weight:700}.drone-item-meta{gap:8px;margin-bottom:4px;display:flex}.drone-role,.drone-status{color:var(--text2);font-size:10px}.battery-bar{background:var(--bg);border-radius:2px;height:3px;overflow:hidden}.battery-fill{border-radius:2px;height:100%;transition:width .3s}.battery-label{color:var(--text2);margin-top:1px;font-size:10px}.map-area{flex:1;position:relative}.mission-toast{background:var(--bg3);border:1px solid var(--border);color:var(--green);z-index:1000;border-radius:6px;padding:8px 16px;font-size:13px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.sidebar-v2{background:var(--bg2);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:260px;display:flex;overflow:hidden}.sidebar-tabs{border-bottom:1px solid var(--border);flex-shrink:0;display:flex}.sidebar-tab{color:var(--text2);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 4px;font-family:inherit;font-size:10px;transition:all .15s;display:flex}.sidebar-tab:hover{color:var(--text);background:var(--bg3)}.sidebar-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.sidebar-tab span:first-child{font-size:16px}.sidebar-content{flex:1;overflow-y:auto}.tab-pane{flex-direction:column;display:flex}.tab-section-divider{background:var(--border);height:1px;margin:4px 0}.section-title{color:var(--text2);text-transform:uppercase;letter-spacing:.5px;padding:6px 12px 4px;font-size:10px}.tool-grid{grid-template-columns:1fr 1fr;gap:4px;padding:4px 8px 8px;display:grid}.tool-card{background:var(--bg3);border:1px solid var(--border);color:var(--text2);cursor:pointer;border-radius:6px;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;font-family:inherit;font-size:9px;transition:all .15s;display:flex}.tool-card:hover{background:var(--bg);color:var(--text)}.tool-card.active{border-color:var(--accent);color:var(--accent);background:#3b82f626}.tool-card-icon{font-size:16px}.tool-card-label{text-align:center;line-height:1.2}.tool-hint{background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:5px;margin:0 8px 6px;padding:6px 8px;font-size:10px;line-height:1.4}.draw-panel{background:var(--bg3);border:1px solid var(--border);border-radius:6px;margin:0 8px 6px;padding:8px}.draw-panel-hint{color:var(--text2);margin-bottom:6px;font-size:10px;line-height:1.4}.draw-panel-hint b{color:var(--accent)}.draw-panel-actions{flex-wrap:wrap;gap:4px;display:flex}.zone-legend{flex-direction:column;gap:4px;padding:4px 12px 8px;display:flex}.legend-item{color:var(--text2);align-items:center;gap:6px;font-size:11px;display:flex}.legend-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.swarm-mini-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:4px;padding:4px 8px 8px;display:grid}.mini-drone{background:var(--bg3);border:1px solid var(--border);border-radius:5px;flex-direction:column;gap:1px;padding:5px 6px;display:flex}.mini-drone.flying{border-color:var(--accent)}.mini-drone.returning{border-color:var(--yellow)}.mini-drone.idle{border-color:var(--border)}.mini-drone.charging{border-color:var(--green)}.mini-id{color:var(--text);font-size:11px;font-weight:700}.mini-status{color:var(--text2);text-transform:uppercase;font-size:9px}.mini-batt{font-size:10px;font-weight:600}.program-card{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;display:flex}.program-card:last-child{border-bottom:none}.program-header{flex:1;align-items:flex-start;gap:8px;min-width:0;display:flex}.program-icon{flex-shrink:0;font-size:18px}.program-info{flex:1;min-width:0}.program-name{color:var(--text);font-size:12px;font-weight:600}.program-desc{color:var(--text2);margin-top:2px;font-size:10px;line-height:1.3}.program-run{white-space:nowrap;flex-shrink:0}.right-panel{background:var(--bg2);border-left:1px solid var(--border);flex-shrink:0;width:240px;overflow-y:auto}.panel{padding:12px}.empty-panel{justify-content:center;align-items:center;height:100%;display:flex}.empty-hint{color:var(--text2);text-align:center;font-size:11px}.panel-title{color:var(--accent);margin-bottom:12px;font-size:13px;font-weight:700}.info-grid{flex-direction:column;gap:4px;margin-bottom:12px;display:flex}.info-row{justify-content:space-between;align-items:center;font-size:11px;display:flex}.info-row span{color:var(--text2)}.info-row b{font-size:12px}.cmd-section{flex-direction:column;gap:6px;display:flex}.cmd-title{color:var(--text2);text-transform:uppercase;margin-top:4px;font-size:10px}.cmd-row{gap:6px;display:flex}.cmd-row.wrap{flex-wrap:wrap}.cmd-msg{border-radius:4px;margin-top:8px;padding:6px 8px;font-size:11px}.cmd-msg.ok{color:var(--green);background:#22c55e1a}.cmd-msg.err{color:var(--red);background:#ef44441a}.btn{cursor:pointer;border:none;border-radius:4px;padding:5px 10px;font-family:inherit;font-size:11px;font-weight:600;transition:opacity .15s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-green{color:var(--green);background:#22c55e33;border:1px solid #22c55e4d}.btn-yellow{color:var(--yellow);background:#f59e0b33;border:1px solid #f59e0b4d}.btn-red{color:var(--red);background:#ef444433;border:1px solid #ef44444d}.btn-blue{color:var(--accent);background:#3b82f633;border:1px solid #3b82f64d}.btn-role{background:var(--bg3);color:var(--text2);border:1px solid var(--border);padding:4px 7px;font-size:10px}.btn-role.active{color:var(--accent);border-color:var(--accent);background:#3b82f626}.btn-icon{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:4px;padding:4px 8px;font-size:14px}.map-layer-switcher{z-index:1000;gap:4px;display:flex;position:absolute;bottom:20px;right:16px}.map-toolbar{z-index:1000;flex-direction:column;gap:4px;display:flex;position:absolute;top:10px;left:10px}.map-tool-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text2);cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;gap:6px;min-width:110px;padding:6px 10px;font-family:inherit;font-size:11px;transition:all .15s;display:flex}.map-tool-btn:hover{background:var(--bg3);color:var(--text)}.map-tool-btn.active{border-color:var(--accent);color:var(--accent);background:#3b82f626}.tool-icon{text-align:center;width:18px;font-size:14px}.tool-label{font-size:11px}.draw-controls{background:var(--bg2);border:1px solid var(--border);border-radius:6px;flex-direction:column;gap:6px;min-width:180px;padding:8px 10px;display:flex}.draw-hint{color:var(--text2);font-size:10px;line-height:1.4}.draw-hint b{color:var(--accent)}.draw-actions{flex-wrap:wrap;gap:4px;display:flex}.draw-hint-bar{background:var(--bg2);border:1px solid var(--border);color:var(--text2);border-radius:6px;min-width:180px;padding:6px 10px;font-size:10px;line-height:1.4}.modal-backdrop{z-index:2000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg3);border:1px solid var(--border);border-radius:10px;flex-direction:column;width:460px;max-height:85vh;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--border);color:var(--accent);justify-content:space-between;align-items:center;padding:14px 16px;font-size:14px;font-weight:700;display:flex}.modal-close{color:var(--text2);cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:16px}.modal-body{flex-direction:column;gap:16px;padding:16px;display:flex;overflow-y:auto}.modal-footer{border-top:1px solid var(--border);align-items:center;gap:8px;padding:12px 16px;display:flex}.settings-section{flex-direction:column;gap:6px;display:flex}.settings-label{text-transform:uppercase;color:var(--text2);font-size:11px}.settings-input{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:5px;width:100%;padding:7px 10px;font-family:inherit;font-size:12px}.settings-input.small{width:140px}.settings-hint{color:var(--text2);font-size:11px}.settings-hint a{color:var(--accent)}.settings-row{gap:6px;display:flex}.settings-coords{gap:12px;display:flex}.settings-coords label{color:var(--text2);flex-direction:column;gap:4px;font-size:11px;display:flex}