/* mercado.css — aba Mercado Seguro do hub.
   COMPAT Maxthon 5 / Chromium antigo (mesma regra do dashboard.css):
   - SEM var(), SEM CSS grid, SEM gap em flex (usa margins), SEM backdrop-filter,
     SEM filter. Flexbox básico + gradients + transforms OK.
   Paleta literal, a mesma do dashboard: gold #f0c850 · gold-text #f5dc8a ·
     crystal #5aa0ff · night #060d26 · text #dfe7ff · dim #a8b8d0 · muted #7a8aa0.
   Arquivo separado do dashboard.css de propósito: duas sessões editam o hub ao
   mesmo tempo, e arquivo compartilhado é onde o trabalho de um engole o do outro. */

.hub-mercado { position: relative; z-index: 1; padding: 8px 0 40px; }

/* ===== navegação interna ===== */
.mk-nav { display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(240, 200, 80, 0.22); margin-bottom: 22px; }
.mk-nav-link {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: "Cinzel", Georgia, serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #a8b8d0;
  padding: 11px 18px; border-bottom: 2px solid transparent;
}
.mk-nav-link:hover { color: #dfe7ff; }
.mk-nav-link.is-on { color: #f0c850; border-bottom-color: #f0c850; }

/* ===== cabeçalho de tela ===== */
.mk-cabeca { margin-bottom: 20px; }
.mk-titulo {
  font-family: "Cinzel", Georgia, serif; font-size: 26px; color: #fff;
  margin: 0 0 6px; letter-spacing: 0.04em;
}
.mk-sub { margin: 0; color: #a8b8d0; font-size: 14px; max-width: 62em; line-height: 1.55; }

/* ===== filtros ===== */
.mk-filtros { display: flex; flex-wrap: wrap; margin-bottom: 16px; }
.mk-filtro {
  appearance: none; cursor: pointer; background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(140, 165, 215, 0.18); border-radius: 999px;
  color: #a8b8d0; font-family: inherit; font-size: 13px;
  padding: 7px 16px; margin-right: 8px; margin-bottom: 8px;
}
.mk-filtro:hover { color: #dfe7ff; border-color: rgba(240, 200, 80, 0.4); }
.mk-filtro.is-on { color: #f0c850; border-color: #f0c850; background: rgba(240, 200, 80, 0.1); }

/* ===== grade de anúncios (flex, não grid) =====
   Largura FIXA deixava 204px de sobra à direita — mais de 20% da fileira —
   porque o card nunca crescia para fechar a linha. Com `flex` ele cresce; o
   `max-width` é o freio para o card que sobra sozinho na última linha não
   esticar pela tela inteira. */
.mk-grade { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.mk-card {
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  flex: 1 1 232px; max-width: 340px; margin: 0 8px 16px; padding: 15px;
  background: linear-gradient(180deg, rgba(8, 18, 46, 0.9), rgba(14, 24, 58, 0.94));
  border: 1px solid rgba(140, 165, 215, 0.16); border-radius: 14px;
  color: inherit; font-family: inherit;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.mk-card:hover { transform: translateY(-2px); border-color: rgba(240, 200, 80, 0.5); }
.mk-card:focus { outline: none; border-color: #f0c850; box-shadow: 0 0 0 2px rgba(240, 200, 80, 0.28); }
/* Os dois selos numa fileira só, no alto. Antes o de entrega fechava o card
   DEPOIS do preço, e o preço — o que o olho procura — ficava no meio. */
.mk-card-selos { display: flex; flex-wrap: wrap; align-items: center; }
.mk-card-nome { display: block; font-size: 16px; color: #fff; font-weight: 600; line-height: 1.3; margin: 10px 0; }
.mk-card-pe { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; }
.mk-preco { font-family: "Cinzel", Georgia, serif; font-size: 20px; color: #f0c850; font-weight: 700; }
.mk-vendedor { font-size: 11px; color: #7a8aa0; text-align: right; padding-left: 8px; }

/* ===== selos ===== */
/* Forma: hub-base.css (T1.1) — era 0.12em de espaçamento aqui, 0.1em no
   `.mk-estado` e 1px/2px nos outros. Aqui ficam só os tons. */
.mk-guardado { color: #5fe3f2; background: rgba(95, 227, 242, 0.1); border: 1px solid rgba(95, 227, 242, 0.38); align-self: flex-start; }
.mk-selo { color: #5aa0ff; background: rgba(90, 160, 255, 0.1); border: 1px solid rgba(90, 160, 255, 0.36); align-self: flex-start; }
.mk-selo-manual { color: #7a8aa0; background: rgba(0, 0, 0, 0.28); border-color: rgba(140, 165, 215, 0.18); }
/* Sem `gap` (o Maxthon ignora): a folga entre os dois selos é margem, e a de
   baixo é o que segura a fileira quando ela quebra em duas linhas. */
.mk-card-selos .mk-guardado, .mk-card-selos .mk-selo { margin: 0 6px 6px 0; }

/* ===== ficha ===== */
.mk-voltar {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: #a8b8d0; font-family: inherit; font-size: 13px; padding: 0; margin-bottom: 16px;
}
.mk-voltar:hover { color: #f0c850; }
.mk-ficha { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.mk-ficha-esq, .mk-ficha-dir { padding: 0 12px; min-width: 280px; }
.mk-ficha-esq { flex: 1 1 340px; }
.mk-ficha-dir { flex: 1 1 340px; }
.mk-kv { margin: 18px 0 0; font-size: 14px; }
.mk-kv dt { color: #7a8aa0; font-size: 12px; letter-spacing: 0.05em; margin-top: 10px; }
.mk-kv dd { margin: 3px 0 0; color: #dfe7ff; }
/* Atributos da peca. Duas colunas com o numero a direita e tabular: coluna de
   numero que dança e coluna que nao se compara entre anuncios. O bonus de
   refino em verde, separado do base, como no tooltip do jogo. */
.mk-attrs { margin: 16px 0 0; font-size: 13.5px; overflow: hidden; }
.mk-attrs dt { float: left; clear: left; color: #a8b8d0; padding: 2px 0; }
.mk-attrs dd { margin: 0; padding: 2px 0; text-align: right; color: #dfe7ff; }
.mk-attr-bonus { color: #7fd6a0; margin-left: 5px; }

/* Gemas encravadas, e os furos que sobraram livres. */
.mk-gemas { margin: 14px 0 0; font-size: 13px; }
.mk-gemas b { color: #a8b8d0; font-weight: 600; }
.mk-gemas ul { list-style: none; margin: 5px 0 0; padding: 0; }
.mk-gemas li { color: #dfe7ff; padding: 1px 0; }
.mk-furo-vazio { color: #7a8aa0; font-style: italic; }

/* A descricao do item. Recuo com filete em vez de caixa: e prosa do catalogo,
   nao mais um par rotulo/valor -- e o olho precisa separar as duas coisas. */
.mk-desc {
  margin: 16px 0 0; padding: 2px 0 2px 14px;
  border-left: 2px solid rgba(140, 165, 215, 0.28);
  color: #b6c4de; font-size: 13.5px; line-height: 1.55;
}

.mk-preco-grande {
  font-family: "Cinzel", Georgia, serif; font-size: 40px; color: #f0c850;
  font-weight: 700; line-height: 1; margin-top: 20px;
  border-top: 1px solid rgba(140, 165, 215, 0.16); padding-top: 18px;
}

/* No anuncio por unidade, o preco grande e o de UMA — e "por unidade · N a
   venda" vem logo abaixo, em corpo miudo, para o numero em destaque nao ficar
   sem contexto. */
.mk-preco-unidade {
  display: block; font-family: "Alegreya Sans", "Segoe UI", sans-serif;
  font-size: 13px; color: #a8b8d0; letter-spacing: 0; margin-top: 2px;
}

/* O "cada" do cartao da vitrine. Miudo e apagado de proposito: ele qualifica o
   preco, nao disputa com ele. Inline (o `.mk-preco` e uma linha so). */
.mk-preco-cada {
  font-family: "Alegreya Sans", "Segoe UI", sans-serif;
  font-size: 11px; color: #a8b8d0; font-weight: 400;
}

/* ===== o bloco que vende o produto ===== */
.mk-garantia {
  border: 1px solid rgba(95, 227, 242, 0.34); border-radius: 14px; padding: 18px;
  background: linear-gradient(180deg, rgba(8, 26, 46, 0.9), rgba(10, 22, 50, 0.94));
}
.mk-garantia h3 {
  font-family: "Cinzel", Georgia, serif; font-size: 16px; color: #5fe3f2;
  letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 4px;
}
.mk-garantia-sub { margin: 0 0 14px; font-size: 12px; color: #a8b8d0; }
.mk-passos { margin: 0; padding-left: 20px; }
.mk-passos li { color: #a8b8d0; font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.mk-passos b { color: #fff; }

/* Aviso frio: o que o mercado NÃO faz. Fica visível, não em letra miúda —
   prometer menos por escrito é o que evita a reclamação depois. */
.mk-aviso-frio {
  margin-top: 16px; border: 1px solid rgba(255, 154, 77, 0.38); border-radius: 14px;
  padding: 14px 16px; font-size: 13px; color: #a8b8d0; line-height: 1.6;
}
.mk-aviso-frio b { color: #ffd9b8; }

/* Aviso quente: o que acontece AGORA se publicar. Acima do botão, com o valor
   nomeado — é a tela onde o jogador entende que publicar é entregar ao cofre. */
.mk-aviso-quente {
  margin: 18px 0; border: 1px solid rgba(255, 154, 77, 0.42);
  background: rgba(255, 154, 77, 0.08); border-radius: 14px;
  padding: 14px 16px; font-size: 13px; color: #ffd9b8; line-height: 1.55;
}
.mk-aviso-quente b { color: #fff; }

/* ===== formulário ===== */
.mk-form { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.mk-campo { padding: 0 10px; margin-bottom: 16px; flex: 1 1 220px; }
.mk-label {
  display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #7a8aa0; margin-bottom: 7px;
}
/* Campo e foco: hub-base.css (T1.1). Eram a MESMA pílula do `.hub-input`,
   com raio 999 contra 28 e borda .42 contra .5 — diferença que ninguém
   escolheu. */
.mk-ajuda { font-size: 12px; color: #7a8aa0; margin: 6px 0 0; }

/* Valor que não se escolhe. Ocupa o lugar do campo para a linha do formulário
   não desalinhar, mas sem borda de campo: caixa com cara de input convida a
   clicar, e aqui não há o que clicar. */
.mk-fixo {
  padding: 10px 4px; color: #dfe7ff; font-size: 14px;
  border-bottom: 1px solid rgba(140, 165, 215, 0.16);
}

/* ===== resumo financeiro ===== */
.mk-resumo {
  border: 1px solid rgba(240, 200, 80, 0.22); border-radius: 14px; padding: 16px;
  background: rgba(0, 0, 0, 0.28);
}
/* Sem preço válido não há resumo — e `innerHTML = ''` não tira borda nem
   padding: sobrava uma caixa dourada de 34px com nada dentro. */
.mk-resumo.is-vazio { display: none; }
.mk-linha { display: flex; justify-content: space-between; font-size: 14px; color: #a8b8d0; margin-bottom: 9px; }
.mk-linha:last-child { margin-bottom: 0; }
.mk-total { border-top: 1px solid rgba(140, 165, 215, 0.16); padding-top: 11px; margin-top: 3px; }
.mk-total span:last-child { color: #f0c850; font-weight: 700; font-size: 20px; font-family: "Cinzel", Georgia, serif; }

/* ===== conexão de pagamento ===== */
.mk-conexao {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  border: 1px solid rgba(140, 165, 215, 0.18); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 20px; font-size: 13px; color: #a8b8d0; line-height: 1.55;
}
.mk-conexao b { color: #fff; }
.mk-conexao.is-ok { border-color: rgba(63, 212, 139, 0.4); }
.mk-conexao.is-aviso { border-color: rgba(255, 154, 77, 0.45); background: rgba(255, 154, 77, 0.07); }
.mk-conexao.is-frio { border-color: rgba(140, 165, 215, 0.18); }

/* ===== tabela do painel =====
   A tabela rola DENTRO do próprio bloco. Seis colunas em 327px de celular
   davam 538px — 211px para fora, empurrando a página inteira de lado.
   Empilhar as linhas quebraria a comparação de preço, que é para o que a
   tabela existe; então quem rola é ela, e o resto da página fica quieto. */
/* O painel que faltava. A lista era o único bloco do hub sem moldura — todo o
   resto da casa (notícias, ranking, servidor, pacotes) mora num cartão, e só
   ela flutuava nua sobre o céu. Mesma linguagem do .hub-panel do dashboard. */
/* Moldura: hub-base.css (T1.1) — era a MESMA borda/raio/gradiente/sombra do
   `.hub-panel`, escrita duas vezes. Aqui fica só o que é próprio. */
.mk-painel { overflow: hidden; }
.mk-painel-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid rgba(240, 200, 80, 0.14);
}
.mk-painel-titulo {
  font-family: "Cinzel", Georgia, serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.11em; color: #f5dc8a;
}
.mk-painel-titulo:before {
  content: "\25C6"; font-size: 8px; color: #f0c850; margin-right: 8px; vertical-align: 2px;
}
.mk-painel-hint { font-size: 11px; letter-spacing: 0.08em; color: #7a8aa0; }

.mk-rolagem { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mk-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.mk-tabela th {
  text-align: left; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7a8aa0; font-weight: 600; padding: 11px 16px; background: rgba(0, 0, 0, 0.22);
}
.mk-tabela td {
  padding: 13px 16px; border-bottom: 1px solid rgba(140, 165, 215, 0.12); color: #dfe7ff;
  vertical-align: middle;
}
.mk-tabela tr:last-child td { border-bottom: 0; }
.mk-liquido { color: #f0c850; font-weight: 600; }

/* A linha ganha reação ao mouse — cinco colunas de número sem hover não dizem
   ao olho onde ele está. E a coluna da ação para de dançar de largura. */
.mk-linha-anuncio { transition: background-color 0.14s ease; }
.mk-linha-anuncio:hover { background-color: rgba(240, 200, 80, 0.04); }
/* A coluna da ação encolhe até o botão; a do anúncio é a que sobra e não pode
   espremer o nome a ponto de quebrar em duas linhas na rolagem do celular. */
.mk-col-acao { width: 1%; }
.mk-col-item { min-width: 190px; }
/* Largura mínima do botão de cancelar: o rótulo troca pra "Cancelando…" durante
   a chamada, e sem piso a coluna inteira pula de largura no meio da ação. */
.mk-cancelar { min-width: 116px; }

/* ===== o rosto do anúncio =====
   Antes esta coluna era texto solto ("1 diamante") do mesmo tamanho e cor dos
   números ao lado: o vendedor varria a linha inteira pra saber QUAL anúncio
   era. O losango (cristal, trilho GOLD) e o escudo (item) dão âncora visual, e
   o nome sobe de peso pra virar o assunto da linha. */
.mk-item-face { display: flex; align-items: center; }
.mk-glifo {
  flex: none; width: 26px; height: 26px; margin-right: 12px; border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* diamante = losango de cristal, o mesmo da vitrine de pacotes */
.mk-glifo.is-gold {
  width: 20px; height: 20px; margin: 0 15px 0 3px; border-radius: 3px;
  background: linear-gradient(135deg, #9cc4ff, #3a70d8 55%, #1a3a8a);
  border: 1px solid rgba(216, 240, 255, 0.55);
  box-shadow: 0 0 12px rgba(90, 160, 255, 0.45), inset 0 1px 4px rgba(255, 255, 255, 0.45);
  /* rotate roda no Chromium antigo; se não rodar, fica um quadrado — degrada
     pra forma, não pra layout quebrado. */
  transform: rotate(45deg);
}
.mk-glifo.is-item {
  background: linear-gradient(160deg, rgba(240, 200, 80, 0.3), rgba(140, 100, 20, 0.25));
  border: 1px solid rgba(240, 200, 80, 0.45);
}
.mk-item-txt { display: flex; flex-direction: column; min-width: 0; }
.mk-item-nome { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; }
/* Forma: hub-base.css (T1.1). Aqui só o TOM — azul de informação. */
.mk-estado {
  color: #5aa0ff; border: 1px solid rgba(90, 160, 255, 0.36);
  background: rgba(90, 160, 255, 0.1);
}

/* ===== a ação da ficha ===== */
/* Bloco próprio: é onde a compra acontece, e estava solto embaixo do aviso
   sem nada que o separasse do texto. */
.mk-acao {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(140, 165, 215, 0.16);
}
/* A CTA acompanha a largura do seletor acima. Media: 335px de botão sob um
   <select> de 554px — a ação principal da tela era a peça mais estreita.
   Hoje quem faz isso é .hub-acao--cheia no próprio botão. */

/* ===== avulsos ===== */
.mk-btn { margin-top: 14px; }

/* Recado de sucesso da ação anterior (ex.: anúncio cancelado). Verde do mesmo
   par usado no resto do hub; some sozinho ao navegar. */
.mk-recado-ok {
  margin: 0 0 18px; padding: 11px 14px; border-radius: 12px; font-size: 13px;
  line-height: 1.5; color: #9ae8b0;
  background: rgba(63, 212, 139, 0.1); border: 1px solid rgba(63, 212, 139, 0.4);
}
.mk-vazio, .mk-nota { color: #7a8aa0; font-size: 13px; line-height: 1.6; }
.mk-nota { margin-top: 14px; }
.mk-erro { color: #ff9a8a; font-size: 13px; margin-top: 10px; }
/* Erro do cancelamento, ao lado do botão. Não tinha regra NENHUMA: herdava o
   #dfe7ff do texto comum, e a falha se lia como conteúdo. */
.mk-erro-mini { display: block; margin-top: 6px; color: #ff9a8a; font-size: 11px; line-height: 1.4; }
.mk-recado { min-height: 20px; }

/* ===== foco de teclado =====
   Só os campos tinham `:focus`. Card, filtro, aba, voltar e cancelar são
   <button> — quem navega por Tab não enxergava onde estava. `:focus-visible`
   não existe no Chromium do Maxthon, e pseudo-classe desconhecida invalida a
   regra inteira: aqui é `:focus` mesmo. */
.mk-nav-link:focus, .mk-filtro:focus, .mk-voltar:focus,
.mk-link-vendedor:focus {
  outline: none; color: #f0c850; box-shadow: 0 0 0 2px rgba(240, 200, 80, 0.28);
}
/* .mk-cancelar saiu daqui: virou .hub-acao, que já traz o próprio anel de foco.
   Manter a regra antiga forçaria #f0c850 por cima do laranja de "perigo". */
.mk-nav-link:focus, .mk-voltar:focus, .mk-link-vendedor:focus { border-radius: 4px; }

@media (max-width: 720px) {
  /* `width` saiu do card quando ele virou flex; o que manda agora é a base. */
  .mk-card { flex-basis: 100%; max-width: none; }
}

/* ===== perfil do vendedor ===== */
.mk-perfil-topo { margin-bottom: 22px; }
.mk-estrelas { display: flex; align-items: baseline; margin-top: 8px; }
.mk-estrela { color: rgba(140, 165, 215, 0.3); font-size: 20px; margin-right: 2px; }
.mk-estrela.is-on { color: #f0c850; }
.mk-nota-media { color: #f0c850; font-weight: 700; font-size: 18px; margin-left: 10px; }
.mk-nota-total { color: #7a8aa0; font-size: 12px; margin-left: 10px; }

/* Números factuais em destaque: são o que sustenta a confiança quando ainda
   não há estrelas — e continuam valendo quando houver. */
.mk-numeros { display: flex; flex-wrap: wrap; margin: 0 -8px 24px; }
.mk-numero {
  flex: 1 1 150px; margin: 0 8px 12px; padding: 14px 16px;
  border: 1px solid rgba(140, 165, 215, 0.16); border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
}
.mk-numero-v {
  display: block; font-family: "Cinzel", Georgia, serif; font-size: 26px;
  color: #fff; line-height: 1.15;
}
.mk-numero-txt { font-size: 16px; }
.mk-numero-k {
  display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7a8aa0; margin-top: 5px;
}
.mk-secao {
  font-family: "Cinzel", Georgia, serif; font-size: 15px; color: #f5dc8a;
  letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px;
}

/* nome do vendedor clicável na ficha */
.mk-link-vendedor {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  color: #5aa0ff; font-family: inherit; font-size: 14px; text-decoration: underline;
}
.mk-link-vendedor:hover { color: #8cc0ff; }

/* ===== cancelar, no painel do vendedor =====
   A pele agora vem de .hub-acao--perigo --mini (hub.css) — antes este botão
   tinha família própria (11px, `font-family: inherit`, raio 8) e não era
   parente de nenhum outro botão da casa. Aqui fica só a posição na linha. */
.mk-acoes { text-align: right; white-space: nowrap; }

/* ===== painel do vendedor: conexão com ação, prazo e estados =====
   Pedido do Lucas (2026-08-28): conectado era o único estado sem ação, e quem
   tinha conectado a conta ERRADA não tinha por onde trocar. */
.mk-conexao-texto { flex: 1 1 320px; margin-right: 16px; }
.mk-conta {
  margin-top: 6px; font-size: 12px; color: #7a8aa0;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.mk-conta b { color: #a8b8d0; font-weight: 600; }

/* Ação secundária: existe, mas não compete com a primária da tela. Uma tela,
   uma CTA — trocar conta é manutenção, não o que o vendedor veio fazer. Hoje
   isso é .hub-acao--fantasma; a regra local morreu junto com a duplicação. */

/* Prazo do anúncio: `expira_em` já vinha na resposta e a tela ignorava, então
   o anúncio sumia da vitrine sozinho sem ninguém saber que tinha prazo. */
.mk-prazo { display: block; margin-top: 4px; font-size: 11px; color: #7a8aa0; }
.mk-prazo.is-perto { color: #ff9a4d; }

/* Colunas de dinheiro alinham pela vírgula: dígito de largura variável faz a
   coluna dançar a cada linha, e preço é justamente onde o olho compara. */
.mk-num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.mk-tabela th:nth-child(3), .mk-tabela th:nth-child(4),
.mk-tabela th:nth-child(5) { text-align: right; }

/* Cor por estado REFORÇA o rótulo, nunca substitui: o texto já diz tudo, para
   quem não distingue as cores continuar entendendo a tabela. */
.mk-estado.is-entregue {
  color: #3fd48b; border-color: rgba(63, 212, 139, 0.4); background: rgba(63, 212, 139, 0.1);
}
.mk-estado.is-reservado, .mk-estado.is-pago {
  color: #ff9a4d; border-color: rgba(255, 154, 77, 0.4); background: rgba(255, 154, 77, 0.1);
}
.mk-estado.is-devolvido, .mk-estado.is-cancelado, .mk-estado.is-expirado {
  color: #7a8aa0; border-color: rgba(140, 165, 215, 0.28); background: rgba(140, 165, 215, 0.08);
}

/* Vazio com saída: sem a ação, quem chega primeiro lê uma frase e volta pelo
   menu — o beco sem saída clássico de empty state. */
.mk-vazio-bloco { text-align: center; padding: 26px 16px; }
.mk-vazio-bloco .mk-vazio { margin-bottom: 4px; }

@media (max-width: 720px) {
  .mk-conexao-texto { margin-right: 0; margin-bottom: 10px; }
}

/* ===== anúncio em checkout de outra pessoa =====
   Continua na vitrine de propósito: sumir é o que permitia a um concorrente
   esconder anúncio alheio abrindo checkout (pedido do Lucas, 28/08). */
.mk-em-pagamento {
  color: #ff9a4d; border-color: rgba(255, 154, 77, 0.45);
  background: rgba(255, 154, 77, 0.12);
}
.mk-card.is-em-pagamento { opacity: 0.82; }
.mk-card.is-em-pagamento:hover { opacity: 1; }
.mk-em-pagamento-aviso {
  border: 1px solid rgba(255, 154, 77, 0.35); border-radius: 12px;
  background: rgba(255, 154, 77, 0.07); padding: 12px 14px; color: #dfe7ff;
}
.mk-em-pagamento-aviso b { color: #ff9a4d; }

/* ===== a ficha de vigia (05/09) =====
   O painel que substitui o botão de comprar enquanto o pagamento corre na aba
   nova. Mesma família visual do aviso acima — é o mesmo estado do anúncio,
   visto do lado de quem está pagando em vez de quem esbarrou nele.
   COMPAT: sem `gap`, sem `var()`, sem `grid` — regra do cabeçalho do arquivo. */
.mk-vigia {
  border: 1px solid rgba(255, 154, 77, 0.35); border-radius: 12px;
  background: rgba(255, 154, 77, 0.07); padding: 14px 16px; color: #dfe7ff;
}
.mk-vigia-titulo { margin: 0 0 4px; font-size: 14px; }
.mk-vigia-titulo b { color: #ff9a4d; }
/* A contagem é o número que o comprador fica olhando: sai da cor de nota
   (#7a8aa0, quase apagada) para a de conteúdo, e o relógio em destaque. */
.mk-vigia .mk-vigia-conta { margin-top: 0; color: #dfe7ff; }
.mk-vigia .mk-vigia-conta b { color: #f0c850; font-variant-numeric: tabular-nums; }
.mk-vigia .mk-desistir { margin-top: 14px; }
/* APK (04/10): o pagamento abre no navegador do celular e a vigia fica no app */
.mk-vigia .mk-reabrir { margin-top: 14px; }
.mk-vigia .mk-reabrir-nota { margin: 6px 0 0; color: #f0c850; }

/* ===== o ícone real do item (T1.2 do plano 32) =====
   Duas camadas empilhadas: o glifo por baixo, sempre; a imagem por cima, quando
   existe. Cobre os três casos com uma regra — item sem arte extraída (1,7% do
   catálogo), arquivo que sumiu do servidor, e o instante do download. Nunca
   caixa vazia.
   COMPAT: sem `gap`, sem `filter`, sem `var()`, sem `grid` — mesma regra do
   cabeçalho deste arquivo. Empilhar é `position`, que existe desde sempre. */
.mk-rosto {
  position: relative;
  flex: none;
  display: inline-block;
  /* 32px = o tamanho NATIVO do ícone, não os 26px do glifo antigo. Caixa menor
     que a arte deixava o ícone 3px fora do centro (medido) e obrigaria a
     reduzir pixel art de 32px, que borra. Quem se adapta é o glifo, que é
     desenho CSS e escala sem perda. */
  width: 32px;
  height: 32px;
  margin-right: 12px;
  vertical-align: middle;
}
/* dentro do rosto o glifo perde a margem própria e preenche a caixa — quem
   espaça é o rosto */
.mk-rosto .mk-glifo {
  position: absolute; left: 0; top: 0; margin: 0; width: 100%; height: 100%;
}
/* o losango de cristal mantém o tamanho próprio, centrado na caixa nova */
.mk-rosto .mk-glifo.is-gold { left: 6px; top: 6px; width: 20px; height: 20px; }
.mk-icone {
  /* Centralização por caixa esticada + `margin: auto`, NÃO por
     `left:50%; margin-left:-metade`. A segunda só acerta quando a imagem tem
     exatamente o tamanho máximo — e não tem: 99% dos ícones são 32×32, mas há
     26×32, 29×31, 30×27… Medido na ficha: o ícone saía 3px pra fora do título.
     Esta forma centraliza qualquer tamanho e roda desde sempre (sem transform). */
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  margin: auto;
  /* 32px é o tamanho nativo de 99% dos ícones; os 38 que fogem (11 são 95×128)
     entram por `max-*` e ficam proporcionais em vez de esticados. */
  max-width: 32px;
  max-height: 32px;
  /* nitidez: escalar arte de 32px com interpolação suave borra o pixel art.
     Onde a propriedade não existe, degrada pro padrão — borrado, não quebrado. */
  image-rendering: -webkit-optimize-contrast;
}
/* o `onerror` do <img> marca `hidden`; sem esta regra o `position:absolute`
   acima disputaria com o display:none da folha do navegador */
.mk-icone[hidden] { display: none; }
/* o cartão da vitrine passa a ter rosto + nome na mesma linha */
.mk-card-face { display: flex; align-items: center; min-width: 0; }
.mk-card-face .mk-card-nome { min-width: 0; }
/* a ficha: o rosto entra no título sem empurrar a linha de base */
.mk-titulo-com-rosto { display: flex; align-items: center; }
.mk-titulo-com-rosto .mk-rosto { width: 40px; height: 40px; margin-right: 14px; }
.mk-titulo-com-rosto .mk-icone { max-width: 40px; max-height: 40px; }

/* ===== a mochila na tela de anunciar (2026-08-31) =====
   COMPAT: sem `gap`, sem `grid`, sem `var()`, sem `filter` — as células são
   `inline-block` com largura em %, e a folga é MARGEM. Rolagem própria com
   `max-height`: uma mochila de 40 itens empurraria o botão de publicar pra
   fora da tela, e o botão é o fim do fluxo. */
/* O `.mk-form` e uma LINHA de colunas (`flex` com `flex: 1 1 220px` por campo).
   Pendurada como campo comum, a mochila virou a 5a coluna com 124px: o texto
   desceu pra baixo do icone e as celulas ficaram de alturas diferentes (80 e
   92px, medido). Ela precisa da LINHA inteira. */
.mk-campo--cheio { flex: 1 1 100%; }
.mk-mochila {
  max-height: 268px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid rgba(140, 165, 215, 0.2);
  border-radius: 12px;
  background: rgba(8, 16, 42, 0.5);
}
.mk-slot {
  display: inline-block;
  box-sizing: border-box;
  width: 48.5%;
  /* Altura TRAVADA, mesma razao do sistema de botoes: com ela qualquer
     combinacao de nome curto e motivo longo alinha sozinha, sem depender de
     sorte. Sem isso a grade fica serrilhada (medido: 80px ao lado de 92px). */
  height: 54px;
  margin: 0 1% 8px 0;
  padding: 8px 10px;
  border: 1px solid rgba(140, 165, 215, 0.22);
  border-radius: 10px;
  background: rgba(20, 34, 74, 0.6);
  color: #dfe7ff;
  font-family: Georgia, "Times New Roman", serif;
  text-align: left;
  vertical-align: top;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.mk-slot:hover { border-color: rgba(240, 200, 80, 0.5); background: rgba(30, 48, 96, 0.7); }
/* `:focus-visible` não existe no Chromium do Maxthon, e pseudo-classe
   desconhecida invalida a regra inteira — aqui é `:focus` mesmo. */
.mk-slot:focus { outline: none; box-shadow: 0 0 0 2px rgba(240, 200, 80, 0.45); }
/* escolhido: a borda dourada NÃO é o único sinal — o fundo muda junto, pra
   quem não distingue a cor continuar vendo qual está selecionado */
.mk-slot.is-on {
  border-color: #f0c850;
  background: rgba(240, 200, 80, 0.14);
}
.mk-slot .mk-rosto { margin-right: 10px; }
.mk-slot-txt {
  display: inline-block;
  width: 68%;
  vertical-align: middle;
  min-width: 0;
}
.mk-slot-nome {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-slot-sub {
  display: block; font-size: 11px; color: #7a8aa0; margin-top: 2px;
  /* o motivo por extenso e mais longo que "1 unidade" — sem isto ele quebra em
     duas linhas e estoura a altura travada */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* o rosto e o texto na mesma linha de base dentro da celula de altura fixa */
.mk-slot .mk-rosto { vertical-align: middle; }

@media (max-width: 640px) {
  .mk-slot { width: 100%; margin-right: 0; }
  .mk-mochila { max-height: 220px; }
}