/* ===== 布局基础 ===== */
html,body{height:100%;margin: 0;           /* 去掉任何默认 margin */}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:#f5f7fa;
  display:flex;
  align-items:center;          /* 垂直居中 */
  justify-content:center;      /* 水平居中 */
  padding:0 16px;              /* 小屏左右留白 */
  color:#333;
}

/* ===== 主登录卡片 ===== */
#login-container{
  width:100%;                  /* 先占满，再收窄 */
  max-width:340px;             /* PC 端保持设计宽度 */
  box-sizing:border-box;       /* 让 padding 不把卡片挤大 */
  margin:0 auto;               /* 双保险 —— 即使父级 flex 被覆盖也能居中 */
  padding:32px 24px 40px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  text-align:center;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#login-container h2{
  margin:0 0 24px;
  font-size:22px;
  letter-spacing:1px;
  font-weight:600;
}

#qr-wrapper{
  width:260px;height:260px;
  margin:0 auto 24px;
  border:1px solid #e5e6eb;
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
}
#qr-wrapper img{width:240px;height:240px;}

/* ===== 主按钮 ===== */
#login-container button{
  width:100%;
  padding:10px 0;
  font-size:15px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:all .2s;
}
#btn-phone-login{
  background:#4078ff;
  color:#fff;
}
#btn-phone-login:hover{background:#225ff9;}

/* ===== 通用隐藏类 ===== */
.hidden{display:none!important;}

/* ===== 模态层通用 ===== */
.modal{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
}
.modal-body{
  width:320px;
  background:#fff;
  border-radius:10px;
  padding:24px 20px;
  box-shadow:0 4px 18px rgba(0,0,0,.1);
}
.modal-body h3{margin:0 0 18px;font-size:18px;text-align:center;}

.modal-body label{
  font-size:14px;
  display:block;
  margin-bottom:14px;
  color:#555;
}
.modal-body input,
.modal-body select{
  width:100%;
  box-sizing:border-box;
  padding:8px 10px;
  margin-top:6px;
  border:1px solid #d6d8db;
  border-radius:5px;
  font-size:14px;
}
.modal-body button[type="button"],
.modal-body button[type="submit"]{
  margin-top:6px;
  width:100%;
  background:#4078ff;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:10px 0;
  cursor:pointer;
}
.modal-body button[type="button"]:hover,
.modal-body button[type="submit"]:hover{
  background:#225ff9;
}

/* 小按钮（发送验证码） */
#btn-send-code{
  margin-top:10px;
  width:auto;
  padding:6px 12px;
  font-size:12px;
  background:#00b434;
}
#btn-send-code:hover{background:#009428;}

/* ===== 二维码过期提示 ===== */
#qr-expired {
  margin: 8px auto 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f44336;           /* 红色提示 */
  font-size: 14px;
}

#qr-expired .refresh-icon {
  width : 14px;
  height: 14px;
  cursor: pointer;
  fill  : currentColor;
  transition: transform .2s ease;
}

#qr-expired .refresh-icon:hover {
  transform: rotate(90deg);
}

/*极窄屏优化*/
@media (max-width:480px){
  #qr-wrapper{width:70vw;height:70vw;}
  #qr-wrapper img{width:100%;height:100%;}
}

/* 表单小提示（红色小字） */
.form-tip{
  display:block;         /* 独占一行，也可以让它跟随 select 下方 */
  margin-top:4px;
  font-size:12px;
  line-height:1.4;
  color:#f44336;         /* 红色 */
}