.notifications-route{
  --notification-card:#fff;
  --notification-text:#19191d;
  --notification-muted:#76727f;
  --notification-raised:#f5f3fb;
  --notification-unread:#f2efff;
}

body.night-mode.notifications-route{
  --notification-card:#18181c;
  --notification-text:#f7f7f9;
  --notification-muted:#a8a5b0;
  --notification-raised:#222127;
  --notification-unread:#211b45;
}

body.notifications-route,
body.notifications-route #app{
  background:#fff;
}

body.night-mode.notifications-route,
body.night-mode.notifications-route #app{
  background:#000;
}

.notifications-page{
  width:min(calc(100% - 40px),960px);
  min-height:calc(100vh - 72px);
  margin:0 auto;
  padding:118px 0 90px;
  background:transparent;
  color:var(--notification-text);
}

.notification-shortcuts{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  margin:0 0 30px;
}

.notification-shortcuts a{
  position:relative;
  display:grid;
  gap:4px;
  border-radius:18px;
  padding:16px 18px;
  background:#fff;
  color:var(--notification-text);
  box-shadow:0 10px 30px rgba(28,22,54,.06);
  text-decoration:none;
}

.notification-shortcut-badge{
  position:absolute;
  top:10px;
  right:12px;
}

body.night-mode.notifications-route .notification-shortcuts a{
  background:var(--notification-card);
}

.notification-shortcuts span{
  font-size:13px;
  font-weight:900;
}

.notification-shortcuts small{
  color:var(--notification-muted);
  font-size:10px;
}

.notification-messages{
  width:100%;
  background:transparent;
}

.notification-message-list{
  --hello-card:var(--notification-card);
  --hello-text:var(--notification-text);
  --hello-muted:var(--notification-muted);
  --hello-line:color-mix(in srgb,var(--notification-muted) 24%,transparent);
  --hello-purple:var(--luca-purple);
  display:grid;
  width:100%;
  gap:14px;
  background:transparent;
}

.notification-message-empty{
  display:grid;
  justify-items:center;
  gap:6px;
  width:100%;
  padding:52px 20px;
  background:transparent;
  color:var(--notification-muted);
  text-align:center;
}

.notification-message-empty strong{
  color:var(--notification-text);
}

.notification-list{
  display:grid;
  width:100%;
  gap:14px;
  background-color:transparent;
}

.notification-row{
  position:relative;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 8px;
  gap:14px;
  align-items:center;
  min-height:92px;
  padding:14px 18px;
  border-radius:22px;
  background:var(--notification-card);
  color:var(--notification-text);
  box-shadow:0 10px 30px rgba(28,22,54,.06);
  text-decoration:none;
}

.notification-row.is-unread{
  background:var(--notification-unread);
}

.notification-row.is-history{
  color:color-mix(in srgb,var(--notification-text) 78%,var(--notification-muted));
}

.notification-history-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 8px;
  color:var(--notification-muted);
  font-size:9px;
  font-weight:850;
  letter-spacing:.15em;
  white-space:nowrap;
}

.notification-history-divider::before,
.notification-history-divider::after{
  height:1px;
  flex:1;
  background:color-mix(in srgb,var(--notification-muted) 24%,transparent);
  content:"";
}

.notification-avatar{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  overflow:hidden;
  border-radius:15px;
  background:var(--notification-raised);
  color:var(--notification-text);
  font-size:14px;
  font-weight:900;
}

.notification-avatar img{
  width:100%;
  height:100%;
  background:transparent;
  object-fit:cover;
}

.notification-avatar:has(img){
  background:transparent;
}

.notification-copy{
  display:grid;
  min-width:0;
  gap:3px;
}

.notification-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.notification-meta small{
  color:var(--luca-purple);
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.notification-meta time,
.notification-actor{
  color:var(--notification-muted);
  font-size:9px;
}

.notification-copy strong,
.notification-copy > span:not(.notification-meta),
.notification-actor{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.notification-copy strong{
  font-size:14px;
  line-height:1.2;
}

.notification-copy > span:not(.notification-meta){
  color:var(--notification-text);
  font-size:12px;
  opacity:.82;
}

.notification-unread-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--luca-purple);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--luca-purple) 10%,transparent);
}

.notification-empty{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:64px 20px;
  border-radius:24px;
  background:var(--notification-card);
  color:var(--notification-muted);
  box-shadow:0 14px 42px rgba(28,22,54,.07);
}

.notification-empty span{
  font-size:28px;
}

.account-notification-list{
  margin-top:0;
}

.account-notification-groups{
  display:grid;
  gap:30px;
  margin-top:22px;
  background:transparent;
}

body.notifications-route .account-notification-group{
  display:grid;
  width:100%;
  gap:12px;
  margin:0;
  padding:0;
}

body.notifications-route .account-notification-group > h3{
  margin:0;
  color:var(--notification-text);
  font-size:14px;
  font-weight:900;
}

@media (hover:hover) and (pointer:fine){
  .notification-row:hover,
  .notification-shortcuts a:hover{
    filter:brightness(.985);
  }
}

@media (max-width:719px){
  .notifications-page{
    width:calc(100% - 24px);
    padding-top:86px;
    padding-bottom:112px;
  }

  .notification-shortcuts{
    margin:0 0 24px;
  }

  .notification-shortcuts a{
    border-radius:16px;
    padding:13px 14px;
  }

  .notification-row{
    grid-template-columns:40px minmax(0,1fr) 7px;
    gap:11px;
    min-height:84px;
    padding:12px 14px;
  }

  .notification-avatar{
    width:40px;
    height:40px;
    border-radius:13px;
  }
}
.article-comment[data-comment-id] {
  scroll-margin-top: 96px;
}

.article-comment.is-interaction-target {
  outline: 2px solid var(--interaction-accent, #684cff);
  outline-offset: 3px;
  background: color-mix(in srgb, var(--interaction-accent, #684cff) 14%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--interaction-accent, #684cff) 8%, transparent);
  transition: background-color .25s ease, box-shadow .25s ease, outline-color .25s ease;
}