/* 动态背景色 - 使用 CSS 变量，由 JavaScript 动态设置 */
#reader,
#reader-content {
  background-color: var(--reader-bg-color, #e0eee1) !important;
}

/* 夜间模式样式 */
body.night-mode {
  background: #2a2a2a;
  color: #e0e0e0;
}

body.night-mode #reader,
body.night-mode #reader-content {
  background-color: #2a2a2a !important;
  color: #b0b0b0 !important;
}

body.night-mode .content,
body.night-mode .title {
  color: #b0b0b0 !important;
}

body.night-mode .content p,
body.night-mode .content span {
  color: #b0b0b0 !important;
}

body.night-mode nav {
  color: #b0b0b0 !important;
}

body.night-mode nav span,
body.night-mode nav a {
  color: #b0b0b0 !important;
}

body.night-mode nav i {
  color: #b0b0b0 !important;
}

/* 统一字体族设置，确保所有模式标点符号显示一致 */
.page-content,
.page-content .title,
.page-content .content,
.page-content p,
.page-content span {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Arial, sans-serif !important;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 分页内容字体大小和行高样式（通过JavaScript动态设置） */

/* 菜单遮罩层 */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 3;
}

/* 翻页容器样式 */
.page-flip-container {
  width: 100%;
  height: calc(100vh - 44px);
  position: relative;
  overflow: hidden;
}

/* scroll 模式：允许滚动 */
.page-flip-container.scroll-container {
  overflow: visible;
  height: auto;
  min-height: calc(100vh - 44px);
}

/* 统一翻页容器样式 */
.page-flip-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* scroll 模式：同一容器结构，但使用自然滚动布局，样式与 cover 模式保持一致 */
.page-flip-wrapper.scroll-mode {
  overflow: visible;
  height: auto;
  min-height: 100%;
}

.page-flip-wrapper.scroll-mode .page-item {
  position: relative;
  height: auto;
  min-height: calc(100vh - 44px);
  overflow-y: visible;
}

/* scroll 模式与 cover 模式使用相同的 padding */
.page-content {
  padding: 20px;
}

/* 统一页面项样式 */
.page-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 移除 inherit，使用 CSS 变量或内联样式 */
  background: var(--page-bg-color, inherit);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.page-item.active {
  z-index: 2;
}

.page-content {
  min-height: 100%;
  box-sizing: border-box;
}

/* 无动画翻页模式特定样式 */
.page-flip-wrapper.none-mode .page-item {
  transition: opacity 0.3s ease;
}

/* 仿真翻页模式容器 */
.flip-page-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-content p, .page-content span.content-text {
  margin-top: 0.8em;
}

/* ========== 章节菜单栏样式 ========== */
.chapter-menu-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background-color: inherit;
  color: inherit;
}

.chapter-menu-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.5px;
  background-color: rgba(0, 0, 0, 0.08);
}

.hidden-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 夜间模式样式 */
body.night-mode .chapter-menu-bar {
  background-color: #2a2a2a !important;
  color: #b0b0b0 !important;
}

body.night-mode .chapter-menu-bar::after {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 夜间模式下菜单栏图标颜色（浅白色），但选中状态的红色保持不变 */
body.night-mode .chapter-menu-bar .icon-list,
body.night-mode .chapter-menu-bar .icon-dark,
body.night-mode .chapter-menu-bar .icon-light,
body.night-mode .chapter-menu-bar .icon-setting,
body.night-mode .chapter-menu-bar .icon-bold1,
body.night-mode .chapter-menu-bar .icon-audio,
body.night-mode .chapter-menu-bar .icon-plus,
body.night-mode .chapter-menu-bar .icon-minus,
body.night-mode .chapter-menu-bar .icon-font-minus,
body.night-mode .chapter-menu-bar .icon-font-plus,
body.night-mode .text-5003,
body.night-mode .chapter-menu-bar .icon-moon {
  color: #ccc !important;
}

/* 确保选中状态的红色不被覆盖 */
body.night-mode .chapter-menu-bar .text-primary-red-500,
body.night-mode .chapter-menu-bar .icon-check.text-primary-red-500,
body.night-mode .chapter-menu-bar button.text-primary-red-500 span,
body.night-mode .chapter-menu-bar span.text-primary-red-500 {
  color: var(--primary-red-500, #e5353e) !important;
}

/* 确保选中状态的红色边框不被覆盖 */
body.night-mode .chapter-menu-bar .border-primary-red-500 {
  border-color: var(--primary-red-500, #e5353e) !important;
}

/* 翻页方式按钮间距 */
.page-flip-mode-buttons {
  gap: 2px;
}

.page-flip-mode-buttons>button {
  margin-right: 12px;
  margin-bottom: 8px;
}

.page-flip-mode-buttons>button:last-child {
  margin-right: 0;
}

/* 确保字体大小控制中的竖线分隔符正确显示 */
.font-yuewen.text-bo1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  height: 24px;
  width: 1px;
  background-color: var(--outline-black-8);
}

.font-yuewen.text-bo1::after {
  content: '';
  position: absolute;
  right: 0;
  top: 6px;
  height: 24px;
  width: 1px;
  background-color: var(--outline-black-8);
}

/* 翻页方式选中状态 - 深灰色样式 */
.page-flip-mode-selected {
  background-color: rgb(255, 142, 142,0.2) !important;
  color:rgb(60, 60, 60);
  border-color: rgb(255, 123, 123) !important;
}

/* 确保设置按钮选中状态下图标和文字正确显示 */
.chapter-menu-bar button.text-primary-red-500 .icon-bold1,
.chapter-menu-bar button.text-primary-red-500 span.text-primary-red-500 {
  color: var(--primary-red-500, #e5353e) !important;
}

/* 确保设置按钮图标始终显示 */
.chapter-menu-bar .icon-setting,
.chapter-menu-bar .icon-bold1 {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: ywr-icon !important;
}