* { box-sizing: border-box; }
body { margin: 0; background: #eef0f3; color: #202b36; font: 16px/1.5 system-ui, sans-serif; }
#pdf-reader { min-height: 100vh; background: #eef0f3; overflow: auto; }
.reader-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px 4vw; background: white; border-bottom: 3px solid var(--brand); }
.reader-header h1 { flex: 1; font-size: clamp(18px, 2.5vw, 26px); margin: 0; }
a { color: var(--brand); }
.reader-brand { text-decoration: none; font-weight: 700; }
.reader-brand img { max-width: 150px; max-height: 48px; object-fit: contain; }
.reader-link { font-size: 14px; }
.reader-toolbar, #reader-jump { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.reader-toolbar { margin-top: 12px; padding: 0 12px 16px; }
button, input { font: inherit; border: 1px solid #bdc5ce; border-radius: 6px; padding: 8px 12px; background: white; color: #202b36; }
button { cursor: pointer; min-height: 44px; }
button:hover:not(:disabled) { border-color: var(--brand); background: #e4eaf0; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
#reader-page { width: 80px; }
.reader-status { min-height: 24px; text-align: center; margin: 12px; }
.reader-status[data-error="true"] { color: #962929; }
/* PageFlip corner shadows extend beyond the book; keep them out of the scrollable layout. */
.reader-stage { max-width: 1600px; margin: 0 auto; padding: 12px; overflow: clip; }
#reader-book { margin: auto; }
.reader-page { background: white; box-shadow: inset 0 0 12px #0001; overflow: hidden; }
.reader-page-inner { height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.reader-page img { width: 100%; height: 100%; object-fit: contain; position: relative; background: white; }
.reader-page img:not([src]) { display: none; }
.reader-page-label { position: absolute; color: #657383; }
.reader-hint { text-align: center; padding: 0 16px; color: #546170; font-size: 14px; }
#reader-detail { width: min(96vw, 1500px); max-width: 96vw; max-height: 94dvh; padding: 16px; border: 0; border-radius: 8px; }
#reader-detail::backdrop { background: #17222ddd; }
.reader-detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.reader-detail-toolbar h2 { flex: 1; margin: 0; font-size: 18px; }
.reader-detail-scroll { overflow: auto; max-height: 72dvh; background: #e2e5e8; }
#reader-detail-canvas { display: block; margin: auto; }
@media (max-width: 600px) {
    .reader-header { padding: 12px; gap: 8px; }
    .reader-header h1 { flex-basis: 65%; }
    .reader-brand img { max-width: 90px; }
    .reader-toolbar { gap: 6px; }
    button { padding: 8px; font-size: 14px; }
}