.app-notification-stack {
    position: fixed;
    z-index: 3000;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    display: grid;
    width: min(390px, calc(100vw - 32px));
    gap: 10px;
    pointer-events: none;
}

.app-notification {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    border: 1px solid #abefc6;
    border-left: 5px solid #12b76a;
    border-radius: 13px;
    background: #ecfdf3;
    box-shadow: 0 14px 36px rgba(23, 92, 48, .16);
    color: #067647;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-8px) scale(.985);
    transition: opacity .2s ease, transform .2s ease;
}

.app-notification.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.app-notification-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: #d1fadf;
    color: #067647;
    font-size: 17px;
    font-weight: 700;
}

.app-notification-message {
    min-width: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.app-notification-close {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #786a6d;
    cursor: pointer;
    font: inherit;
    font-size: 21px;
    line-height: 1;
}

.app-notification-close:hover { background: rgba(0, 0, 0, .06); color: inherit; }
.app-notification-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.app-notification[data-kind="success"] { border-color: #abefc6; border-left-color: #12b76a; background: #ecfdf3; color: #067647; }
.app-notification[data-kind="success"] .app-notification-icon { background: #d1fadf; color: #067647; }

.app-notification[data-kind="warning"] { border-color: #fedf89; border-left-color: #f79009; background: #fffaeb; color: #b54708; }
.app-notification[data-kind="warning"] .app-notification-icon { background: #feefc7; color: #b54708; }

.app-notification[data-kind="error"] { border-color: #fecdca; border-left-color: #f04438; background: #fef3f2; color: #b42318; }
.app-notification[data-kind="error"] .app-notification-icon { background: #fee4e2; color: #b42318; }

.app-notification[data-kind="info"] { border-color: #b2ddff; border-left-color: #2e90fa; background: #eff8ff; color: #175cd3; }
.app-notification[data-kind="info"] .app-notification-icon { background: #d1e9ff; color: #175cd3; }

@media (max-width: 600px) {
    .app-notification-stack {
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        left: max(10px, env(safe-area-inset-left));
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-notification { transition: none; }
}