/* =====================================================================
   Sublinhadas — folha de estilo

   O princípio aqui é subtração. A versão anterior punha caixa em volta
   de tudo: cartão cinza dentro de cartão cinza, quadradinho colorido
   atrás de cada ícone, pílula em cada botão. Aquilo dá a sensação de
   template pronto.

   Agora: a página é a superfície. O que separa as coisas é o espaço em
   branco e um fio de 1px. Caixa só existe quando o conteúdo é mesmo um
   objeto (a capa de um livro, um diálogo, o cartão do livro do mês).
   Uma cor de destaque, usada com parcimônia. Sombra só no que flutua.
   ===================================================================== */

:root{
  /* superfícies — papel quentinho */
  --fundo:#FFFCF8;
  --fundo-2:#F6F2EA;        /* o cinza que sobrou: só campos e trilhos */
  --fundo-3:#EDE7DC;
  --fio:#E8E1D5;            /* o fio de 1px que separa quase tudo */
  --fio-forte:#DBD2C3;

  /* tinta */
  --tinta:#2E2A26;
  --tinta-2:#78716A;
  --tinta-3:#A9A199;

  /* marca */
  --acento:#3C7358;
  --acento-escuro:#2F5B46;
  --acento-claro:#EDF3EF;
  --marca:#FFDFA2;          /* o grifo */

  /* situações de leitura */
  --lendo:#C98A2E;
  --lendo-claro:#FBF1E1;
  --fila:#5C87BE;
  --fila-claro:#EBF0F8;
  --lido:#4E9B77;
  --lido-claro:#E9F3EE;
  --perigo:#B85A50;
  --perigo-claro:#FAEDEB;

  /* medidas: uma escala só, para tudo cair no mesmo ritmo */
  --r-p:10px;
  --r:14px;
  --r-g:20px;
  --coluna:620px;
  --barra-h:52px;
  --nav-h:58px;
  --sombra-flutua:0 6px 20px -8px rgba(46,42,38,.28);
  --sombra-alta:0 12px 40px -12px rgba(46,42,38,.35);
  --sombra-capa:0 6px 16px -8px rgba(46,42,38,.5);
  --seguro-baixo:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--fundo);
  color:var(--tinta);
  font-family:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:500;letter-spacing:-.012em;line-height:1.22}
h1{font-size:1.6rem;font-weight:400}
h2{font-size:1.12rem}
h3{font-size:1rem;font-weight:600;font-family:"Karla",system-ui,sans-serif;letter-spacing:0}
em{font-style:italic}
a{color:var(--acento-texto,var(--acento));text-underline-offset:3px}
small{font-size:13px}
.ico{flex:0 0 auto;vertical-align:-.22em}

/* o rótulo pequeno acima de uma seção — sem caixa-alta gritada */
.olho{font-size:13px;font-weight:600;color:var(--tinta-2);margin-bottom:.4rem}
.meta{font-size:13.5px;color:var(--tinta-2)}
.linha-ico{display:flex;align-items:center;gap:.35rem}
.linha-ico .ico{flex:0 0 auto;color:var(--tinta-3)}

/* o grifo, que dá nome ao clube */
.grifo{position:relative;display:inline-block;isolation:isolate}
.grifo::before{
  content:"";position:absolute;left:-.06em;right:-.1em;bottom:.05em;height:.42em;
  background:var(--marca);border-radius:2px;rotate:-.6deg;z-index:-1;
}

/* =====================================================================
   A casca
   ===================================================================== */

.barra-app{
  position:fixed;top:0;left:0;right:0;z-index:40;height:var(--barra-h);
  display:flex;align-items:center;gap:.25rem;padding:0 .3rem;
  background:var(--fundo);border-bottom:1px solid var(--fio);
}
.barra-app .titulo{
  flex:1;min-width:0;text-align:center;font-size:15.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .2rem;
}
.barra-app .marca{
  font-family:"Newsreader",Georgia,serif;font-size:1.2rem;color:var(--tinta);
  text-decoration:none;letter-spacing:-.02em;
}
.barra-app .marca b{font-weight:500;box-shadow:inset 0 -6px 0 var(--marca)}
.barra-app .esq,.barra-app .dir{display:flex;align-items:center;gap:.1rem;min-width:42px}
.barra-app .dir{justify-content:flex-end}

/* o nome do clube, quando dá para trocar */
.barra-app .titulo-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.2rem;
  max-width:100%;background:none;border:0;cursor:pointer;
  font:inherit;font-size:15.5px;font-weight:600;color:var(--tinta);
  padding:.3rem .4rem;border-radius:var(--r-p);
}
.barra-app .titulo-btn:hover{background:var(--fundo-2)}
.barra-app .titulo-btn > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-app .titulo-btn .ico{color:var(--tinta-3)}

/* botão de ícone: 44px de alvo, sem moldura */
.ib{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-p);
  background:none;border:0;color:var(--tinta);cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.ib:hover{background:var(--fundo-2)}
.ib:active{background:var(--fundo-3)}
.ib-p{width:34px;height:34px;flex-basis:34px}
.ib-perigo{color:var(--perigo)}
.ib .selo-n{
  position:absolute;top:5px;right:4px;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--perigo);color:#fff;font-size:10px;line-height:16px;
  font-weight:700;text-align:center;
}

.envelope{
  width:100%;max-width:var(--coluna);margin:0 auto;
  padding:calc(var(--barra-h) + 1rem) 1.1rem
          calc(var(--nav-h) + var(--seguro-baixo) + 5rem);
}
.envelope.sem-casca{padding-top:1.6rem;padding-bottom:3rem}

/* ---------- navegação: barra colada, com um fio em cima ---------- */
.nav{
  position:fixed;z-index:45;left:0;right:0;bottom:0;
  height:calc(var(--nav-h) + var(--seguro-baixo));
  padding-bottom:var(--seguro-baixo);
  display:flex;align-items:stretch;
  background:var(--fundo);border-top:1px solid var(--fio);
}
.nav-item{
  position:relative;flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:none;cursor:pointer;
  font:inherit;font-size:10.5px;color:var(--tinta-3);
  transition:color .15s ease;
}
.nav-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item[aria-current="page"]{color:var(--acento-texto,var(--acento));font-weight:600}
.nav-item[aria-current="page"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:22px;height:2px;background:var(--acento);border-radius:0 0 2px 2px;
}
.nav-item .selo-n{
  position:absolute;top:7px;left:calc(50% + 6px);
  min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  background:var(--perigo);color:#fff;font-size:9.5px;line-height:15px;
  font-weight:700;text-align:center;
}

/* ---------- o botão da ação principal ---------- */
.fab{
  position:fixed;z-index:44;right:max(1.1rem,calc(50vw - var(--coluna)/2 + 1.1rem));
  bottom:calc(var(--nav-h) + var(--seguro-baixo) + 1rem);
  display:inline-flex;align-items:center;gap:.4rem;
  height:48px;padding:0 1.1rem;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--sobre-acento,#fff);background:var(--acento);
  box-shadow:var(--sombra-flutua);
  transition:transform .12s ease,background-color .15s ease,opacity .2s ease;
}
.fab:hover{background:var(--acento-escuro)}
.fab:active{transform:scale(.97)}
.fab.sumiu{transform:translateY(130%);opacity:0;pointer-events:none}

/* =====================================================================
   Peças
   ===================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:44px;font:inherit;font-size:15px;font-weight:600;color:var(--sobre-acento,#fff);
  background:var(--acento);border:1px solid var(--acento);border-radius:var(--r-p);
  padding:.55rem 1.1rem;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,opacity .15s ease;
}
.btn:hover{background:var(--acento-escuro);border-color:var(--acento-escuro)}
.btn:active{opacity:.85}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-fantasma{color:var(--tinta);background:transparent;border-color:var(--fio-forte)}
.btn-fantasma:hover{background:var(--fundo-2);border-color:var(--fio-forte);color:var(--tinta)}
.btn-p{min-height:36px;font-size:13.5px;padding:.25rem .8rem;border-radius:9px}
.btn-bloco{width:100%}
.link{
  font:inherit;font-size:14.5px;color:var(--acento-texto,var(--acento));background:none;border:0;
  padding:.2rem 0;cursor:pointer;font-weight:600;
}
.link:hover{text-decoration:underline}
.link-perigo{color:var(--perigo)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:4px}

/* filtros */
.chips{
  display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  margin:0 -1.1rem 1.1rem;padding:.1rem 1.1rem .3rem;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--tinta-2);background:none;border:1px solid var(--fio-forte);
  border-radius:999px;padding:.35rem .85rem;cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.chip:hover{background:var(--fundo-2)}
/* o escolhido usa a cor da casa, não um preto que pesa a tela */
.chip[aria-pressed="true"]{
  background:var(--acento-claro);border-color:var(--acento);color:var(--acento-texto,var(--acento-escuro));
}
.chip .n{opacity:.6;font-weight:500}

/* ---------- campos ---------- */
.campo{display:block;margin-bottom:1rem}
.campo > span{display:block;font-size:13.5px;font-weight:600;color:var(--tinta-2);margin-bottom:.3rem}
input,textarea,select{
  width:100%;font:inherit;font-size:16px;color:var(--tinta);background:var(--fundo);
  border:1px solid var(--fio-forte);border-radius:var(--r-p);padding:.62rem .8rem;
  transition:border-color .15s ease,box-shadow .15s ease;
}
select{
  appearance:none;-webkit-appearance:none;padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A9A199' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.2 12 15.5l6.5-6.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;
}
textarea{resize:vertical;min-height:92px;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--tinta-3)}
input:hover,textarea:hover,select:hover{border-color:var(--tinta-3)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-claro);
}
input[type=checkbox],input[type=radio]{width:auto;margin:0;accent-color:var(--acento);transform:scale(1.1)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.marcavel{display:flex;align-items:center;gap:.6rem;font-size:15.5px;min-height:44px;cursor:pointer}
.codigo-in{
  font-family:ui-monospace,Menlo,monospace;letter-spacing:.3em;text-align:center;
  font-size:22px;padding:.7rem .3rem .7rem 1rem;text-transform:uppercase;
}
.dica-campo{display:block;font-size:12.5px;color:var(--tinta-3);margin-top:.25rem}
/* o texto cru do banco embaixo do recado: para poder copiar e mandar */
.erro-cru{display:block;margin-top:.25rem;font-size:11.5px;line-height:1.35;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--tinta-3);word-break:break-word;user-select:all}
#google svg{margin-right:.15rem;vertical-align:-3px}

.busca-campo{position:relative;display:block}
.busca-campo input{padding-left:2.5rem}
.busca-campo .ico{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--tinta-3)}
.campo-apelido{position:relative;display:block}
.campo-apelido input{padding-left:1.85rem}
.campo-apelido .arroba{
  position:absolute;left:.8rem;top:50%;transform:translateY(-50%);
  color:var(--tinta-3);font-weight:600;pointer-events:none;
}
.aviso-apelido{display:block;font-size:13px;margin-top:.35rem;min-height:1.2em}
.aviso-apelido.livre{color:var(--acento-texto,var(--acento))}
.aviso-apelido.usado{color:var(--perigo)}
.aviso-apelido.checando{color:var(--tinta-3)}

/* ---------- seções e listas ---------- */
.secao{margin-top:2rem}
.secao-topo{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
.secao-topo h2{flex:1;min-width:0}
.acoes{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* cartão: só onde o conteúdo é mesmo um objeto */
.cartao{background:var(--fundo);border:1px solid var(--fio);border-radius:var(--r);padding:.95rem 1rem}
.cartao + .cartao{margin-top:.6rem}
.cartao-link{display:block;text-decoration:none;color:inherit;transition:border-color .15s ease,background-color .15s ease}
.cartao-link:hover{border-color:var(--fio-forte)}
.cartao-link:active{background:var(--fundo-2)}
.grade{display:grid;grid-template-columns:1fr;gap:.6rem}
@media (min-width:560px){.grade{grid-template-columns:1fr 1fr}}

.vazio{
  border:1px dashed var(--fio-forte);border-radius:var(--r);
  padding:1.8rem 1.2rem;text-align:center;color:var(--tinta-2);font-size:15px;
}

.pilula{
  display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--acento-texto,var(--acento));
  background:var(--acento-claro);border-radius:999px;padding:.15rem .55rem;
}
.pilula-cinza{color:var(--tinta-2);background:var(--fundo-2)}
.pilula-verde{color:#33704F;background:var(--lido-claro)}
.pilula-lendo{color:#8A5A16;background:var(--lendo-claro)}
.pilula-fila{color:#3A5C8C;background:var(--fila-claro)}

/* ---------- carinhas ---------- */
.avatar{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Newsreader",Georgia,serif;font-size:17px;color:#fff;line-height:1;
}
.avatar-g{width:58px;height:58px;flex-basis:58px;font-size:25px}
.avatar-p{width:30px;height:30px;flex-basis:30px;font-size:14px}
.avatar-gg{width:96px;height:96px;flex-basis:96px;font-size:40px}
.foto{width:38px;height:38px;flex:0 0 38px;border-radius:50%;object-fit:cover;background:var(--fundo-2)}
.foto-p{width:30px;height:30px;flex-basis:30px}
.foto-g{width:58px;height:58px;flex-basis:58px}
.foto-gg{width:96px;height:96px;flex-basis:96px}
.aro{display:inline-flex;padding:2px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--fio-forte)}

/* o lapisinho em cima da foto do perfil */
.badge-foto{
  position:absolute;right:-1px;bottom:-1px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--fundo);color:var(--tinta);
  box-shadow:0 0 0 1px var(--fio-forte),0 1px 4px -1px rgba(46,42,38,.18);
}

/* ---------- abas de texto ---------- */
.abas{display:flex;gap:1.2rem;overflow-x:auto;margin:0 -1.1rem 1.1rem;padding:0 1.1rem;
  scrollbar-width:none;border-bottom:1px solid var(--fio)}
.abas::-webkit-scrollbar{display:none}
.aba{
  font:inherit;font-size:14.5px;font-weight:600;color:var(--tinta-2);
  background:none;border:0;border-bottom:2px solid transparent;
  padding:.5rem 0 .55rem;cursor:pointer;white-space:nowrap;margin-bottom:-1px;
}
.aba[aria-selected="true"]{color:var(--tinta);border-bottom-color:var(--acento)}

/* =====================================================================
   Livros
   ===================================================================== */

.livro{display:flex;gap:.9rem;align-items:flex-start}
.capa{
  width:70px;flex:0 0 70px;aspect-ratio:2/3;border-radius:5px;object-fit:cover;
  background:var(--fundo-2);box-shadow:var(--sombra-capa);
}
.capa-vazia{
  display:flex;align-items:center;justify-content:center;
  font-family:"Newsreader",Georgia,serif;font-size:24px;color:var(--tinta-3);
  box-shadow:inset 0 0 0 1px var(--fio-forte);
}

/* a estante */
.capas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem .8rem;align-items:start}
@media (min-width:560px){.capas{grid-template-columns:repeat(4,minmax(0,1fr))}}
.capa-item{
  display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;color:inherit;
}
.capa-item .moldura{position:relative;margin-bottom:.45rem}
.capa-item .capa{width:100%;flex:none}
.capa-item:active .capa{opacity:.85}
.fita{
  position:absolute;top:0;left:8px;width:12px;height:20px;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 68%,0 100%);
}
.fita-lendo{background:var(--lendo)}
.fita-fila{background:var(--fila)}
.fita-lido{background:var(--lido)}
.capa-item b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;font-weight:600;line-height:1.3;
}
.capa-item span{display:block;font-size:11.5px;color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selo{
  position:absolute;left:0;bottom:0;
  font-size:10.5px;font-weight:600;color:#fff;background:rgba(46,42,38,.72);
  border-radius:0 4px 0 5px;padding:.05rem .35rem;
}

/* a tela do livro do mês */
.hero{
  position:relative;margin:.2rem 0 0;padding:1.6rem 1rem 1.4rem;
  border-radius:var(--r-g);overflow:hidden;text-align:center;
}
.hero .fundo{
  position:absolute;inset:-24px;background-size:cover;background-position:center;
  filter:blur(28px) saturate(120%) brightness(.6);transform:scale(1.2);
}
.hero .fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,26,22,.25),rgba(30,26,22,.7))}
.hero .capa{position:relative;width:132px;flex:none;margin:0 auto;border-radius:6px;
  box-shadow:0 16px 36px -14px rgba(0,0,0,.65)}
/* sem capa não há o que emoldurar: some a caixa e fica só o livro */
.hero.sem-capa{background:none;padding:.6rem 0 .2rem}
.hero.sem-capa .capa{box-shadow:inset 0 0 0 1px var(--fio-forte)}
.livro-topo{padding:1.1rem 0 .2rem;text-align:center}
.livro-topo h1{font-size:1.45rem}
.livro-topo .meta{margin-top:.2rem}

/* situação: tingido, discreto, sem virar semáforo */
.status-btn{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;
  min-height:48px;font:inherit;font-size:15.5px;font-weight:600;
  border:1px solid var(--fio-forte);border-radius:var(--r-p);
  padding:.5rem 1rem;cursor:pointer;text-align:left;background:var(--fundo);
  transition:background-color .15s ease;
}
.status-btn .ico{color:var(--tinta-3)}
.status-lendo{background:var(--lendo-claro);border-color:#EEDFC2;color:#8A5A16}
.status-fila{background:var(--fila-claro);border-color:#D5E0F0;color:#3A5C8C}
.status-lido{background:var(--lido-claro);border-color:#CFE5D9;color:#33704F}
.status-btn.status-lendo .ico,
.status-btn.status-fila .ico,
.status-btn.status-lido .ico{color:currentColor;opacity:.55}

/* atalhos: dois por linha, com fio, sem quadradinho colorido */
.rapidas{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.rapida{
  display:flex;align-items:center;gap:.55rem;
  background:none;border:1px solid var(--fio);border-radius:var(--r-p);
  padding:.75rem .85rem;font:inherit;font-size:14px;font-weight:600;
  color:var(--tinta);cursor:pointer;text-align:left;
  transition:background-color .15s ease,border-color .15s ease;
}
.rapida:hover{background:var(--fundo-2);border-color:var(--fio-forte)}
.rapida .ico,.rapida .chip-ico{color:var(--tinta-3);background:none;
  width:auto;height:auto;flex:0 0 auto;border-radius:0;display:inline-flex}
/* o quadradinho pastel morreu; a classe fica para não quebrar quem a usa */
.chip-ico{display:inline-flex;align-items:center;justify-content:center;color:var(--tinta-3)}

/* barras de progresso */
.barra{height:6px;background:var(--fundo-3);border-radius:999px;overflow:hidden;margin-top:.5rem}
.barra > i{display:block;height:100%;background:var(--tinta-3);border-radius:999px;transition:width .35s ease}
.barra-forte > i{background:var(--acento)}
.barra-lendo > i{background:var(--lendo)}

/* =====================================================================
   Conteúdo do clube
   ===================================================================== */

/* o trecho é uma citação, não um cartão: fio à esquerda e ar */
.trecho{border-left:2px solid var(--marca);padding:.1rem 0 .1rem .95rem;margin-bottom:1.6rem}
.trecho blockquote{font-family:"Newsreader",Georgia,serif;font-size:1.15rem;line-height:1.5;font-style:italic}
.trecho .nota{font-size:14.5px;color:var(--tinta-2);margin-top:.45rem}
.trecho .assinatura{font-size:13px;color:var(--tinta-2);margin-top:.6rem;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.curtir{
  display:inline-flex;align-items:center;gap:.3rem;font:inherit;font-size:13px;font-weight:600;
  color:var(--tinta-2);background:none;border:0;cursor:pointer;padding:.3rem .1rem;
}
.curtir.ativo{color:var(--perigo)}
.curtir.ativo .ico{fill:var(--perigo)}

.fala{display:flex;gap:.7rem;padding:.8rem 0;border-bottom:1px solid var(--fio)}
.fala:last-of-type{border-bottom:0}
.fala .quem{font-weight:600;font-size:14.5px}
.fala .quando{font-size:12.5px;color:var(--tinta-3)}
.fala p{margin-top:.15rem;white-space:pre-wrap;overflow-wrap:anywhere}

.opcao{
  display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:none;border:1px solid var(--fio-forte);border-radius:var(--r-p);
  padding:.7rem .9rem;margin-bottom:.5rem;position:relative;overflow:hidden;min-height:48px;
  transition:border-color .15s ease;
}
.opcao:hover{border-color:var(--tinta-3)}
.opcao.votei{border-color:var(--acento)}
.opcao .preenche{position:absolute;inset:0 auto 0 0;background:var(--acento-claro);z-index:0;transition:width .35s ease}
.opcao .conteudo{position:relative;z-index:1;display:flex;justify-content:space-between;
  gap:1rem;align-items:center;font-weight:600;font-size:14.5px}
.opcao[disabled]{cursor:default}

/* mural: lista com fio, ícone de traço (nada de emoji) */
.mural{list-style:none}
.mural li{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid var(--fio)}
.mural li:last-child{border-bottom:0}
.mural .icone{
  width:26px;height:26px;flex:0 0 26px;display:flex;align-items:center;justify-content:center;
  color:var(--tinta-3);margin-top:1px;
}
.mural .novo{position:relative;padding-left:.9rem}
.mural .novo::before{
  content:"";position:absolute;left:0;top:1.15rem;
  width:5px;height:5px;border-radius:50%;background:var(--acento);
}

.placar{list-style:none;counter-reset:pos}
.placar li{display:flex;align-items:center;gap:.7rem;padding:.65rem 0;border-bottom:1px solid var(--fio)}
.placar li:last-child{border-bottom:0}
.placar .pos{
  counter-increment:pos;font-family:"Newsreader",Georgia,serif;font-size:16px;
  color:var(--tinta-3);width:18px;text-align:right;flex:0 0 18px;
}
.placar .pos::before{content:counter(pos)}

/* números: sem caixa. Fio entre eles e o número em serifa. */
.numeros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  border:1px solid var(--fio);border-radius:var(--r);overflow:hidden;
}
.numero{padding:.85rem .6rem;text-align:center;border-left:1px solid var(--fio)}
.numero:first-child{border-left:0}
.numero b{display:block;font-family:"Newsreader",Georgia,serif;font-size:1.6rem;
  font-weight:400;line-height:1.15}
.numero span{font-size:12px;color:var(--tinta-2);line-height:1.35;display:block}
.numero .chip-ico{display:none}          /* o ícone virou ruído aqui */

/* =====================================================================
   Diálogos e folhas
   ===================================================================== */

dialog{
  width:min(94vw,440px);max-height:88svh;overflow-y:auto;overscroll-behavior:contain;
  border:0;border-radius:var(--r-g);
  background:var(--fundo);color:var(--tinta);padding:1.3rem;
  box-shadow:var(--sombra-alta);
}
dialog::backdrop{background:rgba(46,42,38,.4)}
dialog h3{margin-bottom:1rem;font-size:1.15rem}

@media (max-width:560px){
  dialog{
    width:100%;max-width:none;margin:auto auto 0;max-height:92svh;
    border-radius:var(--r-g) var(--r-g) 0 0;
    padding:1.2rem 1.1rem calc(1.1rem + var(--seguro-baixo));
  }
}

.dlg-acoes{
  position:sticky;bottom:calc(-1.1rem - var(--seguro-baixo));z-index:2;
  display:flex;gap:.5rem;margin-top:1.2rem;
  padding:.7rem 0 calc(.2rem + var(--seguro-baixo));
  /* fundo cheio, não um degradê: o degradê partia de um branco fixo e
     deixava um véu claro quando o clube escolhe um fundo escuro */
  background:var(--fundo);box-shadow:0 -1px 0 var(--fio);
}
.dlg-acoes .btn{flex:1}

dialog.folha{
  width:100%;max-width:var(--coluna);margin:auto auto 0;
  border-radius:var(--r-g) var(--r-g) 0 0;
  padding:.5rem 1rem calc(1rem + var(--seguro-baixo));
  animation:sobe .2s ease;
}
@keyframes sobe{from{transform:translateY(12px);opacity:.5}to{transform:none;opacity:1}}
.folha .puxador{width:34px;height:4px;border-radius:999px;background:var(--fio-forte);margin:.4rem auto .9rem}
.folha h3{margin-bottom:.4rem;padding:0 .2rem;color:var(--tinta-2);font-size:13.5px;font-weight:600}
.folha-lista{display:flex;flex-direction:column}
.folha-item{
  display:flex;align-items:center;gap:.85rem;width:100%;min-height:52px;
  font:inherit;font-size:15.5px;font-weight:500;color:var(--tinta);text-align:left;
  background:none;border:0;border-radius:var(--r-p);padding:.5rem .55rem;cursor:pointer;
}
.folha-item:hover{background:var(--fundo-2)}
.folha-item .ico{color:var(--tinta-3)}
.folha-item small{display:block;font-weight:400;font-size:12.5px;color:var(--tinta-2)}
.folha-item.perigo,.folha-item.perigo .ico{color:var(--perigo)}
.folha-sep{height:1px;background:var(--fio);margin:.45rem .55rem}

/* ---------------------------------------------------------------------
   A cara do clube (só o organizador vê)
   --------------------------------------------------------------------- */
.folha-aparencia{padding:.5rem 1.1rem calc(1rem + var(--seguro-baixo))}
.folha-aparencia h3{color:var(--tinta);font-size:1.1rem;
  font-family:"Newsreader",Georgia,serif;font-weight:500;margin:.5rem 0 .3rem}
.folha-aparencia > .meta{margin-bottom:1rem}

/* a prévia: uma ilhota com as próprias variáveis, para a escolha ser
   feita olhando em vez de imaginando */
.previa{
  border:1px solid var(--fio-forte);border-radius:var(--r);
  background:var(--fundo);color:var(--tinta);
  padding:.9rem;margin-bottom:1.2rem;
}
.previa-faixa{display:flex;align-items:center;gap:.7rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--fio)}
.previa-faixa strong{display:block;font-size:14.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.previa-faixa .meta{font-size:12.5px}
.previa-selo{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:"Newsreader",Georgia,serif;font-size:17px;
}
.previa-selo img{width:100%;height:100%;object-fit:cover}
.previa-texto{margin:.8rem 0;font-size:14.5px}
.previa-acoes{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.previa-alerta{margin-top:.8rem;color:var(--perigo);font-size:12.5px}

.campo-cor .cor-linha{display:flex;align-items:center;gap:.55rem}
.campo-cor input[type=color]{
  width:52px;height:44px;flex:0 0 52px;padding:3px;cursor:pointer;
  border:1px solid var(--fio-forte);border-radius:var(--r-p);background:var(--fundo);
}
.campo-cor input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.campo-cor input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}
.campo-cor input[type=text]{
  flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;letter-spacing:.04em;text-transform:uppercase;
}

.rotulo-campo{display:block;font-size:13.5px;font-weight:600;
  color:var(--tinta-2);margin-bottom:.3rem}
.logo-linha{display:flex;align-items:flex-start;gap:.8rem}
.logo-alvo{
  width:56px;height:56px;flex:0 0 56px;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:"Newsreader",Georgia,serif;font-size:24px;
}
.logo-alvo img{width:100%;height:100%;object-fit:cover}
.logo-linha .btn{margin-right:.4rem}

/* a logo onde antes ficava a inicial */
.selo-clube img,.capa-mini.logo{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.selo-clube{overflow:hidden}

/* =====================================================================
   Avisos e miudezas
   ===================================================================== */

.aviso{
  position:fixed;left:50%;z-index:80;
  bottom:calc(var(--nav-h) + var(--seguro-baixo) + 1rem);
  transform:translate(-50%,1rem);
  max-width:min(92vw,400px);background:var(--tinta);color:var(--fundo);
  border-radius:var(--r-p);padding:.65rem 1rem;font-size:14.5px;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  box-shadow:var(--sombra-flutua);
}
.aviso.visivel{opacity:1;transform:translate(-50%,0)}
.aviso.ruim{background:var(--perigo)}
.erro{color:var(--perigo);font-size:13.5px;margin-top:.5rem;min-height:1.2em}
.centro{max-width:380px;margin:0 auto;padding-top:clamp(.5rem,4vh,2rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.carregando{color:var(--tinta-3);font-size:14.5px;padding:2.5rem 0;text-align:center}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation:none !important}}

/* resultados da busca de livros */
.resultados{max-height:min(44vh,320px);overflow-y:auto;margin:-.2rem -.4rem 1rem;padding:0 .4rem}
.resultado{
  display:flex;gap:.75rem;align-items:center;width:100%;text-align:left;
  font:inherit;color:inherit;background:none;cursor:pointer;
  border:0;border-bottom:1px solid var(--fio);border-radius:0;padding:.6rem .2rem;
}
.resultado:last-child{border-bottom:0}
.resultado:hover{background:var(--fundo-2)}
.resultado img,.resultado .sem-capa{
  width:40px;height:60px;flex:0 0 40px;border-radius:3px;object-fit:cover;
  background:var(--fundo-2);box-shadow:var(--sombra-capa);
}
.resultado .sem-capa{display:flex;align-items:center;justify-content:center;
  font-family:"Newsreader",Georgia,serif;color:var(--tinta-3)}
.resultado .dados{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.resultado strong{font-size:14.5px;line-height:1.3;font-weight:600}
.resultado .meta{font-size:12.5px}

/* =====================================================================
   Tela inicial
   ===================================================================== */

.saudacao{display:flex;align-items:center;gap:.85rem;margin-bottom:1.3rem}
.saudacao h1{font-size:1.5rem;line-height:1.2}
.saudacao p{font-size:13.5px;color:var(--tinta-2)}

/* o livro do momento: aqui cartão faz sentido, é um objeto */
.cartao-lendo{
  display:flex;gap:.9rem;align-items:center;text-align:left;width:100%;
  background:var(--fundo);border:1px solid var(--fio);border-radius:var(--r);
  padding:.85rem;font:inherit;color:inherit;cursor:pointer;
  transition:border-color .15s ease;
}
.cartao-lendo:hover{border-color:var(--fio-forte)}
.cartao-lendo .capa{width:52px;flex-basis:52px}
.cartao-lendo .olho{color:var(--lendo);margin-bottom:.1rem;font-size:12px}
.cartao-lendo h3{font-size:1rem;line-height:1.3}
.cartao-lendo .barra{margin-top:.45rem;background:var(--fundo-3)}
.cartao-lendo .barra > i{background:var(--lendo)}

/* pilha de capinhas do clube */
.capa-pilha{display:flex;align-items:center;padding-left:8px}
.capa-mini{
  width:26px;flex:0 0 26px;aspect-ratio:2/3;object-fit:cover;border-radius:3px;
  margin-left:-8px;background:var(--fundo-2);
  box-shadow:0 1px 4px -1px rgba(46,42,38,.4),0 0 0 1.5px var(--fundo);
}
.capa-mini.vazia{display:flex;align-items:center;justify-content:center;
  font-family:"Newsreader",Georgia,serif;font-size:12px;color:var(--tinta-3)}

.ilustra{display:block;margin:0 auto .8rem;opacity:.9}

/* tira de amigos */
.tira{display:flex;align-items:flex-start;gap:1rem;overflow-x:auto;scrollbar-width:none;
  margin:0 -1.1rem;padding:.2rem 1.1rem .4rem}
.tira::-webkit-scrollbar{display:none}
.tira-item{
  position:relative;flex:0 0 auto;width:54px;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;font-size:11.5px;color:var(--tinta-2);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
}
.tira-item .avatar,.tira-item .foto,.tira-mais{
  display:flex;width:48px;height:48px;flex:0 0 48px;font-size:20px;
}
.tira-item > span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tira-item .pontinho{
  position:absolute;top:0;right:2px;width:11px;height:11px;border-radius:50%;
  background:var(--acento);box-shadow:0 0 0 2px var(--fundo);
}
.tira-mais{
  border-radius:50%;align-items:center;justify-content:center;
  color:var(--tinta-3);box-shadow:inset 0 0 0 1px var(--fio-forte);
}

/* =====================================================================
   Gente: amigos, pedidos, conversa
   ===================================================================== */

/* linha de pessoa: fio embaixo, sem fundo. Lista, não coleção de caixas. */
.pessoa{
  display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--fio);
  padding:.75rem .2rem;font:inherit;color:inherit;
}
.pessoa:last-child{border-bottom:0}
.pessoa + .pessoa{margin-top:0}
.pessoa .quem{font-weight:600;font-size:15px;line-height:1.25}
.pessoa .corpo{flex:1;min-width:0}
.pessoa-toque{cursor:pointer;transition:background-color .12s ease}
.pessoa-toque:hover{background:var(--fundo-2)}
.apelido{font-size:13px;color:var(--tinta-3);font-weight:500}
.naolido{
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--acento);color:var(--sobre-acento,#fff);font-size:11px;line-height:19px;
  font-weight:700;text-align:center;
}

/* O espaço entre as falas é dado por margem, e não pelo `gap` do flex:
   assim duas falas seguidas da mesma pessoa podem ficar coladas (2px) e
   a troca de quem fala abre um respiro de verdade. Com um gap único,
   tudo ficava à mesma distância — e tudo parecia amontoado. */
.chat{display:flex;flex-direction:column;gap:0}
.chat .dia{align-self:center;font-size:11.5px;color:var(--tinta-3);margin:1.4rem 0 .7rem}
.bolha{
  max-width:80%;align-self:flex-start;margin-top:.65rem;
  background:var(--fundo-2);border-radius:16px;
  padding:.55rem .85rem;font-size:15px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.bolha:first-child{margin-top:0}
.bolha.seguida{margin-top:2px}
.bolha.minha{align-self:flex-end;background:var(--acento-claro)}

/* a "rabinha" só na última fala de cada bloco, do lado de quem falou */
.bolha.fim{border-bottom-left-radius:5px}
.bolha.minha.fim{border-bottom-left-radius:16px;border-bottom-right-radius:5px}

.bolha .hora{
  display:block;font-size:10.5px;color:var(--tinta-3);
  text-align:right;margin-top:.15rem;
}

.compositor{
  position:fixed;left:0;right:0;bottom:0;z-index:46;
  padding:.5rem 1rem calc(.5rem + var(--seguro-baixo));
  background:var(--fundo);border-top:1px solid var(--fio);
}
.compositor form{max-width:var(--coluna);margin:0 auto;display:flex;gap:.5rem;align-items:center}
.compositor input{border-radius:999px}
.compositor .btn{flex:0 0 auto;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%}
.envelope.com-compositor{padding-bottom:5.5rem}

/* =====================================================================
   Em que clube eu estou
   ===================================================================== */

.faixa-clube{
  display:flex;align-items:center;gap:.7rem;margin:-.2rem 0 1.2rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--fio);
}
.selo-clube{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  background:var(--cor-clube,var(--acento));color:var(--sobre-cor-clube,var(--sobre-acento,#fff));
  display:flex;align-items:center;justify-content:center;
  font-family:"Newsreader",Georgia,serif;font-size:16px;
}
.faixa-clube .corpo{flex:1;min-width:0}
.faixa-clube strong{display:block;font-size:14.5px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faixa-clube .meta{font-size:12.5px}

/* na lista de clubes, a cor aparece só na inicial */
.cartao-clube{box-shadow:none}

/* =====================================================================
   Perfil
   ---------------------------------------------------------------------
   A capa sangra até as bordas: o .envelope tem 1.1rem de folga de cada
   lado, e é ela que a margem negativa desfaz. Não vai até EMBAIXO da
   barra de cima de propósito — a barra é fixa e opaca, e o que passasse
   por baixo dela seria desenhado para ninguém ver.
   ===================================================================== */

.perfil-capa{
  position:relative;height:150px;margin:-1rem -1.1rem 0;overflow:hidden;
  background:var(--fundo-3);
}
.perfil-capa svg,
.perfil-capa .capa-foto{display:block;width:100%;height:100%;object-fit:cover}

.perfil-editar-capa{
  position:absolute;left:.7rem;bottom:.7rem;z-index:2;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:rgba(46,42,38,.46);backdrop-filter:blur(6px);
}
.perfil-editar-capa:active{background:rgba(46,42,38,.62)}

/* O retrato morde a borda de baixo da capa, do lado direito.

   Ele é ABSOLUTO dentro de uma faixa de altura zero, e não um item de
   flex. Como item, ele herdava a altura da faixa — que é zero — e o anel
   branco de 4px virava uma lente deitada, com o avatar escapando por
   baixo. Absoluto, ele não participa do cálculo e fica do tamanho que é. */
.perfil-topo{position:relative;height:0}
.perfil-retrato{
  position:absolute;right:0;top:-42px;display:flex;border-radius:50%;
  border:4px solid var(--fundo);background:var(--fundo);
  box-shadow:0 6px 16px -8px rgba(46,42,38,.5);
}
/* `flex-basis` junto: dentro de um flex, é ele que manda na largura —
   o `.avatar-g` traz 58px de base e o retrato virava uma elipse. */
.perfil-retrato .avatar,
.perfil-retrato .foto{width:84px;height:84px;flex:0 0 84px;font-size:32px}

.perfil-cabeca{padding-right:6rem;margin-top:-.4rem}
.perfil-nome{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:500;
  font-size:2rem;line-height:1.12;letter-spacing:-.015em;
}
.perfil-arroba{color:var(--tinta-2);font-size:14.5px;margin-top:.05rem}
.perfil-arroba .sep{opacity:.5;margin:0 .35em}
.perfil-bio{margin-top:.5rem;font-size:15px}
.perfil-miuda{margin-top:.25rem;font-size:13px;color:var(--tinta-2)}

.perfil-placar{display:flex;gap:1.3rem;margin-top:.75rem;font-size:14.5px;color:var(--tinta-2)}
.perfil-placar button{
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
}
.perfil-placar b{color:var(--tinta);font-weight:700;margin-right:.3em}
.perfil-placar button:hover b{text-decoration:underline;text-underline-offset:3px}

.perfil-acoes{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.9rem}
.perfil-acoes .btn{border-radius:999px}
.perfil-acoes .btn .ico{margin-right:.2rem}

.perfil-miolo{margin-top:1.2rem}
.perfil-miolo .abas{margin-bottom:1rem}
.perfil-favorito-texto{
  margin-top:.6rem;font-family:"Newsreader",Georgia,serif;font-size:16px;font-style:italic;
}

/* ---------- o cartão pintado com a cor da pessoa ---------- */
.cartao + .cartao{margin-top:.9rem}
.cartao-cor{
  background:var(--acento-claro);
  border-color:color-mix(in srgb, var(--acento) 24%, transparent);
}
.cartao-topo{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem}
.cartao-topo h3{font-size:15.5px;font-weight:700;letter-spacing:-.01em;flex:1}
.cartao-topo > .ico{color:var(--tinta)}

/* ---------- a fileira de favoritos ---------- */
.prateleira{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}
.prateleira .capa{width:100%;flex:none}
.prateleira-item{position:relative}
.prateleira-item .tirar{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:0;cursor:pointer;background:var(--tinta);color:var(--fundo);
  font-size:15px;line-height:1;display:grid;place-items:center;
}

/* ---------- divisória com contador ---------- */
.divisa{display:flex;align-items:center;gap:.5rem;margin:1.4rem 0 .7rem}
.divisa h4{font-size:15px;font-weight:700;letter-spacing:-.01em}
.divisa .conta{color:var(--tinta-3);font-size:14px}
.divisa .fio-pontilhado{
  flex:1;height:1px;
  background:repeating-linear-gradient(90deg,var(--fio-forte) 0 3px,transparent 3px 7px);
}

/* ---------- fileira que rola de lado ---------- */
.fileira{
  display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;
  margin:0 -1.1rem;padding:0 1.1rem .2rem;
}
.fileira::-webkit-scrollbar{display:none}
.fileira-item{flex:0 0 auto;line-height:0}
.fileira-item .capa{width:68px;flex:0 0 68px}

/* ---------- o trecho fixado ---------- */
.trecho-fav{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:17px;
  line-height:1.55;
  /* o marca-texto: é o nome do aplicativo, então ele aparece de verdade */
  background:linear-gradient(transparent 8%,
    color-mix(in srgb, var(--marca) 62%, transparent) 8%,
    color-mix(in srgb, var(--marca) 62%, transparent) 92%, transparent 92%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  display:inline;padding:0 .12em;
}
.trecho-fonte{
  display:flex;align-items:baseline;gap:.35rem;margin-top:.8rem;
  font-size:13px;color:var(--tinta-2);
}
.trecho-fonte .ico{color:var(--acento);flex:0 0 auto;transform:translateY(2px)}
.trecho-fonte i{font-style:italic;color:var(--tinta)}

/* =====================================================================
   Diálogos do perfil
   ===================================================================== */

.capa-previa{
  height:120px;border-radius:var(--r);overflow:hidden;margin:.4rem 0 .9rem;
  background:var(--fundo-3);
}
.capa-previa svg,.capa-previa .capa-foto{display:block;width:100%;height:100%;object-fit:cover}

.capa-escolhas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.capa-escolha{
  border:2px solid transparent;border-radius:10px;overflow:hidden;padding:0;
  background:none;cursor:pointer;font:inherit;color:inherit;
}
.capa-escolha svg{display:block;width:100%;height:42px;object-fit:cover}
.capa-escolha span{display:block;font-size:11px;color:var(--tinta-2);padding:.2rem 0 .25rem}
.capa-escolha[aria-pressed="true"]{border-color:var(--acento)}
.capa-escolha[aria-pressed="true"] span{color:var(--tinta);font-weight:600}

.cores-prontas{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 1rem}
.cor-bola{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--fio);
  cursor:pointer;padding:0;
}
.cor-bola[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--fundo),0 0 0 4px var(--tinta);
}

.folha-favoritos .resultados{max-height:38vh;overflow-y:auto;margin-top:.5rem}
.prateleira-editar{margin-bottom:1rem;min-height:1rem}

/* ---------------------------------------------------------------------
   Ajustes do perfil (v6)
   ------------------------------------------------------------------ */

/* O nome estava colado na capa. O retrato sobe 42px por cima dela, e o
   texto começava logo abaixo da borda — sem ar nenhum entre a foto e a
   serifa grande do nome. */
.perfil-cabeca{padding-right:6rem;margin-top:0;padding-top:1.15rem}

/* Área de toque que leva ao perfil de alguém: lista de membros do clube,
   assinatura de um trecho, resultado da busca. Some do fluxo — herda o
   layout de quem a envolve — para não mexer no que já estava desenhado. */
.pessoa-toque{
  display:flex;align-items:center;gap:.8rem;flex:1;min-width:0;
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left;border-radius:var(--r-p);
}
.pessoa-toque:active{opacity:.7}
.pessoa-toque-fina{gap:.55rem;align-items:flex-start}

/* O controle de enquadramento da foto de capa */
.capa-enquadra{margin:.2rem 0 1rem}
.capa-enquadra > label{
  display:block;font-size:13px;font-weight:600;margin-bottom:.35rem;color:var(--tinta-2);
}
.capa-enquadra input[type=range]{
  width:100%;accent-color:var(--acento);height:24px;cursor:grab;
}
.capa-enquadra input[type=range]:active{cursor:grabbing}

/* A prévia tem a MESMA altura da capa de verdade (150px). Com alturas
   diferentes, a pessoa enquadraria uma coisa e veria outra no perfil. */
.capa-previa{height:150px}

/* ---------------------------------------------------------------------
   Mais de um livro em leitura ao mesmo tempo
   ------------------------------------------------------------------ */

/* Some quando só há um livro: quem lê um de cada vez não ganha barra
   nenhuma na tela. Sangra até as bordas para caber mais capa. */
.troca-livro{
  display:flex;gap:.7rem;overflow-x:auto;scrollbar-width:none;
  margin:-.2rem -1.1rem .9rem;padding:0 1.1rem .3rem;
}
.troca-livro::-webkit-scrollbar{display:none}

.troca-item{
  flex:0 0 84px;width:84px;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;opacity:.55;
  transition:opacity .16s ease;
}
.troca-item[aria-selected="true"]{opacity:1}
.troca-item .capa{width:84px;flex:none}
.troca-item b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12px;font-weight:600;line-height:1.3;margin-top:.35rem;
}
.troca-item[aria-selected="true"] .capa{
  box-shadow:var(--sombra-capa),0 0 0 2px var(--acento);
}
.troca-barra{
  display:block;height:4px;border-radius:99px;background:var(--fundo-3);
  margin-top:.3rem;overflow:hidden;
}
.troca-barra > i{display:block;height:100%;background:var(--acento);border-radius:99px}

/* =====================================================================
   As abas do clube (v7)
   ---------------------------------------------------------------------
   Elas estavam espalhadas entre a barra de baixo, o sino e o menu
   "Mais". Aqui viram uma fileira só, dentro do clube. Sangra até as
   bordas e rola de lado: sete abas não cabem numa tela de celular sem
   virar letra minúscula.
   ===================================================================== */

.abas-clube{
  display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;
  margin:0 -1.1rem 1.1rem;padding:0 1.1rem .55rem;
  border-bottom:1px solid var(--fio);
}
.abas-clube::-webkit-scrollbar{display:none}

.aba-clube{
  position:relative;flex:0 0 auto;display:flex;align-items:center;gap:.4rem;
  border:0;background:none;cursor:pointer;font:inherit;font-size:13.5px;
  color:var(--tinta-2);padding:.45rem .7rem;border-radius:999px;white-space:nowrap;
  transition:background .16s ease,color .16s ease;
}
.aba-clube[aria-selected="true"]{
  background:var(--acento-claro);color:var(--acento-escuro);font-weight:700;
}
.aba-clube .selo-n{position:static;margin-left:.1rem}

/* =====================================================================
   Como estou com este livro
   ===================================================================== */

.reacao-btn{
  display:flex;align-items:center;gap:.75rem;width:100%;margin-top:1rem;
  padding:.7rem .85rem;border-radius:var(--r);cursor:pointer;font:inherit;
  text-align:left;color:inherit;
  background:var(--fundo-2);border:1px solid var(--fio);
}
.reacao-btn.tem{background:var(--acento-claro);
  border-color:color-mix(in srgb, var(--acento) 22%, transparent)}
.reacao-btn:active{transform:scale(.995)}
.reacao-emoji{font-size:26px;line-height:1}
.reacao-corpo{flex:1;min-width:0}
.reacao-corpo small{display:block;font-size:11.5px;color:var(--tinta-2)}
.reacao-corpo b{display:block;font-size:15px;font-weight:600}
.reacao-btn .ico{color:var(--tinta-3);flex:0 0 auto}

.reacao-linha{
  display:block;font-size:12px;color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.folha-reacoes .reacoes-grade{display:flex;flex-wrap:wrap;gap:.45rem}
.reacao-item{
  display:flex;align-items:center;gap:.4rem;cursor:pointer;font:inherit;font-size:13.5px;
  padding:.45rem .8rem;border-radius:999px;color:var(--tinta);
  background:var(--fundo-2);border:1px solid var(--fio);
}
.reacao-item span{font-size:17px;line-height:1}
.reacao-item[aria-pressed="true"]{
  background:var(--acento);border-color:var(--acento);color:var(--sobre-acento,#fff);font-weight:600;
}

/* =====================================================================
   A imagem para os stories
   ===================================================================== */

.story-previa{
  display:flex;justify-content:center;align-items:center;
  margin:.5rem 0 .9rem;padding:.6rem;border-radius:var(--r);
  background:var(--fundo-2);min-height:220px;
}
/* o xadrez atrás mostra o que é transparente de verdade */
.story-previa.xadrez{
  background-color:var(--fundo-3);
  background-image:
    linear-gradient(45deg, rgba(46,42,38,.09) 25%, transparent 25%, transparent 75%, rgba(46,42,38,.09) 75%),
    linear-gradient(45deg, rgba(46,42,38,.09) 25%, transparent 25%, transparent 75%, rgba(46,42,38,.09) 75%);
  background-size:18px 18px;
  background-position:0 0, 9px 9px;
}
.story-tela{
  display:block;height:min(46vh, 380px);width:auto;
  border-radius:10px;box-shadow:0 8px 24px -12px rgba(46,42,38,.5);
}
.story-opcoes{display:flex;gap:.5rem;margin-bottom:.4rem}
.story-opcoes .btn{flex:1;border-radius:999px}

/* =====================================================================
   Instagram e X no perfil
   ===================================================================== */

.perfil-redes{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.6rem}
.rede-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .7rem .3rem .55rem;border-radius:999px;
  font-size:13px;font-weight:600;text-decoration:none;
  color:var(--tinta);background:var(--fundo-2);border:1px solid var(--fio);
}
.rede-chip:active{background:var(--fundo-3)}
.rede-chip svg{flex:0 0 auto;color:var(--tinta-2)}

/* =====================================================================
   O leitor de EPUB
   ---------------------------------------------------------------------
   Ocupa a tela inteira, por cima de tudo. Enquanto ele está aberto, o
   corpo não rola: quem rola é o livro, dentro do iframe dele.
   ===================================================================== */

body.lendo{overflow:hidden}

.leitor{
  position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  background:var(--fundo);
}

.leitor-topo{
  display:flex;align-items:center;gap:.5rem;flex:0 0 auto;
  padding:calc(env(safe-area-inset-top, 0px) + .4rem) .6rem .4rem;
  border-bottom:1px solid var(--fio);
}
.leitor-titulo{
  flex:1;min-width:0;text-align:center;font-size:14px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta-2);
}

.leitor-palco{flex:1;min-height:0;position:relative}
.leitor-palco.carregando-leitor{display:grid;place-items:center}
/* o epub.js põe um iframe aqui dentro; ele precisa poder ocupar tudo */
.leitor-palco > div{height:100%}

.leitor-pe{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  flex:0 0 auto;padding:.35rem .6rem;
}
.leitor-conta{font-size:12.5px;color:var(--tinta-3);font-variant-numeric:tabular-nums}

.leitor-barra{
  flex:0 0 auto;height:3px;background:var(--fundo-3);
  margin-bottom:env(safe-area-inset-bottom, 0px);
}
.leitor-barra > i{display:block;height:100%;background:var(--acento);width:0;transition:width .3s ease}

/* o cartão que aparece quando a pessoa grifa */
.leitor-grifo{
  position:absolute;left:.7rem;right:.7rem;bottom:calc(env(safe-area-inset-bottom, 0px) + 3.2rem);
  z-index:2;padding:.8rem .9rem;border-radius:var(--r-g);
  background:var(--fundo);border:1px solid var(--fio-forte);
  box-shadow:0 12px 34px -14px rgba(46,42,38,.55);
  transition:opacity .8s ease;
}
.leitor-grifo.sumindo{opacity:0}
.leitor-grifo-texto{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:15px;line-height:1.5;
  background:linear-gradient(transparent 10%,
    color-mix(in srgb, var(--marca) 60%, transparent) 10%,
    color-mix(in srgb, var(--marca) 60%, transparent) 90%, transparent 90%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;display:inline;
}
.leitor-grifo-acoes{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.9rem}
.leitor-grifo-acoes .btn{border-radius:999px}

/* o modo sublinhar aceso na barra de cima */
.leitor-topo .ib[aria-pressed="true"]{
  background:color-mix(in srgb, var(--marca) 65%, transparent);
  color:var(--tinta);
}

/* a faixa que lembra que o modo está ligado */
.leitor-dica{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 3.4rem);z-index:3;
  margin:0;padding:.4rem .9rem;border-radius:999px;
  background:color-mix(in srgb, var(--marca) 88%, transparent);
  color:var(--tinta);font-size:12.5px;font-weight:600;
  box-shadow:0 8px 22px -12px rgba(46,42,38,.5);
  pointer-events:none;white-space:nowrap;
}

/* a folha das frases: o caminho do toque, para quem lê no celular */
.leitor-frases{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;flex-direction:column;max-height:72%;
  background:var(--fundo);border-top:1px solid var(--fio-forte);
  border-radius:var(--r-g) var(--r-g) 0 0;
  padding:.5rem .8rem calc(env(safe-area-inset-bottom, 0px) + .8rem);
  box-shadow:0 -14px 38px -18px rgba(46,42,38,.6);
}
.leitor-frases .olho{margin:.2rem 0 .5rem;text-align:center}
.leitor-frases .frases{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}

.leitor-frases .frase{
  display:block;width:100%;text-align:left;border:0;cursor:pointer;
  font-family:"Newsreader",Georgia,serif;font-size:16.5px;line-height:1.55;
  padding:.45rem .55rem;margin-bottom:.15rem;border-radius:9px;
  background:transparent;color:var(--tinta-3);
  transition:background .15s ease, color .15s ease;
}
.leitor-frases .frase[aria-pressed="true"]{
  color:var(--tinta);
  background:color-mix(in srgb, var(--marca) 55%, transparent);
}

.leitor-frases-acoes{
  display:flex;gap:.5rem;justify-content:flex-end;
  padding-top:.7rem;margin-top:.5rem;border-top:1px solid var(--fio);
}
.leitor-frases-acoes .btn{border-radius:999px}

/* =====================================================================
   O arquivo do livro, na aba Leitura
   ===================================================================== */

.epub-caixa{
  margin-top:1rem;padding:.85rem .9rem;border-radius:var(--r);
  background:var(--acento-claro);
  border:1px solid color-mix(in srgb, var(--acento) 22%, transparent);
}
.epub-topo{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem}
.epub-topo .ico{color:var(--acento-escuro);flex:0 0 auto}
.epub-topo b{flex:1;min-width:0;font-size:14.5px}
.epub-topo small{display:block;font-weight:400;font-size:12px;color:var(--tinta-2)}
.epub-acoes{display:flex;flex-wrap:wrap;gap:.45rem}
.epub-acoes .btn{border-radius:999px}
.epub-origem{
  margin-top:.6rem;font-size:11.5px;color:var(--tinta-2);
  display:flex;align-items:center;gap:.3rem;
}

/* as opções de origem, na hora de subir o arquivo */
.epub-origens{display:flex;flex-direction:column;gap:.4rem}
.epub-origem-item{
  text-align:left;cursor:pointer;font:inherit;color:inherit;
  padding:.6rem .75rem;border-radius:var(--r-p);
  background:var(--fundo-2);border:1px solid var(--fio);
}
.epub-origem-item b{display:block;font-size:14px;font-weight:600}
.epub-origem-item small{display:block;font-size:12px;color:var(--tinta-2);margin-top:.1rem}
.epub-origem-item[aria-pressed="true"]{
  background:var(--acento-claro);
  border-color:color-mix(in srgb, var(--acento) 40%, transparent);
}
.epub-origem-item[aria-pressed="true"] small{color:var(--tinta)}

.aviso-kindle{
  margin-top:.9rem;padding:.7rem .8rem;border-radius:var(--r-p);
  background:var(--fundo-2);border:1px solid var(--fio);line-height:1.5;
}
.folha-epub .marcavel{margin:.2rem 0 .4rem}