:root {
  --chao: #f3f4f7; --papel: #ffffff; --tinta: #1a1f2b; --suave: #5f6776; --fio: #dde0e6;
  --azul: #24407a; --azul-claro: #e6ecf7; --marcador: #ffd84d; --marcador-fundo: #fff3b8;
  --ok: #1f8a5b; --erro: #c23b3b; --sombra: 0 10px 30px -18px #1a1f2b55;
  --display: 'Literata', Georgia, serif; --corpo: 'Figtree', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --chao: #10131a; --papel: #181c25; --tinta: #e9ecf2; --suave: #9ca4b3; --fio: #2a303c;
    --azul: #8fa9e6; --azul-claro: #1f2a42; --marcador: #e8c234; --marcador-fundo: #4a4220;
    --ok: #4cc58f; --erro: #ff7676; --sombra: 0 10px 30px -18px #000;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--chao); color: var(--tinta); font: 16px/1.5 var(--corpo); }
body { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; margin-bottom: 10px; }
p { margin: 0; }
.apoio { color: var(--suave); }
.pequeno { font-size: 13.5px; }
.erro { color: var(--erro); font-size: 14px; }

.vista { max-width: 620px; margin: 0 auto; padding: 18px 16px 110px; }
.pilha { display: flex; flex-direction: column; gap: 10px; }
.linha { display: flex; gap: 8px; align-items: center; }
.linha input { flex: 1; min-width: 0; }

input, select { font: inherit; padding: 12px 13px; border-radius: 10px; border: 1px solid var(--fio); background: var(--papel); color: var(--tinta); width: 100%; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--azul) 55%, transparent); outline-offset: 1px; }
button { font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 12px 16px; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.primario { background: var(--azul); color: #fff; }
@media (prefers-color-scheme: dark) { .primario { color: #10131a; } }
.secundario { background: var(--azul-claro); color: var(--azul); }
.largo { width: 100%; }
.link { background: none; color: var(--azul); padding: 6px; }
.remover { background: none; color: var(--erro); border: 1px solid color-mix(in srgb, var(--erro) 40%, transparent); }
.icone { background: var(--papel); border: 1px solid var(--fio); width: 42px; height: 42px; padding: 0; font-size: 18px; color: var(--suave); }

.marca { display: flex; align-items: center; gap: 9px; font: 700 20px var(--display); }
.logo { width: 24px; height: 30px; background: var(--azul); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.topo h2 { flex: 1; font-size: 19px; }
.voltar { background: none; color: var(--azul); padding: 8px 4px; }

/* entrar */
.entrar { min-height: 100vh; display: grid; place-items: center; }
.entrar .caixa { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.entrar .marca { margin-bottom: 12px; }
.abas, .filtros { display: flex; gap: 4px; background: var(--papel); border: 1px solid var(--fio); border-radius: 12px; padding: 4px; }
.abas button, .filtros button { flex: 1; background: none; color: var(--suave); padding: 9px; }
.abas .ativo, .filtros .ativo { background: var(--azul-claro); color: var(--azul); }

/* estante */
.painel-metas { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; background: var(--papel); border: 1px solid var(--fio); border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: var(--sombra); }
.anel { width: 104px; height: 104px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: conic-gradient(var(--azul) 0 var(--pct, 0%), var(--fio) var(--pct, 0%) 100%); }
.anel span { width: 82px; height: 82px; border-radius: 50%; background: var(--papel); display: grid; place-content: center; text-align: center; }
.anel b { font: 700 26px var(--display); color: var(--tinta); }
.anel small { font-size: 11px; color: var(--suave); font-weight: 500; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numeros div { display: flex; flex-direction: column; }
.numeros b { font: 700 22px var(--display); font-variant-numeric: tabular-nums; }
.numeros span { font-size: 12px; color: var(--suave); line-height: 1.2; }
.ritmo { grid-column: 1 / -1; font-size: 13.5px; color: var(--suave); }
.ritmo.frente { color: var(--ok); }
.filtros { margin-bottom: 12px; }

.livros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.livros li button { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; background: var(--papel); border: 1px solid var(--fio); color: var(--tinta); padding: 10px; font-weight: 400; }
.capa { width: 46px; height: 68px; border-radius: 4px; flex-shrink: 0; background: var(--azul-claro) center / cover no-repeat; display: grid; place-items: center; font: 700 18px var(--display); color: var(--azul); }
.livros .info { flex: 1; min-width: 0; }
.livros .titulo { font: 600 15.5px var(--display); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livros .sub { font-size: 13px; color: var(--suave); }
.selo { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--marcador-fundo); color: var(--tinta); margin-left: 6px; }
.barrinha { height: 5px; background: var(--fio); border-radius: 9px; margin-top: 7px; overflow: hidden; }
.barrinha i, .progresso i { display: block; height: 100%; background: var(--azul); border-radius: 9px; }
.vazio { text-align: center; color: var(--suave); background: var(--papel); border: 1px dashed var(--fio); border-radius: 14px; padding: 26px 18px; }
.flutuante { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); background: var(--azul); color: #fff; box-shadow: var(--sombra); padding: 14px 22px; border-radius: 99px; z-index: 5; }
@media (prefers-color-scheme: dark) { .flutuante { color: #10131a; } }

/* blocos */
.bloco { background: var(--papel); border: 1px solid var(--fio); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.previa-livro { display: flex; gap: 12px; align-items: flex-start; }
.previa-livro img { width: 74px; border-radius: 4px; box-shadow: var(--sombra); }
.previa-livro .pilha { flex: 1; }
.video-caixa { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.video-caixa video { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }
#a-msg { margin-top: 10px; min-height: 1.4em; }
#a-camera { margin-top: 10px; }
#f-livro { margin-top: 6px; }
.enviar { display: block; margin-top: 10px; }
.enviar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.enviar span { display: block; text-align: center; padding: 14px; border: 2px dashed var(--fio); border-radius: 12px; color: var(--azul); font-weight: 600; cursor: pointer; }
.enviar input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--azul) 55%, transparent); }
.campo { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--suave); }

/* livro */
.cabeca-livro { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.capa-grande { width: 96px; height: 142px; border-radius: 6px; flex-shrink: 0; background: var(--azul-claro) center / cover no-repeat; box-shadow: var(--sombra); display: grid; place-items: center; font: 700 34px var(--display); color: var(--azul); }
.cabeca-livro h2 { margin-bottom: 4px; }
.cabeca-livro select { margin-top: 12px; width: auto; padding: 8px 12px; }
.progresso { height: 8px; background: var(--fio); border-radius: 9px; overflow: hidden; }
#l-progresso-texto { font-size: 14px; margin: 6px 0 14px; }
#l-ler { margin-bottom: 14px; }
.paginas { display: flex; align-items: center; gap: 10px; }
.paginas label { flex: 1; display: flex; flex-direction: column; font-size: 13px; color: var(--suave); gap: 4px; }
.paginas input { font: 700 22px var(--display); text-align: center; }
.cronometro { margin: 12px 0 8px; flex-wrap: wrap; }
#r-tempo { font: 700 24px var(--display); font-variant-numeric: tabular-nums; min-width: 82px; }
.minutos { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--suave); }
.minutos input { width: 74px; padding: 10px; }
#r-msg { min-height: 1.4em; margin-bottom: 8px; font-size: 14px; }
.historico { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.historico li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--fio); }
.historico li:last-child { border: 0; }
.perigo summary { cursor: pointer; color: var(--suave); }
.perigo .pilha { margin-top: 12px; }

/* leitor */
.leitor { max-width: none; padding: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.topo-leitor { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--fio); background: var(--papel); }
.topo-leitor #lt-titulo { flex: 1; font: 600 15px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-leitura { flex: 1; overflow: auto; background: var(--papel); display: flex; justify-content: center; }
.area-leitura canvas { max-width: 100%; height: auto; box-shadow: var(--sombra); margin: 12px auto; background: #fff; }
.area-leitura .epub { width: 100%; max-width: 720px; height: 100%; }
.rodape-leitor { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--fio); background: var(--papel); }
.rodape-leitor button { background: var(--azul-claro); color: var(--azul); width: 56px; font-size: 22px; padding: 6px; }

/* fase 2 */
.pequeno-btn { padding: 8px 12px; font-size: 14px; }
.titulo-bloco { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.titulo-bloco h3 { margin: 0; }
textarea { font: inherit; padding: 12px 13px; border-radius: 10px; border: 1px solid var(--fio); background: var(--papel); color: var(--tinta); width: 100%; resize: vertical; }
.destaques, .resumos, .puxar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.destaque { border-left: 4px solid var(--marcador); background: color-mix(in srgb, var(--marcador-fundo) 45%, var(--papel)); border-radius: 0 10px 10px 0; padding: 10px 12px; }
.destaque blockquote { margin: 0; font: 400 15.5px/1.55 var(--display); white-space: pre-wrap; }
.destaque .nota-d { margin-top: 6px; font-size: 14px; color: var(--tinta); }
.destaque .nota-d::before { content: "Nota: "; font-weight: 600; }
.destaque .rodape-d { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--suave); }
.destaque .rodape-d button { background: none; color: var(--azul); padding: 2px 0; font-size: 12.5px; }
.destaque .rodape-d .apagar { color: var(--erro); }
.destaque .livro-d { font-weight: 600; color: var(--azul); background: none; padding: 0; text-align: left; display: block; margin-bottom: 4px; }
.origem { background: var(--azul-claro); color: var(--azul); border-radius: 99px; padding: 1px 7px; font-weight: 600; }
.novo summary, #rs-puxar summary { cursor: pointer; color: var(--azul); font-weight: 600; padding: 4px 0; }
.novo .pilha { margin-top: 10px; }
.foto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.foto span { display: block; text-align: center; padding: 13px; border-radius: 10px; background: var(--marcador-fundo); color: var(--tinta); font-weight: 600; cursor: pointer; }
.foto input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--azul) 55%, transparent); }
.resumos li button { width: 100%; text-align: left; background: var(--chao); color: var(--tinta); border: 1px solid var(--fio); font-weight: 400; padding: 12px; }
.resumos .cap { font: 600 15px var(--display); display: block; }
.resumos .previa { font-size: 13.5px; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips span { background: var(--marcador-fundo); border-radius: 99px; padding: 3px 10px; font-size: 13px; }
.puxar { margin-top: 10px; }
.puxar label { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.45 var(--display); }
.puxar input { width: auto; margin-top: 3px; }
#n-busca { margin-bottom: 14px; }
.barra-selecao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--papel); border-top: 1px solid var(--fio); box-shadow: 0 -10px 30px -18px #0006; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.barra-selecao .trecho { font: 400 14px/1.4 var(--display); color: var(--suave); max-height: 4.2em; overflow: hidden; border-left: 3px solid var(--marcador); padding-left: 8px; }
.pdf-pagina { position: relative; margin: 12px auto; }
.pdf-pagina canvas { display: block; margin: 0 !important; }
.textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 2; }
.textLayer span, .textLayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer ::selection { background: color-mix(in srgb, var(--marcador) 60%, transparent); }

/* fase 3 */
#ir-revisar b { background: #fff; color: var(--azul); border-radius: 99px; padding: 0 7px; margin-left: 4px; font-size: 12.5px; }
.desafio { grid-column: 1 / -1; border-top: 1px solid var(--fio); padding-top: 10px; margin-top: 4px; }
.linha-desafio { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.linha-desafio b { font-weight: 600; }
.desafio .barrinha i { background: var(--marcador); }
.acoes-lembranca { margin: 12px 0 6px; }
.acoes-lembranca button { flex: 1; }
.revisar { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: 24px; }
.trilha-revisao { height: 4px; background: var(--fio); border-radius: 9px; overflow: hidden; margin: -8px 0 18px; }
.trilha-revisao i { display: block; height: 100%; background: var(--azul); transition: width .3s; }
.cartao-revisao { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.pergunta { font: 600 21px/1.4 var(--display); white-space: pre-wrap; }
.opcoes { display: flex; flex-direction: column; gap: 9px; }
.opcoes button { text-align: left; background: var(--papel); color: var(--tinta); border: 1.5px solid var(--fio); font-weight: 500; padding: 14px; line-height: 1.35; }
.opcoes button.certa { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--papel)); }
.opcoes button.errada { border-color: var(--erro); background: color-mix(in srgb, var(--erro) 10%, var(--papel)); }
.opcoes button:disabled { opacity: 1; cursor: default; }
.resposta { font: 400 18px/1.5 var(--display); background: var(--marcador-fundo); border-radius: 12px; padding: 14px; white-space: pre-wrap; }
.explicacao { font-size: 14.5px; color: var(--suave); border-left: 3px solid var(--azul); padding-left: 10px; }
.rodape-revisao { position: sticky; bottom: 0; background: var(--chao); padding: 12px 0 calc(8px + env(safe-area-inset-bottom)); }
.rodape-revisao.notas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.notas button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 4px; color: #fff; }
.notas small { font-size: 11px; font-weight: 500; opacity: .85; }
.nota-1 { background: var(--erro); } .nota-2 { background: #b7791f; } .nota-3 { background: var(--azul); } .nota-4 { background: var(--ok); }
@media (prefers-color-scheme: dark) { .notas button { color: #10131a; } }
.fim-revisao { text-align: center; display: flex; flex-direction: column; gap: 14px; padding-top: 40px; }
.conquistas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.conquistas li { display: flex; gap: 9px; align-items: center; font-size: 13px; line-height: 1.25; }
.conquistas li b { display: block; font-size: 13.5px; }
.conquistas li span:last-child { color: var(--suave); }
.selo-c { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--fio); border: 3px solid var(--fio); }
.conquistas li.ganha .selo-c { background: var(--marcador-fundo); border-color: var(--marcador); }
.conquistas li:not(.ganha) { opacity: .55; }
.aviso-conquista { position: fixed; left: 50%; transform: translateX(-50%); top: calc(14px + env(safe-area-inset-top)); z-index: 30; display: flex; gap: 12px; align-items: center; background: var(--papel); border: 1px solid var(--marcador); box-shadow: var(--sombra); border-radius: 14px; padding: 12px 16px; width: min(92vw, 380px); }
.aviso-conquista small { display: block; color: var(--suave); font-size: 12px; }
.aviso-conquista b { display: block; font: 700 16px var(--display); }
.aviso-conquista span:last-child { font-size: 13px; color: var(--suave); }
.selo-grande { width: 44px; height: 44px; border-radius: 50%; background: var(--marcador-fundo); border: 4px solid var(--marcador); flex-shrink: 0; }

/* fase 4 */
.botao-link { display: block; text-align: center; text-decoration: none; border-radius: 10px; padding: 12px 16px; font-weight: 600; }
.acervo, .videos, .trechos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.acervo li { display: flex; gap: 10px; align-items: center; }
.acervo .capa { width: 42px; height: 62px; }
.acervo .info { flex: 1; min-width: 0; }
.acervo .titulo { font: 600 14.5px var(--display); display: block; }
.acervo .sub { font-size: 12.5px; color: var(--suave); }
.acervo button, .acervo a { flex-shrink: 0; font-size: 13px; padding: 8px 10px; }
.acervo a { color: var(--azul); text-decoration: none; font-weight: 600; }
.fonte-tag { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 1px 7px; background: var(--azul-claro); color: var(--azul); margin-left: 4px; }
.resposta-livro { margin-top: 12px; }
.resposta-livro > p { white-space: pre-wrap; line-height: 1.6; }
.trechos li { border-left: 3px solid var(--marcador); padding: 4px 0 4px 10px; font: 400 13.5px/1.5 var(--display); color: var(--suave); }
.trechos li b { display: block; font: 600 12px var(--corpo); color: var(--azul); }
.videos li button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; background: none; color: var(--tinta); padding: 0; font-weight: 400; }
.videos img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex-shrink: 0; max-width: 40%; }
.videos .info b { display: block; font-size: 14px; line-height: 1.3; }
.videos .info span { font-size: 12.5px; color: var(--suave); }
.player { margin-top: 12px; }
.player iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }