:root {
  --fundo: #f5f6f8; --cartao: #ffffff; --borda: #e4e7ec; --texto: #111827; --suave: #6b7280; --fraco: #9ca3af;
  --azul: #1f6feb; --azul-fundo: #e8f0fe; --verde: #12805c; --verde-fundo: #e3f5ec; --vermelho: #c0362c; --vermelho-fundo: #fdecea;
  --amarelo: #a15c00; --amarelo-fundo: #fff4e0; --lateral: #ffffff; --linha-hover: #f8fafc; --sombra: 0 1px 2px rgba(16,24,40,.06);
  --raio: 10px; color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fundo: #0d1117; --cartao: #161b22; --borda: #2a313c; --texto: #e6edf3; --suave: #9aa4b2; --fraco: #6e7681;
  --azul: #4c8dff; --azul-fundo: #13233f; --verde: #3fb984; --verde-fundo: #10291f; --vermelho: #f0776c; --vermelho-fundo: #33191a;
  --amarelo: #e3a53d; --amarelo-fundo: #2e2210; --lateral: #11161d; --linha-hover: #1b222c; --sombra: none; color-scheme: dark;
} }
:root[data-theme="dark"] {
  --fundo: #0d1117; --cartao: #161b22; --borda: #2a313c; --texto: #e6edf3; --suave: #9aa4b2; --fraco: #6e7681;
  --azul: #4c8dff; --azul-fundo: #13233f; --verde: #3fb984; --verde-fundo: #10291f; --vermelho: #f0776c; --vermelho-fundo: #33191a;
  --amarelo: #e3a53d; --amarelo-fundo: #2e2210; --lateral: #11161d; --linha-hover: #1b222c; --sombra: none; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: var(--azul); text-decoration: none; }
button, select, input { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }

/* estrutura */
.casca { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.lateral { background: var(--lateral); border-right: 1px solid var(--borda); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; padding: 4px 8px 14px; }
.marca i { width: 24px; height: 24px; border-radius: 7px; background: var(--azul); display: inline-block; }
.lateral select { width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); margin-bottom: 14px; }
.menu-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); padding: 14px 10px 6px; }
.menu a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--texto); }
.menu a:hover { background: var(--linha-hover); }
.menu a.ativo { background: var(--azul-fundo); color: var(--azul); font-weight: 600; }
.rodape-lateral { margin-top: 18px; padding: 10px; font-size: 12px; color: var(--suave); display: grid; gap: 8px; }
.rodape-lateral button { background: none; border: 1px solid var(--borda); border-radius: 7px; padding: 6px 8px; cursor: pointer; text-align: left; }
.conteudo { padding: 20px 24px 60px; min-width: 0; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.topo h1 { font-size: 20px; margin: 0; }
.sub { color: var(--suave); font-size: 13px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros select, .filtros input, .botao { padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); }
.botao { cursor: pointer; }
.botao.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.abas { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: var(--cartao); }
.abas button { border: 0; background: none; padding: 7px 12px; cursor: pointer; border-right: 1px solid var(--borda); }
.abas button:last-child { border-right: 0; }
.abas button.ativo { background: var(--azul-fundo); color: var(--azul); font-weight: 600; }

/* cartões */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); }
.cartao .rot { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.cartao .val { font-size: 22px; font-weight: 700; margin-top: 4px; }
.cartao .var { font-size: 12px; margin-top: 2px; }
.cartao.destaque { border-color: var(--azul); }
.bloco { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 16px; }
.bloco > h2 { font-size: 15px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.bloco > .corpo { padding: 14px 16px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pos { color: var(--verde); } .neg { color: var(--vermelho); } .fraco { color: var(--fraco); }
.aviso { background: var(--amarelo-fundo); color: var(--amarelo); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 13px; }
.info { background: var(--azul-fundo); color: var(--texto); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 13px; }

/* tabela */
.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: right; white-space: nowrap; }
th { font-size: 12px; color: var(--suave); font-weight: 600; position: sticky; top: 0; background: var(--cartao); cursor: pointer; user-select: none; }
th:first-child, td:first-child, th.esq, td.esq { text-align: left; }
td.nome { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
tbody tr:hover { background: var(--linha-hover); }
tr.clicavel { cursor: pointer; }
tfoot td { font-weight: 700; border-top: 2px solid var(--borda); }

/* selos */
.selo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.selo.melhorando, .selo.campeao, .selo.ativo, .selo.finalizada { background: var(--verde-fundo); color: var(--verde); }
.selo.piorando, .selo.reprovado { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo.estavel, .selo.em_teste, .selo.validado { background: var(--azul-fundo); color: var(--azul); }
.selo.amostra_pequena, .selo.sem_base, .selo.nao_testado, .selo.nao_testada, .selo.pausado { background: var(--linha-hover); color: var(--suave); border: 1px solid var(--borda); }
.etiqueta { display: inline-block; padding: 0 6px; margin: 1px 2px; border-radius: 5px; font-size: 11px; background: var(--linha-hover); border: 1px solid var(--borda); color: var(--suave); }
.etiqueta.sim { background: var(--verde-fundo); color: var(--verde); border-color: transparent; }
.etiqueta.nao { background: var(--amarelo-fundo); color: var(--amarelo); border-color: transparent; }

/* gráficos */
svg text { fill: var(--suave); font-size: 11px; }
.grafico { width: 100%; height: auto; max-height: 240px; display: block; }
.migalha { font-size: 13px; color: var(--suave); margin-bottom: 10px; }
.migalha a { cursor: pointer; }
pre.codigo { background: var(--linha-hover); border: 1px solid var(--borda); border-radius: 8px; padding: 10px; white-space: pre-wrap; word-break: break-all; font-size: 12px; }

.so-celular { display: none !important; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: 100%; max-width: 360px; display: grid; gap: 10px; }
.login input { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); }

@media (max-width: 860px) {
  .casca { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .grade2 { grid-template-columns: 1fr; }
  .conteudo { padding: 16px; }
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cartao { padding: 10px 12px; }
  .cartao .val { font-size: 18px; }
  .lateral { padding: 10px 12px; }
  .lateral .marca { padding-bottom: 8px; }
  .lateral select { margin-bottom: 0; }
  .lateral:not(.aberta) .menu, .lateral:not(.aberta) .menu-grupo, .lateral:not(.aberta) .rodape-lateral { display: none; }
  .so-celular { display: inline-block !important; }
}