/**
 * share_css_typora02 — Trilium 分享页 · Typora 默认浅色风格
 * ──────────────────────────────────────────────────────────────
 * 版本: 2026.05.16 (最终版)
 *
 * ═══ 自定义指南 ═══
 * 你只需修改下方 :root { } 中的变量值，即可改变整个页面的外观。
 * 每个变量都有中文注释说明它的作用、接受的值、以及推荐范围。
 * 修改后保存即可生效，无需重启服务。
 */

/* ══════════════════════════════════════════════════════════════
   0. ★★★ 用户配置区 — 所有参数都在这 ★★★
   ══════════════════════════════════════════════════════════════ */
:root {

  /* ════════════════════════════════════════════════════════════
     一、颜色设置
     所有颜色值支持: #hex / rgb(r,g,b) / rgba(r,g,b,a) / 颜色名
     ════════════════════════════════════════════════════════════ */

  /* ── 1.1 背景色 (6个) ── */
  --bg-page:        #ffffff;   /* 页面主体背景色          → 改成浅灰即变灰白 */
  --bg-card:        #f7f7f7;   /* 侧栏/卡片/引用背景色    → 比主背景略深即可 */
  --bg-elevated:    #f0f0f0;   /* 抬升面(表格头/平板)    → 比 bg-card 略深 */
  --bg-hover:       #eaeaea;   /* 鼠标悬停背景色          → 比 bg-elevated 略深 */
  --bg-code:        #f4f4f4;   /* 代码块/行内代码背景     → 保持与正文有区分 */
  --bg-stripe:      #fafafa;   /* 斑马纹/引用底色         → 很浅的灰 */
  --bg-highlight:   #e8eef5;   /* 侧栏当前笔记高亮底色    → 浅蓝效果不错 */
  --bg-card-item:   #ffffff;   /* 子笔记卡片背景色        → 通常纯白 */

  /* ── 1.2 文字颜色 (9个) ── */
  /* Typora 标准: 正文用极深黑 #1a1a1a, 二级用中灰, 弱化用浅灰 */
  --text-main:      #1a1a1a;  /* ★ 正文/列表/表格主色    → 越深阅读越清晰 */
  --text-secondary: #555555;   /* 二级文字(H4/侧栏链接)   → 不要低于 #444 */
  --text-muted:     #888888;   /* 弱化(元信息/引用/H5/H6) → 太浅会看不清 */
  --text-code:      #c7254e;   /* 行内代码文字色          → Typora 经典暗红 */
  --text-quote:     #666666;   /* 引用块文字色            → 中灰即可 */
  --text-link:      #2f6f9f;   /* 链接文字色              → 经典蓝 */
  --text-link-hover:#1a4f7a;   /* 链接悬停色              → 比链接略深 */
  --text-white:     #ffffff;   /* 白色文字(暂未使用)      → 保留 */
  --text-sel:       #000000;   /* 选中状态文字色(配合 sel-bg) */

  /* ── 1.3 打印专用文字色 (2个) ── */
  --text-print:     #333333;   /* 打印时链接等文字色      → 深灰即可 */
  --text-print-title:#1a1a1a;  /* 打印时标题文字色        → 纯黑 */

  /* ── 1.4 边框颜色 (5个) + 边框粗细 (2个) ── */
  --border:          #d4d4d4;  /* ★ 主要边框色(表格外框/分割线) */
  --border-light:    #e0e0e0;  /* ★ 轻边框(表格内线/卡片边线) */
  --border-quote:    #dddddd;  /* 引用块左边框色          → 浅灰 */
  --border-dash:     #cccccc;  /* include-note 虚线色     → 比实线浅 */
  --border-hover:    #bbbbbb;  /* 悬停边框色(暂未使用)    → 比默认深 */

  --border-w:        1px;      /* ★ 通用边框粗细   → 1px=细, 2px=明显 */
  --border-w-md:     2px;      /* ★ 菜单右边框粗细  → 同 border-w 或略粗 */

  /* ── 1.5 阴影效果 (5个) ── */
  --shadow-sm:       0 1px 4px rgba(0,0,0,0.05);       /* 微小阴影 */
  --shadow-md:       0 4px 16px rgba(0,0,0,0.06);      /* 中等阴影 */
  --shadow-card:     0 1px 3px rgba(0,0,0,0.04);       /* 卡片默认阴影 */
  --shadow-card-hover: 0 6px 16px rgba(0,0,0,0.08);    /* 卡片悬停阴影 */
  --shadow-menu:     5px 0 20px rgba(0,0,0,0.06);      /* 菜单展开阴影 */

  /* ── 1.6 文字选中色 (1个) ── */
  --sel-bg:          #b4d5fe;  /* 鼠标拖选文字时的背景色 */

  /* ════════════════════════════════════════════════════════════
     二、字体和排版
     ════════════════════════════════════════════════════════════ */

  /* ── 2.1 字体族 (2个) ── */
  --font:            -apple-system, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
                       /* 正文字体: 优先系统字体, 跨平台兼容 */
  --font-mono:       "WenQuanYi Zen Hei Mono", "Noto Sans Mono CJK SC", "SF Mono", "Fira Code", "Menlo", "Consolas", monospace;
                       /* 等宽字体: 保留变量供其他场景 */

  /* ── 2.2 字号和行高 (5个) ── */
  --body-fs:         clamp(15px, 0.9vw + 12px, 17px);
                       /* ★ 正文字号: clamp(最小值, 首选值, 最大值) */
  --body-lh:         1.65;    /* ★ 正文字间距 → 1.5~1.8 适合阅读 */
  --code-lh:         1.55;    /* ★ 代码块行高  → 稍小于正文 */
  --body-overflowx:  hidden;  /* 横向溢出: hidden 防止滚动, visible 允许 */
  --body-antialias:  antialiased; /* 字体平滑: antialiased / auto / subpixel-antialiased */

  /* ════════════════════════════════════════════════════════════
     三、圆角
     ════════════════════════════════════════════════════════════ */

  --radius-sm:       3px;     /* 小圆角: 代码/高亮/引用 */
  --radius-md:       6px;     /* 中圆角: 按钮 */
  --radius-lg:       8px;     /* 大圆角: 卡片 */
  --radius-round:    99px;    /* 完全圆形: 滚动条滑块 */

  /* ════════════════════════════════════════════════════════════
     四、排版控制 (布尔/开关类值)
     ════════════════════════════════════════════════════════════ */

  --txt-transform:   none;    /* H5 大写: uppercase=全大写, none=正常 */
  --txt-underline:   underline;  /* 下划线样式值 */
  --txt-italic:      italic;     /* 斜体样式值 */
  --tx-deco-none:    none;       /* 无装饰样式值 */

  /* ════════════════════════════════════════════════════════════
     五、侧栏 (左侧悬浮目录导航)
     控制 "从左侧边缘滑出" 的目录树的尺寸和交互
     ════════════════════════════════════════════════════════════ */

  /* ── 5.1 侧栏尺寸与定位 (10个) ── */
  --menu-w:          480px;   /* ★ 展开后总宽度 → 240~320 之间 */
  --menu-collapsed:  20px;    /* ★ 折叠后露出的触发窄条 → 默认18px够用 */
  --menu-pos:        fixed;   /* 定位方式: fixed=悬浮, absolute=跟随滚动 */
  --menu-top:        0;       /* 距顶部距离 */
  --menu-left:       0;       /* 距左侧距离 */
  --menu-z:          9999;    /* 层叠顺序: 越大越靠上 */
  --menu-h:          100vh;   /* 高度: 100vh=全屏, auto=随内容 */
  --menu-overflow-y: auto;    /* 纵向溢出: auto=可滚动, hidden=裁剪 */
  --menu-overflow-x: hidden;  /* 横向溢出: 必须 hidden 防变形 */
  --menu-willchange: transform, opacity; /* 浏览器性能优化提示 */

  /* ── 5.2 侧栏内边距和动画 (6个) ── */
  --menu-pad-y:      28px;    /* 上下内边距 */
  --menu-pad-x:      20px;    /* 左右内边距 */
  --menu-opacity:    0.75;    /* 折叠时透明度 → 0~1, 越大越明显 */
  --menu-trans:      0.18s;   /* ★ 展开动画时长 → 越小越快 */
  --menu-trans-ease: cubic-bezier(0.22,1,0.36,1); /* 缓动函数 */
  --menu-border-w:   3px;     /* 右边框粗细 */

  /* ── 5.3 折叠时窄条上的 ☰ 图标 (5个) ── */
  --menu-icon:       "☰";     /* 图标字符 → 可换成 ≡ 或 ▬ */
  --menu-icon-r:     4px;     /* 图标距右侧距离 */
  --menu-icon-fs:    20px;    /* 图标字号 */
  --menu-icon-op:    0.7;     /* 图标透明度 */
  --menu-icon-z:     9998;       /* 图标层叠顺序 */

  /* ── 5.4 目录树文字排版 (9个) ── */
  --menu-p-mb:       4px;     /* 普通段落底部间距 */
  --menu-p-fs:       0.95em;  /* 普通段落的字号 */
  --menu-head-fw:    700;     /* ★ 根节点字重: 700=粗, 600=半粗, 400=正常 */
  --menu-head-fs:    1.2em;     /* 根节点字号 */
  --menu-head-pb:    10px;    /* 根节点底部内边距 */
  --menu-head-mb:    10px;    /* 根节点底部外边距 */
  --menu-a-pad:      3px 0;   /* 目录链接内边距(上下 左右) */
  --menu-a-fs:       1.05em;     /* 目录链接字号 */
  --menu-ul-indent:  10px;    /* 子目录缩进宽度 */

  /* ── 5.5 当前笔记高亮 (6个) ── */
  --hl-fw:           600;     /* 高亮字重 */
  --hl-pos:          relative;/* 定位方式: relative 用于 :before 定位 */
  --hl-pad:          5px 10px;/* 高亮内边距(上下 左右) */
  --hl-margin:       3px -10px;/* 高亮外边距(负值=扩展背景) */
  --hl-fs:           0.85em;  /* 高亮前缀符号字号 */
  --hl-icon:         "◀ ";    /* 高亮前缀符号 → 可换成 ▸ 或 ► 或 > */

  /* ── 5.6 动画通用时长 (3个) ── */
  --trans-fast:      0.15s;   /* 快速动画 (图标消失/链接变色) */
  --trans-med:       0.2s;    /* 中等动画 (引用背景变化) */
  --trans-slow:      0.22s;   /* 慢速动画 (卡片hover效果) */

  /* ── 5.7 ★★ 目录树增强参数 (17个) ★★
       控制树形连接线、缩进、悬浮效果、高亮条
       修改后保存即可生效 ── */
  --tree-line-left:     5px;    /* 连接纵线距左侧距离(px) → 调整整棵树水平位置 */
  --tree-line-w:        3px;    /* 连接纵线宽度(px)        → 1=细, 2=粗 */
  --tree-line-h:        12px;    /* 连接横线长度(px)        → 越大横向延伸越长 */
  --tree-line-color:    var(--border);  /* 连接线颜色  → 默认用边框色 */
  --tree-line-op:       0.7;    /* 连接线透明度(0~1)       → 0=隐藏, 1=实线 */
  --tree-indent-step:   10px;   /* ★ 每层递进缩进量(px)   → 越大树越宽 */
  --tree-a-pad-v:       4px;    /* 目录项上下内边距(px)   → 越大每行越高 */
  --tree-a-pad-h:       5px;    /* 目录项左右内边距(px)   → 影响文字左右间距 */
  --tree-a-pad-start:   12px;   /* 目录项左侧起始缩进     → 含树线占位 */
  --tree-a-radius:      var(--radius-sm); /* 目录项圆角 */
  --tree-hover-bg:      var(--bg-elevated); /* 悬浮背景色 */
  --tree-hover-color:   var(--text-link);   /* 悬浮文字色 */
  --tree-strong-pad-v:  6px;    /* 高亮项上下内边距 */
  --tree-strong-pad-h:  12px;   /* 高亮项左右内边距 */
  --tree-strong-margin-v: 3px;  /* 高亮项上下外边距 */
  --tree-strong-border-l: 3px;  /* 高亮项左侧强调条宽度(px) → 2~4 */
  --tree-strong-accent: var(--text-link); /* 高亮项强调条颜色 */

  /* ════════════════════════════════════════════════════════════
     六、正文区 (主内容区域)
     ════════════════════════════════════════════════════════════ */

  /* ── 6.1 正文区尺寸 (6个) ── */
  --main-flex:        1;      /* flex 弹性比例: 1=填满剩余空间 */
  --main-margin-l:    18px;   /* ★ 左侧外边距(留给侧栏窄条) */
  --main-pad-y:       clamp(28px, 4vw, 60px);
                               /* ★ 上下内边距(响应式) */
  --main-pad-x:       clamp(20px, 4vw, 60px);
                               /* ★ 左右内边距(响应式) */
  --main-minw:        0;      /* 最小宽度(防止溢出) */
  --main-maxw:        100%;   /* 最大宽度 */

  /* ── 6.2 Toggle 菜单按钮 (10个) ── */
  /* 桌面端隐藏, 移动端自动显示 */
  --tog-display:      none;   /* 桌面端: none=隐藏, flex=显示 */
  --tog-pos:          fixed;  /* 定位方式 */
  --tog-size:         38px;   /* 按钮宽高 */
  --tog-gap:          8px;    /* 距左上角距离 */
  --tog-radius:       var(--radius-md); /* 圆角 */
  --tog-fs:           1.6rem; /* 按钮内 ☰ 图标字号 */
  --tog-z:            100;    /* 层叠顺序 */
  --tog-cursor:       pointer;/* 鼠标样式 */
  --tog-border:       var(--border-w) solid var(--border); /* 按钮边框 */
  --tog-flex:         center; /* 图标居中 */

  /* ════════════════════════════════════════════════════════════
     七、页面导航 (面包屑)
     ════════════════════════════════════════════════════════════ */

  --parent-fs:        0.88em; /* 父级导航字号 */
  --parent-mb:        8px;    /* 底部间距 */
  --parent-deco:      none;   /* 链接下划线: none=无, underline=有 */
  --parent-hover-deco:var(--txt-underline); /* 悬停下划线 */

  /* ════════════════════════════════════════════════════════════
     八、标题 (H1 ~ H6)
     每个标题的: 字号(fs) 字重(fw) 外边距(margin) 底部内边距(pb)
     ════════════════════════════════════════════════════════════ */

  /* ── 8.1 页面标题 H1 ── */
  --h1-fs:     clamp(1.8em, 3.5vw, 2.4em);  /* ★ 页面主标题字号 */
  --h1-fw:     700;      /* 字重 */
  --h1-pb:     12px;     /* 底部内边距(标题下方留白) */
  --h1-margin: 0 0 24px 0; /* 外边距 */
  --h1-lh:     1.3;      /* 行高 */

  /* ── 8.2 章节标题 H2 ── */
  --h2-fs:     clamp(1.35em, 2.5vw, 1.6em);
  --h2-fw:     700;
  --h2-margin: 1.8em 0 0.6em 0;
  --h2-pb:     8px;

  /* ── 8.3 子章节 H3 ── */
  --h3-fs:     clamp(1.1em, 1.8vw, 1.3em);
  --h3-fw:     700;
  --h3-margin: 1.4em 0 0.4em 0;

  /* ── 8.4 H4 ── */
  --h4-fs:     1.05em;
  --h4-fw:     600;
  --h4-margin: 1.2em 0 0.3em 0;

  /* ── 8.5 H5 ── */
  --h5-fs:     0.92em;
  --h5-fw:     700;
  --h5-margin: 1em 0 0.2em 0;
  --h5-ls:     0.03em;   /* 字间距 */
  --h5-trans:  uppercase;/* 文字转换: uppercase=全大写, none=正常 */

  /* ── 8.6 H6 ── */
  --h6-fs:     0.9em;
  --h6-fw:     400;
  --h6-margin: 0.8em 0 0.2em 0;

  /* ── 8.7 标题通用 ── */
  --h-border:  var(--border-w) solid var(--border-light);
                       /* ★ 标题底部边框: 粗细+颜色 */

  /* ════════════════════════════════════════════════════════════
     九、正文排版 (段落/列表/引用/链接)
     ════════════════════════════════════════════════════════════ */

  /* ── 9.1 段落和列表 ── */
  --p-margin:    0.6em 0;    /* 段落上下间距 */
  --li-margin:   0.25em 0;   /* 列表项上下间距 */
  --li-indent:   1.8em;      /* 列表缩进宽度 */

  /* ── 9.2 引用块 ── */
  --bq-pad:     8px 18px;    /* 引用块内边距 */
  --bq-margin:  1em 0;       /* 引用块上下间距 */
  --bq-border:  4px;         /* ★ 引用左边框粗细 → 2~6px */
  --bq-bg:      none;        /* 引用背景色: none=透明, 或色值 */
  --bq-italic:  italic;      /* 引用是否斜体: italic=斜, normal=不斜 */

  /* ── 9.3 链接 ── */
  --link-deco:   none;        /* 链接下划线: none=无, underline=有 */
  --link-hover-deco: var(--txt-underline); /* 链接悬停下划线 */

  /* ════════════════════════════════════════════════════════════
     十、代码块 (含行内代码)
     ════════════════════════════════════════════════════════════ */

  --code-pad:    2px 6px;    /* 行内代码内边距 */
  --code-fs:     0.95em;     /* ★ 代码字号(比正文略小) */
  --code-over-x: auto;       /* 横向溢出: auto=可滚动, hidden=裁剪 */
  --pre-pad:     16px;       /* 代码块内边距 */
  --pre-margin:  1em 0;      /* 代码块上下间距 */

  /* ════════════════════════════════════════════════════════════
     十一、表格
     ════════════════════════════════════════════════════════════ */

  --table-fs:     0.95em;    /* 表格字号 */
  --table-margin: 1.2em;   /* 表格上下间距 */
  --table-colla:  collapse;  /* 边框合并: collapse=合并, separate=分离 */
  --table-w:      100%;      /* 表格宽度: 100%=填满, auto=自适应 */

  --th-pad:     10px 14px;   /* 表头单元格内边距 */
  --th-fs:      0.9em;       /* 表头字号 */
  --th-fw:      600;         /* 表头字重 */
  --th-align:   center;        /* 表头对齐: left/center/right */
  --th-color:   var(--text-main); /* 表头文字色(默认同正文) */

  --td-pad:     8px 14px;    /* 数据单元格内边距 */
  --td-color:   var(--text-main); /* 数据单元格文字色 */

  --th-bg:      #f2f2f2;     /* ★ 表头背景色 */
  --stripe-bg:  #fafafa;     /* ★ 斑马纹(偶数行)背景色 */
  --table-hover:#f0f0f0;     /* ★ 鼠标悬停行背景色 */
    
  --table-margin-lr: 0;         /* 表格水平外边距: 0=靠左(默认), auto=居中 */
  --table-fig-ml: 0;            /* figure.table 左外边距: 0=靠左 */
  --table-fig-mr: auto;         /* figure.table 右外边距: auto=靠左 */

  /* ════════════════════════════════════════════════════════════
     十二、图片
     ════════════════════════════════════════════════════════════ */

  --img-maxw:     100%;      /* 图片最大宽度: 100%=不溢出容器 */
  --img-h:        auto;      /* 图片高度: auto=等比缩放 */
  --fig-margin:   1.5em auto;/* 图片容器上下间距+居中 */
  --fig-align:    center;    /* 图片对齐方式 */
  --fig-display:  inline-block; /* 图片 display 方式 */

  /* ════════════════════════════════════════════════════════════
     十三、Include-Note (嵌入笔记占位符)
     当分享页中有 ~ 引用的子笔记时显示的提示框
     ════════════════════════════════════════════════════════════ */

  --inc-pad:     20px;       /* 占位框内边距 */
  --inc-margin:  1em 0;      /* 占位框上下间距 */
  --inc-minh:    60px;       /* 占位框最小高度 */
  --inc-fs:      0.85em;     /* 占位框字号 */
  --inc-bdash:   1px dashed var(--border-dash); /* 虚线边框 */
  --inc-italic:  italic;     /* 占位框斜体 */
  --inc-align:   center;     /* 占位框对齐 */
  --inc-trans:   border-color var(--trans-med) ease, background var(--trans-med) ease;
                              /* hover 动画 */
  --inc-after:   "📎 子笔记引用 (分享页暂不支持动态加载)";
                              /* ★ 占位提示文字(可改成你的文字) */
  --inc-after-op:0.7;        /* 提示文字透明度 */

  /* ════════════════════════════════════════════════════════════
     十四、剪藏来源 (从其他笔记引用的标记)
     ════════════════════════════════════════════════════════════ */

  --clip-pad:   10px 14px;   /* 内边距 */
  --clip-margin:1em 0;       /* 上下间距 */
  --clip-fs:    0.88em;      /* 字号 */
  --clip-border-l:0;         /* 左边框宽度: 0=无边框 */
  --clip-border-r:0;         /* 右边框宽度: 0=无边框 */

  /* ════════════════════════════════════════════════════════════
     十五、子笔记卡片 (页面底部的子笔记导航)
     有子笔记时显示为网格卡片, 每张卡代表一个子笔记
     ════════════════════════════════════════════════════════════ */

  --card-gap:      12px;     /* 卡片间距 */
  --card-w:        185px;    /* ★ 卡片宽度 */
  --card-h:        110px;    /* ★ 卡片高度 */
  --card-radius:   8px;      /* ★ 卡片圆角 */
  --card-pad:      16px 12px;/* 卡片内边距 */
  --card-fs:       0.9em;    /* 卡片文字字号 */
  --card-mt:       2em;      /* 卡片区域上边距 */
  --card-pt:       1em;      /* 卡片区域上内边距 */
  --card-line:     3px;      /* ★ 卡片顶部装饰线的高度 */
  --card-line-op:  0.25;     /* 装饰线初始透明度(0~1) */
  --card-hover-up: -3px;     /* ★ hover 时卡片上移量(负数=上移) */
  --card-overflow: hidden;   /* 溢出: hidden=裁剪, visible=可见 */
  --card-pos:      relative; /* 定位(用于装饰线定位) */
  --card-trans:    all var(--trans-slow) ease; /* hover 动画 */

  --card-before-pos: absolute; /* 装饰线定位方式 */
  --card-before-t:   0;        /* 装饰线上位置 */
  --card-before-l:   0;        /* 装饰线左位置 */
  --card-before-r:   0;        /* 装饰线右位置 */

  /* ── 15.1 卡片列表模式 (子笔记少时采用行内列表) ── */
  --card-list-gap:   4px 20px;  /* 列表项间距 */
  --card-list-a-pad: 2px 0;     /* 列表项内边距 */

  /* ════════════════════════════════════════════════════════════
     十六、水平线和键盘标签
     ════════════════════════════════════════════════════════════ */

  --hr-margin:    1.5em 0;      /* 水平线上下间距 */
  --hr-border:    var(--border-w) solid var(--border-light);
                                  /* 水平线样式 */

  --kbd-pad:      1px 6px;      /* 键盘标签内边距 */
  --kbd-fs:       0.88em;       /* 键盘标签字号 */

  /* ════════════════════════════════════════════════════════════
     十七、滚动条 (Webkit 浏览器)
     影响 Chrome/Edge/Safari, 不影响 Firefox
     ════════════════════════════════════════════════════════════ */

  --sb-size:       8px;       /* 滚动条宽度+高度 */
  --sb-color:      #d0d0d0;   /* 滚动条滑块颜色 */
  --sb-hover:      #aaaaaa;   /* 滑块悬停颜色 */
  --sb-border:     2px;       /* 滑块内边距(制造间隙) */
  --sb-radius:     99px;      /* 滑块圆角 */
  --sb-clip:       content-box;/* 背景裁剪方式 */
  --sb-track-bg:   transparent;/* 滚动条轨道背景 */

  /* ════════════════════════════════════════════════════════════
     十八、响应式设计 (移动端/平板端)
     以下变量控制不同屏幕尺寸下的行为
     ════════════════════════════════════════════════════════════ */

  /* ── 18.1 移动端 (≤768px: 手机竖屏) ── */
  --mob-layout:     column;          /* 布局方向: column=上下, row=左右 */
  --mob-menu-w:     100%;            /* 菜单宽度: 100%=全屏宽 */
  --mob-menu-minw:  100%;            /* 菜单最小宽度 */
  --mob-menu-br:    none;            /* 菜单右边框: 移动端去掉 */
  --mob-menu-z:     150;             /* 菜单弹窗层叠 */
  --mob-menu-tx:    translateX(-100%); /* 菜单默认滑出屏幕 */
  --mob-menu-op:    0;               /* 菜单默认透明 */
  --mob-menu-trans: transform 0.25s ease, opacity 0.25s ease;
                                       /* 菜单滑入动画 */
  --mob-tog-flex:   flex;            /* 显示 toggle 按钮 */
  --mob-main-pad:   20px 16px 40px;  /* 正文区移动端内边距 */
  --mob-card-dir:   column;          /* 卡片排列方向 */
  --mob-card-w:     100%;            /* 卡片宽度: 全屏宽 */
  --mob-card-h:     auto;            /* 卡片高度自适应 */
  --mob-card-a-h:   48px;            /* 卡片链接高度 */
  --mob-card-a-dir: row;             /* 卡片内部水平排列 */
  --mob-card-a-just: flex-start;     /* 卡片内容左对齐 */
  --mob-card-a-px:  0 14px;          /* 卡片内边距 */
  --mob-before-dis: none;            /* 隐藏卡片装饰线 */
  --mob-inc-pad:    14px;            /* include-note 内边距 */

  /* ── 18.2 中屏 (769~1024px: 平板) ── */
  --tab-menu-w:     220px;           /* 平板端菜单宽度 */
  --tab-menu-col:   14px;            /* 平板端折叠窄条宽 */
  --tab-menu-pad:   24px 16px;       /* 平板端菜单内边距 */
  --tab-main-ml:    14px;            /* 平板端正文左边距 */
  --tab-main-pad:   28px;            /* 平板端正文内边距 */

  /* ── 18.3 打印 ── */
  --print-menu-dis: none;            /* 打印时隐藏菜单 */
  --print-main-ml:  0;               /* 打印时正文左边距归零 */
  --print-bg:       white;           /* 打印时背景变白(省墨) */
  --print-color:    black;           /* 打印时文字变黑 */
  --print-a-deco:   var(--txt-underline); /* 打印时链接加下划线 */
}

/* ══════════════════════════════════════════════════════════════
   以下为 CSS 规则体 — 所有值已用 var() 引用上方变量, 无需修改
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box !important; }

html { scroll-behavior: smooth; }

body.share-body {
  margin: 0 !important; padding: 0 !important;
  background: var(--bg-page) !important;
  color: var(--text-main);
  font-family: var(--font);
  font-size: var(--body-fs);
  line-height: var(--body-lh);
  overflow-x: var(--body-overflowx) !important;
  -webkit-font-smoothing: var(--body-antialias);
}

::selection { background: var(--sel-bg); color: var(--text-sel); }

#layout {
  display: flex !important; flex-direction: row !important;
  width: 100% !important; max-width: 100% !important;
  min-height: 100vh !important;
}

#menu {
  position: var(--menu-pos) !important;
  top: var(--menu-top) !important; left: var(--menu-left) !important;
  width: var(--menu-w) !important; min-width: var(--menu-w) !important;
  height: var(--menu-h) !important; z-index: var(--menu-z) !important;
  background: var(--bg-card) !important;
  border-right: var(--menu-border-w) solid var(--border) !important;
  overflow-y: var(--menu-overflow-y) !important;
  overflow-x: var(--menu-overflow-x) !important;
  padding: var(--menu-pad-y) var(--menu-pad-x) !important;
  transform: translateX(calc(var(--menu-collapsed) - var(--menu-w))) !important;
  opacity: var(--menu-opacity);
  transition: transform var(--menu-trans) var(--menu-trans-ease),
              opacity var(--menu-trans) ease !important;
  will-change: var(--menu-willchange);
}
#menu:hover {
  transform: translateX(0) !important; opacity: 1 !important;
  box-shadow: var(--shadow-menu) !important;
}

#menu::before {
  content: var(--menu-icon); position: absolute; top: 50%;
  right: var(--menu-icon-r); transform: translateY(-50%);
  font-size: var(--menu-icon-fs);
  color: var(--text-muted); opacity: var(--menu-icon-op);
  transition: opacity var(--trans-fast) ease;
  pointer-events: none; z-index: var(--menu-icon-z);
}
#menu:hover::before { opacity: 0 !important; }

#menu p { margin: 0 0 var(--menu-p-mb) 0; font-size: var(--menu-p-fs); }
#menu > p {
  font-weight: var(--menu-head-fw); font-size: var(--menu-head-fs);
  color: var(--text-main); padding-bottom: var(--menu-head-pb);
  border-bottom: var(--h-border); margin-bottom: var(--menu-head-mb);
}

/* ────────────────────────────────────────────────
   目录树增强：树形连接线 + 悬浮 + 层级缩进
   所有值引自 5.7 目录树增强参数, 修改变量即可
   ──────────────────────────────────────────────── */
#menu a {
  color: var(--text-secondary); text-decoration: var(--link-deco);
  display: block; padding: var(--tree-a-pad-v) var(--tree-a-pad-h) var(--tree-a-pad-v) var(--tree-a-pad-start);
  font-size: var(--menu-a-fs);
  border-radius: var(--tree-a-radius);
  transition: all var(--trans-fast) ease;
  position: relative;
}
/* 树形连接线 └ ├ │ ─ 从上方引下的竖线 */
#menu a::before {
  content: '';
  position: absolute;
  left: var(--tree-line-left); top: 0; bottom: 50%;
  width: var(--tree-line-w);
  background: var(--tree-line-color);
  opacity: var(--tree-line-op);
}
/* 连接线的横线 ─ 从竖线向右延伸 */
#menu a::after {
  content: '';
  position: absolute;
  left: var(--tree-line-left); top: 50%;
  width: var(--tree-line-h); height: var(--tree-line-w);
  background: var(--tree-line-color);
  opacity: var(--tree-line-op);
}
/* 最后一项截断竖线（避免竖线穿过最底项） */
#menu ul li:last-child > a::before { height: 50%; }
/* 悬浮效果：上色 + 淡背景 */
#menu a:hover {
  color: var(--tree-hover-color);
  background: var(--tree-hover-bg);
}
/* 层级递进缩进：每 base + 递进 step */
#menu ul { padding-left: 0; list-style: none; }
#menu ul li { margin: 0; position: relative; }
#menu ul li a { padding-left: calc(var(--tree-a-pad-start) + var(--tree-indent-step)); }
#menu ul ul li a { padding-left: calc(var(--tree-a-pad-start) + var(--tree-indent-step) * 2); }
#menu ul ul ul li a { padding-left: calc(var(--tree-a-pad-start) + var(--tree-indent-step) * 3); }
#menu ul ul ul ul li a { padding-left: calc(var(--tree-a-pad-start) + var(--tree-indent-step) * 4); }
#menu ul ul ul ul ul li a { padding-left: calc(var(--tree-a-pad-start) + var(--tree-indent-step) * 5); }

/* ────────────────────────────────────────────────
   当前笔记高亮：蓝底 + 左侧强调条 + 树线
   ──────────────────────────────────────────────── */
#menu strong {
  font-weight: var(--hl-fw); color: var(--text-main);
  display: block;
  padding: var(--tree-strong-pad-v) var(--tree-strong-pad-h);
  margin: var(--tree-strong-margin-v) 0;
  background: var(--bg-highlight); border-radius: var(--tree-a-radius);
  position: relative;
  border-left: var(--tree-strong-border-l) solid var(--tree-strong-accent);
}
#menu strong::before { content: var(--hl-icon); color: var(--text-link); font-size: var(--hl-fs); }
/* 当前项也保留树形连接线 */
#menu strong::after {
  content: '';
  position: absolute;
  left: var(--tree-line-left); top: 0; bottom: 50%;
  width: var(--tree-line-w);
  background: var(--tree-line-color);
  opacity: var(--tree-line-op);
}

#main {
  flex: var(--main-flex) !important; margin-left: var(--main-margin-l) !important;
  padding: var(--main-pad-y) var(--main-pad-x) !important;
  background: var(--bg-page) !important;
  min-width: var(--main-minw) !important; max-width: var(--main-maxw) !important;
}

#toggleMenuButton {
  display: var(--tog-display); position: var(--tog-pos);
  top: var(--tog-gap); left: var(--tog-gap);
  width: var(--tog-size); height: var(--tog-size);
  border-radius: var(--tog-radius); border: var(--tog-border);
  background: var(--bg-page); font-size: var(--tog-fs);
  z-index: var(--tog-z); cursor: var(--tog-cursor);
  color: var(--text-main); box-shadow: var(--shadow-sm);
  align-items: var(--tog-flex); justify-content: var(--tog-flex);
}

#parentLink { font-size: var(--parent-fs); color: var(--text-muted); margin-bottom: var(--parent-mb); }
#parentLink a { color: var(--text-link); text-decoration: var(--parent-deco); }
#parentLink a:hover { color: var(--text-link-hover); text-decoration: var(--parent-hover-deco); }

#title {
  margin: var(--h1-margin) !important; font-size: var(--h1-fs) !important;
  font-weight: var(--h1-fw) !important; line-height: var(--h1-lh);
  color: var(--text-main) !important; padding-bottom: var(--h1-pb);
  border-bottom: var(--h-border);
}

#content h2, .ck-content h2 {
  font-size: var(--h2-fs); font-weight: var(--h2-fw);
  margin: var(--h2-margin); padding-bottom: var(--h2-pb);
  border-bottom: var(--h-border); color: var(--text-main);
}
#content h3, .ck-content h3 {
  font-size: var(--h3-fs); font-weight: var(--h3-fw);
  margin: var(--h3-margin); color: var(--text-main);
}
#content h4, .ck-content h4 {
  font-size: var(--h4-fs); font-weight: var(--h4-fw);
  color: var(--text-secondary); margin: var(--h4-margin);
}
#content h5, .ck-content h5 {
  font-size: var(--h5-fs); font-weight: var(--h5-fw);
  color: var(--text-muted); text-transform: var(--h5-trans);
  letter-spacing: var(--h5-ls); margin: var(--h5-margin);
}
#content h6, .ck-content h6 {
  font-size: var(--h6-fs); font-weight: var(--h6-fw);
  color: var(--text-muted); font-style: var(--txt-italic);
  margin: var(--h6-margin);
}

#content p, .ck-content p, #content li, .ck-content li { color: var(--text-main) !important; }
#content p, .ck-content p { margin: var(--p-margin); }
#content li, .ck-content li { margin: var(--li-margin); }
#content ul, .ck-content ul,
#content ol, .ck-content ol { padding-left: var(--li-indent); }

blockquote, .ck-content blockquote {
  margin: var(--bq-margin); padding: var(--bq-pad);
  border-left: var(--bq-border) solid var(--border-quote);
  background: var(--bq-bg); color: var(--text-quote);
  font-style: var(--bq-italic);
}
blockquote p { margin: 0 !important; }

a { color: var(--text-link); text-decoration: var(--link-deco); transition: color var(--trans-fast) ease; }
a:hover { color: var(--text-link-hover); text-decoration: var(--link-hover-deco); }

code:not(pre code) {
  background: var(--bg-code) !important; color: var(--text-code) !important;
  padding: var(--code-pad) !important; border-radius: var(--radius-sm);
  font-size: var(--code-fs);
}

pre, .ck-content pre {
  background: var(--bg-code) !important;
  border: var(--border-w) solid var(--border) !important;
  border-radius: var(--radius-sm); padding: var(--pre-pad) !important;
  margin: var(--pre-margin) !important;
  overflow-x: var(--code-over-x) !important;
  font-size: var(--code-fs);
  line-height: var(--code-lh); color: var(--text-main);
}

table {
  width: var(--table-w) !important; margin: var(--table-margin) var(--table-margin-lr) !important;
  border-collapse: var(--table-colla); font-size: var(--table-fs);
}
figure.table {
    margin-left: var(--table-fig-ml) !important;
    margin-right: var(--table-fig-mr) !important;
}
table th {
  background: var(--th-bg); font-weight: var(--th-fw);
  padding: var(--th-pad); text-align: var(--th-align);
  border: var(--border-w) solid var(--border); font-size: var(--th-fs);
  color: var(--th-color);
}
table td {
  padding: var(--td-pad); border: var(--border-w) solid var(--border-light);
  color: var(--td-color) !important;
}
table tr:nth-child(even) td { background: var(--stripe-bg); }
table tr:hover td { background: var(--table-hover); }

img { max-width: var(--img-maxw) !important; height: var(--img-h) !important; }
figure.image { margin: var(--fig-margin) !important; text-align: var(--fig-align); }
figure.image img { display: var(--fig-display); }

section.include-note {
  display: block; margin: var(--inc-margin); padding: var(--inc-pad);
  border: var(--inc-bdash); border-radius: var(--radius-sm);
  background: var(--stripe-bg); min-height: var(--inc-minh);
  text-align: var(--inc-align); color: var(--text-muted);
  font-size: var(--inc-fs); font-style: var(--inc-italic);
  transition: var(--inc-trans);
}
section.include-note:hover { border-color: var(--text-link); background: var(--bg-card); }
section.include-note::after { content: var(--inc-after); opacity: var(--inc-after-op); }

#noteClippedFrom {
  margin: var(--clip-margin); padding: var(--clip-pad);
  background: var(--stripe-bg);
  border: var(--border-w) solid var(--border-light);
  border-left-width: var(--clip-border-l); border-right-width: var(--clip-border-r);
  color: var(--text-muted); font-size: var(--clip-fs);
}

#childLinks { margin-top: var(--card-mt); padding-top: var(--card-pt); border-top: var(--h-border); }
#childLinks hr { border: none; border-top: var(--h-border); margin: 0 0 8px 0; }

#childLinks.grid ul {
  list-style: none; display: flex; flex-wrap: wrap;
  padding: 0; gap: var(--card-gap);
}
#childLinks.grid ul li { width: var(--card-w); height: var(--card-h); }
#childLinks.grid ul li a {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; width: 100%;
  background: var(--bg-card-item); border: var(--border-w) solid var(--border);
  border-radius: var(--card-radius); text-align: center;
  font-size: var(--card-fs); padding: var(--card-pad);
  color: var(--text-main); text-decoration: var(--link-deco);
  box-shadow: var(--shadow-card); transition: var(--card-trans);
  position: var(--card-pos); overflow: var(--card-overflow);
}
#childLinks.grid ul li a::before {
  content: '';
  position: var(--card-before-pos);
  top: var(--card-before-t); left: var(--card-before-l); right: var(--card-before-r);
  height: var(--card-line); background: var(--text-link);
  opacity: var(--card-line-op); transition: opacity var(--trans-slow) ease;
}
#childLinks.grid ul li a:hover {
  background: var(--stripe-bg); border-color: var(--text-link);
  transform: translateY(var(--card-hover-up)); box-shadow: var(--shadow-card-hover);
}
#childLinks.grid ul li a:hover::before { opacity: 1; }

#childLinks.list ul {
  list-style: none; display: inline-flex; flex-wrap: wrap;
  padding: 0; gap: var(--card-list-gap);
}
#childLinks.list ul li a { color: var(--text-link); padding: var(--card-list-a-pad); }

hr { border: none; border-top: var(--hr-border); margin: var(--hr-margin); }
del { color: var(--text-muted); }
kbd { background: var(--bg-code); border: var(--border-w) solid var(--border);
      border-radius: var(--radius-sm); padding: var(--kbd-pad);
      font-size: var(--kbd-fs); }

::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
::-webkit-scrollbar-track { background: var(--sb-track-bg); }
::-webkit-scrollbar-thumb {
  background: var(--sb-color); border-radius: var(--sb-radius);
  border: var(--sb-border) solid transparent; background-clip: var(--sb-clip);
}
::-webkit-scrollbar-thumb:hover { background: var(--sb-hover); background-clip: var(--sb-clip); }

@media (max-width: 768px) {
  #layout { flex-direction: var(--mob-layout) !important; }
  #menu {
    width: var(--mob-menu-w) !important; min-width: var(--mob-menu-minw) !important;
    border-right: var(--mob-menu-br) !important;
    border-bottom: var(--border-w) solid var(--border) !important;
    z-index: var(--mob-menu-z) !important;
    transform: var(--mob-menu-tx) !important; opacity: var(--mob-menu-op) !important;
    transition: var(--mob-menu-trans) !important;
  }
  #menu::before { display: var(--mob-before-dis); }
  #layout.showMenu #menu { transform: translateX(0) !important; opacity: 1 !important; }
  #toggleMenuButton { display: var(--mob-tog-flex) !important; }
  #main { margin-left: 0 !important; padding: var(--mob-main-pad) !important; }
  #childLinks.grid ul { flex-direction: var(--mob-card-dir); }
  #childLinks.grid ul li { width: var(--mob-card-w); height: var(--mob-card-h); }
  #childLinks.grid ul li a {
    height: var(--mob-card-a-h); flex-direction: var(--mob-card-a-dir);
    justify-content: var(--mob-card-a-just); padding: var(--mob-card-a-px);
  }
  #childLinks.grid ul li a::before { display: var(--mob-before-dis); }
  section.include-note { padding: var(--mob-inc-pad); }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --menu-w: var(--tab-menu-w); --menu-collapsed: var(--tab-menu-col); }
  #menu { padding: var(--tab-menu-pad) !important; }
  #main { margin-left: var(--tab-main-ml) !important; padding: var(--tab-main-pad) !important; }
}

@media print {
  #menu { display: var(--print-menu-dis) !important; }
  #main { margin-left: var(--print-main-ml) !important; }
  body.share-body { background: var(--print-bg) !important; color: var(--print-color) !important; }
  #title { color: var(--text-print-title) !important; }
  a { color: var(--text-print) !important; text-decoration: var(--print-a-deco) !important; }
}