:root { --border:#d8dee8; --text:#172033; --muted:#657084; --panel:#ffffff; --bg:#f5f7fa; --accent:#1769ff; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--text); background:var(--bg); }
header { padding:16px 20px; background:#fff; border-bottom:1px solid var(--border); }
h1 { margin:0; font-size:22px; }
.sub { margin-top:5px; color:var(--muted); font-size:13px; }
#map { height:calc(100vh - 78px); min-height:520px; }
.popup-title { font-weight:700; font-size:15px; margin-bottom:7px; }
.popup-btn { display:inline-block; margin:4px 4px 0 0; padding:8px 10px; border-radius:7px; text-decoration:none; font-size:12px; border:1px solid var(--border); color:var(--text); background:#fff; }
.popup-btn.primary { color:#fff; background:var(--accent); border-color:var(--accent); }
.marker-pin { width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#b42318; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.28); position:relative; }
.marker-pin::after { content:""; width:9px; height:9px; background:#fff; border-radius:50%; position:absolute; left:7px; top:7px; }
@media(max-width:700px){ #map{height:calc(100vh - 92px); min-height:460px;} h1{font-size:19px;} header{padding:13px 15px;} }