.topic-detail-page .topic-detail-wrap{margin-top: 16px;display: flex;align-items: flex-start;justify-content: space-between;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel{width: 794px;flex: 0 0 794px;max-width: 794px;display: flex;flex-direction: column;row-gap: 20px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner{display: flex;flex-direction: column;row-gap: 24px;padding: 20px;background-color: #ffffff;border-radius: 10px;box-shadow: 0px 0px 6px 0px #50D5AD1A; }
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap{display: flex;align-items: center;column-gap: 20px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap > img{width: 345px;height: 194px;flex: 0 0 345px;max-width: 345px;border-radius: 10px;object-fit: cover;object-position: center;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap{display: flex;flex-direction: column;row-gap: 16px;overflow: hidden;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .titleWrap{display: flex;align-items: center;column-gap: 16px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .titleWrap h1{font-size: 20px;line-height: 22px;font-weight: bold;color: #0F0F0F;max-width: 280px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .titleWrap .amount{width: fit-content;padding: 0 8px;height: 20px;line-height: 18px;text-align: center;border-radius: 5px;border: 1px solid #33DBB9;background-color: #E5FFF7;font-size: 14px;font-weight: 500;color: #0EC9A3;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .type-list{display: flex;align-items: center;column-gap: 10px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .type-list a{height: 23px; line-height: 23px; width: fit-content; padding: 0 6px; text-align: center; border-radius: 5px; font-size: 12px; white-space: nowrap;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .type-list a:nth-child(5n + 1){background-color: #DEFFE4;color: #1BE900;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .type-list a:nth-child(5n + 2){background-color: #FFEAE5;color: #FF793F;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .type-list a:nth-child(5n + 3){background-color: #E4EFFF;color: #4690FF;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .type-list a:nth-child(5n + 4){background-color: #FFF3D0;color: #F88501;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .type-list a:nth-child(5n + 5){background-color: #F1EDFF;color: #9F46FF;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .topic-content{font-size: 14px;color: #333333;line-height: 20px;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical; overflow:hidden;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .dateUpdate{display: flex;align-items: center;column-gap: 6px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .dateUpdate img{width: 15px;height: auto;object-fit: cover;object-position: center;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-content-wrap .detailWrap .dateUpdate span{font-size: 14px;color: #949494;margin-top: -2px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel {position: relative;width: 100%;height: 110px;border-radius: 15px;background-color: #FFFBEF;padding: 20px;display: flex;align-items: center;column-gap: 20px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .hot-tag{position: absolute;left: -4px;top: -4px;width: 84px;height: 25px;display: flex;align-items: center;justify-content: center;column-gap: 4px;border-radius: 50px 50px 50px 0;background: linear-gradient(96.84deg, #FFD04D -15.95%, #FF793F 142.14%); box-shadow: 2px 2px 5.3px 0px #FF793F59;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .hot-tag .icon.hot-fire{width: 12px;background-size: 150px 424px;height: 12px;background-position: -88px -245px;filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(104%) contrast(102%);}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .hot-tag p{font-size: 13px;line-height: 20px;font-weight: 500;color: #FFFFFF;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel > img{width: 70px;flex: 0 0 70px;max-width: 70px;height: 70px;border-radius: 13px;object-fit: cover;object-position: center;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap{display: flex;flex-direction: column;row-gap: 5px;max-width: 550px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap .titleWrap{display: flex;align-items: center;column-gap: 10px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap .titleWrap h4{font-size: 18px;line-height: 28px;font-weight: bold;color: #333333;max-width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap .titleWrap .type-list{display: flex;align-items: center;column-gap: 10px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap .titleWrap .type-list a{height: 22px; line-height: 22px; width: fit-content; padding: 0 6px; text-align: center; border-radius: 5px; font-size: 12px; white-space: nowrap;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap .titleWrap .type-list a:nth-child(5n + 1){background-color: #DEFFE4;color: #1BE900;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap .titleWrap .type-list a:nth-child(5n + 2){background-color: #FFEAE5;color: #FF793F;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap .titleWrap .type-list a:nth-child(5n + 3){background-color: #E4EFFF;color: #4690FF;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap .titleWrap .type-list a:nth-child(5n + 4){background-color: #FFF3D0;color: #F88501;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap .titleWrap .type-list a:nth-child(5n + 5){background-color: #F1EDFF;color: #9F46FF;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap > p{font-size: 14px;line-height: 16px;color: #949494;display: flex;align-items: center;column-gap: 8px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .detailWrap > p i{width: 1px; height: 14px; background-color: #949494; transform: rotate(25deg);}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .downloadNowBtn{width: 125px; height: 44px; text-align: center; line-height: 44px; display: flex; align-items: center; justify-content: center; column-gap: 6px; background: linear-gradient(94.36deg, #FFD04D -25.34%, #FF793F 100%); border-radius: 10px;flex: 0 0 125px;max-width: 125px;position: absolute;top: 50%;transform: translateY(-50%);right: 20px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .downloadNowBtn img { width: 16px; height: auto; object-fit: cover; object-position: center; }
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .downloadNowBtn p { font-size: 18px; line-height: 25px; font-weight: bold; color: #FFFFFF; }
.topic-detail-page .topic-detail-wrap .topic-detail-panel .topic-detail-banner .topic-app-panel .hot-tag::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 4px; height: 4px; background-color: #FFA781; clip-path: polygon(100% 0, 0 0, 100% 100%); }

.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel{background-color: #ffffff;box-shadow: 0px 0px 6px 0px #50D5AD1A; border-radius: 10px;padding: 16px 20px 30px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-title{position: relative;width: fit-content;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-title h2{font-size: 22px;font-weight: bold;color: #0F0F0F;line-height: 32px;width: fit-content;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-title .gradient-text{position: absolute;right: -65px;top: 50%;transform: translateY(-50%);font-size: 25px;font-weight: bold;background: linear-gradient(181.66deg, rgba(85, 223, 179, 0.4) 1.41%, rgba(88, 240, 192, 0) 98.61%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing{display: flex;flex-wrap: wrap;column-gap: 24px;row-gap: 15px;margin-top: 30px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap{width: 364px;flex: 0 0 364px;max-width: 364px;height: 110px;border: 1px solid transparent;border-radius: 25px;display: flex;align-items: center;column-gap: 14px;padding: 0 17px 0 14px;transition: box-shadow .3s ease;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap .imgWrap{width: 80px;height: 80px;flex: 0 0 80px;max-width: 80px;border-radius: 20px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap .imgWrap img{width: 100%;height: 100%;border-radius: 20px;object-fit: cover;object-position: center;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap .detailWrap{display: flex;flex-direction: column;row-gap: 7px;max-width: 175px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap .detailWrap h4{font-size: 18px;font-weight: bold;line-height: 24px;color: #0F0F0F;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap .detailWrap .typeSize{display: flex;align-items: center;column-gap: 8px;font-size: 14px;color: #333333;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap .detailWrap .typeSize i{width: 1px;height: 14px;background-color: #333333;transform: rotate(25deg);}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap .detailWrap .dateUpdate{display: flex;align-items: center;column-gap: 5px;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap .detailWrap .dateUpdate img{width: 15px;height: auto;object-fit: cover;object-position: center;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap .detailWrap .dateUpdate span{font-size: 14px;color: #333333;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap .viewNowBtn{width: 58px;flex: 0 0 58px;max-width: 58px;height: 23px;line-height: 21px;text-align: center;padding: 0 3px;border: 1px solid #0EC9A3;border-radius: 8px;font-size: 12px;font-weight: 500;color: #0EC9A3;margin-left: auto;}
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap:hover{cursor: pointer;border: 1px solid #0EC9A34D;background-color: #F6FFFC;box-shadow: 3px 3px 8.1px 0px #46E0B03D; }
.topic-detail-page .topic-detail-wrap .topic-detail-panel .all-app-panel .app-listing .appWrap:hover .viewNowBtn{background: linear-gradient(98.94deg, #0EC9A3 0%, #41E0C0 72.6%);border: 1px solid transparent;font-weight: bold;color: #FFFFFF;}

.topic-detail-page .topic-detail-wrap .side-topic-panel{width: 385px;flex: 0 0 385px;max-width: 385px;display: flex;flex-direction: column;row-gap: 20px;}
.topic-detail-page .topic-detail-wrap .side-topic-panel .side-topic-wrap{width: 100%;background: #FFFFFF; border-radius: 10px;box-shadow: 0px 0px 6px 0px #50D5AD1A; padding: 16px 20px 24px;}
.topic-detail-page .topic-detail-wrap .side-topic-panel .side-topic-wrap .side-title .gradient-text{right: -45px;}
.topic-detail-page .topic-detail-wrap .side-topic-panel .side-topic-wrap .side-topic-list{margin-top: 30px;display: flex;flex-direction: column;row-gap: 20px;}
.topic-detail-page .topic-detail-wrap .side-topic-panel .side-topic-wrap .side-topic-list a{width: 100%;height: 180px;border-radius: 10px;position: relative;}
.topic-detail-page .topic-detail-wrap .side-topic-panel .side-topic-wrap .side-topic-list a > img{width: 100%;height: 100%;border-radius: 10px;object-fit: cover;object-position: center;}
.topic-detail-page .topic-detail-wrap .side-topic-panel .side-topic-wrap .side-topic-list a .overlay-title{position: absolute;width: 100%;left: 0;bottom: 0;height: 43px;background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 27.88%, rgba(102, 102, 102, 0.4) 100%);border-radius: 0 0 10px 10px;line-height: 43px;padding: 0 14px;font-size: 18px;font-weight: bold;color: #FFFFFF;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}