CSS
.dm-aurora-bg {
position: relative; padding: 32px;
border-radius: 16px; overflow: hidden;
background: #0a0a14;
}
.dm-aurora-bg::before {
content: '';
position: absolute; inset: -20%;
background:
radial-gradient(ellipse at 30% 30%, rgba(139, 92, 246, 0.4), transparent 50%),
radial-gradient(ellipse at 70% 70%, rgba(236, 72, 153, 0.3), transparent 50%);
filter: blur(32px);
pointer-events: none;
}
.dm-aurora {
position: relative;
background: #14141f;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 14px 18px;
display: flex; align-items: center; gap: 14px;
}
.dm-aurora__icon {
width: 38px; height: 38px;
background: linear-gradient(135deg, #8b5cf6, #ec4899);
border-radius: 10px;
display: grid; place-items: center;
color: #fff;
font-size: 16px;
flex-shrink: 0;
box-shadow: 0 0 16px rgba(139, 92, 246, 0.5);
}
.dm-aurora__body { display: flex; flex-direction: column; gap: 3px; }
.dm-aurora__body b { font: 700 13px system-ui, sans-serif; color: #fff; }
.dm-aurora__body span { font: 12px system-ui, sans-serif; color: #94a3b8; }