:root {
    /*reader frame */
    /*light*/
    --light-color: #222d33;
    --light-background-color: #eeeef4;
    --toolbar-background-color: #f0f0f0;
    --light-titlebar-background-color: #e9e7e3;/* #ddd; */
    --light-toc-background-color: #f0f0f0;
    --light-toc-item-hover: #e1e2e7;
    --light-toc-item-split: #b8b8b8;
    --light-toolbar-border-color: #b8b8b8;
    --light-search-tabs-border-color: #b8b8b8;
    --light-control-border-color: #c1c1c1;
    --light-control-hover-border-color: #83898d;    
    --light-control-input-border-color: #b8b8b8;


    /*dark*/
    --dark-color: #d0d3d8;
    --dark-background-color: #262628;
    --dark-toolbar-background-color: #262628;
    --dark-titlebar-background-color: #353537;
    --dark-toc-item-hover: #222e39;
    --dark-toc-item-split: #314546;
    --dark-toolbar-border-color: #314546;
    --dark-search-tabs-border-color: #314546;
    --dark-control-border-color: #4a5e5f;
    --dark-control-hover-border-color: #8a9b9c;
    --dark-control-input-border-color: #314546;


    /*book*/
    --light-book-color: #000;
    --dark-book-color: var(--dark-color);
    --light-book-main-background-clolr: #fff;
    --dark-book-main-background-clolr: #1c1c1d;
}

/* high-contrast-theme */
.theme-light{
    color: var(--light-color);
    background-color: var(--light-background-color);
    /* other high contrast styles */
}

/* dark-theme */
.theme-dark{
    color: var(--dark-color);
    background-color: var(--dark-background-color);
}

.theme-light .title-bar{background-color:var(--light-titlebar-background-color);border-bottom:1px solid var(--light-toc-item-split);}
.theme-dark .title-bar{background-color:var(--dark-titlebar-background-color);border-bottom:1px solid var(--dark-toc-item-split);}
.theme-dark #toolbar .title-bar{background-color:var(--dark-titlebar-background-color);border-bottom:1px solid var(--dark-toc-item-split);}

.theme-light .toc-body li span{border-bottom:1px solid var(--light-toc-item-split);}
.theme-dark .toc-body li span{border-bottom:1px solid var(--dark-toc-item-split);}

.theme-light #toc ,.theme-light #search {background-color: var(--light-toc-background-color);}
.theme-dark #toc, .theme-dark #search {background-color:var(--dark-book-main-background-clolr)}
.theme-light .resize-handle-toc, .theme-light .resize-handle-search {background-color: #e9e7e3;}
.theme-dark .resize-handle-toc, .theme-dark .resize-handle-search {background-color: #323236;}
.theme-light .resize-handle-toc:hover, .theme-light .resize-handle-search:hover {background-color: #ddd;}
.theme-dark .resize-handle-toc:hover, .theme-dark .resize-handle-search:hover {background-color: #444449;}
.theme-light #toc li span:hover ,.theme-light #search li:hover {background-color: var(--light-toc-item-hover);}
.theme-dark  #toc li span:hover , .theme-dark #search li:hover {background-color: var(--dark-toc-item-hover);}

.theme-light #toolbar {border-right: 1px solid var(--light-toc-item-split);background-color: var(--light-toc-background-color);}
.theme-dark #toolbar{border-right: 1px solid var(--dark-toc-item-split);background-color:var(--dark-toolbar-background-color)}
.theme-dark .toolbar-box {border: 1px solid var(--dark-toolbar-background-color);}
.theme-dark .toolbar-box:hover {border: 1px solid #717177;background-color: #303033;}
.theme-dark .toolbar-icon { filter: brightness(0) saturate(100%) invert(97%) sepia(85%) saturate(455%) hue-rotate(171deg) brightness(88%) contrast(87%);}


/* M6 修复项 F：译文/原文 iframe 主题外观合并单一来源（背景/边框） */
.theme-light .iframe-reader-content, .theme-light .tr-frame {
    background-color: var(--light-book-main-background-clolr);
    border: 1px solid #ddd;
}
.theme-dark .iframe-reader-content, .theme-dark .tr-frame {
    background-color: var(--dark-book-main-background-clolr);
    border: 1px solid #334;
    box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.1);
}

/* 滚动条 */
/* ── 2026-08-23 滚动条统一美化：原 middle-column 独有样式注释保留，便于回退 ──
.theme-light .middle-column::-webkit-scrollbar {width: 8px;height: 8px;}
.theme-light .middle-column::-webkit-scrollbar-thumb {background-color: #888;border-radius: 3px;}
.theme-light .middle-column::-webkit-scrollbar-track {background-color: #d1d2d3;}

.theme-dark .middle-column::-webkit-scrollbar {width: 8px;height: 8px;}
.theme-dark .middle-column::-webkit-scrollbar-thumb {background-color: #777;border-radius: 3px;}
.theme-dark .middle-column::-webkit-scrollbar-track {background-color: #455;}
*/

/* ── 阅读区两列滚动条（原文 middle-column + 译文 tr-pane）：平时近隐藏、滚动/hover 显示 ──
   显示条件 = 滚动中（.is-scrolling，reader-scroll-reveal.js 加类）或 鼠标悬停到 thumb
   （供拖动滚动条）；滚动中 hover thumb 变深。平时 thumb 极淡（约 8%）保证可被 hover 命中。
   注意：各状态分条独立声明——选择器列表若混入一条引擎不支持的级联（如
   ::-webkit-scrollbar:hover::-webkit-scrollbar-thumb）会拖累整条规则被丢弃，故不混写。
   Chromium/WebKit 用 ::-webkit-scrollbar；Firefox 用 @-moz-document + scrollbar-width/color 隔离。 */
/* light：槽位 8px */
.theme-light .middle-column::-webkit-scrollbar,
.theme-light .tr-pane::-webkit-scrollbar {width: 8px;height: 8px;}
/* light：平时极淡（非全透明——Chromium 对全透明 thumb 不做 hover 命中，极淡保证可 hover 到并拖动） */
.theme-light .middle-column::-webkit-scrollbar-thumb,
.theme-light .tr-pane::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.10);border-radius: 4px;}
/* light：滚动中显示淡色 */
.theme-light .middle-column.is-scrolling::-webkit-scrollbar-thumb,
.theme-light .tr-pane.is-scrolling::-webkit-scrollbar-thumb {background-color: #888;}
/* light：hover thumb 显示淡色（供拖动） */
.theme-light .middle-column::-webkit-scrollbar-thumb:hover,
.theme-light .tr-pane::-webkit-scrollbar-thumb:hover {background-color: #888;}
/* light：hover 滚动条条带（sb-hover，JS 检测鼠标在右缘条带内）→ thumb 显示淡色 */
.theme-light .middle-column.sb-hover::-webkit-scrollbar-thumb,
.theme-light .tr-pane.sb-hover::-webkit-scrollbar-thumb {background-color: #888;}
/* light：滚动中 hover thumb 加深 */
.theme-light .middle-column.is-scrolling::-webkit-scrollbar-thumb:hover,
.theme-light .tr-pane.is-scrolling::-webkit-scrollbar-thumb:hover {background-color: #666;}
/* light：滚动中 + 条带 hover → 加深 */
.theme-light .middle-column.is-scrolling.sb-hover::-webkit-scrollbar-thumb,
.theme-light .tr-pane.is-scrolling.sb-hover::-webkit-scrollbar-thumb {background-color: #666;}
/* light：轨道透明；hover 滚动条槽位时淡显（辅助定位 thumb） */
.theme-light .middle-column::-webkit-scrollbar-track,
.theme-light .tr-pane::-webkit-scrollbar-track {background-color: transparent;}
.theme-light .middle-column::-webkit-scrollbar:hover,
.theme-light .tr-pane::-webkit-scrollbar:hover {background-color: rgba(0, 0, 0, 0.06);}

/* dark：槽位 8px */
.theme-dark .middle-column::-webkit-scrollbar,
.theme-dark .tr-pane::-webkit-scrollbar {width: 8px;height: 8px;}
/* dark：平时极淡（同 light 理由：保证可 hover 命中） */
.theme-dark .middle-column::-webkit-scrollbar-thumb,
.theme-dark .tr-pane::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.12);border-radius: 4px;}
/* dark：滚动中显示淡色 */
.theme-dark .middle-column.is-scrolling::-webkit-scrollbar-thumb,
.theme-dark .tr-pane.is-scrolling::-webkit-scrollbar-thumb {background-color: #888;}
/* dark：hover thumb 显示淡色（供拖动） */
.theme-dark .middle-column::-webkit-scrollbar-thumb:hover,
.theme-dark .tr-pane::-webkit-scrollbar-thumb:hover {background-color: #888;}
/* dark：hover 滚动条条带（sb-hover，JS 检测鼠标在右缘条带内）→ thumb 显示淡色 */
.theme-dark .middle-column.sb-hover::-webkit-scrollbar-thumb,
.theme-dark .tr-pane.sb-hover::-webkit-scrollbar-thumb {background-color: #888;}
/* dark：滚动中 hover thumb 加深 */
.theme-dark .middle-column.is-scrolling::-webkit-scrollbar-thumb:hover,
.theme-dark .tr-pane.is-scrolling::-webkit-scrollbar-thumb:hover {background-color: #aaa;}
/* dark：滚动中 + 条带 hover → 加深 */
.theme-dark .middle-column.is-scrolling.sb-hover::-webkit-scrollbar-thumb,
.theme-dark .tr-pane.is-scrolling.sb-hover::-webkit-scrollbar-thumb {background-color: #aaa;}
/* dark：轨道透明；hover 滚动条槽位时淡显（辅助定位 thumb） */
.theme-dark .middle-column::-webkit-scrollbar-track,
.theme-dark .tr-pane::-webkit-scrollbar-track {background-color: transparent;}
.theme-dark .middle-column::-webkit-scrollbar:hover,
.theme-dark .tr-pane::-webkit-scrollbar:hover {background-color: rgba(255, 255, 255, 0.06);}

/* Firefox：标准 scrollbar-width/scrollbar-color（@-moz-document 隔离，Chrome 忽略）。
   平时透明隐藏；滚动中（.is-scrolling）或 鼠标悬停在该列（:hover，供拖动滚动条）显示淡色。
   Firefox 无滚动条 thumb 伪元素，hover 只能用容器级兜底。 */
@-moz-document url-prefix() {
    .theme-light .middle-column, .theme-light .tr-pane {scrollbar-width: thin; scrollbar-color: transparent transparent;}
    .theme-light .middle-column.is-scrolling, .theme-light .tr-pane.is-scrolling,
    .theme-light .middle-column:hover, .theme-light .tr-pane:hover {scrollbar-color: #999 transparent;}
    .theme-dark .middle-column, .theme-dark .tr-pane {scrollbar-width: thin; scrollbar-color: transparent transparent;}
    .theme-dark .middle-column.is-scrolling, .theme-dark .tr-pane.is-scrolling,
    .theme-dark .middle-column:hover, .theme-dark .tr-pane:hover {scrollbar-color: #777 transparent;}
}

/* book theme */
.theme-book-light {
    color: var(--light-book-color);
    background-color: var(--light-book-main-background-clolr);
}
.theme-book-dark {
    color: var(--dark-book-color);
    background-color: var(--dark-book-main-background-clolr);
}
.theme-book-dark a{ color: #0097ff;}