/* ============================================================
   商家创作台 · 第 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-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:1280px){
  .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:1280px){
  .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)}