/* ============================================================
   大师旗舰版 · 登录页主题：地球 + 星空 + 流星雨（高科技清晰感）
   仅作用于登录页，不修改任何业务逻辑与其它页面
   ============================================================ */

/* ---------------- 背景容器 ---------------- */
#qjb-space-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse 120% 90% at 80% 92%, rgba(40,120,255,.30) 0%, rgba(20,60,140,.12) 34%, rgba(0,0,0,0) 62%),
    radial-gradient(ellipse 90% 70% at 12% 6%, rgba(110,70,220,.22) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(ellipse 140% 120% at 50% 45%, #081c40 0%, #04102a 46%, #01040d 100%);
  background-color:#01040d;
}

/* ---------------- 星云 ---------------- */
.qjb-nebula{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 30% 72%, rgba(60,140,255,.16), transparent 40%),
    radial-gradient(circle at 76% 24%, rgba(140,90,255,.14), transparent 42%),
    radial-gradient(circle at 60% 84%, rgba(0,200,255,.10), transparent 45%);
  filter:blur(42px);
  animation:qjb-nebula-move 32s ease-in-out infinite alternate;
}
@keyframes qjb-nebula-move{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(2%,2%,0) scale(1.08)}
}

/* ---------------- 三层星空 ---------------- */
.qjb-stars{position:absolute;inset:0;background-repeat:repeat}
.qjb-stars-a{
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px,#fff,transparent),
    radial-gradient(1.4px 1.4px at 140px 90px,#cfe4ff,transparent),
    radial-gradient(1.2px 1.2px at 262px 42px,#fff,transparent),
    radial-gradient(1.5px 1.5px at 90px 200px,#dbeaff,transparent),
    radial-gradient(1.2px 1.2px at 322px 262px,#fff,transparent),
    radial-gradient(1.6px 1.6px at 200px 150px,#fff,transparent);
  background-size:380px 380px;
  animation:qjb-twinkle 5s ease-in-out infinite;
}
.qjb-stars-b{
  background-image:
    radial-gradient(1px 1px at 60px 120px,rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px at 220px 60px,rgba(200,225,255,.8),transparent),
    radial-gradient(1px 1px at 300px 180px,rgba(255,255,255,.75),transparent),
    radial-gradient(1px 1px at 120px 300px,rgba(220,235,255,.8),transparent);
  background-size:300px 300px;
  animation:qjb-twinkle 7s ease-in-out infinite .8s;
}
.qjb-stars-c{
  background-image:
    radial-gradient(.8px .8px at 40px 40px,rgba(255,255,255,.6),transparent),
    radial-gradient(.8px .8px at 180px 140px,rgba(190,215,255,.6),transparent),
    radial-gradient(.8px .8px at 282px 92px,rgba(255,255,255,.55),transparent);
  background-size:220px 220px;
  animation:qjb-twinkle 9s ease-in-out infinite 1.6s;
}
@keyframes qjb-twinkle{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* ---------------- 流星雨 ---------------- */
.qjb-meteors{position:absolute;inset:0;overflow:hidden}
.qjb-meteors span{
  position:absolute;
  top:0;left:0;
  width:2px;height:2px;
  border-radius:50%;
  background:#eaf6ff;
  box-shadow:0 0 8px 2px rgba(150,205,255,.9);
  opacity:0;
  will-change:transform,opacity;
  animation-name:qjb-meteor;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.qjb-meteors span::after{
  content:"";
  position:absolute;
  top:50%;left:0;
  width:150px;height:1.6px;
  transform-origin:0 50%;
  transform:translateY(-50%) rotate(-45deg);
  background:linear-gradient(90deg,rgba(175,218,255,.95),rgba(175,218,255,0));
  border-radius:2px;
  filter:blur(.4px);
}
@keyframes qjb-meteor{
  0%{transform:translate3d(0,0,0);opacity:0}
  6%{opacity:1}
  62%{opacity:1}
  100%{transform:translate3d(-760px,760px,0);opacity:0}
}
.qjb-meteors span:nth-child(1){left:8%;top:-6%;animation-duration:5s;animation-delay:0s}
.qjb-meteors span:nth-child(2){left:22%;top:-10%;animation-duration:6.5s;animation-delay:1.4s}
.qjb-meteors span:nth-child(3){left:38%;top:-4%;animation-duration:5.6s;animation-delay:3.1s}
.qjb-meteors span:nth-child(4){left:52%;top:-12%;animation-duration:7.2s;animation-delay:2.2s}
.qjb-meteors span:nth-child(5){left:66%;top:-6%;animation-duration:5.2s;animation-delay:4.6s}
.qjb-meteors span:nth-child(6){left:80%;top:-10%;animation-duration:6.8s;animation-delay:.7s}
.qjb-meteors span:nth-child(7){left:93%;top:-2%;animation-duration:5.9s;animation-delay:3.8s}
.qjb-meteors span:nth-child(8){left:14%;top:18%;animation-duration:6.2s;animation-delay:5.4s}
.qjb-meteors span:nth-child(9){left:44%;top:24%;animation-duration:5.4s;animation-delay:2.9s}
.qjb-meteors span:nth-child(10){left:72%;top:12%;animation-duration:6.6s;animation-delay:6.1s}
.qjb-meteors span:nth-child(11){left:88%;top:30%;animation-duration:5.1s;animation-delay:1.9s}
.qjb-meteors span:nth-child(12){left:28%;top:40%;animation-duration:7s;animation-delay:4.2s}
.qjb-meteors span:nth-child(13){left:58%;top:34%;animation-duration:5.8s;animation-delay:7.3s}
.qjb-meteors span:nth-child(14){left:96%;top:46%;animation-duration:6.4s;animation-delay:5.7s}
.qjb-meteors span:nth-child(3)::after,
.qjb-meteors span:nth-child(7)::after,
.qjb-meteors span:nth-child(11)::after{width:220px}
.qjb-meteors span:nth-child(2)::after,
.qjb-meteors span:nth-child(9)::after{width:120px}

/* ---------------- 地球 ---------------- */
.qjb-earth{
  position:absolute;
  right:-14%;
  bottom:-32%;
  width:min(78vw,880px);
  aspect-ratio:1/1;
}
.qjb-earth-atmo{
  position:absolute;
  inset:-4%;
  border-radius:50%;
  box-shadow:
    0 0 70px 22px rgba(70,160,255,.35),
    inset 0 0 70px 12px rgba(110,200,255,.45);
  z-index:1;
}
.qjb-earth-body{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  z-index:2;
  background:
    radial-gradient(circle at 34% 30%, #7fd4ff 0%, #2f86de 20%, #1653a0 42%, #0a2c60 62%, #04122e 84%);
  box-shadow:
    inset -50px -40px 110px rgba(0,0,0,.9),
    inset 30px 30px 80px rgba(120,200,255,.28);
}
.qjb-earth-map{
  position:absolute;
  inset:-6%;
  border-radius:50%;
  background-image:
    radial-gradient(ellipse 16% 12% at 34% 38%, rgba(70,220,170,.75), transparent 70%),
    radial-gradient(ellipse 12% 18% at 46% 58%, rgba(60,200,150,.65), transparent 70%),
    radial-gradient(ellipse 20% 10% at 62% 34%, rgba(90,210,160,.60), transparent 70%),
    radial-gradient(ellipse 10% 14% at 72% 62%, rgba(70,200,150,.55), transparent 70%),
    radial-gradient(ellipse 14% 9% at 20% 66%, rgba(80,205,160,.50), transparent 70%);
  filter:blur(2px);
  opacity:.85;
  animation:qjb-earth-rotate 80s linear infinite;
}
@keyframes qjb-earth-rotate{
  from{transform:translateX(0)}
  to{transform:translateX(-12%)}
}
.qjb-earth-shade{
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:3;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.25), transparent 35%),
    radial-gradient(circle at 70% 76%, rgba(0,0,0,.78), transparent 62%);
}
.qjb-orbit{
  position:absolute;
  left:-8%;right:-8%;top:44%;height:34%;
  border:1px solid rgba(120,190,255,.25);
  border-radius:50%;
  box-shadow:0 0 20px rgba(80,160,255,.15);
  z-index:4;
}
.qjb-orbit-a{animation:qjb-orbit-a 30s linear infinite}
.qjb-orbit-b{
  top:38%;height:42%;
  border-color:rgba(120,190,255,.16);
  animation:qjb-orbit-b 46s linear infinite;
}
@keyframes qjb-orbit-a{from{transform:rotate(-18deg)}to{transform:rotate(342deg)}}
@keyframes qjb-orbit-b{from{transform:rotate(12deg)}to{transform:rotate(-348deg)}}

/* ---------------- 科技网格 + 扫描线 ---------------- */
.qjb-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(80,160,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,160,255,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 82%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 82%);
  opacity:.7;
}
.qjb-scan{
  position:absolute;
  left:0;right:0;
  height:140px;
  background:linear-gradient(180deg,transparent,rgba(90,180,255,.07),transparent);
  animation:qjb-scan 8s linear infinite;
}
@keyframes qjb-scan{
  0%{transform:translateY(-160px)}
  100%{transform:translateY(100vh)}
}

/* ============================================================
   覆盖登录页原有样式（!important 以确保优先于懒加载的 chunk 样式）
   ============================================================ */
.login{
  background-image:none !important;
  background-color:transparent !important;
  position:relative !important;
  z-index:1 !important;
}
.login::before{display:none !important}

.login-form{
  position:relative !important;
  background:rgba(8,20,44,.55) !important;
  border:1px solid rgba(90,180,255,.35) !important;
  border-radius:18px !important;
  box-shadow:
    0 0 0 1px rgba(90,180,255,.10),
    0 24px 60px rgba(0,0,0,.65),
    0 0 70px rgba(50,120,255,.22) !important;
  backdrop-filter:blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(140%) !important;
}
.login-form::before,
.login-form::after{
  content:"";
  position:absolute;
  width:22px;height:22px;
  border:2px solid rgba(90,190,255,.8);
  filter:drop-shadow(0 0 6px rgba(90,190,255,.8));
}
.login-form::before{top:-1px;left:-1px;border-right:none;border-bottom:none;border-top-left-radius:18px}
.login-form::after{bottom:-1px;right:-1px;border-left:none;border-top:none;border-bottom-right-radius:18px}

.login-form .title{
  color:#eaf4ff !important;
  text-shadow:0 0 18px rgba(90,170,255,.85),0 0 40px rgba(60,130,255,.4) !important;
  letter-spacing:2px;
  font-weight:700;
}

.login-form .el-input__inner{
  background:rgba(6,16,36,.72) !important;
  border:1px solid rgba(90,180,255,.30) !important;
  color:#eaf4ff !important;
  border-radius:10px !important;
  box-shadow:inset 0 0 12px rgba(30,90,180,.25) !important;
}
.login-form .el-input__inner::placeholder{color:rgba(150,190,240,.6) !important}
.login-form .el-input__inner:focus{
  border-color:#4ea8ff !important;
  box-shadow:
    0 0 0 3px rgba(78,168,255,.18),
    0 0 20px rgba(78,168,255,.55),
    inset 0 0 12px rgba(40,120,220,.35) !important;
}
.login-form .el-input__icon,
.login-form .el-input__prefix i{color:#7fc0ff !important;fill:#7fc0ff !important}

.login-form .login-code img{
  border:1px solid rgba(90,180,255,.35) !important;
  background:rgba(6,16,36,.7) !important;
  border-radius:8px !important;
}

.login-form .el-button--primary{
  background:linear-gradient(135deg,#1e6fff 0%,#39c6ff 100%) !important;
  border:none !important;
  border-radius:10px !important;
  height:52px !important;
  font-weight:600 !important;
  letter-spacing:2px;
  box-shadow:0 8px 26px rgba(40,140,255,.45),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.login-form .el-button--primary:hover,
.login-form .el-button--primary:focus{
  box-shadow:0 12px 34px rgba(60,180,255,.7),inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform:translateY(-1px);
}

.login-form .el-form-item__error{
  color:#7fd4ff !important;
  background:rgba(6,16,36,.75) !important;
  border-radius:6px;
  padding:6px 10px;
}

/* ============================================================
   验证码行修复：输入框与验证码同一行、等高对齐、原尺寸显示
   ============================================================ */
.login-form > .el-form-item:nth-child(4) .el-form-item__content{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
@supports selector(:has(*)){
  .login-form .el-form-item:has(.login-code) .el-form-item__content{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
  }
}

.login-form > .el-form-item:nth-child(4) .el-input{
  width:auto !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
@supports selector(:has(*)){
  .login-form .el-form-item:has(.login-code) .el-input{
    width:auto !important;
    flex:1 1 auto !important;
    min-width:0 !important;
  }
}

.login-form .login-code{
  margin-left:0 !important;
  width:auto !important;
  max-width:none !important;
  height:56px !important;
  flex:0 0 auto !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(90,180,255,.30) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,#f6f9ff 0%,#e7f0ff 100%) !important;
  box-shadow:0 0 0 1px rgba(90,180,255,.08),0 4px 14px rgba(20,60,140,.25) !important;
  cursor:pointer;
  overflow:hidden;
  transition:box-shadow .3s ease,border-color .3s ease;
}
.login-form .login-code:hover{
  border-color:#4ea8ff !important;
  box-shadow:0 0 0 1px rgba(78,168,255,.15),0 0 18px rgba(78,168,255,.45) !important;
}

.login-form .login-code img{
  width:111px !important;
  height:36px !important;
  min-width:0 !important;
  max-width:none !important;
  object-fit:contain !important;
  transform:none !important;
  border:none !important;
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
  box-sizing:content-box !important;
  display:block;
}

/* ============================================================
   联系客服 TG —— 登录按钮正下方（卡片内，仅登录页显示）
   ============================================================ */
#qjb-tg-contact{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:48px;
  margin-top:14px;
  border-radius:10px;
  text-decoration:none !important;
  color:#fff !important;
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px;
  line-height:1;
  background:linear-gradient(135deg,#2AABEE 0%,#229ED9 100%);
  box-shadow:0 8px 24px rgba(34,158,217,.5),inset 0 0 0 1px rgba(255,255,255,.18);
  transition:transform .25s ease,box-shadow .25s ease;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
#qjb-tg-contact::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  box-shadow:0 0 0 0 rgba(42,171,238,.55);
  animation:qjb-tg-pulse 2.6s ease-out infinite;
  pointer-events:none;
}
#qjb-tg-contact:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(42,171,238,.7),inset 0 0 0 1px rgba(255,255,255,.28);
}
#qjb-tg-contact .qjb-tg-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#qjb-tg-contact svg{display:block}
@keyframes qjb-tg-pulse{
  0%{box-shadow:0 0 0 0 rgba(42,171,238,.55)}
  70%{box-shadow:0 0 0 14px rgba(42,171,238,0)}
  100%{box-shadow:0 0 0 0 rgba(42,171,238,0)}
}

@media (max-width:768px){
  .qjb-earth{right:-24%;bottom:-26%;width:118vw}
  .qjb-meteors span::after{width:100px}
  .login-form .login-code{height:48px !important;padding:0 8px !important}
  .login-form .login-code img{width:96px !important;height:32px !important}
  #qjb-tg-contact{height:46px;margin-top:12px;font-size:13px}
}