/*==================================================
                RESET
==================================================*/

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

html,
body{

    width:100%;
    height:100%;

}

body{

    position:relative;

    overflow-x:hidden;

    min-height:100vh;

    background:#000;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;

    color:#fff;

}

/*==================================================
                Background
==================================================*/

.bg{

    position:fixed;

    inset:0;

    z-index:0;

    background:

    #000 center center / cover no-repeat;

    background-image:url("../../img/bj.jpg?v=202607081900");

}

/*==================================================
                Main Stage
==================================================*/

.stage{

    position:relative;

    width:100%;

    min-height:100vh;

    z-index:2;

}

/*==================================================
                Top Left
==================================================*/

.btn-top-left{

    position:absolute;

    left:18px;

    top:22px;

    width:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;

}

.btn-top-left img{

    width:100%;

    display:block;

}

/*==================================================
                Top Right
==================================================*/

.btn-top-right{

    position:absolute;

    right:18px;

    top:22px;

    width:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;

}

.btn-top-right img{

    width:100%;

    display:block;

}

/*==================================================
                Logo
==================================================*/

.logo{

    position:absolute;

    left:50%;

    top:36px;

    transform:translateX(-50%);

    width:min(56vw,490px);

    display:block;

    z-index:5;

}

/*==================================================
                Bottom Text
==================================================*/

.disclaimer{

    position:absolute;

    left:50%;

    bottom:58px;

    transform:translateX(-50%);

    width:90%;

    max-width:760px;

    text-align:center;

    line-height:1.6;

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

    font-size:12px;

    letter-spacing:.4px;

    z-index:5;

}

/*==================================================
                ScrollBar
==================================================*/

::-webkit-scrollbar{

    width:0;

    height:0;

}

*{

    scrollbar-width:none;

}

/*==================================================
                Desktop
==================================================*/

@media (min-width:1024px){

    :root{

        --phone-width:500px;

        --phone-height:calc(var(--phone-width) * 1920 / 1080);

    }

    body{

        display:flex;

        justify-content:center;

        align-items:flex-start;

        overflow-y:auto;

    }

    .bg{

        position:absolute;

        left:50%;

        top:0;

        transform:translateX(-50%);

        width:var(--phone-width);

        height:var(--phone-height);

        background-size:cover;

        background-position:center top;

    }

    .stage{

        width:var(--phone-width);

        min-height:var(--phone-height);

    }

    .logo{

        width:265px;

        top:28px;

    }

    .btn-top-left{

        left:16px;

        top:18px;

        width:48px;

    }

    .btn-top-right{

        right:16px;

        top:18px;

        width:43px;

    }

    .disclaimer{

        width:82%;

        bottom:48px;

    }

}

/*==================================================
                Tablet
==================================================*/

@media (min-width:768px) and (max-width:1023px){

    .logo{

        width:46vw;

    }

    .btn-top-left{

        width:54px;

    }

    .btn-top-right{

        width:50px;

    }

}

/*==================================================
                Mobile
==================================================*/

@media (max-width:767px){

    .logo{

        width:54vw;

        max-width:280px;

    }

    .btn-top-left{

        width:44px;

        left:14px;

        top:26px;

    }

    .btn-top-right{

        width:40px;

        right:14px;

        top:30px;

    }

    .disclaimer{

        width:88%;

        font-size:11px;

        line-height:1.5;
        
        bottom:100px;

    }

}

/*==================================================
                Button Group
==================================================*/

.btn-group{

    position:absolute;

    left:50%;

    top:63.8vh;

    transform:translateX(-50%);

    width:72%;

    max-width:360px;

    display:flex;

    flex-direction:column;

    gap:14px;

    z-index:10;

}

/*==================================================
                Liquid Button
==================================================*/

.glass-btn{

    position:relative;

    display:flex;

    align-items:center;

    gap:16px;

    width:100%;

    height:72px;

    padding:0 18px;

    overflow:hidden;

    border-radius:24px;

    text-decoration:none;

    color:#fff;

    background:rgba(255,255,255,.001);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:

    0 8px 24px rgba(0,0,0,.16),

    0 1px 0 rgba(255,255,255,.08) inset;

    transition:

        transform .2s ease,

        background .2s ease,

        box-shadow .2s ease;

}

/* 顶部高光 */
.glass-btn::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.22) 0%,

        rgba(255,255,255,.08) 18%,

        rgba(255,255,255,0) 45%

    );

    pointer-events:none;

}

.glass-btn::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.22) 0%,

        rgba(255,255,255,.08) 18%,

        rgba(255,255,255,0) 45%

    );

    pointer-events:none;

}

@keyframes btnLight{

    0%{

        transform:translateX(-220%) rotate(25deg);

    }

    100%{

        transform:translateX(360%) rotate(25deg);

    }

}


/* Hover */

.glass-btn:hover{

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.24),

        rgba(255,255,255,.06)

    );

    transform:

    translateY(-1px)

    scale(1.01);

}

/* Click */

.glass-btn:active{

    transform:scale(.985);

}

/*==================================================
                Icon
==================================================*/

.glass-btn-icon{

    width:46px;

    height:46px;

    flex:none;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

    background:

    linear-gradient(

    180deg,

    rgba(255,255,255,.12),

    rgba(255,255,255,.05)

    );

    border:1px solid rgba(255,255,255,.18);

}

.glass-btn-icon svg{

    width:24px;

    height:24px;

    color:#fff;

}

/*==================================================
                Text
==================================================*/

.glass-btn-text{

    position:absolute;

    left:53%;

    top:50%;

    transform:translate(-50%,-50%);

    width:220px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.glass-btn-text strong{

    display:block;

    font-size:20px;

    font-weight:700;

    line-height:1;

    color:#fff;

}

.glass-btn-text small{

    display:block;

    margin-top:6px;

    font-size:11px;

    line-height:1;

    color:rgba(255,255,255,.60);

    letter-spacing:1.5px;

    text-transform:uppercase;

}

/* 注册按钮 */

.glass-btn-primary{

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.08),

        rgba(255,255,255,.015)

    );

}

/* 下载按钮 */

.glass-btn-download{

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.06),

        rgba(255,255,255,.012)

    );

}

/*==================================================
                    Route Modal
==================================================*/

.rmodal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:18px;

}

.rmodal.is-open{

    display:flex;

}

body.rmodal-open{

    overflow:hidden;

}

/*=========================
        Backdrop
=========================*/

.rmodal__backdrop{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.42);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

}
/*=========================
        Dialog
=========================*/

.rmodal__dialog{

    position:relative;

    width:min(92vw,390px);

    border-radius:34px;

    overflow:visible;

    background:transparent;

    border:none;

    box-shadow:none;

    backdrop-filter:none;

    -webkit-backdrop-filter:none;

}

/*=========================
        Close
=========================*/

.rmodal__close{

    position:absolute;

    top:12px;

    right:12px;

    z-index:100;

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    color:#fff;

    font-size:22px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.2s;

}

.rmodal__close:hover{

    background:rgba(255,255,255,.16);

}

/*=========================
        Header
=========================*/

/*=========================
        Header
=========================*/

/*=========================
        Banner
=========================*/

.route-head{

    position:relative;

    height:170px;

    margin-bottom:-25px;

    z-index:1;

}

.route-banner{

    position:absolute;

    right:-23px;

    top:18px;

    width:370px;

    max-width:none;

    z-index:2;

    pointer-events:none;

    user-select:none;

}

.route-title{

    position:absolute;

    left:34px;

    top:80px;

    z-index:5;

    width:160px;

}

.route-title h2{

    font-size:16px;

    font-weight:700;

    line-height:1.2;

    background:linear-gradient(
        90deg,
        #ffffff 0%,
        #fff7ee 25%,
        #ffc77a 65%,
        #ff8f1f 100%
    );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    color:transparent;

    text-shadow:
        0 2px 12px rgba(255,143,31,.22);

}

.route-title p{

    margin-top:8px;

    font-size:13px;

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

    line-height:1.5;

}
/*=========================
        List
=========================*/

.route-list{

    position:relative;

    margin-top:-6px;

    padding:

        20px

        18px

        18px;

    border-radius:28px;

    background:rgba(255,255,255,.015);

    border:1.8px solid rgba(255,255,255,.30);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(24px);

    box-shadow:

        0 18px 40px rgba(0,0,0,.18);

    z-index:3;

}

/*=========================
        Item
=========================*/

.route-item{

    display:grid;
    
    min-height:48px;

    grid-template-columns:58px 1fr 54px 58px;

    align-items:center;

    gap:12px;

}

.route-speed{

    width:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    font-size:12px;

    font-weight:600;

    color:#fff;

}

.route-speed::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#4f7dff;

}

.route-speed.loading::before{

    animation:speedLoading .8s linear infinite;

}

@keyframes speedLoading{

    0%{

        transform:scale(.7);

        opacity:.4;

    }

    50%{

        transform:scale(1.25);

        opacity:1;

    }

    100%{

        transform:scale(.7);

        opacity:.4;

    }

}

.route-speed.good::before{

    background:#2ed573;

}

.route-speed.normal::before{

    background:#ffb400;

}

.route-speed.bad::before{

    background:#ff5b5b;

}



.route-item:last-child{

    border-bottom:none;

}



/*=========================
        Route Tag
=========================*/

.route-tag{

    display:flex;

    justify-content:center;

    align-items:center;

    width:52px;

    height:22px;

    border-radius:999px;

    background:rgba(255,255,255,.10);

    color:#fff;

    font-size:11px;

    font-weight:600;

}

/*=========================
        Meta
=========================*/

.route-meta{

    display:flex;

    align-items:center;

    gap:8px;

    min-width:0;

}

.route-flag{

    width:18px;

    height:18px;

    border-radius:50%;

    flex:none;

}

.route-name{

    color:#fff;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/*=========================
        Enter
=========================*/

.route-enter{

    width:58px;

    height:26px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-size:11px;

    font-weight:700;

    background:linear-gradient(
    90deg,
    #ff9800 0%,
    #4f7dff 100%
    );

    border:none;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    transition:.2s;

}

.route-enter:hover{

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.24),

        rgba(255,255,255,.08)

    );

}

.route-enter:active{

    transform:scale(.96);

}

/*==================================================
                Responsive
==================================================*/

@media (max-width:768px){

    .btn-group{

        width:72vw;

        max-width:none;

        gap:12px;
        
        top:62vh;

    }

    .glass-btn{

        height:64px;

        padding:0 18px;

        border-radius:22px;

    }

    .glass-btn-icon{

        width:42px;

        height:42px;

        border-radius:14px;

    }

    .glass-btn-icon svg{

        width:22px;

        height:22px;

    }

    .glass-btn-text strong{

        font-size:18px;

    }

    .glass-btn-text small{

        font-size:10px;

    }

    .rmodal{

        padding:16px;

    }

    .rmodal__dialog{

        width:100%;

        max-width:350px;

        border-radius:24px;

    }

    .route-head{

        padding:18px 16px 12px;

    }

    .route-head h2{

        font-size:16px;

    }

    .route-head p{

        font-size:12px;

    }

    .route-list{

        padding:0 14px 14px;

        gap:7px;

    }

    .route-item{

        grid-template-columns:58px 1fr 54px 58px;

        height:44px;

        padding:0 8px;

    }

    .route-tag{

        width:46px;

        height:20px;

        font-size:10px;

    }

    .route-flag{

        width:16px;

        height:16px;

    }

    .route-name{

        font-size:13px;

    }

    .route-enter{

        width:54px;

        height:24px;

        font-size:10px;

        border-radius:12px;

    }

    .route-banner{

        width:350px;

    }
    
    .route-banner{

    width:355px;

    right:-20px;

    top:22px;

    }

}

@media (min-width:1024px){

    .btn-group{

        width:360px;

        top:63.5%;

    }

    .glass-btn{

        height:70px;

    }

    .rmodal__dialog{

        width:360px;

    }

}

/*==================================================
                Animation
==================================================*/

.glass-btn,
.route-item,
.route-enter,
.rmodal__dialog{

    transition:

    background .25s ease,

    border-color .25s ease,

    box-shadow .25s ease,

    transform .18s ease;

}

.glass-btn:focus,
.route-enter:focus{

    outline:none;

    border-color:rgba(255,255,255,.24);

}

img{

    user-select:none;

    -webkit-user-drag:none;

}

a{

    -webkit-tap-highlight-color:transparent;

}

/*==================================================
            Favorite Modal
==================================================*/

.fmodal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:10000;

    padding:18px;

}

.fmodal.is-open{

    display:flex;

}

.fmodal__backdrop{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

}

.fmodal__dialog{

    position:relative;

    width:min(92vw,360px);

    border-radius:28px;

    overflow:hidden;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.16);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.35);

}

.fmodal__close{

    position:absolute;

    top:14px;

    right:14px;

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    color:#fff;

    font-size:20px;

    cursor:pointer;

}

.fmodal__head{

    padding:26px 24px 10px;

    text-align:center;

}

.fmodal__head h2{

    font-size:24px;

    font-weight:700;

    background:linear-gradient(
        90deg,
        #ffffff,
        #d6b3ff,
        #8b5cff
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.fmodal__head p{

    margin-top:8px;

    color:rgba(255,255,255,.68);

    font-size:13px;

}

.fmodal__content{

    padding:18px 24px;

}

.favorite-step{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

}

.favorite-step:last-child{

    margin-bottom:0;

}

.favorite-num{

    width:28px;

    height:28px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #8b5cff,
        #5b8cff
    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    font-weight:700;

    color:#fff;

    flex:none;

}

.favorite-text{

    color:#fff;

    font-size:14px;

    line-height:1.6;

}

.favorite-btn{

    width:calc(100% - 32px);

    margin:0 16px 16px;

    height:48px;

    border:none;

    border-radius:16px;

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    background:linear-gradient(
        90deg,
        #8b5cff,
        #4f7dff
    );

}