/**
     * 线报列表样式 - 带平滑动画效果
     * 版本: 2.0
     * 功能: 实现线报列表的展开收起动画效果
     */

    /* 线报项基础样式 */
    .xianbao {
        /* 使用flex布局实现水平排列 */
        display: flex;
        justify-content: flex-start;  /* 左对齐 */
        align-items: center;          /* 垂直居中 */
        
        /* 边框和间距 */
        border-bottom: 0.5px dashed orange;  /* 底部虚线边框 */
        margin-bottom: 5px;                  /* 底部间距 */
        
        /* 动画相关属性 */
        overflow: hidden;                    /* 防止内容溢出 */
        transition: all 0.4s ease-in-out;    /* 所有属性过渡效果，持续0.4秒 */
        max-height: 60px;                    /* 展开时的最大高度 */
        opacity: 1;                          /* 默认不透明 */
    }

    /* 隐藏状态样式 - 用于完全隐藏元素 */
    .xianbao.hidden {
        max-height: 0 !important;            /* 高度变为0 */
        opacity: 0;                          /* 完全透明 */
        margin-bottom: 0 !important;         /* 移除底部边距 */
        border-bottom: 0.5px dashed transparent; /* 边框透明 */
        pointer-events: none;                /* 禁止交互 */
    }

    /* 初始隐藏状态 - 专门用于首次加载时的隐藏 */
    .xianbao.initial-hidden {
        max-height: 0;                       /* 初始高度为0 */
        opacity: 0;                          /* 初始透明 */
        margin-bottom: 0;                    /* 无底部边距 */
        border-bottom: 0.5px dashed transparent; /* 透明边框 */
        pointer-events: none;                /* 禁止交互 */
    }

    /* 标题链接样式 */
    a.item-name {
        text-decoration: none;               /* 移除下划线 */
        padding-left: 5px;                   /* 左内边距 */
        
        /* Flex布局相关 */
        flex: 1;                             /* 占据剩余空间 */
        min-width: 0;                        /* 防止标题溢出 */
        
        /* 文本溢出处理 */
        overflow: hidden;                    /* 超出隐藏 */
        text-overflow: ellipsis;             /* 显示省略号 */
        white-space: nowrap;                 /* 防止文字换行 */
        text-align: left;                    /* 文本左对齐 */
        
        /* 新增：限制点击区域为文字内容 */
        display: inline;                     /* 改为行内元素，只占据文字宽度 */
        flex: none;                          /* 取消flex扩展 */
        padding-right: 5px;                 /* 右侧内边距，增加点击区域 */
    }

    /* 移动端响应式样式 */
    @media screen and (max-width: 600px) {
        a.item-name {
            max-width: 30ch;                 /* 限制最大字符宽度 */
        }
    }

    /* 线报序号样式 */
    .xianbao-index {
        width: 20px;                         /* 固定宽度 */
        height: 20px;                        /* 固定高度 */
        border-radius: 3px;                  /* 圆角边框 */
        
        /* 居中显示 */
        display: flex;
        align-items: center;
        justify-content: center;
        
        margin-right: 8px;                   /* 右侧间距 */
        flex-shrink: 0;                      /* 防止被压缩 */
    }

    /* 日期显示样式 */
    .xianbaorq {
        text-align: right;                   /* 右对齐 */
        color: green;                        /* 绿色文字 */
        margin-left: auto;                   /* 自动左外边距，推到最右边 */
        white-space: nowrap;                 /* 禁止换行 */
        flex-shrink: 0;                      /* 防止被压缩 */
    }

    /* 加载更多按钮基础样式 */
    .load-more {
        position: relative;                  /* 相对定位，用于伪元素定位 */
        cursor: pointer;                     /* 手型光标 */
        color: blue;                         /* 蓝色文字 */
        font-size: 14px;                     /* 字体大小 */
        padding: 1px 10px;                   /* 内边距 */
        margin: 10px auto;                   /* 外边距，水平居中 */
        text-align: center;                  /* 文字居中 */
        
        /* 渐变背景 */
        background: linear-gradient(to right bottom, pink, lightgreen, white);
        border: 1px solid #ccc;              /* 边框 */
        display: inline-block;               /* 行内块显示 */
        border-radius: 20px;                 /* 圆角边框 */
        margin-top: 3px;                     /* 上边距 */
        transition: all 0.3s ease;           /* 过渡效果 */
    }

    /* 按钮悬停效果 */
    .load-more:hover {
        color: inherit;                      /* 继承父元素颜色 */
        border-color: inherit;               /* 继承父元素边框颜色 */
        background: none;                    /* 移除背景渐变 */
    }

    /* 按钮上方图标样式 */
    .load-more::before {
        content: '';                         /* 伪元素内容为空 */
        position: absolute;                  /* 绝对定位 */
        top: -10px;                         /* 向上偏移 */
        left: 50%;                          /* 水平居中 */
        
        /* 初始位置偏移和动画 */
        transform: translateX(calc(-50% - 20px)); /* 居中向左偏移20px */
        width: 10px;                        /* 图标宽度 */
        height: 10px;                       /* 图标高度 */
        background-image: url('/images/xianbao.svg'); /* 图标路径 */
        background-size: cover;              /* 背景图片覆盖 */
        background-repeat: no-repeat;        /* 不重复 */
        animation: moveAnimation 2s infinite linear; /* 无限循环动画 */
    }

    /* 图标动画定义 */
    @keyframes moveAnimation {
        0%, 100% {
            transform: translateX(calc(-50% - 20px)); /* 起始和结束位置 */
        }
        50% {
            transform: translateX(calc(-50% + 20px)); /* 中间位置，向右移动40px */
        }
    }

    /* 夜间模式图标样式 */
    .dark-theme .load-more::before {
        background-image: url('/images/xianbao2.svg'); /* 夜间模式图标 */
    }

    /* 隐藏类 - 用于完全隐藏元素 */
    .hidden {
        display: none !important;            /* 强制隐藏，优先级最高 */
    }