/* === FrameRenderer 核心画框 CSS === */
.fr-frame-outer {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}
.fr-frame-outer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: translateZ(-15px);
  background: rgba(0,0,0,0.3);
  border-radius: inherit;
  pointer-events: none;
}
.fr-frame-mat {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}
.fr-frame-mat img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  transition: all 0.3s ease;
}
.fr-glass {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.10) 0%, transparent 25%,
    rgba(255,255,255,0.06) 45%, transparent 65%,
    rgba(255,255,255,0.08) 85%, transparent 100%);
}
/* 画框样式类 */
.f-none { padding: 0; background: none; box-shadow: none; }
.f-border { padding: 6px; background: #222; box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
.f-shadow { padding: 12px; background: #f5f5f5; box-shadow: 0 25px 50px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3); }
.f-rounded { padding: 12px; background: #f0f0f0; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.f-rounded img { border-radius: 6px; }
.f-card { padding: 0; background: none; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.f-card .fr-frame-mat { padding: 35px; background: #f5f3ee; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), inset 0 4px 12px rgba(0,0,0,0.06); }
.f-double-mat { padding: 0; background: none; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.f-double-mat .fr-frame-mat { padding: 45px; background: #f5f3ee; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); position: relative; }
.f-double-mat .fr-frame-mat::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px; border: 1px solid rgba(0,0,0,0.12); }
/* wood */
.f-wood-walnut { padding: 28px; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 30%, rgba(0,0,0,0.15) 70%), linear-gradient(180deg, #8b5a2b, #6b4226, #5a3520); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1), inset 0 -10px 20px rgba(0,0,0,0.3), 0 25px 50px rgba(0,0,0,0.5); }
.f-wood-oak { padding: 28px; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 30%, rgba(0,0,0,0.12) 70%), linear-gradient(180deg, #c8a878, #a88858, #886838); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12), inset 0 -8px 16px rgba(0,0,0,0.25), 0 25px 50px rgba(0,0,0,0.5); }
.f-wood-mahogany { padding: 28px; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 30%, rgba(0,0,0,0.2) 70%), linear-gradient(180deg, #8b2828, #6b1818, #4b0808); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08), inset 0 -10px 20px rgba(0,0,0,0.35), 0 25px 50px rgba(0,0,0,0.5); }
.f-wood-bamboo { padding: 20px; background: repeating-linear-gradient(90deg, #a89060 0px, #987850 8px, #a89060 16px); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15), 0 20px 40px rgba(0,0,0,0.4); }
.f-wood-rosewood { padding: 30px; background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 30%, rgba(0,0,0,0.25) 70%), linear-gradient(180deg, #6b2020, #4b1010, #2b0808); box-shadow: inset 0 0 0 2px rgba(180,80,80,0.15), inset 0 -12px 24px rgba(0,0,0,0.4), 0 25px 50px rgba(0,0,0,0.5); }
.f-wood-zitan { padding: 32px; background: linear-gradient(135deg, rgba(120,60,40,0.15) 0%, transparent 30%, rgba(0,0,0,0.3) 70%), linear-gradient(180deg, #4a2818, #2a1808, #1a0804); box-shadow: inset 0 0 0 2px rgba(140,80,50,0.12), inset 0 -12px 24px rgba(0,0,0,0.45), 0 25px 50px rgba(0,0,0,0.55); }
.f-wood-huanghuali { padding: 30px; background: linear-gradient(135deg, rgba(255,220,160,0.12) 0%, transparent 30%, rgba(120,80,30,0.15) 70%), linear-gradient(180deg, #b88848, #987030, #785820); box-shadow: inset 0 0 0 2px rgba(255,220,160,0.15), inset 0 -10px 20px rgba(80,50,10,0.3), 0 25px 50px rgba(0,0,0,0.5); }
.f-wood-teak { padding: 28px; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 30%, rgba(0,0,0,0.15) 70%), linear-gradient(180deg, #b89860, #987840, #785820); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1), inset 0 -10px 20px rgba(0,0,0,0.3), 0 25px 50px rgba(0,0,0,0.5); }
.f-wood-nanmu { padding: 30px; background: linear-gradient(135deg, rgba(255,240,200,0.08) 0%, transparent 30%, rgba(60,40,20,0.2) 70%), linear-gradient(180deg, #8a7050, #6a5030, #4a3018); box-shadow: inset 0 0 0 2px rgba(255,240,200,0.1), inset 0 -12px 24px rgba(0,0,0,0.35), 0 25px 50px rgba(0,0,0,0.5); }
.f-wood-suanzhi { padding: 30px; background: linear-gradient(135deg, rgba(200,100,60,0.1) 0%, transparent 30%, rgba(0,0,0,0.25) 70%), linear-gradient(180deg, #7a2818, #5a1808, #3a0804); box-shadow: inset 0 0 0 2px rgba(200,100,60,0.12), inset 0 -12px 24px rgba(0,0,0,0.4), 0 25px 50px rgba(0,0,0,0.5); }
.f-wood-elm { padding: 26px; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 30%, rgba(0,0,0,0.12) 70%), linear-gradient(180deg, #b89878, #987858, #785838); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1), inset 0 -8px 16px rgba(0,0,0,0.25), 0 25px 50px rgba(0,0,0,0.5); }
.f-wood-ebony { padding: 32px; background: linear-gradient(135deg, rgba(80,80,90,0.1) 0%, transparent 30%, rgba(0,0,0,0.4) 70%), linear-gradient(180deg, #2a2a2e, #1a1a1e, #0a0a0e); box-shadow: inset 0 0 0 2px rgba(100,100,110,0.1), inset 0 -12px 24px rgba(0,0,0,0.5), 0 25px 50px rgba(0,0,0,0.55); }
/* gold */
.f-gold-classic { padding: 30px; background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 40%, rgba(0,0,0,0.2) 60%), linear-gradient(180deg, #d4a843, #b8860b, #967023); box-shadow: inset 0 0 0 3px rgba(255,230,150,0.4), inset 0 0 0 6px rgba(0,0,0,0.15), inset 0 -8px 16px rgba(0,0,0,0.25), 0 25px 50px rgba(0,0,0,0.5); }
.f-gold-antique { padding: 32px; background: linear-gradient(135deg, rgba(255,230,150,0.2) 0%, transparent 50%, rgba(0,0,0,0.3) 80%), linear-gradient(180deg, #b8983a, #967820, #685810); box-shadow: inset 0 0 0 2px rgba(200,170,80,0.3), inset 0 0 0 5px rgba(0,0,0,0.2), inset 0 -10px 20px rgba(0,0,0,0.3), 0 25px 50px rgba(0,0,0,0.5); }
.f-gold-baroque { padding: 38px; background: radial-gradient(circle at 20% 20%, rgba(255,230,150,0.3) 0%, transparent 30%), radial-gradient(circle at 80% 80%, rgba(255,230,150,0.2) 0%, transparent 30%), linear-gradient(135deg, #d4a843, #b8860b 30%, #967023 60%, #b8860b); box-shadow: inset 0 0 0 4px rgba(255,230,150,0.3), inset 0 0 0 8px rgba(0,0,0,0.15), inset 0 0 0 12px rgba(255,200,100,0.2), inset 0 -10px 20px rgba(0,0,0,0.3), 0 30px 60px rgba(0,0,0,0.5); }
/* metal */
.f-metal-silver { padding: 16px; background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%, rgba(0,0,0,0.15)), linear-gradient(180deg, #c8ccd0, #a0a4a8, #787c80); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), inset 0 -6px 12px rgba(0,0,0,0.2), 0 20px 40px rgba(0,0,0,0.45); }
.f-metal-black { padding: 18px; background: #1a1a1a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 0 3px rgba(0,0,0,0.5), 0 20px 40px rgba(0,0,0,0.5); }
.f-metal-copper { padding: 16px; background: linear-gradient(135deg, rgba(255,200,150,0.2) 0%, transparent 50%), linear-gradient(180deg, #b87340, #967030, #785820); box-shadow: inset 0 0 0 1px rgba(255,200,150,0.3), inset 0 -6px 12px rgba(0,0,0,0.2), 0 20px 40px rgba(0,0,0,0.45); }
/* modern */
.f-modern-black { padding: 16px; background: #222; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 20px 40px rgba(0,0,0,0.5); }
.f-modern-white { padding: 16px; background: #f8f8f8; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.35); }
.f-modern-floating { padding: 8px; background: #333; box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); }
/* scroll */
.f-scroll-vertical { padding: 0; background: none; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.f-scroll-vertical .fr-frame-mat { padding: 25px 35px; background: #f5f3ee; position: relative; }
.f-scroll-vertical .fr-frame-mat::before, .f-scroll-vertical .fr-frame-mat::after { content: ''; position: absolute; left: 0; right: 0; height: 18px; background: linear-gradient(180deg, #8b5a2b, #6b4226); box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); }
.f-scroll-vertical .fr-frame-mat::before { top: 0; }
.f-scroll-vertical .fr-frame-mat::after { bottom: 0; height: 22px; }
.f-scroll-horizontal { padding: 0; background: none; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.f-scroll-horizontal .fr-frame-mat { padding: 35px 25px; background: #f5f3ee; position: relative; }
.f-scroll-horizontal .fr-frame-mat::before, .f-scroll-horizontal .fr-frame-mat::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18px; background: linear-gradient(90deg, #8b5a2b, #6b4226); box-shadow: inset 2px 0 4px rgba(0,0,0,0.3); }
.f-scroll-horizontal .fr-frame-mat::before { left: 0; }
.f-scroll-horizontal .fr-frame-mat::after { right: 0; width: 22px; }
/* deep */
.f-shadow-box { padding: 22px; background: #2d2620; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 0 30px rgba(0,0,0,0.6), 0 25px 50px rgba(0,0,0,0.5); }
.f-shadow-box .fr-frame-mat { padding: 0; background: none; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }
/* 四边独立宽度 */
.fr-frame-outer.fr-custom-widths {
  padding-top: var(--fr-fw-top, 28px) !important;
  padding-bottom: var(--fr-fw-bottom, 28px) !important;
  padding-left: var(--fr-fw-left, 28px) !important;
  padding-right: var(--fr-fw-right, 28px) !important;
}
.fr-frame-mat.fr-custom-widths {
  padding-top: var(--fr-mw-top, 35px) !important;
  padding-bottom: var(--fr-mw-bottom, 35px) !important;
  padding-left: var(--fr-mw-left, 35px) !important;
  padding-right: var(--fr-mw-right, 35px) !important;
}
/* 新版 render_form 接管完整画框，避免与旧 mounting 装裱层叠加 */
.mounting.fr-frame-applied .mounting-string,
.mounting.fr-frame-applied .mounting-top-rod,
.mounting.fr-frame-applied .mounting-top-border,
.mounting.fr-frame-applied .mounting-bottom-border,
.mounting.fr-frame-applied .mounting-bottom-rod,
.mounting.fr-frame-applied .mounting-side-border,
.mounting.fr-frame-applied .mounting-knob {
  display: none !important;
}
.mounting.fr-frame-applied .mounting-side-wrap {
  display: contents !important;
}
.mounting.fr-frame-applied .mounting-painting {
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.mounting.fr-frame-applied .fr-frame-outer {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
/* 卡纸容器可能比作品图宽，必须在框内水平居中。 */
.mounting.fr-frame-applied .fr-frame-mat {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mounting.fr-frame-applied .fr-frame-mat .fr-artwork {
  margin-left: auto;
  margin-right: auto;
}
/* 投影 */
.fr-frame-outer.fr-cast-shadow {
  filter: drop-shadow(12px 25px 20px rgba(0,0,0,0.45));
}
/* === 响应式：与 styles.css 断点一致 === */
@media (max-width: 960px) {
  .fr-frame-outer { padding: 16px !important; }
  .fr-frame-outer.fr-custom-widths {
    padding-top: calc(var(--fr-fw-top, 28px) * 0.55) !important;
    padding-bottom: calc(var(--fr-fw-bottom, 28px) * 0.55) !important;
    padding-left: calc(var(--fr-fw-left, 28px) * 0.55) !important;
    padding-right: calc(var(--fr-fw-right, 28px) * 0.55) !important;
  }
  .fr-frame-mat { padding: 12px !important; }
  .fr-frame-mat.fr-custom-widths {
    padding-top: calc(var(--fr-mw-top, 35px) * 0.55) !important;
    padding-bottom: calc(var(--fr-mw-bottom, 35px) * 0.55) !important;
    padding-left: calc(var(--fr-mw-left, 35px) * 0.55) !important;
    padding-right: calc(var(--fr-mw-right, 35px) * 0.55) !important;
  }
  .fr-frame-mat img { max-height: calc(55vh - 140px) !important; }
  .fr-frame-outer.fr-cast-shadow { filter: drop-shadow(6px 12px 10px rgba(0,0,0,0.4)); }
}
@media (max-width: 760px) {
  .fr-frame-outer { padding: 10px !important; }
  .fr-frame-outer.fr-custom-widths {
    padding-top: calc(var(--fr-fw-top, 28px) * 0.35) !important;
    padding-bottom: calc(var(--fr-fw-bottom, 28px) * 0.35) !important;
    padding-left: calc(var(--fr-fw-left, 28px) * 0.35) !important;
    padding-right: calc(var(--fr-fw-right, 28px) * 0.35) !important;
  }
  .fr-frame-mat { padding: 8px !important; }
  .fr-frame-mat.fr-custom-widths {
    padding-top: calc(var(--fr-mw-top, 35px) * 0.35) !important;
    padding-bottom: calc(var(--fr-mw-bottom, 35px) * 0.35) !important;
    padding-left: calc(var(--fr-mw-left, 35px) * 0.35) !important;
    padding-right: calc(var(--fr-mw-right, 35px) * 0.35) !important;
  }
  .fr-frame-mat img { max-height: calc(50vh - 120px) !important; max-width: calc(100vw - 80px) !important; }
  .fr-frame-outer.fr-cast-shadow { filter: drop-shadow(4px 8px 8px rgba(0,0,0,0.35)); }
  .f-gold-baroque { padding: 20px !important; }
  .f-scroll-vertical .fr-frame-mat { padding: 15px 20px !important; }
  .f-scroll-horizontal .fr-frame-mat { padding: 20px 15px !important; }
}



/* === SceneRenderer 3D 场景 CSS (复用设计器类名) === */
/* 覆盖 styles.css 的 .artwork-stage 默认样式 */
.scene-stage {
  position: relative !important;
  overflow: hidden !important;
  perspective: 2000px !important;
  display: block !important;
  padding: 0 !important;
  background: none !important;
}
.scene-stage:before,
.scene-stage:after { display: none !important; }

/* 场景装饰元素基类 */
.scene-decor { position: absolute; pointer-events: none; }

/* === 场景背景 === */
.scene-gallery-white { background: linear-gradient(180deg, #f0ede5 0%, #ddd8cc 60%, #ccc4b0 100%) !important; }
.scene-gallery-track { background: linear-gradient(180deg, #e8e4dc 0%, #d5cfc3 50%, #c8c0b0 100%) !important; }
.scene-gallery-partition { background: linear-gradient(90deg, #d5cfc3 0%, #e8e4dc 20%, #e8e4dc 80%, #d5cfc3 100%) !important; }
.scene-museum-classical { background: linear-gradient(180deg, #d4c8b0 0%, #c0b498 40%, #a89878 100%) !important; }
.scene-museum-modern { background: linear-gradient(180deg, #c8c8cc 0%, #a8a8b0 60%, #888890 100%) !important; }
.scene-museum-corridor { background: linear-gradient(90deg, #b8b8bc 0%, #d0d0d4 30%, #d0d0d4 70%, #b8b8bc 100%) !important; }
.scene-home-living { background: linear-gradient(180deg, #d4c4a8 0%, #c0a888 50%, #a89070 100%) !important; }
.scene-home-study { background: linear-gradient(180deg, #c8b890 0%, #b8a878 50%, #a09868 100%) !important; }
.scene-home-bedroom { background: linear-gradient(180deg, #e0d4c4 0%, #d0c4b4 50%, #c0b4a4 100%) !important; }
.scene-home-hallway { background: linear-gradient(180deg, #d8d0c8 0%, #c8c0b8 50%, #b8b0a8 100%) !important; }
.scene-outdoor-garden { background: linear-gradient(180deg, #a8c8a0 0%, #90b888 30%, #789860 60%, #5a7848 100%) !important; }
.scene-outdoor-courtyard { background: linear-gradient(180deg, #c8b890 0%, #a89868 40%, #887848 100%) !important; }
.scene-outdoor-street { background: linear-gradient(180deg, #888892 0%, #6a6a74 50%, #4a4a54 100%) !important; }
.scene-commercial-hotel { background: linear-gradient(180deg, #d4c8b8 0%, #c0b4a4 50%, #a89888 100%) !important; }
.scene-commercial-office { background: linear-gradient(180deg, #e0e0e4 0%, #d0d0d4 50%, #c0c0c4 100%) !important; }
.scene-commercial-restaurant { background: linear-gradient(180deg, #b89878 0%, #a08868 50%, #887050 100%) !important; }
.scene-commercial-shop { background: linear-gradient(180deg, #f0f0f0 0%, #e0e0e0 50%, #d0d0d0 100%) !important; }

/* === 三面墙空间感 === */
.wall-left {
  top: 0; left: 0;
  width: 15%; height: 83%;
  background: linear-gradient(90deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 80%, transparent 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.wall-right {
  top: 0; right: 0;
  width: 15%; height: 83%;
  background: linear-gradient(270deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 80%, transparent 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.wall-floor-edge {
  bottom: 17%; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 15%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.15) 85%, transparent 100%);
}
.wall-corner-left {
  top: 0; left: 15%; width: 2px; height: 83%;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.08) 100%);
}
.wall-corner-right {
  top: 0; right: 15%; width: 2px; height: 83%;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.08) 100%);
}

/* 踢脚线 */
.baseboard {
  bottom: 13%; left: 0; right: 0; height: 4%;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.25));
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
/* 射灯 */
.spotlight {
  top: -10%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 80%;
  background: radial-gradient(ellipse at center top, rgba(255,245,220,0.3) 0%, transparent 60%);
}
/* 地面反光 */
.floor-reflection {
  bottom: 4%; left: 0; right: 0; height: 15%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.05));
}

/* === 墙面纹理 === */
.wall-texture-brick {
  top: 0; left: 0; right: 0; bottom: 17%;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 28px, rgba(0,0,0,0.12) 28px, rgba(0,0,0,0.12) 30px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 58px, rgba(0,0,0,0.10) 58px, rgba(0,0,0,0.10) 60px);
  opacity: 0.7;
}
.wall-texture-concrete {
  top: 0; left: 0; right: 0; bottom: 17%;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.04) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.03) 0%, transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.03) 0%, transparent 30%);
}
.wall-texture-marble {
  top: 0; left: 0; right: 0; bottom: 17%;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 42%, transparent 44%),
    linear-gradient(75deg, transparent 60%, rgba(0,0,0,0.04) 62%, transparent 64%),
    linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.04) 22%, transparent 24%);
}
.wall-texture-wallpaper {
  top: 0; left: 0; right: 0; bottom: 17%;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0px, transparent 8px, transparent 20px);
  opacity: 0.6;
}
.wall-texture-wood-panel {
  top: 0; left: 0; right: 0; bottom: 17%;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 80px, rgba(0,0,0,0.06) 80px, rgba(0,0,0,0.06) 82px);
  opacity: 0.4;
}
.wall-texture-plaster {
  top: 0; left: 0; right: 0; bottom: 17%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.03) 0%, transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.02) 0%, transparent 25%);
  opacity: 0.5;
}

/* === 地面 — 透视梯形 === */
.floor-wood {
  bottom: 0; left: 0; right: 0; height: 17%;
  clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 60px, rgba(0,0,0,0.15) 60px, rgba(0,0,0,0.15) 62px),
    linear-gradient(180deg, #7b5a33 0%, #6b4a23 40%, #5b3a13 100%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.25);
  border-top: 2px solid rgba(0,0,0,0.2);
}
.floor-tile {
  bottom: 0; left: 0; right: 0; height: 17%;
  clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 38px, rgba(0,0,0,0.12) 38px, rgba(0,0,0,0.12) 40px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 38px, rgba(0,0,0,0.12) 38px, rgba(0,0,0,0.12) 40px),
    linear-gradient(180deg, #c0c0c0 0%, #b0b0b0 40%, #a0a0a0 100%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.2);
}
.floor-marble {
  bottom: 0; left: 0; right: 0; height: 17%;
  clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);
  background:
    linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.08) 32%, transparent 34%),
    linear-gradient(75deg, transparent 50%, rgba(0,0,0,0.05) 52%, transparent 54%),
    linear-gradient(180deg, #d8d4cc 0%, #c8c4bc 40%, #c0bcb4 100%);
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.18);
  border-top: 1px solid rgba(255,255,255,0.3);
}
.floor-carpet {
  bottom: 0; left: 0; right: 0; height: 17%;
  clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);
  background:
    repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.04) 6px, rgba(0,0,0,0.04) 8px),
    linear-gradient(180deg, #6a4a3a 0%, #5a3a2a 40%, #4a3a2a 100%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.3);
  border-top: 2px solid rgba(0,0,0,0.15);
}
.floor-stone {
  bottom: 0; left: 0; right: 0; height: 17%;
  clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);
  background:
    radial-gradient(ellipse at 30% 40%, rgba(0,0,0,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(255,255,255,0.04) 0%, transparent 40%),
    linear-gradient(180deg, #909090 0%, #808080 40%, #707070 100%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.2);
  border-top: 2px solid rgba(0,0,0,0.15);
}
/* ART-S22.FRAME7: 同步设计器新增地面类型 */
.floor-grass {
  bottom: 0; left: 0; right: 0; height: 40%;
  clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(255,255,255,0.03) 3px, rgba(255,255,255,0.03) 4px),
    linear-gradient(180deg, #4a7828 0%, #3a6818 40%, #2a5818 100%);
  box-shadow: inset 0 4px 6px rgba(0,0,0,0.2);
}
.floor-terrazzo {
  bottom: 0; left: 0; right: 0; height: 17%;
  clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);
  background:
    radial-gradient(circle at 15% 30%, rgba(180,160,120,0.3) 0%, transparent 8%),
    radial-gradient(circle at 45% 50%, rgba(120,100,80,0.25) 0%, transparent 6%),
    radial-gradient(circle at 70% 35%, rgba(200,180,140,0.2) 0%, transparent 7%),
    radial-gradient(circle at 85% 60%, rgba(100,120,140,0.2) 0%, transparent 5%),
    linear-gradient(180deg, #c0bcb8 0%, #b0bcb4 40%, #a8a4a0 100%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.15);
}
.floor-epoxy {
  bottom: 0; left: 0; right: 0; height: 17%;
  clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #c8c8cc 0%, #b8b8bc 40%, #a8a8ac 100%);
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.1);
  border-top: 1px solid rgba(255,255,255,0.4);
}
.floor-gravel {
  bottom: 0; left: 0; right: 0; height: 35%;
  clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);
  background:
    radial-gradient(circle at 10% 20%, rgba(160,150,140,0.4) 0%, transparent 4%),
    radial-gradient(circle at 30% 40%, rgba(140,130,120,0.3) 0%, transparent 3%),
    radial-gradient(circle at 50% 30%, rgba(170,160,150,0.35) 0%, transparent 4%),
    radial-gradient(circle at 70% 50%, rgba(130,120,110,0.3) 0%, transparent 3%),
    radial-gradient(circle at 90% 35%, rgba(160,150,140,0.35) 0%, transparent 4%),
    linear-gradient(180deg, #989088 0%, #887078 40%, #787068 100%);
}
.floor-water {
  bottom: 0; left: 0; right: 0; height: 30%;
  clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 8px, rgba(255,255,255,0.04) 8px, rgba(255,255,255,0.04) 10px),
    linear-gradient(180deg, #3a68a0 0%, #2a5890 40%, #2a4880 100%);
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.2);
}

/* === 作品在场景中的定位 === */
.scene-stage .mounting {
  position: absolute !important;
  top: 5% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-height: 73% !important;
  z-index: 5 !important;
}

/* 3D 模式下隐藏传统装裱装饰元素 */
.scene-stage .mounting-string,
.scene-stage .mounting-top-rod,
.scene-stage .mounting-top-border,
.scene-stage .mounting-side-border,
.scene-stage .mounting-bottom-border,
.scene-stage .mounting-bottom-rod,
.scene-stage .mounting-seal {
  display: none !important;
}
.scene-stage .mounting-side-wrap {
  display: contents !important;
}

/* 移动端回退 — 隐藏场景层，恢复装裱元素 */
@media (max-width: 760px) {
  .scene-layers { display: none !important; }
  .scene-stage {
    display: flex !important;
    padding: 30px !important;
  }
  .scene-stage .mounting {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    max-height: 50vh !important;
  }
  .scene-stage .mounting-string,
  .scene-stage .mounting-top-rod,
  .scene-stage .mounting-top-border,
  .scene-stage .mounting-side-border,
  .scene-stage .mounting-bottom-border,
  .scene-stage .mounting-bottom-rod,
  .scene-stage .mounting-seal {
    display: revert !important;
  }
  .scene-stage .mounting-side-wrap {
    display: flex !important;
  }
}