/* FOCCUS — tela de entrada. Sempre escura, com o logotipo branco. */
body.locked #main,body.locked .tabbar,body.locked #mini,body.locked #tour{display:none}
.auth{
  --papel:#050505;--nevoa:#151515;--grafite:#8F8B84;--tinta:#F4F2EE;--linha:rgba(244,242,238,.12);
  position:fixed;inset:0;z-index:200;overflow:auto;display:flex;justify-content:center;
  padding:max(40px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  color:var(--tinta);color-scheme:dark;
  background:transparent;
}
.auth[hidden]{display:none}
.auth-box{width:100%;max-width:400px;margin:auto 0;display:flex;flex-direction:column;gap:32px;animation:rise .5s var(--ease) both}
.brand{display:flex;align-items:center;gap:calc(var(--bh) * .34);height:var(--bh);--bh:min(44px,10vw);--wmk:1.266}
.brand img{height:var(--bh);width:auto;display:block}
.brand .wm{font-family:'Unbounded','Switzer',sans-serif;font-weight:600;line-height:1;letter-spacing:-.01em;font-size:calc(var(--bh) * var(--wmk));white-space:nowrap}
.atitle{margin:-8px 0 -8px}
.auth .mono{color:var(--tinta)}       /* rótulos (nome de usuário, email, senha...) em branco, para destacar no fundo da galáxia */
.auth form{display:flex;flex-direction:column;gap:16px}
.af{display:flex;flex-direction:column;gap:8px}
.pw{position:relative;display:block}
.pw .field{padding-right:56px}
.eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--grafite);
  transition:color .2s var(--ease),background .2s var(--ease)}
.eye:active{background:var(--nevoa)}
@media (hover:hover){.eye:hover{color:var(--tinta)}}
.auth .btn.wide{width:100%;justify-content:center;margin-top:8px}
.alinks{display:flex;justify-content:space-between;gap:16px}
.alink{color:var(--grafite);font-size:14px;padding:8px 0;transition:color .2s var(--ease)}
@media (hover:hover){.alink:hover{color:var(--tinta)}}
.amsg{margin:0;min-height:22px;font-size:14px;line-height:1.5;color:var(--tinta)}
.amsg:not(:empty)::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tinta);margin-right:10px;vertical-align:middle}
.amsg.ok{color:var(--grafite)}
.alead{margin:0;font-size:20px;font-weight:600}

.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--grafite);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border-radius:7px;background:var(--nevoa);display:grid;place-items:center;cursor:pointer;transition:background .2s var(--ease)}
.check input:checked{background:var(--tinta)}
.check input:checked::after{content:"";width:6px;height:11px;border:solid var(--papel);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.check input:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.check a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}

.amsg a.sup,.sup{color:var(--tinta);text-decoration:underline;text-underline-offset:3px;font-weight:600;white-space:nowrap}
a.btn{text-decoration:none}

/* aviso de campo: caixa clara, bem visível no celular */
.fhint{margin:-8px 0 0;padding:12px 16px;border-radius:14px;background:var(--tinta);color:var(--papel);font-size:14px;font-weight:600;line-height:1.4}
.fhint[hidden]{display:none}
.field[aria-invalid=true]{outline:2px solid var(--tinta);outline-offset:0}
.amsg:not(:empty):not(.ok){padding:12px 16px;border-radius:14px;background:var(--tinta);color:var(--papel);font-weight:600}
.amsg:not(:empty):not(.ok)::before{display:none}
.amsg:not(:empty):not(.ok) a.sup{color:var(--papel)}