/* AirSim UAV Command · Dark Military HUD */



:root {

  --c-bg:      #020810;

  --c-panel:   #060e1c;

  --c-inset:   #030a15;

  --c-border:  #0c2a50;

  --c-glow:    #1050a0;

  --cyan:      #00f5ff;

  --green:     #00ff9f;

  --amber:     #ffb300;

  --red:       #ff2d55;

  --text:      #d0eaf8;

  --text-sec:  #5a90c0;

  --text-dim:  #1e4a70;

  --mono:      'Courier New', 'Consolas', 'Source Han Mono', monospace;

  --sans:      'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif;

  --r:         6px;

  --r-lg:      10px;

}



*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }



body {

  background: var(--c-bg);

  color: var(--text);

  font-family: var(--sans);

  font-size: 13px;

  min-height: 100vh;

  overflow-x: hidden;

}



/* ── background canvas ── */

#bg-canvas {

  position: fixed; inset: 0;

  width: 100%; height: 100%;

  z-index: 0; pointer-events: none;

  opacity: 0.55;

}



/* ── scanline overlay ── */

.scan-overlay {

  position: fixed; inset: 0; z-index: 1; pointer-events: none;

  background: repeating-linear-gradient(

    0deg,

    transparent 0px, transparent 3px,

    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px

  );

  animation: scanMove 8s linear infinite;

}

@keyframes scanMove {

  from { background-position: 0 0; }

  to   { background-position: 0 200px; }

}



/* ── vignette ── */

.vignette {

  position: fixed; inset: 0; z-index: 1; pointer-events: none;

  background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 50%, rgba(0,0,0,0.7) 100%);

}



/* ── TOPBAR ── */

.topbar {

  position: sticky; top: 0; z-index: 200;

  display: flex; align-items: center; justify-content: space-between;

  height: 58px; padding: 0 24px;

  background: rgba(4,12,24,0.97);

  border-bottom: 1px solid var(--c-border);

  backdrop-filter: blur(16px);

}



.topbar-left  { display:flex; align-items:center; gap:14px; }

.topbar-center{ display:flex; align-items:center; gap:24px; }

.topbar-right { display:flex; align-items:center; gap:16px; }



.logo-emblem svg { display:block; filter: drop-shadow(0 0 8px rgba(0,245,255,0.6)); }



.logo-title {

  font-family: var(--mono);

  font-size: 15px; font-weight: bold;

  color: var(--cyan); letter-spacing: 3px;

  text-shadow: 0 0 20px rgba(0,245,255,0.5);

}

.logo-accent { color: var(--amber); }

.logo-sub {

  font-family: var(--mono);

  font-size: 9px; color: var(--text-dim); letter-spacing: 2px;

  margin-top: 1px;

}

.classified { color: var(--red); letter-spacing: 2px; animation: blink 2s step-end infinite; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }



.sys-indicators { display:flex; gap:20px; }

.sys-ind {

  display: flex; align-items: center; gap: 6px;

  font-family: var(--mono); font-size: 9px;

  color: var(--text-dim); letter-spacing: 1.5px;

}

.ind-dot {

  width: 7px; height: 7px; border-radius: 50%;

  background: var(--text-dim);

  box-shadow: none;

  transition: all 0.4s;

}

.ind-dot.on {

  background: var(--green);

  box-shadow: 0 0 8px var(--green);

  animation: pulse-dot 2s ease-in-out infinite;

}

@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.5} }



.conn-badge {

  display: flex; align-items: center; gap: 8px;

  padding: 5px 14px;

  border: 1px solid var(--c-border);

  border-radius: 20px;

  font-family: var(--mono); font-size: 10px;

  color: var(--red); letter-spacing: 2px;

  background: rgba(255,45,85,0.06);

  transition: all 0.4s;

}

.conn-badge.online {

  border-color: var(--green);

  color: var(--green);

  background: rgba(0,255,159,0.07);

}

.conn-pulse {

  width: 8px; height: 8px; border-radius: 50%;

  background: var(--red);

  box-shadow: 0 0 6px var(--red);

  transition: all 0.4s;

}

.conn-badge.online .conn-pulse {

  background: var(--green);

  box-shadow: 0 0 10px var(--green);

  animation: pulse-dot 1.5s ease-in-out infinite;

}



.time-block { text-align: right; }

.time-main {

  font-family: var(--mono); font-size: 18px;

  color: var(--cyan); letter-spacing: 3px;

  text-shadow: 0 0 14px rgba(0,245,255,0.45);

}

.time-date {

  font-family: var(--mono); font-size: 9px;

  color: var(--text-dim); letter-spacing: 2px;

}



/* ── MAIN GRID ── */

.main {

  position: relative; z-index: 10;

  display: grid;

  grid-template-columns: 280px 1fr 280px;

  gap: 12px;

  padding: 16px 18px;

  max-width: 1540px;

  margin: 0 auto;

}

.col { display:flex; flex-direction:column; gap:12px; }



/* ── PANEL ── */

.panel {

  background: var(--c-panel);

  border: 1px solid var(--c-border);

  border-radius: var(--r-lg);

  overflow: hidden;

  animation: fadeUp 0.5s ease both;

  position: relative;

}

.panel::before {

  content: '';

  position: absolute; top: 0; left: 0; right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.25), transparent);

}

@keyframes fadeUp {

  from { opacity:0; transform:translateY(10px); }

  to   { opacity:1; transform:none; }

}



.panel-header {

  display: flex; align-items: center; gap: 10px;

  padding: 8px 14px;

  background: rgba(0,0,0,0.25);

  border-bottom: 1px solid var(--c-border);

  position: relative;

}

.panel-bar {

  width: 3px; height: 14px;

  background: var(--cyan);

  border-radius: 2px;

  box-shadow: 0 0 10px var(--cyan);

  flex-shrink: 0;

}

.panel-title {

  font-family: var(--mono);

  font-size: 9px; letter-spacing: 2.5px;

  color: var(--text-sec);

  text-transform: uppercase;

  flex: 1;

}

.panel-corner-tr {

  width: 8px; height: 8px;

  border-top: 1px solid var(--cyan);

  border-right: 1px solid var(--cyan);

  opacity: 0.5;

}

.panel-body { padding: 14px; }



/* ── HUD CELLS ── */

.hud-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }

.hud-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }

.hud-cell {

  background: var(--c-inset);

  border: 1px solid var(--c-border);

  border-radius: var(--r);

  padding: 8px 10px;

  text-align: center;

}

.hud-axis {

  font-family: var(--mono);

  font-size: 8px; letter-spacing: 1.5px;

  color: var(--text-dim);

  text-transform: uppercase;

  margin-bottom: 4px;

}

.hud-val {

  font-family: var(--mono);

  font-size: 16px; font-weight: bold;

  color: var(--cyan);

  line-height: 1;

  text-shadow: 0 0 10px rgba(0,245,255,0.4);

}

.hud-unit {

  font-family: var(--mono);

  font-size: 8px; color: var(--text-dim);

  margin-top: 2px;

}

.hud-cell.hud-green .hud-val { color:var(--green); text-shadow:0 0 10px rgba(0,255,159,0.4); }

.hud-cell.hud-amber .hud-val { color:var(--amber); text-shadow:0 0 10px rgba(255,179,0,0.4); }

.hud-cell.hud-red   .hud-val { color:var(--red);   text-shadow:0 0 10px rgba(255,45,85,0.4); }

.hud-divider {

  height: 1px;

  background: var(--c-border);

  margin: 8px 0;

}



/* ── INPUTS ── */

.field-group { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }

.field-group:last-child { margin-bottom:0; }

.field-label {

  font-family: var(--mono);

  font-size: 8px; letter-spacing: 2px;

  color: var(--text-dim);

  text-transform: uppercase;

}

.input-wrap { position:relative; display:flex; align-items:center; }

.input-pfx {

  position: absolute; left: 10px;

  color: var(--cyan); font-size: 11px;

  pointer-events: none; opacity: 0.7;

}

input[type=text], input[type=number] {

  width: 100%;

  background: var(--c-inset);

  border: 1px solid var(--c-border);

  border-radius: var(--r);

  color: var(--text);

  font-family: var(--mono);

  font-size: 12px;

  padding: 7px 10px 7px 26px;

  outline: none;

  transition: border-color 0.2s, box-shadow 0.2s;

}

.input-wrap input { padding-left: 26px; }

.field-group > input { padding-left: 10px; }

input:focus {

  border-color: var(--cyan);

  box-shadow: 0 0 0 2px rgba(0,245,255,0.1);

}



/* ── BUTTONS ── */

.btn {

  border: none; border-radius: var(--r);

  font-family: var(--mono);

  font-size: 11px; letter-spacing: 1.5px;

  font-weight: bold; cursor: pointer;

  padding: 9px 14px;

  transition: all 0.18s;

  display: inline-flex; align-items: center;

  justify-content: center; gap: 6px;

}

.btn:active:not(:disabled) { transform: scale(0.95); }

.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-full { width: 100%; }

.btn-sm   { padding: 5px 10px; font-size: 10px; }



.btn-link {

  background: linear-gradient(135deg,#003d7a,#002555);

  color: var(--cyan); border: 1px solid rgba(0,245,255,0.3);

  box-shadow: 0 0 14px rgba(0,100,200,0.3);

}

.btn-link:hover:not(:disabled) {

  background: linear-gradient(135deg,#0050aa,#003570);

  box-shadow: 0 0 20px rgba(0,150,255,0.4);

}

.btn-kill {

  background: linear-gradient(135deg,#5a0010,#3a0008);

  color: var(--red); border: 1px solid rgba(255,45,85,0.3);

}

.btn-kill:hover:not(:disabled) {

  background: linear-gradient(135deg,#7a0018,#5a0010);

  box-shadow: 0 0 18px rgba(255,45,85,0.35);

}

.btn-arm {

  background: linear-gradient(135deg,#004030,#002820);

  color: var(--green); border: 1px solid rgba(0,255,159,0.25);

}

.btn-arm:hover:not(:disabled) { box-shadow: 0 0 18px rgba(0,255,159,0.35); }

.btn-disarm {

  background: linear-gradient(135deg,#5a0010,#3a0008);

  color: var(--red); border: 1px solid rgba(255,45,85,0.25);

}

.btn-disarm:hover:not(:disabled) { box-shadow: 0 0 18px rgba(255,45,85,0.35); }

.btn-takeoff {

  background: linear-gradient(135deg,#003d7a,#002555);

  color: var(--cyan); border: 1px solid rgba(0,245,255,0.2);

}

.btn-hover {

  background: linear-gradient(135deg,#4a3000,#2e1e00);

  color: var(--amber); border: 1px solid rgba(255,179,0,0.2);

}

.btn-land {

  background: linear-gradient(135deg,#5a0010,#3a0008);

  color: var(--red); border: 1px solid rgba(255,45,85,0.2);

}

.btn-nav {

  background: linear-gradient(135deg,#003d7a,#002555);

  color: var(--cyan); border: 1px solid rgba(0,245,255,0.3);

  box-shadow: 0 0 12px rgba(0,100,200,0.2);

}

.btn-nav:hover:not(:disabled) { box-shadow: 0 0 22px rgba(0,150,255,0.45); }

.btn-ghost {

  background: transparent;

  color: var(--text-sec);

  border: 1px solid var(--c-border);

}

.btn-ghost:hover:not(:disabled) {

  border-color: var(--cyan); color: var(--cyan);

}



.btn-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.ops-grid  { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }

.ops-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:8px; }

.xyz-row   { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:8px; }

.xyz-row .field-group { margin-bottom:0; }



/* ── TAGS ── */

.tag-row { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }

.tag {

  padding: 3px 10px; border-radius: 14px;

  font-family: var(--mono); font-size: 9px;

  letter-spacing: 1.5px; font-weight:bold;

}

.tag-ok  { background:rgba(0,255,159,0.1);  color:var(--green); border:1px solid rgba(0,255,159,0.3); }

.tag-off { background:rgba(255,45,85,0.1);  color:var(--red);   border:1px solid rgba(255,45,85,0.3); }

.tag-warn{ background:rgba(255,179,0,0.1);  color:var(--amber); border:1px solid rgba(255,179,0,0.3); }

.tag-dim { background:rgba(90,144,192,0.1); color:var(--text-sec); border:1px solid var(--c-border); }



/* ── DATA ROWS ── */

.data-row {

  display: flex; justify-content: space-between; align-items: center;

  padding: 6px 0;

  border-bottom: 1px solid var(--c-border);

}

.data-row:last-child { border-bottom: none; }

.data-lbl { font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--text-sec); }

.data-val { font-family:var(--mono); font-size:11px; color:var(--cyan); }



/* ── ADI ── */

.adi-body {

  display: flex; align-items: center; justify-content: center;

  gap: 16px; flex-wrap: wrap;

}

#drone-canvas {

  background: var(--c-inset);

  border: 1px solid var(--c-border);

  border-radius: var(--r);

  display: block;

}

.adi-readout { display:flex; flex-direction:column; gap:8px; }

.adi-row { display:flex; justify-content:space-between; gap:16px; align-items:center; }

.adi-lbl { font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--text-dim); }

.adi-num { font-family:var(--mono); font-size:14px; color:var(--cyan); font-weight:bold; }



/* ── LOG ── */

.log-console {

  background: var(--c-inset);

  border: 1px solid var(--c-border);

  border-radius: var(--r);

  padding: 8px 10px;

  height: 150px; overflow-y: auto;

  font-family: var(--mono); font-size: 10px; line-height: 1.85;

}

.log-console::-webkit-scrollbar { width:3px; }

.log-console::-webkit-scrollbar-thumb { background:var(--c-glow); border-radius:2px; }

.log-entry { display:flex; gap:8px; }

.log-time  { color:var(--text-dim); flex-shrink:0; }

.log-ok    { color:var(--green); }

.log-err   { color:var(--red); }

.log-info  { color:var(--cyan); }

.log-warn  { color:var(--amber); }

.status-bar {

  display:flex; align-items:center; gap:8px;

  padding: 6px 10px; margin-top:8px;

  background:var(--c-inset); border:1px solid var(--c-border);

  border-radius:var(--r);

  font-family:var(--mono); font-size:10px; color:var(--text-sec);

}

.status-dot { width:6px; height:6px; border-radius:50%; background:var(--text-dim); flex-shrink:0; transition:all 0.4s; }



/* ── CAMERA ── */

.camera-view {

  background: var(--c-inset);

  border: 1px solid var(--c-border);

  border-radius: var(--r);

  min-height: 175px;

  display: flex; align-items: center; justify-content: center;

  overflow: hidden; position: relative;

}

.camera-view img { width:100%; height:auto; display:block; }

.camera-ph {

  display:flex; flex-direction:column; align-items:center;

  justify-content:center; gap:8px; width:100%; height:175px;

  position:relative;

}

.cam-reticle {

  position:absolute; inset:0;

  display:flex; align-items:center; justify-content:center;

}

.cam-cross-h {

  position:absolute; left:10%; right:10%; height:1px;

  background:rgba(0,245,255,0.2);

}

.cam-cross-v {

  position:absolute; top:10%; bottom:10%; width:1px;

  background:rgba(0,245,255,0.2);

}

.cam-corner {

  position:absolute; width:14px; height:14px;

  border-color:rgba(0,245,255,0.5); border-style:solid;

}

.cam-corner.tl { top:10px; left:10px;  border-width:1px 0 0 1px; }

.cam-corner.tr { top:10px; right:10px; border-width:1px 1px 0 0; }

.cam-corner.bl { bottom:10px; left:10px;  border-width:0 0 1px 1px; }

.cam-corner.br { bottom:10px; right:10px; border-width:0 1px 1px 0; }

.cam-label {

  position:relative; z-index:1;

  font-family:var(--mono); font-size:11px;

  color:var(--text-dim); letter-spacing:3px;

}

.cam-sub {

  position:relative; z-index:1;

  font-size:10px; color:var(--text-dim);

}



/* ── SENSOR LABEL ── */

.sensor-section-lbl {

  font-family:var(--mono); font-size:8px;

  letter-spacing:2px; color:var(--text-dim);

  margin-bottom:6px; text-transform:uppercase;

}



/* ── MINI MAP ── */

.mini-map {

  background:var(--c-inset); border:1px solid var(--c-border);

  border-radius:var(--r); height:140px; overflow:hidden;

  display:flex; align-items:center; justify-content:center;

}

#map-canvas { display:block; }



/* ── JOYSTICK ── */

.joy-wrap { display:flex; align-items:center; justify-content:space-around; gap:10px; padding:6px 0; }

.joy-col  { display:flex; flex-direction:column; align-items:center; gap:6px; }

.joy-pad {

  width:110px; height:110px;

  background:var(--c-inset);

  border:1px solid var(--c-border);

  border-radius:50%;

  position:relative; cursor:crosshair; touch-action:none;

}

.joy-ring {

  position:absolute; inset:10px;

  border:1px dashed rgba(0,245,255,0.15);

  border-radius:50%;

  pointer-events:none;

}

.joy-ch-h {

  position:absolute; top:50%; left:10%; right:10%;

  height:1px; margin-top:-0.5px;

  background:rgba(0,245,255,0.1); pointer-events:none;

}

.joy-ch-v {

  position:absolute; left:50%; top:10%; bottom:10%;

  width:1px; margin-left:-0.5px;

  background:rgba(0,245,255,0.1); pointer-events:none;

}

.joy-thumb {

  width:26px; height:26px;

  background: radial-gradient(circle, var(--cyan) 0%, #0050b0 100%);

  border-radius:50%;

  position:absolute; top:50%; left:50%;

  transform:translate(-50%,-50%);

  box-shadow:0 0 12px rgba(0,245,255,0.5);

  pointer-events:none;

  transition:box-shadow 0.1s;

}

.joy-label { font-family:var(--mono); font-size:8px; letter-spacing:1.5px; color:var(--text-dim); text-align:center; }

.alt-label { font-family:var(--mono); font-size:8px; letter-spacing:2px; color:var(--text-dim); }

.alt-pct   { font-family:var(--mono); font-size:10px; color:var(--cyan); }

.alt-slider {

  -webkit-appearance: slider-vertical;

  appearance: auto;

  writing-mode: vertical-lr;

  direction: rtl;

  width:28px; height:110px;

  cursor:pointer;

}



/* ── BRIEFING ── */

.brief-list { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }

.brief-item { display:flex; align-items:flex-start; gap:10px; font-size:11px; color:var(--text-sec); }

.brief-num {

  font-family:var(--mono); font-size:9px;

  color:var(--cyan); background:rgba(0,245,255,0.08);

  border:1px solid rgba(0,245,255,0.2);

  border-radius:3px; padding:1px 5px;

  flex-shrink:0;

}

.brief-footer {

  font-family:var(--mono); font-size:8px;

  color:var(--text-dim); letter-spacing:1.5px;

  border-top:1px solid var(--c-border);

  padding-top:8px; margin-top:4px;

}



/* ── SCROLLBAR ── */

::-webkit-scrollbar { width:5px; height:5px; }

::-webkit-scrollbar-track { background:var(--c-inset); }

::-webkit-scrollbar-thumb { background:var(--c-glow); border-radius:3px; }



/* ── Mission Panel ── */

.mission-add-row { display:flex; gap:6px; align-items:flex-end; flex-wrap:wrap; margin-bottom:8px; }

.mission-add-row .field-group { margin-bottom:0; }

.wp-list { display:flex; flex-direction:column; gap:4px; max-height:140px; overflow-y:auto; margin-bottom:8px; }

.wp-item { display:flex; align-items:center; gap:6px; padding:5px 8px; background:var(--c-inset); border:1px solid var(--c-border); border-radius:var(--r); font-family:var(--mono); font-size:9px; }

.wp-item.active { border-color:var(--amber); background:rgba(255,179,0,0.08); }

.wp-badge { background:rgba(0,245,255,0.1); color:var(--cyan); border:1px solid rgba(0,245,255,0.3); border-radius:3px; padding:1px 5px; flex-shrink:0; }

.wp-coords { flex:1; color:var(--text-sec); }

.wp-remove { color:var(--red); cursor:pointer; opacity:0.6; font-size:11px; }

.wp-remove:hover { opacity:1; }

.mission-progress { margin:6px 0; }

.mp-label { font-family:var(--mono); font-size:9px; color:var(--amber); letter-spacing:1.5px; margin-bottom:4px; }

.progress-bar { height:4px; background:var(--c-border); border-radius:2px; overflow:hidden; }

.progress-fill { height:100%; border-radius:2px; transition:width 0.5s; }



/* ── Alert Panel ── */

.alert-indicators { display:flex; gap:12px; margin-bottom:8px; }

.alert-ind { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9px; color:var(--text-dim); letter-spacing:1px; }

.alert-led { width:10px; height:10px; border-radius:50%; background:var(--c-border); transition:all 0.3s; flex-shrink:0; }

.alert-led.active { background:var(--red); box-shadow:0 0 10px var(--red); animation:pulse-dot 0.8s ease-in-out infinite; }

.alert-led.warn { background:var(--amber); box-shadow:0 0 10px var(--amber); animation:pulse-dot 1s ease-in-out infinite; }

.alert-log { background:var(--c-inset); border:1px solid var(--c-border); border-radius:var(--r); padding:6px 8px; height:70px; overflow-y:auto; font-family:var(--mono); font-size:9px; line-height:1.8; }

.alert-critical { color:var(--red); }

.alert-warning { color:var(--amber); }

.log-stat { font-family:var(--mono); font-size:8px; color:var(--text-dim); letter-spacing:1px; margin-top:6px; }

.log-stat.recording { color:var(--red); animation:blink 1s step-end infinite; }


/* DEMO MODE button */
.btn-demo {
  background: linear-gradient(135deg,#4a2e00,#2e1a00);
  color: #ff9f00; border: 1px solid rgba(255,159,0,0.35);
  font-weight: 700; letter-spacing: 1.5px;
}
.btn-demo:hover:not(:disabled) {
  box-shadow: 0 0 18px rgba(255,159,0,0.45);
  background: linear-gradient(135deg,#5e3900,#3a2200);
}