body{
    background:#f0f2f5;
    font-family:"Microsoft YaHei";
    padding:25px;
    text-align:center;
}

.card{
    max-width:430px;
    margin:auto;
    margin-top:60px;
    padding:45px 35px 40px;
    background:#fff;
    border-radius:26px;
    box-shadow:0 18px 45px rgba(0,0,0,0.10);
    animation:fade .75s ease forwards;
    opacity:0;
}

@keyframes fade{ 
    from{ opacity:0; transform:translateY(25px); }
    to{ opacity:1; transform:translateY(0); }
}

.logo-box{
    margin-bottom:12px;
}

.logo{
    width:110px;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,0.18));
    transition:.25s;
}
.logo:hover{
    transform:scale(1.04);
}

.tip{
    font-size:15px;
    color:#666;
    margin-bottom:25px;
    margin-top:8px;
}

.btn{
    width:100%;
    padding:15px 0;
    border:none;
    border-radius:50px;
    font-size:18px;
    font-weight:bold;
    color:#fff;
    cursor:pointer;
    background:linear-gradient(90deg,#3ca846,#1f8b33);
    box-shadow:0 6px 16px rgba(67,160,71,0.35);
    transition:.3s;
}
.btn:hover{
    box-shadow:0 10px 26px rgba(67,160,71,0.45);
    transform:translateY(-2px);
}
.btn:disabled{
    background:#a9d8a9;
    box-shadow:none;
    cursor:not-allowed;
}

#status{
    margin-top:20px;
    min-height:40px;
    font-size:15px;
    color:#444;
    line-height:22px;
}

.loading span{
    width:10px;height:10px;background:#3ca846;border-radius:50%;
    display:inline-block;margin:0 4px;animation:bounce .6s infinite alternate;
}
.loading span:nth-child(2){animation-delay:.15s;}
.loading span:nth-child(3){animation-delay:.3s;}

@keyframes bounce{
    to{ transform:translateY(-8px); }
}