:root{--brand-red:#f01936;--brand-navy:#080f4d}
.brand>span{overflow:hidden;background-image:url('assets/xiaohonghua-logo.png');background-size:180%;background-position:50% 21%;color:transparent;box-shadow:0 2px 8px #080f4d22}
.brand strong{color:var(--brand-navy)}
.hero{background:linear-gradient(135deg,#fff 0%,#fff 58%,#f7f8ff 100%)}
.hero h1 span,.kicker{color:var(--brand-red)}
.hero-mark{width:360px;height:260px;margin-right:-2%;border-radius:10px;background:url('assets/xiaohonghua-logo.png') center/cover no-repeat;box-shadow:0 18px 44px #080f4d24;color:transparent;font-size:0;transform:rotate(1.5deg)}
.primary,.action{background:var(--brand-red)}
.topbar nav button.active{color:var(--brand-red)}.topbar nav button.active::after,.topbar em{background:var(--brand-red)}
.game-tabs button.active,.order-filters button.active{border-color:var(--brand-red);background:#fff0f2;color:var(--brand-red)}
@media(max-width:760px){.hero-mark{display:none}}
.home-banners{position:relative;width:100%;aspect-ratio:8/3;min-height:300px;overflow:hidden;border-radius:26px;background:var(--dark)}.home-banners .hero{height:100%}.banner-track,.web-banner{position:absolute;inset:0}.web-banner{visibility:hidden;opacity:0;transition:opacity .35s}.web-banner.active{visibility:visible;opacity:1}.web-banner img{display:block;width:100%;height:100%;object-fit:cover}.web-banner:after{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,17,14,.75),rgba(15,17,14,.05) 70%);content:""}.web-banner-copy{position:absolute;z-index:1;left:5%;bottom:14%;max-width:55%;color:#fff;text-shadow:0 2px 12px #0008}.web-banner-copy h2{margin:0;font-size:clamp(28px,4vw,52px)}.web-banner-copy p{margin:10px 0 0;font-size:clamp(14px,1.7vw,21px)}.banner-dots{position:absolute;z-index:2;right:22px;bottom:18px;display:flex;gap:8px}.banner-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#ffffff80;cursor:pointer}.banner-dots button.active{width:25px;border-radius:8px;background:var(--lime)}@media(max-width:760px){.home-banners{min-height:240px;aspect-ratio:16/9}.web-banner-copy{max-width:75%}}
.web-banner-fallback{width:100%;height:100%;overflow:hidden;background:#fff url("https://xhhdianjing-1464332729.cos.ap-guangzhou.myqcloud.com/assets/logo.png") no-repeat 88% 50%/clamp(108px,18%,190px);color:transparent;font-size:0}
.web-banner:has(.web-banner-fallback):after{background:linear-gradient(90deg,#fff 0%,#fff 66%,rgba(255,255,255,.2) 100%)}
.web-banner:has(.web-banner-fallback) .web-banner-copy{left:3%;bottom:auto;top:50%;max-width:61%;transform:translateY(-50%);color:#171b26;text-shadow:none}
.web-banner:has(.web-banner-fallback) .web-banner-copy:before{display:block;margin-bottom:10px;color:#f01936;font-size:12px;font-weight:800;content:"小红花电竞 · 接单中心"}
.web-banner:has(.web-banner-fallback) .web-banner-copy h2{font-size:clamp(24px,3vw,42px);line-height:1.2}
.web-banner:has(.web-banner-fallback) .web-banner-copy p{color:#8b94a5;font-size:clamp(13px,1.25vw,18px)}
.banner-dots{right:50%;bottom:14px;transform:translateX(50%)}
.banner-dots button{background:#cbd0d9}.banner-dots button.active{width:9px;border-radius:50%;background:#f01936}
@media(max-width:760px){.web-banner-fallback{background-position:90% 50%;background-size:100px}.web-banner:has(.web-banner-fallback) .web-banner-copy{left:5%;max-width:62%}.web-banner:has(.web-banner-fallback) .web-banner-copy:before{font-size:10px}}
#banner-detail-dialog{width:min(760px,92vw);max-height:88vh}.banner-detail{position:relative;padding:34px}.banner-detail>.close{position:absolute;top:12px;right:16px}.banner-detail h2{margin:8px 0 24px;font-size:30px}.banner-detail-content{padding:24px;border-radius:14px;background:#f5f6f8;color:#343b4a;line-height:1.9;white-space:normal}
.banner-detail-image{display:block;width:100%;height:auto;margin-bottom:20px;border-radius:12px}.banner-detail-content>div{white-space:normal}