/* Tela de login no padrão A · Toga (layout aprovado em 26/10): fundo azul-marinho, marca acima do cartão,
   nota de origem do conteúdo no rodapé. Mesmas cores e fontes do simulado. */
:root {
  --marinho: #16213a; --marinho-texto: #c9d2e6; --marinho-nota: #8f9bb6;
  --papel: #f3f5f8; --folha: #ffffff; --tinta: #18233a; --tinta-2: #56617a; --linha: #dbe0e9;
  --caneta: #2346c8; --caneta-forte: #1b37a0; --caneta-suave: #e6ebfb; --errado: #b42318; --errado-suave: #fbe9e7;
  --f-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Source Serif 4", Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --marinho: #0a0f19;
    --papel: #0e131d; --folha: #161d2b; --tinta: #e6eaf2; --tinta-2: #9ba6bb; --linha: #283246;
    --caneta: #87a2ff; --caneta-forte: #a6bbff; --caneta-suave: #1d2747; --errado: #ff8072; --errado-suave: #331816;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--marinho); color: var(--tinta); font-family: var(--f-ui); font-size: 15px; line-height: 1.5; }
.palco { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.coluna { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.marca { display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; }
.marca svg { width: 40px; height: 40px; flex: none; }
.marca .nome { font-family: var(--f-texto); font-weight: 600; font-size: 1.65rem; line-height: 1.2; margin: 0; }
.marca .lema { font-size: .85rem; color: var(--marinho-texto); margin: 0; }
.cartao { background: var(--folha); border: 1px solid var(--linha); border-radius: 12px; padding: 28px 26px; display: grid; gap: 16px; }
h1 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.campo { display: grid; gap: 6px; }
label { font-size: .85rem; font-weight: 500; }
input { font: inherit; color: inherit; background: var(--folha); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; width: 100%; min-height: 44px; }
input:focus-visible { outline: 2px solid var(--caneta); outline-offset: 1px; border-color: var(--caneta); }
button { width: 100%; min-height: 44px; font: inherit; font-weight: 600; color: #fff; background: var(--caneta); border: 0; border-radius: 8px; padding: 10px 14px; cursor: pointer; }
@media (prefers-color-scheme: dark) { button { color: #0e131d; } }
button:hover { background: var(--caneta-forte); }
button:focus-visible { outline: 2px solid var(--caneta); outline-offset: 2px; }
.instalar { padding-top: 14px; border-top: 1px solid var(--linha); display: grid; gap: 10px; font-size: .88rem; }
.instalar[hidden], .instalar [hidden] { display: none; }
.instalar p { margin: 0; color: var(--tinta-2); }
.instalar .convite { display: flex; align-items: center; gap: 8px; }
.instalar .convite svg { width: 18px; height: 18px; flex: none; color: var(--caneta); }
button.secundario { color: var(--caneta); background: var(--folha); border: 1px solid var(--caneta); }
button.secundario:hover { background: var(--caneta-suave); }
.erro { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--errado-suave); color: var(--errado); font-size: .9rem; }
.nota { margin: 0; text-align: center; font-size: .78rem; color: var(--marinho-nota); }