:root{
  --green-dark:#0d3525;
  --green:#176c49;
  --gold:#d5a72e;
  --paper:#f7f2e7;
  --white:#fff;
  --toolbar-h:74px;
  --status-h:54px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:linear-gradient(145deg,#071d14,#124b34);font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none}
body{min-height:100dvh;padding:14px}
button,a{font:inherit}

.app-shell{
  width:min(1180px,100%);
  min-height:calc(100dvh - 28px);
  margin:auto;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:
    radial-gradient(circle at 16% 14%,rgba(213,167,46,.12),transparent 28%),
    linear-gradient(145deg,#09271b,#0f3d2b);
  box-shadow:0 28px 85px rgba(0,0,0,.38);
}

.toolbar{
  min-height:var(--toolbar-h);
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(4,22,15,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:30;
}

.brand-block{display:flex;align-items:center;gap:12px;min-width:0}
.brand-block>div{display:grid;gap:3px;min-width:0}
.eyebrow{color:var(--gold);font-size:9px;font-weight:900;letter-spacing:1.8px}
.brand-block strong{font-size:16px;white-space:nowrap}

.archive-link,
.toolbar-actions button,
.toolbar-actions a{
  min-width:38px;
  height:38px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,.07);
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.archive-link{font-size:11px;font-weight:800}
.toolbar-actions{display:flex;align-items:center;gap:6px}
.zoom-controls{display:flex;align-items:center;gap:5px}
#zoomValue{min-width:48px;text-align:center;font-size:11px;color:rgba(255,255,255,.78)}
.toolbar-actions button:hover,
.toolbar-actions a:hover,
.archive-link:hover{background:var(--gold);color:var(--green-dark);transform:translateY(-2px)}
.close-button{font-size:25px!important;font-weight:300!important;background:rgba(158,37,37,.82)!important}
.close-button:hover{background:#c43838!important;color:#fff!important}

.viewer{
  position:relative;
  min-height:0;
  padding:12px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 52px;
  align-items:center;
  gap:10px;
  overflow:hidden;
}

.book-stage{
  min-width:0;
  min-height:0;
  height:calc(100dvh - var(--toolbar-h) - var(--status-h) - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:2600px;
  touch-action:pan-y;
  overflow:hidden;
}
.book-stage.is-zoomed{
  cursor:grab;
  touch-action:none;
}
.book-stage.is-panning{cursor:grabbing}

.book-wrap{
  display:grid;
  place-items:center;
  transform-origin:center;
  transition:transform .2s ease;
  will-change:transform;
}
.book-stage.is-panning .book-wrap{transition:none}

.book{
  position:relative;
  height:min(calc(100dvh - 210px),880px);
  max-height:100%;
  aspect-ratio:1024/1448;
  transform-style:preserve-3d;
  will-change:transform;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.32));
  user-select:none;
  -webkit-user-select:none;
}

.page-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:4px 11px 11px 4px;
  background:var(--paper);
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.page-layer img,
.turn-front img,
.turn-back img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.page-under{z-index:1}
.page-current{z-index:3}
.page-turn{
  z-index:6;
  display:none;
  overflow:visible;
  transform-style:preserve-3d;
  will-change:transform;
}
.page-turn.active{display:block}

.turn-front,.turn-back{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:4px 11px 11px 4px;
  background:var(--paper);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.turn-front{transform:rotateY(0)}
.turn-back{transform:rotateY(180deg);box-shadow:inset 16px 0 20px rgba(0,0,0,.12)}

.paper-shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 4%,transparent 92%,rgba(255,255,255,.15));
}

.turn-shadow,.turn-shadow-back{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
.turn-shadow{background:linear-gradient(90deg,transparent 44%,rgba(0,0,0,.38))}
.turn-shadow-back{background:linear-gradient(90deg,rgba(0,0,0,.26),transparent 48%)}

.book.turn-next .page-turn{
  transform-origin:left center;
  animation:turnNext .64s cubic-bezier(.18,.78,.18,1) forwards;
}
.book.turn-prev .page-turn{
  transform-origin:right center;
  animation:turnPrev .64s cubic-bezier(.18,.78,.18,1) forwards;
}
.book.turn-next .turn-shadow,
.book.turn-prev .turn-shadow{animation:shadowPulse .64s ease forwards}
.book.turn-next .turn-shadow-back,
.book.turn-prev .turn-shadow-back{animation:shadowBackPulse .64s ease forwards}

@keyframes turnNext{
  0%{transform:translateZ(0) rotateY(0)}
  45%{transform:translateZ(10px) rotateY(-82deg)}
  100%{transform:translateZ(0) rotateY(-180deg)}
}
@keyframes turnPrev{
  0%{transform:translateZ(0) rotateY(0)}
  45%{transform:translateZ(10px) rotateY(82deg)}
  100%{transform:translateZ(0) rotateY(180deg)}
}
@keyframes shadowPulse{0%,100%{opacity:0}48%{opacity:.72}}
@keyframes shadowBackPulse{0%,100%{opacity:0}56%{opacity:.5}}

.book-spine{
  position:absolute;
  z-index:9;
  top:0;bottom:0;left:0;width:13px;
  border-radius:4px 0 0 4px;
  background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(255,255,255,.07),transparent);
  pointer-events:none;
}
.page-stack{
  position:absolute;
  z-index:0;
  top:4px;right:-7px;bottom:4px;width:8px;
  border-radius:0 7px 7px 0;
  background:repeating-linear-gradient(90deg,#dcd4c5 0 1px,#f5efe4 1px 2px);
}

.nav-button{
  width:50px;height:68px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:15px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:40px;
  cursor:pointer;
  transition:.18s ease;
  z-index:12;
}
.nav-button:hover:not(:disabled){background:var(--gold);color:var(--green-dark);transform:scale(1.04)}
.nav-button:disabled{opacity:.22;cursor:default}

.statusbar{
  min-height:var(--status-h);
  padding:10px 16px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  color:rgba(255,255,255,.7);
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(4,22,15,.65);
  font-size:11px;
}
.progress{height:4px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.12)}
.progress span{display:block;height:100%;width:0;border-radius:inherit;background:var(--gold);transition:width .25s ease}
.page-status{color:#fff;font-weight:800}
.hint{text-align:right}

@media(max-width:760px){
  :root{--toolbar-h:60px;--status-h:46px}
  html,body{width:100%;min-height:100dvh}
  body{padding:0;overflow:hidden}
  .app-shell{width:100%;height:100dvh;min-height:100dvh;border:0;border-radius:0}
  .toolbar{padding:max(8px,env(safe-area-inset-top)) 8px 7px;gap:6px}
  .brand-block{gap:6px}
  .brand-block strong{font-size:12px}
  .eyebrow{font-size:7px;letter-spacing:1.2px}
  .archive-link{width:34px;min-width:34px;padding:0;font-size:0}
  .archive-link::after{content:"←";font-size:18px}
  .zoom-controls{display:none}
  .toolbar-actions{gap:4px}
  .toolbar-actions button,.toolbar-actions a{min-width:34px;height:34px;padding:0 8px}
  .toolbar-actions a span{display:none}
  .viewer{grid-template-columns:1fr;padding:3px}
  .book-stage{
    width:100%;
    height:calc(100dvh - var(--toolbar-h) - var(--status-h) - 6px);
  }
  .book{
    width:auto;
    height:min(calc(100dvh - 114px),calc(100vw * 1.414));
    max-width:calc(100vw - 8px);
    filter:drop-shadow(0 13px 16px rgba(0,0,0,.28));
  }
  .nav-button{
    position:absolute;
    top:50%;
    width:38px;height:58px;
    border:0;
    background:rgba(5,27,18,.42);
    transform:translateY(-50%);
    backdrop-filter:blur(4px);
  }
  .nav-button:hover:not(:disabled){transform:translateY(-50%)}
  .nav-prev{left:0;border-radius:0 13px 13px 0}
  .nav-next{right:0;border-radius:13px 0 0 13px}
  .statusbar{
    padding:7px 10px max(7px,env(safe-area-inset-bottom));
    grid-template-columns:1fr auto;
    gap:10px;
  }
  .hint{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}