/* Work Social — Notifications / Activity Master HUD DNA */
main:has(> div > div > h1) { color:#d9f7ff !important; }
main:has(> div > div > h1) > div:first-of-type { border-bottom-color:rgba(0,240,255,.18) !important; }
main:has(> div > div > h1) h1 { font-family:"JetBrains Mono",ui-monospace,monospace !important; letter-spacing:.08em !important; text-transform:uppercase !important; background:linear-gradient(135deg,#e8fdff,#66efff 48%,#8ca7ff) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; text-shadow:0 0 22px rgba(0,240,255,.22) !important; }
main:has(> div > div > h1) h1 + div { border:1px solid rgba(0,240,255,.22) !important; background:rgba(0,126,255,.13) !important; color:#7ff6ff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(0,240,255,.08) !important; font-family:"JetBrains Mono",ui-monospace,monospace !important; letter-spacing:.04em !important; }
main:has(> div > div > h1) h1 + div[style*="rgba(34,197,94"] { background:rgba(0,240,255,.08) !important; color:#9efaff !important; }
main:has(> div > div > h1) button { font-family:"JetBrains Mono",ui-monospace,monospace !important; letter-spacing:.03em !important; }
main:has(> div > div > h1) > div:first-of-type button { border:1px solid rgba(0,240,255,.42) !important; background:linear-gradient(135deg,rgba(0,240,255,.22),rgba(0,126,255,.24) 55%,rgba(72,65,225,.20)) !important; color:#bffaff !important; box-shadow:0 0 18px rgba(0,240,255,.10),inset 0 1px 0 rgba(255,255,255,.10) !important; }
main:has(> div > div > h1) > div:first-of-type button:not(:disabled):hover { border-color:rgba(0,240,255,.75) !important; box-shadow:0 0 24px rgba(0,240,255,.20),inset 0 1px 0 rgba(255,255,255,.14) !important; transform:translateY(-1px); }

/* Individual notification cards: surface is owned by notifications-transparent-glass.css. */
main:has(> div > div > h1) article.notification-card { color:#d9f7ff !important; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease !important; }
main:has(> div > div > h1) article.notification-card:hover { transform:translateY(-1px); }

/* The actual notification sentence: e.g. "Rasheed commented on your post" */
main:has(> div > div > h1) article.notification-card > div:nth-child(2) > div:first-child { color:#8cefff !important; font-family:"JetBrains Mono",ui-monospace,monospace !important; font-size:11px !important; line-height:1.55 !important; letter-spacing:.018em !important; text-shadow:0 0 8px rgba(0,240,255,.12) !important; }
main:has(> div > div > h1) article.notification-card > div:nth-child(2) > div:first-child strong { color:#f2feff !important; font-weight:850 !important; }
/* Timestamp: e.g. "9/15/2026, 8:17:01 AM" */
main:has(> div > div > h1) article.notification-card > div:nth-child(2) > div:nth-child(2) { color:#c8ff66 !important; font-family:"JetBrains Mono",ui-monospace,monospace !important; font-size:9px !important; line-height:1.45 !important; letter-spacing:.04em !important; margin-top:4px !important; text-shadow:0 0 8px rgba(170,255,70,.22) !important; }
main:has(> div > div > h1) article.notification-card > div:nth-child(2) > div:nth-child(2) * { color:#c8ff66 !important; text-shadow:0 0 8px rgba(170,255,70,.22) !important; }
main:has(> div > div > h1) article.notification-card strong { color:#effeff !important; }
main:has(> div > div > h1) article.notification-card span,main:has(> div > div > h1) article.notification-card small,main:has(> div > div > h1) article.notification-card time { color:#c8ff66 !important; font-family:"JetBrains Mono",ui-monospace,monospace !important; font-size:9px !important; text-shadow:0 0 6px rgba(170,255,70,.18) !important; }
main:has(> div > div > h1) article.notification-card p { color:#bdebf2 !important; font-family:"JetBrains Mono",ui-monospace,monospace !important; font-size:10px !important; line-height:1.55 !important; }

/* Sender/display name — intentionally stronger than the action text */
main:has(> div > div > h1) article.notification-card > div:nth-child(2) > div:first-child > :first-child { color:#72f4ff !important; font-weight:850 !important; text-shadow:0 0 10px rgba(0,240,255,.22) !important; }

/* Avatar + notification-type badge */
main:has(> div > div > h1) article.notification-card > div:first-child img,main:has(> div > div > h1) article.notification-card > div:first-child > div { border-color:rgba(0,240,255,.32) !important; box-shadow:0 0 16px rgba(0,240,255,.10) !important; }
main:has(> div > div > h1) article.notification-card > div:first-child span { background:rgba(4,23,48,.94) !important; border:1px solid rgba(0,240,255,.30) !important; box-shadow:0 0 12px rgba(0,240,255,.12) !important; }

/* Report / invitation controls inside cards */
main:has(> div > div > h1) article.notification-card button { border-color:rgba(0,240,255,.30) !important; background:rgba(0,126,255,.16) !important; color:#bffaff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important; }
main:has(> div > div > h1) article.notification-card button:hover:not(:disabled) { border-color:rgba(0,240,255,.65) !important; background:rgba(0,240,255,.20) !important; }

/* Report notification detail — pink/red telemetry, never lime/white */
main:has(> div > div > h1) article.notification-card:has(.report-view) p,
main:has(> div > div > h1) article.notification-card:has(.report-view) p * { color:#ffb6c8 !important; font-family:"JetBrains Mono",ui-monospace,monospace !important; text-shadow:0 0 8px rgba(255,80,135,.18) !important; }
main:has(> div > div > h1) article.notification-card:has(.report-view) p { background:rgba(255,55,120,.10) !important; background-color:rgba(255,55,120,.10) !important; border:1px solid rgba(255,90,145,.28) !important; border-radius:10px !important; padding:7px 10px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 14px rgba(255,55,120,.07) !important; }
main:has(> div > div > h1) article.notification-card:has(.report-view) p[style],
main:has(> div > div > h1) article.notification-card:has(.report-view) p[style*="background"] { background:rgba(255,55,120,.10) !important; background-color:rgba(255,55,120,.10) !important; color:#ffb6c8 !important; }
main:has(> div > div > h1) article.notification-card:has(.report-view) .report-view { color:#dffeff !important; background:linear-gradient(135deg,rgba(0,240,255,.30),rgba(0,126,255,.30)) !important; border:1px solid rgba(0,240,255,.52) !important; box-shadow:0 0 16px rgba(0,240,255,.10),inset 0 1px 0 rgba(255,255,255,.08) !important; font-weight:800 !important; text-shadow:0 0 7px rgba(0,240,255,.16) !important; }
main:has(> div > div > h1) article.notification-card:has(.report-view) .report-decline { color:#ffb8c4 !important; background:rgba(190,40,80,.14) !important; border:1px solid rgba(255,90,130,.34) !important; box-shadow:0 0 14px rgba(255,90,130,.08),inset 0 1px 0 rgba(255,255,255,.06) !important; font-weight:800 !important; text-shadow:0 0 6px rgba(255,90,130,.14) !important; }
main:has(> div > div > h1) article.notification-card:has(.report-view) .report-view:hover:not(:disabled) { border-color:rgba(0,240,255,.72) !important; background:rgba(0,240,255,.24) !important; }
main:has(> div > div > h1) article.notification-card:has(.report-view) .report-decline:hover:not(:disabled) { border-color:rgba(255,90,130,.60) !important; background:rgba(190,40,80,.22) !important; }

/* Empty state */
main:has(> div > div > h1) > div[style*="text-align:center"] { border:1px solid rgba(0,240,255,.22) !important; border-radius:20px !important; background:linear-gradient(135deg,rgba(8,52,92,.50),rgba(8,36,70,.38),rgba(26,31,86,.34)) !important; box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08),0 0 24px rgba(0,240,255,.07) !important; color:#bdebf2 !important; backdrop-filter:blur(14px) !important; }

/* Live notification popups */
main:has(> div > div > h1) .team-invite-flash,main:has(> div > div > h1) .report-flash { border:1px solid rgba(0,240,255,.42) !important; background:linear-gradient(135deg,rgba(8,52,92,.94),rgba(8,36,70,.92) 55%,rgba(26,31,86,.90)) !important; box-shadow:0 28px 75px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.10),0 0 30px rgba(0,240,255,.13) !important; color:#d9f7ff !important; backdrop-filter:blur(18px) saturate(145%) !important; }
main:has(> div > div > h1) .team-invite-flash-title,main:has(> div > div > h1) .report-flash-title { color:#72f4ff !important; }
main:has(> div > div > h1) .team-invite-flash-copy,main:has(> div > div > h1) .report-flash-copy,main:has(> div > div > h1) .report-flash-note { color:#bdebf2 !important; }
main:has(> div > div > h1) .report-flash-note { background:rgba(0,126,255,.13) !important; }
main:has(> div > div > h1) .team-invite-accept,main:has(> div > div > h1) .report-view { color:#dffeff !important; background:linear-gradient(135deg,rgba(0,240,255,.36),rgba(0,126,255,.34)) !important; border-color:rgba(0,240,255,.52) !important; }
main:has(> div > div > h1) .team-invite-decline,main:has(> div > div > h1) .report-decline { color:#ffb8c4 !important; background:rgba(190,40,80,.13) !important; border-color:rgba(255,90,130,.28) !important; }

@media (max-width:640px) { main:has(> div > div > h1) > div:first-of-type { align-items:flex-start !important; } main:has(> div > div > h1) article.notification-card { padding:12px !important; border-radius:19px !important; } main:has(> div > div > h1) article.notification-card:hover { transform:none; } }