.vibe-notifications { position: relative; }
.vibe-notification-bell { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--color-border, #7785ac66); border-radius: 50%; background: #242431; color: var(--color-text, #f0f0f5); }
.vibe-notification-bell:hover, .vibe-notification-bell[aria-expanded="true"] { background: #393149; border-color: #9ac6c5; }
.vibe-notifications :focus-visible { outline: 2px solid #9ac6c5; outline-offset: 3px; }
.vibe-notification-badge { position: absolute; top: -5px; right: -7px; min-width: 20px; padding: 1px 5px; border: 2px solid #242431; border-radius: 12px; background: #9ac6c5; color: #172626; font: 700 11px/16px sans-serif; }
.vibe-notification-panel { position: absolute; top: calc(100% + 12px); right: 0; width: 370px; max-width: calc(100vw - 24px); max-height: min(600px, calc(100dvh - 95px)); overflow-y: auto; border: 1px solid #7785ac66; border-radius: 16px; background: #252530; color: #f0f0f5; box-shadow: 0 18px 60px #0008; text-align: left; }
.vibe-notification-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.vibe-notification-header h2 { margin: 0; font-size: 1.05rem; }
.vibe-notification-header button { border: 0; background: transparent; color: #9ac6c5; font-size: .8rem; padding: 6px; }
.vibe-notification-status { margin: 0; padding: 8px 20px 16px; color: #b0b0c3; font-size: .85rem; }
.vibe-notification-list { list-style: none; margin: 0; padding: 0; }
.vibe-notification-list a { display: grid; gap: 6px; padding: 16px 20px; border-top: 1px solid #7785ac33; color: #f0f0f5; text-decoration: none; overflow-wrap: anywhere; }
.vibe-notification-list a:hover { background: #33303e; }
.vibe-notification-list small { color: #9ac6c5; font-size: .72rem; }
.vibe-notification-list span { color: #b0b0c3; font-size: .82rem; }
.vibe-notification-all { display: block; padding: 14px 20px; border-top: 1px solid #7785ac33; color: #9ac6c5; font-size: .9rem; font-weight: 600; }
.vibe-notification-all:hover { background: #33303e; color: #c4e5e4; }
.vibe-notification-all[hidden] { display: none; }
@media (max-width: 767px) {
    .vibe-notifications { position: static; }
    .vibe-notification-panel { right: 12px; top: calc(100% + 8px); }
    .nav-actions { gap: .45rem; }
}