/* MERCADO — aba PERSONAGENS (venda de personagem por R$, 01/11, SQL 2518, opção A do autor).
   Tela: src/ui/mercado-personagens-ui.js. Cartões no mesmo dourado do Mercado; o botão do Pix é o do R$. */
.vp-painel{display:flex;flex-direction:column;gap:10px}
.vp-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin:2px 0 0}
.vp-barra h3{margin:0;font-size:15px;letter-spacing:.04em;color:#f3d27a}
.vp-barra small{display:block;color:#b9c2d0;font-weight:400;letter-spacing:0;margin-top:2px;font-size:13px}
.vp-acoes-topo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vp-como{border:1px solid rgba(95,224,192,.35);border-radius:10px;background:rgba(95,224,192,.06);padding:8px 12px}
.vp-como ol{margin:0;padding-left:18px;font-size:13px;line-height:1.5;color:#dbe3ee}
.vp-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.vp-cartao{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #c9a24a;border-radius:10px;background:linear-gradient(180deg,rgba(40,32,18,.92),rgba(16,18,26,.95));box-shadow:0 0 0 1px rgba(0,0,0,.4) inset;min-width:0}
.vp-topo{display:flex;gap:10px;align-items:center;min-width:0}
.vp-retrato{width:64px;height:64px;flex:0 0 64px;border-radius:8px;border:1px solid rgba(243,210,122,.5);background:#0d1018 center/cover no-repeat}
.vp-nome{font-weight:800;color:#fff;font-size:15px;overflow-wrap:anywhere}
.vp-sub{color:#cfd6e2;font-size:12px}
.vp-chips{display:flex;flex-wrap:wrap;gap:4px}
.vp-chip{font-size:11px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#e7ecf3}
.vp-chip.forte{border-color:#e0a64a;color:#ffd58a}
.vp-chip.vip{border-color:#c084fc;color:#e6c8ff}
.vp-rodape{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.vp-vendedor{font-size:11px;color:#9aa6b8;overflow-wrap:anywhere}
.vp-ficha{align-self:flex-start;padding:4px 10px;font:inherit;font-size:11px;font-weight:800;letter-spacing:.03em;color:#f3d27a;background:rgba(243,210,122,.08);border:1px solid rgba(243,210,122,.55);border-radius:6px;cursor:var(--cur-mao,pointer)}
.vp-ficha:hover{background:rgba(243,210,122,.18)}
.vp-pix{min-width:140px}
.vp-meus{border:1px solid rgba(243,210,122,.35);border-radius:10px;padding:8px;background:rgba(40,32,18,.45);display:flex;flex-direction:column;gap:6px}
.vp-meus-topo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.vp-meu{display:flex;align-items:center;gap:10px}
.vp-meu .vp-retrato{width:44px;height:44px;flex-basis:44px}
.vp-meu-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.vp-status{font-size:11px;font-weight:800;color:#5fe0c0}
.vp-status-vendido,.vp-status-entregando{color:#ffd58a}
.vp-status-cancelado,.vp-status-expirado,.vp-status-devolvido{color:#9aa6b8}
.vp-selo{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.04em;padding:1px 6px;border-radius:4px;background:#5fe0c0;color:#062018;vertical-align:middle}
/* a janela VENDER MEU PERSONAGEM */
.col-dialog-card.vp-venda-dialogo{max-width:560px}
.vp-passo-t{margin:4px 0;color:#cfd6e2;font-size:13px}
.vp-lista{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.vp-linha{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.04);text-align:left;color:inherit;font:inherit;width:100%;cursor:var(--cur-mao,pointer)}
.vp-linha.sel{border-color:#f3d27a;background:rgba(243,210,122,.1)}
.vp-linha.nao{opacity:.55;cursor:not-allowed}
.vp-linha .vp-retrato{width:44px;height:44px;flex-basis:44px}
.vp-linha-txt{display:flex;flex-direction:column;min-width:0}
.vp-mot{font-size:11px;color:#ffb4a8}
.vp-ok{font-size:11px;color:#9ad7b8}
.vp-preco{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}
.vp-preco input{width:120px;font-size:16px;padding:6px 8px;border-radius:6px;border:1px solid #c9a24a;background:#0d1018;color:#fff}
.vp-recebe{font-size:13px;color:#9ad7b8}
.vp-regras{margin:6px 0 0;padding-left:18px;font-size:12px;color:#cfd6e2;line-height:1.45}
@media (max-width:600px){.vp-grade{grid-template-columns:1fr}.vp-pix{min-width:120px}.vp-barra .buy{width:100%}}