:root{
  --bg:#f8fafc;
  --panel:#fff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --brand:#2da7ff;
  --brand2:#6ee7ff;
  --accent:#0284c7;
}

*{ box-sizing:border-box }
.novo-wrap{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:20px;
  padding:16px;
  background:var(--bg);
}

.novo-side{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  height:max-content;
  box-shadow:0 6px 20px rgba(15,23,42,.06);
}
.novo-title{ margin:0 0 10px; font-size:28px; line-height:1.1; color:var(--ink) }

.novo-legend{
  display:flex; gap:12px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--line);
  border-radius:12px; background:#fff;
}
.leg-item{ color:var(--ink); font-size:14px; display:flex; align-items:center; gap:8px }
.leg-item.total{ font-weight:700 }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px #fff }
.dot-blue{ background:linear-gradient(135deg,var(--brand),var(--brand2)) }
.dot-gray{ background:#cbd5e1 }

.novo-msg{
  margin-top:12px; padding:10px 12px; border:1px solid #fecaca; background:#fff7f7; color:#991b1b; border-radius:10px; font-size:14px;
}

.novo-map{ position:relative }
.map-toolbar{
  position:absolute; z-index:600; top:10px; left:10px; display:flex; gap:8px;
}
.btn-ui{
  border:1px solid var(--line); background:#fff; padding:6px 10px; border-radius:10px; cursor:pointer;
  font-size:13px; color:#0f172a; box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.btn-ui:active{ transform:translateY(1px) }

#map{
  width:100%;
  height:calc(100vh - 120px);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}

/* loader */
.map-loader{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  z-index:500; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.spinner{
  width:36px; height:36px; border-radius:50%;
  border:4px solid #e5e7eb; border-top-color:var(--brand);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.loader-text{ font-size:13px; color:var(--muted) }

/* markers */
.pin{
  width:26px; height:26px; border-radius:50%;
  border:3px solid #fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 24px rgba(15,23,42,.25);
}
.pin.gray{ background:#cbd5e1 }

/* clusters */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large{
  background:rgba(45,167,255,.15);
}
.marker-cluster div{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#002240; border:2px solid #fff;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  font-weight:700;
}

/* popup card */
.leaflet-popup-content-wrapper{ border-radius:12px !important; }
.leaflet-popup-content{ margin:10px 12px }
.popup-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 24px rgba(15,23,42,.12);
  padding:12px 14px; min-width:220px; max-width:280px;
}
.popup-card h4{
  margin:0 0 6px; font-size:16px; line-height:1.2; color:var(--ink);
}
.popup-card .price-line{
  font-weight:800; font-size:15px; color:#0ea5e9; margin:2px 0 8px;
}
.popup-card .meta, .popup-card .loc{
  font-size:12px; color:var(--muted); margin:4px 0;
}
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.chip{
  background:#f1f5f9; border:1px solid #e2e8f0; color:#0f172a;
  font-size:11px; padding:2px 8px; border-radius:999px;
}
.popup-card a.open{
  display:inline-block; margin-top:8px; text-decoration:none;
  color:#0f172a; border-bottom:1px dashed #94a3b8;
}
.popup-card a.open:hover{ border-bottom-color:#0f172a; }

/* leaflet controls polish */
.leaflet-control{ border-radius:10px; overflow:hidden; }

@media (max-width: 960px){
  .novo-wrap{ grid-template-columns: 1fr; }
  #map{ height:60vh; }
}