@use '../variables' as *;
/* 登录页面 — 左右分栏全屏布局 */
.login-view {
  font-size: 0.14rem;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: var(--app-height, 100vh);
  background: #F7FEFC;
}

/* ==================== 左侧视觉动画面板 ==================== */
.login-visual {
  position: relative;
  width: 57%;
  height: 100%;
  overflow: hidden;
  background: #ddf4f2;
  border-right: 0.08rem solid #4FC2C9;
}

.login-jianshi-logo {
  position: absolute;
  right: 0.22rem;
  bottom: 0.1rem;
  width: 0.82rem;
  height: 0.21rem;
  object-fit: contain;
  pointer-events: auto;
  user-select: none;
  z-index: 12;
}

.ai-hub-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 11rem;
  height: 9rem;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 14.05rem 12.69rem;
  background-position: -2.1rem -1.17rem;
  z-index: 1;
  transform-origin: top left;
  transform: translate3d(var(--stage-x, 0rem), var(--stage-y, 0rem), 0) scale(var(--stage-scale, 1));
}

/* 标题 */
.hero-title {
  position: absolute;
  left: 0.35rem;
  top: 0.64rem;
  width: 3.74rem;
  height: 0.88rem;
  color: #2a8186;
  font-size: 0.36rem;
  font-weight: 700;
  line-height: 0.44rem;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}

.hero-title__second-line {
  display: block;
  padding-left: 0.72rem;
}

/* Nova 核心机器人 */
.nova-core {
  position: absolute;
  left: 1.83rem;
  top: 2.59rem;
  width: 5.92rem;
  height: 4.43rem;
  pointer-events: auto;
  z-index: 2;
  user-select: none;
}

.nova-core-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.nova-eye {
  position: absolute;
  width: 0.2rem;
  height: 0.44rem;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  transition: transform .05s linear;
  z-index: 2;
}

.nova-eye-left {
  left: 2.5377rem;
  top: 1.77rem;
}

.nova-eye-right {
  left: 3.1077rem;
  top: 1.77rem;
}

.nova-eye.is-blinking {
  animation: nova-eye-blink .2s ease-in-out;
  transform-origin: center center;
}

@keyframes nova-eye-blink {
  0%, 100% { scale: 1 1; }
  40%, 60% { scale: 1 .06; }
}

/* 浮动节点 */
.node {
  position: absolute;
  z-index: 4;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  object-fit: contain;
  will-change: opacity, transform, filter;
  transform: translate3d(0, 0.04rem, 0) scale(.996);
  filter: drop-shadow(0 0.16rem 0.28rem rgba(56, 255, 202, .10)) brightness(1);
}

.node.is-running {
  visibility: visible;
  animation: node-life var(--life-ms, 6700ms) linear forwards;
}

@keyframes node-life {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.04rem, 0) scale(.996);
    filter: drop-shadow(0 0.16rem 0.28rem rgba(56, 255, 202, .10)) brightness(1);
  }
  20.896%, 79.104% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 0.16rem 0.28rem rgba(56, 255, 202, .20)) brightness(1.045);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -0.04rem, 0) scale(.996);
    filter: drop-shadow(0 0.16rem 0.28rem rgba(56, 255, 202, .10)) brightness(1);
  }
}

/* ==================== 右侧表单面板 ==================== */
.login-view__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 43%;
  height: 100%;
  background: #fff;
}

/* Logo 行（右侧及简历阶段通用） */
.login-view__logo-row {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  width: 3.41rem;

  img{
    width: 1.6rem;
    height: 0.4rem;
  }
}

.login-view__logo-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 0.16rem;
  font-weight: 700;
  font-size: 0.22rem;
  line-height: 1;
}

.login-view__logo-box--light {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.login-view__logo-box--green {
  background: rgba(9, 170, 119, 0.2);
  color: #351616;
}

.login-view__logo-text {
  font-weight: 700;
  font-size: 0.28rem;
  line-height: 0.34rem;
}

.login-view__logo-text--white {
  color: #FFFFFF;
}

.login-view__logo-text--dark {
  color: #351616;
}

.login-view__logo-row--right {
  margin-bottom: 0.6rem;
}

/* 表单包裹 */
.login-view__form-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  width: 3.41rem;
}

/* 标题 */
.login-view__heading {
  width: 3.41rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.login-view__title {
  font-weight: 700;
  font-size: 0.18rem;
  line-height: 0.22rem;
  color: #18181A;
}

.login-view__subtitle {
  font-weight: 400;
  font-size: 0.10rem;
  line-height: 0.12rem;
  color: #616367;

  >span:nth-child(2){
    color: $accent;
  }
}

/* ==================== 手机号输入行 ==================== */
.login-view__phone-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 3.41rem;
  height: 0.40rem;
  background: #FFFFFF;
  border: 1px solid #C8C9CD;
  box-shadow: 0 0.08rem 0.20rem rgba(15, 83, 87, 0.05);
  border-radius: 0.08rem;
}

/* 手机图标 */
.login-view__phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.18rem;
  height: 0.18rem;
  margin-left: 0.16rem;
  flex-shrink: 0;

  svg {
    width: 0.18rem;
    height: 0.18rem;
  }
}

/* 国家码标签 */
.login-view__country-label {
  margin-left: 0.06rem;
  font-weight: 500;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #202124;
  white-space: nowrap;
}

/* 下拉箭头 */
.login-view__country-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.20rem;
  height: 0.20rem;
  flex-shrink: 0;
  cursor: pointer;

  svg {
    width: 0.20rem;
    height: 0.20rem;
  }
}

/* 分隔线 */
.login-view__input-divider {
  width: 1px;
  height: 0.30rem;
  background: #E7F2F3;
  margin: 0 0.16rem;
  flex-shrink: 0;
}

/* 手机号输入框 */
.login-view__phone-input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-weight: 400;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #202124;
  outline: none;

  &::placeholder {
    color: #939599;
  }
}

/* ==================== 发送验证码按钮（步骤一） ==================== */
.login-view__send-btn {
  width: 3.41rem;
  height: 0.40rem;
  background: linear-gradient(90deg, #4FC2C9 0%, #42A8B3 100%);
  box-shadow: 0 0.16rem 0.30rem rgba(15, 83, 87, 0.15);
  border-radius: 0.08rem;
  border: none;
  font-weight: 600;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &:not(:disabled):hover {
    opacity: 0.9;
  }
}

/* ==================== OTP 验证码输入（步骤二） ==================== */
.login-view__otp-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  cursor: text;
}

.login-view__otp-hidden-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  font-size: 0.16rem;
  caret-color: transparent;
}

.login-view__otp-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.42rem;
  height: 0.46rem;
  background: #FAFBFC;
  border: 1px solid #E2E8F0;
  border-radius: 0.12rem;
  transition: border-color 0.2s, background 0.2s;
}

.login-view__otp-box--active {
  background: #F3FFFD;
  border: 2px solid $accent;
}

.login-view__otp-box--filled {
  background: #F3FFFD;
  border: 2px solid $accent;
}

.login-view__otp-digit {
  font-weight: 700;
  font-size: 0.24rem;
  line-height: 0.29rem;
  color: #132034;
}

/* 闪烁光标 */
.login-view__otp-cursor {
  display: inline-block;
  width: 2px;
  height: 0.28rem;
  background: $accent;
  border-radius: 1px;
  animation: login-otp-blink 1s ease-in-out infinite;
}

@keyframes login-otp-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ==================== 验证码发送状态提示 ==================== */
.login-view__sms-status {
  width: 100%;
  font-size: 0.13rem;
  line-height: 0.16rem;
  color: #64748B;
  text-align: center;
  padding-right: 0.1rem;
  margin-top: -0.14rem;
  margin-bottom: -0.06rem;
}

.login-view__sms-status--error {
  color: #E85635;
}

/* ==================== 状态按钮（步骤二） ==================== */
.login-view__status-btn {
  width: 100%;
  height: 0.4rem;
  background: linear-gradient(90deg, $btn-dark 0%, $btn-dark-hover 100%);
  border-radius: 0.12rem;
  border: none;
  font-weight: 600;
  font-size: 0.14rem;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  transition: opacity 0.2s;

  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  &:not(:disabled):hover {
    opacity: 0.9;
  }
}

/* 登录中转圈动画 */
.login-view__spinner {
  display: inline-block;
  width: 0.18rem;
  height: 0.18rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: login-spin 0.7s linear infinite;
}

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

/* ==================== 协议勾选 ==================== */
.login-view__agreement {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  width: 3.41rem;
}

.login-view__checkbox {
  box-sizing: border-box;
  width: 0.18rem;
  height: 0.18rem;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 0.04rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.login-view__checkbox--checked {
  background: #4FC2C9;
  border-color: #4FC2C9;
}

.login-view__check-icon {
  font-size: 0.11rem;
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1;
}

.login-view__agreement-text {
  font-weight: 400;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #616367;
}

.login-view__agreement-link {
  font-weight: 500;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #42A8B3;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}



/* ==================== 简历上传阶段 — 右侧面板 ==================== */
.login-view__form-wrap--resume {
  width: 3.41rem;
}

/* 上传区域 */
.login-view__upload-area {
  width: 100%;
  padding: 0.4rem 0.4rem;
  border: 2px solid #D6F1EF;
  border-radius: 0.12rem;
  background: #F6FFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  cursor: pointer;
  transition: border-color 0.2s;

  &:hover {
    border-color: $accent;
  }
}

.login-view__upload-circle {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #E8F8F7;
}

.login-view__upload-text {
  font-size: 0.14rem;
  color: #64748B;
}

.login-view__upload-hint {
  font-size: 0.12rem;
  color: #94A3B8;
}

.login-view__file-input {
  display: none;
}

.login-view__upload-btn {
  height: 0.4rem;
  line-height: 0.4rem;
  background: linear-gradient(90deg, $btn-dark 0%, $btn-dark-hover 100%);
  border: none;
  border-radius: 0.08rem;
  font-size: 0.16rem;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.9;
  }
}

/* 解析中状态 — 新版步骤面板 */
.login-view__parse-panel {
  box-sizing: border-box;
  width: 3.41rem;
  padding: 0.24rem;
  background: #F6FFFF;
  border: 1px solid #D6F1EF;
  border-radius: 0.08rem;
}

/* 进度条头部 */
.login-view__parse-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.08rem;
}

.login-view__parse-progress-label {
  font-weight: 500;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #616367;
}

.login-view__parse-progress-percent {
  font-weight: 700;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #42A8B3;
}

/* 进度轨道 */
.login-view__parse-progress-rail {
  width: 100%;
  height: 0.06rem;
  background: #E7F2F3;
  border-radius: 0.03rem;
  overflow: hidden;
  margin-bottom: 0.20rem;
}

.login-view__parse-progress-fill {
  height: 100%;
  background: #4FC2C9;
  border-radius: 0.03rem;
  transition: width 0.3s ease;
}

/* 步骤列表 */
.login-view__parse-steps {
  display: flex;
  flex-direction: column;
}

.login-view__parse-step-item {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.login-view__parse-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 0.10rem;
  flex-shrink: 0;
}

/* 步骤圆圈 — 完成（实心深色） */
.login-view__parse-dot {
  width: 0.12rem;
  height: 0.12rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.login-view__parse-dot--done {
  background: #4FC2C9;
}

/* 步骤圆圈 — 进行中（光晕 + 呼吸内圆） */
.login-view__parse-dot--active {
  width: 0.16rem;
  height: 0.16rem;
  background: #E7FAF5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -0.02rem;
  margin-right: -0.02rem;
}

.login-view__parse-dot-pulse {
  width: 0.08rem;
  height: 0.08rem;
  background: #4FC2C9;
  border-radius: 50%;
  animation: parse-dot-breathe 1.2s ease-in-out infinite;
}

@keyframes parse-dot-breathe {
  0%, 100% { transform: scale(0.7); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* 步骤圆圈 — 等待（浅色） */
.login-view__parse-dot--pending {
  background: #D6F1EF;
}

/* 连接线 */
.login-view__parse-connector {
  width: 0.02rem;
  height: 0.18rem;
  background: #D6F1EF;
  border-radius: 0.01rem;
}

/* 步骤文字 */
.login-view__parse-step-text {
  flex: 1;
  font-weight: 500;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #18181A;
  padding-top: 0;
}

.login-view__parse-step-text--pending {
  font-weight: 400;
  color: #616367;
}

/* 步骤状态文字 */
.login-view__parse-step-state {
  font-size: 0.12rem;
  line-height: 0.15rem;
  flex-shrink: 0;
  margin-left: 0.10rem;
}

.login-view__parse-step-state--done {
  font-weight: 500;
  color: #42A8B3;
}

.login-view__parse-step-state--active {
  font-weight: 500;
  color: #42A8B3;
}

.login-view__parse-step-state--pending {
  font-weight: 400;
  color: #939599;
}

/* 解析中按钮（禁用样式） */
.login-view__parse-btn {
  width: 3.41rem;
  height: 0.40rem;
  background: #A6EAE7;
  border-radius: 0.08rem;
  border: none;
  font-weight: 600;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #FFFFFF;
  cursor: not-allowed;
}

/* ==================== 状态4：上传成功面板 ==================== */
.login-view__success-panel {
  box-sizing: border-box;
  width: 3.41rem;
  padding: 0.28rem 0.24rem;
  background: #F6FFFB;
  border: 1px solid #BCEED7;
  border-radius: 0.08rem;
}

.login-view__success-header {
  display: flex;
  align-items: center;
  gap: 0.14rem;
  margin-bottom: 0.24rem;
}

.login-view__success-icon-bg {
  width: 0.40rem;
  height: 0.40rem;
  background: #E7FAF0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.login-view__success-icon-mark {
  font-weight: 700;
  font-size: 0.18rem;
  line-height: 0.22rem;
  color: #22B36A;
}

.login-view__success-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}

.login-view__success-title {
  font-weight: 500;
  font-size: 0.13rem;
  line-height: 0.16rem;
  color: #18181A;
}

.login-view__success-detail {
  font-weight: 400;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #616367;
}

.login-view__success-tips {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.login-view__success-tip-item {
  display: flex;
  align-items: center;
  gap: 0.10rem;
}

.login-view__success-tip-dot {
  width: 0.06rem;
  height: 0.06rem;
  background: #22B36A;
  border-radius: 50%;
  flex-shrink: 0;
}

.login-view__success-tip-text {
  font-weight: 400;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #616367;
}

/* 进入后台按钮 */
.login-view__success-btn {
  width: 3.41rem;
  height: 0.40rem;
  background: #4FC2C9;
  border-radius: 0.08rem;
  border: none;
  font-weight: 600;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.9;
  }
}

/* ==================== 状态3：上传失败面板 ==================== */
.login-view__failed-panel {
  box-sizing: border-box;
  width: 3.41rem;
  padding: 0.28rem 0.24rem;
  background: #FFFBFA;
  border: 1px solid #FADBD5;
  border-radius: 0.08rem;
}

.login-view__failed-header {
  display: flex;
  align-items: center;
  gap: 0.14rem;
  margin-bottom: 0.24rem;
}

.login-view__failed-icon-bg {
  width: 0.40rem;
  height: 0.40rem;
  background: #FFF0ED;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.login-view__failed-icon-mark {
  font-weight: 700;
  font-size: 0.18rem;
  line-height: 0.22rem;
  color: #FF6B4A;
}

.login-view__failed-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}

.login-view__failed-title {
  font-weight: 500;
  font-size: 0.13rem;
  line-height: 0.16rem;
  color: #18181A;
}

.login-view__failed-detail {
  font-weight: 400;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #616367;
}

.login-view__failed-tips {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.login-view__failed-tip-item {
  display: flex;
  align-items: center;
  gap: 0.10rem;
}

.login-view__failed-tip-dot {
  width: 0.06rem;
  height: 0.06rem;
  background: #FF8D76;
  border-radius: 50%;
  flex-shrink: 0;
}

.login-view__failed-tip-text {
  font-weight: 400;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #616367;
}

/* 重新上传按钮 */
.login-view__failed-btn {
  width: 3.41rem;
  height: 0.40rem;
  background: linear-gradient(90deg, #4FC2C9 0%, #42A8B3 100%);
  box-shadow: 0 0.16rem 0.30rem rgba(15, 83, 87, 0.15);
  border-radius: 0.08rem;
  border: none;
  font-weight: 600;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.9;
  }
}

.login-view__right-footer{
  margin-top: 0.37rem;
  font-size: 0.13rem;
  width: 4rem;
  text-align: center;
  color: #999;
  padding-top: 0.3rem;
  border-top: 1px solid #E7F2F3;
}