<div class="dm-phos-bg">
  <article class="dm-phos">
    <div class="dm-phos__top">
      <span class="dm-phos__live">● LIVE</span>
      <span class="dm-phos__count">2,341 watching</span>
    </div>
    <h3 class="dm-phos__title">React Server Components Deep Dive</h3>
    <p class="dm-phos__body">A walk through the boundaries between server and client.</p>
  </article>
</div>

.dm-phos-bg { padding: 28px; border-radius: 16px; background: #0a0a14; }
.dm-phos {
  position: relative;
  background: #14141f;
  border: 1px solid #1f1f30;
  border-radius: 10px;
  padding: 16px 20px 16px 22px;
  overflow: hidden;
}
.dm-phos::before {
  content: '';
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: #ec4899;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 14px #ec4899, 0 0 32px rgba(236, 72, 153, 0.4);
}
.dm-phos__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dm-phos__live {
  font: 700 10px ui-monospace, monospace;
  color: #ec4899;
  letter-spacing: 0.12em;
}
.dm-phos__count {
  font: 500 10px ui-monospace, monospace;
  color: #6b7080;
}
.dm-phos__title { margin: 0 0 6px; font: 700 14px/1.3 system-ui, sans-serif; color: #fff; }
.dm-phos__body  { margin: 0; font: 12px/1.55 system-ui, sans-serif; color: #94a3b8; }