/* ===========================================================
   代理商登录页 - 专属样式
   风格：深色品牌渐变 + 白色浮层卡片 + 左侧品牌展示区
   =========================================================== */

.mb-login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, #0f2f6b 0%, #1f56bd 48%, #2d6cdf 100%);
  padding:28px 18px;
  position:relative;
  overflow:hidden;
}

/* 背景装饰网格 */
.mb-login-page::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:52px 52px;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
  mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
}

/* 悬浮光球 */
.mb-login-page::after{
  content:'';
  position:absolute;
  width:520px; height:520px;
  right:-170px; top:-170px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(120,180,255,.30), transparent 68%);
  pointer-events:none;
}

.mb-login-wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:880px;
  display:grid;
  grid-template-columns:1fr 400px;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(8,20,50,.34), 0 0 0 1px rgba(255,255,255,.10);
}

/* ---------- 左侧品牌区 ---------- */
.mb-brand{
  padding:44px 40px;
  color:#fff;
  background:
    radial-gradient(700px 400px at 0% 0%, rgba(255,255,255,.14), transparent 62%),
    linear-gradient(150deg, #16386f 0%, #1f56bd 55%, #2d6cdf 100%);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.mb-brand::after{
  content:'';
  position:absolute;
  right:-90px; bottom:-110px;
  width:300px; height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.13), transparent 70%);
}
.mb-brand-logo{
  width:54px; height:54px;
  border-radius:15px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  backdrop-filter:blur(6px);
}
.mb-brand-title{
  font-size:24px;
  font-weight:700;
  letter-spacing:.5px;
  line-height:1.35;
  margin-bottom:8px;
}
.mb-brand-sub{
  font-size:13.5px;
  color:rgba(255,255,255,.78);
  line-height:1.75;
  margin-bottom:30px;
}
.mb-brand-list{
  list-style:none;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.mb-brand-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13.5px;
  color:rgba(255,255,255,.92);
}
.mb-brand-list svg{
  flex-shrink:0;
  width:17px; height:17px;
  padding:3px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  stroke-width:2.6;
}
.mb-brand-foot{
  margin-top:auto;
  padding-top:26px;
  position:relative;
  z-index:2;
  font-size:12px;
  color:rgba(255,255,255,.55);
  line-height:1.8;
}

/* ---------- 右侧表单区 ---------- */
.mb-form{
  padding:44px 40px 34px;
  display:flex;
  flex-direction:column;
}
.mb-form-head{
  margin-bottom:26px;
}
.mb-form-title{
  font-size:21px;
  font-weight:600;
  color:#1f2329;
  margin-bottom:6px;
}
.mb-form-desc{
  font-size:13px;
  color:#8f959e;
}

.mb-field{
  margin-bottom:16px;
}
.mb-field-label{
  display:block;
  font-size:13px;
  color:#51565d;
  font-weight:500;
  margin-bottom:7px;
}
.mb-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.mb-input-icon{
  position:absolute;
  left:13px;
  color:#c4c8ce;
  pointer-events:none;
  display:flex;
  transition:.18s;
}
.mb-input{
  width:100%;
  height:46px;
  padding:0 14px 0 40px;
  font-size:15px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:#1f2329;
  background:#f7f9fc;
  border:1.5px solid #e8eaed;
  border-radius:9px;
  outline:none;
  transition:.18s;
}
.mb-input::placeholder{color:#b6bbc4}
.mb-input:hover{border-color:#d4d8de;background:#fff}
.mb-input:focus{
  border-color:#2d6cdf;
  background:#fff;
  box-shadow:0 0 0 3px rgba(45,108,223,.13);
}
.mb-input:focus ~ .mb-input-icon{color:#2d6cdf}
.mb-eye{
  position:absolute;
  right:12px;
  background:none;border:none;
  padding:5px;
  color:#c4c8ce;
  cursor:pointer;
  display:flex;
  border-radius:5px;
  transition:.15s;
}
.mb-eye:hover{color:#8f959e;background:#f2f4f7}

.mb-submit{
  width:100%;
  height:46px;
  margin-top:6px;
  font-size:15.5px;
  font-weight:500;
  font-family:inherit;
  color:#fff;
  background:linear-gradient(135deg,#2d6cdf,#1f56bd);
  border:none;
  border-radius:9px;
  cursor:pointer;
  transition:.18s;
  box-shadow:0 4px 14px rgba(45,108,223,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.mb-submit:hover{
  background:linear-gradient(135deg,#1f56bd,#16408f);
  box-shadow:0 6px 18px rgba(45,108,223,.36);
  transform:translateY(-1px);
}
.mb-submit:active{transform:translateY(0)}
.mb-submit:disabled{opacity:.66;cursor:not-allowed;transform:none}

.mb-tip{
  margin-top:14px;
  font-size:12.5px;
  color:#8f959e;
  text-align:center;
  line-height:1.7;
}

.mb-err{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:11px 13px;
  background:#ffebec;
  border:1px solid #f6c3c4;
  color:#c22;
  font-size:13px;
  line-height:1.6;
  border-radius:8px;
  margin-bottom:18px;
}
.mb-err svg{flex-shrink:0;margin-top:2px}

.mb-form-foot{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid #f0f2f5;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:#8f959e;
}
.mb-form-foot a{color:#8f959e;text-decoration:none;transition:.15s}
.mb-form-foot a:hover{color:#2d6cdf}
.mb-form-foot span.sep{color:#e8eaed}

/* ---------- 响应式 ---------- */
@media (max-width:820px){
  .mb-login-wrap{grid-template-columns:1fr;max-width:420px}
  .mb-brand{
    padding:30px 26px 26px;
  }
  .mb-brand-title{font-size:20px;margin-bottom:6px}
  .mb-brand-sub{margin-bottom:20px;font-size:13px}
  .mb-brand-list{gap:10px}
  .mb-brand-list li{font-size:12.5px}
  .mb-brand-foot{display:none}
  .mb-brand-logo{width:46px;height:46px;margin-bottom:16px}
  .mb-form{padding:30px 26px 26px}
}
@media (max-width:420px){
  .mb-login-page{padding:0}
  .mb-login-wrap{
    max-width:100%;
    min-height:100vh;
    border-radius:0;
    box-shadow:none;
  }
  .mb-brand{padding:26px 22px 22px}
  .mb-form{padding:26px 22px 30px}
}