/* ============================================================
   产品配置页 proconfig.css
   本页外壳为官网主题、未加载 Bootstrap，故所有布局/控件样式
   均在此自包含实现（不依赖 Bootstrap 的 row/col/btn/form-control）。
   目标：对齐专业版配置页——左侧标签 + 右侧内容、
   产品型号灰底面板、操作系统卡片（灰头 + 主色选中）、底部费用条。
   ============================================================ */
/* 本页文档级原生滚动条隐藏：左栏与右列都内部滚动，文档高度锁定为一屏，不出现右侧滚动条。 */
html{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar{ display:none; width:0; height:0; }
:root{
  --pc-main: var(--Original, #165DFF);
  --pc-main-l: #e0eeff;
  --pc-bg: #f5f7fa;
  --pc-border: #e3e6ec;
  --pc-text: #1d2129;
  --pc-label: #4e5969;
  --pc-sub: #86909c;
  --pc-radius: 10px;
  --pc-label-w: 74px;
  /* 配置页左栏（分组导航）几何：比列表页的全局 --nav-width(后台主题设置 nav_width，
     当前 250) 更宽，对齐参考站 cart/server 的 .sky-cart-sidebar
     （static/css/module.css:234 `width:var(--sidebar-width)`，其 --sidebar-width 取主题的
     导航宽度设置；子项内边距 0 20px 0 26px + 右侧 tagline 需要更宽的横向空间）。
     想再宽/窄就改这一个数。 */
  --pc-nav-w: 300px;
  --pc-nav-gap: 16px;   /* 左栏与右侧配置卡片的列间距（用户要求把右侧加宽，故由 32 收到 16） */
  /* 分类栏下方留白：模板是 inline style="margin-top:24px"（topbar-categories.tpl:475），
     这里收到 6px，整块内容（左栏 + 右侧卡片）一起上提，左栏更贴近分类栏。 */
  --pc-nav-lift: 18px;
  /* 注意：topbar-categories.tpl 的内联 <style>:root 会把 --nav-width/--nav-offset 设成
     主题设置里的 nav_width(当前 250)/nav_width+32，而 custom.css:87 的
     `.products-nav{width:var(--nav-width)}`、custom.css:234 的
     `.products-nav>ul li.active{width:var(--nav-width)}` 都吃这个变量。
     本文件在第 6 行 include 之后加载（configureproduct.tpl:6/7），同特异性后者胜，
     所以这里重定义即可让左栏及其内部选中项一起变宽，无需逐条加 !important。 */
  --nav-width: var(--pc-nav-w);
  --nav-offset: calc(var(--pc-nav-w) + var(--pc-nav-gap));
}

/* ===== 左侧产品分组栏 =====
   复用产品列表页 topbar-categories 输出的 .products-wrap 网格：
   左列 .products-nav（分组导航）、右列 .allocation-wrap（配置卡片）。
   本页专用（proconfig.css 只在配置页加载），不影响列表页。 */
.products-wrap{
  display:grid;
  grid-template-columns:var(--pc-nav-w) 1fr;
  column-gap:var(--pc-nav-gap);
  align-items:start;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
  padding-left:12px;
  padding-right:12px;
}
/* 左栏：搜索框固定在栏顶，分组列表在栏内上下滚动
   （对齐参考主题 server 的 .sky-cart-sidebar > .sky-cart-menu 做法）
   ⚠ 必须显式恢复滚动：unified.css:145 把 .products-nav 的 overflow 改成了 visible，
   分组一多（如 22 个）列表就会溢出到卡片外、被视口裁掉并撑长整页。
   栏高由 topbar-categories 的 syncNavHeight() 写入 inline max-height(视口高-102)。 */
.products-wrap > .products-nav{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  margin-bottom:0;    /* 去掉 custom.css 为浮动布局留的 50px，否则会把整页撑出滚动条 */
  overflow:visible;   /* 不裁剪，保证搜索建议下拉能溢出显示 */
}
.products-wrap > .products-nav > .products-search{flex:0 0 auto;}  /* 搜索框不参与压缩 */
.products-wrap > .products-nav > ul{
  flex:1 1 auto;
  min-height:0;       /* 允许在受限高度内收缩，从而触发内部滚动 */
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#c9cdd4 transparent;
}
.products-wrap > .products-nav > ul::-webkit-scrollbar{width:4px;}
.products-wrap > .products-nav > ul::-webkit-scrollbar-track{background:transparent;}
.products-wrap > .products-nav > ul::-webkit-scrollbar-thumb{
  background:#c9cdd4;border-radius:4px;
}
.products-wrap > .products-nav > ul::-webkit-scrollbar-thumb:hover{
  background:#86909c;
}
/* 配置页其余滚动区域（右列主体、OS 版本下拉、价格明细）统一用与左栏同款的灰色滚动条，
   替换原先偏深的自带滚动条 */
.allocation-mian,
.os-card .version-dropdown .version-list,
.price-breakdown{
  scrollbar-width:thin;
  scrollbar-color:#c9cdd4 transparent;
}
.allocation-mian::-webkit-scrollbar,
.os-card .version-dropdown .version-list::-webkit-scrollbar,
.price-breakdown::-webkit-scrollbar{width:8px;}
.allocation-mian::-webkit-scrollbar-track,
.os-card .version-dropdown .version-list::-webkit-scrollbar-track,
.price-breakdown::-webkit-scrollbar-track{background:transparent;}
.allocation-mian::-webkit-scrollbar-thumb,
.os-card .version-dropdown .version-list::-webkit-scrollbar-thumb,
.price-breakdown::-webkit-scrollbar-thumb{
  background:#c9cdd4;border-radius:4px;
}
.allocation-mian::-webkit-scrollbar-thumb:hover,
.os-card .version-dropdown .version-list::-webkit-scrollbar-thumb:hover,
.price-breakdown::-webkit-scrollbar-thumb:hover{
  background:#86909c;
}
/* ⚠ 上提只能整体做：custom.css:71 的 `.products-gray-wrap{overflow-x:hidden}`
   按 CSS 规范会让另一轴的计算值变成 auto（即变成裁剪容器），
   所以给 .products-nav 加负 margin 推出的那一段会被 wrap 裁掉
   —— 实测表现为搜索框顶部被切掉一条。改成收窄 wrap 的 inline margin-top。 */
.products-gray-wrap{margin-top:calc(24px - var(--pc-nav-lift)) !important;}
/* 底部合规提示条在 unified.css / topbar-categories 里是按全局 --nav-offset
   (250+32) 定位的，这里按配置页左栏宽度重算，否则会比右侧卡片左移 50px */
.products-wrap .compliance-notice{
  width:calc(100% - (var(--pc-nav-w) + var(--pc-nav-gap))) !important;
  margin-left:calc(var(--pc-nav-w) + var(--pc-nav-gap)) !important;
}
.products-wrap > #output{display:none;}
.allocation-wrap{
  grid-column:2;
  grid-row:1;
  min-width:0;
  /* 右侧整列与左栏（产品分组）等高：高度由 proconfig.js 写入（与左栏 syncNavHeight 同源），
     内容超出时在 .allocation-mian 内滚动 */
  display:flex;
  flex-direction:column;
}
/* 表单撑满右列，配置卡片再撑满表单 */
.allocation-wrap > .configoption_form{
  flex:1 1 auto;
  min-height:0;
  margin:0 !important;      /* 覆盖 custom.css:418 的 margin-top:50px */
  display:flex;
  flex-direction:column;
}
/* 移动端：左栏隐藏（改用浮动菜单），恢复单列堆叠 ——
   必须重新声明，否则会盖掉 unified.css 里 @media 的 display:block */
@media all and (max-width:768px){
  .products-wrap{display:block;padding-left:10px;padding-right:10px;}
  /* 移动端不做等高：右列回到普通块级流（高度由内容决定） */
  .allocation-wrap{width:100%;display:block;}
  .allocation-wrap > .configoption_form{display:block;}
}

/* ===== 外层 allocation 卡片 ===== */
.allocation-card{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;       /* 撑满右列（高度由 proconfig.js 与左栏对齐） */
  min-height:0;
  background:#fff;
  border:1px solid var(--pc-border);
  border-radius:var(--pc-radius);
  box-shadow:0 4px 20px rgba(22,93,255,.06);
  margin-bottom:0;
}

/* ===== 主体 ===== */
.allocation-mian{
  flex:1 1 auto;
  min-height:0;          /* 允许在等高卡片内收缩，超出部分自身滚动 */
  overflow-y:auto;
  overflow-x:hidden;
  padding:26px 32px 30px;
  background:#fff;
}

/* ---- 每一行：左侧标签 + 右侧内容（替代 Bootstrap row/col）---- */
.allocation-mian .form-group.row{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:16px;
  margin:0 0 22px;
}
.allocation-mian .form-group.row > label.col-md-2{
  flex:0 0 var(--pc-label-w);
  max-width:var(--pc-label-w);
  width:var(--pc-label-w);
  margin:0;
  padding:0;
  font-size:14px;
  font-weight:400;
  color:var(--pc-label);
  line-height:34px;
  white-space:nowrap;
}
.allocation-mian .form-group.row > .col-md-10{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  max-width:100%;
  padding:0;
}
.allocation-mian .form-group.row > .col-md-3,
.allocation-mian .form-group.row > .col-8,
.allocation-mian .form-group.row > .col-1{
  flex:0 0 auto;
  width:auto;
  max-width:none;
  padding:0;
}
.allocation-mian .form-group.row > .d-inline-flex{flex:0 0 auto;}

/* ===== 数值滑块行（系统盘 / 数据盘 / 带宽 / IP数量；option_type 4/7/9/11/14~19）=====
   标记见 configureproduct.tpl。两个原生 input 必须是【兄弟节点】：
   /themes/cart/default/assets/js/configureproduct.js 里
   rangeChange() 取 siblings(".configoption_range_val")、
   numberKeyup2() 取 siblings(".configoption_range")，
   一旦把其中任何一个包进别的容器，取值就会变空（数值框被清空）。
   因此这里全部平铺成 .pc-range 的直接子元素：
   [滑块][−][数值][单位][+][min/max 文案] ＋ JS 插入的 .range_none 禁用段标记
   视觉对齐参考站 themes/cart/server/config/option.tpl 的
   .sky-config-slider-container 那一套（灰底实心进度条 + progress-toolbar）。 */
.allocation-mian .pc-range{
  position:relative;            /* .range_none（绝对定位）的参照 */
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  min-height:34px;
}
/* 轨道：浅灰底 + 已完成段实心主色；比例由 proconfig.js 写 --pc-pct */
.allocation-mian .pc-range > input.configoption_range{
  flex:0 0 auto;
  width:72% !important;
  height:7px;
  margin:0 20px 0 0 !important;
  padding:0;
  border:0;
  border-radius:0;
  background-color:#F1F3F8;
  /* 参考站 .sky-config-progress 是纯色硬边，不是渐变，故此处做硬断点 */
  background-image:linear-gradient(to right,var(--pc-main) 0,var(--pc-main) var(--pc-pct,0%),#F1F3F8 var(--pc-pct,0%),#F1F3F8 100%) !important;
  background-repeat:no-repeat;
  background-position:0 50%;
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  cursor:pointer;
}
.allocation-mian .pc-range > input.configoption_range::-webkit-slider-runnable-track{
  height:7px;
  border:0;
  border-radius:0;
  background-color:transparent;
  background-image:linear-gradient(to right,var(--pc-main) 0,var(--pc-main) var(--pc-pct,0%),#F1F3F8 var(--pc-pct,0%),#F1F3F8 100%);
}
/* 把手：18×22 白色圆角块 + 3 道灰色抓取纹（对应参考站 static/images/slider_handle.png）。
   ⚠ unified.css:177 写了 `input[type="range"]::-webkit-slider-thumb{border:4px solid var(--Original)!important}`
   且 :446 又补了 border-color!important，会把把手刷成"粗蓝框方框"（用户报的就是这个），
   故这里 border 必须带 !important 才压得住（特异性 (0,3,1) 高于对方的 (0,1,1)）。 */
.allocation-mian .pc-range > input.configoption_range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:22px;
  margin-top:-8px;              /* 相对 7px 轨道垂直居中 */
  border:0 !important;
  border-radius:4px;
  background-color:#fff;
  background-image:linear-gradient(to right,
    transparent 0 7px,#c9ced9 7px 8px,
    transparent 8px 9px,#c9ced9 9px 10px,
    transparent 10px 11px,#c9ced9 11px 12px,
    transparent 12px 100%);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100% 10px;    /* 抓取纹只占中间 10px 高，与参考站那张图一致 */
  box-shadow:0 2px 4px rgba(14,30,37,.12),0 2px 16px rgba(14,30,37,.03);
  cursor:pointer;
}
/* FireFox */
.allocation-mian .pc-range > input.configoption_range::-moz-range-track{
  height:7px;border:0;border-radius:0;background:#F1F3F8;
}
.allocation-mian .pc-range > input.configoption_range::-moz-range-progress{
  height:7px;border:0;border-radius:0;background:var(--pc-main);
}
.allocation-mian .pc-range > input.configoption_range::-moz-range-thumb{
  box-sizing:border-box;
  width:18px;height:22px;border:0 !important;border-radius:4px;background:#fff;
  background-image:linear-gradient(to right,
    transparent 0 7px,#c9ced9 7px 8px,
    transparent 8px 9px,#c9ced9 9px 10px,
    transparent 10px 11px,#c9ced9 11px 12px,
    transparent 12px 100%);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100% 10px;
  box-shadow:0 2px 4px rgba(14,30,37,.12);cursor:pointer;
}
/* −/+ 步进器与新值框、单位拼成一个浅灰组（参考站 progress-toolbar 观感） */
.allocation-mian .pc-range > .sky-config-decrease,
.allocation-mian .pc-range > .sky-config-increase{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:34px;
  background:var(--pc-bg);
  color:#9aa3b2;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition:background-color .25s,color .25s;
}
.allocation-mian .pc-range > .sky-config-decrease{border-radius:6px 0 0 6px;}
.allocation-mian .pc-range > .sky-config-increase{border-radius:0 6px 6px 0;}
.allocation-mian .pc-range > .sky-config-decrease:hover,
.allocation-mian .pc-range > .sky-config-increase:hover{background:var(--pc-main);color:#fff;}
.allocation-mian .pc-range > .pc-value-input{
  flex:0 0 auto;
  width:54px;
  height:34px;
  padding:0;
  border:0 !important;
  border-radius:0 !important;
  background:var(--pc-bg) !important;
  color:var(--pc-text);
  font-size:14px;
  font-weight:600;
  text-align:center;
  box-shadow:none !important;
}
.allocation-mian .pc-range > .pc-value-input:focus{
  background:#fff !important;
  box-shadow:inset 0 0 0 1px var(--pc-main) !important;
  outline:none;
}
.allocation-mian .pc-range > .pc-unit{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  height:34px;
  padding:0 10px 0 0;
  background:var(--pc-bg);
  color:var(--pc-sub);
  font-size:13px;
  white-space:nowrap;
  user-select:none;
}
.allocation-mian .pc-range > .sky-config-value-info{
  flex:0 0 auto;
  width:72%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 20px 0 0;
  font-size:12px;
  line-height:16px;
  color:var(--pc-sub);
  pointer-events:none;
}
/* JS 插入的禁用段标记：固定在滑块轨道那一行的垂直中心 */
.allocation-mian .pc-range > .range_none{top:15px;}
/* 窄屏：滑块独占一行，min/max 文案紧跟其后，步进器排最后 */
@media all and (max-width:768px){
  .allocation-mian .pc-range > input.configoption_range{width:100% !important;margin:4px 0 12px !important;}
  .allocation-mian .pc-range > input.configoption_range,
  .allocation-mian .pc-range > .range_none{order:1;}
  .allocation-mian .pc-range > .sky-config-value-info{order:2;width:100%;margin:0 0 10px;}
  .allocation-mian .pc-range > .sky-config-decrease,
  .allocation-mian .pc-range > .pc-value-input,
  .allocation-mian .pc-range > .pc-unit,
  .allocation-mian .pc-range > .sky-config-increase{order:3;}
  .allocation-mian .pc-range > .range_none{top:0;}
}

/* ===== 通用按钮组（数据中心 / CPU / 内存 / 周期）=====
   作用域用 [data-toggle="buttons"] 而不是 .btn-group ：模板里三种容器 class 并不统一——
   CPU/内存/周期是 `.btn-group.btn-group-toggle`，而【数据中心(option_type 12)只有
   `.btn-group-toggle`，没有 btn-group】（configureproduct.tpl:557）。
   若按 .btn-group 写，数据中心会整条规则失效：退回 Bootstrap 的 .btn-primary
   （蓝底白字/3.5px 圆角/6.58px 内边距），且内部原生 radio 不会被隐藏（13x13 可见）。

   ⚠⚠ 所有 .btn 的背景/边框/文字色都必须带 !important：unified.css:416~425 为"回退主题
   cart/default"统一强调色写了 `.btn-primary, .btn-primary:not(:disabled):not(.disabled):hover…{
   background-color:var(--Original)!important; color:#fff!important; }`，而模板里每个
   label 都带 Bootstrap 的 `btn-primary` 类（configureproduct.tpl:276/305，JS appendLinkAge
   生成的 CPU/内存子项也是 `btn btn-primary btn-sm`）→ 不加 !important 会被它整组刷成全蓝，
   表现为"每个选项都像被选中"（用户报的 bug）。选中态 (0,4,1) > 基础态 (0,3,0)，写在后面即可压住。

   外观对齐参考站 static/css/config.css:196~221 的 .sky-btn-group / .sky-config-btn：
   浅灰底(#F1F3F8) + 方角(radius 0) + 1px 细缝；hover #f7f9fd 不变字色；
   选中实心主色 + 白字。带国旗的数据中心项按参考站 .dataCenter2：白底 + #eff2f7 描边，
   选中只换主色描边与主色文字（不实心填充）。 */
.allocation-mian [data-toggle="buttons"]{
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px 1px;
  vertical-align:top;
}
/* 带国旗的组（数据中心）缝大一点，别贴成一条 */
.allocation-mian [data-toggle="buttons"]:has(img){
  gap:10px;
}
.allocation-mian [data-toggle="buttons"] > .btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
  height:34px;
  /* 覆盖 .mr-1/.mr-2 与 .btn-group>.btn+.btn{margin-left:-1px} */
  margin:0 !important;
  padding:0 24px;
  border:1px solid #F1F3F8 !important;
  /* 方角：参考站是整条分段控件观感；同时覆盖 .btn-group 首/尾去圆角 */
  border-radius:0 !important;
  background:#F1F3F8 !important;
  color:var(--pc-label) !important;
  font-size:14px;
  font-weight:400;
  line-height:1;
  /* 本页外壳是官网主题、没有 Bootstrap 的 .btn{white-space:nowrap}，
     不补上的话"半年"这种两个字会被折成两行 */
  white-space:nowrap;
  cursor:pointer;
  transition:all .2s;
  /* 关键：清掉 Bootstrap 选中态阴影
     rgba(0,0,0,.12) 0 2px 3px, rgb(227,233,255) 0 -2px inset
     其中 0 2px 3px 的外阴影就是"底下多出来的那圈框架" */
  box-shadow:none !important;
}
.allocation-mian [data-toggle="buttons"] > .btn:hover{
  background:#f7f9fd !important;
  border-color:#f7f9fd !important;
  color:var(--pc-label) !important;
  box-shadow:none !important;
}
/* 隐藏原生 radio / checkbox */
.allocation-mian [data-toggle="buttons"] > .btn > input[type="radio"],
.allocation-mian [data-toggle="buttons"] > .btn > input[type="checkbox"]{
  position:absolute;
  width:0;
  height:0;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.allocation-mian [data-toggle="buttons"] > .btn > img{
  height:18px;
  width:auto;
  margin:0 !important;
  border-radius:2px;
}
/* 选中态：实心主色 + 白字（:has(input:checked) 兜住 JS 注入但未同步 .active 的情况） */
.allocation-mian [data-toggle="buttons"] > .btn:has(input:checked),
.allocation-mian [data-toggle="buttons"] > .btn.active{
  border-color:var(--pc-main) !important;
  background:var(--pc-main) !important;
  color:#fff !important;
  box-shadow:none !important;
}
/* 带图标（国旗）的数据中心项：白底 + #eff2f7 浅描边（参考站 .dataCenter2）；
   特异性须 >= 上面蓝色选中态、且书写在其后，才能盖住同特异性的 .active 规则 */
.allocation-mian [data-toggle="buttons"] > .btn:has(img){
  background:#fff !important;
  border-color:#eff2f7 !important;
  color:var(--pc-text) !important;
}
.allocation-mian [data-toggle="buttons"] > .btn:has(img):hover{
  background:#f7f9fd !important;
  border-color:#eff2f7 !important;
}
/* 选中：只换主色描边 + 主色文字（参考站 .dataCenter2.active，不实心填充） */
.allocation-mian [data-toggle="buttons"] > .btn:has(img).active,
.allocation-mian [data-toggle="buttons"] > .btn:has(img):has(input:checked){
  border-color:var(--pc-main) !important;
  background:#fff !important;
  color:var(--pc-main) !important;
  box-shadow:none !important;
}
/* 联动禁用（configureproduct.js 给 label 加 .disabled / 给 radio 加 disabled）：
   保持浅灰底、字变浅、不可点。JS 同时会 removeClass("active")+prop("checked",false)，
   所以不会跟上面的选中态打架 */
.allocation-mian [data-toggle="buttons"] > .btn.disabled,
.allocation-mian [data-toggle="buttons"] > .btn:has(input:disabled){
  background:#F1F3F8 !important;
  border-color:#F1F3F8 !important;
  color:#c9cdd4 !important;
  cursor:not-allowed;
  box-shadow:none !important;
}

/* ===== 表单控件 / 下拉 ===== */
.allocation-mian input.form-control,
.allocation-mian textarea.form-control{
  box-sizing:border-box;
  height:40px;
  padding:0 12px;
  border:1px solid var(--pc-border);
  border-radius:6px;
  font-size:14px;
  color:var(--pc-text);
  background:#fff;
}
.allocation-mian input.form-control:focus,
.allocation-mian textarea.form-control:focus{
  outline:none;
  border-color:var(--pc-main);
}
/* 兼容 bootstrap-select：隐藏它生成的按钮与菜单，直接显示原生 select 作为下拉控件。
   ⚠ bootstrap-select 自身样式对 select 做了
     position:absolute!important; left:50%; transform:translateX(-50%);
     width:.5px!important; height:100%!important; opacity:0!important;
   只覆盖 display/position/width 是不够的——opacity:0 会让"网络类型"整行空白，
   必须一并把 opacity/visibility/transform/left/bottom/z-index 全部改回。 */
.allocation-mian .bootstrap-select{
  display:block !important;
  position:relative !important;   /* 供 ::after 画下拉三角 */
  /* 本页 shell 是官网主题，Bootstrap 栅格未生效，.col-md-3 会塌成"内容宽"（约 101px），
     故这里给 min-width 托底：既保证 25% 列宽观感（参考站 .sky-md-25），
     又能在选项文字更长（如自定义字段）时自动放宽 */
  width:auto !important;
  min-width:250px;
  max-width:100% !important;
  height:34px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  vertical-align:middle;
}
/* 数据中心(option_type 12)多区域时，select 自身带 .col-md-3 且被包在 .col-md-10 里
   （bootstrap-select 会把 select 的 class 抄到 wrapper 上），同样只占 25% 列宽 */
.allocation-mian .bootstrap-select.col-md-3{max-width:25% !important;}
/* 参考站 config.css 的 `.bootstrap-select::after`：灰色实心小三角（不是描边箭头） */
.allocation-mian .bootstrap-select::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  margin-top:-2px;
  width:0;
  height:0;
  border-top:5px solid #b9bdc5;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  pointer-events:none;
}
.allocation-mian .bootstrap-select > .dropdown-toggle,
.allocation-mian .bootstrap-select .dropdown-menu{
  display:none !important;
}
.allocation-mian .bootstrap-select > select.selectpicker{
  display:block !important;
  position:static !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:100% !important;
  min-width:0;
  max-width:100%;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  z-index:auto !important;
  clip:auto !important;
  box-sizing:border-box;
  /* 参考站外观：无边框 + 浅灰底 + 14px 文字，箭头改由 wrapper::after 画灰色三角 */
  height:34px !important;
  padding:0 30px 0 14px !important;
  border:0 !important;
  border-radius:6px !important;
  background-color:var(--pc-bg) !important;
  background-image:none !important;
  color:var(--pc-text) !important;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:none !important;
  transition:background-color .25s, box-shadow .25s;
}
.allocation-mian .bootstrap-select > select.selectpicker:hover{
  background-color:#eef1f7 !important;
}
.allocation-mian .bootstrap-select > select.selectpicker:focus{
  background-color:#fff !important;
  box-shadow:inset 0 0 0 1px var(--pc-main) !important;
  outline:none;
}
/* 原生普通 select（非 selectpicker） */
.allocation-mian select.form-control:not(.selectpicker){
  box-sizing:border-box;
  height:40px;
  padding:0 12px;
  border:1px solid var(--pc-border);
  border-radius:6px;
  font-size:14px;
  color:var(--pc-text);
  background:#fff;
}

/* 校验提示 */
.allocation-mian .error-tip{color:#f46a6a;margin:0;padding:0;line-height:40px;display:none;}

/* ===== 登录凭据：主机名 / 主机密码 =====
   参考站 cart/server 的 config/hostInformation.tpl + static/css/config.css：
   输入框内左侧图标、密码行右侧「眼睛」开关 + 主色描边「随机生成」按钮。
   ⚠ 本页没有加载图标字体（原来的 bx-show-alt / fa-dice 都是空标签，只能靠 ::before
   写"显示/随机"文字），所以图标改成 CSS 内联 SVG(data URI) 作为输入框的内联背景：
   HTML 结构基本不动、零字体依赖。
   特异性必须写成 input.form-control.pc-*（0,3,1），才压得住上面 499 行的
   `.allocation-mian input.form-control{background:#fff;padding:0 12px}`（0,2,1）。 */
.allocation-mian input.form-control.pc-input-host,
.allocation-mian input.form-control.pc-input-pwd{
  width:220px;                    /* 固定宽度：主机名/主机密码两行对齐，右侧还能排下眼睛+按钮 */
  padding-left:36px;              /* 给左侧图标让位 */
  background-repeat:no-repeat;
  background-position:11px 50%;
  background-size:16px 16px;
}
/* 主机名：系统自动生成、只读，灰底（对应参考站 input[readonly]{background:var(--cart-background)}） */
.allocation-mian input.form-control.pc-input-host{
  background-color:var(--pc-bg);
  color:var(--pc-text);
  cursor:default;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9cdd4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='2'/%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E");
}
/* 主机密码：钥匙图标 */
.allocation-mian input.form-control.pc-input-pwd{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9cdd4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='12' r='4.5'/%3E%3Cpath d='M13 12h8M18 12v3.5M21 12v2.5'/%3E%3C/svg%3E");
}
/* 密码行：「眼睛」「随机生成」的包裹层与 40px 高的输入框垂直居中对齐
   （行的 align-items:flex-start 默认让它们贴顶） */
.allocation-mian .form-group.row > .d-inline-flex.align-items-center,
.allocation-mian .form-group.row > .col-1.col-md-1{align-self:center;}
/* 显示 / 隐藏密码：眼睛图标（图标字体不可用，故内联 SVG） */
.allocation-mian .pc-pwd-toggle{
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#c9cdd4;
  cursor:pointer;
}
.allocation-mian .pc-pwd-toggle svg{width:18px;height:18px;}
.allocation-mian .pc-pwd-toggle:hover,
.allocation-mian .pc-pwd-toggle.is-on{color:var(--pc-main);}
/* 随机生成：主色描边方框按钮（对应参考站 .create_random_pass） */
.allocation-mian .pc-btn-random{
  align-self:center;
  padding:6px 12px;
  border:1px solid var(--pc-main);
  border-radius:2px;
  background:#fff;
  color:var(--pc-main) !important;
  font-size:12px;
  line-height:18px;
  white-space:nowrap;
  cursor:pointer;
}
.allocation-mian .pc-btn-random:hover{background:var(--pc-main-l);}
.allocation-mian #password-error-tip{font-size:12px;white-space:nowrap;}

/* ===== 登录凭据分组：主机名 / 主机密码 / 周期 =====
   对齐参考主题 cart/server/static/css/config.css 的 .logonCredentials：
   margin-top:60px + ::before 画一条与右侧内容列等宽的分隔线（top:-30px）。
   本页上一行自带 22px 下外边距，与这里 60px 的上外边距折叠后取 60px，
   于是「上一行 → 分隔线」与「分隔线 → 主机名」各 30px，与参考站一致。 */
.allocation-mian .logonCredentials{
  position:relative;
  margin-top:60px;
}
.allocation-mian .logonCredentials::before{
  content:"";
  display:block;
  position:absolute;
  top:-30px;
  left:calc(var(--pc-label-w) + 16px);            /* 74px 标签 + 16px gap = 90px */
  width:calc(100% - var(--pc-label-w) - 16px);    /* 只画右侧内容列那一截 */
  height:1px;
  background-color:var(--pc-border);
}

/* ===== 产品型号面板（灰底）===== */
.product-model-row > .col-md-10{
  background:var(--pc-bg);
  border-radius:8px;
  padding:16px;
}
.product-model-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.product-model-chip{
  display:inline-block;
  padding:8px 16px;
  border:1px solid transparent;
  border-radius:6px;
  background:#fff;
  color:var(--pc-label);
  font-size:14px;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:all .2s;
}
.product-model-chip:hover{color:var(--pc-main);border-color:var(--pc-main);}
.product-model-chip.active{background:var(--pc-main);color:#fff;}
.product-model-tip{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  font-size:13px;
  color:var(--pc-sub);
}
.product-model-tip svg{flex:0 0 auto;}

/* 移动端折叠行 + 底部选择弹层：PC 端统一隐藏，仅 ≤768px 由文件末尾媒体查询启用 */
.product-model-selector{display:none;}
.pm-sheet{display:none;}

/* ===== 操作系统卡片 ===== */
.os-container{
  display:grid;
  /* 最小 190px：参考站原值 178px 偏窄，"CentOS-7.6.1810-x64" 这类长版本号会被折成两行，
     且 "TencentOS-Server" 名称行也需要约 185px。190px 起，各宽度下实际卡宽 198~220px，
     名称与版本号都能单行显示（1920→6 列 / 1680→5 / 1440→4 / 1366→4）。 */
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;
  width:100%;
}
.os-card{
  position:relative;
  border:1px solid var(--pc-border);
  border-radius:8px;
  background:#fff;
  transition:all .2s;
}
.os-card .os-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  background:var(--pc-bg);
  border-radius:7px 7px 0 0;
}
.os-card .os-header .img_os{
  width:22px;
  height:22px;
  filter:grayscale(1);
  opacity:.45;
  transition:all .3s;
}
.os-card .os-header .os-name{
  font-size:15px;
  font-weight:500;
  color:#000;
}
.os-card .version-dropdown{
  position:relative;
  margin-top:1px;
  cursor:pointer;
}
.os-card .version-dropdown .dropdown-btn{
  position:relative;
  width:100%;
  box-sizing:border-box;
  text-align:left;
  padding:11px 34px 11px 15px;
  background:#fff;
  border:0;
  border-top:1px solid #f2f4f7;
  border-radius:0 0 7px 7px;
  font-size:14px;
  color:#9aa3b2;
}
.os-card .version-dropdown .dropdown-btn.has-value{color:var(--pc-text);}
.os-card .version-dropdown .dropdown-btn::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.5px solid #9aa3b2;
  border-bottom:1.5px solid #9aa3b2;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s;
}
.os-card .version-dropdown .version-list{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:20;
  margin:0;
  padding:0;
  max-height:220px;
  overflow-y:auto;
  background:#fff;
  border:1px solid #f2f4f7;
  border-top:0;
  border-radius:0 0 8px 8px;
  box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.os-card .version-dropdown .version-list li{
  list-style:none;
  padding:11px 15px;
  border-top:1px solid #f7f7f7;
  font-size:14px;
  color:var(--pc-label);
  cursor:pointer;
}
.os-card .version-dropdown .version-list li:first-child{border-top:0;}
.os-card .version-dropdown .version-list li:hover,
.os-card .version-dropdown .version-list li.active{background:#f2f6ff;color:var(--pc-main);}
.os-card.open{z-index:30;}
.os-card.open .version-list{display:block;}
.os-card.open .dropdown-btn::after{transform:translateY(-30%) rotate(-135deg);}
.os-card:hover,
.os-card.active{
  border-color:var(--pc-main);
  box-shadow:0 2px 12px rgba(22,93,255,.1);
}
.os-card:hover .os-name,
.os-card.active .os-name{color:var(--pc-main);}
.os-card:hover .img_os,
.os-card.active .img_os{filter:grayscale(0);opacity:1;}

/* 隐藏原生 select（由卡片驱动） */
.pro-src-hidden{display:none !important;}

/* ===== 底部费用条 ===== */
.allocation-footer{
  position:sticky;
  bottom:0;
  z-index:6;
  flex:0 0 auto;       /* 关键：不参与压缩，否则卡片等高后内容会被挤出底边 */
  padding:16px 24px;
  background:#fff;
  border-top:1px solid #f0f2f5;
  box-shadow:0 -2px 8px rgba(0,0,0,.04);
  min-height:92px;
}
.configoption_total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
/* custom.css 给 .configoption_total 加了 padding:10px 20px + 灰底(rgb(250,250,252))，
   在 footer 里就成了「框里套框」，内容比外层底部框架窄一圈、上下还多出 10px，
   视觉上字体块与外框尺寸对不上。还原为参考主题的做法：无内边距、无底色。 */
.allocation-footer .configoption_total{
  padding:0;
  background:transparent;
}
.allocation-footer-l{flex:1 1 auto;min-width:0;}
.allocation-footer-l-t{margin:0 0 6px;font-size:14px;color:#666;}
.ordersummarybottom-title{
  display:flex;
  justify-content:flex-start;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px;
}
.ordersummarybottom-title .configurationName{font-size:14px;color:#000;font-weight:500;}
.ordersummarybottom-title .ordersummarybottom-prefix{font-size:18px;color:var(--price-color,#ff0000);}
.ordersummarybottom-title .pricePositioning{width:1px;font-size:28px;opacity:0;}
.ordersummarybottom-title .ordersummarybottom-price{
  display:flex;
  align-items:baseline;
  font-size:28px;
  color:var(--price-color,#ff0000);
  -webkit-font-smoothing:initial;
}
.ordersummarybottom-title .configure-total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-left:10px;
  border-bottom:1px solid #ced4da;
}
.ordersummarybottom-title .configure-total-row .configure-total-label,
.ordersummarybottom-title .configure-total-row .configure-total-value{
  font-size:13px;
  color:#a9a9a9;
}
.ordersummarybottom-title .configure-total-row .promocode{color:#faad14;}
.allocation-footer-l-b{margin:6px 0 0;font-size:13px;color:#86909c;}
.allocation-footer-l-b span{color:#1a1a1a;font-size:13px;}
.allocation-footer-r{
  display:flex;
  align-items:center;
  gap:24px;
  position:relative;
}
.btn-costDetails{
  display:flex;
  align-items:center;
  gap:4px;
  color:#999;
  font-size:14px;
  cursor:pointer;
}
.btn-costDetails:hover{color:var(--pc-main);}
.btn-costDetails .cost-arrow{
  display:inline-block;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
}
.btn-buyNow{
  padding:11px 28px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}
.details-container{position:relative;display:inline-block;}
.price-breakdown{
  position:absolute;
  right:0;
  bottom:100%;
  z-index:100;
  display:none;
  /* 用 max-content 让表格按内容自然展开（配置详情不再被压窄换行）；
     外层 details-container 是 inline-block，宽度很小，fit-content 会退化成 min-width，
     所以显式给一个更合适的下限与视口上限 */
  width:max-content;
  min-width:560px;
  max-width:min(780px, calc(100vw - 32px));
  max-height:72vh;
  margin-bottom:8px;
  padding:16px 22px;
  overflow:hidden;
  overflow-y:auto;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:4px;
  box-shadow:0 8px 16px rgba(0,0,0,.1);
}
/* 明细表：撑满弹框、补足列间距。本页未加载 Bootstrap，表格此前几乎无单元格内边距，
   列挤在一起、表头「折扣优惠 / 折后价」还会逐字换行，看起来“框太小”。 */
.price-breakdown .ordersummary-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  color:var(--pc-text);
}
.price-breakdown .ordersummary-table th,
.price-breakdown .ordersummary-table td{
  padding:6px 12px;
  text-align:left;
  vertical-align:top;
}
.price-breakdown .ordersummary-table th{
  font-weight:400;
  color:var(--pc-sub);
  border-bottom:1px solid var(--pc-border);
}
/* 配置详情允许换行并占主要宽度；金额列右对齐且不换行 */
.price-breakdown .ordersummary-table .config-details{white-space:normal;word-break:break-word;}
.price-breakdown .ordersummary-table .original-price,
.price-breakdown .ordersummary-table .savings,
.price-breakdown .ordersummary-table .discounted-price,
.price-breakdown .ordersummary-table .text-success{text-align:right;white-space:nowrap;}
.price-breakdown .ordersummary-table .tb_totalPrice{font-size:15px;}
/* 明细里的关闭按钮带 .hide-pc（参考站 carttypo.css:.hide-pc{display:none} + ≤768 显示）。
   本页不加载 carttypo.css，故这里补上：PC 隐藏，窄屏由下面的媒体查询显示为底部白卡的关闭按钮。 */
.price-breakdown .hide-pc{display:none!important;}

/* ===== 工具类（Bootstrap 未加载时的兜底）===== */
.allocation-mian .pointer{cursor:pointer;}
.allocation-mian .fs-20{font-size:20px;}
.allocation-mian .fs-18{font-size:18px;}

/* ===== 移动端 ===== */
@media all and (max-width:768px){
  .allocation-mian{padding:18px 16px 22px;}
  .allocation-mian .form-group.row{flex-wrap:wrap;gap:8px;}
  .allocation-mian .form-group.row > label.col-md-2{
    flex:0 0 100%;
    max-width:100%;
    width:100%;
    line-height:20px;
  }
  .allocation-mian .form-group.row > .col-md-10{flex:1 1 100%;}
  /* 窄屏标签换行到顶部，内容列从行首开始 —— 分隔线也要跟着铺满整行 */
  .allocation-mian .logonCredentials::before{left:0;width:100%;}
  .product-model-chip{padding:7px 12px;font-size:13px;}
  /* ===== 产品型号（移动端）：一屏十几个全宽按钮太占屏，
     改成参考站 themes/cart/server 的「产品型号 | 当前型号 ›」折叠行 + 底部选择弹层 ===== */
  .product-model-row{position:relative;}
  .product-model-row > label.col-md-2{display:none;}
  .product-model-row > .col-md-10{background:transparent;padding:0;border-radius:0;}
  .product-model-list{display:none;}
  .product-model-selector{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--pc-border);cursor:pointer;}
  .product-model-selector .pm-selector-title{flex:0 0 auto;font-size:14px;font-weight:700;color:#1d2129;white-space:nowrap;}
  .product-model-selector .pm-selector-value{display:flex;align-items:center;justify-content:flex-end;gap:2px;min-width:0;font-size:14px;color:var(--pc-text);}
  .product-model-selector .pm-selector-value > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .product-model-selector .pm-selector-value svg{flex:0 0 auto;color:#c9cdd4;}
  .product-model-tip{align-items:flex-start;margin-top:12px;padding-bottom:12px;font-size:12px;line-height:19px;color:#86909c;}
  .product-model-tip svg{margin-top:3px;width:13px;height:13px;}
  /* 底部选择弹层（参考站 sky-productSelector-modal 的观感） */
  .pm-sheet{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;pointer-events:none;}
  .pm-sheet-mask{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .25s ease-out;}
  .pm-sheet-panel{position:absolute;right:0;bottom:0;left:0;display:flex;flex-direction:column;max-height:74vh;background:#fff;border-radius:14px 14px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.12);transform:translateY(100%);transition:transform .25s ease-out;}
  .pm-sheet.show{pointer-events:auto;}
  .pm-sheet.show .pm-sheet-mask{opacity:1;}
  .pm-sheet.show .pm-sheet-panel{transform:translateY(0);}
  .pm-sheet-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid #f1f3f8;}
  .pm-sheet-header h3{margin:0;font-size:15px;font-weight:500;color:#1d2129;}
  .pm-sheet-header button{background:none;border:0;padding:4px 6px;font-size:14px;color:#86909c;cursor:pointer;}
  .pm-sheet-header .pm-sheet-confirm{color:var(--pc-main);font-weight:500;}
  .pm-sheet-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom);}
  .pm-sheet-body ul{list-style:none;margin:0;padding:0;}
  .pm-sheet-body li{position:relative;padding:13px 16px;font-size:14px;line-height:20px;color:var(--pc-text);border-bottom:1px solid #f7f8fa;cursor:pointer;}
  .pm-sheet-body li:last-child{border-bottom:0;}
  .pm-sheet-body li.selected{background:#f5f8ff;color:var(--pc-main);font-weight:500;}
  .pm-sheet-body li.selected::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc-main);}
  /* 窄屏标签改上下排列后内容区变宽，140px 会在 600~768 排出 4 列 160px 的窄卡（名称/版本折行），
     提到 175px 后：768→3 列 218px、600→2 列 249px、480→2 列 190px、≤414→1 列铺满 */
  .os-container{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px;}
  .configoption_total{flex-direction:column;align-items:stretch;gap:12px;}
  /* z-index:auto：基础规则里 sticky footer 带 z-index:6 会形成层叠上下文，
     里面的 .price-breakdown（fixed 遮罩）再怎么设 z-index 也压不过外壳的
     .mobile-bottom-nav(9999)。这里解除上下文，让遮罩能提到 10000。 */
  .allocation-footer{padding:14px 16px;min-height:auto;z-index:auto;}
  /* 手机端左下角有外壳的悬浮菜单圆钮 #floatMenuBtn（fixed;left:16px;bottom:76px;42×42），
     原来本行 justify-content:space-between 会把「费用明细」顶到最左（x≈37），
     正好被圆钮（x=16~58）压住「费」字。保留 space-between（加入购物车仍贴右不动），
     只把「费用明细」右移避开圆钮（见下方 .details-container 的 margin-left）。 */
  .allocation-footer-r{justify-content:space-between;width:100%;margin-top:4px;}
  .ordersummarybottom-title .ordersummarybottom-price{font-size:24px;}
  /* ===== 费用明细（窄屏）=====
     原来只是把 PC 的 hover 浮层（position:absolute + right:0 + bottom:100%）缩窄成 100vw-24px，
     宽度远超锚点 .details-container（68px），浮层以右对齐向左溢出 → 整块跑到屏幕左侧外，
     屏幕上只剩最后一列「折后价」，看起来是一条竖着的价格条盖在页面上。
     现按参考站 themes/cart/server/static/css/mobileend.css 的做法改成
     「全屏半透明遮罩 + 底部白卡」：遮罩即 .price-breakdown 本身，白卡是 .price-breakdown-body。 */
  .allocation-footer .details-container{position:initial;margin-left:56px;}
  .allocation-footer .details-container .price-breakdown{
    position:fixed;
    left:0;right:0;top:0;bottom:0;
    width:auto;min-width:0;max-width:none;
    margin:0;padding:0;
    background:rgba(0,0,0,.7);
    border:0;border-radius:0;box-shadow:none;
    max-height:100%;
    overflow:hidden;
    /* 外壳（web/7ywww）底部导航 .mobile-bottom-nav 是 z-index:9999（fixed, 56px），
       遮罩必须压过它，否则白卡最下面几行会被导航条盖住 */
    z-index:10000;
  }
  .allocation-footer .details-container .price-breakdown .price-breakdown-body{
    position:absolute;left:0;right:0;bottom:0;
    max-height:74vh;
    padding:18px 14px calc(18px + env(safe-area-inset-bottom));
    background:#fff;
    border-radius:14px 14px 0 0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* 白卡顶部：费用明细：共N项 + 关闭按钮（.hide-pc 窄屏显示） */
  .price-breakdown .ordersummary-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:0 2px 12px;
    border-bottom:1px solid var(--pc-border);
  }
  .price-breakdown .ordersummary-toolbar > div:first-child{display:flex;align-items:baseline;gap:2px;}
  .price-breakdown .ordersummary-toolbar span{font-size:15px;font-weight:600;color:#1d2129;}
  .price-breakdown .ordersummary-toolbar p{margin:0;font-size:12px;color:#86909c;display:inline-block;}
  /* .hide-pc 在基础规则里是 display:none!important（PC 隐藏），窄屏要显式压回来 */
  .price-breakdown .hide-pc{display:flex!important;align-items:center;justify-content:center;cursor:pointer;color:#86909c;padding:4px;}
  .price-breakdown .ordersummary-closeButton .pb-close{display:flex;align-items:center;}
  /* 窄屏只保留「配置名称 / 配置详情 / 折后价」三列，原价与折扣优惠隐藏（参考站同款） */
  .price-breakdown .ordersummary-table{margin-top:4px;}
  .price-breakdown .ordersummary-table th,
  .price-breakdown .ordersummary-table td{padding:7px 6px;font-size:12px;}
  .price-breakdown .ordersummary-table th.original-price,
  .price-breakdown .ordersummary-table td.original-price,
  .price-breakdown .ordersummary-table th.savings,
  .price-breakdown .ordersummary-table td.savings{display:none;}
  .price-breakdown .ordersummary-table .config-name{width:auto;}
  .price-breakdown .ordersummary-table .config-details{max-width:150px;}
  /* 遮罩打开时不滚动底下的页面（JS 给 body 加的 no-scroll，本页其它地方没定义） */
  body.no-scroll{overflow:hidden;}
  /* 外壳（web/7ywww）自身的 fixed 浮块：明细遮罩打开时一并收起
     （底部导航会盖住白卡最下面 56px，其余几个会飘在明细上/可点开外壳菜单）。 */
  body.no-scroll .mobile-bottom-nav,
  body.no-scroll .cloud-fixed-box,
  body.no-scroll .float-menu-btn,
  body.no-scroll .float-menu-drawer{display:none!important;}
  /* 关键（蓝色选中按钮穿透白卡的根因）：
     .price-breakdown（fixed 遮罩）嵌在 .allocation-footer 里，而 .allocation-footer
     是 sticky + z-index:auto → 自成层叠上下文，遮罩的 z-index:10000 被限制在这个上下文内，
     对外只表现为「z-index:auto 的一个盒子」。
     配置页的选中按钮（.btn.active）带 z-index:1（正数），
     正数 z-index 的绘制层级【高于】z-index:auto 的 .allocation-footer，
     于是蓝色选中按钮（CPU「4核」、内存「4GB」）会浮到整条 footer 子树（含遮罩白卡）之上，
     手机端表现为「蓝色小方块压在费用明细上」。
     （PC 端没这问题，是因为基础规则里 .allocation-footer{z-index:6} > 按钮的 1。）
     修复：明细打开时把 .allocation-footer 抬到 10001（正数且 > 按钮的 1，
     也顺带压过外壳浮块 .mobile-bottom-nav:9999），遮罩才能盖住全部。
     注意：必须是 .allocation-footer，不能写 .allocation-card —— 后者 position:static，
     z-index 不生效（之前就是踩了这个坑）。 */
  body.no-scroll .allocation-footer{z-index:10001;}
}