/* ============================================================
   手机微信外浏览器「在微信中打开」引导遮罩
   - iPhone：引导底部「分享」
   - 安卓：引导右上角「菜单 / 分享」
   - 中央卡片：步骤说明 + 一键复制链接（全平台兜底）
   ============================================================ */
.wx-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  z-index: 99999;
  overflow: hidden;
}
.wx-mask * { box-sizing: border-box; }

/* ---------- 安卓：右上角 ··· ---------- */
.wx-guide-dots {
  position: absolute;
  top: 12px;
  right: 18px;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 2px;
  animation: wxPulse 1.4s infinite;
}
.wx-guide-arrow-tr {
  position: absolute;
  top: 48px;
  right: 26px;
  width: 30px;
  height: 30px;
  animation: wxBounceTR 1.1s infinite;
}
.wx-guide-arrow-tr svg { width: 100%; height: 100%; }

/* ---------- iPhone：底部分享按钮 ---------- */
.wx-guide-share {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #19c15b;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wxPulse 1.4s infinite;
}
.wx-guide-share svg { width: 28px; height: 28px; }
.wx-guide-arrow-down {
  position: absolute;
  bottom: 82px;
  left: 50%;
  margin-left: -15px;
  width: 30px;
  height: 30px;
  animation: wxBounceDown 1.1s infinite;
}
.wx-guide-arrow-down svg { width: 100%; height: 100%; }

/* ---------- 中央卡片 ---------- */
wx-step-card,
.wx-step-card {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  max-width: 340px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 22px 24px;
  text-align: center;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .35);
}
.wx-wechat-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: #19c15b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wx-wechat-icon svg { width: 42px; height: 42px; }
.wx-t1 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px; }
.wx-t2 { font-size: 14px; color: #666; line-height: 2; margin: 0 0 20px; text-align: left; padding: 0 6px; }
/* ---------- 两个并排按钮 ---------- */
.wx-btn-row { display: flex; gap: 10px; }
.wx-btn {
  flex: 1;
  padding: 13px 0;
  border: none;
  border-radius: 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
}
/* ① 复制链接：黄色 */
.wx-btn-copy { background: #f6a800; }
.wx-btn-copy:active { opacity: .88; }
/* ② 打开微信：初始灰色禁用；复制成功后 .ready 变绿可点 */
.wx-btn-wx { background: #c6c6c6; cursor: not-allowed; }
.wx-btn-wx.ready { background: #19c15b; cursor: pointer; }
.wx-btn-wx.ready:active { opacity: .88; }
.wx-copy-result { font-size: 13px; color: #19c15b; margin: 13px 0 0; min-height: 18px; line-height: 1.5; }

/* ---------- 动画 ---------- */
@keyframes wxPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes wxBounceTR {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-9px, 9px); }
}
@keyframes wxBounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(13px); }
}