/* 基础重置与全局样式 START */
        * { /* 通用选择器 */
            margin: 0; /* 清除默认外边距 */
            padding: 0; /* 清除默认内边距 */
            box-sizing: border-box; /* 设置盒模型为border-box */
            font-family: 'Space Mono', monospace; /* 设置全局字体 */
        }
        /* 基础重置与全局样式 END */

        /* CSS 自定义属性 START */
        :root { /* 根伪类定义CSS变量 */
            --bg-color: #0a0a0a;       /* 背景主色 */
            --neon-green: #21ed57;     /* 霓虹绿色 */
            --cyber-blue: #00f3ff;     /* 赛博蓝色 */
            --text-color: #c0c0c0;     /* 正文文字颜色 */
            --border-width: 4px;       /* 通用边框宽度 */
            --glow-color: #409cf8;     /* 流光效果颜色 */
            --glow-spread: 12px;       /* 光晕扩散范围 */
            --animation-speed: 3s;     /* 动画速度 */
        }
        /* CSS 自定义属性 END */

        /* 主体样式 START */
        body { /* 页面主体样式 */
            background: url('/assets/images/home_bg.png') no-repeat center/cover; /* 使用自定义图片 */
            color: var(--text-color);   /* 设置文字颜色 */
            line-height: 1.6;           /* 设置行高为1.6倍 */
            min-height: 100vh;          /* 最小高度为视口高度 */
            display: grid;              /* 使用网格布局 */
            grid-template-rows: auto 1fr; /* 网格行布局：自动和剩余空间 */
        }
        /* 主体样式 END */

        /* 导航栏样式 START */
        .nav-bar { /* 导航栏容器 */
            padding: 2rem;            /* 内边距1.5rem */
            border-bottom: 2px solid var(--neon-green); /* 底部边框 */
            box-shadow: 0 0 20px rgba(4, 238, 66, 0.985); /* 绿色发光效果 */
            position: relative;         /* 相对定位 */
            background: url('/assets/images/bg3.png') no-repeat center center / cover;
            
        }
        /* 导航栏样式 END */

        /* 导航标题 START */
        .nav-title { /* 导航标题样式 */
            color: var(--neon-green);   /* 使用霓虹绿色 */
            font-size: 2.5rem;          /* 字体大小2.5rem */
            text-shadow: 0 0 10px rgba(15, 255, 80, 0.4); /* 文字阴影发光 */
            text-align: left;         /* 文字居中 */
            letter-spacing: 0.3rem;     /* 字母间距0.3rem */
            display: flex;
            align-items: center;
            gap: 8px; /* 图标和文字间距 */

        }

        .nav-logo {
            width: 50px; 
            height: 50px;
            /* 如果图标有留白，可以微调位置 */
            margin-top: -2px;
            }
        /* 导航标题 END */

        /* 主容器布局 START */
        .main-container { /* 主要内容容器 */
            display: grid;               /* 使用网格布局 */
            grid-template-columns: 4fr 1fr; /* 3:1列宽比例 */
            gap: 3rem;                   /* 网格间距2rem */
            padding: 2rem;               /* 内边距2rem */
            max-width: 1400px;           /* 最大宽度限制 */
            margin: 0 auto;              /* 水平居中 */
            min-height: 0;               /* 防止网格溢出 */
            height: 100%;                /* 高度100% */
        }
        /* 主容器布局 END */

        /* 项目网格布局 START */
        .projects-grid { /* 项目网格容器 */
            display: grid; /* 使用网格布局 */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 响应式网格布局 */
            gap: 1rem 1rem;     /* 网格项间距 */
            -webkit-gap: 1rem 1rem;
            
            overflow-y: auto; /* 垂直溢出滚动 */
            max-height: calc(100vh - 120px); /* 动态高度计算 */
            padding-right: 1rem; /* 右侧内边距 */
        }
        /* 项目网格布局 END */

        /* 项目卡片容器 START */
        .project-card { /* 单个项目卡片 */
            --project-glow-color: #00FFE6; /* 新增专用变量 */
            gap: 1rem 1rem;
            position: relative;       /* 相对定位 */
            padding: var(--border-width); /* 使用变量设置内边距 */
            border-radius: 12px;      /* 圆角半径 */
            overflow: hidden;         /* 溢出隐藏 */
            aspect-ratio: 16/9;       /* 固定宽高比 */
            background: rgba(7, 1, 22, 0.97); /* 半透明背景 */
            transition: transform 0.3s ease; /* 变换动画 */
        }
        /* 项目卡片容器 END */

        /* 流光边框效果 START */
        .project-card::before { /* 卡片伪元素 */
            content: "";               /* 必须内容属性 */
            position: absolute;         /* 绝对定位 */
            top: calc(-1 * var(--glow-spread)); /* 上边界计算 */
            left: calc(-1 * var(--glow-spread)); /* 左边界计算 */
            right: calc(-1 * var(--glow-spread)); /* 右边界计算 */
            bottom: calc(-1 * var(--glow-spread)); /* 下边界计算 */
            background: linear-gradient( /* 渐变背景 */
                45deg,
                transparent 15%,
                var(--project-glow-color),
                transparent 85%
            );
            background-size: 400% 400%; /* 背景尺寸放大 */
            animation: glow-flow var(--animation-speed) linear infinite; /* 应用动画 */
            filter: blur(var(--glow-spread)); /* 模糊效果 */
            opacity: 0.8;               /* 透明度 */
            z-index: 0;                 /* 层级设置 */
        }
        

        @keyframes glow-flow {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
      }
      /* 流光边框效果 END */
        /* 图片容器 START */
        .image-container { /* 图片容器 */
            position: relative; /* 相对定位 */
            width: 100%;        /* 宽度100% */
            height: 100%;       /* 高度100% */
            border-radius: 8px;  /* 圆角半径 */
            overflow: hidden;    /* 溢出隐藏 */
            z-index: 1;          /* 层级设置 */
            background: #0a0a0a; /* 背景颜色 */
        }
        /* 图片容器 END */

        /* 项目图片样式 START */
        .project-img { /* 项目图片 */
            width: 90%;         /* 宽度90% */
            height: auto;        /* 高度100% */
            margin: 0 auto;
            object-fit: cover;   /* 图片填充方式 */
            object-position: center center; /* 图片定位中心 */
            display: block;       /* 块级显示 */
            transition: transform 0.3s ease; /* 变换动画 */
            cursor: pointer;      /* 鼠标指针样式 */
        }
        /* 项目图片样式 END */

        /* 悬停效果 START */
        .project-card:hover { /* 卡片悬停效果 */
            transform: translateY(-5px); /* Y轴位移 */
        }
        .project-card:hover .project-img { /* 图片悬停效果 */
            transform: scale(1.05); /* 缩放效果 */
        }
        /* 悬停效果 END */

        /* 侧边栏样式 START */
        .sidebar { /* 侧边栏容器 */
            border-left: 2px solid var(--neon-green); /* 左侧边框 */
            padding-left: 1.5rem;      /* 左侧内边距 */
            background: linear-gradient(to left, /* 渐变背景 */
                rgba(9, 147, 45, 0.02) 0%, 
                transparent 100%); 
            height: fit-content;        /* 高度自适应内容 */
            width: 320px;
            position: sticky;           /* 粘性定位 */
            top: 2rem;                  /* 距离顶部距离 */
        }
        /* 侧边栏样式 END */

        /* 实时热点样式START */
        /* 主侧边栏热榜容器样式 */
        .widget {
            position: relative;          /* 相对定位 */
            padding: 1rem;               /* 内边距 */
            background: rgba(10, 10, 10, 0.9);  /* 深色半透明背景 */
            border: 2px solid var(--neon-green);  /* 霓虹绿边框 */
            border-radius: 8px;          /* 圆角效果 */
            box-shadow: 0 0 15px rgba(33, 237, 87, 0.2);  /* 发光效果 */
        }

        /* 热榜主标题样式 */
        .hotlist-title {
            color: var(--cyber-blue);    /* 科技蓝文字色 */
            font-size: 1.8rem;           /* 字号 */
            margin-bottom: 1.2rem;       /* 下边距 */
            text-shadow: 0 0 8px rgba(0, 243, 255, 0.3);  /* 文字发光 */
            border-bottom: 2px solid var(--neon-green);  /* 底部装饰线 */
            padding-bottom: 0.5rem;      /* 底部内边距 */
        }

        /* 更新时间样式 */
        .update-time {
            color: #f71ecf;              /* 中性灰色 */
            font-size: 0.9rem;           /* 较小字号 */
            margin-bottom: 1rem;         /* 下边距 */
        }

        /* 平台标题交互容器 */
        .platform-header {
            display: flex;                /* 弹性盒布局 */
            justify-content: space-between; /* 两端对齐 */
            align-items: center;          /* 垂直居中 */
            padding: 0.8rem;             /* 内边距 */
            background: rgba(15, 15, 15, 0.95);  /* 深色半透明背景 */
            border: 1px solid rgba(33, 237, 87, 0.3);  /* 半透明边框 */
            border-radius: 6px;          /* 圆角 */
            margin: 0.5rem 0;            /* 上下外边距 */
            cursor: pointer;             /* 手型指针 */
            transition: all 0.3s ease;   /* 过渡动画 */
        }

        

        /* 平台标题悬停效果 */
        .platform-header:hover {
            background: rgba(33, 237, 87, 0.05);  /* 背景高亮 */
            box-shadow: 0 0 10px rgba(33, 237, 87, 0.2);  /* 发光效果 */
        }

        /* 平台名称文字样式 */
        .platform-name {
            color: #1edaf7;    /* 主文字色 */
            font-size: 1.1rem;           /* 中等字号 */
            letter-spacing: 1px;         /* 字间距 */
        }

        /* 查看全部按钮样式 */
        .view-all {
            color: var(--neon-green);    /* 霓虹绿色 */
            font-size: 1.0rem;           /* 较小字号 */
            cursor: pointer;             /* 手型指针 */
            text-align: right;          /* 右对齐 */
            transition: opacity 0.3s ease;  /* 透明度过渡 */
        }

        /* 查看热点按钮基础样式 */
        .view-hot {
            /* 布局属性 */
            padding: 0.2rem 0.2rem;       /* 内边距 */
            margin-left: auto;          /* 自动左外边距实现右对齐 */
                           
            justify-content: space-between; /* 两端对齐 */
            align-items: center;          /* 垂直居中 */
            
            /* 文字属性 */
            color: #0c0c0c;             /* 黑色文字 */
            font-size: 0.85rem;         /* 字体大小 */
            font-weight: 500;           /* 中等字重 */
            letter-spacing: 0.5px;      /* 字间距 */
            
            /* 背景与边框 */
            background-color: var(--neon-green);  /* 霓虹绿主题色 */
            border: 1px solid rgba(33, 237, 87, 0.8);  /* 半透明边框 */
            border-radius: 15px;         /* 胶囊圆角 */
            
            /* 特效 */
            box-shadow: 0 2px 8px rgba(33, 237, 87, 0.3);  /* 发光效果 */
            
            /* 交互 */
            cursor: pointer;            /* 手型指针 */
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* 平滑过渡 */
        }

        /* 悬停状态 */
        .view-hot:hover {
            background-color: rgba(33, 237, 87, 0.9);  /* 加深背景色 */
            transform: translateY(-1px);               /* 轻微上移 */
            box-shadow: 0 4px 12px rgba(33, 237, 87, 0.4);  /* 强化投影 */
        }

        /* 点击状态 */
        .view-hot:active {
            transform: translateY(0);   /* 取消位移 */
            box-shadow: 0 1px 4px rgba(33, 237, 87, 0.3);  /* 减小投影 */
        }

        /* 禁用状态 */
        .view-hot:disabled {
            background-color: #3a3a3a;  /* 深灰色 */
            color: #666666;             /* 中灰色 */
            cursor: not-allowed;        /* 禁用指针 */
            box-shadow: none;           /* 去除投影 */
        }

        /* 查看全部悬停效果 */
        .view-all:hover {
            opacity: 0.8;               /* 透明度变化 */
            text-shadow: 0 0 8px rgba(33, 237, 87, 0.4);  /* 文字发光 */
        }

        /* 热点条目容器 */
        .hot-items {
            padding: 0.5rem;            /* 内边距 */
            margin-bottom: 1rem;        /* 下边距 */
            
        }

        /* 单个热点条目样式 */
        .hot-item {
            padding: 0.8rem !important;            /* 内边距 */
            margin: 0.5rem 0;          /* 上下外边距 */
            background: rgba(20, 20, 20, 0.9);  /* 深色背景 */
            border-left: 3px solid var(--neon-green);  /* 左侧装饰线 */
            border-radius: 4px;         /* 圆角 */
            transition: transform 0.2s ease;  /* 移动动画 */
            cursor: pointer;           /* 手型指针 */
            display: flex !important;
            flex-direction: column !important;
        }

        /* 热点条目悬停效果 */
        .hot-item:hover {
            transform: translateX(8px);  /* 向右位移 */
            background: linear-gradient(90deg,  /* 渐变背景 */
                rgba(33, 237, 87, 0.05) 0%,
                rgba(20, 20, 20, 0.9) 100%
            );
        }

        /* 创建标题行容器 */
        .hot-item > :first-child {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        /* 调整侧边栏小热榜的布局保持原有样式 */
        #hotlist-container .hot-item-header {
          display: flex !important;
          align-items: center;
        }

        /* 标题行容器 */
        .hot-item-header {
          display: flex !important;
          align-items: center;
          margin-bottom: 4px; /* 与元信息行间距 */
        }

        #hotlist-container .hot-meta {
          padding-left: 0;
          margin-top: 4px;
        }

        /* 排名数字样式 */
        .rank {
            color: var(--cyber-blue);   /* 科技蓝色 */
            font-weight: bold;          /* 粗体 */
            margin-right: 0;      /* 右外边距 */
            flex-shrink: 0;
    
        }

        /* 标题文字样式 */
        .title {
            color: var(--text-color);   /* 主文字色 */
            font-size: 0.95rem;         /* 标准字号 */
            display: -webkit-box;       /* 旧版弹性盒模型 */
            display: block;             /* 块级显示 */
            -webkit-line-clamp: 1;      /* 限制两行显示 */
            line-clamp: 1;              /* 标准行数限制 */
            -webkit-box-orient: vertical;  /* 垂直排列 */
            overflow: hidden;           /* 溢出隐藏 */
            flex: 1;
        }

        /* 元信息容器（热度+时间） */
        .hot-meta {
            margin-top: 4px !important;         /* 上边距 */
            display: flex !important;              /* 弹性布局 */
            justify-content: space-between;  /* 两端对齐 */
            color: #10aff3;             /* 中性灰色 */
            font-size: 0.8rem;          /* 小字号 */
            padding-left: 24px; /* 与排名数字对齐 */
        }

        /* 在style.css中添加 */
        .other-platform {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.6rem;
            margin: 0.4rem 0;
        }

        .other-platform span {
            color: #10aff3; /* 与主平台颜色一致 */
            font-size: 1rem;
        }

        .view-hot[onclick] { /* 查看热点按钮 */
            margin-left: 1rem;
            flex-shrink: 0; /* 防止按钮被压缩 */
        }

        /* 添加热榜详情页专用样式 */
        .hotlist-container {
            padding: 1rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* 详情页多列布局容器 */
        .columns {
            display: grid;              /* 网格布局 */
            gap: 2rem;                 /* 列间距 */
            padding: 0.5rem 0;           /* 上下内边距 */
            grid-template-columns: repeat(3, 1fr) !important; /* 强制三列布局 */
            width: 70vw; ;
            
        }

        /* 单列样式 */
        .column {
            background: rgba(15, 15, 15, 0.95);  /* 深色背景 */
            border: 2px solid rgba(0, 243, 255, 0.1);  /* 半透明边框 */
            border-radius: 8px;        /* 圆角 */
            padding: 1rem;             /* 内边距 */
            height: calc(100vh - 200px);
            overflow-y: auto;
        }

        /* 平台标题样式 */
        .platform-title {
            color: var(--neon-green);  /* 霓虹绿色 */
            font-size: 1.4rem;         /* 大字号 */
            margin-bottom: 0rem;       /* 下边距 */
            padding-bottom: 0.5rem;   /* 底部内边距 */
            border-bottom: 2px solid var(--cyber-blue);  /* 底部装饰线 */
        }

        /* 热榜详情页内容区块 */
        .platform-section {
          scroll-margin-top: 110px; /* 匹配导航栏高度 */
          position: relative;
        }


        /* 导航锚点容器 */
        #platformNav {
            position: sticky;          /* 粘性定位 */
            top: 0;                   /* 顶部贴边 */
            background: var(--bg-color);  /* 背景色 */
            padding: 1rem;            /* 内边距 */
            z-index: 100;             /* 层级高度 */
            border-bottom: 2px solid var(--neon-green);  /* 底部边框 */
            display: flex;            /* 弹性布局 */
            gap: 0rem;              /* 元素间距 */
        }

        /* 导航项样式 */
        .nav-item {
            color: var(--text-color);  /* 主文字色 */
            padding: 0.5rem 1rem;     /* 内边距 */
            border-radius: 4px;        /* 圆角 */
            transition: all 0.3s ease;  /* 过渡动画 */
        }

        /* 导航项悬停效果 */
        .nav-item:hover {
            background: rgba(33, 237, 87, 0.1);  /* 背景高亮 */
            color: var(--cyber-blue);  /* 文字变色 */
            box-shadow: 0 0 8px rgba(0, 243, 255, 0.2);  /* 发光效果 */
        }

        /* 实时热点样式END */
/* 添加在style.css文件底部 */
/* ================= 响应式优化 START ================= */
@media (max-width: 1200px) {
    /* 平板适配 */
    .main-container {
      grid-template-columns: 3fr 1fr;
      padding: 3rem;
      
    }
  
    .projects-grid {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      
    }
  
    .nav-title {
      font-size: 2rem;
    }
  
    .hotlist-title {
      font-size: 1.6rem;
    }
  }
  
  @media (max-width: 992px) {
    /* 小平板适配 */
    .main-container {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
  
    .sidebar {
      width: 100%;
      border-left: none;
      border-top: 2px solid var(--neon-green);
      position: static;
      order: -1;
    }
  
    .projects-grid {
      max-height: none;
    }
  }
  
  @media (max-width: 768px) {
    /* 手机端适配 */
    body {
      background-attachment: fixed;
    }
  
    .nav-bar {
      padding: 1.5rem;
    }
  
    .nav-title {
      font-size: 1.8rem;
      letter-spacing: 0.1rem;
    }
  
    .nav-logo {
      width: 40px;
      height: 40px;
    }
  
    .main-container {
      padding: 2rem;
      grid-template-columns: 1fr;
    }
  
    .project-card {
      aspect-ratio: 16/9;
    }
  
    /* 热榜模块优化 */
    .platform-header {
      flex-direction: column;
      align-items: flex-start;
      padding: 1rem;
    }
  
    .view-hot {
      margin-top: 0.5rem;
      width: 100%;
      text-align: center;
    }
  
    .hot-item {
      padding: 0.8rem 0.6rem;
    }
  
    /* 详情页优化 */
    #platformNav {
      flex-wrap: wrap;
      gap: 0.8rem;
      padding: 0.8rem;
    }

    /* 热榜详情页内容区块 */
    .platform-section {
      scroll-margin-top: 240px; /* 匹配导航栏高度 */
      position: relative;
    }
  
    .nav-item {
      padding: 0.4rem 0.8rem;
      font-size: 0.9rem;
    }
  
    .columns {
      gap: 1.5rem;
    }
  }
  
  @media (max-width: 576px) {
    /* 小手机优化 */
    .main-container {
      padding: 1.5rem;
    }
  
    .projects-grid {
      grid-template-columns: 1fr;
    }
  
    .project-img {
      width: 100%;
    }
  
    /* 热榜文字优化 */
    .platform-name {
      font-size: 1rem;
    }
  
    .title {
      font-size: 0.9rem;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
  
    .hot-meta {
      flex-direction: column;
      gap: 0.3rem;
    }
  
    /* 详情页手机适配 */
    .hotlist-container {
      padding: 1.5rem;
    }
  
    .platform-title {
      font-size: 1.2rem;
    }
  
    .column {
      padding: 0.8rem;
    }
  }
  
  @media (max-width: 400px) {
    /* 超小设备适配 */
    .nav-title {
      font-size: 1.5rem;
    }
  
    .nav-logo {
      width: 35px;
      height: 35px;
    }
  
    .hotlist-title {
      font-size: 1.4rem;
    }
  
    .view-hot {
      font-size: 0.8rem;
      padding: 0.3rem 0.6rem;
    }
  }
  
  /* 横屏手机特殊处理 */
  @media screen and (max-height: 500px) and (orientation: landscape) {
    .projects-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .project-card {
      aspect-ratio: 4/3;
    }
  }

  /* 修改style.css中的媒体查询部分 */
@media (max-width: 992px) {
    /* 主容器调整为单列布局 */
    .main-container {
      grid-template-columns: 1fr;
      grid-template-areas: 
        "projects"
        "sidebar";
    }
  
    /* 项目网格区域定义 */
    .projects-grid {
      grid-area: projects;
      order: 1; /* 保持项目在上方 */
    }
  
    /* 侧边栏区域定义 */
    .sidebar {
      grid-area: sidebar;
      order: 2; /* 强制侧边栏在下方 */
      width: 100%;
      border-left: none;
      border-top: 2px solid var(--neon-green);
      padding: 2rem 1rem;
      position: static; /* 取消粘性定位 */
    }
  
    /* 调整热榜容器高度 */
    .widget {
      max-height: none;
    }
  }
  
  @media (max-width: 768px) {
    /* 增加移动端间距 */
    .main-container {
      padding: 2rem 1rem;
      gap: 1.5rem;
    }
  
    /* 调整侧边栏内边距 */
    .sidebar {
      padding: 1.5rem 0.5rem;
      margin-top: -1rem; /* 缩小与项目的间距 */
    }
  
    /* 热榜标题缩小 */
    .hotlist-title {
      font-size: 1.6rem;
    }
  }
  
  @media (max-width: 576px) {
    /* 进一步优化移动端显示 */
    .platform-header {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .view-hot {
      margin-top: 0.5rem;
      width: 100%;
      text-align: center;
    }
  
    /* 调整热榜条目间距 */
    .hot-item {
      padding: 0.6rem;
      margin: 0.3rem 0;
    }
  }
  
  @media (max-width: 768px) {
    /* 热榜详情页移动端优化 */
    .platform-section {
        margin-bottom: 2rem;
        background: rgba(15, 15, 15, 0.95);
        border-radius: 8px;
        padding: 1rem;
    }

    /* 强制单列布局 */
    .columns {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }

    /* 单个列容器样式 */
    .column {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    /* 热点条目样式调整 */
    .hot-item {
        margin: 0.5rem 0;
        padding: 1rem;
        border-left: 3px solid var(--neon-green);
        background: rgba(20, 20, 20, 0.9);
    }

    /* 排名数字调整 */
    .rank {
        font-size: 1.1rem;
        margin-right: 0.8rem;
    }

    /* 标题文字换行处理 */
    .title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
        font-size: 0.95rem;
        line-height: 1.4;
    }

    /* 元信息单行显示 */
    .meta {
        flex-direction: row !important;
        justify-content: space-between;
        margin-top: 0.5rem;
    }
}

/* 超小设备适配 */
@media (max-width: 480px) {
    .hot-item {
        padding: 0.8rem;
    }
    
    .platform-title {
        font-size: 1.1rem;
        flex-wrap: wrap;
    }
    
    .hotlist-title {
        font-size: 1.3rem;
    }
}
  /* ================= 响应式优化 END ================= */