:root { --notif-panel-bg: #ffffff; --notif-panel-border: #e9e9e9; --notif-panel-shadow: 0 12px 24px rgba(0,0,0,0.12); --notif-accent: #2f7d6f; } 

#notifications-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; } 
#notifications-bell img { width: 18px; height: 18px; display: block; filter: grayscale(1) brightness(0.2); } 
#notifications-bell:hover img { filter: none; } 

#notifications-badge { position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 7px; background: #e14a3b; color: #ffffff; font-size: 10px; line-height: 14px; text-align: center; } 

.notifications-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 280px; max-height: 420px; overflow: auto; background: var(--notif-panel-bg); border: 1px solid var(--notif-panel-border); border-radius: 12px; box-shadow: var(--notif-panel-shadow); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 6000; padding: 12px; } 
.notifications-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } 
.notifications-panel__title { padding: 0 2px 8px; font-weight: 600; font-size: 14px; color: #2b2b2b; } 

#notifications-list { display: flex; flex-direction: column; gap: 8px; } 

.notifications__empty { padding: 12px; font-size: 13px; color: #7a7a7a; background: #fafafa; border: 1px dashed #e6e6e6; border-radius: 10px; } 

#notifications-list .notifications__item { width: 100%; display: grid; grid-template-columns: 1fr; row-gap: 4px; text-align: left; border: 1px solid #efefef; background: #ffffff; padding: 10px 12px; border-radius: 10px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.04); } 
#notifications-list .notifications__item-title { display: block; font-weight: 600; font-size: 13px; color: #2b2b2b; margin: 0; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; } 
#notifications-list .notifications__item-body { display: block; margin: 0; font-size: 12px; color: #5f5f5f; line-height: 1.35; } 
.notifications__item.is-read { opacity: 0.6; } 

.notifications-toasts { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 7000; } 
.notifications-toast { width: 300px; border: none; text-align: left; background: #ffffff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 22px rgba(0,0,0,0.18); cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; } 
.notifications-toast.is-hide { opacity: 0; transform: translateY(6px); } 
.notifications-toast__title { font-weight: 700; font-size: 13px; color: #2b2b2b; margin-bottom: 4px; } 
.notifications-toast__body { font-size: 12px; color: #5f5f5f; } 

@media (max-width: 700px) { 
  .notifications-panel { width: 280px; right: 8px; } 
  .notifications-toasts { right: 12px; bottom: 12px; } 
  .notifications-toast { width: 260px; } 
}