*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;background:#edf3ff;color:#17213d}
button{font-family:inherit;border:0;background:none;cursor:pointer}
.app-shell{max-width:430px;min-height:100vh;margin:0 auto;background:#edf6fb;position:relative;overflow:visible;padding-bottom:82px;box-shadow:none}
.page{display:none;min-height:calc(100vh - 82px);padding:12px 12px 20px}
.page.active{display:block}
.hero{margin:-12px -12px 0;padding:16px 12px 18px;background:radial-gradient(circle at 20% 0%,#2fe1ff 0,#2366ff 34%,#7834ff 100%);border-radius:0 0 24px 24px;color:white}
.topbar{display:flex;align-items:center;gap:8px}
.logo{width:136px;height:44px;object-fit:contain}
.domain-pill{margin-left:auto;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px}
.icon-btn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);color:white}
.notice{height:28px;margin-top:8px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:10px;background:rgba(255,255,255,.18);font-size:12px}
.notice span{padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.26)}
.glass{background:rgba(255,255,255,.86);box-shadow:0 12px 30px rgba(33,79,175,.18);backdrop-filter:blur(10px)}
.card{background:white;border-radius:16px;box-shadow:0 10px 24px rgba(39,76,160,.08)}
.wallet-card{margin-top:12px;padding:14px;color:#17213d;border-radius:18px}
.wallet-head{display:flex;align-items:flex-start;justify-content:space-between}
.wallet-head p{margin:0 0 6px;color:#58637c;font-size:12px}
.wallet-head h1{margin:0;font-size:28px;letter-spacing:.5px}
.wallet-head button{padding:7px 10px;border-radius:999px;background:#eef2ff;color:#3148d4;font-size:12px}
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.quick-actions button{display:flex;flex-direction:column;align-items:center;gap:6px;color:#202942;font-size:12px}
.quick-actions i{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#3bd7ff,#3167ff 55%,#8f35ff);box-shadow:0 8px 14px rgba(55,108,255,.22);font-style:normal;color:white}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;padding:12px}
.category-grid button{height:58px;border-radius:14px;background:#f5f8ff;color:#33405d;font-size:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.category-grid span{font-size:12px}
.promo-banner{height:126px;margin-top:12px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#115fe8,#6225e8 65%,#161d7a);position:relative;color:white;padding:18px;box-shadow:0 12px 28px rgba(31,82,202,.22)}
.promo-banner:after{content:"⚽ 🏆 💰";position:absolute;right:16px;bottom:20px;font-size:42px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.25))}
.promo-banner p{margin:0;color:#cfe3ff;font-size:13px}
.promo-banner h2{margin:4px 0;font-size:27px;line-height:1.05}
.promo-banner span{font-size:12px;color:#e8efff}
.promo-banner button{display:block;margin-top:10px;padding:7px 14px;border-radius:999px;background:white;color:#234fe5;font-weight:700}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:16px 2px 8px}
.section-head h3{margin:0;font-size:16px}
.section-head button{color:#64708c}
.venue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.venue{min-height:98px;border-radius:16px;color:white;padding:12px;position:relative;overflow:hidden}
.venue:after{content:"";position:absolute;right:-20px;bottom:-25px;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.22)}
.venue p{margin:0;font-size:12px}
.venue h3{margin:8px 0 6px;font-size:22px}
.venue h3 span{font-size:11px;margin-left:2px}
.venue button{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.9);font-size:11px}
.venue.red{background:linear-gradient(135deg,#ff5c5c,#b629ff)}
.venue.blue{background:linear-gradient(135deg,#2387ff,#4132ff)}
.venue.purple{background:linear-gradient(135deg,#7d45ff,#b82cff)}
.sub-header{height:54px;display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:4;background:linear-gradient(180deg,#f8fbff 75%,rgba(248,251,255,.84))}
.sub-header h2{margin:0;font-size:17px}
.sub-header.row{justify-content:space-between}
.sub-header em{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:#315dff;color:white;font-style:normal;font-size:12px}
.plain{color:#4b56a3}
.tabs,.sport-tabs,.status-tabs{display:flex;gap:10px;overflow:auto;padding-bottom:8px}
.tabs button,.sport-tabs button,.status-tabs button{white-space:nowrap;padding:8px 12px;border-radius:999px;background:#edf3ff;color:#57617c}
.tabs button.active,.sport-tabs button.active,.status-tabs button.active{background:linear-gradient(135deg,#1988ff,#8d31ff);color:white}
.promo-list{display:flex;flex-direction:column;gap:12px}
.activity-card{height:148px;border-radius:18px;padding:18px;color:white;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 12px 26px rgba(26,87,210,.18);overflow:hidden;position:relative}
.activity-card:after{content:"🏆 💵 ⚽";position:absolute;right:12px;top:34px;font-size:38px;opacity:.86}
.activity-card span{display:inline-block;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.22);font-size:12px}
.activity-card h2{margin:8px 0 4px;font-size:25px}
.activity-card p{margin:0;color:#dce9ff}
.activity-card footer{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.activity-card button{padding:8px 13px;border-radius:10px;background:#21c7ff;color:white}
.worldcup{background:linear-gradient(135deg,#1165ea,#1842b8)}
.bluecard{background:linear-gradient(135deg,#0972dd,#02c0ff)}
.violet{background:linear-gradient(135deg,#3644ff,#9b34ff)}
.match-list{display:flex;flex-direction:column;gap:10px}
.match-card{padding:12px;border-radius:15px;background:white;box-shadow:0 8px 20px rgba(39,76,160,.07)}
.match-league{display:flex;align-items:center;justify-content:space-between;color:#58637c;font-size:12px}
.teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:12px 0 10px;font-weight:800}
.teams span:nth-child(2){color:#315dff;font-size:16px}
.odds{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.odds button{padding:8px 4px;border-radius:9px;background:#f2f5ff;font-size:12px;color:#222d4a}
.odds button b{display:block;margin-top:2px;color:#111}
.compact .match-card{padding:10px}
.compact .teams{margin:8px 0}
.bet-switch{display:grid;grid-template-columns:1fr 1fr;background:#edf2ff;border-radius:12px;padding:4px;margin-bottom:10px}
.bet-switch button{height:34px;border-radius:10px;color:#4f5b78}
.bet-switch button.active{background:white;color:#315dff;box-shadow:0 4px 12px rgba(55,96,180,.12)}
.bet-slip{display:flex;flex-direction:column;gap:8px}
.bet-item{background:white;border-radius:14px;padding:11px;box-shadow:0 8px 18px rgba(39,76,160,.07);display:flex;justify-content:space-between;gap:10px}
.bet-item h4{margin:0 0 4px;font-size:14px}
.bet-item p{margin:0;color:#66708a;font-size:12px}
.bet-item strong{color:#315dff}
.bet-panel{margin-top:12px;padding:14px}
.bet-total,.input-row,.win-row{display:flex;align-items:center;justify-content:space-between}
.bet-total strong{font-size:14px}
.bet-panel p{margin:14px 0 8px;color:#5d6880;font-size:13px}
.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.amount-grid button{height:34px;border-radius:9px;background:#edf2ff;color:#35415d}
.amount-grid button.active{background:linear-gradient(135deg,#1988ff,#8d31ff);color:white}
.input-row{margin-top:10px;padding:10px;border-radius:10px;background:#f6f8ff;color:#59647e}
.win-row{margin:12px 0;color:#5d6880}
.win-row b{font-size:22px;color:#1375ff}
.primary-btn{width:100%;height:46px;border-radius:12px;background:linear-gradient(135deg,#147cff,#9e27ff);color:white;font-weight:800;font-size:16px;box-shadow:0 10px 22px rgba(66,91,255,.25)}
.service-hero{margin:-12px -12px 12px;padding:58px 18px 26px;background:linear-gradient(135deg,#154dff,#8c33ff);color:white;display:flex;align-items:flex-end;justify-content:space-between;border-radius:0 0 28px 28px}
.service-hero p{margin:0 0 8px;color:#dbe8ff}
.service-hero h1{margin:0;font-size:28px;line-height:1.18}
.service-hero span{display:block;margin-top:8px;color:#e9efff}
.service-avatar{width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:48px}
.service-card{padding:15px;display:flex;align-items:center;justify-content:space-between}
.service-card h3{margin:0 0 5px}
.service-card p{margin:0;color:#6a748b;font-size:13px}
.service-card button{padding:9px 12px;border-radius:999px;background:#315dff;color:white}
.service-grid,.mine-grid{margin-top:12px;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.service-grid button,.mine-grid button{height:72px;border-radius:14px;background:#f6f8ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#33405d;font-size:20px}
.service-grid span,.mine-grid span{font-size:12px}
.mine-hero{margin:-12px -12px 0;padding:18px 14px 18px;background:radial-gradient(circle at 85% 20%,#9d55ff 0,#225dff 50%,#122fd2 100%);color:white;border-radius:0 0 26px 26px}
.mine-top{display:flex;align-items:center;gap:10px;margin-top:24px}
.avatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ffe064,#ff7a22);font-weight:900;color:white;border:3px solid rgba(255,255,255,.55)}
.mine-top h2{margin:0;font-size:20px}
.mine-top h2 span{padding:2px 7px;border-radius:999px;background:#ffc83d;color:#7b3d00;font-size:11px}
.mine-top p{margin:5px 0 0;color:#d8e2ff}
.mine-top .icon-btn{margin-left:auto}
.vip-card{margin-top:16px;background:rgba(255,255,255,.88);border-radius:16px;color:#17213d;padding:13px;display:flex;justify-content:space-between;align-items:center}
.vip-card h3{margin:0;color:#7031ff}
.vip-card p{margin:5px 0 0;color:#6a748b;font-size:12px}
.vip-card button{padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,#315dff,#9d2fff);color:white}
.mine-wallet{margin-top:12px}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(430px,100%);height:58px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid #e5edf5;box-shadow:none;display:grid;grid-template-columns:repeat(4,1fr);z-index:80;padding:3px 8px calc(4px + env(safe-area-inset-bottom))}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#64748b;background:transparent;font-size:0}
.bottom-nav .nav-ico{width:30px;height:25px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:0 0 25px}
.bottom-nav .nav-ico svg{width:22px;height:22px;display:block;stroke:currentColor;stroke-width:2.35;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav span{font-size:11px;line-height:1;font-weight:850}
.bottom-nav button.active{color:#1298dc;font-weight:950}
.bottom-nav button.active .nav-ico{background:rgba(18,152,220,.15)}
@media (max-width:360px){
.logo{width:124px}
.wallet-head h1{font-size:24px}
.bottom-nav{grid-template-columns:repeat(4,1fr)}
.bottom-nav span{font-size:10px}
}
/* ===== 天天娱乐：H5 首页主样式 v51-clean ===== */
.page-home{
padding:0 0 18px;
background:#edf6fb;
}
.home-app-head{
padding:12px 12px 8px;
background:linear-gradient(180deg,#f8fdff 0%,#eef8fd 100%);
border-radius:0;
box-shadow:none;
}
.home-logo-row{
min-height:54px;
display:flex;
align-items:center;
gap:7px;
}
.home-brand{
flex:0 0 126px;
display:flex;
align-items:center;
min-width:0;
}
.home-logo-wide{
display:block;
width:122px;
height:40px;
object-fit:cover;
object-position:center;
border-radius:8px;
flex-shrink:0;
filter:none;
}
.home-brand-text{
display:none;
}
.home-domain{
margin-left:auto;
flex:0 0 auto;
width:154px;
height:31px;
display:flex;
align-items:center;
justify-content:center;
gap:4px;
padding:0 8px;
border-radius:999px;
background:rgba(255,255,255,.92);
color:#7d8aa2;
font-size:12px;
border:1px solid rgba(184,217,236,.72);
white-space:nowrap;
overflow:hidden;
}
.home-domain span{
flex:0 0 auto;
white-space:nowrap;
}
.home-domain b{
flex:0 0 auto;
color:#2b78df;
font-size:12px;
font-weight:1000;
max-width:72px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.home-domain-search{
flex:0 0 auto;
color:#334155;
font-size:13px;
line-height:1;
font-style:normal;
opacity:.88;
}
.home-chat{
width:31px;
height:31px;
border-radius:50%;
background:linear-gradient(135deg,#64ddff,#2493f0 70%);
color:#fff;
display:grid;
place-items:center;
box-shadow:0 5px 10px rgba(28,137,223,.16);
flex:0 0 auto;
}
.home-chat{
position:relative;
}
.home-chat::after{
content:"";
position:absolute;
right:1px;
top:1px;
width:6px;
height:6px;
border-radius:50%;
background:#ff3d4f;
border:1px solid #fff;
}
.home-banner{
height:auto;
aspect-ratio:16/6.2;
margin-top:8px;
border-radius:14px;
overflow:hidden;
padding:0;
background:linear-gradient(135deg,#1395ff,#1262df 58%,#7642ff);
box-shadow:0 10px 24px rgba(48,109,180,.16);
}
.home-banner .banner-card{
width:100%;
height:100%;
min-height:100%;
padding:16px 18px;
border-radius:14px;
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
background:
radial-gradient(circle at 82% 40%,rgba(255,255,255,.20) 0,rgba(255,255,255,0) 38%),
linear-gradient(135deg,#1395ff,#1262df 58%,#7642ff);
overflow:hidden;
}
.home-banner .banner-card span{
color:#dff6ff;
font-size:12px;
font-weight:800;
}
.home-banner .banner-card h1{
margin:7px 0 4px;
max-width:72%;
color:#fff;
font-size:22px;
line-height:1.22;
font-weight:1000;
letter-spacing:.4px;
}
.home-banner .banner-card p{
margin:0;
color:#e8f4ff;
font-size:12px;
}
.home-banner.image-mode{
height:auto;
aspect-ratio:16/6.2;
padding:0;
margin-top:8px;
background:none;
display:block;
overflow:hidden;
border-radius:14px;
position:relative;
box-shadow:0 10px 24px rgba(48,109,180,.16);
}
.home-banner.image-mode::before,
.home-banner.image-mode::after{
content:none;
display:none;
}
.home-banner-img,
.home-banner.image-mode .home-banner-img{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:center;
border-radius:14px;
}
.banner-copy{
padding:15px;
}
.banner-copy img{
width:110px;
height:42px;
object-fit:contain;
margin-bottom:4px;
}
.banner-copy h1{
margin:0;
font-size:27px;
line-height:1.05;
color:#fff;
font-weight:1000;
}
.banner-copy p{
margin:7px 0 0;
color:#e3f4ff;
font-size:12px;
}
.banner-copy button{
margin-top:9px;
height:30px;
padding:0 14px;
border-radius:999px;
background:#fff;
color:#1262df;
font-weight:900;
}
.banner-art{
display:none;
}
.home-dots{
margin-top:7px;
height:10px;
display:flex;
justify-content:center;
align-items:center;
gap:5px;
}
.home-dots i{
width:5px;
height:5px;
border-radius:999px;
background:rgba(72,158,229,.28);
}
.home-dots i.active,
.home-dots i:nth-child(1){
width:20px;
background:#2f99eb;
}
.home-notice{
min-height:28px;
margin-top:6px;
padding:0 9px;
display:flex;
align-items:center;
gap:6px;
border-radius:10px;
background:rgba(255,255,255,.9);
border:1px solid rgba(210,230,242,.72);
color:#748197;
font-size:12px;
}
.home-notice marquee{
flex:1;
}
.home-notice b{
white-space:nowrap;
padding:3px 7px;
border-radius:999px;
color:#1684c7;
background:#eaf8ff;
font-size:11px;
font-weight:900;
}
.home-user-row{
margin:0;
padding:7px 12px 8px;
border-radius:0;
display:grid;
grid-template-columns:142px 1fr;
gap:8px;
align-items:center;
background:#fff;
border:0;
border-top:1px solid rgba(222,236,244,.78);
border-bottom:1px solid rgba(222,236,244,.78);
box-shadow:0 4px 10px rgba(25,68,118,.06);
position:sticky;
top:0;
z-index:50;
}
.home-user-info h2{
margin:0;
display:flex;
align-items:center;
gap:5px;
min-width:0;
line-height:1;
}
.home-user-info p{
margin:6px 0 0;
display:flex;
align-items:center;
gap:5px;
min-width:0;
line-height:1;
flex-wrap:nowrap;
}
.home-account-name{
display:inline-block;
max-width:58px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#6d788b;
font-size:13px;
font-weight:1000;
}
.home-vip-badge{
height:16px;
min-width:44px;
padding:0 7px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
color:#2d3342;
font-size:10px;
font-weight:1000;
background:linear-gradient(90deg,#e3e7ef,#aeb7c4);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.home-wallet-amount{
color:#151f32;
font-size:20px;
line-height:1;
font-weight:800;
letter-spacing:.1px;
white-space:nowrap;
display:inline-block;
flex-shrink:0;
}
.home-wallet-info{
width:15px;
height:15px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
color:#7f8ca0;
background:#eef3f8;
border:1px solid #cfd9e6;
font-size:10px;
font-style:normal;
font-weight:900;
}
.home-money-actions{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:4px;
align-items:center;
}
.home-money-actions button{
min-height:48px;
padding:0;
border-radius:0;
background:transparent;
border:0;
box-shadow:none;
color:#26364d;
font-size:12px;
font-weight:900;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
}
.home-money-actions i{
width:33px;
height:33px;
border-radius:12px;
display:grid;
place-items:center;
font-style:normal;
font-size:15px;
background:
radial-gradient(circle at 30% 22%,rgba(255,255,255,.75),rgba(255,255,255,0) 38%),
linear-gradient(135deg,#68eaff,#22a9ee 56%,#1876dc);
box-shadow:0 5px 10px rgba(15,145,210,.16);
}
.home-game-layout{
display:grid;
grid-template-columns:56px 1fr;
gap:8px;
margin:0;
padding:10px 8px 78px;
background:#edf6fb;
align-items:start;
position:relative;
}
.home-side-tabs{
display:flex;
flex-direction:column;
gap:6px;
padding:0;
position:sticky;
top:76px;
z-index:40;
max-height:calc(100vh - 146px);
overflow-y:auto;
scrollbar-width:none;
}
.home-side-tabs::-webkit-scrollbar{
display:none;
}
.home-side-tabs button{
min-height:50px;
border-radius:13px;
background:rgba(255,255,255,.9);
color:#708096;
border:1px solid rgba(198,224,239,.72);
box-shadow:0 5px 10px rgba(42,95,140,.06);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
}
.home-side-tabs button i{
font-size:17px;
font-style:normal;
}
.home-side-tabs button span{
font-size:11px;
font-weight:900;
}
.home-side-tabs button.active{
color:#fff;
background:linear-gradient(180deg,#45dcff,#1596ef 62%,#2378e7);
border-color:transparent;
box-shadow:0 7px 14px rgba(24,132,224,.18);
}
.home-venue-list{
padding:0;
display:flex;
flex-direction:column;
gap:9px;
}
.big-venue{
min-height:116px;
border-radius:15px;
padding:14px 118px 12px 16px;
background:
radial-gradient(circle at 86% 50%,rgba(85,190,255,.20) 0,rgba(85,190,255,.08) 36%,rgba(255,255,255,0) 62%),
linear-gradient(90deg,#ffffff 0%,#fbfdff 50%,#eaf7ff 100%);
border:1px solid rgba(203,228,242,.78);
box-shadow:0 7px 15px rgba(35,91,140,.08);
position:relative;
overflow:hidden;
cursor:pointer;
}
.big-venue.has-cover{
min-height:126px;
padding:14px 0 12px 16px;
background:#fff;
}
.big-venue.has-cover::before{
display:none;
}
.big-venue.has-cover::after{
display:none;
}
.big-venue.has-cover > div:first-child{
width:46%;
position:relative;
z-index:4;
}
.big-venue::before{
content:"";
position:absolute;
right:-42px;
top:50%;
transform:translateY(-50%);
width:190px;
height:190px;
border-radius:50%;
background:
radial-gradient(circle at 35% 32%,rgba(255,255,255,.86) 0,rgba(255,255,255,.38) 22%,rgba(255,255,255,0) 46%),
linear-gradient(135deg,rgba(79,196,255,.24),rgba(58,126,255,.14));
}
.big-venue::after{
content:"GAME";
position:absolute;
left:16px;
bottom:-14px;
color:rgba(26,116,190,.045);
font-size:54px;
line-height:1;
font-weight:1000;
letter-spacing:2px;
}
.big-venue > div:first-child{
position:relative;
z-index:2;
}
.big-venue span{
display:inline-flex;
align-items:center;
height:21px;
padding:0 8px;
border-radius:7px;
background:linear-gradient(135deg,#37d7ff,#2d83f2);
color:#fff;
font-size:11px;
font-weight:900;
box-shadow:0 4px 8px rgba(42,126,255,.14);
}
.big-venue h2{
margin:8px 0 3px;
color:#1d2b40;
font-size:20px;
line-height:1.12;
font-weight:1000;
letter-spacing:.2px;
}
.big-venue p{
margin:0;
color:#8795a6;
font-size:12px;
}
.big-venue strong{
display:none;
}
.venue-count{
margin-top:7px;
color:#172235;
font-size:27px;
line-height:1;
font-weight:1000;
letter-spacing:.3px;
}
.venue-count em{
margin-left:4px;
color:#172235;
font-size:12px;
font-style:normal;
font-weight:800;
}
.venue-players{
position:absolute;
right:18px;
top:50%;
transform:translateY(-50%);
z-index:2;
width:86px;
height:86px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:42px;
opacity:.96;
background:
radial-gradient(circle at 35% 28%,rgba(255,255,255,.92) 0,rgba(255,255,255,.32) 28%,rgba(255,255,255,0) 58%),
linear-gradient(135deg,rgba(213,244,255,.92),rgba(174,221,255,.58));
border:1px solid rgba(255,255,255,.72);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
0 10px 20px rgba(35,110,170,.13);
filter:none;
}
.venue-players.has-cover{
right:0;
top:0;
bottom:0;
transform:none;
width:74%;
height:auto;
border-radius:0 15px 15px 0;
display:block;
overflow:hidden;
background:none;
border:0;
box-shadow:none;
opacity:1;
z-index:1;
}
.venue-players.has-cover::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(255,255,255,1) 0%,
rgba(255,255,255,.94) 16%,
rgba(255,255,255,.64) 31%,
rgba(255,255,255,.18) 54%,
rgba(255,255,255,0) 80%
);
pointer-events:none;
}
.venue-cover-img{
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:center right;
}
.page-home .category-grid,
.page-home .promo-banner,
.page-home .section-head,
.page-home .venue-grid,
.page-home .match-list.compact{
display:none !important;
}
@media (max-width:390px){
.home-logo-wide{
width:116px;
height:38px;
}
.home-domain{
width:148px;
padding:0 7px;
}
.home-game-layout{
grid-template-columns:54px 1fr;
gap:7px;
padding-left:7px;
padding-right:7px;
}
.home-user-row{
top:0;
}
.home-side-tabs{
top:74px;
max-height:calc(100vh - 144px);
}
.big-venue{
min-height:110px;
padding:13px 100px 11px 14px;
}
.big-venue h2{
font-size:19px;
}
.venue-count{
font-size:24px;
}
.venue-players{
right:12px;
width:76px;
height:76px;
font-size:36px;
}
.big-venue.has-cover{
min-height:120px;
padding:13px 0 11px 14px;
}
.big-venue.has-cover > div:first-child{
width:48%;
}
.venue-players.has-cover{
right:0;
width:72%;
height:auto;
}
}
/* ===== 天天娱乐：四导航页面统一优化 v3 ===== */
.tt-page-head{
height:54px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 2px;
position:sticky;
top:0;
z-index:8;
background:linear-gradient(180deg,#f8fbff 75%,rgba(248,251,255,.86));
}
.tt-page-head button{
width:34px;
height:34px;
border-radius:50%;
background:#eef4ff;
color:#315dff;
font-size:26px;
line-height:30px;
}
.tt-page-head h2{
margin:0;
font-size:18px;
color:#15213a;
}
.tt-page-head span{
font-size:13px;
color:#6e58ff;
}
.welfare-hero{
height:128px;
border-radius:20px;
margin:0 0 10px;
padding:16px;
color:#fff;
background:
radial-gradient(circle at 84% 28%,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 34%),
linear-gradient(135deg,#176eff,#315dff 52%,#8330ff);
display:flex;
align-items:center;
justify-content:space-between;
box-shadow:0 10px 22px rgba(60,84,220,.16);
overflow:hidden;
position:relative;
}
.welfare-hero:after{
content:"";
position:absolute;
right:-36px;
bottom:-44px;
width:138px;
height:138px;
border-radius:50%;
background:rgba(255,255,255,.16);
}
.welfare-hero p{
margin:0 0 6px;
color:rgba(255,255,255,.82);
font-size:12px;
}
.welfare-hero h1{
margin:0;
font-size:24px;
line-height:1.12;
letter-spacing:.4px;
font-weight:1000;
}
.welfare-hero span{
display:block;
margin-top:7px;
color:rgba(255,255,255,.9);
font-size:12px;
}
.welfare-gift{
position:relative;
z-index:1;
width:72px;
height:72px;
border-radius:24px;
display:grid;
place-items:center;
font-size:42px;
background:rgba(255,255,255,.16);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
filter:drop-shadow(0 8px 12px rgba(0,0,0,.14));
}
.tt-tabs{
margin:10px 0;
display:flex;
gap:8px;
overflow:auto;
padding-bottom:2px;
}
.tt-tabs button{
white-space:nowrap;
height:32px;
padding:0 12px;
border-radius:999px;
background:#fff;
color:#69748d;
font-size:12px;
font-weight:850;
box-shadow:0 5px 12px rgba(46,94,180,.07);
}
.tt-tabs button.active{
background:linear-gradient(135deg,#197fff,#8c2fff);
color:#fff;
font-weight:900;
}
#page-welfare{
padding-bottom:96px;
}
#page-welfare .welfare-hero{
display:none !important;
}
#page-welfare .tt-tabs{
margin:0 -12px 12px;
padding:0 16px 8px;
min-height:50px;
display:flex;
align-items:flex-end;
gap:26px;
overflow:auto;
background:#edf6fb;
border-bottom:1px solid rgba(214,228,240,.75);
}
#page-welfare .tt-tabs button{
position:relative;
height:42px;
padding:0;
border-radius:0;
background:transparent;
color:#7b879c;
box-shadow:none;
font-size:15px;
font-weight:850;
white-space:nowrap;
}
#page-welfare .tt-tabs button.active{
background:transparent;
color:#1298dc;
font-weight:1000;
}
#page-welfare .tt-tabs button.active:after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:3px;
border-radius:999px;
background:#1298dc;
}
.tt-activity-list{
display:none;
}
.tt-service-hero{
min-height:178px;
border-radius:0 0 26px 26px;
margin:0 -12px 12px;
padding:24px 18px 22px;
background:
radial-gradient(circle at 84% 34%,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 34%),
linear-gradient(135deg,#eaf8ff 0%,#f5fbff 42%,#eef2ff 100%);
color:#17213d;
display:flex;
align-items:center;
justify-content:space-between;
overflow:hidden;
position:relative;
}
.tt-service-hero:after{
content:"";
position:absolute;
right:-42px;
bottom:-52px;
width:170px;
height:170px;
border-radius:50%;
background:linear-gradient(135deg,rgba(45,217,255,.2),rgba(131,48,255,.18));
}
.service-welcome{
position:relative;
z-index:1;
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.service-avatar-mini{
width:48px;
height:48px;
border-radius:50%;
display:grid;
place-items:center;
flex:0 0 auto;
color:#fff;
font-size:20px;
font-weight:900;
background:linear-gradient(135deg,#ffe15b,#ff8d21);
border:2px solid rgba(255,255,255,.95);
box-shadow:0 8px 18px rgba(42,91,180,.14);
}
.tt-service-hero p{
margin:0 0 5px;
color:#657089;
font-size:13px;
}
.tt-service-hero h1{
margin:0;
color:#17213d;
font-size:22px;
line-height:1.18;
font-weight:1000;
letter-spacing:.2px;
}
.tt-service-hero span{
display:block;
margin-top:7px;
color:#1298dc;
font-size:13px;
font-weight:850;
}
.service-agent{
position:relative;
z-index:1;
width:86px;
height:86px;
border-radius:28px;
display:grid;
place-items:center;
flex:0 0 auto;
font-size:48px;
background:
radial-gradient(circle at 32% 24%,rgba(255,255,255,.85),rgba(255,255,255,0) 40%),
linear-gradient(135deg,#2dd9ff,#315dff 58%,#8330ff);
box-shadow:0 12px 26px rgba(42,91,180,.18);
}
.online-service-card{
width:100%;
min-height:78px;
border-radius:18px;
padding:13px 14px;
background:#fff;
display:grid;
grid-template-columns:40px minmax(0,1fr) 18px;
align-items:center;
gap:10px;
text-align:left;
box-shadow:0 8px 18px rgba(42,91,180,.08);
}
.online-service-card i{
width:38px;
height:38px;
border-radius:14px;
display:grid;
place-items:center;
font-style:normal;
font-size:20px;
color:#fff;
background:linear-gradient(135deg,#2dd9ff,#315dff 58%,#8330ff);
box-shadow:0 7px 14px rgba(42,91,180,.14);
}
.online-service-card h3{
margin:0 0 5px;
color:#18223b;
font-size:17px;
font-weight:1000;
}
.online-service-card p{
margin:0;
color:#778299;
font-size:13px;
}
.online-service-card b{
color:#94a3b8;
font-size:24px;
font-weight:400;
}
.help-grid{
margin-top:12px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}
.help-grid button{
min-height:82px;
border-radius:16px;
background:#fff;
box-shadow:0 8px 18px rgba(42,91,180,.08);
text-align:left;
padding:12px;
display:grid;
grid-template-columns:36px 1fr;
grid-template-rows:auto auto;
column-gap:8px;
align-items:center;
}
.help-grid i{
grid-row:1/3;
width:36px;
height:36px;
border-radius:13px;
display:grid;
place-items:center;
font-style:normal;
background:linear-gradient(135deg,#2dd9ff,#315dff 55%,#8b36ff);
color:#fff;
}
.help-grid span{
font-size:14px;
font-weight:800;
color:#1d2740;
}
.help-grid em{
font-style:normal;
color:#7a849b;
font-size:12px;
}
#page-mine{
padding-bottom:96px;
}
.mine-new-hero{
margin:-12px -12px 0;
padding:12px 13px 10px;
color:#17213d;
background:linear-gradient(180deg,#edf8ff 0%,#f4fbff 100%);
}
.mine-profile{
display:flex;
align-items:center;
gap:9px;
}
.mine-profile-main{
min-width:0;
flex:1;
}
.mine-avatar{
width:46px;
height:46px;
border-radius:50%;
display:grid;
place-items:center;
background:linear-gradient(135deg,#ffe15b,#ff8d21);
border:2px solid rgba(255,255,255,.95);
box-shadow:0 6px 14px rgba(42,91,180,.12);
font-size:20px;
font-weight:900;
color:#fff;
flex:0 0 auto;
}
.mine-profile h2{
margin:0;
color:#59647a;
font-size:17px;
line-height:1.2;
font-weight:900;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.mine-profile h2 span{
display:inline-flex;
align-items:center;
height:16px;
padding:0 7px;
margin-left:5px;
border-radius:999px;
background:linear-gradient(90deg,#dfe5ef,#bfc9d8);
color:#26364d;
font-size:9px;
vertical-align:middle;
}
.mine-profile p{
margin:4px 0 0;
color:#67748c;
font-size:12px;
}
.mine-profile-actions{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
flex:0 0 auto;
}
.mine-tools{
height:25px;
display:flex;
justify-content:flex-end;
gap:7px;
}
.mine-tools button{
width:25px;
height:25px;
border-radius:50%;
background:rgba(22,93,255,.1);
color:#315dff;
font-size:12px;
box-shadow:0 5px 11px rgba(42,91,180,.07);
}
.login-pill{
height:25px;
padding:0 10px;
border-radius:999px;
background:#fff;
color:#ef4444;
font-size:11px;
font-weight:900;
box-shadow:0 5px 11px rgba(42,91,180,.08);
}
.mine-hidden-login-btn{
display:none !important;
}
.mine-wallet-new{
margin:0 0 9px;
padding:10px 12px;
border-radius:16px;
background:#fff;
box-shadow:0 7px 16px rgba(42,91,180,.07);
display:grid;
grid-template-columns:minmax(0,1fr) 134px;
gap:7px;
align-items:center;
}
.mine-balance{
min-width:0;
}
.mine-balance p{
margin:0 0 5px;
color:#34405b;
font-size:11px;
display:flex;
align-items:center;
gap:5px;
font-weight:800;
}
.mine-balance-eye{
font-style:normal;
font-size:10px;
opacity:.6;
}
.mine-balance-refresh{
width:16px;
height:16px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
color:#315dff;
background:#eef6ff;
font-size:12px;
font-style:normal;
font-weight:900;
flex:0 0 auto;
}
.mine-balance h1{
margin:0;
color:#17213d;
font-size:20px;
line-height:1;
font-weight:720;
letter-spacing:.1px;
white-space:nowrap;
display:flex;
align-items:center;
gap:6px;
}
.mine-balance h1 span{
display:inline-block;
}
.mine-money-actions{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:5px;
margin-top:0;
}
.mine-money-actions button{
min-width:0;
height:44px;
border-radius:13px;
background:transparent;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
}
.mine-money-actions i{
width:28px;
height:28px;
border-radius:11px;
display:grid;
place-items:center;
font-style:normal;
font-size:13px;
background:
radial-gradient(circle at 30% 22%,rgba(255,255,255,.78),rgba(255,255,255,0) 38%),
linear-gradient(135deg,#2dd9ff,#315dff 55%,#8b36ff);
color:#fff;
box-shadow:0 5px 10px rgba(42,91,180,.12);
}
.mine-money-actions span{
color:#34405b;
font-size:11px;
font-weight:850;
}
.mine-vip-strip{
margin:0 0 9px;
padding:10px 12px 10px;
border-radius:16px;
background:#fff;
color:#18223b;
box-shadow:0 7px 16px rgba(42,91,180,.07);
position:relative;
overflow:hidden;
}
.mine-vip-rank-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
position:relative;
z-index:1;
}
.mine-vip-rank-row:before{
content:"";
position:absolute;
left:58px;
right:58px;
top:50%;
height:7px;
transform:translateY(-50%);
border-radius:999px;
background:#edf4fb;
z-index:-1;
}
.mine-vip-rank-row span,
.mine-vip-rank-row em{
min-width:54px;
height:22px;
padding:0 9px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:1000;
font-style:normal;
}
.mine-vip-rank-row span{
background:linear-gradient(90deg,#e1e6ef,#b8c2d2);
color:#26364d;
}
.mine-vip-rank-row em{
background:linear-gradient(90deg,#ffe94d,#f6c51c);
color:#745000;
}
.mine-vip-progress{
height:5px;
margin:10px 58px 8px;
border-radius:999px;
background:#edf2fb;
overflow:hidden;
}
.mine-vip-progress i{
display:block;
width:8%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#16bdf3,#315dff 58%,#8330ff);
}
.mine-vip-meta{
display:grid;
grid-template-columns:1fr;
gap:2px;
color:#6c768d;
font-size:10.5px;
line-height:1.4;
}
.mine-vip-bottom{
margin-top:7px;
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
}
.mine-vip-benefits{
flex:1;
min-width:0;
display:flex;
align-items:center;
gap:4px;
overflow:hidden;
}
.mine-vip-benefits span{
height:18px;
padding:0 6px;
border-radius:999px;
display:inline-flex;
align-items:center;
color:#7a8498;
background:#f0f4fa;
font-size:10px;
white-space:nowrap;
}
.mine-vip-benefits span.active{
color:#0d91c9;
background:#e9f8ff;
}
.mine-vip-bottom button{
flex:0 0 auto;
height:24px;
padding:0 7px;
border-radius:999px;
color:#637089;
background:#f4f7fb;
font-size:10.5px;
font-weight:900;
}
.mine-welfare-banner{
margin:0 0 10px;
height:46px;
border-radius:15px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:space-between;
color:#fff;
background:
radial-gradient(circle at 86% 30%,rgba(255,255,255,.28),rgba(255,255,255,0) 36%),
linear-gradient(135deg,#16bdf3,#315dff 58%,#8330ff);
box-shadow:0 10px 22px rgba(42,91,180,.12);
}
.mine-welfare-banner div{
display:flex;
align-items:center;
gap:8px;
}
.mine-welfare-banner strong{
font-size:17px;
font-weight:1000;
letter-spacing:.5px;
}
.mine-welfare-banner span{
font-size:12px;
color:rgba(255,255,255,.86);
}
.mine-welfare-banner em{
font-style:normal;
font-size:12px;
font-weight:900;
color:#fff;
}
.mine-service-box{
margin:0 0 14px;
background:#fff;
border-radius:18px;
padding:12px 8px 10px;
box-shadow:0 8px 18px rgba(42,91,180,.07);
}
.mine-service-box h3{
display:none;
}
.mine-service-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px 4px;
}
.mine-service-grid button{
min-width:0;
height:68px;
border-radius:0;
background:transparent;
border:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
color:#34405b;
}
.mine-service-grid i{
width:34px;
height:34px;
border-radius:50%;
display:grid;
place-items:center;
font-style:normal;
font-size:17px;
background:
radial-gradient(circle at 30% 22%,rgba(255,255,255,.82),rgba(255,255,255,0) 38%),
linear-gradient(135deg,#eefbff,#d7f0ff 55%,#e5e8ff);
box-shadow:0 5px 12px rgba(42,91,180,.1);
}
.mine-service-grid span{
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#33405d;
font-size:12px;
font-weight:800;
line-height:1;
}
@media (max-width:360px){
.mine-service-grid{
grid-template-columns:repeat(4,1fr);
gap:6px;
}
.mine-service-grid span{
font-size:11px;
}
.help-grid{
grid-template-columns:1fr;
}
}
/* ===== 天天娱乐：H5 静态交互弹窗 v4 ===== */
.tt-mask{
position:fixed;
inset:0;
background:rgba(9,18,48,.46);
backdrop-filter:blur(4px);
z-index:90;
opacity:0;
pointer-events:none;
transition:.22s ease;
}
.tt-mask.show{
opacity:1;
pointer-events:auto;
}
.tt-action-sheet,
.tt-login-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
border-radius:24px 24px 0 0;
z-index:99;
padding:10px 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
}
.tt-action-sheet.show,
.tt-login-sheet.show{
transform:translate(-50%,0);
}
/* ===== 全局底部弹窗隐藏态阴影修复 ===== */
.tt-action-sheet:not(.show),
.tt-login-sheet:not(.show),
.tt-deposit-sheet:not(.show),
.tt-withdraw-sheet:not(.show),
.tt-transfer-sheet:not(.show),
.tt-settings-sheet:not(.show),
.tt-venue-sheet:not(.show),
.tt-records-sheet:not(.show),
.tt-account-sheet:not(.show),
.tt-payout-account-sheet:not(.show),
.tt-message-sheet:not(.show),
.tt-vip-sheet:not(.show){
box-shadow:none !important;
}
.sheet-handle{
width:42px;
height:4px;
border-radius:999px;
background:#d7e0f2;
margin:0 auto 12px;
}
.sheet-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}
.sheet-head h3{
margin:0;
color:#14213c;
font-size:19px;
}
.sheet-head p{
margin:5px 0 0;
color:#768098;
font-size:13px;
line-height:1.45;
}
.sheet-head button{
width:32px;
height:32px;
border-radius:50%;
background:#eef3ff;
color:#5b6680;
font-size:24px;
line-height:28px;
}
.sheet-body{
margin-top:14px;
}
.sheet-feature-card{
border-radius:18px;
padding:15px;
background:
radial-gradient(circle at 88% 12%,rgba(255,255,255,.8) 0,rgba(255,255,255,0) 34%),
linear-gradient(135deg,#166fff,#8c31ff);
color:#fff;
min-height:108px;
position:relative;
overflow:hidden;
}
.sheet-feature-card h4{
margin:0 0 7px;
font-size:22px;
}
.sheet-feature-card p{
margin:0;
color:#eaf1ff;
font-size:13px;
line-height:1.5;
}
.sheet-feature-card .sheet-icon{
position:absolute;
right:18px;
top:22px;
font-size:50px;
filter:drop-shadow(0 8px 12px rgba(0,0,0,.18));
}
.sheet-action-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:9px;
margin-top:12px;
}
.sheet-action-grid button{
height:62px;
border-radius:15px;
background:#fff;
color:#25314c;
box-shadow:0 8px 18px rgba(38,82,170,.08);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
}
.sheet-action-grid i{
font-style:normal;
font-size:22px;
}
.sheet-action-grid span{
font-size:12px;
}
.sheet-primary-btn{
margin-top:12px;
width:100%;
height:46px;
border-radius:14px;
color:#fff;
font-size:16px;
font-weight:900;
background:linear-gradient(135deg,#177fff,#9630ff);
box-shadow:0 10px 22px rgba(64,88,255,.25);
}
.login-sheet-head{
text-align:center;
}
.login-sheet-head img{
width:146px;
height:44px;
object-fit:contain;
}
.login-sheet-head h3{
margin:8px 0 4px;
font-size:20px;
color:#14213c;
}
.login-sheet-head p{
margin:0;
color:#7b8499;
font-size:13px;
}
.login-tabs{
margin:16px 0 12px;
display:grid;
grid-template-columns:1fr 1fr;
background:#edf3ff;
border-radius:13px;
padding:4px;
}
.login-tabs button{
height:38px;
border-radius:11px;
color:#68738d;
font-weight:800;
}
.login-tabs button.active{
background:#fff;
color:#315dff;
box-shadow:0 6px 14px rgba(48,92,190,.12);
}
.login-form{
display:flex;
flex-direction:column;
gap:10px;
}
.login-form.hidden{
display:none;
}
.login-form label{
display:block;
background:#fff;
border-radius:14px;
padding:10px 12px;
box-shadow:0 7px 16px rgba(39,80,170,.07);
}
.login-form label span{
display:block;
margin-bottom:6px;
color:#6f7890;
font-size:12px;
}
.login-form input{
width:100%;
border:0;
outline:none;
background:transparent;
font-size:15px;
color:#16213b;
}
.login-submit{
height:46px;
border-radius:14px;
background:linear-gradient(135deg,#177fff,#9630ff);
color:#fff;
font-size:16px;
font-weight:900;
box-shadow:0 10px 22px rgba(64,88,255,.25);
}
@media (max-width:360px){
.sheet-action-grid{
grid-template-columns:repeat(3,1fr);
gap:7px;
}
.sheet-action-grid button{
height:58px;
}
}
/* ===== H5 真实登录注册底座 v9 ===== */
.h5-auth-msg{
min-height:20px;
margin:-4px 0 10px;
text-align:center;
color:#e54a5f;
font-size:13px;
}
.login-pill[data-logged-in="1"]{
background:#fff0f2;
color:#e3334f;
}
.home-user-info h2.logged,
.mine-profile h2.logged{
color:#15213a;
}
.home-user-info p.logged{
color:#315dff;
}
/* ===== H5 充值申请 v11 ===== */
.tt-deposit-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
border-radius:24px 24px 0 0;
z-index:100;
padding:10px 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
}
.tt-deposit-sheet.show{
transform:translate(-50%,0);
}
.deposit-form{
margin-top:14px;
display:flex;
flex-direction:column;
gap:10px;
}
.deposit-form label{
display:block;
background:#fff;
border-radius:14px;
padding:10px 12px;
box-shadow:0 7px 16px rgba(39,80,170,.07);
}
.deposit-form label span{
display:block;
margin-bottom:6px;
color:#6f7890;
font-size:12px;
}
.deposit-form input,
.deposit-form select{
width:100%;
border:0;
outline:none;
background:transparent;
font-size:15px;
color:#16213b;
}
.deposit-quick{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}
.deposit-quick button{
height:36px;
border-radius:11px;
background:#edf3ff;
color:#315dff;
font-weight:800;
}
/* ===== H5 取款申请 v13 ===== */
.tt-withdraw-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
border-radius:24px 24px 0 0;
z-index:101;
padding:10px 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
}
.tt-withdraw-sheet.show{
transform:translate(-50%,0);
}
.withdraw-form{
margin-top:14px;
display:flex;
flex-direction:column;
gap:10px;
}
.withdraw-form label{
display:block;
background:#fff;
border-radius:14px;
padding:10px 12px;
box-shadow:0 7px 16px rgba(39,80,170,.07);
}
.withdraw-form label span{
display:block;
margin-bottom:6px;
color:#6f7890;
font-size:12px;
}
.withdraw-form input,
.withdraw-form select{
width:100%;
border:0;
outline:none;
background:transparent;
font-size:15px;
color:#16213b;
}
.withdraw-quick{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}
.withdraw-quick button{
height:36px;
border-radius:11px;
background:#edf3ff;
color:#315dff;
font-weight:800;
}
/* ===== H5 交易记录 v15 ===== */
.tt-records-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
max-height:82vh;
background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
border-radius:24px 24px 0 0;
z-index:102;
padding:10px 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
display:flex;
flex-direction:column;
}
.tt-records-sheet.show{
transform:translate(-50%,0);
}
.records-tabs{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
background:#edf3ff;
border-radius:13px;
padding:4px;
margin:12px 0;
}
.records-tabs button{
height:34px;
border-radius:10px;
color:#68738d;
font-weight:800;
}
.records-tabs button.active{
background:#fff;
color:#315dff;
box-shadow:0 6px 14px rgba(48,92,190,.12);
}
.records-list{
overflow:auto;
padding-bottom:4px;
}
.record-card{
background:#fff;
border-radius:14px;
padding:12px;
margin-bottom:9px;
box-shadow:0 7px 16px rgba(39,80,170,.07);
}
.record-card-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.record-card h4{
margin:0;
font-size:14px;
color:#17213d;
}
.record-card strong{
font-size:15px;
color:#315dff;
}
.record-card strong.negative{
color:#e54848;
}
.record-card p{
margin:6px 0 0;
color:#6f7890;
font-size:12px;
line-height:1.45;
}
.record-status{
display:inline-block;
padding:3px 7px;
border-radius:999px;
font-size:11px;
}
.record-status.pending{
background:#fff7df;
color:#c98500;
}
.record-status.approved{
background:#e8fff4;
color:#0a9f61;
}
.record-status.rejected{
background:#fff0f0;
color:#e23b4d;
}
.records-empty{
padding:26px 0;
text-align:center;
color:#7a849b;
font-size:13px;
}
/* ===== H5 我的设置页 v1 ===== */
.tt-settings-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
height:92vh;
background:#edf6fb;
border-radius:24px 24px 0 0;
z-index:104;
padding:0 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
display:flex;
flex-direction:column;
}
.tt-settings-sheet.show{
transform:translate(-50%,0);
}
.settings-page-head{
height:54px;
display:grid;
grid-template-columns:54px 1fr 54px;
align-items:center;
flex:0 0 auto;
}
.settings-page-head h3{
margin:0;
text-align:center;
color:#17213d;
font-size:18px;
font-weight:1000;
}
.settings-page-head button{
width:34px;
height:34px;
border-radius:999px;
background:transparent;
color:#66708a;
font-size:22px;
font-weight:800;
}
.settings-body{
overflow:auto;
padding:8px 0 18px;
}
.settings-card{
margin:0 0 12px;
padding:12px;
border-radius:18px;
background:#fff;
box-shadow:0 8px 18px rgba(42,91,180,.07);
}
.settings-card h4{
margin:0 0 10px;
color:#17213d;
font-size:15px;
font-weight:1000;
}
.settings-row{
width:100%;
min-height:48px;
padding:0 4px;
display:grid;
grid-template-columns:34px 1fr 20px;
align-items:center;
gap:8px;
border-radius:12px;
background:#f4fbff;
color:#17213d;
text-align:left;
}
.settings-row + .settings-row{
margin-top:8px;
}
.settings-row i{
width:28px;
height:28px;
border-radius:10px;
display:grid;
place-items:center;
font-style:normal;
font-size:15px;
color:#1298dc;
background:rgba(18,152,220,.1);
}
.settings-row span{
font-size:14px;
font-weight:850;
}
.settings-row b{
color:#94a3b8;
font-size:20px;
font-weight:400;
text-align:right;
}
.settings-logout-btn{
width:100%;
height:46px;
border-radius:16px;
background:#fff;
color:#ef4444;
font-size:15px;
font-weight:1000;
box-shadow:0 8px 18px rgba(42,91,180,.07);
}
/* ===== H5 账户管理 v16 ===== */
.tt-account-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
max-height:82vh;
background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
border-radius:24px 24px 0 0;
z-index:103;
padding:10px 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
display:flex;
flex-direction:column;
}
.tt-account-sheet.show{
transform:translate(-50%,0);
}
.account-tabs{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
background:#edf3ff;
border-radius:13px;
padding:4px;
margin:12px 0;
}
.account-tabs button{
height:34px;
border-radius:10px;
color:#68738d;
font-weight:800;
}
.account-tabs button.active{
background:#fff;
color:#315dff;
box-shadow:0 6px 14px rgba(48,92,190,.12);
}
.account-panel{
overflow:auto;
display:flex;
flex-direction:column;
gap:10px;
}
.account-panel.hidden{
display:none;
}
.account-panel label{
display:block;
background:#fff;
border-radius:14px;
padding:10px 12px;
box-shadow:0 7px 16px rgba(39,80,170,.07);
}
.account-panel label span{
display:block;
margin-bottom:6px;
color:#6f7890;
font-size:12px;
}
.account-panel input{
width:100%;
border:0;
outline:none;
background:transparent;
font-size:15px;
color:#16213b;
}
.account-panel input:disabled{
color:#8a94aa;
}
/* ===== H5 收款账户管理 v4 ===== */
.tt-payout-account-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
max-height:82vh;
background:linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%);
border-radius:24px 24px 0 0;
z-index:103;
padding:10px 14px calc(16px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
display:flex;
flex-direction:column;
}
.tt-payout-account-sheet.show{
transform:translate(-50%,0);
}
.tt-payout-account-sheet .sheet-head{
align-items:center;
padding:0 0 8px;
}
.tt-payout-account-sheet .sheet-head h3{
font-size:18px;
font-weight:1000;
}
.tt-payout-account-sheet .sheet-head p{
margin-top:4px;
font-size:12px;
color:#8a94aa;
}
.tt-payout-account-sheet .sheet-head button{
width:34px;
height:34px;
background:#eef3ff;
color:#69758d;
font-size:24px;
}
.payout-account-view.hidden,
.payout-account-panel label.hidden{
display:none !important;
}
.payout-account-type-tabs{
display:flex;
gap:8px;
overflow:auto;
padding:8px 0 10px;
scrollbar-width:none;
}
.payout-account-type-tabs::-webkit-scrollbar{
display:none;
}
.payout-account-type-tabs button{
flex:0 0 auto;
min-width:92px;
height:40px;
border-radius:14px;
background:#fff;
box-shadow:0 6px 14px rgba(39,80,170,.06);
color:#5f6b84;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
font-size:13px;
font-weight:900;
border:1px solid rgba(215,226,243,.9);
}
.payout-account-type-tabs button.active{
background:linear-gradient(180deg,#f7fcff 0%,#eef8ff 100%);
color:#1298dc;
border-color:rgba(18,152,220,.35);
box-shadow:0 8px 18px rgba(18,152,220,.10);
}
.payout-account-type-tabs button i{
font-style:normal;
font-size:15px;
}
.payout-account-list-title{
margin:4px 0 9px;
color:#17213d;
font-size:15px;
font-weight:1000;
}
.payout-account-list{
display:flex;
flex-direction:column;
gap:10px;
overflow:auto;
max-height:40vh;
padding-bottom:2px;
}
.payout-account-empty{
min-height:136px;
border-radius:18px;
background:#fff;
box-shadow:0 8px 18px rgba(39,80,170,.06);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:20px 14px;
}
.payout-account-empty i{
width:48px;
height:48px;
border-radius:16px;
display:grid;
place-items:center;
background:linear-gradient(180deg,#eef9ff 0%,#dff2ff 100%);
color:#1298dc;
font-style:normal;
font-size:23px;
margin-bottom:10px;
}
.payout-account-empty h4{
margin:0 0 6px;
color:#17213d;
font-size:16px;
font-weight:1000;
}
.payout-account-empty p{
margin:0;
color:#8a94aa;
font-size:12px;
line-height:1.55;
}
.payout-account-card{
width:100%;
min-height:76px;
border-radius:18px;
background:#fff;
box-shadow:0 8px 18px rgba(39,80,170,.07);
display:grid;
grid-template-columns:42px minmax(0,1fr) 18px;
gap:11px;
align-items:center;
padding:12px 13px;
text-align:left;
border:1px solid rgba(225,233,246,.75);
}
.payout-account-card > i{
width:42px;
height:42px;
border-radius:14px;
display:grid;
place-items:center;
background:linear-gradient(180deg,#eef9ff 0%,#dff2ff 100%);
color:#1298dc;
font-style:normal;
font-size:21px;
}
.payout-account-card h4{
margin:0 0 4px;
color:#17213d;
font-size:15px;
font-weight:1000;
line-height:1.2;
}
.payout-account-card p{
margin:0;
color:#3c4760;
font-size:13px;
font-weight:850;
line-height:1.35;
word-break:break-all;
}
.payout-account-card em{
display:block;
margin-top:4px;
color:#1298dc;
font-style:normal;
font-size:12px;
font-weight:900;
}
.payout-account-card b{
color:#a5afc4;
font-size:21px;
font-weight:500;
}
#payoutAccountListMsg{
min-height:20px;
margin-top:8px;
}
#payoutAccountAddBtn{
height:46px;
margin-top:8px;
border-radius:15px;
font-size:15px;
font-weight:1000;
box-shadow:0 10px 20px rgba(60,84,220,.18);
}
#payoutAccountListMsg{
min-height:18px;
margin-top:8px;
text-align:center;
}
#payoutAccountAddBtn{
display:block;
width:min(260px,100%);
height:46px;
margin:14px auto 0;
border-radius:16px;
font-size:15px;
font-weight:1000;
box-shadow:0 10px 20px rgba(60,84,220,.18);
}
.payout-account-back{
align-self:flex-start;
height:32px;
padding:0 11px;
border-radius:999px;
background:#edf7ff;
color:#236f9d;
font-size:13px;
font-weight:900;
margin:8px 0 10px;
}
.payout-account-current{
padding:10px 12px;
border-radius:13px;
background:#eef8ff;
color:#236f9d;
font-size:13px;
font-weight:900;
margin-bottom:10px;
}
.payout-account-panel{
overflow:auto;
display:flex;
flex-direction:column;
gap:10px;
}
.payout-account-panel label{
display:block;
background:#fff;
border-radius:14px;
padding:10px 12px;
box-shadow:0 7px 16px rgba(39,80,170,.06);
border:1px solid rgba(225,233,246,.7);
}
.payout-account-panel label span{
display:block;
margin-bottom:6px;
color:#7a849b;
font-size:12px;
font-weight:850;
}
.payout-account-panel input,
.payout-account-panel select{
width:100%;
border:0;
outline:none;
background:transparent;
font-size:15px;
color:#16213b;
}
#payoutAccountSave{
height:46px;
border-radius:15px;
font-size:15px;
font-weight:1000;
box-shadow:0 10px 20px rgba(60,84,220,.18);
}
@media (max-width:360px){
.payout-account-type-tabs button{
min-width:88px;
height:38px;
font-size:12px;
}
.payout-account-card{
grid-template-columns:38px minmax(0,1fr) 16px;
gap:10px;
padding:11px 12px;
}
.payout-account-card > i{
width:38px;
height:38px;
font-size:18px;
}
#payoutAccountAddBtn,
#payoutAccountSave{
height:44px;
font-size:14px;
}
}
.home-dots i{
cursor:pointer;
transition:.2s ease;
}
.home-dots i.active{
width:18px !important;
border-radius:999px !important;
background:#326bff !important;
}
/* ===== H5 福利活动动态渲染 v26 ===== */
.dynamic-promo-list{
padding:0;
margin-top:8px;
}
.dynamic-promo-card{
min-height:118px;
border-radius:18px;
padding:14px;
margin-bottom:11px;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 88% 24%,rgba(49,93,255,.12),rgba(49,93,255,0) 34%),
linear-gradient(135deg,#ffffff 0%,#f4f8ff 100%);
box-shadow:0 8px 18px rgba(40,76,170,.07);
border:1px solid rgba(75,120,255,.08);
}
.dynamic-promo-card:after{
content:"🎁";
position:absolute;
right:16px;
top:30px;
font-size:42px;
opacity:.18;
}
.dynamic-promo-top{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:8px;
}
.dynamic-promo-top span{
display:inline-flex;
align-items:center;
height:24px;
padding:0 9px;
border-radius:999px;
background:#edf3ff;
color:#356dff;
font-size:12px;
font-weight:900;
}
.dynamic-promo-top strong{
color:#ff7a1a;
font-size:13px;
font-weight:1000;
}
.dynamic-promo-card h3{
position:relative;
z-index:1;
margin:0 0 6px;
color:#17213d;
font-size:17px;
font-weight:1000;
}
.dynamic-promo-card p{
position:relative;
z-index:1;
margin:0;
max-width:76%;
color:#6f7890;
font-size:12px;
line-height:1.5;
}
.dynamic-promo-info{
position:relative;
z-index:1;
margin-top:12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.dynamic-promo-info em{
font-style:normal;
color:#8a94aa;
font-size:12px;
}
.dynamic-promo-info button{
height:30px;
padding:0 13px;
border-radius:999px;
background:linear-gradient(135deg,#177fff,#9430ff);
color:#fff;
font-size:12px;
font-weight:900;
}
/* ===== H5 消息中心底部弹窗修复 v1 ===== */
.tt-message-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
max-height:82vh;
background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
border-radius:24px 24px 0 0;
z-index:104;
padding:10px 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
display:flex;
flex-direction:column;
}
.tt-message-sheet.show{
transform:translate(-50%,0);
}
.tt-message-sheet .message-list{
overflow:auto;
padding-top:10px;
}
.message-card-head em{
font-style:normal;
color:#9aa3b6;
font-size:11px;
}
.message-card h4{
margin:0 0 6px;
font-size:15px;
color:#17213d;
}
.message-card p{
margin:0;
color:#6f7890;
font-size:13px;
line-height:1.55;
}
/* ===== H5 福利活动大图卡覆盖 v28 ===== */
#page-welfare .dynamic-promo-list{
padding:0 0 96px;
margin-top:0;
}
#page-welfare .dynamic-promo-card{
margin:0 0 10px;
padding:0;
border-radius:10px;
overflow:hidden;
background:#fff;
box-shadow:0 6px 14px rgba(40,76,170,.06);
border:0;
}
#page-welfare .dynamic-promo-cover{
height:156px;
position:relative;
overflow:hidden;
padding:22px 18px 18px;
display:flex;
align-items:flex-start;
justify-content:space-between;
color:#fff;
background:
radial-gradient(circle at 76% 38%,rgba(255,255,255,.24),rgba(255,255,255,0) 35%),
linear-gradient(135deg,#086fd6 0%,#1298dc 46%,#315dff 100%);
}
#page-welfare .dynamic-promo-card:nth-child(2n) .dynamic-promo-cover{
background:
radial-gradient(circle at 78% 38%,rgba(255,255,255,.22),rgba(255,255,255,0) 34%),
linear-gradient(135deg,#0f7ccf 0%,#176eff 48%,#8330ff 100%);
}
#page-welfare .dynamic-promo-copy{
position:relative;
z-index:2;
max-width:68%;
}
#page-welfare .dynamic-promo-cover h3{
margin:0 0 10px;
color:#fff;
font-size:27px;
line-height:1.12;
font-weight:1000;
letter-spacing:.4px;
}
#page-welfare .dynamic-promo-cover p{
margin:0;
color:rgba(255,255,255,.88);
font-size:15px;
line-height:1.5;
max-width:none;
}
#page-welfare .dynamic-promo-cover strong{
position:absolute;
left:18px;
bottom:14px;
z-index:2;
color:#fff;
font-size:13px;
font-weight:1000;
opacity:.9;
}
#page-welfare .dynamic-promo-cover i{
position:absolute;
right:18px;
bottom:18px;
z-index:1;
width:104px;
height:104px;
border-radius:26px;
display:grid;
place-items:center;
font-style:normal;
font-size:66px;
background:rgba(255,255,255,.16);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
#page-welfare .dynamic-promo-cover:after{
content:"";
position:absolute;
right:-38px;
top:-46px;
width:150px;
height:150px;
border-radius:50%;
background:rgba(255,255,255,.16);
}
#page-welfare .dynamic-promo-info{
min-height:50px;
padding:0 12px;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:10px;
background:#fff;
margin-top:0;
}
#page-welfare .dynamic-promo-info span{
height:25px;
padding:0 10px;
border-radius:6px;
display:inline-flex;
align-items:center;
background:#eaf1ff;
color:#356dff;
font-size:12px;
font-weight:900;
}
#page-welfare .dynamic-promo-info em{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#17213d;
font-style:normal;
font-size:14px;
font-weight:800;
}
#page-welfare .dynamic-promo-info button{
height:32px;
padding:0 15px;
border-radius:7px;
background:#1298dc;
color:#fff;
font-size:13px;
font-weight:900;
}
/* ===== H5 APP 下载真实接入 v29 ===== */
.app-download-btn,
#openAppDownloadBtn{
cursor:pointer;
}
/* ===== H5 充值收款配置展示 v30 ===== */
.deposit-pay-info{
background:#f6f8ff;
border:1px solid #e2e9ff;
border-radius:14px;
padding:10px;
margin:0 0 12px;
color:#64708a;
font-size:13px;
line-height:1.55;
}
.deposit-pay-info p{
margin:0 0 6px;
}
.deposit-pay-info p:last-child{
margin-bottom:0;
}
.deposit-pay-info strong{
color:#17213d;
}
.deposit-pay-info .deposit-qr{
margin-top:8px;
display:flex;
justify-content:center;
}
.deposit-pay-info .deposit-qr img{
width:150px;
height:150px;
object-fit:contain;
border-radius:12px;
background:#fff;
border:1px solid #edf1fb;
}
/* ===== H5 提现方式动态展示 v31 ===== */
.withdraw-method-info{
background:#f6f8ff;
border:1px solid #e2e9ff;
border-radius:14px;
padding:10px;
margin:0 0 12px;
color:#64708a;
font-size:13px;
line-height:1.55;
}
.withdraw-method-info p{
margin:0 0 6px;
}
.withdraw-method-info p:last-child{
margin-bottom:0;
}
.withdraw-method-info strong{
color:#17213d;
}
/* ===== H5 VIP 中心 v32 ===== */
.tt-vip-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
max-height:84vh;
background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
border-radius:24px 24px 0 0;
z-index:104;
padding:10px 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
display:flex;
flex-direction:column;
}
.tt-vip-sheet.show{
transform:translate(-50%,0);
}
.vip-current-card{
margin-top:10px;
border-radius:18px;
padding:16px;
background:linear-gradient(135deg,#17213d,#3a2da8 58%,#8b30ff);
color:#fff;
box-shadow:0 12px 28px rgba(74,61,210,.22);
}
.vip-current-card span{
font-size:12px;
opacity:.8;
}
.vip-current-card h2{
margin:5px 0 6px;
font-size:22px;
}
.vip-current-card p{
margin:0;
font-size:13px;
opacity:.9;
line-height:1.5;
}
.vip-level-list{
overflow:auto;
padding-top:12px;
}
.vip-level-card{
background:#fff;
border-radius:16px;
padding:14px;
margin-bottom:10px;
box-shadow:0 8px 20px rgba(40,76,170,.08);
border:1px solid rgba(75,120,255,.08);
}
.vip-level-card.current{
border-color:#7a5cff;
box-shadow:0 10px 24px rgba(122,92,255,.16);
}
.vip-level-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
margin-bottom:8px;
}
.vip-level-head h4{
margin:0;
font-size:16px;
color:#17213d;
}
.vip-level-head span{
padding:4px 9px;
border-radius:999px;
background:#edf3ff;
color:#356dff;
font-size:12px;
font-weight:800;
}
.vip-level-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin:10px 0;
}
.vip-level-grid article{
border-radius:12px;
background:#f6f8ff;
padding:9px;
}
.vip-level-grid article small{
display:block;
color:#8a94aa;
font-size:11px;
margin-bottom:4px;
}
.vip-level-grid article strong{
color:#17213d;
font-size:13px;
}
.vip-level-card p{
margin:0;
color:#6f7890;
font-size:13px;
line-height:1.55;
}
/* ===== H5 投注记录 v34 ===== */
#openBetRecordsBtn{
cursor:pointer;
}
.bet-record-meta{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:6px;
}
.bet-record-meta span{
padding:4px 7px;
border-radius:999px;
background:#f0f4ff;
color:#5b6680;
font-size:11px;
}
/* ===== H5 中奖记录 v35 ===== */
#openWinRecordsBtn{
cursor:pointer;
}
.win-record-prize{
color:#f59e0b;
font-weight:900;
}
.win-record-meta{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:6px;
}
.win-record-meta span{
padding:4px 7px;
border-radius:999px;
background:#fff7e6;
color:#b7791f;
font-size:11px;
}
/* ===== H5 场馆大厅 v36 ===== */
.tt-venue-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
max-height:84vh;
background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
border-radius:24px 24px 0 0;
z-index:104;
padding:10px 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
display:flex;
flex-direction:column;
}
.tt-venue-sheet.show{
transform:translate(-50%,0);
}
.tt-venue-sheet.omg-fullscreen{
top:0;
bottom:auto;
height:100dvh;
max-height:100dvh;
width:min(430px,100%);
border-radius:0;
padding:0 12px calc(14px + env(safe-area-inset-bottom));
background:#f6f8fc;
box-shadow:none;
}
.tt-venue-sheet.omg-fullscreen .sheet-handle,
.tt-venue-sheet.omg-fullscreen > .sheet-head{
display:none;
}
.venue-hall-body{
overflow:auto;
padding-top:10px;
}
.tt-venue-sheet.omg-fullscreen .venue-hall-body{
height:100%;
overflow:auto;
padding:0 0 72px;
}
.venue-hall-card{
border-radius:20px;
padding:16px;
color:#fff;
background:linear-gradient(135deg,#17213d,#3556e8 58%,#8b30ff);
box-shadow:0 12px 28px rgba(74,61,210,.22);
}
.venue-hall-card .venue-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.venue-hall-card h2{
margin:0;
font-size:23px;
}
.venue-hall-card p{
margin:6px 0 0;
font-size:13px;
opacity:.9;
line-height:1.5;
}
.venue-hall-icon{
width:62px;
height:62px;
border-radius:20px;
background:rgba(255,255,255,.16);
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
flex:none;
}
.venue-hall-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:12px 0;
}
.venue-hall-grid article{
border-radius:14px;
background:#fff;
padding:11px;
box-shadow:0 8px 18px rgba(40,76,170,.08);
}
.venue-hall-grid article span{
display:block;
color:#8a94aa;
font-size:12px;
margin-bottom:5px;
}
.venue-hall-grid article strong{
color:#17213d;
font-size:15px;
}
.venue-hall-notice{
background:#fff;
border-radius:16px;
padding:13px;
color:#66708a;
font-size:13px;
line-height:1.6;
box-shadow:0 8px 18px rgba(40,76,170,.08);
}
.venue-hall-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:12px;
}
.venue-hall-actions button{
height:44px;
border-radius:14px;
border:0;
font-weight:900;
}
.venue-hall-actions button.primary{
color:#fff;
background:linear-gradient(135deg,#177fff,#9430ff);
}
.venue-hall-actions button.ghost{
color:#356dff;
background:#edf3ff;
}
.big-venue{
cursor:pointer;
}
/* ===== H5 场馆游戏列表 v37 ===== */
.venue-game-list{
display:block;
}
.tt-venue-sheet.omg-fullscreen .omg-game-page{
min-height:100%;
margin:0;
padding:10px 0 18px;
}
.tt-venue-sheet.omg-fullscreen .omg-game-header{
position:sticky;
top:0;
z-index:3;
padding:10px 0 12px;
background:linear-gradient(180deg,#f6f8fc 78%,rgba(246,248,252,0));
}
.tt-venue-sheet.omg-fullscreen .omg-game-title strong{
font-size:19px;
}
.tt-venue-sheet.omg-fullscreen .omg-game-title span{
display:none;
}
.tt-venue-sheet.omg-fullscreen .omg-game-tabs{
position:sticky;
top:54px;
z-index:2;
margin:0 -2px 12px;
border-radius:0 0 18px 18px;
background:#fff;
box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.tt-venue-sheet.omg-fullscreen .omg-game-grid{
gap:10px;
padding:0 0 18px;
}
.tt-venue-sheet.omg-fullscreen .omg-game-card{
border-radius:14px;
box-shadow:0 8px 20px rgba(15,23,42,.08);
}
.tt-venue-sheet.omg-fullscreen .omg-game-cover{
height:104px;
}
.tt-venue-sheet.omg-fullscreen .omg-cover-title{
font-size:17px;
}
.tt-venue-sheet.omg-fullscreen .omg-game-info{
min-height:52px;
}
.tt-venue-sheet.omg-fullscreen .omg-game-info h4{
max-width:118px;
font-size:13px;
}
.omg-game-page{
margin:-4px -2px 0;
padding:0 0 16px;
}
.omg-game-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:6px 2px 14px;
}
.omg-game-back{
width:34px;
height:34px;
border:0;
background:#fff;
color:#1f2937;
font-size:30px;
line-height:30px;
}
.omg-game-title{
flex:1;
text-align:center;
min-width:0;
}
.omg-game-title strong{
display:block;
font-size:20px;
color:#111827;
letter-spacing:.5px;
}
.omg-game-title span{
display:block;
margin-top:3px;
font-size:12px;
color:#94a3b8;
}
.omg-game-tools{
display:flex;
align-items:center;
gap:8px;
}
.omg-tool-btn{
width:32px;
height:32px;
border:0;
border-radius:50%;
background:#fff7ed;
color:#f59e0b;
font-weight:900;
font-size:15px;
box-shadow:0 8px 18px rgba(245,158,11,.14);
}
.omg-game-tabs{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
margin:0 -4px 12px;
background:linear-gradient(180deg,#f8fbff,#fff);
border-radius:18px;
overflow:hidden;
}
.omg-game-tabs button{
border:0;
background:transparent;
height:44px;
color:#6b7280;
font-size:14px;
font-weight:800;
}
.omg-game-tabs button.active{
color:#12a8c8;
background:linear-gradient(180deg,rgba(34,211,238,.16),rgba(255,255,255,0));
}
.omg-game-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
padding:0 2px 6px;
}
.omg-game-card{
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 24px rgba(15,23,42,.08);
border:1px solid rgba(226,232,240,.88);
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.omg-game-card:active{
transform:scale(.985);
}
.omg-game-cover{
position:relative;
height:92px;
overflow:hidden;
color:#fff;
background:#6366f1;
}
.omg-cover-glow{
position:absolute;
inset:-35px;
opacity:.65;
background:
radial-gradient(circle at 20% 20%,rgba(255,255,255,.72),transparent 28%),
radial-gradient(circle at 80% 30%,rgba(255,255,255,.28),transparent 30%),
radial-gradient(circle at 50% 100%,rgba(255,255,255,.22),transparent 38%);
}
.omg-game-cover::after{
content:"";
position:absolute;
right:-20px;
bottom:-28px;
width:96px;
height:96px;
border-radius:50%;
background:rgba(255,255,255,.16);
}
.omg-cover-title{
position:absolute;
left:10px;
right:10px;
bottom:30px;
z-index:1;
font-size:18px;
line-height:1.05;
font-weight:1000;
letter-spacing:.3px;
text-shadow:0 2px 8px rgba(0,0,0,.22);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.omg-cover-sub{
position:absolute;
left:10px;
bottom:10px;
z-index:1;
font-size:11px;
font-weight:900;
letter-spacing:.8px;
opacity:.92;
}
.cover-crash{
background:
linear-gradient(135deg,#0f172a,#2563eb 48%,#7c3aed),
radial-gradient(circle at 70% 20%,#facc15,transparent 25%);
}
.cover-gold{
background:
linear-gradient(135deg,#78350f,#f59e0b 52%,#fef3c7),
radial-gradient(circle at 20% 20%,#fff7ed,transparent 26%);
}
.cover-blue{
background:
linear-gradient(135deg,#0f766e,#06b6d4 52%,#2563eb),
radial-gradient(circle at 80% 24%,#ecfeff,transparent 24%);
}
.cover-red{
background:
linear-gradient(135deg,#7f1d1d,#ef4444 52%,#fb7185),
radial-gradient(circle at 75% 25%,#fff1f2,transparent 24%);
}
.cover-purple{
background:
linear-gradient(135deg,#312e81,#7c3aed 52%,#ec4899),
radial-gradient(circle at 80% 20%,#fdf2f8,transparent 24%);
}
.omg-game-info{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:8px 9px 10px;
}
.omg-game-info h4{
margin:0;
color:#111827;
font-size:13px;
font-weight:900;
line-height:1.2;
max-width:105px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.omg-hot-badge,
.omg-new-badge{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:4px;
height:17px;
padding:0 6px;
border-radius:5px;
font-size:10px;
font-weight:900;
}
.omg-hot-badge{
color:#ef4444;
background:#fee2e2;
}
.omg-new-badge{
color:#2563eb;
background:#dbeafe;
}
.omg-fav-btn{
border:0;
background:transparent;
color:#cbd5e1;
font-size:20px;
line-height:1;
padding:0;
}
/* ===== H5 额度转账 v40 ===== */
.tt-transfer-sheet{
position:fixed;
left:50%;
bottom:0;
transform:translate(-50%,105%);
width:min(430px,100%);
height:92vh;
background:#edf6fb;
border-radius:24px 24px 0 0;
z-index:104;
padding:0 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 40px rgba(17,39,105,.22);
transition:.25s ease;
display:flex;
flex-direction:column;
}
.tt-transfer-sheet.show{
transform:translate(-50%,0);
}
.transfer-page-head{
height:54px;
display:grid;
grid-template-columns:54px 1fr 72px;
align-items:center;
flex:0 0 auto;
}
.transfer-page-head h3{
margin:0;
text-align:center;
color:#17213d;
font-size:18px;
font-weight:1000;
}
.transfer-page-head button{
height:34px;
border-radius:999px;
background:transparent;
color:#66708a;
font-size:18px;
font-weight:900;
}
.transfer-page-head .transfer-help{
color:#66708a;
font-size:13px;
}
.transfer-form{
overflow:auto;
padding:6px 0 14px;
}
.transfer-balance-card{
border-radius:18px;
padding:16px;
margin-bottom:12px;
color:#fff;
background:
radial-gradient(circle at 82% 24%,rgba(255,255,255,.2),rgba(255,255,255,0) 36%),
linear-gradient(135deg,#16bdf3,#315dff 58%,#8330ff);
box-shadow:0 10px 24px rgba(42,91,180,.16);
}
.transfer-card-top{
display:flex;
justify-content:space-between;
gap:10px;
align-items:flex-start;
}
.transfer-card-top span,
.transfer-card-sub span{
display:block;
color:rgba(255,255,255,.82);
font-size:12px;
margin-bottom:6px;
}
.transfer-card-top strong{
display:block;
color:#fff;
font-size:27px;
line-height:1;
font-weight:850;
}
.transfer-card-recycle{
height:32px;
padding:0 13px;
border-radius:999px;
color:#fff;
background:rgba(255,255,255,.22);
font-size:12px;
font-weight:900;
}
.transfer-card-sub{
margin-top:16px;
display:grid;
grid-template-columns:1fr 1px 1fr;
gap:14px;
align-items:end;
}
.transfer-card-sub i{
width:1px;
height:34px;
background:rgba(255,255,255,.45);
}
.transfer-card-sub strong{
display:block;
color:#fff;
font-size:21px;
line-height:1;
font-weight:850;
}
.transfer-switch-line{
height:46px;
border-radius:16px;
background:#fff;
margin-bottom:12px;
padding:0 12px;
display:flex;
align-items:center;
gap:10px;
box-shadow:0 8px 18px rgba(42,91,180,.06);
}
.transfer-switch-line input{
display:none;
}
.transfer-switch-line i{
width:42px;
height:24px;
border-radius:999px;
background:#c9d2dd;
position:relative;
}
.transfer-switch-line i:before{
content:"";
position:absolute;
left:3px;
top:3px;
width:18px;
height:18px;
border-radius:50%;
background:#fff;
box-shadow:0 2px 7px rgba(20,40,80,.18);
transition:.18s ease;
}
.transfer-switch-line input:checked + i{
background:linear-gradient(135deg,#16bdf3,#315dff);
}
.transfer-switch-line input:checked + i:before{
transform:translateX(18px);
}
.transfer-switch-line span{
color:#66708a;
font-size:14px;
font-weight:850;
}
.transfer-form label.transfer-switch-line{
height:46px;
border-radius:16px;
background:#fff;
margin-bottom:12px;
padding:0 12px;
display:flex;
align-items:center;
gap:10px;
box-shadow:0 8px 18px rgba(42,91,180,.06);
}
.transfer-form label.transfer-switch-line input{
display:none;
}
.transfer-form label.transfer-switch-line i{
width:42px;
height:24px;
border-radius:999px;
background:#c9d2dd;
position:relative;
flex:0 0 auto;
}
.transfer-form label.transfer-switch-line i:before{
content:"";
position:absolute;
left:3px;
top:3px;
width:18px;
height:18px;
border-radius:50%;
background:#fff;
box-shadow:0 2px 7px rgba(20,40,80,.18);
transition:.18s ease;
}
.transfer-form label.transfer-switch-line input:checked + i{
background:linear-gradient(135deg,#16bdf3,#315dff);
}
.transfer-form label.transfer-switch-line input:checked + i:before{
transform:translateX(18px);
}
.transfer-form label.transfer-switch-line span{
display:block;
margin:0;
color:#66708a;
font-size:14px;
font-weight:850;
}
.transfer-venue-wallet-list{
border-radius:18px;
background:#fff;
padding:10px 8px;
margin-bottom:12px;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;
box-shadow:0 8px 18px rgba(42,91,180,.06);
}
.transfer-venue-wallet-item{
min-height:54px;
padding:7px 4px;
text-align:center;
border-right:1px solid #eef3f8;
border-bottom:1px solid #eef3f8;
}
.transfer-venue-wallet-item:nth-child(4n){
border-right:0;
}
.transfer-venue-wallet-item span{
display:block;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#66708a;
font-size:12px;
}
.transfer-venue-wallet-item strong{
display:block;
margin-top:4px;
color:#17213d;
font-size:15px;
font-weight:900;
}
.transfer-auto-line{
height:52px;
margin:4px 0 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.transfer-auto-line span{
color:#34405b;
font-size:17px;
font-weight:1000;
}
.transfer-auto-line input{
display:none;
}
.transfer-auto-line i{
width:48px;
height:28px;
border-radius:999px;
background:#c9d2dd;
position:relative;
box-shadow:0 4px 10px rgba(20,40,80,.14);
}
.transfer-auto-line i:before{
content:"";
position:absolute;
left:3px;
top:3px;
width:22px;
height:22px;
border-radius:50%;
background:#fff;
box-shadow:0 2px 7px rgba(20,40,80,.18);
transition:.18s ease;
}
.transfer-auto-line input:checked + i{
background:linear-gradient(135deg,#16bdf3,#315dff);
}
.transfer-auto-line input:checked + i:before{
transform:translateX(20px);
}
.transfer-route-line{
min-height:58px;
margin:0;
padding:0;
border-bottom:1px solid rgba(216,228,240,.72);
display:grid;
grid-template-columns:92px minmax(0,1fr) 24px;
align-items:center;
gap:8px;
}
.transfer-route-title{
display:flex !important;
align-items:center;
gap:7px;
margin:0 !important;
color:#34405b !important;
font-size:17px !important;
font-weight:1000 !important;
}
.transfer-route-title em{
height:22px;
padding:0 8px;
border-radius:7px;
display:inline-flex;
align-items:center;
color:#13a2d8;
background:#e9f8ff;
font-size:13px;
font-style:normal;
font-weight:900;
}
.transfer-route-line:nth-of-type(3) .transfer-route-title em{
color:#15a869;
background:#eafbf2;
}
.transfer-route-line select{
height:58px;
border:0;
border-radius:0;
padding:0;
background:transparent;
color:#17213d;
font-size:17px;
font-weight:850;
outline:none;
}
.transfer-route-line b{
color:#97a4b8;
font-size:26px;
font-weight:400;
line-height:1;
}
.transfer-route-tip{
margin:12px 0 16px;
color:#8a94aa;
font-size:14px;
font-weight:800;
}
.transfer-amount-title{
margin:0 0 10px;
color:#34405b;
font-size:17px;
font-weight:1000;
}
.transfer-quick{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin:0 0 14px;
}
.transfer-quick button{
height:48px;
border:0;
border-radius:14px;
color:#17213d;
background:#fff;
font-size:17px;
font-weight:1000;
box-shadow:0 6px 14px rgba(42,91,180,.06);
}
.transfer-amount-input{
height:54px;
margin:0 0 18px;
padding:0 12px;
border-radius:14px;
background:#fff;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto auto;
align-items:center;
gap:12px;
box-shadow:0 6px 14px rgba(42,91,180,.06);
}
.transfer-amount-input input{
height:54px;
border:0;
padding:0 0 0 2px;
background:transparent;
color:#17213d;
font-size:16px;
outline:none;
}
.transfer-amount-input span{
display:block !important;
margin:0 !important;
color:#17213d !important;
font-size:17px !important;
font-weight:500 !important;
}
.transfer-amount-input button{
color:#13a2d8;
background:transparent;
font-size:16px;
font-weight:900;
}
.transfer-submit-btn{
width:150px;
height:52px;
margin:6px auto 0;
border-radius:13px;
display:block;
background:linear-gradient(135deg,#16bdf3,#315dff 58%,#8330ff);
color:#fff;
font-size:17px;
font-weight:1000;
box-shadow:0 10px 22px rgba(42,91,180,.16);
}
.transfer-service-tip{
margin:18px 0 6px;
text-align:center;
color:#8a94aa;
font-size:14px;
}
.transfer-service-tip button{
color:#13a2d8;
background:transparent;
font-size:14px;
font-weight:900;
}
.tt-transfer-sheet.auto-transfer-on .transfer-route-line,
.tt-transfer-sheet.auto-transfer-on .transfer-route-tip,
.tt-transfer-sheet.auto-transfer-on .transfer-amount-title,
.tt-transfer-sheet.auto-transfer-on .transfer-quick,
.tt-transfer-sheet.auto-transfer-on .transfer-amount-input,
.tt-transfer-sheet.auto-transfer-on #transferSubmit,
.tt-transfer-sheet.auto-transfer-on #transferMsg{
display:none !important;
}
.transfer-records-mini{
display:none;
}
.transfer-record-card{
background:#fff;
border-radius:14px;
padding:11px;
margin-top:8px;
box-shadow:0 8px 18px rgba(40,76,170,.08);
font-size:12px;
color:#66708a;
}
.transfer-record-card strong{
color:#17213d;
}
/* ===== H5 场馆钱包展示和一键回收 v44 ===== */
.mine-venue-wallets{
display:none;
margin:12px;
border-radius:18px;
background:#fff;
padding:13px;
box-shadow:0 8px 22px rgba(30,68,160,.08);
}
.mine-venue-wallets-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.mine-venue-wallets-head h3{
margin:0;
color:#17213d;
font-size:16px;
}
.mine-venue-wallets-head p{
margin:4px 0 0;
color:#7c879c;
font-size:12px;
}
.mine-venue-wallets-head button,
.transfer-recycle-btn{
border:0;
border-radius:12px;
padding:9px 12px;
color:#fff;
background:linear-gradient(135deg,#177fff,#9430ff);
font-weight:900;
}
.transfer-recycle-btn{
width:100%;
height:42px;
margin-top:8px;
background:linear-gradient(135deg,#17213d,#3556e8 58%,#8b30ff);
}
.mine-venue-wallet-summary{
border-radius:15px;
padding:12px;
color:#fff;
background:linear-gradient(135deg,#17213d,#3556e8 58%,#8b30ff);
margin-bottom:9px;
}
.mine-venue-wallet-summary span{
display:block;
font-size:12px;
opacity:.85;
}
.mine-venue-wallet-summary strong{
display:block;
margin-top:4px;
font-size:22px;
}
.mine-venue-wallet-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 0;
border-top:1px solid #edf1f8;
}
.mine-venue-wallet-item:first-child{
border-top:0;
}
.mine-venue-wallet-item h4{
margin:0;
color:#17213d;
font-size:14px;
}
.mine-venue-wallet-item p{
margin:3px 0 0;
color:#8a94aa;
font-size:12px;
}
.mine-venue-wallet-item strong{
color:#315dff;
font-size:15px;
}
/* ===== OMG 游戏真实封面图 ===== */
.omg-game-cover.has-real-cover {
position: relative;
overflow: hidden;
background: #111827;
}
.omg-game-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.omg-game-cover.has-real-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.18));
pointer-events: none;
}