html[data-auth-state="pending"] body > :not(script):not(#authStatus) { visibility: hidden !important; pointer-events: none !important; }
.auth-status { position: fixed; inset: 0; z-index: 100000; display: flex; gap: 12px; flex-wrap: wrap; align-content: center; justify-content: center; padding: 24px; background: #f6f5f3; text-align: center; }
.auth-status p { flex: 0 0 100%; }
.auth-signout { margin: 16px; flex-shrink: 0; }
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-form { width: min(100%, 360px); display: grid; gap: 20px; }
.login-brand { width: 230px; height: 80px; object-fit: contain; margin-bottom: 16px; }
.login-form h1 { font-size: 24px; margin: 0; }
.login-form label { display: grid; gap: 8px; }
.login-form input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); font: inherit; }
.login-page { height: auto; overflow: auto; }
.login-error { color: #b53042; min-height: 22px; margin: 0; }
.login-page #authStatus { position: static; padding: 0; background: transparent; }
@media (max-width: 768px) { .auth-signout { margin: 8px; } }