html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
a { color: inherit; }

.panel {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  padding: 12px 12px;
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.14);
  min-width: 320px;
  max-width: 380px;
}

.muted { opacity: .7; font-size: 12px; }
.row { display:flex; align-items:center; gap:8px; margin: 6px 0; }
.dot { width: 10px; height: 10px; border-radius: 999px; display:inline-block; border:1px solid rgba(0,0,0,.15); }
.btn { cursor:pointer; border:0; padding:7px 10px; border-radius:10px; background:#f2f2f2; text-decoration:none; display:inline-block; }
.btn:active { transform: translateY(1px); }

#map { height: 100%; width: 100%; }
.layers { margin-top: 10px; display: grid; gap: 8px; }

.container { max-width: 720px; margin: 0 auto; padding: 24px 16px; }
.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

input, select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 14px;
  box-sizing: border-box;
}

label { display:block; font-size: 13px; opacity: .85; margin: 10px 0 6px; }
h1 { margin: 0 0 10px; font-size: 22px; }
.small { font-size: 12px; opacity: .75; line-height: 1.35; }
.success { color: #1b7f3a; }
.error { color: #b91c1c; }