:root{
  --green:#0F5C4A; --green-dark:#0A3F33; --green-soft:#E3F1EA;
  --ink:#14211C; --muted:#56635D; --line:#DDE3E0; --bg:#F3F5F4; --white:#FFFFFF;
  --amber:#F0B341; --amber-soft:#FCEFD6; --amber-ink:#5C3B00;
  --low:#2F6DB5; --mid:#F0B341; --high:#A3401C; --sold:#8A9590;
  --radius:14px; --radius-lg:20px;
  --font:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font); color:var(--ink); background:var(--bg); font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%}
a{color:var(--green)}
a:hover{color:var(--green-dark)}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
h1,h2,h3{line-height:1.15; margin:0; letter-spacing:-0.3px}

.topbar{position:sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; padding-top:calc(12px + env(safe-area-inset-top,0px)); background:var(--white); border-bottom:1px solid var(--line)}
.brand{font-weight:800; font-size:22px; letter-spacing:-0.5px; color:var(--green); text-decoration:none}
.brand span{color:var(--ink)}
.topnav{display:flex; gap:6px; flex-wrap:wrap}
.topnav a,.topnav button{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--white); text-decoration:none; color:var(--ink); font-weight:700; font-size:14px; cursor:pointer}
.topnav a.active{background:var(--ink); color:var(--white); border-color:var(--ink)}
.beta{padding:8px 18px; background:var(--amber-soft); color:var(--amber-ink); font-size:13px; font-weight:600}
.beta a{color:var(--amber-ink)}
main{min-height:60vh; outline:none}
.wrap{max-width:1200px; margin:0 auto; padding:18px}
.footer{padding:24px 18px calc(24px + env(safe-area-inset-bottom,0px)); color:var(--muted); font-size:13px; max-width:900px}
.footer p{margin:0 0 8px}

/* buttons and chips */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px; border-radius:999px; border:1px solid var(--line); background:var(--white); font-weight:800; font-size:15px; cursor:pointer; text-decoration:none; color:var(--ink)}
.btn.primary{background:var(--green); border-color:var(--green); color:var(--white)}
.btn.primary:hover{background:var(--green-dark); color:var(--white)}
.btn.dark{background:var(--ink); border-color:var(--ink); color:var(--white)}
.btn.danger{color:#9B2C1A; border-color:#E8C4BC}
.btn.small{min-height:38px; padding:0 14px; font-size:13px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{min-height:42px; padding:0 14px; border-radius:999px; border:1px solid #CFD8D3; background:var(--white); font-weight:700; font-size:14px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--white); border-color:var(--ink)}
.tag{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:800; background:#EEF1F0; color:#3E4945}
.tag.ok{background:var(--green-soft); color:var(--green)}
.tag.warn{background:var(--amber-soft); color:#6B4500}
.tag.sold{background:#E6E9E8; color:#3E4945}
.tag.verified{background:var(--green); color:var(--white)}

/* home */
.filterbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 18px 0; max-width:1400px; margin:0 auto}
.filterbar .label{font-size:14px; font-weight:800; color:#3E4945; margin-right:2px}
.filterbar .count{margin-left:auto; font-size:14px; font-weight:700; color:#3E4945}
.home{display:flex; flex-wrap:wrap; gap:16px; padding:14px 18px 24px; max-width:1400px; margin:0 auto}
.mapcol{flex:999 1 560px; min-width:0; position:relative}
#map{height:68vh; min-height:420px; border-radius:var(--radius-lg); border:1px solid #CFD8D3; overflow:hidden; background:#E3EAE5}
.crumbs{position:absolute; left:12px; top:12px; z-index:500; display:flex; align-items:center; gap:4px; padding:4px; border-radius:999px; background:var(--white); box-shadow:0 2px 10px rgba(20,33,28,.18)}
.crumbs button{min-height:36px; padding:0 12px; border-radius:999px; border:0; background:transparent; font-weight:800; font-size:13px; cursor:pointer}
.crumbs button[aria-current="true"]{background:var(--ink); color:var(--white)}
.crumbs .sep{color:var(--sold)}
.legend{position:absolute; right:12px; bottom:28px; z-index:500; display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:12px; background:var(--white); box-shadow:0 2px 10px rgba(20,33,28,.15); font-size:12px; font-weight:700}
.legend i{display:inline-block; width:12px; height:12px; border-radius:999px; margin-right:6px; vertical-align:-1px}
.guide{position:absolute; left:12px; bottom:28px; z-index:500; max-width:300px; padding:12px 14px; border-radius:12px; background:var(--white); box-shadow:0 2px 10px rgba(20,33,28,.15); font-size:14px}
.guide strong{display:block; font-size:15px}
.listcol{flex:1 1 360px; min-width:0; display:flex; flex-direction:column; gap:10px; max-height:68vh; overflow:auto}
.listcol h2{font-size:20px}
.card{display:flex; gap:12px; padding:10px; border-radius:var(--radius); border:1px solid var(--line); background:var(--white); text-decoration:none; color:var(--ink)}
.card:hover{border-color:var(--green)}
.card .thumb{flex:0 0 96px; height:84px; border-radius:10px; background:#D5DED9 center/cover no-repeat}
.card .t{font-weight:800}
.card .p{font-weight:800; font-size:17px}
.card .m{font-size:13px; color:var(--muted)}
.empty{padding:20px; border-radius:var(--radius); background:var(--white); border:1px dashed #A9B6B0; color:var(--muted)}

/* map pins */
.pin{display:inline-flex; align-items:center; height:34px; padding:0 12px; border-radius:999px; border:2px solid var(--white); font-weight:800; font-size:13px; white-space:nowrap; box-shadow:0 2px 8px rgba(20,33,28,.3); transform:translate(-50%,-100%); cursor:pointer}
.pin.low{background:var(--low); color:var(--white)}
.pin.mid{background:var(--mid); color:var(--ink)}
.pin.high{background:var(--high); color:var(--white)}
.pin.sold{background:var(--sold); color:var(--white)}
.cluster{display:inline-flex; flex-direction:column; align-items:flex-start; padding:10px 16px; border-radius:16px; background:var(--green); color:var(--white); font-weight:800; font-size:15px; white-space:nowrap; box-shadow:0 0 0 0 rgba(15,92,74,.5); animation:pulse 1.8s ease-out infinite; transform:translate(-50%,-50%); cursor:pointer}
.cluster small{color:var(--amber); font-size:12px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,92,74,.5)}100%{box-shadow:0 0 0 16px rgba(15,92,74,0)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}
.leaflet-div-icon{background:transparent; border:0}

/* panels and sheets */
.sheet-backdrop{position:fixed; inset:0; z-index:2000; background:rgba(20,33,28,.45); display:flex; justify-content:center; align-items:flex-end}
@media (min-width:700px){.sheet-backdrop{align-items:center}}
.sheet{width:100%; max-width:520px; max-height:92vh; overflow:auto; background:var(--white); border-radius:20px 20px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.sheet{border-radius:20px}}
.sheet h2{font-size:22px; margin-bottom:6px}
.sheet .head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px}
.x{width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:var(--white); font-size:20px; cursor:pointer}
.group{margin:16px 0}
.group > .gl{font-weight:800; margin-bottom:8px}

/* house page */
.house{max-width:1100px; margin:0 auto; padding:0 0 100px}
.gallery{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 18px}
.gallery img{flex:0 0 auto; height:min(56vw,360px); width:auto; max-width:88vw; border-radius:var(--radius); scroll-snap-align:start; object-fit:cover; background:#D5DED9}
.gallery .noimg{flex:1; height:220px; border-radius:var(--radius); background:#2C3D36; color:#D5DED9; display:flex; align-items:center; justify-content:center; font-weight:600}
.hbody{display:flex; flex-wrap:wrap; gap:20px; padding:0 18px}
.hmain{flex:999 1 540px; min-width:0; display:flex; flex-direction:column; gap:18px}
.hside{flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:16px}
.htitle h1{font-size:30px; font-weight:800}
.htitle .loc{color:var(--muted); font-weight:600}
.price{font-size:30px; font-weight:800}
.note{font-size:13px; color:var(--muted)}
.box{padding:16px; border-radius:var(--radius); background:var(--white); border:1px solid var(--line)}
.box h2{font-size:18px; margin-bottom:10px}
.box.amber{background:var(--amber-soft); border-color:#F2DDB0; color:var(--amber-ink)}
.box.dark{background:#10362D; color:var(--white); border-color:#10362D}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.stats div{background:var(--white); padding:12px 6px; text-align:center}
.stats b{display:block; font-size:17px}
.stats span{font-size:12px; color:var(--muted)}
@media (max-width:480px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rows{display:flex; flex-direction:column}
.rows div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #EEF1F0; font-size:15px}
.rows div:last-child{border-bottom:0}
.rows span:first-child{color:#3E4945}
.rows span:last-child{font-weight:700; text-align:right}
.bar{height:8px; border-radius:999px; background:#EEF1F0; margin-top:8px}
.bar i{display:block; height:8px; border-radius:999px; background:var(--green)}
.video{position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#14211C}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
#minimap{height:240px; border-radius:var(--radius); border:1px solid var(--line)}
.review{padding:12px 14px; border-radius:12px; background:var(--bg); margin-top:8px}
.stars{color:#A06A00; letter-spacing:1px}
.stickybar{position:fixed; left:0; right:0; bottom:0; z-index:1500; display:flex; gap:10px; padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px)); background:var(--white); border-top:1px solid var(--line)}
.stickybar .btn{flex:1}
@media (min-width:900px){.stickybar{left:auto; right:24px; bottom:24px; width:380px; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:0 8px 30px rgba(20,33,28,.18)}}

/* forms */
.form{display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field > label, .field > .fl{font-size:14px; font-weight:800}
.field .hint{font-size:13px; color:var(--muted)}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],select,textarea{width:100%; min-height:48px; padding:10px 14px; border-radius:12px; border:1px solid #CFD8D3; background:var(--white); font-size:16px}
textarea{min-height:96px; resize:vertical}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.check{display:flex; align-items:flex-start; gap:10px; min-height:44px; font-size:15px}
.check input{width:22px; height:22px; margin-top:2px; flex:0 0 auto}
.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg button{min-height:42px; padding:0 14px; border-radius:999px; border:1px solid #CFD8D3; background:var(--white); font-weight:700; font-size:14px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--green); color:var(--white); border-color:var(--green)}
#pickmap{height:280px; border-radius:var(--radius); border:1px solid #CFD8D3}
.photos{display:flex; flex-wrap:wrap; gap:8px}
.photos .ph{position:relative; width:96px; height:84px; border-radius:10px; background:#D5DED9 center/cover no-repeat}
.photos .ph button{position:absolute; right:4px; top:4px; width:28px; height:28px; border-radius:999px; border:0; background:rgba(20,33,28,.75); color:#fff; cursor:pointer}
.photos .ph .cover{position:absolute; left:4px; bottom:4px; padding:1px 6px; border-radius:6px; background:var(--amber); font-size:11px; font-weight:800}
.formfoot{position:sticky; bottom:0; display:flex; gap:10px; flex-wrap:wrap; padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px)); background:var(--bg); border-top:1px solid var(--line)}

/* admin */
.admin-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px}
.admin-head h1{font-size:26px}
.alist{display:flex; flex-direction:column; gap:10px}
.arow{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px; border-radius:var(--radius); border:1px solid var(--line); background:var(--white)}
.arow .thumb{flex:0 0 72px; height:60px; border-radius:10px; background:#D5DED9 center/cover no-repeat}
.arow .info{flex:1 1 200px; min-width:0}
.arow .info b{display:block}
.arow .info span{font-size:13px; color:var(--muted)}
.arow .acts{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.status-seg button{min-height:38px; padding:0 12px; font-size:13px}
.status-seg button[aria-pressed="true"][data-v="Booked"]{background:var(--amber); color:var(--ink); border-color:var(--amber)}
.status-seg button[aria-pressed="true"][data-v="Sold"]{background:#3E4945; border-color:#3E4945}
.login{max-width:420px; margin:40px auto; padding:24px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--line)}
.login h1{font-size:26px; margin-bottom:6px}
.prose{max-width:760px}
.prose h1{font-size:30px; margin-bottom:12px}
.prose h2{font-size:19px; margin:22px 0 8px}
.prose p, .prose li{color:#2B3832}

#toast{position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:3000; padding:12px 18px; border-radius:999px; background:var(--ink); color:var(--white); font-weight:700; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s}
#toast.show{opacity:1}
.spinner{padding:40px; text-align:center; color:var(--muted)}