:root {
    --font-stack: Georgia, "Times New Roman", "宋体", serif;
    --bg: #fffef9;
    --text: #3b3b3b;
    --muted: #8a8a8a;
    --accent: #8b5e3c;
    --accent-hover: #6b4530;
    --sidebar-bg: #f8f5f0;
    --border: #e0d8cc;
    --toolbar-bg: rgba(255, 254, 249, 0.96);
    --blockquote-bg: #f4f0e8;
    --blockquote-border: #8b5e3c;
    --code-bg: #f4f0e8;
    --table-border: #d9cebb;
    --link: #a0522d;
    --overlay: rgba(0,0,0,0.4);
    --font-size: 16px;
    --line-height: 1.8;
    --focus-ring: 0 0 0 3px rgba(139,94,60,0.4);
    --panel-bg: #f0ece4;
}

.dark-mode {
    --bg: #23201e;
    --text: #c8c2bc;
    --muted: #7c7671;
    --accent: #b89773;
    --accent-hover: #d1b492;
    --sidebar-bg: #2c2825;
    --border: #3a3531;
    --toolbar-bg: rgba(35, 32, 30, 0.96);
    --blockquote-bg: #322e2a;
    --blockquote-border: #b89773;
    --code-bg: #322e2a;
    --table-border: #3a3531;
    --link: #c9a87c;
    --overlay: rgba(0, 0, 0, 0.55);
    --focus-ring: 0 0 0 3px rgba(184, 151, 115, 0.35);
    --panel-bg: #2c2825;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: var(--font-stack);
    line-height: var(--line-height);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding-bottom: 60px !important;
    font-size: var(--font-size);
    transition: background 0.3s, color 0.3s;
}

a {
    color: var(--link);
    text-decoration: underline;
}
a:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

.skip-link {
    position: absolute; top: -100px; left: 1rem;
    background: var(--accent); color: #fff; padding: 0.5rem 1rem;
    border-radius: 4px; z-index: 2000; text-decoration: none; font-weight: bold;
}
.skip-link:focus { top: 0.5rem; }

.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap:0.3rem;
    font-size:0.9rem; color:var(--muted); margin-bottom:1.5rem;
    padding-bottom:0.8rem; border-bottom:1px solid var(--border);
}
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb .current { color:var(--text); }

.title-section { text-align:center; margin-bottom:2rem; }
.title-section h1 { font-size:2rem; font-weight:700; margin-bottom:0.5rem; }
.book-meta { color:var(--muted); font-size:0.95rem; }

.reading-container { max-width:750px; margin:0 auto; padding:2rem 1rem 1rem; }
.content-paragraph { text-indent:2em; margin-bottom:1.2rem; }
.content-title { margin:1.5rem 0 0.8rem; font-weight:bold; }

/* 引用块（竖线+舒适间距） */
.blockquote {
    margin: 1.5rem 0;
    padding: 0.8rem 1rem 0.8rem 0.8em;
    background: var(--blockquote-bg);
    border-left: 4px solid var(--blockquote-border);
    border-radius: 0 4px 4px 0;
}

.note-mark a { color:var(--accent); text-decoration:none; font-weight:normal; }
.note-mark a:hover { text-decoration:underline; }
.notes-section { margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.notes-title { font-size:1.2rem; font-weight:bold; margin-bottom:1rem; }
.note-item { margin-bottom:1.2rem; padding-left:2.2rem; position:relative; line-height:1.7; }
.note-num { position:absolute; left:0; color:var(--accent); font-weight:bold; }
.back-to-text { font-size:0.85em; color:var(--muted); text-decoration:none; margin-left:0.8rem; }
.back-to-text:hover { color:var(--accent); }

.img-fluid { max-width:100%; height:auto; display:block; margin:1rem auto; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.bg-light { background:var(--code-bg); padding:0.2em 0.4em; border-radius:3px; font-size:0.9em; }
pre.bg-light {
    padding: 1rem 1rem 1rem 0.8em;
    overflow-x: auto;
    white-space: pre-wrap;
}

code, pre {
    font-family: "Courier New", Consolas, "Noto Sans Mono CJK SC", monospace;
}

.table { width:100%; border-collapse:collapse; margin:1rem 0; }
.table-bordered th, .table-bordered td { border:1px solid var(--table-border); padding:0.5rem; }

hr.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

/* 展示面板（广告） */
.info-panel {
    position: relative;
    border: 1px dashed var(--border);
    background: var(--panel-bg);
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 4px;
}
.panel-close {
    position: absolute;
    top: 0.3rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
}
.panel-close:hover { color: var(--accent); }

.side-panel {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    z-index: 900;
}
.side-panel.left { left: 10px; }
.side-panel.right { right: 10px; }
.side-panel .info-panel { margin: 0; }

.chapter-nav {
    margin-top:2.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.nav-card {
    flex: 1; min-width: 140px; display: flex; flex-direction: column;
    justify-content: center; padding: 1.2rem 1.5rem; border-radius: 8px;
    border: 1px solid var(--border); background: var(--sidebar-bg);
    color: var(--text); text-decoration: none; transition: all 0.2s; font-size: 1.05rem;
}
.nav-card:hover { border-color: var(--accent); background: var(--blockquote-bg); }
.nav-card.disabled { opacity: 0.5; pointer-events: none; background: var(--sidebar-bg); }
.nav-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.4rem; }
.nav-title { font-size: 1rem; line-height: 1.3; }

.action-buttons { display: flex; justify-content: center; gap: 2rem; margin-top: 1.5rem; }
.action-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 0.5rem 1.2rem; font-family: var(--font-stack); font-size: 0.95rem;
    color: var(--text); cursor: pointer; text-decoration: none; transition: all 0.2s;
}
.action-btn:hover { border-color: var(--accent); color: var(--accent); }
.action-btn .icon { font-size: 1.2em; line-height: 1; }

.toc-sidebar {
    position:fixed; top:0; left:0; bottom:60px; width:280px;
    background:var(--sidebar-bg); z-index:1050; transform:translateX(-100%);
    transition:transform 0.3s ease; overflow-y:auto; display:flex; flex-direction:column;
    box-shadow:2px 0 10px rgba(0,0,0,0.05); border-right:1px solid var(--border);
}
.toc-sidebar.show { transform:translateX(0); }
.toc-header { padding:1.2rem 1rem; border-bottom:1px solid var(--border); }
.toc-book-title { font-size:1.1rem; font-weight:bold; margin-bottom:0.3rem; }
.toc-book-title a { color:var(--text); text-decoration:none; }
.toc-book-title a:hover { color:var(--accent); }
.toc-book-author { font-size:0.85rem; color:var(--muted); margin-bottom:0.8rem; }
.toc-meta-row { display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; color:var(--muted); }
.toc-toggle-order {
    background:none; border:1px solid var(--border); border-radius:4px;
    padding:0.2rem 0.6rem; font-size:0.8rem; cursor:pointer; color:var(--text);
    background:var(--bg); font-family: inherit;
}
.toc-content { flex:1; overflow-y:auto; padding:0.5rem 1rem 1rem; font-size:0.85em; }
.toc-item { padding:0.55rem 0.3rem; border-radius:4px; cursor:pointer; transition:background 0.2s; }
.toc-item a { text-decoration:none; color:var(--text); display:block; }
.toc-item:hover { background:rgba(0,0,0,0.04); }
.dark-mode .toc-item:hover { background:rgba(255,255,255,0.05); }
.toc-item.active { background:rgba(139,94,60,0.1); font-weight: normal; }
.dark-mode .toc-item.active { background:rgba(201,168,124,0.15); }
.toc-sub { list-style:none; padding-left:0; margin-top:0.2rem; }
.toc-sub li a { font-size:0.9em; color:var(--muted); }

.overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:var(--overlay); z-index:1040; display:none; }
.overlay.show { display:block; }

.reading-toolbar {
    position:fixed; bottom:0; left:0; right:0; background:var(--toolbar-bg);
    border-top:1px solid var(--border); padding:0.5rem 1rem; display:flex;
    justify-content:space-between; align-items:center; height:60px; z-index:1000;
    box-shadow:0 -2px 10px rgba(0,0,0,0.04);
}
.tool-group { display:flex; gap:1.2rem; align-items:center; }
.tool-btn {
    display:flex; align-items:center; gap:0.4rem; background:none; border:none;
    color:var(--text); font-family:var(--font-stack); font-size:0.95rem; cursor:pointer;
    padding:0.3rem 0.5rem; border-radius:4px; transition:background 0.2s;
    font-weight: normal;
}
.tool-btn:hover { background:rgba(0,0,0,0.05); }
.dark-mode .tool-btn:hover { background:rgba(255,255,255,0.08); }
.tool-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tool-btn .icon { font-size: 1.1em; line-height: 1; display: inline-block; width: 1.2em; text-align: center; }
a:focus-visible, button:focus-visible, .nav-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Badge */
.badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 0.85em;
    line-height: 1.4;
    margin: 0 0.2em;
    text-indent: 0;
}

/* 笔记与翻译容器 */
.note-trans-container {
    margin: 1.5rem 0;
}
.note-trans-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.note-toggle, .trans-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 1.2rem;
    font-family: var(--font-stack);
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}
.note-toggle:hover, .trans-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.note-block, .trans-block {
    background: var(--blockquote-bg);
    padding: 1rem 1.2rem 1rem 0.8em;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-top: 0.5rem;
}

.hidden { display: none; }

.text-link {
    margin: 0;
    padding: 0;
    letter-spacing: normal;
    word-spacing: normal;
}

@media print {
    .toc-sidebar, .overlay, .reading-toolbar, .side-panel, .info-panel, .chapter-nav, .action-buttons { display: none !important; }
    body { padding-bottom: 0 !important; }
}

@media (max-width: 1100px) {
    .side-panel { display: none !important; }
}

@media (max-width: 768px) {
    .reading-container { padding: 1.5rem 0.8rem 0.5rem; }
    .content-paragraph { text-indent: 1.5em; }
    .toc-sidebar { width: 260px; }
    .tool-group { gap: 0.3rem; }
    .tool-btn {
        font-size: 0;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 0.3rem 0.4rem;
    }
    .tool-btn .icon { font-size: 1.3rem; margin: 0; }
    .nav-card { padding: 1rem; }
    .nav-title { font-size: 1rem; }
    .side-panel { display: none !important; }
}

.site-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.site-title {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}
.site-subtitle {
    color: var(--muted);
    font-size: 1rem;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.book-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--sidebar-bg);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    overflow: hidden;
}
.book-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    border-color: var(--accent);
}
.book-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: var(--blockquote-bg);
}
.book-info {
    padding: 1rem;
}
.book-title {
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 0.3rem;
}
.book-author {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.book-intro {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .books-grid {
        grid-template-columns: 1fr;
    }
}

/* 搜索区域 */
.search-area {
    display: flex;
    gap: 0.5rem;
    margin: 2rem 0 1.5rem;
}
.search-area input {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-stack);
    font-size: 1rem;
}

/* 分类按钮 */
.category-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.category-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* 区块标题 */
.section {
    margin-top: 3rem;
}

/* 营销标语 */
.site-slogan {
    font-size: 1.1rem;
    color: var(--muted);
    text-align: center;
    margin-top: 0.8rem;
    font-style: italic;
}

/* 底部版权 */
.site-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .books-grid {
        grid-template-columns: repeat(2, 1fr);   /* 改为两列 */
        gap: 0.8rem;
    }
    .book-cover {
        height: 160px;          /* 封面适当缩小 */
    }
    .book-info {
        padding: 0.7rem;
    }
    .book-title {
        font-size: 1rem;
    }
    .book-author {
        font-size: 0.8rem;
    }
    .book-intro {
        font-size: 0.75rem;
    }
}