/* Markdown CMS - Dark Theme Styles */

/* ===== Global Dark Theme ===== */
:root {
    --bg-primary: #0d1117;       /* GitHub dark bg */
    --bg-secondary: #161b22;     /* Card/surface bg */
    --bg-tertiary: #21262d;      /* Elevated surface */
    --border-color: transparent;  /* 2026-09-20 用户要求：去掉全站装饰性边框 */
    --border-line: transparent;   /* 2026-09-20 用户要求：表格行线也去掉（原本只用它保留表格线） */
    --text-primary: #f0f6fc;     /* 2026-09-20 起全站正文统一亮白（用户要求） */
    --text-secondary: #f0f6fc;   /* 统一亮白：保留变量名以兼容既有规则，风格上不再有灰字层级 */
    --text-tertiary: #f0f6fc;    /* 同上：统一亮白 */
    --accent-blue: #58a6ff;      /* Blue accent */
    --accent-blue-hover: #79c0ff;
    --accent-green: #3fb950;
    --accent-orange: #d29922;
    --code-bg: #1c2128;          /* Inline code bg */
    --mark-bg: rgba(187, 128, 9, 0.35); /* Highlight bg */
    --mark-text: #f0f6fc;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.5);
}

/* ===== Icons - Force ALL icons to bright white ===== */
.bi,
.bi::before,
[class^="bi-"],
[class*=" bi-"],
i[class*="bi"],
.navbar-toggler-icon,
svg.bi,
svg:not(.hljs *) {
    color: #f0f6fc !important;
    fill: #f0f6fc !important;
}
/* Exception: keep branded/functional icon colors where needed */
.btn-primary .bi,
.btn-primary i,
.btn-outline-primary .bi,
.btn-outline-primary i {
    color: #fff !important;
}
/* Hero section badges with icons */
.hero-section .badge .bi,
.hero-section .badge i {
    color: #f0f6fc !important;
}

/* Body */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ===== Hero Section ===== */
.hero-section {
    background: linear-gradient(135deg, #1f3a5f 0%, #1a2e4a 50%, #0d1b2a 100%) !important;
    border: 1px solid var(--border-color);
}
.hero-section .badge {
    color: var(--text-primary) !important;
    border-width: 0;   /* 2026-09-20 用户要求：去掉装饰性边框 */
    background: rgba(255,255,255,0.06) !important;
}
.hero-section h1 {
    color: #fff;
}
.hero-section p {
    color: #f0f6fc;
}

/* ===== Article Cards ===== */
.article-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border-radius: 0.75rem;
    overflow: hidden;
}
.article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover) !important;
    border-color: var(--accent-blue) !important;
}
.article-card .card-title a {
    color: var(--text-primary) !important;
}
.article-card .card-title a:hover {
    color: var(--accent-blue) !important;
}
.article-card .card-text {
    color: #f0f6fc !important;
}
.article-card .badge.bg-secondary {
    background-color: var(--bg-tertiary) !important;
    color: #f0f6fc !important;
    border: 1px solid var(--border-color);
}

/* ===== Category Cards ===== */
.category-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 0.75rem;
}
.category-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--accent-blue) !important;
    background-color: var(--bg-tertiary) !important;
}

/* ===== 文章阅读面板（2026-09-10 可读性改造） =====
   body::before 的二次元背景图保留为站点装饰（导航/页脚照旧），但正文阅读区
   改为不透明底。原因（真实浏览器实测）：文章页正文此前直接压在背景图上，
   图片亮部让正文所在区域 18.6% 的像素对比度低于 WCAG AA 4.5:1（最差
   3.93:1，40/40 张随机背景图都不达标），且背景亮度波动大（标准差 0.043）
   持续干扰阅读。改后正文与面板对比度恒定 16.02:1，背景完全均匀。 */
main.reading-pane {
    background-color: var(--bg-primary);   /* #0d1117 不透明，与 body 同色 */
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: var(--card-shadow);
    padding-left: clamp(1rem, 2.5vw, 2rem);
    padding-right: clamp(1rem, 2.5vw, 2rem);
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}
/* 面板内中文正文行距略放宽，利于长段落连续阅读 */
main.reading-pane .article-content {
    line-height: 1.85;
}

/* ===== Article Content ===== */
.article-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--text-primary);
    /* 长 URL/长单词自动折行，防止移动端横向溢出（2026-08-16） */
    overflow-wrap: break-word;
    word-break: break-word;
}
.article-content a {
    word-break: break-all;
}
.article-content h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: #f0f6fc;
}
.article-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #f0f6fc;
}
.article-content p {
    margin-bottom: 1rem;
    color: var(--text-primary);
}
.article-content ul, .article-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
.article-content li {
    margin-bottom: 0.35rem;
    color: var(--text-primary);
}
/* Inline code */
.article-content code:not(pre code) {
    background-color: var(--code-bg);
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.9em;
    color: #ff7bcf;
    border: 1px solid var(--border-color);
}
/* Code blocks (pre) */
.article-content pre {
    background-color: #151b23 !important;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    position: relative;
}
.article-content pre code {
    background: none;
    color: #f0f6fc;
    padding: 0;
    font-size: 0.875rem;
    border: none;
}
/* Blockquotes */
.article-content blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    background-color: rgba(88, 166, 255, 0.08);
    border-radius: 0.5rem;
    border-left: 4px solid var(--accent-blue) !important;
    color: #f0f6fc;
}
.article-content blockquote p:last-child {
    margin-bottom: 0;
}
/* Images */
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
}
/* Tables */
.article-content table {
    margin-bottom: 1.25rem;
    color: #f0f6fc;
    /* 窄屏表格横向滚动（与 .table-wrapper 方案一致，2026-08-16 修复移动端溢出） */
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.article-content .table {
    --bs-table-bg: var(--bg-secondary);
    --bs-table-color: #f0f6fc;
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    --bs-table-border-color: var(--border-line);   /* 现已透明（用户要求全去）*/
    --bs-table-hover-bg: rgba(255,255,255,0.05);
}
.article-content .table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.25rem;
    position: relative;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
}
.article-content .table-wrapper table {
    margin-bottom: 0;
    white-space: nowrap;
}
.article-content .table-wrapper th,
.article-content .table-wrapper td {
    white-space: nowrap;
    vertical-align: middle;
    border-color: var(--border-line);   /* 现已透明（用户要求全去）*/
}
.article-content .table-wrapper::after {
    content: '⟫';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #f0f6fc;
    font-size: 14px;
    opacity: 0.3;
    animation: scrollHint 2s ease-in-out infinite;
    pointer-events: none;
    transition: opacity 0.5s;
}
.article-content .table-wrapper:hover::after,
.article-content .table-wrapper.is-scrolled::after {
    opacity: 0;
}
@keyframes scrollHint {
    0%, 100% { opacity: 0.15; transform: translateY(-50%) translateX(0); }
    50% { opacity: 0.5; transform: translateY(-50%) translateX(4px); }
}
@media (hover: none) {
    .article-content .table-wrapper::after {
        display: none;
    }
}
.article-content hr {
    margin: 2rem 0;
    color: var(--border-color);
    opacity: 1;
}
/* Links in article content */
.article-content a {
    color: var(--accent-blue);
}
.article-content a:hover {
    color: var(--accent-blue-hover);
}

/* ===== Article Header Meta ===== */
.article-header .text-muted {
    color: #f0f6fc !important;
}
.article-header .text-muted a {
    color: #f0f6fc !important;
}
.article-header .text-muted a:hover {
    color: #fff !important;
}

/* ===== Table of Contents ===== */
.toc {
    border-left: 3px solid transparent;   /* 2026-09-20 用户要求：连蓝色竖条也去掉（保留 3px 占位，文字位置不变） */
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
}
.toc h6 {
    color: #f0f6fc;
}

/* 目录里三级标题的缩进（2026-10-03 由内联 style 改为 class：内联样式违反 style-src 'self'） */
.toc-sub {
    padding-left: 1.2rem;
}
.toc ul li a {
    color: #f0f6fc;
    font-size: 0.9rem;
    padding: 0.2rem 0;
    display: block;
    transition: color 0.15s ease;
}
.toc ul li a:hover {
    color: var(--accent-blue);
}

/* ===== Tag Cloud ===== */
.tag-cloud a {
    transition: transform 0.15s ease;
    display: inline-block;
}
.tag-cloud a:hover {
    transform: scale(1.05);
}
.tag-cloud .card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* ===== Sticky Sidebar ===== */
@media (min-width: 992px) {
    .position-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* ===== Sidebar Cards ===== */
.card.border-0.shadow-sm {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color) !important;
}
.card.border-0.shadow-sm .card-title {
    color: #f0f6fc;
}
.card.border-0.shadow-sm .card-body,
.card.border-0.shadow-sm .small,
.card.border-0.shadow-sm li {
    color: #f0f6fc !important;
}
.card.border-0.shadow-sm a {
    color: #f0f6fc;
}
.card.border-0.shadow-sm a:hover {
    color: #fff;
}

/* ===== Breadcrumb ===== */
.breadcrumb {
    background-color: var(--bg-secondary);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #f0f6fc;
}
.breadcrumb-item a {
    color: #f0f6fc;
}
.breadcrumb-item a:hover {
    color: #fff;
}
.breadcrumb-item.active {
    color: #f0f6fc;
}

/* ===== Search Results ===== */
#searchResults .card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color) !important;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
#searchResults .card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-blue) !important;
}
#searchResults .card .card-title a {
    color: #f0f6fc !important;
}
#searchResults .card .card-title a:hover {
    color: var(--accent-blue) !important;
}
#searchResults .card .card-text {
    color: #f0f6fc !important;
}

/* ===== Search Page Input ===== */
#searchInput.form-control {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
#searchInput.form-control:focus {
    background-color: var(--bg-secondary);
    border-color: var(--accent-blue);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.25rem rgba(88, 166, 255, 0.15);
}
#searchInput.form-control::placeholder {
    color: #f0f6fc;
}

/* ===== Footer ===== */
footer,
footer .text-muted,
footer small,
footer .small {
    color: #f0f6fc !important;
}
footer a {
    color: #f0f6fc !important;
}
footer a:hover {
    color: #fff !important;
}

/* ===== Smooth scrolling ===== */
/* ===== Code blocks (global - applies to doc/service pages too) ===== */
pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
pre code {
    white-space: pre;
    word-break: normal;
    word-wrap: normal;
    overflow-wrap: normal;
}

/* ===== Tables in card body (doc/service pages) - no cell wrapping ===== */
.card-body table.table {
    white-space: nowrap;
}
.card-body table.table th,
.card-body table.table td {
    white-space: nowrap;
    vertical-align: middle;
}
/* If table overflows card, make card-body scroll horizontally */
.card-body:has(table.table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html {
    scroll-behavior: smooth;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem !important;
    }
    .hero-section h1 {
        font-size: 1.75rem;
    }
    .hero-section p {
        font-size: 1rem;
    }
    .article-content {
        font-size: 1rem;
    }
}

/* ===== Print styles ===== */
@media print {
    .navbar, footer, .toc, .position-sticky, .breadcrumb, .badge {
        display: none !important;
    }
    .article-content {
        font-size: 12pt;
    }
    .col-lg-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}



/* ===== Pagination ===== */
/* ── 移动端分页：只保留「上一页」/「页码」/「下一页」三行，页码独占一行（2026-09-19 用户要求）──
   原来手机上是「< 上一页 1 2 3 …」挤在一行、而「下一页 >」被挤到下一行，很别扭。
   做法：首尾 li 各占满整行（flex-basis:100%）并居中 → 中间页码自然落到中间那一行。 */
@media (max-width: 767.98px) {
    .pagination.justify-content-center {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 6px;
        margin-bottom: 0;
    }
    .pagination .page-item:first-child,
    .pagination .page-item:last-child {
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
        margin: 0;
    }
    .pagination .page-item:first-child { order: 0; }
    .pagination .page-item:last-child  { order: 2; }
    .pagination .page-item:not(:first-child):not(:last-child) { order: 1; }
}

.pagination .page-link {
    border-radius: 0.375rem;
    margin: 0 2px;
    color: #f0f6fc;
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
    background-color: var(--bg-secondary);
}
.pagination .page-link:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-blue);
    color: #fff;
}
.pagination .page-item.active .page-link {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    color: #f0f6fc;
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    opacity: 0.6;
}

/* ===== Friend Links in Footer ===== */
.friend-links a {
    padding: 6px 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.friend-links a:hover {
    background: rgba(255,255,255,0.06);
    color: #fff !important;
}
.friend-links a strong {
    display: block;
    color: #f0f6fc;
    transition: color 0.2s;
}
.friend-links a:hover strong {
    color: #fff;
}
.friend-links .text-light-emphasis {
    color: #f0f6fc !important;
    font-size: 0.85em;
}

/* ===== Navbar Search ===== */
.search-nav-form {
    max-width: 220px;
}
.search-nav-input {
    min-width: 100px;
    max-width: 160px;
}
.search-nav-input.form-control {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: #f0f6fc;
}
.search-nav-input.form-control:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-blue);
    color: #f0f6fc;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.2);
}
.search-nav-input.form-control::placeholder {
    color: #f0f6fc;
}

@media (max-width: 767.98px) {
    .search-nav-form {
        max-width: none;
        flex: 1;
    }
    .search-nav-input {
        max-width: none;
        min-width: 80px;
    }
    .navbar-brand {
        font-size: 0.95rem;
    }
    .navbar-brand i {
        font-size: 1rem;
    }
}

/* ===== Navbar Search Dropdown ===== */
.search-nav-wrap {
    /* 仅放搜索图标按钮：不设最小宽度，固定不换行 */
    flex-shrink: 0;
    margin-left: 8px;
}
.nav-search-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 9999;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    max-height: 420px;
    overflow-y: auto;
    margin-top: 4px;
    min-width: 300px;
}
.nav-search-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 14px;
    color: #f0f6fc;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
    line-height: 1.4;
}
.nav-search-item:last-of-type {
    border-bottom: none;
}
.nav-search-item:hover {
    background: rgba(88, 166, 255, 0.08);
    color: #fff;
}
.nav-search-item .nav-search-cat {
    flex-shrink: 0;
    font-size: 0.7rem;
    margin-right: 8px;
    margin-top: 2px;
    white-space: nowrap;
    line-height: 1.4;
}
/* Title text: allow natural break for mixed CJK/Latin text */
.nav-search-item .nav-search-title {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
}
.nav-search-all {
    color: #f0f6fc;
    font-size: 0.85rem;
    border-top: 1px solid var(--border-color);
    font-weight: 500;
}
.nav-search-all:hover {
    color: #fff;
    background: rgba(88, 166, 255, 0.05);
}
/* Search dropdown hint */
.nav-search-hint {
    cursor: default !important;
    justify-content: center;
    color: #f0f6fc !important;
    font-size: 0.85rem;
    padding: 14px !important;
}
.nav-search-hint:hover {
    background: transparent !important;
    color: #f0f6fc !important;
}
@media (max-width: 767.98px) {
    .nav-search-dropdown {
        position: fixed;
        top: 56px;
        left: 8px;
        right: 8px;
        min-width: auto;
        max-height: 60vh;
    }
    .search-nav-wrap {
        flex: 0 0 auto;
        margin-left: 4px;
    }
}

/* ===== Bootstrap Overrides for Dark Theme ===== */
/* Navbar */
.navbar {
    border-bottom: 1px solid var(--border-color);
}
.navbar-brand {
    color: #f0f6fc !important;
}
.navbar .nav-link {
    color: #f0f6fc !important;
    transition: color 0.15s;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff !important;
}
.navbar .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);   /* 装饰性描边：已随 --border-color 一起去掉 */
}
.navbar .dropdown-item {
    color: #f0f6fc;
}
.navbar .dropdown-item:hover {
    background-color: rgba(88, 166, 255, 0.08);
    color: #fff;
}
.navbar .dropdown-item .badge {
    background-color: var(--bg-tertiary) !important;
    color: #f0f6fc;
}
.navbar .navbar-toggler {
    /* 2026-09-19 用户要求：去掉 ☰ 周围的边框 —— 与搜索按钮一致（那个也是 border:none）。
       注意：去掉边框后盒子窄 2px、里面的三道杠整体右移 1px，视觉边界随之变化 → 间距要一起重算。 */
    border: 0 none !important;
    padding: 4px 12px;
}
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:focus-visible {
    outline: none;
    box-shadow: none;
}
.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(240,246,252,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    filter: none;
}

/* Dropdown in dark theme */
.dropdown-menu {
    --bs-dropdown-bg: var(--bg-secondary);
    --bs-dropdown-border-color: var(--border-color);
    --bs-dropdown-link-color: #f0f6fc;
    --bs-dropdown-link-hover-bg: rgba(88, 166, 255, 0.08);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-active-bg: var(--accent-blue);
    --bs-dropdown-link-active-color: #fff;
}

/* Badges */
.badge.bg-secondary {
    background-color: var(--bg-tertiary) !important;
    color: #f0f6fc !important;
    border: 1px solid var(--border-color);
}

/* Article page info text */
.text-muted {
    color: #f0f6fc !important;
}

/* Category/home badge */
.badge.bg-primary {
    background-color: #1f6feb !important;
    color: #fff !important;
}
a.badge.bg-primary:hover {
    background-color: var(--accent-blue) !important;
}

/* Sidebar button outline */
.btn-outline-primary {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}
.btn-outline-primary:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

/* Buttons */
.btn-primary {
    background-color: #1f6feb !important;
    border-color: #1f6feb !important;
}
.btn-primary:hover {
    background-color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}

/* Mark highlight in search results */
mark {
    background-color: var(--mark-bg) !important;
    color: #f0f6fc !important;
    border-radius: 3px;
    padding: 0 3px;
}

/* ===== Code Block Copy Button ===== */
.article-content pre .btn-dark {
    background-color: rgba(33, 38, 45, 0.85) !important;
    border: 1px solid var(--border-color);
    color: #f0f6fc !important;
    transition: all 0.2s;
}
.article-content pre .btn-dark:hover {
    background-color: rgba(33, 38, 45, 1) !important;
    color: #fff !important;
}
.article-content pre .btn-dark.btn-success {
    background-color: var(--accent-green) !important;
    border-color: var(--accent-green);
    color: #fff !important;
}

/* ===== Highlight.js GitHub Dark loads separately ===== */
/* Ensure code block readability */
.hljs {
    background: #151b23 !important;
}

/* ===== 文章代码块增强：左侧行号槽 + 超长代码块折叠（2026-09-24） =====
   结构：.code-block > .code-body(唯一滚动容器) > .code-grid(flex) > .code-gutter + pre>code
   · 行号由 main.js 填充（hljs 会整体重写 <code>，服务端塞进去会被抹掉）→ 无 JS 时不出现空列
   · 折叠状态在服务端就渲染好（.is-collapsed），避免"先展开再收起"的闪动 */
.code-block {
    --cms-lh: 1.85;        /* 实测文章代码行高 = 14px × 1.85 = 25.9px */
    --cms-preview: 20;     /* 折叠时预览行数，需与 PHP 常量 CMS_CODE_PREVIEW_LINES 一致 */
    --cms-code-bg: #151b23;
    position: relative;
    margin-bottom: 1.25rem;
    background-color: var(--cms-code-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    line-height: var(--cms-lh);
}
.code-block .code-body {
    font-size: 0.875rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.code-block.is-collapsed .code-body {
    max-height: calc(var(--cms-lh) * 1em * var(--cms-preview) + 1.6rem);
}
.code-block .code-grid {
    display: flex;
    align-items: flex-start;
    min-width: max-content;
}
.code-block .code-gutter {
    display: none;             /* 无 JS 时不显示空列 */
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 auto;
    padding: 1rem 0.9rem 1rem 1rem;
    text-align: right;
    color: #8b949e;
    background-color: var(--cms-code-bg);
    border-right: 1px solid rgba(240, 246, 252, 0.07);
    user-select: none;
    -webkit-user-select: none;
    white-space: pre;
    font-variant-numeric: tabular-nums;
}
.code-block.has-gutter .code-gutter { display: block; }
.code-block pre,
.article-content .code-block pre {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 1rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;   /* 横向滚动交给 .code-body，避免嵌套滚动条 */
    max-width: none !important;
    font-size: 0.875rem !important; /* 覆盖 Bootstrap 给 pre 的缩小字号(12.25px)，与代码/行号统一 14px */
}
.code-block pre code {
    font-size: 0.875rem !important; /* 与原 .article-content pre code 相同：14px（勿用 1em，会继承 pre 的缩小字号） */
    padding: 0 !important;
    background: none !important;
    overflow: visible !important;   /* 去掉主题给 code.hljs 的 overflow-x:auto，只保留 .code-body 一个滚动条 */
}
/* 展开/收起工具栏（折叠时渐变遮罩贴在它上方，不遮挡按钮） */
.code-block .code-toggle-bar {
    position: relative;
    text-align: center;
    padding: 0.15rem 0 0.4rem;
    background-color: var(--cms-code-bg);
}
.code-block.is-collapsed .code-toggle-bar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 90px;
    background: linear-gradient(to bottom, rgba(21, 27, 35, 0), #151b23);
    pointer-events: none;
}
.code-block .code-toggle {
    background: transparent;
    border: none;
    color: #8b949e;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0.25rem 1.1rem;
    border-radius: 0.375rem;
    transition: color 0.2s, background-color 0.2s;
}
.code-block .code-toggle:hover,
.code-block .code-toggle:focus-visible {
    color: #f0f6fc;
    background-color: rgba(240, 246, 252, 0.08);
}
/* 复制按钮现挂在 .code-block 上（原来只匹配 .article-content pre .btn-dark） */
.code-block .btn-dark {
    background-color: rgba(33, 38, 45, 0.85) !important;
    border: 1px solid var(--border-color);
    color: #f0f6fc !important;
    transition: all 0.2s;
}
.code-block .btn-dark:hover {
    background-color: rgba(33, 38, 45, 1) !important;
    color: #fff !important;
}
.code-block .btn-dark.btn-success {
    background-color: var(--accent-green) !important;
    border-color: var(--accent-green);
    color: #fff !important;
}

/* ===== 文章配图：点击查看大图（Viewer.js，本地托管 assets/vendor/viewerjs/）=====
   资源由文章页按需注入（只有正文真有配图的页面才加载），无 viewer 时下面的规则也无副作用 */
.article-content img.article-zoomable {
    cursor: zoom-in;
}
.cms-viewer {
    z-index: 2147483000 !important;   /* 压过回顶按钮(z=99999)与各模态(z=1055) */
}
.cms-viewer .viewer-title {
    font-size: 0.9rem;
    opacity: 0.85;
}
/* 库默认 @media(max-width:1199px) 隐藏 放大/缩小/1:1/复位/旋转 按钮（认为触摸手势可替代），
   但手机上没有旋转手势 → 这里强制保留全部按钮（8 个按钮总宽约 200px，390px 视口可容纳）。
   vendor CSS 是运行时注入的、排在 style.v21.css 之后，故必须用 !important 才压得住。 */
.cms-viewer .viewer-toolbar .viewer-hide-md-down {
    display: block !important;
}

/* ===== Navbar Search Button ===== */
/* Prevent white background on focus/active from hiding the white icon */
.search-nav-form .btn-outline-light {
    color: #f0f6fc;
    border-color: transparent;   /* 2026-09-20 用户要求：按钮描边也去掉 */
}
.search-nav-form .btn-outline-light:hover,
.search-nav-form .btn-outline-light:focus,
.search-nav-form .btn-outline-light:active,
.search-nav-form .btn-outline-light:focus-visible,
.search-nav-form .btn-outline-light:first-child:active {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--accent-blue) !important;
    color: #f0f6fc !important;
    box-shadow: none !important;
}
.search-nav-form .btn-outline-light .bi {
    color: #f0f6fc !important;
}





/* ===== Body scroll lock when mobile navbar open ===== */
body.nav-open {
    overflow: hidden;
}
@media (min-width: 992px) {
    body.nav-open {
        overflow: visible;
    }
}



/* 移动端展开导航菜单时隐藏顶部栏搜索框（收起状态保留搜索） */
body.nav-open .search-nav-wrap { display: none !important; }

/* 桌面 UA（含手机桌面模式）：强制显示导航菜单、隐藏汉堡按钮 */
.navbar-always-expand .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
}
.navbar-always-expand .navbar-toggler {
    display: none !important;
}

/* 桌面模式（navbar-always-expand）：导航项强制横排一行 */
.navbar-always-expand .container {
    flex-wrap: nowrap !important; /* 强制不换行：logo+菜单+搜索始终一行，放不下由 fitNav 收进"更多" */
}
.navbar-always-expand .navbar-nav {
    flex-direction: row !important;
}
/* 菜单项文字强制单行（不换行），溢出由 fitNav 折叠进"更多" */
.navbar-always-expand .navbar-nav .nav-link {
    white-space: nowrap;
}
.navbar-always-expand .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.navbar-always-expand .navbar-toggler {
    display: none !important;
}

/* "更多"下拉菜单：强制绝对定位（不撑开导航栏高度），在按钮下方展开，宽度适配窄屏 */
#moreNavMenu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    max-width: 85vw !important;
    min-width: 10rem !important;
}

/* 桌面模式：导航菜单项之间加间隔 */
.navbar-always-expand .navbar-nav > .nav-item {
    margin-right: 0.75rem;
}
.navbar-always-expand .navbar-nav > .nav-item:last-child {
    margin-right: 0;
}

/* 搜索弹窗内：结果列表正常文档流显示（不绝对定位） */
#searchModal .nav-search-dropdown {
    position: static !important;
    min-width: 0 !important;
    margin-top: 8px !important;
}

/* 桌面模式：更多下拉强制绝对定位（Bootstrap 窄视口默认 static 会撑开导航高度） */
.navbar-always-expand .navbar-nav .dropdown-menu {
    position: absolute !important;
}

/* 搜索图标按钮：去掉边框（纯图标无框，2026-08 用户要求） */
.search-nav-wrap .btn-outline-light {
    border: none !important;
}
/* 搜索图标按钮：点击/聚焦时不填充背景色（Bootstrap outline 默认会变白） */
.search-nav-wrap .btn-outline-light:hover,
.search-nav-wrap .btn-outline-light:focus,
.search-nav-wrap .btn-outline-light:active,
.search-nav-wrap .btn-outline-light:focus-visible {
    background-color: transparent !important;
    border: none !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* 导航栏 flex order：
   移动端（默认）：按钮组(☰+🔍) order 2 在菜单前 → 展开菜单时☰与logo同行不换行；菜单 order 3 换行到下一行
   桌面模式（always-expand）：菜单 order 2 中间、按钮组 order 3 最右 → logo→菜单→🔍 */
#navbarNav { order: 3; }
.nav-actions { order: 2; }
.navbar-always-expand #navbarNav { order: 2; }
.navbar-always-expand .nav-actions { order: 3; }

/* 移动端：导航按钮组内搜索图标在 ☰ 左边（顺序：🔍 ↑ ☰） */
.nav-actions .search-nav-wrap { order: 1; }
.nav-actions .navbar-toggler { order: 3; }

/* ===== Back to Top Buttons（2026-08 分场景版）===== */
/* 基础：圆形图标按钮，opacity 显隐（.show 控制），不用 visibility（移动端 WebKit 卡死 bug） */
.back-top-btn {
    width: 38px; height: 38px;
    border: none; border-radius: 50%;
    background: #58a6ff; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease, background .2s ease;
    flex-shrink: 0;
    position: relative; /* 百分比/图标两种内容绝对定位叠放（2026-09-16） */
    z-index: 99999;
}
.back-top-btn:hover { background: #79c0ff; }
.back-top-btn.show { opacity: 1; pointer-events: auto; }

/* 桌面回顶按钮：fixed 右下角，仅桌面/手机桌面模式显示（非桌面模式场景隐藏） */
#backToTop {
    position: fixed;
    right: 30px; bottom: 30px;
    display: none;
}
/* ⚠️ 按钮在 body 末尾（非 navbar 后代），场景判断用 body:has() 而非 .navbar-always-expand 后代选择器 */
body:has(.navbar-always-expand) #backToTop { display: flex; }

/* 桌面端 / 手机桌面模式：悬浮回顶按钮改毛玻璃（2026-09-18 用户要求，与全站同一套参数）
   注：导航栏内那个百分比按钮（#backToTopMobile）另有一套规则（透明底），ID 选择器优先级更高，不受此处影响 */
#backToTop {
    background: rgba(13, 17, 23, var(--glass-float, .25)) !important;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .30);
    color: #ffffff !important;
}
#backToTop:hover {
    background: rgba(30, 39, 51, calc(var(--glass-float, .25) + .09)) !important;
    color: #ffffff !important;
}
#backToTop .back-top-pct { color: #ffffff !important; }
#backToTop i { color: #ffffff !important; }

/* 移动端回顶按钮：导航栏按钮组内（小号），仅非桌面模式显示 */
#backToTopMobile {
    /* 2026-09-19 第四次调整（用户定稿：**图标不动**）：
       盒子固定 46px —— 比最宽的 "100%"(45.1px) 大一点，三种位数都能完整放下、永不外溢。
       代价（几何必然，见下方注释）：文字居中在固定盒里，视觉净空 = 18 + (46 − 墨迹宽)/2
       → 一位数 28.5px / 两位数 23.5px / 三位数 18.5px（波动 ~10px = 一个数字宽）。
       要做到"视觉净空完全恒为 18px"，只能让盒子贴合文字，但那样位数变化时搜索图标会跟着平移
       （v16 的做法）—— 两者不可兼得，用户选择了图标不动。 */
    width: 46px;
    height: 31px;
    /* 2026-09-19 定稿（☰ 去掉边框后重算）。量“视觉净空”必须按用户看得见的边界：
       · 左：搜索按钮无边框（border:none）→ 可见边界 = 放大镜墨迹右缘 ≈ searchBtn.right − 8（btn-sm 右内边距）
       · 右：☰ 现在也**无边框**了 → 可见边界 = 三道杠墨迹左缘 = toggler.left + padding(12) + SVG 内缩(≈3.5) ≈ +15.5
       设 % 墨迹在 46px 盒内左右各内缩 off，则
         左净空 = margin-left  + off + 8
         右净空 = margin-right + off + 15.5
       要相等 → margin-left = margin-right + 7.5；两侧和取 36px（控件位置不变）→ 22px / 14px。
       （历史坑：☰ 有边框时以“边框盒”为界 → 那时该用 14/22；边框一去，参考点整体右移 ~15.5px，数值翻回来。
        曾经把“三道杠墨迹”与“边框盒”混用，导致方向搞反，用户当场指出。） */
    /* 2026-09-19 用户第二次定稿：“去掉边框后间距看起来有点大了”，要调小。
       实测比例（“64%”状态）：左净空 = margin-left + 13.5，右净空 = margin-right + 20.5
       （13.5 = 搜索按钮 8px 内边距 + 百分比墨迹在 46px 盒内的内缩 5.5；
         20.5 = 同样 5.5 + ☰ 无边框后的内缩 15（padding 12 + SVG 3））
       取左右都 ≈29.5px（比 21/15 时的 34.5/35.5 收 5.5px，回到用户觉得“不大”的量级）→ 16px / 9px。
       同步把隐藏态的 margin-right 从 18px 收到 6.5px，让“搜索↔☰”也是 29.5px（之前隐藏态是 41.5px，明显比两侧大）。 */
    margin-left: 16px; margin-right: 9px;
    /* 百分比区域本身就压在二次元蒙版上，不再给蓝色圆底，只保留亮白字（见下方 .back-top-btn-sm 覆盖） */
    background: none !important;
    order: 2; /* 在搜索图标(order 1)和☰(order 3)中间 */
    position: relative;
    transition: opacity .15s ease, background .2s ease, width .25s ease, margin .25s ease;
}
/* 隐藏时按钮宽度归零（不占位），但**保留 margin-right = 18px** ——
   这样百分比复位隐藏后，搜索图标与 ☰ 之间仍是 18px 的固定间距（2026-09-19 用户要求 14px → 18px） */
#backToTopMobile:not(.show) {
    width: 0 !important;
    margin-left: 0 !important;
    /* 6.5px 盒间距 → 可视净空 8 + 6.5 + 15 = 29.5px，与显示态两侧一致（原来是 18px 盒间距、可视 41.5px） */
    margin-right: 6.5px !important;
}
/* 两种内容（滚动百分比 / 回顶图标）绝对定位叠放，用 opacity 交叉淡变
   —— 移动端与桌面端/手机桌面模式的悬浮按钮共用（2026-09-16 用户要求两端一致） */
.back-top-btn i,
.back-top-btn .back-top-pct {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .15s ease; /* 平滑淡入淡出（.15s：2026-09-16 再调快，配合全程 1.0s） */
}
.back-top-btn i { opacity: 0; }
.back-top-btn .back-top-pct {
    font-weight: 600; line-height: 1;
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums; /* 数字等宽，滚动时不左右抖动 */
    opacity: 1;
}
/* 回顶动画阶段②③：百分比淡出、图标淡入 */
.back-top-btn.phase-icon i { opacity: 1; }
.back-top-btn.phase-icon .back-top-pct { opacity: 0; }
/* 分场景字号：移动端按钮 31px，桌面悬浮按钮 38px */
#backToTopMobile i { font-size: .9rem; }
#backToTopMobile .back-top-pct { font-size: .9375rem; /* 2026-09-19 二次调整：9.92px → 13px → 15px（用户反馈仍偏小） */ }
/* 移动端百分比：仍走共用的"绝对定位 + 居中"写法（父盒 46px 固定），
   与桌面悬浮按钮 #backToTop（38px 圆）行为一致，无需覆盖。 */
#backToTop .back-top-pct { font-size: .72rem; }
body:has(.navbar-always-expand) #backToTopMobile { display: none !important; }

/* 移动端回顶百分比：透明底 + 亮白字（2026-09-18 用户要求，背景已是二次元蒙版）
   注意桌面悬浮按钮 #backToTop 仍保留蓝色圆底 —— 它飘在正文上方，没有蒙版兜底 */
#backToTopMobile { box-shadow: none !important; }
#backToTopMobile:hover { background: none !important; }
#backToTopMobile .back-top-pct { color: #ffffff !important; }

/* ===== 回顶按钮上方的 chevron（2026-09-20 用户要求：百分比上面加 bi-chevron-compact-up）=====
   ⚠️ 它也是 <i>，会被上面通用的「.back-top-btn i { opacity: 0 }」按隐藏处理 ——
      所以必须带自己的类 .back-top-chev 并把 opacity 提回来，否则永远看不见。
   ⚠️ #backToTopMobile i 是 ID 选择器（1,0,1），会压过纯类规则 → 字号必须用同形的 ID 选择器写。
   回顶动画阶段②③（.phase-icon）只留大箭头，chevron 隐去，避免两个箭头叠在一起。 */
.back-top-btn .back-top-chev { opacity: 1; }
#backToTop .back-top-chev { top: 25%; font-size: .95rem; }
#backToTop .back-top-pct { top: 68%; }
#backToTopMobile .back-top-chev { top: 20%; font-size: .78rem; }
#backToTopMobile .back-top-pct { top: 69%; }
.back-top-btn.phase-icon .back-top-chev { opacity: 0; }
#backToTopMobile i { color: #ffffff !important; }

/* 导航菜单分场景（2026-08）：桌面/桌面模式用"更多"下拉；移动端直接显示全部项 */
/* 更多下拉：仅桌面/手机桌面模式显示 */
.nav-more-desktop { display: none; }
body:has(.navbar-always-expand) .nav-more-desktop { display: block; }
/* 第 5 项起的移动端直显版：仅移动端（非桌面模式）显示 */
.nav-more-mobile { display: none; }
body:not(:has(.navbar-always-expand)) .nav-more-mobile { display: block; }

/* ===== 导航单行自适应（2026-09-10 改版，配合 navbar.php 的动态"更多"）=====
   背景：UA 判定为"桌面"（含手机浏览器"桌面模式"，UA 无 Mobile 标记）时 JS 给 .navbar 加
   navbar-always-expand 强制展开导航；390px 视口塞不下 8 个导航项 → 整页横向溢出 108px。
   方案：横排场景强制单行 nowrap（绝不换行、绝不撑破视口），放不下的项由脚本搬进"更多"下拉。
   注意：不要用 overflow-x:auto 兜底——会把"更多"下拉（absolute 定位）裁掉。 */
.navbar-always-expand .navbar-nav {
    flex-wrap: nowrap !important;
}
.navbar-always-expand .navbar-nav > .nav-item {
    flex: 0 0 auto;
}
/* 早期静态拆分（前4项 + nav-more-desktop/mobile）已废弃：类名保留只为兜底隐藏 */
.nav-more-desktop, .nav-more-mobile { display: none !important; }
/* "更多"压成纯图标（仅极端窄视口下由脚本加 .compact） */
#navMoreItem.compact .more-label { display: none; }
#navMoreItem.compact .nav-link { padding-left: .4rem; padding-right: .4rem; }
/* 注：此处原有一个多余的 '}'（老版本遗留），会让 Chrome 丢弃紧随其后的规则，2026-09-19 已删除 */

/* ===== 移动端导航控件尺寸（2026-09-19 用户要求：搜索图标偏小）=====
   作用域 body:not(:has(.navbar-always-expand)) = 真机移动端（非"桌面模式"）；
   桌面端与手机桌面模式的搜索图标保持原样 14px。
   注意：搜索按钮是 btn-sm，图标字号由 .bi 继承按钮 font-size，这里直接放大图标本身；
   按钮盒子会随字号自动变大（30→34→37px 宽），两侧 18px 间距规则不变。 */
body:not(:has(.navbar-always-expand)) .nav-actions .search-nav-wrap .btn i {
    font-size: 1.3125rem; /* 2026-09-19 二次调整：14px → 18px → 21px（用户反馈仍偏小） */
}


/* ========================================================================
   目录浮层（2026-09-22）
   需求：移动端在导航栏「搜索图标 → 回顶百分比按钮」之间放目录按钮；
        桌面端 / 手机桌面模式在右下角按钮组里、回顶按钮上方放目录按钮；
        两者都只在文章页显示，点击后弹出目录、点条目平滑滚动到对应位置。
   实现：Bootstrap modal（与站内搜索弹窗同一套），按钮用 data-bs-toggle 打开，
        链接点击后的关弹窗 + 滚动逻辑在 main.js 里。
   ======================================================================== */

/* ① 移动端导航栏目录按钮：与搜索按钮**同尺寸**（2026-09-27 用户：“调成跟其他按钮一样的大小”）
   做法：盒子上改用与搜索按钮同一套 Bootstrap 组件（btn btn-outline-light btn-sm，见 navbar.php），
        图标字号与搜索图标一致（21px）⇒ 盒子 37×39.5、图标 21px，与搜索按钮逐像素相同。
        （原先写死 width/height 31×31、padding 0、图标 18px，比邻居明显小一圈。） */
.toc-nav-btn {
    border: 0 none; background: none;
    color: #ffffff; cursor: pointer; flex-shrink: 0;
    order: 2;                     /* 搜索(order1) → 目录(2) → 回顶(3) → ☰(4) */
    /* 间距：净空 = margin + 常数（见 cms-frontend-patterns/references/mobile-nav-button-spacing.md）
       左侧邻居是搜索按钮（无边框，右侧内边距 8px）→ 左净空 = margin-left + 图标内缩(现为盒子内边距 8px) + 8
       右侧邻居是回顶百分比按钮（自身 margin-left:16px，墨迹内缩 5.5px）
       → 为保持既有的「两侧各 ~29.5px」不变，这里取 margin-left: 14px、margin-right: 0 */
    margin-left: 14px; margin-right: 0;
    transition: opacity .15s ease, background .2s ease;
}
.toc-nav-btn i { font-size: 1.3125rem; color: #ffffff !important; }  /* = 搜索图标 21px */
/* 悬停反馈交给 theme.css 的 .btn-outline-light 统一规则（与搜索按钮一致），不再单独压掉 */

/* 给目录按钮腾出 order 2，原「回顶=2 / ☰=3」整体后移一位（选择器同形、写在文件末尾故生效） */
#backToTopMobile { order: 3; }
.nav-actions .navbar-toggler { order: 4; }

/* ② 桌面 / 手机桌面模式：右下角悬浮目录按钮，紧贴回顶按钮上方（回顶 bottom:30px + 38px 高 + 10px 间隔） */
#tocFab {
    position: fixed;
    right: 30px; bottom: 78px;
    display: none;                /* 仅桌面模式显示（与 #backToTop 同一套判断） */
    width: 38px; height: 38px;
    border-radius: 50%;
    align-items: center; justify-content: center;
    background: rgba(13, 17, 23, var(--glass-float, .25)) !important;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .30);
    color: #ffffff !important;
    cursor: pointer; padding: 0;
    z-index: 99999;
    transition: opacity .15s ease, background .2s ease;
}
#tocFab i { font-size: 1.05rem; color: #ffffff !important; }
#tocFab:hover { background: rgba(30, 39, 51, calc(var(--glass-float, .25) + .09)) !important; color: #ffffff !important; }
body:has(.navbar-always-expand) #tocFab { display: flex; }

/* ③ 目录弹窗内的条目列表（深色，与站内搜索弹窗一致） */
.toc-panel { display: flex; flex-direction: column; }
.toc-panel .toc-panel-item {
    color: #f0f6fc;
    text-decoration: none;
    padding: .55rem .25rem;
    font-size: .95rem; line-height: 1.4;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transition: color .15s ease;
}
.toc-panel .toc-panel-item:last-child { border-bottom: 0; }
.toc-panel .toc-panel-item:hover { color: var(--accent-blue); }
.toc-panel .toc-panel-sub { padding-left: 1.5rem; font-size: .875rem; color: var(--text-secondary); }
.toc-panel .toc-panel-sub:hover { color: var(--accent-blue); }

/* ④ 锚点跳转不被吸顶导航遮住（原内联目录同样受益；数值按导航栏实测高度留余量） */
.article-content h2, .article-content h3 { scroll-margin-top: 84px; }
@media (max-width: 991.98px) {
    .article-content h2, .article-content h3 { scroll-margin-top: 72px; }
}

/* 桌面 / 手机桌面模式：导航栏里的目录按钮隐藏 —— 该场景由右下角悬浮按钮承担，
   与 #backToTopMobile 同一套判断（否则桌面会同时出现导航栏 + 悬浮两个目录按钮） */
body:has(.navbar-always-expand) #tocNavBtn { display: none !important; }