/* ========================================
   全局样式重置（统一浏览器默认表现）
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  min-height: 100vh;
}

ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
input, button { font: inherit; border: none; outline: none; background: none; }
a { text-decoration: none; color: inherit; }

/* ========================================
   设计令牌 Design Tokens（全局统一视觉）
   ======================================== */
:root {
  /* 颜色系统 */
  --color-primary: #007AFF;
  --color-primary-light: rgba(0, 122, 255, 0.12);
  --color-primary-hover: rgba(0, 122, 255, 0.16);
  --color-danger: #ff3b30;
  --color-success: #34c759;

  --color-text-primary: #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-tertiary: #86868b;

  --color-bg-page: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
  --color-bg-glass: rgba(255, 255, 255, 0.72);
  --color-bg-card: rgba(255, 255, 255, 0.85);
  --color-border-separator: rgba(0, 0, 0, 0.06);
  --color-bg-search: rgba(118, 118, 128, 0.12);

  /* 间距系统（8px栅格） */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 44px;

  /* 圆角系统 */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* 阴影系统 */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.06);

  /* 动画 */
  --transition-base: all 0.2s ease;
  --transition-slow: all 0.3s ease;

  /* 布局常量 */
  --navbar-height-mobile: 72px;
  --navbar-width-desktop: 220px;
  --content-max-width: 1400px;
}

/* ========================================
   通用工具类（高频复用原子样式）
   ======================================== */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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