.step-indicator { display: flex; flex-direction: column; align-items: center; position: relative; }
.step-number { width: 40px; height: 40px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-bottom: 8px; transition: all 0.3s ease; }
.step-indicator.active .step-number { background: #dc2626; color: white; }
.step-indicator.completed .step-number { background: #10b981; color: white; }
.step-label { font-size: 12px; font-weight: 500; color: #6b7280; text-align: center; max-width: 80px; }
.step-indicator.active .step-label { color: #dc2626; font-weight: 600; }
.step-connector { width: 40px; height: 2px; background: #e5e7eb; margin: 0 5px; }
@media (max-width: 768px) { .step-connector { width: 20px; } .step-label { font-size: 10px; max-width: 60px; } }