.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: #d7b64a;
  color: #080a0d;
  font-size: 11px;
}
.notification-list { display: grid; gap: 12px; }
.notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(215,182,74,.2);
  border-left: 4px solid #59616d;
  border-radius: 13px;
  background: linear-gradient(150deg,#171b21,#101318);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.notification.unread { border-left-color: #d7b64a; background: linear-gradient(150deg,#201c12,#111318); }
.notification h3 { margin: 8px 0 5px; color: #f7f5ed; font-size: 16px; }
.notification p { margin: 0 0 8px; color: #aeb5c1; line-height: 1.5; }
.notification small { color: #aeb5c1; }
.closure-panel {
  margin-top: 18px;
  padding: 17px;
  border: 1px solid rgba(215,182,74,.45);
  border-radius: 12px;
  background: rgba(215,182,74,.07);
}
.closure-panel h3 { margin-top: 0; color: #f7f5ed; }
.closure-panel p { color: #aeb5c1; line-height: 1.5; }
@media(max-width:650px) {
  .notification { align-items: flex-start; flex-direction: column; }
  .notification .btn { width: 100%; }
}