/* ============================================================
   遥辉旗舰版应用管理系统 — 登录页「流星雨星空」高科技主题
   设计：深邃星空 + 流星雨划过 + 星云光晕 + 科技毛玻璃
   ============================================================ */

/* ---------- 背景：深邃星空 + 星云 ---------- */
.login{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  position:relative;
  overflow:hidden;
  padding:2rem;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 32%, rgba(190,220,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 82%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 22%, rgba(170,210,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 58%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 78%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 64% 8%, rgba(200,230,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 92%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(ellipse at 18% 12%, rgba(59,120,255,0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 88%, rgba(120,70,255,0.18) 0%, transparent 52%),
    radial-gradient(ellipse at 55% 45%, rgba(34,160,220,0.10) 0%, transparent 48%),
    linear-gradient(165deg, #02040c 0%, #060a1e 30%, #0a1030 58%, #050614 100%);
}

/* 星云光晕（缓慢漂浮的星云团） */
.login::before{
  content:'';
  position:absolute;
  width:60vw;
  height:60vw;
  top:-20%;
  right:-15%;
  background:radial-gradient(circle at center, rgba(99,102,241,0.22) 0%, rgba(59,130,246,0.08) 40%, transparent 70%);
  filter:blur(30px);
  animation:nebula 18s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes nebula{
  0%{transform:translate(0,0) scale(1);opacity:0.7}
  100%{transform:translate(-12%,16%) scale(1.15);opacity:1}
}

/* 第二团星云（左下） */
.login::after{
  content:'';
  position:absolute;
  width:46vw;
  height:46vw;
  bottom:-22%;
  left:-12%;
  background:radial-gradient(circle at center, rgba(120,70,255,0.20) 0%, rgba(168,85,247,0.07) 40%, transparent 70%);
  filter:blur(30px);
  animation:nebula2 20s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes nebula2{
  0%{transform:translate(0,0) scale(1);opacity:0.7}
  100%{transform:translate(14%,-12%) scale(1.1);opacity:1}
}

/* 恒星闪烁层（用多层 box-shadow 铺满细碎星星） */
.login .star-field{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* ---------- 流星雨（由 JS 动态注入 .meteors 容器与 .meteor 元素） ---------- */
.meteors{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.meteor{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px 1px rgba(180,220,255,0.95);
  opacity:0;
  animation:meteorFall linear infinite;
}
.meteor::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:var(--tail, 140px);
  height:1px;
  background:linear-gradient(270deg, rgba(255,255,255,0.95), rgba(120,190,255,0.35) 40%, transparent);
  transform-origin:right center;
  transform:translateX(-2px);
  border-radius:1px;
}

@keyframes meteorFall{
  0%{
    opacity:0;
    transform:translate(0,0) rotate(-32deg) scale(0.7);
  }
  5%{
    opacity:1;
  }
  22%{
    opacity:1;
  }
  55%{
    opacity:0;
    transform:translate(-40vw, 48vh) rotate(-32deg) scale(0.9);
  }
  100%{
    opacity:0;
    transform:translate(-60vw, 82vh) rotate(-32deg) scale(0.9);
  }
}

/* ---------- 登录卡片：星空毛玻璃 ---------- */
.login-form{
  position:relative;
  z-index:2;
  width:min(90vw,480px);
  padding:2.6rem 2.5rem 2.2rem;
  background:linear-gradient(160deg, rgba(18,26,58,0.66) 0%, rgba(9,13,32,0.80) 100%);
  border-radius:22px;
  border:1px solid rgba(120,170,255,0.30);
  box-shadow:
    0 0 0 1px rgba(120,170,255,0.06),
    0 24px 70px rgba(0,0,0,0.60),
    0 0 46px rgba(70,120,255,0.22),
    0 0 90px rgba(130,80,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.09);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  animation:cardIn 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(26px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ---------- 标题：星光渐变发光字 ---------- */
.title{
  margin:0 auto 2.6rem auto;
  text-align:center;
  font-size:1.75rem;
  font-weight:800;
  letter-spacing:2px;
  background:linear-gradient(100deg, #8fd3ff 0%, #b3c8ff 30%, #e0c4ff 58%, #7ee7ff 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 16px rgba(110,150,255,0.55));
  animation:titlePulse 3.4s ease-in-out infinite;
}
@keyframes titlePulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(110,150,255,0.32))}
  50%{filter:drop-shadow(0 0 24px rgba(140,180,255,0.60))}
}

/* ---------- 输入框：星空深色霓虹 ---------- */
.login-form .el-input__inner{
  background:rgba(6,11,30,0.70);
  border:1px solid rgba(110,160,255,0.32);
  color:#e9f0ff;
  border-radius:12px;
  padding:0 1.5rem 0 48px;
  height:54px;
  transition:all 0.3s ease;
  box-shadow:inset 0 0 14px rgba(60,120,255,0.07);
}
.login-form .el-input__inner::placeholder{
  color:rgba(150,180,235,0.52);
}
.login-form .el-input__inner:focus{
  background:rgba(10,18,42,0.88);
  border-color:rgba(110,205,255,0.85);
  box-shadow:0 0 0 3px rgba(70,130,255,0.16), 0 0 24px rgba(80,140,255,0.40);
}
.login-form .el-input__prefix{
  left:12px;
  display:flex;
  align-items:center;
  height:100%;
}
.login-form .el-input__prefix i{
  font-size:20px;
  color:#7cb8ff;
  filter:drop-shadow(0 0 6px rgba(110,170,255,0.55));
}

/* ---------- 验证码行：输入框 + 验证码图片 横向并排、等高协调 ----------
   注意：Element UI 的 prop="code" 不会渲染成 DOM 属性，无法用属性选择器命中，
   故改为「所有 form-item 内容 flex 横排」：单输入框/按钮自动撑满，
   仅含 .login-code 的验证码项出现「输入框 + 验证码并排」效果。 */
.login-form .el-form-item__content{
  display:flex;
  align-items:center;
  gap:12px;
}
.login-form .el-form-item__content .el-input,
.login-form .el-form-item__content .el-button{
  flex:1;
  min-width:0;
  width:auto;
}
.login-code{
  flex:0 0 116px;
  width:116px;
  height:54px;
  flex-shrink:0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.login-code img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
  border:1px solid rgba(110,160,255,0.42);
  background:rgba(6,11,30,0.72);
  padding:4px;
  box-sizing:border-box;
  box-shadow:0 0 14px rgba(70,130,255,0.18);
}

/* ---------- 登录按钮：星轨渐变 + 流光 ---------- */
.login-form .el-button--primary{
  height:56px;
  border-radius:12px;
  border:none;
  background:linear-gradient(120deg, #2f6bff 0%, #7a4dff 52%, #08c0e8 118%);
  background-size:180% 100%;
  color:#fff;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:4px;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 6px 24px rgba(70,120,255,0.45), inset 0 1px 0 rgba(255,255,255,0.26);
  position:relative;
  overflow:hidden;
}
.login-form .el-button--primary::after{
  content:'';
  position:absolute;
  top:0;left:-80%;
  width:60%;height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.40), transparent);
  transition:left 0.6s ease;
}
.login-form .el-button--primary:hover{
  background-position:100% 0;
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(100,110,255,0.60), 0 0 28px rgba(8,192,232,0.38);
}
.login-form .el-button--primary:hover::after{
  left:120%;
}
.login-form .el-button--primary:active{
  transform:translateY(0);
}

/* ---------- 错误提示 ---------- */
.login-form .el-form-item__error{
  color:#ff7b8a;
  background:rgba(30,8,20,0.60);
  padding:7px 12px;
  border-radius:8px;
  margin-top:4px;
  border-left:2px solid #ff4d6d;
  backdrop-filter:blur(4px);
}

/* ---------- 产品特性轮播条（由 JS 动态注入 .feature-banner） ---------- */
.feature-banner{
  position:relative;
  width:100%;
  height:66px;
  margin:0 auto 1.5rem auto;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(22,32,70,0.55) 0%, rgba(10,16,40,0.72) 100%);
  border:1px solid rgba(110,160,255,0.28);
  box-shadow:inset 0 0 16px rgba(60,120,255,0.10), 0 0 18px rgba(70,120,255,0.14);
  overflow:hidden;
}
.feature-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  opacity:0;
  transform:translateY(10px);
  animation:featureCycle 12s linear infinite;
  white-space:nowrap;
}
.feature-slide .ico{
  font-size:28px;
  line-height:1;
  filter:drop-shadow(0 0 6px rgba(110,200,255,0.75));
}
.feature-slide .txt{
  font-size:1.18rem;
  font-weight:700;
  letter-spacing:1px;
  background:linear-gradient(100deg, #8fd3ff 0%, #c4b5ff 52%, #7ee7ff 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 8px rgba(110,150,255,0.30));
}
.feature-slide:nth-child(1){animation-delay:0s}
.feature-slide:nth-child(2){animation-delay:4s}
.feature-slide:nth-child(3){animation-delay:8s}
@keyframes featureCycle{
  0%  {opacity:0; transform:translateY(10px)}
  3%  {opacity:1; transform:translateY(0)}
  30% {opacity:1; transform:translateY(0)}
  33% {opacity:0; transform:translateY(-10px)}
  100%{opacity:0; transform:translateY(-10px)}
}

/* ---------- 移动端适配 ---------- */
@media (max-width:768px){
  .login-form{padding:1.8rem 1.5rem 1.6rem;border-radius:18px}
  .title{font-size:1.5rem;margin-bottom:2rem;letter-spacing:1px}
  .login-form .el-input__inner{height:48px;padding:0 1rem 0 42px}
  .login-form .el-input__prefix{left:8px}
  .login-form .el-button--primary{height:52px;font-size:1rem;letter-spacing:2px}
  .login-code{flex:0 0 100px;width:100px;height:48px}
  .login-code img{padding:3px}
  .feature-banner{height:56px;margin-bottom:1rem}
  .feature-slide .txt{font-size:1rem}
  .feature-slide .ico{font-size:22px}
}

/* ---------- 登录页底部：联系客服 Telegram ---------- */
.contact-tg{
  margin-top:22px;
  text-align:center;
  font-size:17px;
  letter-spacing:.5px;
}
.contact-tg a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 30px;
  border-radius:999px;
  color:#e8f3ff;
  text-decoration:none;
  background:linear-gradient(135deg, rgba(38,132,255,0.18), rgba(120,70,255,0.18));
  border:1px solid rgba(120,170,255,0.45);
  box-shadow:0 3px 14px rgba(40,120,255,0.3);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-tg a:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, rgba(38,132,255,0.32), rgba(120,70,255,0.32));
  box-shadow:0 4px 16px rgba(40,120,255,0.4);
}
.contact-tg a .tg-handle{ font-weight:600; color:#bcd8ff; }