/* ===== Geist 中文 · Light 主题 =====
 * 基于 Vercel Geist 设计系统中文适配版
 * 字体: PingFang SC → Noto Sans SC → Microsoft YaHei
 * 字间距: 0（中文不支持负字间距）
 * 行高: 1.6-1.8x（方块字需要更多呼吸空间）
 * 字重: 400/600 收敛，不用 300 细体
 */

/* ===== CSS 变量 · Design Tokens ===== */
:root {
  /* Colors */
  --primary: #171717;
  --secondary: #4d4d4d;
  --tertiary: #006bff;
  --bg-100: #ffffff;
  --bg-200: #fafafa;
  --gray-100: #f2f2f2;
  --gray-200: #ebebeb;
  --gray-300: #e6e6e6;
  --gray-400: #eaeaea;
  --gray-500: #c9c9c9;
  --gray-600: #a8a8a8;
  --gray-700: #8f8f8f;
  --gray-800: #7d7d7d;
  --gray-900: #4d4d4d;
  --gray-1000: #171717;
  --gray-a-200: #00000015;
  --gray-a-400: #00000014;
  --gray-a-500: #00000036;
  --gray-a-600: #0000003d;
  --gray-a-700: #00000070;
  --blue-100: #f0f7ff;
  --blue-200: #e9f4ff;
  --blue-700: #006bff;
  --blue-800: #0059ec;
  --red-100: #ffeeef;
  --red-700: #fc0035;
  --red-800: #ea001d;
  --amber-100: #fff6de;
  --amber-700: #ffae00;
  --green-100: #ecfdec;
  --green-700: #28a948;
  --brand-red: #fa5151;
  --brand-red-dark: #d23030;
  --wechat-green: #07c160;

  /* Typography */
  --font-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "Source Code Pro", monospace;

  /* Spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* Rounded */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 9999px;

  /* Shadows (克制) */
  --shadow-card: 0 2px 2px rgba(0, 0, 0, 0.04);
  --shadow-popover: 0 1px 1px rgba(0,0,0,0.02), 0 4px 8px -4px rgba(0,0,0,0.04), 0 16px 24px -8px rgba(0,0,0,0.06);
  --shadow-modal: 0 1px 1px rgba(0,0,0,0.02), 0 8px 16px -4px rgba(0,0,0,0.04), 0 24px 32px -8px rgba(0,0,0,0.06);

  /* Motion */
  --ease: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --dur-state: 150ms;
  --dur-pop: 200ms;
  --dur-modal: 300ms;

  /* Focus ring */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--blue-700);
}

/* ===== Dark Theme =====
 * 使用相同 token 名称，反转为暗色值
 * 通过 [data-theme="dark"] 覆盖
 */
[data-theme="dark"] {
  --primary: #ededed;
  --secondary: #a8a8a8;
  --tertiary: #48aeff;
  --bg-100: #0a0a0a;
  --bg-200: #111111;
  --gray-100: #171717;
  --gray-200: #1f1f1f;
  --gray-300: #2a2a2a;
  --gray-400: #333333;
  --gray-500: #4d4d4d;
  --gray-600: #6e6e6e;
  --gray-700: #8f8f8f;
  --gray-800: #a8a8a8;
  --gray-900: #c9c9c9;
  --gray-1000: #ededed;
  --gray-a-200: #ffffff15;
  --gray-a-400: #ffffff14;
  --gray-a-600: #ffffff3d;
  --gray-a-700: #ffffff70;
  --blue-100: #002359;
  --blue-200: #003d8c;
  --blue-700: #48aeff;
  --blue-800: #006bff;
  --red-100: #47000c;
  --red-700: #ff676d;
  --red-800: #ff676d;
  --amber-100: #561900;
  --amber-700: #ffdc73;
  --green-100: #003a00;
  --green-700: #4ce15e;
  --brand-red: #fa5151;
  --brand-red-dark: #fa5151;
  --wechat-green: #07c160;
  --shadow-card: 0 2px 2px rgba(0, 0, 0, 0.2);
  --shadow-popover: 0 1px 1px rgba(0,0,0,0.1), 0 4px 8px -4px rgba(0,0,0,0.2), 0 16px 24px -8px rgba(0,0,0,0.3);
  --shadow-modal: 0 1px 1px rgba(0,0,0,0.1), 0 8px 16px -4px rgba(0,0,0,0.2), 0 24px 32px -8px rgba(0,0,0,0.4);
  --focus-ring: 0 0 0 2px var(--bg-100), 0 0 0 4px var(--blue-700);
}

/* ===== 基础重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg-100);
  color: var(--gray-1000);
  line-height: 1.6; /* 中文正文 1.6x */
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 顶部居中大标题 ===== */
.brand-title {
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0; /* 中文归零 */
  line-height: 1.2;
  margin-bottom: var(--sp-6);
  color: var(--gray-1000);
}
.brand-accent {
  color: var(--tertiary);
}

/* ===== Hero 区域（极简，非渐变） ===== */
.hero {
  background: var(--bg-100);
  color: var(--gray-1000);
  padding: var(--sp-16) var(--sp-6) var(--sp-10);
  position: relative;
  border-bottom: 1px solid var(--gray-200);
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.hero-tag {
  display: block;
  text-align: center;
  background: var(--gray-100);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 auto var(--sp-4);
  width: fit-content;
  color: var(--gray-900);
}
.hero-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px; /* copy-16: 1.75x */
  color: var(--gray-900);
  max-width: 800px;
  margin: 0 auto var(--sp-4);
  text-align: center;
}
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--gray-900);
}
.hero-stat strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-1000);
}
.hero-themes {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.hero-themes span {
  background: var(--gray-100);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: 12px;
  line-height: 18px;
  color: var(--gray-900);
}

/* ===== 顶部操作区（主题切换 + 收藏入口）===== */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

/* 主题切换按钮 */
.theme-toggle {
  background: var(--bg-100);
  border: 1px solid var(--gray-300);
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.theme-toggle:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}
.theme-toggle:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
/* 浅色模式显示月亮（点击切到深色），深色模式显示太阳 */
.theme-icon-light, .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-dark { display: inline; }
[data-theme="dark"] .theme-icon-light { display: inline; }

/* 收藏入口 */
.collection-entry {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--bg-100);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  color: var(--gray-1000);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  border: 1px solid var(--gray-300);
  transition: background var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.collection-entry:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}
.collection-entry:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.collection-icon { font-size: 14px; }
.collection-count {
  background: var(--gray-1000);
  color: var(--bg-100);
  padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  min-width: 20px;
  text-align: center;
}

/* ===== 收藏抽屉 ===== */
.collection-drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
}
.collection-drawer[aria-hidden="false"] { display: block; }
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: var(--gray-a-700);
  animation: fadeIn var(--dur-modal) var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.drawer-content {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  max-width: 440px;
  background: var(--bg-100);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  animation: drawerIn var(--dur-modal) var(--ease);
}
@keyframes drawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.drawer-header {
  padding: var(--sp-6);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-header h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--gray-1000);
}
.drawer-close {
  background: var(--gray-100);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  font-size: 18px;
  color: var(--gray-900);
  cursor: pointer;
  transition: background var(--dur-state) var(--ease);
}
.drawer-close:hover {
  background: var(--gray-200);
  color: var(--gray-1000);
}
.drawer-close:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
}
.drawer-empty {
  text-align: center;
  color: var(--gray-700);
  padding: var(--sp-16) var(--sp-4);
  font-size: 14px;
  line-height: 22px;
}
.drawer-item {
  background: var(--bg-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: box-shadow var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.drawer-item:hover {
  border-color: var(--gray-400);
  box-shadow: var(--shadow-card);
}
.drawer-item-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--gray-1000);
  margin-bottom: var(--sp-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.drawer-item-meta {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--gray-700);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-item-remove {
  background: none;
  border: none;
  color: var(--red-700);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  padding: 0 var(--sp-1);
}
.drawer-item-remove:hover { text-decoration: underline; }

/* ===== 主容器 ===== */
.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6) var(--sp-16);
  position: relative;
  z-index: 2;
}

/* ===== 分类筛选条 ===== */
.filters {
  background: var(--bg-100);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.filter-chip {
  background: var(--bg-100);
  border: 1px solid var(--gray-300);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--gray-900);
  transition: all var(--dur-state) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-sans);
}
.filter-chip:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}
.filter-chip:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.filter-chip.active {
  background: var(--gray-1000);
  color: var(--bg-100);
  border-color: var(--gray-1000);
}
.chip-icon {
  font-size: 14px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== 分类统计条 ===== */
.stats-bar {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.stat-pill {
  background: var(--bg-100);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--gray-200);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--gray-900);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.stat-pill .num {
  font-weight: 600;
  color: var(--gray-1000);
}

/* ===== 卡片网格 ===== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-6);
}
.loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-16) 0;
  color: var(--gray-700);
  font-size: 14px;
  line-height: 22px;
}

.news-card {
  background: var(--bg-100);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}
.news-card:hover {
  border-color: var(--gray-400);
  box-shadow: var(--shadow-popover);
}
.news-card:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.card-color-bar {
  height: 3px;
  width: 100%;
}
.card-body {
  padding: var(--sp-4) var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--gray-700);
  flex-wrap: wrap;
}
.card-category {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.heat-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--red-100);
  color: var(--red-800);
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px; /* heading-16 */
  color: var(--gray-1000);
  margin-bottom: var(--sp-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-summary {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px; /* copy-14: 1.71x */
  color: var(--gray-900);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  flex: 1;
}
.card-ai-hint {
  background: var(--blue-100);
  border-left: 2px solid var(--blue-700);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--gray-900);
  margin-bottom: var(--sp-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-ai-hint::before {
  content: 'AI 关键数据 · ';
  color: var(--blue-700);
  font-weight: 600;
}
.card-footer {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--gray-700);
}
.card-tags-mini {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.card-tag-mini {
  background: var(--gray-100);
  color: var(--gray-900);
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
}

/* ===== 加载更多 ===== */
.load-more-wrap {
  text-align: center;
  margin-top: var(--sp-10);
}
.load-more {
  background: var(--bg-100);
  border: 1px solid var(--gray-300);
  padding: 0 var(--sp-8);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--gray-1000);
  transition: all var(--dur-state) var(--ease);
  font-family: var(--font-sans);
  height: 40px;
}
.load-more:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}
.load-more:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* ===== 详情 Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5, 20px);
}
.modal[aria-hidden="false"] { display: flex; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--gray-a-700);
  animation: fadeIn var(--dur-modal) var(--ease);
}
.modal-content {
  position: relative;
  background: var(--bg-100);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  animation: modalIn var(--dur-modal) var(--ease);
}
@keyframes modalIn {
  from { transform: scale(0.96) translateY(16px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: var(--gray-100);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  font-size: 18px;
  color: var(--gray-900);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-1000);
}
.modal-close:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.modal-header {
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--gray-200);
}
.modal-category {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  margin-bottom: var(--sp-3);
}
.modal-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 34px; /* heading-24 */
  color: var(--gray-1000);
  margin-bottom: var(--sp-3);
  padding-right: var(--sp-8);
}
.modal-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--gray-700);
  flex-wrap: wrap;
}
.modal-meta .dot { color: var(--gray-400); }
.modal-body {
  padding: var(--sp-6) var(--sp-8);
  overflow-y: auto;
  flex: 1;
}
.modal-section {
  margin-bottom: var(--sp-6);
}
.modal-section:last-child { margin-bottom: 0; }
.modal-section-priority {
  background: var(--blue-100);
  border: 1px solid var(--blue-200);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-6);
  margin-left: -24px;
  margin-right: -24px;
  width: calc(100% + 48px);
}
.section-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--gray-1000);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.section-tag {
  background: var(--blue-700);
  color: var(--bg-100);
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}
.ai-key-data {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px; /* copy-14 */
  color: var(--gray-1000);
}
.ai-key-data ul {
  padding-left: 0;
  list-style: none;
}
.ai-key-data li {
  padding-left: var(--sp-5, 20px);
  position: relative;
  margin-bottom: var(--sp-1);
}
.ai-key-data li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--blue-700);
  font-weight: 600;
}
.summary-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px; /* copy-14 */
  color: var(--gray-900);
}
.ai-impact {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--gray-900);
}
.ai-impact p { margin-bottom: var(--sp-2); }
/* AI 解读按钮 */
.ai-interpret-btn {
  background: var(--blue-100);
  color: var(--blue-700);
  border: 1px solid var(--blue-200);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  font-family: var(--font-sans);
  transition: background var(--dur-state) var(--ease);
}
.ai-interpret-btn:hover:not(:disabled) {
  background: var(--blue-200);
}
.ai-interpret-btn:disabled {
  cursor: default;
  opacity: 0.7;
}
.ai-interpret-result {
  margin-top: var(--sp-2);
}
.ai-loading {
  color: var(--gray-700);
  font-style: italic;
}
.ai-error {
  color: var(--red-700);
}
.ai-cursor {
  color: var(--blue-700);
  animation: blink 0.8s steps(2) infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.tag-list .tag-item {
  background: var(--gray-100);
  color: var(--gray-900);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.modal-footer {
  padding: var(--sp-4) var(--sp-8);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.source-link {
  color: var(--blue-700);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
.source-link:hover {
  color: var(--blue-800);
  text-decoration: underline;
}
.source-link:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
/* 按钮：Primary (#171717 填充 + 白字，40px 高，6px 圆角) */
.share-btn {
  background: var(--gray-1000);
  color: var(--bg-100);
  border: 1px solid var(--gray-1000);
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  transition: background var(--dur-state) var(--ease);
  font-family: var(--font-sans);
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.share-btn:hover {
  background: var(--gray-900);
}
.share-btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.share-btn.collected {
  background: var(--amber-100);
  color: var(--amber-700);
  border-color: var(--amber-700);
}

/* ===== 底部 ===== */
.footer {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  background: var(--bg-100);
  border-top: 1px solid var(--gray-200);
}
.footer p { margin: var(--sp-1) 0; }
.footer-source-status {
  margin-bottom: var(--sp-4);
  font-size: 12px;
  line-height: 18px;
  text-align: left;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-200);
  border-radius: var(--r-md);
}
.source-status-summary {
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--sp-2);
}
.source-status-detail {
  color: var(--gray-700);
  line-height: 20px;
  word-break: break-all;
}
.source-status-detail.source-status-failed {
  color: var(--red-700);
}
.source-status-label {
  font-weight: 600;
  color: var(--gray-900);
}
.footer-link {
  color: var(--gray-900);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-state) var(--ease);
}
.footer-link:hover {
  color: var(--gray-1000);
}

/* ===== 响应式 (断点: sm 360, md 600, lg 960, xl 1200) ===== */
@media (max-width: 960px) {
  .news-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 600px) {
  .brand-title { font-size: 32px; line-height: 44px; }
  .hero { padding: var(--sp-10) var(--sp-4) var(--sp-8); }
  .hero-text { font-size: 14px; line-height: 24px; }
  .main { padding: 0 var(--sp-3) var(--sp-10); }
  .news-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  /* 手机端 Modal：居中显示，最多占 3/4 屏幕 */
  .modal { padding: var(--sp-4); }
  .modal-content {
    max-width: 100%;
    max-height: 75vh;
    border-radius: var(--r-lg);
  }
  .modal-header, .modal-body, .modal-footer { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .modal-header { padding-top: var(--sp-6); padding-bottom: var(--sp-4); }
  .modal-footer { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .modal-section-priority { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); }
  .modal-title { font-size: 18px; line-height: 26px; padding-right: var(--sp-6); }
  .filter-chip { font-size: 13px; padding: var(--sp-1) var(--sp-2); }
  .drawer-content { max-width: 100%; }
  .card-body { padding: var(--sp-3) var(--sp-4); }
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--r-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}