.sks-notify-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    z-index:9999;
}

.sks-notify-wrap *{
    box-sizing:border-box;
}

.sks-notify-btn{
    width:42px;
    height:42px;
    border:none;
    background:transparent;
    cursor:pointer;
    position:relative;
    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#1f1f1f;

    transition:.2s;
    flex-shrink:0;
    padding:0;
}

.sks-notify-btn:hover{
    background:rgba(0,0,0,.06);
}

.sks-notify-btn svg{
    width:22px;
    height:22px;
    display:block;
    stroke:currentColor;
}

.sks-notify-badge{
    position:absolute;
    top:-2px;
    right:-2px;

    min-width:18px;
    height:18px;

    padding:0 5px;

    border-radius:999px;

    background:#ff3b30;
    color:#fff;

    font-size:11px;
    font-weight:700;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;
    visibility:hidden;

    transform:scale(.7);

    transition:.2s;

    box-shadow:0 2px 8px rgba(255,59,48,.35);
}

.sks-notify-badge.show{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

.sks-notify-dropdown{
    position:absolute;

    top:54px;
    right:0;

    width:420px;
    max-width:92vw;

    background:#fff;

    border-radius:18px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.12),
        0 2px 10px rgba(0,0,0,.06);

    overflow:hidden;

    opacity:0;
    visibility:hidden;

    transform:
        translateY(10px)
        scale(.98);

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;

    z-index:999999;
}

.sks-notify-dropdown.open{
    opacity:1;
    visibility:visible;

    transform:
        translateY(0)
        scale(1);
}

.sks-notify-header{
    padding:18px 20px;

    border-bottom:1px solid #eee;

    font-size:17px;
    font-weight:700;

    color:#111;

    background:#fff;

    position:sticky;
    top:0;

    z-index:2;
}

.sks-notify-list{
    max-height:520px;
    overflow:auto;

    background:#fff;
}

.sks-notify-list::-webkit-scrollbar{
    width:8px;
}

.sks-notify-list::-webkit-scrollbar-thumb{
    background:#d9d9d9;
    border-radius:999px;
}

.sks-notify-item{
    padding:18px 20px;

    border-bottom:1px solid #f1f1f1;

    transition:.2s;

    background:#fff;
}

.sks-notify-item:hover{
    background:#f8f9fc;
}

.sks-notify-item.unread{
    background:#f4f7ff;
}

.sks-notify-title{
    font-size:15px;
    font-weight:700;

    margin-bottom:10px;

    color:#111;

    line-height:1.4;
}

.sks-notify-message{
    font-size:14px;
    line-height:1.6;

    color:#555;

    margin-bottom:14px;
}

.sks-notify-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.sks-notify-date{
    font-size:12px;
    color:#999;

    white-space:nowrap;
}

.sks-notify-link{
    background: linear-gradient(135deg,#552F6C,#405AA7);
    color:#fff !important;
    padding:10px 18px;
    border-radius:999px;
    text-decoration:none;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:0.2s ease;
}

.sks-notify-link:hover{
    transform:translateY(-1px);
    opacity:.92;
}

.sks-notify-empty{
    padding:40px 20px;

    text-align:center;

    color:#777;

    font-size:14px;
}

@media(max-width:600px){

    .sks-notify-dropdown{

        width:94vw;

        right:-10px;

        top:50px;

    }

}

.sks-notify-dropdown{

    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);

}

.sks-notify-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.sks-clear-notify{
    background:none;
    border:none;
    color:#6b46c1;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    padding:0;
}

.sks-clear-notify:hover{
    text-decoration:underline;
}