/* ==========================================================================
   折云网络 · 用户端登录页美化
   --------------------------------------------------------------------------
   作用范围：仅 /login 页面（由 themes/clientarea/userCenter/login.tpl 引入）
   只改样式，不动模板结构与逻辑。
   设计语言与官网一致：品牌蓝 #0052d9、圆角 10~16px、柔和阴影。
   ========================================================================== */

/* ---------- 右侧登录区：底色 + 一层品牌色柔光 ---------- */
.L_code .L_code-right-side {
  position: relative;
  background: linear-gradient(135deg, #f7f9fc 0%, #eef3fb 100%) !important;
}

.L_code .L_code-right-side::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 82, 217, 0.09), rgba(0, 82, 217, 0) 72%);
}

/* ---------- 登录卡片 ---------- */
.L_code .L_code-right-form {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 233, 243, 0.9) !important;
  background: #fff !important;
  box-shadow: 0 12px 40px rgba(15, 32, 71, 0.1), 0 2px 8px rgba(15, 32, 71, 0.04) !important;
  padding: 34px 38px 32px !important;
}

/* ---------- 顶部切换（手机登录 / 邮箱登录） ---------- */
.L_code .L_code-right-form .code_login-tab {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  padding: 0 0 14px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid #eef2f7 !important;
}

.L_code .L_code-right-form .code_login-tab .login-tab-item {
  position: relative;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  padding-bottom: 12px !important;
  color: #8a94a6 !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}

.L_code .L_code-right-form .code_login-tab .login-tab-item:hover {
  color: #0052d9 !important;
}

.L_code .L_code-right-form .code_login-tab .login-tab-item.active {
  color: #0052d9 !important;
}

/* 分页竖线：更淡更短 */
.L_code .L_code-right-form .code_login-tab .login-tab-separate {
  display: none !important;
}

/* 主题自带的滑动条定位不准（会落到标签下方 60px 处），隐藏它，
   改用标签自身的下划线，位置永远对齐。
   注意：这个元素是 .L_code-form-content 的直接子元素，不在 .code_login-tab 里面 */
.L_code .L_code-right-form .transitionSwitching,
.L_code .L_code-form-content > .transitionSwitching {
  display: none !important;
}

.L_code .L_code-right-form .code_login-tab .login-tab-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #0052d9, #266fe8);
}

/* ---------- “还没有账户？现在注册” ---------- */
.L_code .L_code-right-form .text-register p {
  font-size: 14px !important;
  color: #8a94a6 !important;
  margin: 0 0 22px !important;
}

.L_code .L_code-right-form .text-register .text-primary {
  color: #0052d9 !important;
  font-weight: 600 !important;
}

/* ---------- 表单 ---------- */
.L_code .L_code-right-form .form-group {
  margin-bottom: 18px !important;
}

.L_code .L_code-right-form .form-group > label {
  display: block !important;
  margin-bottom: 7px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #5b6678 !important;
}

.L_code .L_code-right-form .form-control {
  box-sizing: border-box !important;
  height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid #e3e8ef !important;
  border-radius: 10px !important;
  background: #fbfcfe !important;
  font-size: 15px !important;
  color: #1f2d3d !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.L_code .L_code-right-form .form-control::placeholder {
  color: #aab4c4 !important;
}

.L_code .L_code-right-form .form-control:hover {
  border-color: #d3dced !important;
}

.L_code .L_code-right-form .form-control:focus {
  background: #fff !important;
  border-color: #0052d9 !important;
  box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.1) !important;
}

/* ---------- 国家/地区下拉（+86 中国） ---------- */
.L_code .L_code-right-form .custom-dropdown {
  position: relative;
}

.L_code .L_code-right-form .custom-dropdown .custom-dropdown-selection {
  box-sizing: border-box !important;
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 30px 0 14px !important;
  border-right: 1px solid #e3e8ef !important;
  font-size: 15px !important;
  color: #1f2d3d !important;
  background: #fbfcfe !important;
  transition: background 0.2s ease !important;
}

.L_code .L_code-right-form .custom-dropdown .custom-dropdown-selection:hover {
  background: #f3f7ff !important;
}

.L_code .L_code-right-form .custom-dropdown .custom-dropdown-list {
  border-radius: 10px !important;
  border: 1px solid #e6ebf3 !important;
  box-shadow: 0 10px 28px rgba(15, 32, 71, 0.12) !important;
  overflow: hidden !important;
}

/* 手机号输入框左侧与下拉拼接 */
.L_code .L_code-right-form .input-group .form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* ---------- 登录按钮 ---------- */
.L_code .L_code-right-form .btn-primary,
.L_code .L_code-right-form .btn.btn-primary.btn-block {
  box-sizing: border-box !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, #0052d9, #266fe8) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 82, 217, 0.24) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
}

.L_code .L_code-right-form .btn-primary:hover,
.L_code .L_code-right-form .btn.btn-primary.btn-block:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px rgba(0, 82, 217, 0.32) !important;
}

.L_code .L_code-right-form .btn-primary:active {
  transform: translateY(0) !important;
}

/* ---------- 辅助链接（验证码登录 / 忘记密码） ---------- */
.L_code .L_code-right-form a,
.L_code .L_code-right-form .pointer {
  color: #0052d9 !important;
  transition: opacity 0.2s ease !important;
}

.L_code .L_code-right-form a:hover {
  opacity: 0.78 !important;
}

/* ---------- 微信扫码区 ---------- */
.L_code .L_code-scan-login .wechat-login a {
  color: #0052d9 !important;
  font-weight: 600 !important;
}

.L_code .qrCodeContainer {
  border-radius: 12px !important;
  border: 1px solid #eef2f7 !important;
  padding: 10px !important;
  background: #fff !important;
}

/* ---------- 底部说明与协议 ---------- */
.L_code .L_code-right-footer {
  margin-top: 22px !important;
  font-size: 13px !important;
  color: #8a94a6 !important;
}

.L_code .L_code_clause {
  font-size: 13px !important;
  color: #98a2b3 !important;
  line-height: 1.8 !important;
}

.L_code .L_code_clause a {
  color: #0052d9 !important;
}

/* ---------- 极验/图形验证码区域 ---------- */
.L_code .JYcaptchacss .geetest_holder,
.L_code .ExtremeTest_captcha {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.L_code .input-group-append .btn,
.L_code .allow_login_phone_captcha .btn,
.L_code .allow_login_code_captcha .btn {
  border-radius: 10px !important;
  border: 1px solid #e3e8ef !important;
  background: #fff !important;
  color: #0052d9 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.L_code .input-group-append .btn:hover,
.L_code .allow_login_phone_captcha .btn:hover,
.L_code .allow_login_code_captcha .btn:hover {
  border-color: #0052d9 !important;
  background: rgba(0, 82, 217, 0.05) !important;
}

/* ---------- 左侧品牌区：底部加一层渐变，让文字/Logo 更清晰 ---------- */
.L_code .L_code-left-side {
  position: relative;
}

.L_code .L_code-left-side::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 20, 60, 0), rgba(0, 20, 60, 0.16));
}

/* ---------- 手机端 ---------- */
@media (max-width: 768px) {
  .L_code .L_code-right-form {
    border-radius: 14px !important;
    padding: 24px 20px 24px !important;
    box-shadow: 0 8px 28px rgba(15, 32, 71, 0.1) !important;
  }

  .L_code .L_code-right-form .code_login-tab .login-tab-item {
    font-size: 16px !important;
  }

  .L_code .L_code-right-form .form-control,
  .L_code .L_code-right-form .custom-dropdown .custom-dropdown-selection {
    height: 44px !important;
    line-height: 44px !important;
  }

  .L_code .L_code-right-form .btn-primary {
    height: 46px !important;
    font-size: 15.5px !important;
  }
}

/* ==========================================================================
   登录/注册/找回密码/绑定 左侧「稳定性」介绍文案（新增，可整段删除还原）
   位置：左侧面板空白区（底部的 3D 插图与顶部 logo 之间）
   设计：主色强调点 + 深色标题 + 灰色正文，符合「极简科技商务风」
   ========================================================================== */
.L_code .L_code-intro{
  position:absolute; top:118px; left:48px; right:48px; max-width:440px; z-index:3;
}
.L_code-intro-title{
  font-size:23px; line-height:1.4; font-weight:600; color:#1d2129; margin:0 0 12px;
  letter-spacing:-.2px;
}
.L_code-intro-desc{
  font-size:14px; line-height:1.9; color:#86909c; margin:0 0 20px;
}
.L_code-intro-list{list-style:none; margin:0; padding:0;}
.L_code-intro-list li{
  position:relative; padding-left:22px; margin-bottom:12px;
  font-size:14px; line-height:1.75; color:#4e5969;
}
.L_code-intro-list li:last-child{margin-bottom:0;}
.L_code-intro-list li i{
  position:absolute; left:0; top:7px; width:12px; height:12px; border-radius:50%;
  background:rgba(22,93,255,.10);
}
.L_code-intro-list li i::after{
  content:""; position:absolute; left:3.5px; top:3.5px; width:5px; height:5px; border-radius:50%;
  background:linear-gradient(135deg,#165DFF,#4080FF);
}
/* 中等宽度：缩小留白与字号，避免挤压插图 */
@media (max-width:1400px){
  .L_code .L_code-intro{top:100px; left:36px; right:36px; max-width:360px;}
  .L_code-intro-title{font-size:20px;}
  .L_code-intro-desc, .L_code-intro-list li{font-size:13.5px;}
}
@media (max-width:1200px){
  .L_code .L_code-intro{top:88px; left:28px; right:28px;}
  .L_code-intro-title{font-size:18px;}
  .L_code-intro-desc{margin-bottom:14px;}
  .L_code-intro-list li{font-size:13px; margin-bottom:9px; padding-left:19px;}
}
/* 手机端：左侧面板塌缩成 60px 顶栏，文案必须隐藏 */
@media (max-width:768px){
  .L_code .L_code-intro{display:none!important;}
}

/* ==========================================================================
   登录页「填空」层（新增，可整段删除还原）
   实测背景：1920 宽下左面板 576px、登录卡居中于右侧 1344px 区域 → 中间留出 434px 空白带，
   卡片上下与最右侧同样空白，整页观感发空。左面板纵向已被 logo 与地球插图占满，无法再塞文案，
   故用「背景装饰 + 版面比例」填充，纯 CSS、不影响任何内容与交互。
   ========================================================================== */

/* 1) 右区背景：极淡品牌柔光 + 点阵网格（卡片为白底，不会透出） */
/* 注意：主题对 .L_code-right-side 用了 background 简写（渐变），普通声明会被压掉，故用 !important 提权 */
.L_code .L_code-right-side,
.L_code .L_code-right-side.no_wx{
  position:relative;
  background-color:#f7f9fc!important;
  background-image:
    radial-gradient(58% 48% at 50% 42%, rgba(22,93,255,.07) 0%, rgba(22,93,255,0) 72%),
    radial-gradient(rgba(22,93,255,.085) 1px, transparent 1.2px)!important;
  background-size:100% 100%, 24px 24px!important;
  background-position:center center, 12px 12px!important;
  background-repeat:no-repeat, repeat!important;
}
/* 卡片上方一条极淡的品牌渐变横线，给空区一个视觉落点 */
.L_code .L_code-right-side::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  top:calc(50% - 300px);width:min(520px,52%);height:1px;
  background:linear-gradient(90deg,rgba(22,93,255,0),rgba(22,93,255,.18),rgba(22,93,255,0));
  pointer-events:none;
}
.L_code .L_code-right-side::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(50% - 300px);width:min(520px,52%);height:1px;
  background:linear-gradient(90deg,rgba(22,93,255,0),rgba(22,93,255,.18),rgba(22,93,255,0));
  pointer-events:none;
}

/* 2) 左面板：右侧加一条极淡分隔线，明确"左内容区 / 右表单区" */
.L_code .L_code-left-side{box-shadow:inset -1px 0 0 rgba(22,93,255,.06);}

/* 3) 宽屏（≥1700）：让左面板更宽，收窄中间空白带，同时文案与插图更有体量 */
@media (min-width:1700px){
  .L_code .L_code-left-side{max-width:40%;width:660px;}
  .L_code .L_code-intro{left:64px;right:64px;max-width:500px;top:132px;}
  .L_code-intro-title{font-size:26px;}
  .L_code-intro-desc, .L_code-intro-list li{font-size:15px;}
}

/* 4) 手机端：右区即整页，去掉点阵保持干净（左侧面板此时已塌缩） */
@media (max-width:768px){
  /* 手机端点阵关闭：body 前缀 + .wx/.no_wx 提到 0,4,0，确保压过基础规则 */
  body .L_code .L_code-right-side,
  body .L_code .L_code-right-side.no_wx,
  body .L_code .L_code-right-side.wx{background-image:none!important;background-color:#f7f8fa!important;}
  .L_code .L_code-right-side::before, .L_code .L_code-right-side::after{display:none;}
}
@media (max-width:1200px){
  .L_code .L_code-right-side{background-size:100% 100%, 30px 30px!important;background-position:center center, 15px 15px!important;}
}
