/* ============================================================================
   批量抓取 / 补步骤图 —— 弹层的补充样式

   为什么只有这么几行：
     弹层的骨架（遮罩、白框、标题栏、关闭按钮、正文滚动区）
     直接复用 recipe-import.css 里的 .import-modal / .import-box / .import-head
     / .import-body。那是数据中心既有的弹层规范，抄一份样式只会两边慢慢长歪。
     这里只放这个功能独有的东西：表单字段、进度条、日志框。

   ⚠️ 一定不能自己发明 .modal-mask 这种类名 —— 数据中心的 CSS 里没有它，
      结果是弹层没有样式、看着像"点了没反应"。（第一版就是这么翻车的。）
   ============================================================================ */

/* 表单字段 */
.batch-field { display: block; margin: 0 0 14px; }
.batch-field > span { display: block; font-size: 12px; color: var(--soft, #70848a); margin-bottom: 5px; }
.batch-field select,
.batch-field input[type="text"],
.batch-field input[type="number"] {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid #dde3e2; border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--ink, #123343);
  background: #fff;
}
.batch-field select:focus,
.batch-field input:focus { outline: none; border-color: #e8572c; }
.batch-field small { display: block; font-size: 11.5px; color: #9aa8ad; margin-top: 4px; }

/* 出错提示 */
.batch-err {
  background: #fff4f0; color: #c0503a; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; margin-bottom: 12px;
}

/* 进度 */
.batch-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; margin-bottom: 8px;
}
.batch-head b { color: var(--ink, #123343); }
.batch-head em { font-style: normal; color: var(--soft, #70848a); }
.batch-track { height: 8px; background: #eef2f1; border-radius: 4px; overflow: hidden; }
.batch-track i { display: block; height: 100%; background: #e8572c; transition: width .3s; }
.batch-counts { font-size: 12px; color: #70848a; margin-top: 7px; }
.batch-counts b.ok { color: #2e7d32; }
.batch-counts b.bad { color: #c0503a; }

/* 日志 */
.batch-log {
  margin-top: 12px; background: #1e2224; color: #d6dbdd;
  font: 11.5px/1.7 ui-monospace, Menlo, Consolas, monospace;
  padding: 12px 14px; border-radius: 10px;
  max-height: 300px; overflow: auto; white-space: pre-wrap;
}

/* 底部按钮行 */
.batch-actions { display: flex; gap: 10px; margin-top: 16px; }
.batch-actions button { flex: 1; padding: 11px 18px; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.batch-actions button.primary { background: #e8572c; color: #fff; }
.batch-actions button.primary:disabled { opacity: .55; cursor: default; }
.batch-actions button.secondary { background: #f2f5f4; color: #4a5c62; }