/* Authentication and playback recovery additions. */
#login-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:32px;overscroll-behavior:contain;background:color-mix(in srgb,var(--solid) 93%,transparent)}
#login-dialog[open]{animation:auth-enter .2s ease-out}
#login-dialog::backdrop{background:#0005;animation:auth-backdrop .2s ease-out}
#login-dialog .login-heading{margin:4px 0 24px}
#login-dialog .login-heading p{margin:8px 0 0;line-height:1.6}
#login-dialog .auth-field{margin-bottom:14px}
#login-dialog .auth-field>label{display:block;margin:0 0 6px;font-size:12px;color:var(--ink)}
#login-dialog .auth-input{position:relative}
#login-dialog .auth-input input{display:block;width:100%;margin:0;min-height:44px;font-size:14px;background:var(--surface)}
#login-dialog .auth-input:has(.password-toggle) input{padding-right:60px}
#login-dialog .password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:7px;font-size:11px;color:var(--muted)}
#login-dialog input[aria-invalid=true]{border-color:#cb5555}
#login-dialog .field-error{display:block;color:#cb5555;font-size:11px;line-height:1.6}
#login-dialog .field-error:not(:empty){margin-top:5px}
#login-error{font-size:12px;min-height:0;margin:0;overflow-wrap:anywhere}
#login-error:not(:empty){margin:4px 0 14px;padding:10px 12px;background:#cb55550b;border-radius:9px}
#login-form>.button{width:100%;min-height:44px;border-radius:12px;margin-top:6px}
#login-dialog .auth-switch{display:flex;justify-content:center;gap:6px;margin:20px 0 0;font-size:12px}
.auth-switch button{color:var(--accent);padding:0 3px}
#login-dialog .auth-note{font-size:10px;text-align:center;margin:16px 0 0;color:var(--muted)}
.player-recovery{position:absolute;inset:44% 12px auto;display:flex;justify-content:center;gap:12px;z-index:8}
.player-recovery button{padding:8px 14px;border:1px solid #ffffff40;border-radius:9px;background:#252525e8;color:white;font-size:12px}
.player-recovery:not([hidden])~.player-center-play{display:none}
.player-stage:has(.player-recovery:not([hidden])) .player-message{padding-bottom:100px}
@keyframes auth-enter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes auth-backdrop{from{opacity:0}to{opacity:1}}
@media(max-width:480px){#login-dialog{padding:26px 22px}#login-dialog .login-heading{margin-bottom:20px}#login-dialog .auth-input input{font-size:16px}.player-recovery button{font-size:10px;padding:5px 10px}.player-stage:has(.player-recovery:not([hidden])) .player-message{padding-bottom:75px}}
@media(prefers-reduced-motion:reduce){#login-dialog[open],#login-dialog::backdrop{animation:none}}