/* ===========================================================================
 * 销售朋友圈文案（#sub-moments）· 独立样式表
 * ---------------------------------------------------------------------------
 * 为什么单开文件：全站铁律 —— 不往 style.css 里加（多会话并发在改）。
 * 本文件在 index.html 里排在 style.css 与其它板块 css 之后加载。
 *
 * 🔴 两条硬约束
 *   ① 所有选择器必须带 `#sub-moments` 作用域（`.hero-slogan` 裸类名连带
 *      干掉代理后台 slogan 的教训在前）。前缀用 `mts-` —— 已核实全站 0 命中
 *      （原来的候选 `mo-` 撞了别人的 `mo-tip`，所以换掉）。
 *   ② 带 absolute 装饰的容器必须 position:relative，否则会撑宽 document
 *      → 手机端整页缩成 77%（桌面看不出来）。
 *
 * 视觉基调：暖橙（与文案板块一致）+ **朋友圈预览卡**。
 *   结果不做成普通文字块，而是画成"发到朋友圈长什么样"：头像圈 + 昵称 + 正文 +
 *   按建议张数排的配图格。用户不用想象，直接看到排版效果。
 * =========================================================================== */

#sub-moments {
  --mts-ink: #24190f;
  --mts-ink2: #8b7768;
  --mts-ink3: #b6a597;
  --mts-paper: #fffdfa;
  --mts-line: rgba(150, 100, 50, .15);
  --mts-line2: rgba(150, 100, 50, .28);
  --mts-brand: #f95901;
  --mts-warn: #b45309;
  --mts-danger: #c2410c;
  --mts-ok: #0f766e;
  --mts-shadow: 0 2px 10px rgba(122, 58, 18, .07);
  --mts-shadow2: 0 8px 26px rgba(122, 58, 18, .13);
  /* 🔴 fixed TabBar 实测高 74px，底部必须留白，否则按钮被挡住 */
  padding-bottom: 100px;
}

/* hidden 会被 display:flex/grid 盖掉，必须显式压掉 */
#sub-moments [hidden] { display: none !important; }

/* ===================== 头部 ===================== */
#sub-moments .mts-hero {
  position: relative; overflow: hidden;
  margin: 0 14px;
  padding: 18px 18px 20px;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 90% -20%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(142deg, #c2410c 0%, #ea580c 46%, #f95901 100%);
  box-shadow: 0 16px 34px -16px rgba(194, 65, 12, .55);
  color: #fff;
}
#sub-moments .mts-hero-glow {
  position: absolute; right: -60px; top: -80px; width: 190px; height: 190px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 237, 213, .5) 0%, rgba(255, 237, 213, 0) 68%);
}
#sub-moments .mts-hero-tag {
  position: relative; display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .26);
}
#sub-moments .mts-hero-t {
  position: relative; margin: 10px 0 0; font-size: 21px; font-weight: 800; line-height: 1.34;
  letter-spacing: .3px;
}
#sub-moments .mts-hero-s {
  position: relative; margin: 8px 0 0; font-size: 12.5px; line-height: 1.7;
  color: rgba(255, 255, 255, .9);
}
#sub-moments .mts-hero-s b { color: #ffe4c7; }

/* 三步流程指示（与同板块的 hook 子页同款观感，用户已经熟悉） */
#sub-moments .mts-flow {
  position: relative; display: flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: 11px; color: rgba(255, 255, 255, .78);
}
#sub-moments .mts-fchip {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
}
#sub-moments .mts-fchip.on { background: #fff; color: #c2410c; font-weight: 700; border-color: #fff; }

/* ===================== 点选区 ===================== */
#sub-moments .mts-picker { margin: 16px 14px 0; }
#sub-moments .mts-group { margin-bottom: 16px; }
#sub-moments .mts-label {
  display: flex; align-items: baseline; gap: 7px;
  /* 🔴 flex-wrap + 主标签 nowrap：说明文字长的时候让它**换到第二行**，
     而不是把"你卖什么？"这个标题折断成"你卖什/么？"（2026-09-19 截图实测踩到）。 */
  flex-wrap: wrap; row-gap: 3px;
  font-size: 13px; font-weight: 800; color: var(--mts-ink);
}
#sub-moments .mts-lb { flex: 0 0 auto; white-space: nowrap; }
#sub-moments .mts-label i {
  flex: 1 1 auto; min-width: 0;      /* 放不下就自己换行，不挤标题 */
  font-style: normal; font-size: 11px; font-weight: 600; color: var(--mts-ink3);
}
#sub-moments .mts-chips {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px;
}
#sub-moments .mts-chip {
  cursor: pointer; user-select: none;
  padding: 8px 12px; border-radius: 11px;
  font-size: 12.5px; font-weight: 600; color: var(--mts-ink2);
  background: var(--mts-paper); border: 1px solid var(--mts-line);
  transition: transform .12s, background .18s, border-color .18s, color .18s;
}
#sub-moments .mts-chip:active { transform: scale(.96); }
#sub-moments .mts-chip.on {
  color: #fff; font-weight: 700;
  background: linear-gradient(135deg, #f95901, #c2410c);
  border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(249, 89, 1, .6);
}
/* 目的那一组做成两行卡片式（信息量大，值得占地方） */
#sub-moments .mts-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
#sub-moments .mts-goal {
  position: relative; cursor: pointer;
  padding: 9px 10px 9px 11px; border-radius: 12px;
  background: var(--mts-paper); border: 1px solid var(--mts-line);
  transition: transform .12s, border-color .18s, box-shadow .18s;
}
#sub-moments .mts-goal:active { transform: scale(.98); }
#sub-moments .mts-goal.on {
  border-color: rgba(249, 89, 1, .5);
  box-shadow: 0 0 0 2px rgba(249, 89, 1, .13), 0 6px 16px -8px rgba(249, 89, 1, .5);
}
#sub-moments .mts-goal-t { font-size: 12.5px; font-weight: 800; color: var(--mts-ink); }
#sub-moments .mts-goal-d { margin-top: 3px; font-size: 10.5px; line-height: 1.5; color: var(--mts-ink3); }
#sub-moments .mts-goal.on .mts-goal-t { color: var(--mts-danger); }

/* 素材输入（可选） */
#sub-moments .mts-mat {
  margin: 2px 14px 0; padding: 12px 13px 11px;
  background: var(--mts-paper); border: 1px solid var(--mts-line);
  border-radius: 14px; box-shadow: var(--mts-shadow);
}
#sub-moments .mts-mat-ta {
  width: 100%; box-sizing: border-box; min-height: 62px; max-height: 30vh; resize: none;
  border: 0; outline: none; background: transparent;
  font-size: 13.5px; line-height: 1.62; color: var(--mts-ink); font-family: inherit;
}
#sub-moments .mts-mat-ta::placeholder { color: var(--mts-ink3); line-height: 1.62; }
#sub-moments .mts-mat-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--mts-line);
}
#sub-moments .mts-mat-hint { font-size: 11px; color: var(--mts-ink3); line-height: 1.5; }

/* 生成按钮 */
#sub-moments .mts-go {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 28px); margin: 14px 14px 0; padding: 15px; box-sizing: border-box;
  font-size: 15.5px; font-weight: 800; letter-spacing: .3px; color: #fff;
  background: linear-gradient(135deg, #f95901, #c2410c);
  border: 0; border-radius: 15px; cursor: pointer;
  box-shadow: 0 14px 26px -12px rgba(249, 89, 1, .62);
  transition: transform .12s, box-shadow .18s, filter .18s;
}
#sub-moments .mts-go:active:not(:disabled) { transform: translateY(1px) scale(.995); }
#sub-moments .mts-go:disabled { filter: grayscale(.45); opacity: .58; cursor: not-allowed; box-shadow: none; }
#sub-moments .mts-go small { font-size: 11.5px; font-weight: 600; opacity: .9; }

/* ===================== 加载 / 出错 ===================== */
#sub-moments .mts-loading {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 14px 0; padding: 15px;
  background: var(--mts-paper); border: 1px solid var(--mts-line);
  border-radius: 14px; font-size: 13px; color: var(--mts-ink2);
  box-shadow: var(--mts-shadow);
}
#sub-moments .mts-spin {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid rgba(249, 89, 1, .2); border-top-color: var(--mts-brand);
  animation: mtsSpin .8s linear infinite;
}
@keyframes mtsSpin { to { transform: rotate(360deg); } }
#sub-moments .mts-err {
  margin: 16px 14px 0; padding: 14px 15px;
  background: #fff7ed; border: 1px solid rgba(194, 65, 12, .22);
  border-radius: 13px; font-size: 13px; line-height: 1.6; color: #9a3412;
}

/* ===================== 结果：朋友圈预览卡 ===================== */
#sub-moments .mts-sect-head {
  display: flex; align-items: center; gap: 8px; margin: 20px 16px 10px;
}
#sub-moments .mts-sect-head h2 {
  margin: 0; font-size: 14.5px; font-weight: 800; color: var(--mts-ink);
}
#sub-moments .mts-sect-head .bar {
  width: 3px; height: 15px; border-radius: 3px; background: var(--mts-brand);
}
#sub-moments .mts-sect-head i {
  font-style: normal; font-size: 11.5px; color: var(--mts-ink3); font-weight: 600;
}

#sub-moments .mts-post {
  position: relative;
  margin: 0 14px 12px; padding: 14px 14px 12px;
  background: #fff; border: 1px solid var(--mts-line);
  border-radius: 16px; box-shadow: var(--mts-shadow);
}
#sub-moments .mts-post-head { display: flex; align-items: center; gap: 9px; }
#sub-moments .mts-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 8px;
  background: linear-gradient(135deg, #fdba74, #f95901);
  color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
#sub-moments .mts-nick { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; color: #576b95; }
#sub-moments .mts-angle {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: rgba(249, 89, 1, .09); color: var(--mts-danger);
  border: 1px solid rgba(249, 89, 1, .16);
}
#sub-moments .mts-post-body {
  margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: #1f1f1f;
  white-space: pre-wrap; word-break: break-word;
}
#sub-moments .mts-post-body .mts-blank {
  display: inline-block; min-width: 42px; padding: 0 4px; margin: 0 1px;
  border-bottom: 1.5px dashed rgba(249, 89, 1, .55);
  color: var(--mts-danger); font-weight: 700;
}
/* 配图格：按建议张数排，一眼看出"发出去什么形状" */
#sub-moments .mts-photos {
  display: grid; gap: 4px; margin-top: 10px; max-width: 232px;
}
#sub-moments .mts-photos.n1 { grid-template-columns: 1fr; max-width: 150px; }
#sub-moments .mts-photos.n2 { grid-template-columns: repeat(2, 1fr); }
#sub-moments .mts-photos.n3 { grid-template-columns: repeat(3, 1fr); }
#sub-moments .mts-photos.n4 { grid-template-columns: repeat(2, 1fr); max-width: 152px; }
#sub-moments .mts-photos.n6 { grid-template-columns: repeat(3, 1fr); }
#sub-moments .mts-photos.n9 { grid-template-columns: repeat(3, 1fr); }
/* 5 / 7 / 8 张是朋友圈**不建议**的张数（会排成缺角）。
   这里照样按 3 列画出来 —— 让"缺角"在预览里直接可见，
   配合下面的黄牌提醒，用户一眼就懂为什么不该用。 */
#sub-moments .mts-photos.n5 { grid-template-columns: repeat(3, 1fr); }
#sub-moments .mts-photos.n7 { grid-template-columns: repeat(3, 1fr); }
#sub-moments .mts-photos.n8 { grid-template-columns: repeat(3, 1fr); }
#sub-moments .mts-photo {
  position: relative; aspect-ratio: 1 / 1; border-radius: 6px;
  background: linear-gradient(135deg, #f5ece4, #ece0d4);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #b09b88; text-align: center;
  padding: 3px; line-height: 1.25; overflow: hidden;
}
#sub-moments .mts-photos-cap { margin-top: 6px; font-size: 11px; color: var(--mts-ink3); line-height: 1.5; }

/* 元信息行（发送时段 / 张数） */
#sub-moments .mts-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px;
}
#sub-moments .mts-meta span {
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  background: #fdf6ec; color: #8a5a24; border: 1px solid var(--mts-line);
}
/* 评论区第一条 */
#sub-moments .mts-cmt {
  margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  background: #f7f8fa; border: 1px solid rgba(120, 120, 120, .14);
  font-size: 12px; line-height: 1.6; color: #555;
}
#sub-moments .mts-cmt b { color: #576b95; font-weight: 700; }

/* 护栏提示条 */
#sub-moments .mts-guard {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  font-size: 11.5px; line-height: 1.6;
}
#sub-moments .mts-guard.ok { background: #f0fdf4; border: 1px solid rgba(15, 118, 110, .2); color: #0f766e; }
#sub-moments .mts-guard.warn { background: #fffbeb; border: 1px solid rgba(180, 83, 9, .24); color: #92400e; }
#sub-moments .mts-guard.bad { background: #fef2f2; border: 1px solid rgba(194, 65, 12, .24); color: #b91c1c; }
#sub-moments .mts-guard.info { background: #eff6ff; border: 1px solid rgba(37, 99, 235, .18); color: #1d4ed8; }
#sub-moments .mts-guard b { font-weight: 800; }

/* 卡片操作 */
#sub-moments .mts-post-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 11px;
  padding-top: 10px; border-top: 1px dashed var(--mts-line);
}
#sub-moments .mts-sp { flex: 1 1 auto; }
#sub-moments .mts-btn {
  cursor: pointer; border: 1px solid var(--mts-line2);
  background: var(--mts-paper); color: #8a5a24;
  padding: 7px 13px; border-radius: 9px; font-size: 12px; font-weight: 700;
  transition: transform .12s, background .18s;
}
#sub-moments .mts-btn:active { transform: scale(.96); }
#sub-moments .mts-btn.primary {
  border: 0; color: #fff;
  background: linear-gradient(135deg, #f95901, #c2410c);
  box-shadow: 0 6px 14px -6px rgba(249, 89, 1, .6);
}

/* 底部：换一批 / 复制全部 */
#sub-moments .mts-again {
  display: flex; gap: 9px; margin: 4px 14px 0;
}
#sub-moments .mts-again .mts-btn { flex: 1 1 0; padding: 13px 10px; font-size: 13.5px; border-radius: 13px; text-align: center; }

/* 发圈节奏提醒 */
#sub-moments .mts-tip {
  margin: 14px 14px 0; padding: 13px 14px;
  background: #fdf6ec; border: 1px dashed var(--mts-line2);
  border-radius: 13px; font-size: 12px; line-height: 1.7; color: #8a5a24;
}
#sub-moments .mts-tip b { color: var(--mts-danger); }

/* 轻提示 */
#sub-moments .mts-toast {
  position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%);
  background: rgba(36, 25, 15, .93); color: #fff;
  padding: 10px 20px; border-radius: 999px; font-size: 13px;
  z-index: 80; opacity: 0; transition: opacity .2s; pointer-events: none;
}
#sub-moments .mts-toast.on { opacity: 1; }

/* ===================== 2026-09-19 改版新增 =====================
 * 起因（用户两条反馈）：
 *   ① 文案太长 → 复制粘贴发出去被折叠，客户看不到（护栏判据也从"行数"改成"字数"）
 *   ② 20 个行业的选题太宽泛（"卖核桃的只能选文娱行业"）→ 改成用户自己填「你卖什么」
 * 新增四组样式：必填标签 / 自由输入框 / 示例词 / 「发之前改这里」清单。
 * ⚠️ 照旧全部带 #sub-moments 作用域，且只用上面定义过的 --mts-* 变量
 *    （var() 取不到值会让整条声明失效，不是回退默认值 —— 2026-09-18 alldl 那次事故）。
 * ============================================================== */

/* 必填标签（跟 label 同一行，用 align-items: baseline 对齐） */
#sub-moments .mts-req {
  flex: 0 0 auto;
  padding: 2px 6px; border-radius: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: #fff; background: var(--mts-brand);
}

/* 「你卖什么」自由输入框 —— 比 chips 笨一点，但能填到"新疆薄皮核桃"这个粒度 */
#sub-moments .mts-input {
  display: block; width: 100%; box-sizing: border-box;
  margin-top: 9px; padding: 12px 13px;
  font-size: 15px;      /* 🔴 不小于 16 会触发 iOS 自动缩放页面 —— 这里 15 + 下面 font-size 兜底 */
  font-weight: 600; font-family: inherit; color: var(--mts-ink);
  background: var(--mts-paper);
  border: 1.5px solid var(--mts-line2); border-radius: 13px;
  outline: none;
  box-shadow: var(--mts-shadow);
  transition: border-color .18s, box-shadow .18s;
}
#sub-moments .mts-input::placeholder { font-weight: 500; color: var(--mts-ink3); font-size: 13.5px; }
#sub-moments .mts-input:focus {
  border-color: var(--mts-brand);
  box-shadow: 0 0 0 3px rgba(249, 89, 1, .13), var(--mts-shadow);
}

/* 示例词：点一下直接填进输入框（填完还能改），不是选项 */
#sub-moments .mts-egs {
  margin-top: 8px; font-size: 11px; line-height: 2; color: var(--mts-ink3);
}
#sub-moments .mts-eg {
  display: inline-block; margin: 0 3px 3px 4px; padding: 3px 9px;
  border-radius: 999px; cursor: pointer; user-select: none;
  font-size: 11.5px; font-weight: 600; color: var(--mts-ink2);
  background: transparent; border: 1px dashed var(--mts-line2);
  transition: background .16s, border-color .16s, color .16s;
}
#sub-moments .mts-eg:active { background: rgba(249, 89, 1, .08); border-color: var(--mts-brand); color: var(--mts-brand); }

/* 「发之前改这里」清单（模型给的【必填】+ 兜底摘出来的写作说明）
 * ⚠️ 它在 .mts-post 卡片内部，而卡片自己已经有 padding: 14px ——
 *    这里**不许再写左右 margin**，否则会在卡里再缩进一层、还可能撑宽（同 .mts-cmt 的写法）。 */
#sub-moments .mts-fill {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 10px;
  background: rgba(180, 83, 9, .06);
  border: 1px dashed rgba(180, 83, 9, .34);
}
#sub-moments .mts-fill-h { font-size: 12px; font-weight: 800; color: var(--mts-warn); }
#sub-moments .mts-fill-i {
  margin-top: 5px; padding-left: 12px; position: relative;
  font-size: 12px; line-height: 1.65; color: var(--mts-ink2);
}
#sub-moments .mts-fill-i::before { content: '·'; position: absolute; left: 2px; color: var(--mts-warn); font-weight: 900; }

/* 灰按钮旁边写清"为什么还不能点"（不许让人猜） */
#sub-moments .mts-go-hint {
  margin: 7px 14px 0; text-align: center;
  font-size: 11.5px; color: var(--mts-ink3);
}