:root { --bg:#f5f6f4; --painel:#fff; --linha:#e2e5e0; --texto:#1c211d; --suave:#6b736c; --acento:#1f7a4d; --entrada:#eef0ec; --saida:#d9f0e2; --erro:#b3261e; --nav:56px; }
@media (prefers-color-scheme: dark) { :root { --bg:#141714; --painel:#1c211d; --linha:#2c332d; --texto:#e8ece8; --suave:#8f998f; --acento:#4cc38a; --entrada:#262c27; --saida:#1d3b2b; --erro:#f2b8b5; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--texto); font:15px/1.4 system-ui, sans-serif; }
body.com-nav { padding-left:var(--nav); min-height:100dvh; }
button, .btn { padding:9px 14px; border:0; border-radius:8px; background:var(--acento); color:#fff; font:inherit; font-size:14px; cursor:pointer; text-decoration:none; display:inline-block; }
button.sec, .btn.sec { background:transparent; color:var(--texto); border:1px solid var(--linha); }
button:disabled { opacity:.5; }
input, select, textarea { padding:9px 11px; border:1px solid var(--linha); border-radius:8px; background:var(--bg); color:var(--texto); font:inherit; min-width:0; }
.chip { display:inline-block; font-size:11px; padding:1px 8px; border-radius:99px; background:var(--entrada); border:1px solid var(--linha); color:var(--suave); }
.pagina { max-width:1100px; margin:0 auto; padding:18px 16px 40px; }
.topo { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.topo h1 { font-size:20px; margin:0; flex:1; }
.cartao { background:var(--painel); border:1px solid var(--linha); border-radius:12px; }
.vazio { color:var(--suave); text-align:center; padding:30px 10px; }
#zap-nav { position:fixed; z-index:50; left:0; top:0; bottom:0; width:var(--nav); background:var(--painel); border-right:1px solid var(--linha); display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 0; }
#zap-nav a { width:46px; padding:7px 0; border-radius:10px; text-align:center; text-decoration:none; color:var(--suave); font-size:10px; display:flex; flex-direction:column; align-items:center; gap:2px; }
#zap-nav a svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#zap-nav a.ativo { background:var(--entrada); color:var(--acento); font-weight:600; }
#zap-nav .logo { font-weight:800; color:var(--acento); font-size:15px; margin:2px 0 8px; }
@media (max-width:760px) {
  body.com-nav { padding-left:0; padding-bottom:58px; }
  #zap-nav { top:auto; width:auto; right:0; height:58px; flex-direction:row; justify-content:space-around; border-right:0; border-top:1px solid var(--linha); padding:4px 6px; }
  #zap-nav .logo { display:none; }
  #zap-nav a { flex:1; width:auto; }
}