.c4it-loop-examples{border:1px solid #d8dee4;border-radius:8px;padding:16px;margin:24px 0;background:#fff;color:#20242a;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.c4it-loop-examples *{box-sizing:border-box}
.c4it-loop-examples__layout{display:grid;grid-template-columns:minmax(250px,330px) minmax(280px,1fr);grid-template-areas:"panel chart" "feedback chart";gap:14px 18px;align-items:start}
.c4it-loop-examples__panel{grid-area:panel;border:1px solid #d8dee4;border-radius:8px;padding:14px;background:#f8fafc}
.c4it-loop-examples__heading{font-size:18px;margin:0 0 12px}
.c4it-loop-examples__controls{display:grid;gap:10px}
.c4it-loop-examples label{display:grid;gap:5px;font-weight:700}
.c4it-loop-examples input,.c4it-loop-examples select{width:100%;border:1px solid #b9c2cf;border-radius:6px;padding:8px;font-size:16px;background:#fff}
.c4it-loop-examples__settings{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.c4it-loop-examples__settings label{min-width:0}
.c4it-loop-examples__metric{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #b9c2cf;border-radius:6px;background:#fff;padding:10px 12px;font-weight:700}
.c4it-loop-examples__metric strong{font-size:28px;color:#0f766e;line-height:1;text-align:right}
.c4it-loop-examples__rule{min-height:5em;border:1px solid #d8dee4;border-radius:6px;background:#fff;padding:10px;line-height:1.6}
.c4it-loop-examples__actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px}
.c4it-loop-examples button{border:1px solid #b9c2cf;background:#f6f8fa;color:#20242a;border-radius:6px;padding:9px 12px;font-weight:700;cursor:pointer;line-height:1.3}
.c4it-loop-examples button:hover{background:#0f766e;border-color:#0f766e;color:#fff}
.c4it-loop-examples__feedback{grid-area:feedback}
.c4it-loop-examples__status{min-height:4.5em;padding:10px;border-radius:6px;background:#fff;border:1px solid #d8dee4;line-height:1.6}
.c4it-loop-examples__status.is-done{border-color:#0f766e;color:#0f766e;background:#ecfdf5}
.c4it-loop-examples__history{min-height:7em;max-height:13em;overflow:auto;margin:10px 0 0;padding:10px 10px 10px 30px;border:1px solid #d8dee4;border-radius:6px;background:#fff;line-height:1.6}
.c4it-loop-examples__history li{margin:0 0 4px}
.c4it-loop-examples__chart{grid-area:chart;overflow:visible;padding:8px;min-width:0}
.c4it-loop-examples__svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;overflow:visible}
.c4it-loop-examples__svg marker path{fill:#64748b}
.c4it-loop-example-line{fill:none;stroke:#64748b;stroke-width:3;marker-end:url(#c4it-loop-example-arrow)}
.c4it-loop-example-node rect,.c4it-loop-example-node polygon{fill:#f8fafc;stroke:#64748b;stroke-width:3}
.c4it-loop-example-node--term rect{fill:#eef6ff}
.c4it-loop-example-node text{fill:#20242a;font-size:16px;font-weight:700;text-anchor:middle;dominant-baseline:middle}
.c4it-loop-example-label{fill:#475569;font-size:15px;font-weight:700}
.c4it-loop-example-note{fill:#475569;font-size:13px;font-weight:700}
.c4it-loop-example-node.is-active rect,.c4it-loop-example-node.is-active polygon{fill:#fff7ed;stroke:#ea580c;stroke-width:4}
.c4it-loop-example-node.is-done rect,.c4it-loop-example-node.is-done polygon{fill:#ecfdf5;stroke:#0f766e;stroke-width:4}
.c4it-loop-example-caption rect{fill:#f8fafc;stroke:#d8dee4;stroke-width:2}
.c4it-loop-example-caption text{fill:#475569;font-size:14px;font-weight:700;text-anchor:middle;dominant-baseline:middle}
@media (max-width:900px){.c4it-loop-examples__layout{grid-template-columns:1fr;grid-template-areas:"panel" "chart" "feedback";gap:10px}.c4it-loop-examples__chart{padding:0 4px}.c4it-loop-examples__svg{max-width:460px}.c4it-loop-examples__status{min-height:auto}.c4it-loop-examples__history{min-height:5em;max-height:10em}}
@media (max-width:520px){.c4it-loop-examples{padding:12px}.c4it-loop-examples__panel{padding:12px}.c4it-loop-examples__settings{grid-template-columns:1fr}.c4it-loop-examples__svg{max-width:100%}.c4it-loop-example-node text{font-size:14px}.c4it-loop-example-caption text{font-size:12px}.c4it-loop-examples__metric strong{font-size:24px}.c4it-loop-examples button{min-height:42px}}