#flow-stepper{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:1rem 2rem;background:var(--bg);border-bottom:1px solid var(--line);font-family:var(--font-ui);max-width:520px;margin:0 auto}.step-item{display:flex;flex-direction:column;align-items:center;gap:.35rem;position:relative;z-index:1;flex-shrink:0}.step-circle{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-strong);background:var(--bg);color:var(--muted);font-size:.75rem;font-weight:500;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.step-label{font-size:var(--text-xs);color:var(--muted);letter-spacing:.03em;transition:color .3s ease;white-space:nowrap}.step-connector{flex:1;height:2px;background:var(--line);min-width:32px;margin:0 .25rem 1.2rem;border-radius:1px;overflow:hidden}.connector-fill{height:100%;width:0%;background:var(--ink);transition:width .4s ease;border-radius:1px}.step-item.active .step-circle{border-color:var(--ink);background:var(--ink);color:var(--on-accent)}.step-item.active .step-label{color:var(--ink);font-weight:500}.step-item.completed .step-circle{border-color:var(--ink);background:var(--ink);color:var(--on-accent)}.step-item.completed .step-label{color:var(--ink)}.step-item.completed{cursor:pointer}.step-item.completed:hover .step-circle{opacity:.8}.step-item.completed:hover .step-label{text-decoration:underline}.step-connector.completed .connector-fill{width:100%}@media(max-width:600px){#flow-stepper{padding:.75rem 1rem;max-width:100%}.step-circle{width:24px;height:24px;font-size:var(--text-xs)}.step-label{font-size:var(--text-xs)}.step-connector{min-width:20px}}@media(max-width:600px){#flow-stepper{padding:.75rem;overflow:hidden}#flow-stepper .step-connector{min-width:12px;flex:1 1 0}#flow-stepper .step-label{font-size:var(--text-xs);letter-spacing:0}}