/* ============================================================
   管理后台登录页 v2 · 分屏蓝科技风格
   左屏:品牌蓝渐变 + 精密网格 + 同心光弧 + 光晕,品牌叙事
   右屏:白色表单区,品牌蓝 #0076FE 按钮
   配合 app/view/login/index.html 使用;覆盖 layui 表单默认样式
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body.login-v2 {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #111827;
  display: flex; overflow: hidden;
}

/* ============ 左侧品牌区 · 蓝科技 ============ */
.lv2-pane-brand {
  position: relative; width: 54%; height: 100%;
  background: linear-gradient(158deg, #033D9E 0%, #0076FE 62%, #2E9BFF 100%);
  color: #F0F7FF;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 64px;
  overflow: hidden;
}
.lv2-grid {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 110% 100% at 30% 30%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 110% 100% at 30% 30%, #000 30%, transparent 100%);
}
.lv2-flare {
  position: absolute; right: -160px; bottom: -160px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(125,211,252,0.5), transparent 65%);
  filter: blur(60px);
}
.lv2-arcs { position: absolute; right: -220px; bottom: -260px; pointer-events: none; }
.lv2-arcs circle { fill: none; stroke-width: 1; }

.lv2-logo-row { display: flex; align-items: center; gap: 12px; position: relative; }
.lv2-logo-mark {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}
.lv2-logo-text { font-size: 15px; font-weight: 500; letter-spacing: 0.08em; color: #EAF4FF; }

.lv2-hero { position: relative; }
.lv2-hero h1 {
  font-size: 40px; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em;
  color: #FFFFFF; margin: 0;
}
.lv2-hero h1 .lv2-accent { color: #9BDCFF; }
.lv2-hero p { margin: 18px 0 0; font-size: 14.5px; color: rgba(224,240,255,0.75); line-height: 1.9; max-width: 420px; }

.lv2-caps { position: relative; display: flex; gap: 10px; }
.lv2-caps span {
  font-size: 12.5px; color: #EAF4FF; letter-spacing: 0.06em;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 999px;
  background: rgba(255,255,255,0.08);
  padding: 7px 16px;
}

/* ============ 右侧表单区 ============ */
.lv2-pane-form {
  position: relative; width: 46%; height: 100%;
  background: #FFFFFF;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.lv2-form-box { width: 360px; }
.lv2-form-title { font-size: 26px; font-weight: 600; color: #111827; }
.lv2-form-desc { font-size: 13.5px; color: #6B7280; margin: 8px 0 34px; }

.lv2-field { margin-bottom: 18px; }

/* 覆盖 layui input */
.login-v2 .layui-input {
  width: 100%; height: 48px; line-height: 48px;
  background: #F3F4F6;
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: #111827; font-size: 14.5px;
  padding: 0 16px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.login-v2 .layui-input::placeholder { color: #9CA3AF; }
.login-v2 .layui-input:focus {
  background: #fff;
  border-color: #0076FE !important;
  box-shadow: 0 0 0 3px rgba(0,118,254,0.12);
}

/* 验证码行 */
.lv2-captcha-row { display: flex; gap: 12px; }
.lv2-captcha-row .lv2-captcha-input { flex: 1; }
.lv2-captcha-img {
  width: 130px; height: 48px; border-radius: 10px; cursor: pointer;
  background: #F3F4F6; overflow: hidden; flex-shrink: 0;
}
.lv2-captcha-img img { width: 100%; height: 100%; display: block; }
.lv2-captcha-hint { font-size: 11.5px; color: #9CA3AF; margin-top: 7px; text-align: right; }

/* 记住登录:覆盖 layui primary checkbox 配色 */
.lv2-remember { margin: 4px 0 24px; }
.login-v2 .layui-form-checkbox[lay-skin=primary] span { color: #4B5563; font-size: 13.5px; }
.login-v2 .layui-form-checked[lay-skin=primary] i {
  border-color: #0076FE !important; background-color: #0076FE;
}
.login-v2 .layui-form-checkbox[lay-skin=primary]:hover i { border-color: #0076FE; }

/* 登录按钮 */
.login-v2 .lv2-btn {
  width: 100%; height: 48px; border: none; border-radius: 10px;
  background: #0076FE;
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.4em; text-indent: 0.4em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,118,254,0.28);
  transition: background .2s, transform .1s;
}
.login-v2 .lv2-btn:hover { background: #0065DB; color: #fff; }
.login-v2 .lv2-btn:active { transform: translateY(1px); }

/* 注册链接 */
.lv2-reg { text-align: center; margin-top: 18px; }
.lv2-reg a { font-size: 13px; color: #0076FE; text-decoration: none; }
.lv2-reg a:hover { text-decoration: underline; }

/* 右屏底部版权 */
.lv2-footer {
  position: absolute; bottom: 26px; left: 0; right: 0;
  text-align: center; font-size: 12px; color: #C3C9D2; letter-spacing: 0.14em;
}
.lv2-footer a { color: #C3C9D2; text-decoration: none; }
.lv2-footer a:hover { color: #0076FE; }

/* 窄屏兜底:隐藏左屏,仅显示表单 */
@media (max-width: 900px) {
  body.login-v2 { overflow: auto; }
  .lv2-pane-brand { display: none; }
  .lv2-pane-form { width: 100%; padding: 40px 16px; }
  .lv2-form-box { width: 100%; max-width: 360px; }
}