/* Telas do servidor (entrar, 2º fator, sem conexão): mesmo visual do app (/app) — escuro, verde-água, limpo. */
:root {
  color-scheme: dark;
  --bg: #0e1113; --card: #161a1d; --suave: #1e2327; --borda: #262c31;
  --txt: #eef2f3; --muted: #8b979e; --pri: #2dd4bf; --pri-txt: #0e1113; --ruim: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--txt); background: var(--bg);
  -webkit-font-smoothing: antialiased; line-height: 1.45;
}
a { color: var(--pri); }

body.tela-login {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(45, 212, 191, .14), transparent 60%),
    radial-gradient(600px 400px at 100% 110%, rgba(45, 212, 191, .07), transparent 60%),
    var(--bg);
}
.tela-login main { width: 100%; max-width: 380px; }
.entrar { display: flex; flex-direction: column; gap: 14px; }
.entrar .marca-login { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 10px; text-align: center; }
.entrar .marca-login img { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 10px 30px rgba(45, 212, 191, .25); }
.entrar .marca-login h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.entrar .marca-login p { margin: 0; color: var(--muted); font-size: .92rem; }

.entrar .cartao-login { background: var(--card); border: 1px solid var(--borda); border-radius: 22px; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.entrar label { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: var(--muted); font-weight: 500; }
.entrar input {
  font: inherit; font-size: 16px;                 /* 16px: o iPhone não dá zoom ao focar */
  color: var(--txt); background: var(--suave); border: 1px solid transparent; border-radius: 14px; padding: 13px 14px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.entrar input:focus { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(45, 212, 191, .2); }
.entrar input.codigo { text-align: center; font-size: 1.5rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; padding: 14px 10px; }
.entrar button {
  font: inherit; font-weight: 650; font-size: 1rem; border: 0; border-radius: 14px; padding: 14px; cursor: pointer;
  background: var(--pri); color: var(--pri-txt); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: filter .15s, transform .05s;
}
.entrar button:hover { filter: brightness(1.06); }
.entrar button:active { transform: scale(.99); }
.entrar button.secundario { background: var(--suave); color: var(--txt); border: 1px solid var(--borda); }
.entrar button svg { width: 20px; height: 20px; flex: none; }
.entrar .divisor { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .78rem; }
.entrar .divisor::before, .entrar .divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.entrar .divisor:has(+ [hidden]) { display: none; }   /* sem passkey neste navegador: some o "ou" */
.entrar .erro { margin: 0; border-radius: 14px; background: rgba(255, 107, 107, .12); color: var(--ruim); padding: 11px 14px; font-size: .88rem; }
.entrar .ola { margin: 0; text-align: center; color: var(--muted); font-size: .92rem; }
.entrar .ola strong { color: var(--txt); }
.entrar .rodape-login { text-align: center; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.entrar .rodape-login a { color: var(--muted); }
.entrar code { background: var(--suave); padding: 1px 6px; border-radius: 6px; font-size: .85em; word-break: break-all; }