.flash-toast-stack {
  position: fixed;
  z-index: 1040;
  top: 20px;
  right: max(20px, env(safe-area-inset-right));
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  pointer-events: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(188, 207, 226, 0.42) transparent;
}

body.ek-shell-v2 .flash-toast-stack {
  top: calc(var(--shell-v2-topbar-height, 64px) + 16px);
  max-height: calc(100dvh - var(--shell-v2-topbar-height, 64px) - 32px);
}

body.login-page .flash-toast-stack {
  top: max(20px, env(safe-area-inset-top));
}

.flash-toast {
  --flash-accent: #78c8ff;
  --flash-accent-tint: rgba(120, 200, 255, 0.13);
  --flash-border: rgba(120, 200, 255, 0.32);

  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 13px 10px 13px 14px;
  border: 1px solid var(--flash-border);
  border-radius: 12px;
  background: #15263a;
  box-shadow: 0 12px 28px rgba(4, 12, 24, 0.3), 0 2px 6px rgba(4, 12, 24, 0.18);
  color: #f3f7fb;
  pointer-events: auto;
  animation: flash-toast-enter 180ms cubic-bezier(0, 0, 0.2, 1) both;
}

.flash-toast--success {
  --flash-accent: #68e0ad;
  --flash-accent-tint: rgba(104, 224, 173, 0.13);
  --flash-border: rgba(104, 224, 173, 0.32);
}

.flash-toast--info {
  --flash-accent: #78c8ff;
  --flash-accent-tint: rgba(120, 200, 255, 0.13);
  --flash-border: rgba(120, 200, 255, 0.32);
}

.flash-toast--warning {
  --flash-accent: #ffd27a;
  --flash-accent-tint: rgba(255, 210, 122, 0.14);
  --flash-border: rgba(255, 210, 122, 0.34);
}

.flash-toast--danger {
  --flash-accent: #ff9ca5;
  --flash-accent-tint: rgba(255, 156, 165, 0.14);
  --flash-border: rgba(255, 156, 165, 0.34);
}

.flash-toast__icon {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 10px;
  background: var(--flash-accent-tint);
  color: var(--flash-accent);
  font-size: 1rem;
}

.flash-toast__content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1px;
  overflow-wrap: anywhere;
}

.flash-toast__title,
.flash-toast__body {
  margin: 0;
  text-wrap: pretty;
}

.flash-toast__title {
  color: #f7f9fc;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.flash-toast__body {
  margin-top: 3px;
  color: #c9d4e1;
  font-size: 0.83rem;
  font-weight: 450;
  line-height: 1.45;
}

.flash-toast__body--single {
  margin-top: 2px;
  color: #e0e8f1;
  font-size: 0.87rem;
  font-weight: 600;
}

.flash-toast__close {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -6px -4px -4px 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #aebdd0;
  cursor: pointer;
  font-size: 0.75rem;
  transition-property: color, background-color;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}

.flash-toast__close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.flash-toast__close:focus-visible {
  outline: 2px solid #91c8ff;
  outline-offset: 1px;
  color: #ffffff;
}

.flash-toast.is-dismissing {
  opacity: 0;
  transform: translateX(8px);
  transition-property: opacity, transform;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

@keyframes flash-toast-enter {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 575.98px) {
  .flash-toast-stack {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: min(390px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    gap: 8px;
  }

  body.ek-shell-v2 .flash-toast-stack {
    top: calc(var(--shell-v2-topbar-height, 64px) + 12px);
    max-height: calc(100dvh - var(--shell-v2-topbar-height, 64px) - 24px - env(safe-area-inset-bottom));
  }

  body.login-page .flash-toast-stack {
    top: max(18px, env(safe-area-inset-top));
  }

  .flash-toast {
    gap: 10px;
    padding: 11px 8px 11px 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flash-toast,
  .flash-toast__close,
  .flash-toast.is-dismissing {
    animation: none;
    transition: none;
  }
}