/* ================================================================
   DIÁRIO DE LEITURAS — folha de estilos
   ----------------------------------------------------------------
   Índice (procure pelo número para navegar):
     [1] Variáveis de design (cores, fontes, medidas)
     [2] Reset e base
     [3] Atmosfera (lamparina, névoa, vinheta, granulado)
     [4] Estrutura: navegação lateral + área principal
     [5] Cabeçalhos de página e utilitários
     [6] Botões, campos de formulário, foco de teclado
     [7] Cartões, chips de status, estrelas
     [8] Estantes e cartões de livro
     [9] Página do livro: abas, progresso, diário (trechos/impressões)
    [10] Personagens
    [11] Comparações
    [12] Progresso e gráficos
    [13] Modais e toasts
    [14] Responsivo (celular) e movimento reduzido
    [15] A capa — “O Limiar”, o véu de abertura
    [16] A chama viva (compartilhada: capa e cena do progresso)
   ================================================================ */

/* ---------------------------------------------------------------
   [1] VARIÁVEIS DE DESIGN
   A paleta aprovada: “A Lamparina”.
   --------------------------------------------------------------- */
:root {
  /* Paleta */
  --noite:        #0A0E16;   /* Noite do Neva — fundo profundo          */
  --noite-2:      #070A10;   /* ainda mais fundo (bordas da vinheta)    */
  --penumbra:     #141B29;   /* Penumbra — superfícies, cartões         */
  --penumbra-2:   #1A2334;   /* superfície elevada / hover              */
  --campo:        #0E1420;   /* fundo de campos de formulário           */
  --nevoa:        #8C99AD;   /* Névoa de Friedrich — texto secundário   */
  --nevoa-fraca:  #5E6A7E;   /* texto terciário, legendas apagadas      */
  --marfim:       #EAE3D2;   /* Marfim de Vela — texto principal        */
  --ambar:        #E3A455;   /* Âmbar da Lamparina — a luz, destaques   */
  --ambar-claro:  #F0C58A;   /* âmbar mais quente para hover            */
  --latao:        #9C7F4E;   /* Latão Antigo — filetes e ornamentos     */
  --imperial:     #26364F;   /* Azul Imperial — tons intermediários     */
  --perigo:       #C4695E;   /* ações destrutivas (excluir)             */

  /* Linhas e sombras */
  --linha:        rgba(140, 153, 173, 0.14);
  --linha-latao:  rgba(156, 127, 78, 0.28);
  --sombra:       0 14px 34px rgba(3, 5, 9, 0.5);

  /* Tipografia */
  --f-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --f-corpo:   'Literata', 'Iowan Old Style', Georgia, serif;

  /* Medidas */
  --raio: 10px;
  --nav-larg: 232px;

  /* “Claridade” do ano: 0 = névoa total, 1 = sala iluminada.
     O JavaScript atualiza este valor conforme os livros terminados. */
  --clarity: 0;

  color-scheme: dark;
}

/* ---------------------------------------------------------------
   [2] RESET E BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--noite);
  color: var(--marfim);
  font-family: var(--f-corpo);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  color: var(--marfim);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
a { color: var(--ambar); text-decoration: none; }
a:hover { color: var(--ambar-claro); }

::selection { background: rgba(227, 164, 85, 0.28); color: var(--marfim); }

/* Barra de rolagem discreta (navegadores WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(140, 153, 173, 0.18);
  border-radius: 6px;
  border: 2px solid var(--noite);
}
::-webkit-scrollbar-thumb:hover { background: rgba(140, 153, 173, 0.32); }

/* Link “pular para o conteúdo” — visível apenas ao focar com Tab */
.skip-link {
  position: fixed;
  top: -60px; left: 16px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--penumbra-2);
  border: 1px solid var(--ambar);
  border-radius: var(--raio);
  color: var(--marfim);
  transition: top 0.15s ease;
}
.skip-link:focus-visible { top: 16px; }

.noscript-aviso {
  position: relative; z-index: 5;
  max-width: 480px;
  margin: 15vh auto;
  padding: 32px;
  background: var(--penumbra);
  border: 1px solid var(--linha-latao);
  border-radius: var(--raio);
  text-align: center;
}

/* ---------------------------------------------------------------
   [3] ATMOSFERA
   Camadas fixas atrás de tudo. A variável --clarity (0 a 1)
   dissipa a névoa e acende a lamparina conforme o ano avança.
   --------------------------------------------------------------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* A lamparina: um halo de luz quente vindo do alto, à esquerda.
   Cresce e aquece com a claridade do ano. */
.atmo-lamp {
  position: absolute;
  inset: -25% -15%;
  background:
    radial-gradient(ellipse 52% 42% at 26% -4%,
      rgba(227, 164, 85, 0.20), rgba(227, 164, 85, 0.05) 45%, transparent 68%),
    radial-gradient(ellipse 26% 20% at 26% -4%,
      rgba(240, 197, 138, 0.16), transparent 70%);
  opacity: calc(0.38 + var(--clarity) * 0.62);
  transform: scale(calc(0.82 + var(--clarity) * 0.55));
  transform-origin: 26% 0%;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* Névoa: duas camadas azul-acinzentadas que derivam lentamente.
   Quanto maior a claridade, mais transparentes ficam. */
.atmo-fog {
  position: absolute;
  inset: -20% -30%;
  opacity: calc(0.25 + (1 - var(--clarity)) * 0.75);
  transition: opacity 1.2s ease;
}
.atmo-fog-a {
  background:
    radial-gradient(ellipse 40% 30% at 70% 20%, rgba(140, 153, 173, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 34% at 20% 65%, rgba(110, 130, 160, 0.08), transparent 70%),
    radial-gradient(ellipse 45% 30% at 85% 80%, rgba(140, 153, 173, 0.07), transparent 70%);
  animation: deriva-a 90s ease-in-out infinite alternate;
}
.atmo-fog-b {
  background:
    radial-gradient(ellipse 38% 26% at 40% 35%, rgba(120, 140, 170, 0.09), transparent 70%),
    radial-gradient(ellipse 55% 36% at 90% 45%, rgba(140, 153, 173, 0.06), transparent 70%);
  animation: deriva-b 120s ease-in-out infinite alternate;
}
@keyframes deriva-a {
  from { transform: translate3d(-2.5%, -1%, 0); }
  to   { transform: translate3d(2.5%, 1.5%, 0); }
}
@keyframes deriva-b {
  from { transform: translate3d(2%, 1%, 0); }
  to   { transform: translate3d(-2%, -1.5%, 0); }
}

/* Vinheta: escurece as bordas, como uma sala iluminada ao centro */
.atmo-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 105% 90% at 50% 38%,
    transparent 48%, rgba(5, 7, 12, 0.55) 82%, rgba(4, 6, 10, 0.82) 100%);
}

/* Granulado: textura finíssima de ruído (SVG embutido) — dá corpo de
   papel antigo/filme ao fundo sem pesar nada. */
.atmo-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------------------------------------------------------------
   [4] ESTRUTURA — navegação + conteúdo
   --------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 10;
  width: var(--nav-larg);
  display: flex;
  flex-direction: column;
  padding: 28px 18px 20px;
  background: linear-gradient(180deg, rgba(20, 27, 41, 0.72), rgba(12, 16, 25, 0.72));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-right: 1px solid var(--linha-latao);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 22px;
  color: var(--marfim);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--linha-latao) 30%, var(--linha-latao) 70%, transparent) 1;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.brand:hover { color: var(--marfim); }
.brand-lamp { color: var(--ambar); flex-shrink: 0; }
.brand-name {
  font-family: var(--f-display);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.04em;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 22px;
  flex: 1;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--nevoa);
  border: 1px solid transparent;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-link svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.nav-link span { font-size: 0.95rem; letter-spacing: 0.02em; }
.nav-link:hover { color: var(--marfim); background: rgba(140, 153, 173, 0.07); }
.nav-link.ativo {
  color: var(--ambar);
  background: rgba(227, 164, 85, 0.08);
  border-color: rgba(227, 164, 85, 0.18);
}

.nav-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}
.nav-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--nevoa);
  font-size: 0.85rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-tool svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.nav-tool:hover { color: var(--ambar); border-color: rgba(227, 164, 85, 0.4); }
.nav-note {
  width: 100%;
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--nevoa-fraca);
}

.main {
  position: relative;
  z-index: 1;
  margin-left: var(--nav-larg);
  padding: 44px clamp(20px, 5vw, 64px) 80px;
  max-width: calc(1160px + var(--nav-larg));
}
/* O roteador move o foco para cá ao trocar de tela (acessibilidade);
   esse foco programático não deve desenhar contorno visível. */
.main:focus, .main:focus-visible { outline: none; }

/* ---------------------------------------------------------------
   [5] CABEÇALHOS DE PÁGINA E UTILITÁRIOS
   --------------------------------------------------------------- */
.page-head { margin-bottom: 34px; }
.page-title {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.015em;
}
.page-sub {
  margin-top: 6px;
  color: var(--nevoa);
  font-size: 0.95rem;
  max-width: 60ch;
}
.page-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Filete ornamental — a linha dourada que separa seções */
.filete {
  height: 1px;
  border: none;
  margin: 18px 0 0;
  background: linear-gradient(90deg, var(--linha-latao), rgba(156, 127, 78, 0.06) 60%, transparent);
}

.volta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--nevoa);
  font-size: 0.88rem;
}
.volta:hover { color: var(--ambar); }
.volta::before { content: '‹'; font-size: 1.1rem; line-height: 1; }

.secao-titulo {
  font-size: 1.3rem;
  margin: 34px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.secao-titulo .contagem { color: var(--nevoa-fraca); font-size: 0.95rem; font-family: var(--f-corpo); }

/* Estado vazio — sóbrio, convidativo */
.vazio {
  padding: 56px 24px;
  text-align: center;
  color: var(--nevoa);
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
}
.vazio-frase {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--nevoa);
}
.vazio-acao { margin-top: 16px; }

.texto-nevoa { color: var(--nevoa); }
.texto-fraco { color: var(--nevoa-fraca); font-size: 0.85rem; }

/* ---------------------------------------------------------------
   [6] BOTÕES, FORMULÁRIOS E FOCO
   --------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
  border-radius: 3px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: transparent;
  border: 1px solid var(--linha-latao);
  border-radius: 8px;
  color: var(--marfim);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: rgba(227, 164, 85, 0.08); border-color: rgba(227, 164, 85, 0.45); }

.btn-primario {
  background: linear-gradient(180deg, #EBB068, #D9974A);
  border-color: transparent;
  color: #14100A;
  font-weight: 600;
}
.btn-primario:hover {
  background: linear-gradient(180deg, #F0BC78, #E0A055);
  border-color: transparent;
}

.btn-fantasma {
  border-color: transparent;
  color: var(--nevoa);
  padding: 7px 10px;
}
.btn-fantasma:hover { color: var(--marfim); background: rgba(140, 153, 173, 0.08); }

.btn-perigo { color: var(--perigo); border-color: rgba(196, 105, 94, 0.35); }
.btn-perigo:hover { background: rgba(196, 105, 94, 0.1); border-color: var(--perigo); }

.btn-mini { padding: 4px 10px; font-size: 0.8rem; border-radius: 6px; }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo > label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nevoa);
}
.campo input[type="text"],
.campo input[type="number"],
.campo input[type="date"],
.campo select,
.campo textarea {
  padding: 10px 12px;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--marfim);
  transition: border-color 0.15s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: rgba(227, 164, 85, 0.6);
}
.campo textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.campo .dica { font-size: 0.78rem; color: var(--nevoa-fraca); }

.campos-lado-a-lado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* Escolha de cor da estante: bolinhas pré-definidas + seletor livre */
.paleta-cores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.paleta-cor {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  background-clip: padding-box;
}
.paleta-cor[aria-pressed="true"] {
  border-color: var(--marfim);
  box-shadow: 0 0 0 2px var(--noite), 0 0 8px rgba(227, 164, 85, 0.5);
}
.paleta-cor-livre {
  width: 26px; height: 26px;
  padding: 0; border: 1px dashed var(--nevoa);
  border-radius: 50%;
  background: transparent;
}

/* Avaliação por estrelas (grupo de botões) */
.estrelas { display: inline-flex; gap: 2px; }
.estrela-btn {
  background: none;
  border: none;
  padding: 2px;
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(140, 153, 173, 0.35);
}
.estrela-btn.cheia { color: var(--ambar); }
.estrelas-leitura { color: var(--ambar); letter-spacing: 0.1em; font-size: 0.9rem; }
.estrelas-leitura .apagada { color: rgba(140, 153, 173, 0.3); }

/* ---------------------------------------------------------------
   [7] CARTÕES, CHIPS E PEQUENOS ELEMENTOS
   --------------------------------------------------------------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--penumbra), #101624);
  border: 1px solid var(--linha-latao);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.grade {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* Chip de estante (categoria) — a cor escolhida pelo leitor */
.chip-estante {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--nevoa);
}
.chip-estante .cor {
  width: 9px; height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Chip de status de leitura */
.chip-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chip-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip-status.quero-ler { color: var(--nevoa); }
.chip-status.lendo     { color: var(--ambar); }
.chip-status.lido      { color: #C9AD6E; }
.chip-status.relendo   { color: #7FA3C9; }

/* Barra fina de progresso de leitura */
.progresso-barra {
  display: block; /* também é usada dentro de <span>; precisa ser bloco */
  height: 4px;
  border-radius: 4px;
  background: rgba(140, 153, 173, 0.14);
  overflow: hidden;
}
.progresso-barra > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #C98F45, var(--ambar));
  min-width: 3px;
  transition: width 0.4s ease;
}

/* ---------------------------------------------------------------
   [8] ESTANTES
   --------------------------------------------------------------- */
.estante-card {
  display: block;
  padding: 22px 22px 18px;
  color: var(--marfim);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.estante-card:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 164, 85, 0.4);
  color: var(--marfim);
}
/* O “fio de luz” no topo, na cor da estante */
.estante-card::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--cor-estante, var(--latao));
  box-shadow: 0 0 12px var(--cor-estante, transparent);
  opacity: 0.85;
}
.estante-nome { font-size: 1.35rem; font-weight: 600; }
.estante-contagem { margin-top: 2px; font-size: 0.83rem; color: var(--nevoa); }

/* Miniatura de lombadas: barrinhas verticais na cor da estante */
.mini-lombadas {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
}
.mini-lombadas span {
  width: 8px;
  border-radius: 2px 2px 0 0;
  background: var(--cor-estante, var(--latao));
}

/* Cartão de livro — evoca uma capa em couro com lombada colorida */
.livro-card {
  display: flex;
  min-height: 148px;
  color: var(--marfim);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.livro-card:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 164, 85, 0.4);
  color: var(--marfim);
}
.livro-lombada {
  width: 7px;
  flex-shrink: 0;
  background: linear-gradient(180deg,
    var(--cor-estante, var(--imperial)),
    color-mix(in srgb, var(--cor-estante, var(--imperial)) 70%, black));
  border-right: 1px solid rgba(156, 127, 78, 0.4);
}
.livro-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 14px;
  min-width: 0;
}
.livro-titulo {
  font-family: var(--f-display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.2;
}
.livro-autor {
  margin-top: 3px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--nevoa);
}
.livro-meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.livro-progresso { display: block; margin-top: 10px; }
.livro-progresso .texto-fraco { display: block; margin-top: 4px; }

/* Filtros de coleção (status, busca, ordenação) */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 18px;
}
.filtro-chip {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--nevoa);
  font-size: 0.83rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.filtro-chip:hover { color: var(--marfim); }
.filtro-chip.ativo {
  color: var(--ambar);
  border-color: rgba(227, 164, 85, 0.5);
  background: rgba(227, 164, 85, 0.07);
}
.filtro-busca {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
  padding: 8px 14px;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--marfim);
  font-size: 0.88rem;
}
.filtro-busca:focus { outline: none; border-color: rgba(227, 164, 85, 0.6); }
.filtro-ordem {
  padding: 8px 12px;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--nevoa);
  font-size: 0.85rem;
}

/* Gestão de estantes (lista no modal) */
.gerir-estante-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--linha);
}
.gerir-estante-item .cor {
  width: 14px; height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.gerir-estante-item .nome { flex: 1; min-width: 0; }
.gerir-estante-item .acoes { display: flex; gap: 4px; }

/* ---------------------------------------------------------------
   [9] PÁGINA DO LIVRO
   --------------------------------------------------------------- */
.livro-cabecalho {
  padding: 30px 32px 26px;
  border-left: 4px solid var(--cor-estante, var(--imperial));
}
.livro-cabecalho .titulo { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.livro-cabecalho .autor {
  margin-top: 4px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--nevoa);
}
.livro-cabecalho .meta-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--nevoa);
}
.livro-cabecalho .meta-linha strong { color: var(--marfim); font-weight: 500; }
.livro-cabecalho .topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

/* Bloco de progresso na página do livro */
.progresso-bloco {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}
.progresso-bloco .linha-atualizar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--nevoa);
}
.progresso-bloco input {
  width: 88px;
  padding: 7px 10px;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--marfim);
  text-align: center;
}

/* Abas */
.abas {
  display: flex;
  gap: 4px;
  margin: 30px 0 24px;
  border-bottom: 1px solid var(--linha);
}
.aba {
  padding: 10px 18px 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--nevoa);
  font-family: var(--f-display);
  font-size: 1.08rem;
  letter-spacing: 0.03em;
  transition: color 0.15s ease;
}
.aba:hover { color: var(--marfim); }
.aba[aria-selected="true"] {
  color: var(--ambar);
  border-bottom-color: var(--ambar);
}
.aba .contagem { font-family: var(--f-corpo); font-size: 0.78rem; color: var(--nevoa-fraca); margin-left: 6px; }

/* Fluxo do diário */
.diario-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.diario-fluxo { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }

.entrada { padding: 22px 26px 18px; }

/* Trecho: citação do autor — voz dele, em itálico de display */
.entrada-trecho { border-left: 3px solid var(--ambar); }
.entrada-trecho .texto {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--marfim);
}
.entrada-trecho .texto::before { content: '“'; color: var(--latao); margin-right: 2px; }
.entrada-trecho .texto::after  { content: '”'; color: var(--latao); margin-left: 2px; }
.entrada-trecho .nota-pessoal {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(140, 153, 173, 0.06);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--marfim);
}
.entrada-trecho .nota-pessoal .rotulo-nota {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nevoa);
  margin-bottom: 4px;
}

/* Impressão: reflexão do leitor — voz sua, em fonte de corpo */
.entrada-impressao {
  border-left: 3px solid var(--imperial);
  background: linear-gradient(180deg, #182236, #131B2B);
}
.entrada-impressao .texto {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--marfim);
  white-space: pre-wrap;
}

.entrada-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.entrada-rotulo {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.entrada-trecho .entrada-rotulo { color: var(--ambar); }
.entrada-impressao .entrada-rotulo { color: #7FA3C9; }
.entrada-info { font-size: 0.78rem; color: var(--nevoa-fraca); }
.entrada-acoes {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  margin-top: 10px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.entrada:hover .entrada-acoes, .entrada:focus-within .entrada-acoes { opacity: 1; }
.entrada-livro-ref { font-size: 0.8rem; margin-bottom: 8px; }

/* ---------------------------------------------------------------
   [10] PERSONAGENS
   --------------------------------------------------------------- */
.personagem-card {
  display: block;
  padding: 20px 22px;
  color: var(--marfim);
  transition: transform 0.18s ease, border-color 0.18s ease;
  border-top: 2px solid var(--cor-estante, var(--imperial));
}
.personagem-card:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 164, 85, 0.4);
  border-top-color: var(--cor-estante, var(--imperial));
  color: var(--marfim);
}
.personagem-nome { font-size: 1.3rem; font-weight: 600; }
.personagem-obra { font-size: 0.82rem; font-style: italic; color: var(--nevoa); margin-top: 2px; }
.personagem-descricao {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--nevoa);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.personagem-secao { padding: 24px 28px; margin-bottom: 18px; }
.personagem-secao h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--marfim);
}
.citacao-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.citacao-item:last-child { border-bottom: none; }
.citacao-item .texto {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.1rem;
}
.relacao-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
}
.relacao-item:last-child { border-bottom: none; }
.relacao-item .seta { color: var(--latao); }

/* ---------------------------------------------------------------
   [11] COMPARAÇÕES
   --------------------------------------------------------------- */
.comparacao-card {
  display: block;
  padding: 20px 22px;
  color: var(--marfim);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.comparacao-card:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 164, 85, 0.4);
  color: var(--marfim);
}
.comparacao-tipo {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--latao);
}
.comparacao-titulo { font-size: 1.3rem; margin-top: 4px; }
.comparacao-itens { margin-top: 8px; font-size: 0.85rem; color: var(--nevoa); }

/* A “mesa de estudo”: colunas lado a lado, com rolagem horizontal
   própria quando não cabem na tela */
.mesa-rolagem { overflow-x: auto; padding-bottom: 8px; }
.mesa {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 1fr);
  gap: 16px;
  align-items: stretch;
  min-width: min-content;
}
.mesa-coluna { display: flex; flex-direction: column; padding: 22px; }
.mesa-coluna .cabeca {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--linha);
}
.mesa-coluna .cabeca h3 { font-size: 1.3rem; }
.mesa-coluna dl { margin: 0; font-size: 0.86rem; }
.mesa-coluna dt {
  float: left; clear: left;
  margin-right: 8px;
  color: var(--nevoa-fraca);
}
.mesa-coluna dd { margin: 0 0 5px; color: var(--marfim); overflow: hidden; }
.mesa-coluna .citacao-amostra {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--nevoa);
}
.mesa-coluna .nota-coluna { margin-top: auto; padding-top: 14px; }
.mesa-coluna textarea, .nota-geral textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--marfim);
  line-height: 1.6;
  resize: vertical;
}
.mesa-coluna textarea:focus, .nota-geral textarea:focus {
  outline: none;
  border-color: rgba(227, 164, 85, 0.6);
}
.nota-geral { margin-top: 26px; padding: 24px 28px; }
.nota-geral textarea { min-height: 160px; }
.salvo-indicador {
  font-size: 0.75rem;
  color: var(--nevoa-fraca);
  transition: color 0.3s ease;
}
.salvo-indicador.salvando { color: var(--ambar); }

/* ---------------------------------------------------------------
   [12] PROGRESSO E GRÁFICOS
   Regras seguidas: rótulos sempre em texto (a cor nunca é a única
   identificação), barras finas com ponta arredondada, um só eixo.
   --------------------------------------------------------------- */

/* A CENA DO ANO — a vela viva sobre a pilha de livros lidos.
   Cada livro terminado no ano acrescenta um volume à pilha e eleva
   a chama; toda a luz responde à claridade (--clarity) e a névoa
   afina conforme ela cresce. As animações reutilizam os passos da
   capa (capa-deriva-*, capa-respira, capa-chama-tremula) e param
   sob prefers-reduced-motion pelas regras gerais de [14]. */
.cena-progresso {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(480px, 62vh, 640px);
  background: linear-gradient(180deg, #0A0F19, #070A11 55%, #05070C);
  border: 1px solid var(--linha-latao);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
/* com a pilha alta (8+ livros no ano), a cena ganha mais pé-direito */
.cena-progresso.cena-alta { min-height: clamp(580px, 72vh, 740px); }

/* -- o fundo da cena: névoa, luz, vinheta, granulado -- */
.cena-fundo { position: absolute; inset: 0; pointer-events: none; }
.cena-nevoa {
  position: absolute; inset: -20% -40%;
  opacity: calc(0.3 + (1 - var(--clarity)) * 0.7);
}
.cena-nevoa-a {
  background:
    radial-gradient(ellipse 45% 18% at 30% 55%, rgba(150, 163, 182, 0.14), transparent 70%),
    radial-gradient(ellipse 55% 20% at 75% 40%, rgba(140, 153, 173, 0.10), transparent 70%);
  animation: capa-deriva-a 100s ease-in-out infinite alternate;
}
.cena-nevoa-b {
  background:
    radial-gradient(ellipse 55% 18% at 60% 65%, rgba(120, 138, 165, 0.12), transparent 70%),
    radial-gradient(ellipse 38% 14% at 14% 72%, rgba(140, 153, 173, 0.09), transparent 70%);
  animation: capa-deriva-b 140s ease-in-out infinite alternate;
}
/* a poça de luz da vela sobre a cena — cresce com a claridade */
.cena-luz {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 42% at 50% 70%, rgba(227, 164, 85, 0.20), transparent 68%),
    radial-gradient(ellipse 20% 16% at 50% 72%, rgba(240, 197, 138, 0.16), transparent 72%);
  transform: scale(calc(0.75 + var(--clarity) * 0.55));
  transform-origin: 50% 72%;
  opacity: calc(0.55 + var(--clarity) * 0.45);
  /* a luz projetada dança de leve, como a chama que a produz
     (brightness, para não brigar com a opacidade vinda de --clarity) */
  animation: cena-luz-oscila 8.7s ease-in-out infinite;
}
@keyframes cena-luz-oscila {
  0%   { filter: brightness(0.94); }
  19%  { filter: brightness(1.05); }
  37%  { filter: brightness(0.97); }
  58%  { filter: brightness(1.08); }
  79%  { filter: brightness(0.95); }
  100% { filter: brightness(0.94); }
}
.cena-vinheta {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 105% 95% at 50% 55%,
    transparent 45%, rgba(4, 6, 10, 0.6) 82%, rgba(3, 4, 7, 0.9) 100%);
}
.cena-grao {
  position: absolute; inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* -- o palco: a vela sobre a pilha, e a linha da escrivaninha -- */
.cena-palco { position: absolute; inset: 0; pointer-events: none; }
.cena-vela-grupo {
  position: absolute;
  left: 50%; bottom: 118px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cena-halo {
  position: absolute;
  top: 0; left: 50%;
  width: calc(150px + var(--clarity) * 210px);
  aspect-ratio: 1;
  transform: translate(-50%, -44%);
  background: radial-gradient(circle,
    rgba(240, 197, 138, 0.26), rgba(227, 164, 85, 0.10) 45%, transparent 70%);
  animation: capa-respira 6s ease-in-out infinite alternate;
}
/* a chama viva (componente da seção [16]) em tamanho de cena,
   com brilho que cresce junto com a claridade do ano */
.cena-vela-grupo .chama-viva {
  --cv: 1.1px;
  filter: drop-shadow(0 0 calc(8px + var(--clarity) * 16px) rgba(240, 197, 138, 0.75));
}
.cena-pavio { width: 2px; height: 6px; background: #14100B; }
.cena-corpo {
  width: 36px; height: 84px;
  background: linear-gradient(90deg, #241C12, #47382A 38%, #5C4A33 52%, #2A2015 100%);
  border-radius: 5px 5px 3px 3px;
  box-shadow: inset 0 2px 4px rgba(240, 197, 138, 0.38), inset 0 -8px 12px rgba(0, 0, 0, 0.5);
}
.cena-pilha { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
.cena-livro {
  height: 14px;
  margin-top: 1px;
  background: linear-gradient(180deg, #1A2233, #0C1019);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(227, 164, 85, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}
.cena-mesa {
  position: absolute;
  left: 50%; bottom: 114px;
  width: min(72%, 560px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(156, 127, 78, 0.4), transparent);
}

/* -- o texto da cena -- */
.cena-texto {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 44px 28px 0;
}
.cena-texto .frase {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--marfim);
  max-width: 36ch;
  margin: 0 auto;
  text-shadow: 0 1px 20px rgba(3, 4, 7, 0.9);
}
.cena-texto .conta {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--nevoa);
}
.cena-texto .meta-editar {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--nevoa-fraca);
}
.cena-texto .meta-editar input {
  width: 58px;
  padding: 4px 8px;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: 6px;
  color: var(--marfim);
  text-align: center;
}

/* -- as seis estatísticas, na base da cena -- */
.cena-stats {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid rgba(156, 127, 78, 0.22);
  background: rgba(6, 9, 15, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cena-stat { padding: 16px 8px 14px; text-align: center; }
.cena-stat + .cena-stat { border-left: 1px solid rgba(140, 153, 173, 0.08); }
.cena-stat .valor {
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--marfim);
  /* algarismos de altura cheia (a Cormorant usa old-style por padrão) */
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}
.cena-stat .rotulo {
  margin-top: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nevoa);
}
@media (max-width: 880px) {
  .cena-progresso { min-height: 640px; }
  .cena-progresso.cena-alta { min-height: 760px; }
  .cena-stats { grid-template-columns: repeat(3, 1fr); }
  .cena-stat:nth-child(3n + 1) { border-left: none; }
  .cena-stat:nth-child(n + 4) { border-top: 1px solid rgba(140, 153, 173, 0.08); }
  /* vela um pouco menor, para a pilha alta nunca alcançar o texto;
     apoiada acima da faixa de estatísticas (duas linhas no celular) */
  .cena-vela-grupo { bottom: 208px; transform: translateX(-50%) scale(0.85); transform-origin: bottom center; }
  .cena-mesa { bottom: 204px; }
}

/* Gráfico de barras horizontais (distribuição por estante) */
.grafico-h { display: flex; flex-direction: column; gap: 12px; }
.grafico-h .linha {
  display: grid;
  grid-template-columns: minmax(96px, 150px) 1fr 34px;
  align-items: center;
  gap: 12px;
}
.grafico-h .rotulo {
  font-size: 0.86rem;
  color: var(--marfim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grafico-h .trilha {
  height: 8px;
  background: rgba(140, 153, 173, 0.1);
  border-radius: 4px;
}
.grafico-h .barra {
  height: 100%;
  min-width: 3px;
  border-radius: 0 4px 4px 0;
}
.grafico-h .num {
  font-size: 0.85rem;
  color: var(--nevoa);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Gráfico de colunas (páginas por mês) — série única em âmbar */
.grafico-meses {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  padding-top: 20px;
}
.grafico-meses .mes {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
  min-width: 0;
}
.grafico-meses .coluna-area {
  width: 100%;
  max-width: 34px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.grafico-meses .coluna {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--ambar), #B7803B);
  min-height: 2px;
}
.grafico-meses .coluna.vazia { background: rgba(140, 153, 173, 0.12); height: 2px; }
.grafico-meses .mes-rotulo { font-size: 0.7rem; color: var(--nevoa-fraca); }
.grafico-meses .mes-valor {
  font-size: 0.72rem;
  color: var(--nevoa);
  font-variant-numeric: tabular-nums;
}

.grafico-card { padding: 24px 28px; margin-top: 18px; }
.grafico-card h3 { font-size: 1.15rem; margin-bottom: 18px; }
.grafico-card .sem-dados { color: var(--nevoa-fraca); font-size: 0.88rem; }

.lista-terminados { margin-top: 8px; }
.lista-terminados li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.92rem;
}
.lista-terminados li:last-child { border-bottom: none; }
.lista-terminados .data { color: var(--nevoa-fraca); font-size: 0.8rem; flex-shrink: 0; }

/* Cartão de backup (aparece no Progresso — útil no celular,
   onde a navegação lateral não mostra Exportar/Importar) */
.backup-card { padding: 24px 28px; margin-top: 18px; }
.backup-card .acoes { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   [13] MODAIS E TOASTS
   --------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  background: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
}
.modal {
  width: 100%;
  max-width: 580px;
  background: linear-gradient(180deg, #18202F, #121927);
  border: 1px solid var(--linha-latao);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: modal-surgir 0.18s ease;
}
@keyframes modal-surgir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.modal-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 26px 14px;
  border-bottom: 1px solid var(--linha);
}
.modal-cabeca h2 { font-size: 1.45rem; }
.modal-fechar {
  background: none;
  border: none;
  color: var(--nevoa);
  font-size: 1.3rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
}
.modal-fechar:hover { color: var(--marfim); background: rgba(140, 153, 173, 0.1); }
.modal-corpo { padding: 22px 26px; }
.modal-pe {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 26px 22px;
  border-top: 1px solid var(--linha);
}
.modal-pe .a-esquerda { margin-right: auto; }

/* Lista de seleção múltipla (usada nas comparações) */
.lista-selecao {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 6px;
}
.lista-selecao label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.92rem;
}
.lista-selecao label:hover { background: rgba(140, 153, 173, 0.07); }
.lista-selecao input[type="checkbox"] { accent-color: var(--ambar); width: 15px; height: 15px; }
.lista-selecao .sub { color: var(--nevoa-fraca); font-size: 0.8rem; margin-left: auto; }

/* Toast — aviso discreto no canto inferior */
#toast-root {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  padding: 11px 22px;
  background: #1B2436;
  border: 1px solid var(--linha-latao);
  border-left: 3px solid var(--ambar);
  border-radius: 8px;
  box-shadow: var(--sombra);
  font-size: 0.9rem;
  color: var(--marfim);
  animation: toast-surgir 0.2s ease;
}
.toast.erro { border-left-color: var(--perigo); }
@keyframes toast-surgir {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.toast.sumindo { opacity: 0; transition: opacity 0.4s ease; }

/* ---------------------------------------------------------------
   [14] RESPONSIVO E ACESSIBILIDADE DE MOVIMENTO
   --------------------------------------------------------------- */
@media (max-width: 880px) {
  /* A navegação vira uma barra fixa no rodapé */
  .nav {
    top: auto;
    bottom: 0;
    left: 0; right: 0;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: none;
    border-top: 1px solid var(--linha-latao);
  }
  .brand, .nav-footer { display: none; }
  .nav-list {
    flex-direction: row;
    margin: 0;
    flex: initial;
    width: 100%;
    max-width: 520px;
    justify-content: space-between;
    gap: 0;
  }
  .nav-link {
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px;
    min-width: 0;
  }
  .nav-link svg { width: 18px; height: 18px; }
  .nav-link span { font-size: 0.62rem; letter-spacing: 0.02em; }

  .main {
    margin-left: 0;
    padding: 28px 18px 110px; /* espaço para a barra inferior */
  }
  .campos-lado-a-lado { grid-template-columns: 1fr; }
  .livro-cabecalho { padding: 22px 20px; }
  .grafico-meses .mes-valor { display: none; } /* no celular, só as colunas e meses */
}

/* Quem prefere menos movimento navega sem derivas nem transições */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------
   [15] A CAPA — “O Limiar”
   O véu de abertura: o Peregrino de Friedrich emerge da escuridão,
   a névoa atravessa a cena, uma vela respira na base e o convite
   surge por último. Com prefers-reduced-motion, tudo aparece
   pronto e imóvel (as regras de [14] zeram as animações; aqui
   apenas zeramos também os atrasos).
   --------------------------------------------------------------- */
.capa {
  position: fixed;
  inset: 0;
  z-index: 40;                 /* acima da navegação (10), abaixo dos modais (50) */
  display: flex;
  align-items: flex-end;       /* o texto pousa sobre o mar de névoa do quadro */
  justify-content: center;
  background: #05070C;
  overflow: hidden;
}
.capa.saindo {
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
body.com-capa { overflow: hidden; }  /* sem rolagem enquanto o véu está posto */

.capa-cena { position: absolute; inset: 0; }

/* O quadro: maior que antes (as bordas reais ficam longe do olhar)
   e com máscara muito gradual — o esfumado começa perto do centro
   e se dissolve antes de alcançar qualquer borda da imagem. */
.capa-quadro {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: min(110vw, 900px);
  height: min(96vh, 1020px);
  object-fit: cover;
  object-position: 50% 26%;    /* enquadra o peregrino e o mar de névoa */
  /* Máscara ORGÂNICA: um esfumado radial deformado por ruído fractal
     (feTurbulence + feDisplacementMap). A borda do visível é deslocada
     dezenas de pixels em direções diferentes a cada ponto — nenhuma
     forma geométrica sobrevive, nem retângulo, nem oval. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='45%25' r='60%25'%3E%3Cstop offset='16%25' stop-color='%23fff'/%3E%3Cstop offset='44%25' stop-color='%23fff' stop-opacity='0.82'/%3E%3Cstop offset='68%25' stop-color='%23fff' stop-opacity='0.32'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='w' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.015' numOctaves='3' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='160' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='400' cy='450' rx='325' ry='405' fill='url(%23g)' filter='url(%23w)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='45%25' r='60%25'%3E%3Cstop offset='16%25' stop-color='%23fff'/%3E%3Cstop offset='44%25' stop-color='%23fff' stop-opacity='0.82'/%3E%3Cstop offset='68%25' stop-color='%23fff' stop-opacity='0.32'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='w' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.015' numOctaves='3' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='160' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='400' cy='450' rx='325' ry='405' fill='url(%23g)' filter='url(%23w)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  filter: saturate(0.8) brightness(0.88) contrast(1.03);
  opacity: 0;
  animation: capa-emerge 3.2s ease 0.4s forwards;
}
@keyframes capa-emerge { to { opacity: 1; } }

/* A fusão: a escuridão do fundo sangra para dentro da cena pelas
   quatro bordas — garante que nenhum limite retangular sobreviva,
   qualquer que seja o tamanho da tela. */
.capa-fusao {
  position: absolute; inset: 0;
  background:
    /* mais denso embaixo e nos cantos — a névoa engole por partes */
    linear-gradient(180deg, rgba(5,7,12,0.96) 0%, rgba(5,7,12,0) 26%),
    linear-gradient(0deg,   rgba(5,7,12,0.98) 0%, rgba(5,7,12,0.5) 18%, rgba(5,7,12,0) 42%),
    linear-gradient(90deg,  rgba(5,7,12,0.94) 0%, rgba(5,7,12,0) 26%),
    linear-gradient(270deg, rgba(5,7,12,0.94) 0%, rgba(5,7,12,0) 26%),
    radial-gradient(ellipse 40% 30% at 0% 100%,   rgba(5,7,12,0.85), transparent 70%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(5,7,12,0.85), transparent 70%),
    radial-gradient(ellipse 34% 24% at 0% 0%,     rgba(5,7,12,0.75), transparent 70%),
    radial-gradient(ellipse 34% 24% at 100% 0%,   rgba(5,7,12,0.75), transparent 70%);
}

/* Gradação azul-noite por cima do quadro (a “luz” do site) */
.capa-gradacao {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5, 7, 12, 0.92), rgba(5, 7, 12, 0.42) 26%, rgba(5, 7, 12, 0.10) 46%,
      rgba(10, 14, 22, 0.30) 72%, rgba(5, 7, 12, 0.9) 100%),
    radial-gradient(ellipse 85% 65% at 50% 48%, rgba(38, 54, 79, 0.16), transparent 72%);
}

/* A bruma: neblina volumosa, desfocada de verdade (blur), que passa
   POR CIMA do próprio quadro e costura os planos entre si. */
.capa-bruma {
  position: absolute; inset: -18% -30%;
  background:
    radial-gradient(ellipse 34% 15% at 40% 58%, rgba(158, 170, 188, 0.20), transparent 68%),
    radial-gradient(ellipse 42% 17% at 72% 50%, rgba(140, 153, 173, 0.15), transparent 68%),
    radial-gradient(ellipse 30% 12% at 22% 44%, rgba(150, 163, 182, 0.12), transparent 68%);
  filter: blur(26px);
  animation: capa-deriva-b 115s ease-in-out infinite alternate;
}

/* Três véus de neblina cruzando a cena, cada um no seu passo.
   Ficam à altura do mar de névoa do quadro e vazam da moldura. */
.capa-nevoa { position: absolute; inset: -12% -38%; }
.capa-nevoa-a {
  background:
    radial-gradient(ellipse 44% 16% at 28% 56%, rgba(150, 163, 182, 0.18), transparent 70%),
    radial-gradient(ellipse 55% 18% at 78% 62%, rgba(140, 153, 173, 0.14), transparent 70%);
  animation: capa-deriva-a 95s ease-in-out infinite alternate;
}
.capa-nevoa-b {
  background:
    radial-gradient(ellipse 60% 20% at 60% 72%, rgba(120, 138, 165, 0.15), transparent 70%),
    radial-gradient(ellipse 40% 14% at 15% 78%, rgba(140, 153, 173, 0.12), transparent 70%);
  animation: capa-deriva-b 130s ease-in-out infinite alternate;
}
.capa-nevoa-c {
  background:
    radial-gradient(ellipse 50% 12% at 45% 38%, rgba(140, 153, 173, 0.09), transparent 70%);
  animation: capa-deriva-c 160s ease-in-out infinite alternate;
}
@keyframes capa-deriva-a { from { transform: translate3d(-3.5%, 0.6%, 0); } to { transform: translate3d(3.5%, -0.6%, 0); } }
@keyframes capa-deriva-b { from { transform: translate3d(3%, -0.4%, 0); }  to { transform: translate3d(-3%, 0.8%, 0); } }
@keyframes capa-deriva-c { from { transform: translate3d(-2%, 0, 0); }     to { transform: translate3d(2%, 0.5%, 0); } }

/* Manchas de névoa pousadas justamente sobre a fronteira do quadro:
   opacidades e derivas distintas, engolindo a borda por partes. */
.capa-borda { position: absolute; inset: -10% -20%; filter: blur(30px); }
.capa-borda-a {
  background:
    radial-gradient(ellipse 26% 18% at 20% 38%, rgba(140, 153, 173, 0.17), transparent 70%),
    radial-gradient(ellipse 22% 15% at 82% 60%, rgba(150, 163, 182, 0.13), transparent 70%),
    radial-gradient(ellipse 24% 13% at 62% 18%, rgba(120, 138, 165, 0.10), transparent 70%);
  animation: capa-deriva-c 120s ease-in-out infinite alternate;
}
.capa-borda-b {
  background:
    radial-gradient(ellipse 24% 14% at 74% 26%, rgba(120, 138, 165, 0.12), transparent 70%),
    radial-gradient(ellipse 27% 17% at 28% 76%, rgba(140, 153, 173, 0.15), transparent 70%),
    radial-gradient(ellipse 20% 12% at 88% 84%, rgba(150, 163, 182, 0.11), transparent 70%);
  animation: capa-deriva-a 150s ease-in-out infinite alternate-reverse;
}

/* A vela: luz quente que respira devagar na base da cena */
.capa-vela {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 38% 26% at 50% 92%, rgba(227, 164, 85, 0.27), transparent 70%),
    radial-gradient(ellipse 16% 10% at 50% 95%, rgba(240, 197, 138, 0.24), transparent 75%);
  animation: capa-respira 7s ease-in-out infinite alternate;
}
@keyframes capa-respira { from { opacity: 0.7; } to { opacity: 1; } }

.capa-vinheta {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 88% at 50% 42%,
    transparent 44%, rgba(4, 6, 10, 0.62) 80%, rgba(3, 4, 7, 0.92) 100%);
}
.capa-grao {
  position: absolute; inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* O único elemento da capa: uma chama pequena sobre a palavra
   “entrar” — sem caixa, sem moldura. Um halo respira atrás dela. */
.capa-entrar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: max(9vh, 56px);
  padding: 26px 34px 18px;
  background: none;
  border: none;
  color: var(--marfim);
  animation: capa-surge 2.2s ease 1.9s both;
}
/* o halo que respira atrás do gesto */
.capa-entrar::before {
  content: '';
  position: absolute;
  inset: -34px -46px;
  background: radial-gradient(ellipse 55% 55% at 50% 36%, rgba(227, 164, 85, 0.19), transparent 70%);
  animation: capa-respira 6s ease-in-out infinite alternate;
  pointer-events: none;
}
/* a chama viva, em miniatura, coroa o gesto (componente em [16]) */
.capa-entrar .chama-viva {
  --cv: 0.72px;
  filter: drop-shadow(0 0 10px rgba(240, 197, 138, 0.7));
  transition: filter 0.3s ease;
}
.capa-entrar-rotulo {
  font-size: 0.9rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* compensa o espaçamento para centrar de fato */
  text-transform: uppercase;
  color: var(--marfim);
  text-shadow: 0 1px 14px rgba(3, 4, 7, 0.95);
  transition: color 0.3s ease;
}
/* linha finíssima que se acende sob a palavra */
.capa-entrar-rotulo::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, transparent, rgba(156, 127, 78, 0.55), transparent);
  transition: background 0.3s ease;
}
.capa-entrar:hover .capa-entrar-rotulo,
.capa-entrar:focus-visible .capa-entrar-rotulo { color: var(--ambar-claro); }
.capa-entrar:hover .chama-viva,
.capa-entrar:focus-visible .chama-viva {
  filter: drop-shadow(0 0 18px rgba(240, 197, 138, 0.95));
}
.capa-entrar:hover .capa-entrar-rotulo::after {
  background: linear-gradient(90deg, transparent, rgba(227, 164, 85, 0.85), transparent);
}
.capa-entrar:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 4px;
  border-radius: 6px;
}
@keyframes capa-surge {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Movimento reduzido: além das regras gerais de [14] (que zeram a
   duração das animações), zeramos os atrasos — a cena inteira
   aparece pronta, imóvel e igualmente composta. */
@media (prefers-reduced-motion: reduce) {
  .capa * { animation-delay: 0s !important; }
}

/* ---------------------------------------------------------------
   [16] A CHAMA VIVA — compartilhada pela capa e pela cena do ano
   Camadas: dois halos que respiram em períodos diferentes, um fio
   tênue de fumaça, o corpo da chama em gradiente âmbar/dourado com
   contorno assimétrico e um núcleo incandescente.
   O tremular NÃO é um pulso mecânico: cinco animações sobrepostas
   com durações não múltiplas entre si (7,3 s · 1,7 s · 1,1 s ·
   5,9 s · 9,7 s) — o padrão combinado leva minutos a se repetir.
   O tamanho inteiro escala pela variável --cv (1px = tamanho cheio).
   Sob prefers-reduced-motion tudo congela num instante composto.
   --------------------------------------------------------------- */
.chama-viva {
  --cv: 1px;
  position: relative;
  width: calc(var(--cv) * 26);
  height: calc(var(--cv) * 46);
}

/* balanço lento e irregular da chama inteira */
.chama-oscila {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: cv-balanco 7.3s ease-in-out infinite;
}
@keyframes cv-balanco {
  0%   { transform: rotate(-1.7deg); }
  13%  { transform: rotate(0.8deg); }
  27%  { transform: rotate(-2.6deg); }
  39%  { transform: rotate(1.9deg); }
  54%  { transform: rotate(-0.7deg); }
  67%  { transform: rotate(2.4deg); }
  81%  { transform: rotate(-1.9deg); }
  92%  { transform: rotate(0.9deg); }
  100% { transform: rotate(-1.7deg); }
}

/* o corpo da chama: gradiente âmbar com contorno assimétrico */
.chama-corpo {
  position: absolute;
  left: 50%; bottom: 0;
  width: calc(var(--cv) * 20);
  height: calc(var(--cv) * 40);
  margin-left: calc(var(--cv) * -10);
  background: radial-gradient(ellipse 58% 66% at 50% 74%,
    #FFF6E0 0%, #F6CE8E 32%, #E8A852 60%, rgba(232, 168, 82, 0) 96%);
  border-radius: 46% 54% 48% 52% / 68% 64% 34% 30%;
  transform-origin: 50% 100%;
  filter: blur(calc(var(--cv) * 0.4));
  animation: cv-tremor 1.7s ease-in-out infinite;
}
@keyframes cv-tremor {
  0%   { transform: scale(1, 1) translateX(0); }
  16%  { transform: scale(0.965, 1.06) translateX(calc(var(--cv) * 0.4)); }
  31%  { transform: scale(1.04, 0.94) translateX(calc(var(--cv) * -0.5)); }
  46%  { transform: scale(0.98, 1.09) translateX(calc(var(--cv) * 0.3)); }
  62%  { transform: scale(1.05, 0.96) translateX(calc(var(--cv) * -0.3)); }
  78%  { transform: scale(0.955, 1.03) translateX(calc(var(--cv) * 0.5)); }
  91%  { transform: scale(1.02, 0.99) translateX(0); }
  100% { transform: scale(1, 1) translateX(0); }
}

/* o núcleo incandescente, quase branco, cintilando no seu passo */
.chama-nucleo {
  position: absolute;
  left: 50%; bottom: calc(var(--cv) * 3);
  width: calc(var(--cv) * 9);
  height: calc(var(--cv) * 18);
  margin-left: calc(var(--cv) * -4.5);
  background: radial-gradient(ellipse at 50% 72%,
    #FFFEF6 0%, rgba(255, 244, 214, 0.5) 60%, transparent 95%);
  border-radius: 50% 50% 44% 46% / 62% 66% 36% 34%;
  animation: cv-nucleo 1.1s ease-in-out infinite;
}
@keyframes cv-nucleo {
  0%   { opacity: 0.9;  transform: scaleY(1); }
  22%  { opacity: 1;    transform: scaleY(1.12); }
  41%  { opacity: 0.82; transform: scaleY(0.92); }
  63%  { opacity: 1;    transform: scaleY(1.08); }
  84%  { opacity: 0.88; transform: scaleY(0.96); }
  100% { opacity: 0.9;  transform: scaleY(1); }
}

/* dois halos em períodos diferentes: a respiração nunca é uníssona */
.chama-halo-a, .chama-halo-b {
  position: absolute;
  left: 50%; top: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.chama-halo-a {
  width: calc(var(--cv) * 150);
  background: radial-gradient(circle,
    rgba(240, 197, 138, 0.30), rgba(227, 164, 85, 0.12) 42%, transparent 68%);
  animation: cv-halo-a 5.9s ease-in-out infinite;
}
.chama-halo-b {
  width: calc(var(--cv) * 280);
  background: radial-gradient(circle,
    rgba(240, 197, 138, 0.14), rgba(227, 164, 85, 0.05) 45%, transparent 70%);
  animation: cv-halo-b 9.7s ease-in-out infinite;
}
@keyframes cv-halo-a {
  0%   { opacity: 0.72; transform: translate(-50%, -50%) scale(0.94); }
  48%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.07); }
  100% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.94); }
}
@keyframes cv-halo-b {
  0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  37%  { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.1); }
  71%  { opacity: 0.65; transform: translate(-50%, -50%) scale(0.98); }
  100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
}

/* o fio de fumaça, tênue, subindo e se desmanchando */
.chama-fumaca {
  position: absolute;
  left: 50%; bottom: 86%;
  width: calc(var(--cv) * 8);
  height: calc(var(--cv) * 60);
  margin-left: calc(var(--cv) * -4);
  background: linear-gradient(180deg,
    transparent 0%, rgba(150, 163, 182, 0.20) 55%,
    rgba(150, 163, 182, 0.10) 85%, transparent 100%);
  border-radius: 50%;
  filter: blur(calc(var(--cv) * 4));
  transform-origin: 50% 100%;
  opacity: 0.16; /* estado imóvel (movimento reduzido): véu discreto */
  animation: cv-fumaca 9.3s ease-in-out infinite;
}
@keyframes cv-fumaca {
  0%   { transform: translateY(0) skewX(1deg) scaleY(0.9);  opacity: 0; }
  18%  { transform: translateY(calc(var(--cv) * -6)) skewX(-2deg) scaleY(0.98); opacity: 0.3; }
  46%  { transform: translateY(calc(var(--cv) * -14)) skewX(-5deg) scaleY(1.05); opacity: 0.2; }
  76%  { transform: translateY(calc(var(--cv) * -26)) skewX(4deg) scaleY(1.15); opacity: 0.09; }
  100% { transform: translateY(calc(var(--cv) * -34)) skewX(-2deg) scaleY(1.2); opacity: 0; }
}