html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
#hud {
  position: absolute; top: 12px; left: 12px; z-index: 10;
  font: 13px/1.45 -apple-system, system-ui, sans-serif; color: #e6edf6;
  background: rgba(10,13,20,.72); border: 1px solid #283344; border-radius: 10px;
  padding: 12px 14px; min-width: 200px;
}
#hud h1 { font-size: 14px; margin: 0 0 8px; }
#hud .row { display: flex; justify-content: space-between; gap: 16px; }
#hud .k { color: #8b9bb0; }
#hud .ok { color: #34d399; } #hud .bad { color: #f87171; }
#hud select {
  background: rgba(10,13,20,.85); color: #e6edf6;
  border: 1px solid #283344; border-radius: 4px;
  font: 12px/1.4 -apple-system, system-ui, sans-serif;
  padding: 1px 4px; cursor: pointer;
}

/* ===================== telemetry dashboard ===================== */
#dash {
  position: absolute; top: 12px; right: 12px; bottom: 12px; z-index: 10;
  width: 320px; overflow-y: auto;
  font: 13px/1.45 -apple-system, system-ui, sans-serif; color: #e6edf6;
  display: flex; flex-direction: column; gap: 10px;
}
#dash::-webkit-scrollbar { width: 7px; }
#dash::-webkit-scrollbar-thumb { background: #283344; border-radius: 9px; }

.d-hd { display: flex; align-items: center; justify-content: space-between;
  background: rgba(10,13,20,.78); border: 1px solid #283344; border-radius: 10px; padding: 9px 13px; backdrop-filter: blur(8px); }
.d-title { font-size: 14px; font-weight: 700; }
.d-live { font-size: 10px; color: #34d399; display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .6px; }
.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; } }

.d-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-kpi { background: rgba(10,13,20,.78); border: 1px solid #283344; border-radius: 10px; padding: 9px 11px; backdrop-filter: blur(8px); }
.d-kpi .k { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #8b9bb0; }
.d-kpi .v { font: 700 21px/1 ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 4px; font-variant-numeric: tabular-nums; }
.d-kpi .v.ok { color: #34d399; }

.d-card { background: rgba(10,13,20,.78); border: 1px solid #283344; border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(8px); }
.d-ct { display: flex; justify-content: space-between; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #8b9bb0; margin-bottom: 7px; }
.d-lg { display: flex; gap: 9px; font-size: 9.5px; text-transform: none; letter-spacing: 0; color: #8b9bb0; }
.d-lg i { display: inline-block; width: 9px; height: 3px; border-radius: 9px; margin-right: 3px; vertical-align: middle; }
.d-chart { width: 100%; display: block; }

.d-fleet { display: flex; flex-direction: column; gap: 8px; }
.d-fr { display: grid; grid-template-columns: 50px 1fr 28px; align-items: center; gap: 8px; font-size: 11px; color: #8b9bb0; }
.d-fr .d-bar { height: 8px; background: #0a0d14; border-radius: 9px; overflow: hidden; }
.d-fr .d-bar i { display: block; height: 100%; border-radius: 9px; width: 0%; transition: width .12s linear; }
.d-fr b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #e6edf6; text-align: right; font-variant-numeric: tabular-nums; }

.d-agg .r { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #8b9bb0; padding: 5px 0; border-bottom: 1px solid rgba(40,51,68,.5); }
.d-agg .r:last-child { border-bottom: none; }
.d-agg .r b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #e6edf6; font-variant-numeric: tabular-nums; }
.d-agg .r b.ok { color: #34d399; }