.loginBox {
    margin-top: 3rem;
}

.loginBox > img {
  width: 100%;
  height: 30vh;
  object-fit: cover;
}

.loginBoxDL {
  padding: 1.25rem 1.25rem 0.25rem 1.25rem;
  box-sizing: border-box;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  transform: translateY(-1.25rem);
  background: #fff;
  z-index: 999;
  width:100%;
}

.loginBoxDL form{
	width:80%;
	margin:0 auto;
}

.loginBoxtitle {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 0.625rem;
}

.loginBoxDL input {
    width: 100%;
    height: 2.5rem;
    border: none;
    background: #f5f5f5;
    box-sizing: border-box;
    padding: 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    border: 1px solid #f5f5f5;
}

.loginBox p {
  font-size: 0.75rem;
  color: #f60;
  text-align: center;
  margin: 0.25rem 0 0;
}

.loginBoxTS {
  width: 100%;
}

.loginBoxYZM {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.loginBoxYZM  button {
  flex-shrink: 0;
  width: 6rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  background: #f5f5f5;
  border: none;
  color: #666;
  font-size: 0.875rem;
}

.loginBoxDL button {
    width: 100%;
    height: 2.5rem;
    border-radius: 0.25rem;
    border: none;
    background: linear-gradient(to right, #1974d0, #3aa0ff);
    font-size: 0.875rem;
    color: #fff;
    margin: 0 0 1rem auto;
}
    .loginBoxDL button.cancel {
        background: linear-gradient(to right, #ccc, #ddd);
        color: #666;
    }

.TraInfFrom {
  display: flex;
  align-items: flex-start;
  margin: 1rem 0;
  gap: 2%;
}

.TraInfFromTxt {
  width: 18%;
  text-align: right;
  color: #333;
  font-size: 0.75rem;
  transform: translateY(0.5rem);
}

.TraInfFromTxtInp {
  width: 78%;
  color: #666;
  padding: 0.5rem 0.25rem;
  font-size: 0.875rem;
  outline: none;
  border-radius: 0.25rem;
  border: 0.0625rem solid #dedede;
}

.TraInfFrom textarea {
  transform: translateY(-0.125rem);
  width: 100%;
  color: #666;
  outline: none;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid #dedede;
  padding: 0.5rem 0.25rem;
}

/* 移动端验证轨道 */
.verify-track {
  position: relative;
  width: 100%;
  height: 2.5rem;
  background: #f5f5f5;
  border-radius: 0.25rem;
  overflow: hidden;
}

.verify-track-add {
  background-color: #4caf50;
}

/* 移动端滑块优化 */
.verify-slider {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: #fbc201;
  border: 0.125rem solid #ad8503;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  touch-action: none; /* 防止触摸默认行为 */
  box-sizing: border-box;
}

.verify-slider-add {
  background-color: #4caf50;
  border: 0.125rem solid #327434;
}

.verify-text {
  position: absolute;
  left: 3.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #666;
  white-space: nowrap;
}

.verify-success {
  color: #fff !important;
}
