/**
 * 登录页样式 · 全屏深蓝 AI 背景 + 靠右深色玻璃登录卡片
 * 左侧品牌内容，右侧独立半透明登录框（可透出底部神经网络与波纹）。
 * 仅作用于登录页（.login-viewport），不影响内部页面。
 */

/* ================= 全屏背景 ================= */
.login-viewport,
.login-viewport > .w-body {
  position: relative;
  background: #0a1a38 !important;
  overflow: hidden;
}

.login-viewport > .w-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(720px 520px at 14% 8%, rgba(64, 120, 220, .34), transparent 60%),
    radial-gradient(640px 520px at 88% 92%, rgba(30, 90, 180, .30), transparent 60%),
    radial-gradient(520px 420px at 82% 8%, rgba(96, 124, 224, .20), transparent 62%),
    linear-gradient(158deg, #1d3f75 0%, #122a52 46%, #091732 100%);
  pointer-events: none;
}

/* 极淡网格 */
.login-viewport > .w-body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(130, 190, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 190, 255, .035) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}

/* 画布 */
.brand-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.login-ripple-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: .5;
  pointer-events: none;
}

/* ================= 舞台：左右分布 ================= */
.login-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 7vw;
  background: transparent !important;
}

/* 兼容存在 body 包裹层的情况 */
.login-stage > .w-body {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: transparent;
}

/* ================= 左侧品牌内容 ================= */
.login-brand-full {
  flex: 1.25;
  min-width: 0;
  justify-content: center;
  gap: 30px;
  background: transparent !important;
}

.login-brand-full > .w-body {
  height: 100%;
  justify-content: center;
  gap: 30px;
  background: transparent;
}

.brand-head-full {
  gap: 9px;
  background: transparent !important;
}

.login-brand-full .login-sys-title {
  font-size: 29px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #f4f8ff;
  text-shadow: 0 2px 16px rgba(70, 150, 255, .45);
}

.login-brand-full .login-sys-title::before {
  width: 33px;
  height: 33px;
  margin-right: 13px;
  vertical-align: -8px;
  border-radius: 9px;
  background-size: 19px 19px;
}

.login-brand-full .login-sys-subtitle {
  margin-top: 0;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(168, 198, 235, .6);
  text-align: left;
  padding-left: 47px;
}

/* slogan */
.brand-slogan-full { color: #fff; background: transparent !important; }

.brand-slogan-full .bs-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 1.5px;
  color: #f6faff;
  text-shadow: 0 3px 20px rgba(50, 120, 230, .5);
}

.brand-slogan-full .bs-title em {
  font-style: normal;
  background: linear-gradient(90deg, #7cc2ff, #a8dcff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-slogan-full .bs-desc {
  margin-top: 14px;
  max-width: 460px;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .5px;
  color: rgba(196, 216, 242, .78);
}

/* 特性 */
.brand-features-full {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: transparent !important;
}

.bf-item { display: flex; align-items: center; gap: 12px; }

.bf-ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(96, 165, 255, .16);
  border: 1px solid rgba(130, 190, 255, .25);
}

.bf-ic svg { width: 18px; height: 18px; stroke: #9ecfff; }

.bf-item b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #eaf2ff;
  letter-spacing: .5px;
}

.bf-item small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(170, 198, 232, .62);
  letter-spacing: .3px;
}

/* ================= 右侧深色玻璃登录卡片 ================= */
.login-glass-card {
  flex: none;
  width: 327px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  background: rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) brightness(1.05);
  backdrop-filter: blur(18px) saturate(120%) brightness(1.05);
  box-shadow:
    0 22px 54px rgba(8, 20, 45, .3),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  animation: login-card-in .55s cubic-bezier(.22, .8, .32, 1);
}

.login-glass-card > .w-titlebar,
.login-glass-card > .w-body,
.login-glass-card > .w-btn-bar {
  background: transparent !important;
}

.login-glass-card > .w-titlebar {
  padding: 32px 36px 6px;
  border-bottom: none !important;
  flex-wrap: wrap;
}

.login-glass-card > .w-body {
  padding: 10px 36px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-glass-card > .w-body > form {
  align-content: center;
  grid-auto-rows: min-content;
  row-gap: 13px;
}

/* 字段占整行：标签在上、输入框满宽 */
.login-glass-card > .w-body > form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.login-glass-card .w-ctrl {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.login-glass-card .w-ctrl .w-label-wrap { width: 100%; }
.login-glass-card .w-ctrl .w-input-wrap { width: 100%; }
.login-glass-card .w-ctrl:not(.w-toggle) .w-label-wrap { display: none; }
.login-glass-card .w-ctrl:not(.w-toggle) { gap: 0; }
/* 记住我保持横向、左对齐、占整行 */
.login-glass-card .w-ctrl.w-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.login-glass-card .w-ctrl.w-toggle .w-label-wrap { width: auto; flex: none; }
.login-glass-card .w-ctrl.w-toggle .w-label-wrap {
  width: auto !important;
  min-width: 0;
  flex: none;
}
.login-glass-card .w-ctrl.w-toggle .w-label-wrap label { text-align: left; }
.login-glass-card .w-ctrl.w-toggle .w-slider {
  margin-left: 0 !important;
  flex: none;
}
.login-glass-card .w-ctrl:not(.w-toggle) .w-label-wrap,
.login-glass-card .w-ctrl:not(.w-toggle) .w-label-wrap label {
  justify-content: flex-start;
  text-align: left;
}

.login-glass-card > .w-btn-bar {
  padding: 18px 36px 30px;
  border-top: none !important;
}

.login-glass-card .w-titlebar .w-title-text,
.login-glass-card .w-titlebar .w-name {
  font-size: 19px;
  font-weight: 700;
  color: #1c2b42;
  letter-spacing: 1px;
}

.login-glass-card .w-titlebar .w-icon { display: none; }

.login-glass-card .w-titlebar::after {
  content: "欢迎回来，请登录您的账户";
  display: block;
  flex-basis: 100%;
  width: 100%;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .3px;
  color: #5c6a82;
}

/* ================= 表单字段（深色玻璃） ================= */
.login-glass-card .w-label {
  font-size: 12.5px;
  font-weight: 500;
  color: #47546c;
}

.login-glass-card .w-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(30, 50, 90, .14);
  border-radius: 9px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-glass-card .w-input-el {
  font-size: 13.5px;
  color: #24324a;
  background: transparent;
}

.login-glass-card .w-input-el::placeholder {
  color: #a6b1c3;
}

.login-glass-card .w-input-icon {
  color: #98a4b8;
  transition: color .18s ease;
}

.login-glass-card .w-input-wrap:hover {
  border-color: rgba(58, 130, 220, .45);
  background: rgba(255, 255, 255, .82);
}

.login-glass-card .w-input-wrap:focus-within {
  border-color: #3a9cff;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(58, 156, 255, .16);
}

.login-glass-card .w-input-wrap:focus-within .w-input-icon {
  color: #3a9cff;
}

/* 错误态 */
.login-glass-card .w-invalid .w-input-wrap,
.login-glass-card .w-invalid .w-input-wrap:hover,
.login-glass-card .w-invalid .w-input-wrap:focus-within {
  border-color: #ef6a52;
  background: rgba(239, 106, 82, .08);
  box-shadow: 0 0 0 3px rgba(239, 106, 82, .14);
}

.login-glass-card .w-invalid .w-input-icon { color: #ff8a75; }
.login-glass-card .w-invalid .w-label { color: #ff8a75; }

/* 眼睛按钮 */
.login-glass-card .w-input-btn {
  color: #98a4b8;
  border-radius: 7px;
  transition: color .15s ease, background .15s ease;
}

.login-glass-card .w-input-btn:hover {
  color: #2f86e8;
  background: rgba(58, 156, 255, .12);
}

/* ================= 记住我 ================= */
.login-glass-card .w-toggle .w-slider-remain { background: rgba(20, 35, 60, .12); }
.login-glass-card .w-toggle.w-on .w-slider-remain,
.login-glass-card .w-toggle .w-slider-track {
  background: linear-gradient(135deg, #3aa2ff, #1668dc);
}
.login-glass-card .w-toggle.w-on .w-slider-handle {
  box-shadow: 0 2px 6px rgba(22, 104, 220, .45);
}

/* ================= 按钮 ================= */
.login-glass-card .w-btn {
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  transition: transform .15s ease, box-shadow .18s ease, filter .18s ease,
    border-color .18s ease, background .18s ease;
}

.login-glass-card .w-btn-primary {
  position: relative;
  overflow: hidden;
  border-color: rgba(18, 92, 190, .5) !important;
  background: linear-gradient(135deg, #359cff 0%, #1668dc 100%) !important;
  box-shadow: 0 5px 14px rgba(22, 104, 220, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.login-glass-card .w-btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}

.login-glass-card .w-btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(22, 104, 220, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.login-glass-card .w-btn-primary:hover::after { left: 125%; }

.login-glass-card .w-btn-primary:active {
  transform: translateY(0);
  filter: brightness(.97);
  box-shadow: 0 2px 6px rgba(22, 104, 220, .35);
}

.login-glass-card .w-btn:not(.w-btn-primary) {
  background: rgba(20, 35, 60, .05);
  border-color: rgba(20, 35, 60, .14);
  color: #47546c;
}

.login-glass-card .w-btn:not(.w-btn-primary):hover {
  border-color: rgba(58, 130, 220, .4);
  color: #24324a;
  background: rgba(20, 35, 60, .09);
  transform: translateY(-1px);
}

.login-glass-card .w-btn:not(.w-btn-primary):active {
  transform: translateY(0);
  background: rgba(20, 35, 60, .06);
}

/* 去除重置按钮，登录按钮占满整行 */
.login-glass-card .w-btn-bar { display: flex; }
.login-glass-card .w-btn:not(.w-btn-primary) { display: none !important; }
.login-glass-card .w-btn-primary { width: 80%; }
.login-glass-card .w-btn-primary,
.login-glass-card .w-btn-primary .w-btn-text,
.login-glass-card .w-btn-primary span { color: #ffffff !important; }
.login-glass-card .w-btn-primary .w-label { color: #ffffff !important; }

/* ================= 版权（底部） ================= */
.login-copyright {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 3;
  font-size: 11.5px;
  line-height: 1.8;
  letter-spacing: .5px;
  text-align: center;
  color: rgba(178, 200, 230, .48);
  background: transparent !important;
}

/* ================= 降级偏好 ================= */
@keyframes login-card-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ================= 中小屏适配 ================= */
@media (max-width: 1080px) {
  .login-stage,
  .login-stage > .w-body { gap: 28px; }
  .login-stage { padding: 0 5vw; }
  .login-brand-full .login-sys-title { font-size: 21px; letter-spacing: 1.5px; }
  .login-brand-full .login-sys-title::before {
    width: 26px; height: 26px; background-size: 15px 15px;
  }
  .login-brand-full .login-sys-subtitle { font-size: 8.5px; padding-left: 38px; letter-spacing: 2.4px; }
  .brand-slogan-full .bs-title { font-size: 24px; }
  .brand-slogan-full .bs-desc { font-size: 12px; }
  .brand-features-full { display: none; }
  .login-glass-card { width: 297px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .login-glass-card { animation: none; }
  .login-glass-card .w-btn-primary::after { display: none; }
}