*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    min-height:100%;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;
    color:#222;
}

/* =========================
   电脑端登录页面
========================= */

.pc-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:url(/images/1V4o0zhQPN_src.jpg);
    background-size:cover;
}

.login-card{
    position:relative;
    width:min(380px,calc(100vw - 32px));
    padding:32px 28px 28px;
    text-align:center;
    background:rgba(25,20,18,.69);
    color:#fff;
    border-radius:5px;
    box-shadow:0 18px 50px rgba(0,0,0,.16);
}

.demo-badge{
    position:absolute;
    right:10px;
    top:8px;
    font-size:11px;
    opacity:.65;
}

.login-card nav{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:18px;
    margin:2px 0 26px;
}

.login-card nav span{
    padding-bottom:10px;
    white-space:nowrap;
}

.login-card nav .active{
    color:#2583ff;
    border-bottom:2px solid #2583ff;
}


/* =========================
   二维码
========================= */

/*
   二维码本体：152 × 152
   四周白边：5px
   总尺寸：162 × 162
*/

.qr{
    position:relative;

    width:162px;
    height:162px;

    padding:5px;

    margin-left:auto;
    margin-right:auto;

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

/* 二维码 Canvas */

.qr canvas{
    display:block;

    width:152px !important;
    height:152px !important;

    margin:0 !important;
    padding:0 !important;
}

/* 如果二维码插件生成的是 img，也保持相同尺寸 */

.qr > img:not(.qr-logo){
    display:block;

    width:152px !important;
    height:152px !important;

    margin:0 !important;
    padding:0 !important;
}


/* =========================
   二维码中心 Logo
========================= */

.qr-logo{
    position:absolute;

    left:50%;
    top:50%;

    width:34px;
    height:34px;

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

    z-index:10;

    background:#fff;
    border:2px solid #fff;
    border-radius:7px;

    object-fit:contain;
    display:block;
}


/* 二维码加载失败提示 */

.qr-error{
    color:#555;
    font-size:13px;
    padding:20px;
}


/* =========================
   PC 页面文字
========================= */

.login-card p{
    font-size:14px;
    margin:16px 0 20px;
}

.links{
    font-size:14px;
    color:#eee;
}


/* =========================
   手机扫码页面
========================= */

.mobile-page{
    background:#f7f7fb;
    min-height:100vh;
}

.mobile-page header{
    height:70px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid #eee;
    font-size:23px;
    position:relative;
}

.back{
    position:absolute;
    left:22px;
    font-size:44px;
    font-weight:200;
    line-height:1;
    cursor:pointer;
}

.mobile-page main{
    max-width:620px;
    margin:auto;
    padding:68px 16px 30px;
    text-align:center;
}

.hidden{
    display:none!important;
}


/* =========================
   加载动画
========================= */

.loading{
    padding-top:90px;
    color:#888;
}

.spinner{
    width:48px;
    height:48px;

    border:4px solid #ddd;
    border-top-color:#2583ff;

    border-radius:50%;

    margin:0 auto 28px;

    animation:spin .85s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

.loading h2{
    font-size:23px;
    font-weight:500;
    color:#666;
}

.loading p{
    font-size:17px;
}

.mobile-page small{
    display:block;
    margin-top:28px;
    color:#aaa;
    font-size:12px;
}


/* =========================
   电脑 + 手机示意图
========================= */

.device{
    height:150px;
    position:relative;
    margin:0 auto 35px;
    width:210px;
}

.monitor{
    position:absolute;
    left:18px;
    top:5px;

    width:150px;
    height:100px;

    border:2px solid #bbb;
    border-radius:8px;
}

.monitor:after{
    content:"";

    position:absolute;
    left:58px;
    bottom:-23px;

    width:34px;
    height:22px;

    border-bottom:2px solid #bbb;
    border-left:2px solid transparent;
    border-right:2px solid transparent;
}

.phone{
    position:absolute;
    right:15px;
    bottom:24px;

    width:38px;
    height:68px;

    border:2px solid #bbb;
    border-radius:5px;

    background:#f7f7fb;
}


/* =========================
   确认页面
========================= */

.confirm h2{
    font-weight:400;
    color:#999;
    font-size:23px;
    margin:0 0 18px;
}

.confirm p{
    font-size:21px;
    color:#999;
    margin:0 0 55px;
}

.confirm button{
    display:block;

    width:100%;
    height:66px;

    border-radius:6px;

    font-size:22px;
    cursor:pointer;
}

.primary{
    border:0;
    background:#2583f5;
    color:#fff;
    margin-bottom:28px;
}

.secondary{
    border:1px solid #ddd;
    background:#fff;
    color:#666;
}


/* =========================
   手机适配
========================= */

@media(max-width:480px){

    .mobile-page header{
        height:62px;
        font-size:21px;
    }

    .mobile-page main{
        padding-top:60px;
    }

    .confirm p{
        margin-bottom:48px;
    }

    .confirm button{
        height:58px;
        font-size:20px;
    }

    .login-card{
        padding-left:20px;
        padding-right:20px;
    }

    .login-card nav{
        font-size:16px;
    }
}