/* 1. 让整个网页的锚点跳转变成“平滑滑动” */
html {
    scroll-behavior: smooth;
}

/* 2. 整体左右分栏布局 */
.help-container {
    display: flex;
    max-width: 100%;
    width: 100%;
    padding: 20px 40px;
    align-items: flex-start; 
    box-sizing: border-box;
}

/* 3. 左侧导航栏 (占 1/4) */
.help-sidebar {
    flex: 1; 
    min-width: 250px;
    max-width: 350px;
    position: sticky; 
    top: 20px; 
    max-height: calc(100vh - 40px); 
    overflow-y: auto;
    background-color: #ffffff;  /* 纯白底色 */
    border-radius: 10px;        /* 和右边一样的圆角 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); /* 和右边一样的阴影 */
    padding: 30px 20px;         /* 内部留白，让文字不要贴边 */
    border: 1px solid #e9ecef;  /* 极浅的边框 */
}

.help-sidebar a {
    display: block;
    text-decoration: none;
    color: #555;
    padding: 6px 0;
    transition: color 0.2s;
}

.help-sidebar a:hover {
    color: #1f77b4;
}

.help-sidebar .level-1 {
    font-size: 18px;
    font-weight: bold;
    color: #666;
    margin-top: 15px;
    margin-bottom: 5px;
}

.help-sidebar .level-2 {
    font-size: 14px;
    padding-left: 20px; 
    color: #666;
}

.help-sidebar .level-2::before {
    content: "◦";
    margin-right: 8px;
    color: #999;
}

/* 4. 右侧内容区 (占 3/4) */
.help-content {
    flex: 3;
    padding: 40px 50px; 
    margin-left: 20px; 
    background-color: #ffffff; /* 纯白底色 */
    border-radius: 10px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 高级阴影 */
    border: 1px solid #e9ecef;  
}

.help-section {
    margin-bottom: 60px;
    scroll-margin-top: 40px; /* 标题防遮挡的呼吸空间 */
}

.help-section h2 {
    font-size: 28px;
    color: #2c3e50;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.help-section h3 {
    font-size: 20px;
    color: #333;
    margin-top: 20px;
    margin-bottom: 15px;
    scroll-margin-top: 30px;
}

.help-section p {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 15px;
}
/* 5. 极简风信息提示框 */
.help-tip-box {
    background-color: #f0f7ff; /* 极浅的蓝底色 */
    border-left: 4px solid #1f77b4; /* 专业的深蓝色左边框 */
    padding: 15px 20px;
    margin: 25px 0;
    border-radius: 0 6px 6px 0;
    color: #2c3e50;
    font-size: 15px;
    line-height: 1.6;
}
.help-tip-box strong {
    color: #1f77b4;
}