body{background: #f5f6f8;}

.top-topic-panel{display: grid;align-items: flex-start;column-gap: 20px;grid-template-columns: 273px 614px 273px;height: 320px;}
.top-topic-panel > div{overflow: hidden;}
.top-topic-panel > div .topic-column{display: flex;flex-direction: column;row-gap: 20px;}
.top-topic-panel > div .topic-column .topic-banner{width: 100%;height: 150px;overflow: hidden;}
.top-topic-panel > div .topic-column .topic-banner img{width: 100%;height: 100%;object-fit: cover;object-position: center;overflow: hidden;}
.top-topic-panel > div .topic-column .topic-app-wrap{width: 100%;height: 150px;display: flex;flex-direction: column;row-gap: 10px;justify-content: center;padding: 0 16px;background: #02010a;}
.top-topic-panel > div .topic-column .topic-app-wrap .topicName{font-size: 16px;font-weight: bold;color: #ffffff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.top-topic-panel > div .topic-column .topic-app-wrap .topic-app-list{display: grid;align-items: center;column-gap: 10px;justify-content: center;grid-template-columns: repeat(5,1fr);}
.top-topic-panel > div .topic-column .topic-app-wrap .topic-app-list a{width: 40px;height: 40px;text-align: center;border-radius: 6px;overflow: hidden;font-size: 14px;color: #ffffff;line-height: 40px;background: #ffffff26;}
.top-topic-panel > div .topic-column .topic-app-wrap .topic-app-list a img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 6px;}
.top-topic-panel .topic-center-slider{position: relative;width: 100%;height: 100%;}
.top-topic-panel .topic-center-slider .topic-banner-slider{position: relative;width: 100%;height: 100%;z-index: 1;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper{width: 100%;height: 100%;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper .swiper-slide{width: 100%;height: 100%;position: relative;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper .swiper-slide .bannerWrap {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: -1;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper .swiper-slide .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper .swiper-slide::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(0deg, rgb(3, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);z-index: 1;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper-pagination{position: absolute;bottom: 20px;right: 20px;display: flex;align-items: center;column-gap: 3px;z-index: 3;justify-content: flex-end;left: unset;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper-pagination .swiper-pagination-bullet{margin: 0;width: 30px;height: 3px;background: #ffffffBF;opacity: 1;border-radius: 0;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #3071f2;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper .swiper-slide .topic-app-wrap{position: absolute;width: 100%;left: 0;bottom: 20px;z-index: 2;padding: 0 20px;display: flex;flex-direction: column;row-gap: 10px;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper .swiper-slide .topic-app-wrap .topicName{font-size: 22px;font-weight: bold;color: #ffffff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper .swiper-slide .topic-app-wrap .topic-app-list{display: flex;align-items: center;column-gap: 10px;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper .swiper-slide .topic-app-wrap .topic-app-list a{width: 40px;height: 40px;text-align: center;border-radius: 6px;overflow: hidden;font-size: 14px;color: #ffffff;line-height: 40px;background: #ffffff26;}
.top-topic-panel .topic-center-slider .topic-banner-slider .topic-banner-swiper .swiper-slide .topic-app-wrap .topic-app-list a img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 6px;}

.topic-listing-panel{display: flex;flex-direction: column;background: #ffffff;margin-top: 30px;}
.topic-listing-panel .topic-tab{height: 60px;padding: 0 20px;background: #e8f4ff;display: flex;align-items: center;justify-content: center;}
.topic-listing-panel .topic-tab a{font-size: 18px;color: #666666;padding: 0 33px;position: relative;line-height: 24px;}
.topic-listing-panel .topic-tab a.active{font-weight: bold; background: linear-gradient(to left, #4E85F3 0%, #6F9DF4 35%, #6F9DF4 70%, #6F9DF4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;font-size: 20px;}
.topic-listing-panel .topic-tab a::before,
.topic-listing-panel .topic-tab a::after { content: "";position: absolute;top: 50%;transform: translateY(-50%) rotate(18deg);width: 2px;height: 20px;background: #cccccc;}
.topic-listing-panel .topic-tab a::before { left: 0; }
.topic-listing-panel .topic-tab a::after { right: 0; }
.topic-listing-panel .topic-tab a:not(:first-child)::before { opacity: 0; }
.topic-listing-panel .topic-tab a.active { color: #16bff6; }
.topic-listing-panel .topic-tab a.active::after { background: #16bff6; }
.topic-listing-panel .topic-tab a:has(+ a.active)::after { background: #16bff6; }
.topic-listing-panel .topic-tab a.active:not(:first-child)::before { opacity: 0; }
.topic-listing-panel .topic-tab a.active:first-child::before { opacity: 1; background: #16bff6; }
.topic-listing-panel .topic-tab a.active + a::before { opacity: 0; }

.topic-listing-panel .topic-listing{margin-top: 20px;display: grid;grid-template-columns: repeat(4,1fr);column-gap: 20px;row-gap: 20px;padding: 0 20px;}
.topic-listing-panel .topic-listing .topicWrap{overflow: hidden;width: 100%;display: flex;flex-direction: column;}
.topic-listing-panel .topic-listing .topicWrap .bannerWrap{width: 100%;height: 144px;overflow: hidden;}
.topic-listing-panel .topic-listing .topicWrap .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.topic-listing-panel .topic-listing .topicWrap .topicName{padding: 0 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 16px;font-weight: bold;color: #02010a;margin: 5px 0;}
.topic-listing-panel .topic-listing .topicWrap .bottomWrap{display: flex;align-items: center;column-gap: 6px;font-size: 13px;color: #bababa;padding: 0 10px 10px;}
.topic-listing-panel .topic-listing .topicWrap:hover{background: #f5f6f8;}
.topic-listing-panel .topic-listing .topicWrap:hover .topicName{color: #3071f2;}


.topic-detail-banner{position: relative;background: #ffffff;padding: 30px;display: flex;align-items: center;column-gap: 30px;}
.topic-detail-banner::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, #4E85F3 0%, #7FA7F4 25%, #C9D8F7 50%, #F1F3F8 100%);}
.topic-detail-banner .topic-detail-info{flex: 1;display: flex;flex-direction: column;overflow: hidden;}
.topic-detail-banner .topic-detail-info h1{font-size: 30px;font-weight: bold;color: #02010a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 10px;}
.topic-detail-banner .topic-detail-info .detailWrap{display: flex;align-items: center;column-gap: 6px;font-size: 14px;color: #bababa;margin-bottom: 12px;line-height: 16px;}
.topic-detail-banner .topic-detail-info .desc { font-size: 16px; line-height: 30px; color: #333333; overflow-y: auto; max-height: 120px; padding-right: 10px; scrollbar-width: thin; scrollbar-color: #3071f2 transparent; }
.topic-detail-banner .topic-detail-info .desc::-webkit-scrollbar { width: 6px; }
.topic-detail-banner .topic-detail-info .desc::-webkit-scrollbar-track { background: transparent; }
.topic-detail-banner .topic-detail-info .desc::-webkit-scrollbar-thumb { background: #3071f2; border-radius: 10px; }
.topic-detail-banner .topic-detail-info .desc::-webkit-scrollbar-thumb:hover { background: #245dcc; }
.topic-detail-banner .topic-detail-info .tag-list{margin-top: 25px;display: flex;align-items: center;column-gap: 10px;}
.topic-detail-banner .topic-detail-info .tag-list a{width: fit-content;height: 22px;line-height: 20px;text-align: center;font-size: 12px;color: #999999;border: 1px solid #999999;border-radius: 4px;padding: 0 10px;}
.topic-detail-banner .bannerWrap{flex-shrink: 0;width: 490px;height: 242px;overflow: hidden;}
.topic-detail-banner .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;overflow: hidden;display: block;}

.all-app-panel{background: #ffffff;margin-top: 20px;padding: 20px 10px 1px;}
.all-app-panel .titleTop{margin-bottom: 16px;display: flex;align-items: center;justify-content: space-between;padding: 0 10px;}
.all-app-panel .titleTop h2{font-weight: bold;font-size: 22px;color: #02010a;}
.all-app-panel .titleTop .hot-app-list {display: flex;align-items: center;column-gap: 10px;}
.all-app-panel .titleTop .hot-app-list a{background: #ffffff;border: 1px solid rgb(203, 210, 217);border-radius: 6px;padding: 6px 10px;text-align: center;font-size: 14px;color: #333333;position: relative;width: auto;flex-shrink: 0;}
.all-app-panel .titleTop .hot-app-list a.hot::after{content: "H";position: absolute;top: -4px;left: 0;font-size: 10px;font-weight: bold;color: #ffffff;border-radius: 4px;background: #f91d60;padding: 2px;transform: skew(-4deg);}
.all-app-panel .titleTop .hot-app-list a.new::after{content: "N";position: absolute;top: -4px;left: 0;font-size: 10px;font-weight: bold;color: #ffffff;border-radius: 4px;background: #09c8b8;padding: 2px;transform: skew(-4deg);}

.topic-rec-panel{margin-top: 30px;}
.topic-rec-panel h2{font-size: 22px;font-weight: bold;color: #02010a;padding-left: 0;}
.topic-rec-panel h2::before{display: none;}
.topic-rec-panel .topic-listing{margin-top: 20px;display: grid;grid-template-columns: repeat(4,1fr);column-gap: 20px;row-gap: 20px;}
.topic-rec-panel .topic-listing .topicWrap{overflow: hidden;width: 100%;display: flex;flex-direction: column;}
.topic-rec-panel .topic-listing .topicWrap .bannerWrap{width: 100%;height: 146px;overflow: hidden;}
.topic-rec-panel .topic-listing .topicWrap .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.topic-rec-panel .topic-listing .topicWrap .topicName{padding: 0 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 16px;font-weight: bold;color: #02010a;margin: 10px 0;}
.topic-rec-panel .topic-listing .topicWrap .bottomWrap{display: flex;align-items: center;column-gap: 6px;font-size: 13px;color: #bababa;padding: 0 10px 10px;}
.topic-rec-panel .topic-listing .topicWrap:hover{background: #ffffff;}
.topic-rec-panel .topic-listing .topicWrap:hover .topicName{color: #3071f2;}