#toast {
            visibility: hidden;
            min-width: 300px;
            /* background-color removed here, handled by .success/.error classes */
            color: #fff;
            text-align: center;
            border-radius: 4px;
            position: fixed;
            z-index: 1;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            overflow: hidden;
            font-size: 16px;
            display: flex;
            flex-direction: column;
        }

        /* COLOR VARIANTS */
        #toast.success { background-color: #4caf50; }
        #toast.error { background-color: #f44336; }

        /* TEXT INSIDE TOAST */
        #toast-desc {
            padding: 16px;
        }

        /* VISUAL TIMER BAR */
        #toast-timer {
            height: 4px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.8); /* Neutral white for visibility on both colors */
            transform-origin: left;
            transform: scaleX(0);
        }
          .hide {
             display: none !important;
        }

        .show {
            display: flex !important;
            animation: fadein 0.5s, fadeout 0.5s 3.5s;
        }

        /* VISIBILITY & ANIMATION CLASSES */
        #toast.show {
            visibility: visible;
            animation: fadein 0.5s, fadeout 0.5s 3.5s;
        }

        /* Animate the progress bar width */
        #toast.show #toast-timer {
            animation: countdown 3s linear forwards;
            animation-delay: 0.5s;
        }

        /* KEYFRAMES */
        @keyframes fadein {
            from {bottom: 0; opacity: 0;}
            to {bottom: 30px; opacity: 1;}
        }

        @keyframes fadeout {
            from {bottom: 30px; opacity: 1;}
            to {bottom: 0; opacity: 0;}
        }

        @keyframes countdown {
            from { transform: scaleX(1); }
            to { transform: scaleX(0); }
        }