/* ============================================
   Flat Engineering Blueprint — Design System
   技术图表 / 架构图 / 规格书 通用样式
   ============================================ */

:root {
  /* 色彩体系 */
  --c-bg: #f8fafc;          /* 页面底色 (Slate-50) */
  --c-canvas: #ffffff;      /* 图表画布背景 */
  --c-border: #cbd5e1;      /* 边框线 (Slate-300) */
  --c-text-main: #0f172a;   /* 主文字 (Slate-900) */
  --c-text-sub: #64748b;    /* 辅助文字 (Slate-500) */
  --c-accent: #1e293b;      /* 强调色 (Slate-800)，仅用黑/单一语义色 */

  /* 字体 */
  --font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', Monaco, Consolas, monospace;
}

/* ---------- Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--c-bg);
  font-family: var(--font-ui);
  color: var(--c-text-main);
  padding: 40px;
}

/* ---------- 画布容器 ---------- */
.diagram-canvas {
  background: var(--c-canvas);
  border: 2px solid var(--c-border);
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- 标题区 ---------- */
.diagram-header {
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.diagram-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--c-text-main);
}

.diagram-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-sub);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  font-family: var(--font-mono);
}

/* ---------- 页脚 ---------- */
.diagram-footer {
  border-top: 1px solid var(--c-border);
  margin-top: 24px;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-text-sub);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---------- 节点 / 方块 ---------- */
.node {
  background: var(--c-canvas);
  border: 1px solid var(--c-border);
  padding: 12px 16px;
}

.node--accent {
  border: 2px solid var(--c-accent);
  background: var(--c-accent);
  color: var(--c-canvas);
}

/* ---------- 徽章 ---------- */
.badge {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 2px 6px;
  border: 1px solid var(--c-text-main);
  text-transform: uppercase;
}

.badge--filled {
  background: var(--c-text-main);
  color: var(--c-canvas);
}

/* ---------- 连接线 ---------- */
.connector {
  border-top: 1px solid var(--c-border);
}

.connector--dashed {
  border-top-style: dashed;
}

/* 带箭头的水平连接线 */
.arrow-line {
  width: 40px;
  height: 1px;
  background: var(--c-border);
  position: relative;
  flex-shrink: 0;
}

.arrow-line::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  border: 3px solid transparent;
  border-left: 5px solid var(--c-border);
}

/* ---------- 等宽文字 ---------- */
.mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ---------- 区块标题 ---------- */
.section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-text-sub);
  font-family: var(--font-mono);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}

/* ---------- 卡片 ---------- */
.card {
  border: 1px solid var(--c-border);
  padding: 16px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.card-desc {
  font-size: 12px;
  color: var(--c-text-sub);
  line-height: 1.6;
}

/* ---------- 高亮引用块 ---------- */
.callout {
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  padding: 12px 16px;
  font-size: 12px;
  color: var(--c-text-sub);
  line-height: 1.6;
  background: var(--c-bg);
}

.callout strong {
  color: var(--c-text-main);
}

/* ---------- 网格布局辅助 ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

/* ---------- 流程步骤条 ---------- */
.flow-steps {
  display: flex;
  border: 1px solid var(--c-border);
}

.flow-step {
  flex: 1;
  padding: 14px 12px;
  text-align: center;
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.flow-step:last-child {
  border-right: none;
}

.flow-step-num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--c-text-sub);
  text-transform: uppercase;
}

.flow-step-label {
  font-size: 14px;
  font-weight: 600;
}

.flow-step-desc {
  font-size: 10px;
  color: var(--c-text-sub);
  line-height: 1.4;
}

/* ---------- 概率/进度条 ---------- */
.bar-track {
  height: 16px;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
}

.bar-fill {
  height: 100%;
  background: var(--c-accent);
}

.bar-fill--mid { background: #64748b; }
.bar-fill--low { background: #cbd5e1; }

/* ---------- 标签 / Tag ---------- */
.tag {
  display: inline-block;
  font-size: 9px;
  font-family: var(--font-mono);
  padding: 2px 6px;
  border: 1px solid var(--c-accent);
  text-transform: uppercase;
}

.tag--filled {
  background: var(--c-accent);
  color: var(--c-canvas);
}

/* ---------- 图例 ---------- */
.legend {
  display: flex;
  gap: 16px;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--c-text-sub);
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--c-border);
}

.legend-swatch--dark { background: var(--c-accent); border-color: var(--c-accent); }
.legend-swatch--mid  { background: #94a3b8; border-color: #94a3b8; }
.legend-swatch--light { background: #e2e8f0; }

/* ---------- 虚线提示框 ---------- */
.hint-box {
  border: 1px dashed var(--c-border);
  background: var(--c-bg);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-sub);
}

/* ============================================
   设计原则备忘：
   - 无阴影、无渐变、无圆角按钮、无毛玻璃
   - 仅用 1px/2px 实线边框
   - 白底内容块 + 浅灰页面底
   - 强调色只用黑色或单一语义色（如红色表错误）
   - 标题/标签用 sans-serif，数据/路径/代码用 monospace
   - 所有元素严格对齐（Grid/Flexbox）
   ============================================ */