.toast-item {
              pointer-events: auto;
              display: flex;
              align-items: center;
              gap: 12px;
              padding: 14px 18px;
              border-radius: 12px;
              box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
              backdrop-filter: blur(10px);
              animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
              max-width: 400px;
              min-width: 280px;
            }

            .toast-item.toast-exit {
              animation: toastSlideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            @keyframes toastSlideIn {
              from {
                opacity: 0;
                transform: translateX(100%) scale(0.9);
              }

              to {
                opacity: 1;
                transform: translateX(0) scale(1);
              }
            }

            @keyframes toastSlideOut {
              from {
                opacity: 1;
                transform: translateX(0) scale(1);
              }

              to {
                opacity: 0;
                transform: translateX(100%) scale(0.9);
              }
            }

            .toast-success {
              background: #059669;
              color: white;
            }

            .toast-error {
              background: #dc2626;
              color: white;
            }

            .toast-warning {
              background: #d97706;
              color: white;
            }

            .toast-info {
              background: var(--primary-color, #22c55e);
              color: white;
            }

            .toast-primary {
              background: var(--primary-color, #22c55e);
              color: white;
            }

            .toast-icon {
              flex-shrink: 0;
              width: 22px;
              height: 22px;
            }

            .toast-message {
              flex: 1;
              font-size: 14px;
              font-weight: 500;
              line-height: 1.4;
            }

            .toast-close {
              flex-shrink: 0;
              padding: 4px;
              border-radius: 6px;
              cursor: pointer;
              background: rgba(255, 255, 255, 0.1);
              border: none;
              color: inherit;
              transition: background 0.2s;
            }

            .toast-close:hover {
              background: rgba(255, 255, 255, 0.2);
            }

            .toast-progress {
              position: absolute;
              bottom: 0;
              left: 0;
              height: 3px;
              background: rgba(255, 255, 255, 0.4);
              border-radius: 0 0 12px 12px;
              animation: toastProgress linear forwards;
            }

            @keyframes toastProgress {
              from {
                width: 100%;
              }

              to {
                width: 0%;
              }
            }