/* ===== R87: notification system (bell, panel, toasts, preferences) ===== */
.ntf-nav{position:relative;}
.ntf-badge{display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 5px; margin-left:auto; border-radius:var(--radius-6); background:var(--color-action-insight); color:var(--color-text-inverse); font-size:10px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;}
.ntf-badge[hidden]{display:none;}
.ntf-nav[aria-expanded="true"]{background:rgba(97,225,238,.12); color:var(--color-action-primary);}
.site-sidebar.collapsed .ntf-badge{position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 3px; font-size:9px; margin-left:0;}

.ntf-panel{position:fixed; z-index:1100; left:calc(var(--sbw) + 10px); bottom:12px; width:380px; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); display:none; flex-direction:column; background:#031C3D; border:1px solid var(--color-border-strong); border-radius:var(--radius-container,8px); box-shadow:0 24px 56px -16px rgba(1,3,11,.75); color:#E1E6EC; overflow:hidden;}
.ntf-panel:focus{outline:none;}
.ntf-panel.open{display:flex; animation:ntfIn .16s ease;}
@keyframes ntfIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.ntf-head{display:flex; align-items:center; gap:2px; padding:20px 12px 8px 24px;}
.ntf-head h2{margin:0; margin-right:auto; font-family:var(--font-body); font-size:15px; font-weight:600; color:#E1E6EC; letter-spacing:0; text-transform:none;}
.ntf-act{display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 8px; border:0; border-radius:var(--radius-6); background:transparent; color:rgba(225,230,236,.55); font-family:var(--font-body); font-size:12.5px; font-weight:500; text-decoration:none; cursor:pointer;}
.ntf-act svg{width:16px; height:16px; flex:none;}
.ntf-act:hover{background:rgba(225,230,236,.08); color:#E1E6EC;}
.ntf-act:disabled{opacity:.35; cursor:default; background:transparent; color:rgba(225,230,236,.55);}
.ntf-act:focus-visible, .ntf-item:focus-visible, .ntf-f:focus-visible, .ntf-toast .toast-close:focus-visible{outline:2px solid var(--color-border-focus,#61E1EE); outline-offset:2px;}
.ntf-act.icon{width:32px; height:32px; padding:0;}
.ntf-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px 0 24px; border-bottom:1px solid var(--color-border-subtle);}
.ntf-filter{display:flex; gap:24px;}
.ntf-f{position:relative; height:40px; padding:0; border:0; border-radius:4px; background:transparent; color:rgba(225,230,236,.5); font-family:var(--font-body); font-size:13px; font-weight:500; cursor:pointer;}
.ntf-f:hover:not(.on){color:#E1E6EC;}
.ntf-f.on{color:#E1E6EC;}
.ntf-f.on::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--color-cyan,#61E1EE);}
.ntf-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding-bottom:8px;}
.ntf-scroll::-webkit-scrollbar{width:14px;}
.ntf-scroll::-webkit-scrollbar-track{background:transparent; margin:4px 0;}
.ntf-scroll::-webkit-scrollbar-thumb{background:#61E1EE; background-clip:padding-box; border:5px solid transparent; border-radius:10px; min-height:44px;}
.ntf-scroll::-webkit-scrollbar-thumb:hover{background:#9BEFF7; background-clip:padding-box;}
.ntf-scroll::-webkit-scrollbar-corner{background:transparent;}
@supports not selector(::-webkit-scrollbar){.ntf-scroll{scrollbar-width:thin; scrollbar-color:#61E1EE transparent;}}
.ntf-item{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 8px; gap:16px; align-items:center; width:100%; padding:16px 24px; border:0; background:transparent; text-align:left; color:inherit; font-family:var(--font-body); cursor:pointer;}
.ntf-item:hover{background:rgba(225,230,236,.04);}
.ntf-body{min-width:0; display:flex; flex-direction:column; gap:5px;}
.ntf-title{font-size:13px; font-weight:400; line-height:1.45; color:rgba(225,230,236,.55); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ntf-item.unread .ntf-title{font-weight:500; color:#E1E6EC;}
.ntf-meta{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:400; color:rgba(225,230,236,.4);}
.ntf-meta .ntf-live{color:rgba(225,230,236,.7);}
.ntf-meta .ntf-live::after{content:'\00b7'; margin-left:6px; color:rgba(225,230,236,.4);}
.ntf-dot{width:8px; height:8px; border-radius:50%; background:var(--color-cyan,#61E1EE); justify-self:end;}
.ntf-item:not(.unread) .ntf-dot{visibility:hidden;}
.ntf-empty{display:flex; flex-direction:column; align-items:center; gap:8px; padding:48px 24px 52px; text-align:center;}
.ntf-empty svg{width:28px; height:28px; color:rgba(225,230,236,.4); stroke-width:1.6;}
.ntf-empty b{font-size:14px; font-weight:500; color:#E1E6EC;}
.ntf-empty span{font-size:12.5px; line-height:1.5; color:rgba(225,230,236,.5); max-width:260px;}

.ntf-toasts{position:fixed; right:24px; bottom:24px; transition:bottom .2s ease; z-index:1250; display:flex; flex-direction:column-reverse; gap:10px; width:min(380px, calc(100vw - 32px)); pointer-events:none;}
.ntf-toast{pointer-events:auto; position:relative; animation:ntfToastIn .22s cubic-bezier(.16,1,.3,1); box-shadow:0 18px 40px -16px rgba(1,3,11,.7); cursor:pointer; padding:16px 12px 16px 16px; gap:14px; align-items:center;}
.ntf-toast.out{opacity:0; transform:translateX(12px); transition:opacity .18s ease, transform .18s ease;}
@keyframes ntfToastIn{from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:none;}}
.ntf-toast .toast-icon-chip{width:32px; height:32px; border:0; background:rgba(225,230,236,.08); color:rgba(225,230,236,.8);}
.ntf-toast .toast-title{font-size:13px; font-weight:500; line-height:1.45; color:#E1E6EC; margin:0;}
.ntf-toast .toast-action{margin-top:6px;}
.ntf-toast .toast-close{width:32px; height:32px; color:rgba(225,230,236,.55);}
.ntf-toast .toast-close:hover{color:#E1E6EC;}
.ntf-toast .toast-close svg{width:16px; height:16px;}

.ntf-m-btn{display:none;}
.ntf-m-dot{position:absolute; top:9px; right:9px; width:9px; height:9px; border-radius:50%; background:var(--color-action-insight,#FFDB00); border:2px solid var(--color-navy-base,#021329); box-sizing:content-box;}
.ntf-m-dot[hidden]{display:none;}

/* profile > notifications pane */
main[data-page="profile"][data-sec="notifications"] .pr-pane[data-pane="notifications"]{display:flex;}
.ntf-pref-head{display:flex; align-items:center; gap:16px; padding:14px 0 4px; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:rgba(225,230,236,.45);}
.ntf-pref-head .ntf-pref-lbl{flex:1 1 220px; min-width:0;}
.ntf-pref-head .ntf-pref-col{width:64px; text-align:center; flex:none;}
.ntf-pref-row{display:flex; align-items:center; gap:16px; padding:16px 0; flex-wrap:nowrap;}
.ntf-pref-row + .ntf-pref-row{border-top:1px solid rgba(225,230,236,.1);}
.ntf-pref-row .pr-row-txt{flex:1 1 220px;}
.ntf-pref-sw{width:64px; display:flex; flex-direction:column; align-items:center; gap:6px; flex:none;}
.ntf-pref-sw .ntf-sw-l{display:none; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:rgba(225,230,236,.45);}
.ntf-pref-sw .switch[aria-disabled="true"]{opacity:.45; cursor:not-allowed;}
.ntf-pref-sw .switch:focus-visible{outline:2px solid var(--color-border-focus,#61E1EE); outline-offset:2px;}


@media (max-width:1024px){
  .ntf-panel{left:0 !important; right:0; top:56px; bottom:0 !important; width:auto; max-width:none; max-height:none !important; border-radius:0; border-width:1px 0 0; box-shadow:none;}
  body.is-auth .ntf-m-btn{display:inline-flex; position:relative;}
  .ntf-toasts{right:12px; left:12px; bottom:12px; width:auto;}
  .ntf-pref-head{display:none;}
  .ntf-pref-row{flex-wrap:wrap;}
  .ntf-pref-sw{width:auto; flex-direction:row-reverse; gap:8px;}
  .ntf-pref-sw .ntf-sw-l{display:inline;}
}
@media (prefers-reduced-motion: reduce){ .ntf-panel.open, .ntf-toast{animation:none;} .ntf-toast.out{transition:none;} .ntf-meta .ntf-live i{animation:none;} }