* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #212529; background: #fff; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.site-header { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid #e5e7eb; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-title { font-weight: 900; color: #14623D; }
.brand-sub { color: #64748b; font-size: 14px; }

.pin { width: 18px; height: 18px; border-radius: 50%; background: #069458; border: 2px solid #14623D; }

.nav a { text-decoration: none; color: #14623D; font-weight: 700; }
.btn { display: inline-block; text-decoration: none; border-radius: 10px; padding: 10px 12px; font-weight: 700; }
.btn-primary { background: #069458; color: #fff; }
.btn-ghost { background: #fff; border: 1px solid #d1d5db; color: #14623D; }
.btn.small { padding: 6px 8px; font-size: 12px; }

.controls { background: #f6f8fa; border-bottom: 1px solid #e5e7eb; }
.controls-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 10px 16px; align-items: end; }
.control label { font-size: 12px; color: #475569; display: block; margin-bottom: 4px; }
select, input[type=range] { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #d1d5db; background: #fff; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid #d1d5db; background: #fff; border-radius: 18px; padding: 6px 10px; font-weight: 700; }
.chip.active { background: #14623D; color: #fff; border-color: #14623D; }

.map-wrap { position: relative; height: calc(100vh - 210px); }
#map { position: absolute; inset: 0; }

.panel { position: absolute; left: 16px; right: 16px; bottom: 16px; max-height: 48vh; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px; background: #f6f8fa; border-bottom: 1px solid #e5e7eb; font-weight: 800; }
.list { overflow: auto; padding: 8px; }
.card { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border-top: 1px solid #f1f5f9; }
.card h4 { margin: 0; font-size: 15px; }
.card .meta { color: #64748b; font-size: 12px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 4px 8px; border-radius: 8px; background: #eef2f7; color: #475569; font-weight: 700; }

.tag.yard { background: #d1fae5; color: #065f46; }
.tag.garage { background: #dbeafe; color: #1e40af; }
.tag.estate { background: #ede9fe; color: #6d28d9; }
.tag.community { background: #ffedd5; color: #9a3412; }

.site-footer { border-top: 1px solid #e5e7eb; padding: 12px 0; }
.foot-grid { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; }

@media (max-width: 900px) {
  .controls-grid { grid-template-columns: 1fr 1fr; }
  .map-wrap { height: calc(100vh - 260px); }
}

/* Collapsed list panel */
.panel.closed { height: 46px; max-height: 46px; overflow: hidden; }