* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #1d3557;
}
header {
  display: flex; align-items: center; justify-content: space-between;
  background: #1d3557; color: #f1faee;
  padding: .6rem 1rem; height: 52px;
}
header h1 { font-size: 1.05rem; margin: 0; font-weight: 600; letter-spacing: .02em; }
#status { font-size: .85rem; opacity: .85; }
#status.ok { color: #a8dadc; }
#status.error { color: #f4a261; }

main {
  display: grid;
  grid-template-columns: 1fr 300px;
  height: calc(100vh - 52px);
}
#map { height: 100%; width: 100%; }

#panel {
  border-left: 1px solid #ddd;
  padding: 1rem 1rem 2rem;
  overflow-y: auto;
  background: #f8f9fa;
}
#panel h2 {
  margin: 0 0 .6rem;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #457b9d;
}
#devices { list-style: none; padding: 0; margin: 0; }
#devices li {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .2rem;
  border-bottom: 1px solid #e8eaed;
  cursor: pointer;
}
#devices li:hover { background: #eef2f6; }
#devices li.active { background: #e0ecf4; }
#devices .dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0; box-shadow: 0 0 0 2px #fff;
}
#devices .info { flex: 1; min-width: 0; }
#devices .name { font-weight: 600; font-size: .92rem; }
#devices .meta {
  font-size: .78rem; color: #6c757d; margin-top: .15rem;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}

#empty-hint {
  color: #6c757d; font-size: .85rem; line-height: 1.45;
  padding: 1rem .2rem 0;
}

.leaflet-tooltip.tracker-label {
  font-weight: 600; font-size: .78rem;
  background: #fff; color: #1d3557;
  border: 1px solid #1d3557; box-shadow: none; padding: 2px 6px;
}

@media (max-width: 720px) {
  main { grid-template-columns: 1fr; grid-template-rows: 65vh 1fr; }
  #panel { border-left: none; border-top: 1px solid #ddd; }
}