/* Credential feedback is decorative; authentication stays on the server. */
#loginScene{--login-error:#ff4d6a}
#loginPanel{position:relative}
#loginPanel::after{content:'';position:absolute;inset:0;pointer-events:none;background:rgba(255,77,106,.045);box-shadow:inset 0 0 0 1px rgba(255,77,106,.22);opacity:0;transition:opacity .24s ease}
#loginPanel.credentials-rejected::after{opacity:1}
#loginPanel.credentials-rejected .err-box.show{animation:none}
#loginPanel.credentials-rejected,#loginScene.credentials-rejected>.brand{animation:credential-shake .32s ease-in-out}
#passField.auth-step-visible{overflow:hidden}
@keyframes credential-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
/* Typed colors let the original gradient crossfade instead of switching abruptly. */
@property --login-action-start{syntax:"<color>";inherits:false;initial-value:#00E279}
@property --login-action-end{syntax:"<color>";inherits:false;initial-value:#00c96b}
#loginBtn,#loginScene .logo-box{--login-action-start:var(--accent);--login-action-end:var(--accent2);background:linear-gradient(135deg,var(--login-action-start),var(--login-action-end));transition:--login-action-start .32s ease,--login-action-end .32s ease,transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease,filter .2s ease}
#loginScene .brand-headline .hi{transition:color .32s ease}
#loginPanel>.field label{transition:color .32s ease}
#loginPanel>.field input{transition:background-color .32s ease,border-color .32s ease,box-shadow .32s ease,color .32s ease}
#loginScene.credentials-rejected .brand-headline .hi{color:var(--login-error)}
#loginScene.credentials-rejected #loginBtn,#loginScene.credentials-rejected .logo-box{--login-action-start:var(--login-error);--login-action-end:#dd4964;box-shadow:0 7px 24px rgba(255,77,106,.16)}
#loginPanel.credentials-rejected>.field label{color:#ff8d9f}
#loginPanel.credentials-rejected>.field input{border-color:rgba(255,77,106,.48);background-color:#332b33;background-color:color-mix(in srgb,var(--surface2)92%,var(--login-error));box-shadow:0 0 0 2px rgba(255,77,106,.045)}
#loginPanel.credentials-rejected>.field input:focus{border-color:var(--login-error);box-shadow:0 0 0 3px rgba(255,77,106,.12)}
@media(prefers-reduced-motion:reduce){#loginPanel.credentials-rejected,#loginScene.credentials-rejected>.brand{animation:none!important}#loginPanel::after,#loginBtn,#loginScene .logo-box,#loginScene .brand-headline .hi,#loginPanel>.field label,#loginPanel>.field input{transition:none!important}}
#passField.auth-step-visible:focus-within{overflow:visible}