#nexus-notifications {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 30;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}

.nexus-notification {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 11px;
  min-height: 70px;
  padding: 17px 15px 19px;
  border: 1px solid var(--admin-line, var(--line, #dfe5ec));
  border-radius: 12px;
  background: var(--admin-surface, #fff);
  color: var(--admin-ink, var(--ink, #172033));
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  pointer-events: auto;
  animation: nexus-notification-in 240ms cubic-bezier(.2,.8,.2,1);
}

.nexus-notification.is-negative { border-color: color-mix(in srgb, var(--admin-danger, var(--danger, #b42318)) 28%, var(--admin-line, #dfe5ec)); }
.nexus-notification.is-warning { border-color: #f3c969; background: #fffaf0; }
.nexus-notification-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--admin-accent, var(--accent, #f4a261)) 17%, #fff); color: var(--admin-primary, var(--primary, #17233c)); font-size: 1rem; }
.nexus-notification.is-negative .nexus-notification-icon { background: color-mix(in srgb, var(--admin-danger, var(--danger, #b42318)) 12%, #fff); color: var(--admin-danger, var(--danger, #b42318)); }
.nexus-notification.is-warning .nexus-notification-icon { background: #fff0bd; color: #9a6700; }
.nexus-notification-message { min-width: 0; font: 700 1rem/1.4 "DM Sans", sans-serif; overflow-wrap: anywhere; }
.nexus-notification-close { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--admin-muted, var(--muted, #667085)); cursor: pointer; }
.nexus-notification-close:hover { background: var(--admin-soft, #f2f5f8); color: var(--admin-ink, var(--ink, #172033)); }
.nexus-notification-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--admin-accent, var(--accent, #f4a261)); transform-origin: left center; }
@keyframes nexus-notification-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) { #nexus-notifications { bottom: 16px; width: calc(100vw - 32px); } }
@media (prefers-reduced-motion: reduce) { .nexus-notification { animation: none; } }