:root{
    --clean-blue:#0757b7;
    --clean-blue-2:#0b83d8;
    --clean-dark:#0f172a;
    --clean-text:#243247;
    --clean-muted:#64748b;
    --clean-line:#dbe7f5;
    --clean-soft:#f6faff;
    --clean-card:#ffffff;
    --clean-shadow:0 24px 70px rgba(15,23,42,.11);
    --clean-radius:26px;
}

body{
    font-family:IRANSansFaNum,Tahoma,Arial,sans-serif!important;
    color:var(--clean-text)!important;
}

body,input,select,textarea,button{
    font-family:IRANSansFaNum,Tahoma,Arial,sans-serif!important;
}

main{
    padding-top:34px!important;
}

.ux-clean-steps{
    max-width:900px;
    margin:0 auto 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    direction:rtl;
}

.ux-clean-step{
    min-height:46px;
    padding:0 16px;
    border:1px solid var(--clean-line);
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:rgba(255,255,255,.76);
    color:#607086;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
    box-shadow:0 10px 24px rgba(15,23,42,.055);
}

.ux-clean-step-num{
    width:24px;
    height:24px;
    min-width:24px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#eef5fc;
    color:#607086;
    font-size:12px;
    font-weight:900;
}

.ux-clean-step.is-active{
    background:linear-gradient(135deg,var(--clean-blue),var(--clean-blue-2))!important;
    color:#fff!important;
    border-color:transparent!important;
    box-shadow:0 16px 34px rgba(7,87,183,.24);
}

.ux-clean-step.is-active .ux-clean-step-num{
    background:#fff!important;
    color:var(--clean-blue)!important;
}

.ux-auth-card{
    width:100%;
    max-width:760px;
    margin:22px auto 0;
    padding:0;
    border:1px solid rgba(219,231,245,.96);
    border-radius:var(--clean-radius);
    background:var(--clean-card);
    box-shadow:var(--clean-shadow);
    overflow:hidden;
}

.ux-auth-inner{
    padding:44px 48px 40px;
}

.ux-auth-title{
    margin:0 0 10px!important;
    color:var(--clean-dark)!important;
    font-size:30px!important;
    font-weight:900!important;
    line-height:1.45!important;
    letter-spacing:-.5px;
}

.ux-auth-subtitle{
    margin:0 0 30px!important;
    color:var(--clean-muted)!important;
    font-size:14px!important;
    line-height:2!important;
}

.ux-auth-form{
    width:100%;
    display:block!important;
}

.ux-auth-field{
    margin-bottom:16px;
}

.ux-auth-field label{
    display:block!important;
    margin:0 0 9px!important;
    color:#25354b!important;
    font-size:14px!important;
    font-weight:900!important;
}

.ux-auth-field input{
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    border:1px solid #d2e0ef!important;
    border-radius:18px!important;
    background:#fff!important;
    color:#111827!important;
    padding:11px 16px!important;
    font-size:16px!important;
    font-weight:800!important;
    outline:none!important;
    box-shadow:0 12px 30px rgba(15,23,42,.045)!important;
    transition:border-color .18s ease,box-shadow .18s ease;
}

.ux-auth-field input:focus{
    border-color:var(--clean-blue-2)!important;
    box-shadow:0 0 0 5px rgba(11,131,216,.14),0 16px 36px rgba(15,23,42,.08)!important;
}

.ux-auth-help{
    margin:8px 0 0!important;
    color:#6b7b90!important;
    font-size:13px!important;
    line-height:2!important;
}

.ux-auth-actions{
    margin-top:22px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.ux-auth-actions button,
.ux-auth-actions .btn{
    width:auto!important;
    min-width:190px!important;
    height:54px!important;
    min-height:54px!important;
    margin:0!important;
    border-radius:17px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.ux-auth-note{
    margin-top:22px;
    padding:14px 16px;
    border:1px solid #e3edf8;
    border-radius:18px;
    background:#f8fbff;
    color:#5d6f85;
    font-size:13px;
    line-height:2;
}

body.route-otp .ux-auth-field input[name="code"]{
    direction:ltr!important;
    text-align:center!important;
    letter-spacing:10px!important;
    font-size:24px!important;
    font-weight:900!important;
}

.ui-form-card,
.ui-enhanced-form{
    animation:none!important;
}

@media (max-width:900px){
    .ux-clean-steps{
        justify-content:flex-start;
        overflow-x:auto;
        padding:0 2px 8px;
        scrollbar-width:thin;
    }

    .ux-auth-card{
        max-width:720px;
    }
}

@media (max-width:640px){
    main{
        padding:22px 10px 44px!important;
    }

    .ux-auth-card{
        margin-top:14px;
        border-radius:21px;
    }

    .ux-auth-inner{
        padding:26px 18px 24px;
    }

    .ux-auth-title{
        font-size:23px!important;
    }

    .ux-auth-subtitle{
        font-size:13px!important;
        margin-bottom:22px!important;
    }

    .ux-auth-actions{
        justify-content:stretch;
    }

    .ux-auth-actions button,
    .ux-auth-actions .btn{
        width:100%!important;
        min-width:0!important;
    }

    .ux-clean-step{
        min-height:42px;
        padding:0 13px;
        font-size:12px;
    }

    .ux-clean-step-num{
        width:22px;
        height:22px;
        min-width:22px;
    }

    body.route-otp .ux-auth-field input[name="code"]{
        letter-spacing:7px!important;
        font-size:21px!important;
    }
}