/* ============================================
   统一配色系统 - 使用CSS变量
   ============================================ */
:root {
  /* 主色调 - 避免金融相关命名 */
  --colorPrimary: #6366f1;
  --colorPrimaryDark: #4f46e5;
  --colorPrimaryLight: #818cf8;
  
  /* 辅助色 */
  --colorAccent: #ec4899;
  --colorAccentDark: #db2777;
  --colorAccentLight: #f472b6;
  
  /* 中性色 */
  --colorNeutral50: #f8fafc;
  --colorNeutral100: #f1f5f9;
  --colorNeutral200: #e2e8f0;
  --colorNeutral300: #cbd5e1;
  --colorNeutral400: #94a3b8;
  --colorNeutral500: #64748b;
  --colorNeutral600: #475569;
  --colorNeutral700: #334155;
  --colorNeutral800: #1e293b;
  --colorNeutral900: #0f172a;
  
  /* 文本颜色 */
  --textPrimary: #ffffff;
  --textSecondary: #cbd5e1;
  --textTertiary: #94a3b8;
  --textMuted: #64748b;
  
  /* 背景颜色 */
  --bgPrimary: #0f172a;
  --bgSecondary: #1e293b;
  --bgTertiary: #334155;
  --bgCard: rgba(30, 41, 59, 0.8);
  --bgCardHover: rgba(30, 41, 59, 0.95);
  
  /* 边框颜色 */
  --borderPrimary: rgba(148, 163, 184, 0.2);
  --borderSecondary: rgba(148, 163, 184, 0.1);
  --borderAccent: rgba(99, 102, 241, 0.5);
  
  /* 强调色 */
  --colorSuccess: #10b981;
  --colorWarning: #f59e0b;
  --colorInfo: #3b82f6;
  
  /* 阴影 */
  --shadowSm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadowMd: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadowLg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadowXl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadowAccent: 0 10px 25px -5px rgba(99, 102, 241, 0.3);
  
  /* 间距 */
  --spacingXs: 0.25rem;
  --spacingSm: 0.5rem;
  --spacingMd: 1rem;
  --spacingLg: 1.5rem;
  --spacingXl: 2rem;
  --spacing2xl: 3rem;
  --spacing3xl: 4rem;
  
  /* 圆角 */
  --radiusSm: 0.375rem;
  --radiusMd: 0.5rem;
  --radiusLg: 0.75rem;
  --radiusXl: 1rem;
  --radiusFull: 9999px;
  
  /* 字体 */
  --fontSizeXs: 0.75rem;
  --fontSizeSm: 0.875rem;
  --fontSizeBase: 1rem;
  --fontSizeLg: 1.125rem;
  --fontSizeXl: 1.25rem;
  --fontSize2xl: 1.5rem;
  --fontSize3xl: 1.875rem;
  --fontSize4xl: 2.25rem;
  --fontSize5xl: 3rem;
  
  /* 过渡 */
  --transitionFast: 150ms;
  --transitionBase: 300ms;
  --transitionSlow: 500ms;
}

/* ============================================
   基础样式重置
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  background-color: var(--bgPrimary);
  color: var(--textPrimary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ============================================
   工具类 - 移动端优先
   ============================================ */

/* 容器 */
.containerMain {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacingMd);
}

@media (min-width: 640px) {
  .containerMain {
    max-width: 640px;
    padding: 0 var(--spacingLg);
  }
}

@media (min-width: 768px) {
  .containerMain {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .containerMain {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .containerMain {
    max-width: 1280px;
  }
}

/* 布局 */
.flexBox {
  display: flex;
}

.flexColumn {
  flex-direction: column;
}

.flexWrap {
  flex-wrap: wrap;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexBetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gridLayout {
  display: grid;
}

.gridCols1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gridCols2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gridCols3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .gridColsMd2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .gridColsMd4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .gridColsLg3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 间距 */
.gapSm {
  gap: var(--spacingSm);
}

.gapMd {
  gap: var(--spacingMd);
}

.gapLg {
  gap: var(--spacingLg);
}

.gapXl {
  gap: var(--spacingXl);
}

.spaceYSm > * + * {
  margin-top: var(--spacingSm);
}

.spaceYMd > * + * {
  margin-top: var(--spacingMd);
}

.spaceYLg > * + * {
  margin-top: var(--spacingLg);
}

/* 内边距 */
.pSm {
  padding: var(--spacingSm);
}

.pMd {
  padding: var(--spacingMd);
}

.pLg {
  padding: var(--spacingLg);
}

.pXl {
  padding: var(--spacingXl);
}

.pxSm {
  padding-left: var(--spacingSm);
  padding-right: var(--spacingSm);
}

.pxMd {
  padding-left: var(--spacingMd);
  padding-right: var(--spacingMd);
}

.pxLg {
  padding-left: var(--spacingLg);
  padding-right: var(--spacingLg);
}

.pySm {
  padding-top: var(--spacingSm);
  padding-bottom: var(--spacingSm);
}

.pyMd {
  padding-top: var(--spacingMd);
  padding-bottom: var(--spacingMd);
}

.pyLg {
  padding-top: var(--spacingLg);
  padding-bottom: var(--spacingLg);
}

.pyXl {
  padding-top: var(--spacingXl);
  padding-bottom: var(--spacingXl);
}

.py2xl {
  padding-top: var(--spacing2xl);
  padding-bottom: var(--spacing2xl);
}

.py3xl {
  padding-top: var(--spacing3xl);
  padding-bottom: var(--spacing3xl);
}

/* 外边距 */
.mAuto {
  margin: 0 auto;
}

.mtSm {
  margin-top: var(--spacingSm);
}

.mtMd {
  margin-top: var(--spacingMd);
}

.mtLg {
  margin-top: var(--spacingLg);
}

.mtXl {
  margin-top: var(--spacingXl);
}

.mbSm {
  margin-bottom: var(--spacingSm);
}

.mbMd {
  margin-bottom: var(--spacingMd);
}

.mbLg {
  margin-bottom: var(--spacingLg);
}

.mbXl {
  margin-bottom: var(--spacingXl);
}

.mb2xl {
  margin-bottom: var(--spacing2xl);
}

.mrSm {
  margin-right: var(--spacingSm);
}

.mrMd {
  margin-right: var(--spacingMd);
}

.mlSm {
  margin-left: var(--spacingSm);
}

.mlMd {
  margin-left: var(--spacingMd);
}

/* 文本 */
.textCenter {
  text-align: center;
}

.textLeft {
  text-align: left;
}

.textRight {
  text-align: right;
}

.textXs {
  font-size: var(--fontSizeXs);
}

.textSm {
  font-size: var(--fontSizeSm);
}

.textBase {
  font-size: var(--fontSizeBase);
}

.textLg {
  font-size: var(--fontSizeLg);
}

.textXl {
  font-size: var(--fontSizeXl);
}

.text2xl {
  font-size: var(--fontSize2xl);
}

.text3xl {
  font-size: var(--fontSize3xl);
}

.text4xl {
  font-size: var(--fontSize4xl);
}

.text5xl {
  font-size: var(--fontSize5xl);
}

@media (min-width: 640px) {
  .textSm2xl {
    font-size: var(--fontSize2xl);
  }
  
  .textSm5xl {
    font-size: var(--fontSize5xl);
  }
  
  .textSm6xl {
    font-size: 3.75rem;
  }
}

.fontNormal {
  font-weight: 400;
}

.fontMedium {
  font-weight: 500;
}

.fontSemibold {
  font-weight: 600;
}

.fontBold {
  font-weight: 700;
}

.fontExtrabold {
  font-weight: 800;
}

.leadingTight {
  line-height: 1.25;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

/* 颜色 */
.textPrimary {
  color: var(--textPrimary);
}

.textSecondary {
  color: var(--textSecondary);
}

.textTertiary {
  color: var(--textTertiary);
}

.textMuted {
  color: var(--textMuted);
}

.textAccent {
  color: var(--colorAccent);
}

.textPrimaryColor {
  color: var(--colorPrimary);
}

.textSuccess {
  color: var(--colorSuccess);
}

.textWarning {
  color: var(--colorWarning);
}

/* 背景 */
.bgPrimary {
  background-color: var(--bgPrimary);
}

.bgSecondary {
  background-color: var(--bgSecondary);
}

.bgTertiary {
  background-color: var(--bgTertiary);
}

.bgCard {
  background-color: var(--bgCard);
  backdrop-filter: blur(10px);
}

.bgCardHover {
  background-color: var(--bgCardHover);
}

.bgPrimaryColor {
  background-color: var(--colorPrimary);
}

.bgAccent {
  background-color: var(--colorAccent);
}

/* 边框 */
.border {
  border: 1px solid var(--borderPrimary);
}

.border2 {
  border: 2px solid var(--borderPrimary);
}

.borderAccent {
  border-color: var(--borderAccent);
}

.borderTop {
  border-top: 1px solid var(--borderPrimary);
}

.borderBottom {
  border-bottom: 1px solid var(--borderPrimary);
}

.borderLeft4 {
  border-left: 4px solid var(--colorPrimary);
}

/* 圆角 */
.roundedSm {
  border-radius: var(--radiusSm);
}

.roundedMd {
  border-radius: var(--radiusMd);
}

.roundedLg {
  border-radius: var(--radiusLg);
}

.roundedXl {
  border-radius: var(--radiusXl);
}

.roundedFull {
  border-radius: var(--radiusFull);
}

/* 阴影 */
.shadowSm {
  box-shadow: var(--shadowSm);
}

.shadowMd {
  box-shadow: var(--shadowMd);
}

.shadowLg {
  box-shadow: var(--shadowLg);
}

.shadowXl {
  box-shadow: var(--shadowXl);
}

.shadowAccent {
  box-shadow: var(--shadowAccent);
}

/* 显示/隐藏 */
.hidden {
  display: none;
}

.block {
  display: block;
}

.inlineBlock {
  display: inline-block;
}

.inlineFlex {
  display: inline-flex;
}

.hiddenSm {
  display: none;
}

@media (min-width: 640px) {
  .hiddenSm {
    display: table-cell;
  }
}

.hiddenMd {
  display: none;
}

@media (min-width: 768px) {
  .hiddenMd {
    display: table-cell;
  }
}

/* 宽度 */
.wFull {
  width: 100%;
}

.wAuto {
  width: auto;
}

@media (min-width: 640px) {
  .wAutoSm {
    width: auto;
  }
}

/* 其他 */
.cursorPointer {
  cursor: pointer;
}

.overflowHidden {
  overflow: hidden;
}

.overflowXAuto {
  overflow-x: auto;
}

.whitespaceNowrap {
  white-space: nowrap;
}

/* ============================================
   组件样式
   ============================================ */

/* 主标题区域 */
.heroSection {
  background-color: var(--bgSecondary);
  padding: var(--spacing2xl) var(--spacingMd);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .heroSection {
    padding: var(--spacing3xl) var(--spacingLg);
  }
}

.heroSection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.heroSection > * {
  position: relative;
  z-index: 1;
}

/* 标签徽章 */
.badgeContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacingMd);
  margin-bottom: var(--spacingLg);
}

.badgeItem {
  display: inline-flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--textPrimary);
  font-weight: 600;
  padding: var(--spacingSm) var(--spacingMd);
  font-size: var(--fontSizeSm);
  border-radius: var(--radiusFull);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadowMd);
}

.badgeIcon {
  width: 16px;
  height: 16px;
  margin-right: var(--spacingSm);
  fill: var(--colorWarning);
}

/* 主标题 */
.heroTitle {
  font-size: var(--fontSize3xl);
  font-weight: 800;
  margin-bottom: var(--spacingMd);
  line-height: 1.2;
  text-align: center;
}

@media (min-width: 640px) {
  .heroTitle {
    font-size: var(--fontSize5xl);
  }
}

.heroTitleHighlight {
  color: var(--colorWarning);
}

.heroSubtitle {
  font-size: var(--fontSizeLg);
  color: var(--textSecondary);
  margin-bottom: var(--spacingXl);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (min-width: 640px) {
  .heroSubtitle {
    font-size: var(--fontSizeXl);
  }
}

/* 按钮组 */
.buttonGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacingMd);
  margin-bottom: var(--spacingXl);
}

@media (min-width: 640px) {
  .buttonGroup {
    flex-direction: row;
    justify-content: center;
  }
}

/* 主按钮 */
.btnPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--colorPrimary);
  color: var(--textPrimary);
  font-size: var(--fontSizeLg);
  font-weight: 700;
  padding: var(--spacingMd) var(--spacingXl);
  border-radius: var(--radiusXl);
  width: 100%;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--transitionBase) ease;
  box-shadow: var(--shadowAccent);
  border: none;
  cursor: pointer;
}

@media (min-width: 640px) {
  .btnPrimary {
    width: auto;
  }
}

.btnPrimary:hover {
  background-color: var(--colorPrimaryDark);
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.4);
}

/* 次要按钮 */
.btnSecondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--textPrimary);
  font-size: var(--fontSizeLg);
  font-weight: 600;
  padding: var(--spacingMd) var(--spacingXl);
  border-radius: var(--radiusXl);
  width: 100%;
  text-decoration: none;
  transition: all var(--transitionBase) ease;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

@media (min-width: 640px) {
  .btnSecondary {
    width: auto;
  }
}

.btnSecondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* 通知框 */
.noticeBox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacingMd);
  font-size: var(--fontSizeSm);
  font-weight: 700;
  border: 2px solid var(--colorAccent);
  border-radius: var(--radiusXl);
  color: var(--colorAccent);
  background-color: rgba(236, 72, 153, 0.1);
  backdrop-filter: blur(8px);
  transition: all var(--transitionBase) ease;
  box-shadow: var(--shadowXl);
}

.noticeIcon {
  width: 18px;
  height: 18px;
  margin-right: var(--spacingSm);
  fill: var(--colorAccent);
}

/* 章节标题 */
.sectionTitle {
  font-size: var(--fontSize3xl);
  font-weight: 800;
  margin-bottom: var(--spacingMd);
  text-align: center;
}

@media (min-width: 640px) {
  .sectionTitle {
    font-size: var(--fontSize4xl);
  }
}

.sectionSubtitle {
  font-size: var(--fontSizeLg);
  color: var(--textSecondary);
  margin-bottom: var(--spacing2xl);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 标签 */
.labelTag {
  display: inline-block;
  background-color: rgba(99, 102, 241, 0.2);
  color: var(--colorPrimaryLight);
  border: 1px solid rgba(99, 102, 241, 0.3);
  font-weight: 700;
  font-size: var(--fontSizeSm);
  padding: var(--spacingXs) var(--spacingMd);
  border-radius: var(--radiusFull);
  margin-bottom: var(--spacingMd);
  backdrop-filter: blur(8px);
}

/* 卡片 */
.card {
  background-color: var(--bgCard);
  border-radius: var(--radiusXl);
  box-shadow: var(--shadowLg);
  border: 1px solid var(--borderPrimary);
  backdrop-filter: blur(10px);
  transition: all var(--transitionBase) ease;
}

.card:hover {
  background-color: var(--bgCardHover);
  box-shadow: var(--shadowXl);
  transform: translateY(-4px);
}

/* 表格 */
.tableContainer {
  background-color: var(--bgCard);
  border: 1px solid var(--borderPrimary);
  border-radius: var(--radiusXl);
  box-shadow: var(--shadowLg);
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.tableHead {
  background-color: rgba(99, 102, 241, 0.2);
}

.tableHeadCell {
  padding: var(--spacingMd) var(--spacingLg);
  text-align: left;
  font-size: var(--fontSizeXs);
  font-weight: 700;
  color: var(--textMuted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tableBody {
  background-color: var(--bgCard);
}

.tableRow {
  transition: all var(--transitionFast) ease;
}

.tableRow:hover {
  background-color: rgba(99, 102, 241, 0.1);
}

.tableCell {
  padding: var(--spacingLg);
  font-size: var(--fontSizeSm);
  color: var(--textPrimary);
  font-weight: 500;
}

.tableCellMuted {
  color: var(--textMuted);
}

.tableCellAccent {
  color: var(--colorPrimaryLight);
  font-weight: 600;
}

.tableCellBold {
  font-weight: 700;
}

/* 标签页 */
.tabContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-bottom: 1px solid var(--borderPrimary);
  margin-bottom: var(--spacingLg);
  gap: var(--spacingSm);
}

@media (min-width: 640px) {
  .tabContainer {
    gap: var(--spacingMd);
  }
}

.tabButton {
  padding: var(--spacingSm) var(--spacingMd);
  font-size: var(--fontSizeLg);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: all var(--transitionBase) ease;
  border-radius: var(--radiusMd) var(--radiusMd) 0 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--textMuted);
}

.tabButton:hover {
  background-color: rgba(99, 102, 241, 0.1);
  color: var(--colorPrimary);
}

.tabButtonActive {
  border-bottom-color: var(--colorPrimary);
  color: var(--colorPrimary);
}

.tabButtonInactive {
  border-bottom-color: transparent;
  color: var(--textMuted);
}

/* 内容区域 */
.contentArea {
  display: block;
}

.contentAreaHidden {
  display: none !important;
}

/* 统计卡片 */
.statsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacingMd);
  margin-bottom: var(--spacingLg);
  text-align: center;
}

@media (min-width: 768px) {
  .statsGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.statsItem {
  display: flex;
  flex-direction: column;
}

.statsValue {
  font-size: var(--fontSize3xl);
  font-weight: 800;
  color: var(--colorPrimaryLight);
}

.statsLabel {
  font-size: var(--fontSizeSm);
  color: var(--textMuted);
}

.statsQuote {
  grid-column: span 2;
  font-size: var(--fontSizeLg);
  font-weight: 600;
  color: var(--colorPrimaryLight);
  font-style: italic;
}

@media (min-width: 768px) {
  .statsQuote {
    grid-column: span 2;
  }
}

/* 功能卡片网格 */
.featureGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacingXl);
  text-align: left;
}

@media (min-width: 768px) {
  .featureGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .featureGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.featureCard {
  padding: var(--spacingLg);
  background-color: var(--bgCard);
  border-radius: var(--radiusXl);
  box-shadow: var(--shadowLg);
  border: 1px solid var(--borderPrimary);
  transition: all var(--transitionBase) ease;
}

.featureCard:hover {
  box-shadow: var(--shadowXl);
  transform: translateY(-4px);
  background-color: var(--bgCardHover);
}

.featureIcon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacingMd);
  fill: var(--colorPrimary);
}

.featureTitle {
  font-size: var(--fontSizeXl);
  font-weight: 700;
  margin-bottom: var(--spacingSm);
  color: var(--textPrimary);
}

.featureDescription {
  color: var(--textSecondary);
  line-height: 1.6;
}

/* FAQ 手风琴 */
.faqContainer {
  display: flex;
  flex-direction: column;
  gap: var(--spacingMd);
}

.faqItem {
  background-color: var(--bgCard);
  padding: var(--spacingLg);
  border-radius: var(--radiusXl);
  box-shadow: var(--shadowMd);
  cursor: pointer;
  border: 1px solid var(--borderPrimary);
  transition: all var(--transitionBase) ease;
}

.faqItem:hover {
  background-color: rgba(99, 102, 241, 0.2);
  transform: translateX(4px);
}

.faqHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faqQuestion {
  font-size: var(--fontSizeLg);
  font-weight: 600;
  color: var(--textPrimary);
}

.faqIcon {
  width: 20px;
  height: 20px;
  fill: var(--colorPrimary);
  transition: transform var(--transitionBase) ease;
}

.faqIconOpen {
  transform: rotate(180deg);
}

.faqAnswer {
  margin-top: var(--spacingMd);
  color: var(--textSecondary);
  display: none;
}

.faqAnswerShow {
  display: block;
}

/* 列表 */
.listContainer {
  font-size: var(--fontSizeLg);
  font-weight: 600;
  display: inline-block;
  text-align: left;
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacingXl);
}

.listItem {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacingMd);
}

.listIcon {
  width: 24px;
  height: 24px;
  margin-right: var(--spacingMd);
  fill: var(--colorWarning);
}

/* 页脚 */
.footer {
  background-color: var(--bgTertiary);
  color: var(--textMuted);
  padding: var(--spacingXl) var(--spacingMd);
  text-align: center;
  font-size: var(--fontSizeSm);
}

.footerLinks {
  margin-top: var(--spacingMd);
  display: flex;
  justify-content: center;
  gap: var(--spacingMd);
  flex-wrap: wrap;
}

.footerLink {
  color: var(--textMuted);
  text-decoration: none;
  transition: color var(--transitionBase) ease;
}

.footerLink:hover {
  color: var(--textPrimary);
}

/* 隐藏元素 */
.hiddenElement {
  display: none;
  visibility: hidden;
  height: 0;
  width: 0;
}

/* 响应式工具 */
@media (min-width: 640px) {
  .flexRowSm {
    flex-direction: row;
  }
  
  .spaceXSm > * + * {
    margin-left: var(--spacingMd);
  }
}

/* 组合工具类 */
.textCenter {
  text-align: center;
}

.mb2xl {
  margin-bottom: var(--spacing2xl);
}

.textLg {
  font-size: var(--fontSizeLg);
}

.textSecondary {
  color: var(--textSecondary);
}

.fontMedium {
  font-weight: 500;
}

.mbMd {
  margin-bottom: var(--spacingMd);
}

.textPrimaryColor {
  color: var(--colorPrimary);
}

.flexColumn {
  flex-direction: column;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mtMd {
  margin-top: var(--spacingMd);
}

.textSm {
  font-size: var(--fontSizeSm);
}

.fontSemibold {
  font-weight: 600;
}

/* 过渡动画 */
.transition {
  transition: all var(--transitionBase) ease;
}

.transitionFast {
  transition: all var(--transitionFast) ease;
}

.transitionSlow {
  transition: all var(--transitionSlow) ease;
}