*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif;}
body{
    height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
    background:radial-gradient(circle at 50% 0%,#35106b,#07001d 45%,#000);
}
/* ===== 宇宙背景 ===== */
.bg{
    position:absolute;inset:0;overflow:hidden;
    background:
        radial-gradient(circle at 15% 30%,rgba(0,255,255,.35),transparent 25%),
        radial-gradient(circle at 85% 30%,rgba(255,0,180,.35),transparent 30%),
        radial-gradient(circle at 50% 80%,rgba(100,0,255,.45),transparent 35%);
}
.bg:before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(#fff 1px,transparent 1px);
    background-size:80px 80px;opacity:.35;animation:stars 25s linear infinite;
}
@keyframes stars{from{transform:translateY(0);}to{transform:translateY(-400px);}}
.bg:after{
    content:"";position:absolute;width:150%;height:300px;left:-25%;bottom:5%;
    background:linear-gradient(90deg,transparent,rgba(0,255,255,.5),rgba(255,0,200,.7),transparent);
    filter:blur(40px);transform:rotate(-8deg);animation:galaxy 8s infinite alternate;
}
@keyframes galaxy{
    from{opacity:.5;transform:translateX(-50px) rotate(-8deg);}
    to{opacity:1;transform:translateX(50px) rotate(-8deg);}
}
/* ===== 两侧霓虹竖排文字 ===== */
.side-text{
    position:absolute;top:50%;transform:translateY(-50%);z-index:20;
    display:flex;flex-direction:column;gap:10px;
    font-size:100px;font-weight:900;letter-spacing:10px;
    animation:energyFloat 5s infinite ease-in-out;
}
.side-text span{
    position:relative;display:block;height:110px;line-height:110px;text-align:center;
    background:linear-gradient(180deg,#ffffff,#00ffff,#9d00ff,#ff00cc);
    -webkit-background-clip:text;color:transparent;
    text-shadow:0 0 8px #fff,0 0 20px #00ffff,0 0 40px #7b2cff,0 0 80px #ff00cc;
    animation:electricFlash 1.2s infinite alternate;
}
@keyframes electricFlash{
    0%{filter:brightness(1);transform:translateX(0);}
    50%{filter:brightness(2);}
    100%{filter:brightness(1.4);transform:translateX(8px);}
}
@keyframes energyFloat{
    0%,100%{transform:translateY(-50%);}
    50%{transform:translateY(-55%);}
}
.side-text:before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent,rgba(0,255,255,.7),transparent);
    filter:blur(20px);animation:scanLight 4s infinite;
}
@keyframes scanLight{
    0%{transform:translateY(-300px);opacity:0;}
    50%{opacity:1;}
    100%{transform:translateY(300px);opacity:0;}
}
.left-text{left:4%;}
.right-text{right:4%;}
/* ===== 登录玻璃容器 ===== */
.login-wrap{
    position: relative;
    z-index: 30;
    width: 480px;
    padding: 45px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* ✅ 使用多层box-shadow实现向外霓虹发光，不会向内污染容器内部视频 */
    box-shadow: 
        0 0 12px #00ffff,
        0 0 30px #7b2cff,
        0 0 60px #ff00cc,
        inset 0 0 60px rgba(255, 255, 255, 0.2);
    animation: cardFloat 6s infinite ease-in-out;
    transform-style: preserve-3d;
    transition: .15s;
    overflow: hidden;
    height: auto;
}
/* 删除 login-wrap::before 磨砂遮罩，不再盖住视频 */
@keyframes cardFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-18px);}}
/* 外层发光边框 */
/* .login-wrap:after{
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 35px;
    z-index: 31;
    background: conic-gradient(transparent, #00ffff, #ff00cc, #ffff00, #00ffff);
    filter: blur(8px);
    pointer-events: none;
} */
@keyframes portalBorder{100%{transform:rotate(360deg);}}
/* 内部所有内容必须在最上层 */
.login-wrap > *{
    position: relative;
    z-index: 32;
}
/* ===== LOGO ===== */
.logo{
    width:85px;height:85px;margin:auto;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:38px;
    background:linear-gradient(135deg,#ff00cc,#00ffff);box-shadow:0 0 40px #00ffff;
}
/* login-title：七彩渐变背景，盖住视频，LOGO文字正常在上层 */
.login-title{
    position: relative;
    text-align: center;
    margin-bottom: 35px;
    padding: 20px 10px;
    border-radius: 24px;

    /* 非常淡的七彩透明渐变，视频会明显透出来 */
    background: linear-gradient(135deg,
        rgba(0, 255, 255, 0.18),
        rgba(123, 44, 255, 0.14),
        rgba(255, 0, 204, 0.18),
        rgba(255, 221, 0, 0.10),
        rgba(0, 255, 255, 0.18));
    background-size: 300% 300%;
    animation: gradientMove 6s ease infinite;

    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        0 0 12px rgba(0, 255, 255, 0.35),
        0 0 25px rgba(255, 0, 204, 0.25);

    isolation: isolate;
}

/* .login-title::before{
    content: "";
    position: absolute;
    inset: -20px;
    background: rgba(10, 5, 40, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 24px;
    z-index: -1;
} */
.login-title h1{font-size:28px;margin-top:20px;letter-spacing:3px;color:white;text-shadow:0 0 20px #00ffff;}
.login-title p{margin-top:10px;color:#ddd;}
/* ===== 输入框 ===== */
.form-item{margin-bottom:25px;}
.form-item label{display:block;margin-bottom:10px;color:white;}
.form-item label i{color:#00ffff;margin-right:8px;}
.form-input{
    width:100%;height:50px;padding:0 20px;border-radius:30px;
    border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.15);
    color:white;font-size:16px;outline:none;
}
.form-input::placeholder{color:#ccc;}
.form-input:focus{box-shadow:0 0 25px cyan;border-color:#00ffff;}
.password-box{position:relative;}
.eye{position:absolute;right:20px;top:17px;color:white;cursor:pointer;}
.tip-text{font-size:12px;margin-top:8px;color:#ff8fa3;}
/* ===== 登录按钮 ===== */
.btn-login{
    width:100%;height:52px;border:none;border-radius:30px;font-size:20px;font-weight:bold;
    color:white;cursor:pointer;background:linear-gradient(90deg,#ff0080,#7928ca,#00ffff);
    box-shadow:0 0 35px #ff00cc;transition:.4s;
}
.btn-login:hover{transform:translateY(-6px);box-shadow:0 0 60px #00ffff;}
.jump-register{text-align:center;margin-top:25px;}
.jump-register a{color:#00ffff;font-size:15px;text-decoration:none;text-shadow:0 0 10px cyan;}
#user_sd{
    display:none;margin-top:30px;padding:18px;text-align:center;border-radius:20px;
    background:rgba(0,150,255,.25);border:1px solid cyan;color:white;cursor:pointer;box-shadow:0 0 25px cyan;
}
/* ===== 3D宇宙星球 ===== */
.planet{
    position:absolute;z-index:5;width:430px;height:430px;right:50%;top:50%;
    transform:translate(50%,-50%);border-radius:50%;opacity:.85;
    background:radial-gradient(circle at 30% 30%,#00ffff,#09205f 35%,#020024 70%);
    box-shadow:0 0 80px #00ffff,0 0 160px #7928ca;
    animation:planetRotate 20s linear infinite;
}
.planet:before{
    content:"";position:absolute;inset:-20px;border-radius:50%;
    background:conic-gradient(transparent,#00ffff,transparent,#ff00cc,transparent);
    filter:blur(20px);animation:ring 8s linear infinite;
}
.planet:after{
    content:"";position:absolute;inset:-45px;border-radius:50%;
    border:2px solid rgba(0,255,255,.5);box-shadow:0 0 50px cyan;animation:planetRing 8s linear infinite;
}
@keyframes planetRotate{
    0%{transform:translate(50%,-50%) rotate(0deg);}
    100%{transform:translate(50%,-50%) rotate(360deg);}
}
@keyframes ring{100%{transform:rotate(360deg);}}
@keyframes planetRing{100%{transform:rotate(360deg);}}
/* ===== 流星 ===== */
.meteors{position:absolute;inset:0;z-index:0;overflow:hidden;}
.meteors span{
    position:absolute;width:180px;height:3px;
    background:linear-gradient(90deg,transparent,#00ffff,white,transparent);
    box-shadow:0 0 15px cyan;transform:rotate(-35deg);animation:meteor 5s linear infinite;
}
.meteors span:nth-child(1){top:10%;left:20%;animation-delay:1s;}
.meteors span:nth-child(2){top:30%;left:70%;animation-delay:3s;}
.meteors span:nth-child(3){top:60%;left:10%;animation-delay:2s;}
.meteors span:nth-child(4){top:80%;left:60%;animation-delay:4s;}
.meteors span:nth-child(5){top:40%;left:85%;animation-delay:5s;}
@keyframes meteor{
    0%{transform:translateX(0) translateY(0) rotate(-35deg);opacity:0;}
    30%{opacity:1;}
    100%{transform:translateX(600px) translateY(300px) rotate(-35deg);opacity:0;}
}
/* ===== 863全息投影 ===== */
.hologram{position:relative;animation:holoPower 1.5s infinite;}
.hologram:before,.hologram:after{
    content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;border-radius:50%;
    border:1px solid cyan;transform:translate(-50%,-50%);animation:scan 3s infinite;
}
.hologram:after{animation-delay:1.5s;}
@keyframes scan{
    0%{transform:translate(-50%,-50%) scale(.5);opacity:1;}
    100%{transform:translate(-50%,-50%) scale(2);opacity:0;}
}
@keyframes holoPower{
    0%,100%{filter:drop-shadow(0 0 10px cyan);}
    50%{filter:drop-shadow(0 0 45px #ff00cc);}
}
/* ===== Steam快捷登录按钮 ===== */
.btn-steam{
    width:100%;height:55px;margin-top:20px;border:none;border-radius:30px;
    font-size:20px;font-weight:bold;cursor:pointer;color:white;position:relative;overflow:hidden;
    background:linear-gradient(135deg,#1b2838,#171a21,#00a4ff);
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 0 30px #00a4ff,inset 0 0 20px rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;gap:12px;transition:.4s;
}
.btn-steam i{font-size:26px;color:#66c0f4;text-shadow:0 0 15px #00a4ff;}
.btn-steam:hover{transform:translateY(-5px);box-shadow:0 0 40px #00a4ff,0 0 80px rgba(0,164,255,.5);}
.btn-steam:before{
    content:"";position:absolute;top:0;left:-120%;width:80%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
    transform:skewX(-25deg);transition:.6s;
}
.btn-steam:hover:before{left:130%;}
/* ===== 响应式 ===== */
@media(max-width:600px){
    .side-text{display:none;}
    .planet{opacity:.35;}
}
@media(max-width:500px){
    .login-wrap{width:90%;padding:30px;}
	.yingnai-bg-video{
        width: 90%;
        max-height: 520px;
    }
}
/* ----------------------------------------------------------- */
/* 樱奈背景视频【重点修复】 */
.yingnai-bg-video{
    position: absolute;
    /* 和 login-wrap 严格同宽、同位置 */
    width: 480px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 关键：高度只限制在 login-wrap 内容区域 */
    height: auto;
    max-height: 560px;
    aspect-ratio: 450 / 560;
    object-fit: cover;
    object-position: center top;
    opacity: 0.32;
    z-index: 29;
    pointer-events: none;
    border-radius: 32px;
    overflow: hidden;
    /* 裁掉超出登录框的部分 */
    mask-image: linear-gradient(to bottom, black 42%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 42%, transparent 100%);
}
/* 小屏移动端自动隐藏视频，防止挤爆页面 */
/* @media (max-width: 1024px){
    .yingnai-bg-video{
        display: none;
    }
} */