body { margin: 0; padding: 0; }

:root { color-scheme: light dark; }

#map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#panel {
  position: absolute;
  top: 10px;
  left: 50px;
  z-index: 1000;
  background: light-dark(#fff, #2a2a2a);
  color: light-dark(#000, #e0e0e0);
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font: 13px sans-serif;
}
#panel a { color: light-dark(#06c, #6cb4ff); text-decoration: none; }

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: light-dark(#fff, #2a2a2a);
  color: light-dark(#000, #e0e0e0);
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font: 14px sans-serif;
  text-align: center;
  min-width: 200px;
}
#loading-text {
  margin-bottom: 10px;
}
#progress-bar {
  height: 6px;
  background: light-dark(#e0e0e0, #444);
  border-radius: 3px;
  overflow: hidden;
}
#progress-fill {
  height: 100%;
  width: 0%;
  background: #3498db;
  border-radius: 3px;
  transition: width 0.2s;
}