/* 设计系统 · components（CARD-01）
   全站共享组件类，与发票模块（fapiao）同语言的“五段式卡片流”：
   页头 → 输入卡 → 参数卡（可折叠） → 运行与进度 → 结果与日志。
   本文件只新增类名，不改动/不覆盖 style.css 中任何既有的功能性类
   （.card / .section / .active / .nav-btn / .panel / .actions / .status /
   .download / .log-output / .form-label 等语义与外观保持不变）。 */

/* ---------- 页头：eyebrow + 标题 + 说明 + 使用说明按钮 ---------- */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}
.section-head h1 {
  margin: 0;
}
.section-head .sub {
  margin: 8px 0 0;
}

/* ---------- 留言板连接状态圆点（CARD-06：SSE 已连/轮询兜底） ---------- */
.message-conn-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #6b7785);
  align-self: center;
  white-space: nowrap;
}
.message-conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
}
.message-conn-dot.live { background: #22c55e; }
.message-conn-dot.polling { background: #f59e0b; }
.message-conn-dot.offline { background: #ef4444; }

/* ---------- 卡片流容器：垂直堆叠，卡片间统一间距 ---------- */
.workflow {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* ---------- 卡内小节标题：编号 + 标题 + 说明（对齐发票模块 section-heading） ---------- */
.section-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}
.section-heading h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}
.section-heading p {
  margin: 5px 0 0;
  color: var(--sub);
  font-size: 13px;
  line-height: 1.55;
}
.section-heading .step {
  padding-top: 2px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

/* ---------- 表单字段：标签在上，控件在下 ---------- */
.field {
  display: grid;
  gap: 7px;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-md);
}

/* ---------- 五段式卡片：在 .card 基础上叠加的语义类 ---------- */
.input-card,
.settings-card,
.progress-card,
.results-card,
.log-card {
  padding: var(--card-padding);
}
.settings-card {
  background: var(--surface-soft);
}
.progress-card {
  background: var(--surface-soft);
}

/* ---------- 参数卡折叠（<details class="card settings-card">） ---------- */
.settings-card > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
}
.settings-card > summary::-webkit-details-marker {
  display: none;
}
.settings-card > summary::before {
  content: "▸";
  color: var(--accent);
  transition: transform 0.15s ease;
}
.settings-card[open] > summary::before {
  transform: rotate(90deg);
}
.settings-card > summary .eyebrow {
  margin-bottom: 0;
}
.settings-card .collapse-body {
  margin-top: var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* ---------- 日志卡：深色终端风，与发票模块 log-card 一致 ---------- */
.log-card {
  background: var(--surface-dark, #181f2b);
  color: var(--on-dark, #b7c2d6);
}
.log-card .section-heading h2,
.log-card .section-heading p {
  color: var(--on-dark, #b7c2d6);
}
.log-card .section-heading .step {
  color: var(--accent);
}
.log-card textarea.log-output {
  margin: 0;
}

/* ---------- 通用数据表（新增工具类，供后续页面复用） ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.data-table th {
  color: var(--sub);
  font-weight: 600;
  background: var(--surface-soft);
}

@media (max-width: 700px) {
  .section-head {
    flex-direction: column;
  }
  .input-card,
  .settings-card,
  .progress-card,
  .results-card,
  .log-card {
    padding: var(--card-padding-sm);
  }
}