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


:root {

    --navy: #071d49;

    --navy-light: #0b2d6b;

    --orange: #ff8a00;

    --orange-dark: #e67600;

    --text: #16213e;

    --muted: #6b7280;

    --border: #e5e7eb;

    --background: #f7f9fc;

}


body {

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

    min-height:
        100vh;

}


/* =========================================
   BACK HOME
========================================= */

.back-home {

    position:
        fixed;

    top:
        25px;

    left:
        30px;

    z-index:
        100;

    color:
        white;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    transition:
        0.3s;

}


.back-home:hover {

    color:
        var(--orange);

    transform:
        translateX(-3px);

}


/* =========================================
   MAIN PAGE
========================================= */

.auth-page {

    min-height:
        100vh;

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

}


/* =========================================
   VISUAL SIDE
========================================= */

.auth-visual {

    position:
        relative;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(255, 138, 0, 0.18),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #06183d,
            #0a2d68
        );

    color:
        white;

    display:
        flex;

    align-items:
        center;

    padding:
        90px;

}


.auth-visual::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

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

    border-radius:
        50%;

    right:
        -250px;

    bottom:
        -250px;

}


.auth-visual::after {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

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

    border-radius:
        50%;

    right:
        80px;

    top:
        -150px;

}


.visual-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,0.15)
        );

}


.visual-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        600px;

}


.brand-badge {

    display:
        inline-block;

    padding:
        8px 14px;

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

    border-radius:
        50px;

    color:
        #ffd4a3;

    font-size:
        12px;

    margin-bottom:
        25px;

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

}


.visual-content h1 {

    font-size:
        clamp(42px, 5vw, 68px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        25px;

}


.visual-content h1 span {

    display:
        block;

    color:
        var(--orange);

}


.visual-content > p {

    color:
        #cbd7eb;

    line-height:
        1.8;

    max-width:
        540px;

    font-size:
        16px;

    margin-bottom:
        45px;

}


/* =========================================
   FEATURES
========================================= */

.visual-features {

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;

}


.visual-feature {

    display:
        flex;

    gap:
        15px;

    align-items:
        flex-start;

}


.feature-icon {

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(255,138,0,0.15);

    color:
        var(--orange);

    border:
        1px solid
        rgba(255,138,0,0.3);

}


.visual-feature strong {

    display:
        block;

    margin-bottom:
        5px;

}


.visual-feature small {

    display:
        block;

    color:
        #9fb0ca;

    line-height:
        1.5;

}


/* =========================================
   AI PREVIEW
========================================= */

.ai-preview {

    max-width:
        480px;

    padding:
        20px;

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

    border-radius:
        18px;

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

    backdrop-filter:
        blur(20px);

}


.preview-header {

    display:
        flex;

    justify-content:
        space-between;

    color:
        #b8c5d8;

    font-size:
        13px;

    margin-bottom:
        20px;

}


.status-dot {

    color:
        #41d17d;

}


.preview-content {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}


.preview-icon {

    width:
        48px;

    height:
        48px;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,138,0,0.15);

    color:
        var(--orange);

    font-size:
        22px;

}


.preview-content strong {

    display:
        block;

    margin-bottom:
        6px;

}


.preview-content small {

    color:
        #9fb0ca;

}


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

.auth-form-container {

    background:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        70px 60px;

}


.auth-form {

    width:
        100%;

    max-width:
        460px;

}


.auth-logo {

    display:
        inline-flex;

    flex-direction:
        column;

    text-decoration:
        none;

    margin-bottom:
        35px;

}


.auth-logo span {

    font-size:
        24px;

    font-weight:
        800;

    color:
        var(--navy);

    letter-spacing:
        2px;

}


.auth-logo small {

    color:
        var(--orange);

    font-size:
        10px;

    letter-spacing:
        4px;

    font-weight:
        700;

}


.auth-form h2 {

    font-size:
        32px;

    margin-bottom:
        10px;

    color:
        var(--text);

}


.auth-subtitle {

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.6;

    margin-bottom:
        30px;

}


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

.form-group {

    margin-bottom:
        20px;

}


.form-group label {

    display:
        block;

    font-size:
        13px;

    font-weight:
        700;

    margin-bottom:
        8px;

    color:
        #344054;

}


.form-group input {

    width:
        100%;

    height:
        50px;

    padding:
        0 15px;

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

    border-radius:
        10px;

    font-size:
        14px;

    outline:
        none;

    background:
        #fbfcfe;

    transition:
        0.25s;

}


.form-group input:focus {

    border-color:
        var(--orange);

    background:
        white;

    box-shadow:
        0 0 0 4px
        rgba(255,138,0,0.08);

}


/* =========================================
   PASSWORD
========================================= */

.password-wrapper {

    position:
        relative;

}


.password-wrapper input {

    padding-right:
        65px;

}


.password-toggle {

    position:
        absolute;

    right:
        12px;

    top:
        50%;

    transform:
        translateY(-50%);

    border:
        none;

    background:
        none;

    color:
        var(--orange);

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

}


/* =========================================
   PASSWORD STRENGTH
========================================= */

.password-strength {

    margin-top:
        8px;

}


.strength-bars {

    display:
        flex;

    gap:
        5px;

    margin-bottom:
        5px;

}


.strength-bars span {

    height:
        4px;

    flex:
        1;

    background:
        #e5e7eb;

    border-radius:
        10px;

    transition:
        0.3s;

}


.strength-bars span.active {

    background:
        var(--orange);

}


.password-strength small {

    color:
        var(--muted);

    font-size:
        11px;

}


.field-message {

    display:
        block;

    font-size:
        11px;

    margin-top:
        7px;

}


.field-message.error {

    color:
        #dc2626;

}


.field-message.success {

    color:
        #16a34a;

}


/* =========================================
   TERMS
========================================= */

.terms {

    display:
        flex;

    gap:
        10px;

    align-items:
        flex-start;

    margin:
        5px 0 25px;

    font-size:
        12px;

    color:
        var(--muted);

    line-height:
        1.6;

}


.terms input {

    margin-top:
        3px;

    accent-color:
        var(--orange);

}


.terms a {

    color:
        var(--orange);

    text-decoration:
        none;

    font-weight:
        600;

}


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

.auth-btn {

    width:
        100%;

    height:
        52px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--orange);

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        0.3s;

}


.auth-btn:hover:not(:disabled) {

    background:
        var(--orange-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(255,138,0,0.2);

}


.auth-btn:disabled {

    background:
        #d1d5db;

    color:
        #9ca3af;

    cursor:
        not-allowed;

    transform:
        none;

}


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

.password-label {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.password-label a {

    font-size:
        12px;

    color:
        var(--orange);

    text-decoration:
        none;

    font-weight:
        600;

}


.remember-me {

    margin:
        5px 0 25px;

    font-size:
        13px;

    color:
        var(--muted);

}


.remember-me label {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.remember-me input {

    accent-color:
        var(--orange);

}


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

.auth-switch {

    text-align:
        center;

    margin-top:
        25px;

    color:
        var(--muted);

    font-size:
        13px;

}


.auth-switch a {

    color:
        var(--orange);

    text-decoration:
        none;

    font-weight:
        700;

}


/* =========================================
   MESSAGES
========================================= */

.message {

    padding:
        13px 15px;

    border-radius:
        10px;

    font-size:
        13px;

    margin-bottom:
        20px;

    line-height:
        1.5;

}


.success-message {

    background:
        #ecfdf3;

    color:
        #15803d;

    border:
        1px solid
        #bbf7d0;

}


.error-message {

    background:
        #fef2f2;

    color:
        #dc2626;

    border:
        1px solid
        #fecaca;

}


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

@media (
    max-width: 950px
) {

    .auth-page {

        grid-template-columns:
            1fr;

    }


    .auth-visual {

        display:
            none;

    }


    .auth-form-container {

        min-height:
            100vh;

        padding:
            80px 25px 40px;

    }


    .back-home {

        color:
            var(--navy);

        top:
            20px;

        left:
            20px;

    }

}


@media (
    max-width: 500px
) {

    .auth-form-container {

        padding:
            75px 20px 30px;

    }


    .auth-form h2 {

        font-size:
            27px;

    }


    .auth-logo {

        margin-bottom:
            25px;

    }

}