:root{
  --tinta:#12151b;
  --tinta-suave:#5b6472;
  --base:#eef0f4;
  --superficie:#ffffff;
  --regra:#d9dde4;
  --cobalto:#1b4de4;
  --cobalto-fraco:#e7ecfd;
  --erro:#b3261e;
  --erro-fraco:#fbeae9;
  --aviso:#9a5b00;
  --aviso-fraco:#fdf1de;
  --ok:#0f766e;
  --ok-fraco:#e3f4f1;
  --raio:10px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--base);
  color:var(--tinta);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.5;
}
h1,h2{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.01em;margin:0}
main{max-width:1180px;margin:0 auto;padding:0 20px 64px;display:grid;gap:18px}
section#resultado{display:grid;gap:18px}

.topo{
  max-width:1180px;margin:0 auto;padding:28px 20px 22px;
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
.marca{display:flex;gap:14px;align-items:center}
.selo{
  display:grid;place-items:center;width:52px;height:52px;border-radius:12px;
  background:var(--tinta);color:#fff;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:18px;
}
.topo h1{font-size:23px}
.topo p{margin:2px 0 0;color:var(--tinta-suave);font-size:14px}
.ficha{display:flex;flex-wrap:wrap;gap:8px}
.ficha span{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tinta-suave);
  background:var(--superficie);border:1px solid var(--regra);border-radius:99px;padding:5px 11px;
}
.ficha b{color:var(--tinta)}

.painel{background:var(--superficie);border:1px solid var(--regra);border-radius:var(--raio);padding:20px}
.cabecalho-bloco h2{font-size:16px}
.cabecalho-bloco p{margin:3px 0 14px;color:var(--tinta-suave);font-size:13px}
.barra{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between}

.soltar{
  border:1.5px dashed var(--regra);border-radius:var(--raio);background:#fbfcfe;
  padding:34px 20px;text-align:center;display:grid;gap:6px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.soltar:hover,.soltar:focus-visible{border-color:var(--cobalto);background:var(--cobalto-fraco);outline:none}
.soltar.ativo{border-color:var(--cobalto);background:var(--cobalto-fraco)}
.soltar strong{font-size:15px}
.soltar span{color:var(--tinta-suave);font-size:13px}

.opcoes{margin-top:16px;border-top:1px solid var(--regra);padding-top:12px}
.opcoes summary{cursor:pointer;font-weight:500;font-size:14px}
.grade-opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:9px;margin-top:14px}
.grade-opcoes label{display:flex;gap:8px;align-items:center;font-size:13.5px;color:#2b323d}
.linha-select{gap:10px !important}
select,.grade-opcoes input[type=text]{
  font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--regra);
  border-radius:7px;background:var(--superficie);color:inherit;
}
.grade-opcoes input[type=text]{font-family:"IBM Plex Mono",monospace;width:80px}

.acao{
  margin-top:16px;font:inherit;font-weight:500;background:var(--cobalto);color:#fff;
  border:0;border-radius:8px;padding:11px 20px;cursor:pointer;
}
.acao:hover:not(:disabled){background:#1740c4}
.acao:disabled{background:#c3c9d4;cursor:not-allowed}
.acao.secundaria{background:var(--superficie);color:var(--erro);border:1px solid var(--erro)}
.acao.secundaria:hover{background:var(--erro-fraco)}
.dica{color:var(--tinta-suave);font-size:12.5px;margin:12px 0 0}

.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cartao{background:var(--superficie);border:1px solid var(--regra);border-radius:var(--raio);padding:14px 16px}
.cartao b{display:block;font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:600;line-height:1.2}
.cartao span{font-size:12.5px;color:var(--tinta-suave)}
.cartao.erro{border-color:#eec9c6;background:var(--erro-fraco)} .cartao.erro b{color:var(--erro)}
.cartao.aviso{border-color:#f0dcbc;background:var(--aviso-fraco)} .cartao.aviso b{color:var(--aviso)}
.cartao.ok{border-color:#c2e5df;background:var(--ok-fraco)} .cartao.ok b{color:var(--ok)}

.regua{display:flex;gap:1px;height:46px;align-items:flex-end;overflow-x:auto;padding-bottom:4px}
.regua button{
  flex:1 0 2px;min-width:2px;height:60%;border:0;padding:0;cursor:pointer;
  background:var(--regra);border-radius:1px;
}
.regua button.preenchido{background:#a9b2c1}
.regua button.aviso{background:#e0a13a;height:82%}
.regua button.erro{background:var(--erro);height:100%}
.regua button.selecionado{outline:2px solid var(--tinta);outline-offset:1px}
.legenda{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--tinta-suave)}
.legenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.tick.erro{background:var(--erro)} .tick.aviso{background:#e0a13a}
.tick.preenchido{background:#a9b2c1} .tick.vazio{background:var(--regra)}

.filtros{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.chip{
  font:inherit;font-size:13px;background:var(--superficie);border:1px solid var(--regra);
  border-radius:99px;padding:6px 13px;cursor:pointer;color:var(--tinta-suave);
}
.chip:hover{border-color:#b6bdc9}
.chip.ativo{background:var(--tinta);border-color:var(--tinta);color:#fff}
#busca{
  font:inherit;font-size:13px;padding:6px 12px;border:1px solid var(--regra);
  border-radius:99px;min-width:230px;background:var(--superficie);
}

.tabela-caixa{max-height:460px;overflow:auto;border:1px solid var(--regra);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{
  position:sticky;top:0;background:#f6f7fa;text-align:left;font-weight:500;color:var(--tinta-suave);
  padding:9px 12px;border-bottom:1px solid var(--regra);white-space:nowrap;
}
tbody td{padding:8px 12px;border-bottom:1px solid #eef0f4;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td.linha,td.codigo,td.valor{font-family:"IBM Plex Mono",monospace;font-size:12px;white-space:nowrap}
td.valor{max-width:220px;overflow:hidden;text-overflow:ellipsis;color:var(--tinta-suave)}
td.campo b{font-weight:500}
td.campo span{display:block;color:var(--tinta-suave);font-size:11.5px;font-family:"IBM Plex Mono",monospace}
tr.erro td.codigo{color:var(--erro)} tr.aviso td.codigo{color:var(--aviso)}
.vazio-lista{color:var(--tinta-suave);font-size:13px;padding:14px 2px 0;margin:0}

.previa{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.7;
  background:#12151b;color:#dfe4ec;border-radius:8px;padding:14px;overflow-x:auto;margin:0;
}
.rodape-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rodape-acoes span{font-size:13px;color:var(--tinta-suave)}

footer{max-width:1180px;margin:0 auto;padding:0 20px 40px}
footer p{color:var(--tinta-suave);font-size:12.5px;max-width:70ch;margin:0}

@media (max-width:640px){
  .topo{padding-top:20px}
  .cartao b{font-size:22px}
  #busca{min-width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

.codigos{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.codigos button{
  font:inherit;font-size:12px;font-family:"IBM Plex Mono",monospace;cursor:pointer;
  border:1px solid var(--regra);background:var(--superficie);border-radius:7px;padding:5px 10px;color:var(--tinta-suave);
}
.codigos button.erro{border-color:#eec9c6;background:var(--erro-fraco);color:var(--erro)}
.codigos button.aviso{border-color:#f0dcbc;background:var(--aviso-fraco);color:var(--aviso)}
.codigos button.selecionado{outline:2px solid var(--tinta);outline-offset:1px}
.codigos b{font-weight:600}