:root {
  /* 文本黑色 */
  --color-text-black: #272b33;
  /* 文本浅色黑色 */
  --color-text-light-black: #565a60;
  /* 文本灰色 */
  --color-text-gray: #898b8f;
  /* 文本浅色灰色 */
  --color-text-light-gray: #bcbdc0;
  /* 文本弱色灰色 */
  --color-text-weak-gray: #dcdee1;
  /* 文本白色 */
  --color-text-white: #ffffff;

  /* ======================= */

  /* 线条正常态 */
  --color-line-normal: #e1e3e5;
  /* 线条浅色 */
  --color-line-light: #edeff2;

  /* ======================= */

  /* 背景白色 */
  --color-background-white: #ffffff;
  /* 背景灰色 64 */
  --color-background-gray64: #fbfcfe;
  /* 背景灰色 */
  --color-background-gray: #f7f9fc;
  /* 背景浅色灰色 */
  --color-background-light-gray: #f5f7fa;
  /* 背景弱色灰色 */
  --color-background-weak-gray: #f0f2f7;

  /* ======================= */

  /* 背景加深85% */
  --color-background-deepen85: rgba(0, 0, 0, 0.85);
  /* 背景加深75% */
  --color-background-deepen75: rgba(0, 0, 0, 0.75);
  /* 背景加深65% */
  --color-background-deepen65: rgba(0, 0, 0, 0.65);
  /* 背景加深45% */
  --color-background-deepen45: rgba(0, 0, 0, 0.45);
  /* 背景加深25% */
  --color-background-deepen25: rgba(0, 0, 0, 0.25);
  /* 背景加深8% */
  --color-background-deepen8: rgba(0, 0, 0, 0.08);
  /* 背景加深4% */
  --color-background-deepen4: rgba(0, 0, 0, 0.04);

  /* ======================= */

  /* 圆角 */
  --s-radius-xxxl: 36px;
  --s-radius-xxl: 32px;
  --s-radius-xl: 24px;
  --s-radius-l: 20px;
  --s-radius-m: 16px;
  --s-radius-s: 12px;
  --s-radius-xs: 10px;
  --s-radius-xxs: 8px;
  --s-radius-xxs-1: 6px;
  --s-radius-xxxs: 4px;
  --s-radius-xs1: 0 10px 10px 0;
  --s-radius-xs2: 10px 0 0 10px;

  /* ======================= */

  /* S1（方向向下）阴影 */
  --shadow-box-down-normal: 0px 4px 16px 0px rgba(37, 41, 49, 0.06);


  /* S2（方向向下）阴影 */
  --shadow-box-down-medium: 0px 4px 16px 0px rgba(37, 41, 49, 0.08);
  /* S3（方向向下）阴影 */
  --shadow-box-down-large: 0px 8px 32px 0px rgba(37, 41, 49, 0.08);

  /* S1（方向向上）阴影 */
  --shadow-box-up-nomal: 0px -4px 16px 0px rgba(37, 41, 49, 0.06);
  /* S2（方向向上）阴影 */
  --shadow-box-up-medium: 0px -4px 16px 0px rgba(37, 41, 49, 0.08);
  /* S3（方向向上）阴影 */
  --shadow-box-up-large: 0px -8px 32px 0px rgba(37, 41, 49, 0.08);

  /* S1（方向向左）阴影 */
  --shadow-box-left-normal: -4px 0px 16px 0px rgba(37, 41, 49, 0.06);
  /* S2（方向向左）阴影 */
  --shadow-box-left-medium: -4px 0px 16px 0px rgba(37, 41, 49, 0.08);
  /* S3（方向向左）阴影 */
  --shadow-box-left-large: -8px 0px 32px 0px rgba(37, 41, 49, 0.08);

  /* S1（方向向右）阴影 */
  --shadow-box-right-normal: 4px 0px 16px 0px rgba(37, 41, 49, 0.06);
  /* S2（方向向右）阴影 */
  --shadow-box-right-medium: 4px 0px 16px 0px rgba(37, 41, 49, 0.08);
  /* S3（方向向右）阴影 */
  --shadow-box-right-large: 8px 0px 32px 0px rgba(37, 41, 49, 0.08);

  /* 悬浮按钮用 */
  --shadow-button-xuanfu:
    0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 4px 6px -4px rgba(0, 0, 0, 0.04),
    0px 9px 28px 8px rgba(0, 0, 0, 0.04);
  /* 下拉菜单用 */
  --shadow-Dropdown: 0px 0px 4px 0px rgba(0, 0, 0, 0.02),
    0px 6px 10px 0px rgba(47, 53, 64, 0.1);
  /* 气泡卡片用 */
  --s-shadow-Popover: 0px -5px 8px 0px rgba(0, 0, 0, 0.01),
    0px 6px 14px 0px rgba(37, 41, 49, 0.1);
  /* 分段器用 */
  --s-shadow-Segmented: 0px 2px 6px 0px rgba(0, 0, 0, 0.03),
    0px 1px 4px 0px rgba(0, 0, 0, 0.06);
  /* 弹窗用 */
  --shadow-model: 0px 10px 14px -4px rgba(0, 0, 0, 0.04),
    0px 4px 10px -4px rgba(0, 0, 0, 0.06);

  /* 间距 */
  --spacing-24: 24px;
  --spacing-16: 16px;
  --spacing-12: 12px;
  --spacing-8: 8px;
  --spacing-6: 6px;
  --spacing-4: 4px;
  --spacing-2: 2px;

  /* ======================= */
  /* 字号、行高、字重 */
  /* 字号：--size-text-{数字} 表示字号 数字 px */
  /* 行高：--size-text-line-height-{数字} 表示行高 数字 px */
  /* ======================= */
  --size-text-10: 10px;
  --size-text-11: 11px;
  --size-text-12: 12px;
  --size-text-13: 13px;
  --size-text-14: 14px;
  --size-text-16: 16px;
  --size-text-18: 18px;
  --size-text-20: 20px;
  --size-text-22: 22px;
  --size-text-24: 24px;
  --size-text-28: 28px;
  --size-text-32: 32px;
  --size-text-36: 36px;
  --size-text-40: 40px;
  --size-text-44: 44px;
  --size-text-48: 48px;
  --size-text-52: 52px;
  --size-text-56: 56px;
  --size-text-60: 60px;
  --size-text-64: 64px;



  --size-text-line-height-16: 16px;
  --size-text-line-height-18: 18px;
  --size-text-line-height-20: 20px;
  --size-text-line-height-22: 22px;
  --size-text-line-height-24: 24px;
  --size-text-line-height-26: 26px;
  --size-text-line-height-28: 28px;
  --size-text-line-height-30: 30px;
  --size-text-line-height-32: 32px;
  --size-text-line-height-34: 34px;
  --size-text-line-height-36: 36px;
  --size-text-line-height-40: 40px;
  --size-text-line-height-44: 44px;
  --size-text-line-height-48: 48px;
  --size-text-line-height-52: 52px;
  --size-text-line-height-56: 56px;
  --size-text-line-height-60: 60px;
  --size-text-line-height-64: 64px;

  /* 字重 */
  --size-text-regular: 400;
  --size-text-medium: 500;
  --size-text-bold: 600;

  /* 兼容当前页面旧变量（后续可逐步替换） */
  --bg: var(--color-background-gray64);
  --text: var(--color-text-black);
  --muted: var(--color-text-gray);
  --primary-1: #3276ff;
  --primary-2: #794eff;
  --line: var(--color-line-normal);
  --white: var(--color-text-white);
}

/* 字体组合工具类（字号 / 行高 / 字重） */

.text-64-medium {
  font-size: var(--size-text-64);
  line-height: var(--size-text-line-height-64);
  font-weight: var(--size-text-medium);
}

.text-64-regular {
  font-size: var(--size-text-64);
  line-height: var(--size-text-line-height-64);
  font-weight: var(--size-text-regular);
}


.text-60-medium {
  font-size: var(--size-text-60);
  line-height: var(--size-text-line-height-64);
  font-weight: var(--size-text-medium);
}

.text-60-regular {
  font-size: var(--size-text-60);
  line-height: var(--size-text-line-height-64);
  font-weight: var(--size-text-regular);
}
.text-56-medium {
  font-size: var(--size-text-56);
  line-height: var(--size-text-line-height-60);
  font-weight: var(--size-text-medium);
}

.text-56-regular {
  font-size: var(--size-text-56);
  line-height: var(--size-text-line-height-60);
  font-weight: var(--size-text-regular);
}
.text-52-medium {
  font-size: var(--size-text-52);
  line-height: var(--size-text-line-height-60);
  font-weight: var(--size-text-medium);
}

.text-52-regular {
  font-size: var(--size-text-52);
  line-height: var(--size-text-line-height-60);
  font-weight: var(--size-text-regular);
}
.text-32-medium {
  font-size: var(--size-text-32);
  line-height: var(--size-text-line-height-40);
  font-weight: var(--size-text-medium);
}

.text-32-regular {
  font-size: var(--size-text-32);
  line-height: var(--size-text-line-height-40);
  font-weight: var(--size-text-regular);
}

.text-36-bold {
  font-size: var(--size-text-36);
  line-height: var(--size-text-line-height-44);
  font-weight: var(--size-text-bold);
}

.text-36-medium {
  font-size: var(--size-text-36);
  line-height: var(--size-text-line-height-44);
  font-weight: var(--size-text-medium);
}

.text-36-regular {
  font-size: var(--size-text-36);
  line-height: var(--size-text-line-height-44);
  font-weight: var(--size-text-regular);
}

.text-40-medium {
  font-size: var(--size-text-40);
  line-height: var(--size-text-line-height-48);
  font-weight: var(--size-text-medium);
}

.text-40-regular {
  font-size: var(--size-text-40);
  line-height: var(--size-text-line-height-48);
  font-weight: var(--size-text-regular);
}

.text-44-bold {
  font-size: var(--size-text-44);
  line-height: var(--size-text-line-height-52);
  font-weight: var(--size-text-bold);
}

.text-44-medium {
  font-size: var(--size-text-44);
  line-height: var(--size-text-line-height-52);
  font-weight: var(--size-text-medium);
}

.text-44-regular {
  font-size: var(--size-text-44);
  line-height: var(--size-text-line-height-52);
  font-weight: var(--size-text-regular);
}

.text-48-medium {
  font-size: var(--size-text-48);
  line-height: var(--size-text-line-height-56);
  font-weight: var(--size-text-medium);
}

.text-48-regular {
  font-size: var(--size-text-48);
  line-height: var(--size-text-line-height-56);
  font-weight: var(--size-text-regular);
}


.text-28-medium {
  font-size: var(--size-text-28);
  line-height: var(--size-text-line-height-34);
  font-weight: var(--size-text-medium);
}

.text-24-medium {
  font-size: var(--size-text-24);
  line-height: var(--size-text-line-height-32);
  font-weight: var(--size-text-medium);
}

.text-24-regular {
  font-size: var(--size-text-24);
  line-height: var(--size-text-line-height-32);
  font-weight: var(--size-text-regular);
}

.text-22-medium {
  font-size: var(--size-text-22);
  line-height: var(--size-text-line-height-30);
  font-weight: var(--size-text-medium);
}

.text-22-regular {
  font-size: var(--size-text-22);
  line-height: var(--size-text-line-height-30);
  font-weight: var(--size-text-regular);
}

.text-20-medium {
  font-size: var(--size-text-20);
  line-height: var(--size-text-line-height-28);
  font-weight: var(--size-text-medium);
}

.text-18-medium {
  font-size: var(--size-text-18);
  line-height: var(--size-text-line-height-26);
  font-weight: var(--size-text-medium);
}

.text-20-regular {
  font-size: var(--size-text-20);
  line-height: var(--size-text-line-height-28);
  font-weight: var(--size-text-regular);
}

.text-16-medium {
  font-size: var(--size-text-16);
  line-height: var(--size-text-line-height-26);
  font-weight: var(--size-text-medium);
}

.text-16-regular {
  font-size: var(--size-text-16);
  line-height: var(--size-text-line-height-26);
  font-weight: var(--size-text-regular);
}

.text-14-medium {
  font-size: var(--size-text-14);
  line-height: var(--size-text-line-height-22);
  font-weight: var(--size-text-medium);
}

.text-14-regular {
  font-size: var(--size-text-14);
  line-height: var(--size-text-line-height-22);
  font-weight: var(--size-text-regular);
}

.text-13-regular {
  font-size: var(--size-text-13);
  line-height: var(--size-text-line-height-20);
  font-weight: var(--size-text-regular);
}

.text-12-medium {
  font-size: var(--size-text-12);
  line-height: var(--size-text-line-height-18);
  font-weight: var(--size-text-medium);
}

.text-12-regular {
  font-size: var(--size-text-12);
  line-height: var(--size-text-line-height-18);
  font-weight: var(--size-text-regular);
}


/* 按钮规范 */
.btn {
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-small {
  min-width: 108px;
  height: 40px;
}

/* M号主按钮规范（text-14-regular） */
.btn-m {
  font-size: var(--size-text-14);
  line-height: var(--size-text-line-height-22);
  font-weight: var(--size-text-regular);
  padding: 7px 16px;
  gap: 2px;
}

.btn-m .btn-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* L号主按钮规范 */
.btn-l {
  font-size: var(--size-text-16);
  line-height: var(--size-text-line-height-26);
  font-weight: var(--size-text-regular);
  padding: 8px 16px;
  gap: 2px;
}

.btn-l .btn-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-primary {
  background: linear-gradient(90deg, #3276ff 0%, #794eff 99%);
  color: #fff;
  box-shadow: none;
  font-size: var(--size-text-14);
  line-height: var(--size-text-line-height-22);
  font-weight: var(--size-text-regular);
  padding: 7px 16px;
}

.btn-primary.btn-m {
  font-size: var(--size-text-14);
  line-height: var(--size-text-line-height-22);
  font-weight: var(--size-text-regular);
  padding: 7px 16px;
}

.btn-primary.btn-l {
  font-size: var(--size-text-16);
  line-height: var(--size-text-line-height-26);
  font-weight: var(--size-text-regular);
  padding: 8px 16px;
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: var(--shadow-box-down-large);
}

/* L号三级按钮规范 */
.btn-tertiary {
  background: #fff;
  color: var(--color-text-black);
  border: 1px solid var(--color-line-normal);
}

.btn-tertiary:hover {
  box-shadow: var(--shadow-box-down-medium);
}