html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #000; }

#title { position: absolute; top: 14px; left: 16px; z-index: 5; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.8); pointer-events: none; }
#title .big { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
#title .sub { font-size: 12px; color: #cdd5e1; margin-top: 2px; max-width: 380px; }

#hud { position: absolute; top: 14px; right: 16px; z-index: 5; display: flex; gap: 8px; }
.panel { background: rgba(12,15,20,.82); backdrop-filter: blur(8px);
  border: 1px solid #2a313d; border-radius: 10px; padding: 10px 12px; width: 120px; color: #e7ecf3; }
.phead { font-size: 12px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.panel.trained .phead { color: #34d399; }
.panel.untrained .phead { color: #f59e0b; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.full { background: #34d399; }
.dot.shadow { background: #f59e0b; opacity: .5; }
.row { display: flex; justify-content: space-between; font-size: 12px; color: #8a94a6; padding: 1px 0; }
.row b { color: #e7ecf3; font-variant-numeric: tabular-nums; }
.row.hi b { font-size: 16px; }
.panel.trained .row.hi b { color: #34d399; }
.panel.untrained .row.hi b { color: #f59e0b; }

/* ===================== telemetry dashboard ===================== */
#dash { position: absolute; top: 14px; right: 16px; z-index: 6; width: 300px;
  max-height: calc(100% - 28px); overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #e7ecf3; display: flex; flex-direction: column; gap: 9px; }
#dash::-webkit-scrollbar { width: 7px; } #dash::-webkit-scrollbar-thumb { background: #2a313d; border-radius: 9px; }
#dash .d-h { display: flex; align-items: center; justify-content: space-between;
  background: rgba(12,15,20,.82); backdrop-filter: blur(8px); border: 1px solid #2a313d;
  border-radius: 10px; padding: 9px 12px; }
#dash .d-t { font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
#dash .d-live { font-size: 10px; color: #34d399; display: flex; align-items: center; gap: 6px; }
#dash .d-live i { width: 7px; height: 7px; border-radius: 9px; background: #34d399; box-shadow: 0 0 8px #34d399; animation: dpulse 1.4s infinite; }
@keyframes dpulse { 50% { opacity: .35; } }
#dash .d-k { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#dash .kpi { background: rgba(12,15,20,.82); backdrop-filter: blur(8px); border: 1px solid #2a313d;
  border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; }
#dash .kpi .l { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #8a94a6; }
#dash .kpi b { font: 700 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
#dash .kpi b.ok { color: #34d399; } #dash .kpi b.bad { color: #ef4444; }
#dash .card { background: rgba(12,15,20,.82); backdrop-filter: blur(8px); border: 1px solid #2a313d;
  border-radius: 10px; padding: 9px 12px; }
#dash .ct { display: flex; justify-content: space-between; align-items: center; font-size: 10px;
  text-transform: uppercase; letter-spacing: .6px; color: #8a94a6; margin-bottom: 7px; }
#dash .lg { text-transform: none; letter-spacing: 0; font-size: 9.5px; color: #8a94a6; }
#dash .lg i { display: inline-block; width: 9px; height: 3px; border-radius: 9px; margin: 0 3px 0 6px; vertical-align: middle; }
#dash canvas { width: 100%; display: block; }
#dash .fb { display: grid; grid-template-columns: 50px 1fr 30px; align-items: center; gap: 8px; font-size: 11px; color: #8a94a6; margin: 5px 0; }
#dash .fb .bar { height: 8px; background: #0a0d12; border-radius: 9px; overflow: hidden; }
#dash .fb .bar i { display: block; height: 100%; width: 0%; border-radius: 9px; transition: width .12s linear; }
#dash .fb b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #e7ecf3; text-align: right; font-variant-numeric: tabular-nums; }
#dash .d-foot { font-size: 11px; color: #8a94a6; text-align: center; padding: 2px; }
#dash .d-foot b { color: #e7ecf3; } #dash .d-foot b.ok { color: #34d399; }

#err { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: #0b0e13; color: #e7ecf3; text-align: center; padding: 40px; }
/* the `hidden` attribute must win over the display above, or this opaque panel
   covers the whole viewer even when empty (a CSS display value overrides [hidden]) */
#err[hidden] { display: none; }
#err code { background: #1b2230; padding: 2px 6px; border-radius: 5px; }
#err a { color: #34d399; }