/* Variant C — Stepped Workshop styles */

.vc-root {
  font-family: var(--sans);
  background: var(--paper-0);
  color: var(--ink-900);
  min-height: 100vh;
}

/* Topbar */
.vc-topbar {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
  padding: 14px 32px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.vc-brand { display: flex; gap: 10px; align-items: center; }
.vc-brand-logo { width: 36px; height: 36px; background: var(--paper-50); border: 1px solid var(--line); border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.vc-brand-name { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--forest-900); line-height: 1.1; }
.vc-brand-sub { font-size: 11px; color: var(--ink-500); margin-top: 3px; }

/* Stepper */
.vc-stepper { display: flex; align-items: center; gap: 0; padding: 0 8px; min-width: 0; overflow-x: auto; }
.vc-step {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  position: relative;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.vc-step:focus-visible { outline: 3px solid rgba(45,91,78,0.28); outline-offset: 4px; border-radius: 8px; }
.vc-step:disabled { cursor: not-allowed; opacity: 0.58; }
.vc-step-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--line-strong);
  color: var(--ink-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
  transition: all 0.2s;
}
.vc-step-t { font-size: 13px; font-weight: 600; color: var(--ink-500); line-height: 1; }
.vc-step-d { font-size: 11px; color: var(--ink-300); margin-top: 3px; }
.vc-step-line { width: 22px; height: 1px; background: var(--line-strong); margin: 0 10px; }
.vc-step-on .vc-step-dot { background: var(--forest-800); border-color: var(--forest-900); color: var(--cream); box-shadow: 0 0 0 4px rgba(45,91,78,0.1); }
.vc-step-on .vc-step-t { color: var(--forest-900); }
.vc-step-done .vc-step-dot { background: var(--forest-600); border-color: var(--forest-700); color: var(--cream); }
.vc-step-done .vc-step-t { color: var(--forest-800); }
.vc-step-done + .vc-step .vc-step-line,
.vc-step-done .vc-step-line { background: var(--forest-600); }
/* 移动端步骤引导（7 节点横排放不下）优化横向滚动：平滑滚动 + 隐藏滚动条 +
   两侧渐隐提示可滑动；配合 JS 切步时把当前步自动滚到中央（见 variant-c.jsx stepperRef）。
   桌面端 stepper 不溢出，不进此媒体查询，横排保持不变。 */
@media (max-width: 480px) {
  .vc-stepper {
    scroll-behavior: smooth;
    scrollbar-width: none;               /* Firefox 隐藏滚动条 */
    -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .vc-stepper::-webkit-scrollbar { display: none; } /* WebKit 隐藏滚动条 */
  /* 关键：节点不收缩、文字不换行，内容才会撑开超宽触发横向滚动，而不是被 flex 压扁。 */
  .vc-stepper .vc-step { flex-shrink: 0; }
  .vc-stepper .vc-step-t,
  .vc-stepper .vc-step-d { white-space: nowrap; }
}

.vc-top-actions { display: flex; gap: 8px; }

/* Main */
.vc-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  max-width: 1560px;
  margin: 0 auto;
  min-height: calc(100vh - 65px);
}
.vc-form {
  padding: 28px 32px 36px;
  border-right: 1px solid var(--line);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.vc-preview {
  background: linear-gradient(180deg, var(--paper-0) 0%, var(--paper-50) 100%);
  padding: 28px 20px;
  position: relative;
}
.vc-preview-sticky { position: sticky; top: 84px; }

/* Step body */
.vc-step-body { flex: 1; max-width: 1120px; min-width: 0; }
.vc-step-head { margin-bottom: 22px; }
.vc-step-kicker { font-size: 11px; font-weight: 500; color: var(--forest-700); letter-spacing: 0.08em; text-transform: uppercase; }
.vc-step-title {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--forest-900);
  margin: 6px 0 10px;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.vc-step-sub { font-size: 14px; color: var(--ink-500); line-height: 1.7; margin: 0; max-width: 760px; }

/* Field */
.vc-field {
  margin-bottom: 16px;
  background: rgba(255,255,255,0.52);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset;
}
.vc-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ink-900); margin-bottom: 12px; }
.vc-lbl-hint { font-weight: 400; color: var(--ink-300); }
.vc-lbl-clear {
  float: right;
  border: 1px solid var(--line);
  background: var(--cream, #fffdf7);
  color: #a34e3f;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  cursor: pointer;
}
/* 触屏没有 mouseout：点完 :hover 会一直挂着，直到用户点别处 —— 表现成「点过的按钮一直高亮」。
   所以带 :hover 的规则统一关在 (hover: hover) 里。
   ⚠️ 必须**就地**包，不能挪到文件末尾集中处理：有几条 hover 与选中态（.vc-age-on 等）同优先级，
   一挪就会盖住选中态。 */
@media (hover: hover) { .vc-lbl-clear:hover { border-color: #a34e3f; } }
.vc-input-lg { padding: 12px 14px; font-size: 15px; }
.vc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vc-row-2--age { align-items: stretch; }

/* Age cards */
.vc-age-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vc-age {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 15px 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
@media (hover: hover) { .vc-age:hover { border-color: var(--line-strong); } }
.vc-age-on { background: var(--forest-50); border-color: var(--forest-700); box-shadow: 0 0 0 3px rgba(45,91,78,0.08); }
.vc-age-t { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink-900); }
.vc-age-on .vc-age-t { color: var(--forest-900); }
.vc-age-d { font-size: 12px; color: var(--ink-500); margin-top: 4px; line-height: 1.5; }
.vc-gender-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.vc-gender {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  min-height: 126px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-700);
  transition: all 0.15s;
  display: grid;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 10px;
  padding: 12px;
  text-align: left;
}
@media (hover: hover) { .vc-gender:hover { border-color: var(--line-strong); transform: translateY(-1px); } }
.vc-gender-on { background: var(--forest-50); border-color: var(--forest-700); box-shadow: 0 0 0 3px rgba(45,91,78,0.08); color: var(--forest-900); }
.vc-gender-art {
  display: block;
  width: 100%;
  height: 74px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.55);
}
.vc-gender-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.vc-gender-copy {
  display: grid;
  gap: 2px;
}
.vc-gender-copy strong {
  font-size: 14px;
  font-weight: 700;
  color: inherit;
}
.vc-gender-copy em {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-400);
}
.vc-gender-on .vc-gender-copy em {
  color: var(--forest-700);
}

/* Seeds */
.vc-seeds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.vc-seeds-k { font-size: 11px; color: var(--ink-300); letter-spacing: 0.04em; margin-right: 4px; }
.vc-inline-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.vc-inline-tools--end { grid-template-columns: auto; justify-content: end; margin-bottom: 10px; }
.vc-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vc-ai-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 10px 13px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--forest-700);
  background: var(--forest-50);
  color: var(--forest-900);
  cursor: pointer;
}
.vc-ai-btn:disabled { opacity: .55; cursor: wait; }
.vc-suggestion-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.vc-seed {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 9px;
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--ink-700);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.12s;
}
@media (hover: hover) { .vc-seed:hover { background: var(--forest-50); color: var(--forest-800); border-color: var(--forest-600); border-style: solid; } }
.vc-seed-ai { border-style: solid; background: rgba(45,91,78,0.05); }
.vc-pill-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vc-setup-from { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; padding: 7px 10px; border-radius: 8px; background: var(--forest-50); color: var(--forest-700); font-size: 12px; line-height: 1.5; }
.vc-setup-from-item b { color: var(--forest-900); font-weight: 600; }
.vc-setup-from-note { color: var(--ink-500); }
.vc-pill {
  font-family: inherit;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-700);
  cursor: pointer;
}
.vc-pill-on { border-color: var(--forest-700); background: var(--forest-50); color: var(--forest-900); }
.vc-pill-ai { border-color: rgba(45,91,78,.25); background: rgba(45,91,78,.05); }

@media (max-width: 720px) {
  .vc-two-col,
  .vc-inline-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .vc-inline-tools--end {
    justify-content: stretch;
  }
}

/* Character cards (big) */
.vc-char-big { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.vc-char-role-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vc-char-card {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 14px 8px 10px;
  cursor: pointer;
  font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: all 0.15s;
}
@media (hover: hover) { .vc-char-card:hover { border-color: var(--line-strong); } }
.vc-char-on { background: var(--forest-50); }
.vc-char-av {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--paper-50);
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  overflow: hidden;
}
.vc-char-av img { width: 100%; height: 100%; object-fit: cover; }
.vc-char-av-up { border-style: dashed; color: var(--ink-300); }
@media (hover: hover) { .vc-char-up:hover .vc-char-av-up { color: var(--forest-700); border-color: var(--forest-600); } }
.vc-char-nm { font-size: 12px; color: var(--ink-700); font-weight: 500; }
.vc-char-sub { font-size: 10px; color: var(--ink-300); margin-top: -4px; }

/* Page slider */
.vc-page-slider { display: flex; gap: 8px; }
.vc-page-btn {
  flex: 1;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  font-family: var(--serif);
  color: var(--ink-900);
  transition: all 0.15s;
  text-align: center;
}
@media (hover: hover) { .vc-page-btn:not(:disabled):hover { border-color: var(--line-strong); } }
.vc-page-on { background: var(--forest-800); color: var(--cream); border-color: var(--forest-900); }
.vc-fixed-layout-note {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--forest-100);
  border-radius: 8px;
  background: var(--forest-50);
}
.vc-fixed-layout-note b { color: var(--forest-900); font-size: 14px; }
.vc-fixed-layout-note span { color: var(--ink-500); font-size: 12px; line-height: 1.55; }
.vc-output-layout-choice {
  margin-bottom: 14px;
}
.vc-output-layout-choice .vc-page-btn {
  min-height: 88px;
  text-align: left;
}
.vc-output-layout-choice .vc-page-n {
  font-size: 16px;
  line-height: 1.3;
}
.vc-output-layout-choice .vc-page-u {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
}
.vc-page-n { font-size: 26px; font-weight: 700; line-height: 1; }
/* 卡片副标题（画面比例 / 页数 / 预计耗时）。QA 反馈"看不清"，三个原因一起改：
     · 11px 太小 → 12.5px，与制作动态正文同档，不是随手挑的数
     · opacity 0.6 实测对比度只有 4.43:1，**低于 WCAG AA 正文要求的 4.5:1**
       → 0.75（未选中 7.32:1 / 选中态深绿底 6.78:1，两种状态都过）
     · letter-spacing 0.1em 在 11px 中文上每字多撑 1.1px，而这行是
       「16P · 12 个画面」这类密集信息、不是短标签，宽字距只添噪 → 0.03em
   刻意不写死颜色：选中态 .vc-page-on 是深绿底浅色字，任何固定色都会在两种状态里的
   一种上不可读（下面 .vc-page-cost 同理）。 */
.vc-page-u { font-size: 12.5px; opacity: 0.75; margin-top: 4px; letter-spacing: 0.03em; }
/* 预估消耗关系到钱，比耗时那行更需要被看见 → 调高一档不透明度。刻意不写死颜色：
   选中态 .vc-page-on 是深绿底浅色字，任何固定色都会在两种状态里的一种上不可读。 */
.vc-page-cost { opacity: 0.85; font-weight: 600; }
/* 展示币图标（四角星，取自平台的 credits-star.svg）。跟着文字排版，
   1em 随字号缩放，-0.125em 让它与文字基线对齐而不是坐在基线上。 */
.vc-coin-star { width: 1em; height: 1em; vertical-align: -0.125em; margin-right: 0.25em; }
.vc-page-hint { font-size: 12px; color: var(--ink-500); margin-top: 10px; }
/* 成书规格 / 版式：三张卡片默认横向并排（flex 行）+ 卡片内联 min-width，在手机窄屏
   （3×130+间距≈406px > 屏宽）会横向溢出。窄屏改竖向堆叠一列（每张满宽），不溢出；
   桌面/平板仍三个并排。改布局方向即可，无需动内联 min-width（列方向下不再造成溢出）。 */
@media (max-width: 480px) {
  .vc-page-slider { flex-direction: column; }
}
.vc-ratio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.vc-ratio-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.vc-ratio-on {
  border-color: var(--forest-700);
  background: var(--forest-50);
  box-shadow: 0 0 0 3px rgba(45,91,78,0.08);
}
.vc-ratio-shape {
  width: min(54px, 70%);
  max-height: 62px;
  border: 2px solid var(--forest-700);
  border-radius: 4px;
  background: var(--paper-50);
}
.vc-ratio-card strong { color: var(--forest-900); font-size: 13px; }
.vc-ratio-card em { color: var(--ink-500); font-size: 11px; font-style: normal; }

/* Style grid */
.vc-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vc-style-card {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s;
}
@media (hover: hover) { .vc-style-card:hover { border-color: var(--line-strong); } }
.vc-style-on { box-shadow: 0 0 0 3px rgba(45,91,78,0.08); }
.vc-style-swatch {
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}
.vc-style-t { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink-900); }
.vc-style-d { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
/* 画风示例图（PMS #102572）：有示例时色块换成同题材示例图，右下角放大镜看大图 */
.vc-style-note { font-size: 12px; color: var(--ink-300); margin: -6px 0 12px; }
.vc-style-has-sample { padding: 8px 8px 10px; }
.vc-style-has-sample .vc-style-t, .vc-style-has-sample .vc-style-d { padding: 0 4px; }
.vc-style-sample { height: auto; aspect-ratio: 3 / 2; margin-bottom: 8px; background: var(--paper-50); }
.vc-style-sample img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-style-auto { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.vc-style-auto img { min-height: 0; }
.vc-style-auto-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  background: rgba(255,253,245,0.92); color: var(--forest-700); font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.vc-style-zoom { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(20,32,28,0.55); color: #fff; display: grid; place-items: center; font-size: 14px; line-height: 1; cursor: zoom-in; }
@media (hover: hover) { .vc-style-zoom:hover { background: rgba(20,32,28,0.78); } }
.vc-style-zoom:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.vc-style-check { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--forest-700); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.vc-style-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(20,32,28,0.62);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.vc-style-lightbox-card { position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--cream); border-radius: 14px; box-shadow: var(--shadow-md); }
.vc-style-lightbox-card img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-50); }
.vc-style-lightbox-close { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(20,32,28,0.55); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.vc-style-lightbox-body { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px 14px; }
.vc-style-lightbox-t { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink-900); }
.vc-style-lightbox-d { font-size: 12px; color: var(--ink-500); }
.vc-style-use { border: 0; background: var(--forest-800); color: var(--cream); border-radius: 8px; padding: 9px 16px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .vc-style-use:hover { background: var(--forest-900); } }

/* Tone */
.vc-tone-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vc-tone {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 16px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.12s;
  font-weight: 500;
}
@media (hover: hover) { .vc-tone:hover { border-color: var(--line-strong); } }
.vc-tone-on { background: var(--forest-800); color: var(--cream); border-color: var(--forest-900); }
.vc-tone-i { font-size: 16px; }

/* Checkboxes */
.vc-chk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vc-chk {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
  transition: all 0.12s;
  font-weight: 500;
}
@media (hover: hover) { .vc-chk:hover { border-color: var(--line-strong); } }
.vc-chk input { display: none; }
.vc-chk-box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: transparent; background: var(--paper-0); flex-shrink: 0;
}
.vc-chk-on { background: var(--forest-50); border-color: var(--forest-600); color: var(--forest-900); }
.vc-chk-on .vc-chk-box { background: var(--forest-700); border-color: var(--forest-800); color: white; }

/* Model */
.vc-model {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--paper-50);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.vc-model-l { display: flex; gap: 12px; align-items: center; }
.vc-model-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--cream); color: var(--forest-700); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.vc-model-name { font-size: 14px; font-weight: 600; color: var(--ink-900); display: flex; align-items: center; gap: 8px; }
.vc-model-name code { font-family: 'SF Mono', Menlo, monospace; font-size: 10.5px; background: var(--cream); color: var(--forest-700); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--line); font-weight: 400; }
.vc-model-sub { font-size: 12px; color: var(--ink-500); margin-top: 3px; }

/* Summary */
.vc-summary {
  background: var(--forest-50);
  border: 1px solid var(--forest-100);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 24px;
}
.vc-summary-head { font-size: 11px; color: var(--forest-700); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.vc-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.vc-summary-grid > div { display: flex; flex-direction: column; gap: 2px; }
.vc-summary-grid span { font-size: 11px; color: var(--ink-500); letter-spacing: 0.04em; }
.vc-summary-grid strong { font-family: var(--serif); font-size: 14px; color: var(--forest-900); font-weight: 600; }
.vc-summary-wide { grid-column: 1 / -1; }

.vc-production-note {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink-700);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}

/* 成书任务状态：沿用纸面/森林绿体系，只呈现真实任务数量与时间。 */
.vc-production-status {
  position: sticky;
  top: 76px;
  z-index: 18;
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 13px 15px;
  border: 1px solid var(--paper-200);
  border-left: 4px solid var(--forest-700);
  border-radius: 12px;
  background: rgba(255,253,247,.96);
  box-shadow: 0 8px 24px rgba(40,54,46,.08);
  backdrop-filter: blur(10px);
}
.vc-production-status.is-error { border-left-color:#a44a35; }
.vc-production-status.is-complete { border-left-color:#4b8d70; }
.vc-production-status-main { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.vc-production-status-copy { display:grid; gap:2px; min-width:0; }
.vc-production-status-kicker { color:var(--forest-700); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.vc-production-status-copy strong { color:var(--ink-900); font-size:15px; line-height:1.35; }
.vc-production-status-counts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 14px; color:var(--ink-500); font-size:12px; font-variant-numeric:tabular-nums; }
.vc-production-status-counts b { color:var(--ink-900); }
.vc-production-status-counts .vc-production-status-eta { color:var(--forest-800); font-weight:600; }
.vc-production-status-track { height:5px; overflow:hidden; border-radius:999px; background:var(--paper-100); }
.vc-production-status-track span { display:block; height:100%; border-radius:inherit; background:#d6a44d; transition:width .24s ease; }
.vc-production-status.is-complete .vc-production-status-track span { background:#4b8d70; }
.vc-production-status-actions { display:flex; align-items:center; gap:10px; min-height:20px; color:var(--ink-500); font-size:12px; }
.vc-production-status-actions .tk-btn { min-height:36px; }
.vc-nav-stage-label { color:var(--ink-500); font-size:12px; font-weight:600; }
.vc-production-ready { border-color: var(--forest-100); background: var(--forest-50); color: var(--forest-900); }
.vc-production-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--forest-600);
  flex-shrink: 0;
}
.vc-story-result {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  padding: 18px;
  overflow: hidden;
}
.vc-story-result-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.vc-story-result h2 {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--forest-900);
  margin: 0;
  line-height: 1.25;
}
.vc-story-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.vc-story-option-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  padding: 18px;
  display: grid;
  gap: 12px;
  min-width: 0;
  /* 卡片本身是 <button>，浏览器默认 text-align:center 会继承给里面的标题和正文，
     整段故事因此居中排版。头部用的是 justify-content:space-between（左右分布），
     可见居中并非设计意图，而是这个默认值漏了覆盖。 */
  text-align: left;
}
.vc-story-option-card-on {
  border-color: var(--forest-700);
  box-shadow: 0 0 0 3px rgba(45,91,78,0.08);
  background: var(--forest-50);
}
.vc-story-option-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.vc-story-option-head h2 {
  margin: 2px 0 6px;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--forest-900);
  line-height: 1.25;
}
.vc-story-option-head p {
  margin: 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.6;
}
.vc-story-option-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vc-story-option-meta span {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper-50);
  border: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 12px;
}
.vc-story-option-text {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.58);
  padding: 14px;
  max-height: 520px;
  overflow: auto;
}
/* 中文正文排版：左对齐 + 每段首行缩进 2 字。缩进用 em 而非 px——em 跟随字号，
   换字号或多语言下始终正好是两个汉字宽。段落之间留一点间距，不靠空行撑。 */
.vc-story-option-text p {
  margin: 0 0 0.55em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-900);
  text-align: left;
  text-indent: 2em;
  /* 故事里可能出现长英文名或 URL，不断词会把卡片撑出横向滚动 */
  overflow-wrap: anywhere;
}
.vc-story-option-text p:last-child { margin-bottom: 0; }
/* 西文按自己的惯例排：首行缩进与段间距是二选一，英文里两个同时用属于排版错误。
   中文相反——缩进两格是标准，段间距只是提升可读性。<html lang> 由 shared/i18n.js
   在切换语言时同步更新，所以这条规则跟着界面语言实时生效。 */
html[lang^="en"] .vc-story-option-text p { text-indent: 0; }
/* 保留 pre 规则：其它地方若仍以 pre 呈现正文，样式不至于突然丢失 */
.vc-story-option-text pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-900);
  text-align: left;
}
.vc-finished-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
/* 成书页顶部：书名 + 完成后多达 5 个（含长标签）按钮同在一 flex 行，移动端按钮挤占空间
   把书名压成窄窄一列、换行难看。窄屏改竖向堆叠：书名独占一行（不被挤压），按钮组整排
   在下方左对齐。桌面端不进此查询，保持标题左/按钮右一行。 */
@media (max-width: 720px) {
  .vc-story-result-head { flex-direction: column; align-items: stretch; }
  .vc-finished-actions { justify-content: flex-start; }
}
.vc-output-preview-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-50);
}
.vc-output-preview-toggle button {
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  background: transparent;
  color: var(--ink-500);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.vc-output-preview-toggle button.is-active {
  background: var(--forest-800);
  color: var(--cream);
}
.vc-output-preview-toggle button:focus-visible {
  outline: 2px solid var(--forest-600);
  outline-offset: 2px;
}
.vc-story-pages { display: grid; gap: 12px; min-width: 0; }
.vc-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.vc-pipeline-step {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-50);
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
}
.vc-pipeline-step span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.vc-pipeline-active {
  background: var(--forest-50);
  color: var(--forest-900);
  border-color: var(--forest-100);
}
.vc-pipeline-done {
  background: var(--forest-800);
  color: var(--cream);
  border-color: var(--forest-900);
}
.vc-design-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.vc-design-card {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--paper-50);
}
.vc-design-media {
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream);
}
.vc-design-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vc-image-open {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: block;
  cursor: zoom-in;
}
.vc-image-open img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vc-design-copy h3 {
  font-family: var(--serif);
  margin: 2px 0 5px;
  font-size: 15px;
  color: var(--forest-900);
}
.vc-design-copy p {
  margin: 0;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.vc-design-copy em {
  display: block;
  margin-top: 6px;
  color: var(--orange-600);
  font-size: 12px;
  font-style: normal;
}
.vc-story-page {
  display: grid;
  grid-template-columns: minmax(120px, 0.26fr) minmax(0, 1fr);
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  min-width: 0;
}
.vc-story-page-textonly { grid-template-columns: 1fr; }
.vc-wide-action {
  margin-top: 18px;
  justify-content: center;
  /* 中文下仍是 240px；外文按钮文字更长时自动加宽、必要时换行，不再被裁掉 */
  width: auto;
  min-width: min(240px, 100%);
  max-width: 100%;
  white-space: normal;
}
.vc-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.vc-analysis-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-50);
  padding: 12px;
  min-width: 0;
}
.vc-analysis-panel h3 {
  margin: 2px 0 10px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--forest-900);
}
.vc-analysis-list {
  display: grid;
  gap: 8px;
}
.vc-analysis-item {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--cream);
}
.vc-analysis-item strong {
  color: var(--forest-900);
  font-size: 13px;
}
.vc-analysis-item span {
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.45;
}
.vc-setting-workbench {
  display: grid;
  /* 显式单列 minmax(0,1fr)：不写 grid-template-columns 时是隐式 auto 列，auto 列会长到
     内容 max-content 且不受容器宽度约束（选 IP 后参考卡片含 nowrap 长按钮，其 max-content
     把该列撑到 ~396px，窄屏溢出；没选 IP 时参考区只是小上传按钮故不复现）。minmax(0,…) 被容器夹住。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  /* 角色名/描述/上游错误串等可能是长不可断的英文或 URL：中文能任意换行不溢出，
     这类长串在窄屏会撑破整页产生横向滚动条（QA 在角色页反馈，中文测数据复现不到）。
     overflow-wrap:anywhere 可继承，覆盖角色页工作区+参考区与成书页文字，只在会溢出时才断。 */
  overflow-wrap: anywhere;
}
.vc-design-list {
  display: grid;
  gap: 14px;
}
.vc-empty-state {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--paper-50);
  color: var(--ink-500);
}
.vc-empty-state strong {
  color: var(--forest-900);
  font-size: 15px;
}
.vc-empty-state span {
  font-size: 13px;
  line-height: 1.55;
}
.vc-empty-state .tk-btn {
  justify-self: start;
}
.vc-design-card-large {
  grid-template-columns: 180px 1fr;
  align-items: stretch;
}
.vc-design-card-large .vc-design-media {
  min-height: 0;
}
.vc-design-card-stack {
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
}
.vc-design-card-stack .vc-design-editor {
  grid-column: 1 / -1;
}
.vc-design-editor {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.vc-character-workspace {
  display: grid;
  grid-template-columns: minmax(180px, 0.24fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.vc-character-list-panel,
.vc-character-editor-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-50);
}
.vc-character-list-panel {
  padding: 14px;
}
.vc-character-list-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
/* 外文标题更长：放不下时按钮换到下一行，标题按词换行，不再被挤成一个字母一行（生成中「终止制作」按钮更宽时最明显） */
.vc-character-list-head { flex-wrap: wrap; }
.vc-character-list-head > div { flex: 1 1 8em; min-width: 0; word-break: normal; overflow-wrap: normal; }
.vc-character-list-head > .tk-btn { flex: 0 0 auto; }
.vc-character-list-head h2 {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--forest-900);
}
.vc-character-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 而非隐式 auto 列：角色名 strong 是 nowrap，
    min-content=整名宽度，auto/1fr 列会被撑宽致横向溢出。minmax(0,…) 允许收缩，省略号才生效 */
  gap: 10px;
}
.vc-character-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--cream);
}
.vc-character-empty p {
  margin: 0;
  color: var(--muted, #6b6b6b);
  font-size: 14px;
  line-height: 1.6;
}
.vc-character-tile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* 选中态在媒体查询外（同 start.html 的 .bc.on：包 hover 时别把状态类一起包进去） */
.vc-character-tile-on {
  border-color: var(--forest-700);
  background: var(--forest-50);
}
@media (hover: hover) { .vc-character-tile:hover {
  border-color: var(--forest-700);
  background: var(--forest-50);
} }
.vc-character-status-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ink-300);
  background: var(--cream);
}
.vc-character-status-generating { border-color: var(--forest-700); }
.vc-character-status-done { border-color: var(--forest-700); background: var(--forest-100); }
.vc-character-status-failed { border-color: var(--orange-600); background: var(--orange-50); }
.vc-character-tile-copy {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.vc-character-tile-copy strong {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--forest-900);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-character-tile-copy em {
  color: var(--forest-700);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  flex: 0 0 auto;
}
.vc-character-editor-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
}
.vc-character-editor-media {
  min-height: 0;
  aspect-ratio: 1 / 1;
  width: min(100%, 360px);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream);
}
.vc-character-editor-media .vc-image-open,
.vc-character-editor-media .vc-image-open img {
  min-height: 0;
  aspect-ratio: 1 / 1;
}
.vc-character-editor-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.vc-character-editor-main {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}
.vc-character-editor-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.vc-character-editor-title h3 {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--forest-900);
}
.vc-character-position {
  display: block;
  margin-top: 3px;
  color: var(--forest-700);
  font-size: 12px;
  font-weight: 700;
}
.vc-character-editor-main p {
  margin: 0;
  color: var(--ink-500);
  line-height: 1.65;
}
.vc-design-error {
  color: var(--orange-600);
  font-size: 12px;
  font-style: normal;
}
.vc-prompt-editor {
  min-height: 150px;
  max-height: 360px;
  resize: vertical;
  line-height: 1.65;
  overflow: auto;
}
.vc-prompt-editor.vc-character-prompt-editor {
  min-height: 220px;
}
.vc-setting-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
/* 入口从工作区末尾移到了工作区之上，原先那条 border-top（用于跟上方内容分隔）语义已反，
   改为卡片形态。未上传时给一层浅绿底做视觉锚点——它是可选项，不该长期抢视线，
   所以一旦上传就回落成素净卡片。配角分支不带 -cta，与主角已上传时同一形态，切换不跳动。 */
.vc-reference-field {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
}
.vc-reference-field-cta {
  background: var(--forest-50);
  border-color: var(--forest-100);
}
.vc-upload-only {
  width: fit-content;
  min-height: 42px;
}
.vc-reference-card {
  display: grid;
  /* 1fr 下限=min-content：右列里 .tk-btn 是 nowrap，长文案（「上传自己的图像（将优先生效）」226px）
     的 min-content 会把列撑开致卡片内容右溢出。minmax(0,…) 让列可收缩，配合下面按钮换行才生效。 */
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  max-width: 520px;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 8px;
  padding: 10px;
}
.vc-reference-card img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--line);
  display: block;
}
.vc-reference-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.vc-reference-copy strong {
  font-family: var(--serif);
  color: var(--forest-900);
  font-size: 15px;
}
.vc-reference-copy span {
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.5;
}
/* .tk-btn 全局 nowrap，但本卡片的按钮文案长（中/英文都超 200px），窄屏放不下会冲出卡片右边框。
   允许换行：桌面端（卡片 520px）仍是单行，视觉不变；窄屏折成两行、不再溢出。 */
.vc-reference-copy .tk-btn {
  white-space: normal;
}
.vc-approved {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--forest-800);
  color: var(--cream);
  font-size: 11px;
  /* 这枚角标在 .vc-character-editor-title（flex + space-between）的右侧，左边是
     角色名（24px 衬线）和职位说明。没有下面两条时，角色名一长、或宽度落在
     "还没到窄屏 column 断点、但已经不够宽"的区间里，flex 就会压缩这枚角标，
     「已生成」三个字被折成两行（用户反馈）。
     nowrap 保证文字不折，flex-shrink:0 保证它不被压窄——压缩转移到左侧文字块，
     那里本来就是可换行的多行文本，挤一点没有副作用。 */
  white-space: nowrap;
  flex-shrink: 0;
}
.vc-story-page:first-child { border-top: 0; padding-top: 0; }
.vc-story-page-media {
  position: relative;
  container-type: inline-size; /* 供示意框用 cqw 按印刷比例换算字号 */
  aspect-ratio: var(--page-aspect, 1 / 1);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-50);
  border: 1px solid var(--line);
}
/* 印刷排版规则：页码小字置于画面左下角（右下角留给重绘按钮） */
.vc-final-pageno {
  position: absolute;
  left: 10px;
  bottom: 7px;
  font-size: 11px;
  color: rgba(90, 100, 94, 0.9);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75);
  pointer-events: none;
}
.vc-story-page-media img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 插图完整显示，不做任何裁切 */
  display: block;
}
.vc-image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.vc-redo-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;                 /* 高于封底语浮层（z-index:2），否则被盖住（QA 反馈） */
  border: 1px solid rgba(45, 91, 78, 0.35);
  background: rgba(255, 253, 247, 0.92);
  color: var(--forest-600, #2d5b4e);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* 禁用态同理留在外面：它不是 hover 反馈，触屏上也要成立
   （下面 (hover: none) 那条让按钮常显，所以这条在触屏是冗余的——但不能靠冗余兜） */
.vc-redo-btn:disabled,
.vc-redo-btn[aria-disabled="true"] { opacity: 1; }
@media (hover: hover) { .vc-image-wrap:hover .vc-redo-btn { opacity: 1; } }
/* aria-disabled 与原生 :disabled 同款外观。用 aria-disabled 是为了让点击仍能触发
   （原生 disabled 的按钮不产生 click 事件 → 点了毫无反应），好给用户一条说明。 */
.vc-redo-btn:disabled,
.vc-redo-btn[aria-disabled="true"] { cursor: default; color: var(--ink-300, #98a29c); }
/* 触屏无 hover：重绘按钮常显，否则移动端只有禁用态能看到 */
@media (hover: none) {
  .vc-redo-btn { opacity: 1; }
}
/* 封底图底部压着「封底语」浮层，右下角的重绘按钮会被它盖住。封底页把按钮移到右上角避开浮层。 */
.vc-book-back-page .vc-redo-btn { top: 8px; bottom: auto; }
/* 成书页每页工具行：文字位置固定 + 文字编辑 */
.vc-page-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.vc-page-tools-label {
  font-size: 12px;
  color: var(--ink-300, #98a29c);
  margin-right: 2px;
}
.vc-zone-btn {
  border: 1px solid var(--line);
  background: var(--cream, #fffdf7);
  color: var(--ink-500, #4e5a55);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.vc-zone-on {
  background: var(--forest-600, #2d5b4e);
  border-color: var(--forest-600, #2d5b4e);
  color: #fff;
}
.vc-zone-edit { margin-left: auto; }
.vc-page-editbox {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  background: var(--forest-50, #eef5f0);
  border-radius: 10px;
}
.vc-page-editbox textarea,
.vc-page-editbox input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.vc-page-editbox-actions { display: flex; gap: 8px; }

/* 排版编辑器（PPT 式）：大画面画布 + 右侧控制面板 */
.vc-layout-modal { display: flex; align-items: center; justify-content: center; }
/* 图面上的排版入口（悬停出现，右上角；右下角是重绘） */
.vc-layout-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  border: 1px solid rgba(45, 91, 78, 0.35);
  background: rgba(255, 253, 247, 0.92);
  color: var(--forest-600, #2d5b4e);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}
@media (hover: hover) { .vc-story-page-media:hover .vc-layout-btn { opacity: 1; } }
/* 触屏无 hover：排版入口常显，否则它永远 opacity:0，移动端根本点不到。
 * 与上面 .vc-redo-btn 同一处理。加 (hover: hover) 保护时漏了这条 = 功能性回归，
 * 而且不报错、只是按钮不见了。凡是「靠 hover 露出来」的控件都必须配这个兜底。 */
@media (hover: none) {
  .vc-layout-btn { opacity: 1; }
}
.vc-layout-wrap {
  display: flex;
  gap: 16px;
  background: var(--cream, #fffdf7);
  border-radius: 14px;
  padding: 16px;
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}
.vc-layout-canvas {
  container-type: inline-size;
  position: relative;
  flex: 0 0 auto;
  background: #eee5d6;
  border-radius: 8px;
  overflow: hidden;
  align-self: center;
}
.vc-layout-canvas img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  z-index: 0;
}
/* comicaljs 生成的气泡画布/SVG：置于插画之上、文字之下 */
.vc-layout-canvas canvas.comical-generated,
.vc-layout-canvas img.comical-generated,
.vc-layout-canvas svg.comical-generated {
  position: absolute !important;
  left: 0;
  top: 0;
  z-index: 3 !important;
}
.vc-ppt-box {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 1.5px solid #2b7de9;
  background: transparent;
  cursor: move;
  user-select: none;
  touch-action: none;
  z-index: 4; /* 必须盖过 comical 覆盖层（z3），否则正文框收不到鼠标事件 */
  color: var(--ink-700, #24313f);
  padding: 4px 6px;
}
.vc-ppt-box p { margin: 0; position: relative; white-space: pre-line; }
.vc-ppt-box { display: flex; align-items: center; outline: 1.5px solid #2b7de9; }
.vc-ppt-box p { width: 100%; overflow-wrap: anywhere; letter-spacing: 0; }
/* 半透明衬底：跟随框体，白底圆角锐边（不再羽化模糊） */
.vc-ppt-pad,
.vc-pad-preview {
  position: absolute;
  inset: -10px -12px;
  z-index: 0;
  border-radius: 14px;
  pointer-events: none;
}
/* 对白话泡（编辑器与缩略图预览） */
.vc-ppt-dlg,
.vc-drag-dialogue {
  position: relative;
  display: inline-block;
  background: #fff;
  border-radius: 12px;
  padding: 5px 12px;
  margin-top: 8px !important;
  color: var(--ink-700, #24313f) !important;
  box-shadow: 0 1px 4px rgba(60, 50, 30, 0.15);
}
.vc-ppt-dlg-free {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: 46%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 4;
  white-space: pre-line;
}
/* comicaljs 托管的对白元素：库负责画泡泡，本体只是文字（comical 不认 CSS transform，用左上锚点） */
.vc-comical-dlg {
  transform: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
  color: var(--ink-700, #24313f);
  text-align: center;
  max-width: 34%;
}
.vc-comical-dlg::after { display: none !important; }
/* 扩大气泡抓取区：画出的气泡比文字元素大一圈，让整个泡身都能按住拖动 */
.vc-dlg-hit {
  position: absolute;
  inset: -16px -24px;
  cursor: grab;
}
/* 自绘气泡：SVG 泡体层（事件穿透，拖柄单独放行） */
.vc-dlg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
/* 拖柄独立顶层：必须压过正文框（z4）和气泡文字（z4），否则柄落进它们范围就抓不到 */
.vc-dlg-svg-top { z-index: 7; }
.vc-dlg-handles circle {
  pointer-events: auto;
  cursor: grab;
  fill: #ffffff;
  stroke: #2b7de9;
  stroke-width: 2;
}
@media (hover: hover) { .vc-dlg-handles circle:hover { fill: #e8f3ff; } }
/* 泡体长宽拖柄（方形，区别于圆形尾巴柄） */
.vc-dlg-rs {
  pointer-events: auto;
  fill: #ffffff;
  stroke: #2b7de9;
  stroke-width: 2;
}
@media (hover: hover) { .vc-dlg-rs:hover { fill: #e8f3ff; } }
.vc-dlg-rs-w { cursor: ew-resize; }
.vc-dlg-rs-h { cursor: ns-resize; }
/* 气泡文字元素：中心锚点、无自带外观（泡体全由 SVG 画） */
.vc-dlg-plain {
  background: none;
  border: 0;
  text-align: center;
  color: var(--ink-700, #24313f);
  max-width: 34%;
}
.vc-color-input {
  width: 30px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.vc-ppt-dlg-free:active { cursor: grabbing; }
.vc-ppt-dlg::after,
.vc-drag-dialogue::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 26%;
  border: 5px solid transparent;
  border-bottom-color: #fff;
  border-top-width: 0;
}
.vc-layout-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-500, #4e5a55);
}
.vc-layout-slider input { flex: 1; }
.vc-ppt-h {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: #fff;
  border: 1.5px solid #2b7de9;
  border-radius: 3px;
  cursor: ew-resize;
  touch-action: none;
}
.vc-ppt-hl { left: -7px; }
.vc-ppt-hr { right: -7px; }
.vc-layout-side {
  width: 320px;
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  align-content: start;
}
.vc-layout-side-head { font-weight: 700; font-size: 16px; color: var(--ink-700, #24313f); }
.vc-layout-side textarea,
.vc-layout-side input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.vc-layout-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-layout-tip { font-size: 12px; color: var(--ink-300, #98a29c); line-height: 1.6; margin: 4px 0 0; }
.vc-layout-actions { display: flex; gap: 8px; margin-top: 6px; }
.vc-layout-side textarea { min-height:112px;line-height:1.6;resize:vertical; }
.vc-layout-side { align-self:flex-start; }
.vc-layout-actions { position:sticky;bottom:0;padding:10px 0;background:var(--cream);z-index:5; }
.vc-layout-modal .vc-layout-wrap { max-width:calc(100vw - 32px); }
@media (max-width:850px) {
  .vc-layout-modal { padding:12px; }
  .vc-layout-modal .vc-layout-wrap { flex-direction:column;width:100%;max-width:100%;max-height:96vh;padding:12px; }
  .vc-layout-canvas { flex-shrink:0; }
  .vc-layout-side { width:100%; }
}

/* 精排模板：沿用纸色、墨色与森林绿选择态；预览几何来自 shared/book-layout。 */
.vc-template-picker { width: 100%; margin: 16px 0 20px; padding: 16px; border: 1px solid var(--paper-100); border-radius: 14px; background: rgba(255, 253, 248, .7); }
.vc-template-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.vc-template-picker-head b { color: var(--ink-900); font-family: var(--serif); font-size: 17px; }
.vc-template-picker-head p { margin: 4px 0 0; color: var(--ink-300); font-size: 12.5px; line-height: 1.55; }
.vc-template-manual-note, .vc-template-legacy-note, .vc-template-standard-note, .vc-template-overlay-note { color: var(--forest-700); font-size: 12px; line-height: 1.5; }
.vc-template-manual-note { flex: none; padding: 5px 8px; border-radius: 999px; background: var(--forest-50); }
.vc-template-legacy-note, .vc-template-standard-note { margin: 0 0 12px; padding: 8px 10px; border-left: 3px solid var(--forest-500); background: var(--forest-50); }
.vc-template-standard-note { color: var(--ink-500); border-left-color: var(--paper-300); background: var(--paper-50); }
.vc-template-overlay-note { margin: 10px 0 0; color: var(--ink-500); }
.vc-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vc-template-option { appearance: none; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--paper-200); border-radius: 12px; background: #fffdf8; color: var(--ink-900); text-align: left; cursor: pointer; }
@media (hover: hover) { .vc-template-option:hover { border-color: var(--forest-400); } }
.vc-template-option[aria-pressed="true"] { border-color: var(--forest-700); box-shadow: 0 0 0 2px rgba(49, 90, 66, .13); }
.vc-template-option:focus-visible { outline: 3px solid rgba(49, 90, 66, .32); outline-offset: 3px; }
.vc-template-preview { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid #d7cdbd; border-radius: 8px; background: #f7f0e3; }
.vc-template-preview img, .vc-template-preview > span { position: absolute; max-width: none; margin: 0; }
.vc-template-preview > span { display: flex; align-items: center; padding: 0 5%; overflow: hidden; background: #fffdf8; color: #2e2924; font-size: 7px; line-height: 1.4; }
.vc-template-option-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--serif); font-size: 14px; font-weight: 700; }
.vc-template-option-title small { color: var(--forest-700); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.vc-template-option-desc { color: var(--ink-300); font-size: 11.5px; line-height: 1.5; }
.vc-finished-actions > .vc-template-picker { flex-basis: 100%; }
@media (max-width: 768px) {
  .vc-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-template-picker-head { display: block; }
  .vc-template-manual-note { display: inline-block; margin-top: 8px; }
}
@media (max-width: 560px) {
  .vc-template-grid { grid-template-columns: 1fr; }
  .vc-template-picker { padding: 12px; }
  .vc-template-option { grid-template-columns: 88px 1fr; padding: 8px; }
  .vc-template-preview { grid-row: 1 / 3; }
}
@media (min-width: 1180px) { .vc-template-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vc-paper-kind-overlay .vc-designed-page-number {
  left: auto;
  right: 2.5%;
  top: 2.5%;
  bottom: auto;
  min-width: 1.8em;
  padding: .18em .45em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #2e2924;
  text-align: center;
  text-shadow: none;
}
.vc-scene-modal{z-index:1000;align-items:flex-start;overflow:auto;padding:24px}
.vc-scene-editor{width:min(1100px,100%);margin:auto;padding:18px;border:1px solid var(--paper-200);border-radius:16px;background:#fffdf8;color:var(--ink-900);box-shadow:0 24px 70px rgba(36,44,39,.22)}
.vc-scene-editor-head,.vc-scene-editor-actions{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.vc-scene-editor-head h3{margin:0;font-family:var(--serif)}.vc-scene-editor-head p{margin:5px 0 0;color:var(--ink-300);font-size:12.5px}
.vc-scene-editor-grid{display:grid;grid-template-columns:minmax(320px,1.15fr) minmax(300px,.85fr);gap:18px;margin-top:16px}.vc-scene-canvas{appearance:none;position:sticky;top:0;display:block;width:100%;padding:0;overflow:hidden;border:1px solid var(--paper-200);border-radius:12px;background:#ede8de;cursor:crosshair}.vc-scene-canvas>img:first-child{display:block;width:100%;height:auto}.vc-scene-layer{position:absolute;object-fit:contain;pointer-events:none}.vc-scene-hotspot{position:absolute;display:grid;place-items:center;width:28px;height:28px;transform:translate(-50%,-50%);border:2px solid white;border-radius:50%;background:var(--forest-700);color:white;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(15,35,26,.32);pointer-events:none}
.vc-scene-fields{display:grid;gap:12px;max-height:68vh;overflow:auto;padding-right:4px}.vc-scene-fields section,.vc-scene-card{display:grid;gap:9px;padding:12px;border:1px solid var(--paper-100);border-radius:12px;background:var(--paper-50)}.vc-scene-fields h4{margin:0;font-family:var(--serif)}.vc-scene-card{background:#fff}.vc-scene-card label{display:grid;gap:4px;color:var(--ink-500);font-size:12px}.vc-scene-card input:not([type=range]),.vc-scene-card textarea,.vc-scene-card select{width:100%;padding:8px;border:1px solid var(--paper-200);border-radius:8px;background:white;color:var(--ink-900);font:inherit}.vc-scene-card textarea{resize:vertical}.vc-scene-editor-actions{align-items:center;margin-top:16px}.vc-scene-editor-actions>span{flex:1}.vc-scene-editor :focus-visible{outline:3px solid rgba(49,90,66,.32);outline-offset:2px}
.vc-scene-fields .vc-scene-assistant{gap:12px;padding:14px;border-color:var(--paper-200);border-top:3px solid var(--forest-700);background:#fffdf8}
.vc-scene-assistant-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.vc-scene-assistant-head h4{margin:2px 0 0;font-size:18px}.vc-scene-assistant-kicker{color:var(--forest-700);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.vc-scene-assistant-callout{flex:0 0 auto;padding:5px 8px;border:1px solid var(--paper-200);border-radius:999px;background:var(--paper-50);color:var(--ink-500);font-size:11px;font-weight:700}
.vc-scene-assistant-kind{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;border:0}.vc-scene-assistant-kind legend{grid-column:1/-1;margin-bottom:1px;color:var(--ink-500);font-size:12px;font-weight:700}.vc-scene-assistant-kind label{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:10px;border:1px solid var(--paper-200);border-radius:10px;background:white;cursor:pointer}.vc-scene-assistant-kind label.is-selected{border-color:var(--forest-700);box-shadow:inset 0 0 0 1px var(--forest-700);background:rgba(49,90,66,.045)}.vc-scene-assistant-kind input{flex:0 0 auto;margin:3px 0 0;accent-color:var(--forest-700)}.vc-scene-assistant-kind span{display:grid;gap:3px}.vc-scene-assistant-kind b{font-size:13px;color:var(--ink-900)}.vc-scene-assistant-kind small{color:var(--ink-300);font-size:11px;line-height:1.45}
.vc-scene-assistant-description{display:grid;gap:5px;color:var(--ink-500);font-size:12px;font-weight:700}.vc-scene-assistant-description textarea{width:100%;min-height:76px;padding:9px 10px;border:1px solid var(--paper-200);border-radius:9px;background:white;color:var(--ink-900);font:inherit;line-height:1.5;resize:vertical}.vc-scene-assistant-description small{color:var(--ink-300);font-size:10.5px;font-weight:400;text-align:right}
.vc-scene-assistant-confirm{display:grid;gap:8px;padding:12px;border:1px solid #e0b172;border-radius:10px;background:#fff7e9}.vc-scene-assistant-confirm h5{margin:0;color:#713c17;font-family:var(--serif);font-size:15px}.vc-scene-assistant-confirm p{margin:0;color:#713c17;font-size:12px;line-height:1.55}.vc-scene-assistant-confirm>div,.vc-scene-assistant-result-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:3px}
.vc-scene-assistant-task{display:grid;gap:10px}.vc-scene-assistant-status{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--paper-200);border-radius:10px;background:var(--paper-50)}.vc-scene-assistant-status-dot{flex:0 0 auto;width:9px;height:9px;margin-top:5px;border-radius:50%;background:var(--ink-300)}.vc-scene-assistant-task.is-queued .vc-scene-assistant-status-dot,.vc-scene-assistant-task.is-running .vc-scene-assistant-status-dot,.vc-scene-assistant-task.is-posting .vc-scene-assistant-status-dot,.vc-scene-assistant-task.is-checking .vc-scene-assistant-status-dot{background:#b96a25;box-shadow:0 0 0 4px rgba(185,106,37,.12)}.vc-scene-assistant-task.is-succeeded .vc-scene-assistant-status-dot{background:var(--forest-700);box-shadow:0 0 0 4px rgba(49,90,66,.12)}.vc-scene-assistant-task.is-failed .vc-scene-assistant-status-dot,.vc-scene-assistant-task.is-interrupted .vc-scene-assistant-status-dot{background:#a84e30}.vc-scene-assistant-status b{display:block;color:var(--ink-900);font-size:12.5px;line-height:1.5}.vc-scene-assistant-status p{margin:4px 0 0;color:var(--ink-500);font-size:11.5px;line-height:1.5}.vc-scene-assistant-status small{display:block;margin-top:5px;color:var(--ink-300);font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
.vc-scene-assistant-stale{margin:0;padding:9px 10px;border-left:3px solid #a84e30;background:#fff0e9;color:#7c321e;font-size:12px;line-height:1.55}.vc-scene-assistant-local-error{margin:12px 0 0;padding:10px 12px;border:1px solid rgba(154,74,48,.38);border-radius:10px;background:rgba(154,74,48,.08);color:#743826;font-size:13px;line-height:1.55}.vc-scene-assistant-result{display:grid;gap:10px}.vc-scene-assistant-compare{display:grid;grid-template-columns:1fr 1fr;gap:9px}.vc-scene-assistant-compare figure{display:grid;align-content:start;gap:5px;min-width:0;margin:0}.vc-scene-assistant-image{display:grid;place-items:center;overflow:hidden;min-height:130px;aspect-ratio:3/2;border:1px solid var(--paper-200);border-radius:9px;background:#eee9df}.vc-scene-assistant-image.is-alpha{background-color:#f8f6ef;background-image:linear-gradient(45deg,#d8d5cd 25%,transparent 25%),linear-gradient(-45deg,#d8d5cd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8d5cd 75%),linear-gradient(-45deg,transparent 75%,#d8d5cd 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.vc-scene-assistant-image img{display:block;width:100%;height:100%;object-fit:contain}.vc-scene-assistant-compare figcaption{color:var(--ink-500);font-size:10.5px;line-height:1.45}.vc-scene-assistant-tech-note{margin:0;color:var(--ink-300);font-size:11px;line-height:1.5}
@media(max-width:760px){.vc-scene-modal{padding:8px}.vc-scene-editor{padding:12px}.vc-scene-editor-grid{grid-template-columns:1fr}.vc-scene-canvas{position:relative}.vc-scene-fields{max-height:none}.vc-scene-editor-actions{flex-wrap:wrap}.vc-scene-editor-actions .tk-btn{min-height:44px}}
@media(max-width:520px){.vc-scene-assistant-kind,.vc-scene-assistant-compare{grid-template-columns:1fr}.vc-scene-assistant-head{align-items:flex-start}.vc-scene-assistant-confirm>div,.vc-scene-assistant-result-actions{display:grid;grid-template-columns:1fr}.vc-scene-assistant .tk-btn{width:100%;min-height:44px;justify-content:center}.vc-scene-assistant-image{min-height:150px}}
@media(prefers-reduced-motion:reduce){.vc-scene-assistant *{scroll-behavior:auto!important;animation:none!important}}

/* 自由拖动的图文框（成书页 custom 模式） */
.vc-drag-text {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 8px 12px 18px;
  background: rgba(255, 253, 247, 0.82);
  border: 1.5px dashed var(--forest-600, #2d5b4e);
  border-radius: 10px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-700, #24313f);
  z-index: 3;
}
.vc-drag-text:active { cursor: grabbing; }
.vc-drag-text-static { cursor: pointer; }
.vc-drag-text p { margin: 0; position: relative; white-space: pre-line; }
.vc-drag-dialogue { color: var(--ink-500, #4e5a55); }
.vc-drag-hint {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--forest-600, #2d5b4e);
  white-space: nowrap;
}
.vc-drag-resize {
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  background: var(--forest-600, #2d5b4e);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  cursor: ew-resize;
  touch-action: none;
}

.vc-dock-warm {
  margin: 8px 10px 2px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--forest-600, #2d5b4e);
  background: var(--forest-50, #eef5f0);
  border-radius: 10px;
  animation: vc-warm-in 0.5s ease;
}
@keyframes vc-warm-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.vc-story-page-placeholder {
  position: relative;   /* 「为什么点不动」的就近提示要贴在占位框底部 */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-500);
  font-size: 12px;
  text-align: center;
  padding: 10px;
}
.vc-retry-btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.vc-retry-btn {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
}
.vc-mini-retry {
  border: 1px solid var(--orange-600);
  color: var(--orange-600);
  background: var(--orange-100);
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.vc-story-page-generating { color: var(--forest-800); background: var(--forest-50); }
.vc-story-page-failed { color: var(--orange-600); background: var(--orange-100); }
.vc-story-page-copy { min-width: 0; }
.vc-story-page-no {
  font-size: 11px;
  color: var(--forest-700);
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
}
.vc-story-page-copy p {
  margin: 0;
  color: var(--ink-900);
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.vc-story-page-copy h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  color: var(--forest-900);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.vc-story-page-copy blockquote {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--forest-500);
  color: var(--forest-900);
  font-family: var(--serif);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.vc-story-page-copy small {
  display: block;
  margin-top: 7px;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.vc-story-page-copy em {
  display: block;
  margin-top: 7px;
  color: var(--orange-600);
  font-size: 12px;
  font-style: normal;
  max-height: 72px; /* 长错误文案（如质检判词）不撑爆草稿列表，超出内部滚动 */
  overflow-y: auto;
  scrollbar-width: thin;
  overflow-wrap: anywhere;
}
.vc-page-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-50);
}
.vc-page-breakdown div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.vc-page-breakdown span {
  color: var(--forest-700);
  font-size: 10px;
  font-weight: 700;
}
.vc-page-breakdown strong {
  color: var(--ink-900);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.vc-book-output-pages {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.vc-book-output-page {
  /* 必须 minmax(0, ...) 而不是 1fr。
     `1fr` 等于 `minmax(auto, 1fr)`，列宽不能小于内部内容的 min-content —— 而这张卡片里
     的质检状态条（.vc-page-flag summary）带一个 white-space:nowrap 的提示文案，它的
     min-content 贡献就是**整句话不折行的宽度**（实测 342px）。于是窄屏上列宽被撑到 342，
     提示条溢出卡片、整页出现横向滚动（QA 反馈的"AI 建议重画在移动端溢出"）。
     hint 上那句 `flex:1; min-width:0` 只让它在**收缩时**能变窄，并不改变它对容器
     min-content 的贡献 —— 所以当年只改 hint 没能解决，必须在这里把列放开。
     浏览器实测：视口 316px 时横向滚动 31px → 改成 minmax(0,1fr) 后为 0，且 hint
     正常出现省略号；276px 时 67px → 0。 */
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--paper-50);
}
.vc-book-output-page:first-child {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.vc-book-output-page-designed-shell {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--cream);
}
.vc-designed-page-canvas {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  background: var(--cream);
}
.vc-designed-page-number {
  position: absolute;
  right: 4.5%;
  bottom: 3.5%;
  color: var(--ink-300);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.vc-page-layout-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: var(--paper-50);
}
.vc-page-layout-button {
  border: 0;
  padding: 2px 0;
  background: transparent;
  color: var(--forest-700);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.vc-page-layout-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.vc-page-layout-button:focus-visible {
  outline: 2px solid var(--forest-600);
  outline-offset: 3px;
}
.vc-page-layout-control span {
  color: var(--ink-300);
  font-size: 10px;
}
.vc-page-layout-control em {
  margin-left: auto;
  color: var(--orange-600);
  font-size: 10px;
}
/* 以下为我们原成书页正文区样式（老书放行面板等仍在用其中的类名）*/
.vc-fixed-page-copy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px 8%;
  border-top: 1px solid var(--line);
  background: var(--cream);
  overflow-y: auto; /* 极端长文兜底：带内滚动，不裁字、不压页码 */
  scrollbar-width: thin;
  text-align: center; /* 与居中的插图、成书 PDF、阅读页保持统一（图心文居中，不再图中文偏左） */
}
.vc-fixed-page-copy p {
  margin: auto 0; /* 溢出滚动时 align-items:center 会裁掉顶部，margin:auto 才安全居中 */
  width: 100%;
  color: var(--ink-900);
  font-size: clamp(11px, 1.45vw, 15px);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
/* 正文字号按字数降档（56–90 字 / >90 字），预览观感贴近成书排版 */
.vc-fixed-page-copy--mid p { font-size: clamp(10px, 1.25vw, 12.5px); line-height: 1.55; }
.vc-fixed-page-copy--long p { font-size: clamp(9px, 1.1vw, 11px); line-height: 1.5; }
.vc-fixed-page-copy > span {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: var(--ink-300);
  font-size: 10px;
}
/* 移动端成书页：整页仍按开本比例，但屏窄导致文字区(默认仅占 22% 高)被压到几十像素、
   每段都要在内滚动里翻。窄屏把图/文高度比从 78/22 调到 55/45 给文字更多空间，并放大
   正文字号（原 vw 系数在窄屏偏小、被 clamp 下限托着）。桌面端不进此查询，比例不变。 */
@media (max-width: 560px) {
  /* 图片宽度总是填满：移动端放开固定开本比例，图按自身比例撑满页面宽度、完整显示
     （不裁切、无两侧留白），文字在图片下方按内容自然排（不再挤压/逐段滚动）。
     成书页因此在移动端从"固定纸面比例 split"变为流式；桌面端仍固定比例（见上方默认规则）。 */
  .vc-book-output-page-split-fixed {
    aspect-ratio: auto;
    grid-template-rows: auto auto;
    overflow: visible;
  }
  .vc-book-output-page-split-fixed .vc-story-page-media { height: auto; }
  .vc-book-output-page-split-fixed .vc-image-wrap { padding: 0; }
  .vc-book-output-page-split-fixed .vc-story-page-media img { width: 100%; height: auto; }
  .vc-fixed-page-copy { overflow-y: visible; align-items: flex-start; padding: 12px 6%; }
  .vc-fixed-page-copy p,
  .vc-fixed-page-copy--mid p,
  .vc-fixed-page-copy--long p { margin: 0; font-size: clamp(14px, 3.6vw, 16px); line-height: 1.7; }
}
/* 质检状态条：正文带下方独立一条，默认收起只占一行；替代原绝对定位 em */
.vc-page-flag {
  border-top: 1px solid #e2c68f;
  background: #f6ead2;
}
.vc-page-flag summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: #8a5a1d;
  font-weight: 600;
}
.vc-page-flag summary::-webkit-details-marker { display: none; }
.vc-page-flag-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  background: var(--cream);
  border: 1px solid #e2c68f;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 11px;
  white-space: nowrap;
}
.vc-page-flag-hint {
  font-weight: 400;
  color: var(--ink-500);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* flex 子项默认 min-width:auto，nowrap 文本无法收缩到内容宽度以下 → 省略号失效、往右溢出（移动端明显）。
     flex:1 + min-width:0 让它占满剩余空间并可收缩，恢复省略号。 */
  flex: 1;
  min-width: 0;
}
/* 展开/收起的三角。原来是 10px 的裸字形——在这一行里最小、最不像可点的东西，
   而它恰恰是唯一提示"这里能展开"的元素。给它一个 20px 的方框并居中：
   字号够看清，旋转 180° 时也绕自己的中心转（裸字形的旋转中心跟着行盒走，会偏）。 */
.vc-page-flag-arrow {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 1;
  transition: transform 0.15s;
}
.vc-page-flag-arrow svg { display: block; }
.vc-page-flag[open] .vc-page-flag-arrow { transform: rotate(180deg); }
.vc-page-flag ul {
  margin: 0;
  padding: 4px 14px 10px 30px;
  /* 原 108px 太小：3 条多行 issue 就被裁进内滚动，第 3 条只露半行、紧贴下方按钮（QA 反馈"显示不对"）。
     issue 服务端上限 6 条，放宽到 50vh 让常规都能整列展开，只有极端才滚动。 */
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-900);
}
.vc-page-flag li { margin: 3px 0; overflow-wrap: anywhere; }
.vc-page-flag li b { color: #8a5a1d; font-weight: 600; }
/* flex-wrap：两个按钮的 min-content 合计 237px，极窄屏或系统字号放大时会顶出卡片。
   宽度够时不换行，行为不变。 */
.vc-page-flag-actions { padding: 0 12px 9px; display: flex; flex-wrap: wrap; gap: 8px; }
/* 「为什么点不动」的就近提示：必须跟被点的按钮同处一屏，页面顶部那条提示在
   二十多张卡片的成书页里等于看不见（见 variant-c.jsx notifyBlockedC 的注释）。
   flex-basis:100% 让它独占一行，长句不去挤按钮。 */
.vc-blocked-hint {
  flex: 0 0 100%;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--orange-600, #b4552f);
  overflow-wrap: anywhere;
}
/* 图片卡右下角那颗重绘按钮是绝对定位的，提示不能跟着飘：贴在图片底部做一条横幅。
   bottom 抬到 46px 而不是贴底 8px：贴底会把重绘按钮（bottom:8px，约 28px 高）和
   右下角的「AI生成」水印角标一起盖住 —— 用户点完连自己点的那颗按钮都看不见了。 */
.vc-image-wrap .vc-blocked-hint,
.vc-story-page-placeholder .vc-blocked-hint {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 46px;
  margin: 0;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(255, 251, 245, 0.96);
  border: 1px solid #e4b6ab;
  box-shadow: 0 2px 8px rgba(31, 41, 55, 0.12);
  z-index: 3;
}
.vc-page-flag-actions .tk-btn { font-size: 11px; padding: 4px 12px; }
.vc-page-flag-error { border-top-color: #e4b6ab; background: var(--orange-100); }
.vc-page-flag-error summary { color: var(--orange-600); }
.vc-page-flag-error .vc-page-flag-chip { border-color: #e4b6ab; }
.vc-page-flag-error li b { color: var(--orange-600); }
.vc-page-redraw-control {
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.vc-page-redraw-control summary {
  padding: 7px 12px;
  color: var(--ink-500);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.vc-page-redraw-control input {
  width: calc(100% - 24px);
  margin: 0 12px 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-900);
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
}
/* 我们的适配（10-19）：审核连续不过时「按我的要求重画」的输入框 */
.vc-qc-note {
  display: grid;
  gap: 6px;
  margin: 4px 0 8px;
}
.vc-qc-note .tk-textarea {
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
  font-size: 12px;
}
.vc-qc-note .tk-btn { justify-self: start; }
.vc-book-cover-page,
.vc-book-back-page {
  grid-column: 1 / -1;
}
.vc-back-cover-editor {
  display: grid;
  gap: 7px;
}
.vc-back-cover-editor label {
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 700;
}
.vc-back-cover-editor textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--cream);
  color: var(--ink-900);
  font: inherit;
  line-height: 1.6;
}
.vc-back-cover-editor textarea:focus {
  outline: 2px solid rgba(45, 91, 78, 0.18);
  border-color: var(--forest-600);
}
.vc-back-cover-editor small {
  color: var(--ink-300);
  font-size: 11px;
  line-height: 1.5;
}
.vc-story-page-media--interior {
  aspect-ratio: var(--page-aspect, 3 / 2); /* 跟随所选横竖版比例 */
}
.vc-book-output-page-overlay {
  padding: 0;
  overflow: hidden;
}
.vc-story-page-overlay-wrap {
  position: relative;
}
.vc-book-output-page-overlay .vc-story-page-media {
  border: 0;
  border-radius: 8px;
}
.vc-story-page-overlay-copy {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: min(44%, 360px);
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(16, 24, 20, 0.16);
}
.vc-book-output-page-text {
  display: flex;
  align-items: stretch;
}
.vc-book-output-page-text .vc-story-page-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}
.vc-book-output-page-illustration-only,
.vc-book-output-page-split,
.vc-book-output-page-text {
  min-height: 100%;
}
/* 阅读页页内兜底浮层（弹窗被拦时）：全屏 iframe + 右上关闭 */
.vc-reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #fffdf7;
  display: flex;
  flex-direction: column;
}
.vc-reader-frame {
  flex: 1;
  width: 100%;
  border: 0;
  min-height: 0;
}
.vc-reader-close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  z-index: 2;
  border: 1px solid rgba(45, 91, 78, 0.35);
  background: rgba(255, 253, 247, 0.95);
  color: var(--forest-700, #1f4438);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 68, 56, 0.18);
}

.vc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 24, 20, 0.72);
  display: grid;
  place-items: center;
  padding: 24px;
}
.vc-lightbox-panel {
  width: min(1100px, 96vw);
  max-height: 94vh;
  display: grid;
  gap: 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}
.vc-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vc-lightbox-head strong {
  color: var(--forest-900);
  font-family: var(--serif);
}
.vc-lightbox-panel img {
  max-width: 100%;
  max-height: calc(94vh - 82px);
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  background: var(--paper-50);
}

/* Nav */
.vc-nav {
  display: flex; align-items: center; gap: 20px;
  margin-top: 24px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  max-width: none;
}
.vc-nav-progress { flex: 1; display: flex; align-items: center; gap: 10px; }
.vc-nav-bar { flex: 1; height: 4px; background: var(--paper-100); border-radius: 100px; overflow: hidden; }
.vc-nav-fill { height: 100%; background: var(--forest-700); border-radius: 100px; transition: width 0.3s; }
.vc-nav-pct { font-size: 12px; color: var(--ink-500); font-variant-numeric: tabular-nums; font-weight: 500; min-width: 32px; }
.vc-go { padding: 10px 22px; font-size: 14px; }
.tk-btn:disabled,
.tk-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
/* 这里曾有 `.tk-btn:disabled:hover { background: var(--forest-800) } }`：本意是让禁用的
   primary 按钮悬停时别变色，但 `.tk-btn` 是通配，把 ghost 按钮也染成了深绿——ghost 文字
   是深色 ink-700 又被 opacity 压淡，深字压深底就完全看不清（引导页「AI 正在构思…」即此）。
   现已改为在 tokens.css 里给各 hover 规则统一加 :not(:disabled)，从根上不再触发。 */
.tk-btn-danger {
  background: var(--orange-600);
  color: var(--cream);
  border-color: #9f4428;
}
@media (hover: hover) { .tk-btn-danger:not(:disabled):hover { background: #a84e30; } }

/* ─────────── Preview book (cover style) ─────────── */
.vc-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.vc-preview-k { font-size: 11px; color: var(--forest-700); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.vc-preview-live { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-500); }
.vc-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #6f8178; }
.vc-preview-live.is-busy .vc-live-dot { background:#d6a44d; animation:pulseC 2s ease-in-out infinite; }
.vc-preview-live.is-error { color:#8f3f30; }
.vc-preview-live.is-error .vc-live-dot { background:#a44a35; }
@keyframes pulseC { 50% { opacity: 0.3; } }

.vc-book-wrap { position: relative; padding: 0 20px 40px; }
.vc-book {
  position: relative;
  width: 260px;
  height: 360px;
  margin: 0 auto;
  border-radius: 4px 8px 8px 4px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 10px 30px rgba(20,32,28,0.2), 0 30px 60px rgba(20,32,28,0.12);
  transform: rotate(-2deg);
  transition: transform 0.3s;
}
@media (hover: hover) { .vc-book:hover { transform: rotate(0deg) translateY(-2px); } }
.vc-book-cover {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--accent, #d97757) 0%, color-mix(in srgb, var(--accent, #d97757) 80%, black) 100%);
  border-radius: 4px 8px 8px 4px;
  overflow: hidden;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
}
.vc-book-cover::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.vc-book-cover-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.vc-book-cover-kicker { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; font-weight: 500; }
.vc-book-hero-ring {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  margin: 24px 0 20px;
  backdrop-filter: blur(8px);
}
.vc-book-hero {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
}
.vc-book-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  margin: 0;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  padding: 0 4px;
}
.vc-book-byline { font-family: var(--serif); font-size: 13px; font-style: italic; opacity: 0.85; margin-top: 8px; }
.vc-book-bottom { margin-top: auto; display: flex; gap: 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.3); width: 100%; justify-content: center; }
.vc-book-edge { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0)); border-radius: 4px 0 0 4px; z-index: 2; }

.vc-book-shadow {
  position: absolute;
  left: 20%; right: 20%;
  bottom: 18px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(20,32,28,0.35), transparent 70%);
  filter: blur(14px);
  z-index: -1;
}
.vc-book-caption { text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--ink-500); margin-top: 8px; }

.vc-live-book {
  display: grid;
  gap: 12px;
}
.vc-live-book-page {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  box-shadow: 0 8px 20px rgba(20,32,28,0.06);
}
.vc-live-book-cover {
  border-color: color-mix(in srgb, var(--forest-700) 40%, var(--line));
}
.vc-live-book-media {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-100);
  border: 1px solid var(--line);
}
.vc-live-book-square {
  aspect-ratio: 1 / 1;
  width: min(100%, 240px);
  justify-self: center;
}
.vc-live-book-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vc-live-book-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.4;
}
.vc-live-book-generating {
  color: var(--forest-800);
  background: var(--forest-50);
}
.vc-live-book-failed {
  color: var(--orange-600);
  background: var(--orange-100);
}
.vc-live-book-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.vc-live-book-copy span {
  color: var(--forest-700);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.vc-live-book-copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.25;
  color: var(--forest-900);
  overflow-wrap: anywhere;
}
.vc-live-book-copy p {
  margin: 0;
  color: var(--ink-900);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.vc-live-book-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}
.vc-live-book-meta div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-50);
}
.vc-live-book-meta span {
  color: var(--forest-700);
  font-size: 10px;
  font-weight: 700;
}
.vc-live-book-meta strong {
  color: var(--ink-900);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* History mini */
.vc-history { margin-top: 32px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.vc-history-head { font-size: 11px; color: var(--forest-700); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.vc-history-list { display: flex; flex-direction: column; gap: 10px; }
.vc-history-item {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}
@media (hover: hover) { .vc-history-item:hover .vc-history-t { color: var(--forest-800); } }
.vc-history-cover { width: 28px; height: 36px; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.12); flex-shrink: 0; overflow: hidden; background: var(--forest-100); }
.vc-history-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-history-t { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--ink-900); }
.vc-history-s { font-size: 11px; color: var(--ink-500); margin-top: 1px; }
.vc-history-empty { color: var(--ink-500); font-size: 12px; line-height: 1.5; }
.vc-history-more { background: transparent; border: none; color: var(--forest-700); font-family: inherit; font-size: 12px; cursor: pointer; padding: 6px 0 0; text-align: left; font-weight: 500; }

@media (max-width: 1080px) {
  .vc-main {
    grid-template-columns: 1fr;
  }
  .vc-form {
    border-right: 0;
  }
  .vc-preview {
    display: none;
  }
  .vc-character-workspace,
  .vc-character-editor-panel {
    grid-template-columns: minmax(0, 1fr); /* 1fr 下限=min-content，遇 nowrap 长名/长串不收缩会横向溢出 */
  }
  .vc-design-card-stack {
    grid-template-columns: 140px 1fr;
  }
  .vc-design-card-stack .vc-design-editor {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .vc-production-status { top:126px; padding:12px; }
  .vc-production-status-main { display:grid; gap:8px; }
  .vc-production-status-counts { justify-content:flex-start; }
  .vc-production-status-actions { align-items:flex-start; flex-direction:column; }
  .vc-production-status-actions .tk-btn { width:100%; }
}

@media (max-width: 1180px) {
  .vc-main {
    grid-template-columns: 1fr;
  }
  .vc-form {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .vc-preview {
    padding-top: 22px;
  }
  .vc-preview-sticky {
    position: static;
  }
}

@media (max-width: 720px) {
  .vc-form {
    padding: 24px 18px 32px;
  }
  .vc-topbar {
    grid-template-columns: 1fr;
    padding: 12px 16px;
  }
  .vc-age-cards,
  .vc-gender-cards,
  .vc-style-grid,
  .vc-chk-grid,
  .vc-ratio-grid,
  .vc-book-output-pages {
    /* 同上：minmax(0, ...) 才可收缩。桌面默认规则用的就是 minmax(0, 1fr)，
       这里当年写成 1fr 是遗漏 —— 单列布局下一旦子项有 nowrap 内容就会撑宽整列。 */
    grid-template-columns: minmax(0, 1fr);
  }
  .vc-row-2,
  .vc-inline-tools,
  .vc-summary-grid,
  .vc-pipeline {
    grid-template-columns: 1fr;
  }
  .vc-analysis-grid {
    grid-template-columns: 1fr;
  }
  .vc-design-card,
  .vc-design-card-large,
  .vc-design-card-stack {
    grid-template-columns: 1fr;
  }
  .vc-story-option-grid {
    grid-template-columns: 1fr;
  }
  .vc-story-option-head {
    flex-direction: column;
  }
  .vc-design-card-large .vc-design-media {
    min-height: 0;
  }
  .vc-character-list-head,
  .vc-character-editor-title {
    flex-direction: column;
  }
  .vc-character-editor-media,
  .vc-character-editor-media img {
    min-height: 0;
  }
  .vc-story-page {
    /* minmax(0, ...) 而不是 1fr：这条在窄屏覆盖 .vc-book-output-page 的列定义
       （同特异度、位置更后），是成书页卡片实际生效的那一条。用 1fr（=minmax(auto,1fr)）
       时列宽不能小于内部 min-content，而质检状态条里有 nowrap 的提示文案，
       其 min-content 贡献是整句不折行的宽度（实测 342px）→ 提示条溢出卡片、
       整页横向滚动（QA 反馈的"AI 建议重画在移动端溢出"）。 */
    grid-template-columns: minmax(0, 1fr);
  }
  .vc-story-page-overlay-copy {
    position: static;
    max-width: none;
    margin: 12px;
  }
  .vc-nav {
    max-width: none;
    flex-wrap: wrap;
  }
}


/* ── 制作动态面板（右下浮动） ─────────────────── */
.vc-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 316px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 12.5px;
}
.vc-dock-closed { width: auto; }
.vc-dock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  border: 1px solid #ddd2c0;
  background: #fffdf7;
  color: #1f4438;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 68, 56, 0.12);
}
.vc-dock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b9c4b1;
  flex: none;
}
.vc-dock-dot-busy {
  background: #2d8a5f;
  animation: vc-dock-pulse 1.1s ease-in-out infinite;
}
@keyframes vc-dock-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}
.vc-dock-arrow { color: #8a9389; font-size: 11px; }
.vc-dock-body {
  margin-top: 8px;
  background: #fffdf7;
  border: 1px solid #ddd2c0;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(31, 68, 56, 0.14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vc-dock-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee4d3;
  background: #faf6ec;
}
.vc-dock-summary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.vc-dock-summary span { font-size: 11px; color: #8a8272; }
.vc-dock-summary b { font-size: 14px; color: #1f4438; font-variant-numeric: tabular-nums; }
.vc-dock-feed {
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.vc-dock-empty { color: #a89f8d; line-height: 1.6; padding: 6px 2px; }
.vc-dock-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  line-height: 1.5;
  color: #4e5a55;
}
.vc-dock-time {
  flex: none;
  font-size: 11px;
  color: #b0a793;
  font-variant-numeric: tabular-nums;
}
.vc-dock-msg { min-width: 0; word-break: break-word; }
.vc-dock-success .vc-dock-msg { color: #24734d; }
.vc-dock-retry .vc-dock-msg { color: #a3691f; }
.vc-dock-error .vc-dock-msg { color: #b0472f; }
@media (max-width: 900px) {
  .vc-dock { right: 10px; bottom: 10px; width: min(316px, calc(100vw - 20px)); }
  .vc-dock-feed { max-height: 170px; }
}


/* ── 成书庆祝横幅 ─────────────────── */
.vc-celebrate {
  margin-bottom: 14px;
  padding: 14px 18px;
  background: linear-gradient(120deg, #fdf6e8, #eef4ef);
  border: 1.5px solid #e8cf9a;
  border-radius: 14px;
  color: #1f4438;
  font-size: 14px;
  line-height: 1.8;
  animation: celebrate-in .5s ease;
}
.vc-celebrate b { font-family: var(--serif, serif); font-size: 15.5px; }
.vc-book-audit {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--forest-100);
  border-radius: 12px;
  background: var(--forest-50);
  color: var(--forest-900);
}
.vc-book-audit-needs-review { border-color: #d8ad62; background: #fff8e9; color: #704918; }
.vc-book-audit-partial { border-color: var(--line); background: var(--paper-50); color: var(--ink-700); }
.vc-book-audit-readonly { border-color: #7ba7d8; background: #eef4fb; color: #24506f; }
.vc-book-audit-desc { margin-top: 4px; font-size: 12px; line-height: 1.6; opacity: .85; }
.vc-book-audit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vc-book-audit-head > div { display: grid; gap: 2px; }
.vc-book-audit-head span { font-size: 11px; letter-spacing: .08em; color: currentColor; opacity: .72; }
.vc-book-audit-head b { font-family: var(--serif); font-size: 16px; }
.vc-book-audit-head small { font-size: 12px; opacity: .7; }
.vc-book-audit-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vc-book-audit-stats span { padding: 4px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; opacity: .8; }
.vc-book-audit p { margin: 10px 0 0; font-size: 12px; line-height: 1.6; }
@keyframes celebrate-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}


/* IP 剧本修正等关键等待：琥珀高亮提示条 */
.vc-production-note.vc-production-working {
  border: 1.5px solid #e3a94f;
  background: #fdf3e0;
  color: #7a4d10;
  font-weight: 600;
  font-size: 13.5px;
}
.vc-production-working .vc-production-dot {
  background: #e8952e;
  animation: vc-dock-pulse 1.1s ease-in-out infinite;
}


/* ── 剧情步：IP 修正 + 分页 两段式步骤卡 ─────────── */
.vc-two-stage { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.vc-stage {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.vc-stage-num {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--forest-50, #eef4ef);
  color: var(--forest-700, #2d5b4e);
  font-weight: 700;
}
.vc-stage-text { flex: 1; min-width: 0; }
.vc-stage-text b { display: block; font-size: 14px; color: var(--ink-900); }
.vc-stage-text span { display: block; font-size: 12.5px; color: var(--ink-500); margin-top: 2px; line-height: 1.6; }
.vc-stage-done { border-color: var(--forest-100, #d8e5da); background: var(--forest-50, #eef4ef); }
.vc-stage-done .vc-stage-num { background: var(--forest-700, #2d5b4e); color: #fff; }
.vc-stage-busy { border-color: #e3a94f; background: #fdf3e0; }
.vc-stage-busy .vc-stage-num { background: #e8952e; color: #fff; animation: vc-dock-pulse 1.1s ease-in-out infinite; }
.vc-stage-busy .vc-stage-text span { color: #7a4d10; font-weight: 600; }
.vc-stage-fail { border-color: #dfa08d; background: #fdf1ec; }
.vc-stage-fail .vc-stage-num { background: #c0553a; color: #fff; }
.vc-stage-fail .vc-stage-text span { color: #9c3f28; }
.vc-stage-locked { opacity: 0.62; }


/* ── 额度不足横幅 ─────────────────────────────────
   sticky 而不是普通块：用户很可能正滚在页面中段看某一页的失败提示，
   横幅滚出视口就等于没提示。z-index 低于弹层(110)、高于 topbar(30)。 */
.vc-quota-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 11px 20px;
  background: #fdf3f0;
  border-bottom: 1px solid #f0d4cb;
  color: #a8442c;
  font-size: 13px;
  line-height: 1.6;
}
.vc-quota-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; flex: 1; }
.vc-quota-body b { font-weight: 700; }
.vc-quota-body span { color: var(--ink-500, #6b675e); }
.vc-quota-actions { display: flex; gap: 8px; flex: none; }
.vc-quota-actions .tk-btn { font-size: 12px; padding: 5px 14px; text-decoration: none; }

/* ── 制作动态：右侧栏常驻卡（替代原右下角浮窗） ── */
.vc-dockpanel {
  /* 正文字号。原来的右下角浮动版 .vc-dock 上带着 font-size: 12.5px，换成右侧栏
     .vc-dockpanel 时这行没跟过来，于是日志行一路继承到页面基准的 16px ——
     比面板自己的标题（13.5px）还大，也比同一张卡里的陪伴语（12.5px）大一圈。
     这里补回 12.5px，与 .vc-dock-warm 对齐。 */
  font-size: 12.5px;
  margin-top: 14px;
  background: #fffdf7;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vc-dockpanel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--forest-900, #1f4438);
  border-bottom: 1px solid #eee4d3;
  background: #faf6ec;
}
.vc-dockpanel-busy {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #a3691f;
}
.vc-dockpanel .vc-dock-feed { max-height: 46vh; }

/* 「回到最新」的定位容器。日志区自己滚，按钮浮在它上面不跟着滚。 */
.vc-dock-feedwrap { position: relative; display: flex; flex-direction: column; min-height: 0; }
.vc-dock-jump {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
  padding: 5px 12px;
  border: 1px solid #cfe0d4;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.96);
  color: var(--forest-700, #24734d);
  font: 600 12px/1.5 inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(31, 68, 56, 0.16);
  backdrop-filter: blur(4px);
}
@media (hover: hover) { .vc-dock-jump:hover { background: #f2f8f3; } }
.vc-dock-jump:focus-visible { outline: 2px solid var(--forest-700, #24734d); outline-offset: 2px; }

/* ── 页脚（云一工作室署名 + 问题反馈入口）+ 反馈弹窗（自旧版移植）── */

/* ── 页脚 · 云一工作室署名 + 问题反馈入口 ─────────────────── */
.vc-footer {
  text-align: center;
  padding: 18px 32px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--ink-300);
  border-top: 1px solid var(--line);
  background: var(--paper-0);
}
.vc-footer-sep { margin: 0 7px; opacity: 0.55; }
.vc-footer-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--forest-700);
  font-weight: 500;
}
@media (hover: hover) { .vc-footer-link:hover { text-decoration: underline; } }

/* ── 反馈弹窗 ───────────────────────────────────────────── */
.vc-fb-scrim {
  position: fixed;
  inset: 0;
  z-index: 110; /* 盖过 lightbox(100) 与 topbar(30) */
  background: rgba(16, 24, 20, 0.55);
  display: grid;
  place-items: center;
  padding: 24px;
}
.vc-fb-modal {
  width: min(380px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  text-align: left;
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 12px);
  padding: 26px 24px 22px;
  box-shadow: var(--shadow-md), 0 24px 80px rgba(20, 32, 28, 0.28);
}
.vc-fb-modal h3 {
  margin: 0 0 5px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--forest-900);
}
.vc-fb-sub {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--ink-500);
}
.vc-fb-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: var(--paper-50);
  color: var(--ink-300);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
@media (hover: hover) { .vc-fb-x:hover { color: var(--ink-900); } }
.vc-fb-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.vc-fb-pill {
  flex: 1;
  padding: 9px 0;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--paper-0);
  color: var(--ink-500);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.vc-fb-pill-on {
  border-color: var(--forest-700);
  color: var(--forest-800);
  background: var(--forest-50);
  font-weight: 600;
}
.vc-fb-label {
  display: block;
  font-size: 12px;
  color: var(--ink-500);
  margin: 0 0 6px 2px;
}
.vc-fb-textarea {
  width: 100%;
  height: 104px;
  resize: none;
  background: var(--paper-0);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 11px 12px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-900);
  outline: none;
  box-sizing: border-box;
}
.vc-fb-textarea:focus { border-color: var(--forest-700); }
.vc-fb-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.vc-fb-thumb {
  position: relative;
  width: 60px;
  height: 60px;
}
.vc-fb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--line);
}
.vc-fb-thumb-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 32, 28, 0.85);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.vc-fb-add-img {
  width: 60px;
  height: 60px;
  border-radius: 9px;
  border: 1px dashed var(--line-strong);
  background: var(--paper-0);
  color: var(--ink-300);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.2;
}
@media (hover: hover) { .vc-fb-add-img:hover {
  border-color: var(--forest-700);
  color: var(--forest-700);
} }
.vc-fb-add-img:disabled { cursor: default; opacity: 0.6; }
.vc-fb-add-plus { font-size: 18px; }
.vc-fb-img-hint {
  margin: 8px 2px 0;
  font-size: 11px;
  color: var(--ink-300);
}
.vc-fb-error {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--orange-600);
}
.vc-fb-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.vc-fb-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--paper-0);
  color: var(--ink-700);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
@media (hover: hover) { .vc-fb-btn:not(:disabled):hover { background: var(--paper-50); } }
.vc-fb-btn:disabled { cursor: default; opacity: 0.6; }
.vc-fb-btn-primary {
  border-color: var(--forest-800);
  background: var(--forest-800);
  color: var(--cream);
  font-weight: 600;
}
@media (hover: hover) { .vc-fb-btn-primary:not(:disabled):hover { background: var(--forest-700); } }
/* 致谢态 */
.vc-fb-thanks {
  text-align: center;
  padding: 8px 4px 4px;
}
.vc-fb-thanks h3 { text-align: center; }
.vc-fb-thanks .vc-fb-sub {
  text-align: center;
  margin-bottom: 20px;
}
.vc-fb-check {
  width: 58px;
  height: 58px;
  margin: 4px auto 14px;
  border-radius: 50%;
  background: var(--forest-100);
  color: var(--forest-700);
  display: grid;
  place-items: center;
}
.vc-fb-thanks-close { width: 100%; }
/* 成书后的阅读增强：保持为一个紧凑工作区，不把生成区堆成多张功能卡。 */
.vc-reading-enhancements {
  margin: 0 0 16px;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(360px, 1.35fr);
  gap: 22px;
  align-items: center;
  border: 1px solid #d7c49e;
  border-radius: 14px;
  background: linear-gradient(125deg, #f8f1e3 0%, #fffdf7 54%, #eef4ef 100%);
  box-shadow: 0 8px 24px rgba(70, 58, 38, .06);
}
.vc-reading-enhancements-copy > span {
  display: block;
  margin-bottom: 5px;
  color: #9a6527;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.vc-reading-enhancements-copy h2 {
  margin: 0;
  color: var(--forest-900, #1f4438);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.25;
}
.vc-reading-enhancements-copy p {
  margin: 8px 0 0;
  color: var(--ink-600, #5f625d);
  font-size: 12.5px;
  line-height: 1.65;
}
.vc-reading-enhancements-controls { display: grid; grid-template-columns:minmax(160px,.75fr) minmax(220px,1.25fr); gap: 12px 16px; align-items: end; }
.vc-reading-enhancements-controls label { display: grid; gap: 6px; }
.vc-reading-enhancements-controls label > span { color: var(--ink-600, #5f625d); font-size: 11.5px; font-weight: 700; }
.vc-reading-enhancements-controls select {
  width: 100%;
  min-height: 42px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-900);
  font: 650 13px/1 var(--sans);
}
.vc-reading-enhancements-status { display: grid; gap: 5px; align-self: center; }
.vc-reading-enhancements-status > span { width: max-content; padding: 4px 8px; border-radius: 999px; background:#f4ead6; color:#86561f; font-size:11px; font-weight:750; }
.vc-reading-enhancements-status > span.is-ready { background:var(--forest-50, #eef4ef); color:var(--forest-700, #2d5b4e); }
.vc-reading-enhancements-status small { color:var(--ink-500); font-size:11px; line-height:1.45; }
.vc-reading-enhancements-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width: 860px) {
  .vc-reading-enhancements { grid-template-columns:1fr; gap:16px; }
}
@media (max-width: 560px) {
  .vc-reading-enhancements { padding:15px; }
  .vc-reading-enhancements-controls { grid-template-columns:1fr; }
  .vc-reading-enhancements-actions { grid-column:1; }
  .vc-reading-enhancements-actions .tk-btn { width:100%; justify-content:center; }
}
/* Language preference is independent of story content and never consumes reader space. */
html:lang(en), html:lang(fr) { --serif: Georgia, ui-serif, serif; }
html:lang(en) .home-hero em, html:lang(fr) .home-hero em { margin-inline-start: .2em; }
.vc-language-picker { display:flex; align-items:center; gap:8px; font-size:12px; margin-left:auto; flex:none; }
/* 双端登录 SDK 徽章插槽（walletMount）：余额 · 充值 · 返回目鱼，跟语言选择器并排 */
.topbar-wallet { display:inline-flex; align-items:center; flex:none; }
.topbar-wallet:empty { display:none; }
.vc-language-picker select { font:inherit; color:var(--ink-900); border:1px solid var(--line); border-radius:8px; background:#fff; padding:8px; min-height:36px; max-width:150px; }
.vc-language-picker select:focus-visible { outline:2px solid var(--forest-700); outline-offset:2px; }
.vc-topbar > .vc-language-picker { order:3; }
/* 尾部容器（语言选择器 + 徽章插槽）占顶栏最后一格；插槽空时 display:none，布局与改动前一致 */
.vc-topbar > .vc-topbar-end { order:3; display:flex; align-items:center; gap:10px; flex:none; justify-self:end; min-width:0; }
.vc-root > .vc-topbar { grid-template-columns:220px minmax(0,1fr) auto; gap:16px; }
.vc-stepper .vc-step { flex:none; white-space:nowrap; }
.vc-root .vc-brand img { flex:none; }
.vc-image-localization { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.vc-image-localization label { display:grid; gap:5px; margin:10px 0; font-size:13px; }
.vc-image-localization input, .vc-image-localization select { width:100%; min-height:38px; font:inherit; padding:8px; border:1px solid var(--line); border-radius:8px; }
.vc-image-localization img { max-width:100%; max-height:260px; object-fit:contain; margin:10px 0; }
@media(max-width:1000px) {
  .vc-root > .vc-topbar { grid-template-columns:minmax(0,1fr) auto; max-width:100vw; box-sizing:border-box; overflow:hidden; }
  .vc-root .vc-topbar > .vc-stepper { grid-column:1 / -1; order:4; width:100%; max-width:100%; box-sizing:border-box; overflow-x:auto; overscroll-behavior-inline:contain; }
}
@media(max-width:700px) {
  .vc-language-picker { gap:4px; }
  .vc-language-picker > span { display:none; }
  .vc-topbar { flex-wrap:wrap; }
  .vc-root .vc-stepper { justify-content:center; padding-inline:0; overflow-x:hidden; }
  .vc-root .vc-stepper .vc-step { gap:0; }
  .vc-root .vc-stepper .vc-step-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .vc-root .vc-stepper .vc-step-on .vc-step-text { position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; white-space:nowrap; margin-left:5px; }
  .vc-root .vc-stepper .vc-step-on .vc-step-d { display:none; }
  .vc-root .vc-stepper .vc-step-line { width:12px; margin-inline:6px; }
  .vc-root .vc-page-slider { display:grid; grid-template-columns:minmax(0,1fr); }
}
.vc-layout-canvas { max-width:100%; }
/* One physical paper grid for previews, reader and PDF; editing controls are outside it. */
.vc-paper-layout { display:block;container-type:inline-size;background:#faf6ee; }
.vc-paper-layout .vc-paper-art,.vc-paper-layout .vc-paper-copy,.vc-paper-plate { position:absolute;min-width:0;margin:0;padding:0;border:0;border-radius:0; }
.vc-paper-layout .vc-paper-art { aspect-ratio:auto;background:transparent; }
.vc-paper-art .vc-image-wrap { width:100%;height:100%;padding:0; }
.vc-paper-art img { width:100%;height:100%;object-fit:contain; }
.vc-paper-art-custom img { object-fit:cover; }
.vc-paper-copy { display:flex;align-items:center; }
.vc-paper-copy p { width:100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;letter-spacing:0;color:inherit; }
.vc-paper-copy h3 { width:100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:inherit; }
.vc-paper-credit { position:absolute;display:flex;align-items:center;justify-content:center;margin:0;color:#73675b; }
.vc-book-back-page .vc-back-cover-editor { padding:14px; }
.vc-paper-layout .vc-designed-page-number { font-size:1.2cqw;bottom:3%; }
.vc-layout-warning { padding:10px 14px;margin:0;color:#874013;background:#fff1dd;font-size:13px;line-height:1.6; }
.vc-paper-layout.is-overflow { aspect-ratio:auto!important;padding:18px 6% 32px; }
.vc-paper-layout.is-overflow .vc-paper-art { position:relative;inset:auto!important;width:100%!important;height:220px!important;object-fit:contain!important; }
.vc-paper-layout.is-overflow .vc-paper-copy { position:relative;inset:auto!important;width:100%!important;height:auto!important;margin-top:18px;color:#2e2924!important; }
.vc-paper-layout.is-overflow .vc-paper-copy p { font-size:16px!important;line-height:1.8!important; }
.vc-paper-layout.is-overflow .vc-paper-plate { display:none; }
@media (max-width:600px) {
  .vc-paper-layout { aspect-ratio:auto!important;padding:16px 6% 32px; }
  .vc-paper-layout .vc-paper-art { position:relative;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:var(--page-aspect,3/2);object-fit:contain!important; }
  .vc-paper-layout .vc-paper-art img { object-fit:contain; }
  .vc-paper-layout .vc-paper-copy { position:relative;inset:auto!important;width:100%!important;height:auto!important;margin-top:18px;text-align:left!important;color:#2e2924!important; }
  .vc-paper-layout .vc-paper-copy p { font-size:17px!important;line-height:1.8!important; }
  .vc-paper-layout .vc-paper-plate { display:none; }
  .vc-paper-layout .vc-designed-page-number { font-size:11px;bottom:12px; }
  .vc-paper-jacket .vc-paper-copy h3 { font-size:26px!important;line-height:1.3!important; }
  .vc-paper-jacket .vc-paper-credit { position:relative;inset:auto!important;width:100%!important;height:auto!important;font-size:12px!important;margin-top:18px; }
}


.vc-paper-layout.is-overflow .vc-paper-copy h3 { font-size:26px!important;line-height:1.3!important; }
.vc-paper-layout.is-overflow .vc-paper-credit { position:relative;inset:auto!important;width:100%!important;height:auto!important;font-size:12px!important;margin-top:18px; }
.vc-ip-choice{display:flex;min-height:44px;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;border:1px solid var(--paper-100);border-radius:10px;background:var(--paper-50);color:var(--ink-700);font:inherit;cursor:pointer;text-align:center}
@media (hover: hover) { .vc-ip-choice:hover{border-color:var(--forest-200);background:var(--forest-50)} }
.vc-ip-choice:focus-visible{outline:2px solid var(--forest-500);outline-offset:2px}
.vc-ip-choice img{object-fit:contain}
.vc-ip-choice span{font-size:12px;color:var(--ink-400)}

/* ── 制作动态·吸顶迷你状态条（我们的适配，10-09）────────────────────────────
   窄屏（≤1180px，.vc-main 折成单列、右栏沉到正文下面）才显示：挂在吸顶的 .vc-topbar 里，
   随页面滚动一直贴在步骤条下方。桌面端右栏常驻，不重复显示。设计稿 .mockups/progress-strip-mobile.html */
.vc-dockstrip { display: none; }
@media (max-width: 1180px) {
  .vc-root > .vc-topbar > .vc-dockstrip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
    order: 5;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 7px 10px;
    background: #fffdf7;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
  }
  .vc-dockstrip-main { min-width: 0; }
  .vc-dockstrip-counts { display: flex; gap: 10px; color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
  .vc-dockstrip-counts b { font-weight: 600; color: var(--forest-900, #1f4438); }
  .vc-dockstrip-last { margin-top: 2px; color: var(--ink-300, #8a8272); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vc-dockstrip-last em { font-style: normal; margin-right: 6px; font-variant-numeric: tabular-nums; }
  .vc-dockstrip-last.vc-dock-success { color: #24734d; }
  .vc-dockstrip-last.vc-dock-retry { color: #a3691f; }
  .vc-dockstrip-last.vc-dock-error { color: #b0472f; }
  .vc-dockstrip-more {
    appearance: none; font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap;
    color: var(--forest-700, #2d5b4e); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px;
  }
}
/* 外文界面：画图提示词默认收起 */
.vc-prompt-advanced { margin-top: 12px; }
.vc-prompt-advanced > summary { cursor: pointer; display: list-item; }
.vc-prompt-advanced > .vc-lbl-hint { margin: 6px 0 8px; }

/* 角色设定提示词「让 AI 改写」（PMS 任务 23205）：底栏和提示词框连成一体，明确是在改这段文字，不是改图 */
.vc-prompt-lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vc-prompt-lbl-row .vc-lbl { margin-bottom: 0; }
.vc-prompt-lbl-row .vc-lbl-hint { font-size: 12px; }
.vc-prompt-box { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream); overflow: hidden; }
.vc-prompt-box:focus-within { border-color: var(--forest-700); }
.vc-prompt-box .vc-prompt-editor { border: 0; border-radius: 0; box-shadow: none; display: block; }
.vc-prompt-diff { min-height: 220px; max-height: 360px; overflow: auto; padding: 9px 12px; font-size: 14px; line-height: 1.65;
  color: var(--ink-900); white-space: pre-wrap; word-break: break-word; cursor: text; }
.vc-prompt-diff mark { background: var(--mustard-100); color: inherit; border-radius: 3px; padding: 0 1px; }
.vc-prompt-ai { border-top: 1px dashed var(--line); background: var(--forest-50); padding: 10px 12px; display: grid; gap: 8px; }
.vc-prompt-ai-lbl { font-size: 12.5px; font-weight: 600; color: var(--forest-800); }
.vc-prompt-ai-row { display: flex; gap: 8px; }
.vc-prompt-ai-row .tk-input { flex: 1; min-width: 0; }
.vc-prompt-ai-row .tk-btn { flex: none; white-space: nowrap; }
.vc-prompt-ai-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-prompt-ai-chip { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--cream); color: var(--ink-500); cursor: pointer; }
@media (hover: hover) {
  .vc-prompt-ai-chip:hover { border-color: var(--forest-600); color: var(--forest-800); }
}
.vc-prompt-ai-done { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--forest-800);
  background: var(--mustard-100); border: 1px dashed var(--mustard-500); border-radius: var(--r-sm); padding: 7px 10px; }
.vc-prompt-ai-undo { font: inherit; background: none; border: 0; padding: 0; color: var(--forest-700); text-decoration: underline; cursor: pointer; }
.vc-prompt-advanced > .vc-prompt-box { margin-top: 4px; }
@media (max-width: 560px) {
  .vc-prompt-ai-row { flex-direction: column; }
  .vc-prompt-ai-row .tk-btn { width: 100%; }
}

/* 画风卡片在手机上两列（PMS #102572 设计稿口径）：上面 720px 断点把它并进了单列，14 张示例图一张一屏要划很久 */
@media (max-width: 720px) {
  .vc-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vc-style-has-sample .vc-style-t { font-size: 14px; }
  .vc-style-zoom { width: 32px; height: 32px; }
}

/* ── 手机端打磨（11-02，设计稿 .mockups/mobile-topbar-reader.html）────────────────────
   ① 工作台顶栏：平台入场多了余额徽章（✦余额 · 去充值 · 返回平台），和语言下拉一起把手机宽度占满，
   品牌名被挤成一字一行、顶栏占半屏。手机上把尾部容器拆开：第一行 品牌 + 语言，第二行 徽章靠右；
   名字放不下用省略号；「新建绘本 · 第 N 步」小字去掉（步骤条和正文都有）。 */
@media (max-width: 700px) {
  .vc-root > .vc-topbar { gap: 8px 10px; padding: 8px 12px; }
  .vc-root > .vc-topbar > .vc-topbar-end { display: contents; }
  .vc-root > .vc-topbar .vc-language-picker { order: 3; justify-self: end; }
  .vc-root > .vc-topbar .vc-language-picker select { max-width: 112px; min-height: 32px; padding: 4px 6px; }
  .vc-root > .vc-topbar .topbar-wallet { order: 4; grid-column: 1 / -1; justify-self: end; max-width: 100%; overflow: hidden; }
  .vc-root > .vc-topbar > .vc-brand { min-width: 0; overflow: hidden; }
  .vc-root > .vc-topbar > .vc-brand img { width: 32px !important; height: 32px !important; border-radius: 8px !important; }
  .vc-root > .vc-topbar > .vc-brand > div { min-width: 0; }
  .vc-root > .vc-topbar .vc-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
  .vc-root > .vc-topbar .vc-brand-sub { display: none; }
}
/* ④ 成书 / 角色页：同一件事在手机上只说一遍——生成中重复的提示条和第二个「终止制作」隐藏（进度卡片 / 编辑区已有）；
   「剧情分页 / 角色设定图 / 逐页插图」三个大色块改成一行小字。角色清单头部竖排时 flex-basis:8em 变成了高度，留下一大块空白。 */
@media (max-width: 700px) {
  .vc-mobile-dup { display: none !important; }
  .vc-pipeline { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; }
  .vc-pipeline-step, .vc-pipeline-done, .vc-pipeline-active { min-height: 0; padding: 0; border: 0; background: none; color: var(--ink-500); font-size: 12px; gap: 4px; }
  .vc-pipeline-done { color: var(--forest-700); }
  .vc-pipeline-active { color: var(--forest-900); }
  .vc-pipeline-step span { width: auto; height: auto; border: 0; font-size: 12px; }
  .vc-character-list-head > div { flex: none; }
}
/* 手机上按钮太小不好点（检查结果：灵感种子 27px、「动态 ▾」25px、页脚「问题反馈」17px）：可点区域至少 36px 高，外观尽量不变 */
@media (max-width: 700px) {
  .vc-seed { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
  .vc-dockstrip-more { min-height: 36px; padding-inline: 12px; }
  .vc-footer-link { min-height: 36px; padding: 8px 6px; }
}
/* 工作台「我的作品」弹窗：按钮不再被挤成一字一行；手机上标题信息占一行、按钮换到下一行 */
.vc-lib-actions { flex: none; }
.vc-lib-actions .vc-page-btn { white-space: nowrap; }
@media (max-width: 700px) {
  .vc-lib-row { flex-wrap: wrap; gap: 8px; }
  .vc-lib-row > div:first-child { flex: 1 1 100%; min-width: 0; }
  .vc-lib-actions { width: 100%; }
  .vc-lib-actions .vc-page-btn { flex: 1; min-height: 38px; }
}

/* ══ 手机版面（11-07，设计稿 .mockups/mobile-redesign/mobile-layout-v2.html）════════════════
   ≤720px 时 .vc-root 带上 .vc-m（JS 按 matchMedia 切），这里的规则都挂在 .vc-root.vc-m 下，
   特异度高于上面各轮 700/720px 的零散修补，桌面端完全不进来。
   ① 顶栏一行：‹ 返回 · 书名 + 「第 N 步 / 共 6 步 · 步骤名 ▾」· ⋯；下面一条 6 段进度条。
      品牌、步骤圆点、动态条都收走（步骤在弹层里，动态在「⋯」里）。
   ② 「⋯」菜单 = 原来的尾部容器（语言 + 余额徽章插槽）本身，平时藏起、点开从底部弹出。
   ③ 底栏钉在屏幕底部，只留往前走的主按钮。 */
.vc-root.vc-m { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.vc-root.vc-m > .vc-topbar { display: block; padding: 0; gap: 0; overflow: visible; max-width: none; }
.vc-root.vc-m > .vc-topbar > .vc-brand,
.vc-root.vc-m > .vc-topbar > .vc-stepper,
.vc-root.vc-m > .vc-topbar > .vc-dockstrip:not(.is-busy) { display: none !important; }
/* 正在生成时顶栏下挂一行「正在做什么」，点「动态」看完整记录；不在生成就不占地方 */
.vc-root.vc-m > .vc-topbar > .vc-dockstrip.is-busy { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--forest-50); font-size: 12px; }
.vc-root.vc-m > .vc-topbar > .vc-dockstrip.is-busy .vc-dockstrip-main { flex: 1; min-width: 0; }
.vc-root.vc-m > .vc-topbar > .vc-dockstrip.is-busy .vc-dockstrip-counts { display: none; }
.vc-root.vc-m > .vc-topbar > .vc-dockstrip.is-busy .vc-dockstrip-last { margin: 0; }
.vc-root.vc-m > .vc-topbar > .vc-dockstrip.is-busy .vc-dockstrip-more { min-height: 30px; padding: 2px 10px; }
.vc-mbar { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 6px; }
.vc-mbar-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--forest-800); border-radius: 22px; cursor: pointer; }
.vc-mbar-icon:active { background: var(--paper-50); }
.vc-mbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 44px; padding: 0 4px; border: 0; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.vc-mbar-title b { max-width: 100%; font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--forest-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.vc-mbar-title small { font-size: 11.5px; color: var(--ink-500); line-height: 1.3; white-space: nowrap; }
.vc-mbar-seg { display: flex; gap: 3px; height: 3px; padding: 0 14px; }
.vc-mbar-seg b { flex: 1; border-radius: 2px; background: var(--paper-100); }
.vc-mbar-seg b.is-done { background: var(--forest-600); }
.vc-mbar-seg b.is-current { background: var(--mustard-500); }

/* 底部弹层（「⋯」菜单 / 制作步骤）。遮罩不跟着动，弹层滑入那几百毫秒里的早点击落在遮罩上，不会漏给背后的页面。 */
.vc-msheet-mask { position: fixed; inset: 0; z-index: 1; background: rgba(20,32,28,.45); }
.vc-root.vc-m .vc-msheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--cream); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(20,32,28,.18);
  transform: translateY(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
  /* 尾部容器桌面上带 justify-self:end，新版 Chrome 对 fixed 元素也认这个对齐，会把弹层缩成内容宽、贴右边 */
  justify-self: stretch; width: auto; margin: 0;
}
.vc-root.vc-m .vc-msheet.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
.vc-msheet-grab { flex: none; width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 2px auto 10px; }
.vc-msheet-title { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--forest-900); margin: 0 0 4px; }
.vc-msheet-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: var(--ink-900); text-align: start; text-decoration: none; cursor: pointer; }
.vc-msheet-row:last-child { border-bottom: 0; }
.vc-msheet-row:disabled { cursor: default; opacity: 1; }
.vc-msheet-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--forest-50); color: var(--forest-800); display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.vc-msheet-tx { flex: 1; min-width: 0; font-size: 15px; }
.vc-msheet-tx small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-msheet-chev, .vc-msheet-state { flex: none; color: var(--ink-300); font-size: 13px; }
.vc-msheet-step.is-done .vc-msheet-ic { background: var(--forest-700); color: #fff; }
.vc-msheet-step.is-current { margin: 0 -16px; padding: 8px 16px; width: calc(100% + 32px); background: var(--mustard-100); }
.vc-msheet-step.is-current .vc-msheet-ic { background: var(--mustard-500); color: #fff; }
.vc-msheet-step.is-current .vc-msheet-tx { font-weight: 700; }
.vc-msheet-step.is-current .vc-msheet-state { color: var(--mustard-600); font-weight: 600; }
.vc-msheet-step:disabled .vc-msheet-tx { color: var(--ink-500); }
/* 「⋯」菜单里：余额徽章（平台画的）居中一整行；语言选择变成一行设置项 */
/* DOM 里语言在前、徽章插槽在后（桌面顶栏的顺序不能动）；菜单里用 order 排成：徽章 → 动态/作品 → 语言 → 反馈/回首页 */
.vc-root.vc-m .vc-msheet-more > .vc-msheet-grab { order: -3; }
.vc-root.vc-m .vc-msheet-more > .vc-msheet-row { order: -1; }
.vc-root.vc-m .vc-msheet-more > .vc-msheet-row-end { order: 1; }
.vc-root.vc-m .vc-msheet-more .topbar-wallet { order: -2; display: flex; justify-content: center; max-width: none; overflow: visible; padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
.vc-root.vc-m .vc-msheet-more .topbar-wallet:empty { display: none; }
.vc-root.vc-m .vc-msheet-more .vc-language-picker { order: 0; justify-self: stretch; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-900); }
.vc-root.vc-m .vc-msheet-more .vc-language-picker > span { display: inline; flex: 1; }
.vc-root.vc-m .vc-msheet-more .vc-language-picker::before { content: "文"; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--forest-50); color: var(--forest-800); display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.vc-root.vc-m .vc-msheet-more .vc-language-picker select { max-width: 55%; min-height: 40px; padding: 6px 8px; font-size: 14px; }

/* 底栏：钉在屏幕底部，只留主按钮（上一步 = 左上角返回）。成书步骤自己有底部工具条，不显示。 */
.vc-root.vc-m .vc-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; max-width: none;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--cream); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(20,32,28,.06);
}
.vc-root.vc-m .vc-nav-prev,
.vc-root.vc-m .vc-nav-progress { display: none; }
.vc-root.vc-m.vc-at-book .vc-nav { display: none; }
.vc-root.vc-m .vc-nav > .tk-btn { flex: 1 1 100%; justify-content: center; min-height: 50px; font-size: 16px; border-radius: 12px; }
.vc-root.vc-m .vc-nav > .vc-nav-alt { min-height: 42px; font-size: 14px; }
.vc-root.vc-m .vc-production-status { position: static; }

/* ④ 各步正文：标题区收紧（「第 N 步 / 共 6 步」顶栏已有，不再重复），次要设置收进「更多设定」 */
.vc-root.vc-m .vc-form { padding: 18px 16px 24px; }
.vc-root.vc-m .vc-step-kicker { display: none; }
.vc-root.vc-m .vc-step-title { font-size: 24px; line-height: 1.3; }
.vc-root.vc-m .vc-step-sub { font-size: 13.5px; line-height: 1.6; }
.vc-root.vc-m .vc-step-body:not(.is-adv-open) .vc-m-adv { display: none !important; }
.vc-m-adv-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; margin: 4px 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-900); text-align: start; cursor: pointer; }
.vc-m-adv-toggle small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-300); }
.vc-m-adv-toggle > span:last-child { color: var(--ink-300); font-size: 16px; }
/* 定调：梗概、年龄、道理放前面 */
.vc-root.vc-m .vc-step-tone { display: flex; flex-direction: column; }
.vc-root.vc-m .vc-step-tone > .vc-step-head { order: 0; }
.vc-root.vc-m .vc-step-tone > .vc-tone-theme { order: 1; }
.vc-root.vc-m .vc-step-tone > .vc-tone-reader { order: 2; }
.vc-root.vc-m .vc-step-tone > .vc-tone-lesson { order: 3; }
.vc-root.vc-m .vc-step-tone > .vc-m-adv-toggle { order: 4; }
.vc-root.vc-m .vc-step-tone > .vc-tone-name { order: 5; }
.vc-root.vc-m .vc-step-tone > .vc-tone-focus { order: 6; }
.vc-root.vc-m .vc-step-tone .vc-age-cards { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.vc-root.vc-m .vc-step-tone .vc-age { padding: 10px 6px; text-align: center; }
.vc-root.vc-m .vc-step-tone .vc-age-d { display: none; }
.vc-root.vc-m .vc-seeds,
.vc-root.vc-m .vc-pill-grid { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
.vc-root.vc-m .vc-seeds::-webkit-scrollbar,
.vc-root.vc-m .vc-pill-grid::-webkit-scrollbar { display: none; }
.vc-root.vc-m .vc-seeds > *,
.vc-root.vc-m .vc-pill-grid > * { flex: none; white-space: nowrap; }
/* 故事版本：两个版本用页签切换，一次读一个；正文先露一段，「展开全文」读完整 */
.vc-m-tabs { display: flex; gap: 0; margin: 0 0 12px; padding: 4px; border-radius: 10px; background: var(--paper-50); }
.vc-m-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--ink-500); cursor: pointer; }
.vc-m-tabs button.is-on { background: #fff; box-shadow: var(--shadow-sm); color: var(--forest-900); font-weight: 600; }
.vc-root.vc-m .vc-story-option-grid.has-selection > .vc-story-option-card:not(.vc-story-option-card-on) { display: none; }
.vc-root.vc-m .vc-story-option-grid:not(.is-expanded) .vc-story-option-text { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.vc-m-expand { display: block; width: 100%; min-height: 44px; margin-top: 4px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--forest-700); cursor: pointer; }
/* 风格：首屏只放成书规格（带积分）、画风、版式；IP / 输出形态 / 精排模板 / 审校标准收进「更多设置」 */
.vc-root.vc-m .vc-step-style { display: flex; flex-direction: column; }
.vc-root.vc-m .vc-step-style > .vc-style-specs { display: contents; }
.vc-root.vc-m .vc-step-style > .vc-step-head,
.vc-root.vc-m .vc-step-style > .vc-production-note { order: 0; }
.vc-root.vc-m .vc-step-style .vc-grp-tier { order: 1; }
.vc-root.vc-m .vc-step-style > .vc-style-pick { order: 2; }
.vc-root.vc-m .vc-step-style .vc-grp-orient { order: 3; margin-bottom: 8px; }
.vc-root.vc-m .vc-step-style > .vc-m-adv-toggle { order: 4; }
.vc-root.vc-m .vc-step-style > .vc-style-ip { order: 5; }
.vc-root.vc-m .vc-step-style .vc-grp-output { order: 6; }
.vc-root.vc-m .vc-step-style .vc-grp-qc { order: 7; }
.vc-root.vc-m .vc-step-style .vc-style-grp { margin-bottom: 18px; }
.vc-root.vc-m .vc-grp-tier .vc-page-slider,
.vc-root.vc-m .vc-grp-orient .vc-page-slider { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vc-root.vc-m .vc-grp-tier .vc-page-btn,
.vc-root.vc-m .vc-grp-orient .vc-page-btn { min-width: 0 !important; padding: 10px 6px; }
.vc-root.vc-m .vc-grp-tier .vc-page-est { display: none; }
.vc-root.vc-m .vc-grp-tier .vc-page-u,
.vc-root.vc-m .vc-grp-orient .vc-page-u { font-size: 12px; }
.vc-root.vc-m .vc-grp-orient .vc-page-slider { margin-bottom: 0 !important; }
.vc-root.vc-m .vc-style-grid:not(.is-all) > .vc-style-card:nth-child(n+5):not(.vc-style-on) { display: none; }
/* 输入框 + 「AI 辅助生成」排一行，按钮不再独占一整行 */
.vc-root.vc-m .vc-inline-tools { display: flex; gap: 8px; align-items: stretch; }
.vc-root.vc-m .vc-inline-tools > .tk-input { flex: 1; min-width: 0; }
.vc-root.vc-m .vc-inline-tools > .vc-ai-btn { flex: none; width: auto; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.vc-root.vc-m .vc-inline-tools--end { justify-content: flex-end; }
/* 剧情分页：制作概要缩成一行；每页折成一行，点开再看全部 */
.vc-m-summary-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-500); text-align: start; cursor: pointer; }
.vc-m-summary-k { flex: none; color: var(--forest-700); font-weight: 600; }
.vc-root.vc-m .vc-summary { padding: 4px 14px; }
.vc-root.vc-m .vc-summary:not(.is-open) > .vc-summary-head,
.vc-root.vc-m .vc-summary:not(.is-open) > .vc-summary-grid { display: none; }
.vc-root.vc-m .vc-summary.is-open { padding-bottom: 14px; }
.vc-root.vc-m .vc-story-pages { gap: 8px; }
.vc-root.vc-m .vc-m-acc { padding: 0; overflow: hidden; }
.vc-root.vc-m .vc-m-acc.is-open { border-color: var(--forest-700); }
.vc-m-acc-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.vc-m-acc-no { flex: none; padding: 2px 8px; border-radius: 11px; background: var(--paper-50); color: var(--ink-500); font-size: 12px; font-weight: 600; }
.vc-m-acc.is-open .vc-m-acc-no { background: var(--forest-100); color: var(--forest-800); }
.vc-m-acc-preview { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-m-acc-chev { flex: none; margin-left: auto; color: var(--ink-300); }
.vc-root.vc-m .vc-m-acc.is-open > :not(.vc-m-acc-head) { padding: 0 14px 14px; }
/* 角色：清单变成带图的卡片并排，一眼看出造型统不统一；大图和提示词框压矮 */
.vc-root.vc-m .vc-step-head .vc-page-hint { display: none; }
.vc-root.vc-m .vc-character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.vc-root.vc-m .vc-character-tile { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; min-height: 0; }
.vc-character-tile-img { display: block; aspect-ratio: 3 / 4; border-radius: 8px; background: var(--paper-50); overflow: hidden; }
.vc-character-tile-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.vc-root.vc-m .vc-character-tile-copy { display: flex; flex-direction: column; gap: 2px; padding: 0 2px 2px; text-align: start; }
.vc-root.vc-m .vc-character-editor-media,
.vc-root.vc-m .vc-character-editor-media img { max-height: 200px; }
.vc-root.vc-m .vc-character-editor-media img { object-fit: contain; }
.vc-root.vc-m .vc-prompt-box .vc-prompt-editor { max-height: 150px; }
.vc-root.vc-m .vc-prompt-diff { min-height: 0; max-height: 150px; }
.vc-root.vc-m .vc-reference-card { gap: 10px; }
.vc-root.vc-m .vc-reference-card .vc-image-open img { max-width: 72px; max-height: 72px; }

/* ⑤ 成书页（手机）：首屏封面 + 阅读/分享/PDF；整书页面变缩略图网格，点一页从底部弹出编辑；
   多语言、排版与导出两个面板收进底部工具条，用的还是原来那两块内容（只是换成底部弹层的样子）。 */
.vc-root.vc-m .vc-production-status.is-complete,
.vc-root.vc-m .vc-celebrate,
.vc-root.vc-m .vc-book-audit-needs-review { display: none; }
.vc-m-hero { margin: 0 0 16px; }
.vc-m-hero-cover { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--paper-100); box-shadow: var(--shadow-book); cursor: pointer; }
.vc-m-hero-cover img { display: block; width: 100%; aspect-ratio: var(--page-aspect, 3 / 2); max-height: 260px; object-fit: cover; }
.vc-m-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 34px 14px 12px; background: linear-gradient(transparent, rgba(20,32,28,.72)); color: #fff; text-align: start; }
.vc-m-hero-cap b { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.35; }
.vc-m-hero-cap small { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
.vc-m-hero-actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.vc-m-hero-actions .tk-btn { justify-content: center; min-height: 52px; font-size: 16px; border-radius: 12px; }
.vc-m-hero-actions .tk-btn.is-locked,
.vc-m-hero-actions .tk-btn[aria-disabled="true"] { color: var(--ink-300); background: var(--paper-50); }
.vc-m-hero-actions .tk-btn.is-locked::before { content: "🔒"; margin-right: 4px; font-size: 13px; }
.vc-m-hero-hint { margin: 8px 0 0; font-size: 13px; color: var(--orange-600); text-align: center; }
.vc-m-hero-review { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--mustard-100); color: var(--mustard-600); font-size: 12.5px; line-height: 1.55; }
.vc-m-hero-review p { margin: 0; }
.vc-m-hero-review > div { display: flex; gap: 8px; margin-top: 8px; }
.vc-m-hero-review .tk-btn { flex: 1; justify-content: center; min-height: 42px; font-size: 13px; }
.vc-m-hero-review .tk-btn-ghost { background: #fff; }
.vc-m-hero-review .tk-btn-primary { background: var(--mustard-600); border-color: var(--mustard-600); }
.vc-m-gridwrap { margin: 4px 0 16px; }
.vc-m-grid-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.vc-m-grid-head b { font-size: 14px; }
.vc-m-grid-head small { font-size: 12px; color: var(--ink-300); }
/* 一页一行：左图右文（页码 · 状态 · 正文前三行），扫一眼就知道每页讲什么 */
.vc-m-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.vc-m-thumb { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); font: inherit; text-align: start; cursor: pointer; }
.vc-m-thumb.is-flag { border-color: var(--mustard-500); background: #fffaf0; }
.vc-m-thumb-img { position: relative; display: grid; place-items: center; aspect-ratio: var(--page-aspect, 3 / 2); border-radius: 8px; overflow: hidden; background: var(--paper-50); border: 1px dashed var(--line-strong); font-size: 11px; color: var(--ink-300); text-align: center; padding: 0; }
.vc-m-thumb-img img { width: 100%; height: 100%; object-fit: cover; }
.vc-m-thumb .vc-m-thumb-img:has(img) { border: 0; }
.vc-m-thumb.is-busy .vc-m-thumb-img { border: 1.5px dashed var(--mustard-500); background: var(--mustard-100); color: var(--mustard-600); }
.vc-m-thumb-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.vc-m-thumb-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.vc-m-thumb-head em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--forest-800); }
.vc-m-thumb-head i { flex: none; padding: 1px 7px; border-radius: 9px; background: var(--mustard-100); color: var(--mustard-600); font-style: normal; font-size: 11px; font-weight: 600; }
.vc-m-thumb-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--serif); font-size: 13px; line-height: 1.6; color: var(--ink-700); }
/* 成书页底部工具条（取代底栏） */
.vc-m-toolbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: space-around; padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--cream); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(20,32,28,.06); }
.vc-m-toolbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 4px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--ink-500); cursor: pointer; }
.vc-m-toolbar button span { font-size: 18px; line-height: 1.2; }
.vc-m-toolbar button[aria-disabled="true"] { opacity: .5; }
/* 底部弹层：多语言 / 排版与导出 / 单页编辑。遮罩固定不动，弹层滑入时早点的那一下落在遮罩上 */
.vc-m-mask { position: fixed; inset: 0; z-index: 39; background: rgba(20,32,28,.45); }
.vc-root.vc-m .vc-m-toolsheet:not(.is-open) { display: none !important; }
.vc-root.vc-m .vc-m-toolsheet.is-open,
.vc-root.vc-m .vc-m-pagesheet.is-open {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0;
  max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--cream); border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(20,32,28,.18);
}
.vc-root.vc-m .vc-story-result-head.vc-m-toolsheet.is-open { display: block; }
.vc-root.vc-m .vc-story-result-head.vc-m-toolsheet .vc-finished-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.vc-root.vc-m .vc-story-result-head.vc-m-toolsheet .vc-finished-actions > .tk-btn { justify-content: center; min-height: 46px; }
.vc-root.vc-m .vc-reading-enhancements.vc-m-toolsheet.is-open { display: block; }
.vc-root.vc-m .vc-m-pagesheet:not(.is-open) { display: none; }
.vc-root.vc-m .vc-m-pagesheet.is-open { display: block; top: 56px; max-height: none; }
.vc-root.vc-m .vc-m-pagesheet.is-open > article { margin: 0; border: 0; box-shadow: none; padding: 0; background: none; }
.vc-m-pagesheet-head { position: sticky; top: -16px; z-index: 2; display: flex; align-items: center; gap: 8px; margin: -16px -16px 10px; padding: 12px 12px 10px 16px; background: var(--cream); border-bottom: 1px solid var(--line); }
.vc-m-pagesheet-head b { flex: 1; font-family: var(--serif); font-size: 16px; color: var(--forest-900); }
.vc-m-pagesheet-nav { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-500); }
.vc-m-pagesheet-nav button, .vc-m-pagesheet-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 20px; background: #fff; font: inherit; font-size: 18px; color: var(--forest-800); cursor: pointer; }
.vc-m-pagesheet-nav button:disabled { opacity: .35; }
.vc-m-pagesheet-close { border: 0; background: var(--paper-50); font-size: 15px; }
.vc-root.vc-m .vc-step-book.is-complete > .vc-step-head .vc-step-sub,
.vc-root.vc-m .vc-step-book.is-complete .vc-production-status { display: none; }
.vc-root.vc-m .vc-step-book .vc-story-result { padding: 0; border: 0; background: none; box-shadow: none; }
/* 「排版与导出」面板里那句「在上方多语言…生成」在手机上指不到东西（多语言在底部工具条），不显示 */
.vc-root.vc-m .vc-story-result-head.vc-m-toolsheet > div:first-child > p { display: none; }
/* 单页弹层顶部：质检没过的理由 + 保留 / 重画 */
.vc-m-qc { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--mustard-100); color: var(--ink-700); font-size: 13px; line-height: 1.6; }
.vc-m-qc > b { display: block; margin-bottom: 4px; color: var(--mustard-600); }
.vc-m-qc ul { margin: 0; padding-left: 18px; }
.vc-m-qc p { margin: 0 0 4px; }
.vc-m-qc li + li { margin-top: 4px; }
.vc-m-qc-more { min-height: 36px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--forest-700); cursor: pointer; }
.vc-m-qc-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.vc-m-qc-actions .tk-btn { flex: 1; justify-content: center; min-height: 44px; }
.vc-m-qc-actions .tk-btn-ghost { background: #fff; }
.vc-m-qc-actions > span { flex: 1; font-size: 12px; color: var(--ink-500); }
/* 制作动态弹层（手机） */
.vc-root.vc-m .vc-msheet-dock .vc-dock-line { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.vc-root.vc-m .vc-msheet-dock .vc-dock-time { flex: none; color: var(--ink-300); font-variant-numeric: tabular-nums; }
.vc-msheet-empty { margin: 8px 0; font-size: 13px; color: var(--ink-500); line-height: 1.6; }

/* ── 11-09 手机压缩：每一步尽量一屏看完 ──
   步骤说明文字（顶栏已写了第几步 / 叫什么）、出图模型名、「已打开历史绘本」这类告知不占首屏；
   风格页规格下那段制作时长说明只留一行；角色页上传卡缩成一行、提示词编辑收进「修改这个角色」；
   成书页画完后不再显示进度卡和「✓ 剧情分页 ✓ 角色设定图」那排（顶栏进度条已经说明了）。 */
.vc-root.vc-m .vc-step-head .vc-step-sub,
.vc-root.vc-m .vc-step-head .vc-page-hint,
.vc-root.vc-m .vc-production-note.is-info { display: none; }
.vc-root.vc-m .vc-step-head { margin-bottom: 12px; }
.vc-root.vc-m .vc-step-style .vc-page-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-root.vc-m .vc-reference-field .vc-lbl-hint,
.vc-root.vc-m .vc-reference-copy > span { display: none; }
.vc-root.vc-m .vc-reference-card .vc-image-open img { max-width: 56px; max-height: 56px; }
.vc-root.vc-m .vc-prompt-advanced > summary { padding: 12px 0; cursor: pointer; }
.vc-root.vc-m .vc-step-book .vc-pipeline,
.vc-root.vc-m .vc-production-status.is-all-drawn { display: none; }
.vc-root.vc-m .vc-style-note { display: none; }
/* 定调页梗概 / 道理：手机上是随内容长高的文本框，占满整行；「AI 辅助生成」挪到下面靠右 */
.vc-root.vc-m .vc-autogrow, .vc-root.vc-m .vc-inline-tools > .vc-autogrow { display: block; flex: none; width: 100%; min-height: 44px; resize: none; overflow: hidden; font-family: inherit; line-height: 1.5; }
.vc-root.vc-m .vc-tone-theme .vc-inline-tools,
.vc-root.vc-m .vc-tone-lesson .vc-inline-tools { flex-direction: column; align-items: stretch; gap: 6px; }
.vc-root.vc-m .vc-tone-theme .vc-ai-btn,
.vc-root.vc-m .vc-tone-lesson .vc-ai-btn { align-self: flex-end; min-height: 36px; padding: 6px 14px; font-size: 13px; }