/* ============================================================
   商家创作台 · 第 3 批：布局与信息层级 (Layout & Hierarchy)
   ------------------------------------------------------------
   单独一层，在 shape.css 之后加载；只动布局与层级，不动任何功能。
   整批回退：删掉 index.html 里这一行
       <link rel="stylesheet" href="/layout.css?v=1">
   每条都写成 var(--令牌, 兜底值)，兜底值 = 现有值，所以删掉文件不炸。
   ============================================================ */

/* ---------- 多维数字人：左（步骤 1~3） / 右（设置与生成，吸附） ---------- */
.mdh-cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,25%,360px);
  column-gap:18px;
  align-items:start;
}
.mdh-col-main{min-width:0}
.mdh-col-side{min-width:0;position:sticky;top:16px}

/* 顶部步骤导轨（可点，滚动到对应步骤；不写 hash，避免干扰路由） */
.mdh-rail{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:6px;margin-bottom:14px;
  background:var(--c-surface,#fff);
  border:1px solid var(--c-line-2,#e2e8f0);
  border-radius:var(--r-md,10px);
}
.mdh-rail-i{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border:0;background:transparent;cursor:pointer;
  border-radius:var(--r-full,999px);
  font-family:inherit;font-size:var(--fs-12,12px);font-weight:600;
  color:var(--c-text-3,#5A6675);
  transition:background .15s var(--ease,cubic-bezier(.4,0,.2,1)),color .15s var(--ease,cubic-bezier(.4,0,.2,1));
}
.mdh-rail-i b{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:var(--r-full,999px);
  background:var(--c-surface-3,#f1f5f9);color:var(--c-text-2,#475569);
  font-size:11px;font-weight:700;line-height:1;
}
.mdh-rail-i:hover{background:var(--c-surface-3,#f1f5f9);color:var(--c-brand-ink,#2563EB)}
.mdh-rail-i:hover b{background:var(--c-brand-solid,#2563EB);color:#fff}
.mdh-rail-i:focus-visible{outline:2px solid var(--c-brand-ink,#2563EB);outline-offset:1px}

/* 导轨三态：已完成（✓ 绿） / 当前（主色高亮） / 未开始（灰） */
.mdh-rail-i.is-done{color:var(--c-text-2,#475569)}
.mdh-rail-i.is-done b{background:var(--c-ok-soft,#E6F6EC);color:var(--c-ok,#0F7B43)}
.mdh-rail-i.is-current{background:var(--c-brand-soft,#E8F0FE);color:var(--c-brand-ink,#2563EB)}
.mdh-rail-i.is-current b{background:var(--c-brand-solid,#2563EB);color:#fff}

/* 卡片左侧强调条：当前=主色 / 已完成=绿（卡片已有 overflow:hidden，圆角处自动裁切） */
.mdh-step{position:relative}
.mdh-step.is-current::before,
.mdh-step.is-done::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--c-brand-solid,#2563EB)}
.mdh-step.is-done::before{background:var(--c-ok,#0F7B43)}

/* 步骤标题本身已是 flex（gap:6px），序号不再额外留右边距 */
.song-step-title > .step-num{margin-right:0}

/* 右侧「字幕与生成设置」：读作主行动面板 */
.mdh-side-card{
  border-color:var(--c-brand-3,#7BB8FF) !important;
  box-shadow:var(--sh-2,0 2px 6px rgba(15,23,42,.05)) !important;
}

/* 窄屏落成单栏 */
@media (max-width:1200px){
  .mdh-cols{grid-template-columns:minmax(0,1fr)}
  .mdh-col-side{position:static}
}

/* ---------- 第3批·按钮三档：主 CTA 加大到 40px 并独占一行 ---------- */
.mdh-cta{
  width:100% !important;flex:1 1 100% !important;
  height:40px !important;min-height:40px;
  font-size:13px !important;font-weight:600;letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(37,99,235,.18);
}
.mdh-cta .ic{width:16px;height:16px}

/* ---------- 第3批·卡内两列：窄了自动堆叠（不再被挤成 244px） ---------- */
.mdh-2col{display:flex !important;flex-wrap:wrap;gap:8px}
.mdh-2col > *{flex:1 1 280px;min-width:0}

/* ---------- 第3批·闭环：最近生成（独立成卡，放在左栏底部） ---------- */
.mdh-recent{margin-top:0}
.mdh-recent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mdh-recent-title{font-size:12px;font-weight:600;color:var(--c-text-2,#475569)}
.mdh-recent-all{
  border:0;background:transparent;cursor:pointer;padding:2px 0;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--c-brand-ink,#2563EB);
}
.mdh-recent-all:hover{text-decoration:underline}
.mdh-recent-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.mdh-recent-item{
  display:flex;align-items:center;gap:8px;padding:6px;
  border:1px solid var(--c-line-2,#e2e8f0);border-radius:var(--r-sm,8px);
  background:var(--c-surface-2,#f8fafc);cursor:pointer;
  transition:background .15s var(--ease,cubic-bezier(.4,0,.2,1)),border-color .15s var(--ease,cubic-bezier(.4,0,.2,1));
}
.mdh-recent-item:hover{background:var(--c-surface,#fff);border-color:var(--c-brand-3,#7BB8FF)}
.mdh-recent-thumb{
  width:34px;height:44px;flex:0 0 auto;border-radius:var(--r-xs,6px);
  overflow:hidden;background:var(--c-surface-3,#f1f5f9);
}
.mdh-recent-thumb img,.mdh-recent-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.mdh-recent-meta{min-width:0;flex:1 1 auto}
.mdh-recent-name{font-size:12px;font-weight:600;color:var(--c-text-1,#1d1d1f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdh-recent-time{font-size:11px;color:var(--c-text-3,#5A6675);margin-top:2px}
.mdh-recent-empty{font-size:12px;color:var(--c-text-3,#5A6675);padding:10px 0;text-align:center}

/* ---------- 第3批·吸附列过高时内部滚动，避免底部被裁 ---------- */
.mdh-col-side{max-height:calc(100vh - 32px);overflow-y:auto;scrollbar-width:thin}
.mdh-col-side::-webkit-scrollbar{width:6px}
.mdh-col-side::-webkit-scrollbar-thumb{background:rgba(15,23,42,.14);border-radius:3px}

@media (max-width:1200px){
  .mdh-col-side{position:static;max-height:none;overflow:visible}
}

/* ---------- 第3批·收编"裸按钮"：资产 chip（原来 16px 高 / 0 圆角 / 0 内距） ---------- */
.mdh-asset-chip{
  display:flex;align-items:center;gap:4px;padding:4px 6px;
  background:var(--c-surface-2,#f5f7fb);
  border:1px solid var(--c-line-2,#e8ecf3);
  border-radius:var(--r-sm,8px);
}
.mdh-asset-use{
  display:inline-flex;align-items:center;gap:4px;
  border:0;background:transparent;cursor:pointer;padding:0;
  font-family:inherit;font-size:11px;font-weight:600;
  color:var(--c-brand-ink,#2563eb);
}
.mdh-asset-use:hover{color:var(--c-brand-solid,#2563EB);text-decoration:underline}
.mdh-asset-del{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:0 0 auto;padding:0;
  border:0;border-radius:var(--r-full,999px);
  background:transparent;color:var(--c-text-3,#5A6675);cursor:pointer;
  transition:background .15s var(--ease,cubic-bezier(.4,0,.2,1)),color .15s var(--ease,cubic-bezier(.4,0,.2,1));
}
.mdh-asset-del:hover{background:var(--c-surface-3,#f1f5f9);color:var(--c-err,#C22545)}

/* ---------- 第3批·修复：声音卡上透明的 radio 被 width:100% 撑成整屏宽（改前 p7s0 批量模式溢出 1600px） ---------- */
.vv-voice-disc input[type=radio],
.vv-voice-disc input[type=checkbox]{
  width:auto !important;height:auto !important;
}

/* ---------- 克隆数字人（#p22s0 数字人创作工作台）：左=文案·声音 / 右=样式·配乐·生成（吸附） ---------- */
/* 整批回退：删掉 index.html 里 layout.css 那一行即可（脚本页会退回原来的一整列堆叠） */
.dh-workbench-inline .dh-workbench-grid{
  grid-template-columns:minmax(0,1fr) clamp(300px,25%,360px);
  column-gap:18px;
}
.dh-workbench-inline .dh-col-side{
  position:sticky;top:16px;
  max-height:calc(100vh - 32px);overflow-y:auto;scrollbar-width:thin;
}
.dh-workbench-inline .dh-col-side::-webkit-scrollbar{width:6px}
.dh-workbench-inline .dh-col-side::-webkit-scrollbar-thumb{background:rgba(15,23,42,.14);border-radius:3px}
@media (max-width:1200px){
  .dh-workbench-inline .dh-workbench-grid{grid-template-columns:minmax(0,1fr)}
  .dh-workbench-inline .dh-col-side{position:static;max-height:none;overflow:visible}
}

/* 卡头：序号统一成与多维数字人一致的软蓝圆点（原来是渐变色实心圆），标题图标与文字对齐 */
.dh-card-head .step-num{margin-right:0;width:20px;height:20px;flex:0 0 auto}

/* ---------- 爆款改写（#p4s0）：左=粘贴文案（+改写历史） / 右=改写方式（吸附） ---------- */
/* 整批回退：删掉 index.html 里 layout.css 那一行即可（本页落回原来的一整列堆叠） */
/* 长文限宽：避免改写历史正文在宽屏上被拉到 1000px+（行宽过长不可读） */
#p4s0 > .section{max-width:1160px;margin-left:auto;margin-right:auto}
@media (max-width:1200px){ #p4s0 > .section{max-width:none} }

/* 步骤导轨（只做流程说明，不可点：本页一步到底，且 href="#id" 会与 #nav 路由打架） */
.rw-rail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px 0}
.rw-rail-i{
  display:inline-flex;align-items:center;
  background:var(--c-surface-2,#f8fafc);border:1px solid var(--c-line-2,#e2e8f0);
  border-radius:var(--r-full,999px);padding:5px 10px;
  font-size:12px;font-weight:600;color:var(--c-text-2,#334155);
}
.rw-rail-a{color:var(--c-text-3,#cbd5e1);font-size:12px;font-weight:600}

/* 右栏·改写方式卡 */
.rw-side-head{
  font-size:14px;font-weight:600;color:var(--c-text-1,#1d1d1f);
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--c-line-2,#eef1f5);
}
.rw-side-label{display:block;font-size:12px;font-weight:600;color:var(--c-text-2,#475569);margin-bottom:6px}
.rw-side-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.rw-side-btn{width:100%}
.rw-side-status{display:block;min-height:18px;margin-top:10px;color:var(--c-brand-ink,#2563EB);line-height:1.5}
.rw-status-ok{color:var(--c-ok,#0F7B43)}

/* 改写历史列表 */
.rw-list-title{display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--c-text-2,#475569);margin-bottom:12px}
.rw-batch{margin-bottom:16px;overflow:visible}
.rw-batch-head{
  display:flex;align-items:center;gap:12px;padding:14px 20px;
  background:var(--c-surface-2,#f5f5f7);border-bottom:1px solid var(--c-line-2,#f0f0f5);
  border-radius:14px 14px 0 0;
}
.rw-batch-ic{display:inline-flex;color:var(--c-brand-ink,#2563EB)}
.rw-batch-body{padding:16px 20px}
.rw-variant{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--c-line-2,#f5f5f7)}
.rw-variant.is-last{margin-bottom:0;padding-bottom:0;border-bottom:none}
.rw-variant-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rw-vnum{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:24px;height:24px;border-radius:var(--r-xs,6px);
  background:#EFF6FF;color:var(--c-brand-ink,#2563EB);font-size:11px;font-weight:700;
}
.rw-vtitle{flex:1;min-width:0;font-weight:600;font-size:14px;color:var(--c-text-1,#1d1d1f);line-height:1.3}

/* 二次创作按钮：8 种配色 -> 1 套品牌淡蓝（原来 #ca8a04/#16a34a 两处对比度 2.76/3.10 不足） */
.rw-xchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.rw-xchip{
  background:#EFF6FF;color:var(--c-brand-ink,#2563EB);
  border:1px solid rgba(37,99,235,.18);padding:4px 10px;font-weight:500;
  border-radius:var(--r-full,999px) !important;
}
.rw-xchip:hover{background:#F6FAFF;border-color:rgba(37,99,235,.32)}

/* ---------- AI复刻爆款（#p23s0）：左=标题/导轨/两个列表 / 右=采集卡（吸附） ---------- */
/* 整批回退：删掉 index.html 里 layout.css 那一行即可（本页落回原来的一整列堆叠） */
.rm-title{font-size:18px;font-weight:600;color:var(--c-text-1,#1d1d1f);margin:0 0 2px 0}
.rm-sub{font-size:12px;color:var(--c-text-3,#86868b);margin:0 0 14px 0}
.rm-tabs{margin-bottom:14px}
.rm-status{display:block;min-height:18px;margin:0 0 10px 0}
.rm-input{width:100%;box-sizing:border-box;margin-bottom:14px}
.rm-side-btn{width:100%}
.rw-side-hint{font-size:12px;color:var(--c-text-3,#5A6675);line-height:1.6;margin:0 0 12px 0}
.rm-err{color:var(--c-err,#C22545)}
.rm-err .ic{margin-right:4px}

/* 采集作品：原来 73 张卡单列堆叠（面板 14013px）-> 网格多列 */
.rm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px;align-items:stretch}
.rm-card{display:flex;flex-direction:column;overflow:visible}
.rm-card-head{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px 10px;
  border-bottom:1px solid var(--c-line-2,#f0f0f5);flex:1 1 auto;
}
.rm-card-title{
  font-weight:600;font-size:13px;color:var(--c-text-1,#1d1d1f);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rm-card-time{font-size:11px;color:var(--c-text-3,#5A6675);margin-top:4px}
.rm-cover-ph{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:56px;height:74px;border-radius:8px;
  background:linear-gradient(135deg,#e8e8ed,#f5f5f7);color:var(--c-text-3,#5A6675);
}
.rm-card-foot{display:flex;gap:8px;padding:10px 14px}
.rm-card-foot .btn{flex:1 1 auto;min-width:0}
.rm-list{display:flex;flex-direction:column;gap:12px}

/* 复刻提示词列表：卡片改成软底 + 悬停描边，和采集列表统一 */
.rm-list > .card{padding:14px}

/* ---------- 内容创作工作台（#p2s3）：头部压缩 + 二次创作九宫格 ---------- */
#p2s3 > .section{max-width:1180px;margin-left:auto;margin-right:auto}
#p2s3 .cc-hero{padding:14px 18px;border-radius:14px;margin-bottom:12px}
#p2s3 .cc-kicker{font-size:9px;letter-spacing:1.6px;margin-bottom:3px}
#p2s3 .cc-hero h2{font-size:19px;margin:0 0 3px;display:flex;align-items:center;gap:7px}
#p2s3 .cc-hero h2 .ic{width:18px;height:18px;color:var(--c-brand-ink,var(--pri))}
#p2s3 .cc-hero h2 span{font-size:13px;margin-left:0}
#p2s3 .cc-hero p{font-size:12px}
#p2s3 .cc-search{padding:7px 12px;min-width:280px;border-radius:10px}
#p2s3 .cc-search span{display:inline-flex;color:var(--c-text-3,#86868b)}
#p2s3 .cc-bar .cc-tabs{margin-bottom:0}
#p2s2 .cc-tabs button,#p2s3 .cc-bar .cc-tabs button{display:inline-flex;align-items:center;gap:5px}
#p2s3 .cc-bar .cc-filters{flex:1;min-width:0}
#p2s3 .cc-bar .cc-filters .cat-tag{display:inline-flex;align-items:center;gap:4px}
#p2s3 .cc-bar .cc-actions{margin-left:auto}
#p2s3 .cc-done-list{gap:10px}
#p2s3 .cc-done-card > div:first-child{padding:10px 14px!important}
/* 9 个「二次创作」入口：竖排 1 列 -> 3 列网格（展开态高度砍掉约 2/3） */
#p2s3 .cc-acts{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px!important;padding:10px 0 2px 0!important;
}
#p2s3 .cc-acts > div{min-width:0}
@media (max-width:1200px){ #p2s3 > .section{max-width:none} }

/* ---------- 账号爆款（#p0s0）：128 条作品单列 9418px -> 自适应网格 ---------- */
#p0s0 .acct-vid-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px;
}
#p0s0 .acct-vid-list .card-row{
  margin:0!important;border:1px solid #e7ebf1;border-radius:12px;
  padding:10px 12px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.04);
}
#p0s0 .acct-vid-list .card-row:hover{background:#fafbff;border-color:#d5dce6;box-shadow:0 6px 16px rgba(15,23,42,.08)}
#p0s0 .acct-vid-list .card-row .cover{width:52px;height:70px}
#p0s0 .acct-vid-list .card-row .info .t{font-size:13px;margin-bottom:6px}
#p0s0 .acct-vid-list .card-row .info .meta{flex-wrap:wrap;gap:3px 10px;font-size:11px}
#p0s0 .acct-vid-list .card-row .actions{gap:4px}
#p0s0 .acct-vid-list .card-row .actions .btn-sm{padding:4px 9px;font-size:11px}

/* ---------- 爆款文案库（#p1s0）：15 张卡单列(4490px) -> 自适应双列 ---------- */
#p1s0 #allTransList{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:14px}
#p1s0 #allTransList > .card{margin-bottom:0!important}
#p1s0 #allTransList > .ac-pager,
#p1s0 #allTransList > .empty{grid-column:1/-1}
@media (max-width:1200px){ #p1s0 #allTransList{grid-template-columns:1fr} }

/* ---------- 单条爆款（#p5s0）：10 张卡单列 -> 自适应双列 ---------- */
#p5s0 #singleLibList{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:14px}
#p5s0 #singleLibList > .card{margin-bottom:0!important}
#p5s0 #singleLibList > .ac-pager,
#p5s0 #singleLibList > .empty{grid-column:1/-1}
@media (max-width:1200px){ #p5s0 #singleLibList{grid-template-columns:1fr} }

/* ---------- 爆款库（#p3s0）：3 张卡单列 -> 自适应网格 ---------- */
#p3s0 #boomLibList{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
#p3s0 #boomLibList > .card{margin-bottom:0!important}
#p3s0 #boomLibList > .empty{grid-column:1/-1}

/* ---------- 爆款库 三个子页（#p3s0/s1/s2）：tab 行图标对齐 ---------- */
#p3s0 .cc-tabs button,#p3s1 .cc-tabs button,#p3s2 .cc-tabs button{display:inline-flex;align-items:center;gap:5px}
/* ---------- 爆款库 子页（#p3s1 文案 / #p3s2 结构）：单列 -> 自适应网格 ---------- */
#p3s1 #boomTransList,#p3s2 #boomStructList{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:12px}
#p3s1 #boomTransList > .card,#p3s2 #boomStructList > .card{margin-bottom:0!important}
#p3s1 #boomTransList > .empty,#p3s2 #boomStructList > .empty{grid-column:1/-1}
@media (max-width:1200px){#p3s1 #boomTransList,#p3s2 #boomStructList{grid-template-columns:1fr}}

/* ---------- 图文平台分发（#p8s0~s3 小红书/抖音图文/百度/公众号）：卡片单列 -> 自适应双列 ---------- */
#xhsList,#dyList,#bdList,#gzhList{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:12px;align-items:start}
#xhsList > .card,#dyList > .card,#bdList > .card,#gzhList > .card{margin-bottom:0!important}
#xhsList > .empty,#dyList > .empty,#bdList > .empty,#gzhList > .empty{grid-column:1/-1}
@media (max-width:1200px){#xhsList,#dyList,#bdList,#gzhList{grid-template-columns:1fr}}
#p8s0 .cc-tabs button,#p8s1 .cc-tabs button,#p8s2 .cc-tabs button,#p8s3 .cc-tabs button{display:inline-flex;align-items:center;gap:5px}