#viewer-container {
  flex: 1;
  width: 90%;
  height: calc(100vh - 150px);
  overflow: hidden;
  max-width: 1200px;
  margin: auto;
  margin-top: 44px;
  position: relative;
  display: flex; /* 添加 flex 布局 */
  flex-direction: column; /* 纵向排列 */
  justify-content: center; /* 水平居中（已有 margin: auto 效果类似） */
  align-items: center; /* 上下居中 */
}
#loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #666;
  display: none;
}
#flipbook-container {
  box-shadow: 12px 12px 12px rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: pinch-zoom; /* 支持双指缩放 */
  overflow: hidden; /* 防止溢出；或用 auto 以允许滚动 */
/* 移除 height: 80%; 让 JS 设置 */
}
#flipbook {
  transform-origin: center center;
}
#traditional-container {
  display: none; /* 保持初始隐藏 */
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: auto; /* 允许滚动以适应内容 */
  display: grid; /* 确保 grid 布局 */
  grid-template-columns: repeat(2, 1fr); /* 默认跨页 */
  gap: 2px; /* 增加间距 */
  width: 100%; /* 填满容器宽度 */
  justify-items: center; /* 水平居中内容 */
}
#traditional-container.single-page {
  grid-template-columns: 1fr; /* 单页模式 */
}
#pdf-error {
  color: #f00;
  text-align: center;
  padding: 20px;
  font-size: 16px;
}
#content {
  position: relative; /* Required for absolute positioning of child elements */
/* Add any existing styles here */
}
#page-number-indicator {
  position: fixed;
  top: 80px; /* Padding from top */
  left: 50px; /* Padding from right */
  padding: 5px 10px; /* Internal padding for the label */
  background-color: rgba(49,46,46,0.3); /* Semi-transparent black background */
  color: #fff;
  font-size: 14px;
  border-radius: 20px; /* Rounded corners for a pill-like shape */
  z-index: 10; /* Ensure it's above other content */
/* Optional: Add a subtle shadow for depth */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}
#mode-indicator {
  position: fixed;
  top: 80px; /* Padding from top */
  left: 120px; /* Padding from right */
  padding: 5px 10px; /* Internal padding for the label */
  background-color: rgba(49,46,46,0.3); /* Semi-transparent black background */
  color: #fff;
  font-size: 14px;
  border-radius: 20px; /* Rounded corners for a pill-like shape */
  z-index: 10; /* Ensure it's above other content */
/* Optional: Add a subtle shadow for depth */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}
/* 模态框背景遮罩 */
.modal {
  display: none; /* 初始隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0); /* 初始透明 */
  z-index: 2000;
  overflow: auto;
  transition: background-color 0.3s ease; /* 渐变遮罩动画 */
}
/* 显示时渐变遮罩 */
.modal.active {
  display: block;
  background-color: rgba(0,0,0,0.8); /* 渐变到半透明黑 */
}
/* 模态内容框 */
.modal-content {
  position: absolute; /* 绝对定位，相对于页码 */
  top: 5px; /* 从页码下方开始 */
  left: 0; /* 与页码左对齐，或根据需要调整 */
  width: 120px;
  padding: 10px;
  border-radius: 30px;
  opacity: 0.9; /* 透明度 0.9 */
  transform: translateY(-20px); /* 初始状态：向上偏移 */
  transition: transform 0.3s ease, opacity 0.3s ease; /* 动画过渡 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  background-color: rgba(255,255,255,0.9); /* 默认 light 模式 */
  color: #000; /* 默认文字颜色 */
}
/* 显示动画：滑出 + 渐现 */
.modal-content.slide-in {
  transform: translateY(0); /* 滑到底部 */
  opacity: 0.9;
}
/* 收回动画：滑入 + 渐隐 */
.modal-content.slide-out {
  transform: translateY(-20px); /* 滑回初始位置 */
  opacity: 0;
}
/* 系统主题适配 */
@media (prefers-color-scheme: dark) {
  .modal-content {
    background-color: rgba(30,30,30,0.9); /* dark 模式 */
    color: #fff;
  }
}
@media (prefers-color-scheme: light) {
  .modal-content {
    background-color: rgba(255,255,255,0.9); /* light 模式 */
    color: #000;
  }
}
/* 其他样式（关闭按钮、输入框等）保持不变 */
.close-modal {
  color: #aaa;
  float: right;
  font-size: 0px;
  font-weight: bold;
  cursor: pointer;
}
.close-modal:hover {
  color: #000;
}
#jump-page-input {
  width: 40px;
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
label[for="jump-page-input"] {
  font-size: 12px;
  color: #333; /* 文字颜色 */
  font-weight: bold; /* 粗体 */
  margin-right: 10px; /* 与输入框的间距 */
}
@media (prefers-color-scheme: light) {
  label[for="jump-page-input"] {
    color: #333; /* light 模式：深灰色 */
  }
}
@media (prefers-color-scheme: dark) {
  label[for="jump-page-input"] {
    color: #ddd; /* dark 模式：浅灰色，适应深色背景 */
  }
}
#jump-confirm {
  padding: auto;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
#total-pages-display {
  font-size: 0px; /* 隐藏文字 */
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}