.friend-spotlight {
  position:relative; margin:2px 0 12px; padding:14px;
  border-color:rgba(62,224,208,.68); background:linear-gradient(105deg,rgba(62,224,208,.13),rgba(16,11,7,.78));
  box-shadow:0 0 0 1px rgba(62,224,208,.08),0 12px 30px rgba(0,0,0,.22);
}
.friend-spotlight::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--ok) }
.friend-spotlight .loop-kicker { color:var(--ok) }
.friend-spotlight > div { flex:1 }
.friend-spotlight .friend-gap { color:var(--ink); font-weight:700 }
.friend-spotlight .loop-action { border-color:rgba(62,224,208,.62); color:var(--ok); background:rgba(62,224,208,.11) }
.friend-spotlight .loop-action:hover { background:rgba(62,224,208,.2) }
@media(max-width:560px) {
  .friend-spotlight { align-items:stretch; flex-direction:column }
  .friend-spotlight .loop-action { width:100%; padding:11px }
}