/* ============================================================================
 * 邀请好友 · 海报轮播 + 欢迎语（v3 · 2026-10-07）
 * ----------------------------------------------------------------------------
 * 🔴 本文件**独立引入**，不依赖 member.css —— member.css 是并发会话在制的
 *    共享文件，改它必冲突。海报样式自成一块，只用 iv* 前缀，零污染。
 *
 * 🔴 视觉比例设计依据（用户要求「比例再优化合理一些」）：
 *    · 海报统一 4:5（宽:高 = 320:400），接近竖版海报/社交分享的最佳比例，
 *      在手机聊天列表里不会被压扁，也不会大到占满屏。
 *    · 内边距 20px（≈ 内容区 280px 宽），标题 22px / 副标 13px / tips 12px，
 *      行高 1.6 —— 中文字重下这个组合不会挤也不会空。
 *    · 4 套皮肤只在**明度**上分层（深绿 → 中绿 → 浅绿 → 墨绿），
 *      保持「同品牌不同气质」，不引入第二个色相。
 * ============================================================================ */

/* ---------- 1. 轮播外壳 ---------- */
.ivp-wrap { position: relative; }
.ivp-view {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;          /* 4:5 竖版 */
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(15, 110, 86, .14);
}
.ivp-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
}
.ivp-slide.on { opacity: 1; visibility: visible; }

/* PC 端：卡片左侧海报、右侧文案，两栏并排 */
@media (min-width: 861px) {
  .ivp-view { max-width: 288px; }
}

/* ---------- 2. 海报本体（4 套皮肤） ---------- */
.ivp {
  position: absolute; inset: 0;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
  overflow: hidden;
}
/* 装饰圆：只在右上/左下，用极低透明度，不抢内容 */
.ivp::before, .ivp::after {
  content: ''; position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ivp::before { width: 150px; height: 150px; top: -58px; right: -46px; background: rgba(255,255,255,.10); }
.ivp::after  { width: 104px; height: 104px; bottom: 40px; left: -44px; background: rgba(255,255,255,.07); }

.ivp-in {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; min-width: 0;
}

/* 4 套皮肤：仅明度分层，同一品牌绿 */
.ivp.g1 { background: linear-gradient(158deg, #0F6E56 0%, #0A5644 100%); }
.ivp.g2 { background: linear-gradient(158deg, #0F9D6C 0%, #0B7A55 100%); }
.ivp.g3 { background: linear-gradient(158deg, #13B37E 0%, #0E8560 100%); }
.ivp.g4 { background: linear-gradient(158deg, #14503F 0%, #0C3A2E 100%); }

/* 内容 */
.ivp-kick {
  display: inline-block; align-self: flex-start;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: 11px; letter-spacing: .5px;
}
.ivp-title {
  margin: 14px 0 6px;
  font-size: 22px; font-weight: 600; line-height: 1.28;
  letter-spacing: .2px;
}
.ivp-sub {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,.88);
}
.ivp-tips {
  margin: 14px 0 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 7px;
}
.ivp-tips li {
  position: relative;
  padding-left: 15px;
  font-size: 12px; line-height: 1.5;
  color: rgba(255,255,255,.94);
}
.ivp-tips li::before {
  content: ''; position: absolute;
  left: 0; top: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .65;
}

/* ---------- 2.5 扫码引导带 + 白底扫码卡（2026-10-07 新增） ----------
   目的：海报是「拿去分享」的，接收方第一眼要看到「扫这里」。
   做法：① 一条高对比引导带明示动作 ② 纯白卡承载二维码（深绿底上识别率最高）。 */
.ivp-scanline {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 0; border-radius: 8px;
  background: #1B8062;
}
.ivp-scanline b { font-size: 12px; font-weight: 600; color: #fff; letter-spacing: .3px; }
/* 四角取景框图标（纯 CSS，免图片请求） */
.ivp-scan-ico {
  position: relative; width: 14px; height: 14px; flex: 0 0 14px;
  background:
    linear-gradient(#fff,#fff) left top / 4px 1.6px no-repeat,
    linear-gradient(#fff,#fff) left top / 1.6px 4px no-repeat,
    linear-gradient(#fff,#fff) right top / 4px 1.6px no-repeat,
    linear-gradient(#fff,#fff) right top / 1.6px 4px no-repeat,
    linear-gradient(#fff,#fff) left bottom / 4px 1.6px no-repeat,
    linear-gradient(#fff,#fff) left bottom / 1.6px 4px no-repeat,
    linear-gradient(#fff,#fff) right bottom / 4px 1.6px no-repeat,
    linear-gradient(#fff,#fff) right bottom / 1.6px 4px no-repeat;
}
.ivp-scan-ico::after {
  content: ''; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 1.6px; margin-top: -.8px; background: #fff; border-radius: 1px;
}
/* 白底扫码卡：左文案右码 */
.ivp-scan {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: #fff;
}
.ivp-scan-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.ivp-scan-l em { font-style: normal; font-size: 10px; font-weight: 500; color: #6B7078; }
.ivp-scan-l strong {
  font-size: 22px; font-weight: 700; line-height: 1.1;
  letter-spacing: 1.5px; color: #0F6E56;
}
.ivp-scan .ivp-qr {
  width: 54px; height: 54px; flex: 0 0 54px;
  border-radius: 10px; overflow: hidden;
  background: #fff; padding: 3px;
  box-sizing: border-box;
}
.ivp-scan .ivp-qr img { width: 100%; height: 100%; display: block; display: block; }

/* ---------- 3. 轮播控制 ---------- */
.ivp-ctrl {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 14px;
}
.ivp-dots { display: flex; gap: 6px; }
.ivp-dot {
  width: 6px; height: 6px; padding: 0;
  border: 0; border-radius: 50%;
  background: #C9E5D9;
  cursor: pointer; transition: all .25s;
}
.ivp-dot.on { width: 18px; border-radius: 999px; background: #0F9D6C; }
.ivp-arrow {
  width: 26px; height: 26px; padding: 0;
  border: 1px solid #DCEEE7; border-radius: 50%;
  background: #fff; color: #0F6E56;
  font-size: 13px; line-height: 1; cursor: pointer;
}
.ivp-arrow:hover { border-color: #0F9D6C; }

/* ---------- 4. 欢迎语轮换 ---------- */
.ivc {
  margin-top: 18px; padding: 15px 17px;
  background: #F2FBF7;
  border: 1px solid #D9EFE5;
  border-radius: 12px;
  min-height: 74px;
  display: flex;
}
.ivc-say { display: flex; gap: 12px; align-items: flex-start; width: 100%; }
.ivc-dot {
  width: 8px; height: 8px; margin-top: 7px; flex: 0 0 8px;
  border-radius: 50%;
}
.ivc-dot[data-i="0"] { background: #0F9D6C; }
.ivc-dot[data-i="1"] { background: #13B37E; }
.ivc-dot[data-i="2"] { background: #0B7A55; }
.ivc-dot[data-i="3"] { background: #14503F; }
.ivc-txt { min-width: 0; }
.ivc-txt p {
  margin: 0 0 5px;
  font-size: 15px; font-weight: 600; line-height: 1.55;
  color: #1B3A31;
}
.ivc-txt span {
  display: block;
  font-size: 12px; line-height: 1.6;
  color: #5A7A6E;
}
/* 文案切换的淡入（配合 JS 整体替换 innerHTML） */
.ivc-say { animation: ivcIn .45s ease; }
@keyframes ivcIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ivc-say { animation: none; }
  .ivp-slide { transition: none; }
  .ivp-dot { transition: none; }
}

/* ---------- 5. 分享按钮组 ---------- */
.ivp-share {
  margin-top: 16px;
  display: flex; gap: 9px; flex-wrap: wrap;
}
.ivp-share .btn {
  flex: 1 1 auto; min-width: 108px;
}

/* ---------- 6. PC 两栏布局（海报左、文案右） ---------- */
@media (min-width: 861px) {
  .ivp-top { display: flex; gap: 26px; align-items: flex-start; }
  .ivp-left { flex: 0 0 auto; width: 288px; }
  .ivp-right { flex: 1 1 auto; min-width: 0; }
  .ivp-right .ivc { margin-top: 0; min-height: 0; }
  .ivp-share { margin-top: 18px; }
}
@media (max-width: 860px) {
  .ivp-top { display: block; }
  .ivc { margin-top: 18px; }
}

/* ============================================================================
 * 7. 扫码三步（2026-10-07 新增）
 * ============================================================================
 * 弹窗里给用户看的操作指引。海报发了出去别人未必扫，
 * 把「保存 → 发微信 → 好友扫」摆出来，用户的动作就明确了。 */
.ivs {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px;
}
.ivs-step {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 7px 8px; border-radius: 9px; background: #fff;
}
.ivs-no {
  flex: 0 0 15px; width: 15px; height: 15px;
  border-radius: 50%; background: #E6F6EF; color: #0F6E56;
  font-size: 10px; font-weight: 700; line-height: 15px;
  text-align: center;
}
.ivs-step b { font-size: 11.5px; font-weight: 600; color: #0F6E56; white-space: nowrap; }
.ivs-step em {
  font-style: normal; font-size: 10.5px; color: #6B7078;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================================
 * 8. 二维码面板（2026-10-07 新增 · 双层边框）
 * ============================================================================
 * 用户明确要求「加个边框，这样分享出去别人才会扫」。
 * 三层视觉递进把视线锁到码上：
 *   外层白卡(246px, 圆角 22) → 浅绿描边内衬(214px, 圆角 14) → 纯白码区(186px)
 *   纯白底是二维码识别率最高的背景，任何渐变/深色都会降低识别率。 */
.ivq-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 9px; padding: 16px 0 4px;
}
.ivq-card {
  width: 246px; height: 246px;
  border-radius: 22px; background: #fff;
  border: 1px solid #E6E9EC;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.ivq-pad {
  width: 214px; height: 214px;
  border-radius: 14px; background: #fff;
  border: 1px solid #E5F6EE;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.ivq-box {
  width: 186px; height: 186px;
  background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ivq-box img, .ivq-box svg { width: 100%; height: 100%; display: block; }
.ivq-t { font-size: 14px; font-weight: 600; color: #1B1B1F; text-align: center; }
.ivq-s { font-size: 11.5px; color: #A6ABB3; text-align: center; }
/* 扫码动作引导带 */
.ivq-hint {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 10px;
  background: #E6F6EF; color: #0F6E56;
  font-size: 12px; font-weight: 600;
}
.ivq-hint-i {
  position: relative; width: 15px; height: 15px; flex: 0 0 15px;
  background:
    linear-gradient(#0F6E56,#0F6E56) left top / 4.4px 1.8px no-repeat,
    linear-gradient(#0F6E56,#0F6E56) left top / 1.8px 4.4px no-repeat,
    linear-gradient(#0F6E56,#0F6E56) right top / 4.4px 1.8px no-repeat,
    linear-gradient(#0F6E56,#0F6E56) right top / 1.8px 4.4px no-repeat,
    linear-gradient(#0F6E56,#0F6E56) left bottom / 4.4px 1.8px no-repeat,
    linear-gradient(#0F6E56,#0F6E56) left bottom / 1.8px 4.4px no-repeat,
    linear-gradient(#0F6E56,#0F6E56) right bottom / 4.4px 1.8px no-repeat,
    linear-gradient(#0F6E56,#0F6E56) right bottom / 1.8px 4.4px no-repeat;
}
.ivq-hint-i::after {
  content: ''; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 1.8px; margin-top: -.9px; background: #0F6E56; border-radius: 1px;
}
/* 链接卡 */
.ivq-link {
  margin-top: 6px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: 14px;
  background: #F2FBF7; box-sizing: border-box;
}
.ivq-link-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ivq-link-l em { font-style: normal; font-size: 11px; color: #6B7078; }
.ivq-link-l b {
  font-size: 13px; font-weight: 600; color: #0F6E56;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ivq-copy {
  flex: 0 0 auto;
  padding: 5px 14px; border: 0; border-radius: 999px;
  background: #E6F6EF; color: #0F6E56;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.ivq-copy:active { background: #D5EEE3; }