*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family: PingFang SC,Microsoft YaHei,system-ui,-apple-system,monospace;
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
}
/* 太空画布 */
.space-wrap{
    position:fixed;
    inset:0;
    z-index:1;
    background-color:#030612;
}
.space-wrap{
    width:100vw;
    height:100vh;
}
.space-wrap canvas{
    width:100vw;
    height:100vh;
}

.login-container{
    position:relative;
    z-index:10;
}
/* 登录卡片：旋转霓虹光环+玻璃拟态 */
.login-card{
    width:490px;
    padding:54px 44px;
    border-radius:24px;
    background:rgba(10,18,44,0.62);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border:1px solid rgba(0,175,255,0.22);
    box-shadow: 0 0 80px rgba(0,130,240,0.12);
    position:relative;
    overflow:hidden;
}
/* 旋转外圈霓虹光带 */
.login-card::before{
    content:"";
    position:absolute;
    top:-130%;
    left:-65%;
    width:250%;
    height:250%;
    background:conic-gradient(
        transparent 64%,
        rgba(0,200,255,0.38),
        rgba(70,110,255,0.22),
        transparent
    );
    animation: rotateGlow 11s linear infinite;
    z-index:-2;
}
.login-card::after{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:20px;
    background:rgba(6,12,32,0.93);
    z-index:-1;
}
@keyframes rotateGlow {
    100%{transform:rotate(360deg);}
}

.card-header{
    text-align:center;
    margin-bottom:44px;
}
.card-header h1{
    font-size:32px;
    color:#ffffff;
    letter-spacing:4px;
    text-shadow: 0 0 22px rgba(0,185,255,0.52);
    margin-bottom:12px;
    font-weight:500;
}
.sub-title{
    font-size:14px;
    color:#78b7ff;
    opacity:0.82;
    letter-spacing:1px;
}

.error-tip{
    text-align:center;
    color:#ff647a;
    font-size:14px;
    margin-bottom:26px;
    text-shadow:0 0 12px rgba(255,75,95,0.4);
}

.input-group{
    margin-bottom:30px;
}
.input-group label{
    display:block;
    color:#b2d7ff;
    font-size:14px;
    margin-bottom:10px;
    letter-spacing:0.5px;
}
.input-field{
    width:100%;
    height:52px;
    background:rgba(14,26,58,0.55);
    border:1px solid rgba(0,162,255,0.28);
    border-radius:14px;
    padding:0 20px;
    color:#fff;
    font-size:13px;
    outline:none;
    transition:0.36s ease;
}
.input-field::placeholder{
    color:rgba(105,165,225,0.42);
}
.input-field:focus{
    border-color:#00c0ff;
    background:rgba(14,28,64,0.75);
    box-shadow:0 0 0 3px rgba(0,175,255,0.21), 0 0 30px rgba(0,145,255,0.17);
}

.submit-btn{
    width:100%;
    height:54px;
    border:none;
    border-radius:14px;
    background:linear-gradient(90deg,#0068ee,#00b4ff);
    color:#fff;
    font-size:18px;
    letter-spacing:1.6px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    margin-top:6px;
    transition:0.3s ease;
}
.submit-btn span{
    position:relative;
    z-index:2;
}
.btn-light-flow{
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.34),transparent);
    animation: btnShine 3.2s infinite ease-in-out;
}
@keyframes btnShine {
    0%{left:-100%;}
    50%{left:100%;}
    100%{left:100%;}
}
.submit-btn:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,155,255,0.44);
    background:linear-gradient(90deg,#0057dd,#00a8ff);
}

.copyright{
    text-align:center;
    margin-top:40px;
    font-size:12px;
    color:rgba(95,155,215,0.44);
    letter-spacing:0.4px;
}
/* 登录页面平板适配 */
@media screen and (min-width:768px) and (max-width:1200px) {
    .login-box {
        width: 380px;
        padding: 36px 28px;
    }
    h2 {
        font-size: 24px;
    }
    input {
        height: 44px;
    }
    .login-btn {
        height: 46px;
    }
}
@media screen and (max-width:767px) {
    .login-box {
        width: 90%;
    }
}