/* ===== 基础 ===== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
  color: #214468;
  display: flex;
  flex-direction: column;
  background: #0d1117;
}
.hidden { display: none !important; }
button { font-family: inherit; }

/* ===== 顶栏 ===== */
#topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  background: #161b22;
  color: #f0f6fc;
  border-bottom: 1px solid #30363d;
  flex: none;
}
.logo { font-weight: 600; font-size: 15px; white-space: nowrap; }
.article-total {
  flex: none;
  font-size: 13px;
  color: #8b949e;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 5px 10px;
  white-space: nowrap;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
/* 第一项统计靠右排布，其余统计紧随其后 */
#article-total { margin-left: auto; }
.search-box { flex: 1; max-width: 560px; }
.search-box input {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: #21262d;
  color: #f0f6fc;
}
.search-box input::placeholder { color: #8b949e; }
.search-box input:focus { background: #0d1117; color: #f0f6fc; }

/* ===== 按钮 ===== */
.btn {
  padding: 7px 14px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #21262d;
  color: #c9d1d9;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.btn:hover { background: #30363d; }
.btn.primary { background: #1f6feb; border-color: rgba(240,246,252,0.1); color: #fff; }
.btn.primary:hover { background: #388bfd; }
.btn.danger { background: #da3633; border-color: rgba(240,246,252,0.1); color: #fff; }
.btn.danger:hover { background: #f85149; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mini-btn {
  padding: 0 5px;
  border: 1px solid #30363d;
  border-radius: 4px;
  background: #21262d;
  color: #c9d1d9;
  cursor: pointer;
  font-size: 12px;
  line-height: 18px;
}
.mini-btn:hover { background: #30363d; }

/* ===== 三栏布局 ===== */
#layout { flex: 1; display: flex; min-height: 0; }
#folder-pane {
  width: 275px;
  flex: none;
  border-right: 1px solid #21262d;
  display: flex;
  flex-direction: column;
  background: #161b22;
}
/* 目录树字号由「设置」中的「目录树字号」控制（见 app.js applyListFontSizes），默认 14px */
#folder-tree { flex: 1; overflow-y: auto; font-size: var(--folder-fs, 14px); }
#folder-pane-footer {
  flex: none;
  border-top: 1px solid #21262d;
  padding: 8px 10px;
}
#folder-pane-footer #btn-recycle { width: 100%; }
.recycle-count {
  margin-left: 6px;
  background: #30363d;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
  color: #c9d1d9;
}
.recycle-count.empty { display: none; }
#article-pane {
  width: 330px;
  flex: none;
  border-right: 1px solid #21262d;
  display: flex;
  flex-direction: column;
  background: #161b22;
}
#editor-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ===== 可拖动间隔栏 ===== */
.splitter {
  flex: none;
  width: 5px;
  cursor: col-resize;
  background: #21262d;
  position: relative;
  user-select: none;
  touch-action: none;
}
.splitter::after { /* 加宽热区，便于抓取 */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  right: -3px;
}
.splitter:hover,
.splitter.dragging { background: #1f6feb; }
body.col-resizing { cursor: col-resize; user-select: none; }

/* ===== 视图模式 ===== */
#layout.view-immersive #folder-pane,
#layout.view-immersive #article-pane,
#layout.view-focus #folder-pane,
#layout.view-focus #article-pane,
#layout.view-read #folder-pane,
#layout.view-read #article-pane { display: none; }
/* 非三栏视图下隐藏间隔栏 */
#layout.view-immersive .splitter,
#layout.view-focus .splitter,
#layout.view-read .splitter { display: none; }
#layout.view-read #editor-pane,
#layout.view-focus #editor-pane {
  flex: none;
  width: 25%;
  min-width: 670px;
  margin: 0 auto;
}
#layout.view-read #editor-meta,
#layout.view-focus #editor-meta { flex-wrap: wrap; }
#layout.view-read .ql-toolbar { display: none; }
#layout.view-read #btn-save,
#layout.view-read #btn-edit-tags { display: none; }
#layout.view-read #for-search-label,
#layout.view-read #no-search-label,
#layout.view-read #locked-label { display: none; }
#layout.view-read #editor .ql-editor { cursor: default; }

.pane-title {
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  color: #8b949e;
  border-bottom: 1px solid #21262d;
}
.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #21262d;
}
.pane-header .pane-title { border-bottom: none; flex: 1; }

/* ===== 文件夹树 ===== */
.tree-level { list-style: none; margin: 0; padding: 0; }
.tree-level .tree-level { margin-left: 15px; }
.tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin: 1px 6px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.tree-node:hover { background: #21262d; }
.tree-node.active { background: rgba(31,111,235,0.25); }
.caret {
  width: 14px;
  flex: none;
  text-align: center;
  color: #8b949e;
  font-size: 11px;
}
.color-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tree-icon { flex: 0 0 auto; display: inline-flex; color: #8a8a8a; }
.node-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-count { margin-left: auto; color: #8b949e; font-size: calc(var(--folder-fs, 14px) * 0.79); }
.tree-empty, .list-empty { padding: 24px 16px; color: #8b949e; text-align: center; font-size: 13px; }

/* ===== 文章列表 ===== */
/* 文章列表字号由「设置」中的「文章列表字号」控制，标题随主字号、附属行按比例跟随 */
#article-list { flex: 1; overflow-y: auto; font-size: var(--artlist-fs, 14px); }
.article-item {
  position: relative;
  padding: 9px 12px;
  border-bottom: 1px solid #21262d;
  cursor: pointer;
  color: #c9d1d9;
}
.article-item:hover { background: #21262d; }
.article-item.active { background: rgba(31,111,235,0.25); }
.item-title { font-weight: 500; word-break: break-all; padding-right: 46px; display: flex; align-items: center; gap: 6px; }
.article-item.locked .item-title { padding-right: 62px; } /* 为锁定图标预留空间，避免与悬浮箭头重叠 */
.item-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 瞬发悬浮提示：浮动到 body 的元素，悬停立即显示（避开列表 overflow 裁剪） */
.article-tip {
  position: fixed;
  z-index: 10000;
  max-width: 340px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 6px 9px;
  color: #c9d1d9;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line; /* 保留标题与摘要之间的换行 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  display: none;
}
.item-icon { flex: 0 0 auto; display: inline-flex; }
.item-lock { flex: 0 0 auto; margin-left: auto; display: inline-flex; color: #8b949e; }
.item-meta {
  margin-top: 3px;
  font-size: calc(var(--artlist-fs, 14px) * 0.86);
  color: #8b949e;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.item-path { font-size: calc(var(--artlist-fs, 14px) * 0.86); color: #8b949e; margin-top: 3px; }
.item-snippet {
  font-size: calc(var(--artlist-fs, 14px) * 0.86);
  color: #8b949e;
  margin-top: 3px;
  word-break: break-all;
}
.item-arrows {
  position: absolute;
  right: 8px;
  top: 9px;
  display: none;
  gap: 3px;
}
.article-item:hover .item-arrows { display: flex; }
mark { background: #ffe100; color: #0d1117; padding: 0 1px; border-radius: 2px; }

/* ===== 编辑器 ===== */
.editor-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0b7bf;
  font-size: 15px;
}
#editor-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#editor-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #21262d;
  background: #161b22;
}
.for-search-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #8b949e;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.for-search-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #1f6feb;
  cursor: pointer;
  margin: 0;
}
#locked-icon { display: inline-flex; align-items: center; }
/* 图标操作按钮：紧凑方形，仅保留图标（悬停提示见 title） */
.icon-btn.is-icon-only {
  display: inline-flex;
  padding: 0;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
/* 包含子目录 复选框 */
.include-sub-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 6px;
  font-size: 13px;
  color: #8b949e;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.include-sub-label:hover { color: #c9d1d9; }
.include-sub-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #1f6feb;
  cursor: pointer;
  margin: 0;
}
#article-title {
  flex: 2.2;
  font-size: 16px;
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  background: transparent;
  color: #f0f6fc;
}
#article-title:hover, #article-title:focus { border-color: #30363d; background: #21262d; }
#article-author {
  flex: 1;
  max-width: 180px;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  background: transparent;
  color: #8b949e;
}
#article-author:hover, #article-author:focus { border-color: #30363d; background: #21262d; }
#save-status { font-size: 12px; color: #8b949e; white-space: nowrap; }

#editor { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0d1117; }
#editor .ql-toolbar.ql-snow { flex: none; border-left: none; border-right: none; border-top: none; }
#editor .ql-container { flex: 1; overflow-y: auto; border-left: none; border-right: none; border-bottom: none; }
#editor .ql-editor { min-height: 100%; font-size: var(--editor-fs, 20px); line-height: 1.7;
  font-family: var(--editor-ff, inherit); }
#editor .ql-editor img { max-width: 100%; border-radius: 4px; }
#editor .ql-editor.ql-blank::before { color: #484f58; }

/* ===== 编辑器背景纹理（每篇文章独立，仅 CSS，不入正文） =====
   纹理以 CSS 变量集中定义：编辑器正文与设置面板的预览瓦片共用同一套变量。
   变量契约：--ed-bg-color 底色 / --ed-bg-image 纹理 / --ed-bg-size 平铺尺寸 / --ed-bg-ink 配套文字色。
   暗色系复用默认正文色 #c9d1d9；浅色系必须自带深色文字，否则正文看不清。 */
.ed-bg-1 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: radial-gradient(#1b2430 1px, transparent 1px); --ed-bg-size: 16px 16px; }
.ed-bg-2 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: linear-gradient(#151d26 1px, transparent 1px), linear-gradient(90deg, #151d26 1px, transparent 1px);
  --ed-bg-size: 22px 22px, 22px 22px; }
/* 横线：平铺高度绑定正文行高（line-height 1.7 × 字号），使横线压在文字基线上；
   origin 取 content-box，让首条横线正好落在第一行底部（跳过 .ql-editor 的上内边距） */
.ed-bg-3 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9; --ed-bg-origin: content-box;
  --ed-bg-image: linear-gradient(180deg, transparent calc(100% - 1px), #1b2430 calc(100% - 1px));
  --ed-bg-size: 100% calc(var(--editor-fs, 20px) * 1.7); }
.ed-bg-4 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: repeating-linear-gradient(45deg, #121a23 0 6px, transparent 6px 16px); --ed-bg-size: auto; }
/* 噪点：CSS 渐变只能做规整点阵（放大后能看出网格），改用内联 SVG feTurbulence 生成真噪点；
   stitchTiles='stitch' 保证平铺无缝，saturate=0 去色，rect 的 opacity 控制强度（越小越淡） */
.ed-bg-5 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  --ed-bg-size: 200px 200px; }
.ed-bg-6 { --ed-bg-color: #0e141b; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: radial-gradient(circle at 50% 0, #17202b 0, transparent 60%), repeating-linear-gradient(120deg, #101821 0 2px, transparent 2px 9px);
  --ed-bg-size: auto, auto; }
/* 纯色背景（原「米黄纸」槽位改作纯色）：深灰蓝 */
.ed-bg-7 { --ed-bg-color: #1e2430; --ed-bg-ink: #c9d1d9; }

/* —— 以下均为暗色系 —— */
/* 回纹（雷纹）：方折螺旋——全直线直角，外圈留一缺口进入，逐层向内回折收成小钩。
   纹样完全落在瓦片内，无跨界图形，故平铺天然无缝，不与「细网格」混同。 */
.ed-bg-8 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%231c2838' stroke-width='1.1' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 3L21 3L21 21L3 21L3 9L15 9L15 15L9 15L9 11'/%3E%3C/g%3E%3C/svg%3E");
  --ed-bg-size: 24px 24px; }
/* 水纹：海水江崖式鳞纹——等半径半圆错行叠压，上排峰顶正好落在下排基线 */
.ed-bg-9 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%231c2838' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M-20 40A20 20 0 0 1 20 40M20 40A20 20 0 0 1 60 40M0 20A20 20 0 0 1 40 20'/%3E%3C/g%3E%3C/svg%3E");
  --ed-bg-size: 40px 40px; }
/* 布艺：两组 45°/−45° 细线交叉成经纬（线宽与间距略不同，避免看起来像纯网格） */
.ed-bg-10 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: repeating-linear-gradient(45deg, #1a222c 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, #151d26 0 1px, transparent 1px 4px);
  --ed-bg-size: auto, auto; }
/* 皱纹纸：turbulence 作高度场 + 远光源做漫反射 → 明暗起伏即折痕（该滤镜输出不透明，故底色隐藏） */
.ed-bg-11 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.03' numOctaves='4' seed='3' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%231e2733' surfaceScale='2' diffuseConstant='1'%3E%3CfeDistantLight azimuth='235' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E");
  --ed-bg-size: 300px 300px; }
/* 碳纤维：repeating-conic 做 2×2 编织格 */
.ed-bg-12 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: repeating-conic-gradient(#171f28 0% 25%, #0f151c 0% 50%);
  --ed-bg-size: 6px 6px; }
/* 拉丝金属：极细竖向条纹，明暗不等宽模拟拉丝 */
.ed-bg-13 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: repeating-linear-gradient(90deg, #1b232d 0 1px, #131b23 1px 2px, #1e2732 2px 3px, #141c24 3px 4px);
  --ed-bg-size: auto; }
/* 木纹：竖向顺纹——细密平行线打底，叠一层 60px 周期内不等距的深色年轮线，同角度无线纹干扰 */
.ed-bg-14 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: repeating-linear-gradient(90deg, #141c26 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 13px, #1c2734 13px 14.5px, transparent 14.5px 34px, #151e29 34px 35px, transparent 35px 60px);
  --ed-bg-size: auto, auto; }

/* —— 以下为纯色背景（不设 --ed-bg-image，回落到 none）：仅底色 + 正文色 —— */
.ed-bg-15 { --ed-bg-color: #1b2434; --ed-bg-ink: #c9d1d9; } /* 深蓝灰 */
.ed-bg-16 { --ed-bg-color: #22272e; --ed-bg-ink: #c9d1d9; } /* 炭灰 */
.ed-bg-17 { --ed-bg-color: #1b2a24; --ed-bg-ink: #c9d1d9; } /* 深墨绿 */
.ed-bg-18 { --ed-bg-color: #2a241e; --ed-bg-ink: #d6cbb8; } /* 深褐/咖啡 */
.ed-bg-19 { --ed-bg-color: #211d2b; --ed-bg-ink: #c9d1d9; } /* 深紫灰 */
.ed-bg-20 { --ed-bg-color: #1a1f2e; --ed-bg-ink: #c9d1d9; } /* 藏青 */
.ed-bg-21 { --ed-bg-color: #282c34; --ed-bg-ink: #abb2bf; } /* One Dark */
.ed-bg-22 { --ed-bg-color: #002b36; --ed-bg-ink: #93a1a1; } /* Solarized Dark */
.ed-bg-23 { --ed-bg-color: #2e3440; --ed-bg-ink: #d8dee9; } /* Nord */
.ed-bg-30 { --ed-bg-color: #000000; --ed-bg-ink: #c9d1d9; } /* 纯黑 */
.ed-bg-31 { --ed-bg-color: #191919; --ed-bg-ink: #c9d1d9; } /* 深灰 rgb(25,25,25) */

/* —— 以下为横线家族（暗/亮）与网格家族 —— */
/* 亮色横线：周期与「横线」相同（随正文字号对齐行高），线色改为浅白 */
.ed-bg-24 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9; --ed-bg-origin: content-box;
  --ed-bg-image: linear-gradient(180deg, transparent calc(100% - 1px), rgba(255,255,255,0.2) calc(100% - 1px));
  --ed-bg-size: 100% calc(var(--editor-fs, 20px) * 1.7); }
/* 横虚线（亮）：与「横虚线」同一构造，线色改为浅白 */
.ed-bg-25 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9; --ed-bg-origin: content-box;
  --ed-bg-image: repeating-linear-gradient(90deg, transparent 0 6px, var(--ed-bg-color) 6px 12px),
    linear-gradient(180deg, transparent calc(100% - 1px), rgba(255,255,255,0.2) calc(100% - 1px));
  --ed-bg-size: 12px 100%, 100% calc(var(--editor-fs, 20px) * 1.7); }
/* 粗网格：格子边长与线宽均为「细网格」的两倍（22px/1px → 44px/2px），更疏更重 */
.ed-bg-26 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: linear-gradient(#151d26 2px, transparent 2px), linear-gradient(90deg, #151d26 2px, transparent 2px);
  --ed-bg-size: 44px 44px, 44px 44px; }
/* 横虚线：底层画满整行横线，上层用底色按「6px 实 / 6px 虚」的竖向色带切段；
   被切掉的位置填的是底色，与编辑器底色一致，故看不出接缝 */
.ed-bg-27 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9; --ed-bg-origin: content-box;
  --ed-bg-image: repeating-linear-gradient(90deg, transparent 0 6px, var(--ed-bg-color) 6px 12px),
    linear-gradient(180deg, transparent calc(100% - 1px), #26313f calc(100% - 1px));
  --ed-bg-size: 12px 100%, 100% calc(var(--editor-fs, 20px) * 1.7); }
/* 斜网格（细）：两组 ±45° 平行线交叉，相当于把「细网格」整体旋转 45° */
.ed-bg-28 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: repeating-linear-gradient(45deg, #151d26 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-45deg, #151d26 0 1px, transparent 1px 18px);
  --ed-bg-size: auto, auto; }
/* 斜网格（粗）：间距与线宽均为细版的两倍 */
.ed-bg-29 { --ed-bg-color: #0d1117; --ed-bg-ink: #c9d1d9;
  --ed-bg-image: repeating-linear-gradient(45deg, #151d26 0 2px, transparent 2px 36px),
    repeating-linear-gradient(-45deg, #151d26 0 2px, transparent 2px 36px);
  --ed-bg-size: auto, auto; }

#editor[class*="ed-bg-"] .ql-editor {
  background-color: var(--ed-bg-color, transparent);
  background-image: var(--ed-bg-image, none);
  background-size: var(--ed-bg-size, auto);
  background-position: var(--ed-bg-position, 0 0);
  background-origin: var(--ed-bg-origin, padding-box);
  background-repeat: repeat;
  /* .ql-editor 自身就是滚动容器（quill.snow 里 height:100% + overflow-y:auto）：
     默认的 scroll 会让纹样钉在窗口上，local 才锚定内容区、随正文一起滚动 */
  background-attachment: local;
  color: var(--ed-bg-ink, #c9d1d9);
}

/* 背景纹理设置面板：预览瓦片网格（瓦片自身带 ed-bg-N 类，变量向下继承） */
.bg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bg-swatch {
  display: block;
  padding: 0;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow: hidden;
  background: #0d1117;
  cursor: pointer;
}
.bg-swatch:hover { border-color: #8b949e; }
.bg-swatch.active { border-color: #1f6feb; box-shadow: inset 0 0 0 1px #1f6feb; }
.bg-swatch-pv {
  height: 54px;
  background-color: var(--ed-bg-color, #0d1117);
  background-image: var(--ed-bg-image, none);
  background-size: var(--ed-bg-size, auto);
  background-position: var(--ed-bg-position, 0 0);
}
.bg-swatch-nm {
  display: block;
  padding: 5px 6px;
  font-size: 12px;
  color: #c9d1d9;
  background: #161b22;
  border-top: 1px solid #30363d;
  text-align: center;
}

/* 默认样式面板（本文基准字号 + 默认字体）：两排药丸，字号按档位实际大小预览 */
.doc-style { display: flex; flex-direction: column; gap: 8px; }
.doc-style-cap { font-size: 12px; color: #8b949e; }
.doc-style-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.doc-style-pill {
  padding: 6px 14px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #161b22;
  color: #c9d1d9;
  line-height: 1.4;
  cursor: pointer;
}
.doc-style-pill:hover { border-color: #8b949e; }
.doc-style-pill.active { border-color: #1f6feb; box-shadow: inset 0 0 0 1px #1f6feb; color: #58a6ff; }
.doc-style-back { align-self: flex-start; }

/* ===== 文章编辑器 Tab 栏 ===== */
#editor-tabs {
  flex: none;
  display: flex;
  flex-wrap: wrap;   /* 标签过多时堆叠换行，而非横向滚动 */
  align-items: stretch;
  gap: 2px;
  padding: 4px 6px 0;
  background: #161b22;
  border-bottom: 1px solid #21262d;
}
#editor-tabs[hidden] { display: none; }
.editor-tab {
  display: inline-flex;
  align-items: center;
  justify-content: space-between; /* 标题靠左，关闭按钮贴右 */
  gap: 6px;
  flex: 1 1 auto;    /* 同排标签自适应填满，堆叠更整齐 */
  min-width: 90px;
  max-width: 220px;
  padding: 5px 8px 5px 12px;
  border: 1px solid #21262d;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #0d1117;
  color: #8b949e;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.editor-tab:hover { background: #161b22; color: #c9d1d9; }
.editor-tab.active {
  background: #161b22;
  color: #f0f6fc;
  border-color: #30363d;
  border-bottom-color: #161b22;
}
.editor-tab-title { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-tab-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: none; border-radius: 4px;
  background: transparent;
  color: #8b949e;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  padding: 0;
}
.editor-tab-close:hover { background: #30363d; color: #f0f6fc; }

/* ===== 编辑器标签栏（编辑器上方） ===== */
#article-tags {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
}
#article-tags.hidden { display: none; }
.tags-bar-label { font-size: 12px; color: #8b949e; margin-right: 2px; }
.tags-bar-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 11px;
  background: #21262d;
  border: 1px solid #30363d;
  font-size: 12px;
  color: #c9d1d9;
  white-space: nowrap;
}
.tags-bar-chip.clickable { cursor: pointer; }
.tags-bar-chip.clickable:hover { background: #30363d; border-color: #484f58; }

/* ===== 标签关联文章对话框 ===== */
.tag-articles { width: 690px; max-width: 100%; }
.tag-articles-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 7px 10px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 13px;
}
.tag-articles-search:focus { outline: none; border-color: #1f6feb; }
.tag-articles-list { max-height: 480px; overflow-y: auto; }
.tag-article-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #21262d;
  border-radius: 6px;
}
.tag-article-row:hover { background: #21262d; }
.tag-article-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-article-meta { flex: none; font-size: 11px; color: #8b949e; min-width: 140px; text-align: right; }
.tag-article-acts { flex: none; display: inline-flex; gap: 6px; white-space: nowrap; }

/* ===== 分页工具条 ===== */
.pager {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.pager-pages { display: inline-flex; gap: 4px; }
.pager-num.active { background: #1f6feb; color: #fff; }
.pager-info { margin-left: auto; color: #8b949e; font-size: 12px; }

/* ===== 文章摘要对话框（与标签库/关键词地图一致） ===== */
.kw-sum { display: flex; flex-direction: column; gap: 10px; }
.kw-sum-row { display: flex; gap: 12px; }
.kw-sum-label {
  flex: none;
  width: 48px;
  color: #8b949e;
  font-size: 13px;
  padding-top: 2px;
}
.kw-sum-val { flex: 1; min-width: 0; color: #f0f6fc; }
.kw-sum-title { font-size: 16px; font-weight: 600; word-break: break-all; }
.kw-sum-abs .kw-sum-val {
  color: #c9d1d9;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
}
.kw-sum-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-sum-chip {
  padding: 3px 10px;
  border: 1px solid #30363d;
  border-radius: 999px;
  background: #21262d;
  color: #f0f6fc;
  font-size: 12px;
}

/* ===== 右键菜单 ===== */
.ctx-menu {
  position: fixed;
  z-index: 1300;
  min-width: 150px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  padding: 5px;
}
.ctx-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: none;
  text-align: left;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: #c9d1d9;
}
.ctx-item:hover { background: #21262d; }
.ctx-item.danger { color: #f85149; }
.ctx-item.disabled { color: #6e7681; cursor: not-allowed; }
.ctx-item.disabled:hover { background: none; }
.ctx-sep { height: 1px; background: #21262d; margin: 4px 6px; }

/* ===== 模态框 ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(1, 4, 9, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  min-width: 340px;
  max-width: 480px;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  color: #c9d1d9;
}
.modal-title { padding: 14px 18px 8px; font-weight: 600; font-size: 15px; color: #f0f6fc; }
.modal-box.modal-wide { width: 1350px; max-width: 92vw; max-height: 88vh; }
.modal-body { padding: 6px 18px; overflow-y: auto; }
.modal-label { font-size: 13px; color: #8b949e; margin: 6px 0; }
.modal-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #30363d;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: #0d1117;
  color: #c9d1d9;
}
.modal-input:focus { border-color: #1f6feb; }
/* 单选选项组（如文件夹折叠选项） */
.modal-radios { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; }
.modal-radio-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.modal-radio-row:hover { background: #21262d; }
.modal-radio-row input[type="radio"] {
  width: 14px;
  height: 14px;
  margin: 2px 0 0;
  accent-color: #1f6feb;
  cursor: pointer;
  flex: none;
}
.modal-radio-text { display: flex; flex-direction: column; gap: 2px; }
.modal-radio-title { font-size: 13px; color: #f0f6fc; }
.modal-radio-desc { font-size: 12px; color: #8b949e; line-height: 1.5; }
/* 书签列表 */
.bm-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.bm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid #30363d;
  border-radius: 8px;
}
.bm-row:hover { background: #21262d; }
.bm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f0f6fc; font-size: 13px; }
.bm-acts { flex: none; display: flex; gap: 4px; }
/* 书签操作按钮：图标化紧凑方钮（悬停提示见 title） */
.bm-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #30363d;
  border-radius: 6px;
  background: #21262d;
  color: #c9d1d9;
  cursor: pointer;
  line-height: 1;
}
.bm-act-btn:hover { background: #30363d; color: #f0f6fc; }
.bm-act-btn.danger:hover { background: #da3633; border-color: #da3633; color: #fff; }
.modal-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; }
/* 应用设置对话框：按后端清单分区渲染，每区两列栅格（窄屏自动收成单列） */
.modal-box:has(.settings-group) { max-height: 86vh; } /* 设置项较多，放宽高度上限 */
.settings-group + .settings-group { margin-top: 14px; }
.settings-group-title {
  font-size: 13px;
  font-weight: 600;
  color: #f0f6fc;
  padding-bottom: 5px;
  margin-bottom: 9px;
  border-bottom: 1px solid #30363d;
}
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.settings-item { min-width: 0; }
.settings-item.full { grid-column: 1 / -1; }
.settings-item .modal-label { margin: 0 0 4px; font-size: 12px; }
/* 输入框 + 「恢复默认」图标同一行 */
.settings-input-row { display: flex; align-items: center; gap: 6px; }
.settings-input-row .modal-input { flex: 1; min-width: 0; }
.settings-input-row .icon-btn.is-icon-only { flex: none; }
/* 开关：勾选项本身充当标题，故上边距与左侧标签行等高，使控件与邻列输入框齐平 */
.settings-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 35px;
  margin-top: 19px;
  font-size: 13px;
  color: #c9d1d9;
  cursor: pointer;
  user-select: none;
}
.settings-switch input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #1f6feb;
  margin: 0;
  cursor: pointer;
}
/* 图片等比缩放比例选择 */
.img-scale-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-width: 300px; }
.img-scale-grid .btn { padding: 10px 0; }
.paste-textarea {
  width: 100%;
  min-height: 640px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  background: #0d1117;
  color: #c9d1d9;
  font-family: inherit;
  box-sizing: border-box;
}
.paste-textarea:focus { border-color: #1f6feb; }

/* 编辑摘要弹窗 */
.summary-dialog {
  width: 100%;
  min-height: 560px; /* 对话框整体高度约为原内容高度的 1.5 倍（此前 700px，缩至 80%） */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.summary-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #21262d;
  margin-bottom: 4px;
}
/* 摘要长度 / 关键词个数（按文章覆盖，不回写 AI 配置） */
.summary-size-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  color: #8b949e;
  font-size: 12px;
}
.summary-size-row input {
  width: 72px;
  box-sizing: border-box;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #f0f6fc;
  padding: 3px 6px;
  font-size: 12px;
  outline: none;
}
.summary-size-row input:focus { border-color: #388bfd; }
.summary-input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid #30363d;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  background: #0d1117;
  color: #c9d1d9;
  font-family: inherit;
  box-sizing: border-box;
}
.summary-input:focus { border-color: #1f6feb; }
.summary-input { flex: 0 0 auto; } /* 关键词文本框保持默认 96px，不随对话框拉伸 */
.summary-input.summary-main { flex: 1 1 auto; min-height: 192px; } /* 摘要文本框弹性填充剩余高度 */

/* 已锁定文章的只读摘要对话框（纯文本 + 关键词标签块） */
.locked-summary { width: 100%; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
.locked-sub-label { font-size: 13px; color: #8b949e; }
.locked-summary-text {
  padding: 10px 12px;
  border: 1px solid #30363d;
  border-radius: 0;
  background: #0d1117;
  color: #c9d1d9;
  font-size: 14px;
  line-height: 1.7;
  min-height: 120px;
  white-space: pre-wrap;
}
.locked-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
}
.locked-kw-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #30363d;
  border-radius: 0;
  background: #033000;
  color: #f0f6fc;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.locked-kw-tag:hover { border-color: #e2ba05; background: #1f2937; }
/* 未入库关键词：浅蓝色方块，提示可点击存入 */
.locked-kw-tag.ghost {
  background: #071c55;
  border: 1px dashed #5b8dd9;
  color: #ffffff;
  cursor: pointer;
}
.locked-kw-tag.ghost:hover { background: #0636bd; border-style: solid; }

/* 关键词关联文章对话框 */
.kw-art-wrap { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
/* 分页版：外层不滚动，搜索框固定，列表内部滚动 */
.kw-art-wrap.kw-art-paged { max-height: none; overflow: visible; }
.kw-art-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  max-height: 46vh;
  overflow-y: auto;
}
.kw-art-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
}
.kw-art-title { flex: 1 1 0; color: #f0f6fc; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-art-author { flex: none; color: #8b949e; font-size: 13px; }

/* 粘贴内容弹窗 */
.paste-dialog { width: 100%; }
.paste-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #21262d;
  margin-bottom: 10px;
}
.paste-toolbar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #c9d1d9;
  cursor: pointer;
  user-select: none;
}

/* 回收站弹窗 */
.recycle-dialog { width: 100%; }
.recycle-search { padding-bottom: 10px; }
.recycle-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.recycle-table th,
.recycle-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #21262d;
  text-align: left;
  color: #c9d1d9;
}
.recycle-table th { color: #8b949e; font-weight: 600; }
.recycle-table td .btn + .btn { margin-left: 8px; }
.recycle-empty { text-align: center; color: #8b949e; padding: 24px 0; }
.recycle-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
}
.recycle-pager-info { font-size: 13px; color: #8b949e; }
.recycle-pager .btn[disabled] { opacity: 0.5; cursor: default; }

/* 颜色选择 */
.color-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 0; max-width: 520px; }
.color-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.current { border-color: #f0f6fc; }
.color-clear {
  background: #21262d;
  color: #c9d1d9;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-custom { width: 40px; height: 20px; border: none; background: none; cursor: pointer; padding: 0; }

/* 图标选择器 */
.icon-picker { width: 1200px; max-width: 100%; }
/* 图标选择对话框需要更宽（默认 .modal-box 上限 480px 不够） */
.modal-box:has(.icon-picker) { width: 1200px; max-width: 92vw; }
.icon-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  margin-bottom: 10px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 13px;
}
.icon-search:focus { outline: none; border-color: #1f6feb; }
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  max-height: 480px;
  overflow-y: auto;
  padding: 2px;
}
.icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  cursor: pointer;
}
.icon-cell:hover { background: #21262d; border-color: #1f6feb; }
.icon-cell.current { border-color: #1f6feb; background: rgba(31,111,235,0.2); }
.icon-cell-label {
  font-size: 11px;
  color: #8b949e;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-empty { grid-column: 1 / -1; color: #8b949e; font-size: 13px; padding: 12px 0; text-align: center; }
.icon-picker-footer { margin-top: 10px; display: flex; justify-content: flex-end; }

/* 文档面板：文章以「图标在上、标题在下」的文件夹风格网格展示 */
.file-pane-wrap { display: flex; flex-direction: column; gap: 10px; }
.file-pane-search {
  flex: none;
  padding: 7px 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #f0f6fc;
  font-size: 13px;
}
.file-pane-search:focus { outline: none; border-color: #1f6feb; }
.file-pane-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 4px;
}
.file-pane-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 8px 12px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  color: #c9d1d9;
  cursor: pointer;
}
.file-pane-cell:hover { background: #21262d; border-color: #1f6feb; }
.file-pane-cell.active { border-color: #1f6feb; background: rgba(31, 111, 235, 0.2); }
.file-pane-icon { color: #8a8a8a; }
.file-pane-title {
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 移动到 选择器 */
.picker-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 600px; }
.picker-wrap .move-search {
  padding: 7px 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #f0f6fc;
  font-size: 13px;
}
.picker-wrap .move-search:focus { outline: none; border-color: #1f6feb; }
.picker-tree { min-width: 300px; padding: 4px 0; }
.picker-node {
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #c9d1d9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-node:hover { background: #21262d; }
.picker-node.current { color: #8b949e; }
.picker-node.current::after { content: "（当前位置）"; font-size: 11px; }

/* ===== 标签选择器（编辑文章标签） ===== */
.tag-picker { width: 100%; }
.tag-picker-top { display: flex; gap: 12px; height: 450px; }

/* 左：目录树 —— 占对话框宽度四分之一 */
.tag-picker-tree {
  flex: 1 1 25%;
  min-width: 0;
  border: 1px solid #30363d;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tag-picker-panel-title {
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #8b949e;
  border-bottom: 1px solid #30363d;
  flex: none;
}
.tag-picker-treelist { flex: 1; overflow-y: auto; padding: 4px; }

/* 右：标签方块区 —— 占对话框宽度四分之三 */
.tag-picker-tags {
  flex: 1 1 75%;
  min-width: 0;
  border: 1px solid #30363d;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tag-picker-search {
  margin: 8px 8px 6px;
  padding: 6px 10px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 13px;
}
.tag-picker-search:focus { outline: none; border-color: #1f6feb; }
/* 标签方块堆叠区 */
.tag-picker-blocks {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.tag-picker-block {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
  max-width: 100%;
  transition: border-color 0.12s, background 0.12s;
}
.tag-picker-block:hover { border-color: #1f6feb; background: #1c2128; }
.tag-picker-block.selected {
  border-color: #1f6feb;
  background: rgba(31, 111, 235, 0.16);
  box-shadow: 0 0 0 1px #1f6feb;
}
.tag-picker-block-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  min-width: 0;
}
.tag-picker-block-inner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-picker-block-check {
  position: absolute;
  top: 2px;
  right: 7px;
  font-size: 11px;
  color: #58a6ff;
  line-height: 1;
}
.tp-empty { color: #8b949e; text-align: center; padding: 24px; width: 100%; font-size: 12px; }

/* 目录树行 / 名称单元格通用 */
.tag-picker-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #c9d1d9;
}
.tag-picker-opt:hover { background: #21262d; }
.tag-picker-opt.active { background: rgba(31, 111, 235, 0.25); }
.tag-picker-caret { width: 12px; flex: none; color: #8b949e; font-size: 11px; text-align: center; cursor: pointer; }
.tag-picker-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tag-picker-itemname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-picker-count { margin-left: auto; color: #8b949e; font-size: 11px; flex: none; }

/* 底部：已选标签 */
.tag-picker-selected { margin-top: 10px; border-top: 1px solid #30363d; padding-top: 8px; }
.tag-picker-selected-title { font-size: 12px; color: #8b949e; margin-bottom: 6px; }
.tag-picker-selected-title b { color: #f0f6fc; }
.tag-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 144px; overflow-y: auto; }
.tag-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 9px;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 14px;
  font-size: 12px;
  color: #c9d1d9;
}
.tag-picker-chip-empty { color: #8b949e; font-size: 12px; padding: 4px 2px; }
.tp-chip-x {
  border: none;
  background: none;
  color: #8b949e;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
}
.tp-chip-x:hover { color: #f85149; }

/* ===== Toast ===== */
#toast-root {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.toast {
  padding: 8px 18px;
  border-radius: 8px;
  background: #30363d;
  color: #f0f6fc;
  font-size: 13px;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #da3633; }

/* ===== Quill 编辑器暗黑适配 ===== */
#editor .ql-toolbar.ql-snow { background: #161b22; border-color: #21262d; }
.ql-snow .ql-stroke { stroke: #c9d1d9; }
.ql-snow .ql-fill { fill: #c9d1d9; }
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke { stroke: #388bfd; }
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill { fill: #388bfd; }
.ql-snow.ql-toolbar .ql-picker-label { color: #c9d1d9; }
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active { color: #388bfd; }
.ql-snow.ql-toolbar .ql-picker-options {
  background: #161b22;
  border-color: #30363d;
}
.ql-snow.ql-toolbar .ql-picker-item { color: #c9d1d9; }
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: #388bfd; }
.ql-snow .ql-tooltip {
  background: #161b22;
  border-color: #30363d;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  color: #c9d1d9;
}
.ql-snow .ql-tooltip input[type=text] {
  background: #0d1117;
  color: #f0f6fc;
  border: 1px solid #30363d;
}
.ql-snow .ql-tooltip a { color: #388bfd; }
.ql-snow .ql-editor { color: #c9d1d9; }
.ql-snow.ql-container { border-color: #21262d; }
.ql-snow .ql-editor pre.ql-syntax {
  background: #161b22;
  color: #f0f6fc;
}
/* 编辑区内内联代码：覆盖 Quill 默认的浅灰底 + 灰字（暗色主题难辨认） */
.ql-snow .ql-editor code {
  background: rgba(110, 118, 129, 0.4);
  color: #ff7b72;
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
/* 编辑区内代码块：统一为暗色底 + 留白边界，保证可读 */
.ql-snow .ql-editor .ql-code-block-container,
.ql-snow .ql-editor pre.ql-code-block,
.ql-snow .ql-editor pre.ql-syntax {
  background: #0d1117;
  border: 1px solid #30363d;
  color: #e6edf3;
  border-radius: 6px;
}
.ql-snow .ql-editor blockquote { color: #8b949e; }
.ql-snow .ql-editor a { color: #58a6ff; }

/* 文字颜色选择器：色块与自定义取色器适配暗色 */
.ql-snow.ql-toolbar .ql-picker.ql-color-picker .ql-picker-item {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(240, 246, 252, 0.2);
}
.ql-snow.ql-toolbar .ql-picker.ql-color-picker .ql-picker-item.ql-selected {
  border-color: #388bfd;
}
.ql-snow.ql-toolbar .ql-picker.ql-color-picker .ql-picker-item[data-value="false"] {
  background: transparent;
  border: 1px dashed #8b949e;
  position: relative;
}
.ql-snow.ql-toolbar .ql-picker.ql-color-picker .ql-picker-item[data-value="false"]::after {
  content: "×";
  color: #8b949e;
  font-size: 13px;
  line-height: 14px;
  display: block;
  text-align: center;
}
.ql-snow.ql-toolbar .ql-picker.ql-color-picker input[type=color] {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 3px;
  width: 18px;
  height: 18px;
  padding: 0;
}

/* 工具栏自定义按钮（字号 / 字体 / 段落） */
.ql-snow.ql-toolbar button.ql-size-btn,
.ql-snow.ql-toolbar button.ql-font-btn,
.ql-snow.ql-toolbar button.ql-para-btn {
  padding: 3px 8px;
  font-size: 13px;
  color: #c9d1d9;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.4;
}
.ql-snow.ql-toolbar button.ql-size-btn:hover,
.ql-snow.ql-toolbar button.ql-font-btn:hover,
.ql-snow.ql-toolbar button.ql-para-btn:hover {
  color: #f0f6fc;
  background: #21262d;
}

/* 工具栏“表格”按钮 */
.ql-snow.ql-toolbar button.ql-table-btn {
  padding: 3px 8px;
  font-size: 13px;
  color: #c9d1d9;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.4;
}
.ql-snow.ql-toolbar button.ql-table-btn:hover {
  color: #f0f6fc;
  background: #21262d;
}

/* 表格尺寸悬停选择器（1×1 ~ 10×10） */
.table-picker {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
}
.table-picker-label {
  font-size: 12px;
  color: #f0f6fc;
  margin-bottom: 6px;
  text-align: center;
}
.table-picker-grid {
  display: grid;
  grid-template-columns: repeat(10, 16px);
  grid-auto-rows: 16px;
  gap: 2px;
}
.table-picker-cell {
  background: #30363d;
  border-radius: 2px;
}
.table-picker-cell.active {
  background: #388bfd;
}

/* 右键菜单：单元格背景色调色板 */
.cell-color-picker {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
}
.cell-color-picker-label {
  font-size: 12px;
  color: #f0f6fc;
  margin-bottom: 6px;
  text-align: center;
}
.cell-color-picker-grid {
  display: grid;
  grid-template-columns: repeat(12, 16px);
  grid-auto-rows: 16px;
  gap: 2px;
  max-height: 176px;
  overflow-y: auto;
  padding-right: 2px;
}
.cell-color-picker-item {
  border: 1px solid rgba(240, 246, 252, 0.2);
  border-radius: 3px;
  cursor: pointer;
}
.cell-color-picker-item:hover {
  outline: 1px solid #388bfd;
}

/* 编辑器内表格 */
#editor .ql-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  table-layout: fixed;
}
#editor .ql-editor table td,
#editor .ql-editor table th {
  border: 1px solid #30363d;
  padding: 6px 10px;
  min-width: 40px;
  vertical-align: top;
  word-break: break-word;
}
#editor .ql-editor table th {
  background: #161b22;
  font-weight: normal; /* 表格文字默认普通字重，是否加粗由工具栏控制 */
  text-align: left;
}
#editor .ql-editor table td:focus,
#editor .ql-editor table th:focus {
  outline: 2px solid #388bfd;
  outline-offset: -2px;
}

/* 单元格内段落收缩，避免出现大空行 */
#editor .ql-editor table td p,
#editor .ql-editor table th p {
  margin: 0;
}

/* 首行按表头视觉（兼容 TH 在 Delta 往返后退化为 TD 的情况）：仅保留底色，不强制加粗 */
#editor .ql-editor table tr:first-child td,
#editor .ql-editor table th {
  background: #161b22;
  text-align: left;
}

/* 单元格内列表正常缩进展示 */
#editor .ql-editor table ul,
#editor .ql-editor table ol {
  padding-left: 1.2em;
}

/* ===== 登录页 ===== */
.login-body {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* 以主题蓝 #388bfd 为素材，叠加柔光 / 点阵 / 细网格，低透明度的背景纹饰 */
  background:
    radial-gradient(620px 620px at 88% 10%, rgba(56, 139, 253, 0.10), transparent 60%),
    radial-gradient(720px 720px at 6% 88%, rgba(56, 139, 253, 0.08), transparent 62%),
    radial-gradient(rgba(56, 139, 253, 0.10) 1px, transparent 1px),
    linear-gradient(rgba(56, 139, 253, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 139, 253, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 30% 20%, #161b22, #0d1117 70%);
  background-size: auto, auto, 26px 26px, 52px 52px, 52px 52px, auto;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, no-repeat;
}
.login-card {
  width: 360px;
  max-width: 92vw;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 14px;
  padding: 30px 28px 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.login-logo {
  text-align: center;
  font-family: "FangSong", "仿宋", "FangSong_GB2312", "仿宋_GB2312", "STFangsong", serif;
  font-size: 28px;
  font-weight: 700;
  color: #f0f6fc;
  margin-bottom: 22px;
}
.login-view { display: flex; flex-direction: column; gap: 14px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label { font-size: 13px; color: #8b949e; }
.login-field input {
  padding: 9px 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  color: #f0f6fc;
  font-size: 14px;
  outline: none;
}
.login-field input:focus { border-color: #1f6feb; }
.login-btn { width: 100%; padding: 9px; font-size: 14px; }
.login-error { min-height: 18px; font-size: 13px; color: #f85149; text-align: center; }
.link-btn {
  border: none;
  background: none;
  color: #58a6ff;
  cursor: pointer;
  font-size: 13px;
  padding: 2px;
  align-self: center;
}
.link-btn:hover { text-decoration: underline; }

/* ===== 关联管理（文章关联） ===== */

/* 编辑器下方折叠关联栏 */
.conn-bar {
  flex: none;
  border-top: 1px solid #21262d;
  background: #161b22;
}
.conn-bar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
  color: #8b949e;
  font-size: 12px;
}
.conn-bar-head:hover { color: #f0f6fc; }
.conn-bar-title { font-weight: 600; }
.conn-bar-tabs { display: inline-flex; gap: 2px; }
.conn-bar-tabs[hidden] { display: none; }
.conn-bar-body[hidden] { display: none; }
.conn-tab {
  border: none;
  background: none;
  color: #8b949e;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.conn-tab:hover { background: #21262d; color: #c9d1d9; }
.conn-tab.active { background: rgba(31, 111, 235, 0.25); color: #f0f6fc; }
.conn-tab-count {
  display: inline-block;
  min-width: 16px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 8px;
  background: #30363d;
  color: #c9d1d9;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
}
.conn-tab.active .conn-tab-count { background: #1f6feb; color: #fff; }
.conn-bar-caret { margin-left: auto; font-size: 11px; transition: transform 0.15s ease; }
.conn-bar.open .conn-bar-caret { transform: rotate(90deg); }
.conn-bar-body {
  border-top: 1px solid #21262d;
  max-height: 200px;
  overflow-y: auto;
}
.conn-bar-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}
.conn-bar-table thead th {
  position: sticky;
  top: 0;
  background: #161b22;
  color: #8b949e;
  text-align: left;
  padding: 5px 10px;
  border-bottom: 1px solid #30363d;
  font-weight: 600;
  font-size: 12px;
}
.conn-bar-table thead th:nth-child(1) { width: 36%; }
.conn-bar-table thead th:nth-child(2) { width: 18%; }
.conn-bar-table thead th:nth-child(3) { width: 26%; }
.conn-bar-table thead th:nth-child(4) { width: 20%; }
.conn-bar-table tbody td {
  padding: 4px 10px;
  border-bottom: 1px solid #21262d;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conn-bar-table tbody tr:hover { background: #21262d; }
.conn-bar-title { color: #f0f6fc; }
.conn-recycled-mark {
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid #f85149;
  color: #f85149;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
}
.conn-bar-folder { color: #8b949e; font-size: 12px; }
.conn-bar-desc { color: #8b949e; font-size: 12px; }
.conn-bar-ops { text-align: right; white-space: nowrap; }
.conn-bar-ops .btn + .mini-btn { margin-left: 4px; }
.conn-empty { padding: 16px; color: #8b949e; font-size: 13px; text-align: center; }

/* 关联管理对话框 */
.conn-picker { width: 100%; }
.conn-picker-top { display: flex; gap: 12px; height: 460px; }
.conn-picker-tree {
  flex: 1 1 36%;
  min-width: 0;
  border: 1px solid #30363d;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.conn-picker-tree-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  border-bottom: 1px solid #30363d;
}
.conn-picker-tree-title {
  font-size: 12px;
  font-weight: 600;
  color: #8b949e;
}
.conn-picker-tree-btns { display: inline-flex; gap: 4px; }
.conn-picker-treelist { flex: 1; overflow-y: auto; padding: 4px; }
.conn-picker-articles {
  flex: 1 1 64%;
  min-width: 0;
  border: 1px solid #30363d;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.conn-picker-search {
  margin: 8px 8px 6px;
  padding: 6px 10px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 13px;
}
.conn-picker-search:focus { outline: none; border-color: #1f6feb; }
.conn-picker-table-wrap { flex: 1; overflow-y: auto; }
.conn-picker-pager {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0 6px;
}
.conn-picker-pager-info { font-size: 13px; color: #8b949e; font-variant-numeric: tabular-nums; }
.conn-picker-pager .btn:disabled { opacity: 0.45; cursor: default; }
.conn-picker-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.conn-picker-table thead th {
  position: sticky;
  top: 0;
  background: #161b22;
  color: #8b949e;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #30363d;
  font-weight: 600;
  font-size: 12px;
}
.conn-picker-table tbody td { padding: 6px 10px; border-bottom: 1px solid #21262d; vertical-align: middle; }
.conn-picker-table tbody tr:hover { background: #21262d; }
.conn-picker-table input[type="checkbox"] { accent-color: #1f6feb; margin: 0; }
.cp-check { width: 30px; }
.cp-desc { width: 42%; }
.conn-desc-input {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid #30363d;
  border-radius: 4px;
  background: #0d1117;
  color: #c9d1d9;
  font-size: 12px;
  outline: none;
}
.conn-desc-input:focus { border-color: #1f6feb; }

/* ===== 暗色主题滚动条（左侧文件夹目录 / 文章列表 / 文章编辑器） ===== */
#folder-tree,
#article-list,
#editor .ql-editor {
  scrollbar-width: thin;            /* Firefox */
  scrollbar-color: #30363d #161b22;
}
#folder-tree::-webkit-scrollbar,
#article-list::-webkit-scrollbar,
#editor .ql-editor::-webkit-scrollbar {
  width: 10px;
}
#folder-tree::-webkit-scrollbar-track,
#article-list::-webkit-scrollbar-track,
#editor .ql-editor::-webkit-scrollbar-track {
  background: #161b22;
}
#folder-tree::-webkit-scrollbar-thumb,
#article-list::-webkit-scrollbar-thumb,
#editor .ql-editor::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 5px;
  border: 2px solid #161b22;
}
#folder-tree::-webkit-scrollbar-thumb:hover,
#article-list::-webkit-scrollbar-thumb:hover,
#editor .ql-editor::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}
#folder-tree::-webkit-scrollbar-corner,
#article-list::-webkit-scrollbar-corner,
#editor .ql-editor::-webkit-scrollbar-corner {
  background: transparent;
}