/* ============================================================================
   vip-pricelist.css —— 「算力豆消耗规则」（全站价目表）专用样式
   ----------------------------------------------------------------------------
   🔴 独立文件，**不动 vip.css**：那是公共样式，改一处会波及全站。
      必须在 vip.css / vip-polish.css **之后**加载（同特异性下后加载者胜）。
   🔴 类名一律 `vip-nav-` / `vip-pl-` 前缀，保证全局唯一 —— 避免与其它模块撞名。
   ============================================================================ */

/* 弹层头部：子页的「‹ 返回 ＋ 标题」（返回键只在子页出现） */
.vip-nav-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vip-back {
  width: 30px; height: 30px; margin-left: -4px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: #F5C86A; cursor: pointer;
  border-radius: 50%; background: rgba(245, 200, 106, .12);
}
.vip-back:active { background: rgba(245, 200, 106, .24); }

/* ① 入口行（会员中心里，紧挨在「算力豆明细」上方） */
.vip-pl-entry {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(245, 200, 106, .22);
}
.vip-pl-entry:active { background: rgba(255, 255, 255, .09); }
.vip-pl-entry .ic { font-size: 20px; flex: none; }
.vip-pl-entry .tx { flex: 1; min-width: 0; }
.vip-pl-entry .tx b { display: block; font-size: 14px; font-weight: 700; color: #F5EFE4; }
/* ⚠️ 2026-09-28 老板要求去掉卡片里那排小字 ⇒ `.vip-pl-entry .tx span` 规则已随之删除
   （不留死样式：这条选择器只服务那一句说明文字）。 */
.vip-pl-entry .ar { flex: none; font-size: 20px; color: #9C8E7B; }

/* ② 顶部口径说明 */
.vip-pl-lead {
  font-size: 12.5px; line-height: 1.75; color: #9C8E7B;
  padding: 12px 14px; margin: 4px 0 14px;
  border-radius: 12px; background: rgba(245, 200, 106, .08);
}
.vip-pl-lead b { color: #F5C86A; }

/* ③ 板块标题（带项数） */
.vip-pl-grp {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 16px 4px 8px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(245, 200, 106, .18);
}
.vip-pl-grp span { font-size: 14px; font-weight: 800; color: #F5C86A; }
.vip-pl-grp i { font-style: normal; font-size: 12px; color: #7D7263; }

/* ③b 顶部「会员免费」专块（2026-09-28：免费放最前 —— 这是最强的卖点） */
.vip-pl-grp.is-free-grp {
  margin-top: 6px;
  border-bottom: 1px solid rgba(93, 202, 165, .35);
}
.vip-pl-grp.is-free-grp span { color: #5DCAA5; }
.vip-pl-grp.is-free-grp i { color: #5DCAA5; opacity: .75; }
.vip-pl-note {
  font-size: 12px; line-height: 1.7; color: #7D7263;
  padding: 8px 4px 2px;
}
.vip-pl-note b { color: #5DCAA5; }

/* ④ 条目：左名字、右价格（右对齐，一眼能比） */
.vip-pl-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 4px 12px;
  padding: 11px 14px; margin-bottom: 6px;
  border-radius: 12px; background: rgba(255, 255, 255, .045);
}
.vip-pl-item .nm { font-size: 13.5px; color: #F5EFE4; }
.vip-pl-item .pr { font-size: 13px; color: #9C8E7B; white-space: nowrap; }
.vip-pl-item .pr b { font-size: 14.5px; color: #FFE9B0; }
.vip-pl-item .pr b.free { color: #5DCAA5; }
.vip-pl-item .nt { grid-column: 1 / -1; font-size: 11.5px; color: #7D7263; }
.vip-pl-item.is-free { border: 1px solid rgba(93, 202, 165, .25); }

/* ⑤ 加载态 */
.vip-pl-load { padding: 40px 0; text-align: center; color: #9C8E7B; font-size: 13px; }

/* ============================================================================
   2026-09-28 改版：这一页从「单页价目表」变成「两段切换」（消耗价格 / 消耗明细）
   ----------------------------------------------------------------------------
   老板原话：明细"赤裸裸、光秃秃露在外面不好看" ⇒ 收进本页、顶部给一个分段控件。
   下面是 ⑥ 分段控件 ⑦ 明细段的余额卡 ⑧ 明细列表（类名仍走 vip-pl- 前缀，全局唯一）。
   ============================================================================ */

/* ⑥ 分段控件（胶囊）：两段等宽，选中段金色渐变 + 深色字 */
.vip-pl-tabs {
  display: flex; gap: 4px; padding: 4px; margin: 2px 0 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
}
.vip-pl-tab {
  flex: 1 1 0; min-width: 0; appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  padding: 9px 6px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .2px;
  color: #9C8E7B;
  transition: color .16s ease, background .16s ease;
}
.vip-pl-tab.on {
  color: #2A2110;
  background: linear-gradient(135deg, #F8D98C, #EDB94F);
  box-shadow: 0 2px 10px rgba(237, 185, 79, .22);
}
.vip-pl-pane { margin-top: 14px; }

/* ⑦ 明细段顶部：当前余额（老板："或者里面有一个算力豆余额"） */
.vip-pl-bal {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; margin: 0 0 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245, 200, 106, .16), rgba(245, 200, 106, .05));
  border: 1px solid rgba(245, 200, 106, .28);
}
.vip-pl-bal .lb { font-size: 12.5px; color: #CBB89A; }
.vip-pl-bal .num {
  font-size: 23px; font-weight: 800; line-height: 1; color: #F5C86A;
  font-variant-numeric: tabular-nums;
}
.vip-pl-bal .num .u { font-size: 12px; font-weight: 600; margin-left: 5px; color: #CBB89A; }

/* ⑧ 明细列表（与原主页那块视觉一致，只换前缀，避免与 vip.css 的死样式纠缠） */
.vip-pl-lg { border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .028); }
.vip-pl-lg-item {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.vip-pl-lg-item:last-child { border-bottom: 0; }
.vip-pl-lg-item .ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: rgba(255, 255, 255, .06);
}
.vip-pl-lg-item .mid { flex: 1; min-width: 0; }
.vip-pl-lg-item .r {
  font-size: 13px; color: #E2D8C7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vip-pl-lg-item .t {
  font-size: 11px; color: #7D7263; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.vip-pl-lg-item .d {
  flex: none; font-size: 14.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.vip-pl-lg-item .d.plus { color: #6EE7A8; }
.vip-pl-lg-item .d.minus { color: #F0B27A; }