.notification-bell{position:relative}.topbar .notification-bell-button{place-items:center;width:44px;height:44px;font-size:2rem;display:grid;position:relative}.notification-count{background:var(--color-danger);min-width:22px;height:22px;color:var(--color-on-strong);border:2px solid var(--color-divider);font:600 .8rem var(--body);border-radius:11px;place-items:center;padding:0 5px;display:grid;position:absolute;top:-4px;right:-6px}.notification-panel{z-index:40;background:var(--color-card);border:3px solid var(--color-primary);border-radius:var(--radius-large);width:min(400px,100vw - 32px);max-height:70vh;box-shadow:0 12px 30px var(--color-shadow);font-family:var(--body);color:var(--color-text);flex-direction:column;gap:12px;padding:16px;font-size:1rem;display:flex;position:absolute;top:calc(100% + 10px);right:0;overflow:auto}.notification-panel-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.notification-panel-header h2{font-size:1.8rem}.notification-panel-actions{gap:6px;display:flex}.topbar .notification-panel-button{background:var(--color-surface);border:3px solid var(--color-primary);border-radius:var(--radius-small);color:var(--color-heading);font:600 .95rem var(--body);align-items:center;gap:6px;padding:4px 10px;display:inline-flex}.topbar .notification-panel-button:hover:not(:disabled){background:var(--color-primary);color:var(--color-on-strong)}.notification-list{background:var(--color-surface);border:3px solid var(--color-border);border-radius:var(--radius-medium);margin:0;padding:0;list-style:none;overflow:hidden}.notification-list li+li{border-top:2px solid var(--color-divider)}.topbar .notification-item{text-align:left;width:100%;color:var(--color-text);font:400 1rem var(--body);align-items:flex-start;gap:10px;padding:10px 12px;display:flex}.topbar .notification-item:hover{background:var(--color-card)}.notification-dot{background:0 0;border-radius:50%;flex:none;width:10px;height:10px;margin-top:6px}.notification-item--unread .notification-dot{background:var(--color-danger)}.notification-item--unread .notification-description{font-weight:600}.notification-text{flex-direction:column;gap:2px;min-width:0;display:flex}.notification-description{overflow-wrap:anywhere}.notification-time{opacity:.7;font-size:.85rem}.notification-panel .pagination{padding:6px 8px}.topbar .notification-panel .pagination-button{background:var(--color-card);border:3px solid var(--color-primary);border-radius:var(--radius-small);color:var(--color-heading);font:600 .95rem var(--body);align-items:center;gap:4px;padding:4px 10px;display:inline-flex}.topbar .notification-panel .pagination-button:hover:not(:disabled){background:var(--color-primary);color:var(--color-on-strong)}.notification-toasts{z-index:60;flex-direction:column;gap:10px;width:min(360px,100vw - 32px);display:flex;position:fixed;bottom:16px;right:16px}.notification-toast{background:var(--color-surface);border:4px solid var(--color-primary);border-radius:var(--radius-medium);box-shadow:0 10px 24px var(--color-shadow);align-items:flex-start;gap:8px;padding:12px;animation:.2s fade;display:flex}.notification-toast-body{text-align:left;color:var(--color-text);background:0 0;border:0;flex:1;align-items:flex-start;gap:10px;padding:0;font-size:1.05rem;font-weight:600;display:flex}.notification-toast-body svg{color:var(--color-heading);flex:none;font-size:1.4rem}.notification-toast-close{border:2px solid var(--color-border);border-radius:var(--radius-small);width:30px;height:30px;color:var(--color-heading);background:0 0;flex:none;place-items:center;display:grid}.notification-toast-close:hover{background:var(--color-card)}