/* =====================================================================
   登录 / 注册页 · 基因暗域专属视觉
   ===================================================================== */
.gx-auth-body {
  min-height: 100vh;
  background: radial-gradient(1100px 600px at 85% -10%, rgba(6, 182, 212, .16), transparent 55%),
              radial-gradient(900px 500px at -10% 90%, rgba(124, 92, 255, .14), transparent 55%),
              linear-gradient(160deg, #060f22 0%, #0a1b33 45%, #0c2443 100%);
  color: #e2e8f0;
  display: flex;
  overflow: hidden;
  position: relative;
}
/* 网格背景 */
.gx-auth-body::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(103, 232, 249, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 232, 249, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}
/* 漂浮光斑 */
.gx-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.gx-orb-1 { width: 380px; height: 380px; left: 8%; top: 12%; background: rgba(6, 182, 212, .28); animation: gxFloat 9s ease-in-out infinite; }
.gx-orb-2 { width: 300px; height: 300px; right: 6%; bottom: 8%; background: rgba(124, 92, 255, .26); animation: gxFloat 12s ease-in-out infinite reverse; }
@keyframes gxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-28px); } }

.gx-auth-wrap {
  position: relative; z-index: 2;
  display: flex; flex: 1;
  max-width: 1240px; margin: 0 auto;
  width: 100%;
  padding: 34px 40px;
  gap: 60px; align-items: center;
}

/* 左侧品牌叙事区 */
.gx-auth-story { flex: 1.25; min-width: 0; }
.gx-auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 54px; }
.gx-auth-logo .gx-logo-hex {
  width: 52px; height: 52px; position: relative;
  display: grid; place-items: center;
}
.gx-auth-logo .gx-logo-hex::before {
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 0deg, #22d3ee, #7c5cff, #22d3ee, #7c5cff, #22d3ee);
  border-radius: 16px;
  animation: gxSpin 8s linear infinite;
  filter: blur(6px); opacity: .8;
}
.gx-auth-logo .gx-logo-hex::after {
  content: ""; position: absolute; inset: 2px;
  background: linear-gradient(160deg, #0c2341, #103a63);
  border-radius: 14px;
}
.gx-auth-logo .gx-logo-hex i { position: relative; z-index: 2; font-size: 24px; color: #67e8f9; }
@keyframes gxSpin { to { transform: rotate(360deg); } }
.gx-auth-logo b {
  font-size: 20px; letter-spacing: 1px;
  background: linear-gradient(90deg, #e0f2fe, #67e8f9, #a5b4fc);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gx-auth-logo span { display: block; font-size: 11px; color: #5f7a9c; letter-spacing: 3.4px; margin-top: 3px; }

.gx-auth-story h1 {
  font-size: 42px; line-height: 1.25; font-weight: 800; letter-spacing: 1px;
  margin-bottom: 18px;
}
.gx-auth-story h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #22d3ee, #818cf8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gx-auth-story p.lead { font-size: 15px; color: #8fa7c4; line-height: 1.9; max-width: 480px; margin-bottom: 44px; }

/* 产品能力标签 */
.gx-auth-feats { display: flex; flex-direction: column; gap: 15px; max-width: 440px; }
.gx-auth-feat { display: flex; align-items: center; gap: 14px; }
.gx-auth-feat .gx-feat-icon {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px; display: grid; place-items: center; font-size: 16px;
  background: rgba(6, 182, 212, .12); color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, .25);
}
.gx-auth-feat b { display: block; font-size: 14px; color: #dbe9fb; }
.gx-auth-feat span { font-size: 12px; color: #6f8bab; }

/* DNA 动画螺旋 */
.gx-dna { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); opacity: .5; pointer-events: none; }

/* 右侧玻璃表单 */
.gx-auth-card {
  flex: 1; max-width: 420px;
  background: rgba(13, 33, 60, .55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(148, 197, 255, .16);
  border-radius: 22px;
  padding: 38px 36px 30px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  position: relative;
  overflow: hidden;
}
.gx-auth-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #22d3ee, #7c5cff, transparent);
}
.gx-auth-card h3 { font-size: 21px; color: #fff; letter-spacing: .5px; }
.gx-auth-card .gx-auth-sub { font-size: 12.5px; color: #7e98b8; margin: 8px 0 26px; }

.gx-auth-field { margin-bottom: 18px; }
.gx-auth-field label { display: block; font-size: 12.5px; color: #9fb5d0; margin-bottom: 8px; }
.gx-auth-input {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(148, 197, 255, .16);
  border-radius: 12px;
  padding: 13px 16px;
  transition: all .2s;
}
.gx-auth-input i { color: #5f7a9c; font-size: 14.5px; }
.gx-auth-input input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #e2e8f0; font-size: 14px;
}
.gx-auth-input input::placeholder { color: #4f6a8a; }
.gx-auth-input:focus-within {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .14), inset 0 0 20px rgba(34, 211, 238, .04);
  background: rgba(255, 255, 255, .08);
}
.gx-auth-row { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 22px; font-size: 12.5px; }
.gx-auth-row label { display: flex; align-items: center; gap: 7px; color: #9fb5d0; cursor: pointer; }
.gx-auth-row label input { accent-color: #22d3ee; width: 14px; height: 14px; }
.gx-auth-link { color: #67e8f9; cursor: pointer; }
.gx-auth-link:hover { text-decoration: underline; }

.gx-auth-btn {
  width: 100%; padding: 14px; border-radius: 12px;
  border: none; font-size: 15px; font-weight: 600; color: #052033;
  background: linear-gradient(135deg, #67e8f9, #22d3ee 45%, #0ea5e9);
  cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 12px 30px rgba(34, 211, 238, .35);
  transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.gx-auth-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 16px 36px rgba(34, 211, 238, .45); }
.gx-auth-btn:active { transform: scale(.98); }
.gx-auth-btn::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: gxBtnShine 3.4s ease-in-out infinite;
}
@keyframes gxBtnShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

.gx-auth-foot { text-align: center; margin-top: 22px; font-size: 12.5px; color: #6f8bab; }
.gx-auth-foot a { color: #67e8f9; }
.gx-auth-copy { text-align: center; margin-top: 26px; font-size: 11px; color: #465e7d; letter-spacing: .4px; }

/* 密码可见性 */
.gx-eye { cursor: pointer; color: #5f7a9c !important; }

/* 验证提示 */
.gx-auth-alert {
  background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .35);
  color: #fca5a5; border-radius: 10px; padding: 10px 14px;
  font-size: 12.5px; margin-bottom: 16px; display: flex; gap: 8px; align-items: center;
  animation: gxFadeIn .25s ease;
}

@media (max-width: 960px) {
  .gx-auth-story { display: none; }
  .gx-auth-wrap { justify-content: center; padding: 24px; }
  .gx-auth-card { max-width: 400px; width: 100%; }
}