* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --bg-color1: #e9eef9;
    --bg-color2: #e9eef9;
    --bg-color3: #fff;
    --bg-color4: #fff;
    --bg-color5: #E0E7F5;
    --bg-color6: #e8eefa;
    --bg-color7: #fff;
    --bg-color8: #C0F2DA;
    --bg-color9: #ffffff;
    --bg-color10: #f5f8ff;
    --text-color1: #FFFFFFCC;
    --text-color2: #849448;
    --text-color3: #000000B2;
    --text-color4: #33394A;
    --text-color5: #6C7892;
    --text-color6: #888888;
    --text-color7: #000000CC;
    --text-color8: #00000099;
    --text-color9: #333333;
    --text-color10: #000000E5;
    --text-color11: #00000066;
    --text-color12: #666;
    --text-color13: #666;
    --text-color14: #000000CC;
    --text-color15: #00000099;
    --text-color16: #66709F;
    --text-color17: #3258CE;
    --text-color18: #888888;
}

html {
    width: 100%;
}

/* ========== 大页面背景：淡蓝色 ========== */
body {
    font-size: 16px;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    color: #FFFFFFCC;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, Microsoft YaHei, Arial, sans-serif;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top left;
    background-color: #eef4ff; /* 最底层淡蓝色 */
}

#app {
    font-size: .24rem;
    position: relative;
    height: 100%;
    min-height: 100vh;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
}

a {
    text-decoration: none;
    color: var(--text-color4);
}

img {
    object-fit: cover;
}

.hidden {
    display: none;
}

.mb-4 {
    margin-bottom: .08rem;
}

/* ========== 顶部吸顶栏 ========== */
.my-sticky {
    position: sticky;
    top: 0;
    padding: 0 .16rem;
    background-color: #eef4ff;
    padding-top: var(--safe-top);
    z-index: 10;
}

.header-box {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.header-box .logo {
    display: flex;
    height: 1rem;
    padding: 0.2rem 0.1rem;
    font-size: .32rem;
    font-weight: 700;
    color: #252E78;
    align-items: center;
}

.header-box .biz-btn {
    background: linear-gradient(90deg, #F38400 0%, #00EAE1 100%);
    color: #fff;
    padding: .12rem .24rem;
    border-radius: .33rem;
    font-size: .24rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* ========== Tab 导航 ========== */
.nav-c {
    display: flex;
    justify-content: flex-start;
    height: .88rem;
    align-items: center;
    z-index: 100;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav-c::-webkit-scrollbar {
    display: none;
}

.nav-c .item {
    font-size: .28rem;
    color: #5F6A81;
    font-weight: 600;
    height: .46rem;
    line-height: .46rem;
    padding: 0 .2rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-c .item.active {
    font-weight: 700;
    color: #252E78;
}

.nav-c .item.active::after {
    content: "";
    display: block;
    width: 100%;
    height: 0.16rem;
    background: linear-gradient(90deg, #F38400 0%, #00EAE1 100%);
    border-radius: .08rem;
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: auto 100%;
}

/* ========== Banner 轮播（贴合内容区内壁） ========== */
.swiper-banner-top {
    margin-top: .04rem;
    margin-bottom: .06rem;
    padding: 0; /* 清除内边界 */
}

.swiper-banner-top .swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 300ms;
}

.swiper-banner-top .swiper-slide-next .banner-img,
.swiper-banner-top .swiper-slide-prev .banner-img {
    transform: scale(0.9);
    opacity: 0.7;
}

.swiper-banner-top .swiper-pagination-bullet {
    width: 0.08rem;
    height: 0.08rem;
}

.swiper-banner-top .swiper-pagination-bullet-active {
    width: .16rem !important;
    border-radius: .16rem;
    background-color: #aba0a6 !important;
}

.swiper-banner-mid {
    margin-top: .04rem;
    margin-bottom: .06rem;
    padding: 0; /* 清除内边界 */
}

.swiper-banner-mid .swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 300ms;
}

.swiper-banner-mid .swiper-slide-next .banner-img,
.swiper-banner-mid .swiper-slide-prev .banner-img {
    transform: scale(0.9);
    opacity: 0.7;
}

.swiper-banner-mid .swiper-pagination-bullet {
    width: 0.08rem;
    height: 0.08rem;
}

.swiper-banner-mid .swiper-pagination-bullet-active {
    width: .16rem !important;
    border-radius: .16rem;
    background-color: #aba0a6 !important;
}

.banner-img {
    width: 100%;
    border-radius: .2rem;
}

/* ========== 跑马灯 ========== */
.marquee-wrap {
    padding: .08rem 0;
}

.marquee-box {
    display: flex;
    align-items: center;
    padding: .1rem 0;
    color: #818CA1;
}

.marquee-box .notif {
    width: .32rem;
    height: .32rem;
    margin-left: 0;
    flex-shrink: 0;
}

.marquee-box .container-main {
    flex: 1;
    margin: 0 .15rem;
    font-size: .2rem;
    overflow: hidden;
}

.marquee-box p {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    font-size: .2rem;
    animation: vMarquee 10s linear infinite;
}

@keyframes vMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* ========== 内容区域：深一点的蓝色底板 + 与大背景拉开外边界 ========== */
.body-container {
    padding: 12px 10px;        /* 内容区内部维持基本内边距 */
    background-color: #dce6f9; /* 稍深的蓝 gray 底板 */
    margin: 0 10px;            /* 与 Body 保持边界间隔 */
    border-radius: .24rem;     /* 独立的大底板圆角 */
}

.swiper-c {
    margin: 0;
}

/* ========== 图标网格（内部分组取消内凹 padding） ========== */
.ad-item-wrap {
    border-radius: 10px;
    overflow: hidden;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-bottom: 10px;
}

.ad-item-conter {
    padding: 8px 0px; /* 直贴底板边缘 */
}

.grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 0.24rem;
    column-gap: 0.15rem;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.grid-item img {
    width: 1.68rem;
    min-height: 1.68rem;
    max-height: 1.68rem;
    border-radius: 0.2rem;
}

.grid-item .text {
    text-align: center;
    font-size: .24rem;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.jgg-load {
    display: none;
}

/* ========== 卡片列表 ========== */
.s-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem;
    padding: .16rem 0;
}

/* 卡片主容器：开启相对定位 */
.s-wrap .lf-g {
    border-radius: .2rem;
    display: flex;
    align-items: center;
    position: relative;
    background: #fff;
    overflow: hidden;         /* 强制裁剪多余边缘 */
    min-height: 1.2rem;
    padding: .1rem;
}

/* 1. 左侧 App 图标 */
.lf-g .lf-g-img {
    width: 1rem;
    height: 1rem;
    border-radius: 12px;
    z-index: 3;
    position: relative;
    margin-left: 0.05rem;
    flex-shrink: 0;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.18);
}

/* 2. 右侧文字与绝对定位容器 */
.lf-g-d {
    padding: .1rem .35rem .1rem .15rem; /* 右侧留 .35rem 避开箭头 */
    position: relative;
    width: 0;
    flex: 1;
    min-height: 1.0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 3. 背景 SVG：破框向左延伸，彻底拉满覆盖整张卡片 */
.lf-back {
    position: absolute !important;
    top: -0.1rem !important;
    bottom: -0.1rem !important;
    /* 核心修改：向左负偏移越过左侧图标区，向右拉满 */
    left: calc(-1.0rem - 0.2rem) !important; 
    width: calc(100% + 1.25rem + 0.35rem) !important;
    height: calc(100% + 0.2rem) !important;
    object-fit: fill !important;
    z-index: 0 !important;     /* 位于底层 */
    pointer-events: none;
}

/* 4. 文字防溢出与层级保障 */
.s-wrap .ad-name {
    font-weight: 700;
    font-size: .26rem;
    color: var(--text-color4);
    position: relative;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lf-g-load {
    color: var(--text-color6);
    font-size: .2rem;
    position: relative;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .04rem;
}

/* 5. 箭头图标：独立定位到整张卡片的绝对右侧 */
.go-icon {
    display: block;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 0.08rem !important;  /* 强行靠最右侧边缘，绝对不挤在中间 */
    width: .24rem !important;
    height: auto !important;
    z-index: 3 !important;      /* 保持在最顶层 */
    pointer-events: none;
}
/* ========== 直播区域（清除内层多余左右边距） ========== */
.live-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .22rem;
    padding: 0; /* 清除左右 Padding，贴合蓝底板边缘 */
}

.live-wrap .live-item {
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    position: relative;
    isolation: isolate;
}

.live-item .hot-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: .8rem;
    height: auto;
    z-index: 2;
    margin: 0;
    border-top-right-radius: 10px;
}

.live-wrap .live-item-img {
    width: 100%;
    height: 5.2rem;
    border-radius: 10px;
    border-width: 2px;
    border-color: #ffffff;
    border-style: solid;
    background: #fff;
    overflow: hidden;
}

.center-icon {
    position: absolute;
    bottom: .7rem;
    left: .12rem;
    transform: none;
    border-radius: .1rem;
    height: .44rem;
    line-height: .44rem;
    color: #fff;
    padding: 0 .12rem;
    white-space: nowrap;
    background: linear-gradient(90deg, #4581FF 0%, #959FFF 100%);
    font-size: .22rem;
    font-weight: 700;
    z-index: 1;
}

.bt-info {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    height: .6rem;
    padding: 0 .12rem;
    overflow: hidden;
    color: #33394A;
    font-size: .24rem;
    background: #ffffff;
    border-bottom-left-radius: .2rem;
    border-bottom-right-radius: .2rem;
}

.bt-info img {
    width: 0.24rem;
    height: 0.24rem;
    margin-right: 0.08rem;
}

.bt-info-left {
    color: #33394A;
    display: flex;
    align-items: center;
}

.bt-info-left .dian {
    width: .15rem;
    height: .15rem;
    border-radius: .15rem;
    background-color: #3E74F8;
    margin-right: .04rem;
    border-width: .05rem;
    border-color: #bfcfff;
    border-style: solid;
}

.bt-info-left .online-num {
    color: #3E74F8;
}

.bt-t {
    display: flex;
    align-items: center;
    gap: .06rem;
}

/* ========== 动态线条动画 ========== */
.wave-icon {
    display: inline-flex;
    align-items: flex-end;
    gap: .03rem;
    height: .24rem;
}

.wave-icon span {
    display: inline-block;
    width: .05rem;
    border-radius: .03rem;
    animation: waveAnim 1.0s ease-in-out infinite;
}

.wave-icon span:nth-child(1) { 
    height: .12rem; 
    background: linear-gradient(180deg, #FF007F 0%, #FF5E36 100%); 
    animation-delay: 0s; 
}
.wave-icon span:nth-child(2) { 
    height: .22rem; 
    background: linear-gradient(180deg, #FFD700 0%, #FF9500 100%); 
    animation-delay: 0.15s; 
}
.wave-icon span:nth-child(3) { 
    height: .16rem; 
    background: linear-gradient(180deg, #00FFCC 0%, #00B2FE 100%); 
    animation-delay: 0.3s; 
}
.wave-icon span:nth-child(4) { 
    height: .24rem; 
    background: linear-gradient(180deg, #7B2CBF 0%, #9D4EDD 100%); 
    animation-delay: 0.45s; 
}

@keyframes waveAnim {
    0%, 100% { transform: scaleY(0.3); opacity: 0.7; }
    50% { transform: scaleY(1.1); opacity: 1; }
}

.live-status-text {
    color: #00C853;
    font-size: .24rem;
    font-weight: normal;
}

/* ========== 底部版权 ========== */
.b1-footer {
    text-align: center;
    padding: .4rem .24rem;
    font-size: .22rem;
    color: #aaa;
    line-height: 1.6;
}

/* ========== 弹窗广告 ========== */
.popup-ad-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.popup-ad-box {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    border: 1px solid rgba(108, 92, 231, 0.3);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(108, 92, 231, 0.1);
    color: #ffffff;
    width: 85%;
    max-width: 340px;
    padding: 36px 28px 28px;
    text-align: center;
    position: relative;
    animation: popupSlideUp 0.4s ease;
}

@keyframes popupSlideUp {
    from { transform: translateY(40px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes pulse {
    0%,100% { transform: scale(1); box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4); }
    50% { transform: scale(1.03); box-shadow: 0 6px 25px rgba(108, 92, 231, 0.6); }
}

.popup-ad-icon {
    font-size: 48px;
    margin-bottom: 16px;
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.popup-ad-text {
    color: #e0e0e0;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
    padding: 0 4px;
}

.popup-ad-btn {
    display: inline-block;
    padding: 14px 40px;
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 16px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4);
    animation: pulse 2s infinite;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.popup-ad-btn:hover { 
    opacity: 0.9; 
    transform: translateY(-2px);
}

.popup-ad-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.popup-ad-close:hover { 
    color: #fff; 
    background: rgba(255,255,255,0.2);
}

@media (max-width: 768px) {
    .popup-ad-box { 
        width: 90%; 
        padding: 32px 24px 24px; 
    }
}