body { background: #f4f4f4; color: #333; min-height: 0; font-size: 12px; line-height: 14px; font-family: "PingFang SC", "BlinkMacSystemFont", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
* { padding: 0; margin: 0; }
.vip-pop-bg { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 99; text-align: center; color: #333; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.top-bg-vip { margin: 0 auto; background: url(/Content/Images/VIP/vip-topbg-new.webp) no-repeat top center; background-size: 100% auto; min-height: 320px; }
.top-bg-vipnew { margin: 0 auto; /* background: url(/Content/Images/VIP/vip-topbg.webp) no-repeat top center; */ background-size: 100% auto; /* background: linear-gradient(0deg, #f4f4f4 -5.16%, #FFE1DE 87.81%); */ min-height: 320px; background: linear-gradient(-180deg, #FDFDFD -100%, #FFE1DE 1%, #f4f4f4 30%); }
.nav-bar { height: 44px; display: flex; align-items: center; justify-content: center; padding: 0px 14px; position: relative; }
.nav-title { font-size: 18px; font-weight: 700; color: #333; line-height: 22px; text-align: center; }
.icon-back,
.icon { width: 24px; height: 24px; }
.nav-left { position: absolute; left: 14px; }
.nav-right { display: flex; align-items: center; justify-content: center; gap: 12px; position: absolute; right: 14px; }
.vip-card { width: calc(100% - 30px); height: 60px; position: relative; overflow: hidden; margin: 12px 15px 20px 15px; background-image: url(/Content/Images/VIP/vip-exp-bg.webp); background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: overlay; display: flex; align-items: center; border-radius: 12px; box-sizing: border-box; padding: 14px; box-shadow: 0 2px 20px 0 rgba(171, 171, 171, 0.10), 0 4px 4px 0 rgba(255, 255, 255, 0.25) inset; justify-content: space-between; }
.vip-card-new { width: calc(100% - 24px); height: 56px; position: relative; overflow: hidden; margin: 6px 12px 12px; background-image: url(/Content/Images/VIP/vip-se-bg.webp); background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: overlay; display: flex; align-items: center; border-radius: 10px; box-sizing: border-box; padding: 14px 12px 14px 7px; box-shadow: 0 2px 10px 0 rgba(255, 56, 56, 0.19); justify-content: space-between; }
.vip-card-new::after { content: ""; position: absolute; inset: 0; border-radius: 10px; border: 1.2px solid rgb(255 255 255 / 65%); pointer-events: none; }
.vip-card::after { content: ""; position: absolute; inset: 0; border: 1.3px solid rgba(255, 255, 255, 0.7); border-radius: 12px; pointer-events: none; }
.vip-info { color: #773D14; font-size: 14px; font-weight: 500; line-height: 18px; }
.vip-info-new { display: flex; align-items: center; color: #fff; font-size: 14px; line-height: 18px; gap: 4px; }
.vip-info-new img { width: 40px; height: 40px; }
.vip-info-new h1 { font-size: 18px; line-height: 22px; font-weight: 500; margin-bottom: 6px; }
.vip-btn { border-radius: 100px; background: linear-gradient(0deg, #683D08 0%, #6F420D 100%); box-shadow: 0 -2px 4px 0 #905E22 inset, 0 2px 4px 0 rgba(255, 238, 220, 0.25) inset; color: #FFDD9D; display: flex; align-items: center; justify-content: center; padding: 6px 20px; font-size: 14px; font-weight: 500; line-height: 18px; position: relative; overflow: hidden; }
.vip-btn-new, .vip-btn-Login { font-size: 14px; line-height: 18px; color: #6e2409; border-radius: 100px; border: 0.5px solid #FFF; background: linear-gradient(180deg, rgba(253, 245, 237, 0.90) 0%, rgba(252, 234, 219, 0.90) 50.96%, rgba(252, 229, 210, 0.90) 100%); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05), 0 -2px 4px 0 rgba(255, 247, 237, 0.20) inset, 0 2px 4px 0 rgba(255, 238, 220, 0.25) inset; backdrop-filter: blur(4px); display: flex; align-items: center; padding: 7px 0px; position: relative; overflow: hidden; min-width: 80px; justify-content: center; }
.vip-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shine 3.5s linear 4; }
@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}
.vip-benefits { padding: 12px; border-radius: 16px 16px 0 0; border-top: 1px solid #FFF; border-right: 1px solid #FFF; border-left: 1px solid #FFF; background: linear-gradient(180deg, rgb(255 255 255) 0%, rgba(244, 244, 244, 0.00) 100%); backdrop-filter: blur(10px); display: flex; flex-direction: column; color: #333; font-size: 14px; font-weight: 500; line-height: 18px; margin-top: 14px; }
.section-title { display: flex; font-size: 15px; line-height: 20px; font-weight: 600; /* background: linear-gradient(93deg, #764017 1.33%, #81461C 35.09%, #B46823 67.84%, #622B03 96.35%); */ background-clip: text; /* -webkit-background-clip: text; */ /* -webkit-text-fill-color: transparent; */ gap: 16px; justify-content: center; color: #000; }
.section-title img { width: 300px; }
.unlock-card { border: 1px solid #ffffff; border-radius: 10px; overflow: hidden; margin-top: 10px; box-shadow: 0 0 20px 0 rgb(162 162 162 / 15%); flex: 1; }
.unlock-header { padding: 10px 12px 18px; background: linear-gradient(178deg, #FEF8F7 1.7%, #FEF9F7 90.25%); display: flex; align-items: center; justify-content: space-between; }
.header-tip { color: #777; font-size: 12px; line-height: 14px; font-weight: 400; display: flex; align-items: flex-end; flex-direction: column;}
.header-tip span{ color: #fc4645; margin: 0 1px; line-height: 14px; }
.header-left { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.header-left img { width: 20px; }
.top-tips img{ border-radius: 8px; margin-bottom: 10px; border: solid 1px #fefbfb1a; box-shadow: 0 0 20px 0 rgb(162 162 162 / 15%); }
.main-content { padding: 12px 0px 6px; border-radius: 10px 10px 0 0; background: #fff; margin-top: -10px; }
.main-content2 { padding: 8px 0px 6px; border-radius: 10px 10px 0 0; background: #fff; margin-top: -10px; }
.main-content,
.main-content2 { position: relative; padding: 12px 0 6px; border-radius: 10px 10px 0 0; background: #fff; margin-top: -10px; overflow: hidden; }
/* 模糊状态 */
.main-content.blur,
.main-content2.blur { overflow: hidden; }
/* 内容模糊 */
.main-content.blur > *,
.main-content2.blur > * { filter: blur(2.5px); opacity: .7; pointer-events: none; user-select: none; transition: .2s; }
/* 渐变遮罩 */
.main-content.blur::after,
.main-content2.blur::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 10px 10px 0 0; background: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 40%, rgba(255,255,255,.7) 70%, rgba(255,255,255,.95) 100% ); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); pointer-events: none; }
.user-grid { display: flex; margin-bottom: 10px; padding: 0px 8px; font-size: 12px; line-height: 14px; color: #141414; gap: 2px; overflow: hidden; justify-content: space-evenly; }
.user-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; padding: 0 1px; position: relative; }
.avatar-container { position: relative; }
.red-dot { position: absolute; top: 0; right: -6px; width: 14px; height: 14px; background-color: #ef2f27; border-radius: 50%; color: #fff; font-weight: 400; font-size: 11px; line-height: 12px; display: flex; align-items: center; justify-content: center; }
.user-grid .avatar { width: 36px; height: 36px; display: block; margin: 0; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.user-nametext { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.win-label { background: #fef8f8; color: #ff3030; font-size: 10px; line-height: normal; padding: 1px 5px; border-radius: 20px; border: 1px solid #ffadad; display: flex; font-weight: 500; justify-content: center; align-items: center; flex-shrink: 0; }
.vip-list-item { display: flex; padding: 12px; align-items: center; gap: 16px; border-radius: 10px; border: 0.5px solid #FFE1B0; background: #FFF; margin-top: 8px; justify-content: space-between; border: 1px solid #fff; box-shadow: 0 0 20px 0 rgb(162 162 162 / 5%); }
.left-part { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; }
.vip-list-item img { width: 40px; height: 40px; flex-shrink: 0; }
.desc-item { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.desc-title { font-size: 14px; font-weight: 500; line-height: 18px; }
.desc-item span { font-size: 12px; line-height: 18px; color: #8E8E8E; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 400; }
.list-btn { font-size: 14px; line-height: 18px; border-radius: 100px; border: 1px solid #ff4436; /* background: linear-gradient(180deg, #FFE9C4 0%, #FDEED7 100%); */ padding: 4.5px 19.5px; color: #ff4436; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vip-footer-buy { background-color: #ffffffdb; width: calc(100% - 28px); min-height: unset; padding: 20px 14px; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); box-shadow: 0 -4px 20px 0 rgba(0, 0, 0, 0.15); display: flex; gap: 12px; border-radius: 14px 14px 0 0; backdrop-filter: blur(10px); z-index: 9999999; }
.vip-bottom-card { flex: 1; min-width: 0; border-radius: 10px; border: 1px solid #FFEBBC; background: linear-gradient(180deg, #FFFFFD 0%, #FDF1CD 100%); padding: 0 10px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; animation: none !important; }
.vip-top { display: flex; align-items: center; justify-content: center; background: url(/Content/Images/VIP/vip-label.png) no-repeat bottom; background-size: cover; height: 24px; color: #FDDC80; font-size: 13px; font-weight: 500; width: 100%; max-width: 94px; }
.vip-price { margin-top: 9px; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; }
.vip-price .num-new { font-size: 26px; line-height: 30px; color: #EF2F27; font-weight: 700; }
.vip-price .unit { font-size: 14px; margin-left: 4px; color: #333; font-weight: 500; }
.vip-old { margin-top: 2px; font-size: 12px; color: #8e8e8e; text-decoration: line-through; }
.vip-bottom-btn { margin-top: 10px; width: 100%; border: none; border-radius: 6px; padding: 6px 0; color: #fff; font-size: 13px; font-weight: 500; background: linear-gradient(90deg, #FD684A 0%, #EE2A24 100%); overflow: hidden; position: relative; }
.vip-bottom-btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 50%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.35), transparent ); transform: skewX(-20deg); z-index: 2; animation: vipBtnShineMove 3.5s linear infinite; }
@keyframes vipBtnShineMove {
    0% { left: -120%; }
    100% { left: 220%; }
}
/*AI*/
.swiper-slide.match { margin: 0 12px 8px; /* border: 1px solid #eaeaea; */ border-radius: 8px; font-weight: 400; }
.infobox { display: flex; align-items: center; justify-content: center; }
.infobox.topitem { background: #f9f9f9; font-size: 12px; text-align: left; line-height: 30px; padding: 0 10px; margin: 0; border-radius: 6px 6px 0 0; position: relative; display: flex; color: #333; align-items: center; justify-content: space-between; }
.topitem .time { color: var(--text-color-2); text-align: center; padding: 0; display: inline-block; flex: 1; display: flex; }
.infobox span { display: inline-block; font-size: 12px; line-height: 26px; border-radius: 6px; padding: 0 0px 0 8px; margin: 0 2px; }
.infobox span { display: inline-block; font-size: 12px; line-height: 26px; border-radius: 6px; padding: 0 0px 0 8px; margin: 0 2px; }
.infobox span.red { padding: 0; padding-left: 2px; }
.itembox-new { padding: 8px 8px 10px 8px; font-size: 12.5px; border-top: 1px dashed #f0f0f0; display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.itembox-new-column { padding: 8px 0px 4px 0px; font-size: 12.5px; border-top: 1px dashed #f0f0f0; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; gap: 4px; position: relative; margin-top: 6px; }
.tj-label { background: linear-gradient(90deg, #E9F1FE 0%, rgba(233, 241, 254, 0.00) 80%); padding: 2px 0px 2px 6px; border-radius: 4px; width: 100%; position: relative; }
.tj-label span { color: #096fff; }
.left-tj { color: #096fff; background: linear-gradient(90deg, #E9F1FE 0%, rgba(233, 241, 254, 0.00) 100%); padding: 2px 0px 2px 6px; border-radius: 4px; min-width: 180px; }
.result-icon { position: absolute; right: 2px; top: 2px; width: 36px; height: 36px; border-radius: 50%; z-index: 10; opacity: 1; }
#footer { display: flex; justify-content: center; text-align: center; margin-bottom: 100px; }
.introduction { margin: 12px 15px 15px; padding: 10px 12px; font-size: 14px; line-height: 18px; color: #333; border-radius: 10px; border: 1px solid #FFF; background: rgba(255, 255, 255, 0.33); box-shadow: 0 2px 20px 0 rgba(171, 171, 171, 0.10); backdrop-filter: blur(10px); }
.btn-go { border-radius: 100px; background: linear-gradient(180deg, #FDEDEC 0%, #FDECEB 100%); color: #FD2418; font-size: 14px; line-height: 18px; }
.btn-ai { padding: 6.5px 24px; /* background-color: #F44336; */ display: flex; border-radius: 100px; color: #F44336; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; line-height: 14px; width: max-content; margin: 0 auto; margin-bottom: 4px; border: 1px solid; }
.match-content { padding: 12px 12px 12px; border-radius: 16px 16px 0 0; border-top: 1px solid #FFF; border-right: 1px solid #FFF; border-left: 1px solid #FFF; background: linear-gradient(180deg, rgb(255 255 255) -10%, rgba(244, 244, 244, 0.90) 10%); backdrop-filter: blur(10px); display: flex; flex-direction: column; color: #333; font-size: 12px; font-weight: 400; line-height: 14px; margin-top: 16px; min-height: 590px;}
.VS { font-weight: 600; min-width: 18%; text-align: center; color: #939393; font-size: 15px; padding: 0 4px; }
.match-list { display: flex; padding: 10px 12px 14px; align-items: flex-start; gap: 0px; border-radius: 10px; background: #FFF; margin-bottom: 8px; flex-direction: column; border: 1px solid #fff; box-shadow: 0 0 20px 0 rgb(162 162 162 / 5%); }
.match-list-title { color: #919191; font-size: 11px; margin-bottom: 6px; }
.match-list .info-box { margin-top: 6px; }
.info-box { display: flex; align-items: center; width: 100%; margin: 0px; }
.teamicon { width: 26px; max-height: 26px; }
.hometeam { flex: 1; min-width: 0; }
.hometeam span { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.guestteam { flex: 1; min-width: 0; }
.guestteam span { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teambox-left { display: flex; align-items: center; gap: 5px; font-weight: 500; flex: 1; justify-content: flex-end; max-width: 41%; }
.teambox-right { display: flex; align-items: center; gap: 5px; font-weight: 500; flex: 1; max-width: 41%; }
.r-lock-btn { padding: 4px 10px 4px 4px; background-color: #F44336; display: flex; border-radius: 100px; color: #fff; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; line-height: 14px; }
.r-lock-btn span { font-size: 12px; font-weight: 400; margin-left: -1px; }
.r-lock-btn img { width: 20px; }
.combo-vip { display: flex; gap: 8px; }
.fb-part { padding: 0 12px; margin-bottom: 4px; }
.fb-part .desc-item, .fb-part2 .desc-item { margin: 0px 0 6px; }
.fb-part img { display: flex; justify-content: center; align-items: center; height: 76px; }
.fb-part2 { padding: 0 12px; margin-bottom: 4px; }
.fb-part2 img { display: flex; justify-content: center; align-items: center; margin-bottom: 6px; }
.fb-part3{ padding: 0 4px; }
.fb-part3 img { display: flex; justify-content: center; align-items: center; }
.icon-one { width: 50px; margin: 4px auto 10px; }
.show-more { display: flex; justify-content: center; gap: 4px; color: #eb3634; font-size: 11px; align-items: center; margin: 4px auto 6px; }
.show-more img { width: 12px; height: 12px; transition: transform 0.25s ease; transform: scaleY(1); }
.show-more.show img { transform: scaleY(-1); }
.result { padding: 6px 20px; display: flex; gap: 3px; align-items: center; border-radius: 100px; border: 1px solid rgba(253, 66, 65, 0.45); background: #FFF2F2; color: #F44336; min-width: 58%; justify-content: center; margin: 0 auto 8px auto; }
.first-result { margin-top: 10px; }
.result b { margin: 0 2px; }
.result:last-of-type { margin-bottom: 0; }
.result.green { background: #f6fdf8; color: #019d26 !important; border: 1px solid rgb(90 174 17 / 45%); }
.result.blue { background: #EEF6FF; color: #1976D2 !important; border: 1px solid rgb(42 121 255 / 56%); }
.result img { width: 13px; }
.value { font-weight: 500; }
span.value { margin-left: 2px; }
.data-none{ font-size: 13px; display: flex; justify-content: center; flex-direction: column; align-items: center; padding-top: 40px; color: #8b8b8b; }
.data-none img{width: 140px;}

/*数据*/
.data-compare { width: 100%; margin: 4px 0px 16px 0px; }
.data-top { display: flex; width: 100%; justify-content: center; }
.data-bottom { display: flex; width: 100%; gap: 6px; }
.data-item { display: flex; align-items: center; width: 100%; margin-bottom: 10px; flex-direction: column; gap: 8px; }
.data-item:last-child { margin-bottom: 0; }
.data-value { /* width: 10%; */ flex-shrink: 0; font-size: 14.5px; font-weight: 600; color: #2F2F2F; line-height: 1; font-family: DIN Alternate, Arial, sans-serif; }
.data-value.home { text-align: left; flex: 1; }
.data-value.away { text-align: right; flex: 1; }
.data-title { width: 14%; flex-shrink: 0; text-align: center; font-size: 12px; font-weight: 400; color: #464646; margin: 0 6px; white-space: nowrap; }
.data-bar { flex: 1; }
.data-track { position: relative; width: 100%; height: 6.5px; background: #ECEFF3; border-radius: 100px; overflow: hidden; }
.data-fill { position: absolute; top: 0; height: 100%; border-radius: 100px; transition: width .35s ease; }
.data-fill.home { right: 0; }
.data-fill.away { left: 0; }
.data-fill.goal.away { background: linear-gradient(90deg,#69B8FF 0%,#2F88FF 100%); }
.data-fill.goal.home { background: linear-gradient(90deg,#FF7676 0%,#F53F3F 100%); }
.data-fill.big.home { background: linear-gradient(90deg, #fabb52 0%, #ff6c00 100%); }
.data-fill.goal { background: linear-gradient(-90deg,#69B8FF 0%,#2F88FF 100%); }
.data-fill.lose { background: linear-gradient(-90deg,#FF7676 0%,#F53F3F 100%); }
.data-fill.big { background: linear-gradient(-90deg, #fabb52 0%, #ff6c00 100%); }


/*新数据*/
.match-rate-box  {width: 100%; }
.match-rate-item { width: 100%; padding: 6px 7px; margin-bottom: 6px; box-sizing: border-box; background: rgba(255, 255, 255, .9); border-radius: 8px; border: 0.5px solid #FFF; box-shadow: 0 6px 16px 0 rgb(0 0 0 / 5%); }
.match-rate-row {width:100%;display:flex;align-items:center;}
.match-rate-value { min-width: 29.2px;flex: 0 0 0px; font-size: 15px; font-weight: 700; line-height: 1; color: #182742; font-family: DIN Alternate, Arial, sans-serif; }
.match-rate-value.home {text-align:left;}
.match-rate-value.away {text-align:right;}
.match-rate-bar {flex:1;}
.match-rate-bar.left {margin-right:6px;margin-left: 0px;}
.match-rate-bar.right {margin-left:6px;margin-right: 0px;}
.match-rate-track {width:100%;height:8px;overflow:hidden;background:#EDF1F8;border-radius:100px;}
.match-rate-fill {height:100%;border-radius:100px;transition:width .35s ease;}
.match-rate-fill.red {margin-left:auto;background:linear-gradient(90deg,#FF8585,#F53F3F);}
.match-rate-fill.blue {background:linear-gradient(90deg,#69B8FF,#267AFF);}
.match-rate-title { flex: 0 0 80px; height: 26px; display: flex; justify-content: center; align-items: center; gap: 4px; background: #fff; border-radius: 30px; box-shadow: 0 8px 20px rgba(35, 65, 120, .08); color: #333; font-size: 12px; font-weight: 600; }
.match-rate-title img {width:16px;height:16px;}

.gmm-result-box { position: relative; width: 100%; height: 58px; margin-top: 6px; border-radius: 10px; background: linear-gradient(90deg, #FFF0F4 0%, #FFF7F8 100%); display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding-top: 20px; }
.gmm-result-tag { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); height: 20px; padding: 0 24px; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #FF566B, #F72C45); border-radius: 0 0 12px 12px; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 12px rgba(245, 60, 80, .25); }
.gmm-result-content {display:flex;align-items:baseline;justify-content:center;color:#1E2D45;font-size:13px;font-weight:600;}
.gmm-result-content strong {margin-left:6px;font-size:20px;line-height:1;color:#F43F55;font-weight:700;font-family:DIN Alternate,Arial,sans-serif;}



/* ====================
   左侧筛选
==================== */
.ai-filter-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0px; margin-bottom: 12px; }
.ai-analysis-filter { display: flex; overflow: hidden; border: 1px solid #FF4D4F; border-radius: 22px; background: #fff; }
.ai-analysis-item { width: 54px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 14px; font-weight: 500; transition: .25s; }
.ai-analysis-item.active { color: #fff; background: #FF4D4F; font-weight: 500; }
.ai-analysis-item:not(.active) { color: #FF4D4F; }
/* ====================
   右侧悬浮胶囊
==================== */
.ai-sport-filter { display: flex; align-items: center; padding: 2px; border-radius: 100px; background: #2c262608; border: 0.5px solid #fff; }
.ai-sport-item { width: 48px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 100px; font-size: 11.5px; font-weight: 400; color: #8e8e8e; line-height: 14px; transition: all .25s ease; }
/* 悬浮选中 */
.ai-sport-item.active { background: #fff; color: #FF4D4F; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); }
.odds-box { display: flex; justify-content: space-between; align-items: center; gap: 48px; position: relative; padding: 0 10px 10px; margin: 0 auto; }
.odds-home { flex: 1; display: flex; justify-content: flex-end; gap: 2px; font-size: 12px; color: #666; }
.odds-away { flex: 1; display: flex; justify-content: flex-start; gap: 2px; font-size: 12px; color: #666; }
.odds-home span { width: 28px; text-align: center; }
.odds-away span { width: 28px; text-align: center; }
.red { color: #ff0000; }
.up-odd { display: flex; gap: 2px; margin-right: 6px; }
/*环形图*/
.rate-wrap { display: flex; width: 100%; justify-content: space-around; gap: 12px; margin: 4px 0px; }
.rate-item { display: flex; justify-content: center; align-items: center; gap: 12px; }
.rate-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rate-tag { width: 22px; height: 22px; font-weight: 500; border-radius: 4px; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.rate-tag.red { color: #F44336; background: #FFF2F2; }
.rate-tag.blue { color: #1976D2; background: #EEF6FF; }
.rate-num { font-size: 12px; font-weight: 400; line-height: 1.2; }
.rate-num.red { color: #F44336; }
.rate-num.blue { color: #1976D2; }
/*************************
    环形图
*************************/
.rate-circle { width: 70px; height: 70px; position: relative; flex-shrink: 0; contain: layout paint; }
.rate-circle svg { width: 70px; height: 70px; display: block; transform: rotate(-90deg); }
.ring-blue,
.ring-red,
.ring-gray { fill: none; stroke-width: 12.5; stroke-linecap: butt; shape-rendering: geometricPrecision; }
.ring-blue { stroke: #1677FF; }
.ring-red { stroke: #F44336; }
.ring-gray { stroke: #CECECE; }
.circle-text { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); font-size: 12px; font-weight: 400; color: #666; line-height: 1; white-space: nowrap; }
.more-vip-card { border-radius: 10px; border: 1px solid #FFF; background: linear-gradient(178deg, #FEF3E0 1.7%, #FDF3E0 98.3%); padding: 14px 18px 18px; position: relative; color: #000; margin: 10px 0; }
.vip-top-img { position: absolute; top: 0px; left: 0px; width: 59px; }
.more-vip-card .section-title { font-size: 16px; line-height: 20px; background: linear-gradient(93deg, #764017 1.33%, #81461C 35.09%, #B46823 67.84%, #622B03 96.35%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.vip-group-item { display: flex; align-items: center; gap: 24px; margin: 20px 0px 18px; }
.vip-item-label { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 500; flex: 1; text-align: center;}
.out-icon { display: flex; padding: 11px; border-radius: 50%; background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.85) 100%); align-items: center; justify-content: center; width: max-content; }
.out-icon img { width: 26px; height: 26px; }
.btn-more-vip { border-radius: 100px; background: linear-gradient(90deg, #F85F52 0%, #ED3738 100%); width: 80%; margin: 0 auto; color: #fff; padding: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; }
/*会员个人主页*/
.profile-member { margin: 10px 12px; border-radius: 8px; background: #fff; overflow: hidden; border: solid 1px #fff; }
.profile-member-top { position: relative; height: 42px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; padding-bottom: 40px; }
.profile-member-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.profile-member-info { position: relative; z-index: 1; display: flex; align-items: center; min-width: 0; flex: 1; }
.profile-member-logo { width: 48px; height: auto; display: block; flex-shrink: 0; }
.profile-member-title { margin-left: 4px; font-size: 12px; color: #333; font-weight: 500; white-space: nowrap; overflow: hidden; line-height: 15px; }
.profile-member-title span { color: #515151; margin-left: 2px; font-weight: 400; }
.profile-member-btn { border-radius: 5px; background: linear-gradient(90deg, #F44336 0%, #F44336 100%); font-size: 12px; line-height: 14px; font-weight: 500; width: 64px; height: 26px; color: #fff !important; z-index: 1; display: flex; align-items: center; justify-content: center; }
.profile-member-list { position: relative; z-index: 2; margin: -40px 0px 0px; padding: 10px 8px 12px; display: flex; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, rgb(255 255 255 / 90%) 0%, #FFF 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); justify-content: space-evenly; gap: 8px; border: solid 1px #fff; }
.profile-member-item { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.profile-member-item img { width: 40px; height: 40px; display: block; }
.profile-member-item span { margin-top: 6px; font-size: 12px; color: #333; line-height: 14px; white-space: nowrap; }

/*新增会员价格*/
.vip-plan-wrap { width: 100%; box-sizing: border-box; padding: 12px 12px 14px; border-radius: 10px; box-shadow: 0 0 20px 0 rgb(162 162 162 / 15%); margin-bottom: 16px; border: 1px solid #FFF; background: linear-gradient(180deg, #FFFAF6 0%, #FFF 100%); }
.vip-plan-old{margin-top: 20px;}
.vip-open-count { display: flex; align-items: center; justify-content: center; gap: 5px; color: #141414; font-size: 14px; font-weight: 500; line-height: 15px; white-space: nowrap; }
.vip-open-count strong{color:#F04438;font-size:14px;font-weight:500;}
.title-decor{width:16px;height:auto;flex-shrink:0;}
.vip-plan-list{display:flex;align-items:stretch;gap:10px;width:100%;}
.vip-plan-item{position:relative;flex:1;min-width:0;height:126px;box-sizing:border-box;border-radius:10px;border: 2px solid #ffecc5b3;background:linear-gradient(180deg,#FFFCF1 0%,#FFF 100%);overflow:visible;transition:.2s ease;}
.vip-plan-item.active{border:2px solid #FB270A;background:linear-gradient(180deg,#FFE7DB 0%,#FFF 98.48%);}
.plan-corner-bg{position:absolute;top:0;right:0;width:72px;height:72px;background-image:url("/Content/Images/VIP/plan-corner-normal.png");background-repeat:no-repeat;background-position:top right;background-size:contain;pointer-events:none;z-index:1;border-radius: 0 10px 0 0;}
.vip-plan-item.active .plan-corner-bg{background-image:url("/Content/Images/VIP/plan-corner-active.png");}
.plan-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;height:100%;box-sizing:border-box;padding:12px 6px 16px;}
.vip-plan-item.yearly .plan-content { padding-top: 12px; padding-bottom: 22px; }
.plan-name { color: #141414; font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.plan-price{display:flex;align-items:baseline;justify-content:center;margin-top:2px;color:#30302F;line-height:1;}
.price-symbol{margin-left:4px;font-size:16px;font-weight:600;line-height: 20px;}
.price-value { font-size: 22px; font-weight: 600; line-height: 24px; }
.vip-plan-item.active .plan-price{color:#FB270A;}
.plan-original { margin-top: 4px; color: #999; font-size: 11px; line-height: 12px; white-space: nowrap; font-weight: 400; }
.plan-original del{color:#999;}
.plan-daily { box-sizing: border-box; padding: 3px 7px; border-radius: 100px; background: #F6F6F6; color: #444; font-size: 10px; font-weight: 400; line-height: 12px; white-space: nowrap; margin-top: 5px; }
.vip-plan-item.active .plan-daily{background: #fff;}
.vip-plan-item.yearly .plan-daily{margin-top: 5px;}
.plan-daily span{color:#FB270A;font-weight:700;}
.discount-tag { position: absolute; top: -13px; left: -2px; z-index: 5; display: flex; align-items: center; gap: 4px; height: 20px; box-sizing: border-box; padding: 0 8px 0 6px; border-radius: 6px 6px 6px 0; background: linear-gradient(90deg, #FF5A12 0%, #FC3D03 100%); color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; }
.discount-tag img{width:16px;height:16px;object-fit:contain;}
.save-bar { position: absolute; left: -1px; right: -1px; bottom: 0px; z-index: 5; display: flex; align-items: center; justify-content: center; height: 22px; box-sizing: border-box; padding: 0 6px; border-radius: 0 0 9px 9px; background: linear-gradient(90deg, #FB270A 0%, #FB2407 100%); color: #fff; white-space: nowrap; }
.save-bar img{width:12px;height:12px;object-fit:contain;margin-right: 2px;}
.save-bar span{font-size:11px;font-weight:500;}
.save-bar em{color:#FFEF7F;font-size:12px;font-weight:500;font-style:normal;}


/*新底部按钮*/
.vip-subscribe-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; box-sizing: border-box; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
.vip-subscribe-btn { position: relative; width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 10px; background: linear-gradient(90deg, #FD684A 0%, #EE2A24 100%); overflow: hidden; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vip-subscribe-btn::after { content: ""; position: absolute; top: -50%; left: -45%; width: 22%; height: 200%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 25%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.08) 75%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: vipShine 2.8s ease-in-out infinite; pointer-events: none; }
.vip-subscribe-text { position: relative; z-index: 2; }
.vip-subscribe-text strong { font-weight: 700; }
.vip-subscribe-btn:active { transform: scale(.985); opacity: .95; }
@keyframes vipShine { 0% { left: -45%; } 45%, 100% { left: 125%; } }

.vip-plan-bottom { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; box-sizing: border-box; padding: 30px 12px 14px; border-radius: 10px 10px 0 0; box-shadow: 0 0 20px 0 rgb(162 162 162 / 15%); /* margin-bottom: 20px; */ border: 1px solid #FFF; background: linear-gradient(180deg, #FFFAF6 0%, #FFF 100%); padding-bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 999; }
.vip-plan-bottom .vip-bottom-btn { padding: 8px 0; font-size: 14px;}

@media (max-width: 375px) {
    .vip-top { height: 22px; }
    .vip-price .num { font-size: 22px; }
    .vip-price .unit { font-size: 12px; }
    .vip-bottom-card { padding: 0 8px 8px; }
    .user-grid { padding: 0px 4px; }
    .win-label { font-size: 9px; padding: 1px 3px; }
    .r-lock-btn span { font-size: 11px; }
    .profile-member-title { margin-left: 4px; font-size: 11.5px; }
    .profile-member-btn { width: 60px; }
    .vip-price .num-new { font-size: 24px; }
    .match-content{min-height: 390px;}
    .vip-plan-list{    gap: 8px;}
    .plan-daily { box-sizing: border-box; padding: 3px 5px;}
    .vip-plan-wrap { padding: 12px 8px 14px;}
    .vip-group-item { gap: 18px;}
    .btn-qz { min-width: 74px !important;font-size: 13px !important;}
    .qz-header::after { right: 50px !important; bottom: -10px !important; width: 74% !important; }
    .price-value {
    font-size: 20px;}
    .qz-header { padding: 12px 12px !important;}
}


.qz-header {
    padding: 15px 12px;
    background: linear-gradient(178deg, #FEF8F7 1.7%, #FEF9F7 90.25%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ffffff;
    margin-top: 12px;
    box-shadow: 0 0 20px 0 rgb(162 162 162 / 15%);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.qz-text{
    font-size: 15px;
}

.qz-text span{
    color: #777;
    font-size: 13px;
    font-weight: 400;
}

.btn-qz {
    padding: 6.5px 0px;
    display: flex;
    border-radius: 100px;
    color: #F44336;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    width: max-content;
    border: 1px solid;
    min-width: 84px;
    justify-content: center;
}

.qz-header::after {
    content: "";
    position: absolute;
    right: 62px;
    bottom: -5px;
    width: 77%;
    height: 60px;
    /* transform: translateY(-50%); */
    background: url(/Content/Images/VIP/qz-bg.png) no-repeat center;
    background-size: contain;
    opacity: 0.95;
    pointer-events: none;
}

.header-left,
.btn-qz {
    position: relative;
    z-index: 1;
}



.new-text-font{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.desc-qz {
    font-weight: 400;
    font-size: 12px;
    color: #777;
    position: relative;
    z-index: 1;
    margin-top: 5px;
    line-height: 14px;
}

.header-tip-old{
    display: flex;
    color: #777;
}

#footer a { padding-right: 3px; padding-left: 3px; display: inline; color: #216283; }
.blue, a.blue { color: #2196F3 !important; }
a.blue { color: #658ECD; font-size: 14px; }
#footer { text-align: center; color: #909090; font-size: 12px; float: left; overflow: hidden; clear: both; width: 100%; border-top-width: 1px; border-top-style: solid; border-top-color: #E3E3E3; }