@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.page-container{justify-content:center;align-items:center;min-height:100%;padding:20px;display:flex}.list-container{width:100%;max-width:400px;height:300px;position:relative;overflow:hidden}.list-container:after{content:"";pointer-events:none;background:linear-gradient(#0000,#fff);height:100px;position:absolute;bottom:0;left:0;right:0}.notification-list{flex-direction:column;gap:12px;display:flex}.notification-item{background-color:#fff;border-radius:16px;align-items:center;gap:14px;padding:14px 16px;transition:all .3s;animation:.4s cubic-bezier(.16,1,.3,1) forwards slideIn;display:flex;box-shadow:0 1px 3px #00000014,0 4px 12px #0000000d}.notification-item:hover{transform:translate(4px);box-shadow:0 2px 8px #0000001f,0 8px 24px #00000014}.notification-icon{border-radius:50%;justify-content:center;align-items:center;width:44px;min-width:44px;height:44px;font-size:18px;display:flex}.icon-emoji{filter:grayscale(0)}.notification-content{flex-direction:column;gap:2px;display:flex;overflow:hidden}.notification-header{align-items:center;gap:6px;display:flex}.notification-title{color:#1a1a1a;white-space:nowrap;font-size:14px;font-weight:600}.notification-dot{color:#9ca3af;font-size:12px}.notification-time{color:#9ca3af;white-space:nowrap;font-size:12px}.notification-subtitle{color:#6b7280;font-size:13px}