/* ====== 全局重置 ====== */
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background-color: #f5f6f8; color: #333; display: flex; justify-content: center; height: 100vh; overflow: hidden; }
        #app { width: 100%; max-width: 480px; height: 100vh; background-color: #f5f6f8; position: relative; display: flex; flex-direction: column; margin: 0 auto; }
        .view-container { flex: 1; overflow-y: auto; display: none; padding-bottom: 80px; }
        .view-container.active { display: block; }

        /* ====== 1. 书城页面样式 ====== */
        .city-header-bg { background: linear-gradient(180deg, #E6F6F0 0%, #F7F8FA 100%); }
        .city-search-area { padding: 12px 16px; display: flex; gap: 12px; align-items: center; }
        .city-search-wrapper { flex:1; background:#fff; border-radius:6px; padding:8px 12px; display:flex; align-items:center; border:1px solid #e0e0e0; }
        .city-search-wrapper input { border:none; background:transparent; outline:none; width:100%; font-size:14px; margin-left:6px; }
        .city-category-btn { display:none; }
        .city-tabs { padding: 0 16px 12px; display: flex; align-items: center; gap: 16px; }
        .city-tab { font-size: 17px; font-weight: bold; color: #222; position: relative; }
        .city-tab::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background-color: #333; border-radius: 2px; }
        .city-tab-more { margin-left: auto; color: #888; cursor: pointer; font-size: 14px; }
        /* 书城推荐榜：番茄风格榜单（排名 + 小封面 + 书名，两列蛇形排布） */
        .city-book-list { padding: 4px 16px 16px; }
        .rank-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
        .book-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
        .book-item .rank { font-weight: bold; font-size: 20px; color: #333; min-width: 24px; line-height: 1.2; margin-top: 2px; }
        .book-item .rank.empty { visibility: hidden; }
        .book-item .cover { width: 60px; height: 80px; border-radius: 6px; flex-shrink: 0; object-fit: cover; background-color: #e0e0e0; display: block; }
        .book-item .info { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; }
        .book-item .title { font-size: 15px; font-weight: bold; color: #222; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .book-item .subtitle { font-size: 12px; color: #999; line-height: 1.2; }
        .search-empty { text-align: center; color: #999; padding: 60px 16px; font-size: 14px; }
        .search-clear { color: #bbb; font-size: 14px; padding: 2px 4px; cursor: pointer; }

        /* ====== 2. 书架页面样式 ====== */
        .shelf-header { background: linear-gradient(180deg, #E6F6F0 0%, #F7F8FA 100%); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; }
        .shelf-header-title { font-size: 22px; font-weight: 600; color: #222; }
        .shelf-header-actions { display: flex; gap: 12px; align-items: center; font-size: 16px; color: #333; }
        .shelf-header-actions span { cursor: pointer; font-weight: 500; }
        .shelf-today-box { background: #fff; padding: 12px 16px; }
        .shelf-today-inner { background: #f7f8fa; border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; font-size: 14px; }
        .shelf-books-area { padding: 12px 16px; flex: 1; }
        .shelf-view-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        .shelf-view-list { display: flex; flex-direction: column; gap: 12px; }
        .shelf-view-double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .book-card-grid { background: #fff; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; overflow: hidden; }
        .book-card-horizontal { background: #fff; border-radius: 8px; padding: 10px; display: flex; gap: 12px; align-items: flex-start; }
        .card-cover-wrap { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; }
        .card-cover-wrap .update-tag { position: absolute; top: 6px; right: 6px; background: #ff7d4a; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
        .card-cover-h { width: 80px; height: 105px; border-radius: 6px; overflow: hidden; flex-shrink: 0; position: relative; }
        .card-cover-h .update-tag { position: absolute; top: 6px; right: 6px; background: #ff7d4a; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
        .card-info-grid { margin-top: 8px; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        .card-info-h { flex: 1; display: flex; flex-direction: column; justify-content: space-between; height: 105px; overflow: hidden; }
        .card-info-h .card-chapter-preview { font-size: 13px; color: #999; margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .card-title { font-size: 16px; font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .card-subtitle { font-size: 13px; color: #999; margin-top: 4px; }
        .select-checkbox { position: absolute; bottom: 4px; right: 4px; width: 22px; height: 22px; background: #fff; border-radius: 50%; border: 2px solid #999; display: none; align-items: center; justify-content: center; z-index: 5; }
        .is-editing .select-checkbox { display: flex; }
        .edit-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 480px; background: transparent; border-top: none; padding: 12px 0 24px; display: none; justify-content: center; z-index: 20; }
        .is-editing .edit-bottom-bar { display: flex; }
        .edit-del-icon { width: 24px; height: 24px; display: block; }

        /* ====== 3. 我的页面样式 ====== */
        .page-container { background-color: #f5f6f8; width: 100%; max-width: 100%; margin: 0 auto; font-family: sans-serif; min-height: 100%; padding-bottom: 80px; box-sizing: border-box; }
        .profile-header { padding: 40px 20px 20px; background: linear-gradient(180deg, #E6F6F0 0%, #F7F8FA 100%); display: flex; align-items: center; gap: 15px; }
        .avatar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #ccc; overflow: hidden; }
        .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
        .user-info { flex: 1; }
        .user-name { font-size: 20px; font-weight: bold; color: #333; margin-bottom: 4px; }
        .user-stats { font-size:14px; color: #888; display: flex; gap: 10px; }
        .grid-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 15px; background: #fff; margin: 0 15px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
        .menu-item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px; color: #333; cursor: pointer; }
        .menu-icon { font-size: 24px; }
        .reading-card { margin: 15px; background: #fff; border-radius: 16px; padding: 15px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
        .book-info { display: flex; align-items: center; gap: 12px; }
        .book-cover { width: 50px; height: 70px; border-radius: 6px; background: #eee; }
        .book-details { display: flex; flex-direction: column; gap: 4px; }
        .book-title { font-size: 15px; font-weight: bold; color: #333; }
        .book-chapter { font-size: 12px; color: #999; }
        .btn-continue { padding: 6px 14px; border-radius: 20px; background: #EEF7F1; color: #0DB369; font-size: 13px; }

        /* =================================================
           ====== 4. 新增：阅读历史页面样式 ======
           ================================================= */
        /* 覆盖层容器，遮住底部导航 */
        .history-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #fff;
            z-index: 99;
            display: none;
            flex-direction: column;
        }
        .history-overlay.active { display: flex; }

        /* 正常模式头部 */
        .header-normal {
            display: flex;
            flex-direction: column;
            padding: 0;
            background: #fff;
            position: relative;
        }
        .header-normal .header-top-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 16px 12px;
        }
        .header-normal .back-btn { cursor: pointer; }
        .header-normal .title { font-size: 18px; font-weight: bold; position: absolute; left: 50%; transform: translateX(-50%); }
        .header-normal .search-icon { cursor: pointer; }
        .header-normal .edit-entry-btn {
            font-size: 17px; color: #333; cursor: pointer; white-space: nowrap;
        }
        
        /* 搜索模式头部 */
        .header-search {
            display: none;
            align-items: center;
            padding: 12px 16px;
            background: #fff;
            gap: 12px;
        }
        .header-search.active { display: flex; }
        .header-search .back-btn { font-size: 22px; cursor: pointer; }
        .header-search .search-input-box { flex: 1; background: #f7f8fa; border-radius: 20px; padding: 8px 12px; display: flex; align-items: center; gap: 6px; }
        .header-search .search-input-box input { border: none; outline: none; width: 100%; background: transparent; font-size: 14px; }
        .header-search .search-txt { color: #f7cfb5; font-size: 14px; } /* 禁用状态的颜色 */

        /* 编辑模式头部 */
        .header-edit {
            display: none;
            align-items: center;
            padding: 0 16px;
            height: 60px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
        }
        .header-edit.active { display: flex; justify-content: space-between; }
        .header-edit .select-all { font-size: 15px; cursor: pointer; }
        .header-edit .center-title { display: flex; flex-direction: column; align-items: center; font-size: 16px; font-weight: bold; }
        .header-edit .center-title .sub-text { font-size: 12px; font-weight: normal; color: #999; margin-top: 2px; }
        .header-edit .done-btn { font-size: 15px; cursor: pointer; }

        /* 历史列表 */
        .history-list-area { flex: 1; overflow-y: auto; background: #fff; padding-bottom: 80px; }
        .history-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: #999; }
        .history-group { padding: 0 16px; }
        .history-group-title { font-size: 20px; font-weight: bold; padding: 20px 0 12px; color: #222; display: flex; justify-content: space-between; align-items: center; }
        .history-item { display: flex; padding: 12px 0; border-bottom: 1px solid #f8f8f8; align-items: center; gap: 12px; position: relative; }
        .history-cover-wrap { position: relative; width: 60px; height: 80px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: #ccc; }
        .history-cover-wrap .status-tag { position: absolute; top: 4px; left: 4px; background: #fff; color: #333; font-size: 10px; padding: 1px 4px; border-radius: 2px; }
        .history-content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; height: 80px; position: relative; }
        .history-content .book-name { font-size: 17px; font-weight: 500; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        /* 章节名：位于封面底部往上 1/3 处（封面高 80px → 距底 27px） */
        .history-content .chapter-name { font-size: 13px; color: #999; position: absolute; bottom: 27px; left: 0; right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        
        /* 操作区（加入书架 或 选择框） */
        .history-action-box { display: flex; align-items: center; flex-shrink: 0; }
        .history-action-box .btn-add-shelf { background: #f7f8fa; padding: 4px 14px; border-radius: 20px; font-size: 13px; color: #333; cursor: pointer; }
        .history-action-box .btn-add-shelf.added { color: #999; background: #f0f0f0; }
        
        /* 编辑模式下的复选框：未选中=灰色对号，选中=橙色对号 */
        .history-action-box .chk-box { 
            width: 22px; height: 22px; border-radius: 50%; border: 2px solid #e0e0e0; 
            display: flex; align-items: center; justify-content: center; font-size: 14px; color: #c4c4c4; background: #fff;
        }
        .history-action-box .chk-box.checked { border-color: #ff6218; color: #ff6218; background: #fff5ee; }
        .history-edit-bottom .action-item .edit-icon { width: 22px; height: 22px; display: block; }
        
        /* 底部操作栏（仅编辑模式下出现） */
        .history-edit-bottom { 
            position: absolute; bottom: 0; left: 0; width: 100%; 
            background: #fff; border-top: 1px solid #f0f0f0; 
            display: none; justify-content: space-around; padding: 12px 0 30px; z-index: 100;
        }
        .history-edit-bottom.active { display: flex; }
        .history-edit-bottom .action-item { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #666; gap: 4px; cursor: pointer; }
        .history-edit-bottom .action-item .icon { font-size: 22px; }
        .history-edit-bottom .action-item.disabled { opacity: 0.4; pointer-events: none; }
        .history-edit-bottom .action-item.delete { color: #ff3b30; }


        /* ====== 5. 底部导航全局控制 ====== */
        .bottom-nav {
            position: absolute; bottom: 0; left: 0; width: 100%;
            background: #fff; border-top: 1px solid #ebebeb; display: flex;
            justify-content: space-around; padding: 10px 0 24px; z-index: 20;
        }
        .bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; font-size: 20px; color: #999; gap: 4px; cursor: pointer; padding: 8px 16px; }
        .bottom-nav .nav-item .icon { display:none; }
        .bottom-nav .nav-item.active { color: #222; font-weight: 600; }

        /* ====== 6. 正文阅读覆盖层 ====== */
        .reader-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #fff; z-index: 200; display: none; flex-direction: column;
            overflow: hidden; /* 内部元素（如侧边栏）不得溢出到页面 */
        }
        .reader-overlay.active { display: flex; }
        .reader-header { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #fff; flex-shrink: 0; border-bottom: 1px solid #f5f5f5; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: top; position: absolute; top: 0; left: 0; width: 100%; z-index: 30; }
        .reader-header.reader-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
        .reader-header-left { display: flex; align-items: center; gap: 12px; font-size: 20px; color: #333; cursor: pointer; }
        .reader-header-title { font-size: 17px; font-weight: 500; color: #333; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .reader-header-right { display: flex; align-items: center; gap: 16px; font-size: 15px; color: #333; font-weight: 500; cursor: pointer; }
        .reader-tabs { display: flex; height: 44px; border-bottom: 1px solid #f0f0f0; padding: 0 16px; align-items: center; flex-shrink: 0; background: #fff; transition: transform 0.3s ease, opacity 0.3s ease; position: absolute; top: 50px; left: 0; width: 100%; z-index: 30; }
        .reader-tabs.reader-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
        .reader-tab-item { font-size: 15px; color: #666; margin-right: 24px; height: 100%; display: flex; align-items: center; position: relative; cursor: pointer; }
        .reader-tab-item.active { color: #333; font-weight: 500; }
        .reader-tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 16px; height: 3px; background-color: #ff6218; border-radius: 4px; }
        /* 目录工具：分卷下拉 + 倒序（tabs 行与侧边栏头部共用） */
        .toc-volume-select { font-size: 13px; color: #333; border: 1px solid #e0e0e0; border-radius: 6px; padding: 4px 6px; background: #f7f8fa; outline: none; max-width: 130px; }
        .toc-order-btn { font-size: 13px; color: #333; cursor: pointer; padding: 4px 10px; border: 1px solid #e0e0e0; border-radius: 6px; background: #f7f8fa; white-space: nowrap; }
        .toc-order-btn.reversed { color: #ff6218; border-color: #ff6218; background: #fff5ee; }
        .reader-tabs > .toc-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
        .reader-view { display: none; flex: 1; overflow-y: auto; background: #fff; }
        .reader-view.active { display: block; }
        #rv-read { overflow: hidden; }
        /* 详情/目录视图：内容区让出顶部悬浮的标题栏(50px)和标签栏(44px) */
        #rv-detail, #rv-toc { padding-top: 94px; }
        .reading-wrapper { display: flex; flex-direction: column; height: 100%; position: relative; background: #fff; transition: background 0.3s; }
        .reading-clip { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; touch-action: pan-y; }
        .reading-clip.paged { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
        .reading-inner { padding: 16px 20px; color: #333; font-size: 18px; line-height: 1.8; letter-spacing: 0.5px; text-align: justify; }
        .reading-clip.mode-scroll { overflow-y: auto; scrollbar-width: none; }
        .reading-clip.mode-scroll::-webkit-scrollbar { display: none; }
        .reading-clip.mode-scroll .reading-inner { transform: none !important; }
        .reading-inner p { margin-bottom: 16px; text-indent: 2em; }
        /* 分页模式：inner 撑满阅读区，页面切片绝对定位在它内部 */
        .reading-clip.paged .reading-inner { padding: 0; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
        .reading-clip.mode-fangzhen { perspective: 1500px; }
        .page-slice { width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 16px 20px; overflow: hidden; box-sizing: border-box; color: #333; font-size: 18px; line-height: 1.8; letter-spacing: 0.5px; text-align: justify; background: #fff; will-change: transform; }
        .page-slice p { margin-bottom: 16px; text-indent: 2em; }
        /* 分页测量容器：与真实页面同款排版，但高度自适应（不能继承 page-slice 的 height:100%） */
        .page-measure { position: absolute; visibility: hidden; top: -9999px; left: 0; padding: 0; font-size: 18px; line-height: 1.8; letter-spacing: 0.5px; text-align: justify; }
        .page-measure p { margin-bottom: 16px; text-indent: 2em; }
        .reader-read-header { text-align: center; font-size: 14px; color: #999; padding: 12px 16px 0; transition: transform 0.3s ease, opacity 0.3s ease; background: inherit; position: absolute; top: 50px; left: 0; right: 0; z-index: 15; pointer-events: none; }
        .reader-read-header.reader-hidden { transform: translateY(-20px); opacity: 0; }
        .reading-footer { padding: 10px 16px 30px; border-top: 1px solid #f0f0f0; background: #fff; flex-shrink: 0; transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s; transform-origin: bottom; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 15; }
        .reading-footer.reader-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
        .chapter-nav { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-bottom: 16px; position: relative; }
        .progress-track { flex: 1; height: 4px; background-color: #e0e0e0; border-radius: 2px; margin: 0 4px; position: relative; cursor: pointer; touch-action: none; }
        .progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background-color: #ff6218; border-radius: 2px; transition: width 0.3s ease; }
        .progress-thumb { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; background-color: #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,0.25); transition: left 0.3s ease; }
        /* 拖动过程中禁用过渡动画，保证跟手 */
        .progress-track.dragging .progress-fill, .progress-track.dragging .progress-thumb { transition: none; }
        /* 拖动进度条时的胶囊弹窗（进度条上方居中） */
        .toast-modal { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); background-color: #6c6c6c; color: #ffffff; padding: 10px 24px; border-radius: 50px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: none; flex-direction: column; align-items: center; gap: 2px; z-index: 30; white-space: nowrap; }
        .toast-modal.show { display: flex; animation: toastPopIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes toastPopIn { 0% { opacity: 0; transform: translateX(-50%) translateY(8px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } }
        .toast-percent { font-size: 13px; line-height: 1.2; letter-spacing: 1px; }
        .toast-chapter { font-size: 15px; line-height: 1.4; font-weight: 500; letter-spacing: 0.5px; }
        .reader-bottom-menu { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
        .reader-menu-item { display: flex; flex-direction: column; align-items: center; color: #666; font-size: 11px; gap: 4px; cursor: pointer; }
        .reader-menu-item svg { width: 22px; height: 22px; fill: #333; }
        .detail-body { padding: 16px; }
        .detail-book-info-card { display: flex; gap: 16px; margin-bottom: 20px; }
        .detail-book-cover { width: 80px; height: 110px; background-color: #e0e0e0; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px; }
        .detail-book-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; }
        .detail-book-name { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 4px; line-height: 1.2; }
        .detail-book-author { font-size: 14px; color: #666; }
        .detail-intro-label { font-size: 14px; font-weight: 500; color: #333; margin-top: 4px; }
        .detail-intro-text { font-size: 15px; color: #666; line-height: 1.6; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .toc-list { padding: 0 16px 20px; }
        .toc-item { padding: 16px 0; border-bottom: 1px solid #f8f8f8; cursor: pointer; }
        .toc-item:last-child { border-bottom: none; }
        .toc-header { display: flex; align-items: center; justify-content: space-between; }
        .toc-title { font-size: 16px; color: #333; font-weight: 500; }
        .toc-title.active { color: #ff6218; }
        .toc-info { font-size: 12px; color: #999; display: flex; align-items: center; gap: 8px; }
        .toc-preview { font-size: 14px; color: #666; line-height: 1.5; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
        .settings-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 250; display: none; align-items: flex-end; justify-content: center; }
        .settings-overlay.active { display: flex; }
        .settings-panel { width: 100%; background: #f7f8fa; border-radius: 16px 16px 0 0; padding: 20px 20px 0; max-height: 80vh; overflow-y: auto; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); }
        .setting-row { display: flex; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
        .setting-label { font-size: 14px; color: #333; width: 40px; margin-right: 10px; }
        .slider-container { flex: 1; display: flex; align-items: center; gap: 10px; }
        .slider-container input[type=range] { flex: 1; accent-color: #ccc; height: 4px; }
        .slider-label { font-size: 14px; color: #333; display: flex; align-items: center; gap: 4px; }
        .options-group { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
        .option-btn { background: #f0f0f0; border: none; border-radius: 20px; padding: 6px 14px; font-size: 14px; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .option-btn.active { background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-weight: 500; }
        .option-btn.size-btn { min-width: 32px; height: 32px; border-radius: 16px; font-size: 16px; background: #f0f0f0; }
        .option-btn.size-btn.large { font-size: 20px; }
        .color-option { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #e0e0e0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .color-option.active { border: 2px solid #333; }
        .color-option.dark { background: #000; }
        .bg-option { width: 48px; height: 28px; border-radius: 4px; border: 1px solid #e0e0e0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .bg-option.active { border: 2px solid #333; }
    
/* =================================================
   新增：真实书籍（蛊真人）相关样式
   ================================================= */
/* 书架 / 历史 / 我的：封面图 */
.card-cover-wrap img, .card-cover-h img, .history-cover-wrap img, .detail-book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover { object-fit: cover; }
.shelf-empty { text-align: center; color: #999; padding: 60px 0; font-size: 14px; }

/* 详情页 */
.detail-wordcount { font-size: 13px; color: #999; margin-top: 4px; }
.btn-start-read { display: block; margin: 20px 0 0; padding: 12px 0; border-radius: 24px; background: #ff6218; color: #fff; font-size: 16px; text-align: center; font-weight: 600; cursor: pointer; }

/* 目录：按卷分组（卷标题吸顶在标签栏正下方，不随内容滚动） */
.toc-vol-header { font-size: 15px; font-weight: 600; color: #333; padding: 18px 16px 6px; margin: 0 -16px; position: sticky; top: 0; background: #fff; z-index: 2; border-bottom: 1px solid #f0f0f0; box-shadow: 0 2px 4px rgba(0,0,0,0.04); }
.toc-item.cur .toc-title { color: #ff6218; font-weight: 600; }

/* 续读码页面 */
.rc-body { flex: 1; overflow-y: auto; background: #fff; padding: 30px 24px; }
.rc-tip { font-size: 15px; color: #666; line-height: 1.6; margin-bottom: 20px; }
.rc-code-card { background: #f7f8fa; border-radius: 12px; padding: 24px 16px; text-align: center; }
.rc-code { font-size: 19px; font-weight: 600; color: #222; letter-spacing: 0.5px; font-family: Menlo, Consolas, monospace; line-height: 1.8; word-break: break-all; }
.rc-copy { display: inline-block; margin-top: 16px; padding: 8px 24px; border-radius: 20px; background: #ff6218; color: #fff; font-size: 18px; cursor: pointer; }
.rc-restore { margin-top: 24px; }
.rc-restore-title { font-size: 15px; font-weight: 500; color: #333; margin-bottom: 10px; }
#view-resumecode .title { font-size: 22px; }
.rc-restore-row { display: flex; gap: 10px; }
.rc-restore-row input { flex: 1; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none; background: #f7f8fa; min-width: 0; }
.rc-restore-btn { flex-shrink: 0; padding: 10px 20px; border-radius: 8px; background: #e6f6f0; color: #0DB369; font-size: 14px; font-weight: 500; cursor: pointer; }

/* 阅读中目录：左侧白色侧边栏（番茄小说设计） */
.toc-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 275; display: none; }
.toc-mask.active { display: block; }
.toc-sidebar { position: absolute; top: 0; left: 0; width: 78%; max-width: 360px; height: 100%; background: #fff; z-index: 280; visibility: hidden; transform: translateX(-100%); transition: transform 0.28s ease, visibility 0s linear 0.28s; display: flex; flex-direction: column; box-shadow: 4px 0 16px rgba(0,0,0,0.12); }
.toc-sidebar.active { visibility: visible; transform: translateX(0); transition: transform 0.28s ease; }
.toc-sidebar-header { height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.toc-sidebar-title { font-size: 16px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-sidebar-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.toc-sidebar-close { font-size: 18px; color: #999; cursor: pointer; padding: 4px; }
.toc-sidebar-list { flex: 1; overflow-y: auto; padding: 0 16px 20px; scrollbar-width: none; }
.toc-sidebar-list::-webkit-scrollbar { display: none; }
/* 侧边栏内卷标题不吸顶：随内容滚动，避免滚动到顶部时被白底标题挡住章节内容 */
.toc-sidebar-list .toc-vol-header { position: static; margin: 0 -16px; padding: 14px 16px 6px; }

/* 通用确认弹窗（删除等操作） */
.modal-mask {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.modal-box {
    width: 80%;
    max-width: 340px;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    animation: modalFadeIn 0.2s ease-out;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.modal-content { padding: 30px 24px 20px 24px; text-align: center; }
.modal-title { font-size: 19px; font-weight: 600; color: #222; margin-bottom: 16px; letter-spacing: 1px; }
.modal-desc { font-size: 15px; color: #666; line-height: 1.6; text-align: center; }
.modal-divider { height: 1px; background-color: #eee; width: 100%; }
.modal-actions { display: flex; height: 54px; align-items: stretch; }
.modal-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    outline: none;
    font-family: inherit;
}
.modal-btn:active { background-color: #f5f5f5; }
.btn-cancel { color: #333; }
.btn-delete { color: #FF7F50; }
.btn-divider { width: 1px; background-color: #eee; }