/* =========================================================
 * YOS promo站 · 移动端 & 微信分享通用样式 (v1 · 08-31)
 * 使用方：outputs/promo/*.html 头部 <link rel="stylesheet" href="assets/promo-mobile.css">
 * 视觉：航海图视觉体系（沙金 #E8B45A / 深色玻璃态 rgba(5,37,61,0.82) / 羊皮纸 rgba(247,241,227,0.92)）
 * 重点：①手机 375/430 断点  ②触控反馈透明 + 安全区  ③最小点击 44px  ④字号下限 13px
 *       ⑤浮动移动端工具条（锚点 / 分享 / 生成海报）
 * =======================================================*/

/* ---------- 全局触控 & 安全区 ---------- */
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* hover 在手机禁用，鼠标机才启用 hover 动效 */
@media (hover: none) {
  .btn:hover, .chip:hover, .card:hover, .yos-navtop a:hover { transform: none !important; box-shadow: none !important; }
}
@media (hover: hover) {
  .btn:hover { transform: scale(.985); transition: transform 180ms cubic-bezier(.4,0,.2,1); }
}

/* ---------- 字体基线（≥13px 下限，按屏幕分档）---------- */
:root {
  --promo-font-step-xs: 13px;
  --promo-font-step-sm: 14px;
  --promo-font-step-base: 15px;
  --promo-font-step-md: 17px;
  --promo-font-step-lg: 20px;
  --promo-font-step-xl: 24px;
  --promo-font-step-2xl: 30px;
  --promo-gold: #E8B45A;
  --promo-nav-bg: rgba(5,37,61,0.82);
  --promo-parchment: rgba(247,241,227,0.92);
  --promo-parchment-border: rgba(232,180,90,0.6);
  --promo-ink: #0A2540;
  --promo-ink-soft: #4A5A6E;
}

/* ≥ 431px（平板/桌面）沿用原视觉，不破坏 */
@media (max-width: 820px) {
  :root { --promo-font-step-base: 15px; --promo-font-step-md: 16px; }
}
/* ≤430px（手机，含 iPhone 14 Pro Max 430） */
@media (max-width: 430px) {
  :root {
    --promo-font-step-xs: 13px;
    --promo-font-step-sm: 13px;
    --promo-font-step-base: 14px;
    --promo-font-step-md: 15px;
    --promo-font-step-lg: 18px;
    --promo-font-step-xl: 22px;
    --promo-font-step-2xl: 26px;
  }
  html { font-size: 14px; }
  body { font-size: var(--promo-font-step-base); line-height: 1.6; color: var(--promo-ink); }
  h1 { font-size: var(--promo-font-step-2xl); }
  h2 { font-size: var(--promo-font-step-xl); }
  h3 { font-size: var(--promo-font-step-lg); }
  .section { padding: 22px 16px !important; }
  .container, .wrap, main, article { max-width: 100% !important; padding: 0 14px !important; margin: 0 auto !important; }
}
/* ≤375px（小屏，iPhone SE）：进一步压内边距不压字号 */
@media (max-width: 375px) {
  .section { padding: 18px 12px !important; }
  .container, .wrap, main, article { padding: 0 12px !important; }
}

/* ---------- 统一手机端卡片 & 按钮触控（最小 44px）---------- */
.btn, button.btn, a.btn,
input[type="submit"], input[type="button"],
.chip, .tab, .pill {
  min-height: 44px;
  padding: 0 18px;
  line-height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 160ms cubic-bezier(.4,0,.2,1), box-shadow 160ms;
  will-change: transform;
}
.btn:active, .chip:active, .tab:active, .pill:active {
  transform: scale(0.97) !important;
}
.btn-gold, a.btn-gold {
  background: linear-gradient(135deg,#E8B45A 0%,#C98F38 100%);
  color: #0A2540; font-weight: 600;
  box-shadow: 0 6px 18px rgba(232,180,90,.32);
  border: 1px solid rgba(232,180,90,.75);
}
.btn-ghost, a.btn-ghost {
  background: rgba(255,255,255,.08); color: #E8B45A;
  border: 1px solid rgba(232,180,90,.4);
}

/* 表单触控最小高度 + 安全区底部 */
label { font-size: var(--promo-font-step-sm); color: var(--promo-ink-soft); }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
select, textarea {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(10,37,64,.15);
  background: #fff;
  font-size: var(--promo-font-step-base);
  color: var(--promo-ink);
  width: 100%;
}
textarea { min-height: 110px; line-height: 1.55; }
.form-row { margin-bottom: 14px; }
.form-foot { margin-top: 20px; padding-bottom: env(safe-area-inset-bottom, 0); }
.form-foot button[type="submit"] { width: 100%; }

/* 多选 agree checkbox 触控区放大 */
.agree input[type="checkbox"] { transform: scale(1.15); margin-right: 8px; }
.agree { display: flex; align-items: flex-start; gap: 8px; padding: 8px 2px 14px; }
.agree span { font-size: var(--promo-font-step-xs); line-height: 1.55; color: var(--promo-ink-soft); }

/* ---------- 统一顶部 yos-navtop 手机版（玻璃态胶囊 → 移动端全屏条）---------- */
.yos-navtop {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--promo-nav-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(232,180,90,.25);
  padding-top: calc(10px + env(safe-area-inset-top, 0));
}
.yos-navtop .nt-brand {
  color: #F6F1E2; font-weight: 700; letter-spacing: .04em;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--promo-font-step-md);
}
.yos-navtop .nt-brand .compass {
  width: 22px; height: 22px; color: var(--promo-gold);
  background: radial-gradient(circle at 30% 30%, rgba(232,180,90,.35), rgba(232,180,90,0) 60%);
  border-radius: 50%;
  display: inline-block;
  text-align: center; line-height: 22px; font-size: 12px;
  border: 1px solid rgba(232,180,90,.5);
}
.yos-navtop .nt-links { display: flex; gap: 14px; align-items: center; }
.yos-navtop a {
  color: rgba(246,241,226,.82);
  text-decoration: none;
  font-size: var(--promo-font-step-sm);
  padding: 6px 10px; border-radius: 999px;
}
.yos-navtop a.active { color: var(--promo-gold); background: rgba(232,180,90,.12); }
@media (max-width: 640px) {
  .yos-navtop { padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top,0)); }
  .yos-navtop .nt-links a.nt-hide-sm { display: none; }
}

/* ---------- 移动端浮动工具条（返回顶部 + 分享 + 生成海报）----------
 *  ⚠️ 2026-08-31 修：PC ≥821 也强制显示（用户反馈在桌面端完全看不到入口）
 *  按钮从纯圆形图标 → 「圆角胶囊 + 图标 + 文字」，手机宽屏自适应收缩
 * --------------------------------------------------------------------*/
.promo-float-actions {
  position: fixed; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0));
  z-index: 40; display: flex; flex-direction: column; gap: 10px;
  font-family: "PingFang SC","Microsoft Yahei",sans-serif;
}
.promo-float-actions button {
  min-width: 56px; min-height: 56px; padding: 6px 10px;
  border-radius: 16px;
  border: 1px solid rgba(232,180,90,.4);
  background: var(--promo-nav-bg); color: #F6F1E2;
  box-shadow: 0 10px 24px rgba(5,37,61,.32), 0 0 0 1px rgba(255,255,255,.04) inset;
  font-size: 11px; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-weight: 600; letter-spacing: .02em;
}
.promo-float-actions button .ic { color: var(--promo-gold); font-size: 18px; line-height: 1; display: block; margin-bottom: 1px; }
.promo-float-actions button.poster {
  min-width: 64px; background: linear-gradient(180deg, rgba(232,180,90,.22), rgba(232,180,90,.08));
  border-color: rgba(232,180,90,.75);
  box-shadow: 0 14px 28px rgba(232,180,90,.22), 0 0 0 1px rgba(255,255,255,.05) inset;
  color: #FFE9BC;
}
.promo-float-actions button.poster .ic { color: #FFCF6E; font-size: 20px; }
.promo-float-actions button.poster b { color: #FFE9BC; font-weight: 800; font-size: 13px; }
.promo-float-actions button:active { transform: scale(0.95); }

/* 桌面端 ≥ 821：工具条从右下 4 列竖 → 改宽一点但保持入口不隐藏 */
@media (min-width: 821px) {
  .promo-float-actions { right: 20px; bottom: 24px; }
  .promo-float-actions button { min-width: 72px; min-height: 62px; border-radius: 18px; font-size: 12px; }
  .promo-float-actions button.poster { min-width: 84px; }
}
/* ≤ 375px：手机 SE 再缩一点不挡内容 */
@media (max-width: 375px) {
  .promo-float-actions { right: 8px; gap: 8px; }
  .promo-float-actions button { min-width: 52px; min-height: 52px; font-size: 10px; }
  .promo-float-actions button.poster b { font-size: 11px; }
}

/* ---------- 顶部/首屏 专属：生成朋友圈海报 显著 CTA ---------- */
a.btn-poster, button.btn-poster, .btn-poster {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 44px; padding: 0 18px; line-height: 44px;
  border-radius: 999px; border: 1px solid rgba(232,180,90,.7);
  background: linear-gradient(135deg, rgba(232,180,90,.95) 0%, rgba(201,143,56,.98) 100%);
  color: #0A2540; text-decoration: none; cursor: pointer;
  font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 10px 24px rgba(232,180,90,.35), 0 0 0 1px rgba(255,255,255,.18) inset;
  transition: transform 160ms cubic-bezier(.4,0,.2,1), box-shadow 160ms;
}
.btn-poster:active { transform: scale(.97); }
.btn-poster .tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700;
  background: rgba(10,37,64,.88); color: #FFE9BC; margin-left: 2px;
}
@media (max-width: 430px) {
  .btn-poster { font-size: 13px; padding: 0 14px; }
  .btn-poster .tag { display: none; }
}

/* ---------- 羊皮纸卡手机端圆角与阴影修正（避免溢出）---------- */
.parchment-card, .parchment {
  background: var(--promo-parchment);
  border: 1px solid var(--promo-parchment-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(10,37,64,.12), inset 0 0 0 1px rgba(255,255,255,.5);
}
@media (max-width: 430px) {
  .parchment-card, .parchment {
    border-radius: 14px;
    padding: 18px 16px !important;
    margin: 14px 0 !important;
  }
}

/* ---------- 两列表格/卡片栅格 → 手机单列 ---------- */
.promo-grid-2, .grid-2, .promo-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .promo-grid-2,.grid-2,.promo-columns { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- 海报单页：桌面自适应居中 + 手机整屏可缩放 ---------- */
.poster-stage {
  width: min(100vw, 430px);
  margin: 0 auto;
  display: block;
}
@media (min-width: 821px) {
  .poster-stage { width: 420px; box-shadow: 0 30px 60px rgba(5,37,61,.25); border-radius: 20px; }
}

/* ---------- 分享卡片预览（debug / 扫码页可见）---------- */
.promo-share-preview {
  padding: 14px; border: 1px dashed rgba(232,180,90,.5); border-radius: 14px;
  background: rgba(247,241,227,.6); margin-top: 18px;
  display: flex; gap: 12px; align-items: flex-start;
}
.promo-share-preview img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex: 0 0 72px; border:1px solid rgba(232,180,90,.4)}
.promo-share-preview .sp-title { font-weight: 700; color: var(--promo-ink); font-size: var(--promo-font-step-md); }
.promo-share-preview .sp-desc { color: var(--promo-ink-soft); font-size: var(--promo-font-step-xs); line-height: 1.5; margin-top: 4px;}

/* ---------- 长图海报 Canvas 弹层 ---------- */
.promo-poster-mask {
  position: fixed; inset: 0; background: rgba(5,15,28,.72); z-index: 200;
  display: grid; place-items: center; padding: 22px;
  backdrop-filter: blur(4px);
}
.promo-poster-mask .pp-panel {
  width: min(100%, 380px); max-height: 86vh; overflow: auto;
  background: #0A2540; border: 1px solid rgba(232,180,90,.35);
  border-radius: 18px; padding: 16px 14px 14px;
  text-align: center; color: #F6F1E2;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.promo-poster-mask .pp-panel h3 { color: var(--promo-gold); margin: 4px 0 10px; font-size: 17px; }
.promo-poster-mask .pp-panel .pp-sub { color: rgba(246,241,226,.72); font-size: 12px; margin-bottom: 14px; }
.promo-poster-mask .pp-panel img {
  width: 100%; border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(232,180,90,.35);
}
.promo-poster-mask .pp-panel .pp-actions { margin-top: 14px; display: flex; gap: 10px; }
.promo-poster-mask .pp-panel .pp-actions button { flex: 1; }