*{
    box-sizing: border-box; /*盒模型：padding、border不会撑大元素宽度*/
    margin:0;              /*清除全局默认外边距*/
    padding:0;             /*清除全局默认内边距*/
}
body{
    padding-bottom:75px !important; /*底部预留75px，防止内容被fixed底部导航遮挡*/
    background:#f0f2f5;            /*页面最外层背景色（浅灰）*/
}
/*主体容器：手机全屏，电脑端max‑width严格和底部导航600px保持一致，自动居中*/
.main-wrap{
    margin:0 auto;         /*水平居中*/
    padding:3px;          /*容器内部左右上下留白，卡片不靠贴屏幕边缘*/
    width:100%;            /*手机下占满屏幕宽度*/
    background:#f3f3f5;    /*内容区域背景色*/
}
@media(min-width: 768px){  /*屏幕≥768px电脑大屏执行*/
    .main-wrap{
        max-width:630px;   /*电脑端内容最大宽度；⚠️和底部导航max-width(600)数值不一致，会造成左右边界不对齐*/
    }
}
/*页面标题区域*/
.page-title-wrap{
    padding:15px 0;        /*上下内边距*/
    margin-bottom:20px;    /*标题与列表之间向下间距*/
}
.page-title-wrap span{
    font-size:17px;        /*标题字号*/
    font-weight:bold;      /*字体加粗*/
    color:#111;            /*标题文字深黑色*/
}

/*底部导航 完整样式*/
.bottom-nav {
    position: fixed;       /*固定在页面底部，滚动页面始终可见*/
    width:100%;            /*手机占满屏幕宽度*/
    left: 0;
    right: 0;
    bottom: 0;             /*贴页面底部*/
    height:75px;           /*导航栏高度，body底部padding必须和这个数值对应*/
    background: #ffffff;   /*导航栏白色背景*/
    display: flex;         /*弹性布局，4个导航项横向均分*/
    z-index: 999;          /*层级，保证导航压在其他页面元素上面*/
    border-top: 1px solid #eee; /*导航顶部细分割线*/
}
@media(min-width:768px){ /*电脑大屏样式*/
    .bottom-nav{
        max-width:600px;   /*电脑导航最大宽度*/
        left:50%;          /*向左偏移50%*/
        transform:translateX(-50%); /*再回退自身一半宽度，实现居中*/
    }
}
.nav-item {
    flex: 1;               /*4个导航项平分宽度，各占25%*/
    width: 25%;
    height:100%;
    display:flex;          /*内部图标+文字上下垂直排列*/
    flex-direction:column;
    align-items:center;    /*水平居中*/
    justify-content:center;/*垂直居中*/
    text-decoration:none;  /*清除a标签下划线*/
    color:#868686;         /*未激活导航文字灰色*/
    font-size:13px;        /*导航文字大小*/
}
.nav-item.active{
    color:#0066dd;         /*当前页面激活导航蓝色高亮*/
}
.nav-svg{
    width:23px;
    height:23px;
    margin-bottom:5px;     /*svg图标与下方文字间距*/
}

/*文章列表卡片，修复flex横向溢出*/
.news-item{
    background:#fff;               /*卡片白色背景*/
    border-radius:16px;            /*卡片圆角*/
    padding:12px;                  /*卡片内部留白*/
    margin-bottom:14px;            /*卡片和下一张卡片之间的距离*/
    display:flex;                  /*图片、文字横向并排*/
    gap:16px;                      /*图片和文字中间间距*/
    text-decoration:none;          /*a标签去掉下划线*/
    color:#222;                    /*卡片正文颜色*/
    box-shadow: 0 1px 6px rgba(0,0,0,0.06); /*卡片轻微阴影，层次感*/
    width:100%;                    /*卡片占满父容器宽度*/
}
.news-item img{
    width:40px;
    height:40px;
    object-fit:cover;    /*图片不变形，裁切铺满盒子*/
    border-radius:12px;  /*图片圆角*/
    background:#f3f3f3;  /*图片加载失败时占位背景色*/
    flex-shrink:0;       /*图片禁止被压缩，固定40px宽高*/
}
.news-text{
    flex:1;     /*文字区域自动占掉剩余全部空间*/
    min-width:0; /*flex布局关键，长文本自动换行，防止把盒子横向撑出去*/
}
.news-text h4{
    font-size:14px;
    margin-bottom:6px; /*标题与时间的间距*/
    word-break:break-all; /*超长文字强制换行，不会横向溢出*/
}
.news-time{
    font-size:13px;
    color:#949494; /*时间浅灰色*/
}

.empty-tips{
    text-align:center; /*文字居中*/
    margin-top:80px;   /*距离顶部间距*/
    color:#999;        /*空提示文字灰色*/
    font-size:15px;
}