Update index.html

index.html

@@ -19,20 +19,14 @@
         .new-proj-btn { background: #333; color: #ccc; border: 1px solid #444; padding: 8px 15px; border-radius: 12px; font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; font-family: inherit; }
         .new-proj-btn:hover { background: #444; color: #fff; border-color: #666; }
 
-        /* --- مدال تایید خروج --- */
+        /* --- مدال --- */
         .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 3000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
         .modal-overlay.show { opacity: 1; }
         .modal-box { background: #222; border: 1px solid #444; width: 90%; max-width: 350px; border-radius: 20px; padding: 25px; text-align: center; transform: scale(0.8); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
         .modal-overlay.show .modal-box { transform: scale(1); }
-        .modal-icon { font-size: 3rem; color: var(--primary); margin-bottom: 15px; }
         .modal-title { font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; color: #fff; }
-        .modal-desc { font-size: 0.9rem; color: #aaa; margin-bottom: 25px; line-height: 1.5; }
-        .modal-actions { display: flex; gap: 10px; justify-content: center; }
         .modal-btn { flex: 1; padding: 12px; border-radius: 12px; border: none; font-family: inherit; font-weight: bold; cursor: pointer; transition: 0.2s; }
         .btn-confirm { background: var(--primary); color: #fff; }
-        .btn-confirm:active { transform: scale(0.95); }
-        .btn-cancel { background: #333; color: #fff; }
-        .btn-cancel:hover { background: #444; }
 
         /* --- فضای ویدیو --- */
         #workspace { width: 100%; display: flex; justify-content: center; background: #000; padding: 20px 0; min-height: 300px; flex-shrink: 0; }
@@ -41,38 +35,20 @@
         video { width: 100%; height: 100%; object-fit: contain; display: block; }
         #playOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.2); z-index: 10; transition: opacity 0.2s; }
         #playOverlay.playing { opacity: 0; pointer-events: none; }
-        #playOverlay i { font-size: 4rem; color: rgba(255,255,255,0.8); filter: drop-shadow(0 0 5px rgba(0,0,0,0.8)); pointer-events: none; }
-        #subtitleLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; justify-content: center; z-index: 20; }
+        #playOverlay i { font-size: 4rem; color: rgba(255,255,255,0.8); pointer-events: none; }
         
         #activeText { 
-            position: absolute; 
-            white-space: pre; 
-            pointer-events: auto; 
-            cursor: move; 
-            padding: 10px 20px; 
-            line-height: 1.5; 
-            font-weight: bold; 
+            position: absolute; white-space: pre; pointer-events: auto; cursor: move; 
+            padding: 10px 20px; line-height: 1.5; font-weight: bold; 
             transition: background-color 0.2s, text-shadow 0.2s, -webkit-text-stroke 0.2s, border-radius 0.2s; 
-            transform-origin: center center; 
-            text-align: center; 
-            left: 50%; 
-            transform: translateX(-50%);
+            transform-origin: center center; text-align: center; left: 50%; transform: translateX(-50%);
             paint-order: stroke fill; 
         }
         
-        /* --- دکمه هوشمند (Magic Button) --- */
-        .magic-bar { padding: 15px 20px 5px 20px; background: var(--bg); display: flex; justify-content: center; position: sticky; top: 60px; z-index: 95; }
-        .btn-ai-magic { background: linear-gradient(90deg, #FF0080 0%, #7928CA 50%, #FF0080 100%); background-size: 200% auto; color: white; border: none; width: 100%; max-width: 600px; padding: 12px 20px; border-radius: 16px; font-weight: 900; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; box-shadow: 0 4px 20px rgba(121, 40, 202, 0.5); transition: all 0.3s; animation: gradientMove 3s linear infinite; font-family: 'Vazirmatn', sans-serif; }
-        .btn-ai-magic:active { transform: scale(0.98); }
-        @keyframes gradientMove { to { background-position: 200% center; } }
-
         /* --- نوار ابزار --- */
         .controls-bar { display: flex; justify-content: center; gap: 10px; padding: 10px 10px; background: var(--bg); border-bottom: 1px solid #222; position: sticky; top: 115px; z-index: 90; flex-wrap: wrap; }
         .tool-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--surface); border: 1px solid #333; color: #aaa; cursor: pointer; transition: 0.2s; padding: 8px 10px; border-radius: 12px; min-width: 70px; flex: 1; max-width: 100px; }
-        .tool-btn i { font-size: 1.2rem; margin-bottom: 2px; }
-        .tool-btn span { font-size: 0.75rem; font-weight: bold; }
-        .tool-btn:hover { color: #fff; background: #2a2a2a; }
-        .tool-btn.active-tool { color: #fff; background: var(--primary); border-color: var(--primary); }
+        .tool-btn:hover, .tool-btn.active-tool { color: #fff; background: var(--primary); border-color: var(--primary); }
 
         #toolsContainer { width: 100%; background: var(--panel-bg); overflow: hidden; min-height: 0; transition: none; border-bottom: 1px solid #333; }
         .tool-section { display: none; padding: 20px; animation: fadeIn 0.3s ease; max-width: 800px; margin: 0 auto; }
@@ -80,66 +56,42 @@
         @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
 
         .btn-exp { background: var(--primary); color: #fff; border: none; padding: 10px 25px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; font-family: inherit; }
-        .btn-magic-action { background: linear-gradient(135deg, #FF4081, #7C4DFF); width: 100%; border: none; padding: 12px; border-radius: 12px; color: white; font-weight: bold; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
         
         .btn-save-manual {
             width: 100%; background: #00C853; color: white; border: none;
             padding: 12px; border-radius: 10px; font-weight: bold; font-family: inherit;
             margin-top: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
         }
-        .btn-save-manual:hover { background: #00E676; }
 
         .row { margin-bottom: 20px; }
         label { display: block; margin-bottom: 8px; color: #ccc; font-size: 0.9rem; }
         input[type=range] { width: 100%; accent-color: var(--primary); height: 6px; cursor: pointer; border-radius:3px; }
-        textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; padding: 15px; border-radius: 12px; font-family: inherit; font-size: 1rem; margin-bottom: 15px; resize: vertical; min-height: 80px; }
         
         .style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; }
         .style-card { background: #333; border: 2px solid transparent; border-radius: 10px; padding: 15px; cursor: pointer; display: flex; flex-direction:column; align-items: center; gap: 8px; justify-content: center; min-height: 110px; position: relative; transition: 0.2s; }
-        .style-card.selected { border-color: var(--primary); background: #2a2a2a; box-shadow: 0 0 15px rgba(124, 77, 255, 0.3); }
-        .style-card:hover { transform: translateY(-2px); }
+        .style-card.selected { border-color: var(--primary); background: #2a2a2a; }
 
         .delete-style-btn {
             position: absolute; top: 5px; left: 5px;
             background: rgba(255, 50, 50, 0.2); color: #ff5555;
             border: none; border-radius: 5px; width: 25px; height: 25px;
-            display: flex; align-items: center; justify-content: center;
-            cursor: pointer; transition: 0.2s; z-index: 5;
+            display: flex; align-items: center; justify-content: center; cursor: pointer;
         }
-        .delete-style-btn:hover { background: #ff4444; color: white; }
-
-        .preview-box { font-size: 1.2rem; margin-bottom: 5px; padding: 5px 10px; border-radius: 6px; }
 
         .mode-btn { flex: 1; padding: 12px; border-radius: 8px; background: #333; color: #aaa; border: 2px solid transparent; cursor: pointer; }
         .mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
         
-        .font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
         .font-btn { padding: 15px; background: #333; border-radius: 8px; cursor: pointer; border: 2px solid transparent; position: relative; }
         .font-btn.ticked { border-color: var(--primary); }
-        .font-btn.ticked::after { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 10px; left: 10px; color: var(--primary); }
 
         /* --- لیست زیرنویس --- */
-        #subtitleListArea { width: 100%; }
-        .sub-card { background: #222; border-right: 4px solid #444; border-radius: 8px; margin-bottom: 10px; padding: 15px; display: flex; flex-direction: column; gap: 10px; transition: 0.2s; cursor: pointer; position: relative; overflow: hidden; }
-        .sub-card-header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
-        .sub-card.active { background: #2b2535; border-right-color: var(--primary); box-shadow: 0 4px 15px rgba(0,0,0,0.3); transform: scale(1.01); }
-        
-        .sub-time { font-size: 0.75rem; color: #666; margin-left: 10px; min-width: 50px; text-align: left; font-family: monospace; }
-        .sub-text-content { flex: 1; font-size: 1rem; color: #ddd; line-height: 1.6; }
+        .sub-card { background: #222; border-right: 4px solid #444; border-radius: 8px; margin-bottom: 10px; padding: 15px; display: flex; flex-direction: column; gap: 10px; transition: 0.2s; cursor: pointer; }
+        .sub-card.active { background: #2b2535; border-right-color: var(--primary); }
+        .sub-time { font-size: 0.75rem; color: #666; font-family: monospace; }
+        .sub-text-content { font-size: 1rem; color: #ddd; }
         .sub-card.active .sub-text-content { color: #fff; font-weight: bold; }
-        
-        .card-actions { display: flex; gap: 8px; opacity: 0.8; transition: 0.2s; }
-        .mini-btn { width: 36px; height: 36px; border-radius: 10px; border: none; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; font-size: 0.9rem; }
-        .mini-btn:hover { background: var(--primary); transform: scale(1.1); }
-        .mini-btn.play-btn { background: rgba(0, 200, 83, 0.2); color: #00E676; }
-        .mini-btn.play-btn:hover { background: #00C853; color: white; }
-
-        .inline-editor-container { width: 100%; display: flex; flex-direction: column; gap: 8px; animation: fadeIn 0.2s; margin-top: 5px; cursor: default; }
-        .inline-textarea { width: 100%; background: #111; color: #fff; border: 1px solid var(--primary); padding: 10px; border-radius: 8px; font-family: inherit; font-size: 1rem; resize: vertical; min-height: 80px; }
-        .inline-actions { display: flex; gap: 10px; justify-content: flex-end; }
-        .inline-btn { padding: 5px 15px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.85rem; font-family: inherit; }
-        .btn-save { background: var(--primary); color: #fff; }
-        .btn-cancel { background: #444; color: #ccc; }
+        .mini-btn { width: 36px; height: 36px; border-radius: 10px; border: none; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; margin-left: 5px;}
+        .mini-btn:hover { background: var(--primary); }
 
         #uploadScreen, #loader, #resultScreen { position: fixed; top:0; left:0; width:100%; height:100%; background: var(--bg); z-index: 2000; display: flex; flex-direction: column; justify-content: center; align-items: center; }
         #loader, #resultScreen { display: none; }
@@ -151,25 +103,24 @@
 
 <div id="exitModal" class="modal-overlay">
     <div class="modal-box">
-        <div class="modal-icon"><i class="fa-solid fa-circle-exclamation"></i></div>
         <div class="modal-title">شروع پروژه جدید؟</div>
-        <div class="modal-desc">با شروع پروژه جدید، تمام تغییرات فعلی شما از بین خواهند رفت. آیا مطمئن هستید؟</div>
-        <div class="modal-actions">
-            <button class="modal-btn btn-confirm" onclick="confirmExit()">بله، جدید</button>
-            <button class="modal-btn btn-cancel" onclick="closeExitModal()">انصراف</button>
+        <div style="margin-bottom:20px; color:#aaa;">تغییرات فعلی از بین می‌روند.</div>
+        <div style="display:flex; gap:10px;">
+            <button class="modal-btn btn-confirm" onclick="confirmExit()">بله</button>
+            <button class="modal-btn" style="background:#333; color:#fff;" onclick="closeExitModal()">لغو</button>
         </div>
     </div>
 </div>
 
 <div id="uploadScreen">
-    <h2 style="margin-bottom: 30px; font-size:1.8rem;">استودیو زیرنویس هوشمند</h2>
+    <h2 style="margin-bottom: 30px; font-size:1.8rem;">استودیو زیرنویس</h2>
     <input type="file" id="fileIn" hidden accept="video/*" onchange="startUpload()">
     <button class="btn-exp" style="padding: 15px 40px; font-size: 1.1rem; border-radius: 30px;" onclick="document.getElementById('fileIn').click()">
         <i class="fa-solid fa-folder-open"></i> &nbsp; انتخاب ویدیو
     </button>
 </div>
 
-<div id="loader"><div class="spinner"></div><p style="margin-top:20px; color:#fff; font-size:1.1rem;">در حال پردازش...</p></div>
+<div id="loader"><div class="spinner"></div><p style="margin-top:20px; color:#fff;">در حال پردازش...</p></div>
 
 <div id="resultScreen">
     <h3 style="color:#fff; margin-bottom: 15px;">ویدیو آماده شد!</h3>
@@ -177,16 +128,14 @@
         <video id="resultVideo" controls style="max-width:100%; max-height:100%; width:100%; height:100%;"></video>
     </div>
     <div style="display: flex; gap: 15px;">
-        <a id="downloadBtn" href="#" download class="btn-exp" style="background: #00C853; text-decoration: none; display: flex; align-items: center; gap: 8px;"><i class="fa-solid fa-download"></i> دانلود</a>
-        <button class="btn-exp" style="background: #444;" onclick="closeResult()">ویرایش مجدد</button>
+        <a id="downloadBtn" href="#" download class="btn-exp" style="background: #00C853; text-decoration: none;">دانلود</a>
+        <button class="btn-exp" style="background: #444;" onclick="closeResult()">ویرایش</button>
     </div>
 </div>
 
 <div class="top-bar">
-    <button class="new-proj-btn" onclick="showExitModal()">
-        <i class="fa-solid fa-plus-circle"></i> پروژه جدید
-    </button>
-    <button class="btn-exp" onclick="render()" style="padding: 8px 20px; font-size: 0.9rem;">خروجی نهایی <i class="fa-solid fa-chevron-left"></i></button>
+    <button class="new-proj-btn" onclick="showExitModal()">پروژه جدید</button>
+    <button class="btn-exp" onclick="render()" style="padding: 8px 20px;">خروجی نهایی</button>
 </div>
 
 <div id="workspace">
@@ -194,18 +143,11 @@
         <div id="videoContainer" onclick="togglePlay()">
             <video id="vid" playsinline webkit-playsinline></video>
             <div id="playOverlay"><i class="fa-solid fa-play"></i></div>
-            <div id="subtitleLayer"><div id="activeText" ondblclick="toggleTool('text')"></div></div>
+            <div id="subtitleLayer"><div id="activeText"></div></div>
         </div>
     </div>
 </div>
 
-<div class="magic-bar">
-    <button class="btn-ai-magic" onclick="toggleTool('magic')" id="btn-magic">
-        <i class="fa-solid fa-wand-magic-sparkles"></i>
-        <span>طراحـی هوشمـنـد AI</span>
-    </button>
-</div>
-
 <div class="controls-bar">
     <button class="tool-btn" onclick="toggleTool('style')" id="btn-style"><i class="fa-solid fa-layer-group"></i><span>استایل</span></button>
     <button class="tool-btn" onclick="toggleTool('appearance')" id="btn-appearance"><i class="fa-solid fa-palette"></i><span>ظاهر</span></button>
@@ -214,32 +156,17 @@
 </div>
 
 <div id="toolsContainer">
-    
-    <div id="section-magic" class="tool-section">
-        <label>توصیف کنید چه ظاهری می‌خواهید:</label>
-        <textarea id="magicPrompt" style="min-height: 60px;" placeholder="مثال: تم نئون صورتی با فونت بولد..."></textarea>
-        <button class="btn-magic-action" onclick="generateAIStyle()">
-            <i class="fa-solid fa-sparkles"></i> اعمال طراحی
-        </button>
-    </div>
-
     <div id="section-style" class="tool-section">
-        <div style="margin-bottom: 10px; color: #888; font-size: 0.9rem;">
-            استایل‌های ساخته شده:
-        </div>
-        <div class="style-grid" id="savedStylesGrid">
-            <!-- استایل‌های ذخیره شده اینجا نمایش داده می‌شوند -->
-        </div>
-        <div id="noStylesMsg" style="text-align: center; padding: 30px; color: #666; font-size: 0.9rem;">
-            هنوز استایلی نساخته‌اید.<br>
-            از دکمه <b>طراحی هوشمند AI</b> یا دکمه <b>ذخیره این سبک</b> استفاده کنید.
+        <div style="margin-bottom: 10px; color: #888;">استایل‌های ذخیره شده:</div>
+        <div class="style-grid" id="savedStylesGrid"></div>
+        <div id="noStylesMsg" style="text-align: center; padding: 30px; color: #666;">
+            هنوز استایلی ندارید. از دکمه "ذخیره این سبک" در تب ظاهر استفاده کنید.
         </div>
     </div>
 
     <div id="section-appearance" class="tool-section">
         <div class="row"><label>سایز متن</label><input type="range" id="fz" min="10" max="300" value="65" oninput="upd()"></div>
         <div class="row"><label>موقعیت عمودی</label><input type="range" id="pos" min="0" max="1500" value="150" oninput="upd()"></div>
-        
         <div class="row" id="radiusRow" style="display:none;"><label>گردی کادر (فقط در پیش‌نمایش)</label><input type="range" id="radius" min="0" max="50" value="12" oninput="upd()"></div>
 
         <div style="display:flex; gap:15px; margin-bottom:20px;">
@@ -251,26 +178,20 @@
             <button class="btn-exp mode-btn" onclick="setMode('transparent')">شیشه‌ای</button>
             <button class="btn-exp mode-btn" onclick="setMode('outline')">فقط دورخط</button>
         </div>
-        
-        <!-- دکمه ذخیره دستی استایل -->
-        <button class="btn-save-manual" onclick="saveCurrentStyle()">
-            <i class="fa-solid fa-floppy-disk"></i> ذخیره این سبک
-        </button>
+        <button class="btn-save-manual" onclick="saveCurrentStyle()"><i class="fa-solid fa-floppy-disk"></i> ذخیره این سبک</button>
     </div>
 
     <div id="section-font" class="tool-section">
-        <div class="font-grid">
-            <button class="font-btn ticked" style="font-family:Lalezar; font-size:1.2rem;" onclick="setFont('lalezar', this)">لاله زار</button>
-            <button class="font-btn" style="font-family:Vazirmatn; font-weight:900; font-size:1.1rem;" onclick="setFont('vazir', this)">وزیر ضخیم</button>
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+            <button class="font-btn ticked" style="font-family:Lalezar;" onclick="setFont('lalezar', this)">لاله زار</button>
+            <button class="font-btn" style="font-family:Vazirmatn; font-weight:900;" onclick="setFont('vazir', this)">وزیر ضخیم</button>
             <button class="font-btn" style="font-family:Arial;" onclick="setFont('roboto', this)">ساده (Arial)</button>
             <button class="font-btn" style="font-family:Impact;" onclick="setFont('bangers', this)">بولد (Impact)</button>
         </div>
     </div>
 
     <div id="section-text" class="tool-section">
-        <div id="subtitleListArea">
-            <div id="subCardsContainer"></div>
-        </div>
+        <div id="subCardsContainer"></div>
     </div>
 </div>
 
@@ -279,15 +200,11 @@
         id: null, w: 1080, h: 1920, segs: [],
         st: { f: 'lalezar', fz: 65, col: '#ffffff', bg: '#000000', type: 'solid', y: 150, x: 0, radius: 12, name: 'default' }
     };
-    let curSeg = -1; let manualOverride = false; let editingIndex = -1;
-    let stopAtTime = null; // برای توقف در پایان جمله
+    let curSeg = -1; let manualOverride = false; let stopAtTime = null;
     const v = document.getElementById('vid'); const tEl = document.getElementById('activeText');
     const toolsContainer = document.getElementById('toolsContainer');
 
-    window.onload = function() {
-        renderSavedStyles();
-        fit();
-    };
+    window.onload = function() { renderSavedStyles(); fit(); };
 
     function hexToRgba(hex, alpha) {
         let c = hex.substring(1).split('');
@@ -296,71 +213,36 @@
         return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+alpha+')';
     }
 
-    // --- Local Storage & Styles Logic ---
-    function getSavedStyles() {
-        try { return JSON.parse(localStorage.getItem('aiStyles') || '[]'); } 
-        catch { return []; }
-    }
-
-    function saveStyleToStorage(styleData) {
-        const styles = getSavedStyles();
-        styles.unshift(styleData);
-        localStorage.setItem('aiStyles', JSON.stringify(styles));
-        renderSavedStyles();
-    }
-
-    function deleteStyle(e, id) {
-        e.stopPropagation();
-        if(!confirm('آیا این استایل حذف شود؟')) return;
-        const styles = getSavedStyles().filter(s => s.id !== id);
-        localStorage.setItem('aiStyles', JSON.stringify(styles));
-        renderSavedStyles();
-    }
-
-    // تابع ذخیره دستی استایل
+    function getSavedStyles() { try { return JSON.parse(localStorage.getItem('aiStyles') || '[]'); } catch { return []; } }
+    function saveStyleToStorage(styleData) { const styles = getSavedStyles(); styles.unshift(styleData); localStorage.setItem('aiStyles', JSON.stringify(styles)); renderSavedStyles(); }
+    function deleteStyle(e, id) { e.stopPropagation(); if(confirm('حذف شود؟')) { const styles = getSavedStyles().filter(s => s.id !== id); localStorage.setItem('aiStyles', JSON.stringify(styles)); renderSavedStyles(); } }
+    
     function saveCurrentStyle() {
-        const name = prompt("نام این استایل را وارد کنید:", "استایل شخصی");
+        const name = prompt("نام استایل:", "استایل شخصی");
         if(!name) return;
-        
-        const newStyle = {
-            id: Date.now(),
-            name: name,
-            primaryColor: state.st.col,
-            outlineColor: state.st.bg,
-            backType: state.st.type,
-            font: state.st.f,
-            fontSize: state.st.fz
-        };
-        saveStyleToStorage(newStyle);
-        alert("استایل با موفقیت ذخیره شد.");
-        toggleTool('style'); // رفتن به تب استایل برای دیدن نتیجه
+        saveStyleToStorage({
+            id: Date.now(), name: name,
+            primaryColor: state.st.col, outlineColor: state.st.bg,
+            backType: state.st.type, font: state.st.f, fontSize: state.st.fz
+        });
+        alert("ذخیره شد.");
     }
 
     function applySavedStyle(id) {
-        const styles = getSavedStyles();
-        const found = styles.find(s => s.id === id);
+        const found = getSavedStyles().find(s => s.id === id);
         if(found) {
-            state.st.col = found.primaryColor;
-            state.st.bg = found.outlineColor;
-            state.st.type = found.backType;
-            state.st.f = found.font;
-            state.st.fz = found.fontSize;
-            state.st.name = 'custom_' + id; 
-
+            state.st.col = found.primaryColor; state.st.bg = found.outlineColor;
+            state.st.type = found.backType; state.st.f = found.font; state.st.fz = found.fontSize;
+            state.st.name = 'custom_' + id;
             document.getElementById('col').value = state.st.col;
             document.getElementById('bgCol').value = state.st.bg;
             document.getElementById('fz').value = state.st.fz;
             syncModeButtons();
-            
             document.querySelectorAll('.font-btn').forEach(b => b.classList.remove('ticked'));
             let fIdx = 0;
-            if(state.st.f === 'vazir') fIdx=1;
-            else if(state.st.f === 'roboto') fIdx=2;
-            else if(state.st.f === 'bangers') fIdx=3;
+            if(state.st.f === 'vazir') fIdx=1; else if(state.st.f === 'roboto') fIdx=2; else if(state.st.f === 'bangers') fIdx=3;
             document.querySelectorAll('.font-btn')[fIdx].classList.add('ticked');
-
             upd();
-            renderSavedStyles(); 
         }
     }
 
@@ -368,61 +250,32 @@
         const grid = document.getElementById('savedStylesGrid');
         const msg = document.getElementById('noStylesMsg');
         const styles = getSavedStyles();
-        
         grid.innerHTML = '';
-        if(styles.length === 0) {
-            msg.style.display = 'block';
-            return;
-        }
+        if(styles.length === 0) { msg.style.display = 'block'; return; }
         msg.style.display = 'none';
-
         styles.forEach(s => {
             const el = document.createElement('div');
             el.className = 'style-card';
-            if(state.st.name === 'custom_' + s.id) el.classList.add('selected');
-            
-            let previewStyle = `color: ${s.primaryColor}; font-family: ${getFontFamily(s.font)};`;
+            let previewStyle = `color: ${s.primaryColor};`;
             if(s.backType === 'solid') previewStyle += `background: ${s.outlineColor};`;
             else if(s.backType === 'outline') previewStyle += `-webkit-text-stroke: 2px ${s.outlineColor}; background: transparent;`;
-            else if(s.backType === 'transparent') previewStyle += `background: rgba(0,0,0,0.5);`;
-            
-            el.innerHTML = `
-                <button class="delete-style-btn" onclick="deleteStyle(event, ${s.id})"><i class="fa-solid fa-trash"></i></button>
-                <div class="preview-box" style="${previewStyle}">نمونه</div>
-                <div style="font-size:0.8rem; color:#aaa;">${s.name}</div>
-            `;
+            else previewStyle += `background: rgba(0,0,0,0.5);`;
+            el.innerHTML = `<button class="delete-style-btn" onclick="deleteStyle(event, ${s.id})"><i class="fa-solid fa-trash"></i></button><div style="font-size:1.2rem; padding:5px; border-radius:6px; ${previewStyle}">نمونه</div><div style="font-size:0.8rem; color:#aaa;">${s.name}</div>`;
             el.onclick = () => applySavedStyle(s.id);
             grid.appendChild(el);
         });
     }
 
-    function getFontFamily(fName) {
-        if(fName === 'lalezar') return 'Lalezar';
-        if(fName === 'vazir') return 'Vazirmatn';
-        if(fName === 'bangers') return 'Impact';
-        return 'Arial';
-    }
-
-    function showExitModal() {
-        const m = document.getElementById('exitModal');
-        m.style.display = 'flex';
-        setTimeout(() => m.classList.add('show'), 10);
-    }
-    function closeExitModal() {
-        const m = document.getElementById('exitModal');
-        m.classList.remove('show');
-        setTimeout(() => m.style.display = 'none', 300);
-    }
+    function showExitModal() { document.getElementById('exitModal').style.display = 'flex'; setTimeout(() => document.getElementById('exitModal').classList.add('show'), 10); }
+    function closeExitModal() { document.getElementById('exitModal').classList.remove('show'); setTimeout(() => document.getElementById('exitModal').style.display = 'none', 300); }
     function confirmExit() { window.location.reload(); }
 
     function fit() { 
         if(!state.w) return; 
         const ws = document.getElementById('workspace'); 
-        const availableHeight = window.innerHeight * 0.6; 
-        const scale = Math.min((ws.clientWidth - 40) / state.w, availableHeight / state.h); 
+        const scale = Math.min((ws.clientWidth - 40) / state.w, (window.innerHeight * 0.6) / state.h); 
         const c = document.getElementById('videoContainer'); 
-        c.style.width = state.w + 'px'; 
-        c.style.height = state.h + 'px'; 
+        c.style.width = state.w + 'px'; c.style.height = state.h + 'px'; 
         document.getElementById('scaler').style.transform = `scale(${scale})`; 
         ws.style.height = (state.h * scale + 40) + 'px';
     }
@@ -430,73 +283,10 @@
 
     function toggleTool(toolName) {
         document.querySelectorAll('.tool-btn').forEach(b => b.classList.remove('active-tool'));
-        const btnId = 'btn-' + toolName;
-        const btn = document.getElementById(btnId);
-        
-        const sectionId = 'section-' + toolName;
-        const section = document.getElementById(sectionId);
-        
-        const isAlreadyOpen = toolsContainer.classList.contains('open') && section.style.display === 'block';
-
-        if (isAlreadyOpen) {
-            toolsContainer.classList.remove('open');
-            setTimeout(() => { section.style.display = 'none'; }, 200);
-        } else {
-            document.querySelectorAll('.tool-section').forEach(s => s.style.display = 'none');
-            if(btn) btn.classList.add('active-tool');
-            section.style.display = 'block';
-            section.classList.add('active-section');
-            if(toolName === 'text') {
-                toolsContainer.style.maxHeight = 'none';
-                toolsContainer.classList.add('open');
-            } else {
-                toolsContainer.style.maxHeight = ''; 
-                toolsContainer.classList.add('open');
-            }
-        }
-    }
-    
-    async function generateAIStyle() {
-        const desc = document.getElementById('magicPrompt').value;
-        if(!desc) return;
-        
-        const btn = document.querySelector('.btn-magic-action');
-        const originalText = btn.innerHTML;
-        btn.innerHTML = '<div class="spinner" style="width:20px;height:20px;border-width:3px;"></div> در حال طراحی...';
-        btn.disabled = true;
-
-        try {
-            const r = await fetch('/api/generate-style', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({description: desc})
-            });
-            const styleData = await r.json();
-            
-            const newSavedStyle = {
-                id: Date.now(),
-                name: desc.length > 20 ? desc.substring(0, 20) + '...' : desc,
-                primaryColor: styleData.primaryColor,
-                outlineColor: styleData.outlineColor,
-                backType: styleData.backType,
-                font: styleData.font,
-                fontSize: styleData.fontSize
-            };
-
-            saveStyleToStorage(newSavedStyle);
-            applySavedStyle(newSavedStyle.id);
-            
-            toolsContainer.classList.remove('open');
-            alert('طراحی با موفقیت انجام و ذخیره شد!');
-            toggleTool('style'); 
-            
-        } catch(e) {
-            console.error(e);
-            alert('خطا در ارتباط با هوش مصنوعی');
-        } finally {
-            btn.innerHTML = originalText;
-            btn.disabled = false;
-        }
+        document.getElementById('btn-'+toolName)?.classList.add('active-tool');
+        document.querySelectorAll('.tool-section').forEach(s => s.style.display = 'none');
+        document.getElementById('section-'+toolName).style.display = 'block';
+        toolsContainer.classList.add('open');
     }
 
     async function startUpload() { 
@@ -516,152 +306,31 @@
     }
 
     function renderSegList() { 
-        const container = document.getElementById('subCardsContainer'); 
-        container.innerHTML = ''; 
+        const container = document.getElementById('subCardsContainer'); container.innerHTML = ''; 
         state.segs.forEach((s, i) => { 
-            const card = document.createElement('div'); 
-            card.className = 'sub-card' + (s.isHidden ? ' is-hidden-seg' : ''); 
-            card.id = 'seg-card-' + i; 
-            
-            if(editingIndex === i) {
-                card.classList.add('active');
-                card.style.cursor = 'default';
-                const editorCont = document.createElement('div');
-                editorCont.className = 'inline-editor-container';
-                const ta = document.createElement('textarea');
-                ta.className = 'inline-textarea';
-                ta.value = s.text;
-                const acts = document.createElement('div');
-                acts.className = 'inline-actions';
-                const btnSave = document.createElement('button');
-                btnSave.className = 'inline-btn btn-save';
-                btnSave.innerText = 'تایید';
-                btnSave.onclick = (e) => { e.stopPropagation(); saveInlineText(i, ta.value); };
-                const btnCancel = document.createElement('button');
-                btnCancel.className = 'inline-btn btn-cancel';
-                btnCancel.innerText = 'لغو';
-                btnCancel.onclick = (e) => { e.stopPropagation(); editingIndex = -1; renderSegList(); };
-                acts.appendChild(btnCancel);
-                acts.appendChild(btnSave);
-                editorCont.appendChild(ta);
-                editorCont.appendChild(acts);
-                card.appendChild(editorCont);
-            } else {
-                const header = document.createElement('div');
-                header.className = 'sub-card-header';
-                const timeDiv = document.createElement('div');
-                timeDiv.className = 'sub-time';
-                timeDiv.innerText = formatTimeSimple(s.start);
-                const textDiv = document.createElement('div');
-                textDiv.className = 'sub-text-content';
-                textDiv.innerText = s.text;
-                const actionsDiv = document.createElement('div');
-                actionsDiv.className = 'card-actions';
-                const playBtn = document.createElement('button');
-                playBtn.className = 'mini-btn play-btn';
-                playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
-                playBtn.onclick = (e) => { 
-                    e.stopPropagation(); 
-                    manualOverride = true; 
-                    selectSegment(i); 
-                    // منطق پخش سگمنت و توقف در پایان
-                    v.currentTime = s.start; 
-                    stopAtTime = s.end; // تنظیم زمان توقف
-                    v.play(); 
-                    togglePlayIcon(true);
-                };
-                const editBtn = document.createElement('button');
-                editBtn.className = 'mini-btn';
-                editBtn.innerHTML = '<i class="fa-solid fa-pen"></i>';
-                editBtn.onclick = (e) => { e.stopPropagation(); startInlineEdit(i); };
-                actionsDiv.appendChild(playBtn);
-                actionsDiv.appendChild(editBtn);
-                header.appendChild(timeDiv);
-                header.appendChild(textDiv);
-                header.appendChild(actionsDiv);
-                card.appendChild(header);
-                card.onclick = () => { 
-                    if(editingIndex !== -1) return; 
-                    manualOverride = true; 
-                    selectSegment(i); 
-                    if(!v.paused) { 
-                        v.currentTime = s.start + 0.01; 
-                        manualOverride = false; 
-                    } 
-                    else { 
-                        v.currentTime = s.start + 0.01; 
-                        showTextOverlay(i); 
-                    } 
-                };
-            }
+            const card = document.createElement('div'); card.className = 'sub-card'; card.id = 'seg-card-' + i; 
+            card.innerHTML = `<div style="display:flex; justify-content:space-between; align-items:center;">
+                <span class="sub-time">${formatTimeSimple(s.start)}</span>
+                <div class="sub-text-content">${s.text}</div>
+                <div><button class="mini-btn" onclick="playSeg(event, ${i})"><i class="fa-solid fa-play"></i></button></div>
+            </div>`;
+            card.onclick = () => { manualOverride = true; selectSegment(i); v.currentTime = s.start + 0.01; if(v.paused) showTextOverlay(i); else v.pause(); };
             container.appendChild(card); 
         }); 
     }
+    
+    function playSeg(e, i) { e.stopPropagation(); v.currentTime = state.segs[i].start; stopAtTime = state.segs[i].end; v.play(); togglePlayIcon(true); }
 
-    function startInlineEdit(index) {
-        editingIndex = index;
-        manualOverride = true;
-        selectSegment(index);
-        v.pause(); togglePlayIcon(false);
-        stopAtTime = null;
-        v.currentTime = state.segs[index].start + 0.01;
-        showTextOverlay(index);
-        renderSegList(); 
-    }
-
-    function saveInlineText(index, newText) {
-        const seg = state.segs[index];
-        seg.text = newText;
-        tEl.innerText = seg.text;
-        editingIndex = -1;
-        renderSegList();
-    }
-
-    function formatTimeSimple(sec) {
-        let m = Math.floor(sec / 60);
-        let s = Math.floor(sec % 60);
-        return `${m}:${s < 10 ? '0'+s : s}`;
-    }
-
-    function selectSegment(i) { 
-        document.querySelectorAll('.sub-card').forEach(el => el.classList.remove('active')); 
-        const activeItem = document.getElementById('seg-card-' + i); 
-        if(activeItem && editingIndex === -1) { activeItem.classList.add('active'); } 
-        curSeg = i; 
-    }
-
-    function showTextOverlay(index) { 
-        if(index === -1) { tEl.style.opacity = 0; return; } 
-        const seg = state.segs[index]; 
-        tEl.innerText = seg.text; 
-        if(seg.isHidden) tEl.style.opacity = 0; else tEl.style.opacity = 1; 
-    }
+    function formatTimeSimple(sec) { let m = Math.floor(sec/60), s = Math.floor(sec%60); return `${m}:${s<10?'0'+s:s}`; }
+    function selectSegment(i) { document.querySelectorAll('.sub-card').forEach(el => el.classList.remove('active')); document.getElementById('seg-card-'+i)?.classList.add('active'); curSeg = i; }
+    function showTextOverlay(i) { if(i===-1) tEl.style.opacity=0; else { tEl.innerText=state.segs[i].text; tEl.style.opacity=1; } }
 
     v.ontimeupdate = () => { 
-        // منطق توقف در پایان جمله
-        if(stopAtTime && v.currentTime >= stopAtTime) {
-            v.pause();
-            togglePlayIcon(false);
-            stopAtTime = null; // ریست کردن زمان توقف
-            return;
-        }
-
-        if(manualOverride && v.paused) return; 
-        if(!v.paused) manualOverride = false; 
+        if(stopAtTime && v.currentTime >= stopAtTime) { v.pause(); stopAtTime = null; togglePlayIcon(false); return; }
+        if(manualOverride && v.paused) return; if(!v.paused) manualOverride=false;
         const idx = state.segs.findIndex(s => v.currentTime >= s.start && v.currentTime <= s.end); 
-        if(idx !== -1) { 
-            if(curSeg !== idx) { selectSegment(idx); } 
-            const seg = state.segs[idx]; 
-            if(seg.isHidden) { tEl.style.opacity = 0; } 
-            else { 
-                tEl.style.opacity = 1; 
-                tEl.innerText = seg.text;
-            } 
-        } else { 
-            if(!manualOverride && curSeg !== -1 && (v.currentTime < state.segs[curSeg].start || v.currentTime > state.segs[curSeg].end)) { 
-                curSeg = -1; document.querySelectorAll('.sub-card').forEach(el => el.classList.remove('active')); tEl.style.opacity = 0; 
-            } 
-        } 
+        if(idx !== -1) { if(curSeg!==idx) selectSegment(idx); tEl.style.opacity=1; tEl.innerText=state.segs[idx].text; } 
+        else { if(!manualOverride) { curSeg=-1; document.querySelectorAll('.sub-card').forEach(el=>el.classList.remove('active')); tEl.style.opacity=0; } } 
     };
 
     function upd() {
@@ -670,71 +339,42 @@
         state.st.col = document.getElementById('col').value;
         state.st.bg = document.getElementById('bgCol').value;
         state.st.radius = parseInt(document.getElementById('radius').value);
-
-        const radiusRow = document.getElementById('radiusRow');
-        if (state.st.type === 'solid' || state.st.type === 'transparent') {
-            radiusRow.style.display = 'flex';
-        } else {
-            radiusRow.style.display = 'none';
-        }
+        document.getElementById('radiusRow').style.display = (state.st.type !== 'outline') ? 'flex' : 'none';
 
         let font = 'Vazirmatn';
         if(state.st.f === 'lalezar') font = 'Lalezar';
         if(state.st.f === 'bangers') font = 'Impact';
         if(state.st.f === 'roboto') font = 'Arial';
         tEl.style.fontFamily = font;
-        
         tEl.style.fontSize = state.st.fz + 'px';
         tEl.style.bottom = state.st.y + 'px';
-        tEl.style.textAlign = 'center';
-        tEl.style.left = '50%';
-        tEl.style.transform = `translateX(calc(-50% + ${state.st.x}px))`; 
         tEl.style.color = state.st.col;
         
-        tEl.style.paintOrder = 'stroke fill';
+        tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none'; tEl.style.backgroundColor = 'transparent'; tEl.style.borderRadius = '0px';
 
         if(state.st.type === 'solid') {
-            tEl.style.backgroundColor = state.st.bg;
-            tEl.style.webkitTextStroke = '0px';
-            tEl.style.textShadow = 'none';
-            tEl.style.borderRadius = state.st.radius + 'px';
+            tEl.style.backgroundColor = state.st.bg; tEl.style.borderRadius = state.st.radius + 'px';
         } else if (state.st.type === 'transparent') {
-            tEl.style.backgroundColor = hexToRgba(state.st.bg, 0.5);
-            tEl.style.webkitTextStroke = '0px';
-            tEl.style.textShadow = 'none';
-            tEl.style.borderRadius = state.st.radius + 'px';
+            tEl.style.backgroundColor = hexToRgba(state.st.bg, 0.5); tEl.style.borderRadius = state.st.radius + 'px';
         } else if (state.st.type === 'outline') {
-            tEl.style.backgroundColor = 'transparent';
             const s = Math.max(1, state.st.fz * 0.04);
-            tEl.style.webkitTextStroke = `${s}px ${state.st.bg}`;
-            tEl.style.textShadow = `0 0 ${s}px ${state.st.bg}`;
-            tEl.style.borderRadius = '0px';
-        } else { 
-            tEl.style.backgroundColor = 'transparent';
-            tEl.style.webkitTextStroke = '0px';
-            tEl.style.textShadow = 'none';
-            tEl.style.borderRadius = '0px';
+            tEl.style.webkitTextStroke = `${s}px ${state.st.bg}`; tEl.style.textShadow = `0 0 ${s}px ${state.st.bg}`;
         }
     }
 
-    function syncModeButtons() { document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active')); if (state.st.type !== 'none') { const activeButton = document.querySelector(`.mode-btn[onclick="setMode('${state.st.type}')"]`); if (activeButton) activeButton.classList.add('active'); } }
-    
-    function togglePlay() { 
-        if(v.paused) { 
-            stopAtTime = null; // اگر دستی پخش شود، توقف خودکار لغو می‌شود
-            v.play(); 
-            togglePlayIcon(true); 
-        } else { 
-            v.pause(); 
-            togglePlayIcon(false); 
-        } 
-    }
-    function togglePlayIcon(isPlaying) { const overlay = document.getElementById('playOverlay'); overlay.className = isPlaying ? 'playing' : ''; }
-    
+    function syncModeButtons() { document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active')); if (state.st.type !== 'none') { document.querySelector(`.mode-btn[onclick="setMode('${state.st.type}')"]`)?.classList.add('active'); } }
+    function togglePlay() { if(v.paused) { stopAtTime=null; v.play(); togglePlayIcon(true); } else { v.pause(); togglePlayIcon(false); } }
+    function togglePlayIcon(isPlaying) { document.getElementById('playOverlay').className = isPlaying ? 'playing' : ''; }
     function setFont(f, el) { document.querySelectorAll('.font-btn').forEach(btn => btn.classList.remove('ticked')); el.classList.add('ticked'); state.st.f = f; upd(); }
     function setMode(m) { state.st.type = m; syncModeButtons(); upd(); }
     
     async function render() { 
+        // Force sync before render
+        state.st.fz = parseInt(document.getElementById('fz').value);
+        state.st.y = parseInt(document.getElementById('pos').value);
+        state.st.col = document.getElementById('col').value;
+        state.st.bg = document.getElementById('bgCol').value;
+
         v.pause(); togglePlayIcon(false); document.getElementById('loader').style.display='flex'; 
         const activeSegments = state.segs.filter(s => !s.isHidden); 
         const pl = { file_id: state.id, segments: activeSegments, video_width: state.w, video_height: state.h, style: { font: state.st.f, fontSize: state.st.fz, primaryColor: state.st.col, outlineColor: state.st.bg, backType: state.st.type, marginV: state.st.y, x: state.st.x, name: state.st.name } }; 
@@ -751,8 +391,8 @@
     
     function closeResult() { document.getElementById('resultScreen').style.display='none'; const rv = document.getElementById('resultVideo'); rv.pause(); rv.src = ""; }
     
-    // Touch Logic
-    let initialY = 0, initialX = 0, initialBottom = 0, initialXState = 0, initialDist = 0, initialFontSize = 0, touchMode = null;
+    // Touch Logic (Drag & Pinch)
+    let initialY=0, initialX=0, initialBottom=0, initialXState=0, initialDist=0, initialFontSize=0, touchMode=null;
     tEl.addEventListener('touchstart', (e) => { if(e.touches.length === 1) { touchMode = 'drag'; initialY = e.touches[0].clientY; initialX = e.touches[0].clientX; initialBottom = state.st.y; initialXState = state.st.x; } else if (e.touches.length === 2) { touchMode = 'pinch'; initialDist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY); initialFontSize = state.st.fz; } }, {passive: false});
     tEl.addEventListener('touchmove', (e) => { if (!touchMode) return; e.preventDefault(); if (touchMode === 'drag' && e.touches.length === 1) { let newBottom = initialBottom + ((initialY - e.touches[0].clientY) * 2); state.st.y = Math.round(newBottom); document.getElementById('pos').value = state.st.y; let diffX = (e.touches[0].clientX - initialX) * 1.5; state.st.x = Math.round(initialXState + diffX); upd(); } else if (touchMode === 'pinch' && e.touches.length === 2) { let dist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY); let newSize = initialFontSize * (dist / initialDist); state.st.fz = Math.round(Math.max(5, newSize)); document.getElementById('fz').value = state.st.fz; upd(); } }, {passive: false});
     tEl.addEventListener('touchend', () => touchMode = null);