/*
 * Fórum da E4T — base visual (cores, tipografia, medidas). Usado pelo fórum E pelo painel de controle.
 *
 * As cores seguem o tema padrão do Invision Community 5: uma cor "base" (tom 260, azulado) gera 6 tons de
 * fundo (--base-1..6) e 6 tons de texto (--contraste-1..6) pela fórmula OKLCH; trocar --base-h, --primaria
 * ou --secundaria muda o fórum inteiro. Claro/escuro: atributo data-esquema="claro|escuro" no <html>.
 * Regra da casa: nos outros arquivos, use só estas variáveis (nada de cor solta).
 */

/* ---------- Ajustes do tema (o futuro editor de tema muda só isto) ---------- */
:root {
  --claro-primaria: hsl(220 85% 50%);
  --claro-secundaria: hsl(220 49% 13%);
  --claro-base-l: 100;
  --claro-base-c: 30;
  --claro-base-h: 260;
  --escuro-primaria: hsl(215 85% 50%);
  --escuro-secundaria: hsl(215 18% 26%);
  --escuro-base-l: 30;
  --escuro-base-c: 20;
  --escuro-base-h: 260;

  --tam-fonte: 14;                 /* px: tamanho base do texto (o Invision usa 14) */
  --tam-conteudo: 1.1em;           /* texto dos posts (110%) */
  --largura-max: 1500px;
  --largura-lateral: 350px;
  --raio-design: 8px;
  --borda-design: 1px;
  --sombra-design: 2;              /* 0 a 6 */
  --raio-avatar: calc(50% + 3px);  /* avatares redondos; troque para 6px para quadrados */
  --altura-cabecalho: 100px;
  --altura-cabecalho-2: 50px;
  --altura-cabecalho-movel: 60px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fonte-codigo: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --fonte-icones: "Font Awesome 6 Free";
}

/* ---------- Tons gerados (claro) ---------- */
:root, [data-esquema="claro"] {
  color-scheme: light;
  --primaria: var(--claro-primaria);
  --secundaria: var(--claro-secundaria);
  --b-l: calc(var(--claro-base-l) / 100);
  --b-c: calc(var(--claro-base-c) / 100);
  --b-h: var(--claro-base-h);
  --b-c-escuro: calc(var(--b-c) * 100 / 30);
  --b-c-claro: calc(var(--b-c-escuro) * var(--b-l));
  --base-1: oklch(calc(80% + 20% * var(--b-l)) calc(5% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --base-2: oklch(calc(77% + 22% * var(--b-l)) calc(6% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --base-3: oklch(calc(73% + 23% * var(--b-l)) calc(7% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --base-4: oklch(calc(68% + 21% * var(--b-l)) calc(9% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --base-5: oklch(calc(65% + 22% * var(--b-l)) calc(12% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --base-6: oklch(calc(60% + 20% * var(--b-l)) calc(14% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --contraste-1: oklch(calc(40% + 10% * var(--b-l)) calc(var(--b-c) * 46%) var(--b-h));
  --contraste-2: oklch(calc(37% + 9% * var(--b-l)) calc(var(--b-c) * 46%) var(--b-h));
  --contraste-3: oklch(calc(34% + 9% * var(--b-l)) calc(var(--b-c) * 41%) var(--b-h));
  --contraste-4: oklch(calc(28% + 5% * var(--b-l)) calc(var(--b-c) * 36%) var(--b-h));
  --contraste-5: oklch(calc(21% + 5% * var(--b-l)) calc(var(--b-c) * 27%) var(--b-h));
  --contraste-6: oklch(15% calc(var(--b-c) * 17%) var(--b-h));

  --cor-texto: var(--contraste-3);
  --cor-suave: var(--contraste-1);
  --cor-forte: var(--contraste-6);
  --cor-link: var(--contraste-6);
  --fundo-corpo: var(--base-3);
  --fundo-caixa: var(--base-1);
  --borda-caixa: var(--base-4);
  --cab1-fundo: var(--contraste-4);
  --cab1-texto: var(--base-1);
  --cab2-fundo: var(--contraste-5);
  --cab2-texto: var(--base-1);
  --cabmovel-fundo: var(--base-1);
  --cabmovel-texto: var(--contraste-5);
  --rodape-fundo: var(--contraste-4);
  --rodape-texto: var(--base-4);

  --positivo: hsl(120 82% 36%);
  --positivo-suave: hsl(120 64% 96%);
  --negativo: hsl(0 65% 50%);
  --negativo-suave: hsl(0 72% 95%);
  --alerta: hsl(24 95% 32%);
  --alerta-suave: hsl(40 90% 94%);
  --moderado: hsl(0 50% 30%);
  --fundo-moderado: hsl(0 50% 95%);
  --fundo-entrada: var(--fundo-1);
  --sombra-caixa: oklch(10% calc(var(--b-c) * 20%) var(--b-h) / min(.15, calc(var(--sombra-design) * .025))) 0px calc(5px + var(--sombra-design) * 1px) calc(10px + var(--sombra-design) * 3px) calc(var(--sombra-design) * -1px);
  --sombra-menu: hsl(0 0% 0% / 12%) 0 0 0 1px, hsl(0 0% 0% / .25) 0 20px 50px, hsl(0 0% 0% / .2) 0 13px 13px -13px;
  --fundo-menu: var(--fundo-1);
  --fundo-dica: oklch(10% calc(var(--b-c) * 30%) var(--b-h) / 85%);
}

/* ---------- Tons gerados (escuro) ---------- */
[data-esquema="escuro"] {
  color-scheme: dark;
  --primaria: var(--escuro-primaria);
  --secundaria: var(--escuro-secundaria);
  --b-l: calc(var(--escuro-base-l) / 100);
  --b-c: calc(var(--escuro-base-c) / 100);
  --b-h: var(--escuro-base-h);
  --base-1: oklch(calc(15% + 15% * var(--b-l)) calc(var(--b-c) * 1.75% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --base-2: oklch(calc(19% + 19% * var(--b-l)) calc(var(--b-c) * 3% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --base-3: oklch(calc(23% + 23% * var(--b-l)) calc(var(--b-c) * 4% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --base-4: oklch(calc(27% + 27% * var(--b-l)) calc(var(--b-c) * 4.75% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --base-5: oklch(calc(31% + 31% * var(--b-l)) calc(var(--b-c) * 6% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --base-6: oklch(calc(34% + 34% * var(--b-l)) calc(var(--b-c) * 6.75% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --contraste-1: oklch(calc(50% + 20% * var(--b-l)) calc(var(--b-c) * 9% * 4) var(--b-h));
  --contraste-2: oklch(calc(60% + 15% * var(--b-l)) calc(var(--b-c) * 6.75% * 4) var(--b-h));
  --contraste-3: oklch(calc(70% + 10% * var(--b-l)) calc(var(--b-c) * 5% * 4) var(--b-h));
  --contraste-4: oklch(calc(80% + 5% * var(--b-l)) calc(var(--b-c) * 3.5% * 4) var(--b-h));
  --contraste-5: oklch(calc(90% + 3% * var(--b-l)) calc(var(--b-c) * 1.75% * 4) var(--b-h));
  --contraste-6: oklch(100% 0% var(--b-h));

  --cor-texto: var(--contraste-4);
  --cor-suave: var(--contraste-2);
  --cor-forte: var(--contraste-6);
  --cor-link: var(--contraste-6);
  --fundo-corpo: var(--base-1);
  --fundo-caixa: var(--base-2);
  --borda-caixa: var(--base-3);
  --cab1-fundo: var(--base-3);
  --cab1-texto: var(--contraste-6);
  --cab2-fundo: var(--base-4);
  --cab2-texto: var(--contraste-5);
  --cabmovel-fundo: var(--base-2);
  --cabmovel-texto: var(--contraste-5);
  --rodape-fundo: var(--base-2);
  --rodape-texto: var(--contraste-4);

  --positivo: hsl(150 60% 45%);
  --positivo-suave: hsl(150 72% 15%);
  --negativo: hsl(0 65% 63%);
  --negativo-suave: hsl(0 72% 15%);
  --alerta: hsl(27 80% 63%);
  --alerta-suave: hsl(30 40% 16%);
  --moderado: hsl(350 30% 85%);
  --fundo-moderado: hsl(350 23% 20%);
  --fundo-entrada: var(--fundo-4);
  --sombra-menu: inset hsl(0 0% 100% / 10%) 0 0 0 1px, hsl(0 0% 0% / 90%) 0 0 0 1px, hsl(0 0% 0% / 60%) 0 20px 100px;
  --fundo-menu: var(--fundo-3);
  --fundo-dica: oklch(50% calc(var(--b-c) * 1%) var(--b-h) / 85%);
}

/* ---------- Tons derivados (iguais nos dois esquemas) ---------- */
:root, [data-esquema] {
  --fundo-1: var(--fundo-caixa);
  --fundo-2: color-mix(in oklch, var(--fundo-caixa), var(--base-6) 10%);
  --fundo-3: color-mix(in oklch, var(--fundo-caixa), var(--base-6) 32%);
  --fundo-4: color-mix(in oklch, var(--fundo-caixa), var(--base-6) 50%);
  --fundo-5: color-mix(in oklch, var(--fundo-caixa), var(--base-6) 80%);
  --fundo-6: var(--base-6);
  --fundo-hover: color-mix(in srgb, var(--cor-texto) 6%, transparent);
  --cor-primaria: var(--primaria);
  --texto-sobre-primaria: #fff;
  --texto-sobre-secundaria: #fff;
  --primaria-escura: color-mix(in srgb, var(--primaria), black 20%);
  --primaria-clara: color-mix(in srgb, var(--primaria), white 20%);
  --rem: calc(1rem / 16 * var(--tam-fonte));
  --esp-1: calc(var(--rem) * .5);
  --esp-2: var(--rem);
  --esp-3: calc(var(--rem) * 2);
  --esp-4: calc(var(--rem) * 3.5);
  --esp-bloco: calc(var(--rem) * 1.5);
  --margem-lateral: clamp(15px, 3vw, 40px);
  --raio-pequeno: min(var(--raio-design), 6px);
}
[data-esquema="escuro"] { --cor-primaria: oklch(from var(--primaria) max(l, .7) c h); }
[data-esquema="claro"], :root { --cor-primaria-texto: oklch(from var(--primaria) min(l, .5) c h); }
[data-esquema="escuro"] { --cor-primaria-texto: oklch(from var(--primaria) max(l, .7) c h); }

/* ---------- Reset ---------- */
*, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; accent-color: var(--primaria); }
img, svg, video { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
h1, h2, h3, h4, h5, h6 { font: inherit; }
b, strong { font-weight: bolder; }
ul, ol, menu { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
input, textarea, select, button { font: inherit; color: inherit; background: none; border: 0; line-height: inherit; }
button, [type="submit"], summary, label[for] { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
textarea { display: block; width: 100%; resize: vertical; }
:focus { outline-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
[hidden] { display: none !important; }
::placeholder { color: inherit; opacity: .55; }

body {
  font-family: var(--fonte);
  font-size: var(--rem);
  line-height: 1.5;
  color: var(--cor-texto);
  background: var(--fundo-corpo);
  min-height: 100vh;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cor-link); text-decoration: none; }
a:hover { color: var(--cor-primaria-texto); }
code, kbd, pre { font-family: var(--fonte-codigo); font-size: .92em; }
::selection { background: color-mix(in srgb, var(--primaria) 30%, transparent); }

.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular-conteudo { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--primaria); color: #fff; padding: .8em 1.2em; border-radius: 0 0 6px 0; }
.pular-conteudo:focus { left: 0; color: #fff; }

/* ---------- Botões ---------- */
.botao {
  --b-fundo: transparent;
  --b-texto: var(--cor-texto);
  --b-borda: transparent;
  --b-hover: color-mix(in srgb, var(--b-fundo), #fff 15%);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .7em 1.2em; border-radius: 8px; border: 1px solid var(--b-borda);
  background: var(--b-fundo); color: var(--b-texto);
  font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
  user-select: none; -webkit-user-select: none; position: relative;
}
.botao:hover { background: var(--b-hover); color: var(--b-texto); }
.botao:active { transform: translateY(1px); }
.botao[disabled], .botao.desativado { opacity: .5; pointer-events: none; }
.botao--primario { --b-fundo: var(--primaria); --b-texto: var(--texto-sobre-primaria); }
.botao--secundario { --b-fundo: var(--secundaria); --b-texto: var(--texto-sobre-secundaria); }
.botao--suave {
  --b-fundo: var(--fundo-1); --b-texto: var(--cor-texto);
  --b-borda: color-mix(in srgb, var(--cor-texto) 20%, transparent);
  --b-hover: color-mix(in srgb, var(--cor-texto) 4%, var(--fundo-1));
  box-shadow: hsl(0 0% 0% / .06) 0 2px 3px; background-clip: padding-box;
}
.botao--herdar {
  --b-texto: currentColor;
  --b-fundo: color-mix(in srgb, currentColor 10%, transparent);
  --b-hover: color-mix(in srgb, currentColor 16%, transparent);
}
.botao--perigo { --b-fundo: var(--negativo); --b-texto: #fff; }
.botao--texto { --b-texto: var(--cor-suave); padding-inline: .6em; --b-hover: var(--fundo-hover); }
.botao--pequeno { font-size: .88em; padding: .5em .9em; border-radius: 6px; }
.botao--grande { font-size: 1.08em; padding: .9em 1.5em; }
.botao--largo { width: 100%; }
.botao .fa-solid, .botao .fa-regular { font-size: .95em; }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }

/* ---------- Formulários ---------- */
.entrada, .selecao, textarea.entrada {
  width: 100%; display: block;
  padding: .7em 1em; border-radius: min(var(--raio-design), .4em);
  border: 1px solid color-mix(in srgb, var(--cor-texto) 30%, transparent);
  background: var(--fundo-entrada); color: var(--cor-forte);
  box-shadow: hsl(0 0% 0% / .06) 0 2px 1px inset;
  transition: border-color .15s, box-shadow .15s;
}
.entrada:hover, .selecao:hover { border-color: color-mix(in srgb, var(--cor-texto) 60%, transparent); }
.entrada:focus, .selecao:focus { border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 22%, transparent); outline: none; }
.entrada--erro { border-color: var(--negativo) !important; }
.selecao {
  appearance: none; -webkit-appearance: none; padding-inline-end: 2.4em; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.2em) 55%, calc(100% - .85em) 55%;
  background-size: .35em .35em, .35em .35em; background-repeat: no-repeat;
}
.entrada--curta { max-width: 12em; }
.entrada--cor { padding: .2em; height: 2.6em; width: 4em; cursor: pointer; }
.caixa-marcar { display: inline-flex; align-items: flex-start; gap: .6em; cursor: pointer; line-height: 1.4; }
.caixa-marcar input { width: 1.15em; height: 1.15em; margin-top: .1em; flex: 0 0 auto; }

.formulario { display: grid; gap: 1.4em; }
.campo { display: grid; gap: .45em; }
.campo__rotulo { font-weight: 600; color: var(--cor-forte); }
.campo__rotulo .obrigatorio { color: var(--negativo); margin-left: .2em; }
.campo__ajuda { color: var(--cor-suave); font-size: .92em; }
.campo__erro { color: var(--negativo); font-size: .92em; font-weight: 500; display: flex; gap: .4em; align-items: baseline; }
.campo__erro::before { content: "\f06a"; font-family: var(--fonte-icones); font-weight: 900; }

/* Formulário em linhas (rótulo à esquerda), como o painel do Invision */
.form-linhas { display: grid; }
.form-linha { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: .5em 2em; padding: 1.2em var(--esp-bloco); border-bottom: 1px solid var(--fundo-3); }
.form-linha:last-child { border-bottom: 0; }
.form-linha > .campo__rotulo { padding-top: .6em; }
.form-linha__campo { display: grid; gap: .45em; max-width: 640px; }
.form-secao { padding: .9em var(--esp-bloco); background: var(--fundo-2); border-bottom: 1px solid var(--fundo-3); font-weight: 600; color: var(--cor-forte); font-size: 1.05em; }
.form-rodape { padding: 1.2em var(--esp-bloco); border-top: 1px solid var(--fundo-3); background: var(--fundo-2); display: flex; gap: .6em; justify-content: center; border-radius: 0 0 var(--raio-design) var(--raio-design); }
@media (max-width: 760px) {
  .form-linha { grid-template-columns: minmax(0, 1fr); }
  .form-linha > .campo__rotulo { padding-top: 0; }
}

/* ---------- Caixas ---------- */
/* Símbolo da E4T no lugar do ícone (1.0.2): SVG embutido; o tema pode trocar as cores pelas variáveis. */
.logo__icone--e4t { background: none; padding: 0; overflow: hidden; }
.logo-e4t { display: block; width: 100%; height: 100%; }
.logo-e4t__fundo { fill: var(--logo-e4t-cor, #2f006b); }
.logo-e4t__placa { fill: var(--logo-e4t-placa, #fff); }

.caixa {
  background: var(--fundo-caixa);
  border: var(--borda-design) solid var(--borda-caixa);
  border-radius: var(--raio-design);
  box-shadow: var(--sombra-caixa);
}
.caixa__cabecalho {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6em 1em;
  padding: 1em 1.2em; font-size: 1.4em; font-weight: 600; color: var(--cor-forte);
  border-bottom: 1px solid var(--fundo-4);
  border-radius: calc(var(--raio-design) - 1px) calc(var(--raio-design) - 1px) 0 0;
}
.caixa__cabecalho a { color: inherit; }
.caixa__cabecalho-extra { margin-inline-start: auto; font-size: var(--rem); font-weight: 500; }
.caixa__corpo { padding: var(--esp-bloco); }
.caixa__rodape { padding: 1em var(--esp-bloco); border-top: 1px solid var(--fundo-3); }
.caixa + .caixa { margin-top: var(--esp-bloco); }

/* ---------- Avisos ---------- */
.aviso {
  display: flex; gap: .8em; align-items: flex-start;
  padding: 1em 1.2em; border-radius: var(--raio-design);
  background: var(--fundo-2); color: var(--cor-forte); border: 1px solid var(--fundo-4);
  line-height: 1.5;
}
.aviso::before { font-family: var(--fonte-icones); font-weight: 900; content: "\f05a"; font-size: 1.1em; line-height: 1.4; }
.aviso--sucesso { background: var(--positivo-suave); border-color: color-mix(in srgb, var(--positivo) 35%, transparent); }
.aviso--sucesso::before { content: "\f058"; color: var(--positivo); }
.aviso--erro { background: var(--negativo-suave); border-color: color-mix(in srgb, var(--negativo) 35%, transparent); }
.aviso--erro::before { content: "\f071"; color: var(--negativo); }
.aviso--alerta { background: var(--alerta-suave); border-color: color-mix(in srgb, var(--alerta) 35%, transparent); }
.aviso--alerta::before { content: "\f071"; color: var(--alerta); }
.aviso--info::before { color: var(--cor-primaria-texto); }
/* 1.0.11: aviso com ícone próprio (<i> no começo) não mostra também o ícone padrão (antes apareciam dois); e o texto
   fica num <span>/<div> só: soltos, cada pedaço (texto, negrito, link) virava uma coluna estreita. */
.aviso:has(> i:first-child)::before { content: none; }
.aviso > i:first-child { flex: none; font-size: 1.1em; line-height: 1.4; }
.aviso--info > i:first-child { color: var(--cor-primaria-texto); }
.aviso > form, .aviso > .botao { flex: none; margin-left: auto; } /* botão dentro do aviso não encolhe (1.0.14) */
.aviso > span, .aviso > div { min-width: 0; }
.aviso-flutuante { position: fixed; z-index: 50; left: 50%; top: 1em; transform: translateX(-50%); width: min(560px, calc(100vw - 2em)); box-shadow: var(--sombra-menu); animation: aviso-entra .35s ease-out; }
.aviso-flutuante.saindo { animation: aviso-sai .3s ease-in forwards; }
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, -12px); } }
@keyframes aviso-sai { to { opacity: 0; transform: translate(-50%, -12px); } }

/* ---------- Selos (badges) ---------- */
.selo {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: max(.78em, 11px); font-weight: 600; line-height: 1.6;
  padding: 0 .6em; border-radius: 4px; vertical-align: middle; white-space: nowrap;
  background: var(--fundo-3); color: var(--cor-forte);
}
.selo--positivo { background: var(--positivo); color: #fff; }
.selo--negativo { background: var(--negativo); color: #fff; }
.selo--primario { background: var(--primaria); color: #fff; }
.selo--alerta { background: var(--alerta); color: #fff; }
.selo--oculto { background: var(--fundo-moderado); color: var(--moderado); }
.selo-icone { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-size: .78em; background: var(--fundo-3); color: var(--cor-forte); }
.selo-icone--fixado { background: var(--positivo); color: #fff; }
.selo-icone--trancado { background: var(--fundo-6); color: #fff; }
.selo-icone--oculto { background: var(--negativo); color: #fff; }

/* ---------- Avatares ---------- */
.avatar {
  --tam: 40px;
  width: var(--tam); height: var(--tam); flex: 0 0 auto;
  border-radius: var(--raio-avatar); object-fit: cover; display: inline-grid; place-items: center;
  background: var(--fundo-3); overflow: hidden; vertical-align: middle;
  font-size: calc(var(--tam) * .45); font-weight: 600; color: #fff; text-transform: uppercase; line-height: 1;
}
.avatar--mini { --tam: 24px; }
.link-avatar { flex: 0 0 auto; } /* a foto nunca encolhe numa linha flexível */
.avatar--p { --tam: 32px; }
.avatar--m { --tam: 48px; }
.avatar--g { --tam: 90px; }
.avatar--gg { --tam: 130px; }
.avatar--letra.c0 { background: #d6455b; } .avatar--letra.c1 { background: #c2410c; } .avatar--letra.c2 { background: #a16207; }
.avatar--letra.c3 { background: #4d7c0f; } .avatar--letra.c4 { background: #15803d; } .avatar--letra.c5 { background: #0f766e; }
.avatar--letra.c6 { background: #0e7490; } .avatar--letra.c7 { background: #1d4ed8; } .avatar--letra.c8 { background: #4338ca; }
.avatar--letra.c9 { background: #7e22ce; } .avatar--letra.c10 { background: #a21caf; } .avatar--letra.c11 { background: #be185d; }

/* Nome colorido pelo grupo */
.nome-grupo { font-weight: 600; }
.cor-grupo { color: var(--cor-grupo, inherit); }

/* ---------- Tabelas ---------- */
.tabela { width: 100%; }
.tabela th { text-align: left; font-weight: 600; color: var(--cor-suave); font-size: .85em; text-transform: uppercase; letter-spacing: .02em; padding: .9em 1em; border-bottom: 1px solid var(--fundo-4); background: var(--fundo-2); white-space: nowrap; }
.tabela td { padding: .85em 1em; border-bottom: 1px solid var(--fundo-3); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--fundo-hover); }
.tabela .direita { text-align: right; }
.tabela .centro { text-align: center; }
.rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Menus suspensos ---------- */
.menu-ancora { position: relative; display: inline-block; }
.menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 220px;
  background: var(--fundo-menu); color: var(--cor-texto); border-radius: var(--raio-design);
  box-shadow: var(--sombra-menu); padding: .4em; display: none;
  font-size: var(--rem); font-weight: 400; text-transform: none; letter-spacing: 0; text-align: left;
  animation: menu-abre .15s ease-out;
}
.menu--esquerda { right: auto; left: 0; }
.menu--rolavel { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; } /* 1.0.11 */
.menu--abre-direita { right: auto; left: 0; } /* 1.0.11: posto pelo forum.js (alinharMenu) */
.menu.aberto { display: block; }
@keyframes menu-abre { from { opacity: 0; transform: translateY(-4px); } }
.menu__item, .menu form button {
  display: flex; align-items: center; gap: .7em; width: 100%;
  padding: .6em .9em; border-radius: 5px; color: var(--cor-texto); text-align: left; white-space: nowrap;
}
.menu__item:hover, .menu form button:hover { background: var(--fundo-hover); color: var(--cor-forte); }
.menu__item i, .menu form button i { width: 1.2em; text-align: center; opacity: .75; }
.menu__titulo { padding: .6em .9em .3em; font-size: .78em; font-weight: 700; text-transform: uppercase; color: var(--cor-suave); letter-spacing: .03em; }
.menu__separador { height: 1px; background: var(--fundo-4); margin: .4em 0; }
.menu__perigo, .menu form button.menu__perigo { color: var(--negativo); }

/* ---------- Diálogos ---------- */
.dialogo {
  border: 0; padding: 0; margin: auto; max-width: min(560px, calc(100vw - 2em)); width: 100%;
  background: var(--fundo-caixa); color: var(--cor-texto); border-radius: var(--raio-design);
  box-shadow: 0 5px 55px hsl(0 0% 0% / 40%), 0 7px 24px -12px hsl(0 0% 0% / 70%);
}
.dialogo::backdrop { background: hsl(0 0% 0% / .5); backdrop-filter: blur(2px); }
.dialogo[open] { animation: dialogo-abre .2s ease-out; }
@keyframes dialogo-abre { from { opacity: 0; transform: scale(.96); } }
.dialogo__cabecalho { display: flex; align-items: center; padding: 1em 1.2em; font-size: 1.2em; font-weight: 600; color: var(--cor-forte); border-bottom: 1px solid var(--fundo-4); }
.dialogo__fechar { margin-left: auto; font-size: 1.1em; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; color: var(--cor-suave); }
.dialogo__fechar:hover { background: var(--fundo-hover); }
.dialogo__corpo { padding: 1.2em; max-height: 70vh; overflow: auto; }
.dialogo__rodape { padding: 1em 1.2em; border-top: 1px solid var(--fundo-3); display: flex; justify-content: flex-end; gap: .5em; background: var(--fundo-2); border-radius: 0 0 var(--raio-design) var(--raio-design); }

/* ---------- Dicas (tooltips) ---------- */
[data-dica] { position: relative; }
[data-dica]:hover::after, [data-dica]:focus-visible::after {
  content: attr(data-dica); position: absolute; z-index: 40; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: var(--fundo-dica); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.3; padding: .45em .7em; border-radius: 5px;
  white-space: nowrap; pointer-events: none; text-transform: none; letter-spacing: 0; backdrop-filter: blur(4px);
}

/* ---------- Utilidades ---------- */
.suave { color: var(--cor-suave); }
.forte { color: var(--cor-forte); }
.pequeno { font-size: .88em; }
.texto-perigo { --b-texto: var(--negativo); color: var(--negativo); }
.texto-alerta { color: var(--alerta); }
.negrito { font-weight: 600; }
.centro { text-align: center; }
.flex { display: flex; align-items: center; gap: .6em; }
.flex-quebra { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.empurra { margin-left: auto; }
.mt-1 { margin-top: var(--esp-1); } .mt-2 { margin-top: var(--esp-2); } .mt-3 { margin-top: var(--esp-3); }
.mb-2 { margin-bottom: var(--esp-2); }
.vazio { padding: 3em 1.5em; text-align: center; color: var(--cor-suave); }
.vazio i { font-size: 2.6em; opacity: .35; display: block; margin-bottom: .4em; }
.cortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empilha > * + * { margin-top: var(--esp-bloco); }

/* ---------- Prefixos dos tópicos (fórum e painel) ---------- */
.prefixo { display: inline-flex; align-items: center; font-size: max(.72em, 11px); font-weight: 600; line-height: 1.7; padding: 0 .55em; border-radius: 4px; white-space: nowrap; vertical-align: middle; color: #fff; background: var(--primaria); }
a.prefixo:hover { color: #fff; filter: brightness(1.08); }
.titulo-pagina h1 .prefixo { font-size: 13px; vertical-align: .35em; }
.prefixo--primario { background: var(--primaria); }
.prefixo--cinza { background: hsl(220 9% 46%); }
.prefixo--vermelho { background: hsl(0 72% 47%); }
.prefixo--laranja { background: hsl(25 90% 47%); }
.prefixo--amarelo { background: hsl(45 95% 52%); color: hsl(40 60% 14%); }
a.prefixo--amarelo:hover { color: hsl(40 60% 14%); }
.prefixo--oliva { background: hsl(70 45% 36%); }
.prefixo--verde { background: hsl(140 60% 34%); }
.prefixo--verde-claro { background: hsl(100 50% 82%); color: hsl(110 50% 18%); }
a.prefixo--verde-claro:hover { color: hsl(110 50% 18%); }
.prefixo--azul-claro { background: hsl(200 85% 85%); color: hsl(205 70% 22%); }
a.prefixo--azul-claro:hover { color: hsl(205 70% 22%); }
.prefixo--azul { background: hsl(210 80% 48%); }
.prefixo--azul-escuro { background: hsl(225 70% 40%); }
.prefixo--roxo { background: hsl(270 55% 50%); }
.prefixo--rosa { background: hsl(330 70% 52%); }
.prefixo--destaque { background: hsl(18 95% 50%); }

/* ---------- Tags dos tópicos (fórum e painel) ---------- */
.tags { display: flex; flex-wrap: wrap; gap: .35em; list-style: none; margin: .4em 0 0; padding: 0; }
.tag { display: inline-flex; align-items: center; gap: .35em; padding: .15em .6em; border-radius: 99px; background: var(--fundo-3); color: var(--cor-texto); font-size: .85em; font-weight: 500; }
.tag i { font-size: .8em; opacity: .6; }
.tag:hover { background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--cor-primaria-texto); }
.tags--pequenas { margin-top: .15em; }
.tags--pequenas .tag { font-size: .78em; padding: .05em .55em; }

/* ---------- Anúncios do topo (Announcements) ---------- */
.anuncios { display: grid; gap: .6em; margin-bottom: var(--esp-2); }
.anuncio {
  --a-fundo: color-mix(in srgb, var(--primaria) 9%, var(--fundo-caixa)); --a-borda: color-mix(in srgb, var(--primaria) 30%, transparent);
  --a-texto: var(--cor-forte); --a-icone: var(--primaria);
  display: flex; align-items: flex-start; gap: 1em; padding: 1em 1.2em; overflow: hidden;
  border: 1px solid var(--a-borda); border-radius: var(--raio-design); background: var(--a-fundo); color: var(--a-texto);
  box-shadow: var(--sombra-caixa); animation: anuncio-entra .4s cubic-bezier(.2, .7, .2, 1) both;
  transition: height .35s ease, opacity .25s ease, transform .35s ease, padding .35s ease, margin .35s ease;
}
.anuncio--sucesso { --a-fundo: var(--positivo-suave); --a-borda: color-mix(in srgb, var(--positivo) 35%, transparent); --a-icone: var(--positivo); }
.anuncio--alerta { --a-fundo: var(--alerta-suave); --a-borda: color-mix(in srgb, var(--alerta) 35%, transparent); --a-icone: var(--alerta); }
.anuncio--erro { --a-fundo: var(--negativo-suave); --a-borda: color-mix(in srgb, var(--negativo) 35%, transparent); --a-icone: var(--negativo); }
.anuncio--neutro { --a-fundo: var(--fundo-caixa); --a-borda: var(--borda-caixa); --a-icone: var(--cor-suave); --a-texto: var(--cor-texto); }
.anuncio--destaque { --a-fundo: linear-gradient(120deg, var(--primaria), color-mix(in oklch, var(--primaria), hsl(280 80% 55%) 45%)); --a-borda: transparent; --a-texto: #fff; --a-icone: #fff; }
.anuncio--escuro { --a-fundo: var(--secundaria); --a-borda: transparent; --a-texto: #fff; --a-icone: hsl(45 100% 65%); }
.anuncio__icone { font-size: 1.35em; color: var(--a-icone); margin-top: .1em; flex: 0 0 auto; }
.anuncio__corpo { flex: 1 1 auto; min-width: 0; }
.anuncio__titulo { display: block; font-weight: 700; font-size: 1.05em; margin-bottom: .2em; }
.anuncio .anuncio__texto, .anuncio .anuncio__texto a { color: inherit; } /* .texto-rico (forum.css) vem depois e pintaria o texto */
.anuncio .anuncio__texto a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); font-weight: 600; }
.anuncio .anuncio__texto a:hover { text-decoration-color: currentColor; }
.anuncio__fechar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: inherit; opacity: .65; transition: opacity .15s, background-color .15s, transform .15s; }
.anuncio__fechar:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); transform: rotate(90deg); }
.anuncio--saindo { opacity: 0; transform: translateX(24px); padding-block: 0; margin-block: -.3em; border-width: 0; }
@keyframes anuncio-entra { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Conquistas: medalhas e níveis (desenho próprio; a paleta abaixo é a única cor solta, como a dos avatares) ---------- */
.cor-conquista-bronze { --cq1: #f0b27a; --cq2: #8c4a1c; }
.cor-conquista-prata { --cq1: #f1f5f9; --cq2: #7b8a99; }
.cor-conquista-ouro { --cq1: #ffe58a; --cq2: #c07f00; }
.cor-conquista-azul { --cq1: #7cb4ff; --cq2: #1d4ed8; }
.cor-conquista-verde { --cq1: #7be29a; --cq2: #15803d; }
.cor-conquista-ciano { --cq1: #7deaf8; --cq2: #0e7490; }
.cor-conquista-roxo { --cq1: #c9a8ff; --cq2: #6d28d9; }
.cor-conquista-rosa { --cq1: #ffa3d1; --cq2: #be185d; }
.cor-conquista-vermelho { --cq1: #ff9a9a; --cq2: #b91c1c; }
.cor-conquista-laranja { --cq1: #ffc27d; --cq2: #c2410c; }
.cor-conquista-cinza { --cq1: #d5dbe2; --cq2: #56616d; }
.cor-conquista-escuro { --cq1: #7b8494; --cq2: #111827; }
.medalha { --tam: 40px; position: relative; display: inline-grid; place-items: center; width: var(--tam); height: var(--tam); flex: 0 0 auto; vertical-align: middle; }
.medalha--p { --tam: 24px; } .medalha--m { --tam: 40px; } .medalha--g { --tam: 64px; } .medalha--gg { --tam: 96px; }
.medalha__forma {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: linear-gradient(145deg, var(--cq1) 0%, var(--cq2) 75%);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1.4);
  z-index: 1;
}
.medalha__forma::before {
  content: ""; position: absolute; inset: 9%; clip-path: inherit;
  background: var(--cq-fundo, linear-gradient(330deg, var(--cq1), var(--cq2) 70%)); opacity: .9;
}
.medalha__forma::after {
  content: ""; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, hsl(0 0% 100% / .55) 50%, transparent 60%);
  transform: translateX(-60%); transition: transform .6s ease;
}
.medalha__forma i { position: relative; z-index: 1; color: var(--cq-icone, #fff); font-size: calc(var(--tam) * .38); filter: drop-shadow(0 1px 1px hsl(0 0% 0% / .45)); }
.medalha:hover .medalha__forma { transform: scale(1.08) rotate(-4deg); }
.medalha:hover .medalha__forma::after { transform: translateX(60%); }
/* 1.0.37: só as imagens giram e têm sombra — no <span> inteiro, a dica (::after) girava junto e ficava borrada */
.medalha--imagem:hover .medalha__img, .medalha--imagem:hover .medalha__reflexo { transform: scale(1.08) rotate(-4deg); }

/* 1.0.18: formatos e efeitos das medalhas desenhadas; imagem (insígnias do XenForo e enviadas) com dica e brilho */
.medalha--escudo .medalha__forma { clip-path: polygon(50% 0, 92% 12%, 92% 52%, 82% 75%, 50% 100%, 18% 75%, 8% 52%, 8% 12%); }
.medalha--circulo .medalha__forma { clip-path: circle(48% at 50% 50%); }
.medalha--losango .medalha__forma { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.medalha--losango .medalha__forma i { font-size: calc(var(--tam) * .32); }
.medalha--estrela .medalha__forma { clip-path: polygon(50% 0, 62% 33%, 98% 36%, 70% 58%, 80% 94%, 50% 74%, 20% 94%, 30% 58%, 2% 36%, 38% 33%); }
.medalha--estrela .medalha__forma i { font-size: calc(var(--tam) * .26); transform: translateY(8%); }
.medalha--efeito-brilho .medalha__forma::after { animation: medalha-brilho 4.5s ease-in-out infinite; }
.medalha--efeito-pulsar { animation: medalha-pulsar 2.4s ease-in-out infinite; }
.medalha--efeito-arco_iris .medalha__forma, .medalha--efeito-arco_iris .medalha__img { animation: medalha-arco 7s linear infinite; }
@keyframes medalha-brilho { 0%, 62% { transform: translateX(-60%); } 82%, 100% { transform: translateX(60%); } }
@keyframes medalha-pulsar { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 calc(var(--tam) * .14) var(--cq1, hsl(45 100% 60%))); } }
@keyframes medalha-arco { to { filter: hue-rotate(360deg); } }
.medalha--imagem .medalha__img { filter: drop-shadow(0 2px 3px hsl(0 0% 0% / .25)); transition: transform .2s; }
.medalha--imagem img { width: 100%; height: 100%; object-fit: contain; display: block; }
.medalha__reflexo { position: absolute; inset: 0; pointer-events: none; opacity: 0; filter: brightness(2.4) saturate(.5);
  -webkit-mask-image: linear-gradient(115deg, transparent 40%, #000 50%, transparent 60%); mask-image: linear-gradient(115deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position .7s ease, mask-position .7s ease, opacity .25s, transform .2s; }
.medalha--imagem:hover .medalha__reflexo { opacity: .8; -webkit-mask-position: 0 0; mask-position: 0 0; }
.medalha--imagem.medalha--efeito-brilho .medalha__reflexo { animation: medalha-reflexo 4.5s ease-in-out infinite; }
@keyframes medalha-reflexo { 0%, 62% { opacity: .8; -webkit-mask-position: 100% 0; mask-position: 100% 0; } 82%, 100% { opacity: .8; -webkit-mask-position: 0 0; mask-position: 0 0; } }
.nivel-selo--imagem img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) {
  .medalha--efeito-brilho .medalha__forma::after, .medalha--efeito-pulsar, .medalha--efeito-arco_iris .medalha__forma, .medalha--efeito-arco_iris .medalha__img,
  .medalha--imagem.medalha--efeito-brilho .medalha__reflexo { animation: none; }
}

/* ---------- 1.0.23: mais cores, formatos e efeitos das medalhas ---------- */
/* Metais, pedras e mais cores: --cq1 (claro) e --cq2 (escuro). Especiais: o aro usa --cq1/--cq2 e o miolo, --cq-fundo. */
.cor-conquista-platina { --cq1: #ffffff; --cq2: #8796aa; }
.cor-conquista-cobre { --cq1: #ffbf94; --cq2: #9a3412; }
.cor-conquista-ouro_rosa { --cq1: #ffd9cf; --cq2: #b0606c; }
.cor-conquista-esmeralda { --cq1: #86efac; --cq2: #047857; }
.cor-conquista-rubi { --cq1: #fda4af; --cq2: #9f1239; }
.cor-conquista-safira { --cq1: #93c5fd; --cq2: #1e3a8a; }
.cor-conquista-ametista { --cq1: #e9d5ff; --cq2: #7e22ce; }
.cor-conquista-turquesa { --cq1: #99f6e4; --cq2: #0f766e; }
.cor-conquista-topazio { --cq1: #fde68a; --cq2: #b45309; }
.cor-conquista-perola { --cq1: #ffffff; --cq2: #a89c84; }
.cor-conquista-obsidiana { --cq1: #6d5a96; --cq2: #0b0614; }
.cor-conquista-lima { --cq1: #d9f99d; --cq2: #4d7c0f; }
.cor-conquista-coral { --cq1: #ffc4b5; --cq2: #dc4b35; }
.cor-conquista-chocolate { --cq1: #d6a57a; --cq2: #4a2511; }
.cor-conquista-anil { --cq1: #a5b4fc; --cq2: #3730a3; }
.cor-conquista-magenta { --cq1: #f5a3ff; --cq2: #a21caf; }
.cor-conquista-e4t { --cq1: #b994ff; --cq2: #2f006b; }
.cor-conquista-arco_iris { --cq1: #ffffff; --cq2: #9ca3af; --cq-fundo: linear-gradient(145deg, #ef4444, #f97316, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef); }
.cor-conquista-aurora { --cq1: #d1fae5; --cq2: #0f766e; --cq-fundo: linear-gradient(145deg, #22c55e, #14b8a6 35%, #3b82f6 65%, #a855f7); }
.cor-conquista-galaxia { --cq1: #e9d5ff; --cq2: #4c1d95; --cq-fundo: radial-gradient(circle at 30% 28%, #fff 0 2%, transparent 3.5%), radial-gradient(circle at 70% 64%, #fff 0 1.6%, transparent 3%),
  radial-gradient(circle at 62% 24%, #fde68a 0 1.4%, transparent 2.8%), linear-gradient(145deg, #312e81, #7c3aed 45%, #db2777 75%, #1e1b4b); }
.cor-conquista-fogo { --cq1: #fef08a; --cq2: #9a3412; --cq-fundo: linear-gradient(0deg, #7f1d1d, #dc2626 30%, #f97316 62%, #fde047); }
.cor-conquista-gelo { --cq1: #ffffff; --cq2: #38bdf8; --cq-fundo: linear-gradient(145deg, #ffffff, #bae6fd 30%, #38bdf8 62%, #0369a1); }
.cor-conquista-por_do_sol { --cq1: #fef3c7; --cq2: #9d174d; --cq-fundo: linear-gradient(180deg, #fbbf24, #f97316 35%, #e11d48 65%, #6d28d9); }
.cor-conquista-oceano { --cq1: #cffafe; --cq2: #1e40af; --cq-fundo: linear-gradient(180deg, #a5f3fc, #22d3ee 30%, #0284c7 62%, #1e3a8a); }
.cor-conquista-holografico { --cq1: #ffffff; --cq2: #a78bfa; --cq-icone: #4c1d95; --cq-fundo: linear-gradient(125deg, #fbcfe8, #c4b5fd 25%, #a5f3fc 50%, #bbf7d0 70%, #fde68a 90%); }
.cor-conquista-aero { --cq1: #ffffff; --cq2: #3b9fe8; --cq-fundo: linear-gradient(180deg, #e6f7ff 0, #7cc9ff 46%, #1f8fe0 50%, #34b4ff 76%, #6ee06a 100%); }
.cor-conquista-neon { --cq1: #a5f3fc; --cq2: #0891b2; --cq-icone: #a5f3fc; --cq-fundo: radial-gradient(circle, #1e1b4b, #0b1020 75%); }
.cor-conquista-neon .medalha__forma i, .cor-conquista-neon.nivel-selo i { filter: drop-shadow(0 0 3px #22d3ee) drop-shadow(0 0 1px #22d3ee); }
.nivel-rotulo.cor-conquista-holografico, .nivel-rotulo.cor-conquista-gelo, .nivel-rotulo.cor-conquista-aero { color: #0f1a3a; text-shadow: 0 1px 0 hsl(0 0% 100% / .5); }

/* Formatos novos */
.medalha--quadrado .medalha__forma { clip-path: inset(5% round 24%); }
.medalha--triangulo .medalha__forma { clip-path: polygon(50% 3%, 98% 92%, 2% 92%); }
.medalha--gema .medalha__forma { clip-path: polygon(24% 6%, 76% 6%, 98% 34%, 50% 97%, 2% 34%); }
.medalha--flamula .medalha__forma { clip-path: polygon(10% 0, 90% 0, 90% 100%, 50% 80%, 10% 100%); }
.medalha--coroa .medalha__forma { clip-path: polygon(2% 18%, 26% 46%, 50% 5%, 74% 46%, 98% 18%, 90% 94%, 10% 94%); }
.medalha--coracao .medalha__forma { clip-path: polygon(50% 27.3%, 50.2% 25.9%, 51.4% 21.8%, 54.5% 16.4%, 59.7% 11.1%, 67% 7.5%, 75.4% 6.7%, 84% 9%, 91.3% 14.2%, 96.2% 21.7%, 98% 30.3%, 96.2% 39.3%, 91.3% 48%, 84% 56.2%, 75.4% 63.9%, 67% 71.2%, 59.7% 78%, 54.5% 84%, 51.4% 89%, 50.2% 92.2%, 50% 93.3%, 49.8% 92.2%, 48.6% 89%, 45.5% 84%, 40.3% 78%, 33% 71.2%, 24.6% 63.9%, 16% 56.2%, 8.7% 48%, 3.8% 39.3%, 2% 30.3%, 3.8% 21.7%, 8.7% 14.2%, 16% 9%, 24.6% 6.7%, 33% 7.5%, 40.3% 11.1%, 45.5% 16.4%, 48.6% 21.8%, 49.8% 25.9%); }
.medalha--flor .medalha__forma { clip-path: polygon(50% 1%, 54.1% 2.9%, 57.4% 8%, 59.4% 15%, 60.2% 21.9%, 60.7% 27.1%, 61.8% 29.6%, 64.5% 29.3%, 69.2% 27.1%, 75.6% 24.4%, 82.7% 22.6%, 88.7% 22.9%, 92.4% 25.5%, 92.9% 30%, 90.1% 35.4%, 85% 40.6%, 79.4% 44.8%, 75.1% 47.8%, 73.5% 50%, 75.1% 52.2%, 79.4% 55.2%, 85% 59.4%, 90.1% 64.6%, 92.9% 70%, 92.4% 74.5%, 88.7% 77.1%, 82.7% 77.4%, 75.6% 75.6%, 69.2% 72.9%, 64.5% 70.7%, 61.8% 70.4%, 60.7% 72.9%, 60.2% 78.1%, 59.4% 85%, 57.4% 92%, 54.1% 97.1%, 50% 99%, 45.9% 97.1%, 42.6% 92%, 40.6% 85%, 39.8% 78.1%, 39.3% 72.9%, 38.2% 70.4%, 35.5% 70.7%, 30.8% 72.9%, 24.4% 75.6%, 17.3% 77.4%, 11.3% 77.1%, 7.6% 74.5%, 7.1% 70%, 9.9% 64.6%, 15% 59.4%, 20.6% 55.2%, 24.9% 52.2%, 26.5% 50%, 24.9% 47.8%, 20.6% 44.8%, 15% 40.6%, 9.9% 35.4%, 7.1% 30%, 7.6% 25.5%, 11.3% 22.9%, 17.3% 22.6%, 24.4% 24.4%, 30.8% 27.1%, 35.5% 29.3%, 38.2% 29.6%, 39.3% 27.1%, 39.8% 21.9%, 40.6% 15%, 42.6% 8%, 45.9% 2.9%); }
.medalha--selo .medalha__forma { clip-path: polygon(50% 1%, 53.5% 6%, 56.1% 11.3%, 60.3% 7.1%, 65.1% 3.4%, 66.9% 9.3%, 67.8% 15.1%, 73% 12.4%, 78.8% 10.4%, 78.6% 16.5%, 77.7% 22.3%, 83.5% 21.4%, 89.6% 21.2%, 87.6% 27%, 84.9% 32.2%, 90.7% 33.1%, 96.6% 34.9%, 92.9% 39.7%, 88.7% 43.9%, 94% 46.5%, 99% 50%, 94% 53.5%, 88.7% 56.1%, 92.9% 60.3%, 96.6% 65.1%, 90.7% 66.9%, 84.9% 67.8%, 87.6% 73%, 89.6% 78.8%, 83.5% 78.6%, 77.7% 77.7%, 78.6% 83.5%, 78.8% 89.6%, 73% 87.6%, 67.8% 84.9%, 66.9% 90.7%, 65.1% 96.6%, 60.3% 92.9%, 56.1% 88.7%, 53.5% 94%, 50% 99%, 46.5% 94%, 43.9% 88.7%, 39.7% 92.9%, 34.9% 96.6%, 33.1% 90.7%, 32.2% 84.9%, 27% 87.6%, 21.2% 89.6%, 21.4% 83.5%, 22.3% 77.7%, 16.5% 78.6%, 10.4% 78.8%, 12.4% 73%, 15.1% 67.8%, 9.3% 66.9%, 3.4% 65.1%, 7.1% 60.3%, 11.3% 56.1%, 6% 53.5%, 1% 50%, 6% 46.5%, 11.3% 43.9%, 7.1% 39.7%, 3.4% 34.9%, 9.3% 33.1%, 15.1% 32.2%, 12.4% 27%, 10.4% 21.2%, 16.5% 21.4%, 22.3% 22.3%, 21.4% 16.5%, 21.2% 10.4%, 27% 12.4%, 32.2% 15.1%, 33.1% 9.3%, 34.9% 3.4%, 39.7% 7.1%, 43.9% 11.3%, 46.5% 6%); }
.medalha--engrenagem .medalha__forma { clip-path: polygon(41% 12.5%, 43% 1%, 57% 1%, 59% 12.5%, 61.4% 13.1%, 64.8% 14.3%, 68.1% 15.9%, 70.2% 17.1%, 79.7% 10.4%, 89.6% 20.3%, 82.9% 29.8%, 84.1% 31.9%, 85.7% 35.2%, 86.9% 38.6%, 87.5% 41%, 99% 43%, 99% 57%, 87.5% 59%, 86.9% 61.4%, 85.7% 64.8%, 84.1% 68.1%, 82.9% 70.2%, 89.6% 79.7%, 79.7% 89.6%, 70.2% 82.9%, 68.1% 84.1%, 64.8% 85.7%, 61.4% 86.9%, 59% 87.5%, 57% 99%, 43% 99%, 41% 87.5%, 38.6% 86.9%, 35.2% 85.7%, 31.9% 84.1%, 29.8% 82.9%, 20.3% 89.6%, 10.4% 79.7%, 17.1% 70.2%, 15.9% 68.1%, 14.3% 64.8%, 13.1% 61.4%, 12.5% 59%, 1% 57%, 1% 43%, 12.5% 41%, 13.1% 38.6%, 14.3% 35.2%, 15.9% 31.9%, 17.1% 29.8%, 10.4% 20.3%, 20.3% 10.4%, 29.8% 17.1%, 31.9% 15.9%, 35.2% 14.3%, 38.6% 13.1%); }
.medalha--cintilante .medalha__forma { clip-path: polygon(99% 50%, 98.2% 50%, 96% 50.3%, 92.5% 50.9%, 88% 52.2%, 82.7% 54.3%, 77% 57.4%, 71.4% 61.3%, 66% 66%, 61.3% 71.4%, 57.4% 77%, 54.3% 82.7%, 52.2% 88%, 50.9% 92.5%, 50.3% 96%, 50% 98.2%, 50% 99%, 50% 98.2%, 49.7% 96%, 49.1% 92.5%, 47.8% 88%, 45.7% 82.7%, 42.6% 77%, 38.7% 71.4%, 34% 66%, 28.6% 61.3%, 23% 57.4%, 17.3% 54.3%, 12% 52.2%, 7.5% 50.9%, 4% 50.3%, 1.8% 50%, 1% 50%, 1.8% 50%, 4% 49.7%, 7.5% 49.1%, 12% 47.8%, 17.3% 45.7%, 23% 42.6%, 28.6% 38.7%, 34% 34%, 38.7% 28.6%, 42.6% 23%, 45.7% 17.3%, 47.8% 12%, 49.1% 7.5%, 49.7% 4%, 50% 1.8%, 50% 1%, 50% 1.8%, 50.3% 4%, 50.9% 7.5%, 52.2% 12%, 54.3% 17.3%, 57.4% 23%, 61.3% 28.6%, 66% 34%, 71.4% 38.7%, 77% 42.6%, 82.7% 45.7%, 88% 47.8%, 92.5% 49.1%, 96% 49.7%, 98.2% 50%); }
.medalha--gota .medalha__forma { clip-path: polygon(50% 2%, 50.2% 2.4%, 51.1% 3.6%, 52.6% 5.7%, 54.7% 8.4%, 57.5% 11.9%, 60.7% 16.1%, 64.3% 20.8%, 68.1% 26%, 71.9% 31.6%, 75.6% 37.6%, 78.9% 43.7%, 81.7% 50%, 83.8% 56.3%, 85.1% 62.4%, 85.5% 68.4%, 85% 74%, 83.4% 79.2%, 80.9% 83.9%, 77.4% 88.1%, 73% 91.6%, 67.9% 94.3%, 62.3% 96.4%, 56.2% 97.6%, 50% 98%, 43.8% 97.6%, 37.7% 96.4%, 32.1% 94.3%, 27% 91.6%, 22.6% 88.1%, 19.1% 83.9%, 16.6% 79.2%, 15% 74%, 14.5% 68.4%, 14.9% 62.4%, 16.2% 56.3%, 18.3% 50%, 21.1% 43.7%, 24.4% 37.6%, 28.1% 31.6%, 31.9% 26%, 35.7% 20.8%, 39.3% 16.1%, 42.5% 11.9%, 45.3% 8.4%, 47.4% 5.7%, 48.9% 3.6%, 49.8% 2.4%); }
.medalha--pentagono .medalha__forma { clip-path: polygon(50% 4.3%, 98% 39.2%, 79.7% 95.7%, 20.3% 95.7%, 2% 39.2%); }
.medalha--octogono .medalha__forma { clip-path: polygon(69.9% 2%, 98% 30.1%, 98% 69.9%, 69.9% 98%, 30.1% 98%, 2% 69.9%, 2% 30.1%, 30.1% 2%); }
.medalha--brasao .medalha__forma { clip-path: polygon(4% 4%, 96% 4%, 96% 46%, 95.4% 51.9%, 94.2% 57.4%, 92.4% 62.8%, 90% 67.8%, 87% 72.5%, 83.5% 77%, 79.4% 81.2%, 74.7% 85.1%, 69.4% 88.8%, 63.5% 92.1%, 57% 95.2%, 50% 98%, 43% 95.2%, 36.5% 92.1%, 30.6% 88.8%, 25.3% 85.1%, 20.6% 81.2%, 16.5% 77%, 13% 72.5%, 10% 67.8%, 7.6% 62.8%, 5.8% 57.4%, 4.6% 51.9%, 4% 46%); }
.medalha--triangulo .medalha__forma i { font-size: calc(var(--tam) * .28); transform: translateY(20%); }
.medalha--gema .medalha__forma i { font-size: calc(var(--tam) * .3); transform: translateY(-6%); }
.medalha--flamula .medalha__forma i { font-size: calc(var(--tam) * .34); transform: translateY(-12%); }
.medalha--coroa .medalha__forma i { font-size: calc(var(--tam) * .27); transform: translateY(28%); }
.medalha--coracao .medalha__forma i { font-size: calc(var(--tam) * .3); transform: translateY(4%); }
.medalha--gota .medalha__forma i { font-size: calc(var(--tam) * .3); transform: translateY(18%); }
.medalha--cintilante .medalha__forma i { font-size: calc(var(--tam) * .22); }
.medalha--pentagono .medalha__forma i { font-size: calc(var(--tam) * .34); transform: translateY(6%); }
.medalha--flor .medalha__forma i, .medalha--selo .medalha__forma i, .medalha--engrenagem .medalha__forma i { font-size: calc(var(--tam) * .33); }
.medalha--brasao .medalha__forma i { transform: translateY(-4%); }
/* Bolha de vidro: círculo com o reflexo de luz no alto (estilo Aero) */
.medalha--bolha .medalha__forma { clip-path: circle(48% at 50% 50%); }
.medalha--bolha .medalha__forma::before { inset: 0; clip-path: none; opacity: 1;
  background: radial-gradient(ellipse 62% 34% at 50% 21%, hsl(0 0% 100% / .85), hsl(0 0% 100% / .12) 68%, transparent 70%), radial-gradient(circle at 50% 118%, hsl(0 0% 100% / .5), transparent 50%),
    var(--cq-fundo, radial-gradient(circle at 40% 35%, var(--cq1), var(--cq2) 85%)); }
/* Medalha com fita e com asas: uma camada a mais (.medalha__enfeite) atrás do desenho */
.medalha__enfeite { position: absolute; pointer-events: none; z-index: 0; }
.medalha--fita .medalha__forma { width: 76%; height: 76%; align-self: start; clip-path: circle(48% at 50% 50%); }
.medalha--fita .medalha__forma i { font-size: calc(var(--tam) * .3); }
.medalha--fita .medalha__enfeite { left: 22%; right: 22%; bottom: 0; height: 48%;
  background: var(--cq-fundo, linear-gradient(180deg, var(--cq2), var(--cq1)));
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 76% 86%, 58% 100%, 50% 30%, 42% 100%, 24% 86%, 0 100%); filter: saturate(1.1) brightness(.92); }
.medalha--asas .medalha__forma { width: 60%; height: 60%; clip-path: circle(48% at 50% 50%); }
.medalha--asas .medalha__forma i { font-size: calc(var(--tam) * .24); }
.medalha--asas .medalha__enfeite { inset: 6% -12% 16%; }
.medalha--asas .medalha__enfeite::before, .medalha--asas .medalha__enfeite::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48%;
  background: linear-gradient(180deg, #fff, var(--cq1) 35%, var(--cq2)); animation: medalha-asa 3s ease-in-out infinite; filter: drop-shadow(0 1px 0 hsl(0 0% 0% / .25)); }
.medalha--asas .medalha__enfeite::before { left: 0; transform-origin: 100% 40%;
  clip-path: polygon(100% 25%, 70% 8%, 36% 0, 0 4%, 14% 22%, 6% 34%, 28% 42%, 18% 56%, 40% 62%, 34% 78%, 58% 80%, 60% 96%, 100% 78%); }
.medalha--asas .medalha__enfeite::after { right: 0; transform-origin: 0 40%; --asa: -1;
  clip-path: polygon(0 25%, 30% 8%, 64% 0, 100% 4%, 86% 22%, 94% 34%, 72% 42%, 82% 56%, 60% 62%, 66% 78%, 42% 80%, 40% 96%, 0 78%); }
@keyframes medalha-asa { 50% { rotate: calc(var(--asa, 1) * 9deg); } }

/* Efeitos novos (as propriedades translate/rotate/scale somam com o "pulinho" do mouse) */
.medalha--efeito-flutuar { animation: medalha-flutuar 3.2s ease-in-out infinite; }
@keyframes medalha-flutuar { 50% { translate: 0 -12%; } }
.medalha--efeito-balancar .medalha__forma, .medalha--efeito-balancar.medalha--imagem img { transform-origin: 50% 0; animation: medalha-balancar 2.6s ease-in-out infinite; }
@keyframes medalha-balancar { 25% { rotate: 9deg; } 75% { rotate: -9deg; } }
.medalha--efeito-batida { animation: medalha-batida 1.6s ease-in-out infinite; }
@keyframes medalha-batida { 0%, 45%, 100% { scale: 1; } 12% { scale: 1.12; } 24% { scale: 1.03; } 34% { scale: 1.14; } }
.medalha--efeito-girar .medalha__forma, .medalha--efeito-girar .medalha__enfeite, .medalha--efeito-girar.medalha--imagem img { animation: medalha-girar 5s ease-in-out infinite; }
@keyframes medalha-girar { 0%, 55% { transform: perspective(200px) rotateY(0); } 85%, 100% { transform: perspective(200px) rotateY(360deg); } }
.medalha--efeito-neon { --luz: var(--cq1, #67e8f9); animation: medalha-neon 2.4s ease-in-out infinite; }
@keyframes medalha-neon {
  0%, 100% { filter: drop-shadow(0 0 2px var(--luz)) drop-shadow(0 0 calc(var(--tam) * .1) var(--luz)); }
  50%, 54% { filter: drop-shadow(0 0 3px var(--luz)) drop-shadow(0 0 calc(var(--tam) * .22) var(--luz)); }
  52% { filter: drop-shadow(0 0 1px var(--luz)); }
}
.medalha--efeito-fogo { animation: medalha-fogo 1.1s ease-in-out infinite alternate; }
@keyframes medalha-fogo {
  from { filter: drop-shadow(0 -1px 2px hsl(45 100% 60% / .9)) drop-shadow(0 -2px calc(var(--tam) * .1) hsl(25 100% 50% / .75)); }
  to { filter: drop-shadow(0 -2px 3px hsl(50 100% 65% / .95)) drop-shadow(0 -4px calc(var(--tam) * .2) hsl(12 100% 50% / .85)); }
}
.medalha--efeito-holografico .medalha__forma::after { background: linear-gradient(115deg, transparent 28%, hsl(330 100% 78% / .55) 38%, hsl(200 100% 78% / .55) 48%, hsl(120 100% 78% / .5) 58%, transparent 68%);
  animation: medalha-brilho 3.6s ease-in-out infinite; }
.medalha--imagem.medalha--efeito-holografico .medalha__reflexo { animation: medalha-reflexo 3.6s ease-in-out infinite, medalha-holo 3.6s linear infinite; }
@keyframes medalha-holo { from { filter: brightness(1.7) saturate(2.2) hue-rotate(0deg); } to { filter: brightness(1.7) saturate(2.2) hue-rotate(360deg); } }
.medalha--imagem .medalha__img { position: relative; z-index: 1; }
.medalha--imagem .medalha__reflexo { z-index: 2; }
.medalha__brilhos { position: absolute; inset: -14%; pointer-events: none; z-index: 3; }
.medalha__brilhos::before, .medalha__brilhos::after { content: ""; position: absolute; width: 24%; height: 24%; background: #fffbe6;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: medalha-pisca 2.4s ease-in-out infinite; }
.medalha__brilhos::before { top: 2%; right: 4%; }
.medalha__brilhos::after { bottom: 8%; left: 2%; width: 17%; height: 17%; animation-delay: 1.2s; }
@keyframes medalha-pisca { 0%, 100% { opacity: 0; scale: .3; rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 45deg; } }
.medalha__raios { position: absolute; inset: -24%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cq1, #fde68a) 80%, transparent) 0 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%); mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  animation: medalha-raios 14s linear infinite; }
@keyframes medalha-raios { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .medalha--efeito-flutuar, .medalha--efeito-batida, .medalha--efeito-neon, .medalha--efeito-fogo, .medalha--efeito-balancar .medalha__forma, .medalha--efeito-balancar.medalha--imagem img,
  .medalha--efeito-girar .medalha__forma, .medalha--efeito-girar .medalha__enfeite, .medalha--efeito-girar.medalha--imagem img, .medalha--efeito-holografico .medalha__forma::after,
  .medalha--imagem.medalha--efeito-holografico .medalha__reflexo, .medalha__brilhos::before, .medalha__brilhos::after, .medalha__raios,
  .medalha--asas .medalha__enfeite::before, .medalha--asas .medalha__enfeite::after { animation: none; }
  .medalha__brilhos::before, .medalha__brilhos::after { opacity: .8; }
}
/* Escolha de cor/formato/efeito no painel: grupos com título */
.escolha-medalha__grupo { width: 100%; margin: .4em 0 .15em; font-size: .78em; font-weight: 700; color: var(--cor-suave); text-transform: uppercase; letter-spacing: .05em; }
.escolha-medalha__grupo:first-child { margin-top: 0; }

.nivel-selo { --tam: 32px; display: inline-grid; place-items: center; width: var(--tam); height: var(--tam); border-radius: 50%; flex: 0 0 auto;
  background: var(--cq-fundo, radial-gradient(circle at 30% 25%, var(--cq1), var(--cq2) 75%)); color: var(--cq-icone, #fff); font-size: calc(var(--tam) * .45);
  box-shadow: inset 0 0 0 2px hsl(0 0% 100% / .35), 0 1px 3px hsl(0 0% 0% / .3); vertical-align: middle; }
.nivel-selo i { filter: drop-shadow(0 1px 1px hsl(0 0% 0% / .4)); }
/* 1.0.12: rótulo do nível (o "cargo" de participação), na cor do nível */
.nivel-rotulo { display: inline-flex; align-items: center; gap: .4em; padding: .2em .7em .2em .5em; border-radius: 999px; font-size: .8em; font-weight: 700;
  line-height: 1.35; color: #fff; background: var(--cq-fundo, linear-gradient(135deg, var(--cq1, #7cb4ff), var(--cq2, #1d4ed8))); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .25), 0 1px 2px hsl(0 0% 0% / .15); text-shadow: 0 1px 1px hsl(0 0% 0% / .35); max-width: 100%; }
a.nivel-rotulo:hover { color: #fff; filter: brightness(1.08); }
.nivel-rotulo i { font-size: .9em; }
.nivel-rotulo img { width: 1.15em; height: 1.15em; object-fit: contain; }
.nivel-rotulo span { overflow: hidden; text-overflow: ellipsis; }
.nivel-selo--p { --tam: 22px; } .nivel-selo--m { --tam: 32px; } .nivel-selo--g { --tam: 64px; } .nivel-selo--gg { --tam: 96px; }
.nivel-selo--imagem { background: none; box-shadow: none; object-fit: contain; border-radius: 0; }

.caixa-marcar small.campo__ajuda { display: block; margin-top: .15em; }

/* ---------- Molduras de avatar (0.25.0; 1.0.19: muitas mais, imagem por cima e Loja/Inventário) ---------- */
@property --moldura-giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.moldura { position: relative; display: inline-grid; place-items: center; padding: 3px; border-radius: var(--raio-avatar); isolation: isolate; }
.moldura--g { padding: 4px; }
.moldura--gg { padding: 6px; }
.moldura::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; animation: moldura-gira 4s linear infinite; }
.moldura > .avatar, .moldura > a > .avatar { display: block; box-shadow: 0 0 0 2px var(--fundo-caixa); }
@keyframes moldura-gira { to { --moldura-giro: 360deg; } }
.moldura--ouro::before { background: conic-gradient(from var(--moldura-giro), #b8860b, #ffe58a, #c9971b, #fff3c4, #b8860b); }
.moldura--arco-iris::before { background: conic-gradient(from var(--moldura-giro), #ff5f6d, #ffc371, #f9f871, #4ade80, #22d3ee, #818cf8, #e879f9, #ff5f6d); }
.moldura--e4t::before { background: conic-gradient(from var(--moldura-giro), #2f006b, #7c3aed, #c4b5fd, #c026d3, #2f006b); }
.moldura--esmeralda::before { background: conic-gradient(from var(--moldura-giro), #0f3d22, #1d6b3c, #c9a24a, #f0d48a, #0f3d22); }
.moldura--neon::before { background: var(--primaria); animation: moldura-pulsa 2.2s ease-in-out infinite; }
@keyframes moldura-pulsa { 50% { box-shadow: 0 0 14px 2px color-mix(in srgb, var(--primaria) 70%, transparent); } }
/* 1.0.19: mais molduras desenhadas (anéis animados em CSS) */
.moldura--prata::before { background: conic-gradient(from var(--moldura-giro), #6b7280, #f8fafc, #9ca3af, #ffffff, #6b7280); }
.moldura--bronze::before { background: conic-gradient(from var(--moldura-giro), #7c3a12, #f0b27a, #a0522d, #ffd9b0, #7c3a12); }
.moldura--rubi::before { background: conic-gradient(from var(--moldura-giro), #6b0012, #e11d48, #ffb3c1, #be123c, #6b0012); box-shadow: 0 0 10px hsl(350 90% 50% / .45); }
.moldura--safira::before { background: conic-gradient(from var(--moldura-giro), #0b1f66, #2563eb, #bfdbfe, #1d4ed8, #0b1f66); box-shadow: 0 0 10px hsl(220 90% 55% / .45); }
.moldura--ametista::before { background: conic-gradient(from var(--moldura-giro), #3b0764, #9333ea, #e9d5ff, #7e22ce, #3b0764); box-shadow: 0 0 10px hsl(275 85% 55% / .45); }
.moldura--fogo::before { background: conic-gradient(from var(--moldura-giro), #7f1d1d, #f97316, #fde047, #ef4444, #f59e0b, #7f1d1d); animation: moldura-gira 1.6s linear infinite, moldura-chama 1.1s ease-in-out infinite alternate; }
@keyframes moldura-chama { from { box-shadow: 0 0 6px 1px hsl(25 100% 50% / .55), 0 -3px 10px hsl(45 100% 55% / .35); } to { box-shadow: 0 0 14px 3px hsl(15 100% 50% / .7), 0 -6px 16px hsl(45 100% 60% / .5); } }
.moldura--gelo::before { background: conic-gradient(from var(--moldura-giro), #e0f2fe, #38bdf8, #ffffff, #7dd3fc, #0ea5e9, #e0f2fe); box-shadow: 0 0 12px hsl(195 95% 70% / .6); animation-duration: 7s; }
.moldura--gelo::after { content: ""; position: absolute; inset: -4px; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 15% 20%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 85% 30%, #fff 0 1.2px, transparent 2.2px), radial-gradient(circle at 70% 88%, #fff 0 1.5px, transparent 2.5px);
  animation: moldura-cintila 2.6s ease-in-out infinite; }
@keyframes moldura-cintila { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.moldura--aurora::before { background: conic-gradient(from var(--moldura-giro), #22c55e, #14b8a6, #3b82f6, #a855f7, #ec4899, #22c55e); filter: blur(.4px) saturate(1.3); animation-duration: 9s; box-shadow: 0 0 14px hsl(160 80% 50% / .45), 0 0 22px hsl(280 80% 60% / .3); }
.moldura--galaxia::before { background: radial-gradient(circle at 20% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 75% 15%, #fff 0 1px, transparent 2px), radial-gradient(circle at 85% 70%, #fff 0 1.2px, transparent 2.2px),
  radial-gradient(circle at 30% 85%, #fff 0 1px, transparent 2px), conic-gradient(from var(--moldura-giro), #0f0c29, #302b63, #7c3aed, #24243e, #c026d3, #0f0c29); animation-duration: 12s; box-shadow: 0 0 12px hsl(270 80% 50% / .5); }
.moldura--oceano::before { background: conic-gradient(from var(--moldura-giro), #023e8a, #0096c7, #48cae4, #ade8f4, #0077b6, #023e8a); animation-duration: 6s; }
.moldura--oceano::after { content: ""; position: absolute; inset: -3px; z-index: -2; border-radius: inherit; animation: moldura-onda 3s ease-in-out infinite; }
@keyframes moldura-onda { 0%, 100% { box-shadow: 0 0 0 0 hsl(195 90% 60% / .5); } 50% { box-shadow: 0 0 0 5px hsl(195 90% 60% / 0); } }
.moldura--sakura::before { background: conic-gradient(from var(--moldura-giro), #fbcfe8, #f472b6, #fff1f2, #f9a8d4, #ffffff, #fbcfe8); animation-duration: 8s; }
.moldura--pastel::before { background: conic-gradient(from var(--moldura-giro), #fbcfe8, #ddd6fe, #bae6fd, #bbf7d0, #fef08a, #fbcfe8); animation-duration: 10s; }
.moldura--neon-rosa::before { background: #ff2bd6; animation: moldura-neon-rosa 1.8s ease-in-out infinite; }
@keyframes moldura-neon-rosa { 0%, 100% { box-shadow: 0 0 4px #ff2bd6, 0 0 8px #ff2bd6; } 50% { box-shadow: 0 0 10px #ff2bd6, 0 0 22px #ff7ae6, 0 0 30px #ff2bd6; } }
.moldura--neon-ciano::before { background: #00f0ff; animation: moldura-neon-ciano 1.8s ease-in-out infinite; }
@keyframes moldura-neon-ciano { 0%, 100% { box-shadow: 0 0 4px #00f0ff, 0 0 8px #00f0ff; } 50% { box-shadow: 0 0 10px #00f0ff, 0 0 22px #7df9ff, 0 0 30px #00f0ff; } }
.moldura--relampago::before { background: conic-gradient(from var(--moldura-giro), #facc15, #fff, #3b82f6, #facc15 30%, #1e3a8a, #facc15); animation: moldura-gira 1.2s steps(12) infinite, moldura-faisca 2.4s linear infinite; }
@keyframes moldura-faisca { 0%, 18%, 22%, 60%, 64%, 100% { box-shadow: 0 0 4px hsl(48 100% 60% / .5); } 20%, 62% { box-shadow: 0 0 16px 3px hsl(48 100% 70% / .95), 0 0 26px hsl(220 90% 60% / .7); } }
.moldura--veneno::before { background: conic-gradient(from var(--moldura-giro), #14532d, #84cc16, #a21caf, #4d7c0f, #d946ef, #14532d); animation-duration: 5s; box-shadow: 0 0 10px hsl(85 80% 45% / .5); }
.moldura--cometa::before { background: conic-gradient(from var(--moldura-giro), transparent 0 70%, color-mix(in srgb, var(--primaria) 40%, #fff) 85%, #fff 98%, transparent 100%), color-mix(in srgb, var(--primaria) 30%, var(--fundo-3));
  animation-duration: 2.2s; }
.moldura--duplo::before { background: conic-gradient(from var(--moldura-giro), #f59e0b, transparent 25%, #f59e0b 50%, transparent 75%, #f59e0b); }
.moldura--duplo::after { content: ""; position: absolute; inset: -4px; z-index: -2; border-radius: inherit; padding: 2px;
  background: conic-gradient(from calc(var(--moldura-giro) * -1), #7c3aed, transparent 25%, #7c3aed 50%, transparent 75%, #7c3aed);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: moldura-gira 3s linear infinite; }
.moldura--radar::before { background: repeating-conic-gradient(from var(--moldura-giro), var(--primaria) 0 10deg, transparent 10deg 20deg); animation-duration: 6s; }
.moldura--sol::before { background: repeating-conic-gradient(from var(--moldura-giro), #fbbf24 0 8deg, #fff7ed 8deg 12deg, #f59e0b 12deg 20deg); animation-duration: 14s; box-shadow: 0 0 14px hsl(40 100% 55% / .6); }
.moldura--noite::before { background: radial-gradient(circle at 25% 20%, #fef9c3 0 1.3px, transparent 2.2px), radial-gradient(circle at 80% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 60% 85%, #fff 0 1px, transparent 2px),
  conic-gradient(from var(--moldura-giro), #0b1026, #1e2a5a, #3b4a8a, #0b1026); animation-duration: 16s; }
.moldura--noite::after { content: ""; position: absolute; inset: -3px; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 12% 70%, #fff 0 1.4px, transparent 2.4px), radial-gradient(circle at 90% 60%, #fef9c3 0 1.2px, transparent 2.2px); animation: moldura-cintila 3.4s ease-in-out infinite; }

/* 1.0.19: moldura de imagem (PNG/APNG, WebP animado, GIF ou SVG com transparência, como as decorações de avatar do
   Discord): a imagem fica por cima do avatar, centralizada, maior que ele (escala; 120% = o padrão de 288×288 com o
   avatar ocupando o miolo de 240). */
.moldura--imagem { padding: 0; --escala: 1.2; }
.moldura--imagem::before { content: none; }
.moldura--imagem > .avatar, .moldura--imagem > a > .avatar { box-shadow: none; }
.moldura__imagem { position: absolute; left: 50%; top: 50%; z-index: 2; width: calc(var(--escala) * 100%); height: calc(var(--escala) * 100%); max-width: none;
  transform: translate(-50%, -50%); pointer-events: none; object-fit: contain; user-select: none; }
.moldura-escala-100 { --escala: 1; } .moldura-escala-105 { --escala: 1.05; } .moldura-escala-110 { --escala: 1.1; } .moldura-escala-115 { --escala: 1.15; }
.moldura-escala-120 { --escala: 1.2; } .moldura-escala-125 { --escala: 1.25; } .moldura-escala-130 { --escala: 1.3; } .moldura-escala-135 { --escala: 1.35; }
.moldura-escala-140 { --escala: 1.4; } .moldura-escala-145 { --escala: 1.45; } .moldura-escala-150 { --escala: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .moldura::after, .moldura--fogo::before, .moldura--relampago::before, .moldura--neon-rosa::before, .moldura--neon-ciano::before { animation: none; }
}

/* 1.0.19: Inventário e Loja de itens */
.vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 1em; }
.vitrine__item { position: relative; display: grid; justify-items: center; align-content: start; gap: .5em; padding: 1.4em 1em 1.1em; text-align: center;
  border: 1px solid var(--fundo-4); border-radius: var(--raio-design); background: var(--fundo-caixa); transition: transform .2s, box-shadow .2s, border-color .2s; }
.vitrine__item:hover { transform: translateY(-2px); box-shadow: var(--sombra-design); border-color: color-mix(in srgb, var(--primaria) 35%, var(--fundo-4)); }
.vitrine__item--usando { border-color: var(--primaria); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaria) 35%, transparent); }
.vitrine__previa { display: grid; place-items: center; min-height: 112px; padding: 10px; }
.vitrine__previa--tema { width: 100%; min-height: 0; height: 70px; border-radius: 8px; overflow: hidden; display: flex; padding: 0; }
.vitrine__previa--tema span { flex: 1; }
.vitrine__nome { font-weight: 650; color: var(--cor-forte); }
.vitrine__descricao { font-size: .85em; color: var(--cor-suave); }
.vitrine__preco { font-weight: 700; color: var(--primaria); }
.vitrine__selo { position: absolute; top: .6em; right: .6em; }
.vitrine__acao { margin-top: .3em; }
.vitrine__item .botao { width: 100%; justify-content: center; }
.inventario__secao + .inventario__secao { margin-top: 1.5em; }
.inventario__secao > h2 { display: flex; align-items: center; gap: .5em; margin-bottom: .7em; font-size: 1.15em; color: var(--cor-forte); }
.vitrine--capas { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
@media (max-width: 600px) {
  .vitrine:not(.vitrine--capas) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
  .vitrine__item { padding: 1em .6em .8em; }
  .vitrine__previa { min-height: 96px; padding: 6px; }
  .vitrine__descricao { display: none; }
}
.vitrine__previa--capa { width: 100%; min-height: 0; padding: 0; aspect-ratio: 4 / 1; border-radius: 8px; overflow: hidden; background: var(--fundo-3); }
.vitrine__capa { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine__cores { width: 100%; height: 100%; display: block; }
.inventario__colecao { margin: 1.2em 0 .6em; font-size: .95em; font-weight: 700; color: var(--cor-suave); text-transform: uppercase; letter-spacing: .05em; }
.tabela__grupo td { background: var(--fundo-2); }
.tabela__previa-item { width: 70px; text-align: center; }
.tabela__previa-item .vitrine__cores { width: 60px; height: 18px; border-radius: 4px; }
.tabela__previa-item .vitrine__capa { width: 64px; height: 20px; border-radius: 3px; }

/* ---------- 1.0.21: estilo do nome, fundo do cartão e título (itens do Inventário) ---------- */
.nome-estilo { font-weight: 700; }
.nome-estilo--ouro, .nome-estilo--prata, .nome-estilo--arco-iris, .nome-estilo--fogo, .nome-estilo--gelo, .nome-estilo--galaxia, .nome-estilo--aurora,
.nome-estilo--por-do-sol, .nome-estilo--oceano, .nome-estilo--sakura, .nome-estilo--e4t, .nome-estilo--esmeralda, .nome-estilo--rubi, .nome-estilo--pastel,
.nome-estilo--brilho {
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
  background-size: 200% auto; animation: nome-desliza 5s linear infinite; filter: drop-shadow(0 0 .5px hsl(0 0% 0% / .35));
}
@keyframes nome-desliza { to { background-position: 200% center; } }
.nome-estilo--ouro { background-image: linear-gradient(90deg, #a16207, #facc15, #fff3b0, #eab308, #a16207); }
.nome-estilo--prata { background-image: linear-gradient(90deg, #64748b, #e2e8f0, #ffffff, #94a3b8, #64748b); filter: drop-shadow(0 0 .6px hsl(0 0% 0% / .55)); }
.nome-estilo--arco-iris { background-image: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); animation-duration: 3s; }
.nome-estilo--fogo { background-image: linear-gradient(90deg, #b91c1c, #f97316, #facc15, #f97316, #b91c1c); animation-duration: 1.8s; }
.nome-estilo--gelo { background-image: linear-gradient(90deg, #0284c7, #7dd3fc, #ffffff, #38bdf8, #0284c7); }
.nome-estilo--galaxia { background-image: linear-gradient(90deg, #4c1d95, #7c3aed, #db2777, #2563eb, #4c1d95); }
.nome-estilo--aurora { background-image: linear-gradient(90deg, #16a34a, #14b8a6, #3b82f6, #a855f7, #16a34a); animation-duration: 7s; }
.nome-estilo--por-do-sol { background-image: linear-gradient(90deg, #f43f5e, #fb923c, #fbbf24, #fb7185, #f43f5e); }
.nome-estilo--oceano { background-image: linear-gradient(90deg, #1e3a8a, #0284c7, #22d3ee, #0369a1, #1e3a8a); }
.nome-estilo--sakura { background-image: linear-gradient(90deg, #db2777, #f9a8d4, #ec4899, #fbcfe8, #db2777); }
.nome-estilo--e4t { background-image: linear-gradient(90deg, #4c1d95, #7c3aed, #c4b5fd, #a21caf, #4c1d95); }
.nome-estilo--esmeralda { background-image: linear-gradient(90deg, #065f46, #10b981, #a7f3d0, #059669, #065f46); }
.nome-estilo--rubi { background-image: linear-gradient(90deg, #7f1d1d, #e11d48, #fda4af, #be123c, #7f1d1d); }
.nome-estilo--pastel { background-image: linear-gradient(90deg, #f472b6, #a78bfa, #60a5fa, #34d399, #fbbf24, #f472b6); animation-duration: 8s; }
.nome-estilo--brilho { background-image: linear-gradient(100deg, var(--primaria) 40%, #fff 50%, var(--primaria) 60%); background-size: 250% auto; animation: nome-brilho 3s ease-in-out infinite; }
@keyframes nome-brilho { 0% { background-position: 120% center; } 60%, 100% { background-position: -20% center; } }
.nome-estilo--neon-rosa { color: #ff2bd6 !important; text-shadow: 0 0 4px #ff2bd6, 0 0 10px hsl(310 100% 60% / .6); animation: nome-neon 2s ease-in-out infinite; }
.nome-estilo--neon-ciano { color: #00c8d8 !important; text-shadow: 0 0 4px #00e5ff, 0 0 10px hsl(186 100% 50% / .6); animation: nome-neon 2s ease-in-out infinite; }
.nome-estilo--neon-verde { color: #22c55e !important; text-shadow: 0 0 4px #4ade80, 0 0 10px hsl(142 80% 50% / .6); animation: nome-neon 2s ease-in-out infinite; }
@keyframes nome-neon { 50% { filter: brightness(1.25); } }
.nome-estilo--sombra { color: var(--cor-forte) !important; text-shadow: 0 0 2px var(--primaria), 0 0 8px color-mix(in srgb, var(--primaria) 70%, transparent); }
.nome-estilo--glitch { color: var(--cor-forte) !important; animation: nome-glitch 3s steps(1) infinite; }
@keyframes nome-glitch {
  0%, 86%, 100% { text-shadow: none; }
  88% { text-shadow: 2px 0 #ff0050, -2px 0 #00e5ff; }
  91% { text-shadow: -2px 1px #ff0050, 2px -1px #00e5ff; }
  94% { text-shadow: 1px -1px #ff0050, -1px 1px #00e5ff; }
}

/* Fundo do cartão: faixa atrás da foto (posts e cartão do membro). O conteúdo fica por cima (z-index). */
.fundo-cartao { position: absolute; left: 0; right: 0; top: 0; height: 92px; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-size: 200% 200%; animation: fundo-mexe 14s ease-in-out infinite alternate; }
.fundo-cartao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, var(--fundo-caixa)); }
.fundo-cartao--imagem { animation: none; }
.fundo-cartao--imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes fundo-mexe { to { background-position: 100% 100%; } }
.fundo-cartao--aurora { background-image: linear-gradient(120deg, #052e16, #16a34a, #14b8a6, #6366f1, #a855f7, #052e16); }
.fundo-cartao--galaxia { background-image: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 20%, #fff 0 1px, transparent 2px),
  radial-gradient(circle at 85% 70%, #fff 0 1.2px, transparent 2.2px), radial-gradient(circle at 40% 75%, #fef9c3 0 1px, transparent 2px), linear-gradient(135deg, #0f0c29, #302b63, #7c3aed, #24243e);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 200% 200%; }
.fundo-cartao--por-do-sol { background-image: linear-gradient(160deg, #1e1b4b, #9d174d, #f97316, #fbbf24); }
.fundo-cartao--oceano { background-image: linear-gradient(160deg, #0c4a6e, #0284c7, #22d3ee, #0369a1); }
.fundo-cartao--floresta { background-image: linear-gradient(160deg, #052e16, #166534, #4d7c0f, #14532d); }
.fundo-cartao--sakura { background-image: radial-gradient(circle at 15% 40%, #fff 0 3px, transparent 4px), radial-gradient(circle at 75% 30%, #fff 0 2.5px, transparent 3.5px),
  radial-gradient(circle at 55% 75%, #fff 0 2px, transparent 3px), linear-gradient(135deg, #fbcfe8, #f472b6, #fce7f3); background-size: 100% 100%, 100% 100%, 100% 100%, 200% 200%; }
.fundo-cartao--neon-grade { background-image: linear-gradient(transparent 0 calc(100% - 1px), #f0abfc 0) , linear-gradient(90deg, transparent 0 calc(100% - 1px), #67e8f9 0), linear-gradient(180deg, #1e0b3a, #6d28d9 70%, #db2777);
  background-size: 100% 14px, 18px 100%, 100% 100%; animation: fundo-grade 3s linear infinite; }
@keyframes fundo-grade { to { background-position: 0 14px, 0 0, 0 0; } }
.fundo-cartao--ouro { background-image: linear-gradient(120deg, #713f12, #ca8a04, #fef08a, #ca8a04, #713f12); }
.fundo-cartao--chamas { background-image: radial-gradient(ellipse at 20% 120%, #facc15 0 15%, transparent 45%), radial-gradient(ellipse at 70% 120%, #fb923c 0 18%, transparent 50%),
  linear-gradient(0deg, #7f1d1d, #b91c1c 40%, #1c1917); background-size: 100% 100%, 100% 100%, 100% 100%; animation: fundo-chama 1.6s ease-in-out infinite alternate; }
@keyframes fundo-chama { to { filter: brightness(1.15) saturate(1.2); } }
.fundo-cartao--confete { background-image: radial-gradient(circle at 10% 30%, #f43f5e 0 3px, transparent 4px), radial-gradient(circle at 30% 70%, #22c55e 0 3px, transparent 4px),
  radial-gradient(circle at 55% 25%, #3b82f6 0 3px, transparent 4px), radial-gradient(circle at 80% 60%, #eab308 0 3px, transparent 4px), radial-gradient(circle at 90% 20%, #a855f7 0 3px, transparent 4px),
  linear-gradient(135deg, #fef3c7, #fce7f3); background-size: 60px 60px, 70px 70px, 50px 50px, 80px 80px, 65px 65px, 100% 100%; animation: fundo-confete 6s linear infinite; }
@keyframes fundo-confete { to { background-position: 60px 60px, -70px 70px, 50px 100px, -80px 80px, 65px 130px, 0 0; } }
.fundo-cartao--bolinhas { background-image: radial-gradient(circle, hsl(0 0% 100% / .35) 0 3px, transparent 4px), linear-gradient(135deg, var(--primaria), color-mix(in srgb, var(--primaria), #000 35%));
  background-size: 18px 18px, 100% 100%; animation: fundo-bolinhas 8s linear infinite; }
@keyframes fundo-bolinhas { to { background-position: 36px 18px, 0 0; } }
.fundo-cartao--e4t { background-image: radial-gradient(circle at 80% 30%, hsl(0 0% 100% / .5) 0 1px, transparent 2px), linear-gradient(135deg, #2f006b, #6d28d9, #c026d3, #2f006b);
  background-size: 100% 100%, 200% 200%; }
.fundo-cartao--noite { background-image: radial-gradient(circle at 15% 25%, #fef9c3 0 1.5px, transparent 2.5px), radial-gradient(circle at 60% 15%, #fff 0 1px, transparent 2px),
  radial-gradient(circle at 85% 40%, #fff 0 1px, transparent 2px), radial-gradient(circle at 78% 22%, #fef3c7 0 9px, transparent 10px), linear-gradient(180deg, #0b1026, #1e2a5a);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; animation: none; }
.fundo-cartao--pixel { background-image: linear-gradient(45deg, #22c55e 25%, transparent 25% 75%, #22c55e 75%), linear-gradient(45deg, #22c55e 25%, transparent 25% 75%, #22c55e 75%), linear-gradient(180deg, #38bdf8, #0ea5e9);
  background-size: 16px 16px, 16px 16px, 100% 100%; background-position: 0 0, 8px 8px, 0 0; image-rendering: pixelated; animation: fundo-pixel 4s steps(8) infinite; }
@keyframes fundo-pixel { to { background-position: 16px 0, 24px 8px, 0 0; } }
.post__autor--fundo, .cartao-membro-pop--fundo { position: relative; }
.post__autor--fundo > :not(.fundo-cartao) { position: relative; z-index: 1; }
.post__autor--fundo { overflow: hidden; }

/* Título (selo embaixo do nome) */
.titulo-item { display: inline-flex; align-items: center; max-width: 100%; padding: .12em .65em; border-radius: 999px; font-size: .78em; font-weight: 700; line-height: 1.5;
  color: #fff; background: #7c3aed; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 1px 0 hsl(0 0% 100% / .25); text-shadow: 0 1px 1px hsl(0 0% 0% / .3); }
.titulo-item--ouro { background: linear-gradient(135deg, #a16207, #eab308, #fde68a); color: #3b2500; text-shadow: none; }
.titulo-item--prata { background: linear-gradient(135deg, #64748b, #cbd5e1, #f8fafc); color: #1e293b; text-shadow: none; }
.titulo-item--bronze { background: linear-gradient(135deg, #7c2d12, #c2410c, #fdba74); }
.titulo-item--roxo { background: linear-gradient(135deg, #4c1d95, #7c3aed); }
.titulo-item--azul { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.titulo-item--verde { background: linear-gradient(135deg, #14532d, #16a34a); }
.titulo-item--vermelho { background: linear-gradient(135deg, #7f1d1d, #dc2626); }
.titulo-item--rosa { background: linear-gradient(135deg, #9d174d, #ec4899); }
.titulo-item--arco-iris { background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef); background-size: 200% auto; animation: nome-desliza 4s linear infinite; }
.titulo-item--neon { background: #0b1020; color: #67e8f9; box-shadow: 0 0 0 1px #22d3ee, 0 0 8px hsl(186 100% 50% / .55); text-shadow: 0 0 4px #22d3ee; }
.titulo-item--escuro { background: linear-gradient(135deg, #111827, #374151); }
.post__autor .titulo-item { margin: .15em 0; }

/* Prévias na Loja e no Inventário */
.vitrine__nome-previa { font-size: 1.35em; padding: .4em .2em; }
.vitrine__titulo-previa { display: grid; justify-items: center; gap: .3em; }
.vitrine__fundo-previa { position: relative; display: grid; place-items: center; width: 100%; height: 96px; border-radius: 10px; overflow: hidden; background: var(--fundo-caixa); border: 1px solid var(--fundo-4); }
.vitrine__fundo-previa .fundo-cartao { height: 70px; }
.vitrine__fundo-previa .avatar { position: relative; z-index: 1; margin-top: 18px; box-shadow: 0 0 0 3px var(--fundo-caixa); }
.vitrine__tempo { font-size: .8em; color: var(--alerta); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .nome-estilo, .fundo-cartao, .titulo-item--arco-iris { animation: none !important; }
}
.cartao-membro-pop__capa--fundo { position: relative; background: none; overflow: hidden; }
.cartao-membro-pop__capa--fundo .fundo-cartao { height: 100%; }
.cartao-membro-pop__capa--fundo .fundo-cartao::after { display: none; }
.tabela__previa-item .vitrine__fundo-previa { width: 90px; height: 40px; }
.tabela__previa-item .vitrine__fundo-previa .fundo-cartao { height: 100%; }
.tabela__previa-item .vitrine__fundo-previa .avatar { display: none; }
.tabela__previa-item .vitrine__nome-previa { font-size: 1em; padding: 0; white-space: nowrap; }
.tabela__previa-item .vitrine__titulo-previa strong { display: none; }
.tabela__previa-item { width: 110px; }

/* ---------- 1.0.23: decorações novas da Loja ---------- */
/* Efeito do perfil: 12 partículas por cima da capa do perfil e do cartão do membro (não pegam o mouse). */
.cartao-membro-pop__capa { position: relative; overflow: hidden; }
.capa__moldura { isolation: isolate; } /* o efeito fica dentro da capa, embaixo dos botões */
.efeito-perfil { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.efeito-perfil i { position: absolute; top: -12%; left: calc(var(--x, 50) * 1%); width: calc(8px * var(--t, 1)); height: calc(8px * var(--t, 1)); opacity: 0;
  animation: efeito-cai var(--d, 7s) linear infinite; animation-delay: var(--a, 0s); }
.efeito-perfil i:nth-child(1) { --x: 4; --a: -1.2s; --d: 7.5s; --t: 1; --vai: 26px; }
.efeito-perfil i:nth-child(2) { --x: 13; --a: -4.5s; --d: 9s; --t: .7; --vai: -18px; }
.efeito-perfil i:nth-child(3) { --x: 22; --a: -2.8s; --d: 6.5s; --t: 1.25; --vai: 34px; }
.efeito-perfil i:nth-child(4) { --x: 31; --a: -6.1s; --d: 8.2s; --t: .85; --vai: -28px; }
.efeito-perfil i:nth-child(5) { --x: 40; --a: -.4s; --d: 7s; --t: 1.1; --vai: 20px; }
.efeito-perfil i:nth-child(6) { --x: 49; --a: -3.7s; --d: 9.6s; --t: .65; --vai: -16px; }
.efeito-perfil i:nth-child(7) { --x: 58; --a: -5.3s; --d: 6.8s; --t: 1.3; --vai: 30px; }
.efeito-perfil i:nth-child(8) { --x: 67; --a: -1.9s; --d: 8.6s; --t: .9; --vai: -24px; }
.efeito-perfil i:nth-child(9) { --x: 75; --a: -7.2s; --d: 7.8s; --t: 1.05; --vai: 22px; }
.efeito-perfil i:nth-child(10) { --x: 83; --a: -2.2s; --d: 9.2s; --t: .75; --vai: -30px; }
.efeito-perfil i:nth-child(11) { --x: 90; --a: -4.9s; --d: 6.9s; --t: 1.2; --vai: 18px; }
.efeito-perfil i:nth-child(12) { --x: 96; --a: -.9s; --d: 8.4s; --t: .8; --vai: -20px; }
@keyframes efeito-cai { 0% { top: -12%; opacity: 0; transform: translateX(0) rotate(0deg); } 8%, 88% { opacity: var(--opa, .95); } 100% { top: 108%; opacity: 0; transform: translateX(var(--vai)) rotate(var(--gira, 300deg)); } }
@keyframes efeito-sobe { 0% { top: 108%; opacity: 0; transform: translateX(0) scale(.7); } 10%, 80% { opacity: var(--opa, .9); } 100% { top: -14%; opacity: 0; transform: translateX(var(--vai)) scale(1.05); } }
/* Neve, sakura, confete, folhas, pixels e chuva caem; bolhas, corações, brasas e notas sobem. */
.efeito-perfil--neve i { border-radius: 50%; background: #fff; box-shadow: 0 0 4px hsl(200 100% 90% / .9); --gira: 0deg; --opa: .9; }
.efeito-perfil--sakura i { width: calc(11px * var(--t, 1)); height: calc(8px * var(--t, 1)); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #fff0f6, #ff9ec4 70%); --gira: 540deg; }
.efeito-perfil--confete i { width: calc(6px * var(--t, 1)); height: calc(11px * var(--t, 1)); border-radius: 1px; background: #f43f5e; --gira: 720deg; animation-duration: calc(var(--d) * .7); }
.efeito-perfil--confete i:nth-child(6n+2) { background: #22c55e; } .efeito-perfil--confete i:nth-child(6n+3) { background: #3b82f6; }
.efeito-perfil--confete i:nth-child(6n+4) { background: #eab308; } .efeito-perfil--confete i:nth-child(6n+5) { background: #a855f7; } .efeito-perfil--confete i:nth-child(6n) { background: #06b6d4; }
.efeito-perfil--folhas i { width: calc(13px * var(--t, 1)); height: calc(13px * var(--t, 1)); border-radius: 0 85% 0 85%; background: linear-gradient(135deg, #fbbf24, #ea580c 70%); --gira: 420deg; }
.efeito-perfil--folhas i:nth-child(3n) { background: linear-gradient(135deg, #f87171, #b91c1c 70%); } .efeito-perfil--folhas i:nth-child(3n+1) { background: linear-gradient(135deg, #fde047, #ca8a04 70%); }
.efeito-perfil--pixels i { border-radius: 0; background: #22d3ee; --gira: 0deg; animation-timing-function: steps(14); }
.efeito-perfil--pixels i:nth-child(4n+1) { background: #f472b6; } .efeito-perfil--pixels i:nth-child(4n+2) { background: #a3e635; } .efeito-perfil--pixels i:nth-child(4n+3) { background: #facc15; }
.efeito-perfil--chuva i { width: 1.5px; height: calc(18px * var(--t, 1)); border-radius: 1px; background: linear-gradient(transparent, hsl(205 100% 85% / .9)); --gira: 0deg; --vai: -14px; animation-duration: calc(var(--d) * .16); }
.efeito-perfil--bolhas i { width: calc(16px * var(--t, 1)); height: calc(16px * var(--t, 1)); border-radius: 50%; animation-name: efeito-sobe;
  background: radial-gradient(circle at 32% 28%, hsl(0 0% 100% / .95) 0 12%, transparent 16%), radial-gradient(circle, hsl(195 100% 85% / .08) 55%, hsl(195 100% 92% / .7) 72%, hsl(0 0% 100% / .9) 76%, transparent 78%); }
.efeito-perfil--coracoes i { width: calc(13px * var(--t, 1)); height: calc(12px * var(--t, 1)); animation-name: efeito-sobe; background: linear-gradient(180deg, #ff7aa8, #e11d48);
  clip-path: polygon(50% 18%, 61% 4%, 78% 0, 94% 9%, 100% 28%, 94% 48%, 50% 100%, 6% 48%, 0 28%, 6% 9%, 22% 0, 39% 4%); }
.efeito-perfil--brasas i { width: calc(4px * var(--t, 1)); height: calc(4px * var(--t, 1)); border-radius: 50%; animation-name: efeito-sobe; animation-duration: calc(var(--d) * .55);
  background: #ffd27a; box-shadow: 0 0 6px 2px hsl(25 100% 55% / .85); }
.efeito-perfil--notas i { width: auto; height: auto; animation-name: efeito-sobe; color: #fff; font-style: normal; font-size: calc(15px * var(--t, 1)); line-height: 1; text-shadow: 0 0 6px hsl(275 90% 70% / .9), 0 1px 2px hsl(0 0% 0% / .4); }
.efeito-perfil--notas i::before { content: "\266A"; } .efeito-perfil--notas i:nth-child(even)::before { content: "\266B"; }
.efeito-perfil--estrelas i { width: calc(70px * var(--t, 1)); height: 2px; top: calc(var(--x) * .45%); left: calc(30% + var(--x) * .7%); opacity: 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, hsl(0 0% 100% / .2) 40%, #fff); animation: efeito-estrela var(--d) ease-in infinite; animation-delay: calc(var(--a) * 1.4); }
@keyframes efeito-estrela { 0% { opacity: 0; transform: rotate(150deg) translateX(0); } 6% { opacity: 1; } 22% { opacity: 0; transform: rotate(150deg) translateX(260px); } 100% { opacity: 0; transform: rotate(150deg) translateX(260px); } }
.efeito-perfil--vaga-lumes i { width: calc(5px * var(--t, 1)); height: calc(5px * var(--t, 1)); border-radius: 50%; top: calc(20% + var(--x) * .6%); background: #eaff8a;
  box-shadow: 0 0 6px 3px hsl(70 100% 60% / .7); animation: efeito-vagalume var(--d) ease-in-out infinite alternate; }
@keyframes efeito-vagalume { 0% { opacity: .1; transform: translate(0, 0); } 30% { opacity: 1; } 55% { opacity: .2; transform: translate(var(--vai), -14px); } 80% { opacity: .95; } 100% { opacity: .3; transform: translate(calc(var(--vai) * -.6), 10px); } }
@media (prefers-reduced-motion: reduce) { .efeito-perfil { display: none; } }
.vitrine__previa:has(> .vitrine__fundo-previa, > .vitrine__efeito-previa) { justify-self: stretch; }
.vitrine__efeito-previa { position: relative; display: grid; place-items: center; width: 100%; height: 96px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, var(--primaria), color-mix(in oklch, var(--primaria), var(--secundaria) 70%)); }
.vitrine__efeito-previa .avatar { position: relative; z-index: 1; box-shadow: 0 0 0 3px hsl(0 0% 100% / .6); }
.tabela__previa-item .vitrine__efeito-previa { width: 90px; height: 40px; }
.tabela__previa-item .vitrine__efeito-previa .avatar { display: none; }

/* Estilos do nome novos */
.nome-estilo--aero, .nome-estilo--holografico, .nome-estilo--vaporwave, .nome-estilo--brasil, .nome-estilo--lava {
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
  background-size: 200% auto; animation: nome-desliza 5s linear infinite; filter: drop-shadow(0 0 .5px hsl(0 0% 0% / .4)); }
.nome-estilo--aero { background-image: linear-gradient(180deg, #e9f8ff 0, #8fd3ff 44%, #1477d6 52%, #3aa8f5 78%, #5fd16b 100%); background-size: auto; animation: none;
  filter: drop-shadow(0 0 .6px hsl(210 80% 25% / .7)) drop-shadow(0 1px 1px hsl(200 100% 90% / .6)); }
.nome-estilo--holografico { background-image: linear-gradient(90deg, #e879f9, #818cf8, #22d3ee, #4ade80, #facc15, #e879f9); animation-duration: 4s; filter: drop-shadow(0 0 .6px hsl(260 50% 20% / .7)); }
.nome-estilo--vaporwave { background-image: linear-gradient(90deg, #ff71ce, #01cdfe, #05ffa1, #b967ff, #ff71ce); animation-duration: 6s; }
.nome-estilo--brasil { background-image: linear-gradient(90deg, #00a83f, #e6c200, #2f6fe0, #e6c200, #00a83f); animation-duration: 6s; }
.nome-estilo--lava { background-image: linear-gradient(90deg, #7f1d1d, #dc2626, #f97316, #fbbf24, #dc2626, #7f1d1d); background-size: 300% auto; animation-duration: 7s; }
.nome-estilo--neon-roxo { color: #b77cff !important; text-shadow: 0 0 4px #a855f7, 0 0 10px hsl(275 100% 65% / .6); animation: nome-neon 2s ease-in-out infinite; }
.nome-estilo--retro { color: #f59e0b !important; text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #7c2d12; letter-spacing: .03em; }
.nome-estilo--fantasma { color: var(--cor-forte) !important; text-shadow: 0 0 6px hsl(210 100% 85% / .9); animation: nome-fantasma 4s ease-in-out infinite; }
@keyframes nome-fantasma { 0%, 100% { opacity: 1; filter: blur(0); } 50% { opacity: .45; filter: blur(.4px); } }

/* Fundos do cartão novos */
.fundo-cartao--aero { background-image: radial-gradient(circle at 18% 70%, hsl(0 0% 100% / .9) 0 2px, hsl(0 0% 100% / .35) 3px 7px, transparent 8px),
  radial-gradient(circle at 72% 40%, hsl(0 0% 100% / .9) 0 2px, hsl(0 0% 100% / .3) 3px 10px, transparent 11px), radial-gradient(circle at 46% 85%, hsl(0 0% 100% / .8) 0 1px, hsl(0 0% 100% / .3) 2px 5px, transparent 6px),
  radial-gradient(ellipse 70% 45% at 25% 120%, #7be35f 0 60%, transparent 61%), radial-gradient(ellipse 60% 40% at 85% 125%, #3fbf4a 0 60%, transparent 61%),
  linear-gradient(180deg, #2f9cf0, #8fd3ff 65%, #e3f6ff);
  background-size: 100% 200%, 100% 200%, 100% 200%, 100% 100%, 100% 100%, 100% 100%; animation: fundo-bolhas-sobem 9s linear infinite; }
@keyframes fundo-bolhas-sobem { from { background-position: 0 100%, 0 100%, 0 100%, 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } }
.fundo-cartao--vaporwave { background-image: radial-gradient(circle at 50% 58%, #ffd319 0 12%, #ff8b3d 18%, #ff2975 25%, transparent 26%),
  linear-gradient(transparent 0 calc(100% - 1px), #ff71ce 0), linear-gradient(90deg, transparent 0 calc(100% - 1px), #01cdfe 0), linear-gradient(180deg, #1a0033, #5b108c 55%, #ff2975);
  background-size: 100% 100%, 100% 12px, 20px 100%, 100% 100%; background-position: 0 0, 0 0, 0 0, 0 0; animation: fundo-vapor 3s linear infinite; }
@keyframes fundo-vapor { to { background-position: 0 0, 0 12px, 0 0, 0 0; } }
.fundo-cartao--brasil { background-image: radial-gradient(circle at 75% 35%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 82% 55%, #fff 0 1px, transparent 2px),
  linear-gradient(120deg, #009c3b 0 38%, #ffdf00 38% 62%, #002776 62%); background-size: 100% 100%, 100% 100%, 200% 100%; animation: fundo-mexe 18s ease-in-out infinite alternate; }
.fundo-cartao--festa-junina { background-image:
  conic-gradient(from -36.87deg at 12px 100%, #e11d48 0 73.74deg, transparent 0), conic-gradient(from -36.87deg at 36px 100%, #facc15 0 73.74deg, transparent 0),
  conic-gradient(from -36.87deg at 60px 100%, #22c55e 0 73.74deg, transparent 0), conic-gradient(from -36.87deg at 84px 100%, #3b82f6 0 73.74deg, transparent 0),
  linear-gradient(hsl(0 0% 100% / .8), hsl(0 0% 100% / .8)), radial-gradient(ellipse 60% 50% at 50% 115%, hsl(30 100% 55% / .75), transparent 70%), linear-gradient(180deg, #1e1b4b, #4c1d95 60%, #7c2d12);
  background-size: 96px 16px, 96px 16px, 96px 16px, 96px 16px, 100% 1px, 100% 100%, 100% 100%; background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat;
  background-position: 0 10px, 0 10px, 0 10px, 0 10px, 0 10px, 0 0, 0 0; animation: fundo-bandeiras 2.4s ease-in-out infinite alternate; }
@keyframes fundo-bandeiras { to { background-position: 6px 11px, 6px 11px, 6px 11px, 6px 11px, 0 10px, 0 0, 0 0; } }
.fundo-cartao--neve { background-image: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle, hsl(0 0% 100% / .8) 0 1px, transparent 2px), linear-gradient(180deg, #0c1a3a, #2a4a7f 70%, #a9c6e8);
  background-size: 34px 34px, 22px 22px, 100% 100%; background-position: 0 0, 11px 7px, 0 0; animation: fundo-neve 6s linear infinite; }
@keyframes fundo-neve { to { background-position: 10px 68px, 4px 51px, 0 0; } }
.fundo-cartao--chuva-neon { background-image: repeating-linear-gradient(105deg, transparent 0 14px, hsl(186 100% 60% / .7) 14px 15px, transparent 15px 31px),
  repeating-linear-gradient(105deg, transparent 0 22px, hsl(320 100% 65% / .55) 22px 23px, transparent 23px 47px), linear-gradient(180deg, #050816, #1e1b4b);
  background-size: 200% 200%, 200% 200%, 100% 100%; animation: fundo-chuva .9s linear infinite; }
@keyframes fundo-chuva { to { background-position: -12px 46px, -18px 70px, 0 0; } }
.fundo-cartao--lava { background-image: radial-gradient(circle at 20% 80%, #fbbf24 0 10%, transparent 30%), radial-gradient(circle at 70% 30%, #f97316 0 12%, transparent 34%),
  radial-gradient(circle at 50% 110%, #ef4444 0 25%, transparent 50%), linear-gradient(160deg, #450a0a, #991b1b 60%, #1c0a0a);
  background-size: 160% 160%, 180% 180%, 100% 100%, 100% 100%; animation: fundo-lava 10s ease-in-out infinite alternate; }
@keyframes fundo-lava { to { background-position: 100% 0, 0 100%, 0 0, 0 0; filter: saturate(1.25); } }
.fundo-cartao--holografico { background-image: linear-gradient(120deg, #fbcfe8, #c4b5fd, #a5f3fc, #bbf7d0, #fde68a, #fbcfe8); background-size: 300% 300%; animation-duration: 8s; }
.fundo-cartao--codigo { background-image: repeating-linear-gradient(90deg, #020b05 0 9px, transparent 9px 13px),
  repeating-linear-gradient(180deg, transparent 0 14px, hsl(142 85% 55% / .9) 14px 17px, transparent 17px 26px), repeating-linear-gradient(180deg, transparent 0 23px, hsl(142 85% 70% / .6) 23px 25px, transparent 25px 41px),
  linear-gradient(180deg, #021006, #052e16);
  background-size: 13px 100%, 13px 100%, 26px 100%, 100% 100%; background-position: 0 0, 0 0, 6px 0, 0 0; animation: fundo-codigo 2.2s linear infinite; }
@keyframes fundo-codigo { to { background-position: 0 0, 0 52px, 6px 82px, 0 0; } }
.fundo-cartao--praia { background-image: radial-gradient(circle at 82% 28%, #fff7c2 0 9%, #fde047 10%, transparent 17%),
  radial-gradient(ellipse 12px 3px at 50% 50%, hsl(0 0% 100% / .7) 40%, transparent 70%), linear-gradient(180deg, #7dd3fc 0 46%, #0ea5e9 46% 68%, #fcd9a0 68%);
  background-size: 100% 100%, 46px 12px, 100% 100%; background-repeat: no-repeat, repeat-x, no-repeat; background-position: 0 0, 0 52%, 0 0; animation: fundo-ondas 5s linear infinite; }
@keyframes fundo-ondas { to { background-position: 0 0, 46px 52%, 0 0; } }

/* Títulos novos */
.titulo-item--aero { background: linear-gradient(180deg, #bfe9ff 0, #59b8f6 48%, #1683dc 52%, #3fb0f7 100%); color: #fff; text-shadow: 0 1px 1px hsl(210 90% 25% / .6); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .7), 0 0 0 1px #1269b8; }
.titulo-item--holografico { background: linear-gradient(90deg, #fbcfe8, #c4b5fd, #a5f3fc, #bbf7d0, #fde68a, #fbcfe8); background-size: 200% auto; animation: nome-desliza 5s linear infinite; color: #3b0764; text-shadow: none; }
.titulo-item--fogo { background: linear-gradient(0deg, #7f1d1d, #dc2626 40%, #f97316 75%, #fbbf24); }
.titulo-item--gelo { background: linear-gradient(135deg, #e0f2fe, #7dd3fc 50%, #0284c7); color: #082f49; text-shadow: 0 1px 0 hsl(0 0% 100% / .5); }
.titulo-item--galaxia { background: radial-gradient(circle at 20% 40%, #fff 0 1px, transparent 2px), radial-gradient(circle at 80% 60%, #fff 0 1px, transparent 2px), linear-gradient(135deg, #1e1b4b, #6d28d9 55%, #db2777); }
.titulo-item--e4t { background: linear-gradient(135deg, #2f006b, #7c3aed 60%, #c084fc); }
.titulo-item--brasil { background: linear-gradient(120deg, #00a83f 0 72%, #ffdf00 72% 80%, #1d4ed8 80%); }
@media (prefers-reduced-motion: reduce) { .titulo-item--holografico { animation: none; } }

/* Anéis animados novos (molduras desenhadas) */
.moldura--aero::before { background: conic-gradient(from var(--moldura-giro), #e0f7ff, #38bdf8, #0b6fc7, #7dd3fc, #6ee06a, #e0f7ff); animation-duration: 7s; box-shadow: 0 0 10px hsl(200 100% 70% / .55); }
.moldura--aero::after { content: ""; position: absolute; inset: -4px; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 18% 22%, #fff 0 2px, hsl(0 0% 100% / .4) 3px 4px, transparent 5px), radial-gradient(circle at 88% 64%, #fff 0 1.5px, hsl(0 0% 100% / .4) 2.5px 3.5px, transparent 4.5px);
  animation: moldura-cintila 3s ease-in-out infinite; }
.moldura--holografico::before { background: conic-gradient(from var(--moldura-giro), #f0abfc, #a5b4fc, #67e8f9, #86efac, #fde047, #f0abfc); animation-duration: 3.5s; filter: saturate(1.2); }
.moldura--brasil::before { background: conic-gradient(from var(--moldura-giro), #009c3b, #ffdf00, #002776, #ffdf00, #009c3b); animation-duration: 6s; }
.moldura--vaporwave::before { background: conic-gradient(from var(--moldura-giro), #ff71ce, #01cdfe, #05ffa1, #b967ff, #ff71ce); animation-duration: 5s; box-shadow: 0 0 12px hsl(320 100% 70% / .5); }
.moldura--lava::before { background: conic-gradient(from var(--moldura-giro), #450a0a, #dc2626, #f97316, #fbbf24, #b91c1c, #450a0a); animation: moldura-gira 5s linear infinite, moldura-chama 1.4s ease-in-out infinite alternate; }

/* ---------- 1.0.24: situação das medalhas, escolher ícone, emblemas, estilos dos posts e itens de fim de ano ---------- */
.selo--proeza { background: linear-gradient(135deg, #4c1d95, #9d6b00); color: #fff; }
.lista-situacoes { margin: .5em 0 0; padding-left: 1.1em; display: grid; gap: .2em; list-style: disc; }

/* Escolher ícone (Font Awesome) */
.seletor-icones { max-width: min(760px, calc(100vw - 2em)); }
.seletor-icones__barra { display: flex; flex-wrap: wrap; gap: .5em .9em; align-items: center; margin-bottom: .4em; }
.seletor-icones__barra .entrada { flex: 1 1 260px; }
.seletor-icones__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; margin-top: .4em; }
.seletor-icones__item { display: grid; place-items: center; height: 46px; border-radius: 8px; font-size: 1.3em; color: var(--cor-forte); border: 1px solid transparent; background: none; cursor: pointer; }
.seletor-icones__item:hover, .seletor-icones__item:focus-visible { background: var(--fundo-hover); border-color: var(--primaria); color: var(--primaria); }
.seletor-icones__abrir { flex: 0 0 auto; }

/* Emblema do nome: ícone pequeno e animado ao lado do nome */
.emblema-nome { display: inline-grid; place-items: center; margin-left: .3em; font-size: .85em; vertical-align: .05em; color: var(--emb, #eab308); line-height: 1; }
.emblema-nome i { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--emb, #eab308) 55%, transparent)); }
.emblema-nome--coroa { --emb: #eab308; } .emblema-nome--diamante { --emb: #38bdf8; } .emblema-nome--chama { --emb: #f97316; } .emblema-nome--raio { --emb: #facc15; }
.emblema-nome--estrela { --emb: #fbbf24; } .emblema-nome--coracao { --emb: #f43f5e; } .emblema-nome--fantasma { --emb: #a5b4fc; } .emblema-nome--gato { --emb: #fb923c; }
.emblema-nome--dragao { --emb: #22c55e; } .emblema-nome--controle { --emb: #8b5cf6; } .emblema-nome--musica { --emb: #ec4899; } .emblema-nome--folha { --emb: #16a34a; }
.emblema-nome--trevo { --emb: #22c55e; } .emblema-nome--lua { --emb: #c4b5fd; } .emblema-nome--sol { --emb: #f59e0b; } .emblema-nome--foguete { --emb: #ef4444; }
.emblema-nome--astronauta { --emb: #60a5fa; } .emblema-nome--caveira { --emb: #94a3b8; } .emblema-nome--pata { --emb: #d97706; } .emblema-nome--cafe { --emb: #92400e; }
.emblema-nome--pena { --emb: #a855f7; } .emblema-nome--idioma { --emb: #0ea5e9; } .emblema-nome--mago { --emb: #7c3aed; } .emblema-nome--meteoro { --emb: #f97316; }
.emblema-nome--arvore-natal { --emb: #16a34a; } .emblema-nome--presente { --emb: #dc2626; } .emblema-nome--bengala { --emb: #ef4444; } .emblema-nome--boneco-neve { --emb: #7dd3fc; }
.emblema-nome--brinde { --emb: #eab308; } .emblema-nome--fogos { --emb: #f472b6; }
.emblema-nome--coroa i, .emblema-nome--diamante i, .emblema-nome--brinde i { animation: emblema-brilha 2.6s ease-in-out infinite; }
.emblema-nome--chama i, .emblema-nome--meteoro i { transform-origin: 50% 100%; animation: emblema-chama .9s ease-in-out infinite alternate; }
.emblema-nome--raio i, .emblema-nome--fogos i, .emblema-nome--arvore-natal i { animation: emblema-pisca 1.8s steps(1) infinite; }
.emblema-nome--estrela i, .emblema-nome--sol i, .emblema-nome--trevo i { animation: emblema-gira 6s linear infinite; }
.emblema-nome--coracao i, .emblema-nome--presente i { animation: emblema-batida 1.5s ease-in-out infinite; }
.emblema-nome--fantasma i, .emblema-nome--lua i, .emblema-nome--foguete i, .emblema-nome--astronauta i { animation: emblema-flutua 2.8s ease-in-out infinite; }
.emblema-nome--musica i, .emblema-nome--folha i, .emblema-nome--pena i, .emblema-nome--bengala i, .emblema-nome--gato i { transform-origin: 50% 90%; animation: emblema-balanca 2.4s ease-in-out infinite; }
@keyframes emblema-brilha { 50% { filter: drop-shadow(0 0 6px var(--emb)) brightness(1.3); } }
@keyframes emblema-chama { from { scale: .92 1.05; } to { scale: 1.06 .94; } }
@keyframes emblema-pisca { 0%, 70% { opacity: 1; } 75% { opacity: .35; } 80% { opacity: 1; } 85% { opacity: .35; } }
@keyframes emblema-gira { to { rotate: 360deg; } }
@keyframes emblema-batida { 0%, 50%, 100% { scale: 1; } 15% { scale: 1.25; } 30% { scale: 1.1; } }
@keyframes emblema-flutua { 50% { translate: 0 -3px; } }
@keyframes emblema-balanca { 25% { rotate: 12deg; } 75% { rotate: -12deg; } }
.perfil__nome .emblema-nome { font-size: .6em; vertical-align: .25em; }

/* Estilo dos posts: borda, faixa no alto e enfeite no canto (em todos os posts do membro) */
:is(article.post, .vitrine__post-previa).post--deco { --deco1: #eab308; --deco2: #fde68a; --deco-icone: "\f005";
  border-color: var(--deco1); box-shadow: 0 0 0 1px var(--deco1), 0 6px 20px -10px var(--deco1), var(--sombra-caixa);
  background-image: linear-gradient(90deg, var(--deco1), var(--deco2), var(--deco1)); background-size: 100% 4px; background-repeat: no-repeat; }
:is(article.post, .vitrine__post-previa).post--deco::after { content: var(--deco-icone); position: absolute; top: 9px; left: 11px; font: 900 15px/1 var(--fonte-icones);
  color: var(--deco1); opacity: .75; pointer-events: none; }
:is(article.post, .vitrine__post-previa).post--deco-ouro { --deco1: #ca8a04; --deco2: #fef08a; --deco-icone: "\f521"; }
:is(article.post, .vitrine__post-previa).post--deco-neon { --deco1: #22d3ee; --deco2: #f0abfc; --deco-icone: "\f0e7"; box-shadow: 0 0 0 1px #22d3ee, 0 0 14px hsl(186 100% 55% / .55), var(--sombra-caixa); }
:is(article.post, .vitrine__post-previa).post--deco-galaxia { --deco1: #7c3aed; --deco2: #f472b6; --deco-icone: "\f753";
  background-image: radial-gradient(circle at 12% 40%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px), linear-gradient(90deg, #1e1b4b, #7c3aed, #db2777, #1e1b4b); background-size: 100% 6px; }
:is(article.post, .vitrine__post-previa).post--deco-aero { --deco1: #2f9cf0; --deco2: #b4e6ff; --deco-icone: "\f0c2"; background-image: linear-gradient(180deg, #e6f7ff, #7cc9ff 45%, #1f8fe0 50%, #6ee06a); background-size: 100% 6px; }
:is(article.post, .vitrine__post-previa).post--deco-sakura { --deco1: #f472b6; --deco2: #fff1f2; --deco-icone: "\f4d8"; }
:is(article.post, .vitrine__post-previa).post--deco-fogo { --deco1: #ea580c; --deco2: #fde047; --deco-icone: "\f06d"; animation: post-deco-fogo 1.6s ease-in-out infinite alternate; }
@keyframes post-deco-fogo { to { box-shadow: 0 0 0 1px #f97316, 0 0 18px hsl(25 100% 55% / .55), var(--sombra-caixa); } }
:is(article.post, .vitrine__post-previa).post--deco-gelo { --deco1: #38bdf8; --deco2: #ffffff; --deco-icone: "\f2dc"; }
:is(article.post, .vitrine__post-previa).post--deco-e4t { --deco1: #7c3aed; --deco2: #c4b5fd; --deco-icone: "\f005"; }
:is(article.post, .vitrine__post-previa).post--deco-pixel { --deco1: #22c55e; --deco2: #facc15; --deco-icone: "\f11b"; border-radius: 0; border-width: 3px; border-style: dashed;
  background-image: repeating-linear-gradient(90deg, #22c55e 0 8px, #facc15 8px 16px, #3b82f6 16px 24px, #ef4444 24px 32px); background-size: 100% 6px; }
:is(article.post, .vitrine__post-previa).post--deco-arco-iris { --deco1: #a855f7; --deco2: #fde047; --deco-icone: "\f75b";
  background-image: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef); background-size: 100% 5px; }
:is(article.post, .vitrine__post-previa).post--deco-natal { --deco1: #dc2626; --deco2: #16a34a; --deco-icone: "\f786";
  background-image: repeating-linear-gradient(135deg, #dc2626 0 10px, #fff 10px 20px, #16a34a 20px 30px, #fff 30px 40px); background-size: 100% 6px; }
:is(article.post, .vitrine__post-previa).post--deco-ano-novo { --deco1: #d4a017; --deco2: #fff7c2; --deco-icone: "\f79f";
  background-image: radial-gradient(circle at 20% 50%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 60% 50%, #fff 0 1px, transparent 2px), linear-gradient(90deg, #7c5a00, #fde68a, #d4a017, #fff7c2, #7c5a00);
  background-size: 100% 6px; animation: post-deco-brilho 3s linear infinite; }
@keyframes post-deco-brilho { 50% { box-shadow: 0 0 0 1px #d4a017, 0 0 16px hsl(45 100% 60% / .55), var(--sombra-caixa); } }
.vitrine__post-previa { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 8px; width: 100%; height: 86px; padding: 14px 10px 10px;
  border: 1px solid var(--borda-caixa); border-radius: 8px; background-color: var(--fundo-caixa); }
.vitrine__post-autor { border-radius: 50%; width: 34px; height: 34px; background: var(--fundo-4); }
.vitrine__post-texto { display: grid; gap: 7px; align-content: start; padding-top: 4px; }
.vitrine__post-texto i { display: block; height: 7px; border-radius: 4px; background: var(--fundo-4); }
.vitrine__post-texto i:nth-child(2) { width: 85%; } .vitrine__post-texto i:nth-child(3) { width: 60%; }
.vitrine__previa:has(> .vitrine__post-previa) { justify-self: stretch; }
@media (prefers-reduced-motion: reduce) { .emblema-nome i, :is(article.post, .vitrine__post-previa).post--deco { animation: none !important; } }

/* Efeitos do perfil novos */
.efeito-perfil--fogos i { width: 6px; height: 6px; top: calc(12% + var(--x) * .45%); border-radius: 50%; background: transparent; animation: efeito-fogos var(--d) ease-out infinite; animation-delay: calc(var(--a) * .8);
  box-shadow: 0 -22px 0 #fde047, 16px -16px 0 #f472b6, 22px 0 0 #60a5fa, 16px 16px 0 #fde047, 0 22px 0 #f472b6, -16px 16px 0 #60a5fa, -22px 0 0 #fde047, -16px -16px 0 #f472b6; }
.efeito-perfil--fogos i:nth-child(3n) { box-shadow: 0 -22px 0 #a3e635, 16px -16px 0 #22d3ee, 22px 0 0 #fb923c, 16px 16px 0 #a3e635, 0 22px 0 #22d3ee, -16px 16px 0 #fb923c, -22px 0 0 #a3e635, -16px -16px 0 #22d3ee; }
@keyframes efeito-fogos { 0% { opacity: 0; transform: scale(.1); } 8% { opacity: 1; } 30% { opacity: 1; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(1.25) translateY(6px); } }
.efeito-perfil--estrelinhas i { width: calc(10px * var(--t)); height: calc(10px * var(--t)); top: calc(8% + var(--x) * .8%); background: #fff7c2;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: efeito-pisca calc(var(--d) * .35) ease-in-out infinite; }
@keyframes efeito-pisca { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.efeito-perfil--baloes i { width: calc(14px * var(--t)); height: calc(18px * var(--t)); border-radius: 50% 50% 48% 48%; animation-name: efeito-sobe; animation-duration: calc(var(--d) * 1.2);
  background: radial-gradient(circle at 32% 28%, hsl(0 0% 100% / .7) 0 14%, transparent 18%), #ef4444; }
.efeito-perfil--baloes i::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: hsl(0 0% 100% / .6); }
.efeito-perfil--baloes i:nth-child(4n+1) { background-color: #3b82f6; } .efeito-perfil--baloes i:nth-child(4n+2) { background-color: #22c55e; } .efeito-perfil--baloes i:nth-child(4n+3) { background-color: #eab308; }
.efeito-perfil--natal i { border-radius: 50%; background: #fff; box-shadow: 0 0 4px hsl(200 100% 90% / .9); --gira: 0deg; }
.efeito-perfil--natal i:nth-child(3n) { width: 7px; height: 7px; background: #ef4444; box-shadow: 0 0 8px 2px hsl(0 90% 60% / .7); animation: efeito-pisca 1.6s ease-in-out infinite; top: 10%; }
.efeito-perfil--natal i:nth-child(3n+1) { animation-duration: calc(var(--d) * 1.1); }
.efeito-perfil--natal i:nth-child(6n) { background: #22c55e; box-shadow: 0 0 8px 2px hsl(140 80% 50% / .7); top: 16%; animation-delay: -.8s; }

/* Estilos do nome novos */
.nome-estilo--natal, .nome-estilo--ano-novo, .nome-estilo--pinheiro, .nome-estilo--chocolate, .nome-estilo--menta {
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: nome-desliza 5s linear infinite; }
.nome-estilo--natal { background-image: repeating-linear-gradient(110deg, #dc2626 0 6px, #fff 6px 10px, #16a34a 10px 16px, #fff 16px 20px); background-size: 200px 100%; filter: drop-shadow(0 0 .6px hsl(0 0% 0% / .7)); animation-duration: 6s; }
.nome-estilo--ano-novo { background-image: linear-gradient(100deg, #a16207 0 35%, #fff7c2 45%, #eab308 55%, #a16207 70%); background-size: 250% auto; animation: nome-brilho 2.6s ease-in-out infinite; filter: drop-shadow(0 0 1px hsl(45 100% 30% / .6)); }
.nome-estilo--pinheiro { background-image: linear-gradient(90deg, #14532d, #16a34a, #86efac, #15803d, #14532d); background-size: 200% auto; }
.nome-estilo--chocolate { background-image: linear-gradient(90deg, #451a03, #92400e, #d6a57a, #78350f, #451a03); background-size: 200% auto; }
.nome-estilo--menta { background-image: linear-gradient(90deg, #0f766e, #5eead4, #ccfbf1, #14b8a6, #0f766e); background-size: 200% auto; filter: drop-shadow(0 0 .6px hsl(0 0% 0% / .5)); }

/* Fundos do cartão novos */
.fundo-cartao--natal { background-image: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px),
  radial-gradient(circle at 50% 0, #ef4444 0 3px, transparent 4px), radial-gradient(circle at 50% 0, #facc15 0 3px, transparent 4px), radial-gradient(circle at 50% 0, #22c55e 0 3px, transparent 4px),
  linear-gradient(180deg, #7f1d1d, #14532d);
  background-size: 28px 28px, 54px 12px, 54px 12px, 54px 12px, 100% 100%; background-position: 0 0, 0 4px, 18px 4px, 36px 4px, 0 0; background-repeat: repeat, repeat-x, repeat-x, repeat-x, no-repeat;
  animation: fundo-natal 6s linear infinite; }
@keyframes fundo-natal { to { background-position: 8px 56px, 0 4px, 18px 4px, 36px 4px, 0 0; } }
.fundo-cartao--ano-novo { background-image: radial-gradient(circle at 25% 35%, transparent 0 14px, #fde047 15px 16px, transparent 17px), radial-gradient(circle at 72% 30%, transparent 0 10px, #f472b6 11px 12px, transparent 13px),
  radial-gradient(circle at 52% 60%, transparent 0 7px, #60a5fa 8px 9px, transparent 10px), linear-gradient(180deg, #020617, #1e1b4b 70%, #4c1d95);
  background-size: 100% 100%; animation: fundo-fogos 2.4s ease-out infinite; }
@keyframes fundo-fogos { 0% { filter: brightness(.7); } 15% { filter: brightness(1.35); } 100% { filter: brightness(.8); } }
.fundo-cartao--xadrez { background-image: conic-gradient(#b91c1c 25%, #fff1f2 0 50%, #b91c1c 0 75%, #fff1f2 0); background-size: 22px 22px; animation: fundo-pixel 6s steps(11) infinite; }
.fundo-cartao--por-do-sol-retro { background-image: repeating-linear-gradient(180deg, transparent 0 7px, #2e1065 7px 9px), radial-gradient(circle at 50% 75%, #fde047 0 18%, #f97316 26%, #db2777 34%, transparent 35%),
  linear-gradient(180deg, #312e81, #be185d 65%, #f97316); background-size: 100% 100%; background-position: 0 40px, 0 0, 0 0; background-repeat: no-repeat; animation: none; }

/* Títulos novos */
.titulo-item--natal { background: repeating-linear-gradient(135deg, #b91c1c 0 8px, #dc2626 8px 16px); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .3), 0 0 0 1px #16a34a; }
.titulo-item--ano-novo { background: linear-gradient(100deg, #7c5a00 0 30%, #fde68a 45%, #d4a017 60%, #7c5a00 80%); background-size: 250% auto; color: #2b1d00; text-shadow: 0 1px 0 hsl(50 100% 90% / .6);
  animation: nome-brilho 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .titulo-item--ano-novo { animation: none; } }

/* ---------- 1.0.25 ---------- */
/* Dentro de tabelas com rolagem, a dica dos botões da última coluna abre à esquerda (não é cortada nem cria barra) */
.rolavel td:last-child [data-dica]:hover::after, .rolavel td:last-child [data-dica]:focus-visible::after {
  bottom: auto; left: auto; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
/* Medalhas animadas (raios, asas, flutuar) não fazem a tabela ganhar barras de rolagem */
.rolavel .medalha { overflow: clip; overflow-clip-margin: 3px; }
/* Perfil: medalhas e seguidores em grade que preenche as duas linhas, em qualquer largura */
.grade-medalhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); justify-items: center; gap: 10px 6px; }
.grade-avatares { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); justify-items: center; gap: 8px 6px; }
.alem-das-linhas { display: none !important; } /* [data-linhas]: o forum.js esconde o que passa da última linha */
.grade-avatares > * { line-height: 0; }