/* ===== Tema: modo claro/escuro (data-theme) × cor de destaque (data-accent) =====
   Cada cor de destaque tem um par claro/escuro calibrado à mão — escolhido pra
   sempre contrastar com o fundo do modo atual (ex: "preto" vira um tom bem claro
   no modo escuro, nunca preto-no-preto). Ver js/tema.js. */
:root {
  --cream: #faf6ef;
  --paper: #ffffff;
  --ink: #2b2420;
  --ink-soft: #5c5147;
  --muted: #8a7f73;
  --line: #e7dfd3;
  --accent: #c09860;
  --accent-dark: #a3814f;
  --accent-contrast: #211e18;
  --forest: #3a5a40;
  --gold: #b8863b;
  --radius: 10px;
  --font-serif: "Segoe UI Semibold", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --cream: #11141b;
  --paper: #1a1f29;
  --ink: #edf0f5;
  --ink-soft: #c2c9d4;
  --muted: #818a99;
  --line: #2b3240;
}

/* Cor de destaque — modo claro (padrão = dourado, da logo). --accent-contrast
   sempre explícito em cada bloco — nunca herdado, pra não depender de ordem. */
:root[data-accent="dourado"] { --accent: #c09860; --accent-dark: #a3814f; --accent-contrast: #211e18; }
:root[data-accent="marrom"] { --accent: #7a2e2e; --accent-dark: #5e2222; --accent-contrast: #ffffff; }
:root[data-accent="preto"]  { --accent: #1a1a1a; --accent-dark: #000000; --accent-contrast: #ffffff; }
:root[data-accent="roxo"]   { --accent: #6b3fa0; --accent-dark: #51307b; --accent-contrast: #ffffff; }
:root[data-accent="azul"]   { --accent: #2a5d8f; --accent-dark: #1f4770; --accent-contrast: #ffffff; }
:root[data-accent="verde"]  { --accent: #3a6b4a; --accent-dark: #2b5038; --accent-contrast: #ffffff; }
:root[data-accent="vermelho"] { --accent: #a83232; --accent-dark: #832525; --accent-contrast: #ffffff; }
:root[data-accent="rosa"]   { --accent: #a83e6b; --accent-dark: #832f52; --accent-contrast: #ffffff; }
:root[data-accent="laranja"] { --accent: #c06a1f; --accent-dark: #975218; --accent-contrast: #ffffff; }

/* Cor de destaque — modo escuro: sempre uma variante clara da mesma família,
   pra continuar visível sobre fundo escuro mesmo quando a escolha é "preto".
   --accent-contrast também vira escuro aqui, porque o destaque virou claro. */
:root[data-theme="dark"][data-accent="dourado"] { --accent: #d9b685; --accent-dark: #e8cca3; --accent-contrast: #211e18; }
:root[data-theme="dark"][data-accent="marrom"] { --accent: #e0a3a3; --accent-dark: #eec4c4; --accent-contrast: #2b1414; }
:root[data-theme="dark"][data-accent="preto"]  { --accent: #e8e8e8; --accent-dark: #ffffff; --accent-contrast: #141414; }
:root[data-theme="dark"][data-accent="roxo"]   { --accent: #c9a6f0; --accent-dark: #ddc4f7; --accent-contrast: #241840; }
:root[data-theme="dark"][data-accent="azul"]   { --accent: #8fc2f0; --accent-dark: #b3d8f7; --accent-contrast: #0f2840; }
:root[data-theme="dark"][data-accent="verde"]  { --accent: #92d4a8; --accent-dark: #b6e4c4; --accent-contrast: #103420; }
:root[data-theme="dark"][data-accent="vermelho"] { --accent: #ec9a9a; --accent-dark: #f3bcbc; --accent-contrast: #3c0f0f; }
:root[data-theme="dark"][data-accent="rosa"]   { --accent: #f0a0c8; --accent-dark: #f6c3dd; --accent-contrast: #3c1428; }
:root[data-theme="dark"][data-accent="laranja"] { --accent: #f0ab5e; --accent-dark: #f5c48c; --accent-contrast: #3c2208; }

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
}

body {
  padding-top: 0;
}

a {
  color: var(--accent);
}

h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: 1.25;
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Topo mobile (barra fixa compacta + menu sanduíche) ---------- */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  height: 52px;
  background: #202838;
  color: #f1ece2;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.mobile-topbar .hamburger {
  background: none;
  border: none;
  color: #f1ece2;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 190;
}

.sidebar-backdrop.open {
  display: block;
}

.brand {
  display: flex;
  align-items: center;
}

/* A arte da logo é um quadrado (ícone + palavra CLIO + lema). Mostramos ela
   inteira, só reduzida — a palavra fica pequena mas legível, e evita qualquer
   recorte errado (já tentamos recortar só o ícone e deu problema). */
.brand img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: block;
}

.mobile-topbar .brand img {
  width: 32px;
  height: 32px;
}

.avatar-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---------- Botões / forms ---------- */
.btn {
  font-family: var(--font-sans);
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  background: var(--accent-dark);
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn.ghost:hover {
  background: var(--paper);
}

.btn.small {
  padding: 6px 10px;
  font-size: 12px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Ação discreta, tipo link — ex: "Editar perfil" não precisa competir
   visualmente com "Seguir" ou os botões de ação principal da página. */
.btn-sutil {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}

.btn-sutil:hover {
  color: var(--ink);
}

input, textarea, select {
  font-family: var(--font-sans);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
}

label {
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Layout geral ---------- */
main {
  padding: 32px 0 64px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}

.hero {
  text-align: center;
  padding: 40px 0;
}

.hero h1 {
  font-size: clamp(32px, 6vw, 48px);
  margin-bottom: 8px;
}

.hero p {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto;
}

.hint {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Modal de login ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 36, 32, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 380px;
}

.modal h2 {
  margin-top: 0;
}

.modal-close {
  float: right;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
}

.modal-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.modal-tabs button {
  background: none;
  border: none;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.modal-tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.form-error {
  color: var(--accent);
  font-size: 13px;
}

.form-success {
  color: var(--forest);
  font-size: 13px;
}

/* ---------- Abas da biblioteca ---------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.tabs button {
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--gold);
}

/* ---------- Grid de livros ---------- */
.livros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.livro-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.livro-capa {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--line);
}

.livro-titulo {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}

.livro-autor {
  font-size: 12px;
  color: var(--ink-soft);
}

.status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 999px;
  width: fit-content;
}

.status-lendo { background: #e8f0e4; color: var(--forest); }
.status-parado { background: #f5e8d8; color: var(--gold); }
.status-lido { background: #eee; color: var(--ink-soft); }
.status-nao_iniciado { background: var(--line); color: var(--muted); }

.posse-flags {
  display: flex;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
}

.livro-acoes {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.empty-hint {
  color: var(--muted);
  padding: 32px;
  text-align: center;
  font-size: 14px;
}

/* ---------- Perfil ---------- */
/* Capa do perfil, estilo LinkedIn: sangra até a borda do card e o avatar
   sobrepõe a base dela. */
.perfil-capa {
  height: 160px;
  margin: -22px -22px 0;
  background-size: cover;
  background-position: center;
  background-color: var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}

.perfil-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: 16px;
}

.avatar-grande {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
  flex-shrink: 0;
}

/* Só o avatar sobrepõe a capa (como no LinkedIn) — o nome e o resto do
   texto ficam abaixo dela, sem risco de ficar ilegível por cima da imagem. */
.perfil-header.com-capa .avatar-grande {
  margin-top: -58px;
  border: 3px solid var(--paper);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  display: inline-block;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  margin: 2px 4px 2px 0;
  font-size: 12px;
  line-height: 1.4;
}

.stat-row {
  display: flex;
  gap: 18px;
  font-size: 14px;
  margin: 10px 0;
}

.stat-row strong {
  color: var(--accent);
}

.usuario-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.usuario-card:last-child {
  border-bottom: none;
}

/* ---------- Modal de detalhe do livro ---------- */
.modal.modal-livro {
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
}

.livro-detalhe-topo {
  display: flex;
  gap: 16px;
}

.livro-detalhe-capa {
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--line);
  flex-shrink: 0;
}

.estrelas {
  display: flex;
  gap: 2px;
  font-size: 22px;
  cursor: pointer;
}

.estrelas .estrela {
  color: var(--line);
}

.estrelas .estrela.cheia {
  color: var(--gold);
}

.media-nota {
  font-size: 13px;
  color: var(--ink-soft);
}

.shelf-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.shelf-toggle button {
  font-family: var(--font-sans);
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.shelf-toggle button.ativo {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

/* Grade de volumes (mangá/novel): um botão numerado por volume, marcado
   quando a pessoa tem aquele volume específico. */
.volumes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
}

.volume-btn {
  font-family: var(--font-sans);
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 6px;
  padding: 6px 2px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-soft);
}

.volume-btn.ativo {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
  font-weight: 700;
}

.acervo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.acervo-card {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--paper);
  text-align: left;
}

.acervo-card:hover {
  border-color: var(--gold);
}

/* Indica se o leitor logado já tem o título (✔ verde) ou se está na lista
   de desejos dele (★ dourada). */
.posse-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.posse-badge.check {
  background: var(--forest);
}

.posse-badge.desejo {
  background: var(--gold);
  color: #3a2a00;
}

footer.site-footer {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 24px 0 40px;
}

/* ---------- Layout do app: barra lateral fixa + conteúdo, em todas as páginas ---------- */
.feed-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
  padding-top: 20px;
}

.sidebar {
  position: sticky;
  top: 20px;
  /* Se o menu for mais alto que a tela, ele rola por conta própria (em vez
     de ficar com a parte de baixo inacessível até rolar toda a lista de
     livros do conteúdo principal). */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 820px) {
  .feed-layout {
    grid-template-columns: 1fr;
    padding-top: 10px;
  }

  .mobile-topbar {
    display: flex;
  }

  body {
    padding-top: 52px;
  }

  /* No celular a barra lateral vira um menu "sanduíche": fica fora da tela e
     desliza por cima do conteúdo quando aberta, como no Instagram. */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -280px;
    width: 260px;
    z-index: 200;
    background: var(--paper);
    padding: 16px 14px;
    margin: 0;
    overflow-y: auto;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
    transition: left 0.25s ease;
  }

  .sidebar.open {
    left: 0;
  }
}

.sidebar-perfil {
  text-align: center;
}

.sidebar-capa {
  height: 56px;
  margin: -22px -22px 0;
  background-size: cover;
  background-position: center;
  background-color: var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}

.sidebar-perfil .avatar-grande {
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  display: block;
}

.sidebar-perfil .avatar-grande.sobre-capa {
  margin-top: -36px;
  border: 3px solid var(--paper);
}

.sidebar-perfil .nome {
  font-weight: 700;
  font-family: var(--font-serif);
}

.stats-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 6px 4px;
  text-align: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.stats-row a, .stats-row div, .stats-row span {
  text-decoration: none;
  color: inherit;
  font-size: 11px;
  color: var(--ink-soft);
}

.stats-row strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
  font-family: var(--font-serif);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.sidebar-nav .secao-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 10px 0 2px;
}

.sidebar-nav a {
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
}

.sidebar-nav a:hover {
  background: var(--cream);
}

/* ---------- Feed: composer e publicações ---------- */
.composer textarea {
  width: 100%;
  resize: vertical;
}

.mencao-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  font-size: 12px;
  margin: 2px 4px 2px 0;
}

.mencao-chip img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
}

.mencao-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  padding: 0;
}

.mencao-busca-resultados {
  position: relative;
}

.mencao-busca-lista {
  position: absolute;
  z-index: 10;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
}

.mencao-busca-lista button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-sans);
}

.mencao-busca-lista button:hover {
  background: var(--cream);
}

.mencao-busca-lista img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--line);
}

.publicacao {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 16px 28px 16px 0;
  transition: background-color 1.2s ease;
}

.publicacao.destacada {
  background-color: rgba(192, 152, 96, 0.18);
}

.publicacao-excluir {
  position: absolute;
  top: 14px;
  right: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.publicacao-excluir:hover {
  color: var(--ink);
}

.publicacao-imagem {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  margin-top: 8px;
}

/* ---------- Reações (posts e comentários) ---------- */
.reacoes-barra {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.reacao-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-soft);
}

.reacao-btn.mini {
  font-size: 11px;
  padding: 1px 6px;
}

.reacao-btn:hover {
  background: var(--cream);
}

.reacao-btn.ativa {
  border-color: var(--accent);
  background: rgba(192, 152, 96, 0.15);
  color: var(--ink);
}

/* ---------- Comentários em publicações ---------- */
.comentarios-area {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.comentario-item {
  display: flex;
  gap: 6px;
  padding: 6px 0;
  font-size: 12px;
  position: relative;
  border-radius: 8px;
  transition: background-color 1.2s ease;
}

.comentario-item.destacada {
  background-color: rgba(192, 152, 96, 0.18);
}

.comentario-corpo {
  flex: 1;
}

.comentario-texto {
  background: var(--cream);
  border-radius: 10px;
  padding: 6px 10px;
  display: inline-block;
}

.comentario-excluir {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}

.comentario-excluir:hover {
  color: var(--ink);
}

.comentario-form {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.comentario-form input {
  flex: 1;
}

/* ---------- Rankings ---------- */
.ranking-card {
  margin-bottom: 14px;
}

.ranking-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--line);
  border-radius: 6px;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-item.posicao-1 { background: rgba(212, 175, 55, 0.14); }
.ranking-item.posicao-2 { background: rgba(170, 170, 170, 0.14); }
.ranking-item.posicao-3 { background: rgba(176, 108, 60, 0.14); }

.ranking-posicao {
  width: 26px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}

.ranking-pessoa {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.livro-capa-mini {
  width: 24px;
  height: 34px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--line);
  flex-shrink: 0;
}

.ranking-valor {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Emblemas de ranking no perfil ---------- */
.emblemas-perfil {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* Ícone compacto (só a medalha) — o nome da categoria vira dica no hover
   (title) pra não ocupar espaço perto do nome. */
.emblema-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  cursor: default;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
}

.emblema-badge.posicao-1 { background: rgba(212, 175, 55, 0.22); border-color: rgba(212, 175, 55, 0.55); }
.emblema-badge.posicao-2 { background: rgba(170, 170, 170, 0.22); border-color: rgba(170, 170, 170, 0.55); }
.emblema-badge.posicao-3 { background: rgba(176, 108, 60, 0.22); border-color: rgba(176, 108, 60, 0.55); }

/* ---------- Recados (scraps): avatar + nome empilhados à esquerda, texto livre ---------- */
.recado-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
  transition: background-color 1.2s ease;
}

.recado-item:last-child {
  border-bottom: none;
}

.recado-item.destacada {
  background-color: rgba(192, 152, 96, 0.18);
}

.recado-autor {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  gap: 2px;
}

.recado-autor img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
}

.recado-autor span {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

.recado-corpo {
  flex: 1;
  min-width: 0;
}

.recado-texto {
  font-size: 13px;
  margin: 0 0 4px;
}

/* ---------- Sino de notificações (botão flutuante fixo) ---------- */
.sino-wrap {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 120;
}

@media (max-width: 820px) {
  .sino-wrap {
    top: 60px;
    right: 10px;
  }
}

.sino-btn {
  position: relative;
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sino-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #c0392b;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.sino-painel {
  position: absolute;
  top: 40px;
  right: 0;
  width: 280px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  padding: 10px;
}

.sino-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 8px;
}

.sino-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 12px;
}

.sino-item:hover {
  background: var(--cream);
}

.sino-item.nao-lida {
  background: rgba(192, 152, 96, 0.14);
}

.publicacao:first-child {
  padding-top: 0;
}

.publicacao-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.publicacao-texto {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

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