* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: Arial, sans-serif;
    color: #222;
    background: linear-gradient(90deg, #0c164e 0%, #5b0954 60%);
}
[hidden] { display: none !important; }
#ebook { height: 100%; display: flex; flex-direction: column; background: inherit; }
#ebook:fullscreen { background: #fff; }
#ebook-status { text-align: center; padding: 8px; padding-top: 25px; color: #fff}
#ebook-status:empty { display: none; }
.ebook-spinner {
    display: block;
    width: 24px;
    height: 24px;
    margin: 12px auto 0;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ebook-spin .8s linear infinite;
}
@keyframes ebook-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ebook-spinner { animation: none; } }
#ebook-stage { flex: 1; min-height: 0; overflow: auto; padding: 12px; }
#ebook-stage.ebook-fit { overflow: hidden; }
#ebook-book { margin: 0 auto; }
.ebook-page { background: #fff; color: #222; overflow: hidden; }
.ebook-page img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ebook-page img:not([src]) { display: none; }
.ebook-page-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.ebook-page img[src] + .ebook-page-message { display: none; }
#ebook-controls, #ebook-jump { display: flex; align-items: center; justify-content: center; gap: 8px; }
#ebook-controls { flex-wrap: wrap; padding: 10px; color: #fff;}
#ebook-controls button, #ebook-page { font: inherit; border: 1px solid #bbc6df; border-radius: 4px; padding: 8px; min-height: 40px; }
#ebook-controls button { background: #fff; color: #142450; cursor: pointer; }
#ebook-controls button:disabled { opacity: .45; cursor: default; }
#ebook-controls :focus-visible { outline: 3px solid #56cfff; outline-offset: 2px; }
#ebook-page { width: 60px; }
#ebook-range { font-size: 13px; }
@media (max-width: 600px) { #ebook-stage { padding: 4px; } #ebook-controls { gap: 5px; padding: 6px; } #ebook-range { width: 100%; text-align: center; order: 1; } }
.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}