/* 2026-11-13 final layout alignment */
:root{--av-green:#12c875;--av-green-deep:#0d2a1c;--av-purple:#a855f7}
/* Home shortcuts: four columns on desktop, two on mobile; green cards except random purple accent. */
html body.body .hub-shortcuts{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
html body.body .hub-shortcut{background:linear-gradient(145deg,#123b28 0%,#0d281c 100%)!important;border:1px solid rgba(48,190,112,.22)!important;border-left:4px solid #16b96b!important;color:#effff4!important}
html body.body .hub-shortcut:hover{background:linear-gradient(145deg,#174a32 0%,#103322 100%)!important;border-color:rgba(62,220,137,.55)!important}
html body.body .hub-shortcut-random{border-left-color:#a855f7!important;background:linear-gradient(145deg,#242039 0%,#171326 100%)!important}
html body.body .hub-shortcut-random:hover{border-color:rgba(168,85,247,.75)!important;background:linear-gradient(145deg,#30234a 0%,#1d1730 100%)!important}
/* AI block aligned with the latest videos content width. Eight cards: 4 desktop / 2 mobile. */
html body.body .ai-video-section{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}
html body.body .ai-video-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px 14px!important;width:100%!important}
html body.body .ai-video-card{min-width:0!important}
html body.body .ai-video-poster{display:block!important;width:100%!important;aspect-ratio:3/4!important;overflow:hidden!important}
html body.body .ai-video-poster>img{width:100%!important;height:100%!important;object-fit:cover!important}
/* Green outlined action buttons. */
html body.body .ai-video-more,html body.body .hub-section-head>a:not(.hub-latest-random),html body.body .avref26-green-action{border:1px solid #20c879!important;background:transparent!important;color:#65e6a0!important;box-shadow:none!important}
html body.body .ai-video-more:hover,html body.body .hub-section-head>a:not(.hub-latest-random):hover,html body.body .avref26-green-action:hover{background:rgba(18,200,117,.12)!important;border-color:#55e99a!important;color:#d8ffe8!important}
/* Hot keyword section: remove the outer panel only, retain its heading and keyword chips. */
html body.body #search-hot-keywords{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html body.body #search-hot-keywords:before,html body.body #search-hot-keywords:after{display:none!important;content:none!important}
/* Shared video list card system: same image/card geometry as the play-page recommendations. */
html body.body .category-con>.a-con,html body.body .category-con .a-con{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:22px 16px!important;width:100%!important;margin:0!important;padding:0!important}
html body.body .category-con .a-con-inner{display:flex!important;flex-direction:column!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
html body.body .category-con .a-con-inner>.pic{position:relative!important;width:100%!important;aspect-ratio:3/4!important;margin:0!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:9px!important;background:#142219!important}
html body.body .category-con .a-con-inner>.pic>a{display:block!important;width:100%!important;height:100%!important;position:relative!important}
html body.body .category-con .a-con-inner>.pic img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .25s ease!important}
html body.body .category-con .a-con-inner:hover>.pic img{transform:scale(1.035)!important}
html body.body .category-con .a-con-inner>.s1{display:block!important;margin:8px 0 0!important;padding:0 1px!important;font-size:13px!important;line-height:1.5!important;font-weight:600!important;min-height:3em!important;max-height:3em!important;overflow:hidden!important}
html body.body .category-con .a-con-inner>.s1 a{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.5!important;color:var(--zy-text,#edf7f0)!important}
html body.body .category-con .a-con-inner>.vod-time{display:block!important;margin-top:4px!important;color:#91a197!important;font-size:11px!important}
/* One shared play overlay style on every video thumbnail; homepage latest is the visual reference. */
html body.body .category-con .a-con-inner>.pic .bofang,html body.body .ai-video-poster .ai-video-play{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:50%!important;background:rgba(12,31,21,.76)!important;color:#fff!important;font-size:18px!important;line-height:1!important;opacity:0!important;transform:translate(-50%,-42%) scale(.92)!important;transition:opacity .2s ease,transform .2s ease,background .2s ease!important;pointer-events:none!important}
html body.body .category-con .a-con-inner>.pic:hover .bofang,html body.body .category-con .a-con-inner>.pic a:focus-visible .bofang,html body.body .ai-video-card:hover .ai-video-play{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
html body.body .category-con .a-con-inner>.pic .bofang:before{color:inherit!important}
/* Ranking posters: exact 100 x 100 box, show the entire source image without cropping. */
html body.body .rank-con-m .pic{flex:0 0 100px!important;width:100px!important;height:100px!important;aspect-ratio:1/1!important;overflow:hidden!important;border-radius:10px!important;background:#102017!important}
html body.body .rank-con-m .pic a{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important}
html body.body .rank-con-m img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
/* Full-bleed dark green footer panel. */
html body.body .footer{width:100%!important;max-width:none!important;margin:36px 0 0!important;padding:30px clamp(12px,2vw,30px)!important;box-sizing:border-box!important;border-top:1px solid rgba(50,205,120,.24)!important;background:linear-gradient(135deg,#102f20 0%,#091a12 60%,#0c2418 100%)!important}
html body.body .footer:before{display:none!important}
html body.body .footer>.container{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
html body.body .footer .footer-block{width:100%!important;max-width:none!important;margin:0!important;padding:28px clamp(14px,3vw,42px)!important;border:1px solid rgba(89,211,139,.2)!important;border-radius:14px!important;background:rgba(5,19,12,.42)!important;box-sizing:border-box!important}
/* Desktop navigation stays visible while scrolling; mobile header remains in normal flow. */
@media(min-width:768px){html body.body .site-header{position:sticky!important;top:0!important;z-index:999!important}html body.body .site-header-inner{position:relative!important}html body.body .site-main-nav{order:3!important;flex:0 0 auto!important}html body.body .site-search-wrap{order:2!important}}
@media(max-width:900px){html body.body .category-con>.a-con,html body.body .category-con .a-con{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px 12px!important}}
@media(max-width:767px){html body.body .hub-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}html body.body .ai-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 9px!important}html body.body .category-con>.a-con,html body.body .category-con .a-con{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px 8px!important}html body.body .category-con .a-con-inner>.s1{font-size:12px!important;line-height:1.45!important;min-height:2.9em!important;max-height:2.9em!important}html body.body .category-con .a-con-inner>.pic .bofang,html body.body .ai-video-poster .ai-video-play{width:36px!important;height:36px!important;font-size:15px!important}html body.body .rank-con-m{display:flex!important;flex-direction:row!important;align-items:center!important;gap:9px!important}html body.body .rank-con-m .pic{flex:0 0 100px!important;width:100px!important;height:100px!important;aspect-ratio:1/1!important}html body.body .rank-con-m .info{flex:1!important;min-width:0!important}html body.body .footer{padding:22px 10px 16px!important}html body.body .footer .footer-block{padding:19px 13px!important}}
@media(max-width:420px){html body.body .rank-con ul li{display:flex!important;align-items:center!important;gap:8px!important;padding:7px!important}html body.body .rank-con-l{position:absolute!important}html body.body .rank-con-m{flex-direction:column!important;align-items:stretch!important}html body.body .rank-con-m .pic{flex:0 0 100px!important;width:100px!important;height:100px!important;max-width:100%!important;margin:0 auto!important}html body.body .rank-con-m .info{width:100%!important}}

html body.body .rank-con-m .pic .bofang{position:absolute!important;left:50%!important;top:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:50%!important;background:rgba(12,31,21,.76)!important;color:#fff!important;font-size:18px!important;opacity:0!important;transform:translate(-50%,-42%) scale(.92)!important;transition:opacity .2s ease,transform .2s ease!important;pointer-events:none!important}
html body.body .rank-con-m .pic:hover .bofang{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
@media(max-width:767px){html body.body .rank-con-m .pic .bofang{width:36px!important;height:36px!important;font-size:15px!important}}

/* 2026-11-13 排行榜精修：透明绿选中态 + 横幅标题排版 + 封面铺满 */
html body.body main.main .rank-box .rank-cycle button,
html body.body main.main .rank-box .rank-cycle button:focus,
html body.body main.main .rank-box .rank-cycle button:focus-visible {
  background: transparent !important;
  border: 1px solid rgba(22,163,74,.28) !important;
  color: var(--zy-text,#edf5ef) !important;
  box-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.body main.main .rank-box .rank-cycle button:hover,
html body.body main.main .rank-box .rank-cycle button.active,
html body.body main.main .rank-box .rank-cycle button.active:hover,
html body.body main.main .rank-box .rank-cycle button[aria-selected="true"] {
  background: rgba(22,163,74,.14) !important;
  border: 1px solid rgba(34,197,94,.62) !important;
  color: #d8fbe3 !important;
  -webkit-text-fill-color: #d8fbe3 !important;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.08), 0 5px 18px rgba(22,163,74,.10) !important;
}
html body.body main.main .rank-box .rank-cycle button.active .rank-cycle-icon,
html body.body main.main .rank-box .rank-cycle button[aria-selected="true"] .rank-cycle-icon {
  background: rgba(34,197,94,.16) !important;
  border-color: rgba(34,197,94,.38) !important;
  color: #86efac !important;
}
html body.body main.main .rank-box .rank-cycle button.active .rank-cycle-copy strong,
html body.body main.main .rank-box .rank-cycle button.active .rank-cycle-copy small,
html body.body main.main .rank-box .rank-cycle button.active .rank-cycle-arrow,
html body.body main.main .rank-box .rank-cycle button[aria-selected="true"] .rank-cycle-copy strong,
html body.body main.main .rank-box .rank-cycle button[aria-selected="true"] .rank-cycle-copy small,
html body.body main.main .rank-box .rank-cycle button[aria-selected="true"] .rank-cycle-arrow { color: #d8fbe3 !important; }
html body.body main.main .rank-box .rank-cycle button:not(.active):hover {
  background: rgba(22,163,74,.07) !important;
  border-color: rgba(34,197,94,.38) !important;
  color: #c9f7d6 !important;
  -webkit-text-fill-color: #c9f7d6 !important;
}
html body.body main.main .rank-box .rank-cycle button:not(.active):hover .rank-cycle-copy strong { color: #86efac !important; }

/* 排行榜横幅标题：精致层级 */
html body.body main.main .rank-banner {
  position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 142px !important; margin-bottom: 22px !important; padding: 25px 18px !important; overflow: hidden !important;
  border: 1px solid rgba(34,197,94,.17) !important; border-radius: 20px !important;
  background: radial-gradient(ellipse at 50% 0%,rgba(34,197,94,.10),transparent 62%),linear-gradient(135deg,rgba(22,163,74,.045),transparent 58%) !important;
  text-align: center !important;
}
html body.body main.main .rank-banner:before {
  content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; width: 76px !important; height: 3px !important;
  transform: translateX(-50%) !important; border-radius: 0 0 5px 5px !important; background: linear-gradient(90deg,transparent,#22c55e,transparent) !important;
}
html body.body main.main .rank-banner .banner-inner { position: relative !important; z-index: 1 !important; }
html body.body main.main .rank-banner h1 {
  margin: 0 0 10px !important; color: var(--zy-text,#f2f7f3) !important; font-size: clamp(25px,3vw,34px) !important;
  line-height: 1.2 !important; font-weight: 900 !important; letter-spacing: .07em !important;
}
html body.body main.main .rank-banner p {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  margin: 0 !important; padding: 7px 13px !important; border: 1px solid rgba(34,197,94,.20) !important; border-radius: 999px !important;
  background: rgba(22,163,74,.075) !important; color: #9bb9a4 !important; font-size: 13px !important; line-height: 1.5 !important; letter-spacing: .035em !important;
}
html body.body main.main .rank-banner p:before, html body.body main.main .rank-banner p:after { content: "✦" !important; color: #4ade80 !important; font-size: 12px !important; }

/* 排行榜封面严格铺满容器，清除旧样式可能留下的留白 */
html body.body main.main .rank-con-m .pic, html body.body main.main .rank-con-m .pic a {
  display: block !important; position: relative !important; width: 100% !important; height: 100% !important; min-width: 0 !important; overflow: hidden !important;
}
html body.body main.main .rank-con-m .pic { aspect-ratio: 2 / 3 !important; background: #101713 !important; line-height: 0 !important; }
html body.body main.main .rank-con-m .pic img {
  position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important;
  min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important;
  object-fit: cover !important; object-position: center center !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
}
@media(max-width:900px) { html body.body main.main .rank-con-m .pic { height: auto !important; } html body.body main.main .rank-con-m .pic a { height: 100% !important; } }
@media(max-width:640px) {
  html body.body main.main .rank-banner { min-height: 120px !important; margin-bottom: 16px !important; border-radius: 15px !important; }
  html body.body main.main .rank-banner p { font-size: 11px !important; padding: 6px 10px !important; }
}