:root{
  --bg:#0f1113; --panel:rgba(16,18,21,.88); --card:rgba(255,255,255,.04); --card-h:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.09); --text:#f3efe7; --muted:#a59f94; --gold:#d4ae63; --gold-2:#e8c987;
  --avail:#9fd8a9; --pending:#f0c05a; --sold:#e5735f;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --panel-w:380px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
h1,.pin .num,.item .n,.item .p,#detail .lotname,#detail .price,#agent .name{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#app{position:fixed;inset:0}

/* ---------- map ---------- */
#viewport{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;background:radial-gradient(ellipse at 60% 40%,#1b1e22,#0b0c0e)}
#viewport.dragging{cursor:grabbing}
#stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#aerial{display:block;user-select:none;-webkit-user-drag:none;box-shadow:0 30px 80px rgba(0,0,0,.6)}
#overlay{position:absolute;left:0;top:0;overflow:hidden}
#dim{fill:rgba(8,9,11,.34);pointer-events:none;transition:fill .4s}
.lot{cursor:pointer;outline:none}
.lot:focus-visible .edge{stroke:var(--gold-2)}
.lot .hit{fill:rgba(255,255,255,0);transition:fill .25s}
.lot .glow-out{fill:none;stroke:#fff;stroke-width:22;opacity:.55;filter:url(#glowSoft);pointer-events:none;transition:stroke .25s,opacity .25s}
.lot .glow-in{fill:none;stroke:#fff;stroke-width:40;opacity:.55;filter:url(#glow);pointer-events:none;transition:stroke .25s,opacity .25s}
.lot .edge{fill:none;stroke:#fff;stroke-width:4;stroke-linejoin:round;opacity:.95;pointer-events:none;transition:stroke .25s}
.lot:hover .hit{fill:rgba(255,255,255,.07)}
.lot:hover .glow-out,.lot:hover .glow-in{opacity:.85}
.lot.sel .hit{fill:rgba(212,174,99,.14)}
.lot.sel .edge{stroke:var(--gold-2)}
.lot.sel .glow-out,.lot.sel .glow-in{stroke:var(--gold);opacity:.95}
.lot.sold .hit{fill:rgba(10,10,12,.28)}
.lot.sold .glow-out,.lot.sold .glow-in{opacity:.25}
.lot.sold .edge{opacity:.6}

#labels{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:auto;cursor:pointer;transition:opacity .2s}
.pin .tag{background:rgba(14,15,17,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 14px 7px 12px;display:flex;align-items:center;gap:9px;box-shadow:0 8px 24px rgba(0,0,0,.45);white-space:nowrap}
.pin .num{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1;letter-spacing:.02em}
.pin .num small{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:5px;font-weight:600}
.pin .meta{font-size:12.5px;color:#ddd6ca;border-left:1px solid rgba(255,255,255,.2);padding-left:9px;font-weight:500}
.pin .dot{width:8px;height:8px;border-radius:50%;background:var(--avail);box-shadow:0 0 0 3px rgba(159,216,169,.2)}
.pin.pending .dot{background:var(--pending);box-shadow:0 0 0 3px rgba(240,192,90,.22)}
.pin.sold .tag{background:rgba(120,32,22,.86);border-color:rgba(255,160,140,.45)}
.pin.sold .dot{display:none}
.pin.sold .meta{color:#ffd9cf;letter-spacing:.18em;font-weight:600;text-transform:uppercase;font-size:11px}
.pin.sel .tag{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,174,99,.28),0 10px 30px rgba(0,0,0,.5)}
.pin.compact .meta{display:none}

.map-ui{position:absolute;z-index:5;background:rgba(14,15,17,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px}
.zoom{right:20px;bottom:24px;display:flex;flex-direction:column;overflow:hidden}
.zoom button{width:44px;height:44px;font-size:20px;border-bottom:1px solid var(--line)}
.zoom button:last-child{border:0;font-size:12px;font-weight:600;letter-spacing:.06em}
.zoom button:hover{background:rgba(255,255,255,.08)}
.compass{right:20px;top:20px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%}
#north{display:flex;flex-direction:column;align-items:center;color:var(--gold-2);font-size:9px;font-weight:700;letter-spacing:.1em;line-height:1}
.scale{right:76px;bottom:24px;padding:8px 12px;display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted);border-radius:10px}
#scalebar{height:6px;border:2px solid #f3efe7;border-top:0}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);transition:opacity .5s;z-index:20}
#loading.done{opacity:0;pointer-events:none}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- panel ---------- */
#panel{position:absolute;left:20px;top:20px;bottom:20px;width:var(--panel-w);z-index:10;background:var(--panel);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 20px 60px rgba(0,0,0,.45);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
#panel>*{flex-shrink:0}
.grab{display:none}
header{padding:26px 26px 18px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600}
h1{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.02;margin:8px 0 6px;letter-spacing:.005em}
.sub{color:var(--muted);font-size:13.5px}
.stats{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:#ddd6ca}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--avail)}
.chip.sold i{background:var(--sold)} .chip.pending i{background:var(--pending)}

#list{list-style:none;padding:14px 14px 4px;display:flex;flex-direction:column;gap:8px}
.item{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s;text-align:left;width:100%}
.item:hover{background:var(--card-h)}
.item.sel{border-color:rgba(212,174,99,.55);background:rgba(212,174,99,.08)}
.item .n{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;text-align:center;color:var(--gold-2)}
.item .n small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.2em;color:var(--muted);font-weight:600;margin-bottom:2px}
.item .t{font-size:14px;font-weight:500}
.item .s{font-size:12px;color:var(--muted);margin-top:3px}
.item .p{font-family:var(--serif);font-size:21px;font-weight:600;text-align:right}
.item .st{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--avail);margin-top:3px}
.item.is-sold .p .amt{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(229,115,95,.7)}
.item.is-sold .st{color:var(--sold)} .item.is-pending .st{color:var(--pending)}

#detail{margin:14px 14px 0;padding:20px;border-radius:16px;background:linear-gradient(160deg,rgba(212,174,99,.14),rgba(212,174,99,.03) 60%);border:1px solid rgba(212,174,99,.35);animation:rise .3s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#detail .top{display:flex;justify-content:space-between;align-items:flex-start}
#detail .lotname{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1}
#detail .close{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);font-size:16px;line-height:30px}
#detail .price{font-family:var(--serif);font-size:40px;font-weight:500;margin:10px 0 2px;color:var(--gold-2)}
#detail .status{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--avail)}
#detail.sold .status{color:var(--sold)} #detail.pending .status{color:var(--pending)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:12px;overflow:hidden;margin:16px 0}
.facts div{background:rgba(16,18,21,.92);padding:11px 13px}
.facts b{display:block;font-size:16px;font-weight:600}
.facts span{font-size:11px;color:var(--muted);letter-spacing:.04em}
.cta{display:flex;gap:8px}
.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:11px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--text);border:1px solid var(--line);background:rgba(255,255,255,.05);transition:background .2s,transform .1s}
.btn:active{transform:scale(.98)}
.btn.gold{background:var(--gold);color:#17130b;border-color:var(--gold)}
.btn.gold:hover{background:var(--gold-2)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.seg{display:flex;margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{flex:1;padding:9px 0;font-size:12px;font-weight:600}
.seg button.on{background:var(--gold);color:#17130b}

#agent{margin:16px 14px 0;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
#agent .who{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#agent .name{font-family:var(--serif);font-size:22px;font-weight:600}
#agent .role{font-size:11.5px;color:var(--muted)}
#admin{margin:12px 14px 0;padding:14px;border-radius:14px;border:1px dashed rgba(212,174,99,.45);font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
#admin[hidden],#detail[hidden]{display:none}
#admin input{height:38px;border-radius:9px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--text);padding:0 11px;font:inherit}
footer{margin-top:auto;padding:16px 18px 20px}
footer p{font-size:11px;line-height:1.5;color:#7f796f}
.tools{display:flex;gap:8px;margin-top:12px}
.tools .ghost{flex:1;height:36px;border-radius:10px;border:1px solid var(--line);font-size:12px;font-weight:500;color:#cfc8bb}
.tools .ghost:hover{background:rgba(255,255,255,.07)}

/* embed preview (?embed=1) */
body.embed #panel,body.embed .zoom,body.embed .scale{display:none}
body.embed .compass{right:12px;top:12px;width:40px;height:40px}
.open-full{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:6;background:var(--gold);color:#17130b;text-decoration:none;font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.45);white-space:nowrap}
.open-full:hover{background:var(--gold-2)}
#editLink{display:inline-block;margin-top:12px;font-size:11px;color:#6f6a61;text-decoration:none}
#editLink:hover{color:var(--gold)}
#modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:20px}
#modal[hidden]{display:none}
.modal-card{background:#15171a;border:1px solid var(--line);border-radius:18px;padding:16px;max-width:min(900px,96vw);max-height:92vh;display:flex;flex-direction:column;gap:12px}
.modal-card img{max-width:100%;max-height:72vh;object-fit:contain;border-radius:10px}
.modal-actions{display:flex;gap:8px}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#f3efe7;color:#15130f;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:.25s;z-index:60;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- phone ---------- */
@media (max-width:820px){
  #panel{left:0;right:0;bottom:0;top:auto;width:auto;max-height:52vh;border-radius:20px 20px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);transition:max-height .3s ease}
  #panel.min{max-height:178px}
  .grab{display:block;width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:9px auto 0;flex:none;cursor:pointer}
  header{padding:12px 18px 12px}
  h1{font-size:26px;margin:4px 0 3px}
  .stats{margin-top:10px}
  #list{flex-direction:row;overflow-x:auto;padding:12px 14px 4px;scroll-snap-type:x mandatory}
  #list li{flex:0 0 262px;scroll-snap-align:start}
  .item .t,.item .s{white-space:nowrap}
  .zoom{right:12px;bottom:auto;top:76px}
  .compass{right:12px;top:16px;width:44px;height:44px}
  .scale{left:12px;right:auto;top:16px;bottom:auto}
  .zoom button{width:42px;height:42px}
  .pin .tag{padding:5px 10px 5px 9px;gap:7px}
  .pin .num{font-size:18px}
  .pin .meta{font-size:11px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}