.state-timeline-bar { display: flex; height: 24px; overflow: hidden; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); }
.state-segment { display: inline-block; min-width: 0; height: 100%; flex-basis: 0; }
.state-idle { background: #9cadba; }
.state-waiting { background: #d5a349; }
.state-fault { background: #bd3131; }
.state-hold { background: #a76a36; }
.state-paused { background: #c97865; }
.state-running { background: #167d77; }
.state-welding { background: #2b56a1; }
.state-moving { background: #6c9a56; }
.state-unknown { background: #59636d; }
.state-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 24px; font-size: .75rem; }
.state-legend span { display: inline-flex; align-items: center; gap: 6px; }
.state-legend i { width: 11px; height: 11px; border-radius: 2px; }