body{background: #f5f6f8;}

.top-topic-panel{display: flex;align-items: center;column-gap: 1.25rem;flex-wrap: nowrap;overflow-x: scroll;}
.top-topic-panel::-webkit-scrollbar{height: 0;}
.top-topic-panel .topicWrap {width: 28.125rem;flex-shrink: 0;background: #ffffff;display: flex;flex-direction: column;overflow: hidden;}
.top-topic-panel .topicWrap .bannerTop{position: relative;width: 100%;height: 13.75rem;z-index: 1;}
.top-topic-panel .topicWrap .bannerTop .bannerWrap{width: 100%;height: 100%;overflow: hidden;position: relative;}
.top-topic-panel .topicWrap .bannerTop .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;overflow: hidden;}
.top-topic-panel .topicWrap .bannerTop::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 .topicWrap .bannerTop .topic-app-list{position: absolute;width: 100%;padding: 0 1.25rem;left: 0;bottom: 1rem;display: flex;align-items: center;column-gap: 0.875rem;z-index: 2;}
.top-topic-panel .topicWrap .bannerTop .topic-app-list a{width: 3.875rem;height: 3.875rem;border-radius: 0.625rem;text-align: center;line-height: 3.875rem;font-size: 1.5rem;color: #ffffff;background: #000000BF;}
.top-topic-panel .topicWrap .bannerTop .topic-app-list a img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 0.625rem;overflow: hidden;}
.top-topic-panel .topicWrap .infoWrap{padding: 1rem 1.25rem;display: flex;flex-direction: column;overflow: hidden;}
.top-topic-panel .topicWrap .infoWrap .topicName{font-size: 1.5rem;font-weight: bold;color: #02010a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.top-topic-panel .topicWrap .infoWrap .detailWrap{display: flex; align-items: center; column-gap: 0.375rem; font-size: 1.25rem; color: #bababa;line-height: 1.625rem;margin-top: 0.25rem;}


.topic-listing-panel{margin-top: 1.875rem;background: #ffffff;margin-bottom: 1.875rem;padding-bottom: 1px;}
.topic-listing-panel .topic-tab{height: 5rem;padding: 0 1.25rem;background: #e8f4ff;display: flex;align-items: center;justify-content: center;position: relative;}
.topic-listing-panel .topic-tab a{font-size: 1.75rem;color: #666666;padding: 0 1.25rem;position: relative;line-height: 2rem;}
.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;}
.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: 1px;height: 1.75rem;background: #bababa;}
.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::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-tab::before{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-listing-panel .topic-listing{padding: 1.875rem 1.25rem 0.625rem;display: grid;grid-template-columns: repeat(2,1fr);column-gap: 1.25rem;row-gap: 1.25rem;}
.topic-listing-panel .topic-listing .topicWrap{width: 100%;display: flex;flex-direction: column;background: #f5f6f8;overflow: hidden;}
.topic-listing-panel .topic-listing .topicWrap .bannerWrap{width: 100%;height: 10.625rem;overflow: hidden;}
.topic-listing-panel .topic-listing .topicWrap .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;overflow: hidden;}
.topic-listing-panel .topic-listing .topicWrap .infoWrap{padding: 1rem 0.75rem 0.875rem;display: flex;flex-direction: column;overflow: hidden;}
.topic-listing-panel .topic-listing .topicWrap .infoWrap .topicName{font-size: 1.5rem;color: #02010a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-listing-panel .topic-listing .topicWrap .infoWrap .detailWrap{display: flex;align-items: center;column-gap: 0.5rem;font-size: 1.125rem;color: #bababa;}

.topic-detail-banner{display: flex;flex-direction: column;position: relative;padding: 1.25rem;background: #ffffff;}
.topic-detail-banner .bannerWrap{position: relative;width: 100%;height: 18.5rem;}
.topic-detail-banner .bannerWrap .tag{position: absolute;top: -2px;left: -2px;background: #f72f6a;padding: 0.375rem 0.625rem;font-size: 1.25rem;color: #ffffff;z-index: 1;}
.topic-detail-banner .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.topic-detail-banner h1{margin: 1rem 0;font-size: 1.875rem;font-weight: bold;color: #02010a;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.topic-detail-banner .detailWrap{font-size: 1.125rem;color: #bababa;display: flex;align-items: center;column-gap: 0.375rem;line-height: 1.25rem;margin-bottom: 0.75rem;}
.topic-detail-banner .desc{font-size: 1.125rem;color: #333333;line-height: 1.875rem;}
.topic-detail-banner .tag-list{margin-top: 1.125rem;display: flex;align-items: center;flex-wrap: wrap;gap: 1rem;}
.topic-detail-banner .tag-list a{height: 2rem;line-height: 2rem;width: fit-content;padding: 0 1rem;border: 1px solid #cbd2d9;font-size: 1.125rem;color: #999999;border-radius: 0.375rem;}

.hot-pick-panel{margin-top: 1.25rem;padding: 1.5rem 1.25rem 2.5rem;background: #ffffff;}

.premium-app-panel{margin-top: 1.25rem;padding: 1.25rem;background: #ffffff;}
.premium-app-panel .app-row-listing .appWrap:nth-child(odd){background: transparent;}

.topic-rec-panel{margin-top: 1.25rem;padding: 1.5rem 1.25rem 1.875rem;background: #ffffff;}
.topic-rec-panel .topic-rec-list{margin-top: 1.25rem;display: grid;grid-template-columns: repeat(2,1fr);column-gap: 1.25rem;row-gap: 1.25rem;}
.topic-rec-panel .topic-rec-list .topicWrap{width: 100%;display: flex;flex-direction: column;background: #f5f6f8;padding-bottom: 0.75rem;overflow: hidden;}
.topic-rec-panel .topic-rec-list .topicWrap .bannerWrap{width: 100%;height: 10.625rem;overflow: hidden;}
.topic-rec-panel .topic-rec-list .topicWrap .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;overflow: hidden;}
.topic-rec-panel .topic-rec-list .topicWrap .topicName{margin-top: 0.75rem;padding: 0 0.75rem;font-size: 1.5rem;color: #02010a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-rec-panel .topic-rec-list .topicWrap .detailWrap{display: flex;align-items: center;column-gap: 0.375rem;font-size: 1.25rem;color: #bababa;line-height: 1.875rem;padding: 0 0.75rem;margin-top: 0.25rem;}
.topic-rec-panel .topic-rec-list .topicWrap .detailWrap .separator{height: 1.125rem;}
.topic-rec-panel .rec-bottom-list {margin-top: 1.25rem;display: flex;flex-wrap: wrap;column-gap: 1.25rem;row-gap: 1.25rem;}
.topic-rec-panel .rec-bottom-list a{height: 3rem;line-height: 3rem;width: fit-content;text-align: center;padding: 0 1.25rem;font-size: 1.5rem;color: #666666;border: 1px solid #cbd2d9;border-radius: 0.375rem;}

.topic-detail-page{margin-bottom: 1.875rem;}