/* ============================================
   登录/注册弹窗 优化 v1.0
   ============================================ */

/* --- 弹窗容器 --- */
.login-box-content {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
}

.login-box-content .login-box-top {
  padding: 32px 28px 28px !important;
}

/* --- Logo --- */
.login-logo {
  margin-bottom: 8px !important;
}

.login-logo img {
  height: 36px !important;
}

/* --- 标题描述 --- */
.login-title {
  color: #64748B !important;
  font-size: 13px !important;
  margin-bottom: 24px !important;
}

.login-title span {
  padding: 8px 0 !important;
}

/* --- 输入框 --- */
.login-form-item input {
  border: 1.5px solid #E2E8F0 !important;
  border-radius: var(--r-md) !important;
  font-size: 15px !important;
  height: 48px !important;
  padding: 10px 46px 10px 14px !important;
  background: #fff !important;
  color: #0F172A !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.login-form-item input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-bg-10) !important;
  outline: none !important;
}

.login-form-item input::placeholder {
  color: #94A3B8 !important;
}

/* --- 浮动标签 --- 保持B2原版行为，不做修改 */

/* --- 密码显示按钮 --- */
.login-eye {
  color: #94A3B8 !important;
  border-radius: var(--r-sm) !important;
}

.login-eye:hover {
  color: var(--gold-dark) !important;
}

/* --- 验证码 --- */
.check-code-img img {
  border-radius: var(--r-md) !important;
}

/* --- 登录按钮 --- */
.login-bottom {
  margin-top: 16px !important;
}

.login-bottom button {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 13px !important;
  transition: all var(--t-fast) !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.25) !important;
}

.login-bottom button:hover {
  box-shadow: 0 4px 16px rgba(245,158,11,0.35) !important;
  transform: translateY(-1px) !important;
}

.login-bottom button:active {
  transform: translateY(0) !important;
}

/* --- 忘记密码 --- */
.forget-pass {
  margin-top: 8px !important;
}

.forget-pass a {
  color: #94A3B8 !important;
  font-size: 12px !important;
  transition: color var(--t-fast) !important;
}

.forget-pass a:hover {
  color: var(--gold-dark) !important;
}

/* --- 第三方登录区域 --- */
.oauth-login-button {
  border-top: 1px solid #F1F5F9 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  background: #FAFBFC !important;
  padding: 10px 20px !important;
  gap: 4px !important;
}

.oauth-login-button a {
  font-size: 12px !important;
  color: #475569 !important;
  border-radius: var(--r-sm) !important;
  padding: 4px 8px !important;
  transition: all var(--t-fast) !important;
}

.oauth-login-button a:hover {
  background: var(--gold-bg) !important;
  color: var(--gold-dark) !important;
}

.oauth-login-button a::before {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}

/* --- 社交登录按钮 --- */
.login-social-button-bottom {
  border: 1px solid #F1F5F9 !important;
  border-radius: var(--r-md) !important;
  padding: 10px 12px !important;
  background: #FAFBFC !important;
}

.login-box-content .login-social-button-bottom a {
  background: var(--gold-bg) !important;
  border-radius: var(--r-sm) !important;
  color: #475569 !important;
  font-size: 12px !important;
  transition: all var(--t-fast) !important;
}

.login-box-content .login-social-button-bottom a:hover {
  background: var(--gold-bg-12) !important;
  color: var(--gold-dark) !important;
}

/* --- 用户协议 --- */
.site-terms {
  background: #F8FAFC !important;
  border-radius: 0 0 var(--r-xl) var(--r-xl) !important;
  font-size: 13px !important;
  color: #64748B !important;
}

.site-terms label a {
  color: var(--gold-dark) !important;
  font-size: 13px !important;
}

/* --- 底部链接 --- */
.login-tk {
  font-size: 12px !important;
  color: #94A3B8 !important;
}

.login-tk a {
  color: var(--gold-dark) !important;
}

/* --- 忘记密码提示 --- */
.forget-pass-info {
  background: var(--gold-bg) !important;
  border: 1px dashed var(--gold-bg-30) !important;
  border-radius: var(--r-md) !important;
  color: #64748B !important;
  font-size: 12px !important;
}

/* --- 登录弹窗描述 --- */
.login-box-des {
  color: #94A3B8 !important;
  font-size: 12px !important;
}


/* ============================================
   私信弹窗 (DM Modal)
   ============================================ */
.dmsg-box .modal-content {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
}

.dmsg-box-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.dmsg-box-header img {
  border-radius: 50% !important;
  border: 2px solid var(--gold-bg-15) !important;
}

.dmsg-textarea {
  border: none !important;
  padding: 16px 20px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  min-height: 120px !important;
  resize: vertical !important;
}

.dmsg-textarea:focus {
  outline: none !important;
}

.dmsg-button {
  padding: 12px 20px !important;
  border-top: 1px solid var(--border-light) !important;
  gap: 8px !important;
}

.dmsg-button button {
  border-radius: var(--r-md) !important;
  font-size: 14px !important;
  padding: 8px 20px !important;
  transition: all var(--t-fast) !important;
  cursor: pointer;
}

.dmsg-button button:not(.empty) {
  background: var(--gold) !important;
  color: #fff !important;
  border: none !important;
}

.dmsg-button button:not(.empty):hover {
  background: var(--gold-dark) !important;
}

.dmsg-button button.empty {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
}

.dmsg-button button.empty:hover {
  border-color: var(--text-muted) !important;
}

.dmsg-select input {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: border-color var(--t-fast) !important;
}

.dmsg-select input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-bg-10) !important;
  outline: none !important;
}

.dmsg-select p {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

.dmsg-user-list {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border-light) !important;
  overflow: hidden !important;
}

.dmsg-user-list li {
  transition: background var(--t-fast) !important;
  cursor: pointer;
}

.dmsg-user-list li:hover {
  background: var(--gold-bg-03) !important;
}

.dmsg-edit-user {
  color: var(--gold-dark) !important;
  cursor: pointer;
  font-size: 12px !important;
}

/* ============================================
   验证码弹窗 (Recaptcha Modal)
   ============================================ */
.recaptcha-form .modal-content {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
}

.recaptcha-img {
  text-align: center !important;
}

.recaptcha-img img {
  border-radius: var(--r-md) !important;
  cursor: pointer;
}

.recaptcha-img h2 {
  font-family: inherit !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.recaptcha-img p {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

.recaptcha-form input {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-size: 18px !important;
  padding: 10px 14px !important;
  transition: border-color var(--t-fast) !important;
}

.recaptcha-form input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-bg-10) !important;
  outline: none !important;
}

.recaptcha-button {
  border-top: 1px solid var(--border-light) !important;
}

.recaptcha-button .button {
  border-radius: var(--r-md) !important;
  transition: all var(--t-fast) !important;
}

.recaptcha-button .recaptcha-send {
  background: var(--gold) !important;
  color: #fff !important;
  border: none !important;
}

.recaptcha-button .recaptcha-send:hover {
  background: var(--gold-dark) !important;
}

/* ============================================
   公告弹窗 (Announcement Modal)
   ============================================ */
.gong-box .modal-content {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
}

.gong-box .gg-box-title {
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  overflow: hidden !important;
}

.gong-box .gg-title a {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  transition: color var(--t-fast) !important;
}

.gong-box .gg-title a:hover {
  color: var(--gold-dark) !important;
}

.gong-box .gg-desc {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.gong-box .gg-button .button {
  background: var(--gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 500 !important;
  transition: all var(--t-fast) !important;
  cursor: pointer;
}

.gong-box .gg-button .button:hover {
  background: var(--gold-dark) !important;
}

.gong-box .close-button {
  color: #fff !important;
}

/* ============================================
   绑定登录弹窗 (Bind Login Modal)
   ============================================ */
.binding-login .modal-content {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
}

.bind-pass-info {
  text-align: center !important;
  padding: 24px 20px 16px !important;
}

.bind-pass-info img {
  border-radius: 50% !important;
  border: 3px solid var(--gold-bg-15) !important;
  width: 64px !important;
  height: 64px !important;
}

.bind-pass-info p {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 8px 0 !important;
}

.bind-pass-info div {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.bind-success {
  text-align: center !important;
  padding: 24px !important;
}

.bind-success .green {
  color: #22C55E !important;
}

.binding-login .login-form-item input {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}

/* ============================================
   微信扫码弹窗 (WeChat QR Modal)
   ============================================ */
.mp-box .modal-content {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  text-align: center !important;
}

.mp-box .mp-box-content {
  padding: 24px !important;
}

.mp-box .mp-login-img {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}

.mp-box .mp-box-content p {
  color: var(--text-secondary) !important;
}

.mp-box .mp-box-content p.desc {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

.mp-box .mp-mt {
  color: var(--gold-dark) !important;
  font-size: 13px !important;
  transition: color var(--t-fast) !important;
  cursor: pointer;
}

/* 邀请码区域 */
.invitation-box {
  text-align: center !important;
}

.invitation-des {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

.invitation-tips {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

.invitation-input input {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 14px !important;
  text-align: center !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
  transition: border-color var(--t-fast) !important;
}

.invitation-input input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-bg-10) !important;
  outline: none !important;
}

.invitation-button .button {
  background: var(--gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  transition: all var(--t-fast) !important;
}

.invitation-button .button:hover {
  background: var(--gold-dark) !important;
}

/* ============================================
   弹窗通用关闭按钮
   ============================================ */
.close-button,
.pay-close {
  transition: all var(--t-fast) !important;
}

.close-button:hover,
.pay-close:hover {
  color: var(--gold-dark) !important;
  transform: scale(1.1);
}


/* ============================================
   Login - Mobile (768px)
   ============================================ */
@media screen and (max-width: 768px) {

  .login-box-content {
    border-radius: var(--r-lg) !important;
    max-width: 95% !important;
    margin: 0 auto !important;
  }

  .login-box-content .login-box-top {
    padding: 24px 20px 20px !important;
  }

  .login-form-item input {
    height: 44px !important;
    font-size: 14px !important;
    padding: 10px 40px 10px 12px !important;
  }

  .login-bottom button {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 12px !important;
  }

  .login-logo img {
    height: 30px !important;
  }

  .oauth-login-button {
    padding: 8px 16px !important;
    flex-wrap: wrap !important;
  }

  .site-terms {
    font-size: 12px !important;
    padding: 10px 16px !important;
  }

  .dmsg-box .modal-content,
  .recaptcha-form .modal-content,
  .gong-box .modal-content,
  .binding-login .modal-content,
  .mp-box .modal-content {
    border-radius: var(--r-lg) !important;
    max-width: 95% !important;
  }

  .dmsg-textarea {
    min-height: 100px !important;
    padding: 12px 16px !important;
  }

  .dmsg-button {
    padding: 10px 16px !important;
  }

  .dmsg-button button {
    min-height: 40px !important;
  }
}

@media screen and (max-width: 480px) {

  .login-box-content .login-box-top {
    padding: 20px 16px 16px !important;
  }

  .login-title {
    font-size: 12px !important;
  }
}