/* kompra.krioulabs.com — as páginas de conta. O verde é o da app (Material teal). */
:root {
  --fundo: #f4f6f5;
  --cartao: #ffffff;
  --texto: #111814;
  --texto-2: #4a5550;
  --linha: #dde4e1;
  --marca: #00695c;
  --marca-texto: #ffffff;
  --erro: #b3261e;
  --erro-fundo: #fdecea;
  --ok-fundo: #e0f2f1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1413;
    --cartao: #182120;
    --texto: #e6ecea;
    --texto-2: #a7b4b0;
    --linha: #2a3533;
    --marca: #4db6ac;
    --marca-texto: #00201c;
    --erro: #ffb4ab;
    --erro-fundo: #3a1512;
    --ok-fundo: #12302c;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--fundo); color: var(--texto);
  font: 16px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
header, footer { padding: 16px; }
header .marca { font-weight: 700; font-size: 20px; color: var(--marca); text-decoration: none; }
header .marca span {
  display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--texto-2); font-weight: 500;
}
main { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px 48px; }
.cartao {
  width: 100%; max-width: 440px; background: var(--cartao);
  border: 1px solid var(--linha); border-radius: 14px; padding: 28px 24px;
}
h1 { font-size: 22px; margin: 0 0 8px; }
p { margin: 0 0 16px; color: var(--texto-2); }
label { display: block; font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
input {
  width: 100%; padding: 12px; font-size: 16px; border: 1px solid var(--linha);
  border-radius: 8px; background: var(--fundo); color: var(--texto);
}
input:focus { outline: 2px solid var(--marca); border-color: transparent; }
button {
  display: block; width: 100%; margin-top: 20px; padding: 13px; border: 0; border-radius: 8px;
  background: var(--marca); color: var(--marca-texto); font-size: 16px; font-weight: 600; cursor: pointer;
}
button:disabled { opacity: .6; cursor: default; }
.recado { display: none; margin-top: 16px; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.recado.erro { background: var(--erro-fundo); color: var(--erro); }
.caixa { padding: 14px; border-radius: 10px; background: var(--ok-fundo); margin-bottom: 16px; }
.caixa.erro { background: var(--erro-fundo); }
.caixa strong { display: block; margin-bottom: 4px; }
.escondido { display: none; }
footer { text-align: center; font-size: 13px; color: var(--texto-2); }
footer a { color: var(--marca); text-decoration: none; }