:root{
  --navy:#061a34;--navy2:#0c315b;--gold:#e1b535;--paper:#fffdf7;
  --white:#fff;--muted:#b7c5d6;--ink:#16243a
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Segoe UI",Arial,sans-serif;background:#031326;color:#fff;
  overflow:hidden;-webkit-user-select:none;user-select:none
}
.reader-app{height:100dvh;display:grid;grid-template-rows:auto 1fr auto}
.reader-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px;background:linear-gradient(135deg,#051a34,#0b3764);
  border-bottom:1px solid rgba(255,255,255,.12);z-index:5
}
.reader-brand{display:flex;align-items:center;gap:12px;min-width:0}
.reader-back{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);font-size:22px
}
.reader-title{min-width:0}
.reader-title span{display:block;color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.16em}
.reader-title h1{font-size:17px;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-actions{display:flex;align-items:center;gap:7px}
.reader-actions button,.reader-footer button{
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);
  color:#fff;border-radius:10px;padding:8px 11px;font-weight:800;cursor:pointer
}
.reader-actions button:hover,.reader-footer button:hover{background:rgba(255,255,255,.14)}
.reader-stage{
  min-height:0;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;
  gap:12px;padding:16px;background:
  radial-gradient(circle at 50% 45%,rgba(38,83,126,.82),rgba(2,15,31,.98))
}
.reader-page-wrap{
  height:100%;min-height:0;overflow:auto;display:grid;place-items:center;
  perspective:1700px;padding:8px
}
.reader-sheet{
  position:relative;background:#fff;border-radius:4px 16px 16px 4px;
  box-shadow:inset 16px 0 26px rgba(78,50,14,.08),0 25px 65px rgba(0,0,0,.48);
  transform-origin:left center;overflow:hidden
}
.reader-sheet.turn-next{animation:turnNext .36s ease}
.reader-sheet.turn-prev{animation:turnPrev .36s ease}
#pdfCanvas{display:block;background:#fff}
.reader-nav{
  width:54px;height:54px;border:0;border-radius:50%;background:var(--gold);
  color:#061a34;font-size:38px;line-height:1;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.25)
}
.reader-nav:disabled{opacity:.3;cursor:not-allowed}
.reader-loading,.reader-error{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:25px;background:rgba(255,255,255,.96);color:#17304e;font-weight:800;z-index:3
}
.reader-loading[hidden],.reader-error[hidden]{display:none}
.reader-spinner{
  width:42px;height:42px;border-radius:50%;border:4px solid #dfe7ef;border-top-color:#d7a821;
  animation:spin .8s linear infinite;margin:0 auto 12px
}
.reader-error button{margin-top:12px;border:0;border-radius:10px;padding:10px 14px;background:#061a34;color:#fff;font-weight:800}
.reader-footer{
  display:grid;grid-template-columns:auto auto minmax(100px,1fr) auto auto;
  align-items:center;gap:12px;padding:10px 16px;background:#061a34;
  border-top:1px solid rgba(255,255,255,.12)
}
.reader-counter{font-weight:800;white-space:nowrap}
.reader-footer input[type=range]{width:100%;accent-color:var(--gold)}
.reader-page-input{
  width:72px;border:1px solid rgba(255,255,255,.22);border-radius:9px;
  padding:7px 8px;background:rgba(255,255,255,.08);color:#fff;text-align:center
}
.reader-note{font-size:11px;color:var(--muted);white-space:nowrap}
.reader-page-wrap.sepia .reader-sheet{filter:sepia(.3) brightness(.96)}
.reader-page-wrap.night .reader-sheet{filter:invert(.88) hue-rotate(180deg) brightness(.86)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes turnNext{0%{transform:rotateY(0)}48%{transform:rotateY(-20deg);opacity:.55}100%{transform:rotateY(0);opacity:1}}
@keyframes turnPrev{0%{transform:rotateY(0)}48%{transform:rotateY(20deg);opacity:.55}100%{transform:rotateY(0);opacity:1}}
@media(max-width:760px){
  .reader-stage{grid-template-columns:1fr;padding:6px;position:relative}
  .reader-nav{position:absolute;z-index:4;bottom:12px;width:46px;height:46px;font-size:31px}
  .reader-nav.prev{left:12px}.reader-nav.next{right:12px}
  .reader-footer{grid-template-columns:auto 1fr auto;padding-bottom:62px}
  .reader-footer .hide-mobile,.reader-note{display:none}
  .reader-actions .zoom-label{display:none}
  .reader-page-wrap{padding:3px}
  .reader-title h1{font-size:14px}
}