/* ============================================================
   讲次笔记页 — 与 design.css 同一套视觉语言
   · 阅读面优先：正文 720px 栏宽、1.8 行高、克制的分隔
   · 黄色高亮块 / 旋转标签 / 虚线框 / 等宽标签 全部退场
   · 公式块改为面板底色 + 发丝描边，让公式本身成为主体
   ============================================================ */

body.nb-page {
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--font-sans) !important;
  margin: 0;
}

/* ---------- 顶栏 ---------- */
.nb-topbar {
  background: var(--nav-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ln-hair) !important;
  padding: 11px max(20px, env(safe-area-inset-left)) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: var(--z-nav, 9000);
}
.nb-topbar a {
  color: var(--accent) !important;
  text-decoration: none;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0 !important;
}
.nb-topbar a:hover { color: var(--accent-hover) !important; text-decoration: none !important; }

.nb-crumb {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-regular);
  letter-spacing: 0 !important;
  color: var(--muted) !important;
}

/* ---------- 文章容器：正文栏宽 720px ---------- */
.nb-wrap {
  max-width: 720px !important;
  margin: 0 auto;
  padding: 56px 22px 110px !important;
}

/* 讲次标签：从黄色旋转色块改为克制的眉标 */
.nb-lecttag {
  display: inline-block;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-eyebrow) !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: var(--ls-eyebrow) !important;
  background: none !important;
  color: var(--accent) !important;
  padding: 0 !important;
  transform: none !important;
  margin-bottom: 16px !important;
}

.nb-title {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 4.6vw, 46px) !important;
  font-weight: var(--fw-semi) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.026em !important;
  margin: 0 0 20px !important;
  color: var(--fg) !important;
}

/* 元信息：粗黄左条 → 细强调线 */
.nb-meta {
  font-size: var(--fs-sm) !important;
  line-height: 1.8 !important;
  color: var(--muted) !important;
  border-left: 2px solid var(--accent) !important;
  padding: 2px 0 2px 16px !important;
  margin: 0 0 40px !important;
  background: none !important;
}
.nb-meta b { color: var(--fg-2) !important; font-weight: var(--fw-semi); }

.nb-body { margin-top: 0 !important; }

/* ---------- 正文层级 ----------
   笔记正文实际使用 h5 作为小节标题（历史约定），h3/h4 也保留同样的语义，
   因此把 h3 与 h5 归为一级、h4 与 h6 归为二级，避免出现无样式的裸标题。 */
.nb-body h3,
.nb-body h5 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-semi) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.018em !important;
  color: var(--fg) !important;
  margin: 56px 0 18px !important;
  padding: 0 0 14px !important;
  border-left: none !important;
  border-bottom: 1px solid var(--ln-hair) !important;
}
.nb-body h4,
.nb-body h6 {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: -0.012em !important;
  color: var(--fg) !important;
  margin: 34px 0 12px !important;
  padding: 0 !important;
  border: none !important;
}
.nb-body p, .nb-body li {
  font-size: var(--fs-body) !important;
  line-height: 1.85 !important;
  color: var(--fg-2) !important;
  margin: 14px 0 !important;
  letter-spacing: 0;
}
.nb-body ul, .nb-body ol { padding-left: 22px !important; margin: 14px 0 !important; gap: 8px; }
.nb-body li::marker { color: var(--muted-2); }
.nb-body b, .nb-body strong { color: var(--fg) !important; font-weight: var(--fw-semi); }
.nb-body a { color: var(--accent) !important; }

/* ---------- 公式 ---------- */
.nb-body .katex { font-size: 1.1em !important; color: var(--fg) !important; }
.nb-body .katex-display {
  margin: 22px 0 !important;
  padding: 20px 18px !important;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface) !important;
  border: 1px solid var(--ln-hair) !important;
  border-radius: var(--r-md) !important;
}

/* 公式速览块的标签与内部节奏 */
.nb-body .fml-head {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-eyebrow) !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: var(--ls-eyebrow) !important;
  color: var(--accent) !important;
  margin: 0 0 20px !important;
}
.nb-body .fml { margin: 0 0 12px !important; }
.nb-body .fml > p { margin: 0 0 6px !important; }
.nb-body .fml > p:last-child { margin-bottom: 0 !important; }
.nb-body .fml-sep {
  border: none !important;
  border-top: 1px solid var(--ln-hair) !important;
  margin: 40px 0 32px !important;
}

/* ---------- 信息盒 ---------- */
.nb-box {
  background: var(--surface) !important;
  border: 1px solid var(--ln-hair) !important;
  border-radius: var(--r-md) !important;
  padding: 20px 22px !important;
  margin: 22px 0 !important;
}
.nb-box .bt {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-eyebrow) !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: var(--ls-eyebrow) !important;
  color: var(--muted) !important;
  margin-bottom: 10px !important;
}

/* 提示盒：虚线黄框 → 蓝色调面板 */
.nb-tip {
  background: var(--accent-soft) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent) !important;
  border-radius: var(--r-md) !important;
  padding: 20px 22px !important;
  margin: 22px 0 !important;
}
.nb-tip .bt {
  color: var(--accent) !important;
  font-weight: var(--fw-semi) !important;
  font-size: var(--fs-eyebrow) !important;
  letter-spacing: var(--ls-eyebrow) !important;
  margin-bottom: 8px !important;
  font-family: var(--font-sans) !important;
}
.nb-tip p, .nb-tip li { font-size: var(--fs-sm) !important; color: var(--fg-2) !important; }

/* ---------- 上/下一篇 ---------- */
.nb-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 72px !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--ln-hair) !important;
  flex-wrap: wrap;
}
.nb-nav a {
  color: var(--fg-2) !important;
  text-decoration: none !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium);
  border: 1px solid var(--ln-hair) !important;
  background: var(--surface) !important;
  padding: 10px 18px !important;
  border-radius: var(--r-pill) !important;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.nb-nav a:hover {
  border-color: var(--ln-strong) !important;
  color: var(--fg) !important;
  background: var(--surface-2) !important;
}

/* ---------- 表格 / 引用 ---------- */
.nb-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: 22px 0;
}
.nb-body th {
  text-align: left;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semi);
  color: var(--muted) !important;
  padding: 0 12px 11px !important;
  border-bottom: 1px solid var(--ln-hair) !important;
}
.nb-body td {
  padding: 13px 12px !important;
  border-bottom: 1px solid var(--ln-hair) !important;
  color: var(--fg-2) !important;
}
.nb-body blockquote {
  margin: 22px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--ln-strong);
  color: var(--muted);
}
.nb-body hr {
  border: none;
  border-top: 1px solid var(--ln-hair);
  margin: 44px 0;
}
.nb-body img { border-radius: var(--r-md); display: block; margin: 22px auto; }
.nb-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--ln-hair);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--fg-2);
}

/* ---------- 围栏代码块 ---------- */
.nb-body pre.nb-code {
  position: relative;
  margin: 22px 0;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--ln-hair);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.nb-body pre.nb-code code {
  display: block;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.68;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--fg-2);
  white-space: pre;
  tab-size: 4;
}
/* 语言标签：写在 data-lang 上，不参与文本选择 */
.nb-body pre.nb-code[data-lang] { padding-top: 34px; }
.nb-body pre.nb-code[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 10px;
  left: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  user-select: none;
}
html[data-theme="dark"] .nb-body pre.nb-code {
  background: color-mix(in srgb, var(--surface) 70%, #000 30%);
}

@media (max-width: 640px) {
  .nb-wrap { padding: 40px 16px 84px !important; }
  .nb-body p, .nb-body li { font-size: 16px !important; }
}