#S2-Header {
    background-color: var(--bs-sidebar-bg);
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-main-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--col-gap);
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.05));
}

#S3-Header .header-main-toolbar {
    background: linear-gradient(0deg, transparent 0, rgb(var(--bs-body-bg-rgb)) 0.75rem);
    border-bottom:none;
}

/* ====== 基础样式 ====== */
/* 标题区域 - 最大程度占用空间 */
.header-main-toolbar .header-title-section {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

/* 操作按钮区域 - 固定宽度 */
.header-main-toolbar .header-action-section {
    flex: 0 0 auto;
    display: flex;
    gap: var(--col-gap);
    white-space: nowrap;
}

/* 标题文本样式 */
.header-title-section>* {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ====== 模式1: title+action (左右布局) ====== */
/* HTML结构: <div class="header-title-section"> + <div class="header-action-section"> */
.header-main-toolbar>.header-title-section:first-child:not(:last-child) {
    justify-content: flex-start;
    /* 标题左对齐 */
    text-align: left;
}

/* ====== 模式2: action+title+action (左中右布局) ====== */
/* HTML结构: <div class="header-action-section"> + <div class="header-title-section"> + <div class="header-action-section"> */
.header-main-toolbar>.header-action-section:first-child~.header-title-section {
    justify-content: center;
    /* 移动端：居中 */
    text-align: center;
}

/* 电脑端：标题左对齐 */
@media (min-width: 768px) {
    .header-main-toolbar>.header-action-section:first-child~.header-title-section {
        justify-content: flex-start;
        /* 电脑端：左对齐 */
        text-align: left;
    }
}

/* ====== 响应式调整 ====== */
/* 手机端优化：确保操作按钮不会被挤压得太小 */
@media (max-width: 767px) {
    .header-main-toolbar {
        gap: calc(var(--col-gap) / 2);
    }

    .header-main-toolbar .header-action-section {
        gap: calc(var(--col-gap) / 2);
    }
}
.header-sub-header {
    position: sticky;
    top: 0;
    background-color: var(--bs-sidebar-bg);
    z-index: 5;
}
.header-sub-header>.nav {
    width: 100%;
    flex-wrap: nowrap;
}

.header-sub-header>.nav .nav-item {
    width: 100%;
    text-align: center;
}

#S2-Header~.header-sub-header,#S2-Header~#S2-Body>.header-sub-header {
    position: sticky;
    top: 4.5rem;
}