@font-face{font-family:'Chuanqu';src:url('../fonts/chuanqu.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}

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

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
}

body{
  font-family:'Chuanqu','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
  color:#1a1028;
  line-height:1.6;
  background-image:url('../image/background_1.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* 整体布局：左侧表单 + 竖线 + 右侧空白 */
.register-layout{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:stretch;
}

/* 左侧表单面板：约 30% 宽度，半透明背景 */
.form-panel{
  flex:0 0 30%;
  min-width:300px;
  max-width:460px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5rem 2rem;
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  overflow-y:auto;
}

/* 表单本体 */
.register-form{
  width:100%;
  max-width:340px;
}

.form-title{
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:.35rem;
  color:#1a1028;
}

.form-sub{
  font-size:.85rem;
  color:#4a3a5e;
  margin-bottom:2rem;
  font-weight:600;
}

/* 输入项 */
.field{
  margin-bottom:1.15rem;
}

.field label{
  display:block;
  font-size:.8rem;
  font-weight:700;
  color:#3a2a4e;
  margin-bottom:.4rem;
  letter-spacing:.3px;
}

.field input{
  width:100%;
  font-family:inherit;
  font-size:.95rem;
  color:#1a1028;
  padding:.75rem 1rem;
  border-radius:12px;
  border:1.5px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.88);
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.field input::placeholder{
  color:#8a7a9e;
}

.field input:focus{
  border-color:#ff8fab;
  background:#ffffff;
  box-shadow:0 0 0 4px rgba(255,143,171,.25);
}

/* 验证码行：输入框 + 获取验证码按钮并排 */
.email-row{
  display:flex;
  gap:.6rem;
  align-items:stretch;
}

.email-row input{
  flex:1 1 auto;
  min-width:0;
}

/* 获取验证码按钮 —— 扁平化 */
.code-btn{
  flex:0 0 auto;
  font-family:inherit;
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
  padding:0 1.1rem;
  border-radius:12px;
  cursor:pointer;
  color:#fff;
  border:none;
  background:#8a63ff;
  transition:background .15s ease;
}

.code-btn:hover:not(:disabled){
  background:#7a4fff;
}

.code-btn:active:not(:disabled){
  background:#6a3fee;
}

.code-btn:disabled{
  cursor:not-allowed;
  color:#fff;
  background:#c9bfe0;
}

/* 记住我 + 忘记密码 */
.form-extra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:1.2rem;
  font-size:.8rem;
  font-weight:600;
}

.remember{
  display:flex;
  align-items:center;
  gap:.4rem;
  color:#3a2a4e;
  cursor:pointer;
}

.remember input{
  width:15px;
  height:15px;
  accent-color:#8a63ff;
  cursor:pointer;
}

.forgot{
  color:#7a4fff;
  font-weight:700;
  text-decoration:none;
  transition:color .15s ease;
}

.forgot:hover{
  color:#ff5f88;
}

/* 提交按钮 —— 扁平化 */
.submit-btn{
  width:100%;
  margin-top:.2rem;
  border:none;
  font-family:inherit;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.15em;
  color:#fff;
  padding:.9rem 1rem;
  border-radius:12px;
  cursor:pointer;
  background:#ff8fab;
  transition:background .15s ease;
}

.submit-btn:hover{
  background:#ff7a9c;
}

.submit-btn:active{
  background:#ff6a8c;
}

/* 底部链接 */
.form-foot{
  margin-top:1.4rem;
  font-size:.82rem;
  color:#3a2a4e;
  font-weight:600;
  text-align:center;
}

.form-foot a{
  color:#7a4fff;
  font-weight:800;
  text-decoration:none;
  transition:color .15s ease;
}

.form-foot a:hover{
  color:#ff5f88;
}

/* 分割竖线 —— 纯黑 */
.divider{
  flex:0 0 1px;
  width:1px;
  background:#000;
}

/* 右侧空白区域（保留给背景展示） */
.right-space{
  flex:1 1 auto;
}

/* ========== 平板适配 ========== */
@media(max-width:960px){
  .form-panel{
    flex:0 0 42%;
    min-width:0;
    padding:2rem 1.5rem;
  }
}

/* ========== 手机适配：表单铺满 ========== */
@media(max-width:820px){
  html,body{
    overflow-y:auto;
    height:auto;
    min-height:100%;
  }
  .register-layout{
    min-height:100vh;
  }
  .form-panel{
    flex:1 1 100%;
    max-width:none;
    min-width:0;
    height:auto;
    min-height:100vh;
    padding:3rem 1.5rem;
    background:rgba(255,255,255,.55);
    align-items:center;
  }
  .divider{display:none}
  .right-space{display:none}
}

/* ========== 小屏手机 ========== */
@media(max-width:480px){
  .form-panel{
    padding:2rem 1.15rem;
  }
  .register-form{
    max-width:100%;
  }
  .form-title{
    font-size:1.45rem;
  }
  .form-sub{
    font-size:.8rem;
    margin-bottom:1.5rem;
  }
  .field{
    margin-bottom:1rem;
  }
  .field input{
    font-size:16px;
    padding:.7rem .9rem;
  }
  .email-row{
    flex-direction:column;
    gap:.55rem;
  }
  .code-btn{
    width:100%;
    padding:.7rem 1rem;
    font-size:.85rem;
    border-radius:12px;
  }
  .submit-btn{
    padding:.85rem 1rem;
    font-size:.95rem;
  }
  .form-foot{
    font-size:.78rem;
  }
}

/* ========== 超小屏 ========== */
@media(max-width:360px){
  .form-panel{
    padding:1.5rem 1rem;
  }
  .form-title{
    font-size:1.3rem;
  }
  .field input{
    padding:.65rem .8rem;
  }
}