:root{

    --primary:#1565C0;
    --primary-light:#2F80ED;
    --dark:#162338;

    --bg:#F5F8FC;

    --card:#ffffff;

    --border:#E8EDF5;

    --text:#24324A;

    --muted:#6B7280;

    --shadow:0 20px 60px rgba(21,101,192,.08);

    --radius:24px;

}


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    height:100%;

}

body{

    font-family:Inter,sans-serif;

    background:linear-gradient(180deg,#FAFCFF 0%,#F5F8FC 100%);

    color:var(--text);

    overflow-x:hidden;

}


/*--------------------------------------------------------------
BACKGROUND
--------------------------------------------------------------*/

.auth-wrapper{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.auth-background{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(30px);

}

.bg-circle-1{

    width:650px;

    height:650px;

    background:rgba(47,128,237,.10);

    top:-220px;

    left:-180px;

}

.bg-circle-2{

    width:500px;

    height:500px;

    background:rgba(21,101,192,.08);

    right:-120px;

    top:15%;

}

.bg-circle-3{

    width:350px;

    height:350px;

    background:rgba(47,128,237,.12);

    bottom:-120px;

    left:35%;

}


.auth-row{

    min-height:100vh;

    align-items:center;

}




/*--------------------------------------------------------------
LEFT PANEL
--------------------------------------------------------------*/
.auth-branding{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:80px;

}

.branding-content{

    width:100%;

    max-width:700px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.logo-wrapper{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.brand-logo{

    width:100%;

    max-width:480px;

    filter:

        drop-shadow(0 18px 40px rgba(21,101,192,.18));

}

.brand-description{

    font-size:1.15rem;

    color:var(--muted);

    line-height:1.8;

}


/*--------------------------------------------------------------
RIGHT
--------------------------------------------------------------*/

.auth-content{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:50px;

}

.login-panel{

    width:100%;

    max-width:430px;

    margin:auto;

}


.login-title{

    font-size:1.2rem;
    text-align: center;
    margin-bottom: 2rem;

    font-weight:700;

    color:#0f172a;

}



/*--------------------------------------------------------------
HEADINGS
--------------------------------------------------------------*/

.auth-card h2,
.auth-card h3,
.auth-card h4,
.auth-card h5{

    font-weight:700;

    color:var(--dark);

}

.auth-card p{

    color:var(--muted);

}


/*--------------------------------------------------------------
FORM
--------------------------------------------------------------*/

.form-floating{

    margin-bottom:22px;

}

.form-control{

    height:58px;

    border-radius:16px;

    border:1px solid #dbe4ef;

    padding:0 18px;

    font-size:1rem;

    background:#fff;

    transition:.25s;

}

.form-control:focus{

    border-color:#1976d2;

    box-shadow:

        0 0 0 .22rem rgba(25,118,210,.15);

}

.form-floating label{

    color:#6B7280;

}


/*--------------------------------------------------------------
BUTTON
--------------------------------------------------------------*/

.btn-primary{

    height:58px;

    border-radius:16px;

    font-weight:700;

    font-size:1rem;

    background:linear-gradient(

        135deg,

        #1565C0,

        #2196F3

    );

    border:none;

    box-shadow:

        0 12px 28px rgba(33,150,243,.25);

    transition:.25s;

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:

        0 18px 40px rgba(33,150,243,.35);

}


.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(21,101,192,.25);

}


/*--------------------------------------------------------------
CHECKBOX
--------------------------------------------------------------*/

.form-check{

    margin-top:10px;

    margin-bottom:20px;

}


/*--------------------------------------------------------------
ALERT
--------------------------------------------------------------*/

.alert{

    border-radius:16px;

}


/*--------------------------------------------------------------
MOBILE
--------------------------------------------------------------*/

@media(max-width:991px){

    .auth-row{

        min-height:auto;

        padding:25px 0;

    }

    .auth-branding{

        padding:20px;

    }

    .logo-wrapper{

        width:170px;

        height:170px;

    }

    .brand-logo{

        width:125px;

    }

    .auth-content{

        padding:15px;

    }

    .auth-card{

        background:transparent;

        backdrop-filter:none;

        box-shadow:none;

        border:none;

        padding:25px 15px;

        max-width:100%;

    }

}

@media(max-width:576px){

    .auth-content{

        padding:15px;

    }

    .auth-card{

        border-radius:20px;

        padding:30px 20px;

    }

}