/* ==========================================================================
   blue 主题 · 现代资讯流（复刻 moban.wpmbg.com/21104 骨架 + 现代化重构）
   原型：单栏文章流(图左文右 post / 纯文字 item) + 300px 右栏四件套
   现代化：流体容器 / 64px 毛玻璃 sticky 导航 / 现代卡片与字阶 /
            移动抽屉 / 真响应式(1080-900-768-500) / 可访问性
   ========================================================================== */

:root {
  /* 色彩：源自参考站 #004c98 提亮现代化 */
  --bl-primary: #0b5fd8;
  --bl-primary-deep: #084bb0;
  --bl-primary-soft: #e9f1fd;
  --bl-primary-line: #cfe0f8;
  --bl-accent: #ff5e52;
  --bl-accent-soft: #ffecea;

  --bl-bg: #f4f6fa;
  --bl-surface: #ffffff;
  --bl-surface-2: #f0f3f8;

  --bl-text: #16202e;
  --bl-text-2: #46536a;
  --bl-text-3: #78849a;

  --bl-line: #e3e9f1;
  --bl-line-2: #edf1f6;

  --bl-radius: 14px;
  --bl-radius-sm: 10px;
  --bl-radius-xs: 8px;
  --bl-full: 999px;

  --bl-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --bl-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07);
  --bl-shadow-lg: 0 18px 48px rgba(11, 95, 216, .16);

  --bl-container: 1200px;
  --bl-side-w: 320px;
  --bl-nav-h: 64px;

  --bl-font: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-size: 15px; line-height: 1.75; color: var(--bl-text);
  background: var(--bl-bg); font-family: var(--bl-font);
  -webkit-font-smoothing: antialiased;
}
body.bl-lock { overflow: hidden; }
img { max-width: 100%; vertical-align: middle; }
a { color: var(--bl-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--bl-primary-deep); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.4; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--bl-primary); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--bl-primary); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3cede; border-radius: 8px; border: 2px solid var(--bl-bg); }
::-webkit-scrollbar-thumb:hover { background: #a7b6ca; }
::-webkit-scrollbar-track { background: transparent; }
/* [hidden] 必须能隐藏任何元素 —— 下面多处元素显式设了 display（inline-flex 等），
   会覆盖浏览器对 hidden 属性的默认 display:none，导致「隐藏」失效（加载更多按钮曾因此不消失） */
[hidden] { display: none !important; }

.bl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 布局 ---------- */
.bl-wrap { max-width: var(--bl-container); margin: 0 auto; padding: 0 20px; }
.bl-main { padding: 26px 0 52px; }
.bl-cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--bl-side-w); gap: 26px; align-items: start; }
.bl-cols--full { grid-template-columns: minmax(0, 1fr); }
.bl-cols__main { min-width: 0; }
.bl-side { position: sticky; top: calc(var(--bl-nav-h) + 18px); display: flex; flex-direction: column; gap: 18px; }
.bl-bread { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 13px; color: var(--bl-text-3); padding: 8px 0 16px; }
.bl-bread a { color: var(--bl-text-2); }
.bl-bread a:hover { color: var(--bl-primary); }
.bl-bread i { font-size: 15px; color: #b8c3d2; }

/* ---------- 导航（参考站 header+menu，现代化为毛玻璃 sticky） ---------- */
.bl-nav {
  position: sticky; top: 0; z-index: 60; height: var(--bl-nav-h);
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--bl-line);
}
.bl-nav__inner { height: 100%; display: flex; align-items: center; gap: 22px; }
.bl-brand { display: flex; align-items: center; gap: 10px; flex: none; }
/* logo 加载失败时的站名兜底（onerror 会把它 display 成 flex，故此处只需排版样式） */
.bl-brand__fallback { display: none; align-items: center; font-size: 20px; font-weight: 800; color: var(--bl-text); letter-spacing: .3px; }

.bl-brand__logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; box-shadow: var(--bl-shadow-sm); }
.bl-brand__name { font-size: 19px; font-weight: 800; letter-spacing: .4px; color: var(--bl-text); white-space: nowrap; }
.bl-brand__name em { font-style: normal; color: var(--bl-primary); }
.bl-menu { display: flex; align-items: center; gap: 1px; height: 100%; }
.bl-menu a {
  position: relative; display: flex; align-items: center; height: 100%; padding: 0 13px;
  font-size: 15px; color: var(--bl-text-2); white-space: nowrap;
}
.bl-menu a:hover { color: var(--bl-primary); }
.bl-menu a.is-on { color: var(--bl-primary); font-weight: 600; }
.bl-menu a.is-on::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--bl-primary);
}
.bl-nav__act { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bl-iconbtn {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--bl-full); color: var(--bl-text-2); font-size: 19px;
  transition: background .2s ease, color .2s ease;
}
.bl-iconbtn:hover { background: var(--bl-primary-soft); color: var(--bl-primary); }
.bl-navtoggle { display: none; }

/* 移动抽屉 */
.bl-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 80; visibility: hidden; }
.bl-drawer__mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(16, 24, 40, .45); opacity: 0; transition: opacity .25s ease; }
.bl-drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; right: auto; width: min(78vw, 320px); background: var(--bl-surface);
  box-shadow: var(--bl-shadow-lg); transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.22, .68, .36, 1);
  display: flex; flex-direction: column; padding: 18px;
}
.bl-drawer.is-open { visibility: visible; }
.bl-drawer.is-open .bl-drawer__mask { opacity: 1; }
.bl-drawer.is-open .bl-drawer__panel { transform: none; }
.bl-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--bl-line-2); }
.bl-drawer__list { padding: 8px 0; overflow-y: auto; }
.bl-drawer__list a { display: block; padding: 12px; font-size: 15px; color: var(--bl-text); border-radius: var(--bl-radius-sm); }
.bl-drawer__list a:hover, .bl-drawer__list a.is-on { background: var(--bl-primary-soft); color: var(--bl-primary); font-weight: 600; }
.bl-drawer__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bl-line-2); font-size: 12px; color: var(--bl-text-3); }

/* 搜索浮层（参考站 searchbox 居中弹出，现代化动画） */
.bl-search { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; visibility: hidden; }
.bl-search__mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(16, 24, 40, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.bl-search__box {
  position: relative; width: min(92vw, 560px); margin: 12vh auto 0; padding: 24px;
  background: var(--bl-surface); border-radius: 18px; box-shadow: var(--bl-shadow-lg);
  transform: translateY(-14px) scale(.97); opacity: 0; transition: all .25s cubic-bezier(.22, .68, .36, 1);
}
.bl-search.is-open { visibility: visible; }
.bl-search.is-open .bl-search__mask { opacity: 1; }
.bl-search.is-open .bl-search__box { transform: none; opacity: 1; }
.bl-search__title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bl-search__title h2 { font-size: 18px; }
.bl-search__form { display: flex; gap: 10px; }
.bl-search__input {
  flex: 1; height: 46px; padding: 0 16px; font-size: 15px; color: var(--bl-text);
  background: var(--bl-surface-2); border: 1px solid var(--bl-line); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.bl-search__input:focus { outline: none; border-color: var(--bl-primary); box-shadow: 0 0 0 3px var(--bl-primary-soft); background: #fff; }
.bl-search__btn {
  height: 46px; padding: 0 22px; font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--bl-primary), #2f7ae8); border-radius: 12px;
  box-shadow: 0 6px 16px rgba(11, 95, 216, .28); transition: transform .2s, box-shadow .2s;
}
.bl-search__btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(11, 95, 216, .34); }
.bl-search__hot { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--bl-text-3); }
.bl-search__hot a { padding: 5px 12px; background: var(--bl-surface-2); border-radius: var(--bl-full); color: var(--bl-text-2); font-size: 13px; }
.bl-search__hot a:hover { background: var(--bl-primary); color: #fff; }

/* ---------- 文章流（复刻参考站 listcon：post 图左文右 + item 纯文字） ---------- */
.bl-listcon {
  background: var(--bl-surface); border: 1px solid var(--bl-line-2);
  border-radius: var(--bl-radius); box-shadow: var(--bl-shadow-sm);
  padding: 6px 22px;
}
.bl-post { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--bl-line-2); }
.bl-post:last-child { border-bottom: 0; }
.bl-post__thumb { flex: none; width: 220px; height: 146px; border-radius: var(--bl-radius-sm); overflow: hidden; background: var(--bl-surface-2); }
.bl-post__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .45s ease; }
.bl-post:hover .bl-post__thumb img { transform: scale(1.05); }
.bl-post__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bl-post__title { font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
.bl-post__title a { color: var(--bl-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-post:hover .bl-post__title a { color: var(--bl-primary); }
.bl-post__desc { font-size: 14px; line-height: 1.75; color: var(--bl-text-3); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-post__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: var(--bl-text-3); }
.bl-post__foot span { display: inline-flex; align-items: center; gap: 5px; }
.bl-post__foot i { font-size: 15px; color: #9aa8bd; }
.bl-cat { display: inline-flex; align-items: center; padding: 3px 11px; font-size: 12px; font-weight: 600; color: var(--bl-primary); background: var(--bl-primary-soft); border-radius: var(--bl-full); }
.bl-cat:hover { background: var(--bl-primary); color: #fff; }
.bl-post__hot { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 12px; font-weight: 700; color: var(--bl-accent); background: var(--bl-accent-soft); border-radius: var(--bl-full); }


/* ---------- 右栏四件套（复刻 divCatalog / divPrevious / divTags / divLinkage） ---------- */
.bl-widget { background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: var(--bl-radius); box-shadow: var(--bl-shadow-sm); padding: 18px; }
.bl-widget__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--bl-line-2); }
.bl-widget__title i { font-size: 18px; color: var(--bl-primary); }
.bl-hotlist li + li { margin-top: 1px; }
.bl-hotlist a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: var(--bl-radius-xs); }
.bl-hotlist a:hover { background: var(--bl-surface-2); }
.bl-hotlist__no {
  flex: none; width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--bl-text-3); background: var(--bl-surface-2); border-radius: 6px;
}
.bl-hotlist li:nth-child(1) .bl-hotlist__no { color: #fff; background: linear-gradient(135deg, #ff8a3d, #ff5e52); }
.bl-hotlist li:nth-child(2) .bl-hotlist__no { color: #fff; background: linear-gradient(135deg, #7f9cc4, #5b7ba8); }
.bl-hotlist li:nth-child(3) .bl-hotlist__no { color: #fff; background: linear-gradient(135deg, #d9a26a, #c07f45); }
.bl-hotlist__title { font-size: 13.5px; line-height: 1.55; color: var(--bl-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-hotlist a:hover .bl-hotlist__title { color: var(--bl-primary); }
.bl-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-tagcloud a { padding: 5px 12px; font-size: 13px; color: var(--bl-text-2); background: var(--bl-surface-2); border-radius: var(--bl-full); }
.bl-tagcloud a:hover { background: var(--bl-primary); color: #fff; }
.bl-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
.bl-links a { color: var(--bl-text-2); }
.bl-links a:hover { color: var(--bl-primary); }
.bl-widget--accent { background: linear-gradient(150deg, #0b5fd8, #1a78e8 55%, #38a0ff); border: 0; color: #fff; }
.bl-widget--accent .bl-widget__title { color: #fff; border-bottom-color: rgba(255, 255, 255, .22); }
.bl-widget--accent .bl-widget__title i { color: #fff; }
.bl-statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bl-statgrid__cell { padding: 12px; background: rgba(255, 255, 255, .14); border-radius: var(--bl-radius-sm); text-align: center; }
.bl-statgrid__cell i { font-size: 17px; opacity: .85; }
.bl-statgrid__cell b { display: block; margin-top: 2px; font-size: 18px; font-weight: 800; }
.bl-statgrid__cell small { font-size: 12px; opacity: .75; }
.bl-bar2 + .bl-bar2 { margin-top: 12px; }
.bl-bar2__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-size: 13px; }
.bl-bar2__name { color: var(--bl-text-2); }
.bl-bar2__num { color: var(--bl-text-3); font-variant-numeric: tabular-nums; }
.bl-bar2__track { height: 6px; background: var(--bl-surface-2); border-radius: var(--bl-full); overflow: hidden; }
.bl-bar2__fill { height: 100%; border-radius: var(--bl-full); background: linear-gradient(90deg, var(--bl-primary), #38a0ff); }

/* ---------- 列表页头部 / 筛选 ---------- */
.bl-listhead { padding: 0 0 20px; }
.bl-listhead__title { font-size: clamp(24px, 3vw, 30px); font-weight: 800; letter-spacing: .4px; }
.bl-listhead__desc { margin-top: 8px; font-size: 14px; color: var(--bl-text-3); }
.bl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.bl-fchip { padding: 7px 15px; font-size: 13px; color: var(--bl-text-2); background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: var(--bl-full); }
.bl-fchip:hover { border-color: var(--bl-primary); color: var(--bl-primary); }
.bl-fchip.is-on { background: var(--bl-primary); border-color: var(--bl-primary); color: #fff; font-weight: 600; }
.bl-sorts { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bl-text-3); }
.bl-sort { padding: 6px 13px; border-radius: var(--bl-full); color: var(--bl-text-2); }
.bl-sort:hover { background: var(--bl-primary-soft); color: var(--bl-primary); }
.bl-sort.is-on { background: var(--bl-primary-soft); color: var(--bl-primary); font-weight: 600; }

/* ---------- 分页（listview 输出裸 a/span，禁用态类名兼容 fl-page__dis） ---------- */
.bl-page { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 24px 0 4px; }
.bl-page a, .bl-page span {
  min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--bl-text-2); background: var(--bl-surface);
  border: 1px solid var(--bl-line); border-radius: var(--bl-radius-sm); transition: all .2s ease;
}
.bl-page a:hover { border-color: var(--bl-primary); color: var(--bl-primary); }
.bl-page > span:not([class]) { color: var(--bl-primary); border-color: var(--bl-primary); background: var(--bl-primary-soft); font-weight: 700; }
.bl-page .fl-page__dis, .bl-page .bl-page__dis { opacity: .45; cursor: not-allowed; color: var(--bl-text-3); border-color: var(--bl-line); background: var(--bl-surface); }
.bl-page .fl-page__info, .bl-page .bl-page__info { border: 0; background: none; color: var(--bl-text-3); font-size: 13px; }

/* ---------- 文章页（复刻参考站：面包屑 + 标题 + singleinfo + 正文 + 上下篇 + 相关文章） ---------- */
.bl-art { background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: var(--bl-radius); box-shadow: var(--bl-shadow-sm); padding: 30px 34px 26px; }
.bl-art__title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.42; }
.bl-art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 16px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--bl-line-2); font-size: 13px; color: var(--bl-text-3); }
.bl-art__meta span { display: inline-flex; align-items: center; gap: 5px; }
.bl-art__meta i { font-size: 15px; color: #9aa8bd; }
.bl-art__meta .bl-cat { font-size: 12.5px; }
.bl-art__body { font-size: 16.5px; line-height: 1.95; color: #23303f; }
.bl-art__body > :first-child { margin-top: 0; }
.bl-art__body p { margin: 0 0 1.15em; }
.bl-art__body strong { color: #0d1526; font-weight: 700; }
.bl-art__body h2, .bl-art__body h3, .bl-art__body h4 { margin: 1.8em 0 .8em; scroll-margin-top: calc(var(--bl-nav-h) + 16px); }
.bl-art__body h2 { font-size: 21px; padding-left: 12px; border-left: 4px solid var(--bl-primary); }
.bl-art__body h3 { font-size: 18px; color: var(--bl-primary-deep); }
.bl-art__body h4 { font-size: 16px; }
.bl-art__body a { text-decoration: underline; text-decoration-color: rgba(11, 95, 216, .35); text-underline-offset: 3px; }
.bl-art__body ul, .bl-art__body ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.bl-art__body ul { list-style: disc; }
.bl-art__body ol { list-style: decimal; }
.bl-art__body li { margin-bottom: .4em; }
.bl-art__body li::marker { color: var(--bl-primary); }
.bl-art__body img { border-radius: var(--bl-radius-sm); }
.bl-art__body blockquote { margin: 1.2em 0; padding: 14px 18px; background: var(--bl-primary-soft); border-left: 4px solid var(--bl-primary); border-radius: 0 var(--bl-radius-sm) var(--bl-radius-sm) 0; color: var(--bl-text-2); }
.bl-art__body hr { height: 1px; margin: 2em 0; border: 0; background: linear-gradient(90deg, var(--bl-primary), rgba(11, 95, 216, 0)); opacity: .35; }
.bl-art__body pre { margin: 1.2em 0; padding: 16px; overflow-x: auto; background: #0f1b2e; color: #e6edf7; border-radius: var(--bl-radius-sm); font-size: 13.5px; line-height: 1.7; }
.bl-art__body code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.bl-art__body table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 14.5px; }
.bl-art__body th, .bl-art__body td { padding: 9px 12px; border: 1px solid var(--bl-line); text-align: left; }
.bl-art__body th { background: var(--bl-primary-soft); color: var(--bl-primary-deep); font-weight: 700; white-space: nowrap; }
.bl-art__body tbody tr:nth-child(even) { background: #fafbfd; }
.bl-tablewrap { margin: 1.2em 0; overflow-x: auto; border-radius: var(--bl-radius-sm); }
.bl-tablewrap table { margin: 0; }
.bl-art__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bl-line-2); font-size: 13px; color: var(--bl-text-3); }
.bl-tagchip { display: inline-flex; align-items: center; padding: 4px 12px; font-size: 12.5px; color: var(--bl-text-2); background: var(--bl-surface-2); border-radius: var(--bl-full); }
.bl-tagchip:hover { background: var(--bl-primary-soft); color: var(--bl-primary); }
.bl-art__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bl-actbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; font-size: 14px; color: var(--bl-text-2); background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: var(--bl-full); transition: all .2s ease; }
.bl-actbtn:hover { border-color: var(--bl-primary); color: var(--bl-primary); }
.bl-actbtn.is-on { background: var(--bl-primary); border-color: var(--bl-primary); color: #fff; }
.bl-actbtn--primary { background: linear-gradient(135deg, var(--bl-primary), #2f7ae8); border: 0; color: #fff; box-shadow: 0 6px 16px rgba(11, 95, 216, .26); }
.bl-actbtn--primary:hover { color: #fff; transform: translateY(-1px); }
.bl-actbtn--primary.is-on { background: linear-gradient(135deg, #0a4fb0, #1a68c8); }

/* 上一篇 / 下一篇（复刻参考站 singlepage） */
.bl-singlepage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.bl-singlepage a { display: block; padding: 14px 16px; background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: var(--bl-radius-sm); font-size: 14px; color: var(--bl-text-2); box-shadow: var(--bl-shadow-sm); transition: all .2s ease; }
.bl-singlepage a:hover { border-color: var(--bl-primary-line); color: var(--bl-primary); transform: translateY(-1px); }
.bl-singlepage a:nth-child(2) { text-align: right; }
.bl-singlepage em { display: block; font-style: normal; font-size: 12px; color: var(--bl-text-3); margin-bottom: 3px; }
.bl-singlepage span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 相关文章（复刻参考站 relates：小图 + 标题列表） */
.bl-panel { margin-top: 20px; background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: var(--bl-radius); box-shadow: var(--bl-shadow-sm); padding: 22px 24px; }
.bl-panel__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; margin-bottom: 16px; }
.bl-panel__title i { color: var(--bl-primary); }
.bl-panel__count { font-size: 13px; font-weight: 500; color: var(--bl-text-3); }

/* ---------- 评论区 ---------- */
.bl-cform { padding: 16px; background: var(--bl-surface-2); border-radius: var(--bl-radius-sm); margin-bottom: 20px; }
.bl-cform__row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.bl-cform__row .bl-input { flex: 1; min-width: 140px; }
.bl-input { height: 42px; padding: 0 14px; font-size: 14px; color: var(--bl-text); background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: var(--bl-radius-sm); transition: border-color .2s, box-shadow .2s; }
.bl-input:focus { outline: none; border-color: var(--bl-primary); box-shadow: 0 0 0 3px var(--bl-primary-soft); }
.bl-textarea { width: 100%; min-height: 96px; padding: 12px 14px; font-size: 14px; font-family: inherit; line-height: 1.7; color: var(--bl-text); background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: var(--bl-radius-sm); resize: vertical; }
.bl-textarea:focus { outline: none; border-color: var(--bl-primary); box-shadow: 0 0 0 3px var(--bl-primary-soft); }
.bl-cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.bl-cform__code { display: flex; align-items: center; gap: 8px; }
.bl-cform__code img { height: 42px; border-radius: var(--bl-radius-xs); border: 1px solid var(--bl-line); }
.bl-cform__code .bl-input { width: 120px; }
.bl-cform__count { margin-left: auto; font-size: 12px; color: var(--bl-text-3); }
.bl-cswitch { display: inline-flex; padding: 3px; background: var(--bl-surface-2); border-radius: var(--bl-full); }
.bl-cswitch__btn { padding: 6px 16px; font-size: 13px; color: var(--bl-text-2); border-radius: var(--bl-full); }
.bl-cswitch__btn.is-on { background: var(--bl-surface); color: var(--bl-primary); font-weight: 600; box-shadow: var(--bl-shadow-sm); }
.bl-clist { display: flex; flex-direction: column; }
.bl-citem { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px dashed var(--bl-line); }
.bl-citem:last-child { border-bottom: 0; }
.bl-citem__ava { flex: none; width: 40px; height: 40px; border-radius: var(--bl-full); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--bl-primary), #38a0ff); }
.bl-citem__box { flex: 1; min-width: 0; }
.bl-citem__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.bl-citem__user { font-size: 14px; font-weight: 600; color: var(--bl-text); }
.bl-citem__time { font-size: 12px; color: var(--bl-text-3); }
.bl-citem__msg { font-size: 14.5px; line-height: 1.75; color: #2b3648; word-break: break-word; }
.bl-citem__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.bl-cop { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--bl-text-3); padding: 4px 10px; border-radius: var(--bl-full); transition: all .2s ease; }
.bl-cop:hover { background: var(--bl-surface-2); color: var(--bl-primary); }
.bl-cop.is-on { color: var(--bl-primary); background: var(--bl-primary-soft); }
.bl-cop.is-on i { font-weight: 700; }
.bl-creplies { margin: 10px 0 4px; padding: 4px 0 4px 14px; border-left: 3px solid var(--bl-primary-soft); display: flex; flex-direction: column; }
.bl-creplies .bl-citem { padding: 10px 0; }
.bl-cempty { padding: 28px 0; text-align: center; font-size: 14px; color: var(--bl-text-3); }
.bl-cempty i { display: block; margin-bottom: 8px; font-size: 32px; color: #cdd7e4; }
.bl-cmore { padding-top: 16px; text-align: center; }
.bl-cmore__btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 22px; font-size: 14px; color: var(--bl-primary); background: var(--bl-primary-soft); border-radius: var(--bl-full); }
.bl-cmore__btn:hover { background: var(--bl-primary); color: #fff; }
.bl-replyto { display: none; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--bl-text-2); }
.bl-ccancel { font-size: 13px; color: var(--bl-text-3); }
.bl-ccancel:hover { color: var(--bl-accent); }

/* ---------- 搜索页 / 标签页 头部 ---------- */
.bl-shero { padding: 30px 0 22px; }
.bl-shero__title { font-size: clamp(22px, 3vw, 28px); font-weight: 800; }
.bl-shero__title em { font-style: normal; color: var(--bl-primary); }
.bl-shero__sub { margin-top: 8px; font-size: 14px; color: var(--bl-text-3); }
.bl-taghead { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 0 0 22px; }
.bl-taghead__icon { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: linear-gradient(135deg, var(--bl-primary), #38a0ff); border-radius: 15px; box-shadow: 0 8px 20px rgba(11, 95, 216, .26); }
.bl-taghead__title { font-size: clamp(22px, 3vw, 28px); font-weight: 800; }
.bl-taghead__sub { font-size: 13.5px; color: var(--bl-text-3); }
.bl-taghead__sub b { color: var(--bl-primary); }
.bl-chipwrap { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.bl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; font-size: 14px; color: var(--bl-text-2); background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: var(--bl-full); box-shadow: var(--bl-shadow-sm); transition: all .2s ease; }
.bl-chip:hover { border-color: var(--bl-primary); color: var(--bl-primary); transform: translateY(-1px); }
.bl-chip i { color: #ffb703; }
.bl-chip em { font-style: normal; font-size: 12px; color: var(--bl-text-3); }
.bl-chip2 { padding: 5px 12px; font-size: 13px; color: var(--bl-text-2); background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: var(--bl-full); }
.bl-chip2:hover { border-color: var(--bl-primary); color: var(--bl-primary); }
.bl-tagchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.bl-tagchips__label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--bl-text-2); }
.bl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 16px; }
.bl-bar__tick { width: 4px; height: 20px; border-radius: 2px; background: linear-gradient(180deg, var(--bl-primary), #4b8ef0); }
.bl-bar__title { font-size: 20px; font-weight: 800; }
.bl-bar__more { margin-left: auto; font-size: 13px; color: var(--bl-text-3); display: inline-flex; align-items: center; gap: 3px; }
.bl-bar__more:hover { color: var(--bl-primary); }

/* ---------- 404 ---------- */
.bl-404 { padding: 70px 20px; text-align: center; }
.bl-404__code { font-size: clamp(80px, 16vw, 140px); font-weight: 900; line-height: 1; letter-spacing: 2px; background: linear-gradient(135deg, var(--bl-primary), #38a0ff 60%, var(--bl-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bl-404__title { margin-top: 10px; font-size: 22px; font-weight: 800; }
.bl-404__desc { margin-top: 8px; font-size: 14px; color: var(--bl-text-3); }
.bl-404__acts { margin: 26px 0 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bl-404__btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 26px; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--bl-primary), #2f7ae8); border-radius: var(--bl-full); box-shadow: 0 8px 20px rgba(11, 95, 216, .28); }
.bl-404__btn:hover { color: #fff; transform: translateY(-1px); }
.bl-404__btn--ghost { color: var(--bl-text-2); background: var(--bl-surface); border: 1px solid var(--bl-line); box-shadow: var(--bl-shadow-sm); }
.bl-404__btn--ghost:hover { color: var(--bl-primary); border-color: var(--bl-primary); }
.bl-404 .bl-searchbar { max-width: 460px; margin: 0 auto; }
.bl-searchbar { display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: var(--bl-full); box-shadow: var(--bl-shadow-sm); }
.bl-searchbar i { margin-left: 12px; font-size: 19px; color: var(--bl-text-3); }
.bl-searchbar input { flex: 1; min-width: 0; height: 40px; padding: 0 8px; font-size: 14.5px; color: var(--bl-text); background: none; border: 0; }
.bl-searchbar input:focus { outline: none; }
.bl-searchbar button { height: 40px; padding: 0 22px; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--bl-primary), #2f7ae8); border-radius: var(--bl-full); }
.bl-searchbar button:hover { color: #fff; }
.bl-hotwords { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--bl-text-3); }
.bl-hotwords a { padding: 4px 12px; background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: var(--bl-full); color: var(--bl-text-2); }
.bl-hotwords a:hover { border-color: var(--bl-primary); color: var(--bl-primary); }
.bl-tagsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: var(--bl-radius); box-shadow: var(--bl-shadow-sm); margin-bottom: 22px; }
.bl-tagsbar__label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; }
.bl-tagsbar__label i { color: var(--bl-accent); }
.bl-tagsbar .bl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-tagsbar .bl-chips a { padding: 5px 13px; font-size: 13px; color: var(--bl-text-2); background: var(--bl-surface-2); border-radius: var(--bl-full); }
.bl-tagsbar .bl-chips a:hover { background: var(--bl-primary); color: #fff; }
.bl-tagsbar .bl-chips a:nth-child(-n+3) { color: var(--bl-primary); background: var(--bl-primary-soft); font-weight: 600; }
.bl-noscript { padding: 18px 0; }

/* ---------- 页脚 ---------- */
.bl-footer { margin-top: 44px; background: linear-gradient(160deg, #0c1c33, #0a1626 70%); color: rgba(255, 255, 255, .72); }
.bl-footer__wrap { max-width: var(--bl-container); margin: 0 auto; padding: 42px 20px 0; }
.bl-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 30px; padding-bottom: 30px; }
.bl-footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bl-footer__logo img { width: 34px; height: 34px; border-radius: 9px; }
.bl-footer__logo b { font-size: 18px; font-weight: 800; color: #fff; }
.bl-footer__about { font-size: 13.5px; line-height: 1.8; color: rgba(255, 255, 255, .6); }
.bl-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.bl-footer__social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--bl-full); transition: all .2s ease; }
.bl-footer__social a:hover { color: #fff; background: var(--bl-primary); border-color: var(--bl-primary); transform: translateY(-2px); }
.bl-footer__coltitle { margin-bottom: 14px; font-size: 15px; font-weight: 700; color: #fff; }
.bl-footer__links { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.bl-footer__links a { color: rgba(255, 255, 255, .62); }
.bl-footer__links a:hover { color: #fff; }
.bl-footer__contacts { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: rgba(255, 255, 255, .62); }
.bl-footer__contacts span { display: inline-flex; align-items: center; gap: 8px; }
.bl-footer__contacts i { color: #4b9bff; }
.bl-footer__bottom small { font-size: 12px; }
.bl-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .09); padding: 18px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .42); }
.bl-footer__legal { display: flex; flex-wrap: wrap; gap: 14px; }
.bl-footer__legal a { color: rgba(255, 255, 255, .42); }
.bl-footer__legal a:hover { color: #fff; }
.bl-top { position: fixed; right: 22px; bottom: 26px; z-index: 50; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--bl-primary); background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: var(--bl-full); box-shadow: var(--bl-shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease; }
.bl-top.is-show { opacity: 1; visibility: visible; transform: none; }
.bl-top:hover { color: #fff; background: var(--bl-primary); border-color: var(--bl-primary); }

/* ==========================================================================
   响应式：参考站只有 1000/768/500 三档，这里补一档 1080（侧栏下移）
   ========================================================================== */
@media (max-width: 1080px) {
  .bl-cols { grid-template-columns: minmax(0, 1fr); }
  .bl-side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-post__thumb { width: 180px; height: 120px; }
}
@media (max-width: 900px) {
  .bl-menu { display: none; }
  .bl-navtoggle { display: inline-flex; }
  .bl-brand__name { font-size: 17px; }
}
@media (max-width: 768px) {
  body { font-size: 14.5px; }
  .bl-main { padding: 16px 0 36px; }
  .bl-listcon { padding: 4px 16px; }
  .bl-post { flex-wrap: wrap; gap: 12px; padding: 16px 0; }
  .bl-post__thumb { width: 100%; height: 150px; }
  .bl-post__title { font-size: 16.5px; }
  .bl-post__desc { font-size: 13.5px; }
  .bl-art { padding: 20px 18px 18px; }
  .bl-art__body { font-size: 16px; line-height: 1.85; }
  .bl-panel { padding: 18px 16px; }
  .bl-side { grid-template-columns: minmax(0, 1fr); }
  .bl-singlepage { grid-template-columns: minmax(0, 1fr); }
  .bl-singlepage a:nth-child(2) { text-align: left; }
  .bl-hide-sm { display: none !important; }
  .bl-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bl-sorts { margin-left: 0; width: 100%; }
}
@media (max-width: 500px) {
  .bl-wrap { padding: 0 14px; }
  .bl-post__foot { gap: 10px; font-size: 12px; }
  .bl-art__title { font-size: 21px; }
  .bl-art__meta { gap: 8px 12px; font-size: 12px; }
  .bl-searchbar button { padding: 0 16px; }
  .bl-citem__ava { width: 34px; height: 34px; font-size: 13px; }
}

/* ---------- 打印 ---------- */
@media print {
  .bl-nav, .bl-side, .bl-footer, .bl-top, .bl-art__acts, .bl-panel, .bl-singlepage { display: none !important; }
  body { background: #fff; }
  .bl-art { border: 0; box-shadow: none; padding: 0; }
}

/* ==========================================================================
   首页新增板块（用户要求：轮播 + 一周热文 + 分类速览，参考 air 模板）
   ========================================================================== */

/* ---------- 幻灯轮播 ---------- */
.bl-slide { position: relative; border-radius: var(--bl-radius); overflow: hidden; box-shadow: var(--bl-shadow); margin-bottom: 22px; background: var(--bl-surface-2); }
.bl-slide__track { position: relative; height: 300px; }
.bl-slide__item { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s ease; }
.bl-slide__item.is-on { opacity: 1; visibility: visible; }
.bl-slide__item img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.04); transition: transform 5s ease; }
.bl-slide__item.is-on img { transform: scale(1); }
.bl-slide__item::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(10, 22, 40, 0) 25%, rgba(10, 22, 40, .86) 90%); }
.bl-slide__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 28px; color: #fff; }
.bl-slide__tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: #fff; background: var(--bl-primary); border-radius: var(--bl-full); }
.bl-slide__tag--hot { background: var(--bl-accent); }
.bl-slide__title { font-size: clamp(18px, 2.4vw, 25px); font-weight: 800; line-height: 1.36; }
.bl-slide__title a { color: #fff; }
.bl-slide__title a:hover { color: #cfe2ff; }
.bl-slide__meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.bl-slide__meta span { display: inline-flex; align-items: center; gap: 5px; }
.bl-slide__nav { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: rgba(10, 22, 40, .4); border-radius: var(--bl-full); transform: translateY(-50%); opacity: 0; transition: all .25s ease; }
.bl-slide:hover .bl-slide__nav { opacity: 1; }
.bl-slide__nav:hover { background: var(--bl-primary); }
.bl-slide__nav--prev { left: 14px; }
.bl-slide__nav--next { right: 14px; }
.bl-slide__dots { position: absolute; right: 24px; bottom: 22px; z-index: 3; display: flex; gap: 7px; }
.bl-slide__dot { width: 9px; height: 9px; padding: 0; border-radius: var(--bl-full); background: rgba(255, 255, 255, .45); transition: all .25s ease; }
.bl-slide__dot.is-on { width: 24px; background: #fff; }

/* ---------- 全站数据：弱化为普通卡片（用户：不属于重要板块，不需要太突出） ---------- */
.bl-statgrid--plain { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bl-statgrid--plain .bl-statgrid__cell { padding: 10px; background: var(--bl-surface-2); border-radius: var(--bl-radius-xs); text-align: center; color: var(--bl-text-2); }
.bl-statgrid--plain .bl-statgrid__cell i { font-size: 15px; color: var(--bl-text-3); }
.bl-statgrid--plain .bl-statgrid__cell b { display: block; margin-top: 1px; font-size: 16px; font-weight: 800; color: var(--bl-text); }
.bl-statgrid--plain .bl-statgrid__cell small { font-size: 12px; color: var(--bl-text-3); }

/* ---------- 文章页右栏：作者卡 ---------- */
.bl-authorcard { text-align: center; }
.bl-authorcard__ava { width: 58px; height: 58px; margin: 0 auto 10px; border-radius: var(--bl-full); display: flex; align-items: center; justify-content: center; font-size: 23px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--bl-primary), #38a0ff); box-shadow: 0 8px 20px rgba(11, 95, 216, .26); }
.bl-authorcard__name { font-size: 16px; font-weight: 800; }
.bl-authorcard__name i { margin-left: 4px; font-size: 14px; color: var(--bl-primary); }
.bl-authorcard__desc { margin-top: 4px; font-size: 13px; color: var(--bl-text-3); }
.bl-authorcard__stat { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 14px 0; }
.bl-authorcard__stat b { display: block; font-size: 18px; font-weight: 800; color: var(--bl-primary-deep); }
.bl-authorcard__stat small { font-size: 12px; color: var(--bl-text-3); }
.bl-authorcard__sep { width: 1px; height: 24px; background: var(--bl-line); }
.bl-authorcard__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--bl-primary), #2f7ae8); border-radius: var(--bl-full); box-shadow: 0 6px 16px rgba(11, 95, 216, .26); }
.bl-authorcard__btn:hover { color: #fff; transform: translateY(-1px); }

@media (max-width: 768px) {
  .bl-slide__track { height: 220px; }
  .bl-slide__body { padding: 18px 18px 22px; }
  .bl-slide__dots { right: 16px; bottom: 16px; }
}

/* ==========================================================================
   首页改版（用户要求）：近期热文图文卡 + 最新发布大图流 + 加载更多
   ========================================================================== */

/* ---------- 近期热文：图文卡网格（替代纯文字列表） ---------- */
.bl-hotcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bl-hotcard {
  position: relative; display: flex; gap: 14px; padding: 12px;
  background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: var(--bl-radius);
  box-shadow: var(--bl-shadow-sm); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bl-hotcard:hover { transform: translateY(-2px); box-shadow: var(--bl-shadow); border-color: var(--bl-primary-line); }
.bl-hotcard__thumb { flex: none; width: 118px; height: 84px; border-radius: var(--bl-radius-xs); overflow: hidden; background: var(--bl-surface-2); }
.bl-hotcard__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .45s ease; }
.bl-hotcard:hover .bl-hotcard__thumb img { transform: scale(1.06); }
.bl-hotcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bl-hotcard__rank {
  position: absolute; top: -7px; left: -7px; z-index: 2; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; border-radius: 9px;
  background: linear-gradient(135deg, #ff8a3d, #ff5e52); box-shadow: 0 4px 10px rgba(255, 94, 82, .35);
}
.bl-hotcard:nth-child(2) .bl-hotcard__rank { background: linear-gradient(135deg, #7f9cc4, #5b7ba8); box-shadow: 0 4px 10px rgba(91, 123, 168, .35); }
.bl-hotcard:nth-child(3) .bl-hotcard__rank { background: linear-gradient(135deg, #d9a26a, #c07f45); box-shadow: 0 4px 10px rgba(192, 127, 69, .35); }
.bl-hotcard:nth-child(n+4) .bl-hotcard__rank { background: var(--bl-surface-2); color: var(--bl-text-3); box-shadow: none; }
.bl-hotcard__title { font-size: 14.5px; font-weight: 700; line-height: 1.5; margin-bottom: 6px; }
.bl-hotcard__title a { color: var(--bl-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-hotcard:hover .bl-hotcard__title a { color: var(--bl-primary); }
.bl-hotcard__meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12.5px; color: var(--bl-text-3); }
.bl-hotcard__meta span { display: inline-flex; align-items: center; gap: 4px; }
.bl-hotcard__meta i { font-size: 14px; color: #9aa8bd; }

/* ---------- 加载更多 ---------- */
.bl-loadmore { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px 0 6px; }
.bl-loadmore__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 30px;
  font-size: 15px; font-weight: 600; color: var(--bl-primary);
  background: var(--bl-surface); border: 1px solid var(--bl-primary-line);
  border-radius: var(--bl-full); box-shadow: var(--bl-shadow-sm);
  transition: all .22s ease;
}
.bl-loadmore__btn:hover { color: #fff; background: var(--bl-primary); border-color: var(--bl-primary); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(11, 95, 216, .26); }
.bl-loadmore__btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.bl-loadmore__done { font-size: 13.5px; color: var(--bl-text-3); }
.bl-loadmore__spin { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: bl-spin .7s linear infinite; }
@keyframes bl-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .bl-hotcards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 500px) {
  .bl-hotcard__thumb { width: 96px; height: 68px; }
  .bl-hotcard__title { font-size: 14.5px; }
}

/* ==========================================================================
   文章页巡检修复
   ========================================================================== */

/* 搜索浮层标题：不再用 h2（避免污染文章页标题大纲） */
.bl-search__heading { margin: 0; font-size: 18px; font-weight: 700; }

/* 上下篇：只有一项时（首篇无上一篇 / 末篇无下一篇）占满整行，避免错位到左列 */
.bl-singlepage > a:only-child { grid-column: 1 / -1; }
.bl-singlepage > a:first-child:nth-last-child(2) { grid-column: 1; }
.bl-singlepage > a:nth-child(2):last-child { grid-column: 2; }

/* 正文空段落折叠（源文常用   堆间距，会形成大片留白） */
.bl-art__body p.bl-p-empty { display: none; }

/* 正文图片：加宽高比占位，降低 CLS（老文章图片没有 width/height） */
.bl-art__body img { height: auto; background: var(--bl-surface-2); }

/* ---------- 正文图片点击放大（lightbox） ---------- */
.bl-art__body img.bl-zoomable { cursor: zoom-in; }
.bl-lightbox {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 4vh 3vw; background: rgba(10, 18, 32, .9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s ease;
}
.bl-lightbox.is-open { opacity: 1; }
.bl-lightbox img { max-width: 100%; max-height: 92vh; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); cursor: zoom-out; transform: scale(.97); transition: transform .22s cubic-bezier(.22,.68,.36,1); }
.bl-lightbox.is-open img { transform: none; }
.bl-lightbox__close {
  position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; font-size: 28px; line-height: 1;
  color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--bl-full); transition: background .2s ease;
}
.bl-lightbox__close:hover { background: var(--bl-primary); border-color: var(--bl-primary); }
@media print { .bl-lightbox { display: none !important; } }

/* ---------- Mermaid 图表容器 ---------- */
.bl-art__body .mermaid { margin: 1.4em 0; text-align: center; overflow-x: auto; }
.bl-art__body .mermaid svg { max-width: 100%; height: auto; }

/* ---------- 相关阅读：卡片网格（替代原来的竖排小图列表） ---------- */
.bl-relgrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bl-relcard2 {
  display: flex; gap: 12px; padding: 10px; background: var(--bl-surface);
  border: 1px solid var(--bl-line-2); border-radius: var(--bl-radius-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bl-relcard2:hover { transform: translateY(-2px); box-shadow: var(--bl-shadow); border-color: var(--bl-primary-line); }
.bl-relcard2__thumb { flex: none; width: 100px; height: 70px; border-radius: 8px; overflow: hidden; background: var(--bl-surface-2); }
.bl-relcard2__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .45s ease; }
.bl-relcard2:hover .bl-relcard2__thumb img { transform: scale(1.06); }
.bl-relcard2__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bl-relcard2__title { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--bl-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-relcard2:hover .bl-relcard2__title { color: var(--bl-primary); }
.bl-relcard2__meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: var(--bl-text-3); }
.bl-relcard2__meta em { font-style: normal; padding: 2px 9px; font-size: 12px; font-weight: 600; color: var(--bl-primary); background: var(--bl-primary-soft); border-radius: var(--bl-full); }
.bl-relcard2__meta span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 768px) {
  .bl-relgrid2 { grid-template-columns: minmax(0, 1fr); }
}

/* 文字空间微调（实测：相关阅读/热文卡的长标题在窄文字区被截断） */
.bl-hotcard__thumb { width: 104px; height: 76px; }
.bl-hotcard__title { font-size: 14px; }

@media (max-width: 768px) {
  /* 移动端相关阅读改为「图在上」竖卡，标题获得整行宽度，避免 2 行装不下 */
  .bl-relgrid2 { grid-template-columns: minmax(0, 1fr); }
  .bl-relcard2 { flex-direction: column; gap: 10px; }
  .bl-relcard2__thumb { width: 100%; height: 150px; }
  .bl-relcard2__title { font-size: 15px; }
}

/* 列表卡片底部的标签胶囊行 */
.bl-post__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* 加载完毕提示文字（评论区 / 搜索结果共用） */
.bl-cmore__done { font-size: 13.5px; color: var(--bl-text-3); }

/* 文章标签胶囊（GetTagChips / 列表卡片底部）与排序条 hover */
.bl-post__tag {
  display: inline-flex; align-items: center; padding: 2px 10px; font-size: 12px;
  color: var(--bl-text-2); background: var(--bl-surface-2); border-radius: var(--bl-full);
  border: 1px solid transparent;
}
.bl-post__tag:hover { border-color: var(--bl-primary-line); color: var(--bl-primary); }
.bl-cswitch__btn:hover { color: var(--bl-primary); }

/* 搜索结果数强调 */
.bl-shero__num { font-weight: 800; color: var(--bl-primary); }