* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #f5f7fa; color: #1e4b69; }
.container { max-width: 960px; margin: 0 auto; padding: 16px; }
h2 { text-align: center; font-size: 1.3rem; margin-bottom: 4px; }
.subtitle { text-align: center; font-size: 0.8rem; color: #94a3b8; margin-bottom: 16px; }
.workflow { display: flex; align-items: flex-start; gap: 4px; overflow-x: auto; padding: 20px 8px 40px; }
.arrow { color: #94a3b8; font-size: 1.2rem; padding-top: 14px; flex-shrink: 0; }
.step { flex-shrink: 0; text-align: center; position: relative; }
.step-circle { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #fff; cursor: pointer; }
.start-circle { background: #3b82f6; }
.end-circle { background: #22c55e; }
.step-label { display: block; font-size: 0.7rem; color: #64748b; margin-top: 4px; }
.step-box { padding: 10px 14px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; color: #fff; cursor: pointer; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s; }
.step-box:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.blue-box { background: #3b82f6; }
.gray-box { background: #94a3b8; }
.green-box { background: #22c55e; }
.diamond { width: 64px; height: 64px; background: #eab308; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0 6px; border-radius: 4px; }
.diamond::after { content: attr(data-label); }
.diamond { font-size: 0.6rem; font-weight: 700; color: #fff; position: relative; }
.diamond > * { transform: rotate(-45deg); }
.decision { position: relative; }
.feedback-loop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; text-align: center; }
.loop-svg { width: 80px; height: 36px; }
.loop-label { display: block; font-size: 0.65rem; color: #92400e; white-space: nowrap; }
.legend { display: flex; gap: 16px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: #64748b; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tooltip { position: fixed; padding: 10px 14px; background: #1e293b; color: #f1f5f9; border-radius: 8px; font-size: 0.78rem; max-width: 260px; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 100; line-height: 1.4; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.tooltip.visible { opacity: 1; }
@media (max-width: 700px) {
    .workflow { flex-direction: column; align-items: center; }
    .arrow { transform: rotate(90deg); padding: 0; }
}