/* ========================================
   月之暗面 - 美观登录页设计
   ======================================== */

/* ===== 重置 ===== */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#app {
  width: 100% !important;
  height: 100% !important;
}

/* ===== 登录页背景 - 只在登录页生效 ===== */
.view-account {
  overflow: hidden !important;
  background: linear-gradient(135deg, #0c0f1a 0%, #1a1d35 40%, #0f1225 100%) !important;
  min-height: 100vh !important;
  position: relative !important;
}

/* ===== 星空背景层 - 只在登录页 ===== */
.view-account::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image:
    radial-gradient(2px 2px at 5% 15%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 15% 45%, rgba(179,136,255,0.8), transparent),
    radial-gradient(1px 1px at 25% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 35% 65%, rgba(124,77,255,0.7), transparent),
    radial-gradient(1px 1px at 45% 10%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 55% 55%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 65% 35%, rgba(179,136,255,0.9), transparent),
    radial-gradient(2px 2px at 75% 75%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(124,77,255,0.8), transparent),
    radial-gradient(2px 2px at 95% 60%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 20% 90%, rgba(179,136,255,0.7), transparent),
    radial-gradient(1px 1px at 30% 5%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 40% 40%, rgba(124,77,255,0.6), transparent),
    radial-gradient(1px 1px at 50% 85%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 60% 15%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 50%, rgba(179,136,255,0.8), transparent),
    radial-gradient(2px 2px at 80% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 90% 70%, rgba(124,77,255,0.7), transparent),
    radial-gradient(2px 2px at 98% 95%, rgba(255,255,255,0.5), transparent) !important;
  background-size: 100% 100% !important;
  animation: twinkle 4s ease-in-out infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ===== 右上角紫色光晕 - 只在登录页 ===== */
.view-account::after {
  content: '' !important;
  position: fixed !important;
  top: -300px !important;
  right: -300px !important;
  width: 700px !important;
  height: 700px !important;
  background: radial-gradient(circle, rgba(124,77,255,0.3) 0%, rgba(83,109,254,0.15) 40%, transparent 70%) !important;
  border-radius: 50% !important;
  animation: pulse 8s ease-in-out infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 0.9; }
}

/* ===== 左下角蓝色光晕 - 只在登录页 ===== */
.view-account .glow-bottom {
  position: fixed !important;
  bottom: -350px !important;
  left: -350px !important;
  width: 700px !important;
  height: 700px !important;
  background: radial-gradient(circle, rgba(83,109,254,0.25) 0%, rgba(124,77,255,0.1) 40%, transparent 70%) !important;
  border-radius: 50% !important;
  animation: pulse 10s ease-in-out infinite reverse !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ===== 登录页面容器 ===== */
.view-account {
  background: transparent !important;
  background-image: none !important;
  width: 100% !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ===== 登录卡片 ===== */
.view-account-container {
  background: linear-gradient(145deg, rgba(20,25,50,0.9), rgba(15,20,40,0.95)) !important;
  border: 1px solid rgba(124,77,255,0.3) !important;
  border-radius: 28px !important;
  box-shadow: 
    0 25px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(124,77,255,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  padding: 50px 45px !important;
  max-width: 460px !important;
  width: 90% !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 10 !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
}

/* ===== Logo区域 - 更大 ===== */
.view-account-top {
  padding: 25px 0 20px 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.view-account-top img,
.view-account-top svg,
.view-account-top .logo,
.view-account-top > *:first-child {
  display: block !important;
  margin: 0 auto 25px auto !important;
  max-width: 100% !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  filter: drop-shadow(0 0 30px rgba(124,77,255,0.6)) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  background: linear-gradient(145deg, rgba(124,77,255,0.12), rgba(83,109,254,0.08)) !important;
  box-shadow: 0 0 30px rgba(124,77,255,0.25) !important;
}

/* 标题样式 - 强制覆盖 */
.view-account-top h1,
.view-account-top h2,
.view-account-top h3,
.view-account-top h4,
.view-account-top .h1,
.view-account-top .h2,
.view-account-top .title,
.view-account-top [class*="title"],
.view-account-top > *:nth-child(2) {
  color: #ffffff !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: 6px !important;
  background: linear-gradient(135deg, #ffffff 0%, #b388ff 50%, #7c4dff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: titleGlow 3s ease-in-out infinite !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 15px rgba(124,77,255,0.8)) !important;
}

/* Vue scoped 覆盖 */
.view-account-top[data-v-7de6931f] h1,
.view-account-top[data-v-7de6931f] h2,
.view-account-top[data-v-7de6931f] h3,
.view-account-top[data-v-7de6931f] .title {
  color: #ffffff !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: 6px !important;
  background: linear-gradient(135deg, #ffffff 0%, #b388ff 50%, #7c4dff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: titleGlow 3s ease-in-out infinite !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 15px rgba(124,77,255,0.8)) !important;
}

@keyframes titleGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 15px rgba(124,77,255,0.6));
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 30px rgba(124,77,255,1));
    transform: scale(1.02);
  }
}

.view-account-top-desc {
  color: rgba(255,255,255,0.6) !important;
  font-size: 15px !important;
  margin-top: 5px !important;
}

/* ===== 表单 ===== */
.view-account .ant-form-item {
  margin-bottom: 22px !important;
}

/* ===== 输入框 ===== */
.view-account .ant-input,
.view-account .ant-input-affix-wrapper {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(124,77,255,0.25) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  height: 52px !important;
  font-size: 16px !important;
  padding: 0 18px !important;
  transition: all 0.3s ease !important;
}

.view-account .ant-input-affix-wrapper {
  padding: 0 18px !important;
}

.view-account .ant-input:hover,
.view-account .ant-input-affix-wrapper:hover {
  border-color: rgba(124,77,255,0.5) !important;
  background: rgba(255,255,255,0.08) !important;
}

.view-account .ant-input:focus,
.view-account .ant-input-affix-wrapper-focused {
  border-color: #7c4dff !important;
  background: rgba(255,255,255,0.1) !important;
  box-shadow: 0 0 0 4px rgba(124,77,255,0.15), 0 0 30px rgba(124,77,255,0.2) !important;
}

.view-account .ant-input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

.view-account .ant-input-prefix {
  color: rgba(124,77,255,0.8) !important;
  font-size: 18px !important;
  margin-right: 12px !important;
}

/* ===== 登录按钮 ===== */
.view-account .ant-btn-primary {
  background: linear-gradient(135deg, #7c4dff 0%, #536dfe 50%, #7c4dff 100%) !important;
  background-size: 200% 100% !important;
  border: none !important;
  border-radius: 14px !important;
  height: 54px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  box-shadow: 0 8px 35px rgba(124,77,255,0.5) !important;
  transition: all 0.4s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.view-account .ant-btn-primary:hover {
  background-position: 100% 0 !important;
  box-shadow: 0 12px 45px rgba(124,77,255,0.7) !important;
  transform: translateY(-3px) !important;
}

.view-account .ant-btn-primary:active {
  transform: translateY(-1px) !important;
}

/* ===== 复选框 ===== */
.view-account .ant-checkbox-wrapper {
  color: rgba(255,255,255,0.7) !important;
  font-size: 14px !important;
}

.view-account .ant-checkbox-inner {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(124,77,255,0.3) !important;
  border-radius: 5px !important;
  width: 18px !important;
  height: 18px !important;
}

.view-account .ant-checkbox-checked .ant-checkbox-inner {
  background: linear-gradient(135deg, #7c4dff, #536dfe) !important;
  border-color: #7c4dff !important;
}

/* ===== 链接 ===== */
.view-account a {
  color: rgba(179,136,255,1) !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.view-account a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(179,136,255,0.5) !important;
}

/* ===== 分割线 ===== */
.view-account-other {
  border-top: 1px solid rgba(124,77,255,0.15) !important;
  padding-top: 20px !important;
  margin-top: 25px !important;
}

.view-account .default-color {
  color: rgba(255,255,255,0.6) !important;
}

/* ===== 标签 ===== */
.view-account .ant-form-item-label > label {
  color: rgba(255,255,255,0.8) !important;
  font-size: 14px !important;
}

/* ===== 错误提示 ===== */
.view-account .ant-form-item-explain-error {
  color: #ff8a80 !important;
}

/* ===== 加载动画 ===== */
.first-loading-wrap {
  background: linear-gradient(135deg, #0c0f1a 0%, #1a1d35 40%, #0f1225 100%) !important;
}

.first-loading-wrap .dot i {
  background-color: #7c4dff !important;
}

/* ========================================
   电脑端
   ======================================== */
@media (min-width: 768px) {
  .view-account-container {
    max-width: 480px !important;
    padding: 60px 55px !important;
  }
  
  .view-account-top img,
  .view-account-top svg {
    max-width: 100% !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
  }
  
  .view-account-top h1 {
    font-size: 48px !important;
  }
}

/* ========================================
   手机端竖屏
   ======================================== */
@media (max-width: 767px) {
  .view-account-container {
    width: 92% !important;
    padding: 40px 28px !important;
    border-radius: 22px !important;
  }

  .view-account-top img,
  .view-account-top svg {
    max-width: 100% !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
  }

  .view-account-top h1 {
    font-size: 26px !important;
  }

  .view-account .ant-input,
  .view-account .ant-input-affix-wrapper {
    height: 48px !important;
  }

  .view-account .ant-btn-primary {
    height: 50px !important;
  }
}

/* ========================================
   手机端横屏
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .view-account {
    padding: 10px !important;
  }
  
  .view-account-container {
    max-width: 400px !important;
    max-height: 94vh !important;
    padding: 25px 30px !important;
    border-radius: 18px !important;
    overflow-y: auto !important;
  }
  
  .view-account-top {
    padding: 10px 0 !important;
  }
  
  .view-account-top img,
  .view-account-top svg {
    max-width: 140px !important;
    max-height: 55px !important;
    margin-bottom: 8px !important;
  }
  
  .view-account-top h1 {
    font-size: 20px !important;
  }
  
  .view-account-top-desc {
    font-size: 12px !important;
  }
  
  .view-account .ant-input,
  .view-account .ant-input-affix-wrapper {
    height: 42px !important;
    font-size: 14px !important;
  }
  
  .view-account .ant-btn-primary {
    height: 44px !important;
    font-size: 15px !important;
  }
  
  .view-account .ant-form-item {
    margin-bottom: 14px !important;
  }
  
  body::after {
    width: 400px !important;
    height: 400px !important;
    top: -150px !important;
    right: -150px !important;
  }
  
  .glow-bottom {
    width: 350px !important;
    height: 350px !important;
    bottom: -120px !important;
    left: -120px !important;
  }
}

/* ========================================
   深色模式
   ======================================== */
html[data-theme="dark"] body {
  background: linear-gradient(135deg, #060812 0%, #0d1020 40%, #080a15 100%) !important;
}