/* ============================================================
 * sites-skins.css —— 供应商官网「新骨架」补样式（0.3.11 之后）
 *
 * 背景：sites.css 里已经有旧的一版 .sv-cmp-r/.sv-cfg-row/.sv-wild-card-t
 * 等（它们是 div 版 / 旧命名），而 js/apps/sites-views.js 里新写的
 * viewMegaCloud / viewMiniLite / viewMiniWild 用的是**另一套类名**
 * （真 <table>、chips 选择器、wild-k/v/d）。两套并存，旧的别动，
 * 这里只补新的，互不串色。
 *
 * 配色纪律：
 *   1) 品牌色一律走 var(--sv-accent) —— 由容器上的 .sv-skin-* 注入，
 *      所以同一套 DOM 换皮肤就换色，这里**不写死任何品牌色**。
 *   2) 透明度一律用 color-mix(in srgb, ... )，不写 rgba() 硬编码。
 *   3) 唯一的例外是语义色（风险绿/琥珀/红）—— 见各段注释，那是
 *      "风险等级"的固有色，不是品牌色，换皮肤也不该跟着变。
 *
 * 本文件必须在 sites.css **之后**引入（见文件末尾说明）。
 * ============================================================ */


/* ============================================================
 * 组 1 · 大促横条的内部三件套（巨擎云 viewMegaCloud）
 *
 * 问题：父容器 .sv-promo 是通栏橙金渐变 + 白字 + 居中 flex，
 * 但三个子元素 tag / txt / go 一个样式都没有，视觉上就是
 * 「限时双11云上狂欢…立即领取」连成一坨，读不出层次。
 * 解决：给横条建立"标 — 文 — 动作"三级：
 *   tag  收成小号实心白胶囊，当锚点；
 *   txt  允许吃掉剩余宽度并允许收缩（min-width:0），长文案
 *        不撑破横条（这是 flex 子项默认不收缩的经典坑）；
 *   go   做成右侧带下划线的行动入口，不抢主文案但能点到。
 * ============================================================ */
.sv-promo-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.5;
  /* 实心白底 + 强调色字：在橙底上是最亮的那个点 */
  background: var(--surface, #FFFDFB);
  color: var(--sv-accent, #FF6A00);
  white-space: nowrap;
}
.sv-promo-txt {
  /* flex:1 + min-width:0 —— 少了 min-width，长文案会把横条撑宽 */
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-promo-go {
  flex: none;
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  /* 下划线做"入口"感，不用按钮块 —— 免得跟 tag 抢视线 */
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  opacity: .95;
  transition: opacity .14s ease;
}
.sv-promo-go:hover { opacity: 1; }
.sv-promo-go:active { opacity: .75; }

/* 窄屏：文案可能压到一行放不下，横条改为靠左、不再居中挤压 */
@media (max-width: 380px) {
  .sv-promo { justify-content: flex-start; gap: 6px; padding: 7px 12px; }
  .sv-promo-txt { font-size: 11px; }
}


/* ============================================================
 * 组 2 · 机型参数对比表（巨擎云 compareTable）
 *
 * 真实 DOM 是真 <table>：thead>tr>th.sv-cmp-k + th，tbody>tr>td.sv-cmp-k + td。
 * sites.css 里的 .sv-cmp-r/.sv-cmp-h/.sv-cmp-c 是**旧的 div 版**，
 * 本段整套重写 table 版，不复用旧类名。
 *
 * 问题：真 table 默认没有边框合并、列宽被内容撑得七零八落，
 * 表头的"已上架"角标会跟机型名挤在一行把它顶断行。
 * 解决：
 *   - border-collapse 合并边框，表头列用强调色浅底 + 2px 强调实线封底；
 *   - 机型名那一格用 flex + wrap，让角标能掉到第二行，不挤压名字；
 *   - 机型列等分（table-layout: fixed + 无数值 width），超长省略号；
 *   - 斑马纹走极淡强调色，月付行（tbody 最后一行）用强调色 + 700 加重。
 *   注：按题目要求**不用 :last-child**，用 tbody tr:last-child 定位
 *   （JS 那份数据行数固定为六行，最后一行恒为"月付"）。
 * ============================================================ */
.sv-cmp-tb {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;   /* 让"机型列等分"成立，否则列宽随内容跳 */
  font-size: 11.5px;
}
/* 表头整行：强调色浅底 */
.sv-cmp-tb thead th {
  padding: 9px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: color-mix(in srgb, var(--sv-accent, #FF6A00) 82%, #000000);
  background: color-mix(in srgb, var(--sv-accent, #FF6A00) 12%, #FFFFFF);
  text-align: center;
  /* 底部 2px 强调实线：表头的"承重墙" */
  border-bottom: 2px solid var(--sv-accent, #FF6A00);
  vertical-align: middle;
}
/* 表头里的机型名 + 已上架角标：同格但可换行，互不挤压 */
.sv-cmp-tb thead th {
  display: table-cell;   /* 保持表格语义，内部用 span 控制 */
}
.sv-cmp-tb thead th > .sv-cmp-owned {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.45;
  white-space: nowrap;
  color: var(--sv-accent, #FF6A00);
  background: color-mix(in srgb, var(--sv-accent, #FF6A00) 16%, #FFFFFF);
  vertical-align: middle;
}
/* 首列（参数名，纵向表头）：窄屏不折行，浅底压住 */
.sv-cmp-tb th.sv-cmp-k,
.sv-cmp-tb td.sv-cmp-k {
  width: 78px;
  padding: 9px 9px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;   /* 参数名绝不折行，宽度靠 column 固定 */
  color: color-mix(in srgb, var(--sv-accent, #FF6A00) 62%, var(--text, #2A3138));
  background: color-mix(in srgb, var(--sv-accent, #FF6A00) 6%, #FFFFFF);
  border-right: 1px solid var(--divider, #E6E4DF);
}
.sv-cmp-tb th.sv-cmp-k { border-bottom: 2px solid var(--sv-accent, #FF6A00); }
/* 数据格：居中、超长省略号 */
.sv-cmp-tb tbody td {
  padding: 9px 8px;
  text-align: center;
  color: var(--text, #2A3138);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top: 1px solid color-mix(in srgb, var(--sv-accent, #FF6A00) 12%, #FFFFFF);
}
/* 斑马纹：极淡强调色 */
.sv-cmp-tb tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--sv-accent, #FF6A00) 4%, #FFFFFF);
}
/* 月付行（最后一行）单独加强：强调色 + 700 —— 这是转化点 */
.sv-cmp-tb tbody tr:last-child td {
  font-weight: 700;
  color: var(--sv-accent, #FF6A00);
  background: color-mix(in srgb, var(--sv-accent, #FF6A00) 8%, #FFFFFF);
  border-top: 1.5px solid color-mix(in srgb, var(--sv-accent, #FF6A00) 30%, #FFFFFF);
}

@media (max-width: 380px) {
  .sv-cmp-tb { font-size: 11px; }
  .sv-cmp-tb th.sv-cmp-k,
  .sv-cmp-tb td.sv-cmp-k { width: 62px; padding: 8px 6px; }
  .sv-cmp-tb thead th,
  .sv-cmp-tb tbody td { padding: 8px 5px; }
  .sv-cmp-tb thead th > .sv-cmp-owned { font-size: 8.5px; padding: 1px 4px; margin-left: 2px; }
}


/* ============================================================
 * 组 3 · 配置选型器（巨擎云 specPicker）
 *
 * DOM：.sv-cfg > .sv-cfg-chips(多颗 button.sv-cfg-chip) +
 *      .sv-cfg-detail(.sv-cfg-n + .sv-cfg-kv>.sv-cfg-cell>span.sv-cfg-k
 *       + b.sv-cfg-v + .sv-cfg-price + .sv-cfg-note + 一颗 .sv-btn-pri)。
 * sites.css 的 .sv-config/.sv-cfg-row/.sv-cfg-opt 是**旧版**，整套不复用。
 *
 * 问题：chips 与 detail 没有分栏，全堆一行；chip 完全没有状态反馈。
 * 解决：左右两栏（chips 固定 96px 纵列，detail flex:1 撑满右侧）；
 * chip 补齐六个状态（默认/hover/active/focus-visible/.on/disabled）；
 * kv 用两列网格把"键-值"对齐成一张读数表。
 * ============================================================ */
.sv-cfg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 12px;
  padding: 12px;
  background: var(--surface, #FFFDFB);
  border: 1px solid var(--divider, #E6E4DF);
  border-radius: 12px;
}
/* 左栏：机型 chips，窄列纵排 */
.sv-cfg-chips {
  flex: none;
  width: 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sv-cfg-chip {
  /* 复位 button 默认外观 —— 六态自己画 */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  color: var(--text, #2A3138);
  background: color-mix(in srgb, var(--sv-accent, #FF6A00) 6%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--sv-accent, #FF6A00) 22%, #FFFFFF);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .12s ease, background .14s ease,
              border-color .14s ease, color .14s ease;
}
/* hover：轻微抬起 */
.sv-cfg-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--sv-accent, #FF6A00) 45%, #FFFFFF);
}
/* active：按下回弹，给触觉反馈 */
.sv-cfg-chip:active { transform: scale(.96); }
/* focus-visible：键盘可达性，2px 强调色描边 */
.sv-cfg-chip:focus-visible {
  outline: 2px solid var(--sv-accent, #FF6A00);
  outline-offset: 2px;
}
/* .on 选中：实心强调色，反白字 */
.sv-cfg-chip.on {
  color: #FFFFFF;
  font-weight: 700;
  background: var(--sv-accent, #FF6A00);
  border-color: var(--sv-accent, #FF6A00);
}
/* disabled：不可点，压低存在感 */
.sv-cfg-chip:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* 右栏：配置摘要，撑满剩余宽度（min-width:0 防止内部把栏撑破） */
.sv-cfg-detail {
  flex: 1 1 auto;
  min-width: 0;
}
.sv-cfg-n {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  color: color-mix(in srgb, var(--sv-accent, #FF6A00) 55%, var(--text, #2A3138));
}
/* 键值表：两列网格，键左值右 */
.sv-cfg-kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin-top: 10px;
}
.sv-cfg-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-bottom: 4px;
  border-bottom: 1px dashed color-mix(in srgb, var(--sv-accent, #FF6A00) 18%, #FFFFFF);
}
.sv-cfg-k {
  flex: none;
  font-size: 10.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text, #2A3138) 60%, #FFFFFF);
  white-space: nowrap;
}
.sv-cfg-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #2A3138);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 价格行：强调色，数字再放大一档 */
.sv-cfg-price {
  margin-top: 12px;
  font-size: 12px;
  color: color-mix(in srgb, var(--text, #2A3138) 72%, #FFFFFF);
}
.sv-cfg-price b {
  font-size: 19px;
  font-weight: 700;
  color: var(--sv-accent, #FF6A00);
}
.sv-cfg-note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.65;
  opacity: .62;
}
/* detail 里的按钮与上面拉开 */
.sv-cfg-detail > .sv-btn { margin-top: 12px; }

/* 窄屏：两栏改上下堆叠，chips 变横向可滚（隐藏滚动条） */
@media (max-width: 380px) {
  .sv-cfg { flex-direction: column; gap: 10px; padding: 10px; }
  .sv-cfg-chips {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 旧 Edge */
  }
  .sv-cfg-chips::-webkit-scrollbar { display: none; }  /* WebKit */
  .sv-cfg-chip { width: auto; flex: none; text-align: center; }
  .sv-cfg-kv { grid-template-columns: 1fr; }
}


/* ============================================================
 * 组 4 · 小厂风险提示条内部（轻云小站 viewMiniLite）
 *
 * 现在的 DOM：.sv-risk-note > .sv-risk-tx > (.sv-risk-t 标题 + .sv-risk-list > .sv-risk-l×N)
 * —— 风险条已从"一行免责"扩成"标题 + 逐条事实"（-t / -list / -l 在
 *    sites-skins-b.css 组 L），tx 在这里先从"一段话"变成纵向容器。
 *
 * ★ 历史坑（写这版时注意，别再重犯）
 *   早期 DOM 是 `.sv-risk-note > span.sv-risk-ic(内联 SVG) + span.sv-risk-tx`，
 *   而父容器在 sites.css 已经用 ::before 画了一个橙红圆形"!" —— 两个图标打架。
 *   当时的解法是把 .sv-risk-ic 置 display:none。后来风险条改版，JS 不再产出
 *   .sv-risk-ic，那条隐藏规则就成了死样式，已删除。
 *   教训：**同一视觉元素不要在两个地方各画一次**（CSS ::before + JS 内联 SVG）。
 * ============================================================ */
.sv-risk-tx {
  flex: 1 1 auto;
  min-width: 0;      /* 允许在 flex 行内正常折行，不被撑开 */
  line-height: 1.65;
}


/* ============================================================
 * 组 5 · 野贝云双卡（viewMiniWild 的 sv-wild-meta 段）
 *
 * DOM：.sv-wild-meta > .sv-wild-card > .sv-wild-k + .sv-wild-v + .sv-wild-d。
 * sites.css 里的 .sv-wild-card-t/-v/-s 是**旧命名**（那套卡还有个 .warn 变体），
 * 本段整套新写，不复用旧类名 —— 旧卡样式仍在，但这两个新页用的是新名。
 *
 * ★ 0.3.13：原先第二张卡是个"跑路迹象"警示卡，.sv-wild-v 上挂 .sv-wild-hi
 *   染红。风险文案已从玩家可见面全部撤出（runRisk 只留作引擎数据），
 *   警示卡随之删除，.sv-wild-hi 不再由 JS 产出，对应规则已一并清掉。
 *
 * 质感要求：冷、稳、像"事实披露"而不是营销物料。所以：
 *   k 做成小号、大字距的"大写感"标签（不用真 uppercase，中文无效）；
 *   v 是 17~20px、700 的深版强调色（color-mix 把强调色混黑压深）；
 *   d 是小号说明，opacity .7 退到背景层。
 * ============================================================ */
.sv-wild-k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: color-mix(in srgb, var(--text, #2A3138) 55%, #FFFFFF);
}
.sv-wild-v {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  /* 强调色的"深版"：混黑压深，保证在白底上够重、够正式 */
  color: color-mix(in srgb, var(--sv-accent, #6D4AFF) 82%, #000000);
}
.sv-wild-d {
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.55;
  opacity: .7;
}
/* ============================================================
 * 组 6 · （0.3.13 移除）报价行"跑路迹象"三档文字色
 *
 * 此处原有一套 .sv-risk / .sv-risk-lo|mid|hi 的语义配色，服务于
 * riskLine() 渲染的风险百分比。0.3.13 起风险文案从玩家可见面全部
 * 撤出，riskLine() 与其产出类名一并删除，故本组样式整块清掉。
 * runRisk 字段本身仍保留在 sites.js / 引擎里，只作失败事件概率用。
 * ============================================================ */


/* ============================================================
 * 组 7 · .sv-badge / .sv-badges —— 经核对**已存在**，未重复定义
 *
 * sites.css 第 65–69 行已有：
 *   .sv-badges { display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; }
 *   .sv-badge  { 小号胶囊、1px currentColor 描边、opacity .72、
 *                white-space:nowrap }
 * 该实现已满足"小号胶囊 + 行内间距 + 不折行"的要求（底色/文字随
 * 各页 hero 的 currentColor 走，天然适配深/浅 hero）。
 * 因此本文件**不重复定义** .sv-badge / .sv-badges，避免与其打架。
 * ============================================================ */


/* ============================================================
 * ★ 接入说明（写给主工程，不由本文件自行修改）
 *   index.html 需要在 css/apps/sites.css **之后** 追加：
 *     <link rel="stylesheet" href="css/apps/sites-skins.css">
 *   否则 .sv-cmp-tb / .sv-cfg-chip 等新类不会生效。
 * ============================================================ */