/* ==========================================================================
   浙江高职提前招生志愿系统 - 机构端实景动效登录页样式 (lx-*)
   ========================================================================== */

#view-login [hidden],
.lx-form[hidden],
.lx-error[hidden],
.lx-alt-link[hidden] {
  display: none !important;
}

.lx-root {
  --lx-pedestal-y: 82vh;
  --lx-stage-tx: 0px;
  --lx-stage-ty: 0px;
  --lx-card-tx: 0px;
  --lx-card-ty: 0px;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #dff2ff 0%, #eef8ff 48%, #cdeaff 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #163a66;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* ── 舞台层（底图 + Canvas 同层变换，确保粒子与画面 100% 贴合） ── */
.lx-stage-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.lx-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 62%;
  transform: translate3d(var(--lx-stage-tx), var(--lx-stage-ty), 0);
  animation: lx-stage-breathe 24s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes lx-stage-breathe {
  0% {
    transform: translate3d(var(--lx-stage-tx), var(--lx-stage-ty), 0) scale(1);
  }
  100% {
    transform: translate3d(var(--lx-stage-tx), var(--lx-stage-ty), 0) scale(1.035);
  }
}

.lx-bg-picture,
.lx-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.lx-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 42% at 50% 13%, rgba(245, 252, 255, 0.50) 0%, rgba(214, 238, 255, 0.24) 52%, transparent 100%),
    radial-gradient(ellipse 56% 42% at 50% 54%, rgba(230, 246, 255, 0.26) 0%, rgba(196, 230, 255, 0.10) 62%, transparent 100%),
    linear-gradient(180deg, rgba(218, 239, 255, 0.30) 0%, rgba(196, 228, 255, 0.15) 42%, rgba(186, 224, 253, 0.13) 76%, rgba(206, 234, 255, 0.24) 100%);
  pointer-events: none;
}

.lx-bg-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 68% 36% at 50% 80%, rgba(186, 230, 253, 0.16) 0%, transparent 72%);
  pointer-events: none;
}

.lx-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lx-gl.is-ready {
  opacity: 1;
}

.lx-gl-on .lx-stage {
  animation: none;
  transform: none;
}

.lx-gl-on .lx-bg-picture {
  visibility: hidden;
}

.lx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ── 流星与碰撞火花层 ── */
.lx-meteor-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  overflow: hidden;
}

/* ── 前景滚动与主布局 ── */
.lx-scroll {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.lx-main {
  min-height: 100%;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* ── 顶部主标题区 ── */
.lx-hero {
  position: relative;
  text-align: center;
  margin-top: clamp(2px, 1.4vh, 18px);
  margin-bottom: clamp(10px, 2vh, 22px);
  padding: 4px 16px;
  z-index: 12;
  opacity: 0;
  animation: lx-condense-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

.lx-hero-backdrop {
  position: absolute;
  inset: -14px -48px;
  background: radial-gradient(ellipse 62% 56% at 50% 48%, rgba(255, 255, 255, 0.78) 0%, rgba(235, 246, 255, 0.42) 52%, transparent 82%);
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}

@keyframes lx-condense-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.9rem, 0) scale(1.045);
    filter: blur(14px) brightness(2.1);
  }
  55% {
    opacity: 1;
    filter: blur(2px) brightness(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.lx-hero-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.16;
  letter-spacing: 0.04em;
  filter: drop-shadow(0 2px 12px rgba(255, 255, 255, 0.98)) drop-shadow(0 6px 20px rgba(37, 99, 235, 0.16));
}

.lx-hero-line1 {
  display: block;
  font-size: clamp(26px, 3.3vw, 44px);
  font-weight: 900;
  background: linear-gradient(92deg, #1d4ed8 0%, #2563eb 30%, #0284c7 54%, #1e60d5 76%, #1d4ed8 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lx-title-flow 8s ease-in-out infinite;
}

.lx-hero-line2 {
  display: block;
  margin-top: 2px;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 900;
  background: linear-gradient(92deg, #1e56c8 0%, #0284c7 38%, #0ea5e9 62%, #1d4ed8 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lx-title-flow 8s ease-in-out infinite reverse;
}

@keyframes lx-title-flow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ── 副标题行（四词 + 流星击中目标） ── */
.lx-hero-tags {
  margin-top: clamp(8px, 1.3vh, 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lx-hero-rule {
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #38bdf8);
}

.lx-hero-rule--r {
  background: linear-gradient(90deg, #38bdf8, transparent);
}

.lx-tag-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #38bdf8;
  opacity: 0.85;
}

.lx-tag {
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.lx-tag--normal {
  color: #1e4b8a;
}

.lx-tag--featured {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 800;
  color: #1d4ed8;
  /* 流星击中前占位隐藏，避免布局抖动 */
  opacity: 0;
  transition: opacity 0.15s ease;
}

.lx-tag--featured.is-struck {
  opacity: 1;
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.95) 0%, rgba(186, 230, 253, 0.85) 100%);
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.35), inset 0 0 0 1px rgba(56, 189, 248, 0.55);
}

.lx-tag--featured .lx-char {
  display: inline-block;
  opacity: 0;
}

.lx-tag--featured.is-struck .lx-char {
  animation: lx-char-pop 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--ci, 0) * 60ms);
}

.lx-tag--featured.is-repulsed {
  animation: lx-tag-rehit 850ms ease-out;
}

@keyframes lx-char-pop {
  0% {
    opacity: 0;
    color: #ffffff;
    text-shadow: 0 0 14px #ffffff, 0 0 26px rgba(56, 189, 248, 0.95), 0 0 38px rgba(37, 99, 235, 0.9);
    transform: scale(1.9) translateY(-2px);
    filter: blur(7px);
  }
  32% {
    opacity: 1;
    color: #0284c7;
  }
  100% {
    opacity: 1;
    color: #0353b4;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes lx-tag-rehit {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }
  25% {
    filter: brightness(1.75) drop-shadow(0 0 12px rgba(56, 189, 248, 0.95));
    transform: scale(1.09);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

/* ── 手机端两枚核心卖点胶囊（<1180px 显示） ── */
.lx-mobile-pills {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.lx-pill {
  position: relative;
  border-radius: 999px;
  padding: 1.5px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 68, 145, 0.16);
}

.lx-pill-glow {
  position: absolute;
  inset: -120%;
  background: conic-gradient(from 0deg, transparent 0%, #38bdf8 22%, #2563eb 45%, transparent 55%, #38bdf8 78%, #1d4ed8 95%, transparent 100%);
  animation: lx-spin 4s linear infinite;
}

.lx-pill-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lx-pill-icon {
  color: #0284c7;
  font-size: 13px;
}

.lx-pill-title {
  font-size: 14px;
  font-weight: 800;
  color: #1e4276;
}

.lx-pill-sub {
  font-size: 13px;
  white-space: nowrap;
  font-weight: 600;
  color: #0284c7;
  padding-left: 5px;
  border-left: 1px solid rgba(14, 165, 233, 0.28);
}

/* ── 中央舞台：两侧展示卡 + 中间玻璃登录卡 ── */
.lx-center-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 36px);
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  transform: translate3d(var(--lx-card-tx), var(--lx-card-ty), 0);
  will-change: transform;
}

/* ── 两侧功能卡（≥1180px 显示） ── */
.lx-side {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 248px;
  flex-shrink: 0;
}

.lx-side--left {
  align-items: flex-end;
}

.lx-side--right {
  align-items: flex-start;
}

/* 两列功能卡顶部标题（2026-10-26：替代原两块信息面板，只留标题） */
.lx-side-head {
  width: 210px;
  box-sizing: border-box;
  padding: 7px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(224, 242, 254, 0.72) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 15px;
  font-weight: 800;
  color: #0b3a7a;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-align: center;
}

.lx-side-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 210px;
  padding: 10px 15px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(236, 248, 255, 0.72) 100%);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 10px 24px rgba(29, 78, 216, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  animation:
    lx-side-enter 0.75s cubic-bezier(0.22, 1, 0.36, 1) calc(1.22s + var(--si, 0) * 80ms) forwards,
    lx-side-float 5.2s ease-in-out calc(2s + var(--float-d, 0s)) infinite alternate;
}

.lx-side--left .lx-side-card {
  --enter-x: -28px;
}

.lx-side--right .lx-side-card {
  --enter-x: 28px;
}

@keyframes lx-side-enter {
  0% {
    opacity: 0;
    transform: translate3d(var(--enter-x, -24px), 10px, 0) scale(0.95);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes lx-side-float {
  0% {
    transform: translate3d(0, -4px, 0);
  }
  100% {
    transform: translate3d(0, 4px, 0);
  }
}

.lx-side-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  color: #0284c7;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  flex-shrink: 0;
}

.lx-side-text {
  font-size: 15px;
  font-weight: 700;
  color: #1e3f6e;
  letter-spacing: 0.02em;
}

/* 重点卡（引流神器 / 直播获客） */
.lx-side-card--featured {
  width: 246px;
  padding: 2px;
  border: none;
  border-radius: 16px;
  background: transparent;
  overflow: hidden;
  box-shadow:
    0 12px 28px rgba(14, 165, 233, 0.20),
    0 0 20px rgba(56, 189, 248, 0.32);
}

.lx-conic-border {
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.3) 0%,
    #38bdf8 20%,
    #1668dc 40%,
    #818cf8 50%,
    rgba(255, 255, 255, 0.3) 65%,
    #38bdf8 85%,
    #1668dc 100%
  );
  animation: lx-spin 4s linear infinite;
}

@keyframes lx-spin {
  to {
    transform: rotate(360deg);
  }
}

.lx-side-card-body {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(235, 248, 255, 0.92) 100%);
  box-sizing: border-box;
}

.lx-side-icon--featured {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0 6px 14px rgba(14, 165, 233, 0.32);
}

.lx-side-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lx-side-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lx-side-text--featured {
  font-size: 15px;
  font-weight: 800;
  color: #1a3c6e;
}

.lx-side-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0284c7, #2563eb);
  color: #ffffff;
  letter-spacing: 0.04em;
}

.lx-side-sub {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 中央玻璃外框与内层白卡 ── */
.lx-glass-shell {
  position: relative;
  width: min(432px, calc(100vw - 32px));
  padding: 13px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72) 0%, rgba(226, 244, 255, 0.48) 55%, rgba(206, 236, 255, 0.58) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 22px 54px rgba(29, 78, 216, 0.14),
    0 4px 20px rgba(56, 189, 248, 0.22),
    inset 0 1px 2px rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  animation: lx-shell-rise 1.05s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}

@keyframes lx-shell-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.96);
    filter: blur(12px) brightness(1.5);
  }
  65% {
    opacity: 1;
    filter: blur(1px) brightness(1.06);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

/* 玻璃框顶部高光条 */
.lx-glass-top-beam {
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 2.5px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, #ffffff 30%, #38bdf8 50%, #ffffff 70%, transparent);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.85);
  pointer-events: none;
  z-index: 3;
}

/* 每 7s 一道斜向扫光 */
.lx-glass-sweep {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -120%;
  width: 65%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    transparent 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 2;
  animation: lx-glass-sweep-anim 7s ease-in-out 2.6s infinite;
}

@keyframes lx-glass-sweep-anim {
  0%, 24% {
    left: -120%;
  }
  42%, 100% {
    left: 165%;
  }
}

.lx-glass-pedestal-glow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14px;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.65) 0%, rgba(37, 99, 235, 0.25) 55%, transparent 78%);
  filter: blur(8px);
  pointer-events: none;
}

/* 内层白卡 */
.lx-card {
  position: relative;
  z-index: 3;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  padding: 22px 24px 18px;
  border: 1px solid rgba(226, 238, 255, 0.95);
  box-shadow: 0 8px 26px rgba(15, 42, 88, 0.07);
  box-sizing: border-box;
}

/* 卡片头部 */
.lx-head {
  text-align: center;
  margin-bottom: 16px;
}

.lx-cap {
  width: 50px;
  height: 50px;
  margin: 0 auto 8px;
  padding: 7px;
  border-radius: 15px;
  background: linear-gradient(145deg, #f0f7ff 0%, #e0effe 100%);
  border: 1px solid rgba(186, 220, 255, 0.75);
  box-shadow: 0 6px 16px rgba(22, 104, 220, 0.12);
  box-sizing: border-box;
}

.lx-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: #163a66;
  letter-spacing: 0.02em;
}

.lx-subtitle {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #4b6b94;
}

/* 表单与输入框 */
.lx-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lx-form--register {
  gap: 10px;
}

.lx-reg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lx-label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #1e3a5f;
}

.lx-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.lx-field-icon {
  position: absolute;
  left: 14px;
  color: #64748b;
  font-size: 15px;
  pointer-events: none;
  transition: color 0.2s ease;
}

.lx-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px 10px 40px;
  border-radius: 12px;
  border: 1.5px solid #d5e2f2;
  background: #f8fbff;
  font-size: 16px;
  color: #0f2544;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.lx-input::placeholder {
  color: #94a3b8;
}

.lx-input--pwd {
  padding-right: 44px;
}

.lx-input:hover {
  border-color: #93c5fd;
  background: #ffffff;
}

.lx-input:focus {
  border-color: #1668dc;
  background: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(22, 104, 220, 0.16), 0 4px 14px rgba(22, 104, 220, 0.12);
}

.lx-field:focus-within .lx-field-icon {
  color: #1668dc;
}

.lx-eye {
  position: absolute;
  right: 4px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.lx-eye:hover {
  color: #1668dc;
  background: rgba(22, 104, 220, 0.06);
}

/* 隐私政策复选行 */
.lx-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: #475569;
  cursor: pointer;
  user-select: none;
}

.lx-checkbox {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #1668dc;
  flex-shrink: 0;
}

.lx-privacy-link {
  font-weight: 700;
  color: #1668dc;
  text-decoration: none;
  margin: 0 2px;
}

.lx-privacy-link:hover {
  text-decoration: underline;
  color: #0c4da8;
}

/* 错误提示 */
.lx-error {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

/* 登录 / 提交按钮 */
.lx-btn {
  position: relative;
  width: 100%;
  min-height: 46px;
  margin-top: 2px;
  padding: 11px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(92deg, #2563eb 0%, #0284c7 52%, #0ea5e9 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.lx-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-22deg);
  transition: left 0.55s ease;
}

.lx-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(22, 104, 220, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  filter: brightness(1.04);
}

.lx-btn:hover::after {
  left: 140%;
}

.lx-btn:active {
  transform: translateY(0);
}

.lx-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.lx-btn-icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.lx-btn:hover .lx-btn-icon {
  transform: translateX(4px);
}

/* 卡片底部（切换注册、版权、合作支持） */
.lx-alt {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #edf2f9;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.lx-alt-link {
  min-height: 36px;
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: #1668dc;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lx-alt-link:hover {
  background: rgba(22, 104, 220, 0.08);
  color: #0b48a3;
}

.lx-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: #7b8ea8;
}

.lx-footer-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b6c5d9;
}

.lx-support {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  opacity: 0.85;
}

.lx-support-text {
  font-size: 12px;
  color: #6c809a;
}

.lx-support-logo {
  height: 16px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ── 流星与撞击 DOM 动效（借用参考页节奏，适配浅色晴空高光） ── */
.lx-meteor-instance {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 30;
}

.lx-meteor-mover {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-32deg);
}

.lx-meteor-carrier {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: lx-meteor-fly 5s linear forwards;
}

.lx-meteor-instance--mini .lx-meteor-carrier {
  animation-duration: 4.2s;
}

@keyframes lx-meteor-fly {
  0% {
    opacity: 0;
    transform: translate3d(26rem, 0, 0);
  }
  3% {
    opacity: 1;
  }
  22% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.5, 0.05, 0.8, 0.7);
  }
  22.5%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

.lx-meteor-tail {
  position: absolute;
  top: -2px;
  left: 0;
  width: 170px;
  height: 4px;
  border-radius: 999px;
  transform-origin: 0% 50%;
  background: linear-gradient(90deg, #ffffff 0%, #38bdf8 26%, rgba(37, 99, 235, 0.75) 62%, transparent 100%);
  filter: drop-shadow(0 0 8px #38bdf8) drop-shadow(0 0 16px rgba(37, 99, 235, 0.8));
  animation: lx-meteor-tail-scale 5s linear forwards;
}

.lx-meteor-instance--mini .lx-meteor-tail {
  width: 120px;
  height: 3px;
  animation-duration: 4.2s;
}

@keyframes lx-meteor-tail-scale {
  0% {
    transform: scaleX(0.4);
  }
  18%, 22% {
    transform: scaleX(1);
  }
  23%, 100% {
    transform: scaleX(0.2);
  }
}

.lx-meteor-head {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 14px 4px #ffffff, 0 0 24px 8px #38bdf8, 0 0 36px 12px #1d4ed8;
  animation: lx-meteor-head-scale 5s linear forwards;
}

.lx-meteor-instance--mini .lx-meteor-head {
  animation-duration: 4.2s;
}

@keyframes lx-meteor-head-scale {
  0%, 19% {
    transform: scale(1);
  }
  22% {
    transform: scale(2.4);
  }
  23%, 100% {
    transform: scale(0);
  }
}

/* 撞击闪光 */
.lx-impact-flash {
  position: absolute;
  top: -32px;
  left: -32px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #7dd3fc 38%, rgba(37, 99, 235, 0.6) 65%, transparent 76%);
  opacity: 0;
  animation: lx-impact-flash-anim 5s linear forwards;
}

.lx-meteor-instance--mini .lx-impact-flash {
  animation-duration: 4.2s;
}

@keyframes lx-impact-flash-anim {
  0%, 21.4% {
    opacity: 0;
    transform: scale(0.2);
  }
  22.5% {
    opacity: 1;
    transform: scale(1.1);
  }
  31%, 100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

/* 十字耀斑 */
.lx-impact-flare {
  position: absolute;
  top: -1.5px;
  left: -56px;
  width: 112px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #38bdf8 22%, #ffffff 50%, #38bdf8 78%, transparent);
  box-shadow: 0 0 12px #0284c7;
  opacity: 0;
  animation: lx-impact-flare-anim 5s linear forwards;
}

.lx-impact-flare--b {
   --flare-rot: 78deg;
}

.lx-meteor-instance--mini .lx-impact-flare {
  animation-duration: 4.2s;
}

@keyframes lx-impact-flare-anim {
  0%, 21.4% {
    opacity: 0;
    transform: rotate(var(--flare-rot, -12deg)) scaleX(0);
  }
  23% {
    opacity: 1;
    transform: rotate(var(--flare-rot, -12deg)) scaleX(1);
  }
  34%, 100% {
    opacity: 0;
    transform: rotate(var(--flare-rot, -12deg)) scaleX(0.2);
  }
}

/* 双扩散环 */
.lx-impact-ring {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.9);
  opacity: 0;
}

.lx-impact-ring--a {
  animation: lx-impact-ring-a 5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lx-impact-ring--b {
  border-color: #60a5fa;
  animation: lx-impact-ring-b 5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lx-meteor-instance--mini .lx-impact-ring {
  animation-duration: 4.2s;
}

@keyframes lx-impact-ring-a {
  0%, 21.9% {
    opacity: 0;
    transform: scale(0.3);
  }
  23.5% {
    opacity: 0.95;
    transform: scale(0.6);
  }
  42%, 100% {
    opacity: 0;
    transform: scale(3.6);
  }
}

@keyframes lx-impact-ring-b {
  0%, 23.4% {
    opacity: 0;
    transform: scale(0.3);
  }
  25% {
    opacity: 0.85;
    transform: scale(0.5);
  }
  48%, 100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

/* 放射火花 */
.lx-impact-spark {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px 2px #0284c7, 0 0 12px 3px #38bdf8;
  opacity: 0;
  animation: lx-impact-spark-anim 5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lx-meteor-instance--mini .lx-impact-spark {
  animation-duration: 4.2s;
}

@keyframes lx-impact-spark-anim {
  0%, 21.9% {
    opacity: 0;
    transform: rotate(calc(var(--i, 0) * 25.7deg)) translate3d(4px, 0, 0) scale(0.6);
  }
  24% {
    opacity: 1;
    transform: rotate(calc(var(--i, 0) * 25.7deg)) translate3d(16px, 0, 0) scale(1.2);
  }
  44%, 100% {
    opacity: 0;
    transform: rotate(calc(var(--i, 0) * 25.7deg)) translate3d(var(--dist, 56px), 0, 0) scale(0.1);
  }
}

/* ── 响应式适配 ── */

/* <1180px 隐藏左右两侧展示列，启用顶部双胶囊 */
@media (max-width: 1179px) {
  .lx-side {
    display: none !important;
  }
  .lx-mobile-pills {
    display: flex;
  }
}

/* 1366×768 等较矮桌面视口紧凑优化，确保一屏无滚动条且底部落在底座上 */
@media (min-width: 1180px) and (max-height: 820px) {
  .lx-main {
    padding-top: 8px;
    padding-bottom: 12px;
  }
  .lx-hero {
    margin-top: 0;
    margin-bottom: 8px;
  }
  .lx-hero-line1 {
    font-size: 32px;
  }
  .lx-hero-line2 {
    font-size: 29px;
  }
  .lx-hero-tags {
    margin-top: 6px;
    padding: 4px 14px;
  }
  .lx-glass-shell {
    padding: 10px;
  }
  .lx-card {
    padding: 16px 20px 14px;
  }
  .lx-head {
    margin-bottom: 10px;
  }
  .lx-cap {
    width: 42px;
    height: 42px;
    margin-bottom: 5px;
  }
  .lx-title {
    font-size: 19px;
  }
  .lx-form {
    gap: 10px;
  }
  .lx-side {
    gap: 8px;
  }
  .lx-side-card {
    padding: 8px 13px;
  }
  .lx-side-card--featured {
    padding: 2px;
  }
  .lx-side-head {
    padding: 5px 12px;
    font-size: 14px;
  }
}

/* 手机端首屏紧凑优化（390×844 及 360×740 首屏直接看到标题+账号+密码+登录按钮） */
@media (max-width: 639px) {
  .lx-main {
    padding: 10px 14px 16px;
    justify-content: flex-start;
  }
  .lx-hero {
    margin-top: 2px;
    margin-bottom: 10px;
    padding: 2px 4px;
  }
  .lx-hero-line1 {
    font-size: clamp(23px, 6.4vw, 28px);
  }
  .lx-hero-line2 {
    font-size: clamp(21px, 5.8vw, 26px);
  }
  .lx-hero-rule {
    display: none;
  }
  .lx-hero-tags {
    margin-top: 6px;
    padding: 5px 12px;
    gap: 5px 7px;
  }
  .lx-tag {
    font-size: 14px;
  }
  .lx-mobile-pills {
    margin-top: 8px;
    gap: 8px;
  }
  .lx-pill-inner {
    padding: 4px 10px;
  }
  .lx-hero-backdrop {
    inset: -10px -6px;
  }
  .lx-center-stage {
    margin-top: 2px;
    margin-bottom: auto;
  }
  .lx-glass-shell {
    width: 100%;
    max-width: 400px;
    padding: 9px;
    border-radius: 22px;
  }
  .lx-card {
    padding: 16px 16px 14px;
    border-radius: 16px;
  }
  .lx-head {
    margin-bottom: 12px;
  }
  .lx-cap {
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
  }
  .lx-title {
    font-size: 19px;
  }
  .lx-reg-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* 超短手机屏（如 360×740）进一步压缩垂直间距 */
@media (max-width: 639px) and (max-height: 760px) {
  .lx-main {
    padding-top: 6px;
  }
  .lx-hero {
    margin-bottom: 6px;
  }
  .lx-mobile-pills {
    margin-top: 5px;
  }
  .lx-cap {
    width: 38px;
    height: 38px;
    padding: 5px;
    margin-bottom: 4px;
  }
  .lx-head {
    margin-bottom: 10px;
  }
  .lx-form {
    gap: 9px;
  }
  .lx-alt {
    margin-top: 9px;
    padding-top: 8px;
    gap: 4px;
  }
}

/* 手机：胶囊只留标题，避免挤成两行 */
@media (max-width: 639px) {
  .lx-pill-sub {
    display: none;
  }
  .lx-pill-title,
  .lx-pill-sub {
    white-space: nowrap;
  }
}

/* 窄手机（≤379px，如 360 宽）：副标题四词保持一行 */
@media (max-width: 379px) {
  .lx-hero-tags {
    padding: 4px 8px;
    gap: 4px 5px;
  }
  .lx-tag {
    letter-spacing: 0;
  }
  .lx-tag--featured {
    padding: 1px 4px;
  }
  .lx-pill-sub {
    display: none;
  }
}

/* ── Reduced Motion 无障碍静态降级 ── */
@media (prefers-reduced-motion: reduce) {
  .lx-stage,
  .lx-hero,
  .lx-hero-line1,
  .lx-hero-line2,
  .lx-side-card,
  .lx-conic-border,
  .lx-pill-glow,
  .lx-glass-shell,
  .lx-glass-sweep,
  .lx-tag--featured .lx-char {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .lx-tag--featured {
    opacity: 1 !important;
    background: linear-gradient(135deg, rgba(224, 242, 254, 0.95) 0%, rgba(186, 230, 253, 0.85) 100%);
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.3), inset 0 0 0 1px rgba(56, 189, 248, 0.5);
  }
  .lx-meteor-layer {
    display: none !important;
  }
}

/* 2026-10-26：引流神器副标题完整显示；WebGL 没开时（低端机 / 减少动态）用 CSS 补一层浅天蓝提亮，和 GL 开启时亮度接近 */
.lx-side-card--featured .lx-side-sub {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-wrap: balance;
}
/* 2026-10-26：卡片定宽一行放不下，固定按词组分两行，避免「考生」被拆开；分隔符只留给读屏 */
.lx-side-sub--2l .lx-side-sub-seg {
  display: block;
  white-space: nowrap;
}
.lx-side-sub--2l .lx-side-sub-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.lx-root:not(.lx-gl-on) .lx-bg-vignette::after {
  background:
    radial-gradient(ellipse 68% 36% at 50% 80%, rgba(186, 230, 253, 0.16) 0%, transparent 72%),
    linear-gradient(180deg, rgba(232, 245, 255, 0.24) 0%, rgba(220, 240, 255, 0.20) 100%);
}