/* ══════════════════════════════════════════════════════════════
   Estilos do card de publicação — compartilhados entre o feed (/social)
   e a aba Publicações do perfil (/social/perfil).
   Depende dos tokens de /shared/design.css (--border, --t2, --t3, --font).
   ══════════════════════════════════════════════════════════════ */
    .fd-gate { padding:80px 20px; text-align:center; color:#999; font-size:14px; line-height:1.7; }
    @keyframes fdIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }
    .fd-card { background:#fff; border:1px solid var(--border); border-radius:18px; animation:fdIn .25s ease backwards; }
    /* composer */
    .fd-comp { padding:16px 18px; margin-bottom:16px; }
    .fd-comp-row { display:flex; gap:12px; }
    .fd-ava { width:44px; height:44px; border-radius:50%; object-fit:cover; background:#DCE8DF; flex-shrink:0;
      display:flex; align-items:center; justify-content:center; font-weight:800; color:#3E7A55; font-size:17px; }
    .fd-ta { flex:1; border:0; resize:none; scrollbar-width:none; -ms-overflow-style:none; font-family:var(--font); font-size:14px; color:#16301C; line-height:1.5;
      min-height:44px; padding:11px 0 0; background:transparent; }
    .fd-ta:focus { outline:none; }
    .fd-comp-acts { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:12px; border-top:1px solid #F0EDE7; }
    .fd-btn { display:inline-flex; align-items:center; gap:7px; background:#fff; color:#16301C; border:1.5px solid var(--border);
      border-radius:10px; padding:8px 15px; font-family:var(--font); font-size:13px; font-weight:700; cursor:pointer; transition:border-color .13s; }
    .fd-btn:hover { border-color:#009C3B; }
    .fd-btn:disabled { opacity:.5; cursor:default; }
    .fd-btn-primary { background:#009C3B; color:#fff; border-color:#009C3B; margin-left:auto; }
    .fd-btn-primary:hover:not(:disabled) { background:#007A2E; border-color:#007A2E; }
    .fd-anexo-prev { margin-top:10px; position:relative; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
    .fd-anexo-prev img { display:block; max-width:100%; max-height:280px; object-fit:cover; }
    .fd-anexo-x { position:absolute; right:8px; top:8px; width:26px; height:26px; border-radius:50%; border:0;
      background:rgba(22,48,28,.8); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .fd-gatecomp { font-size:13px; color:var(--t2); line-height:1.6; }
    /* post */
    .fd-post { padding:16px 18px 10px; margin-bottom:14px; }
    .fd-head { display:flex; gap:11px; align-items:center; }
    .fd-nome { font-size:14px; font-weight:800; color:#16301C; text-decoration:none; }
    .fd-nome:hover { text-decoration:underline; }
    .fd-quando { font-size:11.5px; color:var(--t3); }
    /* menu do post */
    .fd-menu-lista { display:flex; flex-direction:column; }
    .fd-mi { display:flex; align-items:center; gap:11px; padding:12px 14px; border:0; background:none;
      font-family:var(--font); font-size:14px; font-weight:600; color:#16301C; cursor:pointer;
      border-radius:10px; text-align:left; }
    .fd-mi:hover { background:#F0EDE7; }
    .fd-mi-del { color:#B3261E; }
    .fd-mi-del:hover { background:#FDECEC; }
    /* contador de reações clicável */
    .fd-conta-btn { display:flex; align-items:center; gap:8px; border:0; background:none; cursor:pointer;
      font-family:var(--font); font-size:13px; font-weight:600; color:var(--t2); padding:0; border-radius:8px; }
    .fd-conta-btn:hover { color:#16301C; text-decoration:underline; }
    /* contador de caracteres */
    .fd-conta-ch { font-size:11.5px; color:var(--t3); text-align:right; margin-top:2px; min-height:14px; }
    .fd-conta-ch.perto { color:#B3261E; font-weight:700; }
    .sk { background:#EFEBE4; border-radius:7px; animation:skPulse 1.4s ease-in-out infinite; }
    .fd-sk { padding:16px 18px; }
    .fd-sk-head { display:flex; gap:11px; align-items:center; margin-bottom:14px; }
    .fd-sk-ava { width:44px; height:44px; border-radius:50%; flex-shrink:0; }
    .fd-sk-l1 { height:12px; width:38%; margin-bottom:7px; }
    .fd-sk-l2 { height:10px; width:22%; }
    .fd-sk-txt { height:11px; margin-bottom:8px; }
    .fd-sk-txt.curto { width:64%; }
    /* imagem em tela cheia */
    .fd-lb { position:fixed; inset:0; z-index:2400; background:rgba(10,14,11,.92); display:flex;
      align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
    .fd-lb img { max-width:100%; max-height:100%; border-radius:10px; display:block; }
    /* ── Player de lance embutido no post ──
       Carregamento preguiçoso: a capa vira player só no clique. Um feed com
       dez lances abrindo dez iframes seria uma página impossível. */
    /* `position:relative` por causa do ✕ de sair, que é absoluto dentro do
       bloco — sem isto ele se ancoraria na página e sumiria do canto. */
    .rf-lance-bloco { position:relative; margin-top:10px; border:1px solid var(--border,#E2DDD5); border-radius:12px; overflow:hidden; background:#fff; }
    .rf-lance-capa { display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer; transition:border-color .15s, background .15s; }
    .rf-lance-capa:hover { background:#FAFCFA; }
    .rf-lance-play { width:38px; height:38px; border-radius:10px; background:#E9F7EE; color:#007A2E;
      display:flex; align-items:center; justify-content:center; flex:none; }
    .rf-lance-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
    .rf-lance-info b { font-size:13.5px; color:var(--t1,#16301C); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .rf-lance-info span { font-size:11.5px; color:var(--t3,#999); }
    .rf-lance-msg { padding:13px 15px; font-size:12.5px; color:var(--t3,#999); }
    .rf-lance-msg a { color:#009C3B; font-weight:700; }
    .rf-lance-video { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
/* Em tela cheia o bloco vira a tela: o vídeo ocupa o que sobra e a barra de
   controles fica colada embaixo, no lugar onde a mão já espera encontrá-la. */
.rf-lance-bloco:fullscreen { display:flex; flex-direction:column; background:#000;
  border:0; border-radius:0; }
.rf-lance-bloco:fullscreen .rf-lance-corpo { flex:1; display:flex; flex-direction:column; min-height:0; }
.rf-lance-bloco:fullscreen .rf-lance-video { flex:1; aspect-ratio:auto; min-height:0; }
.rf-lance-bloco:fullscreen .rf-lance-ctl { flex:none; padding:12px 16px; }
.rf-lance-bloco:-webkit-full-screen { display:flex; flex-direction:column; background:#000; }
.rf-lance-bloco:-webkit-full-screen .rf-lance-video { flex:1; aspect-ratio:auto; }
/* ── Tela cheia do CELULAR: nossa, não a do sistema ──
   A API de fullscreen não serve aqui — no iPhone não existe para elemento
   comum, e no Android a barra de controles fica encostada na borda com um
   único botão pequeno para voltar. Esta sobreposição é uma tela que
   controlamos: cabe o ✕ grande, o Esc e o VOLTAR do aparelho.
   `100dvh` de propósito: com `100vh` a barra do navegador cobre os
   controles justamente no celular, que é onde o problema aparece. */
.rf-lance-bloco.rf-lance-cheio { position:fixed; inset:0; z-index:9800; margin:0;
  width:100%; height:100vh; height:100dvh; max-height:none; border:0; border-radius:0;
  background:#000; display:flex; flex-direction:column; }
.rf-lance-bloco.rf-lance-cheio .rf-lance-corpo { flex:1; display:flex; flex-direction:column; min-height:0; }
.rf-lance-bloco.rf-lance-cheio .rf-lance-video { flex:1; aspect-ratio:auto; min-height:0; }
.rf-lance-bloco.rf-lance-cheio .rf-lance-capa { display:none; }
/* Barra maior no celular: em tela cheia o dedo é o cursor, e 28px de altura
   é alvo de mouse, não de polegar. O `env(safe-area…)` mantém os botões
   acima da faixa de gestos do iPhone. */
.rf-lance-bloco.rf-lance-cheio .rf-lance-ctl { flex:none; padding:12px 14px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); gap:9px; }
.rf-lance-bloco.rf-lance-cheio .rf-lance-ctl button { min-width:44px; height:40px; font-size:14px; }
.rf-lance-bloco.rf-lance-cheio .rf-lance-t { font-size:13px; }
/* A saída: canto superior direito, alvo de 44px, sempre no mesmo lugar. */
.rf-lance-sair { position:absolute; top:calc(10px + env(safe-area-inset-top, 0px)); right:10px;
  z-index:2; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.62); color:#fff; font:inherit; font-size:19px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.rf-lance-sair:hover { background:rgba(0,0,0,.8); }
.rf-lance-bloco:fullscreen .rf-lance-sair { display:flex !important; }
/* Com a sobreposição aberta, a página atrás não rola. */
body.rf-lance-travado { overflow:hidden; }
    .rf-lance-video iframe, .rf-lance-video video { position:absolute; inset:0; width:100%; height:100%; border:0; }
    .rf-lance-ctl { display:flex; align-items:center; gap:7px; padding:9px 12px; background:#12140F; }
    .rf-lance-ctl button { background:#232620; border:0; color:#ddd; border-radius:7px; min-width:34px;
      height:28px; padding:0 8px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
    .rf-lance-ctl button:hover { background:#31352d; color:#fff; }
/* Som ligado fica destacado: é um estado que a pessoa precisa reconhecer
   sem clicar para descobrir. */
.rf-lance-ctl button.ativo { background:#1D4A2C; color:#7FE0A0; }
    .rf-lance-barra { flex:1; height:4px; border-radius:3px; background:#31352d; overflow:hidden; min-width:40px; }
    .rf-lance-barra > div { height:100%; width:0; background:#3FBF6A; transition:width .2s linear; }
    .rf-lance-t { font-size:11px; color:#9aa39a; font-variant-numeric:tabular-nums; white-space:nowrap; }
    .fd-enq-pe { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fd-enq-quem { margin-left:auto; display:inline-flex; align-items:center; gap:5px; border:0;
  background:none; font-family:var(--font); font-size:11.5px; font-weight:700; color:#007A2E;
  cursor:pointer; padding:2px 4px; border-radius:6px; }
.fd-enq-quem:hover { background:#E9F7EE; }
.fd-quem-zero { font-size:12.5px; color:var(--t3); padding:4px 2px; }

/* O menu da Central vive no cabeçalho escuro dela, então não pode herdar a
   cor do menu dos posts comuns. */
.ct-menu { background:none; border:0; color:rgba(255,255,255,.6); font-size:17px; line-height:1;
  cursor:pointer; padding:2px 6px; border-radius:7px; flex:none; font-family:var(--font); }
.ct-menu:hover { color:#fff; background:rgba(255,255,255,.12); }
.ct-hd { align-items:flex-start; }

.ct-trans { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  font-weight:800; color:#009C3B; text-decoration:none; background:#E9F7EE; border-radius:20px;
  padding:3px 10px; }
.ct-trans:hover { background:#D6F0E0; }

/* ── Central: thread por jogo ─────────────────────────────────── */
.ct-th-wrap { grid-column:1/-1; }
.ct-th { border:1.5px solid #009C3B; border-top:0; border-radius:0 0 12px 12px;
  background:#fff; overflow:hidden; margin:-6px 0 10px; }
.ct-g.aberto, .ct-row.aberto { border-color:#009C3B; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.ct-th-top { display:flex; align-items:center; gap:10px; padding:10px 13px; background:#F3F7F4;
  border-bottom:1px solid var(--border); }
.ct-th-camp { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:#16301C; min-width:0; }
.ct-th-camp-lg { width:18px; height:18px; object-fit:contain; flex:none; }
.ct-th-camp img { flex:none; }
.ct-th-camp .ct-th-x2 { color:var(--t3); font-style:normal; font-weight:600; font-size:11px; }
.ct-th-camp span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-th-top { justify-content:space-between; }
.ct-row-sub img { width:13px; height:13px; object-fit:contain; vertical-align:-2px; margin-right:3px; }
.ct-th-meta { font-size:11.5px; color:var(--t3); flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ct-th-x { border:0; background:none; color:var(--t3); cursor:pointer; padding:3px; display:flex; flex:none; }
.ct-th-x:hover { color:#16301C; }
/* O vídeo ocupa a largura toda: o ponto da thread é assistir enquanto
   conversa, então espremer o player não faria sentido. */
.ct-th-video { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.ct-th-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.ct-th-video.vivo { box-shadow:inset 0 0 0 2px #E23B3B; }
.ct-th-vbar { display:flex; align-items:center; gap:10px; padding:8px 13px; flex-wrap:wrap;
  border-bottom:1px solid var(--border); font-size:12px; }
.ct-th-vbar a { color:#009C3B; font-weight:700; text-decoration:none; }
.ct-th-vbar button { border:0; background:none; color:var(--t3); font-family:var(--font);
  font-size:12px; cursor:pointer; padding:0; }
.ct-th-vbar button:hover { color:#16301C; text-decoration:underline; }
.ct-th-nota { flex-basis:100%; font-size:11px; color:var(--t3); }
.ct-th-vt:not(:empty) { padding:10px 13px; border-bottom:1px solid var(--border); }
.ct-th-cmts { padding:4px 13px 10px; }
/* Jogo em destaque: o selo diz por que ele está diferente — borda sozinha
   viraria adivinhação. */
.ct-g.quente { border-color:#E8A33D; box-shadow:0 0 0 3px rgba(232,163,61,.12); }
.ct-quente { position:absolute; top:-9px; left:12px; display:inline-flex; align-items:center; gap:4px;
  background:#E8A33D; color:#fff; font-size:10px; font-weight:800; border-radius:20px; padding:2px 9px;
  letter-spacing:.02em; }
.ct-g { position:relative; }
@media (max-width:560px){
  .ct-th-top { flex-wrap:wrap; }
  .ct-th-meta { flex-basis:100%; }
}

/* ── Post oficial do site ─────────────────────────────────────────
   A marca no lugar do avatar, com o mesmo desenho do logo da topbar: quem
   já viu o cabeçalho reconhece de imediato que a publicação é do site. */
.fd-ava-oficial { position:relative; width:42px; height:42px; border-radius:11px;
  background:#006B2B; display:inline-flex; align-items:center; justify-content:center;
  flex:none; }
.fd-ava-oficial .fd-ava-r { font-weight:800; font-size:20px; color:#FFE234; line-height:1; }
.fd-ava-oficial .fd-ava-dot { position:absolute; top:4px; right:4px; width:9px; height:9px;
  border-radius:50%; background:#002776; }
.fd-nome-oficial { display:inline-flex; align-items:center; gap:7px; cursor:default; }
.fd-selo-of { font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:#E9F7EE; color:#00702B; border-radius:20px; padding:2px 7px; }
.fd-oficial-tg { display:inline-flex; align-items:center; gap:6px; margin-left:4px;
  font-size:12.5px; font-weight:700; color:var(--t2); cursor:pointer; white-space:nowrap; }
.fd-oficial-tg input { accent-color:#009C3B; cursor:pointer; }

/* Selo e aviso de recurso em desenvolvimento. O selo marca o que ainda não
   está pronto; o aviso explica o porquê antes da pessoa esbarrar sozinha. */
.fd-beta { display:inline-block; vertical-align:middle; margin-left:7px; font-size:9.5px;
  font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:#FFF3D6;
  color:#7A4A0E; border-radius:20px; padding:2px 8px; }
.fd-btn-beta { position:relative; }
.fd-btn-beta::after { content:''; position:absolute; top:5px; right:6px; width:6px; height:6px;
  border-radius:50%; background:#E8A33D; }
.fd-aviso-beta { font-size:12.5px; line-height:1.6; color:#7A4A0E; background:#FFF8EC;
  border:1px solid #F2E2C2; border-radius:10px; padding:10px 12px; margin-bottom:12px; }

/* ── Painel de emojis ────────────────────────────────────────────
   Painel próprio, porque nenhum site consegue abrir o teclado de emoji do
   sistema. Fica acima da barra de reações e de qualquer overlay. */
.fd-emj {
  position:fixed; z-index:100600; width:300px; max-width:calc(100vw - 16px);
  background:#fff; border:1px solid var(--border,#E2DDD5); border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.2); overflow:hidden; font-family:var(--font);
}
.fd-emj-bd { max-height:260px; overflow-y:auto; padding:6px 10px 10px; }
.fd-emj-cat {
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--t3,#7E8B84); padding:8px 2px 5px; position:sticky; top:0; background:#fff;
}
.fd-emj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); gap:2px; }
.fd-emj-b {
  border:0; background:none; cursor:pointer; font-size:21px; line-height:1;
  padding:5px 0; border-radius:8px; transition:background .1s, transform .1s;
}
.fd-emj-b:hover { background:var(--bg,#F6F4F0); transform:scale(1.18); }

/* Botão "outro emoji" no seletor de reações: visualmente mais discreto que
   as seis fixas — é uma saída, não uma sugestão. */
.fd-pk-mais .fd-pk-mais-ic {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--bg,#F6F4F0);
  color:var(--t3,#7E8B84); font-size:17px; font-weight:700; line-height:1;
}
.fd-pk-mais:hover .fd-pk-mais-ic { background:#E9F7EE; color:#00702B; }

/* Botão de enviar comentário. Nasce escondido e aparece quando há texto —
   numa caixa vazia ele seria só ruído, e a caixa de comentário é estreita. */
.fd-cmt-envia {
  display:none; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none; align-self:flex-end; margin-bottom:2px;
  border:0; border-radius:50%; background:#009C3B; color:#fff; cursor:pointer;
  transition:opacity .12s;
}
.fd-cmt-envia.on { display:inline-flex; }
.fd-cmt-envia:hover { opacity:.88; }

/* ── Anexo em comentário ───────────────────────────────────────────
   Um clipe só, sempre visível (diferente do botão de enviar, que só aparece
   com texto): sem ele não há como descobrir que dá para anexar. 34px de alvo
   de toque — o mínimo confortável no celular. */
.fd-cmt-wrap { display:block; }
.fd-cmt-clip {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none; align-self:flex-end; margin-bottom:2px;
  border:0; border-radius:50%; background:transparent; color:var(--t3,#7E8B84);
  cursor:pointer; transition:background .12s,color .12s;
}
.fd-cmt-clip:hover { background:#E9F7EE; color:#00702B; }

/* O menu vive no body (position:fixed via top/left absolutos + scroll) para
   não ser cortado pelo overflow do cartão do post. */
.fd-cmt-menu {
  position:absolute; z-index:1200; min-width:186px; padding:6px;
  background:var(--card,#fff); border:1px solid var(--bd,#E4E2DA);
  border-radius:14px; box-shadow:0 10px 28px rgba(20,24,22,.16);
  display:flex; flex-direction:column; gap:2px;
}
.fd-cmt-menu button {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border:0; border-radius:10px; background:transparent;
  font:600 13.5px/1 inherit; color:inherit; cursor:pointer; text-align:left;
}
.fd-cmt-menu button:hover { background:var(--bg,#F6F4F0); }

.fd-cmt-prev:empty { display:none; }
.fd-cmt-prev { margin:0 0 7px 42px; }        /* alinha com o campo, não com o avatar */
.fd-cmt-prev-cx {
  position:relative; display:inline-block; max-width:min(100%,300px);
  border:1px solid var(--bd,#E4E2DA); border-radius:12px; overflow:hidden;
  background:var(--bg,#F6F4F0);
}
.fd-cmt-prev-cx img { display:block; max-width:100%; max-height:160px; }
.fd-cmt-prev-l { display:flex; align-items:center; gap:9px; padding:9px 34px 9px 11px; font-size:12.5px; }
.fd-cmt-prev-l b { display:block; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-cmt-prev-l .sub { font-size:11px; color:var(--t3,#7E8B84); }

/* Já publicado: mídia reduzida, para o fio continuar legível. */
.fd-cmt-img, .fd-cmt-vid {
  display:block; margin-top:7px; max-width:min(100%,320px); max-height:240px;
  border-radius:12px;
}
.fd-cmt-vid { width:320px; background:#000; }
.fd-cmt-doc { margin-top:7px; }
.fd-cmt-lance { margin-top:7px; max-width:min(100%,360px); }

@media (max-width:560px){
  .fd-cmt-prev { margin-left:36px; }
  .fd-cmt-prev-cx, .fd-cmt-img, .fd-cmt-vid, .fd-cmt-lance { max-width:100%; }
  .fd-cmt-vid { width:100%; }
  .fd-cmt-menu { min-width:0; left:8px !important; right:8px; width:auto; }
  .fd-cmt-menu button { padding:13px 12px; }   /* alvo maior no toque */
}

/* Opção de enquete já publicada: visivelmente inerte, para a pessoa entender
   por que não consegue digitar ali antes de tentar. */
.fd-enq-in.fixa { background:var(--bg,#F6F4F0); color:var(--t2,#4A5A50); cursor:default; }
.fd-enq-lock { display:inline-flex; align-items:center; justify-content:center;
  width:26px; color:var(--t3,#7E8B84); flex:none; }
.fd-enq-aviso { font-size:11.5px; line-height:1.5; color:#7A4A0E; background:#FFF8EC;
  border-radius:8px; padding:7px 10px; margin-bottom:8px; }

.fd-lance-link { display:inline-flex; align-items:center; gap:5px; margin-top:7px; font-size:12px;
      font-weight:700; color:#009C3B; text-decoration:none; }
    .fd-lance-link:hover { text-decoration:underline; }
    @media (max-width:520px){
      .rf-lance-ctl { flex-wrap:wrap; }
      .rf-lance-barra { order:10; flex-basis:100%; }
    }

    .fd-lance { display:flex; align-items:center; gap:12px; margin-top:10px; padding:13px 15px;
      background:#FAFAF8; border:1px solid var(--border); border-radius:13px; text-decoration:none; color:inherit; }
    .fd-lance:hover { border-color:#009C3B; }
    .fd-lance-ic { width:38px; height:38px; border-radius:10px; background:#E9F7EE; color:#007A2E;
      display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .fd-lance b { font-size:13.5px; color:#16301C; display:block; }
    .fd-lance-sub { display:block; font-size:11.5px; color:var(--t3); margin-top:1px; }
    .fd-lance-go { font-size:12px; font-weight:700; color:#007A2E; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
    .fd-lrow { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 13px;
      border:1px solid var(--border); border-radius:11px; background:#fff; cursor:pointer; margin-bottom:7px;
      font-family:var(--font); font-size:13px; }
    .fd-lrow:hover { border-color:#009C3B; background:#FCFBF8; }
    .fd-lance-prev { display:flex; align-items:center; }
    .fd-lance-mini { display:flex; align-items:center; gap:10px; padding:10px 13px; font-size:13px; color:#16301C; }
    .fd-menu { margin-left:auto; border:0; background:none; color:var(--t3); cursor:pointer; font-size:17px; font-weight:800;
      padding:4px 8px; border-radius:8px; letter-spacing:1px; }
    .fd-menu:hover { background:#F0EDE7; color:#16301C; }
    .fd-texto { font-size:14px; color:#222; line-height:1.55; margin:10px 0 4px; white-space:pre-wrap; word-break:break-word; }
    .fd-texto a { color:#007A2E; }
    .fd-yt { margin-top:8px; border-radius:12px; overflow:hidden; position:relative; background:#000; aspect-ratio:16/9; cursor:pointer; }
    .fd-yt img { width:100%; height:100%; object-fit:cover; opacity:.9; }
    .fd-yt-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; }
    /* Capa reduzida dentro de comentário: larga o suficiente para reconhecer
       a miniatura, estreita o suficiente para não empurrar a conversa. Ao
       tocar, o iframe ocupa a mesma caixa. */
    .fd-yt-mini { max-width:280px; margin-top:6px; border-radius:10px; }
    .fd-yt iframe { width:100%; height:100%; border:0; }
    .fd-img { margin-top:8px; border-radius:12px; max-width:100%; display:block; }
    /* reações e ações */
    .fd-conta { display:flex; align-items:center; gap:6px; padding:9px 2px 0; font-size:12px; color:var(--t3); min-height:20px; }
    .fd-rc { display:block; }
    .fd-picker { position:absolute; z-index:2200; display:flex; gap:2px; background:#fff; border:1px solid var(--border);
      border-radius:26px; padding:6px 8px; box-shadow:0 8px 30px rgba(0,0,0,.18); animation:fdPk .14s ease; }
    @keyframes fdPk { from{ opacity:0; transform:translateY(6px) scale(.96);} to{ opacity:1; transform:none;} }
    /* Sem legenda embaixo: só o ícone, um pouco maior e com mais respiro. */
    .fd-pk { border:0; background:none; cursor:pointer; padding:5px; border-radius:50%; display:flex;
      align-items:center; justify-content:center; font-family:var(--font);
      transition:transform .12s, background .12s; }
    .fd-pk:hover { transform:translateY(-3px) scale(1.12); background:#F5F3EE; color:#16301C; }
    .fd-pk span { white-space:nowrap; }
    .fd-act-rc.on { color:#007A2E; font-weight:800; }
    .fd-vertodos { border:0; background:none; font-family:var(--font); font-size:12.5px; font-weight:700;
      color:var(--t2); cursor:pointer; padding:6px 0 10px; }
    .fd-vertodos:hover { color:#007A2E; text-decoration:underline; }
    .fd-cmt-ts { font-size:11px; color:var(--t3); font-weight:400; white-space:nowrap; }
    .fd-cmt-edit { font-size:11px; color:var(--t3); }
    .fd-cmt-edita { width:100%; min-height:56px; border:1.5px solid var(--border); border-radius:10px;
      padding:8px 10px; font-family:var(--font); font-size:13px; color:#222; resize:vertical; box-sizing:border-box;
      background:#fff; }
    .fd-cmt-edita:focus { outline:none; border-color:#009C3B; }
    .fd-cmt-edita-acts { display:flex; justify-content:flex-end; gap:4px; margin-top:5px; }
    /* Contador no pé, antes das ações — como no Facebook. */
    .fd-cmt-reac { display:inline-flex; align-items:center; gap:4px; padding:2px 9px 2px 4px; margin:0 4px 0 6px;
      align-self:center;
      background:#fff; border:1px solid var(--border); border-radius:13px; font-size:11.5px; font-weight:700;
      color:var(--t2); box-shadow:0 1px 3px rgba(0,0,0,.08); cursor:pointer; font-family:var(--font); }
    .fd-cmt-reac:hover { border-color:#009C3B; color:#16301C; }
    .fd-cmt-reac .fd-bolha { width:21px; height:21px; border-width:1.5px; margin-left:-6px; box-shadow:none; }
    .fd-cmt-reac .fd-bolha:first-child { margin-left:0; }
    .fd-cmt-acao.on { color:#007A2E; }
    .fd-quem-tit { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.06em;
      text-transform:uppercase; color:var(--t3); margin-bottom:8px; }
    .fd-quem-item { display:flex; align-items:center; gap:10px; padding:7px 0; text-decoration:none;
      color:#16301C; font-size:13.5px; font-weight:600; }
    .fd-quem-item:hover { color:#007A2E; }
    .fd-bolhas { display:flex; align-items:center; }
    .fd-bolha { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
      background:#fff; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.13); margin-left:-8px; }
    .fd-bolha:first-child { margin-left:0; }
    .fd-acts { display:flex; border-top:1px solid #F0EDE7; margin-top:8px; }
    .fd-act { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 4px; border:0;
      background:none; font-family:var(--font); font-size:12.5px; font-weight:700; color:var(--t2); cursor:pointer; border-radius:9px; }
    .fd-act:hover { background:#FAFAF8; color:#16301C; }
    .fd-act.on { color:#007A2E; }
    .fd-act.on-flag { color:#B8860B; }
    /* comentários */
    .fd-cmts { padding:4px 0 8px; }
    .fd-cmt { display:flex; gap:9px; margin-top:9px; }
    .fd-cmt-ava { width:30px; height:30px; border-radius:50%; object-fit:cover; background:#DCE8DF; flex-shrink:0;
      display:flex; align-items:center; justify-content:center; font-weight:800; color:#3E7A55; font-size:12px; }
    .fd-cmt-bolha { background:#F5F3EE; border-radius:13px; padding:8px 12px; font-size:13px; color:#222; line-height:1.5; max-width:100%; }
    .fd-cmt-txt { white-space:pre-wrap; word-break:break-word; margin-top:1px; }
    .fd-cmt-nome { font-weight:800; color:#16301C; font-size:12.5px; text-decoration:none; }
    .fd-cmt-resp { margin-left:39px; }
    /* Sempre visível: esconder as ações no hover fazia parecer que não existiam. */
    .fd-cmt-col { min-width:0; flex:1; }
    .fd-cmt-pé { display:flex; gap:2px; align-items:baseline; padding-left:2px; margin-top:3px; }
    .fd-cmt-acao { border:0; background:none; font-family:var(--font); font-size:11.5px; font-weight:700;
      color:var(--t3); cursor:pointer; padding:3px 8px; line-height:1.4; }
    .fd-cmt-acao:hover { color:#007A2E; }
    .fd-cmt-del:hover { color:#B3261E; }
    .fd-resp-chip { display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-size:12px;
      color:var(--t2); background:#F0EDE7; border-radius:9px; padding:5px 10px; }
    .fd-resp-chip button { border:0; background:none; cursor:pointer; color:var(--t3); display:flex; padding:0; }
    .fd-resp-chip button:hover { color:#B3261E; }
    .fd-cmt-in { display:flex; gap:9px; margin-top:10px; align-items:flex-start; }
    .fd-cmt-input { flex:1; width:100%; min-width:0; box-sizing:border-box; resize:none; overflow-y:auto;
      max-height:200px; line-height:1.5; scrollbar-width:none; -ms-overflow-style:none;
      border:1.5px solid var(--border); border-radius:18px; padding:9px 14px; font-family:var(--font);
      font-size:13px; color:#16301C; }
    .fd-cmt-input:focus { outline:none; border-color:#009C3B; }
    .fd-vazio { text-align:center; padding:44px 20px; color:var(--t2); font-size:13.5px; line-height:1.7; }
    .fd-vazio svg { color:#C4BDB2; margin-bottom:10px; }
    .fd-vermais { text-align:center; margin:6px 0 20px; }
    .fd-solo { font-size:12.5px; margin-bottom:14px; }
    .fd-solo a { color:#007A2E; font-weight:700; }

/* ── autocomplete de menção ── */
.fd-men { position:absolute; z-index:2300; width:260px; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 10px 34px rgba(0,0,0,.16); overflow:hidden; }
.fd-men-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:0;
  background:none; cursor:pointer; font-family:var(--font); text-align:left; }
.fd-men-item:hover, .fd-men-item.on { background:#EEF3EF; }
.fd-men-item span { display:flex; flex-direction:column; min-width:0; }
.fd-men-item b { font-size:13px; font-weight:700; color:#16301C; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-men-item i { font-size:11.5px; font-style:normal; color:var(--t3); }
.fd-men-ava { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
span.fd-men-ava { display:flex; align-items:center; justify-content:center; background:#DCE8DF;
  color:#3E7A55; font-weight:800; font-size:12px; }
/* ── hovercard de autor ── */
.fd-hc { position:absolute; z-index:2350; width:300px; max-width:calc(100vw - 16px); background:#fff;
  border:1px solid var(--border); border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding:16px 18px; box-sizing:border-box; animation:fdHc .14s ease; }
@keyframes fdHc { from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .fd-hc{ animation:none; } }
.fd-hc-ava { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; }
span.fd-hc-ava { display:flex; align-items:center; justify-content:center; background:#DCE8DF;
  color:#3E7A55; font-weight:800; font-size:21px; }
.fd-hc-btn { display:block; margin-top:13px; text-align:center; font-size:12.5px; font-weight:700;
  color:#007A2E; text-decoration:none; padding:8px; border:1px solid var(--border); border-radius:10px; }
.fd-hc-btn:hover { border-color:#009C3B; background:#F5FAF7; }

/* ── thread de respostas ── */
/* ── Thread de respostas ──────────────────────────────────────────
   GEOMETRIA, para as três peças ficarem coerentes:
     · a foto do comentário tem 30px e o vão até o texto, 9px;
     · logo, a coluna de texto começa a 39px da borda do comentário;
     · o fio desce no CENTRO da foto, a 14px (30/2, menos metade do traço).

   A thread vive dentro da coluna do pai, então tudo o que a atravessa usa
   deslocamento negativo de 39−14 = 25px. Respostas sem recuo extra: elas
   ficam alinhadas com o texto do pai, que é o arranjo do Facebook e o que
   devolve largura no celular. */
.fd-thread { margin-top:6px; padding-left:0; position:relative; }
.fd-thread .fd-cmt-resp { margin-left:0; position:relative; }

/* Fio vertical. Ele nasce no COMENTÁRIO PAI, não na thread: a thread começa
   depois da bolha e da linha de ações, cuja altura varia com o texto — preso
   a ela, nenhum deslocamento fixo alcançaria a foto. E `fd-cmt-pai` só é
   posta quando há respostas de verdade, então comentário sem thread não
   desenha traço nenhum (era o fio solto ligando o último à caixa de escrever). */
.fd-cmt-pai { position:relative; }
.fd-cmt-pai::before { content:''; position:absolute; left:14px; top:36px; bottom:0; width:2px;
  background:#E4DFD6; border-radius:2px; }

/* Ramificação: de cada resposta sai um "L" ligando ao fio. */
.fd-thread .fd-cmt-resp::before { content:''; position:absolute; left:-25px; top:16px; width:23px; height:2px;
  background:#E4DFD6; border-bottom-left-radius:8px; }
/* O trecho do fio abaixo do último item some, para o "L" fechar a conversa. */
.fd-thread .fd-cmt-resp:last-of-type::after { content:''; position:absolute; left:-26px; top:18px; bottom:-8px;
  width:3px; background:#fff; }
.fd-thread .fd-cmt-in-resp { position:relative; }
.fd-thread .fd-cmt-in-resp::before { content:''; position:absolute; left:-25px; top:18px; width:23px; height:2px;
  background:#E4DFD6; }
.fd-thread .fd-cmt-in-resp::after { content:''; position:absolute; left:-23px; top:20px; bottom:-10px;
  width:3px; background:#fff; }
.fd-vermais-resp { border:0; background:none; font-family:var(--font); font-size:12px; font-weight:700;
  color:var(--t2); cursor:pointer; padding:4px 0 8px; }
.fd-vermais-resp:hover { color:#007A2E; text-decoration:underline; }
.fd-cmt-in-resp { margin-top:8px; }

/* Sem barra de rolagem: a caixa cresce com o texto, então ela só apareceria
   em textos bem longos — e ali atrapalha mais que ajuda. A rolagem continua
   funcionando pelo teclado e pela roda do mouse. */
.fd-cmt-input::-webkit-scrollbar, .fd-ta::-webkit-scrollbar { width:0; height:0; display:none; }

/* ── editor com menções (contenteditable) ── */
.fd-ed { outline:none; white-space:pre-wrap; word-break:break-word; }
.fd-ed:empty::before, .fd-ed.fd-ed-vazio::before {
  content:attr(data-ph); color:#9AA29A; pointer-events:none; }
.fd-ed.fd-ta { flex:1; min-height:44px; padding:11px 0 0; font-size:14px; color:#16301C;
  line-height:1.5; max-height:300px; overflow-y:auto; }
.fd-ed.fd-cmt-input { flex:1; min-width:0; box-sizing:border-box; max-height:200px; overflow-y:auto;
  line-height:1.5; border:1.5px solid var(--border); border-radius:18px; padding:9px 14px;
  font-family:var(--font); font-size:13px; color:#222; }
.fd-ed.fd-cmt-input:focus { border-color:#009C3B; }
.fd-ed.fd-cmt-edita { min-height:56px; border:1.5px solid var(--border); border-radius:10px;
  padding:8px 10px; font-size:13px; color:#222; background:#fff; }
.fd-ed.fd-cmt-edita:focus { border-color:#009C3B; }
.fd-ed.fd-ed-modal { min-height:120px; max-height:300px; overflow-y:auto; border:1.5px solid var(--border);
  border-radius:12px; padding:11px 13px; font-size:14px; color:#16301C; line-height:1.55; }
.fd-ed.fd-ed-modal:focus { border-color:#009C3B; }
.fd-ed::-webkit-scrollbar { width:0; height:0; display:none; }
.fd-ed { scrollbar-width:none; -ms-overflow-style:none; }
/* o chip: o vínculo fica nos data-*, o texto é só a vitrine */
.fd-chip { display:inline; background:#E9F7EE; color:#007A2E; font-weight:700; border-radius:5px;
  padding:1px 4px; margin:0 1px; cursor:pointer; white-space:nowrap; }
.fd-chip:hover { background:#D9EFE1; }
.fd-chipmenu { position:absolute; z-index:2400; background:#fff; border:1px solid var(--border);
  border-radius:11px; box-shadow:0 8px 26px rgba(0,0,0,.16); overflow:hidden; min-width:160px; }
.fd-chipmenu button { display:block; width:100%; text-align:left; padding:9px 14px; border:0;
  background:none; font-family:var(--font); font-size:13px; color:#16301C; cursor:pointer; }
.fd-chipmenu button:hover { background:#EEF3EF; }
.fd-chipmenu button.rm { color:#B3261E; border-top:1px solid var(--border); }
.fd-chipmenu button.rm:hover { background:#FDECEC; }
/* menção já publicada, no texto */
.fd-mencao { color:#007A2E; font-weight:700; text-decoration:none; }
.fd-mencao:hover { text-decoration:underline; }

/* ── conteúdo opcional do hovercard ── */
.fd-hc-bdg-gen { width:30px; height:30px; border-radius:7px; display:flex; align-items:center;
  justify-content:center; color:#fff; }
.fd-hc-bdg-gen.ouro   { background:linear-gradient(150deg,#E3B23C,#8A6512); }
.fd-hc-bdg-gen.prata  { background:linear-gradient(150deg,#C2C8CF,#767E88); }
.fd-hc-bdg-gen.bronze { background:linear-gradient(150deg,#C8834A,#7A4A22); }
.fd-hc-bdg-gen.neutro { background:linear-gradient(150deg,#727A86,#3C424C); }

/* ── cartão de visita: identidade centralizada, blocos em grade ── */
.fd-hc-topo { text-align:center; padding-bottom:14px; border-bottom:1px solid var(--border); }
.fd-hc-ava { width:66px; height:66px; border-radius:50%; object-fit:cover; margin:0 auto 10px; display:block; }
span.fd-hc-ava { display:flex; align-items:center; justify-content:center; background:#DCE8DF;
  color:#3E7A55; font-weight:800; font-size:25px; }
.fd-hc-nome { font-size:17px; font-weight:800; color:#16301C; letter-spacing:-.01em; line-height:1.25; }
.fd-hc-meta { font-size:12px; color:var(--t3); margin-top:3px; line-height:1.45; }
.fd-hc-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin-top:14px; }
.fd-hc-b { grid-column:span 1; text-align:center; padding:10px 8px; border:1px solid var(--border);
  border-radius:11px; background:#FAFAF8; }
.fd-hc-b.l2 { grid-column:span 2; }
.fd-hc-b.sem-caixa { border:0; background:none; padding:0; }
.fd-hc-b b { display:block; font-size:21px; font-weight:800; color:#16301C; line-height:1;
  font-variant-numeric:tabular-nums; }
.fd-hc-b.on { border-color:#B9D8C4; background:#F2FAF5; }
.fd-hc-b.on b { color:#007A2E; }
.fd-hc-b span { font-size:10px; font-weight:700; color:var(--t3); display:block; margin-top:4px; }
.fd-hc-bdg { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.fd-hc-bdg-item { display:flex; flex-direction:column; align-items:center; gap:4px; max-width:64px; }
.fd-hc-bdg img { width:34px; height:34px; object-fit:contain; border-radius:8px; }
.fd-hc-bdg-gen { width:34px; height:34px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; color:#fff; }
/* Modo alto: medalhas maiores, com o nome embaixo. */
.fd-hc-bdg.alto { gap:12px; }
.fd-hc-bdg.alto img, .fd-hc-bdg.alto .fd-hc-bdg-gen { width:56px; height:56px; border-radius:12px; }
.fd-hc-bdg.alto .fd-hc-bdg-item i { font-size:9.5px; font-style:normal; font-weight:700; color:var(--t3);
  text-align:center; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; }
.fd-hc-bio { font-size:12.5px; color:var(--t2); line-height:1.5; text-align:center;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ══ BUSCA (Fase F1) ══════════════════════════════════════════ */
.fb-trigger{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 14px; margin-bottom:8px;
  border:1.5px solid var(--border); border-radius:11px; background:#fff; color:var(--t3);
  font-family:var(--font); font-size:13.5px; font-weight:600; cursor:pointer; text-align:left; }
.fb-trigger:hover{ border-color:#009C3B; color:#16301C; }
.fb-ov{ position:fixed; inset:0; z-index:2600; background:rgba(20,30,22,.42);
  display:flex; align-items:flex-start; justify-content:center; padding:64px 18px 18px; overflow-y:auto; }
.fb-panel{ background:#fff; border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,.3);
  width:100%; max-width:620px; max-height:82vh; display:flex; flex-direction:column; overflow:hidden; }
.fb-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); flex:none; }
.fb-lupa{ color:var(--t3); display:flex; }
.fb-input{ flex:1; border:0; outline:0; background:none; font-family:var(--font); font-size:16px;
  font-weight:600; color:#111; min-width:0; }
.fb-input::-webkit-search-cancel-button{ display:none; }
.fb-x{ border:0; background:none; color:var(--t3); cursor:pointer; display:flex; padding:4px; border-radius:8px; }
.fb-x:hover{ background:#F0EDE7; color:#111; }
.fb-body{ overflow-y:auto; padding:8px 0 12px; }
.fb-dica{ text-align:center; color:var(--t3); padding:38px 26px; }
.fb-dica p{ margin:12px 0 0; font-size:13.5px; line-height:1.55; }
.fb-sec{ padding:6px 0 4px; }
.fb-sec + .fb-sec{ border-top:1px solid var(--border); margin-top:6px; }
.fb-sec-t{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--t3); padding:8px 18px 6px; }
.fb-sec-t span{ background:#F0EDE7; border-radius:9px; padding:1px 7px; letter-spacing:0; }
.fb-vazio{ color:var(--t3); font-size:13px; padding:6px 18px 12px; }
.fb-item{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 18px; border:0; background:none;
  font-family:var(--font); text-align:left; cursor:pointer; text-decoration:none; color:inherit; }
.fb-item:hover{ background:#F6F4F0; }
.fb-ava{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; background:#F0EDE7; }
.fb-ava-v{ display:flex; align-items:center; justify-content:center; font-weight:800; color:#8A857C; font-size:15px; }
.fb-item-txt{ min-width:0; flex:1; }
.fb-item-txt b{ display:block; font-size:14px; font-weight:700; color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-item-txt b em{ font-style:normal; font-weight:600; font-size:11.5px; color:var(--t3); margin-left:6px; }
.fb-item-txt small{ display:block; font-size:12.5px; color:var(--t3); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-snip{ white-space:normal !important; line-height:1.45; }
.fb-mk{ background:#FFF1B8; color:#5A4300; border-radius:3px; padding:0 1px; }
.fb-mais, .fb-hist{ display:block; width:calc(100% - 36px); margin:6px 18px 4px; padding:9px 12px;
  border:1.5px solid var(--border); border-radius:10px; background:#fff; color:#16301C;
  font-family:var(--font); font-size:13px; font-weight:700; cursor:pointer; }
.fb-mais:hover, .fb-hist:hover{ border-color:#009C3B; }
.fb-hist{ color:var(--t3); font-weight:600; }
.fb-adm{ border-top:1px solid var(--border); margin-top:8px; padding:10px 18px 2px; }
.fb-adm button{ border:0; background:none; color:var(--t3); font-family:var(--font); font-size:11.5px;
  font-weight:700; cursor:pointer; padding:2px 0; text-decoration:underline; }
.fb-adm button:hover{ color:#111; }
@media (max-width:640px){
  .fb-ov{ padding:0; }
  .fb-panel{ max-width:none; max-height:100vh; height:100%; border-radius:0; }
  .fb-head{ padding-top:calc(12px + env(safe-area-inset-top)); }
}
/* Modo busca do feed: a faixa que explica por que a lista está filtrada. */
.fd-busca-faixa{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#E9F7EE;
  border:1px solid #BFE6CE; border-radius:13px; padding:11px 15px; margin-bottom:14px;
  font-size:13.5px; color:#16301C; }
.fd-busca-faixa b{ font-weight:800; }
.fd-busca-faixa a{ color:#007A2E; font-weight:700; text-decoration:none; margin-left:auto; }
.fd-busca-faixa a:hover{ text-decoration:underline; }

/* ══ DOCK DE CONVERSAS (Fase F2b) — só desktop ══════════════════ */
.ch-dock { position:fixed; right:18px; bottom:0; z-index:2300; display:flex; align-items:flex-end; gap:12px; }
.ch-janelas { display:flex; align-items:flex-end; gap:12px; }
.ch-jan { width:312px; max-width:calc(100vw - 24px); background:#fff; border:1px solid var(--border);
  border-bottom:0; border-radius:12px 12px 0 0; box-shadow:0 10px 34px rgba(0,0,0,.16);
  display:flex; flex-direction:column; height:392px; max-height:70vh; overflow:hidden; }
.ch-jan-hd .ms-ava, .ch-jan-hd .ms-ava-v { width:30px; height:30px; font-size:12px; flex:none; }
.ch-jan.min { height:auto; }
.ch-jan-hd { display:flex; align-items:center; gap:9px; padding:8px 10px; cursor:pointer; flex:none;
  border-bottom:1px solid var(--border); }
.ch-jan.min .ch-jan-hd { border-bottom:0; }
.ch-jan-hd:hover { background:#F6F4F0; }
.ms-ava.peq, .ms-ava-v.peq { width:30px; height:30px; font-size:12px; }
.ch-jan-txt { min-width:0; flex:1; }
.ch-jan-txt b { display:block; font-size:13.5px; font-weight:700; color:#111; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ch-jan-txt small { display:block; font-size:11px; color:#2BB35C; font-weight:700; }
.ch-jan-x { border:0; background:none; color:var(--t3); cursor:pointer; padding:3px; border-radius:6px; flex:none; }
.ch-jan-x:hover { background:#F0EDE7; color:#111; }
/* `overflow-x:hidden` e `min-width:0` são o que impedem a janelinha de
   ganhar barra horizontal: um item de flex não encolhe abaixo do próprio
   conteúdo sem min-width:0, então uma imagem larga empurrava a coluna
   inteira — era a barra que aparecia embaixo nos dois screenshots. */
.ch-jan-corpo { flex:1; overflow-y:auto; overflow-x:hidden; padding:12px; display:flex;
  flex-direction:column; gap:3px; min-height:0; min-width:0; }
.ch-jan-corpo .ms-b { max-width:82%; font-size:13.5px; padding:7px 11px; min-width:0; }
.ch-jan-corpo .ms-b img { max-height:200px; }
.ch-jan-corpo .ms-dia { margin:6px 0 4px; }
.ch-jan-pe { flex:none; border-top:1px solid var(--border); padding:8px; display:flex; align-items:flex-end; gap:6px; }
.ch-ta { flex:1; border:1.5px solid var(--border); border-radius:16px; padding:7px 12px; resize:none;
  font-family:var(--font); font-size:13.5px; line-height:1.4; max-height:90px; min-height:34px;
  box-sizing:border-box; outline:0; }
.ch-ta:focus { border-color:#009C3B; }
.ch-env { background:#16301C; color:#fff; border:0; border-radius:50%; width:34px; height:34px;
  cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; }
.ch-nada { margin:auto; color:var(--t3); font-size:13px; text-align:center; }
/* pílula */
.ch-launcher { position:relative; }
.ch-pill { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--border);
  border-bottom:0; border-radius:12px 12px 0 0; box-shadow:0 10px 34px rgba(0,0,0,.16);
  padding:11px 16px; font-family:var(--font); font-size:13.5px; font-weight:700; color:#16301C; cursor:pointer; }
.ch-pill:hover { background:#F6F4F0; }
.ch-pill-n { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#D33; color:#fff;
  font-size:10.5px; font-weight:800; line-height:18px; text-align:center; box-sizing:border-box; }
.ch-pop { position:absolute; right:0; bottom:calc(100% + 8px); width:320px; max-height:60vh; background:#fff;
  border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.2);
  display:flex; flex-direction:column; overflow:hidden; }
.ch-pop-hd { display:flex; align-items:center; justify-content:space-between; padding:11px 15px;
  border-bottom:1px solid var(--border); font-size:14px; font-weight:800; color:#111; flex:none; }
.ch-pop-hd a { font-size:12px; font-weight:700; color:#007A2E; text-decoration:none; }
.ch-pop-in { overflow-y:auto; }
.ch-pop-it { display:flex; align-items:center; gap:10px; width:100%; padding:9px 15px; border:0;
  background:none; cursor:pointer; font-family:var(--font); text-align:left; min-width:0;
  box-sizing:border-box; }
/* Trava do avatar na lista: sem tamanho fixo a foto vinha no tamanho natural
   e ocupava a janela toda (era o primeiro screenshot). */
.ch-pop-it .ms-ava, .ch-pop-it .ms-ava-v { width:34px; height:34px; font-size:13px; flex:none; }
.ch-pop-in { overflow-x:hidden; }
.ch-pop-it:hover { background:#F6F4F0; }
.ch-pop-txt { min-width:0; flex:1; }
.ch-pop-txt b { display:block; font-size:13.5px; font-weight:700; color:#111; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ch-pop-txt small { display:block; font-size:12px; color:var(--t3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ch-pop-vazio { padding:22px 16px; color:var(--t3); font-size:13px; text-align:center; }
/* No celular a área de mensagens é a tela inteira — o dock só atrapalharia. */
@media (max-width:900px) { .ch-dock { display:none; } }

/* botão de admin da Central + botões de vídeo */
.ct-adm { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-bottom:14px;
  padding:9px; border:1.5px dashed var(--border); border-radius:12px; background:#fff; color:var(--t3);
  font-family:var(--font); font-size:12.5px; font-weight:700; cursor:pointer; }
.ct-adm:hover { border-color:#002776; color:#002776; }
.ct-adm:disabled { opacity:.55; cursor:default; }
.ct-yt { display:flex; }
.ct-yt-btn { display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:11px;
  background:#16301C; color:#fff; font-size:13.5px; font-weight:700; text-decoration:none; }
.ct-yt-btn.vivo { background:#D33; }
.ct-yt-btn span:first-of-type { flex:1; }
.ct-yt-add { display:flex; align-items:center; justify-content:center; gap:11px; width:100%; padding:11px;
  border:1.5px solid var(--border); border-radius:11px; background:#fff; color:var(--t2);
  font-family:var(--font); font-size:13.5px; font-weight:700; cursor:pointer; }
.ct-yt-add:hover { border-color:#FF0000; color:#111; }
/* botão do vídeo técnico (compartilhado pelas telas que abrem um jogo) */
.jg-vt { display:flex; align-items:center; gap:11px; padding:11px 14px; margin-top:8px;
  border:1.5px solid var(--border); border-radius:11px; background:#fff; color:#16301C;
  text-decoration:none; font-family:var(--font); }
.jg-vt:hover { border-color:#009C3B; background:#FAFCFA; }
.jg-vt b { display:block; font-size:13.5px; font-weight:700; }
.jg-vt small { display:block; font-size:11.5px; color:var(--t3); font-weight:600; margin-top:1px; }

/* ══ CENTRAL DA RODADA — redesign F4.4 ═══════════════════════════
   Portado do mockup do Claude Design, com uma troca deliberada: o verde-escuro
   do mockup virou o AZUL #002776 da marca. Verde no site já significa
   oficial/positivo; a Central precisava de identidade própria, e o azul do
   logo dá isso sem inventar cor nova. Vermelho continua exclusivo do AO VIVO. */
.ct-card { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-bottom:16px; }
.ct-card.fixada { border-color:#002776; box-shadow:0 3px 20px rgba(0,39,118,.13); }
.ct-hd { background:#002776; padding:14px 16px; display:flex; flex-direction:column; gap:3px; color:#fff; }
.ct-hd-l { display:flex; align-items:center; gap:9px; }
.ct-hd-l b { font-size:16px; font-weight:800; flex:1; min-width:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; letter-spacing:-.2px; }
.ct-hd small { font-size:11.5px; font-weight:500; opacity:.68; padding-left:24px; }
.ct-pill { display:flex; align-items:center; gap:6px; border-radius:999px; padding:5px 10px;
  font-size:11px; font-weight:800; letter-spacing:.04em; white-space:nowrap; flex:none; }
.ct-pill.vivo { background:#D33; color:#fff; }
.ct-pill.prox { background:#009C3B; color:#fff; }
.ct-pill.fim { background:rgba(255,255,255,.14); color:rgba(255,255,255,.85); }
.ct-dot { width:6px; height:6px; border-radius:999px; background:currentColor;
  animation:ctPulsa 1.4s ease-in-out infinite; flex:none; }
.ct-pill.vivo .ct-dot, .ct-badge.vivo .ct-dot { background:#fff; }
@keyframes ctPulsa { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.7)} }
.ct-body { padding:14px 12px 0; display:flex; flex-direction:column; gap:12px; }
.ct-sec { display:flex; align-items:center; justify-content:space-between; font-size:11px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); }
/* Era um rótulo que só descrevia; virou controle. Estilo de botão discreto:
   precisa parecer clicável sem competir com o título da seção. */
.ct-ord { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  color:var(--t3); text-transform:none; letter-spacing:0;
  background:none; border:1px solid transparent; border-radius:20px; padding:3px 9px;
  cursor:pointer; font-family:var(--font); transition:background .12s, border-color .12s; }
.ct-ord:hover { background:#F4F0EA; border-color:var(--border); color:#16301C; }
/* avatar de iniciais quando o time não tem escudo */
.ct-ava { border-radius:999px; background:#002776; color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:800; flex:none; }
/* ── cartão cheio (jogo com ação) ── */
.ct-g { border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden; cursor:pointer; }
.ct-g:hover { border-color:#002776; }
.ct-g.vivo { border:1.5px solid #D33; }
.ct-g.vivo:hover { border-color:#B22; }
.ct-strip { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid #F2EEE7; }
.ct-g.vivo .ct-strip { border-bottom-color:#F3E2E2; }
.ct-badge { border-radius:6px; padding:3px 8px; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; white-space:nowrap; flex:none; display:flex; align-items:center; gap:6px; }
.ct-badge.vivo { background:#D33; color:#fff; }
.ct-badge.final { background:#E6F4EA; color:#007A2E; }
.ct-strip-txt { font-size:11.5px; color:var(--t3); min-width:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ct-strip-txt b { font-weight:700; color:#111; }
.ct-strip-txt b.vm { color:#D33; font-weight:800; }
.ct-strip-txt b.of { color:#007A2E; font-weight:800; }
.ct-g-lines { padding:12px 12px 10px; display:flex; flex-direction:column; gap:9px; }
.ct-g-l { display:flex; align-items:center; gap:10px; }
.ct-g-nome { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:14px; font-weight:800; color:#111; }
.ct-g-pl { font-size:20px; font-weight:800; color:var(--t3); flex:none; font-variant-numeric:tabular-nums; }
.ct-g-l.venc .ct-g-pl, .ct-g-l.venc .ct-g-nome { color:#007A2E; }
.ct-g-l:not(.venc) .ct-g-nome { font-weight:600; }
.ct-g-btns { display:flex; gap:8px; padding:0 12px 12px; }
.ct-b-ver, .ct-b-com { flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  border-radius:10px; padding:9px 0; font-size:12.5px; font-weight:700; cursor:pointer;
  font-family:var(--font); text-decoration:none; }
.ct-b-ver { background:#002776; color:#fff; border:0; }
.ct-b-ver:hover { background:#001A52; }
.ct-b-com { background:#fff; border:1px solid var(--border); color:#111; }
.ct-b-com:hover { border-color:#002776; }
/* ── linhas compactas ── */
.ct-rows { border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden; }
.ct-row { display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; }
.ct-row + .ct-row { border-top:1px solid #F2EEE7; }
.ct-row:hover { background:#FAF8F4; }
.ct-row-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ct-row-times { font-size:13px; font-weight:700; color:#111; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ct-row-times i { font-style:normal; color:var(--t3); font-weight:600; }
.ct-row-sub { font-size:11px; color:var(--t3); font-weight:600; }
.ct-row-sub b { color:#111; }
.ct-row-pl { font-size:13.5px; font-weight:800; white-space:nowrap; flex:none;
  font-variant-numeric:tabular-nums; color:var(--t3); }
.ct-row-pl b { font-weight:800; color:var(--t3); }
.ct-row-pl b.venc { color:#007A2E; }
.ct-row-pl i { font-style:normal; font-weight:600; margin:0 3px; }
.ct-row-yt { display:flex; flex:none; }
.ct-row-n { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:700;
  color:var(--t3); flex:none; }
/* ── conversa ── */
.ct-pe { border-top:1px solid var(--border); padding:14px 14px 6px; margin-top:14px;
  display:flex; flex-direction:column; gap:11px; }
.ct-conv-hd { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); }
.ct-chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.ct-chips::-webkit-scrollbar { display:none; }
.ct-chip { flex:none; display:flex; align-items:center; gap:6px; border:1px solid var(--border);
  background:#fff; color:var(--t2); border-radius:999px; padding:6px 13px; font-family:var(--font);
  font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.ct-chip:hover { border-color:#002776; }
.ct-chip.on { background:#002776; border-color:#002776; color:#fff; font-weight:700; }
.ct-chip .ct-dot { background:#D33; }
.ct-tagbar { display:flex; align-items:center; gap:8px; background:#FFF7E0; border:1px solid #F0E2B8;
  border-radius:10px; padding:8px 12px; font-size:12.5px; color:#8a6d00; }
.ct-tagbar button { margin-left:auto; border:0; background:none; color:#8a6d00; font-family:var(--font);
  font-size:12px; font-weight:700; cursor:pointer; }
.ct-cmt-tag { display:inline-flex; align-items:center; gap:4px; background:#F2EEE7; color:#555;
  border-radius:999px; padding:2px 9px; font-size:10.5px; font-weight:700; margin:3px 0 2px; cursor:pointer; }
.ct-cmt-tag:hover { background:#E7EDF9; color:#002776; }
/* ── modal do jogo (mantido do design anterior) ── */
.ct-m-times { display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:10px; }
.ct-m-t { display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; text-align:center; }
.ct-m-t b { font-size:13.5px; font-weight:700; color:#111; }
.ct-m-x { color:var(--t3); font-size:13px; }
.ct-m-meta { text-align:center; font-size:12.5px; color:var(--t3); margin-bottom:16px; }
.ct-m-tr { border-top:1px solid var(--border); padding-top:14px; }
.ct-btn-lin { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:10px;
  border:1.5px solid var(--border); border-radius:11px; background:#fff; color:var(--t2);
  font-family:var(--font); font-size:13px; font-weight:700; cursor:pointer; }
.ct-btn-lin:hover { border-color:#009C3B; color:#111; }
.ct-btn-lin.add { color:#007A2E; }
.ct-m-dica { font-size:11.5px; color:var(--t3); text-align:center; margin-top:9px; line-height:1.5; }
.ct-btn-com { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px;
  margin-top:14px; border:0; border-radius:11px; background:#E9F7EE; color:#007A2E;
  font-family:var(--font); font-size:13.5px; font-weight:700; cursor:pointer; }
.ct-btn-com:hover { background:#DCF0E4; }
@media (max-width:640px){ .ct-hd { padding:12px 14px; } .ct-body { padding:11px 10px 0; } }
/* ══ GRUPOS (Fase F5) ══ */
.gp-topo { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.gp-topo h1 { margin:0; font-size:21px; font-weight:800; letter-spacing:-.3px; }
.gp-sec { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin:18px 0 9px; }
.gp-lista { display:flex; flex-direction:column; gap:8px; }
.gp-card { display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--border);
  border-radius:13px; padding:13px 15px; text-decoration:none; color:#111; }
.gp-card:hover { border-color:#007A2E; }
.gp-card > svg:last-child { color:var(--t3); flex:none; }
.gp-ava { width:42px; height:42px; border-radius:11px; color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:14px; flex:none; }
.gp-card-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.gp-card-tx b { font-size:14.5px; font-weight:700; }
.gp-card-tx small { font-size:11.5px; color:var(--t3); font-weight:600; }
.gp-card-tx small.gp-desc { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gp-vazio { border:1px dashed var(--border); border-radius:12px; padding:16px; font-size:12.5px;
  color:var(--t3); text-align:center; }
.gp-l { display:block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--t3); margin:12px 0 5px; }
.gp-priv { display:flex; gap:10px; align-items:flex-start; margin-top:14px; cursor:pointer; }
.gp-priv input { margin-top:3px; }
.gp-priv b { display:block; font-size:13px; }
.gp-priv small { display:block; font-size:11.5px; color:var(--t3); margin-top:1px; }
/* `aspect-ratio` no lugar de altura fixa: a faixa acompanha a largura e
   mantém a MESMA proporção do recorte, então o enquadramento escolhido é o
   que aparece, em qualquer tela. Piso e teto protegem os extremos. */
.gp-capa { aspect-ratio:3.5 / 1; min-height:104px; max-height:230px;
  border-radius:16px; display:flex; align-items:center; justify-content:center; }
.gp-capa-sigla { font-size:38px; font-weight:800; color:rgba(255,255,255,.9); letter-spacing:.02em; }
.gp-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px 4px 0; flex-wrap:wrap; }
.gp-cab h1 { margin:0; font-size:20px; font-weight:800; letter-spacing:-.3px; }
.gp-meta { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--t3); font-weight:600; margin-top:3px; }
.gp-cab-desc { font-size:13px; color:var(--t2); margin-top:7px; max-width:52ch; }
.gp-cab-b { display:flex; gap:8px; flex:none; }
.gp-membros-btn { display:flex; align-items:center; gap:7px; background:none; border:0; color:var(--t3);
  font-family:var(--font); font-size:12.5px; font-weight:700; cursor:pointer; padding:10px 4px; }
.gp-membros-btn:hover { color:#007A2E; }
.gp-composer { padding:14px; margin-bottom:14px; }
.gp-m-lista { display:flex; flex-direction:column; max-height:46vh; overflow-y:auto; }
.gp-m-linha { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 2px;
  border-bottom:1px solid #F2EFEA; font-size:13.5px; }
.gp-m-adm { font-size:10px; font-weight:800; background:#E9F7EE; color:#007A2E; border-radius:7px; padding:2px 7px; }
.gp-m-acoes { display:flex; gap:6px; }
.gp-m-acoes button { border:1px solid var(--border); background:#fff; border-radius:8px; padding:4px 9px;
  font-family:var(--font); font-size:11px; font-weight:700; cursor:pointer; color:var(--t2); }
.gp-m-acoes button.perigo { color:#B22; border-color:#EAD5D5; }
.gp-add { margin-bottom:12px; position:relative; }
.gp-add-item { display:block; width:100%; text-align:left; border:0; background:#fff; padding:8px 11px;
  font-family:var(--font); font-size:13px; cursor:pointer; border-bottom:1px solid #F2EFEA; }
.gp-add-item:hover { background:#F6F4EF; }

/* F6: indicador "em {grupo}" no cabeçalho do post */
.fd-em-grupo { display:inline-flex; align-items:center; gap:4px; color:#007A2E; font-weight:700;
  text-decoration:none; }
.fd-em-grupo:hover { text-decoration:underline; }

/* ══ Composer compartilhado (G1) ══
   Estas regras viviam só no /social/perfil/, mas o feed e agora os grupos
   também usam as classes — o recortador de imagem aparecia sem estilo quando
   acionado de fora do perfil. Morando no módulo, seguem quem usa. */
/* `.ap-btn` e `.ap-m-acts` faltavam aqui: só as variantes estavam no módulo,
   e a base continuava no CSS de cada página. Na de grupos, que não a tinha, o
   modal de editar publicação abria com "Cancelar" e "Salvar" sem estilo. */
.ap-btn {
  display:inline-flex; align-items:center; gap:7px; background:#fff; color:#16301C;
  border:1.5px solid var(--border,#E2DDD5); border-radius:10px; padding:9px 18px;
  font-family:var(--font); font-size:13.5px; font-weight:700; cursor:pointer;
  text-decoration:none; transition:border-color .13s;
}
.ap-btn:hover { border-color:#009C3B; }
.ap-btn:focus-visible { outline:2px solid #009C3B; outline-offset:1px; }
.ap-btn-primary { background:#009C3B; color:#fff; border-color:#009C3B; }
.ap-btn-primary:hover { background:#007A2E; border-color:#007A2E; }
.ap-btn-danger { background:#FDECEC; color:#B3261E; border-color:#F5C6C2; }
.ap-btn-danger:hover { border-color:#B3261E; }
.ap-m-acts { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }
.ap-flabel { font-size:11px; font-weight:700; color:var(--t3); }
.ap-fcampo .ap-flabel { display:block; margin-bottom:4px; }
.ap-crop-box { background:#16301C; border-radius:12px; overflow:hidden; max-height:56vh; }
.ap-crop-box img { max-width:100%; display:block; }
.gp-composer-host { margin-bottom:14px; }

/* ══ Enquetes (G2) ══ */
.fd-enq { display:flex; flex-direction:column; gap:6px; margin:2px 0 10px; }
.fd-enq-op { position:relative; overflow:hidden; display:flex; align-items:center; gap:8px;
  width:100%; text-align:left; background:#fff; border:1.5px solid var(--border); border-radius:11px;
  padding:10px 13px; font-family:var(--font); font-size:13.5px; font-weight:600; color:#16301C;
  cursor:pointer; transition:border-color .12s; }
.fd-enq-op:hover { border-color:#009C3B; }
.fd-enq-res { justify-content:space-between; }
.fd-enq-res.on { border-color:#009C3B; }
.fd-enq-barra { position:absolute; left:0; top:0; bottom:0; background:#E9F7EE; z-index:0;
  transition:width .35s cubic-bezier(.2,.7,.3,1); }
.fd-enq-res.on .fd-enq-barra { background:#D6F0E0; }
.fd-enq-tx { position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px;
  min-width:0; overflow:hidden; text-overflow:ellipsis; }
.fd-enq-tx svg { color:#009C3B; flex:none; }
.fd-enq-pct { position:relative; z-index:1; font-weight:800; font-size:12.5px; color:var(--t2); flex:none; }
.fd-enq-pe { font-size:11.5px; color:var(--t3); padding:2px 2px 0; }
/* editor no composer */
.fd-enq-ed { border:1px dashed var(--border); border-radius:12px; padding:11px 12px; margin:8px 0 2px; }
.fd-enq-ed-tit { font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--t3); margin-bottom:8px; }
.fd-enq-ed-l { display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.fd-enq-in { flex:1; min-width:0; border:1.5px solid var(--border); border-radius:9px; padding:8px 11px;
  font-family:var(--font); font-size:13px; color:#111; background:#fff; }
.fd-enq-in:focus { outline:none; border-color:#009C3B; }
.fd-enq-x { background:none; border:0; color:var(--t3); cursor:pointer; padding:4px; display:flex; }
.fd-enq-x:hover { color:#B22; }
.fd-enq-ed-acts { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:2px; }
.fd-enq-add { display:inline-flex; align-items:center; gap:5px; background:none; border:0; cursor:pointer;
  font-family:var(--font); font-size:12px; font-weight:700; color:var(--t2); padding:2px 0; }
.fd-enq-add:hover { color:#009C3B; }
.fd-enq-lim { font-size:11.5px; color:var(--t3); }
.fd-btn.on { border-color:#009C3B; color:#007A2E; }

/* ══ Anexo de documento (G3) ══ */
.fd-doc { display:flex; align-items:center; gap:11px; background:#fff; border:1.5px solid var(--border);
  border-radius:12px; padding:11px 13px; text-decoration:none; color:#16301C; margin:2px 0 10px;
  transition:border-color .12s; }
.fd-doc:hover { border-color:#009C3B; }
.fd-doc-ic { width:38px; height:38px; border-radius:9px; background:#F3EDE4; color:#A3322B;
  display:flex; align-items:center; justify-content:center; flex:none; }
.fd-doc b { display:block; font-size:13.5px; font-weight:700; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.fd-doc-sub { display:block; font-size:11.5px; color:var(--t3); font-weight:600; margin-top:1px; }
.fd-doc-go { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700;
  color:#007A2E; flex:none; }
.fd-doc-prev { display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#F6F4EF; border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.fd-doc-mini { display:flex; align-items:center; gap:10px; min-width:0; }
.fd-doc-mini svg { color:#A3322B; flex:none; }
.fd-doc-mini b { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:block; max-width:38ch; }

/* ══ Identidade visual dos grupos (G4) ══ */
/* A capa virou um `<img>` dentro do div (antes era `background-image`, que
   quebrava por causa das aspas da URL). O `<img>` precisa ser contido pelo
   div, senão entra na página no tamanho natural do arquivo — 2000px de
   largura passando por cima da barra lateral e do cabeçalho. */
.gp-capa-img { position:relative; overflow:hidden; padding:0; display:block; }
.gp-capa-img img { width:100%; height:100%; object-fit:cover; display:block; }
img.gp-ava { object-fit:cover; }
img.sc-grp { object-fit:cover; }
.gp-icone { width:52px; height:52px; border-radius:13px; flex:none; margin-right:2px; object-fit:cover; }
.gp-icone-sig { display:flex; align-items:center; justify-content:center; color:#fff;
  font-weight:800; font-size:17px; }
.gp-cab { align-items:center; }
/* controles no modal Editar */
.gp-img-row { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.gp-img-cel { display:flex; align-items:center; gap:12px; }
.gp-img-cel b { display:block; font-size:13px; }
.gp-img-cel small { display:block; font-size:11.5px; color:var(--t3); margin-top:1px; }
.gp-img-mini { width:46px; height:46px; border-radius:11px; flex:none; object-fit:cover;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; }
/* A miniatura da capa no modal de edição também segue 3,5:1 — mostrar uma
   proporção aqui e outra na faixa faria a pessoa duvidar do que escolheu.
   112x32 é a mesma razão do recorte e da exibição. */
.gp-img-mini.gp-img-larga { width:112px; height:32px; border-radius:8px; }
.gp-img-acts { display:flex; gap:8px; margin-top:5px; }
.gp-img-acts button { border:1px solid var(--border); background:#fff; border-radius:8px;
  padding:4px 10px; font-family:var(--font); font-size:11.5px; font-weight:700; cursor:pointer; color:var(--t2); }
.gp-img-acts button:hover { border-color:#16301C; color:#16301C; }
.gp-img-acts button.perigo { color:#B22; border-color:#EAD5D5; }

/* ══ Post fixado e avisos de grupo (G5) ══ */
.fd-post-fixado { border-color:#C9E4D3; }
.fd-fixado { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:#007A2E; margin-bottom:8px; }
.fd-fixado svg { color:#007A2E; }
.gp-barra { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.gp-membros-btn.on { color:#007A2E; }
.gp-membros-btn.on svg { color:#007A2E; }

/* ══ Boas-vindas e prévia da Central (G6) ══ */
.fd-bv { position:relative; padding:18px 20px 16px; margin-bottom:14px;
  background:linear-gradient(180deg,#F2FAF5,#fff); border-color:#C9E4D3; }
.fd-bv-x { position:absolute; top:10px; right:10px; background:none; border:0; cursor:pointer;
  color:var(--t3); padding:5px; display:flex; border-radius:8px; }
.fd-bv-x:hover { background:#E4EFE8; color:#16301C; }
.fd-bv-tit { font-size:16px; font-weight:800; color:#16301C; }
.fd-bv-sub { font-size:12.5px; color:var(--t3); margin:2px 0 12px; }
.fd-bv-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.fd-bv-i { display:flex; align-items:flex-start; gap:9px; text-decoration:none; color:#16301C;
  background:#fff; border:1px solid var(--border); border-radius:11px; padding:10px 12px; }
a.fd-bv-i:hover { border-color:#009C3B; }
.fd-bv-ic { color:#007A2E; flex:none; display:flex; margin-top:1px; }
.fd-bv-i b { display:block; font-size:13px; font-weight:700; }
.fd-bv-i small { display:block; font-size:11px; color:var(--t3); margin-top:1px; line-height:1.35; }
@media (max-width:520px){ .fd-bv-grid { grid-template-columns:minmax(0,1fr); } }
.ct-prev { display:flex; align-items:center; gap:7px; padding:8px 12px 0; min-width:0; }
.ct-prev-tx { font-size:12px; color:var(--t2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; min-width:0; }
.ct-prev-tx b { color:#16301C; font-weight:700; }

/* ── Central: escala do jogo na thread ──
   A Central se anuncia como "vídeo, escala e conversa"; a escala faltava.
   Antes da rodada é o que mais importa — quem abre na sexta quer saber quem
   apita o quê, sem ter de ir ao calendário procurar. */
.ct-th-esc { margin: 12px 0 0; }
.ct-esc { border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; background: #fff; }
.ct-esc-tit { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; }
/* Escala ainda não fechada pode mudar: dizer isso evita que alguém organize a
   viagem em cima de um dado provisório. */
.ct-esc-prov { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 10px;
  font-weight: 700; color: #8A6D1F; background: #FDF3E0; border-radius: 9px; padding: 1px 7px; }
.ct-esc-l { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 13px; }
.ct-esc-l .ct-esc-p { flex: none; min-width: 30px; text-align: center; background: #16301C;
  color: #fff; border-radius: 7px; padding: 1px 6px; font-size: 10.5px; font-weight: 800; }
.ct-esc-l .ct-esc-n { color: #16301C; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nome-link: sem cara de link azul, mas com sinal claro no hover. */
a.ct-esc-n { text-decoration: none; }
a.ct-esc-n:hover { color: #007A2E; text-decoration: underline; }
/* O próprio nome em destaque: numa lista de sete, achar o seu é a primeira
   coisa que se faz. */
.ct-esc-l.eu .ct-esc-n { font-weight: 800; color: #007A2E; }
.ct-esc-l.eu .ct-esc-p { background: #007A2E; }
.ct-esc-vazio { font-size: 12.5px; color: var(--t3); padding: 9px 2px; }

/* Separador de dia na Central: sábado e domingo deixam de virar uma lista só
   assim que a rodada ganha conversa. */
.ct-sec.dia { display: flex; align-items: center; gap: 8px; }
.ct-sec.dia .ct-sec-n { font-size: 10px; font-weight: 700; color: var(--t3);
  background: #F4F0EA; border-radius: 9px; padding: 1px 7px; letter-spacing: 0; }