/* ==============================================
   CSS Reset 增强版（现代项目+响应式+暗模式）
   ============================================== */

/* 1. 全局配置：CSS变量（统一管理，方便修改） */
:root {
  --color-primary: #fa0064; /* 主色 */
  --color-text: #333; /* 文本色 */
  --color-text-light: #666; /* 浅文本色 */
  --color-bg: #fff; /* 背景色 */
  --color-border: #eee; /* 边框色 */
  --font-base: "Poppins", sans-serif;
  --font-size-base: 16px; /* 基础字体大小 */
  --font-size-sm: 14px; /* 小字体 */
  --font-size-lg: 18px; /* 大字体 */
  --line-height-base: 1.5; /* 基础行高 */
  --spacing-base: 16px; /* 基础间距 */
  --border-radius-base: 1rem; /* 基础圆角 */
  --ttf: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition: 1s var(--ttf);
  --border-radius-middle: 1.4rem; /* 基础圆角 */
  --border-radius-large: 2rem; /* 基础圆角 */
  --color-primary-rgb: 250, 0, 100;

  /* ============================================
     流式字号令牌阶梯（Fluid Type Scale）
     规则：clamp(下限rem, 基准rem + 斜率vw, 上限)，
     375px → 1440px 视口内平滑缩放，两端锁死；
     媒体查询只管布局、不管字号。全站字号请引用
     本阶梯，禁止散写 clamp 魔法数字。
     ============================================ */
  --fs-caption: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);   /* 辅助/说明  12→14px */
  --fs-body: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);       /* 正文      14→16px */
  --fs-nav: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);         /* 导航      14→16px */
  --fs-h4: clamp(0.95rem, 0.88rem + 0.4vw, 1.2rem);         /* 卡片标题  15→19px */
  --fs-h3: clamp(1.05rem, 0.94rem + 0.6vw, 1.4rem);         /* 区块小标  17→22px */
  --fs-h2: clamp(1.2rem, 1.02rem + 0.9vw, 1.8rem);          /* 面板标题  19→29px */
  --fs-h1: clamp(1.375rem, 1.05rem + 1.7vw, 2.5rem);        /* 页面主标  22→40px */
  --fs-hero: clamp(1.8rem, 1.3rem + 2.5vw, 4rem);           /* 首屏标语  29→64px */

  /**
   padding
  **/
  --pd-caption: clamp(0.875rem, 0.7rem + 0.8vw, 5rem);   /* 辅助/说明  12→14px */
}

/* 暗模式适配：如需支持，请按 (prefers-color-scheme: dark) 编写暗色变量。
   注意：不要在此覆盖为与默认主题冲突的值，否则浅色系统下会出现白底白字。 */

/* 2. 全局盒模型+基础重置 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* 3. 页面基础样式 */
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh; /* 确保页面至少占满视口高度 */
  overscroll-behavior: none;
}

::-webkit-scrollbar {
  width: 6px;
  background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 1rem;
}

/* 4. 标题元素：统一间距+可自定义大小 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: calc(var(--spacing-base) / 2);
  font-weight: 600; /* 轻微加粗，提升层级 */
}

h1 { font-size: calc(var(--font-size-base) * 2); }
h2 { font-size: calc(var(--font-size-base) * 1.75); }
h3 { font-size: calc(var(--font-size-base) * 1.5); }
h4 { font-size: calc(var(--font-size-base) * 1.25); }

h5,
h6 { font-size: var(--font-size-base); }

/* 5. 文本元素：统一间距 */
p,
blockquote,
pre,
dl,
dd,
dt,
figure,
figcaption,
hr {
  margin-bottom: var(--spacing-base);
}

hr {
  height: 1px;
  background-color: var(--color-border);
}

/* 6. 列表元素：支持自定义样式 */
ul,
ol {
  list-style: none;
}

/* 自定义列表样式（按需启用） */
/* stylelint-disable-next-line declaration-block-single-line-max-declarations */
.list-disc { list-style-type: disc; margin-left: var(--spacing-base); }
/* stylelint-disable-next-line declaration-block-single-line-max-declarations */
.list-decimal { list-style-type: decimal; margin-left: var(--spacing-base); }

/* 7. 链接元素：hover效果+自定义 */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease; /* 平滑过渡 */
}

a:hover,
a:active {
  color: #004a99; /* hover深色 */
}

a:focus {
  /* outline: 2px solid var(--color-primary); */
  outline-offset: 2px;
}

/* 8. 媒体元素：优化响应式+圆角 */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
  height: auto;

  /* border-radius: var(--border-radius-base); 统一圆角，按需修改 */
}

/* 9. 表单元素：增强样式+适配 */
input,
button,
select,
textarea {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-base);
  padding: 8px 12px; /* 统一内边距 */
  transition: border-color 0.2s ease;
}

/* textarea：优化滚动条 */
textarea {
  resize: vertical; /* 仅允许垂直拉伸 */
  min-height: 80px; /* 最小高度，提升体验 */
}

/* 按钮样式：区分普通按钮和主要按钮 */
button {
  cursor: pointer;
  background-color: var(--color-bg);
}

/* 下拉选择框：自定义箭头（解决appearance清除后无箭头问题） */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11l4-4H4l4 4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px; /* 预留箭头空间 */
}

/* 聚焦样式 */
input:focus,
button:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2); /* 聚焦阴影，提升视觉 */
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  border-color: var(--color-border);
  box-shadow: none;
}

/* 主要按钮（按需使用） */
.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: #004a99;
  border-color: #004a99;
}

/* 复选框/单选框：保留默认样式（避免破坏可访问性） */
input[type="checkbox"],
input[type="radio"] {
  appearance: auto;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}

/* 10. 表格元素：增强样式 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: var(--spacing-base);
}

th,
td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

th {
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.02); /* 表头轻微背景，提升区分度 */
}

/* 11. 辅助类：快速开发 */

/* 隐藏元素（屏幕阅读器不可见） */
.hidden {
  display: none !important;
}

/* 视觉隐藏（屏幕阅读器可见，页面不可见） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 居中类（配合Flex使用） */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}