@layer components{.notification{&.on{&::before{color:var(--color-notification-badge-bg)}&:hover::before,&:focus-visible::before{color:var(--color-bg-surface)}}}:root[data-theme="dark"]{.notification{&.on{&:hover::before,&:focus-visible::before{color:var(--color-white)}}}}.notification__panel{--notification-accent:rgb(20 126 214);--notification-accent-soft:rgb(219 234 254 / 0.72);--notification-accent-panel:rgb(248 251 255);--notification-accent-border:rgb(191 219 254)}.site-header__notification-badge{position:absolute;top:0.1875rem;right:0.1875rem;display:grid;place-items:center;min-width:var(--space-15);height:var(--space-15);padding:0 0.1875rem;border:var(--border-width-hairline) solid var(--color-brand-primary);border-radius:var(--radius-round);background:var(--color-neutral-900,var(--color-text-header-control));color:var(--color-white);font-size:var(--text-xs);font-weight:var(--font-weight-bold);line-height:var(--leading-badge);text-align:center;pointer-events:none}.site-header__notification-badge[hidden]{display:none}.site-header__notification-badge--inline{position:static;margin-left:auto;border-color:transparent}.notification-counter-mobiel{position:absolute;top:0.6rem;right:-0.3rem;display:none;justify-content:center;justify-items:center;flex-direction:column;width:var(--space-16);aspect-ratio:1 / 1;border-radius:var(--radius-round);background-color:var(--color-notification-badge-bg);color:var(--color-notification-badge-text);font-size:var(--text-xs);opacity:0;transform:translate(30%);&.is-active{display:flex;opacity:1}}.site-header__dropdown-panel--notification{width:min(31rem,calc(100vw - var(--space-16)));max-width:calc(100vw - var(--space-16));border-radius:var(--radius-corner)}.site-header__dropdown-panel--notification{@media (max-width:1200px){right:0;left:auto;width:min(24rem,calc(100vw - var(--space-16)));min-width:0;max-width:calc(100vw - var(--space-16));transform:none}}.site-header__dropdown-panel--notification{@media (min-width:1200px){display:grid;gap:var(--space-14);width:min(31rem,calc(100vw - var(--space-24)));padding:var(--space-20);border:var(--border-width-hairline) solid var(--color-border-subtle);border-radius:calc(var(--radius-corner) + var(--space-4));background:var(--color-bg-surface);color:var(--color-text);box-shadow:0 1.25rem 3rem var(--color-dropdown-shadow)}}.notification-panel__header{display:flex;align-items:center;gap:var(--space-12);min-width:0}.notification-panel__title{margin:0;color:var(--color-text);font-size:var(--text-lg);font-weight:var(--font-weight-extrabold);line-height:var(--leading-tight);letter-spacing:0;@media (min-width:1200px){font-size:var(--text-xl)}}.notification-panel__count{display:inline-grid;place-items:center;min-width:var(--space-32);height:var(--space-32);padding-inline:var(--space-8);border-radius:var(--radius-round);background:var(--color-brand-primary);color:var(--color-text-header-control);font-size:var(--text-sm);font-weight:var(--font-weight-bold);line-height:1}.notification-panel__count[hidden]{display:none}.site-header__dropdown-list--notification{overflow-y:auto;overscroll-behavior:contain;display:grid;gap:var(--space-10);max-height:min(26rem,calc(100vh - 13rem));padding:0;list-style:none;scroll-behavior:smooth;scrollbar-gutter:stable}.dropdown-notification .notification-item{height:auto}.notification-item.notification-item--comment{display:grid;grid-template-columns:var(--space-10) var(--space-56) minmax(0,1fr);align-items:center;gap:var(--space-14);min-height:6.75rem;padding:var(--space-16);border:var(--border-width-hairline) solid var(--notification-accent-border);border-radius:var(--radius-corner);background:radial-gradient(circle at 12% 50%,color-mix(in oklch,var(--notification-accent) 14%,transparent),transparent 34%),linear-gradient(135deg,var(--notification-accent-panel),var(--color-bg-surface));color:var(--color-text);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}.notification-item.notification-item--comment:hover,.notification-item.notification-item--comment:focus-visible{outline:none;background:radial-gradient(circle at 12% 50%,color-mix(in oklch,var(--notification-accent) 18%,transparent),transparent 36%),linear-gradient(135deg,color-mix(in oklch,var(--notification-accent-panel) 92%,var(--color-bg-surface)),var(--color-bg-surface));box-shadow:0 0.75rem 1.5rem var(--color-shadow-soft);transform:translateY(-2px)}.notification-item.notification-item--comment:focus-visible{box-shadow:0 0 0 0.125rem var(--color-focus-gold),0 0.75rem 1.5rem var(--color-shadow-soft)}.notification-item--friend-request{--notification-accent:var(--color-brand-primary);--notification-accent-soft:rgb(254 215 64 / 0.55);--notification-accent-panel:rgb(255 250 235);--notification-accent-border:rgb(254 224 138)}.notification-item--favorite{--notification-accent:rgb(80 190 26);--notification-accent-soft:rgb(220 252 187 / 0.72);--notification-accent-panel:rgb(250 255 244);--notification-accent-border:rgb(190 231 160)}.notification-item--badge{--notification-accent:rgb(245 158 11);--notification-accent-soft:rgb(254 243 199 / 0.72);--notification-accent-panel:rgb(255 251 235);--notification-accent-border:rgb(252 211 77)}.notification-item__status{display:block;width:var(--space-10);height:var(--space-10);border-radius:var(--radius-round);background:var(--notification-accent);box-shadow:0 0.25rem 0.75rem color-mix(in oklch,var(--notification-accent) 24%,transparent)}.notification-item__icon-wrap{position:relative;display:grid;place-items:center;width:var(--space-56);height:var(--space-56);border-radius:var(--radius-round);background:radial-gradient(circle at 30% 22%,rgb(255 255 255 / 0.5),transparent 48%),var(--notification-accent-soft);color:var(--color-neutral-900)}.notification-item__icon{position:static;display:block;width:var(--space-24);height:var(--space-24)}.notification-item__icon-plus{position:absolute;right:0.85rem;bottom:0.85rem;width:0.75rem;height:0.75rem}.notification-item__right{display:grid;grid-template-columns:minmax(0,1fr) var(--space-20);align-items:center;gap:var(--space-14);min-width:0}.notification-item-right__left{display:grid;gap:var(--space-6);min-width:0}.notification-comment{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-weight-regular);line-height:var(--leading-tight)}.notification-item-right__left p{display:-webkit-box;overflow:hidden;margin:0;color:var(--color-text);font-size:var(--text-base);font-weight:var(--font-weight-extrabold);line-height:var(--leading-tight);overflow-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.notification-item-right__left time{color:var(--color-text-faint);font-size:var(--text-sm);font-weight:var(--font-weight-regular);line-height:var(--leading-tight)}.notification-item-right__right{display:flex;align-items:center;justify-content:flex-end;opacity:1}.notification-item__chevron{position:static;display:block;width:var(--space-20);height:var(--space-20);color:var(--color-text)}.notification-item__remove{display:none}.notification-bottom{display:flex;align-items:center;margin:var(--space-4) 0 0;padding-top:var(--space-16);border-top:var(--border-width-hairline) solid var(--color-border-subtle)}.notification-bottom.hidden,.notification-bottom[hidden]{display:none;opacity:0}.notification-bottom__action{display:inline-grid;grid-template-columns:var(--space-20) max-content;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--space-40);padding:var(--space-6) var(--space-10);border-radius:var(--radius-corner);background:transparent;width:100%;color:var(--color-text);font:inherit;font-size:var(--text-base);font-weight:var(--font-weight-regular);line-height:var(--leading-tight);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}.notification-bottom__action+.notification-bottom__action{border-left:var(--border-width-hairline) solid var(--color-border-subtle);border-radius:0 var(--radius-corner) var(--radius-corner) 0}.notification-bottom__action:hover,.notification-bottom__action:focus-visible{outline:none;background:var(--color-bg-surface-soft);color:var(--color-text)}.notification-bottom__action:focus-visible{box-shadow:0 0 0 0.125rem var(--color-focus-gold)}.notification-bottom__action--remove:hover,.notification-bottom__action--remove:focus-visible{background:color-mix(in oklch,var(--color-danger) 10%,transparent);color:var(--color-danger)}.notification-bottom__action--remove:focus-visible{box-shadow:0 0 0 0.125rem color-mix(in oklch,var(--color-danger) 24%,transparent)}.notification-bottom__icon{position:static;display:block;flex:0 0 auto;width:var(--space-16);height:var(--space-16);min-width:var(--space-20);color:currentColor}.notification-empty{display:grid;place-items:center;min-height:7rem;padding:var(--space-20);border:var(--border-width-hairline) solid var(--color-border-subtle);border-radius:var(--radius-corner);background:var(--color-bg-surface-soft);color:var(--color-text-faint);text-align:center}.notification-empty p{margin:0}.site-header-mobile__avatar-wrap .site-header__notification-badge,.mobile-drawer__avatar-wrap .site-header__notification-badge{@media (max-width:1200px){top:-0.125rem;right:-0.25rem;border-color:var(--color-header-bg)}}.mobile-drawer__icon .site-header__notification-badge{@media (max-width:1200px){top:-0.3125rem;right:0;border-color:var(--color-bg-surface)}}.mobile-drawer__notification-list{@media (max-width:1200px){display:grid;gap:var(--space-12);padding:0;list-style:none}}.mobile-drawer__notification-list .notification-item.notification-item--comment{@media (max-width:1200px){grid-template-columns:var(--space-12) var(--space-48) minmax(0,1fr);gap:var(--space-12);min-height:auto;padding:var(--space-14);border-radius:var(--radius-corner)}}.mobile-drawer__notification-list .notification-item__icon-wrap{@media (max-width:1200px){width:var(--space-48);height:var(--space-48)}}.mobile-drawer__notification-list .notification-item__icon{@media (max-width:1200px){width:var(--space-20);height:var(--space-20)}}.mobile-drawer__notification-list .notification-item__icon-plus{@media (max-width:1200px){right:0.7rem;bottom:0.7rem;width:0.75rem;height:0.75rem}}.mobile-drawer__notification-list .notification-item-right__left p{@media (max-width:1200px){font-size:var(--text-base)}}.mobile-drawer__notification-list .notification-comment,.mobile-drawer__notification-list .notification-item-right__left time{@media (max-width:1200px){font-size:var(--text-sm)}}.mobile-drawer__body .notification-bottom{@media (max-width:1200px){grid-template-columns:1fr;gap:var(--space-6);padding-top:var(--space-12)}}.mobile-drawer__body .notification-bottom__action+.notification-bottom__action{@media (max-width:1200px){border-top:var(--border-width-hairline) solid var(--color-border-subtle);border-left:0;border-radius:var(--radius-corner)}}:root[data-theme="dark"] .site-header__dropdown-panel--notification{@media (min-width:1200px){border-color:var(--color-border-on-dark);background:var(--color-bg-surface);box-shadow:0 1.25rem 3rem color-mix(in oklch,var(--color-black) 34%,transparent)}}:root[data-theme="dark"] .notification-item.notification-item--comment{background:radial-gradient(circle at 12% 50%,color-mix(in oklch,var(--notification-accent) 18%,transparent),transparent 34%),linear-gradient(135deg,color-mix(in oklch,var(--notification-accent) 10%,var(--color-bg-surface)),var(--color-bg-surface))}:root[data-theme="dark"] .notification-item.notification-item--comment:hover,:root[data-theme="dark"] .notification-item.notification-item--comment:focus-visible{background:radial-gradient(circle at 12% 50%,color-mix(in oklch,var(--notification-accent) 22%,transparent),transparent 36%),linear-gradient(135deg,color-mix(in oklch,var(--notification-accent) 14%,var(--color-bg-surface)),var(--color-bg-surface));box-shadow:0 0.75rem 1.5rem color-mix(in oklch,var(--color-black) 20%,transparent)}:root[data-theme="dark"] .notification-bottom__action:hover,:root[data-theme="dark"] .notification-bottom__action:focus-visible{background:var(--color-bg-on-dark-subtle)}}