:root{--deep-space:#0a0f14;--navy-eclipse:#0f1923;--horizon-cyan:#00a8cb;--pure-white:#fff;--slate:#64748b;--moon-gray:#d1d5db;--bg-primary:var(--deep-space);--bg-card:var(--navy-eclipse);--accent:var(--horizon-cyan);--text-primary:var(--pure-white);--text-secondary:var(--slate);--text-muted:var(--moon-gray);--warning:#f59e0b;--danger:#ef4444;--success:#22c55e;--font-headline:"Aldrich", "Poppins", sans-serif;--font-body:"Inter", "Lato", sans-serif;--nav-height:56px;--mission-bar-height:36px;--card-radius:6px;--btn-radius:4px;--cyan-glow:0 0 20px #00a8cb26;--cyan-glow-strong:0 0 30px #00a8cb40}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-body);color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.6}#app{flex-direction:column;width:100%;max-width:100%;height:100dvh;display:flex;position:relative;overflow:hidden}#header{height:var(--nav-height);background:var(--bg-primary);z-index:100;border-bottom:1px solid #64748b33;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.header-left{align-items:center;gap:12px;display:flex}.header-logo{object-fit:contain;width:auto;height:28px}.logo-text{font-family:var(--font-headline);letter-spacing:3px;color:var(--text-primary);text-transform:uppercase;font-size:20px}.header-right{align-items:center;gap:12px;display:flex}.header-icon-btn{width:32px;height:32px;color:var(--accent);cursor:pointer;background:0 0;border:1px solid #64748b4d;border-radius:50%;justify-content:center;align-items:center;font-size:18px;transition:all .2s;display:flex}.header-icon-btn:hover{background:#00a8cb26}.header-icon-btn.active{background:var(--accent);color:var(--pure-white)}.mission-drawer{top:var(--nav-height);z-index:500;background:var(--bg-card);border-bottom:2px solid #00a8cb4d;max-height:60vh;animation:.2s ease-out drawer-slide-down;position:absolute;left:0;right:0;overflow-y:auto;box-shadow:0 8px 32px #00000080}@keyframes drawer-slide-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.drawer-header{justify-content:space-between;align-items:center;padding:10px 16px 6px;display:flex}.drawer-title{font-family:var(--font-headline);letter-spacing:2px;color:var(--accent);font-size:12px}.drawer-close{width:28px;height:28px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex}.drawer-close:hover{color:var(--text-primary)}.drawer-add{gap:8px;padding:8px 16px;display:flex}.drawer-input{background:var(--bg-primary);min-width:0;color:var(--text-primary);border-radius:var(--btn-radius);font-family:var(--font-body);border:1px solid #64748b4d;outline:none;flex:1;padding:8px 12px;font-size:12px}.drawer-input::placeholder{color:var(--text-secondary);font-size:11px}.drawer-input:focus{border-color:var(--accent)}.drawer-add-btn{border-radius:var(--btn-radius);background:var(--accent);width:36px;height:36px;color:var(--pure-white);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;transition:opacity .2s;display:flex}.drawer-add-btn:hover{opacity:.85}.mission-list{padding:0 8px 8px}.mission-item{border-radius:var(--btn-radius);cursor:pointer;align-items:center;gap:10px;padding:10px 12px;transition:background .15s;display:flex}.mission-item:hover{background:#64748b1a}.mission-item.active{border-left:3px solid var(--accent);background:#00a8cb1a}.mission-item-icon{color:var(--text-secondary);flex-shrink:0;font-size:16px}.mission-item.active .mission-item-icon{color:var(--accent)}.mission-item-info{flex:1;min-width:0}.mission-item-name{font-family:var(--font-body);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.mission-item-meta{font-family:var(--font-body);color:var(--text-secondary);font-size:10px}.mission-item-status{font-family:var(--font-body);letter-spacing:1px;border-radius:10px;flex-shrink:0;padding:2px 8px;font-size:9px;font-weight:700}.mission-item-status.ended{color:var(--text-secondary);background:#64748b33}.mission-item-status.live{color:var(--accent);background:#00a8cb33}.mission-item-delete{width:24px;height:24px;color:var(--text-secondary);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;transition:opacity .15s;display:flex}.mission-item:hover .mission-item-delete{opacity:1}.mission-item-delete:hover{color:var(--danger)}.drawer-footer{text-align:center;padding:6px 16px 10px}.drawer-note{font-family:var(--font-body);color:var(--text-secondary);letter-spacing:.5px;font-size:9px}.status-badge{font-family:var(--font-body);letter-spacing:1.5px;text-transform:uppercase;border-radius:12px;padding:4px 12px;font-size:10px;font-weight:700;line-height:1}.status-live{background:var(--accent);color:var(--pure-white);animation:2s ease-in-out infinite pulse-live}.status-replay{color:var(--accent);background:#00a8cb26;border:1px solid #00a8cb66}.status-connecting{color:var(--warning);border:1px solid var(--warning);background:#f59e0b33}@keyframes pulse-live{0%,to{box-shadow:0 0 #00a8cb66}50%{box-shadow:0 0 0 6px #00a8cb00}}#mission-bar{background:var(--bg-card);min-height:var(--mission-bar-height);border-bottom:1px solid #64748b26;flex-shrink:0;justify-content:space-between;align-items:center;padding:6px 16px;display:flex}.mission-name{font-family:var(--font-headline);letter-spacing:1.5px;color:var(--text-primary);text-transform:uppercase;font-size:13px}.mission-hashtag{font-family:var(--font-body);color:var(--accent);margin-left:10px;font-size:11px;font-weight:500}.last-update{font-family:var(--font-body);color:var(--text-secondary);letter-spacing:.5px;white-space:nowrap;font-size:10px;font-weight:300}.device-selector-bar{background:var(--bg-primary);border-bottom:1px solid #64748b26;flex-shrink:0;align-items:center;gap:10px;padding:6px 16px;display:flex}.device-label{font-family:var(--font-body);letter-spacing:1px;color:var(--text-secondary);text-transform:uppercase;align-items:center;gap:4px;font-size:10px;font-weight:500;display:flex}.device-label i{color:var(--accent);font-size:14px}.device-select{background:var(--bg-card);color:var(--text-primary);border-radius:var(--btn-radius);font-family:var(--font-body);cursor:pointer;border:1px solid #64748b4d;outline:none;flex:1;padding:5px 10px;font-size:12px;font-weight:500}.device-select:focus{border-color:var(--accent)}#map-container{flex:55%;min-height:200px;position:relative;overflow:hidden}#map{width:100%;height:100%}.mapboxgl-ctrl-attrib{opacity:.5;font-size:9px!important}#map-controls{z-index:10;position:absolute;top:10px;left:10px}.map-style-toggle{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--btn-radius);background:#0f1923d9;border:1px solid #64748b4d;display:flex;overflow:hidden}.map-style-btn{font-family:var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:6px 14px;font-size:10px;font-weight:700;transition:all .2s}.map-style-btn:hover{color:var(--text-primary)}.map-style-btn.active{background:var(--accent);color:var(--pure-white)}.map-actions{z-index:10;flex-direction:column;gap:8px;display:flex;position:absolute;bottom:20px;right:10px}.map-action-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:40px;height:40px;color:var(--accent);cursor:pointer;background:#0f1923d9;border:1px solid #64748b4d;border-radius:50%;justify-content:center;align-items:center;font-size:20px;transition:all .2s;display:flex}.map-action-btn:hover{background:var(--accent);color:var(--pure-white)}.map-action-btn.active{background:var(--accent);color:var(--pure-white);border-color:var(--accent)}.map-action-btn.hidden{display:none}.altitude-pills-row{z-index:10;align-items:flex-end;gap:6px;display:flex;position:absolute;bottom:20px;left:10px}.altitude-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--btn-radius);background:#0a0f14cc;border:1px solid #00a8cb4d;align-items:baseline;gap:4px;padding:6px 14px;display:flex}.altitude-value{font-family:var(--font-body);color:var(--pure-white);font-size:22px;font-weight:700;line-height:1}.altitude-unit{font-family:var(--font-body);color:var(--accent);letter-spacing:1px;font-size:10px;font-weight:500}#telemetry-section{background:var(--bg-primary);border-top:1px solid #00a8cb33;flex:0 auto;padding:12px;overflow-y:auto}.telemetry-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.telem-card{background:var(--bg-card);border-radius:var(--card-radius);border:1px solid #0000;align-items:center;gap:10px;padding:12px 14px;transition:border-color .3s;display:flex}.telem-card:hover{border-color:#00a8cb33}.telem-icon{flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.telem-icon i{color:var(--accent);stroke-width:1.5px;font-size:22px}.telem-data{flex-direction:column;min-width:0;display:flex}.telem-label{font-family:var(--font-body);letter-spacing:1.2px;color:var(--text-secondary);text-transform:uppercase;margin-bottom:3px;font-size:9px;font-weight:500;line-height:1}.telem-value-row{align-items:baseline;gap:3px;display:flex}.telem-value{font-family:var(--font-body);color:var(--text-primary);font-size:20px;font-weight:700;line-height:1.1;transition:color .3s}.telem-value-sm{letter-spacing:.3px;font-size:13px;font-weight:500}.telem-unit{font-family:var(--font-body);color:var(--text-secondary);letter-spacing:.5px;font-size:10px;font-weight:300}.telem-card.warning .telem-value,.telem-card.warning .telem-icon i{color:var(--warning)}.telem-card.danger .telem-value,.telem-card.danger .telem-icon i{color:var(--danger)}.telem-value.updated{color:var(--accent)}.connection-banner{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--pure-white);font-family:var(--font-body);letter-spacing:.5px;z-index:1000;background:#ef4444e6;justify-content:center;align-items:center;gap:8px;padding:10px;font-size:12px;font-weight:500;display:flex;position:fixed;bottom:48px;left:0;right:0}.connection-banner i{font-size:16px}.error-state{background:var(--bg-primary);z-index:200;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px;display:flex;position:absolute;inset:0}.error-state i{color:var(--text-secondary);font-size:48px}.error-state h2{font-family:var(--font-headline);letter-spacing:2px;color:var(--text-primary);text-transform:uppercase;font-size:24px}.error-state p{font-family:var(--font-body);color:var(--text-secondary);font-size:14px}.loading-state{background:var(--bg-primary);z-index:200;flex-direction:column;justify-content:center;align-items:center;gap:20px;display:flex;position:absolute;inset:0}.loading-state p{font-family:var(--font-headline);letter-spacing:3px;color:var(--text-secondary);text-transform:uppercase;font-size:14px}.loading-pulse{border:2px solid #00a8cb33;border-top-color:var(--accent);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.tab-bar{background:var(--bg-card);z-index:100;border-top:1px solid #64748b33;flex-shrink:0;align-items:stretch;height:48px;display:flex}.tab-btn{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;padding:4px 0;transition:color .2s;display:flex}.tab-btn i{font-size:20px;transition:color .2s}.tab-btn span{font-family:var(--font-body);letter-spacing:1.2px;text-transform:uppercase;font-size:9px;font-weight:700}.tab-btn.active,.tab-btn.active i{color:var(--accent)}#map-container.compact{flex:0 0 35%;min-height:150px}#graph-section,#telemetry-section{flex:0 auto;overflow-y:auto}#app.view-graph #graph-section,#app.view-data #telemetry-section{flex:65%}#graph-section{background:var(--bg-primary);border-top:1px solid #00a8cb33;flex-direction:column;display:flex}.graph-sensor-select{background:var(--bg-card);min-width:0;color:var(--accent);border-radius:var(--btn-radius);font-family:var(--font-body);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;border:1px solid #00a8cb66;outline:none;flex:1;padding:4px 8px;font-size:10px;font-weight:700}.graph-sensor-select:focus{border-color:var(--accent)}.graph-canvas-wrap{flex:1;min-height:0;padding:0 8px;position:relative}.graph-canvas-wrap canvas{width:100%!important;height:100%!important}.graph-overlay-label{z-index:10;font-family:var(--font-body);letter-spacing:1.5px;color:var(--accent);pointer-events:none;background:#00a8cb1f;border:1px solid #00a8cb4d;border-radius:12px;padding:3px 10px;font-size:9px;font-weight:700;position:absolute;top:6px;right:14px}.graph-overlay-readout{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--btn-radius);pointer-events:none;background:#0a0f14cc;border:1px solid #00a8cb4d;align-items:baseline;gap:4px;padding:4px 10px;display:flex;position:absolute;top:28px;right:14px}.readout-value{font-family:var(--font-body);color:var(--pure-white);font-size:18px;font-weight:700;line-height:1}.readout-unit{font-family:var(--font-body);color:var(--accent);letter-spacing:1px;text-transform:uppercase;font-size:9px;font-weight:500}.graph-inline-controls{flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:6px 12px;display:flex}.graph-mini-select{background:var(--bg-card);color:var(--text-primary);border-radius:var(--btn-radius);font-family:var(--font-body);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;border:1px solid #64748b4d;outline:none;padding:4px 8px;font-size:10px;font-weight:700}.graph-mini-select:focus{border-color:var(--accent)}.replay-bar{background:var(--bg-card);z-index:50;border-top:1px solid #00a8cb33;border-bottom:1px solid #64748b26;flex-shrink:0;align-items:center;gap:10px;height:40px;padding:0 12px;display:flex}.replay-btn{width:32px;height:32px;color:var(--accent);cursor:pointer;background:#00a8cb26;border:1px solid #00a8cb4d;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;transition:all .2s;display:flex}.replay-btn:hover{background:#00a8cb40}.replay-btn:active{background:var(--accent);color:var(--pure-white)}.replay-scrubber{cursor:pointer;-webkit-tap-highlight-color:transparent;flex:1;min-width:0;padding:8px 0}.scrubber-track{background:#64748b4d;border-radius:2px;height:4px;position:relative}.scrubber-fill{background:var(--accent);pointer-events:none;border-radius:2px;width:0%;height:100%;position:absolute;top:0;left:0}.scrubber-thumb{background:var(--accent);border:2px solid var(--pure-white);pointer-events:none;border-radius:50%;width:14px;height:14px;transition:box-shadow .2s;position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);box-shadow:0 0 6px #00a8cb80}.replay-scrubber:active .scrubber-thumb{transform:translate(-50%,-50%)scale(1.2);box-shadow:0 0 12px #00a8cbcc}.replay-time{font-family:var(--font-body);letter-spacing:1px;color:var(--accent);white-space:nowrap;text-align:center;flex-shrink:0;min-width:56px;font-size:10px;font-weight:700}.status-badge.status-replay{cursor:pointer;transition:all .2s}.status-badge.status-replay:hover{color:var(--pure-white);background:#00a8cb4d}.status-badge.status-replay:active{background:var(--accent);color:var(--pure-white)}.status-badge.status-playing{background:var(--accent);color:var(--pure-white);cursor:pointer;animation:2s ease-in-out infinite pulse-live}.status-badge.status-paused{color:var(--warning);border:1px solid var(--warning);cursor:pointer;background:#f59e0b33}@keyframes point-glow-in{0%{filter:drop-shadow(0 0 8px #00a8cbe6)}to{filter:drop-shadow(0 0 4px #00a8cb99)}}.hidden{display:none!important}@media (width>=768px){#header{padding:0 24px}.logo-text{letter-spacing:4px;font-size:22px}#mission-bar{padding:8px 24px}.mission-name{font-size:14px}#telemetry-section{padding:16px 24px}.telemetry-grid{grid-template-columns:repeat(4,1fr);gap:10px}.telem-value{font-size:22px}.map-style-btn{padding:8px 18px;font-size:11px}}@media (width>=1200px){.telemetry-grid{grid-template-columns:repeat(4,1fr);gap:12px}.telem-card{padding:16px 18px}.telem-value{font-size:26px}}.mapboxgl-popup-content{background:var(--navy-eclipse);border:1px solid #00a8cb4d;border-radius:8px;padding:10px 12px;box-shadow:0 4px 16px #00000080}.mapboxgl-popup-tip{border-top-color:var(--navy-eclipse)}.mapboxgl-popup-close-button{color:#94a3b8;padding:2px 6px;font-size:16px}.mapboxgl-popup-close-button:hover{color:#e2e8f0;background:0 0}#map-controls{align-items:center;gap:8px;display:flex}.balloon-select{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);border-radius:var(--btn-radius);font-family:var(--font-body);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;background:#0f1923d9;border:1px solid #00a8cb4d;outline:none;padding:5px 10px;font-size:10px;font-weight:700}.balloon-select:focus{border-color:var(--accent);box-shadow:0 0 6px #00a8cb4d}.balloon-menu{position:relative}.balloon-menu-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);border-radius:var(--btn-radius);font-family:var(--font-body);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;white-space:nowrap;background:#0f1923d9;border:1px solid #00a8cb4d;align-items:center;gap:4px;padding:5px 10px;font-size:10px;font-weight:700;display:flex}.balloon-menu-btn:focus{border-color:var(--accent);outline:none;box-shadow:0 0 6px #00a8cb4d}.balloon-menu-list{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--btn-radius);z-index:20;background:#0f1923f2;border:1px solid #00a8cb40;min-width:100%;padding:4px 0;position:absolute;top:calc(100% + 4px);left:0;box-shadow:0 4px 16px #00000080}.balloon-menu-item{cursor:pointer;white-space:nowrap;align-items:center;gap:8px;padding:6px 10px;transition:background .12s;display:flex}.balloon-menu-item:hover{background:#ffffff0f}.balloon-menu-item input[type=checkbox]{appearance:none;cursor:pointer;border:2px solid #6b7280;border-radius:3px;flex-shrink:0;width:14px;height:14px;transition:border-color .15s,background .15s;position:relative}.balloon-menu-item input[type=checkbox]:checked{background:currentColor;border-color:currentColor}.balloon-menu-item input[type=checkbox]:checked:after{content:"";border:2px solid #0f1923f2;border-width:0 2px 2px 0;width:5px;height:8px;position:absolute;top:1px;left:3px;transform:rotate(45deg)}.balloon-menu-item-label{font-family:var(--font-body);letter-spacing:.6px;text-transform:uppercase;color:#6b7280;font-size:11px;font-weight:700;transition:color .15s}.balloon-menu-item.visible .balloon-menu-item-label{color:var(--item-color)}.device-pills{flex-direction:column;gap:3px;display:flex}.device-pills-row{gap:4px;display:flex}.device-pill{font-family:var(--font-body);letter-spacing:.5px;text-transform:uppercase;cursor:pointer;border:1px solid #00a8cb4d;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:1px;min-height:18px;padding:3px 8px;font-size:9px;font-weight:600;line-height:1;transition:transform .1s;display:flex}.device-pill:active{transform:scale(.95)}.device-pill-name{font-weight:700}.device-pill-time{opacity:.8;font-size:7px}.device-pill--active{color:#fff;background:#00a8cbd9;box-shadow:0 0 8px #00a8cb66}.device-pill--warning{color:#1a1a1a;background:#f59e0bd9;box-shadow:0 0 8px #f59e0b59}.device-pill--issue{color:#94a3b8;background:#d1d5db73;box-shadow:0 0 8px #d1d5db26}.graph-device-label{z-index:10;font-family:var(--font-body);letter-spacing:1px;text-transform:uppercase;color:#1a1a1a;pointer-events:none;background:#f59e0bd9;border:1px solid #00a8cb4d;border-radius:6px;padding:3px 8px;font-size:9px;font-weight:700;position:absolute;top:6px;right:80px;box-shadow:0 0 8px #f59e0b59}.data-selectors{background:var(--bg-primary);border-top:1px solid #64748b1a;justify-content:flex-end;gap:6px;padding:6px 12px;display:flex}.data-selector-dropdown{color:var(--text-primary);border-radius:var(--btn-radius);font-family:var(--font-body);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;background:#0f1923d9;border:1px solid #00a8cb4d;outline:none;padding:4px 10px;font-size:10px;font-weight:700}.data-selector-dropdown:focus{border-color:var(--accent);box-shadow:0 0 6px #00a8cb4d}