/* =============================================================================
   xy.52h.cn 前端视觉改版 —— 附加覆盖层（不需重新构建前端）
   作用域：落地页 .mp / 登录页 .login-box / 错误页 #box；不触碰后台布局与组件
   生效方式：由 index.html 在原有样式之后引入本文件
   注意：所有选择器都带 `html body` 前缀用于提升优先级，避免与路由级 CSS 竞争顺序；
        主题色一律使用 var(--el-color-primary, #2992ff)，跟随面板主题色设置。
   ========================================================================== */

/* ---------- 0. 设计令牌 ---------- */
html body .mp[data-v-e54598e2],
html body .login-box[data-v-77d5b153],
html body #box {
  --xy-font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC",
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --xy-primary: var(--el-color-primary, #2992ff);
  --xy-violet: #7c3aed;
  --xy-cyan: #06b6d4;
  --xy-ink: #0f172a;
  --xy-ink-2: #334155;
  --xy-ink-3: rgba(15, 23, 42, 0.56);
  --xy-line: rgba(15, 23, 42, 0.08);
  font-family: var(--xy-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   1. 落地页（/）
   ========================================================================== */

/* ---------- 1.1 背景 ---------- */
html body .mp[data-v-e54598e2] {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--xy-ink);
  background:
    radial-gradient(860px 600px at 6% -8%, color-mix(in srgb, var(--xy-primary) 20%, transparent), transparent 62%),
    radial-gradient(760px 560px at 102% 4%, color-mix(in srgb, var(--xy-violet) 18%, transparent), transparent 60%),
    radial-gradient(700px 520px at 50% 112%, color-mix(in srgb, var(--xy-cyan) 16%, transparent), transparent 62%),
    linear-gradient(180deg, #f8faff 0%, #f2f6ff 46%, #fcf8ff 100%);
}

html.dark body .mp[data-v-e54598e2] {
  color: #e8eefb;
  background:
    radial-gradient(880px 620px at 8% -10%, color-mix(in srgb, var(--xy-primary) 30%, transparent), transparent 62%),
    radial-gradient(720px 560px at 100% 6%, color-mix(in srgb, var(--xy-violet) 26%, transparent), transparent 62%),
    radial-gradient(680px 520px at 46% 112%, color-mix(in srgb, var(--xy-cyan) 20%, transparent), transparent 62%),
    linear-gradient(180deg, #070b15 0%, #0b1020 52%, #120c22 100%);
}

/* ---------- 1.2 背景装饰：把原来的硬边几何块改成柔光光晕 ---------- */
html body .mp-canvas[data-v-e54598e2] { z-index: 0; }
html body .mp-shape[data-v-e54598e2] { border: 0; box-shadow: none; }

html body .mp-shape--blob[data-v-e54598e2] {
  width: min(54vw, 640px);
  height: min(54vw, 640px);
  top: -16%;
  right: -14%;
  border-radius: 50%;
  opacity: 0.7;
  filter: blur(48px);
  background: radial-gradient(circle at 34% 34%,
    color-mix(in srgb, var(--xy-primary) 85%, transparent),
    color-mix(in srgb, var(--xy-violet) 60%, transparent) 56%,
    transparent 74%);
  animation: xy-drift 20s ease-in-out infinite;
}

html body .mp-shape--tri[data-v-e54598e2] {
  width: 190px;
  height: 190px;
  top: 60%;
  left: 8%;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  opacity: 0.45;
  filter: blur(18px);
  background: linear-gradient(150deg,
    color-mix(in srgb, #34d399 80%, transparent),
    color-mix(in srgb, var(--xy-cyan) 55%, transparent));
  animation: xy-float 17s ease-in-out infinite;
}

html body .mp-shape--ring[data-v-e54598e2] {
  width: 132px;
  height: 132px;
  bottom: 18%;
  left: 7%;
  border: 8px solid transparent;
  border-radius: 50%;
  opacity: 0.5;
  background: conic-gradient(from 140deg, var(--xy-primary), var(--xy-violet), var(--xy-cyan), var(--xy-primary)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: xy-spin 28s linear infinite;
}

html body .mp-shape--squiggle[data-v-e54598e2] {
  width: 210px;
  height: 3px;
  top: 15%;
  left: 44%;
  border-radius: 999px;
  opacity: 0.45;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--xy-primary) 72%, transparent) 0 12px,
    transparent 12px 24px);
  animation: xy-sway 13s ease-in-out infinite;
}

html body .mp-shape--dots[data-v-e54598e2] {
  width: 150px;
  height: 150px;
  bottom: 14%;
  right: 7%;
  opacity: 0.5;
  background-image: radial-gradient(color-mix(in srgb, var(--xy-primary) 62%, transparent) 2.2px, transparent 2.4px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 72%);
  animation: xy-float 24s ease-in-out infinite reverse;
}

html body .mp-shape--zig[data-v-e54598e2] {
  width: 160px;
  height: 20px;
  top: 26%;
  left: 5%;
  opacity: 0.28;
  transform: rotate(6deg);
  background:
    linear-gradient(135deg, color-mix(in srgb, #c4b5fd 85%, transparent) 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(225deg, color-mix(in srgb, #c4b5fd 85%, transparent) 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(315deg, color-mix(in srgb, #f0abfc 85%, transparent) 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(45deg, color-mix(in srgb, #f0abfc 85%, transparent) 25%, transparent 25%) 0 0 / 20px 20px;
}

html body .mp-shape--bar[data-v-e54598e2] {
  width: 240px;
  height: 12px;
  bottom: 12%;
  left: 24%;
  border-radius: 999px;
  opacity: 0.38;
  filter: blur(7px);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--xy-primary) 72%, transparent),
    color-mix(in srgb, var(--xy-violet) 62%, transparent));
  animation: xy-float 19s ease-in-out infinite;
}

html body .mp-shape--pill[data-v-e54598e2] {
  width: 108px;
  height: 42px;
  top: 70%;
  right: 30%;
  border-radius: 999px;
  opacity: 0.85;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.42));
  box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.dark body .mp-shape--pill[data-v-e54598e2] {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
}

html body .mp-shape--grid[data-v-e54598e2] {
  top: 50%;
  left: 50%;
  width: min(880px, 92vw);
  height: min(560px, 62vh);
  opacity: 0.5;
  transform: translate(-50%, -50%);
  background-image:
    linear-gradient(color-mix(in srgb, var(--xy-primary) 15%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--xy-primary) 15%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, transparent 100%);
}

html.dark body .mp-shape--grid[data-v-e54598e2] {
  background-image:
    linear-gradient(color-mix(in srgb, #93c5fd 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #93c5fd 14%, transparent) 1px, transparent 1px);
}

/* ---------- 1.3 顶部导航：悬浮玻璃条 ---------- */
html body .mp-nav[data-v-e54598e2] {
  position: fixed;
  z-index: 60;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 32px));
  height: 64px;
  padding: 0 16px 0 18px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html.dark body .mp-nav[data-v-e54598e2] {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(13, 19, 36, 0.66);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html body .mp-nav__brand[data-v-e54598e2] { gap: 12px; }

html body .mp-nav__logo[data-v-e54598e2] {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.7), 0 0 0 1px rgba(15, 23, 42, 0.06);
  /* 使用站内同名资源，避免依赖外部图床 */
  content: url("/assets/logo-pl5f1j.webp");
}

/* 未配置站点 Logo 时的备用品牌标记（.mp-nav__mark）：改为渐变圆角方块 */
html body .mp-nav__mark[data-v-e54598e2] {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--xy-primary) 88%, #ffffff 12%),
    color-mix(in srgb, var(--xy-primary) 52%, var(--xy-violet) 48%));
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--xy-primary) 80%, transparent);
}

html body .mp-nav__name[data-v-e54598e2] {
  font-family: var(--xy-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--xy-ink);
}

html.dark body .mp-nav__name[data-v-e54598e2] { color: #eef2ff; }

/* ---------- 1.4 主视觉：居中、渐变标题、柔光背板 ---------- */
html body .mp-hero[data-v-e54598e2] {
  max-width: none;
  min-height: 100vh;
  padding: clamp(112px, 16vh, 168px) clamp(20px, 5vw, 64px) clamp(96px, 14vh, 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

html body .mp-hero[data-v-e54598e2]::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: min(760px, 88vw);
  height: min(430px, 54vh);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--xy-primary) 24%, transparent), transparent 68%);
  filter: blur(18px);
}

html.dark body .mp-hero[data-v-e54598e2]::before {
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--xy-primary) 34%, transparent), transparent 70%);
}

html body .mp-hero__brand[data-v-e54598e2] {
  margin: 0 0 26px;
  font-family: var(--xy-font);
  font-size: clamp(40px, 6.6vw, 84px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-shadow: none;
  background: linear-gradient(118deg,
    #101a33 4%,
    color-mix(in srgb, var(--xy-primary) 92%, #ffffff 8%) 44%,
    var(--xy-violet) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 16px 30px color-mix(in srgb, var(--xy-primary) 26%, transparent));
  animation: xy-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.dark body .mp-hero__brand[data-v-e54598e2] {
  background: linear-gradient(118deg,
    #ffffff 2%,
    color-mix(in srgb, var(--xy-primary) 68%, #ffffff) 48%,
    color-mix(in srgb, var(--xy-violet) 55%, #ffffff) 96%);
  -webkit-background-clip: text;
  background-clip: text;
}

html body .mp-hero__brand[data-v-e54598e2]::after {
  content: "";
  display: block;
  width: 76px;
  height: 6px;
  margin: 26px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--xy-primary), var(--xy-violet));
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--xy-primary) 75%, transparent);
}

/* 不支持 background-clip:text 时回退为实色文字 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html body .mp-hero__brand[data-v-e54598e2] {
    color: var(--xy-ink);
    background: none;
  }
}

html body .mp-hero__actions[data-v-e54598e2] {
  justify-content: center;
  gap: 16px;
  animation: xy-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* ---------- 1.5 按钮 ---------- */
html body .mp-btn[data-v-e54598e2] {
  min-width: 158px;
  height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--xy-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

html body .mp-btn--primary[data-v-e54598e2] {
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--xy-primary) 90%, #ffffff 10%),
    color-mix(in srgb, var(--xy-primary) 52%, var(--xy-violet) 48%));
  box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--xy-primary) 85%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

html body .mp-btn--primary[data-v-e54598e2]:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 38px -18px color-mix(in srgb, var(--xy-primary) 90%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

html body .mp-btn--soft[data-v-e54598e2] {
  color: var(--xy-ink);
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 30px -22px rgba(15, 23, 42, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html body .mp-btn--soft[data-v-e54598e2]:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--xy-primary) 35%, transparent);
  box-shadow: 0 20px 34px -22px rgba(15, 23, 42, 0.85);
}

html body .mp-btn--ghost[data-v-e54598e2] {
  color: var(--xy-ink-2);
  background: transparent;
  border-color: rgba(15, 23, 42, 0.16);
}

html body .mp-btn--ghost[data-v-e54598e2]:hover {
  color: var(--xy-ink);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--xy-primary) 45%, transparent);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 30px -24px rgba(15, 23, 42, 0.55);
}

html.dark body .mp-btn--soft[data-v-e54598e2] {
  color: #e8eefb;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 30px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.dark body .mp-btn--soft[data-v-e54598e2]:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: color-mix(in srgb, var(--xy-primary) 45%, transparent);
}

html.dark body .mp-btn--ghost[data-v-e54598e2] {
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.22);
}

html.dark body .mp-btn--ghost[data-v-e54598e2]:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
  border-color: color-mix(in srgb, var(--xy-primary) 55%, transparent);
  box-shadow: 0 18px 30px -24px rgba(0, 0, 0, 0.9);
}

/* 按下态：统一为轻微下沉，避免露出原版硬阴影 */
html body .mp-btn[data-v-e54598e2]:active {
  transform: translateY(1px);
  box-shadow: 0 10px 20px -18px rgba(15, 23, 42, 0.6);
}

/* ---------- 1.6 页脚 ---------- */
html body .mp-footer[data-v-e54598e2] {
  bottom: 26px;
  font-size: 12.5px;
  line-height: 1.95;
  font-family: var(--xy-font);
}

html body .mp-footer__text[data-v-e54598e2] {
  margin: 0 0 2px;
  color: var(--xy-ink-3);
}

html body .mp-footer a[data-v-e54598e2] {
  color: rgba(15, 23, 42, 0.46);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

html body .mp-footer a[data-v-e54598e2]:hover {
  color: var(--xy-primary);
  border-bottom-color: currentColor;
  text-decoration: none;
}

html.dark body .mp-footer__text[data-v-e54598e2] { color: rgba(226, 232, 240, 0.6); }
html.dark body .mp-footer a[data-v-e54598e2] { color: rgba(226, 232, 240, 0.55); }

/* ---------- 1.7 动效 ---------- */
@keyframes xy-rise {
  from { transform: translateY(22px); }
  to { transform: translateY(0); }
}

@keyframes xy-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-12px, 16px); }
}

@keyframes xy-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-24px, 18px) scale(1.06); }
}

@keyframes xy-sway {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(-1deg); }
}

@keyframes xy-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html body .mp-shape[data-v-e54598e2],
  html body .mp-hero__brand[data-v-e54598e2],
  html body .mp-hero__actions[data-v-e54598e2] { animation: none; }
}

/* ---------- 1.8 响应式 ---------- */
@media (max-width: 900px) {
  html body .mp-nav[data-v-e54598e2] {
    top: 10px;
    height: 58px;
    padding: 0 14px;
    border-radius: 16px;
  }
  html body .mp-nav__logo[data-v-e54598e2] { width: 30px; height: 30px; border-radius: 9px; }
  html body .mp-nav__name[data-v-e54598e2] { font-size: 15px; }

  html body .mp-hero[data-v-e54598e2] { padding-top: clamp(96px, 15vh, 132px); }
  html body .mp-hero__brand[data-v-e54598e2] { font-size: clamp(34px, 9.2vw, 54px); }
  html body .mp-hero__brand[data-v-e54598e2]::after { width: 62px; height: 5px; margin-top: 20px; }
  html body .mp-btn[data-v-e54598e2] { min-width: 0; flex: 1 1 auto; height: 52px; }

  html body .mp-shape--blob[data-v-e54598e2] {
    width: min(78vw, 420px);
    height: min(78vw, 420px);
    top: auto;
    bottom: 12%;
    right: -22%;
    opacity: 0.55;
  }
  html body .mp-shape--grid[data-v-e54598e2] { opacity: 0.32; }
  html body .mp-shape--dots[data-v-e54598e2],
  html body .mp-shape--zig[data-v-e54598e2] { display: none; }
  html body .mp-shape--tri[data-v-e54598e2] { opacity: 0.3; }
  html body .mp-shape--bar[data-v-e54598e2] { opacity: 0.28; }
}

@media (max-width: 560px) {
  html body .mp-hero__actions[data-v-e54598e2] {
    flex-direction: column;
    width: 100%;
    max-width: 330px;
    gap: 12px;
  }
  html body .mp-btn[data-v-e54598e2] { width: 100%; }
  html body .mp-footer[data-v-e54598e2] { bottom: 18px; }
  html body .mp-shape--pill[data-v-e54598e2],
  html body .mp-shape--squiggle[data-v-e54598e2] { display: none; }
}

/* =============================================================================
   2. 登录页（/login、/admin 共用）
   ========================================================================== */

/* ---------- 2.1 页面底色 ---------- */
html body .login-box[data-v-77d5b153] {
  background-color: #eef2fb;
  background-image:
    radial-gradient(760px 540px at 10% 6%, color-mix(in srgb, var(--xy-primary) 22%, transparent), transparent 62%),
    radial-gradient(680px 540px at 92% 94%, color-mix(in srgb, var(--xy-violet) 20%, transparent), transparent 62%),
    radial-gradient(560px 440px at 82% 8%, color-mix(in srgb, var(--xy-cyan) 16%, transparent), transparent 64%),
    linear-gradient(180deg, #f7f9ff 0%, #eef3fd 100%);
  background-size: auto;
}

html.dark body .login-box[data-v-77d5b153] {
  background-color: #0b1020;
  background-image:
    radial-gradient(780px 560px at 12% 4%, color-mix(in srgb, var(--xy-primary) 28%, transparent), transparent 62%),
    radial-gradient(700px 560px at 90% 96%, color-mix(in srgb, var(--xy-violet) 24%, transparent), transparent 62%),
    radial-gradient(520px 420px at 84% 8%, color-mix(in srgb, var(--xy-cyan) 18%, transparent), transparent 64%),
    linear-gradient(180deg, #070b15 0%, #0d1224 100%);
  background-size: auto;
}

html body .login-bg-shape[data-v-77d5b153] { filter: blur(90px); }

html body .login-bg-shape--1[data-v-77d5b153] {
  background: var(--xy-primary);
  opacity: 0.38;
}

html body .login-bg-shape--2[data-v-77d5b153] {
  background: color-mix(in srgb, var(--xy-primary) 55%, #a855f7 45%);
  opacity: 0.34;
}

html body .login-bg-shape--3[data-v-77d5b153] {
  background: color-mix(in srgb, var(--xy-primary) 50%, #22d3ee 50%);
  opacity: 0.3;
}

html body .login-bg-shape--4[data-v-77d5b153] {
  background: color-mix(in srgb, var(--xy-primary) 45%, #f472b6 55%);
  opacity: 0.26;
}

html.dark body .login-bg-shape[data-v-77d5b153] { opacity: 0.2; }

/* ---------- 2.2 卡片 ---------- */
html body .login-box[data-v-77d5b153] .w-960px[data-v-77d5b153] {
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 42px 90px -46px rgba(15, 23, 42, 0.55), 0 2px 8px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
}

html.dark body .login-box[data-v-77d5b153] .w-960px[data-v-77d5b153] {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 21, 38, 0.82);
  box-shadow: 0 42px 90px -50px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------- 2.3 品牌侧 ---------- */
html body .login-brand-side[data-v-77d5b153] {
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255, 255, 255, 0.22), transparent 58%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--xy-primary) 92%, #ffffff 8%) 0%,
      color-mix(in srgb, var(--xy-primary) 46%, var(--xy-violet) 54%) 56%,
      color-mix(in srgb, var(--xy-primary) 30%, var(--xy-cyan) 70%) 100%);
}

html body .login-brand-side[data-v-77d5b153]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 88% 12%, rgba(255, 255, 255, 0.22), transparent 70%),
    radial-gradient(46% 36% at 12% 92%, rgba(255, 255, 255, 0.14), transparent 72%);
}

html body .login-brand-side[data-v-77d5b153] .w-300px[data-v-77d5b153],
html body .login-brand-side[data-v-77d5b153] .w-200px[data-v-77d5b153] {
  background: rgba(255, 255, 255, 0.16);
  filter: blur(6px);
}

html body .login-brand-side[data-v-77d5b153] .w-40px[data-v-77d5b153] {
  border-radius: 12px;
  box-shadow: 0 14px 26px -16px rgba(2, 6, 23, 0.7);
}

html body .login-brand-side[data-v-77d5b153] .text-24px[data-v-77d5b153] {
  font-weight: 800;
  letter-spacing: 0.04em;
}

html body .login-title[data-v-77d5b153] {
  font-weight: 800;
  font-size: 33px;
  line-height: 1.26;
  letter-spacing: 0.005em;
  text-shadow: 0 12px 26px rgba(2, 6, 23, 0.28);
}

html body .login-desc[data-v-77d5b153] {
  font-size: 15px;
  line-height: 1.8;
  opacity: 0.88;
  text-shadow: 0 6px 16px rgba(2, 6, 23, 0.22);
}

html body .login-feature-item[data-v-77d5b153] {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html body .login-feature-item[data-v-77d5b153]:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(6px);
}

html body .login-feature-item .login-feature-square[data-v-77d5b153] {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

html body .login-brand-side[data-v-77d5b153] .text-12px[data-v-77d5b153] {
  opacity: 0.68;
  letter-spacing: 0.02em;
}

/* ---------- 2.4 表单侧 ---------- */
html body .login-box[data-v-77d5b153] .text-28px[data-v-77d5b153] {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

html body .login-box[data-v-77d5b153] .text-15px[data-v-77d5b153] {
  font-size: 14.5px;
  color: var(--el-text-color-regular, #606266);
}

html body .login-input[data-v-77d5b153] .el-input__wrapper {
  min-height: 46px;
  padding: 1px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

html body .login-input[data-v-77d5b153] .el-input__wrapper:hover {
  border-color: color-mix(in srgb, var(--xy-primary) 38%, transparent);
  background: #fff;
}

html body .login-input[data-v-77d5b153] .el-input__wrapper.is-focus,
html body .login-input[data-v-77d5b153] .el-input__wrapper:focus-within {
  border-color: color-mix(in srgb, var(--xy-primary) 70%, transparent);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xy-primary) 14%, transparent);
}

html body .login-input[data-v-77d5b153] .el-input__inner {
  height: 42px;
  font-size: 15px;
}

html.dark body .login-input[data-v-77d5b153] .el-input__wrapper {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

html.dark body .login-input[data-v-77d5b153] .el-input__wrapper:hover,
html.dark body .login-input[data-v-77d5b153] .el-input__wrapper.is-focus,
html.dark body .login-input[data-v-77d5b153] .el-input__wrapper:focus-within {
  background: rgba(255, 255, 255, 0.08);
  border-color: color-mix(in srgb, var(--xy-primary) 60%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xy-primary) 18%, transparent);
}

html body .login-verify-img[data-v-77d5b153] {
  width: 104px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html body .login-verify-img[data-v-77d5b153]:hover {
  opacity: 1;
  border-color: color-mix(in srgb, var(--xy-primary) 55%, transparent);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--xy-primary) 55%, transparent);
}

html body .login-btn[data-v-77d5b153] {
  height: 50px;
  border: 0;
  border-radius: 14px;
  font-family: var(--xy-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--xy-primary) 90%, #ffffff 10%),
    color-mix(in srgb, var(--xy-primary) 50%, var(--xy-violet) 50%));
  box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--xy-primary) 85%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

html body .login-btn[data-v-77d5b153]:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--xy-primary) 84%, #ffffff 16%),
    color-mix(in srgb, var(--xy-primary) 44%, var(--xy-violet) 56%));
  box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--xy-primary) 90%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

html body .login-btn[data-v-77d5b153]:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

html body .login-box[data-v-77d5b153] .is-link {
  color: var(--xy-primary);
  font-weight: 600;
}

html body .login-box[data-v-77d5b153] .is-link:hover {
  color: color-mix(in srgb, var(--xy-primary) 78%, #000 22%);
  text-decoration: underline;
}

html.dark body .login-box[data-v-77d5b153] .is-link:hover {
  color: color-mix(in srgb, var(--xy-primary) 82%, #fff 18%);
}

html body .login-footer[data-v-77d5b153],
html body .login-footer-mobile[data-v-77d5b153] {
  font-size: 12px;
  letter-spacing: 0.01em;
}

html body .login-footer[data-v-77d5b153] a[data-v-77d5b153],
html body .login-footer-mobile[data-v-77d5b153] a[data-v-77d5b153] {
  color: var(--el-text-color-secondary, #909399);
  text-decoration: none;
  transition: color 0.2s ease;
}

html body .login-footer[data-v-77d5b153] a[data-v-77d5b153]:hover,
html body .login-footer-mobile[data-v-77d5b153] a[data-v-77d5b153]:hover {
  color: var(--xy-primary);
}

/* ---------- 2.5 主题/语言工具栏 ---------- */
html body .login-toolbar[data-v-77d5b153] {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 30px -20px rgba(15, 23, 42, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html.dark body .login-toolbar[data-v-77d5b153] {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(20, 24, 38, 0.72);
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- 2.6 小屏适配 ---------- */
@media (max-height: 720px) {
  html body .login-box[data-v-77d5b153] {
    align-items: flex-start;
    overflow-y: auto;
  }
  html body .login-box[data-v-77d5b153] .w-960px[data-v-77d5b153] {
    height: auto;
    min-height: 0;
    margin: 24px auto 36px;
  }
  html body .login-box[data-v-77d5b153] .flex-1[data-v-77d5b153] {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

@media (max-width: 720px) {
  html body .login-box[data-v-77d5b153] .w-960px[data-v-77d5b153] {
    height: auto;
    min-height: 0;
    border-radius: 22px;
  }
  html body .login-box[data-v-77d5b153] .flex-1[data-v-77d5b153] {
    padding: 40px 26px;
  }
  html body .login-box[data-v-77d5b153] .text-28px[data-v-77d5b153] { font-size: 24px; }
}

/* =============================================================================
   3. 错误页（404 / 403 / 500，均使用 #box 结构）
   ========================================================================== */
html body #box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 48px 22px 56px;
  color: var(--xy-ink);
  background:
    radial-gradient(760px 520px at 50% -12%, color-mix(in srgb, var(--xy-primary) 20%, transparent), transparent 62%),
    radial-gradient(640px 480px at 88% 108%, color-mix(in srgb, var(--xy-violet) 18%, transparent), transparent 64%),
    linear-gradient(180deg, #f8faff 0%, #f1f5ff 58%, #fdf7ff 100%);
}

html.dark body #box {
  color: #e8eefb;
  background:
    radial-gradient(760px 520px at 50% -12%, color-mix(in srgb, var(--xy-primary) 26%, transparent), transparent 62%),
    radial-gradient(640px 480px at 88% 108%, color-mix(in srgb, var(--xy-violet) 22%, transparent), transparent 64%),
    linear-gradient(180deg, #070b15 0%, #0d1224 100%);
}

html body #box #banner {
  position: relative;
  width: min(400px, 72vw);
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto 4px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

html body #box #banner::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 52%,
    color-mix(in srgb, var(--xy-primary) 22%, transparent), transparent 66%);
  filter: blur(14px);
}

html body #box .koi-bottom {
  height: auto;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

html body #box .koi-text1 {
  font-family: var(--xy-font);
  font-size: 62px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  background: linear-gradient(118deg,
    color-mix(in srgb, var(--xy-primary) 92%, #ffffff 8%),
    var(--xy-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html body #box .koi-text1 { color: var(--xy-primary); background: none; }
}

html body #box .koi-text2 {
  padding-top: 14px;
  font-family: var(--xy-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--xy-ink-3);
}

html.dark body #box .koi-text2 { color: rgba(226, 232, 240, 0.66); }

html body #box .el-button {
  height: 46px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  font-family: var(--xy-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--xy-primary) 90%, #ffffff 10%),
    color-mix(in srgb, var(--xy-primary) 50%, var(--xy-violet) 50%));
  box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--xy-primary) 85%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}

html body #box .el-button:hover {
  transform: translateY(-2px);
  border: 0;
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--xy-primary) 84%, #ffffff 16%),
    color-mix(in srgb, var(--xy-primary) 44%, var(--xy-violet) 56%));
  box-shadow: 0 22px 38px -18px color-mix(in srgb, var(--xy-primary) 90%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* =============================================================================
   4. 兜底：不支持 color-mix() 的旧浏览器回退为实色文字（避免透明文字无背景）
   ========================================================================== */
@supports not (color: color-mix(in srgb, red 50%, #000)) {
  html body .mp-hero__brand[data-v-e54598e2],
  html body #box .koi-text1 {
    color: var(--xy-ink);
    background: none;
    filter: none;
  }
  html.dark body .mp-hero__brand[data-v-e54598e2],
  html.dark body #box .koi-text1 { color: #e8eefb; }
}