* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, sans-serif; color: #11151c; }
header { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: #11151c; color: #fff; }
header h1 { font-size: 1rem; margin: 0; }
#status { color: #9fb3c8; font-size: .85rem; margin-left: auto; }
#app { display: grid; grid-template-rows: 38vh 1fr; height: calc(100vh - 48px); }
#map { height: 100%; }
#side { overflow: auto; border-top: 1px solid #ddd; padding: .5rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid #eee; font-size: .82rem; }
#fleet tbody tr { cursor: pointer; }
#fleet tbody tr:hover { background: #f2f6fb; }
.cmp .d-delta { background: #fdecea; }
.cmp .d-tel { background: #fff6e5; }
.cmp .d-sf { background: #eef4ff; }
.cmp .d-none { color: #98a2b3; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .8em; }
@media (prefers-color-scheme: dark) {
  body { color: #e6edf3; background: #0d1117; }
  #side { border-color: #30363d; } #map { border-color: #30363d; } th, td { border-color: #21262d; }
  #fleet tbody tr:hover { background: #161b22; }
}