.fo-steps {display: flex;list-style: none;margin: 0 0 16px;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: 12px 6px;max-width: 100%}
.fo-steps li {flex: 1;min-width: 0;text-align: center;position: relative;font-size: 11px;font-weight: 600;color: var(--color-text-light)}
.fo-steps li::before {content: attr(data-n);display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;margin: 0 auto 4px;border-radius: 50%;background: var(--color-bg-secondary);color: var(--color-text-muted);font-size: 12px;font-weight: 700;position: relative;z-index: 1}
.fo-steps li + li::after {content: "";position: absolute;top: 12px;right: 50%;width: 100%;height: 2px;background: var(--color-border)}
.fo-steps li.fo-step-done {color: var(--mode-facility)}
.fo-steps li.fo-step-done::before {content: "";background: var(--mode-facility)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
center / 14px no-repeat}
.fo-steps li.fo-step-now {color: var(--color-text-primary)}
.fo-steps li.fo-step-now::before {background: #fff;color: var(--mode-facility);box-shadow: 0 0 0 2px var(--mode-facility)}
.fo-steps li.fo-step-done + li::after,
.fo-steps li.fo-step-now::after {background: var(--mode-facility)}
@media (min-width: 768px) {.fo-steps {padding: 14px 40px}
.fo-steps li {font-size: 12.5px}}