:root{
  --bg:#fff;
  --ink:#0e0e0e;
  --muted:#6b6f7a;
  --primary:#1c49d6;
  --input:#eeecf4;         /* fundo dos inputs */
  --focus:#5b7cff;
  --cta:#ffea22;           /* amarelo do botão */
  --ctaText:#1b44b3;       /* azul do texto do botão */
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* topo */
.top{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  height:56px; border-bottom:1px solid #eee;
  background:#fff;
}
.top h1{ font-size:18px; margin:0; font-weight:700; }
.top .back{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; font-size:20px; cursor:pointer;
}
.top .spacer{ width:24px; }

/* container – garante espaço para o CTA fixo */
.wrap{ 
  max-width:1150px; 
  margin:0 auto; 
  padding:18px 16px calc(120px + env(safe-area-inset-bottom)); 
}

/* card */
.card{ max-width:1060px; margin:0 auto; }
.card h2{ font-size:32px; margin:8px 0 4px; }
.desc{ margin:0 0 18px; color:var(--muted); }

/* formulário */
.form{ display:flex; flex-direction:column; gap:18px; }

.field label{
  display:block; font-weight:700; margin-bottom:8px;
}
input{
  width:100%;
  border:0;
  background:var(--input);
  border-radius:var(--radius);
  height:48px;                   /* ↑ mais alto p/ mobile */
  padding:0 14px;
  font-size:16px;
  outline: none;
}
input:focus{ box-shadow:0 0 0 3px rgba(91,124,255,.25); }

.hint{
  display:block; margin-top:6px; color:#7e7e90; font-size:12.5px;
}

/* senha com olho */
.pwd{ position:relative; }
.pwd input{ padding-right:42px; }
.eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:8px; border:0; background:transparent;
  cursor:pointer; font-size:18px; opacity:.65;
}
.eye:hover{ opacity:.9; }

/* link ajuda */
.help-link{ margin:4px 0 18px; }
.help-link a{ color:var(--primary); text-decoration:none; font-weight:700; }
.help-link a:hover{ text-decoration:underline; }

/* label específico */
.senha-link{
  color:#0b3ea9;
  font-weight:700;
  cursor:pointer;
}

/* mensagens de erro */
.field-error{
  color:#e53935;
  font-size:13px;
  margin-top:6px;
  display:block;
}

/* === BOTÃO CTA FIXO (sempre) === */
.cta {
  position: fixed;        /* fixo em todas as telas */
  bottom: 0;              /* colado no rodapé */
  left: 0;
  width: 100%;            /* ocupa toda a largura */
  background: var(--cta); /* amarelo */
  color: #0033cc;         /* azul forte */
  font-weight: 700;
  border: none;
  padding: 16px 0;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 1000;          /* acima do conteúdo */
  border-radius: 0;       /* igual ao topo (sem cantos) */
  box-shadow: 0 -2px 6px rgba(0,0,0,.08);
}
.cta:active { transform: translateY(1px); }

/* ===== Responsividade ===== */

/* desktop: inputs um pouco menores */
@media (min-width: 901px){
  input{ height: 44px; }
}

/* telas pequenas */
@media (max-width: 600px){
  .card h2{ font-size:26px; }
  .desc{ font-size:14px; }  
}