:root {
  --fundo: #f6f6f3;
  --cartao: #ffffff;
  --texto: #1d1d1b;
  --sutil: #6b6b66;
  --borda: #deded8;
  --acento: #1f5f4a;
  --erro: #a3261c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #151514;
    --cartao: #1f1f1d;
    --texto: #ecece6;
    --sutil: #a2a29a;
    --borda: #34342f;
    --acento: #5fbf98;
    --erro: #f08a80;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fundo); color: var(--texto); }
h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
.sutil { color: var(--sutil); margin-top: 0; }
.erro { color: var(--erro); }
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.cartao { width: 100%; max-width: 360px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 28px; display: grid; gap: 8px; }
label { font-size: .85rem; color: var(--sutil); margin-top: 8px; }
input { font: inherit; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); }
button { font: inherit; margin-top: 16px; padding: 10px 12px; border: 0; border-radius: 8px; background: var(--acento); color: #fff; cursor: pointer; }
button.link { margin: 0; padding: 0; background: none; color: var(--acento); }
.topo { display: flex; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--borda); background: var(--cartao); }
.topo form { margin-left: auto; }
.conteudo { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
.modulos { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.modulos li { padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--cartao); }