* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 防止手機與網頁頁面整體上下滑動 */
  touch-action: manipulation;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #1a1a1a;
  color: #fff;
}

body {
  display: flex;
  flex-direction: column;
}

/* 頂部導航列 */
.top-bar {
  height: 50px;
  background-color: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #333;
  z-index: 10;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-right select, .header-right input {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #444;
  background-color: #333;
  color: #fff;
  font-size: 13px;
}

.btn {
  padding: 6px 12px;
  background-color: #383838;
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.2s;
}

.btn:hover {
  background-color: #505050;
}

/* 🖥️ 電子書視窗畫布 (支援放大拖拽平移與雙指手勢) */
.flipbook-viewport {
  flex: 1;
  width: 100%;
  height: calc(100vh - 100px); /* 扣除上下工具列高度 (50px + 50px) */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden; /* 防止放大拖曳時超出一邊 */
  background-color: #111;
  touch-action: none; /* 關鍵：阻止瀏覽器預設滑動，讓自訂拖拽與縮放順暢 */
  user-select: none;
}

/* 📖 電子書主體與動畫設定 */
#flipbook {
  margin: 0 auto;
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  will-change: transform;
}

/* 🤏 放大平移時的手勢與零延遲設定 */
#flipbook.is-zoomed {
  cursor: grab;
}

#flipbook.is-dragging {
  cursor: grabbing;
  transition: none !important; /* 拖拽滑動時關閉動畫，達到 100% 跟手零延遲 */
}

/* 📄 頁面與圖片防爆（完全相容直式雙頁與橫式單頁全螢幕） */
.my-page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.my-page img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 確保直式與橫式 PDF 都能滿版自適應不變形 */
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 💡 GPU 3D 圖層硬體加速 (防止翻頁閃爍) */
#flipbook, .stpageflip--container, .my-page {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 💡 輕量頁面占位骨架 */
.page-skeleton {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  color: #6c757d;
  font-size: 14px;
  border: 1px dashed #e2e8f0;
}

/* 底部控制列 */
.controls-bar {
  height: 50px;
  background-color: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-top: 1px solid #333;
  z-index: 10;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 20px;
  padding-left: 15px;
  border-left: 1px solid #444;
}

#zoom-level-text {
  font-size: 13px;
  min-width: 45px;
  text-align: center;
  color: #ddd;
}

/* 載入中遮罩 */
#loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #555;
  border-top: 4px solid #00d2ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}