/* rem布局基础设置 */
/* 设计稿基准宽度：375px (iPhone 6/7/8) */
/* 基准字体大小：16px */

/* 设置根元素字体大小，实现rem适配 */
html {
  font-size: 16px; /* 基准字体大小 */
}

/* 根据屏幕宽度动态调整根字体大小 */
@media screen and (max-width: 320px) {
  html {
    font-size: 14px; /* 小屏幕设备 */
  }
}

@media screen and (min-width: 321px) and (max-width: 375px) {
  html {
    font-size: 16px; /* 标准屏幕设备 */
  }
}

@media screen and (min-width: 376px) and (max-width: 414px) {
  html {
    font-size: 17px; /* 大屏手机 */
  }
}

@media screen and (min-width: 415px) and (max-width: 768px) {
  html {
    font-size: 18px; /* 平板设备 */
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  html {
    font-size: 20px; /* 大平板/小桌面 */
  }
}

@media screen and (min-width: 1025px) {
  html {
    font-size: 22px; /* 桌面设备 */
  }
}

/* 使用JavaScript动态计算根字体大小（更精确的适配） */
/* 这段代码会在页面加载时执行，根据实际屏幕宽度计算最佳字体大小 */
/* 375px设计稿基准，1rem = 16px */
/* 计算公式：fontSize = (clientWidth / 375) * 16 */

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

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

/* rem换算工具类 */
/* 常用尺寸的rem值 */
.text-xs { font-size: 0.75rem; }    /* 12px */
.text-sm { font-size: 0.875rem; }   /* 14px */
.text-base { font-size: 1rem; }     /* 16px */
.text-lg { font-size: 1.125rem; }   /* 18px */
.text-xl { font-size: 1.25rem; }    /* 20px */
.text-2xl { font-size: 1.5rem; }    /* 24px */
.text-3xl { font-size: 1.875rem; }  /* 30px */
.text-4xl { font-size: 2.25rem; }   /* 36px */

/* 间距工具类 */
.p-1 { padding: 0.25rem; }    /* 4px */
.p-2 { padding: 0.5rem; }     /* 8px */
.p-3 { padding: 0.75rem; }    /* 12px */
.p-4 { padding: 1rem; }       /* 16px */
.p-5 { padding: 1.25rem; }    /* 20px */
.p-6 { padding: 1.5rem; }     /* 24px */
.p-8 { padding: 2rem; }       /* 32px */
.p-10 { padding: 2.5rem; }    /* 40px */

.m-1 { margin: 0.25rem; }     /* 4px */
.m-2 { margin: 0.5rem; }      /* 8px */
.m-3 { margin: 0.75rem; }     /* 12px */
.m-4 { margin: 1rem; }        /* 16px */
.m-5 { margin: 1.25rem; }     /* 20px */
.m-6 { margin: 1.5rem; }      /* 24px */
.m-8 { margin: 2rem; }        /* 32px */
.m-10 { margin: 2.5rem; }     /* 40px */

/* 宽度工具类 */
.w-full { width: 100%; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }

/* 高度工具类 */
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }

/* 弹性布局工具类 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* 文本对齐 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 圆角工具类 */
.rounded { border-radius: 0.25rem; }    /* 4px */
.rounded-md { border-radius: 0.375rem; } /* 6px */
.rounded-lg { border-radius: 0.5rem; }   /* 8px */
.rounded-xl { border-radius: 0.75rem; }  /* 12px */
.rounded-2xl { border-radius: 1rem; }    /* 16px */
.rounded-full { border-radius: 9999px; }

/* 阴影工具类 */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }