/* =========================================================
   云栖设计 · 360° 全景样板间
   Interaction replica inspired by Kujiale's panorama H5.
   ========================================================= */

:root {
  --ink: #101112;
  --ink-soft: #181a1b;
  --paper: #f3efe8;
  --paper-dim: rgba(243, 239, 232, .66);
  --gold: #c9a97b;
  --gold-bright: #e2c79f;
  --blue: #7eb6ff;
  --line: rgba(255, 255, 255, .16);
  --line-soft: rgba(255, 255, 255, .09);
  --glass: rgba(19, 21, 22, .58);
  --glass-strong: rgba(18, 20, 21, .78);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", "Songti SC", serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #0c0d0e;
  color: #fff;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  overflow: hidden;
}
button, select, input { font: inherit; color: inherit; }
button { border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, select:focus-visible { outline: 2px solid rgba(226, 199, 159, .9); outline-offset: 2px; }
svg { display: block; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ico-chevron { width: 13px; height: 13px; stroke-width: 1.8; }

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0c0d0e;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
#app:fullscreen { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0 !important; }

/* ---------- panorama canvas ---------- */
#viewport { position: absolute; inset: 0; z-index: 1; background: #141515; overflow: hidden; }
#pano { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; filter: saturate(.82) contrast(1.055) brightness(1.02); }
#pano:active { cursor: grabbing; }
.pano-grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 8, 9, .46) 0%, rgba(7, 8, 9, .08) 17%, transparent 35%, transparent 62%, rgba(7, 8, 9, .54) 100%),
    linear-gradient(90deg, rgba(8, 9, 10, .2), transparent 22%, transparent 78%, rgba(8, 9, 10, .26));
}
.pano-vignette {
  position: absolute; inset: -10%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 47%, transparent 44%, rgba(6, 7, 8, .18) 74%, rgba(6, 7, 8, .5) 118%);
}
.pano-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background-image: url("grain.png");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}
#app.is-dragging .pano-grade { opacity: .92; }

/* ---------- top bar ---------- */
#topbar {
  position: absolute; z-index: 30; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: start; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 0;
  pointer-events: none;
}
.chrome-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .92);
  background: rgba(13, 14, 15, .26);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  pointer-events: auto;
  transition: transform .25s var(--ease), background .25s;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.chrome-btn:active { transform: scale(.93); background: rgba(255, 255, 255, .16); }
.chrome-btn .ico { width: 17px; height: 17px; }
.title-block { text-align: center; padding-top: 1px; min-width: 0; pointer-events: none; }
.design-title {
  font-size: 13.5px; line-height: 1.35; font-weight: 500; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(255, 255, 255, .96);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.design-title span { color: rgba(255, 255, 255, .45); font-weight: 300; }
.design-sub {
  margin-top: 3px; font-size: 7.5px; line-height: 1.3; letter-spacing: 2.1px;
  color: rgba(255, 255, 255, .55); text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
#topbar .chrome-btn:last-child { justify-self: end; }

/* ---------- floor plan card ---------- */
.plan-card {
  position: absolute; z-index: 26;
  top: calc(env(safe-area-inset-top, 0px) + 74px); left: 14px;
  width: 148px; padding: 9px 9px 8px;
  border-radius: 16px;
  background:
    linear-gradient(155deg, rgba(53, 56, 57, .72) 0%, rgba(24, 27, 28, .66) 58%, rgba(15, 17, 18, .72) 100%);
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.plan-kicker {
  font-size: 7.5px; line-height: 1; letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .5); white-space: nowrap;
}
.floor-select { position: relative; display: flex; align-items: center; }
.floor-select select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; color: rgba(255, 255, 255, .93);
  font-size: 11px; font-weight: 500; letter-spacing: .6px;
  padding: 2px 15px 2px 2px; cursor: pointer;
}
.floor-select select option { color: #111; background: #f1ede6; }
.floor-select .ico-chevron { position: absolute; right: 0; pointer-events: none; color: rgba(255, 255, 255, .65); }
.plan-mini { height: 120px; margin: 2px -2px 1px; position: relative; overflow: hidden; }
.plan-mini::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(8, 9, 10, .14) 100%);
}
.plan-mini .floor-svg { width: 100%; height: 100%; overflow: visible; }
.plan-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.plan-tip { font-size: 7.5px; letter-spacing: .5px; color: rgba(255, 255, 255, .38); }
.plan-expand {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: background .2s, color .2s;
}
.plan-expand:active { background: rgba(255, 255, 255, .15); color: #fff; }
.plan-expand .ico { width: 12px; height: 12px; stroke-width: 1.8; }

/* plan drawing */
.floor-svg { font-family: var(--sans); }
.plan-outline { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .88); stroke-width: 3.6; stroke-linejoin: round; }
.plan-room { fill: rgba(255, 255, 255, .045); stroke: rgba(255, 255, 255, .18); stroke-width: .8; }
.plan-room.is-living { fill: rgba(255, 255, 255, .07); }
.plan-wall { stroke: rgba(255, 255, 255, .7); stroke-width: 3; stroke-linecap: round; }
.plan-wall.thin { stroke: rgba(255, 255, 255, .26); stroke-width: 1.2; }
.plan-furniture { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.plan-furniture.fill { fill: rgba(255, 255, 255, .07); }
.plan-label {
  fill: rgba(255, 255, 255, .48); font-size: 8.5px; letter-spacing: .8px;
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
}
.plan-label.big { fill: rgba(255, 255, 255, .64); font-size: 10px; letter-spacing: 1.2px; }
.plan-label.small { fill: rgba(255, 255, 255, .3); font-size: 7px; letter-spacing: .7px; }
.plan-pin { cursor: pointer; }
.plan-pin .pin-halo { fill: rgba(126, 182, 255, .12); stroke: rgba(126, 182, 255, .45); stroke-width: .7; opacity: 0; transform-origin: center; }
.plan-pin.is-current .pin-halo { opacity: 1; animation: planPulse 2.6s ease-out infinite; }
.plan-pin .pin-dot { fill: #f4f1eb; stroke: rgba(16, 18, 19, .6); stroke-width: .8; transition: fill .25s; }
.plan-pin .pin-core { fill: #1b1d1e; }
.plan-pin .pin-ico { fill: none; stroke: #1b1d1e; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.plan-pin.is-current .pin-dot { fill: var(--blue); stroke: #fff; }
.plan-pin.is-current .pin-core { fill: #fff; }
.plan-pin.is-current .pin-ico { stroke: #fff; }
.plan-pin.is-current .pin-label { fill: #fff; }
.plan-pin .pin-label { fill: rgba(255, 255, 255, .65); font-size: 7px; letter-spacing: .4px; text-anchor: middle; pointer-events: none; }
.plan-pin:hover .pin-dot { fill: var(--gold-bright); }
.plan-view-cone { fill: rgba(126, 182, 255, .13); transform-origin: center; }
.plan-thickness { fill: rgba(0, 0, 0, .3); }
@keyframes planPulse {
  0% { transform: scale(.72); opacity: .85; }
  80% { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* ---------- room chip ---------- */
#app.has-product-focus .room-chip {
  top: 36%;
  opacity: .82;
  transform: translate(-50%, -50%) scale(.94);
}
.room-chip {
  position: absolute; z-index: 20; left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px; min-width: 100px;
  border-radius: 999px;
  background: rgba(16, 18, 19, .46);
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(13px) saturate(120%);
  backdrop-filter: blur(13px) saturate(120%);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .22);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.room-pin { position: relative; width: 17px; height: 17px; flex: 0 0 17px; }
.room-pin-dot {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 12px rgba(126, 182, 255, .8);
}
.room-pin-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(126, 182, 255, .55);
  animation: roomRing 2.4s ease-out infinite;
}
@keyframes roomRing {
  0% { transform: scale(.55); opacity: .9; }
  75% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.room-copy { display: flex; flex-direction: column; gap: 1px; }
.room-copy b { font-size: 12.5px; font-weight: 500; letter-spacing: 1px; line-height: 1.2; }
.room-copy small { font-size: 6.5px; letter-spacing: 1.2px; color: rgba(255, 255, 255, .5); line-height: 1.3; }

/* ---------- right rail ---------- */
.rail {
  position: absolute; z-index: 30; right: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 80px);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.rail-btn {
  position: relative; width: 39px; height: 39px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .88);
  background: linear-gradient(150deg, rgba(45, 48, 49, .5), rgba(16, 18, 19, .48));
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .22s var(--ease), background .22s, color .22s;
}
.rail-btn:active { transform: scale(.9); }
.rail-btn .ico { width: 18px; height: 18px; }
.rail-btn.like-btn { height: 51px; border-radius: 20px; display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.like-btn .ico-heart { width: 17px; height: 17px; transition: fill .25s, color .25s; }
.like-count { font-size: 8px; line-height: 1; letter-spacing: .1px; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
.rail-btn.is-liked { color: #f1b6ac; }
.rail-btn.is-liked .ico-heart { fill: #e98280; stroke: #f5c1ba; }
.rail-btn.is-liked .like-count { color: #f5c1ba; }
.rail-btn.is-liked .ico-heart { animation: heartPop .45s var(--ease); }
@keyframes heartPop {
  0% { transform: scale(.75); }
  45% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.rail-dot {
  position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: #e85d53; box-shadow: 0 0 0 2px rgba(12, 13, 14, .55);
  transition: opacity .25s;
}
.rail-dot.is-hidden { opacity: 0; }

/* ---------- bottom ---------- */
#bottomUI { position: absolute; z-index: 26; left: 0; right: 0; bottom: 0; pointer-events: none; }
.product-pill {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 103px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 14px 0 5px;
  border-radius: 999px;
  background: rgba(15, 17, 18, .68);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
  font-size: 11px; letter-spacing: 1.2px;
  pointer-events: auto;
  transition: transform .22s var(--ease), background .22s;
}
.product-pill:active { transform: translateX(-50%) scale(.95); background: rgba(255, 255, 255, .14); }
.product-ico {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gold-bright);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
}
.product-ico .ico { width: 15px; height: 15px; }
.product-pill em {
  font-style: normal; font-size: 8px; min-width: 15px; height: 15px; border-radius: 999px;
  display: grid; place-items: center; color: #1a1a1a; background: var(--paper);
  font-weight: 600; letter-spacing: 0;
}
.agent-bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: linear-gradient(to top, rgba(7, 8, 9, .97) 0%, rgba(7, 8, 9, .8) 48%, rgba(7, 8, 9, 0) 100%);
}
.avatar {
  position: relative; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .6), transparent 38%),
    linear-gradient(145deg, #d7c4a6, #8f7455 68%, #5e4a34);
  border: 1px solid rgba(255, 255, 255, .32);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .3);
}
.avatar span {
  font-family: var(--serif); font-size: 17px; font-weight: 500; color: #2f261c;
  transform: translateY(-1px); letter-spacing: 1px;
}
.avatar::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
}
.avatar i {
  position: absolute; right: 1px; bottom: 2px; width: 9px; height: 9px; border-radius: 50%;
  background: #8cc9a6; border: 2px solid #111314; z-index: 2;
}
.agent-copy { flex: 1; min-width: 0; }
.agent-name {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 500; letter-spacing: .5px; color: rgba(255, 255, 255, .94);
}
.verified { width: 12px; height: 12px; color: var(--gold); stroke-width: 2.4; }
.agent-meta { margin-top: 3px; font-size: 9px; letter-spacing: .35px; color: rgba(255, 255, 255, .45); }
.agent-meta span { color: rgba(255, 255, 255, .65); font-variant-numeric: tabular-nums; }
.follow-btn {
  flex: 0 0 auto; height: 29px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .075);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 10px; letter-spacing: .6px; color: rgba(255, 255, 255, .9);
  transition: background .25s, color .25s, border-color .25s;
}
.follow-btn span { color: var(--gold); }
.follow-btn.is-following { background: var(--paper); border-color: var(--paper); color: #171819; }
.follow-btn.is-following span { display: none; }

/* ---------- gesture hint ---------- */
.gesture-hint {
  position: absolute; z-index: 22; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 165px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 7px; border-radius: 999px;
  background: rgba(15, 17, 18, .4);
  border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 9px; letter-spacing: .5px; color: rgba(255, 255, 255, .62);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.gesture-hint.is-hidden { opacity: 0; transform: translate(-50%, 8px); }
.hint-hand {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .75);
}
.hint-hand .ico { width: 14px; height: 14px; }

/* ---------- hotspots ---------- */
#hotspotLayer { position: absolute; inset: 0; z-index: 18; pointer-events: none; overflow: hidden; }
.hotspot {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 5px; border-radius: 999px;
  background: rgba(15, 17, 18, .58);
  border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .24);
  color: rgba(255, 255, 255, .94);
  font-size: 9px; letter-spacing: .5px; white-space: nowrap;
  pointer-events: auto; cursor: pointer;
  transition: background .2s, transform .2s, opacity .18s;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}
.hotspot:active { background: rgba(255, 255, 255, .9); color: #171819; }
.hotspot .hs-ico {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  display: grid; place-items: center;
  background: var(--paper); color: #1b1c1d;
}
.hotspot .hs-ico .ico { width: 12px; height: 12px; stroke-width: 1.7; }
.hotspot .hs-arrow { width: 10px; height: 10px; opacity: .55; margin-left: 1px; transform: rotate(-90deg); }
.hotspot.is-link {
  background: rgba(16, 18, 19, .62); color: rgba(255, 255, 255, .94);
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
}
.hotspot.is-link .hs-ico { background: rgba(243,239,232,.92); color: #18191a; }
.hotspot.is-link .hs-arrow { opacity: .7; }
.hotspot.is-product { padding: 4px; width: 30px; height: 30px; border-radius: 50%; justify-content: center; }
.hotspot.is-product .hs-ico { width: 22px; height: 22px; flex-basis: 22px; background: rgba(245, 242, 236, .92); color: #1b1c1d; }
.hotspot.is-product .hs-label { display: none; }
.hotspot.is-product::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .26);
}
.hotspot.is-product .hs-price {
  position: absolute; top: 31px; left: 50%; transform: translateX(-50%);
  font-size: 7px; letter-spacing: .2px; color: rgba(255, 255, 255, .75);
  text-shadow: 0 1px 7px rgba(0, 0, 0, .6); white-space: nowrap;
}
.hotspot.is-hidden { opacity: 0; pointer-events: none; }
.hotspot .hs-fade { opacity: .55; font-size: 8px; letter-spacing: .2px; }

/* ---------- loading ---------- */
#loading {
  position: absolute; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(66, 58, 47, .35), transparent 46%),
    linear-gradient(160deg, #17191a, #0d0e0f 72%);
  transition: opacity .7s var(--ease), visibility .7s;
}
#loading.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark { display: flex; flex-direction: column; align-items: center; }
.loader-monogram {
  position: relative; width: 66px; height: 66px; display: grid; place-items: center;
  border: 1px solid rgba(201, 169, 123, .55); color: var(--gold-bright);
  font-family: var(--serif); font-size: 20px; letter-spacing: 2px;
}
.loader-monogram::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(201, 169, 123, .18); }
.loader-brand { margin-top: 22px; font-size: 12px; letter-spacing: 6px; color: rgba(255, 255, 255, .86); text-indent: 6px; }
.loader-sub { margin-top: 7px; font-size: 7px; letter-spacing: 2.4px; color: rgba(255, 255, 255, .32); }
.loader-progress {
  width: 164px; height: 1px; margin-top: 39px; background: rgba(255, 255, 255, .13); overflow: hidden;
}
.loader-progress i {
  display: block; width: 0; height: 100%; background: linear-gradient(90deg, #94764f, var(--gold-bright));
  transition: width .25s ease;
}
.loader-status { margin-top: 12px; font-size: 8px; letter-spacing: 1.1px; color: rgba(255, 255, 255, .38); }
#loading.is-error .loader-status { color: #e9a59b; max-width: 260px; text-align: center; line-height: 1.7; }

/* ---------- VR ---------- */
#vrHud { position: absolute; inset: 0; z-index: 90; opacity: 0; pointer-events: none; transition: opacity .35s; }
#app.vr-mode #vrHud { opacity: 1; pointer-events: auto; }
#app.vr-mode #topbar,
#app.vr-mode .plan-card,
#app.vr-mode .rail,
#app.vr-mode #bottomUI,
#app.vr-mode .room-chip,
#app.vr-mode .gesture-hint,
#app.vr-mode #hotspotLayer,
#app.vr-mode #sheetBackdrop,
#app.vr-mode #sheet { opacity: 0 !important; pointer-events: none !important; }
#app.vr-mode .pano-grade { opacity: .65; }
.vr-top {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 16px; right: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.vr-badge {
  font-size: 8px; letter-spacing: 1.8px; color: rgba(255, 255, 255, .65);
  padding: 8px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .17);
  background: rgba(10, 11, 12, .36); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vr-exit {
  font-size: 10px; letter-spacing: .5px; color: rgba(255, 255, 255, .85);
  padding: 9px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(10, 11, 12, .46); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vr-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: rgba(255, 255, 255, .12); box-shadow: 0 0 30px rgba(0, 0, 0, .5);
}
.vr-bottom {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  padding: 8px 9px 8px 14px; border-radius: 999px;
  background: rgba(10, 11, 12, .45); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 8px; letter-spacing: .6px; color: rgba(255, 255, 255, .55); white-space: nowrap;
}
.vr-bottom button {
  padding: 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9);
  font-size: 8px; letter-spacing: .5px;
}

/* ---------- sheets ---------- */
#sheetBackdrop {
  position: absolute; inset: 0; z-index: 70;
  background: rgba(4, 5, 6, .48);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
#sheetBackdrop.is-open { opacity: 1; pointer-events: auto; }
#sheet {
  position: absolute; z-index: 80; left: 0; right: 0; bottom: 0;
  max-height: 83%; display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(72, 62, 48, .18), transparent 42%),
    #17191a;
  border-top: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -26px 80px rgba(0, 0, 0, .45);
  transform: translateY(103%);
  transition: transform .48s var(--ease);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#sheet.is-open { transform: translateY(0); }
.sheet-grab { width: 36px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .22); margin: 8px auto 0; flex: 0 0 auto; }
.sheet-head {
  flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 18px 13px;
}
.sheet-kicker { font-size: 7.5px; letter-spacing: 2.1px; color: var(--gold); text-transform: uppercase; margin-bottom: 5px; }
.sheet-head h2 { margin: 0; font-size: 20px; line-height: 1.15; font-weight: 500; letter-spacing: 1px; color: var(--paper); }
.sheet-close {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .6);
}
.sheet-close .ico { width: 15px; height: 15px; }
.sheet-body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 18px calc(24px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sheet-body::-webkit-scrollbar { display: none; }
.sheet-note { margin: 14px 2px 0; font-size: 8.5px; line-height: 1.7; letter-spacing: .3px; color: rgba(255, 255, 255, .32); }

/* ---------- menu sheet ---------- */
.menu-list {
  overflow: hidden; border: 1px solid var(--line-soft); border-radius: 16px;
  background: rgba(255, 255, 255, .025);
}
.menu-row {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 12px 12px; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .87); font-size: 12px; letter-spacing: .3px;
  transition: background .2s;
}
.menu-row:last-child { border-bottom: 0; }
.menu-row:active { background: rgba(255, 255, 255, .06); }
.menu-row .mi {
  width: 31px; height: 31px; flex: 0 0 31px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .055); color: rgba(255, 255, 255, .65);
}
.menu-row .mi .ico { width: 16px; height: 16px; }
.menu-row .mcopy { flex: 1; min-width: 0; }
.menu-row .mcopy small { display: block; margin-top: 2px; font-size: 8.5px; color: rgba(255, 255, 255, .3); letter-spacing: .2px; }
.menu-row .arrow { opacity: .28; width: 14px; height: 14px; transform: rotate(-90deg); }
.switch {
  width: 36px; height: 20px; border-radius: 999px; flex: 0 0 36px;
  background: rgba(255, 255, 255, .13); position: relative; transition: background .25s;
}
.switch::after {
  content: ""; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px;
  border-radius: 50%; background: rgba(255, 255, 255, .78);
  transition: transform .25s var(--ease), background .25s;
}
.menu-row.is-on .switch { background: rgba(201, 169, 123, .75); }
.menu-row.is-on .switch::after { transform: translateX(16px); background: #fff; }
.menu-row.is-on .mi { color: var(--gold-bright); }

/* ---------- room picker ---------- */
.room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.room-card {
  position: relative; height: 116px; overflow: hidden; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background-color: #222;
  background-size: cover; background-position: 50% 55%;
  text-align: left;
  transition: transform .25s var(--ease), border-color .25s;
}
.room-card:active { transform: scale(.975); }
.room-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 10, .9) 0%, rgba(8, 9, 10, .26) 48%, transparent 78%);
}
.room-card.is-current { border-color: rgba(201, 169, 123, .75); }
.room-card .rc-copy { position: absolute; z-index: 2; left: 11px; right: 9px; bottom: 10px; }
.room-card .rc-copy b { display: block; font-size: 12px; font-weight: 500; letter-spacing: .8px; }
.room-card .rc-copy small { display: block; margin-top: 2px; font-size: 7px; letter-spacing: 1.2px; color: rgba(255, 255, 255, .48); }
.room-card .rc-floor {
  position: absolute; z-index: 2; top: 8px; right: 8px;
  padding: 4px 7px; border-radius: 999px; background: rgba(10, 11, 12, .45);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 7px; letter-spacing: .7px; color: rgba(255, 255, 255, .7);
}
.room-card .rc-current {
  position: absolute; z-index: 2; left: 8px; top: 8px;
  display: flex; align-items: center; gap: 4px;
  padding: 4px 7px; border-radius: 999px;
  background: rgba(8, 9, 10, .54);
  border: 1px solid rgba(126, 182, 255, .34);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  font-size: 7px; letter-spacing: 1px; color: var(--blue);
}
.room-card.plan-entry {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201, 169, 123, .16), transparent 58%),
    linear-gradient(150deg, #24211d, #151617 72%);
}
.room-card.plan-entry::before {
  content: ""; position: absolute; inset: 12px;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 83%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 83%);
}
.plan-entry-icon {
  position: absolute; z-index: 2; left: 12px; top: 17px;
  width: 28px; height: 28px; border: 1px solid rgba(201, 169, 123, .4);
  display: grid; place-items: center; color: var(--gold-bright);
}
.plan-entry-icon .ico { width: 14px; height: 14px; }
.room-card.plan-entry .rc-copy b { color: var(--paper); }
.rc-current::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }

/* ---------- product sheet ---------- */
.product-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.product-tab {
  height: 27px; padding: 0 11px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035);
  font-size: 9px; letter-spacing: .5px; color: rgba(255, 255, 255, .52);
}
.product-tab.is-active { background: var(--paper); border-color: var(--paper); color: #171819; }
.product-list { display: flex; flex-direction: column; gap: 9px; }
.product-card {
  display: flex; align-items: center; gap: 11px;
  padding: 9px; border-radius: 15px;
  background: rgba(255, 255, 255, .032);
  border: 1px solid rgba(255, 255, 255, .065);
  transition: border-color .25s, background .25s;
}
.product-card.is-selected { border-color: rgba(201, 169, 123, .55); background: rgba(201, 169, 123, .065); }
.p-thumb { position: relative; width: 76px; height: 76px; flex: 0 0 76px; border-radius: 11px; overflow: hidden; background: #282522; }
.p-thumb .p-tag {
  position: absolute; left: 6px; top: 6px; z-index: 3;
  font-size: 6.5px; letter-spacing: .5px; padding: 3px 5px; border-radius: 4px;
  color: rgba(255, 255, 255, .72); background: rgba(10, 11, 12, .38);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.p-thumb[data-kind="sofa"] { background: radial-gradient(ellipse at 55% 25%, #e4d3b8, #b79b77 42%, #725d47 100%); }
.p-thumb[data-kind="sofa"]::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 26%; height: 29%;
  border-radius: 10px 10px 5px 5px;
  background: linear-gradient(160deg, #f0e4d2, #c4ad8e 62%, #a78d6d);
  box-shadow: inset 0 5px 8px rgba(255, 255, 255, .4), 0 8px 12px rgba(67, 48, 31, .25);
}
.p-thumb[data-kind="sofa"]::after {
  content: ""; position: absolute; left: 9%; right: 9%; bottom: 17%; height: 15%;
  border-radius: 5px 5px 8px 8px;
  background: linear-gradient(180deg, #b39978, #8d7354);
  box-shadow: 0 7px 8px rgba(62, 44, 29, .25);
}
.p-thumb[data-kind="table"] { background: radial-gradient(ellipse at 50% 40%, #ede7dc, #b9b2a5 45%, #6d665b 100%); }
.p-thumb[data-kind="table"]::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 27%; height: 36%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255, 255, 255, .92), transparent 35%),
    linear-gradient(110deg, #dad2c5, #f1ece1 35%, #b9b0a1 68%, #ddd5c7);
  box-shadow: 0 12px 16px rgba(31, 29, 25, .25), inset 0 1px 1px rgba(255, 255, 255, .7);
}
.p-thumb[data-kind="table"]::after {
  content: ""; position: absolute; left: 44%; right: 44%; top: 59%; height: 24%;
  background: linear-gradient(90deg, #6d5c47, #b39a79, #5a4b3a);
  box-shadow: 0 8px 10px rgba(0, 0, 0, .25);
}
.p-thumb[data-kind="lamp"] { background: radial-gradient(ellipse at 62% 20%, #f0d9b8, #9d7a52 50%, #3f3429 100%); }
.p-thumb[data-kind="lamp"]::before {
  content: ""; position: absolute; left: 37%; top: 17%; width: 26%; height: 19%;
  background: linear-gradient(120deg, #f7e6c8, #c9a475);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  box-shadow: 0 4px 12px rgba(255, 219, 161, .35);
}
.p-thumb[data-kind="lamp"]::after {
  content: ""; position: absolute; left: 49%; top: 34%; width: 2px; height: 42%;
  background: linear-gradient(180deg, #e4c18b, #806344);
  box-shadow: 0 0 12px rgba(255, 206, 126, .2);
}
.p-thumb[data-kind="rug"] { background: repeating-linear-gradient(90deg, #c6b399 0 3px, #a9947b 3px 6px, #8f7b63 6px 7px); }
.p-thumb[data-kind="rug"]::before {
  content: ""; position: absolute; inset: 13% 11%;
  background:
    repeating-linear-gradient(0deg, rgba(255, 244, 228, .22) 0 2px, transparent 2px 9px),
    linear-gradient(135deg, rgba(73, 58, 43, .18), transparent 45%);
  border: 1px solid rgba(255, 245, 228, .3);
  box-shadow: inset 0 0 18px rgba(61, 45, 30, .4);
}
.p-thumb[data-kind="chair"] { background: radial-gradient(ellipse at 50% 20%, #d7cab8, #99846c 52%, #514538 100%); }
.p-thumb[data-kind="chair"]::before {
  content: ""; position: absolute; left: 27%; top: 24%; width: 46%; height: 36%;
  border-radius: 42% 42% 28% 28%;
  background: linear-gradient(145deg, #d6c2a6, #92785c);
  box-shadow: inset 0 4px 6px rgba(255, 255, 255, .26);
}
.p-thumb[data-kind="chair"]::after {
  content: ""; position: absolute; left: 38%; top: 58%; width: 24%; height: 26%;
  border-left: 2px solid #6c563f; border-right: 2px solid #6c563f;
  box-shadow: 0 8px 12px rgba(0, 0, 0, .25);
}
.p-info { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.p-cat { font-size: 6.5px; letter-spacing: 1.1px; color: var(--gold); text-transform: uppercase; }
.p-name { margin-top: 3px; font-size: 12px; font-weight: 500; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-desc { margin-top: 3px; font-size: 8px; line-height: 1.45; color: rgba(255, 255, 255, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-price { margin-top: 6px; font-size: 11px; letter-spacing: .2px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.p-price small { font-size: 7px; color: rgba(255, 255, 255, .34); letter-spacing: .3px; }
.p-add {
  flex: 0 0 29px; width: 29px; height: 29px; border-radius: 50%;
  display: grid; place-items: center; align-self: flex-end;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .75);
  transition: background .2s, color .2s;
}
.p-add .ico { width: 13px; height: 13px; }
.p-add.is-added { background: var(--paper); color: #171819; border-color: var(--paper); }
.product-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 9px; color: rgba(255, 255, 255, .4);
}
.product-summary b { font-size: 11px; color: var(--gold-bright); font-weight: 500; }
.product-card { cursor: pointer; }

/* ---------- product detail ---------- */
.product-detail { padding-top: 2px; }
.product-hero {
  position: relative; width: 100%; height: 208px; flex: none;
  border-radius: 17px; margin: 0 0 15px;
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .2);
  overflow: hidden;
}
.product-hero .p-tag { left: 12px; top: 12px; font-size: 7px; }
.hero-mark {
  position: absolute; z-index: 4; right: 11px; bottom: 11px;
  padding: 5px 8px; border-radius: 5px;
  background: rgba(12, 13, 14, .34);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 6.5px; letter-spacing: 1px; color: rgba(255, 255, 255, .7);
}
.detail-kicker {
  font-size: 7px; letter-spacing: 1.7px; color: var(--gold);
  text-transform: uppercase; margin-bottom: 5px;
}
.detail-heading h3 {
  margin: 0; font-size: 24px; line-height: 1.15; font-weight: 500;
  letter-spacing: 1px; color: var(--paper);
}
.detail-price {
  margin-top: 7px; font-size: 19px; line-height: 1.2; letter-spacing: .2px;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
}
.detail-price small { margin-left: 5px; font-size: 8px; color: rgba(255, 255, 255, .36); letter-spacing: .3px; }
.detail-heading p {
  margin: 8px 0 0; font-size: 10px; line-height: 1.6;
  color: rgba(255, 255, 255, .43); letter-spacing: .2px;
}
.demo-disclaimer {
  display: flex; align-items: center; gap: 7px;
  margin-top: 13px; padding: 8px 9px;
  border-radius: 9px;
  background: rgba(201, 169, 123, .07);
  border: 1px solid rgba(201, 169, 123, .17);
  color: rgba(255, 255, 255, .43);
  font-size: 8px; line-height: 1.5; letter-spacing: .15px;
}
.demo-disclaimer span {
  flex: 0 0 auto; padding: 3px 5px; border-radius: 4px;
  background: rgba(201, 169, 123, .16); color: var(--gold-bright);
  font-size: 6px; letter-spacing: .8px;
}
.spec-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  margin: 15px 0 0;
}
.spec-item {
  padding: 9px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .033);
  border: 1px solid rgba(255, 255, 255, .06);
}
.spec-item small {
  display: block; font-size: 7px; letter-spacing: .8px;
  color: rgba(255, 255, 255, .3);
}
.spec-item b {
  display: block; margin-top: 4px; font-size: 9px; line-height: 1.4;
  font-weight: 500; color: rgba(255, 255, 255, .78); letter-spacing: .2px;
}
.detail-colors { margin-top: 14px; }
.detail-label { display: block; font-size: 7px; letter-spacing: 1px; color: rgba(255, 255, 255, .32); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.swatch {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px 5px 6px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .025);
  font-size: 8px; letter-spacing: .2px; color: rgba(255, 255, 255, .43);
  cursor: pointer;
}
.swatch i { width: 12px; height: 12px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.swatch.is-on { border-color: rgba(201, 169, 123, .6); color: rgba(255, 255, 255, .9); }
.swatch em { font-style: normal; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 16px; }
.detail-btn {
  height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 10px; letter-spacing: .4px;
}
.detail-btn .ico { width: 14px; height: 14px; }
.detail-btn.primary { background: var(--paper); border: 1px solid var(--paper); color: #171819; }
.detail-btn.primary.is-added { background: var(--gold-bright); border-color: var(--gold-bright); }
.detail-btn.ghost {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .75);
}
.detail-link {
  width: 100%; height: 39px; margin-top: 7px; padding: 0 12px;
  border-radius: 10px; display: flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .075);
  color: rgba(255, 255, 255, .55); font-size: 9px; letter-spacing: .3px;
}
.detail-link .ico { width: 14px; height: 14px; color: var(--gold); }
.detail-link span { margin-left: auto; opacity: .45; }
.detail-link:active { background: rgba(255, 255, 255, .08); }
.hotspot.is-product.is-active {
  border-color: rgba(226, 199, 159, .85);
  box-shadow: 0 0 0 5px rgba(201, 169, 123, .12), 0 0 24px rgba(201, 169, 123, .25);
  animation: productPulse 1.8s ease-in-out infinite;
}
.hotspot.is-product.is-active .hs-ico { background: var(--gold-bright); }
.hotspot.is-product.is-active .hs-price { color: var(--gold-bright); }
@keyframes productPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201, 169, 123, .1), 0 0 18px rgba(201, 169, 123, .18); }
  50% { box-shadow: 0 0 0 8px rgba(201, 169, 123, .06), 0 0 28px rgba(201, 169, 123, .32); }
}

/* ---------- plan sheet ---------- */
.plan-segment {
  display: flex; gap: 4px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .055); margin-bottom: 11px;
}
.plan-segment button {
  flex: 1; height: 28px; border-radius: 999px; font-size: 9px; letter-spacing: .5px;
  color: rgba(255, 255, 255, .42); transition: background .2s, color .2s;
}
.plan-segment button.is-active { background: rgba(243, 239, 232, .94); color: #171819; }
.plan-large {
  position: relative; height: 288px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .05), transparent 63%),
    rgba(255, 255, 255, .018);
  display: grid; place-items: center;
}
.plan-large::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 88%);
}
.plan-large .floor-svg { position: relative; z-index: 1; width: 94%; height: 94%; }
.plan-large.is-3d { perspective: 900px; align-items: center; }
.plan-large.is-3d .floor-svg {
  width: 78%; height: auto;
  transform: rotateX(56deg) rotateZ(-34deg) scale(.96) translateY(4px);
  filter: drop-shadow(24px 30px 14px rgba(0, 0, 0, .42));
  transition: transform .8s var(--ease);
  transform-style: preserve-3d;
}
.plan-large.is-3d .plan-label,
.plan-large.is-3d .plan-pin .pin-label { opacity: .35; }
.plan-large .floor-svg { transition: transform .6s var(--ease); }
.plan-legend {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; font-size: 8px; letter-spacing: .3px; color: rgba(255, 255, 255, .32);
}
.plan-legend span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.legend-ring { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); }
.plan-room-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.plan-room-btn {
  height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .03); font-size: 9px; letter-spacing: .5px;
  color: rgba(255, 255, 255, .62); display: flex; align-items: center; justify-content: center; gap: 6px;
}
.plan-room-btn .ico { width: 13px; height: 13px; color: var(--gold); }
.plan-room-btn.is-current { border-color: rgba(201, 169, 123, .5); color: var(--paper); }

/* ---------- share sheet ---------- */
.share-poster {
  position: relative; height: 186px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #29251f url("pano/living.jpg") 48% 52% / cover no-repeat;
}
.share-poster::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(6, 7, 8, .92), rgba(6, 7, 8, .15) 66%, rgba(6, 7, 8, .25)),
    linear-gradient(90deg, rgba(6, 7, 8, .35), transparent 55%);
}
.poster-copy { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 15px; }
.poster-kicker { font-size: 7px; letter-spacing: 2.2px; color: var(--gold-bright); }
.poster-title { margin-top: 5px; font-family: var(--serif); font-size: 22px; line-height: 1.2; letter-spacing: 1.2px; }
.poster-meta { margin-top: 5px; font-size: 8px; letter-spacing: .8px; color: rgba(255, 255, 255, .46); }
.poster-mark {
  position: absolute; right: 15px; top: 14px; width: 31px; height: 31px;
  border: 1px solid rgba(255, 255, 255, .3); display: grid; place-items: center;
  font-family: var(--serif); font-size: 9px; letter-spacing: 1px; color: rgba(255, 255, 255, .75);
}
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 14px; }
.share-action { display: flex; flex-direction: column; align-items: center; gap: 7px; color: rgba(255, 255, 255, .57); font-size: 8px; letter-spacing: .4px; }
.share-action .sa-ico {
  width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
}
.share-action .sa-ico .ico { width: 17px; height: 17px; }
.share-action:active .sa-ico { background: rgba(255, 255, 255, .16); }

/* ---------- about ---------- */
.about-copy { font-size: 11px; line-height: 1.9; color: rgba(255, 255, 255, .55); letter-spacing: .2px; }
.about-copy b { color: rgba(255, 255, 255, .82); font-weight: 500; }
.about-copy p { margin: 0 0 11px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 13px 0 4px; }
.about-cell { padding: 10px 11px; border-radius: 11px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); }
.about-cell small { display: block; font-size: 7px; letter-spacing: 1px; color: rgba(255, 255, 255, .3); }
.about-cell b { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.credit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 8px; line-height: 1.7; color: rgba(255, 255, 255, .28); }
.credit a { color: rgba(255, 255, 255, .45); }

/* ---------- toast ---------- */
#toast {
  position: absolute; z-index: 120; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 154px);
  transform: translate(-50%, 8px);
  padding: 9px 14px; border-radius: 999px;
  background: rgba(243, 239, 232, .94); color: #171819;
  font-size: 10px; letter-spacing: .3px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .25);
}
#toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- desktop frame ---------- */
@media (min-width: 760px) and (min-height: 640px) {
  body {
    display: grid; place-items: center;
    background:
      radial-gradient(ellipse at 50% 45%, #2a2723 0%, #171819 45%, #0e0f10 100%);
  }
  body::before {
    content: "YUNQI 路 VIRTUAL RESIDENCE";
    position: fixed; left: 26px; bottom: 22px;
    font-size: 8px; letter-spacing: 2.7px; color: rgba(255, 255, 255, .16);
    pointer-events: none;
  }
  body::after {
    content: "360掳 INTERIOR FILM";
    position: fixed; right: 26px; bottom: 22px;
    font-size: 8px; letter-spacing: 2.7px; color: rgba(255, 255, 255, .16);
    pointer-events: none;
  }
  #app {
    width: min(424px, calc(100vw - 40px));
    height: min(888px, calc(100dvh - 36px));
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 48px 120px rgba(0, 0, 0, .62), 0 0 0 8px rgba(255, 255, 255, .025);
    background: #0c0d0e;
    overflow: hidden;
  }
  #app:fullscreen { width: 100vw; height: 100dvh; border-radius: 0; border: 0; box-shadow: none; }
  #app::after {
    content: ""; position: absolute; z-index: 200; inset: 0; border-radius: inherit;
    pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  }
}

/* ---------- compact heights ---------- */
@media (max-height: 740px) {
  #topbar { padding-top: calc(env(safe-area-inset-top, 0px) + 9px); }
  .design-sub { display: none; }
  .plan-card { width: 146px; top: calc(env(safe-area-inset-top, 0px) + 66px); }
  .plan-mini { height: 112px; }
  .rail { top: calc(env(safe-area-inset-top, 0px) + 70px); gap: 6px; }
  .rail-btn { width: 36px; height: 36px; }
  .rail-btn.like-btn { height: 47px; }
  .room-chip { top: 47%; }
  .product-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 91px); }
  .gesture-hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 149px); }
  .agent-bar { padding-top: 14px; }
  #sheet { max-height: 88%; }
  .plan-large { height: 248px; }
}
@media (max-width: 360px) {
  .plan-card { width: 140px; }
  .plan-mini { height: 120px; }
  .rail { right: 9px; }
  .design-title { font-size: 12px; }
  .product-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 94px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- scene fade ---------- */
#sceneFade {
  position: absolute; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: #0d0e0f;
  opacity: 0; pointer-events: none;
  transition: opacity .34s var(--ease);
}
#sceneFade.is-on { opacity: 1; }
#sceneFade span {
  font-family: var(--serif); font-size: 12px; letter-spacing: 4px;
  color: rgba(201, 169, 123, .5); opacity: 0;
  transition: opacity .4s .1s;
}
#sceneFade.is-on span { opacity: 1; }

/* ---------- loading retry ---------- */
#loading #retryLoad {
  margin-top: 13px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .82); font-size: 9px; letter-spacing: .5px;
}

/* ---------- plan refinements ---------- */
.plan-mini .plan-label,
.plan-mini .pin-label { display: none; }
.plan-mini .plan-pin .pin-dot { r: 11; }
.plan-large .pin-label { font-size: 9px; }
.plan-large .plan-pin.is-current .pin-label { display: none; }
.plan-floor-segment { margin-top: -4px; }
.plan-floor-segment button { height: 25px; font-size: 8px; }
.plan-card { cursor: pointer; }
.floor-select { cursor: pointer; }
.floor-select select { cursor: pointer; }

/* portrait VR hint */
@media (orientation: portrait) {
  .vr-bottom::before { content: "建议横屏"; color: var(--gold-bright); letter-spacing: .6px; }
}

/* product mode */
.product-pill.is-active {
  background: rgba(243, 239, 232, .9);
  color: #171819;
  border-color: rgba(255, 255, 255, .5);
}
.product-pill.is-active .product-ico { background: rgba(23, 24, 25, .9); color: var(--paper); }
.product-pill.is-active em { background: #171819; color: var(--paper); }
.hide-hotspots {
  display: block; width: 100%; margin-top: 9px; padding: 10px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .4);
  font-size: 8.5px; letter-spacing: .5px;
}