/* 背景样式 */
.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../../../assets/images/background.jpg"); /* 设置背景图片 */
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}

/* 表单容器样式 */
.form-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */
  padding: 30px 20px;
  border-radius: 10px;
  width: 85%;
  max-width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* 输入框样式 */
.input-field {
  width: 100%;
  margin-bottom: 15px;
  --background: #f7f7f7; /* 输入框背景色 */
  --border-radius: 4px; /* 圆角 */
  --padding-start: 10px; /* 输入框内边距 */
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 输入框阴影 */
  --border-color: #d87b34; /* 输入框边框颜色 */
  --highlight-color-focused: #d87b34;
}

/* 登录和注册按钮样式 */
.auth-button {
  margin-top: 10px;
  border-radius: 25px; /* 按钮圆角 */
  font-weight: bold; /* 加粗字体 */
  text-transform: uppercase; /* 大写字母 */
  --background: #d87b34; /* 按钮背景色 */
  --color: white; /* 按钮文本颜色 */
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
  --height: 50px; /* 按钮高度 */
}

.auth-button:hover {
  --background: #d87b64; /* 按钮悬停时颜色变化 */
}

.auth-button:active {
  --background: #d89b34; /* 按钮点击时颜色变化 */
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.header {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  color: #d87b34;
  margin-bottom: 10px;
}
.verify {
  float: right;
  margin: 5px 3px;
  font-size: 13px;
  color: #888;
}
.reminder {
  position: absolute;
  right: 25px;
  margin-top: 4px;
  font-size: 12px;
  color: #888;
}

/* 额外信息部分样式 */
.extra-info {
  margin-top: 28px;
  font-size: 12px;
  color: #888;
  text-align: center;
}

.extra-info p {
  margin: 5px 0;
}
