/* ============================================================
   LI-Tool 登录 / 注册页美化 (v2 浅色版)
   - 背景：饱和蓝紫渐变 → 浅色柔和渐变(粉紫浅调) + 柔光斑
   - 卡片：保留立体悬浮效果(阴影调浅适配浅背景)
   - 卡片顶部 LI 品牌图标
   ============================================================ */

/* ---------- 1. 浅色渐变背景 + 柔光斑 ---------- */
.login-container,
.register-container {
  background: linear-gradient(135deg, #c7d2fe 0%, #ddd6fe 45%, #fbcfe8 100%) !important;
  position: relative !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: hidden !important;
}

/* 左上柔光斑 */
.login-container::before,
.register-container::before {
  content: '' !important;
  position: absolute !important;
  top: -180px !important;
  left: -140px !important;
  width: 520px !important;
  height: 520px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%) !important;
  pointer-events: none !important;
}

/* 右下柔光斑 */
.login-container::after,
.register-container::after {
  content: '' !important;
  position: absolute !important;
  bottom: -200px !important;
  right: -160px !important;
  width: 600px !important;
  height: 600px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 70%) !important;
  pointer-events: none !important;
}

/* 内容置于光斑之上 */
.login-wrapper,
.register-wrapper {
  position: relative !important;
  z-index: 1 !important;
}

/* ---------- 2. 立体卡片(浅色阴影适配) ---------- */
.login-card,
.register-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 20px !important;
  box-shadow:
    0 24px 48px -12px rgba(129, 116, 185, 0.28),
    0 12px 24px -8px rgba(129, 116, 185, 0.16),
    0 4px 8px rgba(129, 116, 185, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
  animation: cardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* 悬浮上移,阴影加深 */
.login-card:hover,
.register-card:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 34px 68px -16px rgba(129, 116, 185, 0.36),
    0 18px 36px -12px rgba(129, 116, 185, 0.22),
    0 6px 12px rgba(129, 116, 185, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* 入场动画:淡入 + 上浮 */
@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---------- 3. 卡片顶部品牌图标 ---------- */
.login-header,
.register-header {
  padding-top: 6px !important;
}

.login-header::before,
.register-header::before {
  content: '' !important;
  display: block !important;
  width: 84px !important;
  height: 84px !important;
  margin: 0 auto 18px !important;
  border-radius: 22px !important;
  background-image: url('/logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow:
    0 10px 24px -8px rgba(129, 116, 185, 0.35),
    0 2px 6px rgba(129, 116, 185, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ---------- 4. 标题渐变文字(加深保证浅背景可读) ---------- */
.login-title,
.register-title {
  background: linear-gradient(92deg, #4338ca 0%, #7c3aed 60%, #c026d3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* ---------- 5. 登录按钮立体感 ---------- */
.login-form .t-button,
.register-form .t-button {
  box-shadow: 0 8px 18px -4px rgba(0, 82, 217, 0.30) !important;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.login-form .t-button:hover,
.register-form .t-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 22px -4px rgba(0, 82, 217, 0.40) !important;
}

.login-form .t-button:active,
.register-form .t-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 6px 14px -4px rgba(0, 82, 217, 0.30) !important;
}

/* ---------- 6. 分隔线柔和化 ---------- */
.login-footer,
.register-footer {
  border-top: 1px solid rgba(17, 24, 39, 0.08) !important;
}

/* ---------- 无动画偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .login-card,
  .register-card {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 小屏微调 ---------- */
@media (max-width: 480px) {
  .login-header::before,
  .register-header::before {
    width: 72px !important;
    height: 72px !important;
    border-radius: 18px !important;
    margin-bottom: 14px !important;
  }
}