/*!
 * pricing.css — 充值中心（5 档套餐）样式
 * 只在 pricing.html 引入，避免污染 style.css 那 118KB 的公共表。
 *
 * 版式来源：用户 2026-09-30 提供的参考图（1773×876），关键几何/配色均为实测采样，不是目测：
 *   - 卡宽 320、间距 24、内边距 18；卡高/卡宽 ≈ 2.05（5 张卡等高）
 *   - 顶条 5px（渐变），按钮高 46px，圆角 16px
 *   - 按钮/顶条主色逐档不同：t1 #2158e1 / t2 #493fd7 / t3 #0f766e / t4 #c66507 / t5 #d64c0c
 *   - 角标：t1 green / t2 blue / t3 green / t4 amber / t5 red（与主色是两个维度）
 *   - 特性勾为绿色 #10b981；「赠送」是琥珀渐变药丸；单价是浅底徽章
 *
 * 主题兼容：
 *   - 结构色（底/边/字）一律走主题变量，5 套主题（含暗色）自动跟随
 *   - 每张卡的 --pc 由 data 里的 color 提供；浅色变体一律用 color-mix 与主题变量混，
 *     不写死浅色，否则暗色主题下会出现「深色字压深色底」
 */

/* ⚠ 登录框页签相关的 .ag-tab 覆盖不在这里 —— 登录框是全站的，样式统一放在 style.css 里 */

/* ---------- 页面容器 ---------- */
.pc-wrap { max-width: min(1700px, 100%); margin: 0 auto; }

/* 参考图的「请选择会员套餐」居中标题 + 一条细分割线 */
.pc-titlebar { padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.pc-title { margin: 0; font-size: 26px; font-weight: 800; text-align: center; color: var(--text); letter-spacing: .5px; }

/* ---------- 套餐网格 ---------- */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 1360px) { .pc-grid { gap: 18px; } }
@media (max-width: 1180px) { .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 820px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .pc-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 卡片 ---------- */
.pc-card {
  --pc: var(--brand);
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 16px 24px;
  border: 1px solid color-mix(in srgb, var(--pc) 20%, var(--border));
  border-radius: 16px;
  /* 顶部一层极淡的主色，向下过渡到卡片底色（参考图里企业档的暖调就来自这里） */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pc) 8%, var(--surface)) 0%,
    var(--surface) 60%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
  overflow: hidden;
  /* 让特性列数可以随「卡片自身宽度」而不是视口宽度变化 */
  container-type: inline-size;
}
/* 顶条：参考图 5px 渐变，圆角由卡片的 overflow:hidden 裁出来 */
.pc-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 62%, #fff), var(--pc));
}
/* 企业档：底色再暖一点，和个人档拉开层次 */
.pc-card.pc-ent { background: linear-gradient(180deg,
  color-mix(in srgb, var(--pc) 11%, var(--surface)) 0%,
  var(--surface) 62%); }
/* 推荐档：加一圈光环（沿用 style.css 里 .plan-card.best 的口径） */
.pc-card.pc-best {
  border-color: color-mix(in srgb, var(--pc) 46%, var(--border));
  box-shadow: 0 8px 26px color-mix(in srgb, var(--pc) 18%, transparent);
}

/* 角标：参考图在右上角，实心色 + 白字 */
.pc-tag {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: var(--tc, var(--pc));
}
/* 没有角标的档位留一个占位，保证各卡标题行对齐 */
.pc-tag.pc-tag-empty { visibility: hidden; }
/* 角标配色（tone）——与卡片主色 color 是两件事 */
.pc-tone-green { --tc: #10b981; }
.pc-tone-blue { --tc: #3b82f6; }
.pc-tone-violet { --tc: #7c3aed; }
.pc-tone-amber { --tc: #eab308; }
.pc-tone-orange { --tc: #ea580c; }
.pc-tone-red { --tc: #ef4444; }
.pc-tone-teal { --tc: #14b8a6; }

/* 标题区：居中，下方一条细线（参考图里 sub 与价格框之间） */
.pc-head { padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
.pc-name {
  margin-top: 52px;                 /* 让出右上角标的位置 */
  font-size: 19px; font-weight: 800; text-align: center;
  color: var(--text); letter-spacing: .3px;
}
.pc-sub { margin-top: 6px; min-height: 18px; font-size: 13px; text-align: center; color: var(--text-dim); }

/* 价格框：参考图是一块浅底圆角块，内含 价格 / 图豆 / 原图豆+赠送 三行 */
.pc-pricebox {
  margin-top: 16px;
  padding: 14px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
  text-align: center;
}
.pc-price { display: flex; align-items: baseline; justify-content: center; gap: 1px; color: var(--text); line-height: 1.1; }
.pc-price i { font-style: normal; font-size: 16px; font-weight: 800; }
.pc-price b { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.pc-credits { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 2px; color: var(--text); line-height: 1.05; }
.pc-credits b { font-size: 38px; font-weight: 800; letter-spacing: -1px; }
.pc-credits span { font-size: 13px; font-weight: 700; }

.pc-saverow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pc-origin { font-size: 12.5px; color: var(--text-faint); }
/* 「赠送 +N 图豆」：琥珀渐变药丸（两套主题都用这个固定色，属品牌强调元素） */
.pc-bonus {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  color: #78350f;
  background: linear-gradient(90deg, #fde68a, #fbbf24);
}

/* 单价徽章：参考图贴左，浅主色底 + 主色字 */
.pc-unit {
  align-self: flex-start;
  margin-top: 12px;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  background: color-mix(in srgb, var(--pc) 13%, transparent);
  color: color-mix(in srgb, var(--pc) 72%, var(--text));
}

/* 特性清单：虚线分割 + 绿勾；≥5 项且卡够宽时排成 2 列（行优先，与参考图一致） */
.pc-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px 12px;
  margin: 14px 0 18px;
  padding: 14px 0 0;
  border-top: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
  list-style: none;
}
/* 参考图 2 列需要每列 ≥121px，「点击这里联系我们」（8 字 ×12.5px ≈ 100px + 勾号 20px）才不折行；
   用 container query 按卡片判定，窄屏自动回落单列（不会挤成两半）。
   ⚠ @container 量的是【内容盒】宽度（卡片宽度 − 左右内边距），不是卡片外框宽度，
     所以这里的阈值要按 content-box 设，第一次写成 280（按外框估）导致 308px 的卡也不触发。 */
@container (min-width: 252px) {
  .pc-features.pc-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pc-features li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.pc-features li i { flex: none; font-style: normal; font-weight: 800; color: #10b981; }
.pc-features li span { min-width: 0; }
/* 「点击这里联系我们」：无勾号、主色加粗（参考图里企业套餐特性列表中的橙色一项） */
.pc-features li.pc-contact { display: flex; align-items: center; font-weight: 700; color: color-mix(in srgb, var(--pc) 88%, var(--text)); }
.pc-features li.pc-contact a { color: inherit; text-decoration: none; }
.pc-features li.pc-contact a:hover { text-decoration: underline; }

.pc-note { margin-top: 0; font-size: 12px; line-height: 1.5; color: var(--text-faint); }

/* 按钮：贴底（margin-top:auto），逐档主色渐变 */
.pc-btn {
  margin-top: auto;
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 82%, #fff), var(--pc));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--pc) 24%, transparent);
  transition: filter .15s, transform .12s, box-shadow .2s;
}
.pc-btn:hover { filter: brightness(1.06); }
.pc-btn:active { transform: translateY(1px); }
.pc-btn[disabled] { cursor: not-allowed; opacity: .62; filter: none; }
/* 保留两个修饰类（企业档 = 立即开通）：版式上两条档位一致，都用主色渐变按钮 */
.pc-btn-recharge, .pc-btn-open { /* 见 .pc-btn */ }

/* ---------- 底部免责声明（参考图卡组下方那行灰字） ---------- */
.pc-disclaim {
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-faint);
}

.pc-empty, .pc-loading {
  grid-column: 1 / -1;
  padding: 34px 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-faint);
}

/* ---------- 企业号开通结果条 ---------- */
.pc-entbox {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  border-radius: var(--radius);
  background: var(--grad-soft), var(--surface);
}
.pc-entbox[hidden] { display: none; }
.pc-entbox h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
.pc-entbox p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--text-dim); }
.pc-entcode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  border-radius: 10px;
  background: var(--surface);
}
.pc-entcode span { font-size: 11.5px; color: var(--text-faint); }
.pc-entcode b { font-size: 20px; font-weight: 800; letter-spacing: 3px; color: var(--text); font-variant-numeric: tabular-nums; }
.pc-entbox .pc-copy {
  margin-left: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}