/* =========================================================
   STUDIO FELIPE SERRA — auth.css (Login / Criar Conta)
   Reutiliza variáveis e utilitários de style.css
   ========================================================= */

.auth-header{
  position:absolute;top:0;left:0;width:100%;z-index:10;
  padding:26px 5%;display:flex;justify-content:space-between;align-items:center;
}
.auth-header__brand img{height:42px}
.auth-header__back{
  font-family:var(--head);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:color .3s;
}
.auth-header__back:hover{color:var(--gold)}

.auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:110px 20px 60px;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(201,162,74,.07),transparent 60%),
    var(--bg);
}
.auth::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.05;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,transparent 0 60px,rgba(255,255,255,.4) 60px 61px);
}

.auth__wrap{position:relative;z-index:1;width:100%;max-width:460px}

.auth__pole{width:22px;height:76px;margin:0 auto 22px}

.auth__card{
  background:linear-gradient(180deg,#181818,#121212);
  border:1px solid var(--line);border-radius:16px;
  padding:38px 34px;box-shadow:0 40px 100px -30px #000;
  position:relative;overflow:hidden;
}
.auth__card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.auth__eyebrow{
  font-family:var(--head);letter-spacing:.32em;text-transform:uppercase;
  font-size:.68rem;color:var(--gold);text-align:center;margin-bottom:10px;
}
.auth__title{
  font-family:var(--display);font-size:2.4rem;line-height:1;text-align:center;margin-bottom:8px;
}
.auth__sub{color:var(--muted);text-align:center;font-size:.92rem;margin-bottom:30px;font-weight:300}

.auth-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:28px}
.auth-steps__dot{width:8px;height:8px;border-radius:50%;background:var(--line-2,rgba(255,255,255,.14));transition:.3s}
.auth-steps__dot.active{background:var(--gold);width:22px;border-radius:6px}

.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-form.hidden{display:none}

.a-field{display:flex;flex-direction:column;gap:6px}
.a-field>label{
  font-family:var(--head);text-transform:uppercase;letter-spacing:.07em;font-size:.68rem;color:var(--muted);
}
.a-field input{
  background:#101010;border:1px solid var(--line);border-radius:8px;color:var(--cream);
  padding:13px 14px;outline:none;font-size:.96rem;transition:border-color .25s,background .25s;width:100%;
}
.a-field input:focus{border-color:var(--gold);background:#141414}
.a-field input::placeholder{color:#5c584f}
.a-field--pass{position:relative}
.a-field--pass input{padding-right:44px}
.a-toggle-pass{
  position:absolute;right:10px;top:34px;background:none;border:0;color:var(--muted);
  cursor:pointer;font-size:.85rem;padding:6px;
}
.a-toggle-pass:hover{color:var(--gold)}
.a-hint{font-size:.74rem;color:var(--muted-2,#736d65)}
.a-hint.err{color:#ff6a63}
.a-hint.ok{color:#37d67a}

.a-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.a-consent{
  display:flex;gap:10px;align-items:flex-start;padding:14px 16px;
  background:rgba(201,162,74,.06);border:1px solid rgba(201,162,74,.2);border-radius:10px;
  font-size:.8rem;color:#cfc9be;line-height:1.55;
}
.a-consent input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px;flex-shrink:0}
.a-consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

.auth-form .btn{width:100%;margin-top:6px;justify-content:center}

.auth__foot{text-align:center;margin-top:24px;font-size:.88rem;color:var(--muted)}
.auth__foot a{color:var(--gold);font-weight:600}

.a-code{
  display:flex;gap:10px;justify-content:center;margin:6px 0 4px;
}
.a-code input{
  width:48px;height:56px;text-align:center;font-family:var(--display);font-size:1.6rem;
  background:#101010;border:1px solid var(--line);border-radius:10px;color:var(--cream);outline:none;
  transition:border-color .25s,transform .15s;
}
.a-code input:focus{border-color:var(--gold);transform:translateY(-2px)}

.a-resend{
  text-align:center;font-size:.84rem;color:var(--muted);
}
.a-resend button{
  background:none;border:0;color:var(--gold);font-weight:600;cursor:pointer;padding:0;
  font-family:inherit;font-size:inherit;
}
.a-resend button:disabled{color:var(--muted-2,#736d65);cursor:default}

.a-msg{
  display:none;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;font-size:.86rem;
}
.a-msg.show{display:flex}
.a-msg--err{background:rgba(216,56,47,.12);border:1px solid rgba(216,56,47,.4);color:#ff8a84}
.a-msg--ok{background:rgba(55,214,122,.1);border:1px solid rgba(55,214,122,.35);color:#7be3a6}

.auth__success{text-align:center;padding:10px 0}
.auth__success-icon{
  width:64px;height:64px;border-radius:50%;background:rgba(55,214,122,.12);border:1px solid rgba(55,214,122,.4);
  display:grid;place-items:center;margin:0 auto 20px;font-size:1.8rem;color:#37d67a;
}

@media(max-width:520px){
  .auth__card{padding:30px 22px}
  .a-row2{grid-template-columns:1fr}
  .a-code input{width:40px;height:48px;font-size:1.3rem}
  .auth-header{padding:20px 5%}
}