/* 阅读器主体样式 */
.reader-body {
    margin: 0; /* 清除外边距 */
    padding: 0; /* 清除内边距 */
    background: #fff; /* 设置白色背景 */
}

/* 顶部导航栏样式 */
.reader-header {
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    right: 0; /* 右侧对齐 */
    height: 50px; /* 设置高度 */
    background: #fff; /* 改为不透明白色背景 */
    border-bottom: 1px solid #eee; /* 底部边框 */
    z-index: 100; /* 层级 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    padding: 0 15px; /* 水平内边距 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* 过渡动画 */
    justify-content: space-between; /* 两端对齐 */
}

/* 顶部按钮容器样式 */
.header-btns {
    flex: 1; /* 占据剩余空间 */
    display: flex;
    align-items: center;
    justify-content: center; /* 中间对齐 */
    gap: 15px; /* 按钮间距 */
    margin-left: 20px; /* 与标题保持间距 */
}

.header-btns a {
    color: #666;
    text-decoration: none;
    font-size: 13px; /* 稍微减小字体 */
    padding: 4px 10px; /* 减小按钮内边距 */
    border-radius: 15px;
    background: #f5f5f5;
    transition: all 0.2s ease;
}

.header-btns a:hover {
    background: #eee;
    color: #333;
}

/* 夜间模式下的按钮样式 */
.night-mode .header-btns a,.night-mode .page-btns a  {
    background: #333;
    color: #999;
}

.night-mode .chapter-sidebar a {
    
    color: #999;
}

.night-mode .chapter-sidebar .chapter-item {
    border-bottom: 1px solid #cccccc26;
}

.night-mode .chapter-item.current {
    background: #806e6e50;
    color: bisque;
}

.night-mode .chapter-header {
    border-bottom: 1px solid #f3f3f359;
}

.night-mode .chapter-group {
    border-left: 1px solid #007bff45;
    border-bottom: 1px solid #007bff45;
}

.night-mode .group-header:hover{
    background-color: #a5acb2;
}

.night-mode .header-btns a:hover {
    background: #444;
    color: #fff;
}

/* 返回按钮样式 */
.back-btn {
    font-size: 24px; /* 字体大小 */
    color: #999; /* 文字颜色 */
    text-decoration: none; /* 移除下划线 */
    margin-right: 15px; /* 右侧外边距 */
}

/* 小说标题样式 */
.novel-title {
    font-size: 18px; /* 字体大小 */
    margin: 0; /* 清除外边距 */
    font-weight: normal; /* 正常字体粗细 */
    max-width: 35%; /* 减小标题最大宽度 */
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
    white-space: nowrap; /* 不换行 */
    text-align: left; /* 添加左对齐 */
    flex: 1; /* 占用剩余空间 */
}

/* 小说标题基础样式 */
.novel-title {
    font-size: 18px;
    margin: 0;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999;
}

/* 居中显示的标题样式 */
.title-center {
    flex: 1;
    text-align: center;
}

/* 左对齐的标题样式 */
.title-left {
    max-width: 95%;
    text-align: left;
}

/* 阅读区域样式 */
.reader-content {
    padding: 60px 20px 70px; /* 内边距 */
    line-height: 1.8; /* 行高 */
    font-size: 18px; /* 调整默认字体大小 */
}

/* 章节标题样式 */
.chapter-title {
    font-size: 20px; /* 字体大小 */
    text-align: center; /* 居中对齐 */
    margin: 0 0 30px; /* 外边距 */
}

/* 页面指示器样式 */
.page-indicator {
    position: fixed; /* 固定定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 绝对居中 */
    display: none; /* 隐藏 */
    background: rgba(0,0,0,0.3); /* 半透明黑色背景 */
    border-radius: 20px; /* 圆角 */
    padding: 10px 20px; /* 内边距 */
    color: #fff; /* 文字颜色 */
    z-index: 101; /* 层级 */
}

/* 页面指示器激活状态样式 */
.page-indicator.prev-active .prev,
.page-indicator.next-active .next {
    opacity: 1; /* 不透明 */
}

.page-indicator.prev-active .next,
.page-indicator.next-active .prev {
    opacity: 0.3; /* 半透明 */
}

/* 页面按钮显示/隐藏样式 */
.page-btns {
    opacity: 0; /* 隐藏 */
    transition: opacity 0.3s; /* 过渡动画 */
}

/* 显示完整模式下的页面按钮样式 */
.show-full-mode .page-btns {
    opacity: 1; /* 显示 */
}

/* 底部导航栏样式 */
.reader-footer {
    position: fixed; /* 固定定位 */
    bottom: 0; /* 底部对齐 */
    left: 0; /* 左侧对齐 */
    right: 0; /* 右侧对齐 */
    height: 50px; /* 统一高度为50px */
    background: #fff; /* 改为不透明白色背景 */
    display: flex;
    align-items: center; /* 垂直居中 */
    border-top: 1px solid #eee; /* 顶部边框 */
    z-index: 102; /* 提高底部导航栏的层级，始终保持最上层 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* 过渡动画 */
}

/* 底部信息样式 */
.footer-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 14px;
    color: #999;
    height: 100%;
}

.footer-info .chapter-count {
    /* 移除右边距 */
}

.footer-info .divider {
     /* 隐藏分隔线 */
}

/* 底部按钮容器样式 */
.footer-btns {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly; /* 均匀分布，两端留空 */
    align-items: center;
    padding: 0 20px;
}

/* 底部按钮链接样式 */
.footer-btns a {
    color: #999;
    text-decoration: none;
    padding: 0 20px; /* 增加水平内边距 */
}

/* 设置面板样式 */
.setting-panel {
    position: fixed;
    bottom: 50px; /* 改为50px，与底部导航栏高度一致 */
    left: 0;
    right: 0;
    background: #fff;
    padding: 5px 10px;
    transform: translateY(calc(100% + 50px)); /* 修改初始位置，与底部导航高度对应 */
    transition: transform 0.3s ease;
    z-index: 101;
    border-top: 1px solid #eee;
}

/* 设置面板内的每个设置项 */
.setting-panel > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
}

.setting-panel > div:last-child {
    border-bottom: none;
}

.setting-panel span {
    color: #333;
    font-size: 15px;
}

/* 朗读配置样式 */
.read-ctrl input[type="range"] {
    width: 50%;
    height: 2px;
    background: #eee;
    border-radius: 2px;
    -webkit-appearance: none;
}

.read-ctrl input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* 字号控制样式 */
.size-ctrl {
    display: flex;
    gap: 15px;
    align-items: center;
}

.size-ctrl a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 50%;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.size-ctrl a:hover {
    background: #f5f5f5;
    color: #333;
}

.size-ctrl .current-size {
    min-width: 30px;
    text-align: center;
    font-size: 15px;
    color: #666;
}

.night-mode .size-ctrl .current-size {
    color: #999;
}

/* 背景选择样式 */
.bg-list {
    display: flex;
    gap: 12px;
}

.bg-list a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.bg-list a.active {
    border-color: #ff6b81;
}

.bg-list a.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6b81;
}

/* 亮度控制样式 */
.brightness-ctrl {
    flex: 1;
    margin-left: 30px;
    padding: 0 10px;
}

.brightness-ctrl input[type="range"] {
    width: 100%;
    height: 2px;
    background: #eee;
    border-radius: 2px;
    -webkit-appearance: none;
}

.brightness-ctrl input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* 夜间模式适配 */
.night-mode .setting-panel {
    background: #1a1a1a;
    border-color: #333;
}

.night-mode .setting-panel > div {
    border-color: #333;
}

.night-mode .setting-panel span {
    color: #999;
}

.night-mode .size-ctrl a {
    border-color: #333;
    color: #999;
    background: #2c2c2c;
}

.night-mode .size-ctrl a:hover {
    background: #333;
    color: #fff;
}

.night-mode .brightness-ctrl input[type="range"] {
    background: #333;
}

.night-mode .brightness-ctrl input[type="range"]::-webkit-slider-thumb {
    background: #666;
    border-color: #444;
}

/* 显示设置面板时的翻页按钮样式 */
.show-setting .page-btns {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none; /* 禁用点击 */
}

/* 显示设置面板 */
.show-setting .setting-panel {
    transform: translateY(0);
}

/* 显示设置面板时底部导航样式 */
.show-setting .reader-footer {
    z-index: 102; /* 确保导航栏在最上层 */
}

/* 显示设置面板时的翻页按钮样式 */
.show-setting .page-btns {
    transform: translateY(100%); /* 设置面板显示时隐藏翻页按钮 */
opacity: 0;
}

/* 设置面板遮罩层 */
.setting-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    opacity: 0;
    pointer-events: none; /* 默认不响应事件 */
    transition: opacity 0.3s ease;
}

.show-setting .setting-mask {
    opacity: 1;
    pointer-events: auto;
}

/* 夜间模式适配 */
.night-mode .setting-panel {
    background: #1a1a1a;
    border-top: 1px solid #333;
}

/* 夜间模式样式 */
.night-mode {
    background: #1a1a1a; /* 深色背景 */
    color: rgba(255,255,255,0.8); /* 半透明白色文字 */
}

/* 夜间模式下的顶部和底部导航栏样式 */
.night-mode .reader-header,
.night-mode .reader-footer,
.night-mode .page-btns {
    background: #1a1a1a; /* 夜间模式使用纯黑背景 */
    border-color: #333; /* 边框颜色 */
}

/* 导航栏切换样式 */
.simple-header, .full-header {
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    width: 100%; /* 宽度100% */
}

.simple-footer, .full-footer {
    position: fixed; /* 固定定位 */
    bottom: 0; /* 底部对齐 */
}

.full-header, .full-footer {
    transform: translateY(-100%); /* 初始隐藏 */
    opacity: 0; /* 初始透明 */
}

/* 显示完整模式下的导航栏样式 */
.show-full-mode .simple-header {
    transform: translateY(-100%); /* 隐藏 */
    opacity: 0; /* 透明 */
}

.show-full-mode .full-header {
    transform: translateY(0); /* 显示 */
    opacity: 1; /* 不透明 */
}

.show-full-mode .simple-footer {
    transform: translateY(100%); /* 隐藏 */
    opacity: 0; /* 透明 */
}

.show-full-mode .full-footer {
    transform: translateY(0); /* 显示 */
    opacity: 1; /* 不透明 */
}

/* 翻页按钮样式 */
.page-btns {
    position: fixed; /* 固定定位 */
    bottom: 50px; /* 与底部导航对齐 */
    left: 0; /* 左侧对齐 */
    right: 0; /* 右侧对齐 */
    height: 50px; /* 统一高度为50px */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 两端对齐 */
    padding: 0 20px; /* 内边距 */
    background: #fff; /* 改为不透明白色背景 */
    border-top: 1px solid #eee;
    transform: translateY(100%); /* 初始隐藏 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* 过渡动画 */
    z-index: 101; /* 保持在导航栏下方 */
    opacity: 0;
}

.page-btns a {
    color: #666; /* 文字颜色 */
    text-decoration: none; /* 移除下划线 */
    padding: 8px 16px;
    border: 1px solid #eeeeee45; /* 添加边框 */
    border-radius: 4px;
    background: #fff; /* 改为不透明白色背景 */
}

/* 显示完整模式时的样式调整 */
.show-full-mode .page-btns {
    transform: translateY(0);
    opacity: 1;
}

/* 内容区域样式 */
#content {
    white-space: pre-wrap; /* 保留换行符并自动换行 */
    text-align: justify; /* 两端对齐 */
    line-height: 1.8; /* 行高 */
    font-size: 18px; /* 字体大小 */
}

.read-style .active{
    background: rgba(234, 103, 149, 0.3); /* 激活状态背景色 透明度 50% */
    /*color: #fff; *//* 激活状态文字颜色 */
}

/* 翻页方式控制样式 */
.mode-ctrl {
    display: flex;
    gap: 10px;
}

.mode-ctrl a {
    padding: 6px 12px;
    border: 1px solid #eee;
    border-radius: 15px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.mode-ctrl a.active {
    background: #ff6b81;
    color: #fff;
    border-color: #ff6b81;
}

/* 修正背景色选择器样式 */
.bg-white { background: #fff !important; border: 1px solid #eee !important; }
.bg-beige { background: #f5e6d3 !important; }
.bg-green { background: #cce8cf !important; }
.bg-blue { background: #c3d4e6 !important; }
.bg-dark { background: #2c3e50 !important; }

/* 夜间模式适配 */
.night-mode .mode-ctrl a {
    border-color: #333;
    color: #999;
    background: #2c2c2c;
}

.night-mode .mode-ctrl a.active {
    background: #ff6b81;
    color: #fff;
    border-color: #ff6b81;
}

#scroll-container {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.3s;
}

.content-wrap {
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* 左右翻页模式样式 */
.mode-slide .content-wrap {
    white-space: nowrap;
    font-size: 0;
}

.mode-slide #scroll-container {
    display: inline-block;
    width: 100%;
    white-space: normal;
    font-size: initial;
    vertical-align: top;
}