/* Notifications bell and panel */
.notif-bell-wrap { position:relative; margin-right:2px; }
.notif-bell-btn {
  position:relative;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:4px;
  border-radius:50%;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
.notif-bell-btn:hover { background:rgba(42,164,255,.15); }
.notif-bell-icon {
  width:22px; height:22px;
  stroke:#222; fill:none; stroke-width:1.6;
}
.notif-bell-badge {
  position:absolute;
  top:4px; right:6px;
  background:#e0245e;
  color:#fff;
  font-size:11px;
  min-width:18px;
  padding:0 4px;
  height:18px;
  line-height:18px;
  border-radius:9px;
  text-align:center;
  font-weight:600;
  display:none;
}
.notif-panel {
  position:absolute;
  right:0;
  top:44px;
  width:340px;
  max-height:440px;
  overflow:auto;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  z-index:1200;
  display:none;
  padding:8px;
}
@media (max-width: 480px){
  .notif-panel{ width: 92vw; right: -8px; }
}
.notif-panel-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
}
.notif-panel-head .title{ font-weight:600; font-size:14px; }
.notif-panel-head .link{ font-size:12px; color:#1976d2; text-decoration:none; }
.notif-panel-head .link:hover{ text-decoration:underline; }

.notif-item {
  padding:6px 4px;
  border-bottom:1px solid #eee;
  font-size:13px;
  line-height:1.3;
}
.notif-item:last-child { border-bottom:none; }
.notif-item.unread { background:#f5fbff; }
.notif-empty { padding:12px; font-size:13px; color:#666; }
.notif-item small { display:block; color:#888; margin-top:4px; font-size:11px; }