/* =========================================================
   LAVENDER APP LOGIN
========================================================= */

:root {

    --lav-app-background: #f7f4f8;
    --lav-app-background-soft: #fcfafc;

    --lav-app-surface: rgba(255, 255, 255, 0.88);
    --lav-app-surface-solid: #ffffff;

    --lav-app-lavender: #80658f;
    --lav-app-lavender-dark: #5d466b;
    --lav-app-lavender-deep: #45334f;
    --lav-app-lavender-soft: #ede5f1;
    --lav-app-lavender-pale: #f4eef6;

    --lav-app-sage: #7d917e;
    --lav-app-sage-soft: #e8eee8;

    --lav-app-text: #28222c;
    --lav-app-text-soft: #6f6873;
    --lav-app-text-muted: #8c8490;

    --lav-app-line: rgba(93, 70, 107, 0.14);
    --lav-app-line-strong: rgba(93, 70, 107, 0.24);

    --lav-app-danger: #a84055;

    --lav-app-shadow:
        0 24px 70px rgba(68, 48, 78, 0.12);

    --lav-app-shadow-soft:
        0 12px 34px rgba(68, 48, 78, 0.08);

    --lav-app-radius-large: 32px;
    --lav-app-radius-medium: 20px;
    --lav-app-radius-small: 14px;

    --lav-app-safe-top:
        max(26px, env(safe-area-inset-top));

    --lav-app-safe-bottom:
        max(28px, env(safe-area-inset-bottom));

}


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

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    min-height: 100%;
    background: var(--lav-app-background);

}


body {

    min-width: 320px;
    min-height: 100%;
    margin: 0;

    color: var(--lav-app-text);
    background: var(--lav-app-background);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

}


button,
input {

    font: inherit;

}


button {

    border: 0;

}


a {

    color: inherit;

}


img,
svg {

    display: block;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.lavAppLogin {

    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    padding-top:
        calc(var(--lav-app-safe-top));

    padding-right: 20px;

    padding-bottom:
        calc(var(--lav-app-safe-bottom) + 20px);

    padding-left: 20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(188, 162, 203, 0.19),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(159, 179, 158, 0.13),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #fbf9fc 0%,
            #f5f0f7 48%,
            #f9f7f6 100%
        );

}


/* =========================================================
   BACKGROUND DETAILS
========================================================= */

.lavAppLoginGlow {

    position: absolute;
    z-index: -3;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);

}


.lavAppLoginGlowOne {

    top: -120px;
    right: -130px;

    width: 330px;
    height: 330px;

    background:
        radial-gradient(
            circle,
            rgba(152, 119, 171, 0.22) 0%,
            rgba(152, 119, 171, 0.06) 52%,
            transparent 73%
        );

}


.lavAppLoginGlowTwo {

    bottom: -150px;
    left: -120px;

    width: 350px;
    height: 350px;

    background:
        radial-gradient(
            circle,
            rgba(121, 151, 124, 0.16) 0%,
            rgba(121, 151, 124, 0.04) 55%,
            transparent 75%
        );

}


.lavAppLoginTexture {

    position: absolute;
    inset: 0;
    z-index: -2;

    opacity: 0.26;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(91, 68, 103, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(91, 68, 103, 0.025) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

}


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

.lavAppLoginContainer {

    width: 100%;
    max-width: 480px;
    margin: auto;

}


.lavAppLoginPanel {

    position: relative;

    width: 100%;
    overflow: hidden;

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

    border-radius: var(--lav-app-radius-large);

    background: var(--lav-app-surface);

    box-shadow: var(--lav-app-shadow);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

}


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

.lavAppLoginBrand {

    display: flex;
    justify-content: center;

    padding:
        30px
        28px
        12px;

}


.lavAppLoginLogo {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;

    text-decoration: none;

}


.lavAppLoginLogo img {

    width: auto;
    max-width: 230px;
    height: auto;
    max-height: 70px;

    object-fit: contain;

}


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

.lavAppLoginContent {

    padding:
        18px
        30px
        28px;

}


.lavAppLoginEyebrow {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-bottom: 16px;

}


.lavAppLoginEyebrow span {

    width: 26px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--lav-app-lavender)
        );

}


.lavAppLoginEyebrow p {

    margin: 0;

    color: var(--lav-app-lavender);
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    line-height: 1.4;
    text-transform: uppercase;

}


.lavAppLoginContent h1 {

    max-width: 380px;
    margin:
        0
        auto
        16px;

    color: var(--lav-app-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2rem,
            8.2vw,
            2.85rem
        );

    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.02;
    text-align: center;

}


.lavAppLoginContent h1 span {

    display: block;

    color: var(--lav-app-lavender-dark);
    font-style: italic;

}


.lavAppLoginDescription {

    max-width: 370px;
    margin:
        0
        auto
        28px;

    color: var(--lav-app-text-soft);
    font-size: 0.98rem;
    line-height: 1.65;
    text-align: center;

}


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

.lavAppLoginForm {

    display: grid;
    gap: 20px;

}


.lavAppLoginField {

    display: grid;
    gap: 9px;

}


.lavAppLoginField label {

    color: var(--lav-app-text);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.4;

}


.lavAppLoginInputWrap {

    position: relative;

}


.lavAppLoginInputIcon {

    position: absolute;
    top: 50%;
    left: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    color: var(--lav-app-lavender);

    pointer-events: none;

    transform: translateY(-50%);

}


.lavAppLoginInputIcon svg {

    width: 100%;
    height: 100%;

}


.lavAppLoginInputWrap input {

    width: 100%;
    min-height: 58px;

    padding:
        15px
        18px
        15px
        51px;

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

    border-radius: var(--lav-app-radius-small);

    outline: none;

    color: var(--lav-app-text);
    background: rgba(255, 255, 255, 0.86);

    font-size: 1rem;
    line-height: 1.4;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;

}


.lavAppLoginInputWrap input::placeholder {

    color: #aaa1ad;

}


.lavAppLoginInputWrap input:hover {

    border-color: var(--lav-app-line-strong);

}


.lavAppLoginInputWrap input:focus {

    border-color: var(--lav-app-lavender);

    background: var(--lav-app-surface-solid);

    box-shadow:
        0 0 0 4px rgba(128, 101, 143, 0.12),
        var(--lav-app-shadow-soft);

}


.lavAppLoginInputWrap input:user-invalid {

    border-color: var(--lav-app-danger);

    box-shadow:
        0 0 0 4px rgba(168, 64, 85, 0.09);

}


.lavAppLoginFieldHelp {

    margin: 0;

    color: var(--lav-app-text-muted);
    font-size: 0.79rem;
    line-height: 1.5;

}


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

.lavAppLoginSubmit {

    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;
    min-height: 58px;

    padding:
        15px
        20px;

    overflow: hidden;

    border-radius: var(--lav-app-radius-small);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--lav-app-lavender-dark),
            #86679a
        );

    box-shadow:
        0 14px 30px rgba(93, 70, 107, 0.22);

    cursor: pointer;

    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.3;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;

}


.lavAppLoginSubmit::before {

    content: "";

    position: absolute;
    inset: 1px;
    z-index: -1;

    border-radius: calc(var(--lav-app-radius-small) - 1px);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.12),
            transparent 48%
        );

    pointer-events: none;

}


.lavAppLoginSubmit svg {

    width: 20px;
    height: 20px;

    transition:
        transform 180ms ease;

}


.lavAppLoginSubmit:hover {

    transform: translateY(-2px);

    box-shadow:
        0 18px 36px rgba(93, 70, 107, 0.28);

    filter: saturate(1.05);

}


.lavAppLoginSubmit:hover svg {

    transform: translateX(3px);

}


.lavAppLoginSubmit:active {

    transform: translateY(0);

}


.lavAppLoginSubmit:focus-visible {

    outline:
        3px solid rgba(128, 101, 143, 0.28);

    outline-offset: 4px;

}


/* =========================================================
   SUPPORT
========================================================= */

.lavAppLoginSupport {

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap:
        4px
        7px;

    margin-top: 25px;

    text-align: center;

}


.lavAppLoginSupport p {

    margin: 0;

    color: var(--lav-app-text-muted);
    font-size: 0.82rem;
    line-height: 1.5;

}


.lavAppLoginSupport a {

    color: var(--lav-app-lavender-dark);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.5;
    text-underline-offset: 3px;

}


.lavAppLoginSupport a:hover {

    color: var(--lav-app-lavender-deep);

}


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

.lavAppLoginFooter {

    padding:
        18px
        28px
        22px;

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

    background:
        linear-gradient(
            180deg,
            rgba(244, 238, 246, 0.46),
            rgba(244, 238, 246, 0.76)
        );

}


.lavAppLoginSecurity {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

}


.lavAppLoginSecurity svg {

    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    color: var(--lav-app-sage);

}


.lavAppLoginSecurity p {

    margin: 0;

    color: var(--lav-app-text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;

}


/* =========================================================
   TABLET AND DESKTOP
========================================================= */

@media (min-width: 700px) {

    .lavAppLogin {

        padding-top:
            calc(var(--lav-app-safe-top) + 42px);

        padding-right: 32px;

        padding-bottom:
            calc(var(--lav-app-safe-bottom) + 42px);

        padding-left: 32px;

    }


    .lavAppLoginContainer {

        max-width: 520px;

    }


    .lavAppLoginBrand {

        padding:
            36px
            38px
            14px;

    }


    .lavAppLoginContent {

        padding:
            22px
            42px
            34px;

    }


    .lavAppLoginFooter {

        padding:
            20px
            38px
            24px;

    }

}


/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media (max-width: 390px) {

    .lavAppLogin {

        align-items: flex-start;

        padding-right: 14px;
        padding-left: 14px;

    }


    .lavAppLoginPanel {

        border-radius: 26px;

    }


    .lavAppLoginBrand {

        padding:
            26px
            22px
            10px;

    }


    .lavAppLoginLogo img {

        max-width: 200px;

    }


    .lavAppLoginContent {

        padding:
            16px
            22px
            25px;

    }


    .lavAppLoginContent h1 {

        font-size: 2rem;

    }


    .lavAppLoginDescription {

        font-size: 0.92rem;

    }


    .lavAppLoginFooter {

        padding:
            17px
            22px
            20px;

    }

}


/* =========================================================
   SHORT MOBILE SCREENS
========================================================= */

@media (max-height: 720px) and (max-width: 699px) {

    .lavAppLogin {

        align-items: flex-start;

        padding-top:
            calc(var(--lav-app-safe-top) + 12px);

        padding-bottom:
            calc(var(--lav-app-safe-bottom) + 12px);

    }


    .lavAppLoginBrand {

        padding-top: 22px;

    }


    .lavAppLoginLogo img {

        max-height: 56px;

    }


    .lavAppLoginContent {

        padding-top: 12px;
        padding-bottom: 22px;

    }


    .lavAppLoginDescription {

        margin-bottom: 22px;

    }


    .lavAppLoginFooter {

        padding-top: 15px;
        padding-bottom: 17px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

    }

}
/* =========================================================
   BIOMETRIC LOGIN
========================================================= */

.lavAppBiometricLogin {

    display: grid;
    gap: 18px;

    margin-top: 24px;

}


.lavAppBiometricLogin[hidden] {

    display: none;

}


.lavAppBiometricDivider {

    display: grid;
    grid-template-columns:
        minmax(20px, 1fr)
        auto
        minmax(20px, 1fr);
    align-items: center;
    gap: 12px;

}


.lavAppBiometricDivider span {

    height: 1px;

    background:
        rgba(89, 66, 99, 0.14);

}


.lavAppBiometricDivider p {

    margin: 0;

    color: #8b818f;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;

}


.lavAppBiometricButton {

    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    min-height: 66px;
    padding:
        12px
        16px;

    border:
        1px solid rgba(117, 87, 131, 0.2);

    border-radius: 16px;

    color: #594263;
    background:
        rgba(245, 239, 247, 0.82);

    cursor: pointer;

    text-align: left;

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;

}


.lavAppBiometricButton:hover {

    border-color:
        rgba(117, 87, 131, 0.42);

    background: #f1e8f4;

    box-shadow:
        0 12px 24px
        rgba(74, 53, 83, 0.08);

    transform: translateY(-1px);

}


.lavAppBiometricButton:disabled {

    cursor: wait;
    opacity: 0.65;
    transform: none;

}


.lavAppBiometricIcon {

    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    color: #755783;
    background: #ffffff;

    box-shadow:
        0 6px 16px
        rgba(74, 53, 83, 0.08);

}


.lavAppBiometricIcon svg {

    width: 24px;
    height: 24px;

}


.lavAppBiometricText {

    display: grid;
    gap: 3px;

    min-width: 0;

}


.lavAppBiometricText strong {

    color: #493650;
    font-size: 0.91rem;
    font-weight: 760;
    line-height: 1.35;

}


.lavAppBiometricText small {

    color: #807584;
    font-size: 0.74rem;
    line-height: 1.4;

}


.lavAppBiometricMessage {

    min-height: 18px;
    margin: -8px 0 0;

    color: #7c707f;
    font-size: 0.76rem;
    line-height: 1.5;
    text-align: center;

}


.lavAppBiometricMessage.is-error {

    color: #a14d5e;

}


.lavAppBiometricMessage.is-success {

    color: #517157;

}