html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, sans-serif; }
#map { position: absolute; top: 0; right: 0; bottom: 0; left: 340px; }
#panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: 340px; z-index: 1000;
  background: #101418; color: #e8eaed; padding: 20px; box-sizing: border-box;
  overflow-y: auto;
}
#panel h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: 0.5px; color: #7ec8ff; }
#panel .tag { margin: 0 0 16px; font-size: 12px; color: #9aa0a6; }
.row { display: flex; gap: 8px; }
#search {
  flex: 1; padding: 9px 10px; border-radius: 8px; border: 1px solid #2b3138;
  background: #191e24; color: #e8eaed; font-size: 14px;
}
#profile, #region { background: #191e24; color: #e8eaed; border: 1px solid #2b3138; border-radius: 8px; padding: 8px 6px; }
#apikey {
  padding: 8px 10px; border-radius: 8px; border: 1px solid #2b3138;
  background: #191e24; color: #e8eaed; font-size: 12px; min-width: 0;
}
#results { list-style: none; margin: 12px 0 0; padding: 0; }
#results li {
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px;
  border: 1px solid transparent;
}
#results li:hover { background: #1b222a; border-color: #2b3138; }
#results .name { display: block; font-weight: 600; }
#results .meta { display: block; color: #9aa0a6; font-size: 11px; margin-top: 2px; }
#route-info {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #16261c;
  border: 1px solid #24512f; font-size: 13px;
}
.hidden { display: none; }
.hint { color: #80868b; font-size: 11px; margin-top: 16px; line-height: 1.6; }
.hint code { color: #7ec8ff; word-break: break-all; }
.hint a { color: #7ec8ff; }
.leaflet-container { background: #101418; }