@charset "UTF-8";

/* 页面骨架 */
.pb-downloads {
  background: #fff;
  padding: 3.2rem 0 4rem;
}

/* 工具条 */
.dl-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 1.2rem 0 1.6rem;
  flex-wrap: wrap;
}

.dl-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .95rem;
  color: #2f308a;
  border: 1px solid rgba(47,48,138,.35);
  background: #fff;
  cursor: pointer;
  transition: all .18s ease;
}
.chip:hover { background: rgba(47,48,138,.06); }
.chip.is-active {
  color: #fff;
  background: linear-gradient(120deg, #98d4f2 10%, #0ec4be 50%, #168eff 100%);
  border-color: transparent;
}

.dl-actions {
  display: flex; gap: 10px; align-items: center;
}
.dl-input {
  height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12); min-width: 220px;
}
.dl-select {
  height: 36px; padding: 0 10px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12); min-width: 180px; background:#fff;
}

/* 顶部主卡（与首页左侧大卡一致） */
.dl-hero {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  background: #fff;
}
@media (max-width: 991px) {
  .dl-hero { grid-template-columns: 1fr; }
}

.dl-hero .hero-media { position: relative; }
.dl-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-hero .hero-media .hero-tag {
  position: absolute; left: 0; top: 0;
  font-size: 1rem; color: #fff; height: 2rem; line-height: 2rem;
  border-radius: 0 0 10px 0; padding: 0 10px;
  background: linear-gradient(to left, #0ec4be, #168eff);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.dl-hero .hero-body { padding: 16px 16px 16px 4px; display:flex; flex-direction:column; justify-content:center; }
.dl-hero .hero-title {
  font-size: 1.12rem; font-weight: 700; color: #222; line-height: 1.7;
}
.tag-new {
  margin-left: .6rem; display: inline-block; min-width: 4.2rem;
  height: 1.6rem; line-height: 1.6rem; text-align: center; color:#fff;
  border-radius: 999px;
  background: linear-gradient(to right, #e9995d 10%, #d75787 60%, #9d4c8f 100%);
  box-shadow: 0 6px 16px rgba(215,87,135,.18);
  font-size: .9rem;
}
.dl-hero .hero-meta { display:flex; align-items:center; justify-content:space-between; margin-top: .8rem; }
.dl-hero .hero-meta .date { color:#666; font-variant-numeric: tabular-nums; }
.btn-outline {
  border:1px solid #2f308a; color:#2f308a; padding:6px 12px; border-radius:999px; text-decoration:none;
}
.btn-outline:hover { background: rgba(47,48,138,.06); }

/* 列表（与首页右侧列表同风格） */
.dl-list { margin-top: 1.4rem; }
.dl-item {
  border-bottom: 2px solid #d0d0d0;
  padding: .6rem 0;
}
.dl-item:last-child { border-bottom: none; }

.dl-title {
  font-size: 1.05rem; color: #2f3033; letter-spacing: .2px; text-decoration: none;
}
.dl-title:hover { text-decoration: underline; }

.dl-meta {
  display:flex; justify-content:space-between; align-items: baseline; gap: 1rem;
  color: #666; font-size: .98rem; margin-top: .2rem;
}
.dl-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.tag {
  display:inline-block; min-width:3.6rem; height:1.6rem; line-height:1.6rem; text-align:center;
  border-radius:999px; font-size:.9rem; padding: 0 .6rem; color:#fff;
  background: linear-gradient(to right, #168eff 10%, #0ec4be 60%, #98d4f2 100%);
}
.chip-new { background: linear-gradient(to right, #e9995d 10%, #d75787 60%, #9d4c8f 100%); }
.btn-download { border:2px solid #fff; text-decoration:none; }

/* 分页 */
.dl-pager { display:flex; justify-content:center; gap:6px; margin-top: 1rem; }
.pg {
  border: 1px solid rgba(0,0,0,.12);
  background: #fff; min-width: 36px; height: 36px; border-radius: 9px;
  font-size: .95rem; cursor: pointer; padding: 0 8px;
}
.pg.is-active { background: #2f308a; color:#fff; border-color: transparent; }
.pg:hover { background: rgba(47,48,138,.06); }

/* 响应式微调 */
@media (max-width: 767px) {
  .dl-toolbar { gap: 8px; }
  .dl-actions { width:100%; }
  .dl-actions .dl-input { flex:1; min-width: 0; width: 100%; }
  .dl-actions .dl-select { margin-left: auto; }
}