/**
 * bookshelf.css — JBook 书架独立页面专用样式
 *
 * 命名空间：所有 class 以 .bs- 为前缀，与 reader.css 完全隔离。
 * CSS 变量：直接复用 reader-theme.css 中的 --light-* / --dark-* 变量。
 *
 * 布局：三栏（Flex Row）
 *   .bs-shell
 *   ├── #bs-toolbar      左侧竖向工具栏（固定宽度，可折叠）
 *   ├── #bs-func-column  主区（flex:1，内含 toc + content）
 *   │   ├── #bs-toc      分类树（固定宽度，可折叠，可拖拽调宽）
 *   │   └── #bs-content  书籍区（flex:1）
 *   └── #bs-right-panel  右面板（固定宽度，可折叠，可拖拽调宽）
 */

/* ─────────────────────────────────────────────────────────────
   1. 全局 Reset & 根容器
───────────────────────────────────────────────────────────── */
*, *::before, *::after {box-sizing: border-box;}
body {margin:0; height:100vh; display:flex; font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif,"宋体"; font-size:14px;}
body,p,th,td,h1,h2,h3,h4,ul,li,dl,dt,dd,form {margin:0; padding:0; font-weight:normal;}
.bs-shell {display: flex; width: 100%; height: 100vh; overflow: hidden; font-family: 'Segoe UI', system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 14px;}

/* 亮色主题下的默认文字/背景（继承自 reader-theme.css 变量） */
.bs-shell.theme-light {color: var(--light-color); background-color: var(--light-background-color);}
.bs-shell.theme-dark {color: var(--dark-color); background-color: var(--dark-background-color);}

/* ─────────────────────────────────────────────────────────────
   2. 左侧工具栏
───────────────────────────────────────────────────────────── */
.bs-toolbar {flex: 0 0 54px; width: 54px; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--light-toc-item-split); background-color: var(--toolbar-background-color); transition: width 220ms ease, flex-basis 220ms ease; z-index: 10;}

/* 折叠态：工具栏隐藏（!important 覆盖拖拽恢复设置的行内样式） */
.bs-shell.toolbar-collapsed .bs-toolbar {width: 0 !important; flex-basis: 0 !important;}

/* 折叠时显示的展开按钮 */
.bs-toolbar-expand {position: fixed; top: 12px; left: 4px; z-index: 20; width: 32px; height: 32px; border: none; border-radius: 6px; background: var(--toolbar-background-color); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.15);}
.bs-toolbar-expand[hidden] {display: none;}

/* 工具栏标题行（仅含折叠按钮） */
.bs-toolbar-title {display: flex; align-items: center; justify-content: flex-end; height: 36px; flex-shrink: 0; padding: 0 4px; background-color: var(--light-titlebar-background-color);}

/* 工具栏主体（按钮列表） */
.bs-toolbar-body {flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 3px; padding: 6px 0 10px; overflow-y: auto; overflow-x: hidden;}

/* 工具栏底部（上传按钮） */
.bs-toolbar-footer {display: flex; flex-direction: column; align-items: center; padding: 6px 0 40px; /* border-top: 1px solid var(--light-toc-item-split); */}

/* 工具栏底部用户头像 */
.bs-toolbar-user-avatar {display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #4a90d9; color: #fff; overflow: hidden; line-height: 0;}
.bs-toolbar-user-avatar-img {width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: none; outline: none;}

/* 工具栏按钮（与 reader.html 的 .toolbar-box 保持一致的视觉） */
.bs-toolbar-btn {width: 48px; height: 48px; margin: 0 auto; border: none; border-radius: 8px; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--light-color); transition: background-color 150ms ease; flex-shrink: 0;}
.bs-toolbar-btn:hover {background-color: var(--light-toc-item-hover); border: 1px solid var(--light-toolbar-border-color);}
.bs-toolbar-btn.active {background-color: var(--light-toc-item-hover); color: #1d4ed8;}
.bs-toolbar-btn .material-symbols-rounded {font-size: 26px; pointer-events: none;}

/* 标签文字默认隐藏（竖排图标模式下空间不足），展开模式下显示 */
.bs-toolbar-label {font-size: 10px; line-height: 1; pointer-events: none; display: none;}
.bs-toolbar-close {width: 28px; height: 28px; border: none; border-radius: 4px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--light-color);}
.bs-toolbar-close:hover {background-color: var(--light-toc-item-hover);}
.bs-toolbar-close .material-symbols-rounded {font-size: 18px;}

/* ─────────────────────────────────────────────────────────────
   3. 主区 #bs-func-column（TOC + 书籍内容区）
───────────────────────────────────────────────────────────── */
.bs-func-column {flex: 1 1 0; min-width: 0; display: flex; overflow: hidden;}

/* ─────────────────────────────────────────────────────────────
   4. TOC 分类树
───────────────────────────────────────────────────────────── */
.bs-toc {position: relative; flex: 0 0 250px; width: 250px; min-width: 0; max-width: 480px; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--light-toc-item-split); background-color: var(--light-toc-background-color, #f0f0f0); transition: width 220ms ease, flex-basis 220ms ease;}

/* toc 折叠态（!important 覆盖拖拽/恢复设置的行内样式） */
.bs-shell.toc-collapsed .bs-toc {width: 0 !important; flex-basis: 0 !important;}

/* toc 拖拽手柄 */
.bs-toc-resize-handle {position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; display: flex; align-items: center; justify-content: center; z-index: 5; transition: background-color 150ms ease;}
.bs-toc-resize-handle:hover {background-color: rgba(0,0,0,.08);}
.bs-handle-icon {font-size: 16px; opacity: 0.4; pointer-events: none;}

/* toc 标题栏 */
.bs-toc-titlebar {display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 8px 0 12px; flex-shrink: 0; background-color: var(--light-titlebar-background-color); border-bottom: 1px solid var(--light-toc-item-split);}
.bs-panel-label {font-size: 12px; font-weight: 500; opacity: 0.7;}
.bs-panel-close {width: 26px; height: 26px; border: none; border-radius: 4px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--light-color);}
.bs-panel-close:hover {background-color: var(--light-toc-item-hover);}
.bs-panel-close .material-symbols-rounded {font-size: 16px;}

/* toc 树内容区 */
.bs-toc-body {flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0 12px; scrollbar-width: thin;}

/* toc 加载占位 */
.bs-toc-loading {display: flex; align-items: center; gap: 6px; padding: 16px 14px; font-size: 13px; opacity: 0.6;}

/* ── toc 树节点样式 ── */

/* 固定根节点（全部书籍）和 Section Header（不可点击标题行） */
.bs-toc-root-node,
.bs-toc-section-header {display: flex; align-items: center; padding: 6px 16px 6px 4px; font-size: 13px; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.bs-toc-root-node:hover {background-color: var(--light-toc-item-hover);}
.bs-toc-root-node.active {background-color: var(--light-toc-item-hover); color: #1d4ed8; font-weight: 500;}

/* Section Header（分类/标签/来源目录/智能分组的区域标题） */
.bs-toc-section-header {margin-top: 8px; padding: 4px 12px 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.75; justify-content: space-between; cursor: default; display: flex; align-items: center; justify-content: space-between;}

/* Section Header 旁的「+」添加按钮 */
.bs-toc-section-add {width: 24px; height: 24px; border: none; border-radius: 4px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 150ms;}
.bs-toc-section-header:hover .bs-toc-section-add {opacity: 0.7;}
.bs-toc-section-add:hover {background-color: var(--light-toc-item-hover); opacity: 1 !important;}
.bs-toc-section-add .material-symbols-rounded {font-size: 15px;}

/* section 操作按钮组（toggle + add，默认隐藏，hover 时显示） */
.bs-toc-section-actions {display: flex; gap: 2px; align-items: center;}
.bs-toc-section-header .bs-toc-section-actions {opacity: 0; transition: opacity 0.15s;}
.bs-toc-section-header:hover .bs-toc-section-actions {opacity: 1;}
.bs-toc-section-toggle {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; border-radius: 4px; background: transparent; cursor: pointer; color: #6b7280;}
.bs-toc-section-toggle:hover {background-color: var(--light-toc-item-hover); color: #374151;}
.bs-toc-section-toggle .material-symbols-rounded {font-size: 18px;}

/* 普通树节点 */
.bs-toc-node {position: relative; display: flex; align-items: center; padding: 5px 15px 5px 12px; font-size: 13px; cursor: pointer; user-select: none; white-space: nowrap; overflow: visible; border-radius: 0; transition: background-color 100ms;}
.bs-toc-node:hover {background-color: var(--light-toc-item-hover);}
.bs-toc-node.active {background-color: var(--light-toc-item-hover); color: #1d4ed8; font-weight: 500;}

/* 展开/折叠图标 */
.bs-toc-expand-icon {width: 16px; height: 16px; margin-right: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; opacity: 0.5; transition: transform 150ms;}
.bs-toc-node.expanded > .bs-toc-expand-icon {transform: rotate(90deg);}

/* 节点图标（文件夹/标签/目录） */
.bs-toc-node-icon {font-size: 15px; margin-right: 5px; flex-shrink: 0; opacity: 0.75;}

/* 节点名称 */
.bs-toc-node-name {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;}

/* 节点书籍数量 */
.bs-toc-node-count {font-size: 11px; opacity: 0.9; margin-left: 4px; flex-shrink: 0;}

/* 节点悬浮操作按钮组（hover 时显示） */
.bs-toc-node-actions {display: flex; gap: 1px; opacity: 0; transition: opacity 150ms; flex-shrink: 0;}
.bs-toc-node:hover .bs-toc-node-actions {opacity: 1;}
.bs-toc-node-action {width: 22px; height: 22px; border: none; border-radius: 4px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--light-color);}
.bs-toc-node-action:hover {background-color: rgba(0,0,0,.12);}
.bs-toc-node-action .material-symbols-rounded {font-size: 14px;}

/* 子树容器（折叠/展开动画） */
.bs-toc-subtree {overflow: hidden;}
.bs-toc-subtree.collapsed {display: none;}

/* 分隔线 */
.bs-toc-divider {height: 1px; background-color: var(--light-toc-item-split); margin: 4px 0; opacity: 0.5;}

/* 就地输入框（新建/重命名节点时） */
.bs-toc-inline-input {flex: 1; border: 1px solid #1d4ed8; border-radius: 4px; padding: 1px 6px; font-size: 13px; outline: none; background: #fff; min-width: 0;}

/* 旋转动画（loading spinner） */
@keyframes bs-spin {to {transform: rotate(360deg);}}
.bs-spin {display: inline-block; animation: bs-spin 1s linear infinite;}

/* ─────────────────────────────────────────────────────────────
   5. 书籍内容区 #bs-content
───────────────────────────────────────────────────────────── */
.bs-content {flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden;}

/* 顶部搜索/状态/排序栏 */
.bs-topbar {display: flex; align-items: center; gap: 12px; padding: 4px 24px 4px 14px; border-bottom: 1px solid var(--light-toc-item-split); flex-shrink: 0; flex-wrap: wrap;}

/* 搜索框（旧版样式） */
.search-box {display: flex; align-items: center; background: #fff; border: 1px solid #e0e0e0; border-radius: 24px; padding: 8px 16px; flex: 1; min-width: 150px; max-width: 300px;}
.search-box .material-symbols-rounded {color: #999; margin-right: 8px; font-size: 20px;}
.search-box input {border: none; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--light-color);}
.search-box input::placeholder {color: #999;}
.search-clear {visibility: hidden; color: #999; cursor: pointer; user-select: none; flex-shrink: 0; font-size: 18px;}
.search-clear:hover {color: #333;}
.search-clear[hidden] {visibility: hidden;}
.search-clear:not([hidden]) {visibility: visible;}

/* 顶栏按钮（旧版样式） */
.btn {padding: 8px 16px; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.2s ease; flex-shrink: 0;}
.btn .material-symbols-rounded {font-size: 18px;}
.btn[hidden] {display: none;}
.btn-upload {background: #4CAF50; color: white;}
.btn-upload:hover {background: #45a049; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(76,175,80,.3);}
.btn-preload-all {background: #FF9800; color: white;}
.btn-preload-all:hover {background: #f57c00; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,152,0,.3);}
.btn-preload-all:disabled {opacity: .6; cursor: not-allowed; transform: none; box-shadow: none;}
.btn-manage {background: #2196F3; color: white;}
.btn-manage:hover {background: #1976D2; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(33,150,243,.3);}
.btn-close-bs {background: #757575; color: white;}
.btn-close-bs:hover {background: #616161; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(117,117,117,.3);}

/* compact 书架「查看全部」链接 */
.bs-facet-all-link {color: var(--bs-primary, #4a90d9); text-decoration: none; font-size: 12px;}
.bs-facet-all-link:hover {text-decoration: underline;}

/* 按钮组（右对齐） */
.bs-topbar-actions {display: flex; align-items: center; gap: 18px; margin-left: auto; flex-shrink: 0;}

/* 统计信息 */
.bookshelf-stats {font-size: 13px; color: #666; flex: none; white-space: nowrap;}

/* 排序下拉 */
.bs-sort-select {border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 6px; background: transparent; font-size: 12px; color: inherit; padding: 3px 6px; height: 28px; cursor: pointer; outline: none; margin-left: 30px; flex-shrink: 0;}

/* 列数调节：按钮 + 弹出面板 */
.bs-column-slider-wrap {position: relative; flex-shrink: 0;}
.bs-column-slider-btn {display: flex; align-items: end; gap: 4px; border: none; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--light-color);}
.bs-column-slider-btn:hover {background: var(--light-toc-item-hover);}
.bs-column-slider-icon {font-size: 18px; opacity: 0.6;}
.bs-column-slider-value {font-size: 13px; opacity: 0.85; min-width: 14px; text-align: center;}

/* 弹出面板 */
.bs-column-popup {position: absolute; top: 100%; right: 0; z-index: 100; margin-top: 4px; background: #fff; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);}
.bs-column-popup[hidden] {display: none;}
.bs-column-popup-inner {display: flex; align-items: center; gap: 8px; padding: 10px 14px; white-space: nowrap;}
.bs-column-popup-label {font-size: 12px; opacity: 0.7;}
.bs-column-popup-val {font-size: 12px; font-weight: 600; min-width: 18px; text-align: center;}
.bs-column-slider {width: 80px; height: 4px; accent-color: #1d4ed8; cursor: pointer;}

/* 批量操作栏（在 #bs-content 流中不随滚动，负 margin 浮在书籍区上方） */
.bs-batch-bar {display: flex; align-items: center; gap: 8px; padding: 6px 14px; background-color: #e5e7eb; color: #374151; font-size: 13px; flex-shrink: 0; border-bottom: 1px solid #d1d5db; margin-bottom: -40px; position: relative; z-index: 10;}
.bs-batch-bar[hidden] {display: none;}
.bs-batch-action {padding: 4px 10px; border: 1px solid #9ca3af; border-radius: 6px; background: transparent; color: #374151; font-size: 12px; cursor: pointer; transition: background-color 150ms;}
.bs-batch-action:hover {background-color: rgba(0,0,0,.06);}
#bs-batch-cancel {margin-left: 16px;}

/* 书籍区容器 */
.bs-books-area {flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; scrollbar-width: thin;}

/* 加载中 */
.bs-loading {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--light-color); opacity: 0.6;}
.bs-loading[hidden] {display: none;}
.bs-spinner {width: 36px; height: 36px; border: 3px solid rgba(0,0,0,.12); border-top-color: #1d4ed8; border-radius: 50%; animation: bs-spin 0.7s linear infinite;}

/* 空状态 */
.bs-empty {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 80px 20px; text-align: center; font-size: 20px; opacity: 0.75;}
.bs-empty[hidden] {display: none;}
.bs-empty .material-symbols-rounded {font-size: 60px;}
.bs-empty-hint {margin-top: 4px;}

/* ─────────────────────────────────────────────────────────────
   6. 书籍卡片（网格视图）
───────────────────────────────────────────────────────────── */

/* 卡片操作条：浮动在封面顶部，图标默认靠右 */
.bs-card-actions {position: absolute; top: 0px; right: 4px; left: 4px; display: flex; align-items: center; justify-content: flex-end; padding: 0px 4px; z-index: 2;}

/* 批量模式时 checkbox 显示，改为左右分开排列 */
.bs-shell.batch-mode .bs-card-actions {justify-content: space-between;}

/* 右侧图标组（flx 行，紧凑排列） */
.bs-card-actions-right {display: flex; align-items: center; gap: 1px;}
.bs-card-action {width: 24px; height: 24px; border: none; border-radius: 4px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--light-color, #333); opacity: 0.85; transition: opacity 0.15s, background 0.15s;}
.bs-card-action:hover {opacity: 1; background: rgba(0,0,0,0.08);}
.bs-card-action .material-symbols-rounded {font-size: 18px; color: #374151; /* 白色光晕：浅底时几乎不可见，深底时衬托图标 */ text-shadow: 0 0 3px #fff, 0 0 2px #fff;}

/* 收藏按钮特殊态：已收藏时填充红色 */
.bs-card-action-fav.is-fav .material-symbols-rounded,
#bs-rp-fav-icon.is-fav {font-variation-settings: 'FILL' 1; color: #e53935; opacity: 1;}
.bs-books-grid {display: grid; gap: 16px;}
.bs-books-grid[hidden] {display: none;}
.bs-book-card {cursor: pointer; border-radius: 8px; padding: 8px; transition: background-color 120ms; position: relative;}
.bs-book-card:hover {background-color: var(--light-toc-item-hover);}
.bs-book-card.selected {background-color: #dbeafe; outline: 2px solid #1d4ed8;}

/* 封面外层（保持宽高比，用于叠加状态徽章） */
.bs-book-cover-wrap {position: relative; margin-bottom: 8px;}
.bs-book-cover {position: relative; width: 100%; aspect-ratio: 1 / 1.414; background-color: #f5f5f5; border-radius: 4px; overflow: hidden; isolation: isolate; box-shadow: 0 3px 10px rgba(0,0,0,.15); transition: transform 200ms ease, box-shadow 200ms ease; display: flex; align-items: center; justify-content: center;}
.bs-book-cover img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.bs-book-cover .bs-book-cover-placeholder {position: relative; z-index: 0; font-size: 42px; opacity: 0.3;}
.bs-book-card:hover .bs-book-cover {transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,.22);}

/* ── 预加载状态区（封面右下角浮动）── */
.bs-book-status-bar {position: absolute; bottom: 12px; right: 10px; display: flex; align-items: center; gap: 4px;}
.bs-preload-btn {display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px; font-size: 11px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.18); color: #444; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; line-height: 1.5; box-shadow: 0 1px 4px rgba(0,0,0,0.18);}
.bs-preload-btn:hover {background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.28); color: #1976D2;}
.bs-preload-btn .material-symbols-rounded {font-size: 14px;}

/* 预加载状态徽标 */
.bs-preload-badge {display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; font-size: 11px; border-radius: 10px; font-weight: 500; /* line-height: 1.5; */ cursor: default; user-select: none;}
.bs-preload-badge .material-symbols-rounded {font-size: 13px;}
.bs-preload-badge.badge-loading {background: #e3f0fb; color: #2196F3; border: 1px solid #90CAF9;}
.bs-preload-badge.badge-ready {background: #d0ffd9; color: #388E3C; border: 1px solid #A5D6A7; cursor: default;}
.bs-preload-badge.badge-error {background: #ffebee; color: #c62828; border: 1px solid #EF9A9A; cursor: pointer;}
.bs-preload-badge.badge-error:hover {background: #fce4e4;}
@keyframes spin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}

/* 悬浮"打开"按钮 */
.bs-book-open-btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 6px 14px; border: none; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity 150ms; white-space: nowrap; pointer-events: none;}
.bs-book-card:hover .bs-book-open-btn {opacity: 1; pointer-events: auto;}

/* 收藏状态由 actions 条中的 ❤️ 图标表示，不再需要独立徽章 */

/* 批量模式复选框（作为 actions 条内行内元素） */
.bs-book-checkbox {width: 16px; height: 16px; display: none; accent-color: #1d4ed8; cursor: pointer; flex-shrink: 0; margin: 0;}
.bs-shell.batch-mode .bs-book-checkbox {display: inline-block;}

/* 书名+元数据容器（点击区域统一覆盖，避免间隙点不中） */
.bs-book-info {cursor: pointer;}

/* ── 卡片下部上传进度条（预加载方案 🆕：浮于封面底部，不占高度）── */
.bs-card-upload-bar {position: absolute; left: 0; right: 0; bottom: 3px; height: 8px; border-radius: 4px; background: rgba(243,177,92,.5); border:1px solid rgba(255,255,266,0.5); overflow: visible; z-index: 2;}
.bs-card-upload-fill {height: 100%; width: 0%; border-radius: 4px; background: #10a2fb; transition: width .2s;}
.bs-card-upload-pct {position: absolute; right: 45px; top: -17px; font-size: 13px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6);}
.bs-book-title {font-size: 12px; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 34px; color: var(--light-color);}

/* 副信息（格式/目录/大小）——flex 布局，gap 间距替代 ::after 分隔符 */
.bs-book-meta {display: flex; align-items: baseline; gap: 6px; padding: 0 5px 0 0px; margin-top: 3px; font-size: 11px; opacity: 0.5; overflow: hidden;}
.bs-book-meta-ext {flex-shrink: 0; width: 34px;}
.bs-book-meta-dir {flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bs-book-meta-size {flex-shrink: 0; width: 48px; text-align: right;}

/* ─────────────────────────────────────────────────────────────
   7. 书籍行（列表视图）
───────────────────────────────────────────────────────────── */
.bs-books-list {display: flex; flex-direction: column; gap: 1px;}
.bs-books-list[hidden] {display: none;}
.bs-book-row {display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background-color 120ms;}
.bs-book-row:hover {background-color: var(--light-toc-item-hover);}
.bs-book-row.selected {background-color: #dbeafe;}
.bs-book-row-cover {width: 36px; height: 50px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: #e0e0e0;}
.bs-book-row-info {flex: 1; min-width: 0;}
.bs-book-row-title {font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bs-book-row-author {font-size: 11px; opacity: 0.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bs-book-row-ext {font-size: 11px; opacity: 0.5; width: 40px; flex-shrink: 0; text-align: center;}
.bs-book-row-dir {font-size: 11px; opacity: 0.5; width: 80px; flex-shrink: 0; text-align: left; overflow: hidden; text-overflow: ellipsis;}
.bs-book-row-size {font-size: 11px; opacity: 0.5; width: 60px; flex-shrink: 0; text-align: right;}
.bs-book-row-date {font-size: 11px; opacity: 0.5; width: 80px; flex-shrink: 0; text-align: right;}
.bs-book-row-tags {display: flex; gap: 4px; flex-wrap: wrap;}

/* ─────────────────────────────────────────────────────────────
   8. 标签 Chip
───────────────────────────────────────────────────────────── */
.bs-tag-chip {display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background-color: #e1e2e7; color: var(--light-color); cursor: default; white-space: nowrap;}
.bs-tag-chip .bs-chip-remove {border: none; background: transparent; cursor: pointer; padding: 0; line-height: 1; font-size: 12px; opacity: 0.6; display: flex; align-items: center;}
.bs-tag-chip .bs-chip-remove:hover {opacity: 1;}

/* ─────────────────────────────────────────────────────────────
   9. 分页控件
───────────────────────────────────────────────────────────── */
.bs-pagination {display: flex; align-items: center; justify-content: center; padding: 10px 14px; flex-shrink: 0; gap: 4px; flex-wrap: wrap;}
.bs-page-btn {min-width: 44px; height: 32px; padding: 0 4px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 6px; background: transparent; color: var(--light-color); font-size: 13px; cursor: pointer; transition: background-color 120ms; flex-shrink: 0; text-align: center;}
.bs-page-btn:hover:not(:disabled) {background-color: var(--light-toc-item-hover);}
.bs-page-btn.active {background-color: #1d4ed8; color: #fff; border-color: #1d4ed8;}
.bs-page-btn:disabled {opacity: 0.4; cursor: not-allowed;}
.bs-page-info {font-size: 12px; opacity: 0.6; padding: 0 4px; flex-shrink: 0;}

/* 中间页码区：由 JS 动态设定宽度，避免挤到两侧按钮 */
.bs-page-nums {display: inline-flex; align-items: center; gap: 2px; justify-content: center; flex-shrink: 0;}

/* 页跳转输入框 */
.bs-page-goto-input {width: 48px; height: 28px; padding: 0 4px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; font-size: 12px; text-align: center; background: transparent; color: inherit;}
.bs-page-goto-btn {height: 28px; padding: 0 8px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; background: transparent; color: var(--light-color); font-size: 12px; cursor: pointer;}
.bs-page-goto-btn:hover {background-color: var(--light-toc-item-hover);}
.bs-page-size-select {height: 28px; padding: 0 4px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; font-size: 12px; background: transparent; color: inherit; cursor: pointer;}

/* ─────────────────────────────────────────────────────────────
   10. Right Panel（DOM 改用 reader tab 结构，样式继承 reader.css）
───────────────────────────────────────────────────────────── */

/* #search 由 reader.css 提供基础 flex:0 0 380px；bookshelf 改用 300px */
#search {flex: 0 0 300px; width: 300px; max-width: 500px;}
.bs-shell.rp-collapsed #search {width: 0 !important; flex-basis: 0 !important;}

/* 拖拽调宽时禁用 panel 动画 + 禁止选中（与 reader 一致） */
body.is-resizing {cursor: col-resize;}
body.is-resizing * {user-select: none !important;}
body.is-resizing .bs-toolbar,
body.is-resizing .bs-toc,
body.is-resizing #search {transition: none !important;}

/* 右面板折叠时显示的展开按钮 */
.bs-panel-edge-right {position: fixed; top: 0; right: 4px; z-index: 30; width: 32px; height: 28px; display: none; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 6px; font-size: 20px; cursor: pointer; user-select: none; background-color: var(--light-titlebar-background-color); color: var(--light-color); transition: background-color 150ms ease;}
.bs-panel-edge-right:hover {background-color: var(--light-toc-item-hover);}
.bs-shell.rp-collapsed .bs-panel-edge-right {display: flex;}
.bs-panel-edge-right .material-symbols-rounded {font-size: 18px;}

/* right-panel 拖拽手柄（左侧边缘） */
.bs-rp-resize-handle {position: absolute; top: 0; left: 0; width: 8px; height: 100%; cursor: col-resize; display: flex; align-items: center; justify-content: center; z-index: 5; transition: background-color 150ms;}
.bs-rp-resize-handle:hover {background-color: rgba(0,0,0,.08);}

/* 空提示（保留，适配 tab-pane 内边距） */

/* （书籍详情面板 .bs-rp-* 样式已移入 reader-shared.css 共享，2026-08-02） */

/* ── 标签管理面板（flow 卡片） ──────────────────────── */
.bs-rp-tagmgmt-header {display: flex; align-items: center; gap: 6px; padding: 6px 2px; border-bottom: 1px solid var(--light-border-color, #eee);}
.bs-rp-tagmgmt-input {flex: 1; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; background: transparent; font-size: 12px; color: var(--light-color); outline: none;}
.bs-rp-tagmgmt-input:focus {border-color: #1d4ed8;}
.bs-rp-tagmgmt-add {display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; background: transparent; font-size: 12px; cursor: pointer; color: var(--light-color); white-space: nowrap; flex-shrink: 0; opacity: 0.75; transition: opacity .12s, background .12s;}
.bs-rp-tagmgmt-add:hover {opacity: 1; background: rgba(0,0,0,0.05);}
.bs-rp-tagmgmt-tree {padding: 8px 2px; overflow-y: auto; flex: 1;}
.bs-rp-tagmgmt-loading {padding: 24px; text-align: center; color: #999; font-size: 13px;}
.bs-rp-tagmgmt-flow {display: flex; flex-wrap: wrap; gap: 2px; align-content: start;}
.bs-rp-tagmgmt-card {display: flex; align-items: center; gap: 4px; width: 130px; height: 30px; max-width: 130px; min-width: 0; padding: 3px 6px; border-radius: 4px; cursor: default; transition: background .12s; overflow: hidden;}
.bs-rp-tagmgmt-card:hover {background: rgba(0,0,0,0.05);}
.bs-rp-tagmgmt-label {font-size: 13px; color: var(--light-color, #333); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;}
.bs-rp-tagmgmt-card-actions {display: flex; gap: 1px; flex-shrink: 0; visibility: hidden;}
.bs-rp-tagmgmt-card:hover .bs-rp-tagmgmt-card-actions {visibility: visible;}
.bs-rp-tagmgmt-card-btn {display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; border-radius: 3px; background: transparent; cursor: pointer; color: #888; transition: background .12s, color .12s;}
.bs-rp-tagmgmt-card-btn:hover {background: rgba(0,0,0,0.08); color: #333;}
.bs-rp-tagmgmt-card-btn .material-symbols-rounded {font-size: 14px;}

/* 待确认删除状态：确认按钮高亮 */
.bs-rp-tagmgmt-card.is-delete-pending .bs-rp-tagmgmt-del-btn {visibility: visible; color: #dc2626; background: rgba(220,38,38,0.32);}
.bs-rp-tagmgmt-card.is-delete-pending .bs-rp-tagmgmt-del-btn:hover {background: rgba(220,38,38,0.82); color: #b91c1c;}

/* 深色主题 */
.theme-dark .bs-rp-tagmgmt-card:hover {background: rgba(255,255,255,0.06);}
.theme-dark .bs-rp-tagmgmt-card-btn:hover {background: rgba(255,255,255,0.1); color: #ccc;}
.theme-dark .bs-rp-tagmgmt-card.is-delete-pending .bs-rp-tagmgmt-del-btn {color: #f87171; background: rgba(248,113,113,0.15);}

/* ── 分类管理面板（树形结构） ──────────────────────── */
.bs-rp-catmgmt-header {display: flex; align-items: center; gap: 6px; padding: 6px 2px; border-bottom: 1px solid var(--light-border-color, #eee);}
.bs-rp-catmgmt-input {flex: 1; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; background: transparent; font-size: 12px; color: var(--light-color); outline: none;}
.bs-rp-catmgmt-input:focus {border-color: #1d4ed8;}
.bs-rp-catmgmt-add {display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; background: transparent; font-size: 12px; cursor: pointer; color: var(--light-color); white-space: nowrap; flex-shrink: 0; opacity: 0.75; transition: opacity .12s, background .12s;}
.bs-rp-catmgmt-add:hover {opacity: 1; background: rgba(0,0,0,0.05);}
.bs-rp-catmgmt-tree {padding: 4px 2px; overflow-y: auto; flex: 1;}
.bs-rp-catmgmt-loading {padding: 24px; text-align: center; color: #999; font-size: 13px;}
.bs-rp-catmgmt-tree-inner {display: flex; flex-direction: column;}

/* 树节点 */
.bs-rp-catmgmt-node-wrapper {display: flex; flex-direction: column;}
.bs-rp-catmgmt-node {display: flex; align-items: center; height: 28px; padding: 0 4px; border-radius: 4px; cursor: default; gap: 4px; transition: background .12s;}
.bs-rp-catmgmt-node:hover {background: rgba(0,0,0,0.05);}
.bs-rp-catmgmt-node.is-delete-pending {background: rgba(220,38,38,0.2);}
.bs-rp-catmgmt-expand-icon {width: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #888;}
.bs-rp-catmgmt-node-icon {font-size: 16px; opacity: 0.6; flex-shrink: 0;}
.bs-rp-catmgmt-node-name {flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--light-color, #333);}
.bs-rp-catmgmt-node-count {font-size: 11px; opacity: 0.5; margin-right: 2px; flex-shrink: 0;}
.bs-rp-catmgmt-node-actions {display: flex; gap: 1px; flex-shrink: 0; visibility: hidden;}
.bs-rp-catmgmt-node:hover .bs-rp-catmgmt-node-actions {visibility: visible;}
.bs-rp-catmgmt-node-action {display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; border-radius: 3px; background: transparent; cursor: pointer; color: #888; transition: background .12s, color .12s;}
.bs-rp-catmgmt-node-action:hover {background: rgba(0,0,0,0.08); color: #333;}
.bs-rp-catmgmt-node-action .material-symbols-rounded {font-size: 14px;}

/* 删除待确认状态：确认按钮高亮 */
.bs-rp-catmgmt-node.is-delete-pending .bs-rp-catmgmt-del-btn {visibility: visible; color: #dc2626; background: rgba(220,38,38,0.32);}
.bs-rp-catmgmt-node.is-delete-pending .bs-rp-catmgmt-del-btn:hover {background: rgba(220,38,38,0.82); color: #b91c1c;}

/* 删除选项行（内联展开） */
.bs-rp-catmgmt-delete-options {display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 8px 4px 28px; font-size: 12px; background: rgba(220,38,38,0.1); border-radius: 4px; margin: 2px 0;}
.bs-rp-catmgmt-delete-hint {font-weight: 600; color: #dc2626; width: 100%; margin-bottom: 2px;}
.bs-rp-catmgmt-delete-radio {display: flex; align-items: center; gap: 3px; cursor: pointer; font-size: 12px; color: #666; width: 100%;}

/* 最后一行 radio：按钮靠右 */
.bs-rp-catmgmt-delete-radio-last {display: flex; align-items: center; gap: 3px; width: 100%;}
.bs-rp-catmgmt-delete-btns {margin-left: auto; display: flex; gap: 4px; flex-shrink: 0;}
.bs-rp-catmgmt-delete-radio input[type="radio"] {margin: 0;}
.bs-rp-catmgmt-del-confirm {display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: 3px; background: #dc2626; cursor: pointer; color: #fff; transition: background .12s;}
.bs-rp-catmgmt-del-confirm:hover {background: #b91c1c;}
.bs-rp-catmgmt-del-confirm .material-symbols-rounded {font-size: 14px;}
.bs-rp-catmgmt-del-cancel {display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 3px; background: transparent; cursor: pointer; color: #888; transition: background .12s;}
.bs-rp-catmgmt-del-cancel:hover {background: rgba(0,0,0,0.05);}
.bs-rp-catmgmt-del-cancel .material-symbols-rounded {font-size: 14px;}

/* 子树折叠 */
.bs-rp-catmgmt-subtree.collapsed {display: none;}

/* 迁移父节点 Dialog 树 */
.bs-rp-catmgmt-move-body {flex: 1; overflow-y: auto; padding: 4px 0;}
.bs-rp-catmgmt-move-root {display: flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer; border-radius: 4px; font-size: 13px; transition: background .12s;}
.bs-rp-catmgmt-move-root:hover {background: rgba(0,0,0,0.04);}
.bs-rp-catmgmt-move-root.selected {background: rgba(29,78,216,0.1); color: #1d4ed8; font-weight: 600;}
.bs-rp-catmgmt-move-node-wrapper {display: flex; flex-direction: column;}
.bs-rp-catmgmt-move-node {display: flex; align-items: center; gap: 4px; padding: 5px 8px; cursor: pointer; border-radius: 4px; font-size: 13px; transition: background .12s;}
.bs-rp-catmgmt-move-node:hover:not(.is-disabled) {background: rgba(0,0,0,0.04);}
.bs-rp-catmgmt-move-node.selected {background: rgba(29,78,216,0.1); color: #1d4ed8; font-weight: 600;}
.bs-rp-catmgmt-move-node.is-disabled {opacity: 0.35; cursor: not-allowed;}
.bs-rp-catmgmt-move-subtree {display: flex; flex-direction: column;}

/* 深色主题：分类管理面板 */
.theme-dark .bs-rp-catmgmt-node:hover {background: rgba(255,255,255,0.06);}
.theme-dark .bs-rp-catmgmt-node-action:hover {background: rgba(255,255,255,0.1); color: #ccc;}
.theme-dark .bs-rp-catmgmt-node.is-delete-pending .bs-rp-catmgmt-del-btn {color: #f87171; background: rgba(248,113,113,0.15);}
.theme-dark .bs-rp-tagmgmt-card.is-delete-pending .bs-rp-tagmgmt-del-btn:hover {background: rgba(248,113,113,0.25); color: #fca5a5;}
.theme-dark .bs-rp-tagmgmt-input {border-color: #555; color: #ccc;}
.theme-dark .bs-rp-tagmgmt-input:focus {border-color: #3b82f6;}

/* ── 来源管理面板（srcmgmt）── */
.bs-rp-srcmgmt-section {}
.bs-rp-srcmgmt-section-header {display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 4px 4px; font-size: 13px; font-weight: 600; color: var(--light-color, #333);}
.bs-rp-srcmgmt-input-row {display: flex; align-items: center; gap: 6px; padding: 4px 2px;}
.bs-rp-srcmgmt-input {flex: 1; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; background: transparent; font-size: 12px; color: var(--light-color); outline: none;}
.bs-rp-srcmgmt-input:focus {border-color: #1d4ed8;}
.bs-rp-srcmgmt-add {display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; background: transparent; font-size: 12px; cursor: pointer; color: var(--light-color); white-space: nowrap; flex-shrink: 0; opacity: 0.75; transition: opacity .12s, background .12s;}
.bs-rp-srcmgmt-add:hover {opacity: 1; background: rgba(0,0,0,0.05);}
.bs-rp-srcmgmt-list {padding: 2px;}
.bs-rp-srcmgmt-loading,
.bs-rp-srcmgmt-empty {padding: 12px; text-align: center; color: #999; font-size: 12px;}
.bs-rp-srcmgmt-error {color: #dc2626;}
.bs-rp-srcmgmt-row {display: flex; align-items: center; height: 28px; padding: 0 4px; border-radius: 4px; gap: 4px; transition: background .12s;}
.bs-rp-srcmgmt-row:hover {background: rgba(0,0,0,0.05);}
.bs-rp-srcmgmt-row.is-delete-pending {background: rgba(220,38,38,0.2);}
.bs-rp-srcmgmt-row-icon {flex-shrink: 0; opacity: 0.6; font-size: 16px;}
.bs-rp-srcmgmt-row-icon-upload {color: #3b82f6;}
.bs-rp-srcmgmt-row-name {flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--light-color, #333);}
.bs-rp-srcmgmt-row-count {font-size: 11px; opacity: 0.5; margin-right: 2px; flex-shrink: 0;}
.bs-rp-srcmgmt-row-actions {display: flex; gap: 1px; flex-shrink: 0; visibility: hidden;}
.bs-rp-srcmgmt-row:hover .bs-rp-srcmgmt-row-actions {visibility: visible;}
.bs-rp-srcmgmt-row-action {display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; border-radius: 3px; background: transparent; cursor: pointer; color: #888; transition: background .12s, color .12s;}
.bs-rp-srcmgmt-row-action:hover {background: rgba(0,0,0,0.08); color: #333;}
.bs-rp-srcmgmt-row-action .material-symbols-rounded {font-size: 14px;}
.bs-rp-srcmgmt-row.is-delete-pending .bs-rp-srcmgmt-del-btn {visibility: visible; color: #dc2626; background: rgba(220,38,38,0.32);}
.bs-rp-srcmgmt-row.is-delete-pending .bs-rp-srcmgmt-del-btn:hover {background: rgba(220,38,38,0.82); color: #b91c1c;}
.bs-rp-srcmgmt-divider {border: none; border-top: 1px solid var(--light-border-color, #eee); margin: 8px 0;}

/* 深色主题 */
.theme-dark .bs-rp-srcmgmt-input {border-color: #555; color: #ccc;}
.theme-dark .bs-rp-srcmgmt-input:focus {border-color: #3b82f6;}
.theme-dark .bs-rp-srcmgmt-row:hover {background: rgba(255,255,255,0.06);}
.theme-dark .bs-rp-srcmgmt-row-action:hover {background: rgba(255,255,255,0.1); color: #ccc;}

/* （详情面板操作按钮 .bs-rp-actions / .bs-rp-action-btn / .bs-rp-save-bar 已移入 reader-shared.css 共享，2026-08-02） */

/* 统计信息（统一统计面板） */
.bs-rp-stats-content {display: flex; flex-direction: column; gap: 12px; padding: 8px 0;}

/* ── 概览卡片 2×2 网格 ── */
.bs-stats-overview {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.bs-stat-card {display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--light-toc-bg, #f8f9fa); border-radius: 8px; border: 1px solid var(--light-toc-item-split, #eee);}
.bs-stat-card-icon {font-size: 28px; flex-shrink: 0;}
.bs-stat-card-body {display: flex; flex-direction: column; min-width: 0;}
.bs-stat-card-label {font-size: 11px; opacity: 0.6; line-height: 1.4;}
.bs-stat-card-value {font-size: 20px; font-weight: 700; line-height: 1.3;}

/* ── 分区标题 ── */
.bs-stats-section {padding: 8px 0; border-top: 1px solid var(--light-toc-item-split, #eee);}
.bs-stats-section-title {font-size: 13px; font-weight: 600; margin-bottom: 8px; opacity: 0.8;}

/* ── 行 ── */
.bs-stats-row {display: flex; justify-content: space-between; align-items: center; padding: 5px 0;}
.bs-stat-label {font-size: 12px; opacity: 0.7;}
.bs-stat-value {font-size: 15px; font-weight: 600;}

/* ── 水平条形图 ── */
.bs-stats-bar-list {display: flex; flex-direction: column; gap: 6px;}
.bs-stat-bar-row {display: flex; align-items: center; gap: 8px; font-size: 12px;}
.bs-stat-bar-label {width: 50px; flex-shrink: 0; text-align: right; opacity: 0.7; font-weight: 500;}
.bs-stat-bar-track {flex: 1; height: 14px; background: var(--light-toc-bg, #f0f0f0); border-radius: 7px; overflow: hidden;}
.bs-stat-bar-fill {height: 100%; border-radius: 7px; background: linear-gradient(90deg, #3b82f6, #60a5fa); transition: width 0.4s ease; min-width: 2px;}
.bs-stat-bar-count {width: 88px; flex-shrink: 0; text-align: right; opacity: 0.6; white-space: nowrap;}
body[lang="en"] .bs-stat-bar-count,
body[lang="fr"] .bs-stat-bar-count,
body[lang="de"] .bs-stat-bar-count,
body[lang="es"] .bs-stat-bar-count {width: 110px;}
.bs-stats-empty {text-align: center; padding: 12px; color: #999; font-size: 12px;}

/* ── 操作历史面板 ── */

/* 关键：history tab-pane 使用 flex 列布局，与 search/bookmark 一致，确保底部分页条固定 */
.tab-pane[data-tab-pane='history'] {min-height:0;}
.tab-pane.active[data-tab-pane='history'] {display:flex; flex-direction:column; height:100%; min-height:0;}
.bs-history-panel {display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 0;}
.bs-history-summary-row {display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 22px; padding: 4px 0; border-bottom: 1px solid var(--light-toc-item-split, #eee);}
.bs-history-total {font-size: 12px; line-height: 1.4; opacity: .74;}
.bs-history-pagesize select {height: 16px; padding: 0 2px; border-radius: 2px; font-size: 12px; outline: none; border: 1px solid var(--light-toc-item-split, #ddd); background: #fff; color: #334155;}
.bs-history-pager {display: inline-flex; align-items: center; gap: 2px;}
.bs-history-pager-top {margin-left: auto;}
.bs-history-page-btn {display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; border-radius: 5px; background: transparent; padding: 0; cursor: pointer;}
.bs-history-page-btn .material-symbols-rounded {font-size: 20px; line-height: 20px; font-weight: 600;}
.bs-history-page-btn[disabled] {opacity: .35; pointer-events: none;}
.bs-history-page-indicator {display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 22px; padding: 0 4px; font-size: 12px; line-height: 1; opacity: .86; user-select: none;}
.bs-history-list {flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px 0;}
.bs-history-day-group {margin-bottom: 6px;}
.bs-history-day-label {font-size: 11px; font-weight: 600; opacity: .55; padding: 4px 2px; border-bottom: 1px solid var(--light-toc-item-split, #eee);}
.bs-history-item {display: flex; align-items: center; gap: 6px; padding: 6px 2px; font-size: 13px; line-height: 1.4; border-bottom: 1px solid transparent;}
.bs-history-item:hover {background: rgba(0,0,0,.03);}
.bs-history-item-icon {font-size: 18px; flex-shrink: 0; opacity: .65;}
.bs-history-item-text {flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bs-history-item-time {font-size: 11px; opacity: .5; flex-shrink: 0; white-space: nowrap;}
.bs-history-footer {display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--light-toc-item-split, #eee);}
.bs-history-pager-bottom {justify-content: center;}
.bs-history-cleanup-btn {font-size: 11px; opacity: .55; border: none; background: transparent; cursor: pointer; padding: 2px 6px; border-radius: 4px; white-space: nowrap;}
.bs-history-cleanup-btn:hover {opacity: .85; background: rgba(0,0,0,.05);}

/* ─────────────────────────────────────────────────────────────
   11. 对话框
───────────────────────────────────────────────────────────── */
.bs-overlay {position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100;}
.bs-overlay[hidden] {display: none;}

/* 打开书籍时的 loading 指示器（覆在遮罩上） */
.bs-open-loading {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 102; display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 0.5px;}
.bs-open-spinner {width: 40px; height: 40px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: bs-spin 0.7s linear infinite;}

/* 遮罩上的上传进度条（独立于模板进度条） */
.bs-open-progress-track {width: 240px; max-width: 80vw; height: 10px; border: 1px solid rgba(255,255,255,.75); border-radius: 5px; background: rgba(255,255,255,.55); overflow: hidden;}
.bs-open-progress-fill {height: 100%; width: 0%; border-radius: 5px; background: #10a2fb; transition: width .2s;}
.bs-dialog {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 101; width: 90%; max-width: 460px; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden;}
.bs-dialog[hidden] {display: none;}
.bs-dialog-header {display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;}
.bs-dialog-title {font-size: 15px; font-weight: 600; margin: 0;}
.bs-dialog-close {width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.5;}
.bs-dialog-close:hover {opacity: 1; background-color: #f3f4f6;}
.bs-dialog-close .material-symbols-rounded {font-size: 18px;}
.bs-dialog-body {padding: 16px; overflow-y: auto;}
.bs-dialog-desc {font-size: 13px; color: #6b7280; margin-bottom: 12px;}
.bs-dialog-footer {display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #e5e7eb; flex-shrink: 0;}

/* 导入目录 */
.bs-import-path-row {display: flex; gap: 8px; margin-bottom: 10px;}
.bs-import-path-list {list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 4px;}
.bs-import-path-item {display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #f3f4f6; border-radius: 6px; font-size: 12px;}
.bs-import-path-item span {flex: 1; word-break: break-all;}
.bs-import-path-remove {border: none; background: transparent; cursor: pointer; font-size: 15px; opacity: 0.5; padding: 0;}
.bs-import-path-remove:hover {opacity: 1;}

/* 复选框标签 */
.bs-checkbox-label {display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-bottom: 6px;}
.bs-radio-group {display: flex; flex-direction: column; gap: 6px;}
.bs-radio-label {display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer;}

/* （通用输入框 .bs-input 已移入 reader-shared.css 共享，2026-08-02） */

/* ─────────────────────────────────────────────────────────────
   12. 通用按钮
───────────────────────────────────────────────────────────── */
.bs-btn-primary {height: 32px; padding: 0 14px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 6px; background: transparent; color: var(--light-color); font-size: 13px; cursor: pointer; transition: background-color 150ms;}
.bs-btn-primary:hover {background-color: var(--light-toc-item-hover);}
.bs-btn-primary:disabled {opacity: 0.5; cursor: not-allowed;}
.bs-btn-secondary {height: 32px; padding: 0 14px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 6px; background: transparent; color: var(--light-color); font-size: 13px; cursor: pointer; transition: background-color 150ms;}
.bs-btn-secondary:hover {background-color: var(--light-toc-item-hover);}
.bs-btn-danger {height: 32px; padding: 0 14px; border: none; border-radius: 6px; background-color: #dc2626; color: #fff; font-size: 13px; cursor: pointer; transition: background-color 150ms;}
.bs-btn-danger:hover {background-color: #b91c1c;}

/* ─────────────────────────────────────────────────────────────
   13. 右键上下文菜单
───────────────────────────────────────────────────────────── */
.bs-context-menu {position: fixed; z-index: 300; min-width: 160px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); list-style: none; padding: 4px 0; margin: 0;}
.bs-context-menu[hidden] {display: none;}
.bs-menu-item {display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: background-color 100ms;}
.bs-menu-item:hover {background-color: #f3f4f6;}
.bs-menu-item .material-symbols-rounded {font-size: 16px; opacity: 0.7;}
.bs-menu-danger {color: #dc2626;}
.bs-menu-danger .material-symbols-rounded {color: #dc2626;}
.bs-menu-separator {height: 1px; background: #e5e7eb; margin: 3px 0;}

/* ─────────────────────────────────────────────────────────────
   15. Toast 提示
───────────────────────────────────────────────────────────── */
.bs-toast-container {position: fixed; bottom: 20px; right: 20px; z-index: 400; display: flex; flex-direction: column; gap: 8px; pointer-events: none;}
.bs-toast {padding: 10px 18px; border-radius: 8px; background: #1f2937; color: #fff; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.25); animation: bs-toast-in 0.25s ease; pointer-events: auto;}
.bs-toast.success {background: #16a34a;}
.bs-toast.error {background: #dc2626;}
.bs-toast.info  {background: #1d4ed8;}
.bs-toast.warning {background: #d97706;}
@keyframes bs-toast-in {from {transform: translateX(100px); opacity: 0;} to {transform: none; opacity: 1;}}

/* ─────────────────────────────────────────────────────────────
   16. 响应式
───────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    /* 屏幕较窄时 right-panel 默认折叠 */
    #search {flex-basis: 0; width: 0;}
}

@media (max-width: 900px) {
    /* 移动设备：toc overlay 模式（叠加在 content 上） */
    .bs-toc {position: absolute; top: 0; left: 0; height: 100%; z-index: 50; box-shadow: 4px 0 20px rgba(0,0,0,.15);}
    .bs-shell.toc-collapsed .bs-toc {transform: translateX(-100%); width: 240px; flex-basis: 240px;}
    /* 网格每行更多小列 */
    .bs-books-grid {grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;}
}

/* 上传对话框 */
.bs-upload-dropzone {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; border: 2px dashed #d1d5db; border-radius: 8px; background: #f9fafb; cursor: pointer; transition: border-color 150ms, background 150ms; text-align: center;}
.bs-upload-dropzone:hover,
.bs-upload-dropzone.dragover {border-color: #3b82f6; background: #eff6ff;}
.bs-upload-dropzone p {margin: 4px 0; font-size: 14px; color: #6b7280;}
.bs-upload-file-input {display: none;}
.bs-upload-file-list {margin-top: 8px; list-style: none; padding: 0;}
.bs-upload-file-list li {padding: 4px 8px; font-size: 13px; color: #374151; border-bottom: 1px solid #e5e7eb;}

/* URL 导入区域 */
.bs-upload-divider {display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: #9ca3af;}
.bs-upload-divider::before,
.bs-upload-divider::after {content: ''; flex: 1; height: 1px; background: #e5e7eb;}
.bs-upload-url-row {display: flex; gap: 8px; align-items: center; margin-bottom: 12px;}
.bs-upload-url-input {flex: 1; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; outline: none;}
.bs-upload-url-input:focus {border-color: #3b82f6;}
.bs-upload-url-btn {padding: 8px 16px; border-radius: 6px; border: none; font-size: 13px; cursor: pointer; white-space: nowrap;}
.bs-upload-url-btn:disabled {background: #e5e7eb; color: #9ca3af; cursor: default;}
.bs-upload-url-btn:not(:disabled) {background: #3b82f6; color: #fff;}
.bs-upload-url-btn:not(:disabled):hover {background: #2563eb;}

/* 进度条 */
.bs-upload-progress {margin-top: 8px;}
.bs-upload-progress-row {display: flex; align-items: center; gap: 8px;}
.bs-upload-progress-bar {flex: 1; height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden;}
.bs-upload-progress-fill {height: 100%; width: 0%; border-radius: 3px; background: #3b82f6; transition: width .2s;}
.bs-upload-progress-fill.done {background: #16a34a;}
.bs-upload-progress-fill.error {background: #ef4444;}
.bs-upload-progress-fill.indeterminate {width: 100%; background: linear-gradient(90deg, #3b82f6 30%, #93c5fd 50%, #3b82f6 70%); background-size: 200% 100%; animation: bs-progress-wave 1.5s ease-in-out infinite;}
@keyframes bs-progress-wave {0% {background-position: 200% 0;} 100% {background-position: -200% 0;}}
.bs-upload-progress-text {font-size: 12px; color: #6b7280; overflow-wrap: break-word; word-break: break-all;}

/* ── TOC 标签 chips ──────────────────────────────────── */
.bs-toc-tag-chips {display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 8px;}
.bs-toc-tag-empty {font-size: 12px; color: #999; padding: 6px 8px;}
.bs-toc-tag-chip {display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 10px; background: rgba(0,0,0,0.05); color: #555; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; user-select: none;}
.bs-toc-tag-chip:hover {background: rgba(29,78,216,0.1); color: #1d4ed8;}
.bs-toc-tag-chip.active {background: #1d4ed8; color: #fff;}
.theme-dark .bs-toc-tag-chip {background: rgba(255,255,255,0.08); color: #ccc;}
.theme-dark .bs-toc-tag-chip:hover {background: rgba(59,130,246,0.25); color: #93c5fd;}
.theme-dark .bs-toc-tag-chip.active {background: #3b82f6; color: #fff;}

/* ═══════════════════════════════════════════════════════
   语言切换下拉框（bookshelf 右面板标题栏）
═════════════════════════════════════════════════════════ */
.bs-lang-select {height: 22px; padding: 0 4px; margin-right: 6px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; background: transparent; font-size: 12px; color: inherit; cursor: pointer; outline: none; flex-shrink: 0;}
.bs-lang-select:hover {border-color: var(--light-control-hover-border-color, #999);}
.theme-dark .bs-lang-select {border-color: #555; color: #ccc;}

/* ═══════════════════════════════════════════════════════════════
   🆕 Phase 3：网络存储来源 & 弹窗样式
   （行结构复用 bs-rp-srcmgmt-row 系列类，见上方来源管理面板）
   ═══════════════════════════════════════════════════════════════ */

/* ── 协议类型标签（放在网络存储行的 count 位置）── */
.source-type-label {font-size: 11px; color: #888; background: #e0e0e0; border-radius: 3px; padding: 0 5px; line-height: 16px; flex-shrink: 0; margin-right: 2px;}
.theme-dark .source-type-label {color: #aaa; background: #444;}

/* ── 网络存储行可点击打开编辑 ── */
#bs-net-source-container .bs-rp-srcmgmt-row {cursor: pointer;}

/* ── 行级错误状态 ── */
.bs-rp-srcmgmt-row.source-error {border-left: 3px solid #dc2626; padding-left: 1px;}
.theme-dark .bs-rp-srcmgmt-row.source-error {border-left-color: #ef4444;}

/* ── 同步按钮旋转动画 ── */
.bs-rp-srcmgmt-row-action.spinning {animation: spin 1s linear infinite;}
@keyframes spin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}

/* ── 来源弹窗表单元素（替代内联 style）── */
.source-dialog-msg {margin: 16px 0;}
.src-dlg-row {display: flex; align-items: center;}
.src-dlg-select {flex: 1;}
.src-dlg-input {flex: 1;}
.src-dlg-resync-btn {flex-shrink: 0;}
.src-required-mark {color: red;}
.src-dlg-checkbox-row {display: flex; align-items: center; gap: 4px;}

/* ── 来源弹窗 ── */
.source-dialog-body {padding: 0 24px;}
.source-dialog-body .form-group {margin-bottom: 10px;}
.source-dialog-body .form-group label {display: block; font-size: 13px; font-weight: 500; margin-bottom: 3px; color: var(--text-color, #333);}
.source-dialog-body .form-group input:not([type="checkbox"]),
.source-dialog-body .form-group select {width: 100%; padding: 6px 8px; border: 1px solid var(--border-color, #d0d0d0); border-radius: 4px; font-size: 13px; background: var(--input-bg, #fff); color: var(--text-color, #333);}
.source-dialog-body .field-hint {font-size: 12px; opacity: 0.65; color: var(--text-color, #333); margin-left: 2px;}
.source-dialog-body .form-group input.is-invalid {border-color: #e74c3c; background-color: #ffe5e5;}
.source-test-result {padding: 8px; border-radius: 4px; font-size: 13px; line-height: 1.5; margin: 8px 0; background: #f0f0f0; min-height: calc(1.5em + 16px); max-height: calc(3em + 16px); overflow-y: auto;}
.source-sync-status {margin: 12px 0; padding: 8px 12px; border-radius: 6px; background: var(--card-bg, #f8f9fa); font-size: 13px; display: flex; align-items: center; gap: 8px;}
.source-sync-text {flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555;}
.source-pwd-toggle {font-size: 16px; cursor: pointer; margin-left: 4px; user-select: none;}
.dialog-footer {display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-color, #e0e0e0);}

/* ── M3：设置 Tab（section 折叠 + LLM Provider 管理）── */
.bs-rp-settings-content {display: flex; flex-direction: column; gap: 8px;}
.bs-rp-settings-section-title {display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 4px; user-select: none;}
.bs-rp-settings-section-title:hover {background: rgba(0,0,0,0.05);}
.bs-rp-settings-section-arrow {font-size: 16px; opacity: 0.6; flex-shrink: 0;}
.bs-rp-settings-section-body {padding: 4px 0;}
.bs-rp-settings-section-body.is-hidden {display: none;}
.bs-llm-row {display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px; border-radius: 4px; transition: background .12s; cursor: pointer;}
.bs-llm-row:hover {background: rgba(0,0,0,0.05);}
.bs-llm-row-disabled {opacity: 0.5;}
.bs-llm-row-icon {flex-shrink: 0; opacity: 0.7; font-size: 16px;}
.bs-llm-row-name {flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--light-color, #333);}
.bs-llm-default-badge {flex-shrink: 0; font-size: 10px; color: #fff; background: #3b82f6; border-radius: 8px; padding: 1px 6px;}
.bs-llm-row-model {flex-shrink: 0; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; opacity: 0.5;}
.bs-llm-row-actions {display: flex; gap: 2px; flex-shrink: 0;}
.bs-llm-row-action {display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; background: transparent; border-radius: 4px; cursor: pointer; opacity: 0.5;}
.bs-llm-row-action:hover {background: rgba(0,0,0,0.1); opacity: 1;}
.bs-llm-row-action .material-symbols-rounded {font-size: 15px;}
.bs-llm-model-radio-list {display: flex; flex-direction: column; gap: 4px;margin:10px;}
/* 关键：对抗 .source-dialog-body .form-group label {display:block}（特异性更高会覆盖 flex），
   必须 !important 让 label 保持 flex，否则 span 退化为 inline、width 无效 */
.bs-llm-model-radio {display: flex !important; align-items: center; gap: 6px; font-size: 12px; cursor: pointer;}
/* 模型名固定宽度（超出省略），让两个 radio 的圈圈严格垂直对齐 */
.bs-llm-model-radio span {width: 160px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/* 覆盖 .source-dialog-body .form-group input:not([type="checkbox"]) 的 width:100% 等规则——
   该宽泛规则误伤 radio（只排除 checkbox），导致 radio 被撑满换行；此处还原为原生大小 */
.bs-llm-model-radio input[type="radio"] {width: auto !important; padding: 0 !important; border: none !important; margin: 0 !important; flex-shrink: 0;}
.bs-llm-model-hint {font-size: 11px; opacity: 0.5;}
.bs-llm-checkbox-row {display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; margin-bottom: 4px;}
.llm-dialog-body {display: flex; flex-direction: column; gap: 10px;}