.login-page{height:100vh;background:linear-gradient(180deg,#0A1427 0%,#0E1B33 50%,#101E38 100%);display:flex;flex-direction:column;position:fixed;left:0;right:0;top:0;bottom:0;overflow:hidden;box-sizing:border-box;padding-top:env(safe-area-inset-top)}

.bg-grid{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0}
.grid-h{position:absolute;left:0;right:0;height:1px;background:rgba(0,180,255,0.04)}
.grid-v{position:absolute;top:0;bottom:0;width:1px;background:rgba(0,180,255,0.04)}
.bg-glow{position:absolute;border-radius:50%;filter:blur(30px);z-index:0}
.g1{width:250px;height:250px;top:-75px;right:-60px;background:rgba(0,136,255,0.12)}
.g2{width:200px;height:200px;bottom:-50px;left:-50px;background:rgba(0,180,255,0.08)}

.scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(0,180,255,0.15) 30%,rgba(0,180,255,0.25) 50%,rgba(0,180,255,0.15) 70%,transparent 95%);z-index:0}
.scan1{top:18%}
.scan2{top:48%}
.scan3{top:82%}

.deco-x{position:absolute;color:rgba(0,180,255,0.08);font-size:16px;font-weight:bold;z-index:0}
.dx1{top:5%;right:14%}
.dx2{top:15%;left:10%;font-size:12px}
.dx3{top:28%;right:6%;font-size:20px}
.dx4{top:42%;left:8%;font-size:14px}
.dx5{top:55%;right:10%;font-size:11px}
.dx6{top:68%;left:6%;font-size:18px}
.dx7{top:80%;right:16%;font-size:13px}
.dx8{top:92%;left:14%;font-size:15px}
.deco-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(0,180,255,0.1),transparent);z-index:0}
.dl1{top:10%;left:6%;width:60px;transform:rotate(30deg)}
.dl2{top:22%;right:8%;width:50px;transform:rotate(-25deg)}
.dl3{top:36%;left:4%;width:70px;transform:rotate(15deg)}
.dl4{top:50%;right:6%;width:55px;transform:rotate(-35deg)}
.dl5{top:62%;left:8%;width:65px;transform:rotate(20deg)}
.dl6{top:75%;right:10%;width:45px;transform:rotate(-15deg)}
.dl7{top:88%;left:6%;width:50px;transform:rotate(40deg)}
.deco-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(0,180,255,0.15);z-index:0}
.dd1{top:12%;left:22%}
.dd2{top:25%;right:28%}
.dd3{top:40%;left:18%}
.dd4{top:58%;right:24%}
.dd5{top:72%;left:20%}
.dd6{top:85%;right:30%}
.deco-square{position:absolute;width:8px;height:8px;border:1px solid rgba(0,180,255,0.1);z-index:0}
.ds1{top:20%;right:20%;transform:rotate(15deg)}
.ds2{top:65%;left:24%;transform:rotate(-10deg)}
.ds3{top:90%;right:26%;transform:rotate(25deg)}
.deco-ring{position:absolute;width:12px;height:12px;border:1px solid rgba(0,180,255,0.1);border-radius:50%;z-index:0}
.dr1{top:32%;left:16%}
.dr2{top:78%;right:18%}

.brand-area{display:flex;flex-direction:column;align-items:center;padding-top:80px;position:relative;z-index:1}
.brand-title{font-size:34px;font-weight:590;color:#FFFFFF;letter-spacing:10px;line-height:1.1;text-shadow:0 0 14px rgba(0,180,255,0.3)}
.brand-bar{width:44px;height:3px;background:linear-gradient(90deg,#00B4FF,#0066FF);border-radius:1.5px;margin:14px 0;box-shadow:0 0 8px rgba(0,180,255,0.4)}
.brand-sub{font-size:14px;color:#60A5FA;letter-spacing:4px;font-weight:400}

.form-area{flex:1;padding:0 24px;margin-top:50px;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;box-sizing:border-box}
.form-card{width:100%;background:linear-gradient(135deg,rgba(18,34,70,0.98),rgba(12,24,52,0.99));border:1px solid rgba(0,180,255,0.25);border-radius:10px;padding:24px 20px 20px;box-shadow:0 6px 24px rgba(0,80,200,0.15),inset 0 1px 0 rgba(0,180,255,0.12);position:relative;overflow:hidden;box-sizing:border-box}
.card-glow-bar{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,#00B4FF 50%,transparent 90%);opacity:0.7}
.card-title{font-size:17px;font-weight:590;color:#F0F6FF;margin-bottom:20px;display:block;letter-spacing:1px}

.input-box{display:flex;align-items:center;background:rgba(255,255,255,0.04);border:1px solid rgba(0,180,255,0.2);border-radius:6px;padding:0 12px;margin-bottom:14px;height:50px;position:relative;overflow:hidden;box-sizing:border-box}
.input-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:8px}
.ic-user{width:11px;height:11px;border:1px solid #60A5FA;border-radius:50%;position:relative}
.ic-user::after{content:'';position:absolute;bottom:-5.5px;left:50%;transform:translateX(-50%);width:15px;height:5.5px;border:1px solid #60A5FA;border-bottom:none;border-radius:7.5px 7.5px 0 0}
.ic-lock{width:9px;height:11px;border:1px solid #60A5FA;border-radius:2px;position:relative;margin-top:3px}
.ic-lock::before{content:'';position:absolute;top:-4.5px;left:50%;transform:translateX(-50%);width:6px;height:5.5px;border:1px solid #60A5FA;border-bottom:none;border-radius:3px 3px 0 0}
.input-el{flex:1;height:50px;font-size:16px;color:#E8F2FF;background:transparent;border:none;padding:0;outline:none}
.input-el::placeholder{color:#5A7BA8;font-size:15px}

.eye-btn{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;cursor:pointer;margin-left:8px}
.eye-icon{width:14px;height:8px;border:1px solid #60A5FA;border-radius:50%/70%;position:relative}
.eye-icon::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:4px;background:#60A5FA;border-radius:50%}
.eye-slash{position:absolute;width:18px;height:1px;background:#60A5FA;transform:rotate(45deg)}
.eye-btn.on .eye-icon{border-color:#00CC88}
.eye-btn.on .eye-icon::after{background:#00CC88}
.eye-btn.on .eye-slash{display:none}

.opt-row{display:flex;justify-content:flex-end;margin-bottom:18px}
.rmb{display:flex;align-items:center;gap:5px;cursor:pointer}
.rmb-check{width:16px;height:16px;border:1px solid rgba(0,160,255,0.35);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.rmb-check.on{background:#0088FF;border-color:#0088FF;box-shadow:0 0 6px rgba(0,136,255,0.4)}
.rmb-text{font-size:13px;color:#8BAAD0}

.btn{width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00B4FF 0%,#0055DD 100%);border-radius:7px;box-shadow:0 4px 14px rgba(0,100,255,0.35),inset 0 1px 0 rgba(255,255,255,0.2);position:relative;overflow:hidden;box-sizing:border-box;cursor:pointer;transition:opacity .1s}
.btn:active{opacity:0.88}
.btn-text{font-size:17px;color:#FFFFFF;font-weight:590;letter-spacing:4px;position:relative;z-index:1}

.copyright{margin-top:28px;font-size:13px;color:#8BAAD0;letter-spacing:4px;font-weight:400}