:root {
    --login-border: #d8dee5;
    --login-label: #425266;
    --login-muted: #7a8794;
    --login-field-height: 40px;
    --login-field-radius: 3px;
    --login-field-gap: 15px;
    --login-control-gap: 10px;
    --login-control-inset: 12px;
    --account-active-background: #e6f4ff;
    --account-shadow: 0 5px 18px #1f38581a;
}

/* 覆盖 Lenis 停止时的 overflow: clip，以保留背景页面的滚动位置。 */
html.login-dialog-open,
html.lenis.login-dialog-open.lenis-stopped {
    overflow: hidden;
}
html.login-dialog-open body {
    padding-right: var(--login-scrollbar-gap, 0px);
}
.login-dialog {
    position: fixed;
    inset: 0;
    width: min(950px, calc(100% - 48px));
    max-width: none;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    min-height: min(581px, calc(100vh - 48px));
    min-height: min(581px, calc(100dvh - 48px));
    margin: auto;
    padding: 0;
    border: 0;
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--home-text);
    background: var(--home-surface);
    box-shadow: 0 22px 60px #071c3261;
}
.login-dialog[open] {
    display: grid;
    grid-template-columns: minmax(0, 458fr) minmax(0, 492fr);
    animation: login-dialog-enter var(--home-transition-duration, 300ms) ease-out;
}
.login-dialog::backdrop {
    background: #0d2f5080;
    backdrop-filter: blur(3.75px);
    animation: login-backdrop-enter var(--home-transition-duration, 300ms) ease-out;
}
.login-dialog__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    border-right: 1px solid #e4e9ee;
    background: linear-gradient(138deg, #f6f8fa, #eaf0f5);
}
.login-dialog__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.login-dialog__close {
    position: absolute;
    top: 16px;
    right: 19px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #8996a4;
    background: transparent;
    font-size: 26px;
    line-height: 26px;
    transition: color var(--home-transition-duration, 300ms) ease;
}
.login-dialog__close:hover {
    color: var(--home-primary);
}
.login-dialog button:focus-visible,
.login-dialog a:focus-visible {
    outline: 2px solid var(--home-primary);
    outline-offset: 3px;
}
.login-form {
    min-width: 0;
    padding: 42px 90px 34px 64px;
}
.login-form__heading h2 {
    color: var(--home-primary);
    font-size: 23px;
    font-weight: 600;
    line-height: 34.5px;
}
.login-form__heading p {
    margin-top: 5px;
    color: var(--login-muted);
    font-size: var(--home-font-small);
    line-height: 21px;
}
.login-form__fields {
    display: grid;
    gap: var(--login-field-gap);
    margin-top: 23px;
}
.login-field {
    min-width: 0;
}
.login-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--login-label);
    font-size: var(--home-font-small);
    line-height: 21px;
}
.login-field__control {
    display: flex;
    align-items: center;
    gap: var(--login-control-gap);
    height: var(--login-field-height);
    padding-inline: var(--login-control-inset);
    min-width: 0;
    border: 1px solid var(--login-border);
    border-radius: var(--login-field-radius);
    box-shadow: inset 0 1px 3px #112a4308;
    transition:
        border-color var(--home-transition-duration, 300ms) ease,
        box-shadow var(--home-transition-duration, 300ms) ease;
}
.login-field__control:focus-within {
    border-color: var(--home-primary);
    box-shadow: 0 0 0 2px #002c8c14;
}
.login-field__control svg {
    flex-shrink: 0;
    color: #8d9baa;
}
.login-field__control input {
    width: 0;
    min-width: 0;
    flex: 1;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--login-label);
    background: transparent;
    font-size: var(--home-font-small);
}
.login-field__control input::placeholder {
    color: #9aa5b1;
    opacity: 1;
}
.login-field__control--phone {
    padding-left: 0;
    gap: 12px;
}
.login-field__prefix {
    align-self: stretch;
    display: grid;
    place-items: center;
    width: 47px;
    flex-shrink: 0;
    border-right: 1px solid var(--login-border);
    color: #536275;
    font:
        14px Arial,
        sans-serif;
}
.login-field__sms {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 95px;
    gap: var(--login-control-gap);
}
.login-field__sms input {
    text-align: center;
}
.login-form__send-code {
    min-width: 0;
    min-height: var(--login-field-height);
    padding: 6px;
    border: 1px solid var(--login-border);
    border-radius: var(--login-field-radius);
    color: #34465c;
    background: var(--home-surface);
    font-size: var(--home-font-small);
    transition:
        color var(--home-transition-duration, 300ms) ease,
        border-color var(--home-transition-duration, 300ms) ease;
}
.login-form__send-code:hover {
    color: var(--home-primary);
    border-color: var(--home-primary);
}
.login-form__submit {
    display: block;
    width: 100%;
    min-height: 43px;
    margin-top: 16px;
    padding: 9.5px 12px;
    border-radius: var(--login-field-radius);
    color: var(--home-surface);
    background: var(--home-primary);
    font-size: var(--home-font-body);
    line-height: 24px;
    transition: background-color var(--home-transition-duration, 300ms) ease;
}
.login-form__submit:hover {
    background: #174994;
}
.login-form__status {
    margin-top: 12px;
    color: var(--home-primary);
    font-size: var(--home-font-small);
    line-height: 21px;
}
.login-form__preview {
    margin-top: 10px;
    padding: 6px 12px;
    color: var(--home-primary);
    background: var(--account-active-background);
    font-size: var(--home-font-small);
    transition: background-color var(--home-transition-duration, 300ms) ease;
}
.login-form__preview:hover {
    background: #d4ebff;
}
.utility-account {
    position: relative;
    min-width: 0;
    margin-left: 12px;
}
.utility-account__trigger {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 100%;
    min-height: 32px;
    padding: 0 6px 0 0;
    color: var(--home-primary);
    background: transparent;
    font-size: var(--home-font-small);
    line-height: 21px;
    text-align: left;
}
.utility-account__trigger > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.utility-account__chevron {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--home-transition-duration, 300ms) ease;
}
.utility-account__trigger[aria-expanded="true"] .utility-account__chevron {
    margin-top: 4px;
    transform: rotate(225deg);
}
.utility-account__trigger:focus-visible,
.utility-account__menu :is(a, button):focus-visible {
    outline: 2px solid var(--home-primary);
    outline-offset: 2px;
}
.utility-account__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 6;
    width: 132px;
    padding: 8px 6px;
    background: var(--home-surface);
    box-shadow: var(--account-shadow);
    animation: login-dialog-enter var(--home-transition-duration, 300ms) ease-out;
}
.utility-account__menu li {
    position: relative;
}
.utility-account__menu li:not(:last-child)::after {
    content: "";
    position: absolute;
    height: 1px;
    inset-inline: 6px;
    bottom: 0;
    background: #edf1f6;
    pointer-events: none;
}
.utility-account__menu :is(a, button) {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 6px;
    color: #789;
    background: transparent;
    font-size: var(--home-font-body);
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
    transition:
        color var(--home-transition-duration, 300ms) ease,
        background-color var(--home-transition-duration, 300ms) ease;
}
.utility-account__menu :is(a, button):hover,
.utility-account__menu :is(a, button):focus-visible {
    color: #0958d9;
    background: var(--account-active-background);
}
.utility-account__notice {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--home-border);
    background: var(--home-surface);
    color: var(--home-primary);
    font-size: var(--home-font-small);
    line-height: 21px;
    box-shadow: var(--account-shadow);
}
@media (max-width: 960px) {
    .utility-bar__links {
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .utility-account {
        max-width: 100%;
        margin-left: 0;
    }
    .utility-account__trigger {
        max-width: 100%;
        font-size: 12px;
    }
}
.login-form__hotline {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 11px;
    border-top: 1px solid #edf0f3;
    color: #6d7989;
    font-size: var(--home-font-small);
    line-height: 21px;
}
.login-form__hotline a {
    color: var(--home-primary);
    font:
        700 18px/21px "DIN",
        "Arial",
        sans-serif;
}
@keyframes login-dialog-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes login-backdrop-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@media (max-width: 1000px) {
    .login-form {
        padding-inline: 32px;
    }
}
@media (max-width: 640px) {
    .login-dialog {
        width: calc(100% - 32px);
        min-height: 0;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
    }
    .login-dialog[open] {
        grid-template-columns: minmax(0, 1fr);
    }
    .login-dialog__visual {
        display: none;
    }
    .login-dialog__close {
        top: 12px;
        right: 12px;
    }
    .login-form {
        padding: 36px 24px 28px;
    }
    .login-field__control--phone {
        gap: 8px;
    }
}