.gradient-bg {
    background: linear-gradient(135deg,#e3f2fd,#fff,#e8f5e8);
    min-height: 100vh
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.5rem
}

.otp-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem
}

.otp-input {
    width: 48px;
    height: 48px;
    font-size: 1.25rem
}

.otp-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 .2rem #0d6efd40
}

.otp-input.filled {
    border-color: #0d6efd
}

.progress-step {
    display: flex;
    align-items: center;
    flex: 1
}

.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: .875rem;
    margin: 0 auto
}

.progress-step.active .step-circle,.progress-step.completed .step-circle {
    background-color: #0d6efd;
    color: #fff
}

.progress-line {
    height: 4px;
    background-color: #e9ecef;
    flex: 1;
    margin: 0 8px
}

.progress-step.completed+.progress-line {
    background-color: #0d6efd
}

.category-btn {
    border: 2px solid #dee2e6;
    background: #fff;
    color: #6c757d;
    transition: all .2s ease
}

.category-btn:hover {
    border-color: #0d6efd;
    color: #0d6efd;
    transform: translateY(-2px)
}

.category-btn.selected {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: #fff
}

.upload-area {
    cursor: pointer;
    transition: all .2s ease
}

.upload-area:hover {
    border-color: #0d6efd!important;
    background-color: #0d6efd0d
}

.success-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 3rem
}

@media (max-width: 768px) {
    .progress-step {
        flex-direction:column
    }

    .progress-line {
        display: none
    }

    .otp-input {
        width: 40px;
        height: 40px;
        font-size: 1rem
    }
}

.fade-in {
    animation: fadeIn .5s ease-in
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}