/* ============================================================
   移动端适配层 · H5 响应式（阶段0 基建）
   —— 仅 @media (max-width: 760px) 生效，桌面端零影响。
   视觉沿用主题变量（暗色为主：--surface / --border / --primary / --text …）。
   断点 760px 与 style.css 已有的窄屏规则对齐。
   ============================================================ */

@media (max-width: 760px) {

  /* ★ 根治横向溢出：桌面全局规则（style.css L134）把 html/body 锁了 min-width:1020px，
     手机视口下整页会按 1020px 排版、右侧全部被裁切。移动端必须解除该锁定。 */
  html, body { min-width: 0 !important; width: 100% !important; }

  /* 侧栏 → 抽屉：默认移出视口，.open 时滑入 */
  body.mobile-mode { overflow-x: hidden; }
  body.mobile-mode.no-scroll { overflow: hidden; }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 80%; max-width: 300px;
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .30);
    padding-top: env(safe-area-inset-top);
  }
  body.mobile-mode .sidebar.open { transform: translateX(0); }

  /* 抽屉遮罩 */
  .mobile-drawer-mask {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transition: opacity .25s ease;
  }
  body.mobile-mode .mobile-drawer-mask.show { opacity: 1; visibility: visible; }

  /* 内容区占满宽度；底部留白给固定标签栏（含刘海安全区） */
  .content-col {
    width: 100%;
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
  .jm-layout { position: relative; }

  /* 页头：单行 = 左「LOGO+名称+注释」品牌区 + 右「AI标识/主题」两个开关（2026-10-20 用户要求）
     2026-10-21 用户反馈：小屏（375px 级）右侧开关整组掉到第二行 → 强制单行，
     品牌区 flex:1 主动让位（名称/注释 ellipsis），右侧控件收紧（开关间距/主题按钮缩小）。 */
  .page-head { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; min-height: 52px; }
  .head-right { margin-left: auto; gap: 5px; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; }
  /* 右侧控件收紧：AI标识按钮内距/间隙减小；主题按钮 32→28 高、内距压到 7px
     （按钮 HTML 有内联 style="padding:6px 10px"，必须 !important 才能盖过）
     2026-10-22：组件已改 <button>（无 checkbox/滑轨），旧滑轨 34→30 等规则随之删除 */
  .head-right .aigc-toggle { padding: 4px 6px; gap: 4px; }
  .head-right #btnTheme { height: 28px; padding: 0 7px !important; }
  /* 积分/用户名（「我的」里已有）、管理后台（桌面专用）：手机顶栏不再显示 */
  .head-right #creditChip, .head-right #acctChip, .head-right #btnSettings { display: none !important; }
  .aigc-tg-text { display: inline !important; color: var(--fg-muted); font-size: 12px; }
  .ghost-btn, .primary-ghost-btn { height: 30px; padding: 0 10px; font-size: 12px; }

  /* ★ 顶栏品牌化（2026-10-20 用户要求）：手机顶栏显示 网站 LOGO + 名称 + 注释，
     替代桌面式「当前页标题」。桌面 .brand-head 是侧栏同宽品牌列（250px/负margin），手机改为紧凑横排；
     注释 .brand-sub 在 HTML 里内联 display:none，这里用 !important 放开，桌面零影响。
     分站 LOGO/名称仍走 brand.js 注入（#brandLogo / [data-brand-name]），分站品牌自动生效。 */
  .brand-head {
    display: flex !important;
    width: auto !important; flex: 1 1 auto !important;
    height: auto !important; margin: 0 !important; padding: 0 !important;
    background: none !important; border: none !important;
    align-items: center; gap: 10px; min-width: 0;
  }
  .brand-head .brand-logo { width: 38px; height: 38px; flex: 0 0 38px; font-size: 20px; }
  .brand-head .brand-logo .ico { width: 22px; height: 22px; }
  .brand-head .brand-logo.brand-has-img { width: 38px; height: 38px; }
  .brand-head .brand-txt { display: flex !important; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; flex: 1 1 auto; }
  /* 名称/注释改为随可用宽度收缩（原 56vw/64vw 限宽在 375px 屏放不下导致整组换行），超长 ellipsis */
  .brand-head .brand-name {
    font-size: 15px; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .brand-head .brand-sub {
    display: block !important;
    font-size: 11.5px; line-height: 1.3; color: var(--fg-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  /* 桌面式「当前页标题」整块隐藏（页面身份由内容区与底部标签栏承载） */
  .page-heading { display: none !important; }

  /* ===== 顶栏上下文（2026-10-20）：首页=品牌；功能页=功能标题+注释 =====
     mobile.js 侦测侧栏 active 给 body 打 mobile-in-func（app.js 已实时更新 #pageTitle/#pageSub）。 */
  body.mobile-in-func .brand-head { display: none !important; }
  /* 2026-10-20 用户要求：手机端功能页顶栏右侧只保留「可用积分」胶囊（AI标识/主题仅首页有）。
     复用既有 #creditChip（app.js 实时写 #acctBal、点击打开积分充值弹窗），按参考样式重绘为蓝色胶囊。 */
  body.mobile-in-func .head-right { display: flex !important; flex: 0 0 auto; }
  body.mobile-in-func .head-right .aigc-toggle,
  body.mobile-in-func .head-right #btnTheme,
  body.mobile-in-func .head-right #acctChip,
  body.mobile-in-func .head-right #btnWelfare,
  body.mobile-in-func .head-right #btnSettings { display: none !important; }
  body.mobile-in-func .head-right #creditChip {
    display: inline-flex !important;
    align-items: center;
    background: rgba(59, 130, 246, .16) !important;
    border: 1px solid rgba(96, 165, 250, .35) !important;
    color: #7eb6ff !important;
    padding: 5px 11px;
    font-size: 11.5px;                              /* 2026-10-21 用户要求小一号（原 12.5px） */
    white-space: nowrap;
  }
  body.mobile-in-func .head-right #creditChip .credit-ico { display: none; }
  body.mobile-in-func .head-right #creditChip .acct-bal { color: #7eb6ff !important; }
  body.mobile-in-func .head-right #creditChip .acct-unit {
    color: rgba(126, 182, 255, .78) !important; font-weight: 500;
  }
  /* ★ 2026-10-22 用户要求：手机端功能页顶栏积分胶囊去掉「可用」二字（原用 ::before content:"可用" 注入）。
     保留下面这条 color 规则即可，单位直接显示「积分」。 */
  /* 2026-10-20 用户反馈：功能页注释过长把右侧「AI标识/主题」挤换行了。
     功能页顶栏强制单行（nowrap），注释交给 flex 收缩 + 单行省略，过长即被截断遮挡。 */
  body.mobile-in-func .page-head { flex-wrap: nowrap; }
  body.mobile-in-func .head-right { flex: 0 0 auto; }
  body.mobile-in-func .page-heading {
    display: flex !important; flex: 1 1 auto; min-width: 0; gap: 9px;
  }
  /* 标题/注释的共同内层包装 div：必须 min-width:0 才能让子级 ellipsis 生效
     （排除 .page-title-icon——它也是 div，若被 flex:1 拉伸会导致图标变形，2026-10-20 修复） */
  body.mobile-in-func .page-heading > div:not(.page-title-icon) { min-width: 0; flex: 1 1 auto; }
  body.mobile-in-func .page-title {
    font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.mobile-in-func .page-sub {
    font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.mobile-in-func .page-title-icon { width: 28px; height: 28px; border-radius: 7px; }
  body.mobile-in-func .page-title-icon .ico { width: 15px; height: 15px; }

  /* ===== ★ 2026-10-22 页头改造：加「回退」钮 + 原图标移到标题文字前 =====
     需求：部分手机没有滑动回退手势，必须有显式回退按钮。
     布局：原来 [蓝色图标方块][标题/副标题]  →  现在 [回退钮][图标+标题] / 副标题
     实现要点：
       ① 回退钮占原图标位置（最左），桌面端隐藏（style.css .page-back-btn{display:none}），
          手机端显示为 28×28 按钮（无框无底，只剩图标本体）。
       ② 原图标从「独立方块」改为「标题行内小图标」：用 display:contents 摊平标题容器 +
          grid 布局，把图标排到标题文字前面一行。
       ③ 副标题仍在第二行，宽度不与标题抢。
     ★ 生效范围（2026-10-22 用户确认视频生成页效果 OK 后全量同步）：
       对所有功能页生效（body.mobile-in-func，由 mobile.js 打标；首页无此标记、
       且首页 .page-heading 被 86 行 display:none!important 压住，天然排除）。
       特异性说明：本批选择器与 118~133 行的 body.mobile-in-func 旧规则同级 (0,2,1)，
       靠源顺序取胜（本批在后）；86 行 .page-heading{display:none!important} 特异性 (0,1,0)
       更低，压不住本批的 grid。 */
  /* 2026-10-22 用户二次要求：回退钮改成参考图式「纯 chevron、加大加粗、不用外框和底色」。
     ① 去外框底色：border/background/border-radius 全部移除，按钮只剩图标本体；
     ② 加大加粗：图标 15→22px，符号换专用 i-back-chev（chevron 无横线 + g stroke-width 2.3 加粗，
        i-back 带横线且被侧栏/画布历史等共用不能动）；
     ③ 按压反馈也不能用底色（遵守"不用底色"），改用透明度；
     ④ -webkit-tap-highlight-color:transparent 掐掉安卓点击灰闪（那也是一块底色）。
     颜色沿用 var(--text)（深色主题下即近白 #F2F4F7，与参考图一致；浅色主题自动深灰可见）。 */
  body.mobile-in-func .page-back-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: 0 0 auto;
    border: none; background: none; border-radius: 0;
    color: var(--text); cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  body.mobile-in-func .page-back-btn .ico { width: 22px; height: 22px; }
  body.mobile-in-func .page-back-btn:active { opacity: .5; }
  /* 图标：变成标题文字前面的行内小图标（去掉蓝底方块，改纯色 15px）
     2026-10-22 用户要求：图标颜色改成纯白色（var(--primary) → #ffffff） */
  body.mobile-in-func .page-title-icon {
    width: auto; height: auto; border-radius: 0; background: none;
    color: #ffffff; font-size: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* .page-title-icon .ico{15px} 由 133 行同名规则承担，无需重复 */
  /* 浅色主题保护：页头是白卡（--surface:#FFFFFF），纯白图标会与背景同色不可见，
     回落主题正文色（深灰）。深色主题（默认）下本条不触发，图标严格纯白。 */
  :root[data-theme="light"] body.mobile-in-func .page-title-icon { color: var(--text); }
  /* 标题/副标题容器摊平（display:contents）→ h1 与 p 成为 .page-heading 的直接 grid 子项，
     这样才能用 grid 把「图标 + 标题文字」排到同一行、且图标在文字前面。 */
  body.mobile-in-func .page-heading > div:not(.page-title-icon) {
    display: contents;
  }
  body.mobile-in-func .page-heading {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 6px; row-gap: 0;
  }
  /* 第 1 列：回退钮（跨两行、垂直居中）；第 2 列：图标；第 3 列：标题文字（占满剩余宽度） */
  body.mobile-in-func .page-back-btn {
    grid-column: 1; grid-row: 1 / 3; align-self: center;
  }
  body.mobile-in-func .page-title-icon { grid-column: 2; grid-row: 1; }
  body.mobile-in-func .page-title { grid-column: 3; grid-row: 1; min-width: 0; }
  /* 副标题：第 2 行，从图标列开始（与标题图标左对齐），跨到第 3 列 */
  body.mobile-in-func .page-sub {
    grid-column: 2 / 4; grid-row: 2; min-width: 0;
  }

  /* ★ 首页「热门创作」卡片布局（2026-10-20 二次调整，按用户比例约束）：
     左大卡保持原 206:150 比例（不拉伸）；右下两小卡同比例等比缩放；
     仅第二张卡（商品套图）宽度不变、高度自动补齐（= 大卡高 - 间距 - 小卡高）。
     实现：HTML 两根包装层（桌面 display:contents 透明）手机转 flex + aspect-ratio。
     槽位按包装层结构选择（.bento-right > / .bento-small-row 内），后台广告改绑定不改布局。桌面零影响。 */
  .bento-grid { display: flex !important; gap: 10px; }
  .bento-grid .bento-card { min-height: 0; }
  /* ★ 2026-10-21 用户要求：广告卡标题字号减小 2 号（14→10 / 大卡 15→11） */
  .bento-grid .bento-card .bc-name { font-size: 10px; }
  /* 手机端只留标题，注释文字隐藏（用户 2026-10-20 要求） */
  .bento-grid .bento-card .bc-desc { display: none !important; }
  .bento-grid .bento-card.bento-big .bc-name { font-size: 11px; }
  /* ★ 2026-10-21 用户要求：标题位置往左下方移动一个字的距离。
     四卡左内距原为 18（大卡桌面基座）/14（商品图）/12（小卡），底内距 18/10/10，
     统一收到 4px —— flex-end（大卡为 column + justify-end）下标题贴向左下角：
     大卡位移 14px≈一个字，商品图 10/6px，小卡 8/6px，同量级。
     只收左/底（标题锚点），上/右内距不动；全在 760px 内，桌面零影响。 */
  .bento-grid .bento-card.bento-big { flex: 0 0 calc(50% - 5px); aspect-ratio: 206 / 150; padding-left: 4px; padding-bottom: 4px; }
  .bento-right { display: flex !important; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; }
  .bento-right > .bento-card { flex: 1 1 auto; padding: 10px 14px; padding-left: 4px; padding-bottom: 4px; }
  .bento-small-row { display: flex !important; gap: 10px; }
  .bento-small-row .bento-card { flex: 1 1 0; aspect-ratio: 206 / 150; padding: 10px 12px; padding-left: 4px; padding-bottom: 4px; }

  /* 首页 hero：字号降档，避免手机上溢出/拥挤；2026-10-21 用户要求再降（标题 -2、副标 -1）
     2026-10-21 用户再要求：动画文字强制一行，小屏缩字号不换行——
     nowrap + clamp 兜底 + mobile.js heroFitAll() 按实际度量精确收缩（inline 覆盖 clamp）。
     clamp 5.3vw/3.4vw 按 375px 屏 16 个全角字符标定（19.9px×16≈318px < 可用宽），
     JS 测量万一失效（WebView 怪癖）时也不溢出被裁。 */
  /* 2026-10-22 用户要求：手机端 hero 动态文字区整块隐藏（红框圈住标题+副标题）。
     display:none 后 .home-stage 第一个可见 flex 子项变成 .bento-section——
     隐藏元素不是 flex item，其上不产生 flex gap ⇒ 顶栏→广告卡 = .home-stage padding-top 15
     + bento margin-top 0 = 15px，与全页 15px 间距体系衔接（原 -3px 是 hero↔广告卡的负补偿，随之作废）。
     历史口径（23:2x 红框校准）：原 padding:14px 0 2px 与页面级间距重复计算已归零；
     本批隐藏后框1（顶栏→标题）/框2（副标题→广告卡）随区块一起消失，框3/4/5 不受影响。
     mobile.js heroFitOne 有 !avail 守卫，隐藏后量到 0 宽自动跳过，fit 逻辑无需改。 */
  .home-hero { display: none; }
  .home-hero .hero-title { font-size: clamp(14px, 5.3vw, 26px); line-height: 1.25; letter-spacing: 0; white-space: nowrap; }
  .home-hero .hero-sub { margin-top: 8px; font-size: clamp(11px, 3.4vw, 13px); white-space: nowrap; }

  /* ★ 手机首页精简（2026-10-20 用户要求）：
     ① 快捷创作整块隐藏（「视频生成/图片生成」切换 + 快捷创作卡，创建入口由底部标签栏/工具页承载）；
     ② 「热门创作」标题行隐藏，下面的 bento 卡片保留。桌面端零影响（均在媒体查询内）。 */
  .home-type-capsule, .quick-card, .bento-title { display: none !important; }
  /* ★ 2026-10-21 22:5x 用户要求：首页 5 处区块间距统一 15px（边到边实测口径）。
     B5 顶栏↔hero：页面级间距由 .home-stage 上内距 15px 承担（见该规则）。
     注意 .content-col 的 gap:14px 不参与——其余 stage 均 display:none，flex gap 只在可见兄弟间生效。
     2026-10-23 用户要求：顶栏底→广告卡间距 15px 改 3px（广告图紧贴顶栏）。hero 隐藏后 bento 是
     首个可见 flex item，本 padding-top 即该间距唯一来源；B1-B4 由 kk-zone 补偿值承担，不受影响。 */
  .home-stage { padding-top: 3px; }
  /* 移动端隐藏首页纵向滚动条——常驻滚动条不美观；内容仍可正常触摸滚动（仅去可视指示条）。
     不影响滚动功能，仅 Firefox(scrollbar-width) 与 WebKit(::-webkit-scrollbar) 双兼容。 */
  .home-stage { scrollbar-width: none; -ms-overflow-style: none; }
  .home-stage::-webkit-scrollbar { display: none; width: 0; height: 0; }
  /* B4 hero↔广告卡：18(home-stage flex gap) + margin-top = 15 ⇒ margin-top = -3px（负 margin 补偿）
     2026-10-22 hero 隐藏后 bento 成为首个可见 flex item（上方无 gap），-3 补偿作废，归 0
     ⇒ 顶栏→广告卡 = .home-stage padding-top 15 + 0 = 15px，与全页 15px 体系一致。 */
  .bento-section { margin-top: 0; }

  /* 快捷创作卡：移动端收紧行距与内边距 */
  .quick-card { padding: 12px; }
  .qc-left { gap: 6px; }
  .qc-select, .qc-model { max-width: 46vw; }

  /* ---------- 底部标签栏（固定） ---------- */
  .mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
    display: flex;
    height: calc(54px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .20);
  }
  .mobile-tabbar .mtab {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    color: var(--fg-muted); font-size: 11px;
    cursor: pointer; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-tabbar .mtab .ico { width: 22px; height: 22px; }
  .mobile-tabbar .mtab.active { color: var(--primary); }
  .mobile-tabbar .mtab.active .mtab-label { font-weight: 600; }

  /* 触控友好：导航项最小点击高度 */
  .nav-item, .nav-parent, .nav-child { min-height: 44px; }
  .nav-tree { padding-top: 14px; }

  /* 轻提示（如「创作画布暂未在手机端上线」） */
  .mobile-toast {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 1400; max-width: 80%;
    background: rgba(0, 0, 0, .82); color: #fff; font-size: 13px; line-height: 1.4;
    padding: 12px 16px; border-radius: 10px; text-align: center;
    opacity: 0; visibility: hidden; transition: opacity .2s ease;
  }
  body.mobile-mode .mobile-toast.show { opacity: 1; visibility: visible; }

  /* ===== 阶段1 P0 页面适配（2026-10-20） ===== */

  /* 图片生成/内容替换等 三步指示条（.dh-steps 标准）：430px 下放不下（7px18px 内边距 + 16px 字号 + 72px 分隔线）→ 紧凑化单行
     2026-10-21 二次收紧：① 桌面 .dh-step-sep 的 margin:0 14px 此前漏清 → 每根连接线实际占 10+28px，
     两根白吃 56px 是 375px 屏第三步被裁的真凶，现 margin:0；② 步骤再降一档（4px8px/12.5px/18px 序号）；
     ③ 兜底 overflow-x:auto（<350px 极窄屏可横滑，滚动条隐藏），保证三步永远可达。 */
  .dh-steps, .cr-step-bar {
    flex: none;   /* ★ 2026-10-21 二修：overflow-x:auto 使本条成为滚动容器 → 列向 flex 里自动最小尺寸归 0，
                     会被 .vg-stage 等滚动容器的 flex-shrink 压瘪到只剩 padding（14px，胶囊上下被裁）。禁止收缩。 */
    flex-wrap: nowrap; margin-bottom: 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .dh-steps::-webkit-scrollbar, .cr-step-bar::-webkit-scrollbar { display: none; }
  .dh-steps .dh-step, .cr-step-bar .cr-step { flex: none; padding: 4px 8px; font-size: 12.5px; gap: 5px; }
  .dh-steps .dh-step .dh-step-no, .cr-step-bar .cr-step .cr-step-no { width: 18px; height: 18px; font-size: 11.5px; }
  .dh-steps .dh-step-sep, .cr-step-bar .cr-step-sep { flex: 1 1 10px; width: auto; min-width: 8px; margin: 0; }

  /* 两步页（AI去水印 #dwStepBar / 提取文案 #scStepBar）：连接线不铺满，
     两个按钮按三步页的紧凑间距自然排布并整体居中（2026-10-20 用户要求） */
  #dwStepBar, #scStepBar { justify-content: center; }
  #dwStepBar .dh-step-sep, #scStepBar .dh-step-sep { flex: 0 0 34px; width: 34px; min-width: 0; }

  /* ===== 全功能页 步骤导航常驻吸顶 + 点击定位（2026-10-20，以视频生成页为准泛化） =====
     各 stage 自身是滚动容器（overflow-y:auto），sticky 相对它吸顶；
     列定位的 scroll-margin-top 由 mobile.js 点击时按吸顶条实高动态写入，精准停位。
     覆盖 .dh-steps 标准（vg/img/fs/of/cl/pt/fb/dw/music/sc/se/voice）+ .cr-step-bar（内容替换/视频复刻）。 */
  /* 2026-10-20 用户要求：导航条与顶栏之间的间隔去掉（桌面各 stage 的 18px 顶距手机端统一取消，
     让吸顶步骤条贴住顶栏；仅作用于滚动容器 stage，不影响内部卡片间距） */
  /* 2026-10-21 用户拍板 8px 间距体系：① 大框（列容器）贴屏幕边缘 → stage 横向内距 0
     （此前 22px→8px，现归 0；.se-stage-wrap 见下方三修补充规则）。
     ★ 同时修正旧类名笔误：.tool-stage/.asset-stage 实际是 .tools-stage/.assets-stage（此前 padding-top:0 未命中），
     并补齐 .cvhub-stage/.canvas-stage。 */
  .vg-stage, .img-stage, .cr-stage, .vr-stage, .fs-stage, .fb-stage, .of-stage,
  .cl-stage, .pt-stage, .music-stage, .voice-stage, .ecom-stage, .pv-stage,
  .sv-stage, .se-stage, .dh-stage, .tools-stage, .ai-stage, .works-stage, .assets-stage,
  .cvhub-stage, .canvas-stage, .chat-stage {
    padding-top: 0;
    padding-left: 0; padding-right: 0;
  }
  /* ★ 2026-10-21 三修：AI工具 去水印/提取文案/去字幕 三页的滚动容器实为内层 .se-stage-wrap
     （.tools-stage 只是 flex 外壳，自身 padding:0 不够），其桌面 padding:18px 22px 36px
     造成步骤条离顶栏 18px、大框离屏幕边 22px —— 与全功能页「贴顶 0 / 贴边 0」不一致，一并归零。 */
  .content-col .se-stage-wrap { padding-top: 0; padding-left: 0; padding-right: 0; }

  /* ===== 2026-10-22 AI 对话重设计（用户确认方案）：对话区全屏化 + 历史收进左侧抽屉 =====
     痛点：桌面布局竖摞——历史栏 max-height:170px 只见一条、输入区被底部标签栏裁掉、
     模型选择钮在被裁的工具行里点不到。方案：历史抽屉 + 全屏对话 + 输入贴底 + 模型名上顶栏。 */
  /* ① stage 高度钉死：顶 = JS 实测 stage.top 写入 --chat-top；底 = 标签栏（.mobile-tabbar 高度
     54px+safe，JS 实测写入 --chat-reserve，取不到时回退 54px+env）。页面不再滚动，消息区内部滚动。
     桌面 style.css 1222 行的 .chat-stage padding-bottom:52px 手机端归零。 */
  .chat-stage {
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
    height: calc(100dvh - var(--chat-top, 0px) - var(--chat-reserve, 54px) - env(safe-area-inset-bottom, 0px) - 4px);
    min-height: 0;
    overflow: hidden;
  }
  /* ② 历史栏 → 左滑抽屉（复用原 DOM：新对话/清空/历史列表及其 JS 逻辑零改动） */
  .chat-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(80vw, 320px); max-height: none; flex: none;
    z-index: 1450;   /* 盖过底部标签栏(1300)，抽屉全高 */
    margin: 0;
    border-radius: 0 16px 16px 0;
    transform: translateX(-105%);
    transition: transform .25s ease;
  }
  .chat-stage.chat-drawer-open .chat-sidebar { transform: none; }
  .chat-drawer-mask {
    display: block;
    position: fixed; inset: 0; z-index: 1440;
    background: rgba(6, 8, 12, .55);
  }
  /* ③ 顶部小条：☰历史（开抽屉）+ 当前模型名 + 新对话（桌面 .chat-mbar 由 style.css display:none） */
  .chat-mbar { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; }
  .chat-mbar-btn {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-size: 12px; font-family: inherit;
    padding: 6px 10px; border-radius: 999px; cursor: pointer;
  }
  .chat-mbar-btn .ico { width: 14px; height: 14px; }
  .chat-mbar-btn.primary { border: none; background: var(--grad-cta); color: #fff; }
  .chat-mbar-model {
    flex: 1; min-width: 0; text-align: center;
    font-size: 12px; color: var(--fg-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* ④ 对话主区占满 stage：去桌面 min-height:76vh，消息区(.chat-main-scroll)内部滚动、输入区贴底 */
  .chat-main { min-height: 0; flex: 1; }
  /* ⑤ 2026-10-22 用户报「四个占位提示字号改 14px」：空态建议 chips .chat-suggest
     （帮我写一段产品推广文案 / 解释这段代码在做什么 / 把下面这段话翻译成英文 /
     总结这份文档的要点）桌面 15px 1 类（style.css:8335），仅 chat.js 空态使用；
     3 类压 1 类，仅 ≤760px。 */
  .chat-stage .chat-empty .chat-suggest { font-size: 14px; }

  /* ===== 2026-10-21 用户拍板：手机端统一 8px 间距体系 =====
     大框=列容器（.vg-col 等带边框大卡）；中框=.card；小框=卡内控件（mode-capsule 等）。
     规则：大框贴屏边 0；框与框之间 8；内容与框之间 8。
     14 个页面家族（vg/se/cr/of/cl/pt/fs/fb/music/voice/pv/ecom/dw…）的
     -col-head / -col-body 全部同构（head 12px16px / body gap25 padding16），按属性选择器一次覆盖。
     !important 用于压过模块运行时注入 <style> 与桌面特例（.model-picker .card-body 等）。 */
  /* ② 大框与手机内其它大框（单列纵排）间隔 8px（原 grid gap 20px / 注入版式 14px）
     ★ 2026-10-21 三修：补 .se-grid（去水印/提取文案/去字幕 三页基座，原 gap 20px 漏网） */
  .vg-grid, .of-grid, .se-grid { gap: 8px; }
  /* ③ 大框列头/列体：内容与框 8px、中框之间 8px（原 head 12px16px / body gap25 padding16） */
  .content-col [class*="-col-head"] { padding: 8px !important; }
  .content-col [class*="-col-body"] { gap: 8px !important; padding: 8px !important; }
  /* ④ 中框 .card：框间 8px（原 margin-bottom 10px）、内距 8px（原 head 14px16px8px / body 7px16px16px） */
  .content-col .card { margin-bottom: 8px; }
  .content-col .card-head { padding: 8px !important; }
  .content-col .card-body { padding: 8px !important; }
  /* ⑤ 步骤条与下方大框间隔 8px（原 10px） */
  .dh-steps, .cr-step-bar { margin-bottom: 8px; }
  /* ⑦ 标题下方注释文字统一 12px（2026-10-21 用户拍板）：基座 .card-head p 是 12px，但
     vg/se/cr/of/cl/pt/fs/fb/music/voice 各家族都覆盖成 13/14px，手机端全站拉回 12px。
     !important 压过家族覆盖（同特异性、本文件更晚 + !important）。 */
  .content-col .card-head p { font-size: 12px !important; }
  /* ⑧ 卡片标题统一 14px（2026-10-21 用户拍板）：基座 14px，但各家族覆盖为 15px，手机端拉回 14px */
  .content-col .card-head h3 { font-size: 14px !important; }
  /* ⑨ 列头（「1 创作内容」这类）统一 15px（2026-10-21 用户拍板）：基座 17px、首列 18px → 15px */
  .content-col [class*="-col-head"] { font-size: 15px !important; }
  /* ⑩ 选项卡按钮（时长/画质/画面比例等 .pill）主文字统一 12px（2026-10-21 用户拍板）
     基座 .pill 13px、双行比例的 .ratio-name 14px → 12px；
     下方数字注释 .ratio-value（11px）与积分注释 .pill-cost（11px）按用户要求不动。 */
  .content-col .pill { font-size: 12px !important; }
  .content-col .pill .ratio-name { font-size: 12px !important; }

  /* ⑪ 上传框/预览框空态提示全站统一（2026-10-21 用户拍板）：大提示 14px、小提示 12px。
     · 预览框 [class*="-live-empty"]：span 大提示（vg 15px、se/cr/of/fs 14px）+ em 小提示（12/13px 混杂）；
     · 上传框 [class*="-upload-empty"]：容器文字大提示（14px，cr 家族被 .cr-col 覆盖 15px）+ em 小提示（12/13/14px 混杂）；
     · 注入版式 pv/sv 的 .pv-empty、电商的 .ecom-empty（13px）、上传主文字 .ecom-upload-text（15px）→ 14px；
     · 上传副行 .ecom-upload-sub / .ecom-upload-quota（13px）→ 12px；画布空态 .cv-empty-hint（13px）→ 14px；
     · 通用 .empty h4/p 基座本就是 14/12px，不另立规则。 */
  [class*="-live-empty"] > span,
  [class*="-upload-empty"],
  .pv-empty, .ecom-empty, .cv-empty-hint,
  .ecom-upload-text { font-size: 14px !important; }
  [class*="-live-empty"] em,
  [class*="-upload-empty"] em,
  .ecom-upload-sub, .ecom-upload-quota { font-size: 12px !important; }

  /* ⑫ 模型选择下拉弹层通栏（2026-10-21 用户要求）：弹层 absolute 挂在触发钮（.qc-model）下，
     min-width 260px 起步且随触发钮位置偏移，窄屏上模型能力行（视频·参考生视频·最长15秒·1080P）被裁。
     mobile.js 在弹层打开时加 .mq-fw：固定定位、左右 8px 贴屏幕边；top/bottom/maxHeight
     由 JS 按触发钮实时计算写内联（chat 面板与画布弹层向上开，其余向下开），这里只管横与层叠。 */
  .qc-model-panel.mq-fw, .cv-text-model-pop.mq-fw {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    z-index: 1400 !important;                       /* 盖过吸顶步骤条(40)/底部标签栏(1300) */
    overflow: hidden; -webkit-overflow-scrolling: touch;
  }

  /* ⑥ 输入框文字与占位文字统一 14px（2026-10-21 用户拍板；先 12px 实机偏小，改 14px）
     · 占位文字：原本继承控件字号（.prompt-textarea 15px 等），观感过大；
     · 输入文字：同步 14px，避免「占位小、打字后变大」的跳变；
     · 14px = 各功能页 .card-head p 注释的真实字号（vg/se/cr/of/cl/pt/fs/fb/music/voice 家族均覆盖为 14px）。
     !important 压过 music/voice 等页面的 15px 特例与模块注入样式。 */
  .content-col input,
  .content-col textarea { font-size: 14px !important; }
  .content-col input::placeholder,
  .content-col textarea::placeholder,
  .content-col input::-webkit-input-placeholder,
  .content-col textarea::-webkit-input-placeholder { font-size: 14px !important; }
  /* 覆盖所有功能页滚动容器（.main-stage 与各工具页 .tools-stage 是同级兄弟，
     用上层 .content-col 统一命中，避免漏掉 AI工具 里的去水印/提取文案/去字幕/音色/音乐） */
  .content-col .dh-steps,
  .content-col .cr-step-bar {
    position: sticky; top: 0; z-index: 40;
    background: var(--page, #101018);
    padding: 6px 0 8px; margin-bottom: 4px;
    border-bottom: 0;
    border-radius: 12px;
  }
  .vg-stage .vg-col { scroll-margin-top: 52px; }

  /* ===== 带货视频（极简/专业共用 .pv-wrap-pvideo 注入版式）手机端适配（2026-10-20） =====
     注入 CSS 的 .pv-cols/.pv-cols-2 是三列/两列 grid（minmax(300px,…)），430px 下列被硬挤成竖排文字；
     .pv-toprow 的 1fr auto 1fr 网格也会把步骤条挤成竖排泡泡。这里统一改纵向单列 + 步骤条紧凑横排吸顶。
     !important 用于压过模块运行时注入的 <style>（其级联顺序晚于本文件）。 */
  .pv-stage .pv-wrap-pvideo .pv-toprow {
    display: flex !important; flex-direction: column; align-items: stretch;
    flex: none !important;   /* 同上：内部 .pv-steps 是滚动容器，防止 toprow 在列向 flex 里被压瘪 */
    gap: 10px; margin: 0 0 10px;
    position: sticky; top: 0; z-index: 40;
    background: var(--page, #101018); padding: 6px 0 8px; border-radius: 12px;
  }
  .pv-stage .pv-wrap-pvideo .pv-toprow .gv-mode-switch { justify-content: center; }
  .pv-stage .pv-wrap-pvideo .pv-toprow .pv-steps { margin: 0 !important; }
  .pv-stage .pv-wrap-pvideo .pv-steps { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .pv-stage .pv-wrap-pvideo .pv-step { flex: none; padding: 5px 10px; font-size: 13px; gap: 6px; }
  .pv-stage .pv-wrap-pvideo .pv-step .pv-step-no { width: 20px; height: 20px; font-size: 12px; }
  .pv-stage .pv-wrap-pvideo .pv-step-sep { flex: 1 1 12px; min-width: 10px; margin: 0; }
  .pv-stage .pv-wrap-pvideo .pv-cols,
  .pv-stage .pv-wrap-pvideo .pv-cols-2 { display: flex !important; flex-direction: column; gap: 8px !important; max-width: none !important; }
  .pv-stage .pv-wrap-pvideo .pv-pane { max-width: none !important; }
  .pv-stage .pv-wrap-pvideo .pv-col { min-height: 0; }

  /* ===== 2026-10-22 带货视频手机端极简单轨批（用户拍板）=====
     手机操作空间小，极简/专业切换按钮与注释整组隐藏（pvideo.js pvSimpleView 已强制手机端走极简视图，
     专家视图不再渲染）；顶部改为视频生成页同款 .dh-steps 三步导航（吸顶 / 点击定位 / 滑动反向联动
     由 mobile.js 通用机制接管，列容器已标 data-pvstep）。整页字号对齐视频生成页口径：
     列头 15 / 标题 14 / 注释 12 / 输入与下拉 14。
     ★ 3 类选择器 + !important 压过模块运行时注入 <style>（pvSimpleV1，2 类 !important，级联更晚）。 */
  .pv-stage .pv-wrap-pvideo .gv-mode-switch { display: none !important; }
  /* 步骤条：走全站 .dh-steps 紧凑吸顶基座（.content-col .dh-steps），这里只修 wrap 内间距口径
     （注入 .pv-wrap-pvideo.pv-wrap-simple{gap:12px!important} 为 2 类同权且级联更晚 → 3 类压过，8px 体系） */
  .pv-stage .pv-wrap-pvideo.pv-wrap-simple { gap: 8px !important; }
  .pv-stage .pv-wrap-pvideo .dh-steps { margin-bottom: 0; }
  .pv-stage .pv-wrap-pvideo .pv-col[data-pvstep] { scroll-margin-top: 52px; }
  /* 列头 15px（⑨） */
  .pv-stage .pv-wrap-pvideo .pv-col-head { font-size: 15px !important; }
  /* 标题级 14px（⑧）：字段标题 / 上传区标题 */
  .pv-stage .pv-wrap-pvideo .pv-label,
  .pv-stage .pv-wrap-pvideo .pv-upload-label { font-size: 14px !important; }
  /* 输入 / 下拉 14px（⑦⑧） */
  .pv-stage .pv-wrap-pvideo .pv-input,
  .pv-stage .pv-wrap-pvideo .pv-textarea,
  .pv-stage .pv-wrap-pvideo .pv-variant-input,
  .pv-stage .pv-wrap-pvideo .pv-select,
  .pv-stage .pv-wrap-pvideo .pv-drop-btn,
  .pv-stage .pv-wrap-pvideo .pv-drop-item { font-size: 14px !important; }
  /* 注释级 12px：配额 / 副行 / 槽位提示 / hint / 状态行 / 分片元信息 / 缩略图槽位下拉 */
  .pv-stage .pv-wrap-pvideo .pv-upload-quota,
  .pv-stage .pv-wrap-pvideo .pv-upload-sub,
  .pv-stage .pv-wrap-pvideo .pv-role-tip,
  .pv-stage .pv-wrap-pvideo .pv-hint,
  .pv-stage .pv-wrap-pvideo .pv-status,
  .pv-stage .pv-wrap-pvideo .pv-clip-no,
  .pv-stage .pv-wrap-pvideo .pv-clip-dur,
  .pv-stage .pv-wrap-pvideo .pv-clip-time,
  .pv-stage .pv-wrap-pvideo .pv-clip-state,
  .pv-stage .pv-wrap-pvideo .pv-clip-link { font-size: 12px !important; }
  /* 缩略图槽位下拉：注入 #pvThumbs .pv-thumb-role（1 ID + 1 类）→ 用 #pvStage + 2 类（1 ID + 2 类）压过 */
  #pvStage .pv-wrap-pvideo .pv-col-body .pv-thumb-role { font-size: 12px !important; }
  /* 上传框主提示行（点击或拖拽上传「…」）15→14px（2026-10-22 用户要求：字号太大；
     注入 .pv-wrap-simple .pv-upload-text 为 2 类 !important → #pvStage 前缀 1 ID 压过） */
  #pvStage .pv-wrap-pvideo .pv-upload-text { font-size: 14px !important; }
  /* 选项卡 chip（参数·售后快捷标签）12px（⑩） */
  .pv-stage .pv-wrap-pvideo .pv-chip { font-size: 12px !important; }
  /* 一键生成按钮：15px → 14px 与全站 CTA 一致 */
  .pv-stage .pv-wrap-pvideo #pvSimpleGen { font-size: 14px !important; }
  /* 列内块间距并入 8px 体系（col-body gap 8 已由通配规则命中；注入的 30px/10px margin 归 8。
     注入 .pv-wrap-simple .pv-col[data-pvcol="info"] .pv-block 为 4 类权 → #pvStage 前缀 1 ID 压过） */
  #pvStage .pv-wrap-pvideo .pv-block { margin-bottom: 8px !important; }
  /* 视频参数区（2026-10-22 用户要求）：视频模型值较长（如「Grok Video 1.5」），两列半宽下
     折成三行 ⇒ 手机端独占整行；出镜方式本就是 .pv-param-full 整行不变；其余参数维持两列 */
  #pvStage .pv-wrap-pvideo .pv-params > .pv-field:first-child { grid-column: 1 / -1; }
  /* 视频参数区字段标题（视频模型/成片时长/…/出镜方式）缩小一号：15px → 14px，
     与全站字段标题口径一致（.pv-params 作用域，不动锚点块等其他标题） */
  #pvStage .pv-wrap-pvideo .pv-params .pv-field-label { font-size: 14px !important; }

  /* ===== 探店视频（极简/专业共用 .pv-wrap-svideo 注入版式）手机端适配（2026-10-20） =====
     结构与带货视频完全同构（仅前缀不同），同款纵向单列 + 步骤条紧凑横排吸顶。 */
  #svStage .pv-wrap-svideo .pv-toprow {
    display: flex !important; flex-direction: column; align-items: stretch;
    flex: none !important;
    gap: 10px; margin: 0 0 10px;
    position: sticky; top: 0; z-index: 40;
    background: var(--page, #101018); padding: 6px 0 8px; border-radius: 12px;
  }
  #svStage .pv-wrap-svideo .pv-toprow .gv-mode-switch { justify-content: center; }
  #svStage .pv-wrap-svideo .pv-toprow .pv-steps { margin: 0 !important; }
  #svStage .pv-wrap-svideo .pv-steps { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  #svStage .pv-wrap-svideo .pv-step { flex: none; padding: 5px 10px; font-size: 13px; gap: 6px; }
  #svStage .pv-wrap-svideo .pv-step .pv-step-no { width: 20px; height: 20px; font-size: 12px; }
  #svStage .pv-wrap-svideo .pv-step-sep { flex: 1 1 12px; min-width: 10px; margin: 0; }
  #svStage .pv-wrap-svideo .pv-cols,
  #svStage .pv-wrap-svideo .pv-cols-2 { display: flex !important; flex-direction: column; gap: 8px !important; max-width: none !important; }
  #svStage .pv-wrap-svideo .pv-pane { max-width: none !important; }
  #svStage .pv-wrap-svideo .pv-col { min-height: 0; }

  /* ===== 2026-10-22 探店视频手机端极简单轨批（与带货视频同法）=====
     手机操作空间小，极简/专业切换按钮与注释整组隐藏（svideo.js svSimpleView 已强制手机端走极简视图，
     专家视图不再渲染）；顶部改为视频生成页同款 .dh-steps 三步导航（吸顶 / 点击定位 / 滑动反向联动
     由 mobile.js 通用机制接管，列容器已标 data-svstep）。整页字号对齐视频生成页口径：
     列头 15 / 标题 14 / 注释 12 / 输入与下拉 14。
     ★ #svStage + 1 类（1 ID）压过模块运行时注入 <style>（svSimpleV1，2 类 !important，级联更晚）。 */
  #svStage .pv-wrap-svideo .gv-mode-switch { display: none !important; }
  #svStage .pv-wrap-svideo.pv-wrap-simple { gap: 8px !important; }
  #svStage .pv-wrap-svideo .dh-steps { margin-bottom: 0; }
  #svStage .pv-wrap-svideo .pv-col[data-svstep] { scroll-margin-top: 52px; }
  #svStage .pv-wrap-svideo .pv-col-head { font-size: 15px !important; }
  #svStage .pv-wrap-svideo .pv-label,
  #svStage .pv-wrap-svideo .pv-upload-label { font-size: 14px !important; }
  #svStage .pv-wrap-svideo .pv-input,
  #svStage .pv-wrap-svideo .pv-textarea,
  #svStage .pv-wrap-svideo .pv-variant-input,
  #svStage .pv-wrap-svideo .pv-select,
  #svStage .pv-wrap-svideo .pv-drop-btn,
  #svStage .pv-wrap-svideo .pv-drop-item { font-size: 14px !important; }
  #svStage .pv-wrap-svideo .pv-upload-quota,
  #svStage .pv-wrap-svideo .pv-upload-sub,
  #svStage .pv-wrap-svideo .pv-role-tip,
  #svStage .pv-wrap-svideo .pv-hint,
  #svStage .pv-wrap-svideo .pv-status,
  #svStage .pv-wrap-svideo .pv-clip-no,
  #svStage .pv-wrap-svideo .pv-clip-dur,
  #svStage .pv-wrap-svideo .pv-clip-time,
  #svStage .pv-wrap-svideo .pv-clip-state,
  #svStage .pv-wrap-svideo .pv-clip-link { font-size: 12px !important; }
  #svStage .pv-wrap-svideo .pv-col-body .pv-thumb-role { font-size: 12px !important; }
  /* 上传框主提示行（点击或拖拽上传「…」）15→14px（2026-10-22 用户要求：字号太大；
     注入 .pv-wrap-svideo.pv-wrap-simple .pv-upload-text 为 2 类 !important → #svStage 前缀 1 ID 压过） */
  #svStage .pv-wrap-svideo .pv-upload-text { font-size: 14px !important; }
  #svStage .pv-wrap-svideo .pv-chip { font-size: 12px !important; }
  #svStage .pv-wrap-svideo #svSimpleGen { font-size: 14px !important; }
  #svStage .pv-wrap-svideo .pv-block { margin-bottom: 8px !important; }
  /* 视频参数区（2026-10-22 用户要求，同带货视频）：视频模型值较长，两列半宽折行 ⇒ 手机端独占整行；
     出镜方式本就是 .pv-param-full 整行不变；其余参数维持两列 */
  #svStage .pv-wrap-svideo .pv-params > .pv-field:first-child { grid-column: 1 / -1; }
  /* 参数区字段标题缩小一号 15→14px，与带货视频/全站字段标题口径一致 */
  #svStage .pv-wrap-svideo .pv-params .pv-field-label { font-size: 14px !important; }

  /* ===== 电商套图（极简/专业共用 .ecom-wrap 注入版式）手机端适配（2026-10-20） =====
     同带货/探店：.ecom-cols/.ecom-cols-2 三列/两列 grid 无手机断点，列被硬挤；toprow 1fr auto 1fr 挤竖排步骤。 */
  .ecom-stage .ecom-wrap .ecom-toprow {
    display: flex !important; flex-direction: column; align-items: stretch;
    flex: none !important;
    gap: 10px; margin: 0 0 10px;
    position: sticky; top: 0; z-index: 40;
    background: var(--page, #101018); padding: 6px 0 8px; border-radius: 12px;
  }
  .ecom-stage .ecom-wrap .ecom-toprow .gv-mode-switch { justify-content: center; }
  .ecom-stage .ecom-wrap .ecom-toprow .ecom-steps { margin: 0 !important; }
  .ecom-stage .ecom-wrap .ecom-steps { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .ecom-stage .ecom-wrap .ecom-step { flex: none; padding: 5px 10px; font-size: 13px; gap: 6px; }
  .ecom-stage .ecom-wrap .ecom-step .ecom-step-no { width: 20px; height: 20px; font-size: 12px; }
  .ecom-stage .ecom-wrap .ecom-step-sep { flex: 1 1 12px; min-width: 10px; margin: 0; }
  .ecom-stage .ecom-wrap .ecom-cols,
  .ecom-stage .ecom-wrap .ecom-cols-2 { display: flex !important; flex-direction: column; gap: 8px !important; max-width: none !important; }
  .ecom-stage .ecom-wrap .ecom-pane { max-width: none !important; }
  .ecom-stage .ecom-wrap .ecom-col { min-height: 0; }

  /* ===== 2026-10-22 电商套图手机端极简单轨批（与带货/探店同法）=====
     手机操作空间小，极简/专业切换按钮与注释整组隐藏（ecom.js ecomSimpleView 已强制手机端走极简视图，
     专业版不可达）；顶部改为视频生成页同款 .dh-steps 三步导航（吸顶/点击定位/滑动反向联动由 mobile.js
     接管，列容器已标 data-ecomstep）。整页字号对齐视频生成页口径：列头15/标题14/输入下拉14/注释12/chip12/CTA14。
     ★ #ecomStage + 1 ID 压过模块运行时注入 <style>（ecomSimpleV1，2~3 类 !important 级联更晚）。 */
  #ecomStage .ecom-wrap .gv-mode-switch { display: none !important; }
  #ecomStage .ecom-wrap.ecom-wrap-simple { gap: 8px !important; }
  #ecomStage .ecom-wrap.ecom-wrap-simple .dh-steps { margin-bottom: 0; }
  #ecomStage .ecom-wrap.ecom-wrap-simple .ecom-col[data-ecomstep] { scroll-margin-top: 52px; }
  #ecomStage .ecom-wrap .ecom-col-head { font-size: 15px !important; }
  #ecomStage .ecom-wrap .ecom-field-label,
  #ecomStage .ecom-wrap .ecom-upload-label,
  #ecomStage .ecom-wrap .param-label { font-size: 14px !important; }
  #ecomStage .ecom-wrap .text-input,
  #ecomStage .ecom-wrap .ecom-select,
  #ecomStage .ecom-wrap .prompt-textarea { font-size: 14px !important; }
  #ecomStage .ecom-wrap .ecom-upload-quota,
  #ecomStage .ecom-wrap .ecom-upload-sub,
  #ecomStage .ecom-wrap .ecom-upload-text,
  #ecomStage .ecom-wrap .ecom-hint,
  #ecomStage .ecom-wrap .ecom-kv,
  #ecomStage .ecom-wrap .ecom-tip,
  #ecomStage .ecom-wrap .ecom-saved,
  #ecomStage .ecom-wrap .ecom-switch,
  #ecomStage .ecom-wrap .ecom-switch-note,
  #ecomStage .ecom-wrap .ecom-styleref-note,
  #ecomStage .ecom-wrap .ecom-styleref-title,
  #ecomStage .ecom-wrap .ecom-plan-hint,
  #ecomStage .ecom-wrap .ecom-all-prog { font-size: 12px !important; }
  #ecomStage .ecom-wrap .ecom-chips .ecom-chip { font-size: 12px !important; }
  #ecomStage .ecom-wrap .ecom-btn-simple,
  #ecomStage .ecom-wrap #ecomBtnSimpleGen { font-size: 14px !important; }
  /* 图型序列行：390px 一行放不下（拖把+序号+下拉+模特+生成单图+删除 ≈365px > 可用 ~310px）
     → 两行排布：首行 拖把+序号+图型下拉（下拉吃满剩余宽度），次行 模特+生成单图+删除 */
  #ecomStage .ecom-wrap .ecom-type-row { flex-wrap: wrap; row-gap: 6px; }
  #ecomStage .ecom-wrap .ecom-type-row .ecom-select { flex: 1 1 calc(100% - 56px); min-width: 0; }
  #ecomStage .ecom-wrap .ecom-type-gen1 { white-space: nowrap; }


  /* ===== AI 模特换装（#outfitStage 静态 .of-grid 三列）手机端适配（2026-10-20） =====
     与图片生成页 .vg-grid 同构，但 style.css 只给了 vg-grid 的 760px 单列断点，
     .of-grid 漏掉了 → 430px 下三列(minmax(300px,530px))被硬挤、列1还挂 773px min-height 大片留白。
     套装/多件只是列2内容切换，版式一套，此处一并覆盖。 */
  .of-stage .of-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .of-stage .of-col { min-height: 0; }
  .of-stage .of-col-body { gap: 18px; }

  /* ===== 积分充值弹窗（.credit-panel）手机端适配（2026-10-21 用户要求） =====
     桌面为 830×1060 定尺 + 字号 +2 档的大弹窗，375px 手机上三项问题：
     ① 面板仍撑 1060px 高、桌面大字号 → 整体缩小一号（标题/卡片/按钮/提示全收）；
     ② 套餐卡 auto-fill minmax(180px,1fr) 在 ~330px 内容宽只容 1 列 → 强制一行两个；
     ③ （流光白色系改在 style.css .credit-panel.dh-dlg-beam，桌面同生效）。
     全部锁在 760px 内，桌面零影响。 */
  .uc-mask { padding: 20px 10px; }
  .credit-panel {
    width: 100%; min-height: 0; max-width: none;
    padding: 18px 14px 14px; gap: 13px; border-radius: 13px;
  }
  /* z-index:3 修复「点 X 没反应」：.credit-banner 是 position:relative 且 DOM 顺序在
     .uc-close 之后 ⇒ 无层级时 banner 绘制在上、盖住 X 下半部。桌面 padding 大（24/26），
     × 字形中心恰好落在 banner 右缘外所以从不暴露；手机端 padding 收紧（18/14）后字形中心
     落进 banner 区，点的其实是 banner。padding:6px 把 ~12×22 的文字盒扩成 ~24×34 触摸热区；
     top/right 收到 8px 让视觉更贴角（绝对定位 right 含 padding，视觉位置基本不变）。 */
  .credit-panel .uc-close { font-size: 22px; top: 8px; right: 8px; z-index: 3; padding: 6px; line-height: 1; }
  .credit-banner { padding: 16px 12px 18px; border-radius: 10px; }
  .credit-banner-title { font-size: 20px; letter-spacing: 2px; }
  .credit-banner-sub { margin-top: 5px; font-size: 12px; }
  .credit-feats { gap: 8px; }
  .credit-feat { font-size: 13px; padding: 9px 6px; gap: 5px; border-radius: 9px; }
  .cf-ico { font-size: 13px; }
  /* 套餐卡：一行两个（内容宽 ~330px，两卡各 ~160px，内部元素同步收一档放得下） */
  .credit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .credit-card { padding: 12px 10px 10px; gap: 5px; border-radius: 10px; }
  .credit-radio { top: 8px; right: 8px; width: 14px; height: 14px; }
  .cc-coin-ico { width: 30px; height: 30px; font-size: 15px; }
  .cc-name { font-size: 13px; }
  .cc-credits { font-size: 12px; }
  .cc-credits b { font-size: 24px; }
  .cc-desc { font-size: 11.5px; }
  .cc-vip-tag { font-size: 10.5px; padding: 2px 7px; }
  .cc-price { margin-top: 3px; gap: 5px; }
  .cc-price em { font-size: 18px; }
  .cc-price s { font-size: 11.5px; }
  .credit-pay-title { font-size: 13.5px; }
  .credit-pays { gap: 10px; }
  .credit-pay { padding: 11px 8px; font-size: 14px; gap: 7px; border-radius: 9px; }
  .credit-agree { font-size: 12px; gap: 6px; }
  .credit-agree input { width: 14px; height: 14px; }
  .credit-paybtn { padding: 12px; font-size: 16px; letter-spacing: 1px; border-radius: 10px; }
  .credit-payrow { gap: 9px; }
  .credit-vipbtn { padding: 12px 14px; font-size: 14px; letter-spacing: 0; }
  .credit-note { font-size: 11.5px; line-height: 1.6; }

  /* ===== 个人中心弹窗（#ucMask .uc-panel）手机端适配（2026-10-21 用户要求） =====
     桌面为 IP 档案库口径 830×1060 定尺 + 字号 +2 档，375px 手机上四项问题：
     ① 桌面大字号整体大一档 → 全套回落一档（uname/uid/tag/kv/link/credit 全收）；
     ② style.css 560px 断点把积分框与充值钮竖排 → 覆盖回一行并收紧尺寸；
     ③ 原 760px 规则把 7 个快捷入口收成单列 → 改回一行两个，压紧卡内元素防「分销中心」拆行；
     ④ 面板去掉 1060px 定高改全宽自适应（内容随 .uc-mask 整窗滚动）。
     （流光白色系改在 style.css #ucMask .uc-panel.dh-dlg-beam，桌面同生效。）
     全部锁在 760px 内，桌面零影响。 */
  #ucMask .uc-panel {
    width: 100%; min-height: 0; max-width: none;
    padding: 16px 14px 14px; gap: 12px; border-radius: 13px;
  }
  #ucMask .uc-close { font-size: 20px; top: 10px; right: 12px; z-index: 3; }
  /* 头部 + 标签：字号小一档 */
  #ucMask .uc-avatar { width: 44px; height: 44px; font-size: 18px; }
  #ucMask .uc-uname { font-size: 15.5px; }
  #ucMask .uc-uid { font-size: 12px; }
  #ucMask .uc-tags { margin-top: 4px; gap: 5px; }
  #ucMask .uc-tag { font-size: 10.5px; padding: 2px 8px; border-radius: 9px; }
  /* 积分行：一行（左积分框 + 右充值钮），各元素同步收一档放得下 */
  #ucMask .uc-credit-row { flex-direction: row; gap: 8px; }
  #ucMask .uc-credit-box { gap: 9px; padding: 8px 11px; border-radius: 10px; }
  #ucMask .uc-credit-ico { width: 30px; height: 30px; }
  #ucMask .uc-credit-ico .ico { width: 16px; height: 16px; }
  #ucMask .uc-credit-num b { font-size: 20px; }
  #ucMask .uc-credit-num i { font-size: 11px; }
  #ucMask .uc-recharge-btn { min-width: 0; padding: 0 13px; font-size: 13px; border-radius: 10px; }
  /* 资料键值行（注册时间/上级/邀请码/推广链接） */
  #ucMask .uc-kv { font-size: 12.5px; padding: 7px 2px; gap: 8px; }
  #ucMask .uc-kv > span:first-child { width: 76px; font-size: 12px; }
  #ucMask .uc-copy { font-size: 11.5px; }
  /* 7 个快捷入口：一行两个（375px 下两格各 ~158px；压紧内距/字号/图标防拆行） */
  #ucMask .uc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #ucMask .uc-link { font-size: 12px; padding: 8px 9px; gap: 6px; border-radius: 9px; white-space: nowrap; }
  #ucMask .uc-link .ico { width: 14px; height: 14px; }
  #ucMask .uc-link em { font-size: 10px; flex: none; margin-left: auto; }
  /* 极窄屏（≤360px，含 320px 老机）再收一档，保证两格内容不溢出 */
  @media (max-width: 360px) {
    #ucMask .uc-link { font-size: 11px; padding: 7px 8px; gap: 5px; }
    #ucMask .uc-link .ico { width: 13px; height: 13px; }
    #ucMask .uc-link em { font-size: 9.5px; }
  }
  /* 退出登录行 */
  #ucMask .uc-foot { padding-top: 9px; }

  /* 我的作品 顶部分类 tab：5 个 tab 固定 flex 撑到 833px → 横向滑动条（移动端标准 tab 形态） */
  .wk-head { flex-wrap: wrap; row-gap: 8px; }
  .wk-tabs { flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
  .wk-tabs::-webkit-scrollbar { display: none; }
  .wk-tab { flex: none; white-space: nowrap; height: 28px; padding: 0 11px; font-size: 11.5px; border-radius: 7px; }

  /* 2026-10-21 用户要求：我的作品头部文字/按钮整体缩小一号——tab、统计、两个按钮、温馨提示条同步收，
     只动 mobile（桌面保持原样）；按钮高度与内距随字号等比收，避免窄屏挤压换行 */
.wk-stats { gap: 12px; }
.wk-stat { font-size: 11.5px; }
.wk-stat b { font-size: 11px; margin-left: 3px; }
  .wk-tpl-btn { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 5px; border-radius: 8px; }
  .wk-tpl-btn .ico { width: 14px; height: 14px; }
  .wk-new { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 5px; border-radius: 8px; }
  .wk-new .ico { width: 14px; height: 14px; }
  .wk-hint { font-size: 13px; padding: 8px 12px; gap: 6px; border-radius: 8px; }
  .wk-hint .ico { width: 15px; height: 15px; flex: none; }

  /* 2026-10-21 用户要求：我的作品卡片太大 → 一行两个。
     桌面 auto-fill minmax(200px,1fr) 在 ~390px 窄屏只容 1 列（单卡近全屏宽），
     强制 2 列 + 内部元素（角标/操作钮/播放钮/信息区）等比收，保证操作钮 4 个仍放得下 */
  .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wk-info { padding: 7px 9px 9px; gap: 5px; }
  .wk-title { font-size: 12px; height: 34px; }
  .wk-src, .wk-status { height: 18px; padding: 0 6px; font-size: 10.5px; border-radius: 5px; }
  .wk-status { top: 6px; }
  .wk-badges { top: 6px; left: 6px; gap: 4px; }
  .wk-play span { width: 34px; height: 34px; }
  .wk-play .ico { font-size: 16px; }
  .wk-ops { right: 6px; bottom: 6px; gap: 4px; }
  .wk-op { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; }

  /* ===== 我的作品 手机端第二批（2026-10-22 用户连续 4 项）=====
     ① 「已完成/生成中/失效」字号已在上方改为 11.5/11px（减 2 号），
        「新建制作」按钮隐藏，.wk-head 换行布局重排让「我的分享模板」与统计行同行。 */
  .wk-new-wrap { display: none; }                 /* 隐藏「+ 新建制作」（含其下拉菜单容器） */
  /* .wk-head 是 flex-wrap：tabs 独占一行(flex:1 1 100%)，其余排第二行。
     ★ 2026-10-22 用户再报「统计行与「我的分享模板」没在同一行」——根因不是 order 写错，
       而是这两块总宽（统计 ~150px + 按钮 ~104px + gap 24px ≈ 278px）虽小于 375px 屏宽，
       但 .wk-flex 弹性占位（flex:1，min-width:8px）会先吃掉剩余空间把 stats 顶到右侧，
       按钮随后无处安放 → flex-wrap 自动换行。
     改法（DOM 已把两者包进 .wk-meta）：
       ① .wk-meta 在手机端变成普通 flex 容器，两块成为它的子项 → 物理上不可能拆到两行；
       ② .wk-flex 隐藏（弹性占位在手机端无意义，还抢空间）；
       ③ 宽度不够时 .wk-meta 整行横滑，而不是把按钮甩到下一行。 */
  .wk-flex { display: none; }                          /* 去掉弹性占位 */
  .wk-meta {
    display: flex; align-items: center; gap: 10px;
    flex: 1 1 100%; min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .wk-meta::-webkit-scrollbar { display: none; }
  .wk-stats { order: 1; flex: 0 0 auto; gap: 10px; }
  .wk-tpl-btn { order: 2; flex: 0 0 auto; }

  /* ② 温馨提示条：字号减小 + 强制一行不折行 + 缩小上下间隔
     上下间隔来自 .wk-wrap 的 gap:14px，用负外边距把提示条上下间距各收 ~5px。 */
  .wk-hint { font-size: 10.5px; padding: 6px 10px; gap: 5px; border-radius: 8px; margin: -5px 0; }
  .wk-hint .ico { width: 13px; height: 13px; flex: none; }
  .wk-hint span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ③ 空间信息行：改成「我的资产」空间信息样式/大小，并移到顶栏下方、选项按钮上方。
     DOM 里 .wk-space 在 .wk-hint 之后（作品网格之前）；用 order 提到 .wk-head 之前，
     使顺序变为：顶栏 → 空间行 → tabs/统计/分享模板 → 提示条 → 网格。 */
  .wk-space { order: -1; gap: 8px; padding: 5px 10px; border-radius: 10px; }
  .wk-space-text { font-size: 11px; }
  .wk-space-text b { font-size: 11px; }
  .wk-buy { height: 30px; padding: 0 10px; font-size: 11.5px; gap: 4px; border-radius: 8px; }
  .wk-buy .ico { width: 13px; height: 13px; }
  /* 2026-10-22 用户报「空间信息行与下方选项按钮区间隔太大」：
     该间隔 = .wk-wrap 的 gap:14px + .wk-head 的 padding-top:12px ≈ 26px。
     改法只收这一处：.wk-space 负下边距把 wrap gap 抵消 8px（14→6）+ .wk-head 上内边距 12→8px，
     合计 ~14px。**不改 .wk-wrap 的全局 gap**——那会连带影响提示条与网格间距，
     而 .wk-hint 已有 margin:-5px 0，两者叠加会把提示条挤到贴住相邻区块。 */
  .wk-space { margin-bottom: -8px; }
  .wk-head { padding-top: 8px; padding-bottom: 8px; }   /* 缩小「我的分享模板」按钮下方间距：卡片下内边距 16→8 */

  /* ===== 数字人工作台（.dh-wrap 三列 grid）手机端单列收纳（2026-10-21 用户报「列挤成竖排文字」）=====
     根因：.dh-body 桌面为三列 grid（repeat(3,minmax(300px,530px))），@media(max-width:1240px) 回落
     repeat(3,minmax(0,1fr)) —— 手机 375px 每列仅 ~110px 宽，文字逐字竖排、互相叠压；
     旧 @media(max-width:1100px) 单列断点写在基础规则之前被同特异性后文覆盖，从未生效。
     方案：改纵向单列 + .dh-stage 自滚（对齐 vg/cr 页「stage 本身 overflow-y:auto」口径），
     步骤条吸顶；内部 .dh-scroll 交由内容自然撑开。桌面架构零影响。 */
  .dh-stage { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .dh-wrap { height: auto; min-height: 0; overflow: visible; gap: 8px; }
  /* 2026-10-22 用户报「文案获取里这几个标题字号改 14px」：口播文案块头 + 六个字段标题
     （行业+人设/产品/卖点/其他要求/识别文案，补充要求在第二列不受影响）。
     块头内 .dh-btn-mini/.dh-mini/.dh-count 均有独立字号，不受父级影响；桌面 15/14.5px 不动。 */
  .dh-left .dh-block-head { font-size: 14px; }
  .dh-left .dh-aiw-field > span { font-size: 14px; }
  /* 2026-10-22 二稿（用户设计）：六步扁平向导——1-6 连续编号圆圈胶囊 + 连接线（对齐桌面 .dh-step-btn/.dh-step-sep 样式），
     两端 ‹› ＝上一胶囊/下一胶囊；rail 窄屏可横向滑动、当前胶囊自动居中；内容区只显示当前列；
     列底 上一步/下一步 六页全配、尺寸缩小、按六页翻页。桌面端 .dh-subnav 整体隐藏（style.css），footer 桌面维持原样。 */
  .dh-stepper { display: none; }
  .dh-subnav {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 4px;
    background: var(--page, #101018); padding: 6px 0 8px; border-radius: 12px;
  }
  .dh-sub-edge {
    flex: none; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--soft, rgba(255, 255, 255, .06)); border: 1px solid var(--line);
    color: var(--text); cursor: pointer;
  }
  .dh-sub-edge:disabled { opacity: .35; cursor: default; }
  .dh-sub-edge .ico { width: 14px; height: 14px; }
  .dh-sub-rail {
    flex: 1; min-width: 0; display: flex; align-items: center;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0;
  }
  .dh-sub-rail::-webkit-scrollbar { display: none; }
  .dh-sub-tab {
    flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px;
    border-radius: 999px; background: var(--soft, rgba(255, 255, 255, .06)); border: 1px solid var(--line);
    color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
  }
  .dh-sub-n {
    flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--line); color: var(--text-2);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
  }
  .dh-sub-tab.done .dh-sub-n { background: var(--accent); color: #fff; }
  .dh-sub-tab.active { background: var(--grad-cta, var(--accent)); border-color: transparent; color: #fff; box-shadow: 0 4px 20px rgba(94, 99, 245, .38); }
  .dh-sub-tab.active .dh-sub-n { background: rgba(255, 255, 255, .24); color: #fff; }
  .dh-sub-sep { flex: 1 1 10px; min-width: 8px; height: 2px; background: var(--line); border-radius: 2px; }
  /* 2026-10-22 三稿（用户确认）：整理文案（ph3）与文案编辑（2p）共享同一整理稿，手机端五页向导
     只保留「文案编辑」一页——ph3 整列隐藏（桌面端三列照常，style.css 基础规则不受影响）。
     注意：第一步 dhsub 只会有 1/2（旧六页记忆在 avatar.js 里已兜底为 2），原 dhsub=3 显隐规则删除。 */
  .dh-wrap .dh-ph[data-ph="3"] { display: none; }
  .dh-wrap[data-dhsub="1"] .dh-ph[data-ph="2"] { display: none; }
  .dh-wrap[data-dhsub="2"] .dh-left { display: none; }
  .dh-wrap[data-dhsub="1"] .dh-ph[data-ph="2a"], .dh-wrap[data-dhsub="1"] .dh-ph[data-ph="2v"] { display: none; }
  .dh-wrap[data-dhsub="2"] .dh-ph[data-ph="2p"], .dh-wrap[data-dhsub="2"] .dh-ph[data-ph="2v"] { display: none; }
  .dh-wrap[data-dhsub="3"] .dh-ph[data-ph="2p"], .dh-wrap[data-dhsub="3"] .dh-ph[data-ph="2a"] { display: none; }
  /* 列底翻页钮：六页全配、尺寸缩小（原 46px 高/30px 横距 CTA 大钮），两端对称排布；
     2026-10-22 用户报：页1 不用「上一步」、页6 不用「下一步」（首尾边界钮手机端隐藏，
     顶部 subnav 的 ‹ › 同样在页1/页6 disabled，功能无死角）。单钮 footer 定向对齐：
     页1 只剩「下一步」靠右、页6 只剩「上一步」靠左。 */
  .dh-ph-foot { justify-content: space-between; }
  .dh-left .dh-ph-foot { justify-content: flex-end; }
  .dh-left .dh-step-prev { display: none; }
  .dh-ph[data-ph="2v"] .dh-ph-foot { justify-content: flex-start; }
  .dh-ph[data-ph="2v"] .dh-step-next { display: none; }
  .dh-step-nav { height: 32px; padding: 0 14px; font-size: 12.5px; border-radius: 9px; gap: 5px; box-shadow: none; }
  .dh-step-nav .ico { width: 13px; height: 13px; }
  .dh-step-nav:disabled { opacity: .4; }
  /* 2026-10-22「智能剪辑」按钮（送入智能剪辑）：预览头部 + 视频生成列底部各一个。
     手机端按钮按 .dh-step-nav 的紧凑规格收一档；底部变体靠左（margin-right:auto）。 */
  .dh-se-btn { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 9px; gap: 4px; }
  .dh-se-btn .ico { width: 13px; height: 13px; }
  .dh-body { display: flex; flex-direction: column; gap: 8px; overflow: visible; }
  .dh-body .dh-pane { overflow: visible; }
  .dh-left { width: auto !important; flex-basis: auto !important; }
  /* 2026-10-22 用户报「第①步后两列（生成文案 / 整理文案）不显示」：
     .dh-ph 桌面为 row 向 flex，其 .dh-ph-body 是 flex:1 1 0% 的横轴 item；手机端 .dh-body
     改竖向后该组合把列高算成 2px（仅边框），内容被 .dh-ph 的 overflow:hidden 裁光。
     → ① .dh-body 自身 flex:none（height:auto，不再被 wrap 的 flex:1 收成怪高度）；
       ② .dh-ph 改 column 流向 + flex:none（禁止收缩，min-height:0 下会被压成 2px）；
       ③ .dh-ph-body flex:0 0 auto（高度还内容）。
     第二步三列（.dh-step2）同构同受益；桌面零影响。 */
  .dh-body { flex: none; }
  .dh-body .dh-ph { flex-direction: column; flex: none; }
  .dh-body .dh-ph .dh-ph-body { flex: 0 0 auto; }
  /* 2026-10-22 用户报「列头『文案获取』字号改为 15px」（承接上批第二步三列标题 15px）：
     六列列头 .dh-colhead .dh-step-t 桌面 18px（style.css:7172/7202/7204/7206，3~4 类），
     手机端统一 15px——第一步三列（文案获取/生成文案/整理文案）+ 第二步三列（2p/2a/2v）
     全部对齐，避免步内/步间列头大小不一；上批仅覆盖 .dh-step2，本批扩到全六列（规则含
     .dh-ph 即覆盖 2p/2a/2v，无需再单写）。5 类特异性压过桌面 4 类；桌面零影响。
     顶部步骤条胶囊（.dh-step-l，16px）是主导航，刻意保留大一级——15/14 只动列头与 tab。 */
  .dh-stage .dh-body .dh-left .dh-colhead .dh-step-t { font-size: 15px; }
  .dh-stage .dh-body .dh-ph .dh-colhead .dh-step-t { font-size: 15px; }
  /* 2026-10-22 用户报「『人设IP』等这三个 tab 字号改为 14px」：
     dh 页渠道切换 tab = .dewm-tab（#dhCopyTabs：人设IP/视频仿写/AI帮写）。通用组件
     .dewm-tab 为 13.5px 1 类（style.css:3538），但 dh 页有专属覆盖
     .dh-left .dewm-tab{font-size:15.5px}（style.css:7174，2 类）⇒ 实际生效 15.5px。
     该类名是去水印/封面等多页共用组件，本规则限 .dh-left 作用域（4 类压 2 类），
     只抬数字人第一列的 tab，其他页同组件不受影响。连带效果（刻意保留）：同列的
     #dhVidModes（分享链接/上传文件/公网直链）同为 14px——列内两组 tab 尺寸统一，
     切到视频仿写渠道时不会一大一小。 */
  .dh-stage .dh-left .dewm-tabs .dewm-tab { font-size: 14px; }
  /* 2026-10-22 用户报「列内框左右间距 20px 改成 10px」（实测三列一致 20/20）：
     列内横向内距有四条链，一并改才能保持列头/内容/页脚/草稿条左右对齐——
     ① .dh-colhead padding:12px 20px（style.css:3095）
     ② .dh-scroll  padding:14px 20px（style.css:3132）
     ③ .dh-ph-foot padding:12px 20px（style.css:3110，列底「上一步/下一步」footer）
     ④ .dh-left>.dh-draft-bar margin:8px 14px 14px（style.css:7197，草稿条；原 14 本就
        与 20 不齐，本批顺势归 10，纵向 8/14 不动）
     三个 dh-* 类仅数字人页使用（别处仅注释引用）；只改 padding-left/right 与 margin-left/right，
     纵向间距不受影响；2~3 类压桌面 1~2 类；仅 ≤760px，桌面 20px 不回归。 */
  .dh-stage .dh-colhead { padding-left: 10px; padding-right: 10px; }
  .dh-stage .dh-scroll { padding-left: 10px; padding-right: 10px; }
  .dh-stage .dh-ph-foot { padding-left: 10px; padding-right: 10px; }
  .dh-stage .dh-left > .dh-draft-bar { margin-left: 10px; margin-right: 10px; }
  /* 2026-10-22 用户报：音色设计「情绪语气/语速节奏/角色人设」选项按钮字号偏细，改 14px（对齐音色描述输入区）；
     仅手机端 ≤760px，桌面 .dh-vd-chip 15px 不动。限 .dh-stage 作用域，不影响其它页面胶囊。 */
  .dh-stage .dh-vd-chip { font-size: 14px; }
  /* 2026-10-22 用户报「视频仿写的『开始仿写』按钮把『开始』两个字去掉」：
     按钮整行放 [开始仿写·0.1积分][300 字][翻译]，手机端文案折行成两行；只藏「开始」
     两字（span 包住 + 手机端 display:none，桌面保留完整「开始仿写」语义）。
     .dh-m-hide 为 dh 页专用「手机端隐藏文字片段」工具类，勿挪出 .dh-stage 作用域。 */
  .dh-stage .dh-m-hide { display: none; }

  /* ===== 智能剪辑（#seStage 横向四列 flex）手机端单列收纳（2026-10-21 同批）=====
     根因：#seStage .main 为横向 flex（overflow-x:auto; overflow-y:hidden），
     .panel-* 各 flex:1 1 272px; min-width:272px; max-width:400px —— 手机上四列横排 ~1100px+，
     只能横向滑、左列被裁出屏幕（用户截图「笔」字切边）。
     !important 压过 smart-editor.css 运行时注入 <style>（其级联顺序晚于本文件，同特异性会赢）。 */
  #seStage.se-stage { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #seStage .main { flex-direction: column !important; overflow: visible !important; gap: 8px !important; padding: 0 !important; }
  #seStage .panel { margin: 0 !important; flex: none !important; min-width: 0 !important; max-width: none !important; border-radius: 16px !important; }

  /* ===== 智能剪辑手机端：主要容器改明显圆角（R260 2026-10-23）=====
     用户报「每个页面里的框都是直角」：smart-editor.css 基础 .panel 10px / .upload-zone 8px /
     视频 6px / 字幕卡 6px 在手机大屏上偏弱、视觉近直角。该文件由 ensureStyle() 运行时注入
     <head> 末尾、级联晚于本文件，故一律 !important 压过（与上方 #seStage 系列同口径）。
     仅手机端生效，桌面不动。 */
  #seStage .upload-zone { border-radius: 16px !important; }
  #seStage #videoArea video { border-radius: 12px !important; }
  #seStage .tpl-card { border-radius: 14px !important; }
  #seStage .sub-item { border-radius: 12px !important; }
  #seStage .sub-text,
  #seStage .sub-text-display { border-radius: 10px !important; }

  /* ===== 智能剪辑手机端：列标题（面板头部 .se-ch-t）字号改 15px（R261 2026-10-23）=====
     原 smart-editor.css 用 var(--se-ch-fs, 18px)，手机端偏大；该文件运行时 ensureStyle()
     注入 <head> 末尾、级联晚于本文件，故 !important 压过。覆盖四屏面板头部主标题
     （视频预览 / 字幕编辑 / 剪辑参数 / 视频生成）。桌面不动。 */
  #seStage .se-ch-t { font-size: 15px !important; }

  /* ===== 字幕编辑两行按钮：防拉伸 + 防错行（2026-10-22 用户截图红框）=====
     根因（360px 实测，修复前）：① 第一行容器是 flex，#asrBtn/#llmBtn 各 flex:1 等宽拉撑、
       #addSubBtn 自然宽仅 39.6px →「+ 添加」折两行、行高 53px（用户报"按钮拉伸"）；
     ② 第二行 .bi-bar 三件总宽 332px > 可用 328px → flex-wrap 把翻译钮挤到第二行（用户报"错行"）。
     改法（HTML 侧把第一行容器改 grid + 添加钮文案拆「+」「添加」两 span，
     见 smart-editor-body.html；此处只做手机端收紧——桌面 400px 列两行本就正常，不动）：
     ① 三钮内距统一 4px 6px：配合 HTML 侧 auto 列（按钮按文字自然宽，不撑不裁），
        360px 下 asr 93.6 + llm 135.3 + 添加 ~51 + gaps 12 = ~292px ≤ 328px，一行放下；
     ② 添加钮即「+ 添加」文字钮（与桌面一致）：★ 2026-10-22 晚用户要求恢复「添加」两字
        （精确贴字后空间已够）——此前的 32×32 图标方钮方案（隐藏 .se-add-t + 16px 大 + 号）
        整体作废；body.html 的 span 拆分结构保留（两端都显文字，为将来窄化留机关）。
     ③ .bi-bar nowrap + 字号 13→12 + 内距收紧：三件总量 ~250px < 328px，一行放下不错行；
        翻译钮保持 margin-left:auto 右对齐（右缘与上方通栏渐变钮对齐）。
     ★ 2026-10-22 用户建议②（在本批基础上追加）：英语下拉定宽 108px（自然宽 122 被最长选项
       「葡语 Português」撑出 ~18px 死空间，常用语种全部完整显示）+ 翻译钮去 🌐 图标（JS 侧
       biTrLabel 同步删，两端生效）+ 内距再收 4px 9px→3px 7px。
     ★ !important 必需：smart-editor.css 由 ensureStyle() 在进入剪辑时动态 append 到 <head>，
       级联晚于本文件，同特异性会赢（同上方 #seStage 三修的理由）。 */
  #seStage .se-sub-acts #asrBtn,
  #seStage .se-sub-acts #llmBtn,
  #seStage .se-sub-acts #addSubBtn { padding: 4px 6px !important; }
  #seStage .bi-bar { flex-wrap: nowrap !important; gap: 6px !important; }
  #seStage .bi-lang { font-size: 12px !important; padding: 3px 5px !important; }
  /* 定宽 108px（老浏览器回落值）：默认「英语 English」放得下；仅最长选项
     「葡语 Português」尾部裁约 14px——中文用户极少选葡语，可接受；
     附带好处：切换语种时按钮宽度不再跳动。 */
  #seStage #biLang { width: 108px !important; }
  /* ★ 2026-10-22 更优解：支持 field-sizing 的浏览器（Chrome/Edge 123+、Safari 18.2+，
     实测本环境 Edge 通过）让下拉按**当前选中项**自适应——英语 103 / 日韩 95.6 /
     法德 108.7 / 俄 110 / 葡 121.8：既无死空间也任何语种都不裁切，还省掉定宽的跳宽问题。
     老浏览器 @supports 不命中 → 回落上面 108px 定宽（葡语裁尾部，可接受）。
     第二行总量随选中语种在 250~273px 间浮动，均 < 360px 机可用 328px，不会撑出行。 */
  @supports (field-sizing: content) {
    #seStage #biLang { width: auto !important; field-sizing: content !important; }
  }
  #seStage #biTranslateBtn { font-size: 12px !important; padding: 3px 7px !important; white-space: nowrap !important; }

  /* 「生成结果」竖把手：窄屏从垂直居中改到右下（标签栏上方），不再压住正文。
     2026-10-21 用户要求：整体缩小一档不突兀——外框 38→32、内距/gap 同步收，
     图标徽章 30→22、图标 17→12、竖字 11→10px（字距 4→2px）、条数胶囊 22→17。
     2026-10-21 用户要求：贴齐屏幕右边——桌面写的是 left:-44px（按桌面 44px 宽算），
     手机端宽 32px 不跟着缩，右缘离屏幕边框差 12px；改 -32px 后与屏幕右边 0 缝。
     该组件是全站标准 drop-in（.dh-result-tab），一条规则全站生效。 */
  .dh-result-tab {
    top: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: none;
    left: -32px;
    width: 32px; padding: 9px 0; gap: 6px;
    border-radius: 13px 0 0 13px;
    box-shadow: -6px 6px 16px rgba(14, 38, 104, .30), inset 0 1px 0 rgba(255, 255, 255, .22);
  }
  .dh-result-tab .dh-rt-ico { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px; }
  .dh-result-tab .dh-rt-ico .ico { width: 12px; height: 12px; }
  .dh-result-tab .dh-rt-text { font-size: 10px; letter-spacing: 2px; margin-bottom: -2px; }
  .dh-result-tab .dh-rt-count { min-width: 17px; padding: 1px 4px; font-size: 10px; line-height: 13px; }

  /* 视频换脸「合规声明」卡文字整体减小一号（2026-10-21 用户要求）：
     标题 14→13、正文/勾选 13→12；基座 style.css 769 行区，手机端覆盖。 */
  .fs-compliance-head span { font-size: 13px; }
  .fs-compliance-head .ico { font-size: 16px; }
  /* 正文/勾选被 style.css .fs-col 家族覆盖为 14px（L5393-4），同特异性对位压回 12px */
  .fs-col .fs-compliance-text { font-size: 12px; line-height: 1.55; }
  .fs-col .fs-agree { font-size: 12px; }

  /* 「生成结果」抽屉（.dh-right 全站标准组件）手机端适配（2026-10-21 用户报「打开后文字按钮被遮挡」）：
     ① 根因一：桌面 .vg-stage #emptyState { position:absolute; top:53px; 背景不透明 } 按桌面头高(45px)写死，
        手机端头部折行变高后下半截被空态盖住 → 头部 relative+z2+不透明底，永远压在空态之上；
     ② 根因二：头部四件套（标题+条数+「作品保留N天」提示+刷新/清空）在 337px 内放不下全被压缩，
        标题「生成结果」被挤成竖排 → 隐藏 keep-tip、其余 flex:none 不缩、按钮降一档；
     ③ 底部被固定标签栏(z1300)盖住 → 抽屉 bottom 让出标签栏高度。 */
  .dh-right { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); border-radius: 14px 0 0 14px; }
  /* 2026-10-21 用户要求：保留期提示手机端也要显示（此前 337px 一行放不下被藏）→
     头部改可换行，提示独占第二行铺满（标题行不动：名称+条数+刷新/清空），不再挤压 */
  .dh-right .dh-rhead { position: relative; z-index: 3; background: var(--card); flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px 7px; }
  .dh-right .dh-rname { flex: none; white-space: nowrap; font-size: 14px; }
  .dh-right .dh-rname .dh-col-ico { width: 22px; height: 22px; }
  .dh-right .dh-col-ico .ico { width: 13px; height: 13px; }
  .dh-right .dh-rhead-count { flex: none; white-space: nowrap; }
  .dh-right .dh-keep-tip { display: block; flex: 1 1 100%; margin-left: 0; white-space: normal; overflow: visible; font-size: 11.5px; line-height: 1.45; }
  .dh-right .dh-rhead-act,
  .dh-right .pv-rhead-act { flex: none; gap: 6px; margin-left: auto; }
  .dh-right .dh-rhead-act .refresh-btn,
  .dh-right .pv-rhead-act .refresh-btn { padding: 4px 8px; font-size: 11px; }
  .dh-right .dh-rhead-act .dh-btn-mini,
  .dh-right .pv-rhead-act .dh-btn-mini { font-size: 11px; padding: 4px 8px; }

  /* 2026-10-21 用户要求（小屏防换行三连）：
     ① 「生成结果」→「结果」：font-size:0 藏原文字节点，::after 重写短文案（svg 图标不受影响）；
     ② 「刷新」去文字只留图标：font-size:0 藏文字，.ico 自带 13px 不受影响；
     ③ 「清空记录」改垃圾桶图标：font-size:0 藏文字 + ::before mask 画垃圾桶（currentColor=危险红）；
        点击后的确认弹窗沿用既有逻辑，不动 JS。
     2026-10-22 用户报「数字人抽屉的刷新/清空记录还是文字按钮」→ 根因：本块只写了
     .dh-rhead-act，而 .pv-rhead-act（数字人 avatar / 带货 pvideo / 探店 svideo 三个抽屉
     头部的历史别名，DOM 结构与 dh-rhead-act 版逐字节同构）从未被覆盖——注释里说的
     「一并覆盖」实际漏写。本批把三个规则组全部补上 .pv-rhead-act 变体，四页口径统一。 */
  .dh-right .dh-rname { font-size: 0; gap: 6px; }
  .dh-right .dh-rname::after { content: "结果"; font-size: 14px; font-weight: 600; color: var(--text); }
  .dh-right .dh-rhead-act .refresh-btn,
  .dh-right .pv-rhead-act .refresh-btn { font-size: 0; gap: 0; padding: 5px 7px; }
  /* 图标用 px 锁定：svg.ico 默认 1em，父级 font-size:0 会把它缩成 0×0；显式 13px 保证「只留图标」 */
  .dh-right .dh-rhead-act .refresh-btn .ico,
  .dh-right .pv-rhead-act .refresh-btn .ico { width: 13px; height: 13px; }
  .dh-right .dh-rhead-act .dh-btn-mini.dh-btn-danger,
  .dh-right .pv-rhead-act .dh-btn-mini.dh-btn-danger { font-size: 0; padding: 5px 7px; }
  .dh-right .dh-rhead-act .dh-btn-mini.dh-btn-danger::before,
  .dh-right .pv-rhead-act .dh-btn-mini.dh-btn-danger::before {
    content: ""; display: block; width: 13px; height: 13px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14Z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14Z'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  /* 2026-10-21 用户要求（截图：结果抽屉卡片列数不对）：生成结果卡片手机端一行两个，
     桌面保持 repeat(3) 不动。
     ① .dh-works 是全站标准结果抽屉网格（桌面 style.css 4484 行 repeat(3,minmax(0,1fr))），
        数字人/电商图/AI音乐/带货视频/文案/智能擦除/图片生成等模块共用，此处一处改全覆盖；
     ② .result-grid 是各工具页工作台内结果网格（桌面 auto-fill minmax(200px,1fr)，375px 只能一列），
        同口径两列，保持与结果抽屉一致；
     ③ gap 行距 16→12、列距 12→10、padding 12→10：两列窄卡下收紧留白。 */
  .dh-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 10px; }
  .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  /* 作品名称字号 -2（桌面 .rc-title 13px 不动）：两列窄卡下标题小一号更协调，
     line-height/max-height 保持（仍两行 clamp，同行卡片齐平不受影响）。
     全局 .rc-title（不限卡片类）：music/smart-editor 等模块的卡片类名不一，统一覆盖；
     pvideo/svideo 模块注入的 .pv-wrap-* .rc-title 行内 <style> 只覆盖 line-clamp/max-height，
     不含 font-size，不会压过本条。
     2026-10-22 用户反馈「没生效」：结果抽屉卡片带 .result-card 类，style.css 的
     `.result-card .rc-title{font-size:15px}` 是两级类（0,2,0），压过单类 .rc-title（0,1,0）
     —— 同 specificity 需同写法并以 mobile.css 靠后取胜 ⇒ 补一条等选择器规则，统一 11px。 */
  .rc-title, .result-card .rc-title { font-size: 11px; }

  /* 分销中心(admin-shell)顶栏：side-foot 抢占 flex 空间把 side-nav 挤成 16px → 两行布局：
     logo+导航一行（横滑），退出登录一行通栏 */
  .admin-side { flex-wrap: wrap; }
  .admin-side .side-nav { flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .admin-side .side-nav::-webkit-scrollbar { display: none; }
  .admin-side .side-foot { flex: 1 1 100%; }

  /* ===== 手机端首页金刚区（2026-10-20 收敛版） =====
     一级入口 ×10（5列×2行一屏）：视频制作/图片制作/创作画布/AI对话/数字人/AI工具/智能剪辑/我的资产/我的作品/联系客服。
     视频制作/图片制作点击弹出二级菜单弹窗（.kk-modal）；画布点击 toast；客服触发侧栏支持弹窗。
     容器桌面内联 display:none，这里用 !important 开启；二级数据存于入口内隐藏 .kk-subs（供弹窗/工具箱页取数）。
     图标标准（变体 A）：彩色渐变圆角底板 .kk-tile + 白色 glyph（i-kk-*）。 */
  /* 2026-10-21 用户要求：三处间距减半——上（广告卡↔金刚区）14→7、下（金刚区↔精选栏）6→3、行间隔 14→7
     2026-10-21 22:3x 修正：只改 margin 不兑现——#home-stage 是 flex column + gap:18px（style.css:1210，
       mobile.css 未覆盖），flex 子项间 margin 不折叠，上边界实为 18+7=25px（用户反馈"间隔这么大"）。
     2026-10-21 22:5x 用户拍板：首页 5 处区块间距统一 15px（边到边实测）——按实测构成重算补偿值：
       B1 广告卡底→首图标顶 = 区间7 + kk-grid上内距4 + kk-entry上内距4 = 15 ⇒ margin-top = calc(7px - 18px)
          （入口内距 6→4 已贡献 2px，margin-top 无需再动；曾误改 5 导致实测 13，已回正）
       B2 二行文字底→精选栏 = kk-entry下内距4 + kk-grid下内距4 + margin-bottom + 18(flex gap) = 15
          ⇒ margin-bottom = calc(15px - 18px - 4px - 4px) = -11px
       B3 一行文字底→二行图标顶 = kk-entry下内距4 + 行gap7 + kk-entry上内距4 = 15 ⇒ .kk-entry 内距 6→4
       B4 副标题文字底→广告卡顶（用户红框2）= hero 下内距 0(23:2x 归零) + 18(flex gap) + bento margin-top -3 = 15
       B5 顶栏底→标题文字顶（用户红框1）= home-stage 上内距 15 + hero 上内距 0(23:2x 归零) = 15
     ⚠ 23:2x 口径修正：红框以「文字」为边（不是区块边），hero 手机端内距已归零（原 14px 0 2px），
       否则 15+14=29 / 2+15=17 会与红框口径差一大截。改 .home-hero padding 会让框1/框2 同时失准。
     ⚠ 今后若改 #home-stage 的 gap:18px、.kk-grid 的 padding/行gap 或 .kk-entry 内距任一环，
       本组补偿值都要按上述构成重算，否则 15px 口径失守。 */
  .kk-zone { display: block !important; margin: calc(7px - 18px) 0 calc(15px - 18px - 4px - 4px); padding: 0; }
  /* 2026-10-22 02:0x 用户要求：金刚区左右与广告卡边框对齐——原 padding:0 14px 使网格
     缩到 18~372（广告卡 4~386，左右各多缩 14px，CDP 实测）；归零后网格 4~386 与广告卡同宽。
     只动横向内距，margin 上下补偿值（15px 间距体系）不受影响。 */
  .kk-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 7px 0; padding: 4px 0;
  }
  /* 2026-10-21 22:5x：入口上下内距 6→4（B1/B3 兑现 15px 的一环，构成见 .kk-zone 注释） */
  .kk-entry {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 7px; padding: 4px 2px; cursor: pointer;
    color: var(--fg, #e8e8ef); -webkit-tap-highlight-color: transparent;
  }
  .kk-entry:active { opacity: .6; }
  /* 图标标准载体：渐变圆角方块 + 白色 glyph（glyph 用 currentColor，此处置白） */
  .kk-tile {
    width: 52px; height: 52px; border-radius: 15px; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--g1, #60A5FA), var(--g2, #2563EB));
    box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--g2, #2563EB) 45%, transparent);
  }
  .kk-tile .ico { width: 30px; height: 30px; }
  .kk-label { font-size: 11.5px; line-height: 1.25; text-align: center; color: var(--fg-muted, #a7a7b5); }

  /* 二级菜单弹窗（视频制作 / 图片制作）
     遮罩：加深 + 背景模糊（对齐站内弹窗标准）；容器挂 .dhv-modal → 自动获得站内双流光边框 */
  .kk-modal-mask {
    position: fixed; inset: 0; z-index: 1350;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(6, 8, 12, .66);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility 0s linear .22s;
  }
  .kk-modal-mask.show {
    opacity: 1; visibility: visible;
    transition: opacity .22s ease;
  }
  .kk-modal.dhv-modal {
    display: block; width: 100%; max-width: 360px; max-height: 70vh; overflow-y: auto;
    background: var(--bg, #101018);
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 18px; padding: 16px 14px 18px;
    transform: scale(.92); transition: transform .22s ease;
  }
  .kk-modal-mask.show .kk-modal { transform: scale(1); }
  .kk-modal .mtools-group-name { margin: 0 2px 10px; font-size: 15px; }

  /* ===== 手机端 精选作品区（2026-10-20） =====
     1) 隐藏「精选作品」标题（首页已有金刚区导航，标题冗余）；
     2) 主分类 Tab「全部」已在 app.js 改成「精选」；
     3) 分类名称更醒目：未选中→白字 + 淡 chip 底（让外圆弧框可见）；字号小一号；
        圆角框更短（横向 padding 收窄），使分类从 3 行收到 2 行。 */
  .tpl-head { margin-bottom: 8px !important; }
  .tpl-head h3 { display: none !important; }
  /* ★ 2026-10-21 用户要求：精选标签区固定两行，超出部分左右滑动选择（明确不是上下滑）。
     上一版是 flex-wrap + max-height 61px + overflow-y 纵向内滚——滑动方向被用户否定。
     现版改 CSS Grid：grid-template-rows 钉死两行 + grid-auto-flow:column 让 tab 按列向右排，
     容器 overflow-x 横滚 ⇒ 可见区恒为两行，滑动方向为左右、以「列」（每列上下两个 tab）为单位翻页。
     chip 行高由 .tpl-tab line-height:18px 钉死 ⇒ 单行恒 28px，两行 + 5px 行距 = 61px 等高；
     justify-content 用 flex-start：横滚场景 center 在部分浏览器有起点侧裁切风险。
     下拉菜单 fixed 脱裁 + 滚动即关的逻辑不变（app.js，横滚事件同样触发关闭）。
     2026-10-22 用户报「精选作品胶囊右边太宽」：grid-auto-flow:column 下同列 cell 共宽，
     列1 下方「画布精选▾」带箭头更宽 ⇒ 上方胶囊被默认 stretch 拉到同宽，多出的全在右侧。
     justify-items:start 让 chip 收缩到内容宽（CDP 实测 76.4→64px），列宽不变、横滚不受影响。 */
  .tpl-tabs {
    display: grid !important;
    grid-template-rows: repeat(2, auto) !important;   /* 钉死两行，多出的 tab 出新列而不是第三行 */
    grid-auto-flow: column !important;                 /* tab 按列向右流 ⇒ 内容向右延伸可横滚 */
    justify-items: start !important;                   /* 防同列宽 chip 拉伸（见上注释） */
    gap: 5px !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tpl-tabs::-webkit-scrollbar { display: none; }
  .tpl-tab {
    color: #fff !important;
    font-size: 12px !important;
    line-height: 18px !important;   /* 钉死行高 ⇒ chip 恒高 28px，两行封顶可精确计算 */
    padding: 4px 7px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
  }
  .tpl-tab.active {
    background: var(--grad-cta) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
  }
  .tpl-dropdown-item { font-size: 13px !important; }
  /* 画布精选下拉菜单：标签区改成滚动容器后会裁掉 absolute 菜单 ⇒ 手机端改 fixed 脱出裁剪，
     开菜单时由 app.js 按 tab 实际坐标定位；滚动时先关菜单，防 fixed 菜单脱锚。 */
  .tpl-tab-dropdown .tpl-dropdown { position: fixed !important; z-index: 100001; }

  /* 手机端 精选作品 卡片网格（2026-10-20）：一行两卡 + 全部正方形 + 等高 + 标题/标签单行 */
  .tpl-section .tpl-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-count: auto !important;
    gap: 10px !important;
  }
  .tpl-section .tpl-cover { aspect-ratio: 1 / 1 !important; }
  .tpl-section .tpl-cover img,
  .tpl-section .tpl-cover video {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  .tpl-section .tpl-cover.tpl-empty { aspect-ratio: 1 / 1 !important; }
  .tpl-section .tpl-info { padding: 8px 10px 10px !important; }
  .tpl-section .tpl-title {
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  .tpl-section .tpl-desc {
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    font-size: 11.5px !important; color: var(--fg-muted) !important; margin-top: 3px !important;
    min-height: 14px !important;
  }

  /* ===== 手机端 隐藏各功能页顶部子导航行（2026-10-20）=====
     视频生成/内容替换/… 那行 subbar 与金刚区/工具箱重复，手机端隐藏（桌面保留）。
     （20:2x 曾短暂改为步骤条样式，用户澄清要的是「制作步骤导航」而非二级菜单，已还原） */
  .subbar { display: none !important; }

  /* ===== 手机端 工具箱页（2026-10-20）=====
     底部「工具」tab 的落地页（替代抽屉）：按分类分组，白/浮层卡片 + 4 列图标网格。
     数据源与导航均复用首页金刚区（见 mobile.js renderToolsPage）；图标沿用 kk-tile 标准。 */
  .mtools-page {
    position: fixed; left: 0; right: 0; top: 0;
    bottom: calc(54px + env(safe-area-inset-bottom));
    z-index: 1250;                       /* 低于底部标签栏(1300)，高于内容 */
    background: var(--bg, #101018);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(100%); visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  .mtools-page.show {
    transform: translateY(0); visibility: visible;
    transition: transform .28s ease;
  }
  .mtools-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    background: var(--bg, #101018);
  }
  .mtools-title { font-size: 19px; font-weight: 700; color: var(--fg, #e8e8ef); }
  .mtools-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    color: var(--fg-muted, #a7a7b5); background: rgba(128, 128, 140, .14);
    border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mtools-close .ico { width: 18px; height: 18px; }
  .mtools-body { padding: 2px 14px 18px; }
  .mtools-group { margin-bottom: 16px; }
  .mtools-group-name { font-size: 14px; font-weight: 600; color: var(--fg, #e8e8ef); margin: 0 2px 8px; }
  .mtools-card {
    background: var(--surface, #17171f);
    border: 1px solid var(--border, rgba(255, 255, 255, .07));
    border-radius: 16px; padding: 14px 6px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 12px;   /* 2026-10-23 用户要求：视频/图片/AI工具弹窗图标一行4个改3个、加大间距 */
  }
  .mtools-item {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 2px 4px; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .mtools-item:active { opacity: .6; }
  .mtools-item-label {
    font-size: 11.5px; line-height: 1.25; text-align: center;
    color: var(--fg, #e8e8ef);
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ===== 去水印页（2026-10-22 用户要求）：手机端隐藏列1顶部功能介绍卡
     （水滴图标 +「去水印」+「粘贴分享链接，一键获取…」描述行）——手机空间有限、信息冗余：
     页面标题/侧栏菜单已有名称，下方「解析链接」卡片自带操作说明。选择器与 style.css:880 同口径。 */
  .dw-stage .se-col[data-sestep="1"] .se-col-body > .card.music-head-card { display: none !important; }
  /* 「支持平台 30+」入口按钮：15px → 14px（2026-10-22 用户要求；style.css:3553 为 1 类，此处 2 类覆盖） */
  .dw-stage .dewm-plat-link { font-size: 14px; }

  /* 提取文案页「文案预览」正文：15px → 14px（2026-10-22 用户要求；
     style.css:8210 .sc-preview 为 1 类，此处 .se-stage-wrap 前缀 2 类覆盖，sc- 前缀仅本页使用） */
  .se-stage-wrap .sc-preview { font-size: 14px; }
  /* 提取文案页「功能说明」三卡标题（短视频口播文案一键提取 / 本地视频·音频转写 / 公网直链批量采集）：
     15px → 14px（2026-10-22 用户要求；style.css:8202 .sc-ex-title 为 1 类，此处 2 类覆盖） */
  .se-stage-wrap .sc-ex-title { font-size: 14px; }

  /* ===== AI音乐（2026-10-22 用户要求）：第③步预览区操作按钮 15px → 14px =====
     style.css:8068 .mp-acts .wm-btn 为 2 类，此处 .music-stage 前缀 3 类压过；
     作用域锁 #musicPreviewActs（.mp-acts）—— 同页其他按钮（如 #musicRun 主 CTA）不受影响 */
  .music-stage .mp-acts .wm-btn { font-size: 14px; }
  /* 2026-10-22 用户要求（接上批）：第二行三个按钮（续写这段音乐 / 已生成歌词时间轴 / 下载歌词）
     原来被 flex:1 1 0 + nowrap 挤在一行，最右「下载歌词」滑到右侧「生成结果」竖标签
     （.dh-result-tab 宽 32px）底下被压住 → 按钮不再缩到内容宽以下（min-width:max-content），
     放不下自然换行（下载歌词落到第二行）；.mp-acts 右侧再让出 36px，任何一行都不进标签区 */
  .music-stage .mp-acts { padding-right: 36px; }
  .music-stage .mp-acts .wm-btn { flex: 1 1 auto; min-width: max-content; }
  /* 2026-10-22 用户二次要求（截图反馈）：① 调整速度/裁剪音乐两按钮互不重叠，应回归一行
     （上批 padding-right 36px 在 360px 小屏把两钮挤成两行）→ 按钮横向 padding 收窄 + 预留收到 34px；
     ② 歌词区扩大（max-height 150→220、min-height 170 保证短歌词时区域也够大）；
     ③ 五个按钮整体往下移三四行 → .mp-acts margin-top 28px（叠加歌词区增高约 20-40px，合计约三四行） */
  .music-stage .mp-acts { padding-right: 34px; margin-top: 28px; }
  .music-stage .mp-acts .wm-btn { padding: 7px 10px; }
  .music-stage .mp-lyrics { max-height: 220px; min-height: 170px; }
}

/* ============================================================
   ⑬ 模型下拉弹层「双流光」效果（2026-10-21 用户改方案：不要背景模糊，改为框本身发光）
   两条【反向绕行】的光带沿弹层边框流动：::before 顺时针（白，3.2s）、::after 逆时针
   （白，4.6s）。2026-10-21 全站流光统一白色系（令牌 --dh-beam-ink）。做法 = conic-gradient + mask exclude 只留 ~1.6px 边框环，
   内容是完整不透明的，光带只跑边框一圈，不影响文字可读性。
   手机/电脑通用（本节不包 @media）。渐变角度用 @property 注册才能被动画插值，
   老浏览器不支持 @property 时退化为静态渐变（不影响布局与内容）。
   ============================================================ */
@property --fw-a1 { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --fw-a2 { syntax: '<angle>'; inherits: false; initial-value: 180deg; }

.qc-model-panel, .cv-text-model-pop { overflow: hidden; display: flex; flex-direction: column; }
/* 2026-10-23 修复：双流光描边伪元素挂在面板（非滚动容器）上，真正的滚动交给内层 .qm-scroll，
   这样翻动模型列表时流光边框不再随内容滚走（参见 smart-editor.css 的 .modal>.mt-scroll 同款结构）。
   2026-10-23 二次修复（回归）：面板高度靠 max-height（桌面 320px / 手机端 mq-fw 由 JS 内联算），
   而 auto 高度的 flex 容器被 max-height 只裁盒子、不收缩子项（§9.6.8/9.6.9），.qm-scroll 保持
   内容全高被 overflow:hidden 裁掉下半截、自身无溢出 → overflow-y:auto 不产生滚动 = 列表划不动。
   解法：子项加 max-height: inherit，让 hypothetical main size 在 basis 阶段就被钳到面板 max-height
   （§9.3.5/§4.5），面板内容高度随之确定，滚动恢复；面板无 max-height 时 inherit 退化为 none，
   行为同修复前，不会更坏。 */
.qc-model-panel > .qm-scroll, .cv-text-model-pop > .qm-scroll { flex: 1 1 auto; min-height: 0; max-height: inherit; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* 2026-10-31 修复：双流光描边从「外壳 .qc-model-panel/.cv-text-model-pop」改挂到「真正可见的
   面板 .mk」上。原因：2026-10-30 模型选择器重写为 .qc-model-panel.is-mk 透明外壳 + 内部 .mk
   可视面板，而流光原本描外壳的边；移动端外壳被 .mq-fw 拉成满宽（left/right:8px），.mk 实际
   更窄且被 flex 偏移，导致流光环浮在真实面板外面、位置错乱。挂到 .mk 后永远贴着可视边框。
   外壳仅保留 legacy（无 .is-mk）的流光；model-picker 走 .mk。 */
.qc-model-panel:not(.is-mk)::before, .qc-model-panel:not(.is-mk)::after,
.cv-text-model-pop:not(.is-mk)::before, .cv-text-model-pop:not(.is-mk)::after,
.mk::before, .mk::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; padding: 1.6px; box-sizing: border-box;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.qc-model-panel::before, .cv-text-model-pop::before, .mk::before {
  background: conic-gradient(from var(--fw-a1),
    transparent 0 64%, rgba(var(--dh-beam-ink), .20) 72%, rgba(var(--dh-beam-ink), .95) 84%,
    rgba(var(--dh-beam-ink), .55) 89%, rgba(var(--dh-beam-ink), .15) 93%, transparent 97%);
  animation: fw-run1 3.2s linear infinite;
}
.qc-model-panel::after, .cv-text-model-pop::after, .mk::after {
  background: conic-gradient(from var(--fw-a2),
    transparent 0 66%, rgba(var(--dh-beam-ink), .20) 74%, rgba(var(--dh-beam-ink), .95) 85%,
    rgba(var(--dh-beam-ink), .55) 90%, rgba(var(--dh-beam-ink), .15) 94%, transparent 98%);
  animation: fw-run2 4.6s linear infinite;
}
@keyframes fw-run1 { from { --fw-a1: 0deg; } to { --fw-a1: 360deg; } }
@keyframes fw-run2 { from { --fw-a2: 180deg; } to { --fw-a2: -180deg; } }
/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .qc-model-panel::before, .qc-model-panel::after,
  .cv-text-model-pop::before, .cv-text-model-pop::after,
  .mk::before, .mk::after { animation: none; }
}

/* 以下规则仅手机端生效：原写在 @media 之外会泄漏到桌面，已用媒体查询包裹（2026-10-21 收敛） */
@media (max-width: 760px) {

/* ===== 2026-10-21 手机端批次 ===== */

/* ① 带货视频/探店视频：生成结果头部「从作品找回」手机端隐藏（用户要求：手机上从作品页找即可） */
.pv-rhead-act #pvRecover,
.pv-rhead-act #svRecover { display: none; }

/* ② 我的资产页头部压缩：文字/按钮缩小两号、行距收紧；筛选 tab 一行横滑；
   作品卡片一行两个（用户报：固定内容太多，卡片显示不全）
   ★ 2026-10-22 再腾空间（用户要求）：隐藏「资产库管理」标题、「可用不限」与进度条
   （配额信息手机端只保留「已用 x / 不限（含我的作品）」一行），桌面端全部不动 */
.assets-stage .as-wrap { gap: 8px; }
.assets-stage .as-head { gap: 8px; padding: 5px 10px; border-radius: 10px; }
/* 2026-10-22 用户要求：空间信息栏高度再减一点——购买空间按钮 38→30px（栏高原 58→约 40px） */
.assets-stage .as-buy { height: 30px; padding: 0 12px; font-size: 12px; gap: 5px; }
.assets-stage .as-buy .ico { width: 15px; height: 15px; }
.assets-stage .as-head-row { gap: 8px; }
.assets-stage .as-head-row h3 { display: none; }
.assets-stage .as-quota { font-size: 11px; }
.assets-stage .as-quota b { font-size: 11px; }
.assets-stage .as-quota-note { font-size: 10px; }
.assets-stage .as-free, .assets-stage .as-bar { display: none; }

/* 2026-10-22 用户报「卡片下方空白、滚动能出更多卡片＝内容被遮挡」：
   桌面为固定备案号给 .assets-stage 留的 padding-bottom:52px 手机端未归零
   （上方批量规则只归零了 top/left/right）——叠加 .content-col 的 56px+safe 标签栏预留，
   滚动区底边距标签栏顶 ~108px 死区，卡片在滚动区边被拦腰裁断，看起来像「下面还有一块空」。
   手机端备案号本就被标签栏（z-1300）盖住，52px 归零，滚动区底边贴到标签栏顶（余 2px 缓冲）。 */
.assets-stage { padding-bottom: 0; }
.assets-stage .as-buy { height: 30px; padding: 0 10px; font-size: 11.5px; gap: 4px; border-radius: 8px; }
.assets-stage .as-buy .ico { width: 13px; height: 13px; }
.assets-stage .as-toolbar { gap: 6px; }
.assets-stage .as-search { height: 34px; padding: 0 10px; gap: 6px; border-radius: 8px; }
.assets-stage .as-search input { font-size: 12px; }
.assets-stage .as-search .ico { width: 14px; height: 14px; }
.assets-stage .as-btn { height: 34px; padding: 0 12px; font-size: 11.5px; gap: 4px; border-radius: 8px; }
.assets-stage .as-btn .ico { width: 13px; height: 13px; }
/* 筛选 tab：一行横滑，不再换行堆两行 */
.assets-stage .as-tabs {
  flex-wrap: nowrap; row-gap: 0; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.assets-stage .as-tabs::-webkit-scrollbar { display: none; }
.assets-stage .as-tab { flex: none; height: 28px; padding: 0 11px; font-size: 11.5px; border-radius: 7px; }
.assets-stage .as-count { flex: none; font-size: 11px; margin-left: 4px; }
.assets-stage .as-tagbar { margin-top: 6px; gap: 5px; }
.assets-stage .as-tag-pill { height: 24px; padding: 0 9px; font-size: 11.5px; }
/* 2026-10-22 用户报「提示区与选项按钮区间隔偏大」：.as-tagbar 基础 display:flex 压过 hidden 属性，
   空容器不可见却仍吃 margin-top:6px。display:none 后 tabs→hint 间距 = as-wrap 的 8px，
   与搜索框→选项按钮区间距一致。 */
.assets-stage .as-tagbar[hidden] { display: none; }
/* 新结构：标签筛选行被包进 .as-tagbar-row（带「管理」按钮），同样要防 display:flex 压过 hidden */
.assets-stage .as-tagbar-row[hidden] { display: none; }
.assets-stage .as-hint { gap: 6px; padding: 7px 10px; font-size: 10.5px; border-radius: 8px; }
.assets-stage .as-hint .ico { width: 13px; height: 13px; flex: none; }
/* 作品卡片一行两个 */
.assets-stage .as-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.assets-stage .as-info { padding: 6px 8px 8px; }
.assets-stage .as-name { font-size: 12px; }
.assets-stage .as-size { font-size: 10.5px; }
.assets-stage .as-badge { height: 18px; padding: 0 6px; font-size: 10px; left: 6px; top: 6px; border-radius: 5px; }
.assets-stage .as-ops { right: 6px; top: 6px; gap: 4px; }
.assets-stage .as-op { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.assets-stage .as-card-tag { height: 17px; line-height: 17px; font-size: 10px; }

/* 作品详情弹窗（.work-modal，全站共用：生成结果卡片/我的作品等点开均是）手机端适配。
   桌面 <760px 以下是上下堆叠，但 .wm-player img 的 max-height:72vh 会把 .wm-left 挤压溢出
   ——溢出的图片+分享条直接叠在 .wm-right 文字上、信息区只剩一小条（2026-10-21 用户报）。
   改法：弹窗全屏化，图片/视频压到 42vh 上限，信息区 flex:1 独占剩余高度内部滚动。
   2026-10-22 用户报：真实手机上弹窗是方角 → 改圆角。全屏化保留，遮罩给 10px 内距让
   16px 圆角（与桌面同值）四角可见，整体呈「带边距的圆角卡」；信息区高度略减但本就内部滚动，
   全屏化修复的溢出叠压问题不受影响（wm-player 上限 42vh 不变）。
   2026-10-22 用户报：滑到底部仍显示不全（「创作同款」钮被裁一条）——根因是遮罩 z-index:210
   低于底部标签栏 .mobile-tabbar(1300)，弹窗全屏后底部一截被标签栏盖住、滚不到。
   ⇒ 遮罩提到 1350（盖过标签栏 1300；仍低于媒体放大层 #gvMediaViewer 1500、
   个人中心 2100/充值 2110、客服 10000，原有层级关系全保留）；
   弹窗内「分享」打开的投稿弹窗 #shareModalMask(.dhv-mask 240) 同步提到 1360，
   保持「子弹窗在父弹窗之上」的原相对顺序。 */
.work-modal-mask { padding: 10px; z-index: 1350; }
#shareModalMask { z-index: 1360; }
.work-modal { width: 100%; height: 100%; max-height: 100%; border-radius: 16px; }
.wm-close { width: 38px; height: 38px; font-size: 20px; right: 10px; top: 10px; }
.wm-zoom { top: 58px; right: 10px; }   /* 让开右上角的弹窗关闭钮（手机端图片区在弹窗顶部，两者同位会撞） */
.wm-left { flex: 0 0 auto; }
.wm-player { max-height: 42vh; margin: auto 0; }
.wm-player video, .wm-player img { max-height: 42vh; }
.wm-share-bar { padding: 8px 12px; }
.wm-share { font-size: 13px; }
.wm-right { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 12px 14px; gap: 12px; -webkit-overflow-scrolling: touch; }
.wm-prompt { max-height: 160px; font-size: 14px; }
/* 2026-10-22 用户报：「创作信息」标题下的信息行（状态/使用模型/参数/创作时间/消耗积分）
   字号 15px 比标题（.wm-sec-head 13px）还大 ⇒ 手机端统一压到 13px 与标题同号。
   全站所有生成结果的作品弹窗（视频/图片/电商/数字人/音乐/音色设计等）共用 .wm-kv，
   音乐弹窗 musicModalKv、音色设计弹窗也注入同款行，一处修改全覆盖；桌面端 15px 不动。 */
.wm-kv { font-size: 13px; }

/* 联系客服弹窗（.dhv-modal.sup-modal，全站共用）手机端适配（2026-10-21 用户报）：
   ① 原版 400px 宽 + 桌面字号，375px 手机上超高被 overflow:hidden 裁掉、无法滚动显示不全；
   ② 无关闭钮，只能点底部「我知道了」。
   改法（全在 760px 内，桌面零影响）：整体收小一档（宽度/内距/字号各减一档、QR 图 150→112px），
   右上角新增 26px 关闭钮（桌面 30px），内容超高时 .sup-body 内部滚动（style.css 基座已加）。 */
.dhv-mask.sup-mask { padding: 18px; }
.dhv-modal.sup-modal { width: min(340px, 92vw); max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); }
.sup-close { top: 9px; right: 9px; width: 26px; height: 26px; font-size: 14px; }
.sup-head { padding: 20px 16px 15px; }
.sup-ava { width: 44px; height: 44px; font-size: 18px; margin-bottom: 7px; }
.sup-title { font-size: 17px; }
.sup-sub { font-size: 11px; margin-top: 3px; }
.sup-body { padding: 2px 16px 0; }
.sup-row { padding: 11px 0; gap: 10px; }
.sup-ic { flex-basis: 36px; width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
.sup-label { font-size: 11px; }
.sup-value { font-size: 13.5px; }
.sup-hint { font-size: 11px; }
.sup-qr-box { gap: 6px; }
.sup-qr-box img { width: 112px; height: 112px; }
.sup-qr-cap { font-size: 11px; }
.sup-note { font-size: 11px; padding: 8px 10px; }
.sup-foot { padding: 8px 16px 14px; }
.sup-foot .d-btn.primary { height: 36px; font-size: 13px; }

/* ★ 2026-10-21 手机端支付渠道收敛（用户拍板）：个体户商户无微信 H5 权限（官方文档：
   「各主体可申请的基础支付权限列表」个体工商户 H5=不支持）+ 手机端 Native 扫码同机不可用
   ⇒ 手机端隐藏微信支付选项，只留支付宝。桌面端不受影响（两渠道照常）。
   注意：默认选中由 app.js creditMobilePayFallback 切到 alipay——隐藏的钮点不到，
   不切默认值会建微信单。我的订单的微信钮同时由 app.js uoOpenPay 条件渲染兜底。 */
.credit-pay[data-pay="wechat"] { display: none; }
.credit-pay[data-pay="alipay"] { grid-column: 1 / -1; }
.uo-pay-ch[data-ch="wechat"] { display: none; }
.uo-pay-ch[data-ch="alipay"] { flex: 1; }
/* 会员卡/OEM 代理卡收银台（dist.html 走 mobile.css；portal.html 不引 mobile.css，
   已由 portal.js showBuyPayModal JS 条件渲染兜底——两端都要藏，不能只靠一边） */
.pm-channel.wechat { display: none; }

/* 上传形象弹窗（.dhv-modal.dh-add-modal）手机端适配（2026-10-22 用户报「输入框和介绍文字重叠」）：
   桌面 830×1060 定尺下「拍摄要求」（flex:1 1 auto 自滚）与表单区（flex:1 1 auto 垂直居中）各占余高；
   手机 94vh 装不下时 flex 同时压缩两块，表单区被压到内容高度以下，输入框向上叠进拍摄要求块。
   改法：手机端弹窗改自然高 + max-height:none，两块都 flex:none 不再互相挤压；超高由遮罩整体
   滚动兜底（见下方「弹窗滚动态交回遮罩」总规，2026-10-23 v2）；桌面定尺布局不动。 */
.dhv-modal.dh-add-modal { height: auto; min-height: 0; max-height: none; overflow-y: visible; }
.dh-add-modal .dh-shoot-tips { flex: none; overflow: visible; }
#dhAddMask .dh-addbox { flex: none; justify-content: flex-start; }

/* 2026-10-22 用户要求：拍摄要求标题 + MP4 注释字号各减 1 号（桌面 15/13.5px 不动，
   同名/同特异性选择器靠 mobile.css 后加载取胜） */
.dh-add-modal .dh-shoot-tips-t { font-size: 14px; }
#dhAddMask .dh-hint { font-size: 12.5px; }

/* 2026-10-22 用户报「添加数字人弹窗显示不全（取消/保存形象被截）」：
   根因＝.dhv-mask 遮罩基类 z-index:240 低于手机端底部标签栏 .mobile-tabbar z-index:1300，
   弹窗底部被固定标签栏盖住（裁切弹窗 .dh-trim-mask z-3000 不受影响）。
   手机端把整个 .dhv-mask 家族提到标签栏之上（遮罩变暗时盖住标签栏属标准模态行为）；
   桌面无标签栏，z-index 不动。 */
.dhv-mask { z-index: 1400; }
/* 基类提到 1400 后，桌面留给资产库子弹窗的 ID z-260 反而垫底 → 同步提，保住「子弹窗在父弹窗之上」 */
#dhpMask { z-index: 1410; }
/* 顺带放宽可视高度：遮罩内边距 24→10px（弹窗 max-height 约束已取消，改由遮罩滚动兜底） */
#dhAddMask { padding: 10px; }

/* 2026-10-23 手机端软键盘遮挡根治（全站弹窗通用）—— v2 改回「遮罩滚动」方案：
   根因＝弹窗 .dhv-modal 用 position:fixed 遮罩 + flex 居中 + 定高（如 IP 档案库 830×1060），
   真机软键盘弹出时（尤其 iOS：布局视口不随键盘收缩，仅 visualViewport 收缩）弹窗仍居中，
   底部输入框被键盘盖住。
   v1（同日早些时候）把滚动改到弹窗自身（overflow-y:auto + --dhv-scroll transform 抵消），
   真机上抵消不可靠（iOS 下 fixed 弹窗随键盘整体平移、部分 WebView 弹窗 scrollTop 变化时
   scroll 事件不同步），双流光描边留在旧位置、跑到弹窗中部——用户 2026-10-23 报。
   v2：滚动态交回遮罩（.dhv-mask overflow-y:auto + align-items:flex-start + 弹窗 margin:auto
   安全居中：装得下时居中、超高时贴顶可滚），弹窗自身永不滚 ⇒ 双流光伪元素 absolute inset:0
   挂在弹窗上、随弹窗整体移动，从结构上杜绝跑位，无需任何 JS 抵消。
   配合 common.js bindMobileKeyboardAvoidance（聚焦输入框即 scrollIntoView 进可视区）兜底。
   桌面定尺布局零影响。 */
.dhv-mask { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dhv-modal { margin: auto; max-height: none; overflow-y: visible; }
/* IP 档案库弹窗：桌面 830×1060 定尺改为手机端自然高（编辑视图 5 个输入框不再被定高+居中顶到键盘下沿） */
.dhv-modal.dh-ip-modal { width: 94vw; height: auto; min-height: 0; max-height: none; }
/* compound 变体的桌面 max-height 在此重述压制（手机端生效；.dh-add-modal 已于上方同款处理） */
.dhv-modal.sup-modal { max-height: none; }
/* 二级菜单弹窗（.kk-modal.dhv-modal，遮罩是 .kk-modal-mask 不是 .dhv-mask）同款：遮罩滚动 + 弹窗不自身滚 */
.kk-modal-mask { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.kk-modal.dhv-modal { margin: auto; max-height: none; overflow-y: visible; }

/* 2026-10-22 用户要求：资产/数字人选择类弹窗卡片手机端一行两个（桌面列数不动） */
.dhp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 「选择我的数字人」弹窗（#dhMyAvMask，真正的数字人库）：桌面基础 8 列、
   7627 行 #dhMyAvMask .dh-myav-grid 压成 4 列；手机端 2 列（同 ID+类特异性，后加载取胜） */
#dhMyAvMask .dh-myav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 「选择我的数字人」卡片点「查看」弹出预览层（.dh-myav-preview 挂在 body，z-index:300）；
   手机端 .dhv-mask 已提到 1400，预览反被压到遮罩下一层 → 提到 1500 盖过遮罩与底部标签栏(1300) */
.dh-myav-preview { z-index: 1500; }

/* 2026-10-23 用户要求：视频复刻「选择文件 / 资产库」两个按钮，手机端由上下堆叠改为水平并排、等宽。
   仅作用于手机端（本文件作用域）；桌面端仍走 style.css 的竖向堆叠（窄卡防折行）。
   特异性与 style.css:8890 同为 (0,3,0)，本文件后加载取胜；按钮 flex:1 等宽、gap 12px。 */
.vr-stage .vr-up-row .gv-up-actions { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 10px; width: 100%; }
.vr-stage .vr-up-row .gv-up-actions .pv-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }

/* 2026-10-23 R259：数字人手机端「左右滑屏切换步骤」的滑入动画。
   手势（dh-swipe.js）触发复用现有 goToPage 切换，本动画给刚显出来的那屏（.dh-left / .dh-ph
   由 data-dhsub 控制 display 显隐，none→block 时播一次）加轻量右滑入，强化「滑动切换」手感；
   统一从右滑入（模拟前进），不区分方向（纯 CSS 无法感知 swipe 方向）；桌面端本文件不生效。 */
.dh-stage .dh-wrap .dh-left,
.dh-stage .dh-wrap .dh-ph { animation: dhPageIn .26s ease; }
@keyframes dhPageIn { from { opacity: .35; transform: translateX(26px); } to { opacity: 1; transform: none; } }

  /* ============================================================
     分销中心(dist.html) / 代理中心(portal.html) · 手机端改版（2026-10-23）
     结构：页头（返回+标题+退出）→ 内容卡片流 → 底部 5/6 等分 Tab → 右下悬浮球（3 跨页入口）
     - 侧栏导航 #sideNav 改固定底部 Tab：JS 零改（active 类/点击/hash/持久化逻辑原样复用）
     - 侧栏 logo 行与原底部 4 链接行隐藏；退出登录移页头图标；快捷入口进悬浮球
     - 备案号隐藏（用户 2026-10-23 要求）；内容底部留白让位 Tab 栏
     - 桌面端：新增 DOM 由各页 inline style 的 display:none 基础规则隐藏，本文件 ≤760 才生效
     ============================================================ */
  /* 顶部 chrome：隐藏侧栏残余（logo/底部链接行），.admin-side 塌缩为 0 高（nav 已 fixed 出去） */
  .admin-side { height: 0; padding: 0; border: none; overflow: visible; }
  .admin-side .side-logo, .admin-side .side-foot { display: none; }
  /* 侧栏导航 → 底部 Tab 栏（2026-10-23 二改：用户报代理中心 6 项太挤 → 横滑，一屏 5 个）
     改法：overflow visible→x auto（nav 自身横滚，不影响页面竖滚）；每项 flex:0 0 20%
     ——5 项（分销中心）正好铺满无滑动，6 项（代理中心）第 6 个屏外左滑可见；
     scroll-snap proximity 轻量吸附；激活项由各页 JS 滚入可视区（dist-boot/portal）。 */
  .admin-side .side-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; flex-direction: row; gap: 0;
    box-sizing: border-box; height: calc(54px + env(safe-area-inset-bottom, 0px));
    padding: 6px 4px env(safe-area-inset-bottom, 0px);
    background: #fff; border-top: 0.5px solid #EBEDF0;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity;
  }
  .admin-side .side-nav::-webkit-scrollbar { display: none; }
  .admin-side .side-item {
    flex: 0 0 20%; scroll-snap-align: start;
    min-width: 0; margin: 0; padding: 0; white-space: nowrap;
    flex-direction: column; justify-content: center; align-items: center; gap: 2px;
    font-size: 11px; color: #9A9088; border-radius: 8px; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .admin-side .side-item:active { background: #F5F6F8; }
  .admin-side .side-item .ico { width: 21px; height: 21px; }
  .admin-side .side-item.active { color: #FF6A2B; font-weight: 500; background: transparent; }
  [data-theme='dark'] .admin-side .side-nav { background: #181B21; border-top-color: #2A2E36; }
  [data-theme='dark'] .admin-side .side-item { color: #7B828C; }
  [data-theme='dark'] .admin-side .side-item:active { background: #20242C; }
  [data-theme='dark'] .admin-side .side-item.active { color: #FF8A4C; }

  /* 页头：返回 + 居中标题 + 退出图标；隐藏 headUser（手机端省空间，身份在用户中心看）
     选择器加 body 前缀：dist.html / portal.html 的内联 <style>（排在 mobile.css <link> 之后）
     有同特异性的 .admin-topbar .tb-back{display:none}，后加载会盖住本规则 → 提一档 (0,2,1) 确保显示 */
  .admin-topbar { padding: 8px 10px; min-height: 46px; gap: 6px; position: sticky; top: 0; z-index: 800; }
  body .admin-topbar .tb-back, body .admin-topbar .tb-logout {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border-radius: 9px;
    border: 0.5px solid #EBEDF0; background: #fff; color: #646A73;
    -webkit-tap-highlight-color: transparent;
  }
  .admin-topbar .tb-back:active, .admin-topbar .tb-logout:active { background: #F5F6F8; }
  .admin-topbar h1#secTitle { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 15px; margin: 0; }
  .admin-topbar .top-right { display: none; }
  [data-theme='dark'] .admin-topbar .tb-back, [data-theme='dark'] .admin-topbar .tb-logout {
    background: #181B21; border-color: #2A2E36; color: #9AA1AC;
  }

  /* 内容区：上 12 / 下让位 Tab 栏（54 + 18 呼吸 + 安全区）；备案号隐藏（2026-10-23 用户要求） */
  body .admin-content { padding: 12px 12px calc(72px + env(safe-area-inset-bottom, 0px)); }
  .admin-content .site-footer { display: none; }

  /* ---------- 右下悬浮球（跨页快捷入口：创作中心 / 用户中心 / 代理中心或分销中心） ----------
     body 前缀原因同页头：dist/portal 内联 <style> 的 .dist-fab{display:none} 同特异性且后加载，
     不加前缀会被盖住 → 手机端悬浮球不显示（2026-10-23 用户报，已部署版复现） */
  body .dist-fab { display: block; }
  .dist-fab-mask {
    position: fixed; inset: 0; background: rgba(20, 22, 28, .45); z-index: 940;
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  .dist-fab.on .dist-fab-mask { opacity: 1; pointer-events: auto; }
  .dist-fab-menu {
    position: fixed; right: 14px; z-index: 950;
    bottom: calc(128px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
    /* ★ 2026-10-26 关键修复：收起状态下容器必须 pointer-events:none。
       它是一块约 200×250 的透明矩形，一直悬在右下角 —— 代理中心「分站信息」里的
       「续费」按钮正好落在它下面，于是手指点的其实是这块空容器：既不打开菜单，
       也点不到续费，表现就是「手机上点续费完全没反应」（电脑端没有这个悬浮球，所以正常）。
       子项 .dist-fab-item 收起时本来就是 pointer-events:none，但容器自己会吞点击。 */
    pointer-events: none;
  }
  .dist-fab.on .dist-fab-menu { pointer-events: auto; }
  .dist-fab-item {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
    background: #fff; border: 0.5px solid #EBEDF0; border-radius: 24px;
    padding: 9px 15px 9px 12px; font-size: 13px; font-weight: 500; color: #1D2129;
    box-shadow: 0 4px 16px rgba(20, 24, 32, .10);
    opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .dist-fab.on .dist-fab-item { opacity: 1; transform: none; pointer-events: auto; }
  .dist-fab-item:active { background: #F7F8FA; }
  .dist-fab-item .ico { width: 16px; height: 16px; color: #FF6A2B; flex: none; }
  .dist-fab-btn {
    position: fixed; right: 14px; z-index: 950;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    width: 52px; height: 52px; border-radius: 50%; border: none;
    background: #FF6A2B; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(255, 106, 43, .36);
    -webkit-tap-highlight-color: transparent;
  }
  .dist-fab-btn:active { transform: scale(.94); }
  .dist-fab-btn .ico { width: 22px; height: 22px; }
  [data-theme='dark'] .dist-fab-item { background: #181B21; border-color: #2A2E36; color: #E6E8EB; }
  [data-theme='dark'] .dist-fab-item:active { background: #20242C; }

  /* ---------- 内容卡片重排（原桌面多栏布局手机端二维化） ---------- */
  /* Hero：竖排；兑换引流卡降为横条；提现按钮通栏（大触摸目标） */
  .du-hero { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; border-radius: 14px; }
  .du-hero-main { width: 100%; }
  .du-hero-num { font-size: 30px; }
  .du-hero-cv {
    margin: 0; width: 100%; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: space-between; gap: 6px 10px; padding: 9px 12px;
  }
  .du-hero-cv-btn { padding: 7px 20px; }
  .du-hero-btn { width: 100%; text-align: center; padding: 11px 0; border-radius: 12px; }
  /* 三色须知条（2026-10-23 用户要求改回一行）：dist-ui.css 的 980px 断点会把 .du-notice 改成
     单列竖排（桌面太宽时的合理回落），手机端 375px 三列每格约 114px 够用，显式恢复 3 列并收紧
     字号/padding；nowrap 防「3个工作日内」「未满额暂不可提」折行撑高卡片 */
  .du-notice { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
  .du-notice-item { padding: 8px 7px; border-radius: 9px; }
  .du-notice-h { font-size: 10.5px; white-space: nowrap; }
  .du-notice-v { font-size: 13px; margin-top: 2px; white-space: nowrap; }
  .du-notice-t { font-size: 10px; margin-top: 2px; white-space: nowrap; }
  /* 指标卡：5 列 → 2 列（第 5 张通栏）；team-grid-334 的 12 列跨span 重置 */
  .du-metric-grid, .du-metric-grid.du-metric-5, .du-metric-grid.team-grid-334 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .du-metric-grid.du-metric-5 > :nth-child(5) { grid-column: span 2; }
  .du-metric-grid.team-grid-334 > :nth-child(-n+6),
  .du-metric-grid.team-grid-334 > :nth-child(n+7) { grid-column: auto; }
  .du-metric { padding: 10px 12px; border-radius: 10px; }
  .du-metric-val { font-size: 19px; }
  /* 数据看板：三栏 → 单列堆叠；趋势图降高 */
  .du-dash-grid { grid-template-columns: 1fr; gap: 9px; }
  .du-chart { height: 120px; }
  .du-card { padding: 12px; border-radius: 12px; }
  /* 提现双卡操作区：单列（dist-ui.css >980 才双列，此处兜底 portal 内联 768 断点之前） */
  .du-2col { grid-template-columns: 1fr; gap: 10px; }
  /* 表单控件全宽 + 加大触摸目标 */
  .form-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .form-row > label { width: auto; }
  .wd-amount-field { width: 100%; }
  .wd-amount-input { width: 100%; height: 42px; }
  .wd-rules { gap: 6px; }
  .text-input { height: 42px; }
  .d-btn { min-height: 42px; padding: 10px 18px; }
  .wd-flow-steps { gap: 6px; }
  /* 表格横向滑动（触摸惯性） */
  .du-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- 实用工具（kit）手机端：2 列卡片墙（2026-10-31） ----------
     窄屏下 auto-fill minmax(216px) 会退化成 1 列（386-24=362 < 432），
     手机必须显式两列；角标从绝对定位改回流内，否则会压住卡片名。 */
  .kit-wrap { padding: 10px 12px calc(72px + env(safe-area-inset-bottom)); }
  /* 最近使用 / 常用工具：手机端两块 chips 收紧一档（本次生成已改右侧抽屉，不在这里） */
  .kit-blks { flex-direction: column; gap: 8px; margin: 0 0 12px; }
  .kit-blk { padding: 10px 11px 11px; border-radius: 11px; }
  .kit-chip { font-size: 11.5px; padding: 6px 10px 6px 8px; }
  .kit-cat-hd { margin: 2px 0 10px; }
  .kit-cat-hint { display: none; }         /* 分类提示横排会挤掉计数 */
  .kit-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .kit-card { padding: 11px 11px 10px; border-radius: 11px; }
  .kit-card:hover { transform: none; box-shadow: none; }
  .kit-card-name { font-size: 13px; padding-right: 0; }
  .kit-card-desc {
    font-size: 11.5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .kit-card-badge { position: static; align-self: flex-start; margin-top: 2px; }
  .kit-foot { margin-top: 14px; font-size: 11px; }

  /* ---------- 实用工具 · 工具面板（2026-10-31 P0 批次；同日改弹窗形态后重写） ----------
     桌面 2 列表单在手机上会被压成 82px 标签 + 极窄控件，必须改单列；
     弹窗在手机上整屏铺满（居中浮层 + 24px 内边距会白白吃掉一圈可用高度），
     头部保持横排（关闭按钮要留在右上角），双栏改单列上下堆叠。 */
  .kit-modal { padding: 10px; z-index: 1400; }
  /* 层级口径同站内弹窗标准：遮罩必须高过底部标签栏 .mobile-tabbar(1300)，
     否则全屏后底栏被标签栏压住、按钮点不到（.work-modal-mask 1350 / .dhv-mask 1400 同理）。
     看图放大层再高一层，保持「子弹窗在父弹窗之上」。 */
  .kit-zoom { z-index: 1450; }
  .kit-panel { max-width: none; max-height: none; height: 100%; border-radius: 16px; }
  /* 手机已经是整屏铺满（height:100%），桌面那条「1.5 倍高 = 640px」的 min-height 必须撤掉：
     横屏只有 375 高时它会把弹窗顶出屏幕，底栏按钮就点不到了 */
  .kit-panel.is-file { min-height: 0; }
  .kit-tool-hd { padding: 13px 14px 11px; gap: 10px; }
  .kit-tool-ico { width: 32px; height: 32px; border-radius: 9px; }
  .kit-tool-ico .ico { width: 17px; height: 17px; }
  .kit-tool-title { font-size: 15px; }
  .kit-tool-desc { font-size: 12px; }
  .kit-body { padding: 12px 14px 14px; gap: 12px; }
  /* ★ 手机双栏必须「不伸缩」：基础规则带 flex:1 1 auto，窄屏下 .kit-body 高度不够时
     .kit-cols 会被压短，而左栏 .kit-drop 仍有 min-height:200px → 内容溢出左栏、叠到右栏上
     （用户反馈「上传框和生成框重叠」正是这个）。改成 flex:0 0 auto 让双栏按内容自然高度排，
     不够就由 .kit-body 滚动，绝不再压短溢出。 */
  .kit-cols { grid-template-columns: 1fr; gap: 14px; flex: 0 0 auto; align-content: start; }
  .kit-files { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .kit-out-list { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  /* 手机上 2 / 3 列都只剩 102~158px，「文件名 + 体积」挤一行会把文件名截成「1-1-…」，
     而文件名正是「第几块 / 哪一张」的唯一标识 ⇒ 一律改成上下两行 */
  .kit-out-list[data-cols="2"], .kit-out-list[data-cols="3"] { gap: 7px; }
  .kit-out-list[data-cols="2"] .kit-out-meta, .kit-out-list[data-cols="3"] .kit-out-meta {
    flex-direction: column; align-items: stretch; gap: 1px; padding: 6px 7px 4px;
  }
  .kit-out-list[data-cols="2"] .kit-out-meta b, .kit-out-list[data-cols="3"] .kit-out-meta b { font-size: 11px; }
  .kit-out-list[data-cols="2"] .kit-out-meta span, .kit-out-list[data-cols="3"] .kit-out-meta span { font-size: 10px; }
  .kit-out-list[data-cols="2"] .kit-dl, .kit-out-list[data-cols="3"] .kit-dl {
    width: calc(100% - 12px); margin: 0 6px 6px; font-size: 11.5px;
  }
  .kit-file-thumb img, .kit-out-thumb img { max-height: 300px; }
  .kit-drop { padding: 20px 12px; }
  .kit-drop-t { font-size: 13px; }
  .kit-form { grid-template-columns: 1fr; gap: 10px; }
  .kit-f { grid-template-columns: 84px minmax(0, 1fr); gap: 3px 8px; }
  .kit-f-tip { grid-column: 2; }
  .kit-act { flex-wrap: wrap; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .kit-run { flex: 1 0 100%; min-height: 42px; }
  .kit-hint { font-size: 11.5px; }
  .kit-out-meta b { font-size: 12px; }
  .kit-dl { min-height: 32px; }
  .kit-dl-all { flex: 1 0 100%; justify-content: center; min-height: 42px; }
  .kit-size { margin-left: 0; flex: 1 0 100%; text-align: right; font-size: 11.5px; }
  .kit-table th { width: 86px; font-size: 12px; }
  .kit-table td { font-size: 12px; }

  /* ---------- 实用工具 · 第二批（文本类 / 结果文本） ----------
     ★ 输入框字号必须 ≥16px：iOS Safari 对 <16px 的输入控件会在聚焦时
       自动放大整页（用户会以为页面崩了），桌面那套 12.5px 不能直接沿用。 */
  .kit-f-area { grid-template-columns: 1fr; }
  .kit-f-area .kit-f-l { flex-wrap: wrap; font-size: 13px; }
  .kit-f-area textarea { min-height: 132px; font-size: 16px !important; line-height: 1.6; }
  .kit-f-c { position: relative; }
  .kit-f-c input[type="text"], .kit-f-c input[type="number"], .kit-f-c select { font-size: 16px; height: 38px; }
  /* 手机原生 <select> 在 iOS/Android 上用系统控件字号渲染选中文字，会比同字号 input 明显大；
     appearance:none 强制它与 input 用同一套 CSS 字号渲染（文字字号一致），再用 ::after 画一枚随主题变色的箭头补回下拉指示 */
  .kit-f-c select { -webkit-appearance: none; appearance: none; padding-right: 30px; line-height: normal; }
  .kit-f-c:has(select)::after {
    content: ''; position: absolute; right: 14px; top: 50%;
    width: 8px; height: 8px; margin-top: -4px; pointer-events: none;
    border-right: 1.5px solid var(--fg-muted, #8F959E);
    border-bottom: 1.5px solid var(--fg-muted, #8F959E);
    transform: rotate(45deg);
  }
  .kit-pre { max-height: 260px; font-size: 12.5px; }
  .kit-pre-hd { flex-wrap: wrap; gap: 6px; }
  .kit-pre-hd span { flex: 1 1 auto; }
  .kit-md { max-height: 320px; padding: 2px 12px; font-size: 14px; }

} /* /@media (max-width: 760px) —— 2026-10-21 手机端批次作用域收口 */