:root{ --bd:#e5e7eb; --bg:#fff; --muted:#6b7280; --text:#111; --pill:#f8f8f8; }
html, body, #map{ height:100%; margin:0; }
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); }

/* Topbar centered (Google Maps-ish) */
.topbar{ position:absolute; z-index:500; left:50%; transform:translateX(-50%);
  top:.8rem; display:flex; gap:.5rem; align-items:center; background:var(--bg);
  border:1px solid var(--bd); border-radius:999px; padding:.45rem .6rem; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.brand{ font-weight:700; margin:0 .4rem; }
.search-box{ display:flex; gap:.4rem; align-items:center; }
.search-box input{ width:16rem; max-width:40vw; padding:.45rem .7rem; border:1px solid var(--bd); border-radius:999px; }
.search-box button, .actions button{ padding:.45rem .6rem; border:1px solid var(--bd); border-radius:999px; background:var(--pill); }
.actions{ display:flex; gap:.3rem; margin-left:.3rem; }

/* Leaflet tweaks */
.leaflet-control-zoom{ position:absolute; right:.8rem; bottom:.8rem; }
.leaflet-popup-content{ min-width:240px; font-size:.95rem; }

/* Emoji pin as marker */
.ap-pin .pin{ font-size:22px; line-height:22px; transform:translate(-2px,-2px); }

/* Add mode hint */
body.add-mode .topbar{ outline:2px solid #2563eb33; }

/* Toast */
.toast{ position:absolute; left:50%; transform:translateX(-50%); bottom:1rem; background:#111; color:#fff; padding:.5rem .75rem; border-radius:.6rem; opacity:0; transition:opacity .2s ease; z-index:600; }
.toast.show{ opacity:.92; }

@media (max-width:600px){
  .search-box input{ width:12rem; }
}