.step-progress-container{position:relative;overflow:hidden}.step-circle{position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.step-circle:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#3b82f6,#8b5cf6,#ec4899,#3b82f6);border-radius:50%;opacity:0;transition:opacity .3s ease;z-index:-1}.step-circle:hover:before{opacity:1;animation:rotate 2s linear infinite}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.step-success{animation:pulse-green 2s infinite}@keyframes pulse-green{0%,to{box-shadow:0 0 0 0 rgba(34,197,94,.7)}50%{box-shadow:0 0 0 10px rgba(34,197,94,0)}}.step-current{animation:pulse-blue 2s infinite}@keyframes pulse-blue{0%,to{box-shadow:0 0 0 0 rgba(59,130,246,.7)}50%{box-shadow:0 0 0 10px rgba(59,130,246,0)}}.progress-shimmer{background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);background-size:200% 100%;animation:shimmer 2s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.gradient-text{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dark .step-circle{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.dark .step-circle:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}@media (max-width:768px){.step-circle{width:2.5rem;height:2.5rem;font-size:.875rem}.step-title{font-size:.75rem}.step-description{font-size:.625rem}}.step-container *{transition:all .2s cubic-bezier(.4,0,.2,1)}.step-circle:focus{outline:2px solid #3b82f6;outline-offset:2px}.step-loading{position:relative}.step-loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #f3f4f6;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}