html,body { margin:0; padding:0; width:100%; height:100%; background:transparent; color:#fff; font-family: Inter, system-ui, sans-serif; }
.container { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; justify-content:center; align-items:center; pointer-events:none; }
.event { display:flex; align-items:center; gap:12px; background: rgba(3,4,94,.85); border-left:6px solid #22c55e; border-radius:16px; padding:16px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.55); transform: translateY(40px) scale(.96); opacity:0; }
.event.show { opacity:1; transform: translateY(0) scale(1); transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1); }
.icon { width:36px; height:36px; border-radius:50%; background:#22c55e; display:flex; align-items:center; justify-content:center; font-weight:900; color:#0a0a0a; }
.title { font-weight:900; letter-spacing:.5px; }
.l1 { font-size:18px; font-weight:700; }
.l2 { font-size:14px; opacity:.9; }