* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  word-wrap: break-word;
  font-family: "Lucida Grande", Verdana, Tahoma, Lucida, Arial, Helvetica, "微软雅黑", "宋体", sans-serif;
  word-break: break-all;
}


.login-box {
  width: 50%;
  float: left;
  z-index: 999;
  position: absolute;
  top: 65%;
  margin-left: 25%;
}

/* iPhone 8 的屏幕尺寸是 375x667 像素 */
@media only screen and (max-width: 375px) and (max-height: 667px) {
  .login-box {
    bottom: 50px;
  }
}

/* iPhone 12/13/14/15 的屏幕尺寸是 390x844 像素 */
/*@media only screen and (max-width: 390px) and (max-height: 844px) {*/
/*    .login-box {*/
/*      bottom: 16%;*/
/*    }*/
/*}*/

/* 针对iPhone 13 Pro等6.1英寸屏幕设备的样式 */
@media only screen and (width: 414px) and (height: 896px) {

  /* 414x896是iPhone 13 Pro等常见6.1英寸设备的屏幕像素尺寸范围近似值 */
  .login-box {
    bottom: 50px;
  }
}

/* iPhone 16/17 的屏幕尺寸假设为 400x850 像素 */
@media only screen and (width: 400px) and (height: 850px) {
  .login-box {
    bottom: 50px;
  }
}

.input-group {
  display: flex;
  margin-bottom: 20px;
}

.input-group input {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 0px;
  border-bottom: 2px solid #BEBEBE;
  box-sizing: border-box;
}

.input-img {
  width: 28px;
  height: 28px;
  margin-top: 10px;
  margin-right: 10px;
}

input[type="text"] {
  /* 去掉边框 */
  border: none;

  /* 去掉背景色 */
  background-color: transparent;

  /* 去掉内边距 */
  padding: 0;

  /* 去掉外边距 */
  margin: 0;

  /* 去掉默认的盒子模型调整 */
  box-sizing: border-box;

  /* 可选：设置字体和字体大小，以确保一致性 */
  font-family: inherit;
  font-size: inherit;

  /* 可选：去掉聚焦时的轮廓线（通常不推荐，因为这会影响可访问性） */
  /* outline: none; */

  /* 如果你想去掉聚焦时的默认样式但保持可访问性，可以使用以下替代方案 */
  outline: 0;
  box-shadow: none;
  /* 有些浏览器可能会使用 box-shadow 来显示焦点 */

  /* 确保下划线是完美的直线 */
  border-bottom: 2px solid #BEBEBE;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  
  /* 防止任何可能的圆角效果 */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  
  /* 确保字体渲染不会影响边框 */
  font-smooth: never;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

input[type="password"] {
  /* 去掉边框 */
  border: none;

  /* 去掉背景色 */
  background-color: transparent;

  /* 去掉内边距 */
  padding: 0;

  /* 去掉外边距 */
  margin: 0;

  /* 去掉默认的盒子模型调整 */
  box-sizing: border-box;

  /* 可选：设置字体和字体大小，以确保一致性 */
  font-family: inherit;
  font-size: inherit;

  /* 可选：去掉聚焦时的轮廓线（通常不推荐，因为这会影响可访问性） */
  /* outline: none; */

  /* 如果你想去掉聚焦时的默认样式但保持可访问性，可以使用以下替代方案 */
  outline: 0;
  box-shadow: none;
  /* 有些浏览器可能会使用 box-shadow 来显示焦点 */

  /* 确保下划线是完美的直线 */
  border-bottom: 2px solid #BEBEBE;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  
  /* 防止任何可能的圆角效果 */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  
  /* 确保字体渲染不会影响边框 */
  font-smooth: never;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

.login-btn {
  width: 100%;
  padding: 14px;
  font-size: 18px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.login-btn:hover {
  background-color: #1976d2;
}

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  display: none;
  font-size: 14px;
}

/* 加载状态样式 */
.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* 禁用状态样式 */
.login-btn.disabled {
  background-color: #90caf9;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 安卓设备特殊处理 - 确保与苹果设备显示一致 */
.android-device {
  /* 保持与苹果设备相同的背景设置 */
  background: url("./img/login.png") no-repeat top center !important;
  background-size: cover !important;
  background-position: center top !important;
}

/* 强制安卓设备body背景显示 */
.android-device body {
  background: url("./img/login.png") no-repeat top center !important;
  background-size: cover !important;
  background-position: center top !important;
}