/* 全局样式优化方案 */

/* 1. 基础重置和通用样式 */
body, html {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.28rem;
  color: #333333;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  line-height: 1.5;
  background-attachment: fixed;
}

/* 2. 色彩体系 */
:root {
  /* 主色调 */
  --primary-color: #46D5BE;
  --primary-hover: #3bc2ab;
  --primary-dark: #1A936F;
  --primary-light: #80ED99;
  
  /* 辅助色 */
  --danger-color: #FF6B6B;
  --danger-dark: #E53E3E;
  --warning-color: #FFD166;
  --warning-alt: #FF9A76;
  --success-color: #4ECDC4;
  --success-dark: #1A936F;
  
  /* 扩展辅助色 */
  --accent-color: #8D99AE; /* 强调色 */
  --accent-light: #AEB8CC; /* 浅强调色 */
  --accent-dark: #6C7793; /* 深强调色 */
  --vibrant-color: #FF9A76; /* 活力色 */
  --vibrant-light: #FFB599; /* 浅活力色 */
  --vibrant-dark: #E07A5F; /* 深活力色 */
  --cool-color: #4ECDC4; /* 冷色 */
  --cool-light: #7ADDD4; /* 浅冷色 */
  --cool-dark: #3AAEA3; /* 深冷色 */
  
  /* 新增更多辅助色 */
  --purple-color: #9B5DE5; /* 紫色 */
  --purple-light: #B19CD9; /* 浅紫色 */
  --purple-dark: #7D3C98; /* 深紫色 */
  --pink-color: #F15BB5; /* 粉色 */
  --pink-light: #F7A8D8; /* 浅粉色 */
  --pink-dark: #C2185B; /* 深粉色 */
  --orange-color: #F95738; /* 橙色 */
  --orange-light: #FFA07A; /* 浅橙色 */
  --orange-dark: #E64A19; /* 深橙色 */
  --teal-color: #00BBB4; /* 青色 */
  --teal-light: #4DB6AC; /* 浅青色 */
  --teal-dark: #00897B; /* 深青色 */
  
  /* 中性色 */
  --text-heading: #2D3748;
  --text-primary: #4A5568;
  --text-secondary: #718096;
  --text-tertiary: #A0AEC0;
  --text-quaternary: #CBD5E0; /* 四级文字色 */
  --text-disabled: #E2E8F0; /* 禁用文字色 */
  --border-color: #E2E8F0;
  --divider-color: #EDF2F7;
  
  /* 背景色系 */
  --background-color: #f5f5f5; /* 页面背景 */
  --background-alt-color: #fafafa; /* 替代背景 */
  --background-pattern-color: #f0f0f0; /* 图案背景 */
  --card-background: #ffffff; /* 卡片背景 */
  --card-alt-background: #F0FFF4; /* 替代卡片背景 */
  --card-emphasis-background: #E6FFFA; /* 强调卡片背景 */
  
  /* 渐变背景 */
  --gradient-background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  
  /* 纹理卡片背景 */
  --card-textured-background: linear-gradient(135deg, #ffffff 0%, #f8fbfd 100%);
  
  /* 渐变色 */
  --gradient-primary: linear-gradient(135deg, #46D5BE 0%, #4ECDC4 100%);
  --gradient-alt: linear-gradient(135deg, #46D5BE 0%, #80ED99 100%);
  
  /* 状态色 */
  --info-color: #8D99AE;
  
  /* 渐变色组合 */
  --gradient-combo-1: linear-gradient(135deg, var(--primary-color) 0%, var(--vibrant-color) 100%);
  --gradient-combo-2: linear-gradient(135deg, var(--cool-color) 0%, var(--accent-color) 100%);
  --gradient-combo-3: linear-gradient(135deg, var(--warning-color) 0%, var(--danger-color) 100%);
  
  /* 新增渐变色组合 */
  --gradient-combo-4: linear-gradient(135deg, var(--purple-color) 0%, var(--pink-color) 100%);
  --gradient-combo-5: linear-gradient(135deg, var(--orange-color) 0%, var(--teal-color) 100%);
  --gradient-combo-6: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-color) 100%);
}

/* 3. 通用类 */
.container {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 0.3rem;
}

.card {
  background: var(--card-background);
  border-radius: 0.2rem;
  box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.05);
  margin-bottom: 0.4rem;
  overflow: hidden;
}

.flex {
  display: flex;
}

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

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

.text-center {
  text-align: center;
}

.text-heading {
  color: var(--text-heading);
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-info {
  color: var(--info-color);
}

.text-primary-color {
  color: var(--primary-color);
}

.text-danger {
  color: var(--danger-color);
}

.text-warning {
  color: var(--warning-color);
}

.text-success {
  color: var(--success-color);
}

.bg-primary {
  background-color: var(--primary-color);
}

.bg-danger {
  background-color: var(--danger-color);
}

.bg-warning {
  background-color: var(--warning-color);
}

.bg-success {
  background-color: var(--success-color);
}

/* 4. 间距系统 */
.m-0 { margin: 0; }
.m-1 { margin: 0.1rem; }
.m-2 { margin: 0.2rem; }
.m-3 { margin: 0.3rem; }
.m-4 { margin: 0.4rem; }
.m-5 { margin: 0.5rem; }
.m-6 { margin: 0.6rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.1rem; }
.mt-2 { margin-top: 0.2rem; }
.mt-3 { margin-top: 0.3rem; }
.mt-4 { margin-top: 0.4rem; }
.mt-5 { margin-top: 0.5rem; }
.mt-6 { margin-top: 0.6rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.1rem; }
.mb-2 { margin-bottom: 0.2rem; }
.mb-3 { margin-bottom: 0.3rem; }
.mb-4 { margin-bottom: 0.4rem; }
.mb-5 { margin-bottom: 0.5rem; }
.mb-6 { margin-bottom: 0.6rem; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.1rem; }
.ml-2 { margin-left: 0.2rem; }
.ml-3 { margin-left: 0.3rem; }
.ml-4 { margin-left: 0.4rem; }
.ml-5 { margin-left: 0.5rem; }
.ml-6 { margin-left: 0.6rem; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.1rem; }
.mr-2 { margin-right: 0.2rem; }
.mr-3 { margin-right: 0.3rem; }
.mr-4 { margin-right: 0.4rem; }
.mr-5 { margin-right: 0.5rem; }
.mr-6 { margin-right: 0.6rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.1rem; }
.p-2 { padding: 0.2rem; }
.p-3 { padding: 0.3rem; }
.p-4 { padding: 0.4rem; }
.p-5 { padding: 0.5rem; }
.p-6 { padding: 0.6rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.1rem; }
.pt-2 { padding-top: 0.2rem; }
.pt-3 { padding-top: 0.3rem; }
.pt-4 { padding-top: 0.4rem; }
.pt-5 { padding-top: 0.5rem; }
.pt-6 { padding-top: 0.6rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.1rem; }
.pb-2 { padding-bottom: 0.2rem; }
.pb-3 { padding-bottom: 0.3rem; }
.pb-4 { padding-bottom: 0.4rem; }
.pb-5 { padding-bottom: 0.5rem; }
.pb-6 { padding-bottom: 0.6rem; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.1rem; }
.pl-2 { padding-left: 0.2rem; }
.pl-3 { padding-left: 0.3rem; }
.pl-4 { padding-left: 0.4rem; }
.pl-5 { padding-left: 0.5rem; }
.pl-6 { padding-left: 0.6rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.1rem; }
.pr-2 { padding-right: 0.2rem; }
.pr-3 { padding-right: 0.3rem; }
.pr-4 { padding-right: 0.4rem; }
.pr-5 { padding-right: 0.5rem; }
.pr-6 { padding-right: 0.6rem; }

/* 5. 文字大小 */
.text-xs { font-size: 0.2rem; }
.text-sm { font-size: 0.24rem; }
.text-base { font-size: 0.28rem; }
.text-lg { font-size: 0.32rem; }
.text-xl { font-size: 0.36rem; }
.text-2xl { font-size: 0.4rem; }
.text-3xl { font-size: 0.44rem; }
.text-4xl { font-size: 0.48rem; }

.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* 6. 圆角 */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: 0.05rem; }
.rounded { border-radius: 0.1rem; }
.rounded-md { border-radius: 0.15rem; }
.rounded-lg { border-radius: 0.2rem; }
.rounded-xl { border-radius: 0.3rem; }
.rounded-2xl { border-radius: 0.4rem; }
.rounded-full { border-radius: 50%; }

/* 7. 边框 */
.border { border: 1px solid var(--border-color); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
.border-l { border-left: 1px solid var(--border-color); }
.border-r { border-right: 1px solid var(--border-color); }

.border-primary { border-color: var(--primary-color); }
.border-danger { border-color: var(--danger-color); }
.border-warning { border-color: var(--warning-color); }
.border-success { border-color: var(--success-color); }
.border-accent { border-color: var(--accent-color); }
.border-purple { border-color: var(--purple-color); }
.border-pink { border-color: var(--pink-color); }
.border-orange { border-color: var(--orange-color); }
.border-teal { border-color: var(--teal-color); }

/* 8. 阴影 */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: 0 0.02rem 0.05rem rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 0.05rem 0.15rem rgba(0, 0, 0, 0.1); }
.shadow-md { box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15); }
.shadow-xl { box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2); }

/* 9. 响应式隐藏 */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:inline-block { display: inline-block; }
}

/* 10. 动画 */
.transition-all {
  transition: all 0.3s ease;
}

.transition-fast {
  transition: all 0.15s ease;
}

.transition-slow {
  transition: all 0.5s ease;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.3s ease;
}
.slide-up-enter, .slide-up-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.slide-down-enter-active, .slide-down-leave-active {
  transition: all 0.3s ease;
}
.slide-down-enter, .slide-down-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.scale-enter-active, .scale-leave-active {
  transition: all 0.3s ease;
}
.scale-enter, .scale-leave-to {
  transform: scale(0.9);
  opacity: 0;
}