/* O leitor de livros: a barra com as ferramentas e as páginas, uma por baixo da outra. */
.reader-body { display: flex; flex-direction: column; min-height: 100vh; background: color-mix(in srgb, var(--deep) 92%, #000); color: #E7EEF6; }
.reader-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; background: var(--brand-grad); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.reader-back { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; padding: 0.45rem 0.7rem; border-radius: 8px; color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 0.92rem; background: rgba(255, 255, 255, 0.12); }
.reader-back:hover { background: rgba(255, 255, 255, 0.2); }
.reader-back svg, .reader-tools svg { width: 1.1rem; height: 1.1rem; }
.reader-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.reader-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 600; }
.reader-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #B9D6F2; font-size: 0.85rem; }
.reader-tools { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.reader-tools button { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; cursor: pointer; }
.reader-tools button:hover { background: rgba(255, 255, 255, 0.22); }
.reader-tools button:disabled { opacity: 0.4; cursor: default; }
.reader-tools output { min-width: 3.2rem; text-align: center; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.reader-page { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; white-space: nowrap; }
.reader-page input { width: 3.4rem; padding: 0.3rem 0.4rem; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: #0E2440; font: 600 0.9rem var(--body); text-align: center; }
.reader-sep { width: 1px; height: 1.6rem; margin-inline: 0.3rem; background: rgba(255, 255, 255, 0.25); }
.reader-stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 1.5rem 1rem 3rem; overflow-x: auto; user-select: none; -webkit-user-select: none; }
.reader-status { margin-top: 20vh; color: #B9D6F2; }
.reader-pg { position: relative; flex: none; background: #FFFFFF; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); }
.reader-pg canvas { display: block; width: 100%; height: 100%; }
/* A marca de água: o nome do site (e de quem lê) em diagonal, muito leve, por cima de cada página. */
.reader-pg::after { content: attr(data-mark); position: absolute; inset: 0; display: grid; place-items: center; color: rgba(15, 81, 161, 0.08); font: 700 clamp(1.2rem, 4vw, 2.6rem) var(--display); transform: rotate(-30deg); pointer-events: none; white-space: nowrap; overflow: hidden; }
.reader-print-note { display: none; }
@media (max-width: 52rem) {
    .reader-bar { flex-wrap: wrap; gap: 0.5rem; }
    .reader-back span { display: none; }
    .reader-tools { width: 100%; justify-content: center; }
}
/* Imprimir não mostra o livro. */
@media print {
    .reader-bar, .reader-stage { display: none !important; }
    .reader-print-note { display: block; color: #000; padding: 2rem; }
}
/* "Retomado na página X": um aviso no fundo, que some sozinho. */
.reader-notice { position: fixed; z-index: 10; left: 50%; bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0.8rem 0.7rem 1.1rem; border-radius: 999px; background: #FFFFFF; color: #0E2440; font-size: 0.92rem; font-weight: 600; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); transform: translateX(-50%); transition: opacity 0.4s, transform 0.4s; }
.reader-notice button { padding: 0.4rem 0.85rem; border: 0; border-radius: 999px; background: #0F51A1; color: #FFFFFF; font: 600 0.85rem var(--body); cursor: pointer; }
.reader-notice.is-out { opacity: 0; transform: translate(-50%, 1rem); }