/* ==============================================================================
   chuanban-green-web.css — 「松绿记事本」三栏工作台博客专属样式表
   1:1 继承自 /Users/yunhanbao/Documents/Root/写作/.obsidian/themes/chuanban-green/theme.css
   Warm Editorial Neo-Brutalism:
   - 直角高对比 1px 外露黑框网格 (Exposed 1px Hairline Grid)
   - 三阶灰调印刷纸张底色 (Warm Newsprint Grays: #ECEAE2 / #E2DFD5 / #D6D2C6)
   - 浓绿 (#26593F) / 竹青 (#78AB88) / 鼠尾草淡绿 (#C2DBC8) 强调色与粗犷硬边阴影 (3px 3px 0 #A3C9AE)
   ============================================================================== */

@font-face {
  font-family: 'Sarasa Mono Slab SC';
  src: local('Sarasa-Mono-Slab-SC-Regular'), local('Sarasa Mono Slab SC'), local('等距更纱黑体 Slab SC'),
       local('Sarasa-Mono-SC-Regular'), local('Sarasa Mono SC'), local('等距更纱黑体 SC');
  font-weight: 300 550;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sarasa Mono Slab SC';
  src: local('Sarasa-Mono-Slab-SC-Bold'), local('Sarasa Mono Slab SC Bold'), local('等距更纱黑体 Slab SC Bold'),
       local('Sarasa-Mono-SC-Bold'), local('Sarasa Mono SC Bold'), local('等距更纱黑体 SC Bold');
  font-weight: 551 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MP Editorial Typewriter Fallback';
  src: local('Source Han Sans SC Regular'), local('Noto Sans CJK SC Regular'),
       local('PingFangSC-Regular'), local('PingFang SC'), local('STHeitiSC-Medium'), local('Heiti SC'),
       local('Microsoft YaHei UI'), local('Microsoft YaHei'), local('SimHei');
  font-weight: 300 550;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MP Editorial Gothic';
  src: local('vivoSans-Regular'), local('vivo Sans'), local('OPPOSans40'), local('OPPO Sans 4.0'),
       local('Sarasa-Gothic-SC-Regular'), local('Sarasa Gothic SC'),
       local('Source Han Sans SC Regular'), local('Noto Sans CJK SC Regular'),
       local('HiraginoSansGB-W3'), local('Hiragino Sans GB'),
       local('Microsoft YaHei UI'), local('Microsoft YaHei'), local('PingFangSC-Regular');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MP Editorial Gothic';
  src: local('vivoSans-Extrabold'), local('vivoSans-Bold'),
       local('Sarasa-Gothic-SC-Bold'), local('Source Han Sans SC Bold'), local('Noto Sans CJK SC Bold'),
       local('HiraginoSansGB-W6'), local('Hiragino Sans GB W6'),
       local('Microsoft YaHei UI Bold'), local('Microsoft YaHei Bold'), local('PingFangSC-Semibold');
  font-weight: 580 900;
  font-style: normal;
  font-display: swap;
}

:root, body {
  --mp-font-gothic-stack: 'Inter', 'SF Pro Display', 'SF Pro Text', 'Segoe UI', 'MP Editorial Gothic', 'vivo Sans', 'OPPO Sans 4.0', 'Sarasa Gothic SC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --mp-font-typewriter-stack: 'Sarasa Mono Slab SC', '等距更纱黑体 Slab SC', 'Sarasa Mono SC', '等距更纱黑体 SC', 'JetBrains Mono', 'SF Mono', 'SFMono-Regular', 'Cascadia Mono', 'Consolas', 'Menlo', 'MP Editorial Typewriter Fallback', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', ui-monospace, monospace;
  --mp-font-songti-stack: 'Inter', 'SF Pro Text', 'Songti SC', 'Songti TC', 'STSong', 'SimSun', 'NSimSun', 'Source Serif 4', Georgia, serif;
  --mp-font-mono-stack: 'Sarasa Mono Slab SC', '等距更纱黑体 Slab SC', 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', 'SFMono-Regular', 'Cascadia Mono', 'Consolas', 'Sarasa Mono SC', '等距更纱黑体 SC', Menlo, Monaco, 'MP Editorial Typewriter Fallback', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', ui-monospace, monospace;

  --font-interface: var(--mp-font-gothic-stack);
  --font-text: var(--mp-font-gothic-stack);
  --font-monospace: var(--mp-font-mono-stack);
  --font-text-size: 17px;
  --header-height: 36px;
  --line-height-normal: 1.72;
  --p-spacing: 0.92em;
  --mp-hard-shadow-size: 3px;
  --mp-hard-shadow-sm: 2px;
}

body.mp-font-typewriter {
  --font-text: var(--mp-font-typewriter-stack);
}

body.mp-font-songti {
  --font-text: var(--mp-font-songti-stack);
  --line-height-normal: 1.68;
}

body.theme-light {
  --background-primary: #ECEAE2;
  --background-primary-alt: #F4F2EC;
  --background-secondary: #E2DFD5;
  --background-secondary-alt: #D6D2C6;
  --background-modifier-hover: #D4E4D8;
  --background-modifier-active-hover: #C2DBC8;

  --mp-ink-border: #181B18;
  --mp-ink-border-soft: rgba(24, 27, 24, 0.24);

  --mp-green-deep: #26593F;
  --mp-green-deep-hover: #1B432E;
  --mp-green-tab: #78AB88;
  --mp-green-shadow: #A3C9AE;
  --mp-green-soft: #C2DBC8;
  --mp-green-tint: #DCEADF;

  --text-normal: #141715;
  --mp-text-strong: #0D0F0E;
  --mp-strong-color: #0D2E1D;
  --mp-strong-bg: rgba(194, 219, 200, 0.50);
  --mp-strong-border: rgba(38, 89, 63, 0.42);
  --mp-text-on-soft: #101210;
  --text-muted: #525752;
  --text-faint: #767B75;
  --text-accent: #26593F;
  --text-selection: rgba(120, 171, 136, 0.42);
  --text-highlight-bg: #C5E0CC;

  --tab-text-color: #4A4E49;
  --tab-text-color-active: #121412;
  --blockquote-background-color: #E6ECE6;
  --code-background: #E5E3DA;
}

body.theme-dark {
  --background-primary: #181B19;
  --background-primary-alt: #202522;
  --background-secondary: #141715;
  --background-secondary-alt: #101210;
  --background-modifier-hover: #24332A;
  --background-modifier-active-hover: #2D4235;

  --mp-ink-border: #434D46;
  --mp-ink-border-soft: rgba(255, 255, 255, 0.18);

  --mp-green-deep: #689F7A;
  --mp-green-deep-hover: #82B893;
  --mp-green-tab: #2E5A42;
  --mp-green-shadow: #294D39;
  --mp-green-soft: #264031;
  --mp-green-tint: #1E2B23;

  --text-normal: #E6E4DC;
  --mp-text-strong: #F4F2EC;
  --mp-strong-color: #B6E3C6;
  --mp-strong-bg: rgba(46, 90, 66, 0.48);
  --mp-strong-border: rgba(120, 171, 136, 0.55);
  --mp-text-on-soft: #F4F2EC;
  --text-muted: #9BA19B;
  --text-faint: #686E68;
  --text-accent: #78AB88;
  --text-selection: rgba(104, 159, 122, 0.35);
  --text-highlight-bg: rgba(104, 159, 122, 0.35);

  --tab-text-color: #9BA19B;
  --tab-text-color-active: #F4F2EC;
  --blockquote-background-color: #1E2721;
  --code-background: #1E221F;
}

* {
  box-sizing: border-box;
}

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--background-primary);
  color: var(--text-normal);
  font-family: var(--font-interface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==============================================================================
   1. 整体三栏工作台网格骨架 (Obsidian Workbench Grid)
   ============================================================================== */
.workbench-shell {
  display: grid;
  grid-template-columns: 290px 1fr 276px;
  grid-template-rows: 1fr 28px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body.left-collapsed .workbench-shell {
  grid-template-columns: 0px 1fr 276px;
}
body.right-collapsed .workbench-shell {
  grid-template-columns: 290px 1fr 0px;
}
body.left-collapsed.right-collapsed .workbench-shell {
  grid-template-columns: 0px 1fr 0px;
}

/* 左侧栏：目录树与检索 */
.pane-left {
  grid-column: 1;
  grid-row: 1;
  background-color: var(--background-secondary);
  border-right: 1px solid var(--mp-ink-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* 中央主工作区：多标签栏 + 面包屑 + 正文阅读流 */
.pane-center {
  grid-column: 2;
  grid-row: 1;
  background-color: var(--background-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* 右侧栏：上下二分（上：大纲 Outline / 下：Bases 版本与同栏文章） */
.pane-right {
  grid-column: 3;
  grid-row: 1;
  background-color: var(--background-secondary-alt);
  border-left: 1px solid var(--mp-ink-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* 底部状态栏 (.status-bar) */
.status-bar {
  grid-column: 1 / -1;
  grid-row: 2;
  background-color: var(--background-secondary);
  border-top: 1px solid var(--mp-ink-border);
  font-family: var(--font-monospace);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-normal);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}

.status-bar-group {
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  white-space: nowrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
}

.status-pill strong {
  color: var(--mp-green-deep);
  font-weight: 700;
}

/* ==============================================================================
   2. 顶部 36px 栏位：左栏顶头 / 中央标签栏 / 右栏顶头
   ============================================================================== */
.pane-header-bar {
  height: var(--header-height);
  min-height: var(--header-height);
  max-height: var(--header-height);
  background-color: var(--background-secondary);
  border-bottom: 1px solid var(--mp-ink-border);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 6px;
  user-select: none;
}

/* 24x24 直角黑框图标按钮 */
.sq-icon-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 1px solid var(--mp-ink-border);
  background-color: var(--background-primary-alt);
  color: var(--text-normal);
  font-family: var(--font-monospace);
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.08s ease, box-shadow 0.08s ease, transform 0.08s ease;
}

.sq-icon-btn:hover {
  background-color: var(--mp-green-soft);
  color: var(--mp-text-on-soft);
  box-shadow: 2px 2px 0px var(--mp-green-deep);
}

.sq-icon-btn.is-active {
  background-color: var(--background-primary-alt);
  color: var(--mp-text-strong);
  border: 1.5px solid var(--mp-ink-border);
  box-shadow: 2px 2px 0px var(--mp-green-shadow);
}

.vault-brand-title {
  font-family: var(--font-interface);
  font-size: 13px;
  font-weight: 800;
  color: var(--mp-text-strong);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.vault-badge {
  font-family: var(--font-monospace);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 5px;
  background-color: var(--mp-green-deep);
  color: #F4F2EC;
  border: 1px solid var(--mp-ink-border);
}

/* 中央顶部标签栏 (.workspace-tab-header-container) */
.workspace-tab-header-container {
  height: var(--header-height);
  min-height: var(--header-height);
  background-color: var(--background-secondary);
  border-bottom: 1px solid var(--mp-ink-border);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  overflow: hidden;
}

.tab-strip {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.tab-strip::-webkit-scrollbar {
  display: none;
}

.workspace-tab-header {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  height: 100%;
  border-right: 1px solid var(--mp-ink-border);
  background-color: var(--background-secondary);
  color: var(--tab-text-color);
  font-family: var(--font-interface);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  max-width: 240px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.workspace-tab-header:hover {
  background-color: var(--mp-green-soft);
  color: var(--mp-text-on-soft);
}

.workspace-tab-header.is-active {
  background-color: var(--mp-green-tab);
  color: var(--tab-text-color-active);
  font-weight: 700;
}

body.mp-tab-forest-dark .workspace-tab-header.is-active {
  background-color: var(--mp-green-deep);
  color: #F4F2EC;
}

.tab-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-close-x {
  font-family: var(--font-monospace);
  font-size: 12px;
  line-height: 1;
  opacity: 0.65;
  padding: 1px 3px;
}
.tab-close-x:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.12);
}

.tab-toolbar-right {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-left: 1px solid var(--mp-ink-border);
  background-color: var(--background-secondary);
  flex-shrink: 0;
}

.preset-chip-btn {
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--mp-ink-border);
  background-color: var(--background-primary-alt);
  color: var(--text-normal);
  font-family: var(--font-monospace);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 2px 2px 0px var(--mp-green-shadow);
}
.preset-chip-btn:hover {
  background-color: var(--mp-green-soft);
  color: var(--mp-text-on-soft);
  box-shadow: 2px 2px 0px var(--mp-green-deep);
}

/* ==============================================================================
   3. 左侧栏：搜索框 + 分类筛选 + Obsidian 文件树
   ============================================================================== */
.left-search-zone {
  padding: 10px 10px 8px 10px;
  border-bottom: 1px solid var(--mp-ink-border);
  background-color: var(--background-secondary);
}

.brutalist-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.brutalist-search-input {
  width: 100%;
  height: 30px;
  border: 1.5px solid var(--mp-ink-border);
  border-radius: 0px;
  background-color: var(--background-primary-alt);
  color: var(--text-normal);
  font-family: var(--font-interface);
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 54px 4px 10px;
  box-shadow: 2px 2px 0px var(--mp-green-shadow);
  outline: none;
}

.brutalist-search-input:focus {
  background-color: var(--background-primary);
  box-shadow: 3px 3px 0px var(--mp-green-tab);
}

.search-kbd-hint {
  position: absolute;
  right: 6px;
  font-family: var(--font-monospace);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--background-secondary);
  border: 1px solid var(--mp-ink-border-soft);
  padding: 1px 4px;
  pointer-events: none;
}

.category-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.cat-filter-btn {
  font-family: var(--font-monospace);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border: 1px solid var(--mp-ink-border);
  background-color: var(--background-primary-alt);
  color: var(--text-muted);
  cursor: pointer;
}
.cat-filter-btn:hover {
  background-color: var(--mp-green-tint);
  color: var(--text-normal);
}
.cat-filter-btn.is-active {
  background-color: var(--mp-green-deep);
  color: #F4F2EC;
  box-shadow: 2px 2px 0px var(--mp-green-shadow);
}

/* 文件树容器 (.nav-files-container) */
.nav-files-container {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px 24px 6px;
}

.nav-folder {
  margin-bottom: 6px;
}

.nav-folder-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  font-family: var(--font-interface);
  font-size: 12.5px;
  font-weight: 750;
  color: var(--mp-text-strong);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}

.nav-folder-title:hover {
  background-color: var(--mp-green-tint);
  border-color: var(--mp-ink-border);
}

.nav-folder-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.folder-arrow {
  font-family: var(--font-monospace);
  font-size: 10px;
  transition: transform 0.12s ease;
  display: inline-block;
}
.nav-folder.is-collapsed .folder-arrow {
  transform: rotate(-90deg);
}
.nav-folder.is-collapsed .nav-folder-children {
  display: none;
}

.folder-count-badge {
  font-family: var(--font-monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--background-primary-alt);
  border: 1px solid var(--mp-ink-border-soft);
  padding: 0 5px;
}

.nav-folder-children {
  margin-left: 10px;
  padding-left: 6px;
  border-left: 1px solid var(--mp-ink-border-soft);
  margin-top: 2px;
}

.nav-file-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 8px;
  margin-bottom: 2px;
  text-decoration: none;
  color: var(--text-normal);
  border: 1px solid transparent;
  transition: background-color 0.08s ease;
}

.nav-file-title:hover {
  background-color: var(--mp-green-tint);
  border-color: var(--mp-ink-border-soft);
}

.nav-file-title.is-active {
  background-color: var(--mp-green-soft);
  color: var(--mp-text-on-soft);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--mp-green-deep);
  border-color: var(--mp-ink-border);
}

.nav-file-name {
  font-size: 12.5px;
  line-height: 1.38;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nav-file-title.is-active .nav-file-name {
  font-weight: 750;
  color: var(--mp-text-on-soft);
}

.nav-file-meta {
  font-family: var(--font-monospace);
  font-size: 10.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.variant-dot {
  display: inline-block;
  padding: 0 4px;
  font-size: 10px;
  background-color: var(--mp-green-tint);
  color: var(--mp-green-deep);
  border: 1px solid var(--mp-ink-border);
}

/* ==============================================================================
   4. 中央主视图：面包屑顶栏 (.view-header) + 属性表 (.metadata-container) + 正文
   ============================================================================== */
.view-header {
  height: 34px;
  min-height: 34px;
  background-color: var(--background-primary);
  border-bottom: 1px solid var(--mp-ink-border);
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.view-header-breadcrumb {
  font-family: var(--font-monospace);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-header-breadcrumb .bc-sep {
  color: var(--text-faint);
}

.view-header-breadcrumb .bc-current {
  color: var(--text-normal);
  font-weight: 700;
}

.view-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.markdown-reading-view {
  flex: 1;
  overflow-y: auto;
  padding: 28px 44px 80px 44px;
  background-color: var(--background-primary);
}

.markdown-sizer {
  max-width: 780px;
  margin: 0 auto;
}

.inline-title {
  font-family: var(--font-text);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--mp-text-strong);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 14px 0;
}

/* 笔记顶部 YAML 属性区 (.metadata-container) */
.metadata-container {
  background-color: var(--background-primary-alt);
  border: 1.5px solid var(--mp-ink-border);
  padding: 12px 16px;
  margin: 12px 0 26px 0;
  box-shadow: var(--mp-hard-shadow-size) var(--mp-hard-shadow-size) 0px var(--mp-green-shadow);
}

.metadata-properties-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 7px 0;
  margin-bottom: 6px;
  border-bottom: 1.5px solid var(--mp-ink-border);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-monospace);
  font-size: 12px;
  font-weight: 750;
  color: var(--mp-text-strong);
}

.metadata-container.is-collapsed {
  padding: 8px 16px;
}
.metadata-container.is-collapsed .metadata-properties-heading {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.metadata-container.is-collapsed .metadata-content {
  display: none;
}

.metadata-property {
  display: grid;
  grid-template-columns: 136px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--mp-ink-border-soft);
  padding: 5px 6px;
  font-size: 12.5px;
}
.metadata-property:last-child {
  border-bottom: none;
}
.metadata-property:hover {
  background-color: rgba(194, 219, 200, 0.35);
}

.metadata-property-key {
  font-family: var(--font-monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.metadata-property-value {
  font-family: var(--font-monospace);
  font-size: 12.5px;
  color: var(--text-normal);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* 标签胶囊 (#tag / multi-select-pill) */
a.tag,
.multi-select-pill {
  font-family: var(--font-monospace);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mp-green-deep);
  background-color: var(--mp-green-tint);
  border: 1px solid var(--mp-ink-border);
  padding: 2px 8px;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: 2px 2px 0px var(--mp-green-shadow);
  display: inline-flex;
  align-items: center;
}

a.tag:hover,
.multi-select-pill:hover {
  background-color: var(--mp-green-soft);
  color: var(--mp-text-on-soft);
}

/* ==============================================================================
   5. 正文排版 (.markdown-rendered) — 1:1 复刻松绿记事本
   ============================================================================== */
.markdown-rendered {
  font-family: var(--font-text);
  font-size: var(--font-text-size);
  line-height: var(--line-height-normal);
  color: var(--text-normal);
  font-weight: 400;
  letter-spacing: 0.005em;
  word-break: break-word;
}

.markdown-rendered p,
.markdown-rendered li {
  line-height: var(--line-height-normal);
  margin-block: 0 var(--p-spacing);
}

.markdown-rendered ul,
.markdown-rendered ol {
  padding-left: 1.5em;
  margin-block: 0 var(--p-spacing);
}

/* 粗体字三重强化：750 字重 + 深墨松绿黑 + 鼠尾草微底衬 + 1.5px 松绿细底线 */
.markdown-rendered strong {
  font-weight: 750;
  color: var(--mp-strong-color);
  background-color: var(--mp-strong-bg);
  border-bottom: 1.5px solid var(--mp-strong-border);
  padding: 0 2px;
  -webkit-text-stroke: 0.2px currentColor;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.markdown-rendered mark {
  background-color: var(--text-highlight-bg);
  color: var(--text-normal);
  padding: 0 3px;
  border-bottom: 1.5px solid var(--mp-green-deep);
}

/* 标题体系：Heavy Gothic 750~800 */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  font-family: var(--font-text);
  color: var(--mp-text-strong);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.32;
  scroll-margin-top: 20px;
}

.markdown-rendered h1 {
  font-size: 1.65rem;
  font-weight: 800;
  margin-top: 1.3em;
  margin-bottom: 0.65em;
}
.markdown-rendered h2 {
  font-size: 1.35rem;
  font-weight: 750;
  margin-top: 1.4em;
  margin-bottom: 0.55em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mp-ink-border-soft);
}
.markdown-rendered h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 1.2em;
  margin-bottom: 0.45em;
}

/* 链接：炭黑粗字 + 2px 浓绿实线底边，悬停铺满淡绿块 + 硬阴影 */
.markdown-rendered a {
  color: var(--text-normal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--mp-green-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding: 0 2px;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.markdown-rendered a:hover {
  background-color: var(--mp-green-soft);
  color: var(--mp-text-on-soft);
  text-decoration-color: var(--mp-ink-border);
  box-shadow: 2px 2px 0px var(--mp-green-deep);
}

/* 引用块与 Callout：直角黑框 + 5px 浓绿左竖条 + 3px 淡绿硬边阴影 */
.markdown-rendered blockquote,
.markdown-rendered .callout {
  background-color: var(--background-primary-alt);
  border: 1.5px solid var(--mp-ink-border);
  border-left: 5px solid var(--mp-green-deep);
  padding: 12px 16px;
  margin: 1.15em 0;
  color: var(--text-normal);
  box-shadow: var(--mp-hard-shadow-size) var(--mp-hard-shadow-size) 0px var(--mp-green-shadow);
}

.markdown-rendered blockquote p:last-child,
.markdown-rendered .callout p:last-child {
  margin-bottom: 0;
}

.callout-title {
  font-weight: 750;
  color: var(--mp-text-strong);
  border-bottom: 1px solid var(--mp-ink-border-soft);
  padding-bottom: 6px;
  margin-bottom: 8px;
  font-family: var(--font-monospace);
  font-size: 13px;
}

/* 代码块与行内代码 */
.markdown-rendered code:not(pre code) {
  font-family: var(--font-monospace);
  font-size: 0.86em;
  font-weight: 600;
  background-color: var(--mp-green-tint);
  color: var(--mp-green-deep);
  border: 1px solid var(--mp-ink-border);
  padding: 1px 5px;
}

.markdown-rendered pre {
  background-color: var(--code-background);
  border: 1.5px solid var(--mp-ink-border);
  padding: 12px 16px;
  overflow-x: auto;
  margin: 1.15em 0;
  box-shadow: var(--mp-hard-shadow-size) var(--mp-hard-shadow-size) 0px var(--mp-green-shadow);
}

.markdown-rendered pre code {
  font-family: var(--font-monospace);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-normal);
  background: transparent;
  border: none;
  padding: 0;
}

/* 表格 */
.markdown-rendered table {
  border-collapse: collapse;
  border: 1.5px solid var(--mp-ink-border);
  width: 100%;
  margin: 14px 0 18px 0;
  box-shadow: 2px 2px 0px var(--mp-green-shadow);
}

.markdown-rendered th {
  background-color: var(--background-secondary-alt);
  font-family: var(--font-monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-text-strong);
  border: 1px solid var(--mp-ink-border);
  border-bottom: 1.5px solid var(--mp-ink-border);
  padding: 7px 12px;
  text-align: left;
}

.markdown-rendered td {
  font-size: 13px;
  border: 1px solid var(--mp-ink-border-soft);
  padding: 7px 12px;
  background-color: var(--background-primary-alt);
}

/* 正文图片：直角黑框 + 硬边亮绿阴影 */
.markdown-rendered img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 18px auto;
  border: 1.5px solid var(--mp-ink-border);
  background-color: var(--background-primary-alt);
  box-shadow: 3px 3px 0px var(--mp-green-shadow);
}

.markdown-rendered hr {
  border: none;
  border-top: 1.5px solid var(--mp-ink-border);
  margin: 2em 0;
}

/* 底部上下篇切换卡片 */
.article-prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1.5px solid var(--mp-ink-border);
}

.pn-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background-color: var(--background-primary-alt);
  border: 1.5px solid var(--mp-ink-border);
  text-decoration: none;
  color: var(--text-normal);
  box-shadow: 3px 3px 0px var(--mp-green-shadow);
  transition: transform 0.08s ease, background-color 0.08s ease;
}

.pn-card:hover {
  background-color: var(--mp-green-soft);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px var(--mp-green-deep);
}

.pn-label {
  font-family: var(--font-monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.pn-title {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--mp-text-strong);
}

/* ==============================================================================
   6. 右侧栏：上栏大纲 (Outline) + 下栏 Bases 版本与同系列表格
   ============================================================================== */
.right-outline-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  background-color: var(--background-secondary-alt);
  border-bottom: 1px solid var(--mp-ink-border);
  overflow: hidden;
}

.outline-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}

.outline-item {
  display: block;
  padding: 5px 8px;
  margin-bottom: 2px;
  font-family: var(--font-interface);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.35;
}

.outline-item.level-2 {
  padding-left: 10px;
}
.outline-item.level-3 {
  padding-left: 22px;
  font-size: 12px;
}

.outline-item:hover {
  background-color: var(--mp-green-tint);
  color: var(--text-normal);
  border-color: var(--mp-ink-border);
}

.outline-item.is-active {
  background-color: var(--mp-green-soft);
  color: var(--mp-text-on-soft);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--mp-green-deep);
}

/* 右下角：Obsidian Bases 数据库表格与快照版本卡 */
.right-bases-section {
  height: 44%;
  min-height: 210px;
  background-color: var(--background-secondary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bases-toolbar {
  height: 30px;
  min-height: 30px;
  padding: 0 10px;
  background-color: var(--background-secondary);
  border-bottom: 1px solid var(--mp-ink-border);
  font-family: var(--font-monospace);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mp-text-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bases-scroll {
  flex: 1;
  overflow-y: auto;
}

.bases-table {
  width: 100%;
  border-collapse: collapse;
}

.bases-th {
  background-color: var(--background-secondary-alt);
  font-family: var(--font-monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--mp-text-strong);
  border-bottom: 1.5px solid var(--mp-ink-border);
  padding: 5px 8px;
  text-align: left;
  position: sticky;
  top: 0;
}

.bases-td {
  font-size: 12px;
  border-bottom: 1px solid var(--mp-ink-border-soft);
  padding: 6px 8px;
  vertical-align: top;
}

.bases-td.mono-col {
  font-family: var(--font-monospace);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.bases-file-link {
  color: var(--text-normal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--mp-green-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.bases-file-link:hover {
  background-color: var(--mp-green-soft);
  color: var(--mp-text-on-soft);
}

/* ==============================================================================
   7. 首页总览仪表盘（Index Dashboard Cards & Bases Grid）
   ============================================================================== */
.dashboard-hero-box {
  background-color: var(--background-primary-alt);
  border: 1.5px solid var(--mp-ink-border);
  border-left: 6px solid var(--mp-green-deep);
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: 4px 4px 0px var(--mp-green-shadow);
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  margin: 18px 0 26px 0;
}

.stat-brutal-card {
  background-color: var(--background-primary-alt);
  border: 1.5px solid var(--mp-ink-border);
  padding: 12px 14px;
  box-shadow: 3px 3px 0px var(--mp-green-shadow);
}

.stat-brutal-num {
  font-family: var(--font-monospace);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--mp-green-deep);
  line-height: 1.15;
}

.stat-brutal-label {
  font-family: var(--font-monospace);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ==============================================================================
   8. 全局命令/搜索弹窗 (Command Palette Modal Cmd+K)
   ============================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(20, 23, 21, 0.48);
  z-index: 999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
.modal-backdrop.is-open {
  display: flex;
}

.brutalist-modal {
  width: min(640px, 92vw);
  max-height: 76vh;
  background-color: var(--background-primary);
  border: 1.5px solid var(--mp-ink-border);
  box-shadow: 5px 5px 0px var(--mp-green-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-search-header {
  padding: 12px;
  background-color: var(--background-secondary);
  border-bottom: 1.5px solid var(--mp-ink-border);
}

.modal-search-input {
  width: 100%;
  height: 36px;
  border: 1.5px solid var(--mp-ink-border);
  background-color: var(--background-primary-alt);
  color: var(--text-normal);
  font-family: var(--font-interface);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  box-shadow: 2px 2px 0px var(--mp-green-shadow);
  outline: none;
}

.modal-results-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.modal-result-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  margin-bottom: 3px;
  text-decoration: none;
  color: var(--text-normal);
  border: 1px solid transparent;
}

.modal-result-item:hover,
.modal-result-item.is-selected {
  background-color: var(--mp-green-soft);
  color: var(--mp-text-on-soft);
  border-color: var(--mp-ink-border);
  box-shadow: inset 3px 0 0 var(--mp-green-deep);
}

.modal-result-title {
  font-size: 13.5px;
  font-weight: 750;
}

.modal-result-snippet {
  font-size: 12px;
  color: var(--text-muted);
}

.modal-footer-bar {
  padding: 6px 12px;
  background-color: var(--background-secondary);
  border-top: 1px solid var(--mp-ink-border);
  font-family: var(--font-monospace);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

/* ==============================================================================
   9. 移动端响应式适配 (< 980px)
   ============================================================================== */
@media (max-width: 1024px) {
  .workbench-shell {
    grid-template-columns: 250px 1fr 0px;
  }
  .pane-right {
    display: none;
  }
}

@media (max-width: 760px) {
  .workbench-shell {
    grid-template-columns: 1fr;
  }
  .pane-left {
    position: fixed;
    top: 36px;
    left: 0;
    bottom: 28px;
    width: 280px;
    z-index: 200;
    box-shadow: 4px 0 0 var(--mp-green-shadow);
  }
  body.left-collapsed .pane-left {
    display: none;
  }
  .markdown-reading-view {
    padding: 20px 18px 64px 18px;
  }
  .article-prev-next {
    grid-template-columns: 1fr;
  }
}