html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#f7f7fa;color:#222}
header{padding:12px 20px;background:#fff;border-bottom:1px solid #e3e3eb;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
header h1{margin:0;font-size:18px;font-weight:600}
.status{color:#bbb;margin-left:6px;font-size:16px}
.status.ok{color:#2fb65c}
.status.err{color:#d94343}
.counters{display:flex;gap:14px;margin-left:auto;font-size:12px;font-family:ui-monospace,Consolas,monospace;color:#444;align-items:center;flex-wrap:wrap}
.counters .cglobal{background:#eef;padding:4px 10px;border-radius:6px}
.counters .cagent{padding:4px 10px;border-radius:6px;border:1px solid transparent}
.counters .cagent[data-agent=commerciale]{background:#ffe7e3;border-color:#FF7A6B}
.counters .cagent[data-agent=ingenieur]{background:#e3ecf7;border-color:#4A7BAA}
.counters .cagent[data-agent=comptable]{background:#eaefd9;border-color:#7B8B5A}
.counters b{color:#222}
main{display:grid;grid-template-columns:1fr 380px;gap:20px;padding:20px;height:calc(100vh - 70px);box-sizing:border-box}
#stage{width:100%;height:100%;background:#fff;border-radius:12px;border:1px solid #e3e3eb}
.edge{stroke:#d0d0dc;stroke-width:2}
.node circle{stroke:#2b2b4a;stroke-width:2;transform-origin:center;transition:transform .1s}
.node text{text-anchor:middle;font-size:14px;font-weight:600;pointer-events:none}
.node text.sub{font-size:10px;font-weight:400}
@keyframes pulse-anim{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.node.pulse circle{animation:pulse-anim 1.6s ease-in-out}
.timeline{background:#fff;border-radius:12px;border:1px solid #e3e3eb;padding:12px 16px;overflow-y:auto;min-height:0}
.timeline h2{margin:0 0 8px 0;font-size:14px;color:#555}
.timeline ul{list-style:none;padding:0;margin:0;font-family:ui-monospace,Consolas,monospace;font-size:11px;line-height:1.5}
.timeline li{padding:5px 0;border-bottom:1px dashed #eee;color:#333;word-break:break-word}
.timeline li .ts{color:#888;margin-right:6px}
.timeline li .type.in{color:#2fb65c;min-width:60px;display:inline-block;font-weight:600}
.timeline li .type.out{color:#3b82f6;min-width:60px;display:inline-block;font-weight:600}
.timeline li .agent{font-weight:600}
.timeline li .agent-commerciale{color:#d85542}
.timeline li .agent-ingenieur{color:#2f5580}
.timeline li .agent-comptable{color:#5a6c3f}
.timeline li .addr{color:#666}
.timeline li .subj{color:#555;font-style:italic}