.notif-heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.notif-heading{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:20px;
  font-weight:800;
  color:#181818;
  margin:0;
}
.notif-mark-all{
  background:none;
  border:none;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12.5px;
  font-weight:700;
  color:#e2231a;
  cursor:pointer;
  padding:0;
}
.notif-mark-all:hover{text-decoration:underline;}

.notif-group{margin-bottom:28px;}
.notif-group-label{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#9a9890;
  margin:0 0 10px;
}

.notif-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  border-radius:10px;
  text-decoration:none;
  transition:background .15s;
}
.notif-item:hover{background:#f9f8f5;}
.notif-item.is-unread{background:#fdeceb;}
.notif-item.is-unread:hover{background:#fbdbd8;}
.notif-item + .notif-item{margin-top:2px;}

.notif-icon{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.notif-icon svg{width:18px; height:18px;}
.notif-icon-match{background:#fdeceb; color:#e2231a;}
.notif-icon-news{background:#e6f1fb; color:#1e6fd8;}
.notif-icon-comment{background:#f0efe9; color:#5f5e5a;}

.notif-body{flex:1; min-width:0;}
.notif-text{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13.5px;
  color:#2b2a27;
  line-height:1.5;
}
.notif-text b{color:#181818; font-weight:700;}
.notif-time{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12px;
  color:#9a9890;
  margin-top:3px;
}

.notif-dot{
  flex-shrink:0;
  width:8px; height:8px;
  border-radius:50%;
  background:#e2231a;
  margin-top:6px;
}

html.dark-mode .notif-heading{color:#f0efea;}
html.dark-mode .notif-group-label{color:#7c7b76;}
html.dark-mode .notif-item:hover{background:#1b1c20;}
html.dark-mode .notif-item.is-unread{background:#3a2220;}
html.dark-mode .notif-item.is-unread:hover{background:#472a26;}
html.dark-mode .notif-icon-match{background:#3a2220; color:#f0897f;}
html.dark-mode .notif-icon-news{background:#1c2c3a; color:#6ba3e8;}
html.dark-mode .notif-icon-comment{background:#2b2c31; color:#c7c7cf;}
html.dark-mode .notif-text{color:#c7c7cf;}
html.dark-mode .notif-text b{color:#f0efea;}
html.dark-mode .notif-time{color:#7c7b76;}

@media (max-width:640px){
  .notif-item{padding:12px;}
  .notif-icon{width:32px; height:32px;}
  .notif-icon svg{width:15px; height:15px;}
  .notif-text{font-size:13px;}
}