.step-indicator {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-4); flex-wrap: nowrap; overflow-x: auto;
    padding: 0 var(--space-1);
}
.step-indicator__item { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.step-indicator__dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-sm); font-weight: 700;
    border: 2px solid var(--color-border); color: var(--color-text-secondary);
    background: var(--color-bg);
}
.step-indicator__item--active .step-indicator__dot {
    border-color: var(--color-primary); color: var(--color-primary);
}
.step-indicator__item--done .step-indicator__dot {
    border-color: var(--color-primary); background: var(--color-primary); color: #fff;
}
.step-indicator__label {
    font-size: 0.7rem; margin-top: var(--space-1); color: var(--color-text-secondary);
    white-space: nowrap;
}
.step-indicator__item--active .step-indicator__label { color: var(--color-text); font-weight: 600; }

.step-indicator__line {
    width: 24px; height: 2px; margin: 0 4px; margin-bottom: 18px; flex-shrink: 0;
    background: var(--color-border);
}
.step-indicator__line--done { background: var(--color-primary); }

@media (min-width: 480px) {
    .step-indicator__line { width: 40px; }
    .step-indicator__label { font-size: var(--font-size-sm); }
}