:root{
  --fundo:#0f1115; --painel:#171a21; --borda:#252a34; --linha:#1d212a;
  --texto:#e6e8ec; --fraco:#98a0af; --acento:#e11d2e; --acento-esc:#b3121f;
  --ok:#22c55e; --aviso:#f59e0b; --erro:#ef4444; --humano:#a78bfa; --info:#60a5fa;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--texto);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:#7fb2ff;text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:24px;margin:0 0 4px}h2{font-size:17px;margin:0 0 12px;color:var(--fraco);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
small{color:var(--fraco)}
main{max-width:1080px;margin:0 auto;padding:24px 20px 60px}

/* ---------------------------------------------------------------- topo */
.topo{display:flex;align-items:center;gap:24px;padding:0 20px;height:56px;
  background:var(--painel);border-bottom:1px solid var(--borda)}
.marca{font-weight:700;color:var(--texto);letter-spacing:-.01em}
.marca span{color:var(--acento)}
.topo nav{display:flex;gap:18px;margin-right:auto}
.topo nav a{color:var(--fraco);font-size:14px;padding:4px 0;border-bottom:2px solid transparent}
.topo nav a.ativo{color:var(--texto);border-bottom-color:var(--acento)}
.sair{display:flex;align-items:center;gap:10px}
.quem{font-size:13px;color:var(--fraco)}

/* --------------------------------------------------------------- blocos */
section{background:var(--painel);border:1px solid var(--borda);border-radius:10px;
  padding:18px;margin:0 0 18px}
.colunas{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:860px){.colunas{grid-template-columns:1fr}}
.cabecalho-secao{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:14px;flex-wrap:wrap}
.sub{color:var(--fraco);margin:0 0 18px}
.voltar{margin:0 0 10px;font-size:14px}
.vazio{color:var(--fraco);padding:14px 0;margin:0}
.rodape{max-width:1080px;margin:0 auto;padding:0 20px 40px;color:var(--fraco);font-size:12px}
.oculto{display:none}

/* --------------------------------------------------------------- números */
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
@media(max-width:640px){.numeros{grid-template-columns:1fr}}
.numero{background:var(--painel);border:1px solid var(--borda);border-radius:10px;padding:16px}
.numero strong{display:block;font-size:30px;line-height:1.1}
.numero span{color:var(--fraco);font-size:13px}
.numero.destaque strong{color:var(--ok)}

/* --------------------------------------------------------------- tabelas */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--fraco);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;padding:0 10px 8px}
td{padding:11px 10px;border-top:1px solid var(--linha);vertical-align:top}
.centro{text-align:center}.direita{text-align:right}
.contador{display:inline-block;min-width:26px;padding:2px 7px;border-radius:20px;
  background:var(--linha);color:var(--fraco);font-size:12px;font-weight:600}
.contador.tem{background:rgba(34,197,94,.15);color:var(--ok)}

/* ------------------------------------------------------------- etiquetas */
.pino{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;
  background:var(--fraco);vertical-align:middle}
.pino.on{background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.pino.off{background:#4b5563}
.etiqueta{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;
  font-weight:600;background:var(--linha);color:var(--fraco);white-space:nowrap}
.etiqueta.grande{font-size:14px;padding:5px 14px}
.etiqueta.monitorando{background:rgba(96,165,250,.15);color:var(--info)}
.etiqueta.no_carrinho{background:rgba(34,197,94,.15);color:var(--ok)}
.etiqueta.falhou,.etiqueta.expirada{background:rgba(239,68,68,.15);color:var(--erro)}
.etiqueta.atribuida{background:rgba(245,158,11,.15);color:var(--aviso)}

/* ------------------------------------------------------------ formulário */
.formulario{display:flex;flex-direction:column;gap:14px}
.formulario.estreito{max-width:380px}
fieldset{border:1px solid var(--borda);border-radius:8px;padding:14px;margin:0;
  display:flex;flex-direction:column;gap:12px}
legend{padding:0 6px;font-size:12px;color:var(--fraco);text-transform:uppercase;letter-spacing:.05em}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--fraco)}
label.linha{flex-direction:row;align-items:center;gap:8px}
input,textarea,select{background:var(--fundo);border:1px solid var(--borda);border-radius:7px;
  color:var(--texto);padding:9px 11px;font:inherit;font-size:14px;width:100%}
input[type=checkbox]{width:auto}
input:focus,textarea:focus{outline:none;border-color:var(--acento)}
textarea{resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.dica{color:var(--fraco);font-size:12px;margin:0}
button,.botao{background:var(--linha);border:1px solid var(--borda);color:var(--texto);
  border-radius:7px;padding:9px 16px;font:inherit;font-size:14px;cursor:pointer;
  display:inline-block;text-align:center}
button:hover,.botao:hover{border-color:#39404d;text-decoration:none}
.principal{background:var(--acento);border-color:var(--acento);color:#fff;font-weight:600}
.principal:hover{background:var(--acento-esc);border-color:var(--acento-esc)}
.perigo{background:transparent;border-color:var(--erro);color:var(--erro)}
.pequeno{padding:5px 11px;font-size:13px}
.grande{padding:12px 18px;font-size:15px}
.busca{display:flex;gap:8px}.busca input{width:260px}

/* ------------------------------------------------------------- chips */
.lista-setores{display:flex;flex-wrap:wrap;gap:7px}
.chip{position:relative;padding:7px 12px;font-size:13px}
.chip.escolhido{border-color:var(--acento);background:rgba(225,29,46,.12)}
.chip.escolhido::before{content:attr(data-ordem);position:absolute;top:-8px;left:-6px;
  background:var(--acento);color:#fff;font-size:10px;font-weight:700;
  padding:1px 5px;border-radius:20px}

/* -------------------------------------------------------------- resumo */
.resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--borda);border:1px solid var(--borda);border-radius:10px;
  overflow:hidden;margin-bottom:18px}
.resumo div{background:var(--painel);padding:13px 15px}
.resumo span{display:block;color:var(--fraco);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:3px}

/* ----------------------------------------------------------------- log */
.log{background:#0b0d11;border:1px solid var(--borda);border-radius:8px;padding:12px;
  max-height:440px;overflow-y:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.7}
.log .linha{padding:1px 0;border-left:2px solid transparent;padding-left:9px}
.log .hora{color:#5b6472;margin-right:10px}
.log .info{color:#c3c9d4}
.log .ok{color:var(--ok);border-left-color:var(--ok)}
.log .aviso{color:var(--aviso);border-left-color:var(--aviso)}
.log .erro{color:var(--erro);border-left-color:var(--erro)}
.log .humano{color:var(--humano);border-left-color:var(--humano);font-weight:600}

/* -------------------------------------------------------------- alertas */
.alerta{border-radius:8px;padding:13px 15px;margin:0 0 16px;font-size:14px;border:1px solid}
.alerta.erro{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);color:#fca5a5}
.alerta.sucesso{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.35);color:#86efac}
.token{background:#0b0d11;border:1px solid var(--borda);border-radius:6px;padding:10px;
  font-family:ui-monospace,monospace;font-size:12.5px;overflow-x:auto;
  user-select:all;color:var(--texto);margin:9px 0}

/* --------------------------------------------------------------- login */
.caixa-login{max-width:380px;margin:9vh auto;background:var(--painel);
  border:1px solid var(--borda);border-radius:12px;padding:30px}
.caixa-login h1{text-align:center}
.caixa-login .sub{text-align:center}
.caixa-login form{display:flex;flex-direction:column;gap:14px}
.caixa-login button{margin-top:6px;padding:11px}