/* =========================================================
   thefacebook REPAGINADO (2026-10-03) — tudo com o prefixo .hb- (a rede),
   .rc- (bate-papo) e os atributos data-fr (moldura), data-tema (tema do
   perfil), data-bg (fundo do status), data-fx (filtro da foto), data-ef
   (efeito que cai no perfil), data-cor="livre" (cor livre do nome).
   O visual de 2004 continua: azul #3b5998, cinza #f7f7f7, bordas #d8dfea,
   Lucida Grande/Tahoma 11 px. Carregado depois do style.css; o celular está
   no bloco "THEFACEBOOK REPAGINADO" do mobile.css.
   ========================================================= */

/* caixas de escolher: o seletor do Windows (o estilo escuro do resto do site deixava parecendo desligado) */
.hb select { all: revert; font: 11px "Lucida Grande", Tahoma, Verdana, sans-serif; color: #333; }

/* ---------- topo: busca, sininho e som ---------- */
.hb-top { gap: 14px; }
.hb-busca { flex: 0 1 190px; min-width: 0; }
.hb .hb-busca input { box-sizing: border-box; width: 100%; padding: 3px 6px; border: 1px solid #29447e; border-radius: 0; background: #fff; color: #333; }
.hb .hb-busca input::placeholder { color: #666; }
.hb-top-acoes { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hb .hb-top-acoes button { all: unset; position: relative; display: grid; place-items: center; width: 30px; height: 30px; font-size: 16px; cursor: pointer; }
.hb .hb-top-acoes button:hover, .hb .hb-top-acoes button.on { background: #6d84b4; }
.hb .hb-top-acoes button:focus-visible { outline: 2px solid #f7b82d; outline-offset: 1px; }
.hb-sino .hb-badge { position: absolute; top: 0; right: -2px; min-width: 9px; padding: 0 3px; font-size: 9px; line-height: 13px; text-align: center; border: 1px solid #fff; }
.hb-sino .hb-badge[hidden] { display: none; }
.hb .hb-top nav { flex: 0 1 auto; }
.hb-net { display: none; }

/* ---------- corpo: lateral, mural e a coluna de novidades (embaixo da lateral) ---------- */
.hb-body { grid-template-rows: auto 1fr; align-items: start; }
.hb-side { grid-column: 1; grid-row: 1; }
.hb-main { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.hb-extra { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hb .hb-links button span[aria-hidden] { display: inline-block; width: 1.3em; text-align: center; }
.hb-me b { overflow-wrap: anywhere; }
.hb-box { border: 1px solid #d8dfea; background: #fff; }
.hb-box h3 { margin: 0; padding: 3px 7px; border-top: 1px solid #3b5998; background: #d8dfea; color: #3b5998; font-size: 11px; }
.hb-box > p { margin: 6px 7px; }
.hb-mini { list-style: none; margin: 0; padding: 4px 7px 6px; }
.hb-mini li { padding: 2px 0; overflow-wrap: anywhere; }
.hb-mini small { color: #666; }
.hb-diaria { border-color: #8ec07c; background: #effbea; }
.hb-diaria.ok { border-color: #d8dfea; background: #f7f7f7; color: #555; }
.hb-side-box { margin-top: 0; }
.hb-intro { margin: 0 0 8px; }

/* status do bate-papo, como no MSN (bolinha) */
.hb-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.35); vertical-align: 0; background: #9aa0a6; }
.hb-dot[data-s="d"] { background: #2fa84f; }
.hb-dot[data-s="a"] { background: #e8a317; }
.hb-dot[data-s="o"] { background: #d93025; }
.hb-dot[data-s="off"] { background: #fff; }
.hb-onagora { display: inline-flex; align-items: center; gap: 5px; color: #333; }

/* anúncios de 2003 (girando) e os botõezinhos 88×31 */
.hb-ad { border: 1px solid #ccc; background: #fff; }
.hb-ad > small { display: block; padding: 1px 5px; color: #666; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
.hb .hb-ad-in { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; width: 100%; min-height: 108px; padding: 9px 9px 8px; cursor: pointer; text-align: center; }
.hb .hb-ad-in:focus-visible { outline: 2px solid #f7b82d; outline-offset: -2px; }
.hb-ad-in b { font: 900 15px/1.05 Impact, "Arial Black", Tahoma, sans-serif; letter-spacing: 0.02em; }
.hb-ad-in span { font-size: 11px; line-height: 1.3; }
.hb-ad-in i { align-self: center; margin-top: 2px; padding: 1px 8px; border: 1px solid; font: 700 10px Tahoma, sans-serif; font-style: normal; text-decoration: underline; }
.hb-ad-in[data-ad="melvalds"] { background: linear-gradient(#fff6d6, #ffe08a); color: #5a2d00; }
.hb-ad-in[data-ad="golden"] { background: radial-gradient(circle at 50% 0, #fff3b0, #e0a800 70%); color: #3b2600; }
.hb-ad-in[data-ad="palace"] { background: #160022; color: #ffe600; text-shadow: 0 0 4px #ff00aa; }
.hb-ad-in[data-ad="palace"] span { color: #fff; text-shadow: none; }
.hb-ad-in[data-ad="radio"] { background: linear-gradient(135deg, #0d47a1, #1976d2); color: #fff; }
.hb-ad-in[data-ad="post"] { background: #f4f1e8; color: #1a1a1a; font-family: Georgia, serif; }
.hb-ad-in[data-ad="post"] b { font-family: "Libre Baskerville", Georgia, serif; }
.hb-ad-in[data-ad="online"] { background: linear-gradient(#e3f2fd, #bbdefb); color: #0d2f5a; }
.hb-ad-in[data-ad="escola"] { background: #7a1f1f; color: #ffd27a; }
.hb-ad-in[data-ad="escola"] span { color: #fff; }
.hb-ad-in[data-ad="moradores"] { background: #ecefe6; color: #263238; }
.hb-ad-in:hover b { text-decoration: underline; }
.hb-88 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.hb-88 span { display: grid; place-items: center; height: 31px; padding: 0 2px; border: 1px solid; border-color: #fff #555 #555 #fff; background: linear-gradient(#e8e8e8, #c7c7c7); color: #222; font: 700 9px/1.05 Tahoma, Verdana, sans-serif; text-align: center; }
.hb-88 span:nth-child(2) { background: #000; color: #39ff14; font-family: "Courier New", monospace; }
.hb-88 span:nth-child(3) { background: linear-gradient(#3b5998, #29447e); color: #fff; }

/* ---------- emojis e janelinhas (reações, cutucadas, painel de emojis) ---------- */
.hb-campo { position: relative; display: flex; flex: 1 1 auto; min-width: 0; align-items: stretch; }
/* largura mínima zero: o campo encolhe junto com a tela (o tamanho natural de um <input> passa de 150 px) */
.hb-campo > :is(input, textarea) { flex: 1 1 0; min-width: 0; width: 0; }
:is(.hb-recado, .hb-fotoform, .hb-enqform) { grid-template-columns: minmax(0, 1fr); }
.hb .hb-emo-btn { all: unset; flex: none; display: grid; place-items: center; width: 24px; margin-left: -1px; border: 1px solid #bdc7d8; background: #f7f7f7; font-size: 13px; cursor: pointer; }
.hb .hb-emo-btn:hover { background: #fff6c8; }
.hb .hb-emo-btn:focus-visible { outline: 2px solid #f7b82d; outline-offset: 1px; }
.hb-campo-area { align-items: stretch; }
.hb-campo-area textarea { box-sizing: border-box; min-height: 60px; padding: 4px 5px; border: 1px solid #bdc7d8; font: 11px "Lucida Grande", Tahoma, sans-serif; resize: vertical; }
.hb-campo-area .hb-emo-btn { align-items: start; padding-top: 4px; }
.hb-pop { position: fixed; z-index: 1000; box-sizing: border-box; max-width: calc(100vw - 16px); border: 1px solid #29447e; background: #fff; color: #333; font: 11px/1.4 "Lucida Grande", Tahoma, Verdana, sans-serif; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); }
.hb-pop button { all: unset; box-sizing: border-box; cursor: pointer; }
.hb-pop button:focus-visible { outline: 2px solid #f7b82d; outline-offset: -2px; }
.hb-pop-tit { margin: 0; padding: 6px 10px; background: #3b5998; color: #fff; font-weight: 700; }
.hb-emo { width: 304px; }
.hb-emo-tabs { display: flex; border-bottom: 1px solid #d8dfea; background: #eceff5; }
.hb-emo-tabs button { flex: 1; padding: 5px 0; text-align: center; font-size: 16px; }
.hb-emo-tabs button:hover { background: #d8dfea; }
.hb-emo-lista { max-height: 220px; overflow: auto; padding: 0 6px 6px; overscroll-behavior: contain; }
.hb-emo-cat { position: sticky; top: 0; margin: 0; padding: 5px 2px 3px; background: #fff; color: #3b5998; font-weight: 700; }
.hb-emo-grade { display: grid; grid-template-columns: repeat(8, 1fr); }
.hb-emo-grade button { display: grid; place-items: center; height: 32px; font-size: 20px; border-radius: 3px; }
.hb-emo-grade button:hover { background: #fff6c8; }
.hb-pop-reacoes { border-radius: 22px; padding: 4px 6px; }
.hb-reacoes { display: flex; gap: 2px; }
.hb-reacoes button { display: flex; flex-direction: column; align-items: center; width: 44px; padding: 2px 0; border-radius: 16px; transition: transform 0.12s; }
.hb-reacoes button span { font-size: 26px; line-height: 1.1; }
.hb-reacoes button small { font-size: 9px; color: #555; }
.hb-reacoes button:hover, .hb-reacoes button:focus-visible { transform: translateY(-4px) scale(1.15); }
.hb-reacoes button[aria-pressed="true"] { background: #d8dfea; }
.hb-pop-cut { width: 250px; }
.hb-cut-ops { display: flex; flex-direction: column; max-height: 300px; overflow: auto; }
.hb-cut-ops button { padding: 6px 10px; border-bottom: 1px solid #eee; color: #3b5998; }
.hb-cut-ops button:hover { background: #d8dfea; }
.hb-cut-ops span { display: inline-block; width: 1.5em; font-size: 15px; }

/* ---------- caixa de publicar ---------- */
.hb-modos { flex-wrap: wrap; align-items: center; }
.hb-como { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 8px; color: #333; }
.hb .hb-como select { max-width: 190px; font: 11px Tahoma, sans-serif; }
.hb-composer .hb-status .hb-campo { flex: 1 1 200px; }
.hb-status .hb-campo input { padding: 3px 4px; border: 1px solid #bdc7d8; }
.hb-composer .hb-status { margin: 0; }
.hb-enqform { display: grid; gap: 4px; padding: 8px; }
.hb-enqform input { padding: 3px 5px; border: 1px solid #bdc7d8; }
#hb-eops { display: grid; gap: 4px; }
.hb-fotoform .hb-campo input { padding: 3px 5px; border: 1px solid #bdc7d8; }
#hb-comp-extras:empty { display: none; }
#hb-comp-extras { padding: 0 8px 6px; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hb .hb-chip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid #bdc7d8; border-radius: 11px; background: #fff; color: #3b5998; font-size: 11px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb .hb-chip:hover { border-color: #6d84b4; background: #eef1f7; }
.hb .hb-chip.on, .hb .hb-chip[aria-pressed="true"] { border-color: #3b5998; background: #d8dfea; font-weight: 700; }
.hb .hb-chip:focus-visible, .hb .hb-op:focus-visible { outline: 2px solid #f7b82d; outline-offset: 1px; }
.hb-painel { margin-top: 6px; padding: 6px; border: 1px solid #d8dfea; background: #fff; max-height: 230px; overflow: auto; overscroll-behavior: contain; }
.hb-ops { display: grid; gap: 3px; }
.hb-ops-sn { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.hb-ops-bg { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.hb-ops-tg { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 8px; }
.hb .hb-op { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid transparent; color: #333; cursor: pointer; overflow-wrap: anywhere; }
.hb .hb-op:hover { background: #eef1f7; }
.hb .hb-op.on { border-color: #3b5998; background: #d8dfea; font-weight: 700; }
.hb-ops-bg .hb-op { flex-direction: column; gap: 3px; padding: 4px; text-align: center; }
.hb-bgsw { display: grid; place-items: center; box-sizing: border-box; width: 100%; height: 34px; font: 700 13px Tahoma, sans-serif; }
.hb-fxsw { display: block; width: 100%; height: 34px; background: linear-gradient(135deg, #f6b26b, #6fa8dc 45%, #93c47d 70%, #e06666); }
.hb-previa { margin-top: 6px; padding: 6px 8px; border: 1px dashed #bdc7d8; background: #fff; overflow-wrap: anywhere; }
.hb-previa small { color: #666; }
.hb-comp-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0 8px 8px; }
.hb-iprev { position: relative; width: fit-content; max-width: 100%; }
.hb-iprev.hb-com-data::after { content: attr(data-data); position: absolute; right: 9px; bottom: 7px; color: #ff9a2e; font: 700 13px/1 "Courier New", monospace; text-shadow: 0 0 2px #ff5a00, 0 0 6px rgba(255, 120, 0, 0.7); letter-spacing: 1px; }

/* ---------- post: extras, fundo colorido, enquete, presente, página ---------- */
.hb-sn, .hb-lg, .hb-tg { color: #555; }
.hb-em { color: #555; white-space: nowrap; }
.hb-selo-pg { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 2px; background: #3b5998; color: #fff; font-size: 9px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.hb-av-pg { --pg: #3b5998; background: var(--pg); border-color: var(--pg); filter: none; font-size: 20px; }
.hb-av-pg.big { font-size: 48px; }
.hb-post-pg { background: linear-gradient(90deg, #f3f6fb, #fff 40%); }
/* Influencer: o post fixado no topo do mural (o destaque dourado vem do style.css → .hb-destaque) */
.hb-fixo { margin: 0 0 4px; color: #7a5a00; font: 700 10px/1.4 Tahoma, Verdana, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.hb-emonome { margin-left: 3px; font-size: 1em; }
.hb-bgcard { display: grid; place-items: center; min-height: 128px; margin: 6px 0 2px; padding: 22px 18px; text-align: center; background: #3b5998; color: #fff; font: 700 20px/1.3 Tahoma, Verdana, sans-serif; overflow-wrap: anywhere; }
.hb-bgcard .hb-txt { max-width: 34em; }
.hb-bgsw, .hb-bgcard { --sombra: 0 1px 3px rgba(0, 0, 0, 0.6); }
:is(.hb-bgcard, .hb-bgsw)[data-bg="azul"] { background: #3b5998; color: #fff; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="vermelho"] { background: #b71c1c; color: #fff; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="roxo"] { background: #5e1d8c; color: #fff; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="verde"] { background: #1b6e30; color: #fff; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="laranja"] { background: #c74100; color: #fff; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="rosa"] { background: #b0125a; color: #fff; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="preto"] { background: #141414; color: #fff; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="pordosol"] { background: linear-gradient(160deg, #ff7e5f, #c94b7c 55%, #4b2a7a); color: #fff; text-shadow: var(--sombra); }
:is(.hb-bgcard, .hb-bgsw)[data-bg="oceano"] { background: linear-gradient(#0a8fbf, #023e73); color: #fff; text-shadow: var(--sombra); }
:is(.hb-bgcard, .hb-bgsw)[data-bg="arcoiris"] { background: linear-gradient(90deg, #c62828, #d84315, #9e7c00, #2e7d32, #1565c0, #6a1b9a); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
:is(.hb-bgcard, .hb-bgsw)[data-bg="caderno"] { background: linear-gradient(90deg, transparent 26px, #e57373 26px 28px, transparent 28px), repeating-linear-gradient(#fdfbf2 0 23px, #9fb4e0 23px 24px); color: #1a3d8f; font-family: "Comic Sans MS", "Comic Neue", cursive; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="xadrez"] { background: repeating-conic-gradient(#1b1b1b 0 25%, #3a3a3a 0 50%) 0 0 / 28px 28px; color: #fff; text-shadow: var(--sombra); }
:is(.hb-bgcard, .hb-bgsw)[data-bg="coracoes"] { background: radial-gradient(circle at 30% 40%, #ff8fb8 0 5px, transparent 6px) 0 0 / 30px 30px, #d81b60; color: #fff; text-shadow: var(--sombra); }
:is(.hb-bgcard, .hb-bgsw)[data-bg="estrelas"] { background: radial-gradient(#fff 0 1px, transparent 1.6px) 0 0 / 34px 34px, radial-gradient(#cfe0ff 0 1px, transparent 1.6px) 17px 9px / 47px 47px, linear-gradient(#0a1530, #1b2d5c); color: #fff; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="natal"] { background: repeating-linear-gradient(135deg, #0f3d1e 0 18px, #8e1212 18px 36px); color: #fff; text-shadow: var(--sombra); }
:is(.hb-bgcard, .hb-bgsw)[data-bg="neon"] { background: #0b0010; color: #ff7ad9; text-shadow: 0 0 6px #ff3cc7, 0 0 14px #ff3cc7; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="kraft"] { background: repeating-linear-gradient(80deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 5px), #c9a46b; color: #2e1d05; font-family: "Courier New", monospace; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="vhs"] { background: repeating-linear-gradient(rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px), #10141c; color: #e8ecf2; font-family: VT323, "Courier New", monospace; font-size: 26px; text-shadow: 2px 0 #e0004d, -2px 0 #00c8ff; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="luzes"] { background: radial-gradient(circle, #ff5252 0 3px, transparent 4px) 0 0 / 40px 18px no-repeat, radial-gradient(circle, #ffd740 0 3px, transparent 4px) 10px 0 / 40px 14px, radial-gradient(circle, #69f0ae 0 3px, transparent 4px) 30px 4px / 40px 14px, #15161c; color: #fff; }
:is(.hb-bgcard, .hb-bgsw)[data-bg="chiclete"] { background: radial-gradient(#fff 0 3px, transparent 3.5px) 0 0 / 22px 22px, #ff9ccf; color: #6e0c3f; }
.hb-bgsw { font-size: 13px; }
.hb-bgsw[data-bg=""] { border: 1px dashed #bdc7d8; background: #fff; color: #3b5998; }

.hb-enq { margin: 6px 0 2px; padding: 8px; border: 1px solid #d8dfea; background: #f7f7f7; }
.hb-enq-q { margin: 0 0 6px; color: #333; font-weight: 700; font-size: 12px; overflow-wrap: anywhere; }
.hb .hb-enq-op { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; margin-bottom: 4px; padding: 4px 8px; border: 1px solid #bdc7d8; background: #fff; cursor: pointer; overflow: hidden; }
.hb .hb-enq-op:hover { border-color: #6d84b4; }
.hb .hb-enq-op:focus-visible { outline: 2px solid #f7b82d; outline-offset: 1px; }
.hb .hb-enq-op.on { border-color: #3b5998; font-weight: 700; }
.hb-enq-barra { position: absolute; inset: 0 auto 0 0; background: #d8dfea; transition: width 0.4s; }
.hb-enq-op.on .hb-enq-barra { background: #b8c6e0; }
.hb-enq-txt, .hb-enq-pct { position: relative; }
.hb-enq-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hb-enq-pct { color: #444; font-size: 10px; white-space: nowrap; }
.hb-enq .hb-meta { margin: 2px 0 0; }

.hb-presente { display: flex; align-items: center; gap: 12px; max-width: 420px; margin: 6px 0 2px; padding: 10px 12px; border: 1px solid #e2c822; background: repeating-linear-gradient(45deg, #fff9d7 0 10px, #fff4b8 10px 20px); overflow-wrap: anywhere; }
.hb-presente-emo { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid #fff; border-radius: 8px; background: #fff; font-size: 34px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.hb-presente p { margin: 2px 0 0; font-style: italic; }
.hb-post-presente .hb-linha { color: #333; }

/* reações */
.hb-reagir { display: inline-flex; align-items: center; gap: 0; }
.hb .hb-act-mais { padding: 2px 4px; margin-left: 2px; font-size: 10px; text-decoration: none; }
.hb .hb-act-mais:hover { background: #eef1f7; text-decoration: none; }
.hb-reacoes-emo { letter-spacing: -2px; margin-right: 2px; }

/* ---------- fotos: filtros (no navegador) e a data laranja da câmera ---------- */
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev, .hb-fxsw)[data-fx="sepia"] :is(img), .hb-fxsw[data-fx="sepia"] { filter: sepia(0.85) contrast(1.05) brightness(1.02); }
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev)[data-fx="pb"] img, .hb-fxsw[data-fx="pb"] { filter: grayscale(1) contrast(1.15); }
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev)[data-fx="vhs"] img, .hb-fxsw[data-fx="vhs"] { filter: saturate(1.5) contrast(1.15) hue-rotate(-8deg); }
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev)[data-fx="descartavel"] img, .hb-fxsw[data-fx="descartavel"] { filter: contrast(1.2) saturate(1.35) brightness(1.06) sepia(0.12); }
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev)[data-fx="polaroid"] img, .hb-fxsw[data-fx="polaroid"] { filter: sepia(0.25) saturate(1.25) brightness(1.08) contrast(0.95); }
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev)[data-fx="desbotado"] img, .hb-fxsw[data-fx="desbotado"] { filter: saturate(0.55) brightness(1.12) contrast(0.88); }
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev)[data-fx="noturno"] img, .hb-fxsw[data-fx="noturno"] { filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(3) brightness(0.9) contrast(1.2); }
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev)[data-fx="quente"] img, .hb-fxsw[data-fx="quente"] { filter: sepia(0.35) saturate(1.5) hue-rotate(-10deg); }
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev)[data-fx="frio"] img, .hb-fxsw[data-fx="frio"] { filter: saturate(0.8) brightness(1.05) contrast(1.05) hue-rotate(12deg); }
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev)[data-fx="lomo"] img, .hb-fxsw[data-fx="lomo"] { filter: contrast(1.45) saturate(1.6); }
:is(.hb-foto, .hb-thumb, .hb-lb-img, .hb-iprev)[data-fx="xerox"] img, .hb-fxsw[data-fx="xerox"] { filter: grayscale(1) contrast(2.4) brightness(1.15); }
:is(.hb-foto, .hb-iprev)[data-fx="polaroid"] img { padding: 6px 6px 22px; background: #fff; }
/* camadas por cima da foto: linhas do VHS e da visão noturna, cantos escuros (descartável, lomo), azul do frio */
:is(.hb-foto, .hb-iprev):is([data-fx="vhs"], [data-fx="noturno"], [data-fx="descartavel"], [data-fx="lomo"], [data-fx="frio"])::after { content: ""; position: absolute; inset: 4px; pointer-events: none; }
:is(.hb-foto, .hb-iprev):is([data-fx="vhs"], [data-fx="noturno"])::after { background: repeating-linear-gradient(rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px); }
:is(.hb-foto, .hb-iprev)[data-fx="vhs"]::after { box-shadow: inset 3px 0 0 rgba(255, 0, 80, 0.25), inset -3px 0 0 rgba(0, 200, 255, 0.25); }
:is(.hb-foto, .hb-iprev)[data-fx="descartavel"]::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(60, 25, 0, 0.35)); }
:is(.hb-foto, .hb-iprev)[data-fx="lomo"]::after { background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.6)); }
:is(.hb-foto, .hb-iprev)[data-fx="frio"]::after { background: rgba(40, 110, 255, 0.12); }
.hb-fxsw[data-fx=""] { filter: none; }
.hb-data { position: absolute; right: 12px; bottom: 10px; color: #ff9a2e; font: 700 15px/1 "Courier New", monospace; text-shadow: 0 0 2px #ff5a00, 0 0 7px rgba(255, 120, 0, 0.75); letter-spacing: 1px; pointer-events: none; }
.hb-foto-perfil .hb-data { font-size: 10px; right: 8px; bottom: 7px; }
.hb .hb-thumb { position: relative; }

/* ---------- notificações ---------- */
.hb-notifs { list-style: none; margin: 0; padding: 0; }
.hb-notifs li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 6px; border-bottom: 1px solid #eee; }
.hb-notifs li.nova { background: #eef3ff; }
.hb-notifs .hb-av { width: 32px; height: 32px; font-size: 11px; }
.hb .hb-notif-txt { all: unset; display: block; color: #333; cursor: pointer; overflow-wrap: anywhere; }
.hb .hb-notif-txt:hover { color: #3b5998; text-decoration: underline; }
.hb .hb-notif-txt:focus-visible { outline: 2px solid #f7b82d; outline-offset: 1px; }
.hb-notifs small { color: #666; }
.hb-notifs .hb-btn { margin-top: 4px; }

/* ---------- cutucadas ---------- */
.hb-poke-emo { font-size: 24px; }
.hb-cut-espera { max-width: 160px; margin: 0; text-align: center; }

/* ---------- perfil: papel de parede, capa, efeito, música ----------
   O papel de parede é uma <img> atrás das caixas. Antes era fundo de CSS em .hb-profile.hb-com-papel, mas a regra
   .hb-profile:is(.hb-com-papel, [data-tema]:not([data-tema=""])) do style.css é mais forte (o :is() pega o peso do
   argumento mais forte) e sempre pintava o fundo do tema por cima: a imagem nunca aparecia. */
.hb-profile { position: relative; isolation: isolate; }
.hb-profile.hb-com-papel { background: var(--tp-bg); }
.hb-profile:is(.hb-com-papel, [data-tema]:not([data-tema=""])) { padding: 12px; }
.hb-papel-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hb-papel-img[hidden] { display: none; }
.hb-profile > :is(.hb-pic, .hb-pinfo, .hb-capa) { position: relative; z-index: 1; }
.hb-capa { grid-column: 1 / -1; height: 170px; overflow: hidden; border: 1px solid var(--tp-borda, #d8dfea); background: #d8dfea; }
.hb-capa[hidden] { display: none; }
.hb-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-efeito { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.hb-efeito:empty { display: none; }
.hb-efeito i { position: absolute; top: -30px; left: var(--x); font-size: calc(14px * var(--s, 1)); font-style: normal; line-height: 1; opacity: 0.8; animation: hbCai var(--d, 8s) linear var(--a, 0s) infinite; }
@keyframes hbCai { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(18px, 800px) rotate(160deg); } to { transform: translate(-6px, 1600px) rotate(320deg); } }
.hb-efeito[data-ef="estrelas"] i, .hb-efeito[data-ef="glitter"] i { color: #ffd54f; text-shadow: 0 0 4px #fff59d; }
.hb-efeito[data-ef="neve"] i { color: #fff; text-shadow: 0 0 2px #6fa8dc, 0 0 1px #3b5998; }
.hb-efeito[data-ef="coracoes"] i { color: #ff4f9a; }
.hb-efeito[data-ef="petalas"] i { color: #f48fb1; }
.hb-efeito[data-ef="confete"] i:nth-child(3n) { color: #e53935; }
.hb-efeito[data-ef="confete"] i:nth-child(3n + 1) { color: #1e88e5; }
.hb-efeito[data-ef="confete"] i:nth-child(3n + 2) { color: #fdd835; }
.hb-efeito[data-ef="notas"] i { color: #6a1b9a; }
.hb-efeito[data-ef="chuva"] i { color: #6fa8dc; }
.hb-efeito[data-ef="bolhas"] i { color: #4fc3f7; }
.hb-player { box-sizing: border-box; width: 100%; padding: 6px; border: 1px solid #222; background: linear-gradient(#3a3a3a, #161616); color: #d9e9ff; text-align: left; }
.hb-player-tit { display: block; color: #9bd3ff; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }
.hb-player-nome { display: block; margin: 2px 0 5px; color: #39ff14; font: 12px/1.2 "Courier New", monospace; overflow-wrap: anywhere; }
.hb-player-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hb .hb-player .hb-btn { flex: 1 1 auto; }
.hb-player-vol { flex: 1 1 100%; min-width: 0; display: flex; }
.hb .hb-player-vol input { width: 100%; min-width: 0; accent-color: #39ff14; }
.hb .hb-player .hb-check { color: #d9e9ff; font-size: 10px; }
.hb-depo { display: flex; align-items: flex-start; gap: 8px; padding: 7px 4px; border-bottom: 1px dotted #ccc; overflow-wrap: anywhere; }
.hb-depo.pend { background: #fff9d7; }
.hb-depo p { margin: 3px 0; white-space: pre-wrap; }
.hb-depo small { color: #666; }
.hb-depo .hb-av { width: 32px; height: 32px; font-size: 11px; }
.hb-membros { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; }
.hb .hb-membro { all: unset; cursor: pointer; }
.hb .hb-membro .hb-av { width: 32px; height: 32px; font-size: 11px; }
.hb .hb-membro:focus-visible { outline: 2px solid #f7b82d; outline-offset: 1px; }
.hb-pic .hb-btn { width: 100%; box-sizing: border-box; }
.hb-pic-actions { width: 100%; }

/* ---------- grupos, páginas e eventos ---------- */
.hb-adm { margin: 0 0 10px; padding: 6px 8px; border: 1px dashed #bdc7d8; background: #f7f7f7; }
.hb-adm summary { color: #3b5998; font-weight: 700; cursor: pointer; }
.hb-adm summary:focus-visible { outline: 2px solid #f7b82d; outline-offset: 1px; }
.hb-adm .hb-recado { padding: 6px 0 0; border: 0; background: none; }
.hb-adm input:not([type]), .hb-adm select { padding: 3px 5px; border: 1px solid #bdc7d8; }
.hb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.hb-card-g { --pg: #3b5998; display: flex; flex-direction: column; gap: 4px; padding: 0 0 8px; border: 1px solid #d8dfea; background: #fff; overflow-wrap: anywhere; }
.hb .hb-card-topo { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--pg); color: #fff; cursor: pointer; }
.hb .hb-card-topo:focus-visible { outline: 2px solid #f7b82d; outline-offset: -2px; }
.hb-card-topo b { font-size: 13px; }
.hb-card-topo .hb-av { width: 32px; height: 32px; border-color: #fff; font-size: 18px; }
.hb-card-emo { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); font-size: 20px; }
.hb-card-g > p { margin: 2px 8px; color: #444; }
.hb-card-g > small { margin: 0 8px; color: #666; }
.hb-card-g .hb-frow { padding: 0 8px; }
.hb-cab-g { --pg: #3b5998; display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px; background: var(--pg); color: #fff; overflow-wrap: anywhere; }
.hb-cab-g h2 { margin: 0 0 2px; font-size: 18px; color: #fff; }
.hb-cab-g p { margin: 0; color: #eef; }
.hb-cab-g .hb-card-emo { width: 56px; height: 56px; font-size: 34px; }
.hb-cab-g .hb-av.big { width: 72px; height: 72px; border-color: #fff; }
.hb-cab-g .hb-selo-pg { background: #fff; color: var(--pg); }
.hb .hb-cab-g .hb-btn.gray { background: #f0f0f0; }
.hb .hb-ev { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border-bottom: 1px solid #eee; cursor: pointer; overflow-wrap: anywhere; }
.hb .hb-ev:hover { background: #f3f6fb; }
.hb .hb-ev:focus-visible { outline: 2px solid #f7b82d; outline-offset: -2px; }
.hb-ev b { display: block; color: #3b5998; font-size: 12px; }
.hb-ev small { color: #555; }
/* grupos privados das camarilhas: selos, painel de quem administra, convites e membros */
.hb-gselos { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px; }
.hb-cab-g .hb-gselos { padding: 2px 0 4px; }
.hb-gselo { display: inline-block; padding: 1px 6px; border: 1px solid #bdc7d8; border-radius: 9px; background: #fff; color: #3b5998; font-size: 10px; font-weight: 700; white-space: nowrap; }
.hb-gselo.pv { border-color: #8a6d00; background: #fff6c8; color: #5a4600; }
.hb-cab-acoes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.hb-cab-g .hb-note { color: #fff; }
.hb-gadm { margin: 0 0 10px; padding: 6px 8px 8px; border: 1px dashed #bdc7d8; background: #f7f7f7; }
.hb-gadm .hb-sub { margin-top: 0; }
.hb-gconv-form { padding: 6px 0 0; border: 0; background: none; }
.hb-gconv-form select { flex: 1 1 auto; min-width: 0; }
.hb-convites { margin-bottom: 10px; }
.hb-membro-i { position: relative; display: inline-flex; }
.hb .hb-tirar { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #b3261e; color: #fff; font-size: 9px; text-decoration: none; }
/* área de toque maior que o desenho */
.hb .hb-tirar::after { content: ""; position: absolute; inset: -8px; }
.hb .hb-tirar:hover { background: #7f1d17; text-decoration: none; }
.hb-ev-data { flex: none; display: flex; flex-direction: column; align-items: center; width: 42px; border: 1px solid #a33; background: #fff; color: #a33; font-size: 9px; text-transform: uppercase; line-height: 1.2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.hb-ev-data b { display: block; width: 100%; background: #a33; color: #fff; font-size: 16px; text-align: center; }
.hb-ev-data.big { width: 64px; font-size: 12px; }
.hb-ev-data.big b { font-size: 26px; }
.hb-evento { overflow-wrap: anywhere; }
.hb-ev-cab { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.hb-ev-cab h2 { margin: 0 0 4px; font-size: 16px; color: #333; }
.hb-ev-cab p { margin: 0; line-height: 1.7; }
.hb-rsvp { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.hb-evform { margin-bottom: 10px; }
.hb-evform .hb-irow > span { display: grid; gap: 2px; }
.hb-evform :is(input:not([type="checkbox"]), select) { box-sizing: border-box; padding: 3px 5px; border: 1px solid #bdc7d8; }

/* ---------- loja de presentes ---------- */
.hb-loja { display: none; }
.hb-loja[open] { display: grid; place-items: center; }
.hb-loja-in { box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; padding: 0 12px 12px; border: 1px solid #29447e; background: #fff; color: #333; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); overscroll-behavior: contain; }
.hb-loja-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -12px 8px; padding: 6px 6px 6px 12px; background: #3b5998; color: #fff; font-size: 13px; }
.hb-loja .hb-lb-x { width: 32px; height: 32px; font-size: 16px; }
.hb-loja-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; margin: 8px 0; }
.hb-loja-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid #d8dfea; background: #f7f7f7; text-align: center; cursor: pointer; }
.hb-loja-item input { position: absolute; opacity: 0; pointer-events: none; }
.hb-loja-item:hover { border-color: #6d84b4; }
.hb-loja-item:has(input:checked) { border-color: #3b5998; background: #d8dfea; box-shadow: inset 0 0 0 1px #3b5998; }
.hb-loja-item:has(input:focus-visible) { outline: 2px solid #f7b82d; outline-offset: 1px; }
.hb-loja-emo { font-size: 30px; line-height: 1.2; }
.hb-loja-item b { color: #1b6e30; }
.hb-loja .hb-campo input { padding: 4px 6px; border: 1px solid #bdc7d8; font: 12px Tahoma, sans-serif; }
.hb-loja .hb-emo-btn, .hb-loja .hb-btn { all: revert; }
.hb-loja .hb-emo-btn { width: 30px; border: 1px solid #bdc7d8; background: #f7f7f7; cursor: pointer; }
.hb-loja .hb-btn { padding: 4px 10px; border: 1px solid; border-color: #d9dfea #0e1f5b #0e1f5b #d9dfea; background: #3b5998; color: #fff; font: 12px Tahoma, sans-serif; cursor: pointer; }
.hb-loja .hb-btn.gray { border-color: #e7e7e7 #666 #666 #e7e7e7; background: #f0f0f0; color: #333; }
.hb-loja .hb-btn:disabled { opacity: 0.55; cursor: progress; }
.hb-loja .hb-lbl { display: block; margin: 6px 0 2px; font-weight: 700; }
.hb-loja .hb-note { color: #555; }
.hb-loja-acoes { margin-top: 10px; }

/* ---------- personalizar: navegação, cores RGB, emoji, efeito ---------- */
.hb-ed-nav { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 8px; padding: 5px 6px; border: 1px solid #d8dfea; background: #eceff5; }
.hb-ed-nav a { color: #3b5998; font-weight: 700; text-decoration: none; }
.hb-ed-nav a:hover { text-decoration: underline; }
.hb-ed-nav a:focus-visible { outline: 2px solid #f7b82d; outline-offset: 1px; }
.hb-edit fieldset { scroll-margin-top: 40px; }
.hb-rgb { display: grid; gap: 4px; max-width: 360px; }
.hb .hb-rgb-cor { display: flex; align-items: center; gap: 8px; }
.hb .hb-rgb-cor input[type="color"] { width: 44px; height: 28px; padding: 0; border: 1px solid #bdc7d8; background: none; cursor: pointer; }
.hb-rgb-cor code { font: 12px "Courier New", monospace; }
.hb .hb-rgb-l { display: grid; grid-template-columns: 16px minmax(0, 1fr) 30px; align-items: center; gap: 6px; }
.hb .hb-rgb-l span { font-weight: 700; }
.hb .hb-rgb-l output { text-align: right; font: 11px "Courier New", monospace; }
.hb .hb-edit .hb-rgb-l input { width: 100%; padding: 0; border: 0; }
.hb-rgb-l:nth-of-type(2) input { accent-color: #d32f2f; }
.hb-rgb-l:nth-of-type(3) input { accent-color: #2e7d32; }
.hb-rgb-l:nth-of-type(4) input { accent-color: #1565c0; }
.hb-neon-cor, .hb-livre-cor { margin-top: 10px; padding-top: 8px; border-top: 1px dotted #ccc; }
:is(.hb-neon-cor, .hb-livre-cor)[hidden] { display: none; }
.hb-swatches { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hb .hb-sw-cor { all: unset; width: 22px; height: 22px; border: 1px solid #555; background: var(--c); box-shadow: 0 0 6px var(--c); cursor: pointer; }
.hb .hb-sw-cor:focus-visible { outline: 2px solid #f7b82d; outline-offset: 2px; }
.hb-opts-emo .hb-opt { min-width: 40px; padding: 4px; }
.hb-emo-op { font-size: 20px; line-height: 1.1; }
.hb-ef-sw { font-size: 16px; letter-spacing: 1px; color: #6a1b9a; }
.hb-niver { align-items: center; flex-wrap: wrap; }
/* dia + mês e tipo + com quem lado a lado (o style.css põe 100% em todo campo do editor) */
#hb-app .hb-edit .hb-irow > select { flex: 1 1 0; width: auto; min-width: 0; }
#hb-app .hb-edit .hb-niver > .hb-lbl { flex: 1 1 100%; }
.hb-prev-in { position: relative; isolation: isolate; overflow: hidden; }
.hb-prev-in .hb-papel-img { z-index: -1; }
.hb-prev-in .hb-capa { height: 60px; margin-bottom: 8px; }
.hb-prev-in .hb-prev-box { position: relative; z-index: 1; }

/* cor livre do nome (o site já escureceu o suficiente para ler) e letras novas */
:is(.hb, .hb-lb) [data-cor="livre"] { color: var(--cor, #3b5998); }
:is(.hb, .hb-lb) [data-letra="marcador"] { font-family: "Permanent Marker", "Comic Sans MS", cursive; letter-spacing: 0.02em; }
:is(.hb, .hb-lb) [data-letra="pixel"] { font-family: VT323, "Courier New", monospace; font-size: 1.35em; line-height: 1.1; }
:is(.hb, .hb-lb) [data-letra="datilo"] { font-family: "Special Elite", "Courier New", monospace; }
:is(.hb, .hb-lb) [data-letra="condensada"] { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 600; font-size: 1.12em; }

/* ---------- molduras novas (20) e o neon animado da cor escolhida ---------- */
.hb-av[data-fr="neon"] {
  --neon: #ff3cc7; border-color: #fff;
  box-shadow: 0 0 0 calc(1.5 * var(--fu)) var(--neon), 0 0 calc(6 * var(--fu)) calc(2 * var(--fu)) var(--neon);
  box-shadow: 0 0 0 calc(1.5 * var(--fu)) var(--neon), 0 0 calc(6 * var(--fu)) calc(2 * var(--fu)) color-mix(in srgb, var(--neon) 80%, transparent), 0 0 calc(14 * var(--fu)) calc(3 * var(--fu)) color-mix(in srgb, var(--neon) 45%, transparent);
  animation: hbNeon 3.2s ease-in-out infinite;
}
@keyframes hbNeon {
  0%, 100% { box-shadow: 0 0 0 calc(1.5 * var(--fu)) var(--neon), 0 0 calc(6 * var(--fu)) calc(2 * var(--fu)) color-mix(in srgb, var(--neon) 80%, transparent), 0 0 calc(14 * var(--fu)) calc(3 * var(--fu)) color-mix(in srgb, var(--neon) 45%, transparent); }
  40% { box-shadow: 0 0 0 calc(1.5 * var(--fu)) var(--neon), 0 0 calc(3 * var(--fu)) calc(1 * var(--fu)) color-mix(in srgb, var(--neon) 55%, transparent), 0 0 calc(8 * var(--fu)) calc(1.5 * var(--fu)) color-mix(in srgb, var(--neon) 25%, transparent); }
  62% { box-shadow: 0 0 0 calc(1.5 * var(--fu)) var(--neon), 0 0 calc(6 * var(--fu)) calc(2 * var(--fu)) color-mix(in srgb, var(--neon) 80%, transparent), 0 0 calc(14 * var(--fu)) calc(3 * var(--fu)) color-mix(in srgb, var(--neon) 45%, transparent); }
  64% { box-shadow: 0 0 0 calc(1.5 * var(--fu)) color-mix(in srgb, var(--neon) 35%, #222), 0 0 0 0 transparent, 0 0 0 0 transparent; }
  66% { box-shadow: 0 0 0 calc(1.5 * var(--fu)) var(--neon), 0 0 calc(7 * var(--fu)) calc(2.5 * var(--fu)) color-mix(in srgb, var(--neon) 85%, transparent), 0 0 calc(16 * var(--fu)) calc(3.5 * var(--fu)) color-mix(in srgb, var(--neon) 50%, transparent); }
  68% { box-shadow: 0 0 0 calc(1.5 * var(--fu)) color-mix(in srgb, var(--neon) 35%, #222), 0 0 0 0 transparent, 0 0 0 0 transparent; }
  71% { box-shadow: 0 0 0 calc(1.5 * var(--fu)) var(--neon), 0 0 calc(6 * var(--fu)) calc(2 * var(--fu)) color-mix(in srgb, var(--neon) 80%, transparent), 0 0 calc(14 * var(--fu)) calc(3 * var(--fu)) color-mix(in srgb, var(--neon) 45%, transparent); }
}
/* anel por fora da foto (o mesmo recorte das molduras dourada/madeira) */
.hb-av:is([data-fr="arcoiris"], [data-fr="cromado"], [data-fr="holo"], [data-fr="fogo"], [data-fr="gelo"], [data-fr="fliperama"], [data-fr="cassete"], [data-fr="disquete"], [data-fr="cd"], [data-fr="jornal"], [data-fr="selo"], [data-fr="oncinha"], [data-fr="xadrez"], [data-fr="rebites"], [data-fr="tv"], [data-fr="portatil"])::before {
  content: ""; position: absolute; inset: calc(-1px - var(--anel) * var(--fu)); padding: calc(var(--anel) * var(--fu)); pointer-events: none;
  -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);
}
.hb-av[data-fr="arcoiris"] { --anel: 4; border-color: #fff; }
.hb-av[data-fr="arcoiris"]::before { background: conic-gradient(#ff1744, #ff9100, #ffea00, #00e676, #00b0ff, #651fff, #d500f9, #ff1744); animation: hbGiraCor 5s linear infinite; }
@keyframes hbGiraCor { to { filter: hue-rotate(360deg); } }
.hb-av[data-fr="cromado"] { --anel: 4; border-color: #5f6670; box-shadow: 0 calc(1 * var(--fu)) calc(4 * var(--fu)) calc(4 * var(--fu)) rgba(0, 0, 0, 0.25); }
.hb-av[data-fr="cromado"]::before { background: linear-gradient(135deg, #f9f9f9, #8a8f98 20%, #ffffff 34%, #5f6670 52%, #e9ebef 68%, #9aa0a8 84%, #f4f4f4); }
.hb-av[data-fr="holo"] { --anel: 4; border-color: #fff; box-shadow: 0 0 calc(6 * var(--fu)) rgba(180, 140, 255, 0.5); }
.hb-av[data-fr="holo"]::before { background: linear-gradient(120deg, #ff9ad5, #a0e7ff, #c8ffb0, #fff59d, #ffb3e6, #a0e7ff, #ff9ad5); background-size: 300% 300%; animation: hbHolo 4s ease-in-out infinite alternate; }
@keyframes hbHolo { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.hb-av[data-fr="fogo"] { --anel: 3.5; border-color: #ffeb3b; box-shadow: 0 0 calc(6 * var(--fu)) calc(2 * var(--fu)) rgba(255, 112, 0, 0.75), 0 calc(-4 * var(--fu)) calc(10 * var(--fu)) calc(2 * var(--fu)) rgba(255, 61, 0, 0.55); animation: hbFogo 0.9s ease-in-out infinite alternate; }
.hb-av[data-fr="fogo"]::before { background: linear-gradient(0deg, #ff1744, #ff6d00 40%, #ffd600); }
@keyframes hbFogo { to { box-shadow: 0 0 calc(8 * var(--fu)) calc(3 * var(--fu)) rgba(255, 145, 0, 0.85), 0 calc(-7 * var(--fu)) calc(13 * var(--fu)) calc(3 * var(--fu)) rgba(255, 23, 68, 0.5); } }
.hb-av[data-fr="gelo"] { --anel: 3.5; border-color: #e1f5fe; box-shadow: 0 0 calc(7 * var(--fu)) calc(2 * var(--fu)) rgba(128, 222, 234, 0.7); }
.hb-av[data-fr="gelo"]::before { background: radial-gradient(#fff 0 calc(0.8 * var(--fu)), transparent calc(1.1 * var(--fu))) 0 0 / calc(5 * var(--fu)) calc(5 * var(--fu)), linear-gradient(135deg, #b3e5fc, #e1f5fe 40%, #81d4fa 70%, #e0f7fa); }
.hb-av[data-fr="coracoes"] { border-color: #ff80ab; box-shadow: 0 0 0 calc(2 * var(--fu)) #fff, 0 0 0 calc(3.5 * var(--fu)) #ff80ab; }
.hb-av:is([data-fr="coracoes"], [data-fr="estrelas"])::before, .hb-av:is([data-fr="coracoes"], [data-fr="estrelas"])::after { position: absolute; z-index: 1; font: 400 calc(13 * var(--fu))/1 Arial, sans-serif; pointer-events: none; animation: hbPulsa 1.6s ease-in-out infinite; }
.hb-av[data-fr="coracoes"]::before { content: "♥"; top: calc(-8 * var(--fu)); left: calc(-7 * var(--fu)); color: #ff4081; text-shadow: calc(30 * var(--fu)) calc(-2 * var(--fu)) 0 #f50057; }
.hb-av[data-fr="coracoes"]::after { content: "♥"; bottom: calc(-8 * var(--fu)); right: calc(-6 * var(--fu)); color: #ff80ab; animation-delay: -0.8s; }
@keyframes hbPulsa { 50% { transform: scale(1.25); } }
.hb-av[data-fr="estrelas"] { border-color: #ffd54f; box-shadow: 0 0 0 calc(2 * var(--fu)) #1a237e, 0 0 calc(6 * var(--fu)) calc(2 * var(--fu)) rgba(255, 213, 79, 0.6); }
.hb-av[data-fr="estrelas"]::before { content: "★"; top: calc(-8 * var(--fu)); left: calc(-7 * var(--fu)); color: #ffd54f; text-shadow: calc(28 * var(--fu)) calc(4 * var(--fu)) 0 #fff59d, calc(10 * var(--fu)) calc(44 * var(--fu)) 0 #ffe082; animation-name: hbBrilha; }
.hb-av[data-fr="estrelas"]::after { content: "✦"; bottom: calc(-7 * var(--fu)); right: calc(-6 * var(--fu)); color: #fff59d; animation-name: hbBrilha; animation-delay: -0.8s; }
@keyframes hbBrilha { 50% { opacity: 0.35; transform: scale(0.8) rotate(20deg); } }
.hb-av[data-fr="vhs"] { border-color: #000; box-shadow: 0 0 0 calc(3 * var(--fu)) #111, 0 0 0 calc(4 * var(--fu)) #444; }
.hb-av[data-fr="vhs"]::before { content: "● REC"; position: absolute; z-index: 1; top: calc(2 * var(--fu)); left: calc(2.5 * var(--fu)); color: #ff1744; font: 700 calc(6 * var(--fu))/1 "Courier New", monospace; text-shadow: 0 0 2px #000; pointer-events: none; animation: hbRec 1.2s steps(1) infinite; }
.hb-av[data-fr="vhs"]::after { content: "SP ▶"; position: absolute; z-index: 1; right: calc(2 * var(--fu)); bottom: calc(2 * var(--fu)); color: #fff; font: 700 calc(5.5 * var(--fu))/1 "Courier New", monospace; text-shadow: 0 0 2px #000; pointer-events: none; }
@keyframes hbRec { 50% { opacity: 0; } }
.hb-av[data-fr="tv"] { --anel: 6; border-color: #111; border-radius: 3px; }
.hb-av[data-fr="tv"] > img { border-radius: 12%; }
.hb-av[data-fr="tv"]::before { border-radius: 14%; background: linear-gradient(#5b5b5b, #2a2a2a); }
.hb-av[data-fr="tv"]::after { content: ""; position: absolute; inset: 0; border-radius: 12%; background: linear-gradient(140deg, rgba(255, 255, 255, 0.28), transparent 38%); pointer-events: none; }
.hb-av[data-fr="portatil"] { --anel: 5; border-color: #556b2f; }
.hb-av[data-fr="portatil"]::before { background: #c9c9c1; inset: calc(-1px - 5 * var(--fu)) calc(-1px - 5 * var(--fu)) calc(-1px - 14 * var(--fu)); padding: calc(5 * var(--fu)) calc(5 * var(--fu)) calc(14 * var(--fu)); border-radius: calc(2 * var(--fu)) calc(2 * var(--fu)) calc(8 * var(--fu)) calc(2 * var(--fu)); }
.hb-av[data-fr="portatil"]::after { content: ""; position: absolute; z-index: 1; right: calc(1 * var(--fu)); bottom: calc(-11 * var(--fu)); width: calc(5 * var(--fu)); height: calc(5 * var(--fu)); border-radius: 50%; background: #9c1b4e; box-shadow: calc(-7 * var(--fu)) calc(2 * var(--fu)) 0 #9c1b4e, calc(-30 * var(--fu)) calc(-1 * var(--fu)) 0 calc(-0.5 * var(--fu)) #333; pointer-events: none; }
:is(.hb-me, .hb-pic, .hb-top8-i, .hb-prev-box, .hb-opt) > .hb-av[data-fr="portatil"] { margin-bottom: calc(16 * var(--fu)); }
.hb-av[data-fr="fliperama"] { --anel: 4.5; border-color: #ffea00; box-shadow: 0 0 calc(6 * var(--fu)) rgba(255, 0, 170, 0.6); }
.hb-av[data-fr="fliperama"]::before {
  background: radial-gradient(circle, #ffea00 0 calc(1.2 * var(--fu)), transparent calc(1.5 * var(--fu))) 0 0 / calc(4.5 * var(--fu)) calc(4.5 * var(--fu)), #3a006e;
  animation: hbMarquise 0.8s steps(1) infinite;
}
@keyframes hbMarquise { 50% { background: radial-gradient(circle, #ff00aa 0 calc(1.2 * var(--fu)), transparent calc(1.5 * var(--fu))) calc(2.25 * var(--fu)) calc(2.25 * var(--fu)) / calc(4.5 * var(--fu)) calc(4.5 * var(--fu)), #3a006e; } }
.hb-av[data-fr="cassete"] { --anel: 5; border-color: #111; }
.hb-av[data-fr="cassete"]::before { background: linear-gradient(#f3e5c4 0 26%, #e8572a 26% 31%, #f9a825 31% 36%, #202020 36%); }
.hb-av[data-fr="disquete"] { --anel: 4.5; border-color: #0d2b6b; }
.hb-av[data-fr="disquete"]::before { background: #1e3c8c; }
.hb-av[data-fr="disquete"]::after { content: ""; position: absolute; z-index: 1; top: calc(-6 * var(--fu)); left: 28%; width: 44%; height: calc(9 * var(--fu)); background: linear-gradient(90deg, #9e9e9e, #eeeeee 40%, #bdbdbd 60%, #e0e0e0); box-shadow: inset calc(3 * var(--fu)) 0 0 #555; pointer-events: none; }
.hb-av[data-fr="cd"] { --anel: 4.5; border-color: #cfd8dc; box-shadow: 0 0 calc(4 * var(--fu)) rgba(0, 0, 0, 0.2); }
.hb-av[data-fr="cd"]::before { background: conic-gradient(from 30deg, #eceff1, #b3e5fc, #f8bbd0, #fff9c4, #c8e6c9, #e1bee7, #eceff1, #b2ebf2, #ffe0b2, #eceff1); }
.hb-av[data-fr="jornal"] { --anel: 4; border-color: #555; transform: rotate(-2deg); box-shadow: calc(2 * var(--fu)) calc(3 * var(--fu)) calc(4 * var(--fu)) rgba(0, 0, 0, 0.3); }
.hb-av[data-fr="jornal"]::before { background: repeating-linear-gradient(#9e9a8e 0 calc(0.7 * var(--fu)), #f2efe6 calc(0.7 * var(--fu)) calc(2.2 * var(--fu))); }
.hb-av[data-fr="selo"] { --anel: 4; border-color: #fff; filter: drop-shadow(0 calc(1 * var(--fu)) calc(2 * var(--fu)) rgba(0, 0, 0, 0.35)); }
.hb-av[data-fr="selo"]::before { background: radial-gradient(circle, transparent 0 calc(1.1 * var(--fu)), #fdfaf0 calc(1.3 * var(--fu))) calc(-2 * var(--fu)) calc(-2 * var(--fu)) / calc(4 * var(--fu)) calc(4 * var(--fu)); }
.hb-av[data-fr="pixel"] { border: 0; box-shadow: 0 calc(-2.5 * var(--fu)) 0 0 #000, 0 calc(2.5 * var(--fu)) 0 0 #000, calc(-2.5 * var(--fu)) 0 0 0 #000, calc(2.5 * var(--fu)) 0 0 0 #000, 0 calc(-5 * var(--fu)) 0 calc(-2.5 * var(--fu)) #3b5998, 0 calc(5 * var(--fu)) 0 calc(-2.5 * var(--fu)) #3b5998, calc(-5 * var(--fu)) 0 0 calc(-2.5 * var(--fu)) #3b5998, calc(5 * var(--fu)) 0 0 calc(-2.5 * var(--fu)) #3b5998; image-rendering: pixelated; }
.hb-av[data-fr="oncinha"] { --anel: 4.5; border-color: #3b2412; }
.hb-av[data-fr="oncinha"]::before { background: radial-gradient(ellipse calc(2 * var(--fu)) calc(1.4 * var(--fu)) at 30% 30%, #3b2412 60%, transparent 62%) 0 0 / calc(7 * var(--fu)) calc(6 * var(--fu)), radial-gradient(ellipse calc(1.6 * var(--fu)) calc(1.2 * var(--fu)) at 70% 75%, #5a3615 60%, transparent 62%) 0 0 / calc(6 * var(--fu)) calc(7 * var(--fu)), #d9a441; }
.hb-av[data-fr="xadrez"] { --anel: 4; border-color: #111; }
.hb-av[data-fr="xadrez"]::before { background: repeating-conic-gradient(#111 0 25%, #f5f5f5 0 50%) 0 0 / calc(4 * var(--fu)) calc(4 * var(--fu)); }
.hb-av[data-fr="rebites"] { --anel: 5; border-color: #000; }
.hb-av[data-fr="rebites"]::before { background: radial-gradient(circle, #f5f5f5 0 calc(0.9 * var(--fu)), #8d8d8d calc(1.3 * var(--fu)), transparent calc(1.6 * var(--fu))) center / calc(5 * var(--fu)) calc(5 * var(--fu)), #1a1a1a; }

/* ---------- temas novos (20): fundo, bordas e barras de título; as caixas continuam claras para ler ---------- */
.hb [data-tema="praia"] { --tp-bg: radial-gradient(circle at 85% 12%, #fff7a8 0 28px, #ffd54f 30px, transparent 34px), linear-gradient(#7fd3f7 0 55%, #4fb3d9 55% 62%, #f5deb3 62%); --tp-box: #fffdf5; --tp-borda: #2f86ad; --tp-h-bg: #ffcc66; --tp-h-fg: #5a3200; }
.hb [data-tema="skate"] { --tp-bg: repeating-conic-gradient(#111 0 25%, #f2f2f2 0 50%) 0 0 / 34px 34px; --tp-box: #fff; --tp-borda: #111; --tp-h-bg: #111; --tp-h-fg: #fff; }
.hb [data-tema="grunge"] { --tp-bg: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 7px, transparent 7px 24px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 7px, transparent 7px 24px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 12px), #8b1a1a; --tp-box: #fdf8f2; --tp-borda: #4a0d0d; --tp-h-bg: #4a0d0d; --tp-h-fg: #fff; }
.hb [data-tema="matrix"] { --tp-bg: repeating-linear-gradient(90deg, rgba(0, 255, 70, 0.16) 0 2px, transparent 2px 15px), repeating-linear-gradient(rgba(0, 255, 70, 0.07) 0 9px, transparent 9px 13px), linear-gradient(#000, #021a06); --tp-box: #f1fff3; --tp-borda: #0f5c1f; --tp-h-bg: #062b0e; --tp-h-fg: #5dff86; }
.hb [data-tema="oceano"] { --tp-bg: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 3px, transparent 4px) 10px 20px / 60px 90px, radial-gradient(circle, rgba(255, 255, 255, 0.3) 0 2px, transparent 3px) 40px 60px / 80px 70px, linear-gradient(#0aa1c9, #023e73); --tp-box: #f3fbff; --tp-borda: #024a7a; --tp-h-bg: #024a7a; --tp-h-fg: #fff; }
.hb [data-tema="pordosol"] { --tp-bg: radial-gradient(circle at 50% 78%, #ffe082 0 60px, transparent 64px), linear-gradient(#ff7e5f, #feb47b 45%, #6a3093); --tp-box: #fff8f3; --tp-borda: #8e3b5e; --tp-h-bg: #8e3b5e; --tp-h-fg: #fff; }
.hb [data-tema="floresta"] { --tp-bg: repeating-linear-gradient(100deg, #1f3d1a 0 14px, #2c5424 14px 30px, #1a3317 30px 38px), linear-gradient(#18301a, #0d1f0e); --tp-box: #f6fbf3; --tp-borda: #1f3d1a; --tp-h-bg: #2c5424; --tp-h-fg: #fff; }
.hb [data-tema="chiclete"] { --tp-bg: radial-gradient(#fff 0 3px, transparent 3.5px) 0 0 / 24px 24px, radial-gradient(#ffd1ea 0 2px, transparent 2.5px) 12px 12px / 24px 24px, #ff8fc8; --tp-box: #fff5fb; --tp-borda: #d14f8e; --tp-h-bg: #c2185b; --tp-h-fg: #fff; }
.hb [data-tema="lava"] { --tp-bg: radial-gradient(circle at 30% 30%, #ff6f00 0 14%, transparent 15%), radial-gradient(circle at 72% 58%, #ff3d00 0 11%, transparent 12%), radial-gradient(circle at 45% 86%, #ffab00 0 9%, transparent 10%), radial-gradient(circle at 80% 18%, #ff9100 0 6%, transparent 7%), linear-gradient(#4a148c, #880e4f); --tp-box: #fff7f0; --tp-borda: #4a148c; --tp-h-bg: #880e4f; --tp-h-fg: #fff; }
.hb [data-tema="cyber"] { --tp-bg: repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.18) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.18) 0 1px, transparent 1px 22px), linear-gradient(135deg, #0f2027, #203a43, #2c5364); --tp-box: #f4fbff; --tp-borda: #00838f; --tp-h-bg: linear-gradient(#00acc1, #00838f); --tp-h-fg: #fff; }
.hb [data-tema="fliperama"] { --tp-bg: radial-gradient(#fff 0 1px, transparent 1.5px) 0 0 / 40px 40px, repeating-linear-gradient(135deg, transparent 0 40px, rgba(255, 0, 170, 0.25) 40px 44px, transparent 44px 80px), #12002b; --tp-box: #fffaff; --tp-borda: #c51162; --tp-h-bg: #2a0057; --tp-h-fg: #ffea00; }
.hb [data-tema="jeans"] { --tp-bg: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 5px), #2b4f81; --tp-box: #fbfbf8; --tp-borda: #c97b2a; --tp-h-bg: #1d3a63; --tp-h-fg: #f3c78a; }
.hb [data-tema="oncinha"] { --tp-bg: radial-gradient(ellipse 9px 6px at 30% 30%, #3b2412 60%, transparent 63%) 0 0 / 34px 28px, radial-gradient(ellipse 7px 5px at 70% 72%, #5a3615 60%, transparent 63%) 0 0 / 28px 34px, #d9a441; --tp-box: #fffaf0; --tp-borda: #5a3615; --tp-h-bg: #3b2412; --tp-h-fg: #ffd27a; }
.hb [data-tema="camuflado"] { --tp-bg: radial-gradient(ellipse 30px 18px at 20% 30%, #3f4a2a 70%, transparent 72%) 0 0 / 90px 70px, radial-gradient(ellipse 26px 20px at 70% 70%, #6b5a3a 70%, transparent 72%) 0 0 / 80px 90px, radial-gradient(ellipse 22px 14px at 50% 50%, #2a2f1c 70%, transparent 72%) 30px 10px / 70px 60px, #7a8450; --tp-box: #f6f7f0; --tp-borda: #3f4a2a; --tp-h-bg: #3f4a2a; --tp-h-fg: #e8e3c9; }
.hb [data-tema="cartinha"] { --tp-bg: linear-gradient(90deg, transparent 22px, #f48fb1 22px 24px, transparent 24px), repeating-linear-gradient(#fff0f5 0 24px, #f8bbd0 24px 25px); --tp-box: #fffafc; --tp-borda: #ec6b9d; --tp-h-bg: #f8bbd0; --tp-h-fg: #6a1036; }
.hb [data-tema="galaxia"] { --tp-bg: radial-gradient(#fff 0 1px, transparent 1.5px) 0 0 / 46px 46px, radial-gradient(#d1c4e9 0 1px, transparent 1.5px) 23px 11px / 61px 61px, radial-gradient(ellipse at 30% 40%, rgba(123, 31, 162, 0.85), transparent 60%), radial-gradient(ellipse at 72% 70%, rgba(21, 101, 192, 0.8), transparent 55%), #050014; --tp-box: #f8f5ff; --tp-borda: #4527a0; --tp-h-bg: #311b92; --tp-h-fg: #fff; }
.hb [data-tema="chuva"] { --tp-bg: repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 13px), repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 7px), linear-gradient(#5d6d7e, #2c3e50); --tp-box: #f5f8fa; --tp-borda: #2c3e50; --tp-h-bg: #34495e; --tp-h-fg: #fff; }
.hb [data-tema="inverno"] { --tp-bg: radial-gradient(#fff 0 2px, transparent 2.5px) 0 0 / 30px 30px, radial-gradient(#fff 0 1px, transparent 1.5px) 15px 15px / 30px 30px, linear-gradient(#a7cfee, #e8f4fb); --tp-box: #fff; --tp-borda: #5b8fc2; --tp-h-bg: #4a7fb5; --tp-h-fg: #fff; }
.hb [data-tema="halloween"] { --tp-bg: repeating-linear-gradient(45deg, #1a1a1a 0 16px, #ff7518 16px 20px, #1a1a1a 20px 36px, #6a1b9a 36px 39px); --tp-box: #fff8f0; --tp-borda: #e65c00; --tp-h-bg: #ff7518; --tp-h-fg: #1a1a1a; }
.hb [data-tema="mesarpg"] { --tp-bg: radial-gradient(rgba(255, 255, 255, 0.08) 0 1px, transparent 1.5px) 0 0 / 6px 6px, radial-gradient(ellipse at center, #2e7d32, #1b5e20 70%, #0f3d12); --tp-box: #fdfaf2; --tp-borda: #5d4037; --tp-h-bg: #5d4037; --tp-h-fg: #ffe082; }

/* ---------- bate-papo: status do MSN, chamar a atenção (treme) e emojis ---------- */
.rc-form { display: flex; }
.rc-form input { flex: 1 1 auto; min-width: 0; width: auto; }
.rc-form .rc-emo { all: unset; flex: none; display: grid; place-items: center; width: 30px; border-top: 1px solid #ccc; border-left: 1px solid #eee; background: #f7f7f7; font-size: 14px; cursor: pointer; }
.rc-form .rc-emo:focus-visible { outline: 2px solid #f7b82d; outline-offset: -2px; }
.rc-head .rc-zap { padding: 0 6px; font-size: 13px; }
.rc-head .rc-zap:disabled { opacity: 0.45; cursor: default; }
.rc-head .rc-min .hb-dot { margin-right: 5px; border-color: rgba(255, 255, 255, 0.7); }
.rc-dot-slot:empty { display: none; }
.rc-bar .hb-dot { margin-right: 5px; }
.rc-hb .rc-list button { display: flex; align-items: center; gap: 6px; }
.rc-hb .rc-list button small { margin-left: auto; color: #777; font-weight: 400; font-size: 9px; }
.rc-status { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid #d8dfea; background: #eceff5; }
.rc-status button { display: flex; align-items: center; gap: 5px; padding: 4px 6px; color: #333; font-size: 10px; }
.rc-status button[aria-pressed="true"] { background: #d8dfea; font-weight: 700; }
.rc-zap-msg { color: #b3261e; font-style: italic; }
.rc-treme { animation: rcTreme 0.6s linear; }
@keyframes rcTreme { 10%, 50%, 90% { transform: translate(-5px, 2px); } 30%, 70% { transform: translate(5px, -2px); } 20%, 60% { transform: translate(-3px, -2px); } 40%, 80% { transform: translate(3px, 2px); } }

@media (max-width: 720px) {
  /* uma coluna: lateral (links), mural e depois as novidades */
  .hb-side, .hb-main, .hb-extra { grid-column: auto; grid-row: auto; }
  .hb-busca { flex-basis: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-av[data-fr="neon"], .hb-av:is([data-fr="arcoiris"], [data-fr="holo"], [data-fr="fliperama"])::before, .hb-av[data-fr="fogo"],
  .hb-av:is([data-fr="coracoes"], [data-fr="estrelas"], [data-fr="vhs"])::before, .hb-av:is([data-fr="coracoes"], [data-fr="estrelas"])::after,
  .rc-treme { animation: none; }
  .hb-efeito { display: none; }
  .hb-enq-barra, .hb-reacoes button { transition: none; }
}

/* ---------- comentários em árvore: respostas recuadas com um fio à esquerda (até 3 níveis; depois não recua mais) ---------- */
.hb-cresp { margin: 0 0 2px 36px; padding-left: 8px; border-left: 2px solid #c7d0e2; }
.hb-cresp[data-n="3"] .hb-cresp { margin-left: 0; padding-left: 0; border-left: 0; }
.hb-cresp .hb-cmt:last-child, .hb-cresp > .hb-cno:last-child > .hb-cmt { border-bottom: 0; }
.hb .hb-cresp .hb-cmt .hb-av { width: 22px; height: 22px; font-size: 9px; --fu: 0.6px; }
.hb .hb-cver { display: block; width: fit-content; margin: 3px 0; color: #3b5998; font-weight: 700; }
.hb .hb-cver:hover { text-decoration: underline; }
.hb-clist > .hb-cver { margin: 2px 0 4px; }
.hb-cpara { color: #666; font-size: 10px; white-space: nowrap; }
.hb-cmt-sumiu i { color: #666; }
.hb-cfant { flex: none; width: 28px; text-align: center; opacity: 0.6; }
.hb-cresp .hb-cfant { width: 22px; }
.hb-rform { margin: 4px 0 6px; }