/* ══════════════════════════════════════════
   BLNCR — Notification v2
   ══════════════════════════════════════════ */

.notification-popup {
    position:fixed; bottom:30px; right:30px; z-index:10002;
    width:310px;
    background:rgba(10,10,18,0.94);
    backdrop-filter:blur(28px) saturate(1.6);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:20px; padding:20px;
    overflow:hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 28px 60px rgba(0,0,0,0.65),
        0 0 40px rgba(124,58,255,0.1);

    /* hidden by default */
    opacity:0; transform:translateY(18px) scale(0.95);
    pointer-events:none;
    transition:
        opacity 0.45s cubic-bezier(0.22,1,0.36,1),
        transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

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

.notification-popup.hide {
    opacity:0; transform:translateY(14px) scale(0.94);
    pointer-events:none;
}

/* Animated top-edge glow */
.notification-popup::before {
    content:''; position:absolute; top:0; left:10%; right:10%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(124,58,255,0.8), transparent);
    border-radius:1px;
}

.notif-close {
    position:absolute; top:12px; right:12px;
    width:24px; height:24px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.05);
    color:rgba(255,255,255,0.35); font-size:0.6rem;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s, color 0.2s, border-color 0.2s;
    cursor:pointer;
    box-shadow:none !important; transform:none !important;
}
.notif-close:hover {
    background:rgba(239,68,68,0.2);
    border-color:rgba(239,68,68,0.4);
    color:#ef4444;
}

.notif-inner {
    display:flex; align-items:flex-start; gap:14px; padding-right:14px;
}

.notif-icon {
    width:42px; height:42px; flex-shrink:0;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.05rem; color:#a78bfa;
    background:linear-gradient(135deg, rgba(124,58,255,0.22), rgba(0,216,255,0.12));
    border:1px solid rgba(124,58,255,0.28);
}

.notif-text h4 {
    font-family:'Space Grotesk', sans-serif;
    font-size:0.9rem; font-weight:700;
    color:#eeeef5; margin-bottom:5px; letter-spacing:-0.01em;
}
.notif-text p {
    font-size:0.78rem; color:#6e6e88; line-height:1.55;
}

/* Progress bar */
.notif-bar {
    position:absolute; bottom:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, #7c3aff, #00d8ff, #ff3a7c);
    transform-origin:left; transform:scaleX(1);
    animation:notif-drain 6s linear forwards;
    animation-play-state:paused;
}
.notification-popup.show .notif-bar {
    animation-play-state:running;
}
@keyframes notif-drain { from{transform:scaleX(1)} to{transform:scaleX(0)} }