:root {

    --primary: #007cc4;

    --primary-dark: #005f98;

    --primary-soft: #eaf6fc;

    --orange: #f47a20;

    --ink: #17384b;

    --muted: #647986;

    --line: #dce7ed;

    --page: #f4f7f9;

    --error: #b42318;

    --shadow: 0 16px 40px rgba(19, 57, 78, 0.1);

    --blue-soft: #eaf6fc;

    --success: #237a52;

    --blue: #007cc4;

    --blue-dark: #005f98;

    --green: #277b54;

}



.auth-layout {

    position: relative;

    display: grid;

    grid-template-columns: minmax(0, 1fr) 500px;

    align-items: stretch;

    overflow: hidden;

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

    border-radius: 22px;

    background: #fff;

    box-shadow: var(--shadow);

    margin-top: 20px;

}



.benefits {

    position: relative;

    padding: 48px 38px;

    overflow: hidden;

    color: #fff;

    background: linear-gradient(145deg, #004e83, #007cc4 62%, #1694cf);

}



    .benefits:after {

        position: absolute;

        right: -85px;

        bottom: -100px;

        width: 280px;

        height: 280px;

        border: 42px solid rgba(255, 255, 255, 0.07);

        border-radius: 50%;

        content: "";

    }



.benefits-content {

    position: relative;

    z-index: 1;

}



.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

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

    border-radius: 999px;

    background: rgba(0, 45, 75, 0.17);

    font-size: 11px;

    /*  font-weight: 800;*/

    color: var(--blue-dark);

    background: var(--blue-soft);

}



.benefits h1 {

    max-width: 450px;

    margin: 20px 0 12px;

    font-size: 34px;

    line-height: 1.3;

    color: #fff;

}



.benefits > div > p {

    max-width: 490px;

    margin: 0;

    color: #dceff8;

    font-size: 15px;

    line-height: 1.7;

}



.benefit-list {

    display: grid;

    gap: 16px;

    margin-top: 34px;

}



.benefit {

    display: flex;

    align-items: flex-start;

    gap: 13px;

}



.benefit-icon {

    display: grid;

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    place-items: center;

    border-radius: 11px;

    color: #fff;

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

}



.benefit strong {

    display: block;

    margin: 1px 0 3px;

    font-size: 14px;

    color: #fff;

}



.benefit span {

    color: #d5eaf4;

    font-size: 13px;

    line-height: 1.45;

}



.auth-panel {

    padding: 41px 38px;

}



.back-home {

    display: none;

}



.auth-title h2 {

    margin: 0;

    font-size: 27px;

    margin: 0;

    padding: 0;

    background: none;

    border: 0;

    color: var(--ink);

}



.auth-title p {

    margin: 7px 0 25px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.55;

}







.input-wrap > i {

    position: absolute;

    top: 20px;

    ;

    left: 14px;

    color: #8397a2;

    font-size: 14px;

    transform: translateY(-50%);

}



.form-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    margin: -2px 0 20px;

    font-size: 12px;

}



.remember {

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--muted);

    cursor: pointer;

}



    .remember input {

        width: 16px;

        height: 16px;

        margin: 0;

        accent-color: var(--primary);

    }



.forgot {

    color: var(--primary-dark);

    font-weight: 800;

}



.login-button {

    display: flex;

    width: 100%;

    height: 49px;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 0;

    border-radius: 11px;

    color: #fff;

    background: linear-gradient(135deg, var(--primary), #006eae);

    box-shadow: 0 8px 18px rgba(0, 124, 196, 0.19);

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

}



    .login-button:hover {

        background: var(--primary-dark);

    }



.divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 22px 0;

    color: #98a8b0;

    font-size: 12px;

}



    .divider:before,

    .divider:after {

        height: 1px;

        flex: 1;

        background: var(--line);

        content: "";

    }



.google-button {

    display: flex;

    width: 100%;

    height: 48px;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: 1px solid #cfdde4;

    border-radius: 11px;

    color: #344f5e;

    background: #fff;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

}



.google-mark {

    display: grid;

    width: 23px;

    height: 23px;

    place-items: center;

    border-radius: 50%;

    color: #4285f4;

    background: #f5f8ff;

    font-size: 14px;

    font-weight: 900;

}



.register-prompt {

    margin-top: 24px;

    padding-top: 21px;

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

    text-align: center;

}



    .register-prompt p {

        margin: 0 0 11px;

        color: var(--muted);

        font-size: 12px;

    }



.register-link {

    display: flex;

    height: 46px;

    align-items: center;

    justify-content: center;

    border: 1px solid #9bcfe7;

    border-radius: 11px;

    color: var(--primary-dark);

    background: #f2faff;

    font-size: 13px;

    font-weight: 900;

}



.security {

    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin: 17px 0 0;

    color: #84969f;

    font-size: 12px;

    line-height: 1.45 !important;

}



    .security i {

        margin-top: 2px;

        color: #4b9b73;

    }



.broker-entry {

    position: relative;

    z-index: 1;

    margin-top: 31px;

    padding: 15px;

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

    border-radius: 12px;

    background: rgba(0, 50, 82, .18);

    color: #fff;

}



    .broker-entry strong {

        display: block;

        font-size: 14px;

        color: #fff;

    }



    .broker-entry p {

        margin: 5px 0 10px;

        color: #d8ebf4;

        font-size: 14px;

        line-height: 1.45;

    }



    .broker-entry a {

        display: inline-flex;

        align-items: center;

        gap: 6px;

        font-size: 14px;

        font-weight: 800;

    }



        .broker-entry a:hover {

            color: #fff;

        }



.existing {

    margin: 22px 0 0;

    padding-top: 19px;

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

    color: var(--muted);

    font-size: 12px;

    text-align: center;

}



.intro:after {

    position: absolute;

    right: -85px;

    bottom: -100px;

    width: 280px;

    height: 280px;

    border: 42px solid rgba(255, 255, 255, .07);

    border-radius: 50%;

    content: "";

}



.field-help {

    display: block;

    margin-top: 6px;

    color: #82949e;

    font-size: 12px;

    line-height: 1.4;

}



.phone-row {

    display: grid;

    grid-template-columns: 65px minmax(0, 1fr);

    gap: 8px;

}



    .phone-row .input-wrap .form-input {

        padding-left: 40px;

        width: 100% !important;

    }



    .phone-row .select-wrapper {

        margin: 0px;

    }

/*

            .terms {

                display: flex;

                align-items: flex-start;

                gap: 8px;

                margin: 2px 0 19px;

                color: var(--muted);

                font-size: 11px;

                line-height: 1.5;

            }

                .terms input {

                    flex: 0 0 auto;

                    width: 16px;

                    height: 16px;

                    margin: 1px 0 0;

                    accent-color: var(--primary);

                }

                .terms a {

                    color: var(--primary-dark);

                    font-weight: 700;

                }*/





.hero {

    position: relative;

    padding: 41px 0 104px;

    overflow: hidden;

    color: var(--ink);

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

    background: radial-gradient(circle at 88% 15%, rgba(0, 124, 196, 0.12), transparent 32%), linear-gradient(135deg, #f3faff, #fff 65%, #edf8fd);

}



    .hero:after {

        position: absolute;

        right: -80px;

        bottom: -150px;

        width: 350px;

        height: 350px;

        border: 55px solid rgba(0, 124, 196, 0.055);

        border-radius: 50%;

        content: "";

    }



.hero-inner {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    width: 1200px;

    margin: 0 auto;

}



/*        .eyebrow {

                display: inline-flex;

                align-items: center;

                gap: 7px;

                padding: 7px 10px;

                border: 1px solid #b9dff1;

                border-radius: 999px;

                color: var(--blue-dark);

                background: var(--blue-soft);

                font-size: 11px;

                font-weight: 800;

            }*/



.hero h1 {

    margin: 16px 0 9px;

    color: var(--ink);

    font-size: 33px;

}



.hero p {

    max-width: 650px;

    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.65;

}



.hero-benefits {

    display: flex;

    flex: 0 0 auto;

    gap: 18px;

}



    .hero-benefits span {

        display: flex;

        align-items: center;

        gap: 7px;

        color: #46606f;

        font-size: 12px;

        font-weight: 700;

    }



    .hero-benefits i {

        color: var(--green);

    }



.main {

    position: relative;

    margin-top: -73px;

    padding-bottom: 60px;

}



.layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 285px;

    align-items: start;

    gap: 22px;

    width: 1200px;

    margin: 0 auto;

}



.form-card,

.side-card {

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

    border-radius: 18px;

    background: #fff;

    box-shadow: var(--shadow);

}



.form-card {

    padding: 31px;

}



.form-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;

}



    .form-header h2 {

        margin: 0;

        font-size: 27px;

        margin: 0;

        padding: 0;

        background: none;

        border: 0;

    }



    .form-header p {

        margin: 6px 0 0;

        color: var(--muted);

        font-size: 12px;

    }



.step-count {

    flex: 0 0 auto;

    padding: 7px 10px;

    border-radius: 999px;

    color: var(--blue-dark);

    background: var(--blue-soft);

    font-size: 12px;

    font-weight: 800;

}



.form-section {

    padding: 24px 0;

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

}



    .form-section:first-of-type {

        padding-top: 0;

        border-top: 0;

    }



.section-heading {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 17px;

}



.section-icon {

    display: grid;

    width: 37px;

    height: 37px;

    place-items: center;

    border-radius: 10px;

    color: var(--blue);

    background: var(--blue-soft);

}



.section-heading h3 {

    margin: 0;

    font-size: 16px;

}



.section-heading p {

    margin: 3px 0 0;

    color: var(--muted);

    font-size: 13px;

}



.grid-2 {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

}





.field label {

    display: flex;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 800;

    align-items: center;

    justify-content: space-between;

}



.field {

    min-width: 0;

    margin-bottom: 17px;

}



    .field.full {

        grid-column: 1/-1;

    }

/*

                .field .label {

                    display: flex;

                    align-items: center;

                    justify-content: space-between;

                    margin-bottom: 7px;

                    font-size: 14px;

                    font-weight: 800;

                }*/



.required {

    color: var(--error);

}



.optional {

    color: #91a2aa;

    font-size: 12px;

    font-weight: 400;

}





.form-input,

.form-textarea,

.form-select {

    width: 100%;

    font-size: 14px;

}



.form-input {

    padding: 0 44px 0 40px;

}



.form-select {

    padding: 0 34px 0 12px;

}



.form-textarea {

    min-height: 104px;

    padding: 12px 13px;

    line-height: 1.55;

    resize: vertical;

}



    .form-input:focus,

    .form-textarea:focus,

    .form-select:focus {

        border-color: var(--blue);

        box-shadow: 0 0 0 3px rgba(0, 124, 196, 0.11);

    }



    .form-input::placeholder,

    .form-textarea::placeholder {

        color: #9aabb3;

    }



.password-toggle {

    position: absolute;

    /*                    top: 50%;*/

    right: 6px;

    display: grid;

    width: 37px;

    height: 37px;

    place-items: center;

    border: 0;

    border-radius: 8px;

    color: #748993;

    background: transparent;

    top: 3px;

    transform: none;

    /*                    transform: translateY(-50%);*/

}

    .password-toggle:focus{

        outline:none !important;

    }

    .help {

        display: block;

        margin-top: 6px;

        color: #84969f;

        font-size: 12px;

        line-height: 1.45;

    }









.photo-upload {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 14px;

    border: 1px dashed #a9c9d9;

    border-radius: 12px;

    background: #f8fcfe;

    cursor: pointer;

    transition: border-color .2s,background .2s,box-shadow .2s

}



    .photo-upload:hover {

        border-color: var(--blue);

        background: #f1faff

    }



    .photo-upload.is-dragging {

        border-color: var(--blue);

        background: var(--blue-soft);

        box-shadow: 0 0 0 4px rgba(0,124,196,.1)

    }



    .photo-upload.is-uploading {

        border-color: var(--blue);

        background: #f1faff

    }



.photo-preview {

    display: grid;

    flex: 0 0 72px;

    width: 72px;

    height: 72px;

    overflow: hidden;

    place-items: center;

    border: 1px solid #d4e2e8;

    border-radius: 50%;

    color: #8ba0aa;

    background: #eaf1f4;

    font-size: 24px;

}



    .photo-preview img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



.photo-copy {

    min-width: 0;

    flex: 1;

}



    .photo-copy strong {

        display: block;

        font-size: 14px;

    }



    .photo-copy p {

        margin: 4px 0 9px;

        color: var(--muted);

        font-size: 12px;

        line-height: 1.4;

    }



.upload-button {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 11px;

    border: 1px solid #a8d2e5;

    border-radius: 8px;

    color: var(--blue-dark);

    background: #fff;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

}



/*                .photo-upload input {

                        position: absolute;

                        width: 1px;

                        height: 1px;

                        overflow: hidden;

                        opacity: 0;

                    }*/

.upload-error {

    display: none;

    margin-top: 7px;

    color: var(--error);

    font-size: 10px

}



    .upload-error.show {

        display: block

    }



.upload-status {

    display: flex;

    min-height: 18px;

    align-items: center;

    gap: 6px;

    margin-top: 7px;

    color: var(--muted);

    font-size: 12px

}



    .upload-status.is-uploading {

        color: var(--blue-dark)

    }



    .upload-status.is-success {

        color: var(--green)

    }



    .upload-status.is-error {

        color: var(--error)

    }







.photo-upload input {

    display: none

}



.languages {

    display: flex;

    flex-wrap: wrap;

    gap: 9px

}



.check-chip {

    position: relative;

    cursor: pointer;

}



    .check-chip input {

        position: absolute;

        opacity: 0;

    }



    .check-chip span {

        display: inline-flex;

        align-items: center;

        gap: 7px;

        padding: 9px 12px;

        border: 1px solid #cfdde4;

        border-radius: 9px;

        color: var(--muted);

        background: #fff;

        font-size: 11px;

        font-weight: 700;

    }



    .check-chip input:checked + span {

        border-color: #80c3e2;

        color: var(--blue-dark);

        background: var(--blue-soft);

    }



        .check-chip input:checked + span:before {

            content: "✓";

            font-weight: 900;

        }



.terms {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin: 20px 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.5;

}



    .terms input {

        width: 16px;

        height: 16px;

        margin: 0;

        accent-color: var(--blue);

    }



    .terms a {

        color: var(--blue-dark);

        font-weight: 800;

    }



.submit {

    display: flex;

    width: 100%;

    height: 50px;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 0;

    border-radius: 11px;

    color: #fff;

    background: linear-gradient(135deg, var(--blue), #006cac);

    box-shadow: 0 8px 18px rgba(0, 124, 196, 0.18);

    font-size: 14px;

    font-weight: 900;

}



.side-card {

    position: sticky;

    top: 18px;

    padding: 21px;

}



    .side-card h3 {

        margin: 0 0 7px;

        font-size: 16px;

    }



    .side-card > p {

        margin: 0 0 18px;

        color: var(--muted);

        font-size: 12px;

        line-height: 1.55;

    }



.free-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 14px;

    padding: 7px 9px;

    border-radius: 8px;

    color: var(--green);

    background: #ecf8f2;

    font-size: 12px;

    font-weight: 900;

}



.side-list {

    display: grid;

    gap: 13px;

}



.side-item {

    display: flex;

    align-items: flex-start;

    gap: 9px;

}



    .side-item i {

        margin-top: 2px;

        color: var(--green);

    }



    .side-item strong {

        display: block;

        font-size: 14px;

    }



    .side-item span {

        display: block;

        margin-top: 2px;

        color: var(--muted);

        font-size: 12px;

        line-height: 1.4;

    }



.side-divider {

    height: 1px;

    margin: 18px 0;

    background: var(--line);

}



.side-login {

    display: flex;

    height: 42px;

    align-items: center;

    justify-content: center;

    border: 1px solid #a8d2e5;

    border-radius: 9px;

    color: var(--blue-dark);

    background: #f5fbfe;

    font-size: 11px;

    font-weight: 800;

}





.input-wrap {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    width: 100%;

}







    .input-wrap input {

        padding: 0 40px 0 35px;

    }



        .input-wrap input::placeholder {

            color: #9aaab3;

        }



.phone-row .select-wrapper input.select-dropdown {

    height: 40px;

    width: 100%;

}



.field .select-wrapper {

    width: 100%;

    margin: 0;

}



.phone-row .country-wrapper {

    width: 65px !important;

}



.field .location-wrapper input {

    padding-left: 35px;

}



.phone-row .select-wrapper span.select-more {

    top: 12px;

}



.field .dropdown-wrapper {

    width: 100% !important;

    min-width: 260px;

}



.account-alternative {

    margin-top: 21px;

    padding-top: 20px;

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

    text-align: center;

}

    .account-alternative p {

        margin: 0 0 10px;

        color: var(--muted);

        font-size: 12px;

    }

.register-link {

    color: var(--primary-dark);

    font-size: 13px;

    font-weight: 900;

}

    .register-link i {

        margin-left: 4px;

        font-size: 11px;

    }

.back-login {

    display: flex;

    height: 46px;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 23px;

    padding-top: 2px;

    border: 1px solid #b3d8ea;

    border-radius: 11px;

    color: var(--primary-dark);

    background: #f4faff;

    font-size: 13px;

    font-weight: 900;

}

.required-note {

    color: #8ca0aa;

    font-size: 12px;

    font-weight: 400;

}



.my-profile{

    margin-bottom:20px;

}





.logout-card {

    position: relative;

/*    max-width: 720px;*/

    margin: 0 auto;

    padding: 44px 44px 38px;

    overflow: hidden;

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

    border-radius: 22px;

    background: #fff;

    box-shadow: var(--shadow);

    text-align: center;

}



    .logout-card::after {

        position: absolute;

        right: -80px;

        bottom: -105px;

        width: 240px;

        height: 240px;

        border: 40px solid rgba(0, 124, 196, .035);

        border-radius: 50%;

        content: "";

        pointer-events: none;

    }



.logout-content {

    position: relative;

    z-index: 1;

}



.status-icon {

    position: relative;

    display: grid;

    width: 76px;

    height: 76px;

    margin: 0 auto 21px;

    place-items: center;

    border: 1px solid #caeadb;

    border-radius: 50%;

    color: var(--success);

    background: var(--success-soft);

    font-size: 29px;

}



    .status-icon::after {

        position: absolute;

        inset: -8px;

        border: 1px solid rgba(35, 122, 82, .12);

        border-radius: inherit;

        content: "";

    }



.status-label {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 11px;

    padding: 6px 10px;

    border-radius: 999px;

    color: var(--success);

    background: var(--success-soft);

    font-size: 12px;

    font-weight: 900;

}



.logout-card h1 {

    margin: 0;

    color: var(--ink);

    font-size: 31px;

    line-height: 1.3;

}



.logout-message {

    max-width: 500px;

    margin: 11px auto 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;

}



.actions {

    display: flex;

    max-width: 470px;

    margin: 27px auto 0;

    justify-content: center;

    gap: 12px;

}



.button {

    display: inline-flex;

    min-width: 180px;

    min-height: 48px;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 19px;

    border-radius: 11px;

    font-size: 13px;

    font-weight: 900;

    transition: border-color .2s, background .2s, transform .2s;

}



    .button:hover {

        transform: translateY(-1px);

    }



.button-primary {

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

    color: #fff;

    background: linear-gradient(135deg, var(--primary), #006dac);

    box-shadow: 0 8px 18px rgba(0, 124, 196, .18);

}



    .button-primary:hover {

        background: var(--primary-dark);

        color:#fff;

    }



.button-secondary {

    border: 1px solid #b6d9e9;

    color: var(--primary-dark);

    background: #f4faff;

}



    .button-secondary:hover {

        border-color: var(--primary);

        background: var(--primary-soft);

    }



.divider {

    height: 1px;

    margin: 32px 0 25px;

    background: var(--line);

}



.continue-heading {

    margin: 0 0 14px;

    color: var(--muted);

    font-size: 14px;

    font-weight: 800;

}



.quick-links {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

}



.quick-link {

    display: flex;

    min-width: 0;

    align-items: center;

    gap: 10px;

    padding: 12px;

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

    border-radius: 10px;

    background: #fafcfd;

    text-align: left;

    transition: border-color .2s, background .2s;

}



    .quick-link:hover {

        border-color: #a9d4e8;

        background: #f2faff;

    }



.quick-icon {

    display: grid;

    flex: 0 0 35px;

    width: 35px;

    height: 35px;

    place-items: center;

    border-radius: 9px;

    color: var(--primary);

    background: var(--primary-soft);

    font-size: 14px;

}



.quick-copy {

    min-width: 0;

}



    .quick-copy strong {

        display: block;

        overflow: hidden;

        color: var(--ink);

        font-size: 14px;

        text-overflow: ellipsis;

        white-space: nowrap;

    }



    .quick-copy span {

        display: block;

        margin-top: 3px;

        color: var(--muted);

        font-size: 14px;

        line-height: 1.35;

    }