.phead{display:flex;flex-direction:column;width:100%;padding:40px 0;background-color:#f8f8f8}
.phead .ptitle{flex:1;display:flex;align-items:center;margin:0;font-size:36px;font-weight:600;line-height:44px}
.phead .pdesc{font-size:14px;display:flex;align-items:center;flex-wrap:wrap;gap:30px;color:#999;font-size:18px;line-height:24px;margin-block-start:16px}
.phead .pdesc > div{display:flex;align-items:center;gap:5px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin:30px 0 20px 0}
.panel-head .panel-title{font-size:28px;font-weight:600;margin:0}
.h3-title{font-size:18px;font-weight:600;margin:0}
.filter-wrapper{display:flex;align-items:self-start;flex-wrap:wrap;gap:20px;margin-block-start:30px}
.filter-wrapper .filter{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border:1px solid #d7d7d7;border-radius:5px;padding:0 0 0 10px;transition:border-color 0.2s ease-in-out;overflow:hidden;height:32px;background-color:#fff}
.filter-wrapper .filter:hover{border-color:var(--el-color-primary)}
.filter-wrapper .filter .filter-label{flex-shrink:0;font-size:12px;color:#7F7F7F;white-space:nowrap;max-width:110px;text-overflow:ellipsis;overflow:hidden}
.filter-wrapper .filter .el-select__wrapper,.filter-wrapper .filter .el-input__wrapper{box-shadow:none !important}
.filter-wrapper .filter .el-cascader__tags{flex-wrap:nowrap}
.filter-wrapper .filter .el-cascader__tags .el-tag.el-tag--info{--el-tag-text-color:#333;margin-block-start:0 !important;margin-block-end:0 !important}
.filter-wrapper .filter .el-cascader__tags .el-tag{max-width:75%}
.filter-wrapper .filter .el-cascader__search-input{margin-block-end:0 !important;margin-block-start:0 !important}
.Posts{background-color:#f8f8f8;border-radius:10px;width:590px;padding:20px 40px}
.Posts > .tlt{font-size:18px;font-weight:600;margin-block-end:16px}
.Posts .ls-wrapper{display:flex;align-items:center;justify-content:space-between}
.Posts .ls-wrapper .ls{flex-shrink:0}
.Posts .ls-wrapper .ls .count{font-size:36px;font-weight:600;margin-block-end:10px}
.Posts .ls-wrapper .ls .desc{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.Posts .ls-wrapper .ls .desc .country,.Posts .ls-wrapper .ls .desc .overall,.Posts .ls-wrapper .ls .desc .time{font-size:18px}
.Posts .ls-wrapper .sep{flex-shrink:0;width:4px;height:30px;background-color:#d9d9d9;transform:rotate(30deg);align-self:center}
.InterestOverTimeChart{width:100%;height:320px}
.tabPanelAudienceInsights{display:flex;align-items:flex-start;gap:20px;margin-block-start:40px}
.tabPanelAudienceInsights .ls{width:calc(100% - 20px)}
.AgeRangeChart{width:100%;height:320px}
.AudienceCcountriesChart li,.RelatedInterestsChart li{--percent:0%;display:flex;align-items:center;margin-block-end:20px;gap:20px}
.AudienceCcountriesChart li .name,.RelatedInterestsChart li .name{width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.AudienceCcountriesChart li .bar,.RelatedInterestsChart li .bar{width:300px;height:30px;background-color:rgba(123,104,238,0.1);position:relative;overflow:hidden;border-radius:5px;color:#fff;background-blend-mode:multiply}
.AudienceCcountriesChart li .bar::before,.RelatedInterestsChart li .bar::before{content:"";position:absolute;top:0;right:0;width:var(--percent);height:30px;z-index:2;background-color:var(--el-color-danger)}
.AudienceCcountriesChart li .bar .score,.RelatedInterestsChart li .bar .score{position:absolute;top:0;right:0;z-index:1;width:max-content;height:30px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:5px;white-space:nowrap;padding-inline-end:10px;color:#fff;font-size:14px;filter:drop-shadow(0px 0px 1px rgba(247,113,176,0.8))}
.RelatedVideos{margin-block-start:50px}
.RelatedVideos ul{display:flex;align-items:center;overflow:auto hidden;gap:10px 20px;margin:20px 0 20px 0}
.RelatedVideos ul li{flex-shrink:0;width:325px;height:739px;position:relative;overflow:hidden;background-color:#f5f5f5;border-radius:10px}
.RelatedVideos ul li iframe{width:100%;height:100%;border-radius:10px;border:none}
.RelatedVideos #pagination{padding-block-end:30px}
.RecommendedForYou{margin-block-start:50px}
.RecommendedForYou ul{background-color:#f8f8f8;border-radius:10px;width:100%;padding:20px 40px;display:flex;align-items:flex-start;flex-wrap:wrap;gap:40px;margin-block-start:20px}
@media screen and (max-width:768px){
  .phead{padding-inline-start:10px;padding-inline-end:10px}
  .panel-head{padding-inline-start:10px;padding-inline-end:10px}
  .Posts{padding:10px;width:100%}
  .Posts .ls-wrapper .ls:first-child .desc{flex-direction:column}
  .h3-title{padding-inline-start:10px}
  .tabPanelAudienceInsights{flex-direction:column}
  .AudienceCcountriesChart,.RelatedInterestsChart{padding-inline-start:10px}
  .RelatedVideos ul{padding-inline-start:10px}
}