/* ============================================================
   auth-premium.css — 认证页面浅色精致风覆盖层
   适用：reg.php / login.php / findpwd.php
   策略：在 register.css / login.css / forgot.css 之后引入，
        对高特异性原规则使用 !important 覆盖，回滚只需移除本文件引用
   主色与页面 CSS 变量 --el-color-primary(#5D87FF) 保持一致
   ============================================================ */

:root {
  --ap-primary: #5D87FF;
  --ap-primary-hover: #4A6DF5;
  --ap-primary-active: #3D5BE0;
  --ap-primary-light: #7D9FFF;
  --ap-primary-bg: #EEF3FF;
  --ap-text-1: #1F2937;
  --ap-text-2: #6B7280;
  --ap-text-3: #9CA3AF;
  --ap-border: #E6EAF3;
  --ap-input-bg: #F6F8FC;
  --ap-card-bg: rgba(255, 255, 255, 0.94);
  --ap-radius-input: 12px;
  --ap-radius-btn: 12px;
  --ap-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04),
                    0 8px 16px -8px rgba(16, 24, 40, 0.08),
                    0 24px 48px -16px rgba(16, 24, 40, 0.12);
  --ap-shadow-btn: 0 4px 12px -2px rgba(93, 135, 255, 0.35);
  --ap-shadow-btn-hover: 0 8px 20px -4px rgba(93, 135, 255, 0.45);
  --ap-ring: 0 0 0 4px rgba(93, 135, 255, 0.10);
  --ap-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 顶部弧形 banner ---------- */
.user-login-container .login-box .login-left {
  background: linear-gradient(135deg, #5D87FF 0%, #4A6DF5 55%, #3D5BE0 100%) !important;
}

.user-login-container .login-box .login-left::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%) !important;
  animation: ap-drift 14s ease-in-out infinite alternate !important;
}

.user-login-container .login-box .login-left::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%) !important;
  animation: ap-drift 18s ease-in-out infinite alternate-reverse !important;
}

/* banner 品牌区 */
.user-login-container .brand-logo {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22),
              0 4px 12px rgba(15, 23, 42, 0.12) !important;
}

.user-login-container .brand-title {
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
}

.user-login-container .brand-desc {
  opacity: 0.88 !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.12) !important;
}

/* ---------- 表单卡片 ---------- */
.user-login-container .login-box .login-right {
  background: var(--ap-card-bg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--ap-shadow-card) !important;
  animation: ap-card-in 0.55s var(--ap-ease) both;
}

/* 标题区 */
.user-login-container .login-box .login-right .header .title {
  color: var(--ap-text-1) !important;
  letter-spacing: 0.5px !important;
}

.user-login-container .login-box .login-right .header .subtitle {
  color: var(--ap-text-2) !important;
}

/* ---------- 输入框 ---------- */
.user-login-container .login-right .custom-input .el-input__wrapper {
  height: 46px !important;
  min-height: 46px !important;
  background: var(--ap-input-bg) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-radius-input) !important;
  box-shadow: none !important;
  padding: 0 14px !important;
  transition: border-color 0.25s var(--ap-ease),
              box-shadow 0.25s var(--ap-ease),
              background-color 0.25s var(--ap-ease) !important;
}

.user-login-container .login-right .custom-input .el-input__wrapper:hover:not(.is-focus) {
  border-color: #CBD3E6 !important;
}

.user-login-container .login-right .custom-input .el-input__wrapper.is-focus,
.user-login-container .login-right .custom-input .el-input__wrapper:focus-within {
  background: #FFFFFF !important;
  border-color: var(--ap-primary) !important;
  box-shadow: var(--ap-ring) !important;
}

.user-login-container .login-right .el-input__inner {
  height: 100% !important;
  line-height: 44px !important;
  font-size: 15px !important;
  color: var(--ap-text-1) !important;
}

.user-login-container .login-right .el-input__inner::placeholder {
  color: var(--ap-text-3) !important;
}

/* 前缀图标：聚焦时染主色 */
.user-login-container .login-right .el-input__prefix {
  color: var(--ap-text-3) !important;
  transition: color 0.25s var(--ap-ease);
}

.user-login-container .login-right .custom-input .el-input__wrapper.is-focus .el-input__prefix,
.user-login-container .login-right .custom-input .el-input__wrapper:focus-within .el-input__prefix {
  color: var(--ap-primary) !important;
}

/* 密码可见性切换图标 */
.user-login-container .login-right .el-input__suffix {
  color: var(--ap-text-3) !important;
}

/* ---------- 获取验证码按钮 ---------- */
.user-login-container .login-right .send-code-btn {
  height: 46px !important;
  min-height: 46px !important;
  border-radius: var(--ap-radius-btn) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--ap-primary) !important;
  color: var(--ap-primary) !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px -1px rgba(93, 135, 255, 0.18) !important;
  transition: all 0.25s var(--ap-ease) !important;
}

.user-login-container .login-right .send-code-btn:hover:not(:disabled):not([disabled]) {
  background: var(--ap-primary-bg) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(93, 135, 255, 0.28) !important;
}

.user-login-container .login-right .send-code-btn:active:not(:disabled):not([disabled]) {
  transform: translateY(0);
}

.user-login-container .login-right .send-code-btn:disabled,
.user-login-container .login-right .send-code-btn[disabled] {
  background: #F3F4F6 !important;
  border-color: var(--ap-border) !important;
  color: var(--ap-text-3) !important;
  box-shadow: none !important;
}

/* ---------- 主提交按钮 ---------- */
.user-login-container .login-right .submit-btn {
  height: 50px !important;
  border-radius: var(--ap-radius-btn) !important;
  background: linear-gradient(135deg, #6D93FF 0%, #5D87FF 60%, #4A6DF5 100%) !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  box-shadow: var(--ap-shadow-btn) !important;
  transition: all 0.25s var(--ap-ease) !important;
}

.user-login-container .login-right .submit-btn:hover:not(:disabled):not([disabled]) {
  background: linear-gradient(135deg, #7D9FFF 0%, #5D87FF 60%, #4A6DF5 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--ap-shadow-btn-hover) !important;
}

.user-login-container .login-right .submit-btn:active:not(:disabled):not([disabled]) {
  transform: translateY(0) !important;
  box-shadow: var(--ap-shadow-btn) !important;
}

.user-login-container .login-right .submit-btn:disabled,
.user-login-container .login-right .submit-btn[disabled] {
  opacity: 0.65;
}

/* ---------- 协议复选框 ---------- */
.user-login-container .login-right .el-checkbox__inner {
  border-radius: 6px !important;
  border-color: #CBD3E6 !important;
  background: #FFFFFF !important;
  transition: all 0.2s var(--ap-ease) !important;
}

.user-login-container .login-right .el-checkbox__inner:hover {
  border-color: var(--ap-primary) !important;
}

.user-login-container .login-right .el-checkbox__input.is-checked .el-checkbox__inner,
.user-login-container .login-right .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: var(--ap-primary) !important;
  border-color: var(--ap-primary) !important;
}

.user-login-container .login-right .el-checkbox__label {
  color: var(--ap-text-2) !important;
}

.user-login-container .login-right .el-checkbox__label a {
  color: var(--ap-primary) !important;
  text-decoration: none;
  transition: color 0.2s var(--ap-ease);
}

.user-login-container .login-right .el-checkbox__label a:hover {
  color: var(--ap-primary-hover) !important;
  text-decoration: underline;
}

/* ---------- 登录页第三方登录 ---------- */
.user-login-container .login-right .el-divider {
  border-color: var(--ap-border) !important;
}

.user-login-container .login-right .el-divider__text {
  color: var(--ap-text-3) !important;
}

.user-login-container .login-right .oauth-icon {
  border: 1px solid var(--ap-border) !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 6px -2px rgba(16, 24, 40, 0.06) !important;
  transition: all 0.25s var(--ap-ease) !important;
}

.user-login-container .login-right .oauth-icon:hover {
  border-color: currentColor !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 16px -6px rgba(16, 24, 40, 0.14) !important;
}

/* ---------- 验证码加载态 ---------- */
.user-login-container .login-right .loading-dot {
  background: var(--ap-primary) !important;
}

/* ---------- 顶部工具条按钮 ---------- */
.user-login-container .top-bar .btn {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10) !important;
  transition: all 0.25s var(--ap-ease) !important;
}

.user-login-container .top-bar .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14) !important;
}

/* ---------- 移动端精细调整（≤960px） ---------- */
@media screen and (max-width: 960px) {
  .user-login-container {
    background: linear-gradient(180deg, #4A6DF5 0%, #5D87FF 32%, #EEF3FF 32%, #F7F9FE 100%) !important;
    background-image: none !important;
  }

  .user-login-container::before {
    background: linear-gradient(180deg, #4A6DF5 0%, #5D87FF 100%) !important;
  }

  .user-login-container .login-box .login-right {
    border-radius: 36px 36px 0 0 !important;
  }

  /* 小屏进一步收圆角与留白 */
  @media screen and (max-width: 480px) {
    .user-login-container .login-box .login-right {
      border-radius: 28px 28px 0 0 !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
  }
}

/* ---------- 桌面端双栏微调（≥961px） ---------- */
@media screen and (min-width: 961px) {
  .user-login-container .login-box {
    border-radius: 24px !important;
    box-shadow: var(--ap-shadow-card) !important;
  }

  .user-login-container .login-box .login-left {
    border-radius: 24px 0 0 24px !important;
  }
}

/* ---------- 暗色模式 ---------- */
html.dark .user-login-container {
  background: #0B1220 !important;
  background-image: radial-gradient(circle at 50% 30%, #16203A 0%, #0B1220 70%) !important;
}

html.dark .user-login-container .login-box .login-left {
  background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 55%, #172554 100%) !important;
}

html.dark .user-login-container .login-box .login-left::before {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.25), rgba(96, 165, 250, 0) 70%) !important;
}

html.dark .user-login-container .login-box .login-left::after {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.20), rgba(167, 139, 250, 0) 70%) !important;
}

html.dark .user-login-container .login-box .login-right {
  background: rgba(17, 24, 39, 0.92) !important;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4),
              0 24px 48px -16px rgba(0, 0, 0, 0.5) !important;
}

html.dark .user-login-container .login-right .header .title {
  color: #F1F5F9 !important;
}

html.dark .user-login-container .login-right .header .subtitle {
  color: #94A3B8 !important;
}

html.dark .user-login-container .login-right .custom-input .el-input__wrapper {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: #334155 !important;
}

html.dark .user-login-container .login-right .custom-input .el-input__wrapper:hover:not(.is-focus) {
  border-color: #475569 !important;
}

html.dark .user-login-container .login-right .custom-input .el-input__wrapper.is-focus,
html.dark .user-login-container .login-right .custom-input .el-input__wrapper:focus-within {
  background: #0F172A !important;
  border-color: var(--ap-primary-light) !important;
  box-shadow: 0 0 0 4px rgba(125, 159, 255, 0.14) !important;
}

html.dark .user-login-container .login-right .el-input__inner {
  color: #F1F5F9 !important;
}

html.dark .user-login-container .login-right .el-input__inner::placeholder {
  color: #64748B !important;
}

html.dark .user-login-container .login-right .send-code-btn {
  background: rgba(93, 135, 255, 0.12) !important;
  border-color: rgba(125, 159, 255, 0.55) !important;
  color: #AEC3FF !important;
}

html.dark .user-login-container .login-right .send-code-btn:hover:not(:disabled):not([disabled]) {
  background: rgba(93, 135, 255, 0.2) !important;
}

html.dark .user-login-container .login-right .send-code-btn:disabled,
html.dark .user-login-container .login-right .send-code-btn[disabled] {
  background: rgba(51, 65, 85, 0.4) !important;
  border-color: #334155 !important;
  color: #64748B !important;
}

html.dark .user-login-container .login-right .submit-btn {
  background: linear-gradient(135deg, #5D87FF 0%, #4A6DF5 100%) !important;
}

html.dark .user-login-container .login-right .el-checkbox__inner {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: #475569 !important;
}

html.dark .user-login-container .login-right .el-checkbox__label {
  color: #94A3B8 !important;
}

html.dark .user-login-container .login-right .el-checkbox__label a {
  color: #AEC3FF !important;
}

html.dark .user-login-container .login-right .oauth-icon {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: #334155 !important;
}

html.dark .user-login-container .top-bar .btn {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(71, 85, 105, 0.5) !important;
}

html.dark .user-login-container .top-bar .topbar-icon {
  color: #E2E8F0 !important;
}

/* ---------- 动效 ---------- */
@keyframes ap-card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ap-drift {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-6%, 4%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-login-container .login-box .login-left::before,
  .user-login-container .login-box .login-left::after,
  .user-login-container .login-box .login-right {
    animation: none !important;
  }
}

/* ==================== v2：第三方登录图标 · 居中圆形品牌化 ==================== */
.oauth-container { margin-top: 20px !important; }
.oauth-container .el-divider { margin: 0 0 18px !important; background: transparent !important; }
.oauth-icons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
}
.oauth-icon {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 0 0 1px rgba(20,40,100,.04) !important;
  background: #f2f5fc !important;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.oauth-icon:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 24px -10px rgba(60,90,200,.4) !important; }
.oauth-icon.qq { color: #1d84ff !important; }
.oauth-icon.qq:hover { background: #e8f1ff !important; }
.oauth-icon.alipay { color: #1677ff !important; }
.oauth-icon.alipay:hover { background: #e6f0ff !important; }
.oauth-icon .art-svg-icon { font-size: 24px !important; }