/* ==========================================================================
   观客来 AI 支付 · PC 登录页  v4
   在 v3 基础上：
     ① 主色由「印章朱红 #C8102E」→「深蓝 #2563EB / 海军渐变 #0E3260→#113F7C」
        （理由：左栏已改为收银台顶部深蓝底，按钮同源才成体系；朱红降级为点缀）
     ② 主按钮 = 海军渐变；交互反馈 / 焦点环 = #2563EB
     ③ 新增「选择商户（或账号）」遮罩层 .lr-pick，配 v4-pick.js
   回滚：删除 index.html 对本文件的引用即可
   ========================================================================== */

/* ==========================================================================
   观客来 AI 支付 · PC 登录页视觉重绘  v1
   文件   : login-skin.css
   性质   : 纯 CSS 覆盖层（不改 DOM / 不改 JS / 不动 Element 组件行为）
   范围   : 全部选择器限定在 .login-container 内，不影响后台其它页面
   回滚   : 移除本文件引用即可，其余零改动
   品牌色 : 取「观客来」印章朱红 #2563EB，配墨色，中国风 + 现代金融质感
   左栏   : 内容取自新 UI（merchant.boomke.com/v1/login）左栏 brand-pane，
            背景取自收银台 v2 顶部 .head（深蓝渐变 #0A2540→#0E3260→#113F7C
            + 28px 网格 + 红/蓝双径向光晕），由 brand-left.js 注入 DOM。
   ========================================================================== */

/* 变量只挂在 .login-container 上，零全局污染 */
.login-container{
  --lr-brand:        #2563EB;
  --lr-brand-deep:   #1D4ED8;
  --lr-brand-bright: #3B82F6;
  --lr-ink:          #1F2328;
  --lr-ink-2:        #6B7280;
  --lr-ink-3:        #9AA0A8;
  --lr-line:         #E6E9EE;
  --lr-field:        #F6F7F9;
  --lr-radius:       12px;
  --lr-h:            48px;
}

/* ---------- 0. 字体栈（避免中文回落宋体） ---------- */
.login-container,
.login-container input,
.login-container button,
.login-container .el-form,
.login-container .el-checkbox__label{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 1. 全屏底色 ---------- */
.login-container{
  background:
    radial-gradient(900px 520px at 10% 4%,  rgba(37,99,235,.10), transparent 62%),
    radial-gradient(820px 600px at 94% 96%, rgba(27,111,181,.10), transparent 62%),
    linear-gradient(180deg,#FBFBFC 0%, #EFF1F5 100%);
  animation: none;                /* 关掉旧的 animate-cloud 背景位移动画 */
  padding: 24px;
  box-sizing: border-box;
}

/* ---------- 2. 卡片外壳 ---------- */
.login-container .login-weaper{
  display: flex;
  width: 1160px;
  max-width: 96vw;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 34px 80px -26px rgba(16,20,28,.42),
    0 8px 24px -12px rgba(16,20,28,.16),
    0 0 0 1px rgba(16,20,28,.05);
  animation: lr-card-in .62s cubic-bezier(.22,1,.36,1) both;
}
@keyframes lr-card-in{
  from{ opacity:0; transform: translateY(26px) scale(.985); }
  to  { opacity:1; transform: none; }
}

.login-container .login-left,
.login-container .login-border{
  float: none;
  min-height: 566px;
  box-sizing: border-box;
}
.login-container .login-left { width: 54%; }
.login-container .login-border{ width: 46%; }

/* ---------- 3. 左栏：品牌视觉区 ----------
   背景 = 收银台 v2 顶部 .head 的 1:1 复刻（深蓝渐变 + 网格 + 双径向光晕）
   内容 = 新 UI 左栏 brand-pane 的 1:1 复刻（见 brand-left.js 注入的 .lr-brand），
          仅把配色由浅色主题（--gkl-* light）换算到深蓝底，其余（字号/间距/栅格）原样保留。
   -------------------------------------------------------------------------- */
.login-container .login-left{
  display: block;              /* 原为 flex 居中；改为文档流以承载品牌长内容 */
  border-radius: 0;
  color: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 46px 42px;
  background: linear-gradient(135deg, #0A2540 0%, #0E3260 60%, #113F7C 100%);
}
/* 光晕（收银台 .head::before） */
.login-container .login-left::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 16%, rgba(200,34,43,.24), transparent 52%),
    radial-gradient(circle at 10% 88%, rgba(22,104,220,.40), transparent 56%);
}
/* 网格 28px，向下渐隐（收银台 .head::after） */
.login-container .login-left::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 88%);
          mask-image: linear-gradient(180deg, #000, transparent 88%);
}
.login-container .login-left > *{
  position: relative;
  z-index: 1;
}

/* ===== 品牌内容（.lr-brand，由 brand-left.js 注入） ===== */
/* 字标行 */
.login-container .login-left .brand-lockup{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  animation: lr-fade-up .6s cubic-bezier(.22,1,.36,1) .08s both;
}
.login-container .login-left .brand-mark{
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(145deg, #5AA9FF 0%, #2563EB 100%);
  box-shadow:
    0 10px 22px -8px rgba(37,99,235,.85),
    0 0 0 1px rgba(255,255,255,.20) inset;
}
.login-container .login-left .brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.login-container .login-left .brand-name{
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #fff;
}
.login-container .login-left .brand-tagline{
  font-size: 12px;
  letter-spacing: 2.2px;
  color: #8CCBFF;
  margin-top: 1px;
}
.login-container .login-left .brand-sub{
  font-size: 11px;
  letter-spacing: 2.6px;
  color: rgba(255,255,255,.48);
}

/* 主标题 */
.login-container .login-left .brand-h1{
  font-size: 30px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: .4px;
  color: #fff;
  margin: 0 0 16px;
  animation: lr-fade-up .6s cubic-bezier(.22,1,.36,1) .14s both;
}
.login-container .login-left .brand-h1 b{
  font-weight: 600;
  color: #8CCBFF;
}
.login-container .login-left .h1-sub{
  display: block;
  margin-top: 9px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .2px;
  color: rgba(255,255,255,.66);
}

/* 正文 */
.login-container .login-left .brand-lead{
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(255,255,255,.68);
  margin: 0 0 18px;
  max-width: 560px;
}
.login-container .login-left .brand-lead b{
  font-weight: 600;
  color: #fff;
}
.login-container .login-left .brand-slogan{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .6px;
  color: #8CCBFF;
  margin: -6px 0 20px;
  max-width: 560px;
}

/* 关键词胶囊 */
.login-container .login-left .kw-row{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
}
.login-container .login-left .kw{
  font-size: 12px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.17);
  background: rgba(255,255,255,.07);
}
.login-container .login-left .kw.kw-hot{
  color: #8CCBFF;
  border-color: rgba(122,190,255,.45);
  background: rgba(122,190,255,.14);
  font-weight: 600;
  letter-spacing: .6px;
}

/* 四点能力 */
.login-container .login-left .brand-points{
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.login-container .login-left .brand-points li{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 13px;
  position: relative;
}
.login-container .login-left .brand-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: #8CCBFF;
  opacity: .85;
}
.login-container .login-left .brand-points li b{
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}
.login-container .login-left .brand-points li span{
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255,255,255,.52);
}

/* 底部三格：API / MCP / LLM */
.login-container .login-left .agent-strip{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}
.login-container .login-left .agent-cell{
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.login-container .login-left .agent-head{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.login-container .login-left .agent-note{
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.5);
}
.login-container .login-left .dot{
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-block;
}
.login-container .login-left .dot.is-on{
  background: #34D399;
  box-shadow: 0 0 6px rgba(52,211,153,.85);
}
.login-container .login-left .dot.is-plan{
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35);
}

/* 注入成功后隐藏旧品牌元素；无 JS（未注入）时旧品牌原样保留，页面不会开天窗 */
.login-container .login-left.lr-brand-on > .img,
.login-container .login-left.lr-brand-on > .title{
  display: none !important;
}

@keyframes lr-fade-up{
  from{ opacity:0; transform: translateY(10px); }
  to  { opacity:1; transform: none; }
}

/* ==========================================================================
   v3 · 右栏重做：双 tab（账号 / 短信） + 滑动验证码 + 第三方登录
   左栏保持 v2 原样（深蓝底 + brand-pane 内容），本段只重写右栏与响应式。
   ========================================================================== */

/* ---------- 4. 右栏容器 ---------- */
.login-container .login-border{
  border-radius: 0;
  background: #fff;
  color: var(--lr-ink);
  box-shadow: inset 1px 0 0 rgba(16,20,28,.045);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 0;
  box-sizing: border-box;
}
.login-container .login-main{
  width: 86%;
  max-width: 398px;
  margin: 0;
  box-sizing: border-box;
}

/* ---------- 4.1 标题区（真实节点，取代原伪元素） ---------- */
.login-container .lr-head{ margin-bottom: 18px; }
.login-container .lr-head h2{
  margin: 0 0 7px;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 1px;
  color: var(--lr-ink);
  animation: lr-fade-up .55s cubic-bezier(.22,1,.36,1) .04s both;
}
.login-container .lr-head p{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .4px;
  color: var(--lr-ink-3);
  animation: lr-fade-up .55s cubic-bezier(.22,1,.36,1) .08s both;
}

/* ---------- 4.2 双 tab ---------- */
.login-container .lr-tabs{
  display: flex;
  gap: 28px;
  border-bottom: 1px solid #EEF0F4;
  margin-bottom: 18px;
  animation: lr-fade-up .55s cubic-bezier(.22,1,.36,1) .12s both;
}
.login-container .lr-tab{
  position: relative;
  padding: 0 1px 11px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .6px;
  color: var(--lr-ink-2);
  cursor: pointer;
  transition: color .2s;
}
.login-container .lr-tab:hover{ color: var(--lr-ink); }
.login-container .lr-tab.is-on{ color: var(--lr-brand); font-weight: 600; }
.login-container .lr-tab.is-on::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lr-brand-bright), var(--lr-brand));
}

/* ---------- 4.3 滑动验证码 ---------- */
.login-container .lr-cap{
  position: relative;
  height: var(--lr-h);
  margin-bottom: 16px;
  border-radius: var(--lr-radius);
  border: 1.5px solid var(--lr-line);
  background: #F4F6F8;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  animation: lr-fade-up .55s cubic-bezier(.22,1,.36,1) .16s both;
}
.login-container .lr-cap-fill{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(37,99,235,.07), rgba(37,99,235,.20));
}
.login-container .lr-cap-tip{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 46px;
  box-sizing: border-box;
  font-size: 13px;
  letter-spacing: .6px;
  color: var(--lr-ink-3);
  pointer-events: none;
  transition: color .2s;
}
.login-container .lr-cap-handle{
  position: absolute;
  left: 2px; top: 2px;
  width: 56px;
  height: calc(var(--lr-h) - 4px - 3px);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16,20,28,.15), 0 0 0 1px rgba(16,20,28,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  will-change: left;
  transition: background .22s;
}
.login-container .lr-cap-handle svg{
  width: 18px; height: 18px;
  stroke: var(--lr-ink-3);
  transition: stroke .22s;
}
.login-container .lr-cap.is-drag .lr-cap-handle{ cursor: grabbing; }
.login-container .lr-cap.is-ok{
  border-color: #38C97C;
  background: rgba(56,201,124,.09);
}
.login-container .lr-cap.is-ok .lr-cap-fill{
  background: linear-gradient(90deg, rgba(56,201,124,.10), rgba(56,201,124,.24));
}
.login-container .lr-cap.is-ok .lr-cap-tip{ color: #189A5C; font-weight: 600; }
.login-container .lr-cap.is-ok .lr-cap-handle{ background: #38C97C; }
.login-container .lr-cap.is-ok .lr-cap-handle svg{ stroke: #fff; }
.login-container .lr-cap.is-err{ border-color: #E4143C; }
.login-container .lr-cap.is-err .lr-cap-tip{ color: #E4143C; }
.login-container .lr-cap.is-err{ animation: lr-shake .4s; }
@keyframes lr-shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}

/* ---------- 4.4 短信登录面板 ---------- */
.login-container .lr-sms{ display: none; }
.login-container .login-main.lr-mode-sms .login-form{ display: none !important; }
.login-container .login-main.lr-mode-sms .lr-sms{ display: block; animation: lr-fade-up .4s cubic-bezier(.22,1,.36,1) both; }

.login-container .lr-sms .lr-field{
  position: relative;
  margin-bottom: 16px;
}
/* 自定义输入框：与 Element 输入框视觉完全一致 */
.login-container .lr-input{
  width: 100%;
  height: var(--lr-h);
  box-sizing: border-box;
  border: 1.5px solid transparent;
  border-radius: var(--lr-radius);
  background: var(--lr-field);
  padding: 0 16px 0 42px;
  font-family: inherit;
  font-size: 14px;
  color: var(--lr-ink);
  outline: none;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.login-container .lr-input::placeholder{ color: var(--lr-ink-3); }
.login-container .lr-input:hover{ background: #F1F3F6; }
.login-container .lr-input:focus{
  background: #fff;
  border-color: var(--lr-brand);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}
.login-container .lr-field .lr-ico{
  position: absolute;
  left: 13px; top: 0;
  height: var(--lr-h);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.login-container .lr-field .lr-ico svg{
  width: 18px; height: 18px;
  stroke: var(--lr-ink-3);
  transition: stroke .2s;
}
.login-container .lr-field.is-focus .lr-ico svg{ stroke: var(--lr-brand); }
.login-container .lr-field .lr-cc{
  position: absolute;
  left: 40px; top: 0;
  height: var(--lr-h);
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--lr-ink-2);
  pointer-events: none;
}
.login-container .lr-field.has-cc .lr-input{ padding-left: 84px; }
.login-container .lr-field .lr-send{
  position: absolute;
  right: 6px; top: 6px;
  height: calc(var(--lr-h) - 12px);
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: rgba(37,99,235,.08);
  color: var(--lr-brand);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.login-container .lr-field .lr-send:hover:not(:disabled){ background: rgba(37,99,235,.14); }
.login-container .lr-field .lr-send:disabled{
  background: #F0F2F5;
  color: #A8AEB8;
  cursor: not-allowed;
}
.login-container .lr-sms .lr-input-code{ padding-right: 108px; }

/* 短信面板的协议行与按钮 */
.login-container .lr-sms .lr-agree{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--lr-ink-2);
  cursor: pointer;
}
.login-container .lr-sms .lr-agree input{
  appearance: none;
  -webkit-appearance: none;
  width: 15px; height: 15px;
  margin: 3px 0 0;
  flex-shrink: 0;
  border: 1px solid #CBD0D8;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background .2s, border-color .2s;
}
.login-container .lr-sms .lr-agree input:checked{
  background: var(--lr-brand);
  border-color: var(--lr-brand);
}
.login-container .lr-sms .lr-agree input:checked::after{
  content: '';
  position: absolute;
  left: 4.5px; top: 1px;
  width: 3.5px; height: 7.5px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(43deg);
}
.login-container .lr-sms .lr-agree em{
  font-style: normal;
  color: var(--lr-brand);
  font-weight: 500;
}
.login-container .lr-sms .lr-submit{
  width: 100%;
  height: 50px;
  margin-top: 18px;
  border: none;
  border-radius: var(--lr-radius);
  background: linear-gradient(135deg, var(--lr-brand-bright) 0%, var(--lr-brand) 55%, var(--lr-brand-deep) 100%);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 5px;
  text-indent: 5px;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(37,99,235,.55);
  transition: transform .18s, box-shadow .22s, filter .22s;
}
.login-container .lr-sms .lr-submit:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.login-container .lr-sms .lr-submit:active{ transform: translateY(0); filter: brightness(.97); }

/* ---------- 4.5 第三方登录 ---------- */
.login-container .lr-oauth{
  margin-top: 20px;
  animation: lr-fade-up .55s cubic-bezier(.22,1,.36,1) .30s both;
}
.login-container .lr-oauth-sep{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  color: #A8AEB8;
}
.login-container .lr-oauth-sep::before,
.login-container .lr-oauth-sep::after{
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #EEF0F4;
}
.login-container .lr-oauth-row{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.login-container .lr-oauth-btn{
  flex: 1 1 0;
  min-width: 0;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1.5px solid var(--lr-line);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: #4A5260;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .18s, box-shadow .2s;
}
.login-container .lr-oauth-btn svg{ width: 17px; height: 17px; flex-shrink: 0; }
.login-container .lr-oauth-btn:hover{
  border-color: var(--lr-brand);
  color: var(--lr-brand);
  background: #FFF8F9;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(37,99,235,.5);
}

/* ---------- 4.6 底部链接 ---------- */
.login-container .lr-foot{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--lr-ink-3);
  animation: lr-fade-up .55s cubic-bezier(.22,1,.36,1) .34s both;
}
.login-container .lr-foot a{
  color: var(--lr-ink-2);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
}
.login-container .lr-foot a:hover{ color: var(--lr-brand); }
.login-container .lr-foot i{ font-style: normal; color: #D8DCE3; }

/* ---------- 5. 表单控件（沿用 v1/v2，微调间距） ---------- */
.login-container .login-form{ margin: 0; }
.login-container .login-form .el-form-item{ margin-bottom: 16px; }
.login-container .login-form .el-form-item__content{ line-height: normal; }
.login-container .login-form .el-col{ margin-bottom: 0; }

.login-container .login-form .el-input__inner{
  height: var(--lr-h);
  line-height: var(--lr-h);
  font-size: 14px;
  color: var(--lr-ink);
  background: var(--lr-field);
  border: 1.5px solid transparent;
  border-radius: var(--lr-radius);
  padding: 0 44px 0 42px;
  text-indent: 0;
  transition: background .2s, border-color .2s, box-shadow .2s;
  box-shadow: none;
}
.login-container .login-form .el-input__inner::placeholder{ color: var(--lr-ink-3); }
.login-container .login-form .el-input__inner:hover{ background: #F1F3F6; }
.login-container .login-form .el-input__inner:focus{
  background: #fff;
  border-color: var(--lr-brand);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

/* 前缀图标 —— 内联 SVG mask，不依赖外部 iconfont */
.login-container .login-form .el-input__prefix{
  left: 13px; top: 0;
  height: 100%;
  line-height: var(--lr-h);
  display: flex;
  align-items: center;
  width: auto;
}
.login-container .login-form .el-input__prefix i[class^="icon-"]{
  font-size: 0 !important;
  display: inline-block;
  width: 18px; height: 18px;
  background-color: var(--lr-ink-3);
  -webkit-mask-repeat: no-repeat;         mask-repeat: no-repeat;
  -webkit-mask-position: center;          mask-position: center;
  -webkit-mask-size: 18px 18px;           mask-size: 18px 18px;
  transition: background-color .2s;
}
.login-container .login-form .el-input__prefix i.icon-yonghu{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.6'/%3E%3Cpath d='M4.6 20.2c.7-3.6 3.8-5.8 7.4-5.8s6.7 2.2 7.4 5.8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.6'/%3E%3Cpath d='M4.6 20.2c.7-3.6 3.8-5.8 7.4-5.8s6.7 2.2 7.4 5.8'/%3E%3C/svg%3E");
}
.login-container .login-form .el-input__prefix i.icon-mima{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.2' width='14.8' height='10.2' rx='2.6'/%3E%3Cpath d='M8.2 10.2V7.6a3.8 3.8 0 0 1 7.6 0v2.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.2' width='14.8' height='10.2' rx='2.6'/%3E%3Cpath d='M8.2 10.2V7.6a3.8 3.8 0 0 1 7.6 0v2.6'/%3E%3C/svg%3E");
}
.login-container .login-form .el-input__prefix i.icon-yanzhengma{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 19 6v5.4c0 4.3-2.9 7.7-7 9.4-4.1-1.7-7-5.1-7-9.4V6z'/%3E%3Cpath d='m9.2 12.2 2 2 3.6-3.7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 19 6v5.4c0 4.3-2.9 7.7-7 9.4-4.1-1.7-7-5.1-7-9.4V6z'/%3E%3Cpath d='m9.2 12.2 2 2 3.6-3.7'/%3E%3C/svg%3E");
}
.login-container .login-form .el-input__inner:focus ~ .el-input__prefix i[class^="icon-"]{
  background-color: var(--lr-brand);
}

/* 密码可见性图标 */
.login-container .login-form .el-input__suffix{
  right: 12px; top: 0;
  height: 100%;
  line-height: var(--lr-h);
}
.login-container .login-form .el-input__suffix .el-input__suffix-inner{
  display: flex;
  align-items: center;
  height: 100%;
}
.login-container .login-form .el-input__suffix .el-input__icon.el-icon-view{
  font-size: 0 !important;
  display: inline-block;
  width: 18px; height: 18px;
  background-color: var(--lr-ink-3);
  cursor: pointer;
  transition: background-color .2s;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
  -webkit-mask-size: 18px 18px;     mask-size: 18px 18px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 12S6.2 5.6 12 5.6 21.4 12 21.4 12 17.8 18.4 12 18.4 2.6 12 2.6 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 12S6.2 5.6 12 5.6 21.4 12 21.4 12 17.8 18.4 12 18.4 2.6 12 2.6 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}
.login-container .login-form .el-input__suffix .el-input__icon.el-icon-view:hover{
  background-color: var(--lr-brand);
}

/* 验证码行：flex 精确控制，避免 el-col 百分比 + margin 累加溢出 */
.login-container .login-form .el-row{
  display: flex;
  align-items: center;
}
.login-container .login-form .el-col-16{
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin-right: 10px;
}
.login-container .login-form .el-col-8{ flex: 0 0 116px; width: 116px; }
.login-container .login-code{
  margin: 0;
  padding-left: 0;
  box-sizing: border-box;
  width: 100%;
  justify-content: center;
}
.login-container .login-code-img{
  width: 116px;
  flex: 0 0 116px;
  min-width: 0;
  height: var(--lr-h);
  margin-top: 0;
  border: 1.5px solid #DDE2E9;
  border-radius: var(--lr-radius);
  background: #fff;
  line-height: var(--lr-h);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--lr-brand);
  cursor: pointer;
  object-fit: contain;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.login-container .login-code-img:hover{
  border-color: var(--lr-brand);
  box-shadow: 0 0 0 4px rgba(37,99,235,.08);
}

/* 协议勾选 */
.login-container .tips{ margin: 4px 0 2px; }
.login-container .tips .el-checkbox__label{
  font-size: 12.5px;
  color: var(--lr-ink-2);
  line-height: 1.7;
}
.login-container .tips .link[data-v-641aa246]{
  color: var(--lr-brand);
  font-weight: 500;
  transition: opacity .2s;
}
.login-container .tips .link[data-v-641aa246]:hover{ opacity: .78; }
.login-container .el-checkbox__inner{
  border-radius: 4px;
  border-color: #CBD0D8;
  width: 15px; height: 15px;
}
.login-container .el-checkbox__inner::after{ left: 5px; top: 2px; }
.login-container .el-checkbox__input.is-checked .el-checkbox__inner,
.login-container .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: var(--lr-brand);
  border-color: var(--lr-brand);
}
.login-container .el-checkbox__input.is-checked + .el-checkbox__label{ color: var(--lr-ink-2); }
.login-container .el-checkbox__input.is-focus .el-checkbox__inner{ border-color: var(--lr-brand); }

/* 登录按钮 */
.login-container .el-button.login-submit{
  width: 100%;
  height: 50px;
  margin-top: 18px;
  border: none;
  border-radius: var(--lr-radius);
  background: linear-gradient(135deg, var(--lr-brand-bright) 0%, var(--lr-brand) 55%, var(--lr-brand-deep) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 5px;
  text-indent: 5px;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(37,99,235,.55);
  transition: transform .18s, box-shadow .22s, filter .22s;
  font-family: inherit;
}
.login-container .el-button.login-submit:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 16px 32px -10px rgba(37,99,235,.62);
}
.login-container .el-button.login-submit:active{
  transform: translateY(0);
  filter: brightness(.97);
}
.login-container .el-button.login-submit.is-loading,
.login-container .el-button.login-submit.is-disabled{
  opacity: .72;
  transform: none;
  cursor: not-allowed;
}
.login-container .login-form .el-form-item__error{
  font-size: 12px;
  padding-top: 4px;
  color: #E4143C;
}

/* ---------- 6. 响应式 ---------- */
/* 窄桌面：卡片收窄 */
@media screen and (max-width: 1240px){
  .login-container .login-weaper{ width: 1000px; }
  .login-container .login-main{ width: 90%; max-width: 380px; }
}
/* 平板：左栏收起，卡片单列居中 */
@media screen and (max-width: 992px){
  .login-container{ padding: 18px; }
  .login-container .login-left{ display: none !important; }
  .login-container .login-weaper{
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto;
    flex: 0 1 auto;
  }
  .login-container .login-border{
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto;
    padding: 38px 26px !important;
    float: none !important;
    box-shadow: none;
  }
  .login-container .login-main{
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
  }
  .login-container .tips .el-checkbox__label{ white-space: normal; }
}
/* 手机 */
@media screen and (max-width: 480px){
  .login-container{ padding: 12px; }
  .login-container .login-border{ padding: 30px 18px !important; }
  .login-container .lr-head h2{ font-size: 22px; }
  .login-container .lr-tabs{ gap: 22px; }
  .login-container .login-form .el-col-8{ flex: 0 0 104px; width: 104px; }
  .login-container .login-code-img{ width: 104px; flex: 0 0 104px; font-size: 18px; }
  .login-container .lr-oauth-row{ gap: 8px; }
  .login-container .lr-oauth-btn{ font-size: 12px; }
}
/* 矮屏（如 1366x768 / 1280x720）：纵向压缩，避免卡片被裁 */
@media screen and (max-height: 780px) and (min-width: 993px){
  .login-container{ padding: 14px; }
  .login-container .login-border{ padding: 26px 0; }
  .login-container .lr-head{ margin-bottom: 14px; }
  .login-container .lr-head h2{ font-size: 22px; }
  .login-container .lr-tabs{ margin-bottom: 14px; }
  .login-container .login-form .el-form-item{ margin-bottom: 13px; }
  .login-container .lr-cap{ margin-bottom: 13px; }
  .login-container .el-button.login-submit{ margin-top: 14px; height: 46px; }
  .login-container .lr-oauth{ margin-top: 15px; }
  .login-container .lr-foot{ margin-top: 13px; }
  .login-container .login-left{ padding: 30px 36px; }
  .login-container .login-left .brand-h1{ font-size: 26px; }
  .login-container .login-left .brand-lead{ display: none; }
  .login-container .login-left .agent-strip{ display: none; }
}

/* ---------- 7. 左栏：右栏变高后，左栏内容垂直居中 ---------- */
.login-container .login-left{
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ==========================================================================
   8. 选择商户 / 选择账号 遮罩层（手机号 → 多个归属时弹出）
   口径可配：同一手机号「1 个登录账号 + N 个商户」 或 「N 个账号」。
   ========================================================================== */
.login-container .lr-pick{
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
  background: rgba(16,22,32,.46);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
}
.login-container .lr-pick.is-on{ opacity: 1; visibility: visible; }

.login-container .lr-pick-card{
  width: 500px; max-width: 100%; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px -22px rgba(10,18,32,.46), 0 0 0 1px rgba(16,24,40,.06);
  transform: translateY(10px) scale(.985); transition: transform .24s cubic-bezier(.22,1,.36,1);
}
.login-container .lr-pick.is-on .lr-pick-card{ transform: none; }

/* 头 */
.login-container .lr-pick-hd{
  padding: 22px 22px 16px; border-bottom: 1px solid #EEF0F4;
  display: flex; align-items: flex-start; gap: 12px;
}
.login-container .lr-pick-hd .lr-pick-ico{
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#0E3260,#113F7C); color: #fff;
}
.login-container .lr-pick-hd .lr-pick-ico svg{ width: 19px; height: 19px; }
.login-container .lr-pick-hd h3{
  margin: 0 0 3px; font-size: 16px; font-weight: 600; color: #1F2328; letter-spacing: .2px;
}
.login-container .lr-pick-hd p{ margin: 0; font-size: 12.5px; color: #6B7280; line-height: 1.6; }
.login-container .lr-pick-hd p b{ color: #2563EB; font-weight: 600; }

/* 口径开关（演示用：商户 / 账号） */
.login-container .lr-pick-mode{
  margin-left: auto; flex: 0 0 auto; display: flex; gap: 2px; padding: 2px;
  background: #F2F4F7; border-radius: 8px;
}
.login-container .lr-pick-mode button{
  border: 0; background: transparent; cursor: pointer; padding: 4px 9px;
  font-size: 11.5px; color: #6B7280; border-radius: 6px; transition: all .16s;
}
.login-container .lr-pick-mode button.is-on{ background: #fff; color: #1F2328; box-shadow: 0 1px 3px rgba(16,24,40,.12); font-weight: 600; }

/* 搜索 */
.login-container .lr-pick-search{ padding: 14px 22px 6px; }
.login-container .lr-pick-search input{
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px 0 34px;
  border: 1px solid #E6E9EE; border-radius: 9px; background: #F8F9FB;
  font-size: 13px; color: #1F2328; outline: none; transition: all .16s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239AA0A8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px 50%;
}
.login-container .lr-pick-search input:focus{ border-color: #2563EB; background-color: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* 列表 */
.login-container .lr-pick-list{
  list-style: none; margin: 0; padding: 8px 12px 6px; overflow-y: auto; flex: 1 1 auto; min-height: 0;
}
.login-container .lr-pick-list::-webkit-scrollbar{ width: 6px; }
.login-container .lr-pick-list::-webkit-scrollbar-thumb{ background: #DDE1E8; border-radius: 3px; }
.login-container .lr-pick-list li{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 4px; border-radius: 11px; cursor: pointer;
  border: 1px solid transparent; transition: all .15s;
}
.login-container .lr-pick-list li:hover{ background: #F7F9FC; }
.login-container .lr-pick-list li.is-on{ border-color: #2563EB; background: rgba(37,99,235,.05); }
.login-container .lr-pick-list li[hidden]{ display: none; }

.login-container .lr-pick-ava{
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: #fff; letter-spacing: .5px;
  background: linear-gradient(135deg,#0E3260,#113F7C);
}
.login-container .lr-pick-ava.alt{ background: linear-gradient(135deg,#2563EB,#3B82F6); }
.login-container .lr-pick-ava.alt2{ background: linear-gradient(135deg,#0F766E,#14B8A6); }

.login-container .lr-pick-tx{ flex: 1 1 auto; min-width: 0; }
.login-container .lr-pick-tx b{
  display: block; font-size: 13.5px; font-weight: 600; color: #1F2328;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.login-container .lr-pick-tx span{
  display: block; margin-top: 3px; font-size: 11.5px; color: #8A94A6;
  font-variant-numeric: tabular-nums;
}
.login-container .lr-pick-tag{
  flex: 0 0 auto; font-size: 10.5px; padding: 3px 7px; border-radius: 999px;
  background: #F2F4F7; color: #6B7280;
}
.login-container .lr-pick-tag.on{ background: rgba(37,99,235,.10); color: #2563EB; }
.login-container .lr-pick-tag.lock{ background: rgba(200,16,46,.09); color: #C8102E; }
.login-container .lr-pick-ck{
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-style: normal; color: #fff;
  background: #D5DAE2; transition: background .18s;
}
.login-container .lr-pick-list li.is-on .lr-pick-ck{ background: #2563EB; }

/* 底 */
.login-container .lr-pick-ft{
  padding: 12px 22px 14px; border-top: 1px solid #EEF0F4;
  display: flex; align-items: center; gap: 12px;
}
.login-container .lr-pick-ft .lr-pick-remember{
  flex: 1 1 auto; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #6B7280; cursor: pointer;
}
.login-container .lr-pick-ft .lr-pick-remember input{ accent-color: #2563EB; width: 14px; height: 14px; }
.login-container .lr-pick-ft .lr-pick-go{
  flex: 0 0 auto; height: 38px; padding: 0 22px; border: 0; cursor: pointer;
  border-radius: 9px; color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: 1px;
  background: linear-gradient(135deg,#0E3260,#113F7C);
  box-shadow: 0 10px 22px -10px rgba(14,50,96,.7);
  transition: all .18s;
}
.login-container .lr-pick-ft .lr-pick-go:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(14,50,96,.75); }
.login-container .lr-pick-ft .lr-pick-go:active{ transform: none; }
.login-container .lr-pick-note{
  margin: 0; padding: 0 22px 16px; font-size: 12px; color: #8A94A6; text-align: center;
}
.login-container .lr-pick-note a{ color: #2563EB; text-decoration: none; }
.login-container .lr-pick-note a:hover{ text-decoration: underline; }

/* 顶栏「当前商户」切换器（旧后台引用同一套样式时用） */
.login-container .lr-switch-hint{
  margin-top: 10px; font-size: 11.5px; color: #8A94A6; text-align: center;
}

@media screen and (max-width: 480px){
  .login-container .lr-pick{ padding: 14px; align-items: flex-end; }
  .login-container .lr-pick-card{ width: 100%; border-radius: 16px 16px 12px 12px; }
  .login-container .lr-pick-hd{ padding: 18px 16px 13px; }
  .login-container .lr-pick-list{ padding: 6px 8px; }
  .login-container .lr-pick-ft{ padding: 10px 16px 12px; flex-wrap: wrap; }
  .login-container .lr-pick-ft .lr-pick-go{ flex: 1 1 100%; }
}

/* ==========================================================================
   9. 生产态附加（旧后台线上使用）
      · 通道未开通的入口 → is-soon 灰态 + 点击提示（避免「看着能点、点了没反应」）
   ========================================================================== */
.login-container .lr-tab.is-soon{ color: #B6BCC6 !important; cursor: not-allowed; }
.login-container .lr-tab.is-soon::after{ display: none !important; }
.login-container .lr-oauth-btn.is-soon{ opacity: .52; }
.login-container .lr-oauth-btn.is-soon:hover{ border-color: var(--lr-line) !important; transform: none !important; }
.login-container .lr-soon-tip{
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  max-width: 92%; padding: 9px 15px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.5; color: #fff; text-align: center;
  background: rgba(22,30,44,.92); box-shadow: 0 12px 30px -12px rgba(0,0,0,.5);
  z-index: 50; pointer-events: none;
}

/* ==========================================================================
   10. v5 追加（2026-09-29）
       · 滑动验证码搬进表单 —— 顶掉原「图形验证码」那一行的位置
       · 底部品牌行
   ========================================================================== */
/* 滑块移入 <form> 后作为普通行存在，与 el-form-item 同节奏 */
.login-container .login-main .lr-cap.lr-cap-inform{ margin: 0 0 16px; }
/* 图形验证码行由注入脚本置 display:none（此处仅为可读性保留的同义规则） */
.login-container .login-form .el-form-item.lr-code-off{ display: none !important; }
.login-container .lr-powered{
  margin-top: 12px; text-align: center;
  font-size: 11.5px; letter-spacing: .2px; color: #A8B0BD;
}
.login-container .lr-powered b{ font-weight: 600; color: #7A8798; }
@media screen and (max-width: 992px){
  .login-container .login-main .lr-cap.lr-cap-inform{ margin-bottom: 13px; }
  .login-container .lr-powered{ margin-top: 10px; }
}