* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1b2127;
}
#layout { display: grid; grid-template-columns: 340px 1fr; height: 100%; }
#map { height: 100%; }

#panel {
  overflow-y: auto;
  padding: 12px 14px 24px;
  background: #f5f7f9;
  border-right: 1px solid #d4dae0;
}
h1 { font-size: 18px; margin: 0 0 4px; }
h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: #5a6673; margin: 16px 0 6px;
}
section { border-top: 1px solid #e2e7eb; }
section:first-of-type { border-top: none; }

.status { margin: 0 0 8px; color: #5a6673; min-height: 1.4em; }
.status.error { color: #a01b1b; }

.checks { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.checks label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.scroll { max-height: 210px; overflow-y: auto; border: 1px solid #dde2e7; background: #fff; border-radius: 4px; }
.scroll:empty { display: none; }

.item { display: block; padding: 5px 7px; border-bottom: 1px solid #eef1f4; cursor: pointer; }
.item.group { font-weight: 600; background: #f4f8fc; }
.item:last-child { border-bottom: none; }
.item:hover { background: #eef4fa; }
.item .meta { color: #6b7681; font-size: 12px; }
.item input { margin-right: 6px; }

.row { display: flex; gap: 6px; margin-bottom: 6px; }
.row input[type=search] { flex: 1; min-width: 0; }
input, button, select { font: inherit; }
input[type=search] { padding: 4px 6px; border: 1px solid #c3ccd4; border-radius: 4px; }
button { padding: 4px 9px; border: 1px solid #c3ccd4; background: #fff; border-radius: 4px; cursor: pointer; }
button:hover { background: #eef4fa; }
button.mini { font-size: 11px; padding: 1px 6px; margin-left: 4px; text-transform: none; letter-spacing: 0; }
button.primary { width: 100%; margin-top: 16px; padding: 8px; background: #2f6db0; border-color: #2f6db0; color: #fff; font-weight: 600; }
button.primary:hover { background: #27598f; }

.focus { margin: 6px 0; padding: 5px 7px; background: #e6f0fa; border: 1px solid #b8d0e8; border-radius: 4px; }
.hidden { display: none; }
.hint { font-size: 12px; color: #6b7681; margin: 8px 0 0; }

.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5a6673; margin-top: 6px; }
#legendBar { flex: 1; height: 12px; border-radius: 2px; border: 1px solid #c3ccd4; }

.popup dt { font-size: 11px; text-transform: uppercase; color: #6b7681; }
.popup dd { margin: 0 0 5px; }
.popup dl { margin: 0; }

@media (max-width: 720px) {
  #layout { grid-template-columns: 1fr; grid-template-rows: 46vh 54vh; }
  #panel { border-right: none; border-bottom: 1px solid #d4dae0; }
}