.notif-menu { position: relative; }
.notif-bell { position: relative; }
.notif-badge { position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px; font-size: .65rem; box-shadow: 0 0 0 2px var(--surface); }
.notif-panel {
  position: absolute; left: 0; width: 340px; max-height: 70vh; overflow: auto; z-index: 50;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 8px; display: grid; gap: 2px; box-shadow: var(--shadow-lg);
}
.notif-panel.is-up { bottom: calc(100% + 8px); }
.notif-panel.is-down { top: calc(100% + 8px); left: auto; right: 0; }
.notif-title { font-family: var(--font-display); font-weight: 700; padding: 6px 10px 8px; }
.notif-empty { display: flex; align-items: center; gap: 8px; color: var(--text-2); padding: 8px 10px 12px; }
.notif-empty svg { width: 18px; height: 18px; }
.notif { display: grid; gap: 2px; padding: 10px 12px 10px 14px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); font-size: .9rem; position: relative; }
.notif:hover { background: var(--surface-2); }
.notif.is-new::before { content: ''; position: absolute; left: 4px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.notif small { color: var(--text-3); }
@media (max-width: 760px) { .notif-panel { position: fixed; left: 12px; right: 12px; top: 60px; bottom: auto; width: auto; } }