@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{min-height:100%;padding:var(--space-20);justify-content:center;align-items:center;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{gap:var(--space-12);flex-direction:column;display:flex}.notification-item{align-items:center;gap:var(--space-14);padding:var(--space-14)var(--space-16);border-radius:var(--radius-16);box-shadow:0 1px 3px var(--color-border),0 4px 12px #0000000d;background-color:#fff;transition:all .3s;animation:.4s cubic-bezier(.16,1,.3,1) forwards slideIn;display:flex}.notification-item:hover{box-shadow:0 2px 8px #0000001f,0 8px 24px var(--color-border);transform:translate(4px)}.notification-icon{border-radius:var(--radius-circle);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{gap:var(--space-2);flex-direction:column;display:flex;overflow:hidden}.notification-header{align-items:center;gap:var(--space-6);display:flex}.notification-title{color:var(--color-surface-dark);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}