/* Deliberately scoped: the signed-in application's theme stays independent. */
body.login-page-active {
    background: #f7f5ee;
    color: #183c30;
    color-scheme: light;
}

.login-page {
    --login-ink: #153c30;
    --login-muted: #757c78;
    --login-green: #315747;
    width: min(1384px, calc(100% - 80px));
    margin: 0 auto;
    padding: 24px 0 40px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.login-page *, .login-page *::before, .login-page *::after { box-sizing: border-box; }
.login-page button, .login-page input { font: inherit; }
.login-page button { -webkit-tap-highlight-color: transparent; }
.login-brand { display: flex; align-items: center; gap: 15px; font-size: 23px; font-weight: 650; line-height: 1.3; letter-spacing: .015em; }
.login-brand > svg { width: 32px; height: 38px; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.login-card {
    display: grid;
    grid-template-columns: 56.1% 43.9%;
    min-height: clamp(590px, 47.5vw, 710px);
    margin-top: 20px;
    overflow: hidden;
    background: #fcfbf7;
    border: 1px solid #e9e6de;
    border-radius: 36px;
    box-shadow: 0 12px 32px #3c493014;
}

.login-illustration { position: relative; isolation: isolate; min-width: 0; overflow: hidden; background: #d6e2d2; }
.login-illustration__headline { position: relative; z-index: 2; padding: 56px 0 0 10.4%; margin: 0; color: #123d2e; font-size: clamp(34px, 3.88vw, 58px); font-weight: 750; line-height: 1.3; letter-spacing: -.035em; }
.login-scene { position: absolute; width: 104%; left: -2%; bottom: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%); mask-image: linear-gradient(to bottom, transparent, #000 8%); }
.login-mascot { position: relative; width: 100%; aspect-ratio: 3 / 2; pointer-events: none; user-select: none; }
.login-mascot__art { position: absolute; inset: 0; transform: rotate(var(--mascot-turn, 0deg)); transform-origin: 54% 88%; }
.login-mascot__picture { display: block; position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.login-mascot__image, .login-mascot__eyes { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.login-mascot__image, .login-mascot__eyes { opacity: 0; transition: opacity 180ms ease-out; }
.is-image-ready .login-mascot__image, .is-image-ready .login-mascot__eyes { opacity: 1; }
.login-mascot__image { object-fit: fill; }
.login-mascot__eye { transform-box: fill-box; transform-origin: center 75%; transition: transform 240ms cubic-bezier(.2, .7, .3, 1), opacity 170ms ease-out; }
.login-mascot__iris { transform-box: fill-box; transform-origin: center; transition: transform 280ms ease-out; }
.is-curious .login-mascot__iris { transform: scale(1.065); }
.is-eyes-closed .login-mascot__eye, .is-blinking .login-mascot__eye { transform: scaleY(0); opacity: 0; transition-duration: 110ms, 90ms; }
.login-privacy-note { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translate(-50%, 8px); padding: 7px 18px; border: 1px solid #ffffff85; border-radius: 24px; color: #345041; background: #fffdf0de; font-size: 14px; line-height: 1.5; opacity: 0; transition: opacity 180ms, transform 180ms; white-space: nowrap; }
.is-private .login-privacy-note { opacity: 1; transform: translate(-50%, 0); }

.login-form-panel { display: flex; align-items: center; padding: 52px 12.1% 68px 14.4%; min-width: 0; }
.login-form-content { width: 100%; }
.login-eyebrow { margin: 0 0 12px; color: var(--login-muted); font-size: 20px; line-height: 1.5; }
.login-form-panel h1 { color: #101f1a; margin: 0 0 8px; font-size: clamp(35px, 3.4vw, 50px); font-weight: 700; letter-spacing: -.04em; line-height: 1.35; }
.login-description { margin: 0; font-size: 20px; color: #727973; line-height: 1.6; }
.login-form { display: flex; flex-direction: column; gap: 29px; margin-top: 41px; }
.login-field { min-width: 0; }
.login-field label { display: block; color: #283b32; margin: 0 0 9px; font-size: 18px; line-height: 1.4; }
.login-field input { display: block; width: 100%; min-width: 0; height: 66px; padding: 0 20px; border: 1.5px solid #cdd1c9; border-radius: 13px; background: #fffefa70; color: #263b30; font-size: 20px; outline: none; box-shadow: none; transition: border-color 150ms, box-shadow 150ms, background-color 150ms; }
.login-field input::placeholder { color: #a0a5a0; opacity: 1; }
.login-field input:hover { border-color: #9ea99d; }
.login-field input:focus { border-color: #809b72; box-shadow: 0 0 0 3px #809b722b; background: #fffefb; }
.login-field input:-webkit-autofill { -webkit-text-fill-color: #263b30; -webkit-box-shadow: 0 0 0 1000px #f9faf0 inset; caret-color: #263b30; }
.login-password-wrap { position: relative; }
.login-password-wrap input { padding-right: 58px; }
.login-password-toggle { position: absolute; right: 9px; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; padding: 10px; transform: translateY(-50%); border: 0; border-radius: 9px; background: transparent; color: #67716e; cursor: pointer; }
.login-password-toggle:hover { color: var(--login-green); background: #3157470a; }
.login-password-toggle svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-eye-slash { display: none; }
[aria-pressed="true"] .login-eye-slash { display: block; }
.login-page button:focus-visible { outline: 3px solid #88a875; outline-offset: 4px; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; min-height: 66px; margin-top: 2px; padding: 14px 22px; border: 1px solid #315747; border-radius: 13px; background: #315747; color: #fff; font-size: 19px !important; font-weight: 650 !important; cursor: pointer; transition: background-color 150ms, transform 150ms, box-shadow 150ms; }
.login-submit:hover { background: #244637; box-shadow: 0 5px 12px #31574720; }
.login-submit:active { transform: translateY(1px); }
.login-submit > svg { width: 25px; height: 25px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 150ms; }
.login-submit:hover > svg { transform: translateX(3px); }
.login-submit:disabled { cursor: wait; opacity: .78; transform: none; }
.login-submit__spinner { display: none; width: 18px; height: 18px; border: 2px solid #ffffff50; border-top-color: #fff; border-radius: 50%; animation: login-spin 800ms linear infinite; }
.is-submitting .login-submit__spinner { display: block; }
.is-submitting .login-submit > svg { display: none; }
@keyframes login-spin { to { transform: rotate(360deg); } }
.login-captcha-row { display: flex; gap: 12px; align-items: center; }
.login-captcha-image { display: flex; align-items: center; justify-content: center; flex: 0 0 120px; height: 60px; padding: 4px; border: 1px solid #cdd1c9; border-radius: 12px; background: #fffefa; color: #687668; cursor: pointer; overflow: hidden; }
.login-captcha-image img { width: 100%; height: 100%; object-fit: contain; }
.login-captcha-image span { font-size: 13px; }
.login-error { padding: 11px 14px; margin: -8px 0 -10px; border: 1px solid #eed3c9; border-radius: 10px; background: #fbede7; color: #a1402c; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }


@media (min-width: 1600px) { .login-page { padding-top: max(28px, calc((100svh - 805px) / 2)); } }
@media (max-width: 1100px) {
    .login-page { width: calc(100% - 48px); }
    .login-form-panel { padding: 42px 10%; }
    .login-illustration__headline { padding-left: 8%; font-size: clamp(32px, 3.8vw, 43px); }
    .login-scene { width: 133%; left: -16.5%; }
}
@media (max-width: 760px) {
    .login-page { width: calc(100% - 32px); max-width: 560px; padding: 18px 0 28px; }
    .login-brand { font-size: 18px; gap: 11px; }
    .login-brand > svg { width: 25px; height: 30px; }
    .login-card { grid-template-columns: 1fr; margin-top: 18px; border-radius: 25px; min-height: 0; }
    .login-illustration { min-height: 238px; }
    .login-illustration__headline { padding: 27px 0 0 7%; font-size: clamp(24px, 4.5vw, 29px); line-height: 1.4; }
    .login-scene { width: 350px; left: auto; right: -65px; bottom: -9px; }
    .login-illustration__headline { max-width: 80%; }
    .login-form-panel { padding: 30px 28px 34px; }
    .login-eyebrow { font-size: 14px; margin-bottom: 5px; }
    .login-form-panel h1 { font-size: 32px; margin-bottom: 4px; }
    .login-description { font-size: 15px; }
    .login-form { margin-top: 25px; gap: 21px; }
    .login-field label { font-size: 15px; }
    .login-field input { height: 54px; font-size: 16px; padding-left: 15px; }
    .login-submit { min-height: 54px; font-size: 17px !important; }
    .login-privacy-note { left: 25%; bottom: 20px; padding: 5px 13px; font-size: 12px; }
    .login-captcha-image { height: 54px; flex-basis: 108px; }
}
@media (max-width: 360px) {
    .login-page { width: calc(100% - 24px); }
    .login-form-panel { padding: 26px 20px 30px; }
    .login-illustration__headline { font-size: 22px; }
    .login-scene { right: -85px; }
}
@media (prefers-reduced-motion: reduce) {
    .login-page *, .login-page *::before, .login-page *::after { animation: none !important; transition: none !important; }
    .login-mascot__art { transform: none; }
}