Moved to Hugging Face automatically

Dockerfile

@@ -0,0 +1,23 @@
+FROM python:3.10-slim
+
+# نصب FFmpeg، Git و کتابخانه‌های حیاتی سیستم
+RUN apt-get update && \
+    apt-get install -y ffmpeg git fontconfig \
+    libraqm0 \
+    libfribidi0 \
+    libharfbuzz0b \
+    libsndfile1 \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+# ایجاد پوشه‌های لازم
+RUN mkdir -p /app/static/css /app/static/js /app/temp
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# کپی کردن تمام فایل‌ها
+COPY . .
+RUN chmod -R 777 /app
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,10 @@
+---
+title: Zirnavis
+emoji: 😻
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,1185 @@
+import os
+import shutil
+import subprocess
+import uuid
+import json
+import time
+import asyncio
+import random
+import re
+import importlib.util
+import inspect
+import requests  
+from datetime import datetime
+from typing import List, Optional, Union, Dict
+from fastapi import FastAPI, UploadFile, File, Form, HTTPException, BackgroundTasks
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+import google.generativeai as genai
+from pydantic import BaseModel
+from PIL import Image, ImageDraw, ImageFont
+from pydub import AudioSegment
+from pydub.silence import detect_silence
+from groq import Groq  
+
+# --- سازگاری با محیط‌هایی که Pillow بدون libraqm نصب شده است ---
+# در برخی سرورها Pillow بدون کتابخانه libraqm کامپایل می‌شود و پارامترهای
+# direction/language/features باعث خطای "not supported without libraqm" می‌شوند.
+# این پچ باعث می‌شود در چنین شرایطی به‌جای کرش کردن، متن بدون این پارامترها
+# (با جهت پیش‌فرض چپ‌به‌راست کتابخانه) رسم شود و ساخت ویدیو ادامه پیدا کند.
+_orig_draw_text = ImageDraw.ImageDraw.text
+_orig_draw_textlength = ImageDraw.ImageDraw.textlength
+_orig_draw_textbbox = ImageDraw.ImageDraw.textbbox
+
+def _strip_raqm_kwargs(kwargs):
+    kwargs.pop('direction', None)
+    kwargs.pop('language', None)
+    kwargs.pop('features', None)
+    return kwargs
+
+def _safe_draw_text(self, xy, text, *args, **kwargs):
+    try:
+        return _orig_draw_text(self, xy, text, *args, **kwargs)
+    except ValueError as e:
+        if 'raqm' in str(e).lower():
+            return _orig_draw_text(self, xy, text, *args, **_strip_raqm_kwargs(kwargs))
+        raise
+
+def _safe_draw_textlength(self, text, *args, **kwargs):
+    try:
+        return _orig_draw_textlength(self, text, *args, **kwargs)
+    except ValueError as e:
+        if 'raqm' in str(e).lower():
+            return _orig_draw_textlength(self, text, *args, **_strip_raqm_kwargs(kwargs))
+        raise
+
+def _safe_draw_textbbox(self, xy, text, *args, **kwargs):
+    try:
+        return _orig_draw_textbbox(self, xy, text, *args, **kwargs)
+    except ValueError as e:
+        if 'raqm' in str(e).lower():
+            return _orig_draw_textbbox(self, xy, text, *args, **_strip_raqm_kwargs(kwargs))
+        raise
+
+ImageDraw.ImageDraw.text = _safe_draw_text
+ImageDraw.ImageDraw.textlength = _safe_draw_textlength
+ImageDraw.ImageDraw.textbbox = _safe_draw_textbbox
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+TEMP_DIR = "temp"
+STATIC_DIR = "static"
+STYLES_DIR = "styles"
+os.makedirs(TEMP_DIR, exist_ok=True)
+os.makedirs(STATIC_DIR, exist_ok=True)
+os.makedirs(STYLES_DIR, exist_ok=True)
+
+app.mount("/temp", StaticFiles(directory="temp"), name="temp")
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+MODEL_NAME = "gemini-2.5-flash" 
+
+FONT_DIR = "static/fonts" 
+FONT_DATASET_REPO_ID = "Opera8/font"  # دیتاست عمومی هاگینگ‌فیس حاوی تمام فایل‌های فونت
+FONT_FILES_MAP = {
+    "vazir": "Vazirmatn.ttf", 
+    "lalezar": "Lalezar.ttf",
+    "amiri": "Amiri-Bold.ttf", 
+    "sarbaz": "Sarbaz.ttf", 
+    "nastaliq": "IranNastaliq.ttf", 
+    "vazir-thin": "Vazirmatn-Thin.ttf", 
+    "mada-thin": "Mada-ExtraLight.ttf", 
+    "aref-bold": "ArefRuqaa-Bold.ttf", 
+    "dastnevis": "Dastnevis.ttf",
+    "entazar": "Entazar.ttf",
+    "kamran": "Kamran.ttf",
+    "gharib": "Gharib.ttf",
+    "pinar": "Pinar-Bold.ttf",
+    "hasti": "Hasti.ttf",
+}
+
+def ensure_fonts_downloaded():
+    """
+    دیگر هیچ فایل فونتی داخل خود پروژه/اسپیس قرار نمی‌گیرد.
+    این تابع در لحظه بالا آمدن سرور، تمام فایل‌های فونت را از دیتاست عمومی
+    هاگینگ‌فیس (Opera8/font) دریافت کرده و در مسیر static/fonts ذخیره می‌کند.
+    """
+    os.makedirs(FONT_DIR, exist_ok=True)
+    downloaded_names = []
+    failed_names = []
+    try:
+        from huggingface_hub import list_repo_files, hf_hub_download
+        remote_files = list_repo_files(repo_id=FONT_DATASET_REPO_ID, repo_type="dataset")
+        font_remote_files = [f for f in remote_files if f.lower().endswith((".ttf", ".otf"))]
+
+        for remote_name in font_remote_files:
+            local_name = os.path.basename(remote_name)
+            local_path = os.path.join(FONT_DIR, local_name)
+            try:
+                cached_file_path = hf_hub_download(repo_id=FONT_DATASET_REPO_ID, filename=remote_name, repo_type="dataset")
+                shutil.copyfile(cached_file_path, local_path)
+                downloaded_names.append(local_name)
+            except Exception as e:
+                failed_names.append(f"{local_name} ({e})")
+    except Exception as e:
+        print(f"❌ اتصال به دیتاست فونت‌ها «{FONT_DATASET_REPO_ID}» ناموفق بود: {e}")
+        return
+
+    if downloaded_names:
+        print(f"✅ تعداد {len(downloaded_names)} فونت از دیتاست «{FONT_DATASET_REPO_ID}» با موفقیت دریافت و ذخیره شد: {', '.join(downloaded_names)}")
+    if failed_names:
+        print(f"❌ دریافت {len(failed_names)} فونت از دیتاست با خطا مواجه شد:")
+        for name in failed_names:
+            print(f"   - {name}")
+
+# --- تنظیمات چندزبانه (Multi-language support) ---
+# هر زبان: کد ویسپر گراک، جهت نوشتار، متن راهنمای رونویسی، و فونت پیش‌فرض امن برای آن زبان
+SUPPORTED_LANGUAGES = {
+    "fa": {
+        "label": "فارسی", "flag": "🇮🇷", "rtl": True, "whisper_code": "fa",
+        "default_font": "pinar",
+        "prompt": "سلام سلام، چطوری؟ کلمات دقیقاً همان‌طور که تلفظ می‌شوند، با رعایت حروف اضافه، ساختار عامیانه، محاوره‌ای و شکسته نوشته شوند. حتماً تمامی کلمات تکراری و تکرار پشت سر هم کلمات (مثل سلام سلام، خوب خوب) دقیقاً و دونه به دونه ثبت شوند و به هیچ عنوان حذف یا خلاصه‌سازی نشوند."
+    },
+    "en": {
+        "label": "English", "flag": "🇺🇸", "rtl": False, "whisper_code": "en",
+        "default_font": "vazir",
+        "prompt": "Hi hi, how are you? Transcribe the words exactly as spoken, keeping casual and colloquial speech intact. Repeated words said back to back (like hi hi, okay okay) must be written exactly and individually, never removed, merged or summarized."
+    },
+    "ar": {
+        "label": "العربية", "flag": "🇸🇦", "rtl": True, "whisper_code": "ar",
+        "default_font": "amiri",
+        "prompt": "مرحباً مرحباً، كيف حالك؟ يجب كتابة الكلمات تماماً كما تُنطق، بما في ذلك اللهجة العامية. يجب تدوين الكلمات المكررة المتتالية (مثل مرحباً مرحباً) بدقة ودون حذف أو تلخيص."
+    },
+    "tr": {
+        "label": "Türkçe", "flag": "🇹🇷", "rtl": False, "whisper_code": "tr",
+        "default_font": "vazir",
+        "prompt": "Merhaba merhaba, nasılsın? Kelimeleri tam olarak söylendiği gibi, günlük konuşma diliyle yazın. Art arda tekrar eden kelimeler (merhaba merhaba gibi) tek tek ve eksiksiz yazılmalı, asla silinmemeli veya özetlenmemelidir."
+    },
+    "es": {
+        "label": "Español", "flag": "🇪🇸", "rtl": False, "whisper_code": "es",
+        "default_font": "vazir",
+        "prompt": "Hola hola, ¿cómo estás? Transcribe las palabras exactamente como se pronuncian, manteniendo el habla coloquial. Las palabras repetidas consecutivamente (como hola hola) deben escribirse exactamente, sin eliminarlas ni resumirlas."
+    },
+    "fr": {
+        "label": "Français", "flag": "🇫🇷", "rtl": False, "whisper_code": "fr",
+        "default_font": "vazir",
+        "prompt": "Salut salut, comment ça va ? Transcrivez les mots exactement comme ils sont prononcés, en conservant le langage familier. Les mots répétés consécutivement (comme salut salut) doivent être écrits exactement, sans suppression ni résumé."
+    },
+    "de": {
+        "label": "Deutsch", "flag": "🇩🇪", "rtl": False, "whisper_code": "de",
+        "default_font": "vazir",
+        "prompt": "Hallo hallo, wie geht's? Transkribiere die Wörter genau so, wie sie gesprochen werden, einschließlich Umgangssprache. Aufeinanderfolgende Wiederholungen (wie hallo hallo) müssen exakt und einzeln erfasst werden, niemals entfernt oder zusammengefasst."
+    },
+    "it": {
+        "label": "Italiano", "flag": "🇮🇹", "rtl": False, "whisper_code": "it",
+        "default_font": "vazir",
+        "prompt": "Ciao ciao, come stai? Trascrivi le parole esattamente come vengono pronunciate, mantenendo il linguaggio colloquiale. Le parole ripetute consecutivamente (come ciao ciao) devono essere scritte esattamente, senza rimuoverle o riassumerle."
+    },
+    "pt": {
+        "label": "Português", "flag": "🇵🇹", "rtl": False, "whisper_code": "pt",
+        "default_font": "vazir",
+        "prompt": "Oi oi, como vai? Transcreva as palavras exatamente como são faladas, mantendo a linguagem coloquial. Palavras repetidas consecutivamente (como oi oi) devem ser escritas exatamente, sem remover ou resumir."
+    },
+    "ur": {
+        "label": "اردو", "flag": "🇵🇰", "rtl": True, "whisper_code": "ur",
+        "default_font": "nastaliq",
+        "prompt": "ہیلو ہیلو، کیا حال ہے؟ الفاظ کو بالکل اسی طرح لکھیں جیسے بولے گئے ہیں، بول چال کی زبان کو برقرار رکھیں۔ لگاتار دہرائے گئے الفاظ (جیسے ہیلو ہیلو) کو بالکل اور الگ الگ لکھا جائے، کبھی حذف یا خلاصہ نہ کیا جائے۔"
+    },
+}
+DEFAULT_LANGUAGE = "fa"
+RTL_LANGS = {code for code, cfg in SUPPORTED_LANGUAGES.items() if cfg["rtl"]}
+
+def normalize_language(lang: Optional[str]) -> str:
+    if lang and lang in SUPPORTED_LANGUAGES:
+        return lang
+    return DEFAULT_LANGUAGE
+
+# دریافت توکن Groq و Gemini از تنظیمات سکرت اسپیس
+GROQ_API_KEYS_ENV = os.getenv("GROQ_API_KEYS", "")
+GROQ_API_KEYS = [k.strip() for k in GROQ_API_KEYS_ENV.split(",") if k.strip()]
+groq_key_index = 0
+
+API_KEYS = [os.getenv("GEMINI_API_KEY")] if os.getenv("GEMINI_API_KEY") else []
+
+# --- سیستم صف و پایش موقت آپلود غیرهمگام ---
+class UploadJobStatus:
+    QUEUED = "queued"
+    PROCESSING = "processing"
+    COMPLETED = "completed"
+    FAILED = "failed"
+
+class UploadJob:
+    def __init__(self, task_id: str, file_name: str, language: str = "fa"):
+        self.id = task_id
+        self.file_name = file_name
+        self.language = language
+        self.status = UploadJobStatus.QUEUED
+        self.result = None
+        self.error_message = None
+        self.created_at = datetime.now()
+
+upload_jobs: Dict[str, UploadJob] = {}
+
+# --- Dynamic Style Loading ---
+loaded_styles = {}
+style_configs = {}
+style_templates = {}
+
+def load_all_styles():
+    print("--- Loading Styles from /styles ---")
+    for filename in os.listdir(STYLES_DIR):
+        if filename.endswith(".py") and filename != "__init__.py":
+            module_name = filename[:-3]
+            file_path = os.path.join(STYLES_DIR, filename)
+            spec = importlib.util.spec_from_file_location(module_name, file_path)
+            if spec and spec.loader:
+                mod = importlib.util.module_from_spec(spec)
+                spec.loader.exec_module(mod)
+                
+                if hasattr(mod, 'config'):
+                    ids = mod.config.get("ids", [])
+                    for style_id in ids:
+                        loaded_styles[style_id] = mod
+                        style_configs[style_id] = mod.config
+                        if hasattr(mod, 'frontend_template'):
+                            style_templates[style_id] = mod.frontend_template.strip()
+                        print(f"Loaded Style: {style_id}")
+
+load_all_styles()
+
+# تنظیم همزمانی پردازش
+CONCURRENCY_LIMIT = 20
+GEMINI_SEMAPHORE = asyncio.Semaphore(CONCURRENCY_LIMIT)
+
+# --- Data Models ---
+class WordInfo(BaseModel):
+    word: str; start: float; end: float
+    highlight: Optional[bool] = False
+    color: Optional[str] = None
+
+class SubtitleSegment(BaseModel):
+    id: Optional[Union[str, int]] = None
+    start: float
+    end: float
+    text: str
+    words: Optional[List[WordInfo]] = []
+
+class StyleConfig(BaseModel):
+    font: str; fontSize: int; primaryColor: str; outlineColor: str
+    backType: str; marginV: int
+    x: Optional[int] = 0
+    name: Optional[str] = "classic"
+    radius: Optional[int] = 16
+    paddingX: Optional[int] = 20
+    paddingY: Optional[int] = 10
+    total_video_duration: Optional[float] = None
+    current_render_time: Optional[float] = None
+    entry_anim_progress: Optional[float] = 1.0
+    styleBgColors: Dict[str, str] = {}
+    styleColors: Dict[str, str] = {}
+    styleActiveColors: Dict[str, str] = {}
+    useActiveColor: Optional[bool] = True
+    fadeUnread: Optional[bool] = True
+    fadeSurrounding: Optional[bool] = False
+    typewriter: Optional[bool] = False
+    language: Optional[str] = "fa"
+    text_direction: Optional[str] = "rtl"
+    lang_code: Optional[str] = "fa"
+    ai_design: Optional[Dict] = None
+
+class ProcessRequest(BaseModel):
+    file_id: str; segments: List[SubtitleSegment]
+    video_width: int; video_height: int; style: StyleConfig
+
+class StylePrompt(BaseModel):
+    description: str
+
+class JobStatus:
+    QUEUED = "queued"; PROCESSING = "processing"
+    COMPLETED = "completed"; FAILED = "failed"
+
+class Job:
+    def __init__(self, job_id: str, request_data: ProcessRequest):
+        self.id = job_id; self.data = request_data; self.status = JobStatus.QUEUED
+        self.created_at = datetime.now(); self.result_url = None; self.error_message = None
+
+render_queue = asyncio.Queue()
+jobs_db: Dict[str, Job] = {}
+
+async def queue_worker():
+    print("--- Queue Worker Started ---")
+    while True:
+        job_id = await render_queue.get()
+        job = jobs_db.get(job_id)
+        if job:
+            try:
+                print(f"Processing job: {job_id}")
+                job.status = JobStatus.PROCESSING
+                output_url = process_render_logic(job.data)
+                job.result_url = output_url
+                job.status = JobStatus.COMPLETED  # اصلاح باگ عدم تعریف نام متغیر COMPLETED
+                print(f"Job {job_id} completed.")
+            except Exception as e:
+                print(f"Job {job_id} failed: {e}")
+                job.status = JobStatus.FAILED
+                job.error_message = str(e)
+        render_queue.task_done()
+
+async def cleanup_old_files_loop():
+    print("--- File Cleanup Worker Started ---")
+    while True:
+        await asyncio.sleep(600)  # بررسی وضعیت هر ۱۰ دقیقه یک‌بار
+        try:
+            now = time.time()
+            for filename in os.listdir(TEMP_DIR):
+                file_path = os.path.join(TEMP_DIR, filename)
+                if filename.endswith(".mp4") and "_final_" in filename:
+                    try:
+                        mtime = os.path.getmtime(file_path)
+                        if now - mtime > 7200:
+                            os.remove(file_path)
+                            print(f"Cleanup: Removed expired final video: {filename}")
+                    except Exception as e:
+                        print(f"Cleanup error for {filename}: {e}")
+        except Exception as e:
+            print(f"Global cleanup loop error: {e}")
+
+@app.on_event("startup")
+async def startup_event(): 
+    print(f"تعداد {len(API_KEYS)} کلید جیمینای و تعداد {len(GROQ_API_KEYS)} کلید گراک شناسایی شد.")
+    ensure_fonts_downloaded()
+    check_fonts_integrity()
+    asyncio.create_task(queue_worker())
+    asyncio.create_task(cleanup_old_files_loop())
+
+def check_fonts_integrity():
+    """بررسی سلامت تمامی فایل‌های فونت هنگام بالا آمدن سرور و گزارش آن به فارسی در لاگ"""
+    healthy = []
+    broken = []
+    for key, filename in FONT_FILES_MAP.items():
+        fpath = os.path.join(FONT_DIR, filename)
+        if not os.path.exists(fpath):
+            broken.append(f"{filename} (فایل موجود نیست)")
+            continue
+        try:
+            ImageFont.truetype(fpath, 40)
+            healthy.append(filename)
+        except Exception as e:
+            broken.append(f"{filename} ({e})")
+
+    if healthy:
+        print(f"✅ تعداد {len(healthy)} فونت با این نام‌ها شناسایی و با موفقیت بارگذاری شد: {', '.join(healthy)}")
+    if broken:
+        print(f"❌ تعداد {len(broken)} فونت خراب/ناقص یا در دسترس نبود:")
+        for b in broken:
+            print(f"   - {b}")
+
+# --- Helper Functions ---
+def clean_json_response(text: str):
+    text = text.strip()
+    if text.startswith('{') and text.endswith('}'): return text
+    match = re.search(r'```json\s*(\{.*?\})\s*```', text, re.DOTALL)
+    if match: return match.group(1)
+    match = re.search(r'\{.*\}', text, re.DOTALL)
+    if match: return match.group(0)
+    return text
+
+def get_video_info(path):
+    try:
+        cmd = ["ffprobe", "-v", "error", "-select_streams", "v:0", "-show_entries", "stream=width,height,duration", "-of", "json", path]
+        res = subprocess.run(cmd, capture_output=True, text=True)
+        data = json.loads(res.stdout)
+        stream = data['streams'][0]
+        w = int(stream.get('width', 1080)); h = int(stream.get('height', 1920)); dur = stream.get('duration')
+        if not dur:
+            cmd_dur = ["ffprobe", "-v", "error", "-show_entries", "format=duration", "-of", "json", path]
+            res_dur = subprocess.run(cmd_dur, capture_output=True, text=True)
+            data_dur = json.loads(res_dur.stdout)
+            dur = data_dur['format'].get('duration', 60)
+        return w, h, float(dur)
+    except: return 1080, 1920, 60.0
+
+_FONT_OBJ_CACHE = {}
+
+def get_font_object(style_font_name, size):
+    """
+    بار کردن فونت درخواستی. اگر فایل فونت موردنظر روی دیسک نبود، مانند قبل
+    به فونت پیش‌فرض Vazirmatn سوییچ می‌کند؛ اما اگر فایل فونت وجود داشت ولی خراب/ناقص
+    بود (مثلاً مشکل دانلود ناقص Git LFS)، به‌جای رد شدن بی‌صدا، خطای واضح و مشخص
+    می‌دهد تا خودتان متوجه شوید و فایل فونت صحیح را در static/fonts قرار دهید.
+    """
+    cache_key = (style_font_name, size)
+    if cache_key in _FONT_OBJ_CACHE:
+        return _FONT_OBJ_CACHE[cache_key]
+
+    target_filename = FONT_FILES_MAP.get(style_font_name, "Vazirmatn.ttf")
+    target_path = os.path.join(FONT_DIR, target_filename)
+    if not os.path.exists(target_path):
+        target_path = os.path.join(FONT_DIR, "Vazirmatn.ttf")
+
+    try:
+        font_obj = ImageFont.truetype(target_path, size)
+    except Exception as e:
+        raise RuntimeError(
+            f"❌ فایل فونت «{os.path.basename(target_path)}» خراب یا ناقص است و بارگذاری نشد ({e}). "
+            f"لطفاً یک فایل فونت (.ttf) سالم را در مسیر static/fonts/{os.path.basename(target_path)} قرار دهید."
+        )
+
+    _FONT_OBJ_CACHE[cache_key] = font_obj
+    return font_obj
+
+def get_color_tuple(color_str: str, default=(255, 255, 255, 255)):
+    if not color_str or not isinstance(color_str, str): return default
+    color_str = color_str.strip().lower()
+    if color_str.startswith('#'):
+        try:
+            hex_val = color_str.lstrip('#')
+            if len(hex_val) == 6: return tuple(int(hex_val[i:i+2], 16) for i in (0, 2, 4)) + (255,)
+            elif len(hex_val) == 8: return tuple(int(hex_val[i:i+2], 16) for i in (0, 2, 4, 6))
+        except: pass
+    elif color_str.startswith('rgba'):
+        try:
+            content = color_str[color_str.find('(')+1 : color_str.rfind(')')]
+            parts = [x.strip() for x in content.split(',')]
+            if len(parts) >= 4:
+                r, g, b = int(parts[0]), int(parts[1]), int(parts[2])
+                a = int(float(parts[3]) * 255)
+                return (r, g, b, a)
+        except: pass
+    elif color_str.startswith('rgb'):
+        try:
+            content = color_str[color_str.find('(')+1 : color_str.rfind(')')]
+            parts = [x.strip() for x in content.split(',')]
+            if len(parts) >= 3: return (int(parts[0]), int(parts[1]), int(parts[2]), 255)
+        except: pass
+    return default
+
+def create_subtitle_image(text_parts: list, active_idx: int, width: int, height: int, style: StyleConfig, word_infos: Optional[List[WordInfo]] = None):
+    img = Image.new('RGBA', (width, height), (0, 0, 0, 0))
+    draw = ImageDraw.Draw(img)
+
+    # --- تعیین جهت نوشتار و کد زبان بر اساس زبان انتخابی پروژه (چندزبانه) ---
+    lang_code = normalize_language(getattr(style, 'language', None))
+    is_rtl = lang_code in RTL_LANGS
+    text_direction = 'rtl' if is_rtl else 'ltr'
+    setattr(style, 'text_direction', text_direction)
+    setattr(style, 'lang_code', lang_code)
+
+    text_offset = 0
+    fs = style.fontSize
+    if style.font == 'dastnevis':
+        text_offset = int(fs * 0.15) if style.name == "music_player" else int(fs * 0.25)
+    elif style.font == 'entazar':
+        text_offset = int(fs * 0.03) if style.name == "music_player" else int(fs * 0.2)
+    elif style.font == 'kamran':
+        text_offset = int(fs * 0.03) if style.name == "music_player" else int(fs * 0.2)
+    elif style.font == 'pinar':
+        text_offset = 0 if style.name == "music_player" else int(fs * -0.2)
+
+    stroke_val = 0
+    if style.font == 'entazar' and style.name != "music_player":
+        stroke_val = 0.1
+
+    if text_offset != 0 or stroke_val > 0:
+        original_text_method = draw.text
+        def custom_draw_text(xy, text, **kwargs):
+            if stroke_val > 0:
+                current_fill = kwargs.get('fill', (255, 255, 255, 255))
+                kwargs['stroke_width'] = stroke_val
+                kwargs['stroke_fill'] = current_fill
+            
+            # برای استایل‌های کادردار، انحراف دستی را صفر می‌کنیم تا تراز بصری کادر به هم نخورد
+            actual_offset = text_offset
+            if style.name in ["instagram_box", "alpha_gradient", "karaoke_static", "auto_director", "falling_karaoke"]:
+                actual_offset = 0
+                
+            original_text_method((xy[0], xy[1] + actual_offset), text, **kwargs)
+        draw.text = custom_draw_text
+
+    font = get_font_object(style.font, style.fontSize)
+    lines = []
+    if style.name == "music_player":
+        lines.append(text_parts)
+    else:
+        MAX_WORDS_PER_LINE = 5
+        current_line = []
+        for i, word in enumerate(text_parts):
+            current_line.append(word)
+            if len(current_line) == MAX_WORDS_PER_LINE:
+                lines.append(current_line)
+                current_line = []
+        if current_line:
+            lines.append(current_line)
+
+    line_metrics = [] 
+    max_line_width = 0
+    for line_words in lines:
+        w_widths = []
+        l_width = 0
+        full_line_text = " ".join(line_words)
+        try: l_width = draw.textlength(full_line_text, font=font, direction=text_direction, language=lang_code)
+        except: l_width = font.getlength(full_line_text)
+        if l_width > max_line_width: max_line_width = l_width
+        for w in line_words:
+            try: wl = draw.textlength(w, font=font, direction=text_direction, language=lang_code)
+            except: wl = font.getlength(w)
+            w_widths.append(wl)
+        line_metrics.append({"width": l_width, "words": line_words, "word_widths": w_widths})
+
+    safe_word_infos = word_infos
+    if word_infos:
+        safe_word_infos = []
+        self_handled = ["instagram_box", "alpha_gradient", "music_player", "falling_words", "falling_karaoke", "blue_cloud", "spring_popup", "falling_plain", "red_outline_box"]
+        should_fade_unread = getattr(style, 'fadeUnread', True) and (style.name not in self_handled)
+        should_fade_surr = getattr(style, 'fadeSurrounding', False) and (style.name not in self_handled)
+        curr_t = getattr(style, 'current_render_time', None)
+        
+        for i, w in enumerate(word_infos):
+            w_copy = w.copy() if hasattr(w, 'copy') else w
+            
+            if (i == active_idx) and not getattr(style, 'useActiveColor', True):
+                if style.name in ["auto_director", "karaoke_static", "falling_karaoke", "alpha_gradient", "falling_plain"]:
+                    # اعمال رنگ متن انتخابی کاربر برای استایل‌های داینامیک و نئون آلفا
+                    w_copy.color = style.styleColors.get(style.name, "#FFFFFF")
+                elif style.name in ["instagram_box"]:
+                    # حفظ رفتار قبلی برای باکس متحرک بدون تغییر
+                    w_copy.color = "#FFFFFF"
+            
+            is_future = (curr_t is not None and curr_t < w.start) or (curr_t is None and active_idx != -1 and i > active_idx)
+            is_past = (curr_t is not None and curr_t >= w.end) or (curr_t is None and active_idx != -1 and i < active_idx)
+            
+            if (is_future and (should_fade_unread or should_fade_surr)) or (is_past and should_fade_surr):
+                    if style.name in ["classic", "progressive_write"]:
+                        default_txt_color = style.primaryColor
+                    else:
+                        # تعریف جدول رنگ‌های پیش‌فرض استایل‌های اختصاصی جهت جلوگیری از لود رنگ سفید اشتباه
+                        default_style_colors = {
+                            "blue_outline": "#0000FF",
+                            "blue_cloud": "#00b4ff",
+                            "dark_edges": "#ffffff",
+                            "falling_words": "#ffffff",
+                            "falling_karaoke": "#ffffff"
+                        }
+                        default_txt_color = style.styleColors.get(style.name, default_style_colors.get(style.name, "#FFFFFF"))
+                    
+                    tr, tg, tb, _ = get_color_tuple(w_copy.color if w_copy.color else default_txt_color, (255, 255, 255, 255))
+                    
+                    # قرار دادن هر دو استایل جدید در لیست بدون کادرها جهت اعمال مستقیم کانال آلفا
+                    no_box_styles = ["karaoke_static", "auto_director", "plain_white", "white_outline", "dark_edges", "blue_outline", "spring_popup", "falling_plain"]
+                    if style.name in no_box_styles:
+                        w_copy.color = f"rgba({tr},{tg},{tb},0.35)"
+                    else:
+                        bg_key = 'simple_bar_main_box' if style.name == "simple_bar" else style.name
+                        bgr, bgg, bgb, _ = get_color_tuple(style.styleBgColors.get(bg_key, style.outlineColor), (0, 0, 0, 255))
+                        fr, fg, fb = int((tr * 0.35) + (bgr * 0.65)), int((tg * 0.35) + (bgg * 0.65)), int((tb * 0.35) + (bgb * 0.65))
+                        w_copy.color = f"rgba({fr},{fg},{fb},255)"
+            
+            safe_word_infos.append(w_copy)
+
+    style_module = loaded_styles.get(style.name)
+    if style_module and hasattr(style_module, 'draw_frame'):
+        style_module.draw_frame(
+            draw=draw,
+            img=img,
+            width=width,
+            height=height,
+            style_config=style,
+            lines=lines,
+            line_metrics=line_metrics,
+            active_idx=active_idx,
+            font=font,
+            color_parser=get_color_tuple,
+            word_infos=safe_word_infos
+        )
+    else:
+        y = height - style.marginV
+        draw.text((width/2, y), "Style Error", font=font, fill="red")
+    return img
+
+def generate_subtitle_video(data: ProcessRequest, temp_dir: str):
+    target_styles = [
+        "instagram_box",      
+        "dark_edges",         
+        "falling_words",      
+        "classic",            
+        "progressive_write"   
+    ]
+    
+    if data.style.name in target_styles:
+        data.style.paddingX = (data.style.paddingX or 0) + 15
+
+    list_file = os.path.join(temp_dir, f"{data.file_id}_list.txt")
+    empty_img_path = os.path.join(temp_dir, "empty.png")
+    if not os.path.exists(empty_img_path): Image.new('RGBA', (data.video_width, data.video_height), (0, 0, 0, 0)).save(empty_img_path)
+
+    sorted_segments = sorted(data.segments, key=lambda x: x.start)
+    if sorted_segments:
+        setattr(data.style, 'total_video_duration', sorted_segments[-1].end)
+    else:
+        setattr(data.style, 'total_video_duration', 1.0)
+
+    with open(list_file, "w") as f:
+        current_timeline = 0.0
+        last_generated_image = "empty.png"
+
+        for idx, seg in enumerate(sorted_segments):
+            start_time = round(max(seg.start, current_timeline), 3)
+            end_time = round(max(seg.end, start_time + 0.1), 3)
+            if end_time - start_time < 0.04: continue
+
+            gap = round(start_time - current_timeline, 3)
+            if gap > 0.005:
+                # حذف کلمات چسبیده قبلی در ��مان سکوت و نمایش ندادن هیچ متنی (نمایش فریم خالی)
+                f.write(f"file 'empty.png'\nduration {gap:.3f}\n")
+                current_timeline = start_time
+                last_generated_image = "empty.png"
+            
+            current_timeline = start_time
+            available_duration = round(end_time - current_timeline, 3)
+            words = [w.word for w in seg.words] if seg.words else seg.text.split()
+            
+            if seg.words and len(words) > 0:
+                seg.words.sort(key=lambda x: x.start)
+                words = [w.word for w in seg.words]
+
+                SUB_FRAME_DURATION = 0.025 if data.style.name in ["falling_words", "falling_karaoke", "spring_popup"] else 0.05
+                time_cursor = start_time
+                ANIMATION_DURATION = 0.4 
+                while time_cursor < end_time:
+                    active_word_index = -1
+                    for i, w_info in enumerate(seg.words):
+                        if time_cursor >= w_info.start and time_cursor < w_info.end:
+                            active_word_index = i
+                            break
+                    setattr(data.style, 'current_render_time', time_cursor)
+                    time_into_segment = time_cursor - start_time
+                    anim_progress = min(1.0, time_into_segment / ANIMATION_DURATION)
+                    setattr(data.style, 'entry_anim_progress', anim_progress)
+                    name = f"sub_{data.file_id}_{idx}_{int(time_cursor*1000)}.png"
+                    img = create_subtitle_image(words, active_word_index, data.video_width, data.video_height, data.style, word_infos=seg.words)
+                    img.save(os.path.join(temp_dir, name))
+                    last_generated_image = name
+                    f.write(f"file '{name}'\nduration {SUB_FRAME_DURATION:.3f}\n")
+                    time_cursor += SUB_FRAME_DURATION
+                current_timeline = end_time
+            else:
+                name = f"sub_{data.file_id}_{idx}_full.png"
+                img = create_subtitle_image(words, -1, data.video_width, data.video_height, data.style, word_infos=seg.words)
+                img.save(os.path.join(temp_dir, name))
+                f.write(f"file '{name}'\nduration {available_duration:.3f}\n")
+                last_generated_image = name
+                current_timeline += available_duration
+
+        f.write(f"file 'empty.png'\nduration 30.0\n")
+    return list_file
+
+def process_render_logic(req: ProcessRequest) -> str:
+    # اعمال زمان‌های مرزی دقیق برای هر سگمنت
+    for s in req.segments:
+        if s.words:
+            s.words.sort(key=lambda x: x.start)
+            s.start = s.words[0].start
+            s.end = s.words[-1].end
+
+    req.segments = [s for s in req.segments if s.end > s.start]
+    req.segments.sort(key=lambda x: x.start)
+
+    lst = generate_subtitle_video(req, TEMP_DIR)
+    inp = f"{TEMP_DIR}/{req.file_id}.mp4"
+    if not os.path.exists(inp): raise Exception("Input video not found")
+
+    out = f"{TEMP_DIR}/{req.file_id}_final_{int(time.time())}.mp4"
+    
+    # ترکیب مستقیم روی ویدیو با حفظ زمان‌بندی متغیر (VFR) بدون دستکاری فریم‌ها
+    cmd_merge = [
+        "ffmpeg", "-y", 
+        "-i", inp, 
+        "-f", "concat", "-safe", "0", "-i", lst, 
+        "-filter_complex", "[0:v][1:v]overlay=0:0:eof_action=pass[outv]", 
+        "-map", "[outv]", "-map", "0:a", 
+        "-c:v", "libx264", "-r", "30", "-preset", "ultrafast", "-c:a", "aac", out
+    ]
+    
+    res = subprocess.run(cmd_merge, capture_output=True, text=True)
+    if res.returncode != 0: raise Exception(f"Merge failed: {res.stderr}")
+    return f"/temp/{os.path.basename(out)}"
+
+@app.get("/")
+async def index(): return FileResponse("index.html")
+
+@app.get("/api/styles")
+def get_style_definitions():
+    return {
+        "styles": style_configs,
+        "templates": style_templates
+    }
+
+@app.get("/api/languages")
+def get_supported_languages():
+    return {
+        "default": DEFAULT_LANGUAGE,
+        "languages": [
+            {"code": code, "label": cfg["label"], "flag": cfg["flag"], "rtl": cfg["rtl"]}
+            for code, cfg in SUPPORTED_LANGUAGES.items()
+        ]
+    }
+
+def _hex_or_default(value, default):
+    """اعتبارسنجی ساده کد رنگ هگز؛ اگر نامعتبر بود مقدار پیش‌فرض امن برمی‌گردد."""
+    if isinstance(value, str) and re.fullmatch(r"#[0-9A-Fa-f]{6}", value.strip()):
+        return value.strip()
+    return default
+
+def _clamp_ai_design(raw: dict) -> dict:
+    """
+    هرچه هوش مصنوعی برگرداند، اینجا کاملاً کنترل و به مقادیر امن محدود (clamp) می‌شود
+    تا موتور رندر هیچ‌وقت با یک مقدار عجیب/خراب کرش نکند.
+    توجه: این استایل دیگر هیچ‌وقت کادر/باکس/پس‌زمینه دور کلمه نمی‌سازد؛ فقط
+    حرکت ورود/خروج و رنگ متن (و در صورت لزوم، درخشش نور) طراحی می‌شود.
+    برای فیلدهای نامعتبر/جاافتاده، به‌جای یک مقدار خنثی و همیشه‌یکسان، یک مقدار
+    تصادفی و چشمگیر انتخاب می‌شود تا حتی در بدترین حالت (خطای هوش مصنوعی) هم
+    خروجی «ساده و کسل‌کننده» به نظر نرسد.
+    """
+    if not isinstance(raw, dict):
+        raw = {}
+
+    entry_options = ["fall", "rise", "pop", "slide_left", "slide_right"]
+    exit_options = ["fade", "shrink", "fall", "rise"]
+    timing_options = ["elastic", "punch", "smooth"]
+    glow_options = ["soft", "strong", "none"]
+    valid_fonts = list(FONT_FILES_MAP.keys())
+    vivid_color_pairs = [
+        ("#FFFFFF", "#FFD700", "#7C4DFF"),
+        ("#FFFFFF", "#00E5FF", "#FF2D95"),
+        ("#F5F5F5", "#39FF14", "#8A2BE2"),
+        ("#FFFFFF", "#FF6EC7", "#00B3FF"),
+        ("#EAEAEA", "#FFEE58", "#FF3B30"),
+        ("#FFFFFF", "#00FFC6", "#FF5E00"),
+    ]
+
+    entry_options_full = {"fall", "rise", "pop", "slide_left", "slide_right", "fade"}
+    exit_options_full = {"fade", "shrink", "fall", "rise", "none"}
+    timing_options_full = {"elastic", "smooth", "punch", "linear"}
+    glow_options_full = {"none", "soft", "strong"}
+
+    entry = raw.get("entry") if raw.get("entry") in entry_options_full else random.choice(entry_options)
+    exit_type = raw.get("exit") if raw.get("exit") in exit_options_full else random.choice(exit_options)
+    timing = raw.get("timing") if raw.get("timing") in timing_options_full else random.choice(timing_options)
+    glow = raw.get("glow") if raw.get("glow") in glow_options_full else random.choice(glow_options)
+    font = raw.get("font") if raw.get("font") in valid_fonts else random.choice(valid_fonts)
+
+    try:
+        stagger = float(raw.get("stagger", 0.06))
+    except (TypeError, ValueError):
+        stagger = 0.06
+    stagger = max(0.0, min(0.12, stagger))
+    if stagger == 0.0 and "stagger" not in raw:
+        stagger = round(random.uniform(0.04, 0.09), 2)
+
+    try:
+        font_size = int(raw.get("fontSize", 60))
+    except (TypeError, ValueError):
+        font_size = 60
+    font_size = max(30, min(90, font_size))
+
+    fallback_primary, fallback_active, fallback_glow = random.choice(vivid_color_pairs)
+
+    return {
+        "entry": entry,
+        "exit": exit_type,
+        "timing": timing,
+        "stagger": stagger,
+        "glow": glow,
+        "primaryColor": _hex_or_default(raw.get("primaryColor"), fallback_primary),
+        "activeColor": _hex_or_default(raw.get("activeColor"), fallback_active),
+        "glowColor": _hex_or_default(raw.get("glowColor") or raw.get("shapeColor"), fallback_glow),
+        "font": font,
+        "fontSize": font_size,
+    }
+
+@app.post("/api/generate-style")
+def generate_style_api(req: StylePrompt):
+    if not API_KEYS: raise HTTPException(500, "API Keys Missing")
+    prompt = f"""شما یک طراح موشن‌گرافیک زیرنویس هستی. کار تو فقط طراحی «حرکت ورود کلمات» و «رنگ‌ها»ست — هیچ‌وقت دور متن یا دور کلمات کادر/باکس/حباب نمی‌سازی؛ فقط خود متن با یک انیمیشن و رنگ مشخص روی صحنه ظاهر می‌شود.
+
+توضیح کاربر: "{req.description}"
+
+قوانین جدی که باید دقیقاً رعایت کنی:
+1) مهم‌ترین قانون: هرچه کاربر برای «جهت حرکت» گفته را دقیقاً همان اجرا کن. مثلاً:
+   - «از بالا بیاد» یا «بریزه» → entry="fall"
+   - «از پایین بیاد» یا «بلند شه» → entry="rise"
+   - «از چپ بیاد» → entry="slide_left"
+   - «از راست بیاد» → entry="slide_right"
+   - «بپره تو» یا «پاپ‌آپ» → entry="pop"
+   اگر کاربر جهتی نگفت، بر اساس حس‌وحال کلی یک جهت مناسب انتخاب کن.
+2) رنگ: هرچه کاربر برای رنگ گفته را دقیقاً همان اجرا کن (مثلاً «قرمز» → یک قرمز واقعی مثل #FF3B30، «آبی» → یک آبی واقعی، «طلایی» → یک طلایی واقعی). اگر کاربر گفت «رنگ کل متن قرمز باشه» یعنی primaryColor باید قرمز باشد. اگر گفت «کلمه‌ای که گفته می‌شه فلان رنگ بشه» یعنی activeColor باید همان رنگ باشد. هرگز رنگ درخواستی کاربر را با یک رنگ «قشنگ‌تر» از نظر خودت جایگزین نکن.
+3) glow (درخشش نور اطراف متن) را فقط وقتی روشن کن که کاربر واقعاً به نور/نئون/درخشش اشاره کرده باشد یا حس‌وحال آن (نئون، درخشان، فانتزی) از توضیحش برمی‌آید؛ در غیر این صورت glow="none".
+4) اگر کلمه‌ای مثل «آبشاری»، «ریزان»، «موج» گفته شد: stagger را بالا (حدود 0.08 تا 0.12) بگذار.
+5) اگر کلمه‌ای مثل «فنری»، «پرشی»، «باحال» گفته شد: timing را "elastic" یا "punch" بگذار؛ برای حس آرام و ساده timing="smooth" یا "linear" بگذار.
+6) اگر کاربر توضیح ساده/مینیمالی داد (مثلاً «فقط متن سفید که آروم بیاد»)، رنگ‌ها را ساده نگه‌دار و glow="none" بگذار — زینت اضافه بدون درخواست کاربر اشتباه است.
+7) هیچ‌وقت shape/کادر/باکس/پس‌زمینه دور کلمه طراحی نکن؛ فقط حرکت و رنگ خود متن مهم است.
+
+فقط یک JSON با دقیقاً همین کلیدها برگردان (بدون هیچ توضیح اضافه، بدون Markdown):
+- entry: یکی از ["fall", "rise", "pop", "slide_left", "slide_right", "fade"]  (نحوه ورود هر کلمه به صحنه)
+- exit: یکی از ["fade", "shrink", "fall", "rise", "none"]  (نحوه خروج/فروکش هر کلمه بعد از گفته‌شدن)
+- timing: یکی از ["elastic", "smooth", "punch", "linear"]  (منحنی حرکت)
+- stagger: عددی بین 0 تا 0.12 (تاخیر آبشاری بین کلمات پشت‌سرهم؛ برای افکت آبشاری عدد بالاتر بده)
+- glow: یکی از ["none", "soft", "strong"]  (درخشش نور اطراف متن؛ فقط اگر کاربر خواسته)
+- primaryColor: کد رنگ هگز برای رنگ اصلی متن (دقیقاً مطابق درخواست کاربر)
+- activeColor: کد رنگ هگز برای کلمه‌ای که همین الان گفته می‌شود (دقیقاً مطابق درخواست کاربر)
+- glowColor: کد رنگ هگز برای نور اطراف متن (اگر glow فعال باشد)
+- font: یکی از {list(FONT_FILES_MAP.keys())}
+- fontSize: عددی بین 30 تا 90"""
+
+    last_error = None
+    for attempt in range(3): 
+        try:
+            genai.configure(api_key=random.choice(API_KEYS))
+            model = genai.GenerativeModel(MODEL_NAME)
+            res = model.generate_content(
+                prompt,
+                generation_config={
+                    "response_mime_type": "application/json",
+                    "temperature": 1.35,
+                    "top_p": 0.97,
+                }
+            )
+            data = json.loads(clean_json_response(res.text))
+            design = _clamp_ai_design(data)
+            return {"success": True, "design": design}
+        except Exception as e:
+            last_error = str(e)
+            print(f"⚠️ تلاش {attempt + 1} برای ساخت استایل هوشمند ناموفق بود: {last_error}")
+            continue
+    # در صورت شکست کامل هوش مصنوعی، یک طراحی امن و پیش‌فرض برگردانده می‌شود، ولی صادقانه اعلام می‌شود که موفق نبوده
+    print(f"❌ ساخت استایل هوشمند بعد از ۳ تلاش ناموفق ماند. آخرین خطا: {last_error}")
+    return {"success": False, "design": _clamp_ai_design({}), "error": last_error}
+
+# --- تابع ارسال فایل صوتی به Groq با پرامپت تقویت‌شده تکرارها (چندزبانه) ---
+async def transcribe_audio_via_groq(audio_path: str, language: str = "fa"):
+    global groq_key_index
+    if not GROQ_API_KEYS:
+        raise Exception("متغیر محیطی GROQ_API_KEYS در قسمت Secrets تنظیم نشده است.")
+    
+    lang_cfg = SUPPORTED_LANGUAGES.get(language, SUPPORTED_LANGUAGES[DEFAULT_LANGUAGE])
+    
+    # انتخاب چرخشی کلید
+    current_key = GROQ_API_KEYS[groq_key_index % len(GROQ_API_KEYS)]
+    groq_key_index += 1
+    
+    client = Groq(api_key=current_key)
+    
+    def call_groq():
+        with open(audio_path, "rb") as file:
+            return client.audio.transcriptions.create(
+                file=(os.path.basename(audio_path), file.read()),
+                model="whisper-large-v3",
+                response_format="verbose_json",
+                timestamp_granularities=["word", "segment"],
+                temperature=0.0,
+                language=lang_cfg["whisper_code"],
+                prompt=lang_cfg["prompt"]
+            )
+            
+    transcription = await asyncio.to_thread(call_groq)
+    return transcription
+
+# --- تابع بازگشتی هوشمند برای برش فایل‌های صوتی سنگین از نقاط سکوت (چندزبانه) ---
+async def transcribe_audio_recursive(audio_path: str, start_time_offset: float = 0.0, language: str = "fa") -> list:
+    file_size = os.path.getsize(audio_path)
+    MAX_SIZE = 24 * 1024 * 1024  # 24 MB محدودیت امن
+
+    if file_size <= MAX_SIZE:
+        transcription = await transcribe_audio_via_groq(audio_path, language)
+        
+        # ��ستخراج ساختار داده خروجی Groq
+        if hasattr(transcription, "model_dump"):
+            data = transcription.model_dump()
+        elif hasattr(transcription, "dict"):
+            data = transcription.dict()
+        elif isinstance(transcription, dict):
+            data = transcription
+        else:
+            try: data = dict(transcription)
+            except: data = {}
+            
+        raw_word_items = []
+        segments = data.get("segments", [])
+        words_list = data.get("words", [])
+        
+        if words_list:
+            raw_word_items = words_list
+        elif segments:
+            for seg in segments:
+                text_val = seg.get("text", "").strip()
+                if not text_val: continue
+                if "words" in seg and seg["words"]:
+                    raw_word_items.extend(seg["words"])
+                else:
+                    seg_start = float(seg.get("start", 0))
+                    seg_end = float(seg.get("end", 0))
+                    w_list = text_val.split()
+                    if w_list:
+                        duration = seg_end - seg_start
+                        word_duration = duration / max(1, len(w_list))
+                        for i, w_txt in enumerate(w_list):
+                            w_start_time = seg_start + (i * word_duration)
+                            raw_word_items.append({
+                                "word": w_txt,
+                                "start": round(w_start_time, 3),
+                                "end": round(w_start_time + word_duration, 3)
+                            })
+        
+        # اعمال آفست زمانی برای برش‌های بعدی که در جای درست قرار بگیرند
+        adjusted_words = []
+        for w in raw_word_items:
+            if not isinstance(w, dict):
+                word_text = getattr(w, "word", getattr(w, "text", ""))
+                word_start = float(getattr(w, "start", getattr(w, "start_time", 0)))
+                word_end = float(getattr(w, "end", getattr(w, "end_time", 0)))
+            else:
+                word_text = w.get("word", w.get("text", ""))
+                word_start = float(w.get("start", w.get("start_time", 0)))
+                word_end = float(w.get("end", w.get("end_time", 0)))
+            
+            adjusted_words.append({
+                "word": word_text,
+                "start": round(word_start + start_time_offset, 3),
+                "end": round(word_end + start_time_offset, 3)
+            })
+        return adjusted_words
+
+    else:
+        # فایل سنگین‌تر از حد مجاز است، باید برش بخورد
+        print(f"File size {file_size} > 24MB. Splitting audio...")
+        audio = await asyncio.to_thread(AudioSegment.from_mp3, audio_path)
+        mid_point_ms = len(audio) // 2
+
+        # جستجو برای پیدا کردن نقطه سکوت در محدوده 40% تا 60% فایل
+        search_start = int(len(audio) * 0.4)
+        search_end = int(len(audio) * 0.6)
+        search_chunk = audio[search_start:search_end]
+        
+        def find_silences():
+            # تشخیص سکوت (سکوت بالاتر از 500 میلی‌ثانیه با آستانه -40dB)
+            return detect_silence(search_chunk, min_silence_len=500, silence_thresh=-40)
+            
+        silences = await asyncio.to_thread(find_silences)
+        
+        if silences:
+            # انتخاب سکوتی که نزدیک‌ترین فاصله را به وسط بخش مورد جستجو دارد
+            best_silence = silences[len(silences)//2]
+            split_point_ms = search_start + (best_silence[0] + best_silence[1]) // 2
+        else:
+            # اگر هیچ سکوتی پیدا نشد، دقیقاً از وسط برش می‌زنیم
+            split_point_ms = mid_point_ms
+            
+        part1_path = audio_path.replace(".mp3", f"_part1_{int(time.time()*1000)}_{random.randint(100,999)}.mp3")
+        part2_path = audio_path.replace(".mp3", f"_part2_{int(time.time()*1000)}_{random.randint(100,999)}.mp3")
+        
+        def export_parts():
+            audio[:split_point_ms].export(part1_path, format="mp3", bitrate="64k")
+            audio[split_point_ms:].export(part2_path, format="mp3", bitrate="64k")
+            
+        await asyncio.to_thread(export_parts)
+        
+        # فراخوانی بازگشتی هوش مصنوعی برای هر دو قسمت
+        words1 = await transcribe_audio_recursive(part1_path, start_time_offset, language)
+        words2 = await transcribe_audio_recursive(part2_path, start_time_offset + (split_point_ms / 1000.0), language)
+        
+        # پاکسازی فایل‌های تکه‌تکه‌شده
+        try:
+            os.remove(part1_path)
+            os.remove(part2_path)
+        except Exception as e:
+            print(f"Cleanup error for split files: {e}")
+            
+        # تجمیع نتایج
+        return words1 + words2
+
+# --- پردازش مو��ت در صف پس‌زمینه (نسخه اصلاح شده بدون فیلتر متنی، چندزبانه و با پشتیبانی از فایل‌های سنگین) ---
+async def bg_process_upload(task_id: str, raw_path: str, fixed_path: str, audio_path: str, language: str = "fa"):
+    job = upload_jobs.get(task_id)
+    if not job:
+        return
+    
+    job.status = UploadJobStatus.PROCESSING
+    try:
+        # ۱. تبدیل ویدیوی خام به فرمت استاندارد 30fps h264
+        proc1 = await asyncio.create_subprocess_exec(
+            "ffmpeg", "-y", "-i", raw_path, "-r", "30", "-c:v", "libx264", 
+            "-preset", "ultrafast", "-c:a", "copy", fixed_path,
+            stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL
+        )
+        await proc1.communicate()
+        
+        w, h, total_duration = get_video_info(fixed_path)
+        
+        # ۲. استخراج مستقیم صدا به صورت MP3 با نرخ بیت 64k
+        proc2 = await asyncio.create_subprocess_exec(
+            "ffmpeg", "-y", "-i", fixed_path, "-vn", "-acodec", "libmp3lame", 
+            "-ar", "16000", "-ac", "1", "-b:a", "64k", audio_path,
+            stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL
+        )
+        await proc2.communicate()
+        
+        print(f"--- [BG Task {task_id}] Transcribing audio with Recursive Groq Logic (lang={language}) ---")
+        
+        # ۳. ارسال فایل صوتی به تابع هوشمند که فایل‌های سنگین را برش می‌دهد
+        raw_word_items = await transcribe_audio_recursive(audio_path, 0.0, language)
+        
+        # پاکسازی فایل‌های موقت پایه
+        if os.path.exists(audio_path):
+            try: os.remove(audio_path)
+            except: pass
+        if os.path.exists(raw_path):
+            try: os.remove(raw_path)
+            except: pass
+
+        if not raw_word_items:
+            job.status = UploadJobStatus.FAILED
+            job.error_message = "تبدیل گفتار به متن ناموفق بود. هیچ متنی در فایل شناسایی نشد."
+            return
+
+        # ۶. گروه‌بندی کلمات به صورت دسته‌های ۵ تایی استاندارد
+        final_segs = []
+        chunk_size = 5
+        for k in range(0, len(raw_word_items), chunk_size):
+            sub = raw_word_items[k:k+chunk_size]
+            if not sub: continue
+            sc_words = []
+            for w in sub:
+                sc_words.append({
+                    "word": w["word"],
+                    "start": round(w["start"], 3),
+                    "end": round(w["end"], 3),
+                    "highlight": False
+                })
+            
+            if sc_words:
+                final_segs.append({
+                    "start": sc_words[0]["start"],
+                    "end": sc_words[-1]["end"],
+                    "text": " ".join([x["word"] for x in sc_words]),
+                    "words": sc_words
+                })
+
+        lang_cfg = SUPPORTED_LANGUAGES.get(language, SUPPORTED_LANGUAGES[DEFAULT_LANGUAGE])
+        suggested_style = {"primaryColor": "#FFFFFF", "outlineColor": "#000000", "font": lang_cfg["default_font"], "fontSize": 60, "backType": "solid"}
+
+        job.result = {
+            "file_id": task_id,
+            "url": f"/temp/{task_id}.mp4",
+            "width": w,
+            "height": h,
+            "segments": final_segs,
+            "suggested_style": suggested_style,
+            "language": language
+        }
+        job.status = UploadJobStatus.COMPLETED
+
+    except Exception as e:
+        if os.path.exists(audio_path):
+            try: os.remove(audio_path)
+            except: pass
+        if os.path.exists(raw_path):
+            try: os.remove(raw_path)
+            except: pass
+        job.status = UploadJobStatus.FAILED
+        job.error_message = f"Processing Error: {str(e)}"
+
+@app.post("/api/upload")
+async def upload(background_tasks: BackgroundTasks, file: UploadFile = File(...), language: str = Form("fa")):
+    task_id = str(uuid.uuid4())[:8]
+    ext = file.filename.split('.')[-1]
+    raw_path = f"{TEMP_DIR}/{task_id}_raw.{ext}"
+    fixed_path = f"{TEMP_DIR}/{task_id}.mp4"
+    audio_path = f"{TEMP_DIR}/{task_id}.mp3"
+    lang = normalize_language(language)
+    
+    try:
+        with open(raw_path, "wb") as f:
+            shutil.copyfileobj(file.file, f)
+            
+        upload_jobs[task_id] = UploadJob(task_id, file.filename, lang)
+        
+        background_tasks.add_task(
+            bg_process_upload, task_id, raw_path, fixed_path, audio_path, lang
+        )
+        
+        return {"task_id": task_id, "status": UploadJobStatus.QUEUED, "language": lang}
+    except Exception as e:
+        if os.path.exists(raw_path):
+            try: os.remove(raw_path)
+            except: pass
+        raise HTTPException(500, f"Failed to queue upload task: {str(e)}")
+
+@app.get("/api/upload-status/{task_id}")
+async def get_upload_status(task_id: str):
+    job = upload_jobs.get(task_id)
+    if not job:
+        raise HTTPException(404, "Upload job not found")
+    
+    response = {"task_id": job.id, "status": job.status, "language": job.language}
+    if job.status == UploadJobStatus.COMPLETED:
+        response["result"] = job.result
+    elif job.status == UploadJobStatus.FAILED:
+        response["error"] = job.error_message
+    return response
+
+import glob
+
+@app.delete("/api/delete-project/{file_id}")
+async def delete_project_files(file_id: str):
+    if "/" in file_id or "\\" in file_id or ".." in file_id:
+        raise HTTPException(400, "Invalid file_id")
+    
+    raw_video_path = os.path.join(TEMP_DIR, f"{file_id}.mp4")
+    if os.path.exists(raw_video_path):
+        try: os.remove(raw_video_path)
+        except Exception as e: print(f"Error removing raw video: {e}")
+    
+    final_patterns = os.path.join(TEMP_DIR, f"{file_id}_final_*.mp4")
+    for f_path in glob.glob(final_patterns):
+        try: os.remove(f_path)
+        except Exception as e: print(f"Error removing final video {f_path}: {e}")
+    
+    return {"status": "success", "message": "Files deleted successfully"}
+
+@app.post("/api/reupload")
+async def reupload_video(file: UploadFile = File(...), file_id: str = Form(...)):
+    if not file_id or '/' in file_id or '\\' in file_id: raise HTTPException(400, "Invalid file_id")
+    target_path = os.path.join(TEMP_DIR, f"{file_id}.mp4")
+    try:
+        with open(target_path, "wb") as buffer: shutil.copyfileobj(file.file, buffer)
+    except Exception as e: raise HTTPException(500, f"Could not save file: {e}")
+    finally: await file.close()
+    return {"status": "success", "message": f"File {file_id}.mp4 restored."}
+
+@app.post("/api/enqueue-render")
+async def enqueue_render(req: ProcessRequest):
+    if not os.path.exists(os.path.join(TEMP_DIR, f"{req.file_id}.mp4")):
+        return JSONResponse(status_code=200, content={"error": "Video not found", "error_code": "VIDEO_NOT_FOUND"})
+    job_id = str(uuid.uuid4())
+    jobs_db[job_id] = Job(job_id, req)
+    await render_queue.put(job_id)
+    return {"job_id": job_id, "status": JobStatus.QUEUED}
+
+@app.get("/api/job-status/{job_id}")
+async def get_job_status(job_id: str):
+    job = jobs_db.get(job_id)
+    if not job: raise HTTPException(404, "Job not found")
+    response = {"job_id": job.id, "status": job.status}
+    if job.status == JobStatus.QUEUED:
+        response["queue_position"] = sum(1 for j in jobs_db.values() if j.status == JobStatus.QUEUED and j.created_at < job.created_at) + 1
+    elif job.status == JobStatus.COMPLETED: response["url"] = job.result_url # اصلاح نام متغیر COMPLETED به JobStatus.COMPLETED
+    elif job.status == JobStatus.FAILED: response["error"] = job.error_message
+    return response

index.html

@@ -0,0 +1,1376 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Subtitle Studio Pro</title>
+    <!-- لینک فونت‌ها -->
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lalezar&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <!-- لینک به فایل CSS -->
+    <link rel="stylesheet" href="/static/css/style.css">
+
+    <!-- استایل‌های اختصاصی باکس‌ها (به روز شده برای سایز جدید) -->
+    <style>
+    .box-style-preview {
+        background-color: #ffffff;
+        border-radius: 8px;
+        padding: 4px 8px; 
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 2px;
+        direction: rtl;
+        font-family: 'Vazirmatn';
+        font-weight: 900;
+        font-size: 0.75rem;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    .box-word { padding: 2px 4px; border-radius: 4px; transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); color: #d1d1d6; position: relative; z-index: 1; }
+    .box-word.past { color: #000000; }
+    .box-word.active { background-color: #1a1a1a; color: #ffffff; transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 2; }
+
+    /* استایل آلفا (به روز شده برای سایز جدید) */
+    .alpha-style-preview {
+        background-color: transparent; border-radius: 14px; padding: 5px; display: flex; align-items: center; justify-content: center; 
+        gap: 2px; 
+        direction: rtl; font-family: 'Vazirmatn'; font-weight: 900; font-size: 0.75rem; max-width: 100%; overflow: hidden; white-space: nowrap;
+    }
+    .alpha-word { padding: 2px 4px; border-radius: 8px; transition: all 0.25s; color: rgba(255, 255, 255, 0.35); background-color: transparent; position: relative; z-index: 1; }
+    .alpha-word.past { color: #ffffff; background-color: transparent; }
+    .alpha-word.active { background: linear-gradient(135deg, #7c4dff, #b388ff); color: #ffffff; transform: scale(1.1); z-index: 2; box-shadow: 0 4px 12px rgba(124, 77, 255, 0.4); }
+
+    /* --- استایل پیغام هوشمندانه هوش مصنوعی --- */
+    .coach-overlay {
+        position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(5px);
+        z-index: 9999; display: none; opacity: 0; transition: opacity 0.3s;
+    }
+    .coach-overlay.show { opacity: 1; }
+    
+    .coach-tooltip {
+        position: fixed; left: 50%; transform: translateX(-50%);
+        background: linear-gradient(145deg, #1e1e2e, #161622); border: 2px solid #7C4DFF;
+        border-radius: 24px; padding: 25px; width: 90%; max-width: 380px; text-align: center;
+        box-shadow: 0 20px 50px rgba(124, 77, 255, 0.5);
+        animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+        opacity: 0;
+        z-index: 10001;
+    }
+    
+    @keyframes popIn {
+        0% { opacity: 0; transform: translateX(-50%) scale(0.8) translateY(20px); }
+        100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
+    }
+    
+    .coach-icon {
+        width: 75px; height: 75px; background: linear-gradient(135deg, #FF0080, #7C4DFF);
+        border-radius: 50%; display: flex; align-items: center; justify-content: center;
+        font-size: 2.5rem; color: #fff; margin: -60px auto 15px auto;
+        box-shadow: 0 10px 20px rgba(124, 77, 255, 0.6); border: 4px solid #1e1e2e;
+    }
+    
+    .coach-title { font-size: 1.3rem; font-weight: 900; color: #fff; margin-bottom: 12px; }
+    .coach-text { font-size: 0.95rem; color: #e2e8f0; line-height: 1.7; margin-bottom: 25px; }
+    
+    .coach-btn {
+        background: linear-gradient(90deg, #7C4DFF, #00D7FF); border: none; padding: 15px 30px;
+        border-radius: 18px; color: #fff; font-size: 1.1rem; font-weight: bold; font-family: inherit;
+        cursor: pointer; box-shadow: 0 5px 20px rgba(0, 215, 255, 0.4); transition: transform 0.2s;
+        width: 100%;
+    }
+    .coach-btn:active { transform: scale(0.95); }
+    
+    .coach-arrow {
+        position: fixed; font-size: 2.5rem; color: #00D7FF; 
+        animation: bounceArrowDown 1.5s infinite;
+        filter: drop-shadow(0 0 15px rgba(0,215,255,0.9));
+        z-index: 10001;
+    }
+    
+    @keyframes bounceArrowDown {
+        0%, 100% { transform: translateX(-50%) translateY(0); }
+        50% { transform: translateX(-50%) translateY(-15px); }
+    }
+
+    .relative-z-coach { 
+        position: relative; 
+        z-index: 10000 !important; 
+        box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.8), 0 0 20px rgba(124, 77, 255, 0.8);
+        border-radius: 12px;
+        background: #2a2a2a !important;
+        transition: all 0.3s;
+    }
+
+    /* --- استایل‌های دکمه + (اضافه کردن کلمه) کاملاً جدا از کلمه --- */
+    .add-word-btn {
+        display: none; /* فقط وقتی کلمه قبلیش اکتیو هست دیده میشه */
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background: var(--chip-bg); /* همرنگ پس‌زمینه کلمات دیگر */
+        color: #aaa; /* همرنگ متن کلمات دیگر */
+        align-items: center;
+        justify-content: center;
+        font-size: 1.1rem;
+        margin-right: 8px; /* ایجاد فاصله از کلمه */
+        cursor: pointer;
+        transition: transform 0.2s;
+        z-index: 10;
+    }
+    .add-word-btn:active {
+        transform: scale(0.85);
+    }
+    /* نمایش دکمه بدون انیمیشن */
+    .word-chip.active + .add-word-btn {
+        display: flex;
+    }
+
+    /* استایل کلمات اضافه شده دستی (زیر کلمه) */
+    .word-chip.manual-word {
+        font-size: 0.8rem;
+        padding: 6px 12px;
+        background: rgba(124, 77, 255, 0.1);
+        border: 1px dashed #7C4DFF;
+        color: #ddd;
+    }
+    .word-chip.manual-word.active {
+        background: var(--primary);
+        border: 1px solid #fff;
+        color: #fff;
+        font-weight: bold;
+    }
+    </style>
+</head>
+<body>
+
+<!-- Toast -->
+<div id="toastNotification" class="toast-notification">
+  <i class="fa-solid fa-circle-check"></i>
+  <span>این رنگ در حافظه رنگ ها ذخیره شد</span>
+</div>
+
+<!-- شیت انتخاب زبان زیرنویس -->
+<div class="action-sheet-overlay" id="languageSheetOverlay" onclick="closeLanguageSheet()">
+    <div class="action-sheet lang-sheet" id="languageSheet" onclick="event.stopPropagation()">
+        <div class="sheet-title-main">زبان زیرنویس را انتخاب کنید</div>
+        <p class="lang-sheet-hint">هوش مصنوعی زیرنویس را دقیقاً به همین زبان تولید می‌کند</p>
+        <div class="lang-list" id="languageList"></div>
+    </div>
+</div>
+
+<!-- کارت تایید پیش از آپلود (انتخاب ویدیو + انتخاب زبان + شروع آپلود) -->
+<div class="pre-upload-overlay" id="preUploadOverlay">
+    <div class="pre-upload-card">
+        <button class="pre-upload-close" onclick="cancelPreUpload()"><i class="fa-solid fa-xmark"></i></button>
+        <div class="pre-upload-icon"><i class="fa-solid fa-clapperboard"></i></div>
+        <div class="pre-upload-filename" id="preUploadFileName">video.mp4</div>
+        <div class="pre-upload-filesize" id="preUploadFileSize">۰ مگابایت</div>
+
+        <div class="pre-upload-lang-row">
+            <span class="pre-upload-lang-label"><i class="fa-solid fa-language"></i> زبان زیرنویس</span>
+            <button class="lang-pill" id="langPillBtn" onclick="openLanguageSheet()">
+                <span id="langPillFlag">🇮🇷</span> <span id="langPillLabel">فارسی</span>
+                <i class="fa-solid fa-chevron-down"></i>
+            </button>
+        </div>
+
+        <button class="btn-start-upload" onclick="confirmStartUpload()">
+            <i class="fa-solid fa-wand-magic-sparkles"></i> شروع آپلود و تولید زیرنویس
+        </button>
+    </div>
+</div>
+
+<!-- اینپوت فایل مخفی (برای آپلود) -->
+<input type="file" id="fileIn" hidden accept="video/*" onchange="onVideoFileChosen()">
+
+<!-- مدال تغییر نام (پروژه) -->
+<div id="renameModal" class="modal-overlay">
+    <div class="modal-box">
+        <div class="modal-title">تغییر نام پروژه</div>
+        <input type="text" id="renameInput" class="input-field" placeholder="نام جدید را وارد کنید">
+        <div class="modal-actions">
+            <button class="modal-btn btn-confirm" onclick="saveRename()">ذخیره</button>
+            <button class="modal-btn btn-cancel" onclick="closeRenameModal()">لغو</button>
+        </div>
+    </div>
+</div>
+
+<!-- مدال اضافه کردن کلمه جدید دستی -->
+<div id="addWordModal" class="modal-overlay">
+    <div class="modal-box">
+        <div class="modal-icon" style="color: #00D7FF;"><i class="fa-solid fa-keyboard"></i></div>
+        <div class="modal-title">اضافه کردن کلمه جدید</div>
+        <div class="modal-desc">کلمه جدید دقیقاً بعد از کلمه انتخاب شده اضافه می‌شود و زمان‌بندی به صورت خودکار محاسبه می‌گردد.</div>
+        <input type="text" id="newWordInput" class="input-field" placeholder="کلمه را تایپ کنید...">
+        <div class="modal-actions">
+            <button class="modal-btn btn-confirm" style="background: #00D7FF; color: #000;" onclick="confirmAddWord()">اضافه کن</button>
+            <button class="modal-btn btn-cancel" onclick="closeAddWordModal()">انصراف</button>
+        </div>
+    </div>
+</div>
+
+<!-- مدال تایید (عمومی) -->
+<div id="confirmationModal" class="modal-overlay">
+    <div class="modal-box">
+        <div id="confirmIcon" class="modal-icon"><i class="fa-solid fa-question-circle"></i></div>
+        <div id="confirmTitle" class="modal-title">آیا مطمئن هستید؟</div>
+        <div id="confirmDesc" class="modal-desc">این عمل غیرقابل بازگشت است.</div>
+        <div class="modal-actions">
+            <button id="confirmBtn" class="modal-btn btn-confirm-action">بله</button>
+            <button class="modal-btn btn-cancel" onclick="closeConfirmationModal()">انصراف</button>
+        </div>
+    </div>
+</div>
+
+<!-- منوی مدیریت پروژه (پایین صفحه) -->
+<div class="action-sheet-overlay" id="projectActionOverlay" onclick="closeActionSheet()">
+    <div class="action-sheet" id="projectActionSheet" onclick="event.stopPropagation()">
+        <div class="sheet-title-main">مدیریت پروژه</div>
+        <button class="sheet-btn" onclick="openRenameModal()">
+            <i class="fa-solid fa-pen"></i> تغییر نام
+        </button>
+        <button class="sheet-btn delete-btn" onclick="openDeleteConfirmation()">
+            <i class="fa-solid fa-trash-can"></i> حذف پروژه
+        </button>
+    </div>
+</div>
+
+<!-- صفحه خانه -->
+<div id="homeScreen">
+    <div class="home-header">پروژه‌های من</div>
+    <div id="noProjectsPlaceholder" style="display: none;">
+        <div class="placeholder-icon"><i class="fa-solid fa-film"></i></div>
+        <div class="placeholder-text">هنوز پروژه‌ای ساخته نشده!</div>
+        <p style="color:#555; font-size: 0.9rem; margin-top:10px;">برای شروع، روی دکمه "ایجاد پروژه" بزنید</p>
+    </div>
+    <div class="projects-grid" id="projectsGrid"></div>
+    <button class="fab-add" onclick="document.getElementById('fileIn').click()">
+        <i class="fa-solid fa-plus-circle"></i> انتخاب ویدیو
+    </button>
+</div>
+
+<!-- بخش ادیتور -->
+<div id="editorScreen">
+    <div class="top-bar">
+        <button class="btn-home" onclick="goHome()">
+            <i class="fa-solid fa-arrow-right"></i>
+        </button>
+        <div style="font-weight:bold" id="currentProjectTitle">پروژه</div>
+        <button class="btn-exp" onclick="render()" style="padding: 8px 20px; font-size: 0.9rem;">خروجی نهایی <i class="fa-solid fa-chevron-left"></i></button>
+    </div>
+
+    <div id="workspace">
+        <div id="scaler">
+            <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>
+        </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>
+        <button class="tool-btn" onclick="toggleTool('font')" id="btn-font"><i class="fa-solid fa-sliders"></i><span>تنظیمات</span></button>
+        <button class="tool-btn" onclick="toggleTool('text')" id="btn-text"><i class="fa-solid fa-pen-to-square"></i><span>متن</span></button>
+    </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 class="custom-style-container" id="customAccordion" onclick="toggleCustomAccordion()">
+                <div class="custom-header">
+                    <div class="custom-header-title">
+                        <i class="fa-solid fa-sliders"></i> استایل اختصاصی
+                    </div>
+                    <i class="fa-solid fa-chevron-down toggle-icon"></i>
+                </div>
+                
+                <div class="custom-content" onclick="event.stopPropagation()">
+                    <label>نوع نمایش:</label>
+                    <div class="style-grid-2col" style="margin-bottom: 25px;">
+                        <div class="style-card" onclick="activateCustomStyle(); setStylePreset('classic', this)" ondblclick="handleClassicDoubleClick(this)" style="background:rgba(0,0,0,0.3); min-height: 100px; aspect-ratio: auto;">
+                            <div style="font-weight:bold; font-size:1rem; color:#fff;">ساده</div>
+                            <div style="color:#ccc; font-size:0.8rem;">کلاسیک</div>
+                        </div>
+                        <div class="style-card" onclick="activateCustomStyle(); setStylePreset('progressive_write', this)" style="background:rgba(0,0,0,0.3); min-height: 100px; aspect-ratio: auto;">
+                            <div style="font-weight:bold; font-size:1rem; color:#fff;">کلمه به کلمه</div>
+                            <div style="color:#ccc; font-size:0.8rem;">تایپ تدریجی</div>
+                        </div>
+                    </div>
+
+                    <div class="color-trigger-row">
+                      <div class="color-trigger" onclick="openColorPicker('main', event)">
+                        <span class="color-label">رنگ متن</span>
+                        <div class="color-preview-circle" id="preview-main-btn" style="background-color:#ffffff;"></div>
+                      </div>
+                      <div class="color-trigger" onclick="openColorPicker('bg', event)">
+                        <span class="color-label">رنگ حاشیه</span>
+                        <div class="color-preview-circle" id="preview-bg-btn" style="background-color:#000000;"></div>
+                      </div>
+                    </div>
+
+                    <div class="row" style="display:flex; gap:10px;">
+                        <button class="btn-exp mode-btn active" onclick="activateCustomStyle(); setMode('solid')">کادر پر</button>
+                        <button class="btn-exp mode-btn" onclick="activateCustomStyle(); setMode('transparent')">شیشه‌ای</button>
+                        <button class="btn-exp mode-btn" onclick="activateCustomStyle(); setMode('outline')">فقط دورخط</button>
+                    </div>
+                </div>
+            </div>
+            
+            <div style="border-top:1px solid #333; margin: 20px 0 15px 0;"></div>
+            <p style="color:#888; font-size:0.85rem; margin-bottom:15px;">قالب‌های آماده هوشمند:</p>
+
+            <div class="style-grid">
+                
+                <!-- ردیف ۱ راست: نئون آلفا -->
+                <div class="style-card selected" onclick="setStylePreset('alpha_gradient', this)">
+                    <div class="alpha-style-preview demo-row" id="animPreviewAlpha">
+                        <span class="alpha-word" data-dw="0">سلام</span>
+                        <span class="alpha-word" data-dw="1">اینجا</span>
+                        <span class="alpha-word" data-dw="2">آلفا</span>
+                        <span class="alpha-word" data-dw="3">است</span>
+                    </div>
+                    <div class="card-info">
+                        <div class="card-title-style">نئون آلفا</div>
+                    </div>
+                </div>
+
+                <!-- ردیف ۱ چپ: موزیک پلیر -->
+                <div class="style-card" onclick="setStylePreset('music_player', this)">
+                    <div class="music-style-preview" style="height: auto; width:100%; display: flex; align-items: center; justify-content: center; background: transparent;">
+                        <div style="background: #ffffff; padding: 4px 15px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); color: #000000; font-weight: 900; font-size: 0.7rem; font-family: 'Vazirmatn';">
+                            <span class="demo-full">سلام اینجا آلفا است</span>
+                        </div>
+                    </div>
+                    <div class="card-info">
+                        <div class="card-title-style">موزیک پلیر</div>
+                    </div>
+                </div>
+
+                <!-- ردیف ۲ راست: باکس متحرک -->
+                <div class="style-card" onclick="setStylePreset('instagram_box', this)">
+                    <div class="box-style-preview demo-row" id="animPreviewBox">
+                        <span class="box-word" data-dw="0">سلام</span>
+                        <span class="box-word" data-dw="1">اینجا</span>
+                        <span class="box-word" data-dw="2">آلفا</span>
+                        <span class="box-word" data-dw="3">است</span>
+                    </div>
+                    <div class="card-info">
+                        <div class="card-title-style">باکس متحرک</div>
+                    </div>
+                </div>
+
+                <!-- ردیف ۲ چپ: کارائوکه رنگی -->
+                <div class="style-card" onclick="setStylePreset('karaoke_static', this)">
+                    <div class="anim-box demo-row" id="animPreviewStatic">
+                        <span class="anim-word static-anim" data-dw="0">سلام</span>
+                        <span class="anim-word static-anim" data-dw="1">اینجا</span>
+                        <span class="anim-word static-anim" data-dw="2">آلفا</span>
+                        <span class="anim-word static-anim" data-dw="3">است</span>
+                    </div>
+                    <div class="card-info">
+                        <div class="card-title-style">کارائوکه رنگی</div>
+                    </div>
+                </div>
+
+                <!-- ردیف ۳ راست: هایلایت آبی -->
+                <div class="style-card" onclick="setStylePreset('auto_director', this)">
+                    <div class="anim-box demo-row">
+                        <span class="anim-word" data-dw="0" style="color:#00D7FF; text-shadow:0 0 10px rgba(0, 215, 255, 0.6);">سلام</span>
+                        <span class="anim-word" data-dw-range="1-3">اینجا آلفا است</span>
+                    </div>
+                    <div class="card-info">
+                        <div class="card-title-style">هایلایت آبی</div>
+                    </div>
+                </div>
+
+                <!-- ردیف ۳ چپ: سفید مینیمال -->
+                <div class="style-card" onclick="setStylePreset('plain_white', this)">
+                    <div class="demo-full" style="font-size:0.9rem; color:#fff; font-weight:900; white-space:nowrap;">سلام اینجا آلفا است</div>
+                    <div class="card-info">
+                        <div class="card-title-style">سفید مینیمال</div>
+                    </div>
+                </div>
+
+                <!-- ردیف ۴: حاشیه مشکی -->
+                <div class="style-card" onclick="setStylePreset('white_outline', this)">
+                    <div class="demo-full" style="font-size:0.9rem; color:#fff; font-weight:900; -webkit-text-stroke: 0.8px #000; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); white-space:nowrap;">سلام اینجا آلفا است</div>
+                    <div class="card-info">
+                        <div class="card-title-style">حاشیه مشکی</div>
+                    </div>
+                </div>
+
+                <!-- استایل جدید: نوار ساده -->
+                <div class="style-card" onclick="setStylePreset('simple_bar', this)">
+                    <div style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;">
+                        <div style="width: 60%; height: 4px; background: #fff; border-radius: 2px; position: relative;">
+                            <div style="width: 50%; height: 6px; background: #FDD835; position: absolute; top: -1px; left: 0; border-radius: 2px; box-shadow: 0 0 5px rgba(253,216,53,0.5);"></div>
+                        </div>
+                        <div class="demo-full" style="background: rgba(255,255,255,0.2); border-radius: 8px; padding: 4px 10px; font-size: 0.7rem; color: #fff; font-weight: bold;">
+                            سلام اینجا آلفا است
+                        </div>
+                    </div>
+                    <div class="card-info">
+                        <div class="card-title-style">نوار ساده</div>
+                    </div>
+                </div>
+              
+                <!-- استایل جدید: لبه‌های تیره -->
+                <div class="style-card" onclick="setStylePreset('dark_edges', this)">
+                    <div class="demo-full" style="
+                        color: #fff;
+                        font-weight: 900;
+                        font-size: 0.75rem;
+                        padding: 5px 12px;
+                        border-radius: 8px;
+                        background: linear-gradient(to left, rgba(0,0,0,0.8) 0%, transparent 50%, rgba(0,0,0,0.8) 100%), #AA00FF;
+                        border: 1px solid rgba(255, 255, 255, 0.2);
+                        white-space: nowrap;
+                    ">
+                        سلام اینجا آلفا است 
+                    </div>
+                    <div class="card-info">
+                        <div class="card-title-style">آبی نئون</div>
+                    </div>
+                </div>
+
+                <!-- استایل جدید: ابر نئونی -->
+                <div class="style-card" onclick="setStylePreset('blue_cloud', this)">
+                    <div class="demo-full" style="
+                        background: transparent; /* حذف کادر سیاه و شفاف‌سازی پس‌زمینه */
+                        padding: 6px 12px;
+                        color: #00b4ff;
+                        font-family: 'Sarbaz', sans-serif; /* هماهنگ کردن فونت پیش‌فرض به سرباز */
+                        font-weight: 900;
+                        font-size: 0.9rem;
+                        -webkit-text-stroke: 0.5px #ffffff;
+                        text-shadow: 0 0 10px rgba(0, 162, 255, 0.9);
+                        white-space: nowrap;
+                    ">سلام اینجا آلفا است</div>
+                    <div class="card-info">
+                        <div class="card-title-style">ابر نئونی</div> <!-- تغییر نام به عنوان شکیل‌تر -->
+                    </div>
+                </div>
+
+                <!-- استایل جدید: آبی دورسفید (بدون ابر) -->
+                <div class="style-card" onclick="setStylePreset('blue_outline', this)">
+                    <div class="demo-full" style="
+                        background: transparent;
+                        padding: 6px 12px;
+                        color: #0000FF;
+                        font-family: 'Sarbaz', sans-serif;
+                        font-weight: 900;
+                        font-size: 0.9rem;
+                        -webkit-text-stroke: 1.3px #ffffff;
+                        paint-order: stroke fill;
+                        -webkit-paint-order: stroke fill;
+                        white-space: nowrap;
+                    ">سلام اینجا آلفا است</div>
+                    <div class="card-info">
+                        <div class="card-title-style">حاشیه سفید</div>
+                    </div>
+                </div>
+
+                <!-- استایل جدید: پاپ‌آپ فنری -->
+                <div class="style-card" onclick="setStylePreset('spring_popup', this)">
+                    <div class="demo-row" style="display: flex; gap: 4px; justify-content: center; align-items: center; background: transparent; width: 100%; height: 35px; direction: rtl; font-family: 'Vazirmatn', sans-serif;">
+                        <span data-dw="0" style="font-weight: 900; font-size: 0.75rem; color: rgba(255, 255, 255, 0.35);">سلام</span>
+                        <span data-dw="1" style="font-weight: 900; font-size: 0.8rem; color: #ffffff;">اینجا</span>
+                        <span data-dw="2" style="font-weight: 900; font-size: 0.75rem; color: rgba(255, 255, 255, 0.35);">آلفا</span>
+                        <span data-dw="3" style="font-weight: 900; font-size: 0.75rem; color: rgba(255, 255, 255, 0.35);">است</span>
+                    </div>
+                    <div class="card-info">
+                        <div class="card-title-style">پاپ‌آپ فنری</div>
+                    </div>
+                </div>
+
+                <!-- استایل جدید: ریزان ساده (بدون کادر) -->
+                <div class="style-card" onclick="setStylePreset('falling_plain', this)">
+                    <div class="demo-row" style="display: flex; gap: 4px; justify-content: center; align-items: center; background: transparent; width: 100%; height: 35px; direction: rtl; font-family: 'Vazirmatn', sans-serif;">
+                        <span class="fpl-anim fpl-1" data-dw="0" style="font-weight: 900; font-size: 0.75rem;">سلام</span>
+                        <span class="fpl-anim fpl-2" data-dw="1" style="font-weight: 900; font-size: 0.75rem;">اینجا</span>
+                        <span class="fpl-anim fpl-3" data-dw="2" style="font-weight: 900; font-size: 0.75rem;">آلفا</span>
+                        <span class="fpl-anim fpl-4" data-dw="3" style="font-weight: 900; font-size: 0.75rem;">است</span>
+                    </div>
+                    <style>
+                        .fpl-anim { display: inline-block; opacity: 0; transform: translateY(-15px); color: #fff; }
+                        .fpl-1 { animation: fplDrop1 4s infinite; }
+                        .fpl-2 { animation: fplDrop2 4s infinite; }
+                        .fpl-3 { animation: fplDrop3 4s infinite; }
+                        .fpl-4 { animation: fplDrop4 4s infinite; }
+
+                        @keyframes fplDrop1 {
+                            0% { opacity: 0; transform: translateY(-15px); color: #FFEB3B; }
+                            10%, 20% { opacity: 1; transform: translateY(0); color: #FFEB3B; }
+                            21%, 85% { opacity: 1; transform: translateY(0); color: #fff; }
+                            86%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                        @keyframes fplDrop2 {
+                            0%, 20% { opacity: 0; transform: translateY(-15px); color: #FFEB3B; }
+                            30%, 40% { opacity: 1; transform: translateY(0); color: #FFEB3B; }
+                            41%, 85% { opacity: 1; transform: translateY(0); color: #fff; }
+                            86%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                        @keyframes fplDrop3 {
+                            0%, 40% { opacity: 0; transform: translateY(-15px); color: #FFEB3B; }
+                            50%, 60% { opacity: 1; transform: translateY(0); color: #FFEB3B; }
+                            61%, 85% { opacity: 1; transform: translateY(0); color: #fff; }
+                            86%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                        @keyframes fplDrop4 {
+                            0%, 60% { opacity: 0; transform: translateY(-15px); color: #FFEB3B; }
+                            70%, 85% { opacity: 1; transform: translateY(0); color: #FFEB3B; }
+                            86%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                    </style>
+                    <div class="card-info">
+                        <div class="card-title-style">ریزان ساده</div>
+                    </div>
+                </div>
+              
+                <!-- استایل جدید: کلمات ریزان (نسخه با کلمه فعال) -->
+              
+                <!-- استایل جدید: کلمات ریزان (نسخه با کلمه فعال) -->
+                <div class="style-card" onclick="setStylePreset('falling_words', this)">
+                    <div class="demo-row" style="background-color: #F77D57; padding: 6px 14px; border-radius: 12px; direction: rtl; font-family: 'Vazirmatn'; font-weight: 900; font-size: 0.75rem; color: #fff; display: flex; gap: 4px; min-width: 100px; justify-content: center;">
+                        <span class="fw-anim fw-1" data-dw="0">سلام</span>
+                        <span class="fw-anim fw-2" data-dw="1">اینجا</span>
+                        <span class="fw-anim fw-3" data-dw="2">آلفا</span>
+                        <span class="fw-anim fw-4" data-dw="3">است</span>
+                    </div>
+                    <style>
+                        .fw-anim { display: inline-block; opacity: 0; transform: translateY(-15px); color: #fff; }
+                        
+                        .fw-1 { animation: fwDrop1 4s infinite; }
+                        .fw-2 { animation: fwDrop2 4s infinite; }
+                        .fw-3 { animation: fwDrop3 4s infinite; }
+                        .fw-4 { animation: fwDrop4 4s infinite; }
+
+                        @keyframes fwDrop1 {
+                            0% { opacity: 0; transform: translateY(-15px); color: #FFEB3B; }
+                            10%, 20% { opacity: 1; transform: translateY(0); color: #FFEB3B; }
+                            21%, 85% { opacity: 1; transform: translateY(0); color: #fff; }
+                            86%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                        @keyframes fwDrop2 {
+                            0%, 20% { opacity: 0; transform: translateY(-15px); color: #FFEB3B; }
+                            30%, 40% { opacity: 1; transform: translateY(0); color: #FFEB3B; }
+                            41%, 85% { opacity: 1; transform: translateY(0); color: #fff; }
+                            86%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                        @keyframes fwDrop3 {
+                            0%, 40% { opacity: 0; transform: translateY(-15px); color: #FFEB3B; }
+                            50%, 60% { opacity: 1; transform: translateY(0); color: #FFEB3B; }
+                            61%, 85% { opacity: 1; transform: translateY(0); color: #fff; }
+                            86%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                        @keyframes fwDrop4 {
+                            0%, 60% { opacity: 0; transform: translateY(-15px); color: #FFEB3B; }
+                            70%, 85% { opacity: 1; transform: translateY(0); color: #FFEB3B; }
+                            86%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                    </style>
+                    <div class="card-info">
+                        <div class="card-title-style">کلمات ریزان</div>
+                    </div>
+                </div>
+
+                <!-- استایل جدید: کادر حاشیه قرمز -->
+                <div class="style-card" onclick="setStylePreset('red_outline_box', this)">
+                    <div class="demo-row" style="background-color: #F77D57; padding: 6px 14px; border-radius: 12px; direction: rtl; font-family: 'Vazirmatn'; font-weight: 900; font-size: 0.75rem; color: #fff; display: flex; gap: 4px; min-width: 100px; justify-content: center; -webkit-text-stroke: 1px #ff0000; paint-order: stroke fill;">
+                        <span data-dw="0">سلام</span>
+                        <span data-dw="1">اینجا</span>
+                        <span data-dw="2">آلفا</span>
+                        <span data-dw="3">است</span>
+                    </div>
+                    <div class="card-info">
+                        <div class="card-title-style">حاشیه قرمز</div>
+                    </div>
+                </div>
+
+                <!-- استایل جدید: کارائوکه ریزان (Falling Karaoke) -->
+                <div class="style-card" onclick="setStylePreset('falling_karaoke', this)">
+                    <div class="demo-row" style="display: flex; gap: 2px; justify-content: center; width: 100%; direction: rtl;">
+                        <span class="fk-prev-word fkw-1"><span class="fk-prev-text" data-dw="0">سلام</span></span>
+                        <span class="fk-prev-word fkw-2"><span class="fk-prev-text" data-dw="1">اینجا</span></span>
+                        <span class="fk-prev-word fkw-3"><span class="fk-prev-text" data-dw="2">آلفا</span></span>
+                        <span class="fk-prev-word fkw-4"><span class="fk-prev-text" data-dw="3">است</span></span>
+                    </div>
+                    <style>
+                        .fk-prev-word {
+                            position: relative;
+                            display: inline-block;
+                            padding: 2px 5px;
+                            border-radius: 6px;
+                            font-weight: 900;
+                            font-family: 'Vazirmatn', sans-serif;
+                            font-size: 0.75rem;
+                            color: #fff;
+                            z-index: 1;
+                        }
+                        .fk-prev-word::before {
+                            content: '';
+                            position: absolute;
+                            inset: 0;
+                            background: #F77D57;
+                            border-radius: 6px;
+                            z-index: -1;
+                            opacity: 0;
+                        }
+                        .fk-prev-text {
+                            display: inline-block;
+                            opacity: 0;
+                            transform: translateY(-15px);
+                        }
+
+                        /* اتصال انیمیشن‌ها به ترتیب */
+                        .fkw-1 .fk-prev-text { animation: fkText1 4s infinite; }
+                        .fkw-1::before { animation: fkBg1 4s infinite; }
+                        .fkw-2 .fk-prev-text { animation: fkText2 4s infinite; }
+                        .fkw-2::before { animation: fkBg2 4s infinite; }
+                        .fkw-3 .fk-prev-text { animation: fkText3 4s infinite; }
+                        .fkw-3::before { animation: fkBg3 4s infinite; }
+                        .fkw-4 .fk-prev-text { animation: fkText4 4s infinite; }
+                        .fkw-4::before { animation: fkBg4 4s infinite; }
+
+                        /* انیمیشن سقوط کلمات */
+                        @keyframes fkText1 {
+                            0%, 5% { opacity: 0; transform: translateY(-15px); }
+                            10%, 90% { opacity: 1; transform: translateY(0); }
+                            95%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                        @keyframes fkText2 {
+                            0%, 25% { opacity: 0; transform: translateY(-15px); }
+                            30%, 90% { opacity: 1; transform: translateY(0); }
+                            95%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                        @keyframes fkText3 {
+                            0%, 50% { opacity: 0; transform: translateY(-15px); }
+                            55%, 90% { opacity: 1; transform: translateY(0); }
+                            95%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+                        @keyframes fkText4 {
+                            0%, 75% { opacity: 0; transform: translateY(-15px); }
+                            80%, 90% { opacity: 1; transform: translateY(0); }
+                            95%, 100% { opacity: 0; transform: translateY(0); }
+                        }
+
+                        /* انیمیشن کادر پشت کلمات (حالت آمپولی) */
+                        @keyframes fkBg1 {
+                            0%, 5% { opacity: 0; }
+                            10%, 25% { opacity: 1; }
+                            30%, 100% { opacity: 0; }
+                        }
+                        @keyframes fkBg2 {
+                            0%, 25% { opacity: 0; }
+                            30%, 50% { opacity: 1; }
+                            55%, 100% { opacity: 0; }
+                        }
+                        @keyframes fkBg3 {
+                            0%, 50% { opacity: 0; }
+                            55%, 75% { opacity: 1; }
+                            80%, 100% { opacity: 0; }
+                        }
+                        @keyframes fkBg4 {
+                            0%, 75% { opacity: 0; }
+                            80%, 90% { opacity: 1; }
+                            95%, 100% { opacity: 0; }
+                        }
+                    </style>
+                    <div class="card-info">
+                        <div class="card-title-style">کارائوکه ریزان</div>
+                    </div>
+                </div>
+
+                <!-- ===== ۱۰ استایل آماده جدید ===== -->
+
+                <!-- حباب نرم درخشان -->
+                <div class="style-card" onclick="setStylePreset('soft_glow_pill', this)">
+                    <div class="demo-row" style="display:flex; gap:6px; justify-content:center; align-items:center; direction:rtl;">
+                        <span data-dw="0" style="font-weight:900; font-size:0.75rem; color:#fff;">سلام</span>
+                        <span data-dw="1" style="font-weight:900; font-size:0.8rem; color:#fff; background:#7C4DFF; border-radius:999px; padding:2px 10px; box-shadow:0 0 10px #7C4DFF;">اینجا</span>
+                        <span data-dw="2" style="font-weight:900; font-size:0.75rem; color:#fff;">آلفا</span>
+                    </div>
+                    <div class="card-info"><div class="card-title-style">حباب نرم درخشان</div></div>
+                </div>
+
+                <!-- حباب کمیک -->
+                <div class="style-card" onclick="setStylePreset('comic_bubble', this)">
+                    <div class="demo-row" style="display:flex; gap:6px; justify-content:center; align-items:center; direction:rtl;">
+                        <span data-dw="0" style="font-weight:900; font-size:0.75rem; color:#111; background:#fff; border:2.5px solid #111; border-radius:8px; padding:1px 8px;">سلام</span>
+                        <span data-dw="1" style="font-weight:900; font-size:0.8rem; color:#fff; background:#FF3B30; border:2.5px solid #111; border-radius:8px; padding:1px 8px;">اینجا</span>
+                        <span data-dw="2" style="font-weight:900; font-size:0.75rem; color:#111; background:#fff; border:2.5px solid #111; border-radius:8px; padding:1px 8px;">آلفا</span>
+                    </div>
+                    <div class="card-info"><div class="card-title-style">حباب کمیک</div></div>
+                </div>
+
+                <!-- هایلایت ماژیک -->
+                <div class="style-card" onclick="setStylePreset('handwritten_marker', this)">
+                    <div class="demo-full" style="font-size:0.9rem; color:#fff; font-weight:900; white-space:nowrap; background:linear-gradient(180deg, transparent 55%, #7C4DFF 55%, #7C4DFF 90%, transparent 90%); padding:0 4px;">سلام اینجا آلفا است</div>
+                    <div class="card-info"><div class="card-title-style">هایلایت ماژیک</div></div>
+                </div>
+
+                <!-- ضربه‌ای بولد -->
+                <div class="style-card" onclick="setStylePreset('bold_caps_impact', this)">
+                    <div class="demo-full" style="font-size:1rem; color:#fff; font-weight:900; -webkit-text-stroke:1.5px #000; white-space:nowrap;">سلام اینجا آلفا است</div>
+                    <div class="card-info"><div class="card-title-style">ضربه‌ای بولد</div></div>
+                </div>
+
+                <!-- گزارش ورزشی -->
+                <div class="style-card" onclick="setStylePreset('sport_lower_third', this)">
+                    <div class="demo-row" style="display:flex; gap:2px; justify-content:center; align-items:center; direction:rtl;">
+                        <span data-dw="0" style="font-weight:900; font-size:0.75rem; color:#fff; background:#FF3B30; padding:2px 8px;">سلام</span>
+                        <span data-dw="1" style="font-weight:900; font-size:0.75rem; color:#fff; background:#007AFF; padding:2px 8px;">اینجا</span>
+                        <span data-dw="2" style="font-weight:900; font-size:0.75rem; color:#fff; background:#34C759; padding:2px 8px;">آلفا</span>
+                    </div>
+                    <div class="card-info"><div class="card-title-style">گزارش ورزشی</div></div>
+                </div>
+
+                <!-- گلیچ رترو -->
+                <div class="style-card" onclick="setStylePreset('retro_vhs_glitch', this)">
+                    <div class="demo-full" style="font-size:0.9rem; color:#fff; font-weight:900; white-space:nowrap; text-shadow: -2px 0 #FF003C, 2px 0 #00DCFF;">سلام اینجا آلفا است</div>
+                    <div class="card-info"><div class="card-title-style">گلیچ رترو</div></div>
+                </div>
+
+                <!-- ظریف و مینیمال -->
+                <div class="style-card" onclick="setStylePreset('elegant_thin_serif', this)">
+                    <div class="demo-full" style="font-size:0.9rem; color:#fff; font-weight:300; white-space:nowrap; letter-spacing:0.5px;">سلام اینجا آلفا است</div>
+                    <div class="card-info"><div class="card-title-style">ظریف و مینیمال</div></div>
+                </div>
+
+                <!-- سینمایی letterbox -->
+                <div class="style-card" onclick="setStylePreset('cinematic_letterbox', this)">
+                    <div class="demo-full" style="font-size:0.9rem; color:#fff; font-weight:900; white-space:nowrap; background:#000; padding:6px 14px;">سلام اینجا آلفا است</div>
+                    <div class="card-info"><div class="card-title-style">سینمایی letterbox</div></div>
+                </div>
+
+                <!-- ماشین‌تحریر سبز -->
+                <div class="style-card" onclick="setStylePreset('typewriter_mono', this)">
+                    <div class="demo-full" style="font-size:0.9rem; color:#20FF5A; font-weight:900; white-space:nowrap; font-family:monospace; background:#0a0a0a; padding:6px 14px; border:1px solid #20FF5A;">سلام اینجا آلفا است</div>
+                    <div class="card-info"><div class="card-title-style">ماشین‌تحریر سبز</div></div>
+                </div>
+
+                <!-- گرادینت رنگی -->
+                <div class="style-card" onclick="setStylePreset('gradient_text', this)">
+                    <div class="demo-full" style="font-size:0.95rem; font-weight:900; white-space:nowrap; background:linear-gradient(90deg, #00E5FF, #7C4DFF, #FF2D95); -webkit-background-clip:text; background-clip:text; color:transparent;">سلام اینجا آلفا است</div>
+                    <div class="card-info"><div class="card-title-style">گرادینت رنگی</div></div>
+                </div>
+
+            </div> <!-- این تگ بسته شدنِ style-grid هست -->
+
+        </div> 
+
+        <!-- ابزار ظاهر -->
+        <div id="section-appearance" class="tool-section">
+            <div class="control-group-panel">
+                <div class="control-group">
+                    <div class="header-neon">
+                        <div class="title-neon"><i class="fa-solid fa-text-height"></i><span>اندازه متن</span></div>
+                        <div class="percent-badge" id="lbl-size">50%</div>
+                    </div>
+                    <div class="range-container">
+                        <input type="range" id="fz" min="0" max="100" value="50" oninput="updateRange(this, 'lbl-size'); upd()">
+                    </div>
+                </div>
+                <div class="control-group">
+                    <div class="header-neon">
+                        <div class="title-neon"><i class="fa-solid fa-arrows-left-right"></i><span>موقعیت افقی متن</span></div>
+                        <div class="percent-badge" id="lbl-x">0%</div>
+                    </div>
+                    <div class="range-container">
+                        <div class="center-marker"></div>
+                        <input type="range" id="posX" min="-100" max="100" value="0" oninput="updateRange(this, 'lbl-x'); upd()">
+                    </div>
+                </div>
+                <div class="control-group">
+                    <div class="header-neon">
+                        <div class="title-neon"><i class="fa-solid fa-arrows-up-down"></i><span>موقعیت عمودی متن</span></div>
+                        <div class="percent-badge" id="lbl-y">20%</div>
+                    </div>
+                    <div class="range-container">
+                        <input type="range" id="pos" min="0" max="100" value="20" oninput="updateRange(this, 'lbl-y'); upd()">
+                    </div>
+                </div>
+            </div>
+
+            <div class="control-group-panel" id="boxControlsPanel">
+                <div class="box-preview-area">
+                    <div id="boxPreview" class="box-preview-element">
+                        <span>متن نمونه</span>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <div class="header-neon">
+                        <div class="title-neon"><i class="fa-solid fa-vector-square"></i><span>گردی کادر</span></div>
+                        <div class="percent-badge" id="lbl-radius">16px</div>
+                    </div>
+                    <div class="range-container">
+                        <input type="range" id="radius" min="1" max="50" value="16" oninput="updateRange(this, 'lbl-radius', 'px'); upd()">
+                    </div>
+                </div>
+                <div class="control-group">
+                    <div class="header-neon">
+                        <div class="title-neon"><i class="fa-solid fa-arrows-left-right-to-line"></i><span>فاصله افقی</span></div>
+                        <div class="percent-badge" id="lbl-paddingX">20px</div>
+                    </div>
+                    <div class="range-container">
+                        <input type="range" id="paddingX" min="5" max="100" value="20" oninput="updateRange(this, 'lbl-paddingX', 'px'); upd()">
+                    </div>
+                </div>
+                <div class="control-group">
+                    <div class="header-neon">
+                        <div class="title-neon"><i class="fa-solid fa-ruler-vertical"></i><span>فاصله عمودی</span></div>
+                        <div class="percent-badge" id="lbl-paddingY">10px</div>
+                    </div>
+                    <div class="range-container">
+                        <input type="range" id="paddingY" min="5" max="50" value="10" oninput="updateRange(this, 'lbl-paddingY', 'px'); upd()">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- ابزار فونت و تنظیمات -->
+        <div id="section-font" class="tool-section">
+            <div class="sub-nav-container">
+                <div class="sub-nav-btn" onclick="switchSubTab('opacity', this)">انیمیشن</div>
+                <div class="sub-nav-btn active" onclick="switchSubTab('settings', this)">رنگ</div>
+                <div class="sub-nav-btn" onclick="switchSubTab('fonts', this)">فونت</div>
+            </div>
+
+            <!-- تب تنظیمات -->
+            <div id="sub-settings" class="sub-section-content active">
+                <div id="settingsContainerInline"></div>
+                <div style="text-align:center; color:#666; font-size:0.8rem; margin-top:20px;">
+                    تنظیمات اختصاصی استایل انتخاب شده
+                </div>
+            <!-- پایان تب تنظیمات -->
+        </div>
+
+        <!-- تب شفافیت (بخش جدید) -->
+        <div id="sub-opacity" class="sub-section-content">
+            <div class="settings-row-toggle active">
+                <div class="setting-header" onclick="toggleUnreadOpacity(this)">
+                    <div class="settings-left-part">
+                        <div class="settings-icon-box">
+                            <svg viewBox="0 0 24 24" fill="var(--primary)" style="width:20px; height:20px;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
+                        </div>
+                        <span class="settings-label">کم رنگ شدن کلمات جلو</span>
+                    </div>
+                    <div class="premium-toggle"></div>
+                </div>
+            </div>
+            <div style="text-align:center; color:#666; font-size:0.8rem; margin-top:15px; padding:0 10px;">
+                با فعال کردن این گزینه کلمات جلو کمرنگ خواهد شد.
+            </div>
+
+            <!-- دکمه جدید برای کمرنگ شدن جلو و عقب -->
+            <div id="surroundingToggleCard" class="settings-row-toggle" style="margin-top: 15px;">
+                <div class="setting-header" onclick="toggleSurroundingOpacity(this)">
+                    <div class="settings-left-part">
+                        <div class="settings-icon-box">
+                            <svg viewBox="0 0 24 24" fill="var(--primary)" style="width:20px; height:20px;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-5.5l5-3.5-5-3.5v7z"/></svg>
+                        </div>
+                        <span class="settings-label">کم رنگ شدن کلمات جلو و عقب</span>
+                    </div>
+                    <div class="premium-toggle"></div>
+                </div>
+            </div>
+            <div style="text-align:center; color:#666; font-size:0.8rem; margin-top:15px; padding:0 10px;">
+                با فعال کردن این گزینه، کلمات قبل و بعد از کلمه فعال کمرنگ می‌شوند.
+            </div>
+
+            <div id="typewriterToggleCard" class="settings-row-toggle" style="margin-top: 15px;">
+                <div class="setting-header" onclick="toggleTypewriter(this)">
+                    <div class="settings-left-part">
+                        <div class="settings-icon-box">
+                            <svg viewBox="0 0 24 24" fill="var(--primary)" style="width:20px; height:20px;"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>
+                        </div>
+                        <span class="settings-label">انیمیشن تایپ شدن حروف</span>
+                    </div>
+                    <div class="premium-toggle"></div>
+                </div>
+            </div>
+            <div style="text-align:center; color:#666; font-size:0.8rem; margin-top:15px; padding:0 10px;">
+                با فعال کردن این گزینه، کلمات آینده مخفی شده و حروف به نرمی تایپ می‌شوند.
+            </div>
+        </div>
+
+        <!-- تب فونت -->
+        <div id="sub-fonts" class="sub-section-content">
+                <div class="font-grid">
+                    <button class="font-btn" style="font-family:'Lalezar'; font-size:1rem;" onclick="setFont('lalezar', this)">لاله زار</button>
+                    <button class="font-btn ticked" style="font-family:'Pinar'; font-size:1rem;" onclick="setFont('pinar', this)">پینار</button>
+                    <button class="font-btn" style="font-family:'Amiri'; font-weight:bold; font-size:1rem;" onclick="setFont('amiri', this)">امیری</button>
+                    <button class="font-btn" style="font-family:'Sarbaz'; font-size:1rem;" onclick="setFont('sarbaz', this)">سرباز</button>
+                    <button class="font-btn" style="font-family:'IranNastaliq'; font-size:1rem;" onclick="setFont('nastaliq', this)">نستعلیق</button>
+                    <button class="font-btn" style="font-family:'VazirThin'; font-weight:100; font-size:1rem;" onclick="setFont('vazir-thin', this)">وزیر نازک</button>
+                    <button class="font-btn" style="font-family:'MadaThin'; font-weight:200; font-size:1rem;" onclick="setFont('mada-thin', this)">مادا نازک</button>
+                    <button class="font-btn" style="font-family:'ArefBold';" onclick="setFont('aref-bold', this)">دست نویس بولد</button>
+                    <button class="font-btn" style="font-family:'Dastnevis'; font-size:1rem;" onclick="setFont('dastnevis', this)">دست‌نویس</button>
+                    <button class="font-btn" style="font-family:'Entazar'; font-size:1rem;" onclick="setFont('entazar', this)">انتظار</button>
+                    <button class="font-btn" style="font-family:'Kamran'; font-size:1rem;" onclick="setFont('kamran', this)">تو خالی</button>
+                    <button class="font-btn" style="font-family:'Gharib'; font-size:1rem;" onclick="setFont('gharib', this)">غریب</button>
+                    <button class="font-btn" style="font-family:'Vazirmatn'; font-weight:900; font-size:1rem;" onclick="setFont('vazir', this)">وزیر ضخیم</button>
+                    <button class="font-btn" style="font-family:'Hasti'; font-size:1rem;" onclick="setFont('hasti', this)">هستی</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- ابزار متن -->
+        <div id="section-text" class="tool-section" style="padding: 0;">
+            <div class="text-editor-ui">
+                <div class="toolbar-area" id="toolbar">
+                    <div class="tool-circle" onclick="openSheet('delete')"><i class="fa-solid fa-trash-can"></i></div>
+                    <div class="tool-circle" onclick="openColorPicker('word', event)"><i class="fa-solid fa-palette"></i></div>
+                    <div class="tool-circle" onclick="openSheet('text')"><i class="fa-solid fa-pen"></i></div>
+                    <div class="tool-circle" onclick="openSheet('time')"><i class="fa-regular fa-clock"></i></div>
+                    <div class="tool-circle" id="btnSplit" onclick="toggleSplit()"><i class="fa-solid fa-level-down-alt" style="transform: rotate(90deg);"></i></div>
+                    <!-- دکمه تنظیمات/تولید مجدد -->
+                    <div class="tool-circle" onclick="openSheet('regenerate')"><i class="fa-solid fa-gear"></i></div>
+                </div>
+                <div class="fixed-info-bar">
+                    <span class="global-time-text" id="globalTimeDisplay">00:00 / 00:00</span>
+                </div>
+                <div class="timeline-scroll-area" id="timelineScroll">
+                    <div class="spacer"></div>
+                    <div class="spacer"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Backdrop انتخاب رنگ -->
+<div id="pickerBackdrop" class="picker-backdrop" onclick="closePicker()"></div>
+
+<!-- Modal اصلی انتخاب رنگ -->
+<div id="colorPickerModal" class="picker-modal">
+    <div class="picker-header">
+      <div class="picker-icon" onclick="saveAndClosePicker()"><i class="fa-solid fa-check"></i></div>
+      <div style="height: 5px; width: 46px; background: rgba(255,255,255,.18); border-radius: 999px;"></div>
+      <div class="picker-icon" onclick="closePicker()"><i class="fa-solid fa-xmark"></i></div>
+    </div>
+
+    <div class="picker-tabs">
+      <div class="picker-tab" id="tab-manual" onclick="switchTab('manual')">دستی</div>
+      <div class="picker-tab active" id="tab-spectrum" onclick="switchTab('spectrum')">طیف</div>
+      <div class="picker-tab" id="tab-grid" onclick="switchTab('grid')">گرید</div>
+    </div>
+
+    <!-- بخش طیف -->
+    <div id="view-spectrum" class="view-section active-view">
+      <div class="spectrum-container" id="spectrumArea">
+        <div class="spectrum-overlay"></div>
+        <div class="spectrum-handle" id="spectrumHandle"></div>
+      </div>
+    </div>
+
+    <!-- بخش گرید -->
+    <div id="view-grid" class="view-section">
+      <div class="grid-view-container" id="gridContainer"></div>
+    </div>
+
+    <!-- بخش دستی -->
+    <div id="view-manual" class="view-section">
+      <div class="manual-view-container">
+        <div class="manual-control-row">
+          <input type="number" id="input-r" class="manual-num-input" value="200" oninput="updateRGBFromInputs()">
+          <div class="manual-slider-group">
+            <div class="manual-label-text">قرمز</div>
+            <input type="range" id="slider-r" class="rgb-slider" min="0" max="255" value="200" oninput="updateRGBFromSliders()">
+          </div>
+        </div>
+        <div class="manual-control-row">
+          <input type="number" id="input-g" class="manual-num-input" value="200" oninput="updateRGBFromInputs()">
+          <div class="manual-slider-group">
+            <div class="manual-label-text">سبز</div>
+            <input type="range" id="slider-g" class="rgb-slider" min="0" max="255" value="200" oninput="updateRGBFromSliders()">
+          </div>
+        </div>
+        <div class="manual-control-row">
+          <input type="number" id="input-b" class="manual-num-input" value="200" oninput="updateRGBFromInputs()">
+          <div class="manual-slider-group">
+            <div class="manual-label-text">آبی</div>
+            <input type="range" id="slider-b" class="rgb-slider" min="0" max="255" value="200" oninput="updateRGBFromSliders()">
+          </div>
+        </div>
+        <div class="hex-row">
+          <input type="text" id="input-hex" class="hex-input" value="C8C8C8" oninput="updateFromHexInput()">
+          <span class="hex-label"># Hex Color</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- اسلایدرهای سراسری -->
+    <div class="sliders-global-wrapper">
+      <div class="global-slider-row" id="brightness-row">
+        <div class="value-pill" title="روشنایی">
+          <i class="fa-solid fa-sun"></i>
+          <span><span id="disp-brightness">100</span>%</span>
+        </div>
+        <div class="global-slider-container">
+          <div class="global-label-top">روشنایی</div>
+          <input type="range" id="brightness-slider" class="common-slider" min="0" max="100" value="100" oninput="updateBrightness()">
+        </div>
+      </div>
+      <div class="global-slider-row">
+        <div class="value-pill" title="شفافیت">
+          <i class="fa-solid fa-droplet"></i>
+          <span><span id="disp-alpha">56</span>%</span>
+        </div>
+        <div class="global-slider-container" style="background: transparent; border:none; padding:0;">
+          <div class="global-label-top" style="right: 2px;">شفافیت</div>
+          <div class="alpha-checkered">
+            <input type="range" id="alpha-slider" class="common-slider" min="0" max="100" value="56" oninput="updateAlpha()">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer Modal -->
+    <div class="picker-footer">
+      <div class="large-preview" id="largeColorPreview"></div>
+      <div class="saved-colors-container" id="savedColorsContainer">
+        <div class="btn-save-text" onclick="saveCurrentColor()">
+          <i class="fa-solid fa-save"></i>
+          <span>ذخیره رنگ</span>
+        </div>
+      </div>
+    </div>
+</div>
+
+<!-- Modal Delete Color -->
+<div id="deleteModal" class="delete-overlay">
+    <div class="delete-box">
+      <div id="delColorPreview" class="del-preview"></div>
+      <p class="del-title">آیا این رنگ حذف شود؟</p>
+      <div class="del-actions">
+        <button class="del-btn del-btn-confirm" type="button" onclick="confirmDelete()">حذف</button>
+        <button class="del-btn del-btn-cancel" type="button" onclick="closeDeleteModal()">انصراف</button>
+      </div>
+    </div>
+</div>
+
+<!-- شیت‌های ویرایش پایین صفحه -->
+<div class="bottom-sheet-overlay" id="sheetOverlay" onclick="closeAllSheets()">
+    <!-- ویرایش متن -->
+    <div class="bottom-sheet" id="sheet-text" onclick="event.stopPropagation()">
+        <div class="sheet-handle"></div>
+        <div class="sheet-title">ویرایش متن</div>
+        <input type="text" id="textInput" class="sheet-input">
+        <div class="sheet-meta-row">
+            <span class="time-display-text" id="textTimeDisplay">00.00 -> 00.00</span>
+            <button class="mini-play-btn" id="btnPreviewPlay" onclick="playPreviewWord()"><i class="fa-solid fa-play"></i></button>
+        </div>
+        <div class="sheet-actions">
+            <button class="action-btn btn-apply-sheet" onclick="saveText()">اعمال</button>
+            <button class="action-btn btn-cancel-sheet" onclick="closeAllSheets()">لغو</button>
+        </div>
+    </div>
+
+    <!-- ویرایش زمان (بازطراحی شده) -->
+    <div class="bottom-sheet" id="sheet-time" onclick="event.stopPropagation()">
+        <div class="sheet-handle"></div>
+        
+        <!-- هدر: دکمه پخش و زمان -->
+        <div class="trimmer-header">
+            <button id="btnTimeSheetPlay" class="trimmer-play-btn" onclick="playPreviewWord()">
+                <i id="btnTimeSheetPlayIcon" class="fa-solid fa-play"></i>
+            </button>
+            <div class="trimmer-time-display">
+                <span id="trimStartDisp">00:03.62</span> - <span id="trimEndDisp">00:03.88</span>
+            </div>
+        </div>
+
+        <!-- بدنه: نوار برش و کلمات قبل/بعد -->
+        <div class="trimmer-body">
+            <!-- کلمه قبل -->
+            <div class="word-preview-side left" id="prevWordPreview">دردی</div>
+            
+            <!-- نوار زمانی -->
+            <div class="trimmer-container" id="trimmerContainer">
+                <div class="timeline-strip" id="timelineStrip">
+                    <!-- اینجا هندل‌ها قرار می‌گیرند -->
+                    <div class="trim-handle left" id="handleLeft">
+                        <i class="fa-solid fa-chevron-left"></i>
+                    </div>
+                    <div class="trim-track-active" id="trackActive"></div>
+                    <div class="trim-handle right" id="handleRight">
+                        <i class="fa-solid fa-chevron-right"></i>
+                    </div>
+                </div>
+            </div>
+
+            <!-- کلمه بعد -->
+            <div class="word-preview-side right" id="nextWordPreview">رفتی</div>
+        </div>
+
+        <!-- کلمه جاری (وسط) -->
+        <div class="trimmer-current-word" id="timeSheetWord">چه</div>
+
+        <!-- دکمه‌های اکشن -->
+        <div class="sheet-actions">
+            <button class="action-btn" style="background: #7C4DFF; color: #fff; font-size: 1.1rem;" onclick="confirmTimeChanges()">اعمال</button>
+            <button class="action-btn btn-cancel-sheet" onclick="cancelTimeChanges()" style="font-size: 1rem; background: transparent; color: #fff;">لغو</button>
+        </div>
+    </div>
+
+    <!-- حذف -->
+    <div class="bottom-sheet" id="sheet-delete" onclick="event.stopPropagation()">
+        <div class="sheet-handle"></div>
+        <div class="delete-icon-wrap"><i class="fa-solid fa-trash-can"></i></div>
+        <div class="delete-msg" id="deleteMsgText"></div>
+        <div class="sheet-actions">
+            <button class="action-btn btn-delete-sheet" onclick="confirmDeleteWord()">بله، حذف کن</button>
+            <button class="action-btn btn-cancel-sheet" onclick="closeAllSheets()">انصراف</button>
+        </div>
+    </div>
+
+    <!-- تنظیمات / بازتولید -->
+    <div class="bottom-sheet" id="sheet-regenerate" onclick="event.stopPropagation()">
+        <div class="sheet-handle"></div>
+        
+        <!-- حالت اول: دکمه انجام -->
+        <div id="regen-step-start" style="width:100%; display:flex; flex-direction:column; gap:15px;">
+            <div class="sheet-title" style="font-size:1rem; font-weight:bold; color:#fff;">تنظیمات زیرنویس</div>
+            
+            <button class="action-btn" style="background: #333; color: white;" onclick="openSheet('wordcount')">
+                <i class="fa-solid fa-list-ol"></i> تعداد کلمات در هر بخش
+            </button>
+
+            <button class="action-btn" style="background: linear-gradient(135deg, #FF4081, #7C4DFF); color: white;" onclick="preConfirmRegenerate()">
+                <i class="fa-solid fa-wand-magic-sparkles"></i> تولید مجدد زیرنویس
+            </button>
+            
+            <p style="color:#666; font-size:0.8rem; text-align:center; margin:0;">
+                در صورت عدم رضایت، هوش مصنوعی دوباره تلاش می‌کند.
+            </p>
+            <button class="action-btn btn-cancel-sheet" onclick="closeAllSheets()">بستن</button>
+        </div>
+
+        <!-- حالت دوم: لودینگ -->
+        <div id="regen-step-loading" style="display:none; width:100%; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding: 20px 0;">
+            <div class="sheet-spinner-ring"></div>
+            <div style="text-align:center;">
+                <div style="color:#fff; font-weight:bold; margin-bottom:5px;">هوش مصنوعی در حال بازنویسی...</div>
+                <div style="color:#888; font-size:0.85rem;">لطفاً صبر کنید...</div>
+            </div>
+        </div>
+
+        <!-- حالت سوم: موفقیت -->
+        <div id="regen-step-success" style="display:none; width:100%; flex-direction:column; align-items:center; justify-content:center; gap:15px; padding: 20px 0;">
+            <div class="success-checkmark-anim">
+                <i class="fa-solid fa-check"></i>
+            </div>
+            <div style="color:#00e676; font-weight:bold; font-size:1.1rem;">زیرنویس مجدد تولید شد!</div>
+        </div>
+    </div>
+
+    <!-- انتخاب تعداد کلمات -->
+    <div class="bottom-sheet" id="sheet-wordcount" onclick="event.stopPropagation()">
+        <div class="sheet-handle"></div>
+        <div class="sheet-title">تعداد کلمات در هر بخش</div>
+        <div class="word-count-grid">
+            <button class="wc-btn" onclick="resegmentByWordCount(1)">1</button>
+            <button class="wc-btn" onclick="resegmentByWordCount(2)">2</button>
+            <button class="wc-btn" onclick="resegmentByWordCount(3)">3</button>
+            <button class="wc-btn" onclick="resegmentByWordCount(4)">4</button>
+            <button class="wc-btn" onclick="resegmentByWordCount(5)">5</button>
+            <button class="wc-btn" onclick="resegmentByWordCount(6)">6</button>
+            <button class="wc-btn" onclick="resegmentByWordCount(7)">7</button>
+            <button class="wc-btn" onclick="resegmentByWordCount(8)">8</button>
+            <button class="wc-btn" onclick="resegmentByWordCount(9)">9</button>
+            <button class="wc-btn" onclick="resegmentByWordCount(10)">10</button>
+        </div>
+        <button class="action-btn btn-cancel-sheet" onclick="openSheet('regenerate')">بازگشت</button>
+    </div>
+</div>
+
+<!-- پیغام هوشمند هوش مصنوعی -->
+<div id="aiCoachMarkOverlay" class="coach-overlay" onclick="closeAITooltip()">
+    <div id="coachTooltip" class="coach-tooltip" onclick="event.stopPropagation()">
+        <div class="coach-icon">
+            <i class="fa-solid fa-robot"></i>
+        </div>
+        <div class="coach-title">هوش مصنوعی کارشو انجام داد!</div>
+        <div class="coach-text">
+            متن این ویدیو توسط هوش مصنوعی تولید شده و ممکنه بعضی کلمات به خاطر لحن گفتار نیاز به اصلاح داشته باشن.<br><br>
+            اگه اشتباه املایی دیدی، کافیه از بخش <b style="color: #00D7FF;">«متن»</b> روی کلمه مورد نظر کلیک کنی و خیلی راحت اصلاحش کنی!
+        </div>
+        <button class="coach-btn" onclick="closeAITooltip()">متوجه شدم</button>
+    </div>
+    <!-- فلش راهنما به سمت پایین -->
+    <div id="coachArrow" class="coach-arrow">
+        <i class="fa-solid fa-arrow-down"></i>
+    </div>
+</div>
+
+<!-- لودینگ نئونی جدید -->
+<div id="loader">
+    <div class="loader-wrapper">
+        <div class="modern-loader">
+            <div class="loader-ring"></div>
+            <div class="loader-ring"></div>
+            <div class="loader-ring"></div>
+            <div class="loader-icon">
+                <i class="fa-solid fa-wand-magic-sparkles"></i>
+            </div>
+        </div>
+        
+        <div class="text-container">
+            <div class="loading-title" id="loaderTitle">در حال آماده سازی...</div>
+            <div class="loading-sub" id="queueStatusMsg">لطفاً صبور باشید ☘️</div>
+            
+            <!-- نوار پیشرفت واقعی -->
+            <div id="uploadProgressContainer" style="display: none; width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 10px; margin-top: 15px; overflow: hidden; position: relative;">
+                <div id="uploadProgressBar" style="width: 0%; height: 100%; background: linear-gradient(90deg, #b000ff, #0077ff); transition: width 0.2s ease;"></div>
+                <!-- افکت درخشش روی نوار -->
+                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: progressGlow 1.5s infinite;"></div>
+            </div>
+        </div>
+        <style>
+            @keyframes progressGlow {
+                0% { transform: translateX(-100%); }
+                100% { transform: translateX(100%); }
+            }
+        </style>
+    </div>
+</div>
+
+<!-- صفحه نتیجه -->
+<div id="resultScreen">
+    <h3 style="color:#fff; margin-bottom: 15px;">ویدیو آماده شد!</h3>
+    <div style="width: 90%; max-width: 400px; height: 50vh; background: #111; border-radius: 15px; overflow: hidden; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; border: 1px solid #333;">
+        <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>
+    </div>
+</div>
+
+<!-- اسکریپت کنترل پیغام هوش مصنوعی (اصلاح شده برای قرارگیری بالای دکمه) -->
+<script>
+    function showAITooltip() {
+        const overlay = document.getElementById('aiCoachMarkOverlay');
+        const targetBtn = document.getElementById('btn-text');
+        const tooltip = document.getElementById('coachTooltip');
+        const arrow = document.getElementById('coachArrow');
+        const controlsBar = document.querySelector('.controls-bar');
+        
+        if (!targetBtn || !overlay || !tooltip || !arrow) return;
+
+        // بالا آوردن z-index نوار کنترل تا دکمه متن بالای لایه مشکی قرار بگیرد
+        if (controlsBar) controlsBar.style.zIndex = '10000';
+        targetBtn.classList.add('relative-z-coach');
+        
+        overlay.style.display = 'block';
+        
+        // محاسبه جایگاه دقیق دکمه نسبت به صفحه
+        const rect = targetBtn.getBoundingClientRect();
+        
+        // محاسبه فاصله از پایین صفحه تا بالای دکمه متن
+        const distFromBottom = window.innerHeight - rect.top;
+        
+        // قرار دادن پیام بالای دکمه (روی ویدیو)
+        tooltip.style.top = 'auto';
+        tooltip.style.bottom = (distFromBottom + 50) + 'px';
+        
+        // قرار دادن فلش دقیقاً بالای دکمه
+        arrow.style.top = 'auto';
+        arrow.style.bottom = (distFromBottom + 10) + 'px';
+        arrow.style.left = (rect.left + rect.width / 2) + 'px';
+        
+        setTimeout(() => { overlay.classList.add('show'); }, 10);
+    }
+
+    function closeAITooltip() {
+        const overlay = document.getElementById('aiCoachMarkOverlay');
+        const targetBtn = document.getElementById('btn-text');
+        const controlsBar = document.querySelector('.controls-bar');
+        
+        if (overlay) {
+            overlay.classList.remove('show');
+            setTimeout(() => { 
+                overlay.style.display = 'none'; 
+                // برگرداندن z-index به حالت اولیه پس از بسته شدن
+                if (controlsBar) controlsBar.style.zIndex = '90';
+                if (targetBtn) targetBtn.classList.remove('relative-z-coach');
+            }, 300);
+        }
+    }
+</script>
+
+<!-- اسکریپت انیمیشن باکس -->
+<script>
+    function startBoxAnim() {
+        const container = document.getElementById('animPreviewBox');
+        if(!container) return;
+        const words = container.querySelectorAll('.box-word');
+        let index = 0;
+        setInterval(() => {
+            words.forEach((w, i) => {
+                w.className = 'box-word'; 
+                if (i < index) w.classList.add('past'); 
+                else if (i === index) w.classList.add('active'); 
+            });
+            index++; if (index > words.length) index = 0;
+        }, 700);
+    }
+    
+    function startAlphaAnim() {
+        const container = document.getElementById('animPreviewAlpha');
+        if(!container) return;
+        const words = container.querySelectorAll('.alpha-word');
+        let index = 0;
+        setInterval(() => {
+            words.forEach((w, i) => {
+                w.className = 'alpha-word'; 
+                if (i < index) w.classList.add('past'); 
+                else if (i === index) w.classList.add('active'); 
+            });
+            index++; if (index > words.length) index = 0;
+        }, 700);
+    }
+
+    // اجرای انیمیشن هنگام لود
+    window.addEventListener('load', () => {
+        startBoxAnim();
+        startAlphaAnim();
+    });
+</script>
+
+<!-- بارگذاری اسکریپت‌ها -->
+<script src="/static/js/globals.js"></script>
+<script src="/static/js/utils.js"></script>
+<script src="/static/js/db.js"></script>
+<script src="/static/js/api.js"></script>
+<script src="/static/js/ui.js"></script>
+<script src="/static/js/editor.js"></script>
+<script src="/static/js/main.js"></script>
+
+</body>
+</html>

requirements.txt

@@ -0,0 +1,11 @@
+fastapi
+uvicorn
+python-multipart
+google-generativeai
+pillow
+requests
+numpy
+pydub
+gradio-client
+groq
+huggingface_hub

static/css/style.css

@@ -0,0 +1,1023 @@
+@font-face { font-family: 'Sarbaz'; src: url('/static/fonts/Sarbaz.ttf'); }
+@font-face { font-family: 'IranNastaliq'; src: url('/static/fonts/IranNastaliq.ttf'); }
+@font-face { font-family: 'VazirThin'; src: url('/static/fonts/Vazirmatn-Thin.ttf'); }
+@font-face { font-family: 'MadaThin'; src: url('/static/fonts/Mada-ExtraLight.ttf'); }
+@font-face { font-family: 'ArefBold'; src: url('/static/fonts/ArefRuqaa-Bold.ttf'); }
+@font-face { font-family: 'Dastnevis'; src: url('/static/fonts/Dastnevis.ttf'); }
+@font-face { font-family: 'Entazar'; src: url('/static/fonts/Entazar.ttf'); }
+@font-face { font-family: 'Kamran'; src: url('/static/fonts/Kamran.ttf'); } 
+@font-face { font-family: 'Gharib'; src: url('/static/fonts/Gharib.ttf'); }
+@font-face { font-family: 'Pinar'; src: url('/static/fonts/Pinar-Bold.ttf'); }
+@font-face { font-family: 'Hasti'; src: url('/static/fonts/Hasti.ttf'); }
+:root { --bg: #0f0f0f; --surface: #1e1e1e; --primary: #7C4DFF; --text: #fff; --highlight: #2a2a2a; --panel-bg: #151515; --static-color: #A020F0; --accent-orange: #FF7043; --danger-red: #ff5252; --chip-bg: #2c2c2c; --input-bg: #2a2a2a; }
+
+* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
+
+body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Vazirmatn'; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 50px;}
+
+/* --- صفحه خانه (پروژه‌ها) --- */
+#homeScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #121212; z-index: 5000; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
+.home-header { font-size: 1.5rem; font-weight: 900; margin-bottom: 20px; text-align: right; color: #eee; }
+
+.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-bottom: 80px; }
+
+.project-card {
+background: #252525; border-radius: 20px; overflow: hidden; position: relative;
+box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: 0.2s; cursor: pointer; aspect-ratio: 1 / 1.1; display: flex; flex-direction: column;
+}
+.project-card:active { transform: scale(0.97); }
+
+.card-thumb { width: 100%; height: 70%; background: #333; background-size: cover; background-position: center; position: relative; }
+.card-overlay { position: absolute; bottom: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }
+.card-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; color: #fff; font-weight: bold; }
+.card-menu { position: absolute; top: 10px; left: 10px; width: 35px; height: 35px; background: rgba(0,0,0,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; backdrop-filter: blur(4px); transition: 0.2s; z-index: 10; }
+.card-menu:active { background: var(--primary); transform: scale(0.9); }
+
+.card-details { padding: 10px; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
+.card-title { font-weight: bold; font-size: 1.1rem; color: #fff; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.card-date { font-size: 0.75rem; color: #888; }
+
+#noProjectsPlaceholder { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #666; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
+.placeholder-icon { width: 100px; height: 100px; border: 3px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; animation: pulse 2.5s infinite ease-in-out; background: rgba(124, 77, 255, 0.05); }
+.placeholder-text { font-size: 1.1rem; font-weight: bold; color: #ddd; }
+@keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(124, 77, 255, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(124, 77, 255, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(124, 77, 255, 0); } }
+
+.fab-add { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); background: var(--accent-orange); color: #fff; padding: 15px 40px; border-radius: 30px; font-size: 1.1rem; font-weight: bold; box-shadow: 0 5px 20px rgba(255, 112, 67, 0.4); border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; z-index: 5001; transition: 0.2s; font-family: inherit; width: 90%; max-width: 400px; justify-content: center; }
+.fab-add:active { transform: translateX(-50%) scale(0.95); }
+
+.action-sheet-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 6000; display: none; align-items: flex-end; justify-content: center; animation: fadeInOverlay 0.2s forwards; padding-bottom: 20px; }
+.action-sheet { background: #222; width: 90%; max-width: 500px; border-radius: 20px; padding: 25px; display: flex; flex-direction: column; gap: 15px; transform: translateY(100%); animation: slideUp 0.3s forwards; }
+.sheet-title-main { color: #888; font-size: 0.9rem; text-align: center; margin-bottom: 10px; }
+.sheet-btn { background: #333; color: #fff; border: none; padding: 15px; border-radius: 15px; font-size: 1rem; font-family: inherit; display: flex; align-items: center; gap: 15px; cursor: pointer; }
+.sheet-btn:active { background: #444; }
+.sheet-btn.delete-btn { color: #ff5252; }
+.sheet-btn i { width: 25px; text-align: center; }
+
+.input-field { width: 100%; background: #111; border: 1px solid #444; color: #fff; padding: 12px; border-radius: 10px; font-family: inherit; font-size: 1rem; margin-bottom: 20px; text-align: center; }
+@keyframes slideUp { to { transform: translateY(0); } }
+@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
+
+.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: 7000; 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-cancel { background: #333; color: #fff; }
+.btn-confirm-action.split { background: #00C853; }
+.btn-confirm-action.delete { background: #d32f2f; }
+
+#editorScreen { display: none; width: 100%; flex-direction: column; min-height: 100vh; }
+.top-bar { position: sticky; top: 0; height: 60px; background: rgba(30,30,30,0.95); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 100; border-bottom: 1px solid #333; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
+.btn-home { background: transparent; color: #ccc; border: none; font-size: 1.2rem; cursor: pointer; padding: 10px; }
+
+#workspace {
+width: 100%;
+display: flex;
+justify-content: center;
+align-items: center;
+background: #000;
+padding: 20px 0;
+min-height: 300px;
+flex-shrink: 0;
+overflow: hidden; 
+}
+#scaler {
+transition: transform 0.1s ease-out;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+#videoContainer { position: relative; background: #000; overflow: hidden; cursor: pointer; box-shadow: 0 0 30px rgba(124, 77, 255, 0.1); border-radius: 8px;}
+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; }
+#activeText { position: absolute; white-space: pre; pointer-events: auto; cursor: move; padding: 0 0 8px 0; line-height: 1; font-weight: bold; transition: background-color 0.2s, text-shadow 0.2s, -webkit-text-stroke 0.2s; transform-origin: center center; text-align: center; left: 50%; transform: translateX(-50%); }
+.word-active { background-color: var(--static-color); color: #fff; border-radius: 8px; padding: 0 8px; margin: 0 2px; box-shadow: 0 2px 8px rgba(160, 32, 240, 0.5); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
+.word-highlight { color: #00D7FF !important; transform: scale(1.2); display:inline-block; text-shadow: 0 0 10px rgba(0, 215, 255, 0.5); }
+
+.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); }
+
+#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; }
+.tool-section.active-section { display: block; }
+@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; }
+
+.row { margin-bottom: 20px; }
+label { display: block; margin-bottom: 8px; color: #ccc; font-size: 0.9rem; }
+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: 1fr 1fr; gap: 12px; width: 100%; }
+
+.style-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+
+.style-card { 
+    background: #333; 
+    border: 2px solid transparent; 
+    border-radius: 15px; 
+    padding: 5px; 
+    cursor: pointer; 
+    display: flex; 
+    flex-direction: column; 
+    align-items: center; 
+    justify-content: center; 
+    min-height: 0; /* تغییر: حذف حداقل ارتفاع */
+    width: 100%; 
+    position: relative; 
+    transition: all 0.2s; 
+    box-shadow: 0 4px 6px rgba(0,0,0,0.2); 
+    aspect-ratio: 1.4 / 1; /* تغییر: اضافه شدن نسبت ابعاد */
+}
+
+.style-grid-2col .style-card { min-height: 100px; height: auto; gap: 8px; padding: 10px; aspect-ratio: auto; } /* ریست کردن aspect ratio برای بخش بالایی */
+
+.style-card:active { transform: scale(0.98); }
+.style-card.selected { border-color: var(--primary); background: #2a2a2a; }
+.style-card.selected::after { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 8px; left: 8px; font-size: 0.7rem; color: #fff; background: var(--primary); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
+
+.card-info { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; margin-top: 6px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; }
+.card-title-style { font-weight: bold; font-size: 0.8rem; color: #fff; white-space: nowrap; }
+.card-desc { color: #aaa; font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.anim-box { font-family: 'Lalezar'; font-size: 0.9rem; direction: rtl; display: flex; gap: 3px; margin-bottom: 5px; }
+.anim-word { color: white; transition: 0.2s; padding: 0 2px; border-radius: 4px;}
+.anim-word.active { color: #fff; background-color: #A020F0; transform: scale(1.05); padding: 0 4px; }
+.static-anim.active { background-color: var(--static-color) !important; color: #fff; }
+
+.card-settings { position: absolute; bottom: 5px; left: 5px; width: 25px; height: 25px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; transition: 0.2s; z-index: 5; border: 1px solid rgba(255,255,255,0.1); }
+
+.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; color: #fff; }
+.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); }
+
+.custom-style-container { width: 100%; background: linear-gradient(90deg, #252525, #1e1e1e); border: 1px solid #444; border-right: 6px solid var(--primary); border-radius: 12px; margin-bottom: 25px; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s; max-height: 60px; cursor: pointer; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
+.custom-style-container.open { max-height: 600px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); border-color: #666; }
+.custom-header { height: 60px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; font-family: 'Lalezar'; font-size: 1.2rem; color: #fff; }
+.custom-header-title { display: flex; align-items: center; gap: 10px; }
+.custom-header-title i { color: var(--primary); font-size: 1.4rem; }
+.toggle-icon { transition: transform 0.3s; font-size: 0.9rem; color: #888; }
+.custom-style-container.open .toggle-icon { transform: rotate(180deg); color: #fff; }
+.custom-content { padding: 20px; opacity: 0; transition: opacity 0.3s ease 0.1s; border-top: 1px solid #333; background: #202020; }
+.custom-style-container.open .custom-content { opacity: 1; }
+
+.text-editor-ui { display: flex; flex-direction: column; width: 100%; height: 100%; background-color: var(--surface); padding-bottom: 10px; }
+
+.toolbar-area {
+height: 60px; display: flex; align-items: center; justify-content: center; gap: 20px;
+opacity: 0; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+pointer-events: none; margin-top: 10px;
+}
+.toolbar-area.show { opacity: 1; transform: translateY(0); pointer-events: all; }
+
+.tool-circle {
+width: 45px; height: 45px; border-radius: 50%; background: #252525;
+border: 1px solid #444; color: #ccc; display: flex; align-items: center; justify-content: center;
+font-size: 1.1rem; cursor: pointer; transition: 0.2s;
+}
+.tool-circle:active { transform: scale(0.9); border-color: var(--primary); color: var(--primary); }
+.tool-circle.active-state { background: rgba(124, 77, 255, 0.15); border-color: var(--primary); color: var(--primary); }
+
+.fixed-info-bar { width: 100%; height: 30px; display: flex; align-items: center; justify-content: flex-start; padding: 0 20px; border-bottom: 1px solid #222; background-color: var(--surface); }
+.global-time-text { color: #888; font-size: 0.8rem; font-family: monospace; direction: ltr; }
+
+.timeline-scroll-area {
+flex: 1; width: 100%; overflow-x: auto; white-space: nowrap; padding: 15px 0;
+display: flex; align-items: center; scrollbar-width: none;
+}
+.timeline-scroll-area::-webkit-scrollbar { display: none; }
+.spacer { min-width: 50vw; }
+
+.word-chip {
+background-color: var(--chip-bg); color: #aaa; padding: 8px 18px;
+border-radius: 12px; margin: 0 4px; font-size: 0.95rem; cursor: pointer;
+transition: 0.2s; display: inline-flex; align-items: center; justify-content: center;
+border: 1px solid transparent;
+}
+.word-chip.active { background-color: var(--primary); color: #fff; font-weight: bold; transform: scale(1.1); }
+.newline-indicator { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: #555; margin: 0 10px; }
+
+.bottom-sheet-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 6000; display: none; align-items: flex-end; justify-content: center; }
+.bottom-sheet-overlay.show { display: flex; }
+
+.bottom-sheet {
+width: 100%; background: var(--surface); border-top-left-radius: 30px; border-top-right-radius: 30px;
+padding: 25px 25px 80px 25px; transform: translateY(100%);
+transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+display: none; flex-direction: column; gap: 20px;
+box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
+}
+.bottom-sheet.active { display: flex; transform: translateY(0); }
+
+.sheet-handle { width: 50px; height: 5px; background: #333; border-radius: 3px; margin: 0 auto 5px auto; }
+.sheet-title { text-align: center; color: #888; font-size: 0.9rem; margin-bottom: 5px; }
+
+.sheet-actions { display: flex; gap: 12px; margin-top: 10px; }
+.action-btn { flex: 1; padding: 15px; border-radius: 18px; border: none; font-family: inherit; font-size: 1rem; font-weight: bold; cursor: pointer; }
+.btn-cancel-sheet { background: #333; color: #ccc; }
+.btn-apply-sheet { background: var(--primary); color: #fff; }
+.btn-delete-sheet { background: var(--danger-red); color: #fff; }
+
+.sheet-input { width: 100%; background: var(--input-bg); border: none; border-radius: 18px; padding: 18px; color: white; font-family: inherit; font-size: 1.1rem; text-align: center; }
+
+.sheet-meta-row { display: flex; align-items: center; justify-content: center; gap: 15px; background: #252525; padding: 10px; border-radius: 15px; }
+.time-display-text { color: #bbb; font-family: monospace; font-size: 1rem; letter-spacing: 1px; direction: ltr; }
+
+.mini-play-btn { width: 35px; height: 35px; border-radius: 50%; background: #333; color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
+
+.time-control-row { display: flex; align-items: center; justify-content: space-between; background: var(--input-bg); padding: 10px 15px; border-radius: 18px; }
+.time-label { color: #aaa; font-size: 0.9rem; width: 50px; }
+.time-adjuster { display: flex; align-items: center; gap: 15px; }
+.time-btn { width: 40px; height: 40px; background: #333; border: none; border-radius: 12px; color: #fff; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.time-value { font-family: monospace; font-size: 1.1rem; letter-spacing: 1px; width: 60px; text-align: center; direction: ltr; }
+
+.delete-icon-wrap { width: 70px; height: 70px; border-radius: 50%; background: rgba(255, 82, 82, 0.1); color: var(--danger-red); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto; }
+.delete-msg { text-align: center; color: #fff; font-size: 1.1rem; margin-bottom: 10px; line-height: 1.6; }
+.highlight-word { color: var(--primary); font-weight: bold; padding: 0 5px; }
+
+/* --- استایل‌های لودینگ نئونی جدید --- */
+#loader {
+--color-1: #b000ff;
+--color-2: #0077ff;
+--color-3: #00eeff;
+--bg-dark: #090909;
+--bg-light: #1a1a2e;
+
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+z-index: 6000;
+display: none;
+justify-content: center;
+align-items: center;
+background: radial-gradient(circle at center, var(--bg-light) 0%, var(--bg-dark) 100%);
+font-family: 'Tahoma', sans-serif;
+overflow: hidden;
+
+}
+
+/* استایل صفحه نتیجه */
+#resultScreen {
+position: fixed; top:0; left:0; width:100%; height:100%; background: var(--bg); z-index: 6000; display: none; flex-direction: column; justify-content: center; align-items: center;
+}
+
+.loader-wrapper {
+display: flex;
+flex-direction: column;
+align-items: center;
+position: relative;
+}
+
+/* هاله نور پشت کل لودر */
+.loader-wrapper::before {
+content: '';
+position: absolute;
+top: 20%;
+width: 300px;
+height: 300px;
+background: radial-gradient(circle, rgba(124, 77, 255, 0.15) 0%, transparent 70%);
+border-radius: 50%;
+z-index: -1;
+filter: blur(20px);
+}
+
+.modern-loader {
+position: relative;
+width: 160px;
+height: 160px;
+margin-bottom: 50px;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+.loader-ring {
+position: absolute;
+border-radius: 50%;
+border: 3px solid transparent;
+border-top-color: var(--ring-color);
+animation: spin var(--dur) cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+/* اضافه کردن نقطه نورانی به سر حلقه‌ها */
+.loader-ring::before {
+content: '';
+position: absolute;
+border-radius: 50%;
+width: 8px;
+height: 8px;
+background: var(--ring-color);
+box-shadow: 0 0 15px 2px var(--ring-color);
+top: -5px;
+right: 50%;
+transform: translateX(50%);
+}
+
+/* حلقه اول */
+.loader-ring:nth-child(1) {
+width: 100%;
+height: 100%;
+--ring-color: var(--color-1);
+--dur: 2.5s;
+filter: drop-shadow(0 0 10px rgba(176, 0, 255, 0.5));
+}
+
+/* حلقه دوم */
+.loader-ring:nth-child(2) {
+width: 75%;
+height: 75%;
+--ring-color: var(--color-2);
+--dur: 2s;
+animation-direction: reverse;
+filter: drop-shadow(0 0 10px rgba(0, 119, 255, 0.5));
+}
+
+/* حلقه سوم */
+.loader-ring:nth-child(3) {
+width: 50%;
+height: 50%;
+--ring-color: var(--color-3);
+--dur: 1.5s;
+filter: drop-shadow(0 0 10px rgba(0, 238, 255, 0.5));
+}
+
+.loader-icon {
+font-size: 3rem;
+color: #fff;
+animation: float-pulse 3s ease-in-out infinite;
+filter: drop-shadow(0 0 20px var(--color-1));
+z-index: 10;
+}
+
+.text-container {
+text-align: center;
+position: relative;
+z-index: 2;
+}
+
+.loading-title {
+font-size: 1.5rem;
+font-weight: 800;
+margin-bottom: 12px;
+letter-spacing: -0.5px;
+background: linear-gradient(135deg, #fff 30%, var(--color-2), var(--color-1));
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+text-shadow: 0 0 30px rgba(124, 77, 255, 0.3);
+animation: text-glow 3s ease-in-out infinite alternate;
+}
+
+.loading-sub {
+font-size: 1rem;
+color: #a0a0a0;
+font-weight: 300;
+letter-spacing: 1px;
+opacity: 0.8;
+animation: fade-text 2s infinite alternate;
+}
+
+/* انیمیشن‌ها */
+@keyframes spin {
+0% { transform: rotate(0deg); }
+100% { transform: rotate(360deg); }
+}
+
+@keyframes float-pulse {
+0%, 100% {
+transform: scale(1) translateY(0);
+opacity: 0.8;
+filter: drop-shadow(0 0 10px var(--color-1));
+}
+50% {
+transform: scale(1.1) translateY(-5px);
+opacity: 1;
+filter: drop-shadow(0 0 25px var(--color-3));
+}
+}
+
+@keyframes text-glow {
+from { text-shadow: 0 0 10px rgba(124, 77, 255, 0.2); }
+to { text-shadow: 0 0 20px rgba(124, 77, 255, 0.6); }
+}
+
+@keyframes fade-text {
+from { opacity: 0.5; }
+to { opacity: 1; }
+}
+
+/* ========================================= */
+/* === استایل‌های بخش ظاهر (نئونی) === */
+/* ========================================= */
+#section-appearance {
+--track-off: #27272a;
+--neon-primary: #8b5cf6;
+--neon-secondary: #ec4899;
+}
+
+.controls-panel {
+width: 100%;
+background: #18181b;
+border-radius: 24px;
+padding: 25px;
+box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+border: 1px solid #333;
+margin-top: 10px;
+}
+
+.control-group {
+margin-bottom: 30px;
+}
+.control-group:last-child { margin-bottom: 0; }
+
+.header-neon {
+display: flex;
+justify-content: space-between;
+align-items: center;
+margin-bottom: 15px;
+}
+
+.title-neon {
+display: flex;
+align-items: center;
+gap: 10px;
+font-weight: 700;
+font-size: 0.95rem;
+color: #e4e4e7;
+}
+
+.title-neon i {
+color: var(--neon-primary);
+font-size: 1.1rem;
+text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
+}
+
+.percent-badge {
+font-family: monospace;
+font-size: 1rem;
+font-weight: bold;
+color: #fff;
+background: rgba(139, 92, 246, 0.15);
+padding: 4px 12px;
+border-radius: 8px;
+border: 1px solid rgba(139, 92, 246, 0.3);
+min-width: 60px;
+text-align: center;
+}
+
+.range-container {
+position: relative;
+width: 100%;
+height: 30px;
+display: flex;
+align-items: center;
+}
+
+.range-container input[type=range] {
+-webkit-appearance: none;
+width: 100%;
+background: transparent;
+cursor: pointer;
+z-index: 2;
+margin: 0;
+}
+
+.range-container input[type=range]::-webkit-slider-runnable-track {
+width: 100%;
+height: 8px;
+background: var(--track-off);
+border-radius: 20px;
+border: none;
+background-image: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
+background-size: 0% 100%;
+background-repeat: no-repeat;
+}
+
+.range-container input[type=range]::-webkit-slider-thumb {
+-webkit-appearance: none;
+height: 24px;
+width: 24px;
+border-radius: 50%;
+background: #fff;
+margin-top: -8px;
+border: 4px solid #18181b;
+box-shadow: 0 0 0 2px var(--neon-primary), 0 0 15px rgba(139, 92, 246, 0.8);
+transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.range-container input[type=range]:active::-webkit-slider-thumb {
+transform: scale(1.3);
+background: var(--neon-primary);
+border-color: #fff;
+box-shadow: 0 0 0 0 transparent, 0 0 25px rgba(236, 72, 153, 0.9);
+}
+
+.center-marker {
+position: absolute;
+left: 50%;
+top: 50%;
+transform: translate(-50%, -50%);
+width: 2px;
+height: 12px;
+background: rgba(255,255,255,0.2);
+z-index: 1;
+pointer-events: none;
+}
+
+/* ========================================= */
+/* === PRO COLOR PICKER STYLES (iOS/Luxury) === */
+/* ========================================= */
+:root {
+--glass: rgba(28,28,30,.72);
+--glass2: rgba(44,44,46,.80);
+--stroke: rgba(255,255,255,.10);
+--shadow-lg: 0 22px 60px rgba(0,0,0,.62);
+--shadow-md: 0 12px 30px rgba(0,0,0,.46);
+--shadow-sm: 0 8px 18px rgba(0,0,0,.36);
+--separator: rgba(84,84,88,.38);
+--ok: #34C759;
+}
+
+.toast-notification{ position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(-18px); background: rgba(28,28,30,.78); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-md); color: #fff; padding: 12px 18px; border-radius: 999px; z-index: 20000; font-size: .9rem; font-weight: 900; opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; display:flex; align-items:center; gap: 10px; pointer-events:none; }
+.toast-notification i{ color: var(--ok); }
+.toast-notification.show{ opacity:1; visibility: visible; transform: translateX(-50%) translateY(0); }
+
+.picker-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.46); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; z-index: 9998; }
+.picker-backdrop.active{ opacity: 1; visibility: visible; }
+
+.picker-modal{ position: fixed; bottom: 0; left: 50%; width: min(100%, 720px); transform: translateX(-50%) translateY(110%); transition: transform .28s cubic-bezier(0.2,0.8,0.2,1); background: rgba(28,28,30,.74); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg); border-radius: 30px 30px 0 0; z-index: 9999; display:flex; flex-direction:column; max-height: 92vh; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
+.picker-modal.active{ transform: translateX(-50%) translateY(0); }
+
+.picker-header{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom: 1px solid var(--separator); flex-shrink: 0; }
+.picker-icon{ width: 42px; height: 42px; border-radius: 999px; background: rgba(120,120,128,.22); border: 1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; transition: transform .12s ease; }
+.picker-icon:active{ transform: scale(.96); }
+
+.picker-tabs{ margin: 12px 16px 10px 16px; padding: 4px; border-radius: 14px; background: rgba(120,120,128,.18); border: 1px solid rgba(255,255,255,.10); display:flex; gap: 4px; flex-shrink: 0; }
+.picker-tab{ flex:1; text-align:center; padding: 10px 0; border-radius: 10px; cursor:pointer; color: rgba(235,235,245,.62); font-weight: 900; transition: background .2s ease, color .2s ease; user-select:none; }
+.picker-tab.active{ background: rgba(255,255,255,.14); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
+
+.view-section{ display:none; overflow-y:auto; padding-bottom: 10px; }
+.view-section.active-view{ display:block; }
+
+/* Spectrum */
+.spectrum-container{ margin: 0 16px 6px 16px; height: 220px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); overflow:hidden; position:relative; cursor: crosshair; direction:ltr; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
+.spectrum-container::after{ content:""; position:absolute; inset:0; background: radial-gradient(900px 260px at 15% 0%, rgba(255,255,255,.14), transparent 55%); pointer-events:none; }
+.spectrum-overlay{ position:absolute; inset:0; background: linear-gradient(to bottom, transparent 0%, #ffffff 100%); mix-blend-mode: normal; }
+.spectrum-handle{ position:absolute; width: 28px; height: 28px; border-radius: 999px; border: 3px solid rgba(255,255,255,.95); box-shadow: 0 10px 18px rgba(0,0,0,.45); transform: translate(-50%, -50%); pointer-events:none; background: rgba(0,0,0,.06); }
+
+/* GRID */
+.grid-view-container{ margin: 0 16px 0 16px; padding: 12px; background: rgba(120,120,128,.10); border: 1px solid rgba(255,255,255,.10); border-radius: 18px; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); display:grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
+.grid-view-container::-webkit-scrollbar{ width: 10px; }
+.grid-view-container::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; }
+.grid-view-container::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; border: 2px solid rgba(0,0,0,.0); background-clip: padding-box; }
+.grid-item{ aspect-ratio: 1; border-radius: 10px; cursor:pointer; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 14px rgba(0,0,0,.12); transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease; position: relative; overflow: hidden; }
+.grid-item::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,.18), transparent 55%); pointer-events:none; opacity: .55; }
+.grid-item:active{ transform: scale(.94); }
+.grid-item.selected{ border-color: rgba(255,255,255,.90); box-shadow: 0 0 0 3px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12), 0 12px 22px rgba(0,0,0,.18); transform: scale(1.02); }
+.grid-item.selected::before{ content:"\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position:absolute; right: 6px; top: 6px; width: 16px; height: 16px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-size: 10px; color: rgba(0,0,0,.80); background: rgba(255,255,255,.92); box-shadow: 0 6px 12px rgba(0,0,0,.22); z-index: 2; }
+
+/* Manual View */
+.manual-view-container{ padding: 10px 16px; display:flex; flex-direction:column; gap: 10px; }
+.manual-control-row{ display:flex; align-items:center; gap: 10px; justify-content:space-between; }
+.manual-num-input{ width: 64px; border-radius: 14px; padding: 10px 0; text-align:center; font-weight: 900; font-size: 1.05rem; color:#fff; background: rgba(120,120,128,.22); border: 1px solid rgba(255,255,255,.10); }
+.manual-slider-group{ flex:1; display:flex; flex-direction:column; gap: 6px; }
+.manual-label-text{ font-size:.82rem; color: rgba(235,235,245,.62); font-weight:900; padding-right: 6px; }
+.rgb-slider{ -webkit-appearance:none; appearance:none; width: 100%; height: 40px; background: transparent; border-radius: 999px; --track-bg: rgba(255,255,255,.10); }
+.rgb-slider::-webkit-slider-runnable-track{ height: 14px; border-radius: 999px; background: var(--track-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
+.rgb-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width: 28px; height: 28px; border-radius: 999px; background: rgba(255,255,255,.95); border: 2px solid rgba(255,255,255,.85); margin-top: -7px; box-shadow: 0 12px 20px rgba(0,0,0,.35); cursor:pointer; }
+.hex-row{ margin-top: 6px; display:flex; align-items:center; gap: 10px; }
+.hex-input{ width: 120px; border-radius: 14px; padding: 12px 10px; text-align:center; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 900; color:#fff; background: rgba(120,120,128,.22); border: 1px solid rgba(255,255,255,.10); letter-spacing: .5px; }
+.hex-label{ color: rgba(235,235,245,.56); font-weight: 900; font-size: .9rem; }
+
+/* Global Sliders (Bright/Alpha) */
+.sliders-global-wrapper{ margin-top: 10px; padding: 14px 16px 6px 16px; border-top: 1px solid var(--separator); flex-shrink: 0; }
+.global-slider-row{ display:flex; align-items:center; gap: 10px; margin-bottom: 22px; position:relative; }
+.global-slider-row:last-child{ margin-bottom: 8px; }
+.global-slider-container{ flex:1; position:relative; height: 42px; border-radius: 18px; background: rgba(120,120,128,.12); border: 1px solid rgba(255,255,255,.10); padding: 0 12px; display:flex; align-items:center; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
+.global-label-top{ position:absolute; right: 2px; top: -22px; font-size: .82rem; font-weight: 900; color: rgba(235,235,245,.62); }
+.value-pill{ min-width: 84px; height: 42px; border-radius: 999px; background: rgba(120,120,128,.22); border: 1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; gap: 8px; font-weight: 900; color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
+.value-pill i{ font-size: .95rem; color: rgba(235,235,245,.72); }
+.common-slider{ -webkit-appearance:none; appearance:none; width: 100%; height: 40px; background: transparent; border-radius: 999px; --track-bg: rgba(255,255,255,.10); direction: ltr !important; }
+.common-slider::-webkit-slider-runnable-track{ height: 14px; border-radius: 999px; background: var(--track-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
+.common-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.95); border: 2px solid rgba(255,255,255,.85); margin-top: -8px; box-shadow: 0 12px 20px rgba(0,0,0,.35); cursor:pointer; }
+
+/* FIX: Photoshop Checkered Pattern for Alpha Container & Preview */
+.alpha-checkered {
+width: 100%;
+height: 42px;
+border-radius: 16px;
+background-image: conic-gradient(#dedede 0.25turn, #ffffff 0.25turn 0.5turn, #dedede 0.5turn 0.75turn, #ffffff 0.75turn);
+background-size: 14px 14px;
+background-position: top left;
+overflow: hidden;
+display: flex;
+align-items: center;
+padding: 0 12px;
+border: 1px solid rgba(255,255,255,.10);
+}
+
+/* Footer & Large Preview Fix */
+.picker-footer{ margin-top: auto; padding: 12px 16px 0 16px; display:flex; align-items:center; justify-content:space-between; gap: 12px; border-top: 1px solid var(--separator); flex-shrink: 0; background: transparent; }
+
+/* FIX: Photoshop Checkered Pattern for Large Preview */
+.large-preview {
+width: 64px;
+height: 64px;
+border-radius: 18px;
+border: 1px solid rgba(255,255,255,.12);
+box-shadow: 0 14px 24px rgba(0,0,0,.24);
+flex-shrink: 0;
+/* الگوی شطرنجی دقیق فتوشاپ */
+background-image: conic-gradient(#dedede 0.25turn, #ffffff 0.25turn 0.5turn, #dedede 0.5turn 0.75turn, #ffffff 0.75turn);
+background-size: 16px 16px;
+background-position: center;
+}
+
+.saved-colors-container{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; flex:1; justify-content:flex-end; max-height: 90px; overflow-y:auto; padding-right: 4px; }
+.btn-save-text{ height: 38px; border-radius: 999px; padding: 0 14px; display:flex; align-items:center; justify-content:center; gap: 8px; font-weight: 900; font-size: .82rem; color: rgba(255,255,255,.92); background: rgba(120,120,128,.18); border: 1px solid rgba(255,255,255,.10); cursor:pointer; user-select:none; transition: transform .12s ease, background .18s ease; flex-shrink:0; }
+.btn-save-text:active{ transform: scale(.98); background: rgba(10,132,255,.22); border-color: rgba(10,132,255,.35); }
+.saved-color-wrapper{ position:relative; width: 42px; height: 42px; flex-shrink:0; }
+.saved-circle{ width:100%; height:100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 18px rgba(0,0,0,.18); cursor:pointer; transition: transform .12s ease; }
+.saved-circle:active{ transform: scale(.94); }
+.mini-delete-btn{ position:absolute; top:-6px; right:-6px; width: 20px; height: 20px; border-radius: 999px; background: rgba(255,69,58,.95); border: 2px solid rgba(28,28,30,.88); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; box-shadow: 0 10px 16px rgba(0,0,0,.30); transition: transform .12s ease; z-index:2; }
+.mini-delete-btn i{ font-size: 10px; }
+.mini-delete-btn:active{ transform: scale(.92); }
+
+/* Color Triggers inside accordion */
+.color-trigger-row{ display:flex; gap: 12px; margin: 14px 0 16px 0; }
+.color-trigger{ flex:1; border-radius: 16px; background: rgba(44,44,46,.55); border: 1px solid rgba(255,255,255,.10); padding: 12px 12px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; position:relative; transition: transform .12s ease; }
+.color-trigger:active{ transform: scale(.992); }
+.color-trigger::before{ content:"\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; position:absolute; left: 12px; color: rgba(235,235,245,.42); font-size: .85rem; }
+.color-label{ color: rgba(235,235,245,.80); font-weight: 900; font-size: .92rem; padding-left: 18px; }
+.color-preview-circle{ width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,.55); box-shadow: 0 10px 18px rgba(0,0,0,.28); }
+
+/* Delete modal specific */
+.delete-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 10000; display:none; align-items:center; justify-content:center; opacity:0; transition: opacity .22s ease; padding: 18px; }
+.delete-overlay.active{ display:flex; opacity:1; }
+.delete-box{ width: min(340px, 92vw); border-radius: 22px; background: rgba(28,28,30,.88); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg); padding: 22px 18px; text-align:center; transform: scale(.92); opacity:0; transition: transform .22s cubic-bezier(0.2,0.8,0.2,1), opacity .22s ease; }
+.delete-overlay.active .delete-box{ transform: scale(1); opacity:1; }
+.del-preview{ width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 14px auto; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 22px rgba(0,0,0,.22); }
+.del-title{ color:#fff; font-weight: 900; font-size: 1.02rem; margin: 8px 0 16px 0; }
+.del-actions{ display:flex; gap: 10px; }
+.del-btn{ flex:1; border:none; border-radius: 16px; padding: 12px 0; font-weight: 900; font-size: 1rem; cursor:pointer; transition: transform .12s ease, filter .12s ease; }
+.del-btn:active{ transform: scale(.99); filter: brightness(1.05); }
+.del-btn-confirm{ background: rgba(255,69,58,.95); color:#fff; }
+.del-btn-cancel{ background: rgba(120,120,128,.22); color:#fff; border: 1px solid rgba(255,255,255,.10); }
+
+/* ================================================== */
+/* === استایل‌های جدید برای بخش ظاهر (Appearance) === */
+/* ================================================== */
+#section-appearance .controls-panel {
+padding: 15px; 
+}
+
+/* پنل‌های داخلی برای گروه‌بندی کنترل‌ها */
+.control-group-panel {
+background-color: #1f1f23;
+border: 1px solid #3a3a3e;
+border-radius: 18px;
+padding: 20px;
+margin-bottom: 20px;
+box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+.control-group-panel:last-child {
+margin-bottom: 0;
+}
+
+/* بخش پیش‌نمایش زنده برای کادر */
+.box-preview-area {
+width: 100%;
+min-height: 90px;
+margin-bottom: 25px;
+padding: 15px;
+/* --- تغییر اصلی اینجاست --- */
+background-image: conic-gradient(#444 0.25turn, #333 0.25turn 0.5turn, #444 0.5turn 0.75turn, #333 0.75turn);
+background-size: 20px 20px;
+/* -------------------------- */
+border-radius: 12px;
+display: flex;
+justify-content: center;
+align-items: center;
+border: 1px solid #555;
+}
+
+.box-preview-element {
+color: #fff;
+font-size: 1.2rem;
+font-weight: bold;
+display: inline-block;
+white-space: nowrap;
+/* اینجا line-height وجود نداشت */
+transition: all 0.15s ease-out;
+}
+
+/* ======================================== */
+/* === استایل‌های انیمیشن بازتولید زیرنویس (جدید) === */
+/* ======================================== */
+
+.sheet-spinner-ring {
+width: 60px;
+height: 60px;
+border-radius: 50%;
+border: 4px solid #333;
+border-top-color: var(--primary);
+border-right-color: var(--primary);
+animation: ringSpin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+@keyframes ringSpin {
+0% { transform: rotate(0deg); }
+100% { transform: rotate(360deg); }
+}
+
+.success-checkmark-anim {
+width: 80px;
+height: 80px;
+border-radius: 50%;
+background: rgba(0, 230, 118, 0.15);
+display: flex;
+align-items: center;
+justify-content: center;
+animation: successPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.success-checkmark-anim i {
+font-size: 3rem;
+color: #00e676;
+animation: checkScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
+}
+
+@keyframes successPop {
+from { transform: scale(0); opacity: 0; }
+to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes checkScale {
+from { transform: scale(0); }
+to { transform: scale(1); }
+}
+
+/* ======================================== */
+/* === استایل‌های دکمه‌های تعداد کلمات === */
+/* ======================================== */
+
+.word-count-grid {
+display: flex;
+overflow-x: auto;
+padding: 10px 0;
+gap: 10px;
+width: 100%;
+scrollbar-width: none;
+-ms-overflow-style: none;
+justify-content: space-between;
+}
+.word-count-grid::-webkit-scrollbar {
+display: none;
+}
+
+.wc-btn {
+flex: 0 0 auto;
+width: 50px;
+height: 50px;
+border-radius: 14px;
+background: #333;
+color: #fff;
+border: 1px solid #444;
+font-size: 1.2rem;
+font-weight: bold;
+cursor: pointer;
+transition: 0.2s;
+display: flex;
+align-items: center;
+justify-content: center;
+}
+.wc-btn:active {
+background: var(--primary);
+border-color: var(--primary);
+transform: scale(0.9);
+}
+
+/* ======================================== */
+/* === استایل‌های جدید Trimmer (ویرایش زمان) === */
+/* ======================================== */
+
+.trimmer-header {
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+gap: 10px;
+margin-bottom: 25px;
+width: 100%;
+}
+
+.trimmer-play-btn {
+width: 50px;
+height: 50px;
+border-radius: 50%;
+border: 2px solid var(--accent-orange);
+background: transparent;
+color: var(--accent-orange);
+font-size: 1.4rem;
+display: flex;
+align-items: center;
+justify-content: center;
+cursor: pointer;
+transition: transform 0.2s;
+}
+.trimmer-play-btn:active {
+transform: scale(0.9);
+}
+
+.trimmer-time-display {
+font-family: monospace;
+font-size: 1.2rem;
+color: #fff;
+font-weight: bold;
+direction: ltr;
+}
+
+.trimmer-body {
+display: flex;
+align-items: center;
+justify-content: space-between;
+width: 100%;
+gap: 10px;
+margin-bottom: 20px;
+}
+
+.word-preview-side {
+width: 60px;
+height: 60px;
+background: #222;
+border-radius: 12px;
+display: flex;
+align-items: center;
+justify-content: center;
+color: #777;
+font-size: 0.9rem;
+font-weight: bold;
+text-align: center;
+flex-shrink: 0;
+}
+
+.trimmer-container {
+flex: 1;
+position: relative;
+height: 60px;
+background: #000;
+border-radius: 10px;
+overflow: hidden;
+/* اگر بخواهیم هندل‌ها بیرون نزنند */
+}
+
+/* نوار کلی (ترک) */
+.timeline-strip {
+position: absolute;
+top: 50%;
+left: 10px; /* مارجین برای هندل‌ها */
+right: 10px;
+height: 40px;
+transform: translateY(-50%);
+background: linear-gradient(90deg, #333 0%, #444 50%, #333 100%);
+background-size: 20px 100%;
+border-radius: 4px;
+}
+
+/* بخش فعال (بین دو هندل) */
+.trim-track-active {
+position: absolute;
+top: 0;
+bottom: 0;
+background: rgba(255, 255, 255, 0.15);
+border-top: 2px solid #FDD835;
+border-bottom: 2px solid #FDD835;
+left: 0;   /* این مقادیر با JS تغییر میکنن */
+right: 0;  /* این مقادیر با JS تغییر میکنن */
+}
+
+/* هندل‌های زرد رنگ */
+.trim-handle {
+position: absolute;
+top: 0;
+bottom: 0;
+width: 20px;
+background: #FDD835;
+cursor: col-resize;
+display: flex;
+align-items: center;
+justify-content: center;
+color: #000;
+font-size: 0.8rem;
+z-index: 10;
+border-radius: 4px;
+}
+
+.trim-handle.left {
+left: 0; /* JS کنترل میکنه */
+border-top-left-radius: 8px;
+border-bottom-left-radius: 8px;
+}
+
+.trim-handle.right {
+right: 0; /* JS کنترل میکنه (right: 0 یعنی چسبیده به ته) */
+/* اما برای پوزیشن ابسولوت نسبت به پرنت، ما از style.left استفاده میکنیم */
+border-top-right-radius: 8px;
+border-bottom-right-radius: 8px;
+}
+
+.trimmer-current-word {
+text-align: center;
+background: #333;
+padding: 10px 20px;
+border-radius: 16px;
+color: #fff;
+font-size: 1.1rem;
+font-weight: bold;
+align-self: center;
+margin-bottom: 10px;
+min-width: 100px;
+}
+/* --- استایل‌های جدید بخش فونت و تنظیمات --- */
+.sub-nav-container { display: flex; background: #252525; padding: 5px; border-radius: 14px; margin-bottom: 20px; }
+.sub-nav-btn { flex: 1; text-align: center; padding: 10px; border-radius: 10px; color: #aaa; font-weight: 900; font-size: 0.9rem; cursor: pointer; transition: 0.2s; }
+.sub-nav-btn.active { background: var(--primary); color: #fff; box-shadow: 0 4px 10px rgba(124, 77, 255, 0.3); }
+.sub-section-content { display: none; }
+.sub-section-content.active { display: block; animation: fadeIn 0.2s ease; }
+
+.settings-row { display: flex; align-items: center; justify-content: space-between; background: #252525; padding: 12px 16px; border-radius: 18px; margin-bottom: 12px; border: 1px solid #333; transition: transform 0.2s, background 0.2s; cursor: pointer; }
+.settings-row:active { transform: scale(0.98); background: #2a2a2a; }
+.settings-left-part { display: flex; align-items: center; gap: 14px; }
+.settings-icon-box { width: 38px; height: 38px; border-radius: 12px; background: rgba(124, 77, 255, 0.1); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
+.settings-icon-box svg { width: 20px; height: 20px; fill: var(--primary); filter: drop-shadow(0 0 5px rgba(124,77,255,0.5)); }
+.settings-label { font-weight: 900; color: #eee; font-size: 0.95rem; }
+.color-ring-container { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); padding: 3px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; }
+.settings-row:hover .color-ring-container { border-color: var(--primary); }
+.color-circle-inner { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 10px rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.1); }
+/* --- استایل‌های جدید سوییچ و کشو برای رنگ کلمه فعال --- */
+.settings-row-toggle { background: #252525; border-radius: 18px; margin-bottom: 12px; border: 1px solid #333; overflow: hidden; transition: 0.3s; }
+.setting-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.premium-toggle { width: 48px; height: 28px; background: #3a3a3c; border-radius: 30px; position: relative; transition: 0.3s ease; box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); }
+.premium-toggle::after { content: ''; position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; background: #ffffff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.4); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.settings-row-toggle.active .premium-toggle { background: var(--primary); box-shadow: inset 0 2px 5px rgba(0,0,0,0.2), 0 0 15px rgba(124, 77, 255, 0.4); }
+.settings-row-toggle.active .premium-toggle::after { transform: translateX(-20px); }
+.settings-row-toggle.active .settings-icon-box { background: rgba(124, 77, 255, 0.15); }
+.settings-row-toggle.active .settings-icon-box svg { fill: var(--primary); filter: drop-shadow(0 0 5px rgba(124,77,255,0.5)); }
+.settings-row-toggle.active .settings-label { color: #ffffff; }
+.dropdown-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+.settings-row-toggle.active .dropdown-wrapper { grid-template-rows: 1fr; }
+.dropdown-inner { overflow: hidden; }
+.dropdown-content { background: #1e1e1e; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #333; opacity: 0; transform: translateY(-10px); transition: 0.3s; }
+.settings-row-toggle.active .dropdown-content { opacity: 1; transform: translateY(0); }
+/* ==================== قابلیت چندزبانه (Multi-language) ==================== */
+
+/* --- شیت انتخاب زبان --- */
+#languageSheetOverlay { z-index: 7000; }
+.lang-sheet { max-height: 75vh; overflow-y: auto; }
+.lang-sheet-hint { text-align: center; color: #666; font-size: 0.8rem; margin-top: -10px; margin-bottom: 5px; }
+.lang-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
+.lang-row { display: flex; align-items: center; gap: 12px; background: #2a2a2a; border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: 0.15s; border: 1.5px solid transparent; }
+.lang-row:active { transform: scale(0.98); }
+.lang-row.active { border-color: var(--primary); background: rgba(124, 77, 255, 0.12); }
+.lang-row .lang-flag { font-size: 1.4rem; }
+.lang-row .lang-name { flex: 1; font-size: 1rem; font-weight: 500; }
+.lang-row .lang-check { color: var(--primary); font-size: 1.1rem; }
+
+/* --- کارت تایید پیش از آپلود --- */
+.pre-upload-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 6500; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s; padding: 20px; }
+.pre-upload-overlay.show { opacity: 1; }
+.pre-upload-card { position: relative; background: linear-gradient(160deg, #232323, #1a1a1a); border: 1px solid #333; width: 100%; max-width: 380px; border-radius: 24px; padding: 35px 25px 25px; display: flex; flex-direction: column; align-items: center; text-align: center; transform: scale(0.9) translateY(20px); transition: transform 0.25s; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
+.pre-upload-overlay.show .pre-upload-card { transform: scale(1) translateY(0); }
+.pre-upload-close { position: absolute; top: 14px; left: 14px; background: #2c2c2c; border: none; color: #aaa; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; }
+.pre-upload-icon { width: 70px; height: 70px; border-radius: 50%; background: rgba(124, 77, 255, 0.12); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 15px; }
+.pre-upload-filename { font-size: 1.05rem; font-weight: bold; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pre-upload-filesize { font-size: 0.8rem; color: #777; margin-top: 4px; margin-bottom: 22px; }
+.pre-upload-lang-row { width: 100%; display: flex; align-items: center; justify-content: space-between; background: #2a2a2a; border-radius: 14px; padding: 12px 16px; margin-bottom: 22px; }
+.pre-upload-lang-label { font-size: 0.9rem; color: #ccc; display: flex; align-items: center; gap: 8px; }
+.lang-pill { background: #383838; border: none; color: #fff; padding: 8px 14px; border-radius: 12px; display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 0.9rem; cursor: pointer; }
+.lang-pill:active { background: #444; }
+.btn-start-upload { width: 100%; background: var(--accent-orange); color: #fff; border: none; padding: 16px; border-radius: 16px; font-size: 1rem; font-weight: bold; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 20px rgba(255, 112, 67, 0.35); }
+.btn-start-upload:active { transform: scale(0.97); }

static/js/api.js

@@ -0,0 +1,473 @@
+// متغیر وضعیت برای بازتولید زیرنویس
+var isRegenerating = false;
+
+async function startUpload() { 
+    console.log("Upload started..."); 
+    const f = document.getElementById('fileIn').files[0]; 
+    if(!f) return; 
+
+    if (!db) {
+        try {
+            console.log("Waiting for DB...");
+            await initDB();
+        } catch(e) {
+            alert("خطا در بارگذاری دیتابیس. لطفا صفحه را رفرش کنید.");
+            return;
+        }
+    }
+
+    document.getElementById('homeScreen').style.display = 'none';
+    document.getElementById('loader').style.display = 'flex';
+    
+    // تنظیمات UI برای نمایش درصد آپلود
+    const titleEl = document.getElementById('loaderTitle');
+    const msgEl = document.getElementById('queueStatusMsg');
+    const progContainer = document.getElementById('uploadProgressContainer');
+    const progBar = document.getElementById('uploadProgressBar');
+
+    if (titleEl) titleEl.innerText = "در حال آپلود ویدیو...";
+    if (msgEl) msgEl.innerText = "لطفاً این پنجره را نبندید ☘️";
+    if (progContainer) progContainer.style.display = 'block';
+    if (progBar) progBar.style.width = '0%';
+    
+    const txCheck = db.transaction("projects", "readwrite");
+    const storeCheck = txCheck.objectStore("projects");
+    const reqAll = storeCheck.getAll();
+    
+    reqAll.onsuccess = async (e) => {
+        let projects = e.target.result;
+        projects.sort((a, b) => a.id - b.id);
+        if (projects.length >= 4) {
+            const toDelete = projects[0]; 
+            storeCheck.delete(toDelete.id);
+        }
+        
+        const defaultName = `پروژه ${projects.length >= 4 ? 4 : projects.length + 1}`;
+        const fd = new FormData(); fd.append('file', f); fd.append('language', selectedLanguage || 'fa');
+        
+        try { 
+            // استفاده از XMLHttpRequest برای دریافت درصد پیشرفت واقعی
+            const uploadResponse = await new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', '/api/upload', true);
+
+                xhr.upload.onprogress = (event) => {
+                    if (event.lengthComputable) {
+                        const percentComplete = Math.round((event.loaded / event.total) * 100);
+                        if (progBar) progBar.style.width = percentComplete + '%';
+                        if (msgEl) msgEl.innerText = `در حال ارسال فایل: ${percentComplete}%`;
+                    }
+                };
+
+                xhr.onload = () => {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        resolve(JSON.parse(xhr.responseText));
+                    } else {
+                        reject(new Error("Server Error: " + xhr.status));
+                    }
+                };
+
+                xhr.onerror = () => reject(new Error("Network Error occurred"));
+                xhr.send(fd);
+            });
+
+            // وقتی آپلود 100 درصد شد، پیام را تغییر می‌دهیم
+            if (progContainer) progContainer.style.display = 'none';
+            if (titleEl) titleEl.innerText = "در حال تولید زیرنویس...";
+            if (msgEl) msgEl.innerText = "هوش مصنوعی در حال پردازش صدا است...";
+
+            const taskId = uploadResponse.task_id;
+            let isCompleted = false;
+            let finalData = null;
+
+            // ایجاد حلقه برای چک کردن وضعیت پردازش بدون دخالت کاربر و بدون ذخیره کد پیگیری
+            while (!isCompleted) {
+                await new Promise(r => setTimeout(r, 2000)); // وقفه 2 ثانیه ای
+                const statusRes = await fetch(`/api/upload-status/${taskId}`);
+                if (!statusRes.ok) throw new Error("Status check failed");
+                const statusData = await statusRes.json();
+
+                if (statusData.status === 'completed') {
+                    isCompleted = true;
+                    finalData = statusData.result;
+                } else if (statusData.status === 'failed') {
+                    throw new Error(statusData.error || "خطا در پردازش سرور");
+                }
+            }
+
+            const d = finalData;
+            
+            state.id = d.file_id; state.w = d.width; state.h = d.height; 
+            state.language = d.language || selectedLanguage || 'fa';
+            state.st = { 
+                f: getDefaultFontForLang(state.language), fz: 45, col: '#ffffff', bg: '#000000', 
+                type: 'solid', y: 150, x: 0, name: 'alpha_gradient', 
+                radius: 24, paddingX: 5, paddingY: 15, 
+                useActiveColor: true, 
+                fadeUnread: false,
+                fadeSurrounding: false
+            };
+
+            let rawSegs = d.segments.map((s, idx) => ({
+                ...s,
+                id: s.id || `seg_${Date.now()}_${idx}_${Math.floor(Math.random() * 1000)}`,
+                isHidden: false
+            }));
+            rawSegs.sort((a, b) => a.start - b.start);
+            
+            for(let i = 0; i < rawSegs.length - 1; i++) {
+                const curr = rawSegs[i]; const next = rawSegs[i+1];
+                if (curr.end > next.start) { curr.end = next.start; 
+                    if (curr.words) {
+                        curr.words = curr.words.filter(w => w.start < curr.end);
+                        if(curr.words.length > 0) {
+                            let lastW = curr.words[curr.words.length - 1];
+                            if(lastW.end > curr.end) lastW.end = curr.end;
+                        }
+                    }
+                }
+            }
+
+            // تضمین می‌کنیم که زمان‌های شروع و پایان سگمنت دقیقاً با اولین و آخرین کلمه‌اش منطبق باشند
+            rawSegs.forEach(seg => {
+                if (seg.words && seg.words.length > 0) {
+                    seg.words.sort((a,b) => a.start - b.start);
+                    seg.start = seg.words[0].start;
+                    seg.end = seg.words[seg.words.length - 1].end;
+                }
+            });
+
+            state.segs = rawSegs;
+            
+            const durSec = rawSegs.length > 0 ? rawSegs[rawSegs.length-1].end : 0;
+            let mm = Math.floor(durSec / 60);
+            let ss = Math.floor(durSec % 60);
+            const durStr = `${mm < 10 ? '0'+mm : mm}:${ss < 10 ? '0'+ss : ss}`;
+
+            const txSave = db.transaction("projects", "readwrite");
+            const newProject = {
+                id: Date.now(), name: defaultName, dateStr: getPersianDate(),
+                lastModified: Date.now(), videoBlob: f, state: JSON.parse(JSON.stringify(state)),
+                duration: durStr, thumbnail: null
+            };
+            
+            txSave.objectStore("projects").add(newProject);
+            txSave.oncomplete = () => { 
+                openProject(newProject.id); 
+                // نمایش پیغام قشنگ هوش مصنوعی برای هر ویدیو جدیدی که آپلود میشه
+                setTimeout(() => {
+                    if (typeof showAITooltip === 'function') {
+                        showAITooltip();
+                    }
+                }, 1000); // 1 ثانیه تاخیر برای رندر شدن محیط ادیتور
+            };
+
+        } catch(e) { 
+            console.error(e);
+            alert("خطا در آپلود یا پردازش: " + e.message); loadHome();
+        } finally { 
+            document.getElementById('loader').style.display='none'; 
+            document.getElementById('fileIn').value = '';
+            document.getElementById('queueStatusMsg').innerText = "";
+        }
+    };
+}
+
+// تابع جدید: منطق بازتولید زیرنویس با استفاده از Blob ذخیره شده
+async function regenerateProjectSubtitles() {
+    isRegenerating = true; // فعال کردن فلگ وضعیت
+
+    // 1. تغییر وضعیت UI شیت به حالت لودینگ
+    const sheet = document.getElementById('sheet-regenerate');
+    const stepStart = document.getElementById('regen-step-start');
+    const stepLoad = document.getElementById('regen-step-loading');
+    const stepSuccess = document.getElementById('regen-step-success');
+
+    stepStart.style.display = 'none';
+    stepLoad.style.display = 'flex';
+    // اطمینان از باز بودن شیت
+    document.getElementById('sheetOverlay').classList.add('show');
+    sheet.classList.add('active');
+
+    try {
+        // 2. دریافت فایل ویدیو از دیتابیس
+        const videoBlob = await getVideoBlobFromDB(currentProjectId);
+        if (!videoBlob) throw new Error("فایل ویدیو در دیتابیس یافت نشد");
+
+        // 3. ارسال به سرور برای پردازش مجدد
+        const fd = new FormData();
+        fd.append('file', videoBlob);
+        fd.append('language', state.language || 'fa');
+
+        // ارسال درخواست و دریافت task_id (مانند سیستم آپلود جدید)
+        const r = await fetch('/api/upload', {method:'POST', body:fd});
+        if (!r.ok) throw new Error("خطای سرور: " + r.status);
+        const uploadResponse = await r.json();
+
+        const taskId = uploadResponse.task_id;
+        if (!taskId) throw new Error("مشکل در ارتباط با سرور");
+
+        let isCompleted = false;
+        let finalData = null;
+
+        // 4. حلقه بررسی وضعیت پردازش در پس‌زمینه
+        while (!isCompleted) {
+            await new Promise(res => setTimeout(res, 2000)); // وقفه 2 ثانیه ای
+            const statusRes = await fetch(`/api/upload-status/${taskId}`);
+            if (!statusRes.ok) throw new Error("خطا در بررسی وضعیت");
+            const statusData = await statusRes.json();
+
+            if (statusData.status === 'completed') {
+                isCompleted = true;
+                finalData = statusData.result;
+            } else if (statusData.status === 'failed') {
+                throw new Error(statusData.error || "خطا در پردازش سرور");
+            }
+        }
+
+        const d = finalData;
+
+        // 5. پردازش سگمنت‌های جدید
+        let rawSegs = d.segments.map((s, idx) => ({
+            ...s,
+            id: s.id || `seg_${Date.now()}_${idx}_${Math.floor(Math.random() * 1000)}`,
+            isHidden: false
+        }));
+        rawSegs.sort((a, b) => a.start - b.start);
+
+        for(let i = 0; i < rawSegs.length - 1; i++) {
+            const curr = rawSegs[i]; const next = rawSegs[i+1];
+            if (curr.end > next.start) { curr.end = next.start;
+                if (curr.words) {
+                    curr.words = curr.words.filter(w => w.start < curr.end);
+                    if(curr.words.length > 0) {
+                        let lastW = curr.words[curr.words.length - 1];
+                        if(lastW.end > curr.end) lastW.end = curr.end;
+                    }
+                }
+            }
+        }
+
+        // تضمین می‌کنیم که زمان‌های شروع و پایان سگمنت دقیقاً با اولین و آخرین کلمه‌اش منطبق باشند
+        rawSegs.forEach(seg => {
+            if (seg.words && seg.words.length > 0) {
+                seg.words.sort((a,b) => a.start - b.start);
+                seg.start = seg.words[0].start;
+                seg.end = seg.words[seg.words.length - 1].end;
+            }
+        });
+
+        state.id = d.file_id; 
+        state.segs = rawSegs;
+
+        // 6. ذخیره و رندر مجدد
+        renderSegList();
+        upd();
+        saveProjectToDB();
+
+        // 7. اتمام موفقیت آمیز
+        isRegenerating = false; // غیرفعال کردن فلگ
+
+        // نمایش انیمیشن تیک داخل شیت برای لحظه‌ای کوتاه
+        stepLoad.style.display = 'none';
+        stepSuccess.style.display = 'flex';
+
+        setTimeout(() => {
+            // بستن شیت
+            closeAllSheets();
+            
+            // نمایش Toast زیبا در بالا
+            if (typeof showToast === 'function') {
+                showToast("زیرنویس مجدد تولید شد!", "fa-solid fa-circle-check");
+            }
+
+            // ریست کردن مراحل شیت برای دفعه بعد
+            setTimeout(() => {
+                stepSuccess.style.display = 'none';
+                stepStart.style.display = 'flex';
+            }, 400);
+        }, 1200);
+
+    } catch (e) {
+        console.error(e);
+        isRegenerating = false;
+        alert("خطا در بازتولید زیرنویس: " + e.message);
+        // بازگشت به حالت اول
+        stepLoad.style.display = 'none';
+        stepStart.style.display = 'flex';
+    }
+}
+
+async function generateAIStyle() {
+    const desc = document.getElementById('magicPrompt').value.trim();
+    if (!desc) {
+        showToast("لطفاً اول توضیح بدید چه استایلی می‌خواید", "fa-solid fa-circle-exclamation");
+        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 })
+        });
+        if (!r.ok) throw new Error('Server returned an error');
+        const data = await r.json();
+        const design = data.design || data; // سازگاری با پاسخ‌های قدیمی‌تر
+
+        // اعمال طراحی جدید هوش مصنوعی: این یک استایل کاملاً مجزا و پویا است
+        state.st.name = 'ai_dynamic';
+        state.st.ai_design = design;
+        state.st.col = design.primaryColor;
+        state.st.f = design.font;
+        state.st.fz = parseInt(design.fontSize, 10) || 60;
+        state.st.type = 'transparent';
+
+        syncUIWithState();
+
+        document.querySelectorAll('.font-btn').forEach(b => b.classList.remove('ticked'));
+        const fontBtn = Array.from(document.querySelectorAll('.font-btn')).find(b => b.getAttribute('onclick').includes(`'${state.st.f}'`));
+        if (fontBtn) fontBtn.classList.add('ticked');
+
+        upd();
+        toggleTool('style');
+
+        if (data.success === false) {
+            // هوش مصنوعی واقعاً پاسخ نداد؛ یک طراحی نمونه اعمال شد ولی صادقانه به کاربر اطلاع می‌دهیم
+            console.error('AI style generation failed, fallback used:', data.error);
+            showToast("ارتباط با هوش مصنوعی برقرار نشد؛ یک طراحی نمونه اعمال شد. لطفاً دوباره امتحان کنید.", "fa-solid fa-triangle-exclamation");
+        } else {
+            showToast("طراحی هوشمند جدید اعمال شد! 🎨", "fa-solid fa-wand-magic-sparkles");
+        }
+
+    } catch (e) {
+        console.error(e);
+        showToast("خطا در ارتباط با سرور. لطفاً دوباره تلاش کنید.", "fa-solid fa-triangle-exclamation");
+    } finally {
+        btn.innerHTML = originalText;
+        btn.disabled = false;
+    }
+}
+
+
+async function render() { 
+    v.pause(); togglePlayIcon(false); 
+    document.getElementById('loader').style.display='flex'; 
+    const statusMsg = document.getElementById('queueStatusMsg');
+    statusMsg.innerText = "در حال ارسال به صف...";
+
+    const activeSegments = state.segs.filter(s => !s.isHidden); 
+    
+    // پاکسازی داده‌ها برای ارسال به سرور (رفع خطای 422)
+    const cleanSegments = activeSegments.map((s, idx) => ({
+        id: s.id || `seg_${Date.now()}_${idx}_${Math.floor(Math.random() * 1000)}`,
+        start: s.start,
+        end: s.end,
+        text: s.text,
+        words: s.words ? s.words.map(w => ({
+            word: w.word,
+            start: w.start,
+            end: w.end,
+            highlight: w.highlight || false,
+            color: w.color || null // ارسال رنگ فقط در صورت وجود
+        })) : []
+    }));
+
+    // اطمینان از وجود ابعاد ویدیو
+    let finalW = parseInt(state.w) || 0;
+    let finalH = parseInt(state.h) || 0;
+    
+    // اگر ابعاد صفر بود، سعی کن از ویدیو پلیر بگیری
+    if ((finalW === 0 || finalH === 0) && v) {
+        finalW = v.videoWidth || 1080;
+        finalH = v.videoHeight || 1920;
+    }
+
+    const pl = { 
+        file_id: state.id, 
+        segments: cleanSegments, 
+        video_width: finalW, 
+        video_height: finalH, 
+        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 || 0, 
+            name: state.st.name,
+            radius: state.st.radius || 16,
+            paddingX: state.st.paddingX || 20,
+            paddingY: state.st.paddingY || 10,
+            useActiveColor: ((state.st.styleActiveWordToggles && state.st.styleActiveWordToggles[state.st.name]) !== false),
+            fadeUnread: state.st.fadeUnread !== false,
+            fadeSurrounding: state.st.fadeSurrounding || false,
+            typewriter: state.st.typewriter || false,
+            styleBgColors: state.st.styleBgColors || {}, 
+            styleColors: state.st.styleColors || {},
+            styleActiveColors: state.st.styleActiveColors || {},
+            language: state.language || 'fa',
+            ai_design: state.st.ai_design || null
+        } 
+    }; 
+    
+    try { 
+        let r = await fetch('/api/enqueue-render', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(pl)}); 
+        let d = await r.json(); 
+        
+        if (d.error_code && d.error_code === 'VIDEO_NOT_FOUND') {
+            statusMsg.innerText = "ویدیو در سرور یافت نشد، در حال بارگذاری مجدد...";
+            const videoBlob = await getVideoBlobFromDB(currentProjectId);
+            const fd = new FormData(); fd.append('file', videoBlob); fd.append('file_id', state.id);
+            const reuploadResponse = await fetch('/api/reupload', { method: 'POST', body: fd });
+            if (!reuploadResponse.ok) throw new Error('خطا در بارگذاری مجدد ویدیو.');
+            statusMsg.innerText = "بارگذاری مجدد موفق بود، ارسال دوباره به صف...";
+            r = await fetch('/api/enqueue-render', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(pl)});
+            d = await r.json();
+        }
+
+        if (d.job_id) { pollStatus(d.job_id); } 
+        else { throw new Error(d.error || "خطا لطفاً این پروژه را حذف و ویدیو را مجدداً آپلود کنید."); }
+
+    } catch(e) { 
+        console.error(e);
+        alert('خطا: ' + e.message); document.getElementById('loader').style.display='none'; 
+    } 
+}
+
+function pollStatus(jobId) {
+    const statusMsg = document.getElementById('queueStatusMsg');
+    const interval = setInterval(async () => {
+        try {
+            const r = await fetch(`/api/job-status/${jobId}`);
+            const d = await r.json();
+            if (d.status === 'queued') statusMsg.innerHTML = `شما نفر <span style="color:#00e676; font-size:1.3em;">${d.queue_position}</span> در صف ساخت هستید...`;
+            else if (d.status === 'processing') statusMsg.innerText = "نوبت شماست! در حال ساخت ویدیو...";
+            else if (d.status === 'completed') { clearInterval(interval); showFinalResult(d.url); } 
+            else if (d.status === 'failed') { clearInterval(interval); alert("خطا در ساخت ویدیو: " + d.error); document.getElementById('loader').style.display='none'; }
+        } catch (e) { console.error("خطا در چک کردن وضعیت", e); }
+    }, 2500); 
+}
+
+function showFinalResult(url) {
+    document.getElementById('loader').style.display='none';
+    const resVid = document.getElementById('resultVideo'); 
+    resVid.src = url + "?t=" + new Date().getTime(); 
+    resVid.load(); 
+    const fullUrl = new URL(url, window.location.origin).href;
+    const dlBtn = document.getElementById('downloadBtn');
+    dlBtn.href = fullUrl;
+    dlBtn.onclick = function(e) {
+        e.preventDefault();
+        window.parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: fullUrl }, '*');
+    };
+    document.getElementById('resultScreen').style.display='flex'; 
+    resVid.play(); 
+}
+
+function closeResult() { document.getElementById('resultScreen').style.display='none'; const rv = document.getElementById('resultVideo'); rv.pause(); rv.src = ""; }

static/js/db.js

@@ -0,0 +1,56 @@
+// مدیریت IndexedDB
+function initDB() {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME, DB_VERSION);
+        request.onerror = e => reject(e);
+        request.onupgradeneeded = e => {
+            const db = e.target.result;
+            if (!db.objectStoreNames.contains("projects")) {
+                db.createObjectStore("projects", { keyPath: "id" });
+            }
+        };
+        request.onsuccess = e => {
+            db = e.target.result;
+            resolve(db);
+        };
+    });
+}
+
+function saveProjectToDB() {
+    if (!currentProjectId) return;
+    
+    const tx = db.transaction("projects", "readwrite");
+    const store = tx.objectStore("projects");
+    
+    store.get(currentProjectId).onsuccess = (e) => {
+        const data = e.target.result;
+        if (data) {
+            data.state = state;
+            if(v && v.readyState >= 2) {
+                try {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = 200; canvas.height = 350; 
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
+                    data.thumbnail = canvas.toDataURL('image/jpeg', 0.5);
+                } catch(err) {}
+            }
+            store.put(data);
+        }
+    };
+}
+
+function getVideoBlobFromDB(projectId) {
+    return new Promise((resolve, reject) => {
+        if (!db) return reject("Database not initialized.");
+        const tx = db.transaction("projects", "readonly");
+        const store = tx.objectStore("projects");
+        const request = store.get(projectId);
+        request.onsuccess = e => {
+            const projectData = e.target.result;
+            if (projectData && projectData.videoBlob) resolve(projectData.videoBlob);
+            else reject("Video blob not found.");
+        };
+        request.onerror = e => reject("Error fetching from DB.");
+    });
+}

static/js/globals.js

@@ -0,0 +1,413 @@
+// متغیرهای دیتابیس
+const DB_NAME = "SubtitleStudioDB";
+const DB_VERSION = 1;
+let db;
+let currentProjectId = null;
+let currentActionProjectId = null;
+let currentActionProjectName = "";
+
+// وضعیت سراسری برنامه
+let state = {
+    id: null, w: 1080, h: 1920, segs: [], language: 'fa',
+    st: { f: 'pinar', fz: 45, col: '#A020F0', bg: '#000000', type: 'solid', y: 150, x: 0, name: 'alpha_gradient', radius: 24, paddingX: 5, paddingY: 15, useActiveColor: true }
+};
+let curSeg = -1; 
+let manualOverride = false; 
+
+// --- چندزبانه (Multi-language) ---
+// لیست پیش‌فرض (در صورت عدم دسترسی به سرور موقع بارگذاری صفحه از همین استفاده می‌شود)
+let LANGUAGES_LIST = [
+    { code: 'fa', label: 'فارسی', flag: '🇮🇷', rtl: true },
+    { code: 'en', label: 'English', flag: '🇺🇸', rtl: false },
+    { code: 'ar', label: 'العربية', flag: '🇸🇦', rtl: true },
+    { code: 'tr', label: 'Türkçe', flag: '🇹🇷', rtl: false },
+    { code: 'es', label: 'Español', flag: '🇪🇸', rtl: false },
+    { code: 'fr', label: 'Français', flag: '🇫🇷', rtl: false },
+    { code: 'de', label: 'Deutsch', flag: '🇩🇪', rtl: false },
+    { code: 'it', label: 'Italiano', flag: '🇮🇹', rtl: false },
+    { code: 'pt', label: 'Português', flag: '🇵🇹', rtl: false },
+    { code: 'ur', label: 'اردو', flag: '🇵🇰', rtl: true },
+];
+let selectedLanguage = 'fa'; // زبانی که کاربر برای پروژه بعدی انتخاب کرده
+let pendingSelectedVideoFile = null; // فایل انتخاب‌شده پیش از شروع آپلود
+
+function getLangInfo(code) {
+    return LANGUAGES_LIST.find(l => l.code === code) || LANGUAGES_LIST[0];
+}
+
+function getDefaultFontForLang(code) {
+    if (code === 'fa') return 'pinar';
+    if (code === 'ar') return 'amiri';
+    if (code === 'ur') return 'nastaliq';
+    return 'vazir';
+}
+
+async function initLanguagesList() {
+    try {
+        const r = await fetch('/api/languages');
+        if (r.ok) {
+            const d = await r.json();
+            if (d.languages && d.languages.length > 0) {
+                LANGUAGES_LIST = d.languages;
+            }
+        }
+    } catch (e) { console.warn('Could not fetch languages list, using defaults', e); }
+    renderLanguageList();
+    updateLanguageButtons();
+}
+
+function renderLanguageList() {
+    const box = document.getElementById('languageList');
+    if (!box) return;
+    box.innerHTML = LANGUAGES_LIST.map(l => `
+        <div class="lang-row ${l.code === selectedLanguage ? 'active' : ''}" onclick="selectLanguage('${l.code}')">
+            <span class="lang-flag">${l.flag}</span>
+            <span class="lang-name">${l.label}</span>
+            ${l.code === selectedLanguage ? '<i class="fa-solid fa-circle-check lang-check"></i>' : ''}
+        </div>
+    `).join('');
+}
+
+function selectLanguage(code) {
+    selectedLanguage = code;
+    renderLanguageList();
+    updateLanguageButtons();
+    closeLanguageSheet();
+}
+
+function updateLanguageButtons() {
+    const info = getLangInfo(selectedLanguage);
+    const homeFlag = document.getElementById('homeLangFlag');
+    const homeLabel = document.getElementById('homeLangLabel');
+    if (homeFlag) homeFlag.innerText = info.flag;
+    if (homeLabel) homeLabel.innerText = info.label;
+
+    const pillFlag = document.getElementById('langPillFlag');
+    const pillLabel = document.getElementById('langPillLabel');
+    if (pillFlag) pillFlag.innerText = info.flag;
+    if (pillLabel) pillLabel.innerText = info.label;
+}
+
+function openLanguageSheet() {
+    renderLanguageList();
+    document.getElementById('languageSheetOverlay').style.display = 'flex';
+}
+
+function closeLanguageSheet() {
+    document.getElementById('languageSheetOverlay').style.display = 'none';
+}
+
+function formatFileSize(bytes) {
+    if (!bytes) return '۰ مگابایت';
+    const mb = bytes / (1024 * 1024);
+    if (mb < 1) return Math.round(bytes / 1024) + ' کیلوبایت';
+    return mb.toFixed(1) + ' مگابایت';
+}
+
+// وقتی کاربر ویدیویی را از گالری/فایل‌ها انتخاب می‌کند: بلافاصله آپلود شروع نمی‌شود
+// بلکه کارت پیش‌نمایش با انتخاب زبان نمایش داده می‌شود تا کاربر تایید کند
+function onVideoFileChosen() {
+    const inp = document.getElementById('fileIn');
+    const f = inp.files && inp.files[0];
+    if (!f) return;
+    pendingSelectedVideoFile = f;
+
+    document.getElementById('preUploadFileName').innerText = f.name;
+    document.getElementById('preUploadFileSize').innerText = formatFileSize(f.size);
+    updateLanguageButtons();
+
+    const overlay = document.getElementById('preUploadOverlay');
+    overlay.style.display = 'flex';
+    setTimeout(() => overlay.classList.add('show'), 10);
+}
+
+function cancelPreUpload() {
+    pendingSelectedVideoFile = null;
+    document.getElementById('fileIn').value = '';
+    const overlay = document.getElementById('preUploadOverlay');
+    overlay.classList.remove('show');
+    setTimeout(() => overlay.style.display = 'none', 250);
+}
+
+function confirmStartUpload() {
+    const overlay = document.getElementById('preUploadOverlay');
+    overlay.classList.remove('show');
+    setTimeout(() => overlay.style.display = 'none', 250);
+    startUpload();
+}
+
+// --- ترجمه متن نمونه در قالب‌های آماده (سلام اینجا آلفا است) ---
+const DEMO_WORDS = {
+    fa: ["سلام", "اینجا", "آلفا", "است"],
+    en: ["Hi", "this", "is", "Alpha"],
+    ar: ["مرحباً", "هنا", "ألفا", "الآن"],
+    tr: ["Merhaba", "burada", "Alfa", "şimdi"],
+    es: ["Hola", "aquí", "Alfa", "ahora"],
+    fr: ["Salut", "ici", "Alpha", "maintenant"],
+    de: ["Hallo", "hier", "Alpha", "jetzt"],
+    it: ["Ciao", "qui", "Alfa", "adesso"],
+    pt: ["Oi", "aqui", "Alfa", "agora"],
+    ur: ["ہیلو", "یہاں", "الفا", "ہے"],
+};
+
+function applyDemoLanguage(langCode) {
+    const info = getLangInfo(langCode);
+    const words = DEMO_WORDS[langCode] || DEMO_WORDS.fa;
+    const isRtl = info.rtl;
+
+    // چیدمان راست‌به‌چپ/چپ‌به‌راست کارت‌های پیش‌نمایش قالب‌ها بر اساس زبان پروژه
+    document.querySelectorAll('.demo-row').forEach(row => {
+        row.style.direction = isRtl ? 'rtl' : 'ltr';
+    });
+    // کلمه‌های تکی
+    document.querySelectorAll('[data-dw]').forEach(el => {
+        const idx = parseInt(el.getAttribute('data-dw'), 10);
+        if (!isNaN(idx) && words[idx] !== undefined) el.textContent = words[idx];
+    });
+    // بازه‌ای از کلمات (مثلاً کلمات ۱ تا ۳ با هم در یک span)
+    document.querySelectorAll('[data-dw-range]').forEach(el => {
+        const range = el.getAttribute('data-dw-range').split('-').map(Number);
+        el.textContent = words.slice(range[0], range[1] + 1).join(' ');
+    });
+    // عبارت کامل در یک تکه (بدون نیاز به تغییر جهت چون یک متن یکپارچه است)
+    document.querySelectorAll('.demo-full').forEach(el => {
+        el.textContent = words.join(' ');
+    });
+}
+
+function aiEase(name, p) {
+    p = Math.max(0, Math.min(1, p));
+    if (name === 'linear') return p;
+    if (name === 'punch') return 1 - Math.pow(1 - p, 3);
+    if (name === 'elastic') {
+        if (p <= 0 || p >= 1) return p;
+        return Math.pow(2, -10 * p) * Math.sin((p * 10 - 0.75) * (2 * Math.PI) / 3) + 1;
+    }
+    // smooth (پیش‌فرض)
+    return 1 - (1 - p) * (1 - p);
+}
+
+function applyEditorTextDirection(langCode) {
+    const info = getLangInfo(langCode);
+    const dir = info.rtl ? 'rtl' : 'ltr';
+    const activeTextEl = document.getElementById('activeText');
+    if (activeTextEl) activeTextEl.dir = dir;
+    const timelineEl = document.getElementById('timelineScroll');
+    if (timelineEl) timelineEl.dir = dir;
+}
+
+// المان‌های رابط کاربری
+const v = document.getElementById('vid'); 
+const tEl = document.getElementById('activeText');
+const toolsContainer = document.getElementById('toolsContainer');
+
+// متغیرهای ویرایش متن
+let activeWordId = null; // Format: "segIndex-wordIndex"
+let previewInterval;
+let tempStartTime = 0;
+let tempEndTime = 0;
+
+// متغیرهای تاچ
+let initialY = 0, initialX = 0, initialBottom = 0, initialXState = 0, initialDist = 0, initialFontSize = 0, touchMode = null;
+
+// --- تابع اصلی نمایش زیرنویس در مرورگر (با منطق جدید) ---
+function updateOverlayContent(currentTime) {
+    if (!state.segs) return;
+    const idx = state.segs.findIndex(s => currentTime >= s.start && currentTime < s.end);
+    if(idx !== -1) { 
+        const seg = state.segs[idx]; 
+        if(seg.isHidden) { tEl.style.opacity = 0; } 
+        else { 
+            tEl.style.opacity = 1; 
+            
+            // ==========================================================
+            // === بلوک ۱: منطق قدیمی برای استایل‌های کارائوکه (دست‌نخورده) ===
+            // ==========================================================
+            const karaokeStyles = ['auto_director', 'karaoke_static', 'instagram_box', 'alpha_gradient'];
+            if(karaokeStyles.includes(state.st.name) && seg.words) {
+                let html = ""; 
+                const GAP = 5;
+
+                seg.words.forEach((w, i) => { 
+                    let isActive = (currentTime >= w.start && currentTime <= w.end); 
+                    
+                    let boxColor = state.st.col;
+                    let textColor = '#ffffff';
+
+                    if (state.st.name === 'instagram_box') {
+                        boxColor = '#1a1a1a';
+                        if (isActive) { textColor = '#ffffff'; } 
+                        else if (currentTime > w.end) { textColor = '#000000'; } 
+                        else { textColor = '#d1d1d6'; }
+                    } else if (state.st.name === 'alpha_gradient') {
+                        boxColor = 'linear-gradient(135deg, #7c4dff, #b388ff)';
+                        if (isActive) { textColor = '#ffffff'; } 
+                        else if (currentTime > w.end) { textColor = '#ffffff'; } 
+                        else { textColor = 'rgba(255,255,255,0.35)'; }
+                    } else if (state.st.name === 'auto_director') {
+                         boxColor = (i % 2 === 0 ? '#00D7FF' : '#FF0080');
+                    } 
+                    
+                    if (w.color) textColor = w.color;
+                    let baseStyle = "display: inline-block; vertical-align: middle; transition: all 0.1s; font-family: inherit;";
+
+                    if(isActive) {
+                        let py = state.st.paddingY; let px = state.st.paddingX;
+                        html += `<span style="${baseStyle} background: ${boxColor}; color: ${textColor} !important; border-radius: ${state.st.radius}px; box-shadow: 0 0 10px rgba(0,0,0,0.3); padding: ${py}px ${px}px; margin: -${py}px calc(${GAP}px - ${px}px); position: relative; z-index: 100; white-space: nowrap;">${w.word}</span>`;
+                    } else {
+                        html += `<span style="${baseStyle} color: ${textColor} !important; text-shadow: none; margin: 0 ${GAP}px; padding: 0; position: relative; z-index: 1;">${w.word}</span>`;
+                    }
+                    
+                    if ((i + 1) % 5 === 0 && i !== seg.words.length - 1) { html += "<br><br>"; }
+                });
+                tEl.innerHTML = html;
+            } 
+            
+            // =================================================================
+            // === بلوک ۲: منطق قدیمی برای استایل تایپی (Progressive) (دست‌نخورده) ===
+            // =================================================================
+            else if (state.st.name === 'progressive_write' && seg.words) { 
+                let html = ""; 
+                seg.words.forEach((w, i) => { 
+                    let styleExtra = w.color ? `color:${w.color} !important;` : "";
+                    let baseStyle = "display: inline-block; vertical-align: middle; margin: 0px 3px;";
+                    if(currentTime >= w.start) html += `<span style="${baseStyle} opacity:1; ${styleExtra}">${w.word}</span> `; 
+                    else html += `<span style="${baseStyle} opacity:0; ${styleExtra}">${w.word}</span> `; 
+                    if ((i + 1) % 5 === 0 && i !== seg.words.length - 1) { html += "<br><br>"; }
+                }); 
+                tEl.innerHTML = html.trim(); 
+            } 
+            
+            // ============================================================================
+            // === بلوک ۳: منطق جدید و هوشمند برای موزیکال و استایل‌های آینده (کد جدید) ===
+            // ============================================================================
+            else if (STYLE_TEMPLATES && STYLE_TEMPLATES[state.st.name]) {
+                const template = STYLE_TEMPLATES[state.st.name];
+                // برای استایل‌هایی مثل موزیک پلیر، کل متن سگمنت را جایگزین می‌کنیم
+                const renderedHtml = template.replace(/{{WORD}}/g, seg.text);
+                tEl.innerHTML = renderedHtml;
+            }
+
+            // =========================================================
+            // === بلوک ۴: منطق نهایی برای استایل‌های کلاسیک (دست‌نخورده) ===
+            // =========================================================
+            else { 
+                if (seg.words && seg.words.length > 0) {
+                     let html = "";
+                     seg.words.forEach((w, i) => {
+                         let styleExtra = w.color ? `color:${w.color} !important;` : "";
+                         html += `<span style="${styleExtra}">${w.word}</span> `;
+                         if ((i + 1) % 5 === 0 && i !== seg.words.length - 1) { html += "<br><br>"; }
+                     });
+                     tEl.innerHTML = html;
+                } else {
+                    tEl.innerText = seg.text; 
+                }
+            } 
+        } 
+    } else { tEl.style.opacity = 0; } 
+}
+
+function upd() {
+    saveProjectToDB();
+    
+    const elFz = document.getElementById('fz');
+    if(elFz) state.st.fz = Math.round(10 + (parseFloat(elFz.value) / 100) * 140);
+    const elPos = document.getElementById('pos');
+    if(elPos) state.st.y = Math.round((parseFloat(elPos.value) / 100) * 1200);
+    const elPosX = document.getElementById('posX');
+    if(elPosX) state.st.x = Math.round((parseFloat(elPosX.value) / 100) * 500);
+    const elRadius = document.getElementById('radius');
+    if(elRadius) state.st.radius = parseInt(elRadius.value, 10);
+    const elPadX = document.getElementById('paddingX');
+    if(elPadX) state.st.paddingX = parseInt(elPadX.value, 10);
+    const elPadY = document.getElementById('paddingY');
+    if(elPadY) state.st.paddingY = parseInt(elPadY.value, 10);
+
+    updateColorPreviewButtons();
+
+    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.lineHeight = '0.8'; 
+    tEl.style.bottom = state.st.y + 'px'; 
+    tEl.style.textAlign = 'center'; 
+    tEl.style.left = '50%'; 
+    tEl.style.transform = `translateX(calc(-50% + ${state.st.x || 0}px))`; 
+    tEl.style.padding = '0'; 
+    tEl.style.borderRadius = '0px';
+
+    const karaokeStyles = ['karaoke_static', 'auto_director', 'alpha_gradient'];
+    
+    if (state.st.name === 'instagram_box') {
+        tEl.style.backgroundColor = '#ffffff'; 
+        tEl.style.color = '#d1d1d6'; 
+        tEl.style.webkitTextStroke = '0px'; 
+        tEl.style.textShadow = 'none';
+        
+        const finalPaddingTop = (state.st.paddingY || 10) + 4;
+        const finalPaddingBottom = (state.st.paddingY || 10) + 4;
+        const finalPaddingX = (state.st.paddingX || 20) + 15;
+
+        tEl.style.padding = `${finalPaddingTop}px ${finalPaddingX}px ${finalPaddingBottom}px ${finalPaddingX}px`;
+        tEl.style.borderRadius = `${state.st.radius || 16}px`;
+        
+    } else if(karaokeStyles.includes(state.st.name)) {
+        tEl.style.backgroundColor = 'transparent'; tEl.style.color = '#FFFFFF'; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none';
+    } else if (state.st.name === 'plain_white' || state.st.name === 'white_outline') {
+        tEl.style.color = '#FFFFFF'; tEl.style.backgroundColor = 'transparent'; tEl.style.webkitTextStroke = (state.st.name === 'white_outline') ? `${Math.max(3, state.st.fz / 4.5)}px #000000` : '0px'; tEl.style.paintOrder = 'stroke fill'; tEl.style.webkitPaintOrder = 'stroke fill'; tEl.style.textShadow = 'none';
+    } else {
+        if(!state.st.col) state.st.col = '#FFFFFF'; if(!state.st.bg) state.st.bg = '#000000';
+        tEl.style.color = state.st.col;
+        
+        tEl.style.padding = `${state.st.paddingY}px ${state.st.paddingX}px`;
+        tEl.style.borderRadius = `${state.st.radius}px`;
+
+        if(state.st.type === 'solid' || state.st.type === 'transparent') {
+            let bgColor = state.st.bg;
+            if (state.st.type === 'transparent') {
+                if(bgColor.startsWith('#') && bgColor.length === 7) {
+                    let r = parseInt(bgColor.substring(1, 3), 16); let g = parseInt(bgColor.substring(3, 5), 16); let b = parseInt(bgColor.substring(5, 7), 16);
+                    bgColor = `rgba(${r},${g},${b},0.6)`;
+                } else if(bgColor.startsWith('rgba')) {
+                    bgColor = bgColor.replace(/[\d.]+\)$/, '0.6)'); 
+                }
+            }
+            tEl.style.backgroundColor = bgColor;
+            tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none';
+        } else if (state.st.type === 'outline') {
+            tEl.style.backgroundColor = 'transparent';
+            const s = Math.max(3, state.st.fz / 4.5); tEl.style.webkitTextStroke = `${s}px ${state.st.bg}`;
+            tEl.style.paintOrder = 'stroke fill'; tEl.style.webkitPaintOrder = 'stroke fill';
+            tEl.style.textShadow = 'none';
+        } else {
+            tEl.style.backgroundColor = 'transparent'; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none';
+        }
+    }
+
+    const boxControlsPanel = document.getElementById('boxControlsPanel');
+    const currentConfig = STYLE_CONFIGS[state.st.name];
+    
+    if (boxControlsPanel && currentConfig) {
+        const hasRadius = currentConfig.panels.includes('radius');
+        boxControlsPanel.style.display = hasRadius ? 'block' : 'none';
+        
+        const boxPreview = document.getElementById('boxPreview');
+        if (boxPreview && hasRadius) {
+            boxPreview.style.borderRadius = `${state.st.radius || 16}px`;
+            boxPreview.style.padding = `${state.st.paddingY || 10}px ${state.st.paddingX || 20}px`;
+            
+            let previewBg = '#000';
+            if(state.st.name === 'instagram_box') previewBg = '#ffffff';
+            else if(state.st.name === 'alpha_gradient') previewBg = 'linear-gradient(135deg, #7c4dff, #b388ff)';
+            else if(state.st.bg) previewBg = state.st.bg;
+            
+            boxPreview.style.background = previewBg;
+            boxPreview.style.color = (state.st.name === 'instagram_box') ? '#000' : '#fff';
+        }
+    }
+}

static/js/main.js

@@ -0,0 +1,184 @@
+// راه‌اندازی اولیه و هندلرهای رویداد اصلی
+
+window.onload = function() {
+    startAnim('#animPreviewStatic');
+    initDB().then(() => {
+        loadHome();
+    });
+    syncModeButtons();
+    initLanguagesList();
+    applyDemoLanguage('fa');
+    
+    const timeline = document.getElementById('timelineScroll');
+    timeline.addEventListener('touchstart', () => { v.pause(); togglePlayIcon(false); }, {passive: true});
+    timeline.addEventListener('mousedown', () => { v.pause(); togglePlayIcon(false); });
+
+    // هماهنگ‌سازی حرکت انیمیشن ویژوالایزرها با وضعیت پخش و توقف ویدیو
+    v.addEventListener('play', () => {
+        const vBars = tEl.querySelectorAll('.v-bar');
+        vBars.forEach(b => b.style.animationPlayState = 'running');
+    });
+    v.addEventListener('pause', () => {
+        const vBars = tEl.querySelectorAll('.v-bar');
+        vBars.forEach(b => b.style.animationPlayState = 'paused');
+    });
+};
+
+window.onresize = fit;
+
+// --- موتور زمان‌سنج هوشمند (High-Precision Sync) جایگزین v.ontimeupdate ---
+function runFastSync() {
+    // فقط وقتی ویدیو در حال پخش است یا دستی جابجا می‌شود اجرا شود
+    if (!v.paused || manualOverride) {
+        const cur = v.currentTime;
+        
+        const timeDisplay = document.getElementById('globalTimeDisplay');
+        if (timeDisplay) {
+            timeDisplay.innerText = `${formatTimeSimple(cur)} / ${formatTimeSimple(v.duration || 0)}`;
+        }
+        
+        if (!v.paused) manualOverride = false;
+
+        let foundWord = false;
+        // اضافه کردن 0.1 ثانیه تلورانس برای دیده شدن کلمات آخر جمله
+        for (let s = 0; s < state.segs.length; s++) {
+            const seg = state.segs[s];
+            if (cur >= seg.start && cur < (seg.end + 0.1)) {
+                if (seg.words) {
+                    for (let w = 0; w < seg.words.length; w++) {
+                        const word = seg.words[w];
+                        // بررسی فعال بودن کلمه با دقت بالا و تلورانس شروع و پایان
+                        if (cur >= (word.start - 0.02) && cur < (word.end + 0.05)) {
+                            const uid = `${s}-${w}`;
+                            if (activeWordId !== uid) {
+                                activeWordId = uid;
+                                document.querySelectorAll('.word-chip').forEach(c => c.classList.remove('active'));
+                                const el = document.getElementById(`w-${uid}`);
+                                if(el) {
+                                    el.classList.add('active');
+                                    if(!manualOverride) el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+                                }
+                                updateSplitButton();
+                            }
+                            foundWord = true; 
+                            break;
+                        }
+                    }
+                }
+            }
+            if (foundWord) break;
+        }
+
+        if (!foundWord && !manualOverride) {
+            document.querySelectorAll('.word-chip').forEach(c => c.classList.remove('active'));
+            activeWordId = null;
+            const toolbar = document.getElementById('toolbar');
+            if (toolbar) toolbar.classList.remove('show');
+        }
+        
+        updateOverlayContent(cur);
+    }
+    // تکرار مداوم برای دقت ۶۰ فریم در ثانیه
+    requestAnimationFrame(runFastSync);
+}
+
+// شروع به کار موتور همزمان با لود شدن صفحه
+requestAnimationFrame(runFastSync);
+
+// --- سیستم لمسی ---
+
+// ۱. ساخت کادر نامرئی بزرگ برای راحت‌تر گرفتن متن و کادر سفید هنگام لمس
+const touchAreaStyle = document.createElement('style');
+touchAreaStyle.innerHTML = `
+    /* ایجاد یک حاشیه نامرئی ۱۰۰ پیکسلی دور متن تا کاربر راحت‌تر آن را بگیرد */
+    #activeText::before {
+        content: '';
+        position: absolute;
+        top: -100px; bottom: -100px; left: -100px; right: -100px;
+        z-index: 999;
+    }
+    /* مستطیل سفید که هنگام جابجایی ظاهر می‌شود */
+    #activeText.is-dragging {
+        outline: 2px solid #ffffff;
+        outline-offset: 20px;
+        border-radius: 8px;
+        transition: outline 0.1s;
+    }
+`;
+document.head.appendChild(touchAreaStyle);
+
+// قفل کردن رفتار پیش‌فرض مرورگر روی این المان تا صفحه اسکرول نشود
+tEl.style.touchAction = 'none'; 
+
+tEl.addEventListener('touchstart', (e) => { 
+    // متوقف کردن ویدیو در صورت پخش بودن به محض لمس کادر
+    if (v && !v.paused) {
+        v.pause();
+        if (typeof togglePlayIcon === 'function') togglePlayIcon(false);
+    }
+
+    // غیرفعال کردن اکشن‌های بومی مرورگر از ریشه لمس برای فعالسازی زوم جاوااسکریپتی
+    e.preventDefault(); 
+    e.stopPropagation();
+
+    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 || 0; 
+        
+        tEl.classList.add('is-dragging');
+
+    } 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; 
+        tEl.classList.add('is-dragging');
+    } 
+}, {passive: false});
+
+tEl.addEventListener('touchmove', (e) => { 
+    if (!touchMode) return; 
+    e.preventDefault(); 
+    e.stopPropagation(); 
+    
+    // تشخیص هوشمند قرار گرفتن انگشت دوم در هر جای صفحه و سوییچ آنی به زوم
+    if (e.touches.length === 2) {
+        if (touchMode !== 'pinch') {
+            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; 
+        }
+        
+        let dist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY); 
+        if (initialDist > 0) {
+            let newSize = initialFontSize * (dist / initialDist); 
+            state.st.fz = Math.round(Math.max(10, Math.min(150, newSize))); 
+            tEl.style.fontSize = state.st.fz + 'px';
+            syncUIWithState();
+        }
+        
+    } else if (touchMode === 'drag' && e.touches.length === 1) { 
+        let diffY = (initialY - e.touches[0].clientY) * 1.8; 
+        let newBottom = initialBottom + diffY;
+        state.st.y = Math.round(newBottom);
+
+        let diffX = (e.touches[0].clientX - initialX) * 1.5; 
+        let newX = initialXState + diffX;
+        state.st.x = Math.round(newX);
+
+        // اعمال تغییرات به صورت مستقیم و فوق‌روان
+        tEl.style.bottom = state.st.y + 'px';
+        tEl.style.transform = `translateX(calc(-50% + ${state.st.x || 0}px))`;
+        syncUIWithState(); 
+    } 
+}, {passive: false});
+
+tEl.addEventListener('touchend', () => { 
+    touchMode = null; 
+    // مخفی کردن کادر سفید
+    tEl.classList.remove('is-dragging');
+    // ذخیره نهایی
+    upd(); 
+});

static/js/ui.js

@@ -0,0 +1,306 @@
+// مدیریت رابط کاربری (مدال‌ها، شیت‌ها، تغییر صفحات)
+
+async function loadHome() {
+    document.getElementById('homeScreen').style.display = 'flex';
+    document.getElementById('editorScreen').style.display = 'none';
+    
+    if (!db) {
+         try { await initDB(); } catch(e) { console.error("DB Init Failed inside loadHome"); return; }
+    }
+
+    const tx = db.transaction("projects", "readonly");
+    const store = tx.objectStore("projects");
+    const req = store.getAll();
+    
+    req.onsuccess = (e) => {
+        let projects = e.target.result;
+        projects.sort((a, b) => b.id - a.id);
+        
+        const grid = document.getElementById('projectsGrid');
+        const placeholder = document.getElementById('noProjectsPlaceholder');
+
+        if (projects.length === 0) {
+            grid.innerHTML = '';
+            placeholder.style.display = 'flex';
+        } else {
+            placeholder.style.display = 'none';
+            grid.innerHTML = '';
+            
+            projects.forEach((p, index) => {
+                const card = document.createElement('div');
+                card.className = 'project-card';
+                card.onclick = () => openProject(p.id);
+                
+                const thumbUrl = p.thumbnail ? `url(${p.thumbnail})` : 'none';
+                
+                card.innerHTML = `
+                    <div class="card-thumb" style="background-image: ${thumbUrl}">
+                        <div class="card-overlay"></div>
+                        <div class="card-menu" onclick="openActionSheet(${p.id}, '${p.name}', event)"><i class="fa-solid fa-ellipsis"></i></div>
+                        <div class="card-duration">${p.duration || '00:00'}</div>
+                    </div>
+                    <div class="card-details">
+                        <div class="card-title">${p.name}</div>
+                        <div class="card-date">${p.dateStr}</div>
+                    </div>
+                `;
+                grid.appendChild(card);
+            });
+        }
+    };
+}
+
+function openActionSheet(id, name, event) {
+    event.stopPropagation();
+    currentActionProjectId = id;
+    currentActionProjectName = name;
+    const sheet = document.getElementById('projectActionOverlay');
+    sheet.style.display = 'flex';
+}
+
+function closeActionSheet() {
+    const sheet = document.getElementById('projectActionOverlay');
+    sheet.style.display = 'none';
+}
+
+function openDeleteConfirmation() {
+    closeActionSheet();
+    showConfirmationModal({
+        iconClass: 'fa-solid fa-trash-can',
+        title: 'حذف پروژه',
+        description: `آیا از حذف کامل «${currentActionProjectName}» مطمئن هستید؟`,
+        confirmText: 'بله، حذف کن',
+        confirmClass: 'delete',
+        onConfirm: () => {
+            const tx = db.transaction("projects", "readwrite");
+            const store = tx.objectStore("projects");
+            
+            // ابتدا دریافت پروژه از دیتابیس مرورگر برای پیدا کردن شناسه سرور (file_id)
+            store.get(currentActionProjectId).onsuccess = (e) => {
+                const project = e.target.result;
+                if (project && project.state && project.state.id) {
+                    const fileId = project.state.id;
+                    // ارسال درخواست حذف به سرور در پس‌زمینه (بدون معطل کردن کاربر)
+                    fetch(`/api/delete-project/${fileId}`, { method: 'DELETE' })
+                        .catch(err => console.error("Failed to delete project files on server:", err));
+                }
+                
+                // حذف پروژه از دیتابیس محلی مرورگر
+                store.delete(currentActionProjectId);
+            };
+            
+            tx.oncomplete = () => loadHome();
+        }
+    });
+}
+
+function openRenameModal() {
+    closeActionSheet();
+    const modal = document.getElementById('renameModal');
+    const input = document.getElementById('renameInput');
+    input.value = currentActionProjectName;
+    modal.style.display = 'flex';
+    setTimeout(() => modal.classList.add('show'), 10);
+}
+
+function closeRenameModal() {
+    const modal = document.getElementById('renameModal');
+    modal.classList.remove('show');
+    setTimeout(() => modal.style.display = 'none', 300);
+}
+
+function saveRename() {
+    const newName = document.getElementById('renameInput').value.trim();
+    if (newName && currentActionProjectId) {
+        const tx = db.transaction("projects", "readwrite");
+        const store = tx.objectStore("projects");
+        store.get(currentActionProjectId).onsuccess = (e) => {
+            const project = e.target.result;
+            if (project) {
+                project.name = newName;
+                store.put(project);
+            }
+        };
+        tx.oncomplete = () => {
+            closeRenameModal();
+            loadHome();
+        };
+    } else {
+        closeRenameModal();
+    }
+}
+
+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');
+        toolsContainer.classList.add('open');
+        
+        if(toolName === 'text') {
+            toolsContainer.style.maxHeight = 'none';
+            renderSegList(); 
+
+            if (state.segs && state.segs.length > 0) {
+                let sIdxToSelect = 0;
+                const curTime = v.currentTime;
+                const currentSegIdx = state.segs.findIndex(s => curTime >= s.start && curTime <= s.end);
+                
+                if (currentSegIdx !== -1) sIdxToSelect = currentSegIdx;
+                else {
+                    const nextSegIdx = state.segs.findIndex(s => s.start > curTime);
+                    if (nextSegIdx !== -1) sIdxToSelect = nextSegIdx;
+                }
+
+                setTimeout(() => {
+                    if (state.segs[sIdxToSelect] && state.segs[sIdxToSelect].words.length > 0) {
+                        highlightWord(sIdxToSelect, 0, true);
+                    }
+                }, 50);
+            }
+        } else {
+            toolsContainer.style.maxHeight = ''; 
+        }
+    }
+}
+
+function toggleCustomAccordion() { document.getElementById('customAccordion').classList.toggle('open'); }
+
+function closeAllSheets() {
+    const overlay = document.getElementById('sheetOverlay');
+    overlay.classList.remove('show');
+    document.querySelectorAll('.bottom-sheet').forEach(s => { 
+        s.classList.remove('active'); 
+    });
+    document.getElementById('textInput').blur();
+    
+    if(previewInterval) clearInterval(previewInterval);
+    v.pause();
+    
+    const icon1 = document.getElementById('btnPreviewPlay')?.querySelector('i');
+    if(icon1) icon1.className = "fa-solid fa-play";
+    
+    const icon2 = document.getElementById('btnTimeSheetPlayIcon');
+    if(icon2) icon2.className = "fa-solid fa-play";
+}
+
+function openSheet(type) {
+    if (!activeWordId && type !== 'regenerate' && type !== 'wordcount') return;
+    
+    closeAllSheets();
+    const targetSheet = document.getElementById(`sheet-${type}`);
+    const overlay = document.getElementById('sheetOverlay');
+
+    if(type === 'text') {
+        const [sIdx, wIdx] = activeWordId.split('-').map(Number);
+        const seg = state.segs[sIdx];
+        const word = seg.words[wIdx];
+        document.getElementById('textInput').value = word.word;
+        document.getElementById('textTimeDisplay').innerText = `${fmt(word.start)} -> ${fmt(word.end)}`;
+    } else if(type === 'time') {
+        const [sIdx, wIdx] = activeWordId.split('-').map(Number);
+        const seg = state.segs[sIdx];
+        const word = seg.words[wIdx];
+        
+        tempStartTime = word.start; 
+        tempEndTime = word.end;
+        
+        document.getElementById('timeSheetWord').innerText = word.word;
+        
+        const prevBox = document.getElementById('prevWordPreview');
+        const nextBox = document.getElementById('nextWordPreview');
+        
+        // محاسبه محدوده مجاز (Boundary)
+        let minAllowed = 0;
+        let maxAllowed = v.duration || 1000;
+
+        // محاسبه کلمه قبل و حد پایین
+        if (wIdx > 0) {
+            prevBox.innerText = seg.words[wIdx - 1].word;
+            minAllowed = seg.words[wIdx - 1].end;
+        } else if (sIdx > 0 && state.segs[sIdx-1].words.length > 0) {
+            const prevSeg = state.segs[sIdx-1];
+            prevBox.innerText = prevSeg.words[prevSeg.words.length - 1].word;
+            minAllowed = prevSeg.words[prevSeg.words.length - 1].end;
+        } else {
+            prevBox.innerText = "-";
+            minAllowed = 0;
+        }
+
+        // محاسبه کلمه بعد و حد بالا
+        if (wIdx < seg.words.length - 1) {
+            nextBox.innerText = seg.words[wIdx + 1].word;
+            maxAllowed = seg.words[wIdx + 1].start;
+        } else if (sIdx < state.segs.length - 1 && state.segs[sIdx+1].words.length > 0) {
+            nextBox.innerText = state.segs[sIdx+1].words[0].word;
+            maxAllowed = state.segs[sIdx+1].words[0].start;
+        } else {
+            nextBox.innerText = "-";
+            maxAllowed = v.duration || tempEndTime + 5;
+        }
+
+        // راه‌اندازی Trimmer با محدوده‌های دقیق
+        if(typeof initTrimmerUI === 'function') {
+            initTrimmerUI(tempStartTime, tempEndTime, minAllowed, maxAllowed);
+        }
+
+    } else if(type === 'delete') {
+        const [sIdx, wIdx] = activeWordId.split('-').map(Number);
+        const seg = state.segs[sIdx];
+        const word = seg.words[wIdx];
+        document.getElementById('deleteMsgText').innerHTML = `آیا کلمه <span class="highlight-word">«${word.word}»</span> حذف شود؟`;
+    } else if (type === 'regenerate') {
+        if (typeof isRegenerating !== 'undefined' && isRegenerating) {
+            document.getElementById('regen-step-start').style.display = 'none';
+            document.getElementById('regen-step-loading').style.display = 'flex';
+            document.getElementById('regen-step-success').style.display = 'none';
+        } else {
+            document.getElementById('regen-step-start').style.display = 'flex';
+            document.getElementById('regen-step-loading').style.display = 'none';
+            document.getElementById('regen-step-success').style.display = 'none';
+        }
+    }
+
+    setTimeout(() => { 
+        overlay.classList.add('show'); 
+        targetSheet.classList.add('active'); 
+    }, 50);
+}
+
+function preConfirmRegenerate() {
+    showConfirmationModal({
+        iconClass: 'fa-solid fa-rotate',
+        title: 'بازنویسی هوشمند',
+        description: 'آیا می‌خواهید هوش مصنوعی دوباره ویدیو را بررسی کرده و زیرنویس‌ها را از نو بنویسد؟ (زیرنویس‌های فعلی حذف می‌شوند)',
+        confirmText: 'بله، بازنویسی کن',
+        confirmClass: 'split',
+        onConfirm: () => {
+            regenerateProjectSubtitles();
+        }
+    });
+}
+
+function showConfirmationModal(config) {
+    const modal = document.getElementById('confirmationModal');
+    document.getElementById('confirmIcon').querySelector('i').className = config.iconClass;
+    document.getElementById('confirmTitle').innerText = config.title;
+    document.getElementById('confirmDesc').innerText = config.description;
+    const btn = document.getElementById('confirmBtn');
+    btn.innerText = config.confirmText; btn.className = 'modal-btn btn-confirm-action ' + config.confirmClass;
+    btn.onclick = () => { config.onConfirm(); closeConfirmationModal(); };
+    modal.style.display = 'flex'; setTimeout(() => modal.classList.add('show'), 10);
+}
+function closeConfirmationModal() { const m = document.getElementById('confirmationModal'); m.classList.remove('show'); setTimeout(() => m.style.display = 'none', 300); }

static/js/utils.js

@@ -0,0 +1,39 @@
+// توابع کمکی فرمت‌دهی زمان و تاریخ
+function getPersianDate() {
+    const d = new Date();
+    const option = { month: 'long', day: 'numeric', year: 'numeric' };
+    return d.toLocaleDateString('fa-IR', option);
+}
+
+function fmt(s) { 
+    let sec = Math.floor(s); 
+    let ms = Math.round((s - sec) * 100); 
+    return `${sec < 10 ? '0'+sec : sec}.${ms < 10 ? '0'+ms : ms}`; 
+}
+
+function formatTimeSimple(sec) { 
+    let m = Math.floor(sec / 60); 
+    let s = Math.floor(sec % 60); 
+    return `${m}:${s < 10 ? '0'+s : s}`; 
+}
+
+// انیمیشن ساده
+function startAnim(selector) { 
+    const container = document.querySelector(selector); 
+    if(!container) return; 
+    const words = container.querySelectorAll('.anim-word'); 
+    let i = 0; 
+    setInterval(() => { 
+        words.forEach(w => w.classList.remove('active')); 
+        words[i].classList.add('active'); 
+        i = (i + 1) % words.length; 
+    }, 600); 
+}
+
+// همگام‌سازی دکمه‌های استایل
+function syncModeButtons() { 
+    document.querySelectorAll('.mode-btn').forEach(b => { 
+        b.classList.remove('active'); 
+        if(b.getAttribute('onclick').includes(`'${state.st.type}'`)) b.classList.add('active'); 
+    }); 
+}

styles/ai_dynamic.py

@@ -0,0 +1,198 @@
+from PIL import Image, ImageDraw, ImageFont, ImageFilter
+import math
+
+# --- استایل «طراحی هوشمند» (AI Dynamic) ---
+# هوش مصنوعی (Gemini) هرگز کد اجرا نمی‌کند؛ فقط یک شیء طراحی محدود (ai_design) با
+# چند فیلد از پیش تعریف‌شده برمی‌گرداند (entry, exit, timing, stagger, glow, رنگ‌ها).
+# این استایل دیگر هیچ کادر/باکس/پس‌زمینه‌ای دور متن یا دور کلمات نمی‌سازد؛ تمرکز فقط
+# روی حرکت ورود/خروج کلمات و رنگ متن است (و در صورت درخواست، درخشش نور اطراف متن).
+# مقادیر آن قبلاً در app.py (_clamp_ai_design) کاملاً اعتبارسنجی و clamp شده‌اند.
+# این فایل صرفاً همان پارامترها را می‌خواند و واقعاً فریم را رسم می‌کند؛ به همین دلیل
+# خروجی همیشه امن، پایدار و بدون امکان کرش است.
+
+config = {
+    "ids": ["ai_dynamic"],
+    "name": "طراحی هوشمند (AI)",
+    "panels": ["font", "size", "position"],
+    "default_font": "vazir"
+}
+
+frontend_template = """
+<span class="ai-dynamic-word" style="
+    display: inline-block; vertical-align: middle; margin: 0 4px;
+    color: {{COLOR}} !important; opacity: {{OPACITY}}; font-family: inherit;
+">{{WORD}}</span>
+"""
+
+DEFAULT_DESIGN = {
+    "entry": "fall",
+    "exit": "fade",
+    "timing": "smooth",
+    "stagger": 0.04,
+    "glow": "none",
+    "primaryColor": "#FFFFFF",
+    "activeColor": "#FFD700",
+    "glowColor": "#7C4DFF",
+    "font": "vazir",
+    "fontSize": 60,
+}
+
+
+def _get_design(style_config):
+    raw = getattr(style_config, 'ai_design', None) or {}
+    if not isinstance(raw, dict):
+        raw = {}
+    d = dict(DEFAULT_DESIGN)
+    for k in DEFAULT_DESIGN:
+        if k in raw and raw[k] is not None:
+            d[k] = raw[k]
+    # سازگاری با طراحی‌های قدیمی‌تر که ممکن است هنوز shapeColor داشته باشند
+    if "glowColor" not in raw and "shapeColor" in raw:
+        d["glowColor"] = raw["shapeColor"]
+    return d
+
+
+def _ease(name, p):
+    p = max(0.0, min(1.0, p))
+    if name == "linear":
+        return p
+    if name == "punch":
+        # شروع تند و توقف نرم با کمی سرریز (overshoot) خفیف
+        return 1 - pow(1 - p, 3)
+    if name == "elastic":
+        if p <= 0 or p >= 1:
+            return p
+        return pow(2, -10 * p) * math.sin((p * 10 - 0.75) * (2 * math.pi) / 3) + 1
+    # smooth (پیش‌فرض)
+    return 1 - (1 - p) * (1 - p)
+
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    design = _get_design(style_config)
+
+    primary_color = color_parser(design["primaryColor"], (255, 255, 255, 255))
+    active_color = color_parser(design["activeColor"], (255, 215, 0, 255))
+    glow_color = color_parser(design["glowColor"], (124, 77, 255, 255))
+
+    line_height_px = int(style_config.fontSize * 1.5)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+
+    current_render_time = getattr(style_config, 'current_render_time', 0.0)
+
+    text_start_y = start_y_of_block
+    vertical_corr = int(style_config.fontSize * 0.1)
+    current_line_y = text_start_y - vertical_corr
+    space_w = draw.textlength(" ", font=font)
+    global_word_counter = 0
+
+    entry = design["entry"]
+    exit_type = design["exit"]
+    timing = design["timing"]
+    stagger = max(0.0, min(0.12, float(design["stagger"]) if isinstance(design["stagger"], (int, float)) else 0.04))
+    glow = design["glow"]
+    ANIM_DUR = 0.3
+    EXIT_DUR = 0.3
+
+    glow_blur_radius = {"none": 0, "soft": 4, "strong": 8}.get(glow, 0)
+    glow_intensity = {"none": 0, "soft": 160, "strong": 230}.get(glow, 0)
+
+    for line_idx, metrics in enumerate(line_metrics):
+        cursor_x = (width + metrics["width"]) / 2 + (style_config.x or 0) if is_rtl else (width - metrics["width"]) / 2 + (style_config.x or 0)
+        text_y_pos = current_line_y
+
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = (cursor_x - w_len) if is_rtl else cursor_x
+
+            should_draw = False
+            dx, dy, alpha_factor = 0.0, 0.0, 1.0
+            is_active_word = False
+            w_info = None
+            extra_delay = stagger * w_i  # تاخیر آبشاری بین کلمات پشت‌سرهم داخل یک خط
+
+            if word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                if current_render_time >= w_info.start:
+                    should_draw = True
+                    time_passed = max(0.0, (current_render_time - w_info.start) - extra_delay)
+                    progress = min(1.0, time_passed / ANIM_DUR)
+                    eased = _ease(timing, progress)
+
+                    if entry == "fall":
+                        dy = -70 * (1 - eased)
+                    elif entry == "rise":
+                        dy = 65 * (1 - eased)
+                    elif entry == "pop":
+                        dy = -18 * (1 - eased)
+                    elif entry == "slide_left":
+                        dx = 85 * (1 - eased)
+                    elif entry == "slide_right":
+                        dx = -85 * (1 - eased)
+                    # "fade" فقط آلفا دارد
+                    alpha_factor = max(0.0, min(1.0, eased))
+
+                    is_active_word = current_render_time >= w_info.start and current_render_time < w_info.end
+
+                    # --- افکت خروج بعد از پایان گفتار این کلمه ---
+                    if current_render_time >= w_info.end and exit_type != "none":
+                        time_after = current_render_time - w_info.end
+                        exit_progress = min(1.0, time_after / EXIT_DUR)
+                        exit_eased = _ease("smooth", exit_progress)
+                        if exit_type == "fade":
+                            alpha_factor = max(0.4, 1.0 - exit_eased * 0.6)
+                        elif exit_type == "shrink":
+                            alpha_factor = max(0.35, 1.0 - exit_eased * 0.65)
+                            dy += 6 * exit_eased
+                        elif exit_type == "fall":
+                            dy += 25 * exit_eased
+                            alpha_factor = max(0.0, 1.0 - exit_eased)
+                        elif exit_type == "rise":
+                            dy -= 25 * exit_eased
+                            alpha_factor = max(0.0, 1.0 - exit_eased)
+                else:
+                    should_draw = False
+            else:
+                if active_idx != -1:
+                    should_draw = (global_word_counter <= active_idx)
+                    is_active_word = (global_word_counter == active_idx)
+                else:
+                    should_draw = False
+
+            if should_draw and alpha_factor > 0.01:
+                this_color = primary_color
+                if getattr(style_config, 'useActiveColor', True) and is_active_word:
+                    this_color = active_color
+                if word_infos and global_word_counter < len(word_infos):
+                    w_obj = word_infos[global_word_counter]
+                    if hasattr(w_obj, 'color') and w_obj.color:
+                        this_color = color_parser(w_obj.color, this_color)
+
+                final_alpha = int(this_color[3] * alpha_factor)
+                final_color = (this_color[0], this_color[1], this_color[2], final_alpha)
+                draw_x = word_x + dx
+                draw_y = text_y_pos + dy
+
+                # --- درخشش نور نرم اطراف متن (بلور واقعی)؛ دیگر هیچ کادر/باکسی رسم نمی‌شود ---
+                if glow_blur_radius > 0:
+                    pad = glow_blur_radius * 3 + 8
+                    layer_w = int(w_len) + pad * 2
+                    layer_h = int(style_config.fontSize * 1.3) + pad * 2
+                    if layer_w > 0 and layer_h > 0:
+                        glow_layer = Image.new('RGBA', (layer_w, layer_h), (0, 0, 0, 0))
+                        glow_draw = ImageDraw.Draw(glow_layer)
+                        glow_a = int(glow_intensity * alpha_factor)
+                        glow_draw.text((pad, pad), word, font=font, fill=(*glow_color[:3], glow_a),
+                                        direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+                        blurred = glow_layer.filter(ImageFilter.GaussianBlur(glow_blur_radius))
+                        img.paste(blurred, (int(draw_x - pad), int(draw_y - pad)), blurred)
+
+                draw.text((draw_x, draw_y), word, font=font, fill=final_color,
+                          direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+
+            cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+            global_word_counter += 1
+
+        current_line_y += line_height_px

styles/blue_cloud.py

@@ -0,0 +1,137 @@
+from PIL import Image, ImageDraw, ImageFont, ImageFilter
+
+config = {
+    "ids": ["blue_cloud"],
+    "name": "Blue Cloud",
+    "panels": ["font", "size", "position"],
+    "default_font": "lalezar"
+}
+
+frontend_template = "" 
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    # --- محاسبات جایگاه متن ---
+    line_height_px = int(style_config.fontSize * 1.5)
+    total_text_height = len(lines) * line_height_px
+    center_x = width / 2 + (style_config.x or 0)
+    bottom_margin = style_config.marginV
+    start_y = height - bottom_margin - total_text_height
+
+    vertical_correction = int(style_config.fontSize * 0.1)
+    current_text_y = start_y - vertical_correction
+    
+    # --- تنظیمات رنگ دقیق (داینامیک شده) ---
+    # دریافت رنگ متن از پنل کاربر (پیش‌فرض آبی روشن اگر چیزی انتخاب نکرده باشد)
+    custom_hex = style_config.styleColors.get('blue_cloud', '#00b4ff')
+    text_fill = color_parser(custom_hex, (0, 180, 255, 255))
+    
+    stroke_color = (255, 255, 255, 255)    # سفید خالص
+    
+    # --- اصلاح ضخامت‌ها و فاصله‌ها ---
+    # ضخامت حاشیه سفید (کاهش یافته برای ظرافت)
+    stroke_w = max(2, int(style_config.fontSize * 0.072)) 
+    
+    # ضخامت هاله
+    cloud_stroke_w = max(5, int(style_config.fontSize * 0.275)) 
+    cloud_blur = 5 
+
+    # استانداردسازی دقیق فاصله کلمات (دقیقاً مشابه استایل‌های ساده)
+    space_w = draw.textlength(" ", font=font)
+    actual_space_w = space_w
+
+    # --- مرحله ۱: جمع‌آوری مختصات دقیق تمام کلمات ---
+    words_to_draw = []
+    global_word_counter = 0
+
+    for line_idx, metrics in enumerate(line_metrics):
+        # عرض خط دقیقاً همان عرض محاسبه شده پیش‌فرض است بدون هیچ فاصله اضافی
+        total_extra_spacing = 0
+        adjusted_line_width = metrics["width"] + total_extra_spacing
+        
+        cursor_x = (center_x + (adjusted_line_width / 2)) if is_rtl else (center_x - (adjusted_line_width / 2))
+        
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = int(cursor_x - w_len) if is_rtl else int(cursor_x)
+            word_y = int(current_text_y)
+            
+            # تعیین رنگ کلمه فعال (پیش‌فرض همان رنگ متن)
+            is_active = (global_word_counter == active_idx) and getattr(style_config, 'useActiveColor', True)
+            active_hex = style_config.styleActiveColors.get('blue_cloud', custom_hex)
+            current_word_color = color_parser(active_hex, text_fill) if is_active else text_fill
+            
+            # اگر کاربر از ابزار رنگ کلمات برای رنگ کردن یک کلمه خاص استفاده کرده باشد، اینجا اعمال می‌شود
+            if word_infos and global_word_counter < len(word_infos):
+                 w_obj = word_infos[global_word_counter]
+                 if hasattr(w_obj, 'color') and w_obj.color:
+                      current_word_color = color_parser(w_obj.color, current_word_color)
+
+            # --- منطق انیمیشن تایپ ---
+            display_word = word
+            draw_x = word_x
+            should_draw = True
+            
+            is_typewriter = getattr(style_config, 'typewriter', False)
+            if is_typewriter and word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                current_t = getattr(style_config, 'current_render_time', 0.0)
+                if current_t < w_info.start:
+                    should_draw = False
+                elif current_t >= w_info.start and current_t < w_info.end:
+                    char_len = len(word)
+                    progress = (current_t - w_info.start) / max(0.001, w_info.end - w_info.start)
+                    visible_chars = min(char_len, int(progress * char_len) + 1)
+                    display_word = word[:visible_chars]
+                    try: sub_w = draw.textlength(display_word, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+                    except: sub_w = font.getlength(display_word)
+                    draw_x = int(cursor_x - sub_w) if is_rtl else draw_x
+
+            if should_draw and display_word:
+                words_to_draw.append({
+                    "text": display_word,
+                    "x": draw_x,
+                    "y": word_y,
+                    "color": current_word_color
+                })
+
+            cursor_x += (-(w_len + actual_space_w) if is_rtl else (w_len + actual_space_w))
+            global_word_counter += 1
+            
+        current_text_y += line_height_px
+
+    # --- مرحله ۲: رسم هاله (Cloud) با رنگ داینامیک و تراز هوشمند ---
+    glow_layer = Image.new('RGBA', (width, height), (0, 0, 0, 0))
+    g_draw = ImageDraw.Draw(glow_layer)
+    
+    # اصلاح تراز عمودی هاله (ابر) اختصاصاً برای فونت‌های خاص
+    glow_y_offset = 0
+    if style_config.font == 'pinar':
+        glow_y_offset = -int(cloud_stroke_w * 0.6)  # هدایت به سمت بالا
+    elif style_config.font in ['dastnevis', 'entazar', 'kamran']:
+        glow_y_offset = int(cloud_stroke_w * 0.6)   # هدایت به سمت پایین
+        
+    for item in words_to_draw:
+        # استخراج رنگ خودِ این کلمه و اختصاص آن به ابرش (با کمی شفافیت: 230)
+        r, g, b, _ = item["color"]
+        current_cloud_color = (r, g, b, 230)
+        
+        g_draw.text((item["x"], item["y"] + glow_y_offset), item["text"], font=font, fill=current_cloud_color, 
+                    stroke_width=cloud_stroke_w, stroke_fill=current_cloud_color, 
+                    direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+    
+    # محو کردن کل لایه هاله
+    glow_layer = glow_layer.filter(ImageFilter.GaussianBlur(cloud_blur))
+    # چسباندن لایه هاله در پس‌زمینه
+    img.paste(glow_layer, (0, 0), glow_layer)
+
+    # --- مرحله ۳: رسم حاشیه سفید ---
+    for item in words_to_draw:
+        draw.text((item["x"], item["y"]), item["text"], font=font, fill=stroke_color, 
+                  stroke_width=stroke_w, stroke_fill=stroke_color, 
+                  direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+
+    # --- مرحله ۴: رسم رنگ اصلی متن روی لایه‌های قبلی ---
+    for item in words_to_draw:
+        draw.text((item["x"], item["y"]), item["text"], font=font, fill=item["color"], 
+                  direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))

styles/blue_outline.py

@@ -0,0 +1,128 @@
+from PIL import Image, ImageDraw, ImageFont
+
+config = {
+    "ids": ["blue_outline"],
+    "name": "Blue Outline",
+    "panels": ["font", "size", "position"],
+    "default_font": "lalezar"
+}
+
+frontend_template = "" 
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    # --- محاسبات جایگاه متن ---
+    line_height_px = int(style_config.fontSize * 1.5)
+    total_text_height = len(lines) * line_height_px
+    center_x = width / 2 + (style_config.x or 0)
+    bottom_margin = style_config.marginV
+    start_y = height - bottom_margin - total_text_height
+
+    vertical_correction = int(style_config.fontSize * 0.1)
+    current_text_y = start_y - vertical_correction
+    
+    # --- تنظیمات رنگ دقیق (داینامیک شده) ---
+    custom_hex = style_config.styleColors.get('blue_outline', '#0000FF')
+    text_fill = color_parser(custom_hex, (0, 180, 255, 255))
+    
+    custom_stroke_hex = style_config.styleBgColors.get('blue_outline_stroke', '#ffffff')
+    stroke_color = color_parser(custom_stroke_hex, (255, 255, 255, 255))
+    
+    stroke_w = max(2, int(style_config.fontSize * 0.072)) 
+    
+    space_w = draw.textlength(" ", font=font)
+    actual_space_w = space_w
+
+    # --- مرحله ۱: جمع‌آوری مختصات دقیق تمام کلمات ---
+    words_to_draw = []
+    global_word_counter = 0
+
+    for line_idx, metrics in enumerate(line_metrics):
+        adjusted_line_width = metrics["width"]
+        cursor_x = (center_x + (adjusted_line_width / 2)) if is_rtl else (center_x - (adjusted_line_width / 2))
+        
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = int(cursor_x - w_len) if is_rtl else int(cursor_x)
+            word_y = int(current_text_y)
+            
+            is_active = (global_word_counter == active_idx) and getattr(style_config, 'useActiveColor', True)
+            active_hex = style_config.styleActiveColors.get('blue_outline', custom_hex)
+            current_word_color = color_parser(active_hex, text_fill) if is_active else text_fill
+            
+            # اگر کاربر از ابزار رنگ کلمات برای رنگ کردن یک کلمه خاص استفاده کرده باشد، اینجا اعمال می‌شود
+            if word_infos and global_word_counter < len(word_infos):
+                 w_obj = word_infos[global_word_counter]
+                 if hasattr(w_obj, 'color') and w_obj.color:
+                      current_word_color = color_parser(w_obj.color, current_word_color)
+
+            # --- منطق انیمیشن تایپ ---
+            display_word = word
+            draw_x = word_x
+            should_draw = True
+            
+            is_typewriter = getattr(style_config, 'typewriter', False)
+            if is_typewriter and word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                current_t = getattr(style_config, 'current_render_time', 0.0)
+                if current_t < w_info.start:
+                    should_draw = False
+                elif current_t >= w_info.start and current_t < w_info.end:
+                    char_len = len(word)
+                    progress = (current_t - w_info.start) / max(0.001, w_info.end - w_info.start)
+                    visible_chars = min(char_len, int(progress * char_len) + 1)
+                    display_word = word[:visible_chars]
+                    try: sub_w = draw.textlength(display_word, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+                    except: sub_w = font.getlength(display_word)
+                    draw_x = int(cursor_x - sub_w) if is_rtl else draw_x
+
+            if should_draw and display_word:
+                words_to_draw.append({
+                    "text": display_word,
+                    "x": draw_x,
+                    "y": word_y,
+                    "color": current_word_color
+                })
+
+            cursor_x += (-(w_len + actual_space_w) if is_rtl else (w_len + actual_space_w))
+            global_word_counter += 1
+            
+        current_text_y += line_height_px
+
+    # --- مرحله ۲ و ۳: رسم حاشیه و رنگ اصلی متن با مدیریت آلفا ---
+    for item in words_to_draw:
+        # همگام‌سازی شفافیت حاشیه سفید با میزان شفافیت اختصاصی هر کلمه
+        alpha_val = item["color"][3] if len(item["color"]) > 3 else 255
+        
+        if alpha_val < 255:
+            # حل باگ انباشت آلفا در Pillow (که حاشیه شفاف را کاملاً توپر و سفید می‌کرد)
+            # ایجاد یک بوم موقت کاملاً شفاف
+            temp_word_img = Image.new('RGBA', (width, height), (0, 0, 0, 0))
+            temp_draw = ImageDraw.Draw(temp_word_img)
+            
+            # ۱. رسم حاشیه سفید به صورت کاملاً توپر (Opaque) روی بوم موقت
+            temp_draw.text((item["x"], item["y"]), item["text"], font=font, fill=(255, 255, 255, 255), 
+                           stroke_width=stroke_w, stroke_fill=(255, 255, 255, 255), 
+                           direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+            
+            # ۲. رسم رنگ اصلی متن به صورت کاملاً توپر روی بوم موقت
+            opaque_color = (item["color"][0], item["color"][1], item["color"][2], 255)
+            temp_draw.text((item["x"], item["y"]), item["text"], font=font, fill=opaque_color, 
+                           direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+            
+            # ۳. کاهش شفافیت کل بوم موقت به میزان آلفای هدف با جدول جستجو (LUT) جهت پایداری بالا
+            lut = [int(p * (alpha_val / 255.0)) for p in range(256)]
+            r, g, b, a = temp_word_img.split()
+            a = a.point(lut)
+            temp_word_img = Image.merge('RGBA', (r, g, b, a))
+            
+            # ۴. ترکیب کانال‌های آلفا به صورت استاندارد (جلوگیری از باگ ضرب دابل و محو شدن کلمات)
+            img.alpha_composite(temp_word_img)
+        else:
+            # رسم عادی و سریع برای کلمات کاملاً توپر
+            draw.text((item["x"], item["y"]), item["text"], font=font, fill=stroke_color, 
+                      stroke_width=stroke_w, stroke_fill=stroke_color, 
+                      direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+            
+            draw.text((item["x"], item["y"]), item["text"], font=font, fill=item["color"], 
+                      direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))

styles/box.py

@@ -0,0 +1,273 @@
+from PIL import Image, ImageDraw, ImageFont, ImageFilter
+
+config = {
+    "ids": ["instagram_box", "alpha_gradient"],
+    "name": "Box Styles",
+    "panels": ["font", "size", "radius", "padding"],
+    "default_font": "vazir"
+}
+
+frontend_template = """
+<span style="display: inline-block; vertical-align: middle; margin: -{{PAD_Y}}px calc(5px - {{PAD_X}}px); padding: {{PAD_Y}}px {{PAD_X}}px; background: {{BG_COLOR}}; color: {{TEXT_COLOR}} !important; border-radius: {{RADIUS}}px; position: relative; z-index: {{Z_INDEX}}; white-space: nowrap; transition: all 0.1s;">{{WORD}}</span>
+"""
+
+# تابع کمکی برای رسم کادرهای با گوشه گرد با کیفیت بسیار بالا و لبه‌های کاملاً نرم (Anti-aliased)
+def draw_aa_rounded_rectangle(img, xy, radius, fill):
+    x1, y1, x2, y2 = xy
+    w = int(x2 - x1)
+    h = int(y2 - y1)
+    if w <= 0 or h <= 0:
+        return
+    
+    # رسم شکل با رزولوشن ۴ برابر برای انجام آنتی‌الیاسینگ (Supersampling)
+    scale = 4
+    s_img = Image.new('RGBA', (w * scale, h * scale), fill)
+    mask_large = Image.new('L', (w * scale, h * scale), 0)
+    m_draw = ImageDraw.Draw(mask_large)
+    m_draw.rounded_rectangle([0, 0, w * scale, h * scale], radius=radius * scale, fill=255)
+    
+    # سازگاری با نسخه‌های مختلف کتابخانه Pillow برای فیلتر تصویری LANCZOS
+    try:
+        resampling_filter = Image.Resampling.LANCZOS
+    except AttributeError:
+        resampling_filter = Image.LANCZOS
+        
+    mask_aa = mask_large.resize((w, h), resampling_filter)
+    aa_img = s_img.resize((w, h), resampling_filter)
+    
+    # چسباندن تصویر هموار شده روی بوم اصلی
+    img.paste(aa_img, (int(x1), int(y1)), mask_aa)
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    style_name = style_config.name
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    
+    line_height_px = int(style_config.fontSize * 1.1) + int(style_config.paddingY * 2.2)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+    
+    pad_x = style_config.paddingX
+    pad_y = style_config.paddingY
+    radius = style_config.radius
+    
+    if style_name == "instagram_box":
+        pad_y = max(5, pad_y)
+    
+    current_line_y = start_y_of_block
+    space_w = draw.textlength(" ", font=font)
+    
+    VERTICAL_CORRECTION = int(style_config.fontSize * 0.22)
+    INSTA_CENTERING_OFFSET = 8 if style_name == "instagram_box" else 0
+
+    # محاسبه متریک‌های استاندارد فونت بر اساس کلمه مرجع جهت تراز یکدست عمودی تمام کلمات
+    ref_word = "سلام"
+    try:
+        ref_bbox = draw.textbbox((0, 0), ref_word, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        standard_text_visual_center_y = (ref_bbox[1] + ref_bbox[3]) / 2.0
+        standard_text_offset_y = ref_bbox[1]
+        standard_text_h = ref_bbox[3] - ref_bbox[1]
+    except:
+        standard_text_visual_center_y = style_config.fontSize / 2.0
+        standard_text_offset_y = 0
+        standard_text_h = style_config.fontSize
+
+    global_word_counter = 0
+    words_to_draw = []
+    
+    temp_y = current_line_y
+    for line_idx, metrics in enumerate(line_metrics):
+        line_start_idx = sum(len(m["words"]) for m in line_metrics[:line_idx])
+        is_active_on_line = (active_idx >= line_start_idx and active_idx < line_start_idx + len(metrics["words"]))
+        
+        dynamic_line_width = metrics["width"] + (pad_x * 2 if is_active_on_line else 0)
+        if is_rtl:
+            cursor_x = (width + dynamic_line_width) / 2 + style_config.x
+        else:
+            cursor_x = (width - dynamic_line_width) / 2 + style_config.x
+        
+        # مرکز عمودی دقیق و هندسی این خط فعلی
+        line_center_y = temp_y + (line_height_px / 2.0)
+        
+        for w_i, word in enumerate(metrics["words"]):
+            g_idx = line_start_idx + w_i
+            w_len = metrics["word_widths"][w_i]
+            
+            # استفاده از مقدار ثابت برای جلوگیری از نوسان عمودی کلمات خط
+            text_y_pos = line_center_y - standard_text_visual_center_y
+            
+            current_word_padding = pad_x if g_idx == active_idx else 0
+            if is_rtl:
+                word_x = cursor_x - w_len - current_word_padding
+            else:
+                word_x = cursor_x + current_word_padding
+            
+            words_to_draw.append({
+                "text": word, 
+                "x": word_x, 
+                "y": text_y_pos, 
+                "width": w_len, 
+                "global_idx": global_word_counter,
+                "line_center_y": line_center_y
+            })
+            
+            if is_rtl:
+                cursor_x -= (w_len + space_w + (current_word_padding * 2))
+            else:
+                cursor_x += (w_len + space_w + (current_word_padding * 2))
+            global_word_counter += 1
+            
+        temp_y += line_height_px
+
+    # --- رسم کادر اصلی سفید پشت کل متن برای استایل اینستاگرام ---
+    if style_name == "instagram_box":
+        max_w = 0
+        for m in line_metrics:
+            if m["width"] > max_w: max_w = m["width"]
+        
+        cx = width / 2 + style_config.x
+        
+        # محاسبه مختصات باکس کلی
+        main_box_x1 = cx - (max_w / 2) - pad_x - 10 # کمی فضای بیشتر (10px)
+        main_box_x2 = cx + (max_w / 2) + pad_x + 10
+        
+        # محاسبه دقیق سقف و کف بر اساس آرایه واقعی کلمات ذخیره شده برای تقارن مطلق پیکسلی
+        first_line_y = words_to_draw[0]["y"] if words_to_draw else (start_y_of_block + pad_y)
+        last_line_y = words_to_draw[-1]["y"] if words_to_draw else (start_y_of_block + pad_y)
+        
+        main_box_y1 = first_line_y - int(pad_y * 1.3) + VERTICAL_CORRECTION + INSTA_CENTERING_OFFSET - 8
+        main_box_y2 = last_line_y + style_config.fontSize + int(pad_y * 1.3) + VERTICAL_CORRECTION + INSTA_CENTERING_OFFSET + 8
+        
+        main_box_hex = style_config.styleBgColors.get('instagram_box_main_box', '#ffffff')
+        main_box_col = color_parser(main_box_hex, (255, 255, 255, 255))
+        
+        # رسم کادر اصلی اینستاگرام با کیفیت بالا و لبه‌های نرم
+        draw_aa_rounded_rectangle(img, [main_box_x1, main_box_y1, main_box_x2, main_box_y2], radius, main_box_col)
+
+    # --- رسم کادرها (Highlight) ---
+    for item in words_to_draw:
+        is_active = (item["global_idx"] == active_idx)
+        
+        if is_active:
+            box_color = (0,0,0,0)
+            if style_name == "instagram_box":
+                bg_hex = style_config.styleBgColors.get('instagram_box', '#1a1a1a')
+                box_color = color_parser(bg_hex, (26, 26, 26, 255))
+            elif style_name == "alpha_gradient":
+                box_color = (124, 77, 255, 255)
+
+            rect_y1 = item["y"] - int(pad_y * 1.3) + VERTICAL_CORRECTION + INSTA_CENTERING_OFFSET
+            rect_y2 = item["y"] + style_config.fontSize + int(pad_y * 1.3) + VERTICAL_CORRECTION + INSTA_CENTERING_OFFSET
+            
+            bx1, by1 = int(item["x"] - pad_x), int(rect_y1)
+            bx2, by2 = int(item["x"] + item["width"] + pad_x), int(rect_y2)
+            
+            # اگر استایل آلفا بود، گرادینت بساز
+            if style_name == "alpha_gradient":
+                rw, rh = bx2 - bx1, by2 - by1
+                grad_img = Image.new('RGBA', (rw, rh), (0,0,0,0))
+                g_draw = ImageDraw.Draw(grad_img)
+                base_hex = style_config.styleBgColors.get('alpha_gradient', '#7c4dff')
+                r1, g1, b1, a1 = color_parser(base_hex, (124, 77, 255, 255))
+
+                factor = 0.35
+                r2 = int(r1 + (255 - r1) * factor)
+                g2 = int(g1 + (255 - g1) * factor)
+                b2 = int(b1 + (255 - b1) * factor)
+                
+                c1 = (r1, g1, b1)
+                c2 = (r2, g2, b2)
+
+                # رسم سایه (Glow) نرم پشت کادر
+                shadow_pad = 20
+                shadow_layer = Image.new('RGBA', (rw + shadow_pad*2, rh + shadow_pad*2), (0,0,0,0))
+                s_draw = ImageDraw.Draw(shadow_layer)
+                s_draw.rounded_rectangle([shadow_pad, shadow_pad, shadow_pad+rw, shadow_pad+rh], radius=radius, fill=(r1, g1, b1, 100))
+                shadow_layer = shadow_layer.filter(ImageFilter.GaussianBlur(4))
+                
+                img.paste(shadow_layer, (bx1 - shadow_pad, by1 - shadow_pad + 4), shadow_layer)
+                
+                # پر کردن گرادینت روی بوم موقت
+                for y in range(rh):
+                    for x in range(rw):
+                        ratio = (x + y) / (rw + rh) 
+                        r = int(c1[0] * (1-ratio) + c2[0] * ratio)
+                        g = int(c1[1] * (1-ratio) + c2[1] * ratio)
+                        b = int(c1[2] * (1-ratio) + c2[2] * ratio)
+                        g_draw.point((x,y), fill=(r,g,b,255))
+                
+                # ساخت ماسک با لبه‌های بسیار هموار و بدون پله‌پله شدن گوشه‌ها (Anti-aliased Mask)
+                scale = 4
+                mask_large = Image.new('L', (rw * scale, rh * scale), 0)
+                ImageDraw.Draw(mask_large).rounded_rectangle([0, 0, rw * scale, rh * scale], radius=radius * scale, fill=255)
+                try:
+                    resampling_filter = Image.Resampling.LANCZOS
+                except AttributeError:
+                    resampling_filter = Image.LANCZOS
+                mask = mask_large.resize((rw, rh), resampling_filter)
+                
+                img.paste(grad_img, (bx1, by1), mask)
+            else:
+                # رسم کادر فعال استایل اینستاگرام با کیفیت بالا و لبه‌های نرم
+                draw_aa_rounded_rectangle(img, [bx1, by1, bx2, by2], radius, box_color)
+
+        # --- رسم متن ---
+        for item in words_to_draw:
+            is_active = (item["global_idx"] == active_idx) and getattr(style_config, 'useActiveColor', True)
+            
+            text_color = (255, 255, 255, 255)
+            
+            if style_name == "instagram_box":
+                custom_hex = style_config.styleColors.get('instagram_box', '#000000')
+                u_r, u_g, u_b, u_a = color_parser(custom_hex, (0, 0, 0, 255))
+
+                if is_active:
+                    active_hex = style_config.styleActiveColors.get('instagram_box', '#ffffff')
+                    text_color = color_parser(active_hex, (255, 255, 255, 255))
+                else:
+                    is_past = item["global_idx"] < active_idx
+                    fade_surr = getattr(style_config, 'fadeSurrounding', False)
+                    if is_past and fade_surr:
+                        factor = (u_a / 255.0 * 0.35)
+                    else:
+                        factor = (u_a / 255.0) if is_past else (u_a / 255.0 * 0.35)
+                    
+                    f_r = int((u_r * factor) + (255 * (1 - factor)))
+                    f_g = int((u_g * factor) + (255 * (1 - factor)))
+                    f_b = int((u_b * factor) + (255 * (1 - factor)))
+                    text_color = (f_r, f_g, f_b, 255) 
+            
+            elif style_name == "alpha_gradient":
+                base_alpha_color = (255, 255, 255, 255)
+                custom_color = style_config.styleColors.get('alpha_gradient')
+                if custom_color:
+                    base_alpha_color = color_parser(custom_color, base_alpha_color)
+                
+                r, g, b, a = base_alpha_color
+
+                if is_active: 
+                    active_hex = style_config.styleActiveColors.get('alpha_gradient', '#ffffff')
+                    text_color = color_parser(active_hex, (255, 255, 255, 255))
+                elif item["global_idx"] < active_idx: 
+                    if getattr(style_config, 'fadeSurrounding', False):
+                        text_color = (r, g, b, int(a * 0.35))
+                    else:
+                        text_color = (r, g, b, a) 
+                else: 
+                    future_alpha = int(a * 0.35)
+                    text_color = (r, g, b, future_alpha)
+
+            if word_infos and item["global_idx"] < len(word_infos):
+                 w_obj = word_infos[item["global_idx"]]
+                 if hasattr(w_obj, 'color') and w_obj.color:
+                      text_color = color_parser(w_obj.color, text_color)
+
+            # محاسبه مرکز هندسی کادر رسم شده برای این کلمه جهت تراز بی‌نقص
+            rect_y1 = item["y"] - int(pad_y * 1.3) + VERTICAL_CORRECTION + INSTA_CENTERING_OFFSET
+            rect_y2 = item["y"] + style_config.fontSize + int(pad_y * 1.3) + VERTICAL_CORRECTION + INSTA_CENTERING_OFFSET
+            rect_center_y = (rect_y1 + rect_y2) / 2.0
+
+            # تراز عمودی کاملاً هم‌سطح بر اساس مقادیر ثابت مرجع به جای مقادیر پویای کلمه‌ای
+            final_text_y = rect_center_y - standard_text_offset_y - (standard_text_h / 2.0)
+
+            draw.text((item["x"], final_text_y), item["text"], font=font, fill=text_color, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))

styles/classic.py

@@ -0,0 +1,154 @@
+from PIL import Image, ImageDraw, ImageFont
+
+config = {
+    "ids": ["classic", "plain_white", "white_outline", "progressive_write"],
+    "name": "Classic Styles",
+    "panels": ["color", "font", "size", "position", "radius", "padding"],
+    "default_font": "vazir"
+}
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    style_name = style_config.name
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    
+    base_text_color = color_parser(style_config.primaryColor, (255, 255, 255, 255))
+    stroke_color = color_parser(style_config.outlineColor, (0, 0, 0, 255))
+    stroke_width = 0
+    
+    if style_name == "plain_white":
+        c_hex = style_config.styleColors.get('plain_white', '#ffffff')
+        base_text_color = color_parser(c_hex, (255, 255, 255, 255))
+    elif style_name == "white_outline":
+        c_hex = style_config.styleColors.get('white_outline', '#ffffff')
+        base_text_color = color_parser(c_hex, (255, 255, 255, 255))
+        
+        custom_stroke_hex = style_config.styleBgColors.get('white_outline_stroke', '#000000')
+        stroke_color = color_parser(custom_stroke_hex, (0, 0, 0, 255))
+        
+        stroke_width = max(2, int(style_config.fontSize / 12))
+    elif style_config.backType == 'outline':
+        stroke_width = max(2, int(style_config.fontSize / 12))
+
+    line_height_px = int(style_config.fontSize * 1.5)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+
+    space_w = draw.textlength(" ", font=font)
+    max_line_width = 0
+    for m in line_metrics:
+        # محاسبه واقعی عرض خط با جمع زدن تک تک کلمات برای دقت صد در صد
+        actual_w = sum(m["word_widths"]) + max(0, len(m["words"]) - 1) * space_w
+        if actual_w > max_line_width: max_line_width = actual_w
+
+    # --- رسم کادر کلی (Container) ---
+    should_draw_box = False
+    box_fill_color = (0,0,0,0)
+
+    if style_name in ["classic", "progressive_write"] and style_config.backType in ['solid', 'transparent']:
+        should_draw_box = True
+        fill_color_tuple = color_parser(style_config.outlineColor, (0, 0, 0, 255))
+        if style_config.backType == 'transparent' and fill_color_tuple[3] == 255:
+             fill_color_tuple = (fill_color_tuple[0], fill_color_tuple[1], fill_color_tuple[2], 160)
+        box_fill_color = fill_color_tuple
+
+    # استخراج محاسبات کادر به بیرون از شرط برای استفاده به عنوان مبنای رسم متن
+    ratio = height / width
+    box_center_y_adjustment = 0
+    if ratio > 1.6: box_center_y_adjustment = 5
+    elif ratio > 1.1: box_center_y_adjustment = 10
+    else: box_center_y_adjustment = 15
+    
+    box_center_x = width / 2 + style_config.x
+    # کاهش 16 پیکسل از عرض کادر برای جمع‌تر شدن در سمت چپ و راست
+    box_width = max_line_width + (style_config.paddingX * 2) - 16
+
+    box_x1 = box_center_x - (box_width / 2)
+    box_x2 = box_center_x + (box_width / 2)
+    visual_top_correction = int(style_config.fontSize * 0.12)
+    
+    # نقطه مبنای رسم کادر (برای حفظ جایگاه دقیق متن)
+    base_y1 = start_y_of_block - style_config.paddingY + box_center_y_adjustment + visual_top_correction
+    
+    # تنظیم دقیق ارتفاع کادر: کاهش تنها ۱۵ درصدی (برای متعادل شدن بالا و پایین کادر)
+    box_y1 = base_y1 + (style_config.paddingY * 0.15)
+    box_y2 = start_y_of_block + total_block_height + (style_config.paddingY * 0.85) + box_center_y_adjustment - (line_height_px * 0.3)
+
+    if should_draw_box:
+        draw.rounded_rectangle([box_x1, box_y1, box_x2, box_y2], radius=style_config.radius, fill=box_fill_color)
+
+    # --- رسم متن ---
+    # تراز کردن متن نسبت به نقطه مبنا (base_y1) تا با کوچک شدن کادر، متن جابجا نشود
+    text_start_y = base_y1 + (style_config.paddingY * 0.35)
+    vertical_corr = int(style_config.fontSize * 0.1)
+    current_line_y = text_start_y - vertical_corr
+
+    global_word_counter = 0
+
+    for line_idx, metrics in enumerate(line_metrics):
+        # محاسبه عرض دقیق و واقعی خط برای وسط‌چین شدن کامل درون کادر
+        actual_line_width = sum(metrics["word_widths"]) + max(0, len(metrics["words"]) - 1) * space_w
+        if is_rtl:
+            start_x = (width + actual_line_width) / 2 + style_config.x
+        else:
+            start_x = (width - actual_line_width) / 2 + style_config.x
+        cursor_x = start_x
+        text_y_pos = current_line_y
+        
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = (cursor_x - w_len) if is_rtl else cursor_x
+            
+            # تنظیم رنگ پیش‌فرض
+            current_word_color = base_text_color
+
+            # --- تغییر جدید: اعمال رنگ کلمه فعال برای تمامی استایل‌های کلاسیک و تایپی ---
+            if style_name in ["white_outline", "plain_white", "classic", "progressive_write"] and active_idx != -1 and global_word_counter == active_idx and getattr(style_config, 'useActiveColor', True):
+                active_hex = style_config.styleActiveColors.get(style_name, '#ffffff')
+                current_word_color = color_parser(active_hex, base_text_color)
+            # ------------------------------------------------------------
+
+            current_stroke_fill = stroke_color
+            current_stroke_width = stroke_width
+
+            if word_infos and global_word_counter < len(word_infos):
+                w_obj = word_infos[global_word_counter]
+                if hasattr(w_obj, 'color') and w_obj.color:
+                     current_word_color = color_parser(w_obj.color, current_word_color)
+            
+            display_word = word
+            draw_x = word_x
+            should_draw_this_word = True
+            
+            is_typewriter = getattr(style_config, 'typewriter', False)
+            
+            if style_name == "progressive_write":
+                if active_idx != -1 and global_word_counter > active_idx:
+                    should_draw_this_word = False 
+            elif is_typewriter and word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                current_t = getattr(style_config, 'current_render_time', 0.0)
+                if current_t < w_info.start:
+                    should_draw_this_word = False
+                elif current_t >= w_info.start and current_t < w_info.end:
+                    char_len = len(word)
+                    progress = (current_t - w_info.start) / max(0.001, w_info.end - w_info.start)
+                    visible_chars = min(char_len, int(progress * char_len) + 1)
+                    display_word = word[:visible_chars]
+                    try: sub_w = draw.textlength(display_word, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+                    except: sub_w = font.getlength(display_word)
+                    draw_x = (cursor_x - sub_w) if is_rtl else word_x
+
+            if should_draw_this_word and display_word:
+                draw.text((draw_x, text_y_pos), display_word, font=font, fill=current_word_color, 
+                          stroke_width=current_stroke_width, stroke_fill=current_stroke_fill, 
+                          direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+            
+            # مکان نما باید جلو برود حتی اگر کلمه رسم نشده باشد (تا جای خالی‌اش حفظ شود)
+            if is_rtl:
+                cursor_x -= (w_len + space_w)
+            else:
+                cursor_x += (w_len + space_w)
+            global_word_counter += 1
+        
+        current_line_y += line_height_px

styles/dark_edges.py

@@ -0,0 +1,248 @@
+from PIL import Image, ImageDraw, ImageFont, ImageFilter
+
+config = {
+    "ids": ["dark_edges"],
+    "name": "Dark Edges",
+    "panels": ["font", "size", "position", "radius", "padding"],
+    "default_font": "vazir"
+}
+
+# قالب نمایش زنده در ادیتور (دقیقاً مشابه CSS درخواستی)
+frontend_template = """
+<div style="
+    display: inline-block;
+    color: #ffffff;
+    font-weight: 900;
+    padding: calc({{PAD_Y}}px * 0.9) {{PAD_X}}px;
+    border-radius: {{RADIUS}}px;
+    
+    /* رنگ پایه آبی */
+    background-color: #AA00FF;
+    
+    /* گرادینت لبه‌های تیره */
+    background-image: linear-gradient(
+        to left, 
+        rgba(0, 0, 0, 0.90) 0%,       
+        rgba(255, 255, 255, 0.1) 50%, 
+        rgba(0, 0, 0, 0.90) 100%      
+    );
+    
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    
+    /* سایه متن ترکیبی (سخت + نرم) - چهار برابر شده */
+    text-shadow: 
+        5px 5px 0px rgba(0, 0, 0, 0.9),  /* <--- این همان حاشیه سخت در ورودی است */
+        20px 20px 39px rgba(0, 0, 0, 0.8);
+    
+    /* --- اصلاحات برای فاصله خطوط (مثل نوار ساده) --- */
+    white-space: normal;       /* اجازه دادن به شکستن خط */
+    line-height: 1.4;          /* ایجاد فاصله مناسب بین خط اول و دوم */
+    min-width: max-content;    /* حفظ عرض کادر */
+    
+    font-family: inherit;
+    transition: all 0.1s;
+    text-align: center;
+">{{WORD}}</div>
+"""
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    # تنظیمات هندسی از پنل کاربری
+    padding_x = style_config.paddingX
+    padding_y = style_config.paddingY
+    radius = style_config.radius
+    
+    # محاسبه ارتفاع خط و کل بلوک متن
+    line_height_px = int(style_config.fontSize * 1.5)
+    total_text_height = len(lines) * line_height_px
+    
+    # پیدا کردن عریض‌ترین خط برای ابعاد کادر
+    max_text_width = 0
+    for m in line_metrics:
+        if m["width"] > max_text_width:
+            max_text_width = m["width"]
+
+    # ابعاد نهایی کادر
+    box_w = int(max_text_width + (padding_x * 2))
+    box_h = int(total_text_height + (padding_y * 1.5))  # ضریب از 2 به 1.5 کاهش یافت تا کادر عمودی جمع‌تر شود
+    
+    # مرکز کادر
+    center_x = width / 2 + (style_config.x or 0)
+    # موقعیت عمودی (از پایین)
+    bottom_margin = style_config.marginV
+    box_y2 = height - bottom_margin
+    box_y1 = box_y2 - box_h
+    box_x1 = int(center_x - (box_w / 2))
+    box_x2 = int(center_x + (box_w / 2))
+
+    # ---------------------------------------------------------
+    # 1. ساخت کادر با گرادینت اختصاصی (Back-end rendering)
+    # ---------------------------------------------------------
+    
+    # دریافت رنگ کادر کاملاً مستقل از بخش حاشیه با پیش‌فرض بنفش نئونی
+    base_color_hex = style_config.styleBgColors.get('dark_edges', '#AA00FF')
+        
+    base_bg_color = color_parser(base_color_hex, (0, 0, 255, 255))
+    # اجبار به توپر بودن (Alpha=255) برای جلوگیری از حالت شیشه‌ای
+    base_bg_color = (base_bg_color[0], base_bg_color[1], base_bg_color[2], 255)
+    
+    # ب) ساخت گرادینت (سیاه در لبه‌ها، شفاف/سفید در وسط)
+    # سایز گرادینت دقیقاً اندازه کادر است
+    gradient_img = Image.new('RGBA', (box_w, box_h), (0,0,0,0))
+    g_draw = ImageDraw.Draw(gradient_img)
+    
+    # رنگ لبه‌ها: سیاهی کامل برای عمق بیشتر
+    edge_color = (0, 0, 0, 250)
+    # رنگ وسط: کاملاً شفاف (سفیدی حذف شد تا رنگ بنفش، روغنی و غلیظ بماند)
+    center_color = (0, 0, 0, 0)
+    
+    # رسم گرادینت خطی افقی (پیکسل به پیکسل برای دقت بالا)
+    # چون گرادینت افقی است، یک خط را محاسبه می‌کنیم و بسط می‌دهیم (برای سرعت)
+    line_gradient = Image.new('RGBA', (box_w, 1))
+    ld = line_gradient.load()
+    
+    for x in range(box_w):
+        # موقعیت نسبی (0 تا 1)
+        ratio = x / box_w
+        
+        # محاسبه فاصله از لبه‌ها (0 در لبه‌ها، 1 در وسط)
+        # اما گرادینت CSS می‌گوید: چپ تیره، وسط روشن، راست تیره
+        # اگر ratio < 0.5 (نیمه چپ): از تیره به روشن
+        if ratio <= 0.5:
+            p = ratio * 2 # 0 -> 1
+            r = int(edge_color[0] + (center_color[0] - edge_color[0]) * p)
+            g = int(edge_color[1] + (center_color[1] - edge_color[1]) * p)
+            b = int(edge_color[2] + (center_color[2] - edge_color[2]) * p)
+            a = int(edge_color[3] + (center_color[3] - edge_color[3]) * p)
+        else:
+            # نیمه راست: از روشن به تیره
+            p = (ratio - 0.5) * 2 # 0 -> 1
+            r = int(center_color[0] + (edge_color[0] - center_color[0]) * p)
+            g = int(center_color[1] + (edge_color[1] - center_color[1]) * p)
+            b = int(center_color[2] + (edge_color[2] - center_color[2]) * p)
+            a = int(center_color[3] + (edge_color[3] - center_color[3]) * p)
+            
+        ld[x, 0] = (r, g, b, a) # <--- شفافیت اصلی (a) را برمی‌گردانیم
+        
+    # بسط دادن گرادینت به کل ارتفاع کادر
+    gradient_img = line_gradient.resize((box_w, box_h))
+    
+    # ج) ترکیب رنگ آبی با گرادینت (اصلاح شده برای حذف کامل شفافیت)
+    # 1. استخراج مقادیر رنگ RGB (حذف هرگونه آلفای قبلی)
+    bg_r = int(base_bg_color[0])
+    bg_g = int(base_bg_color[1])
+    bg_b = int(base_bg_color[2])
+    
+    # 2. ساخت بوم اصلی
+    box_canvas = Image.new('RGBA', (box_w, box_h), (bg_r, bg_g, bg_b, 255))
+    
+    # 3. چسباندن گرادینت
+    box_canvas.paste(gradient_img, (0, 0), gradient_img)
+
+    # 4. *** تضمین قطعی: حذف هرگونه شفافیت از وسط کادر ***
+    # کانال‌های رنگ را جدا می‌کنیم و کانال آلفا را با سفید خالص (255) جایگزین می‌کنیم
+    r, g, b, _ = box_canvas.split()
+    solid_alpha = Image.new('L', (box_w, box_h), 255)
+    box_canvas = Image.merge('RGBA', (r, g, b, solid_alpha))
+    
+    # د) رسم حاشیه (Border) 1px solid rgba(255, 255, 255, 0.15)
+    border_color = (255, 255, 255, 38) # ~0.15 * 255
+    b_draw = ImageDraw.Draw(box_canvas)
+    b_draw.rounded_rectangle([0, 0, box_w-1, box_h-1], radius=radius, outline=border_color, width=1)
+
+    # ه) اعمال گوشه‌های گرد (Masking)
+    mask = Image.new('L', (box_w, box_h), 0)
+    ImageDraw.Draw(mask).rounded_rectangle([0, 0, box_w, box_h], radius=radius, fill=255)
+    
+    # چسباندن کادر نهایی روی تصویر اصلی
+    img.paste(box_canvas, (box_x1, int(box_y1)), mask)
+
+    # ---------------------------------------------------------
+    # 2. رسم متن با سایه‌های خاص (Shadows)
+    # ---------------------------------------------------------
+    
+    # محاسبه نقطه شروع متن
+    text_start_y = box_y1 + (padding_y * 0.75)  # برای هماهنگی با کادر کوچک شده، نقطه شروع متن بالا برده شد
+    # اصلاح جزئی برای وسط‌چین عمودی دقیق‌تر فونت وزیر
+    vertical_correction = int(style_config.fontSize * 0.1) 
+    
+    # رنگ متن (سفید)
+    # دریافت رنگ متن اختصاصی از تنظیمات (پیش‌فرض سفید)
+    custom_text_hex = style_config.styleColors.get('dark_edges', '#ffffff')
+    text_fill = color_parser(custom_text_hex, (255, 255, 255, 255))
+    
+    current_text_y = text_start_y - vertical_correction
+    space_w = draw.textlength(" ", font=font)
+    global_word_counter = 0
+
+    for line_idx, metrics in enumerate(line_metrics):
+        # وسط‌چین کردن افقی
+        start_x = center_x
+        # حرکت به سمت راست به اندازه نصف متن (چون راست‌چین می‌نویسیم و cursor کم می‌شود)
+        # اما منطق برنامه شما: cursor از وسط + نصف عرض شروع میکند و کم میکند
+        cursor_x = (start_x + (metrics["width"] / 2)) if is_rtl else (start_x - (metrics["width"] / 2))
+        
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = int(cursor_x - w_len) if is_rtl else int(cursor_x)
+            word_y = int(current_text_y)
+            
+            # ۱. ابتدا محاسبه رنگ کلمه (فعال یا اختصاصی)
+            is_active = (global_word_counter == active_idx) and getattr(style_config, 'useActiveColor', True)
+            active_hex = style_config.styleActiveColors.get('dark_edges', '#FFEB3B')
+            current_word_color = color_parser(active_hex, (255, 255, 255, 255)) if is_active else text_fill
+            
+            if word_infos and global_word_counter < len(word_infos):
+                 w_obj = word_infos[global_word_counter]
+                 if hasattr(w_obj, 'color') and w_obj.color:
+                      current_word_color = color_parser(w_obj.color, text_fill)
+
+            # منطق تایپ حرف به حرف برای بک‌اند
+            display_word = word
+            draw_x = word_x
+            should_draw = True
+            
+            is_typewriter = getattr(style_config, 'typewriter', False)
+            if is_typewriter and word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                current_t = getattr(style_config, 'current_render_time', 0.0)
+                if current_t < w_info.start:
+                    should_draw = False
+                elif current_t >= w_info.start and current_t < w_info.end:
+                    char_len = len(word)
+                    progress = (current_t - w_info.start) / max(0.001, w_info.end - w_info.start)
+                    visible_chars = min(char_len, int(progress * char_len) + 1)
+                    display_word = word[:visible_chars]
+                    try: sub_w = draw.textlength(display_word, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+                    except: sub_w = font.getlength(display_word)
+                    draw_x = int(cursor_x - sub_w) if is_rtl else draw_x
+
+            # ۲. فقط اگر شفافیت بیشتر از صفر بود، سایه‌ها و متن را رسم کن
+            if current_word_color[3] > 0 and should_draw and display_word:
+                # --- رسم سایه‌ها ---
+                blur_margin = 30
+                shadow_layer = Image.new('RGBA', (int(w_len) + blur_margin*2, int(line_height_px) + blur_margin*2), (0,0,0,0))
+                sl_draw = ImageDraw.Draw(shadow_layer)
+                sl_draw.text((blur_margin + (draw_x - word_x), blur_margin), display_word, font=font, fill=(0, 0, 0, 204), direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+                shadow_layer = shadow_layer.filter(ImageFilter.GaussianBlur(3))
+                img.paste(shadow_layer, (word_x + 3 - blur_margin, word_y + 3 - blur_margin), shadow_layer)
+
+                draw.text((draw_x + 1, word_y + 1), display_word, font=font, fill=(0, 0, 0, 230), direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+
+                # --- رسم متن اصلی ---
+                tr, tg, tb, ta = current_word_color
+                br, bg, bb, _ = base_bg_color
+                ratio = ta / 255.0
+                blended_color = (
+                    int(tr * ratio + br * (1 - ratio)),
+                    int(tg * ratio + bg * (1 - ratio)),
+                    int(tb * ratio + bb * (1 - ratio)),
+                    255 
+                )
+
+                draw.text((draw_x, word_y), display_word, font=font, fill=blended_color, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+            
+            cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+            global_word_counter += 1
+        
+        current_text_y += line_height_px

styles/falling_karaoke.py

@@ -0,0 +1,167 @@
+from PIL import Image, ImageDraw, ImageFont
+
+config = {
+    "ids": ["falling_karaoke"],
+    "name": "Falling Karaoke",
+    "panels": ["color", "font", "size", "position", "radius", "padding"],
+    "default_font": "vazir"
+}
+
+frontend_template = "" # فرانت‌اند از طریق JS هندل می‌شود
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    style_name = style_config.name
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    
+    # رنگ کادر ثابت (پیش‌فرض: #F77D57)
+    custom_bg = style_config.styleBgColors.get('falling_karaoke', '#F77D57')
+    box_color = color_parser(custom_bg, (247, 125, 87, 255))
+    
+    # رنگ متن گذشته (خاموش)
+    custom_text = style_config.styleColors.get('falling_karaoke', '#FFFFFF')
+    past_text_color = color_parser(custom_text, (255, 255, 255, 255))
+    
+    # رنگ متن فعال (روشن)
+    active_hex = style_config.styleActiveColors.get('falling_karaoke', '#FFFFFF')
+    active_text_color = color_parser(active_hex, (255, 255, 255, 255))
+
+    line_height_px = int(style_config.fontSize * 1.1) + int(style_config.paddingY * 2.2)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+    
+    pad_x = style_config.paddingX
+    pad_y = style_config.paddingY
+    space_w = draw.textlength(" ", font=font)
+    
+    try:
+        ref_bbox = draw.textbbox((0, 0), "سلام", font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        standard_text_visual_center_y = (ref_bbox[1] + ref_bbox[3]) / 2.0
+        standard_text_offset_y = ref_bbox[1]
+        standard_text_h = ref_bbox[3] - ref_bbox[1]
+    except:
+        standard_text_visual_center_y = style_config.fontSize / 2.0
+        standard_text_offset_y = 0
+        standard_text_h = style_config.fontSize
+
+    words_to_draw = []
+    global_word_counter = 0
+    temp_y = start_y_of_block
+
+    # ۱. محاسبه موقعیت دقیق هندسی تک‌تک کلمات در تصویر
+    for line_idx, metrics in enumerate(line_metrics):
+        line_start_idx = sum(len(m["words"]) for m in line_metrics[:line_idx])
+        is_active_on_line = (active_idx >= line_start_idx and active_idx < line_start_idx + len(metrics["words"]))
+        
+        dynamic_line_width = metrics["width"] + (pad_x * 2 if is_active_on_line else 0)
+        if is_rtl:
+            cursor_x = (width + dynamic_line_width) / 2 + (style_config.x or 0)
+        else:
+            cursor_x = (width - dynamic_line_width) / 2 + (style_config.x or 0)
+        line_center_y = temp_y + (line_height_px / 2.0)
+        
+        for w_i, word in enumerate(metrics["words"]):
+            g_idx = line_start_idx + w_i
+            w_len = metrics["word_widths"][w_i]
+            text_y_pos = line_center_y - standard_text_visual_center_y
+            current_word_padding = pad_x if g_idx == active_idx else 0
+            if is_rtl:
+                word_x = cursor_x - w_len - current_word_padding
+            else:
+                word_x = cursor_x + current_word_padding
+            
+            words_to_draw.append({
+                "text": word, "x": word_x, "y": text_y_pos, "width": w_len, 
+                "global_idx": global_word_counter
+            })
+            
+            if is_rtl:
+                cursor_x -= (w_len + space_w + (current_word_padding * 2))
+            else:
+                cursor_x += (w_len + space_w + (current_word_padding * 2))
+            global_word_counter += 1
+        temp_y += line_height_px
+
+    VERTICAL_CORRECTION = int(style_config.fontSize * 0.22)
+    current_render_time = getattr(style_config, 'current_render_time', 0.0)
+
+    # ۲. رسم کادرهای پس‌زمینه با افکت آمپول (رنگ تدریجی فلوئید بین کلمه قبلی و جدید در هر فریم)
+    for item in words_to_draw:
+        if word_infos and item["global_idx"] < len(word_infos):
+            w_info = word_infos[item["global_idx"]]
+            
+            # کاهش زمان ترنزیشن به 0.15 برای روانی و تیزی بیشتر هنگام پرش روی کلمات
+            bg_opacity = 0.0
+            TRANSITION_DUR = 0.15 
+
+            if current_render_time >= w_info.start:
+                if current_render_time < w_info.end:
+                    time_since_start = current_render_time - w_info.start
+                    if time_since_start < TRANSITION_DUR:
+                        bg_opacity = time_since_start / TRANSITION_DUR # افزایش تدریجی شفافیت کادر
+                    else:
+                        bg_opacity = 1.0
+                else:
+                    time_since_end = current_render_time - w_info.end
+                    if time_since_end < TRANSITION_DUR:
+                        bg_opacity = 1.0 - (time_since_end / TRANSITION_DUR) # کاهش تدریجی شفافیت کادر قبلی
+                    else:
+                        bg_opacity = 0.0
+            
+            if bg_opacity > 0.0:
+                rect_y1 = item["y"] - int(pad_y * 1.3) + VERTICAL_CORRECTION
+                rect_y2 = item["y"] + style_config.fontSize + int(pad_y * 1.3) + VERTICAL_CORRECTION
+                bx1, by1 = int(item["x"] - pad_x), int(rect_y1)
+                bx2, by2 = int(item["x"] + item["width"] + pad_x), int(rect_y2)
+                
+                # اعمال شفافیت داینامیک فریم‌به‌فریم روی کادرها
+                final_box_color = (box_color[0], box_color[1], box_color[2], int(box_color[3] * bg_opacity))
+                draw.rounded_rectangle([bx1, by1, bx2, by2], radius=style_config.radius, fill=final_box_color)
+
+    # ۳. رسم حروف و کلمات با انیمیشن فرود از ارتفاع -45px
+    for item in words_to_draw:
+        should_draw = False
+        y_offset = 0
+        alpha_factor = 1.0
+        is_active = False
+
+        if word_infos and item["global_idx"] < len(word_infos):
+            w_info = word_infos[item["global_idx"]]
+            if current_render_time >= w_info.start:
+                should_draw = True
+                is_active = current_render_time < w_info.end
+                if is_active:
+                    time_passed = current_render_time - w_info.start
+                    anim_dur = 0.25 # سرعت فرود کمی تندتر شد تا با فرم ریت جدید هماهنگ باشد
+                    if time_passed < anim_dur:
+                        progress = time_passed / anim_dur
+                        ease = 1 - (1 - progress) * (1 - progress)
+                        y_offset = -45 * (1 - ease) # انیمیشن فرود کلمه از بالای کادر
+                        alpha_factor = ease
+                    else:
+                        y_offset = 0
+                        alpha_factor = 1.0
+            else:
+                should_draw = False # مخفی ماندن کلمات آینده
+        elif active_idx != -1: 
+            if item["global_idx"] <= active_idx:
+                should_draw = True
+                is_active = (item["global_idx"] == active_idx)
+
+        if should_draw:
+            fill_color = active_text_color if (is_active and getattr(style_config, 'useActiveColor', True)) else past_text_color
+            if word_infos and item["global_idx"] < len(word_infos):
+                w_obj = word_infos[item["global_idx"]]
+                if hasattr(w_obj, 'color') and w_obj.color:
+                    fill_color = color_parser(w_obj.color, fill_color)
+
+            final_alpha = int(fill_color[3] * alpha_factor)
+            final_color = (fill_color[0], fill_color[1], fill_color[2], final_alpha)
+
+            rect_y1 = item["y"] - int(pad_y * 1.3) + VERTICAL_CORRECTION
+            rect_y2 = item["y"] + style_config.fontSize + int(pad_y * 1.3) + VERTICAL_CORRECTION
+            rect_center_y = (rect_y1 + rect_y2) / 2.0
+            final_text_y = rect_center_y - standard_text_offset_y - (standard_text_h / 2.0)
+
+            # رسم متن روی کادرها
+            draw.text((item["x"], final_text_y + y_offset), item["text"], font=font, fill=final_color, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))

styles/falling_plain.py

@@ -0,0 +1,124 @@
+from PIL import Image, ImageDraw, ImageFont
+
+config = {
+    "ids": ["falling_plain"],
+    "name": "Falling Plain",
+    "panels": ["color", "font", "size", "position"],
+    "default_font": "vazir"
+}
+
+frontend_template = ""
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    # رنگ متن پایه (خاموش)
+    custom_text = style_config.styleColors.get('falling_plain', '#FFFFFF')
+    base_text_color = color_parser(custom_text, (255, 255, 255, 255))
+    
+    # رنگ کلمه فعال (روشن)
+    active_hex = style_config.styleActiveColors.get('falling_plain', '#FFEB3B')
+    active_text_color = color_parser(active_hex, (255, 235, 59, 255))
+
+    line_height_px = int(style_config.fontSize * 1.5)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+    
+    space_w = draw.textlength(" ", font=font)
+    
+    try:
+        ref_bbox = draw.textbbox((0, 0), "سلام", font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        standard_text_visual_center_y = (ref_bbox[1] + ref_bbox[3]) / 2.0
+        standard_text_offset_y = ref_bbox[1]
+        standard_text_h = ref_bbox[3] - ref_bbox[1]
+    except:
+        standard_text_visual_center_y = style_config.fontSize / 2.0
+        standard_text_offset_y = 0
+        standard_text_h = style_config.fontSize
+
+    words_to_draw = []
+    global_word_counter = 0
+    temp_y = start_y_of_block
+
+    # محاسبه موقعیت هندسی تک‌تک کلمات در تصویر
+    for line_idx, metrics in enumerate(line_metrics):
+        line_start_idx = sum(len(m["words"]) for m in line_metrics[:line_idx])
+        cursor_x = (width + metrics["width"]) / 2 + (style_config.x or 0) if is_rtl else (width - metrics["width"]) / 2 + (style_config.x or 0)
+        line_center_y = temp_y + (line_height_px / 2.0)
+        
+        for w_i, word in enumerate(metrics["words"]):
+            g_idx = line_start_idx + w_i
+            w_len = metrics["word_widths"][w_i]
+            text_y_pos = line_center_y - standard_text_visual_center_y
+            word_x = (cursor_x - w_len) if is_rtl else cursor_x
+            
+            words_to_draw.append({
+                "text": word, "x": word_x, "y": text_y_pos, "width": w_len, 
+                "global_idx": global_word_counter
+            })
+            
+            cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+            global_word_counter += 1
+        temp_y += line_height_px
+
+    VERTICAL_CORRECTION = int(style_config.fontSize * 0.1)
+    current_render_time = getattr(style_config, 'current_render_time', 0.0)
+
+    # رسم کلمات با انیمیشن فرود از ارتفاع -45px
+    for item in words_to_draw:
+        should_draw = False
+        y_offset = 0
+        alpha_factor = 1.0
+        is_active = False
+
+        if word_infos and item["global_idx"] < len(word_infos):
+            w_info = word_infos[item["global_idx"]]
+            if current_render_time >= w_info.start:
+                should_draw = True
+                is_active = current_render_time < w_info.end
+                
+                # اعمال انیمیشن سقوط برای کلمه فعال
+                if is_active:
+                    time_passed = current_render_time - w_info.start
+                    anim_dur = 0.25
+                    if time_passed < anim_dur:
+                        progress = time_passed / anim_dur
+                        ease = 1 - (1 - progress) * (1 - progress)
+                        y_offset = -45 * (1 - ease)
+                        alpha_factor = ease
+                    else:
+                        y_offset = 0
+                        alpha_factor = 1.0
+                else:
+                    y_offset = 0
+                    alpha_factor = 1.0
+            else:
+                # کلمات جلو (آینده) به هیچ عنوان ترسیم نمی‌شوند
+                should_draw = False
+        elif active_idx != -1: 
+            if item["global_idx"] <= active_idx:
+                should_draw = True
+                is_active = (item["global_idx"] == active_idx)
+            else:
+                # کلمات آینده در حالت بدون فریم‌به‌فریم هم ترسیم نمی‌شوند
+                should_draw = False
+
+        if should_draw:
+            # اعمال کم‌رنگ شدن کلمات قبل (گذشته) در صورت فعال بودن دکمه
+            if not is_active and word_infos and item["global_idx"] < len(word_infos):
+                w_info = word_infos[item["global_idx"]]
+                if current_render_time >= w_info.end and getattr(style_config, 'fadeSurrounding', False):
+                    alpha_factor = 0.35
+
+            fill_color = active_text_color if (is_active and getattr(style_config, 'useActiveColor', True)) else base_text_color
+            if word_infos and item["global_idx"] < len(word_infos):
+                w_obj = word_infos[item["global_idx"]]
+                if hasattr(w_obj, 'color') and w_obj.color:
+                    fill_color = color_parser(w_obj.color, fill_color)
+
+            final_alpha = int(fill_color[3] * alpha_factor)
+            final_color = (fill_color[0], fill_color[1], fill_color[2], final_alpha)
+
+            final_text_y = item["y"] + VERTICAL_CORRECTION
+
+            draw.text((item["x"], final_text_y + y_offset), item["text"], font=font, fill=final_color, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))

styles/falling_words.py

@@ -0,0 +1,164 @@
+from PIL import Image, ImageDraw, ImageFont
+
+config = {
+    "ids": ["falling_words"],
+    "name": "Falling Words",
+    "panels": ["color", "font", "size", "position", "radius", "padding"],
+    "default_font": "vazir"
+}
+
+# قالب نمایش زنده در مرورگر (با انیمیشن CSS)
+frontend_template = """
+<span style="
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 4px;
+    animation: dropIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+    opacity: 0;
+    transform: translateY(-20px);
+    font-family: inherit;
+">
+    {{WORD}}
+</span>
+<style>
+@keyframes dropIn {
+    0% { opacity: 0; transform: translateY(-30px); }
+    100% { opacity: 1; transform: translateY(0); }
+}
+</style>
+"""
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    # دریافت رنگ متن فقط از تنظیمات اختصاصی (پیش‌فرض سفید مطلق) - قطع ارتباط با استایل‌های دیگر
+    text_hex = style_config.styleColors.get('falling_words', '#FFFFFF')
+    base_text_color = color_parser(text_hex, (255, 255, 255, 255))
+    
+    # خواندن رنگ کادر از استایل (پیش‌فرض نارنجی F77D57)
+    custom_bg_hex = style_config.styleBgColors.get('falling_words', '#F77D57')
+    box_color = color_parser(custom_bg_hex, (247, 125, 87, 255))
+    
+    line_height_px = int(style_config.fontSize * 1.5)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+
+    # محاسبه عرض کادر
+    max_line_width = 0
+    for m in line_metrics:
+        if m["width"] > max_line_width: max_line_width = m["width"]
+
+    box_center_x = width / 2 + (style_config.x or 0)
+    box_width = max_line_width + (style_config.paddingX * 2)
+    
+    # ۱. محاسبه نسبت ابعاد ویدیو
+    ratio = height / width
+
+    # ۲. تنظیم موقعیت عمودی (اگر عدد مثبت باشد پایین می‌رود و اگر منفی باشد بالا)
+    if ratio > 1.6: 
+        # مخصوص ویدیوهای عمودی (طبق تست شما: ۱۲)
+        box_center_y_adjustment = 12 
+    elif ratio > 1.1: 
+        # مخصوص ویدیوهای مربعی
+        box_center_y_adjustment = 8 
+    else: 
+        # مخصوص ویدیوهای افقی
+        box_center_y_adjustment = 5
+
+    # ۳. اصلاحیه بصری سقف کادر (تراز عمودی متن)
+    visual_top_correction = int(style_config.fontSize * 0.12)
+
+    # ۳. لبه‌های چپ و راست
+    box_x1 = box_center_x - (box_width / 2)
+    box_x2 = box_center_x + (box_width / 2)
+    
+    # ۴. مختصات سقف و کف (فرمول دقیق کلاسیک)
+    box_y1 = start_y_of_block - style_config.paddingY + box_center_y_adjustment + visual_top_correction
+    box_y2 = start_y_of_block + total_block_height + style_config.paddingY + box_center_y_adjustment - (line_height_px * 0.3)
+    
+    # --- رفع باگ: جلوگیری از منفی شدن ارتفاع کادر در پدینگ‌های کم ---
+    if box_y2 <= box_y1:
+        box_y2 = box_y1 + 1  # حداقل ۱ پیکسل ارتفاع داشته باشد تا ارور ندهد
+    
+    # رسم کادر (شرط len(lines) اضافه شد تا در سکوت اصلا کادر نکشد)
+    if len(lines) > 0 and style_config.backType in ['solid', 'transparent']:
+        if style_config.backType == 'transparent' and box_color[3] == 255:
+            box_color = (box_color[0], box_color[1], box_color[2], 160)
+        draw.rounded_rectangle([box_x1, box_y1, box_x2, box_y2], radius=style_config.radius, fill=box_color)
+
+    # --- رسم کلمات با منطق الگوبرداری شده از آبی نئون ---
+    text_start_y = box_y1 + (style_config.paddingY * 0.35)
+    vertical_corr = int(style_config.fontSize * 0.1)
+    current_line_y = text_start_y - vertical_corr
+
+    space_w = draw.textlength(" ", font=font)
+    global_word_counter = 0
+    current_render_time = getattr(style_config, 'current_render_time', 0.0)
+
+    for line_idx, enumerate_metrics in enumerate(line_metrics):
+        metrics = enumerate_metrics
+        start_x = (width + metrics["width"]) / 2 + (style_config.x or 0) if is_rtl else (width - metrics["width"]) / 2 + (style_config.x or 0)
+        cursor_x = start_x
+        text_y_pos = current_line_y
+        
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = (cursor_x - w_len) if is_rtl else cursor_x
+            
+            should_draw = False
+            y_offset = 0
+            alpha_factor = 1.0
+
+            # منطق اصلی نمایش کلمه
+            if word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                
+                if current_render_time >= w_info.start:
+                    should_draw = True
+                    # انیمیشن سقوط فقط برای کلمه‌ای که تازه شروع شده یا در حال اجراست
+                    time_passed = current_render_time - w_info.start
+                    anim_dur = 0.3 # زمان سقوط (ثانیه)
+                    
+                    if time_passed < anim_dur:
+                        progress = time_passed / anim_dur
+                        # انیمیشن نرم Ease-Out
+                        ease = 1 - (1 - progress) * (1 - progress)
+                        y_offset = -40 * (1 - ease)
+                        alpha_factor = ease
+                    else:
+                        y_offset = 0
+                        alpha_factor = 1.0
+                else:
+                    # کلماتی که هنوز زمانشان نرسیده نباید رسم شوند
+                    should_draw = False
+            else:
+                # بک‌آپ برای حالتی که اطلاعات کلمه نیست (در ادیتور)
+                if active_idx != -1:
+                    should_draw = (global_word_counter <= active_idx)
+                else:
+                    should_draw = False # اصلاح مشکل نمایش یکباره: در گپ‌ها چیزی نشان نده
+
+            if should_draw:
+                # تعیین رنگ پایه
+                this_color = base_text_color
+                
+                # اگر کلمه فعال است (زمان رندر بین شروع و پایان کلمه است)
+                if getattr(style_config, 'useActiveColor', True) and w_info and current_render_time >= w_info.start and current_render_time < w_info.end:
+                    active_hex = style_config.styleActiveColors.get('falling_words', '#FFEB3B')
+                    this_color = color_parser(active_hex, (255, 235, 59, 255))
+                if word_infos and global_word_counter < len(word_infos):
+                    w_obj = word_infos[global_word_counter]
+                    if hasattr(w_obj, 'color') and w_obj.color:
+                        this_color = color_parser(w_obj.color, this_color)
+                
+                # ترکیب شفافیت انیمیشن با شفافیت اصلی رنگ
+                final_alpha = int(this_color[3] * alpha_factor)
+                final_color = (this_color[0], this_color[1], this_color[2], final_alpha)
+                
+                # حذف آفست‌های مخرب و هاردکد شده (متن کاملاً تابع کادر است)
+                draw.text((word_x, text_y_pos + y_offset), word, font=font, fill=final_color, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+
+            cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+            global_word_counter += 1
+        
+        current_line_y += line_height_px

styles/karaoke.py

@@ -0,0 +1,156 @@
+from PIL import Image, ImageDraw, ImageFont
+
+config = {
+    # تغییر: حذف "progressive_write" از اینجا، چون جایش اینجا نیست
+    "ids": ["karaoke_static", "auto_director"],
+    "name": "Dynamic Karaoke",
+    "panels": ["color", "font", "size", "position", "radius", "padding"],
+    "default_font": "lalezar"
+}
+
+frontend_template = """
+<span style="display: inline-block; vertical-align: middle; margin: 0 5px; color: {{COLOR}} !important; opacity: {{OPACITY}}; transition: all 0.1s; font-family: inherit;">{{WORD}}</span>
+"""
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    style_name = style_config.name
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    
+    # خواندن رنگ کادر از دیکشنری رنگ‌های پس‌زمینه
+    custom_bg = style_config.styleBgColors.get('karaoke_static', '#A020F0')
+    base_color = color_parser(custom_bg, (160, 32, 240, 255))
+    
+    line_height_px = int(style_config.fontSize * 1.1) + int(style_config.paddingY * 2.2)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+    
+    pad_x = style_config.paddingX
+    pad_y = style_config.paddingY
+    
+    space_w = draw.textlength(" ", font=font)
+    
+    # محاسبه متریک‌های استاندارد فونت بر اساس کلمه مرجع جهت تراز یکدست عمودی تمام کلمات
+    ref_word = "سلام"
+    try:
+        ref_bbox = draw.textbbox((0, 0), ref_word, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        standard_text_visual_center_y = (ref_bbox[1] + ref_bbox[3]) / 2.0
+        standard_text_offset_y = ref_bbox[1]
+        standard_text_h = ref_bbox[3] - ref_bbox[1]
+    except:
+        standard_text_visual_center_y = style_config.fontSize / 2.0
+        standard_text_offset_y = 0
+        standard_text_h = style_config.fontSize
+
+    # 1. محاسبه مختصات همه کلمات با تراز دقیق
+    words_to_draw = []
+    global_word_counter = 0
+    temp_y = start_y_of_block
+
+    for line_idx, metrics in enumerate(line_metrics):
+        line_start_idx = sum(len(m["words"]) for m in line_metrics[:line_idx])
+        is_active_on_line = (active_idx >= line_start_idx and active_idx < line_start_idx + len(metrics["words"]))
+        
+        dynamic_line_width = metrics["width"] + (pad_x * 2 if is_active_on_line else 0)
+        if is_rtl:
+            cursor_x = (width + dynamic_line_width) / 2 + style_config.x
+        else:
+            cursor_x = (width - dynamic_line_width) / 2 + style_config.x
+        
+        # مرکز عمودی دقیق و هندسی این خط فعلی
+        line_center_y = temp_y + (line_height_px / 2.0)
+        
+        for w_i, word in enumerate(metrics["words"]):
+            g_idx = line_start_idx + w_i
+            w_len = metrics["word_widths"][w_i]
+            
+            # استفاده از مقدار ثابت برای جلوگیری از نوسان عمودی کلمات خط
+            text_y_pos = line_center_y - standard_text_visual_center_y
+            
+            current_word_padding = pad_x if g_idx == active_idx else 0
+            if is_rtl:
+                word_x = cursor_x - w_len - current_word_padding
+            else:
+                word_x = cursor_x + current_word_padding
+            
+            words_to_draw.append({
+                "text": word, "x": word_x, "y": text_y_pos, "width": w_len, 
+                "global_idx": global_word_counter,
+                "line_center_y": line_center_y
+            })
+            
+            if is_rtl:
+                cursor_x -= (w_len + space_w + (current_word_padding * 2))
+            else:
+                cursor_x += (w_len + space_w + (current_word_padding * 2))
+            global_word_counter += 1
+            
+        temp_y += line_height_px
+
+    VERTICAL_CORRECTION = int(style_config.fontSize * 0.22)
+
+    # 2. رسم کادرها (برای اینکه زیر متن باشند)
+    for item in words_to_draw:
+        is_active = (item["global_idx"] == active_idx)
+        
+        should_draw_box = False
+        box_color = (0,0,0,0)
+
+        if style_name == "auto_director" and is_active:
+            should_draw_box = True
+            box_color = (0, 215, 255, 255) if item["global_idx"] % 2 == 0 else (255, 0, 128, 255)
+        
+        elif style_name == "karaoke_static" and is_active:
+            should_draw_box = True
+            box_color = base_color
+
+        if should_draw_box:
+            rect_y1 = item["y"] - int(pad_y * 1.3) + VERTICAL_CORRECTION
+            rect_y2 = item["y"] + style_config.fontSize + int(pad_y * 1.3) + VERTICAL_CORRECTION
+            
+            bx1, by1 = int(item["x"] - pad_x), int(rect_y1)
+            bx2, by2 = int(item["x"] + item["width"] + pad_x), int(rect_y2)
+            
+            draw.rounded_rectangle([bx1, by1, bx2, by2], radius=style_config.radius, fill=box_color)
+
+    # 3. رسم متن با تراز عمودی کاملاً منطبق بر مرکز هندسی کادر
+    for item in words_to_draw:
+        is_active = (item["global_idx"] == active_idx) and getattr(style_config, 'useActiveColor', True)
+        
+        # رنگ پیش‌فرض
+        fill_color = base_color
+        
+        if style_name == "progressive_write":
+             if active_idx != -1 and item["global_idx"] > active_idx:
+                 continue # کلمه را نکش
+        
+        elif style_name == "auto_director":
+             if is_active:
+                 active_hex = style_config.styleActiveColors.get('auto_director', '#ffffff')
+                 fill_color = color_parser(active_hex, (255, 255, 255, 255))
+             else:
+                 custom_text_hex = style_config.styleColors.get('auto_director', '#ffffff')
+                 fill_color = color_parser(custom_text_hex, (255, 255, 255, 255))
+        
+        elif style_name == "karaoke_static":
+             if is_active:
+                 active_hex = style_config.styleActiveColors.get('karaoke_static', '#ffffff')
+                 fill_color = color_parser(active_hex, (255, 255, 255, 255))
+             else:
+                 custom_text_hex = style_config.styleColors.get('karaoke_static', '#ffffff')
+                 fill_color = color_parser(custom_text_hex, (255, 255, 255, 255))
+
+        # اعمال رنگ دستی کاربر
+        if word_infos and item["global_idx"] < len(word_infos):
+             w_obj = word_infos[item["global_idx"]]
+             if hasattr(w_obj, 'color') and w_obj.color:
+                  fill_color = color_parser(w_obj.color, fill_color)
+
+        # محاسبه مرکز هندسی کادر رسم شده برای قرارگیری دقیق متن در مرکز کادر
+        rect_y1 = item["y"] - int(pad_y * 1.3) + VERTICAL_CORRECTION
+        rect_y2 = item["y"] + style_config.fontSize + int(pad_y * 1.3) + VERTICAL_CORRECTION
+        rect_center_y = (rect_y1 + rect_y2) / 2.0
+        
+        final_text_y = rect_center_y - standard_text_offset_y - (standard_text_h / 2.0)
+
+        draw.text((item["x"], final_text_y), item["text"], font=font, fill=fill_color, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))

styles/music.py

@@ -0,0 +1,588 @@
+import random
+from PIL import Image, ImageDraw, ImageFont
+
+# 1. تنظیمات و متا‌دیتا
+config = {
+    "ids": ["music_player"],
+    "name": "Music Player",
+    "panels": ["font", "size", "position"], # پنل‌های رنگ را غیرفعال کردیم چون رنگ‌ها ثابت هستند
+    "default_font": "vazir"
+}
+
+frontend_template = """
+<!-- ترفند نهایی: پاکسازی با تاخیر برای غلبه بر رفرش جاوااسکریپت -->
+<img src="x" onerror="
+    var p = this.parentElement;
+    if(p) {
+        /* تایمر باعث می‌شود این دستورات دقیقا بعد از کدهای مزاحم اجرا شوند */
+        setTimeout(function(){
+            p.style.setProperty('background', 'none', 'important');
+            p.style.setProperty('background-color', 'transparent', 'important');
+            p.style.setProperty('box-shadow', 'none', 'important');
+            p.style.setProperty('border', 'none', 'important');
+            p.style.setProperty('outline', 'none', 'important');
+            /* حذف سایه متن مزاحم */
+            p.style.setProperty('text-shadow', 'none', 'important');
+        }, 10);
+    }
+    this.style.display='none';
+">
+
+<div class="music-style-preview" style="display: flex; justify-content: center; align-items: center; width: 100%;">
+    
+    <!-- کادر اصلی: عرض پویا با محدودیت حداقل و حداکثر -->
+    <div class="music-wrapper" style="
+        position: relative; 
+        z-index: 10;
+        display: inline-flex;       
+        justify-content: center;
+        align-items: center;
+        min-width: 11em;           
+        max-width: 22em;           
+        height: 3.4em;             
+    ">
+        
+        <!-- لایه 1: ویژوالایزر (۷۰ خط متراکم) -->
+        <div class="hanging-visualizer" style="
+            position: absolute;
+            top: 72%;
+            width: 80%; 
+            left: 50%;
+            transform: translateX(-50%);
+            height: 1.5em;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            z-index: 1; 
+            pointer-events: none;
+        ">
+            <div class="v-bar" style="animation-duration: 1.1s; animation-delay: -0.1s;"></div>
+            <div class="v-bar" style="animation-duration: 1.5s; animation-delay: -0.8s;"></div>
+            <div class="v-bar" style="animation-duration: 0.9s; animation-delay: -0.3s;"></div>
+            <div class="v-bar" style="animation-duration: 1.3s; animation-delay: -0.5s;"></div>
+            <div class="v-bar" style="animation-duration: 1.7s; animation-delay: -0.2s;"></div>
+            <div class="v-bar" style="animation-duration: 1.0s; animation-delay: -0.9s;"></div>
+            <div class="v-bar" style="animation-duration: 1.4s; animation-delay: -0.4s;"></div>
+            <div class="v-bar" style="animation-duration: 1.8s; animation-delay: -0.7s;"></div>
+            <div class="v-bar" style="animation-duration: 1.2s; animation-delay: -0.1s;"></div>
+            <div class="v-bar" style="animation-duration: 1.6s; animation-delay: -0.6s;"></div>
+            <div class="v-bar" style="animation-duration: 0.8s; animation-delay: -0.3s;"></div>
+            <div class="v-bar" style="animation-duration: 1.9s; animation-delay: -0.5s;"></div>
+            <div class="v-bar" style="animation-duration: 1.3s; animation-delay: -0.2s;"></div>
+            <div class="v-bar" style="animation-duration: 1.5s; animation-delay: -0.8s;"></div>
+            <div class="v-bar" style="animation-duration: 1.0s; animation-delay: -0.4s;"></div>
+            <div class="v-bar" style="animation-duration: 1.7s; animation-delay: -0.1s;"></div>
+            <div class="v-bar" style="animation-duration: 1.1s; animation-delay: -0.9s;"></div>
+            <div class="v-bar" style="animation-duration: 1.4s; animation-delay: -0.3s;"></div>
+            <div class="v-bar" style="animation-duration: 1.8s; animation-delay: -0.6s;"></div>
+            <div class="v-bar" style="animation-duration: 0.9s; animation-delay: -0.2s;"></div>
+            <div class="v-bar" style="animation-duration: 1.6s; animation-delay: -0.5s;"></div>
+            <div class="v-bar" style="animation-duration: 1.2s; animation-delay: -0.8s;"></div>
+            <div class="v-bar" style="animation-duration: 1.5s; animation-delay: -0.1s;"></div>
+            <div class="v-bar" style="animation-duration: 1.0s; animation-delay: -0.7s;"></div>
+            <div class="v-bar" style="animation-duration: 1.9s; animation-delay: -0.4s;"></div>
+            <div class="v-bar" style="animation-duration: 1.3s; animation-delay: -0.9s;"></div>
+            <div class="v-bar" style="animation-duration: 1.7s; animation-delay: -0.3s;"></div>
+            <div class="v-bar" style="animation-duration: 1.1s; animation-delay: -0.6s;"></div>
+            <div class="v-bar" style="animation-duration: 1.4s; animation-delay: -0.2s;"></div>
+            <div class="v-bar" style="animation-duration: 0.8s; animation-delay: -0.5s;"></div>
+            <div class="v-bar" style="animation-duration: 1.6s; animation-delay: -0.1s;"></div>
+            <div class="v-bar" style="animation-duration: 1.2s; animation-delay: -0.8s;"></div>
+            <div class="v-bar" style="animation-duration: 1.8s; animation-delay: -0.4s;"></div>
+            <div class="v-bar" style="animation-duration: 1.0s; animation-delay: -0.7s;"></div>
+            <div class="v-bar" style="animation-duration: 1.5s; animation-delay: -0.3s;"></div>
+            <div class="v-bar" style="animation-duration: 1.3s; animation-delay: -0.9s;"></div>
+            <div class="v-bar" style="animation-duration: 1.7s; animation-delay: -0.2s;"></div>
+            <div class="v-bar" style="animation-duration: 1.1s; animation-delay: -0.6s;"></div>
+            <div class="v-bar" style="animation-duration: 1.9s; animation-delay: -0.5s;"></div>
+            <div class="v-bar" style="animation-duration: 1.4s; animation-delay: -0.1s;"></div>
+            <div class="v-bar" style="animation-duration: 0.9s; animation-delay: -0.8s;"></div>
+            <div class="v-bar" style="animation-duration: 1.6s; animation-delay: -0.3s;"></div>
+            <div class="v-bar" style="animation-duration: 1.2s; animation-delay: -0.7s;"></div>
+            <div class="v-bar" style="animation-duration: 1.8s; animation-delay: -0.4s;"></div>
+            <div class="v-bar" style="animation-duration: 1.0s; animation-delay: -0.2s;"></div>
+            <div class="v-bar" style="animation-duration: 1.5s; animation-delay: -0.9s;"></div>
+            <div class="v-bar" style="animation-duration: 1.3s; animation-delay: -0.5s;"></div>
+            <div class="v-bar" style="animation-duration: 1.7s; animation-delay: -0.1s;"></div>
+            <div class="v-bar" style="animation-duration: 1.1s; animation-delay: -0.6s;"></div>
+            <div class="v-bar" style="animation-duration: 1.4s; animation-delay: -0.3s;"></div>
+            <div class="v-bar" style="animation-duration: 1.9s; animation-delay: -0.8s;"></div>
+            <div class="v-bar" style="animation-duration: 1.2s; animation-delay: -0.4s;"></div>
+            <div class="v-bar" style="animation-duration: 1.6s; animation-delay: -0.2s;"></div>
+            <div class="v-bar" style="animation-duration: 0.8s; animation-delay: -0.7s;"></div>
+            <div class="v-bar" style="animation-duration: 1.5s; animation-delay: -0.1s;"></div>
+            <div class="v-bar" style="animation-duration: 1.0s; animation-delay: -0.9s;"></div>
+            <div class="v-bar" style="animation-duration: 1.8s; animation-delay: -0.5s;"></div>
+            <div class="v-bar" style="animation-duration: 1.3s; animation-delay: -0.3s;"></div>
+            <div class="v-bar" style="animation-duration: 1.7s; animation-delay: -0.6s;"></div>
+            <div class="v-bar" style="animation-duration: 1.1s; animation-delay: -0.2s;"></div>
+            <div class="v-bar" style="animation-duration: 1.4s; animation-delay: -0.8s;"></div>
+            <div class="v-bar" style="animation-duration: 1.9s; animation-delay: -0.4s;"></div>
+            <div class="v-bar" style="animation-duration: 1.2s; animation-delay: -0.1s;"></div>
+            <div class="v-bar" style="animation-duration: 1.6s; animation-delay: -0.7s;"></div>
+            <div class="v-bar" style="animation-duration: 1.0s; animation-delay: -0.3s;"></div>
+            <div class="v-bar" style="animation-duration: 1.5s; animation-delay: -0.9s;"></div>
+            <div class="v-bar" style="animation-duration: 1.3s; animation-delay: -0.5s;"></div>
+            <div class="v-bar" style="animation-duration: 1.8s; animation-delay: -0.2s;"></div>
+            <div class="v-bar" style="animation-duration: 1.1s; animation-delay: -0.6s;"></div>
+            <div class="v-bar" style="animation-duration: 1.4s; animation-delay: -0.1s;"></div>
+        </div>
+
+        <!-- لایه 2: نوار قرمز پیشرفت -->
+        <div class="progress-border-background" style="
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-color: #d32f2f;
+            border-radius: var(--outer-radius);
+            z-index: 5;
+            clip-path: inset(0 0 0 var(--progress, 100%));
+            transition: clip-path 0.25s linear;
+            box-shadow: 0 0.1em 0.3em rgba(211, 47, 47, 0.3);
+            /* کد جدید برای توخالی کردن وسط نوار قرمز */
+            padding: var(--border-thickness);
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+        "></div>
+
+        <!-- لایه 3: کادر سفید متن -->
+        <div class="music-text-box" style="
+            position: relative;
+            z-index: 3;
+            background-color: #ffffff;
+            color: #000000;
+            border-radius: 1.5em; 
+            font-family: inherit;
+            margin: calc(var(--border-thickness) - 4.5px);
+            flex-grow: 1; 
+            height: calc(100% - 2 * var(--border-thickness));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 1em; 
+            overflow: hidden;
+        ">
+            <span class="music-text-inner" style="
+                white-space: nowrap;
+                font-weight: 900;
+                font-size: 1.1em;
+                transform-origin: center;
+                display: inline-block;
+            ">{{WORD}}</span>
+        </div>
+
+    </div>
+    
+    <style>
+        :root {
+            --border-thickness: 0.35em;
+            --outer-radius: 1.5em;
+        }
+        .v-bar {
+            width: 0.12em; 
+            background-color: #fff;
+            border-radius: 1em; 
+            flex-shrink: 0;
+            animation-name: naturalWave;
+            animation-timing-function: ease-in-out;
+            animation-iteration-count: infinite;
+            animation-direction: alternate;
+        }
+        @keyframes naturalWave { 
+            0% { height: 0.5em; opacity: 0.7; } 
+            100% { height: 1.5em; opacity: 1; } 
+        }
+    </style>
+</div>
+"""
+
+# 3. منطق رسم فریم به فریم (Backend Logic)
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    # دریافت رنگ پس‌زمینه انتخابی کاربر برای باکس و ویژوالایزر
+    box_bg_color = (255, 255, 255, 255) # پیش‌فرض سفید
+    if hasattr(style_config, 'styleBgColors'):
+        bg_hex = style_config.styleBgColors.get('music_player')
+        if bg_hex:
+            box_bg_color = color_parser(bg_hex, (255, 255, 255, 255))
+    
+    visualizer_color = box_bg_color # ویژوالایزر دقیقاً همرنگ باکس می‌شود
+    text_color = (0, 0, 0, 255) # سیاه پیش‌فرض
+
+    # خواندن رنگ از دیکشنری با کلید music_player
+    custom_color = style_config.styleColors.get('music_player')
+    if custom_color:
+        u_r, u_g, u_b, u_a = color_parser(custom_color, (0, 0, 0, 255))
+        
+        # محاسبه ترکیب رنگ با سفید (برای جلوگیری از سوراخ شدن باکس)
+        # فرمول: (رنگ متن * درصد شفافیت) + (سفید * درصد باقی‌مانده)
+        alpha_factor = u_a / 255.0
+        final_r = int((u_r * alpha_factor) + (255 * (1 - alpha_factor)))
+        final_g = int((u_g * alpha_factor) + (255 * (1 - alpha_factor)))
+        final_b = int((u_b * alpha_factor) + (255 * (1 - alpha_factor)))
+        
+        # رنگ نهایی کاملاً توپر (255) است تا باکس سفید را خراب نکند
+        text_color = (final_r, final_g, final_b, 255)
+    # خواندن رنگ نوار پیشرفت از تنظیمات (پیش‌فرض قرمز)
+    prog_hex = style_config.styleBgColors.get('music_player_progress', '#d32f2f')
+    border_color = color_parser(prog_hex, (211, 47, 47, 255))
+    
+    padding_x = 30
+    padding_y = 6
+    border_thickness = 5
+    radius = 50  # گردی زیاد (Pill Shape)
+
+    # --- محاسبه ابعاد باکس متن (تک خط + تغییر سایز خودکار) ---
+    # 1. تبدیل تمام کلمات به یک خط واحد
+    all_words = []
+    for line in lines:
+        all_words.extend(line)
+    full_text = " ".join(all_words)
+
+    # 2. تعیین حداکثر عرض مجاز (مثلاً 85 درصد عرض کل ویدیو)
+    max_allowed_width = width * 0.85
+    available_text_width = max_allowed_width - (padding_x * 2)
+
+    # 3. محاسبه عرض متن با فونت فعلی
+    try: text_w = draw.textlength(full_text, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+    except: text_w = font.getlength(full_text)
+
+    # 4. تغییر سایز فونت اگر متن بزرگتر از کادر بود (Shrink to fit)
+    effective_font = font
+    
+    if text_w > available_text_width:
+        # محاسبه ضریب کوچک‌نمایی
+        scale_factor = available_text_width / text_w
+        new_size = int(style_config.fontSize * scale_factor)
+        
+        # نگاشت دقیق نام فونت به فایل (باید دقیقاً مشابه فایل‌های موجود در پوشه font باشد)
+        font_files = {
+            "vazir": "Vazirmatn.ttf", "lalezar": "Lalezar.ttf", 
+            "bangers": "Bangers.ttf", "roboto": "Roboto.ttf"
+        }
+        # مسیر نسبی از ریشه پروژه
+        font_path = f"font/{font_files.get(style_config.font, 'Vazirmatn.ttf')}"
+        
+        try:
+            # تلاش برای لود فونت با سایز جدید
+            effective_font = ImageFont.truetype(font_path, new_size)
+            # اگر موفق ��د، عرض باکس را روی ماکزیمم قفل می‌کنیم
+            box_width = max_allowed_width
+        except:
+            # اگر فونت لود نشد (مثلاً فایل پیدا نشد)، چاره‌ای نیست جز اینکه بزرگ بماند
+            # اما لااقل باکس را به اندازه متن می‌گیریم تا کادر ناقص نشود
+            box_width = text_w + (padding_x * 2)
+    else:
+        # اگر متن کوچک بود و جا می‌شد
+        # محاسبه حداقل عرض (12em) تا کادر مثل ورودی برای کلمات کوتاه پهن بماند
+        min_w = style_config.fontSize * 11
+        box_width = max(text_w + (padding_x * 2), min_w)
+
+    # محاسبه ارتفاع بر اساس فونت جدید
+    ascent, descent = effective_font.getmetrics()
+    line_height_px = ascent + descent
+    box_height = line_height_px + (padding_y * 2)
+
+    # مرکز باکس
+    center_x = width / 2 + style_config.x
+    
+    # موقعیت عمودی
+    bottom_margin = style_config.marginV
+    
+    # اصلاحیه ارتفاع: این عدد (100) را زیاد کنید تا کادر بالاتر برود
+    height_correction = 22 
+    
+    box_y2 = height - bottom_margin - height_correction
+    box_y1 = box_y2 - box_height
+    box_x1 = center_x - (box_width / 2)
+    box_x2 = center_x + (box_width / 2)
+
+    # --- محاسبه درصد پیشرفت (Progress) بر اساس زمان کل ویدیو و زمان دقیق فریم ---
+    total_video_duration = getattr(style_config, 'total_video_duration', 1.0)
+    
+    # دریافت زمان دقیق فریم که از app.py فرستاده شده است
+    current_time = getattr(style_config, 'current_render_time', 0.0)
+    
+    # محاسبه نسبت پیشرفت کل ویدیو (این باعث حرکت نرم و پیوسته می‌شود)
+    if total_video_duration > 0:
+        progress_ratio = current_time / total_video_duration
+    else:
+        progress_ratio = 0.0
+
+    progress_ratio = max(0.0, min(1.0, progress_ratio))
+
+    # --- 1. رسم ویژوالایزر (روان و چسبیده) ---
+    vis_y_start = box_y2 # چسبیده کامل به کادر (فاصله 0)
+    
+    # تنظیمات ابعاد و منطق جدید (تعداد ثابت، فاصله متغیر)
+    # اگر ویدیو مربع/افقی است (width >= height) تنظیمات درشت‌تر شود
+    is_square_mode = width >= height
+    vis_bar_width = 4.0 if is_square_mode else 2.5
+    vis_height_scale = 35 if is_square_mode else 20
+    
+    fixed_bar_count = 55 # تعداد ثابت میله‌ها (مشابه ورودی)
+    
+    # عرض کل ویژوالایزر (80 درصد عرض باکس، دقیقاً مثل کد CSS ورودی)
+    total_vis_width = box_width * 0.80
+    
+    # محاسبه فاصله بین میله‌ها (فاصله دینامیک)
+    # فرمول: (کل فضا - عرض یک میله) تقسیم بر (تعداد - 1)
+    if fixed_bar_count > 1:
+        step_x = (total_vis_width - vis_bar_width) / (fixed_bar_count - 1)
+    else:
+        step_x = 0
+    
+    # نقطه شروع (وسط چین کردن کل بلوک ویژوالایزر)
+    vis_start_x = center_x - (total_vis_width / 2)
+
+    # دریافت زمان دقیق برای حرکت سینوسی و روان
+    current_t = getattr(style_config, 'current_render_time', 0.0)
+    import math # نیاز به math برای حرکت سینوسی
+
+    for i in range(fixed_bar_count):
+        # الگوی موجی متحرک (ترکیب دو موج سینوسی با سرعت‌های مختلف)
+        # i * 0.5: تفاوت فاز بین میله‌ها (شکل موج)
+        # current_t * 10: سرعت حرکت موج
+        wave1 = math.sin(i * 13.7 + current_t * 5) 
+        wave2 = math.sin(i * 29.3 - current_t * 7)
+        
+        normalized_h = (wave1 + wave2 + 2) / 4 # مقدار بین 0 تا 1
+        h = 5 + (normalized_h * vis_height_scale)
+        
+        bx = vis_start_x + (i * step_x)
+        
+        # رسم میله کپسولی (با شعاع گردی)
+        draw.rounded_rectangle([bx, vis_y_start, bx + vis_bar_width, vis_y_start + h], radius=5, fill=visualizer_color)
+
+    # --- 2. رسم باکس سفید ---
+    draw.rounded_rectangle([box_x1, box_y1, box_x2, box_y2], radius=radius, fill=box_bg_color)
+
+    # --- 3. رسم متن (تک خط) ---
+    # محاسبه موقعیت Y متن برای قرارگیری دقیق در مرکز عمودی باکس
+    text_y = box_y1 + (box_height - line_height_px) / 2  # حذف descent/2
+    
+    # محاسبه مجدد عرض متن نهایی با فونت جدید برای سنتر کردن افقی
+    try: final_text_w = draw.textlength(full_text, font=effective_font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+    except: final_text_w = effective_font.getlength(full_text)
+    
+    space_w = draw.textlength(" ", font=effective_font)
+    if is_rtl:
+        cursor_x = center_x + (final_text_w / 2) # شروع از راست
+    else:
+        cursor_x = center_x - (final_text_w / 2) # شروع از چپ
+    
+    for word in all_words:
+        try: w_len = draw.textlength(word, font=effective_font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        except: w_len = effective_font.getlength(word)
+        
+        word_x = (cursor_x - w_len) if is_rtl else cursor_x
+        draw.text((word_x, text_y), word, font=effective_font, fill=text_color, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        
+        cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+
+    # الف) ساخت لایه قرمز کامل (فقط حاشیه)
+    # محدوده حاشیه کمی بزرگتر از باکس سفید است
+    # اگر مربع بود 15، اگر عمودی بود 10
+    border_offset = 15 if width >= height else 10
+    bx1_b, by1_b = box_x1 - border_offset, box_y1 - border_offset
+    bx2_b, by2_b = box_x2 + border_offset, box_y2 + border_offset
+    
+    # یک تصویر موقت برای حاشیه قرمز
+    red_layer = Image.new('RGBA', img.size, (0,0,0,0))
+    red_draw = ImageDraw.Draw(red_layer)
+    
+    # رسم حاشیه قرمز توخالی (Stroke)
+    # پیلو stroke برای rounded_rectangle ندارد، پس دو تا می‌کشیم
+    # بیرونی (قرمز)
+    red_draw.rounded_rectangle([bx1_b, by1_b, bx2_b, by2_b], radius=radius+2, fill=border_color)
+    # داخلی (حذف کردن وسطش برای توخالی شدن - با حالت Clear)
+    # از کامپوزیت استفاده می‌کنیم یا ساده‌تر: 
+    # چون زیرش ترنسپیرنت است، نمی‌توانیم وسطش را پاک کنیم به راحتی.
+    # روش ساده‌تر: فقط حاشیه را روی ماسک اعمال می‌کنیم.
+    
+    # روش بهتر برای پیلو: ساخت ماسک پیشرفت (Progress Mask)
+    # ماسک تعیین می‌کند کجای تصویر قرمز نمایش داده شود.
+    mask = Image.new('L', img.size, 0) # سیاه کامل
+    mask_draw = ImageDraw.Draw(mask)
+    
+    # محاسبه ناحیه پر شده (از راست به چپ)
+    # کل عرض حاشیه
+    full_border_width = bx2_b - bx1_b
+    filled_width = full_border_width * progress_ratio
+    
+    # ناحیه سفید ماسک (جایی که قرمز دیده می‌شود)
+    # از سمت راست (bx2_b) شروع می‌شود و به اندازه filled_width به چپ می‌آید
+    fill_rect = [bx2_b - filled_width, by1_b, bx2_b, by2_b]
+    
+    if filled_width > 0:
+        mask_draw.rectangle(fill_rect, fill=255)
+    
+    # حالا حاشیه قرمز را می‌سازیم (فقط یک کادر قرمز کامل)
+    full_red_border = Image.new('RGBA', img.size, (0,0,0,0))
+    frb_draw = ImageDraw.Draw(full_red_border)
+    
+    # رسم کادر قرمز کامل
+    frb_draw.rounded_rectangle([bx1_b, by1_b, bx2_b, by2_b], radius=radius+2, fill=border_color)
+    
+    # وسط کادر قرمز را پاک می‌کنیم تا فقط "Stroke" بماند (تا روی متن نیاید)
+    # یک مستطیل پاک‌کننده وسطش می‌کشیم
+    # از روش Composite استفاده می‌کنیم
+    
+    # لایه نهایی قرمز که وسطش خالی است
+    stroked_red = Image.new('RGBA', img.size, (0,0,0,0))
+    sr_draw = ImageDraw.Draw(stroked_red)
+    
+    # رسم مستطیل توپر قرمز
+    sr_draw.rounded_rectangle([bx1_b, by1_b, bx2_b, by2_b], radius=radius+2, fill=border_color)
+    
+    # ساختن حفره وسط (جایی که باکس سفید هست)
+    # این کار را با paste کردن لایه سفید انجام نمی‌دهیم چون ممکن است لبه‌ها تمیز نشوند.
+    # اما چون ما باکس سفید را قبلاً روی `img` اصلی کشیدیم،
+    # کافیست کادر قرمز را "پشت" باکس سفید نکشیم، بلکه دورش بکشیم.
+    # اما ساده‌ترین راه: کادر قرمز را با ماسک Progress روی img پیست می‌کنیم،
+    # و چون کادر قرمز بزرگتر از سفید است و زیرش کشیده می‌شود... صبر کنید.
+    # ترتیب لایه‌ها:
+    # 1. ویژوالایزر (کشیده شد)
+    # 2. نوار قرمز (باید زیر سفید باشد؟ یا دور سفید؟)
+    # طبق CSS کاربر: `border: 5px solid`. بردر روی باکس می‌افتد یا بیرون؟
+    # معمولاً border روی باکس است. اما ما اینجا stroke بیرون زدیم.
+    # بیایید قرمز را بکشیم، سپس دوباره باکس سفید را روی آن بکشیم تا وسط قرمز پاک شود؟
+    # نه، باکس سفید ترن��پیرنت نیست.
+    
+    # راه حل نهایی تمیز:
+    # 1. ایمیج `final_red_stroke` را می‌سازیم که یک کادر قرمز توخالی است.
+    # 2. این ایمیج را با ماسک (چپ/راست) روی تصویر اصلی `img` می‌چسبانیم.
+    
+    # ساخت کادر قرمز توخالی:
+    stroke_layer = Image.new('RGBA', img.size, (0,0,0,0))
+    sl_draw = ImageDraw.Draw(stroke_layer)
+    # مستطیل بزرگ قرمز
+    sl_draw.rounded_rectangle([bx1_b, by1_b, bx2_b, by2_b], radius=radius+2, fill=border_color)
+    # پاک کردن وسطش (با استفاده از مود Clear یا رسم مستطیل شفاف - که در RGBA مستطیل شفاف رنگ قبلی را پاک نمی‌کند)
+    # ترفند: ما فقط کادر قرمز را با ماسک روی تصویر نهایی می‌اندازیم.
+    # اما چون تصویر نهایی الان باکس سفید دارد، اگر کادر قرمز را رویش بیندازیم، روی باکس سفید را می‌گیرد.
+    # پس باید وسط کادر قرمز را حذف کنیم.
+    
+    # ماسک برش وسط (Hole Mask)
+    hole_mask = Image.new('L', img.size, 255) # سفید (نگه داشتن)
+    hm_draw = ImageDraw.Draw(hole_mask)
+    # ناحیه باکس سفید را سیاه می‌کنیم (حذف کردن)
+    hm_draw.rounded_rectangle([box_x1, box_y1, box_x2, box_y2], radius=radius, fill=0)
+    
+    # ترکیب ماسک سوراخ و ماسک پیشرفت
+    # ماسک نهایی = (Progress Mask) AND (Hole Mask)
+    # یعنی جایی که هم "باید پر باشد" و هم "وسط نیست".
+    
+    final_mask = Image.new('L', img.size, 0)
+    # پیکسل به پیکسل کند است. از `ImageChops` استفاده کنیم یا منطق ساده‌تر.
+    # چون وسطش با باکس سفید پوشانده شده (که قبلا کشیدیم)، 
+    # اگر لایه قرمز را "پشت" باکس سفید می‌کشیدیم راحت بود.
+    # اما باکس سفید کشیده شده.
+    
+    # بیایید استراتژی را عوض کنیم برای سادگی و سرعت:
+    # 1. ویژوالایزر (انجام شد)
+    # 2. کادر قرمز توپر (با ماسک پیشرفت برش خورده) را روی صفحه می‌کشیم.
+    # 3. باکس سفید را *مجدداً* روی آن می‌کشیم (این باعث می‌شود وسط قرمز پوشانده شود و فقط حاشیه بماند).
+    # 4. متن را *مجدداً* می‌کشیم.
+    
+    # اجرای استراتژی جدید (بازنویسی روی تصویر):
+    
+    # الف) رسم کادر قرمز (توپر) با ماسک پیشرفت
+    full_red_rect = Image.new('RGBA', img.size, (0,0,0,0))
+    fr_draw = ImageDraw.Draw(full_red_rect)
+    fr_draw.rounded_rectangle([bx1_b, by1_b, bx2_b, by2_b], radius=radius+2, fill=border_color)
+    
+    img.paste(full_red_rect, (0,0), mask) # ماسک پیشرفت که قبلا ساختیم
+    
+    # ب) رسم مجدد باکس سفید (برای پوشاندن وسط قرمز و ایجاد افکت بردر)
+    draw.rounded_rectangle([box_x1, box_y1, box_x2, box_y2], radius=radius, fill=box_bg_color)
+    
+    # ج) رسم مجدد متن (چون زیر باکس سفید رفت)
+    # دقیقا از همان محاسبات تک‌خطی و فونت جدید که در مرحله 3 انجام دادیم استفاده می‌کنیم
+    # انیمیشن ورود نرم (Slide Up)
+    anim_p = getattr(style_config, 'entry_anim_progress', 1.0)
+    ease_p = 1 - (1 - anim_p) * (1 - anim_p) # Ease-out
+    y_offset = (1 - ease_p) * 30 
+    
+    text_y = (box_y1 + (box_height - line_height_px) / 2) + y_offset
+    if is_rtl:
+        cursor_x = center_x + (final_text_w / 2)
+    else:
+        cursor_x = center_x - (final_text_w / 2)
+    
+    # تعریف شمارنده برای شمارش کلمات در حلقه (بسیار مهم)
+    word_idx_counter = 0
+    
+    for word in all_words:
+        try: w_len = draw.textlength(word, font=effective_font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        except: w_len = effective_font.getlength(word)
+        
+        # مقدار پیش‌فرض کلمه و موقعیت ترسیم
+        display_word = word
+        word_x = (cursor_x - w_len) if is_rtl else cursor_x
+        should_draw = True
+        
+        # رنگ پیش‌فرض همان رنگ کلی استایل است
+        current_word_fill = text_color
+
+        # --- منطق تایپ شدن حروف (نوع نمایش تایپی) ---
+        is_typewriter = getattr(style_config, 'typewriter', False)
+        if is_typewriter and word_infos and word_idx_counter < len(word_infos):
+            w_info = word_infos[word_idx_counter]
+            current_t = getattr(style_config, 'current_render_time', 0.0)
+            if current_t < w_info.start:
+                should_draw = False
+            elif current_t >= w_info.start and current_t < w_info.end:
+                char_len = len(word)
+                progress = (current_t - w_info.start) / max(0.001, w_info.end - w_info.start)
+                visible_chars = min(char_len, int(progress * char_len) + 1)
+                display_word = word[:visible_chars]
+                try: sub_w = draw.textlength(display_word, font=effective_font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+                except: sub_w = effective_font.getlength(display_word)
+                word_x = (cursor_x - sub_w) if is_rtl else word_x
+        
+        # --- منطق کمرنگ کردن کلمات آینده (اصلاح شده با زمان دقیق برای جلوگیری از چشمک زدن) ---
+        is_future = False
+        curr_t = getattr(style_config, 'current_render_time', 0.0)
+        
+        # روش دقیق: مقایسه زمان فعلی با زمان شروع کلمه
+        if word_infos and word_idx_counter < len(word_infos):
+            if curr_t < word_infos[word_idx_counter].start:
+                is_future = True
+        # روش جایگزین (برای پیش‌نمایش): مقایسه ایندکس
+        elif active_idx != -1 and word_idx_counter > active_idx:
+            is_future = True
+
+        should_fade = getattr(style_config, 'fadeUnread', True)
+        should_fade_surr = getattr(style_config, 'fadeSurrounding', False)
+        
+        is_past = False
+        if word_infos and word_idx_counter < len(word_infos):
+            if curr_t >= word_infos[word_idx_counter].end:
+                is_past = True
+        elif active_idx != -1 and word_idx_counter < active_idx:
+            is_past = True
+
+        if (is_future and (should_fade or should_fade_surr)) or (is_past and should_fade_surr):
+            # رنگ متن و رنگ زمینه باکس را می‌گیریم
+            tr, tg, tb = text_color[0], text_color[1], text_color[2]
+            br, bg, bb = box_bg_color[0], box_bg_color[1], box_bg_color[2]
+            
+            # ترکیب رنگ متن با رنگ زمینه (۳۵ درصد متن + ۶۵ درصد زمینه)
+            # این کار باعث می‌شود متن کمرنگ به نظر برسد اما کاملاً توپر (Solid) باشد
+            nr = int(tr * 0.35 + br * 0.65)
+            ng = int(tg * 0.35 + bg * 0.65)
+            nb = int(tb * 0.35 + bb * 0.65)
+            current_word_fill = (nr, ng, nb, 255) # آلفا ۲۵۵ یعنی بدون هیچ شفافیتی
+
+        # بررسی می‌کنیم آیا کاربر رنگ خاصی برای این کلمه تنظیم کرده است؟ (اولویت با رنگ کاربر)
+        if word_infos and word_idx_counter < len(word_infos):
+            w_info = word_infos[word_idx_counter]
+            if hasattr(w_info, 'color') and w_info.color:
+                current_word_fill = color_parser(w_info.color, text_color)
+
+        if should_draw and display_word:
+            draw.text((word_x, text_y), display_word, font=effective_font, fill=current_word_fill, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        
+        cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+        word_idx_counter += 1

styles/preset_bold_pack.py

@@ -0,0 +1,95 @@
+from PIL import Image, ImageDraw, ImageFont
+import math
+
+# --- بسته استایل‌های آماده: پررنگ و ضربه‌ای ---
+config = {
+    "ids": ["bold_caps_impact", "sport_lower_third", "retro_vhs_glitch"],
+    "name": "بسته پررنگ و ضربه‌ای",
+    "panels": ["color", "font", "size", "position", "radius", "padding"],
+    "default_font": "vazir"
+}
+
+SPORT_PALETTE = ["#FF3B30", "#007AFF", "#34C759", "#FF9500", "#AF52DE"]
+
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    style_name = style_config.name
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    direction = getattr(style_config, 'text_direction', 'rtl')
+    lang_code = getattr(style_config, 'lang_code', 'fa')
+
+    base_color = color_parser(style_config.primaryColor, (255, 255, 255, 255))
+    active_hex = style_config.styleActiveColors.get(style_name) if style_config.styleActiveColors else None
+    active_color = color_parser(active_hex, (255, 59, 48, 255)) if active_hex else color_parser("#FF3B30", (255, 59, 48, 255))
+    outline_color = color_parser(style_config.outlineColor, (0, 0, 0, 255))
+
+    line_height_px = int(style_config.fontSize * 1.6)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+    vertical_corr = int(style_config.fontSize * 0.1)
+    current_line_y = start_y_of_block - vertical_corr
+
+    space_w = draw.textlength(" ", font=font)
+    global_word_counter = 0
+    current_render_time = getattr(style_config, 'current_render_time', 0.0)
+
+    for metrics in line_metrics:
+        cursor_x = (width + metrics["width"]) / 2 + (style_config.x or 0) if is_rtl else (width - metrics["width"]) / 2 + (style_config.x or 0)
+        text_y_pos = current_line_y
+
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = (cursor_x - w_len) if is_rtl else cursor_x
+
+            is_active = False
+            should_draw = True
+            time_since_start = 0.0
+            if word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                is_active = current_render_time >= w_info.start and current_render_time < w_info.end
+                should_draw = current_render_time >= w_info.start
+                time_since_start = max(0.0, current_render_time - w_info.start)
+            elif active_idx != -1:
+                is_active = (global_word_counter == active_idx)
+                should_draw = (global_word_counter <= active_idx)
+
+            this_color = active_color if (is_active and getattr(style_config, 'useActiveColor', True)) else base_color
+            if word_infos and global_word_counter < len(word_infos):
+                w_obj = word_infos[global_word_counter]
+                if hasattr(w_obj, 'color') and w_obj.color:
+                    this_color = color_parser(w_obj.color, this_color)
+
+            if should_draw:
+                if style_name == 'bold_caps_impact':
+                    # افکت ضربه‌ای: کمی بزرگ‌تر و پرش کوتاه به بالا هنگام شروع کلمه فعال
+                    punch_progress = min(1.0, time_since_start / 0.15)
+                    punch_dy = -10 * (1 - punch_progress) if is_active else 0
+                    ox = int(max(2, style_config.fontSize * 0.04))
+                    for dx_o, dy_o in ((ox, 0), (-ox, 0), (0, ox), (0, -ox), (ox, ox), (-ox, -ox), (ox, -ox), (-ox, ox)):
+                        draw.text((word_x + dx_o, text_y_pos + punch_dy + dy_o), word, font=font, fill=outline_color, direction=direction, language=lang_code)
+                    draw.text((word_x, text_y_pos + punch_dy), word, font=font, fill=this_color, direction=direction, language=lang_code)
+
+                elif style_name == 'sport_lower_third':
+                    pad_x = int(style_config.fontSize * 0.25)
+                    pad_y = int(style_config.fontSize * 0.16)
+                    sx1, sy1 = word_x - pad_x, text_y_pos - pad_y
+                    sx2, sy2 = word_x + w_len + pad_x, text_y_pos + int(style_config.fontSize * 1.05) + pad_y
+                    block_color_hex = SPORT_PALETTE[global_word_counter % len(SPORT_PALETTE)]
+                    block_color = color_parser(block_color_hex, (255, 59, 48, 255))
+                    if not is_active:
+                        block_color = (30, 30, 34, 235)
+                    draw.rectangle([sx1, sy1, sx2, sy2], fill=block_color)
+                    text_col = (255, 255, 255, 255)
+                    draw.text((word_x, text_y_pos), word, font=font, fill=text_col, direction=direction, language=lang_code)
+
+                elif style_name == 'retro_vhs_glitch':
+                    glitch_amt = 4 if is_active else 2
+                    draw.text((word_x - glitch_amt, text_y_pos), word, font=font, fill=(255, 0, 60, 160), direction=direction, language=lang_code)
+                    draw.text((word_x + glitch_amt, text_y_pos), word, font=font, fill=(0, 220, 255, 160), direction=direction, language=lang_code)
+                    draw.text((word_x, text_y_pos), word, font=font, fill=this_color, direction=direction, language=lang_code)
+
+            cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+            global_word_counter += 1
+
+        current_line_y += line_height_px

styles/preset_elegant_pack.py

@@ -0,0 +1,117 @@
+from PIL import Image, ImageDraw, ImageFont
+import math
+
+# --- بسته استایل‌های آماده: ظریف و سینمایی ---
+config = {
+    "ids": ["elegant_thin_serif", "cinematic_letterbox", "typewriter_mono", "gradient_text"],
+    "name": "بسته ظریف و سینمایی",
+    "panels": ["color", "font", "size", "position", "radius", "padding"],
+    "default_font": "vazir"
+}
+
+GRADIENT_STOPS = [(0, 229, 255), (124, 77, 255), (255, 45, 149)]
+
+
+def _lerp_color(c1, c2, t):
+    return tuple(int(c1[i] + (c2[i] - c1[i]) * t) for i in range(3))
+
+
+def _gradient_color_at(t):
+    n = len(GRADIENT_STOPS) - 1
+    t = max(0.0, min(1.0, t))
+    seg = min(n - 1, int(t * n))
+    local_t = (t * n) - seg
+    return _lerp_color(GRADIENT_STOPS[seg], GRADIENT_STOPS[seg + 1], local_t)
+
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    style_name = style_config.name
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    direction = getattr(style_config, 'text_direction', 'rtl')
+    lang_code = getattr(style_config, 'lang_code', 'fa')
+
+    base_color = color_parser(style_config.primaryColor, (255, 255, 255, 255))
+    active_hex = style_config.styleActiveColors.get(style_name) if style_config.styleActiveColors else None
+    active_color = color_parser(active_hex, (255, 215, 130, 255)) if active_hex else color_parser("#FFD782", (255, 215, 130, 255))
+
+    line_height_px = int(style_config.fontSize * 1.6)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+    vertical_corr = int(style_config.fontSize * 0.1)
+    current_line_y = start_y_of_block - vertical_corr
+
+    space_w = draw.textlength(" ", font=font)
+    global_word_counter = 0
+    current_render_time = getattr(style_config, 'current_render_time', 0.0)
+
+    # --- نوار سیاه سینمایی پشت کل بلوک (letterbox) ---
+    if style_name == 'cinematic_letterbox' and len(lines) > 0:
+        max_line_width = max([m["width"] for m in line_metrics], default=0)
+        bar_pad_y = int(style_config.fontSize * 0.35)
+        by1 = start_y_of_block - bar_pad_y
+        by2 = start_y_of_block + total_block_height + bar_pad_y
+        draw.rectangle([0, by1, width, by2], fill=(0, 0, 0, 190))
+
+    for line_idx, metrics in enumerate(line_metrics):
+        cursor_x = (width + metrics["width"]) / 2 + (style_config.x or 0) if is_rtl else (width - metrics["width"]) / 2 + (style_config.x or 0)
+        text_y_pos = current_line_y
+        line_word_count = max(1, len(metrics["words"]))
+
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = (cursor_x - w_len) if is_rtl else cursor_x
+
+            is_active = False
+            should_draw = True
+            time_since_start = 0.0
+            if word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                is_active = current_render_time >= w_info.start and current_render_time < w_info.end
+                should_draw = current_render_time >= w_info.start
+                time_since_start = max(0.0, current_render_time - w_info.start)
+            elif active_idx != -1:
+                is_active = (global_word_counter == active_idx)
+                should_draw = (global_word_counter <= active_idx)
+
+            this_color = active_color if (is_active and getattr(style_config, 'useActiveColor', True)) else base_color
+            if word_infos and global_word_counter < len(word_infos):
+                w_obj = word_infos[global_word_counter]
+                if hasattr(w_obj, 'color') and w_obj.color:
+                    this_color = color_parser(w_obj.color, this_color)
+
+            fade_alpha = min(1.0, time_since_start / 0.35)
+            alpha = int(this_color[3] * fade_alpha) if word_infos else this_color[3]
+            draw_color = (this_color[0], this_color[1], this_color[2], alpha)
+
+            if should_draw and alpha > 2:
+                if style_name == 'elegant_thin_serif':
+                    draw.text((word_x, text_y_pos), word, font=font, fill=draw_color, direction=direction, language=lang_code)
+                    if is_active:
+                        uy = text_y_pos + int(style_config.fontSize * 1.02)
+                        draw.line([(word_x, uy), (word_x + w_len, uy)], fill=draw_color, width=max(1, int(style_config.fontSize * 0.025)))
+
+                elif style_name == 'cinematic_letterbox':
+                    draw.text((word_x, text_y_pos), word, font=font, fill=draw_color, direction=direction, language=lang_code)
+
+                elif style_name == 'typewriter_mono':
+                    pad_x = int(style_config.fontSize * 0.1)
+                    if is_active:
+                        cx1, cy1 = word_x - pad_x, text_y_pos - pad_x * 0.3
+                        cx2, cy2 = word_x + w_len + pad_x, text_y_pos + int(style_config.fontSize * 1.1)
+                        draw.rectangle([cx1, cy1, cx2, cy2], fill=(20, 255, 90, 60))
+                    mono_color = (20, 255, 90, alpha) if not is_active else (255, 255, 255, alpha)
+                    draw.text((word_x, text_y_pos), word, font=font, fill=mono_color, direction=direction, language=lang_code)
+
+                elif style_name == 'gradient_text':
+                    t = (w_i / max(1, line_word_count - 1)) if line_word_count > 1 else 0.5
+                    grad_rgb = _gradient_color_at(t)
+                    final_color = (grad_rgb[0], grad_rgb[1], grad_rgb[2], alpha)
+                    if is_active and getattr(style_config, 'useActiveColor', True):
+                        final_color = draw_color
+                    draw.text((word_x, text_y_pos), word, font=font, fill=final_color, direction=direction, language=lang_code)
+
+            cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+            global_word_counter += 1
+
+        current_line_y += line_height_px

styles/preset_glow_pack.py

@@ -0,0 +1,105 @@
+from PIL import Image, ImageDraw, ImageFont, ImageFilter
+import math
+
+# --- بسته استایل‌های آماده: نرم و درخشان ---
+config = {
+    "ids": ["soft_glow_pill", "comic_bubble", "handwritten_marker"],
+    "name": "بسته نرم و درخشان",
+    "panels": ["color", "font", "size", "position", "radius", "padding"],
+    "default_font": "vazir"
+}
+
+def _blur_glow(img, draw, word, font, draw_x, draw_y, w_len, font_size, color, radius, direction, lang_code):
+    pad = radius * 3 + 8
+    layer_w = int(w_len) + pad * 2
+    layer_h = int(font_size * 1.3) + pad * 2
+    if layer_w <= 0 or layer_h <= 0:
+        return
+    layer = Image.new('RGBA', (layer_w, layer_h), (0, 0, 0, 0))
+    ld = ImageDraw.Draw(layer)
+    ld.text((pad, pad), word, font=font, fill=color, direction=direction, language=lang_code)
+    blurred = layer.filter(ImageFilter.GaussianBlur(radius))
+    img.paste(blurred, (int(draw_x - pad), int(draw_y - pad)), blurred)
+
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    style_name = style_config.name
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    direction = getattr(style_config, 'text_direction', 'rtl')
+    lang_code = getattr(style_config, 'lang_code', 'fa')
+
+    base_color = color_parser(style_config.primaryColor, (255, 255, 255, 255))
+    active_hex = style_config.styleActiveColors.get(style_name) if style_config.styleActiveColors else None
+    active_color = color_parser(active_hex, (255, 255, 255, 255)) if active_hex else color_parser("#FFFFFF", (255, 255, 255, 255))
+    accent_hex = style_config.styleBgColors.get(style_name) if style_config.styleBgColors else None
+    accent_color = color_parser(accent_hex, (124, 77, 255, 255)) if accent_hex else color_parser("#7C4DFF", (124, 77, 255, 255))
+
+    line_height_px = int(style_config.fontSize * 1.6)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+    vertical_corr = int(style_config.fontSize * 0.1)
+    current_line_y = start_y_of_block - vertical_corr
+
+    space_w = draw.textlength(" ", font=font)
+    global_word_counter = 0
+    current_render_time = getattr(style_config, 'current_render_time', 0.0)
+
+    for metrics in line_metrics:
+        cursor_x = (width + metrics["width"]) / 2 + (style_config.x or 0) if is_rtl else (width - metrics["width"]) / 2 + (style_config.x or 0)
+        text_y_pos = current_line_y
+
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = (cursor_x - w_len) if is_rtl else cursor_x
+
+            is_active = False
+            should_draw = True
+            if word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                is_active = current_render_time >= w_info.start and current_render_time < w_info.end
+                should_draw = current_render_time >= w_info.start if getattr(style_config, 'fadeUnread', True) else True
+            elif active_idx != -1:
+                is_active = (global_word_counter == active_idx)
+
+            this_color = active_color if (is_active and getattr(style_config, 'useActiveColor', True)) else base_color
+            if word_infos and global_word_counter < len(word_infos):
+                w_obj = word_infos[global_word_counter]
+                if hasattr(w_obj, 'color') and w_obj.color:
+                    this_color = color_parser(w_obj.color, this_color)
+
+            if should_draw:
+                dy = 0
+                if style_name == 'soft_glow_pill':
+                    pad_x = int(style_config.fontSize * 0.35)
+                    pad_y = int(style_config.fontSize * 0.2)
+                    sx1, sy1 = word_x - pad_x, text_y_pos - pad_y
+                    sx2, sy2 = word_x + w_len + pad_x, text_y_pos + int(style_config.fontSize * 1.05) + pad_y
+                    fill_col = accent_color if is_active else (accent_color[0], accent_color[1], accent_color[2], 70)
+                    draw.rounded_rectangle([sx1, sy1, sx2, sy2], radius=(sy2 - sy1) / 2, fill=fill_col)
+                    if is_active:
+                        _blur_glow(img, draw, word, font, word_x, text_y_pos, w_len, style_config.fontSize, (*accent_color[:3], 180), 5, direction, lang_code)
+
+                elif style_name == 'comic_bubble':
+                    pad_x = int(style_config.fontSize * 0.3)
+                    pad_y = int(style_config.fontSize * 0.2)
+                    sx1, sy1 = word_x - pad_x, text_y_pos - pad_y
+                    sx2, sy2 = word_x + w_len + pad_x, text_y_pos + int(style_config.fontSize * 1.05) + pad_y
+                    fill_col = accent_color if is_active else (255, 255, 255, 235)
+                    draw.rounded_rectangle([sx1 + 4, sy1 + 4, sx2 + 4, sy2 + 4], radius=14, fill=(0, 0, 0, 90))
+                    draw.rounded_rectangle([sx1, sy1, sx2, sy2], radius=14, fill=fill_col, outline=(0, 0, 0, 255), width=4)
+                    this_color = (255, 255, 255, 255) if is_active else (20, 20, 20, 255)
+
+                elif style_name == 'handwritten_marker':
+                    pad_x = int(style_config.fontSize * 0.12)
+                    hy1 = text_y_pos + int(style_config.fontSize * 0.55)
+                    hy2 = text_y_pos + int(style_config.fontSize * 1.05)
+                    if is_active:
+                        draw.rectangle([word_x - pad_x, hy1, word_x + w_len + pad_x, hy2], fill=(*accent_color[:3], 160))
+
+                draw.text((word_x, text_y_pos + dy), word, font=font, fill=this_color, direction=direction, language=lang_code)
+
+            cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+            global_word_counter += 1
+
+        current_line_y += line_height_px

styles/red_outline_box.py

@@ -0,0 +1,161 @@
+from PIL import Image, ImageDraw, ImageFont
+
+config = {
+    "ids": ["red_outline_box"],
+    "name": "Red Outline Box",
+    "panels": ["color", "font", "size", "position", "radius", "padding"],
+    "default_font": "vazir"
+}
+
+frontend_template = "" # فرانت‌اند توسط جاوااسکریپت در فایل editor.js هندل می‌شود
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    # رنگ متن پایه (سفید)
+    custom_text = style_config.styleColors.get('red_outline_box', '#FFFFFF')
+    base_text_color = color_parser(custom_text, (255, 255, 255, 255))
+    
+    # رنگ کلمه فعال (سفید)
+    active_hex = style_config.styleActiveColors.get('red_outline_box', '#FFFFFF')
+    active_text_color = color_parser(active_hex, (255, 255, 255, 255))
+
+    # رنگ کادر (پیش فرض مثل کادر کلمات ریزان)
+    custom_bg_hex = style_config.styleBgColors.get('red_outline_box', '#F77D57')
+    box_color = color_parser(custom_bg_hex, (247, 125, 87, 255))
+    
+    # دریافت رنگ حاشیه اختصاصی (پیش فرض قرمز خالص)
+    custom_stroke_hex = style_config.styleBgColors.get('red_outline_box_stroke', '#ff0000')
+    stroke_color = color_parser(custom_stroke_hex, (255, 0, 0, 255))
+    # ضخامت حاشیه
+    stroke_w = max(2, int((style_config.fontSize / 12) * 0.9))
+
+    line_height_px = int(style_config.fontSize * 1.5)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+
+    # محاسبه دقیق عرض کادر کلی متن با در نظر گرفتن فاصله‌ها
+    space_w = draw.textlength(" ", font=font)
+    max_line_width = 0
+    for m in line_metrics:
+        actual_w = sum(m["word_widths"]) + max(0, len(m["words"]) - 1) * space_w
+        if actual_w > max_line_width: max_line_width = actual_w
+
+    box_center_x = width / 2 + (style_config.x or 0)
+    
+    # بازگرداندن طول کادر به حالت قبلی (با احتساب فضای مرورگر و حاشیه متن قرمز)
+    box_width = max_line_width + (style_config.paddingX * 2) + 20 + (stroke_w * 2)
+    
+    ratio = height / width
+    if ratio > 1.6: box_center_y_adjustment = 12 
+    elif ratio > 1.1: box_center_y_adjustment = 8 
+    else: box_center_y_adjustment = 5
+
+    visual_top_correction = int(style_config.fontSize * 0.12)
+    box_x1 = box_center_x - (box_width / 2)
+    box_x2 = box_center_x + (box_width / 2)
+    
+    # نقطه مبنای رسم کادر (برای حفظ جایگاه دقیق متن)
+    base_y1 = start_y_of_block - style_config.paddingY + box_center_y_adjustment + visual_top_correction
+    
+    # تنظیم دقیق ارتفاع کادر (برش 15 درصدی بالا و پایین مشابه کلاسیک)
+    box_y1 = base_y1 + (style_config.paddingY * 0.15)
+    box_y2 = start_y_of_block + total_block_height + (style_config.paddingY * 0.85) + box_center_y_adjustment - (line_height_px * 0.3)
+    
+    if box_y2 <= box_y1:
+        box_y2 = box_y1 + 1
+    
+    # رسم کادر پس‌زمینه در صورت وجود متن
+    if len(lines) > 0:
+        draw.rounded_rectangle([box_x1, box_y1, box_x2, box_y2], radius=style_config.radius, fill=box_color)
+
+    # تنظیمات رسم حروف
+    text_start_y = base_y1 + (style_config.paddingY * 0.35)
+    vertical_corr = int(style_config.fontSize * 0.1)
+    current_line_y = text_start_y - vertical_corr
+    global_word_counter = 0
+    current_render_time = getattr(style_config, 'current_render_time', 0.0)
+
+    for line_idx, metrics in enumerate(line_metrics):
+        # محاسبه عرض دقیق و واقعی خط برای جلوگیری از هل داده شدن کلمه آخر به بیرون کادر
+        actual_line_width = sum(metrics["word_widths"]) + max(0, len(metrics["words"]) - 1) * space_w
+        if is_rtl:
+            start_x = (width + actual_line_width) / 2 + (style_config.x or 0)
+        else:
+            start_x = (width - actual_line_width) / 2 + (style_config.x or 0)
+        cursor_x = start_x
+        text_y_pos = current_line_y
+        
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = (cursor_x - w_len) if is_rtl else cursor_x
+            
+            # پیش‌فرض نمایش کلمه فعال است
+            should_draw = True
+            alpha_factor = 1.0
+            is_active = False
+
+            if word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                # تشخیص کلمه فعال در بازه زمانی رندر فریم فعلی
+                is_active = (current_render_time >= w_info.start and current_render_time < w_info.end)
+                
+                # اعمال نیمه‌شفافی (کمرنگ شدن کلمات غیرفعال بر اساس تنظیمات کاربر)
+                if current_render_time < w_info.start:
+                    # کلمات آینده
+                    if getattr(style_config, 'fadeUnread', False) or getattr(style_config, 'fadeSurrounding', False):
+                        alpha_factor = 0.35
+                elif current_render_time >= w_info.end:
+                    # کلمات گذشته
+                    if getattr(style_config, 'fadeSurrounding', False):
+                        alpha_factor = 0.35
+            elif active_idx != -1:
+                is_active = (global_word_counter == active_idx)
+
+            # استخراج کلمه مورد رسم (برای کنترل انیمیشن‌های احتمالی مانند ماشین تحریر)
+            display_word = word
+            draw_x = word_x
+            is_typewriter = getattr(style_config, 'typewriter', False)
+            if is_typewriter and word_infos and global_word_counter < len(word_infos):
+                w_info = word_infos[global_word_counter]
+                if current_render_time < w_info.start:
+                    should_draw = False
+                elif current_render_time >= w_info.start and current_render_time < w_info.end:
+                    char_len = len(word)
+                    progress = (current_render_time - w_info.start) / max(0.001, w_info.end - w_info.start)
+                    visible_chars = min(char_len, int(progress * char_len) + 1)
+                    display_word = word[:visible_chars]
+                    try: sub_w = draw.textlength(display_word, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+                    except: sub_w = font.getlength(display_word)
+                    draw_x = (cursor_x - sub_w) if is_rtl else draw_x
+
+            # رسم نهایی کلمه همراه با حاشیه قرمز رنگ
+            if should_draw and display_word:
+                this_color = active_text_color if (is_active and getattr(style_config, 'useActiveColor', True)) else base_text_color
+                
+                # بررسی رنگ‌های سفارشی اعمال شده روی تک کلمات از ابزار ادیتور
+                if word_infos and global_word_counter < len(word_infos):
+                    w_obj = word_infos[global_word_counter]
+                    if hasattr(w_obj, 'color') and w_obj.color:
+                        this_color = color_parser(w_obj.color, this_color)
+                        
+                # استخراج ضریب آلفای نهایی (ترکیب شفافیت رنگ با ضریب کمرنگ شدن)
+                total_alpha = (this_color[3] / 255.0) * alpha_factor
+                
+                # ترکیب دستی رنگ‌ها با پس‌زمینه کادر (رندر توپر) برای جلوگیری از باگ سوراخ شدن متن در کتابخانه Pillow
+                f_r = int((this_color[0] * total_alpha) + (box_color[0] * (1 - total_alpha)))
+                f_g = int((this_color[1] * total_alpha) + (box_color[1] * (1 - total_alpha)))
+                f_b = int((this_color[2] * total_alpha) + (box_color[2] * (1 - total_alpha)))
+                final_color = (f_r, f_g, f_b, 255)
+                
+                s_r = int((stroke_color[0] * total_alpha) + (box_color[0] * (1 - total_alpha)))
+                s_g = int((stroke_color[1] * total_alpha) + (box_color[1] * (1 - total_alpha)))
+                s_b = int((stroke_color[2] * total_alpha) + (box_color[2] * (1 - total_alpha)))
+                final_stroke = (s_r, s_g, s_b, 255)
+                
+                draw.text((draw_x, text_y_pos), display_word, font=font, fill=final_color, stroke_width=stroke_w, stroke_fill=final_stroke, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+
+            cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+            global_word_counter += 1
+        
+        current_line_y += line_height_px

styles/simple_bar.py

@@ -0,0 +1,215 @@
+from PIL import Image, ImageDraw, ImageFont
+
+config = {
+    "ids": ["simple_bar"],
+    "name": "Simple Bar",
+    "panels": ["font", "size", "position"], 
+    "default_font": "vazir"
+}
+
+# قالب HTML برای نمایش زنده در ادیتور (فرانت‌اند)
+frontend_template = """
+<div style="display: flex; flex-direction: column; align-items: center; position: relative; transform: translateY(-20px);">
+    <!-- نوار پیشرفت -->
+    <div style="
+        position: relative;
+        width: 13em; 
+        height: 6px;
+        margin-bottom: 0px;
+        direction: ltr;
+        flex-shrink: 0;
+    ">
+        <!-- خط سفید زیرین -->
+        <div style="
+            position: absolute; top: 0; left: 0; width: 100%; height: 5px;
+            background-color: #ffffff; border-radius: 10px; margin-top: 1.5px;
+        "></div>
+        <!-- نوار زرد پرشونده -->
+        <div style="
+            position: absolute; top: 0; left: 0; height: 10px;
+            background-color: #FDD835; border-radius: 10px;
+            box-shadow: 0 0 8px var(--progress-shadow, rgba(253, 216, 53, 0.6));
+            /* --- تغییرات اصلی اینجا هستند --- */
+            width: calc(100% - var(--progress, 100%)); /* اصلاح جهت حرکت از چپ به راست */
+            transition: width 0.25s linear; /* افزایش زمان برای حرکت روان‌تر */
+        "></div>
+    </div>
+
+    <!-- کادر متن -->
+    <div style="
+        position: absolute;
+        top: 100%;
+        margin-top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: rgba(0, 0, 0, 0.5);
+        color: #ffffff;
+        padding: 10px 30px;
+        border-radius: 15px;
+        text-align: center;
+        white-space: normal;
+        width: max-content;
+        white-space: normal;
+        font-family: inherit;
+        font-weight: normal;
+        line-height: 1.6;
+    ">{{WORD}}</div>
+</div>
+"""
+
+# منطق تولید ویدیو (بک‌اند)
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    # دریافت رنگ کادر اصلی از تنظیمات (کلید اختصاصی simple_bar_main_box)
+    bg_hex = style_config.styleBgColors.get('simple_bar_main_box', '#00000080')
+    box_color = color_parser(bg_hex, (0, 0, 0, 128))
+    
+    # دریافت رنگ متن از تنظیمات (تغییر جدید)
+    custom_hex = style_config.styleColors.get('simple_bar', '#ffffff')
+    text_color = color_parser(custom_hex, (255, 255, 255, 255))
+
+    track_color = (255, 255, 255, 255) # سفید کامل برای خط زیرین
+    # دریافت رنگ نوار پیشرفت (پیش‌فرض: زرد)
+    # ساخت کلید اختصاصی: simple_bar_progress
+    progress_key = f"{style_config.name}_progress"
+    bar_hex = style_config.styleBgColors.get(progress_key, '#FDD835')
+    bar_color = color_parser(bar_hex, (253, 216, 53, 255))
+    
+    # تنظیمات هندسی
+    padding_x = 30
+    padding_y = 10
+    radius = 15
+    bar_margin_bottom = 20
+    
+    # 1. آماده‌سازی متن (چند خطی)
+    line_height_px = int(style_config.fontSize * 1.5)
+    text_h = len(lines) * line_height_px
+    
+    # پیدا کردن عرض عریض‌ترین خط
+    text_w = 0
+    for line in lines:
+        line_str = " ".join(line)
+        try: w = draw.textlength(line_str, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        except: w = font.getlength(line_str)
+        if w > text_w: text_w = w
+    
+    # 2. محاسبه ابعاد کادر متن
+    box_w = text_w + (padding_x * 2)
+    box_h = text_h + (padding_y * 2)
+    
+    center_x = width / 2 + (style_config.x or 0)
+    # تغییر: نقطه شروع (بالای کادر) را ثابت می‌گیریم تا نوار زرد جابجا نشود
+    top_y = height - style_config.marginV
+    
+    box_x1 = center_x - (box_w / 2)
+    box_y1 = top_y
+    box_x2 = center_x + (box_w / 2)
+    box_y2 = top_y + box_h
+    
+    # 3. محاسبه درصد پیشرفت
+    # اصلاح باگ NoneType: بررسی می‌کنیم اگر None بود صفر در نظر بگیرد
+    current_t = style_config.current_render_time
+    if current_t is None:
+        current_t = 0.0
+        
+    total_dur = style_config.total_video_duration
+    if total_dur is None or total_dur == 0:
+        total_dur = 1.0
+
+    progress = 0.0
+    if total_dur > 0:
+        progress = max(0.0, min(1.0, current_t / total_dur))
+    
+    # 4. ابعاد نوار پیشرفت (ثابت نگه داشتن عرض نوار در کل پروژه)
+    # با این ضریب (13) عرض نوار بر اساس حداکثر ظرفیت 5 کلمه بزرگ تنظیم و ثابت می‌شود
+    bar_w_total = style_config.fontSize * 13 
+    bar_x_start = center_x - (bar_w_total / 2)
+    
+    # موقعیت عمودی نوار (بالای باکس متن)
+    # ارتفاع نوار 6 پیکسل است، ترَک 3 پیکسل. وسط‌چین عمودی نسبت به هم.
+    track_y_center = box_y1 - bar_margin_bottom - 3
+    
+    # 5. رسم خط سفید (Track)
+    track_h = 4
+    draw.rounded_rectangle(
+        [bar_x_start, track_y_center - (track_h/2), bar_x_start + bar_w_total, track_y_center + (track_h/2)],
+        radius=10, fill=track_color
+    )
+    
+    # 6. رسم نوار زرد (Progress)
+    bar_h = 10
+    filled_w = bar_w_total * progress
+    if filled_w > 0:
+        draw.rounded_rectangle(
+            [bar_x_start, track_y_center - (bar_h/2), bar_x_start + filled_w, track_y_center + (bar_h/2)],
+            radius=10, fill=bar_color
+        )
+        
+    # 7. رسم کادر سیاه شفاف
+    draw.rounded_rectangle([box_x1, box_y1, box_x2, box_y2], radius=radius, fill=box_color)
+    
+    # 8. رسم متن (حلقه روی خطوط)
+    # محاسبه نقطه شروع عمودی برای وسط‌چین کردن کل بلوک متن
+    current_text_y = box_y1 + (box_h - text_h) / 2
+    
+    # متغیرهای کمکی برای رسم کلمه به کلمه
+    word_idx_counter = 0
+    space_w = draw.textlength(" ", font=font)
+
+    for line in lines:
+        # محاسبه عرض کل خط برای وسط‌چین کردن
+        line_str = " ".join(line)
+        try: lw = draw.textlength(line_str, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        except: lw = font.getlength(line_str)
+        
+        # نقطه شروع رسم (وسط‌چین) بر اساس جهت زبان
+        cursor_x = (center_x + (lw / 2)) if is_rtl else (center_x - (lw / 2))
+        
+        for word in line:
+            try: w_len = draw.textlength(word, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+            except: w_len = font.getlength(word)
+            
+            # 1. تنظیم رنگ پیش‌فرض
+            current_word_fill = text_color
+
+            # 2. اعمال رنگ کلمه فعال (Active Word)
+            if getattr(style_config, 'useActiveColor', True) and active_idx != -1 and word_idx_counter == active_idx:
+                active_hex = style_config.styleActiveColors.get('simple_bar', '#ffffff')
+                current_word_fill = color_parser(active_hex, text_color)
+
+            # 3. بررسی رنگ اختصاصی کاربر (اولویت بالاتر)
+            if word_infos and word_idx_counter < len(word_infos):
+                w_info = word_infos[word_idx_counter]
+                if hasattr(w_info, 'color') and w_info.color:
+                    current_word_fill = color_parser(w_info.color, text_color)
+            
+            # منطق تایپ حرف به حرف برای بک‌اند
+            display_word = word
+            draw_x = (cursor_x - w_len) if is_rtl else cursor_x
+            should_draw = True
+            
+            is_typewriter = getattr(style_config, 'typewriter', False)
+            if is_typewriter and word_infos and word_idx_counter < len(word_infos):
+                w_info = word_infos[word_idx_counter]
+                current_t = getattr(style_config, 'current_render_time', 0.0)
+                if current_t < w_info.start:
+                    should_draw = False
+                elif current_t >= w_info.start and current_t < w_info.end:
+                    char_len = len(word)
+                    progress = (current_t - w_info.start) / max(0.001, w_info.end - w_info.start)
+                    visible_chars = min(char_len, int(progress * char_len) + 1)
+                    display_word = word[:visible_chars]
+                    # محاسبه عرض حروف تایپ شده برای چسبیدن به راست
+                    try: sub_w = draw.textlength(display_word, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+                    except: sub_w = font.getlength(display_word)
+                    draw_x = (cursor_x - sub_w) if is_rtl else draw_x
+
+            # رسم کلمه
+            if should_draw and display_word:
+                draw.text((draw_x, current_text_y), display_word, font=font, fill=current_word_fill, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+            
+            # حرکت به کلمه بعدی (بر اساس جهت زبان)
+            cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+            word_idx_counter += 1
+            
+        current_text_y += line_height_px

styles/spring_popup.py

@@ -0,0 +1,168 @@
+from PIL import Image, ImageDraw, ImageFont
+
+config = {
+    "ids": ["spring_popup"],
+    "name": "Spring Popup",
+    "panels": ["color", "font", "size", "position"],
+    "default_font": "vazir"
+}
+
+frontend_template = "" # با JS هندل می‌شود
+
+def draw_frame(draw, img, width, height, style_config, lines, line_metrics, active_idx, font, color_parser, word_infos=None):
+    is_rtl = getattr(style_config, 'text_direction', 'rtl') != 'ltr'
+    # رنگ متن خاموش (پیش‌فرض سفید)
+    custom_base = style_config.styleColors.get('spring_popup', '#ffffff')
+    base_color = color_parser(custom_base, (255, 255, 255, 255))
+    
+    # رنگ کلمه فعال (پیش‌فرض سفید)
+    active_hex = style_config.styleActiveColors.get('spring_popup', '#ffffff')
+    active_color = color_parser(active_hex, (255, 255, 255, 255))
+
+    line_height_px = int(style_config.fontSize * 1.5)
+    total_block_height = len(lines) * line_height_px
+    bottom_reference = height - style_config.marginV
+    start_y_of_block = bottom_reference - total_block_height
+    
+    # فاصله طبیعی کلمات دقیقاً مشابه استایل سفید مینیمال
+    try:
+        space_w = draw.textlength(" ", font=font)
+    except:
+        space_w = font.getlength(" ")
+    # افزایش ۱۰ درصدی فاصله کلمات در خروجی
+    space_w = int(space_w * 1.8)
+        
+    # تراز عمودی دقیقاً مشابه سفید مینیمال
+    ratio = height / width
+    if ratio > 1.6: box_center_y_adjustment = 5
+    elif ratio > 1.1: box_center_y_adjustment = 10
+    else: box_center_y_adjustment = 15
+    
+    visual_top_correction = int(style_config.fontSize * 0.12)
+    box_y1 = start_y_of_block - (style_config.paddingY or 10) + box_center_y_adjustment + visual_top_correction
+    text_start_y = box_y1 + ((style_config.paddingY or 10) * 0.35)
+    vertical_corr = int(style_config.fontSize * 0.1)
+    current_line_y = text_start_y - vertical_corr
+
+    current_render_time = getattr(style_config, 'current_render_time', 0.0)
+    is_act_on = getattr(style_config, 'useActiveColor', True)
+
+    global_word_counter = 0
+    active_word_data = None
+
+    # رسم کلمات غیرفعال بر روی تصویر اصلی با تراز کاملاً یکدست
+    for line_idx, metrics in enumerate(line_metrics):
+        cursor_x = (width + metrics["width"]) / 2 + (style_config.x or 0) if is_rtl else (width - metrics["width"]) / 2 + (style_config.x or 0)
+        
+        for w_i, word in enumerate(metrics["words"]):
+            w_len = metrics["word_widths"][w_i]
+            word_x = (cursor_x - w_len) if is_rtl else cursor_x
+            
+            w_info = word_infos[global_word_counter] if (word_infos and global_word_counter < len(word_infos)) else None
+            
+            is_active = False
+            scale = 1.0 
+            alpha = 255 
+            
+            if w_info:
+                if current_render_time >= w_info.start and current_render_time < w_info.end:
+                    is_active = True
+                    time_passed = current_render_time - w_info.start
+                    anim_dur = 0.32  # افزایش جزئی زمان برای نرم‌تر شدن و هماهنگی با فریم‌های دوبرابر شده
+                    if time_passed < anim_dur:
+                        t = time_passed / anim_dur
+                        c1 = 1.15  # کاهش شتاب پرش برای ایجاد یک لرزش فنری بسیار ملایم و روان
+                        c3 = c1 + 1
+                        progress = 1 + c3 * ((t - 1) ** 3) + c1 * ((t - 1) ** 2)
+                        scale = 1.0 + (progress * 0.2) 
+                    else:
+                        scale = 1.2
+                else:
+                    if current_render_time < w_info.start:
+                        if getattr(style_config, 'fadeUnread', False) or getattr(style_config, 'fadeSurrounding', False):
+                            alpha = int(255 * 0.35)
+                    elif current_render_time >= w_info.end:
+                        if getattr(style_config, 'fadeSurrounding', False):
+                            alpha = int(255 * 0.35)
+            elif active_idx != -1:
+                if global_word_counter == active_idx:
+                    is_active = True
+                    scale = 1.2
+
+            fill_color = active_color if (is_active and is_act_on) else base_color
+            if w_info and hasattr(w_info, 'color') and w_info.color:
+                fill_color = color_parser(w_info.color, fill_color)
+
+            final_color = (fill_color[0], fill_color[1], fill_color[2], int(fill_color[3] * (alpha / 255.0)))
+
+            if final_color[3] > 0:
+                if not is_active:
+                    # رسم کلمات خاموش بر روی خط تراز بدون تغییر
+                    draw.text((word_x, current_line_y), word, font=font, fill=final_color, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+                else:
+                    # ذخیره کلمه فعال جهت اعمال افکت پاپ‌آپ هم‌تراز
+                    active_word_data = {
+                        "text": word, "x": word_x, "y": current_line_y,
+                        "color": final_color, "scale": scale
+                    }
+            
+            cursor_x += (-(w_len + space_w) if is_rtl else (w_len + space_w))
+            global_word_counter += 1
+            
+        current_line_y += line_height_px
+
+    # رسم کلمه فعال (بزرگ‌شده) با تراز فیزیکی پایین کلمه و اعمال فاصله شناور به سمت بالا
+    if active_word_data:
+        scale = active_word_data["scale"]
+        text = active_word_data["text"]
+        x = active_word_data["x"]
+        y = active_word_data["y"]
+        color = active_word_data["color"]
+
+        try:
+            tw = draw.textlength(text, font=font, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        except:
+            tw = font.getlength(text)
+            
+        th = int(style_config.fontSize * 2)
+        pad = 30 
+        
+        temp_img = Image.new('RGBA', (int(tw) + pad*2, th + pad*2), (0,0,0,0))
+        temp_draw = ImageDraw.Draw(temp_img)
+        
+        temp_draw.text((pad, pad), text, font=font, fill=color, direction=getattr(style_config, 'text_direction', 'rtl'), language=getattr(style_config, 'lang_code', 'fa'))
+        
+        # پیدا کردن فیزیکی کادر دور پیکسل‌های رسم شده (حل مشکل عدم پایداری تراز فونت‌های فارسی)
+        t_bbox = temp_img.getbbox()
+        if t_bbox:
+            t_left, t_top, t_right, t_bottom = t_bbox
+            v_w = t_right - t_left
+            v_h = t_bottom - t_top
+            
+            v_cx = t_left + (v_w / 2.0)
+            v_bottom = t_bottom
+            
+            new_w = max(1, int(temp_img.width * scale))
+            new_h = max(1, int(temp_img.height * scale))
+            
+            try: resample = Image.Resampling.LANCZOS
+            except: resample = Image.LANCZOS
+                
+            scaled_img = temp_img.resize((new_w, new_h), resample)
+            
+            # تراز کردن و گره زدن نقطه وسطِ لبه پایینی تصویر بزرگ‌شده به بقیه خط
+            target_center_x = v_cx + (x - pad)
+            target_bottom_y = v_bottom + (y - pad)
+            
+            scaled_cx = v_cx * scale
+            scaled_bottom = v_bottom * scale
+            
+            paste_x = int(target_center_x - scaled_cx)
+            
+            # اعمال یک فاصله عمودی به سمت بالا (افزایش ضریب از ۱۰٪ به ۲۰٪ برای ۱۰ درصد بالا رفتن بیشتر)
+            float_offset = int(style_config.fontSize * 0.2)
+            paste_y = int(target_bottom_y - scaled_bottom) - float_offset
+            
+            img.paste(scaled_img, (paste_x, paste_y), scaled_img)
+        else:
+            img.paste(temp_img, (int(x - pad), int(y - pad)), temp_img)