.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.top-actions{display:flex;align-items:center;gap:8px}.notification-link{position:relative}.notification-link .nav-badge{position:absolute;top:2px;right:0;left:auto;background:var(--ocean-danger);box-shadow:0 0 0 2px #fff}
.notifications-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:25px 2px 14px}.notifications-heading h1,.preferences-heading h1{margin:5px 0 7px;font-size:clamp(32px,9vw,42px);line-height:1.05;letter-spacing:-.045em}.notifications-heading p,.preferences-heading p{margin:0;color:var(--ocean-slate);font-size:14px;line-height:1.5}.notification-settings-link{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--ocean-line);border-radius:50%;background:#fff;color:var(--ocean-aqua-deep);box-shadow:var(--ocean-shadow-sm)}
.notification-toolbar{min-height:48px;margin:2px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--ocean-line)}.notification-toolbar form{margin:0}.notification-text-action{min-height:44px;padding:8px 2px;border:0;background:transparent;color:var(--ocean-aqua-deep);font-size:13px;font-weight:800;cursor:pointer}.notification-text-action.danger{color:var(--ocean-danger)}
.notification-bulk-form{margin:0}.notification-list{display:grid;gap:10px}.notification-card{position:relative;display:grid;grid-template-columns:20px 54px minmax(0,1fr);gap:11px;padding:16px 15px;border:1px solid var(--ocean-line);border-radius:var(--radius-card);background:#fff;box-shadow:var(--ocean-shadow-sm)}.notification-card.unread{border-color:#AEEFE9;background:linear-gradient(105deg,#effbf9 0%,#fff 68%)}.notification-card.unread::before{content:"";position:absolute;inset:12px auto 12px 0;width:3px;border-radius:0 99px 99px 0;background:var(--ocean-aqua)}
.notification-select{min-width:20px;min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}.notification-select input{width:18px;height:18px;margin:0;accent-color:var(--ocean-aqua)}.notification-visual{position:relative;width:54px;height:54px}.notification-avatar,.notification-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:18px}.notification-avatar{object-fit:cover;background:var(--ocean-cloud)}.notification-icon{background:var(--ocean-soft-aqua);color:var(--ocean-aqua-deep)}.notification-icon .ui-icon{width:25px;height:25px}.notification-icon.type-system{background:#eef3ff;color:#5269a8}.unread-dot{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:var(--ocean-aqua)}
.notification-copy{min-width:0}.notification-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}.notification-type{overflow:hidden;color:var(--ocean-aqua-deep);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap}.notification-meta time{flex:0 0 auto;color:var(--ocean-slate);font-size:11px}.notification-copy>strong{display:block;font-family:var(--font-heading);font-size:15px;line-height:1.25}.notification-copy p{margin:4px 0 0;color:var(--ocean-slate);font-size:13px;line-height:1.42;overflow-wrap:anywhere}.unread-label{display:inline-flex;margin-top:8px;padding:3px 7px;border:1px solid #AEEFE9;border-radius:99px;color:var(--ocean-aqua-deep);font-size:10px;font-weight:800}
.notification-actions{grid-column:3;display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding-top:4px}.notification-actions button{min-height:42px;padding:8px 11px;border:0;border-radius:11px;background:transparent;font-size:12px;font-weight:800;cursor:pointer}.notification-open{background:var(--ocean-soft-aqua)!important;color:var(--ocean-aqua-deep)}.notification-action{color:var(--ocean-slate)}.notification-action.danger{color:var(--ocean-danger)}.delete-selected{width:100%;margin-top:14px}.notification-empty{min-height:68vh;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.notification-empty-icon{width:76px;height:76px;display:grid;place-items:center;border-radius:26px;background:var(--ocean-soft-aqua);color:var(--ocean-aqua-deep);box-shadow:var(--ocean-shadow-sm)}.notification-empty-icon .ui-icon{width:34px;height:34px}.notification-empty h1{margin:22px 0 6px;font-size:28px;letter-spacing:-.035em}.notification-empty p{margin:0 0 20px;color:var(--ocean-slate)}
.notification-page-header{height:58px;margin:0 calc(var(--space-5)*-1);padding:5px 14px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;border-bottom:1px solid var(--ocean-line);background:rgba(255,255,255,.88);text-align:center}.notification-page-header a{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:var(--ocean-ink)}.notification-page-header strong{font-family:var(--font-heading);font-size:14px}.notification-preferences-shell .topbar{display:none}.notification-preferences-shell .content{padding-top:0}.preferences-heading{padding:27px 2px 13px}.notification-preferences-card{overflow:hidden;border:1px solid var(--ocean-line);border-radius:var(--radius-card);background:#fff;box-shadow:var(--ocean-shadow-sm)}.notification-pref-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:17px 16px;border-bottom:1px solid var(--ocean-line)}.notification-pref-row:last-child{border:0}.notification-pref-copy{min-width:0}.notification-pref-copy strong{display:block;font-size:14px}.notification-pref-copy span{display:block;margin-top:4px;color:var(--ocean-slate);font-size:11px;line-height:1.4}.notification-channel{display:grid;justify-items:center;gap:6px}.notification-channel>span{color:var(--ocean-slate);font-size:10px;white-space:nowrap}.ocean-toggle{position:relative;display:block;width:44px;height:26px;cursor:pointer}.ocean-toggle input{position:absolute;opacity:0;pointer-events:none}.ocean-toggle>span[aria-hidden]{position:absolute;inset:0;border-radius:99px;background:#d7e0e5;transition:.18s ease}.ocean-toggle>span[aria-hidden]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(17,24,39,.2);transition:.18s ease}.ocean-toggle input:checked+span{background:var(--ocean-aqua)}.ocean-toggle input:checked+span::after{transform:translateX(18px)}.ocean-toggle input:focus-visible+span{outline:3px solid rgba(0, 123, 255,.7);outline-offset:2px}.push-note{display:flex;align-items:flex-start;gap:8px;margin:14px 4px;color:var(--ocean-slate);font-size:12px;line-height:1.45}.push-note .ui-icon{flex:0 0 auto;width:18px;height:18px;color:var(--ocean-aqua-deep)}.notification-save{width:100%}
.notification-skeleton{display:grid;grid-template-columns:54px 1fr;gap:12px;padding:16px;border:1px solid var(--ocean-line);border-radius:var(--radius-card);background:#fff}.notification-skeleton>*{border-radius:12px;background:linear-gradient(90deg,#edf3f5 25%,#f7fafb 50%,#edf3f5 75%);background-size:200% 100%;animation:notification-shimmer 1.4s infinite}.notification-error{padding:30px 20px;border:1px solid #ffd1d6;border-radius:var(--radius-card);background:#fff7f8;text-align:center}.notification-error p{color:var(--ocean-slate)}@keyframes notification-shimmer{to{background-position:-200% 0}}
@media(max-width:430px){.notification-card{grid-template-columns:18px 48px minmax(0,1fr);gap:9px;padding:14px 12px}.notification-visual,.notification-avatar,.notification-icon{width:48px;height:48px}.notification-pref-row{grid-template-columns:minmax(0,1fr) auto;gap:12px}.notification-pref-copy{grid-row:span 2}.notification-channel{grid-template-columns:58px 44px;align-items:center;justify-items:end}.notification-channel>span{text-align:right}.notification-actions{gap:2px}.notification-actions button{padding-right:8px;padding-left:8px}}
@media(max-width:350px){.notifications-heading{gap:8px}.notification-settings-link{width:44px;height:44px}.notification-card{grid-template-columns:16px 42px minmax(0,1fr);gap:7px;padding-right:9px;padding-left:9px}.notification-visual,.notification-avatar,.notification-icon{width:42px;height:42px}.notification-meta{align-items:flex-start;flex-direction:column;gap:2px}.notification-actions button{font-size:11px}}
