/* ═══ Sidebar ═══ */

    .sidebar {

      width: var(--sidebar-w); flex-shrink: 0;

      border-right: 1px solid var(--line);

      background: var(--surface);

      backdrop-filter: blur(var(--glass-blur));

      -webkit-backdrop-filter: blur(var(--glass-blur));

      overflow-y: auto; overflow-x: hidden;

      transition: width 0.3s ease, margin-left 0.3s ease, opacity 0.25s ease;

      display: flex; flex-direction: column;

    }

    .sidebar.collapsed {

      width: var(--sidebar-collapsed-w);

      opacity: 0;

      border-right-color: transparent;

      pointer-events: none;

    }

    .sidebar-search {

      padding: 14px 14px 0; flex-shrink: 0;

    }

    .sidebar-search input {

      width: 100%; min-height: 36px; padding: 6px 12px;

      border: 1px solid var(--line); border-radius: var(--radius-sm);

      background: var(--surface-solid); color: var(--text);

      font: inherit; font-size: 0.82rem; outline: none;

      transition: border-color 0.15s;

    }

    .sidebar-search input:focus { border-color: var(--accent); }

    .sidebar-search input::placeholder { color: var(--text-muted); }

    /* 排序按钮行：搜索框 + 时间排序图标按钮同排（20260910）
       无边框图标按钮；两态：idle（默认顺序）→ is-active（时间正序 旧→新）。 */
    .sidebar-search-row { display: flex; align-items: center; gap: 6px; }
    .sidebar-search-row > input { flex: 1 1 auto; width: auto; min-width: 0; }
    .sb-sort-btn {
      flex: 0 0 auto;
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; padding: 0; margin: 0;
      background: none; border: 0; border-radius: 6px;
      color: var(--text-muted); cursor: pointer;
      transition: color 0.15s, background-color 0.15s;
    }
    .sb-sort-btn:hover { color: var(--text); background: var(--surface-hover); }
    .sb-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .sb-sort-btn.is-active { color: var(--accent-light); background: var(--accent-bg); }
    .sb-sort-btn.is-active:hover { color: var(--accent-light); background: var(--accent-bg-hover); }
    .sb-sort-btn svg { display: block; }
    .sb-sort-btn .sb-sort-ico-on { display: none; }
    .sb-sort-btn.is-active .sb-sort-ico-idle { display: none; }
    .sb-sort-btn.is-active .sb-sort-ico-on { display: block; }

    .sidebar-nav {

      flex: 1; overflow-y: auto; padding: 8px 0;

    }

    .sidebar-section { padding: 0 14px; margin-bottom: 2px; }




    /* Tab bar: 大纲 ↔ 目录 */


    .sidebar-tab:hover { color: var(--text); background: var(--surface-hover); }
    .sidebar-tab.active {
      color: var(--accent-light); border-bottom-color: var(--accent); font-weight: 600;
    }
    /* Chapter headers */

    .sidebar-chapter { margin-bottom: 2px; }

    .sidebar-chapter-header {

      display: flex; align-items: center; gap: 6px;

      padding: 10px 12px; border-radius: var(--radius-sm);

      cursor: pointer; user-select: none; transition: all 0.15s;

      font-size: 0.84rem; font-weight: 600; color: var(--text);

    }

    .sidebar-chapter-header:hover { background: var(--surface-hover); }

    .sidebar-chapter-header .series-badge {

      font-size: 0.6rem; font-weight: 700; text-transform: uppercase;

      padding: 1px 5px; border-radius: 3px;

      background: var(--accent-bg); color: var(--accent-light);

      margin-left: auto;

    }

    .sidebar-chapter-toggle {

      width: 14px; height: 14px; display: grid; place-items: center;

      font-size: 0.55rem; color: var(--text-muted);

      transition: transform 0.2s ease; flex-shrink: 0;

    }

    .sidebar-chapter-toggle.expanded { transform: rotate(90deg); }

    .sidebar-chapter-items {

      overflow: hidden;

      transition: max-height 0.3s ease, opacity 0.3s ease;

      max-height: 2000px; opacity: 1;

    }

    .sidebar-chapter-items.collapsed { max-height: 0; opacity: 0; }

    .sidebar-item {

      display: block; padding: 7px 12px 7px 30px;

      border-radius: var(--radius-sm); text-decoration: none;

      color: var(--text-secondary); font-size: 0.82rem;

      cursor: pointer; transition: all 0.15s; border-left: 2px solid transparent;

      margin-bottom: 1px; white-space: normal; overflow: visible; word-break: break-all;

    }

    .sidebar-item:hover {

      background: var(--surface-hover); color: var(--text);

      border-left-color: var(--line-strong);

    }

    .sidebar-item.active {

      background: var(--accent-bg); color: var(--accent-light);

      font-weight: 500; border-left-color: var(--accent);

    }

    .sidebar-item-child {

      padding: 6px 12px 6px 42px; font-size: 0.8rem;

    }

    /* 子分类层级（Explorer 式目录树）
       DOM 结构：
         .sidebar-chapter > .sidebar-chapter-items
           > a.sidebar-item.sidebar-item-child        ← 根分类直属文章
           > .sidebar-child-cat                        ← 子分类（可继续嵌套）
               > .sidebar-child-cat-header
               > .sidebar-chapter-items.sidebar-child-cat-items
                   > a.sidebar-item.sidebar-item-child
                   > .sidebar-child-cat ...
       缩进模型：整层偏移由 .sidebar-child-cat 自己的 margin-left + border + padding-left 提供
       （14 + 1 + 11 = 26px），嵌套时逐层累加，因此任意深度都自动正确，无需为每层写规则。
       层内「分类标题 → 文章」的相对偏移固定 12px，与根章节（标题 32px / 文章 44px）保持一致。
       实测落点：根标题 32 → 子标题 52（+20）→ 孙标题 78（+26）；
                 根文章 44 → 子文章 64（+20）→ 孙文章 90（+26）。 */

    .sidebar-child-cat {
      margin: 2px 0 2px 14px;
      padding-left: 11px;
      border-left: 1px solid var(--line);
    }

    .sidebar-child-cat-header {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 12px 7px 6px;
      border-radius: var(--radius-sm);
      cursor: pointer; user-select: none;
      transition: background 0.15s, color 0.15s;
      font-size: 0.8rem; font-weight: 600;
      color: var(--text-secondary);
      white-space: normal; word-break: break-word;
    }

    .sidebar-child-cat-header:hover {
      background: var(--surface-hover); color: var(--text);
    }

    /* 子分类下的文章：覆盖 .sidebar-item-child 的 42px 固定内边距，
       改为相对本层容器再进 36px，使「子分类标题 → 其文章」的落差与根章节一致。 */
    .sidebar-child-cat-items > .sidebar-item-child {
      padding-left: 36px;
    }

    .sidebar-empty {

      padding: 24px 14px; color: var(--text-muted);

      font-size: 0.82rem; text-align: center;

    }



    /* Sidebar mode toggle */

    .sb-mode-btn {

      width: 100%; padding: 6px 10px; margin-bottom: 4px;

      background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);

      color: var(--text-secondary); font-size: 0.8rem; cursor: pointer;

      transition: all 0.15s; text-align: center;

    }

    .sb-mode-btn:hover { color: var(--text); background: var(--surface-hover); border-color: var(--accent); }

    /* TOC hierarchical outline (大纲模式)
       结构：.toc-tree > .toc-node.has-children > .toc-row > [.toc-toggle | .toc-item] > .toc-children > ...
       默认全展开（.expanded）；用户点击 chevron 或标题文本通过 JS 切换 .expanded/.collapsed，
       CSS 用 max-height + opacity + chevron 旋转做平滑过渡。 */

    .toc-tree { padding: 4px 0; }

    .toc-node { display: block; }

    .toc-row {
      display: flex; align-items: center; gap: 2px;
      min-height: 28px;
    }

    /* chevron 按钮 —— 简约 SVG，靠 CSS 类驱动旋转 */
    .toc-toggle {
      background: transparent; border: 0; padding: 0;
      width: 18px; height: 22px; display: grid; place-items: center;
      color: var(--text-muted); cursor: pointer; flex-shrink: 0;
      border-radius: var(--radius-sm);
      transition: color 0.15s, background 0.15s;
    }
    .toc-toggle:hover { color: var(--text); background: var(--surface-hover); }
    .toc-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
    .toc-toggle svg {
      transition: transform 0.2s ease;
      transform: rotate(0deg);
    }
    .toc-node.has-children.expanded > .toc-row > .toc-toggle svg { transform: rotate(90deg); }

    /* 叶节点占位（保持缩进与父行对齐） */
    .toc-toggle-spacer {
      display: inline-block;
      width: 18px; height: 22px; flex-shrink: 0;
    }

    /* 标题文本 —— 仍是 <a>，点击调 scrollToHeading（保留原行为） */
    .toc-item {
      flex: 1; min-width: 0;
      display: block; padding: 5px 8px; border-radius: var(--radius-sm);
      color: var(--text-secondary); font-size: 0.82rem;
      cursor: pointer; transition: all 0.15s; text-decoration: none;
      border-left: 2px solid transparent;
      line-height: 1.6; word-break: break-word;
    }
    .toc-item:hover { color: var(--text); background: var(--surface-hover); }
    .toc-item.active {
      color: var(--accent-light); background: var(--accent-bg);
      border-left-color: var(--accent); font-weight: 500;
    }

    /* 层级深度仅做轻微缩进 + 字号字重区分，避免视觉过深 */
    .toc-item.toc-h1 { font-weight: 600; font-size: 0.86rem; }
    .toc-item.toc-h2 { font-weight: 500; }
    .toc-item.toc-h3 { font-size: 0.8rem; }
    .toc-item.toc-h4,
    .toc-item.toc-h5,
    .toc-item.toc-h6 { color: var(--text-secondary); font-size: 0.78rem; }

    /* 子层容器 —— 通过 max-height + opacity 平滑过渡 */
    .toc-children {
      overflow: hidden;
      transition: max-height 0.25s ease, opacity 0.2s ease;
      max-height: 800px;
      opacity: 1;
      margin-left: 14px;
      border-left: 1px dashed var(--line);
      padding-left: 6px;
    }
    .toc-node.has-children.collapsed > .toc-children {
      max-height: 0;
      opacity: 0;
      pointer-events: none;
    }



    /* Sidebar overlay */

    .sidebar-overlay {

      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* 显式定位（inset 需 Chromium 87+） */

      background: rgba(0, 0, 0, 0.5); z-index: 90;

      opacity: 0; pointer-events: none; transition: opacity 0.25s;

    }

    .sidebar-overlay.open { opacity: 1; pointer-events: auto; }