/* -------------------------------------------------------------- */

/* 登录页整体容器 */
.login-page {
  /* 确保登录页占满全屏 */
  position: fixed; /* 固定定位，使元素相对于视口定位 */
  top: 0; /* 顶部距离视口顶部为0 */
  left: 0; /* 左侧距离视口左侧为0 */
  width: 100vw; /* 设置宽度为视口宽度的100% */
  height: 100vh; /* 设置高度为视口高度的100% */
  overflow: hidden; /* 隐藏溢出内容，防止出现滚动条 */
}

/* 登录页整体布局 */
.login-page .login-container {
  position: relative; /* 相对定位，为子元素提供定位上下文 */
  width: 100vw; /* 设置宽度为视口宽度的100% */
  height: 100vh; /* 设置高度为视口高度的100% */
}

/* -------------------------------------------------------------- */
/* 左侧展示区域 */
.login-page .left-panel {
  position: absolute; /* 绝对定位，覆盖整个容器 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);  /* 使用渐变色背景，从#6a11cb到#2575fc */
}

.login-page #login-canvas {
  width: 100%; /* 宽度占满父容器 */
  height: 100%; /* 高度占满父容器 */
  display: block; /* 以块级元素显示 */
}

.login-page .vignette {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部距离父元素顶部为0 */
  left: 0; /* 左侧距离父元素左侧为0 */
  right: 0; /* 右侧距离父元素右侧为0 */
  bottom: 0; /* 底部距离父元素底部为0 */
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%); /* 径向渐变背景，中心透明到边缘半透明黑色 */
  pointer-events: none; /* 禁用指针事件，允许点击穿透 */
  z-index: 10; /* 堆叠顺序为10，确保在其他元素之上 */
}

.login-page .loading {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 顶部距离父元素顶部50% */
  left: 50%; /* 左侧距离父元素左侧50% */
  transform: translate(-50%, -50%); /* 水平垂直居中定位 */
  font-size: 18px; /* 字体大小18px */
  color: #666; /* 文字颜色为深灰色 */
  z-index: 5; /* 堆叠顺序为5 */
}

/* -------------------------------------------------------------- */

/* 右侧表单区域 */
.login-page .right-panel {
  display: flex; /* 使用flex布局 */
  flex: 5; /* 设置弹性系数为5 */
  flex-direction: column; /* 垂直方向排列子元素 */
  justify-content: space-between; /* 子元素两端对齐 */
  padding: 40px; /* 内边距40px */
  background: white; /* 白色背景 */
  position: relative; /* 相对定位，为子元素提供定位上下文 */
}

/* 右侧面板样式更新 */
.login-page .right-panel {
  position: absolute; /* 绝对定位，悬浮在canvas上方 */
  top: 50%; /* 垂直居中 */
  right: 5%; /* 距离屏幕右边缘5% */
  transform: translateY(-50%); /* 仅垂直居中 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  padding: 40px; /* 内边距为40px */
  background: rgba(1, 11, 34, 0.3); /* 高度透明背景 */
  backdrop-filter: blur(15px); /* 背景模糊效果 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 极淡边框 */
  border-radius: 12px; /* 圆角边框 */
  width: 350px; /* 固定宽度 */
  z-index: 10; /* 确保在canvas之上 */
}

.login-page #mylogin-login_panel,
.login-page #mylogin-register_panel {
  width: 100%; /* 宽度占满父容器 */
}

/* 登录表单容器 */
.login-page .form-container {
  flex-grow: 1; /* 允许容器在剩余空间中扩展 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列子元素 */
  justify-content: center; /* 保持表单内容垂直居中 */
}

/* 备案信息 */
.login-page .login-footer {
  margin-top: auto; /* 自动上边距将其推到底部 */
  text-align: center; /* 文字居中对齐 */
  font-size: 12px; /* 字体大小12px */
  color: #999; /* 文字颜色为灰色 */
  padding: 20px 0 0; /* 上内边距20px */
  width: 100%; /* 宽度占满父容器 */
}
.login-page .login-footer a {
  color: #aaa; /* 链接颜色为浅灰色 */
  text-decoration: none; /* 无下划线 */
}
.login-page .login-footer a:hover {
  color: #00d4ff; /* 悬停时链接颜色变为亮蓝色 */
}

/* 跳转链接居中 */
.login-page .login-switch-link {
  text-align: center; /* 文字居中对齐 */
  margin-top: 45px; /* 上边距25px，增加与上方按钮的距离 */
  margin-bottom: 15px; /* 下边距15px */
  display: block; /* 块级元素显示 */
}
.login-page .login-switch-link a {
  color: #00d4ff; /* 链接颜色为亮蓝色 */
  text-decoration: none; /* 无下划线 */
  font-size: 16px; /* 字体大小14px */
}
.login-page .login-switch-link a:hover {
  text-decoration: underline; /* 悬停时显示下划线 */
}

/* 验证码输入框容器样式 */
.login-page .code-input-group {
  display: flex;
  gap: 10px;
  align-items: stretch; /* 确保子元素高度一致 */
}

/* 验证码输入框和发送按钮列宽度控制 */
.login-page .code-input-column {
  flex: 7;
}

.login-page .send-code-column {
  flex: 5;
}

/* 强制所有按钮文字居中 */
.login-page .btn-primary {
  text-align: center !important; /* 文字居中对齐，优先级最高 */
  padding-left: 0 !important; /* 左内边距0，优先级最高 */
  padding-right: 0 !important; /* 右内边距0，优先级最高 */
}

/* 更新表单元素样式 */
.login-page .text-center {
  font-size: 28px; /* 字体大小28px */
  font-weight: 600; /* 字体加粗 */
  margin-bottom: 30px; /* 下外边距30px */
  background: linear-gradient(135deg, #00d4ff, #ff00ff); /* 渐变色背景 */
  -webkit-background-clip: text; /* 将背景应用到文字 */
  -webkit-text-fill-color: transparent; /* 文字颜色透明，显示背景渐变 */
  text-align: center; /* 文字居中对齐 */
}

.login-page .form-group {
  margin-bottom: 20px; /* 下外边距20px */
}

.login-page .form-group label {
  display: block; /* 块级元素显示 */
  margin-bottom: 8px; /* 下外边距8px */
  font-size: 14px; /* 字体大小14px */
  color: #aaa; /* 文字颜色为浅灰色 */
}

/* 调整Shiny输入控件样式 */
.login-page .shiny-input-container:not(.shiny-input-container-inline) {
  width: 100% !important; /* 宽度占满父容器，优先级最高 */
}

.login-page .shiny-input-container input {
  width: 100%; /* 输入框宽度占满父容器 */
  height: 48px; /* 显式设置高度与按钮一致 */
  padding: 12px 16px; /* 内边距上下12px，左右16px */
  box-sizing: border-box; /* 确保padding和border不影响总高度 */
  background: rgba(20, 20, 30, 0.6); /* 半透明深色背景 */
  border: 1px solid rgba(100, 100, 150, 0.3); /* 半透明边框 */
  border-radius: 8px; /* 边框圆角8px */
  color: #fff; /* 文字颜色为白色 */
  font-size: 16px; /* 字体大小16px */
  transition: all 0.3s ease; /* 所有属性变化时的过渡效果，0.3秒 */
}

.login-page .shiny-input-container input:focus {
  outline: none; /* 移除默认焦点轮廓 */
  border-color: #00d4ff; /* 焦点时边框颜色变为亮蓝色 */
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); /* 焦点时添加发光效果 */
}

/* 按钮样式 */
.login-page .btn-primary {
  width: 100%; /* 按钮宽度占满父容器 */
  padding: 12px 16px; /* 内边距上下12px，左右16px，与输入框保持一致高度 */
  background: linear-gradient(135deg, #00d4ff, #ff00ff); /* 渐变色背景，从#00d4ff到#ff00ff */
  border: 1px solid rgba(100, 100, 150, 0.3); /* 添加与输入框相同的边框，确保高度一致 */
  border-radius: 8px; /* 边框圆角8px */
  color: #fff; /* 文字颜色为白色 */
  font-size: 16px; /* 字体大小16px */
  font-weight: 600; /* 字体加粗 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  transition: all 0.3s ease; /* 所有属性变化时的过渡效果，0.3秒 */
  margin-top: 50px; /* 上边距30px，增加与上方元素的距离 */
  text-align: center !important; /* 文字居中对齐，优先级最高 */
}

.login-page .send-code-btn {
  width: 100%; /* 按钮宽度占满父容器 */
  padding: 12px 10px; /* 内边距上下12px，左右16px，与输入框保持一致高度 */
  height: 48px; /* 显式设置高度与输入框一致 */
  box-sizing: border-box; /* 确保padding和border不影响总高度 */
  border: 1px solid rgba(100, 100, 150, 0.3); /* 添加与输入框相同的边框，确保高度一致 */
  border-radius: 8px; /* 边框圆角8px */
  color: #fff; /* 文字颜色为白色 */
  font-size: 16px; /* 字体大小16px */
  font-weight: 600; /* 字体加粗 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  transition: all 0.3s ease; /* 所有属性变化时的过渡效果，0.3秒 */
  text-align: center !important; /* 文字居中对齐，优先级最高 */
  margin-top: 26px !important; /* 明确移除上边距 */
}

/* 发送验证码按钮样式 - 与输入框高度保持一致 */
.login-page .resend-code-btn {
  margin-top: 0; /* 移除额外上边距 */
  background: rgba(20, 20, 30, 0.6); /* 使用与输入框相同的背景色 */
}

.login-page .btn-primary:hover {
  transform: translateY(-2px); /* 鼠标悬停时向上移动2px */
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4); /* 悬停时添加阴影效果 */
}