/* ══════════════════════════════════════════════════════════════════════
   视频工作台「镜头」选项卡 · 与图文二创工作台同样的排列方式
   ══════════════════════════════════════════════════════════════════════

   【用户原话】
     「镜头选项卡下面的内容，能不能也和图文二创工作台原贴图片的生成要求、
       生成比例采用同样的排列方式，然后细节上重新优化一遍 UI？」

   【实测对比】（探针读真实 computed style 得到）
     图文二创  .input-grid.compact-remix-settings
       → display:grid；列 = 2 列等宽；gap 8px
     图文二创  .option-grid.ratio-option-grid（比例/画质）
       → display:grid；列 = 4 列等宽；gap 5px；按钮小方块
     视频镜头  .vr-form-grid
       → display:grid；列 = repeat(2, minmax(0,1fr))；gap 8px   ← 已经一致
     视频镜头  .vr-ratio-section.is-compact
       → display:block；高 79px                                ← 不一致（占一整块）
     视频镜头  .vr-ratio-grid
       → 需要做成和图文一样的「小方块网格」

   【做法】纯 CSS，把镜头的比例选择改成与图文二创同款的小方块网格，
     并把整个镜头面板的间距/圆角/控件高度收敛到与图文二创同一套规格。
     不改任何 JS 结构、不改字段与事件。

   ⚠️ 契约要求：每个深色底都要配浅色规则。
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 镜头面板表单：与图文二创同一套两列网格规格 ── */
.vr-inspector .vr-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
/* 整行的字段（提示词、参考图）跨两列 —— 与图文二创「整句提示词跨列」一致 */
.vr-inspector .vr-form-grid > .is-wide,
.vr-inspector .vr-form-grid > section,
.vr-inspector .vr-form-grid > .vr-prompt-editor { grid-column: 1 / -1; }

/* ── ② 画面比例：改成与图文二创「生成比例」同款的小方块网格 ── */
.vr-ratio-section,
.vr-ratio-section.is-compact {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}
.vr-ratio-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.vr-ratio-inline-label {
  font-size: 12px;
  color: var(--text-2, #9aa6b2);
  white-space: nowrap;
}
/* 关键：与 .ratio-option-grid 同一套网格与按钮规格 */
.vr-ratio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.vr-ratio-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 46px;
  padding: 4px 2px;
  border: 1px solid #2c313c;
  border-radius: 7px;
  background: #1b2027;
  color: #cfdae2;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.vr-ratio-option:hover {
  background: #232b33;
  border-color: #4a5560;
  color: #eef4f7;
}
.vr-ratio-option.is-active {
  background: #17313a;
  border-color: #7adbe9;
  color: #e9fcff;
}
/* 比例图标：保持原来的形状类，只统一描边色 */
.vr-ratio-option .vr-ratio-icon {
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: .85;
}
.vr-ratio-option.is-active .vr-ratio-icon { opacity: 1; }

/* ── ③ 控件规格统一（与图文二创同一套：高 34、圆角 6、字号 13） ── */
.vr-inspector .vr-form-grid label > span,
.vr-inspector .vr-form-grid > label > small { font-size: 12px; }
.vr-inspector .vr-form-grid input:not([type="checkbox"]):not([type="radio"]),
.vr-inspector .vr-form-grid select,
.vr-inspector .vr-form-grid textarea {
  min-height: 34px;
  border-radius: 6px;
  font-size: 13px;
}
.vr-inspector .vr-form-grid textarea { min-height: 0; padding: 8px 10px; }

/* ── ④ 参考图片区：与图文二创参考图区同样的栅格密度 ── */
.vr-inspector .vr-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
}

/* ── ⑤ 浅色主题 ── */
.vr-shell[data-theme="light"] .vr-ratio-option {
  background: #ffffff;
  border-color: #f0dade;
  color: #5d6167;
}
.vr-shell[data-theme="light"] .vr-ratio-option:hover {
  background: #fbf0f1;
  border-color: #e0c8cd;
  color: #2a2c31;
}
.vr-shell[data-theme="light"] .vr-ratio-option.is-active {
  background: rgba(232, 69, 47, .10);
  border-color: #e8452f;
  color: #e8452f;
}
.vr-shell[data-theme="light"] .vr-ratio-inline-label { color: #5d6167; }