@charset "UTF-8";
/* ==========================================================================
   零界 LINGJIE · 登录页视觉重构  v1.0  2026-10-20
   作用域仅限 .login-page，登录后的后台界面不受影响
   ========================================================================== */

.login-page{
  --lj-ink:#02060f;
  --lj-deep:#050c19;
  --lj-panel:#071022;
  --lj-line:rgba(96,165,250,.18);
  --lj-cyan:#38bdf8;
  --lj-blue:#2563eb;
  --lj-ice:#e8f2ff;
  --lj-muted:#93aecb;
  /* 让页面内残留的旧变量也切成蓝色系 */
  --lg-bg-1:#02060f; --lg-bg-2:#050c19; --lg-bg-3:#0a1428;
  --lg-white:#071022;
  --lg-text:#e8f2ff; --lg-text-2:#9fb8d4; --lg-text-3:#6b87a6;
  --lg-border:rgba(96,165,250,.18);
  --lg-border-focus:#38bdf8;
  --lg-primary:#38bdf8; --lg-primary-hi:#0ea5e9; --lg-primary-lo:#7dd3fc;
  --lg-primary-soft:rgba(56,189,248,.14);
  --lg-primary-glow:rgba(56,189,248,.35);
  background:
    radial-gradient(1200px 720px at 8% -12%, rgba(37,99,235,.34), transparent 62%),
    radial-gradient(980px 640px at 96% 112%, rgba(14,165,233,.22), transparent 64%),
    radial-gradient(760px 760px at 50% 46%, rgba(99,102,241,.10), transparent 70%),
    linear-gradient(158deg,#02060f 0%,#040a16 42%,#061024 72%,#020610 100%) !important;
  color:var(--lj-ice) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif !important;
}

/* 背景：细网格 + 极光 */
.login-page::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(96,165,250,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 78% 66% at 50% 44%,#000 18%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 66% at 50% 44%,#000 18%,transparent 78%);
}
.login-page::after{
  content:"";position:absolute;left:50%;top:-46%;width:min(1500px,130vw);height:1000px;
  transform:translateX(-50%);pointer-events:none;z-index:0;opacity:.9;
  background:conic-gradient(from 200deg at 50% 50%,transparent 0deg,rgba(56,189,248,.10) 55deg,rgba(37,99,235,.18) 120deg,rgba(14,165,233,.06) 190deg,transparent 240deg);
  filter:blur(72px);
  animation:ljAurora 26s linear infinite;
}

.login-page .deco-circle-1{background:radial-gradient(circle,rgba(37,99,235,.28),transparent 70%)}
.login-page .deco-circle-2{background:radial-gradient(circle,rgba(14,165,233,.20),transparent 70%)}
.login-page .deco-circle-3{background:radial-gradient(circle,rgba(99,102,241,.18),transparent 70%)}
.login-page .deco-grid{
  background-image:
    linear-gradient(rgba(96,165,250,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,.05) 1px,transparent 1px);
  opacity:.55;
}

/* 主容器 */
.login-page .login-container{
  width:1120px;max-width:calc(100vw - 48px);min-height:668px;
  background:linear-gradient(150deg,rgba(10,21,41,.92) 0%,rgba(6,13,27,.96) 55%,rgba(3,8,18,.98) 100%);
  border:1px solid rgba(96,165,250,.20);
  border-radius:28px;
  box-shadow:
    0 50px 120px -40px rgba(0,0,0,.92),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 130px -30px rgba(37,99,235,.55);
  overflow:hidden;
}
.login-page .login-container::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;z-index:6;
  background:linear-gradient(90deg,transparent,rgba(125,211,252,.9),transparent);
  opacity:.8;pointer-events:none;
}

/* 左栏 */
.login-page .login-brand{
  flex:0 0 52%;
  padding:42px 40px;
  background:
    radial-gradient(560px 440px at 50% 14%, rgba(37,99,235,.34), transparent 62%),
    radial-gradient(440px 360px at 10% 102%, rgba(34,211,238,.16), transparent 65%),
    linear-gradient(168deg,#061027 0%,#071530 46%,#040a18 100%);
  border-right:1px solid rgba(96,165,250,.10);
}
.login-page .login-brand:before{
  background-image:
    linear-gradient(rgba(125,211,252,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,211,252,.05) 1px,transparent 1px);
  background-size:44px 44px;opacity:.7;
  -webkit-mask-image:radial-gradient(circle at 50% 38%,#000 26%,transparent 74%);
  mask-image:radial-gradient(circle at 50% 38%,#000 26%,transparent 74%);
}
.login-page .login-brand:after{
  bottom:-34%;width:130%;height:64%;
  background:radial-gradient(ellipse at center,rgba(37,99,235,.34),rgba(14,165,233,.10) 52%,transparent 72%);
}
.login-page .brand-aura{
  background:radial-gradient(ellipse at center,rgba(37,99,235,.34),rgba(56,189,248,.10) 55%,transparent 72%);
  animation-duration:7s;
}
.login-page .brand-sweep{
  background:linear-gradient(105deg,transparent 0%,rgba(125,211,252,.10) 45%,rgba(255,255,255,.06) 50%,transparent 100%);
  animation-duration:9s;
}
.login-page .brand-corner{border-color:rgba(56,189,248,.55)}
.login-page .ember{
  width:3px;height:3px;
  background:radial-gradient(circle,#bae6fd,#38bdf8 42%,rgba(37,99,235,0) 78%);
  box-shadow:0 0 10px rgba(56,189,248,.85);
}

/* 徽标 */
.login-page .brand-emblem{margin-bottom:20px}
.login-page .brand-logo{
  width:196px;height:196px;
  filter:drop-shadow(0 26px 52px rgba(37,99,235,.6));
}
.login-page .brand-logo img{
  width:196px;height:196px;border-radius:34px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(125,211,252,.28),0 0 48px rgba(37,99,235,.55);
  animation:ljFloat 7.5s ease-in-out infinite;
}
.login-page .brand-glow{
  inset:-26px;filter:blur(26px);
  background:radial-gradient(circle,rgba(56,189,248,.42),rgba(37,99,235,.22) 55%,transparent 74%);
  animation:ljGlow 4.4s ease-in-out infinite;
}
.login-page .brand-ring{
  inset:-13px;border-radius:42px;padding:1.5px;
  background:linear-gradient(140deg,rgba(125,211,252,.9),rgba(37,99,235,.08) 42%,rgba(56,189,248,.75) 78%,rgba(125,211,252,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:ljRing 6s ease-in-out infinite;
}

/* 标题 */
.login-page .brand-title{margin:0 0 6px;font-size:0;line-height:1.12}
.login-page .brand-line{
  font-size:44px;font-weight:800;letter-spacing:16px;text-indent:16px;margin-bottom:12px;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,sans-serif;
  background:linear-gradient(180deg,#ffffff 0%,#d8ecff 38%,#7dd3fc 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 26px rgba(56,189,248,.55));
  animation:ljTitle 7s ease-in-out infinite;
}
.login-page .brand-sub{
  font-size:11px;font-weight:600;letter-spacing:5px;text-indent:5px;
  color:rgba(147,197,253,.74);text-transform:uppercase;
}
.login-page .brand-title::after{
  content:"全球设备 · 一屏掌控";
  display:block;margin-top:15px;
  font-size:12.5px;font-weight:400;letter-spacing:4px;text-indent:4px;
  color:rgba(147,178,210,.6);
}

/* 分隔线 */
.login-page .brand-divider{margin:18px 0 18px;gap:9px}
.login-page .brand-divider:before,
.login-page .brand-divider:after{width:54px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.65))}
.login-page .brand-divider:after{background:linear-gradient(90deg,rgba(56,189,248,.65),transparent)}
.login-page .brand-divider-flame{
  width:7px;height:7px;border-radius:1.5px;
  background:linear-gradient(135deg,#bae6fd,#2563eb);
  box-shadow:0 0 14px rgba(56,189,248,.95);
  transform:rotate(45deg);
}

/* 特性 2×2 */
.login-page .brand-features{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:0;text-align:left;
}
.login-page .feature-item{
  padding:11px 12px;gap:10px;
  background:linear-gradient(150deg,rgba(13,30,56,.72),rgba(7,16,32,.55));
  border:1px solid rgba(96,165,250,.16);
  border-radius:13px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:all .28s ease;
}
.login-page .feature-item:hover{
  background:linear-gradient(150deg,rgba(20,44,80,.86),rgba(9,20,40,.7));
  border-color:rgba(56,189,248,.45);
  transform:translateY(-2px);
  box-shadow:0 14px 28px -18px rgba(37,99,235,.95);
}
.login-page .feature-icon{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(150deg,rgba(56,189,248,.18),rgba(37,99,235,.14));
  border:1px solid rgba(96,165,250,.28);
  color:#7dd3fc;
}
.login-page .feature-icon svg{width:17px;height:17px}
.login-page .feature-title{
  font-size:12.5px;font-weight:600;color:#dbeafe;letter-spacing:.5px;line-height:1.3;
}
.login-page .feature-desc{
  font-size:10.5px;font-weight:400;color:#7c96b4;letter-spacing:.2px;line-height:1.35;margin-top:3px;
}
.login-page .brand-content::after{
  content:"LINGJIE CLOUD  ·  全平台设备管理";
  display:block;margin-top:22px;
  font-size:9.5px;letter-spacing:3.4px;font-weight:500;
  color:rgba(125,158,196,.42);
}

/* 右栏 */
.login-page .login-form-section{
  flex:1;padding:54px 58px;background:transparent;
}
.login-page .login-form-wrapper{max-width:378px}
.login-page .login-form-header{margin-bottom:28px}
.login-page .login-form-header::before{
  content:"LINGJIE · 零界";display:inline-block;margin-bottom:14px;
  padding:5px 12px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:3px;text-indent:3px;
  color:#7dd3fc;border:1px solid rgba(56,189,248,.28);
  background:rgba(56,189,248,.07);
}
.login-page .login-form-header h2{
  font-size:30px;font-weight:700;letter-spacing:1.5px;color:#f1f7ff;margin:0 0 10px;
}
.login-page .login-form-header p{
  font-size:13px;color:#8aa6c4;letter-spacing:.4px;margin:0;
}
.login-page .ant-form-item{margin-bottom:18px}

/* 输入框 */
.login-page .ant-input-affix-wrapper,
.login-page .ant-input{
  background:rgba(8,18,35,.92) !important;
  border:1px solid rgba(96,165,250,.22) !important;
  border-radius:13px !important;
  color:#e8f2ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease !important;
}
.login-page .ant-input-affix-wrapper{
  height:50px !important;padding:0 15px !important;display:flex;align-items:center;gap:9px;
}
.login-page .ant-input-affix-wrapper > input.ant-input{
  height:100% !important;padding:0 !important;font-size:14px !important;
  color:#e8f2ff !important;background:transparent !important;
  border:none !important;box-shadow:none !important;
}
.login-page .ant-input-affix-wrapper:hover{border-color:rgba(96,165,250,.45) !important}
.login-page .ant-input-affix-wrapper-focused,
.login-page .ant-input-affix-wrapper:focus-within{
  border-color:rgba(56,189,248,.85) !important;
  background:rgba(10,23,44,.96) !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.14),0 0 26px -8px rgba(56,189,248,.75) !important;
}
.login-page .ant-input::placeholder{color:rgba(133,163,197,.55) !important}
.login-page .ant-input-prefix{color:rgba(133,178,229,.55) !important;margin-inline-end:3px !important}
.login-page .ant-input-prefix svg{fill:rgba(133,178,229,.6)}
.login-page .ant-input-suffix .anticon{color:rgba(133,178,229,.65) !important}

/* 按钮 */
.login-page .ant-btn.login-button{
  height:52px !important;border:none !important;border-radius:13px !important;
  background:linear-gradient(115deg,#1e40af 0%,#2563eb 45%,#0ea5e9 100%) !important;
  color:#f8fbff !important;font-size:15px !important;font-weight:600 !important;
  letter-spacing:5px;text-indent:5px;
  box-shadow:0 16px 34px -14px rgba(37,99,235,.95),inset 0 1px 0 rgba(255,255,255,.24) !important;
  overflow:hidden;
}
.login-page .ant-btn.login-button:hover:not(:disabled){
  background:linear-gradient(115deg,#1d4ed8 0%,#3b82f6 45%,#22d3ee 100%) !important;
  transform:translateY(-1px);
  box-shadow:0 20px 40px -14px rgba(56,189,248,.95),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.login-page .ant-btn.login-button:active{transform:translateY(0)}
.login-page .ant-btn.login-button::after{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:left .65s ease;
}
.login-page .ant-btn.login-button:hover:not(:disabled)::after{left:100%}

/* 记住我 / 忘记密码 */
.login-page .form-options{margin-top:0}
.login-page .ant-checkbox-wrapper{color:#93aecb !important;font-size:13px !important}
.login-page .ant-checkbox-inner{
  background:rgba(8,18,35,.95) !important;
  border:1px solid rgba(96,165,250,.35) !important;
  border-radius:5px !important;
}
.login-page .ant-checkbox-checked .ant-checkbox-inner{
  background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
  border-color:#38bdf8 !important;
  box-shadow:0 0 12px rgba(56,189,248,.55);
}
.login-page .ant-checkbox-wrapper:hover .ant-checkbox-inner{border-color:#38bdf8 !important}
.login-page .forgot-link{color:#7dd3fc !important;font-size:13px}
.login-page .forgot-link:hover{color:#bae6fd !important;text-decoration:underline}

/* 错误提示 / 底部 */
.login-page .ant-form-item-explain-error{font-size:12px;color:#f87171;margin-top:4px}
.login-page .login-error{
  background:rgba(239,68,68,.10);
  border:1px solid rgba(248,113,113,.32);
  color:#fca5a5;border-radius:12px;
}
.login-page .form-footer{
  border-top:1px solid rgba(96,165,250,.12);
  margin-top:22px;padding-top:18px;
}
.login-page .form-footer span{
  font-size:11.5px;letter-spacing:.4px;color:rgba(133,163,197,.5);
}

/* 验证码 / 绑定步骤 */
.login-page .login-step-panel .bind-tip{color:#8aa6c4;font-size:13px}
.login-page .ant-btn-link{color:#7dd3fc !important}
.login-page .ant-btn-link:hover{color:#bae6fd !important}

/* 动效 */
@keyframes ljFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes ljGlow{0%,100%{opacity:.65;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}}
@keyframes ljRing{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes ljTitle{0%,100%{background-position:0 0}50%{background-position:0 40%}}
@keyframes ljAurora{0%{transform:translateX(-50%) rotate(0deg)}100%{transform:translateX(-50%) rotate(360deg)}}

/* 响应式 */
@media (max-width:1024px){
  .login-page .login-container{
    flex-direction:column;width:calc(100vw - 36px);min-height:0;
  }
  .login-page .login-brand{
    flex:0 0 auto;width:100%;padding:34px 28px 30px;border-right:none;
    border-bottom:1px solid rgba(96,165,250,.10);
  }
  .login-page .login-form-section{width:100%;padding:36px 30px 40px}
  .login-page .login-form-wrapper{max-width:420px}
}
@media (max-width:560px){
  .login-page .login-brand{padding:26px 20px 22px}
  .login-page .brand-logo,.login-page .brand-logo img{width:124px;height:124px;border-radius:24px}
  .login-page .brand-ring{border-radius:30px;inset:-9px}
  .login-page .brand-line{font-size:28px;letter-spacing:10px;text-indent:10px}
  .login-page .brand-sub{font-size:9.5px;letter-spacing:3px;text-indent:3px}
  .login-page .brand-title::after{font-size:11px;letter-spacing:2.5px;text-indent:2.5px;margin-top:10px}
  .login-page .brand-features{display:none}
  .login-page .brand-content::after{display:none}
  .login-page .login-form-section{padding:28px 20px 34px}
  .login-page .login-form-header h2{font-size:24px}
  .login-page .login-form-header::before{margin-bottom:10px}
}