/* ==========================================================================
   BabianPro — 26_remix style docs theme (independent implementation)
   Color: indigo #6366F1 ; Light-first ; large white space ; small radii
   ========================================================================== */

/* ----- 1. CSS Custom Properties ----- */
:root {
  --bpr-bg: #ffffff;
  --bpr-bg-soft: #fafafa;
  --bpr-bg-sidebar: #f7f7f8;
  --bpr-bg-code: #fbfbfc;
  --bpr-bg-tile: #ffffff;
  --bpr-bg-callout: #fff8db;
  --bpr-bg-callout-strong: #ffe9a8;
  --bpr-bg-announce: #4F46E5;
  --bpr-bg-announce-text: #ffffff;
  --bpr-fg: #111418;
  --bpr-fg-strong: #050608;
  --bpr-fg-muted: #5b6470;
  --bpr-fg-faint: #8d96a3;
  --bpr-fg-on-primary: #ffffff;
  --bpr-border: #e6e8ec;
  --bpr-border-soft: #eef0f3;
  --bpr-border-strong: #c9cdd3;
  --bpr-shadow-tile: 0 0 0 1px var(--bpr-border);
  --bpr-shadow-pop: 0 4px 24px -6px rgba(15,18,25,.10);
  --bpr-primary: #6366F1;
  --bpr-primary-deep: #4F46E5;
  --bpr-primary-light: #EEF0FE;
  --bpr-primary-text: #4338CA;
  --bpr-tone-blue: #3B82F6;
  --bpr-tone-green: #10B981;
  --bpr-tone-purple: #8B5CF6;
  --bpr-tone-red: #EF4444;
  --bpr-tone-amber: #F59E0B;
  --bpr-tone-teal: #14B8A6;
  --bpr-callout-border: #FBBF24;
  --bpr-radius-xs: 3px;
  --bpr-radius-sm: 4px;
  --bpr-radius-md: 6px;
  --bpr-radius-lg: 9px;
  --bpr-radius-pill: 999px;
  --bpr-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --bpr-font-mono: "SF Mono", "Menlo", "Consolas", "Liberation Mono", "Courier New", monospace;
  --bpr-w-content: 760px;
  --bpr-w-sidebar: 252px;
  --bpr-w-toc: 220px;
  --bpr-h-header: 56px;
  --bpr-h-announce: 36px;
  --bpr-z-header: 50;
  --bpr-z-announce: 49;
  --bpr-z-sidebar: 45;
  --bpr-z-overlay: 60;
}

[data-theme="dark"] {
  --bpr-bg: #0e1116;
  --bpr-bg-soft: #11151c;
  --bpr-bg-sidebar: #11151c;
  --bpr-bg-code: #161b24;
  --bpr-bg-tile: #131822;
  --bpr-bg-callout: #2a2410;
  --bpr-bg-callout-strong: #3b3416;
  --bpr-fg: #e7e9ee;
  --bpr-fg-strong: #ffffff;
  --bpr-fg-muted: #9aa3b1;
  --bpr-fg-faint: #6b7382;
  --bpr-border: #232934;
  --bpr-border-soft: #1c2230;
  --bpr-border-strong: #3a4150;
  --bpr-primary: #818CF8;
  --bpr-primary-deep: #6366F1;
  --bpr-primary-light: #2A2A52;
  --bpr-primary-text: #C7D2FE;
  --bpr-shadow-tile: 0 0 0 1px var(--bpr-border);
  --bpr-callout-border: #d97706;
}

/* ----- 2. Reset & Base ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--bpr-font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--bpr-fg);
  background: var(--bpr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--bpr-primary-text); text-decoration: none; transition: color .12s ease; }
a:hover { color: var(--bpr-primary-deep); text-decoration: underline; text-underline-offset: 2px; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }

::selection { background: var(--bpr-primary-light); color: var(--bpr-primary-text); }

/* ----- 3. Header ----- */
.bpr-header {
  position: sticky;
  top: 0;
  z-index: var(--bpr-z-header);
  height: var(--bpr-h-header);
  background: var(--bpr-bg);
  border-bottom: 1px solid var(--bpr-border);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}
.bpr-header__row {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
}
.bpr-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.4px;
  color: var(--bpr-fg-strong);
}
.bpr-brand:hover { text-decoration: none; color: var(--bpr-fg-strong); }
.bpr-brand__mark { display: inline-flex; }
.bpr-brand__name { line-height: 1; }
.bpr-iconbtn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bpr-radius-pill);
  color: var(--bpr-fg-muted);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bpr-iconbtn:hover {
  background: var(--bpr-bg-sidebar);
  color: var(--bpr-fg-strong);
}
.bpr-iconbtn--theme { position: relative; }
.bpr-theme-light, .bpr-theme-dark { display: inline-flex; }
[data-theme="light"] .bpr-theme-dark { display: none; }
[data-theme="dark"] .bpr-theme-light { display: none; }
.bpr-topnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bpr-topnav__item {
  padding: 6px 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--bpr-fg-muted);
  border-radius: var(--bpr-radius-sm);
}
.bpr-topnav__item:hover {
  color: var(--bpr-fg-strong);
  text-decoration: none;
  background: var(--bpr-bg-sidebar);
}
.bpr-topnav__item.is-active {
  color: var(--bpr-fg-strong);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--bpr-fg-strong);
}
.bpr-header__right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bpr-lang { position: relative; }
.bpr-lang__btn {
  width: auto;
  padding: 6px 10px;
  gap: 6px;
  font-size: 13.5px;
  color: var(--bpr-fg-muted);
}
.bpr-lang__cur { line-height: 1; }
.bpr-lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 156px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bpr-bg);
  border: 1px solid var(--bpr-border);
  border-radius: var(--bpr-radius-md);
  box-shadow: var(--bpr-shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index: 70;
}
.bpr-lang:hover .bpr-lang__menu,
.bpr-lang:focus-within .bpr-lang__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.bpr-lang__menu li { list-style: none; }
.bpr-lang__menu a {
  display: block;
  padding: 7px 10px;
  font-size: 13.5px;
  color: var(--bpr-fg);
  border-radius: var(--bpr-radius-xs);
}
.bpr-lang__menu a:hover {
  background: var(--bpr-bg-sidebar);
  text-decoration: none;
}
.bpr-lang__menu a.is-current {
  color: var(--bpr-primary-text);
  font-weight: 600;
}
.bpr-only-mobile { display: none; }
.bpr-only-desktop { display: inline-flex; }

/* ----- 4. Announcement bar (top of body) ----- */
.bpr-announce {
  background: linear-gradient(90deg, var(--bpr-primary) 0%, var(--bpr-primary-deep) 100%);
  color: var(--bpr-bg-announce-text);
  font-size: 13.5px;
  z-index: var(--bpr-z-announce);
}
.bpr-announce__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 22px;
  min-height: var(--bpr-h-announce);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.bpr-announce__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-block;
}
.bpr-announce__cta {
  margin-left: 4px;
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bpr-announce__cta:hover { color: #ffffff; opacity: 0.92; }

/* ----- 5. Layout shell ----- */
.bpr-shell {
  display: grid;
  grid-template-columns: var(--bpr-w-sidebar) 1fr;
  align-items: start;
  min-height: calc(100vh - var(--bpr-h-header));
}
.bpr-shell--has-sidebar { /* default — sidebar visible on desktop */ }
.bpr-main {
  min-width: 0;
  padding: 32px 56px 80px;
  background: var(--bpr-bg);
}
.bpr-main--full {
  padding: 32px 22px 80px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ----- 6. Sidebar ----- */
.bpr-sidebar {
  position: sticky;
  top: var(--bpr-h-header);
  height: calc(100vh - var(--bpr-h-header));
  overflow-y: auto;
  padding: 16px 8px 80px 16px;
  background: var(--bpr-bg-sidebar);
  border-right: 1px solid var(--bpr-border);
}
.bpr-sidebar::-webkit-scrollbar { width: 8px; }
.bpr-sidebar::-webkit-scrollbar-thumb { background: var(--bpr-border-strong); border-radius: 4px; }
.bpr-sidebar__top { padding: 4px 0 14px; }
.bpr-sidebar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bpr-bg);
  border: 1px solid var(--bpr-border);
  border-radius: var(--bpr-radius-md);
}
.bpr-sidebar__search:focus-within {
  border-color: var(--bpr-primary);
  box-shadow: 0 0 0 3px var(--bpr-primary-light);
}
.bpr-sidebar__search-ic { color: var(--bpr-fg-faint); display: inline-flex; }
.bpr-sidebar__search-in {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: var(--bpr-fg);
}
.bpr-sidebar__search-in::placeholder { color: var(--bpr-fg-faint); }
.bpr-sidebar__kbd {
  font-family: var(--bpr-font-mono);
  font-size: 11px;
  color: var(--bpr-fg-faint);
  padding: 2px 5px;
  border: 1px solid var(--bpr-border);
  border-radius: var(--bpr-radius-xs);
  background: var(--bpr-bg-soft);
}
.bpr-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.bpr-sidebar__group { padding: 2px 0; }
.bpr-sidebar__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--bpr-fg-strong);
  border-radius: var(--bpr-radius-sm);
}
.bpr-sidebar__h--clickable { cursor: pointer; user-select: none; }
.bpr-sidebar__h--clickable:hover {
  background: rgba(99,102,241,0.06);
  color: var(--bpr-primary-text);
}
.bpr-sidebar__chev {
  color: var(--bpr-fg-faint);
  display: inline-flex;
  transform: rotate(90deg);
  transition: transform .15s ease;
}
.bpr-sidebar__group.is-collapsed .bpr-sidebar__chev { transform: rotate(0deg); }
.bpr-sidebar__group.is-collapsed .bpr-sidebar__list--inner { display: none; }
.bpr-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 2px 0 6px 0;
}
.bpr-sidebar__list li { list-style: none; }
.bpr-sidebar__link {
  display: block;
  padding: 5px 10px 5px 22px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bpr-fg-muted);
  border-left: 2px solid transparent;
  border-radius: 0 var(--bpr-radius-xs) var(--bpr-radius-xs) 0;
  text-decoration: none;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.bpr-sidebar__link:hover {
  color: var(--bpr-fg-strong);
  background: rgba(99,102,241,0.05);
  text-decoration: none;
}
.bpr-sidebar__link.is-active {
  color: var(--bpr-primary-text);
  font-weight: 600;
  border-left-color: var(--bpr-primary);
  background: var(--bpr-primary-light);
}
.bpr-sidebar__link--head {
  font-weight: 600;
  color: var(--bpr-fg);
}

/* ----- 7. Document container & breadcrumb ----- */
.bpr-doc {
  max-width: var(--bpr-w-content);
  margin: 0 auto;
}
.bpr-doc--page { max-width: var(--bpr-w-content); }
.bpr-doc--home { max-width: 880px; }
.bpr-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--bpr-fg-faint);
  margin: 0 0 18px;
}
.bpr-crumb__link { color: var(--bpr-fg-muted); }
.bpr-crumb__link:hover { color: var(--bpr-fg-strong); text-decoration: none; }
.bpr-crumb__sep { color: var(--bpr-fg-faint); }
.bpr-crumb__cur { color: var(--bpr-fg); }
.bpr-doc__head {
  margin: 4px 0 28px;
}
.bpr-doc__head--hero {
  margin: 8px 0 36px;
  padding-bottom: 6px;
}
.bpr-doc__h1 {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -1.2px;
  font-weight: 900;
  color: var(--bpr-fg-strong);
}
.bpr-doc__h1--mega {
  font-size: 52px;
  letter-spacing: -1.6px;
}
.bpr-doc__lede {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--bpr-fg-muted);
}
.bpr-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--bpr-fg-faint);
}
.bpr-doc__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bpr-doc__meta-sep { color: var(--bpr-fg-faint); opacity: 0.6; }
.bpr-chip {
  padding: 2px 9px;
  background: var(--bpr-primary-light);
  color: var(--bpr-primary-text);
  border-radius: var(--bpr-radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.bpr-chip:hover { text-decoration: none; opacity: 0.9; }

/* ----- 8. Article body 2-col layout (prose + TOC) ----- */
.bpr-doc__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bpr-w-toc);
  gap: 48px;
  align-items: start;
}

/* ----- 9. Prose (typography for markdown body) ----- */
.bpr-prose {
  min-width: 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--bpr-fg);
}
.bpr-prose > * { margin-top: 0; margin-bottom: 1em; }
.bpr-prose > *:first-child { margin-top: 0; }
.bpr-prose h2 {
  margin: 2em 0 0.6em;
  padding-top: 6px;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.6px;
  font-weight: 800;
  color: var(--bpr-fg-strong);
  scroll-margin-top: calc(var(--bpr-h-header) + 18px);
}
.bpr-prose h3 {
  margin: 1.6em 0 0.5em;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  font-weight: 700;
  color: var(--bpr-fg-strong);
  scroll-margin-top: calc(var(--bpr-h-header) + 18px);
}
.bpr-prose h4 {
  margin: 1.3em 0 0.4em;
  font-size: 17px;
  font-weight: 700;
  color: var(--bpr-fg-strong);
}
.bpr-prose p { margin: 0.9em 0; }
.bpr-prose strong { font-weight: 700; color: var(--bpr-fg-strong); }
.bpr-prose em { font-style: italic; }
.bpr-prose ul, .bpr-prose ol { padding-left: 26px; }
.bpr-prose li { margin: 0.35em 0; }
.bpr-prose ul li::marker { color: var(--bpr-fg-faint); }
.bpr-prose blockquote {
  margin: 1.2em 0;
  padding: 12px 16px 12px 20px;
  border-left: 3px solid var(--bpr-primary);
  background: var(--bpr-primary-light);
  color: var(--bpr-fg);
  border-radius: 0 var(--bpr-radius-md) var(--bpr-radius-md) 0;
  font-style: normal;
}
.bpr-prose blockquote > p { margin: 0.4em 0; }
.bpr-prose hr {
  border: 0;
  height: 1px;
  background: var(--bpr-border);
  margin: 2em 0;
}
.bpr-prose a {
  color: var(--bpr-primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(99,102,241,0.4);
  text-decoration-thickness: 1.2px;
}
.bpr-prose a:hover {
  color: var(--bpr-primary-deep);
  text-decoration-color: currentColor;
}

/* heading anchor links */
.bpr-prose h2 a.heading-anchor,
.bpr-prose h3 a.heading-anchor {
  color: var(--bpr-fg-strong);
  text-decoration: none;
}
.bpr-prose h2 a.heading-anchor:hover,
.bpr-prose h3 a.heading-anchor:hover {
  color: var(--bpr-primary);
}

/* inline code */
.bpr-prose code {
  font-family: var(--bpr-font-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  background: var(--bpr-bg-sidebar);
  color: var(--bpr-primary-text);
  border-radius: var(--bpr-radius-xs);
  border: 1px solid var(--bpr-border-soft);
}
.bpr-prose pre {
  margin: 1.2em 0;
  padding: 16px 18px;
  background: var(--bpr-bg-code);
  border: 1px solid var(--bpr-border);
  border-radius: var(--bpr-radius-md);
  overflow-x: auto;
  line-height: 1.6;
  font-size: 13.5px;
}
.bpr-prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--bpr-fg);
  font-size: 1em;
}

/* tables */
.bpr-prose table {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--bpr-bg);
  border: 1px solid var(--bpr-border);
  border-radius: var(--bpr-radius-md);
  overflow: hidden;
}
.bpr-prose thead { background: var(--bpr-bg-sidebar); }
.bpr-prose th, .bpr-prose td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--bpr-border);
  vertical-align: top;
}
.bpr-prose th {
  font-weight: 700;
  color: var(--bpr-fg-strong);
  font-size: 13.5px;
}
.bpr-prose tbody tr:last-child td { border-bottom: 0; }
.bpr-prose tbody tr:hover { background: var(--bpr-bg-sidebar); }

/* ----- 10. Code block component (homepage explicit) ----- */
.bpr-codeblock {
  margin: 1.4em 0;
  background: var(--bpr-bg-code);
  border: 1px solid var(--bpr-border);
  border-radius: var(--bpr-radius-md);
  overflow: hidden;
}
.bpr-codeblock__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: var(--bpr-bg-sidebar);
  border-bottom: 1px solid var(--bpr-border);
  font-size: 12px;
  color: var(--bpr-fg-muted);
}
.bpr-codeblock__lang {
  font-family: var(--bpr-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-transform: lowercase;
}
.bpr-codeblock__copy {
  background: transparent;
  border: 1px solid var(--bpr-border);
  color: var(--bpr-fg-muted);
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: var(--bpr-radius-xs);
}
.bpr-codeblock__copy:hover {
  color: var(--bpr-fg-strong);
  border-color: var(--bpr-border-strong);
}
.bpr-codeblock__copy.is-copied {
  color: var(--bpr-tone-green);
  border-color: var(--bpr-tone-green);
}
.bpr-codeblock pre {
  margin: 0;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--bpr-font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bpr-fg);
  overflow-x: auto;
}
.bpr-codeblock .tk-comment { color: #5b6470; font-style: italic; }
.bpr-codeblock .tk-keyword { color: #B4318A; font-weight: 600; }
.bpr-codeblock .tk-string  { color: #16A34A; }
[data-theme="dark"] .bpr-codeblock .tk-comment { color: #8d96a3; }
[data-theme="dark"] .bpr-codeblock .tk-keyword { color: #F472B6; }
[data-theme="dark"] .bpr-codeblock .tk-string  { color: #4ADE80; }

/* ----- 11. Callout (yellow info banner — Remix-style) ----- */
.bpr-callout {
  position: relative;
  margin: 1.4em 0;
  background: var(--bpr-bg-callout);
  border: 1px solid var(--bpr-callout-border);
  border-left-width: 3px;
  border-radius: var(--bpr-radius-sm);
  padding: 14px 18px;
}
.bpr-callout__inner {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bpr-fg);
}
.bpr-callout strong { color: var(--bpr-fg-strong); }
.bpr-callout a {
  color: var(--bpr-primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bpr-callout--info {
  background: var(--bpr-bg-callout);
  border-color: var(--bpr-callout-border);
}
.bpr-callout--warn {
  background: #ffe2d6;
  border-color: #f97316;
}
.bpr-callout--ok {
  background: #d7f7e8;
  border-color: #10b981;
}

/* ----- 12. Tile / Card grid (homepage section cards) ----- */
.bpr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 1.4em 0;
}
.bpr-tile {
  display: block;
  padding: 22px 24px 24px;
  background: var(--bpr-bg-tile);
  border: 1px solid var(--bpr-border);
  border-radius: var(--bpr-radius-sm);
  color: var(--bpr-fg);
  transition: border-color .12s ease, transform .12s ease;
  text-decoration: none;
}
.bpr-tile:hover {
  border-color: var(--bpr-border-strong);
  text-decoration: none;
  transform: translateY(-1px);
}
.bpr-tile__title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.bpr-tile__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bpr-fg-muted);
}
.bpr-tile__list {
  margin: 12px 0 0;
  padding-left: 18px;
  list-style: disc;
  font-size: 13px;
  color: var(--bpr-fg-muted);
}
.bpr-tile__list li { margin: 3px 0; }
.bpr-tile__count {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--bpr-fg-faint);
}
.bpr-tile--blue   .bpr-tile__title { color: var(--bpr-tone-blue); }
.bpr-tile--green  .bpr-tile__title { color: var(--bpr-tone-green); }
.bpr-tile--purple .bpr-tile__title { color: var(--bpr-tone-purple); }
.bpr-tile--red    .bpr-tile__title { color: var(--bpr-tone-red); }
.bpr-tile--amber  .bpr-tile__title { color: var(--bpr-tone-amber); }
.bpr-tile--teal   .bpr-tile__title { color: var(--bpr-tone-teal); }

/* ----- 13. Deep list (overflow categories, more entries) ----- */
.bpr-deeplist {
  list-style: none;
  margin: 1em 0 1.4em;
  padding: 0;
  border-top: 1px solid var(--bpr-border-soft);
}
.bpr-deeplist li {
  padding: 11px 4px;
  border-bottom: 1px solid var(--bpr-border-soft);
  font-size: 14.5px;
}
.bpr-deeplist a { color: var(--bpr-fg); }
.bpr-deeplist a strong { color: var(--bpr-fg-strong); }
.bpr-deeplist a:hover { color: var(--bpr-primary-text); }
.bpr-deeplist__desc { color: var(--bpr-fg-muted); }

/* ----- 14. Post list (latest articles) ----- */
.bpr-postlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bpr-postlist__item {
  padding: 16px 0;
  border-bottom: 1px solid var(--bpr-border-soft);
}
.bpr-postlist__item:first-child { padding-top: 6px; }
.bpr-postlist__item:last-child { border-bottom: 0; }
.bpr-postlist__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--bpr-fg-strong);
  letter-spacing: -0.2px;
  text-decoration: none;
}
.bpr-postlist__title:hover {
  color: var(--bpr-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bpr-postlist__meta {
  margin: 6px 0 4px;
  font-size: 12.5px;
  color: var(--bpr-fg-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bpr-postlist__chip {
  padding: 1px 8px;
  background: var(--bpr-primary-light);
  color: var(--bpr-primary-text);
  border-radius: var(--bpr-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
}
.bpr-postlist__desc {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bpr-fg-muted);
}
.bpr-viewall {
  margin: 14px 0 4px;
  font-size: 14.5px;
}
.bpr-viewall a { font-weight: 600; }

/* ----- 15. TOC ----- */
.bpr-toc {
  font-size: 13px;
  line-height: 1.55;
}
.bpr-toc__sticky {
  position: sticky;
  top: calc(var(--bpr-h-header) + 24px);
  max-height: calc(100vh - var(--bpr-h-header) - 60px);
  overflow-y: auto;
  padding-bottom: 24px;
}
.bpr-toc__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bpr-fg-strong);
  letter-spacing: 0.2px;
}
.bpr-toc__title--small { font-size: 12px; opacity: 0.85; }
.bpr-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bpr-toc__item { margin: 0; }
.bpr-toc__item a {
  display: block;
  padding: 4px 0 4px 10px;
  color: var(--bpr-fg-muted);
  font-size: 13px;
  line-height: 1.5;
  border-left: 1px solid transparent;
  text-decoration: none;
  transition: color .12s ease, border-color .12s ease;
}
.bpr-toc__item--lv3 a { padding-left: 22px; font-size: 12.5px; }
.bpr-toc__item a:hover { color: var(--bpr-fg-strong); }
.bpr-toc__item a.is-active {
  color: var(--bpr-primary-text);
  border-left-color: var(--bpr-primary);
  font-weight: 600;
}
.bpr-toc__related { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bpr-border-soft); }
.bpr-toc__list--plain a { padding-left: 0; border-left: 0; }
.bpr-toc__list--plain a:hover { color: var(--bpr-primary-text); }

/* ----- 16. Prev / Next ----- */
.bpr-prevnext {
  margin: 56px 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border-top: 1px solid var(--bpr-border);
  padding-top: 28px;
}
.bpr-prevnext__item {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--bpr-border);
  border-radius: var(--bpr-radius-md);
  background: var(--bpr-bg);
  color: var(--bpr-fg);
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.bpr-prevnext__item:hover {
  border-color: var(--bpr-primary);
  background: var(--bpr-primary-light);
  color: var(--bpr-fg-strong);
  text-decoration: none;
}
.bpr-prevnext__lab {
  display: block;
  font-size: 12px;
  color: var(--bpr-fg-faint);
  margin-bottom: 4px;
}
.bpr-prevnext__t {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--bpr-fg-strong);
}
.bpr-prevnext__next { text-align: right; }
.bpr-prevnext__placeholder { display: block; }

/* ----- 16b. Post-after related links ----- */
.bpr-postafter {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: var(--bpr-bg-sidebar);
  border: 1px solid var(--bpr-border-soft);
  border-radius: var(--bpr-radius-md);
}
.bpr-postafter__title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bpr-fg-strong);
  margin-bottom: 10px;
}
.bpr-postafter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.bpr-postafter__list li { font-size: 13.5px; }
.bpr-postafter__list a { color: var(--bpr-fg-muted); text-decoration: none; }
.bpr-postafter__list a:hover { color: var(--bpr-primary-text); }

/* ----- 17. Pager (pagination) ----- */
.bpr-pager {
  margin: 36px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.bpr-pager__btn,
.bpr-pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 34px;
  padding: 0 12px;
  font-size: 13.5px;
  border: 1px solid var(--bpr-border);
  border-radius: var(--bpr-radius-sm);
  color: var(--bpr-fg);
  background: var(--bpr-bg);
  text-decoration: none;
}
.bpr-pager__btn:hover,
.bpr-pager__num:hover {
  border-color: var(--bpr-primary);
  color: var(--bpr-primary-text);
  text-decoration: none;
}
.bpr-pager__num.is-current {
  background: var(--bpr-primary);
  color: #ffffff;
  border-color: var(--bpr-primary);
  font-weight: 700;
}
.bpr-pager__btn.is-disabled {
  color: var(--bpr-fg-faint);
  cursor: not-allowed;
  background: var(--bpr-bg-sidebar);
}

/* ----- 18. FAQ block ----- */
.bpr-faq {
  margin: 1em 0 0;
  border: 1px solid var(--bpr-border);
  border-radius: var(--bpr-radius-md);
  background: var(--bpr-bg);
  overflow: hidden;
}
.bpr-faq__item {
  border-bottom: 1px solid var(--bpr-border-soft);
}
.bpr-faq__item:last-child { border-bottom: 0; }
.bpr-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px 14px 38px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bpr-fg-strong);
  position: relative;
  transition: background .12s ease, color .12s ease;
}
.bpr-faq__q::-webkit-details-marker { display: none; }
.bpr-faq__q::before {
  content: "+";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--bpr-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.bpr-faq__item[open] .bpr-faq__q::before { content: "−"; }
.bpr-faq__q:hover { background: var(--bpr-bg-sidebar); }
.bpr-faq__a {
  padding: 0 18px 16px 38px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--bpr-fg);
}
.bpr-faq__a > p { margin: 0 0 0.6em; }
.bpr-faq__a > p:last-child { margin-bottom: 0; }

/* ----- 19. Buttons ----- */
.bpr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--bpr-radius-md);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--bpr-border);
  background: var(--bpr-bg);
  color: var(--bpr-fg);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.bpr-btn:hover {
  border-color: var(--bpr-primary);
  color: var(--bpr-primary-text);
  text-decoration: none;
}
.bpr-btn--primary {
  background: var(--bpr-primary);
  color: #ffffff;
  border-color: var(--bpr-primary);
}
.bpr-btn--primary:hover {
  background: var(--bpr-primary-deep);
  color: #ffffff;
  border-color: var(--bpr-primary-deep);
}

/* ----- 20. 404 ----- */
.bpr-404 {
  max-width: 480px;
  margin: 80px auto;
  padding: 0 22px;
  text-align: center;
}
.bpr-404__code {
  font-size: 88px;
  font-weight: 900;
  letter-spacing: -3px;
  color: var(--bpr-primary);
  line-height: 1;
  margin-bottom: 10px;
}
.bpr-404__title {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
  color: var(--bpr-fg-strong);
}
.bpr-404__body {
  font-size: 15px;
  color: var(--bpr-fg-muted);
  margin: 0 0 26px;
}

/* ----- 21. Footer ----- */
.bpr-footer {
  margin-top: 40px;
  background: var(--bpr-bg);
  border-top: 1px solid var(--bpr-border);
}
.bpr-footer__main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 22px 26px;
  display: grid;
  grid-template-columns: 1.4fr 3fr;
  gap: 36px;
  align-items: start;
}
.bpr-footer__brand { max-width: 320px; }
.bpr-footer__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--bpr-fg-strong);
  margin-bottom: 8px;
}
.bpr-footer__tag {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--bpr-fg-muted);
  margin: 0;
}
.bpr-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.bpr-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bpr-footer__col li {
  list-style: none;
  margin: 0 0 7px;
  font-size: 13.5px;
}
.bpr-footer__col a {
  color: var(--bpr-fg-muted);
  text-decoration: none;
}
.bpr-footer__col a:hover { color: var(--bpr-primary-text); text-decoration: none; }
.bpr-footer__h {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bpr-fg-strong);
  margin-bottom: 12px;
}
.bpr-footer__lang { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.bpr-footer__lang li { margin: 0; }
.bpr-footer__lang a.is-current { color: var(--bpr-primary-text); font-weight: 600; }
.bpr-footer__divider {
  height: 1px;
  background: var(--bpr-border);
  max-width: 1280px;
  margin: 0 auto;
}
.bpr-footer__bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--bpr-fg-faint);
  line-height: 1.6;
}
.bpr-footer__rights { color: var(--bpr-fg-muted); }
.bpr-footer__risk { color: var(--bpr-fg-faint); font-size: 12px; }

/* ----- 22. Misc helpers ----- */
.bpr-only-mobile { display: none !important; }
.bpr-only-desktop { display: inline-flex !important; }

/* ----- 23. Responsive ----- */
@media (max-width: 1180px) {
  :root { --bpr-w-toc: 200px; }
  .bpr-main { padding: 28px 36px 60px; }
  .bpr-doc__body { gap: 32px; }
}

@media (max-width: 1024px) {
  .bpr-doc__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .bpr-toc { display: none; }
  .bpr-grid { grid-template-columns: 1fr; }
  .bpr-footer__main { grid-template-columns: 1fr; }
  .bpr-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root {
    --bpr-w-sidebar: 240px;
  }
  .bpr-only-mobile { display: inline-flex !important; }
  .bpr-only-desktop { display: none !important; }
  .bpr-shell--has-sidebar { grid-template-columns: 1fr; }
  .bpr-sidebar {
    position: fixed;
    top: var(--bpr-h-header);
    left: 0;
    width: var(--bpr-w-sidebar);
    height: calc(100vh - var(--bpr-h-header));
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: var(--bpr-z-sidebar);
    box-shadow: 0 6px 18px rgba(15,18,25,.08);
  }
  .bpr-sidebar.is-open { transform: translateX(0); }
  .bpr-main { padding: 22px 18px 60px; }
  .bpr-topnav { display: none; }
  .bpr-doc__h1 { font-size: 30px; letter-spacing: -0.8px; }
  .bpr-doc__h1--mega { font-size: 36px; }
  .bpr-doc__lede { font-size: 16px; }
  .bpr-prose h2 { font-size: 23px; }
  .bpr-prose h3 { font-size: 18px; }
  .bpr-prevnext { grid-template-columns: 1fr; }
  .bpr-prevnext__next { text-align: left; }
  .bpr-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .bpr-header__row { padding: 0 14px; gap: 8px; }
  .bpr-brand__name { display: none; }
  .bpr-lang__cur { display: none; }
  .bpr-announce__inner { padding: 8px 14px; font-size: 12.5px; }
  .bpr-doc__h1 { font-size: 26px; }
  .bpr-doc__h1--mega { font-size: 30px; }
  .bpr-footer__cols { grid-template-columns: 1fr; }
}

/* ----- 24. Print ----- */
@media print {
  .bpr-header, .bpr-sidebar, .bpr-toc, .bpr-footer, .bpr-prevnext, .bpr-pager, .bpr-announce { display: none !important; }
  .bpr-shell--has-sidebar { grid-template-columns: 1fr; }
  .bpr-main { padding: 0; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ----- 25. Skip-link / focus visible ----- */
:focus-visible {
  outline: 2px solid var(--bpr-primary);
  outline-offset: 2px;
  border-radius: var(--bpr-radius-xs);
}
.bpr-skip {
  position: absolute; left: -9999px; top: -9999px;
}
.bpr-skip:focus { left: 12px; top: 12px; z-index: 100; padding: 8px 14px; background: var(--bpr-primary); color: #fff; border-radius: var(--bpr-radius-md); }

/* end of style.css */