/* Toasts — top-right stack */
.notifications {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.notifications .toast {
  position: relative;
  overflow: hidden;
  width: 360px;
  max-width: calc(100vw - 40px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 16px 16px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #E3ECF7;
  border-left: 4px solid var(--toast-c, #0B60F2);
  box-shadow: 0 12px 32px rgba(1, 30, 73, .14);
  font: 500 14px/1.45 'Inter', sans-serif;
  color: #011E49;
  animation: toast-in .35s cubic-bezier(.2, .9, .3, 1.2) both;
}

.notifications .toast.hide { animation: toast-out .35s ease forwards; }
.notifications .toast .column { display: flex; align-items: flex-start; gap: 10px; }
.notifications .toast .column svg { width: 20px; height: 20px; flex: none; color: var(--toast-c); margin-top: 1px; }
.notifications .toast-close { border: 0; background: none; cursor: pointer; color: #8296D3; padding: 0; display: grid; }
.notifications .toast-close svg { width: 16px; height: 16px; }
.notifications .toast-close:hover { color: #011E49; }
.notifications .toast-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-c); opacity: .25; transform-origin: left; animation: toast-timer linear forwards; }

.toast.success { --toast-c: #1E8E4F; }
.toast.error { --toast-c: #D64928; }
.toast.warning { --toast-c: #E08A00; }
.toast.info { --toast-c: #0B60F2; }

@keyframes toast-in { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }
@keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }