/* ============================================================
   登录页面专业优化 V2.0
   优化方向：背景层次感、玻璃拟态卡片、精致输入框、专业按钮
   ============================================================ */

/* ========== 1. 背景优化 ========== */
#loginPage{
  background:linear-gradient(135deg, #0c1d4d 0%, #1e3a8a 25%, #2563eb 50%, #0891b2 75%, #0e7490 100%) !important;
  position:relative;
  overflow:hidden;
  min-height:100vh !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  padding:20px !important;
}

/* 登录模式下body去掉默认padding，避免背景出现白边 */
body.login-mode{
  padding:0 !important;
  margin:0 !important;
  min-height:100vh !important;
}

/* 登录成功后隐藏登录页 - ID+类选择器优先级高于单独ID */
#loginPage.hide-area{
  display:none !important;
}

/* 背景多层渐变叠加 */
#loginPage::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(59,130,246,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(14,116,144,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(139,92,246,0.1) 0%, transparent 60%);
  z-index:0;
  animation:bgGradientFlow 15s ease-in-out infinite alternate;
}

/* 背景装饰圆形 - 更精致的模糊效果 */
#loginPage::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.08) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,0.06) 0%, transparent 40%),
    radial-gradient(circle at 75% 15%, rgba(96,165,250,0.15) 0%, transparent 30%),
    radial-gradient(circle at 25% 85%, rgba(34,211,238,0.12) 0%, transparent 35%);
  z-index:0;
  filter:blur(40px);
  animation:bgOrbsFloat 20s ease-in-out infinite;
}

/* 背景网格纹理 - 微妙的专业感 */
#loginPage .login-bg-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:40px 40px;
  z-index:0;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* 背景动画 */
@keyframes bgGradientFlow{
  0%{opacity:0.8; transform:scale(1) rotate(0deg);}
  50%{opacity:1; transform:scale(1.05) rotate(1deg);}
  100%{opacity:0.9; transform:scale(1.02) rotate(-1deg);}
}
@keyframes bgOrbsFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  25%{transform:translate(10px,-10px) scale(1.02);}
  50%{transform:translate(-5px,5px) scale(0.98);}
  75%{transform:translate(-10px,-5px) scale(1.01);}
}

/* ========== 2. 登录卡片优化 - 玻璃拟态效果 ========== */
.login-wrap{
  background:rgba(255,255,255,0.92) !important;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.5) !important;
  border-radius:24px !important;
  padding:40px 36px !important;
  box-shadow:
    0 25px 50px -12px rgba(0,0,0,0.25),
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 50px 100px -20px rgba(15,42,110,0.3) !important;
  animation:cardFloatIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position:relative;
  overflow:hidden;
}

/* 卡片顶部高光效果 */
.login-wrap::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
}

/* 卡片内发光效果 */
.login-wrap::after{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle at 50% 0%, rgba(59,130,246,0.05) 0%, transparent 50%);
  pointer-events:none;
}

/* 卡片入场动画 */
@keyframes cardFloatIn{
  0%{
    opacity:0;
    transform:translateY(30px) scale(0.95);
    filter:blur(10px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

/* ========== 3. LOGO优化 ========== */
.login-logo{
  margin-bottom:20px !important;
  position:relative;
  animation:logoFloat 3s ease-in-out infinite;
}

/* LOGO光晕效果 */
.login-logo::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:140px;height:140px;
  background:radial-gradient(circle, rgba(59,130,246,0.3) 0%, transparent 70%);
  border-radius:50%;
  filter:blur(20px);
  z-index:-1;
  animation:logoGlow 3s ease-in-out infinite;
}

/* LOGO阴影效果 */
.login-logo svg{
  filter:drop-shadow(0 8px 24px rgba(37,99,235,0.4)) drop-shadow(0 2px 8px rgba(0,0,0,0.1));
  transition:transform 0.3s ease, filter 0.3s ease;
}
.login-logo:hover svg{
  transform:scale(1.05);
  filter:drop-shadow(0 12px 32px rgba(37,99,235,0.5)) drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

@keyframes logoFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}
@keyframes logoGlow{
  0%,100%{opacity:0.6; transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.1);}
}

/* ========== 4. 标题优化 ========== */
.login-wrap h3{
  font-size:20px !important;
  font-weight:700 !important;
  background:linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #0891b2 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:10px !important;
  letter-spacing:0.5px;
  position:relative;
}

/* 标题下方装饰线 */
.login-wrap h3::after{
  content:'';
  display:block;
  width:40px;
  height:3px;
  background:linear-gradient(90deg, #2563eb, #0891b2);
  border-radius:2px;
  margin:10px auto 0;
}

/* ========== 5. 提示文字优化 ========== */
.login-wrap .tip{
  font-size:12px !important;
  color:#64748b !important;
  margin-bottom:24px !important;
  padding:8px 12px;
  background:rgba(248,250,252,0.8);
  border-radius:8px;
  border:1px solid rgba(226,232,240,0.8);
}

/* ========== 6. 输入框优化 ========== */
.login-wrap input{
  height:44px !important;
  padding:0 16px 0 44px !important;
  border:1.5px solid #e2e8f0 !important;
  border-radius:12px !important;
  font-size:14px !important;
  color:#1e293b !important;
  background:#f8fafc !important;
  transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline:none !important;
  box-shadow:0 1px 2px rgba(0,0,0,0.05) inset !important;
  width:100% !important;
  flex:1 !important;
}

/* 输入框聚焦效果 */
.login-wrap input:focus{
  border-color:var(--primary, #3b82f6) !important;
  background:#fff !important;
  box-shadow:
    0 0 0 4px var(--focus-ring, rgba(59,130,246,0.1)),
    0 4px 12px var(--focus-ring, rgba(59,130,246,0.15)),
    0 1px 2px rgba(0,0,0,0.05) inset !important;
  transform:translateY(-1px);
}

/* 输入框hover效果 */
.login-wrap input:hover{
  border-color:#cbd5e1 !important;
  background:#fff !important;
}

/* 输入框容器 */
.login-wrap form > div{
  position:relative !important;
  margin:14px 0 !important;
  display:flex !important;
  align-items:center !important;
}

/* 隐藏"账号："和"密码："文字节点 */
.login-wrap form > div{
  font-size:0 !important;
}
.login-wrap form > div > *{
  font-size:14px !important;
}

/* 输入框前缀图标 - 显示在输入框内部左侧 */
.login-wrap form > div::before{
  content:'';
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:20px;height:20px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0.5;
  transition:opacity 0.2s ease;
  z-index:2;
  pointer-events:none;
}

/* 账号输入框图标 */
.login-wrap form > div:nth-child(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
}

/* 密码输入框图标 */
.login-wrap form > div:nth-child(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
}

/* 输入框聚焦时图标变亮 */
.login-wrap form > div:focus-within::before{
  opacity:1;
}

/* 密码输入框的span包裹层 */
.login-wrap form > div > span{
  position:relative !important;
  display:flex !important;
  flex:1 !important;
  min-width:0 !important;
}

/* 密码显示/隐藏按钮 */
.login-wrap form > div > span > span:last-child,
.login-wrap .password-toggle{
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  background:none !important;
  border:none !important;
  cursor:pointer !important;
  padding:4px !important;
  opacity:0.5 !important;
  transition:opacity 0.2s ease !important;
  z-index:3 !important;
  font-size:16px !important;
}
.login-wrap form > div > span > span:last-child:hover,
.login-wrap .password-toggle:hover{
  opacity:1 !important;
}

/* ========== 7. 登录按钮优化 ========== */
.login-wrap form > button[type="submit"],
.login-wrap > button:first-of-type{
  height:48px !important;
  padding:0 24px !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:1px !important;
  border-radius:12px !important;
  background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%) !important;
  border:none !important;
  color:#fff !important;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 4px 14px rgba(37,99,235,0.4),
    0 2px 4px rgba(37,99,235,0.3),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-top:20px !important;
}

/* 按钮光泽效果 */
.login-wrap form > button[type="submit"]::before,
.login-wrap > button:first-of-type::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.5s ease;
}

/* 按钮hover效果 */
.login-wrap form > button[type="submit"]:hover,
.login-wrap > button:first-of-type:hover{
  transform:translateY(-2px);
  box-shadow:
    0 8px 24px rgba(37,99,235,0.5),
    0 4px 8px rgba(37,99,235,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.login-wrap form > button[type="submit"]:hover::before,
.login-wrap > button:first-of-type:hover::before{
  left:100%;
}

/* 按钮点击效果 */
.login-wrap form > button[type="submit"]:active,
.login-wrap > button:first-of-type:active{
  transform:translateY(0);
  box-shadow:
    0 2px 8px rgba(37,99,235,0.4),
    0 1px 2px rgba(37,99,235,0.3),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ========== 8. 生物识别按钮优化 ========== */
.login-wrap > button:last-of-type{
  height:44px !important;
  padding:0 20px !important;
  font-size:13px !important;
  font-weight:600 !important;
  border-radius:12px !important;
  background:linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%) !important;
  border:none !important;
  color:#fff !important;
  cursor:pointer;
  box-shadow:
    0 4px 12px rgba(5,150,105,0.35),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-top:12px !important;
  position:relative;
  overflow:hidden;
}
.login-wrap > button:last-of-type:hover{
  transform:translateY(-2px);
  box-shadow:
    0 8px 20px rgba(5,150,105,0.45),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.login-wrap > button:last-of-type:active{
  transform:translateY(0);
}

/* ========== 9. 错误提示优化 ========== */
#loginTip{
  margin-top:16px !important;
  padding:10px 14px !important;
  border-radius:10px !important;
  font-size:13px !important;
  text-align:center !important;
  animation:tipShake 0.4s ease !important;
}
#loginTip.warn{
  background:rgba(239,68,68,0.1) !important;
  border:1px solid rgba(239,68,68,0.2) !important;
  color:#dc2626 !important;
}

@keyframes tipShake{
  0%,100%{transform:translateX(0);}
  20%,60%{transform:translateX(-5px);}
  40%,80%{transform:translateX(5px);}
}

/* ========== 10. 加载状态优化 ========== */
#loginLoading{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  z-index:10;
}

/* ========== 11. 响应式优化 ========== */
@media (max-width:480px){
  .login-wrap{
    padding:32px 24px !important;
    border-radius:20px !important;
  }
  .login-wrap h3{
    font-size:18px !important;
  }
  .login-logo svg{
    width:100px;height:100px;
  }
}

/* ========== 12. 减少动画（无障碍） ========== */
@media (prefers-reduced-motion: reduce){
  #loginPage::before,
  #loginPage::after,
  .login-logo,
  .login-logo::before{
    animation:none !important;
  }
  .login-wrap{
    animation:none !important;
  }
}