:root {
  --fundo: #f5f7fb; --cartao: #ffffff; --texto: #1a1d24;
  --borda: #d9dee8; --acento: #2f6fed;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #12151c; --cartao: #1a1f29; --texto: #e8ecf4; --borda: #2b3341; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif;
       background: var(--fundo); color: var(--texto); }
.topo { display: flex; align-items: center; gap: 1.5rem; padding: 0.9rem 1.4rem;
        background: var(--cartao); border-bottom: 1px solid var(--borda); }
.topo nav { display: flex; gap: 1rem; }
.topo a { color: var(--texto); text-decoration: none; }
.topo .usuario { margin-left: auto; opacity: 0.75; font-size: 0.9rem; }
main { padding: 1.4rem; }
.tela-login { display: grid; place-items: center; min-height: 100vh; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
          padding: 2rem; display: grid; gap: 1rem; min-width: 320px; }
label { display: grid; gap: 0.35rem; font-size: 0.9rem; }
input { padding: 0.6rem; border: 1px solid var(--borda); border-radius: 8px;
        background: var(--fundo); color: var(--texto); }
button { padding: 0.6rem 1rem; border: 0; border-radius: 8px;
         background: var(--acento); color: #fff; cursor: pointer; }
.erro { color: #c0392b; margin: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem; border-bottom: 1px solid var(--borda); }