/* invite-poster.css —— 邀请好友弹层 + 海报（2026-09-26 新增）
   独立文件、在 index.html 里排在 style.css 之后加载（改别人的样式别动 style.css）。

   🔴 2026-09-28 加作用域（修类名撞车，改前请先读）：
   本文件原先用的是**裸类名** `.ip-card / .ip-toast / .ip-btn ...`，而「短视频IP策划」
   （sub-ipplan，样式在 style.css 的 `.ip-*` 段）用的是同一套 `ip-` 前缀。
   本文件在 style.css 之后加载 ⇒ **同特异性的规则由本文件胜出**，于是把 IP策划 页吃了：

     撞的类         style.css（IP策划的本意）       本文件（后加载胜出）         用户看到的现象
     .ip-card       margin-bottom: 14px              max-width: 420px           PC 上表单卡只剩 420px 宽
                                                                                 → 右半边全空「半张桌面」
     .ip-toast      opacity: 0（靠 .on 才显示）      opacity: 1                 空提示元素**永久可见**
                                                                                 → 一个黑色小胶囊悬在页面上

   修法 = **给本文件所有规则加作用域**，让它只作用于自己的 DOM：
     · 弹层在 `document.body` 下、根是 `.ip-mask`（见 invite-poster.js:89-98）→ 内部一律 `.ip-mask X`
     · 轻提示是 `document.body` 的**直接子元素**（invite-poster.js:65-68）→ `body > .ip-toast`
       （IP策划 的 `.ip-toast` 在 `.subpanel` 内，不是 body 直接子 ⇒ 天然分开）
     · `.func-ico.f-ipgold` 是专属类名、不撞 ⇒ 保持原样

   ⚠️ 以后新增样式一律带作用域，别再写裸类名（站内有 tools/check-css-collisions.py 可查）。 */

/* 遮罩：body 直接子元素 */
body > .ip-mask {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
}
.ip-mask .ip-card {
  width: 100%; max-width: 420px; max-height: 92vh;
  background: #fff; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
}
.ip-mask .ip-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #f0f0f2; flex: 0 0 auto;
}
.ip-mask .ip-title { font-size: 17px; font-weight: 600; color: #1c1c1e; }
.ip-mask .ip-x {
  border: 0; background: transparent; font-size: 17px; color: #8e8e93;
  width: 32px; height: 32px; line-height: 1; cursor: pointer;
}
.ip-mask .ip-bd { padding: 16px 18px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 邀请码行已移除（2026-09-26：扫码即绑定，不再展示邀请码） */
/* 统计三格 */
.ip-mask .ip-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.ip-mask .ip-stats .s {
  flex: 1; text-align: center; background: #f7f7f9; border-radius: 12px; padding: 12px 4px;
}
.ip-mask .ip-stats .s b { display: block; font-size: 20px; font-weight: 700; color: #1c1c1e; }
.ip-mask .ip-stats .s i { display: block; font-size: 12px; font-style: normal; color: #8e8e93; margin-top: 4px; }

/* 款式切换 */
.ip-mask .ip-styles { display: flex; gap: 8px; margin-bottom: 12px; }
.ip-mask .ip-style {
  flex: 1; border: 1px solid #e5e5ea; background: #fff; color: #3a3a3c;
  border-radius: 10px; padding: 9px 4px; font-size: 13px; cursor: pointer;
}
.ip-mask .ip-style.on { border-color: #d4a017; background: #fffaf0; color: #b8860b; font-weight: 600; }

/* 海报画布 */
.ip-mask .ip-canvas-wrap { border-radius: 14px; overflow: hidden; background: #f2f2f7; margin-bottom: 14px; }
.ip-mask .ip-canvas-wrap canvas { display: block; width: 100%; height: auto; }

/* 按钮 */
.ip-mask .ip-acts { display: flex; gap: 10px; margin-bottom: 14px; }
.ip-mask .ip-btn {
  flex: 1; border: 1px solid #e5e5ea; background: #fff; color: #1c1c1e;
  border-radius: 12px; padding: 13px 10px; font-size: 15px; font-weight: 500; cursor: pointer;
}
.ip-mask .ip-btn-main { background: linear-gradient(135deg, #E8C36B, #d4a017); border: 0; color: #3a2a05; font-weight: 600; }
.ip-mask .ip-btn-sm { flex: 0 0 auto; padding: 12px 16px; font-size: 14px; }

/* 规则 */
.ip-mask .ip-rule { font-size: 12.5px; line-height: 1.9; color: #8e8e93; }
.ip-mask .ip-rule b { color: #b8860b; }

/* 非会员提示 */
.ip-mask .ip-need { text-align: center; padding: 14px 4px 6px; }
.ip-mask .ip-need-ico { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.ip-mask .ip-need-t { font-size: 17px; font-weight: 600; color: #1c1c1e; margin-bottom: 10px; }
.ip-mask .ip-need-s { font-size: 13.5px; line-height: 1.8; color: #8e8e93; margin-bottom: 22px; }
.ip-mask .ip-need-s b { color: #b8860b; }

/* 轻提示：body 直接子元素（IP策划 的 .ip-toast 在 .subpanel 内，不会命中） */
body > .ip-toast {
  position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%);
  z-index: 9999; background: rgba(0, 0, 0, .8); color: #fff;
  font-size: 14px; padding: 10px 18px; border-radius: 20px;
  opacity: 1; transition: opacity .4s;
}
body > .ip-toast.ip-toast-out { opacity: 0; }

/* 工具卡「邀请好友」的图标底色 —— 独立类名（不动别人的 .f-gold） */
.func-ico.f-ipgold { background: linear-gradient(135deg, #F6D98A, #C9A227); }
