/* ============================================================================
 * 第 13 / 14 项 · poster.css —— 推广海报（前台生成 + 后台文案配置）+ 活动点数规则
 *
 * 被两个页面共用：
 *   - index.html（加载 css/tokens.css，新变量名齐全）
 *   - admin.html（不加载 tokens.css，自带一份旧变量名 :root）
 * 因此全部 token 写成 var(新名, var(旧名)) 双层兜底，与 batch2.css 同口径。
 * 画布几何 / 字号 token（--poster-*）在两页的 :root 里各有一份同值定义，
 * 由 js/poster-canvas.js 通过 getComputedStyle 读取，JS 侧不写魔数。
 *
 * 【P0】零硬编码色值；无紫→粉渐变；圆角 ≤ 18px；无弹跳缓动；图标走 sprite，无 emoji。
 * ========================================================================== */

/* ---------- 无障碍：仅屏幕阅读器可见（本项目此前无此类，补在共用文件里） ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================================
 * 一、后台「海报文案」配置页（UIUX §4）
 * ========================================================================== */
.ps-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--poster-preview-w, 360px);
  gap: 20px;
  align-items: start;
}
@media (max-width: 1080px) {
  /* 窄屏：预览落到表单下方并取消吸顶，避免横向挤压 */
  .ps-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 表单：分组（每组 ≤3 字段，UIUX §4.4） ---------- */
.ps-group {
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-lg, 14px);
  padding: 14px 16px 4px;
  margin-bottom: 14px;
  background: var(--surface, var(--bg1));
}
.ps-group-h {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm, 13px); font-weight: 600;
  color: var(--fg, var(--ink));
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.ps-group-h .ti { color: var(--accent); }
.ps-group-n {
  font-size: var(--text-xs, 12px); font-weight: 400;
  color: var(--meta, var(--ink3));
  margin-left: auto;
}
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 720px) { .ps-grid { grid-template-columns: 1fr; } }
.ps-grid .full { grid-column: 1 / -1; }

/* ---------- 模板专属分组：默认折叠，选中该版式才展开（UIUX §4.4） ---------- */
/* 表头是真 <button>：键盘可达、自带 aria-expanded，不靠 div onclick 装（§6.2 无障碍） */
.ps-group-h-btn {
  width: 100%;
  min-height: 44px;          /* 触摸目标 ≥44px */
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit;
  cursor: pointer; text-align: left;
}
.ps-group-h-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(45,212,191,.35));
  border-radius: var(--radius-sm, 6px);
}
/* 折叠开关的箭头：跟着 --meta 走，不抢组名前面那个 --accent 主图标 */
.ps-group-h .ps-caret .ti { color: var(--meta, var(--ink3)); }
.ps-caret {
  display: flex; align-items: center; margin-left: 10px;
  transition: transform var(--motion-fast, 150ms) var(--ease-standard, ease);
}
.ps-group.is-open .ps-caret { transform: rotate(180deg); }
.ps-group-sum {
  font-size: var(--text-xs, 12px);
  color: var(--meta, var(--ink3));
  line-height: 1.7;
  margin: -6px 0 0;
}
/* 活动款专用组的季节性提醒：角标 / 活动期是限时文案，节后必须清空 */
.ps-tip {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 6px);
  background: var(--warn-dim);
  color: var(--ink2);
  font-size: var(--text-xs, 12px);
  line-height: 1.7;
}
/* 折叠时用 display 而不是 max-height：无高度魔数，也不会有半展开的残影 */
.ps-group.is-fold > .ps-grid { display: none; }
.ps-group.is-fold.is-open > .ps-grid { display: grid; }
@media (prefers-reduced-motion: reduce) {
  .ps-caret { transition: none; }
}

/* ---------- 字数提示：三色（安全 / 接近上限 / 超限） ---------- */
.ps-cc {
  font-size: var(--text-xs, 12px);
  color: var(--meta, var(--ink3));          /* 安全：三级文本色 */
  font-variant-numeric: tabular-nums;
  transition: color var(--motion-fast, 150ms) var(--ease-standard, ease);
}
.ps-cc.is-near { color: var(--warn); }      /* 接近上限：琥珀 */
.ps-cc.is-over { color: var(--danger, var(--rose)); font-weight: 600; }  /* 超限：朱砂 */
/* 超限时输入框描边同步变朱砂（不靠颜色单独承载信息，字数文字已给出数字） */
.ps-fld.is-over input,
.ps-fld.is-over textarea { border-color: var(--danger, var(--rose)); }
.ps-fld label { display: flex; align-items: baseline; gap: 8px; }
.ps-fld label .ps-cc { margin-left: auto; }

/* ---------- 模板选择：单选卡片（真 radio，不 display:none） ---------- */
.ps-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .ps-tpls { grid-template-columns: 1fr; } }
.ps-tpl { position: relative; display: block; cursor: pointer; }
.ps-tpl input {
  position: absolute; opacity: 0;
  width: 44px; height: 44px;   /* 触摸目标仍然 44×44，靠 sr-only 语义不丢 */
  margin: 0; left: 6px; top: 6px; cursor: pointer;
}
.ps-tpl-box {
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-md, 10px);
  padding: 10px 12px;
  background: var(--surface-2, var(--card));
  transition: border-color var(--motion-fast, 150ms) var(--ease-standard, ease),
              background-color var(--motion-fast, 150ms) var(--ease-standard, ease);
}
.ps-tpl:hover .ps-tpl-box { border-color: var(--accent); }
.ps-tpl input:checked + .ps-tpl-box {
  border-color: var(--accent);
  background: var(--accent-dim, rgba(45, 212, 191, .12));
}
.ps-tpl input:focus-visible + .ps-tpl-box { box-shadow: var(--focus-ring, 0 0 0 3px rgba(45,212,191,.35)); }
.ps-tpl-nm {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-base, 14px); font-weight: 600;
  color: var(--fg, var(--ink));
}
.ps-tpl-nm .ti { color: var(--accent); }
.ps-tpl-ds {
  margin-top: 4px;
  font-size: var(--text-xs, 12px);
  color: var(--muted, var(--ink2));
  line-height: 1.6;
}

/* ---------- 右侧实时预览（UIUX §4.6：360×640 = 1080×1920 × 0.3333） ---------- */
.ps-prev { position: sticky; top: 16px; }
@media (max-width: 1080px) { .ps-prev { position: static; } }
.ps-prev-h {
  font-size: var(--text-sm, 13px); font-weight: 600;
  color: var(--fg, var(--ink));
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.ps-prev-h .ti { color: var(--accent); }
.ps-prev-box {
  width: var(--poster-preview-w, 360px);
  aspect-ratio: calc(var(--poster-w, 1080) / var(--poster-h, 1920));
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  background: var(--surface-2, var(--card));
  display: flex; align-items: center; justify-content: center;
}
.ps-prev-box canvas { width: 100%; height: 100%; display: block; }
.ps-prev-note {
  margin-top: 8px;
  font-size: var(--text-xs, 12px);
  color: var(--meta, var(--ink3));
  line-height: 1.7;
}
/* 预览骨架屏：等比占位 + 呼吸（prefers-reduced-motion 下由 tokens.css 全局停动画，
   但骨架本身是「静态灰块 + 文案」，不会因此变成空白） */
.ps-skel {
  width: 100%; height: 100%;
  background: linear-gradient(180deg,
    var(--surface-2, var(--card)) 0%,
    var(--border, var(--bd)) 100%);
  animation: psBreath 1.6s var(--ease-standard, ease) infinite alternate;
}
@keyframes psBreath { from { opacity: .55; } to { opacity: 1; } }

/* ---------- 后台：接口未就绪 / 保存被拒的降级条（UIUX §4.8） ---------- */
.ps-down {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--warn);
  border-radius: var(--radius-md, 10px);
  padding: 12px 14px;
  margin-bottom: 14px;
  color: var(--warn);
  background: var(--warn-dim);
  font-size: var(--text-sm, 13px);
}
.ps-down-sub {
  margin-top: 4px;
  font-size: var(--text-xs, 12px);
  color: var(--fg-2, var(--ink2));
  line-height: 1.7; font-weight: 400;
}

/* ============================================================================
 * 二、前台「生成推广海报」（UIUX §5）
 * ========================================================================== */
.pp-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .pp-tpls { grid-template-columns: 1fr; } }
.pp-tpl { position: relative; display: block; cursor: pointer; }
.pp-tpl input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; left: 4px; top: 4px; cursor: pointer; }
.pp-tpl-box {
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-md, 10px);
  padding: 9px 10px;
  background: var(--surface-2, var(--card));
  transition: border-color var(--motion-fast, 150ms) var(--ease-standard, ease),
              background-color var(--motion-fast, 150ms) var(--ease-standard, ease);
}
.pp-tpl input:checked + .pp-tpl-box {
  border-color: var(--accent);
  background: var(--accent-dim, rgba(45, 212, 191, .12));
}
.pp-tpl input:focus-visible + .pp-tpl-box { box-shadow: var(--focus-ring, 0 0 0 3px rgba(45,212,191,.35)); }
.pp-tpl-nm { font-size: var(--text-sm, 13px); font-weight: 600; color: var(--fg, var(--ink)); }
.pp-tpl-ds { margin-top: 3px; font-size: var(--text-xs, 12px); color: var(--meta, var(--ink3)); line-height: 1.5; }

/* 舞台：海报本体 / 骨架 / 空态 / 错误态共用同一个盒子，避免切换时布局跳动 */
.pp-stage {
  width: 100%; max-width: 340px; margin: 0 auto;
  aspect-ratio: calc(var(--poster-w, 1080) / var(--poster-h, 1920));
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  background: var(--surface-2, var(--card));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pp-stage canvas { width: 100%; height: 100%; display: block; }
/* 空态 / 错误态：图标 + 一句人话 + 一个动作（UIUX §5.6 a-d） */
.pp-ph {
  padding: 20px 16px; text-align: center;
  color: var(--muted, var(--ink2));
  font-size: var(--text-sm, 13px); line-height: 1.8;
}
.pp-ph .ti { color: var(--meta, var(--ink3)); margin-bottom: 8px; }
.pp-ph.is-err { color: var(--danger, var(--rose)); }
.pp-ph.is-err .ti { color: var(--danger, var(--rose)); }
.pp-ph-b {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  min-height: 44px;   /* 触摸目标 ≥44px */
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 10px);
  background: var(--accent-dim, rgba(45, 212, 191, .12));
  color: var(--accent);
  font-size: var(--text-sm, 13px); font-weight: 600;
  cursor: pointer;
  transition: background-color var(--motion-fast, 150ms) var(--ease-standard, ease);
}
.pp-ph-b:hover { background: var(--accent-strong, var(--grad)); color: var(--on-accent); }

.pp-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; justify-content: center; }
@media (max-width: 560px) {
  .pp-acts > * { flex: 1 1 calc(50% - 5px); justify-content: center; }
}
/* iOS Safari / 微信内 <a download> 不可用 → 长按保存提示（UIUX §5.5） */
.pp-tip {
  margin-top: 12px;
  font-size: var(--text-xs, 12px);
  color: var(--meta, var(--ink3));
  line-height: 1.8; text-align: center;
}
.pp-tip.is-warn { color: var(--warn); }

/* ---------- 防刷专项：延迟解锁的那一份（活动加送） ----------
   金色 = 奖励语义，不是警告（朱砂会让人读成「出事了」）：
   这本来就是一件好事，只是到账时间晚一点，说清楚就行。 */
.pp-pend {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 12px; padding: 9px 12px;
  border-radius: var(--radius-md, 10px);
  background: var(--gold-dim, rgba(245, 196, 81, .12));
  border: 1px solid var(--gold);
  font-size: var(--text-xs, 12px); line-height: 1.75;
  color: var(--gold);
}
.pp-pend .ti { flex: none; margin-top: 2px; }

/* ---------- 灯箱：点海报看大图（长按保存友好） ---------- */
.pp-lb {
  position: fixed; inset: 0; z-index: var(--z-lightbox, 1400);
  background: rgba(0, 0, 0, .82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pp-lb-in {
  max-width: min(92vw, 460px);
  max-height: 88vh;
  border-radius: var(--radius-lg, 14px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface, var(--bg1));
  border: 1px solid var(--border, var(--bd));
}
.pp-lb-in canvas { width: 100%; height: auto; display: block; }
.pp-lb-x {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border, var(--bd));
  background: var(--surface, var(--bg1));
  color: var(--fg-2, var(--ink2));
  cursor: pointer;
}
.pp-lb-x:hover { color: var(--fg, var(--ink)); border-color: var(--accent); }

/* ============================================================================
 * 三、后台「活动点数规则」（第 13 项）
 * ========================================================================== */
.pr-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-md, 10px);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface, var(--bg1));
}
.pr-row.is-off { opacity: .62; }
.pr-nm {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-base, 14px); font-weight: 600;
  color: var(--fg, var(--ink));
  min-width: 0;
}
.pr-win { font-size: var(--text-xs, 12px); color: var(--meta, var(--ink3)); font-variant-numeric: tabular-nums; }
/* 给非技术老板看的算式：500 × 1.5 + 300 = 1050 */
.pr-calc {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm, 13px);
  color: var(--accent);
  background: var(--accent-dim, rgba(45, 212, 191, .12));
  border-radius: var(--radius-sm, 6px);
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pr-calc.is-idle { color: var(--meta, var(--ink3)); background: var(--surface-2, var(--card)); }
/* 生效预览：整条规则最终的「用户实际拿到多少点」 */
.pr-effect {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border, var(--bd));
  border-radius: var(--radius-md, 10px);
  padding: 12px 14px;
  margin: 4px 0 14px;
  background: var(--surface-2, var(--card));
  font-size: var(--text-sm, 13px);
  color: var(--fg-2, var(--ink2));
  line-height: 1.8;
}
.pr-effect b { color: var(--accent); font-family: var(--font-mono, monospace); font-size: var(--text-md, 15px); }
.pr-effect .ti { color: var(--accent); }
.pr-acts { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* ============================================================================
 * 三、推广中心 · 邀请奖励结算进度（防刷专项 /js/invite-progress.js）
 *
 * 进度条三态：进行中=青碧（品牌强调色）、已解锁=翠绿（语义色）、已失效=中性灰。
 * 强调色全页只在这条进度上出现一次，不喧宾夺主。
 * ========================================================================== */
.ipg-mine {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--gold);
  border-radius: var(--radius-md, 10px);
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--gold-dim, rgba(245, 196, 81, .12));
}
.ipg-mine > .ti { color: var(--gold); flex: none; margin-top: 2px; }
.ipg-mine > div { flex: 1; min-width: 0; }
.ipg-mine-h { font-size: var(--text-sm, 13px); font-weight: 600; color: var(--gold); line-height: 1.7; }

.ipg-sum {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: var(--text-sm, 13px); color: var(--fg-2, var(--ink2));
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border, var(--bd));
}
.ipg-sum b { color: var(--fg, var(--ink)); font-family: var(--font-mono, monospace); font-size: var(--text-md, 15px); }

.ipg-row { padding: 10px 0; border-bottom: 1px solid var(--border-soft, rgba(148,163,184,.08)); }
.ipg-row:last-of-type { border-bottom: 0; }
.ipg-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.ipg-nm { font-size: var(--text-sm, 13px); font-weight: 600; color: var(--fg, var(--ink)); }
.ipg-st {
  margin-left: auto; flex: none;
  font-size: var(--text-xs, 12px); font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-sm, 6px);
}
.ipg-st.is-wait { color: var(--accent); background: var(--accent-dim, rgba(45,212,191,.12)); }
.ipg-st.is-ok   { color: var(--success); }
.ipg-st.is-off  { color: var(--meta, var(--ink3)); }

/* 进度条：轨道用三级表面，填充用强调色。不做动画（这是数据，不是装饰） */
.ipg-bar {
  height: 6px; border-radius: var(--radius-pill, 9999px);
  background: var(--surface-2, var(--card)); overflow: hidden;
}
.ipg-bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ipg-bar.is-ok > i { background: var(--success); }
.ipg-bar.is-off > i { background: var(--meta, var(--ink3)); }

.ipg-ft { margin-top: 6px; font-size: var(--text-xs, 12px); color: var(--meta, var(--ink3)); line-height: 1.7; }
.ipg-more { padding-top: 10px; font-size: var(--text-xs, 12px); color: var(--meta, var(--ink3)); }
.ipg-note { margin-top: 12px; font-size: var(--text-xs, 12px); color: var(--meta, var(--ink3)); line-height: 1.7; }