:root {
  --fundo: #f5f5f4; --cartao: #ffffff; --texto: #1c1917; --suave: #57534e; --borda: #d6d3d1;
  --primaria: #1d4ed8; --primaria-texto: #ffffff; --erro: #b91c1c; --erro-fundo: #fef2f2; --ok: #15803d;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1c1917; --cartao: #292524; --texto: #f5f5f4; --suave: #a8a29e; --borda: #44403c;
    --primaria: #3b82f6; --primaria-texto: #ffffff; --erro: #f87171; --erro-fundo: #3a1d1d; --ok: #4ade80;
  }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif;
       background: var(--fundo); color: var(--texto); }

.centro { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.cartao { width: 100%; max-width: 380px; background: var(--cartao); border: 1px solid var(--borda);
          border-radius: 12px; padding: 28px 24px; }
.cartao h1 { margin: 0 0 4px; font-size: 1.5rem; }
.cartao .sub { margin: 0 0 20px; color: var(--suave); }

label { display: block; font-size: .875rem; font-weight: 600; margin: 14px 0 6px; }
input { width: 100%; padding: 10px 12px; font: inherit; color: var(--texto); background: var(--fundo);
        border: 1px solid var(--borda); border-radius: 8px; }
input:focus { outline: 2px solid var(--primaria); outline-offset: 1px; }

button, .botao { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
                 margin-top: 20px; padding: 11px 12px; font: inherit; font-weight: 600; border-radius: 8px;
                 border: 1px solid transparent; cursor: pointer; text-decoration: none; }
button.primario { background: var(--primaria); color: var(--primaria-texto); }
button:disabled { opacity: .6; cursor: wait; }
.botao.microsoft { background: var(--cartao); color: var(--texto); border-color: var(--borda); margin-top: 0; }
.botao.microsoft:hover { background: var(--fundo); }

.divisor { display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: .8rem; margin: 20px 0 4px; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

.mensagem { margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: .9rem;
            background: var(--erro-fundo); color: var(--erro); }
.mensagem[hidden] { display: none; }
.dica { margin-top: 18px; color: var(--suave); font-size: .85rem; text-align: center; }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 12px 16px; background: var(--cartao); border-bottom: 1px solid var(--borda); }
.topo strong { font-size: 1.05rem; }
.topo .usuario { display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: .9rem; }
.topo button { width: auto; margin: 0; padding: 6px 12px; background: transparent; color: var(--texto);
               border-color: var(--borda); font-weight: 500; }
.conteudo { max-width: 960px; margin: 0 auto; padding: 32px 16px; }
@media (max-width: 480px) { .topo .usuario span { display: none; } }