.community-head { max-width: 750px; margin-bottom: 28px; }
.community-label { color: var(--violet-hi); }
.community-head p:not(.mono), .community-end p { color: var(--muted); }
.community-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dj-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.dj-card {
  min-width: 0;
  overflow: hidden;
  background: #141414;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  transition: border-color .2s, transform .2s;
}
@media (hover: hover) {
  .dj-card:hover { transform: translateY(-2px); border-color: var(--violet); }
}
.dj-photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: repeating-radial-gradient(circle at center, transparent 0 17px, #7b2eff16 18px 19px, transparent 20px 29px),
    radial-gradient(circle at center, #241938, #101012 72%);
  color: #ffffff66;
  font: 400 clamp(28px, 4vw, 52px)/1 var(--f-display);
}
.dj-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dj-demo { position: absolute; top: 12px; left: 12px; font-family: var(--f-mono); }
.dj-member { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--violet); color: #fff; }
.dj-member svg { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.dj-content { padding: 16px; overflow-wrap: anywhere; }
.dj-content h3 { margin: 0 0 12px; font: 400 17px/1.45 var(--f-display); }
.dj-content p { margin: 12px 0; color: var(--muted); font-size: .87rem; }
.dj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dj-chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; border: 1px solid #ffffff24; background: transparent; color: #ddd; font-size: .75rem; line-height: 1.35; text-decoration: none; }
button.dj-chip[aria-pressed="true"], button.dj-chip:hover { border-color: var(--violet-hi); background: #7b2eff1f; }
.dj-bpm { border-color: var(--violet); color: var(--violet-hi); letter-spacing: .03em; }
.dj-more { margin: 4px 0 10px; font-size: .87rem; }
.dj-feature, .community-end { border: 1px solid #7b2eff55; border-radius: 14px; padding: clamp(16px, 3vw, 32px); }
.dj-feature { background: repeating-linear-gradient(transparent 0 3px, #fff1 4px, transparent 5px), #0c0a14; }
.dj-feature iframe { width: 100%; height: 166px; border: 0; margin-top: 12px; }
.dj-feature .btn:disabled { color: var(--muted); cursor: not-allowed; }
.dj-wave { height: 27px; margin: 12px 0; background: repeating-linear-gradient(90deg, var(--violet-hi) 0 2px, transparent 2px 6px); opacity: .45; clip-path: polygon(0 45%, 10% 28%, 18% 45%, 25% 15%, 34% 45%, 45% 22%, 50% 44%, 60% 0, 67% 45%, 75% 24%, 82% 45%, 92% 19%, 100% 45%, 100% 60%, 92% 83%, 82% 58%, 75% 77%, 67% 58%, 60% 100%, 50% 58%, 45% 80%, 34% 58%, 25% 86%, 18% 58%, 10% 72%, 0 58%); }
.dj-filters { margin: 28px 0 18px; }
.dj-filter-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; margin-top: 16px; }
.dj-filter-row label { color: #ddd; font-size: .85rem; }
.dj-filter-row input[type="search"] { display: block; margin-top: 4px; width: min(220px, 100%); padding: 7px 10px; border: 1px solid #ffffff36; border-radius: 7px; background: #141414; }
.dj-filter-row input[type="checkbox"] { accent-color: var(--violet); }
.community-end { margin-top: 28px; }
@media (min-width: 600px) { .dj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dj-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dj-card { transition: none; } .dj-card:hover { transform: none; } }