* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.hidden { display: none !important; }

#map {
  position: absolute;
  inset: 48px 0 0 0;
}

#topbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: #1d2b36;
  color: #fff;
  z-index: 10;
}

#topbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

#topbar select {
  font-size: 14px;
  padding: 4px 6px;
}

#user-name { margin-left: auto; font-size: 14px; }

#topbar button {
  font-size: 14px;
  padding: 6px 12px;
  cursor: pointer;
}

#login-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d2b36;
  z-index: 20;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(320px, 90vw);
  padding: 32px;
  background: #fff;
  border-radius: 8px;
}

#login-form h1 { margin: 0 0 8px; font-size: 24px; }

#login-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

#login-form input { font-size: 16px; padding: 8px; }

#login-form button {
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
}

.error { color: #c62828; font-size: 14px; margin: 0; }

.popup { font-size: 13px; max-width: 320px; }
.popup img { max-width: 100%; margin-top: 8px; border-radius: 4px; }