@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Montserrat:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');

/* ===== Padrão visual "RECONekta" — Guia de Marca oficial (2026-10) =====
   Claro por padrão; escuro só quando a pessoa escolhe no 🌓.
   Paleta oficial: #0080FF azul (Conexão/Confiança), #7A3CFF roxo (Criatividade/Comunidade),
   #FF3CC7 rosa (Amizade/Nostalgia), #FF8A00 laranja (Energia/Momentos), #0B1A4A navy (Segurança/Estabilidade),
   #F8FAFF fundo (Leveza/Equilíbrio). Tipografia: Poppins (principal) + Montserrat (secundária). */
:root {
  --bg: #f8faff;
  --bg-shell: #f8faff;
  --bg-card: #ffffff;
  --bg-card-hover: #eef3ff;
  --border: #e3e9f7;
  --text: #0b1a4a;
  --text-dim: #656d94;
  --accent: #0080ff;
  --accent-dim: #0080ff1a;
  --accent-ink: #0b1a4a;
  --ink: #0b1a4a;
  --link: #0080ff;
  --teal: #7a3cff;
  --teal-dim: #7a3cff1a;
  --orange: #ff8a00;
  --orange-dim: #ff8a001f;
  --pink: #ff3cc7;
  --pink-dim: #ff3cc71a;
  --green: #17784a;
  --green-dim: #17784a1a;
  --red: #c62828;
  --red-dim: #c628281a;
  --gradiente-marca: linear-gradient(90deg, #0080ff 0%, #7a3cff 35%, #ff3cc7 70%, #ff8a00 100%);
  --topbar-h: 68px;
  --raio: 20px;
  --raio-btn: 12px;
  --fonte: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonte-titulo: 'Poppins', 'Montserrat', sans-serif;
  --shadow-sm: 0 1px 2px rgba(11, 26, 74, .04);
  --shadow-md: 0 10px 24px -10px rgba(11, 26, 74, .18);
  --shadow-lg: 0 20px 40px -16px rgba(11, 26, 74, .25);
  color-scheme: light;
  font-family: var(--fonte);
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #0f1530;
  --bg-shell: #0b0f24;
  --bg-card: #161c3d;
  --bg-card-hover: #202852;
  --border: #323a66;
  --text: #eef1fc;
  --text-dim: #a3a9cf;
  --accent: #4fa3ff;
  --accent-dim: #4fa3ff26;
  --accent-ink: #eef1fc;
  --ink: #eef1fc;
  --link: #4fa3ff;
  --teal: #a480ff;
  --teal-dim: #a480ff26;
  --orange: #ffa94d;
  --orange-dim: #ffa94d26;
  --pink: #ff6fd8;
  --pink-dim: #ff6fd826;
  --green: #5ee0a8;
  --green-dim: #5ee0a826;
  --red: #ff7a7a;
  --red-dim: #ff7a7a26;
  --gradiente-marca: linear-gradient(90deg, #4fa3ff 0%, #a480ff 35%, #ff6fd8 70%, #ffa94d 100%);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 24px -10px rgba(0, 0, 0, .5);
  --shadow-lg: 0 20px 40px -16px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-shell);
  color: var(--text);
  min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--fonte-titulo); letter-spacing: -.01em; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.mg-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.mg-shell-corpo {
  display: flex;
  flex: 1;
  width: 100%;
}

/* ===== Barra superior (topbar) ===== */
.mg-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 28px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.mg-topbar-logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; text-decoration: none; }
.mg-topbar-logo:hover { text-decoration: none; }
.mg-topbar-logo .logo-icone { height: 34px; width: auto; flex-shrink: 0; }
.mg-topbar-logo .logo-escrita { height: 20px; width: auto; flex-shrink: 0; }

.mg-topbar-busca { flex: 1; max-width: 420px; position: relative; display: flex; align-items: center; }
.mg-topbar-busca svg { position: absolute; left: 14px; width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 2; pointer-events: none; }
.mg-topbar-busca input[type="search"] { width: 100%; padding: 10px 14px 10px 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card-hover); font-size: 13.5px; color: var(--text); font-family: var(--fonte); }
.mg-topbar-busca input[type="search"]:focus { outline: none; border-color: var(--accent); background: var(--bg-card); }

.busca-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 420px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 55; text-align: left; }
.busca-dropdown.aberto { display: block; }
.busca-dropdown .bd-grupo { margin-bottom: 6px; }
.busca-dropdown .bd-grupo:last-child { margin-bottom: 0; }
.busca-dropdown .bd-rotulo { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.busca-dropdown a.bd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 13.5px; }
.busca-dropdown a.bd-item:hover { background: var(--bg-card-hover); text-decoration: none; }
.busca-dropdown .bd-foto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-card-hover); }
.busca-dropdown .bd-foto.quadrada { border-radius: 9px; }
.busca-dropdown .bd-fallback { width: 34px; height: 34px; border-radius: 50%; background: var(--gradiente-marca); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.busca-dropdown .bd-fallback.quadrada { border-radius: 9px; }
.busca-dropdown .bd-texto { flex: 1; min-width: 0; }
.busca-dropdown .bd-texto strong { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-dropdown .bd-texto small { display: block; color: var(--text-dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-dropdown .bd-vertodos { display: block; text-align: center; padding: 10px; font-weight: 700; font-size: 13px; color: var(--accent); border-radius: 10px; }
.busca-dropdown .bd-vertodos:hover { background: var(--accent-dim); text-decoration: none; }
.busca-dropdown .bd-vazio { padding: 16px 10px; text-align: center; color: var(--text-dim); font-size: 13.5px; }

.mg-topbar-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
.mg-topbar-nav a, .mg-topbar-nav button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 13px; border-radius: 14px;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 11px; font-weight: 600; font-family: var(--fonte);
  text-decoration: none; position: relative;
}
.mg-topbar-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mg-topbar-nav a:hover, .mg-topbar-nav button:hover { color: var(--accent); text-decoration: none; }
.mg-topbar-nav a.ativo { background: var(--accent-dim); color: var(--accent); }
.mg-topbar-nav a.ativo::after { content: ""; position: absolute; bottom: -1px; left: 22%; right: 22%; height: 3px; border-radius: 3px; background: var(--pink); }
.mg-topbar-nav-badge { position: relative; }
.mg-topbar-nav-badge .menu-contador { position: absolute; top: 3px; right: 8px; margin-left: 0; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; background: var(--red); }
.mg-topbar-nav .notif-wrap .notif-dropdown { left: auto; right: 0; top: calc(100% + 10px); }

.mg-topbar-conta { position: relative; flex-shrink: 0; }
.mg-topbar-conta > button { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 6px 10px 6px 6px; border-radius: 999px; font-family: var(--fonte); }
.mg-topbar-conta > button:hover { background: var(--bg-card-hover); }
.mg-topbar-conta strong { font-size: 14px; color: var(--text); font-weight: 700; }
.mg-topbar-conta .chevron { width: 14px; height: 14px; stroke: var(--text-dim); fill: none; stroke-width: 2; }
.conta-dropdown { display: none; flex-direction: column; gap: 2px; position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 60; }
.conta-dropdown.aberto { display: flex; }
.conta-dropdown a, .conta-dropdown button.tema-btn-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-family: var(--fonte); }
.conta-dropdown a:hover, .conta-dropdown button.tema-btn-item:hover { background: var(--bg-card-hover); text-decoration: none; }
.conta-dropdown a.link-perigo { color: var(--red); }

@media (max-width: 900px) {
  .mg-topbar-busca { display: none; }
  .mg-topbar-nav span { display: none; }
  .mg-topbar-nav a, .mg-topbar-nav button { padding: 8px; }
  .mg-topbar-conta strong { display: none; }
  .mg-topbar { gap: 10px; padding: 0 14px; }
}

.mg-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 22px 14px;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.mg-sidebar:hover { scrollbar-color: color-mix(in srgb, var(--text-dim) 50%, transparent) transparent; }
.mg-sidebar::-webkit-scrollbar { width: 6px; }
.mg-sidebar::-webkit-scrollbar-track { background: transparent; }
.mg-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.mg-sidebar:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-dim) 50%, transparent); }

.mg-sidebar nav { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.mg-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 14px;
  position: relative;
  transition: background .15s, color .15s;
}
.mg-sidebar nav a .ic { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mg-sidebar nav a .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mg-sidebar nav a:hover { background: var(--bg-card-hover); color: var(--text); text-decoration: none; }
.mg-sidebar nav a.ativo { background: var(--gradiente-marca); color: #fff; font-weight: 700; box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--pink) 60%, transparent); }

.mg-sidebar-mascote { text-align: center; padding: 18px 10px 4px; flex-shrink: 0; }
.mg-sidebar-mascote img { width: 108px; height: auto; }
.mg-sidebar-mascote p { margin: 2px 0 0; font-family: 'Caveat', cursive; font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--ink); }
.mg-sidebar-mascote .coracao { color: var(--pink); }

.mg-sidebar-cta { display: block; margin: 14px 2px 4px; padding: 16px; border-radius: 16px; background: var(--bg-card-hover); border: 1px solid var(--border); text-decoration: none; flex-shrink: 0; }
.mg-sidebar-cta:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.mg-sidebar-cta strong { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.mg-sidebar-cta .texto { display: block; font-size: 12.5px; color: var(--text-dim); line-height: 1.4; margin-bottom: 12px; }
.mg-sidebar-cta .btn { display: block; text-align: center; width: 100%; box-sizing: border-box; }

.mg-main { flex: 1; min-width: 0; background: var(--bg); }

.topo-pagina {
  padding: 20px 36px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--topbar-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  z-index: 5;
}
.topo-pagina h1 { font-size: 20px; margin: 0; }
.topo-pagina .subtitulo { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); }

.container { max-width: none; width: 100%; margin: 0; padding: 28px 40px 64px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
a.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  text-decoration: none;
}

.mg-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
.mg-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }
.mg-rail .card { margin-bottom: 0; }
.mg-rail h3 { font-size: 14.5px; margin: 0 0 12px; }
@media (max-width: 980px) {
  .mg-content-grid { grid-template-columns: 1fr; }
  .mg-rail { position: static; }
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.stat .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 4px; }
.stat .valor { font-size: 23px; font-weight: 800; color: var(--accent-ink); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 9px 17px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; transform: translateY(-1px); }
.btn.secundario { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn.secundario:hover { background: var(--bg-card-hover); }
.btn.teal { background: var(--teal); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--teal) 55%, transparent); }
.btn.marca { background: var(--gradiente-marca); color: #fff; box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--pink) 50%, transparent); }
.btn.marca:hover { filter: brightness(1.05); }
.btn.perigo { background: var(--red); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--red) 55%, transparent); }
.btn.pequeno { padding: 5px 11px; font-size: 12.5px; }
.btn-curtir { background: transparent; border: 1px solid var(--border); color: var(--text-dim); box-shadow: none; }
.btn-curtir.curtido { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-ink); }

.comentarios-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=number], input[type=search], input[type=url], input[type=tel], select, textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.badge.escola, .badge.match { background: var(--teal-dim); color: var(--teal); }
.badge.bairro { background: var(--green-dim); color: var(--green); }
.badge.memoria { background: var(--orange-dim); color: var(--orange); }
.badge.empresa, .badge.lugar { background: var(--pink-dim); color: var(--pink); }
.badge.interesse { background: var(--accent-dim); color: var(--accent); }
.badge.vida-escolar, .badge.musica { background: var(--teal-dim); color: var(--teal); }
.badge.humor, .badge.frases { background: var(--orange-dim); color: var(--orange); }
.badge.comida, .badge.amor-amizade, .badge.nostalgia-orkut { background: var(--pink-dim); color: var(--pink); }
.badge.tv-cinema, .badge.tecnologia { background: var(--accent-dim); color: var(--accent); }
.badge.familia-casa, .badge.esportes, .badge.hobbies { background: var(--green-dim); color: var(--green); }
.badge.viagens { background: var(--accent-dim); color: var(--accent); }
.badge.carros { background: var(--orange-dim); color: var(--orange); }

.erro { background: var(--red-dim); color: var(--red); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.sucesso { background: var(--green-dim); color: var(--green); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }

.match-destaque {
  background: linear-gradient(135deg, var(--accent-dim), var(--teal-dim) 55%, var(--pink-dim));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}
.match-destaque .numero { font-size: 34px; font-weight: 800; color: var(--accent-ink); font-family: var(--fonte-titulo); }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.chip-row .label { font-size: 12.5px; color: var(--text-dim); }
.chip { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--bg-card-hover); color: var(--text); font-size: 13px; font-weight: 600; border: 1px solid var(--border); transition: background .15s, color .15s; }
.chip:hover { background: var(--accent-dim); color: var(--accent-ink); text-decoration: none; }

.grid-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.pessoa-mini { text-align: center; padding: 16px 8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .15s; }
.pessoa-mini:hover { background: var(--bg-card-hover); text-decoration: none; }
.pessoa-mini img, .pessoa-mini .fallback { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 9px; object-fit: cover; }
.pessoa-mini .fallback { background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-dim); font-size: 20px; }
.pessoa-mini .nome { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa-mini .local { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.perfil-capa { padding: 0 0 18px; overflow: hidden; }

.comunidade-capa { padding: 0 0 18px; overflow: hidden; }
.comunidade-banner { height: 92px; background: linear-gradient(120deg, var(--accent) 0%, var(--teal) 55%, var(--pink) 100%); margin: -20px -20px 0; }
.comunidade-header { display: flex; gap: 16px; align-items: flex-end; padding: 0 22px; margin-top: -36px; flex-wrap: wrap; }
.comunidade-header > div:not(.comunidade-icone) { padding-bottom: 4px; min-width: 200px; flex: 1; }
.comunidade-header h2 { font-family: var(--fonte-titulo); margin: 8px 0 4px; }
.comunidade-icone { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; border: 4px solid var(--bg-card); box-shadow: var(--shadow-md); flex-shrink: 0; }
.comunidade-icone-fallback { background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: var(--text-dim); }
.comunidade-stats { display: flex; gap: 22px; padding: 14px 22px 0; margin-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text); }
.comunidade-stats strong { font-family: var(--fonte-titulo); font-size: 15px; margin-right: 4px; }
.comunidade-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 14px 22px 0; }

.link-voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-dim); text-decoration: none; padding: 7px 13px; border-radius: 10px; background: var(--bg-card-hover); }
.link-voltar:hover { background: var(--accent-dim); color: var(--accent-ink); text-decoration: none; }

.notif-wrap { position: relative; flex-shrink: 0; }

.notif-dropdown {
  display: none;
  position: absolute; right: 0; top: 50px;
  width: 340px; max-height: 440px; overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 20;
}
.notif-dropdown.aberto { display: block; }
.notif-dropdown-head { padding: 13px 16px; font-weight: 700; font-size: 14px; font-family: var(--fonte-titulo); border-bottom: 1px solid var(--border); }
.notif-item { display: flex; gap: 10px; padding: 11px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border); font-size: 13px; }
.notif-item:hover { background: var(--bg-card-hover); text-decoration: none; }
.notif-item.nao-lida { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.notif-item img, .notif-item .fallback { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.notif-item .fallback { background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-dim); }
.notif-item .hora { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.notif-vazio { padding: 26px 16px; text-align: center; color: var(--text-dim); font-size: 13px; }
.notif-ver-todas { display: block; text-align: center; padding: 11px; font-size: 13px; font-weight: 700; border-top: 1px solid var(--border); }

.memorias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.memoria-card { border-radius: 16px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s; display: flex; flex-direction: column; }
.memoria-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.memoria-card .capa { display: block; height: 180px; background-size: cover; background-position: center; background-color: var(--bg-card-hover); }
.memoria-card .capa.sem-foto { background-image: linear-gradient(135deg, var(--accent), var(--teal) 55%, var(--pink)); display: flex; align-items: center; justify-content: center; }
.memoria-card .capa.sem-foto span { font-size: 64px; font-family: Georgia, serif; color: rgba(255,255,255,.5); line-height: 1; }
.memoria-card .corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.memoria-card .autor-linha { display: flex; align-items: center; gap: 8px; }
.memoria-card .autor-linha img, .memoria-card .autor-linha .fallback { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.memoria-card .autor-linha .fallback { background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--text-dim); }
.memoria-card .autor-linha .nome-data { font-size: 12px; line-height: 1.3; min-width: 0; }
.memoria-card .autor-linha .nome { font-weight: 700; color: var(--text); }
.memoria-card .autor-linha .data { color: var(--text-dim); }
.memoria-card .titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; margin: 0; }
.memoria-card .trecho { font-size: 13px; color: var(--text-dim); margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.memoria-card .rodape { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }

.conquistas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.conquista-item { text-align: center; padding: 10px 4px; border-radius: 10px; background: var(--bg-card-hover); }
.conquista-item .icone { font-size: 24px; margin-bottom: 4px; }
.conquista-item .nome { font-size: 10.5px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.enquete { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.enquete-opcao { margin: 0; }
.enquete-btn {
  position: relative; width: 100%; text-align: left;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; cursor: pointer; overflow: hidden; font: inherit;
  display: flex; justify-content: space-between; align-items: center;
  transition: border-color .15s;
}
.enquete-barra { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-dim); z-index: 0; transition: width .3s; }
.enquete-label, .enquete-pct { position: relative; z-index: 1; font-size: 13.5px; }
.enquete-label { font-weight: 600; }
.enquete-pct { color: var(--text-dim); font-weight: 700; }
.enquete-opcao.votada .enquete-btn { border-color: var(--accent); }
.enquete-total { font-size: 12px; color: var(--text-dim); text-align: right; }

.msg-bolha { max-width: 72%; padding: 9px 13px; border-radius: 14px; background: var(--bg-card-hover); font-size: 13.5px; align-self: flex-start; }
.msg-bolha.minha { background: var(--accent); color: #fff; align-self: flex-end; }
.msg-hora { font-size: 10.5px; opacity: .65; margin-top: 3px; text-align: right; }

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.album-item { display: block; aspect-ratio: 1; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--bg-card-hover); transition: transform .18s, box-shadow .18s; }
.album-item:hover { transform: scale(1.03); box-shadow: var(--shadow-md); z-index: 1; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 36px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); }
.login-box h1 { text-align: center; margin-bottom: 4px; color: var(--accent-ink); font-family: var(--fonte-titulo); }
.login-box .subtitulo { text-align: center; margin-bottom: 24px; color: var(--text-dim); font-size: 14px; }

/* Mini gráfico de barras — admin, sem lib nenhuma, só CSS */

/* Hero de boas-vindas da home — gradiente da marca com saudação + jornada/onboarding embutidos */

/* Estado vazio ilustrado — ícone grande + texto + CTA, reutilizável em qualquer página */
.vazio-ilustrado { text-align: center; padding: 44px 24px; }
.vazio-ilustrado .ic { font-size: 42px; margin-bottom: 12px; opacity: .85; }
.vazio-ilustrado h3 { margin: 0 0 6px; font-size: 16px; }
.vazio-ilustrado p { margin: 0 0 16px; color: var(--text-dim); font-size: 13.5px; max-width: 360px; margin-left: auto; margin-right: auto; }

/* Throwback — resgata uma memória antiga do próprio usuário, tipo "relembrar" */
.throwback { border: 1px dashed color-mix(in srgb, var(--orange) 45%, var(--border)); background: var(--orange-dim); }
.throwback .selo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--orange); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }

/* Reações além do curtir simples — cluster de emojis que troca a reação em vez de só toggle */
.reacoes { display: inline-flex; align-items: center; gap: 1px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.reacao-btn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 3px 7px; border-radius: 999px; line-height: 1; opacity: .45; transition: opacity .15s, transform .15s, background .15s; }
.reacao-btn:hover { opacity: 1; transform: scale(1.2); }
.reacao-btn.ativa { opacity: 1; background: var(--accent-dim); }
.reacoes-total { font-size: 12px; color: var(--text-dim); font-weight: 700; padding: 0 9px 0 5px; }

/* Figurinhas nostálgicas — emojis clicáveis que se inserem no campo de texto */
.figurinhas-barra { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.figurinha-btn { background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 8px; font-size: 16px; padding: 4px 8px; cursor: pointer; line-height: 1; transition: transform .15s, background .15s; }
.figurinha-btn:hover { transform: scale(1.15); background: var(--accent-dim); }

/* Mural de recados no perfil */

/* Barra de navegação inferior — some em telas largas, vira a navegação principal no mobile */
.mg-bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  justify-content: space-around;
  align-items: center;
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 18px -6px rgba(15, 23, 42, .12);
}
.mg-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-dim); font-size: 10.5px; font-weight: 700;
  text-decoration: none; padding: 5px 10px; border-radius: 12px; min-width: 52px;
}
.mg-bottom-nav a .ic { font-size: 19px; line-height: 1; display: flex; }
.mg-bottom-nav a .ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mg-bottom-nav a.ativo { color: var(--accent); background: var(--accent-dim); }
.mg-bottom-nav a:hover { text-decoration: none; }

@media (max-width: 760px) {
  .mg-sidebar { display: none; }
  .mg-bottom-nav { display: flex; }
  .mg-main { padding-bottom: 70px; }
  .container { padding: 20px 14px 24px; }
  .topo-pagina { padding: 16px 18px; }
  
  
}
.login-box .btn { width: 100%; justify-content: center; margin-top: 6px; }

/* Emoji flutuante ao reagir — mesma ideia do Facebook: o emoji sobe e some, confirmando que o clique funcionou */
.flutuante-reacao {
  position: fixed;
  pointer-events: none;
  font-size: 24px;
  transform: translate(-50%, 0);
  animation: flutuarReacao 900ms ease-out forwards;
  z-index: 9999;
}
@keyframes flutuarReacao {
  0% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  60% { transform: translate(-50%, -36px) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%, -64px) scale(1.1); opacity: 0; }
}

/* Capa clicável + visualizador de imagem grande (assets/js/ampliar-imagem.js) */
.capa-ampliavel { display: block; flex-shrink: 0; border-radius: 18px; cursor: zoom-in; transition: transform .15s ease; }
.capa-ampliavel:hover { transform: scale(1.04); }
.capa-ampliavel:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.img-ampliada { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 12, 28, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; cursor: zoom-out; animation: img-ampliada-entra .15s ease; }
.img-ampliada img { max-width: min(92vw, 640px); max-height: 80vh; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); object-fit: contain; }
.img-ampliada p { margin: 0; color: #fff; font-weight: 700; text-align: center; max-width: 640px; }
.img-ampliada-fechar { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.img-ampliada-fechar:hover { background: rgba(255, 255, 255, .28); }
@keyframes img-ampliada-entra { from { opacity: 0; } to { opacity: 1; } }

/* ===== Cabeçalho de comunidade e perfil: nome grande e centralizado embaixo da foto ===== */
.topo-voltar { font-size: 13.5px; font-weight: 600; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
.topo-voltar:hover { color: var(--accent); text-decoration: none; }

.hero-capa { padding: 0 0 20px; overflow: hidden; text-align: center; }
.hero-banner { position: relative; height: 150px; margin: -20px -20px 0; overflow: hidden; background: linear-gradient(120deg, var(--accent) 0%, var(--teal) 55%, var(--pink) 100%); }
/* a própria capa, desfocada, vira o fundo do banner */
.hero-banner[style*="--capa"]::before { content: ""; position: absolute; inset: -30px; background-image: var(--capa); background-size: cover; background-position: center; filter: blur(26px) saturate(1.3); transform: scale(1.1); }
.hero-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, .25) 100%); }
.hero-foto { position: relative; z-index: 1; display: block; width: 120px; height: 120px; margin: -64px auto 0; border: 5px solid var(--bg-card); box-shadow: var(--shadow-md); object-fit: cover; background: var(--bg-card-hover); }
.hero-foto.redonda { border-radius: 50%; }
.hero-foto.quadrada { border-radius: 26px; }

.hero-nome { font-family: var(--fonte-titulo); font-size: clamp(22px, 3.2vw, 30px); line-height: 1.2; margin: 14px auto 6px; padding: 0 20px; max-width: 760px; overflow-wrap: anywhere; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; padding: 0 20px; font-size: 13px; color: var(--text-dim); }
.hero-meta strong { color: var(--text); font-family: var(--fonte-titulo); }
.hero-desc { margin: 10px auto 0; padding: 0 24px; max-width: 640px; color: var(--text-dim); font-size: 14px; }

/* foto e nome de pessoa alinhados em grades de amigos/membros */
.pessoa-mini img { display: block; }
.pessoa-mini .nome { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }

/* ===== Modais (assets/js/modal.js) ===== */
body.mg-modal-aberto { overflow: hidden; }
.mg-modal-fundo { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(8, 12, 28, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.mg-modal-fundo.visivel { opacity: 1; }
.mg-modal { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--bg-card); color: var(--text); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(8, 12, 28, .5); transform: translateY(14px) scale(.98); transition: transform .2s cubic-bezier(.2, .9, .3, 1.2); }
.mg-modal-fundo.visivel .mg-modal { transform: none; }
.mg-modal.mg-modal-confirmar { max-width: 420px; }
.mg-modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px 24px; }
.mg-modal-topo h2 { margin: 0; font-size: 18px; }
.mg-modal-fechar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--bg-card-hover); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s; }
.mg-modal-fechar:hover { background: var(--border); }
.mg-modal-corpo { padding: 10px 24px 24px; overflow-y: auto; overscroll-behavior: contain; }
/* conteúdo vindo da página: tira moldura de card e larguras fixas */
.mg-modal-corpo .card { border: 0; box-shadow: none; padding: 0; margin: 0 0 12px; background: transparent; max-width: none !important; }
.mg-modal-corpo form.card { max-width: none !important; }
.mg-modal-corpo > h2:first-child, .mg-modal-corpo .card > h2:first-child { display: none; }
.mg-modal-texto { margin: 4px 0 20px; color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
.mg-modal-acoes { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.mg-modal-erro { color: var(--red); margin: 8px 0; }
.mg-modal-carregando { display: flex; justify-content: center; gap: 6px; padding: 36px 0; }
.mg-modal-carregando span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: mg-pulo .9s infinite ease-in-out; }
.mg-modal-carregando span:nth-child(2) { animation-delay: .15s; background: var(--teal); }
.mg-modal-carregando span:nth-child(3) { animation-delay: .3s; background: var(--pink); }
@keyframes mg-pulo { 0%, 80%, 100% { transform: scale(.5); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

@media (max-width: 760px) {
  .hero-banner { height: 120px; }
  .hero-foto { margin-top: -56px; }
  .hero-foto { width: 104px; height: 104px; }
  /* no celular o modal vira painel que sobe de baixo */
  .mg-modal-fundo { align-items: flex-end; padding: 0; }
  .mg-modal { max-width: none; max-height: 92vh; border-radius: 22px 22px 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .mg-modal.mg-modal-confirmar { max-width: none; }
}

/* ===== Editor de comunidade (comunidade-editar.php) ===== */
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.editor-campos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.editor-secao { margin: 0; padding: 22px 24px 10px; }
.editor-secao-topo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.editor-secao-topo h3 { margin: 0 0 2px; font-size: 16px; }
.editor-secao-topo p { margin: 0; font-size: 13px; color: var(--text-dim); }
.editor-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--accent-dim); }
.editor-secao label { font-weight: 600; color: var(--text); }
.editor-secao label.sem-rotulo { font-weight: 400; }
.contador { align-self: flex-end; margin-top: -2px; font-size: 11.5px; font-weight: 500; color: var(--text-dim); }
.contador.perto { color: var(--orange); }
.campos-lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.editor-dica { font-size: 12.5px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.5; }
.check-linha { flex-direction: row !important; align-items: center; gap: 10px !important; font-weight: 500 !important; font-size: 13px; cursor: pointer; }
.check-linha input { width: 18px; height: 18px; accent-color: var(--accent); }

.upload-capa { flex-direction: row !important; align-items: center; gap: 18px !important; padding: 14px; border: 2px dashed var(--border); border-radius: 18px; cursor: pointer; transition: border-color .15s, background .15s; position: relative; }
.upload-capa:hover, .upload-capa.arrastando { border-color: var(--accent); background: var(--accent-dim); }
.upload-capa.tem-arquivo { border-style: solid; border-color: var(--green); }
.upload-capa input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.upload-capa-img { width: 96px; height: 96px; flex-shrink: 0; border-radius: 18px; overflow: hidden; background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center; }
.upload-capa-img::after { content: "🖼️"; font-size: 30px; opacity: .5; }
.upload-capa-img:has(img:not([hidden]))::after { content: none; }
.upload-capa-img img { width: 100%; height: 100%; object-fit: cover; }
.upload-capa-texto { display: flex; flex-direction: column; gap: 3px; font-weight: 400; color: var(--text-dim); font-size: 12.5px; }
.upload-capa-texto strong { color: var(--text); font-size: 14px; }
.upload-capa-nome { color: var(--green); font-weight: 600; }

.editor-previa { position: sticky; top: 96px; }
.editor-previa-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 8px 4px; }
.previa-card { margin-bottom: 10px; padding-bottom: 22px; }
.previa-card .hero-banner { height: 110px; }
.previa-card .hero-foto { width: 96px; height: 96px; margin-top: -52px; }
.previa-card .hero-nome { font-size: 20px; }
.previa-card .hero-desc { font-size: 13px; overflow-wrap: anywhere; }

.barra-salvar { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; gap: 10px; margin: 20px -40px -64px; padding: 14px 40px calc(14px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border); }
.aviso-com-link a { font-weight: 700; margin-left: 6px; }

@media (max-width: 980px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-previa { position: static; }
}
@media (max-width: 760px) {
  .campos-lado-a-lado { grid-template-columns: 1fr; }
  .editor-secao { padding: 18px 16px 6px; }
  .barra-salvar { margin: 16px -14px -24px; padding-left: 14px; padding-right: 14px; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; }
  .barra-salvar .btn { flex: 1; text-align: center; }
}

/* Comunidade: tópicos na coluna principal; lateral comprida (membros + linha do tempo) rola junto em vez de grudar */
.coluna-principal { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.coluna-principal .card { margin-bottom: 0; }
.mg-rail.comunidade-rail { position: static; }

/* "Ver todos" no fim de um card + lista completa de membros (comunidade-membros.php) */
.ver-todos { display: block; margin-top: 14px; padding: 10px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-dim); }
.ver-todos:hover { text-decoration: none; filter: brightness(1.1); }
.busca-membros { display: flex; gap: 8px; margin-bottom: 8px; }
.busca-membros input { flex: 1; }
.lista-membros { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; }
.membro-linha { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--text); text-decoration: none; }
.membro-linha:hover { background: var(--bg-card-hover); text-decoration: none; }
.membro-linha img, .membro-linha .fallback { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.membro-linha .fallback { display: flex; align-items: center; justify-content: center; background: var(--bg-card-hover); color: var(--text-dim); font-weight: 700; }
.membro-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.membro-info strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membro-info small { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paginacao-membros { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; font-size: 12.5px; color: var(--text-dim); }
.mg-modal-corpo .lista-membros { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .mg-modal-corpo .lista-membros { grid-template-columns: 1fr; } }

/* Linha do tempo: "+N" na lateral e página completa (comunidade-linha-do-tempo.php) */

.linha-tempo-resumo { margin: 0 0 6px; font-size: 13.5px; color: var(--text-dim); }
.linha-tempo-decada { padding-top: 14px; }
.linha-tempo-decada h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--fonte-titulo); font-size: 15px; }
.linha-tempo-decada h4 span { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-dim); color: var(--accent); }

/* ===== Fase 1 — Reencontros ===== */
/* cartões de "pessoas que você talvez conheça" (partials/sugestoes-pessoas.php) */
.sugestoes-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.sugestao-pessoa { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); min-width: 0; }
.sugestao-pessoa-perfil { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text); text-decoration: none; min-width: 0; max-width: 100%; }
.sugestao-pessoa-perfil:hover { text-decoration: none; color: var(--accent); }
.sugestao-pessoa-perfil img, .sugestao-pessoa-perfil .fallback { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--bg-card-hover); color: var(--text-dim); font-weight: 800; font-size: 22px; }
.sugestao-pessoa-perfil strong { font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.sugestao-motivo { font-size: 11.5px; line-height: 1.35; color: var(--text-dim); background: var(--bg-card-hover); border-radius: 10px; padding: 5px 8px; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sugestao-botoes { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: auto; }
.sugestao-botoes form { margin: 0; }
.sugestao-botoes .btn { width: 100%; justify-content: center; text-align: center; }

/* "Você e Fulano têm uma história em comum" (perfil) */

.historia-comum-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.historia-comum-lista li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--bg-card); }
.historia-comum-lista li.mesma-epoca { box-shadow: inset 3px 0 0 var(--teal); }
.historia-comum-lista .ic { font-size: 18px; line-height: 1.3; }
.historia-comum-lista a { font-weight: 700; color: var(--text); }
.historia-comum-lista small { display: block; font-size: 12px; color: var(--text-dim); }
.historia-comum-lista li.mesma-epoca small { color: var(--teal); font-weight: 600; }

/* página "Seus reencontros" */

/* ===== Fase 2 — Memórias ===== */
.dica-campo { font-weight: 400; color: var(--text-dim); font-size: 12px; }
.rotulo-solto { margin-bottom: 6px !important; font-weight: 600; color: var(--text); }
a.mencao { font-weight: 700; color: var(--accent); }

/* novo tópico: escolha do formato; os campos de cada formato aparecem só com CSS (funciona dentro do modal) */
.formatos-topico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.formato-opcao { position: relative; flex-direction: column !important; align-items: center; text-align: center; gap: 2px !important; padding: 12px 8px; border: 2px solid var(--border); border-radius: 14px; cursor: pointer; margin: 0 !important; transition: border-color .15s, background .15s; color: var(--text) !important; }
.formato-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.formato-opcao span { font-size: 22px; line-height: 1.2; }
.formato-opcao strong { font-size: 13px; }
.formato-opcao small { font-size: 11px; color: var(--text-dim); line-height: 1.3; }
.formato-opcao:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.formato-opcao:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.formato-opcao:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.so-memoria, .so-memoria-simples, .so-antes-agora, .so-topico { display: none; }
.form-topico:has(input[name=formato_ui][value=memoria]:checked) .so-memoria,
.form-topico:has(input[name=formato_ui][value=antes_agora]:checked) .so-memoria,
.form-topico:has(input[name=formato_ui][value=quem_e]:checked) .so-memoria { display: grid; }
.form-topico:has(input[name=formato_ui][value=memoria]:checked) .so-memoria-simples,
.form-topico:has(input[name=formato_ui][value=antes_agora]:checked) .so-memoria-simples { display: block; }
.form-topico:has(input[name=formato_ui][value=antes_agora]:checked) .so-antes-agora { display: grid; }
.form-topico:has(input[name=formato_ui][value=antes_agora]:checked) .so-foto-simples { display: none; }
.form-topico:has(input[name=formato_ui][value=topico]:checked) .so-topico { display: block; }
.rotulo-foto-quem-e { display: none; }
.form-topico:has(input[name=formato_ui][value=quem_e]:checked) .rotulo-foto-quem-e { display: inline; font-weight: 600; color: var(--text); }
.form-topico:has(input[name=formato_ui][value=quem_e]:checked) .rotulo-foto-padrao { display: none; }
.antes-agora-campos { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.antes-agora-lado { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--border); border-radius: 14px; }
.antes-agora-lado small { color: var(--text-dim); font-size: 11.5px; }
.antes-agora-lado label { margin: 0; }

/* marcar pessoas: chips + busca */
.marcar-pessoas { position: relative; margin-bottom: 12px; }
.chips-pessoas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chips-pessoas:empty { display: none; }
.chip-pessoa { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 3px; border-radius: 999px; background: var(--accent-dim); color: var(--text); font-size: 12.5px; font-weight: 600; text-decoration: none; }
a.chip-pessoa:hover { text-decoration: none; filter: brightness(1.08); }
.chip-pessoa img, .chip-pessoa .fallback { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card-hover); color: var(--text-dim); font-size: 11px; font-weight: 800; }
.chip-pessoa-tirar { border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.resultado-busca-pessoa { position: absolute; left: 0; right: 0; z-index: 20; margin-top: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); box-shadow: var(--shadow-md); max-height: 280px; overflow-y: auto; }
.resultado-pessoa { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.resultado-pessoa.ativo, .resultado-pessoa:hover { background: var(--accent-dim); }
.resultado-pessoa img, .resultado-pessoa .fallback { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--bg-card-hover); color: var(--text-dim); font-weight: 800; font-size: 12px; flex-shrink: 0; }
.resultado-pessoa small { margin-left: auto; font-size: 11px; color: var(--teal); font-weight: 700; }
label:has(> textarea[data-mencoes]) { position: relative; }

/* memória no tópico */
.memoria-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -2px 0 12px; font-size: 13px; color: var(--text-dim); }
.memoria-meta.pequena { margin: 0 0 6px; font-size: 12px; }
.antes-agora { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--border); margin-bottom: 12px; background: #000; user-select: none; }
.antes-agora img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.antes-agora .antes-agora-antes { position: absolute; inset: 0; height: 100%; clip-path: inset(0 calc(100% - var(--corte)) 0 0); }
.antes-agora::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--corte); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .5); pointer-events: none; }
.antes-agora-rotulo { position: absolute; top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(8, 12, 28, .7); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; z-index: 2; }
.antes-agora-rotulo.antes { left: 10px; }
.antes-agora-rotulo.agora { right: 10px; }
.antes-agora-controle { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.pessoas-memoria { margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--bg-card-hover); }
.pessoas-memoria-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.pessoas-memoria-topo form { margin: 0; }
.pessoas-memoria-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* quem é essa pessoa? */
.quem-e { margin: 4px 0 16px; padding: 16px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--orange) 55%, var(--border)); background: var(--orange-dim); }
.quem-e h3 { margin: 0 0 4px; font-size: 15px; }
.quem-e-dica { margin: 0 0 12px; font-size: 12.5px; color: var(--text-dim); }
.palpite { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; background: var(--bg-card); }
.palpite.confirmado { box-shadow: inset 3px 0 0 var(--green); }
.palpite-pessoa { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.palpite-pessoa:hover { text-decoration: none; }
.palpite-pessoa img, .palpite-pessoa .fallback { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--bg-card-hover); color: var(--text-dim); font-weight: 800; flex-shrink: 0; }
.palpite-pessoa small { display: block; font-size: 11.5px; color: var(--text-dim); }
.palpite-acoes { display: flex; align-items: center; gap: 6px; }
.palpite-acoes form { margin: 0; }
.palpite-remover { border: 0; background: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 0 4px; }
.palpite-novo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: start; margin-top: 10px; }
.palpite-novo .marcar-pessoas { margin: 0; }

/* mural com filtros */
.memorias-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 26px; }
.memorias-cabecalho h2 { margin: 0 0 4px; }
.memorias-cabecalho p { margin: 0; color: var(--text-dim); font-size: 13.5px; max-width: 640px; }
.filtros-memorias { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.filtros-memorias .chip-row { margin: 0; align-items: center; }
.filtros-memorias .chip.ativo { background: var(--accent); color: #fff; border-color: var(--accent); }
.filtros-memorias .chip small { opacity: .7; margin-left: 2px; }
.filtro-rotulo { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-right: 4px; }
.memoria-card .capa { position: relative; }
.memoria-card .capa.capa-dupla .capa-agora { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background-size: cover; background-position: center; border-left: 3px solid #fff; }
.capa-selo { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(8, 12, 28, .72); color: #fff; font-size: 11px; font-weight: 700; }

/* máquina do tempo */
.maquina-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding: 20px 24px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .18), transparent 40%), linear-gradient(120deg, #0f172a, var(--teal) 55%, var(--orange)); }
.maquina-titulo { display: flex; align-items: center; gap: 14px; }
.maquina-titulo > span { font-size: 40px; }
.maquina-titulo small { display: block; font-size: 12px; opacity: .85; }
.maquina-titulo strong { font-family: var(--fonte-titulo); font-size: clamp(26px, 4vw, 38px); line-height: 1.05; }
.maquina-decadas { display: flex; flex-wrap: wrap; gap: 6px; }
.maquina-decadas a { padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 800; font-size: 13.5px; text-decoration: none; }
.maquina-decadas a:hover { background: rgba(255, 255, 255, .26); text-decoration: none; }
.maquina-decadas a.ativa { background: #fff; color: #0f172a; }
.maquina-memorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.maquina-memorias.compacta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.maquina-memoria { display: flex; flex-direction: column; gap: 4px; color: var(--text); text-decoration: none; min-width: 0; }
.maquina-memoria:hover { text-decoration: none; color: var(--accent); }
.maquina-memoria .foto { aspect-ratio: 4 / 3; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--teal) 55%, var(--pink)) center / cover; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 40px; color: rgba(255, 255, 255, .55); }
.maquina-memoria strong { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.maquina-memoria small { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .formatos-topico { grid-template-columns: 1fr 1fr; }
  .antes-agora-campos { grid-template-columns: 1fr; }
  .palpite-novo { grid-template-columns: 1fr; }
  .maquina-decadas { width: 100%; }
}
/* lista da @menção: sempre logo abaixo do campo (dentro de label/flex ela ia pro topo) */
.resultado-busca-pessoa.para-mencao { top: 100%; }

/* ===== Fase 3 — Perfil completo ===== */

/* cabeçalho do perfil */

/* sobre mim */
.sobre-mim-eu-sou { margin: 0 0 10px; font-size: 14.5px; }
.sobre-mim-eu-sou span { color: var(--text-dim); font-weight: 600; }
.sobre-mim-frase { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--teal); border-radius: 0 12px 12px 0; background: var(--teal-dim); font-family: Georgia, serif; font-style: italic; font-size: 15px; }
.sobre-mim-favoritos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0; }
.sobre-mim-favoritos div { padding: 8px 12px; border-radius: 12px; background: var(--bg-card-hover); min-width: 0; }
.sobre-mim-favoritos dt { font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
.sobre-mim-favoritos dd { margin: 2px 0 0; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.sobre-mim-vazio { display: block; color: var(--text-dim); text-decoration: none; border-style: dashed; font-size: 13.5px; }
.sobre-mim-vazio strong { color: var(--text); }
.sobre-mim-vazio span { color: var(--accent); font-weight: 700; margin-left: 4px; }
.sobre-mim-vazio:hover { text-decoration: none; border-color: var(--accent); }

/* linha do tempo da história (perfil e Minha história) */
.linha-historia { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; position: relative; }
.linha-historia::before { content: ""; position: absolute; left: 21px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--accent), var(--teal), var(--pink)); opacity: .35; border-radius: 2px; }
.linha-historia li { position: relative; display: flex; gap: 12px; padding: 8px 0; }
.linha-historia li.oculto { opacity: .5; }
.linha-historia-ic { position: relative; z-index: 1; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 2px solid var(--border); font-size: 16px; }
.linha-historia-corpo { min-width: 0; flex: 1; padding-top: 1px; }
.linha-historia-periodo { display: block; font-size: 11.5px; font-weight: 800; color: var(--accent); letter-spacing: .02em; }
.linha-historia-titulo { font-weight: 700; color: var(--text); font-size: 14.5px; overflow-wrap: anywhere; }
a.linha-historia-titulo:hover { color: var(--accent); }
.linha-historia-corpo small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 1px; }

.linha-historia-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.linha-historia-acoes form { margin: 0; }
.linha-historia-acoes button { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.linha-historia-acoes button:hover { color: var(--accent); }
.linha-historia-acoes button.perigo:hover { color: var(--red); }

/* mapa da história */
.historia-mapa-card { padding: 0; overflow: hidden; }
.historia-mapa-rota { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 14px 18px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border); }
.historia-mapa-rota .seta { color: var(--teal); font-weight: 800; }
#mapa-historia { height: min(70vh, 560px); }
.pino-historia span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--teal)); color: #fff; font-weight: 800; font-size: 13px; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }

/* depoimentos aguardando aprovação */
.depoimentos-pendentes { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--orange) 55%, var(--border)); background: var(--orange-dim); }
.depoimentos-pendentes > strong { display: block; font-size: 13.5px; }
.depoimentos-pendentes > small { display: block; margin: 2px 0 8px; font-size: 12px; color: var(--text-dim); }
.depoimento-pendente { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: var(--bg-card); }
.depoimento-pendente > div:first-child { min-width: 0; flex: 1; font-size: 13.5px; }
.depoimento-pendente-acoes { display: flex; gap: 6px; }
.depoimento-pendente-acoes form { margin: 0; }

/* editar perfil */

.zona-risco { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }

/* "Ver mais": itens além dos primeiros ficam escondidos até clicar (assets/js/ver-mais.js) */
[data-lista-limitada] > .item-oculto { display: none !important; }
button.ver-mais-btn { width: 100%; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }

/* Fase 4A — comunidade fechada, pedidos de entrada, ordenar/fechar/seguir tópico */
.badge.fechada { background: var(--text); color: var(--bg-card); }
.comunidade-trancada { border: 1px dashed var(--border); }
.comunidade-trancada .pedido-entrada { display: flex; gap: 8px; max-width: 520px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.comunidade-trancada .pedido-entrada input { flex: 1 1 260px; margin: 0; }
.ordem-topicos { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 8px; }
.ordem-topicos a { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); text-decoration: none; }
.ordem-topicos a:hover { background: var(--bg-card-hover); color: var(--text); }
.ordem-topicos a.ativo { background: var(--accent); border-color: var(--accent); color: #fff; }
.pedido-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.pedido-item:last-child { border-bottom: 0; }
.pedido-pessoa { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.pedido-pessoa img, .pedido-pessoa .avatar-letra { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pedido-pessoa .avatar-letra { background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-dim); }
.pedido-pessoa small { display: block; font-size: 12px; color: var(--text-dim); }
.pedido-mensagem { margin: 10px 0 0 56px; padding: 8px 12px; background: var(--bg-card-hover); border-radius: 10px; font-size: 13.5px; font-style: italic; }
.pedido-acoes { display: flex; gap: 8px; margin: 10px 0 0 56px; }
.pedido-acoes form { margin: 0; }
.opcoes-privacidade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao-privacidade { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; margin: 0; }
.opcao-privacidade:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.opcao-privacidade input { width: auto; margin: 3px 0 0; }
.opcao-privacidade small { display: block; font-size: 12px; color: var(--text-dim); font-weight: 400; margin-top: 2px; }
@media (max-width: 600px) { .opcoes-privacidade { grid-template-columns: 1fr; } .pedido-mensagem, .pedido-acoes { margin-left: 0; } }
.seguir-topico { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: 11.5px; color: var(--text-dim); margin-left: 10px; font-family: inherit; }
.seguir-topico.ativo { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.topico-fechado-aviso { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--bg-card-hover); color: var(--text-dim); font-size: 13.5px; text-align: center; }

/* Fase 4B — selo de criador, datas marcantes, relacionadas, estatísticas, rankings, silenciar */
.selo-criador { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--orange-dim); color: var(--orange); vertical-align: middle; }
.selo-criador-meta a { color: inherit; font-weight: 700; }

.marco-hoje { border-color: color-mix(in srgb, var(--orange) 45%, var(--border)); }
.marcos-lista { display: flex; flex-direction: column; }
.marco-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.marco-item:last-child { border-bottom: 0; }
.marco-item.hoje { background: var(--orange-dim); border-radius: 12px; padding: 12px; }
.marco-data { flex-shrink: 0; width: 64px; text-align: center; background: var(--accent-dim); border-radius: 12px; padding: 6px 0; }
.marco-data strong { display: block; font-size: 16px; color: var(--accent); }
.marco-data span { font-size: 12px; color: var(--text-dim); font-weight: 700; }
.marco-texto { flex: 1; min-width: 0; }
.marco-titulo { font-weight: 700; }
.marco-quando { font-size: 12.5px; color: var(--text-dim); }
.marco-texto p { margin: 6px 0 0; font-size: 13.5px; }
.marco-item form { margin: 0; }
.marco-remover { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 4px; }
.marco-remover:hover { color: var(--red); }
.relacionadas { display: flex; flex-direction: column; gap: 4px; }
.relacionada { display: flex; gap: 10px; align-items: center; padding: 6px 0; text-decoration: none; color: inherit; }
.relacionada img, .relacionada .sem-capa { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.relacionada .sem-capa { display: flex; align-items: center; justify-content: center; background: var(--bg-card-hover); font-weight: 700; color: var(--text-dim); }
.relacionada-nome { font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.relacionada-nome small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-dim); }
.relacionada:hover .relacionada-nome { color: var(--accent); }
.stats-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); }
.stat-card strong { font-size: 26px; font-family: var(--fonte-titulo); line-height: 1.1; }
.stat-card span { font-size: 13px; font-weight: 600; }
.stat-card small { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.stat-card.alerta { border-color: var(--orange); background: var(--orange-dim); }
.stats-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stats-duas .card { margin-bottom: 18px; }
@media (max-width: 760px) { .stats-duas { grid-template-columns: 1fr; gap: 0; } }
.barras { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 16px; }
.barra { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.barra-cheia { width: 100%; max-width: 28px; min-height: 2px; background: var(--accent); border-radius: 6px 6px 2px 2px; }
.barras.roxas .barra-cheia { background: var(--teal); }
.barra-num { font-size: 10.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 2px; }
.barra-rotulo { font-size: 9.5px; color: var(--text-dim); margin-top: 4px; white-space: nowrap; }
.barras .barra:nth-child(odd) .barra-rotulo { visibility: hidden; }
.stats-linha { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.stats-linha .pos { width: 24px; font-weight: 800; color: var(--text-dim); flex-shrink: 0; }
.stats-linha .nome { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-linha small { color: var(--text-dim); font-size: 11.5px; white-space: nowrap; }
.decada-linha { display: grid; grid-template-columns: 52px 1fr 36px; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; }
.decada-barra { height: 10px; background: var(--bg-card-hover); border-radius: 999px; overflow: hidden; }
.decada-barra span { display: block; height: 100%; background: var(--orange); border-radius: 999px; }
.decada-linha strong { text-align: right; }
.rankings-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.ranking { margin: 0; }
.ranking h3 { margin: 0; }
.ranking-explica { margin: 2px 0 10px; font-size: 12px; color: var(--text-dim); }
.ranking-vazio { font-size: 13px; color: var(--text-dim); }
.ranking ol { list-style: none; margin: 0; padding: 0; }
.ranking li a { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; border-radius: 8px; }
.ranking li:last-child a { border-bottom: 0; }
.ranking li a:hover { background: var(--bg-card-hover); }
.ranking .pos { width: 26px; text-align: center; font-weight: 800; color: var(--text-dim); flex-shrink: 0; font-size: 13px; }
.ranking li.podio .pos { font-size: 18px; }
.ranking img, .ranking .sem-foto { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.ranking .redonda { border-radius: 50%; }
.ranking .sem-foto { display: flex; align-items: center; justify-content: center; background: var(--bg-card-hover); font-weight: 700; color: var(--text-dim); }
.ranking .nome { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .nome small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-dim); }
.ranking .valor { font-weight: 800; font-size: 14px; white-space: nowrap; }
.ranking .valor small { font-weight: 500; font-size: 11px; color: var(--text-dim); }
.resposta-silenciada { margin: 6px 0; }
.resposta-silenciada summary { cursor: pointer; font-size: 12.5px; color: var(--text-dim); padding: 8px 12px; background: var(--bg-card-hover); border-radius: 10px; list-style: none; }
.resposta-silenciada summary::-webkit-details-marker { display: none; }
.resposta-silenciada[open] summary { margin-bottom: 8px; }
.silenciado-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.silenciado-linha form { margin: 0; }
.silenciado-linha a { font-weight: 600; color: var(--text); }

/* Fase 5 — negócio: selo verificado/oficial, patrocínio, anúncio local, notícias do portal */
.selo-verificado { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; vertical-align: middle; line-height: 1; }
.selo-verificado.oficial { background: var(--teal); padding: 0 7px; font-size: 10.5px; }
.hero-nome .selo-verificado { height: 22px; min-width: 22px; font-size: 13px; position: relative; top: -3px; }
.hero-nome .selo-verificado.oficial { font-size: 12px; padding: 0 9px; }
.selo-patrocinio { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, #f5b301 18%, transparent); color: #b07d00; }
:root[data-tema="escuro"] .selo-patrocinio { color: #f5c542; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .selo-patrocinio { color: #f5c542; } }
.selo-oficial-meta a { color: inherit; font-weight: 700; }

.anuncio-card { padding-top: 12px; }
.anuncio-rotulo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 8px; }
.anuncio-link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.anuncio-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-bottom: 6px; }
.anuncio-link strong { font-size: 14.5px; }
.anuncio-link span { font-size: 13px; color: var(--text-dim); }
.anuncio-link small { font-size: 11.5px; color: var(--text-dim); }
.anuncio-link:hover strong { color: var(--accent); }
.anuncio-anuncie { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-dim); text-decoration: none; }
.anuncio-anuncie:hover { color: var(--accent); }

.so-oficial { display: none; }
form:has(input[name="tipo"][value="oficial"]:checked) .so-oficial { display: block; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
.patrocinio-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border); margin: 0; }
.patrocinio-linha .patrocinio-nome { flex: 1 1 220px; min-width: 0; }
.patrocinio-linha .patrocinio-nome small { display: block; color: var(--text-dim); font-size: 12px; }
.patrocinio-linha input { margin: 0; width: auto; flex: 0 1 170px; }

/* Fase 6A — recomendações, monte sua história, app instalável */
.instalar-app { margin: 0 12px 6px; padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--accent); background: var(--accent-dim); color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; text-align: left; }
.instalar-app:hover { background: var(--accent); color: #fff; }
@media (min-width: 900px) { .instalar-app-topo { display: none; } }
.dica-ios-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 9999; display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.dica-ios { background: var(--bg-card); color: var(--text); border-radius: 18px; padding: 20px; max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); }
.dica-ios ol { padding-left: 20px; font-size: 14px; line-height: 1.6; }
.dica-ios .btn { width: 100%; }
.montar-historia { max-width: 680px; }
.passos-barra { display: flex; gap: 6px; margin-bottom: 16px; }
.passos-barra span { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-card-hover); }
.passos-barra span.feito { background: var(--teal); }
.passos-barra span.atual { background: var(--accent); }
.pergunta-card { text-align: center; }
.pergunta-ic { font-size: 44px; }
.pergunta-card h2 { margin: 6px 0 16px; font-size: 21px; }
.pergunta-card input[name="lugar"] { font-size: 16px; text-align: center; }
.pergunta-anos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
.pergunta-acoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sugestao-lugar { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.sugestao-lugar img, .sugestao-lugar .sem-capa { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.sugestao-lugar .sem-capa { display: flex; align-items: center; justify-content: center; background: var(--bg-card-hover); font-weight: 700; color: var(--text-dim); }
.sugestao-nome { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; }
.sugestao-nome small { display: block; font-weight: 400; font-size: 12px; color: var(--text-dim); }

/* botões que o JS mostra só quando faz sentido (ex.: instalar app) */
.instalar-app[hidden], .instalar-app-topo[hidden] { display: none !important; }

/* Pente fino — páginas legais, aceite dos termos */
.faixa-termos { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0; padding: 12px 18px; background: var(--accent-dim); border-bottom: 1px solid var(--border); font-size: 13.5px; }
.faixa-termos span { flex: 1 1 320px; }
.faixa-termos a { font-weight: 700; }
.links-legais { padding: 6px 12px; font-size: 11.5px; color: var(--text-dim); }
.links-legais a { color: var(--text-dim); }
.links-legais a:hover { color: var(--accent); }
.texto-legal { max-width: 820px; }
.texto-legal h1 { margin: 10px 0 2px; }
.texto-legal .legal-versao { color: var(--text-dim); font-size: 13px; margin: 0 0 16px; }
.texto-legal h2 { font-size: 17px; margin: 0 0 10px; }
.texto-legal p, .texto-legal li { font-size: 14.5px; line-height: 1.6; }
.texto-legal ul { padding-left: 20px; margin: 0; }
.texto-legal li { margin-bottom: 6px; }

.aceite-termos { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; margin: 4px 0 14px; }
.aceite-termos input { width: auto; margin: 2px 0 0; flex-shrink: 0; }

/* ===== Padrão B: componentes base (valem pro site todo) ===== */
body { font-family: var(--fonte); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); letter-spacing: -.015em; }
.card { border-radius: var(--raio); border-color: var(--border); box-shadow: none; }
a.card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }
.btn { border-radius: var(--raio-btn); padding: 11px 18px; font-family: var(--fonte); font-weight: 700; box-shadow: none; }
.btn:hover { filter: brightness(1.06); }
.btn.pequeno { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.btn.secundario { background: var(--bg-card-hover); border: 1px solid transparent; color: var(--text); }
.btn.secundario:hover { background: color-mix(in srgb, var(--bg-card-hover) 70%, var(--border)); }
.btn.escuro { background: var(--ink); color: var(--bg-card); }
.btn.teal { box-shadow: none; }
.btn.perigo { box-shadow: none; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=number], input[type=search], input[type=url], input[type=tel], select, textarea {
  background: var(--bg-card); border-radius: var(--raio-btn); padding: 11px 14px; font-size: 15px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 0; }
.badge { font-weight: 700; }
.mg-sidebar { background: var(--bg-card); }
.mg-sidebar nav a { font-size: 15px; }
.topo-pagina { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.topo-pagina h1 { font-size: 24px; }
.mg-bottom-nav a.ativo { color: var(--accent); background: transparent; font-weight: 700; }
.ver-todos { color: var(--link); font-weight: 700; }
.vazio-ilustrado h3 { font-family: var(--fonte-titulo); font-size: 19px; }

/* avatar sem foto: cor da pessoa (ver avatarPessoa() em includes/helpers.php) */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; color: #fff; font-weight: 700; font-family: var(--fonte); line-height: 1; object-fit: cover; }
.avatar.redondo { border-radius: 50%; }
.avatar.quadrado { border-radius: 26%; }
img.avatar { background: var(--bg-card-hover); }

/* ===== Página da comunidade — padrão B ===== */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texto-apagado { color: var(--text-dim); font-size: 14px; margin: 0; }
.contagem { color: var(--text-dim); font-weight: 600; font-size: .85em; margin-left: 4px; }
.pagina-comunidade { max-width: none; }
.com-hero { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; margin-bottom: 20px; }
.com-capa { position: relative; height: 210px; overflow: hidden; background: linear-gradient(120deg, #5b8def 0%, #9b6be0 50%, #ef6fa3 100%); }
.com-capa[style*="--capa"]::before { content: ""; position: absolute; inset: -40px; background-image: var(--capa); background-size: cover; background-position: center; filter: blur(22px) saturate(1.25); transform: scale(1.12); }
.com-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 24, 48, 0) 50%, rgba(27, 24, 48, .28) 100%); }
.com-hero-corpo { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; padding: 0 32px 22px; }
.com-foto { position: relative; z-index: 1; width: 136px; height: 136px; margin-top: -68px; border-radius: 30px; border: 6px solid var(--bg-card); background: var(--bg-card-hover); overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-md); display: block; }
.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.com-foto-vazia { display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-size: 52px; font-weight: 800; color: var(--text-dim); }
.com-titulo { flex: 1 1 380px; min-width: 0; padding-top: 16px; }
.com-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; color: var(--text-dim); }
.com-meta a { color: var(--text); font-weight: 700; }
.com-titulo h1 { margin: 8px 0 4px; font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; overflow-wrap: anywhere; }
.com-desc { margin: 0; font-size: 16px; color: var(--text-dim); max-width: 680px; line-height: 1.5; }
.com-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.com-acoes .btn { padding: 13px 20px; font-size: 15px; border-radius: 14px; }
.com-abas { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 0 22px; border-top: 1px solid var(--border); font-size: 14.5px; font-weight: 500; }
.com-abas a { padding: 14px 12px; color: var(--text-dim); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.com-abas a:hover { color: var(--text); text-decoration: none; }
.com-abas a.ativo { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }
.com-abas-extra { margin-left: auto; display: flex; flex-wrap: wrap; gap: 2px; }
.com-abas-extra a { font-size: 13px; padding: 14px 8px; }
.com-abas-extra a.tem-aviso { color: var(--accent); font-weight: 700; }

.com-epocas { background: #0b1a4a; color: #fff; border-radius: 24px; padding: 24px 28px; margin-bottom: 22px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.com-epocas-texto { flex: 1 1 280px; }
.com-epocas-rotulo { font-size: 12px; letter-spacing: .08em; font-weight: 700; color: #c9c2e6; }
.com-epocas h2 { margin: 4px 0 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; color: #fff; overflow-wrap: anywhere; }
.com-epocas p { margin: 6px 0 0; color: #c9c2e6; font-size: 14.5px; }
.com-epocas-barras { flex: 2 1 420px; display: flex; gap: 10px; align-items: flex-end; height: 150px; }
.com-epocas-barras a { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; color: #fff; text-decoration: none; min-width: 0; }
.com-epocas-barras .barra-cheia { width: 100%; max-width: 64px; border-radius: 10px; background: #8f86c9; transition: background .15s, transform .15s; }
.com-epocas-barras .barra-cheia.maior { background: var(--accent); }
.com-epocas-barras a:hover .barra-cheia { background: #fff; transform: translateY(-2px); }
.com-epocas-barras strong { font-size: 15px; }
.com-epocas-barras small { font-size: 12px; color: #c9c2e6; }
.com-epocas .btn { background: #fff; color: #0b1a4a; }

.com-secao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.com-secao-topo h2 { margin: 0; font-size: 26px; }
.com-secao-topo h3 { margin: 0; font-size: 17px; }
.com-secao-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.com-conversas { margin-bottom: 20px; }
.com-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.com-busca { display: flex; gap: 8px; flex: 1 1 260px; margin: 0; }
.com-busca input { flex: 1; }
.com-filtros .ordem-topicos { margin: 0; }
.lista-topicos { display: flex; flex-direction: column; gap: 10px; }
.topico-card { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.topico-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.topico-card-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.topico-card-meta { font-size: 13px; color: var(--text-dim); }
.topico-card-titulo { font-weight: 700; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.topico-card-rodape { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 6px; font-size: 13px; color: var(--text-dim); }
.lista-topicos .item-oculto { display: none; }

.lista-simples { display: flex; flex-direction: column; }
.lista-simples-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.lista-simples-item:last-child { border-bottom: 0; }
.lista-simples-item:hover { text-decoration: none; color: var(--link); }
.lista-simples-item small { color: var(--text-dim); font-size: 12.5px; }
.lista-simples-item span small { display: block; margin-top: 2px; }
.lista-simples-item .posicao { width: 24px; font-weight: 800; color: var(--text-dim); }
.grade-membros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grade-membros a { text-align: center; color: var(--text); text-decoration: none; font-size: 13px; min-width: 0; }
.grade-membros a .avatar { width: 100% !important; height: auto !important; aspect-ratio: 1; font-size: 28px !important; }
.grade-membros a span:last-child { display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade-membros a:hover span:last-child { color: var(--link); }
.ver-todos-mini { font-size: 13.5px; font-weight: 700; color: var(--link); }
.comunidade-rail h3 { font-size: 17px; }
@media (max-width: 640px) {
  .com-capa { height: 140px; }
  .com-hero-corpo { padding: 0 18px 18px; gap: 14px; }
  .com-foto { width: 96px; height: 96px; margin-top: -48px; border-radius: 22px; }
  .com-acoes { width: 100%; }
  .com-acoes .btn, .com-acoes form { flex: 1; }
  .com-acoes form .btn { width: 100%; justify-content: center; }
  .com-acoes .btn { justify-content: center; white-space: nowrap; padding: 12px 12px; font-size: 14px; }
  .com-abas { padding: 0 8px; overflow-x: auto; flex-wrap: nowrap; }
  .com-abas a { white-space: nowrap; }
  .com-abas-extra { margin-left: 0; flex-wrap: nowrap; }
  .com-epocas { padding: 20px; }
  .com-epocas-barras { height: 120px; gap: 6px; }
}

/* sugestões de pessoas: avatar colorido centralizado e botão principal no rosa do padrão */
.sugestao-pessoa-perfil .avatar { margin: 0 auto 8px; }

/* ===== Início — padrão B ===== */
.pagina-inicio { max-width: none; }

.ini-banner-foto { border-radius: 20px; overflow: hidden; margin-bottom: 16px; line-height: 0; box-shadow: var(--shadow-sm); }
.ini-banner-foto img { width: 100%; height: auto; display: block; }

.ini-composer { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.ini-composer-campo { flex: 1; text-align: left; background: var(--bg-card-hover); border: none; border-radius: 999px; padding: 12px 18px; font-size: 14.5px; color: var(--text-dim); cursor: pointer; font-family: var(--fonte); }
.ini-composer-campo:hover { background: color-mix(in srgb, var(--bg-card-hover) 70%, var(--border)); }
.ini-composer-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 16px 16px; margin-top: -11px; padding: 10px 16px 16px; margin-bottom: 20px; }
.ini-composer-ic { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-dim); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 6px 10px; border-radius: 10px; text-decoration: none; font-family: var(--fonte); }
.ini-composer-ic span { font-size: 16px; }
.ini-composer-ic:hover { background: var(--bg-card-hover); color: var(--text); text-decoration: none; }
.ini-composer-publicar { margin-left: auto; }

.ini-comunidades-trilha-secao { margin-bottom: 20px; }
/* carrossel: 5 por vez no computador, setas nas laterais, sem barra de rolagem (no celular arrasta com o dedo) */
.ini-carrossel { position: relative; }
.ini-comunidades-trilha { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 8px; }
.ini-comunidades-trilha::-webkit-scrollbar { display: none; }
.ini-comunidades-trilha > .ini-comunidade-card { flex: 0 0 calc((100% - 4 * 14px) / 5); min-width: 0; scroll-snap-align: start; }
.ini-carrossel-seta { position: absolute; top: 55px; transform: translateY(-50%); /* na altura da capa, sem cobrir o nome */ z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 26px; line-height: 1; padding: 0 0 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(11,26,74,.18); transition: transform .15s ease, box-shadow .15s ease; }
.ini-carrossel-seta:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 26px rgba(11,26,74,.24); }
.ini-carrossel-seta.esq { left: -16px; }
.ini-carrossel-seta.dir { right: -16px; }
.ini-carrossel-seta[hidden] { display: none; }
@media (max-width: 760px) {
  .ini-comunidades-trilha > .ini-comunidade-card { flex-basis: calc((100% - 2 * 14px) / 2.4); }
  .ini-carrossel-seta { width: 36px; height: 36px; font-size: 22px; }
  .ini-carrossel-seta.esq { left: -6px; }
  .ini-carrossel-seta.dir { right: -6px; }
}
.ini-comunidade-card { flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 10px; box-shadow: var(--shadow-sm); }
.ini-comunidade-card .capa { display: flex; align-items: center; justify-content: center; height: 80px; border-radius: 12px; background: var(--gradiente-marca); background-size: cover; background-position: center; color: #fff; font-weight: 800; font-size: 22px; text-decoration: none; }
.ini-comunidade-card .nome { font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-comunidade-card .nome:hover { text-decoration: none; color: var(--accent); }
.ini-comunidade-card small { color: var(--text-dim); font-size: 11.5px; }
.ini-comunidade-card .btn { width: 100%; box-sizing: border-box; text-align: center; margin-top: 2px; }

.ini-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.ini-abas a, .ini-abas span { padding: 10px 14px; font-size: 14px; font-weight: 700; color: var(--text-dim); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.ini-abas a:hover { color: var(--text); text-decoration: none; }
.ini-abas .ativo { color: var(--accent); border-bottom-color: var(--pink); }

.ini-comunidades-picker { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(11,26,74,.45); align-items: center; justify-content: center; padding: 20px; }
.ini-comunidades-picker.aberto { display: flex; }
.ini-comunidades-picker-caixa { background: var(--bg-card); border-radius: 18px; width: min(420px, 100%); max-height: 70vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.ini-comunidades-picker-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.ini-comunidades-picker-topo button { background: none; border: none; font-size: 16px; color: var(--text-dim); cursor: pointer; padding: 4px; }
.ini-comunidades-picker-lista { overflow-y: auto; padding: 8px; }
.ini-comunidades-picker-item { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.ini-comunidades-picker-item:hover { background: var(--bg-card-hover); text-decoration: none; }
.ini-comunidades-picker-item img, .ini-comunidades-picker-item .sem-capa { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.ini-comunidades-picker-item .sem-capa { display: flex; align-items: center; justify-content: center; background: var(--gradiente-marca); color: #fff; font-weight: 800; font-size: 17px; }

.feed-post-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.fp-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fp-topo > a:first-child { flex-shrink: 0; }
.fp-autor { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-autor strong { font-size: 14.5px; color: var(--text); }
.fp-autor small { font-size: 12.5px; color: var(--text-dim); }
.fp-autor a { color: inherit; text-decoration: none; }
.fp-autor small a { color: var(--text-dim); font-weight: 600; }
.fp-autor small a:hover { color: var(--accent); }

.fp-corpo-link { display: block; color: inherit; text-decoration: none; }
.fp-corpo-link:hover { text-decoration: none; }
.fp-titulo { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.fp-texto { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }

.fp-fotos { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; margin-bottom: 4px; }
.fp-fotos-1 { grid-template-columns: 1fr; }
.fp-fotos-1 .fp-foto { aspect-ratio: 16/10; }
.fp-fotos-2 { grid-template-columns: 1fr 1fr; }
.fp-fotos-2 .fp-foto { aspect-ratio: 1/1; }
.fp-fotos-3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; }
.fp-fotos-3 .fp-foto:first-child { grid-row: 1 / 3; }
.fp-fotos-3 .fp-foto { aspect-ratio: auto; }
.fp-fotos-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.fp-fotos-4 .fp-foto { aspect-ratio: auto; }
.fp-foto { position: relative; background-size: cover; background-position: center; background-color: var(--bg-card-hover); }
.fp-foto-mais { position: absolute; inset: 0; background: rgba(11,26,74,.6); color: #fff; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.fp-resumo { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; font-size: 13px; color: var(--text-dim); }
.fp-resumo a { color: var(--text-dim); text-decoration: none; margin-left: auto; }
.fp-resumo a:hover { text-decoration: underline; }
.fp-reacoes-emojis { font-size: 14px; letter-spacing: -2px; }

.fp-acoes { display: flex; gap: 4px; }
.fp-acao { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 10px; border: none; background: none; color: var(--text-dim); font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; font-family: var(--fonte); }
.fp-acao:hover { background: var(--bg-card-hover); color: var(--text); text-decoration: none; }
button.btn-curtir.fp-acao.curtido { background: var(--accent-dim); color: var(--accent); border: none; box-shadow: none; }

.ini-memorias-hoje { margin-bottom: 20px; }
.ini-memorias-hoje .com-secao-topo { margin-bottom: 10px; }
.ini-memorias-hoje h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0; }
.ini-memorias-hoje p { margin: 2px 0 0; color: var(--text-dim); font-size: 13.5px; }
.ini-memorias-trilha { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.ini-memoria-card { position: relative; flex: 0 0 180px; height: 220px; border-radius: 16px; overflow: hidden; background: var(--gradiente-marca); background-size: cover; background-position: center; box-shadow: var(--shadow-sm); color: #fff; text-decoration: none; display: flex; align-items: flex-end; transition: transform .15s; }
.ini-memoria-card:hover { transform: translateY(-3px); text-decoration: none; }
.ini-memoria-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.65), transparent 55%); }
.ini-memoria-card .ano { position: absolute; top: 10px; left: 10px; z-index: 1; background: rgba(255,255,255,.92); color: var(--ink); font-weight: 800; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; }
.ini-memoria-card .legenda { position: relative; z-index: 1; padding: 12px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ini-memoria-card .legenda small { display: block; font-weight: 500; opacity: .85; font-size: 11.5px; margin-top: 2px; }

.ini-destaque { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 18px; padding: 14px 18px; margin-bottom: 14px; }
.ini-destaque-ic { font-size: 28px; }
.ini-destaque > div { flex: 1 1 240px; min-width: 0; }
.ini-destaque strong { display: block; font-size: 15.5px; }
.ini-destaque small { color: var(--text-dim); font-size: 13px; }

.ini-apresentacoes { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; margin-bottom: 10px; }
.ini-apresentacoes-topo { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.ini-apresentacoes-topo > span { font-size: 26px; }
.ini-apresentacoes-topo strong { display: block; font-size: 16px; }
.ini-apresentacoes-topo small { color: var(--text-dim); font-size: 13px; }
.ini-apresentacao { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 0 9px 38px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; }
.ini-apresentacao:hover { text-decoration: none; color: var(--link); }
.ini-apresentacao small { color: var(--text-dim); white-space: nowrap; font-size: 12.5px; }
.topico-card-meta strong { color: var(--text); font-weight: 700; }

.topico-relembrar { border-style: dashed; border-color: color-mix(in srgb, var(--orange) 45%, var(--border)); }

.ini-semana { display: flex; flex-direction: column; gap: 10px; }
.ini-semana div { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--text-dim); }
.ini-semana strong { font-family: var(--fonte-titulo); font-size: 24px; color: var(--text); min-width: 34px; }
.mg-rail .card h3 { font-size: 17px; }
@media (max-width: 640px) {
  
  
  
  
  
  
  .ini-apresentacao { padding-left: 0; }
}

/* ===== Perfil — padrão B ===== */
.pagina-perfil { max-width: none; }

.pf-comum { background: #0b1a4a; color: #fff; border-radius: 24px; padding: 24px 28px; margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.pf-comum-texto { flex: 1 1 280px; min-width: 0; }
.pf-comum h2 { margin: 4px 0 10px; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.15; color: #fff; }
.pf-comum-totais { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #c9c2e6; font-size: 14px; }
.pf-comum-totais strong { color: #fff; }
.pf-comum-lugares { flex: 2 1 420px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pf-comum-lugares li { display: flex; gap: 10px; align-items: flex-start; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px 14px; }
.pf-comum-lugares li.mesma-epoca { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pf-comum-lugares .ic { font-size: 20px; }
.pf-comum-lugares a { color: #fff; font-weight: 700; }
.pf-comum-lugares small { display: block; color: #c9c2e6; font-size: 12.5px; margin-top: 2px; }

.pf-depoimento-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pf-depoimento-form .btn { align-self: flex-start; }
.pf-depoimentos { display: flex; flex-direction: column; gap: 14px; }
.pf-depoimento { display: flex; gap: 12px; align-items: flex-start; }
.pf-depoimento-bolha { flex: 1; min-width: 0; background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); border-radius: 4px 18px 18px 18px; padding: 12px 16px; }
.pf-depoimento-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pf-depoimento-topo a { font-weight: 700; color: var(--text); }
.pf-depoimento-topo small { color: var(--text-dim); font-size: 12.5px; }
.pf-depoimento-bolha p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-depoimento-bolha form { margin: 6px 0 0; }
.link-perigo { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--red); cursor: pointer; }
.topico-card-meta strong { color: var(--text); }
@media (max-width: 640px) {
  
  
  
  
  
  
  .pf-comum { padding: 20px 18px; }
}

/* foto e avatar de letra alinhados igual nas grades 3x3 */
.grade-membros a .avatar { display: flex; margin: 0 auto; }

/* ===== Tópico — padrão B (coluna de leitura) ===== */
.pagina-topico { max-width: none; }
.tp-post { padding: 26px 30px; border-radius: 24px; }
.tp-autor { display: flex; gap: 12px; align-items: center; }
.tp-autor-texto { min-width: 0; }
.tp-autor-nome { font-weight: 700; color: var(--text); }
.tp-autor-texto small { display: block; color: var(--text-dim); font-size: 13.5px; margin-top: 1px; }
.tp-autor-texto small a { color: var(--text); font-weight: 600; }
.tp-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tp-titulo { margin: 14px 0 10px; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; overflow-wrap: anywhere; }
.tp-corpo { font-size: 17px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 14px; }
.tp-foto { display: block; max-width: 100%; border-radius: 16px; border: 1px solid var(--border); margin: 4px 0 14px; }
.tp-post .memoria-meta { margin-bottom: 12px; }
.tp-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 16px; margin-top: 10px; border-top: 1px solid var(--border); }
.tp-acoes .reacoes { display: inline-flex; }
.tp-acao-principal { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--bg-card-hover); color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; }
.tp-acao-principal:hover { text-decoration: none; background: color-mix(in srgb, var(--bg-card-hover) 70%, var(--border)); }
.tp-acoes .seguir-topico { margin-left: 0; padding: 8px 14px; font-size: 14px; font-weight: 700; }
.tp-mais { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 13px; }
.tp-mais a, .tp-mais button { color: var(--text-dim); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
.tp-mais a:hover, .tp-mais button:hover { color: var(--text); text-decoration: none; }
.tp-mais form { margin: 0; display: inline; }
.tp-mais .tp-mais-perigo:hover { color: var(--red); }

.tp-respostas { margin-top: 26px; }
.tp-respostas-titulo { font-size: 22px; margin: 0 0 14px; }
.tp-respostas .comentarios-lista { gap: 14px; margin-top: 0; }
.tp-resposta { display: flex; gap: 12px; align-items: flex-start; }
.tp-resposta-bolha { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px 18px 18px 18px; padding: 12px 16px; }
.tp-resposta-bolha.do-autor { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); }
.tp-resposta-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.tp-resposta-topo small { color: var(--text-dim); font-size: 12.5px; }
.tp-selo-autor { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent-dim); color: var(--accent); vertical-align: middle; }
.tp-resposta-texto { margin-top: 4px; font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tp-resposta-acoes { display: flex; gap: 14px; align-items: center; margin-top: 8px; font-size: 13px; }
.tp-resposta-acoes a { color: var(--text-dim); }
.tp-resposta-acoes form { margin: 0; }
.tp-resposta-acoes .btn-curtir { background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; }
.tp-resposta-acoes .btn-curtir.curtido { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.tp-sem-resposta { padding: 8px 0 4px; }
.tp-responder { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.tp-responder-rotulo { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
.tp-responder-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-responder-rodape .figurinhas-barra { margin: 0; }
.tp-respostas .topico-fechado-aviso { margin-top: 18px; }
@media (max-width: 640px) {
  .tp-post { padding: 20px 18px; }
  .tp-resposta .avatar { width: 34px !important; height: 34px !important; font-size: 14px !important; }
  .tp-responder-rodape .btn { width: 100%; justify-content: center; }
}

/* ===== Comunidades (lista) — padrão B ===== */
.pagina-comunidades { max-width: none; }
.cl-hero { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 28px 32px 18px; margin-bottom: 24px; }
.cl-hero-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cl-hero h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -.03em; }
.cl-hero p { margin: 6px 0 0; color: var(--text-dim); font-size: 16px; }
.cl-hero-topo .btn { padding: 13px 20px; font-size: 15px; border-radius: 14px; }
.cl-busca { display: flex; gap: 10px; margin-top: 20px; }
.cl-busca input { flex: 1; font-size: 16px; padding: 14px 16px; border-radius: 14px; background: var(--bg); }
.cl-busca .btn { border-radius: 14px; padding: 0 22px; }
.cl-atalhos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cl-categorias { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.cl-categorias a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.cl-categorias a:hover { border-color: var(--text-dim); text-decoration: none; }
.cl-categorias a.ativo { background: var(--ink); border-color: var(--ink); color: var(--bg-card); font-weight: 700; }
.cl-secao { margin-bottom: 28px; }
.cl-secao h2 { font-size: 24px; }
.cl-patrocinado { font-family: var(--fonte); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-left: 6px; }
.cl-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cl-card { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 14px; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.cl-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cl-card > img, .cl-card > .sem-capa { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: var(--bg-card-hover); }
.cl-card > .sem-capa { display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-size: 30px; font-weight: 800; color: var(--text-dim); }
.cl-card-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cl-card-corpo strong { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.cl-card-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; color: var(--text-dim); }
.cl-card-corpo small { font-size: 13px; color: var(--text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-card-corpo .cl-motivo { color: var(--link); font-weight: 600; }
.cl-membro { color: var(--green); font-weight: 700; }
.cl-card-patrocinado { border-color: color-mix(in srgb, #f5b301 45%, var(--border)); }
.cl-paginas { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 20px; font-size: 14.5px; color: var(--text-dim); }
.cl-paginas a { font-weight: 700; padding: 10px 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.cl-paginas a:hover { border-color: var(--text-dim); text-decoration: none; }
@media (max-width: 640px) {
  .cl-hero { padding: 22px 18px 14px; }
  .cl-hero-topo .btn { width: 100%; justify-content: center; }
  .cl-categorias { flex-wrap: nowrap; overflow-x: auto; margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; scrollbar-width: none; }
  .cl-grade { grid-template-columns: 1fr; }
}

.cl-categorias a small { color: var(--text-dim); font-weight: 500; margin-left: 2px; }
.cl-categorias a.ativo small { color: inherit; opacity: .75; }

/* ===== Tela toda (2026-10-05): o conteúdo ocupa a largura; parágrafos longos mantêm largura boa de leitura ===== */
@media (min-width: 1500px) {
  .container { padding: 32px 48px 72px; }
  .mg-content-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; }
}
@media (min-width: 1900px) {
  .mg-content-grid { grid-template-columns: minmax(0, 1fr) 400px; }
}
.tp-corpo, .tp-resposta-texto, .com-desc { max-width: 82ch; }
.tp-comunidade { display: flex; gap: 14px; align-items: center; color: var(--text); text-decoration: none; }
.tp-comunidade:hover { text-decoration: none; }
.tp-comunidade img, .tp-comunidade .sem-capa { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: var(--bg-card-hover); }
.tp-comunidade .sem-capa { display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-size: 28px; font-weight: 800; color: var(--text-dim); }
.tp-comunidade > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tp-comunidade small { font-size: 12px; color: var(--text-dim); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tp-comunidade strong { font-size: 16.5px; line-height: 1.25; overflow-wrap: anywhere; }
.tp-participantes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Reencontros — padrão B ===== */
.re-abertura { background: #0b1a4a; color: #fff; border-radius: 24px; padding: 30px 32px; margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 24px 36px; align-items: center; }
.re-abertura-texto { flex: 1 1 380px; min-width: 0; }
.re-abertura h1 { margin: 6px 0 10px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; color: #fff; letter-spacing: -.02em; }
.re-abertura p { margin: 0; color: #c9c2e6; font-size: 16px; max-width: 60ch; }
.re-abertura-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.re-abertura-acoes .btn { padding: 13px 20px; font-size: 15px; border-radius: 14px; }
.re-btn-claro { background: #fff; color: #0b1a4a; }
.re-mosaico { flex: 1 1 360px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.re-mosaico a .avatar { box-shadow: 0 0 0 3px #0b1a4a, 0 0 0 5px rgba(255, 255, 255, .22); transition: transform .15s; }
.re-mosaico a:hover .avatar { transform: translateY(-3px) scale(1.04); }
.re-lugares { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.re-lugar { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.re-lugar.vazio { background: color-mix(in srgb, var(--bg-card) 70%, var(--bg)); }
.re-lugar-topo { display: flex; gap: 14px; align-items: center; }
.re-lugar-capa img, .re-lugar-capa span { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 28px; background: var(--bg-card-hover); }
.re-lugar-nome { flex: 1; min-width: 0; }
.re-lugar-nome a { font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; color: var(--text); overflow-wrap: anywhere; }
.re-lugar-nome small { display: block; color: var(--text-dim); font-size: 13.5px; margin-top: 2px; }
.re-lugar-numero { text-align: center; flex-shrink: 0; min-width: 70px; }
.re-lugar-numero strong { display: block; font-family: var(--fonte-titulo); font-size: 32px; line-height: 1; color: var(--accent); }
.re-lugar.vazio .re-lugar-numero strong { color: var(--text-dim); }
.re-lugar-numero span { font-size: 12px; color: var(--text-dim); }
.re-lugar-pessoas { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); }
.re-rostos { display: flex; align-items: center; }
.re-rostos a { margin-right: -8px; }
.re-rostos a .avatar { box-shadow: 0 0 0 3px var(--bg-card); }
.re-mais { margin-left: 16px; font-weight: 700; font-size: 14px; color: var(--text-dim); }
@media (max-width: 640px) {
  .re-abertura { padding: 24px 18px; }
  .re-abertura-acoes .btn { flex: 1; justify-content: center; white-space: nowrap; }
  .re-lugares { grid-template-columns: 1fr; }
  .re-mosaico a .avatar { width: 48px !important; height: 48px !important; font-size: 20px !important; }
  .re-lugar-pessoas .btn { width: 100%; justify-content: center; }
}

/* ===== Amigos — padrão B ===== */
.am-pedidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.am-pedido { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 18px; padding: 14px 16px; }
.am-pedido-texto { flex: 1 1 140px; min-width: 0; }
.am-pedido-texto a { font-weight: 700; font-size: 16px; color: var(--text); }
.am-pedido-texto small { display: block; color: var(--text-dim); font-size: 13px; }
.am-pedido-acoes { display: flex; gap: 8px; }
.am-pedido-acoes form { margin: 0; }
.am-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.am-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 18px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: border-color .15s, box-shadow .15s; }
.am-card[hidden], .chat-item[hidden] { display: none !important; }
.am-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--shadow-md); }
.am-card-pessoa { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); text-decoration: none; min-width: 0; width: 100%; }
.am-card-pessoa:hover { text-decoration: none; }
.am-card-pessoa .avatar { margin-bottom: 6px; }
.am-card-pessoa strong { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.am-card-pessoa small { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.am-card-msg { font-size: 13px; font-weight: 700; color: var(--link); padding: 6px 12px; border-radius: 999px; background: var(--bg-card-hover); text-decoration: none; }
.am-card-msg:hover { text-decoration: none; background: color-mix(in srgb, var(--bg-card-hover) 70%, var(--border)); }

/* ===== Mensagens — app de conversa, ocupa a altura toda ===== */
.pagina-mensagens { padding-bottom: 24px; }
.chat-app { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100vh - 92px); min-height: 520px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; }
.chat-lista { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.chat-lista-topo { padding: 20px 18px 12px; display: flex; flex-direction: column; gap: 12px; }
.chat-lista-topo h1 { margin: 0; font-size: 28px; font-weight: 800; }
.chat-lista-topo input { background: var(--bg); }
.chat-lista-itens { flex: 1; overflow-y: auto; padding: 0 10px 12px; }
.chat-item { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; color: var(--text); text-decoration: none; }
.chat-item:hover { background: var(--bg-card-hover); text-decoration: none; }
.chat-item.ativa { background: var(--accent-dim); }
.chat-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-item-linha strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-linha small { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.chat-item-previa { font-size: 13.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item.nao-lida .chat-item-previa { color: var(--text); font-weight: 700; }
.chat-contador { background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 7px; flex-shrink: 0; }
.chat-conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-vazio { margin: auto; text-align: center; padding: 30px; max-width: 360px; }
.chat-vazio .ic { font-size: 44px; }
.chat-vazio h2 { margin: 8px 0 6px; font-size: 22px; }
.chat-vazio p { color: var(--text-dim); margin: 0 0 16px; }
.chat-topo { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.chat-voltar { display: none; font-size: 22px; color: var(--text); text-decoration: none; padding: 4px 8px; }
.chat-topo-pessoa { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.chat-topo-pessoa:hover { text-decoration: none; }
.chat-topo-pessoa strong { display: block; font-size: 16px; }
.chat-topo-pessoa small { color: var(--link); font-size: 12.5px; font-weight: 600; }
.chat-mensagens { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.chat-dia { text-align: center; margin: 8px 0; }
.chat-dia span { font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.chat-mensagens .msg-bolha { max-width: min(72%, 620px); font-size: 15px; line-height: 1.45; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--bg-card); border: 1px solid var(--border); overflow-wrap: anywhere; }
.chat-mensagens .msg-texto { white-space: pre-wrap; }
.chat-mensagens .msg-hora { margin-top: 2px; }
.chat-mensagens .msg-bolha.minha { border-radius: 18px 18px 6px 18px; background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-primeira { margin: auto; color: var(--text-dim); text-align: center; }
.chat-enviar { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); margin: 0; }
.chat-enviar input { flex: 1; border-radius: 999px; padding: 13px 18px; background: var(--bg); }
.chat-enviar .btn { border-radius: 999px; padding: 0 22px; }
@media (max-width: 760px) {
  .chat-app { grid-template-columns: 1fr; height: calc(100vh - 150px); border-radius: 18px; }
  .chat-app.tem-conversa .chat-lista { display: none; }
  .chat-app:not(.tem-conversa) .chat-conversa { display: none; }
  .chat-lista { border-right: 0; }
  .chat-voltar { display: inline-block; }
  .chat-mensagens { padding: 14px; }
  .chat-mensagens .msg-bolha { max-width: 85%; }
  .am-pedidos { grid-template-columns: 1fr; }
  .am-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.topo-pagina.topo-vazio { display: none !important; }
.topo-pagina.topo-compacto { padding: 14px 40px 0; border-bottom: 0; min-height: 0; position: static; background: none; backdrop-filter: none; }
.topo-pagina.topo-compacto ~ .container { padding-top: 14px; }
.topo-pagina:not(.topo-compacto) { padding-right: 40px; }
@media (min-width: 1500px) { .topo-pagina.topo-compacto { padding: 14px 48px 0; } }
mark { background: color-mix(in srgb, #f5c542 55%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
@media (max-width: 760px) {
  .mg-topbar { padding: 0 12px; gap: 8px; }
  .mg-topbar-logo .logo-escrita { display: none; }
  .topo-pagina { position: static; }
  .topo-pagina.topo-compacto { padding: 12px 16px 0; }
}

/* ===== Busca — padrão B ===== */
.bs-hero .cl-busca input { font-size: 17px; padding: 16px 18px; }
.bs-trecho { font-size: 14px; color: var(--text-dim); line-height: 1.45; overflow-wrap: anywhere; }
.bs-topicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; }
.pagina-busca [data-secao][hidden] { display: none !important; }
.pagina-busca:not(.so-pessoas) .bs-extra { display: none; }
.pagina-busca.so-pessoas .bs-ver-pessoas { display: none; }
.bs-ver-pessoas { margin-top: 12px; width: 100%; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; }
@media (max-width: 640px) { .bs-topicos { grid-template-columns: 1fr; } }

/* sem a faixa do topo, a lateral gruda mais perto do alto */
.topo-vazio ~ .container .mg-rail, .topo-compacto ~ .container .mg-rail { top: 20px; }

/* ===== Notificações — padrão B ===== */
.nt-bloco + .nt-bloco { margin-top: 22px; }
.nt-dia { font-size: 15px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px 4px; font-family: var(--fonte); }
.nt-lista { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.nt-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); transition: background .15s; }
.nt-item:last-child { border-bottom: 0; }
.nt-item:hover { background: var(--bg-card-hover); text-decoration: none; }
.nt-item.nova { background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }
.nt-item.nova:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)); }
.nt-item[hidden], .nt-bloco[hidden] { display: none !important; }
.nt-avatar { position: relative; flex-shrink: 0; width: 48px; height: 48px; }
.nt-selo { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-card); box-shadow: 0 0 0 2px var(--bg-card), var(--shadow-sm); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.nt-icone { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 23px; background: color-mix(in srgb, #f5c542 22%, var(--bg-card)); }
.nt-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.nt-texto small { font-size: 12.5px; color: var(--text-dim); }
.nt-item.nova .nt-texto small { color: var(--accent); font-weight: 700; }
.nt-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.nt-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nt-numeros div { background: var(--bg); border-radius: 14px; padding: 12px; text-align: center; }
.nt-numeros strong { display: block; font-family: var(--fonte-titulo); font-size: 26px; line-height: 1.1; color: var(--accent); }
.nt-numeros span { font-size: 12.5px; color: var(--text-dim); }
@media (max-width: 640px) {
  .nt-item { padding: 12px 14px; gap: 12px; }
  .nt-texto { font-size: 14.5px; }
}

/* ===== Tópico: botões de responder ===== */
.tp-btn-responder { margin-left: auto; border-radius: 999px; padding: 10px 20px; font-size: 15px; }
.tp-responder-pessoa { background: none; border: 0; padding: 4px 8px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: var(--link); cursor: pointer; }
.tp-responder-pessoa:hover { background: var(--bg-card-hover); }
.tp-responder-flutuante { position: fixed; right: 28px; bottom: 28px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; padding: 13px 22px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 40%, transparent); }
.tp-responder-flutuante:hover { text-decoration: none; filter: brightness(1.06); }
@media (max-width: 760px) {
  .tp-btn-responder { margin-left: 0; width: 100%; justify-content: center; }
  .tp-responder-flutuante { right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== Criar tópico — padrão B ===== */
.pagina-criar-topico > .topo-voltar { margin-bottom: 12px; }
.ct-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ct-bloco { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.ct-cabeca { display: flex; gap: 14px; align-items: center; }
.ct-cabeca h1 { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ct-cabeca p { margin: 4px 0 0; color: var(--text-dim); font-size: 15px; }
.ct-formatos { margin: 4px 0 0; gap: 10px; }
.ct-formatos .formato-opcao { padding: 16px 10px; border-radius: 18px; }
.ct-formatos .formato-opcao span { font-size: 28px; }
.ct-formatos .formato-opcao strong { font-size: 14.5px; }
.ct-formatos .formato-opcao small { font-size: 12.5px; }
.ct-form input.ct-titulo { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; padding: 16px 18px; border-radius: 16px; background: var(--bg); }
.ct-form textarea.ct-corpo { font-size: 16px; line-height: 1.55; padding: 16px 18px; border-radius: 16px; background: var(--bg); min-height: 170px; resize: vertical; }
.ct-bloco .figurinhas-barra { margin: -4px 0 0; }
.ct-anexo label { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: 15px; padding: 14px 16px; border: 2px dashed var(--border); border-radius: 16px; background: var(--bg); }
.ct-anexo label:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ct-anexo input[type=file] { font-weight: 400; font-size: 14px; }
.so-topico { display: none; flex-direction: column; gap: 14px; }
.form-topico:has(input[name=formato_ui][value=topico]:checked) .so-topico { display: flex; }
.ct-enquete { border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; }
.ct-enquete summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.ct-enquete[open] summary { margin-bottom: 12px; }
.ct-enquete label { display: block; margin-top: 8px; }
.ct-publicar { display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; padding: 14px 0; background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 4; }
.ct-publicar .btn { padding: 14px 26px; font-size: 16px; border-radius: 14px; }
.ct-dicas ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text-dim); }
.ct-dicas strong { color: var(--text); }
@media (max-width: 760px) {
  .ct-bloco { padding: 20px 16px; border-radius: 20px; }
  .ct-cabeca .avatar { display: none; }
  .ct-publicar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .ct-publicar .btn { flex: 1; justify-content: center; }
}

/* ===== Configurações (estilo Facebook: menu à esquerda, painel à direita) ===== */
.cfg-hero p a { font-weight: 700; }
.cfg-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.cfg-menu { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 8px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 20px; }
.cfg-menu a { display: flex; gap: 12px; align-items: center; padding: 12px 12px; border-radius: 14px; color: var(--text); text-decoration: none; }
.cfg-menu a:hover { background: var(--bg-card-hover); text-decoration: none; }
.cfg-menu a.ativo { background: var(--accent-dim); }
.cfg-menu a strong { display: block; font-size: 15px; }
.cfg-menu a small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 1px; }
.cfg-menu-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.cfg-menu a.ativo .cfg-menu-ic { background: var(--bg-card); }
.cfg-menu a.cfg-menu-perigo strong { color: var(--red, #d33); }
.cfg-painel { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 860px; }
.cfg-painel > .sucesso, .cfg-painel > .erro { margin: 0; }
.cfg-voltar { display: none; font-size: 14px; font-weight: 700; color: var(--text-dim); text-decoration: none; }
.cfg-cartao { margin: 0; padding: 24px 26px; border-radius: 20px; }
.cfg-cartao h2 { margin: 0 0 6px; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.cfg-ajuda { color: var(--text-dim); font-size: 14px; margin: 0 0 14px; line-height: 1.45; }
.cfg-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cfg-form label { font-weight: 600; }
.cfg-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: wrap; }
.cfg-link-discreto { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.cfg-linha-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; margin: 4px 0 12px; overflow-wrap: anywhere; }
.cfg-selo { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.cfg-selo.ok { background: color-mix(in srgb, #1f9d55 14%, var(--bg-card)); color: #157a41; }
.cfg-selo.pendente { background: color-mix(in srgb, #f5b301 22%, var(--bg-card)); color: #8a5a00; }
.cfg-form-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.cfg-expandir { border-top: 1px solid var(--border); padding-top: 12px; }
.cfg-expandir summary { cursor: pointer; font-weight: 700; color: var(--link); }
.cfg-expandir[open] summary { margin-bottom: 14px; }
.cfg-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.cfg-opcao { display: flex !important; flex-direction: row !important; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--border); border-radius: 16px; cursor: pointer; font-weight: 400 !important; }
.cfg-opcao:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.cfg-opcao input { margin-top: 3px; accent-color: var(--accent); }
.cfg-opcao strong { display: block; font-size: 15px; }
.cfg-opcao small { display: block; color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.cfg-pessoa { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); }
.cfg-interruptor { display: flex !important; flex-direction: row !important; gap: 14px; align-items: flex-start; cursor: pointer; font-weight: 400 !important; }
.cfg-interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.cfg-chave { width: 46px; height: 26px; border-radius: 999px; background: var(--border); position: relative; flex-shrink: 0; transition: background .15s; margin-top: 2px; }
.cfg-chave::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.cfg-interruptor input:checked + .cfg-chave { background: var(--accent); }
.cfg-interruptor input:checked + .cfg-chave::after { transform: translateX(20px); }
.cfg-interruptor input:focus-visible + .cfg-chave { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg-interruptor strong { display: block; font-size: 15px; }
.cfg-interruptor small { display: block; color: var(--text-dim); font-size: 13.5px; margin-top: 2px; }
.cfg-perigo { border-color: color-mix(in srgb, #d33 35%, var(--border)); }
.cfg-perigo ul { margin: 0 0 12px; padding-left: 20px; color: var(--text); line-height: 1.6; }
@media (max-width: 900px) {
  .cfg-grid { grid-template-columns: 1fr; }
  .cfg-menu { position: static; }
  /* celular: sem seção escolhida mostra só o menu; com seção, só o painel (com "← Configurações") */
  .pagina-config:not(.cfg-tem-aba) .cfg-painel { display: none; }
  .pagina-config.cfg-tem-aba .cfg-menu, .pagina-config.cfg-tem-aba .cfg-hero { display: none; }
  .pagina-config.cfg-tem-aba .cfg-voltar { display: inline-block; }
  .pagina-config:not(.cfg-tem-aba) .cfg-menu a.ativo { background: none; }
  .cfg-cartao { padding: 20px 16px; }
  .cfg-acoes .btn { flex: 1; justify-content: center; }
}

/* ===== Editar perfil — padrão B ===== */
.pagina-editar-perfil > .topo-voltar { margin-bottom: 12px; }
.ep-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 28px; }
.ep-hero-texto { flex: 1 1 260px; min-width: 0; }
.ep-hero-texto p a { font-weight: 700; }
.ep-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ep-form label { font-weight: 600; }
.ep-form .editor-secao-topo { margin-bottom: 4px; }
.ep-form .editor-secao-topo h3 { font-size: 18px; }
.ep-barra { height: 10px; border-radius: 999px; background: var(--bg-card-hover); overflow: hidden; }
.ep-barra span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.ep-config { display: flex; gap: 14px; align-items: center; color: var(--text); text-decoration: none; }
.ep-config:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.ep-config > span:first-child { font-size: 26px; }
.ep-config strong { display: block; font-size: 16px; }
.ep-config small { display: block; color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.ep-aviso { border-color: color-mix(in srgb, #f5b301 45%, var(--border)); }

/* ===== Criar comunidade — padrão B ===== */
.pagina-criar-comunidade > .topo-voltar { margin-bottom: 12px; }
.cc-ic { width: 56px; height: 56px; border-radius: 18px; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.ct-form textarea.cc-desc { min-height: 110px; }
.cc-categorias { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-categoria { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; padding: 9px 14px; border: 2px solid var(--border); border-radius: 999px; cursor: pointer; font-weight: 600 !important; font-size: 14px; position: relative; }
.cc-categoria input { position: absolute; opacity: 0; pointer-events: none; }
.cc-categoria:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cc-categoria:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.cc-categoria:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ct-form .ct-bloco label { font-weight: 600; }

/* ===== Minha história — padrão B (linha do tempo por época) ===== */
.pagina-historia > .topo-voltar { margin-bottom: 12px; }
.mh-rotulo { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #c9c2e6; }
.mh-numeros { display: flex; gap: 12px; flex-wrap: wrap; }
.mh-numeros div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: 16px 20px; min-width: 110px; text-align: center; }
.mh-numeros strong { display: block; font-family: var(--fonte-titulo); font-size: 34px; line-height: 1; color: #fff; }
.mh-numeros span { font-size: 13px; color: #c9c2e6; }
.mh-epoca + .mh-epoca { margin-top: 26px; }
.mh-epoca-titulo { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; display: flex; align-items: center; gap: 12px; }
.mh-epoca-titulo::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .35; }
.mh-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.mh-lista::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: var(--border); }
.mh-item { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.mh-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; z-index: 1; }
.mh-corpo { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; }
.mh-periodo { font-size: 13px; font-weight: 700; color: var(--accent); }
.mh-titulo { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
a.mh-titulo:hover { color: var(--link); text-decoration: none; }
.mh-sub { font-size: 14px; color: var(--text-dim); overflow-wrap: anywhere; }
.mh-origem { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.mh-origem a { font-weight: 700; }
.mh-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mh-acoes form { margin: 0; }
.mh-acoes button { background: var(--bg-card-hover); border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.mh-acoes button.perigo { color: var(--red, #d33); background: none; }
.mh-item.oculto .mh-corpo { opacity: .6; border-style: dashed; }
.mh-form { display: flex; flex-direction: column; gap: 10px; }
.mh-form h3 { margin: 0 0 4px; }
.mh-form label { font-weight: 600; }
.mh-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.mh-tipos .cc-categoria { padding: 7px 12px; font-size: 13.5px; }
@media (max-width: 640px) {
  .mh-numeros { width: 100%; }
  .mh-numeros div { flex: 1; min-width: 0; padding: 12px 8px; }
  .mh-ic { width: 44px; height: 44px; font-size: 20px; }
  .mh-lista::before { left: 21px; }
  .mh-epoca-titulo { font-size: 22px; }
}

/* ===== Encontro (evento) — padrão B ===== */
.pagina-evento > .topo-voltar, .pagina-criar-evento > .topo-voltar { margin-bottom: 12px; }
.ev-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px 26px; padding: 28px 30px; border-radius: 24px; margin-bottom: 24px; align-items: start; }
.ev-calendario { width: 104px; border-radius: 22px; overflow: hidden; text-align: center; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ev-mes { display: block; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .1em; padding: 6px 0; }
.ev-calendario strong { display: block; font-family: var(--fonte-titulo); font-size: 46px; line-height: 1.1; padding-top: 6px; color: var(--ink); }
.ev-semana { display: block; font-size: 13px; color: var(--text-dim); padding-bottom: 10px; text-transform: capitalize; }
.ev-info h1 { margin: 10px 0 8px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.ev-quando { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--text); }
.ev-quando::first-letter { text-transform: uppercase; }
.ev-falta { color: var(--accent); }
.ev-local { margin: 0 0 6px; font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.ev-local a { font-size: 14px; font-weight: 700; margin-left: 4px; }
.ev-meta { margin: 0; font-size: 14px; color: var(--text-dim); }
.ev-meta a { font-weight: 700; color: var(--text); }
.ev-rsvp { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 18px; border-top: 1px solid var(--border); }
.ev-rsvp form { margin: 0; }
.ev-rsvp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 2px solid var(--border); background: var(--bg-card); font: inherit; font-weight: 700; font-size: 15px; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.ev-rsvp-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ev-rsvp-btn.ativo { border-color: var(--accent); background: var(--accent); color: #fff; }
.ev-agenda { margin-left: auto; font-weight: 700; font-size: 14px; }
.ev-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ev-principal .card { margin: 0; padding: 22px 24px; border-radius: 20px; }
.ev-secao { font-size: 20px; margin: 0 0 10px; }
.ev-descricao { margin: 0; font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 82ch; }
.ev-foto-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; padding: 12px 14px; border: 2px dashed var(--border); border-radius: 16px; background: var(--bg); }
.ev-foto-form input[type=file] { flex: 1 1 220px; min-width: 0; }
@media (max-width: 640px) {
  .ev-hero { grid-template-columns: 1fr; padding: 20px 16px; }
  .ev-calendario { width: 84px; }
  .ev-calendario strong { font-size: 36px; }
  .ev-rsvp form { flex: 1 1 0; min-width: 0; }
  .ev-rsvp-btn { width: 100%; justify-content: center; padding: 12px 4px; gap: 4px; font-size: 14px; white-space: nowrap; }
  .ev-agenda { flex-basis: 100%; text-align: center; margin: 4px 0 0; }
}
/* grade de rostos na lateral: no celular a lateral fica larga, então cabem mais por linha */
@media (max-width: 980px) { .mg-rail .grade-membros { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } }

/* ===== Admin — painel no padrão B ===== */
.ad-selo { font-family: var(--fonte); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 999px; }
.ad-menu-contador { margin-left: auto; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.ad-pendencias { background: #0b1a4a; color: #fff; border-radius: 24px; padding: 24px 28px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.ad-pendencias h2 { margin: 6px 0 0; color: #fff; font-size: clamp(22px, 2.6vw, 30px); }
.ad-pendencias-texto { flex: 1 1 260px; }
.ad-pendencias-itens { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; flex: 2 1 520px; }
.ad-pendencia { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: 14px; color: #fff; text-decoration: none; display: flex; flex-direction: column; gap: 2px; transition: background .15s; }
.ad-pendencia:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.ad-pendencia-ic { font-size: 18px; }
.ad-pendencia strong { font-family: var(--fonte-titulo); font-size: 30px; line-height: 1.1; }
.ad-pendencia small { font-size: 12.5px; color: #c9c2e6; }
.ad-pendencia.urgente { background: var(--accent); border-color: var(--accent); }
.ad-pendencia.urgente small { color: #fff; }
.ad-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.ad-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.ad-kpi span { font-size: 13.5px; font-weight: 700; color: var(--text-dim); }
.ad-kpi strong { font-family: var(--fonte-titulo); font-size: 34px; line-height: 1.1; color: var(--ink); }
.ad-kpi small { font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }
.ad-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ad-principal .card { margin: 0; padding: 22px 24px; border-radius: 20px; }
.ad-grafico { display: flex; align-items: stretch; gap: 6px; height: 200px; margin-top: 8px; }
.ad-grafico-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.ad-grafico-valor { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 4px; min-height: 16px; }
.ad-grafico-barra { width: 100%; max-width: 46px; background: color-mix(in srgb, var(--accent) 70%, var(--bg-card)); border-radius: 8px 8px 3px 3px; transition: background .15s; }
.ad-grafico-col:hover .ad-grafico-barra, .ad-grafico-col.hoje .ad-grafico-barra { background: var(--accent); }
.ad-grafico-dia { font-size: 11px; color: var(--text-dim); margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--border); width: 100%; text-align: center; white-space: nowrap; }
.ad-grafico-col.hoje .ad-grafico-dia { color: var(--accent); font-weight: 800; }
.ad-capa-mini { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
@media (max-width: 760px) {
  .ad-pendencias-itens { grid-template-columns: 1fr 1fr; }
  .ad-grafico-dia { font-size: 9px; }
  .ad-grafico-col:nth-child(odd) .ad-grafico-dia { visibility: hidden; }
}
@media (min-width: 1200px) { .ad-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ad-nav-movel { display: none; }
@media (max-width: 760px) {
  .ad-nav-movel { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; background: var(--bg-card); border-bottom: 1px solid var(--border); scrollbar-width: none; position: sticky; top: 0; z-index: 6; }
  .ad-nav-movel a { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
  .ad-nav-movel a.ativo { background: var(--ink); border-color: var(--ink); color: var(--bg-card); }
  .ad-nav-movel .ad-menu-contador { margin-left: 0; }
}
/* tabelas largas (admin) rolam de lado no celular em vez de espremer as colunas */
@media (max-width: 760px) { .mg-main .card:has(table) { overflow-x: auto; } .mg-main .card table { min-width: 640px; } }

/* ===== Cabeçalho das páginas com título (padrão B): sem faixa grudada, título grande no fluxo da página ===== */
.topo-pagina:not(.topo-compacto) { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; padding: 28px 40px 0; align-items: flex-end !important; }
.topo-pagina:not(.topo-compacto) h1 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 4px 0 0; }
.topo-pagina:not(.topo-compacto) .subtitulo { font-size: 16px; margin-top: 8px; max-width: 70ch; }
.topo-pagina:not(.topo-compacto) .topo-voltar { margin-bottom: 4px; }
.topo-pagina:not(.topo-compacto) ~ .container { padding-top: 20px; }
.mg-rail { top: 20px; }
@media (min-width: 1500px) { .topo-pagina:not(.topo-compacto) { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 760px) { .topo-pagina:not(.topo-compacto) { padding: 18px 16px 0; } }

/* ===== Telas de acesso (login, cadastro, senha...): vitrine escura + formulário ===== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bg); }
.auth-wrap .login-wrap { min-height: 100vh; padding: 40px 24px; }
.auth-wrap .login-box { max-width: 420px; border-radius: 24px; padding: 36px 34px; box-shadow: none; }
.auth-wrap .login-box > img:first-child { display: none !important; }
.auth-wrap .login-box h1 { font-size: 30px; letter-spacing: -.02em; }
.auth-wrap .login-box .btn { padding: 14px; font-size: 16px; border-radius: 14px; }
.auth-lado { background: #0b1a4a; color: #fff; padding: 40px 56px; display: flex; flex-direction: column; justify-content: center; gap: 30px; position: relative; overflow: hidden; }
.auth-lado::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, #d92a62 45%, transparent), transparent 70%); top: -180px; right: -200px; opacity: .55; pointer-events: none; }
.auth-lado::after { content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, #6d3fd0 50%, transparent), transparent 70%); bottom: -200px; left: -160px; opacity: .5; pointer-events: none; }
.auth-lado > * { position: relative; z-index: 1; }
.auth-marca { display: inline-flex; align-items: center; gap: 0; font-family: var(--fonte-titulo); font-weight: 800; font-size: 26px; color: #fff; text-decoration: none; letter-spacing: -.02em; }
.auth-marca:hover { text-decoration: none; }
.auth-marca img { border-radius: 11px; margin-right: 10px; }
.auth-marca span { color: #ff5c8a; }
.auth-chamada h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 14px; color: #fff; max-width: 14ch; }
.auth-chamada p { margin: 0; color: #c9c2e6; font-size: 17px; line-height: 1.5; max-width: 46ch; }
.auth-cartao { background: #fff; color: #0b1a4a; border-radius: 22px; padding: 20px 22px; max-width: 400px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transform: rotate(-2deg); position: relative; }
.auth-cartao-topo { display: flex; gap: 12px; align-items: center; }
.auth-cartao-ic { width: 46px; height: 46px; border-radius: 14px; background: #f3effb; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.auth-cartao-topo strong { display: block; font-size: 16px; }
.auth-cartao-topo small { display: block; font-size: 13px; color: #6a6485; }
.auth-exemplo { margin-left: auto; align-self: flex-start; font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #6a6485; background: #f3effb; padding: 3px 8px; border-radius: 999px; }
.auth-rostos { display: flex; margin: 16px 0 10px; }
.auth-rostos span { width: 42px; height: 42px; border-radius: 50%; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff; margin-right: -8px; font-size: 16px; }
.auth-rostos span.mais { background: #0b1a4a; font-size: 12.5px; }
.auth-cartao-frase { margin: 0; font-weight: 700; font-size: 15px; }
.auth-bolha { position: absolute; right: -18px; bottom: -22px; background: #d92a62; color: #fff; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 18px 18px 4px 18px; transform: rotate(3deg); box-shadow: 0 10px 24px rgba(217, 42, 98, .4); }
.auth-numeros { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.auth-numeros div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: 12px 18px; }
.auth-numeros strong { display: block; font-family: var(--fonte-titulo); font-size: 24px; line-height: 1.1; }
.auth-numeros span { font-size: 12.5px; color: #c9c2e6; }
.aceite-termos { display: flex !important; flex-direction: row !important; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.aceite-termos input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-lado { padding: 26px 20px 30px; gap: 16px; }
  .auth-chamada h2 { font-size: 28px; max-width: none; margin-bottom: 8px; }
  .auth-chamada p { font-size: 15px; }
  .auth-cartao, .auth-numeros { display: none; }
  .auth-wrap .login-wrap { min-height: 0; padding: 20px 14px 40px; align-items: flex-start; }
  .auth-wrap .login-box { padding: 26px 20px; }
}

/* ===== Página inicial pública (landing) ===== */
.ld-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 40px; background: #0b1a4a; }
.ld-topo-acoes { display: flex; gap: 10px; }
.ld-topo .btn.secundario { background: rgba(255, 255, 255, .1); color: #fff; }
.ld-hero { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px; padding: 50px 40px 70px; min-height: 0; }
.ld-hero-texto { flex: 1 1 460px; display: flex; flex-direction: column; gap: 26px; }
.ld-hero .auth-chamada h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 16px; color: #fff; max-width: 13ch; }
.ld-hero .auth-chamada p { font-size: 18px; max-width: 52ch; }
.ld-hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.ld-btn-grande { padding: 16px 28px; font-size: 17px; border-radius: 16px; }
.ld-hero-visual { flex: 1 1 360px; display: flex; justify-content: center; padding: 20px 30px 40px; }
.ld-hero-visual .auth-cartao { width: 100%; max-width: 440px; transform: rotate(-3deg) scale(1.05); }
.ld-secao { padding: 56px 40px 0; }
.ld-titulo { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.025em; margin: 0 0 22px; }
.ld-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ld-passo { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 26px; position: relative; }
.ld-num { position: absolute; top: 22px; right: 24px; font-family: var(--fonte-titulo); font-size: 46px; font-weight: 800; color: var(--bg-card-hover); line-height: 1; }
.ld-ic { width: 56px; height: 56px; border-radius: 18px; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 14px; }
.ld-passo h3 { margin: 0 0 8px; font-size: 20px; }
.ld-passo p { margin: 0; color: var(--text-dim); font-size: 15.5px; line-height: 1.5; }
.ld-final { background: #0b1a4a; color: #fff; border-radius: 28px; padding: 44px 40px; text-align: center; }
.ld-final h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); margin: 0 0 12px; letter-spacing: -.02em; }
.ld-final p { color: #c9c2e6; font-size: 17px; max-width: 60ch; margin: 0 auto 24px; line-height: 1.5; }
.ld-rodape { text-align: center; padding: 40px 24px 50px; }
@media (min-width: 1500px) { .ld-topo, .ld-hero, .ld-secao { padding-left: 64px; padding-right: 64px; } }
@media (max-width: 760px) {
  .ld-topo { padding: 12px 16px; }
  .ld-marca { font-size: 21px; }
  .ld-topo .btn { padding: 9px 14px; font-size: 14px; }
  .ld-hero { padding: 30px 18px 40px; gap: 10px; }
  .ld-hero .auth-chamada p { font-size: 16px; }
  .ld-btn-grande { flex: 1; justify-content: center; }
  .ld-hero-visual { display: none; }
  .ld-hero .auth-numeros { display: flex; }
  .ld-secao { padding: 40px 16px 0; }
  .ld-final { padding: 32px 20px; }
}

/* ===== Páginas pequenas no padrão B ===== */
/* Termos e Privacidade: texto confortável + sumário lateral grudado */
.texto-legal { max-width: none; }
.texto-legal.com-sumario { display: grid; grid-template-columns: minmax(0, 860px) 280px; gap: 0 28px; align-items: start; }
.texto-legal.com-sumario > * { grid-column: 1; }
.texto-legal .card { border-radius: 20px; padding: 24px 28px; }
.texto-legal h2 { font-size: 20px; }
.texto-legal p, .texto-legal li { font-size: 15.5px; line-height: 1.65; }
.legal-sumario { grid-column: 2 !important; grid-row: 1 / span 40; position: sticky; top: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 2px; }
.legal-sumario strong { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 6px; }
.legal-sumario a { font-size: 14px; font-weight: 600; color: var(--text); padding: 7px 10px; border-radius: 10px; text-decoration: none; }
.legal-sumario a:hover { background: var(--bg-card-hover); text-decoration: none; }
.texto-legal h2[id] { scroll-margin-top: 20px; }
@media (max-width: 980px) {
  .texto-legal.com-sumario { display: block; }
  .legal-sumario { display: none; }
}
/* trocar foto / capa */
.mf-cartao { display: flex; flex-direction: column; gap: 16px; padding: 26px 28px; border-radius: 24px; margin: 0; }
.mf-previa-foto { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: var(--accent-dim) center / cover no-repeat; display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-size: 80px; font-weight: 800; color: var(--accent); box-shadow: 0 0 0 6px var(--bg-card), 0 0 0 8px var(--border); }
.mf-previa-capa { width: 100%; aspect-ratio: 16 / 5; border-radius: 18px; background: linear-gradient(135deg, var(--accent), var(--teal)) center / cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #fff; font-weight: 700; }
.mf-previa-capa.tem-imagem span, .mf-previa-foto.tem-imagem span { display: none; }
.mf-soltar { display: flex !important; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 22px 16px; border: 2px dashed var(--border); border-radius: 18px; background: var(--bg); cursor: pointer; transition: border-color .15s; }
.mf-soltar:hover { border-color: var(--accent); }
.mf-soltar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf-soltar strong { font-size: 16px; color: var(--text); }
.mf-soltar small { font-size: 13.5px; color: var(--text-dim); }
.mf-soltar:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mf-acoes { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.mf-acoes .btn { padding: 12px 22px; }
.pagina-imagem > .mf-cartao { max-width: 980px; }
.mf-remover { margin-top: 12px; }
/* denunciar */
.dn-cartao { margin: 0; padding: 26px 28px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; }
.dn-cartao h2 { margin: 0; font-size: 22px; }
.dn-motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.dn-motivo { background: var(--bg-card); font: inherit; }
.dn-motivo.ativo { border-color: var(--accent); background: var(--accent-dim); }
.dn-cartao label { font-weight: 600; }
/* excluir conta */
.cx-cartao { max-width: 760px; padding: 26px 28px; border-radius: 24px; }
.cx-cartao p { font-size: 15.5px; line-height: 1.55; }
@media (max-width: 640px) {
  .mf-cartao, .dn-cartao, .cx-cartao { padding: 20px 16px; }
  .mf-previa-foto { width: 160px; height: 160px; font-size: 64px; }
  .mf-acoes .btn { flex: 1; justify-content: center; }
}

/* ===== Ajuda e Fale com a gente ===== */
.pub-link { color: #fff; font-weight: 700; font-size: 15px; padding: 10px 12px; text-decoration: none; }
.pub-link:hover { text-decoration: underline; }
.ld-topo-acoes { align-items: center; }
.pub-cabeca { padding: 30px 40px 0; }
.pub-cabeca h1 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.025em; }
.pub-cabeca p { margin: 8px 0 0; color: var(--text-dim); font-size: 16px; }
.pub-topo ~ .container { padding-top: 24px; }
.aj-hero { margin-bottom: 18px; }
.aj-hero h1 { margin-bottom: 16px; }
.aj-busca { width: 100%; max-width: 640px; font-size: 17px !important; padding: 16px 18px !important; border-radius: 16px !important; border: 0 !important; }
.aj-assuntos { border-top: 0; padding-top: 0; margin: 0 0 22px; }
.aj-lista { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.aj-secao h2 { font-size: 22px; margin: 0 0 10px; scroll-margin-top: 20px; }
.aj-secao[hidden], .aj-item[hidden] { display: none !important; }
.aj-perguntas { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.aj-item { border-bottom: 1px solid var(--border); }
.aj-item:last-child { border-bottom: 0; }
.aj-item summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; font-weight: 700; font-size: 16px; position: relative; }
.aj-item summary::-webkit-details-marker { display: none; }
.aj-item summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--accent); }
.aj-item[open] summary::after { content: '–'; }
.aj-item summary:hover { background: var(--bg-card-hover); }
.aj-resposta { padding: 0 20px 18px; font-size: 15.5px; line-height: 1.6; color: var(--text); max-width: 80ch; }
.aj-resposta a { font-weight: 700; }
.aj-contato p { margin: 0 0 12px; font-size: 14px; }
.ct-contato { margin: 0; padding: 26px 28px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; }
.ct-contato > label, .ct-contato .campos-lado-a-lado label { font-weight: 600; }
.ct-rotulo { font-weight: 700; font-size: 16px; }
.ct-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ad-pendencias-itens { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
@media (max-width: 760px) {
  .pub-link { display: none; }
  .pub-cabeca { padding: 20px 16px 0; }
  .ct-contato { padding: 20px 16px; }
  .aj-item summary { padding: 14px 40px 14px 16px; font-size: 15px; }
  .aj-resposta { padding: 0 16px 16px; }
}
@media (min-width: 1200px) { .ad-pendencias-itens { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ld-empresa { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--text-dim); }

/* ===== Páginas públicas de comunidade e tópico (o que o Google e quem não tem conta veem) ===== */
.pub-pagina { padding-top: 22px; }
.pub-trilha { font-size: 14px; color: var(--text-dim); margin-bottom: 16px; overflow-wrap: anywhere; }
.pub-trilha a { color: var(--text-dim); font-weight: 600; }
.pub-trilha span { color: var(--text); font-weight: 600; }
.pub-hero { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border); border-radius: 26px; padding: 28px 30px; margin-bottom: 26px; }
.pub-hero-capa { width: 140px; height: 140px; border-radius: 28px; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-md); }
.pub-hero-capa.sem-capa { display: flex; align-items: center; justify-content: center; background: var(--accent-dim); font-family: var(--fonte-titulo); font-size: 56px; font-weight: 800; color: var(--accent); }
.pub-hero-texto { flex: 1 1 320px; min-width: 0; }
.pub-hero-texto h1 { margin: 8px 0 8px; font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; }
.pub-hero-texto p { margin: 0 0 18px; font-size: 17px; color: var(--text-dim); line-height: 1.5; max-width: 70ch; }
.pub-hero-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.pub-secao { font-size: 24px; margin: 0 0 12px; }
.pub-cta { background: #0b1a4a; color: #fff; border: 0; }
.pub-cta h3 { color: #fff; }
.pub-cta p { color: #c9c2e6; font-size: 14.5px; margin: 0 0 14px; }
.pub-topico { margin: 0; }
.pub-topico .tp-autor { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.pub-topico .tp-autor strong { display: block; font-size: 16px; }
.pub-topico .tp-autor small { font-size: 13.5px; color: var(--text-dim); }
.pub-topico h1 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 10px 0 14px; overflow-wrap: anywhere; }
.pub-topico-foto { display: block; max-width: 100%; max-height: 560px; border-radius: 18px; margin: 4px 0 16px; object-fit: contain; background: var(--bg); }
.pub-topico-texto { font-size: 17px; line-height: 1.65; max-width: 75ch; overflow-wrap: anywhere; }
.pub-topico-cta { margin-top: 22px; padding: 20px 22px; border-radius: 18px; background: var(--accent-dim); display: flex; flex-direction: column; gap: 6px; }
.pub-topico-cta strong { font-size: 18px; }
.pub-topico-cta span { color: var(--text-dim); font-size: 15px; margin-bottom: 8px; }
@media (max-width: 640px) {
  .pub-hero { padding: 20px 16px; gap: 16px; }
  .pub-hero-capa { width: 96px; height: 96px; border-radius: 22px; }
  .pub-hero-acoes .btn { flex: 1; justify-content: center; }
}

/* ===== Admin: 2 etapas, segurança e sistema ===== */
.a2-ic { font-size: 46px; text-align: center; }
.a2-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 26px !important; letter-spacing: .3em; text-align: center; max-width: 260px; }
.a2-codigo.pequeno { font-size: 17px !important; letter-spacing: .15em; max-width: 170px; }
.login-box .a2-codigo { max-width: none; width: 100%; }
.a2-ajuda { margin-top: 14px; font-size: 13.5px; color: var(--text-dim); text-align: left; }
.a2-ajuda summary { cursor: pointer; font-weight: 700; color: var(--link); }
.a2-config .a2-passos { margin: 6px 0; padding-left: 22px; line-height: 1.6; }
.a2-qr-linha { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin: 8px 0 14px; }
.a2-qr { width: 220px; height: 220px; padding: 10px; background: #fff; border-radius: 18px; border: 1px solid var(--border); }
.a2-chave { display: inline-block; font-size: 17px; font-weight: 700; letter-spacing: .08em; background: var(--bg); padding: 10px 14px; border-radius: 12px; word-break: break-all; }
.a2-codigos { border: 2px solid var(--accent); margin-bottom: 18px; }
.a2-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.a2-lista code { font-size: 18px; font-weight: 700; letter-spacing: .08em; background: var(--bg); padding: 12px; border-radius: 12px; text-align: center; }
.a2-acoes { display: flex; flex-direction: column; gap: 14px; }
.a2-acoes form { margin: 0; }
.a2-acoes label { font-weight: 700; }
.sx-lista, .sx-interruptores { display: flex; flex-direction: column; }
.sx-item, .sx-interruptor { display: flex; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.sx-item:last-child, .sx-interruptor:last-child { border-bottom: 0; }
.sx-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.sx-item strong, .sx-interruptor strong { display: block; font-size: 15.5px; }
.sx-item small, .sx-interruptor small { display: block; font-size: 13.5px; color: var(--text-dim); margin-top: 2px; }
.sx-erro .sx-ic { background: color-mix(in srgb, #d33 18%, var(--bg-card)); }
.sx-alerta .sx-ic { background: color-mix(in srgb, #f5b301 25%, var(--bg-card)); }
.sx-texto { flex: 1; min-width: 0; }
.sx-interruptor form { margin: 0; flex-shrink: 0; }
.sx-interruptor.ligado { background: color-mix(in srgb, #f5b301 10%, transparent); border-radius: 14px; padding-left: 10px; padding-right: 10px; }
.ad-alerta-saude { display: block; margin-bottom: 16px; font-weight: 700; text-decoration: none; }

/* ===== Admin: editar comunidade e links "ver no site" ===== */
.ad-ver-site { font-size: 13px; font-weight: 700; color: var(--text-dim); text-decoration: none; padding: 0 4px; }
.ad-ver-site:hover { color: var(--link); }
.ac-hero { margin-top: 10px; }
.ac-hero .pub-hero-texto p a { font-weight: 700; }
.ac-form { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.ac-form label { font-weight: 700; font-size: 13.5px; }
.pagina-admin > .topo-voltar { display: inline-block; margin-bottom: 4px; }

/* ===== Admin Fase 2: listas com busca, filtros, páginas e lote ===== */
.ad-filtros { padding: 18px 20px; border-radius: 20px; margin-bottom: 14px; }
.ad-busca { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.ad-busca input[type=search] { flex: 1 1 280px; }
.ad-busca select { flex: 0 1 220px; width: auto; }
.ad-campo-curto { flex: 0 1 230px !important; width: auto !important; }
.ad-pilulas { border-top: 0; margin-top: 12px; padding-top: 0; }
.ad-pilulas a, .ad-linha-filtros a { font-size: 13.5px; }
.ad-linha-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13.5px; color: var(--text-dim); }
.ad-linha-filtros a { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.ad-linha-filtros a.ativo { background: var(--ink); border-color: var(--ink); color: var(--bg-card); font-weight: 700; }
.ad-sep { margin-left: 10px; color: var(--text-dim); font-weight: 600; }
.ad-paginas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 2px; font-size: 14px; color: var(--text-dim); }
.ad-paginas-links { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ad-paginas-links a, .ad-paginas-links strong, .ad-paginas-links span { padding: 6px 11px; border-radius: 10px; }
.ad-paginas-links a { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 600; }
.ad-paginas-links strong { background: var(--accent); color: #fff; }
.ad-tabela-card { padding: 4px 8px; border-radius: 20px; overflow-x: auto; margin: 0; }
.ad-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.ad-tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); padding: 12px 8px; white-space: nowrap; }
.ad-tabela td { padding: 10px 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.ad-tabela tr:hover td { background: color-mix(in srgb, var(--bg-card-hover) 50%, transparent); }
.ad-pessoa { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ad-pessoa > span:not(.avatar) { display: block; min-width: 0; }
.ad-pessoa small { display: block; }
.ad-lote[hidden] { display: none !important; }
.ad-pessoa a { color: var(--text); text-decoration: none; }
.ad-pessoa a:hover strong { color: var(--link); }
.ad-pessoa small { color: var(--text-dim); font-size: 12.5px; }
.ad-pessoa small a { color: var(--text-dim); font-weight: 600; }
.ad-selos { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.ad-selos .badge { font-size: 11px; padding: 2px 7px; }
.ad-linha-apagada td, .ad-conteudo.ad-linha-apagada { opacity: .62; }
.ad-quebra { overflow-wrap: anywhere; max-width: 260px; }
.ad-pendente { color: #8a5a00; font-weight: 700; }
.ad-acoes { white-space: nowrap; }
.ad-acoes > * { display: inline-block; margin: 2px; }
.ad-acoes form { margin: 0; }
.ad-lote { position: sticky; top: 10px; z-index: 8; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: #0b1a4a; color: #fff; padding: 12px 16px; border-radius: 16px; margin-bottom: 10px; box-shadow: var(--shadow-md); }
.ad-lote .ad-sep { color: #c9c2e6; }
.ad-lote input { width: 200px; padding: 7px 10px; }
.ad-tabela input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.ad-cartoes { display: flex; flex-direction: column; gap: 10px; }
.ad-conteudo { margin: 0; padding: 16px 18px; border-radius: 18px; }
.ad-conteudo-topo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.ad-conteudo-titulo { margin: 10px 0 4px; font-size: 17px; }
.ad-conteudo-texto { margin: 6px 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.ad-conteudo-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; }
.ad-conteudo-rodape small { color: var(--text-dim); }
.ad-conteudo-rodape form { margin: 0; }
.uf-foto { border-radius: 50% !important; }
.uf-meta { font-size: 14.5px !important; line-height: 1.7 !important; }
.uf-advertencia { padding: 10px 0; border-top: 1px solid var(--border); }
.uf-advertencia small { color: var(--text-dim); }
.uf-advertencia p { margin: 4px 0 0; }
@media (max-width: 760px) {
  .ad-campo-curto, .ad-busca select { flex: 1 1 100% !important; }
  .ad-lote input { width: 100%; }
}

/* ===== Admin Fase 3: comunicados e categorias ===== */
.cm-mini { width: 90px !important; padding: 5px 8px !important; margin-left: 4px; display: inline-block; }
.cm-mini-texto { width: 150px !important; }
.cm-previa { border: 2px solid var(--accent); }
.cm-previa h3 { margin: 0 0 10px; }
.ct-icone { width: 64px !important; text-align: center; font-size: 20px !important; padding: 6px !important; }
.cm-artigo { max-width: 820px; padding: 30px 32px; border-radius: 24px; }
.cm-rotulo { color: var(--accent); }
.cm-artigo h1 { margin: 8px 0 6px; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.02em; }
.cm-data { color: var(--text-dim); margin: 0 0 18px; }
.cm-texto { font-size: 17px; line-height: 1.65; margin-bottom: 22px; overflow-wrap: anywhere; }
.pagina-comunicado > .topo-voltar { display: inline-block; margin-bottom: 12px; }

/* ===== Admin Fase 4: crescimento ===== */
.cr-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cr-exportar { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-aviso { padding: 14px 18px; border-radius: 16px; margin-bottom: 14px; background: color-mix(in srgb, #f5b301 14%, var(--bg-card)); border-color: color-mix(in srgb, #f5b301 40%, var(--border)); }
.cr-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.cr-cartao { margin: 0; padding: 22px 24px; border-radius: 20px; min-width: 0; }
.cr-largo { grid-column: 1 / -1; }
.cr-grafico { height: 170px; }
.cr-funil { display: flex; flex-direction: column; gap: 10px; }
.cr-funil-linha { display: grid; grid-template-columns: minmax(200px, 1.4fr) 2fr auto 44px; gap: 10px; align-items: center; font-size: 14px; }
.cr-funil-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-funil-barra { height: 14px; background: var(--bg-card-hover); border-radius: 999px; overflow: hidden; }
.cr-funil-barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cr-funil-linha small { color: var(--text-dim); text-align: right; }
.cr-sub { font-size: 15px; margin: 18px 0 6px; }
@media (max-width: 640px) {
  .cr-grade { grid-template-columns: 1fr; }
  .cr-funil-linha { grid-template-columns: 1fr auto 40px; }
  .cr-funil-barra { grid-column: 1 / -1; grid-row: 2; }
}

/* ===== Admin: menu da conta (avatar no canto superior direito) ===== */
.topo-pagina.ad-topo { display: flex; justify-content: space-between; align-items: center !important; gap: 14px; }
.ad-conta { position: relative; flex-shrink: 0; }
.ad-conta-botao { position: relative; padding: 3px; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; display: flex; transition: border-color .15s; }
.ad-conta-botao:hover, .ad-conta-botao[aria-expanded="true"], .ad-conta-botao.ativo { border-color: var(--accent); }
.ad-conta-alerta { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--red, #d33); box-shadow: 0 0 0 2px var(--bg); }
.ad-conta-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 290px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.ad-conta-menu[hidden] { display: none !important; }
.ad-conta-cabeca { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ad-conta-cabeca strong { display: block; font-size: 15.5px; }
.ad-conta-cabeca small { color: var(--text-dim); font-size: 13px; }
.ad-conta-menu a, .ad-conta-tema { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none; font: inherit; font-size: 14.5px; font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left; width: 100%; }
.ad-conta-menu a:hover, .ad-conta-tema:hover { background: var(--bg-card-hover); text-decoration: none; }
.ad-conta-menu a.ativo { background: var(--accent-dim); }
.ad-conta-menu .ic { width: 22px; text-align: center; flex-shrink: 0; }
.ad-conta-menu a > span:nth-child(2) { flex: 1; min-width: 0; }
.ad-conta-menu small { display: block; font-size: 12px; font-weight: 500; color: var(--text-dim); }
.ad-conta-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; }
.ad-conta-sair { color: var(--red, #d33) !important; }
@media (max-width: 760px) { .ad-conta-menu { width: min(290px, calc(100vw - 32px)); } }

/* admin: foto da comunidade (selo "Trocar" na capa do topo + cartão com prévia) */
.ac-foto-hero { position: relative; display: block; flex-shrink: 0; border-radius: 28px; }
.ac-foto-hero-selo { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(20, 16, 40, .78); color: #fff; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.ac-foto-hero:hover .pub-hero-capa { filter: brightness(.9); }
.ac-foto-corpo { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ac-foto-previa { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ac-foto-previa img { width: 120px; height: 120px; border-radius: 24px; object-fit: cover; box-shadow: var(--shadow-md); background: var(--accent-dim); }
.ac-foto-previa small { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.ac-foto-acoes { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.ac-foto-acoes .cfg-ajuda { margin: 0; }
.ac-foto-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0; }
.ac-foto-escolher { position: relative; cursor: pointer; }
.ac-foto-escolher input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* admin: link de senha nova pra copiar */
.uf-link-senha { display: flex; gap: 8px; margin: 0 0 12px; }
.uf-link-senha input { flex: 1; min-width: 0; font-size: 13px; font-family: monospace; }
.ac-foto [hidden] { display: none !important; }

/* olhinho de mostrar/esconder senha (assets/js/ver-senha.js) */
.campo-senha { position: relative; display: block; }
.campo-senha input { width: 100%; padding-right: 48px !important; }
.campo-senha input::-ms-reveal, .campo-senha input::-ms-clear { display: none; } /* o Edge tem um olhinho próprio: evita dois */
.ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-dim); cursor: pointer; padding: 0; }
.ver-senha:hover { color: var(--accent); background: var(--accent-dim); }
.ver-senha:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ver-senha[aria-pressed="true"] { color: var(--accent); }

/* dica de atalho de teclado embaixo das caixas de texto (assets/js/enter-envia.js) — só no computador */
.dica-teclado { display: none; font-size: 12px; color: var(--text-dim); margin: 6px 2px 0; }
.dica-teclado kbd { font-family: inherit; font-size: 11px; font-weight: 700; background: var(--bg-card-hover); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .dica-teclado { display: block; } }

/* capa do perfil: galeria de capas prontas (perfil-capa.php) */
.cp-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cp-titulo h2 { margin: 0; font-size: 18px; }
.cp-titulo small { color: var(--text-dim); font-size: 13px; }
.cp-galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cp-opcao { position: relative; display: flex !important; flex-direction: column; gap: 6px; cursor: pointer; margin: 0 !important; }
.cp-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cp-opcao img { width: 100%; height: auto; aspect-ratio: 10 / 3; object-fit: cover; border-radius: 12px; border: 3px solid transparent; box-shadow: var(--shadow-sm); transition: transform .15s, border-color .15s; display: block; }
.cp-opcao:hover img { transform: translateY(-2px); }
.cp-opcao span { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cp-opcao em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--green); background: var(--green-dim); padding: 1px 7px; border-radius: 999px; margin-left: 2px; }
.cp-opcao input:checked + img { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.cp-opcao input:focus-visible + img { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-sua-foto { margin-top: 16px !important; }
.pagina-imagem > .cp-sua-foto { max-width: 980px; }
@media (max-width: 720px) { .cp-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* botão desligado: cinza e apagado (antes parecia ativo e o clique "não fazia nada") */
.btn:disabled, .btn[disabled] { opacity: .5; filter: grayscale(.6); cursor: not-allowed; box-shadow: none; transform: none; pointer-events: auto; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; }
/* capas prontas: "Ver como fica" ao passar o mouse */
.cp-opcao { position: relative; }
.cp-ver { position: absolute; left: 50%; top: calc((100% - 26px) / 2); transform: translate(-50%, -50%); background: rgba(20, 16, 40, .78); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.cp-opcao:hover .cp-ver { opacity: 1; }
.cp-opcao input:checked ~ .cp-ver { opacity: 0; }
.cp-aviso[hidden] { display: none !important; }
.cp-aviso { margin: 0 0 12px; }

/* ---------- chat ao vivo (assets/js/chat.js) e contadores (assets/js/contadores.js) ---------- */
.menu-contador[hidden], .chat-novas[hidden], .chat-erro[hidden] { display: none !important; }
.menu-contador { margin-left: auto; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.chat-conversa { position: relative; }
.chat-enviar { align-items: flex-end; }
.chat-enviar textarea { flex: 1; resize: none; border-radius: 22px; padding: 12px 18px; background: var(--bg); line-height: 1.4; min-height: 46px; max-height: 160px; overflow-y: auto; font: inherit; font-size: 15px; }
.chat-enviar .btn { height: 46px; }
.chat-mensagens .msg-hora { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.msg-visto { font-size: 11px; font-weight: 800; letter-spacing: -2px; opacity: .85; }
.msg-visto.vista { color: #9fe7ff; opacity: 1; }
.msg-bolha:not(.minha) .msg-visto { display: none; }
.msg-bolha.enviando { opacity: .7; }
.chat-topo-pessoa small.chat-status { color: var(--text-dim); font-weight: 600; }
.chat-topo-pessoa small.chat-status.online { color: var(--green); }
.chat-topo-pessoa small.chat-status.online::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.chat-novas { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-md); cursor: pointer; z-index: 2; }
.chat-erro { margin: 0 18px 12px; padding: 10px 14px; border-radius: 12px; background: var(--red-dim); color: var(--red); font-size: 13.5px; font-weight: 600; }

/* ---------- chat — Pacote 2: foto, reações, responder citando, apagar, emojis (assets/js/chat.js) ---------- */
.chat-compor-extra[hidden], .chat-respondendo[hidden], .chat-foto-previa[hidden], .chat-emojis[hidden] { display: none !important; }
.chat-mensagens { padding-top: 46px; }
.msg-linha { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.msg-linha.minha { align-items: flex-end; }
.msg-linha.enviando .msg-bolha { opacity: .7; }
.msg-linha.destaque .msg-bolha { box-shadow: 0 0 0 3px #ffd166; transition: box-shadow .2s; }
/* emoji sozinho: grande e sem balão */
.chat-mensagens .msg-bolha.so-emoji { background: none !important; border: 0 !important; box-shadow: none; padding: 0 2px; font-size: 40px; line-height: 1.15; }
.chat-mensagens .msg-bolha.so-emoji .msg-hora { font-size: 10.5px; color: var(--text-dim); }
/* citação dentro da bolha */
.msg-citacao { display: block; width: 100%; min-width: 160px; text-align: left; border: 0; border-left: 3px solid var(--accent); background: rgba(27, 24, 48, .06); border-radius: 8px; padding: 6px 10px; margin: 0 0 6px; cursor: pointer; font: inherit; color: inherit; }
.msg-citacao strong { display: block; font-size: 12.5px; }
.msg-citacao span { display: block; font-size: 13px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.msg-bolha.minha .msg-citacao { background: rgba(255, 255, 255, .18); border-left-color: #fff; }
/* foto */
.chat-mensagens .msg-bolha.msg-com-foto { padding: 4px; }
.msg-foto { display: block; }
.msg-foto img { display: block; max-width: min(320px, 100%); max-height: 360px; border-radius: 12px; object-fit: cover; }
.msg-bolha.msg-com-foto .msg-texto { display: block; padding: 6px 8px 0; }
.msg-bolha.msg-com-foto .msg-hora { padding: 2px 8px 4px; }
.msg-bolha.msg-com-foto .msg-citacao { margin: 2px 2px 6px; width: auto; }
/* apagada */
.chat-mensagens .msg-bolha.apagada { font-style: italic; background: transparent !important; border: 1px dashed var(--border) !important; color: var(--text-dim) !important; }
/* reações embaixo da bolha */
.msg-reacoes { display: flex; gap: 4px; margin: -6px 8px 0; position: relative; z-index: 1; }
.msg-reacao { border: 1px solid var(--border); background: var(--bg-card); border-radius: 999px; padding: 1px 7px; font-size: 13px; cursor: pointer; box-shadow: var(--shadow-sm); }
.msg-reacao.minha { border-color: var(--accent); background: var(--accent-dim); }
/* barrinha de ações: passa o mouse (computador) ou toca na bolha (celular) */
.msg-acoes { position: absolute; top: -38px; display: none; gap: 2px; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-md); padding: 3px; z-index: 3; white-space: nowrap; }
.msg-linha:not(.minha) .msg-acoes { left: 0; }
.msg-linha.minha .msg-acoes { right: 0; }
@media (hover: hover) { .msg-linha:hover .msg-acoes { display: flex; } }
.msg-linha.acoes-abertas .msg-acoes { display: flex; }
.msg-acao-emoji, .msg-acao { border: 0; background: none; font-size: 18px; width: 32px; height: 30px; border-radius: 999px; cursor: pointer; padding: 0; }
.msg-acao-emoji:hover, .msg-acao:hover { background: var(--bg-card-hover); transform: scale(1.15); }
.msg-acao-apagar.confirmar { width: auto; padding: 0 10px; font-size: 12px; font-weight: 700; color: #fff; background: var(--red); transform: none; }
/* topo: apagar conversa */
.chat-topo-acoes { margin: 0 0 0 auto; }
.chat-topo-btn { border: 0; background: none; font-size: 18px; cursor: pointer; padding: 8px; border-radius: 10px; }
.chat-topo-btn:hover { background: var(--bg-card-hover); }
/* caixa de envio: foto, emojis, respondendo */
.chat-ferramenta { flex-shrink: 0; width: 40px; height: 46px; border: 0; background: transparent; font-size: 22px; cursor: pointer; border-radius: 12px; padding: 0; }
.chat-ferramenta:hover { background: var(--bg-card-hover); }
.chat-compor-extra { padding: 10px 18px 0; border-top: 1px solid var(--border); }
.chat-compor-extra + .chat-emojis + .chat-enviar, .chat-compor-extra:not([hidden]) ~ .chat-enviar { border-top: 0; }
.chat-respondendo, .chat-foto-previa { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 12px; padding: 8px 12px; border-left: 3px solid var(--accent); margin-bottom: 6px; }
.chat-respondendo span, .chat-foto-previa span { flex: 1; min-width: 0; }
.chat-respondendo strong { display: block; font-size: 12.5px; }
.chat-respondendo small { display: block; font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-foto-previa img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.chat-foto-previa span { font-size: 13.5px; font-weight: 600; }
.chat-x { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--text-dim); padding: 4px 6px; border-radius: 8px; }
.chat-x:hover { background: var(--bg-card-hover); color: var(--text); }
.chat-emojis { position: absolute; bottom: 84px; left: 18px; width: min(360px, calc(100% - 36px)); max-height: 300px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 10px 12px; z-index: 5; }
.chat-emojis-titulo { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); margin: 6px 2px; }
.chat-emojis-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.chat-emojis-grade button { border: 0; background: none; font-size: 22px; height: 38px; border-radius: 10px; cursor: pointer; padding: 0; }
.chat-emojis-grade button:hover { background: var(--bg-card-hover); transform: scale(1.15); }
@media (max-width: 720px) {
  .chat-ferramenta { width: 34px; font-size: 20px; }
  .chat-enviar { gap: 6px; padding: 10px; }
  .chat-enviar .btn { padding: 0 14px; }
}
/* a pilha de mensagens tem altura fixa com rolagem: nenhum item pode ser espremido (senão a bolha fica menor que o conteúdo) */
.chat-mensagens > * { flex-shrink: 0; }
/* foto com largura de verdade (antes encolhia junto com a bolha) */
.chat-mensagens .msg-bolha.msg-com-foto { max-width: min(72%, 330px); }
.msg-foto img { width: min(320px, 62vw); max-width: 100%; height: auto; }

/* ===== Publicações de perfil ("No que você está pensando hoje?", só amigos) — 2026-10-10 ===== */
.ini-composer-form { margin: 0; }
.ini-composer textarea.ini-composer-campo { resize: none; border: none; border-radius: 999px; padding: 12px 18px; font-family: var(--fonte); font-size: 14.5px; line-height: 1.4; color: var(--text); background: var(--bg-card-hover); min-height: 44px; overflow: hidden; cursor: text; }
.ini-composer textarea.ini-composer-campo::placeholder { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-composer textarea.ini-composer-campo.multilinha { border-radius: 16px; overflow-y: auto; }
.ini-composer-previa { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 6px; }
.ini-composer-previa[hidden] { display: none; }
/* a regra global de label (coluna + margem) desmontava os botões Foto/Vídeo */
label.ini-composer-ic { flex-direction: row; margin-bottom: 0; font-size: 13.5px; color: var(--text-dim); }
label.ini-composer-ic:hover { color: var(--text); }
.ini-composer-anexo { position: relative; display: inline-flex; }
.ini-composer-anexo img { height: 96px; max-width: 160px; object-fit: cover; border-radius: 10px; display: block; }
.ini-composer-anexo-video { display: inline-flex; align-items: center; padding: 10px 34px 10px 12px; border-radius: 10px; background: var(--bg-card-hover); font-size: 13px; font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-composer-anexo button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(11,26,74,.75); color: #fff; font-size: 12px; cursor: pointer; line-height: 1; }
.ini-composer-privacidade { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.ini-composer-privacidade + .ini-composer-publicar { margin-left: 8px; }
.ini-composer-publicar:disabled { opacity: .6; cursor: wait; }
.fp-texto-grande { font-size: 20px; line-height: 1.4; }
.fp-video { display: block; width: 100%; max-height: 480px; border-radius: 12px; background: #000; margin-bottom: 6px; }
.fp-status-foto-link { display: block; margin-bottom: 8px; }
.fp-status-foto { display: block; width: 100%; max-height: 640px; object-fit: contain; background: var(--bg-card-hover); border-radius: 12px; }
.fp-topo form { margin-left: auto; }
.fp-status-aberto { margin-bottom: 18px; }
.fp-status-aberto .fp-texto { font-size: 16px; }
.fp-status-aberto .fp-texto.fp-texto-grande { font-size: 22px; }
.pf-publicacoes { margin-bottom: 18px; }
.pf-publicacoes .ini-composer-acoes { margin-bottom: 14px; }
/* menu ⋯ da publicação de perfil (Editar / Excluir) */
.fp-menu { position: relative; margin-left: auto; align-self: flex-start; }
.fp-menu > summary { list-style: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--text-dim); line-height: 1; user-select: none; }
.fp-menu > summary::-webkit-details-marker { display: none; }
.fp-menu > summary:hover, .fp-menu[open] > summary { background: var(--bg-card-hover); color: var(--text); }
.fp-menu-lista { position: absolute; right: 0; top: 40px; z-index: 30; min-width: 210px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(11,26,74,.16); padding: 6px; display: flex; flex-direction: column; }
.fp-menu-lista a, .fp-menu-lista button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; cursor: pointer; }
.fp-menu-lista a:hover, .fp-menu-lista button:hover { background: var(--bg-card-hover); text-decoration: none; }
.fp-menu-lista form { margin: 0; }
.fp-menu-lista .fp-menu-perigo { color: var(--red, #d93636); }
/* tela de editar publicação */
.st-editar { display: flex; flex-direction: column; gap: 14px; }
.st-editar textarea { width: 100%; resize: vertical; min-height: 120px; font-size: 16px; line-height: 1.5; }
.st-editar-midia { display: flex; flex-direction: column; gap: 8px; }
.st-editar-midia img, .st-editar-midia video { max-width: 100%; max-height: 220px; border-radius: 12px; align-self: flex-start; background: var(--bg-card-hover); }
.st-editar-opcao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--text); }
.st-editar-opcao input[type=file] { flex: 1 1 220px; min-width: 0; font-weight: 400; }
label.st-editar-rotulo { display: inline; margin: 0; font-size: 14px; color: var(--text); cursor: pointer; }
.st-editar-rodape { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 760px) {
  .ini-composer-privacidade { display: none; }
  .ini-composer-privacidade + .ini-composer-publicar { margin-left: auto; }
  .fp-texto-grande { font-size: 18px; }
}

/* ===== Perfil no layout novo (10/10/2026) — classes pf2-* ===== */
.pf2-cabecalho { background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.pf2-capa { position: relative; height: 270px; border-radius: 22px 22px 0 0; background-size: cover; background-position: center; background-color: #0b1a4a; }
.pf2-capa.sem-capa { background-image: linear-gradient(120deg, #0066ff, #8a2be2 55%, #ff2d6f); }
.pf2-editar-capa { position: absolute; right: 18px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.85); background: rgba(11,26,74,.55); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; backdrop-filter: blur(4px); }
.pf2-editar-capa:hover { background: rgba(11,26,74,.75); color: #fff; text-decoration: none; }
.pf2-info { display: grid; grid-template-columns: auto 1fr auto; gap: 0 26px; padding: 0 28px 6px; }
.pf2-foto-area { position: relative; width: 200px; height: 200px; margin-top: -104px; }
.pf2-foto { display: block; width: 200px; height: 200px; border-radius: 50%; padding: 5px; background: linear-gradient(135deg, #ff2d6f, #c026d3 45%, #8a2be2 70%, #0066ff); box-shadow: 0 10px 30px rgba(11,26,74,.25); box-sizing: border-box; }
.pf2-foto img, .pf2-foto .avatar { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; border: 5px solid var(--bg-card); box-sizing: border-box; display: flex; font-size: 64px !important; }
.pf2-foto-camera { position: absolute; right: 10px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: #0b1a4a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; border: 3px solid var(--bg-card); text-decoration: none; }
.pf2-foto-camera:hover { background: #1b2f73; text-decoration: none; }
.pf2-dados { padding-top: 14px; min-width: 0; }
.pf2-dados h1 { margin: 0; font-size: 31px; font-weight: 800; line-height: 1.15; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf2-username { color: var(--text-dim); font-size: 14.5px; margin: 2px 0 10px; }
.pf2-bio, .pf2-interesses { margin: 0 0 3px; font-size: 15.5px; color: var(--text); line-height: 1.45; }
.pf2-interesses { color: color-mix(in srgb, var(--text) 80%, var(--text-dim)); }
.pf2-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 10px; color: var(--text-dim); font-size: 14.5px; }
.pf2-meta span { display: inline-flex; align-items: center; gap: 7px; }
.pf2-meta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf2-acoes { padding-top: 18px; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pf2-acoes form { margin: 0; }
.pf2-btn-editar { background: var(--bg-card) !important; color: var(--text) !important; border: 1.5px solid var(--border) !important; font-weight: 700; box-shadow: var(--shadow-sm); }
.pf2-btn-editar:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important; }
.pf2-btn-icone { width: 46px; height: 46px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card) !important; color: var(--text) !important; border: 1.5px solid var(--border) !important; box-shadow: var(--shadow-sm); }
.pf2-btn-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf2-menu > summary { width: 46px; height: 46px; border: 1.5px solid var(--border); background: var(--bg-card); border-radius: 12px; }
.pf2-numeros { display: grid; grid-template-columns: repeat(6, 1fr); margin: 14px 28px 0; padding: 14px 0 18px; border-top: 1px solid var(--border); }
.pf2-numeros a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--text-dim); font-size: 14px; border-left: 1px solid var(--border); }
.pf2-numeros a:first-child { border-left: 0; }
.pf2-numeros a strong { font-size: 21px; font-weight: 800; color: var(--text); }
.pf2-numeros a:hover { text-decoration: none; }
.pf2-numeros a:hover strong { color: var(--accent); }
.pf2-abas { display: flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; padding: 0 10px; }
.pf2-abas::-webkit-scrollbar { display: none; }
.pf2-abas a { position: relative; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 17px 14px; color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.pf2-abas a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf2-abas a:hover { color: var(--accent); text-decoration: none; }
.pf2-abas a.ativa { color: #c026d3; }
.pf2-abas a.ativa::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #8a2be2, #ff2d6f); }
.pf2-grade { margin-top: 0; }
.pf2 .pf-publicacoes .ini-composer-acoes { margin-bottom: 14px; }
/* lateral */
.pf2-rail .com-secao-topo h3 { font-size: 17px; font-weight: 800; margin: 0; }
.pf2-rail .ver-todos-mini { font-size: 13.5px; }
.pf2-amigos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.pf2-amigos a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text); font-size: 12.5px; font-weight: 600; min-width: 0; }
.pf2-amigos a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf2-amigo-foto { position: relative; display: block; width: 62px; height: 62px; }
.pf2-amigo-foto img, .pf2-amigo-foto .avatar { width: 62px !important; height: 62px !important; border-radius: 50% !important; object-fit: cover; border: 2px solid var(--bg-card); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.pf2-online { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 2.5px solid var(--bg-card); }
.pf2-amigos-mais span { width: 62px; height: 62px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--bg-card-hover)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--text); }
.pf2-comunidades { display: flex; flex-direction: column; margin-top: 8px; }
.pf2-comunidade { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pf2-comunidade:last-child { border-bottom: 0; padding-bottom: 0; }
.pf2-comunidade-capa { width: 64px; height: 48px; border-radius: 10px; background-size: cover; background-position: center; background-color: #8a2be2; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; text-decoration: none; }
.pf2-comunidade-texto { min-width: 0; display: flex; flex-direction: column; }
.pf2-comunidade-texto a { font-weight: 700; font-size: 14.5px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf2-comunidade-texto small { color: var(--text-dim); font-size: 12.5px; }
.pf2-destaques { margin-top: 12px; }
.pf2-destaques-trilha { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.pf2-destaques-trilha::-webkit-scrollbar { display: none; }
.pf2-destaque { flex: 0 0 calc((100% - 3 * 8px) / 4); scroll-snap-align: start; aspect-ratio: 3 / 4.2; border-radius: 12px; background-size: cover; background-position: center; position: relative; overflow: hidden; color: #fff; text-decoration: none; }
.pf2-destaque span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 8px; background: linear-gradient(transparent, rgba(0,0,0,.75)); font-size: 11.5px; line-height: 1.25; }
.pf2-destaque strong { display: block; font-size: 14px; }
.pf2-destaque:hover { text-decoration: none; color: #fff; filter: brightness(1.06); }
.pf2-destaques .ini-carrossel-seta { top: 50%; width: 34px; height: 34px; font-size: 20px; }
.pf2-destaques .ini-carrossel-seta.esq { left: -12px; }
.pf2-destaques .ini-carrossel-seta.dir { right: -12px; }
/* abas: memórias, fotos, vídeos, eventos */
.pf2-memorias-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.pf2-memoria { aspect-ratio: 3 / 4; border-radius: 14px; background-size: cover; background-position: center; position: relative; overflow: hidden; color: #fff; text-decoration: none; }
.pf2-memoria.sem-foto { background-image: linear-gradient(135deg, #0066ff, #8a2be2 55%, #ff2d6f); }
.pf2-memoria-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 10px; background: linear-gradient(transparent, rgba(0,0,0,.75)); display: flex; flex-direction: column; font-size: 13px; }
.pf2-memoria-texto strong { font-size: 17px; }
.pf2-memoria:hover { color: #fff; text-decoration: none; filter: brightness(1.06); }
.pf2-fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 12px; }
.pf2-fotos-grade a { aspect-ratio: 1; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--bg-card-hover); }
.pf2-fotos-grade a:hover { filter: brightness(1.08); }
.pf2-videos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.pf2-video video { width: 100%; border-radius: 12px; background: #000; display: block; }
.pf2-video a { display: block; margin-top: 6px; font-weight: 600; font-size: 14px; color: var(--text); }
.pf2-eventos { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pf2-evento { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--text); }
.pf2-evento:hover { background: var(--bg-card-hover); text-decoration: none; }
.pf2-evento.passado { opacity: .7; }
.pf2-evento-data { flex: 0 0 58px; height: 62px; border-radius: 12px; background: linear-gradient(135deg, #8a2be2, #ff2d6f); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.pf2-evento-data strong { font-size: 22px; }
.pf2-evento-data small { text-transform: uppercase; font-size: 11.5px; font-weight: 700; }
.pf2-evento-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf2-evento-texto small { color: var(--text-dim); font-size: 13px; }
/* card de publicação: mosaico de 5 fotos (1 grande + 4) e local */
.fp-fotos-5 { grid-template-columns: 1.55fr 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9.6; }
.fp-fotos-5 .fp-foto:first-child { grid-row: 1 / 3; }
.fp-fotos-5 .fp-foto { aspect-ratio: auto; }
.fp-fotos-4 { aspect-ratio: 16 / 11; }
.ini-composer-local { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-top: none; margin-top: -11px; padding: 12px 16px 2px; }
.ini-composer-local input { flex: 1; min-width: 0; }
.ini-composer-local + .ini-composer-acoes { margin-top: 0; }
/* editar publicação: várias fotos */
.st-editar-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
label.st-editar-foto { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; color: var(--text); cursor: pointer; }
.st-editar-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.st-editar-foto span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
@media (max-width: 1100px) {
  .pf2-info { grid-template-columns: auto 1fr; }
  .pf2-acoes { grid-column: 1 / -1; justify-content: flex-start; padding-top: 12px; }
}
@media (max-width: 760px) {
  .pf2-capa { height: 170px; }
  .pf2-info { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 0 16px 4px; }
  .pf2-foto-area, .pf2-foto { width: 150px; height: 150px; }
  .pf2-foto-area { margin-top: -80px; }
  .pf2-foto-camera { right: 4px; bottom: 8px; width: 38px; height: 38px; }
  .pf2-dados h1 { font-size: 24px; justify-content: center; }
  .pf2-meta { justify-content: center; }
  .pf2-acoes { justify-content: center; }
  .pf2-numeros { grid-template-columns: repeat(3, 1fr); row-gap: 14px; margin: 12px 14px 0; }
  .pf2-numeros a:nth-child(4) { border-left: 0; }
  .pf2-numeros a strong { font-size: 18px; }
  .pf2-abas a { flex: 0 0 auto; padding: 14px 12px; font-size: 14px; }
  .pf2-editar-capa { right: 10px; bottom: 10px; padding: 7px 12px; font-size: 13px; }
}

/* "Vocês se cruzaram" como card na lateral do perfil (antes era uma faixa larga) */
.pf2-cruzaram { flex-direction: column; align-items: stretch; gap: 12px; padding: 20px; border-radius: 20px; margin-bottom: 16px; }
.pf2-cruzaram .pf-comum-texto { flex: none; }
.pf2-cruzaram h2 { font-size: 19px; }
.pf2-cruzaram .pf-comum-lugares { flex: none; grid-template-columns: 1fr; gap: 8px; }
.pf2-cruzaram .pf-comum-lugares li { padding: 10px 12px; }
.pf2-rail .com-secao-topo { flex-wrap: nowrap; gap: 8px; }
.pf2-rail .com-secao-topo h3 { white-space: nowrap; }
.pf2-rail .ver-todos-mini { white-space: nowrap; }
.pf2-rail .com-secao-topo h3 { font-size: 16.5px; }
.ini-composer-local[hidden] { display: none; }

/* ===== Comentar direto no feed (10/10/2026) — classes fc-* ===== */
.fc { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.fc-ver-todos { font-size: 13.5px; font-weight: 600; color: var(--text-dim); text-decoration: none; }
.fc-ver-todos:hover { color: var(--text); text-decoration: underline; }
.fc-lista { display: flex; flex-direction: column; gap: 8px; }
.fc-lista:empty { display: none; }
.fc-item { display: flex; gap: 8px; align-items: flex-start; }
.fc-item > a:first-child { flex-shrink: 0; }
.fc-bolha-area { min-width: 0; display: flex; flex-direction: column; }
.fc-bolha { background: var(--bg-card-hover); border-radius: 16px; padding: 8px 12px; font-size: 14px; line-height: 1.4; color: var(--text); word-break: break-word; }
.fc-nome { display: block; font-weight: 700; font-size: 13px; color: var(--text); text-decoration: none; }
.fc-nome:hover { text-decoration: underline; }
.fc-meta { display: flex; gap: 12px; align-items: center; padding: 3px 12px 0; font-size: 12px; color: var(--text-dim); }
.fc-curtir { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--text-dim); cursor: pointer; }
.fc-curtir:hover { color: var(--text); }
.fc-curtir.curtido { color: var(--accent); }
.fc-curtir .total-curtidas:not(:empty)::before { content: "· ❤ "; font-weight: 400; }
.fc-form { display: flex; gap: 8px; align-items: flex-end; position: relative; flex-wrap: wrap; }
.fc-form > .avatar, .fc-form > img { flex-shrink: 0; }
.fc-form textarea { flex: 1; min-width: 0; resize: none; min-height: 38px; max-height: 160px; border-radius: 19px; padding: 9px 44px 9px 14px; font-size: 14px; line-height: 1.35; background: var(--bg-card-hover); border: 1px solid transparent; }
.fc-form textarea:focus { background: var(--bg-card); border-color: var(--border); }
.fc-enviar { position: absolute; right: 6px; bottom: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #8a2be2, #ff2d6f); color: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fc-enviar:hover { filter: brightness(1.1); }
.fc-erro { flex-basis: 100%; font-size: 13px; color: var(--red, #d93636); padding-left: 40px; }

/* ===== Reações no botão Curtir (partials/reagir.php) ===== */
.fp-reagir { position: relative; flex: 1; display: flex; }
.fp-reagir .fp-reagir-principal { flex: 1; }
.fp-reagir-principal.curtido { color: var(--accent); }
.fp-reagir-opcoes { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(6px); display: flex; gap: 2px; padding: 6px 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 10px 30px rgba(11,26,74,.18); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 15; }
.fp-reagir:hover .fp-reagir-opcoes, .fp-reagir:focus-within .fp-reagir-opcoes { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.fp-reagir-opcoes::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } /* ponte: dá pra levar o mouse do botão até os emojis */
.fp-reagir-opcoes .reacao-btn { font-size: 24px; padding: 4px 6px; opacity: 1; transition: transform .12s; }
.fp-reagir-opcoes .reacao-btn:hover { transform: scale(1.3) translateY(-3px); background: none; }
.fp-reagir-opcoes .reacao-btn.ativa { background: var(--accent-dim); }

/* ===== Galeria em tela cheia (assets/js/galeria.js) ===== */
[data-galeria] [data-indice], [data-galeria][data-indice] { cursor: zoom-in; }
.galeria { position: fixed; inset: 0; z-index: 1000; background: rgba(6, 10, 30, .94); display: flex; align-items: center; justify-content: center; }
.galeria-palco { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 60px 80px; box-sizing: border-box; }
.galeria-palco img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.galeria-fechar { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; cursor: pointer; z-index: 2; }
.galeria-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; padding-bottom: 4px; }
.galeria-seta:hover, .galeria-fechar:hover { background: rgba(255,255,255,.26); }
.galeria-seta.esq { left: 18px; }
.galeria-seta.dir { right: 18px; }
.galeria.uma-so .galeria-seta, .galeria.uma-so .galeria-contador { display: none; }
.galeria-rodape { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; color: #fff; font-size: 14px; font-weight: 600; }
.galeria-rodape a { color: #fff; opacity: .85; }
@media (max-width: 760px) {
  .galeria-palco { padding: 56px 8px 56px; }
  .galeria-seta { width: 40px; height: 40px; font-size: 24px; background: rgba(255,255,255,.18); }
  .galeria-seta.esq { left: 6px; }
  .galeria-seta.dir { right: 6px; }
}

/* ===== Quem vê a publicação (Amigos / Público) ===== */
select.ini-composer-privacidade { width: auto; padding: 7px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--bg-card-hover); border: 1px solid var(--border); cursor: pointer; }
select.st-editar-visibilidade { width: auto; padding: 4px 8px; font-size: 12.5px; border-radius: 8px; margin-top: 2px; }
.ini-composer { position: relative; } /* a lista do @ abre embaixo do campo */
@media (max-width: 760px) {
  select.ini-composer-privacidade { display: inline-block; }
}

/* ===== "Ver como visitante" no perfil ===== */
.pf2-faixa-visitante { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: linear-gradient(90deg, #0b1a4a, #3b1a6e); color: #fff; padding: 12px 18px; border-radius: 14px; margin-bottom: 14px; font-size: 14.5px; }
.pf2-faixa-visitante strong { color: #fff; }
.pf2-btn-icone { font-size: 19px; }

/* ===== Admin: limpar dados de teste ===== */
.lt-form, .lt-perigo { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
label.lt-opcao { flex-direction: row; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; font-size: 14.5px; color: var(--text); cursor: pointer; }
label.lt-opcao input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
label.lt-opcao small { display: block; color: var(--text-dim); margin-top: 4px; font-size: 13px; }
.lt-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.lt-perigo { border: 2px dashed color-mix(in srgb, var(--red, #d93636) 45%, var(--border)); border-radius: 14px; padding: 16px; }
.lt-perigo input[type=text] { max-width: 220px; font-weight: 700; letter-spacing: .08em; }
.lt-perigo small { color: var(--text-dim); }
.lt-resultado.simulado { border-left: 5px solid #0066ff; }
.lt-resultado.feito { border-left: 5px solid #22c55e; }
.lt-resultado ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.8; }

/* ===== Rolagem infinita do feed ===== */
.feed-carregando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; color: var(--text-dim); font-size: 14px; font-weight: 600; }
.feed-carregando-bolinha { width: 18px; height: 18px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: feed-girar .8s linear infinite; }
@keyframes feed-girar { to { transform: rotate(360deg); } }
.feed-fim { text-align: center; color: var(--text-dim); font-size: 14px; padding: 18px 0 6px; margin: 0; }