*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Roboto,sans-serif;}
html,body{background:#f0f2f7;color:#222;}
body{
    padding:clamp(6px,1.5vw,8px);
    max-width:clamp(580px,90vw,720px);
    margin:0 auto;
}

.main-title{
    text-align:center;
    font-size:clamp(20px,4vw,24px);
    font-weight:bold;
    margin:clamp(8px,2vw,10px) 0 clamp(14px,3vw,18px);
    color:#111;
}

/* =========轮播图样式========= */
.banner-wrap{
    width:100%;
    height:clamp(140px,32vw,200px);
    border-radius:16px;
    overflow:hidden;
    position:relative;
    margin-bottom:12px;
    background:#ddd;
}
.banner-list{
    width:100%;
    height:100%;
    display:flex;
    transition:transform 0.4s ease;
}
.banner-item{
    flex:0 0 100%;
    height:100%;
}
.banner-item a{
    display:block;
    width:100%;
    height:100%;
}
.banner-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* 轮播小圆点 */
.banner-dots{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
}
.banner-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,0.45);
}
.banner-dot.active{
    background:#fff;
}

/* 公告栏横向滚动 */
.notice-box{
    background:#ffffff;
    border-radius:14px;
    padding:12px 16px;
    margin-bottom:10px;
    box-shadow:0 1px 3px #e5e9f2;
    color:#e08800;
    font-size:clamp(12px,2.8vw,14px);
    line-height:1.6;
    overflow:hidden;
    position:relative;
}
.notice-scroll-wrap{
    overflow:hidden;
    white-space:nowrap;
}
.notice-scroll-text{
    display:inline-block;
    animation:scrollText 18s linear infinite;
    padding-left:100%;
    white-space:nowrap;
}
@keyframes scrollText{
    0%{transform:translateX(0);}
    100%{transform:translateX(-100%);}
}

.info-bar{
    background:#ffffff;
    border-radius:14px;
    padding:12px;
    margin-bottom:14px;
    box-shadow:0 1px 3px #e5e9f2;
}
.info-bar p{
    font-size:clamp(12px,2.8vw,14px);
    margin:4px 0;
}
.info-bar strong{
    color:#2766dd;
}

.section-title{
    font-size:clamp(16px,3.5vw,18px);
    font-weight:bold;
    margin:6px 0 10px;
    display:flex;
    align-items:center;
    gap:6px;
}

/* APP卡片：图标标题同行布局 */
.app-card{
    background:#fff;
    border-radius:22px;
    padding:clamp(16px,2.5vw,20px);
    margin-bottom:12px;
    box-shadow:0 1px 4px #e5e9f2;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.app-card-top{
    display:flex;
    align-items:center;
    gap:14px;
}
.app-icon{
    width:clamp(64px,12vw,80px);
    height:clamp(64px,12vw,80px);
    border-radius:14px;
    object-fit:cover;
    flex-shrink:0;
    background:#eee;
}
.app-name{
    flex:1;
    font-size:clamp(18px,4vw,28px);
    font-weight:bold;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.star{
    color:#ffbc00;
    font-size:clamp(18px,3.5vw,22px);
    white-space:nowrap;
}
.app-desc{
    font-size:clamp(14px,2.6vw,16px);
    color:#666;
    line-height:1.7;
    padding:0 4px;
}

/* =========重点：一行三个按钮布局========= */
.btn-group{
    display:flex;
    gap:18px;
    width:100%;
}
.btn-group > *{
    flex:1;
    text-align:center;
    border-radius:999px;
    padding:13px 6px;
    font-size:clamp(14px,2.7vw,16px);
    border:none;
    white-space:nowrap;
}
.code-btn{
    background:#ffe8bc;
    color:#b05000;
}
.download-btn{
    background:linear-gradient(90deg,#5864f0,#825cfa);
    color:#fff;
    cursor:pointer;
}
.download-btn:active{
    background:linear-gradient(90deg,#4852d8,#7049e3);
}
.buy-btn{
    background:#f27c22;
    color:#fff;
    text-decoration:none;
}
.buy-btn:active{
    background:#dd7610;
}

/* 状态圆形图标 */
.status-circle-ok{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#22bb66;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}
.status-circle-err{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#ee4444;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

/* 弹窗 */
.mask{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:10px;
}
.pop-box{
    width:100%;
    max-width:420px;
    background:#f3f4f6;
    border-radius:18px;
    overflow:hidden;
}
.pop-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    background:#ffffff;
}
.pop-title{
    font-size:15px;
    font-weight:bold;
}
.pop-close{
    font-size:22px;
    color:#999;
    cursor:pointer;
    line-height:1;
}
.pop-inner{
    padding:14px;
}
.pop-tip-text{
    font-size:15px;
    margin-bottom:10px;
}
.status-switch-row{
    display:flex;
    gap:16px;
    margin-bottom:14px;
    font-size:14px;
}
.ok-label{
    color:#22bb66;
    display:flex;
    align-items:center;
    gap:4px;
}
.err-label{
    color:#ee4444;
    display:flex;
    align-items:center;
    gap:4px;
}

.link-item{
    background:#ffffff;
    border-radius:12px;
    padding:12px;
    margin-bottom:8px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    position:relative;
}
.link-left{
    flex:1;
    padding-right:40px;
}
.link-name{
    font-size:16px;
    margin-bottom:4px;
}
.link-url{
    font-size:13px;
    color:#2766dd;
    word-break:break-all;
    line-height:1.5;
}
.link-status{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

.bottom-note{
    background:#ffffff;
    border-radius:12px;
    padding:12px;
    margin-top:8px;
    font-size:14px;
    line-height:1.6;
}
.bottom-note small{
    font-size:12px;
    color:#888;
}

.toast{
    display:none;
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.75);
    color:#fff;
    padding:8px 16px;
    border-radius:6px;
    z-index:10000;
    font-size:13px;
}

.footer{
    margin-top:32px;
    padding:10px;
    text-align:center;
    color:#777;
    font-size:clamp(10px,2.5vw,11px);
    line-height:1.8;
}

/* =========右侧竖排悬浮在线客服========= */
/* =========右侧竖排悬浮在线客服========= */
.float-service{
    /* 固定悬浮定位 */
    position:fixed;
    /* 贴紧页面右侧边缘 */
    right:clamp(0px,1vw,0px);
    /* 距离底部自适应距离，不会贴底 */
    bottom:clamp(100px,15vw,140px);
    /* 层级，保证悬浮在内容上方 */
    z-index:998;
}
.service-link{
    /* flex布局，内部元素居中 */
    display:flex;
    align-items:center;
    justify-content:center;
    /* 宽度自适应：最小38px，最大44px，随屏幕缩放 */
    width:clamp(30px,6vw,30px);
    /* 上下内边距自适应 */
    padding:clamp(15px,2vw,16px) 6px;
    /* 纯色蓝色背景（原本渐变注释作废） */
    /* background:linear-gradient(135deg,#5864f0,#825cfa);*/
    background:linear-gradient(135deg,#1969f2,#1969f2);
    color:#fff;
    /* 清除a标签默认下划线 */
    text-decoration:none;
    /* border-radius:12px 0 0 12px;  移除原有圆角 */
    border-radius: 0;
    /* 阴影美化 */
    box-shadow:0 4px 18px rgba(88, 100, 240, 0.38);
    /* hover动画过渡时长与缓动 */
    transition:0.22s ease all;
}
/* 鼠标悬浮样式 */
.service-link:hover{
    /* 向左偏移产生弹出效果 */
    transform:translateX(-5px);
    /* 悬浮加深阴影 */
    box-shadow:0 6px 22px rgba(88, 100, 240, 0.46);
}
/* 点击按下样式 */
.service-link:active{
    /* 点击轻微透明 */
    opacity:0.88;
}
.service-text{
    /* 字体大小自适应，最小12px最大15px */
    font-size:clamp(12px,2.8vw,15px);
    font-weight:500;
    /* 文字竖排（从上到下） */
    writing-mode:vertical-rl;
    /* 文字字间距 */
    letter-spacing:2px;
}

/* =========手机自适应========= */
@media(max-width:480px){
    .app-card{
        flex-direction:column;
    }
    .app-icon{
        width:50px;
        height:50px;
    }
    .pop-box{
        max-width:100%;
    }
    .btn-group{
        gap:8px;
    }
    .btn-group > *{
        padding:6px 2px;
        font-size:13px;
    }
}