/**
 * ============================================================================
 * base.css —— 全局布局骨架（与主题无关）
 * ----------------------------------------------------------------------------
 * 本文件只负责：重置、页面结构、卡片、渠道网格、弹窗、响应式等公共布局。
 * 所有颜色 / 圆角 / 阴影 / 字体均通过 CSS 变量取值，
 * 变量的具体配色在 theme-*.css 中定义，调色无需改动本文件。
 * ============================================================================
 */

/* ---------- 主题变量默认值（未匹配到主题时兜底，一般不生效） ---------- */
:root {
  --maxw: 430px;            /* 收款卡最大宽度 */
  --radius: 16px;           /* 大圆角（主卡片） */
  --radius-sm: 12px;        /* 小圆角（渠道卡片） */
  --bg: #eef1f6;            /* 页面背景色 */
  --bg-image: none;         /* 页面背景渐变 */
  --card: #ffffff;          /* 卡片背景 */
  --text: #22314a;          /* 主文字色 */
  --sub: #8a94a6;           /* 次要文字色 */
  --accent: #2f6fed;        /* 强调色（金额、按钮、高亮） */
  --accent-soft: #eaf1ff;   /* 强调色浅底（提示条） */
  --line: #e6eaf1;          /* 分割线 / 卡片描边 */
  --qr-bg: #ffffff;         /* 二维码容器底色 */
  --shadow: 0 10px 34px rgba(0, 0, 0, .08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
  --font: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 基础重置 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
/* hidden 属性优先级最高，防止被 display:flex 等样式覆盖 */
[hidden] { display: none !important; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-image);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 28px 14px 44px;
  transition: background-color .3s ease;
}

img { max-width: 100%; }

/* ---------- 主卡片 ---------- */
.page { width: 100%; max-width: var(--maxw); }
.main-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 22px 24px;
  text-align: center;
  animation: rise .45s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 品牌区 ---------- */
.brand-logo {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.brand h1 { font-size: 1.35rem; margin-top: 12px; letter-spacing: .5px; }
.welcome  { color: var(--sub); font-size: .85rem; margin-top: 6px; }

/* ---------- 金额 / 说明 ---------- */
.amount-wrap { margin: 18px 0 2px; color: var(--accent); }
.amount-cur  { font-size: 1.2rem; margin-right: 3px; vertical-align: 6px; }
#amount-value { font-size: 2.5rem; font-weight: 700; letter-spacing: 1px; }
.pay-note { color: var(--sub); font-size: .88rem; margin-top: 4px; }

/* ---------- 统一二维码 ---------- */
.qr-card {
  display: inline-block;
  margin-top: 18px;
  padding: 14px;
  background: var(--qr-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.qrcode {
  width: 212px; height: 212px;
  display: flex; align-items: center; justify-content: center;
  margin: auto;
}
.qrcode img, .qrcode canvas { width: 100% !important; height: 100% !important; display: block; }
.qr-tip { font-size: .78rem; color: var(--sub); margin-top: 12px; }

/* ---------- 环境识别提示 ---------- */
.env-hint {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 16px;
  font-size: .8rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- 渠道选择网格 ---------- */
.channel-title { margin: 24px 0 12px; font-size: .95rem; color: var(--sub); font-weight: 500; }
.channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 6 渠道 → 3×2 网格 */
  gap: 12px;
}
.channel {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px 10px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.channel:active  { transform: scale(.95); }
.channel:hover   { border-color: var(--ch, var(--accent)); box-shadow: 0 6px 16px rgba(0,0,0,.09); }
.channel img { width: 38px; height: 38px; border-radius: 10px; }
.channel span { font-size: .78rem; }
/* 推荐渠道（按扫码环境自动标记） */
.channel.recommended { border: 2px solid var(--ch, var(--accent)); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.ch-badge {
  position: absolute; top: -9px; right: -6px;
  background: var(--ch, var(--accent));
  color: #fff; font-size: .64rem; font-style: normal;
  padding: 2px 8px; border-radius: 999px;
}
/* 空状态提示（未配置任何渠道时） */
.empty-tip { grid-column: 1 / -1; font-size: .85rem; color: var(--sub); line-height: 1.8; padding: 12px 0; }
.empty-tip b { color: var(--accent); }

/* ---------- QQ 头像昵称展示 ---------- */
.qq-profile {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; font-size: .8rem; color: var(--sub);
}
.qq-profile img { width: 26px; height: 26px; border-radius: 50%; background: #fff; }

.page-footer { margin-top: 20px; font-size: .72rem; color: var(--sub); opacity: .85; }

/* ---------- 渠道收款码弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.modal-body {
  position: relative;
  width: 100%; max-width: 320px;
  background: var(--card);
  border-radius: 18px;
  padding: 24px 20px;
  text-align: center;
  animation: pop .25s ease;
}
@keyframes pop {
  from { transform: scale(.88); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
#modal-icon { width: 42px; height: 42px; border-radius: 10px; }
.modal-body h3 { margin: 10px 0 14px; font-size: 1.05rem; }
.modal-qr {
  width: 210px; height: 210px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;                /* 收款码底色恒为白，保证长按识别成功率 */
}
.modal-tip { font-size: .78rem; color: var(--sub); line-height: 1.7; margin: 12px 0 14px; }
/* 由收款内容（payData）实时生成的标准二维码，底色恒为白保证识别率 */
.modal-qr-gen {
  width: 212px; height: 212px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.btn-primary {
  display: block;
  background: var(--accent); color: #fff;
  text-decoration: none;
  padding: 11px; border-radius: 10px;
  font-size: .9rem; margin-bottom: 10px;
}
.btn-ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--sub);
  padding: 9px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: .85rem;
}

/* ---------- 响应式适配 ---------- */
/* 平板 / 桌面：卡片居中，视觉更聚焦 */
@media (min-width: 768px) {
  body { padding-top: 6vh; }
  :root { --maxw: 460px; }
}
/* 小屏手机：渠道降为 2 列，避免文字挤压 */
@media (max-width: 360px) {
  .channels { grid-template-columns: repeat(2, 1fr); }
  .main-card { padding: 24px 16px 20px; }
}
/* 尊重减弱动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  .main-card, .modal-body { animation: none; }
  .channel, .modal-body { transition: none; }
}