html, body { margin: 0; height: 100%; background: #0b0b0f; }
#map { position: absolute; inset: 0; }
#panel {
  position: absolute; z-index: 1000; top: 10px; right: 10px;
  background: rgba(20,20,28,.85); color: #e6e6ea;
  font: 13px/1.4 system-ui, sans-serif; padding: 8px 10px; border-radius: 8px;
}
#panel .windows { margin-left: 8px; }
#conn { margin-right: 8px; font-weight: 600; }
#conn.conn-live { color: #4caf50; }
#conn.conn-connecting { color: #c0a040; }
#conn.conn-offline { color: #ff5a5a; }
#panel button {
  background: #2a2a3a; color: #cfcfe0; border: 1px solid #444;
  border-radius: 5px; padding: 2px 7px; cursor: pointer;
}
#panel button.active { background: #4060c0; color: #fff; }
#ungeocoded { color: #c08040; margin-left: 6px; }
.leaflet-popup-content { font: 13px/1.4 system-ui, sans-serif; }
.leaflet-popup-content .ctx { color: #555; display: block; margin-top: 4px; }