 /* --- איפוס והגדרות בסיס --- */
        .system-alert-wrapper {
            z-index: 500 !important; /* מעל הכל */
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
            display: none; /* JS יפעיל את זה */
            font-family: 'Heebo', sans-serif !important;
            pointer-events: none; /* כדי שהמעטפת לא תחסום לחיצות במקומות ריקים */
        }
        
        /* תוכן ההודעה כן צריך לקבל לחיצות */
        .system-alert-content {
            pointer-events: auto;
        }

        /* =========================================
           סגנון 1: Strip (פס לרוחב)
           ========================================= */
        .style-strip {
            width: 100% !important;
            left: 0; right: 0;
        }
        
        .style-strip .system-alert-content {
            height: 48px !important;
            padding: 0 20px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 15px !important;
            font-size: 15px !important;
            font-weight: 500 !important;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* =========================================
           סגנון 2: Bubble (בועה/מודל)
           ========================================= */
        .style-bubble .system-alert-content {
            display: flex; 
            align-items: center; 
            justify-content: center; 
            gap: 15px;
            padding: 16px 24px;
            font-size: 15px;
            font-weight: 500;
            color: #fff;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 12px; /* פינות עגולות לבועות */
            width: auto;
            max-width: 90%;
            backdrop-filter: blur(5px);
        }

        /* --- מיקומים (Classes עם מקף -) --- */

        /* 1. רגיל (Strip) */
        .pos-below-header {
            position: relative !important;
            width: 100vw;
            animation: slideInDown 0.4s ease-out forwards;
        }

        /* 2. צמוד למטה (Strip) */
        .pos-bottom-fixed {
            position: fixed !important;
            bottom: 0 !important;
            animation: slideInUp 0.4s ease-out forwards;
        }

        /* 3. מודל מרכזי (Bubble) */
        .pos-modal-center {
            position: fixed !important;
            top: 0; left: 0; 
            width: 100vw !important; 
            height: 100vh !important;
            background: rgba(0,0,0,0.7) !important; /* מסך חשוך */
            pointer-events: auto; /* חוסם את המסך */
            
            /* Flex כדי למרכז את הבועה */
            align-items: center; 
            justify-content: center;
        }
        
        .pos-modal-center .system-alert-content {
            flex-direction: column; 
            text-align: center;
            min-width: 300px;
            max-width: 500px;
            padding: 40px 30px !important;
            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        
        .pos-modal-center .alert-close-btn {
            position: absolute; top: 12px; left: 12px; margin: 0 !important;
        }

        /* 4. בועה עליונה (Toast) */
        .pos-toast-top {
            position: fixed !important;
            top: 25px; left: 50%;
            transform: translateX(-50%);
            width: auto !important;
            animation: toastSlideDown 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
        }
        .pos-toast-top .system-alert-content {
            border-radius: 50px;
            min-width: 320px;
        }

        /* 5. בועה תחתונה (Toast) */
        .pos-toast-bottom {
            position: fixed !important;
            bottom: 25px; left: 50%;
            transform: translateX(-50%);
            width: auto !important;
            animation: toastSlideUp 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
        }
        .pos-toast-bottom .system-alert-content {
            border-radius: 50px;
            min-width: 320px;
        }

        /* --- אלמנטים פנימיים --- */
        .alert-icon-box {
            background: rgba(255,255,255,0.2);
            width: 30px; height: 30px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .alert-close-btn {
            background: rgba(0,0,0,0.15);
            border: 1px solid rgba(255,255,255,0.2);
            color: #fff;
            width: 26px; height: 26px;
            border-radius: 50%;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s;
            padding: 0;
            flex-shrink: 0;
        }
        .alert-close-btn:hover { background: rgba(0,0,0,0.4); transform: scale(1.1); }

        /* קישור בגוף ההודעה */
        .alert-link-text {
            color: #fff !important;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: opacity 0.2s, transform 0.2s;
            font-weight: 600;
        }
        .alert-link-text:hover {
            opacity: 0.85;
            text-decoration: underline;
            text-underline-offset: 4px;
        }

        /* צבעים */
        .alert-bg-info { background: linear-gradient(135deg, #2980b9, #3498db); }
        .alert-bg-success { background: linear-gradient(135deg, #27ae60, #2ecc71); }
        .alert-bg-warning { background: linear-gradient(135deg, #d35400, #f39c12); }
        .alert-bg-danger { background: linear-gradient(135deg, #c0392b, #e74c3c); }

        /* אנימציות */
        @keyframes slideInDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes slideInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes toastSlideDown { from { top: -100px; transform: translateX(-50%); opacity: 0; } to { top: 25px; transform: translateX(-50%); opacity: 1; } }
        @keyframes toastSlideUp { from { bottom: -100px; transform: translateX(-50%); opacity: 0; } to { bottom: 25px; transform: translateX(-50%); opacity: 1; } }
        @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
   