/* ============================================
   轴承参数查询 — 样式表
   修改说明：调整颜色/间距/字体等在此文件操作即可
   ============================================ */

/* ── CSS 变量（颜色主题） ── */
:root {
  --color-primary: #1b3f70;
  --color-primary-light: #eef4ff;
  --color-primary-hover: #f5f8ff;
  --color-border: #d0d7e3;
  --color-bg-header: #eef2fb;
  --color-bg-alt: #f8f9fc;
  --color-text: #334155;
  --color-text-muted: #475569;
  --color-text-danger: #b05050;
  --color-accent: #2563eb;
  --radius: 6px;
  --transition: all 0.2s ease;

  /* 工作台布局变量（body.app-workspace 由 app-nav.js 注入后生效） */
  --wk-side-w: 236px;
  /* 内容区左右内边距：.card 与各类弹层共用，保证弹层与页面内容区严格同宽同左边界
     （100% 在 .card 内解析为 body 宽、在 fixed 弹层内解析为视口宽，两者均不含纵向滚动条） */
  --wk-pad-x: max(20px, calc((100% - 1360px) / 2 + 20px));
  --wk-top-h: 56px;
  --wk-bg: #eef2f7;
  --wk-side-bg: #f7f9fc;
  --wk-side-fg: #475569;
  --wk-brand: #2563eb;
}

/* ── 重置 ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 页面整体 ── */
body {
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: var(--wk-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
}

/* ── 卡片容器 ── */
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 32px 36px;
  width: 100%;
  max-width: 960px;
  /* 让 sticky 子元素能吸附到视口顶部，但防止表格溢出 */
  overflow: visible;
  /* 确保 card 不会超出视口宽度 */
  min-width: 0;
}

/* ── 标题 ── */
h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.subtitle {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 24px;
}

/* ── 搜索栏 ── */
.search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  align-items: center;
}
.search-row input {
  flex: 1;
  min-width: 0;   /* 允许输入框收缩给右侧按钮让位，避免整行换行 */
  padding: 10px 14px;
  border: 1.5px solid #d0d7e3;
  border-radius: var(--radius);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}
.search-row input:focus {
  border-color: #2563eb;
}
.search-row > button {
  padding: 10px 22px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.search-row > button:hover {
  background: #1d4ed8;
}
/* 搜索行内的开式/闭式/带槽按钮组：紧贴查询按钮右侧，不可被压缩 */
.search-row .type-btn-group {
  margin-left: 0;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}
/* 与「查询」按钮同族的主按钮外观：同高、同圆角、同字号；
   选中 = 实心蓝（同查询按钮），未选中 = 白底蓝边 */
.search-row .type-btn {
  padding: 8px 18px;
  border: 1.5px solid #d0d7e3;
  border-radius: var(--radius);
  background: #fff;
  color: #64748b;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  box-sizing: border-box;
}
.search-row .type-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
}
/* 触屏设备禁用 hover 粘滞（点击瞬间的 hover 会让未选中按钮短暂变深，造成选中态误判） */
/* ── 响应式断点 (hover: none) · 1/1 ── 本块 L134 ── 同断点其余: （无） ── */
@media (hover: none) {
  .search-row .type-btn:hover {
    border-color: #d0d7e3;
    color: #64748b;
  }
}
.search-row .type-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* ── 结果区 ── */
#result-area { display: none; }
.result-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 14px;
  border: none;
}
.result-table th, .result-table td {
  border: none;
  border-bottom: 1px solid #e2e8f0;
  padding: 11px 16px;
  text-align: center;
  white-space: nowrap;
}
.result-table th {
  background: #eef2fb;
  color: var(--color-primary);
  font-weight: 600;
}
.result-table td {
  background: #fff;
}
.result-table tr:hover td {
  background: var(--color-primary-hover);
}

/* ── 有效游隙表格输入框：与单元格融为一体的无边框样式 ── */
.deep-groove-table th input,
.deep-groove-table th select,
.deep-groove-table td input,
.deep-groove-table td select {
  border: none;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  text-align: center;
  font-family: inherit;
  font-size: 13px;
  height: 28px;
  min-height: 28px;
  line-height: 28px;
  padding: 0;
  margin: 0;
  display: block;
  color: #2563eb;
  font-weight: 600;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
/* 文本类 th 单元格垂直居中 */
.deep-groove-table th {
  line-height: 28px;
  padding: 0 5px;
}
/* 所有表格行高度统一 */
.deep-groove-table tr {
  height: 30px;
}
.deep-groove-table th input:focus,
.deep-groove-table th select:focus,
.deep-groove-table td input:focus,
.deep-groove-table td select:focus {
  background: var(--color-primary-light);
  border-radius: 4px;
}
.deep-groove-table th input:hover,
.deep-groove-table th select:hover,
.deep-groove-table td input:hover,
.deep-groove-table td select:hover {
  background: var(--color-primary-hover);
  border-radius: 4px;
}
.deep-groove-table th,
.deep-groove-table td {
  padding: 5px;
  vertical-align: middle;
}
.deep-groove-table td.group {
  vertical-align: middle;
}
/* 数字输入框去掉右侧的上下按钮（spinner） */
.deep-groove-table td input[type="number"]::-webkit-outer-spin-button,
.deep-groove-table td input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.deep-groove-table td input[type="number"] {
  -moz-appearance: textfield;
}

/* ── 单元格列对齐 ── */
.result-table td:first-child {
  text-align: left;
  font-weight: 700;
  color: #2563eb;
}
.result-table td:last-child {
  text-align: right;
  word-break: break-all;
  color: #4db882;
  font-weight: 700;
}

/* ── 公差分段标题行 ── */
.section-title td {
  background: #eef2fb;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
  text-align: left;
}
/* section-title 内不应用参数列蓝色加粗规则 */
.result-table tr.section-title td:first-child {
  color: var(--color-primary);
  font-weight: 700;
}
.result-table tr.section-title:hover td {
  background: #eef2fb;
}

/* ── 公差无数据提示 ── */
.no-data-hint {
  color: #94a3b8;
  font-style: italic;
  padding: 10px;
  text-align: center;
}

/* ── 多结果表格（参数查询） ── */
.table-wrapper {
  overflow-x: auto;
  margin-top: 8px;
}
.result-table.multi th {
  font-size: 13px;
  padding: 8px 10px;
  white-space: nowrap;
}
.result-table.multi td {
  font-size: 13px;
  padding: 7px 10px;
  white-space: nowrap;
}
.result-model-link {
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 600;
}
.result-model-link:hover {
  color: #1d4ed8;
}
.result-summary {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.result-summary strong {
  color: #2563eb;
}

/* ── 候选标签 ── */
.suggest-tag {
  padding: 4px 12px;
  background: #eef2fb;
  border: 1px solid #c5d2f0;
  border-radius: 20px;
  font-size: 13px;
  color: #2563eb;
  cursor: pointer;
  transition: background 0.15s;
}
.suggest-tag:hover {
  background: #d7e3fb;
}

/* ── 错误提示 ── */
.error-msg {
  color: #b91c1c;
  font-size: 14px;
  padding: 10px;
  background: #fdf0ee;
  border-radius: var(--radius);
  border-left: 4px solid #b91c1c;
}

/* ── 标准说明 ── */
.standard-note {
  margin-top: 10px;
  font-size: 12px;
  color: #94a3b8;
  text-align: right;
}

/* ── 历史记录 ── */
#history-area { display: none; margin-top: 28px; }
.clear-btn {
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
  text-decoration: underline;
}
.history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.history-tag {
  padding: 3px 10px;
  background: #f5f5f5;
  border: 1px solid #d0d7e3;
  border-radius: 20px;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.history-tag:hover {
  background: #eef2fb;
  border-color: #c5d2f0;
  color: #2563eb;
}

/* ── 选择器行（标签与按钮同行，按钮上下对齐） ── */
.selector-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
/* ── 选择器标签（固定宽度保证各行对齐） ── */
.selector-label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
  min-width: 76px;
}
/* ── 开式/闭式按钮组 ── */
.type-btn-group {
  display: inline-flex;
  gap: 4px;
  margin-left: 12px;
}
.type-btn {
  padding: 5px 12px;
  border: 1.5px solid #d0d7e3;
  border-radius: var(--radius);
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.type-btn:hover {
  border-color: #2563eb;
  color: var(--color-primary);
}
.type-btn.active {
  background: #eef2fb;
  border-color: #2563eb;
  color: #2563eb;
}

/* ── 推荐型号（位于精度等级上方，标题与内容同行） ── */
.suggest-in-result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.suggest-in-result .suggest-title {
  font-size: 13px;
  color: #94a3b8;
  white-space: nowrap;
}
.suggest-in-result .suggest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ── 设计页：结果表格 ── */
.design-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}
.design-table th {
  background: #eef2fb;
  color: var(--color-primary);
  font-weight: 600;
  padding: 9px 14px;
  text-align: center;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.design-table td {
  padding: 9px 14px;
  text-align: center;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.design-table .editable {
  cursor: pointer;
  color: #2563eb;
  font-weight: 600;
}
.design-table td.editable:hover {
  background: #eef2fb;
}
.design-table span.editable:hover {
  opacity: 0.8;
}
/* 设计表分段标题行 */
.design-table .section-title-cell {
  background: #eef2fb;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
  text-align: left;
  border-top: 2px solid #b8d4f0;
}
.design-table td.editable input {
  width: 80px;
  padding: 4px 8px;
  border: 1.5px solid #2563eb;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  outline: none;
}

/* ============================================================
   公差配合页面样式
   ============================================================ */

/* ── 面板容器（给内部各 section 统一呼吸空间） ── */
.panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── 输入行 ── */
.input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}
.input-row input {
  flex: 1;
  max-width: 180px;
  padding: 8px 12px;
  border: 1.5px solid #d0d7e3;
  border-radius: var(--radius);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.input-row input:focus {
  border-color: #2563eb;
}
.temp-label {
  font-size: 14px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.result-card {
  background: #f8faff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 16px;
}

.btn-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.calc-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.calc-btn:hover { opacity: 0.85; }

.mini-btn {
  font-size: 12px;
  padding: 2px 10px;
  border: 1px solid #d0d7e3;
  border-radius: 4px;
  background: var(--color-bg-header);
  color: var(--color-primary);
  cursor: pointer;
  margin-left: 10px;
}
.mini-btn:hover { background: #e0e8f5; }

/* 材料表弹窗 */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--color-primary);
}

.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  max-height: calc(80vh - 60px);
}

/* ── 结果显示区域 ── */
#fit-result-area, #deviation-result-area {
  margin-top: 16px;
}
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 14px;
}
.result-label {
  color: var(--color-text-muted);
}
.result-value {
  color: #2563eb;
  font-weight: 600;
}

/* ── 键盘内容 ── */
.keyboard-content {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  overflow: hidden;
}

/* ============================================================
   公差配合键盘区域样式
   ============================================================ */

/* 键盘区域 */
.keyboard-section { margin-top: 16px; width: 100%; }
.keyboard-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.keyboard-tab {
  padding: 7px 16px;
  border: 1.5px solid #d0d7e3;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
}
.keyboard-tab:hover { border-color: #2563eb; color: var(--color-primary); }
.keyboard-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }

/* 键盘内容 */
.keyboard-content { display: none; }
.keyboard-content.active { display: block; }

/* 键盘表格 */
.keyboard-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.keyboard-table th, .keyboard-table td { border: 1px solid #d0d7e3; padding: 5px 3px; text-align: center; line-height: 1.5; }
.keyboard-table th { background: #f5f7fa; font-weight: 600; font-size: 12px; }
.keyboard-table td:first-child { font-weight: 600; background: #f9fafc; width: 40px; font-size: 12px; }

/* 键盘按钮 */
.key {
  padding: 5px 2px;
  border: 1px solid #d0d7e3;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  background: #fff;
  transition: var(--transition);
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.5;
}
.key:hover { background: #e8f0fe; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.key:active { transform: translateY(0); }
.key.priority-1 { background: #2563eb; color: #fff; border-color: #2563eb; }
.key.priority-2 { background: #52c41a; color: #fff; border-color: #52c41a; }
.key.priority-3 { background: #f0f0f0; color: #64748b; border-color: #d0d7e3; }

/* 配合类型表头 */
.fit-type.clearance { background: #f0f6ff; color: #2563eb; }
.fit-type.transition { background: #fff7e6; color: #fa8c16; }
.fit-type.interference { background: #fff1f0; color: #b91c1c; }

/* 图例 */
.keyboard-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 13px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-color { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.legend-color.priority-1 { background: #2563eb; }
.legend-color.priority-2 { background: #52c41a; }
.legend-color.priority-3 { background: #f0f0f0; border: 1px solid #d0d7e3; }

/* 选择按钮（输入框旁的下拉触发） */
.picker-btn {
  padding: 6px 10px;
  background: #eef2fb;
  border: 1.5px solid #c5d2f0;
  border-radius: var(--radius);
  font-size: 16px;
  color: #2563eb;
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
  flex-shrink: 0;
}
.picker-btn:hover {
  background: #d7e3fb;
  border-color: #2563eb;
}

/* 键盘弹出层：居中对话框（与数据卡风格一致，桌面不再贴底拉满宽） */
.keyboard-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}
.keyboard-popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15,23,42,0.45);
}
.keyboard-popup-body {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: min(92vw, 660px);
  max-height: 84vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(15,23,42,0.22);
  animation: popupIn 0.22s ease-out;
}
@keyframes popupIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.keyboard-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8faff;
}
.keyboard-popup-header span:first-child {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}
.keyboard-popup-close {
  font-size: 20px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
}
.keyboard-popup-close:hover {
  color: #b91c1c;
}
.keyboard-popup-content {
  overflow: auto;
  padding: 16px;
  flex: 1;
}
/* 窄屏下 18 列键盘表放不下：表格保持可读最小宽，弹层内横向滑动查看 */
.keyboard-popup-content .keyboard-table { min-width: 560px; }

/* ===== 公差配合 V2 专用样式 ===== */
.basis-tag {
  font-size: 11px;
  color: #2563eb;
  background: #eef2fb;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 400;
}
/* ══════════════════════════════════════════════════════════════════════════
   公差配合页（双轨式 v4 · .tl-*）
   视觉语言：孔蓝 #2563eb / 轴橙 #e8734a 双色贯穿；配合类型色 绿=间隙 / 琥珀=过渡 / 红=过盈
   结构：① 表头（基本尺寸 + 孔/轴代号 + 配合类型徽标）
        ② 核心（左：公差带位置图 + 公差值构成条 ｜ 右：Xmax / Xmin / 配合特性 / 装配温度）
        ③ 公差带键盘（内联展开；点代号箭头 → 浮层弹窗）
        ④ 脚注
   ══════════════════════════════════════════════════════════════════════════ */
body.app-workspace.page-tolerance .tl-sheet {
  position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
}
body.app-workspace.page-tolerance .tl-sheet::before {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, #2563eb 0%, #2563eb 45%, #e8734a 55%, #e8734a 100%);
}

/* ── ① 表头 ── */
body.app-workspace.page-tolerance .tl-hd {
  display: flex; align-items: flex-end; gap: 26px; padding: 18px 24px 16px; flex-wrap: wrap;
}
body.app-workspace.page-tolerance .tl-id { min-width: 0; flex: 1 1 auto; }
body.app-workspace.page-tolerance .tl-cap {
  font-size: 12px; font-weight: 700; color: #1b3f70; letter-spacing: .06em; margin-bottom: 8px;
}
body.app-workspace.page-tolerance .tl-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

body.app-workspace.page-tolerance .tl-num { display: flex; align-items: baseline; gap: 2px; }
body.app-workspace.page-tolerance .tl-num .pre { font-size: 23px; font-weight: 700; color: #94a3b8; }
body.app-workspace.page-tolerance .tl-num input {
  width: 108px; font-family: inherit; font-size: 36px; font-weight: 800; line-height: 1;
  /* 可编辑值统一用蓝（同设计页三围参数）：颜色 + 虚下划线即「可改」的提示 */
  color: #2563eb; font-variant-numeric: tabular-nums; letter-spacing: -.5px;
  border: 0; border-bottom: 2px dashed #93b4f5; border-radius: 6px 6px 0 0; padding: 0 4px 2px; background: transparent;
  outline: none; cursor: text; user-select: text;
  /* type=number 默认是「严格数字框」：无法拖选文本、小数点会被吞。
     还原为文本框行为（旧版即有），基本尺寸才能像普通文本一样自由编辑 */
  appearance: textfield; -webkit-appearance: textfield; -moz-appearance: textfield;
}
body.app-workspace.page-tolerance .tl-num input:hover { border-bottom-color: #5b8def; background: #f2f7ff; }
body.app-workspace.page-tolerance .tl-num input:focus { border-bottom-color: #2563eb; background: #eef4ff; }
body.app-workspace.page-tolerance .tl-num input::-webkit-outer-spin-button,
body.app-workspace.page-tolerance .tl-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.app-workspace.page-tolerance .tl-num .u { font-size: 13.5px; font-weight: 600; color: #94a3b8; margin-left: 2px; }

body.app-workspace.page-tolerance .tl-chips {
  display: flex; align-items: center; gap: 9px; padding-left: 18px; border-left: 1px solid #eef2f7;
}
body.app-workspace.page-tolerance .tl-chip {
  display: inline-flex; align-items: center; gap: 2px; border-radius: 9px; padding: 3px 5px 3px 11px;
  font-weight: 800;
}
body.app-workspace.page-tolerance .tl-chip.hole  { background: #eaf1fe; border: 1px solid #c3d8fb; }
body.app-workspace.page-tolerance .tl-chip.shaft { background: #fdf1e5; border: 1px solid #f3d0ad; }
body.app-workspace.page-tolerance .tl-chip input {
  width: 54px; font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: .04em;
  border: 0; background: transparent; outline: none; text-align: center; padding: 0;
  text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4px;
  text-decoration-color: transparent;
}
body.app-workspace.page-tolerance .tl-chip.hole  input { color: #1d4ed8; }
body.app-workspace.page-tolerance .tl-chip.shaft input { color: #b45309; }
body.app-workspace.page-tolerance .tl-chip input:hover { text-decoration-color: currentColor; }
body.app-workspace.page-tolerance .tl-chip input:focus { text-decoration-color: currentColor; }
body.app-workspace.page-tolerance .tl-chip .tl-car {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; margin-left: 3px; padding: 0;
  border: 0; border-left: 1px solid currentColor; background: transparent;
  color: inherit; opacity: .6; cursor: pointer; transition: opacity .15s;
}
body.app-workspace.page-tolerance .tl-chip .tl-car:hover { opacity: 1; }
body.app-workspace.page-tolerance .tl-chip .tl-car svg { display: block; }
body.app-workspace.page-tolerance .tl-chip.basis {
  padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0; cursor: default;
  color: #64748b; background: #f0f6ff; border: 1px solid #e2e8f0;
}
body.app-workspace.page-tolerance .tl-sep { font-size: 17px; font-weight: 700; color: #c8d2e0; }

body.app-workspace.page-tolerance .tl-fit { margin-left: auto; text-align: right; flex: none; }
body.app-workspace.page-tolerance .tl-fit .cap {
  display: block; font-size: 11px; color: #a3aec0; letter-spacing: .1em; margin-top: 7px;
}
/* 配合类型徽标：按配合性质着色（间隙绿 / 过渡琥珀 / 过盈红） */
body.app-workspace.page-tolerance .fit-type-badge {
  display: inline-block; font-size: 16px; font-weight: 800; letter-spacing: .06em;
  padding: 6px 18px; border-radius: 10px; white-space: nowrap;
  background: #eef2fb; color: #64748b; border: 1px solid #e2e8f0;
}
body.app-workspace.page-tolerance .fit-type-badge.fit-clearance {
  color: #047857; background: #e7f8f1; border-color: #b5ead6;
}
body.app-workspace.page-tolerance .fit-type-badge.fit-transition {
  color: #b45309; background: #fdf4e3; border-color: #f5dcae;
}
body.app-workspace.page-tolerance .fit-type-badge.fit-interference {
  color: #b91c1c; background: #fdeeee; border-color: #f6c9c9;
}

/* ── ② 核心：左图右果 ── */
body.app-workspace.page-tolerance .tl-core {
  display: grid; grid-template-columns: 1.72fr 1fr; border-top: 1px solid #eef2f7;
}
body.app-workspace.page-tolerance .tl-fig {
  padding: 14px 22px 16px 24px; border-right: 1px solid #eef2f7; min-width: 0;
}
body.app-workspace.page-tolerance .tl-fig-hd {
  display: flex; align-items: center; gap: 9px; margin-bottom: 2px;
}
body.app-workspace.page-tolerance .tl-fig-hd .t { font-size: 13.5px; font-weight: 700; color: #1b3f70; }
body.app-workspace.page-tolerance .tl-fig-hd .hint { font-size: 11px; color: #a3aec0; }
body.app-workspace.page-tolerance .tl-ghost {
  margin-left: auto; font-family: inherit; font-size: 12px; font-weight: 600;
  color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 5px 10px 5px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
body.app-workspace.page-tolerance .tl-ghost:hover { border-color: #b9c6d8; color: #1b3f70; }
body.app-workspace.page-tolerance .tl-ghost .car { font-size: 10px; opacity: .7; }
body.app-workspace.page-tolerance .tl-fig canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 1300 / 400;
}

/* 公差值构成：三框并列 —— 孔偏差（ES / EI）· 轴偏差（es / ei）· 公差值（孔 T_H / 轴 T_s）
   三框共用同一骨架（框头「标题 + 代号 + 单位」→ 两行「项 …… 值」），孔蓝轴橙沿用全页配色。
   整块置于「公差带位置图」之上 → 分隔线在下方（原为图下方的上分隔线，位置一并对调） */
body.app-workspace.page-tolerance .tl-tolbar {
  margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px dashed #eef2f7;
}
body.app-workspace.page-tolerance .tl-tb-hd {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px;
}
body.app-workspace.page-tolerance .tl-tb-hd .t { font-size: 12.5px; font-weight: 700; color: #1b3f70; }
body.app-workspace.page-tolerance .tl-tb-hd .hint { font-size: 11px; color: #a3aec0; }
body.app-workspace.page-tolerance .tl-tb-hd .tot { margin-left: auto; font-size: 11.5px; color: #64748b; }
body.app-workspace.page-tolerance .tl-tb-hd .tot b {
  font-size: 15px; font-weight: 800; color: #047857; font-variant-numeric: tabular-nums; margin-left: 3px;
}
body.app-workspace.page-tolerance .tl-track {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
}
body.app-workspace.page-tolerance .tl-seg {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  /* 三框等宽；下限 152px 保证窄屏可以两列排布而不裁切行内「项 + 值」 */
  flex: 1 1 0; min-width: 152px;
  padding: 9px 13px; border-radius: 9px; overflow: hidden;
}
body.app-workspace.page-tolerance .tl-seg.tol   { background: #f7f9fc; border: 1px solid #e2e8f0; }
body.app-workspace.page-tolerance .tl-seg.hole  { background: #eaf1fe; border: 1px solid #c3d8fb; }
body.app-workspace.page-tolerance .tl-seg.shaft { background: #fdf1e5; border: 1px solid #f3d0ad; }
/* 框头：标题在左、单位靠右（与下方数值右缘对齐） */
body.app-workspace.page-tolerance .tl-seg .hd { display: flex; align-items: baseline; gap: 8px; }
body.app-workspace.page-tolerance .tl-seg .hd .lb { font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
body.app-workspace.page-tolerance .tl-seg.tol   .hd .lb { color: #475569; }
body.app-workspace.page-tolerance .tl-seg.hole  .hd .lb { color: #1d4ed8; }
body.app-workspace.page-tolerance .tl-seg.shaft .hd .lb { color: #b45309; }
/* 框头代号（H7 / g6）：紧贴标题的小药丸，用键盘 p2 档那组浅底深彩字，一眼区分孔/轴 */
body.app-workspace.page-tolerance .tl-seg .hd .code {
  font-size: 12px; font-weight: 800; letter-spacing: .02em; line-height: 1.45;
  padding: 0 6px; border-radius: 5px;
}
body.app-workspace.page-tolerance .tl-seg.hole  .hd .code { color: #1d4ed8; background: #d6e4fd; }
body.app-workspace.page-tolerance .tl-seg.shaft .hd .code { color: #9a3d09; background: #fbdfc9; }
body.app-workspace.page-tolerance .tl-seg .hd .uu {
  margin-left: auto; font-size: 11px; font-weight: 600; color: #a3aec0; letter-spacing: .02em;
}
/* 框体两行：项名在左、数值靠右，中间点引线填满（窄框时引线自行消失，不挤掉数值） */
body.app-workspace.page-tolerance .tl-seg .dvr { display: flex; flex-direction: column; gap: 3px; }
body.app-workspace.page-tolerance .tl-seg .dvr .rw { display: flex; align-items: baseline; gap: 8px; }
body.app-workspace.page-tolerance .tl-seg .dvr .ldr {
  flex: 1 1 auto; min-width: 0; height: 0; align-self: center;
  border-bottom: 1px dotted rgba(29, 78, 216, .28);
}
body.app-workspace.page-tolerance .tl-seg.shaft .dvr .ldr { border-bottom-color: rgba(180, 83, 9, .3); }
body.app-workspace.page-tolerance .tl-seg.tol   .dvr .k { color: #64748b; }
body.app-workspace.page-tolerance .tl-seg.hole  .dvr .k { color: #6b87b5; }
body.app-workspace.page-tolerance .tl-seg.shaft .dvr .k { color: #b08258; }
body.app-workspace.page-tolerance .tl-seg .dvr .k { font-size: 12.5px; line-height: 1.35; white-space: nowrap; }
/* 偏差框行首只留符号（ES / EI、es / ei）——它是该行唯一标识，字重抬到 700 才压得住右侧数值 */
body.app-workspace.page-tolerance .tl-seg.hole  .dvr .k,
body.app-workspace.page-tolerance .tl-seg.shaft .dvr .k {
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
}
body.app-workspace.page-tolerance .tl-seg .dvr .b {
  margin-left: auto; font-size: 15px; font-weight: 800; line-height: 1.35;
  font-variant-numeric: tabular-nums; letter-spacing: -.2px; white-space: nowrap;
}
body.app-workspace.page-tolerance .dvr .b.hv { color: #1d4ed8; }
body.app-workspace.page-tolerance .dvr .b.sv { color: #b45309; }
/* 公差占比条：孔 / 轴公差各占配合公差 T_f 的比例（原「段长即占比」的语义收进框内） */
body.app-workspace.page-tolerance .tl-seg .share {
  display: flex; gap: 2px; height: 5px; border-radius: 4px; overflow: hidden; background: #e2e8f0;
}
body.app-workspace.page-tolerance .tl-seg .share i { display: block; height: 100%; }
body.app-workspace.page-tolerance .tl-seg .share .sh-h { background: #2563eb; }
body.app-workspace.page-tolerance .tl-seg .share .sh-s { background: #e8734a; }

body.app-workspace.page-tolerance .tl-res {
  padding: 18px 24px 16px; display: flex; flex-direction: column; min-width: 0;
}
/* 配合结果：最大 / 最小两项改为同构同字号（原先主值 40px、次值 15px 风格割裂） */
body.app-workspace.page-tolerance .tl-stats { display: flex; flex-direction: column; }
body.app-workspace.page-tolerance .tl-stat {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #eef2f7;
}
body.app-workspace.page-tolerance .tl-stat:first-child { padding-top: 2px; }
body.app-workspace.page-tolerance .tl-stat .k { font-size: 13.5px; color: #475569; white-space: nowrap; }
body.app-workspace.page-tolerance .tl-stat .v {
  margin-left: auto; font-size: 23px; font-weight: 800; line-height: 1.18; color: #1d4ed8;
  font-variant-numeric: tabular-nums; letter-spacing: -.4px; white-space: nowrap;
}
body.app-workspace.page-tolerance .tl-stat .v .fit-unit {
  font-size: 12px; font-weight: 600; color: #8fa6c8; margin-left: 3px; letter-spacing: 0;
}
body.app-workspace.page-tolerance .tl-note { padding-top: 12px; }
body.app-workspace.page-tolerance .tl-note .rh { font-size: 11.5px; font-weight: 700; color: #94a3b8; letter-spacing: .08em; }
body.app-workspace.page-tolerance .tl-note p { margin: 6px 0 0; font-size: 12.5px; color: #64748b; line-height: 1.68; }
body.app-workspace.page-tolerance .tl-temp {
  margin-top: auto; padding-top: 12px; border-top: 1px solid #eef2f7;
}
body.app-workspace.page-tolerance .tl-temp .rh { font-size: 11.5px; font-weight: 700; color: #94a3b8; letter-spacing: .08em; }
body.app-workspace.page-tolerance .tl-temp .na { font-size: 12px; color: #b6c2d4; margin-top: 6px; line-height: 1.5; }
body.app-workspace.page-tolerance #interferencePanel { margin-top: 8px; }
body.app-workspace.page-tolerance #interferencePanel .selector-row { flex-wrap: wrap; margin: 0; gap: 8px 10px; }
body.app-workspace.page-tolerance #interferencePanel select { flex: 1 1 110px; min-width: 0; }
body.app-workspace.page-tolerance .temp-result {
  background: #eef4fe; border: 1px solid #c9dcfa; border-radius: 8px;
  padding: 9px 12px; margin: 9px 0 0; font-size: 13px; font-weight: 600; color: #1d4ed8;
  line-height: 1.55;
}
body.app-workspace.page-tolerance .temp-result:empty { display: none; }

/* ── ③ 公差带键盘（内联展开 / 点代号箭头走浮层弹窗） ── */
body.app-workspace.page-tolerance .tl-kbzone { border-top: 1px solid #eef2f7; }
body.app-workspace.page-tolerance .tl-kb-fold {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 24px; cursor: pointer; user-select: none;
}
body.app-workspace.page-tolerance .tl-kb-fold:hover { background: #fafcfe; }
body.app-workspace.page-tolerance .tl-kb-fold .car {
  font-size: 11px; color: #94a3b8; display: inline-block; transition: transform .16s ease;
}
body.app-workspace.page-tolerance .tl-kbzone.on .tl-kb-fold .car { transform: rotate(90deg); }
body.app-workspace.page-tolerance .tl-kb-fold .t { font-size: 13px; font-weight: 700; color: #1b3f70; }
body.app-workspace.page-tolerance .tl-kb-fold .hint { font-size: 11px; color: #a3aec0; }
body.app-workspace.page-tolerance .tl-kb-fold .right { margin-left: auto; font-size: 11px; color: #b6c2d4; }
body.app-workspace.page-tolerance .tl-kb-body { display: none; }
body.app-workspace.page-tolerance .tl-kbzone.on .tl-kb-body {
  display: block; background: #fbfcfe; border-top: 1px dashed #eef2f7;
  padding: 14px 24px 16px; overflow-x: auto;
}
body.app-workspace.page-tolerance .tl-kb-body .keyboard-section { margin-top: 0; }
body.app-workspace.page-tolerance .tl-kb-body .keyboard-tabs { margin-bottom: 10px; }

/* 键盘本体：孔蓝 / 轴橙双色（深=特别优先，浅=优先选择），当前代号绿描边 */
body.app-workspace.page-tolerance .keyboard-tab {
  color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 5px 14px; font-size: 12.5px; font-weight: 700;
}
body.app-workspace.page-tolerance .keyboard-tab:hover { border-color: #93b4f5; color: #2563eb; }
body.app-workspace.page-tolerance .keyboard-tab.active {
  background: #2563eb; border-color: #2563eb; color: #fff;
}
body.app-workspace.page-tolerance .keyboard-table { border-collapse: separate; border-spacing: 3px; font-size: 11.5px; }
body.app-workspace.page-tolerance .keyboard-table th,
body.app-workspace.page-tolerance .keyboard-table td {
  border: 0; padding: 4px 3px; line-height: 1.35;
}
body.app-workspace.page-tolerance .keyboard-table th {
  background: #eef2fb; border-radius: 6px; color: #475569; font-weight: 700;
}
body.app-workspace.page-tolerance .keyboard-table td:first-child {
  background: #eef2fb; border-radius: 6px; color: #475569; font-weight: 700; width: 48px;
}
body.app-workspace.page-tolerance .key {
  border: 1px solid transparent; border-radius: 6px; padding: 6px 0;
  font-size: 11.5px; font-weight: 700; background: #fff; display: block; width: 100%;
  text-align: center;
}
/* 键配色：孔=蓝系 / 轴=橙系，冷暖对撞以便一眼区分；
   档位阶梯：priority-1 实心色底白字（最醒目）＞ priority-2 浅色底彩字 ＞ priority-3 中性灰 */
body.app-workspace.page-tolerance .kb-hole  .key.priority-1 { background: #2563eb; border-color: #2563eb; color: #fff; }
body.app-workspace.page-tolerance .kb-shaft .key.priority-1 { background: #c2410c; border-color: #c2410c; color: #fff; }
body.app-workspace.page-tolerance .kb-hole  .key.priority-2 { background: #d6e4fd; border-color: #b7d0fb; color: #1d4ed8; }
body.app-workspace.page-tolerance .kb-shaft .key.priority-2 { background: #fbdfc9; border-color: #f2cba4; color: #9a3d09; }
body.app-workspace.page-tolerance .kb-hole  .key.priority-3,
body.app-workspace.page-tolerance .kb-shaft .key.priority-3 { background: #eef2fb; border-color: #e2e8f0; color: #94a3b8; }
body.app-workspace.page-tolerance .kb-hole  .key.priority-1:hover { background: #3b7af0; border-color: #3b7af0; }
body.app-workspace.page-tolerance .kb-shaft .key.priority-1:hover { background: #d4551f; border-color: #d4551f; }
body.app-workspace.page-tolerance .kb-hole  .key.priority-2:hover { background: #c3d7fc; border-color: #a6c5fa; }
body.app-workspace.page-tolerance .kb-shaft .key.priority-2:hover { background: #f8d0b0; border-color: #eebd90; }
body.app-workspace.page-tolerance .kb-hole  .key:hover,
body.app-workspace.page-tolerance .kb-shaft .key:hover { transform: none; box-shadow: none; }
/* 当前代号：白内衬 + 深色外环，在实心键与浅底键上都醒目 */
body.app-workspace.page-tolerance .key.cur { box-shadow: 0 0 0 2px #fff inset, 0 0 0 3.5px #0f172a inset; }
body.app-workspace.page-tolerance .kb-hole  .legend-color.priority-1 { background: #2563eb; }
body.app-workspace.page-tolerance .kb-shaft .legend-color.priority-1 { background: #c2410c; }
body.app-workspace.page-tolerance .kb-hole  .legend-color.priority-2 { background: #d6e4fd; border: 1px solid #b7d0fb; }
body.app-workspace.page-tolerance .kb-shaft .legend-color.priority-2 { background: #fbdfc9; border: 1px solid #f2cba4; }
body.app-workspace.page-tolerance .kb-hole  .legend-color.priority-3,
body.app-workspace.page-tolerance .kb-shaft .legend-color.priority-3 { background: #eef2fb; border: 1px solid #e2e8f0; }
body.app-workspace.page-tolerance .keyboard-legend { font-size: 11.5px; color: #64748b; }
/* 配合类型表头（基轴制 / 基孔制键盘）：绿=间隙 琥珀=过渡 红=过盈 */
body.app-workspace.page-tolerance .fit-type.clearance    { background: #d9f2e6; color: #046c4e; }
body.app-workspace.page-tolerance .fit-type.transition   { background: #fbeacc; color: #a35a06; }
body.app-workspace.page-tolerance .fit-type.interference { background: #f9dcdc; color: #b91c1c; }
/* 基轴制 / 基孔制键盘的行首基准代号列：基轴制行首是「轴」→ 橙，基孔制行首是「孔」→ 蓝。
   （容器类代表配对件，故此处与键色互补：基轴制容器为 kb-hole、基孔制为 kb-shaft）
   选择器只认祖先的 kb-* 类、不绑 .keyboard-content —— 浮层容器叫 .keyboard-popup-content，
   否则弹窗里本规则落空；再加 .keyboard-table 把特异度提到 (0,5,1) 以压过 td:first-child。 */
body.app-workspace.page-tolerance .kb-hole  .keyboard-table .tol-th-blue { background: #fbe3cf; color: #9a3d09; }
body.app-workspace.page-tolerance .kb-shaft .keyboard-table .tol-th-blue { background: #d6e4fd; color: #1d4ed8; }

/* ── ④ 脚注 ── */
body.app-workspace.page-tolerance .tl-ft {
  padding: 10px 24px 12px; border-top: 1px solid #eef2f7;
  font-size: 11px; color: #a3aec0; display: flex; gap: 18px; flex-wrap: wrap;
}
body.app-workspace.page-tolerance .tl-ft .sep { color: #e2e8f0; }


/* 材料选择行优化 */
#interferencePanel .selector-row {
  gap: 10px;
  flex-wrap: wrap;
}
#interferencePanel .selector-label {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
  min-width: auto;
}
#interferencePanel select {
  padding: 7px 12px;
  border: 1.5px solid #d0d7e3;
  border-radius: var(--radius);
  font-size: 14px;
  color: #2563eb;
  font-weight: 600;
  background: #fff;
  outline: none;
  cursor: pointer;
  min-width: 120px;
  transition: border-color 0.2s;
}
#interferencePanel select:focus {
  border-color: #2563eb;
}
#interferencePanel input[type="number"] {
  width: 80px;
  padding: 7px 10px;
  border: 1.5px solid #d0d7e3;
  border-radius: var(--radius);
  font-size: 14px;
  color: #2563eb;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s;
}
#interferencePanel input[type="number"]:focus {
  border-color: #2563eb;
}
#interferencePanel .coeff-unit {
  font-size: 14px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ===== 有效游隙计算器样式 ===== */

/* 有效游隙主内容区 */
.clearance-main-content {
  display: flex;
  flex-direction: column;
}

/* deep-groove-table 内联样式补充 */
.deep-groove-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 0;
}
.deep-groove-table th,
.deep-groove-table td {
  padding: 0 5px;
  vertical-align: middle;
}
.deep-groove-table input,
.deep-groove-table select {
  height: 30px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 5px;
  border: 1px solid #d0d7e3;
  color: #2563eb;
  font-weight: 600;
}
.deep-groove-table .group {
  background: #eef2fb;
  color: var(--color-primary);
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}

/* 有效游隙：不可编辑 / 占位（空）单元格，与可编辑单元格做颜色区分 */
.deep-groove-table td.dg-static-cell {
  background: #ffffff;
  color: #94a3b8;
  text-align: center;
  cursor: not-allowed;
}

/* clearance-main-content 内部卡片样式 */
.clearance-main-content .card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin-bottom: 18px;
  overflow: hidden;
}
.clearance-main-content .card-header {
  background: #eef2fb;
  border-bottom: 1px solid var(--color-border);
  padding: 9px 16px;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.clearance-main-content .card-header::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--color-primary);
  border-radius: 2px;
}
.clearance-main-content .card-body {
  padding: 16px;
}
.clearance-main-content .card-body table {
  width: 100%;
  border-collapse: collapse;
}
.clearance-main-content .card-body th,
.clearance-main-content .card-body td {
  border: 1px solid var(--color-border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
}
.clearance-main-content .card-body th {
  background: var(--color-bg-header);
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}
.clearance-main-content .card-body table td.label {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.clearance-main-content .card-body table th {
  background: var(--color-bg-header);
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}
.clearance-main-content .card-body table td.group {
  background: #eef2fb;
  color: var(--color-primary);
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}
.clearance-main-content .card-body td.calc {
  background: #f0f7ff;
  color: #2563eb;
  text-align: right;
  font-family: monospace;
}
.clearance-main-content .card-body td.result-min {
  color: #b91c1c;
  text-align: center;
  font-family: monospace;
  font-weight: 600;
}
.clearance-main-content .card-body td.result-mean {
  color: #2e7d32;
  text-align: center;
  font-family: monospace;
  font-weight: 600;
}
.clearance-main-content .card-body td.result-max {
  color: #2563eb;
  text-align: center;
  font-family: monospace;
  font-weight: 600;
}
.clearance-main-content .card-body td.center {
  text-align: center;
}
.clearance-main-content .card-body td.val {
  text-align: right;
  font-family: monospace;
  color: var(--color-text-muted);
}
.clearance-main-content .card-body input[type="number"],
.clearance-main-content .card-body input[type="text"],
.clearance-main-content .card-body select {
  width: 100%;
  padding: 4px 7px;
  border: 1px solid #c5d3e8;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s;
}
.clearance-main-content .card-body input[type="number"]:focus,
.clearance-main-content .card-body input[type="text"]:focus,
.clearance-main-content .card-body select:focus {
  border-color: var(--color-primary);
}
.clearance-main-content .btn-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.clearance-main-content button {
  padding: 8px 22px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.clearance-main-content .btn-primary {
  background: #2563eb;
  color: #fff;
}
.clearance-main-content .btn-primary:hover {
  background: #1d4ed8;
}
.clearance-main-content .btn-secondary {
  background: #eef2fb;
  color: var(--color-primary);
  border: 1px solid #c5d3e8;
}
.clearance-main-content .btn-secondary:hover {
  background: var(--color-border);
}

/* 材料属性弹窗 */
.material-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10001;
  align-items: center;
  justify-content: center;
}
.material-modal {
  background: #fff;
  border-radius: 14px;
  padding: 0;
  max-width: none;
  width: min(92vw, 660px);
  max-height: 84vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(15, 35, 74, 0.28);
}
.material-modal table {
  table-layout: fixed;
  width: 100%;
}
.material-modal-header {
  position: relative;
  background: #f7f9fc;
  color: #1b3f70;
  padding: 13px 48px 13px 18px;
  margin-bottom: 0;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.material-modal-header h2 {
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.material-modal-header h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 14px;
  background: #2563eb;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: -2px;
}
.material-modal .close-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 17px;
  cursor: pointer;
  padding: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 材料表内容区（弹窗内滚动） */
.material-modal-body {
  padding: 14px 18px 16px;
  overflow: auto;
}

/* 材料表样式 */
.material-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.material-table th {
  background: #eef2fb;
  color: #2563eb;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
  border-bottom: 2px solid #2563eb;
  padding: 7px 6px;
  font-size: 12px;
}
.material-table td {
  border: 1px solid #e2e8f0;
  padding: 6px 6px;
  font-size: 12.5px;
  text-align: center;
  color: #334155;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.material-table td:first-child {
  background: #fafcfe;
  color: #475569;
}

/* 有效游隙结果区域 */
.dg-mini-btn {
  font-size: 11px;
  padding: 3px 10px;
  background: #eef2fb;
  color: var(--color-primary);
  border: 1px solid #c5d3e8;
  white-space: nowrap;
  width: auto;
  cursor: pointer;
}

/* ── 响应式：窄屏只缩减间距/宽度，保持字号不变 ── */
/* （600px 断点已整合到下方 480px 工作台手机端断点） */

/* （400px 断点已整合到下方 480px 工作台手机端断点） */

/* ═══════════════ 型号对照页（crossref.html） ═══════════════ */
/* 输入即查：无按钮，输入框与下拉占满整行 */
.xref-search-row { flex-wrap: wrap; align-items: center; }
.xref-model-input { flex: 2 1 210px; min-width: 0; }
.xref-dim-input { flex: 1 1 115px; min-width: 0; }
.xref-select {
  padding: 10px 8px; font-size: 14px; border: 1px solid #d0d7e3;
  border-radius: 8px; background: #fff; color: #334155; min-width: 0;
  flex: 0 1 132px; height: auto;
}
.xref-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
/* 尺寸格式非法时的输入框提示（不弹窗，不打断输入） */
.xref-invalid { border-color: #b91c1c; box-shadow: 0 0 0 2px rgba(226,87,76,.12); }

.xref-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 12px 0 6px; font-size: 13px; color: #475569;
}
.xref-count b { color: #b91c1c; font-size: 14px; }
.xref-pagesize select {
  padding: 4px 6px; font-size: 13px; border: 1px solid #d0d7e3;
  border-radius: 6px; background: #fff; color: #334155;
}

.xref-table-wrap { overflow-x: auto; }
.xref-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.xref-table th, .xref-table td {
  padding: 7px 8px; border-bottom: 1px solid #eef2f7;
  text-align: left; white-space: nowrap;
}
.xref-table th {
  background: #f5f7fb; color: #475569; font-weight: 600;
  position: sticky; top: 0; z-index: 1;
}
.xref-table tbody tr:nth-child(even) { background: #fafbfd; }
.xref-table tbody tr:hover { background: #f0f6ff; }
.xref-model-cell { color: #2563eb; font-weight: 600; }
.xref-desc-cell { white-space: normal; min-width: 150px; color: #64748b; }

.xref-tag-type {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; background: #fdeee0; color: #e2814c;
}
.xref-tag-brand {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; background: #e8f6ec; color: #4a9e5c;
}

.xref-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.xref-pagination button {
  padding: 6px 14px; font-size: 13px; border: 1px solid #d0d7e3;
  border-radius: 8px; background: #fff; color: #475569; cursor: pointer;
}
.xref-pagination button:hover { background: #f3f5f9; }
.xref-pageinfo { font-size: 13px; color: #64748b; min-width: 90px; text-align: center; }

/* （600px 断点已整合到下方 480px 工作台手机端断点） */

/* ══════════════════════════════════════════════════════════════════════════
   工作台布局（方案 A：侧边工作台）
   ──────────────────────────────────────────────────────────────────────────
   桌面：左侧固定导航 236px + 右侧内容区（顶栏 + 白色工作面）
   移动（≤820px）：导航收为汉堡抽屉，底部四项 Tab
   全部规则以 body.app-workspace 作用域限定，由 app-nav.js 注入后才生效，
   因此未引入脚本时页面仍保持旧的居中卡片样式。
   ══════════════════════════════════════════════════════════════════════════ */
body.app-workspace {
  display: block;
  align-items: stretch;
  padding: 0;
  padding-top: var(--wk-top-h);
  background: #fff;
}

/* ── 居中弹层与内容区对齐 ──
   桌面：弹层左右边界 = .card 内容区左右边界（补偿左侧固定导航 + 卡片内边距）；
   宽度取已收窄父内容盒的 100%，与 .card 内容区严格同宽，且不受纵向滚动条影响；
   移动（≤820px）：导航收起、卡片内边距变 13px，见下方媒体查询。 */
body.app-workspace .keyboard-popup,
body.app-workspace .material-modal-overlay {
  padding-left: calc(var(--wk-side-w) + var(--wk-pad-x));
  padding-right: var(--wk-pad-x);
}
/* 弹层宽度 = 页面内容区宽度 */
body.app-workspace .keyboard-popup-body,
body.app-workspace .material-modal {
  width: 100%;
  max-width: 1320px;
}
/* ── 侧边导航栏 ── */
body.app-workspace .app-side {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--wk-side-w);
  background: var(--wk-side-bg);
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  padding: 18px 0 16px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 120;
  -webkit-overflow-scrolling: touch;
  transition: width .22s ease;
}
.app-side-toggle {
  display: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: background .15s, border-color .15s;
}
.app-side-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #475569;
  border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
}
.app-side-toggle:hover {
  background: #eef2fb;
  border-color: #d0d7e3;
}
.app-side-toggle:hover span {
  background: #1e293b;
}
body.app-workspace .app-side::-webkit-scrollbar { width: 6px; }
body.app-workspace .app-side::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.14); border-radius: 4px;
}

.app-brand { display: flex; align-items: center; gap: 10px; padding: 0 20px 16px; }
.app-logo {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.app-brand-txt { color: #0f172a; font-size: 14px; font-weight: 600; letter-spacing: .4px; }
.app-brand-sub { color: #94a3b8; font-size: 10.5px; margin-top: 2px; }

.app-group {
  padding: 14px 20px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  color: #94a3b8;
}
.app-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  font-size: 13.5px; color: var(--wk-side-fg);
  border-left: 3px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .18s, color .18s;
}
.app-nav-item .ico { width: 18px; text-align: center; font-size: 13px; opacity: .9; flex-shrink: 0; }
.app-nav-item:hover { background: #eef2fb; color: #0f172a; }
.app-nav-item.on {
  background: rgba(37,99,235,.10);
  color: #2563eb; border-left-color: #2563eb; font-weight: 600;
}
.app-side-foot {
  margin-top: auto;
  padding: 14px 20px 0;
  border-top: 1px solid #e2e8f0;
  font-size: 10.5px; line-height: 1.7; color: #94a3b8;
}

/* ── 顶栏 ── */
body.app-workspace .app-top {
  position: fixed;
  top: 0; left: var(--wk-side-w); right: 0;
  height: var(--wk-top-h);
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
  z-index: 110;
  transition: left .22s ease;
}
.app-ham {
  display: none;
  background: none; border: none; cursor: pointer;
  font-size: 19px; color: #334155; padding: 4px 6px; line-height: 1;
}
.app-crumb { font-size: 13px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-crumb b { color: #0f172a; font-weight: 600; }
.app-top-spacer { flex: 1; }
.app-top-user {
  font-size: 12px; font-weight: 500; color: var(--color-primary);
  background: #f0f6ff; border: 1px solid #dbeafe;
  border-radius: 20px; padding: 3px 11px; white-space: nowrap;
}
.app-top-logout {
  font-size: 12px; font-weight: 500; color: #fff;
  background: var(--wk-brand); border: none;
  border-radius: 20px; padding: 4px 12px; cursor: pointer;
  white-space: nowrap; transition: background .2s;
}
.app-top-logout:hover { background: #1d4ed8; }
.app-top-badge {
  font-size: 11px; font-weight: 500; color: var(--wk-brand);
  background: #f0f6ff; border: 1px solid #dbeafe;
  border-radius: 20px; padding: 3px 11px; white-space: nowrap;
}

/* ── 主内容面板（原 .card 改造：去圆角阴影、占满右侧） ── */
body.app-workspace .card {
  margin-left: var(--wk-side-w);
  width: auto;          /* 覆盖旧 width:100%，否则 +margin 后会横向溢出 236px */
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  overflow-x: hidden;
  min-height: calc(100vh - var(--wk-top-h));
  /* 左右内边距随视口增大，使内容区在超宽屏上最大约 1360px 并自动居中 */
  padding: 26px var(--wk-pad-x) 56px;
  transition: margin-left .22s ease;
}

/* ── 移动端底部 Tab（桌面隐藏） ── */
body.app-workspace .app-mtab {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 58px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  z-index: 110;
  align-items: center; justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.app-mtab-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; color: #64748b;
  padding: 7px 0 0; cursor: pointer;
}
.app-mtab-item .i { font-size: 17px; line-height: 1.05; }
.app-mtab-item.on { color: var(--wk-brand); font-weight: 600; }

/* ── 滑动页面指示器（仅移动端显示，桌面隐藏） ── */
.swipe-indicator { display: none; }

/* ── 抽屉遮罩 ── */
body.app-workspace .app-mask {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 115;
  display: none;
}
body.app-workspace .app-mask.show { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   查询页层次感：数据卡（Panel）
   ──────────────────────────────────────────────────────────────────────────
   .app-panel 是通用类，其他页面可直接复用；
   「工作台底色」用 body.app-workspace.page-query 限定在查询页，
   其余页面的白色工作面不受影响。
   ══════════════════════════════════════════════════════════════════════════ */
body.app-workspace.page-query .card { background: var(--wk-bg); }

/* ── 数据卡 ── */
.app-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  margin-bottom: 16px;
  overflow: hidden;
}
.app-panel-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid #eef2f7;
  font-size: 14px; font-weight: 600; color: #0f172a;
}
.app-panel-hd .app-panel-sub {
  font-size: 12px; font-weight: 400; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-panel-hd .clear-btn { margin-left: auto; }
.app-panel-bd { padding: 18px; }

/* 历史区本身即数据卡，去掉旧的上外边距（改由 .app-panel 控制间距） */
body.app-workspace.page-query #history-area { margin-top: 0; }
/* 灰色工作台底上，页脚标准说明加深一档，避免发虚 */
body.app-workspace.page-query .standard-note { color: #94a3b8; }

/* ── 参数查询：精度/游隙/噪音/振动选项区（方案G：2×2 网格 + 实心高亮分段器） ──
   仅作用于查询页选项区，不影响其他页卡头的白底浮起分段器 */
body.app-workspace.page-query .q-opt-grid {
  display: grid;
  /* 自适应列数：内容区足够宽才两列，任何视口下每格 ≥360px，选项不再溢出 */
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px 32px;
  margin: 14px 0 14px; /* 顶部与输入行拉开距离 */
}
/* 输入行与下方选项区/建议区拉开距离（仅查询页，不影响 crossref 同类行） */
body.app-workspace.page-query .search-row { margin-bottom: 10px; }
body.app-workspace.page-query .q-opt-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 兜底：极窄时选项组换行到标签下方，绝不裁切 */
  gap: 8px 14px; /* 标签紧跟选项组，不再两端撑开 */
}
body.app-workspace.page-query .q-opt-grid .app-seg { flex-wrap: wrap; }
body.app-workspace.page-query .q-opt-lbl {
  flex: none;
  width: 4.5em; /* 标签统一宽度，保证上下两行选项左对齐 */
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
body.app-workspace.page-query .q-opt-grid .app-seg-i.active {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .3);
}
/* ── 参数查询：结果区（方案E 样本手册风 · 无边框清单） ── */
body.app-workspace.page-query .e-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; border-bottom: 2px solid #1b3f70;
}
body.app-workspace.page-query .e-model {
  font-size: 26px; font-weight: 800; letter-spacing: .5px; color: #1b3f70;
}
body.app-workspace.page-query .e-chips { display: flex; gap: 6px; flex-wrap: wrap; }
body.app-workspace.page-query .e-chip {
  font-size: 12px; color: #1b3f70; background: #eef2fb;
  border-radius: 4px; padding: 2px 9px; white-space: nowrap;
}
body.app-workspace.page-query .e-cols { display: flex; flex-direction: column; }
/* 按行配对：第一行 外形与结构|精度等级，第二行 游隙振动|性能参数。
   网格内两格顶对齐，同一行两分区起点水平一致，不受另一行行数影响 */
body.app-workspace.page-query .e-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px;
}
body.app-workspace.page-query .e-sec { margin-top: 14px; }
body.app-workspace.page-query .e-sec-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: #2563eb;
  padding-bottom: 6px; border-bottom: 1px solid #e2e8f0;
}
body.app-workspace.page-query .e-sec-h::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #2563eb; flex: none;
}
body.app-workspace.page-query .e-row {
  display: flex; align-items: baseline;
  padding: 6.5px 2px; border-bottom: 1px solid #eef2f7;
}
body.app-workspace.page-query .e-row:last-child { border-bottom: 0; }
body.app-workspace.page-query .e-row .k {
  width: 46%; color: #64748b; font-size: 13px; flex: none;
}
body.app-workspace.page-query .e-row .v {
  flex: 1; text-align: right; font-size: 14px; font-weight: 600;
  color: #0f172a; font-variant-numeric: tabular-nums; word-break: break-all;
}
body.app-workspace.page-query .e-nohint {
  padding: 8px 2px; color: #94a3b8; font-size: 13px;
  border-bottom: 1px solid #eef2f7;
}
/* ── 设计页：浅灰工作台底 + 数据卡 ── */
body.app-workspace.page-design .card { background: var(--wk-bg); }
body.app-workspace.page-design .standard-note { color: #94a3b8; }
/* 表格自带 margin-top，卡片内改由 .app-panel-bd 控制间距 */
body.app-workspace.page-design .app-panel-bd .design-table { margin-top: 0; }

/* ── 极限转速 / 寿命校核页：浅灰工作台底 + 数据卡 ── */
body.app-workspace.page-limitspeed .card,
body.app-workspace.page-life .card { background: var(--wk-bg); }
body.app-workspace.page-limitspeed .standard-note,
body.app-workspace.page-life .standard-note { color: #94a3b8; }
body.app-workspace.page-limitspeed .app-panel-bd .life-table,
body.app-workspace.page-life .app-panel-bd .life-table { margin-top: 0; }
/* 条件行原有上下外边距，改由卡片内边距接管 */
body.app-workspace.page-limitspeed .app-panel-bd .toggle-row { margin: 0; }

/* ── 摩擦力矩 / 公差配合 / 有效游隙 / 型号对照 / 钢球价格：浅灰工作台底 + 数据卡 ── */
body.app-workspace.page-friction .card,
body.app-workspace.page-tolerance .card,
body.app-workspace.page-clearance .card,
body.app-workspace.page-crossref .card,
body.app-workspace.page-ballprice .card { background: var(--wk-bg); }

body.app-workspace.page-friction .standard-note,
body.app-workspace.page-tolerance .standard-note,
body.app-workspace.page-clearance .standard-note,
body.app-workspace.page-crossref .standard-note,
body.app-workspace.page-ballprice .standard-note { color: #94a3b8; }

/* 卡片内层容器不再自带外边距 / 间距，统一交给 .app-panel-bd */
body.app-workspace.page-tolerance .app-panel-bd .life-table { margin-top: 0; }
body.app-workspace.page-tolerance .app-panel-bd .keyboard-section { margin-top: 0; }

/* 有效游隙：卡片内第一张表与最后一张表去掉自带下边距 */
body.app-workspace.page-clearance .app-panel-bd .deep-groove-table { margin-top: 0; }
body.app-workspace.page-clearance .app-panel-bd .dg-material-table { margin-bottom: 0; }
body.app-workspace.page-clearance .app-panel-bd .btn-row { margin-bottom: 0; }
/* 计算结果卡内嵌的「影响因素」卡：去掉自身的下外边距 */
body.app-workspace.page-clearance .app-panel-bd .card { margin-bottom: 0; }

/* ── 有效游隙：表格圆角卡片化 ──
   表格为 border-collapse:collapse，自身不支持 border-radius，
   统一外包 .clr-tbl-wrap 用 overflow:hidden 裁掉四角直角，
   并以轻阴影贴合 app-panel 数据卡层次。 */
body.app-workspace.page-clearance .clr-tbl-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
/* 材料属性弹窗内的表格同样圆角化 */
body.app-workspace.page-clearance .material-tbl-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

/* ── 有效游隙：卡头右侧工具条（轴承型号 · 精度等级 · 游隙组别） ── */
body.app-workspace.page-clearance .clr-toolbar {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
}
body.app-workspace.page-clearance .clr-toolbar input,
body.app-workspace.page-clearance .clr-toolbar select {
  padding: 5px 10px; border: 1.5px solid #d0d7e3; border-radius: 7px;
  font-size: 13px; outline: none; background: #fff; transition: border-color .2s;
}
body.app-workspace.page-clearance .clr-toolbar input {
  width: 92px; text-align: center;
  color: #2563eb; font-weight: 600;
}
body.app-workspace.page-clearance .clr-toolbar select { width: 78px; cursor: pointer; }
body.app-workspace.page-clearance .clr-toolbar input:focus,
body.app-workspace.page-clearance .clr-toolbar select:focus { border-color: #2563eb; }

/* ── 有效游隙：参数输入卡的子分区标题条（蓝竖条 + 标题 + 细线 + 辅助按钮） ── */
body.app-workspace.page-clearance .clr-sec-bar {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 10px;
}
body.app-workspace.page-clearance .clr-sec-bar:first-child { margin-top: 0; }
body.app-workspace.page-clearance .clr-sec-bar::before {
  content: ''; width: 4px; height: 15px; border-radius: 2px; background: #2563eb;
}
body.app-workspace.page-clearance .clr-sec-bar b { font-size: 13.5px; color: #1b3f70; }
body.app-workspace.page-clearance .clr-sec-rule { flex: 1; height: 1px; background: #e2e8f0; }
body.app-workspace.page-clearance .clr-sec-bar .dg-mini-btn { margin-left: 0; }

/* ── 有效游隙：温度条件字段网格（替代伪表格温度条） ── */
body.app-workspace.page-clearance .clr-temp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 26px; margin: 4px 0 16px;
}
body.app-workspace.page-clearance .clr-temp-item { display: flex; align-items: center; gap: 10px; }
body.app-workspace.page-clearance .clr-temp-label {
  font-size: 13.5px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap;
}
body.app-workspace.page-clearance .clr-temp-item input {
  width: 90px; padding: 6px 10px; border: 1.5px solid #d0d7e3; border-radius: 7px;
  font-size: 13px; outline: none; transition: border-color .2s;
  color: #2563eb; font-weight: 600;
}
body.app-workspace.page-clearance .clr-temp-item input:focus { border-color: #2563eb; }
body.app-workspace.page-clearance .clr-temp-unit { font-size: 12px; color: #94a3b8; }

/* 型号对照：卡片内表格容器与工具栏间距 */
body.app-workspace.page-crossref .app-panel-bd .xref-toolbar { margin-top: 0; }

/* 钢球价格：卡片内网格与信息行间距 */
body.app-workspace.page-ballprice .app-panel-bd .info-row { margin-top: 0; }
/* 钢球价格：卡片内的自定义直径下拉列表要溢到卡外，卡片不能裁切
   （.app-panel 默认 overflow:hidden 会把下拉列表切得只剩一行）；
   圆角下白底不再被裁切，用 background-clip 保证边框圆角干净 */
body.app-workspace.page-ballprice .app-panel {
  overflow: visible;
  background-clip: padding-box;
}

/* 卡头右侧的当前型号标签 */
.app-panel-chip {
  margin-left: auto;
  font-size: 12px; font-weight: 600; color: var(--wk-brand);
  background: #f0f6ff; border: 1px solid #dbeafe;
  border-radius: 20px; padding: 2px 11px;
  white-space: nowrap;
}
.app-panel-chip:empty { display: none; }

/* ── 卡头右侧的分段切换器：卡片级视图切换 ──
   同一层级、互斥的二选一开关，统一放卡头右侧（与卡名同行）。
   用于「摩擦力矩结果」的 SKF/常规模型、「校核结果」的动/静载荷、
   「额定载荷与工况」的常规轴承/四点接触。 */
/* ── 全站通用分段切换器 ──
   卡头用法：.app-panel-hd .app-seg 靠右（margin-left:auto）；
   卡身/表格内用法：直接 .app-seg，配合页面作用域微调尺寸。 */
.app-seg {
  display: inline-flex; gap: 3px;
  padding: 3px; background: #eef2f7; border-radius: 9px;
}
.app-seg-i {
  padding: 5px 15px; border-radius: 7px; border: none; background: none;
  font-size: 12.5px; font-weight: 600; color: #64748b; font-family: inherit;
  cursor: pointer; user-select: none; transition: all .18s; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.app-seg-i:hover:not(.active) { color: #2563eb; }
.app-seg-i.active {
  background: #fff; color: #2563eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .14);
}
.app-panel-hd .app-seg { margin-left: auto; }

/* ── 表格备注/数值列的分段切换器：比卡头版紧凑一档 ── */
.life-table .app-seg { gap: 2px; }
.life-table .app-seg-i { padding: 4px 9px; font-size: 12px; }

/* ── 表格备注列的静态说明文字：灰色小字，与可编辑的值区分开 ── */
/* 表格备注列说明文字：全局统一（灰色小字，与可编辑数值区分）。字体/字号/颜色三模块一致 */
.cell-note { color: #94a3b8; font-size: 12px; font-family: inherit; line-height: 1.5; }

/* 卡头同时有型号 chip 与分段器时，二者成组靠右
   （两个 margin-left:auto 会把剩余空间平分，chip 被推到卡头中间） */
.app-panel-hd:has(> .app-panel-chip:not(:empty)) .app-seg { margin-left: 0; }

/* ── 极限转速：计算条件卡「标签 + 分段器」同行布局 ──
   分段器用全站通用 .app-seg（见上文），交互走 data-action 委托，零 JS。 */
body.app-workspace.page-limitspeed .ls-cond-grid {
  display: flex;
  flex-wrap: wrap;          /* 空间不足时整组换行，而不是溢出屏幕 */
  gap: 12px 40px;
  align-items: center;
}
body.app-workspace.page-limitspeed .ls-cond-item {
  display: flex; align-items: center; gap: 10px;  /* 标签紧跟分段器，不拉开 */
}
body.app-workspace.page-limitspeed .ls-cond-label {
  font-size: 14px; font-weight: 600;
  color: var(--color-text-muted); white-space: nowrap;
}


/* ════════════════════════════════════════════════
   响应式断点体系（共 3 个宽度断点）
   ┌──────────────┬──────────────────────────┐
   │ ≤480px       │ 手机端（卡片布局）       │
   │ ≤820px       │ 平板及以下（紧凑布局）   │
   │ ≥821px       │ 桌面端（默认样式）       │
   └──────────────┴──────────────────────────┘
   ════════════════════════════════════════════════ */

/* ══ 平板及以下（≤820px）═ */
@media (max-width: 820px) {
  /* ── 工作台布局：侧边栏收起、底部 Tab、顶栏调整 ── */
  :root { --wk-top-h: 52px; }
  body.app-workspace { padding-bottom: 58px; }
  body.app-workspace .app-side {
    transform: translateX(-100%);
    transition: transform .26s ease;
    box-shadow: 0 0 44px rgba(15,23,42,.45);
  }
  body.app-workspace .app-side.show { transform: translateX(0); }
  body.app-workspace .app-top { left: 0; padding: 0 14px; gap: 8px; }
  .app-ham { display: block; }
  .app-top-badge { display: none; }
  .app-crumb { font-size: 12.5px; }
  body.app-workspace .card {
    margin-left: 0;
    min-height: 0;
    overflow-x: hidden;
    padding: 16px 13px 24px;
  }
  body.app-workspace .app-mtab { display: flex; }
  body.app-workspace h1 { font-size: 18px; }
  body.app-workspace .subtitle { font-size: 12px; line-height: 1.6; margin-bottom: 16px; }

  /* ── 弹窗与浮层：侧边栏收起，左右内边距与 .card 的 13px 一致 ── */
  body.app-workspace .keyboard-popup,
  body.app-workspace .material-modal-overlay { padding-left: 13px; padding-right: 13px; }

  /* ── 搜索行：窄屏折两行（输入框独占一行，查询+类型按钮同行） ── */
  body.app-workspace .search-row { flex-wrap: wrap; row-gap: 9px; }
  body.app-workspace .search-row input { flex: 1 1 100%; }
  body.app-workspace .search-row > button { flex: 0 0 auto; }
  body.app-workspace .search-row .type-btn-group {
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-left: 0;
  }
  body.app-workspace .standard-note { text-align: left; white-space: normal; word-break: break-word; }

  /* ── 数据卡：卡头与卡身紧凑化 ── */
  .app-panel-hd { padding: 11px 13px; font-size: 13px; gap: 8px; }
  .app-panel-hd .app-seg-i { padding: 4px 10px; font-size: 12px; }
  .app-panel-hd .app-panel-sub { display: none; }
  .app-panel-bd { padding: 13px; }
  body.app-workspace .app-panel-hd { row-gap: 8px; }

  /* ── 分段切换器：窄屏允许整组换行 ── */
  body.app-workspace .app-seg { flex-wrap: wrap; }

  /* ── 表格横向滚动：窄屏下避免撑破页面 ── */
  body.app-workspace.page-limitspeed .app-panel-bd,
  body.app-workspace.page-life .app-panel-bd,
  body.app-workspace.page-tolerance .app-panel-bd,
  body.app-workspace.page-clearance .app-panel-bd { overflow-x: auto; }

  /* ── 参数查询页 ── */
  body.app-workspace.page-query .q-opt-grid { grid-template-columns: 1fr; gap: 10px; }
  body.app-workspace.page-query .q-opt-grid .app-seg { flex-wrap: wrap; }
  body.app-workspace.page-query .e-pair { grid-template-columns: 1fr; }
  body.app-workspace.page-query .e-row .k { width: 42%; }
  body.app-workspace.page-query .e-model { font-size: 22px; }

  /* ── 公差配合页：左图右果 → 单列 ── */
  body.app-workspace.page-tolerance .tl-hd { gap: 14px; padding: 14px 16px 12px; }
  body.app-workspace.page-tolerance .tl-chips { padding-left: 0; border-left: 0; width: 100%; }
  body.app-workspace.page-tolerance .tl-core { grid-template-columns: 1fr; }
  body.app-workspace.page-tolerance .tl-fig { border-right: 0; border-bottom: 1px solid #eef2f7; padding: 14px 16px; }
  body.app-workspace.page-tolerance .tl-res { padding: 16px; }
  body.app-workspace.page-tolerance .tl-stat .v { font-size: 21px; }
  body.app-workspace.page-tolerance .tl-kb-fold,
  body.app-workspace.page-tolerance .tl-kb-body,
  body.app-workspace.page-tolerance .tl-ft { padding-left: 16px; padding-right: 16px; }

  /* ── 有效游隙页 ── */
  body.app-workspace.page-clearance .app-panel-hd { flex-wrap: wrap; row-gap: 8px; }
  body.app-workspace.page-clearance .clr-temp-grid { grid-template-columns: 1fr; }

  /* ── 滑动页面指示器（设计/极限转速/摩擦） ── */
  .swipe-indicator {
    display: flex;
    align-items: center;
    position: relative;
    margin: -4px -4px 12px;
    background: #eef2fb;
    border-radius: 10px;
    padding: 4px;
  }
  .swipe-ind-item {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    padding: 7px 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: color .2s;
  }
  .swipe-ind-item.on { color: var(--color-primary, #2563eb); }
  .swipe-ind-track {
    position: absolute;
    top: 4px; bottom: 4px;
    left: 4px; right: 4px;
    pointer-events: none;
  }
  .swipe-ind-thumb {
    position: absolute;
    top: 0; left: 0;
    width: 33.333%; height: 100%;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 1px 3px rgba(15,23,42,.12);
    transition: left .22s ease-out;
  }
}

/* ══ 桌面端（≥821px）═ 与上方 ≤820px 为一对互补断点 ══ */
@media (min-width: 821px) {
  /* 侧栏收起状态：宽度归零、边框透明 */
  body.app-workspace.side-collapsed { --wk-side-w: 0px; }
  body.app-workspace.side-collapsed .app-side { border-right-color: transparent; }
  /* 侧栏收起按钮：仅桌面端显示 */
  .app-side-toggle { display: flex; }
}


/* ══ 手机端（≤480px）═ 三列表格转为纵向卡片 ══
   只在手机宽度触发，平板（>480px）保持原有表格布局。
   每一行变成一张卡片：参数名 → 数值 → 备注 */
@media (max-width: 480px) {
  body.app-workspace .life-table {
    border: none;
    background: transparent;
    width: 100%;
    margin-top: 4px;
  }
  body.app-workspace .life-table thead { display: none; }
  body.app-workspace .life-table tbody {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.app-workspace .life-table tr {
    display: block;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
  }
  body.app-workspace .life-table td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    background: transparent !important;
  }
  /* 第一列：参数名（左对齐，灰色小字标签，与数值同行） */
  body.app-workspace .life-table td:first-child {
    float: left;
    width: auto !important;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    line-height: 22px;
    text-align: left !important;
  }
  /* 第二列：数值（右对齐，大字加粗，与参数名同行） */
  body.app-workspace .life-table td:nth-child(2) {
    float: right;
    width: auto !important;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    text-align: right !important;
    padding-bottom: 0 !important;
    line-height: 22px;
  }
  /* 清除浮动，确保卡片高度正确 */
  body.app-workspace .life-table tr::after {
    content: "";
    display: table;
    clear: both;
  }
  /* 第三列：备注（单独一行，灰色小字，顶部虚线分隔） */
  body.app-workspace .life-table td:nth-child(3) {
    clear: both;
    width: 100% !important;
    font-size: 11px;
    color: #94a3b8;
    border-top: 1px dashed #e2e8f0 !important;
    padding-top: 5px !important;
    margin-top: 6px;
    line-height: 1.4;
  }
  /* 第三列为空时：完全隐藏（不占空间，也不分隔线） */
  body.app-workspace .life-table td:nth-child(3).is-empty {
    display: none;
  }
  /* 第三列包含分段器等控件时：放在数值行右侧，不单独占行 */
  body.app-workspace .life-table td:nth-child(3):has(.app-seg) {
    clear: none;
    float: right;
    width: auto !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0;
    margin-left: 8px;
    display: flex;
    align-items: center;
    line-height: 22px;
  }
  body.app-workspace .life-table td:nth-child(3):has(.app-seg) .app-seg {
    justify-content: flex-end;
  }
  /* section-row 分组标题：横跨全宽，作为分组卡片标题 */
  body.app-workspace .life-table .section-row td {
    float: none !important;
    width: 100% !important;
    background: #eef2fb !important;
    font-size: 12px;
    font-weight: 700;
    color: #1b3f70;
    padding: 6px 10px !important;
    border-radius: 6px;
    margin: 2px 0 0;
    border: none !important;
    text-align: left !important;
    line-height: 1.4;
  }
  body.app-workspace .life-table .section-row {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  /* 卡片内数值列的分段器：靠右对齐 */
  body.app-workspace .life-table td:nth-child(2) .app-seg {
    justify-content: flex-end;
  }
  /* 卡片内输入框 */
  body.app-workspace .life-table .life-input {
    width: 90px;
    font-size: 14px;
  }

  /* ══ 参数查询页：手机端紧凑优化 ══ */
  /* 搜索行：输入框+查询按钮同行，类型按钮组单独一行等分 */
  body.app-workspace.page-query .search-row {
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  body.app-workspace.page-query .search-row input {
    padding: 9px 10px;
    font-size: 14px;
    flex: 1 1 0;
    min-width: 0;
  }
  body.app-workspace.page-query .search-row > button {
    padding: 9px 16px;
    font-size: 14px;
    flex: 0 0 auto;
  }
  body.app-workspace.page-query .search-row .type-btn-group {
    width: 100%;
    justify-content: stretch;
    gap: 4px;
    order: 3;
  }
  body.app-workspace.page-query .search-row .type-btn {
    flex: 1;
    padding: 7px 4px;
    font-size: 12px;
  }
  /* 选项区：标签与选项组同行，更紧凑 */
  body.app-workspace.page-query .q-opt-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 10px 0;
  }
  body.app-workspace.page-query .q-opt-cell {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body.app-workspace.page-query .q-opt-lbl {
    font-size: 12px;
    margin-bottom: 0;
    flex: none;
    width: auto;
    min-width: 4em;
  }
  body.app-workspace.page-query .q-opt-grid .app-seg {
    flex: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  body.app-workspace.page-query .q-opt-grid .app-seg-i {
    padding: 4px 8px;
    font-size: 11.5px;
    flex: 1;
    text-align: center;
  }
  /* 查询结果头部：型号字号缩小，标签更紧凑 */
  body.app-workspace.page-query .e-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 8px;
  }
  body.app-workspace.page-query .e-model {
    font-size: 20px;
  }
  body.app-workspace.page-query .e-chip {
    font-size: 11px;
    padding: 2px 7px;
  }
  /* 结果分组：更紧凑 */
  body.app-workspace.page-query .e-sec {
    margin-top: 10px;
  }
  body.app-workspace.page-query .e-sec-h {
    font-size: 12px;
    padding-bottom: 4px;
  }
  /* 参数行：更紧凑，左右标签与值 */
  body.app-workspace.page-query .e-row {
    padding: 5px 0;
  }
  body.app-workspace.page-query .e-row .k {
    width: 45%;
    font-size: 12px;
  }
  body.app-workspace.page-query .e-row .v {
    font-size: 13px;
  }
  /* 历史标签：更紧凑 */
  body.app-workspace.page-query .history-tags {
    gap: 6px;
  }
  body.app-workspace.page-query .history-tag {
    padding: 4px 10px;
    font-size: 12px;
  }
  /* 多结果表格：允许横向滚动，缩小内边距 */
  body.app-workspace.page-query .result-table th,
  body.app-workspace.page-query .result-table td {
    padding: 6px 5px;
    font-size: 12px;
  }
  body.app-workspace.page-query .result-table.multi th,
  body.app-workspace.page-query .result-table.multi td {
    padding: 5px 4px;
    font-size: 11.5px;
  }

  /* ══ 参数设计页：手机端紧凑优化 ══ */
  /* 设计表格也转为卡片式（同 life-table 风格） */
  body.app-workspace.page-design .design-table {
    border: none;
    background: transparent;
    width: 100%;
  }
  body.app-workspace.page-design .design-table thead { display: none; }
  body.app-workspace.page-design .design-table tbody {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.app-workspace.page-design .design-table tr {
    display: block;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
  }
  body.app-workspace.page-design .design-table td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    background: transparent !important;
  }
  /* 第一列：参数名（左） */
  body.app-workspace.page-design .design-table td:first-child {
    float: left;
    width: auto !important;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    line-height: 22px;
    text-align: left !important;
  }
  /* 第二列：数值（右） */
  body.app-workspace.page-design .design-table td:nth-child(2) {
    float: right;
    width: auto !important;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    text-align: right !important;
    line-height: 22px;
  }
  /* 第二列：可编辑数值用品牌色区分 */
  body.app-workspace.page-design .design-table td:nth-child(2).editable,
  body.app-workspace.page-design .design-table td:nth-child(2) .editable {
    color: #2563eb;
  }
  /* 第三列：备注/单位（底部） */
  body.app-workspace.page-design .design-table td:nth-child(3) {
    clear: both;
    width: 100% !important;
    font-size: 11px;
    color: #94a3b8;
    border-top: 1px dashed #e2e8f0 !important;
    padding-top: 5px !important;
    margin-top: 6px;
    line-height: 1.4;
  }
  body.app-workspace.page-design .design-table td:nth-child(3).is-empty {
    display: none;
  }
  /* 清除浮动 */
  body.app-workspace.page-design .design-table tr::after {
    content: "";
    display: table;
    clear: both;
  }
  /* 分组标题行 */
  body.app-workspace.page-design .design-table .section-title-cell {
    float: none !important;
    width: 100% !important;
    background: #eef2fb !important;
    font-size: 12px;
    font-weight: 700;
    color: #1b3f70;
    padding: 6px 10px !important;
    border-radius: 6px;
    border: none !important;
    text-align: left !important;
    line-height: 1.4;
  }
  body.app-workspace.page-design .design-table tr:has(.section-title-cell) {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  /* 设计页卡头：手机端更紧凑 */
  body.app-workspace.page-design .app-panel-hd {
    padding: 9px 12px;
    font-size: 13px;
    gap: 6px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  /* 基本参数卡：标题 + 型号 chip 分行时收紧间距 */
  body.app-workspace.page-design .app-panel-chip {
    font-size: 11px;
    padding: 2px 9px;
    margin-left: 0;
    order: 2;
  }
  /* 结构参数卡：标题占一行，分段器和按钮在下一行 */
  body.app-workspace.page-design .app-panel-hd .app-seg {
    order: 3;
    margin-left: 0 !important;
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  body.app-workspace.page-design .app-panel-hd .app-seg-i {
    padding: 4px 12px;
    font-size: 12px;
  }
  /* 隐藏系数按钮：手机端更紧凑 */
  body.app-workspace.page-design #toggle-coeff-btn {
    order: 4;
    font-size: 11px !important;
    padding: 3px 10px !important;
    margin-left: auto;
  }
  /* 设计页卡内容区内边距收紧 */
  body.app-workspace.page-design .app-panel-bd {
    padding: 10px 12px;
  }
  /* ══ 有效游隙页：手机端温度条件与分组标题优化 ══ */
  body.app-workspace.page-clearance .app-panel-hd {
    padding: 9px 12px;
    font-size: 13px;
    gap: 6px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  body.app-workspace.page-clearance .app-panel-sub {
    font-size: 11px;
    order: 2;
    flex: 1 1 100%;
  }
  body.app-workspace.page-clearance .app-panel-bd {
    padding: 10px 12px;
  }
  body.app-workspace.page-clearance .clr-sec-bar {
    margin: 12px 0 6px;
    gap: 6px;
  }
  body.app-workspace.page-clearance .clr-sec-bar b {
    font-size: 12.5px;
  }
  body.app-workspace.page-clearance .clr-sec-bar::before {
    width: 3px;
    height: 13px;
  }
  /* 温度条件：2列网格，标签+输入框+单位同行更紧凑 */
  body.app-workspace.page-clearance .clr-temp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin: 4px 0 10px;
  }
  body.app-workspace.page-clearance .clr-temp-item {
    gap: 6px;
  }
  body.app-workspace.page-clearance .clr-temp-label {
    font-size: 12px;
  }
  body.app-workspace.page-clearance .clr-temp-item input {
    width: 60px;
    padding: 5px 8px;
    font-size: 13px;
    border-radius: 6px;
  }
  body.app-workspace.page-clearance .clr-temp-unit {
    font-size: 11px;
  }

  /* ══ 型号对照页：手机端筛选条件优化 ══ */
  body.app-workspace.page-crossref .app-panel-hd {
    padding: 9px 12px;
    font-size: 13px;
    gap: 6px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  body.app-workspace.page-crossref .app-panel-sub {
    font-size: 11px;
    order: 2;
    flex: 1 1 100%;
  }
  body.app-workspace.page-crossref .app-panel-bd {
    padding: 10px 12px;
  }
  /* 筛选行：型号占满一行，3个尺寸框一行，2个选择框一行 */
  body.app-workspace.page-crossref .xref-search-row {
    gap: 6px;
  }
  body.app-workspace.page-crossref .xref-model-input {
    flex: 1 1 100%;
    padding: 8px 10px;
    font-size: 14px;
  }
  body.app-workspace.page-crossref .xref-dim-input {
    flex: 1 1 28%;
    padding: 8px 8px;
    font-size: 13px;
  }
  body.app-workspace.page-crossref .xref-select {
    flex: 1 1 46%;
    padding: 8px 8px;
    font-size: 13px;
  }
  /* 结果工具栏更紧凑 */
  body.app-workspace.page-crossref .xref-toolbar {
    margin: 8px 0 4px;
    font-size: 12px;
  }
  body.app-workspace.page-crossref .xref-count b {
    font-size: 13px;
  }
  body.app-workspace.page-crossref .xref-pagesize select {
    padding: 3px 5px;
    font-size: 12px;
  }
  /* 结果表格缩小内边距 */
  body.app-workspace.page-crossref .xref-table th,
  body.app-workspace.page-crossref .xref-table td {
    padding: 5px 6px;
    font-size: 12px;
  }
  body.app-workspace.page-crossref .xref-tag-type,
  body.app-workspace.page-crossref .xref-tag-brand {
    padding: 1px 6px;
    font-size: 11px;
  }
  /* 分页更紧凑 */
  body.app-workspace.page-crossref .xref-pagination {
    gap: 6px;
    margin-top: 8px;
  }
  body.app-workspace.page-crossref .xref-pagination button {
    padding: 5px 12px;
    font-size: 12px;
  }
  body.app-workspace.page-crossref .xref-pageinfo {
    font-size: 12px;
    min-width: 70px;
  }

  /* ══ 通用：深沟球表格、键盘区、材料弹窗等移动端紧凑化 ══ */
  /* 有效游隙：深沟球表格移动端缩小列宽和字号 */
  body.app-workspace.page-clearance .deep-groove-table th,
  body.app-workspace.page-clearance .deep-groove-table td {
    padding: 4px 3px;
    font-size: 12px;
  }
  body.app-workspace.page-clearance .deep-groove-table input,
  body.app-workspace.page-clearance .deep-groove-table select {
    font-size: 12px;
    height: 26px;
    padding: 0 3px;
    color: #2563eb;
    font-weight: 600;
  }
  body.app-workspace.page-clearance .deep-groove-table input[type="number"] {
    width: 100%;
  }
  body.app-workspace.page-clearance .deep-groove-table td.group {
    font-size: 12px;
  }
  /* 有效游隙：材料属性表移动端适配 */
  body.app-workspace.page-clearance .dg-material-table th,
  body.app-workspace.page-clearance .dg-material-table td {
    padding: 4px 2px !important;
    font-size: 11px !important;
    white-space: normal !important;
    word-break: keep-all;
  }
  body.app-workspace.page-clearance .dg-material-table input {
    font-size: 11px;
    width: 100%;
    box-sizing: border-box;
    color: #2563eb;
    font-weight: 600;
  }
  /* 键盘区域响应式 */
  body.app-workspace .keyboard-tabs {
    gap: 4px;
    flex-wrap: wrap;
  }
  body.app-workspace .keyboard-tab {
    padding: 5px 12px;
    font-size: 13px;
  }
  body.app-workspace .keyboard-table th,
  body.app-workspace .keyboard-table td {
    padding: 4px 2px;
    font-size: 11px;
  }
  body.app-workspace .key {
    padding: 4px 2px;
    font-size: 11px;
  }
  body.app-workspace .keyboard-legend {
    gap: 10px;
    font-size: 12px;
  }
  /* 配合图结果面板 */
  body.app-workspace.page-tolerance .tl-stat .v { font-size: 19px; }
  body.app-workspace.page-tolerance .tl-num input { width: 92px; font-size: 30px; }
  body.app-workspace.page-tolerance .tl-seg {
    padding: 8px 11px; min-width: 138px; gap: 6px;
  }
  body.app-workspace.page-tolerance .tl-seg .hd .lb { font-size: 12px; }
  body.app-workspace.page-tolerance .tl-seg .dvr .k { font-size: 11.5px; }
  body.app-workspace.page-tolerance .tl-seg.hole  .dvr .k,
  body.app-workspace.page-tolerance .tl-seg.shaft .dvr .k { font-size: 12.5px; }
  body.app-workspace.page-tolerance .tl-seg .dvr .b { font-size: 13.5px; }
  /* 材料弹窗 */
  body.app-workspace .material-modal-body {
    padding: 10px 10px 12px;
  }
  body.app-workspace .material-modal table th,
  body.app-workspace .material-modal table td {
    font-size: 11px;
    padding: 3px 4px;
  }
  body.app-workspace .material-modal table th {
    font-size: 11px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   内联样式归并（2026-09-13）：由各 HTML 高频重复的 style="…" 提取而来，
   声明逐条照抄，勿合并简写。clearance 用页面作用域提高特异度压过组件规则。
   ══════════════════════════════════════════════════════════════════════════ */
/* 行内单位/标注灰字（design / life / friction / limitspeed） */
.inline-unit { color:#94a3b8; font-size:12px; margin-left:4px; }
.inline-unit-nw { color:#94a3b8; font-size:12px; margin-left:4px; font-weight: 400; }

/* tolerance.html 行首基准代号列 .tol-th-blue：见上方 .kb-hole / .kb-shaft + .keyboard-table
   的分色规则。原归并声明 `.tol-th-blue{background:#409eff;color:white}` 已删除——
   它特异度 (0,4,1) 低于 `td:first-child` 的 (0,4,2)，实际从未生效，且不分孔轴。 */

/* design.html 可编辑单元格最小宽度 */
body.app-workspace.page-design .clr-minw { display:inline-block; min-width:50px; }

/* clearance.html 表格单元格 / 控件 / 列宽 */
body.app-workspace.page-clearance .clr-td { border:1px solid #e2e8f0; padding:5px; }
body.app-workspace.page-clearance .clr-td-c { border:1px solid #e2e8f0; padding:6px 10px; text-align:center; }
body.app-workspace.page-clearance .clr-td-c2 { border:1px solid #e2e8f0; padding:6px 10px; text-align:center; background:#f5f8fd; }
body.app-workspace.page-clearance .clr-td-p { border:1px solid #e2e8f0; padding:6px 10px; }
body.app-workspace.page-clearance .clr-td-p2 { border:1px solid #e2e8f0; padding:6px 4px; }
body.app-workspace.page-clearance .clr-td-f { border:1px solid #e2e8f0; padding:5px; font-size:14px; text-align:center; }
body.app-workspace.page-clearance .clr-td-a { background:#fafcfe; color:#475569; white-space:nowrap; border:1px solid #e2e8f0; padding:5px; font-size:14px; text-align:center; }
body.app-workspace.page-clearance .clr-td-a2 { background:#fafcfe; color:#475569; white-space:nowrap; border:1px solid #e2e8f0; padding:6px 10px; }
body.app-workspace.page-clearance .clr-td-a3 { background:#fafcfe; color:#475569; text-align:center; border:1px solid #e2e8f0; padding:6px 4px; font-size:14px; }
body.app-workspace.page-clearance .clr-td-a4 { border:1px solid #e2e8f0; padding:6px 10px; background:#fafcfe; color:#475569; text-align:center; }
body.app-workspace.page-clearance .clr-td-v { background:#ffffff; color:#0f172a; text-align:center; font-variant-numeric:tabular-nums; border:1px solid #e2e8f0; padding:6px 4px; font-size:14px; }
body.app-workspace.page-clearance .clr-td-r { text-align:right; font-variant-numeric:tabular-nums; color:#475569; border:1px solid #e2e8f0; padding:6px 10px; }
body.app-workspace.page-clearance .clr-td-h { border:1px solid #e2e8f0; border-bottom:2px solid #2563eb; padding:6px 10px; text-align:center; background:#eef2fb; color:#2563eb; }
body.app-workspace.page-clearance .clr-td-h2 { background:#eef2fb; color:#2563eb; font-weight:600; white-space:nowrap; text-align:center; border:1px solid #e2e8f0; border-bottom:2px solid #2563eb; padding:8px 5px; font-size:14px; }
body.app-workspace.page-clearance .clr-td-h3 { background:#eef2fb; color:#2563eb; font-weight:600; text-align:center; border:1px solid #e2e8f0; border-bottom:2px solid #2563eb; padding:6px 4px; font-size:14px; }
body.app-workspace.page-clearance .clr-td-h4 { background:#eef2fb; color:#2563eb; font-weight:600; text-align:center; border:1px solid #e2e8f0; border-bottom:2px solid #2563eb; padding:6px 4px; font-size:14px; white-space:nowrap; }
body.app-workspace.page-clearance .clr-td-g { background:#edf3fb; color:#33507c; font-weight:600; text-align:center; vertical-align:middle; border:1px solid #e2e8f0; padding:5px; font-size:14px; }
/* 计算结果表格行高调大，与参数表格协调 */
body.app-workspace.page-clearance #dg_result-card .clr-td-h,
body.app-workspace.page-clearance #dg_result-card .clr-td-c,
body.app-workspace.page-clearance #dg_result-card .clr-td-c2,
body.app-workspace.page-clearance #dg_result-card .clr-td-a4 {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ── 计算结果数值的语义配色（2026-09-15）────────────────────────────────
   两组数值讲的不是同一件事，不能用同一套「正红负蓝」：
     · 过盈量 —— 讲配合松紧：正 = 真过盈（紧）→ 琥珀，负 = 出现间隙（松）→ 蓝；
     · 游隙   —— 讲有没有游隙：正 = 有游隙 → 绿，负 = 负游隙/预紧 → 红。
   旧规则一律「正红负蓝」，结果是负游隙（预紧，恰恰更需要关注）被涂成冷静的
   蓝色，而「过盈量为正」和「游隙为正」又共用同一个红色，两种含义互相撞色。
   色值只在 CSS 定义，JS 侧只打 data-tone（见 clearance.html 的 dgSet）。 */
body.app-workspace.page-clearance #dg_result-card [data-tone="int-pos"]  { color: #b45309; }
body.app-workspace.page-clearance #dg_result-card [data-tone="int-neg"]  { color: #2563eb; }
body.app-workspace.page-clearance #dg_result-card [data-tone="clr-pos"]  { color: #047857; }
body.app-workspace.page-clearance #dg_result-card [data-tone="clr-neg"]  { color: #b91c1c; }
body.app-workspace.page-clearance #dg_result-card [data-tone$="-zero"]   { color: #94a3b8; }
/* 「有效游隙」是这页唯一的结论，左侧组名格跟着浮起来（只改底色与字色）：
   用 design 页结果强调同一套语言（浅蓝底 + #1d4ed8）。该行承载 rowspan 分类格，
   位于结果表 tbody 第 5 行。 */
body.app-workspace.page-clearance #dg_result-card tbody tr:nth-child(5) .clr-td-a4 {
  background: #e8f0fe; color: #1d4ed8;
}

body.app-workspace.page-clearance .clr-fs { font-size:14px; }
body.app-workspace.page-clearance .clr-w100 { width:100%; font-size:14px; }
body.app-workspace.page-clearance .clr-w100b { width:100%; font-size:14px; box-sizing:border-box; }
body.app-workspace.page-clearance .clr-w80 { width:80px; }
body.app-workspace.page-clearance .clr-w76 { width:76px; }
body.app-workspace.page-clearance .clr-col18 { width:18%; }

/* ── 有效游隙：结论组视觉浮起（整组浅蓝底 + 左品牌竖条） ──
   有效游隙是这页唯一结论，让整组（6σ / 原始两行）从结果表浮起，
   与 design 页「结论强调」同一套语言；语义色仍由 data-tone 决定。 */
body.app-workspace.page-clearance #dg_result-card tbody tr:nth-child(5),
body.app-workspace.page-clearance #dg_result-card tbody tr:nth-child(6) {
  background: #f5f9ff;
}
body.app-workspace.page-clearance #dg_result-card tbody tr:nth-child(5) td:first-child,
body.app-workspace.page-clearance #dg_result-card tbody tr:nth-child(6) td:first-child {
  box-shadow: inset 3px 0 0 #2563eb;
}
/* 结论 Mean 值强调：字号加大、字重加粗（颜色走 data-tone 语义色） */
body.app-workspace.page-clearance #dg_result-card #dg_r_6sig_eff_mean,
body.app-workspace.page-clearance #dg_result-card #dg_r_raw_eff_mean {
  font-size: 15px; font-weight: 700; letter-spacing: .2px;
}
/* 结果表三组分隔：过盈量 / 安装游隙 / 有效游隙 之间加浅蓝分隔线 */
body.app-workspace.page-clearance #dg_result-card tbody tr:nth-child(3) td {
  border-top: 2px solid #dbe7fb;
}
/* 参数输入表：行 hover 微交互，长表更易扫读（不影响输入框，仅底色） */
body.app-workspace.page-clearance .deep-groove-table tbody tr:hover td {
  background-color: rgba(37, 99, 235, .05);
}
body.app-workspace.page-clearance .deep-groove-table td { transition: background-color .15s ease; }
/* 输入 / 温度控件聚焦光环，贴合品牌蓝 */
body.app-workspace.page-clearance .clr-toolbar input:focus,
body.app-workspace.page-clearance .clr-toolbar select:focus,
body.app-workspace.page-clearance .clr-temp-item input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

/* ══════════════════════════════════════════════════════════════════════════
   极限转速：样本手册数据页布局（layout-3c 方案落地）
   ──────────────────────────────────────────────────────────────────────────
   结构：表头（型号大字 + 说明 + 页签）→ 条件横条 → 关键值横带 →
   计算链路 → 三列规格栏 → 图纸脚注。
   仅在 .page-limitspeed 作用域内生效，小节标题统一用 .ls-h 前缀避免与
   其他页面的通用类冲突。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 数据页外壳（复用 .app-panel 的卡片观感，去掉卡头行） ── */
body.app-workspace.page-limitspeed .ls-sheet {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05); overflow: hidden;
  margin-bottom: 16px;
}

/* ── 表头：型号大字 + 说明 + 剖面图/页签 ── */
body.app-workspace.page-limitspeed .ls-hd {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 22px 14px; border-bottom: 2px solid #1b3f70;
  flex-wrap: wrap;
}
body.app-workspace.page-limitspeed .ls-model {
  font-size: 30px; font-weight: 800; letter-spacing: .5px; color: #1b3f70;
  line-height: 1; font-variant-numeric: tabular-nums; flex: none;
}
body.app-workspace.page-limitspeed .ls-meta { min-width: 0; padding-bottom: 2px; flex: 1 1 220px; }
body.app-workspace.page-limitspeed .ls-meta .t { font-size: 13.5px; font-weight: 700; color: #0f172a; }
body.app-workspace.page-limitspeed .ls-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
body.app-workspace.page-limitspeed .ls-chip {
  font-size: 11px; color: #1d4ed8; background: #eef2fb;
  border-radius: 4px; padding: 2px 8px; white-space: nowrap;
}
body.app-workspace.page-limitspeed .ls-hd-seg { margin-left: auto; flex: none; }

/* 表头右侧关键值（极限转速主值） */
body.app-workspace.page-limitspeed .ls-big { margin-left: auto; flex: none; text-align: right; }
body.app-workspace.page-limitspeed .ls-big .n {
  font-size: 28px; font-weight: 800; color: #1b3f70;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
body.app-workspace.page-limitspeed .ls-big .n .u {
  font-size: 13px; color: #94a3b8; font-weight: 500; margin-left: 2px;
}
body.app-workspace.page-limitspeed .ls-big .s { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }

/* ── 条件横条 ── */
body.app-workspace.page-limitspeed .ls-cond {
  display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center;
  padding: 11px 22px; border-bottom: 1px solid #eef2f7; background: #fbfcfe;
}
body.app-workspace.page-limitspeed .ls-cond-it { display: flex; align-items: center; gap: 10px; }
body.app-workspace.page-limitspeed .ls-cond-lb {
  font-size: 12.5px; font-weight: 600; color: #64748b; white-space: nowrap;
}

/* ── 关键值横带 ── */
body.app-workspace.page-limitspeed .ls-band {
  display: flex; flex-wrap: wrap;
  background: #f0f6ff; border-bottom: 1px solid #c9dcf6;
}
body.app-workspace.page-limitspeed .ls-band-k {
  flex: 1 1 0; padding: 15px 22px 15px; min-width: 0;
}
body.app-workspace.page-limitspeed .ls-band-k + .ls-band-k { border-left: 1px dashed #cfe0f8; }
body.app-workspace.page-limitspeed .ls-band-k .l { font-size: 12px; color: #64748b; }
body.app-workspace.page-limitspeed .ls-band-k .v {
  font-size: 23px; font-weight: 800; color: #1d4ed8; margin-top: 5px;
  font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap;
}
body.app-workspace.page-limitspeed .ls-band-k .v .u {
  font-size: 12px; font-weight: 500; color: #8098c4; margin-left: 3px;
}
body.app-workspace.page-limitspeed .ls-band-k .f { font-size: 10.5px; color: #8098c4; margin-top: 2px; }
body.app-workspace.page-limitspeed .ls-band-k .f .tt { font-weight: 600; margin-right: 3px; }
body.app-workspace.page-limitspeed .ls-band-k.is-empty .v { color: #b6c2d4; }


/* ── 三列规格栏 ──
   默认三列；内容区不足时由下方 @media 逐级降为两列 / 单列，
   避免中等宽度下（1024~1180）三列被压到文字截断。 */
body.app-workspace.page-limitspeed .ls-cols {
  padding: 4px 22px 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 34px;
}
body.app-workspace.page-limitspeed .ls-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: #2563eb;
  padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; margin: 16px 0 2px;
}
body.app-workspace.page-limitspeed .ls-h .tip {
  font-size: 11px; font-weight: 400; color: #94a3b8; margin-left: 2px;
}
/* 每列的首个小节标题都不带上外边距，保证三列标题基线水平对齐 */
body.app-workspace.page-limitspeed .ls-cols > div > .ls-h:first-child { margin-top: 12px; }

/* ── 两级数据行：上行「参数 ····· 值」，下行注脚 ──
   flex + align-items:baseline 让标签/点线/值同一基线；
   注脚 .vwrap 用 min-height 预留两行高度，使有无备注的行高一致 → 各列水平对齐。 */
body.app-workspace.page-limitspeed .ls-sp {
  display: flex; align-items: baseline; padding: 6px 0 5px; min-width: 0;
}
body.app-workspace.page-limitspeed .ls-sp > .k {
  color: #64748b; font-size: 14px; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-workspace.page-limitspeed .ls-sp .k sub,
body.app-workspace.page-limitspeed .ls-sp .k sup { font-size: 10px; }
body.app-workspace.page-limitspeed .ls-sp .dots {
  flex: 0 0 18px; width: 18px; border-bottom: 1px dotted #a8b6c9;
  margin: 0 6px; transform: translateY(-3px); min-width: 10px;
}
body.app-workspace.page-limitspeed .ls-sp .vwrap {
  flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end;
  max-width: 55%; min-width: 0;
  /* 固定两行高度（值 1 行 + 注脚 1 行）：注脚为空或有内容都不改变行高，
     同一列各数据行因此始终水平对齐；注脚过长时单行省略不换行。 */
  height: 36px; justify-content: flex-start;
}
body.app-workspace.page-limitspeed .ls-sp .vwrap > .v {
  flex: none;
  /* 值盒拉伸到 .vwrap 全宽（.vwrap 宽度由较宽的注脚决定），
     配 text-align:right 后值的右缘与注脚右缘严格对齐；
     否则值盒按自身内容收窄，右缘会落在注脚右缘左侧。 */
  align-self: stretch; width: 100%;
}
body.app-workspace.page-limitspeed .ls-sp .vwrap > .sub {
  flex: none; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-workspace.page-limitspeed .ls-sp .v {
  font-weight: 700; color: #0f172a; font-size: 14.5px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.35;
}
body.app-workspace.page-limitspeed .ls-sp .v .u {
  font-size: 11px; color: #94a3b8; font-weight: 400; margin-left: 2px;
}
body.app-workspace.page-limitspeed .ls-sp .v.ed-v { color: #2563eb; }
body.app-workspace.page-limitspeed .ls-sp .v.ed-v[data-action] {
  border-bottom: 1px dashed #93b4f5; cursor: pointer;
}
body.app-workspace.page-limitspeed .ls-sp .sub {
  font-size: 11px; color: #94a3b8; margin-top: 1px;
  text-align: right; line-height: 1.4;
}
body.app-workspace.page-limitspeed .ls-sp .sub .tt { font-weight: 600; margin-right: 3px; }
body.app-workspace.page-limitspeed .ls-sp.res .v { color: #1d4ed8; font-size: 15.5px; font-weight: 800; }
body.app-workspace.page-limitspeed .ls-sp.res .k { color: #0f172a; font-weight: 600; }

/* 注脚语义色（查表 / 推算 / 输出 / 联动） */
.tt-q { color: #2563eb; }
.tt-c { color: #b06a1a; }
.tt-o { color: #0b8a5f; }
.tt-l { color: #64748b; }

/* ── 图纸脚注（图例 + 页码） ── */
body.app-workspace.page-limitspeed .ls-ft {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 22px; border-top: 1px solid #eef2f7;
  font-size: 11px; color: #94a3b8;
}
body.app-workspace.page-limitspeed .ls-ft .lg {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
body.app-workspace.page-limitspeed .ls-ft .lg .tt { margin-right: 2px; }

/* ── 可编辑值的行内输入框（沿用旧样式尺寸） ── */
body.app-workspace.page-limitspeed .ls-sp .life-input {
  width: 76px; padding: 3px 6px; border: 1.5px solid #2563eb; border-radius: 4px;
  font-size: 13px; outline: none; text-align: center; background: #fff; color: #334155;
  font-weight: 400;
}

/* ── 窄屏：三列 → 两列 → 单列 ──
   页面含侧栏（约 168px）。1366px 及以上三列各约 340px 舒适；
   1150px 以下窗口扣除侧栏后三列不足 300px，必须降两列。 */
@media (max-width: 1150px) {
  body.app-workspace.page-limitspeed .ls-cols { grid-template-columns: 1fr 1fr; gap: 0 30px; }
  /* 两列时第三栏独占一行，给它一个上分隔以保持分组感 */
  body.app-workspace.page-limitspeed .ls-cols > div:nth-child(3) {
    grid-column: 1 / -1; margin-top: 14px;
  }
}
@media (max-width: 900px) {
  body.app-workspace.page-limitspeed .ls-cols { grid-template-columns: 1fr; padding: 6px 14px 16px; }
  body.app-workspace.page-limitspeed .ls-hd,
  body.app-workspace.page-limitspeed .ls-cond,
  body.app-workspace.page-limitspeed .ls-ft { padding-left: 14px; padding-right: 14px; }
  body.app-workspace.page-limitspeed .ls-band-k { padding-left: 14px; padding-right: 14px; }
  body.app-workspace.page-limitspeed .ls-hd { flex-wrap: wrap; gap: 12px; }
  body.app-workspace.page-limitspeed .ls-big,
  body.app-workspace.page-limitspeed .ls-hd-seg { margin-left: 0; }
  body.app-workspace.page-limitspeed .ls-sp .k { max-width: 50%; }
}
@media (max-width: 680px) {
  body.app-workspace.page-limitspeed .ls-band-k { flex: 1 1 calc(50% - 1px); }
  body.app-workspace.page-limitspeed .ls-band-k + .ls-band-k { border-left: 1px dashed #cfe0f8; }
  body.app-workspace.page-limitspeed .ls-band-k:nth-child(2n+1) { border-left: 0; }
  body.app-workspace.page-limitspeed .ls-band-k:nth-child(n+3) { border-top: 1px dashed #cfe0f8; }
}

/* ── 手机端：杜绝横向溢出 ──
   窄屏下型号大字 + 主值 + 徽标三者并排会顶破视口，
   改为纵向堆叠；数值与表格行允许收缩换行，横带数值缩小一档。 */
@media (max-width: 560px) {
  body.app-workspace.page-limitspeed .ls-hd {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  body.app-workspace.page-limitspeed .ls-model { font-size: 26px; }
  body.app-workspace.page-limitspeed .ls-meta { flex: none; width: 100%; }
  body.app-workspace.page-limitspeed .ls-big {
    margin-left: 0; text-align: left; width: 100%;
  }
  body.app-workspace.page-limitspeed .ls-big .n { font-size: 24px; }
  body.app-workspace.page-limitspeed .ls-cond { gap: 8px 16px; }
  body.app-workspace.page-limitspeed .ls-cond-it { flex-wrap: wrap; }
  body.app-workspace.page-limitspeed .ls-cond-it[style] { margin-left: 0 !important; }
  body.app-workspace.page-limitspeed .ls-band-k .v { font-size: 19px; }
  body.app-workspace.page-limitspeed .ls-band-k .v .u { font-size: 11px; }
  body.app-workspace.page-limitspeed .ls-cols { padding: 6px 12px 14px; }
  body.app-workspace.page-limitspeed .ls-hd,
  body.app-workspace.page-limitspeed .ls-cond,
  body.app-workspace.page-limitspeed .ls-ft { padding-left: 12px; padding-right: 12px; }
  body.app-workspace.page-limitspeed .ls-band-k { padding-left: 12px; padding-right: 12px; }
  /* 数据行：注脚过长时允许值列收缩，禁止撑破容器 */
  body.app-workspace.page-limitspeed .ls-sp { min-width: 0; }
  body.app-workspace.page-limitspeed .ls-sp .k { flex: 1 1 40%; max-width: 44%; }
  body.app-workspace.page-limitspeed .ls-sp .dots { margin: 0 4px; }
  body.app-workspace.page-limitspeed .ls-sp .vwrap { max-width: 56%; min-width: 0; }
  body.app-workspace.page-limitspeed .ls-sp .v { font-size: 12.5px; }
  body.app-workspace.page-limitspeed .ls-sp .sub { font-size: 10px; }
  body.app-workspace.page-limitspeed .ls-sp.res .v { font-size: 13.5px; }
  body.app-workspace.page-limitspeed .ls-ft { font-size: 10.5px; }
  body.app-workspace.page-limitspeed .ls-ft .lg { gap: 10px; }
}

/* ── 超窄屏（≤ 400px）：进一步压缩内边距，值列可折行 ── */
@media (max-width: 400px) {
  body.app-workspace.page-limitspeed .ls-cols { padding: 6px 10px 12px; }
  body.app-workspace.page-limitspeed .ls-hd,
  body.app-workspace.page-limitspeed .ls-cond,
  body.app-workspace.page-limitspeed .ls-ft { padding-left: 10px; padding-right: 10px; }
  body.app-workspace.page-limitspeed .ls-band-k { padding-left: 10px; padding-right: 10px; }
  body.app-workspace.page-limitspeed .ls-cols { gap: 0; }
  body.app-workspace.page-limitspeed .ls-sp .k { flex: 0 1 auto; max-width: none; }
  body.app-workspace.page-limitspeed .ls-sp .dots { display: none; }
  body.app-workspace.page-limitspeed .ls-sp {
    flex-wrap: wrap; justify-content: space-between;
  }
  body.app-workspace.page-limitspeed .ls-sp .vwrap { max-width: 100%; align-items: flex-start; }
  body.app-workspace.page-limitspeed .ls-sp .sub { text-align: left; }
  body.app-workspace.page-limitspeed .ls-sp .v { white-space: normal; }
  body.app-workspace.page-limitspeed .ls-band-k .v { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════
   寿命校核：样本手册数据页布局（layout-3c 方案落地）
   ──────────────────────────────────────────────────────────────────────────
   结构：表头（型号大字 + 说明 + 页签）→ 条件横条 → 关键值横带 →
   计算链路 → 三列规格栏 → 图纸脚注。
   仅在 .page-life 作用域内生效，小节标题统一用 .lf-h 前缀避免与
   其他页面的通用类冲突。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 数据页外壳（复用 .app-panel 的卡片观感，去掉卡头行） ── */
body.app-workspace.page-life .lf-sheet {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05); overflow: hidden;
  margin-bottom: 16px;
}

/* ── 表头：型号大字 + 说明 + 剖面图/页签 ── */
body.app-workspace.page-life .lf-hd {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 22px 14px; border-bottom: 2px solid #1b3f70;
  flex-wrap: wrap;
}
body.app-workspace.page-life .lf-model {
  font-size: 30px; font-weight: 800; letter-spacing: .5px; color: #1b3f70;
  line-height: 1; font-variant-numeric: tabular-nums; flex: none;
}
body.app-workspace.page-life .lf-meta { min-width: 0; padding-bottom: 2px; flex: 1 1 220px; }
body.app-workspace.page-life .lf-meta .t { font-size: 13.5px; font-weight: 700; color: #0f172a; }
body.app-workspace.page-life .lf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
body.app-workspace.page-life .lf-chip {
  font-size: 11px; color: #1d4ed8; background: #eef2fb;
  border-radius: 4px; padding: 2px 8px; white-space: nowrap;
}
body.app-workspace.page-life .lf-hd-seg { margin-left: auto; flex: none; }

/* 表头右侧关键值（极限转速主值） */
body.app-workspace.page-life .lf-big { margin-left: auto; flex: none; text-align: right; }
body.app-workspace.page-life .lf-big .n {
  font-size: 28px; font-weight: 800; color: #1b3f70;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
body.app-workspace.page-life .lf-big .n .u {
  font-size: 13px; color: #94a3b8; font-weight: 500; margin-left: 2px;
}
body.app-workspace.page-life .lf-big .s { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }

/* ── 条件横条 ── */
body.app-workspace.page-life .lf-cond {
  display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center;
  padding: 11px 22px; border-bottom: 1px solid #eef2f7; background: #fbfcfe;
}
body.app-workspace.page-life .lf-cond-it { display: flex; align-items: center; gap: 10px; }
body.app-workspace.page-life .lf-cond-lb {
  font-size: 12.5px; font-weight: 600; color: #64748b; white-space: nowrap;
}

/* ── 关键值横带 ── */
body.app-workspace.page-life .lf-band {
  display: flex; flex-wrap: wrap;
  background: #f0f6ff; border-bottom: 1px solid #c9dcf6;
}
body.app-workspace.page-life .lf-band-k {
  flex: 1 1 0; padding: 15px 22px 15px; min-width: 0;
}
body.app-workspace.page-life .lf-band-k + .lf-band-k { border-left: 1px dashed #cfe0f8; }
body.app-workspace.page-life .lf-band-k .l { font-size: 12px; color: #64748b; }
body.app-workspace.page-life .lf-band-k .v {
  font-size: 23px; font-weight: 800; color: #1d4ed8; margin-top: 5px;
  font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap;
}
body.app-workspace.page-life .lf-band-k .v .u {
  font-size: 12px; font-weight: 500; color: #8098c4; margin-left: 3px;
}
body.app-workspace.page-life .lf-band-k .f { font-size: 10.5px; color: #8098c4; margin-top: 2px; }
body.app-workspace.page-life .lf-band-k.is-empty .v { color: #b6c2d4; }


/* ── 三列规格栏 ──
   默认三列；内容区不足时由下方 @media 逐级降为两列 / 单列，
   避免中等宽度下（1024~1180）三列被压到文字截断。 */
body.app-workspace.page-life .lf-cols {
  padding: 4px 22px 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 34px;
}
/* 静载荷 pane 只有两列（静载荷系数 / 校核结论），宽屏改双列栅格避免右侧留空 1/3。
   注意：≤1150px 时全局 .lf-cols 规则已把各 pane 降为两列，所以这里的双列声明只在
   ≥1151px 才需要；这样 901~1150px 沿用默认 34px 列间距，不会把列宽压得过窄。
   两列时列宽变宽会让「标签 ····· 值」之间的空隙显得过大，故加大列间距，把多出来的宽度
   还给列间距、列宽收窄，标签与数值的距离相应变小。间距分档，避免列宽被压到标签截断。 */
@media (min-width: 1151px) {
  body.app-workspace.page-life .lf-cols#paneStatic {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0 120px;
  }
}
@media (min-width: 1280px) {
  body.app-workspace.page-life .lf-cols#paneStatic {
    gap: 0 200px;
  }
}
body.app-workspace.page-life .lf-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: #2563eb;
  padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; margin: 16px 0 2px;
}
body.app-workspace.page-life .lf-h .tip {
  font-size: 11px; font-weight: 400; color: #94a3b8; margin-left: 2px;
}
/* 每列的首个小节标题都不带上外边距，保证三列标题基线水平对齐 */
body.app-workspace.page-life .lf-cols > div > .lf-h:first-child { margin-top: 12px; }

/* ── 两级数据行：上行「参数 ····· 值」，下行注脚 ──
   flex + align-items:baseline 让标签/点线/值同一基线；
   注脚 .vwrap 用 min-height 预留两行高度，使有无备注的行高一致 → 各列水平对齐。 */
body.app-workspace.page-life .lf-sp {
  display: flex; align-items: baseline; padding: 6px 0 5px; min-width: 0;
}
body.app-workspace.page-life .lf-sp > .k {
  color: #64748b; font-size: 14px; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-workspace.page-life .lf-sp .k sub,
body.app-workspace.page-life .lf-sp .k sup { font-size: 10px; }
body.app-workspace.page-life .lf-sp .dots {
  flex: 0 0 18px; width: 18px; border-bottom: 1px dotted #a8b6c9;
  margin: 0 6px; transform: translateY(-3px); min-width: 10px;
}
body.app-workspace.page-life .lf-sp .vwrap {
  flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end;
  max-width: 55%; min-width: 0;
  /* 固定两行高度（值 1 行 + 注脚 1 行）：注脚为空或有内容都不改变行高，
     同一列各数据行因此始终水平对齐；注脚过长时单行省略不换行。 */
  height: 36px; justify-content: flex-start;
}
body.app-workspace.page-life .lf-sp .vwrap > .v {
  flex: none;
  /* 值盒拉伸到 .vwrap 全宽（.vwrap 宽度由较宽的注脚决定），
     配 text-align:right 后值的右缘与注脚右缘严格对齐；
     否则值盒按自身内容收窄，右缘会落在注脚右缘左侧。 */
  align-self: stretch; width: 100%;
}
body.app-workspace.page-life .lf-sp .vwrap > .sub {
  flex: none; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-workspace.page-life .lf-sp .v {
  font-weight: 700; color: #0f172a; font-size: 14.5px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.35;
}
body.app-workspace.page-life .lf-sp .v .u {
  font-size: 11px; color: #94a3b8; font-weight: 400; margin-left: 2px;
}
body.app-workspace.page-life .lf-sp .v.ed-v { color: #2563eb; }
body.app-workspace.page-life .lf-sp .v.ed-v[data-action] {
  border-bottom: 1px dashed #93b4f5; cursor: pointer;
}
body.app-workspace.page-life .lf-sp .sub {
  font-size: 11px; color: #94a3b8; margin-top: 1px;
  text-align: right; line-height: 1.4;
}
body.app-workspace.page-life .lf-sp.res .v { color: #1d4ed8; font-size: 15.5px; font-weight: 800; }
body.app-workspace.page-life .lf-sp.res .k { color: #0f172a; font-weight: 600; }

/* 结论行（.res）特例：标签更长、注脚是阈值图例（形如「静音≥2.0丨正常≥1.0丨冲击≥1.5」），
   若沿用普通行的 nowrap+省略号，长注脚会挤占 .k 宽度，令标签被截断成「径向静载安全系…」。
   这里改为：标签允许折行（不再截断），值/注脚各自独占一行、注脚可折行铺满整列宽度。 */
body.app-workspace.page-life .lf-sp.res > .k {
  overflow: visible; text-overflow: clip; white-space: normal;
}
body.app-workspace.page-life .lf-sp.res .vwrap {
  max-width: 62%; height: auto; min-height: 36px;
}
body.app-workspace.page-life .lf-sp.res .vwrap > .sub {
  overflow: visible; text-overflow: clip; white-space: normal;
  text-align: right; line-height: 1.45;
}


/* ── 页脚标准引用 ── */
body.app-workspace.page-life .lf-ft {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 22px; border-top: 1px solid #eef2f7;
  font-size: 11px; color: #94a3b8;
}

/* ── 可编辑值的行内输入框（沿用旧样式尺寸） ── */
body.app-workspace.page-life .lf-sp .life-input {
  width: 76px; padding: 3px 6px; border: 1.5px solid #2563eb; border-radius: 4px;
  font-size: 13px; outline: none; text-align: center; background: #fff; color: #334155;
  font-weight: 400;
}

/* ── 窄屏：三列 → 两列 → 单列 ──
   页面含侧栏（约 168px）。1366px 及以上三列各约 340px 舒适；
   1150px 以下窗口扣除侧栏后三列不足 300px，必须降两列。 */
@media (max-width: 1150px) {
  body.app-workspace.page-life .lf-cols { grid-template-columns: 1fr 1fr; gap: 0 30px; }
  /* 两列时第三栏独占一行，给它一个上分隔以保持分组感 */
  body.app-workspace.page-life .lf-cols > div:nth-child(3) {
    grid-column: 1 / -1; margin-top: 14px;
  }
}
@media (max-width: 900px) {
  body.app-workspace.page-life .lf-cols { grid-template-columns: 1fr; padding: 6px 14px 16px; }
  body.app-workspace.page-life .lf-hd,
  body.app-workspace.page-life .lf-cond,
  body.app-workspace.page-life .lf-ft { padding-left: 14px; padding-right: 14px; }
  body.app-workspace.page-life .lf-band-k { padding-left: 14px; padding-right: 14px; }
  body.app-workspace.page-life .lf-hd { flex-wrap: wrap; gap: 12px; }
  body.app-workspace.page-life .lf-big,
  body.app-workspace.page-life .lf-hd-seg { margin-left: 0; }
  body.app-workspace.page-life .lf-sp .k { max-width: 50%; }
}
@media (max-width: 680px) {
  body.app-workspace.page-life .lf-band-k { flex: 1 1 calc(50% - 1px); }
  body.app-workspace.page-life .lf-band-k + .lf-band-k { border-left: 1px dashed #cfe0f8; }
  body.app-workspace.page-life .lf-band-k:nth-child(2n+1) { border-left: 0; }
  body.app-workspace.page-life .lf-band-k:nth-child(n+3) { border-top: 1px dashed #cfe0f8; }
}

/* ── 手机端：杜绝横向溢出 ──
   窄屏下型号大字 + 主值 + 徽标三者并排会顶破视口，
   改为纵向堆叠；数值与表格行允许收缩换行，横带数值缩小一档。 */
@media (max-width: 560px) {
  body.app-workspace.page-life .lf-hd {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  body.app-workspace.page-life .lf-model { font-size: 26px; }
  body.app-workspace.page-life .lf-meta { flex: none; width: 100%; }
  body.app-workspace.page-life .lf-big {
    margin-left: 0; text-align: left; width: 100%;
  }
  body.app-workspace.page-life .lf-big .n { font-size: 24px; }
  body.app-workspace.page-life .lf-cond { gap: 8px 16px; }
  body.app-workspace.page-life .lf-cond-it { flex-wrap: wrap; }
  body.app-workspace.page-life .lf-cond-it[style] { margin-left: 0 !important; }
  body.app-workspace.page-life .lf-band-k .v { font-size: 19px; }
  body.app-workspace.page-life .lf-band-k .v .u { font-size: 11px; }
  body.app-workspace.page-life .lf-cols { padding: 6px 12px 14px; }
  body.app-workspace.page-life .lf-hd,
  body.app-workspace.page-life .lf-cond,
  body.app-workspace.page-life .lf-ft { padding-left: 12px; padding-right: 12px; }
  body.app-workspace.page-life .lf-band-k { padding-left: 12px; padding-right: 12px; }
  /* 数据行：注脚过长时允许值列收缩，禁止撑破容器 */
  body.app-workspace.page-life .lf-sp { min-width: 0; }
  body.app-workspace.page-life .lf-sp .k { flex: 1 1 40%; max-width: 44%; }
  body.app-workspace.page-life .lf-sp .dots { margin: 0 4px; }
  body.app-workspace.page-life .lf-sp .vwrap { max-width: 56%; min-width: 0; }
  body.app-workspace.page-life .lf-sp.res .vwrap { max-width: 70%; }
  body.app-workspace.page-life .lf-sp .v { font-size: 12.5px; }
  body.app-workspace.page-life .lf-sp .sub { font-size: 10px; }
  body.app-workspace.page-life .lf-sp.res .v { font-size: 13.5px; }
  body.app-workspace.page-life .lf-ft { font-size: 10.5px; }
}

/* ── 超窄屏（≤ 400px）：进一步压缩内边距，值列可折行 ── */
@media (max-width: 400px) {
  body.app-workspace.page-life .lf-cols { padding: 6px 10px 12px; }
  body.app-workspace.page-life .lf-hd,
  body.app-workspace.page-life .lf-cond,
  body.app-workspace.page-life .lf-ft { padding-left: 10px; padding-right: 10px; }
  body.app-workspace.page-life .lf-band-k { padding-left: 10px; padding-right: 10px; }
  body.app-workspace.page-life .lf-cols { gap: 0; }
  body.app-workspace.page-life .lf-sp .k { flex: 0 1 auto; max-width: none; }
  body.app-workspace.page-life .lf-sp .dots { display: none; }
  body.app-workspace.page-life .lf-sp {
    flex-wrap: wrap; justify-content: space-between;
  }
  body.app-workspace.page-life .lf-sp .vwrap { max-width: 100%; align-items: flex-start; }
  body.app-workspace.page-life .lf-sp.res .vwrap { max-width: 100%; min-height: 0; }
  body.app-workspace.page-life .lf-sp .sub { text-align: left; }
  body.app-workspace.page-life .lf-sp.res .sub { text-align: left; }
  body.app-workspace.page-life .lf-sp .v { white-space: normal; }
  body.app-workspace.page-life .lf-band-k .v { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════
   摩擦力矩：样本手册数据页布局（layout-3c 方案落地）
   ──────────────────────────────────────────────────────────────────────────
   结构：表头（型号大字 + 说明 + 主值 M）→ 条件横条 → 关键值横带 →
   三列规格栏 → 页脚标准引用。
   （2026-09-24 移除「计算链路」条与「力矩分量构成」色带条）
   仅在 .page-friction 作用域内生效，小节标题统一用 .fr-h 前缀避免与
   其他页面的通用类冲突。样式与 limitspeed(.ls-*) / life(.lf-*) 同构。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 数据页外壳（复用 .app-panel 的卡片观感，去掉卡头行） ── */
body.app-workspace.page-friction .fr-sheet {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05); overflow: hidden;
  margin-bottom: 16px;
}

/* ── 表头：型号大字 + 说明 + 剖面图/页签 ── */
body.app-workspace.page-friction .fr-hd {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 22px 14px; border-bottom: 2px solid #1b3f70;
  flex-wrap: wrap;
}
body.app-workspace.page-friction .fr-model {
  font-size: 30px; font-weight: 800; letter-spacing: .5px; color: #1b3f70;
  line-height: 1; font-variant-numeric: tabular-nums; flex: none;
}
body.app-workspace.page-friction .fr-meta { min-width: 0; padding-bottom: 2px; flex: 1 1 220px; }
body.app-workspace.page-friction .fr-meta .t { font-size: 13.5px; font-weight: 700; color: #0f172a; }
body.app-workspace.page-friction .fr-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
body.app-workspace.page-friction .fr-chip {
  font-size: 11px; color: #1d4ed8; background: #eef2fb;
  border-radius: 4px; padding: 2px 8px; white-space: nowrap;
}

/* 表头右侧关键值（总摩擦力矩 M） */
body.app-workspace.page-friction .fr-big { margin-left: auto; flex: none; text-align: right; }
body.app-workspace.page-friction .fr-big .n {
  font-size: 28px; font-weight: 800; color: #1b3f70;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
body.app-workspace.page-friction .fr-big .n .u {
  font-size: 13px; color: #94a3b8; font-weight: 500; margin-left: 2px;
}
body.app-workspace.page-friction .fr-big .s { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }

/* ── 条件横条 ── */
body.app-workspace.page-friction .fr-cond {
  display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center;
  padding: 11px 22px; border-bottom: 1px solid #eef2f7; background: #fbfcfe;
}
body.app-workspace.page-friction .fr-cond-it { display: flex; align-items: center; gap: 10px; }
body.app-workspace.page-friction .fr-cond-lb {
  font-size: 12.5px; font-weight: 600; color: #64748b; white-space: nowrap;
}

/* ── 关键值横带 ── */
body.app-workspace.page-friction .fr-band {
  display: flex; flex-wrap: wrap;
  background: #f0f6ff; border-bottom: 1px solid #c9dcf6;
}
body.app-workspace.page-friction .fr-band-k {
  flex: 1 1 0; padding: 15px 22px 15px; min-width: 0;
}
body.app-workspace.page-friction .fr-band-k + .fr-band-k { border-left: 1px dashed #cfe0f8; }
body.app-workspace.page-friction .fr-band-k .l { font-size: 12px; color: #64748b; }
body.app-workspace.page-friction .fr-band-k .v {
  font-size: 23px; font-weight: 800; color: #1d4ed8; margin-top: 5px;
  font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap;
}
body.app-workspace.page-friction .fr-band-k .v .u {
  font-size: 12px; font-weight: 500; color: #8098c4; margin-left: 3px;
}
body.app-workspace.page-friction .fr-band-k .f { font-size: 10.5px; color: #8098c4; margin-top: 2px; }
body.app-workspace.page-friction .fr-band-k.is-empty .v { color: #b6c2d4; }


/* ── 三列规格栏 ──
   默认三列；内容区不足时由下方 @media 逐级降为两列 / 单列，
   避免中等宽度下（1024~1180）三列被压到文字截断。 */
body.app-workspace.page-friction .fr-cols {
  padding: 4px 22px 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 34px;
}
body.app-workspace.page-friction .fr-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: #2563eb;
  padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; margin: 16px 0 2px;
}
body.app-workspace.page-friction .fr-h .tip {
  font-size: 11px; font-weight: 400; color: #94a3b8; margin-left: 2px;
}
/* 每列的首个小节标题都不带上外边距，保证三列标题基线水平对齐 */
body.app-workspace.page-friction .fr-cols > div > .fr-h:first-child { margin-top: 12px; }

/* ── 两级数据行：上行「参数 ····· 值」，下行注脚 ──
   flex + align-items:baseline 让标签/点线/值同一基线；
   注脚 .vwrap 用 min-height 预留两行高度，使有无备注的行高一致 → 各列水平对齐。 */
body.app-workspace.page-friction .fr-sp {
  display: flex; align-items: baseline; padding: 6px 0 5px; min-width: 0;
}
body.app-workspace.page-friction .fr-sp > .k {
  color: #64748b; font-size: 14px; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-workspace.page-friction .fr-sp .k sub,
body.app-workspace.page-friction .fr-sp .k sup { font-size: 10px; }
body.app-workspace.page-friction .fr-sp .dots {
  flex: 0 0 18px; width: 18px; border-bottom: 1px dotted #a8b6c9;
  margin: 0 6px; transform: translateY(-3px); min-width: 10px;
}
body.app-workspace.page-friction .fr-sp .vwrap {
  flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end;
  max-width: 55%; min-width: 0;
  /* 固定两行高度（值 1 行 + 注脚 1 行）：注脚为空或有内容都不改变行高，
     同一列各数据行因此始终水平对齐；注脚过长时单行省略不换行。 */
  height: 36px; justify-content: flex-start;
}
body.app-workspace.page-friction .fr-sp .vwrap > .v {
  flex: none;
  /* 值盒拉伸到 .vwrap 全宽（.vwrap 宽度由较宽的注脚决定），
     配 text-align:right 后值的右缘与注脚右缘严格对齐；
     否则值盒按自身内容收窄，右缘会落在注脚右缘左侧。 */
  align-self: stretch; width: 100%;
}
body.app-workspace.page-friction .fr-sp .vwrap > .sub {
  flex: none; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-workspace.page-friction .fr-sp .v {
  font-weight: 700; color: #0f172a; font-size: 14.5px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.35;
}
body.app-workspace.page-friction .fr-sp .v .u {
  font-size: 11px; color: #94a3b8; font-weight: 400; margin-left: 2px;
}
body.app-workspace.page-friction .fr-sp .v.ed-v { color: #2563eb; }
body.app-workspace.page-friction .fr-sp .v.ed-v[data-action] {
  border-bottom: 1px dashed #93b4f5; cursor: pointer;
}
body.app-workspace.page-friction .fr-sp .sub {
  font-size: 11px; color: #94a3b8; margin-top: 1px;
  text-align: right; line-height: 1.4;
}
body.app-workspace.page-friction .fr-sp.res .v { color: #1d4ed8; font-size: 15.5px; font-weight: 800; }
body.app-workspace.page-friction .fr-sp.res .k { color: #0f172a; font-weight: 600; }

/* ── 两个 pane 的列栅格（方案 A：各自都是「真三列」，无空轨）──
   两 pane 同屏共存、都跨满整行，且各自恰好 3 个可见列：
   · paneSkf    = 工况输入 + 过程参数 + 力矩分量/计算结果
   · paneNormal = 工况输入 + 润滑/载荷力矩 + 简易计算 + 计算结果
   （2026-09-24 起两 pane 都不再有跨满整行的「力矩分量构成」色带条）
   两个「工况输入」列是各自独立的一套元素（paneSkf 用 cellFr…，
   paneNormal 用 cellFrN…），由 JS 同步取值；模型切换时只隐藏
   “不属于当前模型”的那一个 pane 整体，故任一时刻只有一个可见。 */
body.app-workspace.page-friction #paneSkf,
body.app-workspace.page-friction #paneNormal { grid-column: 1 / -1; }

/* 模型切换：隐藏另一 pane（保留当前模型 pane 的完整三列） */
body.app-workspace.page-friction #paneSkf.is-hidden,
body.app-workspace.page-friction #paneNormal.is-hidden { display: none; }

/* ── 页脚标准引用 ── */
body.app-workspace.page-friction .fr-ft {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 22px; border-top: 1px solid #eef2f7;
  font-size: 11px; color: #94a3b8;
}

/* ── 可编辑值的行内输入框（沿用旧样式尺寸） ── */
body.app-workspace.page-friction .fr-sp .life-input {
  width: 76px; padding: 3px 6px; border: 1.5px solid #2563eb; border-radius: 4px;
  font-size: 13px; outline: none; text-align: center; background: #fff; color: #334155;
  font-weight: 400;
}

/* ── 窄屏：三列 → 两列 → 单列 ──
   页面含侧栏（约 168px）。1366px 及以上三列各约 340px 舒适；
   1150px 以下窗口扣除侧栏后三列不足 300px，必须降两列。 */
@media (max-width: 1150px) {
  body.app-workspace.page-friction .fr-cols { grid-template-columns: 1fr 1fr; gap: 0 30px; }
  /* 两列时第三栏独占一行，给它一个上分隔以保持分组感 */
  body.app-workspace.page-friction .fr-cols > div:nth-child(3) {
    grid-column: 1 / -1; margin-top: 14px;
  }
}
@media (max-width: 900px) {
  body.app-workspace.page-friction .fr-cols { grid-template-columns: 1fr; padding: 6px 14px 16px; }
  body.app-workspace.page-friction .fr-hd,
  body.app-workspace.page-friction .fr-cond,
  body.app-workspace.page-friction .fr-ft { padding-left: 14px; padding-right: 14px; }
  body.app-workspace.page-friction .fr-band-k { padding-left: 14px; padding-right: 14px; }
  body.app-workspace.page-friction .fr-hd { flex-wrap: wrap; gap: 12px; }
  body.app-workspace.page-friction .fr-big,
  body.app-workspace.page-friction .fr-sp .k { max-width: 50%; }
}
@media (max-width: 680px) {
  body.app-workspace.page-friction .fr-band-k { flex: 1 1 calc(50% - 1px); }
  body.app-workspace.page-friction .fr-band-k + .fr-band-k { border-left: 1px dashed #cfe0f8; }
  body.app-workspace.page-friction .fr-band-k:nth-child(2n+1) { border-left: 0; }
  body.app-workspace.page-friction .fr-band-k:nth-child(n+3) { border-top: 1px dashed #cfe0f8; }
}

/* ── 手机端：杜绝横向溢出 ──
   窄屏下型号大字 + 主值 + 徽标三者并排会顶破视口，
   改为纵向堆叠；数值与表格行允许收缩换行，横带数值缩小一档。 */
@media (max-width: 560px) {
  body.app-workspace.page-friction .fr-hd {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  body.app-workspace.page-friction .fr-model { font-size: 26px; }
  body.app-workspace.page-friction .fr-meta { flex: none; width: 100%; }
  body.app-workspace.page-friction .fr-big {
    margin-left: 0; text-align: left; width: 100%;
  }
  body.app-workspace.page-friction .fr-big .n { font-size: 24px; }
  body.app-workspace.page-friction .fr-cond { gap: 8px 16px; }
  body.app-workspace.page-friction .fr-cond-it { flex-wrap: wrap; }
  body.app-workspace.page-friction .fr-cond-it[style] { margin-left: 0 !important; }
  body.app-workspace.page-friction .fr-band-k .v { font-size: 19px; }
  body.app-workspace.page-friction .fr-band-k .v .u { font-size: 11px; }
  body.app-workspace.page-friction .fr-cols { padding: 6px 12px 14px; }
  body.app-workspace.page-friction .fr-hd,
  body.app-workspace.page-friction .fr-cond,
  body.app-workspace.page-friction .fr-ft { padding-left: 12px; padding-right: 12px; }
  body.app-workspace.page-friction .fr-band-k { padding-left: 12px; padding-right: 12px; }
  /* 数据行：注脚过长时允许值列收缩，禁止撑破容器 */
  body.app-workspace.page-friction .fr-sp { min-width: 0; }
  body.app-workspace.page-friction .fr-sp .k { flex: 1 1 40%; max-width: 44%; }
  body.app-workspace.page-friction .fr-sp .dots { margin: 0 4px; }
  body.app-workspace.page-friction .fr-sp .vwrap { max-width: 56%; min-width: 0; }
  body.app-workspace.page-friction .fr-sp .v { font-size: 12.5px; }
  body.app-workspace.page-friction .fr-sp .sub { font-size: 10px; }
  body.app-workspace.page-friction .fr-ft { font-size: 10.5px; }
}

/* ── 超窄屏（≤ 400px）：进一步压缩内边距，值列可折行 ── */
@media (max-width: 400px) {
  body.app-workspace.page-friction .fr-cols { padding: 6px 10px 12px; }
  body.app-workspace.page-friction .fr-hd,
  body.app-workspace.page-friction .fr-cond,
  body.app-workspace.page-friction .fr-ft { padding-left: 10px; padding-right: 10px; }
  body.app-workspace.page-friction .fr-band-k { padding-left: 10px; padding-right: 10px; }
  body.app-workspace.page-friction .fr-cols { gap: 0; }
  body.app-workspace.page-friction .fr-sp .k { flex: 0 1 auto; max-width: none; }
  body.app-workspace.page-friction .fr-sp .dots { display: none; }
  body.app-workspace.page-friction .fr-sp {
    flex-wrap: wrap; justify-content: space-between;
  }
  body.app-workspace.page-friction .fr-sp .vwrap { max-width: 100%; align-items: flex-start; }
  body.app-workspace.page-friction .fr-sp .sub { text-align: left; }
  body.app-workspace.page-friction .fr-sp .v { white-space: normal; }
  body.app-workspace.page-friction .fr-band-k .v { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════
   参数设计：样本手册数据页布局（layout-3d 方案落地）
   ──────────────────────────────────────────────────────────────────────────
   结构：表头（型号大字 + 说明 + 徽标 + d/D/B 三围参数组）→ 条件横条
   （结构页签 + 显示系数开关）→ 关键值横带 → 设计链路 fx → 三列规格栏
   （列内多分组）→ 图纸脚注。
   仅在 .page-design 作用域内生效，小节标题统一用 .ds-h 前缀避免与
   其他页面的通用类冲突。样式与 limitspeed(.ls-*) / life(.lf-*) /
   friction(.fr-*) 同构，并沿用前三页已修正的全部要点：
     · 值盒拉伸（.vwrap > .v { align-self:stretch; width:100% }）
     · 同列行高恒定（.vwrap 固定 height:36px + 注脚单行省略）
     · .vwrap 用 flex:0 1 auto（勿 flex:none，否则长标签被省略号截断）
     · 单位内嵌 <span class="u">（勿放独立 .sub，否则换行）
     · .sp.res 结论行特例（标签允许折行，不被同行注脚挤断）
     · 字号基准 标签 14px / 值 14.5px / 单位·注脚 11px / 小节标题 13.5px
     · 横带 .ds-band-k 用 flex:1 1 0（勿固定宽，否则第 4 项被挤到第二行）
   与前三页的差异（layout-3d 特有）：
     · 结构页签 4 项且行数差异极大（3~28 行）→ 三列规格栏用「列内多分组」
       结构（.col > .grp，每组自带 .ds-h 标题），行数不齐时各列自然错落；
     · 系数行折叠（.ds-sp.coeff.is-hidden）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 数据页外壳 ── */
body.app-workspace.page-design .ds-sheet {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05); overflow: hidden;
  margin-bottom: 16px;
}

/* ── 表头：型号大字 + 说明 + 徽标 + 三围参数组（无剖面图） ── */
body.app-workspace.page-design .ds-hd {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 22px 14px; border-bottom: 2px solid #1b3f70;
  flex-wrap: wrap;
}
body.app-workspace.page-design .ds-model {
  font-size: 30px; font-weight: 800; letter-spacing: .5px; color: #1b3f70;
  line-height: 1; font-variant-numeric: tabular-nums; flex: none;
}
body.app-workspace.page-design .ds-meta { min-width: 0; padding-bottom: 2px; flex: 1 1 200px; }
body.app-workspace.page-design .ds-meta .t { font-size: 13.5px; font-weight: 700; color: #0f172a; }
body.app-workspace.page-design .ds-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
body.app-workspace.page-design .ds-chip {
  font-size: 11px; color: #1d4ed8; background: #eef2fb;
  border-radius: 4px; padding: 2px 8px; white-space: nowrap;
}

/* 表头右侧「三围参数组」（设计页特有：产出是多参数组） */
body.app-workspace.page-design .ds-dims {
  margin-left: auto; flex: none; display: flex; gap: 0;
  align-self: stretch;
  align-items: center;
}
body.app-workspace.page-design .ds-dim { text-align: center; padding: 0 14px; }
/* 数字在上、标题在下（对齐寿命校核 .lf-big 的排布） */
body.app-workspace.page-design .ds-dim .l { font-size: 10.5px; color: #94a3b8; letter-spacing: .04em; margin-top: 3px; }
body.app-workspace.page-design .ds-dim .n {
  font-size: 23px; font-weight: 800; color: #1b3f70;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
/* 可编辑的三围值（蓝，虚下划线提示可点击） */
body.app-workspace.page-design .ds-dim.ed .n { color: #2563eb; }
body.app-workspace.page-design .ds-dim.ed .l { color: #2563eb; font-weight: 600; }
body.app-workspace.page-design .ds-dim.ed .n[data-action] {
  border-bottom: 1px dashed #93b4f5; cursor: pointer;
}

/* ── 条件横条：结构页签（主控）+ 显示系数开关 ── */
body.app-workspace.page-design .ds-cond {
  display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center;
  padding: 11px 22px; border-bottom: 1px solid #eef2f7; background: #fbfcfe;
}
body.app-workspace.page-design .ds-cond-it { display: flex; align-items: center; gap: 10px; }
body.app-workspace.page-design .ds-cond-lb {
  font-size: 12.5px; font-weight: 600; color: #64748b; white-space: nowrap;
}
body.app-workspace.page-design .ds-cond .right { margin-left: auto; }

/* 显示系数开关（.sw 为布局 3d 的开关样式，非通用类） */
body.app-workspace.page-design .ds-sw {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #64748b;
  background: #fff; border: 1px solid #d0d7e3; border-radius: 14px;
  padding: 3px 12px; cursor: pointer; line-height: 1.2;
}
body.app-workspace.page-design .ds-sw:hover { border-color: #b9c5d6; color: #1d4ed8; }
body.app-workspace.page-design .ds-sw .d {
  width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; flex: none;
}
body.app-workspace.page-design .ds-sw.on .d { background: #2563eb; }
body.app-workspace.page-design .ds-sw.on {
  color: #1d4ed8; border-color: #bcd4f7; background: #f0f6ff;
}

/* ── 关键值横带 ── */
body.app-workspace.page-design .ds-band {
  display: flex; flex-wrap: wrap;
  background: #f0f6ff; border-bottom: 1px solid #c9dcf6;
}
body.app-workspace.page-design .ds-band-k {
  flex: 1 1 0; padding: 15px 22px; min-width: 0;
}
body.app-workspace.page-design .ds-band-k + .ds-band-k { border-left: 1px dashed #cfe0f8; }
body.app-workspace.page-design .ds-band-k .l { font-size: 12px; color: #64748b; }
body.app-workspace.page-design .ds-band-k .l .f { color: #8098c4; }
body.app-workspace.page-design .ds-band-k .v {
  font-size: 23px; font-weight: 800; color: #1d4ed8; margin-top: 5px;
  font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap;
}
body.app-workspace.page-design .ds-band-k .v .u {
  font-size: 12px; font-weight: 500; color: #8098c4; margin-left: 3px;
}
/* 角度上标：° 置于数字右上角 */
body.app-workspace.page-design .ds-band-k .v sup.u {
  vertical-align: super; font-size: 12px; line-height: 0; margin-left: 1px;
}
body.app-workspace.page-design .ds-band-k .v .x {
  font-size: 14px; color: #8098c4; font-weight: 600; margin: 0 5px;
}
body.app-workspace.page-design .ds-band-k .v .sep {
  font-size: 16px; color: #8098c4; font-weight: 600; margin: 0 3px;
}
body.app-workspace.page-design .ds-band-k .v .tag {
  display: inline-block; font-size: 10.5px; font-weight: 600; color: #059669;
  background: #ecfdf5; border-radius: 10px; padding: 1px 8px;
  margin-left: 8px; vertical-align: 5px;
}
body.app-workspace.page-design .ds-band-k .f { font-size: 10.5px; color: #8098c4; margin-top: 2px; }
body.app-workspace.page-design .ds-band-k.is-empty .v { color: #b6c2d4; }

/* ── 设计链路 fx 条 ──
   设计页链路比前三页长（最多 15 个操作数），若允许 wrap 会断成两行且
   末项孤立在左侧；改为单行 + 横向滚动，保持「链路」的连续阅读感。
   右缘用内阴影式渐隐提示「还有内容可横向滚动」。 */
/* 右缘渐隐：提示链路可横向滚动（仅在有溢出时有视觉意义，静态存在亦无害） */

/* ── 三列规格栏：列内多分组（设计页核心差异） ──
   默认三列；内容区不足时由下方 @media 逐级降为两列 / 单列。 */
body.app-workspace.page-design .ds-bd {
  padding: 4px 22px 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 34px;
}
body.app-workspace.page-design .ds-span-all { grid-column: 1 / -1; }
body.app-workspace.page-design .ds-col { min-width: 0; }
body.app-workspace.page-design .ds-col > .ds-grp + .ds-grp { margin-top: 14px; }

/* 小节标题 */
body.app-workspace.page-design .ds-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: #2563eb;
  padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; margin: 16px 0 2px;
}
body.app-workspace.page-design .ds-h .tip {
  font-size: 11px; font-weight: 400; color: #94a3b8; margin-left: 2px;
}
body.app-workspace.page-design .ds-h .cnt {
  font-size: 10.5px; font-weight: 600; color: #94a3b8;
  background: #eef2fb; border-radius: 9px; padding: 1px 7px;
}
/* 各列首个分组标题（含跨栏区）不带外边距，保证三列标题基线水平对齐 */
body.app-workspace.page-design .ds-col:first-child > .ds-grp:first-child > .ds-h:first-child,
body.app-workspace.page-design .ds-span-all > .ds-h:first-child,
body.app-workspace.page-design .ds-span-all + .ds-col > .ds-grp:first-child > .ds-h:first-child {
  margin-top: 12px;
}

/* ── 两级数据行：上行「参数 ····· 值」，下行注脚 ── */
body.app-workspace.page-design .ds-sp {
  display: flex; align-items: baseline; padding: 6px 0 5px; min-width: 0;
}
body.app-workspace.page-design .ds-sp > .k {
  color: #64748b; font-size: 14px; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-workspace.page-design .ds-sp .k sub,
body.app-workspace.page-design .ds-sp .k sup { font-size: 10px; }
body.app-workspace.page-design .ds-sp .dots {
  flex: 0 0 18px; width: 18px; border-bottom: 1px dotted #a8b6c9;
  margin: 0 6px; transform: translateY(-3px); min-width: 10px;
}
body.app-workspace.page-design .ds-sp .vwrap {
  flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end;
  max-width: 55%; min-width: 0;
  /* 固定两行高度（值 1 行 + 注脚 1 行）：注脚为空或有内容都不改变行高，
     同一列各数据行因此始终水平对齐；注脚过长时单行省略不换行。
     游隙行含组别下拉，另加 .ds-sp.flush 增高（见下）。 */
  height: 36px; justify-content: flex-start;
}
body.app-workspace.page-design .ds-sp .vwrap > .v {
  flex: none;
  /* 值盒拉伸到 .vwrap 全宽（.vwrap 宽度由较宽的注脚决定），
     配 text-align:right 后值的右缘与注脚右缘严格对齐；
     否则值盒按自身内容收窄，右缘会落在注脚右缘左侧。 */
  align-self: stretch; width: 100%;
}
body.app-workspace.page-design .ds-sp .vwrap > .sub {
  flex: none; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-workspace.page-design .ds-sp .v {
  font-weight: 700; color: #0f172a; font-size: 14.5px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.35;
}
/* 值单元格的单位：由 data-unit 属性 + ::after 呈现。
   好处：refreshRelatedParams 用 textContent 覆盖数值时单位不丢失，
   且无需在「innerHTML 拼单位」和「textContent 纯数值」两套写法间切换。 */
body.app-workspace.page-design .ds-sp .v[data-unit]::after {
  content: attr(data-unit);
  font-size: 11px; color: #94a3b8; font-weight: 400; margin-left: 2px;
}
/* 兼容旧写法（refreshRelatedParams 中残留的 <span class="inline-unit">） */
body.app-workspace.page-design .ds-sp .v .inline-unit,
body.app-workspace.page-design .ds-band-k .v .inline-unit,
body.app-workspace.page-design .ds-dim .n .inline-unit {
  font-size: 11px; color: #94a3b8; font-weight: 400; margin-left: 2px;
}
body.app-workspace.page-design .ds-band-k .v .inline-unit { font-size: 12px; color: #8098c4; margin-left: 3px; }
body.app-workspace.page-design .ds-dim .n .u { font-size: 11px; color: #94a3b8; font-weight: 500; margin-left: 1px; }
/* 表头三围同样走 data-unit + ::after（与 .ds-sp .v 统一，
   textContent 覆盖数值时单位不丢，cellVal 读到的也是纯数值） */
body.app-workspace.page-design .ds-dim .n[data-unit]::after {
  content: attr(data-unit);
  font-size: 11px; color: #94a3b8; font-weight: 400; margin-left: 2px;
}
body.app-workspace.page-design .ds-sp .v .rng {
  font-size: 12px; color: #b6c2d4; font-weight: 400; margin: 0 2px;
}
body.app-workspace.page-design .ds-sp .v.ed-v { color: #2563eb; }
/* 范围值行（Gr/Ga/G4a）：可编辑子单元格嵌在 .v 内层 */
body.app-workspace.page-design .ds-sp .v .ed-v {
  color: #2563eb; border-bottom: 1px dashed #93b4f5; cursor: pointer;
}
body.app-workspace.page-design .ds-sp .v.ed-v[data-action] {
  border-bottom: 1px dashed #93b4f5; cursor: pointer;
}
body.app-workspace.page-design .ds-sp .sub {
  font-size: 11px; color: #94a3b8; margin-top: 1px;
  text-align: right; line-height: 1.4;
}
/* 结论行：值加大加粗；标签允许折行（同行注脚过长时不截断标签） */
body.app-workspace.page-design .ds-sp.res .v { color: #1d4ed8; font-size: 15.5px; font-weight: 800; }
body.app-workspace.page-design .ds-sp.res .k {
  color: #0f172a; font-weight: 600;
  flex: 0 1 auto; white-space: normal; overflow: visible;
}
/* 折叠的系数行 */
body.app-workspace.page-design .ds-sp.coeff .k { color: #94a3b8; }
/* 系数行可编辑值不再置灰：统一沿用 .v.ed-v 的蓝色（与寿命校核模块一致） */
body.app-workspace.page-design .ds-sp.coeff.is-hidden { display: none; }

/* 游隙行（设计页特有：范围值 + 组别下拉） */
body.app-workspace.page-design .ds-sp.flush {
  margin: 0; padding: 0; border-radius: 0;
}
/* Gr 标题不特殊着色（2026-09-15 用户要求），沿用默认标签色 */
body.app-workspace.page-design .ds-sp.flush .vwrap { max-width: 52%; height: auto; min-height: 36px; }
/* 组别下拉：另起一行放在值下方，不挤占数值宽度 */
body.app-workspace.page-design .ds-sp .sel-row {
  display: flex; justify-content: flex-end; margin-top: 4px; width: 100%;
}
body.app-workspace.page-design .grp-sel {
  font-size: 10.5px; color: #64748b; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 6px; padding: 1.5px 6px;
  cursor: pointer; white-space: nowrap;
}
/* 备注列可输入的材料框（input+datalist）：宽度按 size 固定，不随内容撑宽；
   过长省略；聚焦时描边品牌蓝。 */
body.app-workspace.page-design .grp-inp {
  font-size: 10.5px; color: #64748b; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 6px; padding: 1.5px 6px;
  text-overflow: ellipsis; outline: none;
  font-family: inherit; line-height: 1.4;
}
body.app-workspace.page-design .grp-inp:focus {
  border-color: #2563eb; color: #334155; background: #f8fbff;
}

/* ── 可编辑值的行内输入框（沿用旧样式尺寸） ── */
body.app-workspace.page-design .ds-sp .life-input,
body.app-workspace.page-design .ds-dim .life-input {
  width: 76px; padding: 3px 6px; border: 1.5px solid #2563eb; border-radius: 4px;
  font-size: 13px; outline: none; text-align: center; background: #fff; color: #334155;
  font-weight: 400;
}

/* ── 图纸脚注 ── */
body.app-workspace.page-design .ds-ft {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 22px; border-top: 1px solid #eef2f7;
  font-size: 11px; color: #94a3b8;
}
body.app-workspace.page-design .ds-ft .lg { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
body.app-workspace.page-design .ds-ft .lg .tt { margin-right: 2px; font-weight: 600; }
body.app-workspace.page-design .ds-ft .hint {
  color: #2563eb; background: #f0f6ff; border-radius: 4px;
  padding: 2px 8px; font-size: 10.5px;
}

/* ── 窄屏：三列 → 两列 → 单列 ── */
@media (max-width: 1150px) {
  body.app-workspace.page-design .ds-bd { grid-template-columns: 1fr 1fr; gap: 0 30px; }
  /* 两列时第三栏独占一行，给它一个上分隔以保持分组感 */
  body.app-workspace.page-design .ds-bd > .ds-col:nth-child(3) {
    grid-column: 1 / -1; margin-top: 14px;
  }
}
@media (max-width: 900px) {
  body.app-workspace.page-design .ds-bd { grid-template-columns: 1fr; padding: 4px 14px 16px; }
  body.app-workspace.page-design .ds-hd,
  body.app-workspace.page-design .ds-cond,
  body.app-workspace.page-design .ds-ft { padding-left: 14px; padding-right: 14px; }
  body.app-workspace.page-design .ds-band-k { padding-left: 14px; padding-right: 14px; }
  body.app-workspace.page-design .ds-hd { flex-wrap: wrap; gap: 12px; }
  body.app-workspace.page-design .ds-sp .k { max-width: 50%; }
  /* 窄屏下链路改为换行，避免大半内容藏在滚动区里难以发现 */
}
@media (max-width: 680px) {
  body.app-workspace.page-design .ds-band-k { flex: 1 1 calc(50% - 1px); }
  body.app-workspace.page-design .ds-band-k + .ds-band-k { border-left: 1px dashed #cfe0f8; }
  body.app-workspace.page-design .ds-band-k:nth-child(2n+1) { border-left: 0; }
  body.app-workspace.page-design .ds-band-k:nth-child(n+3) { border-top: 1px dashed #cfe0f8; }
  /* 窄屏下表头三围参数组整行置底，避免挤在型号右侧 */
  body.app-workspace.page-design .ds-dims {
    width: 100%; margin-left: 0; justify-content: space-between;
    border-left: none; border-top: 1px solid #eef2f7; padding: 10px 0 0;
    flex-wrap: wrap; gap: 6px 0;
  }
  body.app-workspace.page-design .ds-dim { text-align: left; padding: 0; }
}

/* ── 手机端：杜绝横向溢出 ── */
@media (max-width: 560px) {
  body.app-workspace.page-design .ds-hd {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  body.app-workspace.page-design .ds-model { font-size: 26px; }
  body.app-workspace.page-design .ds-meta { flex: none; width: 100%; }
  body.app-workspace.page-design .ds-dim .n { font-size: 20px; }
  body.app-workspace.page-design .ds-cond { gap: 8px 16px; }
  body.app-workspace.page-design .ds-cond-it { flex-wrap: wrap; }
  body.app-workspace.page-design .ds-cond .right { margin-left: 0; }
  body.app-workspace.page-design .ds-band-k .v { font-size: 19px; }
  body.app-workspace.page-design .ds-band-k .v .u { font-size: 11px; }
  body.app-workspace.page-design .ds-bd { padding: 4px 12px 14px; }
  body.app-workspace.page-design .ds-hd,
  body.app-workspace.page-design .ds-cond,
  body.app-workspace.page-design .ds-ft { padding-left: 12px; padding-right: 12px; }
  body.app-workspace.page-design .ds-band-k { padding-left: 12px; padding-right: 12px; }
  body.app-workspace.page-design .ds-sp { min-width: 0; }
  body.app-workspace.page-design .ds-sp .k { flex: 1 1 40%; max-width: 44%; }
  body.app-workspace.page-design .ds-sp .dots { margin: 0 4px; }
  body.app-workspace.page-design .ds-sp .vwrap { max-width: 56%; min-width: 0; }
  body.app-workspace.page-design .ds-sp .v { font-size: 12.5px; }
  body.app-workspace.page-design .ds-sp .sub { font-size: 10px; }
  body.app-workspace.page-design .ds-sp.res .v { font-size: 13.5px; }
  body.app-workspace.page-design .ds-ft { font-size: 10.5px; }
  body.app-workspace.page-design .ds-ft .lg { gap: 10px; }
}

/* ── 超窄屏（≤ 400px）：进一步压缩内边距，值列可折行 ── */
@media (max-width: 400px) {
  body.app-workspace.page-design .ds-bd { padding: 4px 10px 12px; gap: 0; }
  body.app-workspace.page-design .ds-hd,
  body.app-workspace.page-design .ds-cond,
  body.app-workspace.page-design .ds-ft { padding-left: 10px; padding-right: 10px; }
  body.app-workspace.page-design .ds-band-k { padding-left: 10px; padding-right: 10px; }
  body.app-workspace.page-design .ds-sp .k { flex: 0 1 auto; max-width: none; }
  body.app-workspace.page-design .ds-sp .dots { display: none; }
  body.app-workspace.page-design .ds-sp {
    flex-wrap: wrap; justify-content: space-between;
  }
  body.app-workspace.page-design .ds-sp .vwrap { max-width: 100%; align-items: flex-start; }
  body.app-workspace.page-design .ds-sp .sub { text-align: left; }
  body.app-workspace.page-design .ds-sp .v { white-space: normal; }
  body.app-workspace.page-design .ds-band-k .v { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════
   公差配合「公差带键盘」：窄屏横向滑动
   19 列键位在手机宽度下必然超宽。原 .keyboard-content 基础样式是 overflow:hidden，
   窄屏又叠了 max-width:95vw，右侧键位被直接裁掉且无法滑动（实测 390px：容器 314px、
   表体 620px → 306px 内容不可达）。改为滚动容器 + 表体保底最小宽：
   - 容器 overflow-x:auto：宽屏表体不溢出 → 不出现滚动条；窄屏可左右滑动看全键位。
   - 表体 min-width：防止列被压到键位文字互相重叠（500px 下曾出现「JS6K6」粘连）。
   - 提示条仅在真正发生滑动的宽度区间（≤680px）显示。
   ══════════════════════════════════════════════════════════════════════════ */
body.app-workspace.page-tolerance .keyboard-content {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
body.app-workspace.page-tolerance .tl-kb-hint { display: none; }
/* 滑到右侧时行首代号（h5/h6… 或孔代号）常驻，否则只剩键位没有行语境。
   首列底色本就是不透明实底（th/td:first-child/.tol-th-blue），可放心盖住滑过的单元格。 */
body.app-workspace.page-tolerance .keyboard-content .keyboard-table th:first-child,
body.app-workspace.page-tolerance .keyboard-content .keyboard-table td:first-child,
body.app-workspace.page-tolerance .keyboard-popup-content .keyboard-table th:first-child,
body.app-workspace.page-tolerance .keyboard-popup-content .keyboard-table td:first-child {
  position: sticky; left: 0; z-index: 3;
}

@media (max-width: 1150px) {
  /* 821~1150px 有左侧导航，内容区仅约 480~810px，仍会窄于表体 */
  body.app-workspace.page-tolerance .tl-kb-body .keyboard-table { min-width: 560px; }
}
@media (max-width: 680px) {
  body.app-workspace.page-tolerance .tl-kb-hint {
    display: block; margin: 0 0 8px; font-size: 11px; color: #a3aec0;
    text-align: center; letter-spacing: .2px;
  }
}
@media (max-width: 480px) {
  body.app-workspace.page-tolerance .tl-kb-body .keyboard-table { min-width: 620px; }
  /* .on 态规则特异度更高（0,4,1），须同链写法才能在窄屏收紧内边距，给键盘多留可视宽度 */
  body.app-workspace.page-tolerance .tl-kbzone.on .tl-kb-body {
    padding-left: 12px; padding-right: 12px;
  }
  /* 弹层内边距收紧（表体横向滑动由 .keyboard-popup-content 自身负责，本就可滑） */
  body.app-workspace .keyboard-popup-content { padding: 10px; }
}

/* ── 公差配合「基本尺寸」输入框：随内容收缩，让数值紧贴单位 mm ──
   固定宽度（108px / 窄屏 92px）下，3 位数值右侧会空出约 33px，
   与后跟的「mm」之间形成一段突兀的空白。改用 field-sizing: content
   让输入框按内容自适应（下划线也随之贴合数值），任意位数都不会留空档；
   不支持的浏览器仍走上面的固定 width 回退。 */
@supports (field-sizing: content) {
  body.app-workspace.page-tolerance .tl-num input {
    width: auto;
    field-sizing: content;
    min-width: 46px;
    max-width: 220px;
  }
}


/* ════════════════════════════ 帮助页（help.html） ════════════════════════════ */
/* 页面底改浅灰，让正文每节的白卡片浮出来；hero 横幅单独一块 */
/* 放宽内容区（超宽屏上限约 1540px，不再卡 1280 留大片空白）；
   关键：覆盖全局 .card 的 overflow-x:hidden（它会使 overflow-y 隐式 auto，
   让 .card 变成滚动容器，内部 sticky 目录只能黏在卡片内、随页面一起滚）。
   帮助页内容均受控（公式块自带 overflow-x:auto），用 visible 不影响横向。 */
body.app-workspace.help-page { --wk-pad-x: max(20px, calc((100% - 1540px) / 2 + 24px)); }
body.app-workspace.help-page .card { background: var(--wk-bg); overflow: visible; }

/* 顶部页面头：与其他模块 .app-panel 一致的白卡观感（蓝条 + 小 chip），不再用渐变 */
.help-hero { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #2563eb; border-radius: 14px; padding: 18px 24px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.help-hero .h-txt { flex: 1; min-width: 0; }
.help-hero h1 { font-size: 22px; font-weight: 700; color: #1b3f70; margin: 0 0 5px; }
.help-hero .subtitle { font-size: 13.5px; color: #64748b; line-height: 1.6; }
.help-hero .h-chip { flex: none; font-size: 12px; font-weight: 600; color: #2563eb; background: #f0f6ff; border: 1px solid #dbeafe; border-radius: 20px; padding: 5px 14px; white-space: nowrap; }

.help-wrap { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 34px; align-items: start; }

/* 左侧目录：白色浮卡 + 置顶（与 .app-panel 同边框/阴影） */
.help-toc { position: sticky; top: 74px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px 10px; max-height: calc(100vh - 96px); overflow-y: auto; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.help-toc .toc-grp { font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: .6px; margin: 14px 0 6px 12px; text-transform: uppercase; }
.help-toc .toc-grp:first-child { margin-top: 2px; }
.help-toc a { display: block; padding: 7px 12px; color: #475569; text-decoration: none; border-radius: 7px; font-size: 13px; line-height: 1.35; border-left: 3px solid transparent; transition: background .12s, color .12s; }
.help-toc a:hover { background: #f0f6ff; color: #1b3f70; }
.help-toc a.on { background: #eaf1fe; color: #2563eb; font-weight: 600; border-left-color: #2563eb; }
.help-toc .toc-top { margin: 12px 2px 2px; text-align: center; font-size: 12.5px; color: #94a3b8; border: 1px solid #e2e8f0 !important; border-radius: 8px; }
.help-toc .toc-top:hover { background: #f0f6ff; color: #2563eb; }
.help-main { min-width: 0; }

/* 正文每节一张白卡（同 .app-panel 边框/阴影规范） */
.help-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 22px 26px 16px; margin-bottom: 18px; scroll-margin-top: 74px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); transition: border-color .15s, box-shadow .15s; }
.help-sec:hover { border-color: #cdd9ea; box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.help-sec > h2 { font-size: 20px; font-weight: 700; color: #1b3f70; border-left: 4px solid #2563eb; padding-left: 12px; margin: 0 0 6px; }
.help-sec .lead { color: #64748b; font-size: 14px; line-height: 1.75; margin: 4px 0 16px; }
.help-sec h3 { font-size: 15px; font-weight: 700; color: #1b3f70; margin: 20px 0 8px; padding-top: 16px; border-top: 1px dashed #e2e8f0; }
.help-steps { list-style: none; margin: 0 0 16px; padding: 0; }
.help-steps li { position: relative; padding: 10px 14px 10px 42px; background: #f8fafc; border: 1px solid #e8eef6; border-radius: 9px; margin-bottom: 8px; font-size: 13.5px; line-height: 1.75; color: #334155; }
.help-steps li .n { position: absolute; left: 12px; top: 11px; width: 21px; height: 21px; line-height: 21px; text-align: center; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; }
.help-steps li b { color: #1b3f70; }
.help-formula { background: #f8fafc; color: #0f172a; border: 1px solid #e2e8f0; border-left: 3px solid #2563eb; border-radius: 8px; padding: 13px 15px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.75; overflow-x: auto; margin: 8px 0; white-space: pre-wrap; word-break: break-word; }
.help-formula .cm { color: #64748b; }
.help-vars { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 13px; }
.help-vars th, .help-vars td { border: 1px solid #e2e8f0; padding: 7px 11px; text-align: left; vertical-align: top; }
.help-vars th { background: #f1f5f9; color: #1b3f70; font-weight: 600; }
.help-vars td { color: #334155; }
.help-vars td code, .help-sec code { background: #eef2f7; border-radius: 4px; padding: 1px 5px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: #b45309; }
.help-note { background: #fffbeb; border: 1px solid #fde68a; color: #92660a; border-radius: 8px; padding: 9px 13px; font-size: 12.5px; line-height: 1.6; margin: 8px 0 14px; }
.help-note b { color: #854d0e; }
.help-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.help-kpi { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: #475569; }
.help-kpi b { color: #1b3f70; display: block; font-size: 14px; margin-bottom: 2px; }
@media (max-width: 820px) {
  .help-hero { padding: 15px 16px; flex-wrap: wrap; gap: 10px; }
  .help-hero h1 { font-size: 20px; }
  .help-hero .h-chip { order: -1; }
  .help-wrap { grid-template-columns: 1fr; gap: 16px; }
  .help-toc { position: static; top: auto; display: flex; flex-wrap: wrap; gap: 6px; max-height: none; }
  .help-toc .toc-grp { width: 100%; margin: 8px 0 2px; }
  .help-toc a { border-left: none; border: 1px solid #e2e8f0; }
  .help-toc a.on { border-color: #2563eb; }
  .help-toc .toc-top { width: 100%; }
  .help-sec { padding: 16px 16px 12px; scroll-margin-top: 64px; }
}