.notify {
    position: fixed;
    z-index: 999999;
    height: 0;
    top: 15px;
    left: 50%
}

.notify__item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity .3s,-webkit-transform .4s;
    transition: opacity .3s,-webkit-transform .4s;
    transition: transform .4s,opacity .3s;
    transition: transform .4s,opacity .3s,-webkit-transform .4s;
    transform: translateY(5px) translateX(-50%);
}

.notify__item.success {
    color: #66bb6a
}

.notify__item.error {
    color: #ef5350
}

.notify__item.info {
    color: #42a5f5
}

.notify__item.default {
    color: #bdbdbd
}

.notify__item.show {
    opacity: 1
}

.notify__item:not(.show) {
    z-index: 0;
    opacity: 0
}

.notify__item-wrap {
    font-size: 11px;
    line-height: 14px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 400px;
    min-width: 320px;
    min-height: 50px;
    padding: 10px 45px 10px 60px;
    -webkit-transition: box-shadow .3s;
    transition: box-shadow .3s;
    -webkit-animation: showUp .4s;
    animation: showUp .4s;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 3px 15px #676767
}

.notify__aside,.notify__item-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center
}

.notify__aside {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    text-align: center;
    -webkit-align-items: center;
    align-items: center
}

.notify__aside img {
    -webkit-animation: showIcon .5s;
    animation: showIcon .5s
}

.notify__title {
    padding-bottom: 5px;
    color: #616161;
    font-size: 15px
}

.notify__message {
    color: #9e9e9e
}

.notify__close {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    text-decoration: none;
    font-size: 22px;
    color: #bdbdbd;
    -webkit-transition: background-color .4s;
    transition: background-color .4s;
    border: none;
    outline: none;
    cursor: pointer
}

.notify__close:active,.notify__close:focus {
    outline: none
}

.notify__close:hover {
    background-color: #fafafa;
    outline: none
}


.notify{
    position: fixed;
    z-index: 999999;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 24px));
    pointer-events: none;
}

.notify__item{
    position: relative;
    top: auto;
    left: auto;
    opacity: 0;
    transform: translateY(-6px);
    transition: transform .22s ease, opacity .18s ease, filter .18s ease;
    filter: blur(1px);
    will-change: transform, opacity;
    pointer-events: none;
}

.notify__item.show{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    pointer-events: auto;
}

.notify__item-wrap{
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 56px;
    padding: 14px 46px 14px 56px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.38));
    box-shadow: 0 22px 70px rgba(0,0,0,.70);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    animation: dwNotifyIn .28s ease;
    pointer-events: auto;
}

.notify__item-wrap::before{
    content:"";
    position:absolute;
    inset:-1px;
    background:
        radial-gradient(520px 220px at 15% 0%, rgba(247,33,60,.18), transparent 60%),
        radial-gradient(520px 220px at 85% 10%, rgba(208,9,96,.14), transparent 62%),
        radial-gradient(520px 220px at 50% 100%, rgba(255,198,69,.06), transparent 60%);
    opacity: .95;
    pointer-events:none;
}

.notify__item-wrap::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width: 4px;
    background: linear-gradient(180deg, #F7213C 0%, #D00960 104.32%);
    opacity: .9;
    pointer-events:none;
}

.notify__aside{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 30px rgba(0,0,0,.55);
    z-index: 2;
}

.notify__aside img{
    width: 18px;
    height: 18px;
    display:block;
    animation: dwNotifyIcon .28s ease;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.notify__title{
    padding-bottom: 0;
    color: rgba(255,255,255,.92);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .01em;
    z-index: 2;
}

.notify__message{
    color: rgba(255,255,255,.70);
    font-size: 12px;
    line-height: 1.35;
    z-index: 2;
}

.notify__close{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.24);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    color: rgba(255,255,255,.65);
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
    cursor: pointer;
    z-index: 3;
}

.notify__close:hover{
    transform: translateY(-50%) translateY(-1px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.16);
    color: rgba(255,255,255,.86);
}

.notify__item.success .notify__item-wrap::after{
    background: linear-gradient(180deg, rgba(255,198,69,1) 0%, rgba(102,187,106,1) 120%);
}

.notify__item.error .notify__item-wrap::after{
    background: linear-gradient(180deg, #F7213C 0%, #D00960 104.32%);
}

.notify__item.info .notify__item-wrap::after{
    background: linear-gradient(180deg, rgba(66,165,245,1) 0%, rgba(150,90,255,1) 110%);
}

.notify__item.default .notify__item-wrap::after{
    background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 120%);
}

@keyframes dwNotifyIn{
    from{ transform: translateY(-8px); opacity: .0; }
    to{ transform: translateY(0); opacity: 1; }
}

@keyframes dwNotifyIcon{
    from{ transform: translateY(2px) scale(.92); opacity: .0; }
    to{ transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 520px){
    .notify{
        top: 10px;
        width: calc(100vw - 16px);
    }

    .notify__item-wrap{
        padding: 12px 44px 12px 54px;
        border-radius: 16px;
        min-height: 54px;
    }

    .notify__aside{
        left: 8px;
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }

    .notify__close{
        right: 8px;
        width: 32px;
        height: 32px;
        border-radius: 12px;
    }

    .notify__title{
        font-size: 13px;
    }

    .notify__message{
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce){
    .notify__item,
    .notify__item-wrap,
    .notify__close{
        transition: none !important;
        animation: none !important;
    }
}
/* =========================
   NOTIFY – PREMIUM FINAL
   ========================= */

.notify{
    position: fixed;
    z-index: 999999;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 24px));
    pointer-events: none;
}

.notify__item{
    position: relative;
    opacity: 0;
    transform: translateY(-8px);
    transition: transform .22s ease, opacity .18s ease;
    will-change: transform, opacity;
}

.notify__item.show{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ===== CARD ===== */

.notify__item-wrap{
    position: relative;
    overflow: hidden;
    padding: 14px 46px 18px 56px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);

    /* УБРАЛИ МУТНОСТЬ */
    background:
        linear-gradient(
            180deg,
            rgba(40,40,40,.92),
            rgba(18,18,18,.96)
        );

    box-shadow:
        0 26px 80px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter: blur(10px);
    animation: notifyIn .26s ease;
}

/* ===== GLOW BACKGROUND ===== */
.notify__item-wrap::before{
    content:"";
    position:absolute;
    inset:-1px;
    background:
        radial-gradient(500px 200px at 15% 0%, rgba(247,33,60,.22), transparent 60%),
        radial-gradient(500px 200px at 85% 10%, rgba(208,9,96,.18), transparent 62%);
    opacity:.9;
    pointer-events:none;
}

/* ===== LEFT ACCENT ===== */
.notify__item-wrap::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background: linear-gradient(180deg, #F7213C, #D00960);
}

/* ===== ICON ===== */

.notify__aside{
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 10px 26px rgba(0,0,0,.6);
}

.notify__aside img{
    width:18px;
    height:18px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
}

/* ===== TEXT ===== */

.notify__title{
    font-size:14px;
    font-weight:900;
    color:#ffffff;
    letter-spacing:.02em;
}

.notify__message{
    margin-top:2px;
    font-size:12.5px;
    line-height:1.45;
    color:rgba(255,255,255,.82);
}

/* ===== CLOSE ===== */

.notify__close{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.35);
    color:rgba(255,255,255,.7);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    cursor:pointer;
    transition:.15s ease;
}

.notify__close:hover{
    background: rgba(255,255,255,.08);
    color:#fff;
}

/* ===== PROGRESS BAR ===== */

.notify__item-wrap .notify__progress{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background: rgba(255,255,255,.08);
    overflow:hidden;
}

.notify__item-wrap .notify__progress::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background: linear-gradient(
        90deg,
        #F7213C,
        #D00960,
        #ffc645
    );
    animation: notifyProgress linear forwards;
}

/* JS должен выставлять duration через inline style:
   style="--notify-time: 4000ms"
*/
.notify__item-wrap{
    --notify-time: 4000ms;
}

.notify__item-wrap .notify__progress::after{
    animation-duration: var(--notify-time);
}

@keyframes notifyProgress{
    from{ transform: translateX(-100%); }
    to{ transform: translateX(0); }
}

/* ===== TYPES ===== */

.notify__item.success .notify__item-wrap::after{
    background: linear-gradient(180deg, #66bb6a, #43a047);
}

.notify__item.error .notify__item-wrap::after{
    background: linear-gradient(180deg, #F7213C, #D00960);
}

.notify__item.info .notify__item-wrap::after{
    background: linear-gradient(180deg, #42a5f5, #7e57c2);
}

/* ===== ANIMATION ===== */

@keyframes notifyIn{
    from{ transform: translateY(-10px); opacity:0; }
    to{ transform: translateY(0); opacity:1; }
}

/* ===== MOBILE ===== */

@media (max-width:520px){
    .notify{
        top:10px;
        width:calc(100vw - 16px);
    }

    .notify__item-wrap{
        padding:12px 42px 16px 52px;
        border-radius:16px;
    }

    .notify__title{ font-size:13.5px; }
    .notify__message{ font-size:12px; }
}

/* ===== REDUCE MOTION ===== */
@media (prefers-reduced-motion: reduce){
    *{
        animation:none!important;
        transition:none!important;
    }
}