*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;}
body{background:#f6f7fb;color:#333;font-size:18px;}
#app{
    width: 100%;
    max-width:860px;
    margin:0 auto;
    background:#fff;
    min-height:100vh;
    padding-bottom:70px;
}
.center-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    text-decoration: none;
    font-size: 12px;
    flex: 1;
    height: 100%;
    transition: all 0.2s;
}

.center-item .nav-icon {
    background: linear-gradient(to top, #4CAF50, #84ff89);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: -10px;
    box-shadow: 0 2px 5px rgba(76, 175, 80, 0.4);
}
.nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
}
.text-truncatel {
    animation: shine .1s infinite linear;
    position: relative;
    overflow: hidden;
    display: block;
    background: url(/template/bbs/images/logo.png) center;
    margin: auto;
width: 50%;
padding: 20px;
    height: 2.8rem;
    background-size: 100% 100%;
    padding-right: 6px;
}
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #e8e8e8;}
.search-icon{font-size:18px;color:#666;}

.notice{margin:12px 16px;padding:9px 12px;background:#fff0f0;border-radius:4px;display:flex;gap:6px;}
.notice .tag{color:#e53e3e;font-weight:bold;}

.quick-box{margin:0 16px 16px;background:#f0f4ff;border-radius:6px;padding:12px 14px;}
.quick-item{display:flex;align-items:center;justify-content:space-between;padding:9px 0;}
.quick-left{display:flex;align-items:center;gap:8px;font-size:15px;}
.btn-blue{background:#2563eb;color:#fff;border:none;padding:6px 16px;border-radius:4px;font-size:13px;}

.tab-nav{display:flex;padding:0 16px;border-bottom:1px solid #eee;margin-bottom:10px;overflow-x:auto;}
.tab-nav span{padding:12px 10px;color:#666;cursor:pointer;white-space:nowrap;}
.tab-nav span.active{color:#2563eb;font-weight:500;}

.post-list{padding:0 16px;}
.post-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #efefef;}
.post-main{flex:1;}
.post-title{font-size:16px;margin-bottom:4px;}
.post-meta{display:flex;justify-content:space-between;color:#999;font-size:13px;gap:8px;}
.read-tag{
    background:#eee;
    color:#666;
    padding:2px 8px;
    border-radius:12px;
    box-shadow:0 1px 2px #ccc;
    white-space:nowrap;
}

.page-wrap{padding:24px 8px;text-align:center;}
.page-box{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;}
.page-box span{
    padding:8px 14px;
    border-radius:99px;
    background:#f7f8fa;
    cursor:pointer;
    font-size:14px;
}
.page-box span.active{
    background:#ed334b;
    color:#fff;
}

.comment-title{padding:0 16px 10px;font-size:15px;font-weight:500;}
.comment-list{padding:0 16px;}
.comment-item{display:flex;gap:10px;padding:10px 0;}
.c-text{line-height:1.4;}
.c-time{font-size:12px;color:#999;margin-top:3px;}
.login-btn-wrap{text-align:center;padding:8px 0 20px;}

.back-top{
    position:fixed;
    right: max(16px, calc((100% - 860px) / 2 + 16px));
    bottom:75px;
    width:40px;height:40px;border-radius:50%;background:#eee;
    display:flex;align-items:center;justify-content:center;font-size:18px;color:#666;cursor:pointer;
    z-index:98;
}

.footer-nav{
    position:fixed;
    bottom:0;
    width: 100%;
    max-width:860px;
    left:50%;
    transform:translateX(-50%);
    height:60px;
    background:#fff;
    display:flex;
    border-top:1px solid #eee;
    z-index:99;
}
.footer-nav div{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#333;font-size:12px;gap:3px;
}
.footer-nav div.active{color:#2563eb;}

.avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}
/* c1 A、B */
.avatar.A,
.avatar.B {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}
/* c2 C、D */
.avatar.C,
.avatar.D {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}
/* c3 E、F */
.avatar.E,
.avatar.F {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}
/* c4 G、H */
.avatar.G,
.avatar.H {
  background: linear-gradient(135deg, #fa709a, #fee140);
}
/* c5 I、J */
.avatar.I,
.avatar.J {
  background: linear-gradient(135deg, #a18cd1, #fbc2eb);
}
/* c6 K、L */
.avatar.K,
.avatar.L {
  background: linear-gradient(135deg, #fccb90, #d57eeb);
}
/* c7 M、N */
.avatar.M,
.avatar.N {
  background: linear-gradient(135deg, #89f7fe, #66a6ff);
}
/* c8 O、P */
.avatar.O,
.avatar.P {
  background: linear-gradient(135deg, #f6d365, #fda085);
}
/* c9 Q、R */
.avatar.Q,
.avatar.R {
  background: linear-gradient(135deg, #a8edea, #fed6e3);
}
/* c10 S、T */
.avatar.S,
.avatar.T {
  background: linear-gradient(135deg, #d4fc79, #96e6a1);
}
/* c11 U、V */
.avatar.U,
.avatar.V {
  background: linear-gradient(135deg, #84fab0, #8fd3f4);
}
/* c12 W、X */
.avatar.W,
.avatar.X {
  background: linear-gradient(135deg, #ffecd2, #fcb69f);
}
/* c13 Y、Z */
.avatar.Y,
.avatar.Z {
  background: linear-gradient(135deg, #ff9a9e, #fecfef);
}
/* c14 */
.avatar.AA {
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
}
/* c15 */
.avatar.BB {
  background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
}
@media (max-width: 480px) {
    .page-box span {
        padding:6px 10px;
        font-size:13px;
    }
    .quick-left {
        font-size:14px;
    }
    .post-title {
        font-size:16px;
    }
}
.post-list a {
    color: inherit !important; /* 继承父文字黑色，不变成蓝色 */
    text-decoration: none !important; /* 去掉下划线 */
    display: flex; /* 保持横向布局不变，不塌陷 */
    gap: 10px;
    width: 100%;
}
.comment-list a {
    color: inherit !important; /* 继承父文字黑色，不变成蓝色 */
    text-decoration: none !important; /* 去掉下划线 */
    display: flex; /* 保持横向布局不变，不塌陷 */
    gap: 10px;
    width: 100%;
}
.post-list a:hover .post-title {
    color: #2563eb; /* 可选：仅鼠标悬浮标题变蓝，保留点击提示 */
}
/* ========== 新增详情页专属样式 ========== */
.detail-header{
    padding:16px;
    border-bottom:1px solid #eee;
}
.detail-title{
    font-size:20px;
    font-weight:600;
    margin-bottom:12px;
}
.detail-author{
    display:flex;
    align-items:center;
    gap:8px;
    color:#666;
    font-size:13px;
}
.detail-content{
    padding:16px;
    line-height:1.7;
    font-size:15px;
}
/* 福利卡片模块 */
.welfare-card{
    margin:0 16px 20px;
    background:linear-gradient(135deg,#b6e0ff,#d0eaff);
    border-radius:12px;
    overflow:hidden;
}
.welfare-tab{
    display:flex;
    justify-content:center;
    padding:14px 0;
    font-size:18px;
    font-weight:500;
    position:relative;
}
.welfare-tab span{
    flex:1;
    text-align:center;
}
.welfare-tab span.active{
    color:#fff;
}
.welfare-filter{
    display:flex;
    gap:12px;
    padding:0 16px 14px;
}
.filter-btn{
    background:#fff;
    border:none;
    padding:6px 14px;
    border-radius:20px;
    font-size:14px;
}
.welfare-stat{
    display:flex;
    justify-content:space-between;
    padding:12px 16px;
    border-bottom:1px solid #e1ecff;
}
.stat-left{
    font-size:18px;
    font-weight:500;
}
.stat-right{
    display:flex;
    gap:30px;
    color:#555;
}
.welfare-list{
    padding:0 16px 10px;
}
.welfare-item{
    padding:14px 0;
    border-bottom:1px solid #eef5ff;
    display:flex;
    justify-content:space-between;
}
.welfare-item-left h4{
    font-size:16px;
    font-weight:500;
    margin-bottom:4px;
}
.welfare-item-left p{
    color:#777;
    font-size:13px;
}
.welfare-item-right{
    text-align:right;
}
.welfare-money{
    font-size:18px;
    font-weight:bold;
}
.welfare-state{
    color:#999;
    font-size:13px;
}
.load-tip{
    text-align:center;
    padding:20px 0;
    color:#888;
    font-size:13px;
}
/* 版权声明 */
.copyright-box{
    margin:20px 16px;
    padding:16px;
    background:#f8f9fc;
    border-radius:8px;
    line-height:1.7;
}
.copyright-title{
    text-align:center;
    font-size:17px;
    font-weight:600;
    margin-bottom:10px;
}
/* 点赞收藏按钮组 */
.btn-group{
    display:flex;
    gap:12px;
    justify-content:center;
    padding:10px 16px 20px;
}
.oper-btn{
    display:flex;
    align-items:center;
    gap:4px;
    background:#e8f2ff;
    color:#2563eb;
    border:none;
    padding:8px 20px;
    border-radius:6px;
    font-size:14px;
}
.oper-btn.orange{
    background:#fff2e8;
    color:#f28c25;
}
/* 评论区标题 */
.reply-title{
    padding:0 16px 10px;
    font-size:16px;
    font-weight:600;
    border-bottom:1px solid #eee;
    margin:0 16px 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
/* 评论楼层 */
.reply-item{
    padding:12px 16px;
    border-bottom:1px solid #f0f0f0;
}
.reply-top{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
}
.floor-tag{
    background:#eee;
    padding:2px 6px;
    border-radius:4px;
    font-size:12px;
    color:#666;
}
.host-tag{
    background:#2563eb;
    color:#fff;
    font-size:11px;
    padding:2px 5px;
    border-radius:3px;
}
.floor-badge{
    margin-left:auto;
    font-size:12px;
    padding:2px 8px;
    background:#fff2e0;
    color:#e68900;
    border-radius:4px;
}
.reply-time{
    font-size:12px;
    color:#999;
    margin-bottom:8px;
}
.reply-content{
    line-height:1.6;
}
.reply-sub{
    background:#e8f3ff;
    padding:8px 10px;
    border-radius:6px;
    margin:6px 0;
    display:flex;
    gap:6px;
}
.reply-bottom{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
}
/* 回帖输入框 */
.reply-input-box{
    margin:16px;
    display:flex;
    gap:8px;
    align-items:center;
}
.reply-input{
    flex:1;
    border:1px solid #ddd;
    border-radius:6px;
    padding:8px 10px;
    font-size:14px;
}
.send-btn{
    background:#2563eb;
    color:#fff;
    border:none;
    padding:8px 14px;
    border-radius:6px;
}
.bottom-input-bar{
    position:fixed;
    bottom:60px;
    width:100%;
    max-width:860px;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    padding:10px 16px;
    border-top:1px solid #eee;
    display:flex;
    gap:8px;
    align-items:center;
}
.bottom-input{
    flex:1;
    background:#f3f4f6;
    border:none;
    border-radius:20px;
    padding:8px 16px;
}
.foot_height {
    height: 34px;
}
.footer-nav div a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    gap: 3px;
}
/* ========== 新增广告样式，适配现有页面布局 ========== */
.ad-box{
    width:100%;
    max-width:860px;
    margin:8px auto;
    padding:10px;
    border-top:1px solid #eee;
    display:flex;
    align-items:center;
    background:#ffffff;
    position:relative;
    box-sizing:border-box;
    text-decoration: none;
}
/* 左侧图片 */
.ad-img{
    width:120px;
height:80px;
    flex-shrink:0;
}
.ad-img img{
    width:120px;
height:80px;
display:block;
}
/* 钟间文字 */
.ad-text{
    padding-left:14px;
    flex:1;
}
.ad-text h2{
    font-size:22px;
    color:#000;
    font-weight:bold;
    line-height:1.3;
    margin-bottom:8px;
}
.ad-text p{
    font-size:18px;
    color:#888;
}
/* 右下角广告文字+关闭按钮 */
.ad-close{
    position:absolute;
    right:12px;
    bottom:8px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#999;
    font-size:14px;
}
.close-btn{
    cursor:pointer;
    font-size:18px;
    padding:2px 6px;
}
.close-btn:hover{
    color:#f00;
}
.ad-tag{
    opacity:0.7;
}

/* 图片外层容器：一行2张、自动换行 */
.img-wrap {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    margin: 10px 0;
}
/* 单个图片项：宽度50%，实现一行两个，带间距 */
.img-item {
    width: 50%;
    padding: 0 4px;
    margin-bottom: 8px;
    box-sizing: border-box;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}
td a {
    text-decoration: none;
    border: 0;
    font-size: 1.0rem;
    color: #0c0404;
}
.list-title {
    text-align: center;
    padding: 1rem;
    color: #fff;
    font-size: 1.2rem;
    background-color: #333;
    border-top: 1px solid #adadad;
    margin-top: 3px;
}
.gulian_4 {
    background-color: white;
    display: flex
;
    flex-wrap: wrap;
}
.gulian_4 a {
    width: 25%;
    float: left;
    font-weight: 700;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px dashed #dadada;
    border-left: 1px dashed #dadada;
    text-align: center;
    color: #blue;
    text-decoration: none;

}