* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: #292929; background: #fff; font: 14px/1.35 Arial, Helvetica, sans-serif; }
.reader { --accent: #c3323a; --accent-dark: #a62730; --accent-soft: #f7e6e8; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; padding: 7px 0; background: #fff; }
.viewer { display: flex; flex-direction: column; flex: 0 0 auto; height: auto; max-width: 100%; min-height: 0; }
.stage { position: relative; flex: 0 0 auto; min-height: 0; width: 100%; padding: 4px 6px 9px; overflow: hidden; touch-action: pan-y; }
.stage.zoomed { overflow: auto; cursor: grab; touch-action: none; }
.stage.reading { overflow: auto; touch-action: pan-y; }
.stage.zoomed.panning { cursor: grabbing; user-select: none; }
.book-host { margin: 0 auto; filter: drop-shadow(0 4px 9px #1f1f1f30); transition: transform .65s ease, clip-path .65s ease; }
.book-host.single-page { filter: none; }
.stage.zoomed .book-host { transition: none; }
.status { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); margin: 0; padding: 7px 12px; background: #fff; border-radius: 5px; box-shadow: 0 1px 6px #0003; text-align: center; }
.status[hidden] { display: none; }
.status.error { color: #a42732; }
.toolbar { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 5px; flex: 0 0 auto; min-height: 39px; width: 100%; padding: 3px 6px; border: 1px solid #e3e3e3; border-top: 2px solid var(--accent); border-radius: 0 0 8px 8px; color: #313131; background: #fafafa; box-shadow: 0 2px 9px #00000014; }
.controls, .tools { display: flex; align-items: center; gap: 3px; min-width: 0; }
.controls { grid-column: 1; }
.slider { grid-column: 2; width: 100%; height: 21px; min-width: 60px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.tools { grid-column: 3; justify-content: flex-end; }
button, .tools a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 29px; height: 29px; padding: 0; border: 1px solid transparent; border-radius: 6px; color: #414141; background: transparent; font: 19px/1 Arial, Helvetica, sans-serif; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
button:hover:not(:disabled), .tools a:hover { color: var(--accent-dark); background: var(--accent-soft); }
.tools a[hidden] { display: none; }
#download svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button:disabled { opacity: .38; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
#page-label { display: inline-flex; align-items: center; justify-content: center; height: 29px; min-width: 66px; text-align: center; white-space: nowrap; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
#previous, #next { font-size: 0; }
#previous::before, #next::before { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
#previous::before { transform: rotate(-135deg); margin-left: 3px; }
#next::before { transform: rotate(45deg); margin-right: 3px; }
#fullscreen[aria-pressed="true"] { color: var(--accent-dark); background: var(--accent-soft); }
#reading-mode { width: auto; min-width: 48px; padding: 0 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
#reading-mode[aria-pressed="true"] { color: var(--accent-dark); background: var(--accent-soft); }
@media (max-width: 520px) {
  .toolbar { gap: 4px; padding: 3px 4px; }
  .controls, .tools { gap: 1px; }
  #page-label { min-width: 62px; }
  button, .tools a { width: 28px; height: 28px; }
  #reading-mode { width: auto; }
}
:fullscreen.reader { justify-content: center; padding: 12px; background: #f8f8f8; }
:fullscreen.reader .viewer { flex: 1 1 auto; height: 100%; max-height: 100%; }
:fullscreen.reader .stage { flex: 1 1 auto; }
:fullscreen.reader .toolbar { border-radius: 0 0 10px 10px; }
@media (prefers-reduced-motion: reduce) {
  button, .book-host { transition: none; }
}