/* ============================================================
   login-tech.css v5 · 星域指挥舱 · 20 主题
   全部选择器基于 SPA 真实 DOM：
   body.userLayout > .login-wrapper > .container > .right > .login-main-content
   主题通过 body[data-lgn="N"] 的 CSS 变量驱动，canvas 由 JS 取色。
   ============================================================ */

/* ===== 20 套主题变量（--la 主强调 / --lb 渐变辅色 / --g1 --g2 背景色调 / --lag 辉光） ===== */
body.userLayout[data-lgn="1"]  { --la:#22d3ee; --lb:#3b82f6; --g1:#062a3f; --g2:#0b1533; --lag:rgba(34,211,238,.40); }
body.userLayout[data-lgn="2"]  { --la:#7c3aed; --lb:#c026d3; --g1:#2a1250; --g2:#160c33; --lag:rgba(139,92,246,.40); }
body.userLayout[data-lgn="3"]  { --la:#10b981; --lb:#06b6d4; --g1:#04382c; --g2:#07203a; --lag:rgba(16,185,129,.40); }
body.userLayout[data-lgn="4"]  { --la:#f59e0b; --lb:#f43f5e; --g1:#3d2405; --g2:#230f1f; --lag:rgba(245,158,11,.40); }
body.userLayout[data-lgn="5"]  { --la:#38bdf8; --lb:#818cf8; --g1:#0b2f52; --g2:#151b3f; --lag:rgba(56,189,248,.40); }
body.userLayout[data-lgn="6"]  { --la:#f43f5e; --lb:#fb7185; --g1:#43101f; --g2:#2a0a18; --lag:rgba(244,63,94,.40); }
body.userLayout[data-lgn="7"]  { --la:#a3e635; --lb:#22d3ee; --g1:#1e3611; --g2:#062a33; --lag:rgba(163,230,53,.38); }
body.userLayout[data-lgn="8"]  { --la:#e879f9; --lb:#818cf8; --g1:#3a1145; --g2:#191243; --lag:rgba(232,121,249,.38); }
body.userLayout[data-lgn="9"]  { --la:#2dd4bf; --lb:#a3e635; --g1:#073a35; --g2:#14301a; --lag:rgba(45,212,191,.40); }
body.userLayout[data-lgn="10"] { --la:#fb923c; --lb:#fbbf24; --g1:#42260a; --g2:#2b1608; --lag:rgba(251,146,60,.40); }
body.userLayout[data-lgn="11"] { --la:#60a5fa; --lb:#34d399; --g1:#0a2c55; --g2:#07332b; --lag:rgba(96,165,250,.40); }
body.userLayout[data-lgn="12"] { --la:#f472b6; --lb:#a78bfa; --g1:#41122f; --g2:#221040; --lag:rgba(244,114,182,.38); }
body.userLayout[data-lgn="13"] { --la:#facc15; --lb:#4ade80; --g1:#3c3305; --g2:#0d3318; --lag:rgba(250,204,21,.36); }
body.userLayout[data-lgn="14"] { --la:#818cf8; --lb:#22d3ee; --g1:#1c2464; --g2:#082b45; --lag:rgba(129,140,248,.40); }
body.userLayout[data-lgn="15"] { --la:#f87171; --lb:#fb923c; --g1:#421414; --g2:#33150a; --lag:rgba(248,113,113,.40); }
body.userLayout[data-lgn="16"] { --la:#34d399; --lb:#60a5fa; --g1:#083b2c; --g2:#0a2350; --lag:rgba(52,211,153,.40); }
body.userLayout[data-lgn="17"] { --la:#c084fc; --lb:#f472b6; --g1:#33114e; --g2:#3b1030; --lag:rgba(192,132,252,.38); }
body.userLayout[data-lgn="18"] { --la:#67e8f9; --lb:#a5b4fc; --g1:#073a4a; --g2:#1a2060; --lag:rgba(103,232,249,.38); }
body.userLayout[data-lgn="19"] { --la:#e2e8f0; --lb:#93c5fd; --g1:#1f2b3e; --g2:#101826; --lag:rgba(226,232,240,.30); }
body.userLayout[data-lgn="20"] { --la:#fbbf24; --lb:#f472b6; --g1:#3d2c06; --g2:#331022; --lag:rgba(251,191,36,.36); }
body.userLayout { --la:#22d3ee; --lb:#3b82f6; --g1:#062a3f; --g2:#0b1533; --lag:rgba(34,211,238,.40); }

/* ===== 根画布 ===== */
html body.userLayout {
  margin: 0 !important;
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;
  background:
    radial-gradient(1100px 700px at 78% -12%, var(--g1), transparent 60%),
    radial-gradient(900px 650px at -8% 108%, var(--g2), transparent 62%),
    linear-gradient(158deg, #070d1e 0%, #050912 55%, #040b16 100%) !important;
  background-attachment: fixed !important;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif !important;
}
/* 双极光斑 */
html body.userLayout::before,
html body.userLayout::after {
  content: "" !important;
  position: fixed !important;
  width: 520px !important; height: 520px !important;
  border-radius: 50% !important;
  filter: blur(90px) !important;
  opacity: .32 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html body.userLayout::before {
  top: -180px !important; right: -120px !important;
  background: radial-gradient(circle, var(--la) 0%, transparent 70%) !important;
  animation: lgnFloat1 14s ease-in-out infinite alternate !important;
}
html body.userLayout::after {
  bottom: -220px !important; left: -160px !important;
  background: radial-gradient(circle, var(--lb) 0%, transparent 70%) !important;
  animation: lgnFloat2 17s ease-in-out infinite alternate !important;
}
@keyframes lgnFloat1 { to { transform: translate(-70px, 60px) scale(1.15); } }
@keyframes lgnFloat2 { to { transform: translate(80px, -50px) scale(1.1); } }

/* 星空 canvas（内联样式兜底，这里仅保底） */
html body.userLayout canvas.lgn-canvas {
  position: fixed !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 0 !important; pointer-events: none !important;
}

/* ===== 布局骨架 ===== */
html body.userLayout .login-wrapper {
  position: relative !important;
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}
/* 清空 SPA 自带的蓝天白云等背景图 */
html body.userLayout .user-layout-wrapper,
html body.userLayout .user-layout-wrapper.desktop,
html body.userLayout #userLayout,
html body.userLayout .login-wrapper,
html body.userLayout .login-wrapper .container,
html body.userLayout .login-wrapper .container .left,
html body.userLayout .login-wrapper .container .right {
  background: transparent none !important;
  background-image: none !important;
}
html body.userLayout .login-wrapper .top-nav { display: none !important; }
html body.userLayout .login-wrapper .left { display: none !important; }
html body.userLayout .login-wrapper .container {
  position: relative !important;
  width: 100% !important;
  max-width: 1280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 96px !important;
  padding: 0 48px !important;
  box-sizing: border-box !important;
  background: none !important;
  z-index: 3 !important;
}
html body.userLayout .login-wrapper .container .right {
  position: relative !important;
  z-index: 4 !important;
}

/* ===== 左侧品牌面板（JS 注入）· 左右分栏 ===== */
html body.userLayout .lgn-brand {
  position: relative !important;
  order: -1 !important;
  width: 560px !important;
  max-width: 48vw !important;
  flex: 0 1 560px !important;
  color: #fff !important;
  z-index: 4 !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body.userLayout .login-wrapper .container .right { order: 1 !important; }
html body.userLayout .lgn-brand .lgn-logo {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  font-size: 15px !important;
  letter-spacing: 3px !important;
  color: rgba(255,255,255,.85) !important;
  margin-bottom: 22px !important;
}
html body.userLayout .lgn-brand .lgn-logo .lgn-mark {
  width: 28px !important; height: 28px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--la), var(--lb)) !important;
  box-shadow: 0 4px 18px var(--lag) !important;
  position: relative !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
}
html body.userLayout .lgn-brand .lgn-logo .lgn-mark::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important; top: 7px !important;
  width: 14px !important; height: 14px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  border: 2.5px solid rgba(255,255,255,.9) !important;
  border-bottom-color: transparent !important;
}
html body.userLayout .lgn-brand h1 {
  font-size: 40px !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  margin: 0 0 10px !important;
  letter-spacing: 4px !important;
  color: #fff !important;
  text-shadow: 0 6px 40px rgba(0,0,0,.45) !important;
}
html body.userLayout .lgn-brand h1 em {
  font-style: normal !important;
  background: linear-gradient(100deg, var(--la), var(--lb) 70%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html body.userLayout .lgn-brand .lgn-sub {
  font-size: 13.5px !important;
  letter-spacing: 5px !important;
  color: rgba(255,255,255,.5) !important;
  margin: 0 0 18px !important;
}
/* 核心价值 · 编号玻璃卡 */
html body.userLayout .lgn-brand .lgn-feats {
  list-style: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  counter-reset: lgnf;
}
html body.userLayout .lgn-brand .lgn-feats li {
  counter-increment: lgnf;
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 13px !important;
  margin-bottom: 10px !important;
  padding: 11px 52px 11px 14px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 13px !important;
  box-sizing: border-box !important;
}
html body.userLayout .lgn-brand .lgn-feats li::after {
  content: "0" counter(lgnf) !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: Consolas, monospace !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,.26) !important;
}
html body.userLayout .lgn-brand .lgn-feats i {
  flex: 0 0 auto !important;
  width: 10px !important; height: 10px !important;
  margin-top: 5px !important;
  transform: rotate(45deg) !important;
  background: linear-gradient(135deg, var(--la), var(--lb)) !important;
  box-shadow: 0 0 12px var(--lag) !important;
}
html body.userLayout .lgn-brand .lgn-feats b {
  display: block !important;
  font-size: 15.5px !important;
  color: rgba(255,255,255,.94) !important;
  margin-bottom: 2px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}
html body.userLayout .lgn-brand .lgn-feats span {
  display: block !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,.46) !important;
  letter-spacing: 1px !important;
}
/* 登录卡副标题（JS 注入） */
html body.userLayout .lgn-card-sub {
  font-size: 12.5px !important;
  letter-spacing: 3.5px !important;
  color: rgba(255,255,255,.45) !important;
  margin: -16px 0 26px !important;
  text-align: left !important;
}

/* 核心功能清单 · 玻璃芯片 */
html body.userLayout .lgn-mods-title {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  color: rgba(255,255,255,.45) !important;
  margin: 18px 0 12px !important;
}
html body.userLayout .lgn-mods-title::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(255,255,255,.2), transparent) !important;
}
html body.userLayout .lgn-mods {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 12px !important;
}
html body.userLayout .lgn-mods div {
  position: relative !important;
  padding: 9px 12px 9px 38px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.85) !important;
  letter-spacing: 1px !important;
  line-height: 1.4 !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
html body.userLayout .lgn-mods div::before {
  content: "✓" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 5px !important;
  background: linear-gradient(135deg, var(--la), var(--lb)) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  line-height: 17px !important;
  text-align: center !important;
  box-shadow: 0 0 10px var(--lag) !important;
}
html body.userLayout .lgn-brand .lgn-stats {
  display: flex !important;
  gap: 44px !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  padding-top: 16px !important;
  margin-top: 18px !important;
}
html body.userLayout .lgn-brand .lgn-stats b {
  display: block !important;
  font-size: 24px !important;
  color: var(--la) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 24px var(--lag) !important;
}
html body.userLayout .lgn-brand .lgn-stats span {
  font-size: 12px !important;
  color: rgba(255,255,255,.42) !important;
  letter-spacing: 2.5px !important;
}

/* ===== 玻璃登录卡 ===== */
html body.userLayout .login-main-content {
  position: relative !important;
  width: 462px !important;
  height: auto !important;
  box-sizing: border-box !important;
  padding: 44px 42px 36px !important;
  border-radius: 24px !important;
  background: linear-gradient(165deg, rgba(255,255,255,.11), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 34px 100px rgba(0,0,0,.6),
    0 8px 28px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.14) inset,
    0 0 50px -14px var(--lag) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
}
/* 对角科技括号 */
html body.userLayout .login-main-content::before,
html body.userLayout .login-main-content::after {
  content: "" !important;
  position: absolute !important;
  width: 32px !important; height: 32px !important;
  pointer-events: none !important;
}
html body.userLayout .login-main-content::before {
  top: -1px !important; left: -1px !important;
  border-top: 2.5px solid var(--la) !important;
  border-left: 2.5px solid var(--la) !important;
  border-top-left-radius: 24px !important;
}
html body.userLayout .login-main-content::after {
  bottom: -1px !important; right: -1px !important;
  border-bottom: 2.5px solid var(--lb) !important;
  border-right: 2.5px solid var(--lb) !important;
  border-bottom-right-radius: 24px !important;
}

/* 标题 */
html body.userLayout .login-main-content .logo-box {
  position: relative !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: 9px !important;
  color: #fff !important;
  margin: 0 0 34px !important;
  height: auto !important;
  text-shadow: 0 4px 30px rgba(0,0,0,.4) !important;
}
html body.userLayout .login-main-content .logo-box::after {
  content: "" !important;
  display: block !important;
  width: 58px !important; height: 4px !important;
  margin-top: 14px !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, var(--la), var(--lb)) !important;
  box-shadow: 0 2px 14px var(--lag) !important;
}

/* 表单 */
html body.userLayout .formlogin { width: 100% !important; }
html body.userLayout .formlogin .ant-form-item { margin-bottom: 24px !important; }
html body.userLayout .formlogin .ant-input.ant-input-lg,
html body.userLayout .formlogin .ant-input {
  height: 48px !important;
  padding: 8px 16px !important;
  font-size: 15px !important;
  color: #e9efff !important;
  background-color: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: all .25s ease !important;
}
/* 输入框内置图标（账号/锁） */
html body.userLayout .formlogin .ant-form-item:nth-of-type(1) .ant-input {
  padding-left: 46px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.8-3.4 4.6-5 8-5s6.2 1.6 8 5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 15px center !important;
  background-size: 19px 19px !important;
}
html body.userLayout .formlogin .ant-form-item:nth-of-type(2) .ant-input {
  padding-left: 46px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 15px center !important;
  background-size: 19px 19px !important;
}
html body.userLayout .formlogin .ant-input::placeholder { color: rgba(255,255,255,.3) !important; }
html body.userLayout .formlogin .ant-input:hover {
  border-color: rgba(255,255,255,.34) !important;
  background-color: rgba(255,255,255,.08) !important;
}
html body.userLayout .formlogin .ant-input:focus,
html body.userLayout .formlogin .ant-input-focused {
  border-color: var(--la) !important;
  background-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 0 0 3px var(--lag), 0 0 18px -4px var(--la) !important;
  outline: none !important;
}
/* autofill 暗色适配 */
html body.userLayout .formlogin input:-webkit-autofill,
html body.userLayout .formlogin input:-webkit-autofill:hover,
html body.userLayout .formlogin input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #101a30 inset !important;
  -webkit-text-fill-color: #e9efff !important;
  caret-color: #e9efff !important;
  transition: background-color 999999s ease-in-out 0s !important;
}

/* 登录按钮 */
html body.userLayout .formlogin .login-button.ant-btn,
html body.userLayout .formlogin button.ant-btn-primary {
  width: 100% !important;
  height: 48px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 10px !important;
  text-indent: 10px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--la), var(--lb)) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px -8px var(--lag) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
  transition: all .25s ease !important;
  overflow: hidden !important;
  position: relative !important;
}
html body.userLayout .formlogin .login-button.ant-btn::before,
html body.userLayout .formlogin button.ant-btn-primary::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -80% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: left .5s ease !important;
}
html body.userLayout .formlogin .login-button.ant-btn:hover,
html body.userLayout .formlogin button.ant-btn-primary:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 32px -8px var(--lag) !important;
}
html body.userLayout .formlogin .login-button.ant-btn:hover::before,
html body.userLayout .formlogin button.ant-btn-primary:hover::before { left: 130% !important; }
html body.userLayout .formlogin .login-button.ant-btn:active,
html body.userLayout .formlogin button.ant-btn-primary:active { transform: translateY(0) !important; }

/* 浏览器提示 & 底部版权 */
html body.userLayout .use-tip {
  position: static !important;
  width: 100% !important;
  margin-top: 16px !important;
  text-align: center !important;
  color: rgba(255,255,255,.35) !important;
  font-size: 12px !important;
}
html body.userLayout .use-tip img { display: none !important; }
html body.userLayout .use-tip span { color: rgba(255,255,255,.35) !important; }
html body.userLayout .foot {
  position: fixed !important;
  bottom: 14px !important;
  z-index: 5 !important;
  color: rgba(255,255,255,.38) !important;
  font-size: 12px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
}
html body.userLayout .foot a { color: rgba(255,255,255,.45) !important; }
html body.userLayout .foot a:hover { color: var(--la) !important; }

/* ===== 主题切换面板（JS 注入） ===== */
/* v6 起：主题统一由后台「主题设置」驱动，登录页不再显示切换圆点 */

/* ===== 背景细网格（科技质感） ===== */
html body.userLayout .login-wrapper::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background-image:
    linear-gradient(rgba(148, 184, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 184, 255, .045) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 30%, transparent 78%) !important;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 30%, transparent 78%) !important;
}

/* ===== 玻璃登录卡 · 顶部流光条 ===== */
html body.userLayout .login-main-content .logo-box::before {
  content: "" !important;
  position: absolute !important;
  top: -44px !important;
  left: 46px !important;
  right: 46px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, transparent, var(--la), var(--lb), transparent) !important;
  background-size: 200% 100% !important;
  animation: lgnShine 5s ease-in-out infinite !important;
  opacity: .85 !important;
}
@keyframes lgnShine {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* ===== 小屏适配 ===== */
@media (max-height: 780px) {
  html body.userLayout .lgn-brand .lgn-logo { margin-bottom: 16px !important; }
  html body.userLayout .lgn-brand h1 { font-size: 38px !important; margin-bottom: 10px !important; }
  html body.userLayout .lgn-brand .lgn-sub { margin-bottom: 16px !important; }
  html body.userLayout .lgn-brand .lgn-feats li { margin-bottom: 8px !important; }
  html body.userLayout .lgn-mods div { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body.userLayout .lgn-brand .lgn-stats { margin-top: 12px !important; padding-top: 12px !important; }
}
@media (max-width: 1180px) {
  html body.userLayout .lgn-brand { display: none !important; }
}
@media (max-width: 560px) {
  html body.userLayout .login-main-content {
    width: 92vw !important;
    padding: 38px 28px 30px !important;
  }
}