/* ==========================================================================
   下载中心（/download.html）专有区块样式
   --------------------------------------------------------------------------
   加载顺序：header.html 的公共样式 → static/css/news.css（骨架：版心 / 侧栏 /
   搜索卡 / 分页）→ common/news-blocks.css（news-shell 版心与侧栏通栏）→ 本文件。

   复用什么：
     · 布局骨架 .et-main / .main-row / .et-left / .et-right、侧栏卡片
       .news_righ_item / .article-module-title / .create-article、搜索卡的
       .pagebanner 结构与输入框、分页器 —— 全部来自 news.css，视觉与新闻页同源
   新增什么：
     ① 深色搜索卡（.dl-banner）：深蓝渐变 + 斜纹，白色标题与热词
     ② 标签 + 列表合并成一张白卡（.dl-panel / .dl-tabs / .dl-list / .dl-item）

   侧栏不在本文件：热门下载用 news.css 的 .newsPage_left_hot_list，
   「最新活动」块已去掉（2026-10-21）。

   颜色一律走 common/vars.css 的变量（--Original / --txtdesc），不在本文件里
   写死主题色，换主题色时这里自动跟随。
   ========================================================================== */


/* ---------------------------------------------------------------
   1. 搜索卡：深蓝渐变 + 细斜纹
   ---------------------------------------------------------------
   新闻页那张是「键盘照片」，下载中心用纯 CSS 的深色渐变，和截图一致：
   左偏黑、右偏蓝，再叠一层 15px 一格的斜纹（1px 白、4% 不透明度）。
   ★ 选择器多带一个 .dl-banner，特异性 (0,3,0) 压过 news.css 的
     .et-main .pagebanner-relative (0,2,0) 的 height:150px / padding:40px 30px。
   --------------------------------------------------------------- */
.et-main .pagebanner-relative.dl-banner {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 122px;
  padding: 22px 30px;
  background-color: #0b1018;
  background-image: linear-gradient(100deg, #080c12 0%, #0c141f 42%, #1a2b47 100%);
  background-size: cover;
  background-position: center;
}

/* 斜纹：只做质感，不抢内容 */
.et-main .pagebanner-relative.dl-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 15px
  );
}

.et-main .pagebanner-relative.dl-banner .pagebanner {
  position: relative;
  z-index: 1;
}

.et-main .pagebanner-relative.dl-banner .pagebanner-text .pagebanner-title {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* 热词：截图里是「热门搜索: 词 词 词」，词与词之间只有间距、没有竖线分隔 */
.et-main .pagebanner-relative .pagebanner.white .pagebanner-text .searchTerms.dl-words {
  gap: 18px;
}

.et-main .pagebanner-relative .pagebanner.white .pagebanner-text .searchTerms.dl-words a {
  margin-right: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}

.et-main .pagebanner-relative .pagebanner.white .pagebanner-text .searchTerms.dl-words a::after {
  display: none;
}

.et-main .pagebanner-relative .pagebanner.white .pagebanner-text .searchTerms.dl-words a:first-child {
  color: rgba(255, 255, 255, 0.55);
}

.et-main .pagebanner-relative .pagebanner.white .pagebanner-text .searchTerms.dl-words a:hover {
  color: #fff;
}

@media (min-width: 769px) {
  .et-main .pagebanner-relative.dl-banner .unique_search_container .unique_search_input {
    width: 300px;
  }
}

/* 截图里的搜索框是纯白方块、里面没有放大镜图标（新闻页那个是 news.css 的
   background-image 给的），这里就地去掉，右侧内边距也跟着收回来。 */
.et-main .pagebanner-relative.dl-banner .unique_search_input {
  background-image: none;
  padding-right: 12px;
}


/* ---------------------------------------------------------------
   2. 标签 + 列表：一张白卡
   ---------------------------------------------------------------
   截图里标签栏与文件列表在同一张卡片里，靠 1px 浅灰线分开，
   所以这里不再用新闻页那块独立的 .newsPage_left_list。
   --------------------------------------------------------------- */
.et-main .dl-panel {
  width: 100%;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.01);
  overflow: hidden;
}

.et-main .dl-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
  min-height: 54px;
  padding: 0 30px;
  border-bottom: 1px solid #eef1f6;
}

.et-main .dl-tab {
  position: relative;
  display: inline-block;
  height: 54px;
  line-height: 54px;
  font-size: 14px;
  font-weight: 400;
  color: var(--txtcl);
  transition: color 0.3s ease;
}

.et-main .dl-tab:hover {
  color: var(--Original);
}

/* 激活态：主题蓝 + 2px 下划线（压在卡片那条 1px 分隔线上） */
.et-main .dl-tab.is-active {
  color: var(--Original);
  font-weight: 600;
}

.et-main .dl-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--Original);
}


/* ---------------------------------------------------------------
   3. 文件行
   ---------------------------------------------------------------
   44px 浅蓝圆角图标 + 文件名 + 类型/时间/大小 + 右侧下载按钮。

   ★ 交互只认右边那颗「下载」按钮：
     · 文件名是纯文本（span），不显示手型、点了没反应；
     · 鼠标移到按钮上 → 按钮反色成实心蓝，同时整行标题一起变蓝
       （标题和按钮不在同一层，靠 js/download.js 给行加 .is-btn-hover 联动）；
     · 鼠标扫过整行不会变色，避免误以为整行可点。
   --------------------------------------------------------------- */
.et-main .dl-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  /* 文件少时也撑到 6 行的位置（单行 80px + 1px 分隔线，6 行 = 485px），
     避免只有一两条文件时白卡扁成一条、下面内容整体上跳 */
  min-height: 486px;
}

.et-main .dl-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 30px;
  border-bottom: 1px solid #f0f3f8;
}

.et-main .dl-item:last-child {
  border-bottom: none;
}

.et-main .dl-item-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #eef4ff url("../static/picture/dl-file.svg") center / 22px no-repeat;
}

.et-main .dl-item-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.et-main .dl-item-name {
  display: block;
  max-width: 100%;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  /* 文件名是纯文本：默认黑色、不显示手型光标、点了没反应。
     只有鼠标移到右边「下载」按钮上时，它才跟着按钮一起变主题蓝
     （JS 给行加 .is-btn-hover，见 js/download.js 末尾）。 */
  color: var(--txtcl);
  cursor: inherit;
  transition: color 0.3s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 悬停「下载」按钮 → 标题跟着变蓝 */
.et-main .dl-item.is-btn-hover .dl-item-name {
  color: var(--Original);
}

.et-main .dl-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  font-size: 12px;
  line-height: 14px;
  color: #8a93a4;
}

.et-main .dl-meta {
  position: relative;
  padding-left: 18px;
}

.et-main .dl-meta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.45;
}

.et-main .dl-meta-type::before {
  background-image: url("../static/picture/remoteL17091848047440.svg");
}

.et-main .dl-meta-time::before {
  background-image: url("../static/picture/remoteL17091848258410.svg");
}

.et-main .dl-meta-size::before {
  background-image: url("../static/picture/dl-size.svg");
}

.et-main .dl-item-btn {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 默认是浅蓝描边按钮（底 #eef4ff / 边 #c8dcff / 字主题蓝），
     鼠标移到按钮上才反色成实心蓝白字 —— 整行只有这一个可点区域。
     box-sizing 写死，加边框后仍是 64×30。 */
  box-sizing: border-box;
  width: 64px;
  height: 30px;
  border: 1px solid #c8dcff;
  border-radius: 2px;
  background: #eef4ff;
  color: var(--Original);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 悬停按钮本身 → 实心蓝（标题同步变蓝靠上面 .is-btn-hover 那条） */
.et-main .dl-item-btn:hover,
.et-main .dl-item.is-btn-hover .dl-item-btn {
  background: var(--Original);
  border-color: var(--Original);
  color: #fff;
}


/* ---------------------------------------------------------------
   4. 分页外壳 + 空态
   ---------------------------------------------------------------
   分页器的样式复用 news.css（外层保留 .newsPage_row 类就是为了继承那些规则），
   这里只把那张「卡片」属性清掉 —— 它现在只是白卡里的一行。
   --------------------------------------------------------------- */
.et-main .dl-body.newsPage_row {
  display: block;
  padding: 0 30px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  gap: 0;
}

.et-main .dl-body .news-page-container {
  padding: 16px 0 20px;
}

.et-main .dl-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 与 .dl-list 的 min-height 一致，空态时文案垂直居中，卡片不变矮 */
  min-height: 486px;
  padding: 0 20px;
  text-align: center;
  font-size: 14px;
  color: #8a93a4;
}


/* ---------------------------------------------------------------
   5. 侧栏：无自定义样式
   ---------------------------------------------------------------
   侧栏现在只剩两块：「更多栏目」用 news.css 的 .create-article，
   「热门下载」用 news.css 的 .newsPage_left_hot_list（与「热门文章」同款
   1/2/3 奖牌 + 4/5 数字圈）。原先的 .dl-hot（橙点）与 .dl-act（最新活动）
   两套样式已随之删除，别再往这里加侧栏列表样式。
   --------------------------------------------------------------- */


/* ---------------------------------------------------------------
   6. 窄屏（≤1100）：搜索卡改上下两行
   ---------------------------------------------------------------
   桌面是「标题 + 热词」在左、搜索框在右。侧栏固定 328，窗口一窄正文就只剩
   500 出头，标题会被挤成两行（实测 1024：标题 98×65、搜索框贴到标题右边）。
   所以 ≤1100 直接改成上下排、搜索框撑满，和手机端同一套。
   ★ 1100 这个断点跟着侧栏走：正文宽 = 视口 - 128 - 328 - 20，>1100 时还剩
     624 以上，标题 98 + 搜索 366 + 间距足够一行放下。
   --------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
  .et-main .pagebanner-relative.dl-banner .pagebanner {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .et-main .pagebanner-relative.dl-banner .unique_search_container {
    width: 100%;
  }

  .et-main .pagebanner-relative.dl-banner .unique_search_container form {
    width: 100%;
  }

  /* 新闻页那边表单是 fit-content、只给 input 100%，会和按钮凑不满一行；
     这里让输入框吃剩余空间、按钮固定 88。 */
  .et-main .pagebanner-relative.dl-banner .unique_search_container form .unique_search_input {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  .et-main .pagebanner-relative.dl-banner .unique_search_container form .unique_search_button {
    flex: 0 0 88px;
    width: 88px;
  }
}


/* ---------------------------------------------------------------
   7. 移动端（≤768）
   ---------------------------------------------------------------
   news.css 在 ≤768 有两条会打架的规则：
     .et-main .pagebanner-relative { height: 138px }            (0,2,0)
     .et-main .main-row .et-left .newsPage_row { padding: 20px } (0,4,0)
   前者用 .dl-banner 提权压住；后者比 .dl-body 高，所以这里也写足四级。
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .et-main .pagebanner-relative.dl-banner {
    min-height: 0;
    height: auto;
    padding: 20px 16px;
  }

  .et-main .pagebanner-relative.dl-banner .pagebanner-text .pagebanner-title {
    font-size: 19px;
  }

  .et-main .dl-tabs {
    gap: 24px;
    min-height: 48px;
    padding: 0 16px;
  }

  .et-main .dl-tab {
    height: 48px;
    line-height: 48px;
    font-size: 13px;
  }

  .et-main .dl-item {
    gap: 12px;
    padding: 14px 16px;
  }

  /* 手机屏短，不按 6 行拉高（不然一屏全是空白），空态也只留一小块 */
  .et-main .dl-list {
    min-height: 0;
  }

  .et-main .dl-empty {
    min-height: 200px;
  }

  .et-main .dl-item-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    background-size: 20px;
  }

  .et-main .dl-item-name {
    font-size: 14px;
  }

  .et-main .dl-item-meta {
    gap: 12px;
  }

  .et-main .dl-item-btn {
    width: 58px;
    height: 28px;
    font-size: 12px;
  }

  .et-main .main-row .et-left .dl-body.newsPage_row {
    padding: 0 16px;
  }
}