:root {
  --fundo: #0a0d11; --painel: #0e1216; --painel2: #131820; --borda: #2a323e;
  --texto: #e3e8ed; --mudo: #7d8a99;
  --marca: #00d655; --marca-esc: #05662c; --marca-txt: #042d17;
  --alerta: #f0a411; --erro: #ef5b5b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 4px 0; } h2 { font-size: 17px; margin: 0 0 12px; } h3 { font-size: 15px; margin: 0; }
.mudo { color: var(--mudo); } .peq { font-size: 13px; } .num { text-align: right; font-variant-numeric: tabular-nums; }

.topo { display: flex; align-items: center; gap: 28px; padding: 14px 24px; background: var(--painel); border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.logo { color: var(--texto); font-size: 17px; display: flex; align-items: center; gap: 8px; }
.logo:hover { text-decoration: none; } .logo b { color: var(--marca); }
.logo .pt { width: 10px; height: 10px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 10px var(--marca); }
.topo nav { display: flex; gap: 6px; flex: 1; }
.topo nav a { color: var(--mudo); padding: 6px 12px; border-radius: 8px; }
.topo nav a.on, .topo nav a:hover { color: var(--texto); background: var(--painel2); text-decoration: none; }
main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; }

.cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.card { background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.card .cab { margin-bottom: 8px; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.linha form { margin: 0; }

input, select { background: var(--painel2); border: 1px solid var(--borda); color: var(--texto); border-radius: 8px; padding: 9px 12px; font: inherit; }
input:focus, select:focus { outline: 2px solid var(--marca-esc); border-color: var(--marca); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--marca); padding: 0; }
.linha input:not([type=checkbox]) { flex: 1; min-width: 200px; }
label { display: block; margin-bottom: 12px; color: var(--mudo); font-size: 13px; }
label input { display: block; width: 100%; margin-top: 4px; }
label.chk { display: flex; gap: 8px; align-items: center; margin: 0; }
label.chk input { width: 16px; margin: 0; }

.btn { background: var(--marca); color: var(--marca-txt); border: 0; border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; display: inline-block; }
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.sec { background: var(--painel2); color: var(--texto); border: 1px solid var(--borda); }
.btn.perigo { background: transparent; color: var(--erro); border: 1px solid #5a2a2a; }
.btn.peq { padding: 5px 11px; font-size: 13px; }
.link { background: none; border: 0; color: var(--mudo); cursor: pointer; font: inherit; }
.link:hover { color: var(--texto); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--mudo); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--painel2); }
td.acoes { text-align: right; white-space: nowrap; }
.barra { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.barra input { max-width: 320px; }
#tab-grupos { display: block; max-height: 460px; overflow-y: auto; }
#tab-grupos thead th { position: sticky; top: 0; background: var(--painel); }

.selo { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.selo.ok { background: #073d1f; color: var(--marca); } .selo.aviso { background: #3a2a05; color: var(--alerta); } .selo.erro { background: #3d1414; color: var(--erro); }
.erro { color: var(--erro); }
.progresso { background: var(--painel2); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }

#bloco-qr img { background: #fff; padding: 10px; border-radius: 12px; display: block; }
.login { max-width: 380px; margin: 12vh auto 0; }
.login h1 b { color: var(--marca); }
.lote h3 { font-size: 15px; }
.pag { display: flex; justify-content: space-between; margin-top: 12px; }
[hidden] { display: none !important; }
@media (max-width: 640px) { .topo { padding: 12px 16px; gap: 14px; } th:nth-child(n+4), td:nth-child(n+4) { font-size: 13px; } }