/**
 * 登录页：深空极光背景 + 居中玻璃卡片。
 */

/* ============ 极光背景 ============ */
.aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(130% 100% at 50% -10%, var(--bg-deep), var(--bg-void) 68%);
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    will-change: transform;
}

.aurora-blob.hot {
    width: 58vmax;
    height: 58vmax;
    top: -22vmax;
    left: -18vmax;
    opacity: 0.42;
    background: radial-gradient(circle, var(--brand-hot), transparent 62%);
    animation: aurora-hot 34s ease-in-out infinite;
}

.aurora-blob.cool {
    width: 52vmax;
    height: 52vmax;
    right: -20vmax;
    bottom: -24vmax;
    opacity: 0.34;
    background: radial-gradient(circle, var(--brand-cool), transparent 64%);
    animation: aurora-cool 42s ease-in-out infinite;
}

.aurora-blob.veil {
    width: 62vmax;
    height: 30vmax;
    top: 28%;
    left: 12%;
    opacity: 0.24;
    background: radial-gradient(ellipse at center, #6a4bff, transparent 68%);
    animation: aurora-veil 50s ease-in-out infinite;
}

@keyframes aurora-hot {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(14vmax, 9vmax, 0) scale(1.16); }
}

@keyframes aurora-cool {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
    50% { transform: translate3d(-13vmax, -8vmax, 0) scale(0.92); }
}

@keyframes aurora-veil {
    0%, 100% { transform: translate3d(-6vmax, 0, 0) rotate(-8deg); }
    50% { transform: translate3d(8vmax, -6vmax, 0) rotate(9deg); }
}

/* ============ 卡片 ============ */
.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--sp-24) var(--sp-20);
}

.login-card {
    width: 100%;
    max-width: 380px;
    padding: var(--sp-40) var(--sp-32) var(--sp-32);
    border-radius: var(--r-xl);
    animation: login-in var(--dur-slow) var(--ease-out) both;
}

@keyframes login-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.login-logo {
    font-size: var(--fs-34);
    font-weight: 800;
    letter-spacing: var(--title-tracking);
    text-align: center;
    background: linear-gradient(118deg, var(--brand-hot), var(--brand-cool));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.login-subtitle {
    margin: var(--sp-8) 0 var(--sp-32);
    text-align: center;
    font-size: var(--fs-13);
    color: var(--text-2);
}

.login-field + .login-field {
    margin-top: var(--sp-16);
}

.login-field .form-input {
    height: 46px;
    border-radius: var(--r-md);
}

/* 聚焦时的主题色描边光晕 */
.login-field .form-input:focus {
    border-color: var(--theme);
    box-shadow: 0 0 0 3px var(--theme-soft), 0 0 22px var(--theme-glow);
}

.login-btn {
    width: 100%;
    height: 48px;
    margin-top: var(--sp-24);
    font-size: var(--fs-17);
    border-radius: var(--r-md);
}

.login-btn .spinner {
    width: 18px;
    height: 18px;
    border-color: rgba(255, 255, 255, 0.32);
    border-top-color: #fff;
}

.login-btn:not(.is-loading) .spinner {
    display: none;
}

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-8);
    margin-top: var(--sp-20);
    padding: 10px var(--sp-12);
    border: 1px solid rgba(255, 77, 94, 0.34);
    border-radius: var(--r-sm);
    background: rgba(255, 77, 94, 0.12);
    color: #ff8b95;
    font-size: var(--fs-13);
    line-height: 1.5;
    animation: alert-in var(--dur-base) var(--ease-out) both;
}

.login-alert svg {
    flex: 0 0 16px;
    margin-top: 2px;
}

@keyframes alert-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.login-foot {
    margin-top: var(--sp-24);
    text-align: center;
    font-size: var(--fs-11);
    color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) {
    .aurora-blob {
        animation: none;
    }
}

@media (max-width: 420px) {
    .login-card {
        padding: var(--sp-32) var(--sp-20) var(--sp-24);
    }
}