/* ═══════════════════════════════════════════════════════════════════════════════════════
   🛒 MERCADO.CSS — o LAYOUT compartilhado das telas de jogador (marketplace, carteira,
   stake, perfil). Vive SOBRE o ds.css (tokens+componentes) e o glass.css (efeitos).
   Header/footer: injetados. Fontes ≥14px e alto contraste — régua do Giba.

   🧬 F3 (03/09) — SÓ LAYOUT. A cara (vidro, botão, pill, chip, campo) mora no ds.css; aqui
   ficam grade, gap, tamanho e as cores por TOKEN que são leitura (raridade, moeda, alta/baixa).
   Zero hex; nenhum seletor `.btn` (o botão é do ds — o layout dele aqui é dado pelo PAI:
   `.mkt-corpo > button`, `.vend-row > button`); media só em {640, 1024}.
   Os blocos de carteira e stake que viviam aqui em CÓPIA foram pros donos (carteira.css é
   linkada pelo próprio painel; stake.css pelo stake.html).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* 🌌 ATMOSFERA — sem isto as telas ficam no #07070d puro e parecem "apagadas" ao lado da
   landing (que tem a arte do hero). Dois brilhos fixos, custo zero de imagem. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 42% at 15% -6%, color-mix(in srgb, var(--au-600) 18%, transparent), transparent 62%),
    radial-gradient(52% 40% at 92% 4%, color-mix(in srgb, var(--am-400) 16%, transparent), transparent 60%),
    radial-gradient(80% 60% at 50% 108%, color-mix(in srgb, var(--au-400) 8%, transparent), transparent 70%);
}
/* ⚠️ nada de `body::after` aqui: a landing já usa pseudo-elementos do body pro pavio/grade e
   uma camada extra fixa por cima escurecia a página inteira no render (medido no print). */

.mkt-wrap { padding: 96px 0 80px; display: flex; flex-direction: column; gap: 26px; }
.mkt-wrap h1 { font-family: var(--font-head); font-size: clamp(30px, 4vw, 44px); margin: 6px 0 10px; line-height: 1.05; }
.mkt-wrap h2 { font-family: var(--font-head); font-size: 21px; margin: 0; }
.mkt-wrap section.card, .mkt-wrap section.glass { padding: 24px; border-radius: var(--radius-lg); }

/* o cartão de painel (NÃO é o .card de asset do glass.css): a cara é do `.glass` do ds;
   aqui só devolvemos o cursor que a carta v2 do glass.css impõe em todo `.card` */
.mkt-wrap .glass.card { cursor: default; }
/* ⚠️ `.card` do glass.css declara `display:block`, que VENCE o atributo `hidden` do HTML —
   as seções vazias (Meus stakes, Histórico, Meus anúncios) apareciam com título e nada dentro.
   Esta linha devolve ao `hidden` o poder de esconder. */
.mkt-wrap [hidden] { display: none !important; }

.mkt-hero, .cart-topo { display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mkt-hero > div:first-child, .cart-topo > div:first-child { flex: 1 1 380px; min-width: 0; }
.mkt-regras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* o número em destaque do hero (contagem do mercado; o stake usa o irmão `.stk-saldo`) */
.mkt-countbox { text-align: center; padding: 18px 26px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); min-width: 190px; }
.mkt-countbox .k { font: 800 11px/1 var(--font-ui); letter-spacing: .14em; color: var(--gold); }
.mkt-countbox .cd { font-family: var(--font-head); font-size: 30px; margin: 8px 0 4px; color: var(--text); }
.mkt-countbox .s { font-size: 12.5px; color: var(--text-mute); }

.mkt-fechado h2 { margin-bottom: 10px; }
.mkt-fechado p { font-size: 15px; line-height: 1.6; max-width: 70ch; }

.mkt-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 16px; }
.mkt-filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mkt-filtros .sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
/* .chip MIGROU pro ds.css no D1 — um dono, uma cara (alvo 40px, ativo ouro) */

/* ── a vitrine ─────────────────────────────────────────────────────────────────────── */
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; }
/* 🃏 D-4 (03/09): o card da vitrine saiu daqui. Era o 4º desenho do mesmo boneco (`.mkt-card`,
   `.mkt-arte` + moldura `::after`, a linha de 3px `::before`, os selos `.mkt-selo`, `.mkt-attr`,
   `.mkt-preco`) — hoje a vitrine usa o card ÚNICO `/v2/motor/card-unidade.css` (D-5) e o que é
   do MERCADO no card (preço, Comprar, serial, prazo) mora no marketplace.css §14. Aqui fica só o
   layout da página. */
/* 🧾 o QR do PIX no modal de compra */
.pix-qr { display: block; width: 220px; height: 220px; margin: 14px auto; border-radius: 10px;
  /* branco puro de propósito: o leitor de QR do banco precisa de contraste máximo — é
     padrão do PIX, não paleta */
  background: white; padding: 8px; image-rendering: pixelated; }
.ov-card textarea { font: 500 12px ui-monospace, monospace; color: var(--text); background: rgba(0,0,0,.4);
  border: 1px solid var(--border); border-radius: 9px; padding: 10px; resize: vertical; width: 100%; }
.mkt-vazio { grid-column: 1/-1; padding: 34px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.mkt-pag { display: flex; gap: 6px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* ── 📊 A FAIXA DO MERCADO (L124-C) — dados REAIS do trade_log, nunca estimativa ─────── */
.mkt-info { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 20px; align-items: start; }
.mkt-info h4 { font: 800 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 12px; }
.mkt-faixas { display: flex; flex-direction: column; gap: 7px; }
.faixa-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.faixa-row .r { font: 800 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--fc, var(--text-dim)); }
.faixa-row.rar-legend { --fc: var(--legend); } .faixa-row.rar-mythic { --fc: var(--mythic); }
.faixa-row.rar-divine { --fc: var(--divine); } .faixa-row.rar-epic { --fc: var(--epic); }
.faixa-row.rar-rare { --fc: var(--rare); } .faixa-row.rar-srare { --fc: var(--srare); }
.faixa-row.rar-common { --fc: var(--common); } .faixa-row.rar-uncommon { --fc: var(--uncommon); }
/* a barra mostra min→max com a média marcada: uma faixa se lê melhor que três números soltos */
.faixa-bar { position: relative; height: 8px; border-radius: 99px; background: rgba(0,0,0,.42);
  border: 1px solid var(--border); overflow: visible; }
.faixa-bar i { position: absolute; top: -1px; bottom: -1px; border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 35%, transparent), var(--fc)); }
.faixa-bar u { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--text);
  border-radius: 2px; box-shadow: 0 0 6px rgba(0,0,0,.8); }
.faixa-row .v { font: 700 12.5px var(--font-ui); color: var(--text); white-space: nowrap; }
.mkt-spark { width: 100%; height: 74px; display: block; }
.mkt-spark-leg { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-mute); margin-top: 4px; }
.top-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  font-size: 13px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.07); }
.top-row:last-child { border-bottom: none; }
.top-row .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.top-row .q { font: 700 12.5px var(--font-ui); color: var(--gold); white-space: nowrap; }
.sem-dado { font-size: 13px; color: var(--text-mute); line-height: 1.6; }

/* ── 🎚️ ordenação e filtros extras ──────────────────────────────────────────────────── */
.mkt-filtros select { font: 700 12.5px var(--font-ui); color: var(--text-dim); padding: 7px 10px;
  border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.03); cursor: pointer; }
.mkt-filtros select:focus { outline: none; border-color: var(--primary); color: var(--text); }
.mkt-filtros input[type=number] { width: 96px; font: 600 12.5px var(--font-ui); color: var(--text);
  padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border); background: rgba(0,0,0,.3); }
.mkt-filtros .lbl { font: 700 11.5px var(--font-ui); color: var(--text-mute); letter-spacing: .04em; }
.mkt-filtros2 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.mkt-conta { font-size: 13px; color: var(--text-mute); margin-left: auto; }

/* ── 🔗 O CERTIFICADO — a linha do tempo da procedência ─────────────────────────────── */
.cert-cab { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.cert-serial { font: 700 14px ui-monospace, monospace; color: var(--cyan); letter-spacing: .04em; }
.cert-expl { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; padding: 11px 13px;
  border-radius: 9px; background: rgba(57,208,255,.06); border: 1px solid rgba(57,208,255,.2); margin: 10px 0 16px; }
.cert-linha { position: relative; padding-left: 26px; }
/* o fio da corrente: a linha vertical que liga os elos, desenhada uma vez */
.cert-linha::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--cyan), rgba(57,208,255,.15)); border-radius: 2px; }
.cert-elo { position: relative; padding: 0 0 16px 0; }
.cert-elo::before { content: ''; position: absolute; left: -23px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(57,208,255,.18); }
.cert-elo:last-child { padding-bottom: 0; }
.cert-ev { font: 800 12px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.cert-quem { font: 600 12.5px ui-monospace, monospace; color: var(--text-dim); margin-top: 2px; }
.cert-meta { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; }
.cert-preco { color: var(--gold); font-weight: 700; }
.cert-hash { font: 500 11px ui-monospace, monospace; color: var(--text-mute); margin-top: 3px; cursor: help; }

/* ── 📈 o gráfico "estilo Steam" do item ────────────────────────────────────────────── */
.item-graf { width: 100%; height: 130px; display: block; margin: 12px 0 6px; }
.item-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; margin: 12px 0; }
.item-num { padding: 9px 10px; border-radius: 9px; background: rgba(255,255,255,.035); border: 1px solid var(--border); }
.item-num .k { font: 800 11px var(--font-ui); letter-spacing: .1em; color: var(--text-mute); text-transform: uppercase; }
.item-num .v { font-family: var(--font-head); font-size: 17px; color: var(--text); margin-top: 3px; }

/* ── vender / meus anúncios ── D-4: a `.vend-row` (linha lateral de 3px) morreu; a grade paginada
   `.mk-meu` mora no marketplace.css §14. `.v-nome`/`.v-faixa` ficam: a tabela de coleções usa. */
.v-nome { font-size: 15px; min-width: 0; }
.v-faixa { font-size: 13px; white-space: nowrap; }
/* .btn-sm mora no ds.css (alias de .btn--sm) desde o D1 */

/* ── formulário compartilhado (marketplace, stake, carteira) ─────────────────────────
   `.lb` é o rótulo em coluna. A CARA do campo é o `.input`/`.select` do ds; a regra abaixo é
   só o FALLBACK pra markup que ainda não pôs a classe (os modais do marketplace) — por isso o
   `:not(.input)`: um campo classado tem UM dono. */
.lb { display: flex; flex-direction: column; gap: 6px; font: 700 var(--fs-2) var(--font-ui); color: var(--text-dim); }
.lb input, .lb select, .lb textarea { width: 100%; }
.lb input:not(.input), .lb select:not(.select) {
  font: 600 var(--fs-3) var(--font-ui); color: var(--text); background: rgba(0,0,0,.35);
  border: 1px solid var(--border); border-radius: 9px; padding: var(--sp-3) var(--sp-4); min-height: 48px; }
.lb input:not(.input):focus, .lb select:not(.select):focus { outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
/* o valor com sinal (alta/baixa nas coleções, histórico do stake) */
.e-v { font-weight: 800; } .e-v.pos { color: var(--green); } .e-v.neg { color: var(--text-dim); }

/* ── stake: MIGROU pro stake.css (o dono) no F3 ── */

/* ── modal: MIGROU pro ds.css no D1 (.ov/.ov-card/.ov-acts/.passos/.moeda-pick — o
   login-modal.js roda em todas as telas, o estilo tem que morar onde todas carregam).
   .btn-danger e .who idem. ── */

@media (max-width: 640px) {
  .mkt-wrap { padding-top: 84px; }
  .mkt-hero, .cart-topo { flex-direction: column; align-items: stretch; }
  .mkt-countbox { width: 100%; }
  /* a faixa do mercado empilha: três colunas em 380px viram três colunas ilegíveis */
  .mkt-info { grid-template-columns: 1fr; gap: 26px; }
  .mkt-conta { margin-left: 0; flex-basis: 100%; }
}

/* ── 💱 multi-moeda: `.cart-saldos`/`.tag-m` MIGRARAM pro carteira.css (o painel traz a folha) ── */
.pill a { color: inherit; }


/* 🃏 CARD3D: o foil/tilt do card ANTIGO (`.c3d-tr/.c3d-rot/.c3d-shine/.c3d-glare`) saiu no D-4 —
   o card único (`card-unidade.css`) responde ao `card3d.js` pelas próprias `--rx/--ry/--px/--py/--luz`. */

/* ═══ modal das 3 portas: MIGROU pro ds.css no D1 ═══ */

/* ⌂ HOME: o header canônico injetado (ds.css/site-core) já traz o caminho de volta
   em toda tela — o .btn-home morreu no D1. */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   🏛️ A OSSATURA DO OPENSEA — pedido do Giba (25/08): "o layout é pra ser idêntico da
   opensea… e aproveitarmos a lógica mesmo da estrutura". Ossatura DELES, pele NOSSA:
   nenhuma cor aqui é literal, tudo sai dos tokens do glass.css.

   ⚠️ `--font-ui` era usado 20× neste arquivo e NUNCA foi definido em lugar nenhum (medido:
   zero ocorrências de `--font-ui:` em todo o dist/). Toda linha que pedia essa fonte caía
   no default do navegador — Times New Roman em cima de um design que se apoia em
   letra-espaçada. A faixa de stats do OpenSea é monoespaçada de propósito (números que
   alinham coluna a coluna), então as duas famílias nascem aqui, agora declaradas.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* --font-ui / --font-mono agora nascem no ds.css (tokens) — aqui só as larguras do shell */
  --rail-w: 68px;            /* a régua de ícones da esquerda */
  --painel-w: 316px;         /* o painel de coleções da direita */
}

/* ── o esqueleto de 3 colunas: régua · palco · painel ──────────────────────────────── */
.os-shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--painel-w);
  gap: 0; align-items: start; padding-top: 66px; }

/* ── 1) A RÉGUA DE ÍCONES (fixa, como a do OpenSea) ────────────────────────────────── */
.os-rail { position: sticky; top: 66px; height: calc(100vh - 66px); display: flex;
  flex-direction: column; align-items: center; gap: 6px; padding: 18px 0;
  border-right: 1px solid var(--border); background: rgba(9,8,14,.5); }
.os-rail-b { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid;
  place-items: center; border-radius: 11px; font-size: 19px; line-height: 1;
  color: var(--text-dim); border: 1px solid transparent; position: relative;
  transition: background .16s, border-color .16s, color .16s; }
/* o SVG herda `currentColor`, então acende junto com o botão — é o ganho sobre o emoji */
.os-rail-b svg { width: 21px; height: 21px; display: block; }
.os-rail-b:hover { background: rgba(255,150,60,.1); border-color: rgba(255,164,84,.36); color: var(--text); }
.os-rail-b.on { background: rgba(255,207,77,.12); border-color: rgba(255,207,77,.44); color: var(--gold); }
/* o traço da esquerda que marca a página atual — o mesmo sinal do OpenSea */
.os-rail-b.on::before { content: ''; position: absolute; left: -18px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.os-rail-b:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* o rótulo que aparece ao lado no hover (a régua é estreita demais pra texto fixo) */
.os-rail-b .tt { position: absolute; left: 52px; white-space: nowrap; font: 700 12px var(--font-ui);
  color: var(--text); background: var(--elevated); border: 1px solid var(--border);
  padding: 5px 9px; border-radius: 7px; opacity: 0; pointer-events: none;
  transform: translateX(-4px); transition: opacity .14s, transform .14s; z-index: 9; }
.os-rail-b:hover .tt { opacity: 1; transform: none; }
.os-rail .sep { width: 26px; height: 1px; background: var(--border); margin: 8px 0; }

/* ── 2) O PALCO ────────────────────────────────────────────────────────────────────── */
.os-palco { min-width: 0; padding: 20px 24px 70px; display: flex; flex-direction: column; gap: 18px; }

/* a busca do topo, com a tecla de atalho DENTRO do campo (o detalhe do print) */
.os-busca { position: relative; display: flex; align-items: center; }
.os-busca .lupa { position: absolute; left: 14px; font-size: 15px; color: var(--text-mute); pointer-events: none; }
.os-busca input { width: 100%; font: 500 14.5px var(--font-ui); color: var(--text);
  background: rgba(0,0,0,.34); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 52px 13px 40px; transition: border-color .16s, box-shadow .16s; }
.os-busca input::placeholder { color: var(--text-mute); }
.os-busca input:focus { outline: none; border-color: rgba(255,164,84,.6);
  box-shadow: 0 0 0 3px rgba(255,150,60,.13); }
.os-busca kbd { position: absolute; right: 13px; font: 700 11.5px var(--font-mono);
  color: var(--text-mute); background: rgba(255,255,255,.06); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 6px; padding: 3px 8px; pointer-events: none; }
/* com o campo cheio o atalho sai de cena e entra o ✕ que limpa */
.os-busca.tem-texto kbd { display: none; }
.os-busca .limpa { all: unset; cursor: pointer; position: absolute; right: 11px; width: 24px;
  height: 24px; display: none; place-items: center; border-radius: 6px; color: var(--text-mute); font-size: 13px; }
.os-busca.tem-texto .limpa { display: grid; }
.os-busca .limpa:hover { color: var(--text); background: rgba(255,255,255,.08); }

/* os chips de categoria logo abaixo da busca */
.os-cats { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.os-cat { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font: 700 13px var(--font-ui); color: var(--text-dim); padding: 8px 15px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255,255,255,.03);
  transition: color .15s, border-color .15s, background .15s; }
.os-cat:hover { color: var(--text); border-color: rgba(255,164,84,.42); }
.os-cat.on { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.os-cat .q { font: 700 11.5px var(--font-mono); opacity: .72; }
.os-cat .ci { display: grid; place-items: center; }
.os-cat .ci svg { width: 15px; height: 15px; display: block; }
.os-cat:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── 3) O HERO DA COLEÇÃO — arte de fundo + nome com selo + a faixa de 4 stats ─────── */
.os-hero { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--border);
  overflow: hidden; background: var(--panel); }
/* a arte de fundo: o OpenSea usa o banner da coleção. Aqui a "arte" é a luz da própria
   família — sem imagem inventada, o gradiente carrega a cor que a coleção já tem. */
.os-hero-arte { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(72% 130% at 12% 0%, color-mix(in srgb, var(--cc, var(--primary)) 30%, transparent), transparent 66%),
    radial-gradient(52% 110% at 92% 8%, rgba(139,92,255,.2), transparent 62%),
    linear-gradient(180deg, rgba(9,8,14,.15), rgba(9,8,14,.86)); }
.os-hero-corpo { position: relative; z-index: 1; padding: 24px 26px 0; }
.os-hero-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.os-hero-ic { width: 62px; height: 62px; flex: none; display: grid; place-items: center;
  font-size: 30px; border-radius: 15px; background: rgba(6,5,10,.62);
  color: var(--cc, var(--gold));
  border: 1px solid color-mix(in srgb, var(--cc, var(--gold)) 42%, var(--border)); }
.os-hero-ic svg { width: 30px; height: 30px; display: block; }
.os-hero h2 { font-family: var(--font-head); font-size: 27px; display: flex; align-items: center;
  gap: 9px; flex-wrap: wrap; }
/* o selo de verificado: o OpenSea usa o tique azul. O nosso diz a verdade DAQUI — a
   coleção é oficial porque o jogo a emite, e cada peça tem serial no cartório. */
.os-verif { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: var(--cyan); color: var(--bg); font-size: 12px; font-weight: 900; cursor: help; flex: none; }
.os-hero-sub { font-size: 13.5px; color: var(--text-dim); margin: 7px 0 0; max-width: 76ch; line-height: 1.55; }

/* 📊 A FAIXA DE STATS — FLOOR · ITEMS · VOLUME · LISTED, monoespaçada como no print.
   Quatro colunas de largura igual: números que se comparam têm que alinhar. */
.os-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 20px; border-top: 1px solid var(--border); }
.os-stat { padding: 14px 18px 16px; border-right: 1px solid var(--border); min-width: 0; }
.os-stat:last-child { border-right: none; }
.os-stat .k { font: 800 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); white-space: nowrap; }
.os-stat .v { font: 700 20px/1.2 var(--font-mono); color: var(--text); margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-stat .v.vazio { color: var(--text-mute); font-size: 15px; font-weight: 500; }
.os-stat .s { font: 600 11.5px var(--font-ui); color: var(--text-mute); margin-top: 3px; }
.os-stat .v.up { color: var(--green); } .os-stat .v.down { color: var(--red); }

/* ── 4) A BARRA DE FERRAMENTAS: filtros aplicados + ordenar + densidade ────────────── */
.os-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.os-tools .conta { font: 600 13px var(--font-ui); color: var(--text-dim); margin-right: auto; }
.os-tools .conta b { color: var(--text); font-weight: 800; font-family: var(--font-mono); }

/* 🏷️ OS CHIPS DO FILTRO APLICADO — cada um com o ✕ que o remove.
   Existe porque um filtro ligado e invisível faz a vitrine vazia parecer bug: a pessoa não
   lembra que apertou "divino + USDT" e conclui que o site quebrou. */
.os-aplicados { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.os-aplicados:empty { display: none; }
.os-fchip { display: inline-flex; align-items: center; gap: 7px; font: 700 12px var(--font-ui);
  color: var(--text); background: rgba(255,207,77,.1); border: 1px solid rgba(255,207,77,.34);
  border-radius: 8px; padding: 6px 8px 6px 11px; }
.os-fchip .k { color: var(--text-mute); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; }
.os-fchip button { all: unset; cursor: pointer; width: 17px; height: 17px; display: grid;
  place-items: center; border-radius: 5px; color: var(--text-mute); font-size: 13px; line-height: 1; }
.os-fchip button:hover { color: var(--red); background: rgba(255,70,70,.15); }
.os-fchip button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.os-limpa { all: unset; cursor: pointer; font: 700 12px var(--font-ui); color: var(--text-mute);
  padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--border); }
.os-limpa:hover { color: var(--red); border-color: rgba(255,70,70,.4); }
.os-limpa:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 🔲 O SELETOR DE DENSIDADE — o truque "Collector vs Trader" do Blur e do Tensor.
   Quem coleciona quer a arte grande; quem negocia quer 40 linhas na tela. Um botão só
   troca os dois mundos, e a escolha PERSISTE (localStorage) — senão o modo trader morre a
   cada refresh e a pessoa desiste de usá-lo. */
.os-dens { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(0,0,0,.28); }
.os-dens button { all: unset; cursor: pointer; width: 34px; height: 30px; display: grid;
  place-items: center; border-radius: 7px; color: var(--text-mute); transition: background .15s, color .15s; }
.os-dens button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.os-dens button.on { color: var(--bg); background: var(--gold); }
.os-dens button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* os ícones são desenhados em CSS: 3 traços/9 quadrados/2 colunas — nada de emoji, que
   vira retângulo em fonte sem o glifo (cicatriz desta sessão). */
.os-dens .ic { display: grid; gap: 2px; }
.os-dens .ic i { display: block; background: currentColor; border-radius: 1px; }
.os-dens .ic-g { grid-template-columns: repeat(2, 1fr); }
.os-dens .ic-g i { width: 6px; height: 6px; }
.os-dens .ic-p { grid-template-columns: repeat(3, 1fr); }
.os-dens .ic-p i { width: 4px; height: 4px; }
.os-dens .ic-l { grid-template-columns: 1fr; }
.os-dens .ic-l i { width: 15px; height: 3px; }

/* ── 5) AS DENSIDADES DA GRADE ── D-4: as três densidades (grande · pequena · lista) do card
   único moram no marketplace.css §14 (o card mudou de dono; a régua de colunas também). */

/* ── 6) O PAINEL DA DIREITA — as coleções com floor e variação ─────────────────────── */
.os-painel { position: sticky; top: 66px; max-height: calc(100vh - 66px); overflow-y: auto;
  border-left: 1px solid var(--border); background: rgba(9,8,14,.42); padding: 20px 16px 40px; }
.os-painel h3 { font: 800 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 4px; }
.os-painel .nota { font-size: 11.5px; color: var(--text-mute); line-height: 1.5; margin: 0 0 12px; }
/* o cabeçalho de colunas: COLEÇÃO · FLOOR · 30D, como a tabela do print */
.os-col-head { display: grid; grid-template-columns: minmax(0, 1fr) 78px 46px; gap: 8px; padding: 0 9px 7px;
  font: 800 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); border-bottom: 1px solid var(--border); }
.os-col-head span:not(:first-child) { text-align: right; }
.os-col { all: unset; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 78px 46px;
  gap: 8px; align-items: center; width: 100%; box-sizing: border-box; padding: 9px;
  border-radius: 9px; border: 1px solid transparent; transition: background .14s, border-color .14s; }
.os-col:hover { background: rgba(255,150,60,.08); border-color: rgba(255,164,84,.28); }
.os-col.on { background: rgba(255,207,77,.11); border-color: rgba(255,207,77,.4); }
.os-col:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.os-col-n { display: flex; align-items: center; gap: 9px; min-width: 0; }
.os-col-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  font-size: 15px; border-radius: 8px; background: rgba(255,255,255,.05);
  border: 1px solid var(--border); color: var(--text-dim); }
.os-col-ic svg { width: 16px; height: 16px; display: block; }
.os-col.on .os-col-ic { color: var(--gold); border-color: rgba(255,207,77,.4); }
/* a versão pequena, dentro da tabela cheia da seção Coleções */
.os-col-ic.sm { width: 22px; height: 22px; border-radius: 6px; display: inline-grid;
  vertical-align: -5px; margin-right: 8px; }
.os-col-ic.sm svg { width: 13px; height: 13px; }
.os-col-t { min-width: 0; }
.os-col-t b { display: block; font: 700 13.5px var(--font-ui); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ⚠️ UMA linha, sem quebra: a versão longa ("N à venda · N no jogo") virava 3 linhas na
   coluna estreita e cada coleção ganhava uma altura — a tabela perdia o alinhamento que é a
   razão dela existir. O texto por extenso vive no `title`. */
.os-col-t span { display: block; font: 600 11px var(--font-mono); color: var(--text-mute);
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.os-col-f { font: 700 12px var(--font-mono); color: var(--text); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-col-f.sem { color: var(--text-mute); font-weight: 500; }
.os-col-v { font: 700 12px var(--font-mono); text-align: right; white-space: nowrap; color: var(--text-mute); }
.os-col-v.up { color: var(--green); } .os-col-v.down { color: var(--red); }

/* a linha da tabela de coleções. Herda o desenho da `.vend-row` mas tem NOME PRÓPRIO — ver
   o comentário no marketplace.html: dois donos pro mesmo seletor quebrou um E2E. */
.os-linha { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 13px 14px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px;
  background: rgba(255,255,255,.025); }
.os-linha .v-nome { font-size: 15px; min-width: 0; }
.os-linha .v-faixa { font: 700 12.5px var(--font-mono); white-space: nowrap; color: var(--text-dim); }
@media (max-width: 640px) { .os-linha { grid-template-columns: 1fr; gap: 8px; }
  .os-linha > button { width: 100%; } }

/* ── 7) A FAIXA DE PREÇO HARMÔNICA (dentro do painel) ──────────────────────────────── */
/* "faixa de preço tem que ser harmônica conforme os itens igual lá" (Giba): as barras
   deixaram de ser três réguas soltas. Agora dividem a MESMA escala, carregam a cor canon da
   raridade e a marca de onde o preço do card em foco cai — é o que liga a faixa à vitrine. */
.os-faixa-box { margin-top: 22px; }
.os-faixa-esc { position: relative; height: 15px; margin: 0 0 4px; }
.os-faixa-esc span { position: absolute; top: 0; font: 600 11px var(--font-mono); color: var(--text-mute); }
.os-faixa-esc span:last-child { right: 0; }
.faixa-row.os { grid-template-columns: 62px 1fr 62px; gap: 8px; font-size: 12px; }
.faixa-row.os .r { font-size: 11px; }
.faixa-row.os .v { font: 700 11.5px var(--font-mono); text-align: right; }
/* o ponteiro do card em foco: quando o ponteiro passa por um card, a faixa da raridade dele
   acende e marca onde aquele preço cai. É a ligação viva entre a barra e a peça. */
.faixa-row.os { transition: opacity .18s; }
.mkt-faixas.mkt-hl .faixa-row.os { opacity: .3; }
.mkt-faixas.mkt-hl .faixa-row.os.aceso { opacity: 1; }
.faixa-bar s { position: absolute; top: -5px; width: 3px; height: 16px; border-radius: 2px;
  background: var(--spark); box-shadow: 0 0 8px var(--spark); text-decoration: none; opacity: 0;
  transition: opacity .18s, left .18s; }
.faixa-row.os.aceso .faixa-bar s { opacity: 1; }

/* ── 8) MOBILE: a régua vira barra de baixo, o painel entra em gaveta ──────────────── */
.os-painel-x { display: none; }
@media (max-width: 1024px) {
  .os-shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .os-painel { position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 88vw);
    z-index: var(--z-drawer); max-height: none; transform: translateX(100%); transition: transform .24s;
    background: var(--panel); box-shadow: -18px 0 44px rgba(0,0,0,.5); }
  .os-painel.aberto { transform: none; }
  .os-painel-x { display: grid; }
}
@media (max-width: 640px) {
  .os-shell { grid-template-columns: 1fr; padding-top: 62px; }
  .os-palco { padding: 14px 14px 96px; }
  /* a régua desce pro rodapé: em tela estreita, polegar alcança embaixo, não na lateral */
  .os-rail { position: fixed; top: auto; left: 0; right: 0; bottom: 0; height: auto; width: 100%;
    flex-direction: row; justify-content: space-around; padding: 7px 4px;
    border-right: none; border-top: 1px solid var(--border); background: rgba(9,8,14,.96);
    backdrop-filter: blur(12px); z-index: var(--z-rail); }
  .os-rail .sep, .os-rail-b .tt { display: none; }
  .os-rail-b.on::before { left: 9px; right: 9px; top: -7px; bottom: auto; width: auto; height: 3px;
    border-radius: 0 0 3px 3px; }
  .os-stats { grid-template-columns: repeat(2, 1fr); }
  .os-stat:nth-child(2) { border-right: none; }
  .os-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .os-hero-corpo { padding: 18px 16px 0; }
  .os-hero h2 { font-size: 22px; }
}