/**
 * /vip 增强版页级样式（docs/vip-redesign-20261030/GLM开发执行规范.md · 20261030-vip-v2）
 * 全部规则限定在 .wc-vip-v2（页面）与 .wc-vip-pay-v2（收银台 Layer 皮肤）下，
 * 不复用 wc-price-main/alt、wc-ticket 等旧定价类；取值只用 wc-tokens.css 变量。
 * 尺寸/动效变量以局部变量挂在两个根类上，不改 wc-tokens.css 全站取值。
 */
.wc-vip-v2,
.wc-vip-pay-v2 {
  /* 动效统一 easing（执行规范 §8）与时长 */
  --wcv-ease: cubic-bezier(.2, .8, .2, 1);
  --wcv-t-fast: 120ms;   /* hover / radio 中点 / 按钮反馈 */
  --wcv-t-sel: 180ms;    /* 档位选中 / 下划线 / FAQ 展开 */
  --wcv-t-receipt: 160ms;/* 回执更换 / 面板切换 */
}

.wc-vip-v2 {
  color: var(--wc-text-1);
  font-size: var(--wc-fs-14);
  line-height: 1.65;
  padding-bottom: 64px;
}

/* 视读辅助（屏幕阅读器专用播报） */
.wc-vip2-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============ 布局容器：≥1024 内容最大宽 1000 ============ */
.wc-vip2-wrap {
  max-width: 1000px;
  margin: 0 auto;
}
.wc-vip2-sec { margin-top: 48px; }

/* ============ Hero ============ */
.wc-vip2-hero { padding: 48px 0 0 0; }
.wc-vip2-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.wc-vip2-hero__text { flex: 1 1 auto; min-width: 0; }
.wc-vip2-hero__title {
  margin: 0;
  font-size: 42px;
  line-height: 1.25;
  font-weight: 900;
  font-family: var(--wc-font-sans);
  color: var(--wc-text-1);
}
.wc-vip2-hero__sub {
  margin: 12px 0 0;
  font-size: 22px;
  line-height: 1.5;
  color: var(--wc-text-2);
}
.wc-vip2-hero__free {
  margin: 16px 0 0;
  font-size: var(--wc-fs-14);
  color: var(--wc-text-3);
}
.wc-vip2-hero__link {
  margin-left: 16px;
  color: var(--wc-ink-600);
  text-decoration: none;
}
.wc-vip2-hero__link:hover { text-decoration: underline; }
.wc-vip2-hero__pic {
  flex: 0 0 auto;
  width: 260px;
  height: 239px;
}
.wc-vip2-hero__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============ 账户信息行 ============ */
.wc-vip2-account { min-height: 24px; }
.wc-vip2-account__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  font-size: var(--wc-fs-13);
  color: var(--wc-text-2);
}
.wc-vip2-account__sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--wc-border);
  margin: 0 12px;
}
.wc-vip2-account__inner b {
  font-family: var(--wc-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--wc-text-1);
  font-weight: 700;
}
.wc-vip2-account__link,
.wc-vip2-account__hook,
.wc-vip2-account__retry {
  color: var(--wc-ink-600);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.wc-vip2-account__link:hover,
.wc-vip2-account__hook:hover,
.wc-vip2-account__retry:hover { text-decoration: underline; }

/* ============ 模式标签（下划线 tab） ============ */
.wc-vip2-modes { border-bottom: 1px solid var(--wc-line-soft); }
.wc-vip2-modes__inner {
  position: relative;
  display: flex;
  gap: 32px;
  height: 44px;
}
.wc-vip2-mtab {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 2px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--wc-text-2);
  cursor: pointer;
  position: relative;
}
.wc-vip2-mtab[aria-selected="true"] { color: var(--wc-primary); font-weight: 700; }
.wc-vip2-mtab[aria-selected="false"]:hover { color: var(--wc-ink-600); }
.wc-vip2-mtab:focus-visible {
  outline: none;
  box-shadow: var(--wc-focus-ring);
  border-radius: var(--wc-radius-tag);
}

/* 定位下划线（translateX + scaleX，transform-origin:left） */
.wc-vip2-ind {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100px;
  height: 2px;
  background: var(--wc-primary);
  transform-origin: left center;
  transition: transform var(--wcv-t-sel) var(--wcv-ease);
}
.wc-vip2-ind--noanim { transition: none; }

/* ============ 周期行（原生 radio + 下划线） ============ */
.wc-vip2-periods {
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--wc-line-soft);
  margin-bottom: 20px;
}
.wc-vip2-periods__group {
  position: relative;
  display: flex;
  gap: 24px;
  height: 44px;
}
.wc-vip2-plabel {
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--wc-text-2);
  cursor: pointer;
  position: relative;
  /* 触控区≥44×44：与周期行同高，且窄屏下不允许压缩换行 */
  height: 44px;
  white-space: nowrap;
  flex-shrink: 0;
}
.wc-vip2-plabel:hover { color: var(--wc-ink-600); }
.wc-vip2-plabel.is-on { color: var(--wc-primary); font-weight: 700; }
.wc-vip2-plabel:focus-within {
  outline: none;
  box-shadow: var(--wc-focus-ring);
  border-radius: var(--wc-radius-tag);
}
.wc-vip2-periods__note {
  margin: 0 0 0 auto;
  font-size: var(--wc-fs-12);
  line-height: 1.6;
  color: var(--wc-text-3);
}
/* 张数包模式同高 24px 说明行 */
.wc-vip2-packnote {
  margin: 0 0 20px;
  height: 24px;
  line-height: 24px;
  font-size: var(--wc-fs-13);
  color: var(--wc-text-2);
}

/* ============ 工作台（左选择 62% / 右回执 38%） ============ */
.wc-vip2-work {
  display: grid;
  grid-template-columns: 62% 38%;
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius-tag);
  background: var(--wc-bg);
}
.wc-vip2-panel {
  padding: 24px;
  min-width: 0;
  border-right: 1px solid var(--wc-border); /* 左右两栏结构分隔（2026-11-01 布局走查：原分隔线随全站去 border-left 一并丢失，两栏内容混为一片） */
}
.wc-vip2-panel[hidden] { display: none; }
.wc-vip2-work__title {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--wc-text-1);
}
.wc-vip2-work__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: var(--wc-fs-13);
  color: var(--wc-text-3);
}
.wc-vip2-work__hint svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--wc-primary); }

/* ---- 档位行（统一网格：radio20 / icon / 内容 / 价格） ---- */
.wc-vip2-tiers { border-top: 1px solid var(--wc-line-soft); }
.wc-vip2-tier,
.wc-vip2-packrow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 112px;
  padding: 16px; /* 12→16px：档位行文字贴边拥挤（2026-11-01 布局走查） */
  border-bottom: 1px solid var(--wc-line-soft);
  background: var(--wc-bg);
  cursor: pointer;
}
.wc-vip2-tier:last-child,
.wc-vip2-packrow:last-child { border-bottom: 0; }
.wc-vip2-tier.is-on,
.wc-vip2-packrow.is-on {
  background: var(--wc-primary-soft);
}
.wc-vip2-vfield {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.wc-vip2-tier,
.wc-vip2-packrow { position: relative; }
.wc-vip2-tier:focus-within,
.wc-vip2-packrow:focus-within {
  outline: none;
  box-shadow: var(--wc-focus-ring);
  z-index: 1;
}
/* 自绘圆环 radio（原生 input 保留焦点，圆点 opacity 切换） */
.wc-vip2-radio {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--wc-border-strong);
  border-radius: 50%;
  background: var(--wc-bg);
  position: relative;
}
.wc-vip2-radio__dot {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--wc-primary);
  opacity: 0;
  transition: opacity var(--wcv-t-fast) var(--wcv-ease);
}
input:checked ~ .wc-vip2-radio { border-color: var(--wc-primary); }
input:checked ~ .wc-vip2-radio .wc-vip2-radio__dot { opacity: 1; }
input:disabled ~ .wc-vip2-radio { opacity: .45; }

.wc-vip2-tier__icon,
.wc-vip2-packrow__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--wc-primary);
}
.wc-vip2-tier__icon svg,
.wc-vip2-packrow__icon svg { width: 32px; height: 32px; }

.wc-vip2-tier__body,
.wc-vip2-packrow__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wc-vip2-tier__top,
.wc-vip2-packrow__top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wc-vip2-tier__name,
.wc-vip2-packrow__name {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--wc-text-1);
}
.wc-vip2-tier__cur {
  flex: 0 0 auto;
  font-style: normal;
  font-size: var(--wc-fs-12);
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--wc-radius-tag);
  background: var(--wc-bg);
  color: var(--wc-primary);
  border: 1px solid var(--wc-primary);
  visibility: hidden;
}
.wc-vip2-tier.is-on .wc-vip2-tier__cur { visibility: visible; }
.wc-vip2-tier__desc {
  font-size: var(--wc-fs-13);
  color: var(--wc-text-2);
}
.wc-vip2-tier__quota,
.wc-vip2-packrow__quota {
  font-size: var(--wc-fs-14);
  color: var(--wc-text-2);
  overflow-wrap: anywhere;
}
.wc-vip2-tier__off,
.wc-vip2-packrow__off {
  font-size: var(--wc-fs-12);
  color: var(--wc-text-3);
  text-decoration: line-through;
}
/* 行内价格：右对齐，价格与「/月」同行基线排布（2026-11-01 走查：原 column 两行让「/月」孤立如断行） */
.wc-vip2-tier__price,
.wc-vip2-packrow__price {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}
.wc-vip2-tier__price b,
.wc-vip2-packrow__price b {
  font-family: var(--wc-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 700;
  color: var(--wc-text-1);
}
.wc-vip2-tier__price em,
.wc-vip2-packrow__price em {
  font-style: normal;
  font-size: var(--wc-fs-13);
  color: var(--wc-text-3);
}
.wc-vip2-tier__note,
.wc-vip2-packrow__note {
  font-size: var(--wc-fs-12);
  color: var(--wc-warn);
}
.wc-vip2-tier.is-disabled,
.wc-vip2-packrow.is-disabled { cursor: default; }
.wc-vip2-tier.is-disabled .wc-vip2-tier__name,
.wc-vip2-packrow.is-disabled .wc-vip2-packrow__name { color: var(--wc-text-3); }

/* ---- 骨架（中性静态，无 shimmer） ---- */
.wc-vip2-skrow {
  min-height: 112px;
  border-bottom: 1px solid var(--wc-line-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.wc-vip2-skrow:last-child { border-bottom: 0; }
.wc-vip2-sk {
  background: var(--wc-tint);
  border-radius: var(--wc-radius-tag);
  display: inline-block;
}
.wc-vip2-sk--circle { width: 20px; height: 20px; border-radius: 50%; }
.wc-vip2-sk--icon { width: 32px; height: 32px; }
.wc-vip2-sk--line { height: 14px; }
.wc-vip2-sk--price { width: 72px; height: 20px; }

/* ============ 回执 ============ */
.wc-vip2-receipt {
  align-self: start; /* 贴内容高：grid 等高拉伸曾致右栏下方 286px 空白（2026-11-01 布局走查） */
  border-top: 2px solid var(--wc-primary); /* 定稿线，顶部不做大圆角 */
  padding: 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wc-vip2-receipt__cap {
  margin: 0 0 4px;
  font-size: var(--wc-fs-12);
  color: var(--wc-text-3);
}
.wc-vip2-receipt__name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--wc-text-1);
}
.wc-vip2-receipt__price {
  margin: 0;
  font-family: var(--wc-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--wc-text-1);
  white-space: nowrap;
}
.wc-vip2-receipt__off {
  display: block;
  margin-top: 2px;
  font-size: var(--wc-fs-12);
  color: var(--wc-text-3);
  text-decoration: line-through;
}
.wc-vip2-receipt__paytype {
  margin: 4px 0 0;
  font-size: var(--wc-fs-13);
  color: var(--wc-text-2);
}
.wc-vip2-receipt__ledger {
  margin: 16px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--wc-line-soft);
}
.wc-vip2-receipt__ledger li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wc-line-soft);
  font-size: var(--wc-fs-14);
}
.wc-vip2-receipt__ledger b {
  font-weight: 400;
  color: var(--wc-text-2);
  flex: 0 0 auto;
}
.wc-vip2-receipt__ledger span {
  text-align: right;
  color: var(--wc-text-1);
  font-family: var(--wc-font-mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* 回执数据区（更换时 160ms 微动效的作用范围） */
.wc-vip2-receipt__data { min-width: 0; }
.wc-vip2-receipt__msg {
  margin: 0 0 12px;
  font-size: var(--wc-fs-13);
  color: var(--wc-warn);
}
.wc-vip2-buy {
  appearance: none;
  border: 0;
  width: 100%;
  height: 44px;
  border-radius: 8px;
  background: var(--wc-primary);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wc-vip2-buy:hover { background: var(--wc-primary-hover); }
.wc-vip2-buy:active { background: var(--wc-primary-active); }
.wc-vip2-buy:focus-visible {
  outline: none;
  box-shadow: var(--wc-focus-ring);
}
.wc-vip2-buy:disabled,
.wc-vip2-buy[disabled] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
/* 继续支付等次级操作：白底描边（不新增第二块实底墨青） */
.wc-vip2-buy--ghost {
  background: var(--wc-bg);
  color: var(--wc-primary);
  border: 1px solid var(--wc-primary);
  width: auto;
  min-width: 120px;
  padding: 0 16px;
}
.wc-vip2-buy--ghost:hover { background: var(--wc-primary-soft); }
.wc-vip2-buy--ghost:active { background: var(--wc-primary-soft-2); }
/* 列表空/错误提示 */
.wc-vip2-listmsg {
  margin: 0;
  padding: 24px 0;
  font-size: var(--wc-fs-14);
  color: var(--wc-text-2);
}
.wc-vip2-receipt__foot {
  margin: 12px 0 0;
  font-size: var(--wc-fs-12);
  line-height: 1.6;
  color: var(--wc-text-3);
  text-align: center;
}
.wc-vip2-receipt__link {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--wc-fs-13);
  color: var(--wc-ink-600);
  cursor: pointer;
  align-self: center;
  min-height: 24px;
}
.wc-vip2-receipt__link:hover { text-decoration: underline; }
.wc-vip2-receipt__link svg {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-left: 2px;
}
.wc-vip2-receipt__links {
  margin-top: 12px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
/* 请求 spinner：14px，800ms linear 循环，仅在真实请求期 */
.wc-vip2-spin {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wcVip2Spin 800ms linear infinite;
  flex: 0 0 auto;
}
@keyframes wcVip2Spin { to { transform: rotate(360deg); } }

/* ============ 两种额度 ============ */
.wc-vip2-sec-title {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--wc-text-1);
}
.wc-vip2-quota__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--wc-line-soft);
}
.wc-vip2-quota__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wc-line-soft);
}
.wc-vip2-quota__row svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--wc-primary);
}
.wc-vip2-quota__name {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--wc-text-1);
}
.wc-vip2-quota__desc {
  margin-left: auto;
  text-align: right;
  font-size: var(--wc-fs-14);
  color: var(--wc-text-2);
}

/* ============ 图片包快捷区（会员模式） ============ */
/* 张数包快捷区补节奏：上分隔线 + 内距，与档位区拉开（2026-11-01 布局走查：原贴边无分隔） */
.wc-vip2-quick { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--wc-line-soft); }
.wc-vip2-quick__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--wc-text-1);
}
.wc-vip2-quick__sub {
  margin: 4px 0 12px;
  font-size: var(--wc-fs-13);
  color: var(--wc-text-2);
}
.wc-vip2-quick__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  border-top: 1px solid var(--wc-line-soft);
}
.wc-vip2-quick__row {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--wc-line-soft);
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font: inherit;
  font-size: var(--wc-fs-14);
  color: var(--wc-text-1);
  cursor: pointer;
  text-align: left;
}
.wc-vip2-quick__row svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--wc-primary);
}
.wc-vip2-quick__n { flex: 1 1 auto; min-width: 0; }
.wc-vip2-quick__p {
  font-family: var(--wc-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wc-vip2-quick__go { color: var(--wc-ink-600); }
.wc-vip2-quick__fail {
  margin: 12px 0 0;
  font-size: var(--wc-fs-13);
  color: var(--wc-warn);
  display: flex;
  align-items: center;
  gap: 12px;
}
.wc-vip2-retry {
  appearance: none;
  background: none;
  border: 1px solid var(--wc-border-strong);
  border-radius: var(--wc-radius-tag);
  min-height: 32px;
  padding: 0 12px;
  font: inherit;
  font-size: var(--wc-fs-13);
  color: var(--wc-primary);
  cursor: pointer;
}
.wc-vip2-retry:hover { background: var(--wc-tint); }
.wc-vip2-retry:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }

/* ============ 完整权益与购买须知（可展开） ============ */
.wc-vip2-trust__toggle {
  appearance: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--wc-line-soft);
  border-bottom: 1px solid var(--wc-line-soft);
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--wc-text-1);
  cursor: pointer;
}
.wc-vip2-trust__toggle svg {
  width: 16px;
  height: 16px;
  color: var(--wc-text-2);
  transition: transform var(--wcv-t-sel) var(--wcv-ease);
}
.wc-vip2-trust__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wc-vip2-trust__toggle:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-vip2-trust__body { overflow: hidden; }
.wc-vip2-trust__body[hidden] { display: none; }
.wc-vip2-trust__inner {
  padding: 8px 0 0;
  border-bottom: 1px solid var(--wc-line-soft);
}
.wc-vip2-trust__row {
  display: flex;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wc-line-soft);
  font-size: var(--wc-fs-14);
}
.wc-vip2-trust__row:last-child { border-bottom: 0; }
.wc-vip2-trust__row b {
  flex: 0 0 7em;
  font-weight: 400;
  color: var(--wc-text-2);
}
.wc-vip2-trust__row span { flex: 1 1 auto; min-width: 0; color: var(--wc-text-1); }

/* ============ FAQ ============ */
.wc-vip2-faq { border-top: 1px solid var(--wc-line-soft); }
.wc-vip2-faq__item { border-bottom: 1px solid var(--wc-line-soft); }
.wc-vip2-faq__q {
  appearance: none;
  background: none;
  border: 0;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--wc-text-1);
  cursor: pointer;
  text-align: left;
}
.wc-vip2-faq__q svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--wc-text-2);
  transition: transform var(--wcv-t-sel) var(--wcv-ease);
}
.wc-vip2-faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.wc-vip2-faq__q:hover { color: var(--wc-ink-600); }
.wc-vip2-faq__q:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-vip2-faq__a { overflow: hidden; }
.wc-vip2-faq__a[hidden] { display: none; }
.wc-vip2-faq__a p {
  margin: 0;
  padding: 0 0 12px;
  font-size: var(--wc-fs-14);
  color: var(--wc-text-2);
}

/* ============ 邀请行 ============ */
.wc-vip2-invite { margin-top: 32px; }
.wc-vip2-invite a {
  color: var(--wc-ink-600);
  text-decoration: none;
  font-size: 15px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.wc-vip2-invite a:hover { text-decoration: underline; }

/* hover 反馈仅 fine pointer（触屏不制造粘住 hover） */
@media (hover: hover) and (pointer: fine) {
  .wc-vip2-tier:not(.is-on):hover,
  .wc-vip2-packrow:not(.is-on):hover { background: var(--wc-tint); }
  .wc-vip2-quick__row:hover { background: var(--wc-tint); }
}

/* ============ 收银台 Layer 皮肤 ============ */
.wc-vip-pay-v2 {
  padding: 4px 28px 24px;
  font-size: var(--wc-fs-14);
  color: var(--wc-text-1);
}
/* 仅矮视口/窄屏保留内部滚动保护，桌面高度完整展示、无滚动条 */
@media (max-height: 640px), (max-width: 480px) {
  .wc-vip-pay-v2 {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
}
/* 关闭按钮：layer 默认 sprite 图标依赖背景图不可靠，改文字「×」（同 wc-media.css 复查弹窗方案） */
.wc-vip-pay-v2-skin .layui-layer-setwin .layui-layer-close {
  display: block; width: 24px; height: 24px; margin: 10px 14px 0 0;
  background: none; color: var(--wc-text-3);
  font: 400 26px/24px var(--wc-font-sans); text-align: center; cursor: pointer;
}
.wc-vip-pay-v2-skin .layui-layer-setwin .layui-layer-close::before { content: "×"; }
.wc-vip-pay-v2-skin .layui-layer-setwin .layui-layer-close:hover { background: none; color: var(--wc-primary); }
.wc-vip-pay-v2-skin .layui-layer-setwin .layui-layer-close:focus-visible { outline: none; color: var(--wc-primary); }
.wc-vip-pay-v2__name {
  margin: 4px 0 2px;
  font-size: 16px;
  font-weight: 700;
}
.wc-vip-pay-v2__no {
  margin: 0 0 12px;
  font-size: var(--wc-fs-12);
  color: var(--wc-text-3);
  font-family: var(--wc-font-mono);
  overflow-wrap: anywhere;
}
.wc-vip-pay-v2__mock {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--wc-warn-border);
  border-radius: var(--wc-radius-tag);
  background: var(--wc-warn-bg);
  color: var(--wc-warn);
  font-size: var(--wc-fs-13);
  font-weight: 700;
}
.wc-vip-pay-v2__ledger {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--wc-line-soft);
}
.wc-vip-pay-v2__ledger li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--wc-line-soft);
  font-size: var(--wc-fs-13);
}
.wc-vip-pay-v2__ledger b { font-weight: 400; color: var(--wc-text-2); }
.wc-vip-pay-v2__ledger span {
  font-family: var(--wc-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.wc-vip-pay-v2__amount {
  margin: 0 0 4px;
  font-family: var(--wc-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
}
.wc-vip-pay-v2__amountcap {
  margin: 0 0 12px;
  font-size: var(--wc-fs-12);
  color: var(--wc-text-3);
}
.wc-vip-pay-v2__qrbox {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}
.wc-vip-pay-v2__qrbox img { display: block; width: 216px; height: 216px; }
.wc-vip-pay-v2__qrhint {
  margin: 0 0 8px;
  text-align: center;
  font-size: var(--wc-fs-13);
  color: var(--wc-text-2);
}
.wc-vip-pay-v2__status {
  margin: 0;
  font-size: var(--wc-fs-13);
  color: var(--wc-text-2);
  text-align: center;
}
/* 状态行平时为空：不占位不撑高（提示仅在轮询暂停/需重登/凭证异常时出现） */
.wc-vip-pay-v2__status:empty { display: none; }
.wc-vip-pay-v2__status:not(:empty) { margin: 10px 0; }
.wc-vip-pay-v2__btn {
  appearance: none;
  border: 0;
  width: 100%;
  height: 44px;
  border-radius: 8px;
  background: var(--wc-primary);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wc-vip-pay-v2__btn:hover { background: var(--wc-primary-hover); }
.wc-vip-pay-v2__btn:active { background: var(--wc-primary-active); }
.wc-vip-pay-v2__btn:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-vip-pay-v2__btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.wc-vip-pay-v2__link {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--wc-fs-13);
  color: var(--wc-ink-600);
  cursor: pointer;
  min-height: 32px;
}
.wc-vip-pay-v2__link:hover { text-decoration: underline; }

/* ============================================================
   响应式：768–1023
   ============================================================ */
@media (max-width: 1023px) {
  .wc-vip2-wrap { max-width: none; padding: 0 24px; }
  .wc-vip2-sec { margin-top: 40px; }
  .wc-vip2-hero { padding: 40px 0; }
  .wc-vip2-hero__title { font-size: 36px; line-height: 1.3; }
  .wc-vip2-hero__sub { font-size: 20px; }
  .wc-vip2-hero__pic { width: 160px; height: 148px; }
  .wc-vip2-work { grid-template-columns: 58% 42%; }
  .wc-vip2-panel { padding: 20px; }
  .wc-vip2-tier, .wc-vip2-packrow { min-height: 120px; }
  .wc-vip2-tier__icon svg, .wc-vip2-packrow__icon svg { width: 28px; height: 28px; }
  .wc-vip2-receipt { padding: 20px; }
  .wc-vip2-receipt__price { font-size: 36px; }
}

/* ============================================================
   响应式：480–767（单列、竖分隔线改横分隔线、插画隐藏）
   ============================================================ */
@media (max-width: 767px) {
  .wc-vip2-wrap { padding: 0 20px; }
  .wc-vip2-sec { margin-top: 32px; }
  .wc-vip2-hero { padding: 32px 0; }
  .wc-vip2-hero__title { font-size: 32px; }
  .wc-vip2-hero__sub { font-size: 18px; }
  .wc-vip2-hero__pic { display: none; } /* 隐藏且不留槽 */
  .wc-vip2-work { grid-template-columns: 1fr; }
  .wc-vip2-receipt {
    border-left: 0;
    border-top: 2px solid var(--wc-primary);
  }
  .wc-vip2-panel { padding: 20px; }
  .wc-vip2-tier, .wc-vip2-packrow { min-height: 104px; }
  .wc-vip2-receipt { padding: 20px; }
  .wc-vip2-receipt__price { font-size: 36px; }
  .wc-vip2-buy { height: 48px; }
  .wc-vip2-quick__grid { grid-template-columns: 1fr; column-gap: 0; }
}

/* ============================================================
   响应式：<480
   ============================================================ */
@media (max-width: 479px) {
  .wc-vip2-wrap { padding: 0 16px; }
  .wc-vip2-hero { padding: 28px 0 32px; }
  .wc-vip2-hero__title { font-size: 30px; }
  .wc-vip2-panel { padding: 16px; }
  .wc-vip2-receipt { padding: 16px; }
  .wc-vip2-tier, .wc-vip2-packrow { min-height: 112px; }
  .wc-vip2-tier__icon svg, .wc-vip2-packrow__icon svg { width: 24px; height: 24px; }
  .wc-vip2-tier__name { font-size: 17px; }
  .wc-vip2-quota__row { flex-wrap: wrap; }
  .wc-vip2-quota__desc { margin-left: 36px; text-align: left; flex-basis: 100%; }
  .wc-vip2-trust__row { flex-direction: column; gap: 4px; }
  /* 周期行：标签不压缩，说明行整行换到下方，避免「月付」逐字竖排 */
  .wc-vip2-periods { flex-wrap: wrap; row-gap: 2px; }
  .wc-vip2-periods__group { gap: 20px; }
  .wc-vip2-periods__note { flex-basis: 100%; margin-left: 0; }
}

/* 极窄（320 档）：档位标题与价格各占一行 */
@media (max-width: 359px) {
  .wc-vip2-tier, .wc-vip2-packrow { flex-wrap: wrap; }
  .wc-vip2-tier__price, .wc-vip2-packrow__price {
    flex-basis: 100%;
    margin-left: 44px;
    align-items: flex-start;
    text-align: left;
  }
}

/* ============================================================
   减少动态效果：动画/过渡 0ms，滚动 auto（JS 侧同步分支兜底）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wc-vip2-ind,
  .wc-vip2-radio__dot,
  .wc-vip2-trust__toggle svg,
  .wc-vip2-faq__q svg,
  .wc-vip2-trust__body,
  .wc-vip2-faq__a {
    transition: none !important;
  }
  .wc-vip2-spin { animation: none !important; }
}
