/* =========================================================
   CODECOSOFT AI
   AUTH / LOGIN / REGISTER
========================================================= */

body.auth-body {
    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(
            circle at 85% 8%,
            color-mix(
                in srgb,
                var(--primary) 8%,
                transparent
            ),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #f3f6fa 48%,
            #edf2f7 100%
        );

    color: var(--text);
}


html[data-theme="dark"] body.auth-body {
    background:
        radial-gradient(
            circle at 84% 8%,
            color-mix(
                in srgb,
                var(--primary) 10%,
                transparent
            ),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #09101a 0%,
            #0b121d 52%,
            #101827 100%
        );
}


/* =========================================================
   SHELL
========================================================= */

.auth-shell {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(460px, 0.92fr);
}


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

.auth-brand-panel {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    padding:
        clamp(42px, 4vw, 68px);

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #087f8d 0%,
            #0e9faf 38%,
            #18b7c4 66%,
            #1cb895 100%
        );
}


/* soft background shapes */

.auth-brand-panel::before,
.auth-brand-panel::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.auth-brand-panel::before {
    width: 540px;
    height: 540px;

    top: -220px;
    right: -180px;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.14),
            transparent 68%
        );
}


.auth-brand-panel::after {
    width: 420px;
    height: 420px;

    left: -180px;
    bottom: -160px;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.10),
            transparent 70%
        );
}


/* grid texture */

.auth-brand-panel {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            #087f8d 0%,
            #0e9faf 38%,
            #18b7c4 66%,
            #1cb895 100%
        );

    background-size:
        72px 72px,
        72px 72px,
        auto;
}


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

.auth-brand {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    color: #fff;

    font-size: 18px;

    font-weight: 850;

    letter-spacing: -0.45px;

    text-decoration: none;

    transition:
        transform 0.18s ease;
}


.auth-brand:hover {
    transform: translateY(-1px);
}


.auth-brand img {
    width: 40px;
    height: 40px;

    border-radius: 11px;

    object-fit: cover;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.14);
}


.auth-brand b {
    color: #dcfbff;
}


/* =========================================================
   AUTH HERO
========================================================= */

.auth-hero {
    position: relative;

    z-index: 2;

    max-width: 650px;
}


.auth-hero .eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 32px;

    padding: 7px 12px;

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

    border-radius: 999px;

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

    color:
        rgba(255, 255, 255, 0.90);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    backdrop-filter: blur(8px);
}


.auth-hero .eyebrow::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d9ffff;

    box-shadow:
        0 0 0 4px
        rgba(255, 255, 255, 0.09);
}


.auth-hero h1 {
    max-width: 650px;

    margin:
        20px 0 20px;

    color: #fff;

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

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -3.2px;
}


.auth-hero p {
    max-width: 560px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 15px;

    line-height: 1.8;
}


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

.auth-benefits {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 10px;
}


.auth-benefit {
    min-height: 100px;

    padding: 15px;

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

    border-radius: 14px;

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

    backdrop-filter:
        blur(10px);

    transition:
        background 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease;
}


.auth-benefit:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(255, 255, 255, 0.26);

    background:
        rgba(255, 255, 255, 0.12);
}


.auth-benefit strong {
    display: block;

    color: #fff;

    font-size: 12px;

    font-weight: 750;
}


.auth-benefit span {
    display: block;

    margin-top: 6px;

    color:
        rgba(255, 255, 255, 0.70);

    font-size: 10px;

    line-height: 1.55;
}


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

.auth-form-panel {
    position: relative;

    min-width: 0;

    padding:
        42px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   TOP TOOLS
========================================================= */

.auth-tools {
    position: absolute;

    top: 24px;
    right: 28px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 8px;
}


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

.auth-card {
    width:
        min(
            480px,
            100%
        );

    padding:
        36px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--line) 90%,
            transparent
        );

    border-radius:
        22px;

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 94%,
            transparent
        );

    box-shadow:
        0 24px 70px
        rgba(16, 24, 40, 0.09);

    backdrop-filter:
        blur(16px);
}


html[data-theme="dark"] .auth-card {
    background:
        color-mix(
            in srgb,
            var(--surface-solid) 94%,
            transparent
        );

    box-shadow:
        0 26px 80px
        rgba(0, 0, 0, 0.34);
}


/* =========================================================
   BACK LINK
========================================================= */

.auth-back {
    margin-bottom: 28px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--muted);

    font-size: 12px;

    font-weight: 650;

    text-decoration: none;

    transition:
        color 0.16s ease,
        transform 0.16s ease;
}


.auth-back:hover {
    color: var(--text);

    transform:
        translateX(-2px);
}


/* =========================================================
   TABS
========================================================= */

.auth-tabs {
    margin-bottom: 30px;

    padding: 4px;

    display: flex;

    gap: 4px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--line) 75%,
            transparent
        );

    border-radius: 12px;

    background: var(--surface-2);
}


.auth-tab {
    flex: 1;

    min-height: 42px;

    padding: 0 13px;

    border: 0;

    border-radius: 9px;

    background: transparent;

    color: var(--muted);

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}


.auth-tab:hover {
    color: var(--text);
}


.auth-tab.active {
    background: var(--surface-solid);

    color: var(--text);

    box-shadow: var(--shadow-sm);
}


/* =========================================================
   AUTH PANEL
========================================================= */

.auth-panel {
    display: none;
}


.auth-panel.active {
    display: block;

    animation:
        authPanelIn 0.22s ease;
}


@keyframes authPanelIn {
    from {
        opacity: 0;

        transform:
            translateY(6px);
    }

    to {
        opacity: 1;

        transform: none;
    }
}


.auth-panel h2 {
    margin: 0;

    color: var(--text);

    font-size: 32px;

    font-weight: 850;

    line-height: 1.1;

    letter-spacing: -1.25px;
}


.auth-panel > p {
    margin:
        9px 0 27px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;
}


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

.auth-form {
    display: grid;

    gap: 16px;
}


.auth-form .field label {
    font-size: 12px;
}


.auth-form .input {
    min-height: 48px;

    border-radius: 11px;

    font-size: 13px;
}


.auth-submit {
    width: 100%;

    min-height: 48px;

    margin-top: 3px;

    font-size: 13px;

    font-weight: 750;
}


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

.password-wrap {
    position: relative;
}


.password-wrap .input {
    padding-right: 48px;
}


.password-toggle {
    position: absolute;

    top: 50%;
    right: 7px;

    width: 36px;
    height: 36px;

    transform:
        translateY(-50%);

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 9px;

    background: transparent;

    color: var(--muted);

    cursor: pointer;

    transition:
        background 0.16s ease,
        color 0.16s ease;
}


.password-toggle:hover {
    background:
        var(--surface-2);

    color:
        var(--text);
}


.password-toggle svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   AUTH MESSAGE
========================================================= */

.auth-message {
    display: none;

    margin-bottom: 17px;

    padding: 13px 14px;

    border-radius: 11px;

    font-size: 12px;

    line-height: 1.55;
}


.auth-message.show {
    display: block;
}


.auth-message.error {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--danger) 20%,
            transparent
        );

    background:
        var(--danger-soft);

    color:
        var(--danger);
}


.auth-message.success {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--success) 20%,
            transparent
        );

    background:
        var(--success-soft);

    color:
        var(--success);
}


/* =========================================================
   AUTH FOOT
========================================================= */

.auth-foot {
    margin-top: 20px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.65;

    text-align: center;
}


.auth-foot a {
    color: var(--primary);

    font-weight: 750;

    text-decoration: none;
}


.auth-foot a:hover {
    text-decoration: underline;
}


/* =========================================================
   TRUST ROW
========================================================= */

.trust-row {
    margin-top: 24px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap:
        8px 15px;

    color: var(--muted);

    font-size: 10px;
}


.trust-row span {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}


.trust-row span::before {
    content: "✓";

    color: var(--success);

    font-size: 10px;

    font-weight: 900;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .auth-brand-panel {
        padding:
            70px;
    }


    .auth-form-panel {
        padding:
            56px;
    }


    .auth-card {
        width:
            min(
                500px,
                100%
            );

        padding:
            40px;
    }

}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1150px) {

    .auth-shell {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(440px, 1.1fr);
    }


    .auth-brand-panel {
        padding:
            42px;
    }


    .auth-benefits {
        grid-template-columns:
            1fr;
    }


    .auth-benefit {
        min-height: 0;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .auth-shell {
        grid-template-columns:
            1fr;
    }


    .auth-brand-panel {
        display:
            none;
    }


    .auth-form-panel {
        min-height:
            100vh;

        padding:
            80px 24px 40px;
    }


    .auth-card {
        width:
            min(
                500px,
                100%
            );
    }

}


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

@media (max-width: 560px) {

    .auth-form-panel {
        padding:
            72px 14px 26px;
    }


    .auth-tools {
        top:
            14px;

        right:
            14px;
    }


    .auth-card {
        padding:
            24px 20px;

        border-radius:
            18px;
    }


    .auth-back {
        margin-bottom:
            23px;

        font-size:
            11px;
    }


    .auth-tabs {
        margin-bottom:
            24px;
    }


    .auth-panel h2 {
        font-size:
            27px;

        letter-spacing:
            -0.9px;
    }


    .auth-panel > p {
        margin-bottom:
            22px;

        font-size:
            12px;
    }


    .auth-form {
        gap:
            14px;
    }


    .auth-form .input {
        min-height:
            46px;
    }


    .auth-submit {
        min-height:
            46px;
    }


    .trust-row {
        margin-top:
            20px;

        font-size:
            9px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .auth-card {
        padding:
            22px 16px;
    }


    .auth-tab {
        font-size:
            11px;
    }


    .auth-panel h2 {
        font-size:
            25px;
    }

}

.auth-forgot {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 14px;
}

.auth-forgot a {
    color: var(--accent, #2563eb);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s ease;
}

.auth-forgot a:hover {
    opacity: .75;
    text-decoration: underline;
}