/* ============ 设计规范变量 ============ */
:root {
  /* --- 色值：文本 --- */
  --color-text-title: #000000;        /* 标题文本 */
  --color-text-primary: #333333;      /* 一级文本/正文 */
  --color-text-secondary: #666666;    /* 二级文本 */
  --color-text-tertiary: #999999;     /* 三级文本 */
  --color-text-quaternary: #cccccc;   /* 四级文本 */
  --color-text-brand: #2d6fe0;        /* 品牌色文本/线性用色 */
  --color-text-warning: #b80003;      /* 警示色文本 */

  /* --- 色值：品牌 & 警示 --- */
  --color-brand: #3179f5;             /* 品牌色/面性用色 */
  --color-brand-10: rgba(45, 111, 224, 0.1);  /* 品牌色10% */
  --color-warning: #e50004;           /* 警示色/面性用色 */
  --color-warning-10: rgba(229, 0, 4, 0.1);   /* 警示色10% */

  /* --- 色值：背景 --- */
  --color-bg-page: #e0ebff;           /* 页面背景 */
  --color-bg-1: #ffffff;              /* 白色背景 */

  /* --- 色值：灰度 --- */
  --color-border: rgba(0, 0, 0, 0.08);   /* 分割线 */
  --color-border-light: #eeeeee;          /* 分割线2 */
  --color-mask-1: rgba(0, 0, 0, 0.6);    /* 蒙版1 */
  --color-mask-2: rgba(0, 0, 0, 0.3);    /* 蒙版2 */

  /* --- 字号 & 行高 --- */
  --font-size-title-l: 44px;          /* 首页大标题 */
  --line-height-title-l: 64px;
  --font-size-title-m: 36px;          /* 一级标题 */
  --line-height-title-m: 56px;
  --font-size-title-s: 32px;          /* 二级标题 */
  --line-height-title-s: 48px;
  --font-size-body: 28px;             /* 正文 */
  --line-height-body: 42px;
  --font-size-body-s: 24px;           /* 正文/按钮/标签 */
  --line-height-body-s: 36px;
  --font-size-caption: 20px;          /* 辅助文字/标签 */
  --line-height-caption: 28px;

  /* --- 字重 --- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body,
#app {
  height: 100%;
}

body {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-family:
    'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
  background: #3f3f42;
  -webkit-tap-highlight-color: transparent;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.max-box {
  box-sizing: border-box;
  margin-inline: auto;
  
  height: 842px;
  width: 100%;
  max-width: 1792px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 32px;
}

.lx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.lx-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.lx-btn--xl {
  --lx-btn-short-width: 192px;

  height: 72px;
  padding: 0 40px;
  font-size: 30px;
}

.lx-btn--lg {
  --lx-btn-short-width: 168px;

  height: 66px;
  padding: 0 32px;
  font-size: 28px;
}

.lx-btn--md {
  --lx-btn-short-width: 144px;

  height: 60px;
  padding: 0 24px;
  font-size: 24px;
}

.lx-btn--sm {
  --lx-btn-short-width: 104px;

  height: 52px;
  padding: 0 20px;
  font-size: 20px;
}

.lx-btn--short {
  width: var(--lx-btn-short-width);
  padding-right: 0;
  padding-left: 0;
}

.lx-btn--primary {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-bg-1);
}

.lx-btn--secondary {
  border-color: #eef4ff;
  background: #eef4ff;
  color: #5f8fd2;
}

.lx-btn--default {
  border-color: #d9dde5;
  background: #fff;
  color: #2d3138;
}

.lx-btn--outline-primary {
  border-color: #8eb7df;
  background: #fff;
  color: #5f8fd2;
}
