/* FUTNEX 1.9.86 · troca86 (E-SITE86): a aba "Mercado" da Loja (.tr86).
   Vale nos dois visuais (html.ui68 e o Clássico), no celular (320 a 430 px) e no PC: só tokens que existem nos dois (--panel, --panel-2, --line, --line-strong, --text, --text-2, --accent, --err-txt, --ok-txt, --r-md)
   e, no visual novo, os --u-* (raios, botão duro). Alvos >= 44 px, corpo >= 14 px, nada passa da largura da tela, 1 botão amarelo por tela. Sem movimento. A carta (.mk-card, .mstk) e a ficha (.lei-info-*) são as do leilão. */
.tr86 { display: grid; gap: 12px; min-width: 0; margin-top: 8px; }
.tr86 > * { min-width: 0; }
.tr86 .tr86-ic { width: 20px; height: 20px; flex: 0 0 auto; }

/* topo: saldos + Regras */
.tr86-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.tr86-saldos { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 220px; min-width: 0; }
.tr86-saldo { flex: 1 1 130px; min-width: 0; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--panel-2, #162433); border: 1px solid var(--line, #24374a); border-radius: 999px; color: var(--text); }
.tr86-saldo .pxn { font-size: 16px; font-weight: 700; }
.tr86-saldo-n { font-size: 12px; line-height: 1.2; color: var(--text-2, #a9b8c6); min-width: 0; overflow-wrap: anywhere; }
.tr86-saldo-n em { display: block; font-style: normal; color: #2CC7BC; font-weight: 600; }
.tr86-regras { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; flex: 0 0 auto; }
.tr86-regras .tr86-ic { width: 18px; height: 18px; }

/* seletor Moedas | Fut Coin */
.tr86-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--panel-2, #162433); border: 1px solid var(--line, #24374a); border-radius: 14px; }
.tr86-seg-b { min-height: 44px; box-sizing: border-box; padding: 4px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2, #a9b8c6); font-family: var(--font-titulo, "Saira Condensed", system-ui, sans-serif); font-weight: 800; font-size: 16px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; overflow-wrap: anywhere; }
.tr86-seg-b[aria-selected="true"] { background: var(--accent, #f5c400); color: #13212e; box-shadow: 0 3px 0 #b08d00; }
.tr86-seg-b[data-fechada] { opacity: .55; }

/* sub-abas: 3 botões iguais, a aba ligada tem a barra amarela embaixo */
.tr86-sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line, #24374a); }
.tr86-sub-b { min-height: 44px; box-sizing: border-box; padding: 4px 6px; border: 0; background: transparent; color: var(--text-2, #8a9bab); font-size: 14px; font-weight: 700; line-height: 1.15; cursor: pointer; overflow-wrap: anywhere; }
.tr86-sub-b[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent, #f5c400); }
.tr86-sub-b .tag { margin-left: 4px; }

/* filtro por raridade */
.tr86-filtros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tr86-filtros::-webkit-scrollbar { height: 0; }
.tr86-chip { flex: 0 0 auto; min-height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line, #24374a); background: var(--panel-2, #162433); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tr86-chip[aria-pressed="true"] { background: var(--text); color: var(--bg, #0f1c28); border-color: var(--text); }

/* faixa verde-água (Fut Coin) e avisos */
.tr86-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: var(--text);
  background: rgba(44, 199, 188, .12); border: 1px solid rgba(44, 199, 188, .45); }
.tr86-aviso { background: color-mix(in srgb, #2CC7BC 14%, var(--panel-2, #162433)); border-color: color-mix(in srgb, #2CC7BC 45%, var(--line, #24374a)); }
.tr86-aviso .tr86-ic { color: #2CC7BC; margin-top: 1px; }
.tr86-aviso b { font-weight: 700; }
.tr86 .tr86-why { margin: 0; }
.tr86 .tr86-vazio { text-align: center; padding: 28px 8px; margin: 0; }
.tr86-nota { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-2, #a9b8c6); overflow-wrap: anywhere; }
.tr86-centro { text-align: center; }

/* lista de anúncios (a carta é a do leilão) */
.tr86-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tr86-card .mk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tr86-acoes { display: inline-flex; gap: 8px; align-items: center; }
.tr86-acoes .btn, .tr86-card .tr86-cancelar, .tr86-card .tr86-i { min-height: 44px; min-width: 44px; box-sizing: border-box; }
.tr86-preco b { font-size: 16px; }
.tr86-preco.tr86-fc .pxn { color: #2CC7BC; }
.tr86 .pchip svg, .tr86 .tr86-preco .tr86-ic { width: 16px; height: 16px; }
.tr86-st { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tr86-st-ativo { color: var(--accent, #f5c400); }
.tr86-st-ok { color: var(--ok-txt, #5fe0b0); }
.tr86-st-fc { color: #2CC7BC; }
.tr86-st-mudo { color: var(--text-2, #a9b8c6); }

/* vender: lista do elenco */
.tr86-passo-t { margin: 4px 0 0; }
.tr86-elenco { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tr86-linha { width: 100%; min-height: 64px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px; text-align: left; color: var(--text); background: var(--panel-2, #162433); border: 2px solid var(--line, #24374a); border-radius: 16px; cursor: pointer; }
.tr86-linha-on { border-color: var(--accent, #f5c400); background: var(--panel, #1d3346); }
.tr86-linha-off { opacity: .6; cursor: not-allowed; }
.tr86-linha .mstk { flex: 0 0 auto; }
.tr86-linha-txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr86-linha-txt strong { font-size: 15px; overflow-wrap: anywhere; }
.tr86-tag { flex: 0 0 auto; max-width: 42%; font-size: 11px; line-height: 1.2; font-weight: 700; padding: 5px 8px; border-radius: 999px; text-align: center; overflow-wrap: anywhere; }
.tr86-tag-ok { background: rgba(95, 224, 176, .16); color: var(--ok-txt, #5fe0b0); }
.tr86-tag-no { background: rgba(138, 155, 171, .18); color: var(--text-2, #a9b8c6); }

/* vender: preço e resumo */
.tr86-painel { display: grid; gap: 12px; padding: 14px; background: var(--panel-2, #162433); border: 1px solid var(--line, #24374a); border-radius: 16px; }
.tr86-preco-lin { display: flex; align-items: center; gap: 10px; }
.tr86-passo { flex: 0 0 auto; width: 48px; min-width: 48px; min-height: 48px; padding: 0; font-size: 22px; font-weight: 700; line-height: 1; }
.tr86-preco-v { flex: 1 1 0; min-width: 0; text-align: center; font-size: 14px; overflow-wrap: anywhere; }
.tr86-preco-v .pxn { font-size: 28px; font-weight: 800; }
.tr86-faixa { display: grid; gap: 4px; font-size: 12px; color: var(--text-2, #a9b8c6); }
.tr86-range { width: 100%; min-height: 32px; margin: 0; accent-color: var(--accent, #f5c400); cursor: pointer; }
.tr86-faixa-r { display: flex; justify-content: space-between; gap: 6px; text-align: center; }
.tr86-faixa-r > span { min-width: 0; overflow-wrap: anywhere; }
.tr86-resumo { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.tr86-resumo > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.tr86-resumo dt { margin: 0; color: var(--text-2, #a9b8c6); min-width: 0; overflow-wrap: anywhere; }
.tr86-resumo dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.tr86-resumo .tr86-neg { color: var(--err-txt, #ff8a7a); }
.tr86-resumo .tr86-total { padding-top: 8px; border-top: 1px solid var(--line, #24374a); font-size: 16px; }
.tr86-resumo .tr86-total dt { color: var(--text); font-weight: 700; }
.tr86-resumo .tr86-total dd { color: var(--accent, #f5c400); font-weight: 800; }
.tr86-anunciar { width: 100%; min-height: 52px; }
.tr86-anunciar[disabled] { opacity: .5; cursor: not-allowed; }
.tr86-rodape { display: flex; justify-content: center; }

/* folhas */
.tr86-folha { display: grid; gap: 12px; min-width: 0; padding-top: 4px; }
.tr86-folha h2 { margin: 0; overflow-wrap: anywhere; }
.tr86-folha h3 { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.tr86-folha .tr86-h-am { color: var(--accent, #f5c400); }
.tr86-folha .tr86-h-fc { color: #2CC7BC; }
.tr86-ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--text); }
.tr86-caixa { padding: 12px; border: 1px solid var(--line, #24374a); border-radius: 14px; background: var(--bg, #0f1c28); }
.tr86-folha .actions.sticky { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tr86-folha .actions.sticky .btn { width: 100%; min-height: 48px; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }
.tr86-folha .tr86-ok[disabled] { opacity: .55; cursor: not-allowed; }

/* visual novo (ui68): raios e botão duro do estilo da casa */
html.ui68 .tr86-seg { border-radius: var(--u-r3, 16px); }
html.ui68 .tr86-seg-b { border-radius: var(--u-r2, 12px); }
html.ui68 .tr86-painel, html.ui68 .tr86-linha { border-radius: var(--u-r3, 16px); }
html.ui68 .tr86-caixa { border-radius: var(--u-r2, 12px); }
html.ui68 .tr86-saldo { border-color: var(--u-line, var(--line)); background: var(--u-s2, var(--panel-2)); }
html.ui68 .tr86-anunciar, html.ui68 .tr86-ok { border-radius: var(--u-r2, 12px); }

/* celular estreito */
@media (max-width: 360px) {
  .tr86-saldo { flex-basis: 100%; }
  .tr86-seg-b { font-size: 14px; }
  .tr86-tag { max-width: 38%; }
}
/* PC: a lista não estica demais */
@media (min-width: 900px) {
  .tr86 { max-width: 760px; margin-left: auto; margin-right: auto; }
}

/* o ícone da aba "Mercado" da Loja (visual novo: as outras abas têm um ícone de pixel; este é o assets/lj-troca-1986.png, 64x64) */
html.ui68 .shop-tabs .seg-b[data-v=troca] { --ico: url(/assets/lj-troca-1986.png); }