/* Notifications panel + settings (portal/notify.js). Uses the portal's theme
   tokens (theme-hl.css), so light and dark follow the app. */
#bpx#bpx#bpx#bpx .nt-menu{width:400px;max-width:calc(100vw - 16px);max-height:min(78vh,620px);padding:0;display:flex;flex-direction:column;overflow:hidden}
#bpx#bpx#bpx#bpx .nt-menu .hl-mhead{margin:0;padding:12px 12px 10px 16px;gap:8px;flex:0 0 auto}
#bpx#bpx#bpx#bpx .nt-menu .hl-mhead > span:first-child{min-width:0;flex:1}
#bpx#bpx#bpx#bpx .nt-menu .hl-mhtml{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#bpx#bpx#bpx#bpx .nt-body{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
#bpx#bpx#bpx#bpx .nt-list{overflow:auto;padding:4px;flex:1 1 auto;min-height:0;overscroll-behavior:contain}
#bpx#bpx#bpx#bpx .nt-hb{display:inline-grid;place-items:center;min-height:0 !important;height:30px;min-width:30px;padding:0 8px !important;margin:0 !important;border:0 !important;border-radius:6px !important;
  background:transparent !important;box-shadow:none !important;color:var(--grey) !important;font:600 12.5px/1 var(--sans) !important;cursor:pointer;white-space:nowrap}
#bpx#bpx#bpx#bpx .nt-hb:hover,#bpx#bpx#bpx#bpx .nt-hb:focus-visible{background:var(--hl-hover) !important;color:var(--ink) !important;outline:none}
#bpx#bpx#bpx#bpx .nt-hb.txt{color:var(--blue) !important}
#bpx#bpx#bpx#bpx .nt-svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#bpx#bpx#bpx#bpx .nt-hb .nt-svg{width:18px;height:18px}
#bpx#bpx#bpx#bpx .nt-lab{padding:10px 12px 4px;font:600 11.5px/1.2 var(--sans);color:var(--mu);letter-spacing:.02em;text-transform:uppercase}

#bpx#bpx#bpx#bpx .nt-it{position:relative;display:flex !important;align-items:flex-start;gap:10px;width:100%;min-height:0 !important;padding:9px 10px 9px 12px !important;margin:0 !important;box-sizing:border-box;
  border:0 !important;border-radius:8px !important;background:transparent !important;box-shadow:none !important;color:var(--ink-2) !important;
  font:400 13px/18px var(--sans) !important;text-align:left;cursor:pointer;transform:none !important}
#bpx#bpx#bpx#bpx .nt-it:hover,#bpx#bpx#bpx#bpx .nt-it:focus-visible{background:var(--hl-hover) !important;outline:none}
#bpx#bpx#bpx#bpx .nt-it:focus-visible{box-shadow:inset 0 0 0 2px var(--blue) !important}
#bpx#bpx#bpx#bpx .nt-it.unread{background:var(--blue-l) !important}
#bpx#bpx#bpx#bpx .nt-it.unread:hover{filter:brightness(.98)}
#bpx#bpx#bpx#bpx .nt-it.hi::before{content:"";position:absolute;left:3px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--err)}
#bpx#bpx#bpx#bpx .nt-it.lo{opacity:.85}
#bpx#bpx#bpx#bpx .nt-ic{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--grey)}
#bpx#bpx#bpx#bpx .nt-ic .nt-svg{width:17px;height:17px}
#bpx#bpx#bpx#bpx .nt-ic.k0{background:#EFF8FF;color:#175CD3}   /* leads & sales */
#bpx#bpx#bpx#bpx .nt-ic.k1{background:#F4F3FF;color:#5925DC}   /* projects */
#bpx#bpx#bpx#bpx .nt-ic.k2{background:#ECFDF3;color:#027A48}   /* money */
#bpx#bpx#bpx#bpx .nt-ic.k3{background:#FDF2FA;color:#C11574}   /* team */
#bpx#bpx#bpx#bpx .nt-ic.k4{background:#FFF6ED;color:#C4320A}   /* customers */
#bpx#bpx#bpx#bpx .nt-ic.k5{background:#F0F9FF;color:#026AA2}   /* subs */
#bpx#bpx#bpx#bpx .nt-ic.k6{background:#FEF3F2;color:#B42318}   /* deadlines */
#bpx#bpx#bpx#bpx .nt-ic.kn{background:var(--warn-l);color:var(--warn-t)}
#bpx#bpx#bpx#bpx.bpx-dark .nt-ic.k0{background:#102A56;color:#84CAFF}
#bpx#bpx#bpx#bpx.bpx-dark .nt-ic.k1{background:#27115F;color:#BDB4FE}
#bpx#bpx#bpx#bpx.bpx-dark .nt-ic.k2{background:#053321;color:#75E0A7}
#bpx#bpx#bpx#bpx.bpx-dark .nt-ic.k3{background:#4E0D30;color:#FAA7E0}
#bpx#bpx#bpx#bpx.bpx-dark .nt-ic.k4{background:#511C10;color:#FDB022}
#bpx#bpx#bpx#bpx.bpx-dark .nt-ic.k5{background:#0B4A6F;color:#7CD4FD}
#bpx#bpx#bpx#bpx.bpx-dark .nt-ic.k6{background:#55160C;color:#FDA29B}
#bpx#bpx#bpx#bpx .nt-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#bpx#bpx#bpx#bpx .nt-tx b{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
#bpx#bpx#bpx#bpx .nt-it:not(.unread) .nt-tx b{font-weight:500}
#bpx#bpx#bpx#bpx .nt-tx small{font-size:12.5px;line-height:17px;color:var(--grey);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#bpx#bpx#bpx#bpx .nt-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-top:1px}
#bpx#bpx#bpx#bpx .nt-meta time{font-size:11.5px;color:var(--mu);white-space:nowrap}
#bpx#bpx#bpx#bpx .nt-dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
#bpx#bpx#bpx#bpx .nt-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 20px;text-align:center;color:var(--grey);font-size:13px}
#bpx#bpx#bpx#bpx .nt-empty .nt-svg{width:30px;height:30px;color:var(--mu);stroke-width:1.5}
#bpx#bpx#bpx#bpx .nt-empty small{font-size:12.5px;color:var(--mu);max-width:260px}

#bpx#bpx#bpx#bpx .nt-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:4px;padding:6px;border-top:1px solid var(--line)}
#bpx#bpx#bpx#bpx .nt-foot-b{flex:1 1 auto;display:inline-flex !important;align-items:center;justify-content:center;gap:6px;min-height:34px !important;padding:0 10px !important;margin:0 !important;
  border:0 !important;border-radius:6px !important;background:transparent !important;box-shadow:none !important;color:var(--ink-2) !important;font:500 12.5px/1 var(--sans) !important;cursor:pointer;white-space:nowrap}
#bpx#bpx#bpx#bpx .nt-foot-b:hover,#bpx#bpx#bpx#bpx .nt-foot-b:focus-visible{background:var(--hl-hover) !important;color:var(--ink) !important;outline:none}
#bpx#bpx#bpx#bpx .nt-foot-b .nt-svg{width:16px;height:16px;color:var(--mu)}
#bpx#bpx#bpx#bpx .nt-foot-note{flex:1 1 100%;padding:6px 10px;font-size:12px;color:var(--mu)}
#bpx#bpx#bpx#bpx .nt-prefs-in{overflow:auto;padding:4px 14px 14px;min-height:0;flex:1 1 auto}

/* settings (Settings > Notifications, and the crew panel) */
#bpx#bpx#bpx#bpx .nt-set{max-width:720px}
#bpx#bpx#bpx#bpx .nt-intro{margin:0 0 12px;color:var(--grey);font-size:13.5px}
#bpx#bpx#bpx#bpx .nt-set.compact .nt-intro{font-size:12.5px;margin:8px 0}
#bpx#bpx#bpx#bpx .nt-grp{margin:0 0 14px;padding:4px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);min-width:0}
#bpx#bpx#bpx#bpx .nt-set.compact .nt-grp{padding:2px 12px}
#bpx#bpx#bpx#bpx .nt-grp legend{padding:0 6px;margin-left:-6px;font:600 12px/1.2 var(--sans);color:var(--mu);text-transform:uppercase;letter-spacing:.03em}
#bpx#bpx#bpx#bpx .nt-sw,#bpx#bpx#bpx#bpx .nt-quiet{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-2);cursor:pointer}
#bpx#bpx#bpx#bpx .nt-grp > :last-child{border-bottom:0}
#bpx#bpx#bpx#bpx .nt-quiet{cursor:default;flex-wrap:wrap}
#bpx#bpx#bpx#bpx .nt-swt{min-width:0;flex:1 1 200px;display:flex;flex-direction:column;gap:2px}
#bpx#bpx#bpx#bpx .nt-swt b{font:500 13.5px/1.35 var(--sans);color:var(--ink)}
#bpx#bpx#bpx#bpx .nt-swt small{font-size:12.5px;line-height:1.4;font-weight:400;color:var(--grey)}
#bpx#bpx#bpx#bpx .nt-soon{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font:600 10.5px/1.3 var(--sans);color:var(--grey);vertical-align:1px}
#bpx#bpx#bpx#bpx .nt-sw input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
#bpx#bpx#bpx#bpx .nt-sw i{position:relative;flex:0 0 36px;width:36px;height:20px;border-radius:999px;background:var(--line);transition:background-color 140ms ease}
#bpx#bpx#bpx#bpx .nt-sw i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.2);transition:transform 140ms ease}
#bpx#bpx#bpx#bpx .nt-sw input:checked + i{background:var(--blue)}
#bpx#bpx#bpx#bpx .nt-sw input:checked + i::after{transform:translateX(16px)}
#bpx#bpx#bpx#bpx .nt-sw input:focus-visible + i{box-shadow:0 0 0 3px var(--hl-ring-c,rgba(21,94,239,.25))}
#bpx#bpx#bpx#bpx .nt-qt{display:inline-flex;align-items:center;gap:8px;color:var(--grey);font-size:13px}
#bpx#bpx#bpx#bpx .nt-qt input{width:auto;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:400 13px var(--sans)}
#bpx#bpx#bpx#bpx .nt-desk{padding:10px 0;border-bottom:1px solid var(--line-2)}
#bpx#bpx#bpx#bpx .nt-desk .nt-sw{padding:0;border:0}
#bpx#bpx#bpx#bpx .nt-btn{display:inline-flex !important;align-items:center;gap:6px;min-height:34px !important;padding:0 12px !important;margin:0 !important;border:1px solid var(--line) !important;border-radius:6px !important;
  background:var(--card) !important;box-shadow:none !important;color:var(--ink) !important;font:500 13px/1 var(--sans) !important;cursor:pointer}
#bpx#bpx#bpx#bpx .nt-btn:hover{background:var(--hl-hover) !important}
#bpx#bpx#bpx#bpx .nt-btn .nt-svg{width:17px;height:17px}
#bpx#bpx#bpx#bpx .nt-note{margin-top:6px;font-size:12.5px;color:var(--grey)}
#bpx#bpx#bpx#bpx .nt-saved{min-height:18px;font-size:12.5px;color:var(--ok-t)}
#bpx#bpx#bpx#bpx .nt-saved.err{color:var(--err-t)}

@media (max-width:820px){
  #bpx#bpx#bpx#bpx .nt-menu{width:calc(100vw - 16px);left:8px !important;max-height:calc(100vh - 72px)}
  #bpx#bpx#bpx#bpx .nt-it{padding:11px 10px 11px 12px !important}
}
@media (prefers-reduced-motion:reduce){ #bpx#bpx#bpx#bpx .nt-sw i,#bpx#bpx#bpx#bpx .nt-sw i::after{transition:none} }