:root{
  /* 对齐油邦平台（159.75.180.50 实测） */
  --bg:#f6f8fa; --bg2:#ffffff; --card:#ffffff; --card2:#f2f5f8;
  --line:#dde3ea; --line2:#eef1f5;
  --text:#1f2530; --dim:#6b7684; --dim2:#9aa4b2;
  --gold:#ff7900; --green:#2e9e5b; --ok:#2e9e5b; --warn:#c9821b; --bad:#d93a3a;
  --radius:10px; --mono:'Cascadia Mono','Consolas',ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.55 "Source Han Sans SC","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
b{font-weight:600}
.muted{color:var(--dim)}
.sm{font-size:12px}
.sep{color:var(--dim2); margin:0 6px}
.spacer{flex:1}

/* ---------- top ---------- */
.top{
  height:52px; flex:0 0 52px; display:flex; align-items:center; gap:12px;
  padding:0 16px; background:var(--bg2); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:6px}
.brand b{font-size:18px; font-weight:800; letter-spacing:.5px; color:var(--ink-800,#1f2530)}
.brand span{font-size:10px; color:var(--dim2); letter-spacing:.16em; text-transform:uppercase}
.proj{display:flex; align-items:center; gap:8px; margin-left:10px; font-size:13px}
.dot-ok{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pill{
  font-size:12px; color:var(--dim); border:1px solid var(--line);
  padding:3px 9px; border-radius:99px;
}
.btn{
  background:var(--card2); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:6px 12px; font-size:13px; cursor:pointer;
  font-family:inherit; transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--card2); border-color:var(--line)}
.btn.primary{background:var(--gold); color:#fff; border-color:var(--gold); font-weight:600}
.btn.primary:hover{background:#ff8f26}
.btn.ghost{background:transparent}
.btn.mini{padding:3px 8px; font-size:12px}
.sel{
  background:var(--card2); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:5px 8px; font-size:12px; font-family:inherit;
}

/* ---------- layout ---------- */
main{flex:1; display:flex; min-height:0}
.rail{
  width:196px; flex:0 0 196px; background:var(--bg2);
  border-right:1px solid var(--line); padding:12px 0; overflow:auto;
}
.step{
  display:flex; gap:10px; align-items:flex-start; padding:10px 16px;
  cursor:pointer; border-left:3px solid transparent;
}
.step:hover{background:#eef2f7}
.step.active{background:var(--card); border-left-color:var(--gold)}
.step .no{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:11px;color:var(--dim);
  flex:0 0 20px; margin-top:1px;
}
.step.active .no{border-color:var(--gold);color:var(--gold)}
.step .tt{font-size:13px}
.step .ss{font-size:11px;color:var(--dim2);margin-top:2px}
.step.done .no{border-color:var(--ok);color:var(--ok)}
.stage{flex:1; overflow:auto; padding:18px 20px; min-width:0}

/* ---------- common ---------- */
h2{font-size:15px; margin:0 0 4px}
.sub{color:var(--dim); font-size:12px; margin-bottom:14px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius)}
.pad{padding:14px 16px}
.row{display:flex; gap:12px}
.grow{flex:1; min-width:0}
.kbd{
  font-family:var(--mono); font-size:11px; border:1px solid var(--line);
  background:#f7fafc; border-radius:4px; padding:1px 5px; color:var(--dim);
}
.tag{
  display:inline-block; font-size:11px; padding:1px 7px; border-radius:99px;
  border:1px solid var(--line); color:var(--dim);
}
.tag.gold{color:var(--gold); border-color:#4a3c1c; background:#2a2109}
.tag.ok{color:var(--ok); border-color:#1c3a25; background:#10251a}
.tag.warn{color:var(--warn); border-color:#3f3312; background:#251d09}
.tag.bad{color:var(--bad); border-color:#421d1d; background:#fdecea}

/* ---------- S1 ---------- */
.s1{display:grid; grid-template-columns:1fr 320px; gap:14px; height:calc(100vh - 52px - 36px - 60px)}
.script{
  width:100%; height:100%; resize:none; background:#f7fafc; color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  font:14px/1.9 'Inter','Microsoft YaHei',sans-serif; outline:none;
}
.script:focus{border-color:var(--line)}
.seglist{height:100%; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius)}
.segrow{
  display:flex; gap:8px; align-items:baseline; padding:6px 10px;
  border-bottom:1px solid var(--line); font-size:12px; cursor:default;
}
.segrow:hover{background:#eef2f7}
.segrow .i{color:var(--dim2); font-family:var(--mono); width:26px}
.segrow .x{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text)}
.segrow .d{color:var(--dim); font-family:var(--mono); font-size:11px}
.warnbar{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:6px;
  background:#fdecea; border:1px solid #f3c2c21d; color:var(--bad); font-size:12px; margin-bottom:10px;
}

/* ---------- S2 ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{
  text-align:left; font-weight:500; color:var(--dim); font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; padding:8px 10px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card);
}
.tbl td{padding:7px 10px; border-bottom:1px solid var(--line)}
.tbl tr:hover td{background:var(--card2)}
.tbl .mono{font-family:var(--mono); font-size:12px; color:var(--dim)}
.tbl .tx{max-width:640px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- S3 ---------- */
.s3{display:grid; grid-template-columns:230px 1fr 268px; gap:14px; height:calc(100vh - 52px - 36px - 96px)}
.segnav{overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius)}
.segitem{
  display:flex; gap:8px; align-items:center; padding:8px 10px; cursor:pointer;
  border-left:3px solid transparent; font-size:12px;
}
.segitem:hover{background:var(--card2)}
.segitem.active{background:#1b2542; border-left-color:var(--gold)}
.segitem .i{font-family:var(--mono); color:var(--dim2); width:22px}
.segitem .t{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#b9c8dd}
.segitem .s{font-size:10px}
.s-ok{color:var(--ok)} .s-stale{color:var(--warn)} .s-empty{color:var(--dim2)} .s-fail{color:var(--bad)}

.center{display:flex; flex-direction:column; gap:12px; min-width:0}
.frame{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--line); background:#0a1220;
  container-type:inline-size;
  background-image:
    radial-gradient(900px 480px at 12% -10%, #17253f 0%, transparent 60%),
    radial-gradient(700px 400px at 100% 110%, #172a2a 0%, transparent 55%);
}
.playline{position:absolute; left:0; right:0; bottom:0; height:2px; background:#ffffff10}
.playline i{display:block;height:100%;width:0;background:var(--gold)}
.playline[data-play="1"] i{animation:seek 2.2s linear forwards}
@keyframes seek{to{width:100%}}
.grid-ov{
  position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:48px 48px;
}
.deck{position:absolute; inset:6% 7% 16% 7%; display:flex; flex-direction:column; justify-content:center}
.kicker{font-size:11px; letter-spacing:.18em; color:#6f88a8; text-transform:uppercase}
.dtitle{font-size:26px; font-weight:600; line-height:1.35; margin:8px 0 14px; max-width:78%}
.drule{width:52px;height:3px;background:var(--gold); border-radius:2px; margin-bottom:16px}
.bars{display:flex; align-items:flex-end; gap:9px; height:88px; opacity:.85}
.bars i{width:26px; background:linear-gradient(#3d6fa8,#24405f); border-radius:3px 3px 0 0; display:block}
.bars i.hl{background:linear-gradient(var(--gold),#8a6d1f)}
.av{
  position:absolute; border-radius:50%; overflow:hidden; aspect-ratio:1;
  background:radial-gradient(circle at 35% 30%,#3c5a7d,#1b2b40 70%);
  border:2px solid #2a3d59; box-shadow:0 8px 26px #0008;
}
.av::after{content:'数字人'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:10px; color:#8fa9c6; letter-spacing:.1em}
.subs{
  position:absolute; left:3%; right:23%; bottom:5.2%; text-align:center;
  font-size:23px; font-weight:700; letter-spacing:.3px;
  color:#fff; -webkit-text-stroke:3px #000; paint-order:stroke fill;
  padding:0 8%; line-height:1.35;
}
.subs.hl{-webkit-text-stroke:3.4px #000}
.framebar{
  position:absolute; left:12px; top:10px; display:flex; gap:8px; align-items:center;
  font-size:11px; color:#9fb4d0;
}
.rec{width:7px;height:7px;border-radius:50%;background:var(--bad)}

.cands{display:flex; flex-direction:column; gap:10px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:12px; min-width:0}
.cand{
  position:relative; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  cursor:pointer; background:#f7fafc;
}
.cand:hover{border-color:#3a5178}
.cand.on{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
.cand .thumb{height:58px; background:
  linear-gradient(135deg,#1d2c44,#16213a 60%,#1a2f3a); position:relative}
.cand .thumb::after{content:''; position:absolute; inset:10px 12px;
  border:1px solid #ffffff12; border-radius:3px}
.cand .key{
  position:absolute; left:6px; top:6px; width:16px;height:16px; border-radius:4px;
  background:#0009; color:var(--dim); font-size:10px; display:grid; place-items:center;
  font-family:var(--mono);
}
.cand .meta{padding:6px 9px; font-size:11px; color:var(--dim); display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); background:#0b1424}
.cand .lbl{color:#cfe0f5}
.cand.on .lbl{color:var(--gold)}

.ctrl{display:flex; gap:16px; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; flex-wrap:wrap}
.field{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim)}
.field input[type=number]{
  width:74px; background:#f7fafc; color:var(--text); border:1px solid var(--line);
  border-radius:5px; padding:4px 6px; font-family:var(--mono); font-size:12px;
}
.ro{font-family:var(--mono); color:var(--gold); font-size:12px; padding:4px 6px;
  background:#1b1608; border:1px solid #3a3018; border-radius:5px}
.segtitle{font-size:12px; color:var(--dim); display:flex; gap:10px; align-items:center}
.segtitle b{color:var(--text); font-size:13px}

.lintbar{
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:6px;
  background:#251d09; border:1px solid #4a3c1c; color:#f0d69a; font-size:12px;
}
.lintbar.bad{background:#fdecea; border-color:#4a1d1d; color:var(--bad)}
.lintbar button{margin-left:auto}

/* ---------- S4 ---------- */
.s4{display:grid; grid-template-columns:1fr 660px; gap:14px; align-items:start}
.form{display:flex; flex-direction:column; gap:12px}
.frow{display:flex; align-items:center; gap:10px; font-size:13px}
.frow label{width:88px; color:var(--dim); font-size:12px}
input[type=range]{accent-color:var(--gold); width:160px}
input[type=color]{width:34px;height:26px;border:1px solid var(--line);border-radius:5px;background:none}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  padding:4px 10px; border-radius:99px; border:1px solid var(--line);
  font-size:12px; color:var(--dim); cursor:pointer;
}
.chip.on{border-color:var(--gold); color:var(--gold); background:#2a2109}

/* ---------- S5 ---------- */
.s5{display:grid; grid-template-columns:1fr 380px; gap:14px; align-items:start}
.checkline{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px;
  border-bottom:1px solid var(--line)}
.checkline:last-child{border-bottom:none}
.checkline .st{width:16px; text-align:center}
.out{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px}
.out:last-child{border-bottom:none}
.out .nm{flex:1; font-family:var(--mono); font-size:12px}
.out .du{color:var(--dim); font-family:var(--mono); font-size:12px}
.log{
  font-family:var(--mono); font-size:11.5px; line-height:1.75; color:#9db0c8;
  background:#0a1120; border:1px solid var(--line); border-radius:6px;
  padding:10px 12px; height:190px; overflow:auto; white-space:pre-wrap;
}
.log .ok{color:var(--ok)} .log .dim{color:var(--dim2)} .log .bad{color:var(--bad)}

/* ---------- taskbar ---------- */
.taskbar{
  height:44px; flex:0 0 44px; display:flex; align-items:center; gap:14px;
  padding:0 16px; background:var(--bg2); border-top:1px solid var(--line); font-size:12px;
}
.tb-left{width:250px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar{flex:1; height:6px; background:var(--line2); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg,#8a6d1f,var(--gold));
  border-radius:99px; transition:width .18s}
.tb-right{display:flex; align-items:center; gap:10px; color:var(--dim); min-width:210px; justify-content:flex-end}

/* ---------- toast / modal ---------- */
.toasts{position:fixed; right:18px; bottom:58px; display:flex; flex-direction:column; gap:8px; z-index:60}
.toast{
  background:var(--card2); border:1px solid #2f456e; border-radius:6px;
  padding:9px 13px; font-size:12px; color:#cfe0f5; box-shadow:0 8px 26px #0007;
  animation:in .16s ease-out; max-width:380px;
}
.toast.ok{border-color:#1c3a25; background:#10251a}
.toast.warn{border-color:#3f3312; background:#251d09}
@keyframes in{from{opacity:0; transform:translateY(6px)}to{opacity:1;transform:none}}
.modal{position:fixed; inset:0; background:#000a; display:grid; place-items:center; z-index:80}
.modal-box{background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; width:420px; box-shadow:0 30px 80px #000a}
.modal-hd{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.keys{width:100%; border-collapse:collapse; font-size:13px}
.keys td{padding:5px 0; border-bottom:1px solid var(--line)}
.keys td:first-child{width:150px}
kbd{font-family:var(--mono); font-size:11px; background:#f7fafc; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:4px; padding:1px 6px; color:var(--dim)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#233250;border-radius:6px;border:2px solid var(--bg2)}
::-webkit-scrollbar-track{background:transparent}




/* 竖屏视频限高：1080x1920 直接 width:100% 会把整屏撑满 */
.vidbox{display:flex;justify-content:center}  /* 容器不铺黑底，只包住视频 */
.vidbox video{max-height:56vh;max-width:100%;width:auto;border-radius:8px;background:#000}

/* ---- 品牌资产 ---- */
.brand{align-items:center;gap:8px}
.brandmark{height:22px;width:auto;display:block}
.sic{width:15px;height:15px;opacity:.75;flex:none;margin-right:2px}
.step.active .sic{opacity:1}
.lamp{display:block;border-radius:50%}
.bic{width:13px;height:13px;vertical-align:-2px;margin-right:5px}
.btn.primary .bic{filter:brightness(0)}  /* 金色底上用黑色字形 */

/* ---- 状态四件套 ---- */
.statebar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  font-size:13px;margin-bottom:12px;border:1px solid var(--line)}
.statebar img{width:15px;height:15px;flex:none}
.statebar.error{border-color:#7a2b2b;background:rgba(248,81,73,.06)}
.statebar.warn{border-color:#6b5416;background:rgba(210,153,34,.06)}
.statebar.empty{border-color:var(--line);background:var(--card)}
.statebar.loading{border-color:var(--line);background:var(--card);color:var(--dim)}
.skl{height:34px;border-radius:6px;margin-bottom:8px;
  background:linear-gradient(90deg,#eef1f5 25%,#e3e8ef 37%,#eef1f5 63%);
  background-size:400% 100%;animation:skl 1.4s ease infinite}
@keyframes skl{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---- 卡片画面预览 ---- */
.frame-box{position:relative;background:#f2f5f8;border:1px solid var(--line);border-radius:10px;
  min-height:170px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.frame{width:100%;max-height:32vh;object-fit:contain;display:block}
.frame-ph{color:var(--dim2);font-size:13px;padding:36px 0}

/* ---- 自绘提示条（不用原生 title：深色系统主题下会和深色字糊在一起） ---- */
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;top:100%;
  transform:translateX(-50%);margin-top:6px;white-space:nowrap;z-index:50;
  background:#fff;color:var(--ink-800,#1f2530);border:1px solid var(--line);
  box-shadow:0 4px 14px #10182814;border-radius:6px;padding:4px 8px;font-size:12px;
  pointer-events:none}

.brandmark{height:22px;width:auto;display:block}

/* ============================================================
   MOBILE：手机端适配（<= 760px）
   目的：竖屏也能完成"选工程 → 改文案 → 生成 → 构建 → 看片"。
   原则：导航变顶部横滑条；卡片单列；按钮加高到拇指可点；输入字号 16px 防 iOS 缩放。
   ============================================================ */
@media (max-width: 760px) {
  body { overflow: auto; }
  .top {
    height: auto; min-height: 52px; flex-wrap: wrap;
    padding: 8px 12px; gap: 8px; flex: 0 0 auto;
  }
  .top .proj { order: 9; width: 100%; font-size: 12px; color: var(--dim); }
  .top .brand span { display: none; }          /* 小屏只留"邦剪" */
  .top .sel { max-width: 46vw; }
  .top #btnBuild, .top .btn { min-height: 36px; }

  main { flex-direction: column; }

  /* 左侧步骤栏 → 顶部横滑标签 */
  .rail {
    width: 100%; flex: 0 0 auto; display: flex; gap: 8px;
    padding: 8px 10px; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--line);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rail::-webkit-scrollbar { display: none; }
  .step {
    flex: 0 0 auto; align-items: center; padding: 8px 10px;
    border-left: 0; border-radius: 999px; background: #fff;
    border: 1px solid var(--line); gap: 6px;
  }
  .step.active { background: var(--card); border-color: var(--gold); }
  .step .no { width: 18px; height: 18px; font-size: 10px; flex: 0 0 18px; }
  .step .ss { display: none; }                /* 小屏只留标题 */
  .step .tt { font-size: 13px; white-space: nowrap; }
  .step .sic { width: 16px; height: 16px; }

  .stage { padding: 12px; overflow: visible; }

  /* 卡片与行：全部单列、可换行 */
  .card { border-radius: 10px; }
  .pad { padding: 12px; }
  .row { flex-wrap: wrap; gap: 8px; }
  .row > .spacer { display: none; }
  .row > b { width: 100%; }
  .grow { flex: 1 1 100%; }

  /* 触控目标：主按钮 44px、小按钮 36px */
  .btn { min-height: 44px; padding: 10px 16px; font-size: 15px; border-radius: 10px; }
  .btn.mini { min-height: 36px; padding: 7px 12px; font-size: 13px; }

  /* 输入类：16px 防 iOS 自动放大 */
  input, select, textarea { font-size: 16px !important; }
  input[type=file] { width: 100%; }

  /* 列表行：允许换行，时间/操作不挤在一起 */
  .vrow { flex-wrap: wrap; }
  .vrow > .sm:first-child { min-width: 22px; }

  /* 视频与预览 */
  video { max-height: 46vh; }

  /* 顶部提示条不遮内容 */
  .statebar { font-size: 13px; }

  /* 任务进度条占满宽度 */
  .taskbar { font-size: 12px; }
}

/* 超窄屏（iPhone SE 等 320-360px）再收一点 */
@media (max-width: 380px) {
  .top .brand b { font-size: 15px; }
  .step { padding: 7px 8px; }
  .step .tt { font-size: 12px; }
  .stage { padding: 10px; }
  .btn { font-size: 14px; }
}

/* --- mobile refine --- */
@media (max-width: 760px) {
  /* 顶部：一行放下 品牌 + 工程选择 + 构建；装饰性 pill 隐藏 */
  /* 允许换行：品牌+选择+构建占第一行，工程状态自动落到第二行 */
  .top { flex-wrap: wrap; height: auto; min-height: 56px; padding: 6px 10px; gap: 8px 8px;
         align-items: center; }
  .top .brand { flex: 0 0 auto; }
  .top .brand span { display: none; }
  .top #netPill, .top #userPill { display: none; }
  .top .sel { flex: 1 1 34%; min-width: 108px; max-width: none; height: 38px; }
  .top .proj { order: 9; flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top #btnBuildAll { flex: 0 0 auto; min-height: 38px; padding: 0 14px; }
  .top .proj {
    order: 9; flex: 1 1 100%; width: 100%;
    font-size: 12px; line-height: 1.4; padding-bottom: 6px;
  }

  /* 统计卡：三个数字横排不折断，按钮独占一行 */
  .stats { flex-wrap: wrap; gap: 10px 18px !important; }
  .stats > div { white-space: nowrap; }
  .stats > .spacer { display: none; }
  .stats > button { flex: 1 1 100%; margin-top: 2px; }

  /* 账号卡：按钮单独一行、等分宽度 */
  .row > .btn.mini { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  /* 文件选择框独占一行，避免原生控件把文件名挤成 "未...件" */
  input[type=file] { flex: 1 1 100%; max-width: 100%; }
  input[type=file]::file-selector-button { margin-right: 8px; padding: 6px 10px; border-radius: 8px; }
}

/* --- grid-fix mobile: 所有多栏栅格在手机上强制单列 ---
   原因：这些栅格是写死像素的（1fr 760px / 230px 1fr 268px / 1fr 320px），
   手机上右侧栏比容器还宽，直接溢出（用户实测"分段预览比上下都宽"、
   "画面确认版面基本是乱的"）。这里用 !important 压过行内样式。 */
@media (max-width: 760px) {
  .s1, .s2, .s3, .s4 {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }
  div[style*="grid-template-columns:"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  /* 四个并排的小方块（模板选择之类）保留两列，别堆成一条 */
  div[style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* 分段列表 / 候选列表：限高可滚，避免整页超长 */
  #segList { max-height: 40vh !important; }
  .cands { background: transparent !important; }
  .segrow { padding: 10px 8px; }

  /* 文案编辑框：手机上给足高度，别用 52vh 卡住 */
  #scr { height: 42vh !important; }

  /* 画面确认页：当前段的预览图/播放按钮占满宽度 */
  #cardsStage video, #cardsStage img { width: 100%; height: auto; }
}

/* --- cards-mobile: 画面确认页在手机上先看当前段，再看长列表 --- */
@media (max-width: 760px) {
  /* 三栏容器的三个子元素：段列表 / 当前段 / 候选 */
  .s3 > div:first-child,
  div[style*="grid-template-columns:280px"] > div:first-child {
    max-height: 34vh !important;
    overflow: auto !important;
  }
  /* 当前段预览图：占满宽度，别留固定尺寸 */
  #cardDetail img, #cardDetail video { width: 100% !important; height: auto !important; }
  /* 候选卡：单列堆叠，间距收紧 */
  #cardDetail .cand, .cands .cand { margin-bottom: 8px !important; }
}