html, body, #app, #auth-page, #main-layout {
  background: #fafbff !important;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(99, 102, 241, 0.10), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(139, 92, 246, 0.08), transparent 45%),
    linear-gradient(rgba(226, 232, 240, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.30) 1px, transparent 1px) !important;
  background-size: auto, auto, 40px 40px, 40px 40px !important;
  background-attachment: fixed !important;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
}
.auth-card {
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(99, 102, 241, 0.10) !important;
  border: 1px solid #f1f5f9 !important;
  padding: 40px 36px !important;
}
.logo-icon {
  background: linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35) !important;
}
.auth-card h1 {
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.5px !important;
  font-size: 26px !important;
}
.auth-card p { color: #64748b !important; }
.auth-tabs {
  background: #f1f5f9 !important;
  border-radius: 12px !important;
  padding: 4px !important;
  border: 1px solid #eef2f7 !important;
}
.auth-tab {
  border-radius: 9px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  transition: all 0.15s !important;
}
.auth-tab.active {
  background: #fff !important;
  color: #6366f1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}
.form-label {
  font-weight: 600 !important;
  color: #475569 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
}
.form-input {
  border: 1px solid #e8eef7 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: all 0.15s !important;
  background: #f8fafc !important;
}
.form-input:focus {
  border-color: #818cf8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
  outline: none !important;
}
.form-hint { color: #94a3b8 !important; font-size: 12px !important; }
.btn-primary, button.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  transition: all 0.15s !important;
}
.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4) !important;
}
.divider { border-color: #eef2f7 !important; }
.sidebar-item.active, .sidebar .active, .nav-item.active {
  background: linear-gradient(135deg, #eff6ff, #ede9fe) !important;
  color: #6366f1 !important;
  font-weight: 600 !important;
}
.card {
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04) !important;
  border: 1px solid #f1f5f9 !important;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* ===== 用 JS 替换 LOGO 为闪邮闪电图标 ===== */