/* ===== 下载分流落地页样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --primary: #3b6cff;
  --primary-dark: #2a52cc;
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #1a1a2e;
  --text-sub: #8a8fa3;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(59, 108, 255, 0.10);
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.app { min-height: 100%; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* ---- 加载态 ---- */
.loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--text-sub); }
.spinner {
  width: 40px; height: 40px; border: 3px solid #e0e5f0; border-top-color: var(--primary);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 内容容器 ---- */
.content { flex: 1; padding: 32px 20px 40px; max-width: 540px; width: 100%; margin: 0 auto; }

.page-header { text-align: center; margin-bottom: 28px; }
.page-header h1 { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; }
.page-header p { margin-top: 8px; font-size: 14px; color: var(--text-sub); }

/* ---- 产品卡片 ---- */
.product-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 20px; margin-bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.product-icon {
  width: 76px; height: 76px; border-radius: 20px; object-fit: cover;
  background: linear-gradient(135deg, var(--primary), #6b8cff);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; font-weight: 700;
}
.product-name { font-size: 19px; font-weight: 700; }
.product-desc { font-size: 13px; color: var(--text-sub); text-align: center; margin-top: -6px; }

/* ---- 按钮 ---- */
.btn {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  width: 100%; max-width: 320px; padding: 14px 20px; border-radius: 12px;
  font-size: 16px; font-weight: 600; transition: transform 0.1s, opacity 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: #eef2ff; color: var(--primary); }
.btn-group { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; }

/* ---- 二维码区（PC 端） ---- */
.qr-area { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.qr-box { width: 168px; height: 168px; border-radius: 10px; background: #fff; padding: 8px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.qr-box canvas, .qr-box img { width: 152px; height: 152px; }
.qr-hint { font-size: 13px; color: var(--text-sub); margin-bottom: 6px; }

/* ---- 渠道选择弹层 ---- */
.channel-sheet {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 50;
  display: flex; align-items: flex-end; animation: fade 0.2s;
}
.channel-panel { background: #fff; width: 100%; border-radius: 18px 18px 0 0; padding: 20px 18px 28px; animation: slideUp 0.25s; }
.channel-panel h3 { font-size: 16px; text-align: center; margin-bottom: 16px; }
.channel-list { display: flex; flex-direction: column; gap: 10px; }
.channel-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--bg); border-radius: 12px; font-size: 15px; font-weight: 500;
}
.channel-item .tag { font-size: 12px; color: var(--text-sub); }
.channel-cancel { margin-top: 14px; text-align: center; color: var(--text-sub); padding: 10px; font-size: 15px; }

/* ---- 微信遮罩 ---- */
.wechat-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.82); z-index: 100; }
.wechat-tip { padding: 24px 30px; color: #fff; text-align: right; }
.wechat-arrow { font-size: 60px; line-height: 1; text-align: right; margin-right: 6px; animation: bounce 1s infinite; }
.wechat-title { font-size: 20px; font-weight: 700; margin-top: 8px; }
.wechat-sub { font-size: 14px; opacity: 0.85; margin-top: 10px; line-height: 1.6; }

/* ---- 错误态 ---- */
.error-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--text-sub); padding: 20px; }

.footer { text-align: center; font-size: 12px; color: #b8bdcc; padding: 20px 0 8px; }

@keyframes fade { from { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(100%); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (min-width: 600px) {
  .content { padding-top: 56px; }
}