:root {
    --toast-ok: #1f6b45;
    --toast-error: #9b2c2c;
    --toast-info: #1f6f78;
}

.toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: grid;
    gap: 0.65rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: #fff;
    color: #0d1f24;
    box-shadow: 0 16px 40px rgba(13, 31, 36, 0.18);
    border-left: 4px solid var(--toast-info);
    animation: toastIn 0.28s ease both;
    font-family: "Outfit", sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
}

.toast.is-leaving {
    animation: toastOut 0.25s ease both;
}

.toast-success { border-left-color: var(--toast-ok); }
.toast-error { border-left-color: var(--toast-error); }
.toast-info { border-left-color: var(--toast-info); }

.toast-message { flex: 1; }
.toast-close {
    border: 0;
    background: transparent;
    color: #5c7178;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-10px) translateX(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes toastOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-8px) translateX(8px); }
}