/* ============================================================
 * legacy-compat.css
 * 旧版国产内核（百度 T7 / QQ X5 / UC U4 / 360 / 微信旧 WebView）兼容兜底。
 *
 * 这个文件不经过 Tailwind/Lightning CSS 处理，直接由 <link> 引入，
 * 所以 -webkit-box / -webkit-flex 等老前缀不会被压缩工具删去。
 * globals.css 中的同名规则在现代浏览器中生效，本文件在老内核中兜底。
 * ============================================================ */

/* ---------- lucide SVG 图标：强制统一尺寸，避免巨型空心线条 ---------- */
svg.lucide {
  width: 1.25em !important;
  height: 1.25em !important;
  min-width: 1.25em;
  min-height: 1.25em;
  display: inline-block;
  vertical-align: middle;
  -webkit-flex-shrink: 0 !important;
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- flex 工具类：三重前缀 ---------- */
.flex {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

/* ---------- inset-0 兜底：百度 T7 等旧内核不识别 inset 简写，
 *    导致 fixed/absolute 全屏遮罩不铺满（弹窗整体偏移、露出底部内容）。
 *    这里显式给四向定位，并对常见的 inset-x-0 / inset-y-0 一并兜底。 */
.inset-0 {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}
.inset-x-0 {
  left: 0 !important;
  right: 0 !important;
}
.inset-y-0 {
  top: 0 !important;
  bottom: 0 !important;
}
/* after/ before 伪元素用 Tailwind 的 after:inset-0 / before:inset-0
 * 编译成 .after\:inset-0::after 这类 class，同样兜底 */
.after\:inset-0::after,
.before\:inset-0::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.inline-flex {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}
.flex-row {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: row !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}
.flex-col {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
.flex-wrap {
  -webkit-flex-wrap: wrap !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}
.items-center {
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}
.items-start {
  -webkit-box-align: start !important;
  -webkit-align-items: flex-start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}
.items-end {
  -webkit-box-align: end !important;
  -webkit-align-items: flex-end !important;
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}
.justify-center {
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
.justify-between {
  -webkit-box-pack: justify !important;
  -webkit-justify-content: space-between !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
.justify-start {
  -webkit-box-pack: start !important;
  -webkit-justify-content: flex-start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}
.justify-end {
  -webkit-box-pack: end !important;
  -webkit-justify-content: flex-end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}
.flex-1 {
  -webkit-box-flex: 1 !important;
  -webkit-flex: 1 1 0% !important;
  -ms-flex: 1 1 0% !important;
  flex: 1 1 0% !important;
  min-width: 0;
}
.flex-shrink-0,
.shrink-0 {
  -webkit-flex-shrink: 0 !important;
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}
.flex-grow {
  -webkit-box-flex: 1 !important;
  -webkit-flex-grow: 1 !important;
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

/* ---------- 业务通用行：图标+文字横向并排 ---------- */
.legacy-row {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/* ---------- 首页模板网格：极老内核不支持 CSS grid，退化为两列 flex ---------- */
@supports not (display: grid) {
  .template-grid {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  .template-grid > * {
    width: 50% !important;
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
}
.legacy-row > * {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.legacy-row > .flex-1,
.legacy-row > [data-legacy-flex] {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* 极老内核：display:flex 完全不支持时退化为 table 布局 */
@supports not (display: flex) {
  .legacy-row {
    display: table !important;
    width: 100%;
    table-layout: auto;
  }
  .legacy-row > * {
    display: table-cell;
    vertical-align: middle;
  }
}

/* ---------- 主容器：显式 px 字号与居中，不依赖 rem 计算 ---------- */
.app-container {
  width: 100% !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (min-width: 768px) {
  .app-container {
    max-width: 720px !important;
  }
}
@media (min-width: 1024px) {
  .app-container {
    max-width: 960px !important;
  }
}

h1.app-title {
  font-size: 28px;
  line-height: 1.25;
}
.feature-text {
  font-size: 13px;
  line-height: 1.35;
}
.card-title {
  font-size: 15px;
  line-height: 1.35;
}
.card-sub {
  font-size: 12px;
  line-height: 1.4;
}

/* ---------- 模板网格：grid 不支持时两列 ---------- */
@supports not (display: grid) {
  .template-grid {
    display: block !important;
    font-size: 0;
  }
  .template-grid > * {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    font-size: 14px;
    padding: 6px;
    box-sizing: border-box;
  }
}

/* ============================================================
 * v1.9.18 CTA 按钮对比度终极兜底
 *
 * 问题：Tailwind 工具类（bg-[#244f43] text-white）在某些国产内核或
 * CSS 编译组合下背景被重置为透明，导致 text-white 显示在白底上看不见。
 * 全站主要 CTA 已改用内联 style 写死背景色（内联样式优先级最高，不会被
 * 任何 class 覆盖）。这里再加一层安全网：凡是声明了 text-white 却既
 * 没有 bg-* 工具类、也没有内联 background 的按钮，强制给深绿底白字。
 *
 * 注意：使用 :not([class*="bg-"]) 排除那些已经通过工具类声明背景的按钮
 * （如图片删除按钮 bg-black/55、弹窗遮罩等），避免改变它们本来的语义色。
 * ============================================================ */
button[class~='text-white']:not([class*='bg-']):not([style*='background']):not([style*='background-color']),
a[class~='text-white']:not([class*='bg-']):not([style*='background']):not([style*='background-color']),
[role='button'][class~='text-white']:not([class*='bg-']):not([style*='background']):not([style*='background-color']) {
  background-color: #244f43 !important;
  color: #ffffff !important;
  border: 1px solid #244f43 !important;
}

/* 同理，对 text-white/80、text-white/90 等带透明度变体做兜底 */
button[class*='text-white/']:not([class*='bg-']):not([style*='background']):not([style*='background-color']) {
  background-color: #244f43 !important;
  color: #ffffff !important;
}

/* ============================================================
 * v1.9.22 iOS Safari / WebKit 兼容性兜底
 *
 * 覆盖范围：
 * - 100dvh 在 Safari < 15.4 不识别（已在组件内联双写 vh/dvh，这里做全站兜底）
 * - aspect-ratio 在 Safari < 15 不支持（影响模板缩略图、图片槽位）
 * - backdrop-filter 必须 -webkit- 前缀（已在关键弹窗内联补前缀，这里补 Tailwind 工具类兜底）
 * - transform: scale() 下 iOS 图片偶发不渲染：GPU 合成兜底
 * - mix-blend-mode 在 iOS 15 以下对 SVG data: 滤镜不稳定：降级为普通 opacity 叠加
 * - flex 布局图片坍塌：min-height:0 / min-width:0 兜底
 * - 触控优化：去除 iOS 300ms 点击延迟、禁用文字大小自动调整
 * ============================================================ */

/* 1. iOS 下防止横屏字体自动放大，并开启触控高效路径 */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* 2. dvh 兜底：现代浏览器识别 100dvh，旧 Safari 读第二行 100vh 被覆盖前的值 */
@supports not (height: 100dvh) {
  .min-h-screen,
  [class*='min-h-'][class*='dvh'] {
    min-height: 100vh !important;
  }
  [class*='h-'][class*='dvh'] {
    height: 100vh !important;
  }
  [class*='max-h-'][class*='dvh'] {
    max-height: 92vh !important;
  }
}

/* 3. aspect-ratio 兜底：Safari < 15 不识别 aspect-ratio，
 *    对常见比例类用 ::before padding-top hack 撑起高度 */
@supports not (aspect-ratio: 1 / 1) {
  .aspect-square::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
  [class*='aspect-[9/16]']::before {
    content: '';
    display: block;
    padding-top: 177.78%;
  }
  [class*='aspect-[4/3]']::before {
    content: '';
    display: block;
    padding-top: 75%;
  }
  [class*='aspect-[4/5]']::before {
    content: '';
    display: block;
    padding-top: 125%;
  }
  /* 首页模板缩略图（内联 aspect-ratio 兜底，非 Tailwind 类名） */
  [style*='aspect-ratio']::before,
  .template-thumb-wrap::before {
    content: '';
    display: block;
    /* 默认 9:16 海报比例；组件通过 --thumb-ratio 内联传入实际比例 */
    padding-top: var(--thumb-ratio, 177.78%);
  }
  /* 旧内核下 ::before 占位会和 absolute 子元素重叠，
   * 让 stage 强制顶到最上层并左对齐到 calc 位置 */
  .template-thumb-stage {
    position: absolute !important;
    top: 0 !important;
    z-index: 2;
  }
}

/* 4. backdrop-filter 前缀兜底：Tailwind 的 backdrop-blur-* 只写标准属性 */
.backdrop-blur-sm,
[class*='backdrop-blur'] {
  -webkit-backdrop-filter: blur(8px);
}

/* 5. iOS transform 下图片不渲染兜底：强制 GPU 合成层 */
.ios-thumb-scale,
.poster-preview-root,
[data-poster-root] {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 6. 噪点层降级：iOS 15 以下 mix-blend-mode + SVG data 滤镜不稳定，
 *    直接改为低透明度叠加，不影响整体质感 */
@supports not (mix-blend-mode: overlay) {
  .poster-noise-layer {
    mix-blend-mode: normal !important;
    -webkit-mix-blend-mode: normal !important;
    opacity: 0.04 !important;
  }
}

/* 7. flex/grid 图片在 iOS Safari 偶发高度坍塌：
 *    给图片容器加 min- 尺寸，确保不被压缩到 0 */
.poster-image-grid > *,
.poster-preview-root img {
  min-height: 0;
  min-width: 0;
}

/* 8. iOS 输入框圆角和阴影统一，避免原生渲染 */
input,
textarea,
button,
select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* 9. 移除 iOS 输入框内阴影 */
input[type='text'],
input[type='tel'],
input[type='number'],
input[type='email'],
input[type='password'],
input[type='search'],
textarea {
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
}

/* 10. 安全区适配（iPhone X 及以上刘海/底部横条） */
.safe-bottom {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
}
.safe-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

/* 11. iPad 上弹窗/抽屉不要被键盘挤压 */
@media (pointer: coarse) {
  .fixed.inset-0 {
    -webkit-overflow-scrolling: touch;
  }
}

/* 12. 手机端（<=768px）旧内核 grid 降级。
 *    百度 T7 / QQ X5 / UC U4 / Android 4.x~5.x WebView 对 CSS Grid
 *    支持不完整（特别是 grid-cols-2 / gap / 子项宽度塌陷），会导致
 *    管理后台统计卡片错位、个人中心"账号安全"卡片只占 70% 宽、
 *    作品缩略图碎裂。统一降级为 flex-wrap 布局，子项用宽度百分比。
 *    PC 端 >768px 完全不受影响。 */
@media screen and (max-width: 768px) {
  .grid {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .grid-cols-1 > * { width: 100% !important; }
  .grid-cols-2 > * { width: 50% !important; }
  .grid-cols-3 > * { width: 33.333% !important; }
  .grid-cols-4 > * { width: 25% !important; }
  .grid-cols-5 > * { width: 20% !important; }
  .grid-cols-6 > * { width: 16.666% !important; }
  .grid > * {
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }

  /* gap 在旧内核 flex 下不生效，用子项 padding 模拟行列间距。
   * 容器自身用负 margin 抵消两侧 padding，保持视觉宽度 100%。 */
  [class*='gap-'].grid {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  [class*='gap-'].grid > * {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-bottom: 12px !important;
  }
  [class*='gap-1'].grid > * { padding-bottom: 4px !important; }
  [class*='gap-2'].grid > * { padding-bottom: 8px !important; }
  [class*='gap-3'].grid > * { padding-bottom: 12px !important; }
  [class*='gap-4'].grid > * { padding-bottom: 16px !important; }
  [class*='gap-6'].grid > * { padding-bottom: 24px !important; }

  /* 确保 w-full 在旧内核生效 */
  .w-full { width: 100% !important; }

  /* max-w-md 等限制最大宽度的容器，手机端铺满 */
  .max-w-md,
  .max-w-sm,
  .max-w-xs {
    max-width: 100% !important;
  }

  /* whitespace-nowrap 防止版本号等断行 */
  .whitespace-nowrap { white-space: nowrap !important; }

  /* 关键卡片/按钮强制 border-box，防止 padding 撑破宽度 */
  .rounded-\[20px\],
  .rounded-\[24px\],
  .rounded-2xl {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
}


/* ========================================
   v1.9.31 T7旧内核 flexbox 前缀兜底
   T7内核需要 -webkit-box / -webkit-flex 前缀
   ======================================== */
.flex {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
}
.inline-flex {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
}
.flex-row {
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.flex-col {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.flex-row-reverse {
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.flex-col-reverse {
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.items-center {
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  align-items: center !important;
}
.items-start {
  -webkit-box-align: start !important;
  -webkit-align-items: flex-start !important;
  align-items: flex-start !important;
}
.items-end {
  -webkit-box-align: end !important;
  -webkit-align-items: flex-end !important;
  align-items: flex-end !important;
}
.items-stretch {
  -webkit-box-align: stretch !important;
  -webkit-align-items: stretch !important;
  align-items: stretch !important;
}
.items-baseline {
  -webkit-box-align: baseline !important;
  -webkit-align-items: baseline !important;
  align-items: baseline !important;
}
.justify-center {
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
}
.justify-between {
  -webkit-box-pack: justify !important;
  -webkit-justify-content: space-between !important;
  justify-content: space-between !important;
}
.justify-start {
  -webkit-box-pack: start !important;
  -webkit-justify-content: flex-start !important;
  justify-content: flex-start !important;
}
.justify-end {
  -webkit-box-pack: end !important;
  -webkit-justify-content: flex-end !important;
  justify-content: flex-end !important;
}
.flex-wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-nowrap {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.flex-shrink-0 {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.flex-grow {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
/* gap 兜底：T7不支持gap，只对横向flex行用margin-right模拟。
   限定在 .flex-row / .inline-flex，避免污染纵向flex-col容器造成横向溢出 */
.flex-row[class*="gap-1"] > * { margin-right: 4px; }
.flex-row[class*="gap-1"] > *:last-child { margin-right: 0; }
.flex-row[class*="gap-2"] > * { margin-right: 8px; }
.flex-row[class*="gap-2"] > *:last-child { margin-right: 0; }
.flex-row[class*="gap-3"] > * { margin-right: 12px; }
.flex-row[class*="gap-3"] > *:last-child { margin-right: 0; }
.flex-row[class*="gap-4"] > * { margin-right: 16px; }
.flex-row[class*="gap-4"] > *:last-child { margin-right: 0; }
.inline-flex[class*="gap-1"] > * { margin-right: 4px; }
.inline-flex[class*="gap-1"] > *:last-child { margin-right: 0; }
.inline-flex[class*="gap-2"] > * { margin-right: 8px; }
.inline-flex[class*="gap-2"] > *:last-child { margin-right: 0; }
.inline-flex[class*="gap-3"] > * { margin-right: 12px; }
.inline-flex[class*="gap-3"] > *:last-child { margin-right: 0; }
.inline-flex[class*="gap-4"] > * { margin-right: 16px; }
.inline-flex[class*="gap-4"] > *:last-child { margin-right: 0; }

/* v1.9.32 全局防横向溢出（旧内核弹性内容易撑破视口） */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, video, canvas {
  max-width: 100%;
}

/* v1.9.32 显式手机/桌面显示切换，兜底 Tailwind 的 lg:hidden / lg:flex
   在 T7 等旧内核上对转义类名（lg\:hidden）解析可能失败 */
.v-mobile-only { display: block !important; }
.v-desktop-only { display: none !important; }
@media screen and (min-width: 1024px) {
  .v-mobile-only { display: none !important; }
  .v-desktop-only { display: flex !important; }
}

/* ========================================
   v1.9.33 终极兼容加固
   ======================================== */

/* body 本身不允许任何 transform/filter/perspective，
   否则 Portal 挂到 body 下的 fixed 弹窗仍会被错误地作为包含块。 */
body {
  -webkit-transform: none !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* 所有 fixed 全屏弹窗的安全网：
   即使某个组件忘记加 Portal，也通过该属性强制铺满视口 */
[data-dialog-overlay] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
}

/* 弹窗内容容器：限高 + 内部滚动，避免在小屏被挤出视口 */
[data-dialog-content] {
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  width: 100%;
}

/* ========================================
   v1.9.37/v1.9.38 早安问候模板双图竖屏兜底
   现代浏览器靠海报容器 flex:1 + object-cover 自然形成竖向比例；
   旧内核（T7 等）用 min-height + display 兼容兜底，确保两张图都
   能完整渲染、不塌陷、不被裁切只显示一张。
   注意：不要再给子元素写 aspect-ratio，会与 height:100% 冲突导致
   右半部分塌陷（v1.9.37 单图 bug 的根因）。
   ======================================== */
[data-v-double-portrait] {
  display: -webkit-box;
  display: -webkit-flex;
  display: grid;
  -webkit-align-items: stretch;
  align-items: stretch;
  min-height: 0;
  width: 100%;
}
[data-v-double-portrait] > * {
  display: block;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
/* 当 grid 容器没有明确高度时（例如编辑器缩略图列表），用 padding-bottom
   177.78% = 16/9 撑高，配合 position:relative 子元素 absolute 填充 */
.v-aspect-9-16 {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}
.v-aspect-9-16::before {
  content: '';
  display: block;
  padding-bottom: 177.78%; /* 16/9 */
}
.v-aspect-9-16 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ========================================
   v1.9.38 孤字排版兜底
   现代浏览器：globals.css 的 text-wrap:pretty 让浏览器自动避免
   末行单字。旧内核（T7/Chrome<114）不认 text-wrap，这里用
   word-break + text-justify 兜底，让中文按词/标点优先换行，
   至少不要在最后一行留一个孤零零的"的"字。
   ======================================== */
[data-poster-root] p,
[data-poster-root] span,
[data-poster-root] div,
[data-poster-root] h1,
[data-poster-root] h2,
[data-poster-root] h3,
[data-poster-root] h4 {
  word-break: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-line-break: auto;
  line-break: auto;
  text-align: justify;
  -webkit-text-align-last: left;
  text-align-last: left;
}

/* ========================================
   v1.9.39 字号调整控件（FontSizeStepper）T7 兜底
   现代浏览器用 flex + gap；旧内核 T7/Chrome<84 不支持
   flex gap / appearance，这里给 -webkit- 前缀 + 手动 margin，
   保证 − 输入 + 三段横排在百度手机浏览器不堆叠、不错位。
   ======================================== */
[data-font-size-stepper] {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  gap: 4px;
}
[data-font-size-stepper] > button {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  height: 36px;
  width: 36px;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  line-height: 1;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* T7 不认 gap，用兄弟选择器加左边距兜底 */
[data-font-size-stepper] > button + button,
[data-font-size-stepper] > input + button,
[data-font-size-stepper] > button + input,
[data-font-size-stepper] > input + span {
  margin-left: 4px;
}
[data-font-size-stepper] > input {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 64px;
  height: 36px;
  margin: 0;
  padding: 0 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  line-height: 36px;
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
}
/* 隐藏 number input 的上下箭头，避免 T7 上和我们的 −+ 按钮重复 */
[data-font-size-stepper] > input::-webkit-outer-spin-button,
[data-font-size-stepper] > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
[data-font-size-stepper] > input[type='number'] {
  -moz-appearance: textfield;
}
[data-font-size-stepper] > span[data-font-size-unit] {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 2px;
  font-size: 12px;
  line-height: 1;
}