/* Campos compartilhados de autenticação usados pelo perfil e pela recuperação de senha. */
.auth-field { display: block; margin-top: 16px; }
.auth-field > span:first-child { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 2px; font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 1.8px; color: #7d7d89; }
.auth-input { position: relative; display: flex; align-items: center; width: 100%; min-height: 54px; padding: 0 10px 0 15px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); cursor: text; transition: border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.auth-input:focus-within { border-color: rgba(255, 37, 64, .58); background: rgba(255, 37, 64, .055); box-shadow: 0 0 0 3px rgba(255, 37, 64, .06), inset 0 0 24px rgba(255, 37, 64, .035); }
.auth-input > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-right: 12px; color: #696975; pointer-events: none; }
.auth-input input { flex: 1 1 0; width: 0; min-width: 0; height: 52px; padding: 0; border: 0; outline: 0; background: transparent; color: #f4f4f7; font-family: var(--mono); font-size: 13px; letter-spacing: .45px; }
.auth-input input::placeholder { color: #4f4f5b; }
/* Mantém o fundo transparente também quando o navegador preenche os campos automaticamente. */
.auth-input input:-webkit-autofill { -webkit-text-fill-color: #f4f4f7; caret-color: #f4f4f7; filter: none; transition: background-color 100000s ease 0s, color 100000s ease 0s !important; }
.auth-input button { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; color: #62626e; }
.auth-input button:hover { color: var(--red-soft); }
.auth-input button svg { width: 16px; height: 16px; }

.turnstile-box { display: flex; align-items: center; justify-content: center; min-height: 67px; border: 1px dashed rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .02); }
.turnstile-box.ready { border-color: transparent; background: none; }
.turnstile-box > div { width: 100%; }
.turnstile-wait { font-family: var(--mono); font-size: 11px; color: #5b5b67; }

.auth-submit { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 18px; padding: 0 24px; overflow: hidden; border: 0; background: linear-gradient(180deg, var(--red), var(--red-deep)); box-shadow: 0 14px 30px rgba(160, 8, 30, .34), inset 0 1px rgba(255, 255, 255, .25); color: #fff; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 1.3px; transition: filter .2s ease, transform .2s ease, opacity .2s ease; }
.auth-submit > * { position: relative; z-index: 5; }
.auth-submit svg { width: 17px; height: 17px; }
.auth-submit .i-fill { width: 20px; height: 20px; }
.auth-submit:hover:enabled { filter: brightness(1.1); transform: translateY(-1px); }
.auth-submit:disabled { filter: grayscale(.6); opacity: .55; }
.auth-submit.busy { cursor: wait; }
.auth-message { display: flex; align-items: flex-start; gap: 9px; min-height: 34px; margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .06); }
.auth-message > span { flex-shrink: 0; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: #555561; }
.auth-message p { font-size: 13px; line-height: 1.5; color: #747480; }
.auth-message.checking > span { border: 1px solid var(--amber); border-right-color: transparent; background: transparent; animation: spin .8s linear infinite; }
.auth-message.checking p { color: #ae9775; }
.auth-message.error > span, .auth-message.ok > span { background: var(--red); box-shadow: 0 0 10px rgba(255, 37, 64, .7); }
.auth-message.error p { color: #ff97a5; }
.auth-message.ok p { color: #ff9cab; }