.notification-bell { position:relative; display:flex; flex:0 0 44px; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px; border-radius:50%; color:inherit; background:#f6f5f7; text-decoration:none; }
.notification-bell svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.notification-dot { position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%; background:#e72f88; box-shadow:0 0 0 2px #fff; }
.notification-dot[hidden] { display:none; }
.header-actions.has-notification-bell { display:flex; align-items:center; gap:8px; }
.notification-bell:focus-visible,.notifications-page :is(a,button):focus-visible { outline:3px solid #b2257b; outline-offset:3px; }
.notifications-page { --notification-surface:#fff; --notification-ink:#18141e; --notification-muted:#706b78; --notification-line:#eeebf0; background:var(--notification-surface); color:var(--notification-ink); }
.notifications-page > .page-shell { width:100%; max-width:760px; margin:0 auto; }
.notifications-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:28px 24px 18px; }
.notifications-header h1 { margin:0; font-size:32px; font-weight:800; letter-spacing:-.035em; overflow-wrap:anywhere; }
.notifications-header .header-actions { flex:0 0 44px; width:44px; max-width:44px; }
.notifications-header h1 { flex:1; min-width:0; max-width:none; }
.notifications-header .header-user-profile { width:44px; height:44px; min-height:44px; padding:0; }
.notifications-header .header-user-copy { display:none; }
.notifications-header .header-user-avatar { width:44px; height:44px; border-radius:50%; }
.notifications-main { padding:0 24px 32px; }
.notification-filters { display:flex; gap:8px; overflow-x:auto; padding:4px 0 16px; }
.notification-filters button { min-height:44px; padding:8px 16px; border:0; border-radius:999px; font:inherit; font-size:13px; font-weight:500; line-height:1.2; background:#f6f4f6; color:inherit; cursor:pointer; }
.notification-filters button[aria-pressed="true"] { color:white; background:linear-gradient(115deg,#8c38db,#d82f86); }
.notification-group-title { font-size:15px; color:var(--notification-muted); margin:18px 0 4px; }
.notification-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; padding:16px 0; border-bottom:1px solid var(--notification-line); min-width:0; }
.notification-row.is-unread { background:linear-gradient(90deg,#e72f8809,transparent); }
.notification-row a { color:inherit; text-decoration:none; }
.notification-avatar { width:44px; height:44px; display:block; border-radius:50%; overflow:hidden; }
.notification-avatar img { width:100%; height:100%; object-fit:cover; }
.notification-copy { min-width:0; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.notification-copy p { margin:0; }
.notification-copy time { font-size:12px; color:var(--notification-muted); }
.notification-content { display:block; }
.notification-thumbnail { width:42px; height:52px; border-radius:6px; overflow:hidden; display:grid; place-items:center; color:white !important; font-weight:800; background:linear-gradient(140deg,#703ea5,#d94389); }
.notification-thumbnail img { width:100%; height:100%; object-fit:cover; }
.notification-request-actions { display:flex; flex-wrap:wrap; gap:6px; grid-column:2 / -1; }
.notification-request-actions button { min-height:44px; border:1px solid var(--notification-line); border-radius:12px; padding:8px 12px; font:inherit; font-size:13px; font-weight:600; line-height:1.2; background:#f6f4f6; color:inherit; cursor:pointer; }
.notification-request-actions button:first-child { background:#bd247b; color:#fff; border-color:transparent; }
.notification-request-actions button:disabled { opacity:.6; }
.notification-accepted { font-size:12px; color:var(--notification-muted); }
.notifications-empty,.notifications-status { color:var(--notification-muted); font-size:14px; line-height:1.5; }
.notifications-empty { padding:40px 0; text-align:center; }
.notifications-load { display:block; margin:20px auto; min-height:44px; padding:8px 18px; border:1px solid var(--notification-line); border-radius:999px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.notifications-main [hidden] { display:none; }
@media(max-width:768px) {
  /* Grow only the account slot; safe-area padding and header height stay owned by the existing shell. */
  .brandbook-body:not(.library-mobile-results-view) .mobile-app-header:has(.has-notification-bell) { grid-template-columns:minmax(0,1fr) 104px; }
  .brandbook-body:not(.library-mobile-results-view) .mobile-app-header .header-actions.has-notification-bell { width:104px; max-width:104px; min-width:104px; grid-column:2; }
  .brandbook-body:is(.quiz-page,.community-page) .mobile-app-header:has(.has-notification-bell) { grid-template-columns:44px minmax(0,1fr) 104px; }
  .brandbook-body:is(.quiz-page,.community-page) .mobile-app-header .header-actions.has-notification-bell { grid-column:3; }
  .brandbook-body .header-actions.has-notification-bell { flex-basis:104px; }
  .brandbook-body .has-notification-bell .header-user-menu { flex:0 0 52px; width:52px; }
  .brandbook-body:not(.library-mobile-results-view) .mobile-app-header:has(.has-notification-bell) > :is(strong,h1) { min-width:0; font-size:clamp(22px,6vw,32px); overflow-wrap:anywhere; }
  .library-page .site-header:has(.has-notification-bell) { grid-template-columns:minmax(0,1fr) 104px; }
  .library-page .site-header .has-notification-bell { width:104px; max-width:104px; }
  .notifications-header { padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px)); }
  .notifications-header h1 { font-size:30px; }
  .notifications-main { padding:0 max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px)); }
}
html[data-theme="dark"] .notifications-page { --notification-surface:#151318; --notification-ink:#f4eff7; --notification-muted:#b9b1c2; --notification-line:#37313c; }
html[data-theme="dark"] :is(.notification-bell,.notification-filters button:not([aria-pressed="true"]),.notification-request-actions button:not(:first-child),.privacy-setting-row,.privacy-help-dialog) { background:#242028; color:#f4eff7; border-color:#49404f; }
html[data-theme="dark"] .privacy-help-dialog p { color:#cbc1d1; }