/* mockdata — tool-specific styles
   只放这个工具独有的东西。公共外观（toolbox / field / alert / runs 表格 / chip）
   已经在全局样式表里。

   ★ 不写任何裸色值：一律走主题变量（--surface / --line / --fg …）。 */

.md-block {
  margin-top: 22px;
}

/* 控制区：条数 / seed / 格式 / 换一批 */
.md-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 16px;
  align-items: start;
}

.md-controls .field {
  min-width: 0;
}

/* 字段复选框组：12 个字段，宽屏三四列、窄屏两列 */
.md-fields {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.md-fields__legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}

.md-fields__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 14px;
}

.md-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--fg);
  cursor: pointer;
  min-width: 0;
}

.md-check__box {
  accent-color: var(--accent);
  flex: none;
}

/* 输出区标题行 */
.md-outtitle {
  margin: 0;
  font-size: 16px;
}

/* ★ 数据面容器（见 ui.js 的说明）。
   用 <pre> 是因为它属于 raw_text 的"数据面"跳过集 —— 判断页面有没有裸 i18n key 时，
   生成的数据不该参与判定（邮箱里的点会被误当成 key 的分隔点）。
   这里把 pre 的排版副作用（等宽字体 / 保留空白 / 上下外边距）归零，
   使渲染效果与一个普通块级容器完全相同。★ 不要在这里放翻译文案。 */
.md-pre {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  white-space: normal;
}

/* 表格：列多值长，窄屏横向滚动，不隐藏任何一列 */
.md-scroll {
  overflow-x: auto;
}

.md-table {
  min-width: 560px;
}

.md-table td {
  font-size: 12.5px;
  white-space: nowrap;
  font-family: var(--mono);
}

/* JSON / CSV 文本块 */
.md-code {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-x: auto;
  max-height: 480px;
}

/* 复制按钮行 */
.md-copyrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.md-copied {
  font-size: 12.5px;
  color: var(--fg-muted);
}

/* 卡号说明用小字，但必须是独立一行 —— 混进 seedNote 里就没人看了 */
.md-cardnote {
  margin-top: 4px;
}