.notify-root {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 5000;
    width: min(420px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.notify-card {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 6px auto 1fr auto;
    align-items: start;
    gap: 10px;
    border-radius: 12px;
    background: #1d1f23;
    border: 1px solid #3a3f49;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
}

.notify-card.is-enter {
    animation: notify-slide-in 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.notify-card.is-leave {
    animation: notify-slide-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

.notify-bar {
    align-self: stretch;
    width: 6px;
}

.notify-icon {
    margin-top: 9px;
    color: #ff7f8e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notify-icon svg {
    width: 20px;
    height: 20px;
}

.notify-body {
    padding: 9px 0;
    min-width: 0;
}

.notify-title {
    font-size: 14px;
    font-weight: 700;
    color: #f2f6ff;
    line-height: 1.2;
    margin: 0;
}

.notify-message {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
    color: #c5d0e2;
    word-break: break-word;
}

.notify-actions {
    padding: 7px 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.notify-btn {
    width: 24px;
    height: 24px;
    border: 1px solid #414a58;
    background: #2a313f;
    color: #b4c2d9;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: filter 0.2s, transform 0.15s;
}

.notify-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.notify-btn svg {
    width: 14px;
    height: 14px;
}

.notify-card.notify-error .notify-bar {
    background: #ef476f;
}

.notify-card.notify-success .notify-bar {
    background: #2d9c6b;
}

.notify-card.notify-success .notify-icon {
    color: #7ce5b7;
}

.notify-card.notify-info .notify-bar {
    background: #67a5ff;
}

.notify-card.notify-info .notify-icon {
    color: #9ec7ff;
}

@keyframes notify-slide-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes notify-slide-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

@media (max-width: 640px) {
    .notify-root {
        right: 10px;
        bottom: 10px;
        width: min(420px, calc(100vw - 16px));
    }
}