#login-redirect-dialog { width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 20px 70px #0003; overflow-y: auto; }
#login-redirect-dialog::backdrop { background: rgb(12 32 25 / 35%); }
.login-redirect-content { padding: 28px; }
.login-redirect-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); font-size: 24px; }
.login-redirect-content h2 { margin: 18px 0 10px; font-size: 20px; }
.login-redirect-content p { margin: 0; color: var(--ink-soft); line-height: 1.8; }
.login-redirect-content strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.login-redirect-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.login-redirect-actions .btn { min-height: 42px; }
body.login-redirect-open { overflow: hidden; }
@media (max-width: 399px) { .login-redirect-content { padding: 22px; } .login-redirect-actions .btn { flex: 1; } }
/* Keep the page background steady while content fades into the login screen. */
body.login-transition-out > :not(script):not(link) { opacity: 0; transition: opacity 160ms ease; pointer-events: none; }
body.login-transition-out #login-redirect-dialog::backdrop { background: transparent; transition: background 160ms ease; }
body.peek-login .peek-layout { animation: login-page-enter 180ms ease-out both; }
@keyframes login-page-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { body.login-transition-out > :not(script):not(link) { transition: none; } body.peek-login .peek-layout { animation: none; } }