/* =====================================================
   28预测之家 - 主样式
   Mobile First
   固定背景 + 内容滚动版
===================================================== */


/* =========================
   基础重置
========================= */


*{

    box-sizing:border-box;

    margin:0;

    padding:0;

}



html,
body{


    width:100%;


    min-height:100%;


}



body{


    background:#050a30;


    font-family:

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    "Microsoft YaHei",

    Arial,

    sans-serif;


    -webkit-font-smoothing:antialiased;


    overflow-x:hidden;


}





/* =========================
   数字字体
========================= */


@font-face{


    font-family:"myDin";


    src:url("./font/din-bold.ttf")

    format("truetype");


    font-display:swap;


}








/* =====================================================
   主容器
   内容滚动
   背景独立固定
===================================================== */


.main{


    position:relative;



    width:100%;



    max-width:480px;



    min-height:100vh;


    min-height:100dvh;



    margin:auto;




    padding:

    max(24px,env(safe-area-inset-top))

    16px

    max(24px,env(safe-area-inset-bottom))

    16px;





    display:flex;



    flex-direction:column;



    align-items:center;





    overflow:visible;



}






/* =====================================================
   固定背景层
===================================================== */


.main::before{


    content:"";



    position:fixed;



    top:0;



    left:50%;



    transform:translateX(-50%);





    width:100%;



    max-width:480px;





    height:100vh;



    height:100dvh;






    background:


    url("./img/bg.png")

    center center

    /

    cover

    no-repeat;




    background-color:#050a30;





    z-index:-1;



}








/* =========================
   标题图片
========================= */


.title_img{



    width:min(75vw,280px);



    height:auto;




    display:block;





    margin:

    0 auto

    clamp(16px,4vw,24px);




    user-select:none;



}






/* =========================
   空白区域
========================= */


.spacer{


    flex:none;


    height:20px;


}








/* =====================================================
   域名区域
===================================================== */


.domains{


    width:100%;



    display:grid;



    grid-template-columns:

    repeat(2,1fr);




    gap:10px;




    margin-bottom:18px;



}





.domains p{



    height:40px;



    line-height:40px;



    text-align:center;




    border-radius:25px;





    background:

    rgba(255,255,255,.58);





    border:

    1px solid

    rgba(255,255,255,.8);





    box-shadow:


    0 3px 10px

    rgba(0,0,0,.15);





    font-family:"myDin";





    font-size:


    clamp(13px,3.6vw,18px);





    font-weight:900;





    white-space:nowrap;



    overflow:hidden;



    text-overflow:ellipsis;



}





.domains .red{


    color:#ff2525;


}





.suffix{


    font-weight:900;


}



.suffix-com{


    color:#0057d8;


}



.suffix-cc{


    color:#ff8a00;


}

/* =====================================================
   主面板
===================================================== */


.panel{


    width:100%;



    flex:none;





    padding:

    18px

    16px

    20px;





    border-radius:18px;





    background:


    rgba(255,255,255,.72);






    border:


    1px solid

    rgba(255,255,255,.55);






    backdrop-filter:


    blur(12px);





    -webkit-backdrop-filter:


    blur(12px);






    box-shadow:


    0 10px 30px

    rgba(0,0,0,.25);





}




/* 不支持毛玻璃 */

@supports not ((backdrop-filter:blur(1px))){



.panel{


    background:


    rgba(255,255,255,.92);



}



}








/* =========================
   面板标题
========================= */


.panel-title{


    display:flex;



    justify-content:space-between;



    align-items:center;



    flex-wrap:wrap;





    gap:8px;




    margin-bottom:12px;





    color:#0b2a6b;





    font-size:


    clamp(16px,4vw,18px);





    font-weight:900;



}





.panel-title small{



    padding:


    4px

    10px;





    border-radius:20px;





    color:#fff;





    font-size:12px;





    background:


    linear-gradient(

    135deg,

    #3ba0ff,

    #0057d8

    );





}









/* =====================================================
   提示框
===================================================== */


.hint{


    display:flex;



    align-items:center;



    gap:8px;





    margin-bottom:14px;





    padding:


    8px

    12px;






    border-radius:10px;





    background:#fff4d6;





    border:


    1px solid #ffd666;





    color:#8a5a00;





    font-size:13px;





    font-weight:700;



}



.hint .ico{


    flex:none;



    font-size:16px;



}









/* =====================================================
   线路列表
===================================================== */


.line-list{


    width:100%;



    display:flex;



    flex-direction:column;





    gap:10px;





    max-height:none;





    overflow:visible;



}








/* 删除内部滚动条 */

/*

.line-list::-webkit-scrollbar{

}

*/




/* =====================================================
   线路卡片
===================================================== */


.line-item{


    width:100%;





    display:flex;



    align-items:center;





    gap:10px;






    padding:


    12px

    14px;






    border-radius:14px;






    border:


    1px solid #e6e6e6;






    background:#fff;







    cursor:pointer;






    transition:


    transform .18s ease,

    box-shadow .18s ease;






}






.line-item:hover{


    box-shadow:


    0 5px 15px

    rgba(0,0,0,.12);



}





.line-item:active{


    transform:scale(.97);



}







.line-disabled{


    opacity:.45;



    cursor:not-allowed;



}








/* 排名 */

.line-rank{


    flex:none;





    width:24px;





    height:24px;





    line-height:24px;






    text-align:center;





    border-radius:50%;






    color:#fff;






    background:#b9c2cc;






    font-family:"myDin";





    font-size:12px;





}









/* 名称 */


.line-name{


    flex:1;



    min-width:0;






    color:#333;





    font-size:14px;





    font-weight:700;






    overflow:hidden;





    text-overflow:ellipsis;





    white-space:nowrap;



}








.line-name .tag-best{



    display:inline-block;



    margin-left:5px;






    padding:


    2px

    7px;






    border-radius:8px;






    color:#fff;






    background:#16a34a;






    font-size:11px;





}

/* 状态 */
.line-status{


    display:flex;



    align-items:center;





    white-space:nowrap;





    font-family:"myDin";





    font-size:13px;





}








.dot{


    width:8px;



    height:8px;





    margin-right:6px;





    border-radius:50%;



}








/* 状态颜色 */

.st-green{


    color:#16a34a;



}


.st-green .dot{


    background:#16a34a;



}







.st-yellow{


    color:#d97706;



}


.st-yellow .dot{
    background:#d97706;
}
.st-red{
    color:#dc2626;



}


.st-red .dot{


    background:#dc2626;



}








/* 最快线路 */


.line-fastest{


    border:


    2px solid #16a34a;





    background:


    linear-gradient(

    90deg,

    #d6ffe6,

    #fff

    );





}

/* =====================================================
   按钮区域
===================================================== */


.btns{


    width:100%;



    display:flex;



    flex-direction:column;





    gap:12px;





    margin-top:16px;



}








.btn-primary,
.btn-secondary{


    display:block;





    width:100%;






    height:46px;





    line-height:46px;






    text-align:center;






    border-radius:24px;







    color:#fff!important;







    font-family:"myDin";






    font-size:16px;







    text-decoration:none;






    font-weight:900;






    user-select:none;






    transition:.2s ease;






    cursor:pointer;






}







.btn-primary:active,
.btn-secondary:active{


    transform:scale(.96);



}







/* 主按钮 */

.btn-primary{


    background:


    linear-gradient(

    180deg,

    #4aa3ff,

    #003bd8

    );





    box-shadow:


    0 5px 15px

    rgba(0,61,216,.35);



}








/* 下载按钮 */

.btn-secondary{


    background:


    linear-gradient(

    180deg,

    #ffc13b,

    #d72020

    );





    box-shadow:


    0 5px 15px

    rgba(215,32,32,.3);



}







/* 禁用按钮 */


.btn-disabled{


    background:#b9c2cc!important;



    box-shadow:none;



    cursor:not-allowed;



}









/* =====================================================
   小屏手机优化
===================================================== */


@media(max-height:700px){



.main{


    padding-top:16px;



}




.title_img{


    margin-bottom:10px;



}





.spacer{


    height:10px;



}




.domains{


    gap:6px;



    margin-bottom:10px;



}





.domains p{


    height:32px;



    line-height:32px;



}





.panel{


    padding:

    14px;



}







.line-item{


    padding:

    9px

    12px;



}







.btns{


    gap:8px;



}






.btn-primary,
.btn-secondary{


    height:40px;



    line-height:40px;



}



}









/* =====================================================
   超矮屏手机
===================================================== */


@media(max-height:560px){





.title_img{


    width:220px;



}





.domains{


    display:flex;



    overflow-x:auto;



    width:100%;



}






.domains p{


    flex:none;



    padding:

    0

    14px;



}





.panel{


    border-radius:14px;



}





.line-item{


    padding:

    8px

    10px;



}




.line-rank{


    width:22px;



    height:22px;



    line-height:22px;



}






.line-list{


    gap:6px;



}





}









/* =====================================================
   横屏适配
===================================================== */


@media screen and (orientation:landscape){



.main{


    min-height:100vh;



}



}









/* =====================================================
   防止苹果点击高亮
===================================================== */


a,
button,
.line-item{


    -webkit-tap-highlight-color:transparent;



}






/* =====================================================
   图片防拖动
===================================================== */


img{


    -webkit-user-drag:none;



    user-select:none;



}