/**
 * 修改密码页面样式
 * 与设计图「个人中心-修改密码」保持一致
 */

.change-password-body {
  background: var(--bg-secondary);
}

.change-password-page {
  min-height: 560px;
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
  background: linear-gradient(180deg, #e3ecea 0, #eef2f1 180px, #F6F9FC 360px);
}


/* 左右布局 */
.change-password-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* ========== 左侧边栏 ========== */
.change-password-sidebar {
  flex-shrink: 0;
  width: 240px;
}

.change-password-user-card {
  background: var(--bg-primary);
  padding: 24px var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

/* 头像容器：圆形 + 浅灰边框，右下角叠加绿色相机图标 */
.change-password-avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: var(--radius-full);
  overflow: visible;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid #e8e8e8;
  flex-shrink: 0;
}

.change-password-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

/* 头像右下角绿色相机图标（更换头像） */
/* 上传头像图标：白底 + 绿色边框，相机线条为绿色 */
.change-password-avatar-camera {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: #fff;
  border: 2px solid var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast);
}

.change-password-avatar-camera:hover {
  border-color: var(--color-primary-dark);
}

.change-password-avatar-camera::after {
  content: '';
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.change-password-avatar-placeholder {
  display: none;
  width: 100%;
  height: 100%;
  min-width: 88px;
  min-height: 88px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  align-items: center;
  justify-content: center;
}

.change-password-avatar-placeholder::after {
  content: '';
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239E9E9E'%3E%3Cpath d='M12 12m-3.2 0a3.2 3.2 0 1 0 6.4 0 3.2 3.2 0 1 0 -6.4 0'/%3E%3Cpath d='M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 账户名称：较大、粗体/半粗体、深色 */
.change-password-user-name {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: #212121;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* 邮箱：较小、灰色 */
.change-password-user-email {
  font-size: 13px;
  color: #757575;
  line-height: 1.4;
}

.change-password-nav {
  background: var(--bg-primary);
  overflow: hidden;
  padding: 3px;
}

.change-password-nav__item {
  display: block;
  padding: 6px 16px 6px 24px;
  margin: 25px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #757575;
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  cursor: pointer;
}

.change-password-nav__item:hover {
  color: var(--color-primary);
  border-left-color: rgba(24, 99, 56, 0.4);
}

.change-password-nav__item--active {
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}


/* ========== 右侧主区 ========== */
.change-password-main {
  flex: 1;
  min-width: 0;
}

.change-password-card {
  background: var(--bg-primary);
  padding: var(--spacing-xl) 40px 40px;
}

.change-password-title {
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 40px;
}

/* 步骤条：与设计图一致 - 当前步实心绿圆白字，未完成步绿色描边空心圆+绿色数字，连接线灰色 */
.change-password-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 32px;
}

.change-password-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  font-size: var(--font-size-sm);
  margin-left: 10px;
}

.change-password-step__num {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

/* 当前步：深绿实心圆 + 白色数字 */
.change-password-step--active .change-password-step__num {
  background: var(--color-primary);
  color: var(--text-inverse);
  border-color: var(--color-primary);
}

/* 已通过步：与当前步一致的高亮效果（深绿实心圆 + 白字） */
.change-password-step--completed .change-password-step__num {
  background: var(--color-primary);
  color: var(--text-inverse);
  border-color: var(--color-primary);
}

.change-password-step--completed .change-password-step__label {
  color: #4a4a4a;
  font-weight: var(--font-weight-medium);
}

/* 未完成步：绿色描边空心圆 + 绿色数字 */
.change-password-step:not(.change-password-step--active):not(.change-password-step--completed) .change-password-step__num {
  background: var(--bg-primary);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 步骤文字统一为深灰色 */
.change-password-step__label {
  color: #4a4a4a;
}

.change-password-step--active .change-password-step__label {
  color: #4a4a4a;
  font-weight: var(--font-weight-medium);
}

/* 连接线：细灰线，对齐到圆形图标高度 */
.change-password-step:not(:last-child) {
  margin-right: 72px;
  margin-left: 10px;
}

.change-password-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(100% + 6px);
  top: 14px;
  width: 80px;
  height: 1px;
  background: #d8d8d8;
}

/* 面板通用 */
.change-password-panel {
  display: none;
}

.change-password-panel--active {
  display: block;
}

.change-password-panel__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 16px;
}

/* 验证方式选项：单排显示 */
.change-password-verify-options {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.change-password-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.change-password-radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.change-password-radio__text {
  user-select: none;
}

.change-password-radio input:checked+.change-password-radio__text {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* 邮箱验证选项：图标样式 */
.change-password-radio__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentColor;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

.change-password-radio__icon--email {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

.change-password-radio--email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.change-password-radio--email input:checked ~ .change-password-radio__icon--email {
  color: var(--color-primary);
}

.change-password-radio--email .change-password-radio__icon--email {
  color: #9e9e9e;
}

.change-password-hint-block,
.change-password-email-block {
  margin-bottom: 24px;
}

/* 邮箱验证：验证码已发送提示 */
.change-password-email-sent {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: 16px;
}

.change-password-email-sent__address {
  color: #186338;
  font-weight: var(--font-weight-medium);
}

/* 验证码行：请输入验证码 + 输入框 + 重新发送 */
.change-password-field-row--verify {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: none;
}

.change-password-field__label--inline {
  margin-bottom: 0;
  flex-shrink: 0;
}

.change-password-field-row--verify .change-password-field {
  width: 200px;
  max-width: 200px;
  margin-bottom: 0;
}

/* 重新发送按钮 */
.change-password-resend-btn {
  width: 118px;
  height: 40px;
  padding: 0;
  font-size: var(--font-size-sm);
  color: #fff;
  background: #186338;
  box-shadow: 0px 1px 0px 0px #F2F4F5;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-fast);
}

.change-password-resend-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.change-password-resend-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ========== 步骤 2：设置密码（与设计图一致）========== */
.change-password-panel--set-pwd .change-password-set-pwd-form {
  margin-top: 0;
}

/* 标题和输入框各占一行；两行之间间距 26px */
.change-password-set-pwd-row {
  margin-bottom: 26px;
}

.change-password-set-pwd-row:last-of-type {
  margin-bottom: 0;
}

.change-password-set-pwd-label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 8px;
}

.change-password-set-pwd-input {
  width: 330px;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  color: #1F2329;
  background: #FAFAFA;
  box-shadow: 0px 1px 0px 0px #F2F4F5;
  border-radius: 3px;
  border: 1px solid #E5E5E5;
  outline: none;
  transition: border-color var(--transition-base);
}

.change-password-set-pwd-input::placeholder {
  color: #8F959E;
}

.change-password-set-pwd-input:focus {
  border-color: var(--color-primary);
}

.change-password-set-pwd-input.is-error {
  border-color: #d32f2f;
}

.change-password-set-pwd-actions {
  margin-top: 24px;
}

.change-password-save-pwd-btn {
  width: 210px;
  height: 32px;
  margin-left: 60px;
  padding: 0;
  font-size: 14px;
  color: #fff;
  background: #186338;
  box-shadow: 0px 1px 0px 0px #F2F4F5;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-fast);
}

.change-password-save-pwd-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.change-password-save-pwd-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.change-password-field__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 8px;
}

.change-password-field {
  width: 100%;
  max-width: 400px;
  padding: 10px 16px;
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  outline: none;
  transition: border-color var(--transition-base);
}

.change-password-field:focus {
  border-color: var(--color-primary);
}

.change-password-field--readonly {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: default;
}

.change-password-field-row {
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 400px;
}

.change-password-field-row .change-password-field {
  flex: 1;
  margin-bottom: 0;
}

.change-password-send-code {
  flex-shrink: 0;
  white-space: nowrap;
}

.change-password-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* 本页提交/上一步按钮：适中尺寸，不沿用 btn--large */
.change-password-actions .btn {
  padding: 8px 24px;
  font-size: var(--font-size-sm);
  width: 210px;
  height: 32px;
  border-radius: 3px 3px 3px 3px;
}

.change-password-next,
.change-password-prev {
  min-width: 96px;
}

/* 步骤 3 成功页（与设计图一致：绿色对勾图标 + 设置成功，去登录） */
.change-password-panel--success {
  text-align: center;
  padding: 44px 0 32px;
}

.change-password-success-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 350px;
}

.change-password-success-icon {
  width: 45px;
  height: 45px;
  margin-bottom: 20px;
  display: block;
  object-fit: contain;
}

.change-password-success-text {
  font-size: var(--font-size-base);
  color: #000000;
  margin: 0;
}

.change-password-success-link {
  color: #186338;
  text-decoration: underline;
}

.change-password-success-link:hover {
  opacity: 0.9;
}

.hidden {
  display: none !important;
}

/* 响应式 */
@media (max-width: 768px) {
  .change-password-layout {
    flex-direction: column;
  }

  .change-password-sidebar {
    width: 100%;
  }

  .change-password-card {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .change-password-steps {
    flex-wrap: wrap;
    gap: 12px;
  }

  .change-password-step:not(:last-child)::after {
    display: none;
  }
}