html {
  scroll-behavior: smooth;
}

:root {
  --header-height: 3.5rem;
  
  /* 基础背景色系 */
  --body-color: #FAFBFC;
  --body-color-alt: #F1F5F9;
  --container-color: #FFFFFF;
  --border-color: #E2E8F0;
  --border-color-light: #F1F5F9;

  /* 主色系 (这是全局默认的橙色) */
  --primary-hue: 33;
  --primary-color: #FA8C16;
  --primary-color-alt: #FF6B35;
  --primary-color-light: rgba(250, 140, 22, 0.1);
  --primary-color-lighter: rgba(250, 140, 22, 0.05);
  --primary-color-secondary: rgba(250, 140, 22, 0.7);

  /* 辅色系 */
  --secondary-color: #0EA5E9;
  --secondary-color-light: #5BBDDD;
  --secondary-color-lighter: rgba(14, 165, 233, 0.1);

  /* 点缀色系 */
  --accent-purple: #8B5CF6;
  --accent-green: #10B981;
  --accent-red: #EF4444;

  /* 渐变色系 */
  --gradient-primary: linear-gradient(135deg, #FA8C16, #FF6B35);
  --gradient-secondary: linear-gradient(135deg, #0EA5E9, #5BBDDD);

  /* 文字色系 */
  --title-color: #0F172A;
  --text-color: #475569;
  --text-color-light: #94A3B8;

  /* 字体 */
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --h1-font-size: 2.25rem;
  --h2-font-size: 1.5rem;
  --h3-font-size: 1.25rem;
  --normal-font-size: 1rem;
  --small-font-size: .875rem;
  --smaller-font-size: .813rem;

  /* 间距 */
  --mb-0-25: .25rem;
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  --mb-3: 3rem;

  /* 圆角 */
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --radius-pill: 50px;

  /* 阴影 */
  --shadow-light: 0 4px 15px rgba(15, 23, 42, 0.08);
  --shadow-medium: 0 6px 20px rgba(15, 23, 42, 0.12);
  --shadow-strong: 0 8px 25px rgba(15, 23, 42, 0.15);
  --shadow-button-primary: 0 4px 15px rgba(250, 140, 22, 0.4);

  --z-fixed: 100;
}

/* ============================================================ */
/* 夜间模式 */
/* ============================================================ */
body.dark-mode {
  /* 基础背景色系 - 深色 */
  --body-color: #0F172A;
  --body-color-alt: #1E293B;
  --container-color: #1E293B;
  --border-color: #334155;
  --border-color-light: #334155;

  /* 主色系保持不变，但调整透明度背景 */
  --primary-color-light: rgba(250, 140, 22, 0.15);
  --primary-color-lighter: rgba(250, 140, 22, 0.08);

  /* 辅色系透明度调整 */
  --secondary-color-lighter: rgba(14, 165, 233, 0.15);

  /* 文字色系 - 深色模式 */
  --title-color: #F1F5F9;
  --text-color: #CBD5E1;
  --text-color-light: #94A3B8;

  /* 阴影 - 深色模式 */
  --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-strong: 0 8px 25px rgba(0, 0, 0, 0.5);
  --shadow-button-primary: 0 4px 15px rgba(250, 140, 22, 0.3);
}

/* 深色模式下的页面头部渐变背景 */
body.dark-mode .page-header {
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
}

/* 深色模式下的footer */
body.dark-mode .footer {
  background-color: #1E293B;
  border-top-color: #334155;
}

/* 深色模式下的header滚动效果 */
body.dark-mode .header-scrolled {
  background-color: hsla(222, 47%, 11%, 0.9);
}

@media screen and (min-width: 992px) {
  :root {
      --h1-font-size: 2.75rem;
      --h2-font-size: 1.75rem;
      --h3-font-size: 1.375rem;
      --normal-font-size: 1.063rem;
      --small-font-size: .938rem;
  }
}

/* BASE */
*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3 {
  color: var(--title-color);
  font-weight: 600;
  transition: color 0.3s ease;
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; outline: none; font-family: inherit; }

/* REUSABLE CLASSES */
.container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.section {
  padding-top: 4.5rem;
  padding-bottom: 2.5rem;
}

/* HEADER - MODIFIED FOR BLUR EFFECT */
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: transparent;
  transition: background-color .4s, box-shadow .4s;
}

.header-scrolled {
  background-color: hsla(210, 40%, 98%, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-light);
}

.nav__container {
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.nav__logo {
  display: flex;
  align-items: center;
  column-gap: .5rem;
  color: var(--title-color);
  font-weight: 600;
  flex-shrink: 0; 
}

.nav__logo-icon {
  height: 28px;
  flex-shrink: 0;
}

.nav__logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  font-style: italic;
  color: var(--primary-color);
  white-space: nowrap;
  line-height: 1.2;
  padding: 2px 0;
  letter-spacing: 0.5px;
}

/* 夜间模式切换按钮 */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-color-lighter);
  color: var(--primary-color);
  margin-left: auto;
  margin-right: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.theme-toggle:hover {
  background-color: var(--primary-color-light);
  border-color: var(--primary-color);
  transform: rotate(15deg);
}

.theme-toggle i {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.theme-toggle:active i {
  transform: scale(0.9);
}

.nav__back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  transition: all 0.3s;
}

.nav__back:hover {
  background-color: var(--primary-color-lighter);
  color: var(--primary-color);
}

.nav__back i {
  font-size: 1.2rem;
}

/* PAGE HEADER */
.page-header {
  padding-top: calc(var(--header-height) + 2.5rem);
  padding-bottom: 3rem;
  background: linear-gradient(135deg, #FCF2E6 0%, #FFF5E6 100%);
  border-bottom: 1px solid var(--primary-color-lighter);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.page-header__content {
  text-align: center;
}

.page-header__title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  color: var(--title-color);
  margin-bottom: var(--mb-1);
}

.page-header__subtitle {
  font-size: var(--normal-font-size);
  color: var(--text-color);
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: var(--mb-2-5);
}

.page-header__stats {
  display: flex;
  justify-content: center;
  gap: var(--mb-2);
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--container-color);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-light);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.stat-item i {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.stat-item__value {
  font-size: var(--h3-font-size);
  font-weight: 700;
  color: var(--primary-color);
}

.stat-item__label {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

/* PAPERS LIST */
.papers-list {
  background-color: var(--body-color);
}

.year-group {
  margin-bottom: var(--mb-3);
  background-color: var(--container-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-color);
  transition: all 0.3s;
}

.year-group:hover {
  box-shadow: var(--shadow-medium);
}

.year-header {
  background: var(--gradient-primary);
  padding: var(--mb-1-5) var(--mb-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.year-header__left {
  display: flex;
  align-items: center;
  gap: var(--mb-1);
}

.year-header__icon {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: white;
}

.year-header__title {
  font-size: var(--h2-font-size);
  color: white;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.year-header__count {
  font-size: var(--small-font-size);
  color: rgba(255, 255, 255, 0.9);
}

.year-header__toggle {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.year-header__toggle i {
  font-size: 1.5rem;
  color: white;
  transition: transform 0.3s;
}

.year-group.expanded .year-header__toggle i {
  transform: rotate(180deg);
}

.year-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0;
}

.year-group.expanded .year-content {
  max-height: 2000px;
}

.papers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--mb-1-5);
  padding: var(--mb-2);
}

.paper-card {
  background-color: var(--body-color-alt);
  border-radius: var(--radius-lg);
  padding: var(--mb-1-5);
  border: 2px solid var(--border-color-light);
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}

.paper-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 1;
  z-index: 1;
}

/* 深色模式下增强卡片边框可见性 */
body.dark-mode .paper-card {
  border-color: #334155;
}

body.dark-mode .paper-card:hover {
  border-color: var(--primary-color);
}

.paper-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
  border-color: var(--primary-color);
  background-color: var(--container-color);
}

.paper-card__header {
  display: flex;
  align-items: center;
  gap: var(--mb-1);
  margin-bottom: var(--mb-1-5);
  flex-grow: 1;
}

.paper-card__icon {
  width: 45px;
  height: 45px;
  background: var(--gradient-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  flex-shrink: 0;
}

.paper-card__title {
  font-size: var(--h3-font-size);
  color: var(--title-color);
  font-weight: 600;
  line-height: 1.4;
}

.paper-card__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.paper-card__action {
  flex: 1;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: var(--normal-font-size);
  font-weight: 500;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--gradient-primary);
  color: white;
}

.paper-card__action:hover {
  box-shadow: var(--shadow-button-primary);
  transform: translateY(-2px);
}

/* 🔧 修改：隐藏滑动提示,仅保留圆点指示器 */
.swiper-indicator {
  display: none;
}

.swipe-hint {
  display: none;
}

/* FOOTER */
.footer {
  background-color: #F8FAFC;
  padding: 3rem 0 1.5rem;
  border-top: 1px solid var(--border-color);
  text-align: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.footer__copy {
  color: var(--text-color-light);
  font-size: var(--small-font-size);
}

/* SCROLL UP */
.scrollup {
  position: fixed;
  right: 1rem;
  bottom: -30%;
  background: var(--gradient-primary);
  opacity: .9;
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  z-index: 50;
  transition: .4s;
  box-shadow: var(--shadow-button-primary);
}

.scrollup:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.scrollup__icon {
  font-size: 1.2rem;
  color: #fff;
}

.show-scroll {
  bottom: 3rem;
}

/* FADE IN ANIMATION */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================ */
/* 🔧 核心修改：移动端卡片居中滑动优化 */
/* ============================================================ */
@media screen and (max-width: 767px) {
  .page-header {
      padding-top: calc(var(--header-height) + 1.5rem);
      padding-bottom: 2.5rem;
  }
  
  .page-header__title {
      font-size: 1.75rem;
  }
  
  .page-header__stats {
      gap: var(--mb-1);
  }
  
  .stat-item {
      padding: 0.6rem 1rem;
  }
  
  .stat-item i {
      font-size: 1.25rem;
  }
  
  .year-header {
      padding: var(--mb-1) var(--mb-1-5);
  }
  
  .year-header__icon {
      width: 40px;
      height: 40px;
      font-size: 1.5rem;
  }
  
  .year-header__title {
      font-size: var(--h3-font-size);
  }
  
  .year-content {
      padding-bottom: 0;
  }

  /* 🔧 核心优化：使用 CSS scroll-snap 实现卡片居中对齐和单卡片滑动 */
  .papers-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      gap: var(--mb-1);
      /* 🔧 修改：添加左右padding实现首尾卡片居中 */
      padding: var(--mb-1-5) calc((100vw - 80vw) / 2);
      scrollbar-width: none;
      -ms-overflow-style: none;
  }
  
  .papers-grid::-webkit-scrollbar {
      display: none;
  }

  /* 🔧 核心优化：卡片居中对齐 */
  .paper-card {
      flex: 0 0 80vw;
      max-width: 80vw;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      min-height: 180px;
  }
  
  .nav__back span {
      display: none;
  }

  .theme-toggle {
      width: 36px;
      height: 36px;
      margin-right: 0.25rem;
  }

  .theme-toggle i {
      font-size: 1.1rem;
  }

  /* 🔧 修改：显示圆点指示器 */
  .swiper-indicator {
      display: flex;
      justify-content: center;
      gap: 6px;
      padding: var(--mb-1) 0;
  }

  .swiper-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--border-color);
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
  }
  
  /* 扩大点击区域但不影响视觉效果 */
  .swiper-dot::before {
      content: '';
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
  }

  .swiper-dot.active {
      width: 24px;
      border-radius: 4px;
      background-color: var(--primary-color);
  }
  
  /* 🔧 修改：完全隐藏滑动提示文字 */
  .swipe-hint {
      display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .container {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
  }
}

@media screen and (min-width: 992px) {
  .container {
      max-width: 968px;
  }
  
  .papers-grid {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1200px) {
  .container {
      max-width: 1140px;
  }
  
  .papers-grid {
      grid-template-columns: repeat(3, 1fr);
  }
}

/* =================================================================== */
/* ============== 六级蓝色主题 (仅应用于年份列表) ============== */
/* =================================================================== */
.page-header.theme-cet6-header {
  --primary-color: #0EA5E9;
}

.papers-list.theme-cet6-list {
  --primary-color: #0EA5E9;
  --primary-color-alt: #5BBDDD;
  --primary-color-light: rgba(14, 165, 233, 0.1);
  --primary-color-lighter: rgba(14, 165, 233, 0.05);
  --primary-color-secondary: rgba(14, 165, 233, 0.7);
  --gradient-primary: linear-gradient(135deg, #0EA5E9, #5BBDDD);
  --shadow-button-primary: 0 4px 15px rgba(14, 165, 233, 0.4);
}

/* 🔧 修复：使用类名替代 :has() 伪类，提升Android兼容性 */
body.has-cet6-theme .scrollup {
  background: linear-gradient(135deg, #0EA5E9, #0284C7) !important;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4) !important;
}

/* 深色模式下的六级蓝色主题优化 */
body.dark-mode .papers-list.theme-cet6-list {
  --primary-color-light: rgba(14, 165, 233, 0.15);
  --primary-color-lighter: rgba(14, 165, 233, 0.08);
}

/* 深色模式下六级主题的卡片边框增强 */
body.dark-mode .papers-list.theme-cet6-list .paper-card {
  border-color: #334155;
}

body.dark-mode .papers-list.theme-cet6-list .paper-card:hover {
  border-color: #0EA5E9;
}