/* ============================================================
 * 登录 / 注册页高级化、丝滑化（纯 CSS，零 DOM 改动、零功能影响）
 * 作用范围严格限定在 .user-login-container（仅登录/注册/忘记密码页存在）
 * 只调整配色、圆角、阴影、过渡与入场动画，不改任何布局与业务逻辑
 * ============================================================ */

/* 入场：整块柔和淡入上浮，避免生硬闪现 */
.user-login-container .login-box,
.user-login-container .login-right,
.user-login-container .login-form {
  animation: authRise .5s cubic-bezier(.22, .8, .28, 1) both;
}
@keyframes authRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 卡片：更轻、更透、更有层次 */
.user-login-container .login-box {
  border-radius: 20px;
  box-shadow: 0 18px 54px rgba(30, 58, 110, .10), 0 2px 8px rgba(30, 58, 110, .05);
  transition: box-shadow .3s ease, transform .3s ease;
}
.user-login-container .login-box:hover {
  box-shadow: 0 24px 64px rgba(30, 58, 110, .14), 0 2px 10px rgba(30, 58, 110, .06);
}

/* 标题：字距与层次 */
.user-login-container .login-form .title,
.user-login-container .title {
  letter-spacing: .5px;
  transition: color .25s ease;
}

/* 输入框：圆角 + 聚焦光晕，交互更跟手 */
.user-login-container .custom-input .el-input__wrapper,
.user-login-container .login-form .el-input__wrapper,
.user-login-container .el-input__wrapper {
  border-radius: 12px;
  transition: box-shadow .25s ease, background-color .25s ease, transform .25s ease;
}
.user-login-container .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 3px rgba(61, 123, 248, .16), 0 0 0 1px #3d7bf8 inset !important;
}
.user-login-container .el-input__inner { letter-spacing: .3px; }

/* 主按钮：渐变 + 悬停上浮 + 按下回落 */
.user-login-container .el-button--primary,
.user-login-container .login-form .el-button--primary {
  border: none;
  border-radius: 12px;
  letter-spacing: 1px;
  background: linear-gradient(120deg, #4c8dff 0%, #3d7bf8 55%, #2f63e6 100%);
  box-shadow: 0 8px 20px rgba(47, 99, 230, .24);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.user-login-container .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(47, 99, 230, .32);
  filter: brightness(1.04);
}
.user-login-container .el-button--primary:active {
  transform: translateY(0) scale(.99);
  box-shadow: 0 5px 14px rgba(47, 99, 230, .22);
}

/* 验证码 / 次级按钮：统一圆角与过渡 */
.user-login-container .el-button {
  border-radius: 11px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.user-login-container .el-button:not(.el-button--primary):hover { transform: translateY(-1px); }

/* Tab / 链接：平滑切换 */
.user-login-container .login-tabs .el-tabs__item,
.user-login-container .el-tabs__item {
  transition: color .22s ease;
}
.user-login-container .text-theme,
.user-login-container a {
  transition: color .2s ease, opacity .2s ease;
}
.user-login-container a:hover { opacity: .82; }

/* 左侧品牌区：轻微渐变叠加，更高级 */
.user-login-container .login-left {
  position: relative;
}
.user-login-container .login-left::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(20, 60, 150, .06));
}

/* 深色模式兼容：不强制改背景，只收敛阴影 */
html.dark .user-login-container .login-box {
  box-shadow: 0 18px 54px rgba(0, 0, 0, .4);
}
html.dark .user-login-container .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 3px rgba(90, 150, 255, .22), 0 0 0 1px #5a96ff inset !important;
}

/* 手机端：收敛大圆角，避免贴边 */
@media (max-width: 600px) {
  .user-login-container .login-box { border-radius: 16px; }
}