/* ======================================================
   LOGIN PAGE
====================================================== */

body{
    font-family: 'Inter', sans-serif;
    background:#020617;
}

.login-page{
    background:
    radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.15), transparent 28%),
    #020617;
}

/* ======================================================
   LEFT PANEL
====================================================== */
.login-left{

    background:

    radial-gradient(circle at top,#2563eb33,transparent 30%),

    radial-gradient(circle at bottom,#06b6d433,transparent 35%),

    linear-gradient(135deg,#020617,#0f172a);

}

.login-left::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:rgba(37,99,235,.08);

    border-radius:50%;

    top:-250px;

    left:-250px;

    filter:blur(20px);

}

.login-left::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:35px 35px;

    opacity:.35;

}

/* ======================================================
   BRAND
====================================================== */

.brand-wrapper{

    position:relative;

    z-index:2;

    margin:auto;

    max-width:500px;

    text-align:center;

}

.brand-logo{

    width:130px;

    margin-bottom:35px;

}

.brand-title{

    color:#fff;

    font-size:52px;

    font-weight:800;

    letter-spacing:-1px;

    margin-bottom:18px;

}

.brand-subtitle{

    color:#94a3b8;

    font-size:20px;

    line-height:1.8;

}
/* ======================================================
   LOGIN PAGE
====================================================== */

body{
    font-family: 'Inter', sans-serif;
    background:#020617;
}

.login-page{
    background:
    radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.15), transparent 28%),
    #020617;
}

/* ======================================================
   LEFT PANEL
====================================================== */

.login-left{

    background:linear-gradient(135deg,#020617,#0f172a);

    position:relative;

    overflow:hidden;

}

.login-left::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:rgba(37,99,235,.08);

    border-radius:50%;

    top:-250px;

    left:-250px;

    filter:blur(20px);

}

.login-left::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:35px 35px;

    opacity:.35;

}

/* ======================================================
   BRAND
====================================================== */

.brand-wrapper{

    position:relative;

    z-index:2;

    margin:auto;

    max-width:500px;

    text-align:center;

}

.brand-logo{

    width:130px;

    margin-bottom:35px;

}

.brand-title{

    color:#fff;

    font-size:52px;

    font-weight:800;

    letter-spacing:-1px;

    margin-bottom:18px;

}

.brand-subtitle{

    color:#94a3b8;

    font-size:20px;

    line-height:1.8;

}

/* ======================================================
   LOGIN CARD
====================================================== */

.login-card{

    width:100%;

    max-width:470px;

   background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);

    border-radius:24px;

    padding:50px;

    box-shadow:

    0 25px 80px rgba(0,0,0,.25);

}

.login-logo{

    width:75px;

}

/* ======================================================
   FORM
====================================================== */

.form-label{

    font-weight:600;

    color:#334155;

}

.input-group{

    border-radius:14px;

    overflow:hidden;

}

.input-group-text{

    background:#fff;

    border-right:none;

    color:#64748b;

}

.form-control{

    border-left:none;

    height:58px;

    box-shadow:none!important;

}

.form-control:focus{

    border-color:#dee2e6;

}

.input-group:focus-within{

    box-shadow:0 0 0 .22rem rgba(37,99,235,.12);

}

/* ======================================================
   BUTTON
====================================================== */

.btn-primary{

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    border:none;

    height:58px;

    border-radius:14px;

    font-weight:700;

    transition:.25s;

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 35px rgba(37,99,235,.28);

}

/* ======================================================
   MOBILE
====================================================== */

@media(max-width:991px){

.login-page{

padding:30px;

}

.login-card{

padding:35px;

}

body{

background:#f5f7fb;

}

}

/* ======================================================
   LOGIN CARD
====================================================== */

.login-card{

    width:100%;

    max-width:470px;

    background:#fff;

    border-radius:24px;

    padding:50px;

    box-shadow:

    0 25px 80px rgba(0,0,0,.25);

}

.login-logo{

    width:75px;

}

/* ======================================================
   FORM
====================================================== */

.form-label{

    font-weight:600;

    color:#334155;

}

.input-group{

    border-radius:14px;

    overflow:hidden;

}

.input-group-text{

    background:#fff;

    border-right:none;

    color:#64748b;

}

.form-control{

    border-left:none;

    height:58px;

    box-shadow:none!important;

}

.form-control:focus{

    border-color:#dee2e6;

}

.input-group:focus-within{

    box-shadow:0 0 0 .22rem rgba(37,99,235,.12);

}

/* ======================================================
   BUTTON
====================================================== */

.btn-primary{

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    border:none;

    height:58px;

    border-radius:14px;

    font-weight:700;

    transition:.25s;

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 35px rgba(37,99,235,.28);

}

/* ======================================================
   MOBILE
====================================================== */

@media(max-width:991px){

.login-page{

padding:30px;

}

.login-card{

padding:35px;

}

body{

background:#f5f7fb;

}

}