html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto; }
#map { height: 100vh; }

.panel {
  position: absolute; top: 12px; left: 12px; z-index: 1000;
  background: rgba(255,255,255,0.95);
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  width: 320px;
}

.row { display:flex; gap:8px; margin-top:8px; }
button { cursor:pointer; padding:8px 10px; border:0; border-radius:8px; }
.btn { background:#111; color:#fff; }
.btn2 { background:#eee; }
small { color:#555; display:block; margin-top:4px; line-height:1.35; }

.sep { margin:10px 0; border-top: 1px solid #ddd; }
#msg { margin-top:8px; font-size: 13px; color:#333; }

label { font-size: 13px; }
.layerRow { margin-top: 6px; }
.badge { font-size: 11px; color:#777; margin-left: 6px; }
select { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #ddd; }

.emojiMarker{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.9);
}


.legendBox{
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  width: 240px;
}

.legendTitle{
  font-weight: 700;
  margin-bottom: 8px;
}

.legendRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 6px 0;
}

.legendLabel{
  font-size: 13px;
  line-height: 1.2;
}

.legendEmpty{
  font-size: 13px;
  color:#666;
}

.emojiMarker--sm{
  width:22px;
  height:22px;
  font-size: 13px;
  border-width: 1px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.legendLine{
  width: 22px;
  height: 0;
  border-top: 4px solid #111;
  border-radius: 2px;
}

.addrBox { margin: 10px 0; display:flex; flex-direction:column; gap:10px; }
.addrLabel { font-weight:600; margin-bottom:4px; }
.addrInputRow { display:flex; gap:8px; }
.addrInputRow input { flex:1; padding:8px; border:1px solid #ccc; border-radius:8px; }
.addrInputRow button { padding:8px 10px; border-radius:8px; border:1px solid #ccc; background:#fff; cursor:pointer; }

.addrResults { margin-top:6px; display:flex; flex-direction:column; gap:6px; }
.addrItem {
  text-align:left;
  padding:8px;
  border-radius:8px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  font-size: 12px;
}
.addrItem:hover { background:#f3f3f3; }