body:not(.account-ready) .layout { visibility: hidden; }
.account-login { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(460px, 90vw); padding: 32px; z-index: 5; }
.account-login h1 { font-size: 28px; }
.account-login p { line-height: 1.6; }
.account-login-link { display: block; text-align: center; border-radius: 10px; background: #e1f0e5; color: #193a30; padding: 14px; margin-top: 24px; text-decoration: none; }
.account-switch { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: inherit; text-align: left; padding: 12px 0; }
.account-switch::before { content: ''; flex: none; width: 38px; height: 22px; border-radius: 20px; background: radial-gradient(circle at 11px 11px, white 8px, transparent 9px), #63707b; }
.account-switch[aria-checked=true]::before { background: radial-gradient(circle at 27px 11px, white 8px, transparent 9px), #26865c; }
#account-dialog { width: min(550px, 92vw); max-height: 88vh; overflow-y: auto; }
.account-session { border-top: 1px solid #ffffff30; padding: 14px 0; }
.account-session p { font-size: 12px; overflow-wrap: anywhere; }
.account-session small { opacity: .8; }
#account-dialog > button, #account-conflict button { display: block; width: 100%; padding: 12px; border: 1px solid #ffffff40; border-radius: 9px; margin: 12px 0; }
.account-danger { background: #952d42; color: white; }