body { color: #141414; font-weight: normal; font-family: "PingFang SC", "BlinkMacSystemFont", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 12px; }
.tab-list { display: flex; align-items: center; height: 38px; position: relative; background: #fff; border-bottom: 0.5px solid #e9e9e9; }
.tab-item { flex: 0 0 auto; font-size: 14px; color: #333; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.tab-item.active { color: #f43f5e; font-weight: 600; }
.tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 20px; right: 20px; height: 2px; background-color: #f43f5e; border-radius: 100px; }
.banner-new { padding: 8px; background: #fff; display: flex; }
.banner-new img { width: 100%; border-radius: 6px; }
.expert-section { display: flex; align-items: center; padding: 12px 8px; background: #fff; margin-top: 6px; gap: 6px; }
.icon-18 { width: 18px; height: 18px; }
.icon-16 { width: 16px; height: 16px; }
.icon-10 { width: 10px; height: 10px; }
.section-title { font-size: 15px; font-weight: bold; color: #333; }
.refresh-btn { margin-left: auto; width: 16px; height: 16px; transform-origin: center center; }

@keyframes refreshRotate {
    0% { transform: rotate(0deg); }
    /* 动画开始：初始角度 */
    100% { transform: rotate(90deg); }
    /* 动画结束：顺时针90度 */
}

.refresh-btn:active { /* 调用动画：名称 时长 速度曲线 执行后还原初始状态 */ animation: refreshRotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.expert-list { display: flex; justify-content: space-around; background: #fff; padding: 2px 4px 12px; margin-bottom: 6px; }
.expert-list2 { display: flex; justify-content: space-around; background: #fff; padding: 12px 4px 12px; margin-bottom: 6px; }
.expert-list2.none { display: flex; justify-content: space-around; background: #fff; padding: 2px 4px 6px; margin-bottom: 6px; flex-direction: column; align-items: center; color: #c0c0c0; }
.expert-list2.none img { width: 60px; height: 60px; }
.expert-item { text-align: center; flex: 1; max-width: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.avatar1-container { position: relative; width: 34px; height: 34px; }
.avatar-container { position: relative; width: 38px; height: 38px; }
.avatar { width: 100%; height: 100%; border-radius: 50%; }
.badge { position: absolute; top: 0px; right: -5px; width: 14px; height: 14px; background-color: #ff3b30; color: #fff; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.expert-name { font-size: 12px; color: #333; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; line-height: 14px; }
.expert-name.graytext { color: #999; }
.record { display: flex; font-size: 11px; line-height: 12px; font-weight: 500; color: #E53935; border-radius: 4px; border: 1px solid var(--system-accent, #E53935); background: var(--system-accent_bg, #FFF5F7); padding: 1.5px 2.5px; align-items: center; gap: 2px; }

@media (max-width: 374px) {
    .expert-item { max-width: 70px !important; }
    .left-tab { padding: 4px 10px !important; font-size: 11px !important; }
    .right-tab { padding: 2px 8px !important; font-size: 11px !important; }
}
/* 选项卡容器：左右布局，对齐方式优化 */
.tab-container { display: flex; padding: 8px; align-items: center; justify-content: space-between; background: #fff; }
/* 左侧选项组样式 */
.left-tabs { display: flex; gap: 4px; }
.left-tab { padding: 5px 12px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 14px; transition: all 0.2s ease; border: none; outline: none; }
/* 左侧选中态 */
.left-tab.active { background-color: #F44336; color: #ffffff; }
/* 左侧未选中态 */
.left-tab:not(.active) { background-color: #f5f5f5; color: #515151; }

/* 右侧选项组样式：圆角包裹+内部选项 */
.right-tabs { display: flex; background-color: #f5f5f5; border-radius: 20px; padding: 2px; }
.right-tab { padding: 3px 8px; border-radius: 18px; font-size: 12px; line-height: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: none; outline: none; background: transparent; }
/* 右侧选中态 */
.right-tab.active { background-color: #ffffff; color: #F44336; }
/* 右侧未选中态 */
.right-tab:not(.active) { color: #8E8E8E; font-weight: 400 !important; }

.expert-card { padding: 8px; background: #fff; border-bottom: 0.5px solid #e7e7e7; }
.name-badges { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.name2 { font-size: 14px; line-height: 18px; font-weight: 500; }
.user2 { display: flex; align-items: center; gap: 8px; width: 100%; }
.label-part { display: flex; gap: 4px; font-size: 12px; line-height: 14px; }
.label-red { display: flex; }
.num { background: linear-gradient(99deg, #F57E34 3.34%, #E53935 93.31%); color: #fff; font-size: 10px; line-height: 12px; font-weight: 500; display: flex; justify-content: center; align-items: center; padding: 0.5px 0px; border-radius: 3px 0px 0px 3px; width: 18px; }
.num1 { background: linear-gradient(99deg, #F57E34 3.34%, #E53935 93.31%); color: #fff; font-size: 11px; line-height: 12px; font-weight: 500; display: flex; justify-content: center; align-items: center; padding: 0.5px 0px; border-radius: 3px 0px 0px 3px; width: 18px; }
.num-text { border: 1px solid var(--system-accent, #E53935); background: var(--system-accent_bg, #FFF5F7); color: #E53935; font-size: 11px; line-height: 12px; font-weight: 500; display: flex; justify-content: center; align-items: center; padding: 0.5px 4px; border-radius: 0px 3px 3px 0px; border: solid 1px; border-left: none; gap: 1px; }
.winrate { display: flex; flex-direction: column; font-size: 17px; line-height: 20px; color: #F44336; font-weight: 600; align-items: flex-end; min-width: 75px; margin-left: auto; gap: 1px; padding-right: 1px; height: 36px; justify-content: flex-start; }
.winrate-sc { display: flex; flex-direction: column; font-size: 17px; line-height: 20px; color: #F44336; font-weight: 600; align-items: flex-end; /* min-width: 75px; */ margin-left: auto; gap: 1px; padding-right: 1px; height: 36px; justify-content: flex-start; }
.winrate-sc span { font-size: 10px; line-height: 12px; font-weight: 400; }
.winrate span { font-size: 10px; line-height: 12px; font-weight: 400; }
.expert-header { display: flex; flex-direction: column; justify-content: center; gap: 1px;max-width: 250px; }
.expert-header-sc { display: flex; flex-direction: column; justify-content: center; gap: 1px;}
.rate-group { display: flex; gap: 3px; font-size: 11px; color: #8b8b8b; align-items: center; line-height: 12px; }
.rate-group span { background: var(--system-accent_bg, #FFF5F7); color: #E53935; font-size: 10px; line-height: 12px; font-weight: 500; display: flex; justify-content: center; align-items: center; padding: 2px 4px; border-radius: 100px; }
.prediction-title { font-size: 15px; color: #333; margin: 10px 0 6px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.match-info { background-color: #f5f5f5; padding: 6px; border-radius: 4px; display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 14px; padding-left: 8px; }
.match-time { color: #999; }
.league-match { color: #515151; flex: 1; display: flex; align-items: center; gap: 8px; }
.league-match span.red { color: #E53935; }
.footer-stats { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; line-height: 14px; color: #999; }
.views { display: flex; align-items: center; }
.views span { margin-left: 2px; color: #E53935; margin-right: 3px; }
.price { display: flex; align-items: center; gap: 2px; color: #fc9810; padding-right: 1px; }
.blue-text { color: #0f86f5; margin-right: 2px; }
.order-title { background-color: #fff; padding: 8px; display: flex; font-size: 14px; border-bottom: 0.5px solid #EAEAEA; align-items: center; }
.order-label { width: 3px; height: 12px; border-radius: 100px; background-color: #F44336; margin-right: 6px; }
.expert-card2 { padding: 8px; background: #fff; border-bottom: 0.5px solid #e7e7e7; display: flex; flex-direction: row; align-items: center; }
.rank1 { font-weight: bolder; font-size: 15px; color: #f44336; padding-right: 6px; line-height: 18px; width: 20px; text-align: center; }
.rank2 { font-weight: bolder; font-size: 15px; color: #999; padding-right: 6px; line-height: 18px; width: 20px; text-align: center; }
.expert-card-new { padding: 10px 8px; border-radius: 0 0 16px 16px; border: 2px solid #FFF; background: rgba(255, 255, 255, 0.40); box-shadow: 4px 4px 20px 0 rgb(255 255 255 / 50%) inset, 0 10px 80px 0 rgb(0 0 0 / 12%); backdrop-filter: blur(10px); margin: 0px 0px 12px 0px; }
.ctrl-right { float: right; height: 45px; display: flex; align-items: center; margin-right: 6px; }
.OperBtn { width: 24px; height: 24px; background: url(/Content/Images/operate-icon.svg); display: block; }
.avatar-container2 { position: relative; width: 44px; height: 44px; }
.expert-header2 { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.article-content { display: flex; padding: 12px 12px 16px 12px; background-color: #fff; border-radius: 12px; flex-direction: column; position: relative; margin: 8px; }
.title { font-size: 16px; font-weight: 500; display: flex; }
.title-text { display: flex; width: 100%; line-height: 22px; margin-bottom: 10px; }
.match-bg { background-image: url(/Content/Images/team-bg-h5.png); background-repeat: no-repeat; background-size: cover; padding: 6px 0px; display: flex; justify-content: center; align-items: center; position: relative; border-radius: 8px; margin-bottom: 12px; height: 80px; }
.team { display: flex; flex-direction: column; align-items: center; width: 100%; color: #fff; font-size: 14px; }
.team img { width: 30px; height: 30px; margin-bottom: 8px; }
.vs-mid { display: flex; font-size: 11px; line-height: 13px; flex-direction: column; align-items: center; min-width: 76px; color: #fff; }
.league-info { display: flex; flex-direction: column; align-items: center; color: #ffffff80; }
p { word-break: break-all;overflow-wrap: break-word;  white-space: normal; }
.league-info span { font-size: 12px; line-height: 14px; margin: 2px 0px; }
.VS2 { font-size: 20px; line-height: 22px; font-weight: 500; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Helvetica Neue",Helvetica,Arial,sans-serif; }
.star-icon { width: 20px; height: 20px; position: absolute; z-index: 1; display: block; right: 6px; top: 6px; }
.star-icon.on { background: url(/Content/Images/star-on.svg) no-repeat center; background-size: 100%; background-color: transparent; }
.star-icon.off { background: url(/Content/Images/star-off.svg) no-repeat center; background-size: 100%; background-color: transparent; }
.tabwrap { padding: 0 12px 6px !important; }
.sort { display: flex; flex-direction: row; justify-content: space-between; font-size: 12px; line-height: 13px; color: #8E8E8E; align-items: center; margin-bottom: 12px; }
.sort-label { color: #0f86f5; }
.article-text { font-size: 15px; line-height: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.article-text p img { width: 100%; }
.article-hide { background-color: #FFFbf0; border: 1px solid #ffddaa; border-radius: 8px; display: flex; flex-direction: column; align-items: center; padding: 24px; gap: 12px; margin: 12px 0; }
.article-hide-text { background-color: #FFFbf0; border: 1px solid #ffddaa; border-radius: 8px; padding: 10px; font-size: 15px; line-height: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
.article-text p, .article-hide-text p { padding: 0;  }
.unlock-tip { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.unlock-tip span { color: #ff4433; margin: 0 4px; }
.lock-icon2 { width: 24px; height: 24px; }
.lable-play { display: flex; background: #fff; border-radius: 160px; padding: 4px 10px 4px 4px; font-size: 14px; font-weight: 500; color: #FF6B42; border: 0.5px solid #FF6B42; box-shadow: 0px 0px 4px 0px #FFC4B3; width: auto; white-space: nowrap; align-items: center; }
.lable-play span { background: #ff6B42; border-radius: 100px; color: #fff; padding: 2px 10px; margin-right: 8px; }
.countdown-container { display: flex; align-items: center; gap: 16px; }
.countdown-text { font-size: 14px; line-height: 18px; font-weight: 500; color: #222222; white-space: nowrap; }
.countdown-blocks { display: flex; align-items: center; gap: 8px; }
.countdown-block { background-color: #ff4433; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 18px; font-weight: 700; padding: 8px 6px; color: #ffffff; }
.countdown-colon { font-size: 14px; line-height: 18px; font-weight: 700; color: #222222; }
.agreement { padding: 4px 8px 12px 8px; border-radius: 4px; display: flex; color: #8E8E8E; line-height: 14px; }
.icon-14 { width: 14px; height: 14px; margin-right: 4px; }
.agreement span a { color: #F2A128; text-decoration: none; }
.bottom-buy { display: flex; position: fixed; bottom: 0; width: calc(100% - 24px); border-radius: 12px 12px 0 0; border: 0.5px solid var(--border-primary, #EAEAEA); background-color: #fff; justify-content: center; align-items: center; padding: 16px 12px 24px; justify-content: space-between; font-size: 13px; line-height: 18px; z-index: 100; }
.bottom-buy-left { display: flex; gap: 4px; align-items: center; }
.number-buy { display: flex; align-items: center; margin-right: 8px; }
.number-buy span { font-weight: 500; color: #F44336; }

.avatar-small { display: flex; }
.avatar2 { width: 22px; height: 22px; border-radius: 50%; border: 0.5px solid #fff; object-fit: cover; margin-left: -6px; }
.unlock-btn { padding: 4px 12px 4px 4px; background-color: #F44336; display: flex; border-radius: 100px; color: #fff; align-items: center; }
.lock-icon { width: 24px; height: 24px; margin-right: 8px; }
.lock-text { display: flex; flex-direction: column; align-items: center; width: 100%; }
.text-qiubi { display: flex; align-items: center; }
.lock-text h4 { font-size: 15px; font-weight: 500; line-height: 20px; margin-right: 4px; }
.lock-text span { font-size: 10px; line-height: 12px; }
.btn-group { display: flex; align-items: center; gap: 6px; }

@media (max-width: 374px) {
    .lock-text h4 { font-size: 13px; font-weight: 500; line-height: 20px; margin-right: 4px; }
    .btn-group { display: flex; align-items: center; gap: 4px; }
}

@media (min-width: 429px) {
    .avatar2 { width: 26px; height: 26px; border-radius: 50%; border: 0.5px solid #fff; object-fit: cover; margin-left: -6px; }
    .lock-icon { width: 28px; height: 28px; margin-right: 8px; }
    .lock-text h4 { font-size: 16px; font-weight: 500; line-height: 20px; margin-right: 4px; }
    .number-buy { display: flex; align-items: center; margin-right: 8px; font-size: 14px; }
}

.user-home { position: relative; width: 100%; /* min-height: 72.8vw; */ overflow: hidden; background-blend-mode: normal; }
.user-home::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(6, 0, 21, 0.60); z-index: -1; }
.user-home-bg { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: center / 120% 120% no-repeat; filter: blur(40px); z-index: -2; }
.home-content { position: relative; z-index: 1; }
.title-bar { display: flex; height: 44px; align-items: center; justify-content: space-between; padding: 0 12px; }
.num-league { background: linear-gradient(99deg, #F57E34 3.34%, #E53935 93.31%); color: #fff; font-size: 11px; line-height: 14px; /* font-weight: 500; */ display: flex; justify-content: center; align-items: center; padding: 2px 3px; border-radius: 3px 0px 0px 3px; }
.icon24 { width: 24px; height: 24px; }
.user-info { display: flex; align-items: center; padding: 8px 16px 12px 16px; justify-content: space-between; }
.user-part { font-size: 18px; line-height: 22px; color: #fff; font-weight: 500; display: flex; align-items: center; }
.user-avatar { width: 54px; height: 54px; border-radius: 50%; border: 1px solid #fff; margin-right: 10px; }
.follow-btn-red { display: flex; padding: 8px 14px; justify-content: center; align-items: center; border-radius: 4px; background: var(--design-red, #F44336); font-size: 12px; line-height: 14px; color: #fff; }
.follow-btn-red.gray { display: flex; padding: 8px 14px; justify-content: center; align-items: center; border-radius: 4px; background-color: #ffffff10; font-size: 12px !important; line-height: 14px; color: #fff; width: 38px; }
.record-part { padding: 0 16px; display: flex; justify-content: center; flex-direction: column; }
.rate-part2 { /* 改用 Grid 布局实现固定4列 */ display: grid; /* 关键：定义4列，每列宽度等分 */ grid-template-columns: repeat(4, 1fr); /* 卡片之间的间距 */ gap: 6px; text-align: center; padding: 8px; width: 100%; background-color: #ffffff10; border-radius: 6px; margin-bottom: 14px; /* 防止宽度溢出 */ box-sizing: border-box; }

.rate-part-label { border: solid 1px #F44336; border-radius: 4px; width: 100%; }
.rate-part-label.blue { border: solid 1px #2196F3; }
.rate-part-label.blue .rate-text { background: #F0FAFF; color: #2196F3; }
.rate-part-label.blue .rate-labe-text { background-color: #2196F3; }
.rate-text { font-size: 12px; line-height: 14px; padding: 2px; font-weight: 500; background: #FFF5F7; color: #F44336; border-radius: 4px 4px 0 0; }

.icon-12 { width: 12px; height: 12px; margin-right: 2px; }
.introduction-text { font-size: 13px; line-height: 18px; color: #ffffff90; margin-bottom: 14px; }
.rate-part2 .rate-labe-text { font-size: 11px; padding: 3px; line-height: 14px; }
.rate-labe-text { font-size: 8px; color: #fff; line-height: 10px; background-color: #F44336; padding: 1px; }

@media screen and (max-width: 374px) {
    .team-vs { font-size: 14px; max-width: 180px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .num-league { padding: 2px 2px; font-size: 9px; }
    .rate-part2 .rate-text { font-size: 13px; line-height: 15px; padding: 4px; }
    .record-list { gap: 4px !important; }
    .record-list-text { padding: 0.5px 1.5px 0.5px 2px !important; }
    .record-list-text { font-size: 9.5px !important; }
}

@media screen and (min-width: 376px) {
    .rate-part2 .rate-text { font-size: 14px; line-height: 18px; padding: 3px; }
    .record-list { display: flex; gap: 4px !important; font-size: 12px; line-height: 14px; margin-bottom: 10px; }
    .num-league { font-size: 10px; padding: 2px 2px; }
}

@media screen and (min-width: 429px) {
    .rate-part2 .rate-labe-text { font-size: 12px; padding: 3px; line-height: 14px; }
    .num-league { font-size: 11px; padding: 3px 3px; }
    .record-list-text { padding: 0.5px 2px 0.5px 4px !important; font-size: 11px !important; }
}


.record-part .record-list{justify-content: flex-start !important;}
.record-list { display: flex; gap: 6px; font-size: 12px; line-height: 14px; margin-bottom: 10px; flex-wrap: wrap;}
.record-list-text { border: 1px solid var(--system-accent, #E53935); background: var(--system-accent_bg, #FFF5F7); color: #E53935; font-size: 10.5px; line-height: 12px; font-weight: 500; display: flex; justify-content: center; align-items: center; padding: 0.5px 0.5px 0.5px 2px; border-radius: 0px 3px 3px 0px; border: solid 1px; border-left: none; gap: 1px; flex: 1; }
.record-list-text img { width: 8px; }
.banner-author { margin: 0; padding: 0; box-sizing: border-box; }
.banner-author img { object-fit: cover; width: 100%; height: 100%; display: block; }
.order-title2 { background-color: #fff; padding: 8px; display: flex; font-size: 14px; border-bottom: 0.5px solid #EAEAEA; align-items: center; margin-top: 8px; }
.match-card-list { display: flex; background: #fff; flex-direction: column; padding: 10px; gap: 8px; border-bottom: 0.5px solid #EAEAEA; position: relative; }
.match-title { font-size: 15px; color: #333; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-left { display: flex; gap: 4px; align-items: center; }
.view-left span.type { color: #2196F3; }
.icon-result { width: 40px; height: 40px; position: absolute; right: 2px; top: 4px; }
.layui-m-layercont ul li { height: 45px; line-height: 45px; padding: 0 14px; font-size: 14px; border-bottom: solid 1px #f0f0f0; text-align: center; letter-spacing: 4px; }