pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
/* FE/src/docs/styles/index.css */

/* Ensure body takes full height for sticky footer */
html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bs-dark-bg-subtle, #1a1a1a); /* Match dark theme bg if needed */
}

main.container {
    flex: 1 0 auto; /* Allows footer to stick to bottom if content is short */
}

footer {
    flex-shrink: 0; /* Prevents footer from shrinking */
}

.help-sidebar {
    background-color: var(--bs-body-bg); /* Use Bootstrap's body background for consistency in dark mode */
    padding: 1rem;
    border-radius: 0.375rem; /* Bootstrap card-like border radius */
}

/* On medium screens and up, add a right border to sidebar */
@media (min-width: 768px) {
    .help-sidebar {
        /* If you want a subtle border between sidebar and content on larger screens */
        /* border-right: 1px solid var(--bs-border-color-translucent); */
        padding: 1.5rem; /* More padding on larger screens */
        /* Optional: if nav list is very long and you want internal scroll for sidebar */
        /* max-height: calc(100vh - 120px); /* Adjust 120px based on navbar and footer height */
        /* overflow-y: auto; */
    }
}

.help-sidebar .nav-link {
    color: var(--bs-nav-link-color, #adb5bd); /* Use Bootstrap variable */
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    word-wrap: break-word; /* Prevent long nav titles from breaking layout */
}

.help-sidebar .nav-link:hover,
.help-sidebar .nav-link:focus {
    color: var(--bs-nav-link-hover-color, #f8f9fa);
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.05); /* Subtle hover background */
}

.help-sidebar .nav-link.active {
    color: var(--bs-primary-text-emphasis, #fff);
    background-color: var(--bs-primary, #0d6efd);
    font-weight: bold;
}

.help-sidebar h5 { /* This is for the "导航" title */
    color: var(--bs-heading-color, #f8f9fa);
    margin-bottom: 1rem;
}

.help-content {
    /* No specific background needed, will inherit from body or main container */
    /* padding: 0; -- Let Bootstrap columns handle padding or add specific if needed */
}

/* Markdown content styles (mostly unchanged, but ensure they work with Bootstrap dark theme variables) */
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
    color: var(--bs-heading-color, #f8f9fa);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    border-bottom: 1px solid var(--bs-border-color, #495057);
    padding-bottom: 0.3em;
}

.markdown-body h1:first-child {
    margin-top: 0;
}

.markdown-body h1 { font-size: 2.2rem; }
.markdown-body h2 { font-size: 1.8rem; }
.markdown-body h3 { font-size: 1.5rem; }

.markdown-body a {
    color: var(--bs-link-color, #6ea8fe);
}
.markdown-body a:hover {
    color: var(--bs-link-hover-color, #8ec0ff);
    text-decoration: underline;
}

.markdown-body p, .markdown-body li {
    line-height: 1.7;
    margin-bottom: 1rem;
    color: var(--bs-body-color);
}

.markdown-body blockquote {
    border-left: 0.25rem solid var(--bs-secondary, #6c757d);
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    color: var(--bs-secondary-text-emphasis, #adb5bd);
    background-color: var(--bs-secondary-bg-subtle, #343a40);
    border-radius: .25rem;
}

.markdown-body pre {
    padding: 1em;
    margin: 1.5em 0;
    overflow: auto;
    border-radius: 6px;
    /* highlight.js theme will control this, but set a fallback */
    background-color: #282c34;
}

.markdown-body code:not(pre code) {
    padding: .2em .4em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.1);
    border-radius: 3px;
    color: var(--bs-emphasis-color, #e6edf3);
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
    /*background-color: #fff; !* Add white background for transparent images if needed *!*/
    /*padding: 2px;*/
    /*border: 1px solid var(--bs-border-color);*/
}

.markdown-body table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    color: var(--bs-table-color, #dee2e6);
    background-color: var(--bs-table-bg, transparent);
    border: 1px solid var(--bs-table-border-color, #495057);
}

.markdown-body th, .markdown-body td {
    padding: 0.75rem;
    border: 1px solid var(--bs-table-border-color, #495057);
}

.markdown-body thead th {
    background-color: var(--bs-secondary-bg-subtle, #343a40);
    font-weight: bold;
    color: var(--bs-heading-color);
}

.markdown-body hr {
    border-top: 1px solid var(--bs-border-color);
    margin: 2rem 0;
}

.markdown-body img {
    display: block;
}

/* Ensure navbar brand text is clearly visible */
.navbar-brand {
    font-weight: bold;
}