* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* SVG 图标：颜色继承 currentColor，各处通过 width/height 控制大小 */
svg.ic { flex: none; display: inline-block; vertical-align: middle; }
body {
  display: flex; flex-direction: column; overflow: hidden;
  font: 13px/1.5 "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #2c3e50;
}

/* 顶部工具栏：单行图标，不换行，过窄时横向滚动
   三栏网格：品牌居左 | 快捷菜单绝对居中 | 右侧空白对称 */
.tb {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 4px; padding: 9px 10px; background: #2c3e50; border-bottom: 1px solid #1a252f;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: #56708c #2c3e50;
}
.tb::-webkit-scrollbar { height: 4px; }
.tb::-webkit-scrollbar-thumb { background: #56708c; border-radius: 2px; }
.brand {
  justify-self: start; flex: none; color: #fff; font-weight: bold; margin-right: 8px;
  white-space: nowrap; font-size: 14px;
  display: flex; align-items: center; gap: 7px;
}
.brand .logo { height: 15.6px; width: auto; display: block; }
/* 快捷菜单整体：三栏网格的中间列，屏幕水平居中 */
.tb-menu {
  display: flex; align-items: center; gap: 4px;
  justify-self: center; grid-column: 2;
}
.group {
  display: flex; align-items: center; gap: 3px; flex: none;
  padding: 0 6px; border-left: 1px solid #46607a;
}
.group:first-of-type { border-left: none; }
.tb button, .tb .btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 34px; height: 32px; padding: 0 8px;
  border: 1px solid #56708c; border-radius: 5px;
  background: #3b5872; color: #eaf2f8; cursor: pointer;
  font-size: 13px; line-height: 1; white-space: nowrap; user-select: none;
}
.tb button i, .tb .btn i { display: flex; align-items: center; justify-content: center; line-height: 0; }
.tb svg.ic { width: 18px; height: 18px; flex: none; }
.tb button:hover, .tb .btn:hover { background: #4a6b8a; }
.tb button.active { background: #1abc9c; border-color: #16a085; color: #fff; }
/* 右上角反馈入口：低频功能，幽灵图标样式——默认无底色无边框仅小图标，hover 才显现按钮底 */
.tb a.btn { text-decoration: none; }
.tb .tb-feedback {
  justify-self: end;
  min-width: 26px; width: 26px; height: 26px; padding: 0;
  background: transparent; border-color: transparent;
  color: #b8c8d8;
}
.tb .tb-feedback:hover { background: #4a6b8a; border-color: #56708c; color: #fff; }
.tb .tb-feedback svg.ic { width: 15px; height: 15px; }

/* 主区域 */
main { flex: 1; display: flex; min-height: 0; position: relative; }
#cv { flex: 1; display: block; min-width: 0; background: #f6f8fa; cursor: crosshair; }

/* 视图区容器：2D 画布 + 3D 画布 + 右上角 2D/3D 切换按钮 */
#view-wrap { flex: 1; min-width: 0; position: relative; display: flex; }
#cv3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #151a21; }
#cv3d[hidden] { display: none; }
#btn-3d { /* 2D/3D 切换：纯文字按钮 */
  position: absolute; top: 10px; right: 12px; z-index: 7;
  height: 30px; padding: 0 12px;
  border: 1px solid #c4ccd6; border-radius: 6px; background: rgba(255,255,255,.94);
  color: #2c3e50; font-size: 12px; font-weight: bold; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); user-select: none;
}
#btn-3d:hover { background: #fff; border-color: #2f6fb2; color: #2f6fb2; }
#btn-3d.active { background: #1abc9c; border-color: #16a085; color: #fff; }
/* 3D 查看模式：编辑面板直接隐藏腾出视图空间，顶栏编辑按钮置灰（仅查看，不可编辑） */
body.mode3d #toolbox, body.mode3d #props, body.mode3d #wizard,
body.mode3d #props-x { display: none; }
body.mode3d .tb .group.g-edit { pointer-events: none; opacity: .5; }

/* 左侧建模对象工具条（CAD 式竖排） */
#toolbox {
  width: 56px; flex: none; display: flex; flex-direction: column; gap: 4px;
  padding: 6px 4px; background: #2c3e50; border-right: 1px solid #1a252f;
  overflow-y: auto;
}
#toolbox button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 5px; border: 1px solid #56708c; border-radius: 6px;
  background: #3b5872; color: #eaf2f8; cursor: pointer;
}
#toolbox button i { display: flex; align-items: center; justify-content: center; line-height: 0; }
#toolbox svg.ic { width: 19px; height: 19px; }
#toolbox button span { font-size: 10px; white-space: nowrap; }
#toolbox button:hover { background: #4a6b8a; }
#toolbox button.active { background: #1abc9c; border-color: #16a085; }

/* 右侧属性面板（右上角 ❯ 小按钮折叠/展开） */
#props {
  width: 280px; flex: none; overflow-y: auto;
  border-left: 1px solid #ddd; background: #fff; padding: 10px 12px;
}
#props-x { /* 极简：悬浮在属性栏内部左上角的一个 > 符号，无背景按钮（面板宽 280，right:268 = 面板内左缘） */
  position: absolute; top: 14px; right: 264px; z-index: 6; padding: 0 2px; /* 与面板首个标题水平对齐 */
  border: none; background: none; color: #bbb; font-size: 13px; line-height: 1; cursor: pointer;
}
#props-x:hover { color: #333; }
main.phide #props { display: none; }
main.phide #props-x { right: 4px; /* 收起后留在画布右缘 */ }
main.phide #btn-3d { right: 30px; /* 收起后 < 图标浮在右缘，3D 按钮左移让位 */ }
#props h3 {
  font-size: 14px; margin: 10px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid #eee; color: #2c3e50;
}
#props h3:first-child { margin-top: 0; margin-left: 16px; /* 左上角给折叠符 > 留位 */ }
.pr { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pr span { flex: 0 0 80px; text-align: right; color: #666; }
.pr input, .pr select {
  flex: 1; min-width: 0; padding: 4px 6px;
  border: 1px solid #ccc; border-radius: 4px; font-size: 12px;
}
.pr input:focus, .pr select:focus { outline: none; border-color: #1abc9c; }
.pr input[readonly] { background: #f5f5f5; color: #888; }
.stat p { margin: 4px 0; color: #555; }
/* 双选净距块（与画布垂足正交标尺联动，同青绿色） */
.pairdim { margin: 6px 0 10px; padding: 7px 9px; border-left: 3px solid #0e9f8f; border-radius: 4px; background: #f0faf8; font-size: 12px; }
.pairdim-t { font-weight: 600; color: #2c3e50; }
.pairdim small { color: #8a94a6; font-weight: 400; }
.pairdim-note { color: #9aa5b1; font-size: 11px; }
/* 属性面板批量操作按钮（多选时） */
.pbtns { display: flex; gap: 6px; margin: 8px 0; }
.pbtns button {
  flex: 1; padding: 6px; border: 1px solid #1abc9c; background: #fff;
  color: #16a085; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.pbtns button:hover { background: #eafaf6; }
.pbtns svg.ic { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
/* 机柜接口配置编辑器（类型×数量列表） */
.sock-box { margin: 6px 0; padding: 6px 8px; border: 1px solid #e0e6ec; border-radius: 6px; background: #fbfcfd; }
.sock-head { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #2c3e50; }
.sock-head span { font-weight: 400; color: #8a94a6; }
.sock-item { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.sock-item select, .sock-item input { padding: 3px 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; }
.sock-item select { flex: 1; min-width: 0; }
.sock-item input { width: 50px; flex: none; }
.sock-item select:focus, .sock-item input:focus { outline: none; border-color: #1abc9c; }
.sock-item button {
  flex: none; width: 22px; height: 22px; padding: 0; border: none; background: none;
  color: #b03a2e; cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.sock-item button:hover { background: #fbeae8; }
.sock-item button svg.ic { width: 12px; height: 12px; }
.sock-add {
  width: 100%; padding: 4px; border: 1px dashed #b8c2ce; border-radius: 4px;
  background: #fff; color: #2f6fb2; font-size: 12px; cursor: pointer;
}
.sock-add:hover { background: #eef4fb; }
.tip { font-size: 12px; color: #999; }
.tip p { margin: 4px 0; }

/* 即时提示浮层（替代原生 title，悬停立即显示） */
.tip-box {
  position: fixed; z-index: 9999; pointer-events: none;
  max-width: 340px; padding: 5px 10px;
  background: rgba(30, 42, 54, .96); color: #fff;
  border: 1px solid #1a252f; border-radius: 5px;
  font-size: 12px; line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden;
  transition: opacity .1s ease;
}
.tip-box.on { opacity: 1; visibility: visible; }

/* 右键快速操作菜单（浮层，样式与提示浮层同体系） */
.ctx-menu {
  position: fixed; z-index: 1000; min-width: 168px; padding: 4px;
  background: #fff; border: 1px solid #c4ccd6; border-radius: 7px;
  box-shadow: 0 6px 22px rgba(20, 35, 50, .22);
  font-size: 12.5px; user-select: none;
}
.ctx-head {
  padding: 5px 10px 6px; margin-bottom: 2px;
  border-bottom: 1px solid #eef1f4;
  color: #8a94a6; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.ctx-item {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 5px; cursor: pointer; color: #2c3e50;
  white-space: nowrap;
}
.ctx-item:hover { background: #eef4fb; }
.ctx-item svg.ic { width: 14px; height: 14px; color: #5c6b7c; flex: none; }
.ctx-item span { flex: 1; }
.ctx-item b { color: #9aa5b1; font-weight: normal; }
/* 子菜单（替换为 ▸）：悬停展开 */
.ctx-sub {
  display: none; position: absolute; left: calc(100% - 4px); top: -5px;
  min-width: 120px; padding: 4px;
  background: #fff; border: 1px solid #c4ccd6; border-radius: 7px;
  box-shadow: 0 6px 22px rgba(20, 35, 50, .22);
}
.ctx-hassub:hover > .ctx-sub { display: block; }

/* 重排/补插确认提示条：画布顶部居中，非模态（不遮挡工具栏，不阻断画布操作） */
.act-bar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 8; display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 120px); padding: 7px 12px;
  background: rgba(30, 42, 54, .96); color: #fff;
  border: 1px solid #1a252f; border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  font-size: 12.5px; line-height: 1.5;
}
.act-msg { white-space: normal; }
.act-bar button {
  flex: none; padding: 4px 12px; border: 1px solid #56708c; border-radius: 5px;
  background: #3b5872; color: #eaf2f8; cursor: pointer; font-size: 12.5px;
}
.act-bar button:hover { background: #4a6b8a; }
.act-bar button.act-primary { background: #1abc9c; border-color: #16a085; color: #fff; font-weight: 600; }
.act-bar button.act-primary:hover { background: #16a085; }

/* 底部状态栏 */
.sb {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 4px 12px; background: #ecf0f1; border-top: 1px solid #d5dbdb;
  color: #555; font-size: 12px;
}
#st-hint { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#st-coords, #st-info { white-space: nowrap; }
/* 状态栏缩放组（PPT 风格：缩小 - 百分比 - 放大 + 适应窗口） */
.zg {
  display: flex; align-items: center; gap: 2px; flex: none;
  padding-left: 12px; border-left: 1px solid #d0d8da;
}
.zg button {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; padding: 0;
  border: 1px solid transparent; border-radius: 4px;
  background: none; color: #5b6b78; cursor: pointer;
}
.zg button:hover { background: #e2e8ea; border-color: #c8d2d5; color: #2c3e50; }
.zg button:active { background: #d5dde0; }
.zg svg.ic { width: 14px; height: 14px; }
#st-zoom {
  min-width: 46px; text-align: center; color: #4a5a66;
  font-variant-numeric: tabular-nums; cursor: default; user-select: none;
}

/* 左侧工勘向导面板 */
#wizard {
  width: 256px; flex: none; overflow-y: auto; display: flex; flex-direction: column;
  border-right: 1px solid #ddd; background: #fbfcfe;
}
.wz-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; background: #eaf4fb; border-bottom: 1px solid #d5e5f0;
}
.wz-head b { flex: 1; color: #1c4e80; font-size: 14px; }
.wz-head svg.ic { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2.5px; }
.wz-dots i {
  display: inline-flex; width: 18px; height: 18px; margin-right: 3px;
  border-radius: 50%; background: #d5dbe3; color: #fff; font-style: normal;
  font-size: 11px; align-items: center; justify-content: center; cursor: pointer;
}
.wz-dots i.on { background: #1abc9c; }
.wz-x { border: none; background: none; font-size: 16px; cursor: pointer; color: #999; }
.wz-x:hover { color: #333; }
.wz-body { flex: 1; padding: 10px 12px; }
.wz-stepno {
  display: inline-block; background: #1abc9c; color: #fff;
  border-radius: 3px; padding: 1px 8px; font-size: 11px; margin-bottom: 6px;
}
.wz-tip { margin: 4px 0 10px; color: #2c3e50; line-height: 1.6; }
.wz-body label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 6px; color: #555; font-size: 12px;
}
.wz-body input, .wz-body select {
  width: 108px; padding: 4px 6px; border: 1px solid #ccc;
  border-radius: 4px; font-size: 12px;
}
.wz-body button {
  display: block; width: 100%; margin: 6px 0; padding: 6px;
  border: 1px solid #1abc9c; background: #fff; color: #16a085;
  border-radius: 4px; cursor: pointer; font-size: 12px;
}
.wz-body button:hover { background: #eafaf6; }
.wz-body svg.ic, .wz-modal svg.ic { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.wz-body .wz-primary { background: #1abc9c; color: #fff; font-size: 13px; }
.wz-body .wz-primary:hover { background: #16a085; }
.wz-btns { display: flex; gap: 6px; }
.wz-btns button { flex: 1; margin: 6px 0; }
.wz-note { margin-top: 8px; font-size: 12px; color: #999; line-height: 1.7; }
.wz-note a { color: #1abc9c; cursor: pointer; text-decoration: underline; }
.wz-stats {
  background: #fff; border: 1px solid #e3e8ee; border-radius: 4px;
  padding: 8px; margin: 6px 0; line-height: 1.9; color: #555;
}
.wz-nav { display: flex; gap: 8px; padding: 10px; border-top: 2px solid #dbe4ea; background: #f2f6f9; }
.wz-nav button {
  flex: 1; padding: 9px 6px; border-radius: 5px; cursor: pointer;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border: 1px solid #1abc9c; background: #fff; color: #16a085;
}
.wz-nav button:hover:not(:disabled) { background: #eafaf6; }
.wz-nav button[data-act="next"] {
  background: #1abc9c; border-color: #1abc9c; color: #fff;
}
.wz-nav button[data-act="next"]:hover:not(:disabled) { background: #16a085; }
.wz-nav button:disabled { opacity: .4; cursor: default; }

/* 欢迎弹窗 */
.wz-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.wz-modal {
  background: #fff; border-radius: 8px; padding: 24px 28px;
  width: 380px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.wz-modal h2 { font-size: 18px; margin-bottom: 8px; color: #2c3e50; }
.wz-modal p { color: #666; margin-bottom: 14px; line-height: 1.7; }
.wz-modal button {
  display: block; width: 100%; margin-bottom: 10px; padding: 10px 14px;
  border: 1px solid #1abc9c; border-radius: 6px; background: #fff;
  color: #16a085; font-size: 14px; cursor: pointer; text-align: left;
}
.wz-modal button.wz-primary { background: #1abc9c; color: #fff; }
.wz-modal button:hover { filter: brightness(.96); }
.wz-again { display: flex; align-items: center; gap: 6px; color: #999; font-size: 12px; }

/* 打开项目加载遮罩（阶段文本 + 进度条，见 main.js showLoading） */
.ld-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.ld-overlay[hidden] { display: none; } /* CSS display 优先级高于 hidden 属性，需显式兜底 */
.ld-modal {
  background: #fff; border-radius: 8px; padding: 22px 28px;
  width: 320px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ld-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid #d6dde5; border-top-color: #1abc9c;
  animation: ld-spin .8s linear infinite; /* transform 动画走合成器线程，主线程阻塞时仍会转 */
}
@keyframes ld-spin { to { transform: rotate(360deg); } }
.ld-text { color: #2c3e50; font-size: 14px; }
.ld-bar { width: 100%; height: 6px; background: #e9edf3; border-radius: 3px; overflow: hidden; }
.ld-fill { height: 100%; width: 0; background: #1abc9c; border-radius: 3px; transition: width .2s ease; }

/* 新版本提醒弹窗（骨架复用 .wz-overlay/.wz-modal，见 update.js） */
.wz-modal.upd-modal { width: 570px; } /* 比欢迎弹窗宽 1.5 倍（380→570） */
.wz-modal .upd-meta { font-size: 12px; color: #999; margin-bottom: 10px; }
.wz-modal .upd-notes {
  max-height: 160px; overflow: auto; margin-bottom: 12px; padding: 8px 10px;
  background: #f7f9fa; border: 1px solid #e3e8ee; border-radius: 6px;
  font-size: 13px; color: #444; line-height: 1.7; white-space: pre-wrap;
}
.wz-modal .upd-tip { font-size: 12px; color: #999; margin-bottom: 14px; }
.wz-modal .upd-actions { display: flex; gap: 10px; }
.wz-modal .upd-actions button { margin-bottom: 0; text-align: center; }

/* ---------- 多语言：语言切换器 ---------- */
.tb-right { justify-self: end; display: flex; align-items: center; gap: 6px; }
.lang-sel {
  height: 26px; padding: 0 4px;
  border: 1px solid #56708c; border-radius: 5px;
  background: #3b5872; color: #eaf2f8; cursor: pointer;
  font-size: 12px; line-height: 1; outline: none;
}
.lang-sel:hover { background: #4a6b8a; }
.lang-sel option { background: #fff; color: #2c3e50; }

/* ---------- 多语言：阿拉伯语（RTL 从右到左）适配 ----------
 * 主布局为 flex/grid 横向排列，direction:rtl 后自动镜像；
 * 以下仅覆盖绝对定位与文字对齐等不随 direction 翻转的属性 */
[dir="rtl"] body { font-family: "Segoe UI", Tahoma, "Microsoft YaHei", sans-serif; }
[dir="rtl"] .brand { margin-right: 0; margin-left: 8px; }
[dir="rtl"] #toolbox { border-right: none; border-left: 1px solid #1a252f; }
[dir="rtl"] #props { border-left: none; border-right: 1px solid #ddd; }
[dir="rtl"] #props h3:first-child { margin-left: 0; margin-right: 16px; }
[dir="rtl"] #props-x { right: auto; left: 264px; }
[dir="rtl"] main.phide #props-x { left: 4px; }
[dir="rtl"] main.phide #btn-3d { right: auto; left: 30px; }
[dir="rtl"] .pr span { text-align: left; flex-basis: 108px; } /* 阿语标签偏长（AR-03 修复后更长）：加宽标签列减少折行 */
[dir="rtl"] .wz-modal button { text-align: right; }
/* 阿语向导（AR-02）：面板加宽，长标签置于控件上方、控件占满面板宽度，桌面视口下不再与输入框竞争空间 */
[dir="rtl"] #wizard { width: 288px; }
[dir="rtl"] .wz-body label { flex-direction: column; align-items: stretch; gap: 2px; }
[dir="rtl"] .wz-body input, [dir="rtl"] .wz-body select { width: 100%; }
[dir="rtl"] .pairdim { border-left: none; border-right: 3px solid #0e9f8f; }

/* ---------- 中等宽度适配（1201~1439px，AR-08）----------
 * 收窄两侧面板，为画布保留可操作空间；属性栏折叠按钮位置随面板宽度同步调整 */
@media (min-width: 1201px) and (max-width: 1439px) {
  #wizard { width: 220px; }
  [dir="rtl"] #wizard { width: 248px; }
  #props { width: 240px; }
  #props-x { right: 224px; }
  [dir="rtl"] #props-x { right: auto; left: 224px; }
}

/* ---------- 窄屏适配（≤1200px）----------
 * 顶栏由三栏网格改为可折行 flex：品牌+语言栏一行、快捷菜单独立一行，不再横向截断；
 * 向导/属性面板改为悬浮于画布之上（绝对定位原位覆盖），不再刚性挤压画布，
 * 面板仍可用原有按钮收起（btn-wizard / props-x）。RTL 下位置镜像。 */
@media (max-width: 1200px) {
  .tb { display: flex; flex-wrap: wrap; row-gap: 6px; }
  .tb-menu { order: 3; flex-basis: 100%; justify-content: center; flex-wrap: wrap; row-gap: 4px; }
  .tb-right { margin-left: auto; }
  [dir="rtl"] .tb-right { margin-left: 0; margin-right: auto; }
  #wizard {
    position: absolute; left: 56px; top: 0; bottom: 0; z-index: 6;
    box-shadow: 4px 0 16px rgba(0,0,0,.25);
  }
  #props {
    position: absolute; right: 0; top: 0; bottom: 0; z-index: 6;
    border-left: 1px solid #ccd4dd; box-shadow: -4px 0 16px rgba(0,0,0,.25);
  }
  [dir="rtl"] #wizard { left: auto; right: 56px; box-shadow: -4px 0 16px rgba(0,0,0,.25); }
  [dir="rtl"] #props { right: auto; left: 0; box-shadow: 4px 0 16px rgba(0,0,0,.25); }
}