/* 前台支付弹窗：套餐选择 + 周期选择 + 协议勾选 + 微信/支付宝支付（不再跳转页面） */
.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start; /* 弹窗从顶部开始，内容撑开时由页面滚动承接，避免内部滚动条 */
  justify-content: center;
  padding: 24px 0;
  overflow: auto; /* 极小屏兜底：允许整个弹窗容器滚动 */
}
.pay-modal[hidden] { display: none; }
.pay-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
}
.pay-modal-card {
  position: relative;
  background: var(--pay-surface);
  color: var(--pay-ink-800, #1f2937);
  border-radius: 18px;
  /* 1200px：既让套餐卡铺满整行（flex:1 1 0 右侧不留空），又不至于把弹窗拉成横长条；
     取消内部滚动：内容自然撑开，由外层 .pay-modal 整体滚动承接，避免右侧滚动条 */
  width: min(1200px, 94vw);
  max-height: none;
  overflow: visible;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

/* 顶部标题 */
.pay-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  border-bottom: 1px solid var(--pay-line-100, #f0f0f0);
}
.pay-modal-title { display: flex; align-items: baseline; gap: 16px; }
.pay-modal-logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--pay-ink, #111827);
}
.pay-modal-current {
  font-size: 13px;
  color: var(--pay-muted, #6b7280);
}
.pay-modal-close {
  border: 0;
  background: var(--pay-surface-3, #f3f4f6);
  color: var(--pay-ink-600, #4b5563);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pay-modal-close:hover { background: var(--pay-line, #e5e7eb); }

.pay-modal-body { padding: 22px 26px 26px; }

/* 套餐卡片区：卡片自适应铺满整行（不再固定 220px，避免宽弹窗右侧留空）；
   卡片过窄时按 min-width 兜底，由父级横向滚动承接 */
.pay-plan-section { margin-bottom: 16px; }
.pay-plan-scroll {
  display: flex;
  align-items: stretch;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.pay-plan-scroll::-webkit-scrollbar { height: 6px; }
.pay-plan-scroll::-webkit-scrollbar-thumb { background: var(--pay-line, #e5e7eb); border-radius: 3px; }
.pay-plan-card {
  position: relative;
  flex: 1 1 0;
  min-width: 210px;
  border: 1.5px solid var(--pay-line, #e5e7eb);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  background: var(--pay-surface);
}
.pay-plan-card:hover { border-color: var(--pay-green, #10b981); }
.pay-plan-card.selected {
  border-color: var(--pay-green, #10b981);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}
.pay-plan-card.current {
  border-color: var(--pay-blue, #3b82f6);
  background: var(--pay-blue-bg, #eff6ff);
}
.pay-plan-card.current.selected {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.pay-plan-card.highlight.selected { border-color: var(--pay-green, #10b981); }
/* 卡头：左「套餐名（含徽标）+ 描述」、右「价格」——价格贴卡片右上角
   （2026-09-21 用户要求：价格移到卡片右上角）。徽标由绝对定位改为跟随套餐名内联，
   把右上角让给价格，两者不再争位 */
.pay-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pay-plan-head { flex: 1 1 auto; min-width: 0; }
.pay-plan-badge,
.pay-current-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--pay-surface-3, #f3f4f6);
  color: var(--pay-muted, #6b7280);
  white-space: nowrap;
}
.pay-current-badge {
  background: var(--pay-blue-100, #dbeafe);
  color: var(--pay-blue-d, #1d4ed8);
}
.pay-plan-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-plan-desc {
  font-size: 12px;
  color: var(--pay-muted, #6b7280);
  margin-bottom: 0;
  min-height: 16px;
  line-height: 1.45;
}
.pay-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}
.pay-plan-currency { font-size: 14px; color: var(--pay-ink, #111827); }
.pay-plan-amount { font-size: 24px; font-weight: 700; color: var(--pay-ink, #111827); }
.pay-plan-unit { font-size: 13px; color: var(--pay-muted, #6b7280); }
.pay-plan-feat-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pay-ink, #111827);
  margin: 8px 0 4px;
}
/* 权益列表：单列全量展示、无下拉滚动条（2026-09-21 用户要求：权益不要分 2 列）；
   条目用圆点标记替代行分隔线 */
.pay-plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--pay-ink-600, #4b5563);
  display: grid;
  grid-template-columns: 1fr;
  overflow: visible;
}
.pay-plan-features li {
  position: relative;
  padding: 3px 0 3px 13px;
  line-height: 1.5;
  word-break: break-word;
}
.pay-plan-features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pay-green, #10b981);
}

/* 弹窗内「适用对象（个人/企业）」账号属性切换：按账号属性默认高亮，可手动切换 */
.pay-scope-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pay-scope-label {
  font-size: 13px;
  color: var(--pay-muted, #6b7280);
  white-space: nowrap;
}
.pay-scope-seg {
  display: inline-flex;
  border: 1px solid var(--pay-line, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  background: var(--pay-surface-2, #f9fafb);
}
.pay-scope-tab {
  border: 0;
  background: transparent;
  color: var(--pay-ink-600, #4b5563);
  font-size: 13px;
  padding: 7px 18px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pay-scope-tab + .pay-scope-tab { border-left: 1px solid var(--pay-line, #e5e7eb); }
.pay-scope-tab:hover { color: var(--pay-ink, #111827); }
.pay-scope-tab.active {
  background: var(--pay-green, #10b981);
  color: var(--pay-surface);
}

/* 周期切换 */
.pay-billing-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pay-billing-tab {
  flex: 1;
  min-width: 150px;
  border: 1.5px solid var(--pay-line, #e5e7eb);
  border-radius: 12px;
  padding: 9px 14px;
  background: var(--pay-surface);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color .15s, background .15s;
}
.pay-billing-tab:hover { border-color: var(--pay-green, #10b981); }
.pay-billing-tab.selected {
  border-color: var(--pay-green, #10b981);
  background: var(--pay-green-bg, #f0fdf4);
}
.pay-billing-top { display: flex; align-items: center; gap: 6px; }
.pay-billing-name { font-size: 14px; font-weight: 600; color: var(--pay-ink, #111827); }
.pay-billing-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--pay-ink, #111827);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.pay-billing-cur { font-size: 14px; font-weight: 700; }
.pay-billing-unit { font-size: 12px; color: var(--pay-muted, #6b7280); margin-left: 2px; font-weight: 400; }
.pay-save-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--pay-warn, #ea580c);
  background: var(--pay-warn-bg, #fff7ed);
  padding: 2px 6px;
  border-radius: 999px;
}

/* 支付区 */
.pay-payment {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
/* 窄屏：支付区上下堆叠；套餐卡改为定宽横滑（权益列表本就是单列，无需再切） */
@media (max-width: 860px) {
  .pay-payment { flex-direction: column; }
  .pay-plan-card { flex: 0 0 240px; min-width: 0; }
  /* 列向堆叠时恢复通栏宽度，居中只用于桌面并排布局 */
  .pay-summary { align-self: stretch; }
}
.pay-qr-area {
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 渠道切换按钮组挪到二维码正下方：与二维码同宽，不再占右栏通栏宽度 */
.pay-qr-area .pay-channel-tabs {
  width: 100%;
  margin: 12px 0 0;
  gap: 8px;
}
.pay-qr-area .pay-channel-tab {
  padding: 8px 0;
  font-size: 13px;
  border-radius: 9px;
}
.pay-qr-title {
  font-size: 13px;
  color: var(--pay-ink-700, #374151);
  margin-bottom: 8px;
}
.pay-qr-box {
  position: relative;
  width: 212px;
  min-height: 228px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--pay-surface-2, #f9fafb);
  border: 1px solid var(--pay-line, #e5e7eb);
}
.pay-qr-placeholder {
  width: 100%;
  height: 100%;
  min-height: 228px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pay-qr-svg { width: 172px; height: 172px; }
.pay-qr-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.pay-qr-overlay-text {
  font-size: 13px;
  color: var(--pay-ink-600, #4b5563);
}
.pay-agree-btn {
  padding: 8px 20px;
  border-radius: 999px;
  border: none;
  background: var(--pay-ink-solid, #0f172a);
  color: var(--pay-surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s ease, transform .1s ease;
}
.pay-agree-btn:hover { opacity: .9; }
.pay-agree-btn:active { transform: translate(-50%, -50%) scale(.98); }
/* 套餐弹窗：「同意协议」按钮覆盖在二维码正中央 */
.pay-agree-btn.pay-agree-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  padding: 10px 24px;
  font-size: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  transform: translate(-50%, -50%);
}
.pay-qr-overlay { z-index: 2; }
/* 二维码刷新提示：无按钮形态（勾选协议即自动出码，取消再勾选即刷新） */
.pay-qr-refresh-tip {
  margin-top: 10px;
  font-size: 12px;
  color: var(--pay-faint, #9ca3af);
  text-align: center;
  line-height: 1.6;
}
.pay-qr-img {
  width: 180px;
  height: 180px;
  display: block;
  margin: 14px auto 0;
  border-radius: 8px;
}
/* 本地二维码（vendor/qrcode.js 生成的 SVG）：容器定尺寸，SVG 自适应填充，不依赖外部二维码服务 */
.pay-qr-img > svg,
.pts-qr-img > svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  background: var(--pay-surface);
}

/* 二维码区堆叠容器：.pay-qr-placeholder 原本是「行向 flex 居中单个占位图」的布局，
   填入「二维码 + 提示文案」两个子元素时会被排成一行，二维码被横向挤扁（实测 63px 宽、纵横比失真）。
   这里统一用单层块级容器纵向堆叠，二维码恒为 180x180（小屏由媒体查询同步缩放）。 */
.pay-qr-stack { width: 100%; display: block; }
.pay-qr-img { flex: none; }
/* auto 模式扫码不可用时的「改用收银台支付」按钮（须用户主动点击才跳转） */
.pay-fallback-btn { margin-top: 10px; }
.pay-qr-tip {
  font-size: 12px;
  color: var(--pay-muted, #6b7280);
  text-align: center;
  padding: 10px 16px 0;
  line-height: 1.5;
}

/* 右侧汇总 */
/* 支付动作按钮已移除：右栏内容在整行内垂直居中，避免下方大片空白 */
.pay-summary {
  flex: 1;
  min-width: 0;
  align-self: center;
}
.pay-amount-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.pay-currency { font-size: 17px; font-weight: 600; }
.pay-amount-num { font-size: 28px; font-weight: 700; color: var(--pay-ink, #111827); }
.pay-amount-period { font-size: 14px; color: var(--pay-muted, #6b7280); }
.pay-plan-line {
  font-size: 13px;
  color: var(--pay-muted, #6b7280);
  margin-bottom: 12px;
  line-height: 1.5;
}
.pay-refund-line {
  font-size: 13px;
  color: var(--pay-green-d, #15803d);
  background: var(--pay-green-bg, #f0fdf4);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.pay-agree {
  font-size: 13px;
  color: var(--pay-ink-600, #4b5563);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pay-agree input { margin-top: 2px; }
.pay-agree a { color: var(--pay-link, #2563eb); text-decoration: none; }
.pay-agree a:hover { text-decoration: underline; }

.pay-channel-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.pay-channel-tab {
  flex: 1;
  border: 1.5px solid var(--pay-line, #e5e7eb);
  border-radius: 10px;
  padding: 9px;
  background: var(--pay-surface);
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
/* 微信＝绿色按钮：未选中为浅绿底绿字，选中为实心绿底白字 */
.pay-channel-tab.wechat { border-color: var(--pay-wechat, #07c160); color: var(--pay-wechat, #07c160); background: var(--pay-green-bg2, #f2fdf6); }
.pay-channel-tab.wechat:hover { background: var(--pay-green-bg3, #e6faef); }
.pay-channel-tab.wechat.selected {
  border-color: var(--pay-wechat, #07c160);
  background: var(--pay-wechat, #07c160);
  color: var(--pay-surface);
  box-shadow: 0 2px 8px rgba(7, 193, 96, 0.28);
}
/* 支付宝＝蓝色按钮：未选中为浅蓝底蓝字，选中为实心蓝底白字 */
.pay-channel-tab.alipay { border-color: var(--pay-alipay, #1677ff); color: var(--pay-alipay, #1677ff); background: var(--pay-blue-bg2, #f2f7ff); }
.pay-channel-tab.alipay:hover { background: var(--pay-blue-bg3, #e6f0ff); }
.pay-channel-tab.alipay.selected {
  border-color: var(--pay-alipay, #1677ff);
  background: var(--pay-alipay, #1677ff);
  color: var(--pay-surface);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.28);
}
/* 渠道未就绪：一律灰显且不吃 hover（放在彩色规则之后，确保覆盖） */
.pay-channel-tab.disabled,
.pay-channel-tab.disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--pay-surface-2, #f9fafb);
  border-color: var(--pay-line, #e5e7eb);
  color: var(--pay-faint, #9ca3af);
  box-shadow: none;
}

.pay-actions { display: flex; flex-direction: column; gap: 10px; }
.pay-btn {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.pay-btn:hover { opacity: 0.92; }
/* .pay-btn 保留：支付宝「改用收银台支付」回退按钮仍复用（.pay-btn-alipay）；
   微信/原主色按钮随套餐弹窗支付按钮一并移除，避免死样式。 */
.pay-btn-alipay { background: var(--pay-alipay, #1677ff); color: var(--pay-surface); }

.pay-login-tip,
.pay-miss-tip,
.pay-ch-miss {
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.pay-login-tip,
.pay-miss-tip { background: var(--pay-warn-bg, #fff7ed); color: var(--pay-warn-d, #92400e); }
.pay-login-tip a,
.pay-miss-tip a { color: var(--pay-warn, #ea580c); text-decoration: none; }
.pay-ch-miss { background: var(--pay-error-bg2, #fff4f4); color: var(--pay-error, #b91c1c); margin-bottom: 8px; }

.pay-msg {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-top: 10px;
  line-height: 1.6;
}
.pay-msg.err { background: var(--pay-error-bg, #fef2f2); color: var(--pay-error, #b91c1c); }
.pay-msg.ok { background: var(--pay-green-bg, #f0fdf4); color: var(--pay-green-d, #15803d); }
.pay-loading {
  color: var(--pay-muted, #6b7280);
  font-size: 13px;
  padding: 14px 0;
  text-align: center;
}

/* 「单独购买积分」文字链：定价页入口与套餐弹窗入口共用同一视觉（单一定义，禁四·不各写一套） */
.points-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--pay-link, #2563eb);
  cursor: pointer;
}
.points-link:hover { text-decoration: underline; }
/* 套餐弹窗内入口：计费周期行下方居中一行 */
.pay-points-entry {
  margin: -6px 0 12px;
  text-align: center;
}
.pay-points-entry .points-link { font-size: 13px; }

/* 中等矮屏（约 860~940 高）：轻压缩留白，让弹窗一屏放完、不出现自身滚动条。
   阈值由 940 降到 860 —— 915 高这类窗口不再被压缩，弹窗比例才不显扁 */
@media (max-height: 860px) {
  .pay-modal-header { padding: 12px 22px; }
  .pay-modal-body { padding: 14px 22px 16px; }
  .pay-plan-section { margin-bottom: 12px; }
  .pay-plan-card { padding: 12px 15px; }
  .pay-plan-name { font-size: 15px; }
  .pay-plan-amount { font-size: 22px; }
  .pay-plan-top { margin-bottom: 7px; }
  .pay-plan-feat-title { margin: 5px 0 3px; }
  .pay-plan-features li { padding: 2px 0 2px 13px; line-height: 1.45; }
  .pay-plan-features li::before { top: 9px; }
  .pay-billing-row { margin-bottom: 11px; }
  .pay-billing-tab { padding: 7px 13px; }
  .pay-billing-price { font-size: 16px; }
  .pay-plan-line { margin-bottom: 9px; }
  .pay-agree { margin-bottom: 11px; }
  .pay-qr-area .pay-channel-tabs { margin-top: 10px; }
  .pay-qr-box { min-height: 200px; }
  .pay-qr-placeholder { min-height: 200px; }
  .pay-qr-svg { width: 152px; height: 152px; }
  .pay-qr-img { width: 162px; height: 162px; }
  .pay-btn { padding: 10px; }
}

/* 极矮屏（1366×768 这类 768 高）：再压一档，优先保住「一屏内、无自身滚动条」。
   权益改单列后列表变高，这里同步收紧条目行高与各处留白，把多出来的高度吃回去 */
@media (max-height: 780px) {
  .pay-modal-header { padding: 8px 18px; }
  .pay-modal-body { padding: 9px 18px 10px; }
  .pay-plan-section { margin-bottom: 6px; }
  .pay-plan-card { padding: 9px 12px; }
  .pay-plan-amount { font-size: 21px; }
  .pay-plan-top { margin-bottom: 4px; }
  .pay-plan-feat-title { margin: 2px 0 1px; }
  .pay-plan-features li { padding: 1px 0 1px 12px; line-height: 1.35; }
  .pay-plan-features li::before { top: 8px; }
  .pay-billing-row { margin-bottom: 6px; }
  .pay-billing-tab { padding: 5px 11px; }
  .pay-points-entry { margin: -4px 0 8px; }
  .pay-plan-line { margin-bottom: 5px; }
  .pay-agree { margin-bottom: 6px; }
  .pay-qr-area .pay-channel-tabs { margin-top: 7px; gap: 7px; }
  .pay-qr-area .pay-channel-tab { padding: 5px 0; font-size: 12px; }
  .pay-qr-box { min-height: 152px; }
  .pay-qr-placeholder { min-height: 152px; }
  .pay-qr-svg { width: 116px; height: 116px; }
  .pay-qr-img { width: 126px; height: 126px; }
  .pay-btn { padding: 8px; }
}

/* ===================== 定价页「单独购买积分」入口（轻量文字链，不再占一整块版面） ===================== */
.pricing-points .points-inline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  text-align: center;
}
.pricing-points .points-link {
  color: var(--accent-600, #14b8a6);
  font-size: 16px;
  font-weight: 600;
}
.pricing-points .points-inline-sub {
  font-size: 13px;
  color: var(--muted, #64748b);
}

/* ===================== 购买积分弹窗（独立积分包） ===================== */
.pay-modal-card-points {
  width: min(470px, 96vw);
}
.pts-header { border-bottom: 0; padding: 20px 24px 6px; }
.pts-body { padding: 0 24px 24px; }

/* 数量行：应付积分总数 + 步进器（不限量时可一直加） */
.pts-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.pts-qty-value { display: flex; align-items: baseline; gap: 6px; }
.pts-qty-value b { font-size: 30px; font-weight: 700; color: var(--pay-ink, #111827); line-height: 1.1; }
.pts-qty-value span { font-size: 14px; color: var(--pay-ink, #111827); }
.pts-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pay-line, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: var(--pay-surface);
}
.pts-step-btn {
  border: 0;
  background: var(--pay-surface);
  color: var(--pay-ink-700, #374151);
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.pts-step-btn:hover { background: var(--pay-surface-3, #f3f4f6); }
.pts-step-btn:disabled { color: var(--pay-border-300, #d1d5db); cursor: not-allowed; background: var(--pay-surface); }
.pts-step-input {
  width: 46px;
  height: 30px;
  border: 0;
  border-left: 1px solid var(--pay-line, #e5e7eb);
  border-right: 1px solid var(--pay-line, #e5e7eb);
  text-align: center;
  font-size: 13px;
  color: var(--pay-ink, #111827);
  outline: none;
}

/* 说明条（配置 note，含有效期天数；前端不拼文案） */
.pts-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--pay-surface-2, #f9fafb);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--pay-muted, #6b7280);
  margin-bottom: 16px;
}
.pts-tip-ico {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--pay-faint, #9ca3af);
  color: var(--pay-muted, #6b7280);
  font-size: 10px;
  line-height: 13px;
  text-align: center;
  margin-top: 1px;
}

/* 支付盒：左二维码 + 右支付信息 */
.pts-pay-box {
  display: flex;
  gap: 18px;
  border: 1px solid var(--pay-line, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
}
.pts-qr-col {
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pts-qr-box {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 8px;
  background: var(--pay-surface-2, #f9fafb);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pts-qr-svg { width: 110px; height: 110px; }
.pts-qr-img { width: 122px; height: 122px; display: block; }
.pts-qr-hint {
  font-size: 11px;
  color: var(--pay-faint, #9ca3af);
  text-align: center;
  line-height: 1.4;
  margin: 8px 0 10px;
}
.pts-buy-btn {
  border: 0;
  border-radius: 999px;
  background: var(--pay-ink, #111827);
  color: var(--pay-surface);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
  transition: opacity .2s ease, transform .1s ease;
}
.pts-buy-btn:hover { background: var(--pay-ink-700, #374151); }
.pts-buy-btn:disabled { background: var(--pay-border-300, #d1d5db); cursor: not-allowed; }
/* 积分弹窗：「立即购买」按钮覆盖在二维码正中央 */
.pts-buy-btn.pts-buy-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  transform: translate(-50%, -50%);
}
.pts-buy-btn.pts-buy-center:active { transform: translate(-50%, -50%) scale(.98); }

.pts-info-col { flex: 1; min-width: 0; }
.pts-channel-tabs { margin-bottom: 12px; }
.pts-channel-tabs .pay-channel-tab { padding: 7px 0; font-size: 12px; border-radius: 8px; }
.pts-channel-title { font-size: 13px; color: var(--pay-muted, #6b7280); margin-bottom: 6px; }
.pts-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 14px;
}
.pts-price-cur { font-size: 15px; font-weight: 600; color: var(--pay-ink, #111827); }
.pts-price-num { font-size: 26px; font-weight: 700; color: var(--pay-ink, #111827); }
.pts-rows { display: flex; flex-direction: column; gap: 8px; }
.pts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}
.pts-row span { color: var(--pay-faint, #9ca3af); }
.pts-row b { color: var(--pay-ink, #111827); font-weight: 600; }

@media (max-width: 480px) {
  .pts-pay-box { flex-direction: column; align-items: center; }
  .pts-qr-col { flex: none; }
  .pts-info-col { width: 100%; }
}