/* 产品配置页（/cart?action=configureproduct）—— 左侧配置项 + 右侧费用汇总 */

/* 主色变量（和 shop.css 保持一致；配置页也要用它，否则 var(--primary) 解析失败） */
:root { --primary: #165dff; }

.mdcfg {
  --md-label-w: 120px;
  padding-top: 83px;
  /* 底部留白挪到 .mdcfg-main：这样左侧白条可以一直铺到页面最底下 */
  padding-bottom: 0;
  background: #f5f7fb;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 整页不滚：滚动交给卡片正文（.mdcfg-card__body） */
  overflow: hidden;
}
.mdcfg-wrap {
  width: 100%;
  margin: 0;
  padding: 0 60px 0 16px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* align-items:stretch 让侧栏白条随主内容一起拉满（与 cart 列表页一致），
   否则竖条画不到底 */
/* 表单也是 flex 链条上的一环，否则 .mdcfg-layout 撑不满高度，左栏白条就画不到底 */
.mdcfg-wrap > form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mdcfg-layout {
  display: flex; align-items: stretch; gap: 12px;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;   /* 关键：允许被压缩，卡片才能拿到确定高度 */
}
/* 主区撑满一屏剩余高度，卡片再用 flex column 把结算栏推到底
   （同参考站 .shopping-cart-product 固定高度 + .allocation-card flex column） */
.mdcfg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; overflow: hidden; }

/* 白条填满侧栏剩余高度（搜索框占掉一部分），保证竖条画到底 */
.mdcfg .shop-side { flex: 0 0 250px; display: flex; flex-direction: column; min-height: 0; }
.mdcfg .shop-sidebar { flex: 1 1 auto; min-height: 0; }

.mdcfg-card {
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 4px;
  /* 卡片内部自成滚动容器：头 + 结算条固定，中间正文滚 */
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column;
}
.mdcfg-card + .mdcfg-card { margin-top: 16px; }
.mdcfg-card__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid #eef1f7;
}
.mdcfg-card__title { margin: 0; font-size: 15px; font-weight: 700; color: #1f2b3d; }
.mdcfg-card__extra { font-size: 13px; color: #8792a8; }
.mdcfg-card__extra a { color: var(--primary); text-decoration: none; }
/* 购物车清单后面的（N个）：浅黄，0 个也照样显示 */
.mdcfg-card__extra-num { color: #ffba00; }
.mdcfg-card__extra a:hover .mdcfg-card__extra-num { color: #ffba00; }
.mdcfg-card__body {
  padding: 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- 表单行：标签固定宽度 + 内容自适应 ---- */
.mdcfg .mdcfg-row {
  display: flex; flex-wrap: nowrap; gap: 12px;
  flex-direction: row;
  /* 标签与右侧控件垂直居中对齐（原来默认 stretch，控件会长在顶部） */
  align-items: center;
  margin-bottom: 22px;
  width: 100%;
  overflow: visible;
}
.mdcfg .mdcfg-row:last-child { margin-bottom: 0; }
.mdcfg .mdcfg-label {
  display: inline-block;
  min-width: var(--md-label-w); max-width: var(--md-label-w); width: 100%;
  margin: 0;
  line-height: 32px;
  font-size: 14px; font-weight: 400; color: #4e5969;
  vertical-align: top;
}
.mdcfg .mdcfg-label__title { display: flex; align-items: center; gap: 4px; }
.mdcfg .mdcfg-label__help {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #eef1f7; color: #8792a8;
  font-size: 11px; cursor: help;
}
/* 提示气泡：直接复用「无货型号」那套（白 90% / 8px 15px / 14px / lh21 / radius4 / 0 4px 8px） */
.mdcfg .mdcfg-label__help::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 15px;
  background: rgba(255, 255, 255, .9);
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s linear, visibility .15s linear;
  pointer-events: none;
  z-index: 30;
}
.mdcfg .mdcfg-label__help::before {
  content: "";
  position: absolute;
  left: calc(100% - 2px);
  top: 50%;
  margin-top: -5px;
  width: 0; height: 0;
  border: 5px solid transparent;
  border-right-color: rgba(255, 255, 255, .9);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s linear, visibility .15s linear;
  pointer-events: none;
  z-index: 31;
}
.mdcfg .mdcfg-label__help:hover::after,
.mdcfg .mdcfg-label__help:hover::before { opacity: 1; visibility: visible; }
/* 表单列默认按内容收缩（flex:0 1 auto），
   只有需要铺满的控件（型号/系统/数据盘）才显式拉满。
   这样可以避免单选按钮组、下拉框、输入框被拉成超长条。 */
.mdcfg .mdcfg-field { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.mdcfg .mdcfg-field--full { flex: 1 1 auto; width: 100%; }
.mdcfg .mdcfg-field--inline { display: flex; align-items: flex-start; gap: 8px; flex-wrap: nowrap; }
/* 滑块 / 数量这类需要横向空间的控件，其 field 保持拉满 */
.mdcfg .mdcfg-row--wide .mdcfg-field { flex: 1 1 auto; width: 100%; }
/* 滑块：滑条占 75%，数字框+单位单独占右侧 25% */
/* 滑块区：上方滑条 + 下方最小/最大值刻度，右侧步进器垂直居中 */
/* 滑块容器需要相对定位，气泡与滑条都相对它定位 */
.mdcfg .mdcfg-slider { position: relative; flex: 0 1 auto; width: 75%; min-width: 120px; }

/* 拖动/悬停时跟随滑块的数值气泡 */
.mdcfg .mdcfg-slider__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 0;
  transform: translateX(-50%);
  z-index: 5;
  height: 24px;
  padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  background: #4e5969;
  border-radius: 4px;
  color: #fff;
  font-size: 12px; line-height: 1; white-space: nowrap;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease;
}
.mdcfg .mdcfg-slider__tip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  width: 8px; height: 8px;
  margin-left: -4px;
  background: #4e5969;
  transform: rotate(45deg);
  border-radius: 1px;
}
/* 只由滑块（手柄）hover 或拖动触发，整条滑轨 hover 不触发 */
.mdcfg .mdcfg-slider.is-active .mdcfg-slider__tip {
  opacity: 1; visibility: visible;
}
.mdcfg .mdcfg-field--inline .mdcfg-range { width: 100%; display: block; }
.mdcfg .mdcfg-slider__scale {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
  font-size: 12px; color: rgba(0, 0, 0, .65);
  line-height: 1;
}
.mdcfg .mdcfg-field--inline > span { flex: 0 0 auto; }

/* ---- 按钮组（单选/多选/自定义按钮） ---- */
.mdcfg .mdcfg-btns { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
.mdcfg .mdcfg-btn {
  position: relative;
  overflow: visible;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 0 18px;
  background: #f5f7fb;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px; color: rgba(78, 89, 105, .99);
  line-height: 32px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mdcfg .mdcfg-btn:hover { border-color: var(--primary); color: var(--primary); }
.mdcfg .mdcfg-btn.is-on,
.mdcfg .mdcfg-btn:has(> input:checked) {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
/* 可用区（数据中心）这种按钮：选中态不用填色，沿用 hover 那套
   （浅底 + 蓝描边 + 蓝字），和鼠标悬停时完全一致 */
/* 周期按钮右上角的折扣角标（红底白字，跳出按钮上沿） */
/* 角标整体位于按钮上方、与按钮不重叠：容器留出 22px 顶部空间，
   角标绝对定位到该空间里（按钮顶部向上 22px 处） */
/* 角标浮在按钮上方的行间空隙里，不占布局，避免把按钮下移 */
.mdcfg .mdcfg-btns.cycle { padding-top: 0; }
.mdcfg .mdcfg-btn__badge {
  position: absolute;
  bottom: calc(100% + 4px);
  right: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; padding: 0 6px;
  background: #f5502a;
  border-radius: 3px;
  color: #fff;
  font-size: 11px; font-weight: 500; line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
/* 未选中按钮的角标同样保持红色，不跟随按钮文字变白 */
.mdcfg .mdcfg-btn__badge { color: #fff !important; }

/* 未选中的按钮不应残留选中样式：:not(:has(:checked)) 时清掉 is-on 的视觉 */
.mdcfg .mdcfg-btn:not(:has(> input:checked)) {
  background: #f5f7fb;
  border-color: transparent;
  color: rgba(78, 89, 105, .99);
}
.mdcfg .mdcfg-btn:not(:has(> input:checked)):hover {
  border-color: var(--primary); color: var(--primary);
}
.mdcfg .mdcfg-btn input { position: absolute; opacity: 0; pointer-events: none; }
/* 关联配置项导致不可选：变灰 + 禁止图标（和魔方默认模板一致） */
.mdcfg .mdcfg-btn.is-disabled,
.mdcfg .mdcfg-btn:has(> input:disabled) {
  background: #f8f9fb;
  border-color: transparent;
  color: #d0d4dd;
  opacity: 1;
  cursor: not-allowed;
}
.mdcfg .mdcfg-btn.is-disabled:hover,
.mdcfg .mdcfg-btn:has(> input:disabled):hover {
  background: #f8f9fb;
  border-color: transparent;
  color: #d0d4dd;
}
/* 自绘下拉里的禁用项 */
.mdcfg .mdcfg-dd__item.is-disabled,
.mdcfg .mdcfg-dd__item:disabled {
  color: #d0d4dd;
  cursor: not-allowed;
}
.mdcfg .mdcfg-dd__item.is-disabled:hover,
.mdcfg .mdcfg-dd__item:disabled:hover { background: transparent; color: #d0d4dd; }

/* 可用区（数据中心）这一组：没有 hover 效果，蓝框蓝字只表示「选中」。
   注意：全局有 .mdcfg-btn:not(:has(:checked)):hover（specificity 0,4,1），
   这里必须同样带 :not(:has(:checked)) 并多一个类，才压得住它。 */
.mdcfg .mdcfg-btns--area .mdcfg-btn,
.mdcfg .mdcfg-btns--area .mdcfg-btn.is-on,
.mdcfg .mdcfg-btns--area .mdcfg-btn:not(:has(> input:checked)):hover {
  background: #f5f7fb;
  border-color: transparent;
  color: rgba(78, 89, 105, .99);
}
.mdcfg .mdcfg-btns--area .mdcfg-btn:has(> input:checked),
.mdcfg .mdcfg-btns--area .mdcfg-btn:has(> input:checked):hover {
  background: #f5f7fb;
  border-color: var(--primary);
  color: var(--primary);
}

/* 图标：原来是 fa-regular-400.woff2（152KB）整套字体，实际只用「钥匙 U+F084」
   和「服务器 U+F233」两个字形。这里换成从字体提取的 SVG，用 mask + currentColor 上色。 */
.mdcfg .mdcfg-ico {
  display: inline-block;
  font-style: normal; font-weight: 400; line-height: 1;
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
}
.mdcfg .mdcfg-ico--key    { -webkit-mask-image: url("img/icons/key.svg");    mask-image: url("img/icons/key.svg"); }
.mdcfg .mdcfg-ico--server { -webkit-mask-image: url("img/icons/server.svg"); mask-image: url("img/icons/server.svg"); }


/* 主机密码：钥匙在输入框内左侧，眼睛在输入框内右侧（参考站 .host_password 的排布） */
.mdcfg .mdcfg-passline { display: flex; align-items: center; gap: 16px; }
/* ---- 字段下方的红字提示 ----
   任何带提示的配置项：提示挂在 .mdcfg-field 内、控件下方。
   行默认 align-items: center，提示一出现整行变高，左侧配置项名会被带着下移
   （以前踩过的坑）。所以凡是可能出提示的行，加 .mdcfg-row--tip：
   顶部对齐 + 标签行高等于控件高度，标签始终与控件垂直居中，提示出现/消失都不动。 */
.mdcfg .mdcfg-row--tip {
  align-items: flex-start;
  /* 各行控件高度不同，按行校准；默认 38px = 输入框 36px + 上下边框各 1px */
  --tip-ctl-h: 38px;
}
.mdcfg .mdcfg-row--tip > .mdcfg-label { line-height: var(--tip-ctl-h); }
/* 数量类行：步进器按钮/输入框高 32px，但 .mdcfg-toolbar 有 margin-top: 2px，
   实际中心在 2 + 16 = 18px 处，所以标签行高取 36px 才对齐 */
.mdcfg .mdcfg-row--wide.mdcfg-row--tip { --tip-ctl-h: 36px; }

/* 提示本体：默认隐藏，有内容才显示（由 JS 加 is-on） */
.mdcfg .mdcfg-tip {
  display: none;
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: #ff4d4f;
}
.mdcfg .mdcfg-tip.is-on { display: block; }

/* 密码行的提示沿用同一套红字 */
.mdcfg .error-tip { color: #ff4d4f; }
.mdcfg .mdcfg-inputgroup {
  position: relative;
  display: flex; align-items: center;
  flex: 0 1 auto; min-width: 0; max-width: 100%;
}
.mdcfg .mdcfg-inputgroup .mdcfg-input {
  /* 和「主机名」同宽（220px），眼睛图标压在框内，不再额外加宽 */
  width: 220px; max-width: 100%; min-width: 0;
  padding-left: 36px; padding-right: 34px;
}
.mdcfg .mdcfg-inputgroup__icon {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center;
  color: #cccccc; pointer-events: none;
}
/* 眼睛按钮：外层包裹保留（24×24 命中区），但底色/边框/hover 全部保持全透明，
   不画按钮容器，只显示里面的图标本身 */
.mdcfg .mdcfg-inputgroup__eye {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 0;
  color: var(--primary);
  cursor: pointer;
  outline: none;
}
.mdcfg .mdcfg-inputgroup__eye:hover,
.mdcfg .mdcfg-inputgroup__eye:focus,
.mdcfg .mdcfg-inputgroup__eye:active {
  background: transparent; border-color: transparent; box-shadow: none;
}
.mdcfg .mdcfg-inputgroup__eye svg { display: block; pointer-events: none; }
/* 睁眼 / 闭眼：密码明文时显示闭眼 */
.mdcfg .mdcfg-eye { display: none; align-items: center; justify-content: center; }
.mdcfg .mdcfg-eye--on { display: inline-flex; }
.mdcfg .mdcfg-inputgroup__eye.is-hidden .mdcfg-eye--on { display: none; }
.mdcfg .mdcfg-inputgroup__eye.is-hidden .mdcfg-eye--off { display: inline-flex; }
.mdcfg .mdcfg-randpass {
  color: var(--primary); font-size: 12px; line-height: 31px;
  padding: 0 10px; border: 1px solid var(--primary); border-radius: 4px;
  white-space: nowrap; cursor: pointer; user-select: none;
}

/* ---- 下拉 ---- */
/* 原生 select 只是表单值载体，任何时候都不该露出来。
   原来只有 JS 加上 .mdcfg-dd__native 后才隐藏，
   而 JS 在 DOMContentLoaded 才跑，中间会闪一下浏览器默认下拉框（很难看）。
   这里直接对所有 .mdcfg-select 生效，CSS 一到位就隐藏，不再依赖 JS 时机。 */
.mdcfg .mdcfg-select {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* JS 建好自绘框后，原生 select 仍然保持隐藏（保留给表单提交用） */
.mdcfg .mdcfg-dd > select.mdcfg-select,
.mdcfg .mdcfg-select.mdcfg-dd__native {
  position: absolute !important;
  display: block !important;
  width: 1px !important; height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0;
}

/* 自绘下拉 */
.mdcfg .mdcfg-dd { position: relative; display: inline-block; vertical-align: middle; }
.mdcfg .mdcfg-dd__display {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 198px; height: 36px; padding: 0 12px;
  background: #fff;
  border: 1px solid #e8ecf4; border-radius: 4px;
  font-size: 14px; color: #1f2b3d;
  line-height: 1; text-align: left; cursor: pointer;
  transition: border-color .2s ease;
}
.mdcfg .mdcfg-dd__display:hover { border-color: #c9d3e3; }
.mdcfg .mdcfg-dd.is-open .mdcfg-dd__display {
  border-color: #0052d9;
  box-shadow:
    0 0 0 2px rgba(0, 82, 217, .04),
    0 4px 12px rgba(0, 82, 217, .06);
  transition: border-color .28s ease, box-shadow .28s ease;
}
.mdcfg .mdcfg-dd__text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 文字包在 span 里（便于前面插国旗），也要能省略 */
.mdcfg .mdcfg-dd__text > span {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mdcfg .mdcfg-dd__arrow {
  flex: 0 0 auto; color: #8792a8;
  transition: transform .2s ease, color .2s ease;
}
.mdcfg .mdcfg-dd.is-open .mdcfg-dd__arrow { transform: rotate(180deg); color: var(--primary); }

.mdcfg .mdcfg-dd__panel {
  position: absolute;
  left: 0; top: calc(100% + 4px);
  z-index: 80;
  min-width: 100%;
  /* 面板宽度不超过触发框：选项文字过长时用省略号，不再把面板撑宽 */
  max-width: 100%;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(20, 30, 55, .1);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.mdcfg .mdcfg-dd.is-open .mdcfg-dd__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mdcfg .mdcfg-dd__list { display: flex; flex-direction: column; }
.mdcfg .mdcfg-dd__item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  min-width: 0;
  padding: 8px 10px;
  overflow: hidden;
  background: transparent;
  border: 0; border-radius: 2px;
  font-size: 14px; color: #1f2b3d;
  text-align: left; white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.mdcfg .mdcfg-dd__item:hover { background: #f2f6ff; color: var(--primary); }
.mdcfg .mdcfg-dd__item.is-on { color: var(--primary); background: #eef4ff; font-weight: 500; }
.mdcfg .mdcfg-dd__item.is-disabled { color: #c2c9d6; cursor: not-allowed; }
.mdcfg .mdcfg-dd__item.is-disabled:hover { background: transparent; color: #c2c9d6; }
.mdcfg .mdcfg-select:focus { outline: none; border-color: var(--primary); }

/* ---- 输入框 ---- */
/* 输入框：与本站搜索框/商品卡同一套「慢慢变蓝 + 淡蓝发光」
   过渡只写在 :focus 上，失焦那一下瞬时回灰 */
.mdcfg .mdcfg-input {
  width: auto; min-width: 220px; max-width: 100%; height: 36px; padding: 0 12px;
  border: 1px solid #e8ecf4; border-radius: 4px;
  font-size: 14px; color: #1f2b3d; background: #fff;
}
.mdcfg .mdcfg-input:focus {
  outline: none;
  border-color: #0052d9;
  box-shadow:
    0 0 0 2px rgba(0, 82, 217, .04),
    0 4px 12px rgba(0, 82, 217, .06);
  transition: border-color .28s ease, box-shadow .28s ease;
}
.mdcfg textarea.mdcfg-input { height: auto; padding: 10px 12px; line-height: 1.7; resize: vertical; }

/* ---- 滑块 ---- */
/* 滑块：5px 圆角细轨道 + 蓝色已填充 + 白色小手柄（自绘，不用浏览器默认） */
.mdcfg .mdcfg-range {
  -webkit-appearance: none; appearance: none;
  height: 5px;
  margin: 12px 0;
  border-radius: 999px;
  background: linear-gradient(to right, var(--primary) var(--md-range-pct, 0%), #eef1f7 var(--md-range-pct, 0%));
  outline: none; cursor: pointer;
}
.mdcfg .mdcfg-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e3e8ef;
  box-shadow: 0 2px 4px rgba(14, 30, 37, .12);
  cursor: pointer;
  transition: border-color .2s ease;
}
.mdcfg .mdcfg-range::-webkit-slider-thumb:hover { border-color: var(--primary); }
/* 拖动/悬停手柄时光标样式 */
.mdcfg .mdcfg-range:active::-webkit-slider-thumb { border-color: var(--primary); }
.mdcfg .mdcfg-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e3e8ef;
  box-shadow: 0 2px 4px rgba(14, 30, 37, .12);
  cursor: pointer;
}
.mdcfg .mdcfg-range::-moz-range-track { height: 5px; border-radius: 999px; background: #eef1f7; }
/* 滑块右侧步进器：照参考站 .progress-toolbar
   （− 32x32 / 数字 60x32 / + 32x32，灰底 #f2f3f8，无边框，无圆角） */
.mdcfg .mdcfg-toolbar {
  display: flex; align-items: center;
  margin-left: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.mdcfg .mdcfg-toolbar__btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: #f2f3f8;
  color: #999;
  border: 0;
  font-size: 22px; line-height: 1;
  cursor: pointer; user-select: none;
  transition: background-color .3s, color .3s;
}
.mdcfg .mdcfg-toolbar__dec { border-radius: 4px 0 0 4px; }
.mdcfg .mdcfg-toolbar__inc { border-radius: 0 4px 4px 0; }
.mdcfg .mdcfg-toolbar__btn:hover { background: var(--primary); color: #fff; }
.mdcfg .mdcfg-range-val {
  width: 60px; height: 32px;
  padding: 0;
  background: #f2f3f8;
  border: 0;
  border-radius: 0;
  font-size: 14px; text-align: center; color: #000;
  transition: box-shadow .3s, background-color .3s;
  -moz-appearance: textfield;
}
.mdcfg .mdcfg-range-val::-webkit-outer-spin-button,
.mdcfg .mdcfg-range-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mdcfg .mdcfg-range-val:hover,
.mdcfg .mdcfg-range-val:focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--primary);
  outline: none;
}
.mdcfg .mdcfg-unit { flex: 0 0 auto; font-size: 13px; color: #8792a8; }


/* ---- 操作系统卡片 ---- */
.mdcfg-osgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.mdcfg-os {
  position: relative;
  border: 1px solid #e8ecf4;
  border-radius: 4px;
  /* 上灰下白：卡片上半（图标+品牌名）浅灰，下半（选择版本）白 */
  background: #f2f3f8;
  padding: 12px 0 0;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
/* hover 与「已选具体版本」都是选中态 */
.mdcfg-os.is-hover,
.mdcfg-os.is-on { border-color: var(--primary); }
/* 未选中：仅图标灰化，卡片本身保持白底 */
.mdcfg-os:not(.is-on):not(.is-hover) .mdcfg-os__icon img {
  filter: grayscale(1); opacity: .5;
}
.mdcfg-os:not(.is-on):not(.is-hover) .mdcfg-os__name { color: #5b6779; }
.mdcfg-os__head { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.mdcfg-os__icon { width: 26px; height: 26px; flex: 0 0 auto; }
.mdcfg-os__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mdcfg-os__name { font-size: 14px; font-weight: 600; color: #1f2b3d; }
/* hover / 选中：系统名与描边同色（蓝） */
.mdcfg-os:hover .mdcfg-os__name,
.mdcfg-os.is-hover .mdcfg-os__name,
.mdcfg-os.is-on .mdcfg-os__name { color: var(--primary); }
.mdcfg-os__ver {
  margin-top: 12px;
  border-top: 1px solid #eef1f7;
  border-radius: 0 0 3px 3px;
  background: #fff;
  font-size: 13px; color: #8792a8;
}
.mdcfg-os.is-on .mdcfg-os__ver { background: #fff; border-top-color: #dbe6ff; }
/* OS 卡片内的版本下拉：与卡片同宽、扁平嵌入（无外框） */
.mdcfg-os__ver .mdcfg-dd { display: block; width: 100%; }
.mdcfg-os__ver .mdcfg-dd__display {
  width: 100%; min-width: 0; height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 0; border-radius: 0;
  font-size: 13px; color: #8792a8;
}
/* 只有整卡 hover 才把「选择版本」由灰变黑，下拉框本身 hover 不触发 */
.mdcfg-os:hover .mdcfg-os__ver .mdcfg-dd__display,
.mdcfg-os.is-hover .mdcfg-os__ver .mdcfg-dd__display { color: #1f2b3d; }
.mdcfg-os.is-on .mdcfg-os__ver .mdcfg-dd__display { color: #1f2b3d; }
/* 展开面板时也不改文字颜色（只有整卡 hover 才变黑） */
.mdcfg-os__ver .mdcfg-dd.is-open .mdcfg-dd__display { border: 0; }
/* OS 卡片内的版本选择不显示下拉箭头（整卡可点） */
.mdcfg-os__ver .mdcfg-dd__arrow { display: none; }
.mdcfg-os__ver .mdcfg-dd__panel { min-width: 100%; max-height: 200px; z-index: 120; }
.mdcfg-os__ver .mdcfg-dd.is-open { z-index: 110; }
.mdcfg-os:has(.mdcfg-dd.is-open) { z-index: 100; }
.mdcfg-os__ver .mdcfg-dd__item { padding: 7px 8px; font-size: 13px; }

/* ---- 提示条 ---- */
.mdcfg-tip {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  background: #f4f8ff;
  border-radius: 4px;
  font-size: 13px; color: #4e5969;
  line-height: 1.7;
}
.mdcfg-tip__icon {
  flex: 0 0 auto; width: 16px; height: 16px;
  margin-top: 2px; color: var(--primary);
}

/* ---- 产品型号选择（同二级分组下的其它产品） ---- */
/* 参考站 .basicConfigurationItems：灰底容器只包选项区，标签留在容器外 */
.mdcfg .mdcfg-row--models { margin-bottom: 22px; }
.mdcfg .mdcfg-row--models > .mdcfg-field {
  background: #f2f3f8;
  border-radius: 4px;
  padding: 16px 12px 12px;
}

.mdcfg-models { display: flex; flex-wrap: wrap; gap: 4px; }
.mdcfg-model {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 16px;
  background: #fff; color: rgba(78,89,105,.99);
  border: 1px solid #e6eaf3; border-radius: 4px;
  font-size: 14px; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mdcfg-model:hover { background: #f7f9fd; color: var(--primary); }
.mdcfg-model.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 无货型号：置灰不可点，样式沿用选项按钮的禁用态；hover 时出气泡提示。
   气泡数值直接复用购物车清单页 .vc-item-toggle 的那套（8px 15px / 14px / lh21 / radius4 /
   box-shadow 0 4px 8px rgba(0,0,0,.1)），半透明白 90%，不做毛玻璃。 */
.mdcfg-model.is-disabled {
  background: #f8f9fb;
  border-color: transparent;
  color: #d0d4dd;
  cursor: not-allowed;
  position: relative;
}
.mdcfg-model.is-disabled:hover { background: #f8f9fb; border-color: transparent; color: #d0d4dd; }
.mdcfg-model.is-disabled::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  /* 气泡与按钮之间留 10px 间隔（三角只补下面那一段，不贴着按钮） */
  top: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 8px 15px;
  /* 与购物车结算页「支付方式」hover 气泡完全一致的透明度 */
  background: rgba(255, 255, 255, .9);
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s linear, visibility .15s linear;
  pointer-events: none;
  z-index: 30;
}
.mdcfg-model.is-disabled::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 1px);
  margin-left: -5px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: rgba(255, 255, 255, .9);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s linear, visibility .15s linear;
  pointer-events: none;
  z-index: 31;
}
.mdcfg-model.is-disabled:hover::after,
.mdcfg-model.is-disabled:hover::before { opacity: 1; visibility: visible; }
.mdcfg-model-head { display: contents; }
/* 配置页顶部的「清单」是手机端加的，电脑端购物车清单在卡片头部，不重复显示 */
.mdcfg .shop-region__cart { display: none; }
/* 「当前型号」按钮只在手机端用（手机端把型号列表收进弹层） */
.mdcfg .mdcfg-model-current { display: none; }
.mdcfg-models__tip {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 10px;
  font-size: 13px; color: #5b6779; line-height: 1.7;
}

/* ---- 底部结算栏（照参考站 .allocation-footer，是配置卡片内的最后一块） ---- */
.mdcfg-bottom {
  /* 参考站 .allocation-footer .configoption_total 是 align-items:center，整条内容竖直居中 */
  /* 固定在卡片底部（外层卡片已裁切成滚动容器） */
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  border-radius: 0 0 4px 4px;
  display: flex; align-items: center; justify-content: space-between;
  transition: opacity .2s ease;
  gap: 16px;
  padding: 16px 60px 10px 20px;
  min-height: 92px;
  background: #fff;
  border-top: 1px solid #eef1f7;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, .05);
}
/* 首次进页面：底栏本身照常显示，但里面的文字和按钮先藏着，
   等价格算出来再一起出现（保留占位，避免高度抖动） */
.mdcfg-bottom__left,
.mdcfg-bottom__right { transition: opacity .2s ease; }
.mdcfg-bottom.is-pending .mdcfg-bottom__left,
.mdcfg-bottom.is-pending .mdcfg-bottom__right { opacity: 0; visibility: hidden; }
.mdcfg-bottom__left { flex: 1 1 auto; min-width: 0; }
/* 锁死整行高度：价格为空的 span 在 baseline 对齐下会把这一行撑到 41px，
   而填上价格时只有 34px —— 直接写死 height 才和出价后完全一致 */
.mdcfg-bottom__total { display: flex; align-items: baseline; gap: 0; margin-bottom: 6px; height: 34px; }
.mdcfg-bottom__label { font-size: 14px; color: #000; font-weight: 500; }
.mdcfg-bottom__price {
  display: inline-block; vertical-align: baseline;
  font-size: 28px; color: #ff000e; font-weight: 400; line-height: 1.2;
  /* 锁死行高：空态 / 计价中 / 出价后三种高度必须一致，否则整条底栏会抖 */
  min-height: 33.6px;
}
.mdcfg-bottom__price .md-bottom-total__price { font-size: inherit; font-weight: inherit; }
.mdcfg-bottom__price .md-bottom-total__prefix { font-size: 14px; }
/* 「无折扣」和「客户折扣价」共用同一条灰色下划线 */
.mdcfg-bottom__price .md-bottom-total__tag,
.mdcfg-bottom__price .md-bottom-total__old {
  font-size: 14px; font-weight: 400;
  border-bottom: 1px solid #d9dde5;
  padding-bottom: 1px;
}
.mdcfg-bottom__price .md-bottom-total__tag { color: #666; }
/* 有折扣时价格右边的说明：原价（划掉）+ 客户折扣价（几折） */
.mdcfg-bottom__price .md-bottom-total__old {
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #a9a9a9;
  line-height: 1.2;
  vertical-align: baseline;
}
.mdcfg-bottom__price .md-bottom-total__old del {
  color: #a9a9a9;
  text-decoration: line-through;
  margin-right: 4px;
}

/* ---- 计价中：缺口圆旋转 + 文案「价格计算中…」 ---- */
/* 计价中沿用普通行内流：基线与「费用合计：」完全对齐（不要用 flex，否则会偏高），
   高度由 28px 字号的行高撑住，和出价后一致 */
.mdcfg-bottom__price.is-loading { display: inline; }
.mdcfg-spin {
  display: inline-block; vertical-align: middle;
  width: 16px; height: 16px;
  margin-right: 6px; margin-top: -2px;
  border: 2px solid rgba(0, 82, 217, .18);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: mdcfg-spin .7s linear infinite;
}
@keyframes mdcfg-spin { to { transform: rotate(360deg); } }
.mdcfg-price-calc { font-size: 14px; color: #999; font-weight: 400; }
/* 计价中保留「（无折扣）」标签，与出价后同一个标签样式 */
.mdcfg-bottom__price.is-loading .md-bottom-total__tag {
  font-size: 14px; color: #666; font-weight: 400;
  border-bottom: 1px solid #d9dde5;
  padding-bottom: 1px;
}
.mdcfg-bottom__note { margin: 0 0 6px; font-size: 14px; color: #999; line-height: 1.5; }
.mdcfg-bottom__right { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.mdcfg-bottom__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  background: var(--primary); color: #fff;
  border: 0; border-radius: 4px;
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.mdcfg-bottom__btn:hover { background: #0f45d6; }
/* 购物车图标：Font Awesome 5 Pro 的 fa-cart-plus（U+F217）已抽成 assets/img/icons/cart-plus.svg */
.mdcfg-buyNow { gap: 6px; }
/* 图标是外链 SVG（assets/img/icons/cart-plus.svg，白色填充），base.css 有全局 img{display:block} 要改回行内 */
.mdcfg-buyNow__icon {
  display: inline-block; vertical-align: middle;
  width: 14px; height: 14px;
  flex: 0 0 auto;
  margin-top: -1px;
}
.mdcfg-staging { display: none !important; }

/* ---- 费用明细悬停面板 ---- */
/* 全部数值 1:1 抄参考站 /themes/cart/server/static/css/module.css 与 carttypo.css：
   .price-breakdown / .ordersummary-table / .priceTitle / .tb_totalPrice 实测与源码一致 */
.mdcfg-details { position: relative; display: inline-block; }
.mdcfg-details__trigger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; background: transparent; border: 0;
  font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.4; color: #999;
  cursor: pointer;
  outline: none; -webkit-tap-highlight-color: transparent;
}
/* 悬停不变蓝：文字颜色保持灰 */
.mdcfg-details__arrow { transition: transform .2s ease; }
.mdcfg-details:hover .mdcfg-details__arrow,
.mdcfg-details.is-open .mdcfg-details__arrow { transform: rotate(180deg); }
.mdcfg-details__panel {
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 60;
  min-width: 400px;
  min-width: fit-content;
  max-height: calc(100vh - 300px);
  overflow: hidden;
  overflow-y: auto;
  padding: 12px 20px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
  margin-bottom: 1px;
  opacity: 0;
  visibility: hidden;
  /* 弹出效果沿用本站下拉框：淡入 + 轻微位移（面板向上弹，方向取反） */
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* 滚动条：平时透明，悬停面板才出现（参考站 carttypo.css 同款） */
.mdcfg-details__panel::-webkit-scrollbar { width: 6px; height: 4px; background: transparent; }
.mdcfg-details__panel::-webkit-scrollbar-track { background: transparent; }
.mdcfg-details__panel::-webkit-scrollbar-thumb { background-color: transparent; }
.mdcfg-details__panel:hover::-webkit-scrollbar-track { background: #f1f1f1; }
.mdcfg-details__panel:hover::-webkit-scrollbar-thumb { background-color: rgb(201, 205, 212); }
.mdcfg-details__panel:hover::-webkit-scrollbar-thumb:hover { background-color: rgb(190, 190, 190); }

.mdcfg-details:hover .mdcfg-details__panel,
.mdcfg-details.is-open .mdcfg-details__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* 工具条：费用明细： 共N项 */
.mdcfg-details__head {
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: baseline;
}
.mdcfg-details__head > div { display: flex; align-items: baseline; }
.mdcfg-details__head span,
.mdcfg-details__count {
  font-size: 14px; color: rgb(0, 0, 0); font-weight: 400;
  display: inline-block; margin: 0;
}

/* 明细表格 */
.mdcfg-details__body { margin: 0; }
.mdcfg-details__body table {
  margin: 15px 0;
  width: 100%;
  border-collapse: collapse;
}
.mdcfg-details__body table * { white-space: nowrap; }
.mdcfg-details__body th,
.mdcfg-details__body td {
  padding: 12px;
  text-align: left;
  display: table-cell;
  color: #999;
  font-size: 13px;
  font-weight: 400;
  border: 0;
  vertical-align: middle;
}
.mdcfg-details__body th {
  background-color: #f4f8ff;
  color: #1a1a1a;
  font-weight: 500;
}
.mdcfg-details__body tr { border-bottom: 1px solid rgb(237, 238, 243); }
/* 悬停整行高亮 */
.mdcfg-details__body tr:hover { background-color: rgb(245, 245, 245); }
.mdcfg-details__body tbody { cursor: pointer; }
/* 列宽（内容更宽时浏览器会自己撑开，和参考站行为一致） */
.mdcfg-details__body .md-detail__name { width: 140px; }
.mdcfg-details__body td.md-detail__name { color: rgb(0, 0, 0); font-weight: 500; }
.mdcfg-details__body .md-detail__val {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/* 注意：web 主题 base.css 有全局 img{display:block}，这里必须改回行内，
   否则配置详情里的图标和文字会被挤成两行（参考站是 inline + vertical-align:middle） */
.mdcfg-details__body .md-detail__val img {
  display: inline;
  vertical-align: middle;
  width: auto;
  height: 20px;
  margin-right: 5px;
}
/* 价格 / 客户折扣价 / 总价 三行：只填满表头前两列（配置名称 / 配置详情），
   后面几列留空，悬停时也只会亮到第二格 */
.mdcfg-details__body .md-detail__sumrow td.md-detail__name,
.mdcfg-details__body .md-detail__sumrow td.md-detail__val {
  background: transparent;
}
.mdcfg-details__body .md-detail__orig { width: 160px; }
.mdcfg-details__body .md-detail__saving,
.mdcfg-details__body .md-detail__sale { width: 120px; }
/* 总价行：标签 13px 500 #1a1a1a，金额 14px 500 红 */
/* 参考站 .price-breakdown .ordersummary-table tr:hover 对总价行同样生效，行底线也保留 */
.mdcfg-details__body .md-detail__totalrow { border-bottom: 1px solid rgb(237, 238, 243); }
/* 明细表尾新增的两行：价格 / 客户折扣价 */
.mdcfg-details__body .md-detail__priceVal {
  font-size: 14px; font-weight: 500; color: #22c55e;
}
.mdcfg-details__body .md-detail__discountVal {
  font-size: 14px; font-weight: 500; color: #22c55e;
}
.mdcfg-details__body .md-detail__totalLabel {
  font-size: 13px; font-weight: 500; color: #1a1a1a;
}
.mdcfg-details__body .md-detail__totalVal {
  font-size: 14px; font-weight: 500; color: rgb(255, 77, 79);
}

.mdcfg-qty { display: flex; align-items: center; gap: 6px; }
.mdcfg-qty__btn {
  width: 32px; height: 32px;
  border: 1px solid #e8ecf4; border-radius: 4px;
  background: #fff; color: #5b6779;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.mdcfg-qty__btn:hover { border-color: var(--primary); color: var(--primary); }
.mdcfg-qty__input {
  width: 60px; height: 32px;
  border: 1px solid #e8ecf4; border-radius: 4px;
  text-align: center; font-size: 14px;
}

@media (max-width: 991px) {
  .mdcfg-layout { flex-direction: column; }
  .mdcfg-bottom { flex-wrap: wrap; }
  .mdcfg-details__panel { min-width: 0; width: calc(100vw - 48px); }
}
@media (max-width: 767px) {
  .mdcfg { padding-top: 74px; }
  .mdcfg-wrap { padding: 0 16px; }
  .mdcfg .mdcfg-row { flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
  .mdcfg .mdcfg-label { min-width: 100%; max-width: 100%; line-height: 1.5; }
  .mdcfg-osgrid { grid-template-columns: 1fr; }
  .mdcfg-card__body { padding: 16px; }
}

/* 下拉项 / 触发框里的国旗（「可用区」这类带国家代码的选项） */
.mdcfg .mdcfg-dd__flag {
  /* 与「可用区」按钮版国旗同高（模板里 height="16"） */
  height: 16px; width: auto;
  border-radius: 1px;
  flex: 0 0 auto;
}
.mdcfg .mdcfg-dd__text { display: inline-flex; align-items: center; gap: 6px; }

/* ---- 多选（type 3）：标准方块勾选，替代胶囊按钮 ---- */
.mdcfg .mdcfg-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 24px;
}
.mdcfg .mdcfg-check {
  position: relative;
  display: flex; align-items: flex-start; gap: 8px;
  max-width: 100%;
  font-size: 14px; color: #1f2b3d;
  cursor: pointer;
  user-select: none;
}
.mdcfg .mdcfg-check input {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0; margin: 0;
}
.mdcfg .mdcfg-check__box {
  width: 16px; height: 16px; flex: 0 0 auto;
  margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #d4dae6;
  border-radius: 4px;
  color: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
.mdcfg .mdcfg-check__box svg { opacity: 0; transition: opacity .12s ease; }
.mdcfg .mdcfg-check:hover .mdcfg-check__box { border-color: var(--primary); }
.mdcfg .mdcfg-check input:checked + .mdcfg-check__box {
  background: var(--primary);
  border-color: var(--primary);
}
.mdcfg .mdcfg-check input:checked + .mdcfg-check__box svg { opacity: 1; }
.mdcfg .mdcfg-check input:focus-visible + .mdcfg-check__box {
  outline: 2px solid rgba(22, 93, 255, .22);
  outline-offset: 1px;
}
.mdcfg .mdcfg-check input:disabled + .mdcfg-check__box {
  background: #f4f6fa; border-color: #e2e7f0;
}
.mdcfg .mdcfg-check.is-disabled { color: #a9b2c2; cursor: not-allowed; }

/* 选项文字过长省略（系统版本名这类） */
.mdcfg .mdcfg-dd__item > span {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 主机名 / 密码这类带左图标的输入框 ---- */
.mdcfg .mdcfg-input-icon {
  position: relative;
  display: inline-flex; align-items: center;
  max-width: 100%;
}
.mdcfg .mdcfg-input-icon > .mdcfg-input { padding-left: 36px; }
.mdcfg .mdcfg-input-icon__ico {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #8792a8;
  pointer-events: none;
}

/* 主机名：默认灰底只读，点进去和密码框一样（白底 + 蓝色聚焦描边） */
.mdcfg .mdcfg-input-icon > .mdcfg-input[readonly] {
  background: #f5f7fb;
  cursor: text;
}
/* 聚焦时保持灰底，只叠加密码框那套蓝色描边 */
.mdcfg .mdcfg-input-icon > .mdcfg-input[readonly]:focus {
  background: #f5f7fb;
}

/* ---- 单选：与多选同款方框，选中态实心（无勾） ---- */
.mdcfg .mdcfg-choices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.mdcfg .mdcfg-choice {
  position: relative;
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; color: #1f2b3d;
  cursor: pointer;
  user-select: none;
}
.mdcfg .mdcfg-choice input {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0; margin: 0;
}
.mdcfg .mdcfg-choice__box {
  position: relative;
  width: 16px; height: 16px; flex: 0 0 auto;
  background: #fff;
  border: 1px solid #c9d0dc;
  border-radius: 50%;
  transition: background-color .15s ease, border-color .15s ease;
}
.mdcfg .mdcfg-choice:hover .mdcfg-choice__box { border-color: var(--primary); }
/* 选中：外圈描蓝 + 内圈实心点 */
.mdcfg .mdcfg-choice input:checked + .mdcfg-choice__box {
  background: #fff;
  border-color: var(--primary);
}
.mdcfg .mdcfg-choice input:checked + .mdcfg-choice__box::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--primary);
}
.mdcfg .mdcfg-choice input:focus-visible + .mdcfg-choice__box {
  outline: 2px solid rgba(22, 93, 255, .22);
  outline-offset: 1px;
}
.mdcfg .mdcfg-choice input:disabled + .mdcfg-choice__box {
  background: #f4f6fa; border-color: #e2e7f0;
}
.mdcfg .mdcfg-choice.is-disabled { color: #a9b2c2; cursor: not-allowed; }

/* ---- 单选（type 2）：对齐魔方 area 模板 —— 竖排圆形单选，长文案自动换行 ---- */
.mdcfg .mdcfg-radios {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 24px;
}
.mdcfg .mdcfg-radio {
  position: relative;
  display: flex; align-items: flex-start; gap: 8px;
  max-width: 100%;
  font-size: 14px; line-height: 1.6;
  color: #1f2b3d;
  cursor: pointer;
  user-select: none;
}
.mdcfg .mdcfg-radio input {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0; margin: 0;
}
.mdcfg .mdcfg-radio__dot {
  position: relative;
  width: 16px; height: 16px; flex: 0 0 auto;
  margin-top: 3px;
  background: #fff;
  border: 1px solid #c9d0dc;
  border-radius: 4px;
  transition: border-color .15s ease;
}
.mdcfg .mdcfg-radio:hover .mdcfg-radio__dot { border-color: var(--primary); }
.mdcfg .mdcfg-radio input:checked + .mdcfg-radio__dot { border-color: var(--primary); }
.mdcfg .mdcfg-radio input:checked + .mdcfg-radio__dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 2px;
  background: var(--primary);
}
.mdcfg .mdcfg-radio input:focus-visible + .mdcfg-radio__dot {
  outline: 2px solid rgba(22, 93, 255, .22);
  outline-offset: 1px;
}
.mdcfg .mdcfg-radio input:disabled + .mdcfg-radio__dot { background: #f4f6fa; border-color: #e2e7f0; }
.mdcfg .mdcfg-radio.is-disabled { color: #a9b2c2; cursor: not-allowed; }
.mdcfg .mdcfg-radio__text { flex: 1 1 auto; min-width: 0; word-break: break-word; }

/* ---- 手机端（配置页）：隐藏左侧分类栏，改顶部「返回 | 分组 | 清单」+ 底部选择面板 ---- */
@media (max-width: 767px) {
  .mdcfg { padding-top: 61px; }
  .mdcfg .shop-side { display: none; }
  /* 手机端结算页布局：
     1) 整页滚动（页面本身滚，卡片内不再单独滚动）
     2) 结算条 position:fixed; bottom:0，始终贴在视口底部
     3) 正文区按结算条实际高度留底部留白（--mdy-foot-h），
        这样滚到底时内容不会被结算条压住 */
  .mdcfg {
    height: auto; min-height: 100vh; overflow: visible;
    padding-bottom: 0;
  }
  .mdcfg-wrap { display: block; }
  .mdcfg-layout { display: block; }
  .mdcfg-main { display: block; overflow: visible; padding-bottom: 0; }
  .mdcfg-card { overflow: visible; height: auto; }
  /* 结算条的占位留白放在卡片内部：白色卡片一直画到页面底部，不会露出灰色页面底 */
  .mdcfg-card__body {
    overflow: visible; flex: none; height: auto;
    padding-bottom: calc(var(--mdy-foot-h, 200px) + 24px);
  }
  /* 结算条层级要高于下拉面板（面板最高 120 / 打开的 OS 卡片 100），
     否则面板会盖住结算条，结算条被遮住就点不到「加入购物车」了 */
  .mdcfg-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; }

  /* 手机端通栏：去掉左右内边距和卡片圆角，卡片铺满屏幕 */
  .mdcfg-wrap { padding: 0; }
  .mdcfg-layout { gap: 0; }
  .mdcfg-card { border-left: 0; border-right: 0; border-radius: 0; }
  .mdcfg-bottom { border-radius: 0; }
  /* 登录提示和卡片头的「购物车清单」在手机上不显示（顶部条已有清单入口） */
  .mdcfg .shop-loginhint { display: none; }
  .mdcfg .mdcfg-card__extra { display: none; }
  /* 顶部条完全复用产品列表页的样式（白底通栏 / 返回 | 分组 | 清单），吸顶在 header 下方
     （对应参考站 .navtop-standingPosition { position:fixed; top:62px }） */
  .mdcfg .shop-region {
    position: sticky;
    top: var(--hdr-h, 61px);
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;   /* 容器已 0 padding，这里不能再用负边距，否则页面被撑宽 */
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #eef1f5;
    font-size: 13px;
  }
  .mdcfg .shop-region__name,
  .mdcfg .shop-region__desc { display: none; }
  .mdcfg .shop-region__back { justify-self: start; font-size: 13px; white-space: nowrap; }
  .mdcfg .shop-region .shop-cats-m { justify-self: center; display: flex; min-width: 0; }
  .mdcfg .shop-region__cart { display: inline-flex; justify-self: end; font-size: 13px; color: #4e5969; text-decoration: none; white-space: nowrap; }
  .mdcfg .shop-region__cart em { font-style: normal; color: #f5a623; }
  /* 手机端「产品型号」行：标签左、当前型号右；下面一条线 → 提示 → 再一条线 */
  .mdcfg .mdcfg-row--models {
    display: block;
    padding: 0;
    margin-bottom: 16px;   /* 和下面第一个配置项拉开 */
    border: 0;
  }
  .mdcfg .mdcfg-model-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid #eef1f5;
  }
  .mdcfg .mdcfg-row--models .mdcfg-label {
    min-width: 0; max-width: none; width: auto; line-height: 22px;
    font-weight: 700;
  }
  .mdcfg .mdcfg-row--models > .mdcfg-field {
    display: block; width: 100%;
    background: transparent;   /* 去掉灰底容器 */
    border-radius: 0;
    padding: 0;
  }
  .mdcfg .mdcfg-row--models .mdcfg-models { display: none; }
  .mdcfg .mdcfg-row--models .mdcfg-models__tip {
    display: flex;
    margin: 0;
    padding: 12px 16px 12px 0;
    background: transparent;
    border-bottom: 1px solid #eef1f5;
  }
  .mdcfg .mdcfg-model-current {
    display: inline-flex; align-items: center; gap: 5px;
    min-width: 0; max-width: 72%;
    padding: 0; background: transparent; border: 0;
    font-family: inherit; font-size: 14px; font-weight: 400; line-height: 22px;
    text-align: right; cursor: pointer;
    outline: none; -webkit-tap-highlight-color: transparent;
  }
  .mdcfg .mdcfg-model-current span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 「›」箭头和左侧型号名同字号（14px），原来继承了行高但视觉偏小 */
  /* 「›」原来用字符，14px 下视觉太小；改用独立 SVG（assets/img/icons/chevron-right.svg），
     通过 mask + currentColor 上色，尺寸和颜色都由 CSS 控制 */
  .mdcfg .mdcfg-model-current i {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px; height: 16px;
    font-style: normal;
    background-color: #b8bfcc;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
    -webkit-mask-image: url("img/icons/chevron-right.svg");
    mask-image: url("img/icons/chevron-right.svg");
  }
  .shop-picker__body--single { grid-template-columns: 1fr; }
  .shop-picker__item.is-disabled { color: #c3cad8; pointer-events: none; }

  /* 手机端：悬停面板隐藏（明细内容进底部弹层），
     它是绝对定位的，留在文档里会把页面横向撑宽 */
  .mdcfg .mdcfg-details__panel { display: none; }
  /* 明细内容已经搬到弹层里，这里把原面板彻底移出文档流，
     否则它（min-width:400px）会把页面横向撑宽，手机上整页被放大 */
  .mdcfg .mdcfg-details { font-size: 0; }

  /* 手机端：费用明细 = 底部弹层（参考站的样式） */
  .md-sheet__mask {
    position: fixed; inset: 0;
    background: rgba(17, 24, 39, .45);
    z-index: 300;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .md-sheet__mask.is-in { opacity: 1; }
  .md-sheet__mask.is-closing { opacity: 0; }

  .md-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 301;
    display: flex; flex-direction: column;
    max-height: 72vh;
    background: #fff;
    border-radius: 4px 4px 0 0;
    transform: translateY(100%);
    transition: transform .22s ease;
  }
  .md-sheet.is-in { transform: translateY(0); }
  .md-sheet.is-closing { transform: translateY(100%); }

  .md-sheet__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    /* 标题下面不要那条分割线 */
    border-bottom: 0;
  }
  .md-sheet__title { font-size: 15px; font-weight: 600; color: #1f2b3d; }
  .md-sheet__close {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; background: transparent; border: 0;
    color: #9aa4b4; cursor: pointer;
  }
  .md-sheet__body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 上边距收紧，让表格靠近标题（参考站那样） */
    padding: 0 16px 16px;
  }
  .md-sheet__body .mdcfg-details__body { margin: 0; }
  .md-sheet__body table { margin-top: 0; }
  .md-sheet__body .mdcfg-details__body { overflow: visible; }
  .md-sheet__body table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  /* 每格单行，超出用省略号（参考站的做法） */
  .md-sheet__body table * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .md-sheet__body th,
  .md-sheet__body td {
    padding: 11px 10px; font-size: 13px; text-align: left; vertical-align: middle;
  }
  .md-sheet__body th { background: #f4f8ff; color: #1a1a1a; font-weight: 500; }
  .md-sheet__body tr { border-bottom: 1px solid #edeef3; }
  /* 手机端只留三列：配置名称 / 配置详情 / 折后价 */
  .md-sheet__body .md-detail__orig,
  .md-sheet__body .md-detail__saving { display: none; }
  /* 列宽写在表头 th 上（fixed 布局以第一行为准）：
     「配置详情」auto，占掉被隐藏的「折扣优惠」那一格，不留空档 */
  .md-sheet__body thead th.md-detail__name { width: 32%; }
  .md-sheet__body thead th.md-detail__val { width: auto; }
  .md-sheet__body thead th.md-detail__sale { width: 22%; text-align: left; }
  .md-sheet__body td.md-detail__sale { text-align: left; }
  /* 配色和电脑端一致：价格 / 客户折扣价绿色，总价红色 */
  .md-sheet__body .md-detail__priceVal,
  .md-sheet__body .md-detail__discountVal { color: #22c55e; font-weight: 500; }
  .md-sheet__body .md-detail__totalVal { color: rgb(255, 77, 79); font-weight: 500; }
  /* 手机端：结算条里「加入购物车」放左边，「费用明细」放右边 */
  /* 手机端结算条：照参考站排成三行（合计 / 备注 / 按钮），
     备注和按钮之间只留 8px，不再出现一条很宽的空档 */
  .mdcfg .mdcfg-bottom {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    min-height: 0;
  }
  .mdcfg .mdcfg-bottom__total { margin-bottom: 0; }
  .mdcfg .mdcfg-bottom__note { margin: 0; }
  .mdcfg .mdcfg-bottom__right { flex-direction: row; gap: 16px; }
  .mdcfg .mdcfg-details { order: 2; }
  .mdcfg .mdcfg-bottom__btn { order: 1; }

  /* 手机端：触屏没有 hover，is-hover 就是「点选中的那张卡」，
     画成和 is-on 一样的选中态（点别处会取消） */
  .mdcfg .mdcfg-os.is-hover { border-color: var(--primary); }
  .mdcfg .mdcfg-os.is-hover .mdcfg-os__name { color: var(--primary); }
  .mdcfg .mdcfg-os.is-hover .mdcfg-os__icon img { filter: none; opacity: 1; }
  .mdcfg .mdcfg-os.is-hover .mdcfg-os__ver { background: #fff; border-top-color: #dbe6ff; }
  .mdcfg .mdcfg-os.is-hover .mdcfg-os__ver .mdcfg-dd__display { color: #1f2b3d; }

  /* 费用明细弹层：不能撑宽页面，表格自己横向滚 */
  .mdcfg .mdcfg-details__panel { min-width: 0; max-width: calc(100vw - 24px); }
  .mdcfg .mdcfg-details__body { overflow-x: auto; }

  /* 型号面板：取消 / 标题 / 确定 + 单列纯文字列表 */
  .shop-picker__head--actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .shop-picker__cancel,
  .shop-picker__ok {
    padding: 0; background: transparent; border: 0;
    font-family: inherit; font-size: 14px; line-height: 22px;
    cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
  }
  .shop-picker__cancel { justify-self: start; color: #8792a8; }
  .shop-picker__ok { justify-self: end; color: #165dff; }
  .shop-picker__body--single { grid-template-columns: 1fr; }
  .shop-picker__body--single .shop-picker__item {
    margin: 2px 12px;
    padding: 12px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 14px; color: #1f2b3d;
  }
  .shop-picker__body--single .shop-picker__item.is-on {
    background: #f2f7ff;
    border-color: #c9dcff;
    color: #165dff;
  }
  .shop-picker__body--single .shop-picker__item.is-disabled { color: #c3cad8; }

  /* 手机端：卡片头整条隐藏，不占位 */
  .mdcfg .mdcfg-card__head { display: none; }

}

/* ===== 手机端：问号提示气泡改为自动换行，不出屏 ===== */
@media (max-width: 767.98px) {
    .mdcfg .mdcfg-label__help::after {
        /* 原来 nowrap + 右侧展开，长文案会顶出屏幕；改成下方展开并限制宽度 */
        left: 0;
        right: auto;
        top: calc(100% + 8px);
        transform: none;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        /* 关键：绝对定位元素默认会被 14px 的父级挤成一条，
           用 max-content 让它先按内容宽展开，再用 max-width 收住换行 */
        width: max-content;
        max-width: min(320px, calc(100vw - 40px));
        line-height: 1.6;
        font-size: 13px;
    }
    /* 下方展开时原来的右侧小箭头位置不对，直接隐藏 */
    .mdcfg .mdcfg-label__help::before { display: none; }
    /* 触屏没有 hover：点一下也能看到提示 */
    .mdcfg .mdcfg-label__help:active::after,
    .mdcfg .mdcfg-label__help:focus::after { opacity: 1; visibility: visible; }
}