/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --blue:#1a6ef5;
    --blueDark:#0f4fd4;

    --yellow:#ffe000;

    --bg:#07101d;

    --card:#101b2d;

    --text:#ffffff;

    --muted:#8fa6cb;

    --border:rgba(255,255,255,.08);
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;
}

body{

    font-family:'Montserrat',sans-serif;

    background:var(--bg);

    color:#fff;

    overflow:hidden;

    -webkit-font-smoothing:antialiased;
}

/* =========================================================
   APP
========================================================= */

.neo-auth-app{

    width:100%;

    height:100dvh;

    display:grid;

    grid-template-columns:1fr 480px;

    overflow:hidden;
}

/* =========================================================
   LEFT SIDE
========================================================= */

.neo-side{

    position:relative;

    overflow:hidden;

    padding:54px 64px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:
    linear-gradient(
    135deg,
    rgba(26,110,245,.08),
    rgba(255,224,0,.02));
}

/* =========================================================
   GRID
========================================================= */

.neo-grid{

    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:50px 50px;

    mask-image:
    radial-gradient(circle at center,
    black 30%,
    transparent 90%);

    opacity:.5;
}

/* =========================================================
   ORBS
========================================================= */

.neo-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.18;
}

.orb-one{

    width:300px;
    height:300px;

    background:#1a6ef5;

    top:-80px;
    right:-80px;
}

.orb-two{

    width:240px;
    height:240px;

    background:#ffe000;

    bottom:-80px;
    left:-80px;
}

/* =========================================================
   LOGO
========================================================= */

.neo-logo,
.neo-mobile-logo{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:14px;

    width:max-content;
}

.neo-mobile-logo{

    display:none;

    margin:0 auto 26px;
}

.neo-logo-icon{

    width:80px;
    height:62px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    rgba(255,224,0,.12),
    rgba(26,110,245,.18));

    border:
    1px solid rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    backdrop-filter:blur(12px);
}

.neo-logo-icon img{

    width:68px;
    height:40px;
}

.neo-logo-text{
    
    color: var(--yellow);

    font-size:30px;

    font-weight:900;
    
    text-decoration-line: underline;
}

.neo-logo-text span{

    color:white;
}

/* =========================================================
   CONTENT
========================================================= */

.neo-content{

    position:relative;

    z-index:2;

    max-width:620px;
}

.neo-badge{

    display:inline-flex;

    align-items:center;

    height:40px;

    padding:0 18px;

    border-radius:999px;

    background:
    rgba(255,255,255,.05);

    border:
    1px solid var(--border);

    color:var(--yellow);

    font-size:11px;

    font-weight:800;

    letter-spacing:.14em;

    margin-bottom:26px;
}

.neo-content h1{

    font-size:82px;

    line-height:.92;

    letter-spacing:-4px;

    font-weight:900;

    margin-bottom:24px;
}

.neo-content h1 span{

    color:var(--yellow);
}

.neo-content p{

    max-width:500px;

    color:var(--muted);

    font-size:18px;

    line-height:1.8;
}

/* =========================================================
   RIGHT SIDE
========================================================= */

.neo-form-side{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;
}

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

.neo-auth-card{

    width:100%;

    max-width:400px;

    padding:34px;

    border-radius:32px;

    background:
    rgba(12,20,34,.94);

    border:
    1px solid rgba(255,255,255,.08);

    box-shadow:
    0 25px 70px rgba(0,0,0,.45);

    backdrop-filter:blur(20px);
}

/* =========================================================
   HEAD
========================================================= */

.neo-form-head{

    margin-bottom:28px;
}

.neo-form-head h2{

    font-size:40px;

    font-weight:900;

    letter-spacing:-2px;

    margin-bottom:10px;
}

.neo-form-head p{

    color:var(--muted);

    font-size:14px;

    line-height:1.7;
}

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

#loginForm{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.neo-field label{

    display:block;

    margin-bottom:10px;

    font-size:13px;

    font-weight:700;
}

.neo-input-box{

    position:relative;
}

.fa-eye-slash{
    left: -8px !important;
}

.neo-input-box i{

    position:absolute;

    left:18px;
    top:50%;

    transform:translateY(-50%);

    color:#7d93b8;

    font-size:15px;
}

.neo-input{

    width:100%;

    height:56px;

    padding:0 52px;

    border-radius:18px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.08);

    color:#fff;

    font-size:14px;

    transition:.2s;
}

.neo-input:focus{

    border-color:
    rgba(255,224,0,.28);

    box-shadow:
    0 0 0 4px rgba(255,224,0,.06);
}

.neo-input::placeholder{

    color:#7188af;
}

/* =========================================================
   TOGGLE
========================================================= */

.neo-toggle{

    position:absolute;

    right:18px;
    top:50%;

    transform:translateY(-50%);

    background:none;

    color:#7d93b8;

    cursor:pointer;
}

/* =========================================================
   OPTIONS
========================================================= */

.neo-options{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;
}

.neo-remember{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--muted);

    font-size:13px;
}

.neo-remember input{

    accent-color:var(--yellow);
}

.neo-forgot{

    color:var(--yellow);

    font-size:13px;

    font-weight:700;
}

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

.neo-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    var(--yellow),
    #ffbf00);

    color:#111;

    font-size:15px;

    font-weight:900;

    cursor:pointer;

    transition:.2s;
}

.neo-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 12px 30px rgba(255,224,0,.18);
}

/* =========================================================
   FOOTER
========================================================= */

.neo-footer{

    margin-top:24px;

    text-align:center;

    color:var(--muted);

    font-size:14px;
}

.neo-footer a{

    color:var(--yellow);

    font-weight:800;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .neo-auth-app{

        grid-template-columns:1fr;
    }

    .neo-side{

        display:none;
    }

    .neo-mobile-logo{

        display:flex;
    }

    .neo-form-side{

        width:100%;

        height:100dvh;

        padding:20px;
    }
}

@media(max-width:520px){

    .neo-auth-card{

        padding:28px 22px;

        border-radius:28px;
    }

    .neo-form-head h2{

        font-size:34px;
    }

    .neo-input{

        height:54px;
    }

    .neo-btn{

        height:54px;
    }

    .neo-logo-icon{

        width:60px;
        height:58px;
    }

    .neo-logo-icon img{

        width:48px;
        height:28px;
    }

    .neo-logo-text{

        font-size:24px;
    }
}