:root {
  --bg: #f5f5f3;
  --panel: #ffffff;
  --text: #141414;
  --muted: #737373;
  --line: #dfdfdc;
  --accent: #1f4f46;
  --accent-soft: #e3efeb;
  --brand-bg: #214f40;
  --brand-text: #ffffff;
  --available: #2f855a;
  --reserved: #b7791f;
  --sold: #6b7280;
  --danger: #b91c1c;
  --shadow: 0 12px 32px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; display:block; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.app-shell { min-height:100vh; }
.topbar { position:sticky; top:0; z-index:20; background:rgba(245,245,243,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.topbar-inner { max-width:1440px; margin:auto; padding:14px 22px; display:flex; align-items:center; gap:14px; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; }
.brand-mark { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--text); color:white; font-size:12px; letter-spacing:.04em; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn { min-height:42px; border:1px solid var(--line); border-radius:10px; padding:0 14px; background:white; color:var(--text); }
.btn:hover { border-color:#bdbdb8; }
.btn.primary { background:var(--text); color:#fff; border-color:var(--text); }
.btn.accent { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.ghost { background:transparent; }
.btn.danger { color:var(--danger); }
.container { max-width:1440px; margin:0 auto; padding:24px 22px 60px; }
.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.card h2, .card h3 { margin:0 0 10px; }
.card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.page-title { margin:0 0 6px; font-size:30px; letter-spacing:-.02em; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field label { font-size:13px; color:var(--muted); }
.field input, .field select, .field textarea { width:100%; min-height:44px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff; color:var(--text); }
.field textarea { min-height:90px; resize:vertical; }
.file-box { border:1px dashed #bdbdb8; border-radius:14px; padding:18px; background:#fafaf8; }
.file-box input[type=file] { width:100%; }
.projects { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.project-card { background:white; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.project-cover { height:150px; background:linear-gradient(135deg,#eee,#ddd); display:grid; place-items:center; color:var(--muted); }
.project-card-body { padding:14px; }
.project-card h3 { margin:0 0 5px; }
.project-logo { width:72px; max-height:42px; object-fit:contain; }
.thumb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin-top:12px; }
.thumb { position:relative; aspect-ratio:4/3; background:#efefec; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:contain; }
.thumb .badge { position:absolute; top:6px; right:6px; background:rgba(0,0,0,.68); color:white; border-radius:7px; font-size:11px; padding:4px 6px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; min-width:840px; background:white; }
th, td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:right; font-size:13px; }
th { color:var(--muted); font-weight:600; background:#fafaf8; position:sticky; top:0; }
.floor-hint { display:block; margin-top:4px; color:var(--muted); font-size:11px; white-space:nowrap; }
.status-pill { display:inline-flex; align-items:center; min-height:28px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:600; }
.status-available { background:#e5f5ec; color:#246845; }
.status-reserved { background:#fff4d9; color:#8b5d14; }
.status-sold { background:#eceff2; color:#59616c; }
.viewer-wrap { position:relative; width:100%; background:#111; border-radius:16px; overflow:hidden; aspect-ratio:16/10; user-select:none; touch-action:pan-y; }
.viewer-wrap img.spin-image { width:100%; height:100%; object-fit:contain; }
.viewer-hint { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.6); color:#fff; border-radius:999px; padding:7px 10px; font-size:12px; pointer-events:none; }
.hotspot { position:absolute; border:2px solid rgba(255,255,255,.9); background:rgba(31,79,70,.22); border-radius:5px; color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; min-width:22px; min-height:22px; }
.hotspot:hover, .hotspot.active { background:rgba(31,79,70,.5); }
.hotspot-editor { position:relative; background:#111; border-radius:14px; overflow:hidden; aspect-ratio:16/10; cursor:crosshair; }
.hotspot-editor img { width:100%; height:100%; object-fit:contain; }
.draw-rect { position:absolute; border:2px dashed #fff; background:rgba(31,79,70,.22); pointer-events:none; }
.toolbar-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:white; min-height:36px; padding:0 12px; border-radius:999px; }
.chip.active { background:var(--text); border-color:var(--text); color:white; }
.public-shell { min-height:100vh; background:#f4f3ef; }
.public-header { padding:18px 24px; display:flex; justify-content:space-between; gap:18px; align-items:center; border-bottom:1px solid var(--line); background:white; }
.public-title { display:flex; gap:14px; align-items:center; min-width:0; }
.public-title img { max-width:110px; max-height:54px; object-fit:contain; }
.public-title h1 { margin:0; font-size:24px; }
.public-main { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr); gap:16px; max-width:1600px; margin:auto; padding:16px; }
.side-panel { background:white; border:1px solid var(--line); border-radius:18px; padding:18px; align-self:start; position:sticky; top:16px; }
.price { font-size:24px; font-weight:800; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.tab { min-height:38px; border-radius:9px; padding:0 11px; border:1px solid var(--line); background:white; }
.tab.active { background:var(--text); color:#fff; border-color:var(--text); }
.media-box { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fafaf8; min-height:240px; display:grid; place-items:center; }
.media-box img { width:100%; max-height:520px; object-fit:contain; }
.panorama-canvas { width:100%; aspect-ratio:16/10; background:#111; display:block; }
.empty { padding:38px 18px; text-align:center; color:var(--muted); }
.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; padding:8px; }
.gallery img { width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:10px; }
.logo-preview { max-width:160px; max-height:70px; object-fit:contain; margin-top:10px; }
.frame-counter { position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,.6); color:#fff; padding:7px 9px; border-radius:999px; font-size:12px; }
.toast { position:fixed; left:20px; bottom:20px; z-index:50; background:#111; color:#fff; border-radius:11px; padding:11px 14px; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:.2s; pointer-events:none; }
.toast.show { opacity:1; transform:none; }
@media (max-width: 980px) {
  .grid.two, .grid.three, .form-row { grid-template-columns:1fr; }
  .public-main { grid-template-columns:1fr; }
  .side-panel { position:static; }
}
@media (max-width: 640px) {
  .topbar-inner, .container { padding-left:14px; padding-right:14px; }
  .public-header { padding:14px; align-items:flex-start; flex-direction:column; }
  .public-main { padding:10px; }
  .page-title { font-size:25px; }
}

/* The SVG occupies exactly the contained image's content rectangle. */
.viewer-wrap, .hotspot-editor { background:#e3e3e0; }
.polygon-overlay { position:absolute; overflow:visible; direction:ltr; }
.viewer-wrap .polygon-overlay { pointer-events:none; }
.polygon-hotspot { fill:rgba(var(--polygon-color, 107,114,128),.25); stroke:none; stroke-width:0; vector-effect:non-scaling-stroke; cursor:pointer; pointer-events:all; }
.polygon-hotspot:hover, .polygon-hotspot:focus, .polygon-hotspot.active { fill:rgba(var(--polygon-color, 107,114,128),.5); stroke:none; outline:none; }
.polygon-draft { fill:none; stroke:#176fa5; stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.polygon-draft.closed { fill:rgba(var(--polygon-color, 107,114,128),.25); }
.polygon-point { fill:white; stroke:#176fa5; stroke-width:1; vector-effect:non-scaling-stroke; cursor:grab; }
.polygon-point.selected, .polygon-point:focus { fill:#f9d56e; outline:none; }
.hotspot-editor { touch-action:none; }
.polygon-tools { margin-top:12px; }
.btn:disabled { opacity:.45; cursor:default; }

/* Apartment availability colors remain consistent on hover and selection. */
.polygon-overlay [data-status="available"] { --polygon-color:47,133,90; }
.polygon-overlay [data-status="reserved"] { --polygon-color:234,179,8; }
.polygon-overlay [data-status="sold"] { --polygon-color:220,70,70; }

.polygon-guide, .polygon-preview, .polygon-close-hint { fill:none; stroke:#176fa5; stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.polygon-guide { stroke-dasharray:3 5; opacity:.55; }
.polygon-guide.snapped { stroke:#d97706; opacity:.9; }
.polygon-preview { stroke-dasharray:5 3; }
.polygon-close-hint { stroke:#d97706; }

.media-expand-toolbar { display:flex; justify-content:flex-end; margin:0 0 8px; }
.expanded-media-dialog { width:96vw; max-width:1600px; height:94vh; height:94dvh; max-height:94dvh; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--text); box-shadow:var(--shadow); }
.expanded-media-dialog[open] { display:flex; flex-direction:column; gap:12px; }
.expanded-media-dialog::backdrop { background:rgba(0,0,0,.7); }
.expanded-media-header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-shrink:0; }
.expanded-media-dialog .side-panel { position:static; align-self:stretch; flex:1; min-height:0; overflow:auto; width:100%; }
.expanded-media-dialog .media-expand-toolbar { display:none; }
.expanded-media-dialog .media-box { width:100%; min-height:300px; }
.expanded-media-dialog .media-box > img { width:100%; max-height:65vh; object-fit:contain; }
.expanded-media-dialog .panorama-canvas { width:100%; height:60vh; aspect-ratio:auto; touch-action:none; }
@media (max-width:640px) { .expanded-media-dialog { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:12px; border:0; border-radius:0; } }

.checkbox-row { display:flex; align-items:center; gap:9px; margin:0 0 16px; min-height:44px; cursor:pointer; }
.checkbox-row input { width:18px; height:18px; accent-color:var(--accent); }

.apartment-filters { display:grid; gap:14px; margin-top:18px; border-top:1px solid var(--line); padding-top:16px; }
.area-filter { border:1px solid var(--line); border-radius:12px; min-width:0; padding:12px; }
.area-inputs { display:flex; gap:16px; }
.area-inputs label { display:flex; flex:1; min-width:0; gap:8px; align-items:center; }
.area-inputs input { width:100%; min-width:0; min-height:42px; padding:8px; border:1px solid var(--line); border-radius:8px; }
.range-label { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; font-size:13px; }
.range-label input { flex:1; min-width:120px; min-height:32px; accent-color:var(--accent); }
.apartment-carousel { width:100%; min-width:0; padding:8px; }
.media-box .carousel-image { width:100%; height:300px; max-height:none; object-fit:contain; touch-action:pan-y; user-select:none; }
.carousel-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.carousel-slider { display:block; width:100%; min-height:36px; accent-color:var(--accent); }
.expanded-media-dialog .carousel-image { height:60vh; max-height:none; }

.project-map-link { display:inline-flex; align-items:center; justify-content:center; margin-top:10px; text-decoration:none; color:var(--accent); }

.building-slider { position:absolute; z-index:2; bottom:10px; left:50%; transform:translateX(-50%); width:32%; max-width:360px; min-width:100px; border-radius:24px; background:rgba(0,0,0,.5); padding:0 12px; }
.building-slider input { display:block; width:100%; height:36px; margin:0; accent-color:#fff; cursor:ew-resize; }
.frame-counter { direction:ltr; }
.plan-viewer, .plan-content { width:100%; min-width:0; }
.plan-controls { padding:10px; }
.plan-pdf { display:block; width:100%; height:440px; border:0; background:white; }
.plan-pdf-link { display:inline-flex; align-items:center; margin:10px; text-decoration:none; }
.expanded-media-dialog .plan-pdf { height:65vh; }
.expanded-media-dialog .plan-content img { max-height:65vh; object-fit:contain; }
@media (max-width:640px) { .viewer-hint { bottom:58px; font-size:10px; } .building-slider { width:48%; } .plan-pdf { height:360px; } }

.panorama-canvas { touch-action:none; cursor:grab; }
.panorama-canvas:active { cursor:grabbing; }

.panorama-gallery, .panorama-stage { width:100%; min-width:0; }
.panorama-selection { text-align:center; padding:10px 12px 0; font-size:13px; color:var(--muted); }
.panorama-thumbs { display:flex; justify-content:safe center; gap:12px; width:100%; min-width:0; overflow-x:auto; padding:14px 12px; background:white; overscroll-behavior-x:contain; }
.panorama-thumb { position:relative; flex:0 0 104px; padding:3px; border:2px solid transparent; border-radius:9px; background:#eee; }
.media-box .panorama-thumb img { width:100%; height:88px; object-fit:cover; border-radius:5px; }
.panorama-thumb span { position:absolute; bottom:5px; right:5px; background:rgba(0,0,0,.65); color:white; padding:2px 6px; border-radius:5px; font-size:12px; }
.panorama-thumb.active { border-color:var(--accent); background:var(--accent-soft); }
.panorama-thumb:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.branding-choice { border:1px solid var(--line); border-radius:12px; padding:12px; margin:0 0 16px; }
.branding-choice > label { display:inline-flex; align-items:center; gap:7px; min-height:44px; margin-inline-end:18px; cursor:pointer; }
.branding-choice input { accent-color:var(--accent); }
.branding-choice p { margin:4px 0 0; }
.public-header.branded-header { display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,240px) minmax(0,1fr); grid-template-areas:"actions logo title"; direction:ltr; align-items:center; }
.branded-header .public-title { grid-area:title; direction:rtl; text-align:right; justify-content:flex-start; }
.branded-header .public-title h1 { overflow-wrap:anywhere; }
.header-project-logo { grid-area:logo; min-width:0; display:flex; align-items:center; justify-content:center; }
.header-project-logo img { width:100%; object-fit:contain; }
.header-actions { grid-area:actions; direction:rtl; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; min-width:0; }
.header-developer-logo { max-width:110px; max-height:50px; object-fit:contain; }
.branded-header[data-priority="name"] h1 { font-size:32px; font-weight:800; }
.branded-header[data-priority="name"] .header-project-logo img { max-width:110px; max-height:76px; }
.branded-header[data-priority="logo"] h1 { font-size:22px; font-weight:600; }
.branded-header[data-priority="logo"] .header-project-logo img { max-width:220px; max-height:120px; }
@media (max-width:640px) {
  .public-header.branded-header { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-template-areas:". logo title" "actions actions actions"; gap:12px 8px; }
  .branded-header[data-priority="name"] h1 { font-size:23px; }
  .branded-header[data-priority="logo"] h1 { font-size:18px; }
  .branded-header[data-priority="name"] .header-project-logo img { max-width:76px; max-height:65px; }
  .branded-header[data-priority="logo"] .header-project-logo img { max-width:140px; max-height:100px; }
  .branded-header .project-map-link { padding:6px 8px; font-size:12px; }
  .branded-header .public-title .muted { font-size:12px; overflow-wrap:anywhere; }
}

.project-brochure-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; margin-top:10px; margin-inline-start:6px; color:var(--accent); }
@media (max-width:640px) { .project-brochure-link { padding:6px 8px; font-size:12px; margin-inline-start:0; } }

.project-media-dialog { width:96vw; max-width:1500px; height:94vh; height:94dvh; max-height:94dvh; border:0; border-radius:16px; padding:16px; background:#f5f5f3; }
.project-media-dialog[open] { display:flex; flex-direction:column; gap:12px; }
.project-media-dialog::backdrop { background:rgba(0,0,0,.75); }
.project-media-body { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }
.project-media-dialog.about-dialog { width:calc(100vw - 32px); max-width:760px; height:auto; max-height:85vh; max-height:85dvh; margin:auto; padding:24px; background:#fff; }
.about-dialog .expanded-media-header { flex:0 0 auto; padding-bottom:14px; border-bottom:1px solid var(--line); }
.about-dialog .project-media-body { flex:1 1 auto; overflow-y:auto; padding:4px; gap:16px; }
.about-project-name { margin:0; color:#214f40; font-size:26px; line-height:1.4; overflow-wrap:anywhere; }
.project-description { font-size:16px; line-height:1.85; color:#3f4842; white-space:pre-wrap; overflow-wrap:anywhere; }
.project-media-dialog.map-dialog { width:96vw; max-width:1200px; height:86vh; height:86dvh; }
.map-dialog .project-media-body { overflow:auto; }
.map-caption { flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:14px; }
.map-caption span { color:var(--muted); }
.map-stage { flex:1 0 200px; min-height:200px; display:flex; border-radius:10px; overflow:hidden; background:#e5e8e3; }
.project-map { width:100%; min-height:200px; height:100%; flex:1; border:0; }
.map-footer { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; }
.map-footer .text-button { margin-inline-start:auto; white-space:nowrap; }
.map-unavailable { flex:1; display:grid; place-content:center; }
.map-preview-button { align-self:flex-start; margin-top:6px; }
@media(max-width:640px) { .project-media-dialog.map-dialog { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; } }
.project-video { width:100%; height:100%; min-height:0; background:#111; object-fit:contain; }
.book-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; }
.book-controls a { display:inline-flex; align-items:center; text-decoration:none; }
.book-stage { flex:1; min-height:0; overflow:hidden; touch-action:pan-y; background:#dddcd7; border-radius:10px; }
.book-spread { width:100%; height:100%; display:flex; direction:rtl; justify-content:center; align-items:center; padding:12px; }
.book-spread canvas { display:block; background:white; box-shadow:0 3px 14px #0003; min-width:0; }
.book-slider { width:100%; min-height:32px; accent-color:var(--accent); }
@media(max-width:640px) { .project-media-dialog { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0; padding:10px; } }

/* Paper curvature is rendered into the page surface, with a shared central spine. */
.book-stage { background:radial-gradient(ellipse at center,#efeee9 0%,#d5d3cd 100%); }
.book-spread { perspective:1800px; padding:24px; }
.book-leaf { position:relative; flex:0 0 auto; min-width:0; line-height:0; transform-style:preserve-3d; }
.book-leaf-left { transform-origin:right center; }
.book-leaf-right { transform-origin:left center; }
.book-leaf-single { transform-origin:right center; }
.book-spread .book-leaf canvas { background:transparent; box-shadow:none; filter:drop-shadow(0 2px 0 #f8f7f2) drop-shadow(0 2px 0 #bdb9af) drop-shadow(0 2px 0 #f5f3ec) drop-shadow(0 12px 10px #0003); }
.book-open .book-leaf-right { z-index:1; }
.book-open .book-leaf-right::after { content:''; position:absolute; left:-1px; top:7%; bottom:0; width:2px; background:linear-gradient(transparent,#0004 12%,#0004 88%,transparent); pointer-events:none; }
.book-controls [data-count] { unicode-bidi:plaintext; }

/* Sales presentation: a continuous building canvas and a quiet apartment sidebar. */
.sales-shell { --accent:#214f40; --accent-soft:#e8f0eb; --line:#e5e8e4; background:#fff; height:100vh; height:100dvh; min-height:640px; display:flex; flex-direction:column; }
.sales-shell button, .sales-shell a, .apartment-panel button { -webkit-tap-highlight-color:transparent; }
.sales-shell :focus-visible, .apartment-panel :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.sales-shell .btn.primary, .sales-shell .btn.accent, .apartment-panel .btn.primary, .apartment-panel .btn.accent, .project-media-dialog .btn.primary, .project-media-dialog .btn.accent { background:var(--brand-bg); border-color:var(--brand-bg); color:var(--brand-text); }
.ui-icon { width:21px; height:21px; flex:0 0 auto; vertical-align:middle; }
.public-header.sales-header { flex:0 0 auto; grid-template-columns:minmax(0,1fr) minmax(90px,180px) minmax(0,1fr); grid-template-areas:"actions logo title"; min-height:80px; padding:10px 28px; gap:20px; }
.sales-header .header-actions { direction:ltr; justify-content:flex-start; gap:20px; flex-wrap:nowrap; }
.studio-wordmark { font-size:22px; font-weight:700; letter-spacing:.045em; white-space:nowrap; }
.sales-header .admin-link { min-height:32px; padding:0 10px; border-radius:5px; font-size:12px; color:var(--muted); }
.language-switch { display:flex; flex:0 0 auto; direction:ltr; padding:2px; border:1px solid var(--line); border-radius:6px; gap:2px; }
.language-switch button { min-height:30px; padding:4px 8px; border:0; border-radius:4px; background:transparent; color:#515a54; font-size:12px; }
.language-switch button[aria-pressed="true"] { background:var(--brand-bg); color:var(--brand-text); }
.sales-header[data-priority="name"] h1 { font-size:26px; line-height:1.15; font-weight:750; }
.sales-header[data-priority="logo"] h1 { font-size:19px; font-weight:600; }
.sales-header[data-priority="name"] .header-project-logo img { max-width:85px; max-height:55px; }
.sales-header[data-priority="logo"] .header-project-logo img { max-width:160px; max-height:76px; }
.sales-header .header-developer-logo { max-width:110px; max-height:44px; }
.project-address { color:var(--muted); font-size:12px; margin-top:5px; }
.sales-navigation { flex:0 0 auto; display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 28px; position:relative; border-bottom:1px solid var(--brand-bg); background:var(--brand-bg); color:var(--brand-text); }
.project-navigation { display:flex; align-self:stretch; gap:28px; }
.project-nav, .project-navigation .resource-link { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:none; border:0; border-bottom:2px solid transparent; color:var(--brand-text); min-width:60px; min-height:48px; padding:12px 3px; font-family:inherit; font-size:16px; line-height:1.4; font-weight:500; white-space:nowrap; text-decoration:none; }
.project-nav.active { border-color:var(--brand-text); color:var(--brand-text); font-weight:700; }
.sales-navigation .project-navigation :focus-visible { outline:2px solid var(--brand-text); outline-offset:-4px; }


.resource-link .ui-icon { width:18px; height:18px; }
.resource-link:hover { text-decoration:underline; }
.public-main.sales-main { display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,29vw,430px); direction:rtl; gap:0; max-width:none; width:100%; margin:0; padding:0; flex:1; min-height:0; }
.sales-disclaimer { flex:0 0 auto; padding:8px 20px; padding-bottom:max(8px,env(safe-area-inset-bottom)); background:var(--brand-bg); color:var(--brand-text); font-size:11px; line-height:1.6; text-align:center; }
.sales-disclaimer p { max-width:1600px; margin:0 auto; }
.sales-workspace { min-width:0; min-height:0; display:flex; flex-direction:column; }
.sales-filterbar { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; padding:16px 24px 9px; background:#fff; flex-shrink:0; z-index:5; }
.compact-filter { display:flex; align-items:center; gap:10px; color:#646b65; font-size:13px; }
.compact-filter select, .filter-value { background:#fff; border:1px solid var(--line); border-radius:5px; min-height:36px; width:105px; padding:7px 10px; color:#343e36; }
.compact-filter select { cursor:pointer; }
.compact-filter #floorFilter { width:112px; min-width:112px; }
.area-popover { position:relative; color:#646b65; font-size:13px; }
.area-popover summary { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; }
.area-popover summary::-webkit-details-marker { display:none; }
.filter-value { width:auto; min-width:105px; display:flex; justify-content:space-between; gap:10px; }
.area-popover[open] .filter-value { border-color:var(--accent); }
.area-popover-body { position:absolute; inset-inline-end:0; top:46px; width:280px; padding:18px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 12px 35px #142d2620; z-index:6; }
.area-popover .area-filter { border:0; padding:0; }
.area-popover .area-filter legend { color:var(--text); margin-bottom:12px; font-weight:600; }
.area-popover #closeArea { width:100%; margin-top:12px; color:var(--accent); }
.availability-filter { display:flex; gap:9px; align-items:center; cursor:pointer; color:#626c65; font-size:12px; position:relative; }
.availability-filter input { position:absolute; opacity:0; width:38px; height:24px; margin:0; cursor:pointer; }
.switch-track { width:37px; height:22px; border-radius:20px; background:#d9ddda; position:relative; transition:background .15s; }
.switch-track::after { content:''; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002; position:absolute; top:3px; right:3px; transition:transform .15s; }
.availability-filter input:checked + .switch-track { background:var(--accent); }
.availability-filter input:checked + .switch-track::after { transform:translateX(-15px); }
.availability-filter input:focus-visible + .switch-track { outline:2px solid var(--accent); outline-offset:3px; }
.view-switch { display:flex; padding:3px; border:1px solid var(--line); border-radius:6px; margin-inline-start:auto; }
.view-switch button { display:flex; align-items:center; justify-content:center; gap:7px; background:none; border:0; border-radius:4px; min-height:32px; min-width:72px; padding:4px 10px; font-size:12px; color:#606961; }
.view-switch .active { background:var(--brand-bg); color:var(--brand-text); }
.view-switch .ui-icon { width:17px; height:17px; }
.filter-feedback { display:flex; align-items:center; justify-content:space-between; padding:0 24px 9px; color:#89908a; font-size:11px; min-height:29px; }
.text-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; padding:4px 0; background:transparent; color:var(--accent); font-size:inherit; cursor:pointer; }
.text-button:hover { text-decoration:underline; }
.text-button:disabled { opacity:.3; cursor:default; text-decoration:none; }
.workspace-stage { position:relative; min-height:0; flex:1; display:flex; background:#e7e9e5; }
.sales-workspace .viewer-wrap { flex:1; height:100%; min-height:0; aspect-ratio:auto; border-radius:0; background:#e7e9e5; touch-action:pan-y; cursor:grab; }
.spin-surface { position:absolute; inset:0; transform-origin:center; will-change:transform; }
.spin-surface .spin-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.sales-workspace .viewer-wrap:active { cursor:grabbing; }
.sales-workspace .viewer-wrap.is-zoomed { touch-action:none; }
.viewer-instruction { position:absolute; top:16px; right:20px; padding:7px 10px; border-radius:5px; background:#ffffffde; color:#455e50; font-size:11px; pointer-events:none; }
.viewer-footer { position:absolute; bottom:18px; inset-inline:20px; display:flex; align-items:center; justify-content:space-between; gap:15px; flex-direction:row-reverse; pointer-events:none; }
.viewer-footer > * { pointer-events:auto; }
.status-legend { display:flex; gap:16px; align-items:center; background:#fffffff0; color:#505c52; border-radius:6px; padding:13px 15px; font-size:11px; box-shadow:0 3px 14px #0001; white-space:nowrap; }
.status-legend span { display:flex; align-items:center; gap:7px; }
.dot { display:inline-block; width:11px; height:11px; border-radius:50%; }
.dot.available { background:#51a779; }.dot.reserved { background:#e7bc68; }.dot.sold { background:#d87979; }
.viewer-controls { display:flex; direction:ltr; gap:5px; }
.icon-button { background:#fffffff0; border:1px solid #ffffff60; color:#314b3c; border-radius:6px; width:38px; height:38px; padding:7px; box-shadow:0 3px 14px #0001; display:grid; place-items:center; }
.icon-button:hover { background:#fff; }
.icon-button:disabled { opacity:.45; cursor:default; }
.viewer-footer .building-slider { position:static; transform:none; display:flex; align-items:center; gap:10px; border-radius:6px; background:#fffffff0; width:180px; min-width:80px; padding:0 10px; direction:ltr; }
.viewer-footer .building-slider input { accent-color:var(--accent); min-width:30px; height:34px; }
.viewer-footer #frameCounter { font-size:10px; white-space:nowrap; color:#526858; }
.viewer-zero { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:18px 26px; border-radius:8px; color:var(--accent); background:#fffffff0; box-shadow:0 4px 20px #0001; text-align:center; }
.building-empty { position:absolute; inset:0; display:grid; place-content:center; color:#768176; }
.apartment-panel.side-panel { position:static; top:auto; align-self:stretch; border:0; border-inline-start:1px solid var(--line); border-radius:0; padding:25px 28px 18px; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#ccd5ce transparent; }
.apartment-heading { position:relative; padding-top:36px; }
.apartment-heading > .eyebrow { display:none; }
.apartment-heading > .status-pill { position:absolute; top:0; left:0; display:inline-flex; gap:8px; padding:5px 14px; min-height:27px; font-size:12px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
.apartment-panel .status-sold, .sales-shell .status-sold { color:#a54747; background:#fbe9e7; }
.eyebrow { margin:0 0 6px; font-size:11px; color:#8a928d; }
.apartment-heading h2 { font-size:46px; line-height:1.08; letter-spacing:-1.5px; margin:0 0 10px; font-weight:750; overflow-wrap:anywhere; }
.apartment-subtitle { margin:0; font-size:20px; color:#626b64; }
.apartment-subtitle span { padding:0 5px; }
.apartment-metrics { display:grid; grid-template-columns:repeat(var(--metric-count,2),minmax(0,1fr)); margin:20px 0 16px; padding-top:20px; border-top:1px solid var(--line); text-align:center; }
.apartment-metrics > div { display:flex; flex-direction:column; gap:3px; }
.apartment-metrics > div + div { border-inline-start:1px solid var(--line); }
.apartment-metrics strong { font-size:27px; line-height:1.2; font-weight:700; }
.apartment-metrics small { font-size:19px; font-weight:600; }
.apartment-metrics span { font-size:13px; color:#777f79; }
.apartment-metrics.has-three strong { font-size:22px; }
.apartment-metrics.has-three small { font-size:14px; }
.apartment-metrics.has-three span { font-size:12px; }
.apartment-price { display:flex; align-items:center; justify-content:space-between; margin:0 0 15px; font-size:12px; color:#7d857f; }
.apartment-price strong { font-size:21px; color:var(--accent); }
.apartment-media-tabs { display:flex; flex-wrap:nowrap; gap:0; margin:0 0 14px; border:1px solid var(--line); border-radius:6px; }
.apartment-media-tabs .tab { flex:1; min-width:0; display:flex; justify-content:center; align-items:center; gap:7px; padding:0 7px; border:0; border-radius:0; background:white; color:#46544c; min-height:43px; font-size:12px; white-space:nowrap; }
.apartment-media-tabs .tab + .tab { border-inline-start:1px solid var(--line); }
.apartment-media-tabs .tab:first-child { border-start-start-radius:5px; border-end-start-radius:5px; }
.apartment-media-tabs .tab:last-child { border-start-end-radius:5px; border-end-end-radius:5px; }
.apartment-media-tabs .tab.active { background:var(--brand-bg); color:var(--brand-text); }
.apartment-media-tabs .ui-icon { width:18px; height:18px; }
.apartment-panel .media-box { border:0; border-radius:0; background:#fff; min-height:230px; }
.apartment-panel .plan-controls { padding:4px 0 10px; }
.apartment-panel .plan-controls .btn { min-height:28px; font-size:11px; border-radius:4px; padding:0 10px; }
.apartment-panel .media-box img { max-height:380px; }
.apartment-panel .plan-pdf { height:330px; background:#f8f9f7; }
.apartment-panel .plan-pdf-link { font-size:11px; min-height:30px; border-radius:4px; margin-inline:0; }
.apartment-panel .media-box .empty { font-size:13px; line-height:1.7; padding:30px 10px; }
.apartment-expand { width:100%; display:flex; justify-content:center; align-items:center; gap:8px; padding:4px 0; margin:8px 0 16px; border:0; background:transparent; font-size:14px; min-height:38px; color:var(--accent); }
.apartment-expand span { text-decoration:underline; text-underline-offset:4px; }
.apartment-expand .ui-icon { width:19px; height:19px; }
.apartment-contact { border-top:1px solid var(--line); padding-top:12px; }
.apartment-contact > p { margin:0 0 9px; font-size:14px; font-weight:600; color:#46544c; }
.apartment-contact-actions { display:grid; grid-template-columns:1.25fr 1fr; gap:8px; }
.apartment-contact-actions .btn { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:46px; padding:0 8px; border-radius:7px; font-size:14px; font-weight:600; }
.contact-outline { color:var(--accent); border-color:#8ea99b; }
.contact-outline:hover { background:#f0f6f3; border-color:var(--accent); }
.save-apartment.btn { width:100%; min-height:46px; margin:9px 0 0; display:flex; justify-content:center; align-items:center; gap:10px; color:var(--accent); border:0; background:transparent; border-radius:6px; font-size:17px; }
.save-apartment .ui-icon { width:26px; height:26px; }
.save-apartment.btn.is-saved { background:var(--accent-soft); }
.save-apartment.is-saved .ui-icon { fill:var(--accent); }
.apartment-details { border-bottom:1px solid var(--line); padding:15px 0; font-size:12px; }
.apartment-details summary { color:#697b6d; cursor:pointer; }
.finish-chips { padding-top:14px; }
.apartment-details .chip { font-size:11px; min-height:30px; }
.apartment-details .chip.active { background:var(--brand-bg); border-color:var(--brand-bg); color:var(--brand-text); }
#aptList { display:grid; gap:5px; padding-top:12px; }
.apartment-list-item { display:flex; gap:10px; align-items:center; justify-content:space-between; width:100%; min-height:38px; padding:7px 9px; background:#fff; border:1px solid var(--line); border-radius:5px; font-size:11px; text-align:right; }
.apartment-list-item.active { border-color:var(--accent); background:#f6f9f6; }
.apartment-list-item > span + span { padding:4px 6px; border-radius:4px; font-size:10px; }
.apartment-footnote { text-align:center; color:#a0a6a1; font-size:10px; margin:20px 0 0; }
.inventory-panel { width:100%; overflow:auto; padding:26px; background:#f5f7f3; }
.inventory-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:24px; }
.inventory-heading h2 { font-size:24px; font-weight:600; margin:0; color:#304c3b; }
.inventory-heading > span { font-size:12px; color:#7b887d; }
.inventory-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; }
.inventory-table { min-width:560px; }
.inventory-table th { background:#fff; font-size:11px; color:#8b938d; padding:16px; }
.inventory-table td { padding:19px 16px; font-size:13px; }
.inventory-table tr.selected td { background:#eaf2e9; }
.inventory-table tr:last-child td { border-bottom:0; }
.inventory-table .text-button { font-size:11px; white-space:nowrap; }
.inventory-table .status-pill { font-size:10px; }
.no-apartment { margin-top:30px; line-height:1.7; }
.no-apartment h2 { font-size:23px; font-weight:600; color:var(--accent); }
.expanded-media-dialog .apartment-panel { border:0; padding:24px; display:block; }
.expanded-media-dialog .apartment-heading h2 { font-size:38px; }
.expanded-media-dialog .apartment-metrics { max-width:420px; }
.expanded-media-dialog .apartment-expand { display:none; }
.expanded-media-dialog .apartment-panel .plan-content img { max-height:65vh; }
.expanded-media-dialog .apartment-panel .plan-pdf { height:65vh; }
.expanded-media-dialog .apartment-panel .media-box .carousel-image { max-height:none; }
.expanded-media-dialog .apartment-panel .save-apartment { max-width:420px; margin:14px auto; }
@media (min-width:1700px) { .apartment-heading h2 { font-size:58px; }.apartment-panel.side-panel { padding:30px 34px 20px; }.apartment-metrics strong { font-size:32px; }.apartment-panel .media-box img { max-height:460px; } }
@media (max-width:1250px) { .sales-filterbar { gap:12px 14px; padding:12px 16px 7px; }.compact-filter { gap:7px; }.compact-filter select,.filter-value { min-width:80px; width:85px; }.view-switch { margin-inline-start:0; }.viewer-footer { gap:8px; inset-inline:12px; }.status-legend { gap:9px; padding:11px; font-size:10px; }.viewer-footer .building-slider { width:120px; }.icon-button { width:33px; height:33px; }.project-navigation { gap:20px; } }
@media (max-width:1000px) {
  .sales-shell { height:auto; min-height:100dvh; }
  .public-main.sales-main { grid-template-columns:minmax(0,1fr) 290px; }
  .workspace-stage { min-height:650px; }
  .sales-workspace .viewer-wrap { height:auto; min-height:650px; }
  .apartment-panel.side-panel { padding:20px 20px 16px; overflow:visible; }
  .apartment-heading h2 { font-size:40px; }
  .sales-navigation { justify-content:space-between; }
  
  .viewer-footer { flex-wrap:wrap; }
  .viewer-footer .building-slider { order:3; width:100%; max-width:none; }
}
@media (max-width:760px) {
  .public-header.sales-header { padding:12px 16px; gap:10px; grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr); }
  .sales-header[data-priority="name"] h1 { font-size:21px; }.sales-header[data-priority="logo"] h1 { font-size:17px; }
  .studio-wordmark { font-size:14px; letter-spacing:0; }.sales-header .header-actions { flex-wrap:wrap; gap:8px; }
  .sales-header[data-priority="logo"] .header-project-logo img { max-height:65px; }
  .sales-header .header-developer-logo { max-width:80px; max-height:32px; }
  .sales-navigation { padding:0 16px; flex-wrap:wrap; gap:0 16px; }
  .project-navigation { width:100%; justify-content:center; gap:25px; }
  
  .public-main.sales-main { grid-template-columns:1fr; }
  .sales-filterbar { gap:12px; padding:14px 16px 8px; }
  .compact-filter { font-size:12px; gap:6px; }
  .compact-filter select, .filter-value { width:76px; min-width:76px; min-height:34px; padding:5px 6px; }
  .area-popover { font-size:12px; }.area-popover summary { gap:6px; }.area-popover-body { inset-inline-start:auto; inset-inline-end:0; }
  .availability-filter { font-size:11px; }.view-switch { margin-inline-start:auto; }.view-switch button { min-width:65px; }
  .filter-feedback { padding-inline:16px; }
  .workspace-stage { min-height:0; height:64vh; height:64svh; flex:none; }
  .sales-workspace .viewer-wrap { min-height:0; height:100%; }
  .apartment-panel.side-panel { border-inline-start:0; border-top:1px solid var(--line); padding:24px; }
  .apartment-heading { padding-top:38px; }.apartment-heading h2 { font-size:42px; }.apartment-heading .eyebrow { max-width:65%; }
  .apartment-metrics { margin-top:18px; padding-top:16px; }
  .apartment-panel .media-box img { max-height:450px; }
  .apartment-panel .plan-pdf { height:430px; }
  .viewer-instruction { right:12px; top:12px; font-size:10px; }.viewer-instruction span { display:none; }
  .viewer-footer { bottom:12px; }.status-legend { padding:10px; }.viewer-controls { gap:4px; }.icon-button { width:32px; height:32px; }
  .viewer-footer .building-slider { max-width:200px; margin:auto; height:30px; }.viewer-footer .building-slider input { height:30px; }
  .inventory-panel { padding:20px 16px; }.inventory-heading h2 { font-size:20px; }
  
  
}
@media (prefers-reduced-motion:reduce) { .switch-track,.switch-track::after { transition:none; } }

/* A plus marker previews a new vertex without adding snapping to axes. */
.polygon-insert-hint { fill:#fff; stroke:#176fa5; stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.polygon-insert-plus { fill:none; stroke:#176fa5; stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.expanded-media-dialog .viewer-wrap { flex:1; width:100%; height:100%; min-height:0; aspect-ratio:auto; border-radius:8px; }
.expanded-media-dialog .viewer-wrap.is-zoomed { touch-action:none; }
.expanded-media-dialog #expandBuilding { display:none; }

/* All top-level destinations share one centered navigation row. */
.sales-navigation { justify-content:center; }
.sales-navigation .project-navigation { width:auto; max-width:100%; justify-content:center; flex-wrap:wrap; gap:0 28px; }
.project-navigation .resource-link:hover, .project-nav:hover { color:var(--brand-text); background:rgba(255,255,255,.09); }
.sales-shell[data-mode="gallery"] .sales-main, .sales-shell[data-mode="panorama"] .sales-main { grid-template-columns:minmax(0,1fr); }
.project-panorama-view { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; width:100%; padding:16px 24px; gap:12px; background:#f4f6f2; }
.project-panorama-heading { display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; gap:16px; }
.project-panorama-heading h2 { margin:0; color:var(--accent); font-size:20px; font-weight:600; }
.project-panorama-heading .text-button { font-size:13px; }
.project-panorama-box { display:flex; flex-direction:column; flex:1; min-height:0; border:0; border-radius:10px; overflow:hidden; }
.project-panorama-box .panorama-gallery { display:flex; flex-direction:column; height:100%; min-height:0; }
.project-panorama-box .panorama-stage { position:relative; flex:1; min-height:180px; }
.project-panorama-box .panorama-canvas { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.project-panorama-box .panorama-stage > img { width:100%; height:100%; object-fit:contain; }
.project-panorama-box .panorama-selection { flex:0 0 auto; font-size:12px; }
.project-panorama-box .panorama-thumbs { flex:0 0 auto; padding:10px; }
.project-panorama-box .panorama-thumb { flex-basis:96px; }
.project-panorama-box .panorama-thumb img { height:62px; }
.project-gallery-view { flex:1; min-width:0; width:100%; overflow-y:auto; padding:28px; background:#f4f6f2; }
.project-gallery-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1440px; margin:0 auto 24px; }
.project-gallery-heading h2 { font-size:24px; font-weight:600; color:var(--accent); margin:0; }
.project-gallery-heading .text-button { font-size:13px; }
.project-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; max-width:1440px; margin:0 auto; }
.project-gallery-grid > .empty { grid-column:1/-1; padding:70px 20px; }
.project-gallery-tile { display:block; min-width:0; padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; color:var(--accent); text-align:initial; }
.project-gallery-tile img { width:100%; height:240px; object-fit:contain; background:#e9ece6; }
.project-gallery-tile > span { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; direction:ltr; font-size:12px; }
.project-gallery-tile:hover { border-color:var(--accent); }
.project-gallery-admin-item { min-width:0; }
.project-gallery-admin-item .thumb { margin:0 0 6px; }
.project-gallery-admin-item .btn { width:100%; min-height:32px; font-size:12px; }
.project-gallery-lightbox { flex:1; width:100%; min-height:0; border:0; background:transparent; }
.project-gallery-lightbox .apartment-carousel { display:flex; flex-direction:column; min-height:0; height:100%; padding:0; }
.project-gallery-lightbox .carousel-image { height:0; flex:1; min-height:0; max-height:none; object-fit:contain; }
.project-gallery-lightbox .carousel-controls, .project-gallery-lightbox .carousel-slider { flex-shrink:0; }
@media(max-width:760px) {
  .sales-navigation .project-navigation { gap:0 16px; }
  .project-navigation .resource-link, .project-nav { font-size:16px; }
  .project-gallery-view { padding:22px 16px; }
  .project-gallery-heading { margin-bottom:18px; }.project-gallery-heading h2 { font-size:21px; }
  .project-gallery-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  .project-gallery-tile img { height:180px; }
  .sales-shell[data-mode="gallery"] .workspace-stage { height:auto; min-height:60svh; }
  .sales-shell[data-mode="panorama"] .workspace-stage { min-height:400px; }
  .project-panorama-view { padding:12px; gap:8px; }
  .project-panorama-heading h2 { font-size:18px; }
  .project-panorama-box .panorama-thumbs { gap:8px; padding:8px; }
  .project-panorama-box .panorama-thumb { flex-basis:80px; }
  .project-panorama-box .panorama-thumb img { height:52px; }
}

/* Expanded apartment: compact details and controls, with the remaining height for media. */
.apartment-view-dialog { width:98vw; max-width:none; height:97vh; height:97dvh; max-height:97dvh; padding:12px 18px; }
.apartment-view-dialog[open] { gap:8px; overflow:hidden; }
.apartment-view-dialog .expanded-media-header { min-height:34px; }
.apartment-view-dialog .expanded-media-header > strong { color:var(--muted); font-size:13px; font-weight:500; }
.apartment-view-dialog .expanded-media-header .btn { min-height:32px; padding:0 12px; font-size:13px; }
.apartment-view-dialog .apartment-panel { display:flex; flex-direction:column; gap:10px; padding:0; border:0; min-height:0; overflow:hidden; }
.apartment-view-dialog .apartment-summary { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding:4px 0 10px; border-bottom:1px solid var(--line); }
.apartment-view-dialog .apartment-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:0; }
.apartment-view-dialog .apartment-heading > .eyebrow { display:none; }
.apartment-view-dialog .apartment-heading h2 { margin:0; font-size:23px; letter-spacing:0; line-height:1.3; order:0; }
.apartment-view-dialog .apartment-subtitle { margin:0; font-size:15px; order:1; }
.apartment-view-dialog .apartment-heading > .status-pill { position:static; order:2; padding:3px 10px; min-height:24px; font-size:11px; }
.apartment-view-dialog .apartment-metrics { display:flex; gap:16px; max-width:none; margin:0; padding:0 20px 0 0; border-top:0; border-inline-start:1px solid var(--line); }
.apartment-view-dialog .apartment-metrics > div { flex-direction:row; align-items:baseline; gap:6px; }
.apartment-view-dialog .apartment-metrics > div + div { border:0; }
.apartment-view-dialog .apartment-metrics strong { font-size:19px; }
.apartment-view-dialog .apartment-metrics small { font-size:13px; }
.apartment-view-dialog .apartment-metrics span { font-size:12px; }
.apartment-view-dialog .apartment-price { gap:10px; margin:0; margin-inline-start:auto; font-size:12px; }
.apartment-view-dialog .apartment-price strong { font-size:18px; }
.apartment-view-dialog .apartment-media-tabs { flex:0 0 auto; margin:0; }
.apartment-view-dialog .apartment-media-tabs .tab { min-height:38px; font-size:14px; }
.apartment-view-dialog #sidebarMediaHolder { flex:1; display:flex; min-height:0; width:100%; }
.apartment-view-dialog #aptMedia { display:flex; align-items:stretch; flex:1; width:100%; height:100%; min-height:0; border-radius:8px; background:#f6f7f4; }
.apartment-view-dialog #aptMedia > .empty { display:grid; place-content:center; width:100%; }
.apartment-panel #aptMedia.is-empty { background:#ededed; border-radius:8px; }
.apartment-panel #aptMedia.is-empty > .empty { color:#666; }
.apartment-view-dialog .plan-viewer { display:flex; flex-direction:column; height:100%; min-height:0; }
.apartment-view-dialog .plan-controls { flex:0 0 auto; padding:4px 8px 6px; }
.apartment-view-dialog .plan-content { display:flex; flex-direction:column; flex:1; min-height:0; }
.apartment-view-dialog .apartment-panel .plan-content img { flex:1; width:100%; height:100%; min-height:0; max-height:none; object-fit:contain; }
.apartment-view-dialog .apartment-panel .plan-pdf { flex:1; width:100%; height:100%; min-height:0; }
.apartment-view-dialog .plan-pdf-link { flex:0 0 auto; align-self:center; margin:6px 0 0; }
.apartment-view-dialog .apartment-carousel { display:flex; flex-direction:column; height:100%; min-height:0; padding:0; }
.apartment-view-dialog .apartment-panel .media-box .carousel-image { flex:1; height:0; min-height:0; max-height:none; object-fit:contain; }
.apartment-view-dialog .carousel-controls { flex:0 0 auto; margin:6px 8px 0; }
.apartment-view-dialog .carousel-controls .btn { min-height:32px; }
.apartment-view-dialog .carousel-slider { flex:0 0 auto; margin:0; min-height:28px; }
.apartment-view-dialog .panorama-gallery { display:flex; flex-direction:column; height:100%; min-height:0; }
.apartment-view-dialog .panorama-stage { flex:1; min-height:0; position:relative; }
.apartment-view-dialog .panorama-canvas { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.apartment-view-dialog .panorama-selection { flex:0 0 auto; padding-top:6px; font-size:11px; }
.apartment-view-dialog .panorama-thumbs { flex:0 0 auto; padding:7px 10px; gap:8px; }
.apartment-view-dialog .panorama-thumb { flex-basis:84px; }
.apartment-view-dialog .media-box .panorama-thumb img { height:54px; }
.apartment-view-dialog .apartment-secondary { position:relative; flex:0 0 auto; display:flex; align-items:center; gap:18px; padding-top:4px; }
.apartment-view-dialog .apartment-panel .save-apartment { flex:0 0 auto; width:auto; max-width:none; margin:0; min-height:34px; padding:0 12px; font-size:12px; }
.apartment-view-dialog .apartment-details { position:static; border:0; padding:0; font-size:12px; }
.apartment-view-dialog .apartment-details summary { padding:8px 0; }
.apartment-view-dialog .apartment-details > .chips, .apartment-view-dialog .apartment-details > #aptList { position:absolute; z-index:2; bottom:100%; inset-inline-end:0; width:280px; max-width:100%; max-height:50dvh; overflow:auto; margin:0 0 8px; padding:14px; border:1px solid var(--line); border-radius:8px; background:white; box-shadow:0 8px 30px #0002; }
.apartment-view-dialog .apartment-footnote { margin:0; margin-inline-start:auto; font-size:10px; }
.apartment-view-dialog .apartment-contact { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:8px; }
.apartment-view-dialog .apartment-contact > p { margin:0; font-size:12px; }
.apartment-view-dialog .apartment-contact-actions { display:flex; gap:8px; }
.apartment-view-dialog .apartment-contact-actions .btn { min-height:34px; padding:0 12px; font-size:12px; }
.apartment-view-dialog .apartment-contact-actions .ui-icon { width:17px; height:17px; }
@media (max-width:760px) {
  .apartment-view-dialog { width:100vw; max-width:100vw; height:100vh; height:100dvh; max-height:100dvh; margin:0; padding:8px 10px; border:0; border-radius:0; }
  .apartment-view-dialog[open], .apartment-view-dialog .apartment-panel { gap:6px; }
  .apartment-view-dialog .apartment-summary { gap:6px 14px; padding-bottom:6px; }
  .apartment-view-dialog .apartment-heading { gap:8px; }
  .apartment-view-dialog .apartment-heading h2 { font-size:19px; }
  .apartment-view-dialog .apartment-subtitle { font-size:13px; }
  .apartment-view-dialog .apartment-metrics { gap:12px; padding:0; border:0; }
  .apartment-view-dialog .apartment-metrics strong { font-size:17px; }
  .apartment-view-dialog .apartment-metrics span { font-size:11px; }
  .apartment-view-dialog .apartment-price strong { font-size:16px; }
  .apartment-view-dialog .apartment-price > span { display:none; }
  .apartment-view-dialog .apartment-secondary { gap:10px; }
  .apartment-view-dialog .apartment-panel .save-apartment { padding:0 7px; font-size:11px; gap:5px; }
  .apartment-view-dialog .save-apartment .ui-icon { width:17px; height:17px; }
  .apartment-view-dialog .apartment-details { font-size:11px; }
  .apartment-view-dialog .apartment-footnote { display:none; }
  .apartment-view-dialog .panorama-thumb { flex-basis:70px; }
  .apartment-view-dialog .media-box .panorama-thumb img { height:42px; }
  .apartment-view-dialog .apartment-contact { gap:6px; padding-top:5px; }
  .apartment-view-dialog .apartment-contact > p { font-size:11px; }
  .apartment-view-dialog .apartment-contact-actions { gap:5px; }
  .apartment-view-dialog .apartment-contact-actions .btn { min-height:34px; padding:0 8px; font-size:11px; }
}

/* Contact settings and the customer-completed WhatsApp / email handoff. */
.contact-settings { scroll-margin-top:85px; }
.project-media-dialog.contact-dialog { width:calc(100vw - 28px); max-width:540px; height:auto; max-height:92vh; max-height:92dvh; margin:auto; padding:22px; border-radius:14px; background:white; overflow:hidden; }
.contact-dialog .expanded-media-header { flex:0 0 auto; padding-bottom:12px; border-bottom:1px solid var(--line); }
.contact-dialog .expanded-media-header .btn { min-height:36px; font-size:13px; }
.contact-dialog .project-media-body { flex:1 1 auto; overflow-y:auto; padding:4px; }
.contact-dialog :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.contact-company h2 { margin:0 0 8px; font-size:23px; overflow-wrap:anywhere; }
.contact-company p { margin:0 0 12px; color:#626b64; font-size:14px; line-height:1.6; }
.contact-methods { display:grid; gap:10px; }
.contact-method.btn { display:flex; justify-content:center; align-items:center; gap:10px; padding:12px; text-decoration:none; overflow-wrap:anywhere; }
.contact-method > span { min-width:0; }
.contact-address, .contact-notes { margin:8px 0; color:#626b64; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.contact-address { display:flex; align-items:flex-start; gap:8px; }
.contact-notes { white-space:pre-wrap; }
.lead-form .field { margin-bottom:14px; }
.lead-help { color:#626b64; font-size:13px; line-height:1.6; }
.form-error { color:var(--danger); font-size:13px; }
.form-error:empty { display:none; }
.lead-submit { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; }
#leadNextStep:not(:empty) { margin-top:14px; padding:12px; border-radius:7px; background:var(--accent-soft); color:var(--accent); font-size:13px; line-height:1.7; }
#leadNextStep p { margin:0 0 5px; }
.contact-reopen { color:var(--accent); text-underline-offset:3px; }
@media (max-width:1250px) {
  .apartment-media-tabs .tab { gap:4px; padding:0 4px; font-size:11px; }
  .apartment-media-tabs .ui-icon { width:16px; height:16px; }
}
@media (max-width:540px) {
  .contact-dialog .lead-form .form-row { grid-template-columns:1fr; gap:0; }
  .project-media-dialog.contact-dialog { padding:16px; }
}

/* Project branding preview is isolated from unsaved Admin settings. */
.theme-color-control { display:flex; gap:12px; align-items:center; }
.theme-color-control input[type="color"] { flex:0 0 64px; width:64px; height:46px; padding:4px; cursor:pointer; }
.theme-color-control input[type="text"] { min-width:0; max-width:180px; font-family:ui-monospace,monospace; }
.theme-preview { margin:10px 0 18px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.theme-preview-menu { display:flex; justify-content:center; flex-wrap:wrap; gap:0 24px; padding:0 16px; background:var(--brand-bg); color:var(--brand-text); }
.theme-preview-menu span { padding:14px 0; border-bottom:2px solid transparent; }
.theme-preview-menu .active { border-color:var(--brand-text); font-weight:700; }
.theme-preview-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:18px; }
.theme-preview-button { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 20px; border-radius:8px; background:var(--brand-bg); color:var(--brand-text); }
@media(max-width:540px) { .theme-settings .form-row { grid-template-columns:1fr; }.theme-preview-menu { gap:0 18px; } }

/* A project can open directly to one building or to a complex overview. */
.project-structure { margin-bottom:18px; }
.building-admin-controls { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.building-add { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0; }
.building-add input, .building-context select { min-height:40px; padding:8px 12px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--text); }
.building-add input { flex:1; min-width:160px; max-width:300px; }
.complex-image-settings { margin-top:18px; }
.complex-image-settings summary { cursor:pointer; font-weight:600; padding:12px 0; }
.complex-image-settings .field { margin-top:14px; }
.building-edit-context { margin:18px 0 0; padding:14px; background:#f0f2ef; border-radius:8px; line-height:1.7; }
.building-context { display:flex; flex:0 0 auto; align-items:center; flex-wrap:wrap; gap:10px 18px; padding:10px 24px; border-bottom:1px solid var(--line); background:#fff; font-size:14px; }
.building-context .btn { min-height:36px; font-size:13px; }
.building-context label { margin-inline-start:auto; color:var(--muted); }
.building-context select { min-width:140px; max-width:240px; }
.sales-shell[data-mode="complex"] { height:100vh; height:100dvh; min-height:360px; }
.sales-shell[data-mode="complex"] .sales-main { grid-template-columns:minmax(0,1fr); }
.sales-shell[data-mode="complex"] .workspace-stage { height:auto; min-height:0; flex:1; }
.complex-view { position:relative; display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; overflow:hidden; background:#e7e9e5; }
/* Floating controls leave the entire available viewport to the contain-fit image. */
.complex-heading { position:absolute; z-index:3; inset:12px 16px auto; display:flex; align-items:center; justify-content:space-between; gap:12px; pointer-events:none; }
.complex-heading h2 { margin:0; padding:7px 10px; border-radius:6px; background:#fffffff0; color:#46524a; font-size:13px; line-height:1.4; font-weight:500; }
.complex-heading select { pointer-events:auto; width:230px; max-width:52%; min-height:34px; padding:6px 10px; border:1px solid #d8ddd9; border-radius:6px; background:#fffffff0; color:#303832; font-size:13px; text-overflow:ellipsis; cursor:pointer; box-shadow:0 2px 10px #172b2010; }
.complex-heading select:disabled { color:var(--muted); cursor:default; }
.complex-overview { position:relative; flex:1; min-height:0; overflow:hidden; background:#e7e9e5; }
.complex-overview > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.complex-overview > .empty { position:absolute; inset:0; display:grid; place-content:center; padding:64px 24px; font-size:14px; }
.complex-building-hotspot { fill:#d9dde0; fill-opacity:0; stroke:none; outline:none; pointer-events:all; cursor:pointer; }
.complex-building-hotspot.is-hovered { fill-opacity:.35; }
.complex-building-label { position:absolute; z-index:2; top:56px; inset-inline-start:16px; max-width:calc(100% - 32px); padding:6px 10px; border-radius:5px; background:#fffffff0; color:#303832; font-size:13px; pointer-events:none; }
.complex-image-status { position:absolute; inset:0; display:grid; place-content:center; padding:24px; text-align:center; color:var(--muted); pointer-events:none; }
.complex-image-navigation { position:absolute; z-index:3; bottom:max(10px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:center; width:max-content; max-width:calc(100% - 24px); min-width:0; padding:3px 5px; border:1px solid #ffffff60; border-radius:7px; background:rgba(255,255,255,.7); box-shadow:0 2px 10px #172b2010; }
.complex-image-navigation:hover, .complex-image-navigation:focus-within { background:rgba(255,255,255,.88); }
.complex-image-controls { display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:4px; }
.complex-image-controls .btn { width:26px; min-width:26px; min-height:26px; padding:0; border:0; border-radius:4px; background:transparent; color:#303832; font-size:14px; }
.complex-image-controls .btn:hover:not(:disabled) { background:#ffffff70; }
.complex-image-controls input { width:clamp(56px,8vw,100px); margin:0; accent-color:var(--brand-bg); }
.complex-image-controls > span { min-width:28px; font-size:10px; color:#39443c; white-space:nowrap; text-align:center; }
@media(max-width:760px) {
  .complex-heading { inset:8px 10px auto; gap:6px; }
  .complex-heading h2 { padding:6px 8px; font-size:11px; }
  .complex-heading select { width:180px; font-size:12px; }
  .complex-image-navigation { max-width:calc(100% - 16px); }
  .complex-image-controls input { width:56px; }
  .complex-building-label { inset-inline-start:10px; top:50px; }
  .building-context { padding:10px 16px; gap:8px 12px; }
  .building-context select { max-width:160px; min-width:100px; }
}
@media(pointer:coarse) {
  .complex-heading select, .complex-image-controls .btn { min-height:44px; }
  .complex-image-controls .btn { width:36px; min-width:36px; }
  .complex-image-controls input { height:44px; }
  .complex-building-label { top:62px; }
}

/* Mirror the interface, while preserving media and image-space coordinates. */
html[lang="en"] .public-header.sales-header { grid-template-areas:"title logo actions"; }
html[lang="en"] .branded-header .public-title { direction:ltr; text-align:left; }
html[lang="en"] .sales-header .header-actions { justify-content:flex-end; }
html[lang="en"] .public-main.sales-main { direction:ltr; }
html[lang="en"] .inventory-table th, html[lang="en"] .inventory-table td,
html[lang="en"] .apartment-list-item { text-align:start; }
html[lang="en"] .apartment-heading > .status-pill { left:auto; right:0; }
html[lang="en"] .viewer-instruction { right:auto; left:20px; }
html[lang="en"] .switch-track::after { right:auto; left:3px; }
html[lang="en"] .availability-filter input:checked + .switch-track::after { transform:translateX(15px); }
html[lang="en"] .book-spread { direction:ltr; }
html[lang="en"] .apartment-expand .ui-icon { transform:scaleX(-1); }
@media(max-width:1100px) {
  .sales-header .header-actions { flex-wrap:wrap; gap:6px 10px; }
}
@media(max-width:760px) {
  html[lang="en"] .viewer-instruction { left:12px; }
  .language-switch button { padding:4px 6px; }
  html[lang="en"] .project-nav, html[lang="en"] .project-navigation .resource-link { font-size:14px; }
}

html[lang="en"] .apartment-view-dialog .apartment-metrics { padding:0 0 0 20px; }