.auth-page{
    position:relative;
    min-height:calc(100vh - 190px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:55px 20px;
    overflow:hidden;
    background:#f5f9ff;
}

.auth-background{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.auth-grid{
    position:absolute;
    inset:0;
    opacity:.5;
    background-image:
        linear-gradient(rgba(35,125,230,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35,125,230,.06) 1px, transparent 1px);
    background-size:36px 36px;
}

.auth-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(2px);
    animation:authFloat 8s ease-in-out infinite;
}

.orb-one{
    width:380px;
    height:380px;
    top:-180px;
    right:-100px;
    background:radial-gradient(circle, rgba(37,128,235,.27), transparent 70%);
}

.orb-two{
    width:430px;
    height:430px;
    bottom:-250px;
    left:-140px;
    background:radial-gradient(circle, rgba(92,182,255,.28), transparent 70%);
    animation-delay:-4s;
}

.auth-card{
    position:relative;
    z-index:1;
    width:min(100%, 980px);
    min-height:540px;
    display:grid;
    grid-template-columns:42% 58%;
    overflow:hidden;
    border:1px solid rgba(29,113,219,.16);
    border-radius:28px;
    background:rgba(255,255,255,.88);
    box-shadow:0 25px 70px rgba(24,92,170,.16);
    backdrop-filter:blur(14px);
    animation:authCardIn .55s ease both;
}

.auth-card-side{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:52px 42px;
    overflow:hidden;
    color:#fff;
    background:
        linear-gradient(145deg, #0c4f9c, #1979d8 58%, #55b5ff);
}

.auth-card-side::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    left:-140px;
    bottom:-150px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
}

.auth-card-side::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    top:-100px;
    right:-90px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
}

.auth-brand-icon,
.auth-card-side h1,
.auth-card-side p,
.auth-benefits,
.auth-side-lines{
    position:relative;
    z-index:1;
}

.auth-brand-icon{
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:26px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:19px;
    background:rgba(255,255,255,.13);
    font-size:26px;
    animation:iconPulse 3s ease-in-out infinite;
}

.auth-card-side h1{
    margin:0 0 14px;
    font-size:29px;
}

.auth-card-side p{
    margin:0;
    color:rgba(255,255,255,.83);
    font-size:15px;
    line-height:2;
}

.auth-benefits{
    display:grid;
    gap:12px;
    margin-top:30px;
    font-size:14px;
}

.auth-benefits span{
    display:flex;
    align-items:center;
    gap:9px;
}

.auth-benefits i{
    color:#bde7ff;
}

.auth-side-lines{
    display:flex;
    gap:8px;
    margin-top:35px;
}

.auth-side-lines span{
    width:34px;
    height:4px;
    border-radius:20px;
    background:rgba(255,255,255,.35);
}

.auth-side-lines span:first-child{
    width:65px;
    background:#fff;
}

.auth-form-area{
    padding:35px 58px 45px;
}

.auth-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#6b7d92;
    font-size:13px;
    text-decoration:none;
    transition:.2s;
}

.auth-back:hover{
    color:#1675d1;
    transform:translateX(3px);
}

.auth-title{
    display:flex;
    align-items:center;
    gap:13px;
    margin:34px 0 30px;
}

.auth-mini-icon{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    color:#1475d1;
    background:#e8f4ff;
}

.auth-title h2{
    margin:0 0 5px;
    color:#163a60;
    font-size:23px;
}

.auth-title p{
    margin:0;
    color:#8291a3;
    font-size:13px;
}

.auth-form{
    display:grid;
    gap:17px;
}

.auth-form label{
    display:grid;
    gap:8px;
    color:#45617c;
    font-size:13px;
    font-weight:700;
}

.input-wrap{
    position:relative;
    display:block;
}

.input-wrap i{
    position:absolute;
    top:50%;
    right:15px;
    color:#7e9fc1;
    transform:translateY(-50%);
    transition:.2s;
}

.input-wrap input{
    box-sizing:border-box;
    width:100%;
    height:49px;
    padding:0 45px 0 15px;
    outline:none;
    border:1px solid #d8e5f1;
    border-radius:13px;
    color:#24425f;
    font-family:inherit;
    background:#fbfdff;
    transition:border .2s, box-shadow .2s, background .2s;
}

.input-wrap input:focus{
    border-color:#3998ed;
    background:#fff;
    box-shadow:0 0 0 4px rgba(46,145,237,.12);
}

.input-wrap:focus-within i{
    color:#1475d1;
}

.captcha-box{
    display:flex;
    justify-content:center;
    padding:10px 0 2px;
}

.auth-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:51px;
    cursor:pointer;
    border:0;
    border-radius:13px;
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:700;
    background:linear-gradient(135deg, #0f67bb, #2798ec);
    box-shadow:0 12px 22px rgba(26,126,222,.22);
    transition:.25s;
}

.auth-submit:hover{
    transform:translateY(-3px);
    box-shadow:0 17px 28px rgba(26,126,222,.3);
}

.auth-submit i{
    transition:.25s;
}

.auth-submit:hover i{
    transform:translateX(-4px);
}

.auth-switch{
    margin:3px 0 0;
    color:#778a9d;
    text-align:center;
    font-size:13px;
}

.auth-switch a{
    color:#1377d3;
    font-weight:700;
    text-decoration:none;
}

.auth-switch a:hover{
    text-decoration:underline;
}

@keyframes authFloat{
    0%,100%{ transform:translate(0,0); }
    50%{ transform:translate(-20px,25px); }
}

@keyframes authCardIn{
    from{
        opacity:0;
        transform:translateY(22px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes iconPulse{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
}

@media(max-width:760px){
    .auth-page{
        min-height:auto;
        padding:28px 14px;
    }

    .auth-card{
        grid-template-columns:1fr;
        border-radius:22px;
    }

    .auth-card-side{
        min-height:220px;
        padding:30px 28px;
    }

    .auth-card-side h1{
        font-size:23px;
    }

    .auth-benefits,
    .auth-side-lines{
        display:none;
    }

    .auth-form-area{
        padding:28px 22px 34px;
    }
}