/* ══════════════════════════════════════════════════════════════════════
   视频二创 · 「标题」页 与 「音字」页 排版优化（纯 CSS 覆盖层）
   ══════════════════════════════════════════════════════════════════════

   【用户原话（本轮）】
     「然后把标题和音质两个选项卡里面排版排得更好一点，不改变功能的情况下，
       让它更实用、更方便一些」

   【实测体检数据】（探针读真实 DOM，面板可视高 892）
     音字页首屏到 top=953 就满了，以下全要滚：
       ① 「生成旁白并匹配整段」主操作按钮 top=1019 —— 【被挤出首屏】
       ② 「旁白文案」textarea 只有 131px 高，要塞 349 字
       ③ 时长提示(854) / 进度条(953) / 主按钮(1019) 三块各占一行，分散
       ④ 「整体描边」置顶条 top=239 h=64 —— 音字页最先该看的是音色/文案
       ⑤ .vr-inline-actions 里「显示 / AI 标记重点」包了 79px（本该一行）
       ⑥ .vr-layout-board 的 .vr-field-hint 占 70px 说明文字
     标题页：
       ⑦ 花字 12 款折叠时正常，但「显示时间」区块与「花字」之间空隙偏大
       ⑧ 底部「精细设置」入口占位偏大

   【原则】只动排版（间距/高度/顺序/密度），不改任何功能、不改 DOM 结构、
          不动 React 节点、不写行内样式。全部通过 class + CSS 完成。
   ⚠️ 项目硬性契约：每个深色底都要配一条浅色规则。
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 通用：收紧检查器面板的纵向节奏 ── */
.vr-inspector { padding: 12px 13px 16px; }
.vr-inspector .vr-form-grid { gap: 9px; }
.vr-inspector > .vr-subsection { margin: 10px 0; padding-top: 9px; }

/* ── ② 音字页：把「生成旁白」主操作留在一屏内 ──
   原状：时长提示(81) + 进度条(48) + 主按钮(32) 三块分开，主按钮被顶出首屏。
   做法：三块收紧 + 减掉块间多余 margin，把主按钮提上来。 */
.vr-duration-board.is-compact {
  padding: 8px 10px;
  margin: 8px 0 6px;
  border-radius: 9px;
}
.vr-duration-board.is-compact .vr-duration-line { line-height: 1.5; }
.vr-narration-status { min-height: 40px; padding: 7px 10px; margin: 6px 0; }
.vr-narration-status + .vr-inline-actions,
.vr-narration-status ~ .vr-inline-actions { margin-top: 0; }
/* 主操作按钮行：贴紧进度条，别再留一大段空 */
.vr-inspector .vr-inline-actions { gap: 8px; margin: 7px 0; }
.vr-inspector .vr-inline-actions .vr-btn { height: 32px; }
/* 「整体描边」置顶条：音字页里它不该抢首位，压薄一点 */
.vr-stroke-quick.is-pinned { padding: 7px 10px; margin: 6px 0 8px; min-height: 0; }
.vr-stroke-quick.is-pinned label { gap: 6px; }

/* ── ③ 音字页：旁白文案输入框给足高度（349 字要塞得下） ──
   ⚠️【实测】只写 min-height 不生效：.vr-narration-text 是 flex 子项，
      flex 子项默认 flex-shrink:1 会被父级压扁（项目铁律，卡片曾被压成 10px）。
      所以必须同时写 flex: 0 0 auto + min-height 加 !important。 */
.vr-narration-text {
  flex: 0 0 auto !important;
  min-height: 168px !important;
  max-height: 46vh;
  line-height: 1.62;
  padding: 9px 11px;
}
/* 文案说明区（字数 + AI 改写 + AI 设置）压成紧凑一行 */
.vr-ai-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 8px;
  padding: 7px 0 3px;
  margin-top: 5px;
  line-height: 1.5;
}
.vr-ai-inline .vr-btn { height: 28px; padding: 0 10px; font-size: 11.5px; }
/* 说明文字（「AI 改写」按…那段）压成小字块，少占纵向 */
.vr-ai-inline small { font-size: 10px; line-height: 1.5; }
/* 「显示 / AI 标记重点」也压成一行 */
.vr-subsection-head { flex-wrap: wrap; gap: 8px; }
.vr-subsection-head .vr-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  height: auto;
  min-height: 0;
}
.vr-subsection-head .vr-btn { height: 28px; padding: 0 10px; font-size: 11.5px; }
.vr-subsection-head .vr-switch { display: inline-flex; align-items: center; gap: 5px; }

/* ── ④ 音字页：音色下拉与滑杆行收紧 ── */
.vr-quick-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.vr-quick-slider { min-height: 0; padding: 5px 0; }
.vr-quick-slider input[type="range"] { height: 18px; }
/* 音色一行别占 91px */
.vr-form-grid > label.is-wide { gap: 5px; }

/* ── ⑤ 音字页：排版区说明文字压薄 ── */
.vr-layout-board { padding: 9px 10px; margin: 8px 0; border-radius: 9px; }
.vr-layout-head { line-height: 1.45; }
.vr-layout-board .vr-field-hint,
.vr-field-hint {
  margin-top: 5px;
  padding: 6px 8px;
  line-height: 1.5;
  font-size: 11px;
}
.vr-layout-row { gap: 8px; margin-top: 7px; }

/* ── ⑥ 标题页：显示时间区块与花字之间的节奏 ── */
.vr-title-section .vr-title-when { padding: 9px 10px; margin: 8px 0; border-radius: 9px; }
.vr-title-section .vr-title-when .vr-when-row { gap: 6px; margin-top: 7px; }
.vr-title-section .vr-when-option { height: 32px; font-size: 11.5px; }
/* 花字折叠条与「显示时间」之间别留大空 */
.vr-title-section .vr-huazi-fold { margin: 8px 0 6px; }
.vr-title-section .vr-field-hint { margin: 5px 0 0; padding: 5px 7px; font-size: 11px; }

/* ── ⑦ 两个页共用的滑块行：更紧凑 ── */
.vr-inspector label.vr-quick-slider > span { font-size: 11.5px; }
.vr-inspector label.vr-quick-slider > em { font-size: 11px; min-width: 30px; text-align: right; }

/* ── ⑧ 底部「精细设置」折叠条：样式统一，占位收薄 ── */
.vr-adv { margin: 9px 0; border-radius: 10px; }
.vr-adv > summary { padding: 8px 11px; font-size: 12px; }
.vr-adv > .vr-form-grid { padding: 2px 11px 10px; }

/* ── ⑨ 字幕时间轴折叠条 ── */
.vr-subtitle-board-fold { margin: 7px 0; }
.vr-subtitle-board-fold > summary.vr-subtitle-board-head { padding: 8px 10px; }

/* ── 浅色主题配套（契约：每个深色底都要有浅色规则） ── */
html[data-vr-theme="light"] .vr-duration-board.is-compact { background: #fbf0f1; border-color: #f2dade; }
html[data-vr-theme="light"] .vr-layout-board { background: #fbf0f1; border-color: #f2dade; }
html[data-vr-theme="light"] .vr-narration-text { background: #fff; border-color: #f2dade; color: #2a2c31; }
html[data-vr-theme="light"] .vr-layout-board .vr-field-hint,
html[data-vr-theme="light"] .vr-field-hint { background: #f7eef0; color: #6d7278; }
html[data-vr-theme="light"] .vr-stroke-quick.is-pinned { background: #fff; border-color: #f2dade; }
html[data-vr-theme="light"] .vr-narration-status { background: #fbf0f1; border-color: #f2dade; }