.auth-form{--auth-bg:var(--color-bg-primary,#0a0a0a);--auth-field:var(--color-bg-primary,#0a0a0a);--auth-border:var(--color-border,#262626);--auth-border-hover:var(--color-border-hover,#3a3a3c);--auth-text:var(--color-text-primary,#f5f5f7);--auth-muted:var(--color-text-secondary,#a1a1a6);--auth-focus:var(--ev-color-accent,var(--color-accent-blue,#0a84ff));display:grid;gap:14px;margin-top:24px;text-align:left;color:var(--auth-text)}
.auth-form[hidden]{display:none!important}
.auth-turnstile[hidden]{display:none!important}
.auth-field{display:grid;gap:8px}
.auth-field label{font-size:13px;font-weight:500;color:var(--auth-text)}
.auth-input{position:relative;display:flex;align-items:center}
.auth-input svg{position:absolute;left:13px;width:16px;height:16px;color:var(--auth-muted);pointer-events:none;transition:color var(--ev-transition,.18s ease)}
/* :is() with an unused id outranks page-level input rules such as .creator input:not(...) in create.css */
:is(.auth-form,#auth-specificity) .auth-input input{width:100%;min-height:44px;margin:0;padding:10px 14px 10px 40px;border:1px solid var(--auth-border);border-radius:10px;background:var(--auth-field);color:var(--auth-text);font:inherit;font-size:15px;box-shadow:none;transition:border-color var(--ev-transition,.18s ease),box-shadow var(--ev-transition,.18s ease)}
:is(.auth-form,#auth-specificity) .auth-input input::placeholder{color:var(--auth-muted);opacity:.7}
:is(.auth-form,#auth-specificity) .auth-input input:hover{border-color:var(--auth-border-hover)}
:is(.auth-form,#auth-specificity) .auth-input input:focus{outline:none;border-color:var(--auth-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-focus) 22%,transparent)}
.auth-input:focus-within svg{color:var(--auth-text)}
:is(.auth-form,#auth-specificity) .auth-input input[aria-invalid=true]{border-color:var(--color-error,#ff453a)}
.auth-code input{font-family:var(--font-mono,monospace);letter-spacing:.3em}
.auth-form .auth-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:4px 0 0;padding:10px 16px;border:1px solid var(--auth-text);border-radius:10px;background:var(--auth-text);color:var(--auth-bg);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:opacity var(--ev-transition,.18s ease),transform var(--ev-transition,.18s ease)}
.auth-form .auth-submit:hover:not(:disabled){background:var(--auth-text);opacity:.9}
.auth-form .auth-submit:active:not(:disabled){transform:translateY(1px)}
.auth-form .auth-submit:focus-visible{outline:2px solid var(--auth-focus);outline-offset:3px}
.auth-submit svg{width:16px;height:16px;transition:transform var(--ev-transition,.18s ease)}
.auth-submit:hover:not(:disabled) svg{transform:translateX(2px)}
.auth-form .auth-submit:disabled,#confirm-login:disabled{opacity:.65;cursor:wait}
.auth-submit[aria-busy=true] svg{display:none}
.auth-submit[aria-busy=true]::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:auth-spin .7s linear infinite}
.auth-form .auth-hint{margin:0;font-size:12px;line-height:1.5;color:var(--auth-muted);text-align:center}
.auth-form .auth-status{margin:0;padding:10px 12px;border:1px solid var(--auth-border);border-radius:10px;background:var(--auth-field);font-size:13px;line-height:1.5;color:var(--auth-text);overflow-wrap:anywhere}
.auth-status:empty{display:none}
.auth-divider{display:flex;align-items:center;gap:12px;margin:6px 0 2px;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--auth-muted)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--auth-border)}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.auth-submit[aria-busy=true]::before{animation-duration:2s}.auth-submit svg,.auth-form .auth-submit{transition:none}}