.notifications-page{--np-radius:16px;--np-unread:#38bdf8;--np-danger:#f87171;width:100%;max-width:none;margin:0;padding-bottom:.5rem;position:relative}.notifications-page__header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.25rem;margin-bottom:1rem;display:flex}.notifications-page__heading{min-width:min(100%,280px)}.notifications-page__title-row{flex-wrap:wrap;align-items:center;gap:.65rem;display:flex}.notifications-page__title{letter-spacing:-.025em;color:var(--text);margin:0;font-size:clamp(1.45rem,2.2vw,1.75rem);font-weight:650;line-height:1.15}.notifications-page__lead{color:var(--text-muted);max-width:56ch;margin:.4rem 0 0;font-size:.92rem}.notifications-page__unread-pill{background:color-mix(in srgb, var(--text) 7%, transparent);border:1px solid var(--border);color:var(--text);letter-spacing:.01em;border-radius:999px;align-items:center;gap:.35rem;padding:.2rem .6rem;font-size:.74rem;font-weight:650;display:inline-flex}.notifications-page__caught-up{color:var(--text-muted);font-size:.78rem;font-weight:600}.notifications-page__panel{z-index:1;border-radius:var(--np-radius);border:1px solid var(--border);background:var(--surface);position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0a,0 18px 40px -28px #00000073}.notifications-page__toolbar{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--bg) 35%, var(--surface));flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem 1.15rem;display:flex}.notifications-page__mark-all{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:10px;align-items:center;gap:.4rem;padding:.4rem .8rem;font-size:.82rem;font-weight:600;transition:background-color .18s,border-color .18s;display:inline-flex}.notifications-page__mark-all:hover:not(:disabled){border-color:color-mix(in srgb, var(--text) 22%, var(--border));background:color-mix(in srgb, var(--text) 6%, transparent)}.notifications-page__mark-all:disabled{opacity:.45;cursor:default}.notifications-page__pager{align-items:center;gap:.2rem;display:flex}.notifications-page__pager-range{color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums;padding:0 .45rem;font-size:.8rem}.notifications-page__pager-btn{width:32px;height:32px;color:var(--text);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;transition:background-color .15s,border-color .15s;display:inline-flex}.notifications-page__pager-btn:hover:not(:disabled){background:color-mix(in srgb, var(--text) 7%, transparent);border-color:var(--border)}.notifications-page__pager-btn:disabled{opacity:.35;cursor:default}.notifications-page__list{flex-direction:column;min-height:220px;display:flex}.notifications-page__status{color:var(--text-muted);text-align:center;margin:0;padding:2rem 1.5rem;font-size:.9rem}.notifications-page__status--error{color:var(--np-danger)}.notifications-page__skeletons{flex-direction:column;gap:0;padding:.5rem 0;display:flex}.notifications-page__skeleton{background:linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 0%, color-mix(in srgb, var(--text) 9%, transparent) 45%, color-mix(in srgb, var(--text) 4%, transparent) 100%);background-size:200% 100%;border-radius:12px;height:78px;margin:.65rem 1.5rem;animation:1.2s ease-in-out infinite np-shimmer}.notifications-page__empty{text-align:center;flex-direction:column;align-items:center;gap:.4rem;padding:3.5rem 1.5rem;display:flex}.notifications-page__empty-orb{width:76px;height:76px;color:var(--secondary);background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--secondary) 28%, transparent), transparent 60%), color-mix(in srgb, var(--bg) 70%, var(--surface));border:1px solid color-mix(in srgb, var(--secondary) 25%, var(--border));border-radius:999px;place-items:center;margin-bottom:.5rem;animation:3.2s ease-in-out infinite np-float;display:grid}.notifications-page__empty-title{color:var(--text);margin:0;font-size:1.05rem;font-weight:700}.notifications-page__empty-hint{color:var(--text-muted);max-width:32ch;margin:0;font-size:.88rem}.notifications-page__group-label{z-index:2;border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--bg) 55%, var(--surface));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;margin:0;padding:.75rem 1.5rem;font-size:.7rem;font-weight:700;line-height:1.2;position:sticky;top:0}.notifications-page__item{border-bottom:1px solid var(--border);grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:1rem 1.15rem;padding:1.05rem 1.5rem;transition:background-color .18s,transform .18s;animation:.35s both np-row-in;display:grid;position:relative}.notifications-page__item:last-child{border-bottom:none}.notifications-page__item--interactive{cursor:pointer}.notifications-page__item--interactive:hover{background:color-mix(in srgb, var(--text) 4.5%, transparent)}.notifications-page__item--interactive:hover .notifications-page__actions{opacity:1;transform:translate(0)}.notifications-page__item--unread{background:linear-gradient(90deg, color-mix(in srgb, var(--np-unread) 11%, transparent), color-mix(in srgb, var(--np-unread) 3%, transparent) 35%, transparent 62%)}.notifications-page__item--unread:before{content:"";background:var(--np-unread);width:3px;box-shadow:0 0 12px color-mix(in srgb, var(--np-unread) 55%, transparent);border-radius:0 3px 3px 0;position:absolute;top:.55rem;bottom:.55rem;left:0}.notifications-page__item--read{opacity:.88}.notifications-page__item--read .notifications-page__message{color:var(--text-muted);font-weight:400}.notifications-page__item--read .notifications-page__message strong{color:var(--text);font-weight:600}.notifications-page__status-icon{flex-shrink:0;place-items:center;width:22px;height:22px;display:grid}.notifications-page__status-icon--unread{color:var(--np-unread)}.notifications-page__status-icon--read{color:color-mix(in srgb, var(--secondary) 75%, var(--text-muted));opacity:.85}.notifications-page__pulse{background:var(--np-unread);width:9px;height:9px;box-shadow:0 0 0 0 color-mix(in srgb, var(--np-unread) 55%, transparent);border-radius:999px;animation:1.8s ease-out infinite np-pulse}.notifications-page__avatar-wrap{flex-shrink:0;position:relative}.notifications-page__avatar-wrap--unread:after{content:"";border:2px solid color-mix(in srgb, var(--np-unread) 70%, transparent);pointer-events:none;border-radius:999px;position:absolute;inset:-3px}.notifications-page__avatar{-o-object-fit:cover;object-fit:cover;border:1px solid var(--border);border-radius:999px;width:46px;height:46px;display:block}.notifications-page__avatar--fallback{background:color-mix(in srgb, var(--bg) 80%, var(--surface));color:var(--text-muted);justify-content:center;align-items:center;font-size:.95rem;font-weight:700;display:flex}.notifications-page__body{flex-direction:column;gap:.28rem;min-width:0;display:flex}.notifications-page__message{color:var(--text);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:.98rem;line-height:1.4;display:-webkit-box;overflow:hidden}.notifications-page__item--unread .notifications-page__message{font-weight:600}.notifications-page__item--unread .notifications-page__message strong{font-weight:800}.notifications-page__meta{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:.3rem;font-size:.75rem;display:flex}.notifications-page__meta-sep{opacity:.55}.notifications-page__badge{letter-spacing:.01em;font-weight:600}.notifications-page__badge--unread{color:var(--np-unread)}.notifications-page__view{color:var(--secondary);font-weight:700}.notifications-page__time{text-align:right;font-variant-numeric:tabular-nums;min-width:8.5rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0;font-size:.8rem}.notifications-page__time--inline,.notifications-page__meta-sep--inline{display:none}.notifications-page__actions{opacity:.55;align-items:center;gap:.25rem;transition:opacity .18s,transform .18s;display:flex;transform:translate(4px)}.notifications-page__action{width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:inline-flex}.notifications-page__action:hover:not(:disabled){background:color-mix(in srgb, var(--secondary) 14%, transparent);color:var(--secondary)}.notifications-page__action--danger:hover:not(:disabled){background:color-mix(in srgb, var(--np-danger) 16%, transparent);color:var(--np-danger)}.notifications-page__action:disabled{opacity:.45;cursor:default}@media (hover:none){.notifications-page__actions{opacity:1;transform:none}}@keyframes np-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@keyframes np-row-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes np-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--np-unread) 50%, transparent)}70%{box-shadow:0 0 0 8px #0000}to{box-shadow:0 0 #0000}}@keyframes np-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media (width<=720px){.notifications-page__header{align-items:stretch}.notifications-page__toolbar{padding:.65rem 1rem}.notifications-page__item{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"status avatar body""status avatar actions";gap:.75rem .85rem;padding:.95rem 1rem}.notifications-page__status-icon{grid-area:status;align-self:start;margin-top:.35rem}.notifications-page__avatar-wrap{grid-area:avatar;align-self:start}.notifications-page__body{grid-area:body}.notifications-page__time{display:none}.notifications-page__time--inline,.notifications-page__meta-sep--inline{display:inline}.notifications-page__actions{opacity:1;grid-area:actions;justify-self:end;margin-top:.15rem;transform:none}.notifications-page__group-label{padding:.7rem 1rem}.notifications-page__skeleton{margin:.55rem 1rem}}@media (width>=1100px){.notifications-page__item{grid-template-columns:auto auto minmax(0,1fr) 10.5rem auto;gap:1.1rem 1.35rem;padding:1.15rem 1.75rem}.notifications-page__group-label{padding:.8rem 1.75rem}.notifications-page__avatar{width:48px;height:48px}.notifications-page__message{font-size:1.02rem}.notifications-page__time{min-width:10.5rem}}