@font-face { font-family: "Barlow"; src: url("fontes/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fontes/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fontes/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fontes/barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fontes/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fontes/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Paleta do PokeIdle (estilo.css do jogo): madeira, vão, ameixa */
  --fundo: #1e1219;
  --vao: #33202b;
  --vao2: #462b39;
  --vao-luz: #5c3948;
  --vao-fundo: #28181f;
  --mad-linha: #480e1e;
  --mad-base: #722c3f;
  --mad-esc: #914850;
  --texto: #fff6ef;
  --texto-2: #f5cdb9;
  --texto-3: #c9a9b4;
  --verde: #6fd08a;
  --verde-esc: #123522;
  --ouro: #ffd166;
  --ouro-esc: #c08a12;
  --laranja: #f0a03c;
  --coral: #ff9680;
  --vermelho: #d8574a;
  --lilas: #e77ad2;
  --roxo-fundo: #4b2a63;
  --roxo-borda: #a77bd9;
  --xp: #6fc0f0;
  --texto-mudo: #bba0aa;

  --fonte: "Barlow", Tahoma, Verdana, "Segoe UI", sans-serif;
  --fonte-rotulo: "Barlow Condensed", "Barlow", Tahoma, sans-serif;
  --raio: 10px;
  --raio-c: 6px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --sombra: 0 10px 28px rgba(10, 4, 8, 0.45);
  --linha: rgba(24, 12, 19, 0.55);
  --luz-topo: inset 0 1px 0 rgba(255, 220, 200, 0.10);
  --sai: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 15px/1.5 var(--fonte);
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--ouro); color: #2a1408; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-color: var(--vao-luz) var(--vao-fundo); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vao-fundo); }
::-webkit-scrollbar-thumb { background: var(--vao-luz); border-radius: 10px; border: 2px solid var(--vao-fundo); }
a { color: var(--ouro); text-underline-offset: 3px; }
code { font-family: Consolas, "Courier New", monospace; }
.sprite { display: none; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* ---------- rótulos do jogo: caixa alta condensada ---------- */
.rotulo, .tabela th, .campo > span, .titulo-sec {
  font-family: var(--fonte-rotulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--texto-3);
  margin: 0;
}
.titulo-sec { font-size: 16px; color: var(--texto); }

/* ---------- botões com o chanfro do jogo ---------- */
.botao {
  display: inline-flex; align-items: center; gap: var(--e2);
  font: 600 14px/1 var(--fonte);
  color: var(--texto);
  background: var(--roxo-fundo);
  border: 1px solid var(--roxo-borda);
  border-radius: var(--raio-c);
  padding: 9px 14px;
  cursor: pointer;
  border-bottom-color: #2a1440;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  transition: background-color 150ms var(--sai), transform 150ms var(--sai);
}
.botao:hover { background: #5b3577; }
.botao:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25); }
.botao:disabled { opacity: 0.55; cursor: not-allowed; }
.botao-ouro { background: var(--ouro); color: #2a1408; border-color: #ffe6a3; border-bottom-color: var(--ouro-esc); }
.botao-ouro:hover { background: #ffdc85; }
.icone-botao {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--raio-c); border: 1px solid var(--vao-luz); background: var(--vao2); color: var(--texto); cursor: pointer;
}
.icone-botao:hover { background: var(--vao-luz); }
.link { background: none; border: 0; padding: 0; color: var(--ouro); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- topo: tábua de madeira ---------- */
.topo {
  background: var(--mad-base);
  border-bottom: 2px solid var(--mad-linha);
  box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.16);
  position: sticky; top: 0; z-index: 20;
}
.topo-in {
  max-width: 1360px; margin: 0 auto; padding: var(--e3) var(--e5);
  display: flex; align-items: center; gap: var(--e5);
}
.marca { display: flex; align-items: baseline; gap: var(--e3); color: var(--texto); text-decoration: none; }
.marca-ic { width: 26px; height: 26px; color: var(--ouro); stroke-width: 2.2; align-self: center; }
.marca-nome { font: 700 24px/1 var(--fonte-rotulo); text-transform: uppercase; letter-spacing: 0.04em; }
.marca-sub { font-size: 13px; color: var(--texto-2); }
.frescor { margin: 0 0 0 auto; font-size: 13px; color: var(--texto-2); display: flex; align-items: center; gap: var(--e2); }
.frescor .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(111, 208, 138, 0.18); }
.frescor.parado .ponto { background: var(--laranja); box-shadow: 0 0 0 3px rgba(240, 160, 60, 0.2); }
.apoie { flex: none; }

/* ---------- pix ---------- */
.pix {
  margin: 72px var(--e5) auto auto; inset: 0 0 auto auto;
  width: min(420px, calc(100vw - 32px));
  background: var(--vao2); color: var(--texto);
  border: 1px solid var(--vao-luz); border-radius: var(--raio);
  padding: var(--e5); box-shadow: var(--sombra), var(--luz-topo);
}
.pix::backdrop { background: rgba(15, 6, 11, 0.4); }
.pix-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--e2); }
.pix h2 { margin: 0; font: 700 22px/1.1 var(--fonte-rotulo); text-transform: uppercase; letter-spacing: 0.03em; }
.pix p { margin: 0 0 var(--e4); color: var(--texto-2); }
.pix .rotulo { margin-bottom: var(--e2); }
.pix-chave { display: flex; gap: var(--e2); align-items: stretch; margin-bottom: var(--e3); }
.pix-chave code {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 13px; overflow-wrap: anywhere;
  background: var(--vao-fundo); border: 1px solid var(--vao-luz); border-radius: var(--raio-c); color: var(--ouro);
}
.nota { font-size: 13px; color: var(--texto-3); margin: 0; }

/* ---------- base ---------- */
main { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: var(--e5) var(--e5) var(--e7); }

.treinador {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3) var(--e5);
  background: var(--vao2); border: 1px solid var(--vao-luz); border-radius: var(--raio);
  padding: var(--e4) var(--e5);
  box-shadow: var(--luz-topo);
}
.treinador .rotulo { color: var(--ouro); align-self: center; font-size: 14px; }
.treinador-nota { margin: 0 0 0 auto; font-size: 13px; color: var(--texto-3); align-self: center; max-width: 32ch; }
.campo { display: grid; gap: 6px; }
.campo > span { font-size: 12px; }
.campo small { font-size: 12px; color: var(--texto-3); }
input, select {
  font: 500 15px/1.2 var(--fonte); color: var(--texto);
  background: var(--vao-fundo); border: 1px solid var(--vao-luz); border-radius: var(--raio-c);
  padding: 9px 11px; min-height: 40px; min-width: 0;
}
input::placeholder { color: var(--texto-mudo); }
input:hover, select:hover { border-color: var(--mad-esc); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--ouro); outline-offset: 0; border-color: transparent; }
#nivel { width: 120px; font-weight: 700; font-size: 18px; }
select { padding-right: 30px; cursor: pointer; }

.chip-check {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  padding: 0 12px; min-height: 40px; border-radius: var(--raio-c);
  border: 1px solid var(--vao-luz); border-bottom-color: #1a0c13; background: var(--vao); color: var(--texto-2); font-weight: 600; font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check:has(input:checked) { background: #5a2f7a; border-color: #c58af0; border-bottom-color: #2a1440; color: var(--texto); }
.chip-check:has(input:checked) .ic { color: var(--lilas); }
.chip-check:has(input:focus-visible) { outline: 2px solid var(--ouro); outline-offset: 2px; }
/* interruptor: desligado = bolinha apagada à esquerda; ligado = trilho lilás e bolinha clara à direita */
.switch {
  position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px;
  background: var(--fundo); border: 1px solid var(--vao-luz); transition: background-color 150ms var(--sai), border-color 150ms var(--sai);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--texto-mudo); transition: transform 150ms var(--sai), background-color 150ms var(--sai);
}
.chip-check input:checked + .switch { background: #8a4fc0; border-color: #c58af0; }
.chip-check input:checked + .switch::after { transform: translateX(12px); background: #fff6ef; }

/* ---------- abas ---------- */
.abas { display: flex; gap: var(--e1); margin: var(--e5) 0 0; border-bottom: 1px solid var(--vao-luz); overflow-x: auto; }
.abas [role="tab"] {
  font: 700 16px/1 var(--fonte-rotulo); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-3); background: none; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--raio-c) var(--raio-c) 0 0; padding: 12px 18px 11px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--e2); margin-bottom: -1px;
}
.abas [role="tab"]:hover { color: var(--texto); background: rgba(92, 57, 72, 0.35); }
.abas [role="tab"][aria-selected="true"] { color: var(--texto); background: var(--vao2); border-color: var(--vao-luz); box-shadow: inset 0 2px 0 var(--ouro); }
.contador { background: var(--ouro); color: #2a1408; border-radius: 999px; padding: 2px 7px; font: 700 12px/1.2 var(--fonte); letter-spacing: 0; }
.painel-aba { background: var(--vao2); border: 1px solid var(--vao-luz); border-top: 0; border-radius: 0 0 var(--raio) var(--raio); padding: var(--e5); }

/* ---------- vitrine ---------- */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); margin-bottom: var(--e4); }
.busca { position: relative; flex: 1 1 220px; max-width: 320px; }
.busca .ic { position: absolute; left: 11px; top: 50%; translate: 0 -50%; color: var(--texto-3); pointer-events: none; }
.busca input { width: 100%; padding-left: 36px; }
.campo-inline > span { font-size: 12px; }
#f-preco { width: 110px; }
.filtros-total { margin: 0 0 10px auto; font-size: 13px; color: var(--texto-3); }

.tabela-env { overflow-x: auto; border-radius: var(--raio-c); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th.num { text-align: right; }
.tabela th { font-size: 12px; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; vertical-align: bottom; }
.th-ajuda { display: block; font: 400 12px/1.3 var(--fonte); text-transform: none; letter-spacing: 0; color: var(--texto-mudo); }
.tabela td { padding: 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.num { text-align: right; white-space: nowrap; }
#v-corpo tr { cursor: pointer; transition: background-color 120ms var(--sai); }
#v-corpo tr:hover { background: #52323f; }
#v-corpo tr[aria-selected="true"] { background: #533140; box-shadow: inset 0 0 0 1px var(--ouro); }
#v-corpo tr:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }

.pk-nome { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pk-sub { font-size: 13px; color: var(--texto-3); margin-top: 2px; }
.selo {
  display: inline-flex; align-items: center; gap: 3px; border-radius: 4px; padding: 1px 6px;
  font: 700 11px/1.5 var(--fonte-rotulo); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.selo .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.selo-shiny { background: #4a2350; color: #ffc6f0; }
.selo-aoe { background: var(--roxo-fundo); color: #dcc4ff; }
.selo-z { background: #263066; color: #c9cdfa; }
.selo-alta { background: var(--verde-esc); color: var(--verde); }
.selo-media { background: #3d3112; color: var(--ouro); }
.selo-baixa { background: #3e1d19; color: #ffb4a0; }
.preco { font-weight: 700; font-size: 16px; }
.preco small, .gemas { font-weight: 500; font-size: 12px; color: var(--texto-3); }

/* Assinatura: a faixa do justo */
.col-faixa { width: 26%; min-width: 210px; }
.faixa { position: relative; height: 22px; }
.faixa-trilho { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--fundo); }
.faixa-banda { position: absolute; top: 6px; height: 10px; border-radius: 3px; background: rgba(111, 208, 138, 0.28); border: 1px solid rgba(111, 208, 138, 0.55); left: var(--b0); width: var(--bl); }
.faixa-mediana { position: absolute; top: 3px; width: 2px; height: 16px; background: var(--verde); left: var(--m); translate: -1px 0; border-radius: 1px; }
.faixa-ponto {
  position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%; left: var(--p); translate: -7px 0;
  background: var(--cor-ponto, var(--ouro)); border: 2px solid var(--vao2); box-shadow: 0 0 0 1px var(--cor-ponto, var(--ouro));
}
.faixa-vazia { font-size: 13px; color: var(--texto-mudo); }
.bom { --cor-ponto: var(--verde); color: var(--verde); }
.neutro { --cor-ponto: var(--ouro); color: var(--ouro); }
.caro { --cor-ponto: var(--coral); color: var(--coral); }
.pct { font: 700 17px/1 var(--fonte); }
.revenda-pos { color: var(--verde); font-weight: 600; }
.revenda-neg { color: var(--texto-3); }
.xph { color: var(--xp); font-weight: 700; }
.xph-hunt { display: block; font-size: 12px; color: var(--texto-3); font-weight: 400; }
.mudo { color: var(--texto-mudo); font-size: 13px; }
.vendedor { color: var(--texto-2); font-size: 14px; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mais { display: flex; justify-content: center; padding-top: var(--e4); }
.esqueleto td { color: transparent; }
.esqueleto .barra-e { height: 12px; border-radius: 4px; background: var(--vao); animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: 0.45; } }
.vazio { color: var(--texto-2); max-width: 70ch; margin: var(--e4) 0; }
.erro-caixa { border: 1px solid var(--vermelho); background: #3e1d19; color: #ffc9bd; border-radius: var(--raio-c); padding: var(--e3) var(--e4); }

/* ---------- detalhe (painel lateral) ---------- */
.detalhe {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(520px, 100vw);
  background: var(--vao2); border-left: 1px solid var(--vao-luz); box-shadow: -18px 0 40px rgba(10, 4, 8, 0.5);
  overflow-y: auto; overscroll-behavior: contain;
  animation: entra 280ms var(--sai);
}
@keyframes entra { from { transform: translateX(24px); opacity: 0; } }
.detalhe-in { padding: var(--e5); display: grid; gap: var(--e5); }
.d-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); }
.d-cab h2 { margin: 0 0 6px; font: 700 28px/1.05 var(--fonte); letter-spacing: -0.01em; }
.d-preco { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.d-preco .preco { font-size: 20px; }
.numero-jogo {
  font: 700 46px/1 var(--fonte); color: var(--verde); letter-spacing: -0.02em;
  text-shadow: -1px -1px 0 var(--verde-esc), 1px -1px 0 var(--verde-esc), -1px 1px 0 var(--verde-esc), 1px 2px 0 var(--verde-esc);
}
.numero-jogo small { font-size: 18px; color: var(--texto-3); text-shadow: none; font-weight: 600; }
.d-bloco { border-top: 1px solid var(--vao-luz); padding-top: var(--e4); display: grid; gap: var(--e3); }
.d-bloco h3 { margin: 0; }
.faixa-grande { height: 44px; }
.faixa-grande .faixa-trilho { top: 18px; height: 6px; }
.faixa-grande .faixa-banda { top: 13px; height: 16px; transform-origin: var(--m) 50%; animation: abre 520ms 80ms var(--sai) backwards; }
.faixa-grande .faixa-mediana { top: 9px; height: 24px; width: 3px; }
.faixa-grande .faixa-ponto { top: 12px; width: 18px; height: 18px; translate: -9px 0; }
@keyframes abre { from { transform: scaleX(0.05); opacity: 0; } }
.faixa-legenda { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-3); }
.cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.cartao { border-radius: var(--raio-c); padding: 8px 10px; background: var(--vao); border: 1px solid var(--vao-luz); box-shadow: var(--luz-topo); }
.cartao .rotulo { font-size: 12px; }
.cartao b { display: block; font-size: 17px; margin-top: 2px; }
.cartao-lilas { background: #5a2f7a; border-color: #c58af0; }
.cartao-lilas .rotulo { color: #e9d4ff; }
.cartao-verde { background: #2c5d3c; border-color: var(--verde); }
.cartao-verde .rotulo { color: #c9f5d6; }
.d-pve { display: grid; gap: var(--e2); }
.d-pve-linha { display: grid; grid-template-columns: 1fr auto; gap: var(--e3); align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.d-pve-linha:last-child { border-bottom: 0; }
.d-pve-linha .xph { font-size: 18px; }
.grafico { width: 100%; height: auto; display: block; }
.grafico text { font: 500 11px var(--fonte); fill: var(--texto-3); }
.d-como { font-size: 14px; color: var(--texto-2); }
.d-como p { margin: 0 0 var(--e2); }

/* ---------- achar o melhor ---------- */
.melhor-form { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: flex-end; padding-bottom: var(--e5); border-bottom: 1px solid var(--linha); }
.melhor-form > .colar { order: -1; flex: 1 1 100%; }
.melhor-form > button[type=submit] { margin-left: auto; }
/* botões alinhados à linha dos campos (rótulo 18px + 6px de vão acima; ajuda abaixo não conta) */
.melhor-form { align-items: flex-start; }
.melhor-form > .chip-check, .melhor-form > button[type=submit] { margin-top: 24px; }
#m-orcamento { width: 160px; }
.colar { display: grid; gap: var(--e2); }
.colar textarea {
  width: 100%; resize: vertical; min-height: 76px; font: 400 13px/1.45 Consolas, "Courier New", monospace; color: var(--texto);
  background: var(--vao-fundo); border: 1px solid var(--vao-luz); border-radius: var(--raio-c); padding: 9px 11px;
}
.colar textarea::placeholder { font-family: var(--fonte); font-size: 14px; color: var(--texto-mudo); }
.colar textarea:focus-visible { outline: 2px solid var(--ouro); outline-offset: 0; border-color: transparent; }
.opcional { font: 500 12px var(--fonte); text-transform: none; letter-spacing: 0; color: var(--texto-mudo); }
.colar-lido { margin: 0; font-size: 13px; color: var(--texto-3); }
.colar-lido.ok { color: var(--verde); }
.colar-lido.erro { color: #ffb4a0; }
.colar-extra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); }
.colar-extra .nota { align-self: center; }
.m-atual { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e4); background: var(--vao); border: 1px solid var(--vao-luz); border-radius: var(--raio-c); padding: var(--e3) var(--e4); margin-bottom: var(--e4); }
.m-atual .xph { font-size: 20px; }
.m-saida { padding-top: var(--e4); }
.m-resumo { color: var(--texto-2); font-size: 14px; margin: 0 0 var(--e4); max-width: 80ch; }
.ranking { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.ranking li {
  counter-increment: r; display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 120px 250px; gap: var(--e4); align-items: center;
  padding: var(--e3) var(--e2); border-bottom: 1px solid var(--linha);
}
.ranking li::before { content: counter(r); font: 700 22px/1 var(--fonte-rotulo); color: var(--texto-3); text-align: center; }
.ranking li:first-child::before { color: var(--ouro); }
.caminho { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.passo { font-size: 12px; padding: 1px 7px; border-radius: 4px; background: var(--vao-fundo); border: 1px solid var(--vao-luz); color: var(--texto-2); display: inline-flex; align-items: center; gap: 3px; }
.passo .ic { width: 12px; height: 12px; }
.ganho { font-weight: 700; }
.ganho.sobe { color: var(--verde); }
.custo small { display: block; font-size: 12px; color: var(--texto-3); }
.fronteira { margin-top: var(--e6); }
.fronteira h3 { margin: 0 0 var(--e2); }
.aviso { display: flex; gap: var(--e2); align-items: flex-start; background: #3d3112; border: 1px solid #7a5d1a; color: #ffe6a3; border-radius: var(--raio-c); padding: var(--e3) var(--e4); font-size: 14px; margin-bottom: var(--e4); }
.aviso .ic { margin-top: 1px; }

/* ---------- alertas ---------- */
.alertas-grade { display: grid; grid-template-columns: 320px 1fr; gap: var(--e6); align-items: start; }
.alertas-config { display: grid; gap: var(--e4); background: var(--vao); border: 1px solid var(--vao-luz); border-radius: var(--raio); padding: var(--e5); position: sticky; top: 96px; }
.alertas-config input, .alertas-config select { width: 100%; }
.avisos { display: grid; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--vao-luz); }
.feed-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); flex-wrap: wrap; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.feed li {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e4);
  background: var(--vao); border: 1px solid var(--vao-luz); border-radius: var(--raio); padding: var(--e4);
  cursor: pointer; box-shadow: var(--luz-topo);
}
.feed li:hover { border-color: var(--mad-esc); }
.feed li.novo { border-color: var(--ouro); }
.feed li.vazio-li { background: none; border: 0; padding: 0; cursor: default; display: block; }
.feed .faixa { grid-column: 1 / -1; }
.libera { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ouro); font-weight: 600; }
.libera .ic { width: 14px; height: 14px; }
.libera.liberado { color: var(--verde); }

/* ---------- como funciona ---------- */
.como { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--e6); }
.como-indice { position: sticky; top: 96px; align-self: start; display: grid; gap: 2px; }
.como-indice a { color: var(--texto-2); text-decoration: none; padding: 7px 10px; border-radius: var(--raio-c); font-size: 14px; }
.como-indice a:hover { background: var(--vao); color: var(--texto); }
.como-texto { max-width: 72ch; }
.como-texto section { padding-bottom: var(--e6); }
.como-texto section + section { border-top: 1px solid var(--vao-luz); padding-top: var(--e5); }
.como-texto h2 { font: 700 26px/1.15 var(--fonte); margin: var(--e2) 0 var(--e3); letter-spacing: -0.01em; text-wrap: balance; }
.como-texto p, .como-texto li { color: var(--texto-2); line-height: 1.65; }
.como-texto b { color: var(--texto); }
.como-texto ul, .passos { padding-left: 22px; }
.passos li { margin-bottom: var(--e2); }
.conta {
  font-weight: 600; color: var(--texto) !important; background: var(--vao); border: 1px solid var(--vao-luz);
  border-radius: var(--raio-c); padding: var(--e3) var(--e4);
}
.tabela-texto { margin: var(--e3) 0 var(--e4); font-size: 14px; }
.tabela-texto td { color: var(--texto-2); vertical-align: top; }
.tabela-curta { max-width: 460px; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--vao-luz); padding: var(--e5); text-align: center; font-size: 13px; color: var(--texto-3); }
.rodape p { margin: 4px 0; }

/* ---------- telas menores ---------- */
@media (max-width: 1080px) {
  .alertas-grade { grid-template-columns: 1fr; }
  .alertas-config { position: static; }
  .como { grid-template-columns: 1fr; }
  .como-indice { position: static; display: flex; flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .topo { position: static; }
  .topo-in { flex-wrap: wrap; gap: var(--e2) var(--e4); padding: var(--e3) var(--e4); }
  .marca-sub { display: none; }
  .frescor { order: 3; width: 100%; margin: 0; }
  .apoie { margin-left: auto; }
  main { padding: var(--e4) var(--e4) var(--e6); }
  .painel-aba { padding: var(--e4); }
  .treinador { padding: var(--e4); }
  .treinador-nota { margin: 0; max-width: none; }
  .filtros-total { width: 100%; margin: 0; }
  .abas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e1); border-bottom: 0; overflow: visible; }
  .abas [role="tab"] { justify-content: center; border: 1px solid var(--vao-luz); border-radius: var(--raio-c); margin: 0; padding: 11px 8px; font-size: 15px; }
  .painel-aba { border-top: 1px solid var(--vao-luz); border-radius: var(--raio); margin-top: var(--e2); }
  .melhor-form > button[type=submit] { margin-left: 0; }
  .abas [role="tab"][aria-selected="true"] { border-color: var(--ouro); }
  /* tabela vira lista */
  #v-tabela thead { display: none; }
  #v-tabela, #v-tabela tbody { display: block; }
  #v-corpo tr {
    display: grid; grid-template-columns: 1fr auto; gap: 6px var(--e3);
    padding: var(--e3) var(--e2); border-bottom: 1px solid var(--linha);
  }
  #v-corpo td { display: block; padding: 0; border: 0; }
  #v-corpo td.c-pk { grid-column: 1; }
  #v-corpo td.c-preco { grid-column: 2; grid-row: 1; }
  #v-corpo td.c-faixa { grid-column: 1 / -1; }
  #v-corpo td.c-pct { grid-column: 1; text-align: left; }
  #v-corpo td.c-rev { grid-column: 2; }
  #v-corpo td.c-xph { grid-column: 1; text-align: left; }
  #v-corpo td.c-vend { grid-column: 2; text-align: right; }
  #v-corpo td[data-r]::before { content: attr(data-r); display: block; font: 700 11px/1.4 var(--fonte-rotulo); text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); }
  .ranking li { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .ranking li > :nth-child(3), .ranking li > :nth-child(4) { grid-column: 2 / -1; }
  .pix { margin: 64px 16px auto auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}