/* 全局样式重置 */
* {
    margin: 0; /* 去除所有元素的外边距 */
    padding: 0; /* 去除所有元素的内边距 */
    box-sizing: border-box; /* 使用border-box盒模型 */
}

/* 定义CSS变量 */
:root {
    --primary-color: #3498db; /* 主色调（蓝色） */
    --secondary-color: #2980b9; /* 辅助色（深蓝色） */
    --text-color: #333; /* 默认文本颜色 */
    --bg-color: #f8f9fa; /* 背景颜色 */
    --sidebar-bg: #e9ecef; /* 侧边栏背景 */
    --content-bg: #ffffff; /* 内容区域背景 */
    --border-color: #dee2e6; /* 边框颜色 */
    --bold-color: #000; /* 加粗文本颜色 */
    --highlight-color: #ffeb3b;
    --highlight-bg-dark: #5c5700;
    --locked-color: #e74c3c;
    --locked-secondary: #c0392b;
    --stats-bg: rgba(52, 152, 219, 0.1);
    --stats-border: rgba(52, 152, 219, 0.3);
}

/* 深色主题样式 */
.dark-theme {
    --text-color: #eee; /* 浅色文本 */
    --bg-color: #121212; /* 深色背景 */
    --sidebar-bg: #1e1e1e; /* 深色侧边栏 */
    --content-bg: #2d2d2d; /* 深色内容区域 */
    --border-color: #444; /* 深色边框 */
    --bold-color: #fff; /* 白色加粗文本 */
    --stats-bg: rgba(52, 152, 219, 0.2);
    --stats-border: rgba(52, 152, 219, 0.4);
}

/* 页面基础样式 */
body {
    font-family: 'Sans-serif', Arial, sans-serif; /* 默认字体 */
    line-height: 1.6; /* 行高 */
    color: var(--text-color); /* 使用变量设置文本颜色 */
    background-color: var(--bg-color); /* 使用变量设置背景颜色 */
    transition: background-color 0.3s, color 0.3s; /* 颜色过渡效果 */
}

/* 主容器布局 */
.container {
    display: flex; /* 使用flex布局 */
    height: 100vh; /* 全屏高度 */
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 侧边栏样式 */
.sidebar {
    width: 30%; /* 宽度占30% */
    background-color: var(--sidebar-bg); /* 使用变量设置背景 */
    padding: 20px; /* 内边距 */
    border-right: 1px solid var(--border-color); /* 右侧边框 */
    overflow-y: auto; /* 垂直滚动 */
    position: relative;
}

/* 内容区域样式 */
.content {
    width: 70%; /* 宽度占70% */
    background-color: var(--content-bg); /* 使用变量设置背景 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列 */
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 标题样式 */
h2, h3 {
    margin-bottom: 15px; /* 下边距 */
    color: var(--primary-color); /* 使用主色调 */
}

/* 控制组样式 */
.control-group {
    margin-bottom: 15px; /* 下边距 */
}

/* 标签样式 */
label {
    display: block; /* 块级显示 */
    margin-bottom: 5px; /* 下边距 */
}

/* Lock controls */
.lock-container {
    float: right;
    display: flex;
    align-items: center;
}

.lock-checkbox {
    margin-right: 5px;
}

.lock-label {
    font-size: 0.8em;
    color: var(--text-color);
}

/* Locked slider styles */
input[type="range"].locked {
    accent-color: var(--locked-color);
}

/* 输入框和选择框样式 */
input[type="range"], select {
    width: 100%; /* 全宽 */
    padding: 5px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    border: 1px solid var(--border-color); /* 使用变量设置边框 */
}

/* Improved range input styling */
input[type="range"] {
    -webkit-appearance: none;
    height: 10px;
    background: #d3d3d3;
    outline: none;
    border-radius: 5px;
    margin: 10px 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}

input[type="range"].locked::-webkit-slider-thumb {
    background: var(--locked-color);
}

input[type="range"].locked::-moz-range-thumb {
    background: var(--locked-color);
}

/* 按钮基础样式 */
button {
    background-color: var(--primary-color); /* 使用主色调 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 8px 15px; /* 内边距 */
    margin: 5px 5px 5px 0; /* 外边距 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 鼠标指针 */
    transition: background-color 0.2s; /* 背景色过渡 */
}

/* 按钮悬停效果 */
button:hover {
    background-color: var(--secondary-color); /* 使用辅助色 */
}

/* 文本内容区域样式 */
.text-content {
    padding: 20px; /* 内边距 */
    overflow-y: auto; /* 垂直滚动 */
    flex-grow: 1; /* 占据剩余空间 */
    height: calc(100% - 70px); /* 调整高度以适应更高的分页控制栏 */
}

/* 不同字体大小样式 */
.text-content.small { font-size: 14px; }
.text-content.medium { font-size: 18px; }
.text-content.large { font-size: 22px; }
.text-content.x-large { font-size: 26px; }

/* 加粗文本样式 */
.bold {
    font-weight: bold; /* 加粗 */
    color: var(--bold-color); /* 使用变量设置颜色 */
}

    /* 高亮文本样式 */
.highlight {
    background-color: var(--highlight-color);
    color: #000;
}

/* 深色主题高亮文本样式 */
.dark-theme .highlight {
    background-color: var(--highlight-bg-dark);
    color: #fff;
}

/* 加粗高亮文本样式 */
.bold-highlight {
    font-weight: bold;
    background-color: var(--highlight-color);
    color: #000;
}

/* 深色主题加粗高亮文本样式 */
.dark-theme .bold-highlight {
    font-weight: bold;
    background-color: var(--highlight-bg-dark);
    color: #fff;
}

/* 进度条容器样式 */
.progress-bar-container {
    width: 100%; /* 全宽 */
    height: 8px; /* 固定高度 */
    background-color: var(--sidebar-bg); /* 使用变量设置背景 */
}

/* 进度条样式 */
#progress-bar {
    height: 100%; /* 继承容器高度 */
    width: 0; /* 初始宽度为0 */
    background-color: var(--primary-color); /* 使用主色调 */
    transition: width 0.2s; /* 宽度过渡效果 */
}

/* 文件输入区域样式 */
.file-input {
    margin-bottom: 20px; /* 下边距 */
    padding-bottom: 20px; /* 下内边距 */
    border-bottom: 1px solid var(--border-color); /* 底部边框 */
}

/* 控制区域样式 */
.controls {
    margin-bottom: 20px; /* 下边距 */
    padding-bottom: 20px; /* 下内边距 */
    border-bottom: 1px solid var(--border-color); /* 底部边框 */
}

/* 播放控制区域样式 */
.playback-controls {
    margin-bottom: 20px; /* 下边距 */
    padding-bottom: 20px; /* 下内边距 */
    border-bottom: 1px solid var(--border-color); /* 底部边框 */
}

/* 统计信息样式 */
.stats {
    font-size: 14px; /* 较小字体 */
}

/* 占位符样式 */
.placeholder {
    color: #6c757d; /* 灰色文字 */
    text-align: center; /* 居中 */
    margin-top: 30%; /* 上边距 */
    font-size: 1.2em; /* 较大字体 */
}

/* 响应式设计 - 小屏幕 */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 垂直排列 */
    }
    
    .sidebar, .content {
        width: 100%; /* 全宽 */
    }
    
    .sidebar {
        max-height: 50vh; /* 最大高度限制 */
        border-right: none; /* 去除右侧边框 */
        border-bottom: 1px solid var(--border-color); /* 添加底部边框 */
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
        overflow-y: auto;
    }
    
    .sidebar.collapsed {
        max-height: 0;
        padding: 0;
        border: none;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        position: absolute; /* 从文档流中移除 */
        z-index: -1; /* 确保不显示 */
    }
    
    .pagination-controls {
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }
    
    .pagination-controls.collapsed {
        max-height: 0;
        padding: 0;
        border: none;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        position: absolute; /* 从文档流中移除 */
        z-index: -1; /* 确保不显示 */
    }
    
    .content {
        height: auto;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .text-content {
        height: auto;
        flex-grow: 1;
        min-height: 90vh; /* 确保文本区域占据足够的视口高度 */
    }
}

/* 侧边栏和导航栏切换按钮 */
.toggle-panel-btn {
    position: fixed;
    z-index: 100;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    font-size: 20px;
    transition: background-color 0.2s, opacity 0.3s;
    opacity: 1;
}

.toggle-panel-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

.toggle-panel-btn:hover {
    background-color: var(--secondary-color);
}

#toggle-sidebar-btn {
    bottom: 20px;
    left: 20px;
}

#toggle-pagination-btn {
    bottom: 20px;
    right: 20px;
}

/* 字体家族选项 */
.font-sans-serif { font-family: 'Arial', 'Helvetica', sans-serif; }
.font-serif { font-family: 'Times New Roman', 'Georgia', serif; }
.font-monospace { font-family: 'Courier New', monospace; }
.font-opendyslexic { font-family: 'OpenDyslexic', 'Arial', sans-serif; }

/* Floating stats bar styles */
.stats-bar {
    background-color: var(--stats-bg);
    border: 1px solid var(--stats-border);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.stats-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.stats-row:last-child {
    margin-bottom: 0;
}

.stats-label {
    font-weight: bold;
    margin-right: 5px;
    color: var(--primary-color);
}

#reading-speed, #reading-time, #completion {
    margin-right: 12px;
}

/* Pagination controls styles */
.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    position: relative;
}

.page-info {
    padding: 6px 12px;
    background-color: var(--content-bg);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-weight: bold;
    margin: 0 5px;
}

#first-page, #prev-page, #next-page, #last-page {
    min-width: 60px;
    margin: 0 2px;
}

/* 键盘快捷键提示样式 */
.keyboard-hint {
    width: 100%;
    text-align: center;
    font-size: 0.8em;
    color: var(--text-color);
    opacity: 0.7;
    margin-top: 8px;
}

/* Page header style */
.page-header {
    text-align: center;
    font-size: 0.9em;
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--border-color);
}

#snow-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;  /* 让雪花层不影响下面元素的交互 */
    z-index: 9999;        /* 确保雪花显示在最上层 */
}