/* ============================================================
   UBX 开发版后台 · 登录页现代主题 (2026-10-26)
   仅作用于登录视图 (#background / .login-container 均为登录页独有节点)
   停用方法: 从 index.html 移除 login-theme.css 的 <link> 即可
   ============================================================ */

/* ---------- 整页底色 (防白闪) ---------- */
html, body { background: #060a13; }

/* ---------- 背景层: 深邃渐变 + 光晕 + 细网格 (覆盖 JS 注入的必应图) ---------- */
#background {
  background-color: #060a13 !important;
  background-image:
    radial-gradient(900px 520px at 18% -10%, rgba(16, 185, 129, .26), transparent 60%),
    radial-gradient(1000px 620px at 88% 110%, rgba(59, 130, 246, .24), transparent 60%),
    radial-gradient(700px 500px at 75% 8%, rgba(99, 102, 241, .16), transparent 60%),
    linear-gradient(135deg, #0a1120 0%, #060a13 55%, #081018 100%) !important;
  background-size: cover !important;
}
#background::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 30%, transparent 75%);
}

/* ---------- 模糊层: 轻磨砂 + 暗色罩, 让背景透出质感 ---------- */
.bg-backdrop-layout {
  background: rgba(4, 8, 16, .38) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.25) !important;
          backdrop-filter: blur(7px) saturate(1.25) !important;
}

/* ---------- 登录卡片 ---------- */
.login-container .login-width {
  max-width: 980px !important;
  height: 540px !important;
  margin-top: -270px !important;
  padding: 0 !important;
  border-radius: 22px !important;
  overflow: hidden;
  background: #ffffff !important;
  box-shadow:
    0 50px 100px -24px rgba(0, 0, 0, .65),
    0 24px 40px -24px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(255, 255, 255, .09) !important;
}
@media (max-width: 767px) {
  .login-container .login-width { height: auto !important; min-height: 480px; margin-top: 0 !important; top: 8% !important; }
}

/* ---------- 左侧品牌面板: 深色高级渐变 (替换原插画图) ---------- */
.login-container .left-panel {
  height: 540px !important;
  background:
    radial-gradient(560px 300px at 20% 0%, rgba(52, 211, 153, .35), transparent 60%),
    radial-gradient(500px 380px at 95% 100%, rgba(37, 99, 235, .35), transparent 55%),
    linear-gradient(158deg, #0b3d2c 0%, #065f46 42%, #0a1f33 105%) !important;
  position: relative;
  padding: 34px 36px !important;
}
.login-container .left-panel::after {
  content: "";
  position: absolute; right: -70px; bottom: -70px;
  width: 250px; height: 250px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 26px rgba(255, 255, 255, .03), 0 0 0 60px rgba(255, 255, 255, .018);
  pointer-events: none;
}
/* 左侧面板底部品牌字 (后台站点标题未配置时的兜底展示) */
.login-container .left-panel::before {
  content: "UBX";
  position: absolute; left: 36px; bottom: 30px;
  font-size: 44px; font-weight: 800; letter-spacing: 3px;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.login-container .logo { margin-top: 6px !important; align-items: center; position: relative; z-index: 1; }
.login-container .logo img {
  width: 52px !important; height: 52px !important;
  border-radius: 14px !important;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.login-container .logo span {
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff !important;
  margin-left: 16px !important;
}
.login-container .slogan {
  justify-content: flex-start !important;
  margin-top: 20px;
  position: relative; z-index: 1;
}
.login-container .slogan span {
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, .78) !important;
  letter-spacing: .4px;
}

/* ---------- 右侧表单区 ---------- */
.login-container .login-width > div:last-child {
  padding: 30px 46px 40px !important;
}
.login-container h2 {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #0b1526 !important;
  letter-spacing: .5px;
  margin-top: 34px !important;
  margin-bottom: 30px !important;
}
.login-container .arco-form-item { margin-bottom: 20px !important; }
.login-container .arco-input-wrapper {
  height: 50px !important;
  border-radius: 12px !important;
  background: #f6f8fb !important;
  border: 1px solid #e3e9f2 !important;
  padding-left: 14px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-container .arco-input-wrapper:hover { border-color: #c6d3e4 !important; }
.login-container .arco-input-wrapper.arco-input-focus,
.login-container .arco-input-wrapper:focus-within {
  background: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, .14) !important;
}
.login-container .arco-input { font-size: 15px !important; color: #0b1526 !important; }
.login-container .arco-input::placeholder { color: #94a3b8 !important; }
.login-container .arco-input-prefix { color: #64748b; margin-right: 8px; font-size: 17px; }
.login-container .arco-input-append { background: transparent !important; border: none !important; }
.login-container .arco-input-append img,
.login-container .arco-input-append canvas { height: 40px !important; border-radius: 8px; display: block; border: 1px solid #e3e9f2; }

/* ---------- 登录按钮: 品牌渐变 ---------- */
.login-container .arco-btn-primary {
  height: 52px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: 2px;
  border: none !important;
  background: linear-gradient(92deg, #059669 0%, #0d9488 55%, #0284c7 130%) !important;
  box-shadow: 0 14px 26px -10px rgba(5, 150, 105, .55);
  transition: filter .18s ease, transform .12s ease, box-shadow .18s ease;
}
.login-container .arco-btn-primary:hover {
  filter: brightness(1.07);
  box-shadow: 0 18px 30px -10px rgba(5, 150, 105, .6);
}
.login-container .arco-btn-primary:active { transform: translateY(1px); }