/* ============================================================
   宏智获客 · 手机 App 版皮肤
   ------------------------------------------------------------
   风格来源: Gitee 上部署的那份 index.html 本身。颜色/背景/功能一律引用它
   自己的令牌, 不另立一套; 本文件只负责「把桌面版重新排布成手机版」。

   落地方式: 本文件加载在原 index.html 的 <style> 之后, 只做「覆盖」,
   不删改原站任何规则 —— 原站逻辑(接口/工作台/云剪辑/数字人/高精/充值)
   一行不动, 只是被重新排布成 App 的样子。
   ============================================================ */

/* ---------- 1. 设计变量 ----------
   全部取自 Gitee 部署版 index.html 自己的令牌, 一处都不另立新色。
   用户口径: 「是现在部署在gitee的风格, 排版你先自己适应, 但是颜色背景功能不要错」。
   所以这里只做尺寸/安全区这类 App 才有的东西, 颜色一律引用部署版原值:
     --bar/--on/--onbd/--hair   ← .nav-item / .nav-item.active
     --glass/--glass-bd/--credits ← .plan-badge / .plan-badge .p2
     --panel                    ← .wb-panel 的 #0d0d13
     --g1/--g2                  ← .login-submit 的 linear-gradient(90deg,#7c5cff,#b05cff)
     --avatar                   ← .side-avatar 的琥珀径向渐变
     --warn                     ← v328 .trial-pill 的 #facc15
   原来我自创的紫金 4 色配色(体例来自新中台登录页)整个删掉了 —— 那是错的口径。 */
:root{
  --appbar-h: 52px;
  --tabbar-h: 58px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --radius: 16px;

  --bar:       rgba(2,2,2,.92);            /* 顶/底栏玻璃底, 承 body 的 --bg:#020202 */
  --on:        rgba(255,255,255,.14);      /* .nav-item.active 底 */
  --onbd:      rgba(255,255,255,.28);      /* .nav-item.active 边 */
  --hair:      rgba(255,255,255,.06);      /* .nav-item 边 */
  --hair2:     rgba(255,255,255,.07);      /* .wb-panel 边 */
  --glass:     rgba(255,255,255,.07);      /* .plan-badge 底 */
  --glass-bd:  rgba(255,255,255,.12);      /* .plan-badge 边 */
  --credits:   #4cc3ff;                    /* .plan-badge .p2 算力字色 */
  --panel:     #0d0d13;                    /* .wb-panel 底 */
  --panel-2:   rgba(18,18,22,.92);         /* .login-modal 底 */
  --g1:        #7c5cff;                    /* .login-submit 渐变起点 */
  --g2:        #b05cff;                    /* .login-submit 渐变终点 */
  --avatar:    radial-gradient(circle at 35% 30%, #ffe08a, #f5a623 72%);  /* .side-avatar */
  --warn:      #facc15;                    /* v328 .trial-pill 试用期 */
  --warn-line: rgba(250,204,21,.45);
  --warn-bg:   rgba(250,204,21,.07);
}

/* ---------- 2. 全局底色 / 关掉桌面端会出现的横向滚动 ----------
   底色一律交回原站: body 本来就是 background:var(--bg) = #020202,
   各页 .wb-page 也自带 #050508。这里只补 overflow-x, 不再覆写任何背景。 */
html.app-shell, html.app-shell body{
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}
html.app-shell body{ padding-bottom:0; }

/* 我原来在这里铺了一层紫金「光晕 + 网格」App 底噪(学新中台登录页),
   会和部署版的纯黑底打架, 整个关掉。元素仍由 app.js 建着, 只是不画。 */
#appBg{ display:none !important; }

/* ---------- 3. 隐藏桌面端外壳 ---------- */
html.app-shell .sidebar,
html.app-shell .hero-center{ display:none !important; }

/* ---------- 4. 顶部 App Bar ---------- */
#appBar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:calc(var(--appbar-h) + var(--safe-t));
  padding-top:var(--safe-t);
  display:none; align-items:center; gap:10px;
  padding-left:14px; padding-right:12px;
  /* 部署版侧栏 .sidebar 本身是「无底色, 浮在内容上」; 顶栏要常驻所以给一层近黑玻璃,
     取的就是部署版的底色 --bg:#020202, 不是我自己调的藏青 */
  background:linear-gradient(180deg, var(--bar), rgba(2,2,2,.62) 70%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
html.app-shell #appBar{ display:flex; }
#appBar .ab-back{
  width:32px; height:32px; flex:none; border:none; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.06); color:#fff; font-size:calc(17/16*1rem); line-height:1;
  display:none; align-items:center; justify-content:center;
}
#appBar.has-back .ab-back{ display:flex; }
#appBar .ab-title{
  flex:1; min-width:0; color:#fff; font-size:calc(17/16*1rem); font-weight:600;
  letter-spacing:.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#appBar .ab-credits{
  flex:none; display:flex; align-items:center; gap:5px;
  height:30px; padding:0 11px; border-radius:99px; cursor:pointer;
  /* 对齐部署版 .plan-badge / .plan-badge .p2: 白玻璃底 + 青色算力数字 */
  background:var(--glass); border:1px solid var(--glass-bd);
  color:var(--credits); font-size:calc(12.5/16*1rem); font-weight:600;
}
/* v328 的试用期胶囊 #sideTrial 被搬进顶栏(挂在算力胶囊左边, 见 app.js buildShell)。
   它的原样式是给侧栏那种密排栏位用的 10.5px(≈8.5 实际px), 放进顶栏太小看不清 ——
   这里只放大字号/内距, 颜色(琥珀字 + .on 时亮起)和显隐逻辑仍然是站点自己那一份。 */
#appBar .side-trial{
  margin-right:2px; flex:none;
  padding:4px 10px; gap:5px;
  font-size:calc(13.5/16*1rem);
}
#appBar .side-trial b{ font-size:calc(15/16*1rem); font-weight:800; }
#appBar .side-trial i{ width:6px; height:6px; }

#appBar .ab-avatar{
  width:32px; height:32px; flex:none; border-radius:50%; cursor:pointer;
  /* 对齐部署版 .side-avatar: 琥珀径向渐变 + 2px 白描边, 不是我原来的紫渐变 */
  background:var(--avatar); border:2px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:calc(13/16*1rem); font-weight:700;
}

/* ---------- 5. 底部 Tab 栏 ---------- */
#appTabs{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:none; align-items:stretch;
  background:linear-gradient(0deg, rgba(2,2,2,.97), rgba(2,2,2,.86));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--hair);
}
html.app-shell #appTabs{ display:flex; }
/* 底部 Tab 就是部署版侧栏 .nav-item 的手机形态, 配色逐项对齐:
     闲态  .nav-item{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06)}
            .nav-item .lbl{color:var(--text-aaa)}          → #aaaaaa
     激活  .nav-item.active{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28)}
            .nav-item.active .lbl{color:#fff}              → 白字 + 白玻璃胶囊
   部署版导航里没有任何品牌色, 我原来把激活态涂成紫色是错的。 */
#appTabs .tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; cursor:pointer; border:none; background:none; padding:6px 0;
  color:var(--text-aaa); font-size:calc(10.5/16*1rem); font-family:inherit;
  transition:color .2s;
}
#appTabs .tab svg{
  width:23px; height:23px; padding:5px; box-sizing:content-box; border-radius:11px;
  border:1px solid transparent;
  stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s, background .2s, border-color .2s;
}
#appTabs .tab.on{ color:#fff; }
#appTabs .tab.on svg{
  background:var(--on); border-color:var(--onbd); transform:translateY(-1px) scale(1.06);
}
#appTabs .tab.on span{ font-weight:600; }
#appTabs .tab:active svg{ transform:scale(.92); }

/* ---------- 6. 内容区: 让原来的「页面」变成 App 的屏幕 ----------
   只挪位置, 不动 background —— 部署版 .wb-page 自带 #050508, #introPage 还另有
   v319 的深蓝紫环境底。我原来在这儿写了 background:transparent, 结果「我的」
   面板整个透出底下的首页。 */
html.app-shell .wb-page{
  top:calc(var(--appbar-h) + var(--safe-t));
  bottom:calc(var(--tabbar-h) + var(--safe-b));
  left:0; right:0;
}
/* 「我的」是我自建的面板, 底色取部署版 .wb-page 的 #050508 */
html.app-shell #appMine{ background:#050508; }

/* ---------- 7. 首页 ---------- */
html.app-shell .hero{ min-height:auto !important; height:auto !important; padding-bottom:6px; }
html.app-shell .hero-scene{ position:relative !important; inset:auto !important; height:46vh; min-height:250px; }
html.app-shell .hero-fade{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, transparent 0%, var(--bg) 92%);
  height:130px;
}
/* 注意: 这里必须是 relative 不能是 static —— .hero-scene 是 relative(定位元素),
   会盖在所有 static 内容之上; 只有同样是定位元素 + z-index 才能压在视频上面。 */
html.app-shell .hero-center{
  position:relative !important; inset:auto !important; display:block !important;
  pointer-events:auto !important; padding:0 18px; margin-top:-96px;
  z-index:12;
}
/* 桌面版是 100/16rem 的毛笔巨字, 手机上必须压到可读尺寸 */
html.app-shell .hero-title{
  margin:0 0 12px !important; gap:7px !important;
  justify-content:center; letter-spacing:1px;
  font-size:calc(30/16*1rem) !important;
}
html.app-shell .hero-title .ht-solid{ font-size:calc(44/16*1rem) !important; }
html.app-shell .hero-title .ht-dim{ font-size:calc(28/16*1rem) !important; }
html.app-shell .hero-title .ht-dot{ font-size:calc(20/16*1rem) !important; transform:translateY(-5px) !important; }
html.app-shell .hero-cta{
  display:block; width:100% !important; margin:0 auto !important;
  height:46px !important; border-radius:99px !important;
  font-size:calc(15/16*1rem) !important;
}

/* 功能卡: 桌面是绝对定位的 5 列一排 → 手机改成正常流的 2 列网格 */
html.app-shell .feature-row{
  position:static !important; left:auto !important; right:auto !important;
  bottom:auto !important; width:100% !important;
  display:grid !important; grid-template-columns:1fr 1fr;
  gap:11px !important; padding:18px 14px 8px !important;
  align-items:stretch !important;
}
html.app-shell .feature-card{ flex:none !important; width:auto !important; height:auto !important; }
html.app-shell .feature-card .cover-wrap{ height:112px !important; }

html.app-shell .footer{
  padding:26px 18px calc(var(--tabbar-h) + var(--safe-b) + 20px) !important;
  text-align:center; font-size:calc(11/16*1rem); line-height:1.9;
}
html.app-shell .footer span{ display:block; }

/* ---------- 8. 数字人: 左右两栏 → 上下两栏 ----------
   桌面 #dhzCanvas 是 row flex: 预览台(flex:1) + 侧栏(.dhz-cv-side{width:380px;flex:none})。
   手机上可用宽度只有 278px(外层两道 28px padding), 380+22 塞不下 →
   侧栏把预览台压成 **0 宽**(用户完全看不到预览), 自己还溢出到屏幕外被 .wb-page 裁掉
   (实测右侧被切 68px, 19 个元素)。改成上下堆叠, 并让整页滚动而不是套内层滚动条。 */
html.app-shell .dhz-cv{ flex-direction:column; gap:14px; height:auto !important; margin-top:0; }
html.app-shell .dhz-cv-stage{ width:100%; }
html.app-shell .dhz-cv-side{ width:100% !important; max-width:100%; flex:none; overflow:visible; height:auto; }
/* 预览框原宽 min(410px,100%,(100vh-140px)*9/16) —— 手机上要按"手机可用高度"重算,
   否则 9:16 会算成 729px 高, 挤掉下面全部操作区。留出顶栏+Tab栏+操作区。 */
html.app-shell .dhz-cv-frame{ width:min(410px, 100%, calc((100vh - 260px)*0.5625)) !important; }
html.app-shell .dhz-cv-frame[data-ratio="16:9"]{ width:min(600px, 100%) !important; }
/* v329 往这一行塞了第 3 个孩子(.trial-bar: 试用胶囊 + ✦正式版 按钮, 约 200px)。
   .dhz-cv-top 是 space-between 且**不换行**, 三段加起来 450px+ 塞进 390px →
   末尾的 #dhzCvMode(视频数字人/高端定制 切换)被顶出屏外 61px, 用户再也切不了模式。
   允许换行即可: 第一行 品牌+胶囊, 第二行 模式切换。 */
html.app-shell .dhz-cv-top{ flex-wrap:wrap; row-gap:10px; }

/* ---------- 9. 高精创作: 4 列网格 → 2×2 ----------
   .hqz-steps / .hq-igrid 都是 repeat(4,1fr), 桌面每张 270px;
   390px 上每张只剩 81.5px(实测步卡高 542px), 正文被压成"一个字一行"的竖排。
   改成 2 列后每张约 175px, 正常横排阅读。 */
html.app-shell .hqz-steps,
html.app-shell .hq-igrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* 步卡里还有第二层坑: .ct / .cd 写死 padding-right:100px 给右侧插图让位 ——
   桌面每张 270px 时刚好, 手机上双列只有 155px, 减掉 100px 只剩 25px 正文,
   照样是"一个字一行"(实测 .ct 文本框 125px 里只有 25px 能写字, 卡高撑到 370px)。
   这里把插图缩成右上角 34x44 缩略图, 标题让开它、正文整宽并下移到缩略图之下,
   三者互不遮挡。.hq-igrid(创作灵感)没有这 100px, 一行不用动。 */
html.app-shell .hqz-ccard{ min-height:0; padding:12px 13px; gap:8px; }
html.app-shell .hqz-ccard .cthwrap{ width:34px; height:44px; right:10px; top:12px; transform:rotate(6deg); }
html.app-shell .hqz-ccard .ct,
html.app-shell .hqz-ccard .cd{ padding-right:0; }
/* .ct 的 min-height 必须 >= 缩略图高(44), 正文才会落在缩略图下方而不是横穿过去 */
html.app-shell .hqz-ccard .ct{ font-size:calc(15/16*1rem); padding-right:38px; min-height:44px; }
html.app-shell .hqz-ccard .cd{ font-size:calc(11.5/16*1rem); }

/* ---------- 9b. 高精创作·流程页(四步向导) ----------
   点步卡进来的是独立页 #hqFlowPage, 桌面是 左导航固定 260px + gap 28px + 右表单 的双栏。
   350px 画布上 260+28 被导航全吃掉 —— 实测表单只剩 34px、正文竖排, 而且内容 469px
   撑出 119px 横向滚动, 一划就整页左移(实测导航跑到 x=-95 屏幕外)。
   这个页面以前只能从侧栏进, 而 App 把 .sidebar 整个 display:none 了, 所以在 App 里
   从来没人打开过, 也就一直没适配。
   改法: 导航由 260px 竖列改成 2×2 网格(与步卡页同构)、表单拿整宽, 顶栏允许换行。 */
html.app-shell #hqFlowPage .wb-canvas > div{ padding:12px 14px 32px; }
/* 桌面顶栏是 返回创作 | 标题+试用条 | ✕关闭 三件一排, 手机上挤成竖排 -> 换行 */
html.app-shell #hqFlowPage .wb-canvas > div > div:first-child{ flex-wrap:wrap; row-gap:10px; }
/* 标题+试用胶囊+正式版 独占第一行(居中), 返回创作 / ✕关闭 落到第二行两端 */
html.app-shell #hqFlowPage .wb-canvas > div > div:first-child > span{
  order:-1; width:100%; justify-content:center; flex-wrap:wrap; row-gap:8px; }
html.app-shell .hqz-flowwrap{ flex-direction:column; gap:14px; }
html.app-shell #hqFlowSteps{ width:auto; align-self:stretch;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
html.app-shell #hqFlowBody{ width:100%; max-width:none; }

/* ---------- 10. 充值/会员计划页 ----------
   桌面 .billing-page 是 left:var(--sidebar-w) 的整页, 里面 .bp-top 是 3 列账号卡、
   .bp-plans 4 列套餐、.bp-pack-grid 3 列加油包、.bp-credit-grid 是 gap:30 的横排。
   App 里侧栏是隐藏的, 但它仍按侧栏宽度右移, 于是整页偏出去、内容还被桌面列数挤扁
   (实测套餐说明被压成 41px 宽、一个字一行)。这里占满 App 内容区并降到 2 列。
   z-index 保持低于顶栏/底栏(80), 让两条栏始终压在它上面、点得到。 */
html.app-shell .billing-page{
  left:0; right:0;
  top:calc(var(--appbar-h) + var(--safe-t));
  bottom:calc(var(--tabbar-h) + var(--safe-b));
  padding:14px 14px 18px;
}
html.app-shell .bp-top{ grid-template-columns:1fr; }
html.app-shell .bp-plans,
html.app-shell .bp-pack-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
html.app-shell .bp-credit-grid{ gap:18px; flex-wrap:wrap; }
html.app-shell .bp-tabs{ flex-wrap:wrap; }

/* ---------- 11. 工作台 / 云剪辑 / 数字人: 面板 396px → 整屏 ---------- */
html.app-shell .wb-page{ flex-direction:column; }
html.app-shell .wb-panel{
  width:100% !important; margin:0 !important;
  border-radius:0 !important; border-left:none !important; border-right:none !important;
  border-top:none !important;
  max-height:52vh; flex:none;
}
html.app-shell .wb-canvas{ flex:1 1 auto; min-height:0; }
/* 手机窄屏把两道 28px 边距收窄: 390px 上原本只剩 278px 可用(28+28 全白扔),
   内容窄到 数字人 预览台被压成 0 宽、云剪辑统计卡换行。收成 14px 后可用 334px。
   只动站点自己的页, 不碰 #appMine(它自带 16/14 的内距)。 */
html.app-shell .wb-canvas{ padding-left:14px !important; padding-right:14px !important; }
html.app-shell .wb-page:not(#appMine) .wb-canvas > div{
  padding-left:0 !important; padding-right:0 !important;
}
html.app-shell .wb-body{ padding:12px 14px !important; }
html.app-shell .wb-prompt textarea{ min-height:104px; font-size:calc(14/16*1rem); }
html.app-shell .wb-row{ font-size:calc(13.5/16*1rem); }

/* v328 给云剪辑顶部加了一枚「试用剩余 X 天」胶囊(.trial-pill, flex:none + nowrap)。
   桌面是 标题 | 胶囊 | 统计卡(margin-left:auto) 一行排开, 390px 上必然横向挤爆 ——
   改成两行: 第一行 标题 + 试用期胶囊, 第二行 统计卡整行横滑。 */
html.app-shell .sp-head{
  flex-wrap:wrap !important; row-gap:12px !important; padding:16px !important;
  margin-bottom:12px !important;
  /* 必须钉住不许压缩: .wb-canvas 是纵向 flex 且内容(1935px)远高于视口(734px),
     于是每个子项都按 flex-shrink:1 被压 —— 别项靠「min-height:auto = 内容高」自保,
     唯独 .sp-head 同时挂着 .pv-hero{overflow:hidden}, 自动最小尺寸被算成 0,
     于是它被从 132px 压到 34px, 而我改成两行的统计卡正好在 34px 之外被裁掉。
     所以这里直接钉 flex-shrink:0 不许压 (overflow:hidden 要留着, 靠它把 .pv-bg 裁进圆角)。 */
  flex-shrink:0 !important;
}
html.app-shell .sp-head .sp-title{ font-size:calc(19/16*1rem) !important; }
html.app-shell .sp-head .trial-pill{ margin-left:auto; }
html.app-shell .sp-head .sp-stats{
  margin-left:0 !important; width:100% !important;
  padding-bottom:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
html.app-shell .sp-head .sp-stat{ min-width:88px !important; padding:8px 14px !important; }

/* 进出场按钮位置: 手机端底部要避开 Tab 栏 */
html.app-shell .wb-close,
html.app-shell .clip-close,
html.app-shell .dh-close{ top:calc(var(--appbar-h) + var(--safe-t) + 8px) !important; }

/* ---------- 9. 弹层在手机上铺满 ---------- */
html.app-shell .overlay .login-modal,
html.app-shell .overlay .pay-modal{
  width:min(94vw, 460px) !important; max-height:88vh; overflow:auto;
}

/* ---------- 10. 登录 / 注册 全屏页 ----------
   照「新中台」登录页的版式: 深底 + 主视觉视频 + 圆角卡片 + 胶囊按钮 + 配色圆点 + 公司行 */
html.app-shell #loginOverlay{
  display:none;                 /* 只在 .show 时出现; 少了这行登录页会一直盖着首页 */
  /* 顶部留安全区: iPhone 刘海会压住 hero 视频; bottom 也留, 免得矮屏时底部按钮够不着 */
  padding:var(--safe-t) 0 var(--safe-b);
  overflow-y:auto; overscroll-behavior:contain;
  z-index:200;
  /* 必须自带不透明底: 否则会透出底下的首页 hero 视频, 变成一片亮色。
     部署版这里是弹窗底 rgba(0,0,0,.72)+blur(10px), 会透出后面的内容;
     App 版它是一整屏, 所以把那层加深到近乎不透明(仍用部署版的纯黑, 不加品牌色)。 */
  background:rgba(2,2,2,.97);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
html.app-shell #loginOverlay.show{ display:block; }
html.app-shell #loginOverlay .login-modal{
  width:100% !important; max-width:none !important;
  min-height:100vh; min-height:100dvh; margin:0; border-radius:0;
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:var(--safe-t) 0 var(--safe-b);
  display:flex; flex-direction:column;
}
/* 登录页打开时收起 AI 客服悬浮件(它会压在页脚上) */
html.app-shell body:has(#loginOverlay.show) #xmFab,
html.app-shell body:has(#loginOverlay.show) #xmTip,
html.app-shell body:has(#loginOverlay.show) #xmWin{ display:none !important; }
html.app-shell #loginOverlay .ov-close{
  color:rgba(255,255,255,.6); font-size:calc(19/16*1rem); z-index:5;
  top:calc(var(--safe-t) + 8px) !important; right:14px !important;
}

/* 主视觉视频 */
.app-auth-hero{
  flex:none; margin:8px 16px 0; border-radius:var(--radius); overflow:hidden;
  background:#000; height:31vh; min-height:196px; max-height:300px; position:relative;
  box-shadow:0 16px 44px rgba(0,0,0,.5);
}
.app-auth-hero video{ width:100%; height:100%; object-fit:cover; display:block; }

/* 卡片: 高度随内容, 不要把卡片拉长留一片空白 */
.app-auth-card{
  flex:none; margin:-26px 12px 0; position:relative; z-index:2;
  background:var(--panel); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--hair2); border-radius:22px;
  padding:16px 16px 18px;
}
/* 登录框标题: 部署版是 .login-modal h3 / .sub, 这里只补手机上的字号 */
.app-auth-card h3{
  margin:0 0 4px; text-align:center; color:#fff;
  font-size:calc(19/16*1rem); font-weight:800; letter-spacing:.5px;
}
.app-auth-card .sub{
  text-align:center; color:rgba(255,255,255,.5);
  font-size:calc(12.5/16*1rem); margin-bottom:16px;
}

.app-fld{ margin-bottom:12px; }
.app-fld input{
  width:100%; box-sizing:border-box; height:46px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; color:#fff; padding:0 13px;
  font-family:inherit; font-size:calc(15/16*1rem); outline:none; transition:.2s;
}
.app-fld input::placeholder{ color:rgba(255,255,255,.3); }
.app-fld input:focus{ border-color:rgba(124,92,255,.7); background:rgba(255,255,255,.08); }
.app-fld .pwd{ position:relative; }
.app-fld .pwd input{ padding-right:46px; }
.app-fld .eye{
  position:absolute; right:4px; top:0; height:46px; width:42px;
  border:none; background:none; cursor:pointer; color:rgba(255,255,255,.5);
  font-size:calc(17/16*1rem);
}

.app-submit{
  width:100%; height:48px; margin-top:6px; border:none; border-radius:99px;
  cursor:pointer; font-family:inherit; font-size:calc(16/16*1rem); font-weight:700;
  letter-spacing:2px; color:#fff;
  background:linear-gradient(90deg, var(--g1), var(--g2));
  box-shadow:0 10px 26px -8px var(--g1); transition:.2s;
}
.app-submit:active{ transform:scale(.985); }
.app-submit:disabled{ opacity:.6; }

/* 页脚: margin-top:auto 让它贴屏幕底。
   ⚠ 这里原来是个残缺规则 —— 上一版删「配色圆点」时把大括号先闭合了,
   后面那几行 flex/center/font-size/color 成了游离声明被浏览器整段丢弃,
   页脚于是既不居中也没有颜色。已并回同一条规则里。 */
.app-auth-foot{
  margin-top:auto; flex:none; text-align:center; padding:6px 16px 16px;
  font-size:calc(11/16*1rem); color:rgba(255,255,255,.3); letter-spacing:.3px;
}

/* ---------- 11. 「我的」面板 ---------- */
html.app-shell #appMine{ overflow-y:auto; }
/* 🔴 v605 修「充值兑换码下面还有东西但滑不动」：.wb-page.show 是 display:flex(纵向)，
   #appMine 又是 overflow:auto ⇒ 里面的 .wb-canvas 是 flex:1(flex-basis:0) 的 flex 子项，
   高度被钉死成容器高，子项溢出的那一截**不算进父容器的 scrollHeight**
   （实测 390x600：最后一项在 y=713、容器只到 544，scrollHeight 却仍等于 clientHeight 496 ⇒ 滑不动）。
   把这一页改成块级：高度由内容决定，溢出正常计入滚动区，条目再多也能滑到底。 */
html.app-shell #appMine.show{ display:block !important; }
.am-card{
  background:var(--panel); border:1px solid var(--hair2); border-radius:20px;
  padding:16px 16px 14px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.am-top{ display:flex; align-items:center; gap:12px; }
.am-av{
  width:52px; height:52px; flex:none; border-radius:50%;
  /* 对齐部署版 .side-avatar(琥珀径向渐变 + 白描边), 与顶栏头像同一套 */
  background:var(--avatar); border:2px solid rgba(255,255,255,.28); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(20/16*1rem); font-weight:700;
}
.am-id{ flex:1; min-width:0; }
.am-name{ color:#fff; font-size:calc(16.5/16*1rem); font-weight:600; }
.am-phone{ color:rgba(255,255,255,.42); font-size:calc(12.5/16*1rem); margin-top:3px; }
.am-login{
  flex:none; height:34px; padding:0 16px; border:none; border-radius:99px; cursor:pointer;
  /* 对齐部署版 .side-login 的蓝 #3b82f6 */
  background:#3b82f6; color:#fff;
  font-family:inherit; font-size:calc(13.5/16*1rem); font-weight:600;
}
.am-credits{
  margin-top:14px; padding:13px 14px; border-radius:14px; position:relative;
  background:rgba(255,255,255,.045); border:1px solid var(--hair2);
}
.am-c-n{ color:var(--credits); font-size:calc(26/16*1rem); font-weight:700; line-height:1.1; }
.am-c-l{ color:rgba(255,255,255,.42); font-size:calc(11.5/16*1rem); margin-top:5px; }
.am-c-btn{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  height:34px; padding:0 16px; border:none; border-radius:99px; cursor:pointer;
  background:linear-gradient(90deg, var(--g1), var(--g2)); color:#fff;
  font-family:inherit; font-size:calc(13.5/16*1rem); font-weight:600;
}
.am-list{
  margin-top:14px; background:var(--panel); border:1px solid var(--hair2);
  border-radius:16px; overflow:hidden;
}
.am-item{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:15px 15px; border:none; background:none; cursor:pointer;
  color:rgba(255,255,255,.88); font-family:inherit; font-size:calc(14.5/16*1rem);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.am-item:last-child{ border-bottom:none; }
.am-item:active{ background:rgba(255,255,255,.05); }
.am-item .ext{ color:rgba(255,255,255,.3); font-size:calc(15/16*1rem); }
/* 「退出登录」不另设颜色: 部署版 .am-item.out 本身不带 color(文字仍是白 .85,
   只在 hover 时给 rgba(255,80,80,.12) 的红色底), 我原来给它加过一个淡红字色, 属自创, 已删。 */
.am-foot{
  text-align:center; color:rgba(255,255,255,.26);
  font-size:calc(11/16*1rem); padding:24px 0 12px;
}

/* 首页内容让开顶部 App Bar
   原站是 #homeView{height:100vh; overflow-y:auto} 自己滚 —— 在 App 里它上下会被
   App Bar(52+safe-t) 和 Tab 栏(58+safe-b) 盖住, 页面滚到底也永远有最后 ~58px 看不见
   (实测 footer 底边落在 y=890 > 视口 844, 备案号那行翻不出来)。
   所以把它改成"只占两条栏之间那一条带", 由它自己在带内滚动。 */
html.app-shell #homeView{
  position:fixed;
  top:calc(var(--appbar-h) + var(--safe-t));
  bottom:calc(var(--tabbar-h) + var(--safe-b));
  left:0; right:0;
  height:auto; min-height:0;
  padding-top:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

/* 页脚: 桌面那 120px 上内边距是给绝对定位的功能卡让位的, App 里功能卡已回到正常流,
   120px 只剩一大块空白。

   v351b(2026-09-15 用户「下面两句往上移动不要下面留下那么多黑色背景」):
   原来这里下内边距写着 92px(+ tabbar + safe-b = 150px), 本意是把备案号那行"顶"到小茂
   气泡上面。 **顶不动** —— 页脚文字永远贴着 padding-TOP 那一侧, 加下内边距只是把盒子拉长:
   实测盒子底边 813 > 内容带底 734, 于是 #homeView 变成可滚动的(scrollHeight 761 /
   clientHeight 682), 手指一滑页脚整块往上跑, 带底留 71px 纯黑 —— 就是用户看到的那块。
   改法: #homeView 变纵向 flex, 页脚 margin-top:auto 贴着带底"停靠", 那多出来的 61px 交给
   hero 的视频区吸收(卡片顺势往下移一点), 带底只留 10px。
   结果: ① 页面不再滚动(内容高 == 带高) ② 带底没有黑边 ③ 两行页脚正好停在 Tab 栏上方
        ④ 不会再被小茂挡住(气泡 655~708 已自行收起, 小茂圆钮 718~770 偏右, 与居中两行字左右错开)。
   内容超过一带时(矮屏) flex-grow 退化成 0, 照旧由 #homeView 自己滚 —— 行为与从前一致。 */
html.app-shell #homeView{ display:flex; flex-direction:column; }
html.app-shell #homeView > .hero{ flex:1 0 auto; display:flex; flex-direction:column; }
html.app-shell .hero-scene{ flex:1 1 auto; }        /* 视频区吸收多余高度, 别让它变成黑边 */
html.app-shell .hero-center,
html.app-shell .feature-row{ flex:none; }
html.app-shell #homeView > footer.footer{
  flex:none; margin-top:auto;
  padding:26px 20px 10px !important;
}

/* ---------- 12. AI 客服小茂: 抬到 Tab 栏之上, 别压住导航 ---------- */
html.app-shell #xmFab{
  right:12px; bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);
  width:52px; height:52px;
}
html.app-shell #xmTip{
  right:74px; bottom:calc(var(--tabbar-h) + var(--safe-b) + 26px);
  max-width:196px;
}
html.app-shell #xmWin{
  left:8px; right:8px; width:auto;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 8px);
  height:62vh;
}

/* ---------- 13. 矮屏 / 横屏 兜底 ---------- */
@media (max-height:700px){
  html.app-shell .hero-scene{ height:34vh; }
  .app-auth-hero{ aspect-ratio:21/9; }
}
@media (min-width:820px){
  /* 平板/桌面打开 app 子域时, 居中成手机宽度, 不要拉成两栏 */
  html.app-shell body{ max-width:520px; margin:0 auto; }
  #appBar, #appTabs{ max-width:520px; left:50%; transform:translateX(-50%); }
}

/* ---------- 14. 云剪辑预览: 跟成片一样「裁切铺满」 ---------- */
/* 站点版(v300)要求 contain —— 完整缩放、比例不符处留黑边; 但**成片**走的是后端 ffmpeg 的
   scale=W:H:force_original_aspect_ratio=increase,crop=W:H (按所选比例居中裁切铺满),
   于是点「生成」前看到的画面 ≠ 下载到的画面, 而且两条字幕浮层(#clipSubPrevKou 贴底 /
   #clipSubPrevGu 贴顶, 都绝对定位在 .clip-screen 上)会掉进黑边里 —— 用户报的「字幕出画面了」。
   改成 cover 后预览与成片同一取景, 浮层自然落在画面上。
   ⚠️ 必须 !important: 站点版 <video id="clipPreview"> 的内联 style 写着 object-fit:contain,
      且 clipRatioTagSync() 每次(开页/换比例/窗口 resize)还会 v.style.objectFit="contain" 再写一遍,
      普通声明压不过内联, 只有作者样式表里的 !important 压得过。
   网页端不引用本文件 → 网页端仍是原来的 contain, 零改动。 */
#clipPreview{ object-fit:cover !important; }

/* ============================================================
   v343 (2026-09-14) 高精两处样式 (App 专属)
   ------------------------------------------------------------
   ① v343b: 去掉第3步「声音年龄」那行的**试听按钮**。
      用户原话「高精创作的年龄是给ai的提示词不是确定的修改…高精的年龄不要试听」。
      为什么用 CSS 隐藏而不是删 HTML: app/index.html 是 genapp.mjs 的**生成物**,
      直接删那段结构 → 下次重跑生成器会被覆盖回去(且第 8 处版本戳那种一致性也会乱)。
      app.css 是 App 专属、不参与生成, 藏在里面才是稳的。
      ⚠️ 只藏 CSS **不够**: 那一行是 grid `1fr auto; gap:10px`, 按钮 display:none 后 auto
      轨道确实塌成 0, 但 **gap 还在** → 实测下拉 144px / 整行 154px, 右边留一条 10px 空白。
      纯 CSS 选不到父元素去收这个 gap(除非用 :has(), 不想赌 WebView 版本), 所以几何那块
      交给 app.js 的 hqAudStrip(): 把按钮节点整个摘掉 + 把父行改成单列零间距。
      这里这条 CSS 仍然要留着 —— 它在解析期就生效, 挡住"先画出按钮、JS 才摘掉"的一帧闪烁。
   ------------------------------------------------------------
   ② v343: .hqz-ghost 的**播放/忙碌态**高亮。
      站点版压根没有这条规则 —— .hqz-ghost 只有 base / :hover / svg 三条
      (见 index.html 的 .hqz-ghost 块), 所以哪儿加了 "on" 类都不会有视觉变化。
      配色与旁边 .hqz-mode.on 逐字一致。
      原先给「试听」按钮用(v343 覆写了 hqAudition 让它全程保持 .on), v343b 试听按钮
      去掉后, 这条规则现在只服务「重新生成本镜」的忙碌态。保留不删。
   网页端不引用本文件 → 网页端零改动。 */
.hqz-ghost.on{
  border-color:rgba(167,139,250,.6);
  background:rgba(139,92,246,.15);
  color:#fff;
  box-shadow:0 0 14px rgba(167,139,250,.15);
}
/* v343b: 高精第3步「声音年龄」的试听按钮 —— 用户要求去掉。这里只负责"别闪出来",
   节点由 app.js 的 hqAudStrip() 摘掉(见上方说明: 光藏 CSS 收不掉那一行的 10px gap)。 */
#hqAudBtn{ display:none !important; }
/* v343: 高级分镜卡片里的「重新生成本镜」—— 复用 .hqz-ghost 皮肤, 只在卡片内占整行 */
.hq-shot-regen{ margin-top:10px; }

/* ============================================================
   v343c (2026-09-14) AI视频页改成「整页一起滚」(App 专属)
   ------------------------------------------------------------
   用户: 「手机app ai视频板块做成整体滑动不要上半部分滑动」。

   实测(362×792 手机视口)的现状:
     #workbenchPage 自己 overflow:hidden → **整页不能滚**(内容 1286 / 可视 682);
     .wb-panel 被 `max-height:52vh` 封顶在 412px, 里面 .wb-body 自己滚(可视 342 /
       内容 543) —— 这就是用户说的「只有上半部分滑动」;
     .wb-canvas 被 `flex:1` 钉死在下半 270px。
   顺带挖出一个更严重的: 塞一张 600px 高的成片卡进去, top=738 而页面底是 734 ——
     **成片出来后在手机上整个在可视区之外, 而且页面不能滚, 滑也滑不到**。
     (口径: overflow:hidden 挡的是手指, 不挡程序化 scrollTop 赋值, 所以"JS 能滚"
      不等于"用户能摸到"。)

   改法: 把 #workbenchPage 变成**唯一**滚动容器, 面板/画布都回到自然高度。
   ⚠️ 每条都必须用 #workbenchPage 收窄 —— 上面第 11 节那几条(`.wb-panel`/`.wb-canvas`)
      是**工作台/云剪辑/数字人共用**的, `.wb-canvas` 更是全站 7 个页面都在用。
      离线逐元素对拍(改前改后各快照 10 个 .wb-canvas/.wb-body/.wb-panel 的计算样式):
      恰好 3 处变化, 全在 #workbenchPage 内, **其它页面 0 处变化**。

   副作用(已跟用户说明并获同意): .wb-footbar(生成按钮底栏)本来是常驻钉在面板底部的,
     整页滚动后它落到输入区末尾 —— 开页时仍可见(底栏 595→664, 在可视区 52→734 内),
     但往下滚去看成片时会跟着滚走。试过 position:sticky;bottom:0, **实测无效**:
     滚到底时它随面板一起滚出(sticky 被限制在自身容器内), 要真正常驻得改 fixed 悬浮条。
   网页端不引用本文件 → 网页端零改动。 */
html.app-shell #workbenchPage{ overflow-y:auto; }
html.app-shell #workbenchPage .wb-panel{ max-height:none !important; }
html.app-shell #workbenchPage .wb-body{ overflow-y:visible; }
html.app-shell #workbenchPage .wb-canvas{ flex:none; }

/* ---------------- 12. 语音输入麦克风 (App 专属, v370) ----------------
   只作用在 app.js 造出来的 .asr-mic 上 —— 网页端不加载 app.js, 这些元素根本不存在。
   几何照 .clip-aud(index.html:1353, 24px / 圆角 7px), 但**另起自有类名**:
   .clip-aud 和 .clip-btn 都被 #clipPage 作用域圈着, 跨到工作台/高精页复用会带进样式耦合。
   闲态素色描边, 录音中变红并就地展开成「12/30s」, 识别中转圈 —— 站内既有 4 处录音
   (数字人那个 42px 圆点) 用的也是「红=在录」这套语言, 不另发明。 */
.asr-mic{
  flex:none; width:27px; height:27px; padding:0; display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer;
  border-radius:8px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  transition:border-color .2s, background .2s;
  -webkit-tap-highlight-color:transparent;
}
.asr-mic svg{ width:14px; height:14px; stroke:rgba(255,255,255,.6); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.asr-mic:hover{ border-color:rgba(53,224,224,.5); }
.asr-mic:disabled{ opacity:.65; }

/* 录音中 */
.asr-mic.asr-rec{
  width:auto; padding:0 9px; gap:6px;
  border-color:#ef4444; background:rgba(239,68,68,.18);
  animation:asrPulse 1.2s ease-in-out infinite;
}
.asr-mic.asr-rec svg{ stroke:#fca5a5; }
.asr-mic.asr-rec::after{
  content:attr(data-sec); font-size:11px; line-height:1; color:#fca5a5;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
@keyframes asrPulse{ 0%,100%{opacity:1} 50%{opacity:.55} }

/* 识别中 */
.asr-mic.asr-busy{ border-color:rgba(53,224,224,.5); background:rgba(53,224,224,.12); }
.asr-mic.asr-busy svg{ stroke:#35e0e0; animation:asrSpin 1s linear infinite; }
@keyframes asrSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* 挂法一: 在框下面新起一行、右对齐(云剪辑/高精那几个) */
.asr-row{ display:flex; justify-content:flex-end; margin-top:6px; }
/* 挂法二: 浮在框内右下角(.wb-prompt 自己是 position:relative) */
.wb-prompt > .asr-mic{ position:absolute; right:10px; bottom:9px; }
/* 浮上去就会盖住最后一行字 —— 把框的下内边距让出来 */
html.app-shell .wb-prompt textarea{ padding-bottom:34px; }

/* ---------- v381(2026-09-19) 云剪辑窄屏: 摘掉三栏自己那层内滚动 ----------
   站点在 @media (max-width:1120px) 里已经想把三栏改成 `overflow-y:visible`
   (部署版 index.html 第 309 行), 但三栏各带**内联** `style="…;overflow-y:auto;…"`,
   内联非 !important 的优先级高于样式表 ⇒ 那条静默失效, 于是窄屏下:
     首页(.wb-canvas)一层滚动 + 右栏(配音/转场/字幕)再来一层 = 用户说的「两层滑动」。
   这里只在 App 外壳 + 窄屏下补上 !important, 与站点的本意一致;
   宽屏(>1120px)三栏是定高 930px 的横向布局, 那一层内滚动是**设计要的**, 不能碰。 */
@media (max-width:1120px){
  html.app-shell #clipPage .clip-layout>.clip-col{ overflow-y:visible !important; }
}

/* ============================================================
   v600 (2026-10-25) 手机 App 版面重做（App 专属，网页端不加载本文件）
   ------------------------------------------------------------
   目标（胡总 2026-10-25）：
     · 版面协调，不要一条一条往下滑；每个任务尽量一屏做完。
     · 首页只留「开始创作」的四个工具 + 算力条；营销卡移到「我的」。
     · 底部 6 格 → 5 格：首页 / 云剪辑 / AI视频 / 数字人 / 我的；
       高精创作改为首页工具格（它本来就只有侧栏入口，App 侧栏是隐藏的）。
     · 云剪辑拆成「素材文案 / 预览生成」两步，生成行固定在预览步底部；
     · AI视频拆成「创作 / 作品」两视图，输入区一屏放下，成片单独看；
     · 高精创作收掉重复的试用条，创作灵感改成横向滑条。
   所有规则都挂在 html.app-shell 下；桌面网页不引用 app.css / app.js，零改动。
   ============================================================ */

:root{
  --appbar-h: 48px;
  --tabbar-h: 56px;
  --app-card:#11151f;
  --app-line:rgba(255,255,255,.085);
  --app-mut:rgba(255,255,255,.44);
  --app-g1:#6d8bff;
  --app-g2:#a06bff;
}

/* ---------- 1. 顶栏 / 底栏：收紧到 48 + 56 ---------- */
html.app-shell #appBar{ gap:8px; padding-left:12px; padding-right:10px; }
html.app-shell #appBar .ab-title{ font-size:calc(16/16*1rem); }
html.app-shell #appBar .ab-credits{ height:28px; padding:0 9px; font-size:calc(12/16*1rem); }
html.app-shell #appBar .side-trial{ padding:3px 8px; font-size:calc(11.5/16*1rem); }
html.app-shell #appBar .side-trial b{ font-size:calc(13/16*1rem); }
html.app-shell #appBar .ab-avatar{ width:30px; height:30px; }
html.app-shell #appBar .ab-back{ width:30px; height:30px; }

html.app-shell #appTabs{ border-top-color:rgba(255,255,255,.07); }
html.app-shell #appTabs .tab{ padding:4px 0 3px; gap:2px; font-size:calc(10/16*1rem); }
html.app-shell #appTabs .tab svg{ width:22px; height:22px; padding:4px; border-radius:9px; }
html.app-shell #appTabs .tab.on svg{ transform:translateY(-1px) scale(1.04); }

/* 关页按钮由顶栏返回键接管，页内那几枚不再重复占位 */
html.app-shell .wb-close,
html.app-shell .clip-close,
html.app-shell .dh-close{ display:none !important; }

/* ---------- 2. 首页：视频头图 + 工具 + 获客工作台 + 算力条，一屏 ---------- */
/* v604(2026-10-25 胡总「首页 UI 布局优化」)：头图由原来的「吃掉全部剩余高度」(实测 415px)
   压到约六成(≈245px)，把版面让给工具层级；标题缩小、加副标题小字。 */
html.app-shell #homeView{ overflow-y:auto; overflow-x:hidden; }
/* ⚠ 上面第 165 行有 `.hero{height:auto !important}`，这里必须同样 !important 才压得住 */
html.app-shell #homeView > .hero{
  flex:0 0 auto; height:clamp(190px,29vh,250px) !important; min-height:0 !important;
  display:block !important; position:relative; overflow:hidden; padding:0 !important;
}
/* 视频铺满整个头图区；标题压在底部渐变上，不再用负 margin 把内容顶出父级 */
html.app-shell .hero-scene{
  position:absolute !important; inset:0 !important;
  height:auto !important; min-height:0 !important; flex:none !important;
}
html.app-shell .hero-fade{ height:132px; }
/* 头图变矮后 object-fit:cover 会横切人物头顶，把取景框往上提一点，人脸保持完整 */
html.app-shell .hero-scene .hero-video{ object-position:50% 32%; }
html.app-shell .hero-center{
  position:absolute !important;
  left:0 !important; right:0 !important; top:auto !important;
  bottom:calc(15px + var(--safe-b)) !important;
  margin:0 !important; padding:0 16px !important; z-index:12;
}
html.app-shell .hero-title{ margin-bottom:0 !important; gap:9px !important; }
html.app-shell .hero-title .ht-solid{ font-size:calc(34/16*1rem) !important; }
html.app-shell .hero-title .ht-dim{ font-size:calc(21/16*1rem) !important; }
html.app-shell .hero-title .ht-latin{ font-size:calc(23/16*1rem) !important; }
html.app-shell .hero-cta{ display:none !important; }
/* 副标题：app.js buildHomeTools() 注入，压在主标题下方一行小字 */
html.app-shell .app-hero-sub{
  margin-top:7px; color:rgba(255,255,255,.66); text-align:center;
  font-size:calc(11.5/16*1rem); letter-spacing:.6px; line-height:1.4;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}

/* 桌面的五张营销功能卡不上首页；入口移到「我的」 */
html.app-shell .feature-row{ display:none !important; }
html.app-shell #homeView > footer.footer{ display:none !important; }

#appHomeTools{
  flex:none; padding:10px 14px calc(10px + var(--safe-b));
}
.app-tools-h{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin:0 2px 9px;
}
.app-tools-h b{ color:#fff; font-size:calc(15/16*1rem); font-weight:800; letter-spacing:.3px; }
.app-tools-h span{ color:var(--app-mut); font-size:calc(10.5/16*1rem); }
.app-tools{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.app-tool{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  min-height:106px; padding:12px 13px; border-radius:16px; overflow:hidden;
  border:1px solid var(--app-line); color:#fff; text-align:left; cursor:pointer;
  font-family:inherit; -webkit-tap-highlight-color:transparent;
  background:linear-gradient(150deg,rgba(109,139,255,.18),rgba(17,21,31,.96) 58%);
  transition:transform .15s;
}
.app-tool:active{ transform:scale(.98); }
/* 第一行「主推」：AI 视频 / 数字人 —— 卡片更大、边框发光 */
.app-tool.hot{
  min-height:124px; padding:13px 14px; gap:6px;
  border-color:rgba(139,124,255,.40);
  background:linear-gradient(150deg,rgba(109,139,255,.32),rgba(17,21,31,.94) 64%);
  box-shadow:0 0 0 1px rgba(139,124,255,.18), 0 10px 26px rgba(79,124,255,.22);
}
.app-tool.hot .ti{ width:38px; height:38px; border-radius:12px; }
.app-tool.hot .ti svg{ width:21px; height:21px; }
.app-tool.hot .tn{ font-size:calc(16.5/16*1rem); }
.app-tool.hot .td{ font-size:calc(11/16*1rem); color:rgba(255,255,255,.56); }
/* 第二行「辅助工具」：云剪辑 / 高精创作 —— 收矮收暗，不抢主推 */
.app-tool.sec{
  min-height:84px; padding:10px 12px; gap:4px;
  background:linear-gradient(150deg,rgba(109,139,255,.10),rgba(17,21,31,.96) 62%);
}
.app-tool.sec .ti{ width:27px; height:27px; border-radius:8px; }
.app-tool.sec .ti svg{ width:15px; height:15px; }
.app-tool.sec .tn{ font-size:calc(14/16*1rem); }
.app-tool.sec .td{ font-size:calc(10/16*1rem); color:rgba(255,255,255,.38); }
.app-tool.sec::after{ opacity:.5; }
.app-tool::after{
  content:""; position:absolute; right:-30px; top:-34px; width:110px; height:110px;
  border-radius:50%; background:rgba(160,107,255,.22); filter:blur(26px); pointer-events:none;
}
.app-tool .ti{
  width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(135deg,rgba(109,139,255,.38),rgba(160,107,255,.28));
  border:1px solid rgba(160,170,255,.28); position:relative; z-index:1;
}
.app-tool .ti svg{
  width:18px; height:18px; stroke:#e4e9ff; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.app-tool .tn{ position:relative; z-index:1; font-size:calc(14.5/16*1rem); font-weight:800; }
.app-tool .td{ position:relative; z-index:1; font-size:calc(10.5/16*1rem); line-height:1.45; color:rgba(255,255,255,.46); }

/* 获客工作台（v604 新增）：线索看板 / 素材库，两张横排卡片 */
.app-tools-h.app-ge-h{ margin-top:15px; }
.app-ge{ display:flex; flex-direction:column; gap:8px; }
.app-ge-card{
  position:relative; display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border-radius:14px; cursor:pointer; text-align:left;
  border:1px solid var(--app-line); color:#fff; font-family:inherit;
  -webkit-tap-highlight-color:transparent; transition:transform .15s;
  background:linear-gradient(90deg,rgba(76,195,255,.09),rgba(17,21,31,.94) 58%);
}
.app-ge-card:active{ transform:scale(.985); }
.app-ge-card .gi{
  width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:rgba(76,195,255,.12); border:1px solid rgba(76,195,255,.26);
}
.app-ge-card .gi svg{
  width:18px; height:18px; stroke:#7ad4ff; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.app-ge-card .gt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.app-ge-card .gt b{ font-size:calc(14/16*1rem); font-weight:800; }
.app-ge-card .gt i{ font-style:normal; font-size:calc(10.5/16*1rem); color:rgba(255,255,255,.42); }
.app-ge-card em{ font-style:normal; font-size:calc(18/16*1rem); line-height:1; color:rgba(255,255,255,.28); }

.app-balance{
  display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px;
  border-radius:14px; background:var(--app-card); border:1px solid var(--app-line);
}
.app-balance .bi{
  width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px;
  background:rgba(76,195,255,.11); border:1px solid rgba(76,195,255,.24);
  color:#4cc3ff; font-size:calc(14/16*1rem);
}
.app-balance .bl{ flex:1; min-width:0; }
.app-balance .bn{ display:block; color:#4cc3ff; font-size:calc(17/16*1rem); font-weight:800; line-height:1.1; }
.app-balance .bt{ display:block; color:rgba(255,255,255,.36); font-size:calc(10/16*1rem); margin-top:2px; }
/* 充值按钮放大 + 发光（v604：原来 34px 太小，用户要「放大、高亮」） */
.app-balance .bb{
  flex:none; height:40px; padding:0 21px; border:none; border-radius:99px; cursor:pointer;
  background:linear-gradient(90deg,#6d8bff,#a06bff); color:#fff;
  font-family:inherit; font-size:calc(14.5/16*1rem); font-weight:800; letter-spacing:.4px;
  box-shadow:0 6px 16px rgba(109,139,255,.46), inset 0 1px 0 rgba(255,255,255,.30);
}
.app-balance .bb:active{ transform:scale(.96); }

/* ---------- 3. 两段式切换条（云剪辑 / AI视频共用） ---------- */
.app-seg{
  flex:none; display:flex; gap:5px; padding:7px 14px 5px; background:#050508;
}
.app-seg button{
  flex:1; height:34px; display:flex; align-items:center; justify-content:center; gap:6px;
  border-radius:9px; border:1px solid rgba(255,255,255,.08); cursor:pointer;
  background:rgba(255,255,255,.035); color:rgba(255,255,255,.5);
  font-family:inherit; font-size:calc(12.5/16*1rem); font-weight:600;
  -webkit-tap-highlight-color:transparent;
}
.app-seg button.on{
  color:#fff; border-color:rgba(139,124,255,.52);
  background:linear-gradient(90deg,rgba(109,139,255,.22),rgba(160,107,255,.22));
}
.app-seg .dot{
  width:5px; height:5px; border-radius:50%; background:#7ce38b;
  box-shadow:0 0 6px rgba(124,227,139,.9);
}

/* ---------- 4. 云剪辑：素材文案 / 预览生成 两步 ---------- */
html.app-shell #clipPage{ display:none; flex-direction:column; overflow:hidden; }
html.app-shell #clipPage.show{ display:flex; }
html.app-shell #clipPage .wb-canvas{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  overflow:hidden !important; padding:7px 12px 8px !important;
}
html.app-shell #clipPage .sp-head{ display:none !important; }
html.app-shell #clipPage .clip-layout{
  display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-height:0;
  height:auto !important; overflow:hidden;
}
html.app-shell #clipPage .clip-layout>.clip-col{ display:contents; }

/* 第一步：模式 / 上传 / 文案 / 段内指示 / 素材库 */
html.app-shell #clipPage .clip-modetab{ flex:none; height:36px; padding:3px; }
html.app-shell #clipPage .clip-modetab .mt{ padding:6px 0; font-size:calc(12/16*1rem); }
html.app-shell #clipPage #clipUploadPanel{ flex:none !important; padding:10px !important; }
html.app-shell #clipPage #clipUploadPanel .cp-title{ font-size:calc(12/16*1rem); }
html.app-shell #clipPage .clip-upload{ padding:11px 10px !important; }
html.app-shell #clipPage #clipCopyPanel{
  flex:1 1 auto !important; min-height:0; display:flex !important; flex-direction:column;
  padding:10px !important;
}
html.app-shell #clipPage #clipCopyPanel .cp-title{ font-size:calc(12/16*1rem); }
html.app-shell #clipPage #clipCopy{
  flex:1 1 auto !important; height:auto !important; min-height:96px;
}
html.app-shell #clipPage #clipIndPanel{ flex:none !important; padding:8px 10px !important; }
html.app-shell #clipPage #clipIndPanel .cp-title{ font-size:calc(11.5/16*1rem); }
html.app-shell #clipPage .clip-layout>.clip-col:nth-child(3)>.clip-panel{
  flex:none !important; padding:10px !important;
}
html.app-shell #clipPage .clip-layout>.clip-col:nth-child(3)>.clip-panel .cp-title{
  font-size:calc(11.5/16*1rem);
}
html.app-shell #clipPage .clip-mats{
  flex-direction:row !important; max-height:none !important; overflow-x:auto !important;
  overflow-y:hidden !important; gap:7px !important; padding-bottom:2px;
}
html.app-shell #clipPage .clip-mat{ flex:0 0 auto; min-width:132px; max-width:164px; }

/* 第二步：预览 + 生成行 */
html.app-shell #clipPage .clip-layout>.clip-col:nth-child(2)>.clip-panel,
html.app-shell #clipPage .clip-layout>.clip-col:nth-child(3)>div:first-child,
html.app-shell #clipPage #clipGenState{ display:none !important; }
html.app-shell #clipPage[data-step="2"] .clip-modetab,
html.app-shell #clipPage[data-step="2"] #clipUploadPanel,
html.app-shell #clipPage[data-step="2"] #clipCopyPanel,
html.app-shell #clipPage[data-step="2"] #clipIndPanel,
html.app-shell #clipPage[data-step="2"] .clip-layout>.clip-col:nth-child(3)>.clip-panel{
  display:none !important;
}
html.app-shell #clipPage[data-step="2"] .clip-layout>.clip-col:nth-child(2)>.clip-panel{
  display:flex !important; flex:1 1 auto !important; min-height:0; padding:10px !important;
}
html.app-shell #clipPage[data-step="2"] .clip-layout>.clip-col:nth-child(2)>.clip-panel .clip-screen{
  flex:1 1 auto !important; min-height:0;
}
html.app-shell #clipPage[data-step="2"] .clip-layout>.clip-col:nth-child(3)>div:first-child{
  display:flex !important; flex:none !important; align-items:center; gap:8px;
  margin:0 !important; padding:0 1px;
}
html.app-shell #clipPage[data-step="2"] .clip-layout>.clip-col:nth-child(3)>div:first-child>span{
  font-size:calc(10.5/16*1rem); white-space:nowrap;
}
html.app-shell #clipPage[data-step="2"] .clip-try{ min-height:42px; flex:none; padding:0 11px; }
html.app-shell #clipPage[data-step="2"] .clip-export{ min-height:42px; flex:1; padding:0 10px; white-space:nowrap; }
html.app-shell #clipPage[data-step="2"] #clipGenState{ display:block !important; flex:none !important; }

/* 第一步底部的「下一步」主按钮 */
#appClipNext{
  position:fixed; left:14px; right:14px;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 8px);
  height:46px; z-index:74; display:none; align-items:center; justify-content:center;
  border:none; border-radius:14px; cursor:pointer; color:#fff;
  background:linear-gradient(90deg,var(--app-g1),var(--app-g2));
  font-family:inherit; font-size:calc(15/16*1rem); font-weight:800;
  box-shadow:0 10px 26px -10px rgba(109,139,255,.9);
}
html.app-shell #clipPage[data-step="1"] #appClipNext{ display:flex; }
html.app-shell #clipPage[data-step="1"] .wb-canvas{ padding-bottom:62px !important; }
/* 第一步内容比一屏略高（素材库最后 30~40px），允许在内容区里轻滑，别把素材库切掉 */
html.app-shell #clipPage[data-step="1"] .clip-layout{ overflow-y:auto !important; }

/* ---------- 5. AI视频：创作 / 作品 两视图 ---------- */
html.app-shell #workbenchPage{
  display:none; flex-direction:column; overflow:hidden !important;
}
html.app-shell #workbenchPage.show{ display:flex; }
html.app-shell #workbenchPage .wb-panel{
  flex:1 1 auto !important; min-height:0; max-height:none !important;
  margin:0 !important; border:none !important; border-radius:0 !important;
}
html.app-shell #workbenchPage .wb-body{
  flex:1 1 auto !important; min-height:0; overflow-y:auto !important;
  padding:8px 12px 10px !important;
}
html.app-shell #workbenchPage .wb-prompt textarea{
  min-height:72px !important; height:72px; font-size:calc(13.5/16*1rem);
  padding-bottom:30px;
}
html.app-shell #workbenchPage .wb-prompt.sm textarea{ min-height:52px !important; height:52px; }
html.app-shell #workbenchPage .wb-row{ margin-top:6px; font-size:calc(12.5/16*1rem); }
html.app-shell #workbenchPage .wb-est{ margin:6px 0 !important; }
html.app-shell #workbenchPage .wb-footbar{ flex:none !important; padding:8px 12px 10px !important; }
html.app-shell #workbenchPage .wb-gen{ height:44px; }
html.app-shell #workbenchPage .wb-canvas{
  flex:1 1 auto; min-height:0; overflow-y:auto !important;
  padding:8px 12px 10px !important; display:none;
}
html.app-shell #workbenchPage[data-view="result"] .wb-panel{ display:none !important; }
html.app-shell #workbenchPage[data-view="result"] .wb-canvas{ display:flex !important; }
html.app-shell #workbenchPage[data-view="result"] .wb-empty{ flex:1 1 auto; min-height:0; }
html.app-shell #workbenchPage[data-view="result"] .wb-empty video{ max-height:58vh !important; }

/* ---------- 6. 高精创作：一屏放 4 个步卡 + 横向灵感条 ---------- */
html.app-shell #hqPage .wb-canvas{
  display:flex; flex-direction:column; overflow:hidden !important;
  padding:8px 12px 10px !important;
}
html.app-shell #hqPage .wb-canvas>div{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  justify-content:space-evenly; padding:6px 0;
}
html.app-shell #trialBarHq{ display:none !important; }
#appHqHero{ flex:none; padding:0 2px 10px; }
#appHqHero b{ display:block; color:#fff; font-size:calc(17/16*1rem); font-weight:800; letter-spacing:.3px; }
#appHqHero span{ display:block; color:var(--app-mut); font-size:calc(11/16*1rem); margin-top:3px; }
html.app-shell #hqPage .hqz-steps{ flex:none; margin:0 0 10px !important; gap:9px; }
html.app-shell #hqPage .hqz-ccard{ min-height:132px !important; padding:11px 12px !important; }
html.app-shell #hqPage .hqz-ccard .ct{ font-size:calc(14/16*1rem) !important; }
html.app-shell #hqPage .hqz-ccard .cd{ font-size:calc(10.5/16*1rem) !important; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
html.app-shell #hqPage #hqInsp{ flex:none; min-height:0; overflow:hidden; margin-top:0; }
html.app-shell #hqPage #hqInsp .hq-insp-head{ margin:0 0 7px !important; }
html.app-shell #hqPage #hqInsp .hq-insp-head h3{ font-size:calc(14/16*1rem) !important; }
html.app-shell #hqPage #hqInsp .hq-igrid{
  display:flex !important; grid-template-columns:none !important;
  overflow-x:auto; overflow-y:hidden; gap:8px !important; padding-bottom:3px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
html.app-shell #hqPage #hqInsp .hq-igrid::-webkit-scrollbar{ display:none; }
html.app-shell #hqPage #hqInsp .hq-icard{
  flex:0 0 174px !important; min-height:128px !important; padding:10px 11px !important; gap:4px;
}
html.app-shell #hqPage #hqInsp .hq-icard .it{ font-size:calc(12.5/16*1rem) !important; }
html.app-shell #hqPage #hqInsp .hq-icard .idesc{
  -webkit-line-clamp:3 !important; font-size:calc(10.5/16*1rem) !important; line-height:1.55 !important;
}

/* ---------- 7. 「我的」：营销入口从首页搬到这里 ---------- */
html.app-shell #appMine .am-item[data-feat] .ext{ font-size:calc(12/16*1rem); }

/* 首页不放 AI 客服浮标：小茂会压住算力条/充值按钮；入口保留在「我的」。
   其它页面仍照旧显示，不影响客服功能。 */
html.app-shell body.app-home #xmFab,
html.app-shell body.app-home #xmTip{ display:none !important; }

/* 数字人工坊：小茂的气泡/浮标会压住①卡「上传音频/视频素材」和⑥卡波形（2026-10-25 用户报
   「数字人板块很多按键重叠了」）。本页收起浮层，客服入口仍在「我的 → 在线客服」。
   ④卡右上角的「N 字」会画在「🔄 重新改写」按钮上面（SVG text 在 foreignObject 之后绘制）——
   原字隐藏，字数由 app.js 并进「👁 点击查看」按钮文案。 */
html.app-shell body.gh-workshop #xmFab,
html.app-shell body.gh-workshop #xmTip{ display:none !important; }
html.app-shell #ghPage #gh4Count{ display:none !important; }

/* ---------- 8. 矮屏兜底：首页工具卡再收一点 ---------- */
@media (max-height:720px){
  html.app-shell .app-tool{ min-height:94px; padding:10px 12px; }
  html.app-shell .app-tool .ti{ width:28px; height:28px; }
  html.app-shell #hqPage .hqz-ccard{ min-height:112px !important; }
  html.app-shell #workbenchPage .wb-prompt textarea{ min-height:62px !important; height:62px; }
  html.app-shell #workbenchPage .wb-prompt.sm textarea{ min-height:46px !important; height:46px; }
}

/* v602 去重叠（保留）：原图两枚装饰旋转环会压在③卡状态行/④卡「点击查看」上 */
html.app-shell #ghPage circle.spin{ display:none !important; }

/* ---------- 9. v603 数字人页新版面（顶部栏 + 底部全局操作栏） ----------
   版式主体在 app_index.html 的 GHM-MOBILE-ADAPT 里重排；这里只补 App 外壳上的两处：
   ① 顶栏标题改成简约渐变字 + 右侧「?」帮助按钮（仅本页、仅手机宽度）
   ② 底部固定操作栏「重置全部 / 开始生成 / 预览成片」，压在 App 底部 Tab 之上
   桌面宽度下一律不生效，保证网页端版式不动。 */
#appBar .ab-help{
  display:none; width:30px; height:30px; flex:none; align-items:center; justify-content:center;
  padding:0; border-radius:50%; cursor:pointer; font-family:inherit; line-height:1;
  border:1px solid rgba(126,240,255,.38); background:rgba(126,240,255,.10);
  color:#c8f6ff; font-size:calc(16/16*1rem); font-weight:800;
}
#appBar .ab-help:active{ background:rgba(126,240,255,.22); }
@media (max-width:560px){
  html.app-shell body.gh-workshop #appBar .ab-help{ display:flex; }
  html.app-shell body.gh-workshop #appBar .ab-title{
    font-size:calc(15/16*1rem); letter-spacing:.2px;
    background:linear-gradient(90deg,#7ef0ff,#a78bfa 55%,#f472b6);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}

#ghmBar{ display:none; }
@media (max-width:560px){
  html.app-shell body.gh-workshop #ghmBar{
    position:fixed; left:0; right:0; bottom:calc(var(--tabbar-h) + var(--safe-b));
    z-index:78; height:56px; display:flex; align-items:center; gap:9px;
    padding:7px 12px; box-sizing:border-box;
    background:linear-gradient(180deg, rgba(5,8,20,.88), rgba(2,2,2,.98));
    border-top:1px solid rgba(126,240,255,.18);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
}
html.app-shell #ghmBar .ghmb-ghost{
  flex:none; height:40px; padding:0 12px; border-radius:11px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  color:#c9d4ee; font-size:calc(13.5/16*1rem); font-weight:600; font-family:inherit; white-space:nowrap;
}
html.app-shell #ghmBar .ghmb-ghost:active{ background:rgba(255,255,255,.14); }
html.app-shell #ghmBar .ghmb-start{
  flex:1 1 auto; min-width:0; height:42px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(126,240,255,.62);
  background:linear-gradient(90deg,#4f7cff,#a855f7);
  color:#fff; font-size:calc(16.5/16*1rem); font-weight:800; font-family:inherit;
  box-shadow:0 6px 18px rgba(79,124,255,.42); letter-spacing:.5px;
}
html.app-shell #ghmBar .ghmb-start:active{ transform:translateY(1px); }

/* ══════════════════════ 11. AI 视频页 v604（胡总 2026-10-25 方案） ══════════════════════
   版面：快捷模板库 → ① 画面描述 → ② 口播配音(+音色) → ③ 视频参数配置(数字人/输出规格)。
   卡片只是把站点原有控件**包起来**（ID 一个没改），所以这里全部是外观规则。 */

/* 顶栏：星标收藏，只在 AI 视频页出现 */
#appBar .ab-star{
  display:none; width:30px; height:30px; flex:none; align-items:center; justify-content:center;
  padding:0; border-radius:50%; cursor:pointer; font-family:inherit; line-height:1;
  border:1px solid rgba(255,215,106,.34); background:rgba(255,215,106,.09);
  color:#ffd76a; font-size:calc(16/16*1rem);
}
#appBar .ab-star.on{ background:rgba(255,215,106,.20); box-shadow:0 0 10px rgba(255,215,106,.28); }
@media (max-width:560px){
  html.app-shell body.app-wb #appBar .ab-star{ display:flex; }
}
/* 小茂浮标原来正压着「生成视频」主按钮 —— 这一页收掉（与首页同一处理） */
html.app-shell body.app-wb #xmFab,
html.app-shell body.app-wb #xmTip{ display:none !important; }

#appWbCreate{ display:flex; flex-direction:column; gap:10px; padding-bottom:2px; }

/* ── 快捷模板库 ── */
.wbm-tpl-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 2px 8px; }
.wbm-tpl-h b{ color:#fff; font-size:calc(15/16*1rem); font-weight:800; letter-spacing:.3px; }
.wbm-tpl-h span{ color:rgba(255,255,255,.4); font-size:calc(10.5/16*1rem); }
.wbm-tpl-row{
  display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
  padding-bottom:3px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.wbm-tpl-row::-webkit-scrollbar{ display:none; }
.wbm-tpl-c{
  flex:0 0 auto; width:96px; height:58px; padding:0 10px; border-radius:12px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px;
  border:1px solid rgba(139,124,255,.26); color:#fff; font-family:inherit; text-align:left;
  background:linear-gradient(145deg,rgba(109,139,255,.26),rgba(18,22,34,.96));
  -webkit-tap-highlight-color:transparent; transition:transform .15s;
}
.wbm-tpl-c:active{ transform:scale(.96); }
.wbm-tpl-c b{ font-size:calc(13/16*1rem); font-weight:800; }
.wbm-tpl-c span{ font-size:calc(9.5/16*1rem); color:rgba(255,255,255,.46); }
.wbm-tpl-c:nth-child(2){ background:linear-gradient(145deg,rgba(80,200,255,.22),rgba(18,22,34,.96)); border-color:rgba(80,200,255,.24); }
.wbm-tpl-c:nth-child(3){ background:linear-gradient(145deg,rgba(255,170,90,.20),rgba(18,22,34,.96)); border-color:rgba(255,170,90,.22); }
.wbm-tpl-c:nth-child(4){ background:linear-gradient(145deg,rgba(120,230,180,.18),rgba(18,22,34,.96)); border-color:rgba(120,230,180,.20); }
.wbm-tpl-c:nth-child(5){ background:linear-gradient(145deg,rgba(230,140,255,.20),rgba(18,22,34,.96)); border-color:rgba(230,140,255,.22); }

/* ── 三张卡片 ── */
html.app-shell #workbenchPage .wbm-card{
  position:relative; padding:11px 11px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,rgba(109,139,255,.10),rgba(13,16,25,.97) 58%);
}
.wbm-h{ display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.wbm-h i{
  width:18px; height:18px; flex:none; display:grid; place-items:center; border-radius:6px;
  background:linear-gradient(135deg,#6d8bff,#a06bff); color:#fff;
  font-style:normal; font-size:calc(10.5/16*1rem); font-weight:800;
}
.wbm-h b{ color:#fff; font-size:calc(14/16*1rem); font-weight:800; }
.wbm-h span{ margin-left:auto; color:rgba(255,255,255,.32); font-size:calc(10/16*1rem); }
.wbm-sub{
  display:flex; align-items:center; gap:8px; margin:12px 0 2px;
  color:rgba(255,255,255,.52); font-size:calc(11/16*1rem); font-weight:700; letter-spacing:.4px;
}
.wbm-sub::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.08); }

/* 卡片内的原有控件：收一收外边距，别再撑出卡片 */
html.app-shell #workbenchPage .wbm-card .wb-prompt{ margin-top:8px !important; }
html.app-shell #workbenchPage .wbm-card .wb-prompt textarea{ height:74px; }
html.app-shell #workbenchPage .wbm-card .wb-prompt.sm textarea{ height:54px; }
html.app-shell #workbenchPage .wbm-card .wb-row{ margin-top:9px; font-size:calc(12/16*1rem); }
html.app-shell #workbenchPage .wbm-card .wb-est{ margin:8px 0 0 !important; }
/* 改写行：去掉左侧小字后只剩按钮组 → 两个按钮拉满一行 */
html.app-shell #workbenchPage .wb-row.wbm-ar{ justify-content:flex-end; }
html.app-shell #workbenchPage .wb-row.wbm-ar > span{ display:flex; gap:8px; width:100%; }
html.app-shell #workbenchPage .wbm-ar #wbRwrBtn,
html.app-shell #workbenchPage .wbm-ar #wbRwrBtn2{
  flex:1 1 0; height:38px; padding:0; border-radius:10px;
  background:linear-gradient(90deg,#4f7cff,#a855f7); font-weight:800;
}
html.app-shell #workbenchPage .wbm-ar #wbUndoBtn,
html.app-shell #workbenchPage .wbm-ar #wbUndoBtn2{
  flex:0 0 86px; height:38px; padding:0; border-radius:10px; font-weight:700;
}

/* 参数格子：4 个并成 2×2，每格「小字标签 + 值」 */
html.app-shell #workbenchPage .wb-params{
  display:grid !important; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 0 !important;
}
html.app-shell #workbenchPage .wb-params .wb-param{
  display:flex; align-items:center; gap:7px; height:38px; padding:0 10px; border-radius:10px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  font-size:calc(12.5/16*1rem); justify-content:flex-start;
}
html.app-shell #workbenchPage .wb-params .wb-param::before{
  content:attr(data-lb); color:rgba(255,255,255,.36); font-size:calc(10/16*1rem); font-weight:600; flex:none;
}
html.app-shell #workbenchPage .wb-params .wb-param i{ margin-left:auto; font-style:normal; color:rgba(255,255,255,.34); font-size:calc(9/16*1rem); }

/* 拍摄场景 / 数字人形象 两行的右侧下拉 */
html.app-shell #workbenchPage .wbm-card .wb-row > .wb-param{
  height:34px; padding:0 10px; border-radius:9px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); font-size:calc(12/16*1rem);
}
html.app-shell #workbenchPage .wbm-card .wb-row > .wb-param i{ font-style:normal; color:rgba(255,255,255,.34); margin-left:8px; }

/* 音色下拉 */
.wbm-vrow{ display:flex; align-items:center; gap:8px; margin-top:11px; }
.wbm-vl{ flex:none; color:rgba(255,255,255,.5); font-size:calc(11.5/16*1rem); }
.wbm-vs{ position:relative; flex:1; display:flex; min-width:0; }
.wbm-vs select{
  width:100%; height:34px; padding:0 26px 0 10px; border-radius:9px; appearance:none;
  -webkit-appearance:none; outline:none; cursor:pointer;
  border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.05);
  color:#fff; font-family:inherit; font-size:calc(12/16*1rem);
}
.wbm-vs i{ position:absolute; right:9px; top:50%; transform:translateY(-50%); font-style:normal; color:rgba(255,255,255,.34); font-size:calc(9/16*1rem); pointer-events:none; }
.wbm-vrow.lock{ opacity:.45; }
.wbm-vrow.lock .wbm-vs select{ cursor:not-allowed; border-style:dashed; }
.wbm-vtip{ margin-top:6px; color:rgba(255,255,255,.30); font-size:calc(10/16*1rem); line-height:1.5; }

/* ══════════════════════ 12. v605 极简留白 + 深/浅色自选（胡总 2026-10-25） ══════════════════════
   口径：极简留白 —— 石墨灰底(不是纯黑，纯黑没层次) + 一条发丝线 + 单色文字，没有渐变、没有发光、没有玻璃。
   三层台阶：底 #141519 / 卡片 #1C1E23 / 内嵌 #25272D —— 每级差 8 个亮度，去掉描边也分得清。
   ① 首页整页下线：App 打开直接落在第一格「AI霸屏」；底部只剩四格 AI霸屏 / AI视频 / 数字人 / 我的。
   ② 深色/浅色由用户在「我的 → 外观」自己选，存 localStorage，下次打开保持。
      浅色 = 整页反色 + 媒体回正（站点上千处颜色是硬编码的，反色是唯一「不动原站一行」就能整体变浅的办法）。
   ③ 本节全部挂在 html.app-shell 下：桌面 index.html 加载同一份 app.css 时一条都不命中。 */
html.app-shell{
  --m-bg:#0B0E1C;                          /* 页面底 —— 深夜靛蓝，极光从这一层透上来 */
  --m-s1:#151A2E;                          /* 卡片底 —— 与底差 10 级，不靠描边也浮得起来 */
  --m-s2:#1E2439;                          /* 输入框 / 次级底 —— 第三层台阶 */
  --m-line:rgba(255,255,255,.085);         /* 发丝线 */
  --m-line2:rgba(255,255,255,.17);         /* 稍重的线 */
  --m-fg:#EDEEF3;                          /* 主文字 —— 不用死白，压掉刺眼的高反差 */
  --m-fg2:#9AA1B8;                         /* 次文字 */
  --m-fg3:#6C7288;                         /* 弱文字 */
  --m-accent:#5566F5;                      /* 强调色（靛，压深一点，别发粉） */
  --m-accent2:#8B5CF6;                     /* 强调色（紫） */
}
html.app-shell[data-theme="dark"]{ color-scheme:dark; }
html.app-shell[data-theme="light"]{ color-scheme:light; }

/* 首页整页下线 —— 只摘首页自己那段(.hero)，**不能动 #homeView 本身**：
   AI视频/AI霸屏两个 .wb-page 是 #homeView 里面的，整块 display:none 会把它们一起弄没。
   页脚在 760 行已隐藏；#toast 留在原地。 */
html.app-shell #homeView > .hero,
html.app-shell #homeView > #appHomeTools{ display:none !important; }
/* 小茂客服浮标：首页没了以后它会浮在四个主页面中间（压住 AI霸屏内容），整个 App 收起；
   客服入口仍在「我的 → 在线客服」 */
html.app-shell #xmFab,
html.app-shell #xmTip{ display:none !important; }

/* 各页统一铺底，别透出站点首页 */
html.app-shell #appMine,
html.app-shell #workbenchPage,
html.app-shell #clipPage,
html.app-shell #ghPage,
html.app-shell #hqPage,
html.app-shell #introPage,
html.app-shell #helpPage{ background:var(--m-bg) !important; }

/* ---------- 12.1 顶栏：一条发丝线，没有渐变没有玻璃 ---------- */
html.app-shell #appBar{
  height:calc(var(--appbar-h) + var(--safe-t));
  padding-top:var(--safe-t); padding-left:18px; padding-right:10px; gap:2px;
  background:var(--m-bg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:1px solid var(--m-line);
}
html.app-shell #appBar.has-back{ padding-left:10px; }
html.app-shell #appBar .ab-back{
  width:30px; height:30px; margin-right:4px; border:none; border-radius:0; background:none;
  color:var(--m-fg2); font-size:calc(22/16*1rem); font-weight:400;
}
html.app-shell #appBar .ab-back:active{ opacity:.55; }
html.app-shell #appBar .ab-title{
  font-size:calc(16.5/16*1rem); font-weight:600; letter-spacing:.2px; color:var(--m-fg);
}
html.app-shell #appBar .ab-credits{
  height:auto; padding:0 2px; gap:4px; border:none; border-radius:0; background:none;
  color:var(--m-fg2); font-size:calc(12/16*1rem); font-weight:600;
}
html.app-shell #appBar .ab-credits:active{ opacity:.55; }
/* 试用期小胶囊：站点的琥珀色在极简版面里太跳，收成一行灰字（显隐仍由 hzTrialSync 控制） */
html.app-shell #appBar .side-trial{
  margin-right:4px; padding:0; gap:4px; border:none; background:none;
  color:var(--m-fg3); font-size:calc(11/16*1rem); font-weight:500;
}
html.app-shell #appBar .side-trial b{ font-size:calc(11.5/16*1rem); font-weight:600; }
html.app-shell #appBar .side-trial i{ width:4px; height:4px; background:var(--m-fg3); }
html.app-shell #appBar .ab-help,
html.app-shell #appBar .ab-star{
  width:30px; height:30px; border:1px solid var(--m-line); border-radius:50%;
  background:none; color:var(--m-fg2); font-size:calc(14/16*1rem); box-shadow:none;
}
html.app-shell #appBar .ab-star.on{
  background:var(--m-fg); border-color:var(--m-fg); color:var(--m-bg); box-shadow:none;
}
html.app-shell #appBar .ab-avatar{
  width:30px; height:30px; margin-left:6px; border:1px solid var(--m-line2); border-radius:50%;
  background:none; color:var(--m-fg); font-size:calc(12/16*1rem); font-weight:600;
}
/* 数字人页标题原来的三色渐变字（v603 那一段）取消，统一单色 */
@media (max-width:560px){
  html.app-shell body.gh-workshop #appBar .ab-title{
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    color:var(--m-fg); font-size:calc(16.5/16*1rem); letter-spacing:.2px;
  }
}

/* ---------- 12.2 底部四格：选中=白，未选=灰，没有胶囊没有跳动 ---------- */
html.app-shell #appTabs{
  height:calc(var(--tabbar-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  background:var(--m-bg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-top:1px solid var(--m-line);
}
html.app-shell #appTabs .tab{
  gap:5px; padding:7px 0 5px; color:var(--m-fg3);
  font-size:calc(10/16*1rem); letter-spacing:.2px;
}
html.app-shell #appTabs .tab svg{
  width:21px; height:21px; padding:0; box-sizing:border-box;
  border:none; border-radius:0; background:none; stroke-width:1.6;
}
html.app-shell #appTabs .tab.on{ color:var(--m-fg); }
html.app-shell #appTabs .tab.on svg{
  background:none; border-color:transparent; transform:none; stroke-width:1.9;
}
html.app-shell #appTabs .tab.on span{ font-weight:600; }
html.app-shell #appTabs .tab:active svg{ transform:none; opacity:.5; }

/* ---------- 12.3 两段式（AI视频 创作/作品、AI霸屏 1/2 步）：两条下划线文字 ---------- */
html.app-shell .app-seg{ background:var(--m-bg); gap:24px; padding:12px 16px 0; }
html.app-shell .app-seg button{
  flex:none; height:auto; padding:0 0 9px; border:none; border-radius:0; background:none;
  color:var(--m-fg3); font-size:calc(14/16*1rem); font-weight:600;
  border-bottom:1px solid transparent;
}
html.app-shell .app-seg button.on{
  color:var(--m-fg); background:none; border-color:transparent; border-bottom-color:var(--m-fg);
}
html.app-shell .app-seg .dot{
  width:4px; height:4px; background:var(--m-fg); box-shadow:none;
}

/* 快捷模板库 */
html.app-shell #workbenchPage .wbm-tpl-h b{ color:var(--m-fg); font-weight:600; letter-spacing:0; }
html.app-shell #workbenchPage .wbm-tpl-h span{ color:var(--m-fg3); }
html.app-shell #workbenchPage .wbm-tpl-c,
html.app-shell #workbenchPage .wbm-tpl-c:nth-child(2),
html.app-shell #workbenchPage .wbm-tpl-c:nth-child(3),
html.app-shell #workbenchPage .wbm-tpl-c:nth-child(4),
html.app-shell #workbenchPage .wbm-tpl-c:nth-child(5){
  background:var(--m-bg); border:1px solid var(--m-line); border-radius:12px;
}
html.app-shell #workbenchPage .wbm-tpl-c b{ color:var(--m-fg); font-weight:600; }
html.app-shell #workbenchPage .wbm-tpl-c span{ color:var(--m-fg3); }
html.app-shell #workbenchPage .wbm-tpl-c:active{ background:var(--m-s1); transform:none; }

/* 三张卡片 */
html.app-shell #workbenchPage .wbm-card{
  background:var(--m-bg); border:1px solid var(--m-line); border-radius:16px;
  padding:14px 15px 15px;
}
/* 底部「生成视频」是压在页脚上的固定条：内容区多留一条，滚到底也不会被它吃掉 */
html.app-shell #workbenchPage .wb-body{ padding-bottom:96px !important; }
html.app-shell #workbenchPage .wbm-h i{
  width:19px; height:19px; border-radius:50%;
  background:none; border:1px solid var(--m-line2); color:var(--m-fg2);
  font-size:calc(10/16*1rem); font-weight:600;
}
html.app-shell #workbenchPage .wbm-h b{ color:var(--m-fg); font-weight:600; letter-spacing:0; }
html.app-shell #workbenchPage .wbm-h span{ color:var(--m-fg3); }
html.app-shell #workbenchPage .wbm-sub{ color:var(--m-fg3); font-weight:500; letter-spacing:.2px; }
html.app-shell #workbenchPage .wbm-sub::after{ background:var(--m-line); }

/* 输入框：外层画线，内层透明 */
html.app-shell #workbenchPage .wb-prompt{
  background:var(--m-s2) !important; border:1px solid var(--m-line) !important;
  border-radius:12px !important;
}
html.app-shell #workbenchPage .wb-prompt:focus-within{ border-color:var(--m-line2) !important; }
html.app-shell #workbenchPage .wb-prompt textarea{
  background:none !important; border:none !important; border-radius:0 !important;
  color:var(--m-fg) !important; font-size:calc(13.5/16*1rem) !important; line-height:1.6 !important;
}
html.app-shell #workbenchPage .wb-prompt textarea::placeholder{ color:var(--m-fg3) !important; }
html.app-shell #workbenchPage .wb-link{
  background:none; border:1px solid var(--m-line); border-radius:8px;
  color:var(--m-fg2); font-size:calc(11/16*1rem);
}
html.app-shell #workbenchPage .wb-est{ color:var(--m-fg3); }
html.app-shell #workbenchPage .wb-est.over{ color:var(--m-fg); }

/* 改写 / 撤销 */
html.app-shell #workbenchPage #wbRwrBtn,
html.app-shell #workbenchPage #wbRwrBtn2{
  background:var(--m-fg) !important; color:var(--m-bg) !important;
  border-radius:10px; font-weight:700;
}
html.app-shell #workbenchPage #wbRwrBtn:hover,
html.app-shell #workbenchPage #wbRwrBtn2:hover{ filter:none; opacity:.85; }
html.app-shell #workbenchPage #wbUndoBtn,
html.app-shell #workbenchPage #wbUndoBtn2{
  background:none !important; color:var(--m-fg2) !important;
  border:1px solid var(--m-line) !important; border-radius:10px; font-weight:500;
}
html.app-shell #workbenchPage #wbUndoBtn:hover:not(:disabled),
html.app-shell #workbenchPage #wbUndoBtn2:hover:not(:disabled){ background:var(--m-s1) !important; }

/* 行内小控件：分段 / 开关 / 参数格 */
html.app-shell #workbenchPage .wb-seg{
  background:none; border:1px solid var(--m-line); border-radius:10px; padding:3px; gap:2px;
}
html.app-shell #workbenchPage .wb-seg span{ color:var(--m-fg3); border-radius:7px; }
html.app-shell #workbenchPage .wb-seg span.on{ background:var(--m-fg); color:var(--m-bg); }
html.app-shell #workbenchPage .wb-switch{ background:var(--m-fg); }
html.app-shell #workbenchPage .wb-switch.off{ background:var(--m-line2); }
html.app-shell #workbenchPage .wb-param{
  background:var(--m-s2) !important; border:1px solid var(--m-line) !important;
  border-radius:10px; color:var(--m-fg) !important;
}
html.app-shell #workbenchPage .wb-param i{ color:var(--m-fg3); }
html.app-shell #workbenchPage .wbm-vs select{
  background:var(--m-s2); border:1px solid var(--m-line); color:var(--m-fg); border-radius:9px;
}
html.app-shell #workbenchPage .wbm-vl{ color:var(--m-fg2); }
html.app-shell #workbenchPage .wbm-vs i{ color:var(--m-fg3); }
html.app-shell #workbenchPage .wbm-vtip{ color:var(--m-fg3); }

/* 下拉弹窗 / 主按钮 */
html.app-shell .wb-pop{
  background:var(--m-s1) !important; border:1px solid var(--m-line) !important;
  border-radius:14px !important; box-shadow:0 18px 50px rgba(0,0,0,.55) !important;
}
html.app-shell #workbenchPage .wb-gen{
  background:var(--m-fg) !important; color:var(--m-bg) !important;
  border-radius:12px; font-weight:700; box-shadow:none;
}
html.app-shell #workbenchPage .wb-gen:hover{ filter:none; opacity:.9; }
html.app-shell #workbenchPage .wb-gen .old{ color:rgba(0,0,0,.42); }
html.app-shell #workbenchPage .wb-footbar{ border-top:1px solid var(--m-line); }

/* 试用胶囊 / 「正式版」按钮：黄与紫在极简版面里都太跳，收成描边灰钮（显隐逻辑不动） */
html.app-shell .trial-bar{ gap:8px; }
html.app-shell .trial-pill,
html.app-shell .trial-pill.perm{
  background:none; border:1px solid var(--m-line2); color:var(--m-fg2); font-weight:500;
}
html.app-shell .trial-pill i{ background:var(--m-fg2); box-shadow:none; }
html.app-shell .trial-pill b{ font-weight:600; }
html.app-shell .pro-btn{
  background:none; border:1px solid var(--m-line2); color:var(--m-fg);
  box-shadow:none; font-weight:600;
}
html.app-shell .pro-btn:hover{ filter:none; background:var(--m-s1); }

/* ---------- 12.4 AI霸屏（原云剪辑）页：面板收成「底 + 一条线」 ---------- */
html.app-shell #clipPage .clip-panel,
html.app-shell #clipPage #clipUploadPanel,
html.app-shell #clipPage #clipCopyPanel,
html.app-shell #clipPage #clipIndPanel{
  background:var(--m-s1) !important; border:1px solid var(--m-line) !important;
  border-radius:14px !important; box-shadow:none !important;
}
/* 「⚡极速出片」只剩一颗、是状态不是按钮 —— 收成一枚小标签，别做成整行白条 */
html.app-shell #clipPage .clip-modetab{
  background:none !important; border:none !important; border-radius:0; padding:0 !important;
  height:auto !important; flex:none;
}
html.app-shell #clipPage .clip-modetab .mt{ color:var(--m-fg3); border-radius:8px; }
html.app-shell #clipPage .clip-modetab .mt.on{
  flex:none; padding:6px 12px;
  background:var(--m-s2); color:var(--m-fg); border:1px solid var(--m-line);
  font-weight:500;
}
/* 字数角标原来压在语音输入那颗麦克风上 —— 往左让开 */
html.app-shell #clipPage #clipCopyCount{ right:56px !important; bottom:26px !important; }
/* 上传区的蓝箭头 / 标题图标：换灰 */
html.app-shell #clipPage .clip-upload svg{ stroke:var(--m-fg2) !important; }
html.app-shell #clipPage .cp-title svg{ stroke:var(--m-fg3) !important; }
html.app-shell #clipPage .cp-title{ color:var(--m-fg2) !important; }
html.app-shell #clipPage #clipCopy{
  background:var(--m-s2) !important; border:1px solid var(--m-line) !important;
  border-radius:10px !important; color:var(--m-fg) !important;
}
html.app-shell #clipPage .clip-upload{
  background:none !important; border:1px dashed var(--m-line2) !important; border-radius:12px !important;
  color:var(--m-fg2) !important;
}
html.app-shell #clipPage .clip-mat{
  background:var(--m-s2) !important; border:1px solid var(--m-line) !important; border-radius:10px !important;
}
html.app-shell #clipPage .clip-btn{
  background:var(--m-s2) !important; border:1px solid var(--m-line) !important;
  color:var(--m-fg) !important; border-radius:10px !important; box-shadow:none !important;
}
html.app-shell #clipPage .clip-btn.primary,
html.app-shell #clipPage .clip-btn.on{
  background:var(--m-fg) !important; color:var(--m-bg) !important; border-color:var(--m-fg) !important;
}
html.app-shell #clipPage .clip-screen{
  background:var(--m-s2) !important; border:1px solid var(--m-line) !important; border-radius:12px !important;
}
html.app-shell #clipPage .sp-stat{
  background:none !important; border:1px solid var(--m-line) !important;
  border-radius:12px !important; box-shadow:none !important;
}
html.app-shell #clipPage .sp-stat b{ color:var(--m-fg) !important; font-weight:600 !important; }
html.app-shell #clipPage .sp-stat span{ color:var(--m-fg3) !important; }
html.app-shell #appClipNext{
  background:var(--m-fg); color:var(--m-bg);
  border-radius:12px; font-weight:700; box-shadow:none;
}
html.app-shell #appClipNext:active{ opacity:.85; }

/* ---------- 12.5 数字人页：顶栏/底栏收成单色，绿色/紫色按钮一律去掉 ---------- */
html.app-shell #ghmBar{
  background:var(--m-bg) !important; border-top:1px solid var(--m-line) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
html.app-shell #ghmBar .ghmb-start{
  background:var(--m-fg) !important; color:var(--m-bg) !important;
  border:none; border-radius:12px; box-shadow:none; font-weight:700;
}
html.app-shell #ghmBar .ghmb-ghost{
  background:none !important; border:1px solid var(--m-line2) !important;
  color:var(--m-fg2) !important; border-radius:12px; font-weight:500;
}
html.app-shell #ghmBar .ghmb-ghost:active{ background:var(--m-s1) !important; }
/* 站内 SVG 里的上传按钮（绿色/紫色）统一成描边幽灵钮 */
html.app-shell #ghPage #ghUpAudio,
html.app-shell #ghPage #ghUpVideo,
html.app-shell #ghPage .ghm-up{
  background:none !important; border:1px solid var(--m-line2) !important;
  color:var(--m-fg) !important; border-radius:12px !important; box-shadow:none !important;
}
/* 预览右下「导出成片」：粉边紫底 → 半透明黑玻璃 + 白发丝线 */
html.app-shell #ghPage #ghExport{
  background:rgba(0,0,0,.52) !important; border:1px solid rgba(255,255,255,.5) !important;
  color:#fff !important; border-radius:11px !important; box-shadow:none !important;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* 五步页签（v603 用内联样式涂的蓝色渐变）：底色/选中态改单色 */
html.app-shell #ghPage #ghmTabs{
  background:var(--m-bg) !important; border:1px solid var(--m-line) !important; border-radius:12px !important;
}
html.app-shell #ghPage #ghmTabs button{
  color:var(--m-fg3) !important; font-weight:600 !important;
  background:none !important; box-shadow:none !important;
}
/* 选中那格是站点 JS 直接写的内联渐变（没有 .on 类），按 style 里的 linear-gradient 认它 */
html.app-shell #ghPage #ghmTabs button[style*="linear-gradient"]{
  background:var(--m-fg) !important; color:var(--m-bg) !important; box-shadow:none !important;
}
/* 页签下的提示块 */
html.app-shell #ghPage #ghmHint{
  background:var(--m-s1) !important; border:1px solid var(--m-line) !important; color:var(--m-fg2) !important;
}
/* ---- 12.5b 去蓝：六张卡的蓝底/蓝描边/蓝标题条/青色序号、状态行、底部进度条，全压成石墨灰阶。
   站点把颜色写死在 SVG 属性里，属性优先级低于任何 CSS 规则 ⇒ 这里用属性选择器覆盖，
   index.html 一行不改。⚠️ 只认「卡片外壳」那几个具体值：人物插画里的 #7ef0ff（眼睛/声波/高光）
   必须留着，那是产品图，不是壳。预览区里那张 AI 形象也是一个像素不动。 */
html.app-shell #ghPage rect[fill="url(#bg)"]{ fill:var(--m-bg) !important; }
html.app-shell #ghPage rect[fill="url(#card)"],
html.app-shell #ghPage rect[fill="url(#cardOn)"]{
  fill:var(--m-s1) !important;
  stroke:var(--m-line) !important; stroke-opacity:1 !important;
}
/* 卡片顶那条标题带：#1d4fd8@.36 + #7ef0ff 细边 → 白 4.5% 的一条，只做层次不出颜色 */
html.app-shell #ghPage rect[fill="#1d4fd8"]{
  fill:rgba(255,255,255,.045) !important; fill-opacity:1 !important;
}
html.app-shell #ghPage rect[stroke="#7ef0ff"],
html.app-shell #ghPage rect[stroke="#4f7cff"],
html.app-shell #ghPage rect[stroke="#a855f7"]{
  stroke:var(--m-line) !important; stroke-opacity:1 !important;
}
/* 序号圆点：青底青边 → 白 10% 底 + 30% 边 */
html.app-shell #ghPage circle[fill="#22d3ee"]{
  fill:rgba(255,255,255,.10) !important; stroke:rgba(255,255,255,.30) !important;
}
html.app-shell #ghPage text[fill="#eaf2ff"],
html.app-shell #ghPage text[fill="#c8f6ff"]{ fill:var(--m-fg) !important; }
html.app-shell #ghPage text[fill="#c3d2f5"]{ fill:var(--m-fg2) !important; }
html.app-shell #ghPage text[fill="#8f9dc4"]{ fill:var(--m-fg3) !important; }
html.app-shell #ghPage [style*="color:#c3d2f5"],
html.app-shell #ghPage [style*="color:#7ee0ff"]{ color:var(--m-fg3) !important; }
/* 预览左下那条进度：青紫渐变 → 纯白，去掉外发光 */
html.app-shell #ghPage rect[fill="url(#pOn)"]{ fill:var(--m-fg) !important; filter:none !important; }
/* 预览框那一圈「RGB 灯边」(粉→蓝渐变描边)：换成一条白发丝线，别在画面边上闪色 */
html.app-shell #ghPage rect[stroke="url(#rim)"]{
  stroke:var(--m-line2) !important; filter:none !important;
}

/* ---------- 12.6 「我的」：一张卡 + 一张清单，全是线与留白 ---------- */
html.app-shell #appMine .wb-canvas{ padding:20px 18px 16px; }
html.app-shell .am-card{
  background:var(--m-s1); border:1px solid var(--m-line); border-radius:18px;
  padding:18px 16px 16px; backdrop-filter:none; -webkit-backdrop-filter:none;
}
html.app-shell .am-av{
  width:48px; height:48px; background:none; border:1px solid var(--m-line2);
  color:var(--m-fg); font-size:calc(17/16*1rem); font-weight:600;
}
html.app-shell .am-name{ color:var(--m-fg); font-weight:600; }
html.app-shell .am-phone{ color:var(--m-fg3); }
html.app-shell .am-login{
  background:var(--m-fg); color:var(--m-bg); border-radius:99px; font-weight:600;
}
html.app-shell .am-credits{
  margin-top:16px; padding:14px 0 0; border-radius:0;
  background:none; border:none; border-top:1px solid var(--m-line);
}
html.app-shell .am-c-n{ color:var(--m-fg); font-weight:600; }
html.app-shell .am-c-l{ color:var(--m-fg3); }
html.app-shell .am-c-btn{
  background:var(--m-s2); color:var(--m-fg); border:1px solid var(--m-line2);
  border-radius:99px; font-weight:600;
}
/* 外观（深色 / 浅色）行 */
html.app-shell .am-appear{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding:15px 16px;
  background:var(--m-s1); border:1px solid var(--m-line); border-radius:16px;
}
html.app-shell .am-appear .l{ color:var(--m-fg); font-size:calc(14.5/16*1rem); }
html.app-shell .am-seg{
  display:flex; flex:none; padding:3px; gap:2px;
  background:none; border:1px solid var(--m-line); border-radius:99px;
}
html.app-shell .am-seg button{
  height:28px; padding:0 14px; border:none; border-radius:99px; background:none; cursor:pointer;
  color:var(--m-fg3); font-family:inherit; font-size:calc(12.5/16*1rem); font-weight:600;
}
html.app-shell .am-seg button.on{ background:var(--m-fg); color:var(--m-bg); }
html.app-shell .am-list{
  margin-top:14px; background:var(--m-s1); border:1px solid var(--m-line); border-radius:16px;
}
html.app-shell .am-item{
  padding:16px; color:var(--m-fg); font-size:calc(14.5/16*1rem);
  border-bottom:1px solid var(--m-line);
}
html.app-shell .am-item:active{ background:var(--m-s2); }
html.app-shell .am-item .ext{ color:var(--m-fg3); }
html.app-shell .am-foot{ color:var(--m-fg3); }

/* ---------- 12.7 浅色 = 整页反色 + 媒体回正 ----------
   ⚠️ 站点上千处颜色写死在 index.html 里，逐个改会漏、也会影响桌面版；把 body 整体反色是唯一
   「原站一行不动」就能变浅色的做法。反色把深底变浅底、白字变黑字，图片/视频/数字人 SVG 再反一次回正。
   body 有 filter 后成为固定定位子元素的包含块 —— 本 App 的页面都在 body 下、body 高度=视口，
   顶栏/底栏仍是贴边（若哪天出现「底栏跑到内容末尾」，先查这里）。 */
html.app-shell[data-theme="light"] body{
  filter:invert(1) hue-rotate(180deg);
  background:#fff;
}
html.app-shell[data-theme="light"] img,
html.app-shell[data-theme="light"] video,
html.app-shell[data-theme="light"] canvas,
html.app-shell[data-theme="light"] #ghHost svg,
html.app-shell[data-theme="light"] #ghSvg,
html.app-shell[data-theme="light"] .gh-stage svg,
html.app-shell[data-theme="light"] #clipPreview video,
html.app-shell[data-theme="light"] #clipPreview img{
  filter:invert(1) hue-rotate(180deg);
}

/* ---------- 12.8 深空极光底（胡总 2026-10-25：「灰色不好看…这是个 AI 软件」「不一定是单色」） ----------
   风格：**深空极光** —— 夜靛底 + 顶部两团极光（靛 / 紫）+ 底边一线冷青 + 44px 坐标网。
   口径：颜色只铺在「背景」这一层，前景（卡片/输入框/文字）仍然克制 —— 卡片是实心深靛，
        把极光挡在留白里。这样整屏有 AI 软件的「光」，但读内容不吵。
   🔴 必须 background-attachment:fixed：顶栏、底栏、各页都是 fixed 的兄弟节点，
      只有全部按视口定位，极光和网纹才会跨元素接成一张连续的图，不会在接缝处错位。
   🔴 只能改 background-color/image，不能碰 background（简写会把别处覆盖掉）。 */
html.app-shell #appBar,
html.app-shell #appTabs,
html.app-shell #appMine,
html.app-shell #workbenchPage,
html.app-shell #clipPage,
html.app-shell #ghPage,
html.app-shell #hqPage,
html.app-shell #introPage,
html.app-shell #helpPage,
/* v605 补齐：所有二级页都得有同一张底，否则从首页点进去会「从极光掉回纯黑」。
   这些页各自有 background 规则（.billing-page / .wb-page 两套）⇒ 必须 !important。 */
html.app-shell #hqFlowPage,
html.app-shell #termsPage,
html.app-shell #privacyPage,
html.app-shell #changelogPage,
html.app-shell #feePage,
html.app-shell #zbPage,
html.app-shell #billingPage{
  background-color:var(--m-bg) !important;
  background-image:
    radial-gradient(95% 48% at 16% -8%, rgba(99,102,241,.26), transparent 64%),
    radial-gradient(85% 44% at 88% 2%, rgba(139,92,246,.20), transparent 62%),
    radial-gradient(120% 50% at 50% 112%, rgba(34,211,238,.09), transparent 66%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.021) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.021) 0 1px, transparent 1px 44px) !important;
  background-attachment:fixed, fixed, fixed, fixed, fixed !important;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat, repeat !important;
}
/* 主 CTA 换成靛→紫的极光渐变（白色主按钮太「工具」，AI 软件该有一处发光的东西）。
   只挑「真正的主按钮」，其余次级钮仍是描边幽灵，保证一屏只有一处亮色。 */
html.app-shell #appClipNext,
html.app-shell #workbenchPage .wb-gen,
html.app-shell #ghmBar .ghmb-start,
html.app-shell .am-login{
  background:linear-gradient(135deg,var(--m-accent) 0%,var(--m-accent2) 100%) !important;
  border-color:transparent !important; color:#fff !important;
  box-shadow:0 6px 22px rgba(99,102,241,.28) !important;
}

/* ══════════════════════ 12.9 数字人两段式 v606（胡总 2026-10-26） ══════════════════════
   第一界面「1 素材与文案」：页签 + 当前步骤卡 + 提示块，**画面上没有人物**；
   第二界面「2 预览与生成」：人物预览 + 当前步骤进度卡（走 AI霸屏 1/2 步同一套手感）。
   切换条是插进 #ghPage 的 HTML（.app-seg 同款），钉在页面顶端不随内容滚走。 */
html.app-shell #ghmSeg{
  position:sticky; top:0; z-index:6;
  padding:10px 16px 0 !important; margin-bottom:2px;
  border-bottom:1px solid var(--m-line);
}
/* 第一界面卡片下方那块空位全归提示块 ⇒ 不再画成一张大空卡，
   改成「一条发丝线 + 编号列表」的纯文字块，下面留白（极简留白那套语言）。 */
html.app-shell #ghPage #ghmHint{
  display:flex !important; flex-direction:column; justify-content:flex-start; gap:14px;
  padding:20px 2px 0 !important; overflow:hidden !important;
  background:none !important; border:none !important; border-top:1px solid var(--m-line) !important;
  border-radius:0 !important; box-shadow:none !important;
  color:var(--m-fg2) !important;
}
html.app-shell #ghPage #ghmHint .hh{
  font-size:calc(17.5/16*1rem) !important; font-weight:700 !important;
  color:var(--m-fg) !important; line-height:1.5 !important; margin-bottom:2px;
}
html.app-shell #ghPage #ghmHint .hr{
  display:flex; align-items:flex-start; gap:11px;
  font-size:calc(13.5/16*1rem) !important; line-height:1.75 !important; color:var(--m-fg2) !important;
}
html.app-shell #ghPage #ghmHint .hr i{
  flex:none; width:21px; height:21px; margin-top:2px; border-radius:50%;
  border:1px solid var(--m-line2); color:var(--m-fg2);
  display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:calc(11/16*1rem) !important; line-height:1;
}

/* ══════════════════════ 13.0 云剪辑去掉「极速出片」与「选择行业」（胡总 2026-10-26） ══════════════════════ */
/* ①「⚡极速出片」精修出片删掉之后只剩一颗，本来就是状态不是按钮 ⇒ 整条收掉，不留一枚孤零零的胶囊；
   ②「② 选择行业」整块收掉（不选 = AI 看片自己判断，clipInd* 与 CLIP_MODE 一字未动）。
   省下来的高度全归「口播文案」输入框 —— 它本来就是 flex:1。 */
html.app-shell #clipPage .clip-modetab,
html.app-shell #clipPage #clipIndPanel{ display:none !important; }
/* 左栏「上传/文案/素材库」那一列（第一列）本来是内容高、flex 不吸水，
   两颗一去掉底下会空出一整条 ⇒ 让它吃满余量，「口播文案」输入框跟着长高、素材库正好落到底。
   只管第一界面，第二界面（预览）不动。 */
html.app-shell #clipPage[data-step="1"] .clip-layout>.clip-col:first-child{
  flex:1 1 auto !important; min-height:0 !important;
}