/* ============================================================================
 * 支付模块 · pay.css —— 用户端充值弹窗 + 后台支付订单页共用样式
 *
 * 加载：index.html 与 admin.html 各自 <link> 一份，无构建流程。
 * Token 口径：admin.html 不加载 tokens.css（自带一份旧变量名），凡是 index-only 的
 *   新版 token 一律写成 var(新名, var(旧名)) 双层兜底 —— 与 batch2.css 同一套路，
 *   避免「换到后台页就取不到值、颜色掉成继承值」这类只在半边页面出现的静默故障。
 *   依赖 admin.html :root 补齐 --success / --info / --danger 三个语义色
 *   （该文件原本只定义了 --rose / --warn / --gold）。
 *
 * 【P0】零硬编码色值（二维码扫码底必须为白，用规则允许的 #fff）；
 *       无紫→粉渐变；圆角 ≤ 18px；交互区 ≥44px（用 padding 撑，不另加 min-width 堆叠）；
 *       过渡 150ms 收敛 + prefers-reduced-motion 降级；聚焦用 --focus-ring。
 * ========================================================================== */

/* ---------- 顶栏充值入口（index.html 挂在余额 chip 旁） ---------- */
.pay-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--gold, var(--gold-dim));
  background: var(--gold-dim, transparent);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
              opacity var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.pay-entry:hover { border-color: var(--gold); background: var(--gold-dim, transparent); }
.pay-entry[disabled] {
  opacity: .45;
  cursor: not-allowed;
  border-color: var(--border, var(--bd));
  color: var(--meta, var(--ink3));
}
@media (max-width: 640px) { .pay-entry { padding: 5px 11px; font-size: 12px; } }

/* ---------- 弹窗外壳（复用已有 .mo-mask / .mo-card，只做加宽与滚动） ---------- */
.mo-mask.pay-mask { align-items: flex-start; overflow-y: auto; padding: 28px 14px; }
.pay-card {
  width: 100%;
  max-width: 520px;
  max-height: none;
  background: var(--bg1);
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-xl, 18px);
  padding: 20px 22px 18px;
  animation: payPop var(--motion-base, 200ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.pay-card.wide { max-width: 600px; }
@keyframes payPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.pay-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.pay-hd h3 { margin: 0; font-size: var(--text-xl, 18px); letter-spacing: -0.01em; color: var(--fg, var(--ink)); font-weight: 700; }
.pay-x {
  margin-left: auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-pill, 9999px);
  background: transparent;
  color: var(--muted, var(--ink2));
  cursor: pointer;
  transition: color var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
              background-color var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.pay-x:hover { color: var(--fg, var(--ink)); background: var(--surface-2, var(--card)); }
.pay-x:focus-visible { box-shadow: var(--focus-ring, 0 0 0 3px var(--accent)); }

/* ---------- 套餐位（2 列自适应，避开「三张等宽卡」的 AI 套路） ---------- */
.pay-sku-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pay-sku {
  display: block;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-2, var(--card));
  color: var(--fg, var(--ink));
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
              background-color var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.pay-sku:hover { transform: translateY(-1px); }
.pay-sku.on { border-color: var(--gold); }
.pay-sku:focus-visible { box-shadow: var(--focus-ring, 0 0 0 3px var(--accent)); }
.pay-sku-points {
  font-size: var(--text-xl, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.pay-sku-points b { font-size: var(--text-sm, 13px); font-weight: 600; margin-left: 2px; }
.pay-sku-title { font-size: var(--text-xs, 12px); color: var(--muted, var(--ink2)); margin-top: 2px; }
.pay-sku-price { font-size: var(--text-sm, 13px); color: var(--fg-2, var(--ink2)); margin-top: 7px; font-variant-numeric: tabular-nums; }

/* ---------- 二维码区 ---------- */
.pay-qr-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
/* 二维码必须扫得出来：底片强制白（规则允许的 #fff 例外），四周留白 ≥8px */
.pay-qr-frame {
  width: 190px; height: 190px;
  flex: none;
  padding: 10px;
  background: #fff;
  border-radius: var(--radius-md, 10px);
  display: flex; align-items: center; justify-content: center;
}
.pay-qr-frame img { width: 100%; height: 100%; display: block; }
.pay-qr-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs, 12px); line-height: 1.7; text-align: center;
  color: var(--muted, var(--ink2)); background: var(--surface-2, var(--card));
}
.pay-qr-side { flex: 1; min-width: 190px; }

/* ---------- 公共文本 ---------- */
.pay-money {
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  font-weight: 700;
}
.pay-hint { font-size: var(--text-xs, 12px); color: var(--meta, var(--ink3)); line-height: 1.8; }
.pay-no {
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: var(--text-xs, 12px);
  color: var(--muted, var(--ink2));
  cursor: pointer;
  user-select: all;
  word-break: break-all;
}
.pay-alert {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 10px);
  font-size: var(--text-sm, 13px);
  line-height: 1.7;
  margin-top: 12px;
}
.pay-alert.ok { color: var(--success); border: 1px solid var(--success); }
.pay-alert.warn { color: var(--warn, var(--gold)); border: 1px solid var(--warn, var(--gold)); }
.pay-alert.err { color: var(--danger); border: 1px solid var(--danger); }
.pay-alert.info { color: var(--info); border: 1px solid var(--info); }
.pay-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pay-foot .spacer { margin-left: auto; }
.pay-foot .btn, .pay-foot .mo-btn { min-height: 44px; }

/* ---------- 后台：状态 chip（矢量色由 currentColor 继承，无淡底、无硬编码） ---------- */
.pay-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm, 6px);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap; line-height: 1.7;
}
.pay-chip.s-new { color: var(--muted, var(--ink2)); }
.pay-chip.s-wait { color: var(--warn, var(--gold)); }
.pay-chip.s-ok { color: var(--success); }
.pay-chip.s-bad { color: var(--danger); }
.pay-chip.s-info { color: var(--info); }

/* ---------- 后台：渠道状态（只读展示，不带任何操作入口） ---------- */
.pay-chans { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.pay-ch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-pill, 9999px);
  font-size: var(--text-xs, 12px);
  color: var(--muted, var(--ink2));
}
.pay-ch.on { border-color: var(--accent); color: var(--accent); }
.pay-ch.off { color: var(--meta, var(--ink3)); }

/* ---------- 后台：详情 / 退款弹窗内的小块 ---------- */
.pay-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, var(--bd)); }
.pay-block-t { font-size: var(--text-sm, 13px); font-weight: 700; color: var(--fg, var(--ink)); margin-bottom: 8px; }
.pay-kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: var(--text-sm, 13px); line-height: 1.8; }
.pay-kv dt { color: var(--meta, var(--ink3)); }
.pay-kv dd { margin: 0; color: var(--fg-2, var(--ink2)); word-break: break-all; }
.pay-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft, var(--bd));
  font-size: var(--text-xs, 12px);
}
.pay-row:last-child { border-bottom: none; }
.pay-field { margin-bottom: 12px; }
.pay-field label { display: block; font-size: var(--text-xs, 12px); color: var(--muted, var(--ink2)); margin-bottom: 6px; font-weight: 600; }
.pay-field input {
  width: 100%;
  background: var(--surface-2, var(--card));
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-md, 10px);
  padding: 11px 13px;
  color: var(--fg, var(--ink));
  font-size: var(--text-base, 14px);
  font-family: inherit;
  outline: none;
}
.pay-field input:focus-visible { box-shadow: var(--focus-ring, 0 0 0 3px var(--accent)); }
.pay-danger-btn {
  background: var(--danger);
  color: var(--on-gold, var(--ink));
  border: none; border-radius: var(--radius-md, 10px);
  padding: 10px 20px; font-size: var(--text-base, 14px); font-weight: 700;
  font-family: inherit; cursor: pointer; min-height: 44px;
  transition: opacity var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.pay-danger-btn[disabled] { opacity: .45; cursor: not-allowed; }
.pay-guard {
  margin-top: 12px; padding: 11px 14px;
  border: 1px solid var(--warn, var(--gold));
  border-radius: var(--radius-md, 10px);
  background: var(--warn-dim, transparent);
  font-size: var(--text-xs, 12px); line-height: 1.8;
  color: var(--warn, var(--gold));
}

@media (max-width: 640px) {
  .pay-card { padding: 16px 16px 14px; }
  .pay-kv { grid-template-columns: 80px 1fr; }
  .pay-foot .btn, .pay-foot .mo-btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pay-card { animation: none; }
  .pay-sku:hover { transform: none; }
}