.apartment-viewer { position: relative; width: 100%; aspect-ratio: 1080 / 608; overflow: hidden; touch-action: pan-y; background: #eef0ec; }
.apartment-viewer__layer { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.apartment-viewer__image, .apartment-viewer__overlay { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.apartment-viewer__overlay { fill: rgba(234, 226, 16, .35); stroke: rgba(180, 151, 17, .6); stroke-width: 1; }
.viewer-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: #f4f5f1; color: #374151; z-index: 3; }
.finder-stage { position: relative; width: 100%; aspect-ratio: 1080 / 608; touch-action: pan-y; overflow: hidden; background: #e8ece5; }
.finder-stage > img, .finder-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.finder-stage > svg { pointer-events: none; }
.finder-stage { cursor: grab; }
.finder-stage.is-dragging { cursor: grabbing; }
.finder-motion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.finder-motion[hidden] { display: none; }
.finder-flat { --flat-fill: rgba(100, 116, 139, .48); --flat-stroke: #475569; --flat-hover: rgba(100, 116, 139, .62); --flat-active: rgba(100, 116, 139, .72); cursor: pointer; outline: none; }
.finder-flat[data-status="1"] { --flat-fill: rgba(198, 177, 129, .28); --flat-stroke: rgba(128, 112, 76, .6); --flat-hover: rgba(198, 177, 129, .46); --flat-active: rgba(198, 177, 129, .6); }
.finder-flat[data-status="2"] { --flat-fill: rgba(137, 125, 108, .34); --flat-stroke: rgba(100, 89, 74, .65); --flat-hover: rgba(137, 125, 108, .5); --flat-active: rgba(137, 125, 108, .64); }
.finder-flat[data-status="3"] { --flat-fill: rgba(177, 105, 92, .22); --flat-stroke: rgba(148, 94, 83, .48); --flat-hover: rgba(177, 105, 92, .38); --flat-active: rgba(177, 105, 92, .5); }
.finder-flat :is(polygon, polyline, path, rect, circle, ellipse, line) { pointer-events: visiblePainted; fill: var(--flat-fill); stroke: var(--flat-stroke); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .18s ease, stroke .18s ease, stroke-width .18s ease, filter .18s ease; }
@media (hover: hover) and (pointer: fine) {
    .finder-flat:hover :is(polygon, polyline, path, rect, circle, ellipse, line) { fill: var(--flat-hover); stroke: #f7edda; stroke-width: 2.5; filter: drop-shadow(0 0 3px rgba(70, 55, 33, .3)); }
    .finder-flat:hover .finder-sold-label { fill-opacity: 1; }
}
.finder-flat:is(:active, .is-active) :is(polygon, polyline, path, rect, circle, ellipse, line) { fill: var(--flat-active); stroke: #fff8e8; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(87, 65, 32, .4)); }
.finder-flat:focus-visible :is(polygon, polyline, path, rect, circle, ellipse, line) { stroke: #fff8e8; stroke-width: 3; stroke-dasharray: 5 3; }
.finder-flat:focus-visible:not(.is-active) :is(polygon, polyline, path, rect, circle, ellipse, line) { fill: var(--flat-hover); }
.finder-flat:is(.is-active, :focus-visible) .finder-sold-label { fill-opacity: 1; }
.finder-sold-label { fill: #fff8f0; fill-opacity: .72; stroke: rgba(91, 60, 51, .22); stroke-width: 2; paint-order: stroke; font-family: Arial, sans-serif; font-weight: 600; letter-spacing: .12em; text-anchor: middle; dominant-baseline: central; pointer-events: none; user-select: none; transition: fill-opacity .18s ease; }
.finder-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 12px 20px; background: rgba(255,255,255,.96); color: #1f2937; font-size: 14px; }
.finder-legend span { display: inline-flex; align-items: center; gap: 7px; }
.finder-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.finder-dot--available { background: #c6b181; } .finder-dot--reserved { background: #897d6c; } .finder-dot--sold { background: #cdaba2; }
.finder-status { display: inline-block; border-radius: 5px; padding: 3px 9px; background: #e2e8f0; color: #334155; font-weight: 600; }
.finder-status[data-status="1"] { background: #f2ecde; color: #75623a; } .finder-status[data-status="2"] { background: #eeeae4; color: #685c4b; } .finder-status[data-status="3"] { background: #f3e6e1; color: #8b5e52; }
.finder-navigation { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 12px; }
.finder-navigation button { padding: 8px 18px; border-radius: 999px; background: white; color: #1f2937; box-shadow: 0 1px 5px #0002; }
.finder-navigation button:disabled { opacity: .4; cursor: default; }
.finder-navigation button:focus-visible, .apartment-viewer:focus-visible { outline: 3px solid #0369a1; outline-offset: 2px; }
.finder-hint { text-align: center; padding: 6px 12px; color: #4b5563; font-size: 13px; }
.finder-home { display: block; padding: 12px 16px; background: white; color: #1f2937; font-weight: 600; }
@media (min-width: 1024px) { .finder-home { display: none; } }
@media (prefers-reduced-motion: reduce) { .finder-flat * { transition: none !important; } }