/* ==========================================================================
   Bibbi Bokken — folha de estilo única.
   Paleta: creme aconchegante + azul-noite e verde-água (identidade Hilda).
   ========================================================================== */

:root{
  --bg:#f2e6d2;
  --surface:#fffdf8;
  --surface-2:#f7ecd9;

  --night:#16303f;
  --night-2:#0f2430;
  --night-3:#22475c;
  --ink:#201e1d;

  --teal-100:#e6f5f2; --teal-200:#c9e8e3; --teal-300:#a3d6cf;
  --teal-400:#6ebcb3; --teal-500:#3f9d93; --teal-600:#2b7f77;
  --teal-700:#1f625c; --teal-800:#17453f; --teal-900:#0f2b28;

  --accent-100:#f8e9de; --accent-200:#f0d3bd; --accent-300:#e3b48f;
  --accent-400:#d4915f; --accent-500:#c67139; --accent-600:#a95a28;
  --accent-700:#8a461d; --accent-800:#663316; --accent-900:#421f0d;

  --n-200:#efe6d8; --n-300:#ddd0bd; --n-400:#bfae95; --n-500:#98876f;
  --n-600:#6f6252;

  --radius:16px;
  --radius-lg:26px;
  --shadow-sm:0 2px 8px rgba(15,36,48,.07);
  --shadow-md:0 8px 22px rgba(15,36,48,.10);
  --shadow-lg:0 16px 40px rgba(15,36,48,.16);

  --font-heading:'Caprasimo', Georgia, serif;
  --font-body:'Figtree', system-ui, -apple-system, sans-serif;

  /* Largura util da pagina + respiro lateral/vertical fluidos.
     Tudo (navbar, conteudo, rodape) se alinha por estas tres medidas. */
  --shell:1600px;
  --pad-x:clamp(18px,3.6vw,72px);
  --pad-y:clamp(22px,2.4vw,44px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;overflow-x:clip}

/* Coluna flex: navbar, conteudo (flex:1) e rodape. Garante o rodape
   colado embaixo mesmo em paginas curtas. */
body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  text-wrap:pretty;
  overflow-x:clip;
}

h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400;color:var(--night);line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(28px,4vw,40px)}
h2{font-size:clamp(22px,3vw,28px)}
h3{font-size:20px}

a{color:var(--accent-700);text-decoration:none}
a:hover{color:var(--accent-600)}

::selection{background:var(--teal-200)}
:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px}

/* --------------------------------------------------------- navegação topo */
.navbar{
  background:var(--night);
  color:#f5ead8;
  padding:13px var(--pad-x);
  position:sticky;top:0;z-index:40;
  flex:none;
}
/* Alinha o conteudo da navbar com o da pagina em telas largas */
.nav-inner{
  width:100%;max-width:var(--shell);margin:0 auto;
  display:flex;align-items:center;gap:24px;
}
.navbar .brand{display:flex;align-items:center;gap:10px;color:#f5ead8}
.navbar .brand:hover{color:#f5ead8}
.brand-name{font-family:var(--font-heading);font-size:21px}
.nav-links{display:flex;align-items:center;gap:18px;font-size:14px;margin-left:auto}
.nav-links a{color:#f5ead8;opacity:.82}
.nav-links a:hover{opacity:1;color:#f5ead8}
.nav-links a.ativo{opacity:1;background:var(--teal-600);padding:6px 14px;border-radius:999px}
#nav-user{display:flex;align-items:center;gap:10px;font-size:13.5px}
/* O nome da pessoa é o link do perfil — por isso tem cara de item de menu. */
.nav-nome{
  color:#f5ead8;opacity:.85;font-weight:600;max-width:22ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav-nome:hover{opacity:1;color:#f5ead8}
.nav-nome.ativo{opacity:1;background:var(--teal-600);padding:6px 14px;border-radius:999px}

/* Sair: só o ícone, sem borda nem fundo — a borda deixava com cara de
   botão de formulário. O círculo aparece de leve só ao passar o mouse,
   pra continuar claro que dá pra clicar. */
.btn-sair{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;
  background:none;border:none;border-radius:999px;
  color:#f5ead8;opacity:.65;cursor:pointer;padding:0;
  transition:opacity .15s,background .15s;
}
.btn-sair:hover{opacity:1;background:rgba(245,234,216,.12)}
.btn-sair:active{background:rgba(245,234,216,.2)}
.nav-desktop{display:flex;align-items:center;gap:18px}

/* ---------------------------------------------- tab bar flutuante (mobile) */
.tabbar{display:none}
@media (max-width:820px){
  .nav-desktop{display:none}
  /* O nome agora mora na barra de baixo, junto das outras seções.
     Em cima sobra só a marca e o botão de sair. */
  .nav-nome{display:none}
  /* O nome na barra de baixo encurta em vez de espremer os vizinhos. */
  .tabbar .tab-perfil{max-width:22vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar{
    display:flex;justify-content:space-between;gap:4px;
    position:fixed;left:12px;right:12px;bottom:12px;z-index:50;
    background:var(--night);color:#f5ead8;
    border-radius:999px;padding:9px 12px;box-shadow:var(--shadow-lg);
  }
  .tabbar a{color:#f5ead8;opacity:.72;font-size:11.5px;padding:8px 10px;
    border-radius:999px;min-height:44px;display:flex;align-items:center}
  .tabbar a.ativo{opacity:1;background:var(--teal-600);padding:8px 15px}
}

/* Celular estreito (iPhone SE e parecidos): com Acervo, Ranking, Resenhas,
   Amigos, Admin e o nome, são seis itens. Aperta um pouco pra caber tudo
   sem estourar a largura da tela. */
@media (max-width:400px){
  .tabbar{padding:9px 8px;gap:2px}
  .tabbar a{padding:8px 6px;font-size:10.5px}
  .tabbar a.ativo{padding:8px 10px}
  .tabbar .tab-perfil{max-width:18vw}
}

/* ------------------------------------------------------------- container */
.container{
  width:100%;max-width:var(--shell);margin:0 auto;
  padding:var(--pad-y) var(--pad-x) clamp(48px,5vw,80px);
  flex:1 0 auto;              /* empurra o rodape para o fim da viewport */
}

/* Faixa que sangra ate as bordas da tela mas mantem o texto alinhado
   com a coluna de conteudo (heros escuros). */
.full-bleed,.detalhe-hero,.hero-teal,.admin-hero,.ranking-hero{
  margin-inline:calc(-50vw + 50%);
  padding-inline:calc(50vw - 50%);
}

/* O hero "sobe" pra encostar na navbar cancelando o respiro do container.
   So que isso so vale quando ele e o primeiro elemento da pagina: se vier
   um aviso antes ("Avaliacao salva!"), o hero subia por cima e escondia o
   aviso. Com :first-child o aviso aparece e o hero fica no lugar. */
.detalhe-hero:first-child,
.hero-teal:first-child,
.admin-hero:first-child,
.ranking-hero:first-child{margin-top:calc(-1 * var(--pad-y))}

footer{
  background:var(--night-2);color:#cfdbe2;font-size:13px;
  padding:24px var(--pad-x);flex:none;margin-top:auto;
}
.footer-inner{
  width:100%;max-width:var(--shell);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:8px 28px;flex-wrap:wrap;
}
.footer-inner .marca{font-family:var(--font-heading);font-size:16px;color:#f5ead8}
.footer-inner .sub{opacity:.7}
@media (max-width:820px){footer{padding-bottom:104px}}

/* ---------------------------------------------------------------- alertas */
.alert{border-radius:var(--radius);padding:12px 18px;margin-bottom:22px;font-size:14px}
.alert-success{background:var(--teal-100);color:var(--teal-800)}
.alert-error{background:var(--accent-100);color:var(--accent-800)}

/* ----------------------------------------------------------------- cartões */
.card{background:var(--surface);border-radius:var(--radius-lg);padding:clamp(18px,1.5vw,28px);box-shadow:var(--shadow-sm)}
.card h2,.card h3{margin-top:0}
.card-kicker{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--n-500);margin-bottom:6px}
.card-noite{background:var(--night);color:#f5ead8}
.card-noite h2,.card-noite h3{color:#f5ead8}
.card-teal{background:var(--teal-100)}
.card-teal h2,.card-teal h3{color:var(--teal-800)}
.vazio{color:var(--n-500);font-size:14px}

.grid{display:grid;gap:clamp(14px,1.4vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* ----------------------------------------------------------------- botões */
.btn,.btn-primary,.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:14px;font-weight:600;
  padding:11px 22px;min-height:44px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-primary{background:var(--accent-500);color:#fff}
.btn-primary:hover{background:var(--accent-600);color:#fff}
.btn-primary:active{background:var(--accent-700)}
.btn-outline{background:transparent;border-color:var(--n-400);color:var(--night)}
.btn-outline:hover{background:var(--n-200);color:var(--night)}
.btn-noite{background:rgba(245,234,216,.12);border-color:rgba(245,234,216,.35);color:#f5ead8}
.btn-noite:hover{background:rgba(245,234,216,.2);color:#f5ead8}
.btn-bloco{width:100%}
.btn-pequeno{min-height:36px;padding:6px 15px;font-size:12.5px}

/* --------------------------------------------------------------- etiquetas */
.tag{display:inline-flex;align-items:center;font-size:12px;font-weight:600;
  padding:5px 13px;border-radius:999px;background:var(--n-200);color:var(--n-600)}
.tag-teal{background:var(--teal-200);color:var(--teal-800)}
.tag-accent{background:var(--accent-200);color:var(--accent-800)}

/* -------------------------------------------------------------- formulário */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label{font-size:12.5px;font-weight:600;color:var(--n-600)}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],textarea,select{
  font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--n-300);
  border-radius:999px;padding:11px 18px;min-height:44px;width:100%;
}
textarea{border-radius:20px;min-height:110px;resize:vertical;line-height:1.6}
input:focus,textarea:focus{border-color:var(--teal-500);outline:none;box-shadow:0 0 0 3px var(--teal-100)}
input::placeholder,textarea::placeholder{color:var(--n-400)}

.busca{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.busca input[type=search]{width:min(340px,100%)}

/* ------------------------------------------------------------------ tabela */
.tabela{width:100%;border-collapse:collapse;font-size:14.5px}
.tabela th{
  text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--n-500);font-weight:600;padding:0 12px 10px;border-bottom:1px solid var(--n-300);
}
.tabela td{padding:12px;border-bottom:1px solid var(--n-200);color:var(--night)}
.tabela tr:last-child td{border-bottom:none}
.tabela tbody tr:hover td{background:var(--surface-2)}
.tabela .num{text-align:right}

/* ------------------------------------------------------------------- capas */
.capa{border-radius:18px;overflow:hidden;background:var(--n-200);aspect-ratio:2/3;box-shadow:var(--shadow-sm)}
.capa img{width:100%;height:100%;object-fit:cover;display:block}
.capa .placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:10px;text-align:center;
}
.capa .iniciais{font-family:var(--font-heading);font-size:clamp(20px,2.2vw,30px);line-height:1}
.capa .titulo-mini{font-size:10.5px;opacity:.75;line-height:1.25}
/* 6 paletas fixas — mesma regra do macro (codigo_acervo % 6) */
.paleta-0{background:var(--teal-200);color:var(--teal-800)}
.paleta-1{background:var(--accent-200);color:var(--accent-800)}
.paleta-2{background:var(--night);color:#f5ead8}
.paleta-3{background:var(--n-300);color:var(--night)}
.paleta-4{background:var(--teal-700);color:#eaf6f3}
.paleta-5{background:var(--accent-300);color:var(--accent-900)}

.capa-mini{width:52px;flex:none;border-radius:12px}
.capa-mini .iniciais{font-size:15px}
.capa-mini .titulo-mini{display:none}
.capa-media{width:60px;flex:none;border-radius:14px}
.capa-media .titulo-mini{display:none}

/* ---------------------------------------------------------- grade de livros */
.pagina-header{display:flex;align-items:flex-end;gap:18px 32px;flex-wrap:wrap;margin-bottom:clamp(22px,2.4vw,36px)}
.pagina-header .contador{margin:6px 0 0;color:var(--n-600);font-size:14px}
.pagina-header .busca{margin-left:auto}

.livros-grid{display:grid;gap:clamp(14px,1.4vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,12vw,210px),1fr))}
.livro-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border-radius:var(--radius-lg);padding:12px;
  box-shadow:var(--shadow-sm);color:var(--ink);
  transition:transform .16s,box-shadow .16s;
}
.livro-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);color:var(--ink)}
.livro-card h3{font-size:15.5px;margin:0}
.livro-card .autor{margin:0;font-size:12.5px;color:var(--n-600)}
.livro-card .meta{margin:0;font-size:11.5px;color:var(--n-500)}

/* --------------------------------------------------------- detalhe do livro */
.detalhe-hero{
  background:var(--night);color:#f5ead8;
  border-radius:0 0 40px 40px;
  margin-bottom:clamp(24px,2.6vw,40px);
  padding-block:20px clamp(30px,3.4vw,52px);
}
.detalhe-hero h1{color:#f5ead8;font-size:clamp(26px,3.6vw,46px);margin:10px 0 4px;max-width:24ch}
.detalhe-hero .subtitulo{margin:0 0 14px;font-size:16px;opacity:.8}
.back{display:inline-block;color:#f5ead8;opacity:.8;font-size:13px;margin-bottom:clamp(16px,2vw,26px)}
.back:hover{color:#f5ead8;opacity:1}

/* capa | ficha | acoes — as acoes so viram 3a coluna quando ha espaco real */
.detalhe-grid{
  display:grid;align-items:start;
  grid-template-columns:clamp(120px,14vw,240px) minmax(0,1fr);
  gap:clamp(18px,2.6vw,48px);
}
.detalhe-grid .capa{border-radius:24px;box-shadow:var(--shadow-lg)}
.detalhe-info{min-width:0}
.ficha{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:14px clamp(26px,3vw,56px)}
.ficha li{font-size:14px;opacity:.9}
.ficha strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  opacity:.6;font-weight:600;margin-bottom:2px}
/* Linha de avaliacao: fica logo abaixo do titulo e do autor. Antes as
   acoes caiam numa segunda linha do grid, la embaixo, longe do titulo. */
.detalhe-avaliacao{
  display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;
  margin:0 0 clamp(16px,1.8vw,24px);
}
.media-resumo{display:flex;align-items:center;gap:9px}
.media-resumo .nota{font-family:var(--font-heading);font-size:24px;line-height:1}
.media-resumo .quantas{font-size:13px;opacity:.7}
.detalhe-avaliacao .sem-nota{font-size:13.5px;opacity:.7}
@media (max-width:640px){
  .detalhe-grid{grid-template-columns:100px minmax(0,1fr);gap:16px}
}
@media (min-width:1100px){
  .detalhe-grid{grid-template-columns:clamp(180px,13vw,250px) minmax(0,1fr)}
}

.detalhe-corpo{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) clamp(320px,25vw,420px);
  gap:clamp(18px,1.8vw,32px);
}
@media (max-width:900px){
  .detalhe-corpo{grid-template-columns:minmax(0,1fr)}
  /* empilhado, a coluna lateral (progresso + escrever resenha) vem antes
     da lista de resenhas — senao o botao "Escrever resenha" jogava o
     usuario la pro fim da pagina */
  .detalhe-corpo aside{order:-1}
}
.detalhe-secao{margin-bottom:30px}

/* estrelas */
.estrelas{color:var(--accent-500);letter-spacing:2px;line-height:1;white-space:nowrap}
.estrelas-grande{font-size:26px}
.media-box{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.media-nota{font-family:var(--font-heading);font-size:46px;line-height:1;color:var(--night)}
.avaliacao-widget{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(245,234,216,.1);padding:8px 16px;border-radius:999px}
.estrelas-input{display:flex;gap:2px}
.estrela{background:none;border:none;cursor:pointer;font-size:24px;padding:0 2px;
  color:rgba(245,234,216,.45);line-height:1}
.estrela.ativa{color:var(--accent-400)}
.estrela:hover{color:var(--accent-300)}

/* progresso */
.barra{height:12px;border-radius:999px;background:var(--surface);overflow:hidden}
.barra-fill{height:100%;background:var(--teal-500);border-radius:999px;transition:width .4s}
.barra-escura{background:rgba(245,234,216,.18)}

/* --------------------------------------------------------------- resenhas */
.resenha{background:var(--surface);border-radius:var(--radius-lg);padding:20px;
  box-shadow:var(--shadow-sm);margin-bottom:14px}
.resenha-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.resenha-livro{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font-size:12.5px;color:var(--n-600)}
.resenha-livro:hover{color:var(--night)}
.resenha-livro strong{color:var(--night);font-weight:600}
.resenha-topo .data{margin-left:auto;font-size:12px;color:var(--n-500)}
.resenha p{margin:0 0 12px;font-size:14.5px;line-height:1.65}
.resenha-acoes{display:flex;align-items:center;gap:14px;font-size:13px;flex-wrap:wrap}
.resenha-acoes form{margin:0}
.avatar{width:34px;height:34px;border-radius:999px;flex:none;
  display:grid;place-items:center;font-family:var(--font-heading);font-size:14px;
  background:var(--teal-200);color:var(--teal-800)}
.avatar-grande{width:72px;height:72px;font-size:26px}
.avatar-claro{background:rgba(255,255,255,.18);color:#eaf6f3}

.btn-curtir{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--n-300);color:var(--n-600);
  border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer;
}
.btn-curtir .coracao{font-size:15px;color:var(--accent-500);line-height:1}
.btn-curtir:hover{border-color:var(--accent-400);color:var(--accent-700)}
.btn-curtir.ativo{border-color:var(--accent-400);color:var(--accent-700);background:var(--accent-100)}
.btn-curtir.curtindo{opacity:.6}
.btn-curtir .coracao{transition:transform .15s}
.btn-curtir.ativo .coracao{transform:scale(1.15)}
.btn-excluir{background:none;border:none;color:var(--accent-700);cursor:pointer;font:inherit;font-size:13px;padding:0}

.mural{columns:360px;column-gap:clamp(14px,1.4vw,24px)}
@media (max-width:820px){.mural{columns:1}}
.mural .resenha{break-inside:avoid}

/* ---------------------------------------------------------------- ranking */
.periodo{display:flex;gap:6px;flex-wrap:wrap;margin-top:clamp(16px,2vw,24px)}
.periodo a{
  font-size:12.5px;font-weight:600;padding:0 16px;min-height:38px;border-radius:999px;
  display:inline-flex;align-items:center;
  background:rgba(245,234,216,.1);color:rgba(245,234,216,.78);border:1px solid transparent;
  transition:background .15s,color .15s;
}
.periodo a:hover{background:rgba(245,234,216,.2);color:#f5ead8}
.periodo a.ativo{background:var(--teal-500);color:#fff;border-color:var(--teal-500)}

/* abas sem JS: radio escondido + :checked controla os painéis */
.abas{display:flex;gap:6px;border-bottom:1px solid var(--n-300);padding-bottom:12px;
  margin-bottom:26px;flex-wrap:wrap}
.abas label{font-size:14px;font-weight:600;padding:9px 20px;border-radius:999px;cursor:pointer;
  color:var(--n-600);min-height:44px;display:inline-flex;align-items:center;gap:7px;
  transition:background .15s,color .15s}
.abas label:hover{background:var(--n-200)}
.aba-radio{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.painel{display:none}
#aba-leitores:checked ~ .abas label[for=aba-leitores],
#aba-lidos:checked ~ .abas label[for=aba-lidos],
#aba-avaliados:checked ~ .abas label[for=aba-avaliados]{background:var(--night);color:#f5ead8;font-weight:600}
#aba-leitores:checked ~ #painel-leitores,
#aba-lidos:checked ~ #painel-lidos,
#aba-avaliados:checked ~ #painel-avaliados{display:block}

/* --------------------------------------------------------------- pódio */
.podio{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);margin-bottom:clamp(16px,2vw,24px)}

/* 1º lugar: cartão largo e escuro, pra ele ganhar a página. */
.campeao{
  position:relative;display:flex;align-items:center;gap:clamp(16px,2vw,28px);
  background:var(--teal-700);color:#eaf6f3;border-radius:var(--radius-lg);
  padding:clamp(18px,2vw,28px);box-shadow:var(--shadow-md);overflow:hidden;
  transition:transform .16s,box-shadow .16s;
}
.campeao:hover{color:#eaf6f3;transform:translateY(-3px);box-shadow:var(--shadow-lg)}
/* Número da colocação em marca d'água, na fonte de título do site. */
.campeao-numero{
  position:absolute;right:6px;top:-26px;pointer-events:none;
  font-family:var(--font-heading);font-size:170px;line-height:1;opacity:.13;
}
.campeao-figura{flex:none}
.campeao-figura .capa{width:clamp(74px,8vw,104px)}
.campeao-figura .avatar{background:rgba(255,255,255,.2);color:#eaf6f3}
.campeao-info{flex:1;min-width:0}
.campeao-rotulo{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-bottom:2px}
.campeao-info h3{color:#eaf6f3;font-size:clamp(21px,2.6vw,30px);margin:0;line-height:1.15}
.campeao-extra{font-size:13px;opacity:.75;margin-top:4px}
.campeao-valor{flex:none;text-align:right;z-index:1}
.campeao-valor b{display:block;font-family:var(--font-heading);font-size:clamp(30px,4vw,46px);
  font-weight:400;line-height:1}
.campeao-valor span{font-size:12px;opacity:.8}

/* 2º e 3º: menores, lado a lado. */
.podio-dupla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
@media (max-width:600px){.podio-dupla{grid-template-columns:1fr}}
.vice{
  position:relative;display:flex;align-items:center;gap:14px;
  background:var(--surface);border-radius:var(--radius-lg);padding:16px;
  box-shadow:var(--shadow-sm);color:var(--ink);overflow:hidden;
  transition:transform .16s,box-shadow .16s;
}
.vice:hover{color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.vice-numero{
  position:absolute;right:10px;bottom:-22px;pointer-events:none;
  font-family:var(--font-heading);font-size:82px;line-height:1;color:var(--night);opacity:.09;
}
.vice-figura{flex:none}
.vice-info{min-width:0;z-index:1}
.vice-nome{font-family:var(--font-heading);font-size:17px;color:var(--night);line-height:1.2}
.vice-valor{font-size:13px;color:var(--n-600);margin-top:2px}
.vice-valor span{color:var(--n-500)}

/* Do 4º em diante: lista enxuta, com barra comparando com o líder. */
.lista-rank{display:flex;flex-direction:column}
.linha-rank{
  display:flex;align-items:center;gap:14px;padding:12px 4px;
  border-bottom:1px solid var(--n-200);color:var(--ink);
}
.linha-rank:last-child{border-bottom:none}
.linha-rank:hover{color:var(--ink);background:var(--surface-2);border-radius:14px}
.linha-pos{font-family:var(--font-heading);font-size:19px;color:var(--n-400);width:34px;flex:none;text-align:center}
.linha-figura{flex:none;display:flex}
.linha-meio{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.linha-nome{font-size:14.5px;font-weight:600;color:var(--night);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha-meio .barra{height:6px}
.linha-valor{flex:none;text-align:right;min-width:82px}
.linha-valor b{font-family:var(--font-heading);font-size:19px;font-weight:400;color:var(--night)}
.linha-valor span{display:block;font-size:11px;color:var(--n-500)}

/* Capa maior, só do campeão. */
.capa-podio{width:100%;border-radius:16px}
.capa-podio .titulo-mini{display:none}

@media (max-width:520px){
  .campeao{flex-wrap:wrap;gap:14px}
  .campeao-valor{text-align:left}
  .linha-figura{display:none}
}

.lista-livros{display:grid;gap:clamp(10px,1vw,18px);grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.linha-livro{display:flex;align-items:center;gap:14px;background:var(--surface);
  border-radius:var(--radius-lg);padding:12px;box-shadow:var(--shadow-sm);color:var(--ink)}
.linha-livro:hover{color:var(--ink);box-shadow:var(--shadow-md)}
.linha-livro .pos{font-family:var(--font-heading);font-size:24px;width:26px;flex:none;color:var(--accent-600)}
.linha-livro .titulo{font-family:var(--font-heading);font-size:18px;color:var(--night);line-height:1.2}
.linha-livro .sub{font-size:12.5px;color:var(--n-600)}
.linha-livro .valor{margin-left:auto;text-align:right;flex:none}
.linha-livro .valor b{font-family:var(--font-heading);font-size:22px;font-weight:400;color:var(--night)}
.linha-livro .valor span{display:block;font-size:11px;color:var(--n-500)}
.linha-destaque{background:var(--teal-700);color:#eaf6f3}
.linha-destaque .pos,.linha-destaque .titulo,.linha-destaque .valor b{color:#eaf6f3}
.linha-destaque .sub,.linha-destaque .valor span{color:rgba(234,246,243,.85)}

.livros-ranking{display:grid;gap:clamp(14px,1.4vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(170px,13vw,230px),1fr))}
.capa-selo{position:relative}
.selo{position:absolute;top:10px;left:10px;z-index:2;background:var(--accent-500);color:#fff;
  font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px}

/* --------------------------------------------------------- perfil / conta */
.perfil-hero{display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap;margin-bottom:28px}
.hero-numeros{display:flex;gap:10px 34px;flex-wrap:wrap;margin-left:auto}
.hero-numeros b{display:block;font-family:var(--font-heading);font-size:26px;font-weight:400;line-height:1.1}
.hero-numeros span{font-size:12px;opacity:.8}
.hero-acao{margin-left:auto;display:flex;align-items:center;gap:10px}
.hero-acao form{margin:0}
.hero-numeros + .hero-acao{margin-left:0}
.selo-relacao{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.18);color:inherit;white-space:nowrap}
.pessoa-acoes .selo-relacao{background:var(--n-200);color:var(--n-600)}
.perfil-hero h1{margin:0}
.perfil-hero .email{margin:2px 0 0;font-size:14px;color:var(--n-600)}
.hero-teal{background:var(--teal-700);color:#eaf6f3;border-radius:0 0 40px 40px;
  margin-bottom:clamp(24px,2.6vw,40px);
  padding-block:clamp(24px,3vw,44px)}
.hero-teal h1{color:#eaf6f3}
.hero-teal .email{color:rgba(234,246,243,.85)}

.numeros{display:grid;gap:clamp(10px,1vw,18px);grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));margin-bottom:clamp(18px,2vw,28px)}
.numero{background:var(--surface);border-radius:24px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.numero b{display:block;font-family:var(--font-heading);font-size:28px;font-weight:400;color:var(--night)}
.numero span{font-size:12px;color:var(--n-500)}

/* diário: linha do tempo pontilhada */
.diario{border-left:2px dashed var(--n-400);padding-left:26px;
  display:flex;flex-direction:column;gap:16px;margin-left:6px}
.diario-item{position:relative}
.diario-item::before{content:"";position:absolute;left:-33px;top:20px;
  width:12px;height:12px;border-radius:999px;background:var(--teal-500);box-shadow:0 0 0 4px var(--bg)}
.diario-item.concluido::before{background:var(--night)}
.diario-card{display:flex;align-items:center;gap:14px;background:var(--surface);
  border-radius:24px;padding:14px;box-shadow:var(--shadow-sm)}
.diario-card .titulo{font-family:var(--font-heading);font-size:19px;color:var(--night);line-height:1.2}
.diario-card .quando{font-size:12.5px;color:var(--n-600)}
.diario-card .pct{margin-left:auto;font-family:var(--font-heading);font-size:20px;color:var(--teal-700)}

.pendentes{display:grid;gap:clamp(10px,1vw,18px);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.pendente{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:22px;padding:12px}
.pendente .titulo{font-size:14px;font-weight:600;color:var(--night)}
.pendente .sub{font-size:11.5px;color:var(--n-600)}
.estrelas-vazias{color:var(--n-400);letter-spacing:1px;font-size:15px}

/* ---------------------------------------------------------------- amigos */
.duas-colunas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,40px);align-items:start}
@media (max-width:820px){.duas-colunas{grid-template-columns:1fr}}
.pessoa{display:flex;align-items:center;gap:12px;background:var(--surface);
  border-radius:22px;padding:12px;box-shadow:var(--shadow-sm);margin-bottom:10px}
.pessoa .nome{font-size:14.5px;font-weight:600;color:var(--night)}
.pessoa .sub{font-size:12px;color:var(--n-600)}
.pessoa form{margin:0}
.pessoa-acoes{margin-left:auto;display:flex;gap:8px}
.grade-amigos{display:grid;gap:clamp(10px,1vw,16px);grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.amigo-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border-radius:22px;padding:14px;box-shadow:var(--shadow-sm);color:var(--ink)}
.amigo-card:hover{color:var(--ink);box-shadow:var(--shadow-md)}

/* ----------------------------------------------------------------- login */
/* Na tela de auth o conteúdo perde o respiro do container e o cartão
   estica pra ocupar toda a altura que sobra da viewport. */
body.tela-auth .container{padding:0;max-width:none;display:flex;flex-direction:column}
body.tela-auth .auth-wrap{
  flex:1;max-width:none;margin:0;border-radius:0;box-shadow:none;min-height:0;
}
body.tela-auth .auth-lado,body.tela-auth .auth-form{padding:clamp(28px,5vw,72px)}
body.tela-auth .auth-form form,body.tela-auth .auth-form h2,
body.tela-auth .auth-form p,body.tela-auth .auth-form .alert{width:100%;max-width:420px;align-self:center}
body.tela-auth .auth-form{align-items:center}
body.tela-auth .auth-lado h2{font-size:clamp(30px,3.4vw,52px);max-width:16ch}
body.tela-auth .auth-lado p{font-size:clamp(14.5px,1.1vw,17px);max-width:44ch}
/* Na tela de entrar/criar conta a pessoa ainda não navega pelo site: a barra
   de baixo do celular ficava oferecendo Acervo/Ranking/Resenhas no meio do
   login, atrapalhando e tampando o formulário. O rodapé também sai — ali a
   tela é só o formulário. */
body.tela-auth .tabbar{display:none}
body.tela-auth footer{display:none}

@media (max-width:820px){
  body.tela-auth .auth-wrap{flex:none}
  body.tela-auth .auth-lado{padding-block:clamp(24px,6vw,40px)}
  /* Sem a barra flutuante, o espaço reservado pra ela não é mais preciso. */
  body.tela-auth .container{padding-bottom:0}
}
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:540px;
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  background:var(--surface);max-width:1000px;margin:clamp(0px,3vh,36px) auto}
@media (max-width:820px){.auth-wrap{grid-template-columns:1fr;min-height:0}}
.auth-lado{background:var(--night);color:#f5ead8;padding:34px;display:flex;flex-direction:column}
.auth-lado h2{color:#f5ead8;font-size:32px;margin:auto 0 12px}
.auth-lado p{font-size:14.5px;opacity:.8;margin:0}
.auth-marca{font-family:var(--font-heading);font-size:22px}
.auth-form{padding:34px;display:flex;flex-direction:column;justify-content:center}
.auth-form h2{margin-bottom:18px}
.auth-form p{font-size:13.5px;color:var(--n-600);margin:16px 0 0;text-align:center}

/* --------------------------------------------- contagem de curtidas (só leitura) */
/* Nas listagens a curtida é só um número — não dá pra clicar ali. Antes
   usava a classe .btn-curtir, então parecia botão e não fazia nada. */
.curtidas{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--n-600)}
.curtidas .coracao{color:var(--accent-500);font-size:15px;line-height:1}

/* --------------------------------------------------------- administração */
/* Faixa escura no topo, igual à da página do livro: deixa claro que você
   saiu da área do leitor e entrou na administração. */
.admin-hero,.ranking-hero{
  background:var(--night);color:#f5ead8;
  border-radius:0 0 40px 40px;
  margin-bottom:clamp(24px,2.6vw,40px);
  padding-block:clamp(20px,2.4vw,34px);
}
.admin-hero h1,.ranking-hero h1{color:#f5ead8;margin:4px 0 6px}
.admin-hero .card-kicker,.ranking-hero .card-kicker{color:var(--teal-300);margin-bottom:0}
.admin-hero .subtitulo,.ranking-hero .subtitulo{margin:0;font-size:15px;opacity:.8;max-width:64ch}

.admin-abas{display:flex;gap:6px;flex-wrap:wrap;margin-top:clamp(18px,2vw,26px)}
.admin-abas a{
  font-size:13.5px;font-weight:600;padding:0 18px;border-radius:999px;
  min-height:40px;display:inline-flex;align-items:center;
  color:rgba(245,234,216,.78);background:rgba(245,234,216,.1);
  transition:background .15s,color .15s;
}
.admin-abas a:hover{background:rgba(245,234,216,.2);color:#f5ead8}
.admin-abas a.ativo{background:var(--teal-500);color:#fff}

.admin-barra{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.admin-barra .busca{flex:1;min-width:min(320px,100%)}
.admin-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.admin-acoes form{margin:0}

/* Tabelas largas rolam dentro do card, sem empurrar a página inteira. */
.tabela-rolagem{overflow-x:auto}

/* Célula com capinha + título + código, no lugar de texto solto. */
.admin-livro{display:flex;align-items:center;gap:12px;min-width:230px}
.admin-livro .nome{display:block;font-weight:600;color:var(--night);line-height:1.3}
.admin-livro .nome:hover{color:var(--accent-700)}
.admin-livro .cod{font-size:12px;color:var(--n-500)}

.admin-form{max-width:640px}
.admin-form .ajuda{display:block;margin-top:5px;font-size:12.5px;color:var(--n-500)}
.admin-form input:disabled{background:var(--surface-2);color:var(--n-500);cursor:not-allowed}
.admin-form .campo{margin-bottom:18px}
.admin-form .admin-acoes{margin-top:26px;padding-top:20px;border-top:1px solid var(--n-200)}

.admin-resenha{padding:18px 0;border-bottom:1px solid var(--n-200)}
.admin-resenha:first-child{padding-top:0}
.admin-resenha:last-child{border-bottom:none;padding-bottom:0}
.admin-resenha p{margin:10px 0 0;font-size:14.5px;line-height:1.65}
.admin-resenha-topo{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.admin-resenha-topo form{margin:0}
.admin-resenha .quem{display:flex;align-items:center;gap:10px;min-width:0}
.admin-resenha .quem b{color:var(--night);font-size:14.5px}
.admin-resenha .sobre{font-size:12.5px;color:var(--n-600)}

/* Estado vazio: centralizado, com um ícone grande, em vez de uma
   frase cinza solta no canto. */
.vazio-bloco{text-align:center;padding:clamp(26px,4vw,48px) 20px}
.vazio-bloco .icone{font-size:36px;line-height:1;margin-bottom:12px;opacity:.35}
.vazio-bloco strong{display:block;font-family:var(--font-heading);font-weight:400;
  font-size:19px;color:var(--night);margin-bottom:4px}
.vazio-bloco p{margin:0 auto;max-width:46ch;color:var(--n-500);font-size:14px}

/* ------------------------------------------------------------ paginação */
.paginacao{display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;margin-top:clamp(26px,3vw,40px)}
.paginacao .conta{font-size:13.5px;color:var(--n-600)}
/* Botão que não leva a lugar nenhum (primeira/última página): fica visível,
   pra barra não "pular" de lugar, mas apagado e sem cursor de link. */
.paginacao .desativado{opacity:.35;cursor:default;pointer-events:none}

/* ------------------------------------------------- card de livro (rodapé) */
/* O corpo cresce pra ocupar a altura sobrando, assim os selinhos de nota
   ficam alinhados embaixo em todos os cards da grade, mesmo com títulos
   de tamanhos diferentes. */
.livro-card-corpo{display:flex;flex-direction:column;gap:4px;flex:1}
.livro-card-rodape{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.livro-card-rodape .paginas{font-size:11.5px;color:var(--n-500);margin-left:auto}

.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:999px;background:var(--n-200);color:var(--n-600);white-space:nowrap}
.chip-nota{background:var(--accent-100);color:var(--accent-800)}
.chip-nota .quantas{font-weight:400;opacity:.7}
.chip-apagado{background:transparent;color:var(--n-400);font-weight:400;padding-inline:0}

/* ------------------------------------------------------ textos auxiliares */
.explica{font-size:13.5px;color:var(--n-600);line-height:1.6;margin:0 0 16px}
.titulo-secao{margin:clamp(26px,3vw,38px) 0 16px}
code{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.9em;
  background:var(--surface-2);padding:2px 6px;border-radius:6px;color:var(--night)}

/* ------------------------------------------------------- filtros do admin */
.admin-filtros{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--n-200)}
.admin-filtros a{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;
  background:var(--surface-2);color:var(--n-600);white-space:nowrap}
.admin-filtros a:hover{background:var(--n-200);color:var(--night)}
.admin-filtros a.ativo{background:var(--night);color:#f5ead8}

/* Linha acima da tabela: quantos resultados e em que página. */
.admin-resultado{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px 20px;flex-wrap:wrap;margin-bottom:16px;font-size:14px;color:var(--n-600)}
.admin-resultado b{color:var(--night);font-size:16px}

/* Etiqueta miúda dentro da tabela, marcando o que falta no livro. */
.etiqueta{display:inline-block;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;padding:2px 7px;border-radius:999px;margin-left:5px;
  background:var(--n-200);color:var(--n-600)}
.etiqueta-alerta{background:var(--accent-200);color:var(--accent-800)}

/* ------------------------------------------- aviso de acervo incompleto */
.aviso-pendencias{border-left:5px solid var(--accent-400);margin-bottom:clamp(24px,3vw,36px)}
.aviso-pendencias h2{margin-bottom:8px}
.faltando{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin-bottom:16px}
.item-faltando{display:block;background:var(--surface-2);border-radius:18px;padding:14px 16px;
  color:var(--ink);transition:background .15s,transform .15s}
.item-faltando:hover{background:var(--n-200);color:var(--ink);transform:translateY(-2px)}
.item-faltando b{display:block;font-family:var(--font-heading);font-size:30px;font-weight:400;
  line-height:1.1;color:var(--night)}
.item-faltando span{display:block;font-size:13px;font-weight:600;color:var(--night)}
.item-faltando small{display:block;font-size:11.5px;color:var(--n-500);margin-top:2px}
.item-faltando.destaque{background:var(--accent-100)}
.item-faltando.destaque:hover{background:var(--accent-200)}
.item-faltando.destaque b,.item-faltando.destaque span{color:var(--accent-800)}
.item-faltando.destaque small{color:var(--accent-700)}

/* ---------------------------------------------------- leitores / situação */
.selos{display:flex;gap:6px;flex-wrap:wrap}
.tag-bloqueado{background:var(--n-600);color:#f5ead8}
/* Conta desativada fica apagada na lista, mas continua legível. */
.linha-apagada td{opacity:.55}
.linha-apagada:hover td{opacity:.85}

/* ------------------------------------------------------- exemplo de CSV */
.exemplo-csv{background:var(--night);color:#e7f1ee;border-radius:16px;
  padding:14px 16px;overflow-x:auto;font-size:12.5px;line-height:1.7;margin:0 0 16px}
.exemplo-csv code{background:none;padding:0;color:inherit;font-size:inherit;white-space:pre}

/* ---------------------------------------------- contador ao lado do título */
/* Era um style inline repetido em quatro telas. */
.contagem{font-family:var(--font-body);font-size:14px;font-weight:600;
  color:var(--n-500);margin-left:4px}
.contagem.destaque{color:var(--accent-700)}

/* Nota que a pessoa deu ao livro, mostrada junto do nome dela na resenha. */
.nota-inline{display:block;font-size:12px;color:var(--n-500);white-space:nowrap}
.nota-inline .estrelas{font-size:11px;letter-spacing:1px}

/* ===================================================== ajustes finais de uso */

/* O link "Escrever resenha" leva pra uma âncora na página. Sem isto o alvo
   parava escondido embaixo da navbar, que é fixa no topo. */
[id]{scroll-margin-top:86px}

/* Rolagem suave nos links de âncora — desligada pra quem pediu menos
   animação nas preferências do sistema. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* Título comprido ou palavra gigante não estoura mais o card. */
h1,h2,h3,.livro-card h3,.admin-livro .nome,.diario-card .titulo,.linha-livro .titulo{
  overflow-wrap:anywhere;
}

/* Placeholder de capa não repete o título quando ele já está logo abaixo
   (nos cards mini das tabelas e listas). */
.capa-mini .titulo-mini,.capa-media .titulo-mini{display:none}

/* Alvo de toque confortável nos links das barras de filtro no celular. */
@media (max-width:640px){
  .admin-filtros a,.periodo a{min-height:40px;display:inline-flex;align-items:center}
  .paginacao .btn{flex:1;min-width:130px}
}

/* ------------------------------------------------------------- sinopse */
/* Fica dentro da faixa escura do topo, logo abaixo da ficha do livro.
   A largura é limitada porque linha muito comprida cansa de ler. */
.sinopse-hero{max-width:68ch;margin:0 0 clamp(18px,2vw,26px)}
.sinopse-hero p{margin:0 0 10px;font-size:15px;line-height:1.7;opacity:.88}
.sinopse-hero p:last-child{margin-bottom:0}

/* Convite que só o admin vê quando o livro está sem sinopse. */
.sinopse-vazia{margin:0 0 clamp(18px,2vw,26px);font-size:13.5px;opacity:.7}
.sinopse-vazia a{color:var(--accent-300)}
.sinopse-vazia a:hover{color:var(--accent-200)}

/* Prévia da sinopse no card do acervo: no máximo 3 linhas, com "Ler mais"
   no fim. O corte por linhas acompanha a largura do card. */
.livro-card-sinopse{
  margin:2px 0 0;font-size:12px;line-height:1.5;color:var(--n-600);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ler-mais{color:var(--accent-700);font-weight:600;white-space:nowrap}
.livro-card:hover .ler-mais{color:var(--accent-600);text-decoration:underline}

/* ------------------------------------------- caixa de escrever resenha */
/* Fica no meio da lista de resenhas, como um campo de comentário: avatar
   de quem escreve à esquerda, o texto e o botão à direita. */
.escrever-resenha{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface);border-radius:var(--radius-lg);
  padding:16px;box-shadow:var(--shadow-sm);margin-bottom:18px;
}
.escrever-corpo{flex:1;min-width:0;margin:0}
.escrever-corpo textarea{
  min-height:52px;border-radius:16px;padding:12px 16px;font-size:14.5px;
  transition:min-height .15s;
}
/* Ao clicar, a caixa cresce — começa discreta pra não dominar a página. */
.escrever-resenha:focus-within .escrever-corpo textarea{min-height:104px}

.escrever-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
.escrever-aviso{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-700);font-weight:600;margin-bottom:8px;
}
.escrever-deslogado{flex:1;font-size:14px;color:var(--n-600);padding:6px 0}

/* ------------------------------------- progresso de quem escreveu a resenha */
/* Barrinha fina abaixo do nome, mostrando até onde a pessoa leu. Dá contexto:
   quem parou na página 30 viu bem menos do livro do que quem terminou. */
.progresso-resenha{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.progresso-resenha .barra{flex:none;width:clamp(70px,22%,120px);height:6px;background:var(--n-200)}
.progresso-resenha span{font-size:12px;color:var(--n-500)}

/* ------------------------------------------------------ filtro de spoiler */
/* O checkbox fica escondido e é ele que revela o texto: `:checked ~` tira o
   borrão e some com o aviso. Mesmo truque das abas do ranking — sem JS. */
.spoiler{position:relative;margin-bottom:12px}
.spoiler-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.spoiler-conteudo{filter:blur(5px);user-select:none;transition:filter .25s}
.spoiler-conteudo p{margin:0}
.spoiler-toggle:checked ~ .spoiler-conteudo{filter:none;user-select:auto}

.spoiler-aviso{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;text-align:center;
  cursor:pointer;padding:10px;border-radius:16px;
  background:rgba(255,253,248,.72);border:1px dashed var(--n-400);
  transition:background .15s,border-color .15s;
}
.spoiler-aviso:hover{background:rgba(255,253,248,.9);border-color:var(--accent-400)}
.spoiler-titulo{font-size:13px;font-weight:700;color:var(--accent-700)}
.spoiler-sub{font-size:11.5px;color:var(--n-600);max-width:42ch;line-height:1.4}
.spoiler-toggle:checked ~ .spoiler-aviso{display:none}

/* Teclado: o aviso precisa dar pra alcançar sem mouse. */
.spoiler-toggle:focus-visible ~ .spoiler-aviso{outline:2px solid var(--accent-500);outline-offset:2px}

/* ------------------------------------------------- entrar com o Google */
/* Separador "ou" entre o formulário e o botão do Google: duas linhas com
   a palavra no meio. */
.separador{display:flex;align-items:center;gap:12px;margin:20px 0;
  font-size:12px;color:var(--n-500);text-transform:uppercase;letter-spacing:.08em}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--n-300)}

/* Botão branco com borda, que é como o Google pede que apareça. */
.btn-google{background:#fff;border:1px solid var(--n-300);color:var(--ink);gap:10px}
.btn-google:hover{background:var(--surface-2);border-color:var(--n-400);color:var(--ink)}
.btn-google svg{flex:none}