/* ============================================================
   登录 / 注册弹窗
   作用域全部 .bsm- 前缀，不影响宿主页面

   设计说明（对应界面设计稿「登录弹窗」屏）：
     旧版是 880px 左右分栏，左栏一整块冷灰黑渐变（#171b21→#37424f），
     跟站点的暖米纸感完全割裂，点缀色也用的是另一套薄荷绿和亮金。
     新版收窄成 432px 单栏，去掉深色块，顶部用四色书脊做品牌锚点，
     颜色全部回到站点体系。
   ============================================================ */

.bsm-mask{
  position:fixed; inset:0; background:rgba(27,31,36,.42);
  backdrop-filter:blur(3px); z-index:9000;
  opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s;
}
.bsm-mask.show{opacity:1; visibility:visible;}

.bsm{
  position:fixed; z-index:9001; top:50%; left:50%;
  transform:translate(-50%,-46%) scale(.97);
  width:min(432px,calc(100vw - 32px));
  max-height:calc(100vh - 40px); overflow-y:auto;
  background:#fff; border-radius:20px;
  box-shadow:0 30px 70px -24px rgba(27,31,36,.42), 0 2px 6px rgba(27,31,36,.06);
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  color:#1b1f24;
  opacity:0; visibility:hidden;
  transition:opacity .22s, transform .22s, visibility .22s;
}
.bsm.show{opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1);}

/* 顶部四色书脊 —— 品牌锚点 */
.bsm-spine{display:flex; height:6px;}
.bsm-spine i{flex:1;}
.bsm-spine i:nth-child(1){background:#5b43c6;}
.bsm-spine i:nth-child(2){background:#8a5a08;}
.bsm-spine i:nth-child(3){background:#0f5cad;}
.bsm-spine i:nth-child(4){background:#0e7a5f;}

.bsm-body{padding:26px 30px 24px;}

.bsm-close{
  float:right; margin:-6px -12px 0 0;
  width:30px; height:30px; border-radius:50%; border:none;
  background:#f4f3ef; color:#6b7280; cursor:pointer; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.bsm-close:hover{background:#eae8e1; color:#1b1f24;}

.bsm h3{margin:0 0 5px; font-size:19px; font-weight:700; letter-spacing:-.01em;}
.bsm .sub{margin:0 0 18px; font-size:12.5px; color:#6b7280; line-height:1.65;}

/* ---------- 注册好处 ---------- */
.bsm-perks{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px;}
.bsm-perk{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; color:#3a4046;
  background:#faf9f6; border:1px solid #e6e4df;
  border-radius:9px; padding:6px 11px;
}
.bsm-perk svg{color:#8a5a08; flex:none;}

/* ---------- 表单 ---------- */
.bsm-fld{margin-bottom:14px;}
.bsm-fld label{display:block; font-size:12px; font-weight:600; color:#3a4046; margin-bottom:6px;}
.bsm-in{
  display:flex; align-items:center;
  border:1px solid #e6e4df; border-radius:11px;
  background:#fff; transition:.16s; overflow:hidden;
}
.bsm-in:focus-within{border-color:#0e7a5f; box-shadow:0 0 0 3px rgba(14,122,95,.09);}
.bsm-in .pfx{padding:0 0 0 14px; font-size:13.5px; color:#6b7280; font-weight:600; flex:none;}
.bsm-in input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  padding:12px 14px; font-size:14.5px; font-family:inherit; color:#1b1f24; letter-spacing:.02em;
}
.bsm-in input::placeholder{color:#b8b5ae; letter-spacing:0;}
.bsm-in .side{
  flex:none; border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600; color:#0e7a5f;
  padding:0 14px; border-left:1px solid #e6e4df; align-self:stretch;
}
.bsm-in .side:hover:not(:disabled){background:#f3faf7;}
.bsm-in .side:disabled{color:#b8b5ae; cursor:not-allowed; background:none;}
.bsm-hint{font-size:11.5px; color:#8a8780; margin-top:6px;}

/* ---------- 提示 ---------- */
.bsm-msg{display:none; font-size:12.5px; border-radius:9px; padding:9px 13px; margin-bottom:14px; line-height:1.6;}
.bsm-msg.err{background:#fdeceb; color:#8a1b21; display:block;}
.bsm-msg.ok{background:#e3f4ee; color:#0a5a45; display:block;}

/* ---------- 主按钮 ---------- */
.bsm-submit{
  width:100%; border:none; border-radius:11px; cursor:pointer;
  background:#0e7a5f; color:#fff; font-size:15px; font-weight:600;
  padding:13px 0; font-family:inherit; transition:.16s; margin-top:4px;
}
.bsm-submit:hover:not(:disabled){background:#0c6b53; transform:translateY(-1px);}
.bsm-submit:disabled{opacity:.6; cursor:not-allowed; transform:none;}

/* ---------- 协议 ---------- */
.bsm-agree{
  display:flex; align-items:flex-start; gap:8px;
  font-size:11.5px; color:#8a8780; line-height:1.6; margin:16px 0 14px;
}
.bsm-agree input{margin:2px 0 0; accent-color:#0e7a5f; flex:none; width:14px; height:14px;}
.bsm-agree a{color:#0e7a5f; text-decoration:none; font-weight:600;}
.bsm-agree a:hover{text-decoration:underline;}

.bsm-or{display:flex; align-items:center; gap:12px; margin:18px 0; font-size:11.5px; color:#b8b5ae;}
.bsm-or::before,.bsm-or::after{content:''; flex:1; height:1px; background:#e6e4df;}

/* ---------- 微信（等资质，禁用态）---------- */
.bsm-wx{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid #e6e4df; background:#fff; border-radius:11px;
  padding:11px 0; font-size:13.5px; font-weight:600; color:#b8b5ae;
  cursor:not-allowed; font-family:inherit;
}
.bsm-wx small{margin-left:auto; margin-right:14px; font-size:10.5px; font-weight:400; color:#c4c1ba;}

.bsm-foot{
  text-align:center; font-size:11.5px; color:#8a8780;
  padding:13px 16px; background:#faf9f6; border-top:1px solid #f1efe9; line-height:1.7;
}

@media (max-width:480px){
  .bsm-body{padding:22px 20px 20px;}
  .bsm-perks{gap:6px;}
  .bsm-perk{padding:5px 9px; font-size:11px;}
}