.notifications-page{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);position:relative;overflow-x:hidden}.notifications-page:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 25% 75%,rgba(99,102,241,.2) 0,transparent 50%),radial-gradient(circle at 75% 25%,rgba(168,85,247,.2) 0,transparent 50%);pointer-events:none}.notifications-layout{position:relative;z-index:1}.notifications-page .bg-white,.notifications-page .dark\\:bg-gray-800{backdrop-filter:blur(10px);background:rgba(255,255,255,.95);transition:all .3s ease}.dark .notifications-page .bg-white,.dark .notifications-page .dark\\:bg-gray-800{background:rgba(31,41,55,.95)}.notifications-page .bg-white:hover,.notifications-page .dark\\:bg-gray-800:hover{transform:translateY(-1px);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}.notifications-page .peer:checked+div{background-color:rgb(37,99,235)}.notifications-page .peer:focus+div{box-shadow:0 0 0 3px rgba(37,99,235,.1)}.notifications-page .peer+div,.notifications-page .peer+div:after{transition:all .3s ease}.notifications-page button{position:relative;overflow:hidden;transition:all .3s ease}.notifications-page button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.2);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease}.notifications-page button:active:before{width:300px;height:300px}.notifications-page button:disabled{cursor:not-allowed;opacity:.6}.notifications-page .test-button{transform:translateY(0);transition:all .2s ease}.notifications-page .test-button:hover{transform:translateY(-2px);box-shadow:0 8px 15px rgba(0,0,0,.2)}.notifications-page .test-button:active{transform:translateY(0)}.permission-status{position:relative}.permission-status:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:50%;animation:rotate 2s linear infinite;opacity:0}.permission-status.granted:before,.permission-status:before{background:linear-gradient(45deg,transparent,rgba(34,197,94,.3),transparent)}.permission-status.granted:before{opacity:1}.permission-status.denied:before{opacity:1;background:linear-gradient(45deg,transparent,rgba(239,68,68,.3),transparent)}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.dark .loading-shimmer{background:linear-gradient(90deg,#374151 25%,#4b5563 50%,#374151 75%);background-size:200% 100%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.notification-success{border-left:4px solid #10b981;background:linear-gradient(135deg,rgba(16,185,129,.1),transparent)}.notification-error{border-left:4px solid #ef4444;background:linear-gradient(135deg,rgba(239,68,68,.1),transparent)}.notification-info{border-left:4px solid #3b82f6;background:linear-gradient(135deg,rgba(59,130,246,.1),transparent)}.notification-warning{border-left:4px solid #f59e0b;background:linear-gradient(135deg,rgba(245,158,11,.1),transparent)}.notifications-page .breadcrumb{position:relative}.notifications-page .breadcrumb a{position:relative;text-decoration:none;transition:color .3s ease}.notifications-page .breadcrumb a:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:currentColor;transition:width .3s ease}.notifications-page .breadcrumb a:hover:after{width:100%}.notifications-page .icon-pulse{animation:iconPulse 2s ease-in-out infinite}@keyframes iconPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.tooltip{position:relative}.tooltip:before{content:attr(data-tooltip);background:#1f2937;color:white;padding:.5rem;border-radius:.375rem;font-size:.875rem;white-space:nowrap;z-index:1000}.tooltip:after,.tooltip:before{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);opacity:0;visibility:hidden;transition:all .3s ease}.tooltip:after{content:"";border:4px solid transparent;border-top-color:#1f2937}.tooltip:hover:after,.tooltip:hover:before{opacity:1;visibility:visible}@media (max-width:768px){.notifications-page{padding:1rem}.notifications-page .grid{grid-template-columns:1fr;gap:1rem}.notifications-page button{width:100%;justify-content:center}.notifications-page .flex{flex-direction:column;gap:.75rem}}@media (max-width:480px){.notifications-page .text-3xl{font-size:1.5rem}.notifications-page .text-xl{font-size:1.25rem}.notifications-page .px-6{padding-left:1rem;padding-right:1rem}.notifications-page .py-3{padding-top:.75rem;padding-bottom:.75rem}}.notifications-page :focus{outline:none}.notifications-page button:focus,.notifications-page input:focus{box-shadow:0 0 0 3px rgba(59,130,246,.1)}@media (prefers-contrast:high){.notifications-page .bg-white{background:#fff;border:2px solid #000}.notifications-page button{border:2px solid}.notifications-page .text-gray-600{color:#000}}@media (prefers-reduced-motion:reduce){.notifications-page *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-color-scheme:dark){.notifications-page{background:linear-gradient(135deg,#1e293b,#0f172a)}}@media print{.notifications-page{background:#fff!important;color:#000!important}.notifications-page button{display:none}.notifications-page .shadow-sm{box-shadow:none!important;border:1px solid #000!important}}.notifications-page ::-webkit-scrollbar{width:8px}.notifications-page ::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.notifications-page ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.notifications-page ::-webkit-scrollbar-thumb:hover{background:#94a3b8}.dark .notifications-page ::-webkit-scrollbar-track{background:#374151}.dark .notifications-page ::-webkit-scrollbar-thumb{background:#6b7280}.dark .notifications-page ::-webkit-scrollbar-thumb:hover{background:#9ca3af}