/* ==========================================================================
   Auth.css
   Shared styles for the standalone Login/Register pages (Pages/Login.html,
   Pages/Register.html). These pages are served as full documents, not portal
   fragments, so this stylesheet is self-contained rather than namespaced
   under .LV_Page - but reuses the same color/font tokens as Redesign.css for
   visual consistency with the rest of the redesigned portal.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --auth-bg: #F7F7FA;
    --auth-surface: #FFFFFF;
    --auth-foreground: #1F2126;
    --auth-muted: #8A8F9A;
    --auth-border: #E7E8EE;
    --auth-primary: var(--background-color-main, #625AD6);
    --auth-primary-dark: #514ACB;
    --auth-destructive: #E0393B;
    --auth-success: #1D9A6C;
    --auth-font-sans: "DM Sans", "Inter", sans-serif;
    --auth-font-display: "Space Grotesk", "Inter", sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: var(--auth-font-sans);
    color: var(--auth-foreground);
    background: var(--auth-surface);
}

.Auth {
    display: flex;
    min-height: 100vh;
}

.Auth_Panel {
    flex: 1 1 58%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 56px;
    background:
        linear-gradient(to right, rgba(31, 33, 38, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(31, 33, 38, .045) 1px, transparent 1px),
        var(--auth-bg);
    background-size: 42px 42px;
    overflow: hidden;
}

    .Auth_Panel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 60% at 20% 30%, rgba(247, 247, 250, 0) 0%, var(--auth-bg) 78%);
        pointer-events: none;
    }

.Auth_Logo {
    display: flex;
    align-items: center;
    gap: 9px;
    position: relative;
    z-index: 1;
}

    .Auth_Logo img {
        height: 26px;
        width: auto;
    }

.Auth_Marketing {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 460px;
    position: relative;
    z-index: 1;
}

.Auth_Headline {
    font-family: var(--auth-font-display);
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.12;
    margin: 0 0 16px;
}

.Auth_Subtitle {
    font-size: 15px;
    line-height: 1.55;
    color: var(--auth-muted);
    max-width: 42ch;
}

.Auth_Stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 44px;
    padding-top: 26px;
    margin-top: 26px;
    border-top: 1px solid var(--auth-border);
}

.Auth_Stat_Value {
    font-family: var(--auth-font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.Auth_Stat_Label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--auth-muted);
    margin-top: 3px;
}

.Auth_Form_Panel {
    flex: 1 1 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
}

.Auth_Form_Loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .75);
    z-index: 5;
}

.Auth_Form {
    width: 100%;
    max-width: 360px;
}

.Auth_Eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--auth-primary);
    margin-bottom: 8px;
}

.Auth_Title {
    font-family: var(--auth-font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 8px;
}

.Auth_Form_Subtitle {
    font-size: 13.5px;
    color: var(--auth-muted);
    margin-bottom: 26px;
}

.Auth_Field {
    margin-bottom: 16px;
}

.Auth_Field_Row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

    .Auth_Field_Row .Auth_Field {
        margin-bottom: 0;
    }

.Auth_Label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--auth-muted);
    margin-bottom: 6px;
}

.Auth_Label_Link {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    font-size: 12px;
    color: var(--auth-primary);
    text-decoration: none;
}

    .Auth_Label_Link:hover {
        text-decoration: underline;
    }

.Auth_Input_Wrap {
    position: relative;
}

.Auth_Input {
    width: 100%;
    height: 42px;
    border-radius: 9px;
    border: 1px solid var(--auth-border);
    background: var(--auth-surface);
    padding: 0 13px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--auth-foreground);
    outline: none;
}

    .Auth_Input::placeholder {
        color: #B6BAC4;
    }

    .Auth_Input:focus {
        border-color: var(--auth-primary);
        box-shadow: 0 0 0 3px rgba(98, 90, 214, .14);
    }

    .Auth_Input.has-toggle {
        padding-right: 54px;
    }

.Auth_Input_Toggle {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    padding: 0 10px;
    border: none;
    background: none;
    color: var(--auth-muted);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

    .Auth_Input_Toggle:hover {
        color: var(--auth-foreground);
    }

.Auth_Password_Rules {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 9px;
}

.Auth_Password_Rule {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--auth-muted);
}

    .Auth_Password_Rule::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--auth-border);
        flex-shrink: 0;
    }

    .Auth_Password_Rule.is-met {
        color: var(--auth-success);
    }

        .Auth_Password_Rule.is-met::before {
            background: var(--auth-success);
        }

.Auth_Checkbox_Row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12px;
    color: var(--auth-muted);
    line-height: 1.5;
    margin-bottom: 20px;
}

    .Auth_Checkbox_Row input {
        margin-top: 3px;
        flex-shrink: 0;
    }

    .Auth_Checkbox_Row a {
        color: var(--auth-foreground);
        font-weight: 500;
    }

.Auth_Captcha {
    margin-bottom: 20px;
}

.Auth_Btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    border-radius: 9px;
    border: none;
    background: var(--auth-primary);
    color: #FFFFFF;
    font-family: var(--auth-font-sans);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
    margin-top: 4px;
}

    .Auth_Btn:hover {
        background: var(--auth-primary-dark);
    }

.Auth_Footer {
    margin-top: 22px;
    text-align: center;
    font-size: 13px;
    color: var(--auth-muted);
}

    .Auth_Footer a {
        color: var(--auth-primary);
        font-weight: 500;
        text-decoration: none;
    }

    .Auth_Footer a:hover {
        text-decoration: underline;
    }

.Auth_Error {
    background: rgba(224, 57, 59, .08);
    border: 1px solid rgba(224, 57, 59, .25);
    color: var(--auth-destructive);
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 12.5px;
    margin-bottom: 18px;
    display: none;
}

    .Auth_Error:empty {
        display: none;
    }

.Auth_Success {
    background: rgba(29, 154, 108, .08);
    border: 1px solid rgba(29, 154, 108, .25);
    color: var(--auth-success);
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 12.5px;
    margin-bottom: 18px;
}

.Auth_Field.has-error .Auth_Input {
    border-color: var(--auth-destructive);
}

@media (max-width: 900px) {
    .Auth_Panel {
        display: none;
    }

    .Auth_Form_Panel {
        flex: 1 1 100%;
    }
}
