/*
  As três telas de acesso — entrar, criar conta e definir senha — usam este
  cartão. Numa folha só, e não copiado em cada página, pelo mesmo motivo do
  conta.js: em três cópias, a próxima mudança seria aplicada em duas.

  Ela é pública no portão (src/gate.ts): carrega antes de qualquer sessão
  existir.
*/
:root{
  --bg:#0E1642;
  --surface:#1B2A6B;
  --surface-3:#2C3E94;
  --gold:#D8C7A9;
  --lane:#F2F3F8;
  --lane-dim:#AEB4D6;
  --route-red:#A8324A;
  --ok-green:#5BB98C;
  --border-soft:rgba(242,243,248,0.12);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);color:var(--lane);
  font-family:'Montserrat',sans-serif;min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.auth-card{
  background:var(--surface);border:1px solid var(--border-soft);
  border-top:3px solid var(--gold);
  border-radius:16px;padding:24px;width:100%;max-width:500px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.auth-brand{margin:0 0 26px;}
.auth-brand img{display:block;width:190px;max-width:100%;height:auto;margin:0 auto;}

.auth-title{
  font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--lane-dim);margin:0 0 4px;
}
.auth-sub{font-size:13px;color:var(--lane-dim);line-height:1.55;margin:0 0 22px;}

label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--lane-dim);margin-bottom:6px;
}
input{
  width:100%;background:var(--bg);color:var(--lane);
  border:1.5px solid var(--border-soft);border-radius:8px;
  padding:12px 13px;font-size:14px;font-family:'Montserrat',sans-serif;
  margin-bottom:16px;
}
input:focus{outline:none;border-color:var(--gold);}
button{
  width:100%;background:var(--gold);color:var(--bg);border:1.5px solid transparent;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:0.04em;text-transform:uppercase;
  padding:14px;border-radius:8px;cursor:pointer;transition:border-color .15s ease;
}
/* Hover dos botões de fundo cheio: só o contorno branco acende, como nos
   botões de contorno. A borda já existe transparente para o tamanho não mudar. */
button:hover:not(:disabled){border-color:#FFFFFF;}
button:disabled{opacity:0.6;cursor:progress;}

/* O segundo caminho da tela — "receber link", "criar conta" — não disputa
   atenção com o principal: mesma altura, sem preenchimento. */
button.secundario{
  background:transparent;color:var(--lane-dim);border-color:var(--border-soft);
  margin-top:10px;
}
button.secundario:hover:not(:disabled){border-color:var(--gold);color:var(--lane);}

.msg{
  font-size:13px;line-height:1.5;border-radius:8px;padding:11px 13px;margin-bottom:16px;display:none;
}
.msg.show{display:block;}
.msg.error{background:rgba(168,50,74,0.18);border:1px solid var(--route-red);color:#F6C9D2;}
.msg.ok{background:rgba(201,168,76,0.15);border:1px solid var(--gold);color:#F0DFAE;}

/* Força da senha: três traços, porque um número ("62%") não diz nada a quem
   está escolhendo. */
.forca{display:flex;gap:5px;margin:-8px 0 8px;}
.forca span{flex:1;height:3px;border-radius:2px;background:var(--border-soft);transition:background .2s ease;}
.forca.fraca span:nth-child(1){background:var(--route-red);}
.forca.media span:nth-child(-n+2){background:var(--gold);}
.forca.boa span{background:var(--ok-green);}
.forca-txt{font-size:11.5px;color:var(--lane-dim);margin:0 0 16px;min-height:14px;}

.auth-foot{
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--border-soft);
  font-size:12.5px;color:var(--lane-dim);text-align:center;line-height:1.6;
}
/* O link não parte no meio: quebrado em duas linhas, ele deixa de parecer um
   link só. A frase antes dele quebra à vontade. */
.auth-foot a{color:var(--gold);text-decoration:none;font-weight:600;white-space:nowrap;}
.auth-foot a:hover{text-decoration:underline;}