:root{
  --bg:#0b0d10; --panel:#12151a; --line:#232932; --fg:#dfe4ea; --dim:#7f8894;
  --ok:#5fd39b; --warn:#e2b04a; --bad:#e2685c;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
#view{position:fixed;inset:0;display:block}

#topbar{position:fixed;top:0;left:0;right:0;height:28px;display:flex;align-items:center;gap:6px;
  padding:0 10px;background:rgba(11,13,16,.86);border-bottom:1px solid var(--line);z-index:5;
  white-space:nowrap;overflow:hidden}
#topbar b{color:#fff;letter-spacing:.04em}
.sep{color:var(--line)}
.dim{color:var(--dim)}
#phaseTag{color:var(--warn)}

#left{position:fixed;top:36px;left:8px;width:284px;max-height:calc(100vh - 68px);padding-bottom:6px;
  overflow-y:auto;z-index:4;display:flex;flex-direction:column;gap:8px}
#hud{position:fixed;top:36px;right:8px;width:280px;max-height:calc(100vh - 76px);
  overflow-y:auto;z-index:4;background:rgba(18,21,26,.9);border:1px solid var(--line);
  border-radius:6px;padding:8px}
.panel{background:rgba(18,21,26,.9);border:1px solid var(--line);border-radius:6px;padding:8px}
h4{margin:0 0 6px;font-size:11px;font-weight:600;color:var(--dim);text-transform:uppercase;
  letter-spacing:.06em}
.hint{margin:0 0 8px;color:var(--dim);font-size:11px;line-height:1.4}

.zrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 0;
  border-bottom:1px solid rgba(35,41,50,.5);white-space:nowrap}
.zrow span{overflow:hidden;text-overflow:ellipsis}
.zrow em{flex:none}
.zrow:last-child{border-bottom:0}
.zrow em{font-style:normal;color:var(--dim);font-size:10px;text-align:right}
.zrow.live span{color:var(--ok)}
.zrow.future span{color:var(--dim)}

#waypoints{display:flex;flex-direction:column;gap:3px}
.wp{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;
  white-space:nowrap;overflow:hidden;
  background:#181c22;border:1px solid var(--line);color:var(--fg);border-radius:4px;
  padding:4px 7px;cursor:pointer;font:inherit;text-align:left}
.wp:hover{border-color:#3a434e;background:#1d222a}
.wp b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.wp em{font-style:normal;color:var(--dim);font-size:10px;flex:none}
.wp.future{opacity:.5}

.dbg{display:flex;align-items:center;gap:6px;padding:1px 0;cursor:pointer}
.dbg.off{opacity:.4;cursor:default}
.dbg em{font-style:normal;margin-left:auto;color:var(--dim);font-size:10px}
.dbg input{accent-color:#6fa8d4}

.hud-sec{margin-bottom:9px}
.hud-sec h4{margin-bottom:3px}
.hud-row{display:flex;justify-content:space-between;gap:8px;line-height:1.55}
.hud-row .k{color:var(--dim)}
.hud-row .v{text-align:right;font-variant-numeric:tabular-nums}
.hud-row .v.ok{color:var(--ok)}
.hud-row .v.warn{color:var(--warn)}
.hud-row .v.bad{color:var(--bad)}
.hud-row .v.dim{color:var(--dim)}

button{background:#181c22;color:var(--fg);border:1px solid var(--line);border-radius:4px;
  padding:5px 12px;cursor:pointer;font:inherit}
button:hover{border-color:#3a434e}
.mono{margin-top:6px;color:var(--dim);font-size:11px;line-height:1.5}

#help{position:fixed;bottom:6px;left:8px;right:8px;color:var(--dim);z-index:4;font-size:11px}
#help b{color:var(--fg);font-weight:600}

#crash{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(11,13,16,.86);z-index:20}
#crash .crashbox{background:var(--panel);border:1px solid var(--bad);border-radius:8px;
  padding:20px 24px;max-width:460px;text-align:center}
#crash b{color:var(--bad);display:block;margin-bottom:8px}
#crash p{color:var(--dim);line-height:1.5}
#lockTag{color:var(--dim)}
#lockTag.on{color:var(--warn)}
#density{width:150px;vertical-align:middle;accent-color:#6fa8d4}
#applyDensity{margin-top:6px;display:block;width:100%}

.okc{color:var(--ok)}
.badc{color:var(--bad)}

.labrow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:3px 0}
.labrow select{background:#181c22;color:var(--fg);border:1px solid var(--line);border-radius:4px;
  padding:3px 6px;font:inherit;flex:1}
.labstats{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;line-height:1.6}

/* ---- aim point ---------------------------------------------------------- */
/* Centred on the exact pixel the shot ray passes through. Never interactive,
   never in the way: pointer-events off and mix-blend so it stays legible over
   both a bright sky and a dark specimen. */
#crosshair {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 40;
  display: flex; flex-direction: column; align-items: center;
}
#crosshair[hidden] { display: none; }
#crosshair svg { display: block; overflow: visible; }
#crosshair line, #crosshair circle {
  stroke: #eef3f8; stroke-width: 1.4; fill: none;
  paint-order: stroke;
  /* a dark halo so the marks read against a light sky too */
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .95));
}
#crosshair circle { fill: #eef3f8; stroke: none; }
/* over something that can be shot */
#crosshair.hot line, #crosshair.hot circle { stroke: #ffb454; }
#crosshair.hot circle { fill: #ffb454; }
#crosshairTag {
  margin-top: 22px; font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #cfd8e3; text-shadow: 0 0 3px #000, 0 0 3px #000;
  white-space: nowrap; text-align: center; opacity: .9;
}