*{box-sizing:border-box}
:root{--green:#0b6b4f;--orange:#f28c28;--bg:#171717;--bar:#101010}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:#fff}
body{display:flex;flex-direction:column}
.topbar{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--bar);border-bottom:1px solid #303030;z-index:10}
.brand{font-weight:800;letter-spacing:1px}.brand span{margin-left:8px;color:var(--orange);font-size:.8em}
.actions{display:flex;align-items:center;gap:6px}
.actions button,.actions .tool-button{width:38px;height:36px;border:1px solid #444;border-radius:6px;background:#222;color:#fff;font-size:22px;cursor:pointer}
.actions .tool-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.actions button:hover,.actions .tool-button:hover{background:#333}
#pageInfo{min-width:90px;text-align:center;font-size:14px;color:#ddd}
#viewer{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at center,#303030 0%,#1c1c1c 45%,#111 100%);touch-action:pan-y}
#book{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:center center;will-change:transform}
.page{background:#fff;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.page canvas{display:block;width:100%;height:100%;object-fit:contain}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:rgba(17,17,17,.96);z-index:20}
.spinner{width:42px;height:42px;border:4px solid #555;border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hint{height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;background:#101010;color:#aaa;font-size:12px}
#viewer.panning{touch-action:none}
#viewer.panning #book{cursor:grabbing}
@media(max-width:700px){.topbar{height:52px;flex-basis:52px;padding:0 8px}.brand{font-size:13px}.actions button,.actions .tool-button{width:34px;height:32px;font-size:19px}#pageInfo{min-width:66px;font-size:12px}.hint{display:none}}

/* Camada de interação usada enquanto a página está ampliada.
   Ela fica sobre o PageFlip para que o gesto de pan/zoom nunca chegue
   ao mecanismo de virar páginas. */
#panOverlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: none;
  touch-action: none;
  background: transparent;
}

#viewer.zoomed #panOverlay {
  display: block;
}

/* Destaque dos controles principais de navegação */
#prevBtn,
#nextBtn {
  width: 44px;
  height: 40px;
  background: var(--green);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

#prevBtn:hover,
#nextBtn:hover {
  background: #0d815f;
  transform: translateY(-1px);
}

#prevBtn:active,
#nextBtn:active {
  transform: translateY(0);
}

#pageInfo {
  font-weight: 600;
}

@media (max-width:700px) {
  #prevBtn,
  #nextBtn {
    width: 40px;
    height: 36px;
    font-size: 25px;
  }

  .hint {
    font-size: 11px;
  }
}


/* Cursor de navegação quando a revista está ampliada */
#viewer.panning {
  cursor: grabbing;
}

#viewer.panning #book {
  cursor: grabbing;
}