.notif-list,.notif-group{gap:var(--s-2);flex-direction:column;display:flex}.notif-group+.notif-group{margin-top:var(--s-5)}.notif-group-title{margin:0 0 var(--s-1);font-size:var(--t-sm);color:var(--ink-3);font-weight:700}.notif-item{align-items:flex-start;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);display:flex}.notif-item.unread{background:color-mix(in srgb, var(--accent) 5%, var(--surface));border-left:3px solid var(--accent);padding-left:calc(var(--s-3) - 2px)}.notif-item.clickable{cursor:pointer}.notif-item.clickable:hover{border-color:var(--accent)}.notif-icon{background:var(--bg);width:36px;height:36px;color:var(--accent);border-radius:999px;flex:none;justify-content:center;align-items:center;display:inline-flex}.notif-main{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.notif-title-line{align-items:center;gap:var(--s-2);display:flex}.notif-title{color:var(--ink-2);font-weight:600}.notif-item.unread .notif-title{font-weight:700}.notif-dot{background:var(--accent);border-radius:999px;flex:none;width:8px;height:8px}.notif-body{color:var(--ink-3);white-space:pre-wrap;margin:0;line-height:1.45}.notif-date{font-size:var(--t-sm);color:var(--ink-4)}.notif-del{flex:none}.notif-more{margin-top:var(--s-4);justify-content:center;display:flex}.notif-bell{position:relative}.notif-bell-badge{background:var(--accent);color:#fff;text-align:center;border-radius:999px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:700;line-height:16px;position:absolute;top:-4px;right:-4px}