<style>
        /* 折叠面板的基本样式 */
        details {
            width: 80%;
            margin: 10px 0 10px 20px; /* 靠左对齐，左边距20px */
            background: #f0f5f5; /* 浅青色背景 */
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            overflow: hidden;
        }

        /* 标题（summary）的样式 */
        summary {
            padding: 12px;
            font-family: "Helvetica", sans-serif;
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50; /* 深蓝灰色文字 */
            cursor: pointer;
            background: #ecf0f1; /* 浅灰色背景 */
            transition: background 0.3s ease;
        }

        /* 标题悬停效果 */
        summary:hover {
            background: #d5dbdb; /* 稍深的灰色 */
        }

        /* 展开时的小箭头样式 */
        summary::-webkit-details-marker {
            color: #e74c3c; /* 红色箭头 */
        }

        /* 内容区域的样式 */
        p {
            padding: 12px;
            margin: 0;
            font-family: "Helvetica", sans-serif;
            font-size: 14px;
            color: #34495e; /* 深蓝灰色文字 */
            line-height: 1.6;
            background: #f0f5f5; /* 与外层一致的浅青色 */
        }
        /*mbx*/
        .breadcrumb {
  list-style: none;
  padding: 10px;
  margin: 0;
  display: flex;
  font-family: Arial, sans-serif;
  white-space: nowrap; /* 防止容器内换行 */
}

.breadcrumb li {
  margin-right: 8px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
  white-space: nowrap; /* 防止文字换行 */
  display: inline-flex; /* 确保内容水平排列 */
  align-items: center; /* 垂直居中 */
  max-width: 150px; /* 限制最大宽度，防止过长 */
  overflow: hidden; /* 隐藏超出内容 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.breadcrumb li a {
  text-decoration: none;
  color: #333;
  display: block; /* 确保链接填充整个 li */
  overflow: hidden; /* 配合省略号 */
  text-overflow: ellipsis; /* 链接文字超出显示省略号 */
}

.breadcrumb li:not(:last-child)::after {
  content: '>';
  margin-left: 10px;
  color: #666;
}

.breadcrumb li:hover {
  border-color: #007bff;
  background-color: #e7f1ff;
}

.breadcrumb li.active {
  border-color: #007bff;
  background-color: #007bff;
  color: white;
}

.breadcrumb li.active a {
  color: white;
}

/* 手机端适配 */
@media (max-width: 768px) {
  .breadcrumb {
    padding: 8px; /* 减少内边距 */
    font-size: 14px; /* 缩小字体 */
  }

  .breadcrumb li {
    padding: 6px 10px; /* 减少内边距 */
    margin-right: 6px; /* 减少项间距 */
    max-width: 100px; /* 手机端进一步限制宽度 */
  }

  .breadcrumb li:not(:last-child)::after {
    margin-left: 8px; /* 调整分隔符间距 */
  }
}
   /* 全局样式 */
    body {
      background: linear-gradient(135deg, #eceaf7, #fefce8);
      font-family: 'Roboto', sans-serif;
      color: #111827;
      min-height: 100vh;
    }

    h1,
    h4 {
      font-weight: 700;
      color: #111827;
    }

    /* 顶部样式 */
    header {
      background-image: url('/static/template/6/nhm.jpg');
      /* 替换为图片背景 */
      background-size: cover;
      /* 图片自适应 */
      background-position: center;
      /* 图片居中 */
      background-repeat: no-repeat;
      /* 禁止重复 */
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      padding: 20px 0;
      margin: 0;
      /* 去除顶部空白 */

    }

    header h1 {
      font-size: 3rem;
      color: #9e8f8f;
      transition: all 0.3s ease;
    }

    header h1:hover {
      color: #f59e0b;
      text-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
    }

    /* 底部样式 */
    footer {

    background: linear-gradient(135deg, #bbbab9, #d8c2a6);
    color: #fff8dc;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px 0;
    margin: 0;
    border: none;
    }





    @media (max-width: 767.98px) {
      header h1 {
        font-size: 2rem;
      }
    }

    /* 交互元素样式 */
    .category-item,
    .hot-search-item {
      text-align: center;
      padding: 10px 6px;
      border: 1px solid #9e925a;
      text-decoration: none;
      white-space: nowrap;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      overflow: hidden;
      background-color: #f8fafc;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .category-item {
      border-radius: 0px;
      color: #000000;
      font-size: clamp(12px, 1.5vw, 14px);
      font-weight: 500;
      padding: 12px 8px;
    }

    .category-item:hover {
      background-color: #f59e0b;
      color: #111111;
      transform: translateY(-3px);
      box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3);
    }

    .hot-search-item {
      border: 1px solid #d1d5db;
      border-radius: 0;
      color: #000000;
      font-size: clamp(12px, 1.5vw, 14px);
      font-weight: 500;
    }

    .hot-search-item:hover {
      background-color: #6b21a8;
      color: #ffffff;
      transform: translateY(-3px);
      box-shadow: 0 8px 16px rgba(107, 33, 168, 0.3);
    }

    .video-item {
      text-decoration: none;
      color: #111827;
      transition: transform 0.3s ease;
    }

    .video-item img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 12px;
      transition: transform 0.3s ease;
    }

    .video-item:hover {
      transform: translateY(-3px);
    }

    .video-item:hover img {
      transform: scale(1.05);
    }

    .video-item:hover p {
      color: #f59e0b;
    }

    /* 广告位样式（仅边框，支持图片自适应） */
    .ad-banner {
      border: 1px solid #dfc8f1;
      min-height: 100px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px 0;
      background: transparent;
      position: relative;
      z-index: 1;
      overflow: visible;
    }

    .ad-banner p {
      color: #111827;
      margin: 0;
      font-size: 1rem;
    }

    .ad-banner img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    /* 搜索框和按钮样式 */
    .input-group {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      overflow: hidden;
    }

    .form-control {
      border: 1px solid #afafaf;
      background-color: #f8fafc;
      transition: all 0.3s ease;
    }

    .form-control:focus {
      border-color: #f59e0b;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
    }

    .search-btn {
      background-color: #b5a1c5;
      border: none;
      border-radius: 30px;
      padding: 8px 15px;
      color: #ffffff;
      font-size: 1rem;
      transition: background-color 0.3s ease;
    }

    .search-btn:hover {
      background-color: #f59e0b;
    }

    /* 手机端调整 */
    @media (max-width: 767.98px) {
      .category-item {
        font-size: clamp(10px, 2vw, 12px);
        padding: 8px 4px;
      }

      .hot-search-item {
        font-size: clamp(10px, 2vw, 12px);
        padding: 8px 4px;
      }

      .video-item img {
        height: 120px;
      }

      .video-item p {
        font-size: clamp(8px, 1.8vw, 10px);
        margin-top: 5px;
      }
    }

    /* 新增容器圆角样式 */
    .category-container {
      border-radius: 16px;
      background: #f3eadd80;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.144);
      padding: 20px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
    }


    /* 增强原有分类项效果 */
    .category-item {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid rgba(158, 146, 90, 0.2);
      background: linear-gradient(145deg, #fce2e2, #e4e7f1);
    }



    h4 {
      /* 基础文字样式 */
      font-size: 1.5rem;
      font-weight: 600;

      /* 渐变背景设置 */
      background-image: linear-gradient(120deg,
          #9bd49e 0%,
          /* 雾蓝色 */
          #dc98e2 25%,
          /* 浅天蓝 */
          #d19477 50%,
          /* 藕荷色 */
          #7861f8 75%
          /* 珊瑚粉 */
        );
      background-size: 300% 100%;

      /* 文字裁剪 */
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;

      /* 动画效果 */
      animation: gradientFlow 12s ease infinite;
      will-change: background-position;
    }
        h3 {
      /* 基础文字样式 */
      font-size: 1.5rem;
      font-weight: 600;

      /* 渐变背景设置 */
      background-image: linear-gradient(120deg,

          #d18614 25%,

          #ac4444 75%
          /* 珊瑚粉 */
        );
      background-size: 300% 100%;

      /* 文字裁剪 */
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;

      /* 动画效果 */
      animation: gradientFlow 12s ease infinite;
      will-change: background-position;
    }

    @keyframes gradientFlow {

      0%,
      100% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }
    }
     /* 页码导航样式 */
    .pagination-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      gap: 8px;
      flex-wrap: nowrap;
    }

    .pagination {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      margin: 0;
      /* Override Bootstrap default margin */
    }

    .page-item {
      margin: 0;
      /* Ensure no margin disrupts alignment */
    }

    .page-item .page-link {
      border: 1px solid rgba(158, 146, 90, 0.2);
      background: linear-gradient(145deg, #fce2e2, #e4e7f1);
      color: #111827;
      font-size: clamp(12px, 1.5vw, 14px);
      font-weight: 500;
      border-radius: 8px;
      padding: 0 12px;
      /* Center text vertically */
      height: 36px;
      /* Fixed height for alignment */
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      min-width: 40px;
      text-align: center;
      line-height: 1.5;
    }

    .page-item .page-link:hover {
      background-color: #f59e0b;
      color: #111111;
      transform: translateY(-3px);
      box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3);
    }

    .page-item.active .page-link {
      background-color: #f59e0b;
      border-color: #f59e0b;
      color: #ffffff;
      box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3);
    }

    .page-item.disabled .page-link {
      background: #e5e7eb;
      border-color: #d1d5db;
      color: #6b7280;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* 跳转容器样式 */
    .jump-container {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
    }

    .jump-input {
      width: 60px;
      height: 36px;
      /* Match page-link height */
      border: 1px solid #afafaf;
      background-color: #f8fafc;
      border-radius: 8px;
      padding: 0 8px;
      font-size: clamp(12px, 1.5vw, 14px);
      transition: all 0.3s ease;
      line-height: 1.5;
      display: flex;
      align-items: center;
    }

    .jump-input:focus {
      border-color: #f59e0b;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
    }

    .jump-btn {
      height: 36px;
      /* Match page-link height */
      background-color: #b5a1c5;
      border: none;
      border-radius: 8px;
      padding: 0 12px;
      color: #ffffff;
      font-size: clamp(12px, 1.5vw, 14px);
      transition: background-color 0.3s ease;
      white-space: nowrap;
      line-height: 1.5;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .jump-btn:hover {
      background-color: #f59e0b;
    }

    @media (max-width: 767.98px) {
      .page-item .page-link {
        font-size: clamp(10px, 2vw, 12px);
        padding: 0 8px;
        min-width: 30px;
        height: 32px;
        /* Consistent height for mobile */
      }

      .jump-input {
        width: 50px;
        font-size: clamp(10px, 2vw, 12px);
        padding: 0 6px;
        height: 32px;
        /* Match mobile page-link */
      }

      .jump-btn {
        font-size: clamp(10px, 2vw, 12px);
        padding: 0 8px;
        height: 32px;
        /* Match mobile page-link */
      }

      .pagination-container {
        gap: 6px;
        /* Tighter spacing for mobile */
      }
    }
 /* 视频详情页样式 */
    .details-container {
      border-radius: 12px;
      background: #f8fafc;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.144);
      padding: 20px;
      margin-bottom: 20px;
      text-align: center;
    }

    .details-image {
      width: 100%;
      max-width: 400px;
      height: auto;
      border-radius: 8px;
      object-fit: contain;
      display: block;
      margin: 0 auto 15px;
    }

    .details-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 10px;
    }

    .details-description {
      font-size: 1rem;
      color: #6b7280;
      margin-bottom: 15px;
    }

    .button-container {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 15px;
    }

    .play-btn,
    .favorite-btn {
      background-color: #b5a1c5;
      border: none;
      border-radius: 8px;
      padding: 8px 16px;
      color: #ffffff;
      font-size: clamp(12px, 1.5vw, 14px);
      font-weight: 500;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }

    .play-btn:hover,
    .favorite-btn:hover {
      background-color: #f59e0b;
      transform: translateY(-3px);
      box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3);
    }


    @media (max-width: 767.98px) {
      .details-container {
        padding: 15px;
      }

      .details-image {
        max-width: 100%;
      }

      .details-title {
        font-size: 1.1rem;
      }

      .details-description {
        font-size: 0.9rem;
      }

      .play-btn,
      .favorite-btn {
        font-size: clamp(10px, 2vw, 12px);
        padding: 6px 12px;
      }

      .button-container {
        gap: 8px;
        margin-top: 10px;
      }
    }
    .aiapp-custom-tag-container {
    display: flex;
    flex-direction: column;     /* 改成垂直排列 */
    gap: 10px;                  /* 标签之间的垂直间距 */
    align-items: flex-start;    /* 标签左对齐（可改 center 或 flex-end） */
    margin-top: 8px;
    }
    .aiapp-custom-tag {
        display: inline-block;
        border: 1px solid #28a745; /* 绿色边框 */
        border-radius: 4px; /* 圆角 */
        padding: 2px 6px; /* 内边距 */
    }
    .aiapp-custom-tag-link {
        text-decoration: none; /* 取消下划线 */
        color: red; /* 继承父元素颜色 */
    }
    /* 可选：鼠标悬停效果 */
    .aiapp-custom-tag:hover {
        background-color: #f5f5f5; /* 悬停时背景变浅灰 */
    }
    .aiapp-custom-tag-title {
        font-size: 14px; /* 保留字符大小 14px */
        font-family: 'Segoe UI', 'Arial', sans-serif; /* 现代字体 */
        color: #2c3e50; /* 深蓝灰色，优雅且专业 */
        background: linear-gradient(135deg, #e8f0fe 0%, #f5f6f5 100%); /* 渐变背景 */
        padding: 6px 12px; /* 内边距，增加立体感 */
        border-left: 4px solid #e74c3c; /* 左侧红色装饰条 */
        border-radius: 4px; /* 圆角 */
        margin-bottom: 0.2rem; /* 稍增加与标签容器的间距 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加层次 */
        display: inline-block; /* 使标题区域自适应内容宽度 */
    }
    .aiapp-custom-tag-title .aiapp-brand {
        font-weight: 700; /* 更强的加粗效果 */
        color: #e74c3c; /* 鲜艳红色，与装饰条一致 */
        font-style: italic; /* 斜体，增加独特性 */
    }
    </style>