agent_backend/app/teaching-diagrams.css

.teaching-diagrams {
  min-width: 0;
}
.teaching-section-heading > span {
  display: block;
  margin-bottom: 7px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.teaching-section-intro {
  margin-top: 12px;
  color: var(--muted-foreground);
  font-size: 14px;
}
.teaching-figure {
  margin: 24px 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.teaching-caption {
  padding: 24px 26px 18px;
}
.teaching-number {
  display: block;
  margin-bottom: 8px;
  color: #71809a;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.teaching-caption h3 {
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 10px;
}
.teaching-caption p {
  color: #5b6980;
  font-size: 14px;
  margin: 0;
  line-height: 1.85;
}
.teaching-scroll {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 0 12px;
}
.teaching-row-guide {
  list-style: none;
  margin: 0;
  padding: 0 26px 18px;
  font-size: 13px;
  color: #56667e;
}
.teaching-row-guide li {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.teaching-row-guide span {
  flex-shrink: 0;
  color: #2f6bff;
  font-weight: 600;
}
.teaching-scroll:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -3px;
}
.teaching-svg {
  display: block;
  width: 100%;
  min-width: 780px;
  height: auto;
  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
}
.teaching-lane {
  fill: #f6f9ff;
  stroke: #edf1f8;
}
.teaching-lane-secondary {
  fill: #fafbfc;
}
.teaching-row-title {
  fill: #56667e;
  font-size: 12px;
  font-weight: 500;
}
.teaching-node > rect:first-child {
  fill: #fff;
  stroke: #cbd9ef;
  stroke-width: 1.25;
}
.teaching-node .teaching-node-accent {
  fill: #4075d6;
}
.teaching-node-green > rect:first-child {
  fill: #f2fbf7;
  stroke: #aad7c5;
}
.teaching-node-green .teaching-node-accent {
  fill: #287b61;
}
.teaching-node-amber > rect:first-child {
  fill: #fffbf0;
  stroke: #e7cd8d;
}
.teaching-node-amber .teaching-node-accent {
  fill: #aa7b24;
}
.teaching-node-red > rect:first-child {
  fill: #fff6f4;
  stroke: #e6b4a9;
}
.teaching-node-red .teaching-node-accent {
  fill: #b4543f;
}
.teaching-node-neutral > rect:first-child {
  fill: #fafbfc;
  stroke: #d3dae4;
}
.teaching-node-title {
  fill: #253750;
  font-size: 15px;
  font-weight: 600;
}
.teaching-node-detail {
  fill: #586a82;
  font-size: 12px;
}
.teaching-edge {
  fill: none;
  stroke: #56759d;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.teaching-edge-async {
  stroke: #846521;
  stroke-dasharray: 6 4;
}
.teaching-edge-risk {
  stroke: #ae523e;
  stroke-dasharray: 3 3;
}
.teaching-arrow-sync {
  fill: #56759d;
}
.teaching-arrow-async {
  fill: #846521;
}
.teaching-arrow-risk {
  fill: #ae523e;
}
.teaching-edge-label {
  fill: #4d6381;
  font-size: 11px;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 5px;
  stroke-linejoin: round;
}
.teaching-edge-label-async {
  fill: #765a20;
}
.teaching-edge-label-risk {
  fill: #a04433;
}
.teaching-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 0 26px 18px;
  color: #6a7890;
  font-size: 11px;
  line-height: 1.7;
}
.teaching-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.teaching-legend i {
  display: inline-block;
  width: 22px;
  border-top: 2px solid #56759d;
}
.teaching-legend .teaching-legend-async {
  border-top: 2px dashed #846521;
}
.teaching-legend .teaching-legend-risk {
  border-top: 2px dotted #ae523e;
}
.teaching-explanation {
  padding: 20px 26px 24px;
  border-top: 1px solid var(--border);
}
.teaching-explanation h4 {
  color: #2b405d;
  font-size: 14px;
  margin: 0 0 12px;
}
.teaching-explanation ol {
  list-style: decimal;
  margin: 0;
  padding-left: 23px;
}
.teaching-explanation li {
  padding-left: 4px;
  margin: 8px 0;
  color: #4c5c73;
  font-size: 14px;
  line-height: 1.95;
}
.teaching-explanation li::marker {
  color: #547dc2;
  font-weight: 600;
}
.teaching-misconception {
  border-left: 3px solid #d9ba78;
  background: #fffbf2;
  padding: 13px 16px;
  margin: 19px 0 0;
  color: #6f5c38;
  font-size: 13px;
  line-height: 1.9;
}
.teaching-misconception strong {
  display: block;
  margin-bottom: 3px;
  color: #896324;
  font-weight: 600;
}
.teaching-source {
  display: inline-block;
  margin-top: 15px;
  color: var(--primary);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .teaching-caption,
  .teaching-explanation {
    padding: 18px;
  }
  .teaching-caption h3 {
    font-size: 17px;
  }
  .teaching-legend {
    padding: 0 18px 16px;
  }
  .teaching-scroll {
    padding: 0 6px;
  }
}
@media print {
  .teaching-scroll {
    overflow: visible;
  }
  .teaching-svg {
    min-width: 0;
  }
  .teaching-figure {
    break-inside: avoid;
  }
}