/* 帮助中心 · 左侧目录布局 v2026.09 */

.docs-hub-shell {

    display: flex;

    align-items: flex-start;

    gap: 0;

    width: 100%;

    max-width: none;

    margin: 0;

    padding: 0 20px 48px;

    box-sizing: border-box;

}



.docs-hub-sidebar {

    flex: 0 0 240px;

    width: 240px;

    position: sticky;

    top: 88px;

    max-height: calc(100vh - 100px);

    overflow-y: auto;

    padding: 16px 12px 24px 0;

    border-right: 1px solid var(--of-border, #e2e8f0);

    background: linear-gradient(180deg, #f8fafc 0%, #fff 120px);

}



.docs-hub-sidebar__head {

    padding: 0 8px 12px;

    border-bottom: 1px solid var(--of-border, #e2e8f0);

    margin-bottom: 12px;

}



.docs-hub-sidebar__head a {

    font-weight: 700;

    font-size: 1rem;

    color: var(--of-text, #0f172a);

    text-decoration: none;

}



.docs-hub-sidebar__head a:hover {

    color: var(--of-primary, #2563eb);

}



.docs-hub-sidebar__ver {

    display: block;

    margin-top: 6px;

    font-size: 0.75rem;

    color: var(--of-muted, #64748b);

}



.docs-hub-nav-group {

    margin-bottom: 14px;

}



.docs-hub-nav-group__title {

    display: block;

    width: 100%;

    text-align: left;

    padding: 8px 10px;

    margin: 0;

    border: none;

    border-radius: 8px;

    background: transparent;

    font-size: 0.8125rem;

    font-weight: 700;

    color: var(--of-muted, #64748b);

    cursor: pointer;

    letter-spacing: 0.02em;

}



.docs-hub-nav-group__title:hover,

.docs-hub-nav-group.is-open .docs-hub-nav-group__title,

.docs-hub-nav-group.is-active .docs-hub-nav-group__title {

    background: #eff6ff;

    color: var(--of-primary, #2563eb);

}



.docs-hub-nav-group__list {

    list-style: none;

    margin: 4px 0 0;

    padding: 0 0 0 8px;

    display: none;

}



.docs-hub-nav-group.is-open .docs-hub-nav-group__list,

.docs-hub-nav-group.is-active .docs-hub-nav-group__list {

    display: block;

}



.docs-hub-nav-group__list a {

    display: block;

    padding: 6px 10px;

    margin: 2px 0;

    border-radius: 6px;

    font-size: 0.8125rem;

    color: var(--of-text, #0f172a);

    text-decoration: none;

    line-height: 1.45;

}



.docs-hub-nav-group__list a:hover {

    background: #f1f5f9;

    text-decoration: none;

}



.docs-hub-nav-group__list a.is-active {

    background: #dbeafe;

    color: var(--of-primary-dark, #1d4ed8);

    font-weight: 600;

}



.docs-hub-main {

    flex: 1;

    min-width: 0;

    width: 100%;

    padding: 0 0 0 28px;

}



.docs-hub-main .page-hero {

    padding-top: 32px;

    padding-bottom: 24px;

}



.docs-hub-main .page-hero .container,

.docs-hub-main .section .container {

    max-width: none;

    width: 100%;

    padding-left: 0;

    padding-right: 0;

}



/* 正文与卡片占满主栏，避免右侧大块空白 */

.docs-hub-main .doc-layout {

    max-width: none;

    width: 100%;

    margin: 0;

}



.docs-hub-main .page-hero .sub {

    max-width: 52em;

}



.docs-hub-main .doc-card-grid {

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 18px;

}



.docs-hub-main .doc-card p {

    line-height: 1.55;

}



.docs-hub-intro {

    background: var(--of-card, #fff);

    border: 1px solid var(--of-border, #e2e8f0);

    border-radius: 14px;

    padding: 24px 28px;

    margin-bottom: 28px;

}



.docs-hub-intro h2 {

    margin: 0 0 12px;

    font-size: 1.35rem;

}



.docs-hub-intro p,

.docs-hub-intro li {

    color: var(--of-muted, #64748b);

    margin: 0 0 10px;

    line-height: 1.65;

}



.docs-hub-intro ul {

    margin: 12px 0;

    padding-left: 1.25rem;

}



.docs-hub-arch {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 12px;

    margin: 16px 0;

}



.docs-hub-arch__item {

    padding: 14px 16px;

    border-radius: 10px;

    border: 1px solid var(--of-border, #e2e8f0);

    background: #f8fafc;

}



.docs-hub-arch__item strong {

    display: block;

    margin-bottom: 6px;

    color: var(--of-primary, #2563eb);

}



.docs-hub-arch__item span {

    font-size: 0.8125rem;

    color: var(--of-muted, #64748b);

    line-height: 1.55;

}



.docs-hub-section {

    margin-bottom: 36px;

}



.docs-hub-section[hidden] {

    display: none !important;

}



.docs-hub-section__head h2 {

    margin: 0 0 6px;

    font-size: 1.25rem;

}



.docs-hub-section__head p {

    margin: 0;

    color: var(--of-muted, #64748b);

    font-size: 0.9375rem;

    line-height: 1.6;

}



.docs-hub-filter-hint {

    font-size: 0.8125rem;

    color: var(--of-muted, #64748b);

    margin-bottom: 16px;

}



.docs-hub-section .lead {

    line-height: 1.65;

}



@media (max-width: 960px) {

    .docs-hub-shell {

        flex-direction: column;

        padding: 0 16px 32px;

    }

    .docs-hub-sidebar {

        position: relative;

        top: 0;

        width: 100%;

        flex: none;

        max-height: none;

        border-right: none;

        border-bottom: 1px solid var(--of-border, #e2e8f0);

        padding-bottom: 16px;

    }

    .docs-hub-main {

        padding-left: 0;

    }

    .docs-hub-main .doc-card-grid {

        grid-template-columns: 1fr;

    }

}