/*
 * PEM Reader — interface do leitor, do player e da biblioteca.
 *
 * Identidade: branco, preto, cinza e laranja #ED7024. Sem azul.
 * Manrope na interface; Source Serif 4 no corpo do livro, porque um texto
 * longo se lê melhor em serifada.
 *
 * Desenhado primeiro para 390 × 844 e depois expandido.
 */

/* ------------------------------------------------------------------ Tokens */

.pem-scope,
.pem-app {
	--pem-orange: #ED7024;
	--pem-orange-dark: #C85A16;

	--pem-bg: #ffffff;
	--pem-surface: #ffffff;
	--pem-surface-2: #f6f6f5;
	--pem-ink: #111111;
	--pem-ink-2: #3d3d3d;
	--pem-muted: #767676;
	--pem-line: #e6e5e3;

	--pem-radius: 14px;
	--pem-radius-lg: 20px;
	--pem-gap: 16px;

	--pem-ui-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pem-book-font: "Source Serif 4", Georgia, "Times New Roman", serif;

	--pem-font-scale: 1;
	--pem-line-height: 1.7;
	--pem-measure: 34rem;

	--pem-safe-top: env(safe-area-inset-top, 0px);
	--pem-safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-pem-theme="sepia"] .pem-app,
[data-pem-theme="sepia"].pem-app,
.pem-app[data-pem-theme="sepia"] {
	--pem-bg: #f6efe2;
	--pem-surface: #f6efe2;
	--pem-surface-2: #eee3cf;
	--pem-ink: #2b2317;
	--pem-ink-2: #4a3f2e;
	--pem-muted: #7d6f58;
	--pem-line: #ddcfb4;
}

[data-pem-theme="dark"] .pem-app,
[data-pem-theme="dark"].pem-app,
.pem-app[data-pem-theme="dark"] {
	--pem-bg: #111111;
	--pem-surface: #171717;
	--pem-surface-2: #1f1f1f;
	--pem-ink: #f2f0ed;
	--pem-ink-2: #d5d2cd;
	--pem-muted: #9a9691;
	--pem-line: #2e2e2e;
}

[data-pem-font="manrope"] .pem-prose {
	font-family: var(--pem-ui-font);
}

[data-pem-width="narrow"] { --pem-measure: 28rem; }
[data-pem-width="wide"] { --pem-measure: 42rem; }

/* ------------------------------------------------------------------- Reset */

.pem-app {
	margin: 0;
	padding: 0;
	background: var(--pem-bg);
	color: var(--pem-ink);
	font-family: var(--pem-ui-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
	min-height: 100dvh;
}

.pem-app * { box-sizing: border-box; }

.pem-app img { max-width: 100%; height: auto; }

.pem-app a { color: inherit; text-decoration: none; }

.pem-app button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.pem-app svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Ícones cheios (play, marcador) usam preenchimento. */
.pem-tabbar__item svg,
.pem-playbtn svg,
.pem-miniplayer__toggle svg,
.pem-toc__audio svg,
#pem-audio-prev svg,
#pem-audio-next svg,
#pem-bookmark svg,
.pem-appbar__account svg {
	fill: currentColor;
	stroke: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ------------------------------------------------------------ Casca do app */

.pem-appbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: calc(10px + var(--pem-safe-top)) var(--pem-gap) 10px;
	background: color-mix(in srgb, var(--pem-bg) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--pem-line);
}

.pem-appbar__mark {
	font-weight: 700;
	letter-spacing: 0.14em;
	font-size: 13px;
	color: var(--pem-orange);
}

.pem-appbar__title {
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pem-appbar__account { color: var(--pem-muted); display: flex; }

.pem-main {
	padding: 0 var(--pem-gap) calc(96px + var(--pem-safe-bottom));
	max-width: 1100px;
	margin: 0 auto;
}

.pem-app--reader .pem-main { padding: 0; max-width: none; }

.pem-tabbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 30;
	display: flex;
	justify-content: space-around;
	padding: 8px 8px calc(8px + var(--pem-safe-bottom));
	background: color-mix(in srgb, var(--pem-bg) 92%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--pem-line);
}

.pem-tabbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 14px;
	min-width: 72px;
	min-height: 48px;
	font-size: 11px;
	font-weight: 600;
	color: var(--pem-muted);
	border-radius: 12px;
}

.pem-tabbar__item.is-active { color: var(--pem-orange); }

/* ------------------------------------------------------------- Biblioteca */

.pem-eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pem-orange);
}

.pem-library__head { padding: 28px 0 20px; }

.pem-library__title {
	margin: 10px 0 6px;
	font-size: 27px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.pem-library__subtitle {
	margin: 0;
	color: var(--pem-muted);
	font-size: 15px;
}

.pem-resume {
	display: block;
	position: relative;
	padding: 18px 46px 18px 18px;
	margin-bottom: 26px;
	border-radius: var(--pem-radius-lg);
	background: var(--pem-ink);
	color: var(--pem-bg);
}

[data-pem-theme="dark"] .pem-resume { background: var(--pem-surface-2); color: var(--pem-ink); }

.pem-resume__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pem-orange);
}

.pem-resume__book { display: block; margin-top: 6px; font-size: 17px; font-weight: 600; }
.pem-resume__chapter { display: block; margin-top: 2px; font-size: 13px; opacity: 0.72; }

.pem-resume__go {
	position: absolute;
	right: 16px; top: 50%;
	transform: translateY(-50%);
	display: flex;
	opacity: 0.7;
}

.pem-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}

.pem-card {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	align-items: start;
}

.pem-card__cover { display: block; }

.pem-cover__img,
.pem-cover__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.pem-cover__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: 12px;
	background: var(--pem-surface-2);
	border: 1px solid var(--pem-line);
}

.pem-cover__mark { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--pem-orange); }
.pem-cover__title { font-size: 13px; font-weight: 600; line-height: 1.25; }
.pem-cover__author { font-size: 11px; color: var(--pem-muted); }

.pem-card__title { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }
.pem-card__author { margin: 4px 0 0; font-size: 13px; color: var(--pem-muted); }

.pem-progress { margin: 12px 0 14px; }

.pem-progress__bar {
	height: 4px;
	border-radius: 999px;
	background: var(--pem-line);
	overflow: hidden;
}

.pem-progress__bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--pem-orange);
	transition: width 0.35s ease;
}

.pem-progress__label {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--pem-muted);
}

.pem-progress--large .pem-progress__bar { height: 6px; }

/* ---------------------------------------------------------------- Botões */

.pem-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 650;
	transition: opacity 0.18s ease, background 0.18s ease;
}

.pem-btn--primary { background: var(--pem-orange); color: #fff; }
.pem-btn--primary:hover { background: var(--pem-orange-dark); }

.pem-btn--secondary { background: var(--pem-ink); color: var(--pem-bg); }
[data-pem-theme="dark"] .pem-btn--secondary { background: var(--pem-surface-2); color: var(--pem-ink); }

.pem-btn--ghost { border: 1px solid var(--pem-line); color: var(--pem-ink); }

.pem-empty {
	padding: 48px 0;
	text-align: center;
	color: var(--pem-muted);
}

.pem-empty__hint { font-size: 14px; }

/* -------------------------------------------------------- Página do livro */

.pem-book { padding-top: 24px; }

.pem-book__hero {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: 20px;
	align-items: start;
}

.pem-book__title { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.pem-book__subtitle { margin: 6px 0 0; font-size: 15px; color: var(--pem-ink-2); }
.pem-book__author { margin: 8px 0 0; font-size: 13px; color: var(--pem-muted); }

.pem-book__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pem-book__resume-hint { margin: 12px 0 0; font-size: 13px; color: var(--pem-muted); }

.pem-book__description {
	margin: 28px 0;
	font-family: var(--pem-book-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--pem-ink-2);
}

/* -------------------------------------------------------------- Sumário */

.pem-toc { margin-top: 34px; }

.pem-toc__heading {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pem-muted);
}

.pem-toc__list,
.pem-toc__children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pem-toc__children { margin-left: 14px; border-left: 1px solid var(--pem-line); padding-left: 10px; }

.pem-toc__part {
	margin: 22px 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pem-orange);
}

.pem-toc__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 8px 2px;
	border-bottom: 1px solid var(--pem-line);
}

.pem-toc__state {
	flex: 0 0 auto;
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 1.5px solid var(--pem-line);
	position: relative;
}

.is-done .pem-toc__state { background: var(--pem-orange); border-color: var(--pem-orange); }

.is-done .pem-toc__state::after {
	content: "";
	position: absolute;
	left: 4px; top: 7px;
	width: 7px; height: 3px;
	border-left: 1.6px solid #fff;
	border-bottom: 1.6px solid #fff;
	transform: rotate(-45deg);
}

.is-current .pem-toc__state { border-color: var(--pem-orange); }
.is-current .pem-toc__state::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--pem-orange);
}

.is-started .pem-toc__state { border-color: var(--pem-muted); }

.pem-toc__text { flex: 1; min-width: 0; }

.pem-toc__number {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pem-muted);
}

.pem-toc__title {
	display: block;
	font-size: 15px;
	font-weight: 550;
	line-height: 1.3;
}

.pem-toc__aside {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--pem-muted);
	font-size: 11px;
}

.pem-toc__audio svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------- Leitor */

.pem-reader {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--pem-bg);
}

.pem-reader__bar {
	position: fixed;
	left: 0; right: 0;
	z-index: 25;
	display: flex;
	align-items: center;
	gap: 4px;
	background: color-mix(in srgb, var(--pem-bg) 90%, transparent);
	backdrop-filter: saturate(180%) blur(16px);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.pem-reader__bar--top {
	top: 0;
	padding: calc(8px + var(--pem-safe-top)) 8px 8px;
	border-bottom: 1px solid var(--pem-line);
}

.pem-reader__bar--bottom {
	bottom: 0;
	flex-direction: column;
	gap: 8px;
	padding: 10px 16px calc(10px + var(--pem-safe-bottom));
	border-top: 1px solid var(--pem-line);
}

.pem-reader.is-immersive .pem-reader__bar--top { transform: translateY(-100%); opacity: 0; }
.pem-reader.is-immersive .pem-reader__bar--bottom { transform: translateY(100%); opacity: 0; }

.pem-reader__crumb { flex: 1; min-width: 0; text-align: center; }
.pem-reader__booktitle { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pem-reader__bookprogress { display: block; font-size: 11px; color: var(--pem-muted); }

.pem-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 44px; height: 44px;
	border-radius: 12px;
	color: var(--pem-ink);
}

.pem-iconbtn:hover { background: var(--pem-surface-2); }
.pem-iconbtn--aa { font-size: 15px; font-weight: 700; }
.pem-iconbtn.is-active { color: var(--pem-orange); }

.pem-iconbtn__badge {
	position: absolute;
	bottom: 7px;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.pem-reader__scroll {
	padding: calc(76px + var(--pem-safe-top)) var(--pem-gap) calc(150px + var(--pem-safe-bottom));
}

.pem-chapter { max-width: var(--pem-measure); margin: 0 auto; }

.pem-chapter__head { margin: 18px 0 30px; }

.pem-chapter__number {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pem-orange);
}

.pem-chapter__title {
	margin: 0;
	font-family: var(--pem-book-font);
	font-size: calc(28px * var(--pem-font-scale));
	line-height: 1.18;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.pem-prose {
	font-family: var(--pem-book-font);
	font-size: calc(18px * var(--pem-font-scale));
	line-height: var(--pem-line-height);
	color: var(--pem-ink);
	hyphens: auto;
}

.pem-prose p { margin: 0 0 1.05em; }

.pem-prose p + p { text-indent: 1.4em; }

.pem-prose h2,
.pem-prose h3,
.pem-prose h4 {
	margin: 2em 0 0.7em;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.pem-prose h2 { font-size: calc(21px * var(--pem-font-scale)); }
.pem-prose h3 { font-size: calc(18px * var(--pem-font-scale)); }
.pem-prose h4 { font-size: calc(17px * var(--pem-font-scale)); font-style: italic; }

.pem-prose h2 + p,
.pem-prose h3 + p,
.pem-prose h4 + p,
.pem-prose blockquote + p { text-indent: 0; }

.pem-prose blockquote {
	margin: 1.6em 0;
	padding-left: 18px;
	border-left: 2px solid var(--pem-orange);
	color: var(--pem-ink-2);
	font-style: italic;
}

.pem-prose blockquote p { text-indent: 0; }

.pem-prose ul,
.pem-prose ol { margin: 0 0 1.05em 1.3em; padding: 0; }
.pem-prose li { margin-bottom: 0.4em; }

.pem-prose hr {
	margin: 2.4em auto;
	width: 42px;
	border: 0;
	border-top: 1px solid var(--pem-line);
}

.pem-prose img,
.pem-figure { display: block; margin: 1.8em auto; border-radius: 6px; }

.pem-prose figcaption {
	margin-top: 8px;
	font-family: var(--pem-ui-font);
	font-size: 12px;
	text-align: center;
	color: var(--pem-muted);
}

.pem-prose .pem-smallcaps { font-variant: small-caps; }

.pem-prose table {
	width: 100%;
	margin: 1.6em 0;
	border-collapse: collapse;
	font-family: var(--pem-ui-font);
	font-size: 14px;
}

.pem-prose td, .pem-prose th {
	padding: 8px 10px;
	border-bottom: 1px solid var(--pem-line);
	text-align: left;
	vertical-align: top;
}

.pem-watermark {
	margin: 44px 0 0;
	font-family: var(--pem-ui-font);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-align: center;
	color: var(--pem-muted);
	opacity: 0.55;
}

.pem-chapternav {
	max-width: var(--pem-measure);
	margin: 40px auto 0;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.pem-chapternav__link {
	flex: 1;
	max-width: 48%;
	padding: 14px;
	border: 1px solid var(--pem-line);
	border-radius: var(--pem-radius);
}

.pem-chapternav__link--next { text-align: right; }

.pem-chapternav__dir {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pem-orange);
}

.pem-chapternav__title { display: block; margin-top: 4px; font-size: 13px; font-weight: 550; }

/* ------------------------------------------------------ Troca ler/ouvir */

.pem-modeswitch {
	display: flex;
	align-self: center;
	padding: 3px;
	border-radius: 999px;
	background: var(--pem-surface-2);
}

.pem-modeswitch__btn {
	min-height: 34px;
	padding: 0 22px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 650;
	color: var(--pem-muted);
}

.pem-modeswitch__btn.is-active { background: var(--pem-bg); color: var(--pem-ink); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.pem-modeswitch__btn[disabled] { opacity: 0.4; cursor: not-allowed; }

[data-pem-theme="dark"] .pem-modeswitch {
	gap: 4px;
	background: #1f1f1f;
	border: 1px solid #7a7a7a;
}

[data-pem-theme="dark"] .pem-modeswitch__btn {
	background: #303030;
	border: 1px solid #7a7a7a;
	color: #f2f0ed;
}

[data-pem-theme="dark"] .pem-modeswitch__btn.is-active {
	background: #f2f0ed;
	border-color: #f2f0ed;
	color: #111111;
	box-shadow: none;
}

[data-pem-theme="dark"] .pem-modeswitch__btn:hover:not(.is-active):not(:disabled) { background: #424242; }
.pem-modeswitch__btn:focus-visible { outline: 2px solid var(--pem-orange); outline-offset: 2px; }

.pem-chapterprogress { width: 100%; }

/* ---------------------------------------------------------------- Player */

.pem-player {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 40;
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
	padding: 16px var(--pem-gap) calc(20px + var(--pem-safe-bottom));
	background: var(--pem-surface);
	border-top: 1px solid var(--pem-line);
	border-radius: var(--pem-radius-lg) var(--pem-radius-lg) 0 0;
	box-shadow: 0 -10px 40px rgba(0,0,0,0.16);
}

.pem-player.is-open { transform: translateY(0); }

.pem-player__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.pem-player__chapter { margin: 0; font-size: 14px; font-weight: 650; }

.pem-player__scrubber input[type="range"] {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	height: 22px;
	background: transparent;
}

.pem-player__scrubber input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: var(--pem-line);
}

.pem-player__scrubber input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -5px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--pem-orange);
}

.pem-player__scrubber input[type="range"]::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: var(--pem-line);
}

.pem-player__scrubber input[type="range"]::-moz-range-thumb {
	width: 14px; height: 14px;
	border: 0;
	border-radius: 50%;
	background: var(--pem-orange);
}

.pem-player__times {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--pem-muted);
	font-variant-numeric: tabular-nums;
}

.pem-player__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 14px 0 12px;
}

.pem-playbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px; height: 60px;
	border-radius: 50%;
	background: var(--pem-orange);
	color: #fff;
}

.pem-playbtn svg { width: 26px; height: 26px; }

.pem-player__extras {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.pem-chip {
	min-height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--pem-line);
	font-size: 12px;
	font-weight: 600;
	color: var(--pem-ink-2);
}

.pem-chip.is-active { border-color: var(--pem-orange); color: var(--pem-orange); }

.pem-miniplayer {
	position: fixed;
	left: var(--pem-gap); right: var(--pem-gap);
	bottom: calc(86px + var(--pem-safe-bottom));
	z-index: 35;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px 8px 8px;
	border-radius: 999px;
	background: var(--pem-ink);
	color: var(--pem-bg);
	box-shadow: 0 8px 26px rgba(0,0,0,0.26);
}

[data-pem-theme="dark"] .pem-miniplayer { background: var(--pem-surface-2); color: var(--pem-ink); }

.pem-miniplayer__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--pem-orange);
	color: #fff;
	flex: 0 0 auto;
}

.pem-miniplayer__body { flex: 1; min-width: 0; text-align: left; }
.pem-miniplayer__title { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pem-miniplayer__time { display: block; font-size: 11px; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Gavetas */

.pem-drawer { position: fixed; inset: 0; z-index: 50; }

.pem-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.42);
	animation: pem-fade 0.2s ease;
}

.pem-drawer__panel {
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: min(420px, 88vw);
	padding: calc(14px + var(--pem-safe-top)) 18px calc(24px + var(--pem-safe-bottom));
	overflow-y: auto;
	background: var(--pem-surface);
	animation: pem-slide-in 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}

.pem-drawer--sheet .pem-drawer__panel {
	right: 0; left: 0; top: auto;
	width: auto;
	max-height: 76vh;
	border-radius: var(--pem-radius-lg) var(--pem-radius-lg) 0 0;
	animation: pem-slide-up 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}

.pem-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.pem-drawer__head h2 { margin: 0; font-size: 15px; font-weight: 700; }

@keyframes pem-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pem-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pem-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------------------------------------------------------- Preferências */

.pem-prefs { display: flex; flex-direction: column; gap: 18px; padding: 6px 0 10px; }

.pem-prefs__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.pem-prefs__label { font-size: 13px; color: var(--pem-muted); }

.pem-prefs__controls { display: flex; gap: 8px; }

.pem-app .pem-swatch {
	width: 34px; height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	border: 1px solid var(--pem-muted);
	background: var(--pem-swatch-color);
}

.pem-swatch--light { --pem-swatch-color: #ffffff; }
.pem-swatch--sepia { --pem-swatch-color: #f6efe2; }
.pem-swatch--dark { --pem-swatch-color: #111111; }
.pem-swatch.is-active { outline: 2px solid var(--pem-orange); outline-offset: 2px; }

/* ----------------------------------------------------------------- Erro */

.pem-error { padding: 80px 0; text-align: center; }
.pem-error__title { margin: 12px 0 8px; font-size: 22px; font-weight: 700; }
.pem-error__message { margin: 0 0 24px; color: var(--pem-muted); }

/* ------------------------------------------------------- Uso embutido */

.pem-embed { font-family: var(--pem-ui-font); color: var(--pem-ink); }

/* --------------------------------------------------------------- Toast */

.pem-toast {
	position: fixed;
	left: 50%;
	bottom: calc(110px + var(--pem-safe-bottom));
	transform: translateX(-50%);
	z-index: 60;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--pem-ink);
	color: var(--pem-bg);
	font-size: 13px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.24);
	animation: pem-fade 0.2s ease;
}

/* ------------------------------------------------------------- Telas maiores */

@media (min-width: 620px) {
	.pem-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
	.pem-library__title { font-size: 32px; }
	.pem-book__hero { grid-template-columns: 180px 1fr; gap: 28px; }
	.pem-book__title { font-size: 30px; }
}

@media (min-width: 900px) {
	.pem-grid { grid-template-columns: repeat(3, 1fr); }
	.pem-card { grid-template-columns: 120px 1fr; }

	.pem-tabbar {
		left: 0; top: 0; bottom: 0; right: auto;
		width: 96px;
		flex-direction: column;
		justify-content: flex-start;
		gap: 6px;
		padding-top: 84px;
		border-top: 0;
		border-right: 1px solid var(--pem-line);
	}

	.pem-app:not(.pem-app--reader) .pem-main { padding-left: 120px; padding-bottom: 60px; }
	.pem-appbar { padding-left: 120px; }

	.pem-player {
		left: auto; right: 24px; bottom: 24px;
		width: 380px;
		border-radius: var(--pem-radius-lg);
	}

	.pem-miniplayer { left: auto; right: 24px; width: 340px; bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.pem-app *,
	.pem-app *::before,
	.pem-app *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------- Impressão */

.pem-print-block { display: none; }

@media print {
	.pem-reader__bar,
	.pem-player,
	.pem-miniplayer,
	.pem-drawer,
	.pem-chapternav,
	.pem-tabbar,
	.pem-appbar,
	.pem-chapter,
	.pem-prose { display: none !important; }

	.pem-print-block {
		display: block;
		padding: 40px;
		font-family: Georgia, serif;
		font-size: 14px;
		text-align: center;
	}
}

/* Synchronized reading: same audio clock, selectable editorial text. */
.pem-app [hidden] { display: none !important; }
.pem-app--reader { overflow: hidden; }
.pem-reader__scroll { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.pem-reader.is-read-along .pem-reader__scroll { padding-bottom: calc(360px + var(--pem-safe-bottom)); }
.pem-prose [data-pem-sync] { position: relative; border-radius: 4px; transition: background-color .15s; }
.pem-prose .is-narrated { background: color-mix(in srgb, var(--pem-orange) 18%, var(--pem-bg)); box-shadow: -4px 0 0 var(--pem-orange); }
.pem-app .pem-sync-seek { display: none; margin-left: .45em; padding: 6px 10px; min-height: 36px; vertical-align: middle; font: 12px var(--pem-ui-font); color: var(--pem-orange-dark); }
.pem-reader.is-read-along .pem-sync-seek { display: inline-flex; }
[data-pem-theme="dark"] .pem-sync-seek { color: #ffad75; }
.pem-app button:focus-visible { outline: 2px solid var(--pem-orange); outline-offset: 3px; }
.pem-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; margin-bottom: 12px; }
.pem-follow label { display: flex; align-items: center; gap: 7px; min-height: 32px; }
.pem-follow input { accent-color: var(--pem-orange); }
.pem-follow button { text-decoration: underline; min-height: 32px; }
.pem-reader.is-read-along .pem-reader__bar--top,
.pem-reader.is-read-along .pem-reader__bar--bottom { transform: none; opacity: 1; }
@media (min-width: 900px) and (max-width: 1399px) {
 .pem-reader.is-read-along .pem-chapter { margin-left: max(16px, calc((100vw - 980px)/2)); margin-right: 405px; }
}

.pem-app .pem-playbtn { background: var(--pem-orange); color: #fff; }
.pem-app .pem-playbtn svg { fill: currentColor; }

/* Public samples use the same reader and synchronization engine. */
.pem-sample-tabs {display:flex;gap:6px;justify-content:center;padding:12px 18px 10px;margin:0 auto;max-width:760px}
.pem-sample-tabs a {display:inline-flex;align-items:center;justify-content:center;min-height:34px;font-family:var(--pem-ui-font);font-size:12px;font-weight:700;line-height:1.2;text-decoration:none;color:var(--pem-ink);border:1px solid var(--pem-line);border-radius:999px;padding:0 14px;white-space:nowrap}
.pem-sample-tabs a[aria-current="page"] {background:var(--pem-orange);border-color:var(--pem-orange);color:#15110c}
.pem-app[data-pem-route="sample"] .pem-chapter {padding-top:30px}
.pem-app[data-pem-route="sample"] .pem-reader__bookprogress {font-size:10px}
@media (max-width:599px) {
 .pem-sample-tabs {gap:6px;padding-top:10px}
 .pem-sample-tabs a {padding:0 12px}
 .pem-app[data-pem-route="sample"] .pem-player__chapter {max-height:44px;overflow:hidden}
}
.pem-background-music {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:11px;border-top:1px solid var(--pem-line);margin-top:12px;padding-top:8px}
.pem-background-music label {display:flex;align-items:center;gap:6px;min-height:32px}
.pem-background-music input {accent-color:var(--pem-orange)}
.pem-music-volume input {width:90px}
.pem-app[data-pem-route="sample"] .pem-reader.is-read-along .pem-reader__scroll {padding-bottom:410px}
.pem-music-volume input[type="range"] {appearance:none;background:transparent;height:24px;padding:0;border:0}
.pem-music-volume input[type="range"]::-moz-range-track {height:4px;border-radius:4px;background:var(--pem-line)}
.pem-music-volume input[type="range"]::-moz-range-progress {height:4px;border-radius:4px;background:var(--pem-orange)}
.pem-music-volume input[type="range"]::-moz-range-thumb {width:14px;height:14px;border:0;border-radius:50%;background:var(--pem-orange)}
.pem-music-volume input[type="range"]::-webkit-slider-runnable-track {height:4px;border-radius:4px;background:var(--pem-line)}
.pem-music-volume input[type="range"]::-webkit-slider-thumb {appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--pem-orange)}
.pem-music-volume input:disabled {opacity:.4}
/* Theme-generated heading rules must follow the Reader's chosen theme. */
.pem-app h1,.pem-app h2,.pem-app h3,.pem-app h4,.pem-app h5,.pem-app h6 {color:var(--pem-ink)!important}