.notif{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.notif-bell{
  position:relative;width:48px;height:48px;border-radius:14px;background:transparent;
  border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;padding:0;transition:all .2s ease
}
.notif-bell:hover{color:var(--ink);border-color:var(--ink);background:var(--surface)}
.notif-bell:active{transform:scale(.92)}
.notif-bell svg{width:24px;height:24px}
.notif-bell.has-new svg{animation:notif-ring 2.6s ease-in-out infinite;transform-origin:50% 8%}
.notif-badge{
  position:absolute;top:-6px;left:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#ef5b5b;color:#fff;font-size:11px;font-weight:600;line-height:20px;text-align:center;
  box-shadow:0 0 0 2px var(--bg)
}
.notif-badge[hidden]{display:none}
.notif-panel{
  position:absolute;top:calc(100% + 12px);left:0;width:340px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 40px rgba(20,24,40,.28);z-index:1000;overflow:hidden;text-align:right
}
.notif-panel[hidden]{display:none}
.notif-head{padding:14px 18px;font-weight:600;font-size:15px;color:var(--ink);border-bottom:1px solid var(--line)}
.notif-list{max-height:360px;overflow-y:auto}
.notif-item{padding:14px 18px;border-bottom:1px solid var(--line);position:relative}
.notif-item:last-child{border-bottom:0}
.notif-item.is-new::before{
  content:"";position:absolute;top:20px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--emerald-deep)
}
.notif-item b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.7}
.notif-item p{margin:4px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.8;white-space:pre-line;overflow-wrap:anywhere}
.notif-item small{display:block;margin-top:6px;font-size:11.5px;color:var(--ink-soft);opacity:.8}
.notif-empty{padding:26px 18px;text-align:center;font-size:13.5px;color:var(--ink-soft)}
@keyframes notif-ring{
  0%,60%,100%{transform:rotate(0)}
  66%{transform:rotate(14deg)}
  72%{transform:rotate(-12deg)}
  78%{transform:rotate(8deg)}
  84%{transform:rotate(-5deg)}
  90%{transform:rotate(0)}
}
@media(max-width:640px){
  .notif-bell{width:44px;height:44px}
  .notif{position:static}
  .notif-panel{position:fixed;top:78px;left:12px;right:12px;width:auto;max-width:none}
}
@media(prefers-reduced-motion:reduce){.notif-bell.has-new svg{animation:none}}