@layer components {
  #alerts {
    position: fixed;
    right: 14px;
    bottom: 14px;
    display: grid;
    gap: 10px;
    z-index: calc(var(--z-toast, 12000) + 50);
    pointer-events: none;
    width: min(360px, calc(100vw - 24px));
  }

  @media (max-width: 900px) {
    body.use-new-ui #alerts {
      top: calc(env(safe-area-inset-top, 0px) + 12px);
      right: max(12px, env(safe-area-inset-right, 0px));
      left: max(12px, env(safe-area-inset-left, 0px));
      bottom: auto;
      width: auto;
      max-width: none;
    }
  }

  .alert {
    padding: 12px;
    border-radius: 8px;
  }

  .alert.success {
    background: #ecfdf3;
    color: #064e3b;
    border: 1px solid #86efac;
  }

  .alert.error {
    background: #fef2f2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
  }

  .toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 10px 10px 10px 11px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
    animation: toastInSoft 180ms ease-out;
  }

  .toast-success { border-color: rgba(34, 197, 94, 0.35); }
  .toast-error { border-color: rgba(239, 68, 68, 0.35); }
  .toast-warning { border-color: rgba(245, 158, 11, 0.35); }
  .toast-info { border-color: rgba(59, 130, 246, 0.35); }

  .toast-icon { font-size: 15px; margin-top: 2px; }
  .toast-body { line-height: 1.35; color: #0f172a; }
  .toast-title { font-size: 12px; font-weight: 700; color: #0f172a; }
  .toast-message { font-size: 13px; color: #334155; margin-top: 1px; }

  .toast-close {
    border: 0;
    background: transparent;
    color: #64748b;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    cursor: pointer;
  }

  .toast-close:hover { background: rgba(148, 163, 184, 0.16); }

  .toast-leave {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease, opacity 120ms ease;
  }

  #toastStack {
    z-index: var(--z-toast);
  }

  #toastStack .toast-item {
    border-radius: 12px;
  }

  @keyframes toastIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes toastInSoft {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.995);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}