/* Shared auth motion is short and interaction-led; no perpetual background effects. */
.auth-page { overflow-x: clip; }
.auth-page .login-card { position: relative; border-radius: 14px; background: #141318; box-shadow: 0 20px 64px #0003, inset 0 1px #ffffff06; animation: auth-arrive .45s cubic-bezier(.2,.8,.2,1) both; transition: border-color .25s, box-shadow .25s; }
.auth-page .login-card:focus-within { border-color: #d0bcff38; box-shadow: 0 20px 64px #0003, 0 0 0 1px #d0bcff06; }
.auth-page .login-card h1 { margin-bottom: 29px; font-size: 28px; font-weight: 600; }
.auth-page .account-form > div { animation: auth-field-in .38s ease-out both; }
.auth-page .account-form > div:nth-child(1) { animation-delay: .05s; }
.auth-page .account-form > div:nth-child(2) { animation-delay: .09s; }
.auth-page .account-form > div:nth-child(3) { animation-delay: .13s; }
.auth-page .account-form > div:nth-child(4) { animation-delay: .17s; }
.auth-page .account-form > div > label { transition: color .18s; }
.auth-page .account-form > div:focus-within > label { color: #d0bcff; }
.auth-page :is(input,button,a):focus-visible { outline: 2px solid #d0bcff; outline-offset: 4px; }
.auth-page input:focus-visible { outline: none; }
.auth-page input { transition: border-color .2s, box-shadow .2s, background .2s; }
.auth-page input:focus { background: #131117; }
.auth-page input[aria-invalid="true"] { border-color: #dd8a94; box-shadow: 0 0 0 3px #dd8a9410; }
.auth-page .account-button, .console-preview .account-button { position: relative; isolation: isolate; overflow: hidden; transition: transform .16s, box-shadow .2s, border-color .2s, background .2s; }
.auth-page .account-button { min-height: 46px; }
.auth-page .account-button:active:not(:disabled) { transform: translateY(1px) scale(.992); }
.auth-page .account-button.primary:hover { box-shadow: 0 4px 20px #d0bcff1c; }
.auth-page .account-button.primary::after { position: absolute; z-index: -1; content: ''; inset: 0; background: linear-gradient(110deg, transparent 25%, #fff4 48%, transparent 72%); transform: translateX(-120%); transition: transform .55s; pointer-events: none; }
.auth-page .account-button.primary:hover::after, .auth-page .account-button.primary:focus-visible::after { transform: translateX(120%); }
.button-arrow { display: inline-block; transition: transform .2s; }
.account-button:hover .button-arrow { transform: translateX(3px); }
.auth-switch { margin-top: 23px; padding-top: 21px; border-top: 1px solid #ffffff0e; }
.auth-secondary { color: #c9c3d2; background: transparent; }
.auth-secondary:hover { color: #f4effc; border-color: #d0bcff4a; background: #d0bcff08; }
.auth-switch-inline { display: flex; align-items: center; justify-content: center; gap: 8px; color: #96909f; font-size: 12px; }
.auth-login-link { position: relative; padding-block: 4px; color: #d0bcff; }
.auth-login-link::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.auth-login-link:hover::after, .auth-login-link:focus-visible::after { transform: scaleX(1); }
.register-page .login-layout { width: min(460px, calc(100% - 32px)); }
.register-page .login-card { max-width: 460px; }
.register-page .account-form { gap: 18px; }
.auth-field .input-error { color: #efadb7; font-size: 11px; line-height: 1.5; animation: auth-field-in .18s ease-out; }
.input-error:empty { display: none; }
.password-meter { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; height: 3px; margin-top: -2px; opacity: 0; transition: opacity .2s; }
.password-meter[aria-hidden="false"] { opacity: 1; }
.password-meter span { border-radius: 2px; background: #ffffff0f; transition: background .25s; }
.password-meter[data-level="1"] span:nth-child(-n+1), .password-meter[data-level="2"] span:nth-child(-n+2), .password-meter[data-level="3"] span:nth-child(-n+3), .password-meter[data-level="4"] span { background: #b29dd6; }
.auth-ripple { position: absolute; z-index: 0; width: 20px; height: 20px; border-radius: 50%; background: #ffffff38; pointer-events: none; animation: auth-ripple .6s ease-out forwards; }
.auth-page .form-message:not(:empty) { animation: auth-field-in .2s ease-out both; }
.console-preview .console-content > * { animation: auth-field-in .25s ease-out both; }
.console-preview .account-dialog[open] { animation: auth-arrive .22s ease-out both; }
.console-preview .account-dialog[open]::backdrop { animation: auth-backdrop .22s ease-out both; }
@keyframes auth-arrive { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes auth-field-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes auth-ripple { from { opacity: .6; transform: translate(-50%,-50%) scale(0); } to { opacity: 0; transform: translate(-50%,-50%) scale(var(--ripple-scale,30)); } }
@keyframes auth-backdrop { from { opacity: 0; } to { opacity: 1; } }
@media (hover: none) { .auth-page .account-button.primary::after { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .auth-page *, .auth-page *::before, .auth-page *::after, .console-preview *, .console-preview *::before, .console-preview *::after { animation: none !important; transition: none !important; }
}