/* 全局和背景 */
body, html {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa;
    /* 关键：确保 html 和 body 都有100%的高度 */
    height: 100%; 
    color: #333;
    font-size: 16px;
    /* 防止因内容过多出现不必要的滚动条 */
    overflow: hidden; 
}

/* 新增主应用容器 */
.app-container {
    display: flex;
    /* 使用 100% 继承 body 的高度，而不是 100vh */
    height: 100%; 
}

/* --- 侧边栏全新设计 --- */
.sidebar {
    width: 240px;
    background-color: #2c3e50; /* 深灰蓝色背景 */
    padding: 25px 0; /* 移除左右内边距，让链接填满 */
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(0,0,0,0.1); /* 添加阴影 */
    flex-shrink: 0; /* 防止侧边栏被压缩 */
}
.sidebar .logo {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 35px;
    color: #ffffff; /* Logo 使用白色 */
}
.sidebar .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar .menu ul li {
    margin-bottom: 5px; /* 减小菜单项间距 */
}
.sidebar .menu ul li a {
    color: #bdc3c7; /* 默认文字颜色 - 淡灰色 */
    padding: 15px 30px; /* 统一内边距 */
    display: block;
    font-size: 17px;
    transition: all 0.3s ease;
    text-decoration: none; /* 明确移除下划线 */
    /* 统一所有状态下的字体粗细为普通 */
    font-weight: 500; /* 使用 500 作为标准，比 400 稍重一点点，但不会跳动 */
}
.sidebar .menu ul li a:hover {
    background-color: #34495e; /* 悬停时背景变亮 */
    color: #ffffff; /* 悬停时文字变白 */
    /* 悬停时不再改变字体粗细 */
}

/* 全新激活状态 */
.sidebar .menu ul li.active a {
    background-color: #20c997; /* 主题色背景 */
    color: #ffffff; /* 白色文字 */
    /* 激活时也不再改变字体粗细，只改变颜色 */
}

/* --- 新增主内容包裹器 --- */
.main-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* 移除固定的 vh 高度，让它自适应 flex 容器 */
    /* height: 100vh; <-- 移除这一行 */
}

/* --- 全局顶部栏新样式 --- */
.global-header {
    display: flex;
    justify-content: center; /* 直接居中标题 */
    align-items: center;
    padding: 0 30px;
    height: 65px;
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    flex-shrink: 0; /* 防止头部被压缩 */
}

.header-title {
    font-size: 22px;
    font-weight: 600;
    color: #343a40;
}

/* --- 内容区调整 --- */
.content {
    flex-grow: 1;
    padding: 40px;
    overflow-y: auto; /* 只让内容区在需要时滚动 */
}

/* 音乐区域和健康教育区域使用卡片式设计 */
.music-section, .education-grid {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.music-section {
    margin-bottom: 30px;
}

/* 恢复标题下划线 */
.music-section h2 {
    margin-top: 0;
    padding-bottom: 15px;
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 600;
    display: inline-block;
    /* 恢复下划线 */
    border-bottom: 3px solid; 
}

/* 恢复标题下划线颜色，并移除文字颜色 */
#wuxing-section h2 { 
    border-color: #20c997; 
    color: #343a40; /* 恢复默认标题颜色 */
}
#western-section h2 { 
    border-color: #fd7e14; 
    color: #343a40; /* 恢复默认标题颜色 */
}

/* 分类按钮 */
.category-selection {
    display: flex;
    justify-content: flex-start; /* 左对齐 */
    gap: 15px;
    margin-bottom: 25px;
}

.category-btn {
    border: 1px solid #ced4da;
    background-color: #fff;
    color: #495057;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 20px; /* 胶囊形状 */
}

/* 默认分类按钮激活状态 */
.category-btn.active {
    background-color: #20c997;
    color: white;
    border-color: #20c997;
}

/* 为西方音乐区域的激活按钮设置专属橙色 */
#western-section .category-btn.active {
    background-color: #fd7e14;
    border-color: #fd7e14;
}

.video-selection-container {
    display: none;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 10px;
    justify-content: flex-start; /* 左对齐 */
}

/* 视频按钮 */
.video-btn {
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    color: #495057;
    padding: 20px 30px;
    font-size: 17px;
    border-radius: 10px;
}

/* 默认视频按钮悬停效果 */
.video-btn:hover {
    background-color: #20c997;
    color: white;
    border-color: #20c997;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(32, 201, 151, 0.2);
}

/* 为西方音乐区域的视频按钮悬停设置专属橙色 */
#western-section .video-btn:hover {
    background-color: #fd7e14;
    border-color: #fd7e14;
    box-shadow: 0 6px 12px rgba(253, 126, 20, 0.2);
}

/* --- 健康教育页面全新设计 --- */
.education-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.education-card {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.education-card h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #343a40;
}

.education-card p {
    margin: 0 0 20px;
    color: #6c757d;
    flex-grow: 1; /* 让描述占据多余空间，使按钮对齐底部 */
}

.education-card .video-btn {
    background-color: #fff;
    align-self: flex-start;
}

/* 为健康教育页面的视频按钮悬停设置专属蓝色 */
#education-content .video-btn:hover {
    background-color: #007bff;
    border-color: #007bff;
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.2);
}

/* 视频播放器样式 (保持不变) */
.video-player-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
#video-player { max-width: 80%; max-height: 80%; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); }
#close-btn { position: absolute; top: 20px; right: 30px; padding: 10px 18px; background-color: rgba(0, 0, 0, 0.5); color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1; transition: background-color 0.3s; }
#close-btn:hover { background-color: rgba(0, 0, 0, 0.8); }