/* Poornadnyan reader */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.pnr { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); width: 100%; overflow: hidden; height: 100vh; height: 100dvh; font-family: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif; }
.pnr--light { background: #fff; color: #1b1b1b; --line: #ececec; --soft: #f6f5f2; --accent: #141414; }
.pnr--sepia { background: #f5ecd9; color: #3b2f1e; --line: #e4d6b8; --soft: #ede1c6; --accent: #3b2f1e; }
.pnr--dark { background: #121212; color: #e8e6e1; --line: #2a2a2a; --soft: #1d1d1d; --accent: #f5f5f5; }
.pnr-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); min-height: 58px; }
.pnr-back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; color: inherit; font-size: 20px; border: 1px solid var(--line); flex: 0 0 auto; }
.pnr-back:hover { background: var(--soft); }
.pnr-title { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.pnr-title strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnr-title span { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnr-tools { display: flex; gap: 6px; }
.pnr-btn { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; }
.pnr-btn:hover { background: var(--soft); }
.pnr-main { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; min-height: 0; min-width: 0; overflow: hidden; }
.pnr-viewer { min-height: 0; min-width: 0; overflow: hidden; height: 100%; max-width: 1100px; width: 100%; margin: 0 auto; padding: 18px 0; }
.pnr-turn { border: 0; background: transparent; color: inherit; font-size: 40px; opacity: .35; cursor: pointer; }
.pnr-turn:hover { opacity: .9; background: var(--soft); }
.pnr-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; opacity: .7; pointer-events: none; }
.pnr-loading[hidden] { display: none; }
.pnr-foot { display: flex; align-items: center; gap: 14px; padding: 10px 18px 12px; border-top: 1px solid var(--line); font-size: 12px; }
.pnr-progress { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pnr-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7a3fa8, #2f7be0, #12a39b, #2e9e5b, #f4b400, #f26b1d); transition: width .3s; }
.pnr-pct { font-weight: 600; min-width: 36px; }
.pnr-chap { opacity: .7; max-width: 30vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnr-buy { color: inherit; opacity: .75; }
.pnr-toc { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 90vw); background: var(--soft); border-left: 1px solid var(--line); z-index: 20; display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0, 0, 0, .15); }
.pnr-toc[hidden] { display: none; }
.pnr-toc__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pnr-toc ol { list-style: none; margin: 0; padding: 8px 0; overflow: auto; flex: 1; }
.pnr-toc a { display: block; padding: 10px 16px; color: inherit; text-decoration: none; font-size: 14px; }
.pnr-toc a:hover { background: var(--line); }
.pnr-toc__note { font-size: 11px; opacity: .6; padding: 10px 16px 16px; margin: 0; }
@media (max-width: 640px) {
	.pnr-main { grid-template-columns: 0 minmax(0, 1fr) 0; }
	.pnr-turn { display: none; }
	.pnr-viewer { padding: 10px 0; }
	.pnr-chap, .pnr-buy { display: none; }
	.pnr-btn { min-width: 36px; height: 36px; padding: 0 8px; }
}
/* Page turn */
.pnr-main { perspective: 1800px; }
.pnr-viewer { will-change: transform, opacity; backface-visibility: hidden; }
.pnr-sheen { position: absolute; top: 0; bottom: 0; left: 56px; right: 56px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .05) 38%, rgba(0, 0, 0, .16) 49%, rgba(255, 255, 255, .25) 51%, rgba(0, 0, 0, .05) 62%, transparent 100%); }
.pnr--dark .pnr-sheen { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .03) 38%, rgba(0, 0, 0, .45) 49%, rgba(255, 255, 255, .08) 51%, rgba(255, 255, 255, .03) 62%, transparent 100%); }
@media (max-width: 640px) { .pnr-sheen { left: 0; right: 0; } }