/**
 * Login page only — scoped under body.page-login / .login-page.
 * Lijiang watercolor background. Does not affect other routes.
 */

body.page-login {
    --login-scene: url('/login-lijiang-morning.png');
    --login-wash:
        linear-gradient(
            180deg,
            rgba(222, 237, 246, 0.04) 0%,
            rgba(255, 248, 235, 0.06) 54%,
            rgba(240, 210, 184, 0.04) 100%
        );
    --login-canvas: #eef3f4;
    --login-blend: normal;
    background-color: #eef3f4;
    background-image: var(--login-wash), var(--login-scene);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: var(--login-blend), normal;
    color: rgb(var(--ui-falcon-text, 52 64 80));
    min-height: 100vh;
    transition: background-color 600ms ease;
}

body.page-login[data-login-theme='afternoon'] {
    --login-scene: url('/login-lijiang-watercolor.png');
    --login-wash:
        linear-gradient(
            180deg,
            rgba(202, 222, 226, 0.03) 0%,
            rgba(238, 246, 239, 0.04) 48%,
            rgba(138, 166, 148, 0.05) 100%
        );
    --login-canvas: #dce8e2;
    --login-blend: normal;
    background-color: var(--login-canvas);
}

body.page-login[data-login-theme='evening'] {
    --login-scene: url('/login-lijiang-evening.png');
    --login-wash:
        linear-gradient(
            180deg,
            rgba(201, 195, 220, 0.04) 0%,
            rgba(231, 202, 205, 0.04) 52%,
            rgba(197, 129, 103, 0.04) 100%
        );
    --login-canvas: #ddd8e3;
    --login-blend: normal;
    background-color: var(--login-canvas);
}

body.page-login[data-login-theme='night'] {
    --login-scene: url('/login-lijiang-night.png');
    --login-wash:
        linear-gradient(
            180deg,
            rgba(17, 25, 49, 0.08) 0%,
            rgba(30, 38, 67, 0.06) 55%,
            rgba(18, 28, 43, 0.1) 100%
        );
    --login-canvas: #172033;
    --login-blend: normal;
    background-color: var(--login-canvas);
}

@media (max-width: 640px) {
    body.page-login {
        background-position: 62% bottom;
        background-attachment: scroll;
    }
}

body.page-login main,
body.page-login #app,
body.page-login .wrapper,
body.page-login section#content {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

body.page-login section#content {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

body.page-login section#content > .container {
    max-width: none;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    body.page-login section#content {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    body.page-login section#content > .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* —— Login content shell —— */

body.page-login .login-page {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
}

body.page-login .login-page__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

body.page-login .login-page__brand img {
    height: 3.75rem;
    width: auto;
}

body.page-login .login-page__divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 1rem;
}

body.page-login .login-page__divider::before,
body.page-login .login-page__divider::after {
    content: '';
    height: 1px;
    background-color: rgb(var(--ui-falcon-border, 210 216 224));
}

body.page-login .login-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body.page-login .login-page .ui-surface,
body.page-login .login-page [class*='ui-surface'] {
    position: relative;
    z-index: 1;
}