:root { --p: #2563eb; --s: #10b981; --d: #ef4444; --border: #e2e8f0; --bg: #f8fafc; }


.ubm-live-button { 
    position: relative !important; 
    box-sizing: border-box !important;
}
/* توزيع الصفحة: تصغير العمود الأوسط */
.ubm-wrapper { 
    display: grid; 
    grid-template-columns: 22.2% 48.4% 29.5%; 
    gap: 15px; 
    padding: 20px; 
    background: var(--bg);
}

@media (max-width: 1400px) { .ubm-wrapper { grid-template-columns: 300px 420px; } }
@media (max-width: 1024px) { .ubm-wrapper { grid-template-columns: 1fr; } }

.ubm-card { background: #fff; border-radius: 12px; padding: 15px; border: 1px solid var(--border); }

/* إجبار ظهور زرين بجانب بعضهما */
.preview-grid { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 10px !important; 
    max-height: 60vh; 
    overflow-y: auto; 
    padding: 5px;
}

/* التبويبات المائلة */
.ubm-tabs-container { display: flex; justify-content: center; margin-bottom: 20px; }
.ubm-tabs-group { display: inline-flex; background: #e2e8f0; padding: 4px; border-radius: 12px; width: 90%;}
.ubm-tab-btn {
    border: none !important; padding: 10px 18px !important; font-weight: 700 !important;
    font-size: 12px !important; cursor: pointer !important; color: #64748b !important;
    background: transparent !important; margin: 0 -6px !important;
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%); transition: 0.3s;
    width: 34.5%;
}
.ubm-tab-btn.active { background: var(--p) !important; color: #fff !important; z-index: 10;width: 34.5%; }
.ubm-tab-btn:first-child { clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%); margin-left: 0 !important; }
.ubm-tab-btn:last-child { clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%); margin-right: 0 !important; }

/* المربع الصغير */
.p-box { 
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; 
    background: #fff; display: flex; flex-direction: column; position: relative;
}
.p-main-click { padding: 15px 8px; cursor: pointer; text-align: center; }
.btn-v { width: 100%; font-size: 11px; padding: 10px 5px; border-radius: 6px; font-weight: bold; border: none; }

.p-footer-actions { display: flex; border-top: 1px solid #f1f5f9; background: #fafafa; }
.p-footer-actions div { flex: 1; padding: 8px; text-align: center; cursor: pointer; font-size: 10px; color: #64748b; }
.p-footer-actions div:first-child { border-right: 1px solid #f1f5f9; }

.fav-icon { position: absolute; top: 5px; right: 5px; cursor: pointer; color: #cbd5e1; z-index: 5; }
.fav-icon.active { color: var(--d); }

/* الأنماط الأساسية */
.s-glow { background: #000; color: #0ff; box-shadow: 0 0 5px #0ff; }
.s-grad { background: linear-gradient(45deg, #f093fb, #f5576c); color: #fff; }
.s-3d { background: var(--p); color: #fff; box-shadow: 0 4px 0 #1e40af; }


.act-btn { padding: 6px 12px; border-radius: 6px; border: none; color: #fff; cursor: pointer; font-size: 11px; font-weight: 600; transition: opacity 0.2s; }
.act-btn:hover { opacity: 0.8; }

/* Styles (Glow, Grad, etc.) */
.s-glow { background: #000; color: #0ff; box-shadow: 0 0 5px #0ff; }
.s-grad { background: linear-gradient(45deg, #f093fb, #f5576c); color: #fff; }
.s-3d { background: var(--p); color: #fff; box-shadow: 0 4px 0 #1e40af; }
.s-eco { background: var(--s); color: #fff; border-radius: 20px; }
.s-glass { background: rgba(37,99,235,0.1); border: 1px solid var(--p); color: var(--p); }
.s-dark { background: #1e293b; color: #fff; }
.s-royal { background: #7c3aed; color: #fff; }
.s-modern { background: #fff; border: 1px solid #000; box-shadow: 2px 2px 0 #000; }
.s-outline { background: transparent; border: 2px solid #333; }
.s-soft { background: #f1f5f9; color: #475569; }
.s-fire { background: #f59e0b; color: #fff; }
.s-ghost { background: #fff; border: 1px dashed #94a3b8; }



.text-manager-list { max-height: 200px; overflow-y: auto; margin-top: 15px; border: 1px solid #f1f5f9; padding: 10px; border-radius: 8px; background: #fafafa; }

.st-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7); display: none; align-items: center; justify-content: center; z-index: 9999; }
.st-content { background: #fff; padding: 25px; border-radius: 16px; width: 90%; max-width: 400px; }
#ubm-toast { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 12px 24px; border-radius: 12px; display: none; z-index: 10001; }


/* 13. الزر الموشوري (Prismatic Refraction) */
.s-btn-13 {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: #fff !important;;
    border: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.s-btn-13::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 180deg, rgba(255,255,255,0.4), transparent, rgba(255,255,255,0.4));
    animation: prismRotate 4s linear infinite;
    z-index: -1;
}
@keyframes prismRotate { 100% { transform: rotate(360deg); } }

/* 14. الزر المنصهر (Magma Flow) */
.s-btn-14 {
    background: #1a1a1a;
    color: #ff4d00 !important;;
    border: 1px solid #ff4d00;
    box-shadow: 0 0 15px #ff4d00;
    background-image: radial-gradient(circle at center, #ff4d00 0%, transparent 70%);
    background-size: 200% 200%;
    animation: magmaFlow 3s ease infinite alternate;
}
@keyframes magmaFlow { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }

/* 15. النمط الميكانيكي الهيكلي (Skeleton Mech) */
.s-btn-15 {
    background: #2c3e50;
    color: #ecf0f1 !important;;
    border: 4px double #34495e;
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

/* 16. الوهج الضبابي (Aurora Borealis) */
.s-btn-16 {
    background: #000;
    color: #fff !important;;
    border: none;
    box-shadow: 0 0 20px rgba(0,255,150,0.5);
    background: linear-gradient(270deg, #00d2ff, #3a7bd5, #00d2ff);
    background-size: 400% 400%;
    animation: auroraShift 5s ease infinite;
}
@keyframes auroraShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* 17. زر الكريستال المكسور (Glitch Crystal) */
.s-btn-17 {
    background: #673ab7;
    color: #fff!important;;
    border: none;
    position: relative;
    clip-path: polygon(5% 15%, 95% 5%, 100% 85%, 5% 95%);
    text-shadow: 2px 2px #ff00de;
}

/* 18. زر الطبقات المعدنية (Stacked Steel) */
.s-btn-18 {
    background: #d1d5db;
    color: #1f2937 !important;;
    border: none;
    box-shadow: 
        0 2px 0 #9ca3af,
        0 4px 0 #6b7280,
        0 6px 0 #374151,
        0 10px 10px rgba(0,0,0,0.3);
    transform: perspective(500px) rotateX(20deg);
}

/* 19. الفقاعة الهلامية (Jelly Blob) */
.s-btn-19 {
    background: #ff007f;
    color: #fff !important;;
    border: none;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: jellyWobble 4s ease-in-out infinite;
}
@keyframes jellyWobble {
    0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
}

/* 20. نيون الفراغ (Void Neon) */
.s-btn-20 {
    background: transparent;
    color: #fff !important;;
    border: 2px solid #fff;
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #0ff) drop-shadow(0 0 15px #0ff);
    font-weight: 100;
    text-transform: lowercase;
    font-style: italic;
}
/* 21. نيون سائل (Liquid Neon) */
.s-btn-21 {
    background: #000;
    color: #fff !important;;
    border: 1px solid #00f2fe;
    box-shadow: inset 0 0 10px #00f2fe, 0 0 10px #00f2fe;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 22. زجاجي ذهبي (Royal Glass) */
.s-btn-22 {
    background: rgba(184, 134, 11, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid #b8860b;
    color: #b8860b;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 23. سايبر بانك (Cyberpunk) */
.s-btn-23 {
    background: #fdf001;
    color: #000 !important;;
    border: none;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%);
    font-weight: 900;
}

/* 24. تدرج الفضاء (Space Gradient) */
.s-btn-24 {
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    color: #00d2ff !important;;
    border: 1px solid #302b63;
}

/* 25. ناعم طافي (Soft Floating) */
.s-btn-25 {
    background: #fff;
    color: #6366f1 !important;;
    border: none;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.15);
}

/* 26. تصميم الماتيريال الحديث (Material You) */
.s-btn-26 {
    background: #e7e0ff;
    color: #1d192b !important;;
    border-radius: 16px;
    border: none;
}

/* 27. الخطوط المتقاطعة (Cross Lines) */
.s-btn-27 {
    background: transparent;
    border: 2px solid #1e293b;
    color: #1e293b !important;;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.03) 5px, rgba(0,0,0,0.03) 10px);
}

/* 28. الزمردي المضيء (Glowing Emerald) */
.s-btn-28 {
    background: #10b981;
    color: #fff !important;;
    border: none;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* 29. الباستيل الوردي (Pink Pastel) */
.s-btn-29 {
    background: #fbcfe8;
    color: #9d174d !important;;
    border: 1px solid #f9a8d4;
}

/* 30. كربون فايبر (Carbon Fiber) */
.s-btn-30 {
    background: #232526;
    background: linear-gradient(to right, #414345, #232526);
    color: #fff !important;
    border-radius: 4px;
}

/* 31. زر الفقاعة (Bubble Button) */
.s-btn-31 {
    background: #3b82f6;
    color: #fff !important;
    border-radius: 50px;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);
}

/* 32. حواف متوهجة (Border Glow) */
.s-btn-32 {
    background: #111;
    color: #fff !important;;
    padding: 10px;
    position: relative;
    border: none;
    z-index: 1;
}
.s-btn-32::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00);
    z-index: -1;
    filter: blur(5px);
    border-radius: 8px;
}

/* 33. النمط المنبعج المرن (Squishy Elastic) - بناء جديد بالكامل */
.ubm-live-button.s-btn-33 {
    background: #2563eb !important; /* لون أزرق صريح وواضح */
    color: #ffffff !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 0 #1e40af !important; /* ظل سفلي يعطي عمقاً */
    
    /* استدعاء حركة الانبعاج */
    animation: ubmSquish 3s ease-in-out infinite !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* حركة الانبعاج والاستواء (Squash and Stretch) */
@keyframes ubmSquish {
    0%, 100% {
        transform: scale(1, 1); /* الحالة الطبيعية - مستوي */
    }
    30% {
        transform: scale(1.1, 0.85); /* ينبعج: يتمدد عرضاً وينضغط طولاً */
    }
    50% {
        transform: scale(0.95, 1.05); /* يرتد: يتقلص عرضاً ويتمدد طولاً */
    }
    70% {
        transform: scale(1.05, 0.95); /* اهتزاز خفيف قبل الاستقرار */
    }
}

/* تأثير إضافي عند تمرير الماوس */
.ubm-live-button.s-btn-33:hover {
    background: #3b82f6 !important;
    transform: translateY(2px) !important;
    box-shadow: 0 3px 0 #1e40af !important;
}

/* إضافة لمعة داخلية بسيطة تتبع الانبعاج */
.ubm-live-button.s-btn-33::before {
    content: '' !important;
    position: absolute !important;
    top: 5px;
    left: 5px;
    right: 5px;
    height: 40%;
    background: linear-gradient(rgba(255,255,255,0.3), transparent) !important;
    border-radius: 8px !important;
    pointer-events: none !important;
}

/* 34. تدرج الغسق (Twilight) */
.s-btn-34 {
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    color: #fff !important;
    border: none;
}

/* 35. النمط البسيط (Minimalist) */
.s-btn-35 {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #374151 !important;
}

/* 36. التصميم العتيق (Vintage) */
.s-btn-36 {
    background: #f4e4bc;
    color: #5d4037 !important;
    border: 2px solid #5d4037;
    font-family: serif;
}

/* 37. النيون البنفسجي (Purple Neon) */
.s-btn-37 {
    background: transparent;
    color: #a855f7 !important;
    border: 2px solid #a855f7;
    text-shadow: 0 0 5px #a855f7;
}

/* 38. زر المحيط (Ocean Flow) */
.s-btn-38 {
    background: linear-gradient(180deg, #2dd4bf 0%, #0891b2 100%);
    color: #fff !important;
    border: none;
}

/* 39. الورق المطوي (Paper Fold) */
.s-btn-39 {
    background: #fff;
    color: #2563eb !important;
    border: 1px solid #e2e8f0;
    clip-path: polygon(0 0, 90% 0, 100% 20%, 100% 100%, 0 100%);
}

/* 40. البركان (Volcano) */
.s-btn-40 {
    background: #000;
    color: #ff4500 !important;
    border: 1px solid #ff4500;
    box-shadow: inset 0 0 15px rgba(255, 69, 0, 0.3);
}

/* 41. النمط المظلم الناعم (Deep Dark) */
.s-btn-41 {
    background: #18181b;
    color: #a1a1aa !important;
    border: 1px solid #27272a;
}

/* 42. التدرج الذهبي المتطور (Advanced Gold) */
.s-btn-42 {
    background: linear-gradient(45deg, #d4af37, #f9f295, #d4af37);
    color: #422a00 !important;
    border: none;
    font-weight: bold;
}

/* 43. تدرج إنستجرام (Social Gradient) */
.s-btn-43 {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #fff !important;
    border: none;
}

/* 44. شبكي تقني (Tech Mesh) */
.s-btn-44 {
    background-color: #000;
    background-image: radial-gradient(#333 1px, transparent 0);
    background-size: 5px 5px;
    color: #fff !important;
    border: 1px solid #444;
}

/* 45. الحلوى (Candy) */
.s-btn-45 {
    background: #ff758c;
    background: linear-gradient(to bottom, #ff7eb3, #ff758c);
    color: #fff !important;
    border-radius: 20px;
    border: none;
}

/* 46. نيون أخضر مصفوفة (Matrix) */
.s-btn-46 {
    background: #000;
    color: #00ff00 !important;
    border: 1px solid #00ff00;
    font-family: monospace;
}

/* 47. زر الظل الطويل (Long Shadow) */
.s-btn-47 {
    background: #ef4444;
    color: #fff !important;
    border: none;
    overflow: hidden;
}

/* 48. النمط الجامعي (Varsity) */
.s-btn-48 {
    background: #fff;
    color: #1e3a8a !important;
    border: 3px double #1e3a8a;
    font-weight: bold;
}

/* 49. النمط الهولوجرافيك (Holographic) */
.s-btn-49 {
    background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    color: #4b5563 !important;
    border: none;
    opacity: 0.9;
}

/* 50. النمط النهائي المضيء (Ultimate Pulse) */
.s-btn-50 {
    background: #7c3aed;
    color: #fff !important;
    border: none;
    animation: ubmPulse 2s infinite;
}

@keyframes ubmPulse {
    0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

/* --- أزرار الخيال العلمي والحلقات الدوارة (51-60) --- */

/* 51. المدار الذري (المصحح) */
.s-btn-51 {
    background: #000 !important;
    color: #00d2ff !important;
    border: 1px solid #00d2ff !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important; /* هذا ما يمنع الحركة من الخروج */
}

.s-btn-51::before {
    content: '' !important;
    position: absolute !important;
    /* نجعل العنصر الدوار أكبر من الزر ونخفي أطرافه بالـ overflow */
    top: -50% !important; 
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: conic-gradient(transparent, #00d2ff, transparent 30%);
    animation: ubmSpin 3s linear infinite !important;
    z-index: -1 !important;
}

.s-btn-51::after {
    content: '' !important;
    position: absolute !important;
    inset: 2px !important;
    background: #000 !important;
    z-index: -1 !important;
    border-radius: inherit;
}

/* 52. رادار المسح (Radar Scan) */
.s-btn-52 {
    background: #042104; color: #00ff00 !important; border: 1px solid #00ff00;
    position: relative; overflow: hidden;
}
.s-btn-52::after {
    content: ''; position: absolute; top: -100%; left: -100%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(0, 255, 0, 0.4));
    animation: ubmSpin 3s linear infinite;
}

/* 53. حلقة البلازما (Plasma Ring) */
/* 53. حلقة البلازما المطورة (Deep Plasma) */
.s-btn-53 {
    background: #0d001a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.4) !important;
}

.s-btn-53::before {
    content: '' !important;
    position: absolute !important;
    inset: -20px !important;
    /* تدفق ألوان البلازما */
    background: conic-gradient(from 0deg, #ff00ff, #00ffff, #7f00ff, #ff00ff) !important;
    animation: ubmSpin 3s linear infinite !important;
    z-index: -2 !important;
}

.s-btn-53::after {
    content: '' !important;
    position: absolute !important;
    inset: 3px !important;
    background: radial-gradient(circle, #2a004d 0%, #0d001a 100%) !important;
    border-radius: 50px !important;
    z-index: -1 !important;
}

/* تأثير النبض الضوئي خلف النص */
.s-btn-53 .ubm-text-inner {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8) !important;
    animation: ubmPlasmaPulse 2s ease-in-out infinite alternate !important;
}

@keyframes ubmPlasmaPulse {
    from { opacity: 0.8; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}
/* 54. بوابة السفر عبر الزمن (Time Portal) */
.s-btn-54 {
    background: radial-gradient(circle, #222, #000) !important; 
    color: #fff !important; 
    border: none !important;
    position: relative !important; /* لتقييد الخطوط داخل الزر */
    overflow: hidden !important;   /* يمنع الخطوط من الخروج لكامل الصفحة */
    z-index: 1;
}

.s-btn-54::before, .s-btn-54::after {
    content: '' !important; 
    position: absolute !important; 
    inset: -10px; 
    border: 1px dashed #555;
    border-radius: 10px; 
    /* تم زيادة الوقت لتبطئ الحركة */
    animation: ubmSpin 8s linear infinite; 
    z-index: -1;
}

.s-btn-54::after { 
    animation-direction: reverse; 
    animation-duration: 12s; /* أبطأ من الطبقة الأولى */
    inset: -5px; 
    border-style: dotted; 
    border-color: #888;
}
/* 55. النيون الدوار المطور (Neon Cycle) */
.s-btn-55 {
    background: #111 !important;
    color: #0f0 !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
}

.s-btn-55::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #0f0);
    animation: ubmLine1 1.5s linear infinite;
}

@keyframes ubmLine1 {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.s-btn-55::after {
    content: '';
    position: absolute;
    bottom: 0; right: -100%;
    width: 100%; height: 2px;
    background: linear-gradient(270deg, transparent, #0f0);
    animation: ubmLine2 1.5s linear infinite;
    animation-delay: 0.75s;
}

@keyframes ubmLine2 {
    0% { right: -100%; }
    50%, 100% { right: 100%; }
}

.s-btn-55:hover {
    box-shadow: 0 0 20px #0f0 !important;
    background: #0f0 !important;
    color: #111 !important;
}

/* 56. الشاشة الرقمية المعطلة (Glitch HUD) */
/* 56. واجهة السايبر المعطلة (Cyber Glitch HUD) */
.s-btn-56 {
    background: #0a0a0a !important;
    color: #00ffcc !important; /* لون فسفوري */
    border: 1px solid rgba(0, 255, 204, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    font-family: 'Orbitron', sans-serif, monospace !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* إضافة خطوط المسح (Scanlines) */
.s-btn-56::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.2) 50%
    ), linear-gradient(
        90deg, 
        rgba(255, 0, 0, 0.05), 
        rgba(0, 255, 0, 0.02), 
        rgba(0, 0, 255, 0.05)
    ) !important;
    background-size: 100% 4px, 3px 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* تأثير التشويش (Glitch) الخلفي */
.s-btn-56::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 255, 204, 0.1) !important;
    animation: ubmHudShift 4s steps(4) infinite !important;
    z-index: -1 !important;
}

@keyframes ubmHudShift {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-5px) skewY(1deg); background: rgba(255, 0, 0, 0.1); }
    20% { transform: translateX(5px) skewY(-1deg); background: rgba(0, 0, 255, 0.1); }
}

/* اهتزاز النص عند الهوفير */
.s-btn-56:hover .ubm-text-inner {
    animation: ubmTextGlitch 0.2s infinite !important;
}

@keyframes ubmTextGlitch {
    0% { text-shadow: 2px 0 #ff0000, -2px 0 #0000ff; }
    50% { text-shadow: -2px 0 #ff0000, 2px 0 #0000ff; }
    100% { text-shadow: 2px 0 #ff0000, -2px 0 #0000ff; }
}

/* 57. النواة الطافية (Floating Core) */
.s-btn-57 {
    background: #fff; color: #000 !important; border: solid 1px rgb(72, 199, 72); box-shadow: 0 0 20px #fff;
    animation: ubmFloat 2s ease-in-out infinite;
}

/* 58. إشارة الاستغاثة الفضائية (S.O.S Signal) */
.s-btn-58 {
    background: #991b1b; color: #fff !important; border: none; position: relative;
}
.s-btn-58::before {
    content: ''; position: absolute; inset: 0; background: #ef4444;
    animation: ubmPulseRing 1.5s ease-out infinite; border-radius: inherit;
}

/* 59. درع الطاقة (Force Field) */
.s-btn-59 {
    background: rgba(0, 242, 254, 0.1); color: #00f2fe !important; border: 1px solid #00f2fe;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,242,254,0.1) 2px, rgba(0,242,254,0.1) 4px);
}

/* 60. المحرك التخيلي (Nebula Engine) */
.s-btn-60 {
    background: linear-gradient(90deg, #ff0080, #ff8c00, #40e0d0, #ff0080);
    background-size: 300% 100%; color: #fff !important; border: none;
    animation: ubmFlow 4s linear infinite;
}

/* --- الحركات (Animations) --- */
@keyframes ubmSpin { to { transform: rotate(360deg); } }
@keyframes ubmHue { to { filter: hue-rotate(360deg); } }
@keyframes ubmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ubmPulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}
@keyframes ubmFlow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes ubmGlitch {
    0% { clip-path: inset(10% 0 30% 0); }
    100% { clip-path: inset(25% 0 5% 0); }
}
.s-btn-61 {
    background: #000;
    color: #f0f !important;
    border: none;
    position: relative;
    z-index: 1;
    font-weight: 900;
    letter-spacing: 2px;
}

.s-btn-61::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg, #f0f, #0ff, #f0f, #0ff);
    background-size: 400%;
    z-index: -1;
    filter: blur(10px);
    animation: ubmGlowMove 20s linear infinite;
}

.s-btn-61::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    z-index: -1;
    border-radius: 5px;
}

@keyframes ubmGlowMove {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* 62. Jewel Pulse - المصحح */
.s-btn-62 {
    position: relative !important;
    overflow: hidden !important; /* قمنا بتغييرها لمنع التشتت في الداشبورد */
    background: #6366f1 !important;
    color: #fff !important;
    z-index: 1;
}
.s-btn-62::after {
    content: '' !important;
    position: absolute !important;
    top: 50%; left: 50%;
    width: 150%; height: 150%;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ubmRipple 2s infinite;
    z-index: -1;
}
@keyframes ubmRipple {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* 63. النيون المتدفق (Flowing Neon) */
.s-btn-63 {
    background: #000 !important; color: #ff0055 !important;
    border: 2px solid #ff0055 !important;
    box-shadow: 0 0 10px #ff0055, inset 0 0 5px #ff0055 !important;
    background-image: linear-gradient(90deg, transparent, rgba(255,0,85,0.2), transparent) !important;
    background-size: 200% 100% !important;
    animation: ubmFlow 3s linear infinite;
}

/* 64. نمط "الثقب الأسود المضيء" (Vortex Glow) - فريد جداً */
.s-btn-64 {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.2) !important;
}
.s-btn-64::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 300%; height: 300%;
    background: radial-gradient(circle, #ff00ff 0%, #00ffff 30%, transparent 70%);
    animation: ubmVortex 6s linear infinite;
    transform-origin: center;
    z-index: -2;
}
.s-btn-64::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #000;
    border-radius: inherit;
    z-index: -1;
}
@keyframes ubmVortex {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 65. شفرة السايبر (Cyber Blade) */
.s-btn-65 {
    background: #111 !important; color: #00f2fe !important;
    clip-path: polygon(0% 0%, 90% 0%, 100% 30%, 100% 100%, 10% 100%, 0% 70%) !important;
    border-left: 4px solid #00f2fe !important;
}

/* 66. الذهب السائل (Liquid Gold) */
.s-btn-66 {
    background: linear-gradient(135deg, #d4af37 0%, #f9f295 50%, #d4af37 100%) !important;
    color: #422a00 !important; border: none !important;
    background-size: 200% 200% !important;
    animation: magmaFlow 4s ease infinite alternate;
    font-weight: 800 !important;
}

/* 67. الزر الهولوجرافيك (Holo Foil) */
.s-btn-67 {
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff, #00ffff) !important;
    background-size: 400% 400% !important;
    animation: auroraShift 8s ease infinite;
    color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* 68. تطواف النيون الملتف (Infinite Border Wrap) */
.s-btn-68 {
    background: #111 !important;
    color: #0ff !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}
.s-btn-68::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, transparent, transparent, #0ff);
    animation: ubmSpin 3s linear infinite;
    z-index: -1;
}
.s-btn-68::after {
    content: '';
    position: absolute;
    inset: 2px; /* سماكة البرواز */
    background: #111;
    border-radius: inherit;
    z-index: -1;
}

/* 69. البساطة الفاخرة (Luxury Minimal) */
.s-btn-69 {
    background: transparent !important; color: #111 !important;
    border: 1px solid #111 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.s-btn-69:hover {
    background: #111 !important; color: #fff !important;
    letter-spacing: 3px !important;
}

/* 70. مطر الماتركس - بناء جديد كلياً (Matrix Reborn) */
.s-btn-70 {
    background: #000 !important;
    color: #00ff41 !important;
    border: 1px solid #00ff41 !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    font-family: monospace !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.2) !important;
}

/* 70. مطر الماتركس المطور - النسخة النهائية (أرقام ساطعة وباهتة) */
.s-btn-70 {
    background: #000 !important;
    color: #00ff41 !important;
    border: 1px solid #00ff41 !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    font-family: monospace !important;
    padding: 14px 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* الطبقة 1: المطر الرقمي (SVG متكرر) */
.s-btn-70::before {
    content: '' !important;
    position: absolute !important;
    inset: -100% 0 !important;
    /* نستخدم ألواناً متفاوتة في الـ SVG لتعطي أرقاماً ساطعة وباهتة */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ctext x='0' y='15' fill='rgba(0, 255, 65, 0.6)' font-family='monospace' font-size='10'%3E1 0 1 1%3C/text%3E%3Ctext x='15' y='30' fill='rgba(0, 255, 65, 0.1)' font-family='monospace' font-size='10'%3E0 1 0 0%3C/text%3E%3Ctext x='5' y='45' fill='rgba(0, 255, 65, 0.4)' font-family='monospace' font-size='10'%3E1 1 0 1%3C/text%3E%3C/svg%3E") !important;
    background-size: 35px 35px !important;
    animation: matrixScroll 2.5s linear infinite !important;
    z-index: -2 !important;
}

/* 70. مطر الماتركس المطور - نسخة التفاوت العشوائي */
.s-btn-70 {
    background: #000 !important;
    color: #00ff41 !important;
    border: 1px solid #00ff41 !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    font-family: monospace !important;
}

.s-btn-70::before {
    content: '' !important;
    position: absolute !important;
    /* نوسع المساحة لضمان عدم رؤية الحواف أثناء الحركة */
    inset: -100px 0 !important; 
    /* تعديل الـ SVG ليحتوي على 4 أعمدة بارتفاعات متفاوتة (y مختلفة) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext x='5' y='10' fill='rgba(0, 255, 65, 0.7)' font-family='monospace' font-size='10'%3E1%3C/text%3E%3Ctext x='5' y='30' fill='rgba(0, 255, 65, 0.2)' font-family='monospace' font-size='10'%3E0%3C/text%3E%3Ctext x='20' y='50' fill='rgba(0, 255, 65, 0.6)' font-family='monospace' font-size='10'%3E0%3C/text%3E%3Ctext x='20' y='15' fill='rgba(0, 255, 65, 0.1)' font-family='monospace' font-size='10'%3E1%3C/text%3E%3Ctext x='35' y='25' fill='rgba(0, 255, 65, 0.8)' font-family='monospace' font-size='10'%3E1%3C/text%3E%3Ctext x='35' y='45' fill='rgba(0, 255, 65, 0.3)' font-family='monospace' font-size='10'%3E0%3C/text%3E%3Ctext x='50' y='5' fill='rgba(0, 255, 65, 0.5)' font-family='monospace' font-size='10'%3E0%3C/text%3E%3Ctext x='50' y='35' fill='rgba(0, 255, 65, 0.1)' font-family='monospace' font-size='10'%3E1%3C/text%3E%3C/svg%3E") !important;
    /* حجم التكرار يجب أن يتوافق مع أبعاد الـ SVG أعلاه (60px) */
    background-size: 50px 50px !important; 
    animation: matrixScrollRandom 2s linear infinite !important;
    z-index: -2 !important;
}

/* حركة السقوط المتوافقة مع الحجم الجديد */
@keyframes matrixScrollRandom {
    0% { transform: translateY(0); }
    100% { transform: translateY(50px); }
}

/* طبقة التلاشي لتعميق التأثير */
.s-btn-70::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, 
        rgba(0,0,0,1) 0%, 
        transparent 30%, 
        transparent 70%, 
        rgba(0,0,0,1) 100%) !important;
    z-index: -1 !important;
    pointer-events: none;
}

.s-btn-70 .ubm-text-inner {
    position: relative !important;
    z-index: 2 !important;
    text-shadow: 0 0 5px #000, 0 0 10px #000 !important;
    font-weight: bold !important;
} 
/* 71. الظل الطافي (Floating Shadow) */
.s-btn-71 {
    background: #fff !important; color: #6366f1 !important; border: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    transform: perspective(1px) translateZ(0);
}
.s-btn-71:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 25px rgba(99,102,241,0.2) !important;
}
/* 72. الفقاعة المضيئة (Neon Jelly) - تنبض وتتوهج */
.s-btn-72 {
    background: #ff007f !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% 20% 50% 20% / 20% 50% 20% 50% !important;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.5) !important;
    animation: jellyMorph 4s linear infinite !important;
}

/* 73. قطرة الماء (Water Drop) - شفافة وانسيابية */
.s-btn-73 {
    background: rgba(0, 150, 255, 0.2) !important;
    color: #0077ff !important;
    border: 2px solid #0077ff !important;
    border-radius: 30% 70% 70% 30% / 30% 35% 65% 70% !important;
    backdrop-filter: blur(5px) !important;
    animation: waterFlow 5s ease-in-out infinite !important;
}

/* 74. الحمم المنصهرة (Magma Blob) - تتمدد ببطء */
.s-btn-74 {
    background: linear-gradient(45deg, #ff4500, #ff8c00) !important;
    color: #fff !important;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% !important;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.2) !important;
    animation: magmaWave 6s ease-in-out infinite !important;
}

/* 75. الغيمة الناعمة (Soft Cloud) - مرتدة جداً */
/* 75. الغيمة الملكية المطورة */
.s-btn-75 {
    background: linear-gradient(135deg, #0aa53e 0%, #038c43 100%) !important;
    color: #1e293b !important;
    border: 2px solid #b1eb00 !important;
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70% !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), inset 0 -5px 10px rgba(255,255,255,0.8) !important;
    animation: cloudBounce 4s ease-in-out infinite !important;
}

/* 76. الخلية الحيوية النشطة (إصلاح القص والحركة) */
.s-btn-76 {
    background: #10b981 !important;
    color: #fff !important;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% !important;
    position: relative !important;
    overflow: hidden !important;
    /* إضافة padding لضمان عدم ملامسة الشكل للحواف */
    margin: 5px !important; 
    animation: cellPulseEnhanced 4s ease-in-out infinite !important;
}

@keyframes cellPulseEnhanced {
    0%, 100% { 
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: scale(1);
    }
    50% { 
        border-radius: 60% 40% 30% 70% / 50% 40% 50% 60%;
        transform: scale(0.95); /* ينكمش للداخل بدلاً من الخروج لكي لا يُقص */
    }
}

/* 77. بقعة الحبر المتوهجة (للخلفيات الداكنة والفاتحة) */
.s-btn-77 {
    background: #0f172a !important;
    color: #38bdf8 !important; /* لون سماوي ساطع */
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    border-radius: 20% 80% 20% 80% / 80% 20% 80% 20% !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.3) !important;
    animation: inkSplatter 4s ease-in-out infinite !important; /* إزالة الـ steps لحركة أنعم */
}

/* 78. الجوهرة السائلة (Liquid Gem) - تدرج لوني متغير الشكل */
.s-btn-78 {
    background: linear-gradient(135deg, #6366f1, #a855f7) !important;
    color: #fff !important;
    border-radius: 50% !important;
    animation: gemMorph 5s alternate infinite !important;
}

/* 79. السديم المتأرجح (منع الدوران الكامل) */
.s-btn-79 {
    background: #000 !important;
    color: #0ff !important;
    border: 1px solid #0ff !important;
    border-radius: 45% 55% 35% 65% / 55% 45% 55% 45% !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4), inset 0 0 10px rgba(0, 255, 255, 0.2) !important;
    animation: nebulaSwing 6s ease-in-out infinite !important;
}

@keyframes nebulaSwing {
    0%, 100% { 
        transform: rotate(-5deg) scale(1); 
        border-radius: 45% 55% 35% 65%; 
    }
    50% { 
        transform: rotate(5deg) scale(1.05); 
        border-radius: 65% 35% 55% 45%; 
    }
}

/* --- الحركات الخاصة بالأزرار الهلامية (72-79) --- */

@keyframes jellyMorph {
    0%, 100% { border-radius: 50% 20% 50% 20% / 20% 50% 20% 50%; transform: scale(1); }
    50% { border-radius: 20% 50% 20% 50% / 50% 20% 50% 20%; transform: scale(1.05); }
}

@keyframes waterFlow {
    0%, 100% { border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%; }
    50% { border-radius: 70% 30% 30% 70% / 70% 65% 35% 30%; }
}

@keyframes magmaWave {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); }
    50% { border-radius: 40% 60% 70% 30% / 30% 60% 40% 70%; transform: rotate(5deg); }
}

@keyframes cloudBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.1, 0.9); }
}

@keyframes cellPulse {
    0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    50% { border-radius: 60% 40% 30% 70% / 50% 40% 50% 60%; }
}

@keyframes inkSplatter {
    0%, 100% { border-radius: 20% 80% 20% 80% / 80% 20% 80% 20%; }
    50% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}

@keyframes gemMorph {
    0% { border-radius: 50%; }
    100% { border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%; }
}

@keyframes nebulaTwist {
    0% { transform: rotate(0deg) scale(1); border-radius: 45% 55% 35% 65%; }
    50% { transform: rotate(180deg) scale(0.9); border-radius: 65% 35% 55% 45%; }
    100% { transform: rotate(360deg) scale(1); border-radius: 45% 55% 35% 65%; }
}


/* ********************************************************الداش بورد الداش بورد *****************************************************************