:root{--p5-red:#d1001f;--p5-black:#111;--p5-white:#fff;--p5-grey:#c0c0c0;--p5-unread-bg:rgba(209,0,31,0.15);--p5-font:'Inter',sans-serif;}.notification-container,.notification-container-mobile{position:relative;display:inline-block;}.notification-badge{position:absolute;top:-6px;right:-6px;background-color:var(--p5-red);color:var(--p5-white);border-radius:50%;padding:1px 5px;font-size:0.8rem;font-weight:bold;border:2px solid var(--p5-black);min-width:22px;text-align:center;box-shadow:0 0 10px var(--p5-red);animation:pulse 2s infinite;}.notification-container-mobile .notification-badge{top:2px;right:-2px;}@keyframes pulse{0%{box-shadow:0 0 5px rgba(209,0,31,0.5);}50%{box-shadow:0 0 15px rgba(209,0,31,1);}100%{box-shadow:0 0 5px rgba(209,0,31,0.5);}}.notifications-dropdown{position:fixed;width:380px;max-height:450px;background-color:var(--p5-black);border:2px solid var(--p5-white);box-shadow:5px 5px 0px var(--p5-red);z-index:2000;display:flex;flex-direction:column;font-family:var(--p5-font);clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);--translateX:-100%;transform:translateX(var(--translateX)) translateY(-10px) scale(0.98);opacity:0;visibility:hidden;transition:none;}.js-ready .notifications-dropdown{transition:opacity 0.2s ease-out,transform 0.2s ease-out,visibility 0.2s;}.notifications-dropdown.is-open{opacity:1;visibility:visible;transform:translateX(var(--translateX)) translateY(0) scale(1);transition:opacity 0.2s ease-out,transform 0.2s ease-out,visibility 0s;}.notifications-header{padding:12px 15px;background-color:var(--p5-red);color:var(--p5-white);text-transform:uppercase;font-weight:bold;}.notifications-header h3{margin:0;font-size:1rem;}.notifications-list{list-style:none;padding:5px;margin:0;overflow-y:auto;flex-grow:1;}.notifications-list::-webkit-scrollbar{width:8px;}.notifications-list::-webkit-scrollbar-track{background:var(--p5-black);}.notifications-list::-webkit-scrollbar-thumb{background:var(--p5-red);}.notification-item{display:flex;align-items:center;border-radius:4px;margin-bottom:5px;transition:background-color 0.2s ease;position:relative;}.notification-item.new-item{animation:newItemFadeIn 0.5s ease-out;}@keyframes newItemFadeIn{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}.notification-item.unread{background-color:var(--p5-unread-bg);}.notification-item:hover{background-color:rgba(255,255,255,0.05);}.notification-item a{display:flex;align-items:center;padding:10px;text-decoration:none;color:var(--p5-grey);flex-grow:1;}.notification-avatar img{width:40px;height:40px;border-radius:50%;margin-right:12px;border:2px solid #555;}.notification-item.unread .notification-avatar img{border-color:var(--p5-red);}.notification-content p{margin:0;font-size:0.9rem;line-height:1.4;}.notification-content p strong{color:var(--p5-white);font-weight:600;}.notification-content .notification-time{font-size:0.75rem;color:#888;margin-top:4px;}.notification-item-empty{padding:40px 15px;text-align:center;color:#888;font-style:italic;}.notification-delete-btn{background:transparent;border:none;color:#666;cursor:pointer;font-size:1rem;padding:10px 15px;transition:color 0.2s ease,transform 0.2s ease;z-index:2;}.notification-delete-btn:hover{color:var(--p5-red);transform:scale(1.2);}