.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.source-card {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 18px;
  text-align: left;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.56);
  color: var(--text);
}

.source-card strong {
  font-size: 16px;
}

.source-card span {
  color: var(--muted);
  line-height: 1.5;
}

.source-card[data-selected="true"] {
  background: rgba(29, 107, 87, 0.12);
  border-color: rgba(29, 107, 87, 0.42);
  box-shadow: inset 0 0 0 1px rgba(29, 107, 87, 0.14);
}

.source-card[data-selected="true"] strong::after {
  content: "Selected";
  display: inline-flex;
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(29, 107, 87, 0.14);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[aria-labelledby="dj-source-title"] > .helper-copy {
  margin-bottom: 16px;
}

.control-grid {
  display: grid;
  gap: 14px;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.support-panel {
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.44);
}

.support-panel label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
}

.support-panel input[type="file"] {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
}

.support-panel p + p {
  margin-top: 10px;
}

@media (max-width: 900px) {
  .source-grid {
    grid-template-columns: 1fr;
  }
}