.crm-run { --crm-run-accent:#2457ff; font:14px/1.5 system-ui,sans-serif; color:#27354d; } .crm-run * { box-sizing:border-box; } .crm-run [hidden] { display:none!important; } .crm-run-title { margin:0 0 5px; font:600 19px/1.4 system-ui,sans-serif; } .crm-run-meta { color:#687992; font-size:11px; margin:0 0 16px; } .crm-run-status { color:#3559a7; border:1px solid #dce6fd; background:#f0f5ff; border-radius:7px; padding:10px 12px; font-size:12px; }
.crm-run-progress { appearance:none; width:100%; height:7px; border:0; border-radius:8px; overflow:hidden; accent-color:var(--crm-run-accent); background:#e8eef9; } .crm-run-progress::-webkit-progress-bar { background:#e8eef9; border-radius:8px; } .crm-run-progress::-webkit-progress-value { background:var(--crm-run-accent); border-radius:8px; } .crm-run-progress::-moz-progress-bar { background:var(--crm-run-accent); } .crm-run-progress-label { text-align:right; font-size:10px; color:#6d80a1; margin:5px 0 18px; }
.crm-run-steps { list-style:none; padding:0; margin:0; counter-reset:steps; } .crm-run-step { display:flex; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid #e8edf5; counter-increment:steps; font-size:12px; } .crm-run-step:before { content:counter(steps,decimal-leading-zero); display:grid; place-items:center; width:27px; height:27px; border:1px solid #dce5f4; border-radius:50%; color:#7c90b0; background:#f5f8fd; font-size:9px; flex-shrink:0; } .crm-run-step.is-complete:before { content:'✓'; background:#eaf4ee; color:#3c7e59; border-color:#cde6d7; } .crm-run-step.is-running:before { border-color:#b7cbff; color:#2457ff; background:#eef3ff; } .crm-run-step small { margin-left:auto; color:#74849b; font-size:10px; white-space:nowrap; } .crm-run-step > span { overflow-wrap:anywhere; } .crm-run-detail { font-size:12px; line-height:1.7; color:#687c9b; min-height:22px; } .crm-run-error { color:#903b33; background:#fff5f2; border-left:3px solid #c97262; padding:10px; font-size:12px; overflow-wrap:anywhere; } .crm-run-actions { display:flex; gap:10px; } .crm-run-actions button { min-height:44px; padding:10px 14px; border:1px solid #dce4ef; border-radius:7px; background:white; color:#556983; cursor:pointer; font:500 12px system-ui,sans-serif; } .crm-run-actions .crm-run-retry { background:var(--crm-run-accent); border-color:var(--crm-run-accent); color:white; } .crm-run button:disabled { opacity:.5; cursor:default; } .crm-run :focus-visible { outline:3px solid var(--crm-run-accent); outline-offset:3px; } .crm-run[data-status=succeeded] .crm-run-status { background:#eaf4ee; border-color:#cde6d7; color:#32714f; }
@media(prefers-reduced-motion:reduce) { .crm-run progress { animation:none!important; transition:none!important; } }