/* ============================================================
   Visual das telas de acesso (login, ativação, recuperação).
   Mesma linguagem da landing: claro, vidro e tipografia Inter.
   ============================================================ */
:root {
  color-scheme: light;
  --page:    #ffffff;
  --ink:     #0d1220;
  --ink-2:   #4e566a;
  --muted:   #8b93a5;
  --border:  rgba(13,18,32,.09);
  --accent:  #2f6bff;
  --accent-2:#7a4bff;
  --up:      #0f9d58;
  --down:    #e0483d;
  --glass:      rgba(255,255,255,.68);
  --glass-forte:rgba(255,255,255,.86);
  --sombra: 0 2px 6px rgba(13,18,32,.05), 0 24px 60px rgba(13,18,32,.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:var(--page); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:28px 20px;
}

/* manchas de cor ao fundo, iguais às da landing */
.aura { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.aura i { position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.55; }
.a1 { width:560px; height:560px; left:-160px; top:-180px;
      background:radial-gradient(circle at 40% 40%, #b9cdff, transparent 68%); }
.a2 { width:520px; height:520px; right:-150px; bottom:-160px;
      background:radial-gradient(circle at 55% 45%, #d9cbff, transparent 68%); }
.a3 { width:420px; height:420px; left:52%; top:60%;
      background:radial-gradient(circle at 50% 50%, #bdf0d6, transparent 70%); opacity:.3; }
.malha {
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(13,18,32,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,18,32,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 15%, transparent 72%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 15%, transparent 72%);
}

.marca {
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-weight:700; font-size:19px; letter-spacing:-.4px;
  text-decoration:none; color:var(--ink); margin-bottom:22px;
}
.mark { display:flex; align-items:flex-end; gap:2.5px; height:23px; }
.mark span { width:5.5px; border-radius:2px; }
.mk1 { height:12px; background:var(--up); }
.mk2 { height:21px; background:var(--down); }
.mk3 { height:16px; background:var(--up); }

.caixa {
  width:100%; max-width:430px; padding:36px 34px; border-radius:20px;
  background:var(--glass-forte); border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--sombra); position:relative;
}
.caixa::before {
  content:""; position:absolute; inset:-1px; border-radius:21px; padding:1.5px; pointer-events:none;
  background:linear-gradient(150deg, rgba(47,107,255,.55), transparent 46%, rgba(122,75,255,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.caixa.larga { max-width:500px; }

h1 { font-size:24px; font-weight:800; letter-spacing:-.9px; line-height:1.2; margin-bottom:8px; }
.sub { color:var(--ink-2); font-size:15px; margin-bottom:26px; }
.sub b { color:var(--ink); font-weight:600; }

label { display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin:18px 0 7px; }
label:first-of-type { margin-top:0; }
.dica { font-weight:400; color:var(--muted); font-size:12.5px; }
input {
  width:100%; background:#fff; color:var(--ink);
  border:1px solid var(--border); border-radius:11px;
  padding:13px 14px; font-size:15px; font-family:inherit;
  transition:border-color .18s, box-shadow .18s;
}
input:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(47,107,255,.13);
}
input::placeholder { color:#b6bcc9; }

.btn {
  width:100%; margin-top:26px; padding:14px; border:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:15.5px; letter-spacing:-.15px;
  border-radius:12px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, #4b82ff, var(--accent) 55%, #5f4bff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 12px 30px rgba(47,107,255,.28);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .22s, filter .18s;
}
.btn::after {
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-18deg); transition:left .55s cubic-bezier(.4,0,.2,1);
}
.btn:hover::after { left:120%; }
.btn:hover { transform:translateY(-2px); filter:brightness(1.04); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:.65; cursor:default; transform:none; }

.aviso {
  display:none; margin-top:18px; font-size:14px; border-radius:11px;
  padding:12px 14px; line-height:1.5;
}
.aviso.erro { display:block; color:#a8332a; background:rgba(224,72,61,.09); border:1px solid rgba(224,72,61,.25); }
.aviso.ok   { display:block; color:#0b6f42; background:rgba(15,157,88,.10); border:1px solid rgba(15,157,88,.28); }

.rodape { margin-top:24px; text-align:center; font-size:14px; color:var(--muted); }
.rodape a { color:var(--accent); text-decoration:none; font-weight:600; }
.rodape a:hover { text-decoration:underline; }
.linha-links { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; margin-top:16px; font-size:13.5px; }
.linha-links a { color:var(--accent); text-decoration:none; }
.linha-links a:hover { text-decoration:underline; }

.passos { display:flex; gap:8px; margin-bottom:24px; }
.passo { flex:1; height:4px; border-radius:3px; background:rgba(13,18,32,.10); }
.passo.on { background:linear-gradient(90deg, var(--accent), var(--accent-2)); }

.forca { display:flex; gap:5px; margin-top:9px; }
.forca i { flex:1; height:4px; border-radius:3px; background:rgba(13,18,32,.10); transition:background .25s; }
.forca.f1 i:nth-child(1) { background:var(--down); }
.forca.f2 i:nth-child(-n+2) { background:#e8a33d; }
.forca.f3 i:nth-child(-n+3) { background:#57b36a; }
.forca.f4 i { background:var(--up); }
.forca-txt { font-size:12.5px; color:var(--muted); margin-top:6px; min-height:17px; }

@media (max-width:520px) {
  .caixa { padding:30px 24px; }
  h1 { font-size:21px; }
}