/* ════════════════════════════════════════════════════════════════════════════════════════
   🛒 MARKETPLACE — o redesign completo na linguagem do proto-ds (03/09)

   📜 Giba: *"não é só espelhar, é refazer mesmo o design completamente"* · *"aplica o DNA
      completamente e padroniza nas cores atuais"* · *"igual o shop é no jogo"*.

   🧬 O QUE VEIO DO PROTO-DS (dist/proto-ds.css, o mesmo que veste os 21 cards da V4):
      · o AMBIENTE em 4 camadas fixas — fundo, tinta, cenário, vinheta. É o que faz o vidro
        parecer ESPELHADO: sem algo atrás pra refletir, `backdrop-filter` não tem o que fazer
        e o card vira um retângulo chapado. Era isto que faltava aqui.
      · o VIDRO: blur(20px) saturate(165%), gradiente de 3 paradas a 158°, brilho diagonal a
        115° no ::before, e TRÊS sombras (externa + fio de luz + halo interno).
      · as variantes .glass-forte / .glass-escuro e o .card-h que levanta 4px.

   🎨 E TUDO NAS CORES DA PALETA CENTRAL (F0 · 03/09): `--accent` (ouro) + `--am-400`
      (ametista) sobre `--bg` (ardósia), vindos do theme.css via ds.css. O vidro em si mudou
      de dono nesse dia — mora no ds.css; aqui ficou só o layout do marketplace.

   ⚠️ ZERO HEX é regra dura: o `lint-ds` tem catraca POR ARQUIVO e arquivo novo nasce em
      baseline ZERO. Um `#` reprova. Toda cor sai de token via color-mix.
   📐 E `@media` só nos cortes canônicos {640, 1024}.
   👓 Fonte nunca abaixo de 14px e alvo de toque nunca abaixo de 44px (o Giba usa óculos).
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────────────────
   1) O AMBIENTE — 4 camadas fixas atrás de tudo (a base do vidro espelhado)
   ⚖️ Nenhuma delas captura clique (`pointer-events:none`) e todas ficam abaixo do conteúdo.
   ──────────────────────────────────────────────────────────────────────────────────────── */
body[data-tela="marketplace"] { position: relative; background: var(--bg); }

/* 🌌 a tinta: um halo quente no alto e a queda pro escuro embaixo — dá profundidade sem imagem */
body[data-tela="marketplace"]::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 880px 480px at 50% 22%,
      color-mix(in srgb, var(--au-400) 11%, transparent), transparent 68%),
    radial-gradient(ellipse 620px 420px at 82% 8%,
      color-mix(in srgb, var(--am-400) 10%, transparent), transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg2) 34%, transparent) 0%,
      color-mix(in srgb, var(--bg) 52%, transparent) 58%,
      color-mix(in srgb, var(--bg) 76%, transparent) 100%);
}
/* 🕯️ a vinheta: fecha as bordas e empurra o olho pro meio, onde a vitrine mora */
body[data-tela="marketplace"]::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 78% 68% at 50% 42%, transparent 52%,
    color-mix(in srgb, var(--bg) 62%, transparent) 100%);
}
/* e o conteúdo vive acima do ambiente
   🐛 F2 (03/09): o `.site-head` SAIU desta regra. `position: relative` aqui derrubava o
   `position: fixed` do cabeçalho (ds.css:479) — sobrava uma faixa vazia de 66px no topo (o
   `padding-top` do body reserva o lugar do header fixo) e o cabeçalho rolava junto. O header
   já vive acima do ambiente pelo `z-index: var(--z-head)` dele. */
body[data-tela="marketplace"] .os-shell,
body[data-tela="marketplace"] #siteFoot { position: relative; z-index: 1; }

/* ────────────────────────────────────────────────────────────────────────────────────────
   2) O VIDRO ESPELHADO — MUDOU DE DONO (F0 · 03/09). A receita (.glass, ::before, .glass-forte,
   .glass-escuro, .card-h, .card) vive no ds.css, na paleta central do theme.css. A cópia
   local que morava aqui foi apagada: era o segundo dono do mesmo pixel. Aqui fica só layout.
   ──────────────────────────────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────────────────────────
   3) A MOLDURA — uma coluna só, a vitrine no comando (a sidebar saiu inteira)
   ──────────────────────────────────────────────────────────────────────────────────────── */
/* 🐛 F2: o `padding-top: 66px` do `.os-shell` (mercado.css:387) somava com o `padding-top`
   do body (o lugar do header fixo) — 66px de nada entre o cabeçalho e o banner. */
body[data-tela="marketplace"] .os-shell { display: block; padding-top: 0; }
body[data-tela="marketplace"] .os-palco {
  max-width: 1280px; margin: 0 auto; padding: var(--sp-3) var(--sp-4) var(--sp-6);
  /* 🧨 o pavio global do site (`#fuse`, glass.css) vive em left:16px — o palco dá 14px a mais
     à esquerda pra nenhum chip/rótulo nascer embaixo dele (o "TIER" nascia). */
  padding-left: calc(var(--sp-4) + 14px);
}
/* 🦶 o rodapé atravessa a largura toda: ele vivia dentro da coluna do meio e nascia estreito */
body[data-tela="marketplace"] #siteFoot { grid-column: 1 / -1; }
body[data-tela="marketplace"] .foot-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
/* a linha do topo era pontilhada — vira fio sólido, como no resto do jogo */
body[data-tela="marketplace"] .top-row { border-bottom: 1px solid color-mix(in srgb, var(--au-400) 14%, transparent); }
body[data-tela="marketplace"] .os-limpa { border-style: solid; }

/* ────────────────────────────────────────────────────────────────────────────────────────
   4) O BANNER — 2 linhas: identidade à esquerda, os números à direita
   📜 Giba: *"o banner sobe pra acima do campo de busca, em 2 linhas apenas, mais clean"*.
   ──────────────────────────────────────────────────────────────────────────────────────── */
body[data-tela="marketplace"] .mk-banner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
}
body[data-tela="marketplace"] .mk-banner-ic {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md);
  color: var(--cc, var(--au-400));
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--cc, var(--au-400)) 22%, transparent),
    color-mix(in srgb, var(--cc, var(--au-400)) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--cc, var(--au-400)) 34%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent);
}
body[data-tela="marketplace"] .mk-banner-ic svg { width: 22px; height: 22px; }
body[data-tela="marketplace"] .mk-banner-txt { min-width: 0; }
body[data-tela="marketplace"] .mk-banner-txt h2 {
  margin: 0; font: 800 var(--fs-4) / 1.15 var(--font-d); color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
/* 👓 teto de LINHAS, não de fonte: reticências no meio da frase seriam piores que quebrar */
body[data-tela="marketplace"] .mk-banner-sub {
  margin: 3px 0 0; font-size: var(--fs-2); line-height: 1.45; color: var(--text-mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body[data-tela="marketplace"] .mk-banner-sub b { color: var(--text); font-weight: 700; }
body[data-tela="marketplace"] .mk-banner-nums { display: flex; gap: var(--sp-4); align-items: center; }
body[data-tela="marketplace"] .mk-banner-nums .os-stat { text-align: right; white-space: nowrap; }
body[data-tela="marketplace"] .mk-banner-nums .k {
  font-size: var(--fs-1); color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em;
}
body[data-tela="marketplace"] .mk-banner-nums .v {
  font: 800 var(--fs-3) / 1.15 var(--font-d); color: var(--text);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
body[data-tela="marketplace"] .mk-banner-nums .s { font-size: var(--fs-1); color: var(--text-dim); }

/* ────────────────────────────────────────────────────────────────────────────────────────
   5) A BUSCA e as ABAS
   ──────────────────────────────────────────────────────────────────────────────────────── */
body[data-tela="marketplace"] .os-busca {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3);
  padding: 0 var(--sp-3); min-height: 48px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--au-400) 15%, transparent);
  backdrop-filter: blur(20px) saturate(165%); -webkit-backdrop-filter: blur(20px) saturate(165%);
  transition: border-color .16s, box-shadow .16s;
}
body[data-tela="marketplace"] .os-busca:focus-within {
  border-color: color-mix(in srgb, var(--au-400) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-400) 12%, transparent);
}
body[data-tela="marketplace"] .os-busca input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: var(--text); font-size: var(--fs-2); padding: 12px 0;
}
body[data-tela="marketplace"] .os-busca input::placeholder { color: var(--text-dim); }
/* 🐛 F2: a lupa era absolute (mercado.css) e o input aqui perdeu o padding-left de 40px —
   o ícone caía EM CIMA do placeholder ("P🔍ocurar"). No flex ela é só o 1º item. */
body[data-tela="marketplace"] .os-busca .lupa { position: static; display: inline-flex; flex: none; }
body[data-tela="marketplace"] .os-busca .limpa { position: static; flex: none; }
body[data-tela="marketplace"] .os-busca kbd {
  font: 700 var(--fs-1) var(--font-mono); color: var(--text-dim);
  padding: 3px 7px; border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--au-400) 18%, transparent);
}

/* 🗂️ as abas: uma visível por vez, e a de Vender com destaque (é o que faz o mercado girar) */
body[data-tela="marketplace"] .mk-abas {
  display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid color-mix(in srgb, var(--au-400) 12%, transparent);
}
body[data-tela="marketplace"] .mk-aba {
  position: relative; min-height: 44px; padding: 10px var(--sp-4);
  font: 700 var(--fs-2) / 1 var(--font-d); color: var(--text-mute);
  background: none; border: 0; border-radius: var(--r-md); cursor: pointer;
  transition: color .16s, background .16s;
}
body[data-tela="marketplace"] .mk-aba:hover { color: var(--text); background: color-mix(in srgb, var(--au-400) 7%, transparent); }
body[data-tela="marketplace"] .mk-aba.on {
  color: var(--au-400);
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--au-400) 16%, transparent),
    color-mix(in srgb, var(--au-400) 6%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--au-400) 26%, transparent);
}
/* 🔴 o ponto que marca a aba de Vender — é onde o jogador ganha dinheiro */
body[data-tela="marketplace"] .mk-aba--forte::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px;
  display: inline-block; vertical-align: middle; background: var(--au-400);
  box-shadow: 0 0 8px color-mix(in srgb, var(--au-400) 70%, transparent);
}
body[data-tela="marketplace"] .mk-abas-fim { margin-left: auto; }

/* ────────────────────────────────────────────────────────────────────────────────────────
   6) OS FILTROS — chips e tags, sem select branco
   📜 Giba: *"o tier é em tags pra facilitar, não precisa do bloco elementos, e o preço min e
      max fica com a barrinha de range, é mais intuitivo pro usuário que é leigo"*.
   ──────────────────────────────────────────────────────────────────────────────────────── */
body[data-tela="marketplace"] .os-cats,
body[data-tela="marketplace"] .mkt-filtros {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3);
}
/* o .chip é do ds.css (pílula do proto-ds, ativo em ouro) — aqui só o que é layout */
/* o contador de itens dentro do chip */
body[data-tela="marketplace"] .chip .q {
  font-size: var(--fs-1); opacity: .68; font-variant-numeric: tabular-nums;
}
/* 🏷️ o tier como tags: mesma família do chip, mais estreito (são 11 e precisam caber) */
body[data-tela="marketplace"] .mkt-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
body[data-tela="marketplace"] .mkt-tier .lbl {
  font: 700 var(--fs-1) / 1 var(--font-d); letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim); margin-right: 3px;
}
body[data-tela="marketplace"] .mkt-tier .chip { min-width: 40px; justify-content: center; padding: 8px 10px; }

/* 🎚️ o range de preço: dois polegares na mesma trilha */
body[data-tela="marketplace"] .mk-range { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 220px; }
body[data-tela="marketplace"] .mk-range-trilha {
  position: relative; flex: 1; height: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--au-400) 14%, transparent);
}
body[data-tela="marketplace"] .mk-range-trilha .ativo {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--au-400), color-mix(in srgb, var(--au-400) 70%, var(--am-400)));
}
/* ⚠️ os dois <input range> ficam empilhados: o de cima só recebe clique NO POLEGAR, senão
   o de baixo nunca seria alcançável. É o truque que faz um range duplo funcionar sem lib. */
body[data-tela="marketplace"] .mk-range input[type="range"] {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  width: 100%; margin: 0; background: none; appearance: none; -webkit-appearance: none;
  pointer-events: none; height: 22px;
}
body[data-tela="marketplace"] .mk-range input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; pointer-events: auto; cursor: grab;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(158deg, var(--au-400), color-mix(in srgb, var(--au-400) 76%, var(--ember)));
  border: 2px solid color-mix(in srgb, var(--bg) 70%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--bg) 60%, transparent);
}
body[data-tela="marketplace"] .mk-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; cursor: grab; width: 20px; height: 20px; border-radius: 50%;
  background: var(--au-400); border: 2px solid color-mix(in srgb, var(--bg) 70%, transparent);
}
body[data-tela="marketplace"] .mk-range .rtxt {
  font: 700 var(--fs-2) / 1 var(--font-d); color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 🔽 e os selects que restam: `color-scheme: dark` — sem isto o Windows pinta o popup
   BRANCO e o texto some. Era a queixa do "muito branco". */
body[data-tela="marketplace"] select {
  color-scheme: dark; font: 700 var(--fs-2) var(--font-d); color: var(--text);
  min-height: 44px; padding: 10px var(--sp-3); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--au-400) 15%, transparent);
}
body[data-tela="marketplace"] select option { background: var(--bg); color: var(--text); }

/* ────────────────────────────────────────────────────────────────────────────────────────
   7) A VITRINE — a grade 5×5, o card do item, e a raridade contando a história
   ──────────────────────────────────────────────────────────────────────────────────────── */
body[data-tela="marketplace"] .os-grid,
body[data-tela="marketplace"] #grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3);
}
/* 🐛 F2 (03/09): daqui saíram `.ov / .ov-arte / .ov-corpo / .ov-nome / .ov-preco / .ov-sub` — o
   "card OpenSea" de 02/09 que o HTML nunca rendeu. `.ov` é o MODAL do site (ds.css:408,
   `#ov.ov`), e o `position: relative` daqui matava o `fixed` dele: TODO modal do marketplace
   (comprar, anunciar, procedência, erro) nascia invisível no fim da página. Dois donos pro
   mesmo seletor — o 3º sintoma da Lei do Unificar. */
/* 🏅 D-4: o `.mkt-selo` (o selo absoluto que a §12 tinha que desfazer) morreu com o card antigo —
   raridade e tier são do card único. */
/* o número de série: a procedência viaja com a peça */
body[data-tela="marketplace"] .item-num {
  font: 700 var(--fs-1) var(--font-mono); color: var(--text-dim); letter-spacing: .04em;
}
/* 🎨 cada raridade acende a sua cor — a mesma paleta que o jogo já usa */
body[data-tela="marketplace"] .rar-common   { --rc: var(--rar-common); }
body[data-tela="marketplace"] .rar-uncommon { --rc: var(--rar-uncommon); }
body[data-tela="marketplace"] .rar-rare     { --rc: var(--rar-rare); }
body[data-tela="marketplace"] .rar-srare    { --rc: var(--rar-srare); }
body[data-tela="marketplace"] .rar-epic     { --rc: var(--rar-epic); }
body[data-tela="marketplace"] .rar-legend   { --rc: var(--rar-legend); }
body[data-tela="marketplace"] .rar-mythic   { --rc: var(--rar-mythic); }
body[data-tela="marketplace"] .rar-divine   { --rc: var(--rar-divine); }

body[data-tela="marketplace"] .mkt-vazio, body[data-tela="marketplace"] .sem-dado {
  padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-mute);
  font-size: var(--fs-2); line-height: 1.6;
}
body[data-tela="marketplace"] .mkt-vazio b { display: block; color: var(--text); font-size: var(--fs-3); margin-bottom: 6px; }

/* ────────────────────────────────────────────────────────────────────────────────────────
   8) A FAIXA DE PREÇO — um container, duas colunas (BombCoin · Real)
   ⛔ Não é conversão: são grandezas sem câmbio entre si (o `fiat-ledger` proíbe converter).
   ──────────────────────────────────────────────────────────────────────────────────────── */
body[data-tela="marketplace"] .mkt-faixas-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
body[data-tela="marketplace"] .mkt-faixa-moeda {
  display: block; margin-bottom: 7px;
  font: 700 var(--fs-1) / 1 var(--font-d); letter-spacing: .07em; text-transform: uppercase;
  color: color-mix(in srgb, var(--au-400) 80%, var(--text-mute));
}
body[data-tela="marketplace"] .faixa-row {
  display: grid; grid-template-columns: 78px 1fr auto; align-items: center;
  gap: var(--sp-2); padding: 4px 0;
}
body[data-tela="marketplace"] .faixa-row .r {
  font: 700 var(--fs-1) / 1 var(--font-d); text-transform: uppercase; letter-spacing: .04em;
  color: color-mix(in srgb, var(--rc, var(--au-400)) 90%, transparent);
}
body[data-tela="marketplace"] .faixa-bar {
  position: relative; height: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
}
body[data-tela="marketplace"] .faixa-bar i {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--rc, var(--au-400)) 55%, transparent),
    color-mix(in srgb, var(--rc, var(--au-400)) 95%, transparent));
}
/* o ponteiro da média — só aparece quando há média de verdade (3+ vendas) */
body[data-tela="marketplace"] .faixa-bar u {
  position: absolute; top: -3px; width: 2px; height: 13px; border-radius: 2px;
  background: var(--text); opacity: .78;
}
body[data-tela="marketplace"] .faixa-row .v {
  font: 700 var(--fs-1) / 1 var(--font-d); color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────────────────────────────
   9) A ABA VENDER — a mochila estilo Diablo
   📜 Giba: *"aba Vender dedicada com a bag estilo Diablo"*.
   ──────────────────────────────────────────────────────────────────────────────────────── */
body[data-tela="marketplace"] .mk-bag {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-lg);
  max-height: 420px; overflow-y: auto;
}
body[data-tela="marketplace"] .bslot {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--r-md); overflow: hidden;
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc, var(--au-400)) 30%, transparent);
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), border-color .16s, box-shadow .16s;
}
body[data-tela="marketplace"] .bslot:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--rc, var(--au-400)) 70%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--bg) 60%, transparent);
}
body[data-tela="marketplace"] .bslot.on {
  border-color: var(--au-400);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--au-400) 35%, transparent);
}
/* ⚠️ sem PNG o alt vira TEXTO transbordando pelo slot — foi o que aconteceu aqui. Esconde. */
body[data-tela="marketplace"] .bslot img {
  width: 82%; height: 82%; object-fit: contain; color: transparent; font-size: 0;
}
body[data-tela="marketplace"] .bslot .q {
  position: absolute; right: 3px; bottom: 3px;
  font: 800 var(--fs-1) / 1 var(--font-d); color: var(--text);
  padding: 2px 5px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
/* o slot vazio: marca o espaço sem chamar atenção */
body[data-tela="marketplace"] .bslot--vazio {
  border-style: dashed; border-color: color-mix(in srgb, var(--au-400) 12%, transparent);
  cursor: default;
}
body[data-tela="marketplace"] .bslot--vazio:hover { transform: none; box-shadow: none; }

/* ────────────────────────────────────────────────────────────────────────────────────────
   10) A CARTEIRA — cara de aplicativo, não de tabela
   📜 Giba: *"carteira tá deplorável, deixa parecendo carteiras de aplicativos e intuitiva"*.
   ──────────────────────────────────────────────────────────────────────────────────────── */
body[data-tela="marketplace"] .mk-saldo {
  padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); text-align: center;
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--am-400) 20%, transparent),
    color-mix(in srgb, var(--au-400) 9%, transparent) 58%,
    color-mix(in srgb, var(--am-400) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--au-400) 24%, transparent);
  box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--text) 18%, transparent),
    0 18px 44px color-mix(in srgb, var(--bg) 50%, transparent);
}
body[data-tela="marketplace"] .mk-saldo .k {
  font: 700 var(--fs-1) / 1 var(--font-d); letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}
/* 💰 o número grande: é a primeira coisa que a pessoa procura ao abrir a carteira */
body[data-tela="marketplace"] .mk-saldo .v {
  font: 800 var(--fs-7) / 1 var(--font-d); color: var(--text);
  font-variant-numeric: tabular-nums; margin: var(--sp-2) 0 4px;
}
body[data-tela="marketplace"] .mk-saldo .s {
  font-size: var(--fs-1); color: color-mix(in srgb, var(--text) 62%, transparent);
}
body[data-tela="marketplace"] .mk-acoes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-3) 0;
}
/* o extrato: uma linha por movimento, sem moldura de tabela */
body[data-tela="marketplace"] .mk-extrato {
  display: grid; gap: 1px; border-radius: var(--r-md); overflow: hidden;
}
body[data-tela="marketplace"] .mk-mov {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: color-mix(in srgb, var(--bg) 48%, transparent);
}
body[data-tela="marketplace"] .mk-mov .ic {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--au-400) 12%, transparent); color: var(--au-400);
}
body[data-tela="marketplace"] .mk-mov .lb { font-size: var(--fs-2); color: var(--text); }
body[data-tela="marketplace"] .mk-mov .dim { font-size: var(--fs-1); color: var(--text-dim); }
body[data-tela="marketplace"] .mk-mov .v {
  font: 700 var(--fs-2) var(--font-d); font-variant-numeric: tabular-nums;
}
/* entrada em verde, saída em brasa — a cor faz a leitura antes do sinal */
body[data-tela="marketplace"] .mk-mov .v.mais { color: var(--good); }
body[data-tela="marketplace"] .mk-mov .v.menos { color: var(--ember); }

/* 🎫 o KYC: fechado quando está tudo certo, expande quando falta algo */
body[data-tela="marketplace"] .mk-kyc-ok {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3);
  border-radius: var(--r-md); font-size: var(--fs-2); color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 26%, transparent);
}

/* ────────────────────────────────────────────────────────────────────────────────────────
   12) F2 (03/09) — o card no DS, a figurinha, o bag no DS, o KYC fechado e o aviso de saque
   ⚖️ Tudo escopado em body[data-tela="marketplace"] e ZERO hex: as cores de raridade são as
      `--rar-*` do servidor (theme.css), lidas via `--rc` que a seção 7 já define.
   ──────────────────────────────────────────────────────────────────────────────────────── */
/* 🏷️ D-4: `.mkt-card .badge-rar`, `.mkt-rar`, `.mkt-selos`, `.mkt-selo.sticker`, `.eh-sticker .mkt-arte`
   e o `.mkt-corpo > button` saíram — o card da vitrine é o card único (§14). */
/* 🎒 o bag: tier, preço sugerido, inicial e a contagem de repetidas dentro do `.bslot` */
body[data-tela="marketplace"] .bslot .tier {
  position: absolute; left: 4px; top: 4px; font: 800 var(--fs-1) / 1 var(--font-d);
  color: var(--rc, var(--au-400)); padding: 2px 5px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
/* 🏷️ tk 63 (04/09): o RODAPÉ do slot tem nome + preço sugerido. O Sharp não achou o próprio
   boneco no bag porque o slot só tinha a arte — e "Riscado" e "Pink Louie" vestem a mesma
   moldura lendária. O slot fica mais alto (1 : 1.28) pra arte não ficar embaixo do texto. */
body[data-tela="marketplace"] .bslot { aspect-ratio: 1 / 1.28; align-content: start; }
body[data-tela="marketplace"] .bslot img { width: 78%; height: 58%; margin-top: 6px; }
body[data-tela="marketplace"] .bslot .ini { margin-top: 14px; }
body[data-tela="marketplace"] .bslot .rod {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; text-align: center;
  padding: 3px 3px 4px; background: color-mix(in srgb, var(--bg) 86%, transparent);
}
body[data-tela="marketplace"] .bslot .rod .nm {
  font: 700 var(--fs-1) / 1.15 var(--font-d); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-tela="marketplace"] .bslot .sug {
  font: 700 var(--fs-1) / 1.2 var(--font-d); color: var(--au-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 🔒 o que é teu mas não entra na vitrine: apagado, cadeado no canto, motivo no rodapé */
body[data-tela="marketplace"] .bslot.travado { opacity: .62; border-style: dashed; cursor: help; }
body[data-tela="marketplace"] .bslot.travado:hover { opacity: .9; transform: none; }
body[data-tela="marketplace"] .bslot.travado img { filter: grayscale(.6) !important; }
body[data-tela="marketplace"] .bslot.travado .sug { color: var(--text-mute); }
body[data-tela="marketplace"] .bslot .cad {
  position: absolute; right: 4px; top: 4px; font-size: var(--fs-2); line-height: 1;
  padding: 2px 4px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg) 82%, transparent);
}
body[data-tela="marketplace"] .bslot .q { bottom: auto; top: 4px; color: var(--au-400); }
body[data-tela="marketplace"] .bslot .ini {
  font: 800 var(--fs-5) var(--font-head); color: color-mix(in srgb, var(--rc, var(--au-400)) 60%, var(--text-mute));
}
body[data-tela="marketplace"] .bslot.eh-sticker img { image-rendering: auto; border-radius: var(--r-sm); width: 88%; height: 88%; }

/* 🪪 o KYC: verde fechado quando está tudo certo; âmbar com o que falta quando não está */
body[data-tela="marketplace"] .mk-kyc { margin: 0 0 var(--sp-3); }
body[data-tela="marketplace"] .mk-kyc-ok .ic, body[data-tela="marketplace"] .mk-kyc-falta .ic {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 800 var(--fs-2) / 1 var(--font-d); flex: none;
}
body[data-tela="marketplace"] .mk-kyc-ok .ic { color: var(--bg); background: var(--good); }
body[data-tela="marketplace"] .mk-kyc-ok b { font-size: var(--fs-3); }
body[data-tela="marketplace"] .mk-kyc-ok .dim { color: var(--text-dim); }
body[data-tela="marketplace"] .mk-kyc-ok .mk-kyc-toggle { margin-left: auto; }
body[data-tela="marketplace"] .mk-kyc-falta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3);
  border-radius: var(--r-md); font-size: var(--fs-2); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
body[data-tela="marketplace"] .mk-kyc-falta .ic { color: var(--bg); background: var(--accent); }
body[data-tela="marketplace"] .mk-kyc-falta b { font-size: var(--fs-3); color: var(--text); }
body[data-tela="marketplace"] .mk-kyc-falta .dim { color: var(--text-dim); }
body[data-tela="marketplace"] .mk-kyc-falta a { margin-left: auto; }
/* fechado = o formulário e a explicação somem; o título fica (é o "ver dados" que reabre) */
body[data-tela="marketplace"] #cadastro.mk-kyc-fechado { display: none; }

/* 📐 o chip "Filtros" da barra de ferramentas: nasce escondido; o corte de 640 o revela */
body[data-tela="marketplace"] .mk-btn-filtros { display: none; }

/* 🍞 o toast de sucesso (UX-cliques, princípio 3) e o saldo piscando em ouro (princípio 9) */
body[data-tela="marketplace"] .mk-toast {
  position: fixed; left: 50%; bottom: max(18px, var(--safe-b, 0px)); transform: translate(-50%, 24px);
  z-index: var(--z-toast); max-width: min(560px, 92vw); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg); font-size: var(--fs-2); line-height: 1.45; color: var(--text);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--bg) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s cubic-bezier(.2, .8, .2, 1);
}
body[data-tela="marketplace"] .mk-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
body[data-tela="marketplace"] .mk-toast.ok { border-color: color-mix(in srgb, var(--good) 50%, transparent); }
body[data-tela="marketplace"] .mk-toast b { color: var(--accent); }
body[data-tela="marketplace"] .mk-toast.ok b { color: var(--good); }
/* sem @keyframes de propósito (o test-marketplace-dna exige toda regra escopada): a classe
   entra por 900ms e a TRANSIÇÃO faz a ida e a volta */
body[data-tela="marketplace"] .site-head b { transition: color .3s, text-shadow .3s; }
body[data-tela="marketplace"] .mk-saldo-pisca.site-head b,
body[data-tela="marketplace"] .mk-saldo-pisca .site-head b { color: var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); }

/* ⏳ o aviso de saque: uma linha, âmbar discreto, acima do formulário de pedir */
body[data-tela="marketplace"] .mk-saque-aviso {
  display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-2) 0 var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-2); line-height: 1.5;
  color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
body[data-tela="marketplace"] .mk-saque-aviso .ic { font-size: var(--fs-4); line-height: 1; flex: none; }
body[data-tela="marketplace"] .mk-saque-aviso b { color: var(--accent); }

/* ────────────────────────────────────────────────────────────────────────────────────────
   11) MOBILE FIRST — o Giba pediu a tela pensada pro celular desde o começo
   ──────────────────────────────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────────────────────────
   13) MK-1 (03/09) — a caixa quadrada do card ANTIGO. Saiu no D-4: a geometria (arte quadrada,
   76% unit / 88% figurinha, foil sobre a arte) vive no card único (`card-unidade.css`, D-5).
   ──────────────────────────────────────────────────────────────────────────────────────── */

/* 🎟️ MK-2 (03/09) — o chip da taxa de anúncio no formulário e o "já pago" em Meus anúncios */
body[data-tela="marketplace"] .mk-taxa-ant {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-2); line-height: 1.35;
  color: var(--text-dim); background: color-mix(in srgb, var(--au-400) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--au-400) 32%, transparent);
}
body[data-tela="marketplace"] .mk-taxa-ant b { color: var(--au-400); }
body[data-tela="marketplace"] .mk-taxa-ant .ic { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--au-400); }
body[data-tela="marketplace"] .mk-taxa-ant .ic svg { width: 18px; height: 18px; }
/* 🐛 medido no shot 390 do Anunciar: o chip USDT tem `hidden` e aparecia mesmo assim — o
   `display: inline-flex` do `.chip` do DS vence o `[hidden]` do navegador. Hidden é hidden. */
body[data-tela="marketplace"] .chip[hidden] { display: none; }
body[data-tela="marketplace"] .mk-meu .mk-jpago {
  margin-left: var(--sp-2); font-size: var(--fs-1); color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
}

@media (max-width: 1024px) {
  body[data-tela="marketplace"] .os-palco { padding: var(--sp-2) var(--sp-3) var(--sp-5); padding-left: calc(var(--sp-3) + 12px); }
  body[data-tela="marketplace"] .os-grid,
  body[data-tela="marketplace"] #grid { grid-template-columns: repeat(3, 1fr); }
  body[data-tela="marketplace"] .mk-banner { grid-template-columns: auto 1fr; }
  body[data-tela="marketplace"] .mk-banner-nums {
    grid-column: 1 / -1; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px;
  }
  body[data-tela="marketplace"] .mk-banner-nums .os-stat { text-align: left; }
}
@media (max-width: 640px) {
  body[data-tela="marketplace"] .os-grid,
  body[data-tela="marketplace"] #grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  body[data-tela="marketplace"] .mkt-faixas-2col { grid-template-columns: 1fr; gap: var(--sp-3); }
  body[data-tela="marketplace"] .mk-acoes { grid-template-columns: 1fr; }
  body[data-tela="marketplace"] .mk-banner { padding: var(--sp-3); }
  body[data-tela="marketplace"] .mk-banner-ic { width: 38px; height: 38px; }
  body[data-tela="marketplace"] .mk-saldo .v { font-size: var(--fs-6); }
  /* 👆 as abas rolam na horizontal em vez de quebrar linha e empurrar a vitrine pra baixo */
  body[data-tela="marketplace"] .mk-abas { overflow-x: auto; flex-wrap: nowrap; }
  /* 📐 F2 (03/09) — AÇÃO ACIMA DA DOBRA EM 390 (qa/UX): as coleções viram UMA linha rolável e
     os filtros finos (moeda · raridade · tier · preço) ficam atrás do chip "Filtros" da barra
     de ferramentas. Medido antes: o 1º COMPRAR nascia em y=1236 numa tela de 844 — quatro
     linhas de chips de raridade e duas de tier empurravam a vitrine inteira pra baixo. */
  body[data-tela="marketplace"] .os-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  body[data-tela="marketplace"] .os-cats .os-cat { flex: none; }
  body[data-tela="marketplace"]:not(.mk-filtros-abertos) .mkt-filtros2,
  body[data-tela="marketplace"]:not(.mk-filtros-abertos) .mk-filtros-2a { display: none; }
  body[data-tela="marketplace"] .mk-btn-filtros { display: inline-flex; }
  /* a barra de ferramentas em UMA linha: Filtros · ordenar · densidade (a contagem já está
     no chip "Tudo N" das coleções) */
  body[data-tela="marketplace"] .os-tools { gap: var(--sp-2); flex-wrap: nowrap; }
  body[data-tela="marketplace"] .os-tools .conta,
  body[data-tela="marketplace"] .os-tools .mkt-filtros .lbl { display: none; }
  body[data-tela="marketplace"] .os-tools .mkt-filtros { flex: 1; min-width: 0; }
  body[data-tela="marketplace"] .os-tools select { width: 100%; min-width: 0; }
  body[data-tela="marketplace"] .os-tools .os-aplicados:empty { display: none; }
  body[data-tela="marketplace"] .os-tools .os-aplicados { flex: 1 0 100%; order: 9; }
  body[data-tela="marketplace"] .os-tools { flex-wrap: wrap; }
  /* os 4 números do banner em UMA linha rolável, sem texto atropelando o vizinho */
  body[data-tela="marketplace"] .mk-banner-nums { gap: var(--sp-3); scrollbar-width: none; }
  body[data-tela="marketplace"] .mk-banner-nums .os-stat { flex: none; min-width: 96px; }
  body[data-tela="marketplace"] .mk-banner-nums .s { white-space: nowrap; }
  /* o "+ Adicionar saldo" desce pra linha de baixo em vez de cobrir as abas */
  body[data-tela="marketplace"] .mk-abas { flex-wrap: wrap; overflow: visible; }
  body[data-tela="marketplace"] .mk-abas-fim { position: static; flex: 1 0 100%; margin-left: 0; display: flex; }
  body[data-tela="marketplace"] .mk-abas-fim > * { flex: 1; justify-content: center; }
  body[data-tela="marketplace"] .mk-abas-fim { position: sticky; right: 0; }
  body[data-tela="marketplace"] .mk-bag { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* ────────────────────────────────────────────────────────────────────────────────────────
   14) D-4 (03/09) — O CARD ÚNICO NA VITRINE · BOMBAS EM DESTAQUE · MEUS ANÚNCIOS PAGINADOS
   📜 Giba (15:00): *"mostrar já a qualidade dos nossos bonecos nos cards; tirar aquela linha na
      lateral e os pontos amarelos; mostrar as imagens REAIS dos bombers, pets e companheiros com
      boa qualidade; Meus anúncios: organizar paginação e espaçamento; 24h de anúncio"* e (15:40):
      *"falta o local de inserir as BOMBAS pra vender, bomba é a arma do bomber, dá destaque"*.
   🃏 O card é o `cardUnidade('compacta')` de /v2/motor/card-unidade.css — o MESMO das outras
      telas. Aqui só se veste o que é DO MERCADO (o rodapé `opcoes.acoes`: ficha, registro,
      serial, preço, Comprar), o prazo sobre a arte, e as três densidades. Nada do componente é
      redefinido além do que a vitrine precisa (a linha de 3px some, o BP some em bomba/item/
      figurinha, a arte da bomba/figurinha ocupa o quadro no % dela).
   ──────────────────────────────────────────────────────────────────────────────────────── */
/* a grade das densidades: grande (a §7 dá as colunas), pequena, lista */
body[data-tela="marketplace"] #grid.d-pequena { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--sp-2); }
body[data-tela="marketplace"] #grid.d-lista { grid-template-columns: 1fr; gap: var(--sp-2); }
body[data-tela="marketplace"] .mkt-card { min-width: 0; }
/* 🚫 "tirar aquela linha": a faixa de 3px no topo do card único não entra na vitrine — a
   raridade já fala pela borda, pela aura, pelo badge e pelas estrelas */
body[data-tela="marketplace"] .mkt-card .cu-moldura { display: none; }
/* bomba / item / figurinha não têm BP (é número da unit); figurinha não tem nível nem tier */
body[data-tela="marketplace"] .mkt-card.eh-bomba .cu-poder,
body[data-tela="marketplace"] .mkt-card.eh-item .cu-poder,
body[data-tela="marketplace"] .mkt-card.eh-sticker .cu-poder { display: none; }
body[data-tela="marketplace"] .mkt-card.eh-sticker .cu-nivel,
body[data-tela="marketplace"] .mkt-card.eh-sticker .cu-tier { display: none; }
/* a arte fora do v5: bomba e item são ícones quadrados (68% — a 76% o cabo de um machado vira
   um bomber); a figurinha é arte pintada (88%, suavizada, canto de carta) */
body[data-tela="marketplace"] .mkt-card.eh-bomba .cu-arte > img,
body[data-tela="marketplace"] .mkt-card.eh-item .cu-arte > img { width: 68%; height: 68%; }
body[data-tela="marketplace"] .mkt-card.eh-sticker .cu-arte > img {
  width: 88%; height: 88%; image-rendering: auto; border-radius: var(--r-sm);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bg) 70%, transparent);
}
body[data-tela="marketplace"] .mkt-card.eh-sticker .cu-corpo::before { image-rendering: auto; }
/* ⏳ o prazo no pé da arte (o nível mora em cima à direita, o elemento em cima à esquerda) */
body[data-tela="marketplace"] .mk-prazo {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  font: 700 var(--fs-1) / 1 var(--font-d); color: var(--text-dim);
  padding: 4px 8px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
body[data-tela="marketplace"] .mk-prazo.urgente { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }

/* o rodapé do mercado dentro do card (o `opcoes.acoes`): ficha · registro · serial+vendedor · preço · Comprar */
body[data-tela="marketplace"] .mkt-card .cu-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
body[data-tela="marketplace"] .mk-ficha { display: flex; flex-wrap: wrap; gap: 4px; }
body[data-tela="marketplace"] .mk-ficha:empty { display: none; }
body[data-tela="marketplace"] .mk-chip {
  font: 700 var(--fs-1) / 1.2 var(--font-d); color: var(--text-dim); padding: 3px 8px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
/* 📜 "é o registro que se compra": 1 linha, sempre, no card e na ficha de compra */
body[data-tela="marketplace"] .mk-registro { margin: 0; font-size: var(--fs-1); line-height: 1.35; color: var(--text-dim); }
body[data-tela="marketplace"] .ov-card .mk-registro { font-size: var(--fs-2); }
/* serial em cima (clicável, 44px), vendedor embaixo: lado a lado não cabe em 210px sem quebrar torto */
body[data-tela="marketplace"] .mk-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
/* 🔗 a procedência é o serial clicável (44px de toque), em ciano como o certificado */
body[data-tela="marketplace"] .mkt-card .mkt-proc {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 44px;
  padding: 0 6px; margin-left: -6px; border-radius: var(--r-sm); min-width: 0; flex: 1 1 auto;
  font: 700 var(--fs-1) var(--font-mono); color: var(--cyan); letter-spacing: .02em;
}
body[data-tela="marketplace"] .mkt-card .mkt-proc svg { width: 15px; height: 15px; flex: none; }
body[data-tela="marketplace"] .mkt-card .mkt-proc .mk-serial { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-tela="marketplace"] .mkt-card .mkt-proc:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
body[data-tela="marketplace"] .mkt-card .mkt-proc:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
body[data-tela="marketplace"] .mk-vend { font-size: var(--fs-1); color: var(--text-mute); white-space: nowrap; }
body[data-tela="marketplace"] .mk-vend b { color: var(--text-dim); }
body[data-tela="marketplace"] .mk-preco { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
body[data-tela="marketplace"] .mk-preco b { font: 800 var(--fs-5) / 1.1 var(--font-d); font-variant-numeric: tabular-nums; }
body[data-tela="marketplace"] .mk-preco small { font-size: var(--fs-1); color: var(--text-mute); }
body[data-tela="marketplace"] .mk-preco.bc b { color: var(--accent); }
body[data-tela="marketplace"] .mk-preco.brl b { color: var(--cyan); }
body[data-tela="marketplace"] .mk-preco.usdt b { color: var(--good); }
body[data-tela="marketplace"] .mkt-card .mk-comprar { width: 100%; font-weight: 800; letter-spacing: .04em; }

/* pequena: mais peças por tela — o detalhe (registro, serial, "tu pagas em…") fica pro modal */
body[data-tela="marketplace"] #grid.d-pequena .mk-registro,
body[data-tela="marketplace"] #grid.d-pequena .mk-meta,
body[data-tela="marketplace"] #grid.d-pequena .mk-ficha,
body[data-tela="marketplace"] #grid.d-pequena .mk-preco small { display: none; }
body[data-tela="marketplace"] #grid.d-pequena .mk-preco b { font-size: var(--fs-4); }
/* em 176px o cabeçalho (SUPER RARO · TIER IV) não pode quebrar em duas linhas */
body[data-tela="marketplace"] #grid.d-pequena .mkt-card .cu-cab { gap: 4px; }
body[data-tela="marketplace"] #grid.d-pequena .mkt-card .cu-rar { letter-spacing: 0; padding: 3px 7px; white-space: nowrap; }
body[data-tela="marketplace"] #grid.d-pequena .mkt-card .cu-tier small { letter-spacing: 0; }

/* lista: o modo de quem negocia — uma linha por anúncio, preço à direita, sem boneco de fundo */
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-corpo {
  flex-direction: row; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
}
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-corpo::before,
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-aura,
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-nivel,
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-elem,
body[data-tela="marketplace"] #grid.d-lista .mkt-card .mk-prazo,
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-estrelas,
body[data-tela="marketplace"] #grid.d-lista .mk-ficha,
body[data-tela="marketplace"] #grid.d-lista .mk-registro,
body[data-tela="marketplace"] #grid.d-lista .mk-vend,
body[data-tela="marketplace"] #grid.d-lista .mk-preco small { display: none; }
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-arte { order: 1; width: 64px; height: 64px; aspect-ratio: auto; flex: none; margin: 0; }
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-id { order: 2; flex: 1 1 200px; min-width: 0; padding: 0; margin: 0; }
/* colunas com largura fixa: em varredura vertical o olho compara BP com BP, tier com tier */
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-poder { order: 3; margin: 0; flex: none; min-width: 150px; }
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-cab { order: 4; padding: 0; flex: none; min-width: 124px; flex-direction: column; align-items: flex-start; gap: 4px; }
body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-acoes {
  order: 5; margin: 0; padding: 0; border: 0; flex: none; flex-direction: row; align-items: center; gap: var(--sp-3);
}
body[data-tela="marketplace"] #grid.d-lista .mk-meta { flex: none; flex-direction: row; align-items: center; }
body[data-tela="marketplace"] #grid.d-lista .mk-preco { min-width: 120px; align-items: flex-end; }
body[data-tela="marketplace"] #grid.d-lista .mk-preco b { font-size: var(--fs-4); }
body[data-tela="marketplace"] #grid.d-lista .mkt-card .mk-comprar { width: auto; }

/* ★ o chip da coleção em destaque (Bombas, `destaque:true` do servidor) sai em ouro; e todo chip
   de coleção ganha a régua (44px de toque, fonte ≥14) */
body[data-tela="marketplace"] .os-cat { min-height: 44px; font-size: var(--fs-2); }
body[data-tela="marketplace"] .os-cat--destaque {
  color: var(--accent); font-weight: 800;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(158deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 16%, transparent);
}
body[data-tela="marketplace"] .os-cat--destaque .q { opacity: .9; }
/* o seletor de densidade também é toque: 44px (era 34×30) */
body[data-tela="marketplace"] .os-dens button { width: 44px; height: 44px; }
body[data-tela="marketplace"] .os-cat--destaque.on { color: var(--bg); background: var(--accent); }
/* e o chip Bombas do bag (Vender), em ouro até ser escolhido */
body[data-tela="marketplace"] .chip--bomba:not(.on) {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
body[data-tela="marketplace"] .bslot.eh-bomba img { width: 72%; height: 72%; }

/* 📋 MEUS ANÚNCIOS — grade com o gap do DS, 10 por página; cada linha: arte · nome/raridade/serial ·
   preço + "expira em" · Cancelar. Sem a linha lateral de 3px (a raridade é o badge e a moldura da arte). */
body[data-tela="marketplace"] .mk-meus { display: grid; gap: var(--sp-2); }
body[data-tela="marketplace"] .mk-meu {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc, var(--au-400)) 28%, transparent);
}
body[data-tela="marketplace"] .mk-meu-arte {
  width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-sm);
  background: radial-gradient(120% 90% at 50% 10%, color-mix(in srgb, var(--rc, var(--au-400)) 22%, var(--card)), color-mix(in srgb, var(--bg) 70%, transparent) 72%);
  border: 1px solid color-mix(in srgb, var(--rc, var(--au-400)) 35%, transparent);
}
body[data-tela="marketplace"] .mk-meu-arte img { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; }
body[data-tela="marketplace"] .mk-meu.eh-sticker .mk-meu-arte img { width: 90%; height: 90%; image-rendering: auto; border-radius: 4px; }
body[data-tela="marketplace"] .mk-meu-arte .ini { font: 800 var(--fs-5) var(--font-head); color: color-mix(in srgb, var(--rc, var(--au-400)) 60%, var(--text-mute)); }
body[data-tela="marketplace"] .mk-meu-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body[data-tela="marketplace"] .mk-meu-nome { font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-tela="marketplace"] .mk-meu-sub { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-1); }
body[data-tela="marketplace"] .mk-meu .badge-rar { --rar: var(--rc, var(--rar-common)); border-color: transparent; padding: 2px 8px; }
body[data-tela="marketplace"] .mk-meu .mk-serial { font: 600 var(--fs-1) var(--font-mono); color: var(--text-mute); letter-spacing: .03em; }
body[data-tela="marketplace"] .mk-meu-preco { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
body[data-tela="marketplace"] .mk-meu-preco b { font: 800 var(--fs-4) / 1.1 var(--font-d); font-variant-numeric: tabular-nums; }
body[data-tela="marketplace"] .mk-meu-preco b.bc { color: var(--accent); }
body[data-tela="marketplace"] .mk-meu-preco b.brl { color: var(--cyan); }
body[data-tela="marketplace"] .mk-meu-preco b.usdt { color: var(--good); }
body[data-tela="marketplace"] .mk-prazo-txt { font-size: var(--fs-1); color: var(--text-dim); }
body[data-tela="marketplace"] .mk-prazo-txt.urgente { color: var(--crit); font-weight: 700; }
body[data-tela="marketplace"] .mk-meu .pill { padding: 3px 9px; font-size: var(--fs-1); }
body[data-tela="marketplace"] #meusPag { margin: var(--sp-3) 0 var(--sp-5); }
body[data-tela="marketplace"] #meusPag:empty { display: none; }
body[data-tela="marketplace"] #meusPag .chip[disabled] { opacity: .45; cursor: default; }

@media (max-width: 640px) {
  /* o card em 2 colunas (~170px): o rodapé perde o que é detalhe — continua no modal e na procedência */
  body[data-tela="marketplace"] #grid.d-grande .mk-vend,
  body[data-tela="marketplace"] #grid.d-grande .mk-preco small { display: none; }
  body[data-tela="marketplace"] #grid.d-grande .mk-registro { display: none; }
  body[data-tela="marketplace"] .mk-prazo { left: 6px; bottom: 6px; padding: 3px 6px; }
  /* em 170px o cabeçalho do card (LENDÁRIO · TIER IX) precisa de folga: sem espaçamento de letra */
  body[data-tela="marketplace"] .mkt-card .cu-cab { gap: 4px; }
  body[data-tela="marketplace"] .mkt-card .cu-rar { letter-spacing: 0; padding: 3px 7px; white-space: nowrap; }
  body[data-tela="marketplace"] .mkt-card .cu-tier small { letter-spacing: 0; }
  /* a lista em tela estreita empilha o rodapé numa linha própria */
  body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-corpo { flex-wrap: wrap; }
  body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-cab,
  body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-poder { display: none; }
  body[data-tela="marketplace"] #grid.d-lista .mkt-card .cu-acoes { flex: 1 0 100%; justify-content: space-between; }
  /* meus anúncios: arte + texto em cima, preço e Cancelar embaixo */
  body[data-tela="marketplace"] .mk-meu { grid-template-columns: 48px minmax(0, 1fr); }
  body[data-tela="marketplace"] .mk-meu-arte { width: 48px; height: 48px; }
  body[data-tela="marketplace"] .mk-meu-preco { grid-column: 2; align-items: flex-start; text-align: left; }
  body[data-tela="marketplace"] .mk-meu > button { grid-column: 1 / -1; width: 100%; }
}