.auth-shell{
  min-height: calc(100vh - 400px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-side{
  position: relative;
  background: linear-gradient(165deg, var(--accent-dim), var(--bg-0));
  border-right: 1px solid var(--border-soft);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.auth-side::before{
  content:"";
  position: absolute; right: -30%; top: -20%; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(24,119,242,.16), transparent 65%);
}
.auth-side blockquote{
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.35;
  color: var(--text-hi);
  max-width: 30ch;
  position: relative;
}
.auth-side blockquote span{ display:block; margin-top:18px; font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); font-weight: 600; }
.auth-side-stats{ display: flex; gap: 30px; position: relative; }
.auth-side-stats div strong{ display:block; font-family: var(--font-mono); font-size: 20px; color: var(--text-hi); }
.auth-side-stats div span{ font-size: 11.5px; color: var(--text-low); }

.auth-main{
  display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--bg-1);
}
.auth-box{ width: 100%; max-width: 400px; }
.auth-box .brand{ margin-bottom: 40px; color: var(--text-hi); }
.auth-box h1{ font-size: 27px; margin-bottom: 8px; }
.auth-box .sub{ color: var(--text-mid); font-size: 14.5px; margin-bottom: 32px; }
.auth-alert{
  display:none;
  background: var(--loss-dim); border: 1px solid rgba(214,69,80,.35); color: var(--loss);
  padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 20px; font-weight: 500;
}
.auth-alert.show{ display: block; }
.auth-foot{ margin-top: 26px; font-size: 13.5px; color: var(--text-mid); text-align: center; }
.auth-divider{ display:flex; align-items:center; gap:14px; margin: 26px 0; color: var(--text-low); font-size: 12px; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background: var(--border-soft); }
.row-2{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }

@media (max-width: 480px){
  .row-2{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .auth-shell{ grid-template-columns: 1fr; }
  .auth-side{ display: none; }
}

/* ============================================================
   Cadastro em etapas, força de senha e páginas de recuperação
   ============================================================ */
.auth-largo{ align-items: flex-start; padding-block: 56px; }
.auth-box-largo{ max-width: 560px; }
.auth-centro{ text-align: center; }

/* ---------- indicador de etapas ---------- */
.auth-passos{ display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.passo{
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--text-low); white-space: nowrap;
}
.passo i{
  width: 24px; height: 24px; border-radius: 50%; font-style: normal;
  background: var(--bg-3); color: var(--text-low);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.passo.ativo{ color: var(--accent); }
.passo.ativo i{ background: var(--accent); color: #fff; }
.passo.feito i{ background: var(--gain); color: #fff; }
.passo-linha{ flex: 1; height: 2px; background: var(--border-soft); border-radius: 2px; }

.etapa-intro{ font-size: 13.5px; color: var(--text-mid); line-height: 1.65; margin: 0 0 20px; }
.acoes-form{ display: flex; gap: 10px; margin-top: 8px; }
.acoes-form .btn{ flex: 1; }

/* ---------- força da senha ---------- */
.forca-senha{
  height: 4px; background: var(--border-soft); border-radius: 2px;
  overflow: hidden; margin-top: 8px;
}
.forca-barra{ height: 100%; width: 0; border-radius: 2px; transition: width .25s ease, background .25s ease; }
.forca-barra.fraca{ width: 33%; background: var(--loss); }
.forca-barra.media{ width: 66%; background: #E0A020; }
.forca-barra.forte{ width: 100%; background: var(--gain); }

/* ---------- checkboxes ---------- */
.check-linha{
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
  font-size: 13px; color: var(--text-mid); line-height: 1.6; cursor: pointer;
}
.check-linha input{ margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--accent); }
.check-linha a{ color: var(--accent); text-decoration: underline; }

/* ---------- mensagens ---------- */
.form-msg{ display: none; margin-top: 16px; padding: 13px 15px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.6; }
.form-msg.show{ display: block; }
.form-msg.erro{ background: var(--loss-dim); color: #8E2C34; border: 1px solid rgba(214,69,80,.3); }
.form-msg.ok{ background: var(--gain-dim); color: #14663B; border: 1px solid rgba(30,158,90,.3); }
.form-msg.aviso{ background: #FDF2E3; color: #8A5A16; border: 1px solid rgba(224,160,32,.35); }
.form-msg a{ color: inherit; text-decoration: underline; word-break: break-all; }

.hint.erro{ color: var(--loss); }
.hint.ok{ color: var(--gain); }

/* ---------- verificação de e-mail ---------- */
.verif-icone{
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 22px;
  background: var(--accent-dim); display: flex; align-items: center; justify-content: center;
}
.verif-icone svg{ width: 36px; height: 36px; color: var(--accent); }
.verif-icone.ok{ background: var(--gain-dim); }
.verif-icone.ok svg{ color: var(--gain); }
.verif-icone.erro{ background: var(--loss-dim); }
.verif-icone.erro svg{ color: var(--loss); }
#verifAcoes{ margin-top: 24px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- aviso de e-mail não verificado (dashboard) ---------- */
.faixa-verificar{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #FDF2E3; border: 1px solid rgba(224,160,32,.4);
  border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 20px;
}
.faixa-verificar svg{ width: 20px; height: 20px; flex: none; color: #B45309; }
.faixa-verificar span{ flex: 1; min-width: 220px; font-size: 13.5px; color: #8A5A16; line-height: 1.55; }