:root{
  --ink:#0f241d; --muted:#4f6a61; --teal:#17614f; --teal-deep:#0f4b3c;
  --teal-light:#2f8f74; --cream:#f6f4ec; --paper:#fff; --line:#e4e0d4;
  --gold:#c88a2e; --radius:14px; --shadow:0 6px 20px rgba(15,75,60,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}

/* header */
header{
  background:var(--paper);border-bottom:1px solid var(--line);flex:0 0 auto;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.05rem}
.brand img{width:28px;height:28px}
.brand span small{display:block;font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.03em}
.header-spacer{flex:1}
.view-toggle{display:flex;background:var(--cream);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.view-toggle button{border:none;background:transparent;padding:8px 14px;font-weight:600;font-size:.85rem;color:var(--muted)}
.view-toggle button.active{background:var(--teal);color:#fff}

/* filter bar */
.filters{
  background:var(--paper);border-bottom:1px solid var(--line);flex:0 0 auto;
  display:flex;gap:8px;padding:10px 14px;overflow-x:auto;align-items:center;
}
.filters select,.filters input{
  font:inherit;font-size:.9rem;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--cream);color:var(--ink);min-width:0;
}
.filters input{width:100px}
.filters .count{margin-left:auto;white-space:nowrap;font-size:.85rem;color:var(--muted);font-weight:600;padding-right:4px}
.filters .clear{border:none;background:transparent;color:var(--teal);font-weight:700;font-size:.85rem;white-space:nowrap}

/* main */
main{flex:1 1 auto;position:relative;overflow:hidden}
#map{position:absolute;inset:0}
#grid{position:absolute;inset:0;overflow-y:auto;padding:14px;display:none;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;align-content:start}
body.view-grid #map{display:none}
body.view-grid #grid{display:grid}

/* card */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 1px 2px rgba(15,75,60,.05);display:flex;flex-direction:column}
.card .photo{aspect-ratio:16/10;background:var(--cream) center/cover no-repeat;position:relative}
.card .photo .badge{position:absolute;top:8px;left:8px;background:rgba(15,75,60,.92);color:#fff;
  font-size:.68rem;font-weight:700;padding:4px 8px;border-radius:999px;display:flex;align-items:center;gap:4px}
.card .photo .fresh{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);color:var(--teal-deep);
  font-size:.66rem;font-weight:700;padding:4px 8px;border-radius:999px}
.card .body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .price{font-weight:800;font-size:1.15rem;color:var(--teal-deep)}
.card .title{font-weight:600}
.card .meta{font-size:.85rem;color:var(--muted)}
.card .xsell{font-size:.78rem;color:var(--teal);font-weight:600;margin-top:2px}
.card .actions{display:flex;gap:8px;margin-top:8px}
.btn{border:none;border-radius:10px;font-weight:700;font-size:.9rem;padding:10px 12px;flex:1;
  display:flex;align-items:center;justify-content:center;gap:6px}
.btn-wa{background:#25d366;color:#04331c}
.btn-call{background:var(--cream);color:var(--teal-deep);border:1px solid var(--line)}
.btn-ghost{background:var(--teal);color:#fff}

/* map popup card is smaller */
.leaflet-popup-content{margin:0!important;width:230px!important}
.leaflet-popup-content .card{border:none;box-shadow:none}
.leaflet-popup-content-wrapper{padding:0;border-radius:14px;overflow:hidden}

/* states */
.state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;text-align:center;padding:24px;color:var(--muted)}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--teal);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* detail modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,36,29,.55);display:none;
  align-items:flex-end;justify-content:center;z-index:1000}
.modal-backdrop.open{display:flex}
.modal{background:var(--paper);width:100%;max-width:520px;max-height:92dvh;overflow-y:auto;
  border-radius:20px 20px 0 0}
@media(min-width:560px){.modal-backdrop{align-items:center}.modal{border-radius:20px}}
.modal .hero{aspect-ratio:16/10;background:var(--cream) center/cover no-repeat}
.modal .gallery{display:flex;gap:8px;padding:10px 14px 0;overflow-x:auto}
.modal .gallery img{width:88px;height:66px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.modal .content{padding:14px 16px 20px;display:flex;flex-direction:column;gap:8px}
.modal .close{position:sticky;top:8px;float:right;margin:8px;background:rgba(0,0,0,.5);color:#fff;
  border:none;width:34px;height:34px;border-radius:50%;font-size:1.1rem;z-index:2}
.modal h2{font-size:1.3rem}
.modal .row{display:flex;gap:14px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.modal .row b{color:var(--ink)}
.badge-line{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:700;font-size:.85rem}