/* ============================================================
   大健康AI+IP超级个体 —— 共享设计系统（单一来源）
   视频工作流看板 与 总览工作台 共用这一套变量与组件，
   保证颜色 / 按钮 / 字号 100% 一致（一个模子）。
   ============================================================ */
  /* ===== 主题变量：默认=夜间黑 ===== */
  :root{
    --bg:#0A0A0A; --bg-soft:#101010; --nav-bg:#0F0F0F;
    --panel:#141414; --panel-2:#1C1C1C; --well:#202020;
    --text:#F4F4F4; --text-strong:#FFFFFF; --muted:#9A9A9A; --muted-2:#5A5A5A; --nav-text:#C9C9C9;
    --border:#262626; --border-soft:#1F1F1F; --placeholder:#666666;
    --hover:rgba(255,255,255,.05);
    /* 2026-11-06 黑白主视觉：夜间 = 近黑底 + 白字白按钮，唯一点缀暖橙。
       品牌绿不再是默认色，降级成可选的「绿色护眼」主题。 */
    --accent:#F2F2ED; --accent-hover:#DCDCD5; --accent-2:#FF9A5C; --accent-ink:#0A0A08;
    --accent-fg:#F2F2ED; --accent2-fg:#FF9A5C; --accent2-ink:#141410; --warn:#FF9A5C; --warn-fg:#FF9A5C; --warn-ink:#141410;
    --accent-rgb:242,242,237; --accent2-rgb:255,154,92;
    --ghost-border:rgba(255,255,255,.28);
    --red:#FF8A80; --red-bg:rgba(255,120,110,.12);
    --nav-bg:linear-gradient(180deg,#141416 0%,#0C0C0E 100%);
    --nav-item:#C9C9C4; --nav-item-hover-bg:rgba(255,255,255,.10); --nav-item-hover:#FFFFFF;
    --nav-active-bg:rgba(255,255,255,.14); --nav-active-fg:#FFFFFF;
    --nav-group:rgba(255,255,255,.42);
    --nav-shadow:2px 0 16px rgba(0,0,0,.28); --nav-border:rgba(255,255,255,.08);
    /* 2026-11-07 字体层级：统一字体栈 + 大标题/数字专用字体 */
    --font-sans:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
    --font-display:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    --font-num:"Bahnschrift","DIN Alternate","Helvetica Neue",Arial,"Microsoft YaHei",sans-serif;
  }
  /* 黑白简洁（默认）：暖白底 + 墨黑主色 + 纯白侧栏，只用一点暖橙做强调。
     参照主流产品的主视觉：大面积黑白，颜色只出现在"当前/推荐/警示"这种极小面积上。 */
  [data-theme="light"]{
    --bg:#F4F4F1; --bg-soft:#FFFFFF; --nav-bg:#FFFFFF;
    --panel:#FFFFFF; --panel-2:#F5F5F2; --well:#EFEFEB;
    --text:#1B1B18; --text-strong:#0A0A08; --muted:#6B6B64; --muted-2:#9C9C94; --nav-text:#3A3A35;
    --border:#E4E4DE; --border-soft:#EEEEE9; --placeholder:#A5A59D;
    --hover:rgba(0,0,0,.045);
    --accent:#141410; --accent-hover:#2C2C26; --accent-ink:#FFFFFF;
    --accent-fg:#141410; --accent2-fg:#B4491B; --accent2-ink:#FFFFFF; --warn:#B4491B; --warn-fg:#B4491B; --warn-ink:#FFFFFF;
    --accent-rgb:20,20,16; --accent2-rgb:180,73,27;
    --ghost-border:rgba(20,20,16,.30);
    --red:#B4342F; --red-bg:rgba(180,52,47,.08);
    --nav-item:#4A4A44; --nav-item-hover-bg:rgba(0,0,0,.05); --nav-item-hover:#0A0A08;
    --nav-active-bg:#141410; --nav-active-fg:#FFFFFF;
    --nav-group:#A5A59D;
    --nav-shadow:none; --nav-border:#E4E4DE;
  }
  /* 绿色护眼：以绿为主，柔和低对比 */
  [data-theme="green"]{
    --bg:#081109; --bg-soft:#0B1510; --nav-bg:linear-gradient(180deg,#103526 0%,#0A2317 100%);
    --panel:#11231A; --panel-2:#193322; --well:#0D1B13;
    --text:#E6F2E9; --text-strong:#FFFFFF; --muted:#8FB39C; --muted-2:#5E7E6A; --nav-text:#C7E0CF;
    --border:#2E5A40; --border-soft:#1E3A2B; --placeholder:#6E8E7B;
    --hover:rgba(255,255,255,.06);
    /* 绿色护眼（可选）：把原来的品牌绿变量补全，不再依赖 :root（默认已改黑白） */
    --accent:#3EDC81; --accent-hover:#35C573; --accent-2:#B9FF66; --accent-ink:#0A0A0A;
    --accent-fg:#6CF09A; --accent2-fg:#B6F58C; --accent2-ink:#0A0A0A; --warn:#B9FF66; --warn-fg:#B9FF66; --warn-ink:#0A0A0A;
    --accent-rgb:62,220,129; --accent2-rgb:185,255,102;
    --ghost-border:rgba(62,220,129,.45);
    --red:#C0392B; --red-bg:rgba(192,57,43,.12);
    --nav-item-hover-bg:rgba(255,255,255,.10); --nav-item-hover:#FFFFFF;
    --nav-active-bg:rgba(62,220,129,.18); --nav-active-fg:#8AF3B5;
    --nav-group:rgba(199,224,207,.55);
  }
  /* 蓝色数据大屏：近黑深海军蓝底 + 亮蓝/青霓虹强调 + 白卡边（抖音数据大屏风格，已加黑白对比） */
  [data-theme="blue"]{
    --bg:#050D16; --bg-soft:#081222; --nav-bg:linear-gradient(180deg,#0A1F3A 0%,#061526 100%);
    --panel:#0E1F3C; --panel-2:#13315C; --well:#0B1A33;
    --text:#EAF2FF; --text-strong:#FFFFFF; --muted:#7FA8D6; --muted-2:#4E6E96; --nav-text:#BBD6F5;
    --border:#2A4F80; --border-soft:#16315A; --placeholder:#5C7BA6;
    --hover:rgba(120,180,255,.12);
    --accent:#3AA6FF; --accent-hover:#5FBEFF; --accent-2:#19ECFF; --accent-ink:#04122B;
    --accent-fg:#6CC4FF; --accent2-fg:#5CF0FF; --accent2-ink:#04122B; --warn:#19ECFF; --warn-fg:#19ECFF; --warn-ink:#04122B;
    --accent-rgb:58,166,255; --accent2-rgb:25,236,255;
    --ghost-border:rgba(58,166,255,.55);
    --red:#FF8A8A; --red-bg:rgba(255,120,120,.14);
    /* 导航/侧边栏统一为蓝色调（蓝色数据大屏：大面积品牌色不再掺绿） */
    --nav-item:#BBD6F5; --nav-item-hover-bg:rgba(120,180,255,.14); --nav-item-hover:#EAF2FF;
    --nav-active-bg:rgba(58,166,255,.20); --nav-active-fg:#8FD0FF;
    --nav-group:rgba(187,214,245,.55);
    --nav-shadow:2px 0 16px rgba(0,0,0,.30); --nav-border:rgba(0,0,0,.25);
  }

  /* 奶白卡片：暖奶白底 + 深字(暖近黑)；绿仅作按钮/强调不铺满 → 对比"浓"、阅读扎实、不浮 */
  [data-theme="cream"]{
    --bg:#F2E9D6; --bg-soft:#FBF6EB;
    /* 侧栏改成同色系浅奶白（原来深绿 → 与主区割裂）；文字改深色 */
    --nav-bg:linear-gradient(180deg,#FBF6EB 0%,#F3E9D5 100%);
    --nav-item:#4B4335; --nav-item-hover:#15110A; --nav-item-hover-bg:rgba(46,158,91,.10);
    --nav-active-bg:rgba(46,158,91,.15); --nav-active-fg:#1E7A45;
    --nav-group:rgba(90,80,60,.5); --nav-border:rgba(42,36,24,.08);
    --nav-shadow:2px 0 14px rgba(42,36,24,.05);
    --panel:#FFFDF8; --panel-2:#F6EFDF; --well:#EDE3CE;
    --text:#2A2418; --text-strong:#15110A; --muted:#7A7160; --muted-2:#A89E8A; --nav-text:#3A3225;
    --border:#E5D9BF; --border-soft:#EFE5CF; --placeholder:#9C9180;
    --hover:rgba(0,0,0,.05);
    --accent:#2E9E5B; --accent-hover:#27884E; --accent-2:#8FB05A; --accent-ink:#FFFDF8;
    --accent-fg:#1E7A45; --accent2-fg:#3F6B1E; --accent2-ink:#FFFDF8; --warn:#C2600A; --warn-fg:#B5540A; --warn-ink:#FFF7EC;
    --ghost-border:rgba(46,158,91,.5);
    --red:#C0392B; --red-bg:rgba(192,57,43,.1);
  }
  [data-theme="cream"] .chip.on { background:var(--accent-fg); color:#FFFDF8; border-color:var(--accent-fg); }
  [data-theme="cream"] nav .item:hover { color:#15110A; }
  [data-theme="cream"] .panel, [data-theme="cream"] .card { box-shadow:0 2px 12px rgba(42,36,24,.09); }
  [data-theme="cream"] .lv { box-shadow:0 2px 10px rgba(42,36,24,.07); }

  /* ── 黑白主题 · 组件微调（2026-11-06）─────────────────────────────
     插画/缩略图统一降饱和，颜色只留极小面积：推荐徽章、数字人插画的那一点暖橙。 */
  [data-theme="light"] .logo { background:#141410; color:#FFFFFF; }
  [data-theme="light"] .way-pic,
  [data-theme="light"] .demo-shot { filter:grayscale(.92); }
  [data-theme="light"] .way-pic.dh,
  [data-theme="light"] .demo-shot.dh { filter:grayscale(.45); }
  [data-theme="light"] .way-free { color:#141410; background:#EFEFEB; border:1px solid #E4E4DE; }
  [data-theme="light"] .way-rec { color:#FFFFFF; background:#B4491B; }
  [data-theme="light"] .way-warn { color:#B4491B; background:#F7EDE6; }
  [data-theme="light"] .ways-draft.ok { color:#141410; background:#EFEFEB; }
  [data-theme="light"] .panel, [data-theme="light"] .card { box-shadow:none; }

  /* ══ 对外展示页 = 绿色系（2026-11-07 崔崔拍板：「两个都要，按页面分」）══════════
     作用域 data-scope="public"：登录 / 三选一 / 算力充值 —— 给客户第一眼亲和感；
     其余后台操作页不加这个属性，仍走黑白（专业克制）。
     放在所有主题块之后，保证覆盖优先级；后台页永远不受影响。 */
  [data-scope="public"]{
    --accent:#2E9E5B; --accent-hover:#27884E; --accent-ink:#FFFFFF;
    --accent-fg:#1E7A45; --accent-2:#8FB05A;
    --accent2-fg:#2E9E5B; --accent2-ink:#FFFFFF;
    --accent-rgb:46,158,91; --accent2-rgb:46,158,91;
    /* 绿页面里的提示色也收到同色系，避免"绿底跳出一块砖红" */
    --warn:#1E7A45; --warn-fg:#1E7A45; --warn-ink:#FFFFFF;
  }
  /* 深色底上绿要提亮，否则发闷、白字对比不足 */
  [data-theme="night"][data-scope="public"],
  [data-theme="dark"][data-scope="public"]{
    --accent:#3EDC81; --accent-hover:#35C573; --accent-ink:#0A0A0A;
    --accent-fg:#6CF09A; --accent-2:#B9FF66;
    --accent2-fg:#3EDC81; --accent2-ink:#0A0A0A;
    --accent-rgb:62,220,129; --accent2-rgb:62,220,129;
    --warn:#B9FF66; --warn-fg:#B9FF66; --warn-ink:#0A0A0A;
  }
  /* 三选一页的徽章：在绿页面里也别再冒砖红 */
  [data-scope="public"] .way-rec{ background:var(--accent); color:var(--accent-ink); }
  [data-scope="public"] .way-warn{ background:rgba(var(--accent-rgb),.12); color:var(--accent-fg); }
  [data-scope="public"] .way-free{ color:var(--accent-fg); background:var(--well); border:1px solid var(--border); }
  [data-theme="light"] nav .item.active { background:#EFEFEB; color:#0A0A08; box-shadow:inset 3px 0 0 #141410; }

  /* 绿/蓝主题：卡片顶部白色细线，注入"白"打破纯色一片；奶白主题：顶部品牌绿线 + 浅阴影，托住"浓度" */
  [data-theme="blue"] .panel, [data-theme="blue"] .card, [data-theme="blue"] .lv,
  [data-theme="green"] .panel, [data-theme="green"] .card, [data-theme="green"] .lv { border-top:2px solid rgba(255,255,255,.18); }
  [data-theme="cream"] .panel, [data-theme="cream"] .card, [data-theme="cream"] .lv { border-top:3px solid var(--accent); }

  * { margin:0; padding:0; box-sizing:border-box; font-family:var(--font-sans); }
  html { font-size:26px; }
  body { background:var(--bg); color:var(--text); font-size:1rem; line-height:1.7; transition:background .3s,color .3s; }
  button { cursor:pointer; font-family:inherit; }
  .btn { background:var(--accent); color:var(--accent-ink); border:none; border-radius:.5rem; padding:.65rem 1.25rem; font-size:.9rem; font-weight:700; }
  /* 阶段按钮：当前该点的那一个实、其余淡 —— 一眼知道下一步按哪 */
  .btn.step-on { box-shadow:0 6px 20px rgba(0,0,0,.20); font-weight:800; transform:translateY(-1px); }
  .btn.step-on:hover { transform:translateY(-2px); }
  .btn.step-off { opacity:.50; filter:saturate(.55); box-shadow:none; }
  .btn.step-off:hover { opacity:.85; filter:saturate(.9); }
  .btn:hover { background:var(--accent-hover); }
  .btn.ghost { background:transparent; color:var(--accent-fg); border:1px solid var(--ghost-border); }
  .btn.sm { padding:.45rem .9rem; font-size:.85rem; }
  header { min-height:4.2rem; padding-top:.5rem; padding-bottom:.5rem; background:var(--bg-soft); border-bottom:1px solid var(--border); display:flex; align-items:center; padding-left:1.2rem; padding-right:1.2rem; gap:.8rem; position:sticky; top:0; z-index:10; transition:background .3s,border-color .3s; }
  .logo { width:2.2rem; height:2.2rem; background:linear-gradient(135deg,var(--accent-2),var(--accent)); border-radius:.5rem; color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; flex-shrink:0; }
  /* 2026-11-07：品牌标识——导航栏用简化金色图标 + 清晰文字；书法主 logo 留给展示页大字 */
  .logo-icon { height:2.3rem; width:2.3rem; flex-shrink:0; border-radius:.6rem; display:block; object-fit:contain; box-shadow:0 1px 3px rgba(0,0,0,.12); margin-right:.8rem; }
  header .brand h1 { color:var(--ink); font-weight:800; letter-spacing:.02em; }
  header h1 { font-size:1.05rem; font-weight:700; color:var(--text-strong); line-height:1.3; }
  header .sub { font-size:.78rem; color:var(--muted); }
  /* 品牌区：标题与副标题同一行，副标题不折行（之前折成两行，整块占三行太高） */
  header .brand { display:flex; align-items:baseline; gap:.6rem; min-width:0; flex-wrap:nowrap; }
  header .brand .sub { white-space:nowrap; font-size:.66rem; }
  .right-h { margin-left:auto; display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--muted); flex-wrap:wrap; justify-content:flex-end; }
  .zoom { display:inline-flex; border:1px solid var(--border); border-radius:.5rem; overflow:hidden; background:var(--panel-2); }
  .zoom button { border:none; background:var(--panel-2); color:var(--muted); padding:.4rem .7rem; font-size:.8rem; }
  .zoom button.on { background:var(--accent); color:var(--accent-ink); font-weight:700; }
  .theme-sel { font-size:.82rem; padding:.4rem .6rem; border-radius:.5rem; border:1px solid var(--border); background:var(--panel-2); color:var(--text); max-width:8rem; }
  /* 2026-10-20 子页外壳：header 里的「当前在哪个页」标签（对标拆解 / 同城沙龙邀约…） */
  header .pg-tag { font-size:.78rem; font-weight:600; padding:.18rem .55rem; border-radius:.45rem; background:var(--well); color:var(--muted); white-space:nowrap; }
  .layout { display:flex; height:calc(100vh - 5.5rem); overflow:hidden; }
  /* 2026-10-21 外壳三段锁高（崔崔反馈：一滑动 header 消失一半）：
     header+账号条+内容区总高锁死一屏，body 永不滚动、滚动只发生在 main 内，
     header 从此钉死在顶部。不支持 :has 的老浏览器自动退回上面的 calc 方案。 */
  body:has(> .layout){ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
  body:has(> .layout) > header,
  body:has(> .layout) > .accbar { flex:0 0 auto; }
  body:has(> .layout) > .layout { flex:1 1 auto; min-height:0; height:auto; }
  nav { width:11.6rem; background:var(--nav-bg); border-right:1px solid var(--nav-border); padding:.7rem .5rem; flex-shrink:0; overflow-y:auto; transition:background .3s,border-color .3s,box-shadow .3s; box-shadow:var(--nav-shadow); }
  nav .item { padding:.52rem .65rem; border-radius:.55rem; font-size:.86rem; color:var(--nav-item); margin-bottom:.14rem; cursor:pointer; line-height:1.35; transition:background .15s,color .15s; }
  nav .item:hover { background:var(--nav-item-hover-bg); color:var(--nav-item-hover); }
  nav .item.active { background:var(--nav-active-bg); color:var(--nav-active-fg); font-weight:700; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
  nav .group { font-size:.7rem; color:var(--nav-group); padding:.7rem .7rem .22rem; }
  main { flex:1; padding:1.05rem 1.25rem; overflow-x:hidden; overflow-y:auto; }
  .wf-frame { width:100%; height:calc(100vh - 8.6rem); border:0; display:block; border-radius:.6rem; background:var(--panel); }
  .kpi-wrap { display:flex; gap:.8rem; flex-wrap:wrap; margin:.2rem 0 1.1rem; }
  .wf-embed { width:100%; border:0; display:block; background:var(--panel); border-radius:.75rem; min-height:62vh; }
  .wf-board { margin-top:.4rem; }
  h2.page { font-size:1.32rem; font-weight:700; color:var(--text-strong); line-height:1.35; }
  p.desc { font-size:.9rem; color:var(--muted); margin:.3rem 0 1.1rem; line-height:1.6; }
  /* 2026-10-31 崔崔反馈「布局太松、要拉两次鼠标」：面板内边距与间距整体收紧，
     屏幕可用面积让给内容本身，同时 h3 上间距压缩让标题贴住自己的区块。 */
  .panel { background:var(--panel); border:1px solid var(--border); border-radius:.75rem; padding:.95rem 1.05rem; margin-bottom:.75rem; transition:background .3s,border-color .3s; }
  .panel h3 { font-size:1rem; font-weight:700; margin-bottom:.55rem; color:var(--text-strong); }
  .grid { display:grid; gap:.8rem; }
  .g5 { grid-template-columns:repeat(5,1fr); }
  .g4 { grid-template-columns:repeat(4,1fr); }
  .g3 { grid-template-columns:repeat(3,1fr); }
  .g2 { grid-template-columns:repeat(2,1fr); }
  /* 一键出片：左表单 + 右样板双栏 */
  .qm-grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:1.1rem; align-items:start; }
  .qm-grid > div { min-width:0; }
  .qm-action { margin-top:1.1rem; display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--border); border-radius:.75rem; padding:1rem 1.2rem; }
  .qm-action .btn { flex:0 0 auto; }
  .qm-speed { width:120px; font-size:1.05rem; text-align:center; -moz-appearance:textfield; }
  .qm-speed::-webkit-outer-spin-button, .qm-speed::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  @media (max-width:1100px){ .qm-grid { grid-template-columns:1fr; } }
  /* 写口播稿：左操作 + 右结果双栏（2026-10-31）——合规结果/四步梳理不再堆在正文下方，
     告别「写完还要下拉两次才看到怎么回事」。窄屏自动退回单列。 */
  .scr-wrap { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:.85rem; align-items:start; }
  .scr-wrap > div { min-width:0; }
  .scr-side.side-off { display:none; }
  .scr-wrap.side-off { grid-template-columns:1fr; }
  @media (max-width:1100px){ .scr-wrap { grid-template-columns:1fr; } }
  .scr-side > .panel, .scr-side > div { margin-bottom:.7rem; }
  #sText { min-height:9.5rem; max-height:52vh; resize:vertical; }
  details.panel.dy-panel { border:2px solid var(--accent2-fg); background:linear-gradient(135deg,rgba(180,73,27,.10),rgba(255,154,92,.10)); }
  details.panel.dy-panel > summary { font-weight:600; font-size:.95rem; }
  details.panel.dy-panel > summary::before { color:var(--accent2-fg); }
  .qm-step { display:flex; gap:12px; align-items:flex-start; padding:.55rem 0; }
  .qm-step + .qm-step { border-top:1px dashed var(--border); }
  .qm-num { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--accent2-fg); color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; margin-top:2px; }
  .qm-sample { border:1px solid var(--border); border-radius:.6rem; padding:.8rem .9rem; margin-bottom:.7rem; background:var(--panel-2); }
  .qm-sample:last-of-type { margin-bottom:0; }
  .qm-sample-tag { display:inline-block; font-size:.72rem; font-weight:700; color:var(--accent2-fg); background:rgba(var(--accent-rgb),.14); border-radius:999px; padding:.15rem .6rem; margin-bottom:.45rem; }
  .qm-sample-txt { font-size:.88rem; line-height:1.75; color:var(--text); margin-bottom:.6rem; }
  .card { background:var(--panel); border:1px solid var(--border); border-radius:.75rem; padding:1rem; }
  .card .num { font-size:.75rem; color:var(--warn-fg); font-weight:700; }
  .card .t { font-size:1rem; font-weight:700; margin:.3rem 0; line-height:1.4; color:var(--text-strong); }
  .card .s { font-size:.85rem; color:var(--muted); line-height:1.65; }
  /* 可点击的步骤卡（首页流水线） */
  .card.clickable { cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .15s; position:relative; }
  .card.clickable:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 8px 24px rgba(var(--accent-rgb),.14); }
  .card.clickable:active { transform:translateY(-1px); }
  .card .go { margin-top:.7rem; font-size:.82rem; color:var(--accent-fg); font-weight:700; display:flex; align-items:center; gap:.3rem; transition:gap .15s; }
  .card.clickable:hover .go { gap:.55rem; }
  .st { display:inline-block; margin-top:.5rem; font-size:.8rem; padding:.2rem .7rem; border-radius:.7rem; }
  .st.done { background:rgba(var(--accent-rgb),.14); color:var(--accent-fg); }
  .st.doing { background:rgba(255,162,77,.16); color:var(--warn-fg); }
  .st.wait { background:var(--well); color:var(--muted); }
  .st.pink { background:rgba(var(--accent2-rgb),.14); color:var(--accent2-fg); }
  .emo-pick { -webkit-appearance:none; appearance:none; font-size:.82rem; font-weight:700; line-height:1.4; padding:.18rem .55rem; margin-top:.3rem; border-radius:.55rem; border:1px solid var(--accent-fg); background:rgba(var(--accent-rgb),.12); color:var(--accent-fg); cursor:pointer; max-width:9rem; }
  .emo-pick.add { border-style:dashed; background:transparent; color:var(--muted); font-weight:500; }
  .emo-pick:hover { filter:brightness(1.08); }
  .emo-pick:focus { outline:2px solid var(--accent); }
  .hook { border:1px solid var(--border); border-radius:.65rem; padding:1rem; background:var(--panel); min-width:0; }
  .hook .tag { font-size:.8rem; color:var(--accent2-fg); background:rgba(var(--accent2-rgb),.12); padding:.2rem .7rem; border-radius:.5rem; display:inline-block; }
  .hook .txt { font-size:1.02rem; font-weight:600; margin:.6rem 0 .3rem; line-height:1.75; color:var(--text); overflow-wrap:anywhere; word-break:break-word; }
  .hook .txt.clamp { max-height:5.25em; overflow:hidden; }
  /* 「查看全文/收起」：与卡片内 .btn.ghost.sm 同一套观感（圆角+边框+内边距+等字号）。
     原来是 .hook .more（只在网格卡片生效）且 background:none;padding:0，导致随机钩子区的按钮掉了样式、特别小不融合。 */
  .more { display:inline-flex; align-items:center; gap:.25rem; margin:.45rem 0 .3rem; padding:.45rem .9rem; font-size:.85rem; font-weight:600; line-height:1.4; color:var(--accent-fg); background:var(--well); border:1px solid var(--ghost-border); border-radius:.5rem; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
  .more:hover { background:transparent; border-color:var(--accent-fg); text-decoration:none; }
  .more:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .hook-full { margin:.5rem 0 .2rem; padding:.75rem .9rem; background:var(--well); border-radius:.5rem; font-size:.97rem; line-height:1.8; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
  .hook .tag.long { background:rgba(255,90,90,.14); color:#ff8a8a; font-weight:600; }
  .hook .meta { font-size:.85rem; color:var(--muted); line-height:1.6; }
  /* 制作页钩子选择：紧凑卡片，一屏多显示几条（2026-10-30 崔崔反馈字太大占页面） */
  .hook.hk-compact { padding:.5rem .65rem; border-radius:.5rem; }
  .hook.hk-compact .tag { font-size:.6rem; padding:.1rem .42rem; border-radius:.4rem; }
  .hook.hk-compact .txt { font-size:.72rem; font-weight:500; margin:.32rem 0 .15rem; line-height:1.45; overflow-wrap:anywhere; word-break:break-word; }
  .hook.hk-compact .txt.clamp { max-height:4.35em; overflow:hidden; }
  .hook-rand { border:1.5px dashed var(--accent2-fg); border-radius:.8rem; padding:1.1rem 1.2rem; background:rgba(var(--accent2-rgb),.08); margin-bottom:18px; }
  .hr-label { font-size:.82rem; color:var(--accent2-fg); font-weight:600; margin-bottom:.6rem; }
  .hr-body { display:flex; gap:.7rem; align-items:flex-start; flex-wrap:wrap; }
  .hr-txt { font-size:1.18rem; font-weight:700; line-height:1.7; color:var(--text); flex:1; min-width:200px; overflow-wrap:anywhere; word-break:break-word; }
  .hr-txt.clamp { max-height:5.1em; overflow:hidden; }
  .chip { font-size:.78rem; color:var(--muted); background:var(--panel-2); border:1px solid var(--border); padding:.3rem .62rem; border-radius:999px; cursor:pointer; user-select:none; transition:.15s; }
  .chip b { color:var(--accent2-fg); margin-left:.22rem; font-size:.72rem; }
  .chip:hover { border-color:var(--accent2-fg); color:var(--text); }
  .chip.on { background:var(--accent2-fg); color:var(--accent2-ink,#141410); border-color:var(--accent2-fg); font-weight:600; }
  .chip.on b { color:var(--accent2-ink,#141410); }
  /* 2026-11-06：小操作弹窗统一「毛玻璃重度虚化」背景——聚焦前景小窗、虚化整页（参考崔崔截图：小窗清晰、背后整页模糊压暗） */
  .overlay{position:fixed;inset:0;background:rgba(16,17,12,.42);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;backdrop-filter:blur(14px) saturate(1.02);-webkit-backdrop-filter:blur(14px) saturate(1.02)}
  .overlay.center{align-items:center;padding:24px 16px}
  .modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:wbPop .16s ease-out}
  @keyframes wbPop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
  /* 任意小操作浮层打开时，收起常驻的 AI 导师组件，避免它浮在虚化层之上抢焦点（崔崔 11-06） */
  body:has(.overlay, .mx-modal, .app-confirm-overlay.show, .vp-overlay, .wf-app .modal.on) .exp-root{display:none}
  /* 2026-11-07 实测发现：登录页 AI 导师浮泡会压住「登录」按钮右侧 → 登录态一律不显示 */
  body:has(#root:not(.hidden)) .exp-root{display:none!important}
  .acc-card{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--panel-2)}
  .acc-card .ac-name{font-size:1.02rem;font-weight:700}
  .acc-card .ac-meta{font-size:.84rem;color:var(--muted);margin-top:4px}
  .acc-card .ac-note{font-size:.82rem;color:var(--muted);margin-top:4px;line-height:1.5}
  /* 账号管理：安卓滑屏式居中轮播（coverflow）—— 正在查看的号居中放大清晰，其余退到左右两侧缩小变虚 */
  .acc-carousel{position:relative;display:flex;align-items:center;justify-content:center;padding:16px 0 8px;min-height:158px}
  /* 三槽网格：中间永远是被编辑的号（居中实显），两侧是虚卡（变暗、虚线、不缩放 → 字号仍一致） */
  .acc-stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
  .acc-slot{display:flex;min-width:0}
  .acc-slot.left{justify-content:flex-end}
  .acc-slot.mid{justify-content:center}
  .acc-slot.right{justify-content:flex-start}
  .acc-card.center{width:min(400px,60vw);border:2px solid var(--accent);box-shadow:0 14px 38px rgba(0,0,0,.18);opacity:1;position:relative;z-index:3}
  .acc-card.side{width:min(250px,36vw);min-height:156px;border:1.5px dashed var(--border);opacity:.45;cursor:pointer;z-index:1;transition:opacity .25s ease,border-color .25s ease}
  .acc-card.side:hover{opacity:.85;border-color:var(--accent)}
  .acc-card .ac-center-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.72rem;line-height:1;padding:3px 11px;border-radius:999px;white-space:nowrap;letter-spacing:.5px}
  .acc-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.15);user-select:none}
  .acc-nav:hover{background:var(--panel-2)}
  .acc-nav:disabled{opacity:.22;cursor:default;box-shadow:none}
  .acc-nav.prev{left:4px}
  .acc-nav.next{right:4px}
  .acc-now{border:1px solid var(--accent2-fg);background:rgba(120,200,90,.07);border-radius:10px;padding:10px 14px;margin-bottom:14px;cursor:pointer;font-size:.95rem;line-height:1.7}
  .acc-fields{display:flex;flex-wrap:wrap;gap:10px 14px;margin-bottom:6px}
  .acc-field{display:flex;flex-direction:column;gap:3px;flex:1;min-width:150px}
  .acc-field>span{font-size:.78rem;font-weight:600;color:var(--muted)}
  .acc-field input,.acc-field select{width:100%;box-sizing:border-box}
  .acc-fields-note{font-size:.8rem;color:var(--muted);margin:0 0 10px;line-height:1.6}
  .review { border:1px solid var(--accent2-fg); border-radius:.6rem; padding:.9rem 1rem; margin-top:12px; background:rgba(var(--accent2-rgb),.08); }
  .review .rv-h { font-weight:700; color:var(--accent2-fg); margin-bottom:.5rem; }
  .review .rv-row { font-size:.9rem; line-height:1.9; color:var(--text); }
  .review .rv-row b { color:var(--muted); margin-right:.3rem; }
  .review .rv-note { font-size:.85rem; color:var(--muted); margin-top:.5rem; line-height:1.7; }
  table { width:100%; border-collapse:collapse; font-size:.82rem; }
  th { text-align:left; color:var(--muted); font-weight:600; font-size:.78rem; padding:.7rem .6rem; border-bottom:1px solid var(--border); }
  td { padding:.7rem .5rem; border-bottom:1px solid var(--border-soft); line-height:1.6; color:var(--text); }
  /* 出片进度：操作后把目标行稳稳标亮（不再闪烁，避免晃眼），让用户一眼知道"现在看的是哪一行" */
  tr.row-focused { background:rgba(var(--accent-rgb),.10); box-shadow:inset 3px 0 0 0 var(--accent); }
  tr.row-focused > td:first-child { border-top-left-radius:.4rem; border-bottom-left-radius:.4rem; }
  input, select, textarea { font-family:inherit; font-size:.9rem; padding:.65rem .8rem; border:1px solid var(--border); border-radius:.5rem; outline:none; background:var(--panel-2); color:var(--text); }
  input:focus, textarea:focus, select:focus { border-color:var(--accent); }
  input::placeholder, textarea::placeholder { color:var(--placeholder); }
  textarea { width:100%; line-height:1.72; }
  .row { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }
  .chiprow { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin:.35rem 0; }
  .lib-filter-row { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:flex-start; margin:.2rem 0 .1rem; }
  .chiprow .lbl { font-size:.8rem; color:var(--muted); min-width:2.2rem; }
  .lib-chips .chip b { color:var(--accent2-fg); }
  .lib-chips .chip.on b { color:var(--accent2-ink,#141410); }
  /* 文案库胶囊缩小 + 选中深色高亮（2026-10-26 走查：让“选了啥”一眼可见） */
  .lib-chips .chip { font-size:.74rem; padding:.24rem .55rem; }
  .lib-chips .chip b { font-size:.68rem; }
  /* 🔴 2026-11-07：原来写死 #1f9e5b 绿 —— 黑白主题下这里冒绿，是全站"看着像绿色主题"的主因。改吃主题变量。 */
  .lib-chips .chip.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; box-shadow:0 2px 8px rgba(var(--accent-rgb),.22); }
  .lib-chips .chip.on b { color:var(--accent-ink); }
  /* ── 文案库筛选反馈条（2026-10-26：筛选后给出明确“页面变了”的反馈）── */
  .lib-filterbar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 .9rem; padding:.5rem .8rem; border-radius:.6rem; background:var(--panel-2); border:1px solid var(--accent2-fg); animation: lfbFlash .55s ease; }
  .lib-filterbar .lfb-ic { font-size:.95rem; }
  .lib-filterbar .lfb-txt { font-size:.85rem; color:var(--text); }
  .lib-filterbar .lfb-txt b { color:var(--accent2-fg); }
  .lib-filterbar .lfb-clr { margin-left:auto; }
  @keyframes lfbFlash { 0% { background:var(--accent2-fg); } 100% { background:var(--panel-2); } }
  /* 文案库多选下拉浮层（齿轮式上下滚选） */
  .lib-dd { position:relative; display:inline-block; }
  .lib-dd-btn { font-size:.74rem; padding:.24rem .55rem; border-radius:999px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); cursor:pointer; }
  .lib-dd-btn.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; }
  .lib-dd-pop { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:200; min-width:190px; max-height:260px; overflow:auto; background:var(--panel); border:1px solid var(--border); border-radius:.6rem; padding:.5rem .55rem; box-shadow:0 8px 24px rgba(0,0,0,.25); }
  .lib-dd-pop.open { display:flex; flex-wrap:wrap; gap:.25rem .55rem; }
  .lib-dd-pop label { display:flex; align-items:center; gap:.35rem; font-size:.82rem; padding:.3rem .55rem; cursor:pointer; border-radius:.4rem; white-space:nowrap; flex:0 0 auto; background:var(--panel-2); border:1px solid var(--border); transition:background .12s,border-color .12s; }
  .lib-dd-pop label:hover { background:var(--panel); border-color:var(--accent2-fg); }
  .lib-dd-pop .dd-cnt { margin-left:.25rem; color:var(--muted); font-size:.72rem; }
  /* 卡片淡入（筛选后“页面变了”的实感） */
  .lib-fade { animation: libFadeIn .35s ease both; }
  @keyframes libFadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }
  /* ── 回收站浮层（右下角小图标入口）── */
  .trash-fab { position:fixed; right:18px; bottom:18px; z-index:80; width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:var(--panel); color:var(--muted); font-size:1.25rem; cursor:pointer; box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; transition:.15s; }
  .trash-fab:hover { color:var(--text); border-color:var(--accent2-fg); transform:translateY(-2px); }
  .trash-panel { position:fixed; right:18px; bottom:74px; z-index:81; width:300px; max-height:60vh; overflow:auto; background:var(--panel); border:1px solid var(--border); border-radius:.75rem; box-shadow:var(--shadow-lg); padding:.9rem; }
  .trash-panel.hidden { display:none; }
  .tp-head { display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:.95rem; margin-bottom:.6rem; }
  .tp-empty { font-size:.85rem; color:var(--muted); line-height:1.6; }
  .tp-item { display:flex; flex-direction:column; gap:.3rem; padding:.6rem 0; border-bottom:1px dashed var(--border-soft); }
  .tp-name { font-size:.85rem; color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tp-meta { font-size:.78rem; color:var(--muted); }
  .tp-meta b { color:var(--warn-fg); }
  .tp-actions { display:flex; gap:.4rem; }
  .rwbox { border:1px solid var(--border); border-radius:.6rem; padding:.6rem; background:var(--panel-2); }
  .rwbadge { font-size:.78rem; color:var(--accent2-fg); margin-bottom:.4rem; font-weight:600; line-height:1.4; }
  details.panel > summary { list-style:none; cursor:pointer; font-weight:600; }
  details.panel > summary::-webkit-details-marker { display:none; }
  details.panel > summary::before { content:'▸ '; color:var(--muted); }
  details.panel[open] > summary::before { content:'▾ '; }
  .kpi { background:var(--panel); border:1px solid var(--border); border-radius:.75rem; padding:1.15rem; }
  .kpi .v { font-size:1.65rem; font-weight:800; color:var(--accent-fg); line-height:1.2; }
  .kpi .k { font-size:.85rem; color:var(--muted); margin-top:.3rem; }
  .fstep { display:flex; align-items:center; gap:.8rem; margin-bottom:.5rem; }
  .fstep .lab { width:8rem; font-size:.85rem; color:var(--muted); text-align:right; flex-shrink:0; }
  .fstep .bar2 { height:1.9rem; background:linear-gradient(135deg,var(--accent-2),var(--accent)); border-radius:.4rem; color:var(--accent-ink); font-size:.85rem; font-weight:700; display:flex; align-items:center; padding:0 .7rem; min-width:3rem; }
  .lv { border:2px solid var(--border); border-radius:.75rem; padding:1.1rem; background:var(--panel); }
  .lv.on { border-color:var(--accent); background:rgba(var(--accent-rgb),.05); }
  .lv .n { font-size:.8rem; color:var(--muted); }
  .lv .nm { font-size:1.08rem; font-weight:700; margin:.15rem 0 .4rem; color:var(--text-strong); }
  .lv .g { font-size:.9rem; color:var(--nav-text); line-height:1.75; }
  .lv .p { font-size:.9rem; color:var(--accent2-fg); margin-top:.5rem; font-weight:700; }
  .bar { height:.55rem; background:var(--well); border-radius:.4rem; overflow:hidden; margin-top:.5rem; }
  .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
  .warn { background:var(--red-bg); color:var(--red); font-size:.9rem; padding:.7rem .9rem; border-radius:.5rem; margin-top:.7rem; line-height:1.7; }
  .safe { background:rgba(var(--accent-rgb),.12); color:var(--accent-fg); font-size:.9rem; padding:.7rem .9rem; border-radius:.5rem; margin-top:.7rem; line-height:1.7; }
  .note { font-size:.9rem; color:var(--muted); line-height:1.8; background:var(--panel); border:1px dashed var(--border-soft); border-radius:.6rem; padding:.85rem; }
  .login { max-width:32rem; margin:11vh auto; background:var(--panel); border:1px solid var(--border); border-radius:1.1rem; padding:2.4rem 2.2rem; box-shadow:0 10px 36px rgba(var(--accent-rgb),.08); }
  .login h2 { font-size:1.4rem; margin-bottom:.4rem; color:var(--text-strong); }
  .login .desc { font-size:.95rem; margin-bottom:1.2rem; }
  .login input { width:100%; margin-bottom:.9rem; padding:.85rem .9rem; font-size:1rem; }
  .login .btn { width:100%; padding:.9rem; font-size:1rem; margin-top:.4rem; }
  .login .note { font-size:.85rem; margin-top:1.1rem; padding:.85rem; }
  .login a { color:var(--accent-fg); }
  /* 登录/注册外包装：桌面居中限宽，手机端由下方 @media 改满宽 */
  .auth-wrap { max-width:34rem; margin:6vh auto; display:flex; flex-direction:column; gap:1rem; padding:0 .5rem; }
  .hidden { display:none !important; }
  .toast { position:fixed; top:5rem; left:50%; transform:translateX(-50%); background:var(--accent-2); color:var(--accent-ink); font-weight:700; padding:.7rem 1.4rem; border-radius:1.2rem; font-size:.95rem; z-index:99; }
  @media (max-width:1100px){
    .g5,.g4{ grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(2,1fr);}
    nav{width:9rem;}
  }
  @media (max-width:820px){
    html{font-size:15px;}
    .layout{flex-direction:column;}
    nav{width:auto;border-right:none;border-bottom:1px solid var(--border);display:flex;overflow-x:auto;overflow-y:visible;height:auto;padding:.6rem;gap:.4rem;}
    nav .item{white-space:nowrap;font-size:.95rem;padding:.6rem .9rem;}
    nav .group{display:none;}
    main{padding:1.1rem;}
    .g5,.g4,.g3,.g2{grid-template-columns:1fr;}
    header{height:auto;padding:.7rem 1rem;flex-wrap:wrap;}
    .logo{width:2rem;height:2rem;}
    .fstep .lab{width:6.5rem;text-align:left;}
    .kpi .v{font-size:1.5rem;}
    table{font-size:.9rem;}
    .theme-sel{max-width:6.5rem;}
  }

  /* ============================================================
     视频工作流看板专用类（全部用上面工作台同名变量 → 一个模子）
     .wf-app 为看板挂载根，内部样式全部作用域在 .wf-app 下，
     不污染工作台其它视图；变量直接继承所在页面的主题。
     ============================================================ */
  .wf-app{width:100%;}
  .wf-app .tabs{display:flex;gap:.4rem;padding:0 0 .9rem;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:1rem;}
  .wf-app .tabs button{border:1px solid var(--border);background:var(--panel-2);color:var(--muted);padding:.5rem 1rem;border-radius:.6rem;cursor:pointer;font-size:.92rem;font-weight:600;font-family:inherit;transition:background .15s,color .15s,border-color .15s;}
  .wf-app .tabs button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
  .wf-app .sec{display:none;}
  .wf-app .sec.on{display:block;}
  .wf-app .board{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.8rem;align-items:flex-start;}
  .wf-app .col{background:var(--panel);border:1px solid var(--border);border-radius:.75rem;min-width:15rem;max-width:15rem;flex:0 0 auto;display:flex;flex-direction:column;min-height:7rem;}
  .wf-app .col h3{margin:0;padding:.6rem .8rem;font-size:1rem;background:var(--panel-2);color:var(--text-strong);border-radius:.75rem .75rem 0 0;display:flex;justify-content:space-between;align-items:center;font-weight:700;}
  .wf-app .col h3 .n{background:var(--accent);color:var(--accent-ink);border-radius:1rem;padding:.1rem .55rem;font-size:.8rem;font-weight:700;}
  .wf-app .col .body{padding:.6rem;display:flex;flex-direction:column;gap:.6rem;flex:1;}
  .wf-app .col.drop{outline:2px dashed var(--accent);outline-offset:-4px;}
  .wf-app .kcard{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:.6rem;padding:.7rem .8rem;cursor:pointer;font-size:.92rem;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:box-shadow .15s,border-color .15s;}
  .wf-app .kcard:hover{box-shadow:0 3px 10px rgba(0,0,0,.12);border-color:var(--accent);}
  .wf-app .kcard.redo{border-left-color:var(--red);}
  .wf-app .kcard.sla{border-left-color:var(--red);box-shadow:0 0 0 1px var(--red) inset;}
  .wf-app .kcard .t{font-weight:700;line-height:1.4;margin-bottom:.4rem;color:var(--text-strong);font-size:1rem;}
  .wf-app .kcard .m{color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}
  .wf-app .tag{background:var(--well);color:var(--muted);border-radius:.4rem;padding:.15rem .5rem;font-size:.78rem;font-weight:600;}
  .wf-app .tag.re{background:var(--red-bg);color:var(--red);}
  .wf-app .tag.acc{background:rgba(255,162,77,.16);color:var(--warn-fg);}
  .wf-app .addc{font-size:.85rem;color:var(--accent-fg);text-align:center;padding:.5rem;border:1px dashed var(--border);border-radius:.6rem;cursor:pointer;margin-top:auto;}
  .wf-app .addc:hover{background:var(--hover);}
  .wf-app .kcard .acts2{margin-top:.5rem;display:flex;gap:.4rem;align-items:center;}
  .wf-app .pbtn{background:var(--accent);color:var(--accent-ink);border:0;padding:.4rem .9rem;border-radius:.5rem;cursor:pointer;font-size:.85rem;font-weight:700;font-family:inherit;}
  .wf-app .pbtn:hover{filter:brightness(1.05);}
  .wf-app .kcard .aud{margin-top:.5rem;}
  .wf-app .kcard .aud audio{width:100%;height:2rem;}
  .wf-app .modal{position:fixed;inset:0;background:rgba(16,17,12,.42);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:40px 16px;overflow:auto;backdrop-filter:blur(14px) saturate(1.02);-webkit-backdrop-filter:blur(14px) saturate(1.02);}
  .wf-app .modal.on{display:flex;}
  .wf-app .box{background:var(--panel);border:1px solid var(--border);border-radius:.9rem;padding:1.4rem;width:100%;max-width:620px;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:wbPop .16s ease-out;}
  .wf-app .box h2{margin:0 0 .9rem;font-size:1.15rem;color:var(--text-strong);}
  .wf-app .fld{margin-bottom:.8rem;}
  .wf-app .fld label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.35rem;font-weight:600;}
  .wf-app .fld input,.wf-app .fld select,.wf-app .fld textarea{width:100%;border:1px solid var(--border);border-radius:.5rem;padding:.6rem .8rem;font-size:.9rem;font-family:inherit;color:var(--text);background:var(--panel-2);}
  .wf-app .fld textarea{min-height:6rem;resize:vertical;line-height:1.6;}
  .wf-app .row2{display:flex;gap:.7rem;}
  .wf-app .row2 .fld{flex:1;}
  .wf-app .chk{display:flex;gap:.5rem;flex-wrap:wrap;}
  .wf-app .chk label{display:flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--text);font-weight:500;background:var(--panel-2);border:1px solid var(--border);padding:.4rem .7rem;border-radius:.5rem;cursor:pointer;}
  .wf-app .acts{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap;}
  .wf-app .btn.g{background:transparent;color:var(--accent-fg);border:1px solid var(--ghost-border);}
  .wf-app .btn.r{background:var(--red-bg);color:var(--red);border:1px solid var(--red);}
  .wf-app .actlog{background:var(--well);border:1px solid var(--border);border-radius:.5rem;padding:.5rem .7rem;font-size:.82rem;color:var(--muted);max-height:7rem;overflow:auto;}
  .wf-app .actlog div{padding:.1rem 0;border-bottom:1px dashed var(--border);}
  .wf-app .sla-banner{background:var(--red-bg);border:1px solid var(--red);color:var(--red);border-radius:.6rem;padding:.7rem 1rem;font-size:.9rem;margin-bottom:.9rem;line-height:1.5;}
  .wf-app .sla-banner b{font-size:1rem;}
  .wf-app .kpi{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem;}
  .wf-app .kpi .b{background:var(--panel);border:1px solid var(--border);border-radius:.75rem;padding:1rem 1.2rem;min-width:7rem;}
  .wf-app .kpi .b .v{font-size:1.65rem;font-weight:800;color:var(--accent-fg);line-height:1.2;}
  .wf-app .kpi .b .l{font-size:.85rem;color:var(--muted);margin-top:.3rem;}
  .wf-app .calm{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;}
  .wf-app .calm .d{background:var(--panel);border:1px solid var(--border);border-radius:.5rem;min-height:3.5rem;padding:.3rem;font-size:.78rem;color:var(--muted);}
  .wf-app .calm .d.h{background:var(--well);color:var(--accent-fg);font-weight:700;}
  .wf-app .calm .d .c{background:var(--panel-2);color:var(--text);border-radius:.3rem;padding:.05rem .25rem;margin-top:.1rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wf-app .login{display:flex;align-items:center;justify-content:center;min-height:60vh;flex-direction:column;gap:.9rem;max-width:none;margin:0;padding:2rem;box-shadow:none;}
  .wf-app .login input{padding:.7rem 1rem;font-size:1rem;border:1px solid var(--border);border-radius:.5rem;width:16rem;background:var(--panel-2);color:var(--text);}
  .wf-app .tpl-lane{margin-bottom:1.4rem;}
  .wf-app .tpl-lane .lh{font-size:1rem;font-weight:700;padding:.5rem .9rem;border-radius:.6rem .6rem 0 0;color:#fff;display:inline-block;}
  .wf-app .tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:.8rem;margin-top:.6rem;}
  .wf-app .tplc{background:var(--panel);border:1px solid var(--border);border-radius:0 .75rem .75rem .75rem;padding:1rem 1.1rem;box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;flex-direction:column;}
  .wf-app .tplc h4{margin:0 0 .4rem;font-size:1rem;color:var(--accent-fg);}
  .wf-app .tplc .meta{font-size:.82rem;color:var(--muted);margin:.2rem 0;line-height:1.5;}
  .wf-app .tplc .meta b{color:var(--text);}
  .wf-app .skeleton{background:var(--well);border:1px dashed var(--border);border-radius:.5rem;padding:.6rem .8rem;margin:.5rem 0;font-size:.82rem;color:var(--text);white-space:pre-wrap;max-height:11rem;overflow:auto;line-height:1.55;}
  .wf-app .tplc .compliance{font-size:.82rem;color:var(--warn-fg);background:var(--red-bg);border:1px solid var(--red);border-radius:.5rem;padding:.4rem .6rem;margin:.4rem 0;line-height:1.5;}
  .wf-app .lane-tag{display:inline-block;border-radius:.4rem;padding:.1rem .5rem;font-size:.78rem;font-weight:600;}
  .wf-app .asset-mod{background:var(--panel);border:1px solid var(--border);border-radius:.75rem;padding:1.1rem 1.2rem;margin-bottom:1rem;}
  .wf-app .asset-mod .am-h{margin:0 0 .5rem;font-size:1.05rem;font-weight:700;color:var(--text-strong);}
  .wf-app .asset-mod .upload{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.6rem 0;}
  .wf-app .asset-mod .upload input[type=file]{font-size:.85rem;max-width:20rem;}
  .wf-app .asset-mod .upload input:not([type=file]){font-size:.85rem;padding:.5rem .8rem;border:1px solid var(--border);border-radius:.5rem;background:var(--well);color:var(--text);}
  .wf-app .alist{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;}
  .wf-app .aitem{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:var(--well);border:1px solid var(--border);border-radius:.6rem;padding:.6rem .8rem;font-size:.9rem;color:var(--text);}
  .wf-app .aitem .mut{color:var(--muted);font-size:.82rem;}
  .wf-app .aitem audio{height:2rem;}
  .wf-app .aitem .grow{flex:1;}
  .wf-app .vstat{color:var(--accent-fg);font-size:.85rem;margin:.35rem 0;min-height:1.1rem;font-weight:600;}
  .wf-app .aitem video{height:48px;border-radius:.4rem;background:#000;}
  .wf-app .asset-mod .upload input[type=number]{width:4.5rem;font-size:.85rem;padding:.5rem .6rem;border:1px solid var(--border);border-radius:.5rem;background:var(--well);color:var(--text);}
  .wf-app .aitem .mute{display:flex;align-items:center;gap:.25rem;font-size:.8rem;color:var(--muted);white-space:nowrap;}
  .wf-app .aitem .vname{cursor:pointer;border-bottom:1px dotted var(--accent-fg);padding-bottom:1px;}
  .wf-app .aitem .vname:hover{color:var(--accent-fg);}
  .wf-app .aitem .vname-edit{width:100%;font:inherit;padding:.2rem .4rem;border:1px solid var(--accent-fg);border-radius:.4rem;background:var(--panel);color:var(--text);}

  /* ===== 演示模式 · 引导式分步讲解 ===== */
  .tour-stage{border:1px solid var(--line);border-radius:.9rem;background:var(--panel-2);padding:1rem;margin:.4rem 0;min-height:260px;display:flex;align-items:center;justify-content:center}
  .tour-cap{font-size:1.05rem;line-height:1.7;color:var(--ink);background:var(--well);border-left:4px solid var(--accent);border-radius:.5rem;padding:.8rem 1rem;margin:.5rem 0;min-height:3.4rem}
  .tour-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
  .tour-bar .btn:disabled{opacity:.4;cursor:not-allowed}
  .tour-dots{display:flex;gap:.5rem;justify-content:center;margin-top:.3rem}
  .tour-dots .dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--line);transition:.2s}
  .tour-dots .dot.on{background:var(--accent);transform:scale(1.25)}

  /* ===== 工作台看板统计卡（学混剪矩阵：4 张卡 + 最近成片）===== */
  .kpi.warn { border-color:var(--warn-fg); }
  .kpi.warn .v { color:var(--warn-fg); }
  .kpi.done .v { color:var(--accent-fg); }
  .kpi.doing .v { color:var(--accent2-fg); }
  .recent-list { display:flex; flex-direction:column; gap:.5rem; margin-top:.2rem; }
  .recent { display:flex; justify-content:space-between; align-items:center; padding:.55rem .8rem; background:var(--panel-2); border:1px solid var(--border); border-radius:.55rem; }
  .recent .rname { font-weight:700; color:var(--text-strong); font-size:.95rem; }
  .recent .rmeta { font-size:.8rem; color:var(--muted); }

  /* ===== 待发布排期（真机发布）===== */
  .pub-platbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:12px; padding:.55rem .7rem; border:1px solid var(--border); border-radius:.55rem; background:var(--panel-2); }
  .pub-platbar .btn.sm { font-size:.8rem; padding:.32rem .6rem; }
  .pub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(21rem,1fr)); gap:.9rem; }
  .card.pub { display:flex; flex-direction:column; gap:.5rem; }
  .pub-top { display:flex; justify-content:space-between; align-items:center; }
  .pub-plat { font-weight:700; color:var(--text-strong); font-size:.95rem; }
  .pub-title { font-size:1.05rem; font-weight:700; color:var(--text-strong); line-height:1.4; border-radius:.4rem; padding:.2rem .4rem; outline:none; }
  .pub-title:focus { background:var(--panel-2); border:1px dashed var(--accent-fg); }
  .pub-meta { display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.82rem; color:var(--muted); }
  .pub-row { display:flex; align-items:center; gap:.4rem; }
  .pub-row .note { width:4.5rem; flex-shrink:0; margin:0; white-space:nowrap; }
  .pub-in { flex:1; font:inherit; font-size:.85rem; padding:.32rem .5rem; border-radius:.45rem; border:1px solid var(--border); background:var(--panel-2); color:var(--text); }
  .pub-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.3rem; }
  .pub-actions select { font:inherit; font-size:.85rem; padding:.4rem .6rem; border-radius:.45rem; border:1px solid var(--border); background:var(--panel-2); color:var(--text); }
  .pub-in.ta { width:100%; resize:vertical; min-height:2.4rem; line-height:1.4; }
  .pub-row { align-items:flex-start; }
  .push-result { margin-top:.5rem; padding:.5rem .6rem; border-radius:.45rem; background:var(--panel-2); color:var(--muted); font-size:.78rem; line-height:1.4; border:1px dashed var(--border); }
  .btn.primary { background:var(--accent); color:#fff; }
  .btn.primary:hover { filter:brightness(1.06); }
  .btn.primary:disabled { opacity:.4; cursor:not-allowed; }

/* ── 可折叠的分组标题（2026-09-21 导航收纳）── */
nav .group.foldable {
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding-right: .9rem; user-select: none; transition: color .15s;
}
nav .group.foldable:hover { color: var(--nav-text); }
nav .group .chev { font-size: .68rem; opacity: .65; line-height: 1; }

/* ── 八步流程条（2026-09-28 首页引导，学 8.0 流程条）── */
.stepbar { display:flex; align-items:stretch; gap:.3rem; flex-wrap:wrap; margin:.4rem 0 .2rem; }
.step {
  flex:1 1 120px; min-width:118px; background:var(--panel-2); border:1px solid var(--border);
  border-radius:.6rem; padding:.6rem .65rem; cursor:pointer;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.step:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 18px rgba(var(--accent-rgb),.12); }
.step .num {
  display:inline-flex; align-items:center; justify-content:center; width:1.55rem; height:1.55rem;
  border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:.8rem; margin-bottom:.35rem;
}
.step .t { font-weight:700; font-size:.92rem; color:var(--text-strong); line-height:1.3; }
.step .d { font-size:.72rem; color:var(--muted); margin-top:.25rem; line-height:1.4; }
.step-arrow { align-self:center; color:var(--muted-2); font-size:1rem; flex:0 0 auto; }

/* ── 首页分隔线 / 小标题 ── */
hr.sep { border:none; border-top:1px solid var(--border); margin:1.1rem 0; }
h3.sec { font-size:1.05rem; color:var(--text-strong); margin:.4rem 0 .7rem; font-weight:700; }

/* ── 聚合视图卡片（我的素材 / 爆款灵感）── */
.asset-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.asset-card h3 { margin:.3rem 0 .4rem; font-size:1.05rem; }
.asset-emoji { font-size:1.9rem; line-height:1; margin-bottom:.2rem; }
.asset-card .btn { margin-top:.7rem; }
.asset-card .cnt { font-size:.72rem; font-weight:700; color:var(--accent-fg); background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:.1rem .55rem; margin-left:.4rem; vertical-align:middle; }
.asset-list { list-style:none; margin:.4rem 0 .2rem; padding:0; width:100%; max-height:15rem; overflow:auto; }
.asset-li { display:flex; align-items:center; gap:.45rem; padding:.5rem .65rem; background:var(--panel-2); border:1px solid var(--border); border-radius:.5rem; margin-bottom:.4rem; font-size:.88rem; color:var(--text); line-height:1.3; }
.asset-li .al-ico { flex:none; font-size:1rem; }
.asset-li .al-name { font-weight:600; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; }
.asset-li .al-meta { flex:none; font-size:.74rem; color:var(--muted); margin-left:auto; white-space:nowrap; }
.asset-li .al-badge { flex:none; font-size:.68rem; font-weight:700; color:var(--accent-ink); background:var(--accent); border-radius:.4rem; padding:.05rem .4rem; }
.asset-li .al-badge.stop { color:var(--warn-fg); background:rgba(255,162,77,.16); }
.al-empty { width:100%; font-size:.82rem; color:var(--muted); background:var(--panel-2); border:1px dashed var(--border-soft); border-radius:.5rem; padding:.6rem .75rem; margin:.4rem 0 .2rem; line-height:1.5; }
.asset-h { margin:1.3rem 0 .6rem; font-size:1.02rem; color:var(--text-strong); display:flex; align-items:center; }
.asset-h:first-of-type { margin-top:1.1rem; }
/* 2026-10-31 崔崔反馈「音色试听有问题却没有任何编辑入口」：列表项改成两行，下一行是操作按钮 */
.asset-li-mg { flex-direction:column; align-items:stretch; gap:.35rem; }
.al-top { display:flex; align-items:center; gap:.4rem; min-width:0; }
.al-bottom { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.al-bottom audio { height:1.7rem; max-width:9rem; }
.btn.xs { padding:.3rem .55rem; font-size:.78rem; border-radius:.4rem; }
.al-note { font-size:.72rem; color:var(--muted); }
.asset-h .cnt { font-size:.72rem; font-weight:700; color:var(--accent-fg); background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:.1rem .55rem; margin-left:.4rem; }
/* 我的素材：左右分栏 —— 卡片正下方就是各自的已上传列表 */
/* 2026-10-31 崔崔反馈：共享一行说明会被误读成「说的是声音」——改成每栏各挂一块带标题的要求 */
.asset-tip{width:100%;margin-top:.6rem;padding:.6rem .75rem .65rem;background:var(--well);
  border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:.5rem}
.asset-tip .at-h{display:flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:700;color:var(--text-strong);line-height:1.4}
.asset-tip ol{margin:.35rem 0 0;padding-left:1.1rem;font-size:.8rem;line-height:1.8;color:var(--muted)}
.asset-tip ol li{margin:0}
.asset-tip b{color:var(--accent-fg);font-weight:700}
.asset-tip.at-vid{border-left-color:var(--accent2-fg)}
.asset-cols { align-items:start; }
.asset-col { display:flex; flex-direction:column; min-width:0; }
.asset-col .asset-h { margin-top:1.1rem; }

/* ── 钩子库：账号端筛选「呼吸灯」强调（2026-09-29：切口置顶 + 提醒 + 绿色呼吸灯）── */
.acc-breathe {
  border:1.5px solid rgba(var(--accent-rgb),.55);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(var(--accent-rgb),.06);
  animation: accBreath 1.9s ease-in-out infinite;
}
.acc-breathe .acc-hint {
  font-size:.9rem; line-height:1.75; color:var(--text);
  background:rgba(var(--accent-rgb),.10); border:1px dashed rgba(var(--accent-rgb),.5);
  border-radius:.6rem; padding:.7rem .85rem;
}
@keyframes accBreath {
  0%,100% { box-shadow:0 0 0 0 rgba(var(--accent-rgb),0); border-color:rgba(var(--accent-rgb),.45); }
  50%     { box-shadow:0 0 0 7px rgba(var(--accent-rgb),.16); border-color:rgba(var(--accent-rgb),1); }
}
@media (prefers-reduced-motion: reduce){
  .acc-breathe { animation:none; box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14); }
}



/* ===== 顶部账号条（2026-10-19 崔崔拍板：账号是导航的锚点）===== */
.accbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:.7rem 1.4rem;
  background:var(--panel-2,var(--panel));
  border-bottom:.5px solid var(--border);
  position:sticky;top:0;z-index:30;
}
.accbar .ab-lab{font-size:.88rem;color:var(--muted);white-space:nowrap;font-weight:500}
.accbar .ab-list{display:flex;gap:.4rem;flex-wrap:wrap}
.accbar .ab-btn{
  font:inherit;font-size:.9rem;padding:.35rem .75rem;border-radius:.5rem;cursor:pointer;
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  white-space:nowrap;transition:border-color .15s,background .15s;
}
.accbar .ab-btn:hover{border-color:var(--accent-fg)}
.accbar .ab-btn.on{border-color:var(--accent-fg);color:var(--accent-fg);font-weight:600}
.accbar .ab-btn.add{border-style:dashed;color:var(--muted)}
.accbar .ab-meta{display:flex;gap:.35rem;margin-left:auto;flex-wrap:wrap;align-items:center}
.accbar .ab-meta .tag{font-size:.78rem;padding:.1rem .45rem;border-radius:999px;
  background:var(--panel);border:.5px solid var(--border);color:var(--muted)}
/* 账号条：悬停才浮现的「✎ 改名」入口 —— 平时完全隐藏、不占空间，hover 才出现 */
.accbar .ab-item{position:relative;display:inline-flex}
.accbar .ab-edit{
  position:absolute;top:-8px;right:-8px;z-index:2;
  width:18px;height:18px;line-height:16px;text-align:center;padding:0;border-radius:50%;
  font-size:11px;cursor:pointer;
  background:var(--panel);border:1px solid var(--accent-fg);color:var(--accent-fg);
  opacity:0;transform:scale(.55);transition:opacity .12s,transform .12s,background .12s,color .12s;
}
.accbar .ab-item:hover .ab-edit{opacity:1;transform:scale(1)}
.accbar .ab-edit:hover{background:var(--accent-fg);color:#fff}
/* 窄窗口（桌面版默认窗口 / 页面放大到「大·超大」）：账号元信息换行，不再挤出横向滚动条 */
@media (max-width:1240px){
  .accbar{gap:10px}
  .accbar .ab-meta{margin-left:0;width:100%;justify-content:flex-start;padding-left:2px}
}

/* ===== 今天页：三条出片路线（竖排列表，缩放再大也不挤）===== */
.lane-grid{display:flex;flex-direction:column;gap:14px;margin:16px 0 8px}
.lane{
  --hc:var(--accent-fg);
  display:flex;align-items:center;gap:16px;
  border:1.5px solid var(--border);border-left:6px solid var(--hc);
  border-radius:var(--r-lg,14px);padding:16px 20px;cursor:pointer;
  background:color-mix(in srgb,var(--hc) 4%, var(--panel));
  transition:transform .12s, box-shadow .15s, border-color .15s;
}
.lane:hover{transform:translateY(-2px);border-color:var(--hc);
  box-shadow:0 8px 22px color-mix(in srgb,var(--hc) 18%, transparent)}
.lane .lane-ic{font-size:1.5rem;line-height:1;flex:0 0 auto;
  width:3rem;height:3rem;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--hc) 15%, transparent);
  color:var(--hc)}
.lane .lane-bd{flex:1 1 auto;min-width:0}
.lane .lane-name{font-size:1.12rem;font-weight:700;margin-bottom:4px;color:var(--text-strong)}
.lane .lane-steps{font-size:.88rem;color:var(--text);line-height:1.7}
.lane .lane-tip{font-size:.82rem;color:var(--muted);line-height:1.6;margin-top:2px}
.lane .lane-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.lane .lane-go{font-size:.92rem;font-weight:700;color:var(--accent-fg);white-space:nowrap;
  padding:.25rem .7rem;border-radius:999px;border:1px solid var(--ghost-border);background:transparent}
/* 三张路线卡：低饱和同色系，仅左条+图标带色，名字与按钮统一中性，避免与绿色侧栏打架 */
.lane.c-script{--hc:#E0698F}
.lane.c-mixcut{--hc:#E0923A}
.lane.c-graph{--hc:#2E9DAE}
@media (max-width:680px){
  .lane{flex-wrap:wrap}
  .lane .lane-right{width:100%;flex-direction:row;align-items:center;justify-content:space-between}
}

/* 九步流程条：默认收起（内容还在，只是不占第一屏） */
details.flowfold{margin:10px 0;border:.5px solid var(--border);border-radius:var(--r-lg,14px);
  background:var(--panel);padding:0}
details.flowfold>summary{cursor:pointer;padding:.7rem 1rem;font-size:.92rem;color:var(--muted);list-style:none}
details.flowfold>summary::-webkit-details-marker{display:none}
details.flowfold>summary::before{content:'▸ ';color:var(--accent-fg)}
details.flowfold[open]>summary::before{content:'▾ '}
details.flowfold>div{padding:0 1rem .8rem}

/* ══ 开始做一条：向导步骤条（选模式/定方向/开跑）══ */
.wstepper{display:flex;align-items:center;gap:.3rem;margin:.2rem 0 1rem;flex-wrap:wrap}
.wstep{border:2px solid var(--accent);color:var(--accent);background:transparent;border-radius:999px;padding:.35rem .95rem;font-size:.92rem;font-weight:700;white-space:nowrap;transition:.15s}
.wstep.done{background:var(--accent);color:var(--accent-ink)}
.wstep.active{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.22);transform:scale(1.04)}
.wconn{flex:0 0 22px;height:3px;background:var(--border);border-radius:2px}
.wconn.on{background:var(--accent)}

/* ══ 流水线步骤条（脚本→封面→配音→数字人→合规→发布）══ */
.pstepper{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:0;overflow-x:auto;margin:.3rem 0 .2rem;padding-bottom:.2rem}
.pstep{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:1 1 5rem;min-width:4.6rem}
.pdot{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;border:2px solid var(--accent);color:var(--accent);background:transparent;transition:.15s}
.pstep.done .pdot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pstep.run .pdot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);animation:pstepPulse 1.1s infinite}
.pstep.fail .pdot{border-color:#e53935;color:#e53935;background:transparent}
.ptxt{font-size:.74rem;color:var(--muted);text-align:center;line-height:1.15}
.pstep.done .ptxt,.pstep.run .ptxt{color:var(--accent-fg);font-weight:700}
.pstep.fail .ptxt{color:#e53935}
.pconn{flex:1 1 16px;height:3px;background:var(--border);margin-top:1rem;min-width:12px;border-radius:2px}
.pconn.done{background:var(--accent)}
@keyframes pstepPulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)}70%{box-shadow:0 0 0 9px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}

/* ══ 手动步进暂停横幅 ══ */
.pause-banner{margin-top:.8rem;padding:.9rem 1rem;border-radius:.7rem;border:2px solid var(--accent);background:rgba(var(--accent-rgb),.10)}
.pause-title{font-size:1.02rem;font-weight:800;color:var(--accent-fg);margin-bottom:.2rem}

/* ══ 成片卡片 · 失败记录删除按钮（只对失败/死记录显示，避免误删好成片）══ */
.vid-card{position:relative}
.vd-del{position:absolute;top:.35rem;right:.35rem;width:1.5rem;height:1.5rem;line-height:1.5rem;
  text-align:center;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:.8rem;
  cursor:pointer;z-index:2;transition:background .15s}
.vd-del:hover{background:var(--red)}


/* ===== 出片进度 · 流水线看板（2026-10-28 重做 · 干净版）===== */
/* 顶部阶段看板：一眼看出每步卡多少条，点一下即筛选 */
.qboard{display:flex;align-items:stretch;gap:.3rem;overflow-x:auto;padding:.6rem .7rem;margin-bottom:.7rem;
  background:var(--panel);border:1px solid var(--border);border-radius:.75rem}
.qbs{display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:4.5rem;flex:0 0 auto;
  padding:.45rem .55rem;border:1px solid var(--border);border-radius:.6rem;background:var(--panel-2);
  cursor:pointer;transition:.15s;font-family:inherit;text-align:center}
.qbs:hover{border-color:var(--accent);transform:translateY(-2px)}
.qbs.on{border-color:var(--accent-fg);background:rgba(var(--accent-rgb),.14);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.18)}
.qbs-ico{font-size:.82rem;line-height:1}
.qbs-n{font-size:1.15rem;font-weight:800;color:var(--text-strong);line-height:1.15}
.qbs.on .qbs-n{color:var(--accent-fg)}
.qbs-t{font-size:.72rem;color:var(--muted);white-space:nowrap}
.qbs.on .qbs-t{color:var(--accent-fg);font-weight:700}
.qb-arrow{align-self:center;color:var(--muted-2);font-size:.85rem;flex:0 0 auto;user-select:none}

/* 行内迷你轨道：脚本→配音→数字人→确认→发布（两行：节点+连线 / 名称） */
/* 行内迷你进度轨道：5 列网格，圆点与下方文字严格对齐，尺寸放大到可读 */
.qtrack{display:grid;grid-template-columns:repeat(5,1fr);width:100%;gap:0;margin-bottom:.25rem}
.qtrack .qcol{position:relative;display:flex;flex-direction:column;align-items:center;gap:.22rem;padding:.12rem 0;min-width:0}
.qtrack .qcol .qd{width:.6rem;height:.6rem;border-radius:50%;border:2px solid var(--border);background:var(--panel-2);box-sizing:border-box;z-index:1;flex:0 0 auto}
.qtrack .qcol.done .qd{background:var(--accent);border-color:var(--accent)}
.qtrack .qcol.cur  .qd{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
.qtrack .qcol.run  .qd{background:var(--accent);border-color:var(--accent);animation:pstepPulse 1.1s infinite}
.qtrack .qcol .ql{font-size:.74rem;line-height:1.1;color:var(--muted);white-space:nowrap;text-align:center}
.qtrack .qcol.done .ql,.qtrack .qcol.cur .ql,.qtrack .qcol.run .ql{color:var(--accent-fg);font-weight:700}
/* 连接线：上一列中心 → 本列中心 */
.qtrack .qcol:not(:first-child)::before{content:'';position:absolute;top:.42rem;left:-50%;width:100%;height:2px;background:var(--border);z-index:0;transform:translateY(-50%)}
.qtrack .qcol.cdone::before{background:var(--accent)}

/* 操作日志：动作留痕可查 */
.qlog{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:.6rem;
  background:var(--panel);padding:.55rem .8rem;margin-bottom:.7rem}
.qlog-t{font-size:.8rem;font-weight:700;color:var(--text-strong);margin-bottom:.25rem;display:flex;align-items:center;gap:.35rem}
.qlog-i{font-size:.82rem;color:var(--muted);display:flex;gap:.55rem;padding:.12rem 0;align-items:baseline}
.qlog-i b{color:var(--text);font-weight:600}
.qlog-i time{color:var(--muted-2);flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:.75rem}

/* 下一步提示 + 状态手动改写 */
.qnext{font-size:.76rem;color:var(--accent-fg);line-height:1.4}
.qnext.muted{color:var(--muted)}
.qsel{font-size:.76rem;padding:.28rem .45rem;border-radius:.45rem;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);max-width:11rem;font-family:inherit}
.qjust{font-size:.66rem;padding:.05rem .35rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-weight:700;vertical-align:middle;margin-left:.3rem}

th{white-space:nowrap}

/* 表格内轻量文字（不用 .note 虚线框，避免撑爆行高/列宽） */
td .note,td .tmeta{display:inline-block;background:transparent;border:none;padding:0;margin:0;
  font-size:.72rem;color:var(--muted);line-height:1.35;white-space:nowrap}
td .tmeta+.tmeta{margin-left:.35rem}

/* 出片进度表格：固定布局 + 列宽比例，整表横向铺满，窄屏才滚动 */
.qtable-wrap{overflow-x:auto;margin-bottom:1rem}
.qtable-wrap .panel{margin-bottom:0;padding:.9rem}
.qtable-wrap table{table-layout:fixed;width:100%;min-width:0}
.qtable-wrap td,.qtable-wrap th{padding:.6rem .45rem;vertical-align:top}
.qtable-wrap th:nth-child(1),.qtable-wrap td:nth-child(1){width:18%}
.qtable-wrap th:nth-child(2),.qtable-wrap td:nth-child(2){width:14%}
.qtable-wrap th:nth-child(3),.qtable-wrap td:nth-child(3){width:10%}
.qtable-wrap th:nth-child(4),.qtable-wrap td:nth-child(4){width:10%}
.qtable-wrap th:nth-child(5),.qtable-wrap td:nth-child(5){width:18%}
.qtable-wrap th:nth-child(6),.qtable-wrap td:nth-child(6){width:32%}
.qtable-wrap .btn.sm{padding:.4rem .6rem;font-size:.78rem;white-space:nowrap}
.qtable-wrap .qsel{max-width:7.6rem}
.qtable-wrap .qnext{font-size:.72rem;line-height:1.35;margin-bottom:.1rem}
/* 操作列：四个始终可见的图标按钮并排（退回 / 接力 / 改状态 / 删除），纯图标不写文字名 */
.qtable-wrap td.ops-col{vertical-align:middle}
.qtable-wrap .ops{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.qtable-wrap .obtn{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--panel-2);border-radius:.5rem;cursor:pointer;
  font-size:1rem;line-height:1;color:var(--text);padding:0;transition:border-color .12s,color .12s,background .12s}
.qtable-wrap .obtn:hover{border-color:var(--accent);color:var(--accent-fg)}
.qtable-wrap .obtn.danger{color:var(--red)}
.qtable-wrap .obtn.danger:hover{border-color:var(--red);background:rgba(198,40,40,.08)}
/* 改状态：图标按钮点开弹出状态选择（不常驻文字） */
.qtable-wrap .qmore-ico{position:relative;display:inline-block}
.qtable-wrap summary.obtn{list-style:none}
.qtable-wrap summary.obtn::-webkit-details-marker{display:none}
.qtable-wrap .qmore-ico[open] .qsel-mini{position:absolute;left:0;top:118%;z-index:60;background:var(--panel);
  border:1px solid var(--border);border-radius:.5rem;box-shadow:0 6px 18px rgba(0,0,0,.25);padding:.35rem;min-width:8.5rem}
.qtable-wrap .qsel-mini{font-size:.72rem;padding:.25rem .35rem;border-radius:.4rem;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);max-width:100%}

/* 标题列：最多 2 行，作者小字另起 */
.qtable-wrap td:nth-child(1){line-height:1.45}
.qtable-wrap td:nth-child(1) .tmeta{display:block;margin-top:.15rem}
.qtable-wrap td:nth-child(1) .qt-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;max-height:2.8em}

/* 进度列：轨道填满单元格 + 状态徽标字号收紧、可换行，绝不裁切/溢出 */
.qtable-wrap td:nth-child(2){line-height:1.3;overflow:visible}
.qtable-wrap td:nth-child(2) .st{display:inline-block;margin-top:.3rem;font-size:.6rem;line-height:1.25;
  padding:.14rem .5rem;white-space:normal;max-width:100%;word-break:keep-all}

/* 自定义确认弹窗（替代原生 confirm，居中显示，不钉在窗口顶部） */
.app-confirm-overlay{position:fixed;inset:0;background:rgba(16,17,12,.42);display:none;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(14px) saturate(1.02);-webkit-backdrop-filter:blur(14px) saturate(1.02)}
.app-confirm-overlay.show{display:flex}
.app-confirm-box{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:.9rem;
  padding:1.4rem 1.5rem;max-width:30rem;width:calc(100% - 3rem);box-shadow:0 20px 60px rgba(0,0,0,.4);font-size:.98rem;line-height:1.7;animation:wbPop .16s ease-out}
.app-confirm-box.danger{border-color:var(--red);box-shadow:0 20px 60px rgba(198,40,40,.25)}
.app-confirm-box .ac-msg{margin-bottom:1.1rem;white-space:normal;word-break:break-word}
.app-confirm-box .ac-actions{display:flex;gap:.7rem;justify-content:flex-end}
.app-confirm-box .ac-ok{background:var(--accent);color:var(--accent-fg)}
.app-confirm-box.danger .ac-ok{background:var(--red);color:#fff}

/* 声音 / 数字人 列：播放器严格锁在单元格内，不溢到邻列 */
.qtable-wrap td:nth-child(3),.qtable-wrap td:nth-child(4){text-align:center;vertical-align:top}
.qtable-wrap .pwrap{position:relative;display:block;width:100%;max-width:100%;overflow:hidden;border-radius:.3rem;background:var(--well)}
.qtable-wrap .pwrap audio,.qtable-wrap .pwrap video{width:100%!important;min-width:0!important;max-width:100%!important;display:block}
.qtable-wrap td:nth-child(3) .pwrap{height:2.1rem}
.qtable-wrap td:nth-child(4) .pwrap{height:3.2rem}
.qtable-wrap .pwrap audio{height:100%!important}
.qtable-wrap .pwrap video{height:100%!important;object-fit:cover}
.qtable-wrap td:nth-child(3) .pwrap,.qtable-wrap td:nth-child(4) .pwrap{margin:0 auto}
.qtable-wrap td:nth-child(3) .tmeta,.qtable-wrap td:nth-child(4) .tmeta{display:block;margin-top:.22rem;font-size:.7rem}

/* 数据列 */
.qtable-wrap td:nth-child(5) .tmeta{display:block;line-height:1.5}

/* 更多操作浮层：向上弹出，不被表格滚动容器裁切 */
.qmore{position:relative;margin-top:.3rem;display:inline-block}
.qmore>summary{list-style:none;cursor:pointer;font-size:.95rem;line-height:1;color:var(--muted);
  padding:.15rem .4rem;border-radius:.35rem;border:1px solid var(--border);background:var(--panel-2);user-select:none}
.qmore>summary::-webkit-details-marker{display:none}
.qmore>summary:hover{color:var(--accent-fg);border-color:var(--accent)}
.qmore[open]>summary{color:var(--accent-fg);border-color:var(--accent)}
.qmore-b{position:absolute;left:0;bottom:calc(100% + 4px);z-index:60;min-width:11rem;
  display:flex;flex-direction:column;gap:.3rem;padding:.5rem;background:var(--panel);
  border:1px solid var(--border);border-radius:.55rem;box-shadow:0 8px 24px rgba(0,0,0,.22);animation:qmoreIn .14s ease-out}
.qmore-b .btn.sm{justify-content:flex-start;width:100%}
.qmore-b .qsel{width:100%;max-width:none}
@keyframes qmoreIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===== 出片进度 · 竖屏成片/音频：点开大图预览（2026-10-28）===== */
/* 表格里的卡片：竖屏比例、紧凑、点一下弹大窗 */
/* 🔴 2026-11-07 崔崔定 VI 铁律：组件颜色一律吃主题变量，禁止写死色值。
   黑白主题→砖红、绿主题→绿、蓝主题→蓝，切主题整体自动统一，不会再冒出"橘黄配绿底"。 */
.vp-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  width:100%;max-width:76px;aspect-ratio:9/16;margin:.1rem auto;padding:.25rem;border-radius:.5rem;
  background:var(--panel-2);border:1px solid var(--border);
  color:var(--text);cursor:pointer;transition:.15s;overflow:hidden;text-align:center}
.vp-card:hover{border-color:var(--accent);transform:scale(1.05);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.vp-card:active{transform:scale(.98)}
/* 2026-10-31 崔崔反馈「数字人片子长得都一样，点完不知道在看哪条」：
   ① 缩略卡换成视频第一帧真实画面 ② 左上角打 #编号 ③ 中间大 ▶ 一眼看出能点 */
.vp-card-v{position:relative;padding:0;max-width:84px;background:#000;justify-content:flex-end;overflow:hidden}
.vp-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:.95}
.vp-no{position:absolute;top:.15rem;left:.2rem;z-index:2;font-size:.62rem;font-weight:700;line-height:1.4;
  padding:.05rem .3rem;border-radius:.3rem;background:rgba(0,0,0,.72);color:#fff}
.vp-card-v .vp-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  font-size:1.35rem;line-height:1;width:2.1rem;height:2.1rem;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.5);color:#fff}
.vp-card-v .vp-card-t{position:relative;z-index:2;width:100%;padding:.25rem 0 .3rem;font-size:.68rem;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78));color:#fff}
/* 工作台「我的成片」卡片：封面直接显示视频首帧 + 大 ▶ 就地预览 + #编号（2026-10-31） */
.vid-card{cursor:pointer}
.thumb-wrap{position:relative;overflow:hidden;border-radius:.5rem}
.vp-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.55);color:#fff;cursor:pointer;
  transition:background .15s}
.vp-big:hover{background:rgba(0,0,0,.75)}
.vid-card .vnum{position:absolute;top:.3rem;left:.3rem;z-index:3;font-size:.66rem;font-weight:700;
  padding:.08rem .32rem;border-radius:.3rem;background:rgba(0,0,0,.7);color:#fff}
/* 出片进度：每行打 #编号，跨页面指认同一条 */
.qid{display:inline-block;font-size:.72rem;font-weight:700;color:var(--muted);background:var(--well);
  border-radius:.3rem;padding:.05rem .35rem;margin-right:.35rem;vertical-align:middle}
/* 从别处点进来时的定位提示条：明确告诉用户「你现在看的是哪一条」 */
.focus-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem;padding:.5rem .75rem;
  border-radius:.55rem;border:1px solid var(--accent);background:var(--well);font-size:.9rem}
.focus-bar b{color:var(--text-strong)}
.focus-bar .fb-x{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem}
.vp-card-audio{aspect-ratio:1/1;max-width:74px;padding:.18rem;background:var(--well)}
.vp-play{font-size:1.05rem;line-height:1;color:var(--accent)}
/* 2026-11-07 崔崔：声音列要把"声音"顶出来 —— 大喇叭当主视觉，编号不再占位（标题列已有） */
.vp-card-audio .vp-play{font-size:1.55rem;line-height:1;color:var(--accent)}
.vp-card-audio .vp-card-t{font-size:.6rem;font-weight:600;letter-spacing:.02em}
/* 2026-11-07 崔崔：声音预览太窄、没有律动 → 加宽浮层 + 一排会起伏的声波柱 */
/* .vp-modal-a 尺寸规则已移到 .vp-modal 之后（避免被基础规则压住），见下方「声音预览放大版」 */
.vp-body-a{padding:1.3rem 1.2rem 1rem}
.vp-wave{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:76px;margin-bottom:1rem;padding:0 .2rem}
/* 2026-11-07 按美图稿：静止时不跳，只有真正在播时才起伏（否则像装饰动画，假） */
.vp-wave i{flex:1;max-width:6px;min-width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.18));
  transform-origin:bottom}
.vp-wave.playing i{animation:vpWave 1.15s ease-in-out infinite}
@keyframes vpWave{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
/* 声波"播放进度"语义：走到哪亮到哪（已播=主色实心 / 未播=淡底色） */
.vp-wave i.played{background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.7));opacity:1}
.vp-wave i.idle{background:var(--well);opacity:.75}
/* ── 自绘播放条（2026-11-07 按美图设计稿落地，替掉系统原生控件）── */
.vp-audio-native{display:none!important}
.vp-player{display:flex;align-items:center;gap:.8rem;width:100%}
.vp-pbtn{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;
  line-height:1;transition:transform .12s ease,filter .12s ease;box-shadow:0 2px 8px rgba(var(--accent-rgb),.28)}
.vp-pbtn:hover{filter:brightness(1.08)}
.vp-pbtn:active{transform:scale(.94)}
.vp-pico{font-size:1rem;letter-spacing:-1px;margin-left:1px}
.vp-track{position:relative;flex:1 1 auto;height:6px;border-radius:3px;background:rgba(var(--accent-rgb),.14);
  cursor:pointer;touch-action:none;min-width:4rem}
.vp-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;background:var(--accent)}
.vp-knob{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--accent);border:2px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.22);pointer-events:none}
.vp-time{flex:0 0 auto;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;min-width:5rem;text-align:right;letter-spacing:.01em}
.vp-vol{flex:0 0 auto;background:none;border:0;padding:0 .1rem;cursor:pointer;font-size:1rem;
  color:var(--muted);line-height:1;transition:color .12s}
.vp-vol:hover{color:var(--text)}
.vp-body-a .vp-audio{width:100%;height:46px;display:block}
.vp-card-t{font-size:.52rem;line-height:1.25;color:var(--muted);word-break:break-all}
/* 弹窗：遮罩 + 居中，竖屏视频按高度撑满、原生控件够大可暂停拖进度 */
.vp-overlay{position:fixed;inset:0;z-index:10000;background:rgba(8,10,14,.66);
  display:flex;align-items:center;justify-content:center;padding:2vh 2vw;animation:vpIn .15s ease-out;backdrop-filter:blur(12px) saturate(1.02);-webkit-backdrop-filter:blur(12px) saturate(1.02)}
@keyframes vpIn{from{opacity:0}to{opacity:1}}
.vp-modal{position:relative;max-width:96vw;max-height:94vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:.7rem;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);animation:wbPop .16s ease-out}
/* 声音预览放大版（2026-11-07 崔崔：太小 → 约 4 倍；先看布局，再用美图按这个版式重做页面） */
.vp-modal-a{width:min(94vw,880px) !important;max-width:94vw}
.vp-modal-a .vp-title{font-size:1.12rem;line-height:1.5;max-width:62%}
.vp-modal-a .vp-acts{gap:.6rem}
/* 声音：竖向排列 —— 声波铺满居中、播放器在下、胶囊最底（2026-11-07 崔崔定布局） */
.vp-body-a{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:1.1rem;padding:1.6rem 1.6rem 1.4rem}
.vp-body-a .vp-wave{width:100%;height:132px;gap:5px;margin:0}
.vp-body-a .vp-wave i{max-width:10px;min-width:5px;border-radius:5px}
.vp-body-a .vp-audio{width:100%;height:58px;display:block}
.vp-foot{display:flex;justify-content:center;padding-top:.1rem}
.vp-foot .vp-dl{font-size:1rem;padding:.62rem 1.6rem;border-radius:.55rem}
.vp-loading-fail{cursor:pointer;color:var(--danger,#d64545)}
.vp-loading-fail::before{display:none}
.vp-loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  gap:.6rem;background:var(--panel);color:var(--text);font-size:.98rem;border-radius:.55rem}
.vp-loading::before{content:"";width:1.15rem;height:1.15rem;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--accent);animation:vpSpin .8s linear infinite}
@keyframes vpSpin{to{transform:rotate(360deg)}}
.vp-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem .8rem;background:var(--panel-2);color:var(--text-strong);flex:0 0 auto;border-bottom:1px solid var(--border)}
.vp-title{font-size:.9rem;font-weight:600;line-height:1.3;word-break:break-all}
.vp-close{flex:0 0 auto;width:2rem;height:2rem;border:none;border-radius:.45rem;
  background:var(--well);color:var(--text);font-size:1.1rem;cursor:pointer;line-height:1}
.vp-close:hover{background:var(--panel-2);color:var(--text-strong)}
.vp-body{display:flex;align-items:center;justify-content:center;padding:.6rem;min-height:0;flex:1 1 auto}
.vp-video{max-width:94vw;max-height:82vh;width:auto;height:auto;background:#000;border-radius:.3rem}
.vp-audio{width:min(80vw,520px);height:auto}

/* 预览窗头部操作区：下载 + 关闭并排 */
.vp-acts{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.vp-dl{display:inline-flex;align-items:center;gap:.25rem;font-size:.82rem;font-weight:600;
  padding:.35rem .7rem;border-radius:.4rem;background:var(--accent);color:var(--accent-ink);
  text-decoration:none;cursor:pointer;line-height:1}
.vp-dl:hover{filter:brightness(1.08)}
/* 音频预览里的「推送到数字人」：用警示色标成下一步主动作，和列表里「出数字人」一致 */
.vp-dh{background:var(--warn);color:var(--warn-ink)}
.vp-dh:hover{filter:brightness(1.08)}

/* 托管模板：轮换池 chips（选好的钩子，点 ✕ 移除） */
.tpl-chip{display:inline-flex;align-items:center;gap:.35rem;margin:.2rem .35rem .2rem 0;
  padding:.28rem .6rem;border-radius:1rem;border:1px solid var(--border);
  background:var(--panel-2);font-size:.82rem;line-height:1.3;max-width:22rem}
.tpl-chip b{cursor:pointer;opacity:.6;font-weight:400}
.tpl-chip b:hover{opacity:1;color:var(--danger,#d64545)}


/* ===== 一键出片 v2（2026-11-05）：状态条 + 单列主流程 + 稿框下方右侧主按钮 ===== */
.qm-v2 { max-width:1040px; }
.qm-v2-hd { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.qm-v2-hd .page { font-size:1.5rem; }
.qm-steps { display:flex; align-items:center; font-size:.86rem; color:var(--muted); margin-right:clamp(0px,7vw,120px); }
.qm-stp { display:inline-flex; align-items:center; gap:6px; padding:0 12px; position:relative; white-space:nowrap; }
.qm-stp:not(:last-child)::after { content:''; width:22px; height:1px; background:var(--border); position:absolute; right:-11px; top:50%; }
.qm-stp i { display:inline-flex; width:22px; height:22px; border-radius:50%; border:1px solid var(--border); align-items:center; justify-content:center; font-style:normal; font-size:.78rem; font-weight:700; background:var(--panel-2); color:var(--muted); }
.qm-stp.done i { background:rgba(var(--accent-rgb),.18); border-color:transparent; color:var(--accent-fg); }
.qm-stp.now { color:var(--text-strong); font-weight:700; }
.qm-stp.now i { background:var(--accent-fg); border-color:transparent; color:#08210f; }

.qm-state { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; border-radius:.7rem; padding:.85rem 1.05rem; margin-bottom:14px; border:1px solid var(--border); border-left:4px solid var(--muted-2); background:var(--panel); }
.qm-state.ready { border-left-color:#1B8A4B; background:rgba(27,138,75,.09); }
.qm-state.empty { border-left-color:var(--warn-fg,#C2410C); }
.qm-state-l { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.95rem; color:var(--text); }
.qm-state-l b { font-size:1.02rem; color:var(--text-strong); }
.qm-state-r { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.9rem; color:var(--muted); }
.qm-state.ready .qm-state-r { color:var(--accent-fg); font-weight:700; }
/* 状态条里的快捷入口：第一屏就能点，不用滚到页面底部找按钮；不遮挡任何内容 */
.qm-now { flex:0 0 auto; min-height:44px; padding:.42rem 1.05rem; border:none; border-radius:.55rem; background:linear-gradient(135deg,#1E8A50 0%,#14663A 100%); color:#fff; font-size:.88rem; font-weight:800; cursor:pointer; box-shadow:0 3px 10px rgba(20,102,58,.24); transition:transform .15s ease, box-shadow .15s ease; }
.qm-now:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 16px rgba(20,102,58,.32); }
.qm-now:focus-visible { outline:3px solid var(--accent-fg); outline-offset:3px; }
.qm-now:disabled { opacity:.5; cursor:not-allowed; }
.qm-src { font-size:.78rem; font-weight:700; color:var(--accent-fg); background:rgba(var(--accent-rgb),.13); border-radius:999px; padding:.2rem .6rem; }
.qm-n { font-size:.82rem; color:var(--muted); }

.qm-card { background:var(--panel); border:1px solid var(--border); border-radius:.8rem; padding:1rem 1.1rem; }
.qm-card-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:.7rem; }
.qm-card-hd h3 { margin:0; font-size:1.05rem; }
.qm-card-ft { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:.7rem; }
.qm-count { font-size:.85rem; color:var(--muted); white-space:nowrap; }
.qm-more { flex:1 1 auto; min-width:220px; }
.qm-more > summary { cursor:pointer; list-style:none; font-size:.9rem; color:var(--muted); user-select:none; }
.qm-more > summary::-webkit-details-marker { display:none; }
.qm-more > summary::before { content:'▸ '; }
.qm-more[open] > summary::before { content:'▾ '; }
.qm-sum-note { opacity:.75; }
.qm-more-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); }
.qm-field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.qm-field label { font-size:.82rem; color:var(--muted); }
.qm-field select, .qm-field input { width:100%; box-sizing:border-box; }
.qm-speed { width:120px; text-align:center; -moz-appearance:textfield; }
.qm-speed::-webkit-outer-spin-button, .qm-speed::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.qm-go-wrap { margin-top:14px; padding:1rem 1.1rem; background:var(--panel); border:1px solid var(--border); border-radius:.8rem; }
.qm-go-hint { font-size:.88rem; color:var(--muted); text-align:right; margin-bottom:10px; }
.qm-go-row { display:flex; align-items:center; justify-content:flex-end; gap:16px; flex-wrap:wrap; }
.qm-go-row #qMsg { margin-right:auto; }
.qm-go { min-height:52px; padding:.55rem 1.7rem !important; font-size:1.05rem !important; font-weight:800 !important; letter-spacing:.02em; border:none !important; border-radius:.65rem !important; background:linear-gradient(135deg,#1E8A50 0%,#14663A 100%) !important; color:#fff !important; box-shadow:0 4px 14px rgba(20,102,58,.28); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.qm-go:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 7px 20px rgba(20,102,58,.36); }
.qm-go:focus-visible { outline:3px solid var(--accent-fg); outline-offset:3px; }
.qm-go:disabled { opacity:.42; cursor:not-allowed; box-shadow:none; filter:grayscale(.4); }
.qm-go-arrow { font-size:1.2em; margin-left:6px; }

.qm-fold { margin-top:14px; background:var(--panel); border:1px solid var(--border); border-radius:.7rem; padding:.75rem 1rem; }
.qm-fold > summary { cursor:pointer; list-style:none; font-size:.92rem; font-weight:600; color:var(--text); user-select:none; }
.qm-fold > summary::-webkit-details-marker { display:none; }
.qm-fold > summary::before { content:'▸ '; color:var(--muted); }
.qm-fold[open] > summary::before { content:'▾ '; }
.qm-samples { margin-top:12px; }
.qm-foot { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
@media (max-width:700px){
  .qm-v2-hd { flex-direction:column; align-items:flex-start; }
  .qm-go-hint { text-align:left; }
  .qm-go-row { flex-direction:column; align-items:stretch; }
  .qm-go { width:100%; }
  .qm-go-row #qMsg { margin-right:0; text-align:center; }
}


/* ===== 三种出片方式 · 三卡横排（2026-11-05 崔崔拍板版式①）===== */
.ways-wrap { max-width:1180px; }
.ways-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.ways-kicker { font-size:.82rem; color:var(--muted); letter-spacing:.08em; margin-bottom:2px; }
.ways-head .page { margin:0; }
.ways-draft { font-size:.9rem; color:var(--muted); background:var(--panel-2); border-radius:999px; padding:.45rem .9rem; }
.ways-draft.ok { color:var(--accent-fg); font-weight:700; }
.ways-sub { font-size:.92rem; color:var(--muted); margin:.5rem 0 1.2rem; }
.ways-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; align-items:stretch; }
.way-card { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--border); border-radius:.9rem; padding:1rem 1.1rem 1.1rem; }
.way-card.featured { border:2px solid var(--accent); }
.way-pic { height:86px; border-radius:.6rem; display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:.9rem; overflow:hidden; }
.way-pic.salon { background:#EDEDE7; }
  .way-pic.salon i { width:28px; height:52px; border-radius:3px; background:#B8B8B0; opacity:.9; }
  .way-pic.salon i:nth-child(2) { background:#8C8C84; }
  .way-pic.salon i:nth-child(3) { background:#5E5E57; }
.way-pic.pic { background:#e6f1fb; flex-direction:column; gap:6px; }
.way-pic.pic i:first-child { width:86px; height:40px; border-radius:3px; background:#85b7eb; }
.way-pic.pic i:nth-child(2) { width:104px; height:6px; border-radius:3px; background:#378add; opacity:.65; }
.way-pic.pic i:nth-child(3) { width:72px; height:6px; border-radius:3px; background:#378add; opacity:.42; }
.way-pic.dh { background:#faeeda; align-items:center; }
.way-pic.dh i:first-child { width:26px; height:26px; border-radius:50%; background:#ba7517; opacity:.8; }
.way-pic.dh i:nth-child(2) { width:34px; height:48px; border-radius:16px 16px 4px 4px; background:#ef9f27; opacity:.75; }
.way-pic.dh i:nth-child(3) { width:52px; height:6px; border-radius:3px; background:#854f0b; opacity:.45; }
.way-title { font-size:1.12rem; font-weight:800; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.way-rec, .way-warn { font-size:.72rem; font-weight:700; border-radius:999px; padding:.16rem .5rem; }
.way-rec { color:#185fa5; background:#e6f1fb; }
.way-warn { color:#854f0b; background:#faeeda; }
.way-desc { font-size:.9rem; color:var(--muted); min-height:2.6em; margin:.35rem 0 .7rem; }
.way-rows { font-size:.9rem; line-height:2; margin-bottom:.7rem; }
.way-rows > div { display:flex; justify-content:space-between; gap:10px; }
.way-rows span { color:var(--muted); }
.way-rows b { font-weight:700; text-align:right; }
.way-tags { min-height:1.6em; font-size:.82rem; color:var(--muted); }
.way-free { color:#141410; background:#EDEDE7; border-radius:999px; padding:.18rem .55rem; font-weight:700; }
.way-level { display:flex; gap:4px; margin:.7rem 0 .9rem; }
.way-level i { flex:1; height:4px; border-radius:2px; background:var(--border); }
.way-level i.on { background:var(--accent); }
.way-btn { width:100%; margin-top:.25rem; min-height:44px; font-weight:800 !important; }
.way-btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
/* 选方式 与 预览 合并进同一列：上下连成一体，仅用极淡横线区分区段，不再拆成两张卡 */
.way-pv { margin-top:.9rem; padding-top:.85rem; border-top:1px solid var(--border-soft); }
.way-pv-hd { font-size:.74rem; color:var(--muted); letter-spacing:.06em; margin-bottom:.55rem; }
.way-pv .demo-shots { margin:0; }
.way-pv .demo-cap { margin-top:.5rem; }
.ways-foot { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:1rem; padding:.7rem .9rem; background:var(--panel-2); border-radius:.6rem; font-size:.88rem; color:var(--muted); }
.ways-foot a { color:var(--accent-fg); }
@media (max-width:760px){ .ways-grid { grid-template-columns:1fr; } .way-pic { height:72px; } }

/* ===== B 图文成片工作台 ===== */
.pm-wrap { max-width:980px; }
.pm-top { display:flex; align-items:center; gap:10px; margin-bottom:.6rem; }
.pm-state { font-size:.95rem; font-weight:700; color:var(--accent-fg); background:var(--panel-2); border-radius:.6rem; padding:.6rem .9rem; margin-bottom:1rem; }
.pm-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-top:14px; }
.pm-two .panel { margin:0; }
.pm-preview img { max-width:100%; max-height:150px; border-radius:.5rem; margin-top:.6rem; }
.pm-quote { font-size:.95rem; font-weight:700; background:var(--panel-2); border-radius:.5rem; padding:.6rem .8rem; margin:.6rem 0; }
.pm-go { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:1.1rem; }
.pm-go #pmMsg { font-size:.9rem; color:var(--muted); }
.pm-go .btn { min-height:48px; padding:.8rem 1.8rem; font-size:1.05rem; font-weight:800; }
@media (max-width:760px){ .pm-two { grid-template-columns:1fr; } }

/* 首屏可见性修正（2026-11-05）：默认大/超大字号下，三卡与「下一步」必须留在第一屏 */
.ways-head { display:block; }
.ways-draft { display:inline-block; margin-top:.5rem; }
.ways-sub { margin:.4rem 0 .8rem; }
.way-card { padding:.75rem .9rem .85rem; transition:border-color .15s, transform .15s; }
.way-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.way-card.featured { border-width:2px; }
.way-pic { height:56px; margin-bottom:.6rem; }
.way-pic.salon i { height:36px; }
.way-pic.dh i:nth-child(2) { height:34px; }
.way-title { font-size:1rem; }
.way-desc { min-height:0; margin:.25rem 0 .45rem; font-size:.86rem; }
.way-rows { line-height:1.7; font-size:.86rem; margin-bottom:.45rem; }
.way-tags { min-height:1.3em; }
.way-level { margin:.5rem 0 .6rem; }
.way-btn { min-height:40px; }
.pm-go { margin-top:.9rem; padding:.7rem .9rem; background:var(--panel-2); border-radius:.7rem; }
.pm-two { margin-top:.9rem; }

/* 状态条快捷入口（2026-11-05）：大字号下主按钮会掉出首屏，顶部再给一个不遮挡的入口 */
.ways-sub { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pm-state { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ways-sub .btn, .pm-state .btn { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:800; min-height:38px; white-space:nowrap; }

/* ===== 2026-11-06 三档菜单 + 界面占满（崔崔）===============================
   选方式页 = 全屏沉浸（侧栏整块让给内容）；进入方式后左侧菜单按 简/中/全 变化，
   内容不再被 max-width 锁在左边一条窄条里。 */

/* 侧栏顶部「现在做」卡（2026-11-06 方案一）：只说明当前在做哪种视频，换做法回三选一页。
   原来那排「简/中/全」是把内部复杂度丢给用户，新人看不懂，已撤。 */
.mode-card { margin:0 .15rem .75rem; padding:.5rem .65rem .45rem; background:var(--panel);
  border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:.55rem; }
.mode-card .mc-lab { font-size:.7rem; color:var(--muted); letter-spacing:.04em; }
.mode-card .mc-name { font-size:.9rem; font-weight:800; color:var(--accent-fg); margin:.08rem 0 .18rem; line-height:1.3; }
.mode-card .mc-swap { display:inline-block; font-size:.74rem; color:var(--muted); text-decoration:none; }
.mode-card .mc-swap:hover { color:var(--accent-fg); text-decoration:underline; }

body.mode-lite nav { width:10.2rem; }
body.mode-mid nav { width:10.8rem; }
body.mode-full nav { width:11.6rem; }

/* ① 选方式页：侧栏整块让出，顶栏/账号条收成一行，把高度全让给三张卡。
   🔴 不这么压，「超大」字号下光顶栏就吃掉 600+px，卡片会被推出首屏、看不到「选这个」。 */
body.immersive .layout > nav { display:none; }
body.immersive header { min-height:0; padding:.3rem 1.2rem; }
body.immersive header .right-h { flex-wrap:nowrap; }
body.immersive header .brand { flex-wrap:nowrap; }
body.immersive header .brand h1 { font-size:1rem; white-space:nowrap; }
body.immersive header .brand .sub,
body.immersive header #who,
body.immersive header .theme-sel,
body.immersive header .zoom,
body.immersive header .right-h > .btn { display:none; }
body.immersive header .logo { width:1.8rem; height:1.8rem; font-size:.9rem; }
body.immersive header #authBtns > :not(:last-child) { display:none; }  /* 只留退出 */
body.immersive .accbar { display:none; }
body.immersive main { padding:.6rem 1.4rem 1rem; }
body.immersive .ways-wrap { max-width:none; width:100%; }
.ways-head { position:relative; }
body.immersive .ways-head { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; padding:.1rem 0 .55rem; }
body.immersive .ways-head .ways-kicker { display:none; }
body.immersive .ways-head .page { font-size:1.15rem; }
body.immersive .ways-draft { margin-top:0; font-size:.82rem; }
/* 标题行的右侧动作区：「拿不准就用图文成片」这个首屏快捷入口和「完整工作台」并排，
   不再单独占一整行——省下的高度全给三卡和示范模板。 */
.ways-acts { margin-left:auto; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ways-exit { position:static; z-index:5; }
.ways-exit .btn { white-space:nowrap; background:var(--panel); }
.ways-quick { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:800; white-space:nowrap; }
body.immersive .ways-sub { margin:.35rem 0 .7rem; }
/* 三卡：按内容取高但不矮于屏幕的一半，插画区固定中等高度，卡片显得饱满 */
body.immersive .ways-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; height:auto; min-height:clamp(400px,44vh,560px); }
body.immersive .way-card { display:flex; flex-direction:column; padding:.6rem .85rem .7rem; border-radius:1rem; }
body.immersive .way-card.featured { border-width:3px; }
/* 卡片内多出来的高度给插画区（不再留在按钮上方形成空档），整张卡看起来更"大" */
body.immersive .way-pic { flex:1 1 auto; height:auto; min-height:70px; max-height:150px; margin-bottom:.4rem; }
body.immersive .way-pic.salon i { height:72%; }
body.immersive .way-pic.dh i:nth-child(2) { height:72%; }
body.immersive .way-title { font-size:1rem; }
body.immersive .way-desc { font-size:.84rem; min-height:0; margin:.12rem 0 .35rem;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
/* 四行字段保持一行一项：2×2 在超大字号下会折行挤爆（2026-11-06 实拍踩过）。
   卡片变宽后不要再用 space-between 把值甩到最右边（中间空一大条），改成标签列对齐、值紧跟。 */
body.immersive .way-rows { max-width:76%; font-size:.8rem; line-height:1.5; margin-bottom:.3rem; }
body.immersive .way-rows > div { display:grid; grid-template-columns:3.7em auto; justify-content:start; gap:.3rem; }
body.immersive .way-rows b { text-align:left; }
body.immersive .way-tags { font-size:.8rem; min-height:1.1em; }
body.immersive .way-level { margin:.25rem 0 .3rem; }
/* 按钮分层：只有推荐的那张实心黑，另外两张描边——黑白主视觉下靠明度做层级，不靠颜色 */
body.immersive .way-btn { min-height:40px; font-size:.92rem; background:var(--panel); color:var(--accent-fg); border:1px solid var(--accent); }
body.immersive .way-card.featured .way-btn { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
body.immersive .ways-foot { margin-top:.7rem; }
/* 沉浸式选方式页不挂悬浮导师：气泡会压住第三张卡的标题，进工作台后自动回来 */
body.immersive .exp-root { display:none; }

/* ── 三卡下面的「出来长这样」示范模板（2026-11-06 崔崔：下面不能是空的）── */
.ways-demo { margin-top:.9rem; }
.demo-hd { display:flex; align-items:baseline; gap:.6rem; margin-bottom:.5rem; }
.demo-hd b { font-size:1.02rem; color:var(--text-strong); }
.demo-hd span { font-size:.78rem; color:var(--muted); }
.demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.demo-col { cursor:pointer; border:1px solid var(--border); border-radius:.8rem; padding:.55rem .7rem .6rem;
  background:var(--panel); transition:border-color .15s, transform .15s; }
.demo-col:hover { border-color:var(--accent); transform:translateY(-2px); }
/* 三个缩略图等分列宽、跟着卡片一起放大——示范要看得清才有意义（2026-11-06 崔崔） */
.demo-shots { display:flex; gap:10px; }
.demo-shot { position:relative; flex:1 1 0; min-width:0; aspect-ratio:9/16; height:auto;
  border-radius:.5rem; overflow:hidden; border:1px solid var(--border); }
.demo-shot i { position:absolute; display:block; border-radius:2px; }
/* 沙龙会：顶部钩子大字 + 中间人物 + 底部标签 */
.demo-shot.salon { background:linear-gradient(160deg,#243b2c,#16241c); }
.demo-shot.salon .s-hook { left:7%; right:7%; top:6%; height:12%; background:rgba(255,255,255,.82); }
.demo-shot.salon .s-man { left:18%; right:18%; top:26%; bottom:18%; background:linear-gradient(180deg,rgba(151,196,89,.6),rgba(99,153,34,.35)); border-radius:8px 8px 3px 3px; }
.demo-shot.salon .s-tag { left:7%; right:7%; bottom:6%; height:7%; background:rgba(255,255,255,.35); }
.demo-shot.salon.v2 .s-hook { height:18%; }
.demo-shot.salon.v2 .s-man { left:9%; right:9%; }
.demo-shot.salon.v3 .s-hook { right:32%; }
/* 图文成片：上半图 + 下半文字行 */
.demo-shot.pic { background:#0f1b26; }
.demo-shot.pic .p-img { left:0; right:0; top:0; height:42%; border-radius:0; background:linear-gradient(160deg,#3b6f9e,#1f3f5c); }
.demo-shot.pic .p-t1 { left:8%; right:8%; top:50%; height:8%; background:rgba(255,255,255,.78); }
.demo-shot.pic .p-t2 { left:8%; right:22%; top:62%; height:6%; background:rgba(255,255,255,.45); }
.demo-shot.pic .p-sub { left:8%; right:8%; bottom:8%; height:6%; background:rgba(255,255,255,.28); }
.demo-shot.pic.v2 .p-img { height:55%; }
.demo-shot.pic.v3 .p-t1 { right:30%; }
/* 数字人：头 + 肩 + 字幕条 */
.demo-shot.dh { background:linear-gradient(160deg,#2a2118,#171310); }
.demo-shot.dh .d-head { width:30%; aspect-ratio:1; height:auto; border-radius:50%; left:35%; top:10%; background:#d9a273; }
.demo-shot.dh .d-body { left:20%; right:20%; top:34%; bottom:16%; border-radius:40% 40% 6px 6px; background:linear-gradient(180deg,#4a5a6e,#2c3947); }
.demo-shot.dh .d-sub { left:10%; right:10%; bottom:6%; height:7%; background:rgba(255,255,255,.55); }
.demo-shot.dh.v2 .d-body { left:12%; right:12%; }
.demo-shot.dh.v3 .d-head { top:9px; }
.demo-cap { display:flex; align-items:baseline; gap:.45rem; margin-top:.45rem; }
.demo-cap b { font-size:.95rem; }
.demo-cap span { font-size:.8rem; color:var(--muted); }
/* 顺手修全站老毛病：超大字号下右侧按钮把品牌区挤到只剩一列宽，「大健康AI+IP超级个体」被压成竖排。
   做法：主标题不许折行，副标题可收缩并用省略号收尾，右侧按钮组自然只占两行。 */
header .brand { min-width:0; }
header .brand h1 { white-space:nowrap; flex-shrink:0; }
header .brand .sub { min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* 全局悬浮导师（z-index 9990）会压住状态条右侧的「一键出片」按钮 → 状态条提到它上面，
   按钮完整可点；进三卡页时整个导师组件本来就是隐藏的。 */
.pm-state, .pm-go, .ways-sub { position:relative; z-index:9991; }

/* ② B 图文成片：稿框在左铺满、照片与声音在右，双栏吃满整屏宽度 */
body.mode-mid .pm-wrap, body.mode-full .pm-wrap { max-width:none; width:100%; }
.pm-cols { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:16px; align-items:start; }
.pm-cols > div { min-width:0; }
.pm-left > .panel, .pm-right > .panel { margin:0 0 14px; }
#pmText { min-height:34vh; }
.pm-right .pm-preview img { max-height:170px; }

/* ③ C 数字人 / 完整工作台：一键出片原本锁 1040px，现在跟着屏幕走 */
body.mode-full .qm-v2 { max-width:none; }

@media (max-width:1000px){
  body.immersive .ways-grid { grid-template-columns:repeat(2,minmax(0,1fr)); height:auto; }
  body.immersive .way-pic { height:90px; flex:0 0 auto; }
  .demo-grid { grid-template-columns:1fr; }
  .pm-cols { grid-template-columns:1fr; }
}
@media (max-width:760px){
  body.immersive .ways-grid { grid-template-columns:1fr; height:auto; min-height:0; }
  body.immersive main { padding:.8rem 1rem 1rem; }
  .ways-exit { position:static; margin-top:.5rem; }
  .demo-shot { height:150px; }
}

/* ============================================================
   2026-11-07 字体层级（统一基准，避免各页字号/字重散乱）
   - 大标题/品牌名用 --font-display（更紧的字间距，商务感）
   - 数字/统计用 --font-num + 等宽数字（数据对齐、干净）
   ============================================================ */
h1,h2,h3,.brand h1,.hero h2,.sec-title{ font-family:var(--font-display); letter-spacing:-.01em; }
.step .num,.nxt li .dot,.vstat{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ============================================================
   2026-11-08 手机端重排（≤600px · 只作用于手机，桌面视觉不动）
   根因：全局 html{font-size:26px} 让所有 rem 在窄屏爆掉（标题折行、
        输入框占位符被截断、卡片内边距吃掉内容宽度）。
   做法：手机端把根字号缩到 15px → 全站 rem 等比缩进手机宽度；
        登录页满宽去留白；顶栏收起缩放按钮；表格可横滑；
        面板/栅格更紧凑；输入框固定 16px（既缩小又防 iOS 聚焦自动放大）。
   ============================================================ */
@media (max-width:600px){
  /* ① 根字号缩小（全站 rem 等比缩小，这是手机爆掉的总开关） */
  html{ font-size:15px; }

  /* ② 任何媒体不溢出屏幕 */
  img,video,iframe,.wf-frame,.wf-embed{ max-width:100%; }

  /* ③ 登录/注册页：满宽、去大留白、标题与输入收紧 */
  .auth-wrap{ max-width:100%; margin:0; padding:2vh 14px 0; }
  .login{ max-width:100%; margin:1.6vh auto 0; padding:1.15rem .95rem; border-radius:1rem; box-shadow:0 6px 20px rgba(var(--accent-rgb),.07); }
  .login h2{ font-size:1.05rem; line-height:1.3; margin-bottom:.3rem; }
  .login input{ font-size:16px; padding:.68rem .8rem; margin-bottom:.65rem; }
  .login .btn{ font-size:.92rem; padding:.74rem; }
  .login .desc{ font-size:.84rem; }
  .login .note{ font-size:.78rem; padding:.6rem; }

  /* ④ 顶栏：收起桌面缩放按钮（手机用双指/双击原生缩放）、压缩控件、标题与退出同排不挤 */
  .zoom{ display:none; }
  header{ padding:.45rem .6rem; gap:.4rem; flex-wrap:wrap; align-items:flex-start; }
  header .brand{ gap:.35rem; min-width:0; flex:1 1 auto; }
  header .brand h1{ font-size:.9rem; white-space:normal; line-height:1.2; }
  .right-h{ gap:.3rem; font-size:.72rem; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; max-width:100%; }
  .theme-sel{ max-width:4.6rem; font-size:.72rem; padding:.28rem .35rem; }
  .btn.ghost.sm{ font-size:.72rem; padding:.28rem .5rem; }

  /* ⑤ 内容区：面板/栅格更紧凑，标题缩小 */
  main{ padding:.65rem .6rem; overflow-x:auto; }
  .panel{ padding:.7rem .75rem; margin-bottom:.5rem; }
  .panel h3{ font-size:.9rem; }
  h2.page{ font-size:.98rem; line-height:1.3; }
  p.desc{ font-size:.8rem; margin:.25rem 0 .7rem; }

  /* ⑥ 表格：手机端允许横向滑动（避免多列表格被截断/撑破） */
  table{ white-space:nowrap; font-size:.78rem; }
  .qtable-wrap{ overflow-x:auto; }

  /* ⑦ 模态/弹层：不超出屏幕宽度 */
  .wf-app .box{ max-width:calc(100% - 1.2rem); padding:1rem; }
  .modal,.app-confirm-overlay .modal{ max-width:calc(100vw - 1.2rem); }
  /* ⑱ 弹窗遮罩：手机上顶部对齐 + 整体可滚，避免高内容被上下截断（如音色选择列表） */
  .app-confirm-overlay{ align-items:flex-start; overflow-y:auto; padding:1rem .6rem; }
  .modal{ width:100%; max-height:calc(100vh - 2rem); overflow-y:auto; padding:1rem; }

  /* ⑧ 通用按钮在手机上给足点按高度 */
  .btn{ padding:.58rem .9rem; font-size:.84rem; }

  /* ⑨ 三选一/路线卡等：强制单列上下排（窄屏左右放不下就上下） */
  .ways-head{ flex-direction:column; align-items:flex-start; gap:.4rem; }
  .ways-grid{ grid-template-columns:1fr; }
  .lane{ flex-direction:column; align-items:stretch; }
  .lane .lane-right{ width:100%; flex-direction:row; align-items:center; justify-content:space-between; }

  /* ⑩ 顶部账号条「我在给哪个号干活」：收紧、可换行，不再撑满 */
  .accbar{ padding:.45rem .6rem; gap:8px; }
  .accbar .ab-lab{ font-size:.82rem; }
  .accbar .ab-btn{ font-size:.82rem; padding:.3rem .6rem; }
  .accbar .ab-meta{ margin-left:0; width:100%; justify-content:flex-start; }

  /* ⑪ 侧边导航：手机上拉成「满宽顶部横条 + 横向滑动」；必须用 !important 盖掉
        第1198-1199行 body.mode-lite/mid/full nav 的定宽(10.2/10.8rem)，否则 nav 被钉成
        ~140px 左侧窄条，mode-card 挤在窄条里只能竖排（崔崔 11-08 手机实测）。 */
  body.mode-lite nav, body.mode-mid nav, body.mode-full nav,
  nav{ width:100% !important; flex-direction:row !important; flex-wrap:nowrap !important;
       overflow-x:auto !important; overflow-y:visible; border-right:none !important;
       border-bottom:1px solid var(--border) !important; padding:.5rem 1.2rem .5rem .5rem !important;
       gap:.4rem !important; height:auto !important; }
  nav .item{ font-size:.85rem; padding:.5rem .7rem; white-space:nowrap; flex:0 0 auto; }
  nav .mode-card{ flex:0 0 auto; max-width:none; }
  nav .group{ display:none; }

  /* ⑫ 回收站悬浮按钮：缩小、贴边，不挡内容 */
  .trash-fab{ width:42px; height:42px; font-size:1.1rem; right:12px; bottom:12px; }
  .trash-panel{ width:min(86vw,300px); right:12px; bottom:62px; }

  /* ⑬ 侧栏「现在做 X / 换一种做法 →」：手机上变成一行小药丸，不再竖排占高 */
  .mode-card{ display:inline-flex !important; align-items:baseline; gap:.3rem; flex-wrap:wrap; margin:0; padding:.3rem .6rem; background:var(--panel-2); border:1px solid var(--border); border-radius:.6rem; }
  .mode-card .mc-lab{ font-size:.78rem; }
  .mode-card .mc-name{ font-size:.9rem; margin:0 .1rem; }
  .mode-card .mc-swap{ font-size:.78rem; }

  /* ⑭ 顶部账号条：竖排堆叠，标签不再被挤出一行 */
  .accbar{ flex-direction:column; align-items:stretch; gap:6px; padding:.5rem .6rem; }
  .accbar .ab-lab{ font-size:.78rem; }
  .accbar .ab-list{ flex-wrap:wrap; }
  .accbar .ab-btn{ font-size:.78rem; padding:.3rem .6rem; }
  .accbar .ab-meta{ width:100%; margin-left:0; justify-content:flex-start; }

  /* ⑮ 顶栏右侧控件：手机上去掉「演示模式」等次要按钮，避免挤成一行 */
  .right-h .js-tour{ display:none; }
  .right-h{ max-width:100%; }

  /* ⑯ 选方式页装饰缩略图：限高，别在窄屏占太大 */
  .demo-shots{ gap:6px; }
  .demo-shot{ height:118px; }

  /* ⑰ 左下角版本号：避开安卓底部导航条（安全区） */
  #wbVerTag{ bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); }
}

/* 超窄屏（≤380px）再压一档，保证不挤 */
@media (max-width:380px){
  html{ font-size:14px; }
  header .brand h1{ font-size:.86rem; }
  .auth-wrap{ padding:1.6vh 12px 0; }
  .login{ padding:1.05rem .85rem; }
  .right-h{ font-size:.68rem; }
}
