<div class="notif-card">
  <div class="notif-icon notif-success">✓</div>
  <div class="notif-content">
    <p class="notif-title">Deployment successful</p>
    <p class="notif-desc">motiff-alpha · production · v2.4.1</p>
    <p class="notif-time">2 minutes ago</p>
  </div>
  <button class="notif-close" aria-label="Dismiss">✕</button>
</div>

<div class="notif-card" style="margin-top:0.75rem">
  <div class="notif-icon notif-warning">!</div>
  <div class="notif-content">
    <p class="notif-title">Storage limit approaching</p>
    <p class="notif-desc">You've used 87% of your storage quota.</p>
    <p class="notif-time">1 hour ago</p>
  </div>
  <button class="notif-close" aria-label="Dismiss">✕</button>
</div>

<style>
.notif-card {
  display: flex; align-items: flex-start; gap: 0.875rem;
  padding: 1rem 1.125rem; border: 1px solid var(--border);
  border-radius: 0.875rem; background: var(--surface);
}
.notif-icon {
  width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700;
}
.notif-success { background: rgba(34,197,94,.12); color: #16A34A; }
.notif-warning { background: rgba(245,158,11,.12); color: #D97706; }
.notif-error { background: rgba(239,68,68,.12); color: #DC2626; }
.notif-content { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.notif-title { font-size: 0.875rem; font-weight: 600; margin: 0; }
.notif-desc { font-size: 0.8125rem; color: var(--muted); margin: 0; }
.notif-time { font-size: 0.75rem; color: var(--muted); margin: 0; margin-top: 0.25rem; }
.notif-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.875rem; padding: 0; flex-shrink: 0; }
</style>