:root{--modern-primary:#6366f1;--modern-secondary:#8b5cf6;--modern-gradient-primary:linear-gradient(135deg,#667eea,#764ba2)}.notifications-page-container{min-height:100vh;position:relative;transition:background-color .3s ease-in-out,color .3s ease-in-out}[data-theme=dark] .notifications-page-container{background-color:#0f0f23;color:#e2e8f0}[data-theme=dark] .notifications-glass-card{background:linear-gradient(145deg,rgba(22,22,45,.8),rgba(30,30,55,.7));backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px rgba(0,0,0,.3)}[data-theme=dark] .notifications-heading{color:#ffffff;background:var(--modern-gradient-primary);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}[data-theme=dark] .notification-item{background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}[data-theme=dark] .notification-item:hover{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.05));border-color:rgba(139,92,246,.3)}[data-theme=dark] .notification-item.unread{background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.1));border:1px solid rgba(139,92,246,.2)}[data-theme=dark] .notification-avatar{border:2px solid rgba(255,255,255,.1)}[data-theme=dark] .notification-content{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}[data-theme=light] .notifications-page-container{background-color:#f9fafb}[data-theme=light] .notifications-glass-card{background:rgba(255,255,255,.7);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 40px rgba(0,0,0,.1)}[data-theme=light] .notifications-heading{color:#111827}[data-theme=light] .notification-item{background:#ffffff;border:1px solid #e5e7eb}[data-theme=light] .notification-item:hover{background:#f9fafb;border-color:#d1d5db}[data-theme=light] .notification-item.unread{background:#eef2ff;border:1px solid #c7d2fe}[data-theme=light] .notification-avatar{border:2px solid #f3f4f6}[data-theme=light] .notification-content{background:#f9fafb;border:1px solid #e5e7eb}.notifications-skeleton-item{background:rgba(139,92,246,.1);border-radius:12px;position:relative;overflow:hidden}.notifications-skeleton-item:after{content:"";position:absolute;top:0;left:-150%;width:150%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:skeletonShimmer 1.5s infinite}@keyframes skeletonShimmer{to{left:150%}}.btn-gradient-base{display:inline-flex;align-items:center;justify-content:center;border-radius:50px;padding:8px 20px;font-size:.875rem;background:var(--modern-gradient-primary);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;font-weight:600;color:white;text-shadow:0 1px 2px rgba(0,0,0,.2)}.btn-gradient-base:hover{transform:translateY(-2px) scale(1.03)}.notifications-glass-card{border-radius:24px;transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden}.notification-item{border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.notification-item:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.15)}.notification-avatar{border-radius:50%;transition:all .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.15)}.notification-avatar:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,.2)}.notification-content{border-radius:8px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.unread-dot{background:linear-gradient(45deg,#6366f1,#8b5cf6);box-shadow:0 0 10px rgba(99,102,241,.5);animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}to{transform:scale(1);opacity:1}}.load-more-btn{background:var(--modern-gradient-primary);border:none;border-radius:50px;padding:12px 24px;color:white;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 20px rgba(0,0,0,.2)}.load-more-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 25px rgba(0,0,0,.25)}.load-more-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.empty-state{text-align:center;padding:3rem 1rem;color:#6b7280}[data-theme=dark] .empty-state{color:#9ca3af}.error-state{background:linear-gradient(135deg,rgba(239,68,68,.1),rgba(220,38,38,.05));border:1px solid rgba(239,68,68,.2);border-radius:12px;padding:1rem;color:#dc2626}[data-theme=dark] .error-state{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.1));color:#fca5a5}@media (max-width:768px){.notifications-glass-card{margin:.5rem;border-radius:16px}.notification-item{border-radius:12px}}@keyframes slideInFromTop{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.notification-enter{animation:slideInFromTop .3s ease-out}.notification-icon{background:rgba(255,255,255,.1);border-radius:50%;padding:2px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}[data-theme=light] .notification-icon{background:rgba(0,0,0,.05)}