.step-flow{display:flex;align-items:center;gap:24px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}.step-flow:hover{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}.step-flow::-webkit-scrollbar{height:6px;opacity:0}.step-flow::-webkit-scrollbar-track{background:transparent}.step-flow::-webkit-scrollbar-thumb{background-color:transparent;border-radius:3px}.step-flow:hover::-webkit-scrollbar-thumb{background-color:var(--color-border)}.step-flow-step{display:flex;align-items:center;gap:8px;background:transparent;border:none;padding:0;cursor:pointer;font:inherit;width:100%}.step-flow-divider{background:lightgray;height:1px;margin:16px 0 24px}.step-flow-circle{width:32px;height:32px;border-radius:999px;border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-weight:600;background:var(--color-bg);color:var(--color-border);flex-shrink:0}.step-flow-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-secondary);white-space:nowrap}.step-flow-arrow{flex:1 1;height:2px;background:var(--color-border);position:relative}.step-flow-arrow:after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);border-width:5px 0 5px 8px;border-style:solid;border-color:transparent transparent transparent var(--color-border)}.step-flow-step-active .step-flow-circle,.step-flow-step-completed .step-flow-circle{background:var(--color-brand);border-color:var(--color-brand);color:var(--color-bg)}.step-flow-step-completed{cursor:pointer;pointer-events:auto}.step-flow-step-disabled{opacity:.4;cursor:default;pointer-events:none}@media (max-width:640px){.step-flow{gap:12px}.step-flow-label{font-size:10px}.step-flow-circle{width:28px;height:28px}}