/*
 * conta.css — telas de conta (entrar, confirmado, nova senha).
 *
 * Mesmos tokens da marca do site e do produto. Arquivo separado (e não <style>
 * inline) porque a CSP é `script-src 'self'`; estilo inline até passaria, mas
 * três páginas compartilham isto e duplicar CSS é como elas ficam diferentes.
 */
:root{
  --orange:#EE5A0F; --orange-hover:#D64F0B; --ink:#232120;
  --paper:#FBF7F2; --border:#EAE3D9; --text:#2A2622; --text-body:#4a423b;
  --text-muted:#5b5650; --text-faint:#8a8078; --accent:#C1440E; --tint:#FBEEE2;
  --surface:#fff; --pos:#147D4B; --neg:#B3261E; --r:12px;
  --sombra:0 1px 2px rgba(35,33,32,.04), 0 8px 28px rgba(35,33,32,.07);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:'Inter',system-ui,sans-serif; font-size:15px; line-height:1.55;
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:28px 18px;
}
a{color:var(--accent)}

.caixa{width:100%; max-width:430px}
/*
 * A marca é SEMPRE o arquivo `scopiq-logo.png` — o mesmo do site.
 * Antes havia três marcas diferentes vivas ao mesmo tempo: esta imagem no site,
 * um "scopiq" em texto (minúsculo, "iq" laranja) nas telas de conta, e um
 * "Scopiq" em texto (maiúsculo, só o "i" laranja) na tela do painel. Marca
 * desenhada em CSS é marca que divergiu — não voltar a fazer isso.
 * `width/height` no <img> ficam para o navegador reservar o espaço certo e não
 * dar salto de layout; quem manda no tamanho é o CSS abaixo.
 */
.marca{display:block; width:fit-content; margin:0 auto 20px; line-height:0}
.marca img{height:30px; width:auto; display:block}

.cartao{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sombra); padding:26px 26px 24px}

/* ---------- abas ---------- */
.abas{display:flex; gap:4px; background:var(--paper); border:1px solid var(--border);
  border-radius:9px; padding:4px; margin:0 0 22px}
.aba{flex:1; font-family:'Sora',sans-serif; font-weight:600; font-size:.88rem; border:0;
  background:transparent; color:var(--text-muted); padding:8px 10px; border-radius:6px; cursor:pointer}
.aba.on{background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(35,33,32,.08)}

h1{font-family:'Sora',sans-serif; font-size:1.32rem; letter-spacing:-.02em; margin:0 0 5px}
.sub{color:var(--text-muted); font-size:.9rem; margin:0 0 20px}

label{display:block; font-weight:600; font-size:.85rem; margin:0 0 6px}
input{width:100%; font-family:'Inter',sans-serif; font-size:.95rem; padding:11px 12px;
  border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--text); margin-bottom:16px}
input:focus{outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange)}
input[aria-invalid="true"]{border-color:#D9776B; background:#FDF6F5}
.ajuda{color:var(--text-faint); font-size:.8rem; margin:-11px 0 16px}

.botao{width:100%; font-family:'Sora',sans-serif; font-weight:700; font-size:.98rem; border:0;
  border-radius:9px; background:var(--orange); color:#fff; padding:12px 20px; cursor:pointer;
  transition:background .15s, transform .08s}
.botao:hover{background:var(--orange-hover)}
.botao:active{transform:translateY(1px)}
.botao[disabled]{background:#D6CFC6; cursor:progress}

.linha-link{text-align:center; margin:14px 0 0}
.link{border:0; background:transparent; color:var(--accent); font-family:'Inter',sans-serif;
  font-size:.87rem; cursor:pointer; text-decoration:underline; padding:0}

.legal{color:var(--text-faint); font-size:.78rem; line-height:1.5; margin:16px 0 0; text-align:center}
.rodape{text-align:center; color:var(--text-muted); font-size:.87rem; margin:18px 0 0}

/* ---------- entrar com terceiro ----------
 * O botão é da Scopiq (papel quente, borda da marca); só o ícone é da marca do
 * provedor, porque Google e Apple exigem a marca correta e reconhecível — é o
 * ícone que a pessoa procura, não a cor do botão.
 */
.sociais{display:grid; gap:9px; margin:0 0 4px}
.social{display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; font-family:'Sora',sans-serif; font-weight:600; font-size:.92rem;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:9px; padding:11px 16px; cursor:pointer; transition:background .14s, border-color .14s}
.social:hover{background:var(--paper); border-color:#D8CFC2}
.social:active{transform:translateY(1px)}
.social[disabled]{opacity:.6; cursor:progress}
.social svg, .social img{width:18px; height:18px; flex:none}

.ou{display:flex; align-items:center; gap:12px; margin:18px 0 18px; color:var(--text-faint); font-size:.8rem}
.ou::before, .ou::after{content:""; flex:1; height:1px; background:var(--border)}

/* ---------- mensagens ---------- */
.msg{border-radius:9px; padding:12px 14px; margin:16px 0 0; font-size:.88rem}
.msg.erro{background:#FDF4F3; border:1px solid #E7C9C4; color:#8A2A20}
.msg.bom{background:#EAF6F0; border:1px solid #BFE3D2; color:#14503A}
.msg.aviso{background:#FDF3E7; border:1px solid #E6C9A8; color:#7A4A14}
.msg strong{font-family:'Sora',sans-serif}
.msg .link{color:inherit; font-weight:600}

/* ---------- página de confirmação ---------- */
.centro{text-align:center}
.centro .icone{font-size:2.4rem; line-height:1; margin:0 0 12px}
.centro p{color:var(--text-body)}