.radio-song-request-fields {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(79, 207, 255, .25);
  border-radius: 12px;
  background: rgba(4, 22, 34, .62);
}

.dj-audience-messages {
  position: relative;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #28516a;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(8, 27, 41, .96), rgba(4, 12, 20, .96));
  box-shadow: inset 0 1px rgba(125, 224, 255, .08), 0 14px 28px rgba(0, 0, 0, .28);
}

.dj-audience-messages-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dj-audience-messages-heading h2 { margin: 4px 0; font-size: 1.2rem; }
.dj-audience-messages-heading p { margin: 0; color: #86a4b5; font-size: .76rem; }
.dj-audience-messages-heading > div:last-child { display: flex; align-items: center; gap: 9px; }
.dj-audience-message-count { padding: 8px 11px; border: 1px solid #248b64; border-radius: 999px; color: #54efa8; background: #09251d; font-size: .72rem; font-weight: 900; }
.dj-audience-message-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.dj-audience-message-filters button { padding: 7px 11px; border: 1px solid #294b61; border-radius: 999px; color: #93afbf; background: #07141e; font-size: .7rem; font-weight: 850; }
.dj-audience-message-filters button.active { color: #08151e; border-color: #55dfff; background: #55dfff; box-shadow: 0 0 16px rgba(54, 207, 255, .24); }
.dj-audience-message-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 440px; overflow: auto; padding-right: 4px; }
.dj-audience-message { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 13px; border: 1px solid #27485c; border-radius: 14px; background: #071722; }
.dj-audience-message.is-pending { border-color: #9d6a16; box-shadow: inset 3px 0 #ffb325; }
.dj-audience-message.is-broadcast { opacity: .7; }
.dj-audience-kind-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #07131d; background: #53dcff; box-shadow: 0 0 17px rgba(69, 213, 255, .24); }
.dj-audience-kind-icon::before { content: "✦"; font-size: 1.35rem; font-weight: 1000; }
.dj-audience-kind-icon.song { color: #241500; background: #ffbc35; box-shadow: 0 0 17px rgba(255, 181, 40, .25); }
.dj-audience-kind-icon.song::before { content: "♪"; }
.dj-audience-message-copy { min-width: 0; }
.dj-audience-message-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dj-audience-message-copy > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #75e7ff; }
.dj-audience-message-status { padding: 3px 7px; border-radius: 999px; color: #ffc957; background: rgba(255, 177, 32, .12); font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.dj-audience-message.is-broadcast .dj-audience-message-status { color: #76d8a6; background: rgba(51, 194, 126, .12); }
.dj-audience-message h3 { margin: 5px 0 3px; font-size: .83rem; }
.dj-audience-message p { margin: 5px 0; color: #b9cbd4; font-size: .73rem; line-height: 1.45; white-space: pre-wrap; }
.dj-audience-message-copy > small { color: #68889a; font-size: .63rem; }
.dj-audience-song { display: flex; align-items: baseline; gap: 7px; padding: 7px 9px; border-radius: 9px; background: #07111a; }
.dj-audience-song b { color: #ffc54b; }
.dj-audience-song span { color: #8da8b7; }
.dj-audience-message-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding-top: 9px; border-top: 1px solid #1e394b; }
.dj-audience-message-actions > span { margin-right: auto; color: #6fe5ac; font-size: .65rem; }
.dj-audience-message-actions > span.not-found { color: #8198a5; }

@media (max-width: 760px) {
  .radio-song-request-fields, .dj-audience-message-list { grid-template-columns: 1fr; }
  .dj-audience-messages-heading { flex-direction: column; }
  .dj-audience-messages-heading > div:last-child { width: 100%; justify-content: space-between; }
  .dj-audience-message-actions { flex-wrap: wrap; justify-content: flex-start; }
  .dj-audience-message-actions > span { width: 100%; }
}