/* 登录页独立色板，避免影响后台页面和组件库弹窗。 */
.login-page {
    --login-bg: #080e12;
    --login-particle-color: #93ddc6;
    --login-particle-secondary: #73f6d2;
    --login-particle-line: #61b89e;
    --login-ink: #f0f5f4;
    --login-muted: #9eb4ad;
    --login-line: rgba(148, 187, 185, 0.18);
    --login-mint: #72f6d1;
    --login-cyan: #67dce4;
    --login-card-bg: linear-gradient(140deg, #152021, #0c1519);
    --login-input-bg: #101e20;
    --login-input-ink: #f1faf7;
    --login-input-placeholder: #98b4a9;
    --login-input-border: #3a5650;
    --login-accent-ink: #10392c;
    --login-accent-bg: linear-gradient(105deg, #b5f6d8, #6eebc4);
    --login-accent-border: #b4ffe4;
    --login-error: #ffb8a5;
    --login-card-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
    --login-card-edge: rgba(166, 228, 200, 0.26);
    --login-aura: rgba(36, 117, 94, 0.2);
    --login-grid: rgba(131, 189, 177, 0.04);
    --login-core-filter: drop-shadow(0 0 28px rgba(58, 243, 192, 0.08));
    --login-ease: cubic-bezier(0.22, 1, 0.36, 1);
    min-height: 100svh;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background: var(--login-bg);
    color: var(--login-ink);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color-scheme: dark;
}

/* Light 保留薄荷科技风，同时提高表单与背景的文字对比。 */
[data-bs-theme="light"] .login-page {
    --login-bg: #eef6f5;
    --login-particle-color: #1c8572;
    --login-particle-secondary: #087f65;
    --login-particle-line: #1e8270;
    --login-ink: #142f32;
    --login-muted: #4e6d69;
    --login-line: rgba(39, 101, 91, 0.18);
    --login-mint: #087f65;
    --login-cyan: #137e91;
    --login-card-bg: linear-gradient(140deg, #ffffff, #f8fcfb);
    --login-input-bg: #f2f8f6;
    --login-input-ink: #173c34;
    --login-input-placeholder: #57746c;
    --login-input-border: #a8c2b9;
    --login-accent-ink: #ffffff;
    --login-accent-bg: linear-gradient(105deg, #127b60, #096c64);
    --login-accent-border: #107c61;
    --login-error: #b33328;
    --login-card-shadow: 0 24px 70px rgba(42, 97, 85, 0.12);
    --login-card-edge: rgba(40, 110, 90, 0.24);
    --login-aura: rgba(71, 197, 160, 0.16);
    --login-grid: rgba(43, 125, 107, 0.075);
    --login-core-filter: drop-shadow(0 14px 24px rgba(32, 98, 95, 0.1));
    color-scheme: light;
}

.login-page .ambient {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 51%, var(--login-aura), transparent 47%),
        radial-gradient(ellipse at 91% 3%, var(--login-aura), transparent 35%);
}

.login-page .ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--login-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--login-grid) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 39% 52%, #000, transparent 73%);
}

.login-page .ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.22' filter='url(%23n)'/%3E%3C/svg%3E");
}

.login-page #login-particles {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.75;
}

/* 消除粒子画布的行内基线留白，避免背景撑出页面滚动条。 */
.login-page #login-particles > canvas {
    display: block;
}

/* JS 动效开关和系统减少动态效果设置均只作用于登录页。 */
.login-page.motion-off *,
.login-page.motion-off *::before,
.login-page.motion-off *::after {
    animation: none !important;
    transition: none !important;
}

.login-page.motion-off .reactor {
    transform: none !important;
}

.login-page.motion-off #login-particles {
    opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
    .login-page *,
    .login-page *::before,
    .login-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .login-page .reactor {
        transform: none !important;
    }
}