*{box-sizing:border-box}body{margin:0;font-family:Arial,"Microsoft YaHei",sans-serif}a{text-decoration:none;color:inherit}
.top{border-bottom:1px solid #222;position:sticky;top:0;z-index:99}.top-inner{max-width:1380px;margin:auto;padding:14px 18px;display:flex;align-items:center;gap:18px}.logo{font-size:34px;font-weight:900}.nav{display:flex;gap:15px;font-weight:800}.search{margin-left:auto;display:flex;gap:10px}.search input{width:360px;background:#1b1b1b;border:1px solid #333;color:#fff;padding:12px;border-radius:12px}.search button{color:#fff;border:0;padding:12px 18px;border-radius:12px;font-weight:900}
.wrap{max-width:1380px;margin:auto;padding:22px}.catbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:25px}.catbar a{background:#1d1d1d;border:1px solid #333;border-radius:999px;padding:9px 15px;font-weight:800}.section{margin-bottom:38px}.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.head h2{margin:0;font-size:26px;border-left:5px solid;padding-left:12px}.more{font-weight:900}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.card{border:1px solid;border-radius:16px;overflow:hidden}.card:hover{transform:translateY(-3px);transition:.15s}.thumb{position:relative}.thumb img{width:100%;height:168px;object-fit:cover}.date{position:absolute;left:8px;bottom:8px;color:#fff;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:900}.dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.8);padding:4px 8px;border-radius:6px;font-size:12px}.card h3{font-size:14px;line-height:1.45;height:42px;overflow:hidden;margin:12px}.meta{color:#aaa;font-size:12px;margin:0 12px 12px;display:flex;justify-content:space-between}
.player video{width:100%;max-height:76vh;background:#000;border-radius:18px}.desc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;line-height:1.8;margin-top:18px}.tags{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.tag{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 12px;font-weight:800}
.friend-links{max-width:1380px;margin:20px auto;padding:0 22px;color:#999}.friend-links a{margin-right:14px;color:#aaa}.foot{text-align:center;color:#666;padding:35px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:850px){.grid{grid-template-columns:repeat(3,1fr)}.top-inner{flex-wrap:wrap}.search{margin-left:0;width:100%}.search input{width:100%}}@media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr)}.thumb img{height:125px}.wrap{padding:14px}.logo{font-size:28px}}

/* ===== Mobile Optimization ===== */
.mobile-cat-toggle{display:none}

@media(max-width:768px){
  body{font-size:14px}

  .top{position:sticky;top:0}
  .top-inner{
    padding:10px 12px;
    gap:10px;
    flex-wrap:wrap;
  }

  .logo{
    font-size:24px;
    line-height:1.1;
  }

  .nav{
    gap:10px;
    font-size:13px;
    overflow-x:auto;
    white-space:nowrap;
    width:100%;
    order:3;
    padding-bottom:2px;
  }

  .search{
    order:2;
    margin-left:0;
    width:100%;
    gap:6px;
  }

  .search input{
    width:100%;
    padding:9px 10px;
    border-radius:9px;
    font-size:13px;
  }

  .search button{
    padding:9px 12px;
    border-radius:9px;
    font-size:13px;
    white-space:nowrap;
  }

  .wrap{
    padding:10px;
  }

  .mobile-cat-toggle{
    display:block;
    width:100%;
    border:0;
    padding:10px 12px;
    margin:0 0 10px;
    border-radius:10px;
    font-weight:800;
    color:#fff;
    background:#ff2f78;
    text-align:left;
  }

  .catbar{
    display:none;
    max-height:260px;
    overflow-y:auto;
    padding:10px;
    margin-bottom:12px;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
  }

  body.show-cats .catbar{
    display:flex;
  }

  .catbar a{
    font-size:12px;
    padding:7px 10px;
    border-radius:999px;
  }

  .section{
    margin-bottom:22px;
  }

  .head{
    margin-bottom:10px;
  }

  .head h2{
    font-size:19px;
    padding-left:9px;
    border-left-width:4px;
  }

  .more{
    font-size:13px;
  }

  .grid{
    grid-template-columns:repeat(2,1fr)!important;
    gap:10px!important;
  }

  .card{
    border-radius:10px;
  }

  .thumb img{
    height:auto!important;
    aspect-ratio:16/10;
    object-fit:cover;
  }

  .date,.dur{
    font-size:10px;
    padding:3px 6px;
    border-radius:5px;
  }

  .card h3{
    font-size:12px;
    line-height:1.35;
    height:34px;
    margin:8px;
  }

  .meta{
    font-size:10px;
    margin:0 8px 8px;
  }

  .player video{
    width:100%;
    max-height:58vh;
    border-radius:12px;
  }

  .desc{
    padding:12px;
    border-radius:12px;
    font-size:13px;
    line-height:1.65;
  }

  .tags{
    gap:7px;
  }

  .tag{
    font-size:12px;
    padding:6px 9px;
  }

  .friend-links{
    padding:0 10px;
    font-size:12px;
    line-height:1.8;
  }

  .foot{
    padding:22px 10px;
    font-size:12px;
  }
}

@media(max-width:380px){
  .grid{
    gap:8px!important;
  }

  .card h3{
    font-size:11.5px;
  }

  .thumb img{
    aspect-ratio:16/11;
  }
}

/* Force hide mobile category button on PC */
button.mobile-cat-toggle,
.mobile-cat-toggle{
  display:none!important;
  visibility:hidden!important;
}

@media(max-width:768px){
  button.mobile-cat-toggle,
  .mobile-cat-toggle{
    display:block!important;
    visibility:visible!important;
  }
}

/* unified pagination */
.pager,.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:26px 0;
  flex-wrap:wrap;
}
.pager a,.pager span,.pagination a,.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:38px;
  padding:0 14px;
  background:#202020;
  color:#ddd;
  border-radius:3px;
  font-weight:700;
  border:0;
}
.pager .current,.pager .active,.pagination .current,.pagination .active{
  background:#ff4c86!important;
  color:#fff!important;
}
.pager a:hover,.pagination a:hover{
  background:#333;
}

/* forced pager */
.pager.pagination{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:8px!important;
  margin:30px auto!important;
  flex-wrap:wrap!important;
}
.pager.pagination a,
.pager.pagination span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:42px!important;
  height:38px!important;
  padding:0 14px!important;
  background:#202020!important;
  color:#ddd!important;
  border-radius:3px!important;
  font-weight:700!important;
  text-decoration:none!important;
}
.pager.pagination .current{
  background:#ff4c86!important;
  color:#fff!important;
}

/* partner ads */
.partner-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px 22px;
  align-items:start;
}
.partner-item{
  display:block;
  text-align:center;
  text-decoration:none;
  color:inherit;
}
.partner-item img{
  width:110px;
  height:110px;
  max-width:100%;
  object-fit:cover;
  border-radius:4px;
  display:block;
  margin:0 auto 8px;
}
.partner-item span{
  display:block;
  font-size:18px;
  line-height:1.25;
  font-weight:700;
  opacity:.86;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:768px){
  .partner-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px 10px!important;
  }
  .partner-item img{
    width:92px!important;
    height:92px!important;
  }
  .partner-item span{
    font-size:13px!important;
  }
}

/* partner ads rows layout */
.partner-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:18px 22px;
  margin:0 auto 22px;
  width:100%;
}
.partner-item{
  width:110px;
  text-align:center;
  text-decoration:none;
  color:inherit;
  flex:0 0 auto;
}
##.partner-item.span-2{
##  width:160px;
##}
####.partner-item.span-3{
####  width:220px;
####}
##.partner-item img{
##  width:100%;
##  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:6px;
  display:block;
  margin:0 auto 8px;
}
.partner-item span{
  display:block;
  font-size:16px;
  line-height:1.3;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:768px){
  .partner-grid{
    gap:12px 10px!important;
    justify-content:space-evenly!important;
  }
  .partner-item{
    width:92px!important;
  }
##  .partner-item.span-2{
##    width:130px!important;
##  }
####  .partner-item.span-3{
####    width:180px!important;
####  }
##  .partner-item span{
##    font-size:12px!important;
##  }
}

/* hide partner ad title on frontend */
.partner-item span{
  display:none!important;
}
.partner-item img{
  margin-bottom:0!important;
}

/* force partner ads visible */
.partner-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:18px 22px!important;
  margin:0 auto 22px!important;
  width:100%!important;
}
.partner-item{
  width:110px!important;
  display:block!important;
  flex:0 0 auto!important;
  text-decoration:none!important;
}
##.partner-item.span-2{width:160px!important}
####.partner-item.span-3{width:220px!important}
####.partner-item img{
####  width:100%!important;
####  aspect-ratio:1/1!important;
####  object-fit:cover!important;
##  display:block!important;
  border-radius:6px!important;
}
.partner-item span{display:none!important}

@media(max-width:768px){
  .partner-grid{
    gap:12px 10px!important;
    justify-content:space-evenly!important;
  }
  .partner-item{width:92px!important}
##  .partner-item.span-2{width:130px!important}
####  .partner-item.span-3{width:180px!important}
####}
####
####/* partner ads left align */

.partner-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  gap:18px 22px!important;
  margin:0 0 22px!important;
  width:100%!important;
}

.partner-item{
  width:110px!important;
  flex:0 0 auto!important;
  text-align:left!important;
}

##.partner-item.span-2{
##  width:160px!important;
##}
##
####.partner-item.span-3{
####  width:220px!important;
##}
##
##.partner-item img{
##  width:100%!important;
  display:block!important;
  margin:0!important;
}

@media(max-width:768px){
  .partner-grid{
    justify-content:flex-start!important;
    gap:12px 10px!important;
  }

  .partner-item{
    width:92px!important;
  }

##  .partner-item.span-2{
##    width:130px!important;
##  }
##
####  .partner-item.span-3{
####    width:180px!important;
##  }
##}

/* PC端：一行最多8个 */
@media screen and (min-width: 768px) {
  .catbar a {
    flex: 0 0 calc((100% - 7*10px)/8); /* 8个格子，减去gap */
    height: 40px;                       /* 高度统一 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 8px;                 /* 圆角可自定义 */
    padding: 0;                          /* 去掉原有 padding */
    font-weight: 800;
  }
}

/* 手机端：一行最多4个 */
@media screen and (max-width: 767px) {
  .catbar a {
    flex: 0 0 calc((100% - 3*10px)/4); /* 4个格子，减去gap */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 8px;
    padding: 0;
    font-weight: 800;
  }
}