*{
    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-top:12px;
    padding-right:12px;
    padding-bottom:12px;
    padding-left:12px;
    margin-bottom:14px;
    display:flex;
    align-items:center; /* ✅整体垂直居中：图标 ↔（标题+时间）文字块中心对齐，就是截图效果 */
    gap:0;
    text-decoration:none;
    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;
    margin-top:-3px; /* ✅负数=向上移；-2、-3、-4px微调 */
    background:#f3f3f3;
    flex-shrink:0;
    margin-right:12px; /*图标到标题横向距离*/
    /* img不要加margin‑top，会破坏居中 */
}
.news-text{
    flex:1;
    min-width:0;
}
.news-text h4{
    font-size:14px;
    margin-bottom:6px; /*标题和时间的间距 */
    word-break:break-all;
    margin-top:0;
}
.news-time{
    font-size:13px;
    color:#949494;
}

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