/* EAGLE EYE — ops-cockpit HUD. Dark, phosphor-green accents, honest labels. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #04070c; overflow: hidden;
  font-family: 'Fira Code', ui-monospace, Menlo, monospace; color: #cfe6d8; }
#globe { position: absolute; inset: 0; }
.cesium-viewer-bottom, .cesium-viewer-toolbar, .cesium-viewer-animationContainer,
.cesium-viewer-timelineContainer, .cesium-viewer-fullscreenContainer { display: none !important; }

#topbar { position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 10;
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: linear-gradient(#0a1410ee, #0a141066); border-bottom: 1px solid #1f4d33;
  backdrop-filter: blur(6px); }
.brand { font-weight: 700; letter-spacing: .12em; font-size: 14px; color: #4dffa1;
  text-shadow: 0 0 12px #1aff8a55; }
.brand .sub { font-size: 9px; color: #6a8f7c; letter-spacing: .2em; }
#feedlights { display: flex; gap: 8px; font-size: 9px; letter-spacing: .08em; }
#feedlights .lt { padding: 2px 8px; border: 1px solid #234; border-radius: 10px; color: #789; }
#feedlights .lt.ok { border-color: #1aff8a66; color: #4dffa1; }
#feedlights .lt.bad { border-color: #ff335566; color: #ff7788; }
.clockbox { margin-left: auto; font-size: 12px; color: #9fd8b6; letter-spacing: .1em; }

#left { position: absolute; top: 52px; left: 12px; width: 300px; z-index: 10;
  display: flex; flex-direction: column; gap: 10px; }
.panel { background: #08120dcc; border: 1px solid #1f4d33; border-radius: 6px;
  padding: 10px; backdrop-filter: blur(6px); }
.ptitle { font-size: 10px; letter-spacing: .25em; color: #4dffa1; margin-bottom: 8px; }
.panel label { display: block; font-size: 11px; padding: 3px 0; cursor: pointer; }
.panel .hint { font-size: 8px; color: #5a7f6c; margin-top: 6px; }
.ct { color: #9fd8b6; float: right; }
#cmd { width: 100%; background: #04140c; color: #d6ffe9; border: 1px solid #1f4d33;
  border-radius: 4px; padding: 7px 9px; font: inherit; font-size: 11px; outline: none; }
#cmd:focus { border-color: #1aff8a; box-shadow: 0 0 10px #1aff8a33; }
.aisay { font-size: 10px; color: #9fd8b6; margin-top: 8px; line-height: 1.5;
  border-left: 2px solid #1aff8a55; padding-left: 8px; min-height: 26px; }
#sensors { display: flex; gap: 4px; }
#sensors button, .wide { background: #04140c; color: #7ba38d; border: 1px solid #1f4d33;
  border-radius: 4px; padding: 5px 8px; font: inherit; font-size: 10px; cursor: pointer;
  letter-spacing: .08em; }
#sensors button.on { color: #04140c; background: #4dffa1; border-color: #4dffa1; font-weight: 700; }
.wide { display: block; width: 100%; margin-top: 6px; }
.wide:hover, #sensors button:hover { border-color: #4dffa1; color: #4dffa1; }
#sensors button.on:hover { color: #04140c; }

#card { position: absolute; right: 12px; top: 52px; width: 270px; z-index: 10;
  background: #08120dee; border: 1px solid #ffb02066; border-radius: 6px; padding: 10px; }
#card .ptitle { color: #ffb020; }
#card pre { font-size: 10px; color: #ffe9c4; white-space: pre-wrap; margin: 0 0 6px; }
#card.hidden { display: none; }

#hudline { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 6px 14px;
  font-size: 10px; letter-spacing: .06em; color: #9fd8b6;
  background: linear-gradient(#0a141066, #0a1410ee); border-top: 1px solid #1f4d33; }

/* sensor modes — cheap but convincing, exactly like the original's trick */
body.sensor-night #globe { filter: brightness(1.5) sepia(1) hue-rotate(70deg) saturate(3) contrast(1.1); }
body.sensor-thermal #globe { filter: grayscale(1) invert(1) sepia(1) hue-rotate(-40deg) saturate(4) contrast(1.3); }
body.sensor-noir #globe { filter: grayscale(1) contrast(1.35) brightness(.9); }
body.sensor-crt #globe { filter: brightness(1.2) contrast(1.3) saturate(1.6); }
body.sensor-crt::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, #00000033 2px 4px); }