/* =====================================================
   Rede social do Help Floripa (perfil, feed, notificações,
   configurações e meus negócios). Mesmas cores e tema do site.
   ===================================================== */
:root {
  --accent: #00adee;
  --accent-strong: #0093cc;
  --accent-ink: #001a24;
  --danger: #e5484d;
  --ok: #2fbf71;
  --gold: #f5b700;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --topo: 60px;
}
:root[data-theme="dark"] {
  --bg: #070b0e;
  --panel: #0f161b;
  --panel-2: #151f25;
  --hover: #19252c;
  --line: #213038;
  --text: #eaf0f3;
  --muted: #8c9ca7;
  --soft: rgba(255, 255, 255, .06);
  --shadow: 0 10px 40px rgba(0, 0, 0, .45);
  --overlay: rgba(2, 6, 9, .72);
  --input: #121b21;
  --tile: #121b21;
}
:root[data-theme="light"] {
  --bg: #f1f4f6;
  --panel: #ffffff;
  --panel-2: #f5f7f9;
  --hover: #eef2f5;
  --line: #e1e7eb;
  --text: #0e1a21;
  --muted: #607380;
  --soft: rgba(0, 40, 60, .05);
  --shadow: 0 10px 40px rgba(15, 30, 40, .12);
  --overlay: rgba(10, 20, 26, .5);
  --input: #ffffff;
  --tile: #e8eef2;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
body.travado { overflow: hidden; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
svg.i { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
svg.i.s { width: 17px; height: 17px; }
svg.i.xs { width: 14px; height: 14px; }

.icone-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent;
  display: inline-grid; place-items: center; cursor: pointer; color: var(--text); text-decoration: none; flex-shrink: 0;
  transition: background .15s;
}
.icone-btn:hover { background: var(--hover); }
.icone-btn:focus-visible, .btn:focus-visible, .aba:focus-visible, .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ponto-badge {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ff3b5c; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--panel);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px;
  padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.pri { background: var(--accent); color: var(--accent-ink); }
.btn.pri:hover { background: var(--accent-strong); }
.btn.sec { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.btn.sec:hover { background: var(--hover); }
.btn.seguindo { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.btn.perigo { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.btn.perigo:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.mini { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }
.btn.bloco { width: 100%; }

.avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, #0a4a63, #00adee); color: #fff; display: grid; place-items: center;
  font-weight: 750; font-size: 15px; letter-spacing: .3px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- barra superior ---------- */
.topo {
  position: sticky; top: 0; z-index: 1200; height: calc(var(--topo) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0;
  display: flex; align-items: center; gap: 2px; background: color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line);
}
.marca { flex: 1; text-align: center; text-decoration: none; line-height: 1; }
.marca strong { font-size: 19px; font-weight: 850; letter-spacing: .2px; }
.marca strong span { color: var(--accent); }
.marca small { display: block; margin-top: 3px; font-size: 8.5px; letter-spacing: 1.3px; color: var(--muted); font-weight: 700; }

/* ---------- página ---------- */
.pagina { width: min(780px, 100%); margin: 0 auto; padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
.estado { padding: 80px 20px; text-align: center; color: var(--muted); }
.estado.erro { color: var(--danger); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: girar .8s linear infinite; margin: 0 auto 14px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- cabeçalho do perfil (próprio e público) ---------- */
.pf { background: var(--panel); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; }
.pf-capa {
  position: relative; aspect-ratio: 3 / 1; background: #06202c url("ponte-help.webp") center / cover no-repeat;
}
.pf-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .35)); pointer-events: none; }
.pf-capa.sem-foto::before { content: ""; position: absolute; inset: 0; background: rgba(4, 12, 18, .35); }
.pf-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-editar-capa {
  position: absolute; right: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; border: 0;
  background: rgba(0, 0, 0, .55); color: #fff; border-radius: 999px; padding: 8px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pf-editar-capa:hover { background: rgba(0, 0, 0, .7); }
.pf-cfg { position: absolute; left: 12px; top: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(0, 0, 0, .55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pf-cfg:hover { background: rgba(0, 0, 0, .75); transform: rotate(30deg); transition: transform .3s; }
.pf-corpo { padding: 0 20px 20px; }
.pf-linha-avatar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -54px; position: relative; z-index: 2; }
.pf-avatar-wrap { position: relative; }
.pf-anel {
  width: 116px; height: 116px; border-radius: 50%; padding: 4px;
  background: conic-gradient(from 210deg, #00adee, #7de3ff, #0077a8, #00adee);
}
.pf-anel .avatar { width: 100%; height: 100%; font-size: 34px; border: 4px solid var(--panel); }
.pf-editar-foto {
  position: absolute; right: 2px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--panel);
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer;
}
.pf-acoes { display: flex; gap: 8px; padding-bottom: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pf-nome-linha { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.pf-nome { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; overflow-wrap: anywhere; }
.selo { color: var(--accent); display: inline-flex; }
.selo svg { width: 22px; height: 22px; }
.pf-handle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 3px; color: var(--muted); font-size: 14px; }
.pf-handle span { display: inline-flex; align-items: center; gap: 4px; }
.pf-bio { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-bio.vazia { color: var(--muted); font-style: italic; }
.pf-bio-add { border: 0; background: none; color: var(--accent); font-weight: 700; padding: 0; cursor: pointer; }
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.pf-stat { border: 0; background: transparent; padding: 12px 4px; cursor: pointer; text-align: center; position: relative; }
.pf-stat + .pf-stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
.pf-stat:hover { background: var(--hover); }
.pf-stat:disabled { cursor: default; }
.pf-stat:disabled:hover { background: transparent; }
.pf-stat .num { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 19px; font-weight: 800; }
.pf-stat .num svg { color: var(--gold); }
.pf-stat .rot { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .2px; }
.chip-verif { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: 13px; font-weight: 700; border: 0; cursor: pointer; }

/* ---------- duo na capa: Akai Ito ligando as fotos ---------- */
.pf { position: relative; }
.fio-capa { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.fio-capa path.fio { fill: none; stroke: #e0243b; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(224, 36, 59, .9)) drop-shadow(0 0 8px rgba(224, 36, 59, .45)); animation: pulso-fio 2.8s ease-in-out infinite; }
.fio-capa path.coracao { fill: #e0243b; stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); transform-box: fill-box; transform-origin: center; animation: bater 1.6s ease-in-out infinite; }
@keyframes pulso-fio { 50% { stroke-width: 2.8; } }
@keyframes bater { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.22); } 40% { transform: scale(.95); } }
.duo-capa { position: absolute; z-index: 5; left: 204px; bottom: 18%; width: 62px; height: 62px; border: 0; padding: 0; background: none; cursor: pointer; }
.duo-capa[disabled], .duo-capa.so-foto { cursor: default; }
.btn.restrito svg { opacity: .8; }
.duo-capa .avatar { width: 100%; height: 100%; font-size: 18px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 5px #e0243b, 0 8px 20px rgba(0, 0, 0, .5); }
.rosa-selo { position: absolute; right: -5px; bottom: -5px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #e0243b; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.rosa-selo svg { width: 17px; height: 17px; }
@media (max-width: 640px) { .duo-capa { width: 52px; height: 52px; left: 156px; bottom: 20%; } .rosa-selo { width: 22px; height: 22px; } .rosa-selo svg { width: 14px; height: 14px; } }

/* ---------- perfis de negócio (bolinhas) ---------- */
[data-el="negocios"] .vinculos { gap: 10px; padding: 8px 4px 6px; justify-content: flex-start; }
[data-el="negocios"] .vinculo { width: 66px; }
[data-el="negocios"] .vinculo .avatar { width: 48px; height: 48px; font-size: 15px; }
[data-el="negocios"] .vinculo .nome { font-size: 11.5px; max-width: 66px; }
[data-el="negocios"] .vinculo .papel { font-size: 10.5px; max-width: 66px; }
.vinculo[data-cat="servicos"] { --cor: #00adee; }
.vinculo[data-cat="delivery"] { --cor: #ff7a1a; }
.vinculo[data-cat="lojinha"] { --cor: #b066ff; }
.vinculo[data-cat="imoveis"] { --cor: #2fbf71; }
.neg-capa { position: relative; aspect-ratio: 3 / 1; background: #06202c center / cover no-repeat; }
.neg-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .55)); }
.neg-corpo { padding: 0 18px 18px; }
.neg-topo { display: flex; align-items: flex-end; gap: 12px; margin-top: -34px; position: relative; z-index: 2; }
.neg-topo .avatar { width: 76px; height: 76px; font-size: 24px; border: 4px solid var(--panel); }
.neg-tipo { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent); }
.neg-corpo h3 { margin: 8px 0 2px; font-size: 20px; }
.neg-corpo .desc { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.neg-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.neg-foto-ed { display: flex; align-items: center; gap: 14px; }
.neg-foto-ed .avatar { width: 72px; height: 72px; font-size: 22px; }
.neg-secao { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.neg-secao > h3 { margin: 0 0 2px; font-size: 15px; }
.neg-secao > p { margin: 0 0 6px; color: var(--muted); font-size: 12.5px; }
.grade-campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; }
.grade-campos.tres { grid-template-columns: repeat(3, 1fr); }
.grade-campos.quatro { grid-template-columns: repeat(4, 1fr); }
.marcas { display: flex; flex-wrap: wrap; gap: 8px; }
.hora-sel { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.hora-sel select { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--input); border-radius: 12px; padding: 11px 10px; font-size: 15px; color: var(--text); }
.marca-op { position: relative; display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 7px; width: auto !important; margin: 0 !important; padding: 8px 13px 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); cursor: pointer; font-size: 13.5px; font-weight: 650; line-height: 1.2; user-select: none; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s; }
.marca-op input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.marca-op::before { content: ""; flex: none; width: 17px; height: 17px; box-sizing: border-box; border-radius: 50%; border: 1.6px solid var(--muted); }
.marca-op.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--panel-2)); }
.marca-op.on::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.marca-op:focus-within { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.neg-mais { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.neg-mais > summary { list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 800; font-size: 14.5px; display: grid; gap: 2px; position: relative; padding-right: 44px; }
.neg-mais > summary::-webkit-details-marker { display: none; }
.neg-mais > summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 600; color: var(--accent); }
.neg-mais[open] > summary::after { content: "−"; }
.neg-mais > summary small { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.neg-mais > .campo, .neg-mais > .grade-campos { padding: 0 16px; }
.neg-mais > :last-child { padding-bottom: 16px; }
.item-det { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 6px; }
.item-det summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--accent); list-style: none; padding: 4px 0; }
.item-det summary::-webkit-details-marker { display: none; }
.item-det summary::before { content: "+ "; }
.item-det[open] summary::before { content: "− "; }
.item-det-corpo { display: grid; gap: 8px; padding: 6px 0 4px; }
.item-det-corpo.dois { grid-template-columns: 1fr 1fr; }
.item-det-corpo .mini-campo { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.item-det-corpo .mini-campo:has(textarea) { grid-column: 1 / -1; }
.item-det-corpo input, .item-det-corpo select, .item-det-corpo textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: var(--input); color: var(--text); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13.5px; }
.item-det-corpo textarea { min-height: 60px; resize: vertical; }
.item-det-corpo input, .item-det-corpo select, .item-det-corpo textarea { font-weight: 400; }
@media (max-width: 420px) { .item-det-corpo.dois { grid-template-columns: 1fr; } }
.neg-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.neg-foto { position: relative; width: 96px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--tile) center / cover; border: 0; padding: 0; }
.neg-foto.add { display: grid; place-items: center; color: var(--accent); border: 2px dashed var(--line); background: transparent; cursor: pointer; }
.neg-foto .x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; display: grid; place-items: center; cursor: pointer; }
.neg-itens { display: grid; gap: 8px; margin-top: 8px; }
.neg-item { display: grid; grid-template-columns: auto 1fr 110px auto; gap: 8px; align-items: center; padding: 8px; border-radius: 14px; background: var(--panel-2); }
.neg-item.sem-foto { grid-template-columns: 1fr 110px auto; }
.neg-item input { width: 100%; border: 1px solid var(--line); background: var(--input); border-radius: 10px; padding: 9px 10px; outline: none; font-size: 14px; min-width: 0; }
.neg-item input:focus { border-color: var(--accent); }
.neg-item .ft { width: 52px; height: 52px; border-radius: 10px; border: 1px dashed var(--line); background: var(--tile) center / cover; display: grid; place-items: center; color: var(--muted); cursor: pointer; padding: 0; }
.neg-item .rm { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--danger); cursor: pointer; display: grid; place-items: center; }
.neg-add { margin-top: 8px; }
.neg-bloco { display: grid; gap: 0; margin-top: 12px; padding: 12px 14px 14px; border-radius: 16px; background: color-mix(in srgb, #f5b700 8%, var(--panel-2)); border: 1px solid color-mix(in srgb, #f5b700 30%, var(--line)); }
.neg-bloco > strong { font-size: 13px; color: #d9a200; }
.neg-item.com-area { grid-template-columns: 1fr 110px auto; }
.neg-item .area-item { grid-column: 1 / -1; border: 1px solid var(--line); background: var(--input); border-radius: 10px; padding: 7px 10px; font-size: 13px; color: var(--muted); }
.neg-item .estoque-item { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.neg-item .estoque-item input { width: 96px; padding: 6px 9px; font-size: 13px; }
.neg-item .chip-um { margin-left: auto; border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.neg-anuncio-linha { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: stretch; }
.neg-anuncio-linha .fechado { border: 1px solid color-mix(in srgb, #2fbf71 45%, var(--line)); background: color-mix(in srgb, #2fbf71 10%, transparent); color: #1f9d5a; border-radius: 14px; padding: 0 12px; font-size: 12.5px; font-weight: 800; cursor: pointer; display: grid; place-items: center; gap: 2px; min-width: 84px; }
.neg-anuncio-linha .fechado svg { width: 16px; height: 16px; }
.neg-anuncios { display: grid; gap: 8px; margin-top: 8px; }
.neg-anuncio { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); text-align: left; cursor: pointer; }
.neg-anuncio:hover { border-color: #2fbf71; }
.neg-anuncio .ft { width: 64px; height: 48px; border-radius: 10px; background: #07170f url("imoveis-480.webp") center / cover; flex-shrink: 0; }
.neg-anuncio .tx { flex: 1; min-width: 0; display: grid; }
.neg-anuncio .tx strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neg-anuncio .tx small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 640px) {
  .grade-campos.tres, .grade-campos.quatro { grid-template-columns: repeat(2, 1fr); }
  .neg-item { grid-template-columns: auto 1fr auto; }
  .neg-item .preco { grid-column: 2 / 3; }
  .neg-item.sem-foto { grid-template-columns: 1fr auto; }
  .neg-item.sem-foto .preco { grid-column: 1 / 2; }
}

/* ---------- social: duo (Akai Ito) e vínculos ---------- */
.social { margin-top: 16px; }
.social-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.social-titulo h3 { margin: 0; font-size: 13px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.social-titulo button { border: 0; background: none; color: var(--accent); font-weight: 700; cursor: pointer; font-size: 13px; }
.duo {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; padding: 14px 16px 12px;
  border-radius: 20px; margin-bottom: 12px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, rgba(224, 36, 59, .16), transparent 60%), var(--panel-2);
  border: 1px solid rgba(224, 36, 59, .28);
}
.duo-pessoa { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; text-align: center; cursor: pointer; border: 0; background: none; padding: 0; }
.duo-pessoa .avatar { width: 58px; height: 58px; font-size: 18px; box-shadow: 0 0 0 3px var(--panel-2), 0 0 0 5px #e0243b; }
.duo-pessoa span { font-size: 12.5px; font-weight: 700; max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fio { width: 100%; height: 60px; overflow: visible; }
.fio path { fill: none; stroke: #e0243b; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(224, 36, 59, .75)); stroke-dasharray: 6 5; animation: fio 1.6s linear infinite; }
.fio circle { fill: #e0243b; filter: drop-shadow(0 0 5px rgba(224, 36, 59, .9)); }
@keyframes fio { to { stroke-dashoffset: -22; } }
.duo-rotulo { grid-column: 1 / -1; text-align: center; margin-top: 6px; font-size: 12px; color: var(--muted); }
.duo-rotulo strong { color: #ff5a6e; letter-spacing: 1.4px; text-transform: uppercase; font-size: 11.5px; }
.vinculos { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.vinculos::-webkit-scrollbar { display: none; }
.vinculo { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; padding: 0; cursor: pointer; text-align: center; }
.vinculo .avatar { width: 58px; height: 58px; font-size: 18px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--cor, var(--accent)); }
.vinculo .nome { font-size: 12px; font-weight: 700; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vinculo .papel { font-size: 11px; color: var(--cor, var(--muted)); font-weight: 700; margin-top: -4px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vinculo.pendente { opacity: .6; }
.vinculo.novo .avatar { background: var(--panel-2); color: var(--accent); border: 2px dashed var(--accent); box-shadow: none; }
.vinculo[data-cat="familia"] { --cor: #f5b700; }
.vinculo[data-cat="amizade"] { --cor: #00adee; }
.vinculo[data-cat="amor"] { --cor: #ff4f8b; }
.vinculo[data-cat="duo"] { --cor: #e0243b; }
.vinculo[data-cat="trabalho"] { --cor: #2fbf71; }
.social-vazio { color: var(--muted); font-size: 13.5px; }
.tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tipo { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; font-weight: 700; font-size: 13.5px; text-align: left; }
.tipo.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.tipo[data-cat="duo"].on { border-color: #e0243b; background: rgba(224, 36, 59, .12); }
.tipo i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor, var(--accent)); flex-shrink: 0; }
.tipo[data-cat="familia"] { --cor: #f5b700; }
.tipo[data-cat="amor"] { --cor: #ff4f8b; }
.tipo[data-cat="duo"] { --cor: #e0243b; }
.tipo[data-cat="trabalho"] { --cor: #2fbf71; }
.passo { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; margin: 18px 0 10px; }
.passo:first-child { margin-top: 0; }
.escolhido { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--panel-2); }
.escolhido strong { flex: 1; }

/* ações da linha e folha de opções */
.linha .acoes-linha { display: flex; gap: 6px; flex-shrink: 0; }
.opcoes button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 15px; font-weight: 600; }
.opcoes button:hover { background: var(--hover); }
.opcoes button.perigo { color: var(--danger); }
.opcoes small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.bloqueado-aviso { margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--panel-2); color: var(--muted); text-align: center; }
.bloqueado-aviso strong { display: block; color: var(--text); margin-bottom: 4px; }

/* ---------- abas de conteúdo ---------- */
.abas {
  position: sticky; top: calc(var(--topo) + env(safe-area-inset-top)); z-index: 50; display: flex; gap: 4px; margin: 16px 0 12px; padding: 5px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 16px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.aba { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.aba.on { background: var(--text); color: var(--panel); }

/* ---------- publicar ---------- */
.compor {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; cursor: pointer; text-align: left;
}
.compor:hover { background: var(--hover); }
.compor .txt { flex: 1; color: var(--muted); }
.compor .mais { width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }

/* ---------- grade de publicações ---------- */
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tile {
  position: relative; aspect-ratio: 4 / 5; border: 0; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: var(--tile); color: #fff; display: block;
}
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.tile:hover img, .tile:hover video { transform: scale(1.04); }
.tile .marca-video { position: absolute; top: 8px; right: 8px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.tile.texto { background: linear-gradient(150deg, #0a3d52, #00adee); padding: 14px; text-align: left; }
.tile.texto:nth-child(3n+2) { background: linear-gradient(150deg, #13233a, #3f6fd8); }
.tile.texto:nth-child(3n) { background: linear-gradient(150deg, #173a33, #1fae8a); }
.tile.texto p { margin: 0; font-size: 13.5px; font-weight: 650; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.tile .legenda { position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px; font-size: 12px; font-weight: 600; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.vazio-grade { grid-column: 1 / -1; padding: 44px 20px; text-align: center; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: 18px; }
.vazio-grade strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }

/* ---------- explorar ---------- */
.explorar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.card-atalho {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff;
  background: #0a2a38 center / cover no-repeat; display: flex; align-items: flex-end; padding: 14px;
}
.card-atalho::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .7)); }
.card-atalho strong { position: relative; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.card-atalho:hover { transform: translateY(-2px); transition: transform .2s; }

/* ---------- folhas (painéis modais) ---------- */
.folha { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 20px; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .2s; }
.folha.aberta { opacity: 1; pointer-events: auto; }
.folha-caixa {
  width: min(560px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line);
  border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; transform: translateY(14px) scale(.98); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.folha.larga .folha-caixa { width: min(720px, 100%); }
.folha.aberta .folha-caixa { transform: none; }
.folha-topo { display: flex; align-items: center; gap: 8px; padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--line); }
.folha-topo h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 800; }
.folha-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.folha-corpo.pad { padding: 16px 18px 20px; }
.folha-rodape { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

/* listas de pessoas / notificações */
.linha { display: flex; align-items: center; gap: 12px; padding: 10px 18px; cursor: pointer; }
.linha:hover { background: var(--hover); }
.linha.nova { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.linha .txt { flex: 1; min-width: 0; }
.linha .txt strong { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha .txt small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha .quando { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.grupo-titulo { padding: 14px 18px 6px; font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.lista-vazia { padding: 40px 20px; text-align: center; color: var(--muted); }
.busca { position: relative; margin: 14px 18px 8px; }
.busca svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.busca input { width: 100%; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--input); padding: 0 14px 0 42px; outline: none; }
.busca input:focus { border-color: var(--accent); }
.aviso-notif { display: flex; align-items: center; gap: 12px; margin: 12px 18px 4px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 13.5px; }
.aviso-notif span { flex: 1; }

/* configurações */
.cfg-bloco { padding: 8px 0; border-bottom: 1px solid var(--line); }
.cfg-bloco:last-child { border-bottom: 0; }
.cfg-bloco h3 { margin: 10px 18px 6px; font-size: 12px; letter-spacing: .7px; text-transform: uppercase; color: var(--accent); }
.cfg-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; border: 0; background: transparent; text-align: left; cursor: pointer; text-decoration: none; }
.cfg-item:hover { background: var(--hover); }
.cfg-item .txt { flex: 1; min-width: 0; }
.cfg-item .txt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.cfg-item.perigo { color: var(--danger); }
.cfg-item > svg:last-child { color: var(--muted); }
.cfg-perfil { display: flex; align-items: center; gap: 14px; padding: 18px; border-bottom: 1px solid var(--line); }
.cfg-perfil .avatar { width: 58px; height: 58px; font-size: 19px; }
.cfg-perfil strong { display: block; font-size: 16px; }
.cfg-perfil small { color: var(--muted); }
.end-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); font-size: 13px; line-height: 1.45; color: var(--muted); }
.end-aviso strong { color: var(--text); }
.end-aviso svg { flex: none; margin-top: 2px; color: var(--text); }
#endCampos { margin-top: 16px; }
.neg-local { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.neg-local-tit { display: grid; gap: 3px; margin-bottom: 12px; }
.neg-local-tit strong { font-size: 14.5px; }
.neg-local-tit small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.end-perfil { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 650; }
.end-perfil input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.end-perfil small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.end-duas { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.end-duas.uf { grid-template-columns: 1fr 80px; }
.end-duas .campo input { width: 100%; }
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 4px 18px 12px; background: var(--panel-2); padding: 4px; border-radius: 12px; }
.segmentado button { border: 0; background: transparent; border-radius: 9px; padding: 9px 6px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.segmentado button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.switch { position: relative; width: 46px; height: 28px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 14px; background: var(--line); transition: background .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* editar perfil */
.ed-capa { position: relative; aspect-ratio: 3 / 1; border-radius: 18px; overflow: hidden; background: #06202c url("ponte-help.webp") center / cover; }
.ed-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-capa .pf-editar-capa { top: auto; bottom: 10px; right: 10px; }
.ed-foto { display: flex; align-items: center; gap: 14px; margin: -34px 0 0 14px; position: relative; z-index: 2; }
.ed-foto .avatar { width: 88px; height: 88px; font-size: 28px; border: 4px solid var(--panel); }
.ed-foto .acoes { display: flex; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.campo { margin-top: 16px; }
.campo label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.campo input, .campo textarea, .campo select {
  width: 100%; border: 1px solid var(--line); background: var(--input); border-radius: 12px; padding: 11px 13px; outline: none; font-size: 15px;
}
.campo textarea { resize: vertical; min-height: 90px; }
.campo input:focus, .campo textarea:focus { border-color: var(--accent); }
.campo input:disabled { opacity: .65; }
.campo .ajuda { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; font-size: 12px; color: var(--muted); }
.campo .ajuda .ok { color: var(--ok); }
.campo .ajuda .erro { color: var(--danger); }
.prefixo { display: flex; align-items: center; border: 1px solid var(--line); background: var(--input); border-radius: 12px; padding-left: 13px; }
.prefixo:focus-within { border-color: var(--accent); }
.prefixo span { color: var(--muted); }
.prefixo input { border: 0; background: transparent; padding-left: 2px; }

/* publicar */
.pub-autor { display: flex; align-items: center; gap: 10px; }
.pub-autor .avatar { width: 40px; height: 40px; font-size: 14px; }
.pub-texto { width: 100%; min-height: 120px; margin-top: 12px; border: 0; outline: none; resize: vertical; background: transparent; font-size: 16px; }
.pub-previa { position: relative; margin-top: 8px; border-radius: 16px; overflow: hidden; background: var(--tile); }
.pub-previa img, .pub-previa video { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #000; }
.pub-previa .icone-btn { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, .6); color: #fff; }
.pub-ferramentas { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pub-ferramentas .cont { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.pub-ferramentas .icone-btn { color: var(--accent); }

/* visualizar publicação */
.post-midia { background: #000; display: grid; place-items: center; }
.post-midia img, .post-midia video { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.post-info { padding: 14px 18px 18px; }
.post-info .autor { display: flex; align-items: center; gap: 10px; }
.post-info .autor .avatar { width: 38px; height: 38px; font-size: 13px; }
.post-nota { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.post-nota:empty { display: none; }
.post-info .autor strong { display: block; font-size: 14.5px; }
.post-info .autor small { color: var(--muted); font-size: 12.5px; }
.post-info .texto { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-nav { display: flex; gap: 6px; margin-left: auto; }

/* perfil público dentro da folha */
.folha-perfil .pf { border: 0; border-radius: 0; }
.folha-perfil .folha-topo { position: absolute; z-index: 5; top: 0; left: 0; right: 0; border: 0; background: transparent; pointer-events: none; }
.folha-perfil .folha-topo .icone-btn { background: rgba(0, 0, 0, .5); color: #fff; }
/* só com a folha aberta (fechada e invisível, o X continuava tocável por cima da página e do Flash) */
.folha-perfil.aberta .folha-topo .icone-btn { pointer-events: auto; }
.folha-perfil .folha-topo h2 { visibility: hidden; }
.folha-perfil .folha-caixa { position: relative; }
.pp-conteudo { padding: 0 16px 20px; }
.pp-conteudo h3 { margin: 18px 4px 10px; font-size: 15px; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9500; max-width: calc(100% - 32px); width: max-content; background: var(--text); color: var(--panel); padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); cursor: pointer; }

@media (max-width: 640px) {
  .pagina { padding: 10px 10px 40px; }
  .pf { border-radius: 22px; }
  .pf-corpo { padding: 0 14px 16px; }
  .pf-linha-avatar { flex-direction: column; align-items: flex-start; margin-top: -46px; }
  .pf-anel { width: 96px; height: 96px; }
  .pf-anel .avatar { font-size: 28px; }
  .pf-acoes { width: 100%; justify-content: stretch; order: 3; }
  .pf-acoes .btn:not(.icone) { flex: 1; }
  .pf-nome { font-size: 21px; }
  .pf-stat .num { font-size: 17px; }
  .grade { gap: 3px; }
  .tile { border-radius: 8px; }
  .explorar { grid-template-columns: 1fr 1fr; }
  .folha { padding: 0; align-items: end; }
  .folha-caixa { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; transform: translateY(40px); }
  .folha.cheia .folha-caixa { max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .folha.larga .folha-caixa { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =====================================================
   Barra inferior da rede (Diário, Mensagens, Perfil)
   ===================================================== */
body.com-barra { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
/* Esmaecido atrás da barra de baixo: o que rola some aos poucos antes de chegar nela (antes um cartão com borda, como o
   "Estatísticas do perfil", ficava colado na barra e parecia uma segunda barra). */
body.com-barra::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1099; pointer-events: none;
  height: calc(128px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg, #070b0e) 85%, transparent) 38%, var(--bg, #070b0e) 58%); }

.barra-rede {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1100;
  width: min(460px, calc(100% - 20px)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 6px;
  border-radius: 22px; background: color-mix(in srgb, var(--panel) 97%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow);
  /* Quase opaca e com desfoque: antes (90%, sem desfoque) a borda do cartão que passava por trás aparecia e parecia uma
     segunda barra por baixo (Perfil, 04/11/2026). */
  -webkit-backdrop-filter: saturate(1.3) blur(18px); backdrop-filter: saturate(1.3) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
}
.barra-rede a, .barra-rede button {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; border-radius: 16px;
  color: var(--muted); text-decoration: none; font-size: 10.5px; font-weight: 700; cursor: pointer;
}
@media (hover: hover) { .barra-rede a:hover, .barra-rede button:hover { color: var(--text); background: var(--hover); } }
.barra-rede [aria-current="page"], .barra-rede [aria-current="page"]:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.barra-rede .publicar span.bola { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, #00adee, #0077a8); color: #fff; box-shadow: 0 8px 20px rgba(0, 173, 238, .35); }
.barra-rede .publicar { padding-top: 0; }
.barra-rede .ponto-badge { top: 0; right: calc(50% - 22px); }
.barra-rede .mini-av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #0a4a63, #00adee); }
.barra-rede .mini-av img { width: 100%; height: 100%; object-fit: cover; }
.barra-rede [aria-current="page"] .mini-av { box-shadow: 0 0 0 2px var(--accent); }

/* =====================================================
   Páginas da rede
   ===================================================== */
.pagina.larga { width: min(1100px, 100%); }
.cab-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.cab-pagina h1 { margin: 0; font-size: 24px; font-weight: 850; letter-spacing: -.4px; }
.cab-pagina p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.duas-col { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.lateral { position: sticky; top: calc(var(--topo) + 14px); display: grid; gap: 14px; }
.cartao { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 16px; }
.cartao h2, .cartao h3 { margin: 0 0 10px; font-size: 15px; }
.cartao .linha { border-radius: 14px; }
.abas-rede { display: flex; gap: 6px; padding: 4px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.abas-rede::-webkit-scrollbar { display: none; }
.abas-rede button { flex: 1 0 auto; border: 0; border-radius: 12px; padding: 10px 14px; background: transparent; color: var(--muted); font-weight: 750; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.abas-rede button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.campo-busca { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 12px; }
.campo-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px 0; font-size: 15px; }
.campo-busca svg { color: var(--muted); }

/* ---------- compor ---------- */
.compor-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; text-align: left; margin-bottom: 14px; }
.compor-card:hover { background: var(--hover); }
.compor-card .txt { flex: 1; color: var(--muted); }
.compor-card .acs { display: flex; gap: 6px; color: var(--accent); }

/* ---------- pessoas em linha (histórias) ---------- */
.pessoas-trilho { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 12px; margin-bottom: 4px; }
.pessoas-trilho::-webkit-scrollbar { display: none; }
.pessoa-bola { flex-shrink: 0; width: 72px; display: grid; justify-items: center; gap: 5px; border: 0; background: none; cursor: pointer; text-decoration: none; }
.pessoa-bola .anel { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #00adee, #7de3ff, #0077a8, #00adee); }
.pessoa-bola .anel .avatar { width: 100%; height: 100%; border: 3px solid var(--bg); font-size: 18px; }
.pessoa-bola span { font-size: 11.5px; font-weight: 650; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- publicação no feed ---------- */
.post-card { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-bottom: 14px; }
.post-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.post-cab .avatar { width: 40px; height: 40px; font-size: 13px; cursor: pointer; }
.post-cab .quem { flex: 1; min-width: 0; display: grid; }
.post-cab .quem button { border: 0; background: none; padding: 0; text-align: left; font-weight: 800; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-cab .quem small { color: var(--muted); font-size: 12.5px; }
.post-card .post-texto { margin: 0; padding: 0 14px 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.post-card .post-texto.so-texto { font-size: 18px; font-weight: 600; padding-top: 6px; }
.post-card .post-midia-f { background: #000; display: grid; place-items: center; max-height: 620px; overflow: hidden; }
.post-card .post-midia-f img, .post-card .post-midia-f video { width: 100%; max-height: 620px; object-fit: contain; display: block; }
.interacoes { display: flex; align-items: center; gap: 4px; padding: 6px 8px; }
.interacoes .acao { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 10px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--text); }
.interacoes .acao:hover { background: var(--hover); }
.interacoes .acao.curtido { color: #ff3b5c; }
.interacoes .acao.curtido svg { fill: currentColor; }
.interacoes .acao .n { min-width: 8px; }
.interacoes .esp { flex: 1; }
.interacoes .nota-post { font-size: 12.5px; }
.post-coment-previa { padding: 0 14px 12px; color: var(--muted); font-size: 13.5px; display: grid; gap: 4px; }
.post-coment-previa b { color: var(--text); }
.post-coment-previa button { justify-self: start; border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; font-weight: 700; }
.feed-vazio { padding: 40px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 22px; }
.feed-vazio strong { display: block; color: var(--text); font-size: 17px; margin-bottom: 6px; }
.feed-vazio .btn { margin-top: 12px; }
.esqueleto-post { height: 320px; border-radius: 22px; margin-bottom: 14px; background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%); background-size: 200% 100%; animation: brilhoR 1.3s infinite linear; }
@keyframes brilhoR { to { background-position: -200% 0; } }

/* ---------- comentários ---------- */
.comentarios { display: grid; gap: 10px; }
.comentario { display: flex; gap: 10px; align-items: flex-start; }
.comentario .avatar { width: 34px; height: 34px; font-size: 12px; cursor: pointer; }
.comentario .bolha { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; padding: 8px 12px; }
.comentario .bolha strong { font-size: 13px; cursor: pointer; }
.comentario .bolha p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
.comentario .meta { display: flex; gap: 10px; margin: 4px 0 0 12px; font-size: 12px; color: var(--muted); }
.comentario .meta button { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; font-weight: 700; font-size: 12px; }
.comentario .meta button:hover { color: var(--danger); }
.novo-comentario { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.novo-comentario textarea { flex: 1; min-height: 42px; max-height: 140px; resize: none; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--input); color: var(--text); font: inherit; font-size: 14.5px; }
.post-social { padding: 10px 18px 16px; display: grid; gap: 10px; border-top: 1px solid var(--line); }

/* ---------- notificações ---------- */
.notif { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; cursor: pointer; }
.notif:hover { background: var(--hover); }
.notif.nova { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.notif .av-wrap { position: relative; flex-shrink: 0; }
.notif .av-wrap .avatar { width: 46px; height: 46px; }
.notif .av-wrap .tipo { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 2px solid var(--panel); }
.notif .av-wrap .tipo svg { width: 12px; height: 12px; }
/* linha agrupada (estrelas na mesma publicação, seguidores): duas fotos sobrepostas */
.notif .av-wrap.duplo { width: 46px; height: 46px; }
.notif .av-wrap.duplo .avatar { position: absolute; width: 34px; height: 34px; font-size: 12px; border: 2px solid var(--panel); }
.notif .av-wrap.duplo .avatar:first-child { top: 0; left: 0; }
.notif .av-wrap.duplo .avatar + .avatar { right: 0; bottom: 0; }
.notif .avatar.plano { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--pc, #7c3aed), color-mix(in srgb, var(--pc, #7c3aed) 55%, #000)); }
.notif .tx { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.notif .tx b { font-weight: 800; }
.notif .tx small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif .mini-foto { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.notif .acoes-linha { display: flex; gap: 6px; }

/* ---------- configurações (página) ---------- */
.cfg-grade { display: grid; gap: 14px; }
.cfg-grade .cfg-bloco { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 8px; margin: 0; }
.cfg-grade .cfg-bloco h3 { margin: 10px 12px 6px; }

/* ---------- meus negócios (página) ---------- */
.neg-grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.neg-card { --c: var(--accent); position: relative; overflow: hidden; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); display: grid; align-content: start; }
.neg-card .capa { height: 96px; background: #06202c center / cover no-repeat; position: relative; }
.neg-card .capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45)); }
.neg-card .capa .tag { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--c); color: #fff; }
.neg-card .corpo { padding: 0 16px 16px; display: grid; gap: 8px; }
.neg-aviso { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; background: color-mix(in srgb, #ef4444 12%, transparent); border: 1px solid color-mix(in srgb, #ef4444 35%, transparent); }
.neg-aviso strong { color: #ef4444; }
.neg-aviso a { color: var(--accent); font-weight: 700; }
.neg-card .corpo .avatar { width: 60px; height: 60px; margin-top: -30px; border: 3px solid var(--panel); position: relative; z-index: 1; font-size: 18px; }
.neg-card h3 { margin: 0; font-size: 17px; }
.neg-card .meta { color: var(--muted); font-size: 13px; }
.neg-card .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.neg-card .nums div { padding: 8px; border-radius: 12px; background: var(--panel-2); text-align: center; }
.neg-card .nums b { display: block; font-size: 16px; }
.neg-card .nums span { font-size: 11px; color: var(--muted); }
.neg-card .acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.neg-card.novo { place-items: center; min-height: 240px; border-style: dashed; cursor: pointer; text-align: center; padding: 20px; color: var(--muted); }
.neg-card.novo:hover { border-color: var(--c); color: var(--text); }
.neg-card.novo .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); margin: 0 auto 8px; }
.neg-card.servicos { --c: #00adee; } .neg-card.delivery { --c: #ff7a1a; } .neg-card.lojinha { --c: #b066ff; } .neg-card.imoveis { --c: #2fbf71; } .neg-card.saude { --c: #0fb5a6; } .neg-card.comunidade { --c: #e5487f; }

@media (max-width: 900px) {
  .duas-col { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .lateral.some-mobile { display: none; }
}

/* ---------- detalhes ---------- */
body.com-barra .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
.secao-perfil { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 2px 10px; }
.secao-perfil h2 { margin: 0; font-size: 18px; font-weight: 800; }
.dicas { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.dicas li { position: relative; padding-left: 22px; }
.dicas li > svg:first-child { position: absolute; left: 0; top: .25em; color: var(--ok); }
.atalhos { display: grid; gap: 8px; }
.atalhos .btn { justify-content: flex-start; }
.eu-card { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.eu-card .avatar { width: 52px; height: 52px; font-size: 17px; }
.eu-card .tx { flex: 1; min-width: 0; display: grid; }
.eu-card .tx strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu-card .tx small { color: var(--muted); }
.notif .quando { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.neg-card.novo strong { font-size: 15px; color: var(--text); }
.neg-card.novo small { font-size: 13px; }
.cab-pagina .btn { flex-shrink: 0; }
.cfg-grade { display: grid; gap: 14px; }
.cfg-grade > .cfg-perfil { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; margin: 0; }
.post-social:empty { display: none; }

/* =====================================================
   Topo fixo, Diário, estrelas e comentários (v2)
   ===================================================== */
html, body { overflow-x: clip; }
.duas-col > * { min-width: 0; }
.topo { position: sticky; top: 0; }
.topo .icone-btn { position: relative; }
.topo-espaco { width: 42px; flex-shrink: 0; }
.topo .ponto-badge { top: 6px; right: 6px; }

/* ---------- filtro e posts compactos do Diário ---------- */
.filtro-feed { display: flex; gap: 6px; margin: 0 0 12px; }
.filtro-feed button { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 750; cursor: pointer; }
.filtro-feed button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.post-card { border-radius: 18px; margin-bottom: 12px; }
.post-cab { padding: 10px 12px; }
.post-cab .avatar { width: 36px; height: 36px; }
.post-card .post-texto { padding: 0 12px 10px; font-size: 14.5px; }
.post-card .post-texto.so-texto { font-size: 16px; }
.post-card .post-texto.curto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ver-mais { border: 0; background: none; padding: 0 12px 10px; margin-top: -6px; color: var(--muted); font-weight: 750; font-size: 13px; cursor: pointer; }
.post-card .post-midia-f { position: relative; }
.esqueleto-post { height: 240px; border-radius: 18px; }

/* ---------- estrelas das publicações ---------- */
.interacoes { flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; padding: 6px 10px 8px; border-top: 1px solid var(--line); }
.estrelas-post { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.estrelas-linha { display: inline-flex; gap: 1px; }
.estrela { border: 0; background: none; padding: 2px 1px; font-size: 24px; line-height: 1; color: color-mix(in srgb, var(--muted) 45%, transparent); cursor: pointer; transition: transform .12s, color .12s; }
.estrela:hover { transform: scale(1.15); }
.estrela.on { color: #f5b301; }
.estrela.minha { text-shadow: 0 0 10px rgba(245, 179, 1, .35); }
.estrelas-linha[role="img"] .estrela { cursor: default; font-size: 20px; }
.estrelas-linha[role="img"] .estrela:hover { transform: none; }
.estrelas-linha.salvando { opacity: .55; pointer-events: none; }
.estrelas-txt { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--muted); font-weight: 650; cursor: pointer; }
.estrelas-txt:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.estrelas-txt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.estrelas-txt .med { color: var(--text); font-size: 14px; font-weight: 800; }
.estrelas-txt .est-m { color: #f5b301; font-size: 13px; margin-left: -2px; }
.estrelas-txt .i { width: 14px; height: 14px; opacity: .7; }
.acoes-post { display: flex; gap: 0; margin-left: 4px; }
/* barra da publicação: estrelas e média em cima; quatro ações iguais embaixo (ícone + nome) */
.interacoes { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 0; padding: 0; border-top: 0; }
@keyframes contPulso { 50% { transform: scale(1.35); } }
.int-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 8px 12px 8px 10px; }
.int-topo .estrelas-post { flex: none; }
.int-topo .estrelas-txt { margin: 0 -6px 0 0; white-space: nowrap; }
.interacoes .acoes-post { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 4px 6px 6px; border-top: 1px solid var(--line); }
.interacoes .acao { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: auto; padding: 7px 2px 6px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; cursor: pointer; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.interacoes .acao .ic { display: grid; place-items: center; height: 24px; transition: transform .12s; }
.interacoes .acao svg { width: 23px; height: 23px; stroke-width: 1.8; }
.interacoes .acao .rot { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.interacoes .acao:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.interacoes .acao:hover .rot { color: var(--text); }
.interacoes .acao:active .ic { transform: scale(.86); }
@media (hover: none) { .interacoes .acao:hover { background: none; } }
.interacoes .acao.salvar.on, .interacoes .acao.salvar.on .rot { color: var(--accent); }
.interacoes .acao.salvar.on svg { fill: currentColor; }
.interacoes .acao.salvar.pulo .ic, .interacoes .acao.republicar.pulo .ic { animation: contPulso .4s ease-out; }
.interacoes .acao .ic { position: relative; }
.interacoes .acao .ic .n { position: absolute; top: -5px; left: calc(50% + 7px); min-width: 17px; padding: 1px 5px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 10px; font-weight: 800; line-height: 1.3; text-align: center; }
.interacoes .acao.republicar.on, .interacoes .acao.republicar.on .rot { color: #1fbf75; }
.interacoes .acao.republicar.on svg { stroke-width: 2.4; }
.post-repost { display: flex; align-items: center; gap: 6px; padding: 10px 14px 0 18px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.post-repost svg { width: 15px; height: 15px; color: #1fbf75; }
.post-repost button { border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; }
@media (max-width: 370px) {
  .interacoes .estrela { font-size: 21px; padding: 2px 0; }
  .interacoes .acao .rot { font-size: 10.5px; }
}

/* ---------- comentários ---------- */
.coment-moderacao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coment-moderacao:empty, .coment-aviso:empty { display: none; }
.coment-nota, .coment-aviso { font-size: 12.5px; color: var(--muted); }
.coment-aviso { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--line); }
.fio-coment { display: grid; gap: 8px; }
.respostas { display: grid; gap: 8px; margin-left: 44px; padding-left: 10px; border-left: 2px solid var(--line); }
.respostas .comentario .avatar { width: 28px; height: 28px; font-size: 10px; }
.comentario .col { flex: 1; min-width: 0; }
.comentario .bolha { width: fit-content; max-width: 100%; }
.bolha-topo { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bolha-topo .para { font-size: 11.5px; color: var(--muted); }
.bolha-topo .etiqueta { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.comentario.oculto .bolha { opacity: .6; border-style: dashed; }
.comentario .meta { flex-wrap: wrap; gap: 4px 10px; }
.respostas .comentario .meta { gap: 4px 8px; margin-left: 8px; }
.comentario .meta button:hover { color: var(--text); }
.comentario .meta button.ativo { color: var(--accent); }
.comentario .meta button.perigo:hover { color: var(--danger); }
.comentario textarea.editar { width: 100%; min-height: 60px; resize: vertical; margin-top: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--input); color: var(--text); font: inherit; font-size: 14px; }
.acoes-editar { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.novo-comentario { display: grid; gap: 6px; }
.respondendo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.respondendo button { border: 0; background: none; color: var(--accent); font-weight: 750; cursor: pointer; font-size: 12.5px; }
.linha-form { display: flex; gap: 8px; align-items: flex-end; }
.linha-form textarea { flex: 1; min-height: 42px; max-height: 140px; resize: none; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--input); color: var(--text); font: inherit; font-size: 14.5px; }

/* ---------- Explorar ---------- */
.titulo-sec { margin: 4px 2px 10px; font-size: 16px; font-weight: 800; }
.atalhos-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.atalho-classe { --c: var(--accent); position: relative; overflow: hidden; min-height: 112px; border-radius: 18px; padding: 12px; display: grid; align-content: end; gap: 1px; color: #fff; text-decoration: none; background: #06202c center / cover no-repeat; isolation: isolate; }
.atalho-classe::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .72)); }
/* Ícone no fluxo (em cima) e textos embaixo: nunca se sobrepõem, mesmo com o nome em 2 linhas. */
.atalho-classe { align-content: stretch; grid-template-rows: auto 1fr auto auto; }
.atalho-classe .ic { grid-row: 1; justify-self: start; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.atalho-classe strong { grid-row: 3; font-size: 15px; line-height: 1.2; margin-top: 8px; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.atalho-classe small { grid-row: 4; font-size: 11.5px; line-height: 1.3; opacity: .88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.atalho-classe:hover { box-shadow: 0 0 0 2px var(--c); }
.atalhos-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.atalho-mini { --c: var(--accent); display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); text-decoration: none; font-weight: 750; font-size: 13px; }
.atalho-mini .ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.atalho-mini:hover { border-color: var(--c); }
.atalho-classe.servicos, .atalho-mini.servicos { --c: #00adee; }
.atalho-classe.delivery, .atalho-mini.delivery { --c: #ff7a1a; }
.atalho-classe.lojinha, .atalho-mini.lojinha { --c: #b066ff; }
.atalho-classe.imoveis, .atalho-mini.imoveis { --c: #2fbf71; }
.atalho-classe.saude, .atalho-mini.saude { --c: #0fb5a6; }
.atalho-classe.comunidade, .atalho-mini.comunidade { --c: #e5487f; }
@media (min-width: 700px) { .atalhos-classes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- desativar / excluir conta (configuracoes.html) ---------- */
.conta-explica { padding: 14px 16px; border-radius: 14px; background: var(--panel-2); font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.conta-explica strong { display: block; margin-bottom: 4px; }
.conta-explica li strong { display: inline; margin: 0; }
.conta-explica ul, .conta-explica ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); }
.conta-opcoes { display: grid; gap: 8px; }
.conta-op { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; }
.conta-op:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.conta-op input { margin-top: 3px; accent-color: var(--accent); flex: none; width: 18px; height: 18px; }
.conta-op span { display: grid; gap: 2px; font-size: 14px; }
.conta-op small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; }
.btn.pri.perigo { background: var(--danger); color: #fff; border: 0; }
.btn.pri.perigo:disabled { opacity: .5; }
.campo label.conta-op, label.conta-op { display: flex; margin-bottom: 0; font-weight: 600; font-size: 14px; }

.mencao { color: var(--accent); font-weight: 700; text-decoration: none; }
.mencao:hover { text-decoration: underline; }

/* ---------- várias fotos (carrossel), toque duplo, salvos, quem deu estrelas ---------- */
.carrossel { position: relative; width: 100%; }
.car-trilho { width: 100%; }
.carrossel.varias .car-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.carrossel.varias .car-trilho::-webkit-scrollbar { display: none; }
.carrossel.varias .car-trilho img { flex: 0 0 100%; width: 100%; height: var(--car-alt, min(62vh, 520px)); max-height: none; object-fit: contain; scroll-snap-align: center; scroll-snap-stop: always; background: #000; user-select: none; }
.post-card .post-midia-f.varias { --car-alt: 380px; max-height: none; cursor: default; display: block; }
.post-card .post-midia-f.varias img { max-height: none; object-fit: contain; }
.car-cont { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 750; pointer-events: none; }
.car-pontos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.car-pontos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .2s, transform .2s; }
.car-pontos i.on { background: #fff; transform: scale(1.25); }
.car-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: #0f1b22; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.car-seta.esq { left: 8px; } .car-seta.dir { right: 8px; }
.car-seta[hidden] { display: none; }
@media (hover: none) { .car-seta { display: none; } }
.post-midia-f, .post-midia { position: relative; }
.estrela-pulo { position: absolute; left: 50%; top: 50%; z-index: 3; font-size: 96px; line-height: 1; color: #f5b301; text-shadow: 0 4px 24px rgba(0,0,0,.45); transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; animation: estrelaPulo .85s cubic-bezier(.2,.9,.3,1.3) forwards; }
@keyframes estrelaPulo { 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -50%) scale(.95); } 45% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
/* Celular com "remover animações"/economia de bateria: a estrela aparece parada e some (antes sumia na hora). */
@keyframes estrelaFixa { 0%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .estrela-pulo { animation: estrelaFixa .9s linear forwards; } }
.car-trilho { touch-action: manipulation; }
.filtro-feed button { display: inline-flex; align-items: center; gap: 5px; }
.pub-previa.varias, .pub-previa:has(.pub-foto) { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pub-previa .pub-foto { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #000; }
.pub-previa .pub-foto img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: none; }
.pub-previa .pub-foto .icone-btn { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; min-width: 0; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; }
.pub-foto-n { position: absolute; left: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 800; }
.pub-foto-mais { aspect-ratio: 4 / 5; border-radius: 12px; border: 1.5px dashed var(--line); background: transparent; color: var(--muted); display: grid; place-content: center; justify-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.pub-foto-mais:hover { border-color: var(--accent); color: var(--accent); }
.tile .marca-fotos { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.btn.salvar-post.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.btn.salvar-post.on svg { fill: currentColor; }

/* ---------- resumo das estrelas (folha) ---------- */
.est-topo { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 4px 2px 14px; border-bottom: 1px solid var(--line); }
.est-grande { display: grid; justify-items: center; gap: 4px; min-width: 96px; }
.est-grande strong { font-size: 44px; line-height: 1; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.est-grande small { color: var(--muted); font-size: 12.5px; font-weight: 650; text-align: center; }
.est-cinco { position: relative; display: inline-block; font-size: 17px; letter-spacing: 1px; color: color-mix(in srgb, var(--muted) 40%, transparent); line-height: 1; }
.est-cheio { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #f5b301; }
.est-barras { display: grid; gap: 6px; min-width: 0; }
.est-barra { display: grid; grid-template-columns: 34px 1fr auto 38px; align-items: center; gap: 8px; border: 0; background: none; padding: 3px 4px; margin: 0 -4px; border-radius: 8px; font: inherit; color: var(--text); text-align: left; }
.est-barra.clicavel { cursor: pointer; }
.est-barra.clicavel:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.est-barra:disabled { opacity: 1; cursor: default; }
.est-barra .rot { font-size: 12.5px; font-weight: 750; color: var(--muted); white-space: nowrap; }
.est-barra .trilho { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.est-barra .trilho i { display: block; height: 100%; border-radius: inherit; background: #f5b301; min-width: 0; transition: width .4s; }
.est-barra .qt { font-size: 12.5px; font-weight: 750; text-align: right; min-width: 22px; }
.est-barra .pc { font-size: 12px; color: var(--muted); text-align: right; }
.est-sua { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 2px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.est-sua-btns { display: inline-flex; gap: 1px; }
.est-quem-tit { margin: 14px 2px 8px; font-size: 15px; }
.est-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.est-chips button { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer; }
.est-chips button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.est-mais { display: block; margin: 10px auto 0; }
@media (max-width: 380px) { .est-topo { grid-template-columns: 1fr; } }
.est-sua:last-child { border-bottom: 0; }

/* ---------- Diário: foto no recorte da publicação (sem "ver inteira") ---------- */
.post-card .post-midia-f { max-height: none; cursor: default; display: block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.post-card .post-midia-f .car-trilho img { width: 100%; height: auto; max-height: none; aspect-ratio: var(--prop, 0.8); object-fit: cover; object-position: center; }
.post-card .post-midia-f.alta .car-trilho img { object-position: top; }
.post-card .post-midia-f.varias .car-trilho img { height: auto; aspect-ratio: var(--prop, 0.8); object-fit: cover; }
.post-card .post-midia-f video { width: 100%; max-height: 80vh; object-fit: contain; }

/* toque duplo: estrelas surgindo espalhadas pela foto e crescendo */
.contagem { position: absolute; inset: 0; z-index: 4; overflow: hidden; cursor: pointer; background: radial-gradient(circle at center, rgba(0,0,0,.16), transparent 72%); animation: contEntra .18s ease-out; -webkit-tap-highlight-color: transparent; }
.cont-ceu { position: absolute; inset: 0; pointer-events: none; }
.est-voa { position: absolute; width: var(--t); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='.2' y1='0' x2='.8' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3a6'/%3E%3Cstop offset='.35' stop-color='%23ffd23f'/%3E%3Cstop offset='.75' stop-color='%23f7a90c'/%3E%3Cstop offset='1' stop-color='%23e88a00'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 6.5c2.3 0 4.2 1.4 5.1 3.5l9.6 22.4 24.3 2.1c4.9.4 6.9 6.5 3.2 9.7L73.7 60.2l5.5 23.8c1.1 4.8-4.1 8.6-8.3 6L50 77.6 29.1 90c-4.2 2.6-9.4-1.2-8.3-6l5.5-23.8L7.8 44.2c-3.7-3.2-1.7-9.3 3.2-9.7l24.3-2.1L44.9 10c.9-2.1 2.8-3.5 5.1-3.5z' fill='url(%23g)' stroke='%23d97c00' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M50 14l-8 18.5c-.6 1.4-2 2.4-3.6 2.5L20 36.6c8 4 20 6 30 6s22-2 30-6L61.6 35c-1.6-.1-3-1.1-3.6-2.5z' fill='url(%23b)' opacity='.75'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(255,196,0,.45)); transform: translate(-50%, -50%) rotate(var(--r)) scale(0); opacity: 0; animation: estSurge 2.8s cubic-bezier(.2,.9,.25,1) forwards; will-change: transform, opacity; }
@keyframes estSurge {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--r) - 35deg)) scale(0); }
  9% { opacity: 1; }
  16% { transform: translate(-50%, -50%) rotate(calc(var(--r) + 6deg)) scale(1.12); }
  24% { transform: translate(-50%, -50%) rotate(var(--r)) scale(.95); }
  32% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.22); }
}
.contagem.parou .est-voa, .contagem.fundir .est-voa { animation: estCresce .5s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes estCresce { from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.1); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.32); } }
.contagem.saindo .est-voa { animation: estSai .5s ease-in forwards; }
@keyframes estSai { from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.32); } to { opacity: 0; transform: translate(-50%, -78%) rotate(calc(var(--r) + 14deg)) scale(1.6); } }
.contagem.saindo { background: none; transition: background .3s; }
.cont-rotulo { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border-radius: 999px; background: rgba(10,14,18,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 13px; font-weight: 750; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.25); animation: rotSobe .25s ease-out; }
.cont-mini { display: inline-flex; gap: 1px; font-size: 13px; line-height: 1; }
.cont-mini i { font-style: normal; color: rgba(255,255,255,.3); transition: color .2s, transform .25s cubic-bezier(.2,1.6,.4,1); }
.cont-mini i.on { color: #ffc61a; transform: scale(1.15); }
.contagem.saindo .cont-rotulo { opacity: 0; transition: opacity .25s; }
@keyframes contEntra { from { opacity: 0; } }
@keyframes rotSobe { from { opacity: 0; transform: translate(-50%, 8px); } }
/* "Remover animações": as estrelas aparecem paradas (sem crescer) e somem. */
@media (prefers-reduced-motion: reduce) {
  .est-voa, .contagem.parou .est-voa, .contagem.fundir .est-voa { animation: none; opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
  .contagem.saindo .est-voa { animation: none; opacity: 0; transition: opacity .3s; }
  .cont-rotulo { animation: none; }
}

/* filtro do Diário: Principais ▾ */
.filtro-escolha { display: inline-flex; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.filtro-escolha .seta { transform: rotate(90deg); opacity: .8; }

/* perfil: Publicações | Salvos */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.abas-posts { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.abas-posts button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.abas-posts button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.nota-salvos { color: var(--muted); font-size: 12.5px; text-align: center; margin: 10px 0 0; }

.busca-enviar { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--input); color: var(--text); font: inherit; font-size: 15px; }

/* ---------- comentários (estilo rede social) ---------- */
.coment-config { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.coment-config:empty { display: none; }
.coment-quem { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.coment-quem strong { color: var(--text); font-weight: 800; }
.comentarios { gap: 4px; }
.fio-coment { gap: 2px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.fio-coment:last-child { border-bottom: 0; }
.fio-coment.fixado { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 14px; padding: 8px 8px; margin: 0 -8px; border-bottom: 0; }
.comentario { gap: 10px; }
.comentario .avatar { width: 36px; height: 36px; }
.comentario.oculto .col { opacity: .55; }
.coment-fixo { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 750; color: var(--muted); margin-bottom: 2px; }
.coment-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 24px; }
.coment-nome { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--text); cursor: pointer; }
.selo-autor { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.coment-topo .para { font-size: 12px; color: var(--muted); }
.coment-quando { font-size: 12px; color: var(--muted); }
.coment-topo .etiqueta { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.coment-mais { margin-left: auto; width: 30px; height: 30px; min-width: 0; color: var(--muted); }
.coment-texto { margin: 1px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.45; }
.coment-acoes { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.coment-acoes > button { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12.5px; font-weight: 750; color: var(--muted); cursor: pointer; }
.coment-acoes > button:hover { color: var(--text); }
.coment-reagir.ativo { color: var(--accent); }
.coment-reacoes { margin-left: auto; display: inline-flex !important; align-items: center; gap: 4px; padding: 2px 8px !important; border-radius: 999px; background: var(--panel-2) !important; border: 1px solid var(--line) !important; }
.coment-reacoes[hidden] { display: none !important; }
.coment-reacoes .emojis { font-size: 13px; letter-spacing: -2px; padding-right: 2px; }
.coment-reacoes .n { font-size: 12px; color: var(--muted); }
.ver-respostas { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--muted); cursor: pointer; text-align: left; }
.ver-respostas::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--line); vertical-align: middle; margin-right: 8px; }
.respostas { margin-left: 46px; padding-left: 0; border-left: 0; gap: 6px; margin-top: 4px; }
.respostas .comentario .avatar { width: 28px; height: 28px; }
.coment-vazio { padding: 24px 8px; }
.reacao-pop { position: fixed; z-index: 9800; display: flex; gap: 2px; padding: 6px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.reacao-pop button { border: 0; background: none; font-size: 26px; line-height: 1; padding: 4px; border-radius: 50%; cursor: pointer; transition: transform .15s; animation: reacEntra .22s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--k) * 25ms); }
.reacao-pop button:hover, .reacao-pop button:focus-visible { transform: scale(1.3) translateY(-3px); outline: none; }
.reacao-pop button.eu { background: color-mix(in srgb, var(--accent) 18%, transparent); }
@keyframes reacEntra { from { transform: scale(.3) translateY(8px); opacity: 0; } }
.novo-comentario { flex-direction: column; align-items: stretch; gap: 6px; position: sticky; bottom: 0; background: var(--panel); padding-bottom: 4px; }
.novo-comentario .linha-form { display: flex; align-items: flex-end; gap: 8px; }
.novo-comentario .linha-form .avatar { width: 34px; height: 34px; flex: none; margin-bottom: 4px; }
.novo-comentario textarea { border-radius: 22px; padding: 10px 16px; min-height: 42px; }
.coment-enviar { flex: none; min-height: 42px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14.5px; font-weight: 800; padding: 0 6px; cursor: pointer; }
.coment-enviar:disabled { opacity: .4; cursor: default; }
.respondendo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-radius: 12px; background: var(--panel-2); font-size: 12.5px; color: var(--muted); }
.respondendo .icone-btn { width: 26px; height: 26px; min-width: 0; }

/* quem deu estrelas: rolagem infinita */
.est-fim { text-align: center; color: var(--muted); font-size: 12.5px; padding: 12px 0 4px; min-height: 8px; }

/* ---------- Flash ⚡ (24 horas): barra, visor e criador ---------- */
.stories { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.stories::-webkit-scrollbar { display: none; }
.stories:empty { display: none; }
.story-circ { flex: none; display: grid; justify-items: center; gap: 6px; width: 74px; border: 0; background: none; padding: 0; color: var(--text); font: inherit; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.story-circ .anel { position: relative; width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: color-mix(in srgb, var(--muted) 30%, transparent); display: grid; place-items: center; box-sizing: border-box; transition: transform .15s; }
.story-circ:active .anel { transform: scale(.94); }
.story-circ.meu:not(.tem) .anel { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); }
.story-circ.novo .anel { box-shadow: 0 4px 16px -6px rgba(255,138,0,.6); }
.story-circ.carregando .anel { animation: hfAnelPulso .9s ease-in-out infinite; }
@keyframes hfAnelPulso { 50% { transform: scale(.93); opacity: .7; } }
.story-circ .avatar { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg); box-sizing: border-box; font-size: 18px; }
.story-circ .mais { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #5ad8ff, #00adee 45%, #0062d6); color: #fff; border: 2.5px solid var(--bg); box-shadow: 0 3px 10px rgba(0, 140, 238, .5); }
.story-circ .mais .i { width: 13px; height: 13px; stroke-width: 3; }
.story-circ .mais::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; } /* "+" fácil de acertar com o dedo */
.story-circ .raio { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #0b1014; border: 2px solid var(--bg); font-size: 12px; line-height: 1; }
.story-circ .nome { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; color: var(--muted); }
.story-circ.novo .nome, .story-circ.meu .nome { color: var(--text); }
/* perfil: anel em volta da foto quando tem flash */
.pf-anel.com-flash { background: var(--anel-flash); }
.com-flash > .avatar { cursor: pointer; }

.story-visor { position: fixed; inset: 0; z-index: 4900; background: #000; display: grid; place-items: center; perspective: 1400px; animation: flashAbre .22s cubic-bezier(.2,.9,.3,1); }
@keyframes flashAbre { from { opacity: 0; transform: scale(.96); } }
.story-caixa { position: relative; width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9)); background: #111; overflow: hidden; border-radius: 0; }
@media (min-width: 700px) { .story-visor { background: radial-gradient(circle at 50% 30%, #1d2730, #000 70%); } .story-caixa { border-radius: 16px; height: min(92vh, 860px); width: calc(min(92vh, 860px) * 9 / 16); box-shadow: 0 20px 60px rgba(0,0,0,.6); } }
@media (max-width: 699px) { .story-caixa { width: 100vw; height: 100dvh; } }
.story-caixa.vai-dir { animation: flashDir .3s cubic-bezier(.2,.9,.3,1); }
.story-caixa.vai-esq { animation: flashEsq .3s cubic-bezier(.2,.9,.3,1); }
@keyframes flashDir { from { opacity: .4; transform: translateX(14%) scale(.96); } }
@keyframes flashEsq { from { opacity: .4; transform: translateX(-14%) scale(.96); } }
/* quadro 9:16 do flash: a imagem inteira (sem cortar as laterais) e as figurinhas no lugar em que foram postas.
   No celular comprido sobra espaço embaixo para o campo de responder (--reserva), como no Instagram. */
.story-caixa { --reserva: 0px; }
.story-quadro { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; background: #000; }
.story-quadro > * { pointer-events: none; }
.story-quadro > .story-enq, .story-quadro > .story-link, .story-quadro > .story-post-area { pointer-events: auto; }
@media (max-width: 699px) {
  .story-quadro { inset: env(safe-area-inset-top) 0 auto; margin-inline: auto; width: min(100%, calc((100dvh - env(safe-area-inset-top) - var(--reserva)) * 9 / 16)); height: auto; aspect-ratio: 9 / 16; }
}
@media (max-width: 699px) and (max-aspect-ratio: 9 / 17.4) { .story-caixa { --reserva: 68px; } .story-quadro { border-radius: 14px; } }
.story-palco { position: absolute; inset: 0; display: grid; place-items: center; background: #000; }
.story-palco img, .story-palco video { width: 100%; height: 100%; object-fit: contain; }
.story-sombra { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 18%, transparent 72%, rgba(0,0,0,.55)); transition: opacity .2s; }
.story-barras { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; display: flex; gap: 4px; z-index: 3; transition: opacity .2s; }
.story-barra { flex: 1; height: 2.5px; border-radius: 3px; background: rgba(255,255,255,.32); overflow: hidden; }
.story-barra i { display: block; height: 100%; width: 0; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.6); }
.story-topo { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 10px; right: 2px; display: flex; align-items: center; gap: 0; z-index: 3; color: #fff; transition: opacity .2s; }
.story-quem { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.story-quem .avatar { width: 36px; height: 36px; font-size: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.story-nome { display: flex; align-items: center; gap: 7px; min-width: 0; }
.story-quem strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-chip { flex: none; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-shadow: none; }
.story-quem small { flex: none; font-size: 13px; font-weight: 650; opacity: .8; }
.story-btn { width: 40px; height: 40px; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); font-size: 18px; }
.story-btn[hidden] { display: none; }
.story-toque { position: absolute; top: 76px; bottom: 120px; width: 35%; border: 0; background: transparent; z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.story-toque.esq { left: 0; } .story-toque.dir { right: 0; width: 65%; }
.story-legenda { position: absolute; left: 16px; right: 16px; bottom: calc(128px - var(--reserva)); z-index: 2; text-align: center; color: #fff; font-size: 18px; font-weight: 750; line-height: 1.35; text-shadow: 0 2px 10px rgba(0,0,0,.85); transition: opacity .2s; pointer-events: none; }
.story-legenda[hidden] { display: none; }
.story-rodape { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 10px; z-index: 3; transition: opacity .2s; }
.story-caixa.limpo .story-topo, .story-caixa.limpo .story-barras, .story-caixa.limpo .story-rodape, .story-caixa.limpo .story-legenda, .story-caixa.limpo .story-sombra { opacity: 0; }
.story-vistos { display: inline-flex; align-items: center; gap: 8px; border: 0; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.story-vistos .rostos { display: inline-flex; }
.story-vistos .rostos:empty { display: none; }
.story-vistos .rostos .avatar { width: 22px; height: 22px; font-size: 9px; margin-left: -6px; box-shadow: 0 0 0 2px rgba(0,0,0,.6); }
.story-vistos .rostos .avatar:first-child { margin-left: 0; }
.story-responder { display: flex; align-items: center; gap: 8px; width: 100%; }
.story-responder input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.6); background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: inherit; font-size: 15px; outline: none; }
.story-responder input::placeholder { color: rgba(255,255,255,.85); }
.story-responder input:focus { border-color: #fff; background: rgba(0,0,0,.45); }
.story-env, .story-raio { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); transition: transform .12s; }
.story-env:active, .story-raio:active { transform: scale(.85); }
.story-env { display: none; }
.story-caixa.digitando .story-env { display: grid; background: linear-gradient(135deg, #ffd60a, #ff8a00); color: #1a1205; filter: none; }
.story-caixa.digitando .story-raio { display: none; }
.story-bandeja { display: flex; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; transition: opacity .2s, transform .2s; }
.story-caixa.digitando .story-bandeja { opacity: 1; transform: none; pointer-events: auto; }
.story-bandeja button { width: 44px; height: 44px; border: 0; background: none; font-size: 27px; line-height: 1; cursor: pointer; border-radius: 50%; transition: transform .15s; }
.story-bandeja button:hover, .story-bandeja button:active { transform: scale(1.25); }
.story-caixa.digitando .story-toque { pointer-events: none; }
.story-voa { position: absolute; z-index: 6; font-size: 34px; pointer-events: none; animation: emojiVoa 1.5s cubic-bezier(.2,.7,.3,1) forwards; opacity: 0; }
@keyframes emojiVoa { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -40px) scale(1.2); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -320px) scale(1); } }
.story-caixa.pausado:not(.limpo):not(.digitando) .story-previa { display: grid; place-items: center; background: #000; border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.story-previa img { max-height: 46vh; width: auto; max-width: 100%; }

/* criador: cartão 9:16 de bordas arredondadas; embaixo, Foto|Texto e Compartilhar */
.flash-criar { position: fixed; inset: 0; z-index: 4900; background: #000; overflow: clip; animation: flashAbre .22s cubic-bezier(.2,.9,.3,1); }
/* Teclado aberto: o cartão fica do tamanho de antes (stories.js medirCartao) e o que se escreve sobe para a parte que
   continua à vista; --tecl = quanto do cartão o teclado cobre. */
.flash-criar { --tecl: 0px; }
.flash-criar { touch-action: pan-x pan-y; } /* sem pinça de zoom da página (a pinça das figurinhas é do site) */
.flash-criar.teclado .flash-figs, .flash-criar.teclado .flash-edtxt { bottom: var(--tecl); }
.flash-criar.teclado .flash-palco.modo-texto { padding-bottom: var(--tecl); }
.flash-criar.teclado .flash-legenda { bottom: calc(var(--tecl) + 10px); }
.flash-criar.teclado .flash-cam-ui, .flash-criar.teclado .flash-palco > .flash-filtros { display: none; }
@media (min-width: 700px) { .flash-criar { background: radial-gradient(circle at 50% 30%, #1d2730, #000 70%); } }
.flash-caixa { height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(4px + env(safe-area-inset-top)) 4px 0; box-sizing: border-box; }
/* moldura: anel fino com o degradê do Flash e um brilho leve, em volta do cartão quase do tamanho da tela */
.flash-moldura { flex: none; padding: 2px; border-radius: 24px; background: linear-gradient(140deg, #ffd60a, #ff8a00 35%, #ff3d7f 65%, #00adee); box-shadow: 0 0 28px -6px rgba(255,138,0,.45), 0 0 40px -10px rgba(0,173,238,.35); }
.flash-palco { position: relative; box-sizing: border-box; flex: none; height: min(calc((100vw - 12px) * 16 / 9), calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; overflow: clip; /* clip: não rola para o lado quando um texto passa da borda (cortava os painéis) */ background: #14191e; transition: background .35s; display: grid; place-items: center; isolation: isolate; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
@media (min-width: 700px) { .flash-palco { height: min(calc(100dvh - 120px), 860px); } }
.flash-midia { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.flash-fotobox { position: absolute; pointer-events: none; }
.flash-midia .flash-foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* câmera do app */
.flash-cambox { position: absolute; inset: 0; }
.flash-cambox.espelho { transform: scaleX(-1); }
.flash-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.flash-cambox .flash-cam.tela { display: none; }
.flash-cambox.filtrada .flash-cam.tela { display: block; }
.flash-cambox.filtrada video.flash-cam { visibility: hidden; }
.flash-palco.processando::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 8; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: girar .7s linear infinite; }
.flash-palco.clique::after { content: ""; position: absolute; inset: 0; z-index: 9; background: #fff; animation: cliqueFoto .26s ease-out forwards; pointer-events: none; }
@keyframes cliqueFoto { from { opacity: .9; } to { opacity: 0; } }
.flash-cam-ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; gap: 14px; padding: 0 0 18px; background: linear-gradient(to top, rgba(0,0,0,.45), transparent); }
.flash-cam-linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; padding: 0 18px; }
.flash-cam-gal { width: 46px; height: 46px; border-radius: 14px; border: 2px solid rgba(255,255,255,.9); background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; cursor: pointer; }
.flash-cam-linha .flash-cam-gal:first-child { justify-self: start; }
.flash-cam-linha .flash-cam-gal:last-child { justify-self: end; border-radius: 50%; }
.flash-disparo { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: transparent; padding: 5px; cursor: pointer; transition: transform .12s; }
.flash-disparo span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .15s; }
.flash-disparo:active span { transform: scale(.86); }
.flash-disparo:disabled { opacity: .6; }
.flash-contagem { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; font-size: 120px; font-weight: 900; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none; }
.flash-contagem.on { opacity: 1; animation: contaPulso 1s ease-out infinite; }
@keyframes contaPulso { from { transform: scale(1.3); opacity: 0; } 30% { opacity: 1; transform: scale(1); } }
.flash-ferr-btn.on { background: #fff; color: #111; }
.flash-ferr-btn.tempo { font-size: 13px; }
/* filtros */
.flash-filtros { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px; scrollbar-width: none; scroll-snap-type: x proximity; }
.flash-filtros::-webkit-scrollbar { display: none; }
.flash-palco > .flash-filtros { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 5; }
.flash-filtro { flex: none; display: grid; justify-items: center; gap: 4px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; scroll-snap-align: center; padding: 0; }
.flash-filtro .amostra { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,.5); background: linear-gradient(135deg, #f6c7a8 0%, #d98b6a 35%, #7fb0d9 70%, #2d6a4f 100%) center / cover; box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: transform .15s, border-color .15s; }
.flash-filtro .amostra canvas { width: 100%; height: 100%; display: block; }
.flash-filtro small { font-size: 11px; font-weight: 750; text-shadow: 0 1px 4px rgba(0,0,0,.7); white-space: nowrap; }
.flash-filtro.on .amostra { border: 3px solid #fff; transform: scale(1.1); }
.flash-nome-filtro { position: absolute; left: 50%; top: 42%; z-index: 7; transform: translate(-50%, -50%); color: #fff; font-size: 26px; font-weight: 850; text-shadow: 0 2px 14px rgba(0,0,0,.6); pointer-events: none; animation: nomeFiltro .9s ease-out forwards; }
@keyframes nomeFiltro { 0% { opacity: 0; transform: translate(-50%, -40%); } 20%, 70% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; } }
.flash-palco.com-camera .flash-legenda { display: none; }
.flash-midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* guias: faixas de segurança (nome em cima, resposta embaixo) e linhas do meio que encaixam */
.flash-guias { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fx-faixa { position: absolute; left: 0; right: 0; opacity: 0; transition: opacity .2s; }
.fx-faixa.cima { top: 0; height: 12%; background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent); border-bottom: 1px dashed rgba(255,255,255,.45); }
.fx-faixa.baixo { bottom: 0; height: 16%; background: linear-gradient(to top, rgba(0,0,0,.5), transparent); border-top: 1px dashed rgba(255,255,255,.45); }
.flash-palco.movendo .fx-faixa, .flash-palco.arrastando-txt .fx-faixa { opacity: 1; }
.fx-guia { position: absolute; background: #ff3d7f; opacity: 0; transition: opacity .12s; box-shadow: 0 0 6px rgba(255,61,127,.7); }
.fx-guia.v { top: 0; bottom: 0; left: 50%; width: 1px; }
.fx-guia.h { left: 0; right: 0; top: 50%; height: 1px; }
.fx-guia.on { opacity: 1; }
.flash-camada { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.flash-camada[hidden] { display: none; }
.flash-txt { position: absolute; transform: translate(-50%, -50%); width: max-content; max-width: 88%; padding: .12em .35em; border-radius: .25em; line-height: 1.22; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.flash-txt.destaque { text-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.flash-txt.neon { text-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 22px rgba(255,255,255,.6); }
.flash-palco.arrastando-txt .flash-txt { cursor: grabbing; }
/* Figurinhas como no Instagram: área de toque maior que o desenho (fácil de pegar), a que está no dedo vem para a frente
   com uma leve elevação e encolhe por cima da lixeira (`scale` soma com o transform de posição/giro). */
.flash-txt::after { content: ""; position: absolute; inset: -14px; border-radius: 18px; }
.flash-txt.flash-ft::after { inset: -6px; }
.flash-txt { will-change: left, top, transform; transition: scale .14s ease, opacity .14s ease, filter .14s ease; }
.flash-txt.segurando { z-index: 2; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.flash-txt.no-lixo { scale: .42; opacity: .65; }
.flash-txt.flash-orig { pointer-events: none; }
.flash-txt.flash-orig::after { content: none; }
.flash-palco.arrastando-txt .flash-txt:not(.segurando) { pointer-events: none; }
.flash-lixo { position: absolute; left: 50%; bottom: 22px; z-index: 5; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.8); opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s, background .15s; pointer-events: none; }
.flash-palco.arrastando-txt .flash-lixo { opacity: 1; transform: none; }
.flash-lixo.sobre { background: #e5484d; transform: scale(1.15) !important; }
.flash-topo { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; color: #fff; pointer-events: none; }
.flash-topo > * { pointer-events: auto; }
.flash-palco.movendo .flash-topo, .flash-palco.arrastando-txt .flash-topo, .flash-palco.movendo .flash-legenda, .flash-palco.arrastando-txt .flash-legenda { opacity: 0; transition: opacity .15s; }
.flash-ferr { display: flex; flex-direction: column; gap: 10px; }
.flash-ferr-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 15px; font-weight: 800; transition: transform .12s, background .15s; }
.flash-ferr-btn:active { transform: scale(.9); }
.flash-ferr-btn.cor { border: 2.5px solid #fff; }
.flash-ferr-btn.destaque b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; font-size: 13px; }
.flash-ferr-btn.destaque.on b { background: #fff; color: #111; }
.flash-texto { position: relative; z-index: 1; width: calc(100% - 48px); max-height: 60%; border: 0; background: transparent; resize: none; text-align: center; color: #fff; font-size: 34px; line-height: 1.25; outline: none; caret-color: currentColor; overflow: hidden; field-sizing: content; }
.flash-texto::placeholder { color: currentColor; opacity: .6; }
.flash-texto.neon { text-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 22px rgba(255,255,255,.6); }
.flash-escolher { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; padding: 24px; color: #fff; text-align: center; }
.flash-escolher .ic { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffd60a, #ff8a00 55%, #ff3d7f); color: #1a1205; box-shadow: 0 10px 30px -8px rgba(255,138,0,.7); margin-bottom: 6px; }
.flash-escolher .ic .i { width: 36px; height: 36px; }
.flash-escolher strong { font-size: 17px; }
.flash-escolher small { font-size: 13px; color: rgba(255,255,255,.65); max-width: 240px; }
.flash-esc-btns { display: flex; gap: 10px; margin-top: 14px; }
.flash-esc-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.flash-esc-btn.pri { background: #fff; color: #0b1014; border-color: #fff; }
.flash-esc-btn:active { transform: scale(.96); }
.flash-legenda { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4; height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: inherit; font-size: 15px; font-weight: 650; text-align: center; outline: none; box-sizing: border-box; }
.flash-legenda::placeholder { color: rgba(255,255,255,.8); }
/* escrever na foto */
.flash-edtxt { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: contEntra .15s ease-out; }
.fe-cab { display: flex; align-items: center; gap: 8px; padding: 10px; }
.fe-cab .esp { flex: 1; }
.fe-pronto { height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: #fff; color: #0b1014; font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; }
.fe-campo { align-self: center; justify-self: center; width: auto; min-width: 60%; max-width: 88%; max-height: 70%; border: 0; border-radius: .25em; padding: .12em .35em; background: transparent; color: #fff; text-align: center; resize: none; outline: none; line-height: 1.22; field-sizing: content; caret-color: currentColor; }
.fe-campo.neon { text-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 22px rgba(255,255,255,.6); }
.fe-campo::placeholder { color: currentColor; opacity: .6; }
/* régua do tamanho: em pé na lateral, em forma de cunha (fina embaixo, grossa em cima) */
.fe-regua { position: absolute; left: 6px; top: 50%; z-index: 1; width: 30px; height: 160px; transform: translateY(-50%); display: grid; place-items: center; }
.fe-regua::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%); background: rgba(255,255,255,.5); clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%); border-radius: 4px; pointer-events: none; }
.fe-tam { position: absolute; left: 50%; top: 50%; width: 160px; height: 30px; margin: 0; transform: translate(-50%, -50%) rotate(-90deg); -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.fe-tam::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.fe-tam::-moz-range-track { height: 30px; background: transparent; }
.fe-tam::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: 4px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.fe-tam::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
/* embaixo (logo acima do teclado): letras com o nome e as cores, cada uma numa fileira que desliza */
.fe-baixo { display: grid; gap: 10px; padding: 8px 0 12px; min-width: 0; }
.fe-letras { display: flex; gap: 8px; overflow-x: auto; padding: 2px 12px; scrollbar-width: none; scroll-snap-type: x proximity; }
.fe-letras::-webkit-scrollbar { display: none; }
.fe-letra { flex: none; height: 36px; padding: 0 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: #fff; cursor: pointer; scroll-snap-align: center; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.fe-letra.neon { text-shadow: 0 0 6px rgba(255,255,255,.85); }
.fe-letra.on { background: #fff; color: #0b1014; border-color: #fff; text-shadow: none; }
.fe-cores { display: flex; gap: 12px; overflow-x: auto; padding: 6px 18px; scrollbar-width: none; }
.fe-cores::-webkit-scrollbar { display: none; }
.fe-cores button { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #fff; cursor: pointer; padding: 0; transition: transform .12s; }
.fe-cores button.on { transform: scale(1.25); box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
/* embaixo do cartão */
.flash-baixo { width: 100%; max-width: 520px; display: grid; justify-items: center; gap: 6px; padding: 10px 6px calc(8px + env(safe-area-inset-bottom)); box-sizing: border-box; }
@media (max-height: 820px) { .flash-dica { display: none; } }
.flash-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.flash-modos { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.1); }
.flash-modos button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: rgba(255,255,255,.75); padding: 9px 14px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; white-space: pre; }
.flash-modos button[aria-selected="true"] { background: #fff; color: #0b1014; }
.flash-publicar { display: inline-flex; align-items: center; gap: 8px; justify-content: center; height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #ffd60a, #ff8a00); color: #1a1205; font: inherit; font-size: 15px; font-weight: 850; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(255,138,0,.85); transition: transform .12s, background .2s, color .2s; }
.flash-publicar:active { transform: scale(.96); }
.flash-publicar:disabled { background: rgba(255,255,255,.12); color: rgba(255,255,255,.45); cursor: default; box-shadow: none; }
.flash-publicar.enviando b { animation: raioPisca .7s ease-in-out infinite; }
@keyframes raioPisca { 50% { opacity: .2; } }
.flash-dica { color: rgba(255,255,255,.55); font-size: 11.5px; text-align: center; }
/* avisos no alto enquanto o flash está aberto (embaixo ficam o campo e os botões) */
body:has(.story-visor, .flash-criar) .toast { bottom: calc(92px + env(safe-area-inset-bottom)); top: auto; }
@media (prefers-reduced-motion: reduce) { .story-visor, .flash-criar, .story-caixa.vai-dir, .story-caixa.vai-esq { animation: none; } .story-voa { animation-duration: .01s; } }

/* ---------- publicação: marcados, hashtags, agendada, vídeo curto, extras do compositor ---------- */
/* Pessoas marcadas: fotinhas empilhadas (pessoasEmPilha em rede.js) */
.pilha-pessoas { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; text-align: left; }
.pilha-rostos { display: inline-flex; align-items: center; flex: none; }
.pilha-rostos .avatar, .pilha-mais { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--panel); font-size: 10px; box-sizing: content-box; }
.pilha-rostos > * + * { margin-left: -9px; }
.pilha-mais { display: grid; place-items: center; background: var(--hover); color: var(--text); font-weight: 800; font-size: 10.5px; }
.pilha-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilha-tx b { color: var(--text); font-weight: 800; }
.pilha-pessoas:hover .pilha-tx b { text-decoration: underline; }
.post-com { display: flex; padding: 0 14px 10px; }
.pilha-pessoas.escuro { color: rgba(255,255,255,.85); }
.pilha-pessoas.escuro .pilha-tx b { color: #fff; }
.pilha-pessoas.escuro .pilha-rostos .avatar, .pilha-pessoas.escuro .pilha-mais { border-color: rgba(0,0,0,.6); }
.pilha-pessoas.escuro .pilha-mais { background: rgba(255,255,255,.22); color: #fff; }
.hashtag { color: var(--accent); font-weight: 700; text-decoration: none; }
.hashtag:hover { text-decoration: underline; }
.filtro-escolha.com-tag { text-transform: none; }
.post-card .post-midia-f.video { position: relative; background: #000; }
.post-card .post-midia-f.video video { width: 100%; max-height: 80vh; display: block; cursor: pointer; }
.video-som, .video-reels { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer; }
.video-som .i, .video-reels .i { width: 19px; height: 19px; color: #fff; }
.video-reels { right: 54px; }
.casada-previa .casada { margin: 0; }
.pub-extras { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pub-extras[hidden] { display: none; }
.pub-extras .rot { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.chip-extra { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; }
.chip-extra.agenda { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.chip-extra button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--muted) 20%, transparent); color: inherit; cursor: pointer; line-height: 1; }
.pub-dica { margin: 8px 2px 0; font-size: 12px; color: var(--muted); }
.rascunho { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.rascunho .th { flex: none; width: 52px; height: 64px; border-radius: 10px; background: var(--panel-2) center / cover; display: grid; place-items: center; color: var(--muted); }
.rascunho .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rascunho .tx strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rascunho .tx small { color: var(--muted); font-size: 12px; }
.tile.agendada img { opacity: .55; }
.selo-agendada { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 800; }
.post-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.post-extras .post-com { padding: 0; width: 100%; }
.aviso-agendada { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); font-size: 13px; font-weight: 650; }
.linha-tag { display: flex; align-items: center; gap: 12px; padding: 10px 6px; color: var(--text); text-decoration: none; border-radius: 12px; }
.linha-tag:hover { background: var(--panel-2); }
.linha-tag .ic-tag { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 22px; font-weight: 800; }
.linha-tag small { margin-left: auto; color: var(--muted); font-size: 12.5px; }

/* ---------- estatísticas da publicação ---------- */
.estat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.estat-card { padding: 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 2px; }
.estat-card strong { font-size: 24px; font-weight: 800; line-height: 1.1; }
.estat-card span { font-size: 13px; font-weight: 750; }
.estat-card small { font-size: 11.5px; color: var(--muted); }
.estat-secao { padding: 12px 0 4px; border-top: 1px solid var(--line); margin-top: 8px; display: grid; gap: 6px; }
.estat-secao h3 { margin: 0 0 4px; font-size: 15px; }
.est-barra .rot.largo { width: auto; min-width: 120px; color: var(--text); font-weight: 650; }
.estat-secao .est-barra { grid-template-columns: minmax(110px, 38%) 1fr auto 38px; }

/* ---------- Explorar: busca no topo, atalhos, em alta, destaques e sugestões ---------- */
.busca-explorar { margin: 0 0 14px; }
#exploraConteudo[hidden] { display: none; }
.atalhos-classes.compactos { margin-bottom: 18px; }
.atalhos-classes.compactos .atalho-classe { min-height: 96px; }
.exp-sec { margin: 0 0 22px; }
.exp-sec[hidden] { display: none; }
.exp-tit { display: grid; gap: 2px; margin: 0 2px 10px; }
.exp-tit .titulo-sec { margin: 0; }
.exp-tit small { color: var(--muted); font-size: 12.5px; }
.exp-tags { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.exp-tags::-webkit-scrollbar { display: none; }
.exp-tag { flex: none; display: grid; gap: 1px; padding: 9px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; scroll-snap-align: start; transition: border-color .15s, transform .12s; }
.exp-tag:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.exp-tag:active { transform: scale(.97); }
.exp-tag b { font-size: 14px; color: var(--accent); }
.exp-tag small { font-size: 11.5px; color: var(--muted); font-weight: 650; }
.exp-tag.quente { background: linear-gradient(135deg, color-mix(in srgb, #ff8a00 14%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, #ff8a00 35%, var(--line)); }
.exp-tag.quente b::after { content: " 🔥"; }
.exp-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 16px; overflow: hidden; }
.exp-tile { position: relative; aspect-ratio: 1; background: var(--panel-2); overflow: hidden; display: block; }
.exp-tile.grande { grid-column: span 2; grid-row: span 2; }
.exp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.exp-tile:hover img { transform: scale(1.04); }
.exp-tile .marca { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.exp-nota { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #ffd23f; font-size: 11px; font-weight: 800; }
.exp-quem { position: absolute; right: 8px; bottom: 7px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 12.5px; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.exp-sug { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.exp-sug::-webkit-scrollbar { display: none; }
.exp-pessoa { flex: none; width: 146px; display: grid; justify-items: center; gap: 3px; padding: 16px 10px 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); text-align: center; scroll-snap-align: start; }
.exp-pessoa .avatar { width: 68px; height: 68px; font-size: 22px; margin-bottom: 6px; cursor: pointer; }
.exp-pessoa strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; cursor: pointer; }
.exp-pessoa small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.exp-pessoa .btn { width: 100%; justify-content: center; }
/* Explorar (etapa 4): buscas recentes, abas da busca, enquetes abertas, negócios, motivo das sugestões e filtros */
.busca-explorar { position: relative; }
.busca-recentes { margin: -6px 0 14px; padding: 6px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.12); animation: contEntra .15s ease-out; }
.busca-recentes[hidden] { display: none; }
.br-cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; }
.br-cab strong { font-size: 14px; }
.br-limpar, .res-ver { border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.br-item { display: flex; align-items: center; border-radius: 12px; }
.br-item:hover { background: var(--panel-2); }
.br-usar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.br-usar > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); font-weight: 800; font-size: 16px; }
.br-tirar { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 50%; cursor: pointer; }
.br-tirar:hover { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--text); }
.abas-busca { padding: 0 2px 10px; }
.abas-busca[hidden] { display: none; }
.res-sec + .res-sec { border-top: 1px solid var(--line); }
.res-sec .grupo-titulo { display: flex; align-items: center; justify-content: space-between; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text); }
.res-sec .linha-tag { margin: 0 8px; }
.res-grade { margin: 4px 8px 10px; border-radius: 12px; }
.linha-neg { color: var(--text); text-decoration: none; }
.linha-neg:hover { background: var(--panel-2); }
.linha-neg .avatar.neg { border-radius: 14px; box-shadow: 0 0 0 2px var(--c); }
.neg-nota { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: var(--text); }
.neg-nota .i { color: #ffb400; fill: currentColor; }
.exp-trilho { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.exp-trilho::-webkit-scrollbar { display: none; }
.exp-enq { flex: none; width: 236px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel) 65%); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); color: var(--text); text-decoration: none; scroll-snap-align: start; transition: transform .12s, border-color .15s; }
.exp-enq:active { transform: scale(.98); }
.enq-topo { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--accent); }
.enq-prazo { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; }
.enq-prazo.acabando { color: #e5484d; }
.enq-perg { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.enq-ops { display: grid; gap: 5px; align-content: start; }
.enq-ops span { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enq-quem { display: flex; align-items: center; gap: 7px; min-width: 0; }
.enq-quem .avatar { width: 24px; height: 24px; font-size: 10px; }
.enq-quem small { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enq-votar { padding: 5px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; }
.exp-neg { flex: none; width: 196px; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; scroll-snap-align: start; transition: transform .15s, border-color .15s; }
.exp-neg:hover { border-color: color-mix(in srgb, var(--c) 50%, var(--line)); }
.exp-neg:active { transform: scale(.98); }
.exp-neg .capa { position: relative; aspect-ratio: 4 / 3; background: var(--panel-2); }
.exp-neg .capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-neg .tag { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: var(--c); color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.exp-neg .novo { position: absolute; right: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: #fff; color: #111; font-size: 11px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.exp-neg .tx { display: grid; gap: 2px; padding: 10px 12px 12px; }
.exp-neg strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-neg small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-neg .nota { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; font-weight: 750; color: var(--muted); }
.exp-neg .nota .i { color: #ffb400; fill: currentColor; }
.exp-pessoa { position: relative; transition: opacity .2s, transform .2s; }
.exp-pessoa.saindo { opacity: 0; transform: scale(.9); }
.sug-tirar { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.sug-tirar:hover { background: var(--panel-2); color: var(--text); }
.exp-pessoa small { margin-bottom: 0; }
.sug-motivo { max-width: 100%; margin: 2px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.sug-motivo.forte { color: var(--accent); font-weight: 750; }
.exp-tag.subindo small { color: #12a150; }
.exp-tag.subindo small::before { content: "↑ "; font-weight: 800; }
.exp-filtros { padding-top: 0; }
.exp-grade { grid-auto-flow: dense; }
.exp-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.exp-tile.texto { --t1: #0f2a38; --t2: #103e55; display: flex; flex-direction: column; justify-content: center; padding: 10px; color: #f3f7f9; text-decoration: none; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--t2) 85%, #fff 15%), var(--t1) 70%); }
.exp-tile.texto[data-tom="1"] { --t1: #1b1830; --t2: #3a2f6b; }
.exp-tile.texto[data-tom="2"] { --t1: #102a24; --t2: #17594a; }
.exp-tile.texto[data-tom="3"] { --t1: #2c1a14; --t2: #6b3a24; }
.exp-tile.texto[data-tom="4"] { --t1: #171c22; --t2: #2e3a46; }
.exp-tile.texto p { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.exp-tile.texto.grande p { font-size: 17px; -webkit-line-clamp: 7; }
.exp-tile.texto p::before { content: "“"; display: block; font-size: 1.9em; line-height: .7; opacity: .5; }
.exp-autor { margin-top: 6px; font-size: 11px; font-weight: 700; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-tile.texto .exp-nota { left: auto; right: 6px; }
.exp-mais { margin-top: 12px; }
/* tela da publicação do Explorar (como no Instagram): a tocada em cima e as parecidas embaixo, sem fim */
.visor-exp.sobre-flash { z-index: 4950; }
.visor-exp { position: fixed; inset: 0; z-index: 4000; display: grid; grid-template-rows: auto 1fr; background: var(--bg); animation: veEntra .2s cubic-bezier(.2,.8,.2,1); }
.visor-exp.saindo { animation: veSai .18s ease-in forwards; }
@keyframes veEntra { from { opacity: 0; transform: translateX(28px); } }
@keyframes veSai { to { opacity: 0; transform: translateX(28px); } }
.ve-topo { display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ve-tit { display: grid; min-width: 0; }
.ve-tit strong { font-size: 17px; }
.ve-tit small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-rolagem { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ve-lista { width: min(620px, 100%); margin: 0 auto; padding: 12px 12px 0; }
.ve-fim { display: grid; justify-items: center; gap: 10px; padding: 8px 16px calc(28px + env(safe-area-inset-bottom)); }
.ve-acabou { margin: 6px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .visor-exp, .visor-exp.saindo { animation: none; } }
/* quem reagiu a um comentário: o emoji de cada pessoa no canto da foto */
.reagiu-emoji { position: relative; z-index: 1; flex: none; width: 22px; height: 22px; margin: 22px 0 0 -24px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); font-size: 13px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
/* ícone de raio (Flash) */
.story-circ .raio { color: #ffc61a; }
.story-circ .raio .i { width: 13px; height: 13px; }
.story-chip { display: inline-flex; align-items: center; gap: 3px; }
.story-chip .i { width: 11px; height: 11px; color: #ffc61a; }
.flash-publicar b { display: inline-grid; place-items: center; }
.flash-publicar b .i { width: 18px; height: 18px; }
.flash-ferr-btn .i { width: 21px; height: 21px; }
.flash-ferr-btn.on .i { color: #f5a400; }
/* figurinhas do Flash: horário, data e localização */
.flash-fig { display: inline-block; padding: .22em .45em; border-radius: .32em; line-height: 1.1; white-space: nowrap; text-shadow: none; letter-spacing: .01em; }
.flash-txt.flash-fig { max-width: none; }
.flash-fig.fig-hora { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.flash-figs { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: contEntra .15s ease-out; }
.figs-tit { color: #fff; font-size: 16px; padding-left: 6px; }
.figs-grade { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12px 10px; padding: 18px; }
.fig-op { display: grid; justify-items: center; gap: 8px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; padding: 6px; border-radius: 14px; }
.fig-op:active { transform: scale(.96); }
.fig-op small { font-size: 12px; font-weight: 750; color: rgba(255,255,255,.75); }
.fig-pilula { --fc: #00adee; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 14px; background: #fff; color: #111; font-size: 14px; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.fig-pilula .i { color: var(--fc); width: 19px; height: 19px; }
.fig-pilula small { color: #5d6b75; font-size: 11.5px; letter-spacing: 0; text-transform: none; }
.amostra-fig { background: #fff; color: #111; font-size: 18px; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.amostra-fig.fig-hora { font-size: 30px; }
.fe-linha-local { display: flex; gap: 8px; width: 100%; max-width: 320px; box-sizing: border-box; }
.fe-local { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,.95); color: #111; font: inherit; font-size: 15px; font-weight: 650; outline: none; }
.figs-dica { margin: 0; padding: 0 16px 18px; text-align: center; color: rgba(255,255,255,.7); font-size: 12px; }

/* ---------- grade do perfil: filtros e cartões ---------- */
.filtros-grade { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.filtros-grade::-webkit-scrollbar { display: none; }
.filtros-grade.escondida { display: none; }
.filtros-grade button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.filtros-grade button b { font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 16%, transparent); color: inherit; }
.filtros-grade button[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.filtros-grade button[aria-selected="true"] b { background: color-mix(in srgb, var(--bg) 22%, transparent); }
.grade { gap: 4px; }
.tile { aspect-ratio: 4 / 5; }
/* cartão de texto: aspas, texto em destaque e quem escreveu */
.tile.texto { --t1: #0f2a38; --t2: #103e55; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 12px 10px; text-align: left; color: #f3f7f9; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--t2) 85%, #fff 15%), var(--t1) 70%); border: 1px solid rgba(255,255,255,.06); }
.tile.texto[data-tom="1"] { --t1: #1b1830; --t2: #3a2f6b; }
.tile.texto[data-tom="2"] { --t1: #102a24; --t2: #17594a; }
.tile.texto[data-tom="3"] { --t1: #2c1a14; --t2: #6b3a24; }
.tile.texto[data-tom="4"] { --t1: #171c22; --t2: #2e3a46; }
.tile.texto:nth-child(n) { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--t2) 85%, #fff 15%), var(--t1) 70%); }
.tile.texto .tt-aspas { font-family: Georgia, "Times New Roman", serif; font-size: 34px; line-height: .6; height: 16px; color: rgba(255,255,255,.35); }
.tile.texto p { margin: 0; flex: 0 1 auto; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; font-weight: 700; letter-spacing: -.005em; overflow-wrap: anywhere; }
.tile.texto.t-curto p { font-size: 17px; line-height: 1.25; -webkit-line-clamp: 5; }
.tile.texto.t-medio p { font-size: 13.5px; line-height: 1.35; -webkit-line-clamp: 6; }
.tile.texto.t-longo p { font-size: 12px; line-height: 1.4; font-weight: 600; -webkit-line-clamp: 7; }
.tile.texto .tt-rodape { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.62); }
.tile.texto .tt-rodape .avatar { width: 18px; height: 18px; font-size: 8px; flex: none; }
@media (max-width: 420px) { .tile.texto { padding: 9px 9px 8px; } .tile.texto.t-curto p { font-size: 14.5px; } .tile.texto.t-medio p { font-size: 12px; -webkit-line-clamp: 5; } .tile.texto.t-longo p { font-size: 11px; -webkit-line-clamp: 6; } .tile.texto .tt-aspas { font-size: 26px; height: 12px; } }
/* vídeo e marcação */
.tile .selo-video { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.5); color: #fff; }
.tile .selo-video .i { width: 12px; height: 12px; }
.tile .selo-marcado { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; }
.tile .selo-marcado .avatar { width: 20px; height: 20px; font-size: 8px; }
.tile .selo-marcado .i { width: 12px; height: 12px; }
.tile.marcacao.texto .tt-rodape { padding-left: 46px; }
.tile.marcacao.texto .tt-rodape .avatar { display: none; }
/* toque duplo no texto: sem selecionar palavras sem querer */
.post-card .post-texto.so-texto { -webkit-user-select: none; user-select: none; cursor: default; }

/* ---------- estatísticas da publicação ---------- */
.estat-cab { display: flex; align-items: center; gap: 12px; padding: 2px 0 14px; }
.estat-mini { flex: none; width: 56px; height: 70px; border-radius: 10px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; color: var(--muted); }
.estat-mini img { width: 100%; height: 100%; object-fit: cover; }
.estat-mini.texto { padding: 6px; font-size: 9.5px; font-weight: 750; line-height: 1.2; color: #eaf3f7; background: radial-gradient(120% 90% at 0% 0%, #1d5470, #0f2a38 70%); text-align: left; overflow: hidden; }
.estat-info { display: grid; gap: 3px; min-width: 0; }
.estat-info strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estat-info small { color: var(--muted); font-size: 12.5px; }
.estat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.estat-cards .estat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.estat-card { gap: 4px; padding: 12px 14px; }
.estat-card .rot { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 750; }
.estat-card .rot .i { width: 15px; height: 15px; }
.estat-card strong { font-size: 26px; letter-spacing: -.02em; }
.estat-card small.cmp { font-weight: 750; color: var(--muted); }
.estat-card small.cmp.sobe { color: #2fbf71; }
.estat-card small.cmp.desce { color: #e5484d; }
.estat-dicas { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); display: grid; gap: 8px; }
.estat-dicas h3 { margin: 0; font-size: 14px; }
.estat-dicas p { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.estat-dicas p .i { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--accent); }
.estat-graf-cab { display: grid; gap: 1px; }
.estat-graf-cab small { color: var(--muted); font-size: 12px; }
.estat-graf { position: relative; height: 130px; margin-top: 6px; }
.estat-graf svg { width: 100%; height: 100%; display: block; overflow: visible; touch-action: pan-y; }
.estat-graf .area { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.estat-graf .linha { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.estat-graf .eixo { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.estat-graf .guia { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.estat-graf .mira { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.estat-graf .ponto { fill: var(--accent); stroke: var(--panel); stroke-width: 2; vector-effect: non-scaling-stroke; }
.estat-graf-max { position: absolute; left: 4px; top: 0; font-size: 11px; color: var(--muted); font-weight: 700; }
.estat-graf-dica { position: absolute; top: -6px; transform: translateX(-50%); padding: 4px 9px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none; }
.estat-graf-eixo { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 650; padding: 2px 4px 0; }
.estat-horas { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 90px; margin-top: 6px; }
.estat-horas .col { height: 100%; display: flex; align-items: flex-end; }
.estat-horas .col i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.estat-horas .col.top i { background: var(--accent); }

/* ---------- estrelas em ícone (SVG), sem caractere ---------- */
.estrela { display: inline-grid; place-items: center; font-size: 0; padding: 3px 2px; touch-action: none; }
.estrela .i { width: 26px; height: 26px; transition: transform .15s cubic-bezier(.2,1.6,.4,1), color .12s, filter .15s; }
.estrela.on .i { color: #f5b301; }
.estrela.minha .i { filter: drop-shadow(0 0 6px rgba(245,179,1,.35)); }
.estrela:hover { transform: none; }
.estrela:active .i { transform: scale(1.18); }
.estrelas-linha { touch-action: none; -webkit-user-select: none; user-select: none; }
.estrelas-linha[role="img"] .estrela .i { width: 20px; height: 20px; }
.interacoes .estrela .i { width: 25px; height: 25px; }
@media (max-width: 370px) { .interacoes .estrela .i { width: 22px; height: 22px; } }
.estrelas-txt .est-m { display: inline-grid; margin-left: -1px; }
.estrelas-txt .est-m .i { width: 13px; height: 13px; color: #f5b301; opacity: 1; }
.est-linha-mini, .fila { display: inline-flex; gap: 1px; vertical-align: -2px; margin-right: 6px; }
.est-linha-mini .i, .fila .i { width: 13px; height: 13px; color: color-mix(in srgb, var(--muted) 40%, transparent); }
.est-linha-mini .i.on, .est-cheio .fila .i { color: #f5b301; }
.est-cinco { font-size: 0; letter-spacing: 0; }
.est-cinco .fila { margin: 0; gap: 2px; }
.est-cinco .fila .i { width: 17px; height: 17px; }
.est-barra .rot { display: inline-flex; align-items: center; gap: 3px; }
.est-barra .rot .i { width: 12px; height: 12px; color: #f5b301; }
.est-chips button { display: inline-flex; align-items: center; gap: 3px; }
.est-chips button .i { width: 12px; height: 12px; color: #f5b301; }
.est-sua-btns .estrela .i { width: 24px; height: 24px; }
.exp-nota { display: inline-flex; align-items: center; gap: 3px; }
.exp-nota .i { width: 11px; height: 11px; }
/* toque duplo: as 5 estrelas surgem de uma vez (rápido) */
.contagem.rapida { background: none; cursor: default; pointer-events: none; }
.contagem.rapida .est-voa { animation-duration: 1.1s; }
.post-texto { position: relative; }

/* =====================================================
   Perfil (cabeçalho novo): capa alta com a foto, nome, @, cidade e bio por cima;
   ações numa linha; negócios em bolinhas coloridas; números; abas sublinhadas.
   ===================================================== */
.pf2 { border-radius: 24px; }
.pf2 .pf-hero { position: relative; }
.pf2 .pf-capa { aspect-ratio: auto; height: clamp(230px, 46vw, 320px); }
.pf2 .pf-capa::after { background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 28%, rgba(4,8,11,.55) 62%, rgba(4,8,11,.92) 100%); }
.pf2 .pf-topo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; gap: 16px; padding: 0 18px 16px; pointer-events: none; }
.pf2 .pf-topo > * { pointer-events: auto; }
.pf2 .pf-avatar-wrap { flex: none; margin-bottom: -2px; }
.pf2 .pf-anel { width: 112px; height: 112px; padding: 3.5px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.pf2 .pf-anel .avatar { border: 3.5px solid #0b1014; font-size: 32px; }
.pf2 .pf-editar-foto { right: 0; bottom: 4px; width: 32px; height: 32px; border-color: #0b1014; }
.pf2 .pf-ident { min-width: 0; flex: 1; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.55); padding-bottom: 4px; }
.pf2 .pf-nome-linha { margin: 0; }
.pf2 .pf-nome { font-size: clamp(21px, 5.6vw, 27px); color: #fff; letter-spacing: -.02em; }
.pf2 .selo { color: #1ec0ff; text-shadow: none; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
.pf2 .pf-handle { color: rgba(255,255,255,.82); font-size: 13.5px; margin-top: 2px; }
.pf2 .pf-bio { margin: 8px 0 0; color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pf2 .pf-bio.vazia { color: rgba(255,255,255,.7); }
.pf2 .pf-bio.aberta { -webkit-line-clamp: unset; display: block; }
.pf2 .pf-editar-capa { top: 14px; right: 14px; }
.pf2 .duo-capa { left: auto; right: 22px; top: 62px; bottom: auto; }
@media (max-width: 640px) { .pf2 .duo-capa { right: 18px; top: 58px; left: auto; bottom: auto; } }
.pf2 .pf-corpo { padding: 16px 16px 18px; }
/* ações: a principal ocupa mais espaço; ícones quadrados no fim */
.pf2 .pf-acoes { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; padding: 0; justify-content: stretch; }
.pf2 .pf-acoes:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr auto auto; }
.pf2 .pf-acoes > .btn { justify-content: center; min-height: 46px; border-radius: 14px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.pf2 .pf-acoes > .btn.icone { width: 50px; padding: 0; }
.pf2 .pf-acoes > .btn.pri, .pf2 .pf-acoes > .btn.seguindo:first-child { box-shadow: 0 8px 22px -12px var(--accent); }
/* negócios: bolinhas com anel na cor do tipo e o nome do tipo embaixo */
.pf2 [data-el="negocios"] { margin-top: 18px; }
.pf2 [data-el="negocios"] .social-titulo { display: none; }
.pf2 [data-el="negocios"] .vinculos { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.pf2 [data-el="negocios"] .vinculos::-webkit-scrollbar { display: none; }
.pf2 [data-el="negocios"] .vinculo { width: 76px; flex: none; }
.pf2 [data-el="negocios"] .vinculo .avatar { width: 66px; height: 66px; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5.5px var(--cor, var(--accent)); margin: 4px auto 0; }
.pf2 [data-el="negocios"] .vinculo .nome { display: none; }
.pf2 [data-el="negocios"] .vinculo .papel { margin-top: 8px; max-width: 76px; color: var(--cor, var(--accent)); font-size: 13px; font-weight: 800; }
/* números */
.pf2 .pf-stats { margin-top: 16px; border-radius: 18px; background: color-mix(in srgb, var(--panel-2) 60%, transparent); grid-template-columns: repeat(4, 1fr); }
.pf2 .pf-stats:has(.pf-stat-mais:not([hidden])) { grid-template-columns: repeat(4, 1fr) 34px; }
.pf2 .pf-stat .num { font-size: 20px; }
.pf2 .pf-stat .rot { font-size: 12px; }
.pf2 .pf-stat-mais { display: grid; place-items: center; padding: 0; color: var(--muted); }
.pf2 .pf-stat-mais::before { display: none; }
/* abas sublinhadas */
.abas-perfil { display: flex; border-bottom: 1px solid var(--line); margin: 6px 0 12px; overflow-x: auto; scrollbar-width: none; }
.abas-perfil::-webkit-scrollbar { display: none; }
.abas-perfil button { flex: 1 0 auto; min-width: 64px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 10px 11px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; position: relative; white-space: nowrap; transition: color .15s; }
.abas-perfil button .i { width: 19px; height: 19px; }
.abas-perfil button::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); transform: scaleX(0); transition: transform .2s; }
.abas-perfil button[aria-selected="true"] { color: var(--accent); }
.abas-perfil button[aria-selected="true"]::after { transform: scaleX(1); }
@media (max-width: 420px) { .abas-perfil button span { display: none; } .abas-perfil button .i { width: 22px; height: 22px; } .abas-perfil button { padding: 13px 6px 12px; } }
.pp-conteudo .abas-perfil { margin-top: 14px; }
/* Textos (lista estilo Threads/X) */
.lista-textos { display: grid; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; }
.lista-textos[hidden] { display: none; }
.texto-item { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.texto-item:last-child { border-bottom: 0; }
.texto-item:hover { background: var(--hover); }
.texto-item > .avatar { width: 40px; height: 40px; font-size: 14px; }
.ti-corpo { min-width: 0; display: grid; gap: 4px; }
.ti-cab { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 14.5px; }
.ti-cab strong { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-cab .selo svg { width: 16px; height: 16px; }
.ti-meta { color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-texto { margin: 0; font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.ti-rodape { display: flex; align-items: center; gap: 18px; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.ti-num { display: inline-flex; align-items: center; gap: 5px; }
.ti-num .i { width: 16px; height: 16px; }
.ti-num:first-child .i { color: #f5b301; }
.lista-textos .vazio-grade { border: 0; }
.pf2 [data-el="negocios"] .vinculo.novo .nome { display: block; margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--accent); }
.pf2 [data-el="negocios"] .vinculo.novo .papel { margin-top: 0; color: var(--muted); font-weight: 650; font-size: 11.5px; }
.pf2 [data-el="negocios"] .vinculo.novo .avatar { box-shadow: none; }
/* 4 ações (perfil de outra pessoa): o 3º botão fica só com o ícone */
.pf2 .pf-acoes:has(> :nth-child(4)) { grid-template-columns: 1.15fr 1fr auto auto; }
.pf2 .pf-acoes:has(> :nth-child(4)) > .btn:nth-child(3) { font-size: 0; width: 50px; padding: 0; gap: 0; }
.pf2 .pf-acoes:has(> :nth-child(4)) > .btn:nth-child(3) .i { width: 20px; height: 20px; }

/* ---------- enquete ---------- */
.enquete { margin: 4px 12px 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); display: grid; gap: 8px; }
.post-extras .enquete { margin: 0; width: 100%; }
.enq-cab { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.enq-cab .i { width: 15px; height: 15px; }
.enq-perg { font-size: 16px; line-height: 1.35; }
.enq-opcoes { display: grid; gap: 8px; }
.enq-op { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; transition: border-color .15s, transform .1s; }
.enq-op:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.enq-op:active { transform: scale(.99); }
.enq-barra { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.enq-op.lider .enq-barra { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.enq-op.minha { border-color: var(--accent); }
.enq-rot, .enq-pct { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; }
.enq-rot .i { width: 16px; height: 16px; color: var(--accent); }
.enq-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.enq-rodape { color: var(--muted); font-size: 12.5px; font-weight: 650; }
.enquete.escura { background: rgba(255,255,255,.94); border: 0; color: #111; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.enquete.escura .enq-op { background: #f2f4f6; border-color: #e1e5e8; color: #111; }
.enquete.escura .enq-op.minha { border-color: var(--accent); }
.enquete.escura .enq-rodape { color: #5d6b75; }
/* enquete no compositor */
.pub-enquete { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.pub-enquete[hidden] { display: none; }
.pe-cab { display: flex; align-items: center; gap: 6px; color: var(--accent); }
.pe-cab strong { flex: 1; font-size: 13.5px; }
.pe-tirar { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pe-pergunta, .pe-opcao input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--text); font: inherit; font-size: 15px; }
.pe-pergunta { font-weight: 700; }
.pe-opcao { display: flex; gap: 6px; }
.pe-x { flex: none; width: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 18px; cursor: pointer; }
.pe-mais { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer; padding: 4px 0; }

/* ---------- Flash: enquete, menção e configurações ---------- */
.flash-esq { display: flex; align-items: center; gap: 8px; }
/* Amigos próximos (por flash): estrela apagada = todos; verde = só a sua lista */
.flash-ferr-btn.flash-amigos { color: rgba(255,255,255,.85); }
.flash-ferr-btn.flash-amigos.on { background: #2fbf71; color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.flash-ferr-btn.flash-amigos.on .i { color: #fff; }
/* botão de publicar: o nome numa linha só */
.flash-publicar span { white-space: nowrap; }
.flash-publicar.amigos { font-size: 14px; padding: 0 16px;  background: linear-gradient(135deg, #36d07f, #1f9d5b); color: #fff; box-shadow: 0 10px 30px -10px rgba(47,191,113,.85); }
.flash-txt.flash-enq { width: 74%; max-width: none; padding: 0; text-shadow: none; }
.fe-enq { display: grid; gap: .45em; padding: .9em; border-radius: .9em; background: rgba(255,255,255,.95); color: #111; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.fe-enq strong { font-size: 1.15em; line-height: 1.25; }
.fe-enq span { padding: .55em .8em; border-radius: .6em; background: #f1f3f5; font-weight: 750; }
.fig-enq, .fig-mencao { display: inline-flex; align-items: center; gap: 6px; font-size: 15px !important; letter-spacing: .04em; }
.fig-mencao.amostra-fig { background: linear-gradient(135deg, #ff8a00, #ff3d7f); color: #fff; }
.fig-enq.amostra-fig { color: var(--accent); }
.flash-fig.fig-mencao { font-weight: 800; }
.enq-ed { display: grid; gap: 10px; align-content: start; padding: 10px 16px; overflow-y: auto; }
.enq-ed-perg { height: 48px; padding: 0 14px; border-radius: 12px; border: 0; background: #fff; color: #111; font: inherit; font-size: 17px; font-weight: 800; }
.enq-ed-ops { display: grid; gap: 8px; }
.enq-ed-op { display: flex; gap: 6px; }
.enq-ed-op input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 0; background: rgba(255,255,255,.92); color: #111; font: inherit; font-size: 15px; font-weight: 700; }
.enq-ed-op button { width: 44px; border-radius: 12px; border: 0; background: rgba(255,255,255,.2); color: #fff; font-size: 20px; cursor: pointer; }
.enq-ed-mais { justify-self: start; border: 0; background: none; color: #fff; font: inherit; font-weight: 800; cursor: pointer; padding: 6px 2px; }
.mencao-corpo { display: grid; gap: 10px; align-content: start; padding: 6px 16px 16px; overflow-y: auto; min-height: 0; }
.mencao-lista { display: grid; gap: 4px; }
.mencao-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.mencao-item .avatar { width: 38px; height: 38px; font-size: 13px; }
.mencao-item .tx { display: grid; }
.mencao-item small { color: rgba(255,255,255,.7); }
/* visor */
/* enquete/perguntas: desenhadas em 300 px e escaladas (--k) para ocupar a mesma parte do quadro que no criador */
.story-enq { position: absolute; z-index: 4; width: 300px; transform: translate(-50%, -50%) scale(var(--k, 1)); transform-origin: center; }
.story-enq .enquete { margin: 0; }
.story-mencoes { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 12px; border-radius: 999px; border: 0; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer; }
.story-sem-resposta { margin: 0; padding: 10px 14px; border-radius: 999px; background: rgba(0,0,0,.4); color: rgba(255,255,255,.8); font-size: 13px; font-weight: 650; }
.story-responder[hidden], .story-bandeja[hidden] { display: none; }
/* configurações do Flash */
.cfgf-secao { padding: 12px 2px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.cfgf-secao h3 { margin: 0; font-size: 15px; }
.cfgf-secao p { margin: -4px 0 2px; color: var(--muted); font-size: 12.5px; }
.cfgf-secao .btn { justify-self: start; }
.cfgf-opcoes { display: grid; gap: 6px; }
.cfgf-op { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cfgf-op .tx { display: grid; }
.cfgf-op small { color: var(--muted); font-size: 12px; }
.cfgf-op .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.cfgf-op.on { border-color: var(--accent); }
.cfgf-op.on .radio { border: 6px solid var(--accent); }
.cfgf-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; }
.cfgf-switch input { width: 22px; height: 22px; accent-color: var(--accent); }

/* ===== Estatísticas do perfil (insights.js) ===== */
.pf-painel { width: 100%; margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.pf-painel > .i:first-child { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pf-painel .tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pf-painel .tx strong { font-size: 14px; }
.pf-painel .tx small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-painel > .i:last-child { color: var(--muted); }
.pf-painel:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ins-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ins-topo small { color: var(--muted); font-size: 12px; font-weight: 700; }
.ins-periodo { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.ins-periodo button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 750; padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.ins-periodo button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.ins-cards { margin-bottom: 10px; }
.ins-linha3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 6px; }
.ins-mini { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line); text-align: center; }
.ins-mini .i { color: var(--accent); }
.ins-mini strong { font-size: 18px; font-weight: 800; }
.ins-mini span { font-size: 12px; color: var(--muted); font-weight: 700; }
.ins-mini small { font-size: 11px; color: var(--muted); }
.ins-top { display: grid; grid-template-columns: 18px 46px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ins-top:last-child { border-bottom: 0; }
.ins-top .pos { font-weight: 800; color: var(--muted); font-size: 13px; text-align: center; }
.ins-th { width: 46px; height: 56px; border-radius: 8px; background: var(--panel-2) center / cover no-repeat; overflow: hidden; }
.ins-th.txt { padding: 5px; font-size: 8.5px; line-height: 1.2; font-weight: 750; color: #eaf3f7; background: radial-gradient(120% 90% at 0% 0%, #1d5470, #0f2a38 70%); }
.ins-top .tx { display: grid; gap: 2px; min-width: 0; }
.ins-top .tx strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-top .tx small { font-size: 11.5px; color: var(--muted); }
.ins-top .nums { display: grid; justify-items: end; min-width: 42px; }
.ins-top .nums b { font-size: 14px; }
.ins-top .nums small { font-size: 10.5px; color: var(--muted); }
.ins-dupla { height: 10px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); }
.ins-dupla i { display: block; height: 100%; background: var(--accent); border-radius: 99px 0 0 99px; }
.ins-leg { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 750; }
.ins-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ins-leg span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.ins-leg .nao::before { background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); }
.estat-secao h4 { margin: 10px 0 2px; font-size: 13px; color: var(--muted); font-weight: 750; }
@media (max-width: 420px) { .ins-top { grid-template-columns: 16px 40px minmax(0, 1fr) auto; } .ins-top .nums:last-child { display: none; } }

/* ===== Diário parte 8 ===== */
/* toque duplo no texto: as estrelas da barra acendem uma a uma (sem estrelas voando por cima) */
.estrelas-linha.pulo .estrela .i { animation: est-acende .55s cubic-bezier(.3, 1.7, .5, 1) both; }
.estrelas-linha.pulo .estrela:nth-child(2) .i { animation-delay: .06s; }
.estrelas-linha.pulo .estrela:nth-child(3) .i { animation-delay: .12s; }
.estrelas-linha.pulo .estrela:nth-child(4) .i { animation-delay: .18s; }
.estrelas-linha.pulo .estrela:nth-child(5) .i { animation-delay: .24s; }
@keyframes est-acende { 0% { transform: scale(1); } 45% { transform: scale(1.45) rotate(-8deg); color: #ffc21a; filter: drop-shadow(0 0 6px rgba(255, 194, 26, .7)); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .estrelas-linha.pulo .estrela .i { animation: none; } }
/* enquete: voto único */
.enquete.votou .enq-op { cursor: default; }
.enquete.votou .enq-op:not(.minha):hover { border-color: var(--line); }
.enquete.votou .enq-op:active { transform: none; }
.texto-item .enquete { margin: 6px 0 2px; cursor: default; }

/* ---------- perfil no modelo enviado (cabeçalho limpo, sem cartão no tema escuro) ---------- */
.pf2 { --pf-fundo: var(--panel); }
#meuPerfil > .pf2 { --pf-fundo: var(--bg); }
:root[data-theme="dark"] .pf2 { background: transparent; border: 0; border-radius: 0; overflow: visible; }
:root[data-theme="dark"] #meuPerfil > .pf2 { margin: -16px -16px 0; }
:root[data-theme="dark"] .pf2 .pf-capa { border-radius: 0; }
:root[data-theme="dark"] .pf2 .pf-capa::after { background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 24%, transparent 40%, color-mix(in srgb, var(--pf-fundo) 62%, transparent) 68%, var(--pf-fundo) 100%); }
@media (min-width: 700px) { :root[data-theme="dark"] #meuPerfil > .pf2 { margin: 0; } :root[data-theme="dark"] #meuPerfil > .pf2 .pf-capa { border-radius: 24px 24px 0 0; } }
.pf2 .pf-capa { height: clamp(280px, 62vw, 340px); }
.pf2 .pf-topo { align-items: center; gap: 16px; padding: 0 18px 6px; }
.pf2 .pf-anel { width: 108px; height: 108px; padding: 3px; }
.pf2 .pf-anel .avatar { border: 3.5px solid var(--pf-fundo); }
.pf2 .pf-editar-foto { border-color: var(--pf-fundo); }
.pf2 .pf-ident { padding: 10px 0 0; }
.pf2 .pf-nome-linha { gap: 7px; flex-wrap: nowrap; }
.pf2 .pf-nome { font-size: clamp(22px, 6vw, 28px); line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2 .pf-handle { gap: 2px 14px; font-size: 14px; margin-top: 4px; }
.pf2 .pf-handle span:first-child { font-weight: 600; }
.pf2 .pf-bio { font-size: 14.5px; margin-top: 8px; }
/* rosinha do duo ao lado do nome (no lugar da foto do duo e do fio na capa) */
.pf-rosa { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; background: #fff; color: #e0243b; box-shadow: 0 2px 10px rgba(224, 36, 59, .45); text-shadow: none; transition: transform .15s; }
.pf-rosa .i { width: 17px; height: 17px; }
.pf-rosa:hover { transform: scale(1.1) rotate(-6deg); }
.pf-rosa.so-rosa { cursor: default; }
.pf-rosa.so-rosa:hover { transform: none; }
/* ações: principal · secundária · ⋯ */
.pf2 .pf-corpo { padding: 14px 18px 18px; }
.pf2 .pf-acoes, .pf2 .pf-acoes:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 50px; gap: 10px; }
.pf2 .pf-acoes > .btn { min-height: 48px; border-radius: 14px; font-size: 15.5px; }
.pf2 .pf-acoes > .btn .i { width: 18px; height: 18px; }
.pf2 .pf-acoes > .btn.sec { background: color-mix(in srgb, var(--panel-2) 70%, transparent); border: 1px solid var(--line); }
.pf2 .pf-acoes > .btn.seguindo { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: none; }
.pf2 .pf-acoes > .btn.icone { width: 50px; }
/* negócios: até 5 por linha, sem rolar para o lado */
.pf2 [data-el="negocios"] { margin-top: 20px; }
.pf2 [data-el="negocios"] .vinculos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 6px 0 0; }
.pf2 [data-el="negocios"] .vinculo { width: auto; min-width: 0; }
.pf2 [data-el="negocios"] .vinculo .avatar { width: clamp(50px, 14.5vw, 64px); height: clamp(50px, 14.5vw, 64px); box-shadow: none; outline: 2.5px solid var(--cor, var(--accent)); outline-offset: 3px; margin: 6px auto 0; }
.pf2 [data-el="negocios"] .vinculo .papel { margin-top: 10px; max-width: 100%; font-size: 13px; }
.pf2 [data-el="negocios"] .vinculo.novo .avatar { outline: 0; border: 2px dashed var(--accent); background: transparent; }
.pf2 [data-el="negocios"] .vinculo.novo .nome { margin-top: 10px; font-size: 13px; }
.pf2 [data-el="negocios"] .vinculo.novo .papel { margin-top: -3px; font-size: 11.5px; white-space: nowrap; }
/* números */
.pf2 .pf-stats { margin-top: 20px; background: transparent; border-radius: 16px; }
.pf2 .pf-stat { padding: 14px 4px; }
.pf2 .pf-stat .num { font-size: 21px; }
.pf2 .pf-stat .rot { font-size: 12.5px; }
.pf2 .pf-painel { background: transparent; }
@media (max-width: 380px) { .pf2 .pf-anel { width: 92px; height: 92px; } .pf2 .pf-topo { gap: 12px; padding: 0 14px 6px; } .pf2 .pf-corpo { padding: 14px 14px 18px; } .pf2 .pf-stat .rot { font-size: 11px; } }
.pf2 [data-el="negocios"] .vinculo .papel { font-size: 12.5px; overflow: visible; text-overflow: clip; letter-spacing: -.1px; }
/* rosinha do duo no canto da foto de perfil (onde ficava no selo da foto do duo); no seu perfil a câmera vai para a esquerda */
.pf2 .pf-avatar-wrap .pf-rosa { position: absolute; right: 2px; bottom: 4px; z-index: 2; width: 32px; height: 32px; border: 3px solid var(--pf-fundo); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.pf2 .pf-avatar-wrap .pf-rosa .i { width: 18px; height: 18px; }
.pf2 .pf-avatar-wrap.com-rosa .pf-editar-foto { right: auto; left: 2px; }
@media (max-width: 380px) { .pf2 .pf-avatar-wrap .pf-rosa { width: 28px; height: 28px; } .pf2 .pf-avatar-wrap .pf-rosa .i { width: 16px; height: 16px; } }

/* ---------- foto de perfil ampliada (tocar e segurar) ---------- */
.pf-avatar-wrap { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pf-avatar-wrap .pf-anel { transition: transform .35s ease; }
.pf-avatar-wrap.segurando .pf-anel { transform: scale(.94); }
.foto-grande { position: fixed; inset: 0; z-index: 5200; display: grid; grid-template-rows: auto 1fr auto; padding: calc(14px + env(safe-area-inset-top)) 16px calc(26px + env(safe-area-inset-bottom)); background: radial-gradient(120% 70% at 50% 60%, rgba(40, 48, 78, .96), rgba(14, 17, 22, .97) 70%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; animation: fg-entra .22s ease both; }
.foto-grande.saindo { animation: fg-sai .2s ease both; }
@keyframes fg-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes fg-sai { to { opacity: 0; } }
.fg-fechar { justify-self: end; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer; }
.fg-centro { display: grid; place-content: center; justify-items: center; gap: 18px; }
.fg-foto { position: relative; width: min(74vw, 340px); aspect-ratio: 1; animation: fg-cresce .32s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes fg-cresce { from { transform: scale(.55); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.fg-foto .avatar { width: 100%; height: 100%; font-size: clamp(60px, 18vw, 110px); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.fg-lapis { position: absolute; right: 6%; bottom: 6%; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #14181d; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.fg-lapis .i { width: 22px; height: 22px; }
.fg-nome { display: grid; justify-items: center; gap: 2px; text-align: center; }
.fg-nome strong { font-size: 19px; }
.fg-nome span { color: rgba(255, 255, 255, .7); font-size: 14px; }
.fg-acoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 460px; width: 100%; margin: 0 auto; }
.fg-acao { display: grid; justify-items: center; gap: 9px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; padding: 0; }
.fg-circ { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background .15s; }
.fg-circ .i { width: 24px; height: 24px; }
.fg-acao:hover .fg-circ { background: rgba(255, 255, 255, .14); }
.fg-rot { font-size: 13px; font-weight: 650; line-height: 1.25; text-align: center; }
@media (prefers-reduced-motion: reduce) { .foto-grande, .fg-foto { animation: none; } }
/* fotinho do duo que aparece ao tocar na rosinha */
.pf-duo-bolha { position: absolute; z-index: 6; right: -14px; bottom: 44px; display: grid; justify-items: center; gap: 3px; border: 0; padding: 0; background: none; cursor: pointer; opacity: 0; transform: translateY(8px) scale(.6); transform-origin: 70% 100%; transition: opacity .18s, transform .25s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none; }
.pf-duo-bolha.aberta { opacity: 1; transform: none; pointer-events: auto; }
.pf-duo-bolha.so-ver { cursor: default; }
.pf-duo-bolha .avatar { width: 50px; height: 50px; font-size: 16px; border: 2.5px solid #fff; box-shadow: 0 0 0 2.5px #e0243b, 0 8px 20px rgba(0, 0, 0, .5); }
.pf-duo-bolha .nm { font-size: 9.5px; font-weight: 800; letter-spacing: .01em; color: #fff; padding: 1px 6px; border-radius: 999px; background: rgba(224, 36, 59, .92); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pf-duo-bolha.sem-nome .nm { display: none; }
.pf-rosa.pulsa { animation: rosaPulsa .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes rosaPulsa { 40% { transform: scale(1.28); } }

/* ---------- Seguidores / Seguindo: abas, busca e filtros ---------- */
#listaCorpo:has(.rel-topo) { padding-top: 0; }
.rel-topo { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 0 14px 10px; display: grid; gap: 10px; border-bottom: 1px solid var(--line); }
.rel-abas { display: grid; grid-template-columns: 1fr 1fr; }
.rel-aba { border: 0; background: none; color: var(--muted); font: inherit; padding: 10px 6px 11px; display: flex; justify-content: center; align-items: baseline; gap: 6px; cursor: pointer; border-bottom: 2px solid transparent; }
.rel-aba strong { font-size: 15px; color: inherit; }
.rel-aba span { font-size: 14px; font-weight: 700; }
.rel-aba.ativa { color: var(--text); border-bottom-color: var(--text); }
.rel-busca { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.rel-busca:focus-within { border-color: var(--accent); }
.rel-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 14.5px; }
.rel-busca input::-webkit-search-cancel-button { display: none; }
.rel-limpar { width: 22px; height: 22px; border-radius: 50%; border: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--muted) 25%, transparent); color: var(--text); cursor: pointer; padding: 0; }
.rel-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
.rel-chips::-webkit-scrollbar { display: none; }
.rel-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.rel-chip em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.rel-chip.ativo { background: var(--text); border-color: var(--text); color: var(--panel); }
.rel-chip.ativo em { color: inherit; opacity: .7; }
.rel-dica { margin: 10px 16px 2px; font-size: 12.5px; color: var(--muted); }
.rel-selo { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-size: 10.5px; font-weight: 800; vertical-align: 2px; }

/* "+" do Flash na foto do seu perfil */
.pf-mais-flash { background: linear-gradient(135deg, #5ad8ff, #00adee 45%, #0062d6) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0, 140, 238, .55), inset 0 1px 0 rgba(255,255,255,.45) !important; }
.pf-mais-flash .i { width: 16px; height: 16px; stroke-width: 3; }

/* ---------- Salvos: coleções, filtros e grade com quem publicou ---------- */
#gradeSalvos.salvos2 { display: block; }
.sv-titulo { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 10px; }
.sv-titulo strong { font-size: 16px; }
.sv-titulo span { font-size: 12.5px; color: var(--muted); font-weight: 650; }
.col-carrossel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 0 14px; padding: 2px 2px 2px; }
.col-carrossel::-webkit-scrollbar { display: none; }
.col-cartao { flex: none; width: 128px; scroll-snap-align: start; display: grid; gap: 2px; text-align: left; border: 0; background: none; color: var(--text); font: inherit; padding: 0; cursor: pointer; }
.col-cartao strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; }
.col-cartao small { font-size: 11.5px; color: var(--muted); font-weight: 650; min-height: 14px; }
.col-capa { position: relative; width: 128px; height: 128px; border-radius: 16px; overflow: hidden; display: grid; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); }
.col-capa.q2 { grid-template-columns: 1fr 1fr; }
.col-capa.q4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.col-cel { position: relative; overflow: hidden; display: grid; place-items: center; min-width: 0; min-height: 0; }
.col-cel img, .col-cel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-cel.txt { --t1: #0f2a38; --t2: #103e55; padding: 6px; font-size: 10.5px; font-weight: 700; line-height: 1.25; color: #f3f7f9; text-align: left; place-items: start; background: radial-gradient(120% 90% at 0% 0%, var(--t2), var(--t1) 70%); overflow: hidden; }
.col-cel.txt[data-tom="1"] { --t1: #1b1830; --t2: #3a2f6b; }
.col-cel.txt[data-tom="2"] { --t1: #102a24; --t2: #17594a; }
.col-cel.txt[data-tom="3"] { --t1: #2c1a14; --t2: #6b3a24; }
.col-cel.txt[data-tom="4"] { --t1: #171c22; --t2: #2e3a46; }
.col-cel.vazia { color: var(--muted); }
.col-cartao.ativa .col-capa { box-shadow: 0 0 0 2px var(--accent); border-color: transparent; }
.col-criar .col-capa { border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); background: transparent; }
.col-criar .col-cel.vazia { color: var(--accent); }
.col-cartao:hover .col-capa { transform: translateY(-1px); transition: transform .15s; }
.sv-col-topo { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; }
.sv-col-tx { flex: 1; min-width: 0; display: grid; }
.sv-col-tx strong { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-col-tx small { font-size: 12px; color: var(--muted); }
.sv-chips { margin: 0 0 12px !important; padding: 0 !important; }
.salvo-tile.texto { padding-top: 40px; justify-content: flex-start; }
.sv-grade { margin-top: 0; }
.salvo-tile .sv-autor { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 22px 8px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; font-size: 11.5px; font-weight: 750; text-align: left; }
.salvo-tile .sv-autor .avatar { width: 20px; height: 20px; flex: none; font-size: 8px; border: 1.5px solid rgba(255, 255, 255, .85); }
.salvo-tile .sv-autor span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.salvo-tile .sv-marca { position: absolute; top: 7px; left: 7px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; z-index: 2; }
.salvo-tile .sv-marca .i { width: 13px; height: 13px; fill: currentColor; }
.salvos-vazio { display: grid; justify-items: center; gap: 6px; padding: 34px 20px; }
.sv-ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--text); margin-bottom: 4px; }
/* Folha "Salvar em" */
.col-sub { margin: 4px 16px 10px; font-size: 13px; color: var(--muted); }
.col-linha { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.col-linha:hover { background: var(--panel-2); }
.col-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); flex: none; }
.col-tx { flex: 1; min-width: 0; display: grid; }
.col-tx strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-tx small { font-size: 12px; color: var(--muted); }
.col-ok { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; flex: none; }
.col-linha.dentro .col-ok { background: var(--accent); border-color: var(--accent); color: #fff; }
.col-linha.dentro .col-ic { color: var(--accent); }
.col-nova { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); margin-top: 6px; }
.col-nova-folha { border-top: 0; margin: 0; }
.col-nova input { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 0 12px; font: inherit; font-size: 14.5px; }
.col-nova input:focus { outline: 0; border-color: var(--accent); }

/* ---------- Enquete profissional: prazo, resultado final, vencedora e votos ---------- */
.enquete { gap: 10px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--panel-2)), var(--panel-2)); }
.enq-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-transform: none; letter-spacing: 0; color: inherit; }
.enq-tit { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 11.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.enq-tit .i { width: 15px; height: 15px; }
.enq-prazo { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.enq-prazo[hidden] { display: none; }
.enq-prazo .i { width: 12px; height: 12px; }
.enquete.acabou .enq-prazo { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.enq-perg { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.enq-op { min-height: 48px; border-radius: 14px; padding: 0 14px 0 12px; }
.enq-rot { min-width: 0; }
.enq-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enq-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--muted) 60%, transparent); transition: border-color .15s; }
.enq-op:hover .enq-radio { border-color: var(--accent); }
.enquete.resultado .enq-op { border-color: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.enquete.resultado .enq-op.minha { border-color: var(--accent); }
.enquete.resultado .enq-barra { background: color-mix(in srgb, var(--text) 10%, transparent); }
.enquete.resultado .enq-op.lider .enq-barra { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.enquete.resultado .enq-op.lider .enq-pct { color: var(--accent); }
.enquete.acabou .enq-op { cursor: default; }
.enq-venc { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f5b301; color: #1a1300; flex: none; }
.enq-venc .i { width: 13px; height: 13px; color: inherit !important; }
.enq-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.enq-rod-tx { min-width: 0; }
.enq-ver { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; padding: 4px 0; }
.enq-ver .i { width: 14px; height: 14px; }
.enquete.escura { background: rgba(255,255,255,.96); }
.enquete.escura .enq-perg { color: #111; }
.enquete.escura.resultado .enq-op { background: #eef1f4; }
.enquete.escura.resultado .enq-barra { background: #dfe4e8; }
.enquete.escura.resultado .enq-op.lider .enq-barra { background: color-mix(in srgb, var(--accent) 35%, #fff); }
.enquete.escura .enq-radio { border-color: #b5bec5; }
.enquete.escura .enq-prazo { background: color-mix(in srgb, var(--accent) 14%, #fff); }
.enquete.escura.acabou .enq-prazo { background: #eef1f4; color: #5d6b75; }
/* Duração (compositor e flash) */
.enq-dur { display: grid; gap: 8px; padding-top: 4px; }
.enq-dur-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.enq-dur-tit span { font-size: 13px; font-weight: 800; }
.enq-dur-tit small { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.enq-dur-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.enq-dur-chip { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.enq-dur-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.enq-dur-campo { height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--text); font: inherit; padding: 0 10px; }
.enq-dur-campo[hidden] { display: none; }
.enq-dur.escuro .enq-dur-tit span { color: #fff; }
.enq-dur.escuro .enq-dur-tit small { color: rgba(255,255,255,.75); }
.enq-dur.escuro .enq-dur-chip { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }
.enq-dur.escuro .enq-dur-chip.on { background: #fff; border-color: #fff; color: #111; }
.enq-dur.escuro .enq-dur-campo { background: rgba(255,255,255,.92); color: #111; border: 0; }
.fe-enq-dur { display: block; font-size: .72em; font-weight: 800; color: #5d6b75; letter-spacing: .02em; }
/* Votos da enquete (autor) */
.vv-topo { display: grid; gap: 2px; padding: 4px 16px 12px; border-bottom: 1px solid var(--line); }
.vv-topo strong { font-size: 16px; }
.vv-topo small { color: var(--muted); font-size: 12.5px; }
.vv-grupo { padding: 12px 0 4px; border-bottom: 1px solid var(--line); }
.vv-cab { display: flex; justify-content: space-between; gap: 8px; padding: 0 16px; font-size: 14px; font-weight: 800; }
.vv-op { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.vv-op .i { color: #f5b301; width: 15px; height: 15px; }
.vv-n { color: var(--muted); font-weight: 750; font-size: 12.5px; white-space: nowrap; }
.vv-mais { display: block; color: var(--muted); font-size: 12px; margin: 2px 2px 6px; }
.vv-barra { margin: 6px 16px 4px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.vv-barra i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--muted) 70%, transparent); }
.vv-grupo.lider .vv-barra i { background: var(--accent); }
/* Resultado (folha aberta pelas notificações) */
.er-folha { margin: 6px 16px 10px; }
.er-resumo { margin: 0 16px 10px; font-size: 14px; color: var(--muted); }
.er-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 16px 16px; }
.er-nota { color: var(--muted); font-size: 12.5px; }
/* Resultado dentro da notificação */
.nt-enq { display: grid; gap: 4px; margin-top: 6px; max-width: 320px; }
.nt-enq-p { font-size: 13px; font-weight: 750; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-enq-op { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 4px 9px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 12.5px; font-weight: 700; }
.nt-enq-op i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--text) 9%, transparent); }
.nt-enq-op.lider i { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.nt-enq-op.minha { box-shadow: inset 0 0 0 1.5px var(--accent); }
.nt-enq-op .o, .nt-enq-op .n { position: relative; }
.nt-enq-op .o { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-enq-t { font-size: 11.5px; color: var(--muted); }

/* ---------- Enquete anônima e caixa de perguntas ---------- */
.enq-anon { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, #8e2de2 14%, transparent); color: #a466ff; font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.enq-anon .i { width: 13px; height: 13px; }
.enq-cab .enq-anon { margin-right: auto; margin-left: 2px; }
.enquete.escura .enq-anon, .caixa-perg.escura .enq-anon { background: #f1e8ff; color: #6b21c8; }
.enq-chave { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.enq-chave .tx { display: grid; gap: 1px; min-width: 0; }
.enq-chave strong { font-size: 13.5px; }
.enq-chave small { font-size: 12px; color: var(--muted); }
.enq-chave.escuro { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
.enq-chave.escuro small { color: rgba(255,255,255,.75); }
.pe-dica, .enq-ed-dica { font-size: 12px; color: var(--muted); }
.enq-ed-dica { color: rgba(255,255,255,.8); }
.caixa-perg { margin: 4px 12px 10px; padding: 16px; border-radius: 18px; display: grid; gap: 10px; color: #fff; background: linear-gradient(135deg, #ff7a1a, #ff3d7f 60%, #8e2de2); box-shadow: 0 10px 26px rgba(255, 61, 127, .22); }
.post-extras .caixa-perg, .texto-item .caixa-perg { margin: 6px 0 2px; width: 100%; box-sizing: border-box; }
.caixa-perg.anonima { background: linear-gradient(135deg, #2b1055, #7597de); box-shadow: 0 10px 26px rgba(43, 16, 85, .3); }
.cx-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-tit { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.cx-tit .i { width: 15px; height: 15px; }
.caixa-perg .enq-anon { background: rgba(255,255,255,.2); color: #fff; }
.cx-perg { font-size: 18px; line-height: 1.3; font-weight: 850; letter-spacing: -.01em; }
.cx-form { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 16px; background: rgba(255,255,255,.96); }
.cx-form textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: none; color: #111; font: inherit; font-size: 15px; line-height: 1.35; padding: 7px 0; max-height: 120px; }
.cx-form textarea::placeholder { color: #8a949c; }
.cx-enviar { flex: none; width: 38px; height: 38px; border-radius: 12px; border: 0; display: grid; place-items: center; background: #111; color: #fff; cursor: pointer; transition: opacity .15s, transform .1s; }
.cx-enviar:disabled { opacity: .25; cursor: default; }
.cx-enviar:not(:disabled):active { transform: scale(.94); }
.cx-nota { font-size: 12px; font-weight: 650; opacity: .88; }
.caixa-perg.enviada .cx-nota { opacity: 1; font-weight: 800; }
.cx-ver { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 0; background: rgba(255,255,255,.18); color: #fff; font: inherit; font-size: 14.5px; font-weight: 750; text-align: left; cursor: pointer; }
.cx-ver strong { font-size: 18px; }
.cx-ver span { flex: 1; }
.cx-ver:hover { background: rgba(255,255,255,.26); }
.caixa-perg.escura { background: rgba(255,255,255,.97); color: #111; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.caixa-perg.escura .cx-tit { color: #ff3d7f; }
.caixa-perg.escura.anonima .cx-tit { color: #6b21c8; }
.caixa-perg.escura .cx-form { background: #f1f3f5; }
.caixa-perg.escura .cx-ver { background: #f1f3f5; color: #111; }
.caixa-perg.escura .cx-nota { color: #5d6b75; }
.story-cx .caixa-perg { margin: 0; }
/* Respostas (folha do autor) */
.cx-resp { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cx-resp .avatar { width: 40px; height: 40px; flex: none; cursor: pointer; }
.avatar.anonimo { display: grid; place-items: center; background: linear-gradient(135deg, #2b1055, #7597de) !important; color: #fff; cursor: default; }
.avatar.anonimo .i { width: 20px; height: 20px; }
.cx-resp .tx { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cx-resp .quem { display: flex; align-items: baseline; gap: 8px; }
.cx-resp .quem strong { font-size: 14px; }
.cx-resp .quem span { font-size: 12px; color: var(--muted); }
.cx-resp p { margin: 0; font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.cx-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cx-acoes .btn { display: inline-flex; align-items: center; gap: 5px; }
.cx-responder { background: var(--panel-2); border: 1px solid var(--line); margin-top: 6px; }
.cx-responder textarea { color: var(--text); }
.cx-resp .cx-nota { color: var(--accent); opacity: 1; }
/* prévia no criador do Flash */
.fe-cx { background: linear-gradient(135deg, #ff7a1a, #ff3d7f 60%, #8e2de2); color: #fff; }
.fe-cx-cab { display: inline-flex; align-items: center; gap: .3em; font-size: .62em; font-weight: 850; letter-spacing: .06em; opacity: .92; }
.fe-cx .fe-cx-campo { background: rgba(255,255,255,.95) !important; color: #8a949c !important; font-weight: 600 !important; }
.notif .avatar.anonimo .i { width: 22px; height: 22px; }

/* ---------- Flash: link para negócio, repost, enviar ---------- */
.story-link { position: absolute; z-index: 4; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; max-width: 82%; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(255,255,255,.96); color: #111; text-decoration: none; font-weight: 850; font-size: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.story-link > .i:first-child { flex: none; width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 9px; background: linear-gradient(135deg, #00adee, #0052d4); color: #fff; }
.story-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-link > .i:last-child { flex: none; width: 14px; height: 14px; color: #5d6b75; }
.story-visor .limpo .story-link, .story-caixa.limpo .story-link { opacity: 0; }
.story-repost { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; border: 0; background: rgba(255,255,255,.18); color: #fff; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.story-repost .i { width: 11px; height: 11px; color: #ffc61a; }
.story-linha-acoes { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
/* Mesma altura e recuo do botão "Visualizações" (40 px): o nome fica na mesma coluna e no meio da pílula. */
.story-mencoes.pilha-pessoas { gap: 8px; min-height: 40px; padding: 0 14px 0 6px; line-height: 1; box-sizing: border-box; }
.story-mencoes .pilha-rostos .avatar { width: 26px; height: 26px; border: 0; box-sizing: border-box; }
.story-mencoes .pilha-rostos > * + * { margin-left: -8px; box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
.story-mencoes .pilha-tx { display: block; line-height: 1.2; padding-bottom: 1px; }
.story-linha-acoes .story-mencoes { justify-self: auto; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.story-linha-acoes .story-repostar:only-child { margin-left: auto; }
.story-repostar { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 0; background: #fff; color: #111; font: inherit; font-size: 13.5px; font-weight: 850; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.story-repostar .i { width: 14px; height: 14px; }
.flash-repost-selo { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12.5px; font-weight: 800; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; white-space: nowrap; }
.flash-repost-selo .i { width: 13px; height: 13px; color: #ffc61a; }
.flash-txt.flash-link { padding: 0; background: none; text-shadow: none; }
.fe-link { display: inline-flex; align-items: center; gap: .45em; padding: .55em .8em .55em .55em; border-radius: .8em; background: rgba(255,255,255,.96); color: #111; font-weight: 850; white-space: nowrap; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.fe-link > .i:first-child { width: 1.7em; height: 1.7em; padding: .35em; box-sizing: border-box; border-radius: .5em; background: linear-gradient(135deg, #00adee, #0052d4); color: #fff; }
.fe-link > .i:last-child { width: .8em; height: .8em; color: #5d6b75; }
.figs-sec { margin: 10px 2px 4px; font-size: 11.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.neg-av { display: grid; place-items: center; color: #fff; }
.neg-av.servicos { background: #00adee; } .neg-av.delivery { background: #ff7a1a; } .neg-av.lojinha { background: #b066ff; } .neg-av.imoveis { background: #2fbf71; } .neg-av.saude { background: #0fb5a6; } .neg-av.comunidade { background: #e5487f; }
.neg-av .i { width: 18px; height: 18px; }
.rel-busca-campo { display: block; width: calc(100% - 32px); margin: 4px 16px 10px; height: 40px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 0 12px; font: inherit; font-size: 14.5px; }

/* ---------- Flash: publicar no seu perfil e/ou nos perfis de negócio (botão na barra de cima) ---------- */
.flash-onde { position: relative; }
.flash-onde.on { background: #ffd60a !important; color: #111 !important; }
.flash-onde.on .i { color: #111 !important; stroke: #111; }
.flash-onde-n { position: absolute; right: -2px; top: -2px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #ff3d7f; color: #fff; font-size: 11px; font-weight: 850; display: grid; place-items: center; border: 2px solid #000; }
.flash-onde-n[hidden] { display: none; }
.flash-dest-item .ok { flex: none; margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); box-sizing: border-box; }
.flash-dest-item.on { box-shadow: inset 0 0 0 1.5px #ffd60a; }
.flash-dest-item.on .ok { border: 0; background: #ffd60a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.flash-dest-item .neg-av .i { width: 16px; height: 16px; }
.flash-dica.clicavel { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.story-onde .i { color: #fff; }

/* Borda colorida só quando tem flash (antes o anel azul aparecia sempre e parecia flash) */
.pf-anel:not(.com-flash), .pf2 .pf-anel:not(.com-flash) { background: color-mix(in srgb, var(--muted) 28%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
[data-el="negocios"] .vinculo:not(.novo) .avatar:not(.fn-anel) { box-shadow: 0 0 0 3px var(--panel), 0 0 0 4.5px color-mix(in srgb, var(--muted) 35%, transparent); }
.pf2 [data-el="negocios"] .vinculo:not(.novo) .avatar:not(.fn-anel) { box-shadow: none; outline: 2px solid color-mix(in srgb, var(--muted) 35%, transparent); outline-offset: 3px; }
.pf2 [data-el="negocios"] .vinculo .avatar.fn-anel { outline: 0; }

/* ---------- Configurações do Flash (cartões por assunto) ---------- */
.cfg2 { display: grid; gap: 12px; padding: 4px 14px 16px; }
.cfg2-card { border-radius: 18px; background: var(--panel-2); border: 1px solid var(--line); padding: 14px; display: grid; gap: 10px; }
.cfg2-cab { display: flex; gap: 12px; align-items: center; }
/* ícones neutros (sem as cores de antes), na cor do texto */
.cfg2-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--text); background: var(--panel); border: 1px solid var(--line); }
.cfg2-ic .i { width: 20px; height: 20px; }
.cfg2-tx { min-width: 0; }
.cfg2-tx h3 { margin: 0; font-size: 15.5px; letter-spacing: -.01em; }
.cfg2-tx p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.cfg2-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg2-seg { display: grid; gap: 6px; }
.cfg2-op { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.cfg2-op .radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--muted) 60%, transparent); box-sizing: border-box; }
.cfg2-op.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.cfg2-op.on .radio { border: 6px solid var(--accent); }
.cfg2-op .tx { display: grid; gap: 1px; min-width: 0; }
.cfg2-op strong { font-size: 14.5px; }
.cfg2-op small { font-size: 12px; color: var(--muted); }
.cfg2-linha { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; width: 100%; text-decoration: none; cursor: pointer; }
div.cfg2-linha { cursor: default; }
.cfg2-linha .tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cfg2-linha strong { font-size: 14.5px; }
.cfg2-linha small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.cfg2-seta { color: var(--muted); flex: none; }
.cfg2-nota { margin: 2px 4px 0; font-size: 12px; color: var(--muted); text-align: center; }

/* Estatísticas do perfil → seus negócios (atalho para as estatísticas de cada um) */
.ins-neg { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.ins-neg:last-of-type { border-bottom: 0; }
.ins-neg .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 6px 16px -8px var(--c); }
.ins-neg .tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ins-neg .tx strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-neg .tx small { font-size: 11.5px; color: var(--c); font-weight: 750; }
.ins-neg .nums { display: grid; justify-items: end; line-height: 1.15; min-width: 52px; }
.ins-neg .nums b { font-size: 15px; } .ins-neg .nums small { font-size: 10.5px; color: var(--muted); }
.ins-neg .nums i { font-style: normal; font-size: 10.5px; font-weight: 800; }
.ins-neg .nums i.sobe { color: var(--ok); } .ins-neg .nums i.desce { color: var(--danger); }
.ins-neg > svg { flex: none; color: var(--muted); }

/* Explorar: Perto de você */
.exp-neg .capa .dist { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(4, 14, 24, .66); }
.exp-neg .capa .dist svg { width: 11px; height: 11px; }
.exp-tit { position: relative; }
.exp-loc { display: inline-flex; align-items: center; gap: 5px; height: 30px; margin-top: 6px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.exp-loc svg { width: 13px; height: 13px; }

/* Adicionar local (compositor) */
.chip-extra.local { color: #e5484d; border-color: color-mix(in srgb, #e5484d 40%, transparent); }
.chip-extra.local svg { width: 13px; height: 13px; }
.lista-locais { display: grid; gap: 2px; margin-top: 8px; }
.lista-locais .pub-dica { margin: 8px 4px 2px; }
.linha-local { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.linha-local:hover { background: var(--hover); }
.ll-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #e5484d 14%, transparent); color: #e5484d; }
.ll-tx { min-width: 0; display: grid; gap: 1px; }
.ll-tx b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-tx small { font-size: 12px; color: var(--muted); }
/* local na publicação */
.post-cab .quem .sub-linha { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12.5px; line-height: 1.3; }
.post-cab .quem .sub-linha small { flex: none; white-space: nowrap; }
.post-cab .quem .local-post { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; text-align: left; overflow: hidden; white-space: nowrap; }
.post-cab .quem .local-post span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-cab .quem .local-post svg { flex: none; width: 12px; height: 12px; color: #e5484d; }

/* página de notificações: lista comum com o painel do sino (avisos-lista.js) */
.nt-pagina { padding: 12px 12px 8px; }
.nt-pagina .nt2-barra { position: sticky; top: calc(var(--topo, 60px) + env(safe-area-inset-top)); z-index: 3; margin: -12px -12px 4px; padding: 12px 12px 10px; background: var(--panel); border-bottom: 1px solid var(--line); border-radius: 20px 20px 0 0; }
.nt-pagina .nt2-acoes .btn { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }

/* Nova publicação: autor, campo de texto com o contador dentro, grade "Adicionar à publicação" (nunca passa da largura) */
#folhaPublicar .folha-corpo { overflow-x: hidden; }
.pub-autor .pub-quem { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pub-autor .pub-quem strong { font-size: 15.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-autor .pub-quem small { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pub-autor .pub-quem small .i { width: 13px; height: 13px; }
.pub-campo { position: relative; margin-top: 14px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--text) 3%, transparent); transition: border-color .15s, box-shadow .15s; }
.pub-campo:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.pub-campo .pub-texto { display: block; box-sizing: border-box; margin: 0; min-height: 130px; padding: 14px 16px 30px; resize: none; line-height: 1.5; font-size: 16px; color: var(--text); }
.pub-campo .cont { position: absolute; right: 12px; bottom: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.pub-add { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; }
.pub-add-tit { display: block; margin: 0 2px 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--muted); }
.pub-ferr-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pub-ferr { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 4px 9px; border: 1px solid transparent; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.pub-ferr span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-ferr .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.pub-ferr .ic .i { width: 20px; height: 20px; }
.pub-ferr:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.pub-ferr:active { transform: scale(.96); }
.pub-ferr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pub-ferr.ativo { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.pub-ferr.ativo .ic { color: #fff; background: var(--accent); }
.pub-ferr[hidden] { display: none; }
#folhaPublicar .pub-dica { display: flex; gap: 7px; align-items: flex-start; margin: 10px 4px 0; line-height: 1.45; }
#folhaPublicar .pub-dica .i { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; color: var(--muted); }

/* Modelo das publicações igual ao cartão do Flash (cores do tema: no escuro, os tons escuros do site) */
/* Só texto: cartão de citação com aspas grandes */
.post-card .post-texto.citacao { margin: 2px 12px 12px; padding: 40px 18px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); font-size: 18px; font-weight: 700; line-height: 1.42; letter-spacing: -.005em; }
.post-card .post-texto.citacao::before { content: "\201C"; position: absolute; left: 14px; top: 2px; font: 900 56px/1 Georgia, "Times New Roman", serif; color: var(--accent); pointer-events: none; }
.post-card .post-texto.citacao.curto { -webkit-line-clamp: 7; }
.post-card .post-texto.citacao + .ver-mais { margin-top: -6px; }
/* Enquete: caixa azul-clara (no escuro, um azul bem escuro) com opções em pílula com borda */
.post-card .enquete:not(.escura), .texto-item .enquete:not(.escura) { background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); }
.post-card .enquete:not(.escura) .enq-op, .texto-item .enquete:not(.escura) .enq-op { background: var(--panel); border: 1.5px solid color-mix(in srgb, var(--text) 12%, transparent); }
.post-card .enquete:not(.escura) .enq-op.minha, .texto-item .enquete:not(.escura) .enq-op.minha { border-color: var(--accent); }
.post-card .enquete.resultado:not(.escura) .enq-op.lider { border-color: var(--accent); }
.enq-rodape .enq-rod-tx:first-letter { text-transform: uppercase; }
/* Caixa de perguntas: o mesmo bloco da enquete (antes um degradê laranja/roxo à parte) */
.caixa-perg:not(.escura) { color: var(--text); background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); box-shadow: none; }
.caixa-perg:not(.escura) .cx-tit { color: var(--accent); opacity: 1; }
.caixa-perg:not(.escura) .enq-anon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.caixa-perg:not(.escura) .cx-form { background: var(--panel); border: 1.5px solid color-mix(in srgb, var(--text) 12%, transparent); }
.caixa-perg:not(.escura) .cx-form:focus-within { border-color: var(--accent); }
.caixa-perg:not(.escura) .cx-form textarea { color: var(--text); }
.caixa-perg:not(.escura) .cx-form textarea::placeholder { color: var(--muted); }
.caixa-perg:not(.escura) .cx-enviar { background: var(--accent); color: #fff; }
.caixa-perg:not(.escura) .cx-nota { color: var(--muted); opacity: 1; }
.caixa-perg:not(.escura) .cx-ver { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.caixa-perg:not(.escura) .cx-ver:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }

/* Salvos no mesmo modelo do Diário e do Flash: citação, enquete e caixa de perguntas em miniatura (cores do tema) */
.tile.salvo-tile:has(> .mm) { background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); color: var(--text); }
.mm { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 11px 9px; text-align: left; overflow: hidden; }
.mm-selo { display: inline-flex; align-items: center; gap: 4px; padding-left: 26px; min-height: 22px; color: var(--accent); font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.mm-selo .i { width: 12px; height: 12px; }
.mm-perg { font-size: 13px; line-height: 1.25; font-weight: 800; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mm-ops { display: grid; gap: 4px; min-height: 0; }
.mm-op { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 7px; border-radius: 9px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); font-size: 10.5px; font-weight: 700; }
.mm-op i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--muted) 70%, transparent); }
.mm-op span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-mais { font-size: 9.5px; font-weight: 700; color: var(--muted); padding-left: 2px; }
.mm-campo { padding: 6px 8px; border-radius: 9px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-cit { padding-top: 12px; }
.mm-aspas { position: absolute; right: 10px; top: 8px; font: 900 40px/1 Georgia, "Times New Roman", serif; color: var(--accent); }
.mm-cit p { margin: 34px 0 0; min-height: 0; font-weight: 750; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mm-cit.t-curto p { font-size: 15px; line-height: 1.25; -webkit-line-clamp: 4; }
.mm-cit.t-medio p { font-size: 12.5px; line-height: 1.32; -webkit-line-clamp: 4; }
.mm-cit.t-longo p { font-size: 11.5px; line-height: 1.36; font-weight: 650; -webkit-line-clamp: 5; }
.mm-rodape { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.mm-rodape .avatar { width: 18px; height: 18px; font-size: 8px; flex: none; }
.salvo-tile:has(> .mm) .sv-marca { z-index: 2; }
.sv-tipo { position: absolute; left: 7px; top: 40px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: 800; }
.sv-tipo .i { width: 11px; height: 11px; }
@media (max-width: 420px) { .mm { padding: 9px 8px 7px; gap: 5px; } .mm-perg { font-size: 12px; } .mm-cit.t-curto p { font-size: 13.5px; } .mm-op { padding: 3px 6px; font-size: 10px; } }
/* Capas das coleções: textos no mesmo estilo (sem as cores sortidas) */
.col-cel.txt.mm-capa { display: flex; flex-direction: column; gap: 2px; place-items: unset; background: color-mix(in srgb, var(--accent) 9%, var(--panel-2)); color: var(--text); }
.col-cel.txt.mm-capa b { font: 900 20px/1 Georgia, serif; color: var(--accent); height: 12px; }
.col-cel.txt.mm-capa .i { width: 13px; height: 13px; color: var(--accent); flex: none; }
.col-cel.txt.mm-capa span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* Explorar (busca): anel da foto do negócio pela cor do plano */
.linha-neg .avatar.neg[data-plano="gratis"] { box-shadow: 0 0 0 2px #00adee; }
.linha-neg .avatar.neg[data-plano="plus"] { box-shadow: 0 0 0 2.5px #2563ff; }
.linha-neg .avatar.neg[data-plano="pro"] { box-shadow: 0 0 0 2.5px #7c3aed; }
.linha-neg .avatar.neg[data-plano="premium"] { box-shadow: 0 0 0 2.5px #f59e0b; }
/* Nova publicação */
.pub-autor .pub-quem { flex: 1; }
/* ---------- Diário: topo, campo de publicar com atalhos ---------- */
.feed-intro { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), var(--panel); }
.feed-intro .fi-ic { width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #001018)); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.feed-intro div { display: grid; gap: 2px; min-width: 0; }
.feed-intro strong { font-size: 17px; letter-spacing: -.01em; }
.feed-intro small { color: var(--muted); font-size: 13px; }
.compor-box { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; margin-bottom: 14px; overflow: hidden; }
.compor-box .compor-card { margin: 0; border: 0; border-radius: 0; background: transparent; }
.compor-box .compor-card:hover { background: var(--hover); }
.compor-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.compor-atalhos button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border: 0; background: none; color: var(--text); font-weight: 750; font-size: 13.5px; cursor: pointer; }
.compor-atalhos button[hidden] { display: none; }
.compor-atalhos button + button:not([hidden]) { border-left: 1px solid var(--line); }
.compor-atalhos button svg { color: var(--accent); }
.compor-atalhos button:hover { background: var(--hover); }

/* Diário: filtro de tipo ao lado do Principais, numa fileira só que rola para o lado */
.filtro-feed { flex-wrap: nowrap; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 1px; }
.filtro-feed::-webkit-scrollbar { display: none; }
#filtroFeedBtn { order: -1; flex: none; }
.tipos-feed { display: contents; }
.tipos-feed button { flex: none; white-space: nowrap; }
.tipos-feed button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
/* 5 ações lado a lado: o nome encolhe um pouco no celular para caber inteiro (Republicar, Compartilhar) */
.interacoes .acoes-post { gap: 0; padding: 4px 2px 6px; }
.interacoes .acao { padding-left: 0; padding-right: 0; }
.interacoes .acao .rot { font-size: clamp(9.5px, 2.75vw, 11.5px); letter-spacing: -.01em; text-overflow: clip; }
/* Diário compacto (como as outras redes): "+" no topo e uma linha fina de filtro embaixo dos flashes */
/* Criar: lápis com brilho num quadradinho com borda, nas cores do tema (sem o azul; pedido dele 04/11/2026) */
.topo-criar { color: var(--text); }
.topo-criar .tc-ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); border: 1.5px solid var(--line); transition: transform .12s, background .15s; }
.topo-criar .tc-ic .i { width: 19px; height: 19px; stroke-width: 2.1; }
.topo-criar:hover { background: none; }
@media (hover: hover) { .topo-criar:hover .tc-ic { background: var(--hover); } }
.topo-criar:active .tc-ic { transform: scale(.9) rotate(-6deg); }
.filtro-feed.compacto { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 2px 2px 8px; border-bottom: 1px solid var(--line); overflow: visible; }
.filtro-feed.compacto .filtro-escolha { border: 0; background: none; color: var(--text); padding: 6px 4px; font-size: 16px; font-weight: 850; letter-spacing: -.01em; border-radius: 10px; min-height: 36px; }
.filtro-feed.compacto .filtro-escolha:hover { background: var(--hover); }
.filtro-feed.compacto .filtro-escolha .seta { opacity: .7; }
.filtro-feed.compacto .filtro-escolha.com-tag { color: var(--accent); max-width: 58vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-feed.compacto .tipos-feed { display: flex; gap: 2px; flex: none; }
.filtro-feed.compacto .tipos-feed button { display: grid; place-items: center; width: 38px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); position: relative; }
.filtro-feed.compacto .tipos-feed button:hover { background: var(--hover); }
.filtro-feed.compacto .tipos-feed button[aria-selected="true"] { background: none; color: var(--text); }
.filtro-feed.compacto .tipos-feed button[aria-selected="true"]::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: -9px; height: 2px; border-radius: 2px; background: var(--accent); }
.stories + .filtro-feed.compacto { margin-top: -4px; }
.ve-mais-tit { margin: 18px 4px 10px; font-size: 15px; font-weight: 850; color: var(--muted); letter-spacing: -.01em; }
/* "Ver publicação" no visor do Flash: menor e no rodapé, em cima do campo de responder (não cobre a legenda) */
/* Publicação dentro do flash: a área tocável cobre o cartão; o balão aparece onde tocou (como no Instagram) */
/* só o miolo da publicação: as beiradas (22% de cada lado) continuam voltando e passando o flash */
.story-post-area { position: absolute; z-index: 3; left: 22%; right: 22%; top: 26%; bottom: 30%; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.story-link.story-post.balao { position: absolute; z-index: 5; transform: translate(-50%, -100%); padding: 10px 14px; gap: 6px; font-size: 14.5px; border-radius: 12px; animation: balaoSobe .16s ease-out; }
.story-link.story-post.balao::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.story-link.story-post.balao[hidden] { display: none; }
@keyframes balaoSobe { from { opacity: 0; transform: translate(-50%, -90%); } to { opacity: 1; transform: translate(-50%, -100%); } }
.story-caixa.limpo .story-post-area { pointer-events: auto; }
.story-post-linha { display: flex; justify-content: center; width: 100%; }
.story-link.story-post { position: static; transform: none; max-width: 100%; padding: 7px 12px 7px 7px; gap: 7px; font-size: 13.5px; border-radius: 999px; }
.story-link.story-post > .i:first-child { width: 24px; height: 24px; padding: 5px; border-radius: 50%; }
/* Reações rápidas do Flash flutuam em cima do rodapé (escondidas, ocupavam espaço e empurravam o "Ver publicação" para o meio) */
.story-rodape { position: absolute; }
.story-rodape > .story-bandeja { position: absolute; left: 50%; bottom: calc(100% - 4px); translate: -50% 0; }
/* Estrela do Flash (curtir, no lugar do raio): contorno branco; dada = dourada */
.story-raio.story-estrela .i { width: 28px; height: 28px; }
.story-raio.story-estrela.on { color: #ffc81a; }
.story-raio.story-estrela.on .i { fill: currentColor; animation: estrelaDada .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes estrelaDada { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.story-estrela-voa { position: absolute; left: 50%; top: 45%; z-index: 9; width: 120px; height: 120px; margin: -60px; color: #ffc81a; pointer-events: none; filter: drop-shadow(0 6px 22px rgba(255,170,0,.55)); animation: estrelaVoa .85s cubic-bezier(.2,.9,.3,1) forwards; }
.story-estrela-voa .i { width: 100%; height: 100%; fill: currentColor; }
@keyframes estrelaVoa { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.15); } 60% { transform: scale(1); } 100% { opacity: 0; transform: scale(1.05) translateY(-30px); } }
@media (prefers-reduced-motion: reduce) { .story-estrela-voa, .story-raio.story-estrela.on .i { animation: none; } .story-estrela-voa { display: none; } }
.story-vistos-est { display: inline-flex; align-items: center; gap: 3px; color: #ffc81a; font-weight: 850; }
.story-vistos-est .i { fill: currentColor; }
/* Visualizações do Flash (estilo Instagram) */
.vv-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 12px; }
.vv-num { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--panel-2, var(--hover)); text-align: center; }
.vv-num .i { color: var(--muted); }
.vv-num:nth-child(2) .i { color: #f5b400; fill: currentColor; }
.vv-num:nth-child(3) .i { color: #ff3d7f; }
.vv-num strong { font-size: 18px; line-height: 1.1; }
.vv-num small { color: var(--muted); font-size: 12px; }
.vv-filtros { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.vv-filtros button { flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.vv-filtros button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.vv-pessoa { display: flex; align-items: center; gap: 12px; padding: 8px 2px; }
.vv-foto { position: relative; flex: none; cursor: pointer; }
.vv-foto .avatar { width: 46px; height: 46px; }
.vv-emoji { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); font-size: 14px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.vv-tx { flex: 1; min-width: 0; display: grid; cursor: pointer; }
.vv-tx strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-tx small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-est { flex: none; color: #f5b400; display: grid; place-items: center; }
.vv-est .i { fill: currentColor; }
.vv-msg { flex: none; }
.vv-escrever { display: flex; gap: 8px; align-items: center; margin: 0 0 8px 58px; }
.vv-escrever input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; }
.vv-enviado { display: block; margin: 0 0 8px 58px; }
.vv-nota { display: block; margin-top: 12px; color: var(--muted); font-size: 12.5px; text-align: center; }
.story-so-estrela { display: flex; justify-content: flex-end; width: 100%; }
.vv-resumo, .vv-filtros, .vv-lista, .vv-nota { margin-left: 16px; margin-right: 16px; }
.vv-resumo { margin-top: 12px; }
.vv-nota { margin-bottom: 14px; }
/* fita dos seus flashes no ar (troca de flash sem sair da folha) */
.vv-fita { display: flex; gap: 10px; overflow-x: auto; padding: 12px 16px 14px; margin-bottom: 2px; border-bottom: 1px solid var(--line); scrollbar-width: none; scroll-snap-type: x proximity; }
.vv-fita::-webkit-scrollbar { display: none; }
.vv-mini { flex: none; display: grid; gap: 6px; justify-items: center; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; scroll-snap-align: center; }
.vv-mini-capa { width: 62px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--panel-2); border: 2px solid transparent; opacity: .55; transition: opacity .15s, border-color .15s, transform .15s; }
.vv-mini-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vv-mini-n { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; }
.vv-mini.on { color: var(--text); }
.vv-mini.on .vv-mini-capa { opacity: 1; border-color: var(--text); transform: translateY(-2px); }
.vv-quando { margin: 12px 16px 0; color: var(--muted); font-size: 12.5px; }
/* estrela como selo na foto de quem deu */
.vv-foto .vv-est { position: absolute; left: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.vv-foto .vv-est .i { width: 13px; height: 13px; }
.vv-oculto { color: var(--muted); font-size: 11.5px; font-style: italic; }
.vv-opcoes { flex: none; color: var(--muted); }
.vv-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 10px 58px; animation: contEntra .15s ease-out; }
.vv-acao { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.vv-acao .i { width: 16px; height: 16px; color: var(--muted); }
.vv-acao.perigo { color: #e5484d; }
.vv-acao.perigo .i { color: currentColor; }
/* Estrela do Flash: apagada = contorno branco (como o coração do Instagram); dada = cheia e dourada */
.story-raio.story-estrela .est-curtir { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.story-raio.story-estrela.on .est-curtir { fill: #ffc81a; stroke: #ffc81a; }
/* Público da publicação: botão no formulário e a tela */
.pub-quem-linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pub-publico { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2, var(--panel)); color: var(--muted); font-size: 11.5px; font-weight: 750; }
.pub-publico .i { width: 13px; height: 13px; flex: none; }
.pub-publico .seta { transform: rotate(90deg); opacity: .6; }
.pub-publico span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.pub-publico.ativo { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Público da publicação: página em tela cheia (como o "Promover" das redes) — publico-tela.js */
.pa-pagina { position: fixed; inset: 0; z-index: 5300; display: flex; flex-direction: column; background: var(--bg); color: var(--text); animation: paEntra .22s ease-out; }
@keyframes paEntra { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pa-pagina { animation: none; } }
.pa-topo { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
.pa-voltar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.pa-voltar:hover { background: var(--hover); }
.pa-titulo { display: grid; min-width: 0; }
.pa-titulo strong { font-size: 16px; }
.pa-titulo small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-ok { min-height: 38px; padding: 0 18px; }
.pa-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); display: grid; gap: 14px; align-content: start; width: min(640px, 100%); margin: 0 auto; }
.pa-resumo { position: sticky; top: -14px; z-index: 2; display: grid; gap: 3px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.pa-resumo > small { color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.pa-resumo > strong { font-size: 15.5px; line-height: 1.3; }
.pa-alcance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 4px; min-height: 26px; }
.pa-alc-n { font-size: 22px; font-weight: 850; color: var(--accent); font-variant-numeric: tabular-nums; }
.pa-alc-rot { color: var(--muted); font-size: 13px; }
.pa-alc-barra { flex-basis: 100%; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.pa-alc-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); transition: width .35s ease; }
.pa-alc-nota { margin: -6px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.pa-alc-nota:empty { display: none; }
.pa-sec { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.pa-tit { display: flex; align-items: center; gap: 10px; }
.pa-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.pa-tit strong { font-size: 15px; }
.pa-sub { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.pa-opcoes { display: grid; gap: 8px; }
.pa-opcao { display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2, var(--panel)); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.pa-opcao:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pa-opcao[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.pa-opcao-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); color: var(--text); }
.pa-opcao[aria-pressed="true"] .pa-opcao-ic { background: var(--accent); color: #fff; }
.pa-opcao-tx { display: grid; gap: 2px; min-width: 0; }
.pa-opcao-tx strong { font-size: 14.5px; }
.pa-opcao-tx small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.pa-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); justify-self: end; }
.pa-opcao[aria-pressed="true"] .pa-radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 45%, transparent 50%); }
.pa-abas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--hover); }
.pa-aba { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; min-width: 0; }
.pa-aba[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.pa-aba[aria-selected="true"] .i { color: var(--accent); }
.pa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-chip { min-height: 36px; border: 1px solid var(--line); background: var(--panel-2, var(--panel)); color: var(--text); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pa-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pa-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-ufs { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; }
.pa-ufs .pa-chip { padding: 7px 0; text-align: center; }
.pa-estados, .pa-cidades, .pa-perto { display: grid; gap: 10px; }
.pa-busca, .pa-cid-linha select, .pa-salvar input { width: 100%; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2, var(--panel)); color: var(--text); font: inherit; font-size: 14px; padding: 0 12px; min-width: 0; }
.pa-linha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pa-linha-acoes .pa-link { margin-left: 6px; }
.pa-regiao { min-height: 32px; padding: 5px 12px; font-size: 12.5px; border-style: dashed; }
.pa-regiao[aria-pressed="true"] { border-style: solid; }
.pa-link { border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 800; padding: 2px 0; cursor: pointer; }
.pa-cid-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; }
.pa-escolhidas { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-escolhidas:empty { display: none; }
.pa-sug { display: grid; gap: 4px; }
.pa-sug:empty { display: none; }
.pa-sug-it { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: var(--hover); color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.pa-centro { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 750; }
.pa-centro .i { color: var(--accent); }
.pa-raio { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; }
.pa-raio strong { justify-self: end; font-size: 15px; color: var(--accent); }
.pa-raio input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.pa-raio-marcas { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pa-idade { display: grid; gap: 8px; }
.pa-idade-rot { font-size: 15px; }
.pa-duplo { position: relative; height: 28px; --de: 0%; --ate: 100%; }
.pa-duplo-trilho { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--text) 14%, transparent) var(--de), var(--accent) var(--de) var(--ate), color-mix(in srgb, var(--text) 14%, transparent) var(--ate)); }
.pa-duplo input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 28px; }
.pa-duplo input::-webkit-slider-runnable-track { background: none; height: 28px; }
.pa-duplo input::-moz-range-track { background: none; }
.pa-duplo input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: grab; }
.pa-duplo input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); cursor: grab; }
.pa-salvos { display: grid; gap: 6px; }
.pa-salvo-it { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2, var(--panel)); }
.pa-salvo { display: grid; gap: 1px; text-align: left; padding: 10px 12px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.pa-salvo strong { font-size: 14px; }
.pa-salvo small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-salvo-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.pa-salvar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pa-nota { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; padding: 0 4px; }
@media (min-width: 900px) { .pa-corpo { padding-top: 22px; } }
.post-publico { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 28px); margin: -2px 14px 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-publico .i { flex: none; }
/* Reels: vídeos em tela cheia, um por vez, deslizando para cima */
.reels { position: fixed; inset: 0; z-index: 4000; background: #000; color: #fff; animation: veEntra .2s cubic-bezier(.2,.8,.2,1); }
.reels-topo { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 18px; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); pointer-events: none; }
.reels-topo > * { pointer-events: auto; }
.reels-topo strong { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 850; letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.reels-tit .i { width: 24px; height: 24px; }
.reels-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer; }
.reels-btn .i { width: 22px; height: 22px; }
.reels-lista { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.reels-lista::-webkit-scrollbar { display: none; }
.reel { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #000; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Computador: coluna 9:16 no centro, como o Instagram na web */
@media (min-width: 700px) {
  .reels-lista { width: min(100%, calc(100dvh * 9 / 16)); margin: 0 auto; }
  .reels-topo { left: 50%; right: auto; width: min(100%, calc(100dvh * 9 / 16)); transform: translateX(-50%); }
  .reel { border-left: 1px solid #1a1a1a; border-right: 1px solid #1a1a1a; }
}
.reel-sombra { position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgba(0,0,0,.72), transparent); pointer-events: none; }
.reel-pausa { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .15s; pointer-events: none; }
.reel-pausa .i { width: 34px; height: 34px; fill: #fff; stroke: none; }
.reel.parado .reel-pausa { opacity: 1; }
.reel-info { position: absolute; z-index: 2; left: 14px; right: 82px; bottom: calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 8px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.reel-quem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.reel-quem .avatar { width: 38px; height: 38px; flex: none; border: 2px solid #fff; padding: 0; cursor: pointer; }
.reel-nome { min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 850; font-size: 15px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.reel-quem .btn { flex: none; border: 1px solid rgba(255,255,255,.8); background: transparent; color: #fff; }
.reel-legenda { margin: 0; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.reel-mais { justify-self: start; margin-top: -6px; border: 0; background: none; padding: 0; color: rgba(255,255,255,.75); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.reel.lendo .reel-sombra { height: 100%; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.35)); }
.reel-marcados { justify-self: start; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: rgba(255,255,255,.8); font-size: 12.5px; }
.reel-local { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #fff; }
.reel-prog { position: absolute; z-index: 3; left: 0; right: 0; bottom: env(safe-area-inset-bottom); height: 3px; background: rgba(255,255,255,.22); pointer-events: none; }
.reel-prog i { display: block; height: 100%; width: 0; background: #fff; }
.reel-legenda.aberta { -webkit-line-clamp: unset; max-height: 40vh; overflow-y: auto; }
.reel-legenda a { color: #fff; font-weight: 800; }
.reel-info .int-topo { padding: 0; border: 0; background: none; justify-content: flex-start; gap: 10px; }
.reel-info .int-topo, .reel-info .int-topo * { color: #fff; }
.reel-lado { position: absolute; z-index: 2; right: 6px; bottom: calc(22px + env(safe-area-inset-bottom)); width: 70px; padding: 0; border: 0; background: none; }
.reel-lado .acoes-post { display: flex; flex-direction: column; gap: 14px; border: 0; padding: 0; }
.reel-lado .acao { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.reel-lado .acao .ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.28); }
.reel-lado .acao .i { width: 25px; height: 25px; color: #fff; }
.reel-lado .acao .rot { font-size: 11px; font-weight: 750; color: #fff; }
.reel-lado .acao.on .i { color: #ffc81a; }
.reels-carregando, .reels-vazio { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: rgba(255,255,255,.85); }
.reels-vazio .i { width: 46px; height: 46px; color: var(--accent); }
.reels-vazio strong { font-size: 18px; color: #fff; }
.reels-vazio span { max-width: 300px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .reels { animation: none; } }

/* Tipo da publicação no formulário (Texto · Foto · Vídeo · Enquete · Perguntas) */
.pub-tipos { display: flex; gap: 4px; margin: 2px 0 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.pub-tipo { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 6px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.pub-tipo span { overflow: hidden; text-overflow: ellipsis; }
.pub-tipo .i { width: 17px; height: 17px; flex: none; }
.pub-tipo.ativo { background: var(--accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.pub-tipo[hidden] { display: none; }
@media (max-width: 480px) { .pub-tipo { flex-direction: column; gap: 3px; min-height: 50px; font-size: 11.5px; padding: 4px 2px; } }
.pub-tipo-dica { margin: 0 2px 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.pub-ajustes { display: grid; gap: 10px; padding: 4px 16px 18px; }
.pub-ajustes .pa-sec > strong { font-size: 14.5px; }
.pub-regras { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; display: grid; gap: 2px; }
.pub-previa.casada-previa { display: block; position: relative; }
.pub-previa.casada-previa > .icone-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; }
.pub-casada-trocar { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 0; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.sem-notas .estrelas-txt { display: none; }

/* Texto com imagem casada (blocoCasado em rede.js): um modelo só para todos os textos com imagem.
   A imagem ocupa o topo do cartão e se funde com o fundo; o texto entra por cima da emenda, grande, com aspas
   e a barra na cor do site. */
.casada { position: relative; margin: 0 12px 10px; border-radius: 18px; box-shadow: inset 3px 0 0 var(--accent); overflow: hidden; background: var(--panel-2, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); isolation: isolate; }
.casada-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.casada-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.casada-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--panel-2, var(--panel)) 70%, transparent) 78%, var(--panel-2, var(--panel)) 100%); }
.casada-texto { position: relative; z-index: 1; margin: -38px 0 0; padding: 0 20px 20px 22px; font-size: 19px; line-height: 1.42; font-weight: 650; letter-spacing: -.005em; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.casada-texto::before { content: "\201C"; display: block; height: 30px; margin-bottom: 2px; font: 800 52px/1 Georgia, "Times New Roman", serif; color: var(--accent); }
.casada-texto.menor { font-size: 16px; }
.casada-texto a { color: var(--accent); font-weight: 750; }
.casada-texto.curto { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 700px) { .casada-texto { font-size: 21px; } .casada-texto.menor { font-size: 17px; } }
.ti-corpo .casada { margin: 4px 0 2px; }
.ti-corpo .casada-texto { font-size: 16px; padding: 0 16px 14px 18px; margin-top: -30px; }
/* Explorar: texto com imagem casada = a imagem atrás, escurecida embaixo, e o começo do texto por cima */
.exp-tile.casada-tile { position: relative; justify-content: flex-end; }
.exp-tile.casada-tile .exp-casada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.exp-tile.casada-tile::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.15) 70%); }
.exp-tile.casada-tile > p, .exp-tile.casada-tile > span { position: relative; z-index: 1; }

/* ---------- destaques do Flash (perfil) e arquivo ---------- */
.pf-destaques { display: flex; gap: 14px; overflow-x: auto; padding: 14px 2px 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.pf-destaques::-webkit-scrollbar { display: none; }
.pf-destaques[hidden] { display: none; }
.pf-dq { flex: none; width: 70px; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; scroll-snap-align: start; -webkit-touch-callout: none; user-select: none; }
.pf-dq-capa { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line); }
.pf-dq-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-dq-capa .i { width: 24px; height: 24px; }
.pf-dq-nome { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.pf-dq.novo .pf-dq-capa { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.pf-dq.arquivo .pf-dq-capa { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.pf-dq:active .pf-dq-capa { transform: scale(.94); }
.pf-dq.on .pf-dq-capa { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.pf-dq.on .pf-dq-nome { color: var(--accent); }
.pf-dq-capa.grande { width: 96px; height: 96px; box-shadow: none; }
.dq-fila { display: flex; gap: 14px; overflow-x: auto; padding: 14px 16px 8px; scrollbar-width: none; }
.dq-fila::-webkit-scrollbar { display: none; }
.dq-form { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.dq-form[hidden] { display: none; }
.dq-form .pf-dq-capa.grande { width: 52px; height: 52px; flex: none; }
.dq-form-col { flex-direction: column; padding: 18px 16px 6px; }
.dq-form-col .pf-dq-capa.grande { width: 96px; height: 96px; }
.dq-campo { flex: 1; min-width: 0; width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 15px; font-weight: 650; text-align: center; box-sizing: border-box; }
.dq-form:not(.dq-form-col) .dq-campo { text-align: left; }
.dq-nota { margin: 6px 16px 10px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.dq-sec { margin: 10px 16px 6px; font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dq-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 0 2px; }
.dq-tile { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border: 0; padding: 0; background: var(--panel-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; font: inherit; }
.dq-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dq-data { position: absolute; left: 6px; top: 6px; padding: 3px 7px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 800; }
.dq-ar { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #ffd60a, #ff8a00); color: #1a1205; font-size: 10.5px; font-weight: 850; }
.dq-marca { position: absolute; right: 7px; top: 7px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 850; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.dq-tile.on .dq-marca { background: var(--accent); border-color: var(--accent); }
.dq-tile.on img { opacity: .78; }
.dq-tile.capa { box-shadow: inset 0 0 0 3px var(--accent); }
.dq-bt-capa { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 28px; border: 0; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.dq-tile.capa .dq-bt-capa { background: var(--accent); }
.dq-bt-tirar { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.dq-mais, .dq-ok, .dq-apagar, .dq-grade + .btn { display: block; width: calc(100% - 32px); margin: 12px 16px 0; }
.dq-apagar { margin-bottom: 16px; }
.dq-mais[hidden], .dq-ok[hidden] { display: none; }
/* no visor: Visualizações + Destacar lado a lado (só no seu flash) */
.story-meu-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.story-destacar { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: #fff; font: inherit; font-size: 11.5px; font-weight: 750; cursor: pointer; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.story-destacar .i { width: 24px; height: 24px; }
/* ---------- criador do Flash: pincel, emoji e fundo do texto ---------- */
.flash-desenho { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.flash-palco.modo-texto .flash-desenho { display: none; }
.flash-pincel { position: absolute; inset: 0; z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; animation: contEntra .15s ease-out; }
.flash-pincel .fp-area { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.flash-pincel > .fe-cab, .flash-pincel > .fe-regua, .flash-pincel > .fe-cores { position: relative; z-index: 1; transition: opacity .15s; }
.flash-pincel > .fe-regua { position: absolute; }
.flash-pincel > .fe-cores { grid-row: 3; padding-bottom: 14px; }
.flash-pincel.desenhando > .fe-cab, .flash-pincel.desenhando > .fe-regua, .flash-pincel.desenhando > .fe-cores { opacity: 0; pointer-events: none; }
.fp-modos { display: flex; gap: 6px; }
.fp-modo.on { background: #fff; color: #111; }
.fp-amostra { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); box-sizing: border-box; pointer-events: none; }
.flash-palco.pincel-aberto .flash-topo, .flash-palco.pincel-aberto .flash-legenda { opacity: 0; pointer-events: none; }
.flash-ferr-btn:disabled { opacity: .4; cursor: default; }
.fig-emojis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 340px; max-height: 100%; overflow-y: auto; }
.fig-emojis button { aspect-ratio: 1; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 28px; line-height: 1; cursor: pointer; }
.fig-emojis button:active { transform: scale(.9); background: rgba(255,255,255,.2); }
.flash-ferr-btn.destaque.vidro b { background: rgba(8,12,16,.55); border-color: rgba(255,255,255,.7); }

/* ===== Flash: enquete e caixa de perguntas com bordas à vista e cores (tema-*) ===== */
.enquete.escura .enq-op { background: #f6f8fa; border: 1.5px solid #c3ccd4; }
.enquete.escura .enq-op:hover { border-color: #93a1ad; }
.enquete.escura.resultado .enq-op { border: 1.5px solid #d5dce2; }
.caixa-perg.escura .cx-form { border: 1.5px solid #c3ccd4; background: #f6f8fa; }
.caixa-perg.escura .cx-ver { border: 1.5px solid #c3ccd4; }
.fe-enq span { border: 1.5px solid #c3ccd4; background: #f6f8fa; }
/* a prévia da caixa no criador fica igual ao que quem vê enxerga (branca, título rosa) */
.fe-cx { background: rgba(255,255,255,.97); color: #111; }
.fe-cx .fe-cx-cab { color: #ff3d7f; opacity: 1; }
.fe-cx .fe-cx-campo { background: #f6f8fa !important; border: 1.5px solid #c3ccd4; }
.tema-escuro { --tf-bg: #151b21; --tf-tx: #fff; --tf-op: rgba(255,255,255,.07); --tf-borda: rgba(255,255,255,.34); --tf-sub: rgba(255,255,255,.72); --tf-bar: rgba(0,173,238,.38); }
.tema-azul { --tf-bg: linear-gradient(150deg, #19b8f2, #0052d4); --tf-tx: #fff; --tf-op: rgba(255,255,255,.14); --tf-borda: rgba(255,255,255,.62); --tf-sub: rgba(255,255,255,.86); --tf-bar: rgba(255,255,255,.3); }
.tema-rosa { --tf-bg: linear-gradient(150deg, #ff5f95, #c2185b); --tf-tx: #fff; --tf-op: rgba(255,255,255,.14); --tf-borda: rgba(255,255,255,.62); --tf-sub: rgba(255,255,255,.86); --tf-bar: rgba(255,255,255,.3); }
.tema-laranja { --tf-bg: linear-gradient(150deg, #ffb347, #ff6a00); --tf-tx: #fff; --tf-op: rgba(255,255,255,.16); --tf-borda: rgba(255,255,255,.66); --tf-sub: rgba(255,255,255,.9); --tf-bar: rgba(255,255,255,.32); }
.tema-verde { --tf-bg: linear-gradient(150deg, #34d399, #0f8a5f); --tf-tx: #fff; --tf-op: rgba(255,255,255,.14); --tf-borda: rgba(255,255,255,.62); --tf-sub: rgba(255,255,255,.88); --tf-bar: rgba(255,255,255,.3); }
.tema-roxo { --tf-bg: linear-gradient(150deg, #a855f7, #5b21b6); --tf-tx: #fff; --tf-op: rgba(255,255,255,.14); --tf-borda: rgba(255,255,255,.6); --tf-sub: rgba(255,255,255,.86); --tf-bar: rgba(255,255,255,.3); }
.enquete.escura[class*="tema-"], .caixa-perg.escura[class*="tema-"], .fe-enq[class*="tema-"] { background: var(--tf-bg); color: var(--tf-tx); }
:is(.enquete.escura, .caixa-perg.escura, .fe-enq)[class*="tema-"] :is(.enq-perg, .cx-perg, strong, .enq-tit, .cx-tit, .fe-cx-cab) { color: var(--tf-tx); }
.enquete.escura[class*="tema-"] .enq-op, .fe-enq[class*="tema-"] > span { background: var(--tf-op); border: 1.5px solid var(--tf-borda); color: var(--tf-tx); }
.enquete.escura[class*="tema-"] .enq-op.minha { border-color: var(--tf-tx); border-width: 2px; }
.enquete.escura[class*="tema-"] .enq-radio { border-color: var(--tf-tx); }
.enquete.escura[class*="tema-"] .enq-barra, .enquete.escura.resultado[class*="tema-"] .enq-barra { background: var(--tf-bar); }
.enquete.escura.resultado[class*="tema-"] .enq-op.lider .enq-barra { background: color-mix(in srgb, var(--tf-tx) 38%, transparent); }
:is(.enquete.escura, .caixa-perg.escura)[class*="tema-"] :is(.enq-rodape, .cx-nota, .fe-enq-dur) { color: var(--tf-sub); }
.fe-enq[class*="tema-"] .fe-enq-dur { color: var(--tf-sub); }
:is(.enquete.escura, .caixa-perg.escura)[class*="tema-"] :is(.enq-prazo, .enq-anon) { background: rgba(255,255,255,.18); color: var(--tf-tx); }
.tema-escuro:is(.enquete, .caixa-perg) :is(.enq-prazo, .enq-anon) { background: rgba(255,255,255,.1); }
.caixa-perg.escura[class*="tema-"] :is(.cx-form, .cx-ver) { background: var(--tf-op); border: 1.5px solid var(--tf-borda); color: var(--tf-tx); }
.caixa-perg.escura[class*="tema-"] .cx-form textarea { color: var(--tf-tx); }
.caixa-perg.escura[class*="tema-"] .cx-form textarea::placeholder { color: var(--tf-sub); }
.caixa-perg.escura[class*="tema-"] .cx-enviar { background: #fff; color: #111; }
.fe-cx[class*="tema-"] .fe-cx-campo { background: var(--tf-op) !important; border-color: var(--tf-borda); color: var(--tf-sub) !important; }
/* seletor de cor (criador) */
.fe-cor-fig { display: flex; align-items: center; gap: 12px; padding: 4px 2px; }
.fe-cor-rot { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.8); }
.fe-cor-bolas { display: flex; flex-wrap: wrap; gap: 10px; }
.fe-cor-bola { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: var(--tf-bg, #fff); cursor: pointer; padding: 0; transition: transform .12s; }
.fe-cor-bola.tema-branco { background: #fff; }
.fe-cor-bola.on { box-shadow: 0 0 0 3px #0b1014, 0 0 0 5px #fff; transform: scale(1.08); }

/* ===== Flash: menções (@) ===== */
.flash-arroba .arr { font: 900 20px/1 system-ui, sans-serif; }
.flash-arroba { position: relative; }
.flash-arroba.on { background: #fff; color: #0b1014; }
.flash-txt.flash-fig.oculta { opacity: .45; outline: 2px dashed rgba(255,255,255,.8); outline-offset: 3px; }
.fe-arroba { position: absolute; left: 8px; right: 8px; bottom: calc(var(--tecl, 0px) + 8px); z-index: 40; display: flex; gap: 8px; overflow-x: auto; padding: 8px; border-radius: 18px; background: rgba(12,16,20,.92); box-shadow: 0 10px 30px rgba(0,0,0,.45); scrollbar-width: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fe-arroba::-webkit-scrollbar { display: none; }
.fa-item { flex: none; display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.1); }
.fa-usar { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 4px; border: 0; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.fa-usar .avatar { width: 34px; height: 34px; font-size: 12px; flex: none; }
.fa-usar .tx { display: grid; line-height: 1.15; }
.fa-usar strong { font-size: 13.5px; }
.fa-usar small { font-size: 11.5px; color: rgba(255,255,255,.65); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-oculta { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.fa-oculta.on { background: #fff; color: #0b1014; }
.fa-vazio { padding: 10px 12px; font-size: 13px; color: rgba(255,255,255,.7); }
.fm-linha { cursor: default; padding: 4px 4px 4px 8px; }
.fm-usar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.fm-usar .avatar { width: 38px; height: 38px; font-size: 13px; flex: none; }
.fm-usar .tx { display: grid; min-width: 0; }
.fm-usar .tx small { color: rgba(255,255,255,.68); font-size: 12px; }
.fm-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; border: 1.5px dashed rgba(255,255,255,.45); border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.fm-vazio { text-align: center; padding: 18px 0; }

/* ===== Flash (visor): figurinhas tocáveis e legenda com @ e # ===== */
.story-quadro > .story-fig-toque, .story-quadro > .story-fig-balao { pointer-events: auto; }
.story-fig-toque { position: absolute; z-index: 3; min-height: 36px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story-fig-toque:focus-visible { outline: 2px solid #fff; }
/* balão das figurinhas: mesmo visual do "Ver publicação", mas sem a classe .story-link (que é do link do negócio) */
.story-fig-balao { position: absolute; z-index: 5; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 6px; max-width: 82%; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.96); color: #111; text-decoration: none; font-weight: 850; font-size: 14.5px; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: balaoSobe .16s ease-out; }
.story-fig-balao::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.story-fig-balao > .i:first-child { flex: none; width: 24px; height: 24px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: linear-gradient(135deg, #00adee, #0052d4); color: #fff; }
.story-fig-balao span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-fig-balao > .i:last-child { flex: none; width: 14px; height: 14px; color: #5d6b75; }
.story-fig-balao[hidden] { display: none; }
.story-legenda a { pointer-events: auto; color: #fff; font-weight: 850; text-decoration: none; }
.flash-texto { overflow-wrap: break-word; word-break: normal; }

/* ===== Respostas da caixa de perguntas (organizadas) ===== */
.cxr-topo { display: grid; gap: 8px; margin: 4px 16px 10px; padding: 16px; border-radius: 18px; background: linear-gradient(150deg, color-mix(in srgb, #ff3d7f 16%, var(--panel-2)), var(--panel-2)); border: 1px solid color-mix(in srgb, #ff3d7f 26%, var(--line)); }
.cxr-topo.anonima { background: linear-gradient(150deg, color-mix(in srgb, #8e2de2 16%, var(--panel-2)), var(--panel-2)); border-color: color-mix(in srgb, #8e2de2 26%, var(--line)); }
.cxr-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; color: #ff3d7f; }
.cxr-topo.anonima .cxr-selo { color: #a46bff; }
.cxr-perg { font-size: 18px; line-height: 1.3; }
.cxr-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.cxr-num { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); font-size: 12.5px; font-weight: 800; }
.cxr-num.novas { background: #ff3d7f; color: #fff; }
.cxr-num.sutil { background: transparent; padding-left: 2px; font-weight: 600; color: var(--muted); }
.cxr-filtros { display: flex; gap: 8px; margin: 0 16px 8px; }
.cxr-filtro { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer; }
.cxr-filtro.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.cxr-busca { display: block; width: calc(100% - 32px); margin: 0 16px 8px; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; box-sizing: border-box; }
.cxr-busca[hidden] { display: none; }
.cxr-dia { margin: 14px 16px 6px; font-size: 12px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cxr-item { display: flex; gap: 10px; padding: 8px 16px; }
.cxr-item .avatar { width: 38px; height: 38px; flex: none; cursor: pointer; }
.cxr-item .avatar.anonimo { display: grid; place-items: center; background: color-mix(in srgb, #8e2de2 22%, var(--panel-2)); color: #a46bff; }
.cxr-corpo { flex: 1; min-width: 0; display: grid; gap: 5px; }
.cxr-quem { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cxr-quem strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxr-quem span { font-size: 12px; color: var(--muted); flex: none; }
.cxr-nova { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #ff3d7f; color: #fff; font-size: 10.5px; font-weight: 850; letter-spacing: .03em; }
.cxr-texto { margin: 0; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--panel-2); border: 1px solid var(--line); font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.cxr-item.nova .cxr-texto { border-color: color-mix(in srgb, #ff3d7f 45%, var(--line)); }
.cxr-acoes { display: flex; flex-wrap: wrap; gap: 4px; }
.cxr-acao { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.cxr-acao:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.cxr-acao.perigo:hover { color: #ff5a5f; }
.cxr-lista .cx-responder { margin-top: 2px; }

/* ===== Flash (02/11, parte 2): tela cheia, fotos por cima, modelos, prévia das cores e menções ===== */
/* Celular: o cartão vai de ponta a ponta (sem a moldura em degradê nem margens), como nos apps de stories. */
@media (max-width: 699px) {
  .flash-caixa { padding: 0; }
  .flash-moldura { padding: 0; border-radius: 0 0 20px 20px; background: none; box-shadow: none; }
  .flash-palco { height: min(calc(100vw * 16 / 9), calc(100dvh - 76px - env(safe-area-inset-bottom))); border-radius: 0 0 20px 20px; box-shadow: none; }
}
/* painel aberto (figurinhas, menções, fotos, enquete...): a coluna de botões e o selo saem de cima */
.flash-palco:has(> .flash-figs, > .flash-edtxt) > :is(.flash-topo, .flash-repost-selo, .flash-legenda) { visibility: hidden; }
/* sem o menu "baixar imagem" ao segurar */
.story-visor img, .flash-criar img, .vv-fita img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* foto por cima */
.flash-txt.flash-ft { padding: 0; max-width: none; background: none; text-shadow: none; line-height: 0; }
.flash-ft img { display: block; width: 100%; height: auto; pointer-events: none; border-radius: 3%; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.flash-ft.ft-1 { padding: 4%; background: #fff; border-radius: 2%; box-shadow: 0 6px 18px rgba(0,0,0,.35); box-sizing: border-box; }
.flash-ft.ft-1 img { box-shadow: none; }
.flash-ft.ft-2 { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35); box-sizing: border-box; }
.flash-ft.ft-2 img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
/* modelos com várias fotos */
.fm-modelos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fm-modelo { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; font: inherit; cursor: pointer; }
.fm-modelo small { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.8); }
.fm-prev { position: relative; width: 36px; height: 64px; border-radius: 6px; background: rgba(255,255,255,.12); }
.fm-prev i { position: absolute; box-sizing: border-box; border: 1.5px solid #0b1014; border-radius: 4px; background: linear-gradient(150deg, #00adee, #8e2de2); }
/* cor da enquete/perguntas: rótulo em cima e bolinhas numa fileira só; prévia ao vivo */
.fe-cor-fig { display: grid; gap: 8px; }
.fe-cor-bolas { flex-wrap: nowrap; overflow-x: auto; gap: 11px; padding: 8px 9px 9px; margin: -4px -5px -3px; scrollbar-width: none; } /* espaço para o anel da escolhida (antes saía cortado) */
.fe-cor-bolas::-webkit-scrollbar { display: none; }
.fe-cor-bola { flex: none; width: 34px; height: 34px; }
.fe-previa { display: flex; justify-content: center; padding: 6px 0 2px; font-size: 13px; pointer-events: none; }
.fe-previa .fe-enq { width: min(86%, 300px); }
/* menção: na tela | só na lista | oculta */
.fm-bloco { display: grid; gap: 6px; padding-bottom: 6px; }
.fm-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.08); }
.fm-seg-op { min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.75); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.fm-seg-op.on { background: #fff; color: #0b1014; }

/* ===== Flash (02/11, parte 3) ===== */
/* aviso (toast) no criador e no visor: pílula escura, centrada, sem cobrir os botões da coluna */
body:has(.flash-criar) .toast { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); }
body:has(.story-visor, .flash-criar) .toast { width: max-content; max-width: min(calc(100% - 40px), 400px); padding: 11px 18px; border-radius: 18px; background: rgba(14,19,24,.94); color: #fff; font-size: 13.5px; line-height: 1.3; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); }
/* temporizador com relógio + número */
.flash-ferr-btn.tempo { position: relative; }
.flash-ferr-btn.tempo .tempo-n { position: absolute; right: -2px; bottom: -2px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: #ffd60a; color: #1a1205; font-size: 11px; font-weight: 900; display: grid; place-items: center; box-sizing: border-box; }
.flash-ferr-btn.tempo .tempo-n:empty { display: none; }
/* "Também em N negócios" numa linha, tocável; lista dos negócios */
.story-onde { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border: 0; font: inherit; cursor: pointer; white-space: nowrap; overflow: hidden; }
.story-onde span { overflow: hidden; text-overflow: ellipsis; }
.linha-neg-flash { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.linha-neg-flash .avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.linha-neg-flash .tx { flex: 1; min-width: 0; display: grid; }
.linha-neg-flash small { color: var(--muted); }
/* Visualizações: barra do flash, abas, enquete e respostas */
.vv-barra { display: flex; align-items: center; gap: 8px; padding: 6px 16px 8px; border-bottom: 1px solid var(--line); }
.vv-barra .esp { flex: 1; }
.vv-barra-n { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.vv-barra-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); cursor: pointer; }
.vv-barra-btn.perigo:hover { color: #ff5a5f; }
.vv-abas { display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid var(--line); }
.vv-abas[hidden] { display: none; }
.vv-aba { flex: 1; min-height: 40px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.vv-aba.on { color: var(--text); border-bottom-color: var(--text); }
.vv-enq-topo { display: grid; gap: 4px; margin: 12px 16px; padding: 14px 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.vv-enq-topo[class*="tema-"] { background: var(--tf-bg); color: var(--tf-tx); border: 0; }
.vv-enq-topo small { font-size: 11px; font-weight: 900; letter-spacing: .06em; opacity: .8; }
.vv-enq-topo strong { font-size: 17px; }
.vv-enq-topo span { font-size: 13px; opacity: .8; }
.vv-enq { display: grid; gap: 10px; padding: 0 16px 8px; }
.vv-enq-op { display: grid; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); }
.vv-enq-op.lider { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.vv-enq-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.vv-enq-cab span { color: var(--muted); font-weight: 800; white-space: nowrap; }
.vv-enq-barra { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.vv-enq-barra i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.vv-enq-pessoa { display: flex; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.vv-enq-pessoa .avatar { width: 32px; height: 32px; font-size: 11px; flex: none; }
.vv-enq-pessoa span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.vv-enq-pessoa small { color: var(--muted); }
.vv-resp-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px 8px; }
.vv-resp { display: grid; align-content: start; gap: 6px; min-height: 120px; padding: 12px; border: 0; border-radius: 16px; background: #fff; color: #111; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.vv-resp[class*="tema-"] { background: var(--tf-bg); color: var(--tf-tx); }
.vv-resp-p { font-size: 11px; font-weight: 800; opacity: .7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vv-resp p { margin: 0; font-size: 15px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.vv-resp-quem { font-size: 11.5px; opacity: .7; }
.vv-resp-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
/* folha do lugar / hashtag do flash */
.lg-mapa { position: relative; height: 170px; margin: 4px 16px 0; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #1b2a35, #24384a); }
.lg-meio { position: absolute; left: 50%; top: 50%; }
.lg-meio img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-drag: none; }
.lg-pino { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -38px 0 0 -19px; display: grid; place-items: center; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: #e5484d; box-shadow: 0 6px 14px rgba(0,0,0,.35); color: #fff; }
.lg-pino .i { transform: rotate(45deg); width: 19px; height: 19px; }
.lg-cred { position: absolute; right: 6px; bottom: 4px; font-size: 9px; color: #333; background: rgba(255,255,255,.7); padding: 1px 4px; border-radius: 4px; }
.lg-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.lg-ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #7c5cff, #00adee); color: #fff; }
.lg-ic.hashtag { background: linear-gradient(135deg, #ff3d7f, #ff8a00); }
.lg-tx { display: grid; min-width: 0; }
.lg-tx strong { font-size: 18px; }
.lg-tx small { color: var(--muted); }
.lg-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding: 6px 16px 4px; }
.lg-acoes .btn { text-align: center; text-decoration: none; }
.lg-sec { margin: 14px 16px 6px; font-weight: 850; }
.lg-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 0 0 10px; }
.lg-grade .lista-vazia { grid-column: 1 / -1; }
.lg-cel { position: relative; aspect-ratio: 4 / 5; background: var(--panel-2); overflow: hidden; display: grid; place-items: center; text-decoration: none; color: var(--text); }
.lg-cel img { width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: none; }
.lg-txt { padding: 8px; font-size: 12px; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.fm-total { margin: 4px 2px 0; font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.7); }
.fm-juntar { border-style: solid; background: rgba(0,173,238,.14); border-color: rgba(0,173,238,.5); font-size: 13.5px; }
.vv-barra, .vv-abas, .vv-enq-topo, .vv-resp-grade, .vv-enq { flex: none; }
.vv-barra { min-height: 58px; box-sizing: border-box; }
.vv-barra-btn { flex: none; }

/* ===== Flash: figurinhas no padrão do Instagram (02/11, parte 4) =====
   Enquete e caixa de perguntas: cartão branco, faixa colorida em cima com a pergunta, opções em pílulas, resultado
   enchendo com animação. A cor escolhida pinta a faixa (Escuro deixa o cartão escuro). Vale no visor (.story-enq) e na
   prévia do criador (.fe-enq); o Diário continua com o bloco dele. */
.story-enq .enquete.escura, .story-enq .caixa-perg.escura,
.flash-palco .fe-enq, .fe-previa .fe-enq { --band: linear-gradient(135deg, #00c2ff, #0066d6); --band-sol: #00adee; }
.story-enq :is(.enquete, .caixa-perg).escura.tema-escuro, .flash-palco .fe-enq.tema-escuro, .fe-previa .fe-enq.tema-escuro { --band: linear-gradient(135deg, #2a3540, #151b21); --band-sol: #00adee; }
.story-enq :is(.enquete, .caixa-perg).escura.tema-azul, .flash-palco .fe-enq.tema-azul, .fe-previa .fe-enq.tema-azul { --band: linear-gradient(135deg, #19b8f2, #0052d4); --band-sol: #0a84e0; }
.story-enq :is(.enquete, .caixa-perg).escura.tema-rosa, .flash-palco .fe-enq.tema-rosa, .fe-previa .fe-enq.tema-rosa { --band: linear-gradient(135deg, #ff5f95, #c2185b); --band-sol: #e83e7a; }
.story-enq :is(.enquete, .caixa-perg).escura.tema-laranja, .flash-palco .fe-enq.tema-laranja, .fe-previa .fe-enq.tema-laranja { --band: linear-gradient(135deg, #ffb347, #ff6a00); --band-sol: #ff7a1a; }
.story-enq :is(.enquete, .caixa-perg).escura.tema-verde, .flash-palco .fe-enq.tema-verde, .fe-previa .fe-enq.tema-verde { --band: linear-gradient(135deg, #34d399, #0f8a5f); --band-sol: #19a874; }
.story-enq :is(.enquete, .caixa-perg).escura.tema-roxo, .flash-palco .fe-enq.tema-roxo, .fe-previa .fe-enq.tema-roxo { --band: linear-gradient(135deg, #a855f7, #5b21b6); --band-sol: #8b3ff0; }
/* cartão */
.story-enq :is(.enquete, .caixa-perg).escura,
.story-enq :is(.enquete, .caixa-perg).escura[class*="tema-"] { display: flex; flex-direction: column; gap: 0; padding: 0 0 14px; overflow: hidden; border: 0; border-radius: 22px; background: #fff; color: #111; box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04); }
.story-enq :is(.enquete, .caixa-perg).escura.tema-escuro { background: #151b21; color: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
/* faixa com a pergunta */
.story-enq .enquete.escura .enq-perg, .story-enq .caixa-perg.escura .cx-perg,
.story-enq [class*="tema-"] :is(.enq-perg, .cx-perg) { order: -1; margin: 0; padding: 20px 18px 18px; background: var(--band); color: #fff; text-align: center; font-size: 19px; font-weight: 850; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.18); overflow-wrap: anywhere; }
/* linha pequena (ENQUETE · prazo / PERGUNTAS · anônima) */
.story-enq .enquete.escura .enq-cab, .story-enq .caixa-perg.escura .cx-cab { padding: 10px 14px 0; justify-content: center; gap: 8px; }
.story-enq :is(.enquete, .caixa-perg).escura :is(.enq-tit, .cx-tit) { color: var(--band-sol); font-size: 11px; letter-spacing: .08em; }
.story-enq :is(.enquete, .caixa-perg).escura :is(.enq-prazo, .enq-anon) { background: color-mix(in srgb, var(--band-sol) 12%, transparent); color: var(--band-sol); font-size: 11px; }
.story-enq .tema-escuro :is(.enq-tit, .cx-tit, .enq-prazo, .enq-anon) { color: #7fd8ff; }
/* opções em pílulas */
.story-enq .enquete.escura .enq-opcoes { padding: 10px 14px 0; gap: 8px; }
.story-enq .enquete.escura .enq-op, .story-enq .enquete.escura[class*="tema-"] .enq-op { min-height: 50px; border-radius: 16px; border: 1.5px solid #dfe5ea; background: #fff; color: #111; font-size: 15.5px; font-weight: 800; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.story-enq .enquete.escura .enq-op:active { transform: scale(.98); }
.story-enq .enquete.escura.tema-escuro .enq-op { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color: #fff; }
.story-enq .enquete.escura .enq-op.minha { border-color: var(--band-sol); }
.story-enq .enquete.escura .enq-radio { border-color: #b9c3cb; }
.story-enq .enquete.escura .enq-op.minha .i { color: var(--band-sol); }
/* resultado: a barra enche com animação na cor da enquete */
.story-enq .enquete.escura .enq-barra, .story-enq .enquete.escura.resultado .enq-barra, .story-enq .enquete.escura[class*="tema-"] .enq-barra { background: var(--band); opacity: .2; border-radius: 14px; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.story-enq .enquete.escura .enq-op.lider .enq-barra, .story-enq .enquete.escura.resultado .enq-op.lider .enq-barra { opacity: .34; }
.story-enq .enquete.escura .enq-pct { font-weight: 900; color: var(--band-sol); }
.story-enq .enquete.escura.tema-escuro .enq-pct { color: #7fd8ff; }
.story-enq .enquete.escura .enq-rodape { padding: 10px 14px 0; justify-content: center; text-align: center; font-size: 12.5px; color: #66737d; }
.story-enq .enquete.escura.tema-escuro .enq-rodape { color: rgba(255,255,255,.65); }
/* caixa de perguntas: campo cinza claro e botão redondo na cor */
.story-enq .caixa-perg.escura .cx-form, .story-enq .caixa-perg.escura[class*="tema-"] .cx-form { margin: 12px 14px 0; padding: 6px 6px 6px 16px; border: 0; border-radius: 16px; background: #f1f4f6; color: #111; }
.story-enq .caixa-perg.escura.tema-escuro .cx-form { background: rgba(255,255,255,.08); color: #fff; }
.story-enq .caixa-perg.escura .cx-form textarea { color: inherit; font-size: 15px; }
.story-enq .caixa-perg.escura .cx-form textarea::placeholder { color: #8a959e; }
.story-enq .caixa-perg.escura .cx-enviar, .story-enq .caixa-perg.escura[class*="tema-"] .cx-enviar { background: var(--band); color: #fff; }
.story-enq .caixa-perg.escura .cx-ver, .story-enq .caixa-perg.escura[class*="tema-"] .cx-ver { margin: 12px 14px 0; border: 0; border-radius: 16px; background: #f1f4f6; color: #111; }
.story-enq .caixa-perg.escura.tema-escuro .cx-ver { background: rgba(255,255,255,.08); color: #fff; }
.story-enq .caixa-perg.escura .cx-nota { padding: 8px 14px 0; text-align: center; color: #66737d; font-size: 12px; }
.story-enq .caixa-perg.escura.tema-escuro .cx-nota { color: rgba(255,255,255,.6); }
/* prévia no criador e no editor: o mesmo desenho */
.flash-palco .fe-enq, .fe-previa .fe-enq,
.flash-palco .fe-enq[class*="tema-"], .fe-previa .fe-enq[class*="tema-"] { display: flex; flex-direction: column; gap: .5em; padding: 0 0 .9em; overflow: hidden; border-radius: 1.15em; background: #fff; color: #111; box-shadow: 0 .8em 2em rgba(0,0,0,.35); }
:is(.flash-palco, .fe-previa) .fe-enq.tema-escuro { background: #151b21; color: #fff; }
:is(.flash-palco, .fe-previa) .fe-enq > strong, :is(.flash-palco, .fe-previa) .fe-enq[class*="tema-"] > strong { order: -1; padding: 1em .9em .9em; background: var(--band); color: #fff; text-align: center; font-size: 1.15em; font-weight: 850; line-height: 1.25; }
:is(.flash-palco, .fe-previa) .fe-enq > span:not(.fe-cx-campo), :is(.flash-palco, .fe-previa) .fe-enq[class*="tema-"] > span:not(.fe-cx-campo) { margin: 0 .8em; padding: .7em .9em; border: 1.5px solid #dfe5ea; border-radius: .9em; background: #fff; color: #111; font-weight: 800; }
:is(.flash-palco, .fe-previa) .fe-enq.tema-escuro > span:not(.fe-cx-campo) { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color: #fff; }
:is(.flash-palco, .fe-previa) .fe-enq .fe-enq-dur { margin: 0 .8em; text-align: center; color: #66737d; }
:is(.flash-palco, .fe-previa) .fe-cx .fe-cx-cab { align-self: center; color: var(--band-sol); margin-top: .1em; }
:is(.flash-palco, .fe-previa) .fe-cx .fe-cx-campo, :is(.flash-palco, .fe-previa) .fe-cx[class*="tema-"] .fe-cx-campo { margin: 0 .8em; padding: .75em 1em; border: 0 !important; border-radius: .9em; background: #f1f4f6 !important; color: #8a959e !important; font-weight: 600; }
:is(.flash-palco, .fe-previa) .fe-cx.tema-escuro .fe-cx-campo { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.6) !important; }
.flash-fig .fig-grad { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 900; }
.story-enq .enquete.escura.resultado .enq-op.lider .enq-barra, .story-enq .enquete.escura.resultado[class*="tema-"] .enq-op.lider .enq-barra { background: var(--band); opacity: .34; }
.story-enq .caixa-perg.escura .cx-ver strong { color: inherit; }
.story-enq .enquete.escura.resultado .enq-op.lider .enq-pct, .story-enq .enquete.escura .enq-ver { color: var(--band-sol); }
.story-enq .enquete.escura.tema-escuro.resultado .enq-op.lider .enq-pct, .story-enq .enquete.escura.tema-escuro .enq-ver { color: #7fd8ff; }
.flash-ft.ft-3 img { border-radius: 0; box-shadow: none; }
/* criador: desfazer e rascunhos */
.flash-desfazer[hidden] { display: none; }
.flash-rasc { position: absolute; left: 50%; top: 74px; z-index: 5; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: 13px; font-weight: 800; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; }
.flash-rasc[hidden] { display: none; }
.rasc-nota { margin: 4px 16px 10px; color: var(--muted); font-size: 13px; }
.rasc-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 16px 16px; }
.rasc-cel { position: relative; }
.rasc-abrir { position: relative; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--panel-2); color: #fff; cursor: pointer; display: grid; place-items: center; }
.rasc-abrir img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: none; }
.rasc-txt { padding: 8px; font-size: 12px; font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.rasc-quando { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.55); font-size: 11px; font-weight: 700; }
.rasc-apagar { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
/* atalho "Salvar rascunho" no criador do Flash (02/11) */
.flash-salvar-rasc[hidden] { display: none; }
.flash-salvar-rasc.salvo { background: #22b573 !important; color: #fff; }

/* ===== Flash: enquete e caixa de perguntas editadas na própria figurinha (02/11) =====
   O cartão fica no meio da parte que o teclado deixa à vista (.flash-criar.teclado põe o bottom em --tecl);
   pergunta na faixa colorida, opções nas pílulas, botão colorido em cima troca a cor. */
.flash-palco .flash-fig-viva { grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(0,0,0,.55); }
.flash-fig-viva .fv-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 12px 4px; }
.flash-fig-viva .fv-topo .fe-pronto { justify-self: end; }
.flash-fig-viva .fv-cor { width: 38px; height: 38px; border-radius: 50%; padding: 0; cursor: pointer; border: 2.5px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35);
  background: conic-gradient(#ff3d7f, #ff8a00, #ffd400, #22b573, #00adee, #8e2de2, #ff3d7f); }
.flash-fig-viva .fv-cor:active { transform: scale(.92); }
.flash-fig-viva .fv-meio { display: flex; align-items: center; justify-content: center; padding: 8px 18px; overflow-y: auto; min-height: 0; }
.flash-palco .flash-fig-viva .fv-card { display: flex; flex-direction: column; gap: 0; width: min(100%, 330px); margin: auto 0; padding: 0 0 14px; overflow: hidden; border: 0; border-radius: 22px;
  background: #fff; color: #111; font-size: 15px; box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: contEntra .15s ease-out; }
.flash-palco .flash-fig-viva .fv-card.tema-escuro { background: #151b21; color: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1); }
.flash-fig-viva .fv-faixa { background: var(--band); padding: 16px 16px 14px; transition: background .2s; }
.flash-fig-viva .fv-perg { display: block; width: 100%; box-sizing: border-box; resize: none; overflow: hidden; border: 0; outline: 0; padding: 0; margin: 0; background: none;
  color: #fff; caret-color: #fff; font: inherit; font-size: 20px; font-weight: 850; line-height: 1.25; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.flash-fig-viva .fv-perg::placeholder { color: rgba(255,255,255,.72); }
.flash-fig-viva .fv-corpo { display: grid; gap: 8px; padding: 12px 14px 0; }
.flash-fig-viva .fv-op { position: relative; }
.flash-fig-viva .fv-op input, .flash-fig-viva .fv-nova { width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px; border-radius: 16px; border: 1.5px solid #dfe5ea; background: #fff;
  color: #111; font: inherit; font-size: 15.5px; font-weight: 800; outline: 0; }
.flash-fig-viva .fv-op input:focus { border-color: var(--band-sol); box-shadow: 0 0 0 3px color-mix(in srgb, var(--band-sol) 18%, transparent); }
.flash-fig-viva .fv-op input::placeholder { color: #a3adb5; }
.flash-fig-viva .fv-op:has(.fv-op-x) input { padding-right: 42px; }
.flash-fig-viva .fv-op-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #eef1f4; color: #55616b; cursor: pointer; padding: 0; }
.flash-fig-viva .fv-nova { border-style: dashed; border-color: #c9d1d8; background: transparent; font-weight: 700; }
.flash-fig-viva .fv-nova::placeholder { color: #9aa5ae; }
.flash-fig-viva .fv-campo { padding: 14px 16px; border-radius: 16px; background: #f1f4f6; color: #8a959e; font-weight: 650; text-align: center; }
.flash-palco .flash-fig-viva .fv-card.tema-escuro :is(.fv-op input, .fv-nova) { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; }
.flash-palco .flash-fig-viva .fv-card.tema-escuro .fv-nova { background: transparent; }
.flash-palco .flash-fig-viva .fv-card.tema-escuro .fv-campo { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.flash-palco .flash-fig-viva .fv-card.tema-escuro .fv-op-x { background: rgba(255,255,255,.12); color: #fff; }
.flash-fig-viva .fv-extras { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px 12px; }
.flash-fig-viva .fv-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.flash-fig-viva .fv-chip.on { background: #fff; color: #111; border-color: #fff; }
.flash-fig-viva .fv-dica { width: 100%; text-align: center; font-size: 12px; color: rgba(255,255,255,.75); }
@media (max-height: 560px) { .flash-fig-viva .fv-dica { display: none; } .flash-fig-viva .fv-perg { font-size: 18px; } .flash-fig-viva .fv-op input, .flash-fig-viva .fv-nova { height: 42px; } }

/* ===== Flash: desfazer e refazer (02/11) =====
   Barra no alto do cartão (embaixo da fileira de botões): ↶ · o que aconteceu · ↷. O nome do passo aparece por 2,6 s
   depois de desfazer/refazer ou apagar; some enquanto arrasta e com um painel aberto. */
.flash-hist { position: absolute; left: 50%; top: 64px; z-index: 5; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 3px; border-radius: 999px;
  background: rgba(12,16,20,.62); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 6px 18px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; transition: opacity .15s, transform .15s; max-width: calc(100% - 120px); }
.flash-hist[hidden] { display: none; }
.flash-hist .fh-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; padding: 0; }
.flash-hist .fh-btn:not(:disabled):active { background: rgba(255,255,255,.16); transform: scale(.92); }
.flash-hist .fh-btn:disabled { opacity: .35; cursor: default; }
.flash-hist .fh-refazer svg { transform: scaleX(-1); }
.flash-hist .fh-rot { max-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 750; opacity: 0; transition: max-width .25s ease, opacity .2s, padding .25s; }
.flash-hist.com-rot .fh-rot { max-width: 220px; opacity: 1; padding: 0 6px; }
.flash-hist.pisca { border-color: rgba(0,173,238,.7); }
.flash-hist.acabou-apagar { border-color: rgba(255,90,90,.7); }
.flash-palco.arrastando-txt .flash-hist, .flash-palco:has(.flash-figs, .flash-edtxt, .flash-pincel, .fe-arroba) .flash-hist { opacity: 0; pointer-events: none; }
@media (hover: hover) { .flash-hist .fh-btn:not(:disabled):hover { background: rgba(255,255,255,.12); } }
/* limitador de fotos: "Escolha até N fotos" (quando a pessoa marca mais do que cabe no seletor do celular) */
.fe-escolha { grid-template-rows: auto auto minmax(0, 1fr); }
.fe-escolha .fe-cab { gap: 10px; }
.fe-esc-tit { flex: 1; min-width: 0; display: grid; line-height: 1.2; color: #fff; }
.fe-esc-tit strong { font-size: 16px; }
.fe-esc-tit small { font-size: 12.5px; color: rgba(255,255,255,.7); font-weight: 700; }
.fe-escolha .fe-pronto:disabled { opacity: .45; }
.fe-esc-aviso { margin: 0 16px 8px; font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.35; }
.fe-esc-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 0 12px 14px; overflow-y: auto; align-content: start; }
.fe-esc-cel { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #1b232a; cursor: pointer; }
.fe-esc-cel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s, opacity .15s; }
.fe-esc-cel.on img { transform: scale(.9); border-radius: 6px; }
.fe-esc-cel.on { outline: 2.5px solid #00adee; outline-offset: -2.5px; }
.fe-esc-cel.cheio img { opacity: .4; }
.fe-esc-n { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.3); color: #fff; font-size: 12.5px; font-weight: 850; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.fe-esc-cel.on .fe-esc-n { background: #00adee; border-color: #00adee; }

/* ===== Flash (02/11): topo organizado, nome clicável e caixa de perguntas em foco ===== */
.story-topo { gap: 2px; }
.story-quem { gap: 10px; }
.story-quem-tx { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 3px; }
.story-nome { max-width: 100%; }
.story-quem-tx .story-repost { max-width: 100%; margin-top: 0; }
.story-vai-perfil { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story-quem strong.story-vai-perfil:active { opacity: .7; }
.story-quem .avatar.story-vai-perfil:active { transform: scale(.94); }
.story-topo .story-btn { flex: none; }
/* caixa de perguntas: ao tocar para responder, vai para o meio da parte que o teclado deixa à vista */
.story-cx-foco { position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: contEntra .15s ease-out; }
.story-cx-foco > .story-enq.em-foco { position: relative; left: auto !important; top: auto !important; transform: scale(var(--k, 1)); transform-origin: center; flex: none; }
.story-caixa.cx-foco :is(.story-topo, .story-rodape, .story-barras, .story-toque) { opacity: 0; pointer-events: none; }
/* criador: câmera ligando (sem mostrar a tela de escolher antes) */
.flash-palco.abrindo-cam .flash-escolher { visibility: hidden; }
.flash-palco.abrindo-cam::after { content: "Abrindo a câmera…"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); font-size: 13px; font-weight: 750; pointer-events: none; animation: fc-pisca2 1.2s ease-in-out infinite; }
@keyframes fc-pisca2 { 50% { opacity: .45; } }

/* ===== Teste (quiz) no Flash (02/11) — enquete com a resposta certa ===== */
.enquete.teste .enq-letra { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #c9d1d8; font-size: 12.5px; font-weight: 900; color: #5d6b75; background: #fff; }
.enquete.teste .enq-letra .i { width: 14px; height: 14px; }
.enquete.teste .enq-rot { gap: 10px; }
.enquete.teste .enq-op.certa { border-color: #22b573 !important; background: rgba(34,181,115,.1) !important; }
.enquete.teste .enq-op.certa .enq-letra { background: #22b573; border-color: #22b573; color: #fff; }
.enquete.teste .enq-op.errada { border-color: #ef4444 !important; background: rgba(239,68,68,.08) !important; }
.enquete.teste .enq-op.errada .enq-letra { background: #ef4444; border-color: #ef4444; color: #fff; }
.enquete.teste.revelado .enq-op.certa .enq-barra { background: #22b573 !important; opacity: .22 !important; }
.enquete.teste.revelado .enq-op.errada .enq-barra { background: #ef4444 !important; opacity: .18 !important; }
.enquete.teste.escura.tema-escuro .enq-letra { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.enquete.teste.acertou { animation: testeAcertou .6s ease-out; }
.enquete.teste.errou { animation: testeErrou .45s ease-in-out; }
@keyframes testeAcertou { 0% { transform: scale(1); } 35% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(34,181,115,.35), 0 16px 40px rgba(0,0,0,.35); } 100% { transform: scale(1); } }
@keyframes testeErrou { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.story-enq .enquete.teste.escura .enq-tit { color: #22b573; }
/* criador: prévia e editor do teste */
.flash-palco .fe-enq.fe-teste > span { display: flex; align-items: center; gap: .5em; }
.flash-palco .fe-enq.fe-teste > span b { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; border: 1.5px solid #c9d1d8; font-size: .8em; }
.flash-palco .fe-enq.fe-teste > span.certa { border-color: #22b573; }
.flash-palco .fe-enq.fe-teste > span.certa b { background: #22b573; border-color: #22b573; color: #fff; }
.flash-fig-viva .fv-op.com-letra input { padding-left: 52px; }
.flash-fig-viva .fv-letra { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #c9d1d8; background: #fff; color: #5d6b75; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; padding: 0; }
.flash-fig-viva .fv-letra.certa { background: #22b573; border-color: #22b573; color: #fff; }
.flash-fig-viva .fv-letra .i { width: 16px; height: 16px; }
.flash-fig-viva .fv-op.certa input { border-color: #22b573; }
.flash-palco .flash-fig-viva .fv-card.tema-escuro .fv-letra:not(.certa) { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
/* topo do flash: o nome fica fixo na altura da foto; as linhas extras penduradas embaixo */
.story-quem-tx { position: relative; align-self: center; }
.story-quem-sub { position: absolute; left: 0; top: calc(100% + 5px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; }
.story-quem-sub:empty { display: none; }
.story-quem-sub .story-repost { margin: 0; max-width: 100%; }
.enquete.teste :is(.enq-op.certa, .enq-op.errada) .enq-letra .i { color: #fff; stroke: #fff; }

/* ===== Contagem regressiva no Flash (02/11) — cartão no padrão da enquete/perguntas ===== */
.ctg { --band: linear-gradient(135deg, #00c2ff, #0066d6); --band-sol: #00adee; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.4em; background: #fff; color: #111;
  box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04); text-align: center; font-family: inherit; }
.ctg.tema-escuro { --band: linear-gradient(135deg, #2a3540, #151b21); background: #151b21; color: #fff; }
.ctg.tema-azul { --band: linear-gradient(135deg, #19b8f2, #0052d4); --band-sol: #0a84e0; }
.ctg.tema-rosa { --band: linear-gradient(135deg, #ff5f95, #c2185b); --band-sol: #e83e7a; }
.ctg.tema-laranja { --band: linear-gradient(135deg, #ffb347, #ff6a00); --band-sol: #ff7a1a; }
.ctg.tema-verde { --band: linear-gradient(135deg, #34d399, #0f8a5f); --band-sol: #19a874; }
.ctg.tema-roxo { --band: linear-gradient(135deg, #a855f7, #5b21b6); --band-sol: #8b3ff0; }
.ctg-tit { padding: 1.1em 1.1em 1em; background: var(--band); color: #fff; font-size: 1.2em; font-weight: 850; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.18); overflow-wrap: anywhere; }
.ctg-cab { display: inline-flex; align-items: center; justify-content: center; gap: .35em; padding: .8em 1em 0; color: var(--band-sol); font-size: .72em; font-weight: 850; letter-spacing: .08em; }
.ctg.tema-escuro .ctg-cab { color: #7fd8ff; }
.ctg-cab .i { width: 1.1em; height: 1.1em; }
.ctg-num { display: flex; justify-content: center; gap: .45em; padding: .7em .9em .3em; }
.ctg-casa { flex: 1; max-width: 4.2em; display: grid; gap: .1em; padding: .55em .2em .45em; border-radius: .85em; background: #f1f4f6; }
.ctg.tema-escuro .ctg-casa { background: rgba(255,255,255,.08); }
.ctg-casa b { font-size: 1.75em; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ctg-casa small { font-size: .68em; font-weight: 750; color: #6b7780; text-transform: uppercase; letter-spacing: .04em; }
.ctg.tema-escuro .ctg-casa small, .ctg.tema-escuro .ctg-quando { color: rgba(255,255,255,.65); }
.ctg.acabou .ctg-casa { opacity: .45; }
.ctg.acabou .ctg-quando { color: var(--band-sol); font-weight: 850; font-size: .95em; }
.ctg-quando { padding: .45em 1em .2em; font-size: .8em; font-weight: 650; color: #66737d; }
.ctg-acoes { display: grid; gap: .5em; padding: .55em .9em .95em; }
.ctg-acoes:empty { display: none; }
.ctg-lembrar { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 2.8em; padding: 0 1em; border: 0; border-radius: 999px; background: var(--band); color: #fff;
  font: inherit; font-size: .92em; font-weight: 850; cursor: pointer; }
.ctg-lembrar .i { width: 1.15em; height: 1.15em; }
.ctg-lembrar.on { background: transparent; color: var(--band-sol); box-shadow: inset 0 0 0 1.5px var(--band-sol); }
.ctg-lembrar.quem { background: #f1f4f6; color: #111; }
.ctg.tema-escuro .ctg-lembrar.quem { background: rgba(255,255,255,.08); color: #fff; }
.ctg-lembrar:disabled { opacity: .7; cursor: default; }
.ctg-lembrar.falso { pointer-events: none; }
/* no visor (300 px, escalado como a enquete) e no criador */
.story-ct .ctg { font-size: 15px; width: 100%; }
.flash-txt.flash-ct .ctg { width: 18em; }
/* editor da contagem */
.flash-fig-viva .fv-ctg { width: min(100%, 330px); font-size: 15px; animation: contEntra .15s ease-out; }
.flash-fig-viva .fv-ctg .ctg-tit { padding: 14px 16px 12px; }
.ctg-escolher { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 8px; text-align: left; min-width: 0; }
.ctg-campo { display: grid; gap: 4px; min-width: 0; }
.ctg-campo small { font-size: 11px; font-weight: 800; color: #6b7780; text-transform: uppercase; letter-spacing: .05em; padding-left: 4px; }
.ctg-campo input { height: 44px; padding: 0 8px 0 11px; border-radius: 14px; border: 1.5px solid #dfe5ea; background: #fff; color: #111; font: inherit; font-size: 15px; font-weight: 800; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.ctg-campo input::-webkit-calendar-picker-indicator { margin-left: 2px; padding: 0; }
@media (max-width: 380px) { .ctg-campo input { font-size: 14px; } }
.ctg.tema-escuro .ctg-campo input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; }
/* criador: botão do público */
.flash-alvo.on { background: #00adee !important; color: #fff !important; }
.flash-alvo.on .i { color: #fff !important; stroke: #fff; }

/* avisos (toasts) organizados: largura certa, quebra equilibrada, sem palavra solta (02/11/2026) */
.toast { width: max-content; max-width: min(calc(100% - 32px), 440px); box-sizing: border-box; text-align: center; line-height: 1.35; text-wrap: balance; overflow-wrap: break-word; animation: hfToastEntra .22s ease-out; }
@keyframes hfToastEntra { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast, .vt-toast, .cm-toast, .ad-toast { animation: none !important; } }

/* enquete: rodapé numa linha (texto equilibrado à esquerda, "Ver votos" sem quebrar) e "Visto por" alinhado (02/11/2026) */
.enq-rodape { flex-wrap: wrap; row-gap: 6px; }
.enq-rodape .enq-rod-tx { flex: 1 1 140px; min-width: 0; text-wrap: balance; }
.enq-rodape > button, .enq-rodape > a { flex: none; white-space: nowrap; }
.story-enq .enquete.escura .enq-rodape { justify-content: space-between; text-align: left; }
.story-enq .enquete.escura .enq-rodape:not(:has(> button, > a)) { justify-content: center; text-align: center; }
.story-vistos { gap: 0; min-height: 40px; padding: 0 14px 0 12px; line-height: 1; }
.story-vistos > * { flex: none; }
.story-vistos > .i { width: 16px; height: 16px; margin-right: 8px; }
.story-vistos > span:not(.rostos):not(.story-vistos-est) { display: inline-flex; align-items: center; }
.story-vistos .story-vistos-est { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.28); height: 16px; gap: 4px; }
.story-vistos .story-vistos-est .i { width: 14px; height: 14px; }
.story-vistos .rostos { margin-left: 10px; align-items: center; }
.story-vistos .rostos .avatar { width: 24px; height: 24px; }

/* "Você está em dia" no Diário (Principais): depois das novidades de quem você segue, antes das sugestões. */
.feed-em-dia { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 18px 6px; margin: 6px 0 4px; }
.feed-em-dia .fed-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), #0087c2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); margin-bottom: 6px; }
.feed-em-dia .fed-ic svg { width: 28px; height: 28px; }
.feed-em-dia strong { font-size: 17px; color: var(--text); }
.feed-em-dia > span:not(.fed-ic) { color: var(--muted); font-size: 14px; max-width: 32ch; line-height: 1.4; }
.feed-em-dia .fed-link { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 700; font-size: 14px; padding: 8px 10px; cursor: pointer; min-height: 40px; }
.feed-em-dia .fed-sug { justify-self: stretch; text-align: left; font-weight: 800; font-size: 16px; color: var(--text); padding: 18px 4px 4px; border-top: 1px solid var(--line); margin-top: 10px; }

/* ---------- Notificações no celular (Configurações, push.js) ---------- */
.push-topo { display: flex; gap: 14px; align-items: center; padding: 4px 2px 16px; }
.push-topo strong { display: block; font-size: 16px; font-weight: 800; color: var(--text); }
.push-topo span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.push-ic { width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #00adee, #0077b6); box-shadow: 0 10px 24px rgba(0, 173, 238, .3); }
.push-ic .i { width: 26px; height: 26px; }
#folhaPush .end-aviso { margin-bottom: 12px; }
#folhaPush .cfg-item { width: 100%; border-radius: 14px; }
.push-este { background: var(--panel-2); margin-bottom: 6px; }
.push-h { margin: 18px 4px 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
#pushCats.off { opacity: .5; pointer-events: none; }
.push-nota { margin: 14px 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Link do negócio no Flash: o que já está no flash fica em cima, com "Tirar o link" separado do Fechar */
.lk-atual { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: rgba(0,173,238,.14); border: 1px solid rgba(0,173,238,.45); color: #fff; }
.lk-atual .tx { flex: 1; min-width: 0; display: grid; }
.lk-atual .tx small { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #7fd8ff; }
.lk-atual .tx strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-tirar { flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,120,120,.6); background: transparent; color: #ff9a9a; font-weight: 800; cursor: pointer; }

/* Nova publicação: tipo Foto/Vídeo sem arquivo ainda (a galeria só abre ao tocar aqui) */
.pub-previa.vazia { background: none; overflow: visible; }
.pub-escolher { width: 100%; display: grid; justify-items: center; gap: 6px; padding: 26px 16px; border-radius: 18px; cursor: pointer; font: inherit; color: var(--text);
  background: var(--panel-2); border: 1.5px dashed var(--line); -webkit-tap-highlight-color: transparent; transition: background .15s, transform .1s; }
.pub-escolher:active { transform: scale(.985); background: var(--hover); }
.pub-escolher .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--text); background: var(--panel); border: 1.5px solid var(--line); }
.pub-escolher .ic .i { width: 26px; height: 26px; }
.pub-escolher strong { font-size: 15px; }
.pub-escolher small { color: var(--muted); font-size: 12.5px; }

/* Flash: face da próxima pessoa no giro em cubo (deslizar entre pessoas) */
.story-face { position: fixed; z-index: 1; background: #111; overflow: hidden; pointer-events: none; backface-visibility: hidden; will-change: transform; }
.story-face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.story-visor .story-caixa { backface-visibility: hidden; }

/* Flash baixando (o anel guardado só tem o id; a foto chega na hora) */
.story-lendo { position: absolute; inset: 0; display: grid; place-items: center; background: #0b0f13; }
.story-roda { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: #fff; animation: hfRoda .8s linear infinite; }
@keyframes hfRoda { to { transform: rotate(360deg); } }

/* Flash visto pelo perfil de um negócio: botão para a vitrine (ver produtos, cardápio, serviços...). */
.story-vitrine { justify-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: #fff; color: #0b1116; font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.35); max-width: 100%; }
.story-vitrine span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-vitrine .i { color: #00adee; }
.story-vitrine .i.xs { color: #5d6b75; }
.story-vitrine:active { transform: scale(.97); }
/* "Também em N negócios": o `font: inherit` do botão deixava a letra grande e o texto cortado ("Também em 4 n..."). */
.story-onde { font-size: 12px; font-weight: 750; padding: 3px 9px 3px 7px; }
/* "Publicado por você" / "por Ana" no flash do negócio: linha secundária, menor que o nome. */
.story-por { font-size: 12.5px; font-weight: 650; color: rgba(255,255,255,.82); line-height: 1.2; }

/* Sem o retângulo azul que o celular pinta por cima do que é tocado (pedido do dono, 04/11/2026). */
html { -webkit-tap-highlight-color: transparent; }