body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f0f2f5; /* 默认浅色模式背景 */
    color: #333; /* 默认浅色模式文字颜色 */
  }

  h2 {
    text-align: center;
  }

  nav {
    text-align: center;
    margin-bottom: 20px;
    padding: 10px 0;
    backdrop-filter: blur(10px); /* 高斯模糊效果 */
    background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed; /* 固定位置 */
    top: 0; /* 固定在顶部 */
    width: 100%; /* 宽度为100% */
    z-index: 1000; /* 确保导航栏在其他内容之上 */
    transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
  }

  nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #000; /* 浅色模式下黑色字体颜色 */
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff; /* 默认浅色模式背景 */
  }

  th,
  td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd; /* 默认浅色模式边框颜色 */
  }

  tr:hover {
    background-color: #f5f5f5; /* 默认浅色模式悬停背景 */
  }

  .search-container {
    text-align: center;
  }

  .search-container input[type="text"] {
    width: 80%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc; /* 默认浅色模式边框颜色 */
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff; /* 默认浅色模式背景 */
    color: #333; /* 默认浅色模式文字颜色 */
  }

  /* 深色模式 */
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #121212; /* 深色模式背景 */
      color: #e0e0e0; /* 深色模式文字颜色 */
    }

    nav {
      backdrop-filter: blur(10px); /* 高斯模糊效果 */
      background-color: rgba(30, 30, 30, 0.5); /* 半透明背景 */
      box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    }

    nav a {
      color: #fff; /* 深色模式下白色字体颜色 */
    }

    table {
      background-color: #1e1e1e; /* 深色模式背景 */
    }

    th,
    td {
      border-bottom: 1px solid #444; /* 深色模式边框颜色 */
    }

    tr:hover {
      background-color: #2d2d2d; /* 深色模式悬停背景 */
    }

    .search-container input[type="text"] {
      border: 1px solid #444; /* 深色模式边框颜色 */
      background-color: #1e1e1e; /* 深色模式背景 */
      color: #e0e0e0; /* 深色模式文字颜色 */
    }
  }

  /* 响应式布局 */
  @media (max-width: 600px) {
    .container {
      padding: 10px;
    }

    h2 {
      font-size: 24px;
    }

    th,
    td {
      padding: 10px;
    }

    .search-container input[type="text"] {
      width: 100%;
    }
  }

  /* 为内容添加顶部内边距，防止被导航栏遮挡 */
  .content {
    padding-top: 200px; /* 与导航栏的高度相匹配 */
  }