/*全局初始化：清除默认内外边距，盒模型统一，设置默认字体*/
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Roboto,sans-serif;}
/*html与body背景色，基础文字颜色*/
html,body{background:#f0f2f7;color:#222;}
body{
    padding:clamp(6px,1.5vw,8px);          /*页面左右内边距自适应*/
    max-width:clamp(580px,90vw,720px);     /*body最大宽度限制，大屏不会过宽*/
    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%;                          /*每一张轮播占满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{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    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;                        /*行高*/
    width: 100%;
    box-sizing: border-box;
}
.notice-icon{
    flex-shrink: 0; /*图标固定，不被挤压*/
    font-size:13px;
    line-height: 1;
}
.notice-scroll-wrap{
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.notice-scroll-text{
    white-space: nowrap;
    animation: scrollNotice 18s linear infinite;
}
@keyframes scrollNotice {
    0% {transform: translateX(100%);}
    100% {transform: translateX(-100%);}
}
/* 鼠标悬停暂停滚动 */
.notice-scroll-wrap:hover .notice-scroll-text{
    animation-play-state: paused;
}

.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);          /*卡片内边距：最小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(50px,12vw,50px);              /*图标宽度：最小64px，随屏幕12vw缩放，最大80px*/
    height:clamp(50px,12vw,50px);             /*图标高度，保持正方形*/
    border-radius:14px;                       /*图标圆角*/
    object-fit:cover;                         /*图片填满盒子，不变形拉伸*/
    flex-shrink:0;                            /*禁止图标被挤压缩小*/
    background:#eee;                          /*图片加载失败时灰色占位背景*/
}
.app-name{
    flex:1;                                   /*标题区域自动占满剩余宽度*/
    font-size:clamp(18px,4vw,28px);           /*APP名称字号自适应*/
    font-weight:bold;                         /*字体加粗*/
    display:flex;                             /*app名称与星级横向排列*/
    align-items:center;                       /*文字和星星垂直居中对齐*/
    gap:8px;                                  /*app名称文字和星星之间间隔*/
    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:8px 5px;                         /*按钮上下、左右内边距，控制按钮高度*/
    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:linear-gradient(90deg,#ff3c44,#ff9c21);                       /*官方发卡按钮橙色背景*/
    color:#fff;                                /*发卡按钮白色文字*/
    text-decoration:none;                      /*清除a标签默认下划线*/
}
.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;                                /*上下左右全部贴边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%);         /*toast完全屏幕居中*/
    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 3px;                /*手机按钮内边距缩小，按钮变矮*/
        font-size:13px;                  /*手机按钮文字缩小*/
    }
}

/*全局再次重置盒模型与边距，兼容部分浏览器*/
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
body{
    padding-bottom:75px !important;    /*给底部固定导航预留底部空白，防止页面被遮挡*/
}
.bottom-nav {
    position: fixed;                    /*底部导航固定在页面最底部*/
    left: 0;
    right: 0;
    bottom: 0;
    height:75px;                        /*导航栏高度*/
    background: #ffffff;
    display: flex;
    z-index: 999;                       /*层级高于普通页面内容，低于弹窗*/
    border-top: 1px solid #eee;         /*导航栏上边框分割线*/
}
.nav-item {
    flex: 1;
    width: 25%;                         /*4个导航，每个占25%宽度*/
    height:100%;
    display:flex;
    flex-direction:column;             /*图标在上，文字在下垂直排列*/
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#868686;                      /*未激活导航灰色*/
    font-size:13px;
}
.nav-item.active{
    color:#0066dd;                      /*当前页面导航高亮蓝色*/
}
.nav-svg{
    width:22px;
    height:22px;
    margin-bottom:5px;                  /*svg图标和下方文字间距*/
}
/* 底部留出90px空白，防止页面内容被固定底部导航遮挡 */
body {
    padding-bottom:90px !important;
}

/*手机端不做限制，直接100%宽度；仅电脑大屏启用固定max-width*/
.main-wrap{
    margin:0 auto;
    padding:1px;
}
@media(min-width: 768px){
    .main-wrap{
        max-width:630px;               /*大屏内容容器最大宽度*/
    }
}

/*底部导航栏：仅电脑端最大宽度630px居中；手机全屏*/
.bottom-nav{
    width:100%;
}
@media(min-width: 768px){
    .bottom-nav{
        max-width:630px;               /*电脑端导航最大宽度和内容对齐*/
        left:50%;
        transform:translateX(-50%);    /*导航栏整体水平居中*/
    }
}
/* 卡片容器：作为新品标签的定位参照物 */
.app-card {
    position: relative !important;
    overflow: visible !important;
}

/* 右上角新品标签样式 */
.new-tag-corner {
    position: absolute; /* 绝对定位，脱离文档流，自由摆放位置 */
    top: -1px;        /* 向上偏移10px，让标签上半部分探出卡片顶部 */
    right: 25px;       /* 距离卡片右侧向内30px，控制标签左右位置 */
    background-color: #4f6ef7; /* 标签蓝色背景色 */
    color: #ffffff;    /* 文字白色 */
    font-size: 11px;   /* 文字字号大小 */
    font-weight: bold; /* 文字加粗，和截图粗体效果匹配 */
    padding: 2px 10px 4px;/* 上下内边距7px、左右内边距16px，控制标签整体宽窄高矮 */
    border-radius: 0 0 8px 8px; /* 圆角：左上0、右上0、左下18px、右下18px，只做底部圆角 */
    z-index: 999;      /* 层级拉高，保证标签不会被其他元素遮挡 */
}