:root {
  --fundo: #ffffff;
  --texto: #1a1a1a;
  --suave: #6b7280;
  --borda: #e5e7eb;
  --realce: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1115;
    --texto: #e8e8ea;
    --suave: #9ca3af;
    --borda: #262a33;
    --realce: #7aa2ff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--borda);
}

.marca { font-weight: 600; text-decoration: none; color: var(--texto); }

a { color: var(--realce); }

main { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem; }

.hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 .5rem; }
.hero p { color: var(--suave); margin: 0; }

.erro h1 { font-size: 3rem; margin: 0; }

.avisos { list-style: none; max-width: 46rem; margin: 1rem auto 0; padding: 0 1.5rem; }
.aviso { padding: .6rem .9rem; border-radius: .4rem; border: 1px solid var(--borda); }
.aviso--erro { border-color: #dc2626; color: #dc2626; }

.login form { display: grid; gap: .4rem; max-width: 20rem; }
.login label { font-size: .85rem; color: var(--suave); margin-top: .6rem; }
.login input {
  padding: .55rem .7rem;
  border: 1px solid var(--borda);
  border-radius: .4rem;
  background: transparent;
  color: var(--texto);
}
.login button {
  margin-top: 1rem;
  padding: .6rem;
  border: 0;
  border-radius: .4rem;
  background: var(--realce);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.rodape {
  border-top: 1px solid var(--borda);
  padding: 1.5rem;
  text-align: center;
  color: var(--suave);
}