/* ==========================================================================
   Single Article — Three-Column Layout · 大厂级文章详情页
   Day: Claude warm parchment (Georgia heading + terracotta)
   Night: Binance dark canvas (Inter + gold)
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES — Design Tokens
   ========================================================================== */
:root {
  /* Claude Day Theme */
  --bn-article-accent: #c96442;
  --bn-article-accent-hover: #b5573a;
  --bn-article-accent-light: rgba(201, 100, 66, 0.08);
  --bn-article-accent-soft: rgba(201, 100, 66, 0.12);
  --bn-article-accent-ring: rgba(201, 100, 66, 0.25);
  --bn-article-accent-gradient: linear-gradient(135deg, #c96442 0%, #d97757 45%, #c9a84c 100%);
  --bn-article-accent-gradient-soft: linear-gradient(135deg, rgba(201, 100, 66, 0.12), rgba(201, 168, 76, 0.08));
  --bn-article-bg: #f5f4ed;
  --bn-article-surface: #faf9f5;
  --bn-article-surface-elevated: #ffffff;
  --bn-article-surface-hover: #f5f4ed;
  --bn-article-text: #141413;
  --bn-article-text-secondary: #5e5d59;
  --bn-article-text-muted: #87867f;
  --bn-article-border: #f0eee6;
  --bn-article-border-strong: #e8e6dc;
  --bn-article-radius: 14px;
  --bn-article-radius-sm: 10px;
  --bn-article-radius-xs: 6px;
  --bn-article-radius-pill: 9999px;
  --bn-article-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  --bn-article-shadow-hover: 0 0 0 1px rgba(201, 100, 66, 0.2);
  --bn-article-shadow-elevated: 0 4px 24px rgba(0, 0, 0, 0.05);
  --bn-article-shadow-card: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px rgba(20, 20, 19, 0.05);
  --bn-article-shadow-card-hover: 0 2px 4px rgba(201, 100, 66, 0.08), 0 8px 28px rgba(201, 100, 66, 0.12);
  --bn-article-shadow-float: 0 8px 32px rgba(20, 20, 19, 0.08), 0 2px 8px rgba(20, 20, 19, 0.04);
  --bn-article-glow: 0 0 0 4px rgba(201, 100, 66, 0.12);

  /* Typography */
  --bn-article-font-heading: Georgia, "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "Times New Roman", serif;
  --bn-article-font-body: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --bn-article-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bn-article-prose-fs: 17px;
  --bn-article-prose-fs-mobile: 16px;
  --bn-article-prose-lh: 1.85;
  --bn-article-prose-lh-mobile: 1.8;
  --bn-article-prose-width: 760px;

  /* Layout */
  --bn-article-layout-gap: 32px;
  --bn-article-sidebar-width: 260px;
  --bn-article-toc-width: 280px;
  --bn-article-max-width: 1440px;
  --bn-article-footer-bg: #f0eee6;
  --bn-article-footer-bg-strong: #e8e6dc;

  /* Transitions */
  --bn-article-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bn-article-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --bn-article-dur-fast: 0.18s;
  --bn-article-dur: 0.28s;
  --bn-article-dur-slow: 0.6s;
}

[data-bs-theme="dark"] {
  /* Binance Night Theme */
  --bn-article-accent: #fcd535;
  --bn-article-accent-hover: #f0b90b;
  --bn-article-accent-light: rgba(252, 213, 53, 0.08);
  --bn-article-accent-soft: rgba(252, 213, 53, 0.14);
  --bn-article-accent-ring: rgba(252, 213, 53, 0.25);
  --bn-article-accent-gradient: linear-gradient(135deg, #fcd535 0%, #f0b90b 55%, #d97757 100%);
  --bn-article-accent-gradient-soft: linear-gradient(135deg, rgba(252, 213, 53, 0.14), rgba(240, 185, 11, 0.08));
  --bn-article-bg: #0b0e11;
  --bn-article-surface: #1e2329;
  --bn-article-surface-elevated: #252b33;
  --bn-article-surface-hover: #2b3139;
  --bn-article-text: #eaecef;
  --bn-article-text-secondary: #929aa5;
  --bn-article-text-muted: #707a8a;
  --bn-article-border: #2b3139;
  --bn-article-border-strong: #363c46;
  --bn-article-radius: 10px;
  --bn-article-radius-sm: 8px;
  --bn-article-radius-xs: 5px;
  --bn-article-shadow: none;
  --bn-article-shadow-hover: 0 0 0 1px rgba(252, 213, 53, 0.25);
  --bn-article-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);
  --bn-article-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --bn-article-shadow-card-hover: 0 0 0 1px rgba(252, 213, 53, 0.3), 0 8px 28px rgba(0, 0, 0, 0.45);
  --bn-article-shadow-float: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  --bn-article-glow: 0 0 0 4px rgba(252, 213, 53, 0.15);
  --bn-article-footer-bg: #161a1e;
  --bn-article-footer-bg-strong: #1e2329;
  --bn-article-font-heading: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --bn-article-prose-lh: 1.8;
  --bn-article-prose-lh-mobile: 1.75;
  --bn-article-layout-gap: 28px;
}

/* Global focus ring for single-post UI */
.bn-article-layout :focus-visible,
.bn-post-hero :focus-visible,
.bn-article-footer :focus-visible,
.bn-read-progress :focus-visible,
.bn-floating-share :focus-visible,
.bn-back-top:focus-visible {
  outline: 2px solid var(--bn-article-accent);
  outline-offset: 3px;
  border-radius: var(--bn-article-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  .bn-article-layout *,
  .bn-post-hero *,
  .bn-article-footer *,
  .bn-read-progress *,
  .bn-floating-share *,
  .bn-back-top,
  .bn-toc-sticky,
  .bn-sidebar-sticky {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   2. HERO — Gaussian Blur Headline Canvas (大厂级)
   ========================================================================== */
.bn-post-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 20px 56px;
  margin-bottom: 0;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.bn-post-hero__bg {
  position: absolute;
  inset: -16px;
  background: var(--hero-bg) center / cover no-repeat;
  filter: blur(2.4px) saturate(1.15);
  transform: scale(1.04);
  z-index: 0;
}

.bn-post-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 10%, rgba(201, 100, 66, 0.28), transparent 55%),
    radial-gradient(circle at 82% 90%, rgba(252, 213, 53, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
  z-index: 1;
}
[data-bs-theme="dark"] .bn-post-hero__overlay {
  background:
    radial-gradient(circle at 18% 10%, rgba(252, 213, 53, 0.16), transparent 55%),
    radial-gradient(circle at 82% 90%, rgba(240, 185, 11, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.65) 100%);
}

.bn-post-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Breadcrumb — glass pill at top-left */
.bn-post-breadcrumb {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 3;
  padding: 6px 14px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--bn-article-radius-pill);
  text-align: left;
}
.bn-post-breadcrumb .breadcrumb {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  margin-bottom: 0;
  padding: 0;
  background: transparent;
}
.bn-post-breadcrumb .breadcrumb a {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  transition: color 0.2s;
}
.bn-post-breadcrumb .breadcrumb a:hover { color: #fff; }
.bn-post-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,0.4);
}
.bn-post-breadcrumb .breadcrumb-item.active {
  color: rgba(255,255,255,0.55);
}

/* Category chip above title */
.bn-post-hero__cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  margin-bottom: 18px;
  border-radius: var(--bn-article-radius-pill);
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s var(--bn-article-ease), transform 0.2s var(--bn-article-ease);
}
.bn-post-hero__cat-chip:hover {
  background: var(--bn-article-accent-gradient);
  color: #fff;
  transform: translateY(-1px);
  border-color: transparent;
}
.bn-post-hero__cat-chip i { font-size: 11px; opacity: 0.9; }

/* Title */
.bn-post-hero__title {
  font-family: var(--bn-article-font-heading);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 auto 22px;
  max-width: 20ch;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.35);
}
[data-bs-theme="dark"] .bn-post-hero__title {
  font-family: var(--bn-article-font-heading);
  font-weight: 700;
}

/* Byline row — author chip + follow + read time */
.bn-post-hero__byline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 18px;
  padding: 6px 8px 6px 4px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--bn-article-radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bn-post-hero__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}
.bn-post-hero__author:hover { color: #fff; }
.bn-post-hero__author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.4);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.bn-post-hero__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bn-post-hero__author-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.bn-post-hero__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}
.bn-post-hero__read-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  font-weight: 500;
}
.bn-post-hero__read-time i { font-size: 11px; opacity: 0.9; }

/* Hero follow button — override bn-follow-btn for glass look */
.bn-post-hero__byline .bn-follow-btn--hero {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  padding: 3px 12px;
  font-size: 11px;
  min-width: 54px;
}
.bn-post-hero__byline .bn-follow-btn--hero:hover {
  background: var(--bn-article-accent);
  border-color: transparent;
  color: #fff;
}
.bn-post-hero__byline .bn-follow-btn--hero.is-following {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.85);
}

/* Secondary meta (date · views · comments) */
.bn-post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 22px;
}
.bn-post-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bn-post-hero__meta i { font-size: 12px; opacity: 0.85; }
.bn-post-hero__meta a { color: rgba(255,255,255,0.7); text-decoration: none; }
.bn-post-hero__meta a:hover { color: #fff; }
.bn-post-hero__edit a {
  color: rgba(255,255,255,0.45);
  font-size: 11px;
}

/* Actions (fav, like) */
.bn-post-hero__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}
.bn-hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--bn-article-radius-pill);
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s var(--bn-article-ease);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.22);
  position: relative;
  overflow: hidden;
}
.bn-hero-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bn-article-accent-gradient);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: -1;
}
.bn-hero-action:hover {
  background: transparent;
  transform: translateY(-2px);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(201, 100, 66, 0.35);
}
.bn-hero-action:hover::before { opacity: 1; }
.bn-hero-action i { font-size: 14px; }
.bn-hero-action__num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tag pills with # prefix */
.bn-post-hero__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.bn-tag-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 5px 14px;
  border-radius: var(--bn-article-radius-pill);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s var(--bn-article-ease);
  border: 1px solid rgba(255,255,255,0.14);
}
.bn-tag-pill__hash {
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  margin-right: 1px;
}
.bn-tag-pill:hover {
  background: rgba(255,255,255,0.26);
  color: #fff;
  transform: translateY(-1px);
}
.bn-tag-pill:hover .bn-tag-pill__hash { color: rgba(255,255,255,0.85); }

/* ==========================================================================
   3. THREE-COLUMN GRID LAYOUT
   ========================================================================== */
.bn-article-layout {
  display: grid;
  grid-template-columns: var(--bn-article-sidebar-width) minmax(0, 1fr) var(--bn-article-toc-width);
  gap: var(--bn-article-layout-gap);
  max-width: var(--bn-article-max-width);
  margin: 0 auto;
  padding: 32px 16px 60px;
}

/* Hide TOC content when no headings — keep grid columns intact so
   article width and sidebar position stay unchanged (class added by toc-spy.js) */
.bn-article-layout.no-toc .bn-article-layout__toc {
  visibility: hidden;
  pointer-events: none;
}

/* Defensive: if article content has stray closing tags that push elements
   out of __main into the grid, place them in the content column until JS repairs */
.bn-article-layout > *:not(.bn-article-layout__toc):not(.bn-article-layout__main):not(.bn-article-layout__sidebar) {
  grid-column: 2;
}

/* ==========================================================================
   4. RIGHT TOC COLUMN · progress track · section numbering · mobile drawer
   ========================================================================== */

/* Fallback: hide TOC if displaced outside the grid by stray </div> tags in
   article content. JS repairLayout() moves it back and this rule no longer
   applies once the element is a child of .bn-article-layout again. */
.bn-article-layout__toc:not(.bn-article-layout > *) {
  display: none;
}

.bn-article-layout__toc {
  grid-column: 3;
  min-width: 0;
  align-self: stretch;
}

.bn-toc-sticky {
  position: sticky;
  top: 16px;
  background: var(--bn-article-surface);
  border: 1px solid var(--bn-article-border);
  border-radius: var(--bn-article-radius);
  padding: 22px 20px 18px;
  box-shadow: var(--bn-article-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-bs-theme="dark"] .bn-toc-sticky {
  background: var(--bn-article-surface);
  border-color: var(--bn-article-border);
  box-shadow: none;
}

.bn-toc-widget {
  padding: 0;
}

.bn-toc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bn-article-border);
}
.bn-toc-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--bn-article-accent-gradient);
  flex-shrink: 0;
}
.bn-toc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--bn-article-text);
  margin: 0;
  padding: 0;
  letter-spacing: 0.02em;
  font-family: var(--bn-article-font-body);
}

.bn-toc-body {
  position: relative;
  padding-left: 18px;
}

/* Vertical progress track (left rail) */
.bn-toc-track {
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--bn-article-border-strong);
  border-radius: 2px;
  overflow: hidden;
}
.bn-toc-track__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bn-article-accent-gradient);
  transform-origin: 0 0;
  transform: scaleY(0.04);
  transition: transform 0.4s var(--bn-article-ease);
  border-radius: 2px;
}

.bn-toc-list {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--bn-article-border-strong) transparent;
  padding-right: 2px;
}
.bn-toc-list::-webkit-scrollbar { width: 4px; height: 4px; }
.bn-toc-list::-webkit-scrollbar-track { background: transparent; }
.bn-toc-list::-webkit-scrollbar-thumb {
  background: var(--bn-article-border-strong);
  border-radius: 4px;
}
.bn-toc-list::-webkit-scrollbar-thumb:hover { background: var(--bn-article-text-muted); }

.bn-toc-list.h-navList {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
[data-bs-theme="dark"] .bn-toc-list.h-navList { background: none; border: none; }

.bn-toc-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bn-toc-list li { margin: 0; padding: 0; }

.bn-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 8px 7px 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bn-article-text-secondary);
  text-decoration: none;
  transition: color var(--bn-article-dur-fast) var(--bn-article-ease),
              background var(--bn-article-dur-fast) var(--bn-article-ease);
  border-radius: var(--bn-article-radius-xs);
  position: relative;
}

.bn-toc-list a::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bn-article-surface);
  border: 2px solid var(--bn-article-border-strong);
  transform: translateY(-50%) scale(0.7);
  transition: all var(--bn-article-dur-fast) var(--bn-article-ease);
  z-index: 1;
}

.bn-toc-num {
  display: inline-block;
  min-width: 28px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bn-article-text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  transition: color var(--bn-article-dur-fast) var(--bn-article-ease);
}
.bn-toc-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.bn-toc-list a:hover {
  color: var(--bn-article-text);
  background: var(--bn-article-accent-light);
}
.bn-toc-list a:hover::before {
  background: var(--bn-article-text-muted);
  border-color: var(--bn-article-text-muted);
  transform: translateY(-50%) scale(0.85);
}
.bn-toc-list a:hover .bn-toc-num { color: var(--bn-article-text-secondary); }

.bn-toc-list a.is-active,
.bn-toc-list li.active a {
  color: var(--bn-article-accent);
  font-weight: 600;
  background: var(--bn-article-accent-light);
}
.bn-toc-list a.is-active::before,
.bn-toc-list li.active a::before {
  background: var(--bn-article-accent);
  border-color: var(--bn-article-accent);
  transform: translateY(-50%) scale(1);
  box-shadow: 0 0 0 3px var(--bn-article-accent-light);
}
.bn-toc-list a.is-active .bn-toc-num,
.bn-toc-list li.active a .bn-toc-num {
  color: var(--bn-article-accent);
}

.bn-toc-list .nav-h3 a,
.bn-toc-list li[data-level="3"] a {
  padding-left: 24px;
  font-size: 12.5px;
}
.bn-toc-list .nav-h3 a .bn-toc-num,
.bn-toc-list li[data-level="3"] a .bn-toc-num {
  min-width: 26px;
  font-weight: 600;
}
.bn-toc-list .nav-h4 a,
.bn-toc-list li[data-level="4"] a {
  padding-left: 40px;
  font-size: 12px;
  color: var(--bn-article-text-muted);
}

.bn-toc-hidden-in-content,
.bn-article-layout__main .h-navList:not(.bn-toc-list),
.bn-article-layout__sidebar .h-navList:not(.bn-toc-list) {
  display: none !important;
}

/* Mobile drawer variant ----------------------------------------------------- */
@media (max-width: 991.98px) {
  .bn-article-layout__toc {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 320px;
    max-width: 84vw;
    background: var(--bn-article-bg);
    z-index: 1050;
    transform: translateX(105%);
    transition: transform 0.32s var(--bn-article-ease);
    display: block !important;
    padding: 80px 16px 16px;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
  }
  .bn-article-layout__toc.is-open { transform: translateX(0); }
  .bn-article-layout__toc .bn-toc-sticky {
    position: static;
    box-shadow: none;
    background: var(--bn-article-surface);
    padding: 18px 18px 14px;
  }
  body.bn-toc-drawer-open { overflow: hidden; }
  body.bn-toc-drawer-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
    animation: bn-toc-backdrop-in 0.24s var(--bn-article-ease);
  }
  @keyframes bn-toc-backdrop-in {
    from { opacity: 0; } to { opacity: 1; }
  }
  .bn-toc-toggle { display: inline-flex !important; }
}

/* ==========================================================================
   5. CENTER ARTICLE — FRAMELESS · 大厂级 prose system
   ========================================================================== */
.bn-article-layout__main {
  grid-column: 2;
  min-width: 0;
  overflow: visible;
}

/* Neutralize any card wrapping injected by parent theme */
.bn-article-layout__main .card,
.bn-article-layout__main > .card {
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.bn-article-layout__main .card-body { padding: 0; }

/* Body prose — the reading canvas */
.bn-article-layout__main .entry-content,
.bn-article-layout__main .post-content {
  font-family: var(--bn-article-font-body);
  font-size: var(--bn-article-prose-fs);
  line-height: var(--bn-article-prose-lh);
  color: var(--bn-article-text);
  padding: 0;
  word-break: break-word;
  hyphens: auto;
  counter-reset: bn-h2 bn-h3;
}
[data-bs-theme="dark"] .bn-article-layout__main .entry-content,
[data-bs-theme="dark"] .bn-article-layout__main .post-content {
  color: var(--bn-article-text);
}

/* First paragraph drop-cap (opt-in; paragraphs may opt-in with .bn-dropcap
   in the editor if desired — no forced drop-cap by default because lots of
   articles start with a decorative image or lead paragraph). */
.bn-article-layout__main .entry-content > p.bn-dropcap:first-letter,
.bn-article-layout__main .post-content > p.bn-dropcap:first-letter {
  float: left;
  font-family: var(--bn-article-font-heading);
  font-size: 3.2em;
  line-height: 0.9;
  padding: 0.08em 0.14em 0 0;
  margin: 0.12em 0.1em 0 0;
  color: var(--bn-article-accent);
  font-weight: 700;
}

/* Headings --------------------------------------------------------------- */
.bn-article-layout__main .entry-content h2,
.bn-article-layout__main .post-content h2 {
  font-family: var(--bn-article-font-heading);
  font-size: clamp(1.4rem, 0.9rem + 0.9vw, 1.65rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--bn-article-text);
  margin: 2.4em 0 0.9em;
  padding-left: 16px;
  position: relative;
  counter-increment: bn-h2;
  counter-reset: bn-h3;
  border-bottom: none;
}
.bn-article-layout__main .entry-content h2::before,
.bn-article-layout__main .post-content h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 3px;
  background: var(--bn-article-accent-gradient);
}

.bn-article-layout__main .entry-content h3,
.bn-article-layout__main .post-content h3 {
  font-family: var(--bn-article-font-heading);
  font-size: clamp(1.15rem, 0.9rem + 0.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--bn-article-text);
  margin: 2em 0 0.7em;
  padding-left: 18px;
  position: relative;
  counter-increment: bn-h3;
  border-bottom: none;
}
.bn-article-layout__main .entry-content h3::before,
.bn-article-layout__main .post-content h3::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bn-article-accent);
  box-shadow: 0 0 0 4px var(--bn-article-accent-light);
}

.bn-article-layout__main .entry-content h4,
.bn-article-layout__main .post-content h4 {
  font-family: var(--bn-article-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bn-article-text);
  margin: 1.6em 0 0.5em;
  border-bottom: none;
}

.bn-article-layout__main .entry-content h5,
.bn-article-layout__main .post-content h5,
.bn-article-layout__main .entry-content h6,
.bn-article-layout__main .post-content h6 {
  font-family: var(--bn-article-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--bn-article-text-secondary);
  margin: 1.4em 0 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Paragraphs + lead ------------------------------------------------------ */
.bn-article-layout__main .entry-content p,
.bn-article-layout__main .post-content p {
  margin: 0 0 1.25em;
}
.bn-article-layout__main .entry-content p.lead,
.bn-article-layout__main .post-content p.lead {
  font-size: 1.12em;
  color: var(--bn-article-text-secondary);
  border-left: 3px solid var(--bn-article-accent);
  padding-left: 16px;
  margin-left: 0;
  margin-bottom: 1.6em;
}

/* Strong + emphasis */
.bn-article-layout__main .entry-content strong,
.bn-article-layout__main .post-content strong {
  font-weight: 700;
  color: var(--bn-article-text);
  background: linear-gradient(180deg, transparent 60%, var(--bn-article-accent-light) 60%);
  padding: 0 2px;
}
.bn-article-layout__main .entry-content em,
.bn-article-layout__main .post-content em {
  font-style: italic;
  color: var(--bn-article-text-secondary);
}
.bn-article-layout__main .entry-content mark,
.bn-article-layout__main .post-content mark {
  background: var(--bn-article-accent-soft);
  color: var(--bn-article-text);
  padding: 0 4px;
  border-radius: var(--bn-article-radius-xs);
}

/* Links ------------------------------------------------------------------ */
.bn-article-layout__main .entry-content a,
.bn-article-layout__main .post-content a {
  color: var(--bn-article-accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s var(--bn-article-ease), color 0.2s;
  padding-bottom: 1px;
}
.bn-article-layout__main .entry-content a:hover,
.bn-article-layout__main .post-content a:hover {
  color: var(--bn-article-accent-hover);
  background-size: 100% 2px;
}

/* Lists ------------------------------------------------------------------ */
.bn-article-layout__main .entry-content ul,
.bn-article-layout__main .post-content ul,
.bn-article-layout__main .entry-content ol,
.bn-article-layout__main .post-content ol {
  margin: 0 0 1.3em;
  padding-left: 1.6em;
}
.bn-article-layout__main .entry-content li,
.bn-article-layout__main .post-content li {
  margin-bottom: 0.45em;
  padding-left: 0.2em;
}
.bn-article-layout__main .entry-content ul > li::marker,
.bn-article-layout__main .post-content ul > li::marker {
  color: var(--bn-article-accent);
}
.bn-article-layout__main .entry-content ol > li::marker,
.bn-article-layout__main .post-content ol > li::marker {
  color: var(--bn-article-accent);
  font-weight: 700;
}
.bn-article-layout__main .entry-content li > p,
.bn-article-layout__main .post-content li > p {
  margin-bottom: 0.4em;
}

/* Blockquote — large quote mark ------------------------------------------ */
.bn-article-layout__main .entry-content blockquote,
.bn-article-layout__main .post-content blockquote {
  position: relative;
  background: var(--bn-article-accent-light);
  border-left: 4px solid var(--bn-article-accent);
  padding: 18px 22px 18px 56px;
  margin: 1.8em 0;
  border-radius: 0 var(--bn-article-radius-sm) var(--bn-article-radius-sm) 0;
  font-size: 0.96em;
  line-height: 1.75;
  color: var(--bn-article-text-secondary);
  font-style: normal;
}
.bn-article-layout__main .entry-content blockquote::before,
.bn-article-layout__main .post-content blockquote::before {
  content: "\201C";
  position: absolute;
  left: 14px;
  top: 2px;
  font-family: var(--bn-article-font-heading);
  font-size: 62px;
  line-height: 1;
  color: var(--bn-article-accent);
  opacity: 0.4;
  font-weight: 700;
  pointer-events: none;
}
.bn-article-layout__main .entry-content blockquote p:last-child,
.bn-article-layout__main .post-content blockquote p:last-child { margin-bottom: 0; }
.bn-article-layout__main .entry-content blockquote cite,
.bn-article-layout__main .post-content blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-style: normal;
  color: var(--bn-article-text-muted);
}
.bn-article-layout__main .entry-content blockquote cite::before,
.bn-article-layout__main .post-content blockquote cite::before { content: '— '; }

[data-bs-theme="dark"] .bn-article-layout__main .entry-content blockquote,
[data-bs-theme="dark"] .bn-article-layout__main .post-content blockquote {
  background: var(--bn-article-surface);
  border-color: var(--bn-article-accent);
  box-shadow: inset 0 0 0 1px var(--bn-article-border);
  color: var(--bn-article-text);
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-content blockquote span[style*="color"],
[data-bs-theme="dark"] .bn-article-layout__main .entry-content blockquote .has-inline-color,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content blockquote font[color],
[data-bs-theme="dark"] .bn-article-layout__main .post-content blockquote span[style*="color"],
[data-bs-theme="dark"] .bn-article-layout__main .post-content blockquote .has-inline-color,
[data-bs-theme="dark"] .bn-article-layout__main .post-content blockquote font[color] {
  color: var(--bn-article-text) !important;
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-content blockquote strong,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content blockquote b,
[data-bs-theme="dark"] .bn-article-layout__main .post-content blockquote strong,
[data-bs-theme="dark"] .bn-article-layout__main .post-content blockquote b {
  color: var(--bn-article-text);
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-content blockquote cite,
[data-bs-theme="dark"] .bn-article-layout__main .post-content blockquote cite {
  color: var(--bn-article-text-muted);
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="background"],
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="border"],
[data-bs-theme="dark"] .bn-article-layout__main .entry-content .has-background,
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="background"],
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="border"],
[data-bs-theme="dark"] .bn-article-layout__main .post-content .has-background {
  background: var(--bn-article-surface) !important;
  border-color: var(--bn-article-border-strong) !important;
  color: var(--bn-article-text) !important;
  box-shadow: inset 0 0 0 1px var(--bn-article-border);
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="background"] span[style*="color"],
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="background"] .has-inline-color,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="background"] font[color],
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="background"] strong,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="background"] b,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="border"] span[style*="color"],
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="border"] .has-inline-color,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="border"] font[color],
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="border"] strong,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="border"] b,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content .has-background span[style*="color"],
[data-bs-theme="dark"] .bn-article-layout__main .entry-content .has-background .has-inline-color,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content .has-background font[color],
[data-bs-theme="dark"] .bn-article-layout__main .entry-content .has-background strong,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content .has-background b,
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="background"] span[style*="color"],
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="background"] .has-inline-color,
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="background"] font[color],
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="background"] strong,
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="background"] b,
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="border"] span[style*="color"],
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="border"] .has-inline-color,
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="border"] font[color],
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="border"] strong,
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="border"] b,
[data-bs-theme="dark"] .bn-article-layout__main .post-content .has-background span[style*="color"],
[data-bs-theme="dark"] .bn-article-layout__main .post-content .has-background .has-inline-color,
[data-bs-theme="dark"] .bn-article-layout__main .post-content .has-background font[color],
[data-bs-theme="dark"] .bn-article-layout__main .post-content .has-background strong,
[data-bs-theme="dark"] .bn-article-layout__main .post-content .has-background b {
  color: var(--bn-article-text) !important;
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="background"] a,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content :is(p, div)[style*="border"] a,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content .has-background a,
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="background"] a,
[data-bs-theme="dark"] .bn-article-layout__main .post-content :is(p, div)[style*="border"] a,
[data-bs-theme="dark"] .bn-article-layout__main .post-content .has-background a {
  color: var(--bn-article-accent) !important;
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-content [role="alert"],
[data-bs-theme="dark"] .bn-article-layout__main .post-content [role="alert"] {
  background: var(--bn-article-surface) !important;
  border-color: var(--bn-article-border-strong) !important;
  color: var(--bn-article-text) !important;
  box-shadow: inset 0 0 0 1px var(--bn-article-border);
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-content [role="alert"] :not(code):not(pre):not(a),
[data-bs-theme="dark"] .bn-article-layout__main .post-content [role="alert"] :not(code):not(pre):not(a) {
  color: var(--bn-article-text) !important;
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-content [role="alert"] strong,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content [role="alert"] b,
[data-bs-theme="dark"] .bn-article-layout__main .post-content [role="alert"] strong,
[data-bs-theme="dark"] .bn-article-layout__main .post-content [role="alert"] b {
  color: var(--bn-article-text) !important;
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-content [role="alert"] a,
[data-bs-theme="dark"] .bn-article-layout__main .post-content [role="alert"] a,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content [role="alert"] code,
[data-bs-theme="dark"] .bn-article-layout__main .post-content [role="alert"] code {
  color: var(--bn-article-accent) !important;
}

/* Inline code ------------------------------------------------------------ */
.bn-article-layout__main .entry-content code,
.bn-article-layout__main .post-content code {
  background: var(--bn-article-accent-light);
  color: var(--bn-article-accent);
  padding: 2px 7px;
  border-radius: var(--bn-article-radius-xs);
  font-family: var(--bn-article-font-mono);
  font-size: 0.88em;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Code blocks with copy button + lang chip ------------------------------- */
.bn-article-layout__main .entry-content .bn-code-block,
.bn-article-layout__main .post-content .bn-code-block,
.bn-article-layout__main .entry-content pre,
.bn-article-layout__main .post-content pre {
  margin: 1.8em 0;
}
.bn-code-block {
  position: relative;
  border-radius: var(--bn-article-radius-sm);
  overflow: hidden;
  border: 1px solid var(--bn-article-border);
  background: #0f1116;
  box-shadow: var(--bn-article-shadow-card);
}
[data-bs-theme="dark"] .bn-code-block {
  background: #0b0d11;
  border-color: var(--bn-article-border-strong);
}
.bn-code-block::before {
  /* mac-style traffic lights */
  content: '';
  position: absolute;
  top: 11px;
  left: 14px;
  width: 50px;
  height: 12px;
  background-image:
    radial-gradient(circle, #ff5f56 0 5px, transparent 6px),
    radial-gradient(circle, #ffbd2e 0 5px, transparent 6px),
    radial-gradient(circle, #27c93f 0 5px, transparent 6px);
  background-size: 18px 12px, 18px 12px, 18px 12px;
  background-position: 0 0, 16px 0, 32px 0;
  background-repeat: no-repeat;
  opacity: 0.9;
}
.bn-code-block pre {
  margin: 0;
  padding: 42px 20px 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow-x: auto;
  font-family: var(--bn-article-font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: #e5e7eb;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.bn-code-block pre::-webkit-scrollbar { height: 6px; }
.bn-code-block pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.bn-code-block pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border: none;
  font-size: inherit;
}
.bn-code-lang {
  position: absolute;
  top: 10px;
  left: 74px;
  font-family: var(--bn-article-font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
.bn-code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--bn-article-radius-xs);
  font-family: var(--bn-article-font-body);
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.18s var(--bn-article-ease);
}
.bn-code-copy:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
}
.bn-code-copy.is-copied {
  background: rgba(14, 203, 129, 0.22);
  color: #0ecb81;
  border-color: rgba(14, 203, 129, 0.35);
}
.bn-code-copy i { font-size: 11px; }

/* Fallback for <pre> not wrapped yet by JS (defer may not have run) */
.bn-article-layout__main .entry-content pre:not(.bn-code-block pre),
.bn-article-layout__main .post-content pre:not(.bn-code-block pre) {
  border-radius: var(--bn-article-radius-sm);
  background: #0f1116;
  border: 1px solid var(--bn-article-border);
  padding: 20px;
  overflow-x: auto;
  font-family: var(--bn-article-font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: #e5e7eb;
}

/* Images + figures ------------------------------------------------------- */
.bn-article-layout__main .entry-content img,
.bn-article-layout__main .post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bn-article-radius-sm);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 18px rgba(0,0,0,0.06);
  margin: 0.6em 0;
}
[data-bs-theme="dark"] .bn-article-layout__main .entry-content img,
[data-bs-theme="dark"] .bn-article-layout__main .post-content img {
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.bn-article-layout__main .entry-content figure,
.bn-article-layout__main .post-content figure {
  margin: 1.8em 0;
  text-align: center;
}
.bn-article-layout__main .entry-content figcaption,
.bn-article-layout__main .post-content figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--bn-article-text-muted);
  line-height: 1.6;
  text-align: center;
}

/* Horizontal rule — three-dot divider ------------------------------------ */
.bn-article-layout__main .entry-content hr,
.bn-article-layout__main .post-content hr {
  border: none;
  height: 28px;
  margin: 2.4em auto;
  background: transparent;
  position: relative;
  overflow: visible;
  text-align: center;
}
.bn-article-layout__main .entry-content hr::before,
.bn-article-layout__main .post-content hr::before {
  content: '· · ·';
  display: inline-block;
  font-size: 22px;
  letter-spacing: 0.6em;
  color: var(--bn-article-text-muted);
  opacity: 0.7;
  line-height: 28px;
}

/* Tables ----------------------------------------------------------------- */
.bn-article-layout__main .entry-content table,
.bn-article-layout__main .post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 14px;
  border: 1px solid var(--bn-article-border);
  border-radius: var(--bn-article-radius-sm);
  overflow: hidden;
  box-shadow: var(--bn-article-shadow-card);
}
.bn-article-layout__main .entry-content table th,
.bn-article-layout__main .post-content table th {
  background: var(--bn-article-surface-hover);
  color: var(--bn-article-text);
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bn-article-border-strong);
  text-align: left;
  white-space: nowrap;
}
.bn-article-layout__main .entry-content table td,
.bn-article-layout__main .post-content table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bn-article-border);
  color: var(--bn-article-text);
}
.bn-article-layout__main .entry-content table tr:last-child td,
.bn-article-layout__main .post-content table tr:last-child td {
  border-bottom: none;
}
.bn-article-layout__main .entry-content table tbody tr:hover,
.bn-article-layout__main .post-content table tbody tr:hover {
  background: var(--bn-article-accent-light);
}
[data-bs-theme="dark"] .bn-article-layout__main .entry-content table th,
[data-bs-theme="dark"] .bn-article-layout__main .post-content table th {
  background: var(--bn-article-surface-hover);
}

/* Keyboard + abbr ------------------------------------------------------- */
.bn-article-layout__main .entry-content kbd,
.bn-article-layout__main .post-content kbd {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 2px;
  background: var(--bn-article-surface);
  color: var(--bn-article-text);
  border: 1px solid var(--bn-article-border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--bn-article-font-mono);
  font-size: 0.82em;
  line-height: 1.4;
  vertical-align: 1px;
}
.bn-article-layout__main .entry-content abbr[title],
.bn-article-layout__main .post-content abbr[title] {
  border-bottom: 1px dashed var(--bn-article-text-muted);
  text-decoration: none;
  cursor: help;
}

/* Article header (if visible inside the card fallback) */
.bn-article-layout__main .article-header { margin-bottom: 24px; }
.bn-article-layout__main .article-header .post-title {
  font-family: var(--bn-article-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bn-article-text);
}

/* Tab navigation (post-content-new) */
.bn-article-layout__main .nav-tabs {
  border-bottom: 1px solid var(--bn-article-border);
  margin-bottom: 24px;
  gap: 4px;
}
.bn-article-layout__main .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--bn-article-text-secondary);
  font-weight: 600;
  padding: 10px 16px;
  font-size: 14px;
  transition: all 0.2s var(--bn-article-ease);
  background: transparent;
  border-radius: 0;
}
.bn-article-layout__main .nav-tabs .nav-link i { margin-right: 6px; }
.bn-article-layout__main .nav-tabs .nav-link:hover {
  color: var(--bn-article-accent);
  background: var(--bn-article-accent-light);
}
.bn-article-layout__main .nav-tabs .nav-link.active {
  color: var(--bn-article-accent);
  border-bottom-color: var(--bn-article-accent);
  background: transparent;
}

/* ==========================================================================
   6. ENTRY TAGS · # 前缀药丸
   ========================================================================== */
.bn-article-layout__main .entry-tags {
  margin: 2em 0 1.6em;
  padding: 20px 0 0;
  border-top: 1px dashed var(--bn-article-border-strong);
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.bn-article-layout__main .entry-tags > i {
  color: var(--bn-article-text-muted);
  font-size: 13px;
  margin-right: 4px;
}
.bn-article-layout__main .entry-tags a[rel="tag"],
.bn-article-layout__main .entry-tags .tag-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 5px 14px;
  border-radius: var(--bn-article-radius-pill);
  background: var(--bn-article-accent-light);
  color: var(--bn-article-accent);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  background-image: none;
  border: 1px solid transparent;
  margin: 0;
  transition: all 0.2s var(--bn-article-ease);
}
.bn-article-layout__main .entry-tags a[rel="tag"]::before,
.bn-article-layout__main .entry-tags .tag-links a::before {
  content: '#';
  color: var(--bn-article-text-muted);
  font-weight: 400;
  margin-right: 1px;
  opacity: 0.8;
  transition: color 0.2s;
}
.bn-article-layout__main .entry-tags a[rel="tag"]:hover,
.bn-article-layout__main .entry-tags .tag-links a:hover {
  background: var(--bn-article-accent);
  color: #fff;
  transform: translateY(-1px);
  background-size: 0 0;
}
[data-bs-theme="dark"] .bn-article-layout__main .entry-tags a[rel="tag"]:hover,
[data-bs-theme="dark"] .bn-article-layout__main .entry-tags .tag-links a:hover { color: #181a20; }
.bn-article-layout__main .entry-tags a[rel="tag"]:hover::before,
.bn-article-layout__main .entry-tags .tag-links a:hover::before {
  color: rgba(255,255,255,0.8);
}
[data-bs-theme="dark"] .bn-article-layout__main .entry-tags a[rel="tag"]:hover::before,
[data-bs-theme="dark"] .bn-article-layout__main .entry-tags .tag-links a:hover::before { color: rgba(24, 26, 32, 0.6); }

/* ==========================================================================
   7. ENTRY SOCIAL · 作者胶囊 + 互动计数按钮
   ========================================================================== */
.bn-article-layout__main .entry-social,
.bn-article-layout__main .bn-entry-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 2.2em 0 1.4em;
  padding: 20px 22px;
  background: var(--bn-article-surface);
  border: 1px solid var(--bn-article-border);
  border-radius: var(--bn-article-radius);
  box-shadow: var(--bn-article-shadow-card);
}

.bn-entry-social__author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.bn-entry-social__author-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  background-image: none;
}
.bn-entry-social__author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--bn-article-border);
  background: var(--bn-article-surface);
}
.bn-entry-social__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bn-entry-social__author-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bn-entry-social__author-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bn-article-text);
  line-height: 1.3;
}
.bn-entry-social__badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--bn-article-radius-xs);
  background: var(--bn-article-accent-light);
  color: var(--bn-article-accent);
  font-weight: 600;
}
.bn-entry-social__author-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--bn-article-text-muted);
  font-variant-numeric: tabular-nums;
}
.bn-entry-social__author-sub i { font-size: 11px; }
.bn-entry-social__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bn-article-text-muted);
  opacity: 0.6;
}

.bn-entry-social__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bn-article-layout__main .bn-entry-social__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--bn-article-radius-pill);
  background: var(--bn-article-bg);
  color: var(--bn-article-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--bn-article-border-strong);
  transition: all 0.2s var(--bn-article-ease);
  position: relative;
  background-image: none;
}
.bn-article-layout__main .bn-entry-social__btn:hover {
  border-color: var(--bn-article-accent);
  color: var(--bn-article-accent);
  background: var(--bn-article-accent-light);
  transform: translateY(-1px);
}
.bn-article-layout__main .bn-entry-social__btn.is-active {
  background: var(--bn-article-accent-light);
  border-color: var(--bn-article-accent);
  color: var(--bn-article-accent);
}
.bn-article-layout__main .bn-entry-social__btn i { font-size: 13px; }
.bn-article-layout__main .bn-entry-social__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  background: var(--bn-article-accent-light);
  color: var(--bn-article-accent);
  border-radius: var(--bn-article-radius-pill);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bn-article-layout__main .bn-entry-social__btn:hover .bn-entry-social__count,
.bn-article-layout__main .bn-entry-social__btn.is-active .bn-entry-social__count {
  background: var(--bn-article-accent);
  color: #fff;
}
[data-bs-theme="dark"] .bn-article-layout__main .bn-entry-social__btn:hover .bn-entry-social__count,
[data-bs-theme="dark"] .bn-article-layout__main .bn-entry-social__btn.is-active .bn-entry-social__count { color: #181a20; }

/* Legacy .entry-social (parent fallback that we no longer emit): keep
   generic pill look for safety if any plugin re-injects the structure. */
.bn-article-layout__main .entry-social:not(.bn-entry-social) a,
.bn-article-layout__main .entry-social:not(.bn-entry-social) button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--bn-article-radius-pill);
  font-size: 13px;
  transition: all 0.2s;
  text-decoration: none;
  border: 1px solid var(--bn-article-border-strong);
  background: transparent;
  color: var(--bn-article-text-secondary);
  cursor: pointer;
}

/* ==========================================================================
   8. COPYRIGHT NOTICE PANEL · icon ribbon + 正文栏内提示卡
   ========================================================================== */
.bn-article-layout__main .entry-copyright,
.bn-article-layout__main .single-copyright {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 2em 0 1.4em;
  padding: 16px 20px 16px 52px;
  border-radius: var(--bn-article-radius-sm);
  background: var(--bn-article-accent-light);
  font-size: 13px;
  line-height: 1.7;
  color: var(--bn-article-text-secondary);
  border: none;
}
.bn-article-layout__main .entry-copyright::before,
.bn-article-layout__main .single-copyright::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--bn-article-radius-sm) 0 0 var(--bn-article-radius-sm);
  background: var(--bn-article-accent-gradient);
}
.bn-article-layout__main .entry-copyright > i,
.bn-article-layout__main .single-copyright > i {
  position: absolute;
  left: 18px;
  top: 17px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bn-article-accent);
  color: #fff;
  font-size: 11px;
  margin-right: 0;
  box-shadow: 0 0 0 4px var(--bn-article-accent-light);
}
[data-bs-theme="dark"] .bn-article-layout__main .entry-copyright > i,
[data-bs-theme="dark"] .bn-article-layout__main .single-copyright > i { color: #181a20; }
.bn-article-layout__main .entry-copyright a,
.bn-article-layout__main .single-copyright a {
  color: var(--bn-article-accent);
  font-weight: 500;
  background-image: none;
}

/* ==========================================================================
   8b. Section divider — clean rule between content → footer modules
   ========================================================================== */
.bn-article-footer__inner > * + * {
  margin-top: 28px;
}

/* ==========================================================================
   9. PREV / NEXT NAVIGATION · 双卡片 with 缩略图 · 标签 · 日期
   ========================================================================== */
.bn-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0;
}
.bn-post-nav__card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--bn-article-surface);
  border: 1px solid var(--bn-article-border);
  border-radius: var(--bn-article-radius);
  text-decoration: none;
  background-image: none;
  color: var(--bn-article-text);
  transition: all 0.25s var(--bn-article-ease);
  box-shadow: var(--bn-article-shadow-card);
  min-height: 96px;
  overflow: hidden;
  position: relative;
}
.bn-post-nav__card--next {
  grid-template-columns: 1fr 96px;
  text-align: right;
}
.bn-post-nav__card--next .bn-post-nav__thumb { order: 2; }
.bn-post-nav__card--next .bn-post-nav__body { order: 1; align-items: flex-end; }
.bn-post-nav__card--empty {
  background: transparent;
  border: 1px dashed var(--bn-article-border-strong);
  box-shadow: none;
}
.bn-post-nav__card:hover {
  border-color: var(--bn-article-accent);
  box-shadow: var(--bn-article-shadow-card-hover);
  transform: translateY(-2px);
}
.bn-post-nav__card:hover .bn-post-nav__title { color: var(--bn-article-accent); }
.bn-post-nav__card:hover .bn-post-nav__thumb-arrow {
  opacity: 1;
  transform: scale(1);
}
.bn-post-nav__card:hover .bn-post-nav__thumb::after { opacity: 0.3; }

.bn-post-nav__thumb {
  position: relative;
  width: 96px;
  height: 72px;
  border-radius: var(--bn-article-radius-sm);
  background: var(--bn-article-bg) center / cover no-repeat;
  overflow: hidden;
  flex-shrink: 0;
}
.bn-post-nav__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bn-article-accent);
  opacity: 0;
  transition: opacity 0.25s;
}
.bn-post-nav__thumb--blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bn-article-accent-light);
  color: var(--bn-article-accent);
  font-size: 20px;
}
.bn-post-nav__thumb-arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.25s, transform 0.25s;
  z-index: 2;
}

.bn-post-nav__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bn-post-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bn-article-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bn-post-nav__label i { font-size: 9px; }
.bn-post-nav__card--next .bn-post-nav__label { justify-content: flex-end; }

.bn-post-nav__title {
  font-family: var(--bn-article-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--bn-article-text);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 0.22s var(--bn-article-ease);
  word-break: break-word;
}

.bn-post-nav__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--bn-article-text-muted);
  margin-top: 2px;
  flex-wrap: wrap;
}
.bn-post-nav__cat {
  display: inline-block;
  padding: 1px 8px;
  background: var(--bn-article-accent-light);
  color: var(--bn-article-accent);
  border-radius: var(--bn-article-radius-xs);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bn-post-nav__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bn-article-text-muted);
  opacity: 0.55;
}
.bn-post-nav__date i { font-size: 10px; margin-right: 3px; }

@media (max-width: 575.98px) {
  .bn-post-nav {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .bn-post-nav__card {
    grid-template-columns: 72px 1fr;
    text-align: left;
    min-height: 80px;
  }
  .bn-post-nav__card--next .bn-post-nav__thumb { order: 0; }
  .bn-post-nav__card--next .bn-post-nav__body { order: 0; align-items: flex-start; }
  .bn-post-nav__card--next .bn-post-nav__label { justify-content: flex-start; }
  .bn-post-nav__thumb { width: 72px; height: 56px; }
  .bn-post-nav__card--empty { display: none; }
}

/* ==========================================================================
   10. RELATED POSTS · 16:9 cover · 分类 chip · 2 行标题 · 日期 / 浏览
   ========================================================================== */
.bn-related-posts {
  margin: 0;
}
.bn-related-posts__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bn-article-border);
}
.bn-related-posts__badge {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--bn-article-accent-gradient);
  align-self: center;
  flex-shrink: 0;
}
.bn-related-posts__title {
  font-family: var(--bn-article-font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--bn-article-text);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.bn-related-posts__sub {
  font-size: 12.5px;
  color: var(--bn-article-text-muted);
  margin-left: auto;
}

.bn-related-posts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1199.98px) {
  .bn-related-posts__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .bn-related-posts__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 575.98px) {
  .bn-related-posts__grid { grid-template-columns: 1fr; }
}

.bn-related-card {
  display: flex;
  flex-direction: column;
  background: var(--bn-article-surface);
  border: 1px solid var(--bn-article-border);
  border-radius: var(--bn-article-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-image: none;
  box-shadow: var(--bn-article-shadow-card);
  transition: all 0.28s var(--bn-article-ease);
  position: relative;
}
.bn-related-card:hover {
  border-color: var(--bn-article-accent);
  box-shadow: var(--bn-article-shadow-card-hover);
  transform: translateY(-3px);
}

.bn-related-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bn-article-bg);
}
.bn-related-card__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--bn-article-ease);
}
/* Placeholder when no featured image */
.bn-related-card__cover--blank {
  display: block;
  min-height: 140px;
  width: 100%;
  background: linear-gradient(135deg, var(--bn-article-accent-light), var(--bn-article-accent-soft));
}
.bn-related-card:hover .bn-related-card__img {
  transform: scale(1.03);
}
.bn-related-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
  opacity: 0.85;
  transition: opacity 0.25s;
  pointer-events: none;
}
.bn-related-card:hover .bn-related-card__media::after { opacity: 1; }

.bn-related-card__cat-chip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--bn-article-accent);
  border-radius: var(--bn-article-radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-bs-theme="dark"] .bn-related-card__cat-chip {
  background: rgba(30, 35, 41, 0.9);
  color: var(--bn-article-accent);
}
.bn-related-card__vip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 10px;
  background: var(--bn-article-accent-gradient);
  color: #fff;
  border-radius: var(--bn-article-radius-xs);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px rgba(201, 100, 66, 0.35);
}
[data-bs-theme="dark"] .bn-related-card__vip { color: #181a20; }

.bn-related-card__body {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.bn-related-card__title {
  font-family: var(--bn-article-font-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bn-article-text);
  line-height: 1.45;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 0.22s var(--bn-article-ease);
  word-break: break-word;
}
.bn-related-card:hover .bn-related-card__title { color: var(--bn-article-accent); }

.bn-related-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--bn-article-text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.bn-related-card__meta i { margin-right: 3px; font-size: 10.5px; }
.bn-related-card__views,
.bn-related-card__date { display: inline-flex; align-items: center; }

/* Backward compatibility: if parent structure slips in, keep it tidy. */
.bn-article-footer .entry-related-posts,
.bn-article-layout__main .entry-related-posts {
  border: none;
  box-shadow: none;
  background: transparent;
  margin-top: 0;
}

/* ==========================================================================
   11. LEFT SIDEBAR
   ========================================================================== */
.bn-article-layout__sidebar {
  grid-column: 1;
  min-width: 0;
  align-self: stretch;
}

.bn-sidebar-sticky {
  position: sticky;
  top: 10px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bn-article-border-strong) transparent;
}
.bn-sidebar-sticky::-webkit-scrollbar {
  width: 4px;
}
.bn-sidebar-sticky::-webkit-scrollbar-track {
  background: transparent;
}
.bn-sidebar-sticky::-webkit-scrollbar-thumb {
  background: var(--bn-article-border-strong);
  border-radius: 4px;
}

.bn-sidebar-unified {
  background: var(--bn-article-surface);
  border: 1px solid var(--bn-article-border);
  border-radius: var(--bn-article-radius);
  box-shadow: var(--bn-article-shadow);
  overflow: hidden;
}

.bn-sidebar-unified > .widget {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}

.bn-sidebar-unified > .widget + .widget {
  border-top: 1px solid var(--bn-article-border) !important;
}

.bn-sidebar-unified .widget-title,
.bn-sidebar-unified h5.widget-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--bn-article-text);
  padding: 16px 20px 0 !important;
  margin-bottom: 12px;
  border-bottom: none !important;
}

.bn-sidebar-unified .card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.bn-sidebar-unified .card-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 16px 20px 8px;
}

.bn-sidebar-unified .card-header .card-title,
.bn-sidebar-unified .card-header h5,
.bn-sidebar-unified .card-header .widget-title {
  font-size: 16px;
  font-weight: 700;
}

.bn-sidebar-unified .nav-tabs {
  border-bottom: none !important;
}

.bn-sidebar-unified .nav-tabs .nav-link {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   12. AUTHOR CARD (sidebar) — banner-cover variant
   Consolidated: previously also redefined further down the file; merged here.
   ========================================================================== */
.bn-author-card {
  position: relative;
  padding: 0 0 20px;
  margin: 0 !important;
  overflow: hidden;
  border-bottom: 1px solid var(--bn-article-border);
}

.bn-author-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--bn-article-surface);
  margin: 0 auto 10px;
  box-shadow: var(--bn-article-shadow-card);
  background: var(--bn-article-surface);
  z-index: 2;
}
[data-bs-theme="dark"] .bn-author-avatar {
  border-color: var(--bn-article-surface);
}

.bn-author-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--bn-article-text);
  margin-bottom: 12px;
}
.bn-author-name .badge,
.bn-author-name span {
  vertical-align: middle;
}

.bn-author-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 16px;
}

.bn-author-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.bn-author-stat__num {
  font-size: 18px;
  font-weight: 700;
  color: var(--bn-article-text);
  line-height: 1.2;
}

.bn-author-stat__label {
  font-size: 12px;
  color: var(--bn-article-text-muted);
  margin-top: 2px;
}

.bn-author-stat__sep {
  width: 1px;
  height: 24px;
  background: var(--bn-article-border-strong);
}

.bn-author-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

.bn-author-btn {
  display: inline-block;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.bn-author-btn--primary {
  background: var(--bn-article-accent);
  color: #fff;
}
[data-bs-theme="dark"] .bn-author-btn--primary {
  color: #181a20;
}
.bn-author-btn--primary:hover {
  opacity: 0.9;
  color: #fff;
}
[data-bs-theme="dark"] .bn-author-btn--primary:hover {
  color: #181a20;
}

.bn-author-btn--outline {
  border: 1px solid var(--bn-article-border-strong);
  color: var(--bn-article-text-secondary);
  background: transparent;
}
.bn-author-btn--outline:hover {
  border-color: var(--bn-article-accent);
  color: var(--bn-article-accent);
}

.bn-author-card .bn-author-posts {
  border-top: 1px solid var(--bn-article-border);
  padding-top: 12px;
  margin-top: 4px;
}

.bn-author-card .bn-author-post-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  text-decoration: none;
  color: var(--bn-article-text-secondary);
  font-size: 13px;
  line-height: 1.5;
  transition: color 0.2s;
}
.bn-author-card .bn-author-post-item:hover {
  color: var(--bn-article-accent);
}

.bn-author-card .bn-author-post-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--bn-article-accent-light);
  color: var(--bn-article-accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.bn-author-card .bn-author-post-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ==========================================================================
   13. ARTICLE CAROUSEL (sidebar)
   ========================================================================== */
.bn-article-carousel {
  padding: 16px 20px 20px;
}

.bn-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bn-carousel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--bn-article-text);
}

.bn-carousel-dots {
  display: flex;
  gap: 6px;
}

.bn-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bn-article-border-strong);
  cursor: pointer;
  transition: all 0.25s;
}
.bn-carousel-dot.active {
  background: var(--bn-article-accent);
  width: 18px;
  border-radius: 3px;
}

.bn-carousel-viewport {
  overflow: hidden;
  border-radius: var(--bn-article-radius-sm);
}

.bn-carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.bn-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.bn-carousel-link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  border-radius: var(--bn-article-radius-sm);
  background-color: var(--bn-article-border);
}

[data-bs-theme="dark"] .bn-carousel-link {
  background-color: var(--bn-article-surface);
}

.bn-carousel-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bn-article-radius-sm);
  transition: transform 0.4s ease;
}

.bn-carousel-link:hover .bn-carousel-img,
.bn-carousel-link:focus-visible .bn-carousel-img {
  transform: scale(1.04);
}

/* Bottom scrim + title on image — hidden by default, slide-up on hover. */
.bn-carousel-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px 16px;
  background: linear-gradient(
    180deg,
    rgba(20, 20, 19, 0) 0%,
    rgba(20, 20, 19, 0.55) 70%,
    rgba(20, 20, 19, 0.78) 100%
  );
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.bn-carousel-link:hover .bn-carousel-info,
.bn-carousel-link:focus-visible .bn-carousel-info {
  opacity: 1;
  transform: translateY(0);
}

.bn-carousel-slide-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}

.bn-carousel-link:hover .bn-carousel-slide-title,
.bn-carousel-link:focus-visible .bn-carousel-slide-title {
  opacity: 1;
  transform: translateY(0);
}

.bn-carousel-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .bn-carousel-track,
  .bn-carousel-img,
  .bn-carousel-link:hover .bn-carousel-img,
  .bn-carousel-link:focus-visible .bn-carousel-img,
  .bn-carousel-info,
  .bn-carousel-slide-title {
    transition: none;
    transform: none !important;
  }
}

/* ==========================================================================
   14. COMMENTS · BEM (.bn-comment / .bn-comments / .bn-comment-form)
   ========================================================================== */
.bn-comments {
  background: var(--bn-article-surface);
  border: 1px solid var(--bn-article-border);
  border-radius: var(--bn-article-radius);
  padding: 28px;
  margin: 0;
  box-shadow: var(--bn-article-shadow-card);
  position: relative;
}
[data-bs-theme="dark"] .bn-comments {
  background: var(--bn-article-surface);
  border-color: var(--bn-article-border);
  box-shadow: none;
}

/* Head ---------------------------------------------------------------------- */
.bn-comments__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.bn-comments__head-badge {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--bn-article-accent-gradient);
  align-self: center;
  flex-shrink: 0;
}
.bn-comments__title {
  font-family: var(--bn-article-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bn-article-text);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.bn-comments__sub {
  font-size: 12.5px;
  color: var(--bn-article-text-muted);
  margin-left: auto;
}

/* Comment form — floating labels + counter ----------------------------------- */
.bn-comments .comment-respond,
.bn-comments form.bn-comment-form,
.bn-comments form.comment-form {
  margin-bottom: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
[data-bs-theme="dark"] .bn-comments .comment-respond,
[data-bs-theme="dark"] .bn-comments form.bn-comment-form,
[data-bs-theme="dark"] .bn-comments form.comment-form {
  background: transparent;
}

/* Parent theme pins #comments .comment-reply-title to bottom:0 (absolute) — reset for BN layout */
#comments.bn-comments .comment-respond {
  position: relative;
}
#comments.bn-comments #reply-title.comment-reply-title,
#comments.bn-comments h3.comment-reply-title.bn-comment-form__title {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
  line-height: inherit;
}

.bn-comments #reply-title,
.bn-comments .bn-comment-form__title {
  font-family: var(--bn-article-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--bn-article-text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bn-comments #cancel-comment-reply-link,
.bn-comments .bn-comment-form__cancel a {
  font-size: 12px;
  font-weight: 400;
  color: var(--bn-article-text-muted);
  margin-left: auto;
  text-decoration: none;
}
.bn-comments #cancel-comment-reply-link:hover,
.bn-comments .bn-comment-form__cancel a:hover { color: var(--bn-article-accent); }

.bn-comment-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 32%;
  min-width: 160px;
}
.bn-comment-form__field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bn-article-text-muted);
  letter-spacing: 0.02em;
}
.bn-comment-form__field label em {
  color: var(--bn-article-accent);
  font-style: normal;
}

.bn-comments form .comment-form-author,
.bn-comments form .comment-form-email,
.bn-comments form .comment-form-url {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.bn-comments .comment-form-author,
.bn-comments .comment-form-email,
.bn-comments .comment-form-url {
  width: auto;
}

.bn-comments form:has(.bn-comment-form__field) .bn-comment-form__field,
.bn-comments .comment-form-author,
.bn-comments .comment-form-email,
.bn-comments .comment-form-url {
  display: inline-flex;
  width: calc((100% - 16px) / 3);
  margin-right: 8px;
  vertical-align: top;
}
.bn-comments .comment-form-url { margin-right: 0; }

.bn-comments input[type="text"],
.bn-comments input[type="email"],
.bn-comments input[type="url"],
.bn-comments textarea {
  width: 100%;
  border: 1px solid var(--bn-article-border);
  border-radius: var(--bn-article-radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--bn-article-surface);
  color: var(--bn-article-text);
  transition: all 0.2s var(--bn-article-ease);
  outline: none;
  font-family: var(--bn-article-font-body);
}
[data-bs-theme="dark"] .bn-comments input[type="text"],
[data-bs-theme="dark"] .bn-comments input[type="email"],
[data-bs-theme="dark"] .bn-comments input[type="url"],
[data-bs-theme="dark"] .bn-comments textarea {
  background: rgba(11, 14, 17, 0.55);
  border-color: var(--bn-article-border-strong);
}
.bn-comments input:focus,
.bn-comments textarea:focus {
  border-color: var(--bn-article-accent);
  box-shadow: 0 0 0 3px var(--bn-article-accent-ring);
}

.bn-comment-form__body {
  position: relative;
  margin: 12px 0 10px;
}
.bn-comments .comment-form-comment { margin: 12px 0 10px; }
.bn-comments textarea {
  min-height: 110px;
  resize: vertical;
}
.bn-comment-form__counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 11px;
  color: var(--bn-article-text-muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  padding: 2px 8px;
  background: var(--bn-article-bg);
  border-radius: var(--bn-article-radius-xs);
  border: 1px solid var(--bn-article-border);
}
[data-bs-theme="dark"] .bn-comment-form__counter {
  background: rgba(24, 26, 32, 0.8);
}
.bn-comment-form__counter.is-near { color: var(--bn-article-accent); }
.bn-comment-form__counter.is-over { color: #e74c3c; font-weight: 700; }

.bn-comments .form-submit,
.bn-comments .bn-comment-form__actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  float: none;
  clear: both;
  width: 100%;
  text-align: inherit;
  padding: 0;
}
.bn-comments .form-submit .submit,
.bn-comments .form-submit input[type="submit"],
.bn-comments .bn-comment-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bn-article-accent-gradient);
  color: #fff;
  border: none;
  border-radius: var(--bn-article-radius-pill);
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s var(--bn-article-ease);
  box-shadow: 0 4px 12px rgba(201, 100, 66, 0.2);
  font-family: var(--bn-article-font-body);
}
[data-bs-theme="dark"] .bn-comments .form-submit .submit,
[data-bs-theme="dark"] .bn-comments .form-submit input[type="submit"],
[data-bs-theme="dark"] .bn-comments .bn-comment-form__submit { color: #181a20; }
.bn-comments .form-submit .submit:hover,
.bn-comments .form-submit input[type="submit"]:hover,
.bn-comments .bn-comment-form__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201, 100, 66, 0.3);
  filter: brightness(1.05);
}

@media (max-width: 575.98px) {
  #comments.bn-comments .form-submit,
  #comments.bn-comments .bn-comment-form__actions {
    justify-content: stretch;
  }
  #comments.bn-comments .form-submit .submit,
  #comments.bn-comments .form-submit input[type="submit"],
  #comments.bn-comments .bn-comment-form__submit {
    width: 100%;
  }
}

.bn-comments__login {
  text-align: center;
  padding: 20px 0;
}
.bn-btn-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  border-radius: var(--bn-article-radius-pill);
  background: var(--bn-article-accent-gradient);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.22s var(--bn-article-ease);
  box-shadow: 0 4px 12px rgba(201, 100, 66, 0.22);
}
[data-bs-theme="dark"] .bn-btn-login { color: #181a20 !important; }
.bn-btn-login:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(201, 100, 66, 0.3);
}
.bn-btn-login:active {
  transform: translateY(0);
  filter: brightness(0.97);
  box-shadow: 0 2px 6px rgba(201, 100, 66, 0.18);
}
.bn-btn-login:focus-visible {
  outline: 2px solid var(--bn-article-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.32);
}

/* Empty state */
.bn-comments__empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--bn-article-text-muted);
  background: transparent;
  border-radius: var(--bn-article-radius-sm);
  border: none;
}
.bn-comments__empty i { font-size: 28px; margin-bottom: 10px; color: var(--bn-article-text-muted); }
.bn-comments__empty p { margin: 0; font-size: 13.5px; }

/* Comment list --------------------------------------------------------------- */
.bn-comments__list,
.bn-comments .comments-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bn-comments .comments-list > li,
.bn-comments__list > li,
.bn-comments .comments-list > .comment,
.bn-comments__list > .comment {
  padding: 16px 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.bn-comments .comments-list > li + li,
.bn-comments__list > li + li {
  border-top: 1px solid var(--bn-article-border) !important;
}

/* Nested replies — left rail */
.bn-comments .comments-list .children,
.bn-comments__list .children {
  list-style: none;
  margin: 12px 0 0 !important;
  padding: 0 0 0 24px !important;
  border-left: 2px solid var(--bn-article-accent-light);
  position: relative;
}
.bn-comments .comments-list .children > li,
.bn-comments__list .children > li {
  padding: 12px 0 !important;
  border-top: 1px dashed var(--bn-article-border) !important;
}
.bn-comments .comments-list .children > li:first-child,
.bn-comments__list .children > li:first-child {
  border-top: none !important;
  padding-top: 0 !important;
}

/* .bn-comment — BEM structure ------------------------------------------------- */
.bn-comment__inner {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: flex-start;
}
.bn-comment--reply .bn-comment__inner {
  grid-template-columns: 36px 1fr;
  gap: 10px;
}

.bn-comment__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bn-article-surface-hover);
  border: 2px solid var(--bn-article-border);
  text-decoration: none !important;
  display: block;
}
.bn-comment--reply .bn-comment__avatar { width: 36px; height: 36px; }
.bn-comment__avatar img,
.bn-comment__avatar .avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.bn-comment--author .bn-comment__avatar {
  border-color: var(--bn-article-accent);
  box-shadow: var(--bn-article-glow);
}

.bn-comment__body {
  min-width: 0;
  padding-top: 1px;
}
.bn-comment__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.bn-comment__nick {
  font-size: 14px;
  font-weight: 700;
  color: var(--bn-article-text);
  line-height: 1.3;
}
.bn-comment__nick a {
  color: var(--bn-article-text);
  text-decoration: none;
}
.bn-comment__nick a:hover { color: var(--bn-article-accent); }
.bn-comment__badge {
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--bn-article-radius-xs);
  background: var(--bn-article-accent-light);
  color: var(--bn-article-accent);
  letter-spacing: 0.02em;
}
.bn-comment__author-flag {
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--bn-article-radius-xs);
  background: var(--bn-article-accent-gradient);
  color: #fff;
  letter-spacing: 0.02em;
}
[data-bs-theme="dark"] .bn-comment__author-flag { color: #181a20; }

.bn-comment__pending {
  margin: 8px 0;
  padding: 8px 12px;
  font-size: 12.5px;
  background: var(--bn-article-accent-light);
  border: 1px dashed var(--bn-article-accent);
  border-radius: var(--bn-article-radius-xs);
  color: var(--bn-article-accent);
}
.bn-comment__pending i { margin-right: 5px; }

.bn-comment__content {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--bn-article-text);
  word-break: break-word;
}
.bn-comment__content > *:last-child { margin-bottom: 0; }
.bn-comment__content p { margin: 0 0 0.6em; }
.bn-comment__content a {
  color: var(--bn-article-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--bn-article-accent);
}
.bn-comment__content a:hover { border-bottom-style: solid; }
.bn-comment__content code {
  background: var(--bn-article-accent-light);
  color: var(--bn-article-accent);
  padding: 1px 6px;
  border-radius: var(--bn-article-radius-xs);
  font-family: var(--bn-article-font-mono);
  font-size: 0.88em;
}

.bn-comment__meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--bn-article-text-muted);
}
.bn-comment__time i { margin-right: 4px; font-size: 11px; }
.bn-comment__reply a,
.bn-comment__reply .comment-reply-link {
  color: var(--bn-article-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.bn-comment__reply a:hover,
.bn-comment__reply .comment-reply-link:hover { color: var(--bn-article-accent); }
.bn-comment__reply i { font-size: 11px; }

/* Legacy fallback (ZB_Walker_Comment DOM) — preserves styling if child walker
   fails to load for any reason (plugin conflicts, cache, etc.). */
.bn-comments .comment-inner {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: flex-start;
}
.bn-comments .comment-inner > .comment-author img.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--bn-article-border);
}
.bn-comments .comment-inner > .comment-body {
  min-width: 0;
}
.bn-comments .comment-inner .nickname {
  font-size: 14px;
  font-weight: 700;
  color: var(--bn-article-text);
  margin-bottom: 6px;
}
.bn-comments .comment-inner .comment-content {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--bn-article-text);
}
.bn-comments .comment-inner .comment-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--bn-article-text-muted);
  display: inline-flex;
  gap: 14px;
}

/* Pagination ---------------------------------------------------------------- */
.bn-comments .comments-pagination,
.bn-comments__nav {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
.bn-comments .comments-pagination a,
.bn-comments .comments-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--bn-article-radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--bn-article-text-secondary);
  background: var(--bn-article-bg);
  border: 1px solid var(--bn-article-border);
  text-decoration: none;
  margin: 0 2px;
  transition: all 0.2s;
}
.bn-comments .comments-pagination a:hover {
  border-color: var(--bn-article-accent);
  color: var(--bn-article-accent);
  background: var(--bn-article-accent-light);
}
.bn-comments .comments-pagination .current {
  background: var(--bn-article-accent);
  color: #fff;
  border-color: var(--bn-article-accent);
}
[data-bs-theme="dark"] .bn-comments .comments-pagination .current { color: #181a20; }

/* ==========================================================================
   15. CLEANUP — Remove parent card/widget noise
   ========================================================================== */
.bn-article-layout__main .card .card-body {
  border: none !important;
}

.bn-sidebar-unified .widget .card,
.bn-sidebar-unified .widget .card-body {
  padding: 0 !important;
  margin: 0;
}

.bn-sidebar-unified .post-item {
  border: none !important;
  box-shadow: none !important;
}

.bn-sidebar-unified .post-ranking .post-item,
.bn-sidebar-unified .ranking-list .post-item {
  padding: 8px 20px;
  border: none !important;
}

.bn-sidebar-unified > .widget {
  padding: 0 !important;
}

.bn-sidebar-unified .author-header,
.bn-sidebar-unified .author-body,
.bn-sidebar-unified .author-footer {
  padding: 0 20px;
}

.bn-sidebar-unified .row.g-3.row-cols-1 {
  padding: 0 8px 8px;
}
.bn-sidebar-unified .row.g-3.row-cols-1 .entry-title {
  font-size: 13px;
}
.bn-sidebar-unified .row.g-3.row-cols-1 .entry-media {
  border-radius: 6px;
  overflow: hidden;
}

/* ==========================================================================
   16. DARK THEME OVERRIDES
   ========================================================================== */
[data-bs-theme="dark"] .bn-sidebar-unified {
  background: var(--bn-article-surface);
  border-color: var(--bn-article-border);
  box-shadow: none;
}
[data-bs-theme="dark"] .bn-sidebar-unified .card-header {
  background: transparent !important;
  border-bottom: none !important;
}
[data-bs-theme="dark"] .bn-sidebar-unified .widget-title,
[data-bs-theme="dark"] .bn-sidebar-unified h5.widget-title {
  border-bottom: none !important;
}

[data-bs-theme="dark"] .bn-toc-sticky {
  background: var(--bn-article-surface);
  border-color: var(--bn-article-border);
  box-shadow: none;
}

[data-bs-theme="dark"] .bn-comments {
  background: var(--bn-article-surface);
  border-color: var(--bn-article-border);
  box-shadow: none;
}

[data-bs-theme="dark"] .bn-author-avatar {
  border-color: var(--bn-article-border);
}

[data-bs-theme="dark"] .bn-hero-action {
  border-color: rgba(255,255,255,0.15);
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-navigation .card {
  background: var(--bn-article-surface) !important;
  border-color: var(--bn-article-border) !important;
}

[data-bs-theme="dark"] .bn-article-layout__main .entry-related-posts .card {
  background: var(--bn-article-surface) !important;
}

[data-bs-theme="dark"] .bn-comments .comment-form-author input,
[data-bs-theme="dark"] .bn-comments .comment-form-email input,
[data-bs-theme="dark"] .bn-comments .comment-form-url input,
[data-bs-theme="dark"] .bn-comments .comment-form-comment textarea {
  background: #181a20;
  border-color: var(--bn-article-border);
}

/* ==========================================================================
   17. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* >= 1200px: Full 3-column layout — default grid applies */

/* 992–1199px: Hide TOC, 2-column (Sidebar + Article) */
@media (max-width: 1199.98px) {
  .bn-article-layout {
    grid-template-columns: var(--bn-article-sidebar-width) minmax(0, 1fr);
    padding: 24px 20px 48px;
  }
  .bn-article-layout__toc {
    display: none;
  }
  .bn-article-layout__sidebar {
    grid-column: 1;
  }
  .bn-article-layout__main {
    grid-column: 2;
  }
  .bn-article-footer__inner {
    padding: 24px 20px 48px;
  }
}

/* < 992px: Single column, sidebar below */
@media (max-width: 991.98px) {
  .bn-article-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 16px 40px;
  }
  .bn-article-layout__main {
    grid-column: 1;
    max-width: none;
  }
  .bn-article-layout__sidebar {
    grid-column: 1;
    order: 2;
  }
  .bn-sidebar-sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .bn-article-footer__inner {
    padding: 20px 16px 40px;
  }
}

/* < 768px: Mobile adjustments */
@media (max-width: 767.98px) {
  .bn-post-hero {
    padding: 80px 16px 32px;
    min-height: 280px;
  }
  .bn-post-hero__title { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 1.75rem); }
  .bn-post-hero__meta { gap: 10px; font-size: 12px; }
  .bn-post-hero__byline {
    padding: 4px 6px 4px 4px;
    gap: 6px;
  }
  .bn-post-hero__actions { flex-wrap: wrap; }

  .bn-article-layout {
    padding: 16px 14px 32px;
    gap: 20px;
  }
  .bn-article-footer__inner {
    padding: 16px 14px 32px;
  }

  .bn-article-layout__main .entry-content,
  .bn-article-layout__main .post-content {
    font-size: var(--bn-article-prose-fs-mobile);
    line-height: var(--bn-article-prose-lh-mobile);
  }

  .bn-article-layout__main .entry-content h2,
  .bn-article-layout__main .post-content h2 {
    font-size: 1.3rem;
    padding-left: 14px;
    margin: 2em 0 0.7em;
  }
  .bn-article-layout__main .entry-content h2::before,
  .bn-article-layout__main .post-content h2::before { width: 3px; }

  .bn-article-layout__main .entry-content h3,
  .bn-article-layout__main .post-content h3 {
    font-size: 1.08rem;
    padding-left: 16px;
  }

  /* Paywall — collapse 3-column price grid to stacked */
  .bn-article-layout__main .ri-hide-warp {
    padding: 36px 18px 24px;
  }
  .bn-article-layout__main .ri-hide-warp .prices-info {
    grid-template-columns: 1fr;
  }
  .bn-article-layout__main .ri-hide-warp .buy-btns { flex-direction: column; }
  .bn-article-layout__main .ri-hide-warp .buy-btns .btn {
    width: 100%;
    justify-content: center;
  }

  /* Entry social row — stack */
  .bn-article-layout__main .bn-entry-social {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 14px;
    gap: 14px;
  }
  .bn-entry-social__author { width: 100%; }
  .bn-entry-social__actions { justify-content: flex-start; }

  /* Copyright panel — tighter padding */
  .bn-article-layout__main .entry-copyright,
  .bn-article-layout__main .single-copyright {
    padding: 14px 16px 14px 46px;
    font-size: 12.5px;
  }

  /* Comment form — stack field triplet */
  .bn-comments form:has(.bn-comment-form__field) .bn-comment-form__field,
  .bn-comments .comment-form-author,
  .bn-comments .comment-form-email,
  .bn-comments .comment-form-url {
    display: block;
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  .bn-comments { padding: 20px 16px; }
  .bn-comments .comment-respond,
  .bn-comments form.bn-comment-form { padding: 16px 14px; }

  /* Comment list — tighter left rail on replies */
  .bn-comments .comments-list .children,
  .bn-comments__list .children { padding-left: 14px !important; }

  /* Related posts — 2 columns already set via §10 */
}

/* < 576px: Compact mobile */
@media (max-width: 575.98px) {
  .bn-post-hero {
    padding: 70px 14px 24px;
    min-height: 240px;
  }
  .bn-post-hero__title { font-size: 1.25rem; }
  .bn-hero-action { padding: 6px 14px; font-size: 12px; }

  .bn-article-layout { padding: 12px 12px 28px; }
  .bn-article-footer__inner { padding: 12px 12px 28px; }

  .bn-author-stats { justify-content: space-around; }
  .bn-author-stat { padding: 0 10px; }
  .bn-author-btns { flex-direction: column; gap: 8px; }
  .bn-sidebar-unified { border-radius: var(--bn-article-radius-sm); }

  /* Reading shell FABs — shrink a touch */
  .bn-back-top,
  .bn-toc-toggle { width: 40px; height: 40px; }
}

/* ==========================================================================
   18. MISC OVERRIDES
   ========================================================================== */

/* Remove parent breadcrumb (moved into hero) */
.bn-article-layout ~ .container-full .breadcrumb,
.bn-post-hero ~ .container-full {
  display: none !important;
}

/* Hide duplicate .article-header when hero is active */
.bn-post-hero + .container .article-header,
.bn-post-hero ~ .bn-article-layout .article-header {
  display: none !important;
}

/* Hide the parent single container if both are output */
.bn-post-hero ~ .container.mt-2 {
  display: none !important;
}

/* Single-content-nav (tab style) padding reset */
.bn-article-layout__main .single-content-nav {
  margin-bottom: 20px;
}

/* Ensure post-content in new style has no padding from card */
.bn-article-layout__main .tab-content,
.bn-article-layout__main .tab-pane {
  padding: 0;
}
.bn-article-layout__main .tab-pane .post-content {
  padding: 0;
}

/* ==========================================================================
   19. NON-ARTICLE FOOTER (全宽背景色区分)
   ========================================================================== */

.bn-article-footer {
  background: var(--bn-article-footer-bg);
  border-top: 1px solid var(--bn-article-border);
}

.bn-article-footer__inner {
  max-width: var(--bn-article-max-width);
  margin: 0 auto;
  padding: 32px 16px 60px;
}

.bn-article-footer .entry-navigation,
.bn-article-footer .entry-comments,
.bn-article-footer #comments {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   20. FOLLOW BUTTON in entry-social
   ========================================================================== */

.bn-entry-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bn-entry-author-row .share-author {
  display: flex;
  align-items: center;
}

.bn-entry-author-row .bn-follow-btn--sm {
  flex-shrink: 0;
}

.bn-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid var(--bn-article-accent, #c96442);
  border-radius: 999px;
  background: var(--bn-article-accent, #c96442);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.4;
  text-decoration: none;
  gap: 4px;
  min-width: 80px;
}

[data-theme="dark"] .bn-follow-btn,
body.dark-theme .bn-follow-btn {
  color: #0b0e11;
}

.bn-follow-btn:hover {
  background: var(--bn-article-accent-hover, #b5573a);
  border-color: var(--bn-article-accent-hover, #b5573a);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bn-follow-btn.is-following {
  background: transparent;
  color: var(--bn-article-accent, #c96442);
  border-color: var(--bn-article-border, #e8e6dc);
}

.bn-follow-btn.is-following:hover {
  border-color: #e74c3c;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.06);
}

.bn-follow-btn.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.bn-follow-btn--sm {
  padding: 4px 14px;
  font-size: 12px;
  min-width: 72px;
}

/* ==========================================================================
   21. READING SHELL — progress bar · floating share · back-to-top · lightbox
   ========================================================================== */

/* Top reading progress bar ------------------------------------------------- */
.bn-read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
}
.bn-read-progress__fill {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--bn-article-accent-gradient);
  box-shadow: 0 0 10px rgba(var(--bn-primary-rgb, 201, 100, 66), 0.35);
  transition: transform 80ms linear, opacity 0.3s;
}
[data-bs-theme="dark"] .bn-read-progress__fill {
  box-shadow: 0 0 12px rgba(252, 213, 53, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .bn-read-progress__fill { transition: none; }
}

/* Floating share dock ------------------------------------------------------ */
.bn-floating-share {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(-12px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--bn-article-surface);
  border: 1px solid var(--bn-article-border);
  border-radius: var(--bn-article-radius-pill);
  box-shadow: var(--bn-article-shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--bn-article-ease), transform 0.35s var(--bn-article-ease);
  z-index: 950;
}
.bn-floating-share.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
html.bn-float-idle .bn-floating-share.is-visible:not(:hover):not(:focus-within) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-18px);
}
.bn-floating-share__btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: none;
  background: transparent;
  color: var(--bn-article-text-secondary);
  text-decoration: none;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.bn-floating-share__btn:hover {
  background: var(--bn-article-accent-light);
  color: var(--bn-article-accent);
  transform: translateY(-1px);
}
.bn-floating-share__btn i { line-height: 1; }
.bn-floating-share__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--bn-article-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  transform: scale(0.9);
  pointer-events: none;
}
[data-bs-theme="dark"] .bn-floating-share__count { color: #181a20; }
.bn-floating-share__btn--like.is-active,
.bn-floating-share__btn--fav.is-active,
.post-like-btn.is-active,
.post-fav-btn.is-active {
  color: var(--bn-article-accent);
}
.bn-floating-share__btn--like.is-active i,
.post-like-btn.is-active i { font-weight: 900; }

/* Like +1 popup */
.bn-like-plus-one {
  position: absolute;
  left: 50%;
  top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bn-article-accent);
  pointer-events: none;
  transform: translate(-50%, 0);
  opacity: 0;
  animation: bn-like-rise 0.9s var(--bn-article-ease) forwards;
}
@keyframes bn-like-rise {
  0%   { opacity: 0; transform: translate(-50%, 4px) scale(0.8); }
  20%  { opacity: 1; transform: translate(-50%, -2px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(1); }
}

/* Back-to-top FAB ---------------------------------------------------------- */
.bn-back-top {
  position: fixed;
  right: var(--bn-float-backtop-right, 20px);
  bottom: 20px;
  width: var(--bn-float-backtop-size, 44px);
  height: var(--bn-float-backtop-size, 44px);
  border-radius: 50%;
  border: 1px solid var(--bn-article-border);
  background: var(--bn-article-surface);
  color: var(--bn-article-text);
  box-shadow: var(--bn-article-shadow-float);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s var(--bn-article-ease), transform 0.3s var(--bn-article-ease), background 0.2s, color 0.2s, box-shadow 0.2s;
  z-index: 900;
}
.bn-back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.bn-back-top:hover {
  background: var(--bn-article-accent);
  color: #fff;
  border-color: var(--bn-article-accent);
  box-shadow: var(--bn-article-shadow-float), var(--bn-article-glow);
}
[data-bs-theme="dark"] .bn-back-top:hover { color: #181a20; }

/* Image lightbox ----------------------------------------------------------- */
.bn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  padding: 40px 20px;
}
.bn-lightbox.is-open { opacity: 1; }
.bn-lightbox__img {
  max-width: min(92vw, 1400px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--bn-article-radius-sm);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.bn-lightbox__caption {
  margin-top: 16px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  max-width: 80ch;
  text-align: center;
}
.bn-lightbox__caption:empty { display: none; }
.bn-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.bn-lightbox__close:hover { background: rgba(255,255,255,0.22); }
body.bn-lightbox-open { overflow: hidden; }
.bn-article-layout__main .post-content img.bn-zoomable,
.bn-article-layout__main .entry-content img.bn-zoomable { cursor: zoom-in; }

/* ==========================================================================
   22. MOBILE TOC TOGGLE — drawer trigger FAB
   ========================================================================== */
.bn-toc-toggle {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bn-article-border);
  background: var(--bn-article-surface);
  color: var(--bn-article-text);
  box-shadow: var(--bn-article-shadow-float);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  z-index: 910;
}
.bn-toc-toggle:hover {
  background: var(--bn-article-accent);
  color: #fff;
  border-color: var(--bn-article-accent);
}
[data-bs-theme="dark"] .bn-toc-toggle:hover { color: #181a20; }

/* Hide the side floating share dock on narrow viewports
   (mobile already has the back-to-top + TOC-toggle FABs). */
@media (max-width: 1199.98px) {
  .bn-floating-share { display: none !important; }
}

/* ==========================================================================
   23. PAYWALL — in-content .ri-hide-warp (rihide shortcode) · 大厂级锁定卡
   ========================================================================== */
.bn-article-layout__main .ri-hide-warp,
.bn-article-layout__main .post-content .ri-hide-warp,
.bn-article-layout__main .entry-content .ri-hide-warp {
  position: relative;
  padding: 44px 28px 32px;
  margin: 2em 0;
  border-radius: var(--bn-article-radius);
  background:
    linear-gradient(180deg, var(--bn-article-surface), var(--bn-article-bg)) padding-box,
    var(--bn-article-accent-gradient) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--bn-article-shadow-card);
  overflow: hidden;
  text-align: center;
}
[data-bs-theme="dark"] .bn-article-layout__main .ri-hide-warp,
[data-bs-theme="dark"] .bn-article-layout__main .post-content .ri-hide-warp,
[data-bs-theme="dark"] .bn-article-layout__main .entry-content .ri-hide-warp {
  background:
    linear-gradient(180deg, var(--bn-article-surface-elevated), var(--bn-article-surface)) padding-box,
    var(--bn-article-accent-gradient) border-box;
}

/* Background ornament */
.bn-article-layout__main .ri-hide-warp::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: var(--bn-article-accent-gradient-soft);
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* Top lock ribbon (replaces the inline hide-msg) */
.bn-article-layout__main .ri-hide-warp .hide-msg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  background: var(--bn-article-accent-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 0 0 var(--bn-article-radius-pill) var(--bn-article-radius-pill);
  z-index: 2;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(201, 100, 66, 0.25);
}
[data-bs-theme="dark"] .bn-article-layout__main .ri-hide-warp .hide-msg { color: #181a20; }
.bn-article-layout__main .ri-hide-warp .hide-msg i { font-size: 11px; }

/* Hide-buy-warp container */
.bn-article-layout__main .ri-hide-warp .hide-buy-warp {
  position: relative;
  z-index: 1;
}

/* Lock icon burst + title */
.bn-article-layout__main .ri-hide-warp .buy-title {
  font-family: var(--bn-article-font-heading);
  font-size: clamp(1.1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 700;
  color: var(--bn-article-text);
  margin: 0 auto 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.bn-article-layout__main .ri-hide-warp .buy-title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--bn-article-accent-gradient);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(201, 100, 66, 0.28), var(--bn-article-glow);
  animation: bn-lock-pulse 2.4s var(--bn-article-ease) infinite;
}
[data-bs-theme="dark"] .bn-article-layout__main .ri-hide-warp .buy-title i { color: #181a20; }
@keyframes bn-lock-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(201, 100, 66, 0.24), 0 0 0 0 rgba(201, 100, 66, 0.18); }
  50%      { box-shadow: 0 8px 20px rgba(201, 100, 66, 0.32), 0 0 0 10px rgba(201, 100, 66, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bn-article-layout__main .ri-hide-warp .buy-title i { animation: none; }
}

/* Prices comparison — 3-column card grid */
.bn-article-layout__main .ri-hide-warp .buy-desc {
  margin: 0 auto 20px;
  max-width: 560px;
}
.bn-article-layout__main .ri-hide-warp .prices-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.bn-article-layout__main .ri-hide-warp .prices-info .price-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--bn-article-surface);
  border: 1px solid var(--bn-article-border);
  border-radius: var(--bn-article-radius-sm);
  font-size: 12.5px;
  color: var(--bn-article-text-secondary);
  text-align: center;
  transition: transform 0.22s var(--bn-article-ease), border-color 0.22s, box-shadow 0.22s;
  position: relative;
  overflow: hidden;
}
.bn-article-layout__main .ri-hide-warp .prices-info .price-item::before { display: none !important; }
.bn-article-layout__main .ri-hide-warp .prices-info .price-item::after { display: none !important; }
.bn-article-layout__main .ri-hide-warp .prices-info .price-item > span {
  font-family: var(--bn-article-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--bn-article-text);
  margin-top: 2px;
  letter-spacing: -0.005em;
}
.bn-article-layout__main .ri-hide-warp .prices-info .price-item > span sup {
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
  color: var(--bn-article-accent);
  vertical-align: super;
}
.bn-article-layout__main .ri-hide-warp .prices-info .price-item.default {
  background: var(--bn-article-surface);
}
.bn-article-layout__main .ri-hide-warp .prices-info .price-item.default > span {
  color: var(--bn-article-text-muted);
  text-decoration: line-through;
}
.bn-article-layout__main .ri-hide-warp .prices-info .price-item.vip,
.bn-article-layout__main .ri-hide-warp .prices-info .price-item.boosvip {
  border-color: var(--bn-article-accent);
  background: var(--bn-article-accent-light);
  box-shadow: var(--bn-article-glow);
}
.bn-article-layout__main .ri-hide-warp .prices-info .price-item.vip > span,
.bn-article-layout__main .ri-hide-warp .prices-info .price-item.boosvip > span {
  color: var(--bn-article-accent);
}
.bn-article-layout__main .ri-hide-warp .prices-info .price-item.boosvip::after {
  content: '推荐';
  display: block !important;
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--bn-article-accent-gradient);
  border-radius: var(--bn-article-radius-xs);
  line-height: 1.4;
}
[data-bs-theme="dark"] .bn-article-layout__main .ri-hide-warp .prices-info .price-item.boosvip::after { color: #181a20; }

/* Buttons: primary CTA + login */
.bn-article-layout__main .ri-hide-warp .buy-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.bn-article-layout__main .ri-hide-warp .buy-btns .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 28px !important;
  font-family: var(--bn-article-font-body);
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--bn-article-radius-pill) !important;
  border: 1.5px solid transparent;
  transition: all 0.22s var(--bn-article-ease);
  box-shadow: none;
}
.bn-article-layout__main .ri-hide-warp .buy-btns .btn-danger {
  background: var(--bn-article-accent-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(201, 100, 66, 0.25);
}
[data-bs-theme="dark"] .bn-article-layout__main .ri-hide-warp .buy-btns .btn-danger { color: #181a20 !important; }
.bn-article-layout__main .ri-hide-warp .buy-btns .btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(201, 100, 66, 0.35), var(--bn-article-glow);
  filter: brightness(1.05);
}
.bn-article-layout__main .ri-hide-warp .buy-btns .btn-info,
.bn-article-layout__main .ri-hide-warp .buy-btns .login-btn {
  background: transparent !important;
  color: var(--bn-article-text) !important;
  border-color: var(--bn-article-border-strong) !important;
}
.bn-article-layout__main .ri-hide-warp .buy-btns .btn-info:hover,
.bn-article-layout__main .ri-hide-warp .buy-btns .login-btn:hover {
  background: var(--bn-article-accent-light) !important;
  color: var(--bn-article-accent) !important;
  border-color: var(--bn-article-accent) !important;
  transform: translateY(-1px);
}

/* Sales count line */
.bn-article-layout__main .ri-hide-warp .buy-count {
  margin-top: 14px;
  font-size: 12px;
  color: var(--bn-article-text-muted);
}
.bn-article-layout__main .ri-hide-warp .buy-count i {
  color: var(--bn-article-accent);
  margin-right: 4px;
}
.bn-article-layout__main .ri-hide-warp .buy-count span {
  color: var(--bn-article-accent);
  font-weight: 700;
  margin: 0 3px;
  font-variant-numeric: tabular-nums;
}

/* ------------------- In-content .ri-down-warp (shop paywall) ------------- */
/* Override legacy style.css rules only when inside the article main column.
   Sidebar .ri-down-warp keeps the existing design. */
.bn-article-layout__main .ri-down-warp {
  background: var(--bn-article-surface) !important;
  border: 1.5px solid transparent !important;
  background-image:
    linear-gradient(180deg, var(--bn-article-surface), var(--bn-article-bg)),
    var(--bn-article-accent-gradient) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  border-radius: var(--bn-article-radius) !important;
  padding: 28px 28px 24px !important;
  box-shadow: var(--bn-article-shadow-card) !important;
}
.bn-article-layout__main .ri-down-warp .down-buy-warp .buy-title {
  color: var(--bn-article-text) !important;
  font-family: var(--bn-article-font-heading);
  font-weight: 700;
}
.bn-article-layout__main .ri-down-warp .down-buy-warp .buy-title i { color: var(--bn-article-accent); }
.bn-article-layout__main .ri-down-warp .down-buy-warp .buy-btns .btn.btn-danger {
  background: var(--bn-article-accent-gradient) !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(201, 100, 66, 0.25) !important;
}
[data-bs-theme="dark"] .bn-article-layout__main .ri-down-warp .down-buy-warp .buy-btns .btn.btn-danger { color: #181a20 !important; }
.bn-article-layout__main .ri-down-warp .down-buy-warp .buy-btns .btn.btn-danger:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(201, 100, 66, 0.35) !important;
}

/* ==========================================================================
   24. SIDEBAR WIDGETS · 排行榜 top-3 徽章 · 统一 head · 作者卡 banner · 轮播 polish
   ========================================================================== */

/* Unified widget head — icon + title + view-more link */
.bn-sidebar-unified .widget-title,
.bn-sidebar-unified h5.widget-title,
.bn-sidebar-unified .card-header .card-title,
.bn-sidebar-unified .card-header h5,
.bn-sidebar-unified .card-header .widget-title {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 10px !important;
  font-family: var(--bn-article-font-heading);
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bn-article-text);
  margin: 0 !important;
  letter-spacing: 0.02em;
  border-bottom: none !important;
}
.bn-sidebar-unified .widget-title::before,
.bn-sidebar-unified h5.widget-title::before,
.bn-sidebar-unified .card-header .card-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--bn-article-accent-gradient);
  flex-shrink: 0;
}
.bn-sidebar-unified .widget-title .more-link,
.bn-sidebar-unified .widget-title a.more {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--bn-article-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.2s;
}
.bn-sidebar-unified .widget-title .more-link:hover {
  color: var(--bn-article-accent);
}

/* Generic list items inside sidebar */
.bn-sidebar-unified .widget > ul,
.bn-sidebar-unified .widget > div {
  padding: 0 20px 16px;
}
.bn-sidebar-unified .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ranking list — numbered with top-3 medal variants ------------------------- */
.bn-sidebar-unified .ranking-list,
.bn-sidebar-unified .post-ranking,
.bn-sidebar-unified .h-ranking-list {
  padding: 4px 20px 16px;
  counter-reset: bn-rank;
}
/* v9.9 markup: actual widget container is .widget.sidebar-ranking-list.
   Without a counter-reset on a matching ancestor, browsers implicitly reset
   the counter on the same element that has counter-increment, so every
   .ranking-item would render as "1". Establishing scope here fixes that. */
.bn-sidebar-unified .widget.sidebar-ranking-list {
  counter-reset: bn-rank;
}
.bn-sidebar-unified .ranking-item,
.bn-sidebar-unified .post-ranking .post-item,
.bn-sidebar-unified .ranking-list .post-item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 10px 0 10px 34px !important;
  border-bottom: 1px solid var(--bn-article-border);
  align-items: flex-start;
  counter-increment: bn-rank;
}
.bn-sidebar-unified .ranking-item:last-child,
.bn-sidebar-unified .post-ranking .post-item:last-child,
.bn-sidebar-unified .ranking-list .post-item:last-child { border-bottom: none; }

/* Hide parent theme's HTML ranking-num badge (replaced by ::before counter) */
.bn-sidebar-unified .ranking-item .ranking-num {
  display: none;
}

/* Number badge via ::before with counter() */
.bn-sidebar-unified .ranking-item::before,
.bn-sidebar-unified .post-ranking .post-item::before,
.bn-sidebar-unified .ranking-list .post-item::before {
  content: counter(bn-rank);
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--bn-article-text-muted);
  border: 1px solid var(--bn-article-border-strong);
  border-radius: var(--bn-article-radius-xs);
  background: transparent;
  font-family: var(--bn-article-font-mono);
  font-variant-numeric: tabular-nums;
  transition: all 0.22s var(--bn-article-ease);
}

/* Top 3 — gold / silver / bronze — day theme.
   v9.9 sidebar-ranking-list wraps each .ranking-item in its own .col, so
   the old `.ranking-item:nth-child(N)` selector matched EVERY item (each
   is sole child of .col) and painted all badges gold. Walk through
   `.col:nth-child(N)` to correctly target the Nth item in the row. */
.bn-sidebar-unified .widget.sidebar-ranking-list .col:nth-child(1) .ranking-item::before,
.bn-sidebar-unified .post-ranking .post-item:nth-child(1)::before,
.bn-sidebar-unified .ranking-list .post-item:nth-child(1)::before {
  background: linear-gradient(135deg, #f6b93b, #d4a017);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(214, 160, 23, 0.35);
}
.bn-sidebar-unified .widget.sidebar-ranking-list .col:nth-child(2) .ranking-item::before,
.bn-sidebar-unified .post-ranking .post-item:nth-child(2)::before,
.bn-sidebar-unified .ranking-list .post-item:nth-child(2)::before {
  background: linear-gradient(135deg, #c0c5d0, #8d94a3);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(141, 148, 163, 0.3);
}
.bn-sidebar-unified .widget.sidebar-ranking-list .col:nth-child(3) .ranking-item::before,
.bn-sidebar-unified .post-ranking .post-item:nth-child(3)::before,
.bn-sidebar-unified .ranking-list .post-item:nth-child(3)::before {
  background: linear-gradient(135deg, #cd7f32, #a0522d);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(160, 82, 45, 0.3);
}
[data-bs-theme="dark"] .bn-sidebar-unified .widget.sidebar-ranking-list .col:nth-child(1) .ranking-item::before,
[data-bs-theme="dark"] .bn-sidebar-unified .post-ranking .post-item:nth-child(1)::before {
  background: linear-gradient(135deg, #fcd535, #f0b90b);
  color: #181a20;
  box-shadow: 0 2px 6px rgba(252, 213, 53, 0.35);
}

.bn-sidebar-unified .ranking-item .post-title,
.bn-sidebar-unified .ranking-item .entry-title,
.bn-sidebar-unified .post-ranking .post-item .post-title,
.bn-sidebar-unified .post-ranking .post-item .entry-title,
.bn-sidebar-unified .ranking-list .post-item .post-title,
.bn-sidebar-unified .ranking-list .post-item .entry-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bn-article-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 0.2s var(--bn-article-ease);
  margin: 0;
}
.bn-sidebar-unified .ranking-item a:hover .post-title,
.bn-sidebar-unified .ranking-item a:hover .entry-title,
.bn-sidebar-unified .post-ranking .post-item:hover .post-title,
.bn-sidebar-unified .ranking-list .post-item:hover .post-title {
  color: var(--bn-article-accent);
}
.bn-sidebar-unified .ranking-item .post-meta,
.bn-sidebar-unified .ranking-list .post-item .post-meta {
  font-size: 11px;
  color: var(--bn-article-text-muted);
  margin-top: 4px;
}

/* Author card — cover banner sub-elements
   (base .bn-author-card / .bn-author-avatar moved to section 12 above) */
.bn-author-card__banner {
  position: relative;
  height: 80px;
  background: var(--bn-article-accent-gradient-soft);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bn-author-card__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--bn-article-surface) 100%);
}
.bn-author-card__body {
  position: relative;
  margin-top: -36px;
  padding: 0 20px;
  text-align: center;
}
/* Author carousel & dots ----------------------------------------------------- */
.bn-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--bn-article-border-strong);
  cursor: pointer;
  transition: all 0.28s var(--bn-article-ease);
}
.bn-carousel-dot:hover {
  background: var(--bn-article-text-muted);
}
.bn-carousel-dot.active {
  background: var(--bn-article-accent-gradient);
  width: 20px;
  box-shadow: 0 0 0 3px var(--bn-article-accent-light);
}

/* Sidebar ri-down-warp dark theme fix — keep it tidy */
[data-bs-theme="dark"] .bn-sidebar-unified .ri-down-warp {
  background: var(--bn-article-surface) !important;
  border-color: var(--bn-article-border) !important;
}
[data-bs-theme="dark"] .bn-sidebar-unified .ri-down-warp .buy-title {
  color: var(--bn-article-accent) !important;
}

/* ============================================================
 * Wave 7.4.2 — tablet-landscape tier (1024-1279)
 *
 * Single-article main+aside layout was authored at desktop (≥1280)
 * and 991.98 with no in-between tier. On 1024-1279 viewports the
 * sidebar squeezed the prose column to ~480px, breaking the
 * intended ~620px reading width. This tier:
 *   - widens the main column (66/34 split → ~700/360)
 *   - lifts TOC max-width so it doesn't truncate
 *   - tightens hero/title spacing for a more "compact desktop" feel
 * ============================================================ */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .bn-article-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
  }
  .bn-article-layout__toc {
    display: none;
  }
  .bn-article-layout__sidebar {
    grid-column: 1;
  }
  .bn-article-layout__main {
    grid-column: 2;
  }
  .bn-article-prose {
    max-width: 720px;
  }
  .bn-article-layout__main .ri-hide-warp .prices-info {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Wave 7.4.2 — tablet-portrait (768-1023): TOC becomes top-of-page
 * sticky list (replicates GitHub mobile pattern) so the article uses
 * full content width for legibility. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .bn-article-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bn-article-toc {
    position: sticky;
    top: 64px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 5;
  }
  .bn-article-prose {
    max-width: 100%;
  }
}