/* ============================================================
   viewer.css — 优象在线 3D 模型查看器
   命名空间前缀：.yv-（yooox viewer）
   配色风格：SketchUp 浅灰主题
   ============================================================ */

/*
  SU 调色板（供参考）：
  --su-bg:          #c8c7c4   视口背景（SU 默认中灰）
  --su-toolbar:     #dddcda   工具栏
  --su-toolbar-bdr: #b2b0ae   工具栏下边框
  --su-tab-bar:     #cecdcb   场景 tab 条
  --su-tab-active:  #f0efed   当前场景 tab
  --su-statusbar:   #d2d1ce   状态栏
  --su-text:        #1e1d1b   主文字
  --su-text-muted:  #6a6966   辅助文字
  --su-sep:         #b4b3b0   分隔线
  --su-blue:        #2572c7   选中/高亮蓝
*/

/* ── 重置 ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── 根容器 ─────────────────────────────────────────────── */
.yv-app {
  position:        fixed;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  background:      #c8c7c4;
  color:           #1e1d1b;
  font-family:     'Inter', 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  font-size:       13px;
  user-select:     none;
  overflow:        hidden;
}

/* ── 顶部工具栏（SketchUp 现代风格）──────────────────────── */
.yv-toolbar {
  display:         flex;
  align-items:     center;
  padding:         0;
  height:          42px;
  background:      #EDEAE8;
  border-bottom:   1px solid #C4BEC8;
  box-shadow:      0 1px 3px rgba(0,0,0,0.10);
  flex-shrink:     0;
  z-index:         30;
  overflow-x:      auto;
  scrollbar-width: none;
}
.yv-toolbar::-webkit-scrollbar { display: none; }

/* 标识区（左侧：返回 + 分隔线 + 标题块）*/
.yv-tb-left {
  display:      flex;
  align-items:  center;
  flex-shrink:  0;
  padding-left: 10px;
  height:       100%;
}
.yv-tb-divider {
  width:        1px;
  height:       22px;
  background:   #C4BEC8;
  margin:       0 8px;
  flex-shrink:  0;
}
.yv-tb-title-block {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  min-width:       0;
  max-width:       220px;
  gap:             1px;
}

/* 工具区（flex-grow，模型加载后显示）*/
.yv-toolbar-tools {
  display:      flex;
  align-items:  center;
  gap:          5px;
  flex:         1;
  min-width:    0;
  padding-left: 8px;
}

/* 工具分组 pill 容器 */
.yv-tg {
  display:       flex;
  align-items:   center;
  gap:           1px;
  background:    rgba(0,0,0,0.045);
  border:        1px solid rgba(0,0,0,0.08);
  border-radius: 5px;
  padding:       2px;
  flex-shrink:   0;
}
.yv-tg .yv-btn { border-radius: 4px; }

/* 操作组（右侧，push 到最右）*/
.yv-tg-actions {
  margin-left:  auto;
  background:   transparent;
  border-color: transparent;
  padding:      2px 8px 2px 4px;
  gap:          2px;
}

/* 危险按钮（删除）*/
.yv-btn-danger { color: #c0392b; }
.yv-btn-danger:hover {
  background:   rgba(192,57,43,0.08);
  border-color: rgba(192,57,43,0.2);
  color:        #a93226;
}

/* 旧版竖向分隔线（工具栏外部或其他场景可用）*/
.yv-sep {
  width:        1px;
  height:       20px;
  background:   #C4BEC8;
  margin:       0 3px;
  flex-shrink:  0;
}

.yv-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  padding:         0 8px;
  height:          26px;
  border:          1px solid transparent;
  border-radius:   4px;
  background:      transparent;
  color:           #3a3a38;
  font-size:       12px;
  font-weight:     500;
  cursor:          pointer;
  transition:      background 0.08s, border-color 0.08s, color 0.08s;
  white-space:     nowrap;
  flex-shrink:     0;
  letter-spacing:  0.01em;
}
.yv-btn:hover  {
  background:    rgba(0,0,0,0.07);
  border-color:  #C4BEC8;
  color:         #1e1d1b;
}
.yv-btn.active {
  background:   #2572c7;
  border-color: #1e5fa8;
  color:        #fff;
  box-shadow:   inset 0 1px 2px rgba(0,0,0,0.2);
}
.yv-btn:active { background: rgba(0,0,0,0.13); }

.yv-btn svg {
  width:       15px;
  height:      15px;
  fill:        currentColor;
  flex-shrink: 0;
}
.yv-btn.active svg { fill: #fff; }

.yv-btn-icon { padding: 0 6px; }

/* 剖切面快速开关 - 拨动开关样式 */
.yv-section-toggle-switch { padding: 0 6px; border: none !important; background: transparent !important; }
.yv-toggle-track {
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #2572c7;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.yv-toggle-thumb {
  position: absolute;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: right 0.2s, left 0.2s;
}
#btn-section-toggle.section-cut-off .yv-toggle-track { background: #b8b8b8; }
#btn-section-toggle.section-cut-off .yv-toggle-thumb { right: auto; left: 2px; }

/* 视图下拉 */
.yv-dropdown {
  position:    relative;
  flex-shrink: 0;
}
.yv-dropdown-menu {
  position:      fixed;
  top:           0;
  left:          0;
  background:    #F6F2F7;
  border:        1px solid #C4BEC8;
  border-radius: 5px;
  padding:       3px 0;
  z-index:       9999;
  min-width:     136px;
  box-shadow:    0 4px 16px rgba(0,0,0,0.15);
  display:       none;
}
.yv-dropdown.open .yv-dropdown-menu { display: block; }
.yv-dropdown-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     5px 11px;
  cursor:      pointer;
  font-size:   12px;
  color:       #2a2a28;
  white-space: nowrap;
  transition:  background 0.08s;
}
.yv-dropdown-item:hover { background: #2572c7; color: #fff; }
.yv-dropdown-item:hover svg { fill: #fff; }
.yv-dropdown-item kbd {
  margin-left:   auto;
  font-size:     10px;
  color:         #888;
  background:    #EAE5EC;
  border:        1px solid #C4BEC8;
  border-radius: 3px;
  padding:       1px 4px;
}

/* ── 样式切换按钮组（互斥分段控件）─────────────────────── */
.yv-btn-group {
  display:       flex;
  align-items:   center;
  background:    rgba(120,100,125,0.10);
  border:        1px solid #C4BEC8;
  border-radius: 5px;
  padding:       2px;
  gap:           1px;
  flex-shrink:   0;
}
.yv-btn-group .yv-btn {
  border:        1px solid transparent;
  border-radius: 3px;
  height:        22px;
  padding:       0 8px;
  font-size:     11.5px;
  color:         #3a3a38;
}
.yv-btn-group .yv-btn:hover {
  background:   rgba(0,0,0,0.08);
  border-color: transparent;
  color:        #1e1d1b;
}
.yv-btn-group .yv-btn.active {
  background:   #2572c7;
  border-color: #1e5fa8;
  color:        #fff;
  box-shadow:   inset 0 1px 2px rgba(0,0,0,0.2);
}

/* ── 场景标签栏（SketchUp Scenes Tab Bar）──────────────── */
/* 外层容器：包含左右滚动箭头 + 标签区 */
.yv-scene-tabs-wrap {
  display:       flex;
  align-items:   stretch;
  height:        36px;
  background:    #DDD8DF;
  border-bottom: 1px solid #C4BEC8;
  flex-shrink:   0;
  z-index:       20;
}
.yv-scene-tabs-wrap.hidden { display: none; }

/* 左/右滚动箭头按钮 */
.yv-scene-scroll-btn {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  background:      #DDD8DF;
  border:          none;
  color:           #8a8592;
  cursor:          pointer;
  padding:         0;
  transition:      background 0.1s, color 0.1s;
}
.yv-scene-scroll-btn:hover { background: #E8E3EA; color: #1e1d1b; }
.yv-scene-scroll-btn.hidden { display: none; }

/* 内层可滚动标签区 */
.yv-scene-tabs {
  flex:            1;
  min-width:       0;
  display:         flex;
  align-items:     flex-end;
  justify-content: flex-start;
  overflow-x:      auto;
  overflow-y:      hidden;
  scrollbar-width: none;
  padding:         0 4px;
  gap:             2px;
}
.yv-scene-tabs::-webkit-scrollbar { display: none; }

.yv-scene-tab {
  flex-shrink:    0;
  display:        inline-flex;
  align-items:    center;
  padding:        0 12px;
  height:         22px;
  border:         1px solid #C4BEC8;
  border-bottom:  none;
  border-radius:  4px 4px 0 0;
  background:     #CEC8D1;
  color:          #5a5259;
  font-size:      11.5px;
  font-weight:    500;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background 0.1s, color 0.1s;
}
.yv-scene-tab:hover { background: #E8E3EA; color: #1e1d1b; }
.yv-scene-tab.active {
  background: #F6F2F7;
  color:      #1e1d1b;
  font-weight: 600;
  border-color: #C4BEC8;
  box-shadow:  0 -1px 3px rgba(0,0,0,0.08);
}

/* ── 左侧工具栏（SketchUp 风格竖排图标栏）────────────────── */
.yv-lefttoolbar {
  width:          44px;
  background:     linear-gradient(to right, #EDECEA, #E6E3E1);
  border-right:   1px solid #C4BEC8;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        6px 0;
  gap:            2px;
  z-index:        20;
  flex-shrink:    0;
  overflow-y:     auto;
  scrollbar-width: none;
}
.yv-lefttoolbar::-webkit-scrollbar { display: none; }

.yv-lefttool {
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid transparent;
  border-radius:   5px;
  background:      transparent;
  cursor:          pointer;
  color:           #3a3a38;
  flex-shrink:     0;
  position:        relative;
  transition:      background 0.08s, border-color 0.08s, color 0.08s;
}
.yv-lefttool:hover {
  background:   rgba(0,0,0,.08);
  border-color: #C4BEC8;
  color:        #1e1d1b;
}
.yv-lefttool.active {
  background:   linear-gradient(135deg, #d2e8ff, #bad5f9);
  border-color: #2572c7;
  color:        #1756a0;
  box-shadow:   inset 0 1px 2px rgba(0,0,0,.12);
}
.yv-lefttool svg { width: 20px; height: 20px; pointer-events: none; }

/* 提示文字气泡（body 层浮动 div，规避 overflow 裁剪） */
.yv-tooltip {
  position:       fixed;
  left:           0;
  top:            0;
  background:     rgba(30,29,27,0.92);
  color:          #fff;
  font-size:      12.5px;
  font-family:    'Noto Sans SC', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight:    400;
  letter-spacing: 0.04em;
  white-space:    nowrap;
  padding:        4px 10px;
  border-radius:  4px;
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.12s;
  z-index:        99999;
  transform:      translateY(-50%);
}
.yv-tooltip.visible { opacity: 1; }

.yv-lefttool-sep {
  width:      28px;
  height:     1px;
  background: #C4BEC8;
  margin:     4px 0;
  flex-shrink: 0;
}

/* 视角 FOV 数值角标（活跃时显示在左侧工具栏底部） */
.yv-fov-badge {
  display:       none;
  align-items:   center;
  justify-content: center;
  width:         36px;
  height:        20px;
  background:    rgba(37,114,199,0.90);
  color:         #fff;
  font-size:     10.5px;
  font-weight:   700;
  letter-spacing: 0.02em;
  border-radius: 4px;
  flex-shrink:   0;
  pointer-events: none;
  user-select:   none;
}
.yv-fov-badge.show { display: flex; }

/* ── FOV 调节浮层 ── */
.yv-fov-panel {
  position:        absolute;
  left:            48px;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         30;
  background:      rgba(237,234,232,0.97);
  border:          1px solid #C4BEC8;
  border-radius:   8px;
  box-shadow:      0 4px 16px rgba(0,0,0,0.18);
  padding:         10px 8px 8px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             5px;
  width:           56px;
  animation:       yv-fov-in 0.14s ease;
  user-select:     none;
  -webkit-user-select: none;
}
.yv-fov-panel[hidden] { display: none; }
@keyframes yv-fov-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-6px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.yv-fov-panel-label {
  font-size:   10.5px;
  color:       #777;
  font-weight: 600;
  line-height: 1;
}
.yv-fov-panel-val {
  font-size:   14px;
  font-weight: 700;
  color:       #1756a0;
  line-height: 1;
  min-width:   36px;
  text-align:  center;
}
.yv-fov-panel-slider-wrap {
  height:          152px;
  width:           28px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        visible;
}
.yv-fov-slider {
  width:        152px;
  height:       4px;
  transform:    rotate(-90deg);
  cursor:       pointer;
  accent-color: #2572c7;
  margin:       0;
  flex-shrink:  0;
  touch-action: none;
}
.yv-fov-panel-limits {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
  font-size:      9.5px;
  color:          #aaa;
  line-height:    1.4;
}

/* 移动端左栏：紧凑显示 */
@media (max-width: 480px) {
  .yv-lefttoolbar  { width: 36px; padding: 4px 0; gap: 1px; }
  .yv-lefttool     { width: 32px; height: 32px; }
  .yv-lefttool svg { width: 18px; height: 18px; }
  .yv-fov-badge    { width: 32px; font-size: 9.5px; }
}

/* ── 主区域 ─────────────────────────────────────────────── */
.yv-main {
  flex:     1;
  display:  flex;
  position: relative;
  overflow: hidden;
}

/* ── 视口容器 ───────────────────────────────────────────── */
.yv-viewport {
  flex:       1;
  position:   relative;
  overflow:   hidden;
  background: #c8c7c4;
}
.yv-viewport .yv-main-canvas {
  display:      block;
  width:        100% !important;
  height:       100% !important;
  touch-action: none;   /* 防止移动端默认滚动干扰旋转/缩放 */
}
.yv-gizmo-canvas {
  display: block !important;
  width:   auto !important;
  height:  auto !important;
}

/* ── 拖放遮罩 ───────────────────────────────────────────── */
.yv-drop-zone {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  background:      #c8c7c4;
  z-index:         40;
  transition:      background 0.2s;
}
.yv-drop-zone.dragover { background: #bacfe6; }
.yv-drop-zone.hidden   { display: none; }

.yv-drop-icon { opacity: 0.55; }
.yv-drop-icon svg { width: 72px; height: 72px; }

.yv-drop-title {
  font-size:   18px;
  font-weight: 600;
  color:       #3a3a38;
}
.yv-drop-hint {
  font-size: 12px;
  color:     #7a7977;
}
.yv-drop-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 20px;
  background:    #2572c7;
  color:         #fff;
  border:        none;
  border-radius: 5px;
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  transition:    background 0.12s, transform 0.08s;
  box-shadow:    0 1px 4px rgba(0,0,0,0.2);
}
.yv-drop-btn:hover  { background: #1e5fa8; }
.yv-drop-btn:active { transform: scale(0.97); }

/* ── 加载进度遮罩 ────────────────────────────────────────── */
.yv-loading {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  background:      rgba(200,199,196,0.88);
  z-index:         50;
  backdrop-filter: blur(4px);
}
.yv-loading.hidden { display: none; }

.yv-loading-bar {
  width:         240px;
  height:        3px;
  background:    #b8b7b4;
  border-radius: 2px;
  overflow:      hidden;
}
.yv-loading-fill {
  height:     100%;
  width:      0%;
  background: #2572c7;
  border-radius: 2px;
  transition: width 0.2s ease;
}
.yv-loading-text {
  font-size: 12px;
  color:     #5a5956;
}

/* ── 漫游模式提示卡片 ─────────────────────────────────── */
.yv-walk-hint {
  position: absolute;
  left:     50%;
  bottom:   24px;
  transform: translateX(-50%);
  z-index:  20;
  pointer-events: none;
}
.yv-walk-hint[hidden] { display: none; }
.yv-walk-hint-card {
  background: rgba(30, 30, 30, 0.78);
  color:      #fff;
  border-radius: 8px;
  padding:    10px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  font-size:  12px;
  text-align: center;
  backdrop-filter: blur(6px);
  pointer-events: auto;
}
.yv-walk-hint-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.yv-walk-hint-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  color: #d8d8d8;
}
.yv-walk-hint-keys b {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 1px 6px;
  margin-right: 3px;
  border-radius: 4px;
  font-weight: 600;
  color: #fff;
}
.yv-walk-speed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.yv-walk-speed-label {
  color: #d8d8d8;
  font-size: 11px;
}
.yv-walk-speed input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.yv-walk-speed input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.yv-walk-speed input[type=range]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}
.yv-walk-speed-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #ffd866;
  min-width: 36px;
  text-align: right;
}
.yv-walk-speed-tip {
  font-size: 10px;
  color: #aaa;
  margin-left: 4px;
}

/* ── 虚拟游戏手柄（触屏漫游） ────────────────────────── */
.yv-gamepad {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        50;
  display:        none;
}
/* 激活时：pointer-events: auto 覆盖父级 none，解决 iOS Safari
   "pointer-events:none 父 + all 子"touch 事件不触发的兼容性问题。
   漫游模式下 controls.enabled=false，canvas 本来就不响应触摸，
   所以整个 gamepad 覆盖视口是安全的。 */
.yv-gamepad.active {
  display:        block;
  pointer-events: auto;
  touch-action:   none;   /* iOS Safari：确保整层接管所有触摸手势 */
}

/* 左/右摇杆底座 */
.yv-stick-base {
  position:        absolute;
  bottom:          32px;
  width:           120px;
  height:          120px;
  border-radius:   50%;
  background:      rgba(255,255,255,.12);
  border:          2px solid rgba(255,255,255,.3);
  pointer-events:  all;
  touch-action:    none;
  user-select:     none;
}
.yv-stick-base.left  { left: 32px; }
.yv-stick-base.right { right: 32px; }

/* 摇杆手柄 */
.yv-stick-knob {
  position:      absolute;
  width:         52px;
  height:        52px;
  border-radius: 50%;
  background:    rgba(255,255,255,.55);
  border:        2px solid rgba(255,255,255,.8);
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  transition:    transform .05s;
  pointer-events: none;
  box-shadow:    0 2px 8px rgba(0,0,0,.3);
}

/* 升降 + 加速按钮组（左摇杆上方） */
.yv-gamepad-btns {
  position:       absolute;
  bottom:         165px;
  left:           20px;
  display:        flex;
  gap:            8px;
  pointer-events: all;
}
.yv-gamepad-btn {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      rgba(255,255,255,.18);
  border:          2px solid rgba(255,255,255,.35);
  color:           #fff;
  font-size:       18px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  touch-action:    none;
  user-select:     none;
  transition:      background .1s;
}
.yv-gamepad-btn:active,
.yv-gamepad-btn.pressed { background: rgba(255,255,255,.38); }

/* 退出漫游按钮（右上角） */
.yv-gamepad-exit {
  position:        absolute;
  top:             12px;
  right:           12px;
  padding:         8px 16px;
  border-radius:   20px;
  background:      rgba(0,0,0,.45);
  color:           #fff;
  font-size:       13px;
  font-weight:     600;
  pointer-events:  all;
  touch-action:    none;
  user-select:     none;
  cursor:          pointer;
  border:          1px solid rgba(255,255,255,.2);
}

/* ── 手柄速度调节条（顶部居中）── */
.yv-gamepad-speed {
  position:        absolute;
  top:             12px;
  left:            50%;
  transform:       translateX(-50%);
  display:         flex;
  align-items:     center;
  gap:             8px;
  background:      rgba(0,0,0,.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:          1px solid rgba(255,255,255,.15);
  border-radius:   20px;
  padding:         6px 14px;
  pointer-events:  all;
  touch-action:    none;
  user-select:     none;
  white-space:     nowrap;
  z-index:         2;
}
.yv-gamepad-speed-lbl {
  color:     rgba(255,255,255,.75);
  font-size: 12px;
}
.yv-gamepad-speed-slider {
  -webkit-appearance: none;
  appearance:         none;
  width:              110px;
  height:             4px;
  background:         rgba(255,255,255,.3);
  border-radius:      2px;
  outline:            none;
  cursor:             pointer;
}
.yv-gamepad-speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:              18px;
  height:             18px;
  border-radius:      50%;
  background:         #fff;
  cursor:             pointer;
  box-shadow:         0 1px 4px rgba(0,0,0,.45);
}
.yv-gamepad-speed-slider::-moz-range-thumb {
  width:        18px;
  height:       18px;
  border:       none;
  border-radius: 50%;
  background:   #fff;
  cursor:       pointer;
}
.yv-gamepad-speed-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:   12px;
  color:       #ffd866;
  min-width:   34px;
  text-align:  right;
}

/* ≤480px：速度条稍窄，避开退出按钮 */
@media (max-width: 480px) {
  .yv-gamepad-speed { top: 8px; padding: 5px 12px; gap: 6px; }
  .yv-gamepad-speed-slider { width: 90px; }
  .yv-gamepad-exit  { top: 8px; right: 8px; padding: 7px 12px; font-size: 12px; }
}
/* 十字准星 */
.yv-gamepad-crosshair {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%);
  width:           22px;
  height:          22px;
  pointer-events:  none;
}
.yv-gamepad-crosshair::before,
.yv-gamepad-crosshair::after {
  content:     '';
  position:    absolute;
  background:  rgba(255,255,255,.7);
  border-radius: 1px;
}
.yv-gamepad-crosshair::before { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }
.yv-gamepad-crosshair::after  { height: 2px; width: 100%; top: 50%; transform: translateY(-50%); }

/* ── 状态栏（模仿 SU 底部状态栏）──────────────────────── */
.yv-statusbar {
  display:       flex;
  align-items:   center;
  padding:       0 10px;
  height:        24px;
  background:    linear-gradient(to bottom, #DDD8DF, #D3CDD6);
  border-top:    1px solid #C4BEC8;
  flex-shrink:   0;
  font-size:     11px;
  color:         #5a5956;
  z-index:       30;
  overflow:      hidden;
  gap:           12px;
}
.yv-statusbar.hidden { display: none; }

.yv-status-name {
  color:         #2a2a28;
  font-weight:   600;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  max-width:     180px;
}
.yv-status-hint {
  flex:         1;
  overflow:     hidden;
  white-space:  nowrap;
  text-overflow: ellipsis;
}
.yv-status-select {
  flex-shrink:  0;
  white-space:  nowrap;
  font-weight:  500;
  overflow:     hidden;
  text-overflow: ellipsis;
  max-width:    260px;
  transition:   color 0.15s;
}
.yv-status-info {
  margin-left: auto;
  white-space: nowrap;
  color:       #6a6966;
}

/* ── 图层悬浮面板（模仿 SU 标记面板）──────────────────── */
.yv-layers-panel {
  position:       absolute;
  top:            8px;
  right:          8px;
  width:          210px;
  max-height:     calc(100% - 16px);
  background:     #f0efed;
  border:         1px solid #b4b3b0;
  border-radius:  5px;
  box-shadow:     0 4px 16px rgba(0,0,0,0.18);
  z-index:        50;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}
.yv-layers-panel.hidden { display: none; }

.yv-layers-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         7px 10px 6px;
  border-bottom:   1px solid #C4BEC8;
  background:      linear-gradient(to bottom, #F6F2F7, #EAE5EC);
  font-size:       12px;
  font-weight:     600;
  color:           #1e1d1b;
  flex-shrink:     0;
}
.yv-layers-close {
  background:  transparent;
  border:      none;
  color:       #888;
  font-size:   15px;
  cursor:      pointer;
  line-height: 1;
  padding:     0 2px;
}
.yv-layers-close:hover { color: #1e1d1b; }

.yv-layers-list {
  overflow-y: auto;
  flex:       1;
  padding:    3px 0;
}
.yv-layer-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     2px 8px;
  transition:  background 0.08s;
}
.yv-layer-row:hover { background: #EDE8EF; }

.yv-layer-eye {
  flex-shrink:     0;
  width:           22px;
  height:          22px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          none;
  border-radius:   3px;
  cursor:          pointer;
  color:           #2572c7;
  padding:         0;
  transition:      color 0.08s, background 0.08s;
}
.yv-layer-eye svg { width: 13px; height: 13px; }
.yv-layer-eye.off { color: #b0afac; }
.yv-layer-eye:hover { background: rgba(0,0,0,0.08); }

.yv-layer-name {
  font-size:     11.5px;
  color:         #2a2a28;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  flex:          1;
}
.yv-layer-name.hidden-layer { color: #aaa; }

/* ── 图层颜色色块 ──────────────────────────────────────── */
.yv-layer-color {
  flex-shrink:   0;
  width:         14px;
  height:        14px;
  border-radius: 2px;
  border:        1px solid rgba(0,0,0,0.18);
  box-shadow:    inset 0 0 0 1px rgba(255,255,255,0.4);
}
.yv-layer-color-empty {
  background:    repeating-linear-gradient(45deg, #e0e0e0 0 4px, #f5f5f5 4px 8px);
  border-style:  dashed;
}

/* ── 图层面板工具栏（颜色随图层 / 排序）─────────────────── */
.yv-layers-toolbar {
  display:        flex;
  align-items:    center;
  gap:            4px;
  padding:        5px 8px;
  border-bottom:  1px solid #d8d3da;
  background:     #f8f6f9;
  flex-shrink:    0;
  flex-wrap:      wrap;
}
.yv-layers-tb-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  height:         22px;
  padding:        0 8px;
  border:         1px solid #c9c4cb;
  border-radius:  3px;
  background:     #fff;
  color:          #2a2a28;
  font-size:      11px;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background 0.08s, border-color 0.08s, color 0.08s;
}
.yv-layers-tb-btn:hover { background: #eef3f9; border-color: #2572c7; }
.yv-layers-tb-btn.active {
  background:     #2572c7;
  color:          #fff;
  border-color:   #2572c7;
}
.yv-layers-tb-btn.active svg { color: #fff; }
.yv-layers-tb-btn svg { color: #2572c7; }
.yv-layers-tb-btn.active svg { color: #fff; }
.yv-layers-sort {
  display:        flex;
  gap:            3px;
}
.yv-sort-btn .yv-sort-arrow {
  font-weight:    700;
  color:          #2572c7;
  min-width:      9px;
  display:        inline-block;
  text-align:     left;
}
.yv-sort-btn.active .yv-sort-arrow { color: #fff; }

/* ── 图层文件夹 ─────────────────────────────────────────── */
.yv-folder-row {
  cursor: pointer;
  user-select: none;
  background: #EAE5EC;
}
.yv-folder-row:hover { background: #E0D9E3; }

.yv-folder-arrow {
  font-size:   10px;
  color:       #666;
  flex-shrink: 0;
  transition:  transform 0.15s;
  line-height: 1;
}
.yv-folder-group.collapsed > .yv-folder-row .yv-folder-arrow {
  transform: rotate(-90deg);
}

.yv-folder-icon { flex-shrink: 0; }

.yv-folder-children {
  overflow: hidden;
  transition: max-height 0.15s ease;
  max-height: 9999px;
}
.yv-folder-group.collapsed > .yv-folder-children {
  max-height: 0;
}

/* ── 剖切面面板 ─────────────────────────────────────────── */
.yv-section-panel {
  position:       absolute;
  top:            8px;
  right:          8px;
  width:          210px;
  max-height:     calc(100% - 16px);
  background:     #f0efed;
  border:         1px solid #b4b3b0;
  border-radius:  5px;
  box-shadow:     0 4px 16px rgba(0,0,0,0.18);
  z-index:        50;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}
.yv-section-panel.hidden { display: none; }

.yv-section-list {
  overflow-y: auto;
  flex:       1;
  padding:    6px 0;
}

/* iOS 风格拨动开关 */
.yv-sp-switch {
  position:     relative;
  display:      inline-block;
  width:        32px;
  height:       18px;
  flex-shrink:  0;
  cursor:       pointer;
}
.yv-sp-switch input {
  opacity: 0;
  width:   0;
  height:  0;
  position: absolute;
}
.yv-sp-slider {
  position:      absolute;
  inset:         0;
  background:    #c8c7c4;
  border-radius: 18px;
  transition:    background 0.18s;
}
.yv-sp-slider::before {
  content:       '';
  position:      absolute;
  width:         12px;
  height:        12px;
  left:          3px;
  top:           3px;
  background:    #fff;
  border-radius: 50%;
  transition:    transform 0.18s;
  box-shadow:    0 1px 3px rgba(0,0,0,0.25);
}
.yv-sp-switch input:checked + .yv-sp-slider {
  background: #2572c7;
}
.yv-sp-switch input:checked + .yv-sp-slider::before {
  transform: translateX(14px);
}
.yv-sp-switch:hover .yv-sp-slider { filter: brightness(0.95); }
/* 剖切面面板顶部总开关（复用 sp-switch 尺寸） */
.yv-sp-all-toggle { position:relative; display:inline-block; width:32px; height:18px; flex-shrink:0; cursor:pointer; margin-left:auto; margin-right:6px; }
.yv-sp-all-toggle input { opacity:0; width:0; height:0; position:absolute; }
.yv-sp-all-toggle .yv-sp-slider { position:absolute; inset:0; background:#c8c7c4; border-radius:18px; transition:background 0.18s; }
.yv-sp-all-toggle .yv-sp-slider::before { content:''; position:absolute; width:12px; height:12px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform 0.18s; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.yv-sp-all-toggle input:checked + .yv-sp-slider { background:#2572c7; }
.yv-sp-all-toggle input:checked + .yv-sp-slider::before { transform:translateX(14px); }

/* ── Toast 提示 ─────────────────────────────────────────── */
.yv-toast {
  position:       fixed;
  bottom:         48px;
  left:           50%;
  transform:      translateX(-50%) translateY(8px);
  background:     rgba(30,29,27,0.88);
  color:          #f0efed;
  padding:        6px 14px;
  border-radius:  4px;
  font-size:      11.5px;
  white-space:    nowrap;
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.18s, transform 0.18s;
  z-index:        200;
}
.yv-toast.show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ── 工具栏占位 ─────────────────────────────────────────── */
.yv-toolbar-spacer { flex: 1; }

/* ── 全屏模式 ───────────────────────────────────────────── */
:fullscreen .yv-toolbar,
:fullscreen .yv-statusbar { display: none; }
:-webkit-full-screen .yv-toolbar,
:-webkit-full-screen .yv-statusbar { display: none; }

/* ── 滚动条 ─────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: #d0cfcc; }
::-webkit-scrollbar-thumb   { background: #b0afac; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #989795; }

/* ── 显示设置面板（样式面板）──────────────────────────── */
.yv-style-panel {
  position:        absolute;
  top:             8px;
  right:           8px;
  width:           252px;
  max-height:      calc(100% - 16px);
  background:      #f0efed;
  border:          1px solid #b4b3b0;
  border-radius:   5px;
  box-shadow:      0 4px 16px rgba(0,0,0,0.18);
  z-index:         50;
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
}
.yv-style-panel.hidden { display: none; }

.yv-style-body {
  overflow-y: auto;
  flex:       1;
  padding-bottom: 6px;
}

.yv-style-group {
  font-size:      10.5px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          #7a7977;
  padding:        8px 10px 3px;
  border-top:     1px solid #dddbd9;
  margin-top:     2px;
}
.yv-style-body > .yv-style-group:first-child {
  border-top:  none;
  margin-top:  0;
}

.yv-style-row {
  display:     flex;
  align-items: center;
  padding:     4px 10px;
  gap:         7px;
}
.yv-style-row > label:first-child {
  font-size:   11.5px;
  color:       #3a3a38;
  flex:        0 0 62px;
  white-space: nowrap;
}
.yv-style-row input[type=range] {
  flex:               1;
  height:             3px;
  -webkit-appearance: none;
  appearance:         none;
  background:         #ccc;
  border-radius:      2px;
  outline:            none;
  cursor:             pointer;
}
.yv-style-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:              13px;
  height:             13px;
  border-radius:      50%;
  background:         #2572c7;
  cursor:             pointer;
  box-shadow:         0 1px 3px rgba(0,0,0,0.3);
}
.yv-style-row input[type=range]::-moz-range-thumb {
  width:        13px;
  height:       13px;
  border:       none;
  border-radius: 50%;
  background:   #2572c7;
  cursor:       pointer;
}
.yv-style-val {
  font-size:   10.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:       #5a5956;
  min-width:   34px;
  text-align:  right;
  flex-shrink: 0;
}
.yv-style-footer {
  display:    flex;
  gap:        8px;
  padding:    8px 10px 4px;
  border-top: 1px solid #dddbd9;
  margin-top: 4px;
}
.yv-style-footer .yv-btn {
  flex:            1;
  justify-content: center;
  font-size:       11.5px;
}

/* ── 响应式（移动端 ≤640px）────────────────────────────── */
@media (max-width: 640px) {
  /* 工具栏 */
  .yv-toolbar       { padding: 0; height: 46px; }
  .yv-btn           { padding: 0 6px; font-size: 11px; }
  .yv-btn span      { display: none; }
  .yv-btn-icon      { padding: 0 7px; }
  .yv-tb-title-block { max-width: 140px; }
  .yv-tg-actions    { padding-right: 4px; }
  .vi-title         { font-size: 12px; }

  /* 场景标签 — 更高，更易点击 */
  .yv-scene-tabs-wrap { height: 32px; }
  .yv-scene-tabs { padding: 0 6px; gap: 3px; }
  .yv-scene-tab  { height: 28px; padding: 0 12px; font-size: 12px; }

  /* 状态栏 */
  .yv-statusbar .yv-status-hint   { display: none; }
  .yv-statusbar .yv-status-info   { display: none; }

  /* 加载进度条 */
  .yv-loading-bar  { width: min(72%, 320px); height: 4px; }
  .yv-loading-text { font-size: 13px; }

  /* 面板 — 从底部弹出，全宽，圆角顶部 */
  .yv-layers-panel,
  .yv-section-panel {
    top:           auto;
    bottom:        0;
    left:          0;
    right:         0;
    width:         100%;
    max-height:    55%;
    border-radius: 14px 14px 0 0;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
    box-shadow:    0 -4px 24px rgba(0,0,0,0.22);
  }
  .yv-style-panel {
    top:           auto;
    bottom:        0;
    left:          0;
    right:         0;
    width:         100%;
    max-height:    68%;
    border-radius: 14px 14px 0 0;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
    box-shadow:    0 -4px 24px rgba(0,0,0,0.22);
  }

  /* 面板顶部拖拽指示条 */
  .yv-layers-panel  .yv-layers-header::before,
  .yv-section-panel .yv-layers-header::before,
  .yv-style-panel   .yv-layers-header::before {
    content:       '';
    display:       block;
    position:      absolute;
    top:           6px;
    left:          50%;
    transform:     translateX(-50%);
    width:         36px;
    height:        3px;
    border-radius: 2px;
    background:    #b4b3b0;
  }
  .yv-layers-header { position: relative; padding-top: 14px; }
}

/* ── 触屏设备触摸目标优化 ───────────────────────────────── */
@media (pointer: coarse) {
  .yv-btn          { height: 34px; padding: 0 10px; min-width: 34px; }
  .yv-btn-icon     { padding: 0 8px; }
  .yv-btn-group .yv-btn { height: 30px; }
  .yv-scene-tabs-wrap { height: 38px; }
  .yv-scene-tab    { padding: 0 14px; height: 32px; font-size: 13px; }
  .yv-scene-scroll-btn { width: 28px; }
  .yv-layer-row    { padding: 8px 10px; }
  .yv-layer-eye    { width: 32px; height: 32px; }
  .yv-dropdown-item { padding: 10px 14px; font-size: 13px; }
  /* 左侧工具栏图标 */
  .yv-lefttool     { width: 40px; height: 40px; }
  .yv-lefttool svg { width: 22px; height: 22px; }
  /* 样式面板滑块更大 */
  .yv-style-row    { padding: 6px 10px; }
  .yv-style-row input[type=range] { height: 4px; }
  .yv-style-row input[type=range]::-webkit-slider-thumb { width: 18px; height: 18px; }
  .yv-style-row input[type=range]::-moz-range-thumb     { width: 18px; height: 18px; }
  /* 面板关闭按钮 */
  .yv-layers-close { font-size: 18px; padding: 2px 6px; min-width: 28px; min-height: 28px; }
  /* 漫游速度滑块 */
  .yv-walk-speed input[type=range] { height: 4px; }
  .yv-walk-speed input[type=range]::-webkit-slider-thumb { width: 18px; height: 18px; }
  /* toast 移至更高位置，避免遮挡手指 */
  .yv-toast { bottom: 64px; }
}

/* ── 分享 / 嵌入 Modal ──────────────────────────────────── */
.yv-modal {
  position:         fixed;
  inset:            0;
  background:       rgba(0,0,0,0.45);
  z-index:          300;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          16px;
}
.yv-modal.hidden { display: none; }

.yv-modal-box {
  background:    #f0efed;
  border:        1px solid #b4b3b0;
  border-radius: 6px;
  width:         100%;
  max-width:     520px;
  box-shadow:    0 8px 32px rgba(0,0,0,0.28);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
}

.yv-modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         9px 12px 8px;
  background:      linear-gradient(to bottom, #e4e3e1, #d8d7d5);
  border-bottom:   1px solid #c8c7c4;
  font-size:       12px;
  font-weight:     600;
  color:           #1e1d1b;
  flex-shrink:     0;
}
.yv-modal-close {
  background: transparent;
  border:     none;
  color:      #888;
  font-size:  16px;
  cursor:     pointer;
  padding:    0 2px;
  line-height: 1;
}
.yv-modal-close:hover { color: #1e1d1b; }

.yv-modal-body {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.yv-modal-label {
  font-size:   11px;
  color:       #6a6966;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.yv-modal-textarea {
  width:         100%;
  height:        72px;
  resize:        vertical;
  font-family:   'SF Mono', 'Consolas', monospace;
  font-size:     11.5px;
  padding:       7px 8px;
  background:    #fff;
  border:        1px solid #c0bfbc;
  border-radius: 4px;
  color:         #2a2a28;
  outline:       none;
  box-sizing:    border-box;
}
.yv-modal-textarea:focus { border-color: #2572c7; }

.yv-modal-actions {
  display:    flex;
  gap:        8px;
  align-items: center;
}
.yv-modal-btn {
  padding:       6px 14px;
  background:    #2572c7;
  color:         #fff;
  border:        none;
  border-radius: 4px;
  font-size:     12px;
  font-weight:   500;
  cursor:        pointer;
  transition:    background 0.1s;
}
.yv-modal-btn:hover { background: #1e5fa8; }
.yv-modal-btn.secondary {
  background: transparent;
  border:     1px solid #b4b3b0;
  color:      #3a3a38;
}
.yv-modal-btn.secondary:hover { background: rgba(0,0,0,0.06); }
.yv-modal-hint {
  font-size: 11px;
  color:     #888;
  margin-left: auto;
}

/* ── 手机竖屏（≤480px）额外优化 ────────────────────────── */
@media (max-width: 480px) {
  .yv-toolbar        { height: 44px; }
  .yv-tb-title-block { max-width: 116px; }
  .vi-title          { font-size: 11.5px; }
  /* 状态栏：只保留手势提示 */
  .yv-statusbar .yv-status-name   { display: none; }
  .yv-statusbar .yv-status-select { display: none; }
  .yv-statusbar .yv-status-hint   { display: block; flex: 1; font-size: 11px; }
  /* FOV 面板：紧贴左工具栏右侧，保持竖向布局 */
  .yv-fov-panel {
    left:      40px;
    top:       50%;
    bottom:    auto;
    transform: translateY(-50%);
    flex-direction: column;
    width:     52px;
    padding:   8px 6px;
    gap:       5px;
    align-items: center;
  }
  .yv-fov-panel-slider-wrap {
    width:       28px;
    height:      120px;
    align-items: center;
  }
  .yv-fov-slider {
    width:     120px;
    transform: rotate(-90deg);
  }
  .yv-fov-panel-limits { flex-direction: column; gap: 0; }
  /* 漫游手柄：略小，避免遮挡主视口 */
  .yv-stick-base         { width: 100px; height: 100px; }
  .yv-stick-base.left    { left: 18px; bottom: 22px; }
  .yv-stick-base.right   { right: 18px; bottom: 22px; }
  .yv-stick-knob         { width: 44px; height: 44px; }
  .yv-gamepad-btns       { left: 12px; bottom: 136px; }
}

/* ── iPad（641px–1024px）────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  /* 工具栏保持 PC 高度，不额外加高 */
  .yv-toolbar { height: 40px; }

  /* 顶部按钮：比 pointer:coarse 的 34px 缩回到 30px，依然好点击 */
  .yv-btn           { height: 30px; padding: 0 8px; min-width: 30px; font-size: 12px; }
  .yv-btn-icon      { padding: 0 7px; }
  .yv-btn-group .yv-btn { height: 26px; font-size: 11.5px; }

  /* 左侧工具栏：紧凑 */
  .yv-lefttoolbar  { width: 44px; }
  .yv-lefttool     { width: 38px; height: 38px; }
  .yv-lefttool svg { width: 20px; height: 20px; }
  .yv-fov-panel    { left: 50px; }
  .yv-fov-badge    { width: 34px; font-size: 10px; }

  /* 场景标签：比 pointer:coarse 的 32px 略小 */
  .yv-scene-tabs-wrap { height: 27px; }
  .yv-scene-tab  { height: 23px; padding: 0 12px; font-size: 12px; }

  /* 下拉菜单 */
  .yv-dropdown-item { padding: 8px 12px; font-size: 12px; }

  /* 标题区 */
  .yv-tb-title-block { max-width: 180px; }

  /* 面板宽度：iPad 宽屏阅读更舒适 */
  .yv-layers-panel  { width: 230px; }
  .yv-section-panel { width: 230px; }
  .yv-style-panel   { width: 260px; }
  .yv-style-row       { padding: 5px 10px; }
  .yv-style-row > label:first-child { flex: 0 0 64px; }

  /* 图层行 */
  .yv-layer-row  { padding: 6px 8px; }
  .yv-layer-eye  { width: 28px; height: 28px; }
}

/* ── iOS 安全区域（刘海 / Home 条）────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .yv-toolbar {
    padding-left:  max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .yv-statusbar {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(24px + env(safe-area-inset-bottom));
  }
  .yv-toast {
    bottom: max(48px, calc(32px + env(safe-area-inset-bottom)));
  }
}
/* 移动端面板避开 Home 条 */
@media (max-width: 640px) {
  @supports (padding: env(safe-area-inset-bottom)) {
    .yv-layers-panel,
    .yv-section-panel,
    .yv-style-panel {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}