.modalmask{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at top left,rgba(58,123,213,.18),transparent 38%),
        radial-gradient(circle at bottom right,rgba(120,98,255,.22),transparent 34%),
        rgba(8,15,24,.78);
    z-index:99999;
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px;
    perspective:2200px;
}
.modalmask.op{
    opacity:1;
    pointer-events:auto;
}
.modalbox{
    position:relative;
    width:min(980px,100%);
    min-height:min(650px,calc(100vh - 8px));
    display:grid;
    grid-template-columns:minmax(255px,330px) minmax(0,1fr);
    grid-template-rows:1fr;
    border-radius:5px;
    overflow:hidden;
    background:#f4f7fb;
    box-shadow:0 28px 80px rgba(0,0,0,.38);
    transform:translate3d(0,16px,-80px) rotateX(12deg) scale(.965);
    transform-style:preserve-3d;
    opacity:0;
    transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.modalmask.op .modalbox{
    transform:translate3d(0,0,0) rotateX(0deg) scale(1);
    opacity:1;
}
.movedown{margin:0;}
.modalmask.op .movedown{margin:0;}
.close{
    position:absolute;
    top:4px;
    right:4px;
    width:32px;
    height:32px;
    border-radius:5px;
    background:rgba(255,255,255,.18);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    line-height:1;
    z-index:9;
    transition:all .2s ease;
}
.close:hover{
    background:#ffffff;
    color:#11263b;
}
.modal__cover{
    position:relative;
    isolation:isolate;
    background:
        linear-gradient(145deg,rgba(7,23,44,.95),rgba(32,83,134,.82)),
        url('../../Img/login.jpg') center/cover no-repeat;
    color:#fff;
    padding:5px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:5px;
    overflow:hidden;
}
.modal__cover::after{
    content:'';
    position:absolute;
    inset:auto -18% -24% auto;
    width:240px;
    height:240px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 0 0 20px rgba(255,255,255,.03),0 0 0 42px rgba(255,255,255,.02);
    animation:evt-orbit 9s linear infinite;
    z-index:-1;
}
.modal__cover-orb{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.32),rgba(255,255,255,0));
    filter:blur(2px);
    z-index:-1;
    animation:evt-float 7.5s ease-in-out infinite;
}
.modal__cover-orb--lg{
    width:160px;
    height:160px;
    top:-24px;
    left:-30px;
}
.modal__cover-orb--sm{
    width:100px;
    height:100px;
    bottom:18px;
    right:20px;
    animation-duration:6.4s;
    animation-delay:-1.8s;
}
.modal__eyebrow{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:rgba(255,255,255,.92);
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:11px;
    font-weight:bold;
    width:max-content;
    backdrop-filter:blur(6px);
}
.modal__brand{
    display:flex;
    flex-direction:column;
    gap:4px;
    position:relative;
    z-index:1;
}
.modal__brand h2{
    margin:0;
    font-size:30px;
    line-height:1.02;
}
.modal__brand p{
    margin:0;
    color:rgba(255,255,255,.86);
    font-size:13px;
    line-height:1.28;
    max-width:290px;
}
.modal__feature{
    display:grid;
    gap:4px;
    position:relative;
    z-index:1;
}
.modal__feature span{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:13px;
    color:rgba(255,255,255,.88);
    padding:4px 5px;
    border-radius:5px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(6px);
}
.modal__panel{
    position:relative;
    background:
        linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,247,251,.96)),
        #ffffff;
    padding:5px;
    display:flex;
    flex-direction:column;
    gap:5px;
    overflow:hidden;
}
.modal__panel::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 12% 12%,rgba(41,89,134,.08),transparent 26%),
        radial-gradient(circle at 85% 88%,rgba(112,87,255,.08),transparent 24%);
    pointer-events:none;
}
.modal__head{
    position:relative;
    z-index:1;
    color:#11263b;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.modal__head h3{
    margin:0;
    font-size:22px;
}
.modal__head p{
    margin:0;
    color:#617085;
    font-size:13px;
}
.modal__tabs{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    padding:4px;
    border-radius:999px;
    background:rgba(17,38,59,.06);
    backdrop-filter:blur(8px);
}
.modal__tab{
    border:none;
    border-radius:999px;
    background:transparent;
    color:#19324b;
    font-size:13px;
    font-weight:bold;
    padding:5px;
    min-height:34px;
    cursor:pointer;
    transition:all .2s ease;
}
.modal__tab:hover{
    background:rgba(25,50,75,.08);
}
.modal__tab.is-active{
    background:linear-gradient(135deg,#19324b,#295986);
    color:#fff;
    box-shadow:0 8px 20px rgba(25,50,75,.18);
}
.modal__body{
    position:relative;
    z-index:1;
    flex:1;
    display:flex;
    min-height:440px;
}
.modal__stack{
    position:relative;
    flex:1;
    min-height:440px;
    perspective:1800px;
    transform-style:preserve-3d;
}
.auth__pane{
    position:absolute;
    inset:0;
    transition:
        transform .72s cubic-bezier(.22,.88,.24,1),
        opacity .38s ease,
        filter .38s ease,
        z-index 0s linear;
    transform-style:preserve-3d;
    will-change:transform, opacity;
    cursor:pointer;
}
.auth__pane[data-auth-position="left"]{
    transform:translate3d(-58px,0,-130px) rotateY(18deg) scale(.955);
    opacity:.46;
    filter:saturate(.84);
    z-index:1;
}
.auth__pane[data-auth-position="center"]{
    transform:translate3d(0,0,0) rotateY(0deg) scale(1);
    opacity:1;
    filter:none;
    z-index:3;
    cursor:default;
}
.auth__pane[data-auth-position="right"]{
    transform:translate3d(58px,0,-130px) rotateY(-18deg) scale(.955);
    opacity:.46;
    filter:saturate(.84);
    z-index:2;
}
.auth__card{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:5px;
    border-radius:5px;
    border:1px solid rgba(25,50,75,.08);
    background:linear-gradient(180deg,#ffffff,#f7faff);
    box-shadow:0 20px 48px rgba(17,38,59,.15);
    overflow:hidden;
    transform-style:preserve-3d;
}
.auth__card::before{
    content:'';
    position:absolute;
    inset:-35% 42% auto -18%;
    height:150px;
    background:radial-gradient(circle,rgba(41,89,134,.12),rgba(41,89,134,0));
    pointer-events:none;
}
.auth__pane[data-auth-position="center"] .auth__card{
    box-shadow:0 24px 54px rgba(17,38,59,.2);
}
.auth__pane:not(.is-active) .auth__card{
    pointer-events:none;
}
.auth__card-head{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:5px;
    padding-bottom:5px;
    border-bottom:1px solid rgba(25,50,75,.08);
}
.auth__card-head h4{
    margin:0;
    color:#11263b;
    font-size:20px;
    line-height:1.08;
}
.auth__card-head p{
    margin:0;
    color:#617085;
    font-size:13px;
    line-height:1.28;
}
.auth__kicker{
    display:inline-flex;
    align-items:center;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(41,89,134,.08);
    color:#295986;
    font-size:11px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.07em;
    margin-bottom:4px;
}
.auth__step{
    min-width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#19324b,#295986);
    color:#fff;
    font-size:12px;
    font-weight:bold;
    box-shadow:0 10px 20px rgba(25,50,75,.18);
}
.auth__form{
    display:flex;
    flex-direction:column;
    gap:5px;
    flex:1;
}
.auth__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
}
.span-2{grid-column:span 2;}
.evt-field{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}
.evt-field input,
.evt-field textarea,
.evt-field select{
    width:100%;
    border:1px solid #dbe4ef;
    background:rgba(247,250,255,.96);
    color:#19324b;
    border-radius:5px;
    padding:18px 36px 5px 10px;
    outline:none;
    min-height:44px;
    font-size:14px;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.evt-field textarea{
    min-height:92px;
    resize:vertical;
}
.evt-field input:focus,
.evt-field textarea:focus,
.evt-field select:focus{
    border-color:#295986;
    box-shadow:0 0 0 1px rgba(41,89,134,.12),0 10px 18px rgba(41,89,134,.08);
    background:#ffffff;
    transform:translateY(-1px);
}
.evt-field label{
    position:absolute;
    top:13px;
    left:10px;
    color:#6f8093;
    font-size:14px;
    transition:top .2s ease,font-size .2s ease,color .2s ease;
    pointer-events:none;
}
.evt-field input:focus + label,
.evt-field input:not(:placeholder-shown) + label,
.evt-field textarea:focus + label,
.evt-field textarea:not(:placeholder-shown) + label,
.evt-field select:focus + label,
.evt-field select.has-value + label,
.evt-field select:not([value=""]) + label{
    top:5px;
    font-size:11px;
    color:#295986;
}
.evt-field__icon,
.evt-field__toggle{
    position:absolute;
    right:10px;
    top:14px;
    color:#295986;
    font-size:15px;
}
.evt-field__icon{
    pointer-events:none;
}
.evt-field__toggle{
    border:none;
    background:transparent;
    padding:0;
    cursor:pointer;
    transition:transform .2s ease,color .2s ease;
}
.evt-field__toggle:hover{
    color:#11263b;
    transform:scale(1.05);
}
.evt-field__toggle.is-on{
    color:#11263b;
}
.evt-field__hint{
    color:#728295;
    font-size:12px;
    line-height:1.24;
    margin-top:1px;
    padding:4px 5px;
    border-radius:5px;
    background:rgba(41,89,134,.06);
}
.evt-check{
    display:flex;
    align-items:center;
    gap:4px;
    color:#32485e;
    font-size:13px;
}
.auth__actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:4px;
    margin-top:auto;
}
.form__btn,
.evt-btn,
.evt-btn-light,
.evt-quick-btn,
.evt-mini-btn{
    border:none;
    border-radius:5px;
    cursor:pointer;
    font-weight:bold;
    transition:all .2s ease;
}
.form__btn,
.evt-btn,
.evt-quick-btn{
    background:linear-gradient(135deg,#19324b,#295986);
    color:#fff;
    padding:5px 10px;
    min-height:34px;
    box-shadow:0 10px 20px rgba(25,50,75,.16);
}
.form__btn:hover,
.evt-btn:hover,
.evt-quick-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 22px rgba(25,50,75,.2);
}
.evt-btn-light{
    background:rgba(25,50,75,.06);
    color:#19324b;
    padding:5px 10px;
    min-height:34px;
}
.evt-btn-light:hover{
    background:rgba(25,50,75,.1);
}
.evt-mini-btn{
    background:#eef3f9;
    color:#19324b;
    padding:3px 7px;
    font-size:12px;
    min-height:28px;
}
.evt-mini-btn:hover{background:#dde7f2;}
.modal__foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:5px;
    color:#728295;
    font-size:12px;
}
.modal__foot a{color:#295986;}

@keyframes evt-orbit{
    0%{transform:rotate(0deg) scale(1);}
    50%{transform:rotate(180deg) scale(1.03);}
    100%{transform:rotate(360deg) scale(1);}
}
@keyframes evt-float{
    0%,100%{transform:translate3d(0,0,0);}
    50%{transform:translate3d(0,-10px,0);}
}

@media (max-width: 960px){
    .modalbox{
        grid-template-columns:minmax(220px,280px) minmax(0,1fr);
    }
    .auth__pane[data-auth-position="left"]{
        transform:translate3d(-42px,0,-110px) rotateY(16deg) scale(.96);
    }
    .auth__pane[data-auth-position="right"]{
        transform:translate3d(42px,0,-110px) rotateY(-16deg) scale(.96);
    }
}
@media (max-width: 860px){
    .modalbox{
        grid-template-columns:1fr;
        min-height:auto;
        max-height:calc(100vh - 8px);
        overflow:auto;
    }
    .modal__cover{
        min-height:200px;
    }
    .modal__body,
    .modal__stack{
        min-height:460px;
    }
}
@media (max-width: 720px){
    .modalbox{
        width:100%;
        min-height:auto;
        transform:translate3d(0,14px,0) scale(.985);
    }
    .modal__tabs{
        grid-template-columns:1fr;
        border-radius:5px;
    }
    .modal__body,
    .modal__stack{
        min-height:auto;
    }
    .auth__pane{
        position:relative;
        inset:auto;
        display:none;
        transform:none !important;
        opacity:1 !important;
        filter:none !important;
        cursor:default;
    }
    .auth__pane.is-active{
        display:block;
    }
    .auth__card{
        min-height:auto;
        box-shadow:0 18px 30px rgba(17,38,59,.12);
    }
}
@media (max-width: 640px){
    .auth__grid{grid-template-columns:1fr;}
    .span-2{grid-column:auto;}
    .auth__actions{
        flex-direction:column;
        align-items:stretch;
    }
    .form__btn,
    .evt-btn-light{
        width:100%;
    }
}