/* 通用样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 一级导航 */
.main-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    z-index: 100; /* 一级导航层叠顺序 */
}

.nav-container {    
    height: 45px;         /* 调整导航栏高度 */
    display: flex;
    align-items: center; /* 垂直居中导航项 */
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.nav-items {
    display: flex;
    list-style: none;
    padding: 0 10px;
    height: 100%; /* 继承容器高度 */
    align-items: center; /* 垂直居中 */
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

.nav-items::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.nav-item {
    /* 一级页签样式 */
    flex: 0 0 auto;
    padding: 14px 12px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    transition: color 0.3s;
    position: relative;
}

.nav-item.active {
    color: #f22;
    font-weight: 600;
    position: relative;
}

.nav-item.active::after {
    display: none !important;
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: #f22;;
}

/* 二级导航 */
.sub-nav {
    display: none;
    background: white;
    padding: 3px 0;
    overflow-x: auto;
    scrollbar-width: none;
    position: relative; /* 确保二级导航有定位属性 */
    z-index: 99; /* 二级导航层叠顺序低于一级导航 */
}

/* 非激活状态的二级导航 */
.sub-nav:not(.active) {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* 激活状态的二级导航 */
.sub-nav.active {
    display: flex;
    opacity: 1;
    height: auto;
}

.sub-items {
    display: flex;
    list-style: none;
    padding: 0 15px;
    white-space: nowrap;
    justify-content: center; /* 确保子项水平居中 */
}

.sub-item {
    /* 二级页签样式 */
    flex: 0 0 auto;
    margin: 0 12px;
    padding: 6px 12px; /* 检查内边距是否均匀 */
    font-size: 14px;
    color: #666;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s;
    /* 添加最大宽度限制 */
    max-width: calc(100% - 24px); /* 这里假设一级页签有 12px 的左右内边距，根据实际情况调整 */
    text-align: center; /* 确保文本居中 */
}

.sub-item.active {
    color: #f22;
    background:  #fff5f5;
    font-weight: 600;
    text-align: center; /* 确保激活状态下文本居中 */
}

:root {
    --main-nav-height: 58px; /* 新增主导航高度变量 */
}

/* 调整内容区域间距 */
.content-section {
    margin-top: var(--main-nav-height); 
    padding: 0; /* 移除默认padding */
    transition: margin-top 0.3s ease;
    position: relative; /* 确保内容区域有定位属性 */
    z-index: 1; /* 内容区域层叠顺序最低 */
}

/* 隐藏内容区块边框 */
.content-pane {
    border: none !important; /* 强制移除边框 */
    box-shadow: none !important; /* 移除可能存在的阴影 */
    padding: 0px 0;         /* 调整内边距 */
    display: none; /* 默认隐藏 */    
    position: relative; /* 确保有定位属性 */
    width: 100%; /* 确保宽度为100% */
    justify-content: center; /* 新增 */
}

.content-pane.active {
    display: block;
}

.scroll-container {
    height: auto;
    width: 100%;
    overflow-y: auto;
    display: flex;          /* 新增 */
    justify-content: center; /* 新增 */
}

/* 自定义滚动条 */
.scroll-container::-webkit-scrollbar {
    width: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* 滚动箭头 */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 101;
}

.scroll-arrow.left {
    left: 0;
}

.scroll-arrow.right {
    right: 0;
}

/* 在原有样式基础上添加以下新样式 */
.container {
    flex-wrap: nowrap;      /* 禁止换行 */
    overflow-y: auto;       /* 允许垂直滚动 */
    gap: 20px;             /* 元素间距 */
    padding: 0px 0;        /* 纵向内边距 */
    max-width: 1200px;       /* 最大宽度限制 */
    width: 100%;                
    margin: 0 auto;         /* 水平居中 */
    scroll-behavior: smooth;/* 平滑滚动 */
    box-sizing: border-box;
}

.card {
    background: #ffffff;
    border-radius: 16px;
    padding: 15px;
    margin-top: 0px; /* 上边距10px */
    margin-left: 10px; /* 左边距10px */;
    margin-right: 10px; /* 右边距10px */
    margin-bottom: 10px;
    box-shadow: 0 6px 12px rgba(255,107,107,0.15); /* 粉色系阴影 */
    border: 2px solid #f5e7af; /* 阳光黄边框 #f5e7af*/
}

.card h2 {
    color: #686bf3; /* 薄荷绿标题 */
    margin-bottom: 10px;
    font-size: 22px;
    padding-bottom: 8px;
    border-bottom: 3px dotted #FF6B6B; /* 珊瑚粉虚线装饰 */
    font-family: 'Comic Sans MS', cursive, sans-serif; /* 更童趣的字体 */
}

/* 优化按钮样式 */
.btn {
    background: linear-gradient(135deg, #edf5e0 0%, #e0f8e1 100%); /* 更明亮的渐变 */
    color: #2d3436;
    border: 2px solid #f5e7af;
    padding: 12px 16px;
    margin: 8px 4px;
    flex: 1 1 140px;
    font-size: 20px;
    font-weight: 600; /* 文字加粗 */
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    border-radius: 20px; /* 增大圆角 */
    box-shadow: 0 3px 6px rgba(255,175,175,0.2);
    font-family: 'Comic Sans MS', cursive, sans-serif; /* 更童趣的字体 */
    /* 保持原有基础样式 */
    text-align: left; /* 改为左对齐 */
    line-height: 1.4; /* 增加行高 */
    overflow: visible; /* 允许内容溢出 */
}

.btn:hover {
    background: linear-gradient(135deg, #cbf981 0%, #89f88d 100%);
    box-shadow: 0 5px 12px rgba(255,175,175,0.2);
}

/* 新增内容容器 */
.btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.image-container {
    width: 100%;       /* 容器宽度自适应父级 */
    max-width: 1150px;  /* 最大显示宽度限制 */
    margin: 0 auto;     /* 居中显示 */
    overflow: hidden;   /* 隐藏溢出部分 */
}

.responsive-image {
    max-width: 100%;    /* 最大宽度不超过容器 */
    max-height: 100%;   /* 最大高度不超过容器 */
    width: auto;        /* 宽度自动调整，保持比例 */
    height: auto;       /* 高度自动调整，保持比例 */
    min-height: 88px;  /* 最小高度限制 */
    object-fit: contain; /* 关键属性：保持比例完整显示 */
    object-position: center; /* 图片居中显示 */
}

/* 文字组合 */
.text-group {
    display: flex;
    flex-direction: column;
}

.main-text {
    font-size: 18px;
    font-weight: 600;
    font-family: 'Comic Sans MS', cursive, sans-serif; /* 更童趣的字体 */
}

.sub-text {
    font-size: 16px;
    font-weight: 500;
    font-family: 'Source Han Sans', sans-serif; 
}

/* 公式容器 */
.formula-preview {
    margin-left: auto;
    padding: 4px;
    background: rgba(255,255,255,0.9);
    border-radius: 4px;
}

/* 垂直布局变体 */
.btn.vertical-layout .btn-content {
    flex-direction: column;
    text-align: left;
}

/* 数学公式特殊样式 */
.math-formula {
    font-family: "Source Han Sans", sans-serif;
    font-size: 16px;
    line-height: 1.2;
}

.katex {
    font-size: 16px !important;
    font-family: 'Source Han Sans', sans-serif !important;
}

.math-formula .katex .mfrac .frac-line {
    margin-top: 0.01em; /*调整分式线与分子的间距 */
    margin-bottom: 0.05em; /* 调整分式线与分母的间距 */
    border-bottom-width: 1px; /* 原默认可能是 1px，这里调宽到 2px，可按需调整 */
}
/*  */

.sub-content {
    display: none;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.sub-content.active {
    display: block;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .btn {
        padding: 14px 10px;
        font-size: 18px;
        border-radius: 16px; /* 移动端圆角 */
        margin: 6px;
    }

    .button-group {
        gap: 8px;
        justify-content: space-between; /* 平均分布 */
        margin: 0 -6px; /* 抵消按钮外边距 */
    }

    .btn-content {
        flex-wrap: wrap;
    }
    
    .formula-preview {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    
    .card {
        padding: 15px;
        margin-left: 10px; /* 左边距10px */;
        margin-right: 10px; /* 右边距10px */
        margin-bottom: 10px;
        border-radius: 12px; /* 原为16px */
    }
      
    .card h2 {
        font-size: 20px; /* 原为22px */
    }

    /* 手风琴 */
    .accordion-item {
        /* 突破容器限制 */
        margin-top: 0px !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        width: calc(100% + 40px) !important;

        /* 边框处理 */
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;

        /* 阴影优化 */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    }

    .accordion-header {
        padding: 14px 20px !important; 
        border-radius: 0 !important;   
    }

    .arrow {
        width: 14px; /* 缩小箭头 */
        font-size: 14px;
    }

    .accordion-content {
        padding: 0 15px; /* 减少横向内边距 */
        margin: 0 -5px;  /* 补偿内边距 */
    }

    .accordion-content .card {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    /* 保持展开状态视觉反馈 */
    .accordion-header.active {
        box-shadow: inset 0 2px 4px rgba(255,107,107,0.1);
    }

    /* 手机端导航容器 */
    .nav-container {
        height: 45px; /* 增大高度便于触摸操作 */
    }

    /* 一级导航项适配 */
    .nav-item {
        flex: 1 0 auto; /* 允许伸缩但保持内容宽度 */
        min-width: max-content; /* 最小宽度适应内容 */
        padding: 12px 10px; /* 调整内边距 */
        white-space: nowrap; /* 禁止文字换行 */
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
    }

    .nav-item.active {
        color: #f22;
        font-weight: 600;
        font-size: 17px; /* 略微放大字体 */
        padding-bottom: 12px; /* 调整间距 */
    }

    /* 二级导航项样式调整 */
    .sub-item {
        margin: 0 8px; /* 缩小间距 */
        padding: 6px 10px; 
        font-size: 13px;
        text-align: center; /* 确保文本居中 */
        box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
    }

    .sub-item.active {
        color: #f22;
        background: rgba(255,85,51,0.1);
        text-align: center; /* 确保激活状态下文本居中 */
        box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
    }

    /* 隐藏滚动箭头 */
    .scroll-arrow {
        display: none !important;
    }

    /* 防止文字缩放 */
    .nav-item {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* 手风琴样式 */
.accordion-item {  
    margin-top: 5px !important;  
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #ffdada; /* 统一边框颜色 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-bottom: 5px; /* 增加底部外边距 */
}

.accordion-header {
    position: relative;
    background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
    padding: 16px 20px;
    font-size: 18px;
    color: #333;
    transition: all 0.3s;
    border-bottom: 2px solid #ffdada; /* 保持分割线 */
}

.accordion-header.active {
    background: linear-gradient(135deg, #ffe8e8 0%, #ffdfdf 100%);
    border-bottom-color: transparent; /* 展开时隐藏分割线 */
    transition: background 0.3s;
}

.accordion-content {
    /* padding-top: 12px;  /* 增加顶部内边距 */
    /* padding-bottom: 8px;
    padding: 0 0px; 调整左右内边距 */
    padding-top: 0;  /* 顶部内边距设为 0 */
    padding-bottom: 0; /* 底部内边距设为 0 */
    padding-left: 0; /* 左边内边距设为 0 */
    padding-right: 0; /* 右边内边距设为 0 */
    max-height: 0;
    transition: max-height 0.3s ease-out;
    background: #ffffff; /* 移除背景色 */
    overflow: hidden;
    display: none; /* 改为默认显示 */
}

/* 内容卡片间距调整 */
.accordion-content .card {
    margin-top: 10px;
    margin-bottom: 10px;
}

.arrow {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 弹性动画 */
    color: #fc6b6b;
    font-weight: 600;
    display: inline-block; /* 确保旋转基准点正确 */
    transform-origin: 45% 50%; /* 微调旋转中心点 */
    margin-left: 8px;
    width: 16px;
    text-align: center;
}

.accordion-header .arrow {
    margin-left: 10px;
    font-size: 0.8em;
    transition: transform 0.3s;
}

.accordion-header.active .arrow {
    transform: rotate(90deg) scale(1.1);
}

.accordion-header.active + .accordion-content {
    display: block; /* 激活时显示 */
    max-height: 2000px; /* 设置一个足够大的值 */
    transition: max-height 0.3s ease-in;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0;
}