:root {
  --bg: #05070d;
  --panel: rgba(5, 11, 20, .72);
  --panel2: rgba(12, 24, 38, .82);
  --cyan: #5df2ff;
  --green: #68ff9b;
  --amber: #ffd166;
  --red: #ff496d;
  --muted: #9cb5ca;
  --line: rgba(130, 220, 255, .22);
}
* { box-sizing: border-box; }
html, body, #globe { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Arial, sans-serif; color: #eaf8ff; }
button, input { font: inherit; }
.cesium-viewer-bottom, .cesium-viewer-toolbar, .cesium-widget-credits { display: none !important; }

.hud {
  position: fixed;
  z-index: 10;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: 0 18px 70px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
}
.topbar {
  left: 18px; right: 18px; top: 16px; height: 76px; border-radius: 18px;
  display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
}
.eyebrow { color: var(--cyan); font-size: 11px; letter-spacing: .18em; font-weight: 800; }
h1 { margin: 2px 0 0; font-size: 25px; letter-spacing: -.03em; }
h2 { margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.clock { display: flex; align-items: center; gap: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 20px var(--green); animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { transform: scale(.65); opacity: .45; } }

.panel { top: 110px; width: 300px; max-height: calc(100vh - 170px); overflow: auto; border-radius: 18px; padding: 14px; }
.panel.left { left: 18px; }
.panel.right { right: 18px; }
section + section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
label { display: flex; align-items: center; gap: 9px; padding: 8px 4px; color: #dff6ff; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--cyan); }
.locked { margin-top: 8px; padding: 10px; border-radius: 12px; color: rgba(255,209,102,.9); background: rgba(255,209,102,.08); border: 1px solid rgba(255,209,102,.22); font-size: 12px; line-height: 1.35; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
button {
  border: 1px solid rgba(93,242,255,.25);
  color: #dcfbff;
  background: rgba(15, 38, 55, .74);
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: .16s ease;
}
button:hover, button.active { border-color: var(--cyan); background: rgba(21, 85, 105, .72); box-shadow: 0 0 24px rgba(93,242,255,.12); }
.status { color: var(--muted); line-height: 1.45; font-size: 13px; }
.mini { color: var(--muted); font-size: 12px; margin: -5px 0 8px; }
.contacts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.contacts li {
  border: 1px solid rgba(93,242,255,.16);
  background: rgba(6,18,30,.6);
  border-radius: 12px;
  padding: 9px 10px;
  cursor: pointer;
}
.contacts li:hover { border-color: rgba(93,242,255,.55); }
.contacts b { display: block; font-size: 13px; color: #fff; }
.contacts span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.footer {
  left: 18px; right: 18px; bottom: 14px; border-radius: 14px; padding: 9px 13px;
  display: flex; flex-wrap: wrap; gap: 14px; color: rgba(220,245,255,.72); font-size: 12px;
}
.loading {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; gap: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(18,80,110,.35), rgba(3,7,12,.96) 55%);
  color: var(--cyan); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.loading.done { pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(93,242,255,.18); border-top-color: var(--cyan); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.scanlines {
  pointer-events: none; position: fixed; inset: 0; z-index: 3; opacity: .16;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 5px);
  mix-blend-mode: screen;
}
.reticle {
  pointer-events: none; position: fixed; left: 50%; top: 50%; z-index: 4; width: 160px; height: 160px;
  transform: translate(-50%,-50%); border: 1px solid rgba(93,242,255,.28); border-radius: 50%;
}
.reticle:before, .reticle:after { content: ""; position: absolute; background: rgba(93,242,255,.42); }
.reticle:before { left: 50%; top: -28px; bottom: -28px; width: 1px; }
.reticle:after { top: 50%; left: -28px; right: -28px; height: 1px; }
body.optic-night #globe { filter: hue-rotate(82deg) saturate(1.7) brightness(.72) contrast(1.18); }
body.optic-thermal #globe { filter: hue-rotate(190deg) saturate(2.2) contrast(1.35) brightness(.9); }
body.optic-noir #globe { filter: grayscale(1) contrast(1.42) brightness(.7); }
@media (max-width: 900px) {
  .panel.right { display: none; }
  .panel.left { width: calc(100vw - 36px); top: auto; bottom: 58px; max-height: 45vh; }
  .topbar { height: auto; align-items: flex-start; }
  h1 { font-size: 18px; }
  .footer { display: none; }
}