.notify-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
}
.notify-bell{
    position:relative;
    width:46px;
    height:46px;
    border:1px solid #e5eef8;
    border-radius:16px;
    background:#fff;
    color:#0f2c5c;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.notify-bell svg{
    width:21px;
    height:21px;
    display:block;
}
.notify-count{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    display:none;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:900;
    border:2px solid #fff;
}
.notify-wrap.has-unread .notify-count{
    display:flex;
}
.notify-wrap.has-unread .notify-bell{
    animation:notify-wiggle 1.15s ease-in-out infinite;
}
@keyframes notify-wiggle{
    0%,100%{transform:rotate(0deg)}
    15%{transform:rotate(-9deg)}
    30%{transform:rotate(7deg)}
    45%{transform:rotate(-5deg)}
    60%{transform:rotate(3deg)}
    75%{transform:rotate(0deg)}
}
.notify-panel{
    position:absolute;
    top:58px;
    right:0;
    width:min(380px, calc(100vw - 24px));
    background:#fff;
    border:1px solid #e5eef8;
    border-radius:20px;
    box-shadow:0 24px 70px rgba(7,21,45,.20);
    padding:12px;
    z-index:1000;
    display:none;
}
.notify-wrap.open .notify-panel{
    display:block;
}
.notify-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 8px 12px;
    border-bottom:1px solid #edf3fb;
}
.notify-head strong{
    font-size:15px;
    color:#0f172a;
}
.notify-read{
    border:0;
    border-radius:999px;
    background:#eef4ff;
    color:#0f2c5c;
    font-size:12px;
    font-weight:900;
    padding:8px 10px;
    cursor:pointer;
}
.notify-list{
    max-height:360px;
    overflow:auto;
    padding-top:8px;
}
.notify-item{
    display:block;
    border:1px solid #edf3fb;
    background:#fbfdff;
    border-radius:16px;
    padding:12px;
    margin-bottom:8px;
    color:#0f172a;
}
.notify-item:hover{
    border-color:#bfdbfe;
    background:#eff6ff;
}
.notify-item strong{
    display:block;
    font-size:14px;
    line-height:1.35;
}
.notify-item span{
    display:block;
    margin-top:5px;
    color:#475569;
    font-size:13px;
    line-height:1.35;
}
.notify-item em{
    display:block;
    margin-top:7px;
    color:#64748b;
    font-style:normal;
    font-size:12px;
}
.notify-empty{
    color:#64748b;
    text-align:center;
    padding:22px 10px;
    font-weight:700;
}
@media(max-width:700px){
    .notify-panel{
        right:-85px;
    }
}