:root{--c:#3ff5ff;--c2:#ffb000;--bg:rgba(4,12,18,.72);--line:rgba(63,245,255,.35);--txt:#cfefff;font-family:"JetBrains Mono",ui-monospace,monospace}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--txt);font-family:"JetBrains Mono",ui-monospace,monospace}
#viewDiv{position:absolute;inset:0}
.mode-nvg #viewDiv canvas{filter:url(#f-nvg) contrast(1.15) brightness(1.15)}
.mode-flir #viewDiv canvas{filter:url(#f-flir) contrast(1.35)}
#fx{position:absolute;inset:0;pointer-events:none;z-index:2}
#fx .vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65) 100%)}
#fx .scan{position:absolute;inset:0;opacity:.0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.mode-nvg #fx .scan,.mode-flir #fx .scan{opacity:1}
#fx .noise{position:absolute;inset:-50%;opacity:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");animation:grain 1s steps(6) infinite}
.mode-nvg #fx .noise{opacity:.18}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(2%,4%)}}
#fx .reticle{position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px;border:1px solid var(--line);border-radius:50%;opacity:.0;transition:opacity .4s}
#fx .reticle:before,#fx .reticle:after{content:"";position:absolute;background:var(--line)}
#fx .reticle:before{left:50%;top:-24px;bottom:-24px;width:1px}
#fx .reticle:after{top:50%;left:-24px;right:-24px;height:1px}
.mode-nvg #fx .reticle,.mode-flir #fx .reticle{opacity:.8}
.panel{position:absolute;z-index:5;background:var(--bg);border:1px solid var(--line);backdrop-filter:blur(6px);box-shadow:0 0 18px rgba(63,245,255,.12),inset 0 0 12px rgba(63,245,255,.06)}
#hud-top{top:10px;left:10px;right:10px;display:flex;align-items:center;gap:18px;padding:8px 12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-size:15px;letter-spacing:.12em;color:var(--c);text-shadow:0 0 8px rgba(63,245,255,.7)}
.brand .sub{font-size:11px;color:#8fb9c6;letter-spacing:.06em}
.readouts{display:flex;gap:18px;margin-left:auto;font-size:13px}
.readouts label{display:block;font-size:9px;color:#6f9aa8;letter-spacing:.15em}
.readouts span{color:#fff;font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#555;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.dot.live,.dot.ok{background:#22ff88;box-shadow:0 0 8px #22ff88}
.dot.warn{background:#ffb000;box-shadow:0 0 8px #ffb000}
.dot.err{background:#ff3355;box-shadow:0 0 8px #ff3355}
.dot.load{background:#3ff5ff;animation:blink 1s infinite}
.dot.off{background:#333}
@keyframes blink{50%{opacity:.25}}
#side{top:72px;right:10px;width:300px;max-height:calc(100% - 140px);display:flex;flex-direction:column;font-size:12px}
.side-head{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);color:var(--c);letter-spacing:.15em;font-size:11px}
.side-body{overflow:auto;padding:6px 10px 10px}
#side.collapsed .side-body{display:none}
.lrow{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed rgba(63,245,255,.12)}
.lrow .nm{line-height:1.2}.lrow .nm small{display:block;color:#6f9aa8;font-size:10px}
.section{margin:10px 0 4px;color:var(--c);letter-spacing:.15em;font-size:10px}
.wx{font-size:12px;line-height:1.5}.wx b{color:#fff;font-size:18px}
.alerts .al{margin-top:4px;padding:4px 6px;border-left:3px solid #ff3355;background:rgba(255,51,85,.12)}
.alerts .none{color:#6f9aa8}
.small{font-size:11px;color:#9cc}
.row-btns{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
#ticker{left:10px;right:10px;bottom:28px;height:30px;display:flex;align-items:center;overflow:hidden;font-size:12.5px}
.tk-label{flex:none;padding:0 10px;height:100%;display:flex;align-items:center;background:rgba(255,0,170,.25);color:#ff8ce0;letter-spacing:.2em;border-right:1px solid var(--line)}
.tk-wrap{flex:1;overflow:hidden;white-space:nowrap;position:relative;height:100%}
.tk-track{display:inline-flex;align-items:center;height:100%;gap:40px;padding-left:100%;animation:tick linear infinite;animation-duration:var(--dur,240s)}
.tk-wrap:hover .tk-track{animation-play-state:paused}
.tk-item{cursor:pointer;color:#e6f7ff;text-decoration:none}
.tk-item .src{color:#ff8ce0;margin-right:6px}.tk-item.roswell{color:#ffd34d;text-shadow:0 0 8px rgba(255,200,0,.6)}
.tk-item .pin{color:var(--c)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}
#attr{left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,92vw);max-height:80vh;display:flex;flex-direction:column;z-index:20}
#attr.hidden{display:none}
.attr-body{overflow:auto;padding:4px 14px 12px;font-size:12px;line-height:1.5}.attr-body b{color:var(--c)}
#boot{position:absolute;inset:0;z-index:30;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity 1.2s}
#boot.gone{opacity:0;pointer-events:none}
.boot-title{color:var(--c);letter-spacing:.3em;font-size:20px;text-shadow:0 0 12px var(--c);margin-bottom:12px}
#bootlog{font-size:12px;color:#7fd;white-space:pre;min-height:120px}
.esri-popup__main-container{border:1px solid var(--line)!important;font-family:"JetBrains Mono",monospace}
.pop img{max-width:100%;border:1px solid var(--line)}
.pop .stale{color:#ffb000}.pop .fresh{color:#22ff88}
.pop table{border-collapse:collapse;width:100%}.pop td{padding:2px 4px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}.pop td:first-child{color:#8fb9c6;white-space:nowrap}
.esri-ui-corner .esri-component.esri-attribution{font-size:10px}
@media (max-width:760px){
  #hud-top{gap:8px;padding:6px 8px}.brand .sub{display:none}.hide-sm{display:none}
  #side{top:auto;bottom:66px;left:10px;right:10px;width:auto;max-height:45%}
  #ticker{bottom:24px}
}