:host {
    display: block;
    margin-bottom: var(--space-4, 1rem);
}

.steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    row-gap: var(--space-1, 0.25rem);
}

.step {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #8892A0);
    white-space: nowrap;
}

.step--active {
    color: var(--color-primary, #4ECDC4);
    font-weight: var(--weight-semibold, 600);
    cursor: pointer;
}

.step--completed {
    color: var(--color-success, #4ECDC4);
    cursor: pointer;
}

.step--completed:hover .dot--completed {
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2);
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-text-secondary, #8892A0);
    background: transparent;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
}

.dot--active {
    border-color: var(--color-primary, #4ECDC4);
    background: var(--color-primary, #4ECDC4);
}

.dot--completed {
    border-color: var(--color-success, #4ECDC4);
    background: var(--color-success, #4ECDC4);
    color: var(--color-bg, #1A1A2E);
}

.line {
    flex: 1 1 20px;
    height: 2px;
    background: var(--color-border, rgba(78, 205, 196, 0.15));
    min-width: 12px;
}

.line--completed {
    background: var(--color-success, #4ECDC4);
}

.label {
    font-size: var(--text-small, 0.75rem);
    color: var(--color-text-secondary, #8892A0);
    margin-top: var(--space-2, 0.5rem);
}

@media (max-width: 480px) {
    .steps { gap: var(--space-1, 0.25rem); }
    .step  { font-size: var(--text-small, 0.75rem); }
    .step__label { display: none; }
}
