/* ============================================================
   登录 / 注册页 · 柔和渐变 + 玻璃拟态
   设计语言复刻 StepNova（紫青渐变 / 毛玻璃卡片 / 大圆角）
   类名统一 lg- 前缀，仅作用于 body.login-page
   ============================================================ */

body.login-page {
    --lg-bg-a: #eef1ff;
    --lg-bg-b: #f7f2ff;
    --lg-bg-c: #e9fbf7;
    --lg-ink: #252745;
    --lg-ink-2: #565a7c;
    --lg-sub: #8a8fae;
    --lg-mute: #8a8fae;
    --lg-primary: #6f6bf6;
    --lg-primary-2: #9a7bff;
    --lg-accent: #2fd0c0;
    --lg-success: #18b77c;
    --lg-danger: #f2606d;
    --lg-glass: rgba(255, 255, 255, .66);
    --lg-glass-soft: rgba(255, 255, 255, .45);
    --lg-line: rgba(255, 255, 255, .78);
    --lg-line-2: rgba(120, 120, 180, .14);
    --lg-shadow: 0 22px 55px rgba(88, 88, 168, .14);
    --lg-shadow-sm: 0 8px 24px rgba(88, 88, 168, .10);
    --lg-grad: linear-gradient(135deg, #6f6bf6 0%, #9a7bff 46%, #2fd0c0 100%);
    --lg-grad-soft: linear-gradient(135deg, rgba(111, 107, 246, .12), rgba(47, 208, 192, .12));
    --lg-ease: cubic-bezier(.24, .72, .28, 1);
    color-scheme: light;
    color: var(--lg-ink) !important;
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    background: linear-gradient(135deg, var(--lg-bg-a) 0%, var(--lg-bg-b) 48%, var(--lg-bg-c) 100%) !important;
    background-attachment: fixed !important;
}

/* 背景光斑：紫 / 青 / 粉，低频漂移 */
body.login-page::before,
body.login-page::after {
    content: "";
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: .55;
    filter: blur(70px);
}
body.login-page::before {
    top: -12vw;
    left: -10vw;
    width: 48vw;
    height: 48vw;
    background: radial-gradient(circle at 30% 30%, rgba(185, 180, 255, .92), rgba(207, 215, 255, .5) 60%, transparent 72%);
    animation: lg-blob-a 26s ease-in-out infinite alternate;
}
body.login-page::after {
    right: -12vw;
    bottom: -16vw;
    width: 44vw;
    height: 44vw;
    background: radial-gradient(circle at 60% 40%, rgba(169, 242, 232, .92), rgba(215, 251, 245, .5) 60%, transparent 74%);
    animation: lg-blob-b 32s ease-in-out infinite alternate;
}

/* 顶部导航融进极浅的背景 */
body.login-page .zl-site-banner {
    background: rgba(255, 255, 255, .62) !important;
    border-bottom-color: rgba(120, 120, 180, .1) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
}
body.login-page .zl-rail {
    background: rgba(255, 255, 255, .52) !important;
    border-bottom-color: rgba(120, 120, 180, .1) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
}

/* ------------------------------ 页面骨架 ------------------------------ */

.lg-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    padding: clamp(1.8rem, 5vw, 4rem) 1.15rem clamp(2rem, 5vw, 3.4rem);
    overflow: hidden;
}
/* 左下角粉色光斑 */
.lg-main::before {
    content: "";
    position: absolute;
    left: 18vw;
    bottom: -22vw;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 60%, rgba(255, 214, 230, .8), rgba(255, 238, 245, .45) 62%, transparent 74%);
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
}

/* 细网格覆盖层 */
.lg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(120, 120, 180, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 120, 180, .06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 40%, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 40%, transparent 78%);
}

/* ------------------------------ 玻璃卡片 ------------------------------ */

.lg-card {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: 27rem;
    padding: 1.75rem;
    overflow: hidden;
    border: 1px solid var(--lg-line);
    border-radius: 1.625rem;
    background: var(--lg-glass);
    box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    animation: lg-card-in .7s var(--lg-ease) backwards;
}
/* 指针跟随柔光 */
.lg-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%), rgba(111, 107, 246, .14), transparent 62%);
    opacity: 0;
    transition: opacity .35s;
}
.lg-card:hover::before {
    opacity: 1;
}
.lg-card > * {
    position: relative;
    z-index: 1;
}

/* ------------------------------ 头部 ------------------------------ */

.lg-head {
    margin-bottom: 1.35rem;
    text-align: center;
    animation: lg-fade-up .6s var(--lg-ease) .06s backwards;
}
.lg-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-bottom: .7rem;
    color: var(--lg-ink);
    font-size: 1.12rem;
    font-weight: 750;
    letter-spacing: -.3px;
    text-decoration: none;
    white-space: nowrap;
}
.lg-brand:hover {
    color: var(--lg-primary);
}
.lg-logo {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    overflow: hidden;
    border-radius: .72rem;
    background: var(--lg-grad);
    color: #fff;
    box-shadow: 0 6px 16px rgba(111, 107, 246, .35);
}
.lg-logo::after {
    content: "";
    position: absolute;
    top: .32rem;
    left: .5rem;
    right: .5rem;
    height: .42rem;
    border-radius: .3rem;
    background: rgba(255, 255, 255, .5);
    pointer-events: none;
}
.lg-logo svg {
    position: relative;
    z-index: 1;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .18rem;
}
.lg-head h1 {
    margin: 0;
    color: var(--lg-ink);
    font-size: clamp(1.35rem, 3vw, 1.55rem);
    font-weight: 750;
    letter-spacing: -.4px;
    line-height: 1.3;
}
.lg-head p {
    margin: .35rem 0 0;
    color: var(--lg-sub);
    font-size: .8rem;
    line-height: 1.65;
}

/* ------------------------------ 提示条 ------------------------------ */

.lg-alert {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 1.1rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(242, 96, 109, .24);
    border-radius: .9rem;
    background: rgba(242, 96, 109, .08);
    color: #c0304f;
    font-size: .79rem;
    line-height: 1.6;
    animation: lg-fade-up .45s var(--lg-ease) backwards, lg-shake .5s .5s var(--lg-ease);
}
.lg-alert svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: .1rem;
}

/* 成功 / 邀请 / 战队提示 */
.lg-message {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    border: 1px solid rgba(24, 183, 124, .22);
    border-radius: .9rem;
    background: rgba(24, 183, 124, .08);
    color: #0f8a60;
    font-size: .78rem;
    line-height: 1.6;
    animation: lg-fade-up .45s var(--lg-ease) backwards;
}
.lg-message svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: .1rem;
}

/* 未开放注册 */
.lg-quote {
    margin: 0;
    padding: 1.05rem 1rem;
    border: 1px dashed var(--lg-line-2);
    border-radius: .95rem;
    background: rgba(255, 255, 255, .5);
    color: var(--lg-ink-2);
    font-size: .82rem;
    line-height: 1.7;
    text-align: center;
}

/* ------------------------------ 表单 ------------------------------ */

.lg-form {
    display: flex;
    flex-direction: column;
    gap: .95rem;
}
.lg-form > .lg-field {
    animation: lg-fade-up .6s var(--lg-ease) backwards;
}
.lg-form > .lg-field:nth-child(1) { animation-delay: .14s; }
.lg-form > .lg-field:nth-child(2) { animation-delay: .2s; }
.lg-form > .lg-field:nth-child(3) { animation-delay: .26s; }

.lg-field {
    display: flex;
    flex-direction: column;
}
.lg-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .4rem;
    color: var(--lg-ink-2);
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .01em;
}
.lg-control {
    position: relative;
    display: flex;
    align-items: center;
}
.lg-ico {
    position: absolute;
    left: .95rem;
    z-index: 1;
    width: 1.05rem;
    height: 1.05rem;
    color: #9aa0c0;
    pointer-events: none;
    transition: color .22s;
}
.lg-control:focus-within .lg-ico {
    color: var(--lg-primary);
}
.lg-input {
    box-sizing: border-box;
    width: 100%;
    height: 2.95rem;
    padding: 0 1rem 0 2.7rem;
    border: 1px solid rgba(140, 140, 200, .22);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .8);
    color: var(--lg-ink);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.2;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background .22s, border-color .22s, box-shadow .22s;
}
.lg-input::placeholder {
    color: #a7abc6;
    font-weight: 400;
}
.lg-input:hover {
    border-color: rgba(140, 140, 200, .36);
}
.lg-input:focus {
    border-color: rgba(111, 107, 246, .65);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(111, 107, 246, .14);
}
.lg-input:-webkit-autofill,
.lg-input:-webkit-autofill:hover,
.lg-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lg-ink);
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .92) inset;
    caret-color: var(--lg-primary);
}
.lg-input.has-eye {
    padding-right: 3rem;
}
.lg-hint {
    margin: .45rem 0 0;
    color: var(--lg-mute);
    font-size: .7rem;
    line-height: 1.6;
}

/* 密码可见切换 */
.lg-eye {
    position: absolute;
    right: .35rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: .65rem;
    background: transparent;
    color: #9aa0c0;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.lg-eye svg {
    width: 1.05rem;
    height: 1.05rem;
}
.lg-eye:hover {
    background: rgba(111, 107, 246, .1);
    color: var(--lg-primary);
}
.lg-eye:focus-visible {
    outline: 2px solid rgba(111, 107, 246, .5);
    outline-offset: 1px;
}
.lg-eye .lg-eye-hide {
    display: none;
}
.lg-eye.is-on .lg-eye-show {
    display: none;
}
.lg-eye.is-on .lg-eye-hide {
    display: block;
}

/* 登录页验证码 */
.lg-cap-row {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.lg-cap-row .lg-input {
    flex: 1;
    min-width: 0;
    padding-left: .95rem;
    letter-spacing: .12em;
}
.lg-cap-row img {
    flex: 0 0 auto;
    width: auto;
    height: 2.95rem;
    min-width: 7rem;
    max-width: 9.5rem;
    border: 1px solid rgba(140, 140, 200, .22);
    border-radius: .8rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s;
}
.lg-cap-row img:hover {
    border-color: rgba(111, 107, 246, .5);
}

/* 注册页邮箱验证码行 */
.lg-code-row {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.lg-code-row .lg-control {
    flex: 1;
    min-width: 0;
}
.lg-code-row .lg-input {
    letter-spacing: .12em;
}
.lg-code-btn {
    flex: none;
    height: 2.95rem;
    padding: 0 .85rem;
    border: 1px solid rgba(111, 107, 246, .28);
    border-radius: .8rem;
    background: var(--lg-grad-soft);
    color: var(--lg-primary);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s, transform .2s var(--lg-ease);
}
.lg-code-btn:hover {
    border-color: rgba(111, 107, 246, .55);
    background: #fff;
}
.lg-code-btn:active {
    transform: scale(.98);
}
.lg-code-btn:focus-visible {
    outline: 2px solid rgba(111, 107, 246, .5);
    outline-offset: 2px;
}
.lg-code-btn:disabled {
    color: var(--lg-mute);
    background: rgba(255, 255, 255, .5);
    border-color: transparent;
    cursor: default;
    transform: none;
}

/* ------------------------------ 主按钮 ------------------------------ */

.lg-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-sizing: border-box;
    width: 100%;
    height: 3.1rem;
    margin-top: .35rem;
    padding: 0 1.1rem;
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
    background: var(--lg-grad);
    color: #fff;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(111, 107, 246, .28);
    transition: transform .22s var(--lg-ease), box-shadow .22s, filter .22s;
    animation: lg-fade-up .6s var(--lg-ease) .32s backwards;
}
.lg-submit::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -36%;
    width: 32%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    opacity: 0;
    transform: rotate(18deg);
}
.lg-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 16px 30px rgba(111, 107, 246, .34);
}
.lg-submit:hover::before {
    opacity: 1;
    animation: lg-sheen .9s var(--lg-ease);
}
.lg-submit:active {
    transform: translateY(0) scale(.99);
}
.lg-submit:focus-visible {
    outline: 2px solid rgba(111, 107, 246, .55);
    outline-offset: 3px;
}
.lg-arrow {
    width: 1.05rem;
    height: 1.05rem;
    transition: transform .22s var(--lg-ease);
}
.lg-submit:hover .lg-arrow {
    transform: translateX(4px);
}
.lg-spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lg-spin .7s linear infinite;
}
.lg-submit.is-loading {
    pointer-events: none;
    filter: saturate(.85);
}
.lg-submit.is-loading .lg-spinner {
    display: block;
}
.lg-submit.is-loading .lg-arrow {
    display: none;
}

/* ------------------------------ 底部 ------------------------------ */

.lg-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .7rem;
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--lg-line-2);
    color: var(--lg-sub);
    font-size: .8rem;
    animation: lg-fade-up .6s var(--lg-ease) .4s backwards;
}
.lg-alt a {
    color: var(--lg-primary);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
}
.lg-alt a:hover {
    color: #5b56e8;
    border-bottom-color: currentColor;
}
.lg-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c3c6dd;
}
.lg-foot {
    margin: 1rem 0 0;
    color: var(--lg-mute);
    font-size: .68rem;
    letter-spacing: .12em;
    text-align: center;
    animation: lg-fade-up .6s var(--lg-ease) .46s backwards;
}

.lg-legal {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: 27rem;
    margin-top: .9rem;
    animation: lg-fade-up .6s var(--lg-ease) .5s backwards;
}
.lg-legal .zl-disclaimer {
    margin: 0;
    padding: 0 .6rem;
    border: 0;
    background: transparent;
    color: var(--lg-mute);
    font-size: .7rem;
    line-height: 1.7;
    text-align: center;
}

/* ------------------------------ 注册页补充 ------------------------------ */

.lg-card--wide {
    max-width: 28.5rem;
}
.register-page .lg-legal {
    max-width: 28.5rem;
}
/* 表单内含隐藏域，用 nth-of-type 重排入场节奏 */
.register-page .lg-form > .lg-field:nth-of-type(1) { animation-delay: .14s; }
.register-page .lg-form > .lg-field:nth-of-type(2) { animation-delay: .2s; }
.register-page .lg-form > .lg-field:nth-of-type(3) { animation-delay: .26s; }
.register-page .lg-form > .lg-field:nth-of-type(4) { animation-delay: .32s; }
.register-page .lg-submit { animation-delay: .38s; }

/* 底部说明 */
.lg-note {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 1rem 0 0;
    color: var(--lg-mute);
    font-size: .72rem;
    line-height: 1.6;
}
.lg-note svg {
    flex: none;
    width: .95rem;
    height: .95rem;
    margin-top: .1rem;
    color: #9aa0c0;
}
.register-page .lg-note {
    animation: lg-fade-up .6s var(--lg-ease) .42s backwards;
}

/* ------------------------------ 验证码浮层 ------------------------------ */

.lg-mask {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 1.1rem;
    background: rgba(37, 39, 69, .38);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .22s var(--lg-ease);
}
.lg-mask[hidden] {
    display: none;
}
.lg-mask.is-open {
    opacity: 1;
}
.lg-dialog {
    box-sizing: border-box;
    width: 100%;
    max-width: 22.5rem;
    padding: 1.35rem 1.3rem 1.25rem;
    border: 1px solid var(--lg-line);
    border-radius: 1.375rem;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 30px 80px rgba(50, 50, 120, .3), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    transform: translateY(10px) scale(.98);
    transition: transform .26s var(--lg-ease);
}
.lg-mask.is-open .lg-dialog {
    transform: none;
}
.lg-dialog h3 {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: var(--lg-ink);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -.01em;
}
.lg-dialog h3 svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--lg-primary);
}
.lg-dialog-sub {
    margin: .4rem 0 1rem;
    color: var(--lg-ink-2);
    font-size: .75rem;
    line-height: 1.65;
}
.lg-dialog-row {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.lg-cap-img {
    flex: none;
    width: auto;
    max-width: 9.5rem;
    height: 2.95rem;
    border: 1px solid rgba(140, 140, 200, .22);
    border-radius: .8rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s;
}
.lg-cap-img:hover {
    border-color: rgba(111, 107, 246, .5);
}
.lg-cap-input {
    flex: 1;
    min-width: 0;
    height: 2.95rem;
    padding: 0 .8rem;
    letter-spacing: .12em;
}
.lg-dialog .lg-hint a {
    color: var(--lg-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(111, 107, 246, .35);
}
.lg-dialog .lg-hint a:hover {
    border-bottom-color: currentColor;
}
.lg-cap-error {
    display: none;
    margin: .55rem 0 0;
    color: #c0304f;
    font-size: .74rem;
    line-height: 1.5;
}
.lg-cap-error.is-show {
    display: block;
}
.lg-dialog-actions {
    display: flex;
    gap: .55rem;
    margin-top: 1.1rem;
}
.lg-btn-ghost,
.lg-btn-solid {
    flex: 1;
    height: 2.85rem;
    border-radius: .8rem;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s, background .2s, filter .2s, transform .2s var(--lg-ease);
}
.lg-btn-ghost {
    border: 1px solid var(--lg-line-2);
    background: rgba(255, 255, 255, .7);
    color: var(--lg-ink-2);
}
.lg-btn-ghost:hover {
    border-color: rgba(120, 120, 180, .28);
    background: #fff;
}
.lg-btn-solid {
    border: 0;
    background: var(--lg-grad);
    color: #fff;
    box-shadow: 0 12px 22px rgba(111, 107, 246, .26);
}
.lg-btn-solid:hover {
    filter: brightness(1.05);
}
.lg-btn-ghost:active,
.lg-btn-solid:active {
    transform: scale(.985);
}
.lg-btn-ghost:focus-visible,
.lg-btn-solid:focus-visible {
    outline: 2px solid rgba(111, 107, 246, .55);
    outline-offset: 2px;
}
.lg-btn-ghost:disabled,
.lg-btn-solid:disabled {
    opacity: .6;
    cursor: default;
    transform: none;
    filter: none;
}

/* ------------------------------ 动效 ------------------------------ */

@keyframes lg-card-in {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to { opacity: 1; transform: none; }
}
@keyframes lg-fade-up {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: none; }
}
@keyframes lg-float-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(5vw, 4vh, 0) scale(1.12); }
}
@keyframes lg-float-b {
    from { transform: translate3d(0, 0, 0) scale(1.06); }
    to { transform: translate3d(-5vw, -3vh, 0) scale(.94); }
}
@keyframes lg-blob-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(4vw, 5vh, 0) scale(1.1); }
}
@keyframes lg-blob-b {
    from { transform: translate3d(0, 0, 0) scale(1.06); }
    to { transform: translate3d(-4vw, -4vh, 0) scale(.94); }
}
@keyframes lg-sheen {
    from { translate: -30% 0; opacity: 0; }
    35% { opacity: .9; }
    to { translate: 430% 0; opacity: 0; }
}
@keyframes lg-spin {
    to { transform: rotate(360deg); }
}
@keyframes lg-shake {
    0%, 100% { transform: translateX(0); }
    22% { transform: translateX(-4px); }
    44% { transform: translateX(4px); }
    66% { transform: translateX(-3px); }
    84% { transform: translateX(2px); }
}

/* ------------------------------ 响应式 ------------------------------ */

@media (max-width: 600px) {
    .lg-main {
        justify-content: flex-start;
        padding: 1.1rem .9rem 1.8rem;
    }
    .lg-card {
        padding: 1.35rem 1.1rem 1.4rem;
        border-radius: 1.3rem;
    }
    .lg-head {
        margin-bottom: 1.15rem;
    }
    .lg-head h1 {
        font-size: 1.3rem;
    }
    .lg-brand {
        font-size: 1.02rem;
    }
    .lg-logo {
        width: 1.95rem;
        height: 1.95rem;
    }
    .lg-input,
    .lg-cap-row img,
    .lg-code-btn {
        height: 3.05rem;
        font-size: 16px;
    }
    .lg-code-btn {
        padding: 0 .65rem;
        font-size: .74rem;
    }
    .lg-dialog {
        padding: 1.2rem 1.1rem 1.1rem;
    }
    .lg-submit {
        height: 3.15rem;
        font-size: .9rem;
    }
    .lg-legal .zl-disclaimer {
        font-size: .68rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.login-page::before,
    body.login-page::after,
    body.login-page *,
    body.login-page *::before,
    body.login-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}