:root {
    --bg: #f7f9fc;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --accent: #3b82f6;
    --particle: 96, 165, 250;
    --glow: 96, 165, 250;
}

.dark {
    --bg: #0b0d12;
    --card: #18181b;
    --text: #f8fafc;
    --muted: #94a3b8;
    --accent: #38bdf8;
    --particle: 56, 189, 248;
    --glow: 56, 189, 248;
}

.login-page {
    position: relative;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

.particle-canvas {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.login-page:not(.dark) .particle-canvas {
    opacity: 0.85;
}

.glow-layer {
    position: fixed;
    inset: -10%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(520px 360px at var(--glow-x, 50vw) var(--glow-y, 40vh), rgba(var(--glow), 0.12), transparent 70%);
    transition: background 200ms ease;
    opacity: 0.6;
}

.dark .glow-layer {
    background: radial-gradient(520px 360px at var(--glow-x, 50vw) var(--glow-y, 40vh), rgba(var(--glow), 0.28), transparent 70%);
}

.login-shell {
    position: relative;
    z-index: 10;
}

.login-card {
    position: relative;
    z-index: 10;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 140ms ease;
    background: var(--card);
}

@media (prefers-reduced-motion: reduce) {
    .login-card {
        transition: none;
        transform: none !important;
    }
}