/* ==========================================================================
   商账云 · 登录页（体系 C · 千牛登录页风格）
   --------------------------------------------------------------------------
   规格来源：D:\生意参谋页面风格逆向\复刻任务书\50-千牛登录页.md
   令牌原件：tokens-login.css（原样复制，数值未改）

   ★ 这是第三套设计体系，与后台的浅色体系 A 完全隔离：
     主色 #3d7fff（不是 #2062e6）、登录框 460×520、输入框 60px、按钮 30px 药丸。
     本文件只作用于 #viewLogin，不影响后台任何页面。

   与千牛原页面的差异（商账云没有对应功能，不造假功能）：
     1. 不做「短信登录」tab —— 系统只有账号密码登录
     2. 不做滑块验证 —— 没有该后端能力
     3. 去掉「0元开店 / 入驻天猫 / 直播开店」—— 千牛专属
     4. 去掉「了解新功能 / 忘记密码 / 忘记账号」—— 系统无此功能
     5. 保留商账云的「记住账号」，放在密码框下方
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 容器：压掉 style.css / sycm-theme.css 里旧的登录页样式
   -------------------------------------------------------------------------- */
/* 登录页显示时，body 也跟着变白 —— 否则滚动/超宽时会露出后台的 #EEF1F6 */
body:has(> #viewLogin:not([hidden])) {
  background: var(--lg-bg);
}

#viewLogin.login-view,
#viewLogin.login-view:not([hidden]) {
  min-height: 100vh;
  display: block;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background: var(--lg-bg);
  background-image: none;
}

#viewLogin .lg-page {
  min-height: 100vh;
  background: var(--lg-bg);
  font-family: var(--lg-font);
  text-align: left;
}

/* --------------------------------------------------------------------------
   2. 左栏背景
   --------------------------------------------------------------------------
   ★ 2026-10-24：按用户要求「暂时空白，背景图以后自己维护」——
     不加载任何插画（原规格的千牛 CDN 图已弃用），左栏留纯白。

   以后要加背景图：只改下面 --login-left-bg 一行，把 none 换成
   url("图片地址") 即可，cover / 居中 / 重复等都已配好，不用动别处。
   -------------------------------------------------------------------------- */
:root {
  --login-left-bg: none;   /* ← 换背景图就改这里 */
}

#viewLogin .lg-left {
  background-color: #fff;
  background-image: var(--login-left-bg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* logo：左栏已是纯白底，不再需要白色药丸衬底，直接贴图 */
#viewLogin .lg-logo {
  top: 35px;
  left: 42px;
  line-height: 0;
}
#viewLogin .lg-logo img {
  height: 34px;
  width: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   3. 右栏
   -------------------------------------------------------------------------- */
#viewLogin .lg-head {
  padding: 32px 76px 12px 0;
  text-align: right;
}
#viewLogin .lg-head-name {
  display: inline-block;
  margin-left: 64px;
  font-family: var(--lg-font);
  font-size: 16px;
  color: var(--lg-text);
  white-space: nowrap;
}

#viewLogin .lg-content {
  height: 80%;
  text-align: center;
}

#viewLogin .lg-title {
  text-align: left;
}
/* 「欢迎登录」30px #111 + 副标题 20px #666，两者同排 */
#viewLogin .lg-title-welcome {
  margin-right: 17px;
}
#viewLogin .lg-title-intro {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. 登录框 460×520（令牌已给尺寸，这里补内容排布）
   -------------------------------------------------------------------------- */
#viewLogin .lg-box {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 顶部提示条：靠右上 top:10px right:61px（令牌已定位，这里只管宽度自适应） */
#viewLogin .lg-tip {
  position: absolute;
  top: 10px;
  right: 61px;
  font-family: var(--lg-font);
  white-space: nowrap;
}

/* Tab 区 */
#viewLogin .lg-switch-tab {
  padding-left: 22px;
  text-align: left;
  display: flex;
  gap: 32px;
  flex: none;
}

/* 表单区 */
#viewLogin .lg-form {
  margin-top: 20px;
  padding: 0 33px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#viewLogin .lg-field {
  padding-bottom: 36px;
  position: relative;
  flex: none;
}
#viewLogin .lg-input {
  display: block;
  font-size: 16px;
  box-sizing: border-box;
}
#viewLogin .lg-input:focus {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(61, 127, 255, .18);
  outline: none;
  border: none;
}

/* 记住账号：商账云独有，放在密码下方 */
#viewLogin .login-remember-row {
  display: flex;
  align-items: center;
  margin: -22px 0 26px;
  flex: none;
}
#viewLogin .login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lg-font);
  font-size: 14px;
  color: var(--lg-text-regular);
  cursor: pointer;
  user-select: none;
}
#viewLogin .login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--lg-primary);
  cursor: pointer;
}

/* 登录按钮：60px 高、30px 药丸 */
#viewLogin .lg-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  letter-spacing: 2px;
}
#viewLogin .lg-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* 底部提示（原 #lgTip）：14px #666 居中 */
#viewLogin .login-foot-tip {
  flex: none;
  margin: 18px 0 0;
  font-family: var(--lg-font);
  font-size: 14px;
  line-height: 20px;
  color: var(--lg-text-regular);
  text-align: center;
}

/* --------------------------------------------------------------------------
   4b. 安全验证容器（阿里云验证码 2.0，2026-10-24 新增）
   --------------------------------------------------------------------------
   未启用时是空 div：:empty 直接不占位，登录页版式与改造前完全一致。
   启用后阿里云的挑战面板由 SDK 自己往这里塞（或弹 fixed 层），
   这里只保证容器不吃点击、不压住弹层。 */
#viewLogin .lg-captcha {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
}
#viewLogin .lg-captcha:empty {
  display: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. 窄屏：只留右侧表单（规格要求）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {
  #viewLogin .lg-left { display: none; }
  #viewLogin .lg-head { padding-right: 24px; }
  #viewLogin .lg-title { width: auto; padding: 0 20px; }
  #viewLogin .lg-box { width: calc(100vw - 40px); max-width: 460px; }
}

/* --------------------------------------------------------------------------
   6. 登录页页脚：版权 + ICP 备案号（2026-10-31 正式域名 desk.okagent.work 上线）
   --------------------------------------------------------------------------
   为什么用 fixed：`.lg-page` 是 min-height:100vh 的满屏布局，页脚如果按普通流
   排在它后面会被顶到第一屏之外，等于白放。固定贴底既保证「首页可见」（工信部
   对备案号的展示要求），又不改动登录页原有版式。
   #viewLogin 隐藏时页脚跟着隐藏，不会带到登录后的主界面。
   -------------------------------------------------------------------------- */
#viewLogin .login-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--lg-font);
  font-size: 12px;
  line-height: 20px;
  color: var(--lg-text-weak);
  background: transparent;
  pointer-events: none;
}
#viewLogin .login-foot a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}
#viewLogin .login-foot a:hover {
  color: var(--color-primary, #2062e6);
  text-decoration: underline;
}