.df-notification-stack {
    position: fixed;
    z-index: 12000;
    top: auto;
    right: 20px;
    bottom: 20px;
    display: grid;
    width: min(390px, calc(100vw - 32px));
    gap: 10px;
    pointer-events: none;
}
.df-notification {
    --df-notification-accent: #2563eb;
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    align-items: start;
    gap: 12px;
    overflow: hidden;
    padding: 14px 14px 17px;
    color: #172b4d;
    background: #fff;
    border: 1px solid #e5eaf2;
    border-left: 4px solid var(--df-notification-accent);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .16);
    pointer-events: auto;
    animation: df-notification-enter 220ms cubic-bezier(.2,.8,.2,1) both;
}
.df-notification--success { --df-notification-accent: #16a36a; }
.df-notification--error { --df-notification-accent: #dc3545; }
.df-notification--warning { --df-notification-accent: #d99208; }
.df-notification--info { --df-notification-accent: #2563eb; }
.df-notification__brand { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; background: #f1f7ff; border-radius: 12px; }
.df-notification__brand img { display: block; width: 31px; height: 31px; object-fit: contain; }
.df-notification__brand-fallback { display: none; color: #fff; background: linear-gradient(145deg, #2563eb, #10b981); font-size: 21px; font-weight: 800; }
.df-notification__copy { min-width: 0; padding-top: 1px; }
.df-notification__title { display: block; margin: 0 0 3px; color: #172b4d; font-size: 13px; font-weight: 750; line-height: 1.3; }
.df-notification__message { margin: 0; color: #526176; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.df-notification__close { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; color: #8793a5; background: transparent; border: 0; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; }
.df-notification__close:hover { color: #172b4d; background: #f1f5f9; }
.df-notification__close:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.df-notification__progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: color-mix(in srgb, var(--df-notification-accent) 18%, white); transform-origin: left; animation: df-notification-progress 5.2s linear forwards; }
.df-notification.is-leaving { animation: df-notification-exit 180ms ease-in both; }
@keyframes df-notification-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes df-notification-exit { to { opacity: 0; transform: translateY(5px) scale(.985); } }
@keyframes df-notification-progress { to { transform: scaleX(0); } }
@media (max-width: 575.98px) { .df-notification-stack { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); } .df-notification { gap: 10px; padding: 12px 11px 15px; } }
@media (prefers-reduced-motion: reduce) { .df-notification,.df-notification.is-leaving,.df-notification__progress { animation-duration: .01ms; } }