/* ==========================================================================
   墨白 · 个人博客主题 —— 设计系统（theme.css）
   --------------------------------------------------------------------------
   定位：内容型 CMS / 个人写作。排版优先：单一阅读栏宽、衬线标题、克制的墨绿强调色，
        深浅色双主题，长文阅读配套（目录 / 进度条 / 灯箱 / 阅读时长）。

   与框架的约定（改了要同步）：
     1. 本文件**不自带工具类体系**，只做三件事：
        ① 覆盖 front.css 的设计令牌（--color-* / --radius-* / --shadow-*），
           于是 front.css 的既有工具类、插件表单（.jc-form）、地区站与会员模板
           会一起跟着换肤；
        ② 提供本主题自己的组件类（.bl-*），组件不依赖 front.css 的工具类，
           所以不会因为"产物里恰好没有某个类"而走形；
        ③ 给解析器**直接输出**的固定类补样式：.breadcrumb / .pager / .tabchip /
           .panel / .panel-title / .prose-cms / .read-progress / .lang-suggest。
     2. 加载顺序必须是 front.css → front-extra.css → theme.css（见 comm/head.html）。
     3. .prose-cms 与 <aside> 是与 /static/themes/_base/front-ux.js 的接口：
        它会往 .prose-cms 里找 h2/h3 生成目录（插进页面第一个 <aside>）、
        按正文字数算阅读时长（中文 400 字/分钟）、给图片挂灯箱。改类名会一起失效。
     4. 深色模式靠 <html class="dark">（comm/head.html 里的内联脚本负责，
        手动选择优先、否则跟随系统），令牌必须在 .dark 里重新声明。
   ========================================================================== */

/* ==================== 1. 设计令牌 ==================== */
:root {
  /* 字体：正文无衬线（中文优先），标题衬线——个人博客的"刊物感"来源 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun",
    Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 品牌色：墨绿。正文里只用于链接下划线、强调、按钮 */
  --color-primary: #2f6f5e;
  --color-primary-dark: #24574a;
  --color-primary-soft: #e9f2ee;

  /* 中性色：暖白纸感 + 石墨字 */
  --color-ink: #1b1f23;
  --color-ink-soft: #55616c;
  --color-ink-mute: #7b858e;
  --color-surface: #ffffff;
  --color-surface-alt: #faf9f6;
  --color-line: #e8e4dc;
  --color-footer: #faf9f6;
  --color-footer-ink: #55616c;
  --color-danger: #c0392b;

  /* 观感：小圆角 + 极轻阴影（写作站要"纸"，不要卡片堆） */
  --radius-card: 10px;
  --radius-card-lg: 14px;
  --radius-chip: 999px;
  --shadow-card: 0 1px 2px rgba(27, 31, 35, .04), 0 10px 30px -24px rgba(27, 31, 35, .35);
  --shadow-card-hover: 0 2px 4px rgba(27, 31, 35, .06), 0 18px 40px -26px rgba(27, 31, 35, .45);
  --shadow-header: 0 1px 0 rgba(27, 31, 35, .06);

  /* 版面 */
  --container-page: 1140px;
  --bl-wide: 1140px;
  --bl-read: 46rem;      /* 正文阅读栏宽：约 45 个汉字/行，长文最舒服 */
  --bl-header-h: 64px;
}

.dark {
  --color-primary: #7cc4ae;
  --color-primary-dark: #a3dcc9;
  --color-primary-soft: #1c2b27;

  --color-ink: #e9e7e2;
  --color-ink-soft: #b0ada6;
  --color-ink-mute: #8b8880;
  --color-surface: #17191b;
  --color-surface-alt: #121416;
  --color-line: #2b2f33;
  --color-footer: #121416;
  --color-footer-ink: #b0ada6;
  --color-danger: #f87171;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -24px rgba(0, 0, 0, .8);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px -26px rgba(0, 0, 0, .9);
  --shadow-header: 0 1px 0 rgba(255, 255, 255, .06);
}

/* ==================== 2. 基础 ==================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--color-surface-alt);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }
img, svg, video { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
::selection { background: var(--color-primary-soft); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* 锚点跳转要给滚动留出吸顶头的高度（目录点击靠它，不然标题被头挡住） */
.prose-cms :is(h2, h3, h4) { scroll-margin-top: calc(var(--bl-header-h) + 16px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 通用容器与分节 */
.bl-container { width: 100%; max-width: var(--bl-wide); margin-inline: auto; padding-inline: 1.25rem; }
.bl-main { min-height: 60vh; padding-bottom: 4.5rem; }
.bl-section { padding-block: 3rem; }
.bl-section-tight { padding-block: 2rem; }
.bl-divider { height: 1px; background: var(--color-line); border: 0; margin: 0; }

/* ==================== 3. 顶部：品牌 + 导航 ==================== */
.bl-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-line);
}
.bl-header-inner {
  display: flex; align-items: center; gap: 1rem;
  height: var(--bl-header-h);
}
.bl-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: .01em; }
.bl-brand img { height: 30px; width: auto; }
.bl-brand-text { font-family: var(--font-serif); font-size: 1.2rem; white-space: nowrap; }
.bl-brand-sub {
  display: none; font-size: .78rem; color: var(--color-ink-mute); font-weight: 400;
  border-inline-start: 1px solid var(--color-line); padding-inline-start: .6rem;
}

.bl-nav { display: none; align-items: center; gap: .15rem; margin-inline-start: auto; }
.bl-nav-link {
  position: relative; padding: .45rem .7rem; border-radius: 8px;
  font-size: .94rem; color: var(--color-ink-soft); white-space: nowrap;
  transition: color .18s, background-color .18s;
}
.bl-nav-link:hover { color: var(--color-ink); background: var(--color-surface-alt); }
.bl-nav-link.is-active { color: var(--color-primary); font-weight: 600; }
.bl-nav-link.is-active::after {
  content: ""; position: absolute; inset-inline: .7rem; bottom: .1rem; height: 2px;
  background: var(--color-primary); border-radius: 2px;
}
.bl-nav-item { position: relative; }
.bl-subnav {
  position: absolute; inset-inline-start: 0; top: 100%; z-index: 60;
  min-width: 11rem; padding: .4rem; margin: 0; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.bl-nav-item:hover > .bl-subnav,
.bl-nav-item:focus-within > .bl-subnav { opacity: 1; visibility: visible; transform: none; }
.bl-subnav a {
  display: block; padding: .4rem .6rem; border-radius: 8px;
  font-size: .9rem; color: var(--color-ink-soft); white-space: nowrap;
}
.bl-subnav a:hover { background: var(--color-surface-alt); color: var(--color-primary); }

/* 右侧动作区：搜索 / 深色开关 / 语言 / 汉堡 */
.bl-actions { display: flex; align-items: center; gap: .3rem; margin-inline-start: auto; }
.bl-nav + .bl-actions { margin-inline-start: .25rem; }
.bl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--color-ink-soft); cursor: pointer;
  transition: color .18s, background-color .18s, border-color .18s;
}
.bl-icon-btn:hover { color: var(--color-primary); background: var(--color-surface-alt); }

.bl-search { position: relative; display: none; }
.bl-search input {
  width: 11rem; height: 38px; padding: 0 .8rem 0 2.2rem;
  border: 1px solid var(--color-line); border-radius: var(--radius-chip);
  background: var(--color-surface-alt); color: var(--color-ink); font-size: .9rem;
  transition: width .2s, border-color .2s, background-color .2s;
}
.bl-search input::placeholder { color: var(--color-ink-mute); }
.bl-search input:focus { width: 14rem; outline: none; border-color: var(--color-primary); background: var(--color-surface); }
.bl-search .bi { position: absolute; inset-inline-start: .8rem; top: 50%; transform: translateY(-50%); color: var(--color-ink-mute); font-size: .9rem; }

.bl-lang { position: relative; }
.bl-lang-menu {
  position: absolute; inset-inline-end: 0; top: 100%; z-index: 60;
  min-width: 9rem; padding: .4rem; margin: 0; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover);
  display: none;
}
.bl-lang[data-open="true"] .bl-lang-menu { display: block; }
.bl-lang-menu a { display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; border-radius: 8px; font-size: .9rem; color: var(--color-ink-soft); }
.bl-lang-menu a:hover { background: var(--color-surface-alt); color: var(--color-primary); }

.bl-burger { display: inline-flex; }
@media (min-width: 1024px) {
  .bl-nav { display: flex; }
  .bl-burger { display: none; }
  .bl-search { display: block; }
  .bl-brand-sub { display: inline; }
}

/* 移动端抽屉 */
.bl-drawer {
  display: none; border-top: 1px solid var(--color-line);
  background: var(--color-surface); padding: .75rem 1.25rem 1.25rem;
}
.bl-header[data-open="true"] .bl-drawer { display: block; }
.bl-drawer ul { list-style: none; margin: 0; padding: 0; }
.bl-drawer > ul > li > a {
  display: block; padding: .7rem .25rem; border-bottom: 1px solid var(--color-line);
  font-size: 1rem; color: var(--color-ink);
}
.bl-drawer .bl-subnav-m {
  list-style: none; margin: 0; padding: .25rem 0 .25rem .9rem;
  border-bottom: 1px solid var(--color-line);
}
.bl-drawer .bl-subnav-m a { display: block; padding: .4rem .25rem; font-size: .9rem; color: var(--color-ink-soft); }
.bl-drawer .bl-search-m { margin-top: .9rem; }
.bl-drawer .bl-search-m input { width: 100%; }
@media (min-width: 1024px) { .bl-drawer { display: none !important; } }

/* ==================== 4. 页面标题区 / 面包屑 ==================== */
.bl-pagehead { padding-block: 2.25rem 1.5rem; background: var(--color-surface-alt); }
.bl-pagehead h1 { margin: .5rem 0 0; font-family: var(--font-serif); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.3; letter-spacing: .01em; }
.bl-pagehead p { margin: .7rem 0 0; max-width: var(--bl-read); color: var(--color-ink-soft); }

.breadcrumb { font-size: .84rem; color: var(--color-ink-mute); }
.breadcrumb a { color: var(--color-ink-mute); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb i, .breadcrumb span { margin-inline: .3rem; color: var(--color-line); }

/* ==================== 5. 标签 / 徽标 / 按钮 ==================== */
.bl-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-primary);
}
.bl-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: var(--radius-chip);
  border: 1px solid var(--color-line); background: var(--color-surface);
  font-size: .82rem; color: var(--color-ink-soft); white-space: nowrap;
  transition: color .18s, border-color .18s, background-color .18s;
}
.bl-chip:hover { color: var(--color-primary); border-color: var(--color-primary); }
.bl-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.bl-tag {
  display: inline-block; padding: .2rem .6rem; margin: 0 .35rem .35rem 0;
  border-radius: var(--radius-chip); background: var(--color-surface-alt);
  border: 1px solid var(--color-line); font-size: .8rem; color: var(--color-ink-soft);
}
.bl-tag:hover { color: var(--color-primary); border-color: var(--color-primary); }

.bl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.1rem; border: 1px solid var(--color-line); border-radius: var(--radius-chip);
  background: var(--color-surface); color: var(--color-ink); font-size: .92rem; font-weight: 500;
  cursor: pointer; transition: color .18s, background-color .18s, border-color .18s;
}
.bl-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.bl-btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.bl-btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.dark .bl-btn-primary { color: #10201b; }
.bl-btn-sm { padding: .35rem .8rem; font-size: .84rem; }
/* 解析器输出的分页里用的是 .tabchip（见 .pager），这里给它统一外观 */
.tabchip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 .75rem;
  border: 1px solid var(--color-line); border-radius: var(--radius-chip);
  background: var(--color-surface); font-size: .9rem; color: var(--color-ink-soft);
  transition: color .18s, border-color .18s, background-color .18s;
}
.tabchip:hover { color: var(--color-primary); border-color: var(--color-primary); }
.tabchip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.dark .tabchip.is-active { color: #10201b; }

/* ==================== 6. 首页 hero ==================== */
.bl-hero { padding-block: 3.5rem 2.75rem; border-bottom: 1px solid var(--color-line); }
.bl-hero-inner { max-width: 44rem; }
.bl-hero h1 {
  margin: .9rem 0 0; font-family: var(--font-serif);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.25; letter-spacing: .01em;
}
.bl-hero p { margin: 1.1rem 0 0; font-size: 1.06rem; color: var(--color-ink-soft); }
.bl-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.6rem; }
.bl-hero-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.6rem; font-size: .86rem; color: var(--color-ink-mute); }

/* ==================== 7. 文章列表 ==================== */
.bl-blockhead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.bl-blockhead h2 { margin: 0; font-family: var(--font-serif); font-size: 1.3rem; letter-spacing: .01em; }
.bl-blockhead a { font-size: .86rem; color: var(--color-ink-mute); }
.bl-blockhead a:hover { color: var(--color-primary); }

.bl-list { display: flex; flex-direction: column; }
.bl-item { padding-block: 1.6rem; border-bottom: 1px solid var(--color-line); }
.bl-item:first-child { padding-top: .4rem; }
.bl-item:last-child { border-bottom: 0; }
.bl-item-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-size: .82rem; color: var(--color-ink-mute);
}
.bl-item-meta a { color: var(--color-ink-mute); }
.bl-item-meta a:hover { color: var(--color-primary); }
.bl-item-meta .dot { color: var(--color-line); }
.bl-item-title {
  margin: .5rem 0 0; font-family: var(--font-serif);
  font-size: 1.32rem; font-weight: 600; line-height: 1.45;
}
.bl-item-title a { color: var(--color-ink); }
.bl-item-title a:hover { color: var(--color-primary); }
.bl-item-excerpt { margin: .6rem 0 0; color: var(--color-ink-soft); font-size: .96rem; }
.bl-item-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; }
.bl-item-more { font-size: .86rem; color: var(--color-primary); }

/* 带封面的条目（有 ico 时用两栏） */
.bl-item-cover { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.bl-item-cover img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-card); border: 1px solid var(--color-line);
}
@media (min-width: 640px) {
  .bl-item-cover { grid-template-columns: minmax(0, 1fr) 190px; align-items: start; }
}

/* 卡片网格（标签页 / 搜索空态等次要场景） */
.bl-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.bl-card {
  display: flex; flex-direction: column; padding: 1.25rem;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.bl-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-primary); transform: translateY(-2px); }
.bl-card h3 { margin: .4rem 0 0; font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.5; }
.bl-card p { margin: .5rem 0 0; font-size: .9rem; color: var(--color-ink-soft); }

/* ==================== 8. 两栏：主内容 + 侧栏 ==================== */
.bl-cols { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) {
  .bl-cols { grid-template-columns: minmax(0, 1fr) 288px; gap: 3rem; }
}
.bl-side { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 1024px) { .bl-side { position: sticky; top: calc(var(--bl-header-h) + 1.5rem); } }
.bl-side-card {
  padding: 1.25rem 1.25rem 1.4rem;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.bl-side-card h3, .bl-side-card .panel-title {
  margin: 0 0 .9rem; padding-inline-start: .6rem;
  border-inline-start: 3px solid var(--color-primary);
  font-size: .95rem; font-weight: 600;
}
.bl-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bl-side-list li { padding-block: .55rem; border-bottom: 1px dashed var(--color-line); }
.bl-side-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.bl-side-list a { display: flex; justify-content: space-between; gap: .6rem; font-size: .92rem; color: var(--color-ink-soft); }
.bl-side-list a:hover { color: var(--color-primary); }
.bl-side-list time { display: block; margin-top: .15rem; font-size: .78rem; color: var(--color-ink-mute); }
.bl-side-list .n { font-size: .78rem; color: var(--color-ink-mute); flex-shrink: 0; }

/* ==================== 9. 文章页 ==================== */
.bl-post-head { padding-block: 2.25rem 1.25rem; }
.bl-post-title {
  margin: .6rem 0 0; font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.45rem); line-height: 1.28;
  letter-spacing: .005em; text-wrap: balance;
}
.bl-post-sub { margin: .9rem 0 0; font-size: 1.02rem; color: var(--color-ink-soft); }
.bl-post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin-top: 1.1rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--color-line);
  font-size: .84rem; color: var(--color-ink-mute);
}
.bl-post-cover { margin: 1.6rem 0 0; }
.bl-post-cover img { width: 100%; border-radius: var(--radius-card-lg); border: 1px solid var(--color-line); }
.bl-post-foot { margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-line); }
.bl-post-nav { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; font-size: .92rem; }
.bl-post-nav a { display: inline-flex; align-items: baseline; gap: .4rem; color: var(--color-ink-soft); }
.bl-post-nav a:hover { color: var(--color-primary); }
@media (min-width: 640px) {
  .bl-post-nav { flex-direction: row; justify-content: space-between; }
  .bl-post-nav .next { margin-inline-start: auto; }
}

/* 正文排版（.prose-cms 是 front-ux.js 的接口，别改名） */
.prose-cms {
  max-width: var(--bl-read);
  font-size: 1.03rem;
  line-height: 1.9;
  color: var(--color-ink);
  word-wrap: break-word;
}
.prose-cms > *:first-child { margin-top: 0; }
.prose-cms :is(h2, h3, h4, h5) {
  font-family: var(--font-serif); font-weight: 600; line-height: 1.4;
  color: var(--color-ink); letter-spacing: .005em;
}
.prose-cms h2 { margin: 2.4em 0 .8em; padding-bottom: .35em; border-bottom: 1px solid var(--color-line); font-size: 1.42rem; }
.prose-cms h3 { margin: 1.9em 0 .6em; font-size: 1.18rem; }
.prose-cms h4 { margin: 1.6em 0 .5em; font-size: 1.04rem; }
.prose-cms p { margin: 1.15em 0; }
.prose-cms a { color: var(--color-primary); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.prose-cms a:hover { text-decoration-thickness: 2px; }
.prose-cms strong { font-weight: 600; }
.prose-cms :is(ul, ol) { margin: 1.1em 0; padding-inline-start: 1.5em; }
.prose-cms li { margin: .45em 0; }
.prose-cms li::marker { color: var(--color-ink-mute); }
.prose-cms blockquote {
  margin: 1.6em 0; padding: .2em 1.2em; color: var(--color-ink-soft);
  border-inline-start: 3px solid var(--color-primary); background: var(--color-surface);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.prose-cms blockquote p { margin: .6em 0; }
.prose-cms code {
  padding: .16em .4em; border-radius: 5px; background: var(--color-surface-alt);
  border: 1px solid var(--color-line); font-family: var(--font-mono); font-size: .88em;
}
.prose-cms pre {
  margin: 1.5em 0; padding: 1rem 1.1rem; overflow-x: auto;
  background: #1b1f23; color: #e9e7e2; border-radius: var(--radius-card);
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.7;
}
.dark .prose-cms pre { background: #0e1012; border: 1px solid var(--color-line); }
.prose-cms pre code { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; }
.prose-cms img { display: block; margin: 1.7em auto; border-radius: var(--radius-card); border: 1px solid var(--color-line); }
.prose-cms figure { margin: 1.7em 0; }
.prose-cms figcaption { margin-top: .6em; text-align: center; font-size: .82rem; color: var(--color-ink-mute); }
.prose-cms hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--color-line); }
.prose-cms table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font-size: .92rem; }
.prose-cms th, .prose-cms td { padding: .6em .8em; border: 1px solid var(--color-line); text-align: start; }
.prose-cms thead th { background: var(--color-surface-alt); font-weight: 600; }
.prose-cms tbody tr:nth-child(even) { background: var(--color-surface-alt); }
.prose-cms :is(video, iframe) { width: 100%; border-radius: var(--radius-card); border: 1px solid var(--color-line); }
/* 站内正文里自动挂的备用内链样式 */
.prose-cms .bl-inline-links { margin: 1.6em 0; padding: 1rem 1.1rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); }

/* ==================== 10. 目录 / 进度条 / 语言建议（front-ux.js 注入） ==================== */
.read-progress {
  position: fixed; inset-inline: 0; top: 0; z-index: 80; height: 3px;
  background: var(--color-primary); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .1s linear;
}
.dark .read-progress { background: var(--color-primary); }

.panel { padding: 1.15rem 1.25rem 1.3rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.panel-title { margin: 0 0 .8rem; padding-inline-start: .6rem; border-inline-start: 3px solid var(--color-primary); font-size: .95rem; font-weight: 600; }
.article-toc-list { display: flex; flex-direction: column; max-height: 62vh; overflow-y: auto; }
.article-toc-list a {
  padding: .3rem 0; font-size: .88rem; line-height: 1.5;
  color: var(--color-ink-soft); border-inline-start: 2px solid transparent;
  padding-inline-start: .6rem; transition: color .15s, border-color .15s;
}
.article-toc-list a[data-level="3"] { padding-inline-start: 1.4rem; font-size: .84rem; color: var(--color-ink-mute); }
.article-toc-list a:hover { color: var(--color-primary); }
.article-toc-list a[data-active="true"] { color: var(--color-primary); border-inline-start-color: var(--color-primary); font-weight: 600; }

.lang-suggest {
  position: fixed; z-index: 70; inset-inline: 50% auto; bottom: 1.5rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .9rem; background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-chip); box-shadow: var(--shadow-card-hover); font-size: .88rem;
}
.lang-suggest a { color: var(--color-primary); }
.lang-suggest button { border: 0; background: transparent; cursor: pointer; color: var(--color-ink-mute); font-size: 1.1rem; line-height: 1; }

/* ==================== 11. 分页 / 空态 ==================== */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; margin: 2.5rem 0 0; }
.pager .pager-info, .pager .page-info, .pager span { font-size: .86rem; color: var(--color-ink-mute); }
.bl-empty {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding: 4rem 1rem; text-align: center; color: var(--color-ink-mute);
  border: 1px dashed var(--color-line); border-radius: var(--radius-card); background: var(--color-surface);
}
.bl-empty .bi { font-size: 1.8rem; }

/* ==================== 12. 页脚 ==================== */
.bl-footer { margin-top: 3rem; border-top: 1px solid var(--color-line); background: var(--color-footer); color: var(--color-footer-ink); }
.bl-footer-grid { display: grid; gap: 2rem; padding-block: 2.75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .bl-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; } }
.bl-footer h4 { margin: 0 0 .9rem; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink); }
.bl-footer p { margin: .5rem 0 0; font-size: .9rem; }
.bl-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; }
.bl-footer ul a { color: var(--color-footer-ink); }
.bl-footer ul a:hover { color: var(--color-primary); }
.bl-footer-brand { font-family: var(--font-serif); font-size: 1.3rem; color: var(--color-ink); }
.bl-footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
  padding-block: 1.1rem; border-top: 1px solid var(--color-line);
  font-size: .84rem; color: var(--color-ink-mute);
}

/* ==================== 13. 回到顶部 ==================== */
.bl-top {
  position: fixed; inset-inline-end: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink-soft);
  box-shadow: var(--shadow-card); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, color .2s, border-color .2s;
}
.bl-top[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
.bl-top:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ==================== 14. 表单页（配合插件表单的标记） ==================== */
.bl-form-wrap { max-width: 40rem; }
.jc-label { display: block; font-size: .88rem; color: var(--color-ink-soft); }
.jc-form textarea { min-height: 7.5rem; resize: vertical; }
.bl-msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.bl-msg-list li { padding: 1.1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.bl-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .84rem; color: var(--color-ink-mute); }
.bl-msg-list p { margin: .5rem 0 0; color: var(--color-ink-soft); font-size: .95rem; }

/* ==================== 14b. 搜索行（搜索页用，与顶部搜索框区分） ==================== */
.bl-searchline { display: flex; gap: .6rem; margin-top: 1.1rem; max-width: 32rem; }
.bl-searchline input {
  flex: 1; min-width: 0; height: 44px; padding: 0 .95rem;
  border: 1px solid var(--color-line); border-radius: var(--radius-chip);
  background: var(--color-surface); color: var(--color-ink); font-size: .95rem;
}
.bl-searchline input:focus { outline: none; border-color: var(--color-primary); }
.bl-searchline .bl-btn { height: 44px; flex-shrink: 0; }

/* 窄屏下目录跑到正文后面反而碍事：隐藏目录本体，保留侧栏的其它卡片。
   （front-ux.js 注入的是 .panel > .article-toc-list，这里只藏目录那一段。） */
@media (max-width: 1023px) {
  .article-toc-list { display: none; }
  .panel-title .toc-read { display: none; }
}

/* ==================== 15. 打印（长文可读性） ==================== */
@media print {
  .bl-header, .bl-footer, .bl-side, .bl-top, .read-progress, .bl-post-nav { display: none !important; }
  body { background: #fff; }
  .prose-cms { max-width: none; font-size: 12pt; }
}

/* ==================== 16. 溢出与移动端加固 ====================
   背景：站点名常被写成"长句 SEO 标题"（例如 "Industrial Doors | Sectional … | OEM Import & Export"），
   直接铺进品牌区会把 flex 撑宽 → 整页横向溢出、手机端右侧内容被切掉、汉堡按钮被挤出屏幕。
   这里做四道加固，任何长度的标题/正文都不会再撑破版面（2026-10-12 线上实测踩到）。 */

/* 16.1 品牌名：超过宽度就省略号，永不撑宽头部 */
.bl-header-inner { min-width: 0; }
.bl-brand { min-width: 0; flex: 0 1 auto; }
.bl-brand-text {
  display: block;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) { .bl-brand-text { max-width: 10ch; } }
@media (min-width: 1024px) { .bl-brand-text { max-width: 26ch; } }

/* 16.2 导航：条目多时自身横向滚动，不挤压右侧动作区 */
.bl-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bl-nav::-webkit-scrollbar { display: none; }
.bl-actions { flex-shrink: 0; }

/* 16.3 正文里的宽内容：表格 / 长代码 / 长链接自己滚，不带动整页 */
.prose-cms table { display: block; max-width: 100%; overflow-x: auto; }
.prose-cms :is(p, li, td, th, h2, h3, h4) { overflow-wrap: anywhere; }

/* 16.4 注意：这里**刻意不写** body { overflow-x: hidden }。
   它会把这个文档变成滚动容器，吸顶头部（position: sticky）会跟着失效；
   超宽问题已由上面三条从根上解决（品牌名截断、导航自身滚动、正文宽内容自滚）。 */