.page-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.map-controls { display:flex; align-items:center; gap:8px; padding-top:6px; }
.map-actions { display:flex; align-items:center; gap:10px; }
.map-controls .btn { min-width:42px; padding:9px 12px; }
.zoom-readout { color:#61756c; font-size:13px; min-width:42px; text-align:center; }
.map-viewport { overflow:hidden; background:#e9efeb; border-radius:0 0 13px 13px; min-height:420px; position:relative; touch-action:none; }
.map-stage { width:100%; aspect-ratio:5 / 3; position:relative; transform-origin:center center; will-change:transform; }
.map-stage > img, .map-stage > svg { position:absolute; inset:0; display:block; width:100%; height:100%; }
.map-stage > img { object-fit:fill; user-select:none; -webkit-user-drag:none; }
.trace-layer { cursor:crosshair; }
.map-viewport.panning .trace-layer { cursor:grabbing; }
.map-help { padding:11px 16px; color:#587065; font-size:13px; border-top:1px solid #e4ece7; }
.map-empty { padding:28px; color:#60746b; }
.map-plot { fill:rgba(29, 135, 83, .28); stroke:#137248; stroke-width:3; vector-effect:non-scaling-stroke; cursor:pointer; }
.map-plot.discussion { fill:rgba(222, 156, 45, .31); stroke:#ad7207; }
.map-plot.booked { fill:rgba(56, 122, 183, .30); stroke:#286d9e; }
.map-plot.sold, .map-plot.blocked { fill:rgba(202, 77, 68, .30); stroke:#a83933; }
.map-plot:hover { fill-opacity:.52; stroke-width:4; }
@media (max-width:700px) { .page-title-row { display:block; } .map-actions { flex-wrap:wrap; } .map-viewport { min-height:260px; } .map-controls { gap:5px; padding-top:0; margin:10px 0; } }