Update app.py

app.py

@@ -265,7 +265,118 @@ async (image) => {
 }
 """
 
-# --- CSS به‌روزرسانی شده (شامل استایل‌های جدید راهنمای IP) ---
+# --- جاوااسکریپت سراسری ---
+js_global_content = """
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    // 1. Force Light Mode
+    const forceLight = () => {
+        const body = document.querySelector('body');
+        if (body) {
+            body.classList.remove('dark');
+            body.style.backgroundColor = '#f5f7fa';
+            body.style.color = '#333333';
+        }
+        document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark'));
+    };
+    forceLight();
+    setInterval(forceLight, 1000);
+
+    // 2. NEW GPU Quota Replacer (Complex UI)
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.addedNodes.length) {
+                mutation.addedNodes.forEach((node) => {
+                    // Check for Gradio error toast
+                    if (node.nodeType === 1 && (node.classList.contains('toast-body') || node.classList.contains('error'))) {
+                        const originalText = node.innerText;
+                        
+                        // Check for Quota Exceeded pattern
+                        const regex = /(\d+)s requested vs. (\d+)s left/;
+                        const match = originalText.match(regex);
+                        
+                        if (match && !node.dataset.translated) {
+                            
+                            // HTML Template for the IP Reset Guide
+                            const prettyHtml = `
+                                <div class="ip-reset-guide-container">
+                                    <div class="guide-header">
+                                        <svg class="guide-header-icon" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
+                                            <defs><lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color: #667eea; stop-opacity: 1;"></stop><stop offset="100%" style="stop-color: #764ba2; stop-opacity: 1;"></stop></lineargradient></defs> 
+                                            <circle cx="50" cy="50" r="45" fill="url(#grad1)" opacity="0.1"></circle>
+                                            <circle cx="50" cy="50" r="35" fill="none" stroke="url(#grad1)" stroke-width="2" opacity="0.3"></circle>
+                                            <path d="M35 50 L45 60 L65 40" stroke="url(#grad1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
+                                            <circle cx="65" cy="35" r="8" fill="#fee140"></circle>
+                                            <path d="M62 35 L68 35 M65 32 L65 38" stroke="white" stroke-width="2" stroke-linecap="round"></path> 
+                                        </svg>
+                                        <div>
+                                            <h2>یک قدم تا ساخت تصاویر جدید</h2>
+                                            <p>نیازمند تغییر نقطه دستیابی</p>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="guide-content">
+                                        <div class="info-card">
+                                            <div class="info-card-header">
+                                                <svg class="info-card-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="#667eea" opacity="0.2"></path><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
+                                                <span class="info-card-title">راه حل سریع</span>
+                                            </div>
+                                            <p>طبق ویدیو آموزشی پایین بین نقطه دستیابی جابجا شوید تلاش مجدد بزنید تا تصاویر مجدداً تولید بشه.</p>
+                                        </div>
+                                        
+                                        <div class="summary-section">
+                                            <div class="summary-header">
+                                                <svg class="summary-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="#56ab2f" opacity="0.2"></circle><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" stroke="#56ab2f" stroke-width="2"></path><path d="M9 12l2 2 4-4" stroke="#56ab2f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
+                                                <span class="summary-title">خلاصه راهنما</span>
+                                            </div>
+                                            <div class="summary-text">هربار که این صفحه را مشاهده کردید: از اینترنت سیم‌کارت استفاده کنید، VPN را خاموش کرده و طبق ویدیو آموزشی پایین نقطه دستیابی رو تغییر دهید. «تلاش مجدد» کلیک کنید. با این روش ساده می‌توانید به صورت نامحدود تصویر بسازید! ☘️</div>
+                                        </div>
+                                        
+                                        <div class="video-button-container">
+                                            <button onclick="parent.postMessage({ type: 'NAVIGATE_TO_URL', url: '#/nav/online/news/getSingle/1149635/eyJpdiI6IjhHVGhPQWJwb3E0cjRXbnFWTW5BaUE9PSIsInZhbHVlIjoiS1V0dTdvT21wbXAwSXZaK1RCTG1pVXZqdlFJa1hXV1RKa2FLem9zU3pXMjd5MmlVOGc2YWY0NVdNR3h3Smp1aSIsIm1hYyI6IjY1NTA5ZDYzMjAzMTJhMGQyMWQ4NjA4ZDgyNGZjZDVlY2MyNjdiMjA2NWYzOWRjY2M4ZmVjYWRlMWNlMWQ3ODEiLCJ0YWciOiIifQ==/21135210' }, '*')" class="elegant-video-button"> 
+                                                <svg class="elegant-video-button-icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg> 
+                                                <span>دیدن ویدیو آموزشی استفاده نامحدود</span> 
+                                            </button>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="guide-actions">
+                                        <button class="action-button back-button" onclick="this.closest('.toast-wrap').remove()"> 
+                                            <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
+                                            <span>بازگشت</span> 
+                                        </button>
+                                        <button class="action-button retry-button" onclick="
+                                            const runBtn = document.getElementById('run-btn');
+                                            if(runBtn) runBtn.click();
+                                            this.closest('.toast-wrap').remove();
+                                        "> 
+                                            <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 4v6h-6M1 20v-6h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
+                                            <span>تلاش مجدد</span> 
+                                        </button>
+                                    </div>
+                                </div>
+                            `;
+                            
+                            // Set content
+                            node.innerHTML = prettyHtml;
+                            node.dataset.translated = 'true';
+                            
+                            // Style adjustment for the container to fit nicely
+                            node.style.padding = '0';
+                            node.style.backgroundColor = 'transparent';
+                        }
+                    }
+                });
+            }
+        });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+});
+</script>
+"""
+
+# --- CSS Updated ---
 css_code = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
@@ -280,8 +391,11 @@ css_code = """
     --block-label-text-color: #374151 !important;
     --block-title-text-color: #111827 !important;
     --input-background-fill: #ffffff !important;
-    
-    /* متغیرهای جدید برای راهنمای IP */
+    color-scheme: light !important;
+}
+
+/* --- IP Reset Guide CSS Variables & Styles --- */
+:root {
     --guide-bg: rgba(255, 255, 255, 0.98);
     --guide-border: rgba(102, 126, 234, 0.2);
     --guide-text-title: #2d3748;
@@ -291,21 +405,11 @@ css_code = """
     --success-gradient-guide: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
     --radius-md-guide: 12px;
     --radius-lg-guide: 20px;
-    --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
     --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
-    --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05);
-    
-    color-scheme: light !important;
-}
-
-body {
-    font-family: 'Vazirmatn', sans-serif !important;
-    background-color: #f5f7fa !important;
-    margin: 0;
-    padding: 10px;
+    --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
+    --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
 }
 
-/* انیمیشن‌های مورد نیاز */
 @keyframes float {
     0%, 100% { transform: translateY(0px); }
     50% { transform: translateY(-10px); }
@@ -315,196 +419,226 @@ body {
     to { opacity: 1; transform: translateY(0); }
 }
 
-/* استایل‌های اصلی کانتینر راهنمای IP */
 .ip-reset-guide-container {
     text-align: right; 
     background: var(--guide-bg); 
     backdrop-filter: blur(10px);
-    padding: 40px; 
+    padding: 25px; /* Reduced padding for toast */
     border-radius: var(--radius-lg-guide);
     box-shadow: var(--shadow-xl); 
     border: 1px solid var(--guide-border); 
     animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
     width: 100%; 
+    max-width: 450px; /* Constrain width inside toast */
     position: relative; 
     overflow: hidden; 
     box-sizing: border-box;
     font-family: 'Vazirmatn', sans-serif !important;
+    direction: rtl;
 }
 .ip-reset-guide-container::before {
-    content: ''; 
-    position: absolute; 
-    top: 0; left: 0; right: 0; 
-    height: 5px; 
-    background: var(--primary-gradient-guide);
+    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--primary-gradient-guide);
 }
-.guide-header { display: flex; align-items: center; margin-bottom: 30px; direction: rtl; }
-.guide-header-icon { width: 60px; height: 60px; margin-left: 20px; animation: float 3s ease-in-out infinite; }
-.guide-header h2 { font-size: 1.5rem; color: var(--guide-text-title); font-weight: 700; margin: 0; }
+.guide-header { display: flex; align-items: center; margin-bottom: 20px; }
+.guide-header-icon { width: 50px; height: 50px; margin-left: 15px; animation: float 3s ease-in-out infinite; flex-shrink: 0; }
+.guide-header h2 { font-size: 1.3rem; color: var(--guide-text-title); font-weight: 700; margin: 0; }
 .guide-header p { color: var(--guide-text-body); font-size: 0.8rem; margin-top: 5px; margin-bottom: 0; }
-.guide-content { font-size: 0.95rem; color: var(--guide-text-body); line-height: 1.8; direction: rtl; }
-.info-card { background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: var(--radius-md-guide); padding: 20px; margin: 20px 0; position: relative; overflow: hidden; }
-.info-card p { font-size: 0.85rem; line-height: 1.7; margin: 0; }
+
+.guide-content { font-size: 0.9rem; color: var(--guide-text-body); line-height: 1.6; }
+
+.info-card { background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: var(--radius-md-guide); padding: 15px; margin: 15px 0; position: relative; overflow: hidden; }
+.info-card p { font-size: 0.85rem; line-height: 1.6; margin: 0; }
 .info-card::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--primary-gradient-guide); }
-.info-card-header { display: flex; align-items: center; margin-bottom: 12px; }
-.info-card-icon { width: 24px; height: 24px; margin-left: 12px; }
-.info-card-title { font-weight: 600; color: var(--guide-text-title); font-size: 1rem; }
-.summary-section { margin-top: 25px; padding: 20px; border-radius: var(--radius-md-guide); background: linear-gradient(135deg, #56ab2f15 0%, #a8e06315 100%); border: 1px solid rgba(86, 171, 47, 0.2); position: relative; overflow: hidden; }
+.info-card-header { display: flex; align-items: center; margin-bottom: 10px; }
+.info-card-icon { width: 20px; height: 20px; margin-left: 10px; }
+.info-card-title { font-weight: 600; color: var(--guide-text-title); font-size: 0.95rem; }
+
+.summary-section { margin-top: 15px; padding: 15px; border-radius: var(--radius-md-guide); background: linear-gradient(135deg, #56ab2f15 0%, #a8e06315 100%); border: 1px solid rgba(86, 171, 47, 0.2); position: relative; overflow: hidden; }
 .summary-section::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--success-gradient-guide); }
-.summary-header { display: flex; align-items: center; margin-bottom: 10px; }
-.summary-icon { width: 24px; height: 24px; margin-left: 10px; }
-.summary-title { font-weight: 600; color: #2f5a33; font-size: 1rem; }
-.summary-text { color: #2f5a33; font-size: 0.9rem; line-height: 1.7; }
-.video-button-container { text-align: center; margin: 25px 0 10px 0; }
-.elegant-video-button { display: inline-flex; align-items: center; justify-content: center; padding: 7px 18px; background-color: #f0f2f5; color: var(--guide-accent); border: 1px solid #e2e8f0; text-decoration: none; border-radius: var(--radius-md-guide); font-weight: 600; font-size: 0.8rem; cursor: pointer; font-family: inherit; transition: all 0.3s ease; box-shadow: var(--shadow-sm); }
+.summary-header { display: flex; align-items: center; margin-bottom: 8px; }
+.summary-icon { width: 20px; height: 20px; margin-left: 10px; }
+.summary-title { font-weight: 600; color: #2f5a33; font-size: 0.95rem; }
+.summary-text { color: #2f5a33; font-size: 0.85rem; line-height: 1.6; }
+
+.video-button-container { text-align: center; margin: 20px 0 10px 0; }
+.elegant-video-button { display: inline-flex; align-items: center; justify-content: center; padding: 7px 15px; background-color: #f0f2f5; color: var(--guide-accent); border: 1px solid #e2e8f0; text-decoration: none; border-radius: var(--radius-md-guide); font-weight: 600; font-size: 0.8rem; cursor: pointer; font-family: inherit; transition: all 0.3s ease; box-shadow: var(--shadow-sm); }
 .elegant-video-button:hover { background: var(--primary-gradient-guide); color: white; border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3); }
 .elegant-video-button-icon { width: 16px; height: 16px; margin-left: 8px; fill: currentColor; }
-.guide-actions { display: flex; gap: 15px; margin-top: 30px; padding-top: 25px; border-top: 1px solid #e2e8f0; direction: rtl; }
-.action-button { padding: 14px 24px; border: none; border-radius: var(--radius-md-guide); font-size: 0.95rem; font-weight: 600; cursor: pointer; flex: 1; transition: var(--transition-smooth); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: inherit; }
-.action-button-icon { width: 20px; height: 20px; margin-right: 0; margin-left: 8px; }
+
+.guide-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
+.action-button { padding: 10px 15px; border: none; border-radius: var(--radius-md-guide); font-size: 0.9rem; font-weight: 600; cursor: pointer; flex: 1; transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: inherit; }
+.action-button-icon { width: 18px; height: 18px; margin-right: 0; margin-left: 8px; }
 .back-button { background: white; color: var(--guide-text-body); border: 2px solid #e2e8f0; flex: 0.4; }
 .back-button:hover { background: #f7fafc; border-color: var(--guide-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
 .retry-button { background: var(--primary-gradient-guide); color: white; flex: 0.6; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); }
 .retry-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); }
 
-/* --- استایل‌های قبلی --- */
-#col-container { margin: 0 auto; max-width: 980px; direction: rtl; text-align: right; padding: 30px; background: #ffffff !important; border-radius: 24px; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.8); }
-#main-title h1 { font-size: 2.4em !important; text-align: center; color: #1a202c !important; margin-bottom: 15px; font-weight: 800; background: -webkit-linear-gradient(45deg, #2563eb, #1e40af); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-#main-description { text-align: center; font-size: 1.15em; color: #4b5563 !important; margin-bottom: 40px; line-height: 1.6; }
-.gr-input-label, span.label-wrap, label span { font-weight: 700 !important; color: #374151 !important; font-size: 0.95em !important; margin-bottom: 8px !important; }
-textarea, input[type="text"] { border: 2px solid #e2e8f0 !important; border-radius: 12px !important; background-color: #ffffff !important; color: #111827 !important; padding: 12px !important; transition: all 0.3s ease; font-family: 'Vazirmatn', sans-serif !important; }
-textarea:focus, input[type="text"]:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important; outline: none; }
-.gr-dropdown { background: #ffffff !important; border-radius: 12px !important; }
-.primary-btn, button.primary { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; border: none !important; color: white !important; font-weight: 700 !important; font-size: 1.1em !important; padding: 14px 28px !important; border-radius: 14px !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; width: 100%; margin-top: 15px; }
-.primary-btn:hover, button.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important; }
-#download-btn { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important; }
-#download-btn:hover { box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45) !important; }
-.toast-body { direction: rtl !important; text-align: right !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important;}
-.toast-wrap { border: none !important; background: transparent !important; box-shadow: none !important; }
+/* --- Main App CSS --- */
+body {
+    font-family: 'Vazirmatn', sans-serif !important;
+    background-color: #f5f7fa !important;
+    margin: 0;
+    padding: 10px;
+}
 
-@media (prefers-color-scheme: dark) {
-    body, .gradio-container, .prose, table, tr, td, th { background-color: #ffffff !important; color: #333333 !important; }
+#col-container {
+    margin: 0 auto;
+    max-width: 980px;
+    direction: rtl;
+    text-align: right;
+    padding: 30px;
+    background: #ffffff !important;
+    border-radius: 24px;
+    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); 
+    border: 1px solid rgba(255,255,255,0.8);
 }
-</style>
-"""
 
-# --- جاوااسکریپت سراسری (تزریق پیام خطای جدید پیشرفته) ---
-js_global_content = """
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-    // 1. Force Light Mode
-    const forceLight = () => {
-        const body = document.querySelector('body');
-        if (body) {
-            body.classList.remove('dark');
-            body.style.backgroundColor = '#f5f7fa';
-            body.style.color = '#333333';
-        }
-        document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark'));
-    };
-    forceLight();
-    setInterval(forceLight, 1000);
+#main-title h1 {
+    font-size: 2.4em !important;
+    text-align: center;
+    color: #1a202c !important;
+    margin-bottom: 15px;
+    font-weight: 800;
+    background: -webkit-linear-gradient(45deg, #2563eb, #1e40af);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
 
-    // 2. NEW ADVANCED GPU Quota Replacer
-    const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-            if (mutation.addedNodes.length) {
-                mutation.addedNodes.forEach((node) => {
-                    // Check for Gradio error toasts
-                    if (node.nodeType === 1) {
-                         // Look for the toast container or body
-                        let targetNode = node.classList.contains('toast-body') ? node : node.querySelector('.toast-body');
-                        
-                        // Also check simple class structure in case Gradio updates
-                        if (!targetNode && (node.classList.contains('toast') || node.classList.contains('error'))) {
-                            targetNode = node;
-                        }
+#main-description {
+    text-align: center;
+    font-size: 1.15em;
+    color: #4b5563 !important;
+    margin-bottom: 40px;
+    line-height: 1.6;
+}
 
-                        if (targetNode) {
-                            const textContent = targetNode.innerText || "";
-                            
-                            // If it's a Quota error
-                            if (textContent.includes("exceeded your GPU quota") || textContent.includes("Quota Exceeded")) {
-                                
-                                // The exact HTML structure requested by the user
-                                const newHtml = `
-                                    <div class="ip-reset-guide-container">
-                                        <div class="guide-header">
-                                            <svg class="guide-header-icon" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
-                                                <defs><lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color: #667eea; stop-opacity: 1;"></stop><stop offset="100%" style="stop-color: #764ba2; stop-opacity: 1;"></stop></lineargradient></defs> 
-                                                <circle cx="50" cy="50" r="45" fill="url(#grad1)" opacity="0.1"></circle>
-                                                <circle cx="50" cy="50" r="35" fill="none" stroke="url(#grad1)" stroke-width="2" opacity="0.3"></circle>
-                                                <path d="M35 50 L45 60 L65 40" stroke="url(#grad1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
-                                                <circle cx="65" cy="35" r="8" fill="#fee140"></circle>
-                                                <path d="M62 35 L68 35 M65 32 L65 38" stroke="white" stroke-width="2" stroke-linecap="round"></path> 
-                                            </svg>
-                                            <div>
-                                                <h2>یک قدم تا ساخت تصاویر جدید</h2>
-                                                <p>نیازمند تغییر نقطه دستیابی</p>
-                                            </div>
-                                        </div>
-                                        <div class="guide-content">
-                                            <div class="info-card">
-                                                <div class="info-card-header">
-                                                    <svg class="info-card-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="#667eea" opacity="0.2"></path><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
-                                                    <span class="info-card-title">راه حل سریع</span>
-                                                </div>
-                                                <p>طبق ویدیو آموزشی پایین بین نقطه دستیابی جابجا شوید تلاش مجدد بزنید تا تصاویر مجدداً تولید بشه.</p>
-                                            </div>
-                                            <div class="summary-section">
-                                                <div class="summary-header">
-                                                    <svg class="summary-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="#56ab2f" opacity="0.2"></circle><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" stroke="#56ab2f" stroke-width="2"></path><path d="M9 12l2 2 4-4" stroke="#56ab2f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
-                                                    <span class="summary-title">خلاصه راهنما</span>
-                                                </div>
-                                                <div class="summary-text">هربار که این صفحه را مشاهده کردید: از اینترنت سیم‌کارت استفاده کنید، VPN را خاموش کرده و طبق ویدیو آموزشی پایین نقطه دستیابی رو تغییر دهید. «تلاش مجدد» کلیک کنید. با این روش ساده می‌توانید به صورت نامحدود تصویر بسازید! ☘️</div>
-                                            </div>
-                                            <div class="video-button-container">
-                                                <button onclick="window.open('https://www.aparat.com/v/your_video_id_here', '_blank')" class="elegant-video-button"> 
-                                                    <svg class="elegant-video-button-icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg> 
-                                                    <span>دیدن ویدیو آموزشی استفاده نامحدود</span> 
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div class="guide-actions">
-                                            <button class="action-button back-button" onclick="this.closest('.toast-wrap').remove()"> 
-                                                <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
-                                                <span>بازگشت</span> 
-                                            </button>
-                                            <button class="action-button retry-button" onclick="this.closest('.toast-wrap').remove()"> 
-                                                <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 4v6h-6M1 20v-6h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
-                                                <span>تلاش مجدد</span> 
-                                            </button>
-                                        </div>
-                                    </div>
-                                `;
-                                
-                                // Replace content
-                                targetNode.innerHTML = newHtml;
-                                
-                                // Clean up parent styles to allow full-width transparent display
-                                let wrapper = targetNode.closest('.toast-wrap');
-                                if(wrapper) {
-                                    wrapper.style.backgroundColor = 'transparent';
-                                    wrapper.style.boxShadow = 'none';
-                                    wrapper.style.border = 'none';
-                                    wrapper.style.maxWidth = '100%';
-                                    wrapper.style.width = 'auto';
-                                }
-                                targetNode.style.backgroundColor = 'transparent';
-                                targetNode.style.padding = '0';
-                                targetNode.style.boxShadow = 'none';
-                                targetNode.style.border = 'none';
-                            }
-                        }
-                    }
-                });
-            }
-        });
-    });
+.gr-input-label, span.label-wrap, label span {
+    font-weight: 700 !important;
+    color: #374151 !important;
+    font-size: 0.95em !important;
+    margin-bottom: 8px !important;
+}
 
-    observer.observe(document.body, { childList: true, subtree: true });
-});
-</script>
+textarea, input[type="text"] {
+    border: 2px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    background-color: #ffffff !important;
+    color: #111827 !important;
+    padding: 12px !important;
+    transition: all 0.3s ease;
+    font-family: 'Vazirmatn', sans-serif !important;
+}
+
+textarea:focus, input[type="text"]:focus {
+    border-color: #3b82f6 !important;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
+    outline: none;
+}
+
+.gr-dropdown {
+    background: #ffffff !important;
+    border-radius: 12px !important;
+}
+
+.primary-btn, button.primary {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 700 !important;
+    font-size: 1.1em !important;
+    padding: 14px 28px !important;
+    border-radius: 14px !important;
+    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    cursor: pointer !important;
+    width: 100%;
+    margin-top: 15px;
+}
+
+.primary-btn:hover, button.primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
+}
+
+.primary-btn:active, button.primary:active {
+    transform: translateY(1px);
+}
+
+#download-btn {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
+}
+#download-btn:hover {
+    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45) !important;
+}
+
+.gradio-container .prose table, 
+.gradio-container table {
+    background-color: #ffffff !important;
+    color: #111827 !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 12px !important;
+    overflow: hidden !important;
+    width: 100% !important;
+    margin-top: 20px !important;
+}
+
+.gradio-container thead th {
+    background-color: #f3f4f6 !important;
+    color: #374151 !important;
+    font-weight: 700 !important;
+    border-bottom: 2px solid #e5e7eb !important;
+    padding: 12px !important;
+    text-align: right !important;
+}
+
+.gradio-container tbody tr {
+    background-color: #ffffff !important;
+    border-bottom: 1px solid #f3f4f6 !important;
+}
+
+.gradio-container tbody tr:hover {
+    background-color: #f9fafb !important;
+}
+
+.gradio-container tbody td {
+    background-color: #ffffff !important;
+    color: #374151 !important;
+    padding: 10px !important;
+}
+
+.gradio-container tbody td span, 
+.gradio-container tbody td p {
+    color: #374151 !important;
+}
+
+footer { display: none !important; }
+.flagging { display: none !important; }
+
+/* General Toast Override */
+.toast-body {
+    direction: rtl !important;
+    text-align: right !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    border: none !important;
+    padding: 0 !important;
+    max-width: 100% !important;
+    width: auto !important;
+}
+.toast-wrap {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    body, .gradio-container, .prose, table, tr, td, th {
+        background-color: #ffffff !important;
+        color: #333333 !important;
+    }
+}
+</style>
 """
 
 # ادغام CSS و JS
@@ -536,7 +670,8 @@ with gr.Blocks() as demo:
                 
                 status_box = gr.HTML(label="وضعیت")
                 
-                run_button = gr.Button("✨ شروع پردازش و ساخت تصویر", variant="primary", elem_classes="primary-btn")
+                # IMPORTANT: Added elem_id="run-btn" here for JS targeting
+                run_button = gr.Button("✨ شروع پردازش و ساخت تصویر", variant="primary", elem_classes="primary-btn", elem_id="run-btn")
 
             with gr.Column():
                 output_image = gr.Image(label="تصویر نهایی", interactive=False, format="png", height=380)