:root {
  --bg: #f4f5f7; --card: #fff; --texto: #1d2330; --suave: #667085; --borda: #e2e5ea;
  --primaria: #2d5bd1; --perigo: #c0392b; --ok: #1f8a4c; --alerta: #fff4d6; --critico: #fde2e0;
  --amarelo: #ffe600;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--texto); }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--amarelo); flex-wrap: wrap; }
header h1 { margin: 0; font-size: 19px; }
header h1 span { font-weight: 400; }
.pill { background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.pill.rodando { background: var(--primaria); color: #fff; }
nav { display: flex; gap: 2px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--borda); overflow-x: auto; }
nav button { border: 0; background: none; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--suave); border-bottom: 3px solid transparent; white-space: nowrap; }
nav button.ativa { color: var(--texto); border-bottom-color: var(--primaria); font-weight: 600; }
main { padding: 16px 20px; max-width: 1600px; margin: 0 auto; }
.aba { display: none; } .aba.ativa { display: block; }
.caixa { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.caixa h2 { margin: 0 0 10px; font-size: 16px; } h3 { font-size: 14px; margin: 16px 0 8px; }
.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.grade2 > *, .caixa, main { min-width: 0; }
.grade2 > .caixa { margin-bottom: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.card { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; }
.card b { display: block; font-size: 22px; } .card span { color: var(--suave); font-size: 12px; }
.botoes, .filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
button { font: inherit; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--borda); background: #fff; cursor: pointer; }
button:hover { background: #f0f2f5; }
button.primario { background: var(--primaria); color: #fff; border-color: var(--primaria); }
button.perigo { color: var(--perigo); border-color: #f0c2bd; }
button.mini { padding: 3px 8px; font-size: 12px; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); margin-bottom: 8px; }
label input, label select, label textarea { color: var(--texto); font-size: 14px; }
label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--texto); font-size: 13px; }
.linha-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.linha-form label { min-width: 150px; } .linha-form .largo { flex: 1 1 100%; }
.dica { color: var(--suave); font-size: 12px; margin: 6px 0; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; background: #f8f9fb; position: sticky; top: 0; font-weight: 600; z-index: 1; }
.tabela th, .tabela td { padding: 6px 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr.critico td { background: var(--critico); }
.tabela tr.falha td { background: var(--alerta); }
.tabela tr.removido td { color: var(--suave); text-decoration: line-through; }
.tabela a { color: var(--primaria); text-decoration: none; }
.rolagem { max-height: 68vh; overflow: auto; border: 1px solid var(--borda); border-radius: 8px; }
.mini th { text-align: left; color: var(--suave); font-weight: 400; padding: 3px 12px 3px 0; } .mini td { padding: 3px 0; }
pre#log { background: #10141c; color: #d8e1f0; padding: 10px; border-radius: 8px; height: 460px; overflow: auto; font-size: 12px; white-space: pre-wrap; margin: 0; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: #eef1f6; }
.tag.novo { background: #dff5e7; color: var(--ok); } .tag.removido { background: var(--critico); color: var(--perigo); }
.tag.reapareceu { background: #e3ebff; color: var(--primaria); }
.tag.concluida { background: #dff5e7; color: var(--ok); } .tag.erro, .tag.interrompida { background: var(--critico); color: var(--perigo); }
.barras div { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 12px; }
.barras i { display: block; height: 14px; background: var(--perigo); border-radius: 3px; }
.barras span { width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#aviso { position: fixed; right: 20px; bottom: 20px; max-width: 420px; background: #1d2330; color: #fff; padding: 12px 16px; border-radius: 8px; display: none; z-index: 9; }
@media (max-width: 600px) { main { padding: 12px 16px; } .grade2 { grid-template-columns: 1fr; } }
.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--amarelo); }
.caixa.login { width: 100%; max-width: 360px; margin: 16px; display: flex; flex-direction: column; gap: 4px; }
.caixa.login h1 { font-size: 19px; margin: 0 0 12px; } .caixa.login h1 span { font-weight: 400; }
.erro { color: var(--perigo); min-height: 1.2em; margin: 6px 0 0; }
.usuario { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.usuario button { padding: 4px 10px; font-size: 12px; }
.tag.inativado { background: var(--alerta); color: #8a6100; } .tag.reativado { background: #dff5e7; color: var(--ok); }
.tag.inativo { background: var(--alerta); color: #8a6100; }
.tag.descartado { background: #eef1f6; color: var(--suave); }
.linha-chips { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; flex-wrap: wrap; }
.linha-chips > b { width: 110px; font-size: 12px; color: var(--suave); padding-top: 5px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chip { border: 1px solid var(--borda); background: #fff; color: var(--texto); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.chip.on { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.chip.acao { border-style: dashed; color: var(--suave); background: none; font-size: 12px; }
.rolagem.curta { max-height: 420px; }
.num { text-align: right; white-space: nowrap; }
.barra-mini { display: inline-block; height: 8px; background: var(--perigo); border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.cards .card.alerta b { color: var(--perigo); }
nav button.destaque { margin: 6px 12px 6px 0; padding: 6px 18px; border-radius: 999px; background: var(--primaria); color: #fff; font-weight: 600; border-bottom: 0; order: -1; flex-shrink: 0; }
nav button.destaque:hover { background: #2349ad; }
nav button.destaque.ativa { box-shadow: 0 0 0 3px #c9d6f7; color: #fff; }

.vend b { font-weight: 600; } .vend small { color: var(--suave); }
.vend-info, .anuncio-info { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; align-items: center; }
.medalha { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #e6f4ea; color: #1f7a3f; font-weight: 600; white-space: nowrap; }
.medalha.gold { background: #fff3cd; color: #8a6100; } .medalha.platinum { background: #e8eaf6; color: #3949ab; }
.vendas, .vendidos { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #eef1f6; color: #3d4757; white-space: nowrap; }
.estrelas { color: #e6a700; font-weight: 700; font-size: 12px; } .anuncio-info small { color: var(--suave); }
.tag.cupom { background: #e3ebff; color: var(--primaria); margin-top: 3px; white-space: nowrap; }
.tag.cupom.abaixo { background: #ffd9d4; color: var(--perigo); font-weight: 600; }

/* Tabelas da Análise / Última coleta: larguras estáveis e rolagem lateral em telas pequenas */
.tabela th { white-space: nowrap; }
.tabela td.id { font-family: Consolas, monospace; font-size: 12px; white-space: nowrap; color: #3d4757; }
.tabela .col-produto { min-width: 260px; max-width: 420px; }
.tabela .col-vend { min-width: 180px; max-width: 260px; }
.tabela td.col-status { min-width: 90px; max-width: 200px; }
.tabela td.col-status small { color: var(--suave); }
.data { white-space: nowrap; display: inline-block; line-height: 1.3; }
.data small { display: block; color: var(--suave); font-size: 12px; }
a.abrir { display: inline-block; white-space: nowrap; padding: 3px 10px; border: 1px solid #c9d6f7; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f3f6fe; }
a.abrir:hover { background: #e3ebff; }
#tab-resultados, #tab-analise { min-width: 1180px; }
#tab-abaixo { min-width: 920px; }
#tab-ranking { min-width: 620px; }
#tab-por-produto { min-width: 640px; }
.rolagem { -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) { .grade2 { grid-template-columns: 1fr; } .tabela { font-size: 12px; } }