/* 顶部留白必须大于 fixed 导航的 64px，否则标题会被压在导航底下。
   右栏是 sticky（相对视口定位），不受这里影响，仍吸在 88px。 */
.sel-wrap { max-width: 1340px; margin: 0 auto; padding: 88px 24px 96px; }

/* ── 双栏：左边问，右边答，同屏可见 ──
   问卷在上、结果在下的话，客户改一个选项要滚下去才看得到变化，实时重算就白做了。
   右栏 sticky 贴在导航下方（nav 是 fixed 64px），自己滚动。 */
/* 右栏随视口收缩、封顶 500px。写死宽度的话，双栏刚生效的 1080 附近
   左栏会比右栏还窄，问卷反而被挤。 */
.sel-cols { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 38%, 500px); gap: 32px; align-items: start; }
/* 标题在左栏内，所以双栏从页面顶部就开始 —— 侧栏首屏即完整可见，
   连提交按钮一起，不用先滚一段。 */
.sel-side { position: sticky; top: 88px; max-height: calc(100vh - 108px); display: flex; flex-direction: column; }
.sel-form > .sel-title { margin-top: 0; }
/* 第一个问题不需要顶部分隔线，标题下面已经有留白了 */
.sel-form > .sel-step:first-of-type { border-top: none; padding-top: 0; }
.sel-side .sel-result { display: flex; flex-direction: column; min-height: 0; margin-top: 0; padding-top: 20px; }
.sel-side .sel-list { overflow-y: auto; overscroll-behavior: contain; margin: 16px -4px; padding: 0 4px; flex: 1 1 auto; }
/* 结果区标题不需要和页面主标题一样大——侧栏和抽屉里高度都紧，
   这块空间留给材料卡片更值 */
.sel-side .sel-result > h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }
/* 侧栏里空间紧，判定明细与向量条的左缩进收掉一半 */
.sel-side .sel-blurb, .sel-side .sel-checks, .sel-side .sel-bars { margin-left: 14px; }
/* 侧栏窄，但区间数值（如 6.9–9.2）不能换行——换行后一个数字占两行，读起来像两个值 */
.sel-side .sel-bar-row b { flex: 0 0 52px; }
.sel-side .sel-bar-row u { flex: 0 0 56px; white-space: nowrap; }
.sel-side .sel-bar { min-width: 40px; }
.sel-side .sel-card label { font-size: 14.5px; }
.sel-side .sel-disclaimer { margin-top: 12px; }

/* ── v3 三组结果的滚动链 ──
   v2 是唯一一个 .sel-list 直接做 .sel-result 的 flex 子项、flex:1 + overflow 内滚，
   「侧栏首屏即完整可见，连提交按钮一起」靠的就是这条链。v3 分了三组，中间多出
   .sel-group 一层，链会断在它身上：滚动职责整体上移到包三组的 .sel-groups，
   组内列表退回普通排版。桌面 sticky 栏与窄屏抽屉共用这条链。 */
.sel-side .sel-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; margin: 16px -4px; padding: 0 4px;
  -webkit-overflow-scrolling: touch; }
.sel-groups .sel-group + .sel-group { margin-top: 24px; }
/* 特异性高于基础区与 media 区的 .sel-side .sel-list，两处一起盖掉 */
.sel-side .sel-group .sel-list { overflow: visible; flex: none; margin: 10px 0 0; }

/* 窄屏：右栏放不下，退回单栏。结果收进底部抽屉，点一下才展开——
   否则客户每改一项都要滚过整份问卷才能看到结果。
   这两条基础样式必须写在 media 之前，否则会把 media 里的 display 覆盖掉。 */
.sel-bar-toggle { display: none; }
.sel-close { display: none; position: absolute; top: 10px; right: 14px; background: none; border: none;
  font: inherit; font-size: 24px; line-height: 1; color: var(--ink-2); cursor: pointer; padding: 4px 10px; }
@media (max-width: 1079px) {
  .sel-cols { grid-template-columns: 1fr; gap: 0; }
  .sel-side { position: static; max-height: none; display: block; }
  .sel-side .sel-result {
    position: fixed; left: 0; right: 0; bottom: 0; top: 100%;
    background: #fff; z-index: 60; margin: 0; padding: 16px 20px 24px;
    border-top: 2px solid var(--accent); box-shadow: 0 -8px 32px rgba(0,0,0,.12);
    transition: top .22s ease; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .sel-side .sel-result.is-open { top: 64px; }
  .sel-side .sel-result > h2 { font-size: 19px; margin-bottom: 4px; padding-right: 40px; }
  .sel-side .sel-basis { font-size: 13px; margin: 4px 0 0; }
  .sel-side .sel-list { overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
  .sel-close { display: block; }
  /* 底部常驻条：始终显示当前有几种满足，点开才看明细 */
  .sel-bar-toggle {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 59;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 20px; background: var(--accent); color: #fff;
    font-size: 14px; border: none; width: 100%; cursor: pointer; text-align: left;
  }
  .sel-bar-toggle b { font-weight: 600; }
  .sel-bar-toggle span { font-family: var(--mono); font-size: 12px; opacity: .9; }
  .sel-wrap { padding-bottom: 88px; }
}
/* 标题区压到 ~80px。它每高 1px，右侧结果区就少露 1px——
   而结果才是客户来这一页要看的东西。 */
.sel-title { font-size: 32px; letter-spacing: -0.02em; margin: 0 0 6px; }
.sel-lead { font-size: 13.5px; color: var(--ink-2); max-width: 68ch; margin: 0 0 24px; line-height: 1.6; }
.sel-step { border-top: 1px solid #e3ebe6; padding: 22px 0; }
.sel-step h2 { font-size: 18px; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.sel-step h2 em { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-style: normal; letter-spacing: .1em; }
.sel-num { font-family: var(--mono); font-size: 12px; color: var(--accent); border: 1px solid var(--accent); width: 22px; height: 22px; display: grid; place-items: center; }
.sel-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.sel-opt { font: inherit; font-size: 14px; padding: 10px 16px; min-height: 40px; border: 1px solid #d9e2dc; background: #fff; cursor: pointer; text-align: left; }
.sel-opt:hover { border-color: var(--accent); }
.sel-opt.is-on { border-color: var(--accent); background: var(--accent); color: #fff; }
/* 键盘用户要看得出焦点落在哪——整页靠 Tab 走一遍是常见的无障碍检查项 */
.sel-opt:focus-visible, .sel-cta:focus-visible, .sel-close:focus-visible, .sel-bar-toggle:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.sel-card input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--accent); cursor: pointer; }
.sel-card input[type="checkbox"]:disabled { cursor: not-allowed; }
.sel-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
@media (hover: none) and (pointer: coarse) {
  .sel-check,
  .sel-card-top label { min-height: 24px; }
}
.sel-process { margin-top: 26px; padding-top: 18px; border-top: 1px dashed #dfe8e3; }
.sel-process h3 { font-size: 14px; margin: 0; display: flex; gap: 10px; align-items: center; }
.sel-process h3 em { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-style: normal; }
.sel-result { border-top: 2px solid var(--accent); padding-top: 32px; margin-top: 8px; }
.sel-basis { color: var(--ink-2); font-size: 14px; }
.sel-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.sel-card { border: 1px solid #d9e2dc; padding: 16px 18px; }
/* 五态各有一条色边。灰是「没数据」——刻意不用红：厂商没测过不等于材料不合格，
   颜色上就得和「不适用」分开，否则视觉先替客户下了结论。 */
.sel-card.is-ok   { border-left: 3px solid var(--accent); }
.sel-card.is-part { border-left: 3px solid #4b8fb5; }
.sel-card.is-mod  { border-left: 3px solid #d8a33c; }
.sel-card.is-unk  { border-left: 3px solid #b9c4bd; }
.sel-card.is-no   { border-left: 3px solid #c9d5ce; opacity: .6; background: #fafbfa; }
/* 判定为不适用的材料，其 checkbox 在渲染时已被禁用；这里让指针形状跟上，
   否则 .sel-card label 的 cursor:pointer 会一直暗示「这行可以点」。 */
.sel-card.is-no label { cursor: not-allowed; }
.sel-card label { display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.sel-card-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sel-card-top label { flex: 1 1 auto; min-width: 0; }
.sel-state { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.is-ok   .sel-state { color: var(--accent); }
.is-mod  .sel-state { color: #a9781f; }
.is-no   .sel-state { color: #b4483c; }
.sel-blurb { margin: 6px 0 4px 28px; color: var(--ink-2); font-size: 13px; }

/* 判定明细：一条硬性要求一行，带实测值与出处 */
.sel-checks { list-style: none; padding: 0; margin: 10px 0 0 28px; display: grid; gap: 4px; }
.sel-chk { font-size: 12.5px; color: var(--ink-2); display: flex; gap: 7px; align-items: baseline; line-height: 1.5; }
.sel-chk-i { font-family: var(--mono); font-size: 11px; width: 12px; flex: 0 0 12px; }
/* 判定文本必须自成一个 flex 项。否则它是匿名内容，长认证列表会把「阻燃」
   这样的标签挤成竖排单字。 */
.sel-chk-t { flex: 1 1 auto; min-width: 0; }
.sel-chk.is-ok   .sel-chk-i { color: var(--accent); }
.sel-chk.is-part .sel-chk-i { color: #4b8fb5; }
.sel-chk.is-mod  .sel-chk-i { color: #a9781f; }
.sel-chk.is-unk  .sel-chk-i { color: #97a49c; }
.sel-chk.is-no   .sel-chk-i { color: #b4483c; }
/* 客户没问、但我们手上有实测的那几项。灰一点，别跟他自己填的条件抢注意力 */
.sel-chk.is-info { color: var(--ink-3); }
.sel-chk.is-info .sel-chk-i { color: #97a49c; }
/* 卡在读数分辨率边界上放行的那一条。琥珀色、给 ≈ 不给 ✓——判定过了，
   但客户扫过去时要看见的是「差 1℃」，不是一个对勾。 */
.sel-chk.is-near .sel-chk-i { color: #a9781f; font-weight: 600; }
.sel-chk em { font-style: normal; color: var(--ink-3); }
.sel-src { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

/* 偏好维度条。宽度=该材料不同牌号覆盖的区间，看得见跨度而不是一个点。 */
.sel-bars { margin: 10px 0 0 28px; display: grid; gap: 3px; }
.sel-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.sel-bar-row b { font-weight: 400; flex: 0 0 92px; }
.sel-bar-row u { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); text-decoration: none; flex: 0 0 46px; }
.sel-bar { position: relative; flex: 1 1 auto; height: 5px; background: #eef2f0; min-width: 60px; border-radius: 3px; }
.sel-bar i { position: absolute; top: 0; height: 100%; background: var(--accent); border-radius: 3px; }
/* 单一数值（材料只有一个牌号，或该项各牌号一致）画成圆点。
   照区间的画法算宽度会得到一根 5px 的细线，看着像渲染残留而不是数据。 */
.sel-bar i.is-point { width: 9px; height: 9px; top: -2px; margin-left: -4.5px; border-radius: 50%; }
.sel-bar-unk { background: none; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); height: auto; }

/* ── 等级档位：一个控件同时讲两种语言 ──
   左边是后果（不懂标准的人看得懂），右边是标准号（懂的人一眼认出），
   下面一行是典型场景，把两者连起来。外行为了「电池包」选了某一档，
   顺带就看见了 UL94 V-0——用几次自然就记住了，不必另做一个专家模式。 */
.sel-tier { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--accent); }
.sel-tiers { display: grid; gap: 8px; margin-top: 8px; }
.sel-tier-opt {
  font: inherit; text-align: left; cursor: pointer; background: #fff;
  border: 1px solid #d9e2dc; padding: 9px 13px;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
}
.sel-tier-opt:hover { border-color: var(--accent); }
.sel-tier-opt.is-on { border-color: var(--accent); background: #f2f8f4; }
.sel-tier-opt b { font-size: 14px; font-weight: 500; }
.sel-tier-opt code { font-family: var(--mono); font-size: 11.5px; color: var(--accent); white-space: nowrap; }
.sel-tier-opt em { grid-column: 1 / -1; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.sel-tier-opt.is-on code { font-weight: 600; }
.sel-tier-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 结果里的等级徽章，和问卷用同一套字体，客户能把两边对上 */
.sel-lv { font-family: var(--mono); font-size: 10.5px; border: 1px solid currentColor; padding: 0 4px; margin-left: 4px; white-space: nowrap; }

/* 温度口径追问：只在选了带门槛的温度档时出现 */
.sel-sub-label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.sel-opts-sm .sel-opt { font-size: 13px; padding: 7px 13px; }
.sel-note { font-size: 12.5px; color: var(--ink-3); max-width: 76ch; margin: 12px 0 0; line-height: 1.6; }
.sel-note-inline, .sel-warn { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.6; }
.sel-note-inline { color: var(--ink-3); }
/* 撞到能力上限是客户最该看清的一句话，做成提示块而不是又一段小字 */
.sel-warn { color: #8a6115; background: #fdf6e6; border-left: 3px solid #d8a33c; padding: 9px 12px; }
.sel-opt-skip { border-style: dashed; }
.sel-cta { font: inherit; font-size: 15px; padding: 14px 28px; background: var(--accent); color: #fff; border: none; cursor: pointer; }
.sel-cta:disabled { background: #c9d5ce; cursor: not-allowed; }
.sel-disclaimer { margin-top: 18px; font-size: 12px; color: var(--ink-3); max-width: 70ch; }
@media (max-width: 640px) {
  /* 顶部仍要避开 fixed 导航的 64px；底部要给常驻结果条让位 */
  .sel-wrap { padding: 84px 16px 88px; }
  .sel-title { font-size: 26px; }
  .sel-opt { width: 100%; }
}
.sel-sub-gap { margin-top: 12px; }
/* 介质是多选，八项排两列比排一列紧凑 */
.sel-tiers-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .sel-tiers-2 { grid-template-columns: 1fr; } }
.sel-tier-opt code:empty { display: none; }

/* ── 滑块 + 预设按钮 ──
   点预设，滑块跳过去；要精确值就直接拖。两种人用同一个控件：不清楚该填多少的
   点按钮，心里有具体数字的拖到位。点按钮时滑块跟着动，等于顺带告诉客户
   「偏热」在我们这里就是指 100℃。 */
.sel-range { margin-top: 12px; }
.sel-range-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.sel-range-row input[type="range"] {
  flex: 1 1 auto; min-width: 0; height: 4px; -webkit-appearance: none; appearance: none;
  background: #e3ebe6; border-radius: 2px; cursor: pointer; margin: 0;
}
.sel-range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); cursor: grab;
}
.sel-range-row input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); cursor: grab;
}
.sel-range-row input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* 132px 是四条读数里最长那句（0.042 W/(m·K)）刚好放得下的宽度，所以写成下限
   而不是死宽：建议值那一截（「（建议值）」/「 (suggested)」）挂上去就超了，
   死宽 + nowrap 会让它直接溢出到旁边。不写 grow，没有后缀时逐像素照旧。 */
.sel-range-out {
  font-family: var(--mono); font-size: 13px; color: var(--ink-1);
  flex: 0 0 auto; min-width: 132px; text-align: right; white-space: nowrap;
}
.sel-range-scale {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
}
/* 拖到我们做不了的区间时提醒一句，而不是让客户对着一片红叉猜 */
.sel-range-out.is-over { color: #a9781f; }

/* ── 双滑块区间 ──
   工作温度本来就是一个区间，客户的原话是「-40 到 80℃」。拆成「高温滑块 +
   低温勾选框」是把一件事切成两半，而且勾选框只能表达一个固定值。
   原生 range 没有区间控件，这里用两个叠起来：轨道只响应 thumb 的点击，
   中间那段填充表示选中区间。 */
.sel-dual { position: relative; height: 26px; margin-top: 10px; }
.sel-dual-track, .sel-dual-fill { position: absolute; top: 11px; height: 4px; border-radius: 2px; }
.sel-dual-track { left: 0; right: 0; background: #e3ebe6; }
.sel-dual-fill { background: var(--accent); }
.sel-dual input[type="range"] {
  position: absolute; left: 0; width: 100%; top: 0; height: 26px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none;
  pointer-events: none;            /* 轨道不接收点击，否则两个滑块会互相挡 */
}
.sel-dual input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); cursor: grab;
}
.sel-dual input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); cursor: grab;
}
.sel-dual input[type="range"]::-moz-range-track { background: none; }
.sel-dual input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.sel-dual-out { font-family: var(--mono); font-size: 13.5px; color: var(--ink-1); margin-top: 6px; }
.sel-dual-out.is-over { color: #a9781f; }
/* 工作温度有一个默认的常温区间，勾了工况的那几维也会有一个建议值，而它们都是
   真在筛材料的要求。读数标成强调色，是让「这一条已经生效」一眼看得见——客户
   一动滑块就变回普通读数。两种读数共用这一条规则：同一件事该长得一样。 */
.sel-dual-out.is-default,
.sel-range-out.is-default { color: var(--accent); }
/* 被支配的材料：说明存在更优选择，而不是只给个靠后的名次 */
.sel-dom { margin: 8px 0 0 28px; font-size: 11.5px; color: var(--ink-3); font-style: normal; }
.sel-side .sel-dom { margin-left: 14px; }

/* ── 无匹配时的求助入口 ──
   条件组合过严时，页面不该只剩一片红叉。客户的条件在实际项目里往往有
   妥协空间——改壁厚、换成型密度、局部加强、或者接受改性件——这些都是
   工程人员能谈的，而选型器判不出来。 */
.sel-ask {
  border: 1px solid var(--accent); border-left-width: 3px; background: #f2f8f4;
  padding: 16px 18px; margin: 16px 0;
}
.sel-ask h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink-1); }
.sel-ask p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.sel-ask-btn {
  font: inherit; font-size: 14px; padding: 10px 20px; border: none; cursor: pointer;
  background: var(--accent); color: #fff;
}
.sel-ask-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 有结果时也留一条入口，但不抢戏 */
.sel-ask-inline { background: none; border: none; padding: 0; margin-top: 10px; font: inherit;
  font-size: 12px; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* ── 力学指标：三条滑块并列 ──
   压缩强度、硬度、回弹率各自独立，填哪条加哪条门槛。放在一起是因为它们回答的
   是同一类问题（这零件受力时要表现成什么样），分开成三个折叠区反而更难扫。 */
.sel-mech { display: grid; gap: 20px; margin-top: 4px; }
.sel-mech-row > b { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.sel-mech-row > b em {
  font-style: normal; font-weight: 400; font-size: 12px;
  color: var(--ink-3); margin-left: 8px;
}
/* 三条滑块叠在一起时，预设按钮与滑块之间不留额外间距，否则整块拖得太长 */
.sel-mech-row .sel-range { margin-top: 8px; }

/* 力学参数常驻在第 1 问底下：它不是另一件要勾选的事，是同一个答案的精确视图 */
.sel-mech-panel { margin-top: 16px; }
/* 力学面板里的双滑块跟着 row 的节奏走，不用 sel-dual 默认的顶部间距 */
.sel-mech-row .sel-dual { margin-top: 10px; }
.sel-mech-row .sel-dual-out { font-size: 12.5px; }
/* 双滑块塞进和单滑块同样的行里，读数才和其余几条对齐 */
.sel-mech-row .sel-range-row > .sel-dual { flex: 1; margin-top: 0; }

/* 力学参数的折叠头。箭头默认指向右，展开时转向下——它既是状态指示，也是开关：
   选了第 1 问的用途会自动展开，心里有数值的人也可以直接点它进去调。 */
.sel-mech-toggle {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  margin-top: 10px; padding: 6px 0; background: none; border: none;
  font: inherit; text-align: left; cursor: pointer;
}
.sel-mech-toggle:hover .sel-mech-toggle-t { color: var(--accent); }
.sel-mech-toggle-t { font-size: 14px; font-weight: 500; }
.sel-mech-toggle-t { flex: 1; }
.sel-mech-toggle i {
  position: relative; width: 22px; height: 22px; border-radius: 50%;
  flex: none; transition: background .18s ease;
}
.sel-mech-toggle i::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; margin: -3px 0 0 -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 7px solid var(--accent);
  transform-origin: 50% 30%; transform: rotate(-90deg);
  transition: transform .18s ease;
}
.sel-mech-toggle[aria-expanded="true"] i::before { transform: rotate(0); }
.sel-mech-toggle:hover i { background: #eef5f0; }
.sel-mech-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 折叠头已经有上边框，面板不必再画一条左边框 */
.sel-mech-panel { margin-top: 4px; border-left: none; padding-left: 0; }

/* 单位跟在参数名后面。原来只有滑块右侧的读数带单位，扫一眼容易漏掉，
   而「≥150」和「≥150 kPa」对工程师是两回事。 */
.sel-mech-row > b code {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  color: var(--accent); margin-left: 2px;
}

/* ── 自由文本框与颜色选项 ──
   文本框是「客户说了但问卷没问到」的收口，样式上要像一个正经的输入区，
   不能做成不起眼的附注——它接住的往往是这一单最要命的那条约束。 */
.sel-other { margin: 18px 0 8px; }
.sel-other label > b {
  display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px;
}
.sel-other label > b em {
  font-style: normal; font-weight: 400; font-size: 12px;
  color: var(--ink-3); margin-left: 6px;
}
.sel-other textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 6px; resize: vertical;
  font: inherit; font-size: 14px; line-height: 1.6;
  color: var(--ink); background: var(--panel);
}
.sel-other textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sel-other textarea::placeholder { color: var(--ink-3); }
.sel-color { display: block; margin-top: 12px; }
.sel-color > b { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.sel-color select {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--panel);
}