* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #1b1f24; color: #e8eaed; overflow: hidden;
  display: flex; flex-direction: column;
}

/* Toolbar */
.toolbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .4rem .8rem; background: rgba(17,20,26,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.4); z-index: 30; flex-wrap: wrap;
  transition: transform .3s ease, opacity .3s ease;
}
body.ui-hidden .toolbar { transform: translateY(-110%); opacity: 0; }
.tb-left, .tb-center, .tb-right { display: flex; align-items: center; gap: .25rem; }
.title { font-weight: 600; margin-left: .5rem; font-size: .95rem; white-space: nowrap; }
.icon-btn {
  background: none; border: 1px solid transparent; color: #cbd5e1; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: .4rem .55rem; border-radius: 6px;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.icon-btn.active { background: #2563eb; color: #fff; }
.pageinfo { font-size: .9rem; color: #cbd5e1; white-space: nowrap; }
#page-input {
  width: 3.2rem; padding: .2rem .3rem; text-align: center; border-radius: 4px;
  border: 1px solid #374151; background: #1b1f24; color: #e8eaed;
}

/* Stage */
.stage {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.stage.zoomed { cursor: grab; }
.stage.grabbing { cursor: grabbing; }
.flipbook { transform-origin: center center; transition: transform .15s ease; }
.page { background: #fff; }
.page .pimg { width: 100%; height: 100%; display: block; }
.flipbook .page { background-size: cover; }
.stagebook--shadow { box-shadow: 0 0 20px rgba(0,0,0,.5); }

/* TOC */
.toc {
  position: fixed; top: 0; left: 0; width: 230px; height: 100%;
  background: #0d1014; border-right: 1px solid #1f242c; z-index: 40;
  transform: translateX(-100%); transition: transform .2s ease;
  display: flex; flex-direction: column;
}
.toc.open { transform: translateX(0); }
.toc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .8rem; font-weight: 600; border-bottom: 1px solid #1f242c;
}
.toc-grid { overflow-y: auto; padding: .6rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.toc-grid img {
  width: 100%; cursor: pointer; border: 2px solid transparent; border-radius: 3px;
  display: block; background: #222;
}
.toc-grid img:hover { border-color: #2563eb; }
.toc-grid .num { font-size: .7rem; text-align: center; color: #94a3b8; }

/* Share menu */
.share-menu {
  position: fixed; top: 52px; right: 12px; z-index: 50; background: #11141a;
  border: 1px solid #1f242c; border-radius: 8px; padding: .4rem; min-width: 170px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5); display: flex; flex-direction: column;
}
.share-menu[hidden] { display: none; }
.share-menu button, .share-menu a {
  background: none; border: none; color: #cbd5e1; text-align: left; cursor: pointer;
  padding: .5rem .6rem; border-radius: 6px; font-size: .9rem; text-decoration: none;
}
.share-menu button:hover, .share-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }

.slider-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(17,20,26,.92); padding: .5rem 1rem; z-index: 30;
  box-shadow: 0 -2px 8px rgba(0,0,0,.4);
  transition: transform .3s ease, opacity .3s ease;
}
body.ui-hidden .slider-bar { transform: translateY(110%); opacity: 0; }
#page-slider { width: 100%; cursor: pointer; accent-color: #2563eb; }

.loader {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #1b1f24; color: #94a3b8; z-index: 60; font-size: 1.1rem;
}

@media (max-width: 640px) {
  .title { display: none; }
  .icon-btn { padding: .35rem .4rem; font-size: 1rem; }
}