/* ROUND Style FIT — reference-photo style reconstruction for the 3D home model */
#mapView .rx-fit-layer.show {
  grid-template-rows: 76px 52px minmax(0,1fr) !important;
  background: #080909 !important;
}

#mapView .rx-style-fit-head { background: rgba(10,11,11,.96); }
#mapView .rx-style-fit-head h2 { margin-top: 5px; font: 400 27px/1 Georgia,"Times New Roman",serif; }

#mapView .rx-fit-demo-badge {
  display: grid;
  place-items: center;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(215,184,121,.22);
  border-radius: 11px;
  background: rgba(215,184,121,.055);
  color: #a9946d;
  font-size: 8px;
  letter-spacing: .08em;
}

#mapView .rx-style-fit-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 286px minmax(0,1fr) 300px;
  gap: 11px;
  padding: 11px;
}

#mapView .rx-style-reference-panel,
#mapView .rx-style-analysis-panel,
#mapView .rx-style-fit-stage {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 19px;
  background: rgba(255,255,255,.024);
}

#mapView .rx-style-reference-panel,
#mapView .rx-style-analysis-panel { padding: 17px; overflow: auto; }
#mapView .rx-style-reference-panel h3,
#mapView .rx-style-analysis-panel h3 { margin: 7px 0 0; color: #e5dfd4; font: 400 22px/1.08 Georgia,"Times New Roman",serif; }
#mapView .rx-style-reference-panel > p,
#mapView .rx-style-analysis-panel > p { margin: 8px 0 0; color: #7e7971; font-size: 9px; line-height: 1.55; }

#mapView .rx-style-reference-list { display: grid; gap: 9px; margin-top: 16px; }
#mapView .rx-style-reference {
  position: relative;
  min-height: 86px;
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  align-items: center;
  gap: 11px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  color: #d6d0c6;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
#mapView .rx-style-reference > img { width: 96px; height: 70px; border-radius: 10px; object-fit: cover; filter: brightness(.82) saturate(.86); }
#mapView .rx-style-reference > span { min-width: 0; display: grid; gap: 4px; }
#mapView .rx-style-reference small { color: #77736c; font-size: 7px; }
#mapView .rx-style-reference b { color: #d9d2c7; font-size: 11px; font-weight: 560; }
#mapView .rx-style-reference em { overflow: hidden; color: #858078; font-size: 7px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
#mapView .rx-style-reference > i { position: absolute; top: 8px; right: 9px; color: #605d58; font: normal 7px/1 Arial,sans-serif; }
#mapView .rx-style-reference.active { border-color: rgba(215,184,121,.50); background: rgba(215,184,121,.075); box-shadow: inset 0 0 28px rgba(215,184,121,.025); }
#mapView .rx-style-reference.active b,
#mapView .rx-style-reference.active > i { color: #e3c98f; }

#mapView .rx-style-fit-note {
  display: grid;
  grid-template-columns: 7px 1fr;
  gap: 9px;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 13px;
  background: rgba(255,255,255,.018);
  color: #716d67;
  font-size: 8px;
  line-height: 1.5;
}
#mapView .rx-style-fit-note > i { width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; background: #d1ae6d; box-shadow: 0 0 10px rgba(209,174,109,.3); }
#mapView .rx-style-fit-note b { display: block; margin-bottom: 3px; color: #a39d93; font-size: 8px; font-weight: 570; }

#mapView .rx-style-fit-stage { display: grid; grid-template-rows: 56px minmax(0,1fr) 46px; overflow: hidden; background: #0a0b0b; }
#mapView .rx-style-stage-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
#mapView .rx-style-stage-toolbar > div:first-child { display: grid; gap: 4px; }
#mapView .rx-style-stage-toolbar small { color: #706d67; font-size: 7px; letter-spacing: .09em; }
#mapView .rx-style-stage-toolbar b { color: #d8d2c8; font-size: 10px; font-weight: 560; }
#mapView .rx-style-view-modes { display: flex; gap: 5px; padding: 4px; border: 1px solid rgba(255,255,255,.075); border-radius: 11px; background: rgba(255,255,255,.025); }
#mapView .rx-style-view-modes button { min-width: 64px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #77736d; font-size: 8px; cursor: pointer; }
#mapView .rx-style-view-modes button.active { background: rgba(215,184,121,.12); color: #e0c689; box-shadow: inset 0 0 0 1px rgba(215,184,121,.22); }

#mapView .rx-style-viewport {
  --fit-reveal: 50%;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #080909;
  isolation: isolate;
}
#mapView .rx-style-viewport::after { content:""; position:absolute; z-index:8; inset:0; background:radial-gradient(ellipse at 50% 52%,transparent 42%,rgba(4,5,5,.36) 100%); pointer-events:none; }
#mapView .rx-style-base,
#mapView .rx-style-scope,
#mapView .rx-style-scope > img { position: absolute; inset: 0; width: 100%; height: 100%; }
#mapView .rx-style-base,
#mapView .rx-style-scope > img { object-fit: cover; object-position: center; }
#mapView .rx-style-base { z-index: 1; filter: brightness(.82) saturate(.86); }
#mapView .rx-style-scope { z-index: 2; opacity: 1; transition: clip-path .35s ease,opacity .28s ease; }
#mapView .rx-style-scope > img { filter: brightness(.84) saturate(.9); transition: clip-path .15s linear; }
#mapView .rx-style-viewport[data-fit-view-state="original"] .rx-style-scope { opacity: 0; }
#mapView .rx-style-viewport[data-fit-view-state="split"] .rx-style-scope > img { clip-path: inset(0 calc(100% - var(--fit-reveal)) 0 0); }

#mapView .rx-style-split-line { display: none; position: absolute; z-index: 12; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(242,220,174,.78); box-shadow: 0 0 18px rgba(215,184,121,.35); pointer-events: none; }
#mapView .rx-style-viewport[data-fit-view-state="split"] .rx-style-split-line { display: block; }
#mapView .rx-style-split-line > i { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border: 1px solid rgba(230,205,157,.55); border-radius: 50%; background: rgba(10,11,11,.82); transform: translate(-50%,-50%); }
#mapView .rx-style-split-line > i::before,
#mapView .rx-style-split-line > i::after { content:""; position:absolute; top:50%; width:6px; height:6px; border-top:1px solid #d8bc83; border-left:1px solid #d8bc83; }
#mapView .rx-style-split-line > i::before { left:7px; transform:translateY(-50%) rotate(-45deg); }
#mapView .rx-style-split-line > i::after { right:7px; transform:translateY(-50%) rotate(135deg); }
#mapView .rx-style-split-line > span,
#mapView .rx-style-split-line > em { position:absolute; top:14px; padding:6px 8px; border-radius:8px; background:rgba(9,10,10,.72); color:#8e8981; font-size:7px; font-style:normal; white-space:nowrap; }
#mapView .rx-style-split-line > span { right:10px; }
#mapView .rx-style-split-line > em { left:10px; color:#d2b77f; }

#mapView .rx-style-stage-label { position: absolute; z-index: 14; left: 15px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(8,9,9,.72); backdrop-filter: blur(14px); }
#mapView .rx-style-stage-label span { color: #8f8a82; font-size: 8px; }
#mapView .rx-style-stage-label b { color: #e1c98f; font-size: 9px; font-weight: 560; }

#mapView .rx-style-room-hotspots { position: absolute; z-index: 10; inset: 0; pointer-events: none; }
#mapView .rx-style-room-hotspots button { position:absolute; border:1px solid transparent; border-radius:20px; background:transparent; opacity:0; pointer-events:none; cursor:pointer; }
#mapView .rx-style-viewport.room-scope .rx-style-room-hotspots button { opacity:1; pointer-events:auto; }
#mapView .rx-style-room-hotspots button:hover { border-color:rgba(215,184,121,.28); background:rgba(215,184,121,.025); }
#mapView .rx-style-room-hotspots button.active { border-color:rgba(224,195,137,.68); background:rgba(215,184,121,.05); box-shadow:inset 0 0 35px rgba(215,184,121,.06),0 0 18px rgba(215,184,121,.08); }
#mapView [data-fit-room-hotspot="living"] { left:31%; top:40%; width:37%; height:43%; }
#mapView [data-fit-room-hotspot="kitchen"] { left:35%; top:13%; width:34%; height:27%; }
#mapView [data-fit-room-hotspot="bath"] { left:72%; top:16%; width:19%; height:27%; }
#mapView [data-fit-room-hotspot="master"] { left:72%; top:43%; width:24%; height:40%; }
#mapView [data-fit-room-hotspot="room2"] { left:6%; top:39%; width:25%; height:44%; }
#mapView [data-fit-room-hotspot="entry"] { left:12%; top:12%; width:23%; height:27%; }

#mapView .rx-style-processing { position:absolute; z-index:30; inset:0; display:grid; place-items:center; background:rgba(7,8,8,.68); opacity:0; pointer-events:none; backdrop-filter:blur(5px); transition:opacity .2s ease; }
#mapView .rx-style-viewport.is-processing .rx-style-processing { opacity:1; }
#mapView .rx-style-processing > span { display:grid; justify-items:center; gap:7px; padding:18px 24px; border:1px solid rgba(215,184,121,.25); border-radius:16px; background:rgba(10,11,11,.82); box-shadow:0 20px 55px rgba(0,0,0,.35); }
#mapView .rx-style-processing > span > i { width:8px; height:8px; border-radius:50%; background:#d7b879; box-shadow:0 0 20px rgba(215,184,121,.7); animation:rx-fit-pulse .8s ease-in-out infinite alternate; }
#mapView .rx-style-processing b { color:#e4ddd1; font-size:13px; font-weight:560; }
#mapView .rx-style-processing small { color:#8c877e; font-size:8px; }
#mapView .rx-style-scan { position:absolute; z-index:-1; top:0; bottom:0; width:2px; background:linear-gradient(180deg,transparent,rgba(230,205,157,.9),transparent); box-shadow:0 0 30px rgba(215,184,121,.7); animation:rx-fit-scan 1.25s ease-in-out infinite; }
@keyframes rx-fit-scan { 0%{left:7%;opacity:.2} 50%{opacity:1} 100%{left:93%;opacity:.2} }
@keyframes rx-fit-pulse { to{transform:scale(1.35);opacity:.55} }
#mapView .rx-style-viewport.fit-confirmed::before { content:""; position:absolute; z-index:25; inset:4%; border:1px solid rgba(226,199,143,.62); border-radius:22px; animation:rx-fit-confirm .78s ease-out both; pointer-events:none; }
@keyframes rx-fit-confirm { from{transform:scale(.94);opacity:0;box-shadow:inset 0 0 70px rgba(215,184,121,.18)} 45%{opacity:1} to{transform:scale(1);opacity:0} }

#mapView .rx-style-compare-control { display:flex; align-items:center; gap:10px; padding:0 15px; border-top:1px solid rgba(255,255,255,.065); opacity:.34; pointer-events:none; transition:opacity .2s ease; }
#mapView .rx-style-compare-control.show { opacity:1; pointer-events:auto; }
#mapView .rx-style-compare-control span { color:#747069; font-size:7px; white-space:nowrap; }
#mapView .rx-style-compare-control input { flex:1; accent-color:#cba967; }

#mapView .rx-style-palette { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:14px; }
#mapView .rx-style-palette i { height:32px; border:1px solid rgba(255,255,255,.10); border-radius:9px; background:var(--swatch); box-shadow:inset 0 0 0 2px rgba(0,0,0,.12); }
#mapView .rx-style-analysis-list { display:grid; gap:1px; margin-top:14px; border-top:1px solid rgba(255,255,255,.07); }
#mapView .rx-style-analysis-list > div { display:grid; grid-template-columns:78px 1fr; gap:8px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
#mapView .rx-style-analysis-list span { color:#716d67; font-size:8px; }
#mapView .rx-style-analysis-list b { color:#b8b1a6; font-size:9px; font-weight:520; text-align:right; }

#mapView .rx-style-scope-section { margin-top:15px; }
#mapView .rx-style-scope-section > span { color:#8a857d; font-size:8px; }
#mapView .rx-style-scope-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:8px; padding:4px; border:1px solid rgba(255,255,255,.075); border-radius:11px; background:rgba(255,255,255,.02); }
#mapView .rx-style-scope-tabs button { height:36px; border:0; border-radius:8px; background:transparent; color:#77736c; font-size:8px; cursor:pointer; }
#mapView .rx-style-scope-tabs button.active { background:rgba(215,184,121,.11); color:#dfc58a; }
#mapView .rx-style-room-list { display:none; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:8px; }
#mapView .rx-style-viewport.room-scope ~ * {}
#mapView .rx-fit-layer.room-scope-selected .rx-style-room-list { display:grid; }
#mapView .rx-style-room-list button { height:35px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.02); color:#77736c; font-size:8px; cursor:pointer; }
#mapView .rx-style-room-list button.active { border-color:rgba(215,184,121,.38); background:rgba(215,184,121,.07); color:#d9bf85; }

#mapView .rx-style-apply { width:100%; min-height:58px; display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:0 14px; border:1px solid rgba(215,184,121,.50); border-radius:13px; background:linear-gradient(135deg,rgba(215,184,121,.16),rgba(215,184,121,.065)); color:#e3ca92; text-align:left; cursor:pointer; }
#mapView .rx-style-apply span { font-size:10px; font-weight:600; }
#mapView .rx-style-apply small { color:#8f7c59; font-size:7px; }
#mapView .rx-style-structure-lock { display:grid; grid-template-columns:26px 1fr; align-items:center; gap:8px; margin-top:9px; padding:9px 10px; border:1px solid rgba(137,183,150,.18); border-radius:11px; background:rgba(137,183,150,.035); }
#mapView .rx-style-structure-lock > i { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:rgba(137,183,150,.12); color:#9fc0a8; font-size:9px; font-style:normal; }
#mapView .rx-style-structure-lock span { color:#777c75; font-size:7px; line-height:1.4; }
#mapView .rx-style-structure-lock b { display:block; color:#9ca69c; font-size:7px; font-weight:600; letter-spacing:.06em; }

@media (max-width:1240px),(max-height:720px) {
  #mapView .rx-fit-layer.show { grid-template-rows:68px 44px minmax(0,1fr) !important; }
  #mapView .rx-style-fit-body { grid-template-columns:235px minmax(0,1fr) 255px; gap:8px; padding:8px; }
  #mapView .rx-style-reference-panel,#mapView .rx-style-analysis-panel { padding:12px; }
  #mapView .rx-style-reference { min-height:70px; grid-template-columns:76px minmax(0,1fr); gap:8px; }
  #mapView .rx-style-reference > img { width:76px; height:55px; }
  #mapView .rx-style-reference em { display:none; }
  #mapView .rx-style-reference-panel > p,#mapView .rx-style-analysis-panel > p { font-size:8px; }
  #mapView .rx-style-palette i { height:24px; }
  #mapView .rx-style-analysis-list > div { padding:7px 0; }
  #mapView .rx-style-apply { min-height:48px; }
  #mapView .rx-style-structure-lock { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  #mapView .rx-style-scan,#mapView .rx-style-processing > span > i,#mapView .rx-style-viewport.fit-confirmed::before { animation:none !important; }
}
