/* ═══════════════════════════════════════════════════════════
   Aqua Dl v2 · 个人中心的下载记录（按分类归组 + 分类筛选条）
   造型语言与收藏那一套同族：同一套玻璃描边、同一套主蓝胶囊、同一档圆角与投影，
   两个面板摆在同一页里必须像一次做出来的，只是下载记录多一层「分类」的分组标题。
   分组标题用一条从主蓝淡出的横线收尾，材质/教程各占一段，扫一眼就能分清。
   v2 多一个 .dl-toast 浮层：被管理员停用下载的账号点站内下载时，当场说出原因；
   造型照抄收藏那套轻提示，两处在同一页里不能长得不一样。
   ═══════════════════════════════════════════════════════════ */

.dl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(140deg, rgba(255, 255, 255, .7), rgba(214, 234, 255, .4));
  box-shadow: 0 8px 18px rgba(26, 73, 196, .07), inset 0 1px 0 #fff;
  color: var(--azure-deep, #1a49c4);
  font: inherit; font-size: 12px; font-weight: 900; letter-spacing: .05em;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform .5s var(--e-expo, cubic-bezier(.16, 1, .3, 1)),
    box-shadow .5s var(--e-expo, cubic-bezier(.16, 1, .3, 1)),
    background .45s ease, color .45s ease;
}
.dl-chip:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(26, 73, 196, .18), inset 0 1px 0 #fff; }
.dl-chip:focus-visible { outline: 2px solid var(--azure, #2f6cf6); outline-offset: 3px; }
.dl-chip.on {
  color: #fff; border-color: rgba(255, 255, 255, .96);
  background: linear-gradient(140deg, var(--sky, #4fb2f0), var(--azure, #2f6cf6) 58%, var(--azure-deep, #1a49c4));
  box-shadow: 0 14px 30px rgba(26, 73, 196, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ── 分类分组：一段一类 ── */
.dl-group { margin-top: 18px; }
.dl-group:first-child { margin-top: 16px; }
.dl-group-h {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; font-size: 13px; font-weight: 900; letter-spacing: .1em;
  color: var(--azure-deep, #1a49c4);
}
.dl-group-h::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(47, 108, 246, .38), rgba(47, 108, 246, 0));
}
.dl-group-n {
  padding: 2px 9px; border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .5);
  font-size: 11px; letter-spacing: .04em; opacity: .8;
}

.dl-list { display: grid; gap: 12px; margin-top: 6px; }
.dl-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .6), rgba(206, 228, 255, .34));
}
.dl-row-main { flex: 1 1 auto; min-width: 0; }
.dl-name { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: .01em; }
.dl-sum {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.7; opacity: .8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dl-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11.5px; opacity: .72; }
.dl-rows { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dl-link, .dl-note, .dl-off {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(140deg, rgba(255, 255, 255, .76), rgba(214, 234, 255, .44));
  box-shadow: 0 8px 20px rgba(26, 73, 196, .08), inset 0 1px 0 #fff;
  color: var(--azure-deep, #1a49c4); font: inherit; font-size: 12px; font-weight: 900;
  letter-spacing: .05em; text-decoration: none; cursor: pointer;
  transition: transform .5s var(--e-expo, ease), box-shadow .5s var(--e-expo, ease);
}
.dl-link:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(26, 73, 196, .18), inset 0 1px 0 #fff; }
.dl-note, .dl-off { cursor: default; font-weight: 800; opacity: .82; }
.dl-off {
  background: rgba(255, 255, 255, .42); border-style: dashed;
  font-size: 11.5px; letter-spacing: .02em; line-height: 1.7; padding: 8px 13px;
}

.dl-count-line { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.dl-count {
  display: inline-flex; align-items: center;
  padding: 5px 14px; border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(255, 255, 255, .92);
  background: linear-gradient(140deg, rgba(255, 255, 255, .8), rgba(214, 234, 255, .5));
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(26, 73, 196, .08);
  font-size: 12px; font-weight: 900; letter-spacing: .06em;
  color: var(--azure-deep, #1a49c4);
}

.dl-empty {
  padding: 22px 20px; border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .4);
  font-size: 13px; line-height: 2;
}
.dl-skel { opacity: .62; }

/* ── 轻提示：被停用下载的账号点站内下载时当场摊开原因 ── */
.dl-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 90;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: min(560px, 88vw);
  padding: 12px 18px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .92);
  background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(206, 228, 255, .82));
  box-shadow: 0 22px 48px rgba(16, 46, 122, .26), inset 0 1px 0 #fff;
  color: #16307a; font-size: 12.5px; font-weight: 800; line-height: 1.7;
  opacity: 0; transform: translate(-50%, 18px); pointer-events: none;
  transition: opacity .42s var(--e-expo, ease), transform .5s var(--e-spring, cubic-bezier(.16, 1, .3, 1));
}
.dl-toast[data-show] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dl-toast-act {
  padding: 5px 13px; border-radius: var(--r-pill, 999px);
  background: linear-gradient(140deg, var(--sky, #4fb2f0), var(--azure, #2f6cf6) 58%, var(--azure-deep, #1a49c4));
  color: #fff; font-size: 12px; font-weight: 900; text-decoration: none; white-space: nowrap;
}

@media (max-width: 768px) {
  .dl-chip { padding: 5px 11px; font-size: 11px; }
  .dl-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .dl-toast { left: 6vw; right: 6vw; bottom: 18px; max-width: none; transform: translateY(18px); }
  .dl-toast[data-show] { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dl-chip, .dl-link, .dl-toast { transition: none; }
}