/* ================= 定义变量与主题 ================= */
        :root {
            /* 默认：古卷黄（浅色模式） */
            --bg-body: #f0ebd8;             /* 整体背景 */
            --bg-paper: #fdfbf2;            /* 书页背景 */
            --text-main: #2b201e;           /* 正文墨色 */
            --text-comment: #8c7a6b;        /* 注文淡墨 */
            --accent-color: #9e2a2b;        /* 朱砂红（标题/印章） */
            --border-outer: #5e5046;        /* 边框深色 */
            --border-inner: #dcd3b2;        /* 边框浅色 */
            --selection-bg: #c7bfa0;        /* 选中背景 */
            --shadow: rgba(94, 80, 70, 0.15);
            --texture-opacity: 0.03;        /* 纸张纹理透明度 */
            
            /* 目录专用 */
            --toc-bg: rgba(255, 255, 255, 0.95);
            --toc-border: #dcd3b2;
            --toc-link-hover: #fff3c9;
        }

        /* 沉墨黑（深色模式） */
        [data-theme="dark"] {
            --bg-body: #1a1a1a;
            --bg-paper: #242424;
            --text-main: #c0b4a3;           /* 仿古铜/淡金字 */
            --text-comment: #757575;        /* 暗灰注文 */
            --accent-color: #c44d34;        /* 铁锈红 */
            --border-outer: #4a4a4a;
            --border-inner: #333333;
            --selection-bg: #4a403a;
            --shadow: #000000;
            --texture-opacity: 0.05;

            /* 目录专用 */
            --toc-bg: rgba(36, 36, 36, 0.95);
            --toc-border: #4a4a4a;
            --toc-link-hover: #3a3a3a;
        }

        /* ================= 全局排版 ================= */
        * { box-sizing: border-box; transition: background-color 0.3s, color 0.3s, opacity 0.3s; }

        body {
            margin: 0;
            padding: 20px 0;
            background-color: var(--bg-body);
            font-family: "SimSun", "宋体", "Songti SC", "KaiTi", "楷体", serif;
            color: var(--text-main);
            line-height: 1.9;
            font-size: 20px;
            -webkit-font-smoothing: antialiased;
        }

        /* 纸张纹理层 */
        body::before {
            content: "";
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
            opacity: var(--texture-opacity);
            pointer-events: none;
            z-index: -1;
        }

        /* ================= 书籍容器（文武框） ================= */
        .book-container {
            max-width: 900px;
            margin: 0 auto;
            background-color: var(--bg-paper);
            padding: 60px 80px;
            border: 1px solid var(--border-outer);
            outline: 4px double var(--border-outer);
            outline-offset: -12px;
            box-shadow: 0 10px 40px var(--shadow);
            position: relative;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            body { 
                font-size: 17px; /* 略微缩小字号 */
                padding: 0; 
            }
            .book-container {
                width: 100%;
                padding: 20px 15px; /* 减少内边距 */
                margin: 0;
                /* 移除或简化复杂的桌面端边框装饰 */
                outline: none; 
                outline-offset: 0;
                border: none;
                box-shadow: none;
                min-height: 100vh; /* 确保内容撑满屏幕 */
            }
            
            /* 移除桌面端标题的竖排复杂样式，改为居中横排 */
            header h1 {
                writing-mode: horizontal-tb;
                height: auto;
                padding: 15px 0;
                font-size: 2em;
                margin-bottom: 20px;
                /* 移除边框，使用下划线代替 */
                border: none;
                border-bottom: 2px solid var(--accent-color);
                box-shadow: none;
                text-align: center;
            }
            
            /* 章节标题：调整上下边距 */
            article header h2 {
                margin-top: 2em;
                margin-bottom: 1em;
                font-size: 1.4em;
            }
            
            /* 正文：适当收紧行距 */
            p {
                line-height: 1.7; 
                text-align: left; /* 移动端左对齐更自然 */
            }

            /* 引用块：减少左右边距 */
            blockquote {
                margin: 1.5em 0; 
                padding: 1em 1em;
            }
        }

        /* ================= 标题样式 ================= */
        header h1 {
            font-family: "KaiTi", "楷体", "STKaiti", "华文楷体", serif;
            font-size: 2.8em;
            color: var(--text-main);
            text-align: center;
            margin: 0 auto 60px auto;
            padding: 40px 20px;
            writing-mode: vertical-rl;
            text-orientation: upright;
            border: 2px solid var(--accent-color);
            border-radius: 4px;
            height: 300px;
            letter-spacing: 0.3em;
            background: rgba(0,0,0,0.02);
            box-shadow: inset 0 0 20px rgba(0,0,0,0.03);
        }

        article header h2 {
            font-family: "KaiTi", "楷体", "STKaiti", serif;
            font-size: 1.6em;
            color: var(--accent-color);
            text-align: center;
            margin-top: 3em;
            margin-bottom: 1.5em;
            font-weight: normal;
            position: relative;
            letter-spacing: 0.1em;
        }
        
        article header h2::before,
        article header h2::after {
            content: "✦"; 
            font-size: 0.6em;
            color: var(--border-outer);
            margin: 0 15px;
            vertical-align: middle;
            opacity: 0.6;
        }

        article header h2.title {
             border-top: 1px solid var(--border-inner);
             border-bottom: 1px solid var(--border-inner);
             padding: 20px 0;
             letter-spacing: 0.2em;
        }

        /* ================= 正文内容 ================= */
        p {
            margin-bottom: 1.5em;
            text-align: justify;
            text-indent: 2em;
            font-weight: 400;
        }

        blockquote {
            margin: 1.5em 0;
            padding: 1em 2em;
            background-color: rgba(0,0,0,0.03);
            border-left: 4px solid var(--accent-color);
            font-family: "KaiTi", "楷体", serif;
            color: var(--text-main);
            font-size: 1.05em;
        }

        sub {
            font-size: 0.75em;
            color: var(--text-comment);
            font-family: "KaiTi", "楷体", serif;
            vertical-align: baseline;
            position: relative;
            top: -0.2em;
            margin: 0 3px;
        }
        sub::before { content: "（"; }
        sub::after { content: "）"; }

        footer {
            margin-top: 4em;
            padding-top: 1em;
            text-align: right;
            border-top: 1px dashed var(--border-inner);
        }

        h6 {
            font-family: "KaiTi", "楷体", serif;
            font-weight: normal;
            font-size: 0.9em;
            color: var(--text-comment);
            margin: 0.4em 0;
        }

        /* ================= 悬浮控制按钮 ================= */
        .controls {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            gap: 10px;
        }

        /* 移动端适配：将控制按钮固定在屏幕底部 */
        @media (max-width: 768px) {
            .controls {
                top: auto;
                bottom: 0;
                right: 0;
                left: 0;
                width: 100%;
                background-color: var(--bg-paper); /* 底部栏背景 */
                border-top: 1px solid var(--border-inner);
                padding: 10px 15px;
                gap: 8px;
                /* 使用 Flexbox 均匀分布按钮 */
                justify-content: space-around; 
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            }
            
            /* 统一按钮大小，增加触摸面积 */
            .btn-toggle, .btn-catalog, #feedback-link {
                padding: 10px 5px; 
                font-size: 14px;
                flex-grow: 1; /* 按钮平均分配宽度 */
                text-align: center;
                border: none; /* 简化边框，在底部栏上依靠颜色区分 */
                box-shadow: none;
                background-color: transparent; /* 透明背景 */
            }
            
            /* 区分按钮样式，让功能更清晰 */
            .btn-catalog, #feedback-link {
                color: var(--accent-color);
            }
            
            .btn-toggle:hover, .btn-catalog:hover, #feedback-link:hover {
                background-color: rgba(0, 0, 0, 0.05); /* 移动端使用轻微反馈色 */
            }
        }

        .btn-toggle, .btn-catalog {
            background-color: var(--bg-paper);
            border: 1px solid var(--border-outer);
            color: var(--text-main);
            padding: 8px 16px;
            cursor: pointer;
            font-family: "KaiTi", "楷体", serif;
            font-size: 16px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: all 0.2s;
        }

        .btn-toggle:hover, .btn-catalog:hover {
            background-color: var(--accent-color);
            color: #fff;
            border-color: var(--accent-color);
        }

        /* ================= 目录窗口样式（新增高亮） ================= */
        #toc-panel {
            position: fixed;
            width: 300px;
            top: 0;
            left: -320px; /* 默认隐藏在左侧 */
            width: 300px;
            height: 100%;
            background-color: var(--toc-bg);
            backdrop-filter: blur(5px);
            border-right: 1px solid var(--toc-border);
            padding: 20px;
            box-shadow: 3px 0 10px rgba(0,0,0,0.1);
            overflow-y: auto;
            z-index: 999;
            transition: left 0.3s ease-in-out;
        }

        /* 移动端适配：目录占据整个屏幕宽度，但留出一点空间 */
        @media (max-width: 768px) {
            #toc-panel {
                width: 90%; /* 占据大部分宽度 */
                left: -90%; /* 默认隐藏到左侧 */
            }
            
            /* 展开时占据整个屏幕 */
            #toc-panel.open {
                left: 0;
            }
        }
        
        #toc-panel.open {
            left: 0; /* 展开时显示 */
        }
        
        #toc-panel h3 {
            font-family: "KaiTi", "楷体", serif;
            color: var(--accent-color);
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.5em;
            border-bottom: 1px solid var(--toc-border);
            padding-bottom: 10px;
        }

        #toc-list {
            list-style: none;
            padding: 0;
            margin: 0;
            font-family: "SimSun", "宋体", serif;
            font-size: 0.9em;
        }

        #toc-list li {
            margin-bottom: 5px;
            border-bottom: 1px dashed var(--toc-border);
        }

#toc-list a {
    display: block;
    text-decoration: none;
    color: var(--text-main);
    padding: 8px 5px;
    transition: background-color 0.2s, color 0.2s, border-left 0.2s;
}

#toc-list a:hover {
    background-color: var(--toc-link-hover);
}

/* **新增：高亮当前章节的样式** */
#toc-list a.active {
    background-color: var(--accent-color); /* 朱砂红背景 */
    color: #fff !important; /* 白色文字 */
    font-weight: bold;
    border-radius: 2px;
    border-left: 5px solid var(--text-main); /* 强调边框 */
    padding-left: 10px;
}

/* 深色模式下高亮颜色适配 */
[data-theme="dark"] #toc-list a.active {
    background-color: var(--accent-color);
    color: #f0f0f0 !important;
    border-left: 5px solid var(--text-main); 
}

/* 选中文字颜色 */
::selection {
    background: var(--selection-bg);
    color: inherit;
}

/* logo 样式 */
#site-logo {
    /* 保持 Logo 尺寸稳定 */
    flex-shrink: 0; 
}

/* 移动端 Logo 尺寸微调 */
@media (max-width: 768px) {
    #site-logo {
        width: 30px;
        height: 30px;
    }
}

/* ================= 校对意见提交功能样式 ================= */
#feedback-link {
    background-color: var(--bg-paper);
    border: 1px solid var(--border-outer);
    color: var(--text-main);
    padding: 8px 16px;
    cursor: pointer;
    font-family: "KaiTi", "楷体", serif;
    font-size: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

#feedback-link:hover {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.feedback-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.feedback-modal-content {
    background-color: var(--bg-paper);
    border: 2px solid var(--border-outer);
    border-radius: 8px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    position: relative;
}

.feedback-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-inner);
}

.feedback-modal-header h3 {
    font-family: "KaiTi", "楷体", serif;
    color: var(--accent-color);
    margin: 0;
    font-size: 1.5em;
}

.feedback-close {
    background: none;
    border: none;
    font-size: 2em;
    color: var(--text-comment);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 1;
    transition: color 0.2s;
}

.feedback-close:hover {
    color: var(--accent-color);
}

#feedback-form {
    padding: 20px;
}

.feedback-form-group {
    margin-bottom: 20px;
}

.feedback-form-group label {
    display: block;
    font-family: "KaiTi", "楷体", serif;
    color: var(--text-main);
    margin-bottom: 8px;
    font-size: 1em;
}

.feedback-form-group input,
.feedback-form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-inner);
    border-radius: 4px;
    font-family: "SimSun", "宋体", serif;
    font-size: 16px;
    background-color: var(--bg-paper);
    color: var(--text-main);
    box-sizing: border-box;
}

.feedback-form-group input:focus,
.feedback-form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(158, 42, 43, 0.1);
}

.btn-current-location {
    margin-top: 8px;
    padding: 6px 12px;
    background-color: var(--bg-body);
    border: 1px solid var(--border-outer);
    color: var(--text-main);
    font-family: "SimSun", "宋体", serif;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-current-location:hover {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.feedback-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.btn-submit,
.btn-cancel {
    padding: 10px 20px;
    border: 1px solid var(--border-outer);
    border-radius: 4px;
    font-family: "KaiTi", "楷体", serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-submit {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.btn-submit:hover {
    background-color: #7a1f20;
}

.btn-cancel {
    background-color: var(--bg-body);
    color: var(--text-main);
}

.btn-cancel:hover {
    background-color: var(--border-inner);
}

.feedback-list {
    padding: 20px;
    border-top: 1px solid var(--border-inner);
}

.feedback-list h4 {
    font-family: "KaiTi", "楷体", serif;
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 15px;
}

#feedback-items {
    margin-bottom: 15px;
}

.feedback-item {
    background-color: var(--bg-body);
    border: 1px solid var(--border-inner);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.feedback-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-inner);
}

.feedback-time {
    font-family: "SimSun", "宋体", serif;
    font-size: 0.9em;
    color: var(--text-comment);
}

.btn-delete {
    padding: 4px 8px;
    background-color: transparent;
    border: 1px solid var(--border-outer);
    color: var(--text-comment);
    font-family: "SimSun", "宋体", serif;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete:hover {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.feedback-item-content {
    font-family: "SimSun", "宋体", serif;
    font-size: 0.95em;
    line-height: 1.6;
}

.feedback-item-content p {
    margin: 8px 0;
    text-indent: 0;
}

.feedback-item-content strong {
    color: var(--accent-color);
}

.feedback-empty,
.feedback-error {
    text-align: center;
    color: var(--text-comment);
    padding: 20px;
    font-family: "SimSun", "宋体", serif;
}

.btn-export {
    width: 100%;
    padding: 10px;
    background-color: var(--bg-body);
    border: 1px solid var(--border-outer);
    color: var(--text-main);
    font-family: "KaiTi", "楷体", serif;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-export:hover {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .feedback-modal {
        padding: 10px;
    }
    
    .feedback-modal-content {
        max-height: 95vh;
    }
    
    .feedback-modal-header,
    #feedback-form,
    .feedback-list {
        padding: 15px;
    }
    
    .feedback-form-group input,
    .feedback-form-group textarea {
        font-size: 16px; /* 防止iOS自动缩放 */
    }
}