/* ========== bqb2026 表情包模板 — 图片为主 H5自适应 ========== */
:root{
    --bp:#FF6B35;--bp-d:#E55A2B;--bp-l:#FF8C66;
    --bb:#1AA9E0;--bg:#5CB85C;--br:#D9534F;--by:#F0AD4E;--bpurple:#9648BD;
    --bg-gray:#F5F5F5;--bg-white:#fff;--bg-soft:#FAFAFA;
    --border:#E8E8E8;--text:#333;--text2:#777;--text-l:#aaa;
    --radius:8px;--shadow:0 1px 4px rgba(0,0,0,.08);
    --ts:all .2s ease;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:var(--bg-gray);color:var(--text);font-size:14px;line-height:1.6;}
a{color:inherit;text-decoration:none;transition:var(--ts);}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 12px;}

/* ===== 顶部 ===== */
.bp-header{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.06);position:sticky;top:0;z-index:100;}
.bp-header-inner{display:flex;align-items:center;height:56px;gap:16px;}
.bp-logo{font-size:20px;font-weight:700;white-space:nowrap;color:var(--bp);}
.bp-nav{display:flex;gap:2px;flex:1;overflow-x:auto;}
.bp-nav a{padding:6px 14px;border-radius:4px;font-size:15px;white-space:nowrap;color:var(--text);}
.bp-nav a:hover,.bp-nav a.active{color:var(--bp);}
.bp-search{flex-shrink:0;}
.bp-search input{width:160px;height:34px;border:1px solid var(--border);border-radius:4px 0 0 4px;padding:0 12px;font-size:13px;outline:none;vertical-align:middle;}
.bp-search input:focus{border-color:var(--bp);}
.bp-search button{height:34px;padding:0 14px;background:var(--bp);color:#fff;border:none;border-radius:0 4px 4px 0;font-size:13px;cursor:pointer;vertical-align:middle;}
.bp-search button:hover{background:var(--bp-d);}
.bp-burger{display:none;font-size:22px;cursor:pointer;background:none;border:none;color:var(--text);}

/* 移动端抽屉菜单 */
.bp-drawer-mask{display:none;position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.4);z-index:150;}
.bp-drawer-mask.show{display:block;}
.bp-drawer{position:fixed;top:0;right:-260px;width:260px;height:100vh;background:#fff;z-index:200;overflow-y:auto;padding:16px;transition:right .3s ease;}
.bp-drawer.open{right:0;}
.bp-drawer-search{margin-bottom:12px;}
.bp-drawer-search form{display:flex;}
.bp-drawer-search input{flex:1;height:36px;border:1px solid var(--border);border-radius:4px 0 0 4px;padding:0 12px;font-size:14px;outline:none;}
.bp-drawer-search button{width:40px;height:36px;border:none;border-radius:0 4px 4px 0;background:var(--bp);color:#fff;font-size:14px;cursor:pointer;}
.bp-drawer-search input:focus{border-color:var(--bp);}
.bp-drawer-nav a{display:block;padding:10px 12px;border-bottom:1px solid var(--bg-gray);font-size:15px;}
.bp-drawer-nav a:hover{color:var(--bp);}

/* ===== 幻灯片+推荐 ===== */
.bp-banner{display:flex;gap:12px;margin:12px 0;}
.bp-slider{flex:1;position:relative;border-radius:var(--radius);overflow:hidden;background:#000;height:300px;}
.bp-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .4s;}
.bp-slide.on{opacity:1;}
.bp-slide a{display:block;width:100%;height:100%;}
.bp-slide img{width:100%;height:300px;object-fit:cover;}
.bp-slide-cap{position:absolute;bottom:0;left:0;right:0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;}
.bp-slide-cap h3{font-size:16px;margin-bottom:2px;}
.bp-slide-cap p{font-size:12px;opacity:.85;}
.bp-dots{position:absolute;bottom:10px;right:12px;display:flex;gap:4px;z-index:5;}
.bp-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;}
.bp-dots span.on{background:var(--bp);}
.bp-banner-side{width:300px;flex-shrink:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.bp-reco{border-radius:var(--radius);overflow:hidden;position:relative;background:#000;aspect-ratio:1/1;}
.bp-reco a{display:block;width:100%;height:100%;}
.bp-reco img{width:100%;height:100%;object-fit:cover;}
.bp-reco-cap{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;}
.bp-reco-cap h4{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ===== 双栏 ===== */
.bp-cols{display:flex;gap:12px;margin:12px 0;}
.bp-main{flex:1;min-width:0;}
.bp-aside{width:280px;flex-shrink:0;}

/* ===== 区块 ===== */
.bp-block{background:#fff;border-radius:var(--radius);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow);}
.bp-block-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:42px;border-bottom:2px solid var(--bg-gray);}
.bp-block-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:4px;}
.bp-block-title em{font-style:normal;font-size:18px;}
.bp-block-more{font-size:13px;color:var(--text-l);}
.bp-block-more:hover{color:var(--bp);}

/* 彩色色块标题栏（仿原模板） */
.bp-cat-head{height:40px;display:flex;align-items:center;gap:0;}
.bp-cat-head .bp-cat-tab{padding:0 20px;height:40px;line-height:40px;font-size:16px;font-weight:700;color:#fff;background:var(--bp);}
.bp-cat-head .bp-cat-tab a{color:#fff;}
.bp-cat-head .bp-cat-sub{font-size:13px;color:var(--text-l);margin-left:12px;}
.bp-cat-head .bp-cat-link{margin-left:auto;margin-right:16px;font-size:13px;color:var(--text-l);}

/* ===== 图片网格（核心布局） ===== */
.bp-grid{display:grid;gap:10px;padding:12px;}
.bp-grid-5{grid-template-columns:repeat(5,1fr);}
.bp-grid-4{grid-template-columns:repeat(4,1fr);}
.bp-grid-6{grid-template-columns:repeat(6,1fr);}
.bp-thumb{border-radius:var(--radius);overflow:hidden;background:var(--bg-gray);transition:var(--ts);position:relative;}
.bp-thumb:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px);}
.bp-thumb a{display:block;}
.bp-thumb-img{width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--bg-soft);}
.bp-thumb-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.bp-thumb:hover .bp-thumb-img img{transform:scale(1.05);}
.bp-thumb-title{padding:6px 8px;font-size:13px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}

/* ===== 图文混排列表（最新发布） ===== */
.bp-feed{padding:12px;}
.bp-feed-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--bg-gray);}
.bp-feed-item:last-child{border-bottom:none;}
.bp-feed-thumb{width:120px;height:90px;flex-shrink:0;border-radius:6px;overflow:hidden;background:var(--bg-gray);}
.bp-feed-thumb img{width:100%;height:100%;object-fit:cover;}
.bp-feed-info{flex:1;min-width:0;}
.bp-feed-info h4{font-size:15px;margin-bottom:4px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bp-feed-info p{font-size:12px;color:var(--text2);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.bp-feed-meta{font-size:11px;color:var(--text-l);margin-top:4px;display:flex;gap:8px;}

/* ===== 编号排行列表 ===== */
.bp-rank{padding:8px 16px 12px;}
.bp-rank li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--bg-gray);}
.bp-rank li:last-child{border-bottom:none;}
.bp-rank-num{width:20px;height:20px;border-radius:3px;background:var(--bg-gray);color:var(--text-l);font-size:12px;font-weight:700;text-align:center;line-height:20px;flex-shrink:0;}
.bp-rank li:nth-child(1) .bp-rank-num{background:var(--br);color:#fff;}
.bp-rank li:nth-child(2) .bp-rank-num{background:var(--by);color:#fff;}
.bp-rank li:nth-child(3) .bp-rank-num{background:var(--bp);color:#fff;}
.bp-rank li a{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bp-rank li a:hover{color:var(--bp);}
.bp-rank-date{font-size:11px;color:var(--text-l);flex-shrink:0;}

/* ===== 侧边栏 ===== */
.bp-widget{background:#fff;border-radius:var(--radius);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow);}
.bp-widget-title{padding:0 16px;height:38px;line-height:38px;font-size:15px;font-weight:700;border-bottom:2px solid var(--bg-gray);display:flex;align-items:center;gap:4px;}
.bp-widget-title em{font-style:normal;font-size:16px;}

/* 侧边栏图片推荐 */
.bp-side-img{padding:10px 12px;display:flex;flex-direction:column;gap:8px;}
.bp-side-img li a{display:flex;gap:8px;align-items:center;}
.bp-side-img img{width:50px;height:50px;border-radius:4px;object-fit:cover;flex-shrink:0;}
.bp-side-img span{font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* 相关栏目网格（2列直角居中） */
.bp-catgrid{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.bp-catgrid a{text-align:center;padding:8px 12px;border:1px solid var(--border);border-radius:0;font-size:13px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bp-catgrid a:hover{border-color:var(--bp);color:var(--bp);}
.bp-catgrid a.active{background:var(--bp);color:#fff;border-color:var(--bp);}

/* 标签云（彩色气泡） */
.bp-tags{padding:12px 16px;display:flex;flex-wrap:wrap;gap:6px;}
.bp-tags a{display:inline-block;padding:4px 12px;border-radius:14px;font-size:13px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text2);}
.bp-tags a:hover{color:#fff;border-color:var(--bp);background:var(--bp);}
.bp-tags a:nth-child(9n){color:#4a4a4a}
.bp-tags a:nth-child(9n+1){color:#1AA9E0}
.bp-tags a:nth-child(9n+2){color:#5CB85C}
.bp-tags a:nth-child(9n+3){color:#D9534F}
.bp-tags a:nth-child(9n+4){color:#567e95}
.bp-tags a:nth-child(9n+5){color:#9648BD}
.bp-tags a:nth-child(9n+6){color:#00aba9}
.bp-tags a:nth-child(9n+7){color:#b37333}
.bp-tags a:nth-child(9n+8){color:#FF6B35}

/* 友情链接 */
.bp-flink{padding:12px 16px;display:flex;flex-wrap:wrap;gap:6px;}
.bp-flink a{font-size:13px;color:var(--text2);padding:2px 8px;}
.bp-flink a:hover{color:var(--bp);}

/* ===== 面包屑 ===== */
.bp-crumb{padding:10px 0;font-size:13px;color:var(--text-l);}
.bp-crumb a:hover{color:var(--bp);}
.bp-crumb .sep{margin:0 4px;}
.bp-crumb .cur{color:var(--text);}

/* 子栏目导航 */
.bp-catnav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.bp-catnav a{padding:5px 14px;border-radius:4px;background:#fff;border:1px solid var(--border);font-size:13px;color:var(--text2);}
.bp-catnav a:hover,.bp-catnav a.active{background:var(--bp);color:#fff;border-color:var(--bp);}

/* ===== 分页 ===== */
.bp-pagi{text-align:center;padding:16px 0;}
.bp-pagi a,.bp-pagi span{display:inline-block;min-width:32px;height:32px;line-height:32px;padding:0 8px;margin:0 2px;border:1px solid var(--border);border-radius:4px;font-size:13px;color:var(--text2);}
.bp-pagi a:hover{border-color:var(--bp);color:var(--bp);}
.bp-pagi .current{background:var(--bp);color:#fff;border-color:var(--bp);}

/* ===== 内容页 ===== */
.bp-detail{background:#fff;border-radius:var(--radius);padding:24px;margin-bottom:12px;box-shadow:var(--shadow);}
.bp-detail-h1{font-size:22px;font-weight:700;line-height:1.5;margin-bottom:12px;text-align:center;color:var(--text);}
.bp-detail-meta{text-align:center;font-size:13px;color:var(--text-l);padding-bottom:14px;border-bottom:1px solid var(--bg-gray);margin-bottom:16px;}
.bp-detail-meta span{margin:0 8px;}
.bp-detail-meta a{color:var(--bb);}
.bp-detail-content{font-size:15px;line-height:2;color:var(--text);}
.bp-detail-content p{margin-bottom:1em;}
.bp-detail-content img{margin:1em auto;border-radius:6px;max-width:100%;}
.bp-detail-content h2{font-size:18px;margin:1.4em 0 .6em;padding-left:10px;border-left:4px solid var(--bp);}
.bp-detail-nav{display:flex;justify-content:space-between;margin-top:16px;padding:12px 16px;background:var(--bg-soft);border-radius:var(--radius);font-size:14px;gap:16px;}
.bp-detail-nav>div{flex:1;}
.bp-detail-nav .next{text-align:right;}
.bp-detail-nav a:hover{color:var(--bp);}

/* ===== 搜索结果 ===== */
.bp-search-info{padding:10px 16px;background:#fff;border-radius:var(--radius);margin-bottom:12px;font-size:14px;box-shadow:var(--shadow);}
.bp-search-info strong{color:var(--br);}

/* ===== 底部 ===== */
.bp-footer{background:#2B2B2B;padding:24px 0;margin-top:12px;}
.bp-footer-inner{text-align:center;font-size:13px;color:#888;line-height:2;}
.bp-footer-inner a{color:#aaa;}
.bp-footer-inner a:hover{color:var(--bp);}

/* 返回顶部 */
.bp-totop{position:fixed;right:16px;bottom:16px;width:40px;height:40px;background:var(--bp);color:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:20px;cursor:pointer;z-index:50;border:none;}
.bp-totop.show{display:flex;}
.bp-totop:hover{background:var(--bp-d);}

/* ===== 响应式 ===== */
@media (max-width:1024px){
    .bp-cols{flex-direction:column;}
    .bp-aside{width:100%;}
    .bp-grid-6{grid-template-columns:repeat(5,1fr);}
}
@media (max-width:768px){
    .bp-nav,.bp-search{display:none;}
    .bp-burger{display:block;margin-left:auto;}
    .bp-banner{flex-direction:column;height:auto;}
    .bp-slider{height:180px;}
    .bp-slide img{height:180px;}
    .bp-banner-side{width:100%;grid-template-columns:1fr 1fr 1fr 1fr;}
    .bp-grid-5,.bp-grid-6{grid-template-columns:repeat(3,1fr);}
    .bp-grid-4{grid-template-columns:repeat(3,1fr);}
    .bp-catnav{display:grid;grid-template-columns:repeat(3,1fr);}
    .bp-catnav a{text-align:center;}
    .bp-feed-thumb{width:90px;height:68px;}
    .bp-feed-info p{display:none;}
    .bp-detail{padding:16px 12px;}
    .bp-detail-h1{font-size:18px;}
    .bp-detail-content{font-size:14px;}
    .bp-detail-nav{font-size:13px;gap:8px;}
    .bp-detail-nav>div{flex:1;min-width:0;}
    .bp-detail-nav a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
@media (max-width:480px){
    .wrap{padding:0 8px;}
    .bp-grid-5,.bp-grid-6,.bp-grid-4{grid-template-columns:repeat(2,1fr);}
    .bp-banner-side{grid-template-columns:1fr 1fr;}
    .bp-rank-date{display:none;}
    .bp-thumb-title{font-size:12px;}
}