/* 阅读主题：类 Claude Sans 字体、纸张背景与正文排版 */

@font-face {
    font-family: "KB Noto Sans SC";
    src: url("../fonts/NotoSansSC-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "KB Noto Sans SC";
    src: url("../fonts/NotoSansSC-Bold.ttf") format("truetype");
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "KB Reading Serif";
    src: local("Noto Serif SC"),
         local("Noto Serif CJK SC"),
         local("Source Han Serif SC"),
         local("Source Han Serif CN"),
         local("Songti SC"),
         local("STSongti-SC-Regular"),
         local("STSongti-SC-Light"),
         local("Hiragino Mincho ProN"),
         local("Hiragino Mincho Pro"),
         local("YuMincho-Regular"),
         local("Yu Mincho"),
         local("SimSun"),
         local("PMingLiU");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+2E80-2EFF, U+3000-303F, U+31C0-31EF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE10-FE1F, U+FE30-FE4F, U+FF00-FFEF;
}

@font-face {
    font-family: "KB Reading Serif";
    src: local("Noto Serif SC SemiBold"),
         local("Noto Serif SC Bold"),
         local("Noto Serif CJK SC Bold"),
         local("Source Han Serif SC SemiBold"),
         local("Source Han Serif CN SemiBold"),
         local("Songti SC Bold"),
         local("STSongti-SC-Bold"),
         local("STSongti-SC-Regular"),
         local("Hiragino Mincho ProN W6"),
         local("Hiragino Mincho ProN"),
         local("YuMincho-Demibold"),
         local("Yu Mincho Demibold"),
         local("SimSun"),
         local("PMingLiU");
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+2E80-2EFF, U+3000-303F, U+31C0-31EF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE10-FE1F, U+FE30-FE4F, U+FF00-FFEF;
}

:root {
    --kb-font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", ui-sans-serif, system-ui, sans-serif;
    --kb-font-sans: var(--kb-font-system);
    --kb-font-serif: "KB Serif SC", "KB Reading Serif", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", "Songti SC", "STSongti-SC-Regular", "STSongti-SC-Light", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", "STSong", "SimSun", "PMingLiU", Georgia, "Times New Roman", serif;
    --font-family-ui: var(--kb-font-system);
    --font-family-base: var(--kb-font-system);
    --font-family-serif: var(--kb-font-serif);
    --font-family-content: var(--kb-font-system);
    --font-family-mono: "SF Mono", "Fira Code", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-family: var(--kb-font-system);
    --kb-ink: #2f2b24;
    --kb-ink-soft: #5e584e;
    --kb-ink-muted: #827a6d;
    --kb-paper: #fbfaf5;
    --kb-paper-warm: #f4efe3;
    --kb-paper-panel: #fffdf8;
    --kb-paper-soft: #f7f2e7;
    --kb-paper-line: rgba(96, 84, 62, 0.15);
    --kb-paper-shadow: 0 18px 42px rgba(67, 56, 38, 0.10), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
    --kb-accent: #6f674d;
    --kb-accent-soft: rgba(111, 103, 77, 0.12);
    --kb-accent-strong: #565039;
    /* 图谱里模板节点的配色。主色是暖橄榄，这里取冷色系拉开对比——
       图谱是全局视图，两类条目混在一张图上，只靠标题分不出哪些是模板 */
    --kb-graph-template: #5b7a9e;
    --kb-graph-template-strong: #415c7d;
    --kb-active-bg: rgba(111, 103, 77, 0.10);
    --kb-active-bg-strong: rgba(111, 103, 77, 0.16);
    --kb-control-bg: rgba(255, 253, 248, 0.86);
    /*
     * 弹框 / 抽屉遮罩的唯一语义色（V1.4）。以确认弹框（js/components/confirm.js）的观感为准：
     * 40% 黑 + 10px 模糊，亮暗主题同值。此前每种弹框各写一份——下载弹框 45% 深蓝 + 2px、
     * 设置抽屉 50% 黑 + 4px、AI 抽屉 40% 无模糊（写的是不存在的 backdrop-blur 属性）、
     * 更新弹框 70% 无模糊——同一个页面上四五种遮罩。所有全屏遮罩只从这两个值取，
     * 见 docs/theme-control-states.md 第六节。
     */
    --kb-scrim-bg: rgba(0, 0, 0, 0.4);
    --kb-scrim-blur: 10px;
    /* 统一的禁用/加载控件语义色。文字在亮、暗主题下均保持可辨，禁用感由中性底色表达，
       不再通过降低整个按钮的 opacity 来牺牲文字和图标对比度。 */
    --kb-control-disabled-bg: color-mix(in srgb, var(--kb-paper-soft) 82%, var(--kb-paper-panel));
    --kb-control-disabled-border: color-mix(in srgb, var(--kb-paper-line) 88%, transparent);
    --kb-control-disabled-text: color-mix(in srgb, var(--kb-ink-soft) 86%, var(--kb-paper-panel));
    --kb-dialog-module-bg: color-mix(in srgb, var(--kb-paper-soft) 72%, var(--kb-paper-panel));
    --kb-dialog-module-bg-hover: color-mix(in srgb, var(--kb-accent-soft) 62%, var(--kb-paper-panel));
    /*
     * 选中态。与 --kb-active-bg 的区别：那是一层**透明叠加**，用在本身已有轮廓的元素上
     * （导航按钮、分类项）够用；而分段控件里的按钮既无边框、底色又与容器同色，
     * 只叠一层 10~12% 的半透明色在深色下等于没有变化。
     *
     * 所以选中态统一成「**凹槽压暗一档、选中项提亮一档、边框给重音色**」：
     * 亮色下选中项是近白的纸面（经典的分段控件白色药丸），暗色下是比凹槽亮的实色，
     * 方向一致、都不依赖背后是什么颜色。
     */
    --kb-selected-bg: var(--kb-paper-panel);
    /*
     * 边框才是「选中」真正的分界线。相邻两个面之间的底色差在分段控件里天然做不到 3:1
     * （再拉开就不像一组控件了），所以非文本对比靠这条 1px 边达标；两套主题都是
     * accent 打八折压在选中底上，实测亮 3.6:1 / 暗 4.9:1。
     * 它只依赖 --kb-accent，两套主题各自的 accent 会自动代进来，不必写两遍。
     */
    --kb-selected-border: color-mix(in srgb, var(--kb-accent) 80%, transparent);
    --kb-selected-text: var(--kb-accent-strong);
    /* 分段控件的「凹槽」：必须比它所在的面板暗/低一档，否则选中项无从对比 */
    --kb-segment-track-bg: color-mix(in srgb, var(--kb-paper-soft) 88%, var(--kb-ink));
    /*
     * 行级 diff 的红绿：AI 写知识库的差异预览与「工作/编码」的改动汇总共用这一份，
     * 别在组件 CSS 里再写 #16a34a / #dc2626 字面量——暗色下要换成更亮的一档
     */
    --kb-diff-add-fg: #16a34a;
    --kb-diff-add-bg: rgba(22, 163, 74, 0.12);
    --kb-diff-del-fg: #dc2626;
    --kb-diff-del-bg: rgba(220, 38, 38, 0.1);
    --table-header-bg: #f1eadc;
    --kb-scrollbar-track: rgba(244, 239, 227, 0.42);
    --kb-scrollbar-thumb: rgba(111, 103, 77, 0.38);
    --kb-scrollbar-thumb-hover: rgba(111, 103, 77, 0.56);
    --bg-primary: var(--kb-paper);
    --bg-secondary: var(--kb-paper-soft);
    --bg-tertiary: #efe8d8;
    --text-primary: var(--kb-ink);
    --text-secondary: var(--kb-ink-soft);
    --text-muted: var(--kb-ink-muted);
    --border-light: var(--kb-paper-line);
    --border-color: var(--kb-paper-line);
    --color-primary: var(--kb-accent);
    --color-primary-rgb: 111, 103, 77;
    --primary-color: var(--kb-accent);
    --primary-hover: var(--kb-accent-strong);
    --primary-dark: var(--kb-accent-strong);
    --focus-color: var(--kb-accent);
    --form-border-focus: var(--kb-accent);
    --btn-primary-bg: var(--kb-accent);
    --btn-primary-hover: var(--kb-accent-strong);
    --icon-focus: var(--kb-accent);
    --line-height-normal: 1.65;
    --line-height-relaxed: 1.82;
    --letter-spacing-normal: 0;

    /*
     * 图标与中文并排时的光学补偿量。
     *
     * 「图标 + 文字」一行里，图标盒是靠 align-items:center 在**行盒**里居中的，
     * 而文字的墨迹中心并不落在行盒中心——它由字体的 ascent/descent 与字形墨迹
     * 共同决定，两套字体族给出的答案不一样：
     *
     *   系统字体（PingFang 系）：中文墨迹中心在基线上方 0.361em，行盒居中差 0.02em
     *   衬线字体（宋体系）：    中文墨迹中心在基线上方 0.30em，行盒居中差 0.06em
     *
     * remixicon 所有字形的墨迹中心都精确落在自己 em 盒正中（基线上方 0.35em，
     * 全字库一致，量过），所以差额全部来自正文字体这一侧，只能按字体族给值。
     *
     * 下面的值 = 上面这份**度量差**再加一档 0.04em 的**观感补偿**。
     * 光把墨迹中心对齐之后看着仍然偏高：图标是实心块状字形，视觉重量比同样高度的
     * 文字更靠上，几何居中并不等于看着居中。这 0.04em 是照着屏幕定的，改它就是改观感，
     * 上面那份度量差则是算出来的——两者含义不同，调的时候别混在一起。
     */
    --kb-icon-optical-shift: 0.06em;

    /*
     * 中文文字自身的光学补偿量（与上面的 --kb-icon-optical-shift 是一对，别混用）。
     *
     * 标题栏里标题与图标按钮是**并列的 flex 子项**，各自靠 align-items:center 在
     * 同一条交叉轴上居中——对齐的是**行盒/边框盒**，不是墨迹。按上面那份度量，
     * 中文墨迹中心并不落在行盒中心，于是标题看起来比同排图标低一点点：
     *
     *   系统字体（PingFang 系）：低 0.02em
     *   衬线字体（宋体系）：    低 0.06em —— 20px 标题下正好是那 1~2px
     *
     * 所以这里只放**纯度量差**，不含 --kb-icon-optical-shift 里那档 0.04em 观感补偿：
     * 那一档是给实心图标字形用的，加到文字上会矫枉过正。
     * 用法：给标题 transform: translateY(calc(-1 * var(--kb-text-optical-shift)))。
     */
    --kb-text-optical-shift: 0.02em;
}

:root[data-kb-font="system"] {
    --kb-icon-optical-shift: 0.06em;
    --kb-text-optical-shift: 0.02em;
    --font-family-ui: var(--kb-font-system);
    --font-family-base: var(--kb-font-system);
    --font-family-content: var(--kb-font-system);
    --font-family: var(--kb-font-system);
}

:root[data-kb-font="serif"] {
    /* 宋体系的中文墨迹整体比黑体系靠下，图标要多压一点才落在同一条视觉中线上 */
    --kb-icon-optical-shift: 0.10em;
    /* 同一份度量的另一面：文字自己也要往上提回来，标题才和同排图标按钮对齐 */
    --kb-text-optical-shift: 0.06em;
    --font-family-ui: var(--kb-font-serif);
    --font-family-base: var(--kb-font-serif);
    --font-family-content: var(--kb-font-serif);
    --font-family: var(--kb-font-serif);
}

[data-theme="dark"] {
    --kb-ink: #eee9dc;
    --kb-ink-soft: #c8c0ad;
    --kb-ink-muted: #9f967f;
    --kb-paper: #1f211f;
    --kb-paper-warm: #27271f;
    --kb-paper-panel: #292a26;
    --kb-paper-soft: #242620;
    --kb-paper-line: rgba(226, 216, 189, 0.13);
    --kb-paper-shadow: 0 20px 44px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --kb-accent: #d8cb99;
    --kb-accent-soft: rgba(216, 203, 153, 0.13);
    --kb-accent-strong: #eee0a7;
    --kb-graph-template: #9bb8d6;
    --kb-graph-template-strong: #c2d8ec;
    --kb-active-bg: rgba(216, 203, 153, 0.12);
    --kb-active-bg-strong: rgba(216, 203, 153, 0.18);
    /*
     * 深色下选中底是**实色**而不是透明叠加：弹窗底、分段控件容器、未选中项在暗色里
     * 恰好都是 #242620，三者同色，再叠一层 12% 的暖色合成出来约 #3a3a2e，
     * 对比不足以让人一眼看出哪个被选中（这正是「夜间模式选项卡看不清」的直接成因）。
     */
    --kb-selected-bg: #3d3d30;
    --kb-segment-track-bg: #1c1e1a;
    --kb-diff-add-fg: #4ade80;
    --kb-diff-add-bg: rgba(34, 197, 94, 0.2);
    --kb-diff-del-fg: #f87171;
    --kb-diff-del-bg: rgba(248, 113, 113, 0.18);
    --kb-control-bg: rgba(41, 42, 38, 0.88);
    --kb-dialog-module-bg: #252720;
    --kb-dialog-module-bg-hover: rgba(216, 203, 153, 0.12);
    --table-header-bg: #303027;
    --kb-scrollbar-track: rgba(31, 33, 31, 0.48);
    --kb-scrollbar-thumb: rgba(200, 192, 173, 0.36);
    --kb-scrollbar-thumb-hover: rgba(216, 203, 153, 0.58);
    --bg-primary: var(--kb-paper);
    --bg-secondary: var(--kb-paper-soft);
    --bg-tertiary: #303027;
    --text-primary: var(--kb-ink);
    --text-secondary: var(--kb-ink-soft);
    --text-muted: var(--kb-ink-muted);
    --border-light: var(--kb-paper-line);
    --border-color: var(--kb-paper-line);
    --color-primary: var(--kb-accent);
    --color-primary-rgb: 216, 203, 153;
    --primary-color: var(--kb-accent);
    --primary-hover: var(--kb-accent-strong);
    --primary-dark: var(--kb-accent-strong);
    --focus-color: var(--kb-accent);
    --form-border-focus: var(--kb-accent);
    --btn-primary-bg: var(--kb-accent);
    --btn-primary-hover: var(--kb-accent-strong);
    --icon-focus: var(--kb-accent);
}

html,
body,
.kb-paper-app {
    font-family: var(--font-family-content);
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

body.kb-paper-app {
    color: var(--kb-ink);
    background-color: var(--kb-paper);
    background-image:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.72), transparent 32%),
        radial-gradient(circle at 85% 0%, rgba(222, 211, 180, 0.22), transparent 30%),
        repeating-linear-gradient(0deg, rgba(88, 78, 58, 0.018) 0, rgba(88, 78, 58, 0.018) 1px, transparent 1px, transparent 5px),
        linear-gradient(180deg, var(--kb-paper) 0%, var(--kb-paper-warm) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.kb-paper-app * {
    scrollbar-color: var(--kb-scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

body.kb-auth-page::before {
    background-image:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.78), transparent 32%),
        radial-gradient(circle at 85% 0%, rgba(222, 211, 180, 0.24), transparent 30%),
        repeating-linear-gradient(0deg, rgba(88, 78, 58, 0.02) 0, rgba(88, 78, 58, 0.02) 1px, transparent 1px, transparent 5px),
        linear-gradient(180deg, var(--kb-paper) 0%, var(--kb-paper-warm) 100%) !important;
    background-size: auto !important;
    background-position: center !important;
    filter: none !important;
    opacity: 1;
}

[data-theme="dark"] body.kb-paper-app {
    background-color: var(--kb-paper) !important;
    background-image:
        radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.05), transparent 30%),
        radial-gradient(circle at 88% 0%, rgba(216, 203, 153, 0.08), transparent 30%),
        repeating-linear-gradient(0deg, rgba(226, 216, 189, 0.018) 0, rgba(226, 216, 189, 0.018) 1px, transparent 1px, transparent 5px),
        linear-gradient(180deg, var(--kb-paper) 0%, #181a18 100%) !important;
}

[data-theme="dark"] body.kb-auth-page::before {
    background-image:
        radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.05), transparent 30%),
        radial-gradient(circle at 88% 0%, rgba(216, 203, 153, 0.08), transparent 30%),
        repeating-linear-gradient(0deg, rgba(226, 216, 189, 0.018) 0, rgba(226, 216, 189, 0.018) 1px, transparent 1px, transparent 5px),
        linear-gradient(180deg, var(--kb-paper) 0%, #181a18 100%) !important;
    filter: none !important;
}

#app,
.app,
main,
#mainContentArea,
.mobile-main-content,
.knowledge-area,
.knowledge-list,
.knowledge-detail,
.detail-content-wrapper,
.detail-content {
    background: transparent !important;
}

#topNav,
.mobile-search-bar,
.mobile-pagination-bar,
.beian-info,
.mobile-beian-bar {
    background: color-mix(in srgb, var(--kb-paper-panel) 88%, transparent) !important;
    border-color: var(--kb-paper-line) !important;
    color: var(--kb-ink);
    backdrop-filter: blur(16px) saturate(1.08);
    box-shadow: 0 0px 0 rgba(255, 255, 255, 0.55) inset;
}

[data-theme="dark"] #topNav,
[data-theme="dark"] .mobile-search-bar,
[data-theme="dark"] .mobile-pagination-bar,
[data-theme="dark"] .beian-info,
[data-theme="dark"] .mobile-beian-bar {
    background: color-mix(in srgb, var(--kb-paper-panel) 88%, transparent) !important;
    box-shadow: 0 0px 0 rgba(255, 255, 255, 0.04) inset;
}

#sidebar,
.sidebar,
.toc-panel {
    background: color-mix(in srgb, var(--kb-paper-panel) 88%, transparent) !important;
    border-color: var(--kb-paper-line) !important;
    color: var(--kb-ink);
    box-shadow: 8px 0 28px rgba(67, 56, 38, 0.08);
    backdrop-filter: blur(14px);
}

[data-theme="dark"] #sidebar,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .toc-panel {
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.24);
}

.list-header,
.pagination-wrapper,
.detail-header {
    background: transparent !important;
    border-color: var(--kb-paper-line) !important;
}

.search-input-wrapper {
    background: rgba(255, 253, 248, 0.78) !important;
    border-color: var(--kb-paper-line) !important;
    border-radius: 10px;
    color: var(--kb-ink);
    /* box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset; */
}

.search-input-wrapper:focus-within {
    border-color: color-mix(in srgb, var(--kb-accent) 28%, var(--kb-paper-line)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kb-accent) 22%, transparent) inset !important;
}

.search-input-wrapper .search-input:focus,
.search-input-wrapper #searchInput:focus,
.search-input-wrapper #mobileSearchInput:focus {
    box-shadow: none !important;
    outline: none !important;
}

[data-theme="dark"] .search-input-wrapper {
    background: rgba(41, 42, 38, 0.78) !important;
}

[data-theme="dark"] .search-input-wrapper:focus-within {
    border-color: color-mix(in srgb, var(--kb-accent) 26%, var(--kb-paper-line)) !important;
    box-shadow: 0 0 0 1px rgba(216, 203, 153, 0.16) inset !important;
}

.knowledge-grid-container,
.detail-content,
.detail-panel-content,
.editor-body,
.quill-editor .ql-editor,
.toc-panel-body,
.tags-dropdown-body,
.mobile-main-content,
#mainContentArea {
    scrollbar-color: var(--kb-scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

.knowledge-grid-container::-webkit-scrollbar,
.detail-content::-webkit-scrollbar,
.detail-panel-content::-webkit-scrollbar,
.editor-body::-webkit-scrollbar,
.quill-editor .ql-editor::-webkit-scrollbar,
.toc-panel-body::-webkit-scrollbar,
.tags-dropdown-body::-webkit-scrollbar,
.mobile-main-content::-webkit-scrollbar,
#mainContentArea::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.knowledge-grid-container::-webkit-scrollbar-track,
.detail-content::-webkit-scrollbar-track,
.detail-panel-content::-webkit-scrollbar-track,
.editor-body::-webkit-scrollbar-track,
.quill-editor .ql-editor::-webkit-scrollbar-track,
.toc-panel-body::-webkit-scrollbar-track,
.tags-dropdown-body::-webkit-scrollbar-track,
.mobile-main-content::-webkit-scrollbar-track,
#mainContentArea::-webkit-scrollbar-track {
    background: transparent !important;
}

.knowledge-grid-container::-webkit-scrollbar-thumb,
.detail-content::-webkit-scrollbar-thumb,
.detail-panel-content::-webkit-scrollbar-thumb,
.editor-body::-webkit-scrollbar-thumb,
.quill-editor .ql-editor::-webkit-scrollbar-thumb,
.toc-panel-body::-webkit-scrollbar-thumb,
.tags-dropdown-body::-webkit-scrollbar-thumb,
.mobile-main-content::-webkit-scrollbar-thumb,
#mainContentArea::-webkit-scrollbar-thumb {
    background: var(--kb-scrollbar-thumb) !important;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box !important;
}

.knowledge-grid-container::-webkit-scrollbar-thumb:hover:not(:where(html[data-kb-pointer="touch"] *)),
.detail-content::-webkit-scrollbar-thumb:hover:not(:where(html[data-kb-pointer="touch"] *)),
.detail-panel-content::-webkit-scrollbar-thumb:hover:not(:where(html[data-kb-pointer="touch"] *)),
.editor-body::-webkit-scrollbar-thumb:hover:not(:where(html[data-kb-pointer="touch"] *)),
.quill-editor .ql-editor::-webkit-scrollbar-thumb:hover:not(:where(html[data-kb-pointer="touch"] *)),
.toc-panel-body::-webkit-scrollbar-thumb:hover:not(:where(html[data-kb-pointer="touch"] *)),
.tags-dropdown-body::-webkit-scrollbar-thumb:hover:not(:where(html[data-kb-pointer="touch"] *)),
.mobile-main-content::-webkit-scrollbar-thumb:hover:not(:where(html[data-kb-pointer="touch"] *)),
#mainContentArea::-webkit-scrollbar-thumb:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-scrollbar-thumb-hover) !important;
}

.knowledge-grid-container {
    padding: 1rem 1rem 1.25rem;
}

.knowledge-grid {
    gap: 0.9rem;
}

.knowledge-card {
    background: color-mix(in srgb, var(--kb-paper-panel) 92%, transparent) !important;
    border: 1px solid var(--kb-paper-line) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(67, 56, 38, 0.06), 0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
}

.knowledge-card::before {
    display: none;
}

@media (any-hover: hover) {

.knowledge-card:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    border-color: color-mix(in srgb, var(--kb-accent) 30%, var(--kb-paper-line)) !important;
    box-shadow: 0 12px 30px rgba(67, 56, 38, 0.10), 0 1px 0 rgba(255, 255, 255, 0.75) inset !important;
    transform: translateY(-1px);
}
}

.knowledge-card.selected {
    background: color-mix(in srgb, var(--kb-paper-panel) 82%, var(--kb-accent-soft)) !important;
    border-color: color-mix(in srgb, var(--kb-accent) 48%, var(--kb-paper-line)) !important;
    box-shadow: 0 0 0 3px var(--kb-accent-soft), 0 10px 28px rgba(67, 56, 38, 0.10) !important;
}

[data-theme="dark"] .knowledge-card {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

.knowledge-card-title,
.detail-title h2,
.detail-panel-title {
    color: var(--kb-ink) !important;
    font-family: var(--font-family-content) !important;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.42;
    word-break: break-word;
}

.knowledge-card-title {
    min-height: auto;
    /* 与 knowledge-list.css 同源：悬浮操作按钮按这个行高对齐标题首行 */
    line-height: var(--kb-card-title-line-height, 1.42);
}

.knowledge-card-excerpt,
.knowledge-card-meta,
.knowledge-card-date,
.detail-tags-label,
.toc-panel-title,
.toc-link {
    color: var(--kb-ink-soft) !important;
}

.detail-content {
    padding: 1.25rem;
}

.detail-panel {
    /* background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.44), transparent 18%, transparent 82%, rgba(222, 211, 180, 0.12)),
        var(--kb-paper-panel) !important; */
    /* border: 1px solid var(--kb-paper-line); */
    /* border-radius: 14px; */
    /* box-shadow: var(--kb-paper-shadow); */
}

.detail-body {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.detail-body {
    width: 100%;
    max-width: none;
    margin: 0;
    /* padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 3vw, 2.75rem); */
}

.detail-excerpt,
.detail-panel-excerpt {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--kb-paper-soft) 72%, transparent) !important;
    border: 1px solid var(--kb-paper-line);
    border-radius: 12px;
    color: var(--kb-ink-soft) !important;
    font-size: 0.98rem;
    line-height: 1.78;
}

.detail-main,
.detail-panel-main,
.knowledge-content {
    color: var(--kb-ink);
    font-family: var(--font-family-content) !important;
    /* 唯一来源在 css/variables.css 的 --kb-content-font-size（移动端由它自己的
       媒体查询降档）。本文件加载在最后，以前这条写死的 17px 就是详情页的实际字号，
       把 knowledge-content.css / editor.css 里那两个数变成了摆设。 */
    font-size: var(--kb-content-font-size, 16px);
    line-height: 1.86 !important;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: anywhere;
}

.knowledge-content p,
.knowledge-content li {
    margin-top: 0;
    /* margin-bottom: 0.72em; */
    line-height: 1.86 !important;
}

.kb-paper-app .knowledge-content li[data-list] {
    margin-bottom: 0.32em;
    line-height: 1.68 !important;
}

.kb-paper-app .knowledge-content li[data-list]>p {
    margin-top: 0;
    margin-bottom: 0.18em;
    line-height: 1.68 !important;
}

.kb-paper-app .knowledge-content li[data-list]:last-child {
    margin-bottom: 0;
}

.kb-paper-app .knowledge-content table td p,
.kb-paper-app .knowledge-content table th p,
.kb-paper-app .knowledge-content table td li,
.kb-paper-app .knowledge-content table th li,
.kb-paper-app .knowledge-content table td .ql-table-block,
.kb-paper-app .knowledge-content table th .ql-table-block {
    margin-top: 0.08rem !important;
    margin-bottom: 0.08rem !important;
    line-height: 1.36 !important;
}

.kb-paper-app .knowledge-content table td p+p,
.kb-paper-app .knowledge-content table th p+p,
.kb-paper-app .knowledge-content table td .ql-table-block+.ql-table-block,
.kb-paper-app .knowledge-content table th .ql-table-block+.ql-table-block {
    margin-top: 0.12rem !important;
}

.kb-paper-app .knowledge-content table td a,
.kb-paper-app .knowledge-content table th a {
    line-height: 1.36 !important;
}

/*
 * 标题外边距**上下不对称**：0.65em 上下等距时，标题在视觉上既属于上一段也属于
 * 下一段，读起来仍然是平的。上距明显大于下距，标题才会被读成「下面这一段的开头」。
 * 单位是 em，跟着各级标题自己的字号走，h1 的上距自然比 h3 大。
 * 与 css/knowledge-content.css、css/editor.css 里那两处保持同值（编辑器所见即详情所得）。
 */
.knowledge-content h1,
.knowledge-content h2,
.knowledge-content h3,
.knowledge-content h4,
.knowledge-content h5,
.knowledge-content h6 {
    color: var(--kb-ink) !important;
    margin: 1.05em 0 0.42em;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
}

.knowledge-content h1:first-child,
.knowledge-content h2:first-child,
.knowledge-content h3:first-child {
    margin-top: 0;
}

.knowledge-content li[data-list]::before {
    color: var(--kb-ink);
}

.knowledge-content blockquote,
.ql-editor blockquote,
.quill-editor blockquote,
blockquote {
    background: color-mix(in srgb, var(--kb-paper-soft) 76%, transparent) !important;
    border-left-color: color-mix(in srgb, var(--kb-accent) 52%, var(--kb-paper-line)) !important;
    color: var(--kb-ink-soft) !important;
    border-radius: 10px;
    font-size: 0.96rem;
    line-height: 1.78;
}

.kb-paper-app .knowledge-content blockquote {
    background: color-mix(in srgb, var(--kb-paper-warm) 78%, var(--kb-accent-soft)) !important;
    border-left-color: color-mix(in srgb, var(--kb-accent) 72%, var(--kb-paper-line)) !important;
    color: var(--kb-ink) !important;
    /* box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kb-accent) 12%, transparent); */
}

[data-theme="dark"] .kb-paper-app .knowledge-content blockquote {
    background: color-mix(in srgb, var(--kb-paper-soft) 82%, var(--kb-accent-soft)) !important;
    color: var(--kb-ink-soft) !important;
}

.knowledge-content code {
    background: color-mix(in srgb, var(--kb-accent-soft) 64%, transparent);
    color: var(--kb-ink);
    border-radius: 5px;
    font-family: var(--font-family-mono);
}

.knowledge-content table {
    color: var(--kb-ink);
    border-color: var(--kb-paper-line);
}

.knowledge-content th {
    background: var(--kb-paper-soft) !important;
}

.detail-meta,
.detail-panel-meta {
    color: var(--kb-ink-muted);
    border-color: var(--kb-paper-line) !important;
}

.detail-tag,
.knowledge-card-tag.no-tag {
    background: color-mix(in srgb, var(--kb-paper-soft) 86%, transparent) !important;
    border-color: var(--kb-paper-line) !important;
    color: var(--kb-ink-soft) !important;
}

.toc-link:hover:not(:where(html[data-kb-pointer="touch"] *)),
.toc-link.active {
    background: var(--kb-accent-soft) !important;
    color: var(--kb-ink) !important;
    border-left-color: var(--kb-accent) !important;
}

.detail-panel {
    /* border-radius: 16px 0 0 16px; */
}

.detail-panel-header,
.detail-panel-actions,
.detail-panel-tags {
    background: transparent !important;
    border-color: var(--kb-paper-line) !important;
}

.detail-panel-content {
    background: transparent !important;
}

.editor-panel {
    background: var(--kb-paper) !important;
    border-color: var(--kb-paper-line) !important;
    color: var(--kb-ink);
}

.editor-header,
.editor-body,
.editor-container {
    background: transparent !important;
    border-color: var(--kb-paper-line) !important;
}

.editor-title,
.form-label {
    color: var(--kb-ink) !important;
}

.form-input,
.form-textarea,
.tags-select-btn,
.tags-dropdown,
.upload-area {
    background: color-mix(in srgb, var(--kb-paper-panel) 72%, transparent) !important;
    border-color: var(--kb-paper-line) !important;
    color: var(--kb-ink) !important;
}

.form-input:focus,
.form-textarea:focus,
.tags-select-btn:focus {
    border-color: color-mix(in srgb, var(--kb-accent) 30%, var(--kb-paper-line)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kb-accent) 22%, transparent) inset !important;
}

.form-input::placeholder,
.form-textarea::placeholder,
.quill-editor .ql-editor.ql-blank::before {
    color: var(--kb-ink-muted) !important;
}

.quill-editor {
    background: color-mix(in srgb, var(--kb-paper-panel) 66%, transparent) !important;
    border-color: var(--kb-paper-line) !important;
    border-radius: 10px !important;
}

.quill-editor .ql-toolbar,
.ql-toolbar.ql-snow {
    background: color-mix(in srgb, var(--kb-paper-soft) 82%, transparent) !important;
    border-color: var(--kb-paper-line) !important;
    border-radius: 10px 10px 0 0 !important;
}

.quill-editor .ql-container,
.ql-container.ql-snow {
    background: color-mix(in srgb, var(--kb-paper-panel) 70%, transparent) !important;
    border-color: var(--kb-paper-line) !important;
    border-radius: 0 0 10px 10px !important;
}

.quill-editor .ql-editor,
.ql-editor {
    background: transparent !important;
    color: var(--kb-ink) !important;
    font-family: var(--font-family-content) !important;
}

.ql-toolbar.ql-snow .ql-stroke,
.quill-editor .ql-toolbar .ql-stroke {
    stroke: var(--kb-ink-soft) !important;
}

.ql-toolbar.ql-snow .ql-fill,
.quill-editor .ql-toolbar .ql-fill {
    fill: var(--kb-ink-soft) !important;
}

.ql-toolbar.ql-snow .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker-item,
.quill-editor .ql-toolbar .ql-picker-label,
.quill-editor .ql-toolbar .ql-picker-item {
    color: var(--kb-ink-soft) !important;
}

.quill-editor .ql-toolbar button:hover:not(:where(html[data-kb-pointer="touch"] *)),
.quill-editor .ql-toolbar .ql-picker:hover:not(:where(html[data-kb-pointer="touch"] *)),
.ql-toolbar.ql-snow button:hover:not(:where(html[data-kb-pointer="touch"] *)),
.ql-toolbar.ql-snow .ql-picker:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-accent-soft) !important;
}

.quill-editor .ql-toolbar button.ql-active,
.quill-editor .ql-toolbar .ql-picker.ql-active,
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker.ql-active {
    background: var(--kb-accent-soft) !important;
    color: var(--kb-ink) !important;
}

.ql-toolbar.ql-snow .ql-picker-options,
.quill-editor .ql-toolbar .ql-picker-options {
    background: var(--kb-paper-panel) !important;
    border-color: var(--kb-paper-line) !important;
    color: var(--kb-ink) !important;
    box-shadow: 0 12px 30px rgba(67, 56, 38, 0.12) !important;
}

[data-theme="dark"] .editor-panel,
[data-theme="dark"] .editor-header,
[data-theme="dark"] .editor-body,
[data-theme="dark"] .editor-container {
    background: var(--kb-paper) !important;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .tags-select-btn,
[data-theme="dark"] .tags-dropdown,
[data-theme="dark"] .upload-area {
    background: rgba(41, 42, 38, 0.7) !important;
}

/*
 * 附件上传区的「文件拖到上方」态。
 * 上面 .upload-area 的底色与边框都带 !important，editor.css 里按蓝色写的 .dragover
 * 在这个主题下一直没生效过——拖着文件进来和不拖一个样。这里按 --kb-accent 重给一份，
 * 明暗两套主题各自跟着变量走；形状变化（实线、光晕、图标放大）沿用 editor.css 的。
 */
.upload-area.dragover {
    border-color: var(--kb-accent) !important;
    background: var(--kb-active-bg-strong) !important;
    box-shadow: 0 0 0 4px var(--kb-accent-soft) !important;
}

.upload-area.dragover .upload-primary {
    color: var(--kb-accent) !important;
}

[data-theme="dark"] .upload-area.dragover {
    background: color-mix(in srgb, var(--kb-accent) 14%, rgba(41, 42, 38, 0.9)) !important;
}

[data-theme="dark"] .quill-editor {
    background: rgba(41, 42, 38, 0.74) !important;
}

[data-theme="dark"] .quill-editor .ql-toolbar,
[data-theme="dark"] .ql-toolbar.ql-snow {
    background: #242620 !important;
    border-color: var(--kb-paper-line) !important;
}

[data-theme="dark"] .quill-editor .ql-container,
[data-theme="dark"] .ql-container.ql-snow {
    background: #20221f !important;
    border-color: var(--kb-paper-line) !important;
}

[data-theme="dark"] .quill-editor .ql-editor,
[data-theme="dark"] .ql-editor {
    color: var(--kb-ink) !important;
}

[data-theme="dark"] .ql-toolbar.ql-snow .ql-stroke,
[data-theme="dark"] .quill-editor .ql-toolbar .ql-stroke {
    stroke: var(--kb-ink-soft) !important;
}

[data-theme="dark"] .ql-toolbar.ql-snow .ql-fill,
[data-theme="dark"] .quill-editor .ql-toolbar .ql-fill {
    fill: var(--kb-ink-soft) !important;
}

[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-label,
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-item,
[data-theme="dark"] .quill-editor .ql-toolbar .ql-picker-label,
[data-theme="dark"] .quill-editor .ql-toolbar .ql-picker-item {
    color: var(--kb-ink-soft) !important;
}

[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-options,
[data-theme="dark"] .quill-editor .ql-toolbar .ql-picker-options {
    background: #292a26 !important;
    border-color: var(--kb-paper-line) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28) !important;
}

[data-theme="dark"] .ql-toolbar.ql-snow button:hover:not(:where(html[data-kb-pointer="touch"] *)),
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker:hover:not(:where(html[data-kb-pointer="touch"] *)),
[data-theme="dark"] .quill-editor .ql-toolbar button:hover:not(:where(html[data-kb-pointer="touch"] *)),
[data-theme="dark"] .quill-editor .ql-toolbar .ql-picker:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: rgba(216, 203, 153, 0.12) !important;
}

.kb-auth-page .form-container {
    max-width: 440px;
}

.kb-auth-page .text-white,
.kb-auth-page .text-white-90 {
    color: var(--kb-ink) !important;
    text-shadow: none !important;
}

.kb-auth-page .glass-effect {
    background: color-mix(in srgb, var(--kb-paper-panel) 90%, transparent) !important;
    border: 1px solid var(--kb-paper-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--kb-paper-shadow) !important;
}

.kb-auth-page h2,
.kb-auth-page h3,
.kb-auth-page label {
    letter-spacing: 0;
}

.kb-auth-page .input-group input,
.kb-auth-page input[type="text"],
.kb-auth-page input[type="password"],
.kb-auth-page input[type="email"] {
    background: rgba(255, 253, 248, 0.82) !important;
    border-color: var(--kb-paper-line) !important;
    color: var(--kb-ink) !important;
    border-radius: 10px !important;
}

.kb-auth-page .input-group input:focus,
.kb-auth-page input:focus {
    border-color: color-mix(in srgb, var(--kb-accent) 48%, var(--kb-paper-line)) !important;
    box-shadow: 0 0 0 3px var(--kb-accent-soft) !important;
}

.kb-auth-page .input-group i {
    color: var(--kb-ink-muted) !important;
}

.kb-auth-page .btn-primary {
    background: var(--kb-accent) !important;
    color: var(--kb-paper-panel) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 24px rgba(67, 56, 38, 0.16);
}

.kb-auth-page .btn-primary:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: color-mix(in srgb, var(--kb-accent) 86%, #000) !important;
}

.kb-auth-page .beian-info-login,
.beian-info-settings {
    background: color-mix(in srgb, var(--kb-paper-panel) 88%, transparent) !important;
    border-color: var(--kb-paper-line) !important;
    color: var(--kb-ink-muted) !important;
}

[data-theme="dark"] .kb-auth-page .input-group input,
[data-theme="dark"] .kb-auth-page input[type="text"],
[data-theme="dark"] .kb-auth-page input[type="password"],
[data-theme="dark"] .kb-auth-page input[type="email"] {
    background: rgba(41, 42, 38, 0.82) !important;
}

/* 全局主题兜底：覆盖旧蓝色高亮、表头、折叠按钮与独立弹框 */
.kb-paper-app .bg-blue-50,
.kb-paper-app .btn-nav.active,
.kb-paper-app .btn-nav.bg-blue-50,
.kb-paper-app .category-item.bg-blue-100,
.kb-paper-app .category-item.text-blue-800 {
    background: var(--kb-active-bg) !important;
    color: var(--kb-accent) !important;
    border-color: color-mix(in srgb, var(--kb-accent) 30%, var(--kb-paper-line)) !important;
}

/*
 * 选中态：实色底 + 显式边框。
 *
 * 上面那条兜底给的是**透明叠加**，用在导航按钮、分类项这些本身已有轮廓的元素上够用。
 * 但分段控件（`.source-tab`）与卡片式选项（导出格式卡片）不一样：它们没边框、底色又与
 * 容器同色，深色下弹窗底 / 容器 / 未选中项恰好都是 #242620，再叠 12% 暖色合成约 #3a3a2e
 * ——三者几乎分不开，「哪个被选中」无从表达。它们必须从那条兜底里摘出来单写。
 *
 * 注意 `border-color` 只有在元素**本来就有 border 宽度**时才有意义：`.source-tab` 原先是
 * `border: none`，那条兜底给它的 border-color 一直是空写，所以这里连 border 一起给全。
 */
.kb-paper-app .source-tab.active,
.kb-paper-app .export-option.selected,
.kb-paper-app .export-format-card.selected {
    background: var(--kb-selected-bg) !important;
    color: var(--kb-selected-text) !important;
    border: 1px solid var(--kb-selected-border) !important;
    box-shadow: none !important;
}

/*
 * 分段控件的「凹槽」。
 *
 * 容器底必须比它所在的面板低一档，选中项才有可对比的参照物；只把选中项调亮而容器与
 * 面板同色，看起来仍然像「整条都是平的」。
 */
.kb-paper-app .doc-converter-source-tabs {
    background: var(--kb-segment-track-bg) !important;
    border: 1px solid var(--kb-paper-line) !important;
}

/* 未选中项保持透明，让凹槽透出来；给一圈透明边框占位，选中时换色不会发生 1px 抖动 */
.kb-paper-app .source-tab {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--kb-ink-soft) !important;
}

.kb-paper-app .source-tab:not(.active):hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg) !important;
    color: var(--kb-ink) !important;
}

.kb-paper-app .btn-nav,
.kb-paper-app #categoryTree .category-item {
    box-shadow: none !important;
}

.kb-paper-app .btn-nav,
.kb-paper-app .btn-nav *,
.kb-paper-app #categoryTree .category-item,
.kb-paper-app #categoryTree .category-item * {
    font-weight: 400 !important;
}

@media (any-hover: hover) {

.kb-paper-app .btn-nav:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app #categoryTree .category-item:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg) !important;
    background-color: var(--kb-active-bg) !important;
    background-image: none !important;
    color: var(--kb-accent) !important;
    box-shadow: none !important;
}
}

.kb-paper-app .btn-nav.active,
.kb-paper-app .btn-nav.bg-blue-50,
.kb-paper-app #categoryTree .category-item.active,
.kb-paper-app #categoryTree .category-item.bg-blue-100,
.kb-paper-app #categoryTree .category-item.text-blue-800,
.kb-paper-app #categoryTree .category-item[class*="bg-blue"] {
    background: var(--kb-active-bg) !important;
    background-color: var(--kb-active-bg) !important;
    background-image: none !important;
    color: var(--kb-accent) !important;
    box-shadow: none !important;
}

@media (any-hover: hover) {

.kb-paper-app .btn-nav:hover:not(:where(html[data-kb-pointer="touch"] *)) *,
.kb-paper-app #categoryTree .category-item:hover:not(:where(html[data-kb-pointer="touch"] *)) * {
    color: var(--kb-accent) !important;
}
}

.kb-paper-app .btn-nav.active *,
.kb-paper-app #categoryTree .category-item.bg-blue-100 *,
.kb-paper-app #categoryTree .category-item[class*="bg-blue"] * {
    color: var(--kb-accent) !important;
}

.kb-paper-app .btn-nav.active,
.kb-paper-app .btn-nav.active *,
.kb-paper-app .btn-nav.bg-blue-50,
.kb-paper-app .btn-nav.bg-blue-50 *,
.kb-paper-app .btn-nav.bg-blue-900\/30,
.kb-paper-app .btn-nav.bg-blue-900\/30 *,
.kb-paper-app #categoryTree .category-item.active,
.kb-paper-app #categoryTree .category-item.active *,
.kb-paper-app #categoryTree .category-item.bg-blue-100,
.kb-paper-app #categoryTree .category-item.bg-blue-100 *,
.kb-paper-app #categoryTree .category-item.bg-blue-900\/30,
.kb-paper-app #categoryTree .category-item.bg-blue-900\/30 *,
.kb-paper-app #categoryTree .category-item.text-blue-800,
.kb-paper-app #categoryTree .category-item.text-blue-800 *,
.kb-paper-app #categoryTree .category-item.text-blue-300,
.kb-paper-app #categoryTree .category-item.text-blue-300 *,
.kb-paper-app #categoryTree .category-item[class*="bg-blue"],
.kb-paper-app #categoryTree .category-item[class*="bg-blue"] * {
    font-weight: 700 !important;
}

[data-theme="dark"] .kb-paper-app .bg-blue-900\/20,
[data-theme="dark"] .kb-paper-app .bg-blue-900\/30,
[data-theme="dark"] .kb-paper-app .btn-nav.bg-blue-900\/30,
[data-theme="dark"] .kb-paper-app .category-item.bg-blue-900\/30,
[data-theme="dark"] .kb-paper-app .category-item.text-blue-300,
.dark .kb-paper-app .btn-nav.bg-blue-900\/30,
.dark .kb-paper-app .category-item.bg-blue-900\/30 {
    background: var(--kb-active-bg) !important;
    background-color: var(--kb-active-bg) !important;
    background-image: none !important;
    color: var(--kb-accent) !important;
    border-color: color-mix(in srgb, var(--kb-accent) 32%, var(--kb-paper-line)) !important;
    box-shadow: none !important;
}

@media (any-hover: hover) {

[data-theme="dark"] .kb-paper-app .btn-nav:hover:not(:where(html[data-kb-pointer="touch"] *)),
[data-theme="dark"] .kb-paper-app #categoryTree .category-item:hover:not(:where(html[data-kb-pointer="touch"] *)),
.dark .kb-paper-app .btn-nav:hover:not(:where(html[data-kb-pointer="touch"] *)),
.dark .kb-paper-app #categoryTree .category-item:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg) !important;
    background-color: var(--kb-active-bg) !important;
    background-image: none !important;
    color: var(--kb-accent) !important;
    box-shadow: none !important;
}
}

[data-theme="dark"] .kb-paper-app .btn-nav.active,
[data-theme="dark"] .kb-paper-app #categoryTree .category-item.active,
[data-theme="dark"] .kb-paper-app #categoryTree .category-item.bg-blue-100,
[data-theme="dark"] .kb-paper-app #categoryTree .category-item.bg-blue-900\/30,
[data-theme="dark"] .kb-paper-app #categoryTree .category-item[class*="bg-blue"],
.dark .kb-paper-app .btn-nav.active,
.dark .kb-paper-app #categoryTree .category-item.active,
.dark .kb-paper-app #categoryTree .category-item.bg-blue-100,
.dark .kb-paper-app #categoryTree .category-item.bg-blue-900\/30,
.dark .kb-paper-app #categoryTree .category-item[class*="bg-blue"] {
    background: var(--kb-active-bg) !important;
    background-color: var(--kb-active-bg) !important;
    background-image: none !important;
    color: var(--kb-accent) !important;
    box-shadow: none !important;
}

.kb-paper-app .btn-nav.active *,
.kb-paper-app .btn-nav.bg-blue-50 *,
.kb-paper-app .category-item.bg-blue-100 *,
.kb-paper-app .category-item.text-blue-800 *,
.kb-paper-app .category-item.bg-blue-900\/30 *,
.kb-paper-app .category-item.text-blue-300 *,
.kb-paper-app .text-blue-300,
.kb-paper-app .text-blue-500,
.kb-paper-app .text-blue-600,
.kb-paper-app .text-blue-700,
.kb-paper-app .text-blue-800,
.kb-paper-app a.text-blue-600,
.kb-paper-app a.text-blue-700 {
    color: var(--kb-accent) !important;
}

.kb-paper-app #categoryAdd,
.kb-paper-app button#categoryAdd,
.kb-paper-app #categoryAdd[style],
.kb-paper-app button#categoryAdd[style],
.kb-paper-app .sidebar-icon,
.kb-paper-app .rag-tree-toggle,
.kb-paper-app .rag-add-btn,
.kb-paper-app .rag-edit-btn,
.kb-paper-app .rag-more-btn {
    color: var(--kb-accent) !important;
}

.kb-paper-app .btn-primary:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .bg-blue-500:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .hover\:bg-blue-600:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .rag-save-btn:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .fetch-url-btn:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .doc-converter-start-btn:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .doc-converter-download:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .export-primary-btn:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .export-confirm-btn:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .export-dialog__btn--primary:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .sort-option.active:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app button[class*="bg-blue"]:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app input[type="submit"]:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])) {
    background: var(--kb-accent) !important;
    border-color: var(--kb-accent) !important;
    color: var(--kb-paper-panel) !important;
    box-shadow: 0 10px 22px rgba(67, 56, 38, 0.14) !important;
}

[data-theme="dark"] .kb-paper-app .btn-primary:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app .bg-blue-500:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app .hover\:bg-blue-600:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app .rag-save-btn:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app .fetch-url-btn:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app .doc-converter-start-btn:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app .doc-converter-download:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app .export-primary-btn:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app .export-confirm-btn:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app .export-dialog__btn--primary:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app .sort-option.active:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app button[class*="bg-blue"]:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
[data-theme="dark"] .kb-paper-app input[type="submit"]:where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])) {
    color: #1f211f !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24) !important;
}

.kb-paper-app .btn-primary:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .bg-blue-500:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .rag-save-btn:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .fetch-url-btn:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .doc-converter-start-btn:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .doc-converter-download:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .export-primary-btn:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .export-confirm-btn:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app .export-dialog__btn--primary:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])),
.kb-paper-app button[class*="bg-blue"]:hover:not(:where(html[data-kb-pointer="touch"] *)):where(:not(:disabled):not(.is-loading):not([aria-disabled="true"])) {
    background: var(--kb-accent-strong) !important;
    border-color: var(--kb-accent-strong) !important;
}

/*
 * 进入禁用 / 加载态**不做过渡**（transition: none）。
 *
 * 主按钮在暗色主题下是「浅底深字」，禁用态是「深底浅字」，两者之间做 0.15s 的 background + color
 * 交叉淡入淡出，中点那一帧正好是「中灰底 + 中灰字」——文字与底色同色。平时这一帧一闪而过；
 * 但按钮变成「导出中…」之后紧接着就是 html-to-image 序列化整篇文档这类会卡住主线程的活，
 * 渲染就冻结在过渡中途，用户看到的「导出中…」于是长时间是一颗看不清字的按钮
 * （导出弹框在夜间模式下的实测形状；组件自己写的 transition 会在这里被压掉）。
 * 恢复可用时这条规则不再命中，回程照常走组件自己的过渡。
 */
/* 通用遮罩类：只给颜色与模糊，定位 / 层级由各弹框自己写（js/components/dialog.js 的遮罩层用它） */
.kb-scrim {
    background: var(--kb-scrim-bg);
    backdrop-filter: blur(var(--kb-scrim-blur));
    -webkit-backdrop-filter: blur(var(--kb-scrim-blur));
}

.kb-paper-app button:disabled,
.kb-paper-app button[aria-disabled="true"],
.kb-paper-app button.is-loading {
    background: var(--kb-control-disabled-bg) !important;
    border-color: var(--kb-control-disabled-border) !important;
    color: var(--kb-control-disabled-text) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
    transition: none !important;
}

/* 旧组件常给 span / i 单独写颜色；禁用和加载时必须由按钮语义色统一接管。 */
.kb-paper-app button:disabled > span,
.kb-paper-app button:disabled > i,
.kb-paper-app button:disabled > svg,
.kb-paper-app button[aria-disabled="true"] > span,
.kb-paper-app button[aria-disabled="true"] > i,
.kb-paper-app button[aria-disabled="true"] > svg,
.kb-paper-app button.is-loading > span,
.kb-paper-app button.is-loading > i,
.kb-paper-app button.is-loading > svg {
    color: inherit !important;
    opacity: 1 !important;
}

/*
 * transition: none 要连子元素一起写：css/animations.css 有一条 `* { transition: color 0.2s … }`，
 * 按钮本身不过渡了，里面的 <span> / <i> 继承来的文字色却还在 0.2s 里从旧色慢慢变过去——
 * 底色已经是禁用态的深底、文字还是主按钮的深字，「开始导出」点下去先空白一下再出现「正在合成插图…」
 * 就是这一段；主线程被导出卡住时这一下会拖成好几秒。
 */
.kb-paper-app button:disabled *,
.kb-paper-app button[aria-disabled="true"] *,
.kb-paper-app button.is-loading * {
    transition: none !important;
}

.kb-paper-app input:focus,
.kb-paper-app textarea:focus,
.kb-paper-app select:focus,
.kb-paper-app .format-select:focus,
.kb-paper-app .url-input:focus,
.kb-paper-app .search-input:focus {
    border-color: color-mix(in srgb, var(--kb-accent) 46%, var(--kb-paper-line)) !important;
    box-shadow: 0 0 0 3px var(--kb-accent-soft) !important;
    outline: none !important;
}

/*
 * 搜索框的焦点态由外层 .search-input-wrapper 用 :focus-within 画，输入框自己不该再来一圈。
 *
 * 上面那条 .kb-paper-app .search-input:focus 会给所有搜索框套 3px 光晕；
 * 知识库列表之所以没事，是因为第 309 行按 **id** 写了一条豁免（id 权重压过类）。
 * 按 id 豁免不具备可扩展性——插件页搜索框只是换了个 id 就被套上了多余的边框与背景。
 * 这里改成认外层容器，任何放进 .search-input-wrapper 的输入框都一致。
 */
.kb-paper-app .search-input-wrapper .search-input:focus,
.kb-paper-app .search-input-wrapper input:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.kb-paper-app .knowledge-content th,
.kb-paper-app .knowledge-content thead tr,
.kb-paper-app .knowledge-content thead tr th,
.kb-paper-app .knowledge-content thead tr td,
.kb-paper-app .knowledge-content table:not(:has(thead)) > tr:first-child td,
.kb-paper-app .knowledge-content table:not(:has(thead)) tbody > tr:first-child td,
.kb-paper-app .ql-editor table th,
.kb-paper-app .ql-editor table thead tr,
.kb-paper-app .ql-editor table thead th,
.kb-paper-app .ql-editor table thead td,
.kb-paper-app .ql-editor table:not(:has(thead)) > tr:first-child td,
.kb-paper-app .ql-editor table:not(:has(thead)) tbody > tr:first-child td {
    background: var(--table-header-bg) !important;
    color: var(--kb-ink) !important;
    border-color: var(--kb-paper-line) !important;
}

.kb-paper-app .knowledge-content table,
.kb-paper-app .knowledge-content td,
.kb-paper-app .knowledge-content th,
.kb-paper-app .ql-editor table,
.kb-paper-app .ql-editor td,
.kb-paper-app .ql-editor th {
    border-color: var(--kb-paper-line) !important;
}

.kb-paper-app .quill-editor .ql-editor {
    overflow-x: hidden !important;
}

.kb-paper-app .ql-editor table {
    scrollbar-color: var(--kb-scrollbar-thumb) transparent;
}

.kb-paper-app .ql-editor table::-webkit-scrollbar-thumb {
    background: var(--kb-scrollbar-thumb) !important;
}

.kb-paper-app .ql-editor table::-webkit-scrollbar-thumb:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-scrollbar-thumb-hover) !important;
}

.kb-paper-app .sidebar-toggle-btn,
.kb-paper-app .toc-edge-toggle,
.kb-paper-app .ai-sidebar-toggle {
    background: var(--kb-active-bg) !important;
    color: var(--kb-accent) !important;
    border: 1px solid var(--kb-paper-line) !important;
    box-shadow: 0 10px 24px rgba(67, 56, 38, 0.10) !important;
}

@media (any-hover: hover) {

.kb-paper-app .sidebar-toggle-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .toc-edge-toggle:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .ai-sidebar-toggle:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg-strong) !important;
    color: var(--kb-accent-strong) !important;
}
}

.kb-paper-app .modal-content,
.kb-paper-app .dialog-content,
.kb-paper-app .export-dialog,
.kb-paper-app .export-dialog-content,
.kb-paper-app .doc-converter-container,
.kb-paper-app .doc-converter-preview,
.kb-paper-app .doc-converter-file-info,
.kb-paper-app .conversion-result,
.kb-paper-app .user-profile-modal,
.kb-paper-app #shortcutHelpModal .modal-content {
    background: var(--kb-paper-panel) !important;
    color: var(--kb-ink) !important;
    border-color: var(--kb-paper-line) !important;
}

[data-theme="dark"] .kb-paper-app .modal-content,
[data-theme="dark"] .kb-paper-app .dialog-content,
[data-theme="dark"] .kb-paper-app .export-dialog,
[data-theme="dark"] .kb-paper-app .export-dialog-content,
[data-theme="dark"] .kb-paper-app .doc-converter-container,
[data-theme="dark"] .kb-paper-app .doc-converter-preview,
[data-theme="dark"] .kb-paper-app .doc-converter-file-info,
[data-theme="dark"] .kb-paper-app .conversion-result,
[data-theme="dark"] .kb-paper-app .user-profile-modal,
[data-theme="dark"] .kb-paper-app #shortcutHelpModal .modal-content {
    background: #242620 !important;
}

/*
 * 分段控件的容器与按钮**不在这条里**：它们要的是「凹槽 + 选中项」的对比关系，
 * 与这里这些输入框/上传区共用一个底色恰恰是「选中态看不清」的成因。
 * 它们的规则单写在上面（搜 --kb-segment-track-bg）。
 */
.kb-paper-app .doc-converter-upload-area,
.kb-paper-app .doc-converter-url-area,
.kb-paper-app .format-select,
.kb-paper-app .url-input,
.kb-paper-app .source-format-select,
.kb-paper-app .target-format-select,
.kb-paper-app .doc-converter-warning,
.kb-paper-app .doc-converter-watermark {
    background: var(--kb-paper-soft) !important;
    color: var(--kb-ink-soft) !important;
    border-color: var(--kb-paper-line) !important;
}

.kb-paper-app .doc-converter-upload-area:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .doc-converter-upload-area.drag-over,
.kb-paper-app .format-select:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .source-format-select:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .target-format-select:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    border-color: color-mix(in srgb, var(--kb-accent) 48%, var(--kb-paper-line)) !important;
    background: var(--kb-active-bg) !important;
}

.kb-paper-app .upload-icon,
.kb-paper-app .doc-converter-upload-area:hover:not(:where(html[data-kb-pointer="touch"] *)) .upload-icon,
.kb-paper-app .conversion-arrow,
.kb-paper-app .export-icon,
.kb-paper-app .ai-ref-title {
    color: var(--kb-accent) !important;
}

.kb-paper-app .progress-bar,
.kb-paper-app .conversion-progress-bar {
    background: var(--kb-accent) !important;
}

/* 主题补漏：分页、AI 助手、个人信息模块、标签树与卡片悬浮按钮 */
.kb-paper-app .pagination-wrapper,
.kb-paper-app .pagination-container,
.kb-paper-app .mobile-pagination-bar {
    background: color-mix(in srgb, var(--kb-paper-soft) 88%, var(--kb-paper-panel)) !important;
    border-color: var(--kb-paper-line) !important;
}

[data-theme="dark"] .kb-paper-app .pagination-wrapper,
[data-theme="dark"] .kb-paper-app .pagination-container,
[data-theme="dark"] .kb-paper-app .mobile-pagination-bar {
    background: #252720 !important;
    border-color: var(--kb-paper-line) !important;
}

.kb-paper-app .pagination-btn {
    background: var(--kb-control-bg) !important;
    border-color: var(--kb-paper-line) !important;
    color: var(--kb-ink-soft) !important;
    box-shadow: none !important;
}

.kb-paper-app .pagination-btn:hover:not(:where(html[data-kb-pointer="touch"] *)):not(:disabled),
.kb-paper-app .pagination-btn.active {
    background: var(--kb-accent) !important;
    border-color: var(--kb-accent) !important;
    color: var(--kb-paper-panel) !important;
}

[data-theme="dark"] .kb-paper-app .pagination-btn:hover:not(:where(html[data-kb-pointer="touch"] *)):not(:disabled),
[data-theme="dark"] .kb-paper-app .pagination-btn.active {
    color: #1f211f !important;
}

.kb-paper-app .pagination-btn:disabled,
.kb-paper-app .pagination-btn.disabled {
    background: var(--kb-control-disabled-bg) !important;
    color: var(--kb-control-disabled-text) !important;
    border-color: var(--kb-control-disabled-border) !important;
    opacity: 1 !important;
}

.kb-paper-app .pagination-info,
.kb-paper-app .pagination-ellipsis {
    color: var(--kb-ink-soft) !important;
}

@media (any-hover: hover) {

.kb-paper-app .category-item.active:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app #categoryTree .category-item.active:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg) !important;
    color: var(--kb-accent) !important;
    border-color: color-mix(in srgb, var(--kb-accent) 30%, var(--kb-paper-line)) !important;
}
}

.kb-paper-app .category-item.active,
.kb-paper-app #categoryTree .category-item.active {
    background: var(--kb-active-bg) !important;
    color: var(--kb-accent) !important;
    border-color: color-mix(in srgb, var(--kb-accent) 30%, var(--kb-paper-line)) !important;
}

@media (any-hover: hover) {

[data-theme="dark"] .kb-paper-app .category-item.active:hover:not(:where(html[data-kb-pointer="touch"] *)),
[data-theme="dark"] .kb-paper-app #categoryTree .category-item.active:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg) !important;
    color: var(--kb-accent) !important;
}
}

[data-theme="dark"] .kb-paper-app .category-item.active,
[data-theme="dark"] .kb-paper-app #categoryTree .category-item.active {
    background: var(--kb-active-bg) !important;
    color: var(--kb-accent) !important;
}

.kb-paper-app .category-item.active *,
.kb-paper-app #categoryTree .category-item.active * {
    color: var(--kb-accent) !important;
}

.kb-paper-app .category-action-btn,
.kb-paper-app .category-add-child-btn,
.kb-paper-app .category-more-actions-btn {
    color: var(--kb-ink-muted) !important;
}

@media (any-hover: hover) {

.kb-paper-app .category-action-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .category-add-child-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .category-more-actions-btn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg) !important;
    color: var(--kb-accent) !important;
}
}

.kb-paper-app .knowledge-card-actions .action-btn,
.kb-paper-app .knowledge-card__actions .action-btn,
.kb-paper-app .knowledge-action-btn,
.kb-paper-app .action-btn {
    background: color-mix(in srgb, var(--kb-paper-panel) 86%, transparent) !important;
    border: 1px solid var(--kb-paper-line) !important;
    color: var(--kb-ink-muted) !important;
    box-shadow: 0 8px 18px rgba(67, 56, 38, 0.10) !important;
    backdrop-filter: blur(8px);
}

[data-theme="dark"] .kb-paper-app .knowledge-card-actions .action-btn,
[data-theme="dark"] .kb-paper-app .knowledge-card__actions .action-btn,
[data-theme="dark"] .kb-paper-app .knowledge-action-btn,
[data-theme="dark"] .kb-paper-app .detail-title-row .detail-action-btn,
[data-theme="dark"] .kb-paper-app .action-btn {
    background: rgba(41, 42, 38, 0.86) !important;
    color: var(--kb-ink-muted) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26) !important;
}

@media (any-hover: hover) {

.kb-paper-app .knowledge-card-actions .action-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .knowledge-card__actions .action-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .knowledge-action-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .detail-title-row .detail-action-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .action-btn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg-strong) !important;
    border-color: color-mix(in srgb, var(--kb-accent) 38%, var(--kb-paper-line)) !important;
    color: var(--kb-accent) !important;
}
}

.kb-paper-app .action-btn.favorite-btn.favorited,
.kb-paper-app .action-btn.favorite-btn.favorited:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .action-btn.edit-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .detail-actions #favoriteBtn.favorited,
.kb-paper-app .detail-actions #favoriteBtn.favorited:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .detail-actions #editBtn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    color: var(--kb-accent) !important;
}

/* 删除是不可逆操作，纸感主题下也保留一抹红，与卡片上的删除按钮同色 */
.kb-paper-app .action-btn.delete-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .detail-actions #deleteBtn,
.kb-paper-app .detail-actions #deleteBtn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    color: #c1665a !important;
}

.kb-paper-app .action-btn.delete-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .detail-actions #deleteBtn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: color-mix(in srgb, #c1665a 14%, var(--kb-paper-panel)) !important;
    border-color: color-mix(in srgb, #c1665a 35%, var(--kb-paper-line)) !important;
}

.kb-paper-app .ai-search-trigger {
    background: var(--kb-accent) !important;
    color: var(--kb-paper-panel) !important;
    box-shadow: 0 12px 28px rgba(67, 56, 38, 0.18) !important;
}

[data-theme="dark"] .kb-paper-app .ai-search-trigger {
    color: #1f211f !important;
}

.kb-paper-app .ai-drawer,
.kb-paper-app .ai-drawer-header,
.kb-paper-app .ai-drawer-body,
.kb-paper-app .ai-chat-panel,
.kb-paper-app .ai-chat-messages,
.kb-paper-app .ai-drawer-footer {
    background: var(--kb-paper) !important;
    color: var(--kb-ink) !important;
    border-color: var(--kb-paper-line) !important;
}

.kb-paper-app .ai-session-sidebar,
.kb-paper-app .ai-session-sidebar-header,
.kb-paper-app .ai-session-bar,
.kb-paper-app .ai-session-list {
    background: var(--kb-paper-soft) !important;
    color: var(--kb-ink) !important;
    border-color: var(--kb-paper-line) !important;
}

[data-theme="dark"] .kb-paper-app .ai-drawer,
[data-theme="dark"] .kb-paper-app .ai-drawer-header,
[data-theme="dark"] .kb-paper-app .ai-drawer-body,
[data-theme="dark"] .kb-paper-app .ai-chat-panel,
[data-theme="dark"] .kb-paper-app .ai-chat-messages,
[data-theme="dark"] .kb-paper-app .ai-drawer-footer {
    background: #1f211f !important;
}

[data-theme="dark"] .kb-paper-app .ai-session-sidebar,
[data-theme="dark"] .kb-paper-app .ai-session-sidebar-header,
[data-theme="dark"] .kb-paper-app .ai-session-bar,
[data-theme="dark"] .kb-paper-app .ai-session-list {
    background: #20221d !important;
}

.kb-paper-app .ai-new-chat-btn,
.kb-paper-app .ai-load-more-sessions,
.kb-paper-app .ai-session-item,
.kb-paper-app .ai-session-action {
    background: transparent !important;
    color: var(--kb-ink-soft) !important;
    border-color: var(--kb-paper-line) !important;
}

.kb-paper-app .ai-new-chat-btn,
.kb-paper-app .ai-session-item.active,
.kb-paper-app .ai-project-item.active {
    background: var(--kb-active-bg) !important;
    color: var(--kb-accent) !important;
    border: 1px solid color-mix(in srgb, var(--kb-accent) 30%, var(--kb-paper-line)) !important;
}

/* 「新对话 / 新建项目」的描边与它上面的分段控件凹槽同一条线色：掺了强调色的那条在深色下太亮，看着像粗了一圈 */
.kb-paper-app .ai-new-chat-btn {
    border-color: var(--kb-paper-line) !important;
}

@media (any-hover: hover) {

.kb-paper-app .ai-session-item:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .ai-session-action:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .ai-new-chat-btn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg-strong) !important;
    color: var(--kb-accent) !important;
}
}

/*
 * 会话条目上悬浮出现的按钮组是不透明浮层（见 ai-search.css），它必须跟悬浮态条目
 * 同色才看不出拼接。悬浮态是半透明蒙层叠在侧栏底色上，这里用 color-mix 把同一笔
 * 叠加算成实色——蒙层比例要与 --kb-active-bg-strong 的 alpha 保持一致。
 */
.kb-paper-app .ai-session-item,
.kb-paper-app .ai-session-item.active,
.kb-paper-app .ai-project-item {
    --ai-session-actions-bg: color-mix(in srgb, #6f674d 16%, var(--kb-paper-soft));
}

/* 深色下侧栏底色被单独钉成 #20221d，不是 --kb-paper-soft，这里跟着钉 */
[data-theme="dark"] .kb-paper-app .ai-session-item,
[data-theme="dark"] .kb-paper-app .ai-session-item.active,
[data-theme="dark"] .kb-paper-app .ai-project-item {
    --ai-session-actions-bg: color-mix(in srgb, #d8cb99 18%, #20221d);
}

/* 项目行的悬浮成色与会话行同一笔；选中行也用这笔，不再单独留淡蓝——
   列表整块重画后选中行才是稳定的强调色，不会与 hover 成色来回跳。
   选中行在收起状态（行本身不被 hover）也必须保持可见，:hover 那层遮不住它。
*/
@media (any-hover: hover) {
.kb-paper-app .ai-project-item:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg-strong) !important;
}
}

.kb-paper-app .ai-project-item.active {
    background: var(--kb-active-bg) !important;
    color: var(--kb-accent) !important;
}

.kb-paper-app .message-ai {
    background: color-mix(in srgb, var(--kb-paper-soft) 74%, var(--kb-accent-soft)) !important;
    color: var(--kb-ink) !important;
}

.kb-paper-app .message-ai.message-ai-error {
    background: color-mix(in srgb, var(--color-error) 8%, var(--kb-paper-soft)) !important;
    border-color: color-mix(in srgb, var(--color-error) 26%, transparent) !important;
}

.kb-paper-app .message-user {
    background: var(--kb-accent) !important;
    color: var(--kb-paper-panel) !important;
}

[data-theme="dark"] .kb-paper-app .message-user {
    color: #1f211f !important;
}

/*
 * 暗色纸张主题下用户气泡里的链接。
 *
 * 用户气泡的底色是 --kb-accent，暗色纸张下它是米黄的 #d8cb99，正文因此被上面那条
 * 规则翻成深墨色。但 ai-search.css 里的 `.message-user .ai-message-content a`
 * 把链接钉死成 `#fff !important`——白字压在米黄底上对比度只有约 1.4:1，几乎看不见。
 * 那条规则是按「用户气泡永远是深蓝底」写的，在纸张主题下前提不成立。
 */
[data-theme="dark"] .kb-paper-app .message-user .ai-message-content a {
    color: #1f211f !important;
    border-bottom-color: rgba(31, 33, 31, 0.45) !important;
}

[data-theme="dark"] .kb-paper-app .message-user .ai-message-content a:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    color: #000 !important;
    border-bottom-color: #1f211f !important;
    border-bottom-style: solid !important;
}

.kb-paper-app .ai-input-container {
    background: var(--kb-paper-soft) !important;
    border: 1px solid var(--kb-paper-line) !important;
    box-shadow: none !important;
}

.kb-paper-app .ai-input-container:focus-within {
    border-color: color-mix(in srgb, var(--kb-accent) 48%, var(--kb-paper-line)) !important;
    box-shadow: 0 0 0 3px var(--kb-accent-soft) !important;
}

.kb-paper-app #aiSearchInput,
.kb-paper-app #aiSearchInput:focus,
.kb-paper-app #aiSearchInput:focus-visible {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--kb-ink) !important;
}

/*
 * 输入栏里的四个动作按钮：无底色、hover 才浮出来。
 *
 * 抽屉标题栏上的三颗（重建索引 / 清空 RAG / 关闭）**已经从这一组里摘出去**——
 * 它们现在挂 .kb-header-icon-btn，与首页顶栏、其它抽屉、系统弹框是同一颗按钮。
 * 这里的 `background: transparent !important` 若还罩着它们，那套正圆底色会被
 * 无声地抹平（本文件加载在最后，谁都压不过它），标题栏里就又只剩三个裸图标。
 */
.kb-paper-app .ai-web-search-btn,
.kb-paper-app .ai-think-mode-btn,
.kb-paper-app .ai-upload-btn,
.kb-paper-app .ai-send-btn {
    color: var(--kb-ink-muted) !important;
    background: transparent !important;
}

.kb-paper-app .ai-web-search-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .ai-web-search-btn.active,
.kb-paper-app .ai-think-mode-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .ai-think-mode-btn.active,
.kb-paper-app .ai-upload-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.kb-paper-app .ai-send-btn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    color: var(--kb-accent) !important;
    background: var(--kb-active-bg) !important;
}

/* 停止键：流式期间一直是强调色，不等 hover 才显出来——用户要能一眼找到它 */
.kb-paper-app .ai-send-btn--stop {
    color: var(--kb-accent) !important;
    background: var(--kb-active-bg) !important;
}

/* 停止请求发出去之后到这一轮收尾之间：禁用，防重复点击 */
.kb-paper-app .ai-send-btn:disabled {
    color: var(--kb-control-disabled-text) !important;
    background: transparent !important;
}

.kb-paper-app .ai-streaming .ai-message-content::after {
    color: var(--kb-accent) !important;
}

.kb-paper-app .user-profile-section,
.kb-paper-app .user-profile-actions,
.kb-paper-app .user-profile-action-btn,
.kb-paper-app .dialog-content .bg-gray-50.rounded-lg,
.kb-paper-app .dialog-content .bg-gray-100.rounded-lg,
.kb-paper-app .dialog-content .bg-white.rounded-lg,
.kb-paper-app .dialog-content .dark\:bg-gray-700.rounded-lg,
.kb-paper-app .dialog-content .dark\:bg-gray-800.rounded-lg,
.kb-paper-app .dialog-footer,
.kb-paper-app .doc-converter-format-section,
.kb-paper-app .ai-reasoning-panel,
.kb-paper-app .ios-confirm-content,
.kb-paper-app .category-actions-popover,
.kb-paper-app #parent-category-dropdown {
    /* background: var(--kb-dialog-module-bg) !important;
    background-color: var(--kb-dialog-module-bg) !important; */
    color: var(--kb-ink) !important;
    border-color: var(--kb-paper-line) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .kb-paper-app .dialog-content .bg-gray-50.rounded-lg,
[data-theme="dark"] .kb-paper-app .dialog-content .bg-gray-100.rounded-lg,
[data-theme="dark"] .kb-paper-app .dialog-content .bg-white.rounded-lg,
[data-theme="dark"] .kb-paper-app .dialog-content .dark\:bg-gray-700.rounded-lg,
[data-theme="dark"] .kb-paper-app .dialog-content .dark\:bg-gray-800.rounded-lg,
[data-theme="dark"] .kb-paper-app .dialog-footer,
[data-theme="dark"] .kb-paper-app .doc-converter-format-section,
[data-theme="dark"] .kb-paper-app .ai-reasoning-panel,
[data-theme="dark"] [data-theme="dark"] .kb-paper-app .ios-confirm-content,
[data-theme="dark"] .kb-paper-app .category-actions-popover,
[data-theme="dark"] .kb-paper-app #parent-category-dropdown,
body.kb-paper-app[data-theme="dark"] .dialog-content .bg-gray-50.rounded-lg,
body.kb-paper-app[data-theme="dark"] .dialog-content .bg-gray-100.rounded-lg,
body.kb-paper-app[data-theme="dark"] .dialog-content .bg-white.rounded-lg,
body.kb-paper-app[data-theme="dark"] .dialog-content .dark\:bg-gray-700.rounded-lg,
body.kb-paper-app[data-theme="dark"] .dialog-content .dark\:bg-gray-800.rounded-lg,
body.kb-paper-app[data-theme="dark"] .dialog-footer,
body.kb-paper-app[data-theme="dark"] .doc-converter-format-section,
body.kb-paper-app[data-theme="dark"] .ai-reasoning-panel,
body.kb-paper-app[data-theme="dark"] .ios-confirm-content,
body.kb-paper-app[data-theme="dark"] .category-actions-popover,
body.kb-paper-app[data-theme="dark"] #parent-category-dropdown,
html.dark .kb-paper-app .dialog-content .bg-gray-50.rounded-lg,
html.dark .kb-paper-app .dialog-content .bg-gray-100.rounded-lg,
html.dark .kb-paper-app .dialog-content .bg-white.rounded-lg,
html.dark .kb-paper-app .dialog-content .dark\:bg-gray-700.rounded-lg,
html.dark .kb-paper-app .dialog-content .dark\:bg-gray-800.rounded-lg,
html.dark .kb-paper-app .dialog-footer,
html.dark .kb-paper-app .doc-converter-format-section,
html.dark .kb-paper-app .ai-reasoning-panel,
html.dark html.dark .kb-paper-app .ios-confirm-content,
html.dark .kb-paper-app .category-actions-popover,
html.dark .kb-paper-app #parent-category-dropdown,
body.kb-paper-app.dark .dialog-content .bg-gray-50.rounded-lg,
body.kb-paper-app.dark .dialog-content .bg-gray-100.rounded-lg,
body.kb-paper-app.dark .dialog-content .bg-white.rounded-lg,
body.kb-paper-app.dark .dialog-content .dark\:bg-gray-700.rounded-lg,
body.kb-paper-app.dark .dialog-content .dark\:bg-gray-800.rounded-lg,
body.kb-paper-app.dark .dialog-footer,
body.kb-paper-app.dark .doc-converter-format-section,
body.kb-paper-app.dark .ai-reasoning-panel,
body.kb-paper-app.dark .ios-confirm-content,
body.kb-paper-app.dark .category-actions-popover,
body.kb-paper-app.dark #parent-category-dropdown {
    /* background: var(--kb-dialog-module-bg) !important; */
    /* background-color: var(--kb-dialog-module-bg) !important; */
    border-color: var(--kb-paper-line) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .kb-paper-app .user-profile-section,
[data-theme="dark"] .kb-paper-app .user-profile-actions,
[data-theme="dark"] .kb-paper-app .user-profile-action-btn,
body.kb-paper-app[data-theme="dark"] .user-profile-section,
body.kb-paper-app[data-theme="dark"] .user-profile-actions,
body.kb-paper-app[data-theme="dark"] .user-profile-action-btn,
html.dark .kb-paper-app .user-profile-section,
html.dark .kb-paper-app .user-profile-actions,
html.dark .kb-paper-app .user-profile-action-btn,
body.kb-paper-app.dark .user-profile-section,
body.kb-paper-app.dark .user-profile-actions,
body.kb-paper-app.dark .user-profile-action-btn,
.dark .kb-paper-app .user-profile-section,
.dark .kb-paper-app .user-profile-actions,
.dark .kb-paper-app .user-profile-action-btn {
    background: var(--kb-dialog-module-bg) !important;
    background-color: var(--kb-dialog-module-bg) !important;
    color: var(--kb-ink) !important;
    border-color: var(--kb-paper-line) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .kb-paper-app .user-profile-actions,
body.kb-paper-app[data-theme="dark"] .user-profile-actions,
html.dark .kb-paper-app .user-profile-actions,
body.kb-paper-app.dark .user-profile-actions,
.dark .kb-paper-app .user-profile-actions {
    background: #242620 !important;
    background-color: #242620 !important;
}

.kb-paper-app .user-profile-section h4,
.kb-paper-app .user-profile-info-value,
.kb-paper-app .user-profile-action-btn span {
    color: var(--kb-ink) !important;
    border-color: var(--kb-paper-line) !important;
}

.kb-paper-app .user-profile-info-label {
    color: var(--kb-ink-soft) !important;
}

.kb-paper-app .user-profile-edit-btn {
    color: var(--kb-accent) !important;
}

.kb-paper-app .user-profile-action-btn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg) !important;
    border-color: color-mix(in srgb, var(--kb-accent) 32%, var(--kb-paper-line)) !important;
}

[data-theme="dark"] .kb-paper-app .user-profile-action-btn:hover:not(:where(html[data-kb-pointer="touch"] *)),
.dark .kb-paper-app .user-profile-action-btn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg) !important;
    background-color: var(--kb-active-bg) !important;
}

.kb-paper-app .user-profile-action-btn > div,
.kb-paper-app .user-profile-action-btn:has(.text-blue-500) > div,
.kb-paper-app .user-profile-action-btn:has(.text-blue-300) > div {
    background: var(--kb-active-bg) !important;
    color: var(--kb-accent) !important;
}

.kb-paper-app .user-profile-action-btn i.text-blue-500,
.kb-paper-app .user-profile-action-btn i.text-blue-300 {
    color: var(--kb-accent) !important;
}

/* 空数据状态：图标与说明文字统一接入阅读主题 */
.kb-paper-app .empty-state,
.kb-paper-app .detail-empty,
.kb-paper-app .empty-state-container,
.kb-paper-app .attachments-empty,
.kb-paper-app .toc-empty,
.kb-paper-app .ai-session-empty {
    background: transparent !important;
    color: var(--kb-ink-muted) !important;
    border-color: var(--kb-paper-line) !important;
    box-shadow: none !important;
}

.kb-paper-app .empty-state-icon,
.kb-paper-app .empty-state-icon[style],
.kb-paper-app .empty-state-icon i,
.kb-paper-app .empty-state-icon i[style],
.kb-paper-app .empty-state .empty-icon,
.kb-paper-app .detail-empty i,
.kb-paper-app .attachments-empty i,
.kb-paper-app .toc-empty i,
.kb-paper-app .ai-session-empty i {
    color: color-mix(in srgb, var(--kb-accent) 58%, var(--kb-ink-muted)) !important;
    opacity: 0.68 !important;
}

.kb-paper-app .empty-state-title,
.kb-paper-app .empty-state-title[style],
.kb-paper-app .knowledge-list-empty .empty-state-title,
.kb-paper-app .knowledge-detail-empty .empty-state-title,
.kb-paper-app .search-empty .empty-state-title,
.kb-paper-app .category-empty .empty-state-title,
.kb-paper-app .error-empty .empty-state-title,
.kb-paper-app .detail-empty h3,
.kb-paper-app .attachments-empty p,
.kb-paper-app .toc-empty span,
.kb-paper-app .ai-session-empty {
    color: var(--kb-ink-soft) !important;
}

.kb-paper-app .empty-state-description,
.kb-paper-app .empty-state-description[style],
.kb-paper-app .detail-empty p,
.kb-paper-app .empty-state p {
    color: var(--kb-ink-muted) !important;
}

.kb-paper-app .empty-state-container {
    min-height: 220px;
}

.kb-paper-app .detail-empty .empty-state-container {
    min-height: 300px;
}

[data-theme="dark"] .kb-paper-app .empty-state-icon,
[data-theme="dark"] .kb-paper-app .empty-state-icon[style],
[data-theme="dark"] .kb-paper-app .empty-state-icon i,
[data-theme="dark"] .kb-paper-app .empty-state-icon i[style],
[data-theme="dark"] .kb-paper-app .empty-state .empty-icon,
[data-theme="dark"] .kb-paper-app .detail-empty i,
[data-theme="dark"] .kb-paper-app .attachments-empty i,
[data-theme="dark"] .kb-paper-app .toc-empty i,
[data-theme="dark"] .kb-paper-app .ai-session-empty i,
body.kb-paper-app[data-theme="dark"] .empty-state-icon,
body.kb-paper-app[data-theme="dark"] .empty-state-icon[style],
body.kb-paper-app[data-theme="dark"] .empty-state-icon i,
body.kb-paper-app[data-theme="dark"] .empty-state-icon i[style],
body.kb-paper-app[data-theme="dark"] .empty-state .empty-icon,
body.kb-paper-app[data-theme="dark"] .detail-empty i,
body.kb-paper-app[data-theme="dark"] .attachments-empty i,
body.kb-paper-app[data-theme="dark"] .toc-empty i,
body.kb-paper-app[data-theme="dark"] .ai-session-empty i,
html.dark .kb-paper-app .empty-state-icon,
html.dark .kb-paper-app .empty-state-icon[style],
html.dark .kb-paper-app .empty-state-icon i,
html.dark .kb-paper-app .empty-state-icon i[style],
html.dark .kb-paper-app .empty-state .empty-icon,
html.dark .kb-paper-app .detail-empty i,
html.dark .kb-paper-app .attachments-empty i,
html.dark .kb-paper-app .toc-empty i,
html.dark .kb-paper-app .ai-session-empty i {
    color: color-mix(in srgb, var(--kb-accent) 52%, var(--kb-ink-muted)) !important;
    opacity: 0.62 !important;
}

/* Toast 通知：覆盖组件内联亮色，统一接入纸张主题 */
.kb-paper-app .notification {
    --kb-toast-tone: var(--kb-accent);
    --kb-toast-bg: color-mix(in srgb, var(--kb-toast-tone) 14%, var(--kb-paper-panel));
    --kb-toast-text: color-mix(in srgb, var(--kb-toast-tone) 72%, var(--kb-ink));
    --kb-toast-border: color-mix(in srgb, var(--kb-toast-tone) 26%, var(--kb-paper-line));
    background: var(--kb-toast-bg) !important;
    background-color: var(--kb-toast-bg) !important;
    color: var(--kb-toast-text) !important;
    border: 1px solid var(--kb-toast-border) !important;
    border-left: 1px solid var(--kb-toast-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 36px rgba(67, 56, 38, 0.16), 0 1px 0 rgba(255, 255, 255, 0.55) inset !important;
    font-family: var(--font-family-content) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    padding: 12px 18px !important;
    backdrop-filter: blur(16px) saturate(1.06);
    -webkit-backdrop-filter: blur(16px) saturate(1.06);
}

.kb-paper-app .notification::before {
    display: none !important;
}

.kb-paper-app .notification-success,
.kb-paper-app .notification--success {
    --kb-toast-tone: #6f8f5f;
    --kb-toast-bg: color-mix(in srgb, #6f8f5f 16%, var(--kb-paper-panel));
    --kb-toast-text: #49633e;
    --kb-toast-border: color-mix(in srgb, #6f8f5f 28%, var(--kb-paper-line));
}

.kb-paper-app .notification-error,
.kb-paper-app .notification--error {
    --kb-toast-tone: #b85f54;
    --kb-toast-bg: color-mix(in srgb, #b85f54 15%, var(--kb-paper-panel));
    --kb-toast-text: #8a3930;
    --kb-toast-border: color-mix(in srgb, #b85f54 30%, var(--kb-paper-line));
}

.kb-paper-app .notification-warning,
.kb-paper-app .notification--warning {
    --kb-toast-tone: #b88a2e;
    --kb-toast-bg: color-mix(in srgb, #b88a2e 17%, var(--kb-paper-panel));
    --kb-toast-text: #79561f;
    --kb-toast-border: color-mix(in srgb, #b88a2e 30%, var(--kb-paper-line));
}

.kb-paper-app .notification-info,
.kb-paper-app .notification--info {
    --kb-toast-tone: var(--kb-accent);
    --kb-toast-bg: color-mix(in srgb, var(--kb-accent) 15%, var(--kb-paper-panel));
    --kb-toast-text: var(--kb-accent-strong);
    --kb-toast-border: color-mix(in srgb, var(--kb-accent) 28%, var(--kb-paper-line));
}

[data-theme="dark"] .kb-paper-app .notification,
body.kb-paper-app[data-theme="dark"] .notification,
html.dark .kb-paper-app .notification,
body.kb-paper-app.dark .notification,
.dark .kb-paper-app .notification {
    background: var(--kb-toast-bg) !important;
    background-color: var(--kb-toast-bg) !important;
    color: var(--kb-toast-text) !important;
    border-color: var(--kb-toast-border) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

[data-theme="dark"] .kb-paper-app .notification-success,
[data-theme="dark"] .kb-paper-app .notification--success,
body.kb-paper-app[data-theme="dark"] .notification-success,
body.kb-paper-app[data-theme="dark"] .notification--success,
html.dark .kb-paper-app .notification-success,
html.dark .kb-paper-app .notification--success,
body.kb-paper-app.dark .notification-success,
body.kb-paper-app.dark .notification--success,
.dark .kb-paper-app .notification-success,
.dark .kb-paper-app .notification--success {
    --kb-toast-tone: #9fb48d;
    --kb-toast-bg: color-mix(in srgb, #9fb48d 16%, var(--kb-paper-panel));
    --kb-toast-text: #c8d8b7;
    --kb-toast-border: color-mix(in srgb, #9fb48d 24%, var(--kb-paper-line));
}

[data-theme="dark"] .kb-paper-app .notification-error,
[data-theme="dark"] .kb-paper-app .notification--error,
body.kb-paper-app[data-theme="dark"] .notification-error,
body.kb-paper-app[data-theme="dark"] .notification--error,
html.dark .kb-paper-app .notification-error,
html.dark .kb-paper-app .notification--error,
body.kb-paper-app.dark .notification-error,
body.kb-paper-app.dark .notification--error,
.dark .kb-paper-app .notification-error,
.dark .kb-paper-app .notification--error {
    --kb-toast-tone: #d18478;
    --kb-toast-bg: color-mix(in srgb, #d18478 16%, var(--kb-paper-panel));
    --kb-toast-text: #efb3aa;
    --kb-toast-border: color-mix(in srgb, #d18478 25%, var(--kb-paper-line));
}

[data-theme="dark"] .kb-paper-app .notification-warning,
[data-theme="dark"] .kb-paper-app .notification--warning,
body.kb-paper-app[data-theme="dark"] .notification-warning,
body.kb-paper-app[data-theme="dark"] .notification--warning,
html.dark .kb-paper-app .notification-warning,
html.dark .kb-paper-app .notification--warning,
body.kb-paper-app.dark .notification-warning,
body.kb-paper-app.dark .notification--warning,
.dark .kb-paper-app .notification-warning,
.dark .kb-paper-app .notification--warning {
    --kb-toast-tone: #d8bd78;
    --kb-toast-bg: color-mix(in srgb, #d8bd78 16%, var(--kb-paper-panel));
    --kb-toast-text: #ebd694;
    --kb-toast-border: color-mix(in srgb, #d8bd78 24%, var(--kb-paper-line));
}

[data-theme="dark"] .kb-paper-app .notification-info,
[data-theme="dark"] .kb-paper-app .notification--info,
body.kb-paper-app[data-theme="dark"] .notification-info,
body.kb-paper-app[data-theme="dark"] .notification--info,
html.dark .kb-paper-app .notification-info,
html.dark .kb-paper-app .notification--info,
body.kb-paper-app.dark .notification-info,
body.kb-paper-app.dark .notification--info,
.dark .kb-paper-app .notification-info,
.dark .kb-paper-app .notification--info {
    --kb-toast-bg: color-mix(in srgb, var(--kb-accent) 14%, var(--kb-paper-panel));
    --kb-toast-text: color-mix(in srgb, var(--kb-accent) 70%, var(--kb-ink));
    --kb-toast-border: color-mix(in srgb, var(--kb-accent) 24%, var(--kb-paper-line));
}

.kb-paper-app .ios-confirm-content {
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: min(320px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
}

.kb-paper-app .convert-btn {
    background: var(--kb-accent) !important;
    border: 1px solid color-mix(in srgb, var(--kb-accent) 78%, var(--kb-paper-line)) !important;
    color: var(--kb-paper-panel) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--kb-accent) 20%, transparent) !important;
}

.kb-paper-app .convert-btn:hover:not(:where(html[data-kb-pointer="touch"] *)):not(:disabled) {
    background: var(--kb-accent-strong) !important;
    border-color: var(--kb-accent-strong) !important;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--kb-accent) 26%, transparent) !important;
}

.kb-paper-app .convert-btn:disabled {
    background: var(--kb-control-disabled-bg) !important;
    border-color: var(--kb-control-disabled-border) !important;
    color: var(--kb-control-disabled-text) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .kb-paper-app .convert-btn {
    color: #1f211f !important;
}

[data-theme="dark"] .kb-paper-app .convert-btn:disabled,
body.kb-paper-app[data-theme="dark"] .convert-btn:disabled,
html.dark .kb-paper-app .convert-btn:disabled,
body.kb-paper-app.dark .convert-btn:disabled,
.dark .kb-paper-app .convert-btn:disabled {
    background: var(--kb-control-disabled-bg) !important;
    border-color: var(--kb-control-disabled-border) !important;
    color: var(--kb-control-disabled-text) !important;
}

@media (max-width: 1023px) {
    body.kb-paper-app,
    [data-theme="dark"] body.kb-paper-app,
    [data-theme="dark"] html {
        background-color: var(--kb-paper) !important;
        background-image:
            radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.72), transparent 32%),
            radial-gradient(circle at 85% 0%, rgba(222, 211, 180, 0.22), transparent 30%),
            repeating-linear-gradient(0deg, rgba(88, 78, 58, 0.018) 0, rgba(88, 78, 58, 0.018) 1px, transparent 1px, transparent 5px),
            linear-gradient(180deg, var(--kb-paper) 0%, var(--kb-paper-warm) 100%) !important;
        background-size: auto !important;
        background-attachment: fixed !important;
    }

    [data-theme="dark"] body.kb-paper-app,
    body.kb-paper-app[data-theme="dark"],
    html.dark body.kb-paper-app,
    body.kb-paper-app.dark {
        background-image:
            radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.05), transparent 30%),
            radial-gradient(circle at 88% 0%, rgba(216, 203, 153, 0.08), transparent 30%),
            repeating-linear-gradient(0deg, rgba(226, 216, 189, 0.018) 0, rgba(226, 216, 189, 0.018) 1px, transparent 1px, transparent 5px),
            linear-gradient(180deg, var(--kb-paper) 0%, #181a18 100%) !important;
    }

    .kb-paper-app #app,
    .kb-paper-app main,
    .kb-paper-app #mainContentArea,
    .kb-paper-app .mobile-main-content,
    .kb-paper-app .knowledge-area,
    .kb-paper-app .knowledge-detail,
    .kb-paper-app .detail-content-wrapper,
    .kb-paper-app .detail-content,
    .kb-paper-app .detail-panel__content {
        background: transparent !important;
        background-color: transparent !important;
    }

    .kb-paper-app .detail-panel,
    .kb-paper-app .detail-panel.detail-panel--show,
    .kb-paper-app .detail-panel--show {
        background-color: var(--kb-paper) !important;
        background-image:
            radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.72), transparent 32%),
            radial-gradient(circle at 85% 0%, rgba(222, 211, 180, 0.22), transparent 30%),
            repeating-linear-gradient(0deg, rgba(88, 78, 58, 0.018) 0, rgba(88, 78, 58, 0.018) 1px, transparent 1px, transparent 5px),
            linear-gradient(180deg, var(--kb-paper) 0%, var(--kb-paper-warm) 100%) !important;
        background-size: auto !important;
        background-position: center top !important;
        background-attachment: local !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    [data-theme="dark"] .kb-paper-app .detail-panel,
    [data-theme="dark"] .kb-paper-app .detail-panel.detail-panel--show,
    [data-theme="dark"] .kb-paper-app .detail-panel--show,
    html.dark .kb-paper-app .detail-panel,
    html.dark .kb-paper-app .detail-panel.detail-panel--show,
    html.dark .kb-paper-app .detail-panel--show,
    body.kb-paper-app.dark .detail-panel,
    body.kb-paper-app.dark .detail-panel.detail-panel--show,
    body.kb-paper-app.dark .detail-panel--show {
        background-color: var(--kb-paper) !important;
        background-image:
            radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.05), transparent 30%),
            radial-gradient(circle at 88% 0%, rgba(216, 203, 153, 0.08), transparent 30%),
            repeating-linear-gradient(0deg, rgba(226, 216, 189, 0.018) 0, rgba(226, 216, 189, 0.018) 1px, transparent 1px, transparent 5px),
            linear-gradient(180deg, var(--kb-paper) 0%, #181a18 100%) !important;
    }

    .kb-paper-app .ios-confirm-content {
        width: min(320px, calc(100vw - 32px)) !important;
        max-width: min(320px, calc(100vw - 32px)) !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    @media (min-width: 600px) {
        .kb-paper-app .ios-confirm-content {
            width: 320px !important;
            max-width: 320px !important;
        }
    }

    .knowledge-grid-container {
        padding: 0.85rem 0.85rem 1rem;
    }

    .detail-content {
        padding: 0;
    }

    .detail-body {
        padding: 1rem;
    }

    .detail-panel {
        /* border-radius: 18px 18px 0 0; */
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .detail-panel-content {
        padding: 1.1rem !important;
    }

    .detail-panel-main,
    .knowledge-content {
        /* 字号已由 --kb-content-font-size 在同一个断点上降档，这里只调行距 */
        line-height: 1.78 !important;
    }

    .knowledge-content p,
    .knowledge-content li {
        line-height: 1.78 !important;
    }
}

/* 知识库核心体验：列表、详情、新增/编辑统一使用衬线字体 */
.kb-paper-app #currentPageTitle,
.kb-paper-app .mobile-search-bar,
.kb-paper-app .mobile-search-bar input,
.kb-paper-app .mobile-search-bar button,
.kb-paper-app .knowledge-list,
.kb-paper-app .knowledge-list input,
.kb-paper-app .knowledge-list textarea,
.kb-paper-app .knowledge-list select,
.kb-paper-app .knowledge-list button,
.kb-paper-app .knowledge-list .sort-dropdown,
.kb-paper-app .knowledge-list .sort-option,
.kb-paper-app .knowledge-list .pagination-wrapper,
.kb-paper-app .knowledge-list .pagination-container,
.kb-paper-app .knowledge-list .pagination-btn,
.kb-paper-app .knowledge-list .pagination-info,
.kb-paper-app .knowledge-card,
.kb-paper-app .knowledge-card-title,
.kb-paper-app .knowledge-card-excerpt,
.kb-paper-app .knowledge-card-meta,
.kb-paper-app .knowledge-card-date,
.kb-paper-app .knowledge-card-tag,
.kb-paper-app .knowledge-card-category,
.kb-paper-app .knowledge-detail,
.kb-paper-app .knowledge-detail button,
.kb-paper-app .detail-title,
.kb-paper-app .detail-title h2,
.kb-paper-app .detail-tags,
.kb-paper-app .detail-tag,
.kb-paper-app .detail-content,
.kb-paper-app .detail-body,
.kb-paper-app .detail-excerpt,
.kb-paper-app .detail-main,
.kb-paper-app .knowledge-content,
.kb-paper-app .knowledge-content h1,
.kb-paper-app .knowledge-content h2,
.kb-paper-app .knowledge-content h3,
.kb-paper-app .knowledge-content h4,
.kb-paper-app .knowledge-content h5,
.kb-paper-app .knowledge-content h6,
.kb-paper-app .knowledge-content p,
.kb-paper-app .knowledge-content li,
.kb-paper-app .knowledge-content blockquote,
.kb-paper-app .knowledge-content table,
.kb-paper-app .knowledge-content td,
.kb-paper-app .knowledge-content th,
.kb-paper-app .detail-attachments,
.kb-paper-app .detail-attachments h4,
.kb-paper-app .attachments-container,
.kb-paper-app .attachments-list,
.kb-paper-app .attachments-empty,
.kb-paper-app .detail-meta,
.kb-paper-app .meta-item,
.kb-paper-app .meta-label,
.kb-paper-app .meta-value,
.kb-paper-app .detail-panel,
.kb-paper-app .detail-panel button,
.kb-paper-app .detail-panel-title,
.kb-paper-app .detail-panel-tags,
.kb-paper-app .detail-panel-content,
.kb-paper-app .detail-panel-excerpt,
.kb-paper-app .detail-panel-main,
.kb-paper-app .detail-panel-attachments,
.kb-paper-app .detail-panel-attachments h4,
.kb-paper-app .detail-panel-meta,
.kb-paper-app .detail-panel-actions,
.kb-paper-app .detail-panel-action-btn,
.kb-paper-app .toc-panel,
.kb-paper-app .toc-panel-title,
.kb-paper-app .toc-panel-body,
.kb-paper-app .toc-link,
.kb-paper-app .toc-empty,
.kb-paper-app .toc-slide-panel,
.kb-paper-app .toc-slide-panel-title,
.kb-paper-app .toc-slide-panel-body,
.kb-paper-app .empty-state,
.kb-paper-app .empty-state-container,
.kb-paper-app .empty-state-title,
.kb-paper-app .empty-state-description,
.kb-paper-app .detail-empty,
.kb-paper-app .detail-empty h3,
.kb-paper-app .detail-empty p,
.kb-paper-app .editor-panel,
.kb-paper-app .editor-header,
.kb-paper-app .editor-title,
.kb-paper-app .editor-body,
.kb-paper-app .editor-form,
.kb-paper-app .editor-form label,
.kb-paper-app .editor-form input,
.kb-paper-app .editor-form textarea,
.kb-paper-app .editor-form select,
.kb-paper-app .editor-form button,
.kb-paper-app .editor-footer,
.kb-paper-app .editor-footer button,
.kb-paper-app .form-group,
.kb-paper-app .form-label,
.kb-paper-app .form-hint,
.kb-paper-app .form-input,
.kb-paper-app .form-textarea,
.kb-paper-app .form-checkbox-label,
.kb-paper-app .tags-field,
.kb-paper-app .tags-chip,
.kb-paper-app .tags-select-btn,
.kb-paper-app .tags-display,
.kb-paper-app .tags-dialog,
.kb-paper-app .tags-dialog-title,
.kb-paper-app .tags-dialog .search-input,
.kb-paper-app .tags-dialog-count,
.kb-paper-app .tags-dialog-footer button,
.kb-paper-app .tags-tree,
.kb-paper-app .tags-tree .tag-item,
.kb-paper-app .tags-tree .tag-name,
.kb-paper-app .no-tags,
.kb-paper-app .upload-area,
.kb-paper-app .upload-text,
.kb-paper-app .upload-primary,
.kb-paper-app .upload-secondary,
.kb-paper-app .upload-limit,
.kb-paper-app .attachments-upload,
.kb-paper-app .quill-editor,
.kb-paper-app .quill-editor .ql-container,
.kb-paper-app .quill-editor .ql-editor,
.kb-paper-app .ql-editor,
.kb-paper-app .ql-editor h1,
.kb-paper-app .ql-editor h2,
.kb-paper-app .ql-editor h3,
.kb-paper-app .ql-editor h4,
.kb-paper-app .ql-editor h5,
.kb-paper-app .ql-editor h6,
.kb-paper-app .ql-editor p,
.kb-paper-app .ql-editor li,
.kb-paper-app .ql-editor blockquote,
.kb-paper-app .ql-editor table,
.kb-paper-app .ql-editor td,
.kb-paper-app .ql-editor th,
.kb-paper-app .ql-toolbar.ql-snow .ql-picker-label,
.kb-paper-app .ql-toolbar.ql-snow .ql-picker-item,
.kb-paper-app .ql-toolbar.ql-snow .ql-tooltip,
.kb-paper-app .ql-toolbar.ql-snow .ql-tooltip input {
    font-family: var(--font-family-content) !important;
}

.kb-paper-app .knowledge-list input::placeholder,
.kb-paper-app .mobile-search-bar input::placeholder,
.kb-paper-app .editor-panel input::placeholder,
.kb-paper-app .editor-panel textarea::placeholder,
.kb-paper-app .quill-editor .ql-editor.ql-blank::before,
.kb-paper-app .ql-editor.ql-blank::before {
    font-family: var(--font-family-content) !important;
}

.kb-paper-app .knowledge-content code,
.kb-paper-app .knowledge-content kbd,
.kb-paper-app .knowledge-content samp,
.kb-paper-app .knowledge-content pre,
.kb-paper-app .knowledge-content .ql-code-block,
.kb-paper-app .knowledge-content .ql-code-block-container,
.kb-paper-app .knowledge-content .ql-syntax,
.kb-paper-app .editor-panel code,
.kb-paper-app .editor-panel kbd,
.kb-paper-app .editor-panel samp,
.kb-paper-app .editor-panel pre,
.kb-paper-app .editor-panel .ql-code-block,
.kb-paper-app .editor-panel .ql-code-block-container,
.kb-paper-app .editor-panel .ql-syntax {
    font-family: var(--font-family-mono) !important;
}

.kb-paper-app .ql-toolbar.ql-snow .ql-color .ql-picker-label::before,
.kb-paper-app .ql-toolbar.ql-snow .ql-background .ql-picker-label::before {
    font-family: var(--font-family-content) !important;
}

html[data-kb-font] body.kb-paper-app,
html[data-kb-font] body.kb-paper-app * {
    font-family: var(--font-family-content) !important;
}

html[data-kb-font] body.kb-paper-app code,
html[data-kb-font] body.kb-paper-app code *,
html[data-kb-font] body.kb-paper-app pre,
html[data-kb-font] body.kb-paper-app pre *,
html[data-kb-font] body.kb-paper-app kbd,
html[data-kb-font] body.kb-paper-app kbd *,
html[data-kb-font] body.kb-paper-app samp,
html[data-kb-font] body.kb-paper-app samp *,
html[data-kb-font] body.kb-paper-app .hljs,
html[data-kb-font] body.kb-paper-app .hljs *,
html[data-kb-font] body.kb-paper-app .ql-code-block,
html[data-kb-font] body.kb-paper-app .ql-code-block *,
html[data-kb-font] body.kb-paper-app .ql-code-block-container,
html[data-kb-font] body.kb-paper-app .ql-code-block-container *,
html[data-kb-font] body.kb-paper-app .ql-syntax,
html[data-kb-font] body.kb-paper-app .ql-syntax * {
    font-family: var(--font-family-mono) !important;
}

html[data-kb-font] body.kb-paper-app [class^="ri-"],
html[data-kb-font] body.kb-paper-app [class*=" ri-"],
html[data-kb-font] body.kb-paper-app [class^="ri-"]::before,
html[data-kb-font] body.kb-paper-app [class*=" ri-"]::before {
    font-family: "remixicon" !important;
}

html[data-kb-font] body.kb-paper-app .katex,
html[data-kb-font] body.kb-paper-app .katex * {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
}

html[data-kb-font] body.kb-paper-app .katex .textrm,
html[data-kb-font] body.kb-paper-app .katex .mathrm,
html[data-kb-font] body.kb-paper-app .katex .mathbf,
html[data-kb-font] body.kb-paper-app .katex .mainrm {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
}

html[data-kb-font] body.kb-paper-app .katex .mathnormal,
html[data-kb-font] body.kb-paper-app .katex .boldsymbol {
    font-family: KaTeX_Math, "Times New Roman", serif !important;
}

html[data-kb-font] body.kb-paper-app .katex .textsf,
html[data-kb-font] body.kb-paper-app .katex .mathsf,
html[data-kb-font] body.kb-paper-app .katex .mathboldsf,
html[data-kb-font] body.kb-paper-app .katex .mathitsf,
html[data-kb-font] body.kb-paper-app .katex .mathsfit,
html[data-kb-font] body.kb-paper-app .katex .textitsf,
html[data-kb-font] body.kb-paper-app .katex .textboldsf {
    font-family: KaTeX_SansSerif, sans-serif !important;
}

html[data-kb-font] body.kb-paper-app .katex .texttt,
html[data-kb-font] body.kb-paper-app .katex .mathtt {
    font-family: KaTeX_Typewriter, monospace !important;
}

html[data-kb-font] body.kb-paper-app .katex .amsrm,
html[data-kb-font] body.kb-paper-app .katex .mathbb,
html[data-kb-font] body.kb-paper-app .katex .textbb {
    font-family: KaTeX_AMS, serif !important;
}

html[data-kb-font] body.kb-paper-app .katex .mathcal {
    font-family: KaTeX_Caligraphic, serif !important;
}

html[data-kb-font] body.kb-paper-app .katex .mathfrak,
html[data-kb-font] body.kb-paper-app .katex .textfrak,
html[data-kb-font] body.kb-paper-app .katex .mathboldfrak,
html[data-kb-font] body.kb-paper-app .katex .textboldfrak {
    font-family: KaTeX_Fraktur, serif !important;
}

html[data-kb-font] body.kb-paper-app .katex .mathscr,
html[data-kb-font] body.kb-paper-app .katex .textscr {
    font-family: KaTeX_Script, cursive !important;
}

html[data-kb-font] body.kb-paper-app .katex .delimsizing.size1,
html[data-kb-font] body.kb-paper-app .katex .op-symbol.small-op,
html[data-kb-font] body.kb-paper-app .katex .delim-size1 > span {
    font-family: KaTeX_Size1, serif !important;
}

html[data-kb-font] body.kb-paper-app .katex .delimsizing.size2,
html[data-kb-font] body.kb-paper-app .katex .op-symbol.large-op {
    font-family: KaTeX_Size2, serif !important;
}

html[data-kb-font] body.kb-paper-app .katex .delimsizing.size3 {
    font-family: KaTeX_Size3, serif !important;
}

html[data-kb-font] body.kb-paper-app .katex .delimsizing.size4,
html[data-kb-font] body.kb-paper-app .katex .delim-size4 > span {
    font-family: KaTeX_Size4, serif !important;
}