/* 左侧导航样式 */
.sticky-sidebar {
    position: sticky;
    top: 20px;  /* 距离顶部的距离 */
    height: calc(100vh - 40px);  /* 视窗高度减去上下边距 */
    overflow-y: auto;  /* 内容过多时显示滚动条 */
    padding-bottom: 20px;  /* 底部内边距 */
}

/* 美化滚动条 */
.sticky-sidebar::-webkit-scrollbar {
    width: 6px;
}

.sticky-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sticky-sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.sticky-sidebar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 导航项样式 */
.list-group-item {
    border: none;
    border-radius: 4px !important;
    margin-bottom: 5px;
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.list-group-item.active {
    background-color: #0d6efd !important;
    color: white !important;
    border: none;
}

/* 内容区段落样式 */
.content-section {
    margin-bottom: 2rem;
    padding: 1rem;
}

/* 卡片图片样式 */
.card-img-top {
    height: 200px;  /* 固定高度 */
    object-fit: cover;  /* 保持图片比例并填充容器 */
    object-position: center;  /* 居中显示 */
}

/* 代码块样式 */
pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .sticky-sidebar {
        position: static;
        height: auto;
        margin-bottom: 20px;
    }
}