/* A tela de entrada usa a mesma paleta do app. */
:root {
  color-scheme: light dark;
  --fundo: #f6f5f1;
  --superficie: #fff;
  --tinta: #1c1c1a;
  --suave: #6b6b64;
  --linha: #e3e1da;
  --acento: #0f766e;
  --erro: #b42318;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #14140f; --superficie: #1c1c18; --tinta: #f2f1eb; --suave: #a3a299; --linha: #2c2c26; --acento: #5eead4; }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: var(--fundo); color: var(--tinta);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.caixa {
  width: min(400px, 100%); background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 14px; padding: 32px 28px; box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.marca { margin: 0; color: var(--suave); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 4px 0 6px; font-size: 26px; letter-spacing: -.02em; }
.sub { margin: 0 0 24px; color: var(--suave); font-size: 14px; }
label { display: block; font-size: 13px; color: var(--suave); margin: 14px 0 6px; }
input {
  width: 100%; font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 9px;
  border: 1px solid var(--linha); background: var(--fundo); color: var(--tinta);
}
input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
button {
  width: 100%; margin-top: 22px; font: inherit; font-size: 15px; font-weight: 600; padding: 12px;
  border: 0; border-radius: 9px; background: var(--acento); color: #fff; cursor: pointer;
}
button:disabled { opacity: .6; cursor: default; }
.erro { margin: 14px 0 0; color: var(--erro); font-size: 13.5px; }