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

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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:
        #050b14;

    color:
        #ffffff;

    min-height:
        100vh;

    overflow-x:
        hidden;

}


a {
    text-decoration: none;
}


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

.bg-grid {

    position: fixed;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(30, 144, 255, 0.04)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(30, 144, 255, 0.04)
            1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    pointer-events:
        none;

    z-index:
        -2;

}


/* ======================================
   GLOW EFFECTS
====================================== */

.glow {

    position: fixed;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    background:
        rgba(
            0,
            198,
            255,
            0.08
        );

    filter:
        blur(120px);

    pointer-events:
        none;

    z-index:
        -1;

}


.glow-one {

    top:
        -250px;

    left:
        -200px;

}


.glow-two {

    right:
        -250px;

    bottom:
        -250px;

}


/* ======================================
   AUTH CONTAINER
====================================== */

.auth-container {

    min-height:
        100vh;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

}


/* ======================================
   LEFT INFORMATION
====================================== */

.auth-info {

    padding:
        50px
        8%;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    background:
        linear-gradient(
            145deg,
            rgba(
                30,
                144,
                255,
                0.08
            ),
            transparent
        );

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.brand strong {

    color:
        #1e90ff;

}


.brand-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #1e90ff,
            #00c6ff
        );

    color:
        white;

    font-weight:
        bold;

    box-shadow:
        0 10px 30px
        rgba(
            30,
            144,
            255,
            0.25
        );

}


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

.info-content {

    max-width:
        550px;

}


.auth-badge {

    display:
        inline-block;

    padding:
        9px
        16px;

    border:
        1px solid
        rgba(
            0,
            198,
            255,
            0.25
        );

    border-radius:
        30px;

    color:
        #00c6ff;

    background:
        rgba(
            0,
            198,
            255,
            0.06
        );

    font-size:
        12px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    margin-bottom:
        25px;

}


.info-content h1 {

    font-size:
        clamp(
            45px,
            5vw,
            75px
        );

    line-height:
        1;

    margin-bottom:
        25px;

}


.info-content h1 span {

    display:
        block;

    color:
        #1e90ff;

}


.info-content > p {

    color:
        #9dafc2;

    font-size:
        17px;

    line-height:
        1.8;

}


/* ======================================
   REWARD HIGHLIGHT
====================================== */

.reward-highlight {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        35px;

    padding:
        20px;

    border:
        1px solid
        rgba(
            0,
            198,
            255,
            0.15
        );

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            0.03
        );

}


.reward-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            30,
            144,
            255,
            0.1
        );

    border-radius:
        12px;

    font-size:
        25px;

}


.reward-highlight strong {

    font-size:
        18px;

    color:
        #00c6ff;

}


.reward-highlight p {

    color:
        #8293a7;

    font-size:
        13px;

    margin-top:
        5px;

}


/* ======================================
   BENEFITS
====================================== */

.benefits {

    margin-top:
        35px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;

}


.benefit-item {

    display:
        flex;

    gap:
        15px;

}


.benefit-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(
            30,
            144,
            255,
            0.1
        );

}


.benefit-item h3 {

    font-size:
        15px;

    margin-bottom:
        5px;

}


.benefit-item p {

    color:
        #8293a7;

    font-size:
        13px;

    line-height:
        1.5;

}


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

.auth-footer-info p {

    color:
        #53677d;

    font-size:
        12px;

}


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

.auth-form-section {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        50px;

}


.auth-card {

    width:
        100%;

    max-width:
        480px;

}


.signup-card {

    max-width:
        520px;

}


.mobile-brand {

    display:
        none;

}


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

.form-header {

    margin-bottom:
        30px;

}


.form-header h2 {

    font-size:
        30px;

    margin-bottom:
        10px;

}


.form-header p {

    color:
        #8293a7;

}


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

.form-group {

    margin-bottom:
        20px;

}


.form-group label {

    display:
        block;

    color:
        #c7d3e0;

    font-size:
        13px;

    font-weight:
        600;

    margin-bottom:
        9px;

}


.label-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.forgot-link {

    color:
        #00c6ff;

    font-size:
        12px;

}


.optional {

    color:
        #6e8196;

    font-size:
        11px;

    font-weight:
        normal;

    margin-left:
        5px;

}


/* ======================================
   INPUT
====================================== */

.input-wrapper {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

}


.input-icon {

    position:
        absolute;

    left:
        15px;

    font-size:
        15px;

    opacity:
        0.7;

    pointer-events:
        none;

}


.input-wrapper input {

    width:
        100%;

    padding:
        15px
        45px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    border-radius:
        9px;

    outline:
        none;

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

    color:
        #ffffff;

    transition:
        0.3s;

}


.input-wrapper input::placeholder {

    color:
        #53677d;

}


.input-wrapper input:focus {

    border-color:
        #1e90ff;

    background:
        rgba(
            30,
            144,
            255,
            0.04
        );

    box-shadow:
        0 0 0 3px
        rgba(
            30,
            144,
            255,
            0.08
        );

}


.password-toggle {

    position:
        absolute;

    right:
        12px;

    border:
        none;

    background:
        none;

    color:
        #8293a7;

    cursor:
        pointer;

    padding:
        5px;

}


.input-hint {

    display:
        block;

    color:
        #53677d;

    font-size:
        11px;

    margin-top:
        7px;

}


/* ======================================
   CHECKBOX
====================================== */

.remember-row,
.terms-row {

    margin:
        5px
        0
        20px;

}


.checkbox-label {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    color:
        #8293a7;

    font-size:
        12px;

    line-height:
        1.5;

    cursor:
        pointer;

}


.checkbox-label input {

    margin-top:
        3px;

    accent-color:
        #1e90ff;

}


.checkbox-label a {

    color:
        #00c6ff;

}


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

.submit-btn {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        16px;

    border:
        none;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            #1e90ff,
            #00c6ff
        );

    color:
        #ffffff;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        0.3s;

    box-shadow:
        0 10px 30px
        rgba(
            30,
            144,
            255,
            0.2
        );

}


.submit-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(
            30,
            144,
            255,
            0.35
        );

}


/* ======================================
   DIVIDER
====================================== */

.divider {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin:
        25px
        0;

}


.divider::before,
.divider::after {

    content:
        "";

    flex:
        1;

    height:
        1px;

    background:
        rgba(
            255,
            255,
            255,
            0.1
        );

}


.divider span {

    color:
        #53677d;

    font-size:
        11px;

}


/* ======================================
   SWITCH AUTH
====================================== */

.switch-auth {

    text-align:
        center;

    color:
        #8293a7;

    font-size:
        13px;

}


.switch-auth a {

    color:
        #00c6ff;

    font-weight:
        600;

    margin-left:
        5px;

}


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

@media
(max-width: 900px) {

    .auth-container {

        grid-template-columns:
            1fr;

    }


    .auth-info {

        display:
            none;

    }


    .auth-form-section {

        min-height:
            100vh;

        padding:
            30px
            20px;

    }


    .mobile-brand {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            10px;

        color:
            #ffffff;

        font-weight:
            800;

        letter-spacing:
            1px;

        margin-bottom:
            45px;

    }


    .mobile-brand .brand-icon {

        width:
            35px;

        height:
            35px;

        font-size:
            12px;

    }

}


@media
(max-width: 500px) {

    .auth-form-section {

        padding:
            25px
            15px;

    }


    .form-header h2 {

        font-size:
            25px;

    }


    .auth-card {

        max-width:
            100%;

    }


    .signup-card {

        max-width:
            100%;

    }

}