/* Extracted from partials/layout_start.php */
/* Notifications (topbar) */
.notif{ position:relative; }
.notif .iconbtn{ position:relative; }
.notif-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 6px;
  display:grid; place-items:center;
  border-radius:999px;
  font-size:12px; font-weight:800;
  background:rgba(255,70,90,.95);
  color:#fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.notif-drop{
  position:absolute;
  right:0; top:calc(100% + 10px);
  width:min(360px, calc(100vw - 24px));
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,12,18,.92);
  backdrop-filter: blur(10px);
  border-radius:14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  overflow:hidden;
  z-index:9999;
}
.notif-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.notif-title{ font-weight:800; }
.notif-all{ opacity:.85; text-decoration:none; }
.notif-list{ max-height:360px; overflow:auto; }
.notif-item{
  display:block;
  padding:10px 12px;
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.notif-item:hover{ background:rgba(255,255,255,.06); }
.notif-item.unread{
  background: rgba(92,200,255,.12);
  border-left: 3px solid rgba(92,200,255,.95);
}
.notif-meta{ opacity:.7; font-size:12px; margin-top:3px; }