/* ========================================
   Typography Grid - 统一尺寸版 (20px)
   所有格子统一尺寸，仅正文区域显示
   支持思源笔记明暗双模式
   ======================================== */
/* ---------- 亮色模式 ---------- */
:root {
  --grid-line-color: rgba(200, 200, 200, 0.15);
  --bg-base-color: #ffffff;
  --bg-sidebar-color: #fafafa;
}
/* ---------- 暗色模式 ---------- */
:root[data-theme-mode="dark"] {
  --grid-line-color: rgba(80, 80, 80, 0.3);
  --bg-base-color: #1a1a1a;
  --bg-sidebar-color: #1f1f1f;
}
/* ---------- 仅正文区域显示网格 ---------- */
/* 正文编辑区域 - 统一20px格子 */
.protyle-content,
.protyle-wysiwyg,
.b3-typography,
.sy__preview,
.sy__editor {
  background-color: var(--bg-base-color) !important;
  background-image: 
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
  background-position: -1px -1px, -1px -1px;
  background-attachment: fixed;
}
/* ---------- 代码块背景（亮色） ---------- */
:root {
  --code-bg: #f6f8fa;
  --code-border: #d0d7de;
}

/* ---------- 代码块背景（暗色） ---------- */
:root[data-theme-mode="dark"] {
  --code-bg: #2d2d2d;
  --code-border: #3d3d3d;
}

/* ---------- 代码块样式 ---------- */
.protyle-wysiwyg .code-block,
.b3-typography .code-block,
.sy__preview .code-block {
  background-color: var(--code-bg) !important;
  border: 1px solid var(--code-border);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 8px 0;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
}

/* 行内代码也稍微区分一下 */
.protyle-wysiwyg code:not(.code-block),
.b3-typography code:not(.code-block) {
  background-color: var(--code-bg) !important;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}