/* Sign-in screen. */

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card {
    position: relative; overflow: hidden;
    width: min(410px, 100%); text-align: center;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 26px;
    padding: 38px 30px 30px; display: flex; flex-direction: column; align-items: center; gap: 16px;
    box-shadow: var(--shadow), 0 0 120px rgba(var(--accent-rgb), .18); backdrop-filter: blur(16px);
    animation: dialog-in .7s var(--ease-out) both;
}
.login-card > * { position: relative; z-index: 1; }
.login-card::before {
    content: ""; position: absolute; inset: -40%; pointer-events: none;
    background: conic-gradient(from 0deg, transparent, rgba(139, 92, 246, .22), transparent 30%, rgba(89, 195, 245, .18), transparent 60%);
    animation: spin 14s linear infinite;
}
.login-card::after { content: ""; position: absolute; inset: 1px; border-radius: 25px; background: var(--surface-solid); opacity: .82; pointer-events: none; }
.login-logo {
    width: 128px; height: 128px; border-radius: 50%; z-index: 1;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .06), 0 12px 50px rgba(120, 100, 255, .5);
    animation: float 6s ease-in-out infinite;
}
.login-title {
    z-index: 1; font-family: var(--brand); font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text);
}
.login-card p { margin: 0; z-index: 1; }
.login-card .btn.block { z-index: 1; background: #5865f2; border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(88, 101, 242, .38); }
.login-card .btn.block:hover { filter: brightness(1.1); box-shadow: 0 10px 32px rgba(88, 101, 242, .5); }
.login-card .error-box { width: 100%; z-index: 1; }
.login-foot { z-index: 1; font-size: 12px; color: var(--faint); }