:root{
  --bg:#1f2221; --card:#262a29; --input:#2b2f2e; --border:#3b403e;
  --text:#ffffff; --muted:#c4c8c6; --green:#22c98a; --green-hover:#1db67c;
  --btn-text:#0d1f17; --error:#ff6b6b;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.card{width:100%; max-width:360px; background:var(--card); border-radius:6px; padding:22px 20px 20px}
/* Mesma logo animada (WebP) e mesmo tamanho da tela de PIN do bmbets.net */
.marca{display:block; width:128px; max-width:40%; height:auto; margin:-6px auto 8px}
.marca.sem-imagem{display:none}
@media (max-height:740px){ .marca{width:96px} }
h1{font-size:19px; font-weight:700; margin:0 0 12px}
.sub{font-size:14px; color:var(--muted); margin:0 0 15px}
input{
  width:100%; height:52px; background:var(--input); border:1px solid var(--border);
  border-radius:3px; color:var(--text); font:inherit; font-size:16px; padding:0 14px; outline:none;
  transition:border-color .15s;
}
input:focus{border-color:var(--green)}
input.has-error{border-color:var(--error)}
.msg{min-height:40px; font-size:13px; color:var(--error); padding-top:8px; line-height:1.3}
button{
  width:100%; height:45px; border:0; border-radius:3px; background:var(--green);
  color:var(--btn-text); font-family:inherit; font-weight:700; font-size:15px; cursor:pointer;
  transition:background .15s, opacity .15s;
}
button:hover{background:var(--green-hover)}
button:disabled{opacity:.7; cursor:default}
.note{text-align:center; color:var(--green); font-size:14px; margin:14px 0 0}