:root { --azul:#022450; --ouro:#E8AF30; --creme:#FEF2D8; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,sans-serif; background:var(--creme); color:var(--azul); }
#login-gate { display:grid; place-items:center; min-height:100vh; }
#login-gate form { display:grid; gap:.6rem; width:min(320px,90vw); }
#login-gate input, #view input, #view select { padding:.6rem; border:1px solid var(--azul); border-radius:6px; font-size:1rem; }
button { padding:.6rem 1rem; background:var(--azul); color:#fff; border:0; border-radius:6px; font-size:1rem; cursor:pointer; }
button.sec { background:var(--ouro); color:var(--azul); }
.erro { color:#b00020; min-height:1.2em; }
#app-layout { display:grid; grid-template-columns:200px 1fr; min-height:100vh; }
#nav { background:var(--azul); padding:1rem .5rem; display:flex; flex-direction:column; gap:.3rem; }
#nav button { background:transparent; text-align:left; }
#nav button.ativo { background:var(--ouro); color:var(--azul); }
#view { padding:1rem; max-width:900px; }
table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; }
td,th { padding:.5rem; border-bottom:1px solid #eee; text-align:left; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:700px) {
  #app-layout { grid-template-columns:1fr; }
  #nav { flex-direction:row; overflow-x:auto; position:sticky; top:0; }
}