/* ============================================================
 * 全局主题：通过 CSS 变量覆盖 Element Plus 默认主题
 * 亮色为默认；html.dark 下为暗色（配合 element-plus dark css-vars）
 * ============================================================ */

:root {
  /* 品牌主色：靛蓝（替代默认 #409EFF） */
  --el-color-primary: #4f46e5;
  --el-color-primary-light-3: #847eed;
  --el-color-primary-light-5: #a7a3f2;
  --el-color-primary-light-7: #cac8f7;
  --el-color-primary-light-8: #dcdafa;
  --el-color-primary-light-9: #edecfc;
  --el-color-primary-dark-2: #3f38b7;

  /* 圆角 */
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;

  /* 页面背景：偏冷灰白 */
  --el-bg-color-page: #f4f5fa;

  /* 阴影：更柔和 */
  --el-box-shadow-light: 0 4px 16px rgba(15, 23, 42, 0.06);
  --el-box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);

  /* 字体栈 */
  --el-font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;

  /* 布局自定义变量 */
  --app-sidebar-bg: #1c2333;
  --app-sidebar-bg-active: rgba(99, 102, 241, 0.18);
  --app-sidebar-text: rgba(255, 255, 255, 0.72);
  --app-sidebar-text-active: #ffffff;
  --app-sidebar-logo-bg: rgba(99, 102, 241, 0.16);
  --app-header-height: 60px;
}

/* ---------------- 暗色模式 ---------------- */
html.dark {
  /* 主色在暗色下提亮一档，保证对比度 */
  --el-color-primary: #818cf8;
  --el-color-primary-light-3: #5a62ae;
  --el-color-primary-light-5: #41467c;
  --el-color-primary-light-7: #272a4a;
  --el-color-primary-light-8: #1a1c32;
  --el-color-primary-light-9: #14162b;
  --el-color-primary-dark-2: #6366f1;

  --el-bg-color-page: #101218;
  --app-sidebar-bg: #161a24;
  --app-sidebar-logo-bg: rgba(129, 140, 248, 0.16);
}

/* ---------------- 认证页（登录 / 申请）公共样式 ----------------
 * 深色品牌背景 + 光晕，卡片浮于其上。
 * 亮/暗模式下此背景保持一致，形成品牌页与内部页面的反差。
 */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(99, 102, 241, 0.28), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(56, 189, 248, 0.16), transparent 55%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #26224f 100%);
}
.auth-page::before {
  content: '';
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.22), transparent 70%);
  top: -180px;
  right: -120px;
  pointer-events: none;
}
.auth-page::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.14), transparent 70%);
  bottom: -160px;
  left: -100px;
  pointer-events: none;
}

.auth-card {
  width: 420px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
  position: relative;
  z-index: 1;
}
html.dark .auth-card {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.auth-card .el-card__body {
  padding: 28px 28px 24px;
}

/* 品牌区：图标放渐变圆角块内 */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.auth-brand .brand-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
}
.auth-brand h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.5px;
}
.auth-brand .sub {
  font-size: 12.5px;
  color: var(--el-text-color-secondary);
  margin-top: -6px;
}

.auth-foot {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}

/* 表单提交按钮：通栏主按钮 */
.auth-submit {
  width: 100%;
}

/* ---------------- 全局细节 ---------------- */
/* 细滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 150, 0.35);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 130, 150, 0.55);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* 文本选中颜色 */
::selection {
  background: rgba(99, 102, 241, 0.25);
}

/* 页面切换过渡（避免突兀） */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.18s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}