.notification-bell{display:inline-flex;position:relative}.notification-bell__trigger{border-radius:var(--r-sm);width:34px;height:34px;color:var(--ink-mid);cursor:pointer;transition:color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-family:Arimo;display:flex;position:relative}.notification-bell__trigger:hover{color:var(--ink-hi);background:var(--surface-1)}.notification-bell__trigger:active{background:var(--surface-hover)}.notification-bell__trigger:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}.notification-bell__badge{background:var(--accent-deep);min-width:15px;height:15px;color:var(--ink-hi);font-variant-numeric:tabular-nums;border-radius:999px;justify-content:center;align-items:center;padding:0 3px;font-size:10px;font-weight:700;line-height:1;display:flex;position:absolute;top:2px;right:2px}.notification-bell__panel{z-index:var(--z-dropdown);background:var(--depth-1);border:1px solid var(--line);border-radius:var(--r-lg);width:340px;max-height:min(420px,70vh);box-shadow:var(--shadow-float);animation:notification-bell-panel-in var(--t-fast) var(--ease-out);flex-direction:column;display:flex;overflow:hidden}@keyframes notification-bell-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.notification-bell__header{border-bottom:1px solid var(--line-subtle);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.notification-bell__title{font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-low);font-weight:600}.notification-bell__mark-all{font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);cursor:pointer;transition:color var(--t-fast) var(--ease-out);background:0 0;border:none;padding:0;font-family:Arimo;font-weight:600}.notification-bell__mark-all:hover:not(:disabled){color:var(--accent-bright)}.notification-bell__mark-all:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}.notification-bell__mark-all:disabled{opacity:.5;cursor:not-allowed}.notification-bell__list{flex:1;margin:0;padding:0;list-style:none;overflow-y:auto}.notification-bell__empty{text-align:center;font-size:var(--text-xs);color:var(--ink-low);margin:0;padding:32px 16px}@media (prefers-reduced-motion:reduce){.notification-bell__panel{animation:none}.notification-bell__trigger,.notification-bell__mark-all{transition:none}}@media (pointer:coarse){.notification-bell__trigger{width:var(--control-h-touch);height:var(--control-h-touch)}}.notification-row{align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--line-subtle);display:flex}.notification-row:last-child{border-bottom:none}.notification-row__dot{width:7px;height:7px;margin-top:var(--space-2xs);background:0 0;border-radius:50%;flex-shrink:0}.notification-row--unread .notification-row__dot{background:var(--accent)}.notification-row__sr-unread{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.notification-row__body{gap:var(--space-2xs);flex-direction:column;flex:1;min-width:0;display:flex}.notification-row__title{font-size:var(--text-sm);color:var(--ink-mid)}.notification-row--unread .notification-row__title{color:var(--ink-hi)}.notification-row__detail{font-size:var(--text-xs);color:var(--ink-low)}.notification-row__time{font-size:var(--text-2xs);color:var(--ink-low);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.notification-row__actions{gap:var(--space-xs);margin-top:var(--space-2xs);display:flex}.notification-row__action{height:24px;padding:0 var(--space-sm);border-radius:var(--r-sm);font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);font-family:Arimo;font-weight:600}.notification-row__action:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}.notification-row__action--primary{background:var(--accent-deep);border:1px solid var(--accent-deep);color:var(--ink-hi)}.notification-row__action--primary:hover{background:var(--accent);border-color:var(--accent)}.notification-row__action--quiet{border:1px solid var(--line-subtle);color:var(--ink-mid);background:0 0}.notification-row__action--quiet:hover{color:var(--ink-hi);border-color:var(--line)}.notification-row--comfortable{gap:var(--space-md);padding:var(--space-md) var(--space-xl)}.notification-row--comfortable .notification-row__title{font-size:var(--text-lg)}.notification-row--comfortable .notification-row__detail{font-size:var(--text-sm)}.notification-row--comfortable .notification-row__actions{gap:var(--space-sm);margin-top:var(--space-xs)}.notification-row--comfortable .notification-row__action{padding:0 var(--space-md);font-size:var(--text-xs)}@media (prefers-reduced-motion:reduce){.notification-row__action{transition:none}}@media (pointer:coarse){.notification-row__action{min-height:var(--control-h-touch)}}