.dl-wrap { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.dl-note { margin: 0 0 16px; color: var(--text-dim); font-size: .92rem; }
.dl-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dl-section-head { margin: 0 0 16px; }
.dl-section-head h2 { margin: 0 0 6px; font-size: 1.25rem; display: flex; align-items: center; gap: 8px; }
.dl-project { margin-bottom: 22px; }
.dl-project-title { margin: 0 0 10px; font-size: 1.05rem; }
.dl-project-title a { color: inherit; text-decoration: none; }
.dl-project-title a:hover { color: var(--primary); }
.dl-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dl-card h3 { margin: 0 0 6px; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dl-card h3 > i:first-child { opacity: .85; width: 1.1em; text-align: center; }
.dl-card p { margin: 0 0 10px; color: var(--text-dim); font-size: .9rem; }
.dl-card .dl-meta { font-size: .8rem; color: var(--text-dim); margin: 0 0 10px; }
.dl-card .du-row { margin: 0; }
.dl-card.is-featured { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent); }
.dl-tag { display: inline-block; font-size: .72rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); margin-right: 2px; font-weight: 500; }
.dl-tag-star { border-color: color-mix(in srgb, var(--warn, #f0b429) 50%, var(--line)); color: var(--warn, #f0b429); }
.dl-toolbar { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.dl-toolbar .input { max-width: 360px; }
.dl-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-chip {
  appearance: none; border: 1px solid var(--line); background: transparent; color: var(--text-dim);
  border-radius: 999px; padding: 4px 12px; font-size: .8rem; cursor: pointer;
}
.dl-chip:hover { color: var(--text); border-color: var(--text-dim); }
.dl-chip.is-on { background: color-mix(in srgb, var(--primary) 18%, transparent); border-color: var(--primary); color: var(--text); }
.dl-empty-filter { color: var(--text-dim); text-align: center; padding: 18px 0; }
.dl-card.is-hidden { display: none !important; }

@media (max-width: 640px) {
  .dl-grid { grid-template-columns: 1fr; }
  .dl-toolbar .input { max-width: none; }
}