/* ④ 3D 视图控件：右下角竖排圆钮（桌面 36px / 手机 40px），当前模式高亮。 */
#view3dControls { --v3d: 36px; position: fixed; right: 12px; bottom: calc(var(--s1-bottom, 48px) + 12px); z-index: var(--layer-stack-34); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-panel, 0 8px 24px var(--shadow-ink)); }
#view3dControls[hidden] { display: none; }
#view3dControls .v3d-btn { width: var(--v3d); height: var(--v3d); border-radius: 50%; border: 0; display: inline-grid; place-items: center; padding: 0; background: transparent; color: var(--ink); cursor: pointer; }
#view3dControls .v3d-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#view3dControls .v3d-btn:hover { background: var(--surface-hover); }
#view3dControls .v3d-btn[aria-pressed="true"] { background: var(--state-active-bg); color: var(--state-active-fg); box-shadow: inset 0 0 0 1.5px var(--state-active-border); }
#view3dControls .v3d-btn:focus-visible, #view3dControls .v3d-face:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* 视角方块：CSS 3D 小立方体，三个可见面各是一个按钮（无 WebGL、无每帧开销） */
#view3dControls .v3d-cube { width: var(--v3d); height: var(--v3d); perspective: 160px; display: grid; place-items: center; }
#view3dControls .v3d-cube-body { --s: calc(var(--v3d) * .56); position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(-36deg); }
#view3dControls .v3d-face { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); font: 600 10px/1 system-ui, "PingFang SC", sans-serif; cursor: pointer; backface-visibility: hidden; }
#view3dControls .v3d-face:hover { background: var(--state-active-bg); }
/* Global pressed-button scaling flattens the CSS 3D face hit area between
   pointerdown and pointerup. Keep these faces in the same projection. */
#view3dControls .v3d-face:active { scale: none; }
#view3dControls .v3d-face-front { transform: translateZ(calc(var(--s) / 2)); }
#view3dControls .v3d-face-top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: var(--surface-hover); }
#view3dControls .v3d-face-side { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: var(--surface-hover); }
@media (min-width: 768px) {
  /* 属性面板在右上，给角落控件留出位置 */
  html.s1.s1-v3d body #redesignContext { max-height: calc(var(--s1-app-h) - var(--s1-top) - var(--s1-bottom) - 300px) !important; }
}
@media (max-width: 767.98px) {
  #view3dControls { --v3d: 40px; right: 8px; bottom: calc(var(--s1-bottom) + 12px); gap: var(--space-1); padding: var(--space-1); }
  html.s1-has-sel #view3dControls { bottom: calc(var(--s1-bottom) + max(60px, var(--s1-context-h, 48px) + 12px)); }
}