/* 整体版块 */
.login-section{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:60px 20px;
}
/* 登录框 */
.login-box{
  width:100%;
  max-width:670px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:50px 80px 60px;
  box-sizing:border-box;
  border:1px solid #C7C7CC;
}
/* 标题 */
.login-title{
  font-size:32px;
  color:#A62F24;
  text-align:center;
  margin-bottom:28px;
  font-weight:normal;
}
/* 输入组 */
.input-group{
  margin-bottom:25px;
  position:relative;
}
.input-err{
  color:#FF3B30;
  font-size:13px;
  margin:-20px 0 25px;   /* 紧贴输入框下方 */
  display:none;
}
.input-group span{
  color:#FF3B30;
}
/* 眼睛图标 */
.toggle-pwd{
  position:absolute;
  right:12px;
  bottom:0;
  line-height:45px;
  cursor:pointer;
  color:#999;
  font-size:16px;
}
.toggle-pwd:hover{
  color:#333;
}
.input-group input{
  width:100%;
  height:45px;
  padding:0 12px;
  border:1px solid #979797;
  border-radius:4px;
  font-size:16px;
  transition:.2s;
}
.input-group label{
  display:block;
  font-size:16px;
  color:#000;
  margin-bottom:10px;
}
.input-group input:focus{
  border-color:#A62F24;
  outline:none;
}
.code-group{
  position:relative;
}
.btn-send{
  display:block;
  min-width:60px;
  padding:0 15px;
  height:45px;
  line-height:45px;
  font-size:16px;
  text-align:center;
  position:absolute;
  right:0;
  bottom:0;
  z-index:2;
}
/* 辅助行：免登录 + 忘记密码 */
.login-helper{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
  font-size:16px;
}
/* 复选框样式 */
.checkbox-wrap{
  display:flex;
  align-items:center;
  cursor:pointer;
  user-select:none;
  font-size:16px;
  color:#333;
}
.checkbox-wrap input[type=checkbox]{
  display:none;
}
.checkmark{
  width:20px;
  height:20px;
  border:1px solid #979797;
  border-radius:2px;
  margin-right:6px;
  position:relative;
}
.checkbox-wrap input:checked + .checkmark{
  background:#A62F24;
  border-color:#A62F24;
}
.checkbox-wrap input:checked + .checkmark::after{
  content:'';
  position:absolute;
  left:5px;
  top:2px;
  width:8px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
/* 链接 */
.link{
  color:#333;
  text-decoration:none;
}
.link:hover{
  text-decoration:underline;
}
/* 登录按钮 */
.btn-login{
  width:100%;
  height:55px;
  background:#A62F24;
  border:none;
  border-radius:4px;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  transition:.2s;
  margin-bottom:25px;
}
 .btn-red{
  background:#A62F24;
} 
.btn-register{
  background:#b3b3b3;
}
.agree{
  color:#A62F24;
}

/*注册成功*/
.success-icon{
  text-align:left;
  padding:0 0 30px;
  font-size:16px;
}
.success-icon img{
  display:block;
  margin:auto;
  width:50px;
  height:auto;
}
/* 模态弹窗样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background-color: #fff;
  margin: 5% auto;
  padding: 0;
  width: 80%;
  max-width: 800px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 8px 8px 0 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.protocol-content {
  line-height: 1.6;
  color: #333;
}

.protocol-content p {
  margin-bottom: 15px;
}

.protocol-content ol {
  margin-bottom: 15px;
  padding-left: 20px;
}

.protocol-content li {
  margin-bottom: 8px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  text-align: right;
  background-color: #f9f9f9;
  border-radius: 0 0 8px 8px;
}

.btn-agree {
  background-color: #d32f2f;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.btn-agree:hover {
  background-color: #b71c1c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    margin: 2% auto;
  }
  
  .modal-header h2 {
    font-size: 1.2rem;
  }
}
/* ========= 移动端补丁（≤768px） ========= */
@media (max-width: 768px) {
    /* ---- 整体版块：缩小上下留白 ---- */
    .login-section {
        padding: 30px 10px;
    }

    /* ---- 登录/注册框：去圆角、缩内边距 ---- */
    .login-box {
        max-width: 100%;
        padding: 30px 10px 40px;
        border-radius: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    }

    /* ---- 标题：减小字号 ---- */
    .login-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    /* ---- 输入组：增大触控高度 ---- */
    .input-group input {
        height: 50px;
        font-size: 16px;          /* 防止 iOS 缩放 */
        padding: 0 12px;
    }
    .input-group label {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .link{
        font-size:13px;
    }

    /* ---- 验证码发送按钮：不折行 ---- */
    .btn-send {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        padding: 0 12px;
        white-space: nowrap;
    }

    /* ---- 错误提示：紧贴输入框 ---- */
    .input-err {
        font-size: 12px;
        margin: -15px 0 20px;
    }

    /* ---- 辅助行：减小字号 ---- */
    .login-helper {
        font-size: 14px;
    }

    /* ---- 复选框：放大触控区 ---- */
    .checkbox-wrap {
        font-size: 13px;
        white-space: nowrap;
    }
    .checkmark {
        width: 15px;
        height: 15px;
        margin-right:4px;
    }

    /* ---- 登录/注册按钮：全宽 + 增大高度 ---- */
    .btn-login {
        height: 50px;
        font-size: 18px;
        margin-bottom: 15px;
    }

    /* ---- 注册成功页：图标缩小 ---- */
    .success-icon img {
        width: 40px;
    }

    /* ---- 协议文字：缩小 ---- */
    .agree-wrap {
        font-size: 12px;
    }
}