/* ============================================================
    Login & Register Page Styles
    - 固定位置的登录集群（图标/名称/输入框位置在所有步骤一致）
    - 全屏海浪扫过动画（3层海浪从左往右覆盖整个页面）
    - 算术验证码 / 滑块验证码（随机）
    - 用户协议 + 隐私政策勾选（含儿童条款）
    - 登录方式整页切换（非弹窗）
    ============================================================ */

 .login-cluster {
   position: fixed;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 22px;
   pointer-events: none;
   width: min(480px, 85vw);
 }

 .login-logo {
   width: 72px;
   height: 72px;
   object-fit: contain;
   filter: drop-shadow(0 4px 12px rgba(30, 58, 138, 0.15));
   pointer-events: none;
   flex-shrink: 0;
 }

 .login-title {
   font-size: 26px;
   font-weight: 600;
   color: #1e3a8a;
   letter-spacing: 4px;
   margin: 0;
   text-shadow: 0 2px 8px rgba(255, 255, 255, 0.6);
   pointer-events: none;
 }

 .login-input-wrap {  position: relative;

   width: 100%;
   pointer-events: auto;
   /* 固定高度：包含输入框+hint+验证码槽+协议勾选，避免步骤间跳动 */
   min-height: 220px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }

 /* 输入框容器 */
 .login-input-container {
   position: relative;
   width: 100%;
   height: 56px;
   display: flex;
   align-items: flex-end;
   flex-shrink: 0;
 }

.input-field {
  flex: 1;
  height: 56px;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid rgba(14, 116, 144, 0.25);
  color: #0c4a6e;
  font-size: 18px;
  letter-spacing: 2px;
  text-align: center;
  caret-color: #0ea5e9;
  font-family: inherit;
  padding: 0 44px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.input-field::placeholder {
  color: rgba(56, 139, 253, 0.4);
  letter-spacing: 4px;
  font-size: 14px;
}

.input-field:focus {
  border-bottom-color: #0ea5e9;
  box-shadow: 0 1px 0 0 #0ea5e9,
              0 8px 32px -8px rgba(14, 165, 233, 0.35);
}

.input-field:focus ~ .glow-line {
  transform: scaleX(1);
  opacity: 1;
}

/* 右侧动作按钮（白色，无圈/无边框） */
.input-action-btn {
  position: absolute;
  right: 4px;
  bottom: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, color 0.25s ease;
  padding: 0;
}

.input-action-btn:hover {
  transform: translateX(3px) scale(1.08);
  color: #000000;
}

.input-action-btn:active {
  transform: translateX(1px) scale(0.95);
}

/* 登录中加载动画 */
.input-action-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}
.input-action-btn.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 短信验证码按钮 */
.sms-code-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -170px;
  margin-bottom: 0;
  position: relative;
  z-index: 10;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 8px;
  box-sizing: border-box;
}
.sms-send-btn {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.sms-send-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.3);
}
.sms-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* 隐藏输入框下面的提示小字 */
.sms-hint {
  display: none !important;
}

/* 左侧返回按钮（白色，无圈/无边框） */
.back-btn {
  position: absolute;
  left: 4px;
  bottom: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, color 0.25s ease;
  padding: 0;
  z-index: 2;
}

.back-btn:hover {
  transform: translateX(-3px) scale(1.08);
  color: #000000;
}

.back-btn:active {
  transform: translateX(-1px) scale(0.95);
}

/* 占位：保证第一步也有相同空间 */
.back-btn-placeholder {
  position: absolute;
  left: 4px;
  bottom: 14px;
  width: 32px;
  height: 32px;
  visibility: hidden;
}

/* 发光线 */
.glow-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    #0ea5e9 20%,
    #06b6d4 50%,
    #0ea5e9 80%,
    transparent 100%);
  transform: scaleX(0);
  opacity: 0;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease;
  box-shadow: 0 0 12px 1px rgba(14, 165, 233, 0.5),
              0 0 24px 2px rgba(6, 182, 212, 0.3);
}

 .login-hint {
   text-align: center;
   font-size: 13px;
   color: rgba(71, 85, 105, 0.6);
   margin-top: 14px;
   letter-spacing: 0.5px;
   min-height: 18px;
   flex-shrink: 0;
 }

/* 用户协议行 */
.login-terms-row {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 20px;
}

.terms-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(30, 58, 138, 0.7);
}

.terms-checkbox input {
  cursor: pointer;
  accent-color: #0ea5e9;
}

.terms-text a {
  color: #0ea5e9;
  text-decoration: none;
}

.terms-text a:hover {
  text-decoration: underline;
}

/* 登录方式切换 + 注册入口 */
.login-footer-links {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 20px;
  pointer-events: auto;
}

.link-btn {
  background: none;
  border: none;
  color: rgba(30, 58, 138, 0.65);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 14px;
  transition: color 0.3s, background 0.3s;
  letter-spacing: 0.5px;
  border-radius: 16px;
  white-space: nowrap;
}

.link-btn:hover {
  color: #0ea5e9;
  background: rgba(14, 165, 233, 0.08);
}

.link-divider {
  color: rgba(30, 58, 138, 0.2);
  font-size: 12px;
  line-height: 1;
}

/* 滑块验证码 */
.captcha-container {
  margin-top: 18px;
  animation: fadeInUp 0.4s ease;
}

.captcha-slider-wrap {
  position: relative;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.captcha-slider-track {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: rgba(14, 165, 233, 0.15);
  transition: width 0s;
}

.captcha-slider-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: white;
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 8px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0ea5e9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.2s, color 0.2s;
  user-select: none;
}

.captcha-slider-handle:active {
  cursor: grabbing;
}

.captcha-slider-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(71, 85, 105, 0.6);
  pointer-events: none;
}

.captcha-success .captcha-slider-track {
  background: rgba(16, 185, 129, 0.25);
}

.captcha-success .captcha-slider-handle {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.captcha-success .captcha-slider-text {
  color: #059669;
}

 /* 验证码槽：固定高度，防止步骤切换时布局跳动 */
 .captcha-slot {
   height: 58px;
   margin-top: 14px;
   flex-shrink: 0;
 }

  /* ============================================================
     海浪过渡层（垂直波浪前沿从左往右完整席卷全屏）
     - SVG 宽度是视口的2.4倍，左边缘是波浪前沿，右半部分是纯色
     - 海浪从屏幕最左侧外进入 → 席卷覆盖全屏 → 切换内容 → 从右侧完全消失
     - 三层波浪，每层不同幅度和颜色，前后错位形成层次感
     ============================================================ */
   .wave-transition {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 200;
     overflow: hidden;
     opacity: 0;
     visibility: hidden;
   }

   /* 每一层的外层容器：负责水平席卷 */
   .wave-transition .wave-layer {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     will-change: transform;
   }

   /* SVG：宽度是视口的2.4倍，左边缘是波浪前沿，右侧纯色填充 */
   .wave-transition .wave-svg {
     position: absolute;
     top: 0;
     left: 0;
     width: 240%;
     height: 100%;
     will-change: transform;
   }

   .wave-transition .wave-back .wave-svg {
     fill: rgba(186, 230, 253, 0.7);
   }

   .wave-transition .wave-mid .wave-svg {
     fill: rgba(125, 211, 252, 0.85);
   }

   .wave-transition .wave-front .wave-svg {
     fill: rgba(56, 189, 248, 0.95);
   }

   /* ---- 前进：海浪从左往右席卷全屏 ---- */
   .wave-transition.play {
     opacity: 1;
     visibility: visible;
   }

   /* 三层波浪分别以不同速度席卷，形成前后层次感
      后层（最浅）最快，先进入；前层（最深）最慢，最后跟上
      整体从 -100%（左外）到 +42%（右外，SVG宽240%，需要右移42%使其完全离开） */
   .wave-transition.play .wave-layer.wave-back {
     animation: waveSweep 1.3s cubic-bezier(.35,0,.25,1) forwards;
   }

   .wave-transition.play .wave-layer.wave-mid {
     animation: waveSweep 1.4s cubic-bezier(.35,0,.25,1) forwards;
     animation-delay: 0.06s;
   }

   .wave-transition.play .wave-layer.wave-front {
     animation: waveSweep 1.5s cubic-bezier(.35,0,.25,1) forwards;
     animation-delay: 0.12s;
   }

   /* 内层波浪上下涌动：保持波浪形态有呼吸感 */
   .wave-transition.play .wave-back .wave-svg {
     animation: waveBreath1 2.4s ease-in-out infinite;
   }

   .wave-transition.play .wave-mid .wave-svg {
     animation: waveBreath2 2.8s ease-in-out infinite;
   }

   .wave-transition.play .wave-front .wave-svg {
     animation: waveBreath3 3.2s ease-in-out infinite;
   }

   /* 水平席卷：从屏幕最左侧外(-100%) → 覆盖全屏(0%) → 从右侧完全移出(+42%)
      由于SVG宽度是视口的2.4倍，translateX(42%) ≈ 100% of viewport，可让左波浪前沿完全离开右边界 */
   @keyframes waveSweep {
     0%   { transform: translateX(-100%); }
     48%  { transform: translateX(0%); }      /* 前浪刚好到达屏幕右边缘 */
     52%  { transform: translateX(0%); }      /* 短暂停留切换内容 */
     100% { transform: translateX(42%); }     /* 后浪完全离开屏幕右边缘 */
   }

   /* 波浪呼吸：垂直方向轻微起伏，模拟海浪涌动 */
   @keyframes waveBreath1 {
     0%, 100% { transform: translateY(0) scaleY(1); }
     25%      { transform: translateY(3%) scaleY(1.02); }
     50%      { transform: translateY(-2%) scaleY(0.98); }
     75%      { transform: translateY(4%) scaleY(1.03); }
   }

   @keyframes waveBreath2 {
     0%, 100% { transform: translateY(0) scaleY(1); }
     30%      { transform: translateY(-4%) scaleY(1.03); }
     60%      { transform: translateY(3%) scaleY(0.97); }
     85%      { transform: translateY(-2%) scaleY(1.01); }
   }

   @keyframes waveBreath3 {
     0%, 100% { transform: translateY(0) scaleY(1); }
     20%      { transform: translateY(5%) scaleY(1.04); }
     45%      { transform: translateY(-3%) scaleY(0.97); }
     70%      { transform: translateY(4%) scaleY(1.03); }
     90%      { transform: translateY(-2%) scaleY(1.01); }
   }

   /* ---- 后退：海浪从右往左席卷全屏（返回上一步） ---- */
   .wave-transition.play-back {
     opacity: 1;
     visibility: visible;
   }

   .wave-transition.play-back .wave-layer.wave-back {
     animation: waveSweepBack 1.3s cubic-bezier(.35,0,.25,1) forwards;
     animation-delay: 0.12s;
   }

   .wave-transition.play-back .wave-layer.wave-mid {
     animation: waveSweepBack 1.4s cubic-bezier(.35,0,.25,1) forwards;
     animation-delay: 0.06s;
   }

   .wave-transition.play-back .wave-layer.wave-front {
     animation: waveSweepBack 1.5s cubic-bezier(.35,0,.25,1) forwards;
   }

   .wave-transition.play-back .wave-back .wave-svg {
     animation: waveBreath1 2.4s ease-in-out infinite;
   }

   .wave-transition.play-back .wave-mid .wave-svg {
     animation: waveBreath2 2.8s ease-in-out infinite;
   }

   .wave-transition.play-back .wave-front .wave-svg {
     animation: waveBreath3 3.2s ease-in-out infinite;
   }

   /* 后退：从右往左席卷 — 后层（最浅）先退，前层最后退 */
   @keyframes waveSweepBack {
     0%   { transform: translateX(42%); }
     48%  { transform: translateX(0%); }
     52%  { transform: translateX(0%); }
     100% { transform: translateX(-100%); }
   }

 /* ---- 登录方式选择页（整页式切换） ---- */
 .type-select-page {
   position: fixed;
   inset: 0;
   z-index: 150;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 50%, #e0e7ff 100%);
 }

 .type-select-inner {
   width: min(420px, 85vw);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
 }

 .type-select-logo {
   width: 72px;
   height: 72px;
   object-fit: contain;
   margin-bottom: 8px;
   filter: drop-shadow(0 4px 12px rgba(30, 58, 138, 0.15));
 }

 .type-select-title {
   font-size: 24px;
   font-weight: 600;
   color: var(--deep-blue);
   letter-spacing: 3px;
 }

 .type-select-desc {
   font-size: 13px;
   color: var(--text-secondary);
   margin-bottom: 12px;
 }

 .type-big-btn {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 18px 20px;
   background: rgba(255, 255, 255, 0.7);
   border: 1px solid rgba(14, 165, 233, 0.2);
   border-radius: 12px;
   cursor: pointer;
   transition: all 0.25s ease;
   text-align: left;
 }

 .type-big-btn:hover {
   background: rgba(255, 255, 255, 0.9);
   border-color: var(--mid-blue);
   transform: translateY(-2px);
   box-shadow: 0 8px 24px -8px rgba(14, 165, 233, 0.3);
 }

 .type-big-icon {
   font-size: 28px;
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(14, 165, 233, 0.1);
   border-radius: 12px;
   flex-shrink: 0;
 }

 .type-big-text {
   flex: 1;
   font-size: 15px;
   font-weight: 600;
   color: var(--deep-blue);
 }

 .type-big-sub {
   font-size: 12px;
   color: var(--text-muted);
   margin-top: 4px;
   display: block;
 }

 /* ---- 算术验证码 ---- */
 .math-captcha {
   animation: fadeInUp 0.3s ease;
 }

 .math-captcha-box {
   display: flex;
   align-items: center;
   gap: 10px;
   height: 40px;
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(14, 165, 233, 0.2);
   border-radius: 8px;
   padding: 0 12px;
 }

 .math-expr {
   font-size: 15px;
   font-weight: 600;
   color: var(--deep-blue);
   letter-spacing: 1px;
   flex-shrink: 0;
 }

 .math-input {
   flex: 1;
   height: 28px;
   border: 1px solid rgba(14, 165, 233, 0.3);
   border-radius: 6px;
   padding: 0 8px;
   font-size: 13px;
   text-align: center;
   background: white;
   color: var(--deep-blue);
   outline: none;
 }

 .math-input:focus {
   border-color: #0ea5e9;
 }

/* 抖动动画 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 协议弹窗内容 */
.agreement-modal {
  width: min(600px, 90vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.agreement-content {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.agreement-content h4 {
  color: var(--deep-blue);
  margin: 12px 0 6px;
  font-size: 14px;
}

.agreement-content p {
  margin-bottom: 6px;
}

/* 底部协议勾选 */
.footer-terms {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: auto;
  max-width: 90%;
}

.footer-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: rgba(30, 58, 138, 0.65);
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
  justify-content: center;
  text-align: center;
}

.footer-terms-label input[type="checkbox"] {
  cursor: pointer;
  accent-color: #0ea5e9;
  margin: 0;
}

.footer-terms-link {
  color: rgba(14, 165, 233, 0.85);
  text-decoration: none;
  transition: color 0.2s;
  margin: 0 2px;
}

.footer-terms-link:hover {
  color: #0284c7;
}

/* 底部版权 */
.footer {
  position: fixed;
  bottom: 24px;
  left: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.footer-copyright {
  font-size: 11px;
  color: rgba(30, 58, 138, 0.55);
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-align: center;
}

.footer-beian {
  font-size: 11px;
  color: rgba(30, 58, 138, 0.45);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.footer-beian:hover {
  color: rgba(14, 165, 233, 0.9);
}

@media (max-width: 767px) {
  .login-wrap {
    padding: 20px 16px;
  }
  .login-card {
    padding: 28px 20px;
    border-radius: 16px;
  }
  .login-logo { width: 64px; height: 64px; }
  .login-title { font-size: 22px; letter-spacing: 3px; }
  .input-field { height: 48px; font-size: 15px; }
  .btn-primary-large {
    height: 48px;
    font-size: 15px;
  }
  .footer-copyright { 
    font-size: 9px; 
    line-height: 1.5; 
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    max-width: 90vw;
    margin: 0 auto;
  }
  .footer-beian { 
    font-size: 8px; 
    white-space: nowrap;
  }
  .login-footer-links {
    bottom: 100px;
    gap: 0 6px;
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap;
    max-width: 95vw;
  }
  .link-btn {
    font-size: 10px;
    padding: 3px 4px;
    white-space: nowrap;
  }
  .footer-terms {
    bottom: 62px;
    left: 0;
    right: 0;
    max-width: none;
    transform: none;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .footer-terms-label {
    font-size: 9px;
    line-height: 1.5;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    text-align: center;
    padding-left: 0;
    position: relative;
    color: rgba(30, 58, 138, 0.65);
    max-width: 100%;
  }
  .footer-terms-label input[type="checkbox"] {
    position: relative;
    margin-top: 2px;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1.5px solid rgba(30, 58, 138, 0.5);
    border-radius: 3px;
    cursor: pointer;
  }
  .footer-terms-label input[type="checkbox"]:checked {
    background: rgba(14, 165, 233, 0.8);
    border-color: #0ea5e9;
  }
  .footer-terms-label input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 1px;
    font-size: 10px;
    color: white;
    font-weight: bold;
  }
  .footer {
    bottom: 8px;
    gap: 3px;
    width: 100%;
    left: 0;
    transform: none;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .step-dots {
    gap: 8px;
    margin-bottom: 20px;
  }
  .step-dot {
    width: 24px;
    height: 3px;
  }
}

@media (max-width: 480px) {
  .login-logo { width: 56px; height: 56px; }
  .login-title { font-size: 20px; letter-spacing: 2px; }
  .input-field { height: 46px; font-size: 15px; }
  .login-card { padding: 24px 16px; }
  .btn-primary-large { height: 46px; }
}