:root {
  --fundo: #0d1117; --painel: #161b22; --painel2: #1c2128;
  --borda: #30363d; --texto: #e6edf3; --fraco: #8b949e;
  --destaque: #58a6ff; --ok: #3fb950; --alerta: #d29922; --perigo: #f85149;
  --raio: 8px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --fundo: #f6f8fa; --painel: #fff; --painel2: #f0f3f6;
    --borda: #d0d7de; --texto: #1f2328; --fraco: #636c76;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--destaque); text-decoration: none; }
a:hover { text-decoration: underline; }

header { background: var(--painel); border-bottom: 1px solid var(--borda);
  padding: 12px 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
header .marca { font-weight: 700; font-size: 16px; letter-spacing: -.2px; }
header .marca span { color: var(--destaque); }
header nav { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
header nav a { color: var(--fraco); font-weight: 500; }
header nav a.ativo, header nav a:hover { color: var(--texto); }

main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 24px 0 10px; color: var(--fraco);
  text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.sub { color: var(--fraco); margin: 0 0 20px; }

.cartao { background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 16px; margin-bottom: 16px; }

.numeros { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 20px; }
.numero { background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 16px; }
.numero b { display: block; font-size: 26px; font-weight: 650; letter-spacing: -1px; }
.numero small { color: var(--fraco); text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--fraco); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 1px solid var(--borda); }
td { padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--painel2); }
.rolavel { overflow-x: auto; }

.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; border: 1px solid var(--borda); }
.etiqueta.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.etiqueta.vip { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 40%, transparent); }
.etiqueta.equipe { color: var(--destaque); border-color: color-mix(in srgb, var(--destaque) 40%, transparent); }
.etiqueta.off { color: var(--fraco); }

.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fraco); margin-right: 6px; }
.ponto.vivo { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }

input, select, textarea, button { font: inherit; color: var(--texto);
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 6px; padding: 7px 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--destaque); outline-offset: -1px; }
button, .botao { background: var(--destaque); color: #fff; border: 0; cursor: pointer; font-weight: 600; padding: 8px 14px; }
button:hover { filter: brightness(1.1); }
button.discreto { background: var(--painel2); color: var(--texto); border: 1px solid var(--borda); }
button.remover { background: transparent; color: var(--perigo); border: 1px solid color-mix(in srgb, var(--perigo) 40%, transparent); padding: 4px 9px; font-size: 12px; }

.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 11px; color: var(--fraco); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }

.aviso { border-radius: var(--raio); padding: 11px 14px; margin-bottom: 16px; font-size: 13px;
  border: 1px solid var(--borda); background: var(--painel); }
.aviso.atencao { border-color: color-mix(in srgb, var(--alerta) 50%, transparent);
  background: color-mix(in srgb, var(--alerta) 10%, var(--painel)); }
.aviso.bom { border-color: color-mix(in srgb, var(--ok) 50%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, var(--painel)); }
.aviso b { display: block; margin-bottom: 2px; }

.barra { height: 5px; background: var(--painel2); border-radius: 3px; overflow: hidden; min-width: 70px; }
.barra i { display: block; height: 100%; background: var(--destaque); }

.item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.item:last-child { border-bottom: 0; }
.item .nome { font-weight: 600; flex: 1; min-width: 160px; }
.item .up { color: var(--alerta); font-weight: 700; }
.pedra { font-size: 11px; color: var(--fraco); padding-left: 12px; }

.entrada { max-width: 340px; margin: 90px auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.vazio { color: var(--fraco); padding: 24px 0; text-align: center; }
@media (max-width: 640px) { main { padding: 14px 12px 40px; } .numero b { font-size: 21px; } }

/* ---------- Navegador de itens: filtros e tabela ---------- */
.filtro { margin-bottom: 14px; }
.filtro > span.rotulo { display: block; font-size: 11px; color: var(--fraco);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 11px; border-radius: 20px; font-size: 12.5px; font-weight: 500;
  background: var(--painel2); border: 1px solid var(--borda); color: var(--texto);
  user-select: none; transition: background .12s, border-color .12s; }
.chip:hover { border-color: var(--destaque); }
.chip.marcado { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.chip .conta { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
.chip.marcado .conta { opacity: .8; }

.nivel-faixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nivel-faixa input { width: 76px; }

.barra-topo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.barra-topo .campo { flex: 1; min-width: 220px; }
.resumo { color: var(--fraco); font-size: 12.5px; margin: 0 0 10px; }
.limpar { background: none; border: 0; color: var(--destaque); cursor: pointer;
  font-size: 12.5px; padding: 0; font-weight: 500; }

table.itens td { vertical-align: top; }
table.itens .nome-item { font-weight: 600; }
table.itens .meta { color: var(--fraco); font-size: 11.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 11px; padding: 1px 7px; border-radius: 4px;
  background: var(--painel2); border: 1px solid var(--borda); white-space: nowrap; }
.tag.efeito { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.tag.stat { color: var(--fraco); }
.tag.pvp { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 40%, transparent); }
.carregando { color: var(--fraco); padding: 26px 0; text-align: center; }
.add-linha { display: flex; gap: 5px; align-items: center; }
.add-linha input { width: 58px; padding: 5px 7px; font-size: 12px; }
.add-linha button { padding: 5px 11px; font-size: 12px; }

/* ---------- Carrinho de itens ---------- */
.carrinho { position: sticky; bottom: 0; z-index: 20; margin: 16px 0 0;
  background: var(--painel); border: 1px solid var(--destaque); border-radius: var(--raio);
  box-shadow: 0 -6px 24px rgba(0,0,0,.28); }
.carrinho[hidden] { display: none !important; }
.carrinho-topo { display: flex; align-items: center; gap: 12px; padding: 11px 14px; flex-wrap: wrap; }
.carrinho-topo b { font-size: 14px; }
.carrinho-topo .espaco { flex: 1; }
.carrinho-itens { border-top: 1px solid var(--borda); max-height: 300px; overflow-y: auto; padding: 4px 14px 10px; }
.carrinho-itens[hidden] { display: none; }
.carrinho-linha { display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.carrinho-linha:last-child { border-bottom: 0; }
.carrinho-linha .nome { flex: 1; min-width: 170px; font-weight: 600; font-size: 13px; }
.carrinho-linha input { width: 62px; padding: 4px 7px; font-size: 12px; }
.carrinho-linha select { padding: 4px 7px; font-size: 12px; }
.contador { display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--destaque); color: #fff; font-size: 12px; font-weight: 700; }
.chip-add { transition: background .12s; }
.chip-add.feito { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; }