.floorplan-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
}
.floorplan-card h3 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.35; }
.floorplan-card > p { margin: 0 0 20px; color: var(--muted); font-size: .88rem; }
.floorplan-map { position: relative; aspect-ratio: 6 / 5; isolation: isolate; }
.floorplan-map > img { display: block; width: 100%; height: 100%; }
.plan-room {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 5px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.plan-room:hover, .plan-room:focus-visible, .plan-room[aria-expanded="true"] {
  background: rgba(67,140,130,.12);
}
.plan-room:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.plan-room-label {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid #9bb6a7;
  border-radius: 10px;
  background: rgba(255,253,248,.97);
  font-size: clamp(.68rem, 1.05vw, .85rem);
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 3px 8px rgba(24,61,53,.07);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.plan-room-label::after { content: '+'; font-size: 1.1rem; line-height: 1; font-weight: 400; }
.plan-room:hover .plan-room-label, .plan-room:focus-visible .plan-room-label {
  border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(24,61,53,.15);
}
.plan-room--living { left: 4%; top: 45.2%; width: 39.333%; height: 50%; }
.plan-room--bedroom { left: 62.667%; top: 4.8%; width: 33.333%; height: 50.4%; }
.plan-room--kitchen { left: 4%; top: 4.8%; width: 39.333%; height: 35.6%; }
.plan-room--bathroom { left: 62.667%; top: 60%; width: 33.333%; height: 35.2%; }
.plan-room--hall { left: 53%; top: 4.8%; width: 11.333%; height: 90.4%; transform: translateX(-50%); align-items: flex-end; padding-bottom: 12%; }
.plan-room--hall .plan-room-label { flex-direction: column; padding: 7px 5px; font-size: .68rem; }
.floorplan-caption { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0 !important; font-size: .75rem !important; }
.floorplan-caption::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.room-detail-dialog {
  width: min(620px, calc(100% - 28px));
  max-height: min(86dvh, 760px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(24,61,53,.25);
}
.room-detail-dialog[open] { animation: room-detail-zoom .26s cubic-bezier(.2,.8,.2,1) both; }
.room-detail-dialog::backdrop { background: rgba(13,35,28,.48); backdrop-filter: blur(4px); }
.room-detail-heading { position: relative; background: var(--aqua); padding: 30px 68px 25px 30px; }
.room-detail-heading h2 { font-size: clamp(1.55rem, 4vw, 2.2rem); letter-spacing: -.035em; line-height: 1.18; margin: 10px 0 0; }
.room-detail-close { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #9bb6a7; border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.room-detail-close svg { width: 18px; height: 18px; }
.room-detail-body { padding: 26px 30px 30px; }
.room-detail-list { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0 0 28px; }
.room-detail-list li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; font-size: .97rem; }
.room-detail-list li::before { content: '✓'; display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: var(--aqua); color: var(--ink); font-size: .85rem; }
.room-detail-back { width: 100%; }
@keyframes room-detail-zoom { from { opacity: 0; transform: translateY(14px) scale(.88); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  .plan-room-label { font-size: .85rem; }
}
@media (max-width: 620px) {
  .floorplan-card { padding: 16px 10px; border-radius: 22px; }
  .floorplan-card h3, .floorplan-card > p { padding-left: 6px; padding-right: 6px; }
  .floorplan-card h3 { font-size: 1.1rem; }
  .floorplan-card > p { font-size: .8rem; }
  .plan-room { padding: 3px; }
  .plan-room-label { padding: 5px 6px; gap: 4px; border-radius: 7px; font-size: .66rem; }
  .plan-room-label::after { font-size: .9rem; }
  .plan-room--hall { padding-bottom: 12%; }
  .plan-room--hall .plan-room-label { font-size: .59rem; padding: 5px 3px; }
  .floorplan-caption { font-size: .68rem !important; }
  .room-detail-heading { padding: 26px 64px 24px 24px; }
  .room-detail-body { padding: 24px; }
  .room-detail-list { gap: 13px; }
  .room-detail-list li { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .room-detail-dialog[open] { animation: none; }
  .plan-room, .plan-room-label { transition: none; }
}