/* 近视防控 · 系统结构图 / 流程图 */
:root { --dc-navy: #0d4f6e; --dc-gold: #1e9fff; }

.dc-arch-wrap { margin-bottom: 48px; }
.dc-arch-layer {
  background: var(--layer-bg, #f8fafc); border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
}
.dc-arch-layer-title {
  font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 10px;
}
.dc-arch-nodes { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-arch-node {
  background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--dc-navy);
  min-width: 100px; text-align: center;
}
.dc-arch-node small { display: block; font-weight: 400; color: #94a3b8; margin-top: 2px; font-size: 10px; }
.dc-arch-node--highlight { border-color: var(--dc-gold); background: #e0f2fe; }
.dc-arch-rels {
  margin-top: 12px; padding: 12px; background: #fff; border: 1px dashed #cbd5e1;
  border-radius: 8px; font-size: 12px; color: #64748b;
}
.dc-arch-rel { margin: 4px 0; }
.dc-arch-rel span { font-weight: 600; color: var(--dc-navy); }

.dc-flows-wrap { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
.dc-flow-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 20px; overflow-x: auto;
}
.dc-flow-card h3 { margin: 0 0 4px; font-size: 17px; color: #1e293b; }
.dc-flow-sub { margin: 0 0 16px; font-size: 13px; color: #64748b; }

.dc-swim-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.dc-swim-step {
  flex: 1 1 140px; min-width: 130px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 10px; position: relative;
}
.dc-swim-step[data-lane="助理"] { border-top: 3px solid #10b981; }
.dc-swim-step[data-lane="系统"] { border-top: 3px solid #1e9fff; }
.dc-swim-step[data-lane="视光师"] { border-top: 3px solid #0d4f6e; }
.dc-swim-seq {
  display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center;
  background: var(--dc-navy); color: #fff; border-radius: 50%; font-size: 11px; margin-bottom: 6px;
}
.dc-swim-step strong { display: block; font-size: 13px; color: #1e293b; margin-bottom: 4px; }
.dc-swim-step small { font-size: 11px; color: #64748b; line-height: 1.4; }
.dc-swim-lane {
  position: absolute; top: 8px; right: 8px; font-size: 10px; color: #94a3b8;
  background: #fff; padding: 2px 6px; border-radius: 4px;
}

.dc-linear-flow { max-width: 520px; margin: 0 auto; }
.dc-linear-step {
  background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid var(--dc-navy);
  border-radius: 8px; padding: 12px 14px;
}
.dc-linear-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.dc-linear-seq {
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  background: var(--dc-navy); color: #fff; border-radius: 50%; font-size: 11px; flex-shrink: 0;
}
.dc-linear-step strong { font-size: 14px; color: #1e293b; }
.dc-linear-actor { font-size: 11px; color: #fff; background: #64748b; padding: 2px 8px; border-radius: 999px; }
.dc-linear-step p { margin: 0; font-size: 13px; color: #64748b; line-height: 1.5; }
.dc-flow-gate { display: block; margin-top: 8px; font-size: 11px; color: #b45309; font-style: normal; }
.dc-linear-arr { text-align: center; color: #94a3b8; font-size: 16px; padding: 4px 0; }

.dc-branch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dc-branch-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;
}
.dc-branch-card h4 { margin: 0 0 8px; font-size: 14px; color: var(--dc-navy); }
.dc-branch-steps { font-size: 12px; color: #475569; line-height: 1.6; margin: 0 0 8px; }
.dc-branch-rule { font-size: 11px; color: #64748b; margin: 0; }