:root{--notification-border:#e5e9f0;--notification-surface:#fff;--notification-muted:#667085;--notification-accent:#246bfd}
*{box-sizing:border-box}body{margin:0;background:#f5f7fa;color:#182230;font-family:Inter,sans-serif}.site-header{align-items:center;background:#fff;border-bottom:1px solid var(--notification-border);display:flex;justify-content:space-between;min-height:72px;padding:0 max(5vw,24px);position:relative}.site-brand{align-items:center;color:#182230;display:flex;font-weight:700;gap:10px;text-decoration:none}.site-brand>span{align-items:center;background:#182230;border-radius:50%;color:#fff;display:flex;height:34px;justify-content:center;width:34px}.notifications-page{margin:0 auto;max-width:1120px;padding:56px 24px}.notifications-heading{align-items:flex-end;display:flex;gap:24px;justify-content:space-between;margin-bottom:28px}.notifications-heading span{color:var(--notification-accent);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.notifications-heading h1{font-size:clamp(2rem,5vw,3rem);margin:8px 0}.notifications-heading p{color:var(--notification-muted);margin:0}.notifications-heading button,.notification-filter button{background:#182230;border:0;border-radius:12px;color:#fff;cursor:pointer;font:inherit;font-weight:600;padding:12px 16px}.notification-filter{align-items:end;background:#fff;border:1px solid var(--notification-border);border-radius:18px;display:grid;gap:14px;grid-template-columns:2fr 1fr 1fr auto;margin-bottom:24px;padding:18px}.notification-filter label{display:grid;gap:7px}.notification-filter label span{color:#475467;font-size:.78rem;font-weight:600}.notification-filter input,.notification-filter select{background:#fff;border:1px solid #d0d5dd;border-radius:11px;font:inherit;min-width:0;padding:11px}.notification-list{display:grid;gap:12px}.notification-card{align-items:flex-start;background:var(--notification-surface);border:1px solid var(--notification-border);border-radius:16px;display:grid;gap:14px;grid-template-columns:auto 1fr auto;padding:18px;position:relative}.notification-card.is-unread{border-color:#b7cdfd;box-shadow:inset 4px 0 var(--notification-accent)}.notification-icon{align-items:center;background:#f2f4f7;border-radius:12px;display:flex;font-size:1.15rem;height:42px;justify-content:center;width:42px}.notification-icon.is-rose{background:#fff0f3}.notification-icon.is-blue{background:#eef4ff}.notification-icon.is-gold{background:#fff7df}.notification-icon.is-violet{background:#f4f0ff}.notification-icon.is-green{background:#ecfdf3}.notification-card-heading{align-items:center;display:flex;gap:12px;justify-content:space-between}.notification-card-heading time{color:var(--notification-muted);font-size:.76rem;white-space:nowrap}.notification-card-body p{color:#475467;line-height:1.5;margin:6px 0}.notification-category{color:var(--notification-muted);font-size:.75rem}.notification-card-actions{align-items:flex-end;display:flex;flex-direction:column;gap:6px}.notification-card-actions a,.notification-card-actions button{background:none;border:0;color:#344054;cursor:pointer;font:inherit;font-size:.78rem;font-weight:600;padding:3px;text-decoration:none}.notification-card-actions a{color:var(--notification-accent)}.notification-center{position:relative}.notification-center summary{align-items:center;background:#f2f4f7;border-radius:50%;cursor:pointer;display:flex;height:42px;justify-content:center;list-style:none;position:relative;width:42px}.notification-center summary::-webkit-details-marker{display:none}.notification-badge{align-items:center;background:#d92d20;border:2px solid #fff;border-radius:99px;color:#fff;display:flex;font-size:.62rem;font-weight:700;height:20px;justify-content:center;min-width:20px;padding:0 4px;position:absolute;right:-6px;top:-5px}.notification-dropdown{background:#fff;border:1px solid var(--notification-border);border-radius:18px;box-shadow:0 18px 45px rgba(16,24,40,.16);display:grid;gap:7px;max-height:520px;overflow:auto;padding:12px;position:absolute;right:0;top:50px;width:min(420px,calc(100vw - 32px));z-index:20}.notification-dropdown-heading{align-items:center;display:flex;justify-content:space-between;padding:6px}.notification-dropdown-heading a{color:var(--notification-accent);font-size:.8rem;text-decoration:none}.notification-card.is-compact{border:0;border-radius:12px;grid-template-columns:auto 1fr;padding:10px}.notification-card.is-compact .notification-icon{height:36px;width:36px}.notification-card.is-compact .notification-card-actions{display:none}.notification-card.is-compact .notification-card-heading{align-items:flex-start;display:grid;gap:3px}.notification-card.is-compact p{font-size:.82rem}.notification-empty-state{background:#fff;border:1px dashed #d0d5dd;border-radius:18px;color:var(--notification-muted);padding:44px;text-align:center}.notification-empty-state>span{font-size:1.8rem}.notification-empty-state h2{color:#182230}.notification-pagination{display:flex;gap:8px;justify-content:center;margin-top:28px}.notification-pagination a{align-items:center;background:#fff;border:1px solid var(--notification-border);border-radius:9px;color:#344054;display:flex;height:36px;justify-content:center;text-decoration:none;width:36px}.notification-pagination a[aria-current=page]{background:#182230;color:#fff}.site-footer{color:#667085;padding:36px;text-align:center}
@media(max-width:760px){.notifications-page{padding:36px 16px}.notifications-heading{align-items:flex-start;flex-direction:column}.notification-filter{grid-template-columns:1fr}.notification-card{grid-template-columns:auto 1fr}.notification-card-actions{align-items:flex-start;flex-direction:row;flex-wrap:wrap;grid-column:2}.notification-card-heading{align-items:flex-start;flex-direction:column;gap:4px}.notification-dropdown{position:fixed;right:16px;top:66px}}