body{

margin:0;
height:100vh;

background:
linear-gradient(135deg,#020617,#0f172a);

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

font-family:
"Microsoft YaHei";

}


.login-box{

width:420px;

padding:45px;

background:
rgba(255,255,255,0.08);

border-radius:20px;

box-shadow:
0 0 40px #2563eb;

backdrop-filter:
blur(15px);

text-align:center;

color:white;

}


h1{

font-size:32px;

letter-spacing:5px;

}


.sub{

color:#38bdf8;

font-size:14px;

}


input{

width:90%;

padding:15px;

margin:15px;

border-radius:10px;

border:1px solid #38bdf8;

background:#020617;

color:white;

font-size:16px;

}


button{

width:95%;

padding:15px;

border:none;

border-radius:30px;

background:#2563eb;

color:white;

font-size:18px;

cursor:pointer;

}


button:hover{

box-shadow:
0 0 20px #38bdf8;

}


#msg{

margin-top:20px;

color:#f87171;

font-size:16px;

}


.back-home{

display:block;

margin-top:25px;

color:#38bdf8;

text-decoration:none;

font-size:15px;

}


.back-home:hover{

color:white;

text-shadow:0 0 10px #38bdf8;

}


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

@media screen and (max-width:600px){


body{

padding:20px;

}


.login-box{

width:100%;

max-width:360px;

padding:30px 20px;

border-radius:16px;

box-sizing:border-box;

}


.login-box h1{

font-size:24px;

letter-spacing:3px;

}


.sub{

font-size:12px;

}


input{

width:100%;

height:45px;

padding:10px 15px;

margin:10px 0;

box-sizing:border-box;

font-size:15px;

}


button{

width:100%;

height:45px;

font-size:16px;

margin-top:15px;

}


#msg{

font-size:14px;

margin-top:15px;

}


.back-home{

font-size:14px;

margin-top:20px;

}


}