/* 手机版改成 App 交互 (2026-09-28, docs/design_mobile_app.md)。只在 ≤760px 的登录后界面 (body.app) 生效, 桌面不动。
   配套 mobile.js: 创建页的底部面板 (更多设置 / 配音 / 选项列表)、我的视频的「⋯」操作面板、全屏播放下滑关闭、完成提示 4 秒消失。
   原来的表单控件 (#timing #aspect #rt_voice …) 一个不删, 只是挪进面板或藏起来, 由 mobile.js 的按钮代为读写 —— 提交/估价/草稿逻辑全不用改。 */

.app .mgo,.app .mrows,.app .mlist,.app .vmore,.app .vsearch{display:none}

@media (max-width:760px){
  /* ---------------------------------------------------------------- 外壳: 导航收在右上角 ☰ (老板 09-28: 不要底部标签栏), 二级页只有自己的「‹ 标题」 */
  body.app{--tabs-h:env(safe-area-inset-bottom,0px)}
  body.app.top .amain{padding-bottom:calc(var(--tabs-h) + 24px)}
  .app .mdrawer:not([hidden]){z-index:46}   /* 盖在创建页底部「生成视频」条上面 */
  body.app.sub .atop{display:none}
  body.app.sub .amain{padding-top:10px}
  /* AI 客服: 右下角悬浮圆按钮 (老板 09-28: 顶栏「?」不醒目, 改回悬浮); 创建页抬到「生成视频」条上面; 底部面板/键盘打开时让开 */
  body.app .as-btn{width:52px;height:52px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  body.app .as-nudge{right:14px;bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  body.app.m-create .as-btn{bottom:calc(var(--mgo-h,72px) + 14px)}
  body.app.m-create .as-nudge{bottom:calc(var(--mgo-h,72px) + 78px)}
  body.app.msheet-on .as-btn,body.app.msheet-on .as-nudge,body.app.kb .as-btn,body.app.kb .as-nudge{display:none!important}
  body.app .as-root.as-open .as-panel{bottom:0}

  /* ---------------------------------------------------------------- 底部面板 (bottom sheet) */
  /* 从面板里打开的弹窗 (添加角色 / 画造型 / 升级 / 播放…) 要盖在面板 (81) 上面, 关掉后回到面板 (老板 09-28 报: 被面板挡住) */
  .modal,.pmodal{z-index:90!important}
  .toast{z-index:95!important}
  .msheet-bg{position:fixed;inset:0;z-index:80;background:rgba(13,18,36,.42);opacity:0;transition:opacity .2s}
  .msheet-bg.in{opacity:1}
  .msheet{position:fixed;left:0;right:0;bottom:0;z-index:81;background:#fff;border-radius:18px 18px 0 0;max-height:88vh;display:flex;flex-direction:column;
    transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -12px 32px -12px rgba(13,18,36,.25)}
  .msheet.in{transform:none}
  .msheet .mgrab{width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:8px auto 2px;flex:none}
  .msheet .mhead{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 10px;flex:none;touch-action:none}
  .msheet .mhead b{font-size:16px}
  .msheet .mhead button{border:0;background:none;color:var(--brand);font:inherit;font-weight:600;font-size:15px;min-height:44px;padding:0 4px;cursor:pointer}
  .msheet .mbody{overflow-y:auto;overscroll-behavior:contain;padding:0 16px 16px;-webkit-overflow-scrolling:touch}
  .msheet .mopt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:50px;padding:10px 4px;border:0;border-bottom:1px solid var(--line);
    background:none;font:inherit;font-size:15px;color:var(--ink);text-align:start;cursor:pointer}
  .msheet .mopt:last-child{border-bottom:0}
  .msheet .mopt.on{color:var(--brand);font-weight:600}
  .msheet .mopt.on::after{content:"✓";font-weight:700}
  .msheet .mopt.danger{color:var(--bad)}
  .msheet .mopt small{display:block;color:var(--ink3);font-weight:400;font-size:12.5px;margin-top:2px}
  .msheet .mcancel{margin-top:8px;width:100%;min-height:48px;border:0;border-radius:12px;background:var(--bg2);font:inherit;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer}
  body.msheet-on{overflow:hidden}

  /* 面板里的一行: 标签 + 当前值 + ›, 整行可点 */
  .app .mrow,.msheet .mrow{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:10px 2px;border:0;border-bottom:1px solid var(--line);background:none;
    font:inherit;font-size:15px;color:var(--ink);text-align:start;cursor:pointer;text-decoration:none}
  .mrow>.ico{color:var(--ink2)}
  .mrow>span:not(.ico):not(.chev){flex:1;min-width:0}
  .mrow>.ico,.mrow>summary>.ico{width:20px;height:20px;flex:none;display:inline-flex}
  .mrow>.ico svg,.mrow>summary>.ico svg{width:20px;height:20px}
  .mlist details.mlang>summary>span:not(.ico):not(.chev){flex:1;min-width:0}
  .mrow em{font-style:normal;color:var(--ink3);font-size:14px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mrow .chev{color:var(--ink3);font-size:20px;line-height:1}
  .msheet .mlab{font-size:13px;color:var(--ink2);font-weight:600;margin:14px 0 6px}
  .msheet .mlab:first-child{margin-top:4px}
  /* 分段按钮 (画幅 / 画面组织 / 语速) */
  /* 分段按钮: 等宽、顶对齐、文字居中; 主字只在词间折行, 小字整段显示可折行, 不截断不越框 (老板 09-28) */
  .mseg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--bg2);border-radius:12px;padding:3px;gap:3px}
  .mseg button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;min-height:44px;border:0;border-radius:9px;background:none;font:inherit;
    font-size:13px;font-weight:500;color:var(--ink2);padding:7px 4px 6px;line-height:1.25;text-align:center;cursor:pointer;overflow-wrap:normal;word-break:normal;hyphens:none}
  .mseg button span{display:block;max-width:100%}
  .mseg button .ratio{font-weight:inherit}
  .mseg button small{display:block;max-width:100%;font-size:11px;font-weight:400;color:var(--ink3);margin-top:2px;line-height:1.3;white-space:normal}
  .mseg button.on{background:#fff;color:var(--brand);font-weight:600;box-shadow:0 1px 3px rgba(13,18,36,.12)}
  /* 开关: 原来的勾选框, 整行可点 */
  .msheet .checks{display:block;margin:0}
  .msheet .ck,.msheet label.ck{display:flex!important;align-items:center;justify-content:space-between;width:100%;min-height:50px;border:0;border-bottom:1px solid var(--line);
    border-radius:0;padding:10px 2px;font-size:15px;background:none;gap:12px}
  .msheet .ck input[type=checkbox]{order:2;appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:14px;background:var(--line-2);position:relative;flex:none;
    margin:0;cursor:pointer;transition:background .15s}
  .msheet .ck input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
  .msheet .ck input[type=checkbox]:checked{background:var(--brand)}
  .msheet .ck input[type=checkbox]:checked::after{transform:translateX(18px)}
  .msheet .fld>label,.msheet .fld>span:first-child{display:none}
  .msheet .withplay{display:flex;gap:8px;align-items:center}
  .msheet .withplay .mrow{flex:1}
  .msheet .withplay .play,.msheet .withplay .vplay{flex:none;width:44px;height:44px;min-height:44px;border-radius:50%}
  .msheet details.notes{border:0;padding:0;margin:4px 0 0}
  .msheet details.notes summary{min-height:50px;display:flex;align-items:center;font-size:15px;border-bottom:1px solid var(--line)}
  .msheet .charrow{margin:6px 0}
  .msheet #speed-box{margin:0}

  /* ---------------------------------------------------------------- 创建页: 一屏 + 底部固定「生成视频」 */
  body.app[data-app=create] .phead{display:none}
  .app .mrows{display:block;margin-top:6px}
  .app .mrows .mrow{border-bottom:1px solid var(--line)}
  .app .mrows .mrow:last-child{border-bottom:0}
  body.app.m-create .cpar>.sep,body.app.m-create .cpar>.prow,body.app.m-create .cpar>.checks,body.app.m-create .cpar>.charrow,
  body.app.m-create .cpar>#instr,body.app.m-create .cpar>.hint.bottom,body.app.m-create .cpar>.gorow{display:none}
  body.app.m-create .cside{margin-top:14px}
  body.app.m-create .cside .prev{display:none}
  .app .mgo{display:flex;position:fixed;left:0;right:0;z-index:44;bottom:var(--tabs-h);align-items:center;gap:12px;padding:10px 14px;background:#fff;border-top:1px solid var(--line)}
  body.app.kb .mgo{bottom:var(--kb,0px)}
  .app .mgo.has-err{flex-wrap:wrap}
  .app .mgo #hint{flex:0 0 100%;order:-1;margin:0 0 2px;font-size:13px;line-height:1.4;color:var(--err,#c2410c)}
  .app .mgo #hint a{font-weight:600;text-decoration:underline}
  .app .mgo .crest{flex:none;margin:0;font-size:12px;line-height:1.25;color:var(--ink2);max-width:34%}
  .app .mgo .crest[hidden]{display:none}
  .app .mgo #go{flex:1;margin:0;min-height:50px;justify-content:center;font-size:16px;border-radius:14px}
  body.app.m-create .amain{padding-bottom:calc(var(--tabs-h) + 96px)}

  /* 完成提示: 底部小条 (操作条 / 标签栏上方), mobile.js 4 秒后收起 */
  body.app .toast{top:auto!important;bottom:calc(var(--tabs-h) + 10px)!important;left:12px!important;right:12px!important;max-width:none}
  body.app.m-create .toast{bottom:calc(var(--tabs-h) + 82px)!important}

  /* ---------------------------------------------------------------- 我的视频: 紧凑列表 + ⋯ */
  body.app[data-app=videos] .ph .btn{display:none}
  body.app[data-app=videos] .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  body.app[data-app=videos] .ph p{margin:0;font-size:13px;color:var(--ink3)}
  .app .vsearch{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink2);font-size:20px;cursor:pointer}
  body.app[data-app=videos] .keep-note{font-size:12.5px;margin:0 0 10px;color:var(--ink3)}
  body.app[data-app=videos] .keep-note .k-dl,body.app[data-app=videos] .keep-note .k-plans{display:none}
  body.app[data-app=videos] .libbar #v-q{display:none}
  body.app[data-app=videos].q-open .libbar #v-q{display:block;margin-top:8px}
  .app .agrid{gap:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .app .agrid:empty{display:none}
  .app .v{flex-direction:row;align-items:center;gap:12px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:10px 6px 10px 12px;position:relative}
  .app .v:last-child{border-bottom:0}
  .app .v .th{flex:none;width:96px;aspect-ratio:3/2;border-radius:8px;pointer-events:none}
  .app .v .th .pl,.app .v .th .ratio{display:none}
  .app .v .th .dur{right:4px;bottom:4px;font-size:10.5px;padding:1px 5px}
  .app .v .th.state{padding:4px;gap:4px}
  .app .v .th.state .msg{font-size:11px;line-height:1.2}
  .app .v .th.state .bar{width:80%}
  .app .v .vb{padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .app .v .vb h3{font-size:14.5px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app .v .vb .when{font-size:12px;margin:0}
  .app .v .vb .chips{margin:0;gap:4px;flex-wrap:nowrap;overflow:hidden}
  .app .v .vb .chips span{font-size:11px;padding:1px 6px;white-space:nowrap}
  .app .v .vb .edl{font-size:11.5px;margin:0}
  .app .v .vb .act{display:none}
  .app .v[data-st=fail] .vb .act,.app .v[data-st=run] .vb .act{display:flex;margin-top:4px;gap:8px}
  .app .v[data-st=fail] .vb .act .btn,.app .v[data-st=run] .vb .act .btn{min-height:34px;padding:4px 12px;font-size:13px;flex:none}
  .app .v[data-st=fail] .vb .act .ib,.app .v[data-st=fail] .vb .act .why{display:none}
  .app .vmore{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:none;
    color:var(--ink3);font-size:22px;letter-spacing:1px;cursor:pointer}

  /* 全屏播放: 深色铺满, 顶部下滑关闭 */
  .app .pmodal{padding:0;background:#111!important;align-items:stretch}
  .app .pmodal .pm-box,.app .pmodal.portrait .pm-box{width:100%;max-height:none;height:100%;gap:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
    display:flex;flex-direction:column;justify-content:center;background:#111;border-radius:0}
  .app .pmodal .pm-head{order:-1;position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;color:#fff;background:linear-gradient(#111,transparent);
    display:flex;align-items:center;gap:8px;touch-action:none;z-index:2}
  .app .pmodal .pm-head strong{color:#fff;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
  .app .pmodal .pm-head .btn{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
  .app .pmodal .pm-act{display:flex;align-items:center;gap:6px}
  .app .pmodal .pm-x{color:#fff;order:9;font-size:28px;width:44px;height:44px}
  .app .pmodal #pm-video{width:100%;max-height:70vh;border-radius:0;background:#000}
  .app .pmodal #pm-script{color:#ddd;margin:12px 16px 0}
  .app .pmodal .pm-grab{position:absolute;top:calc(env(safe-area-inset-top,0px) + 2px);left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}

  /* ---------------------------------------------------------------- 素材 */
  body.app[data-app=assets] .ph p{display:none}
  body.app[data-app=assets] .start.info.seen{display:none}
  body.app[data-app=assets] .starts{gap:8px}
  body.app[data-app=assets] .start{padding:12px}
  /* 「创建角色 / 新建音色」是操作: 实线品牌色边框 + 实心图标 + 右侧 ›, 一看就能点 */
  body.app[data-app=assets] button.start{align-items:center;border:1.5px solid var(--brand);background:var(--tint);box-shadow:0 2px 8px rgba(94,64,255,.10)}
  body.app[data-app=assets] button.start .ic{background:#fff;color:var(--brand)}
  body.app[data-app=assets] button.start::after{content:"›";margin-inline-start:auto;font-size:26px;line-height:1;color:var(--brand);flex:none}
  body.app[data-app=assets] button.start b{color:var(--brand)}
  /* 「使用方式」只是说明: 不要卡片, 一行小字提示 */
  body.app[data-app=assets] .start.info{display:block;background:none;border:0;box-shadow:none;padding:2px 4px;font-size:13px;color:var(--ink2);line-height:1.5}
  body.app[data-app=assets] .start.info.seen{display:none}
  body.app[data-app=assets] .start.info .ic{display:inline-block;vertical-align:-2px;width:auto;height:auto;background:none;color:var(--brand);margin-inline-end:4px}
  body.app[data-app=assets] .start.info > span:last-child,body.app[data-app=assets] .start.info b,body.app[data-app=assets] .start.info span span{display:inline;font-size:13px;margin:0}
  body.app[data-app=assets] .start.info b{color:var(--ink);margin-inline-end:4px}

  /* ---------------------------------------------------------------- 选角色弹窗: 一行一个 (小方图 · 名字/画风 · 对勾圈), 老板 09-28: 以前一张卡占一屏 */
  .modal.svm .cpick{display:flex;flex-direction:column;gap:8px;max-height:52vh;padding:2px}
  .modal.svm .cpick button{flex-direction:row;align-items:center;gap:12px;padding:8px 12px 8px 8px;min-height:72px}
  .modal.svm .cpick .pic{width:56px;height:56px;aspect-ratio:auto;flex:none;margin:0;border:1px solid var(--line);border-radius:10px}
  .modal.svm .cpick .tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
  .modal.svm .cpick b,.modal.svm .cpick small{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .modal.svm .cpick b{font-size:15px}
  .modal.svm .cpick .ck{position:static;flex:none}
  .modal.svm .cpick .cnew{flex-direction:row;min-height:56px;padding:10px 12px}

  /* ---------------------------------------------------------------- 邀请: 4 个分享方式收成一张列表卡 (老板 09-28), 一行一种: 图标 · 名称 + 奖励 · 分享 */
  body.app[data-app=invite] .tasks{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:0 14px}
  body.app[data-app=invite] .task{border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:none;padding:12px 0;margin:0;align-items:center;gap:12px}
  body.app[data-app=invite] .task:last-child{border-bottom:0}
  body.app[data-app=invite] .task .ic{width:36px;height:36px;background:var(--tint);color:var(--brand)}
  body.app[data-app=invite] .task>div{flex:1}
  body.app[data-app=invite] .task p{display:none}
  body.app[data-app=invite] .task .tags{display:flex;flex-wrap:wrap;gap:0 6px;margin-top:2px}
  body.app[data-app=invite] .task .tg{padding:0;background:none;border:0;font-size:12.5px;font-weight:500}
  body.app[data-app=invite] .task .tg.gr:not(:empty)::before{content:"· ";color:var(--ink3)}
  body.app[data-app=invite] .task .btn{padding:7px 14px;min-height:36px;font-size:14px}

  /* ---------------------------------------------------------------- 我的 (账户页): 去掉重复, 下面是入口列表 */
  .app .mlist{display:block;padding:4px 14px!important}
  .app .mlist .mrow[hidden]{display:none}
  .app .mlist .mrow.out{color:var(--ink3);border-bottom:0}
  .app .mlist details.mlang>summary{list-style:none;display:flex;align-items:center;gap:10px;width:100%;cursor:pointer}
  .app .mlist details.mlang>summary::-webkit-details-marker{display:none}
  .app .mlist details.mlang{display:block;padding:0;min-height:0}
  .app .mlist details.mlang>summary{min-height:50px;padding:10px 2px}
  .app .mlist details.mlang[open] .chev{transform:rotate(90deg)}
  .app .mlist .mlangs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 0 12px}
  .app .mlist .mlangs a{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--ink2)}
  .app .mlist .mlangs a.on{border-color:var(--brand);color:var(--brand);font-weight:600}
  body.app[data-app=account] .who [data-manage],body.app[data-app=account] .outcard{display:none}
  body.app[data-app=account] .dl>div:first-child{display:none}
  body.app[data-app=account] .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  body.app[data-app=account] .stats .stat{flex-direction:column;align-items:flex-start;gap:2px}
  body.app[data-app=account] .stats .sq{display:none}
  body.app[data-app=account] .stats b{font-size:17px}
}