<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فوتوتیرساز وزارت ارتباطات v27.0 (نسخه نهایی)</title>
    <style>
        /* --- FONTS --- */
        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&family=Lalezar&family=Noto+Naskh+Arabic:wght@400;700&family=Rubik:wght@400;700&display=swap');
        
        @font-face { font-family: 'Arkan'; src: url('data:font/woff2;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx') format('woff2'); font-weight: normal; font-style: normal; }
        @font-face { font-family: 'Arkan'; src: url('data:font/woff2;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx') format('woff2'); font-weight: bold; font-style: normal; }

        /* --- VARIABLES --- */
        :root {
            --bg-app: #121212;
            --bg-panel: #1e1e1e;
            --bg-control: #2c2c2c;
            --bg-input: #383838;
            --text-main: #e0e0e0;
            --text-muted: #a0a0a0;
            --accent: #8b5cf6;
            --accent-hover: #7c3aed;
            --border: #404040;
            --danger: #ef4444;
            --danger-bg: rgba(239, 68, 68, 0.1);
        }

        /* --- RESET & BASE --- */
        * { box-sizing: border-box; }
        body {
            font-family: 'Vazirmatn', Tahoma, sans-serif;
            background-color: var(--bg-app);
            color: var(--text-main);
            margin: 0;
            padding: 1rem;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        button, input, select, textarea { font-family: inherit; }
        input[type="file"] { display: none !important; }

        /* --- UTILS --- */
        .hidden { display: none !important; }
        .flex { display: flex; }
        .items-center { align-items: center; }
        .justify-center { justify-content: center; }
        .gap-2 { gap: 0.5rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-6 { margin-top: 1.5rem; }
        .w-full { width: 100%; }
        .text-center { text-align: center; }
        
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
        .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }

        /* --- LAYOUT --- */
        .layout-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
            flex-grow: 1;
        }

        @media (min-width: 768px) {
            .layout-container {
                grid-template-columns: 5fr 7fr;
                align-items: start;
            }
            .settings-panel-wrapper, .preview-panel-wrapper {
                position: sticky;
                top: 1rem;
                height: calc(100vh - 2rem);
            }
            .settings-card { height: 100% !important; }
            .preview-area { height: 100% !important; min-height: 600px !important; }
            .fab-preview { display: none !important; }
        }

        @media (min-width: 1024px) {
            .layout-container { grid-template-columns: 4fr 8fr; }
        }

        /* --- COMPONENTS --- */
        .card {
            background-color: var(--bg-panel);
            border-radius: 0.75rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            border: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .settings-card { height: auto; min-height: 600px; }

        .header-panel {
            background: linear-gradient(to right, #2c2c2c, #1e1e1e);
            padding: 1rem;
            text-align: center;
            border-bottom: 1px solid var(--border);
            border-radius: 0.75rem 0.75rem 0 0;
            flex-shrink: 0;
        }
        .header-title { font-weight: 700; color: #fff; font-size: 1.1rem; margin: 0; }
        .header-subtitle { font-size: 0.75rem; color: var(--accent); margin: 2px 0 0 0; font-weight: 500; }

        .tab-header {
            display: flex;
            background: var(--bg-control);
            border-bottom: 1px solid var(--border);
            overflow-x: auto;
            padding: 0.25rem 0.5rem;
            gap: 1px;
            flex-shrink: 0;
        }
        .custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scroll::-webkit-scrollbar-track { background: var(--bg-panel); }
        .custom-scroll::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
        .custom-scroll::-webkit-scrollbar-thumb:hover { background: #555; }

        .tab-btn {
            flex: 1;
            padding: 0.6rem 0.5rem;
            text-align: center;
            font-weight: 500;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.85rem;
            border-radius: 0.25rem;
            white-space: nowrap;
            background: transparent;
            border: none;
        }
        .tab-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
        .tab-btn.active { color: #fff; background: var(--bg-input); border-bottom: 2px solid var(--accent); }

        .tab-content-wrapper { flex-grow: 1; overflow-y: auto; padding: 1rem; }
        .tab-content { display: none; animation: fadeIn 0.2s ease-out; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        .control-group { background: var(--bg-control); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; }
        .control-title { font-weight: 600; color: #fff; margin-bottom: 0.75rem; display: flex; align-items: center; font-size: 0.9rem; gap: 0.5rem; }
        .bullet-point { width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; display: inline-block; }
        .form-label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.25rem; }
        
        input[type="text"], input[type="number"], textarea, select {
            width: 100%; background: var(--bg-input); border: 1px solid var(--border); 
            border-radius: 0.25rem; padding: 0.5rem; color: #fff; font-size: 0.85rem;
            transition: border-color 0.2s;
        }
        input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; }

        .custom-file-upload {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: #333; border: 2px dashed #555; border-radius: 0.5rem; padding: 1.5rem;
            cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;
        }
        .custom-file-upload:hover { background: #3a3a3a; border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
        .custom-file-upload svg { width: 32px; height: 32px; color: var(--text-muted); margin-bottom: 0.5rem; transition: color 0.3s; }
        .custom-file-upload:hover svg { color: var(--accent); }
        .custom-file-upload span { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); transition: color 0.3s; }
        .custom-file-upload:hover span { color: #fff; }

        input[type="color"] { width: 100%; height: 35px; border: none; padding: 0; background: none; cursor: pointer; border-radius: 0.25rem; }

        .range-wrap { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
        input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; background: #444; border-radius: 2px; cursor: pointer; flex: 1; }
        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; border: 2px solid #fff; transition: transform 0.1s; }
        input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
        .range-val { font-family: monospace; font-size: 0.75rem; color: var(--accent); background: rgba(139, 92, 246, 0.1); padding: 2px 4px; border-radius: 3px; min-width: 40px; text-align: center; }

        .aspect-btn-group, .align-btn-group { display: flex; gap: 0.25rem; margin-bottom: 1rem; width: 100%; }
        .align-btn-group { background: var(--bg-input); padding: 2px; border-radius: 0.25rem; margin-top: 0.5rem; }
        .aspect-btn, .align-btn { flex: 1; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-weight: 500; font-size: 0.8rem; color: var(--text-muted); background: var(--bg-input); cursor: pointer; transition: all 0.2s; }
        .align-btn { border: none; padding: 4px; border-radius: 0.2rem; }
        .aspect-btn:hover, .align-btn:hover { color: #fff; background: #444; }
        .aspect-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
        .align-btn.active { background: #555; color: #fff; }

        .btn-primary, .btn-secondary, .btn-danger { width: 100%; padding: 0.75rem; font-size: 0.9rem; border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; }
        .btn-primary { background: var(--accent); color: white; font-weight: 600; box-shadow: 0 4px 10px rgba(139, 92, 246, 0.2); }
        .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
        .btn-secondary { background: var(--bg-input); color: var(--text-main); font-weight: 500; border: 1px solid var(--border); }
        .btn-secondary:hover { background: #444; border-color: #555; }
        .btn-danger { background: var(--danger-bg); color: var(--danger); font-weight: 500; border: 1px solid rgba(239, 68, 68, 0.2); }
        .btn-danger:hover { background: rgba(239, 68, 68, 0.2); }

        .checkbox-box { display: flex; items-center; gap: 0.5rem; background: #374151; padding: 0.75rem; border-radius: 0.25rem; border: 1px solid #4b5563; margin-bottom: 1rem; }
        .checkbox-label { font-size: 0.75rem; font-weight: 700; color: #d1d5db; cursor: pointer; }
        .checkbox-desc { font-size: 0.65rem; color: #9ca3af; margin-top: 0.25rem; margin-right: 1.5rem; }

        .preview-area { border: 1px solid var(--border); background-color: #000; min-height: 400px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; }
        #canvas { max-width: 100%; max-height: 85vh; height: auto; box-shadow: 0 0 20px rgba(0,0,0,0.8); }

        footer { text-align: center; color: #64748b; font-size: 0.75rem; padding: 2rem 0; margin-top: auto; }

        .fab-preview { position: fixed; bottom: 1.5rem; left: 1.5rem; width: 3.5rem; height: 3.5rem; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); z-index: 50; cursor: pointer; transition: transform 0.2s; }
        .fab-preview:active { transform: scale(0.95); }
        .mobile-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; }
        .mobile-modal.open { display: flex; }
        .modal-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,0.1); color: white; padding: 0.5rem 1rem; border-radius: 2rem; cursor: pointer; }
    </style>
</head>
<body>

<div class="layout-container">
    
    <!-- LEFT: Settings Panel -->
    <div class="settings-panel-wrapper">
        <div class="card settings-card">
            <div class="header-panel">
                <h1 class="header-title">فوتوتیرساز وزارت ارتباطات</h1>
                <p class="header-subtitle">نسخه ۲۷.۰ | بازنشانی صحیح</p>
            </div>

            <div class="tab-header custom-scroll">
                <button class="tab-btn active" onclick="switchTab('tab-images')">تصاویر</button>
                <button class="tab-btn" onclick="switchTab('tab-text')">متون</button>
                <button class="tab-btn" onclick="switchTab('tab-divider')">خط‌کش</button>
                <button class="tab-btn" onclick="switchTab('tab-border')">کادر</button>
                <button class="tab-btn" onclick="switchTab('tab-extra')">آیکون</button>
                <button class="tab-btn" onclick="switchTab('tab-settings')">خروجی</button>
            </div>

            <div class="tab-content-wrapper custom-scroll">
                
                <!-- Tab: Images -->
                <div id="tab-images" class="tab-content active">
                    <div class="control-group">
                        <div class="control-title"><span class="bullet-point"></span>تصویر پس‌زمینه</div>
                        <label class="custom-file-upload mb-4">
                            <svg class="upload-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                            <span id="mainImgLabel">انتخاب تصویر اصلی</span>
                            <input type="file" id="imageLoader" accept="image/*" />
                        </label>

                        <label class="form-label">ابعاد تصویر خروجی</label>
                        <div class="aspect-btn-group">
                            <button class="aspect-btn active" onclick="setAspect('original')">اورجینال</button>
                            <button class="aspect-btn" onclick="setAspect('square')">پست (۱:۱)</button>
                            <button class="aspect-btn" onclick="setAspect('story')">استوری (۹:۱۶)</button>
                        </div>

                        <div id="imgTransformControls" style="display:none;" class="mt-4" style="border-top: 1px dashed #444; padding-top: 1rem;">
                            <label class="form-label mb-2" style="color:white;">تنظیم کادر تصویر</label>
                            <div class="range-wrap">
                                <span class="range-val" style="width:50px;">زوم</span>
                                <input type="range" id="imgScale" min="10" max="300" value="100">
                                <span class="range-val" id="imgScaleVal">100%</span>
                            </div>
                            <div class="range-wrap">
                                <span class="range-val" style="width:50px;">افقی</span>
                                <input type="range" id="imgPanX" min="-100" max="100" value="0">
                                <span class="range-val" id="imgPanXVal">0</span>
                            </div>
                            <div class="range-wrap">
                                <span class="range-val" style="width:50px;">عمودی</span>
                                <input type="range" id="imgPanY" min="-100" max="100" value="0">
                                <span class="range-val" id="imgPanYVal">0</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <div class="control-title"><span class="bullet-point"></span>لوگو سازمانی</div>
                        <label class="custom-file-upload mb-4">
                            <svg class="upload-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            <span id="logoImgLabel">انتخاب لوگو</span>
                            <input type="file" id="logoLoader" accept="image/*" />
                        </label>
                        <div class="range-wrap">
                            <span class="form-label" style="width:60px;">اندازه</span>
                            <input type="range" id="logoSize" min="5" max="40" value="12">
                            <span class="range-val" id="logoSizeVal">12%</span>
                        </div>
                        <div class="range-wrap">
                            <span class="form-label" style="width:60px;">حاشیه</span>
                            <input type="range" id="logoMargin" min="0" max="100" value="0">
                            <span class="range-val" id="logoMarginVal">0px</span>
                        </div>
                    </div>
                </div>

                <!-- Tab: Text -->
                <div id="tab-text" class="tab-content">
                    <div class="checkbox-box">
                        <input type="checkbox" id="syncAlign" style="width:16px; height:16px; cursor:pointer;" checked>
                        <label for="syncAlign" class="checkbox-label">هماهنگی تراز همه متن‌ها</label>
                    </div>

                    <!-- Rotitr -->
                    <div class="control-group">
                        <div class="control-title"><span class="bullet-point"></span>روتیتر</div>
                        <textarea id="rotitrText" class="form-textarea h-20 mb-3" rows="2" placeholder="متن روتیتر...">دور زدن ممنوع! اینجا روابط عمومی است</textarea>
                        
                        <div class="grid-2 mb-2">
                            <div>
                                <label class="form-label">فونت</label>
                                <select id="rotitrFont" class="form-select">
                                    <option value="Vazirmatn">وزیرمتن</option>
                                    <option value="Arkan">ارکان</option>
                                    <option value="Lalezar">لاله‌زار</option>
                                    <option value="Noto Naskh Arabic">نوتو نسخ</option>
                                    <option value="Rubik">روبیک</option>
                                </select>
                            </div>
                            <div>
                                <label class="form-label">سایز</label>
                                <div class="range-wrap">
                                    <input type="range" id="rotitrSize" min="10" max="150" value="45">
                                </div>
                            </div>
                        </div>

                        <div class="grid-2 mb-3">
                            <div>
                                <label class="form-label">رنگ اصلی</label>
                                <input type="color" id="rotitrColor" class="form-color" value="#ffffff">
                            </div>
                            <div>
                                <label class="form-label">رنگ هایلایت {}</label>
                                <input type="color" id="rotitrHighlightColor" class="form-color" value="#f59e0b">
                            </div>
                        </div>
                        
                        <div class="align-btn-group" id="align-group-rotitr">
                            <button class="align-btn" onclick="setAlign('rotitr', 'right')">راست</button>
                            <button class="align-btn active" onclick="setAlign('rotitr', 'center')">وسط</button>
                            <button class="align-btn" onclick="setAlign('rotitr', 'justify')">تراز</button>
                            <button class="align-btn" onclick="setAlign('rotitr', 'left')">چپ</button>
                        </div>
                    </div>

                    <!-- Title -->
                    <div class="control-group">
                        <div class="control-title"><span class="bullet-point"></span>تیتر اصلی</div>
                        <textarea id="titleText" class="form-textarea h-20 mb-3" rows="3" placeholder="تیتر اصلی..."></textarea>
                        
                        <div class="grid-2 mb-2">
                            <div>
                                <label class="form-label">فونت</label>
                                <select id="titleFont" class="form-select">
                                    <option value="Vazirmatn">وزیرمتن</option>
                                    <option value="Arkan">ارکان</option>
                                    <option value="Lalezar">لاله‌زار</option>
                                    <option value="Noto Naskh Arabic">نوتو نسخ</option>
                                    <option value="Rubik">روبیک</option>
                                </select>
                            </div>
                            <div>
                                <label class="form-label">سایز</label>
                                <div class="range-wrap">
                                    <input type="range" id="titleSize" min="10" max="150" value="35">
                                </div>
                            </div>
                        </div>

                        <div class="grid-2 mb-3">
                            <div>
                                <label class="form-label">رنگ اصلی</label>
                                <input type="color" id="titleColor" class="form-color" value="#e0e7ff">
                            </div>
                            <div>
                                <label class="form-label">رنگ هایلایت {}</label>
                                <input type="color" id="titleHighlightColor" class="form-color" value="#ef4444">
                            </div>
                        </div>
                        
                        <div class="align-btn-group" id="align-group-title">
                            <button class="align-btn" onclick="setAlign('title', 'right')">راست</button>
                            <button class="align-btn active" onclick="setAlign('title', 'center')">وسط</button>
                            <button class="align-btn" onclick="setAlign('title', 'justify')">تراز</button>
                            <button class="align-btn" onclick="setAlign('title', 'left')">چپ</button>
                        </div>
                    </div>

                    <!-- Body -->
                    <div class="control-group">
                        <div class="control-title"><span class="bullet-point"></span>متن بدنه</div>
                        <textarea id="bodyText" class="form-textarea h-32 mb-3" rows="4" placeholder="متن اصلی خبر...">این نسخه جدید دارای قابلیت‌های پیشرفته است. برای هایلایت کردن کلمات آنها را در {آکولاد} قرار دهید و برای **بولد کردن** از دو ستاره استفاده کنید.</textarea>
                        
                        <div class="grid-2 mb-2">
                            <div>
                                <label class="form-label">فونت</label>
                                <select id="bodyFont" class="form-select">
                                    <option value="Vazirmatn">وزیرمتن</option>
                                    <option value="Arkan">ارکان</option>
                                    <option value="Lalezar">لاله‌زار</option>
                                    <option value="Noto Naskh Arabic">نوتو نسخ</option>
                                    <option value="Rubik">روبیک</option>
                                </select>
                            </div>
                            <div>
                                <label class="form-label">سایز</label>
                                <div class="range-wrap">
                                    <input type="range" id="bodySize" min="10" max="150" value="30">
                                </div>
                            </div>
                        </div>

                        <div class="grid-2 mb-3">
                            <div>
                                <label class="form-label">رنگ اصلی</label>
                                <input type="color" id="bodyColor" class="form-color" value="#ffffff">
                            </div>
                            <div>
                                <label class="form-label">رنگ هایلایت {}</label>
                                <input type="color" id="bodyHighlightColor" class="form-color" value="#8b5cf6">
                            </div>
                        </div>
                        
                        <div class="range-wrap">
                            <span class="form-label" style="width:50px;">فاصله</span>
                            <input type="range" id="bodyLineHeight" min="100" max="250" value="160">
                            <span class="range-val" id="bodyLineHeightVal">1.6</span>
                        </div>
                        
                        <div class="align-btn-group" id="align-group-body">
                            <button class="align-btn" onclick="setAlign('body', 'right')">راست</button>
                            <button class="align-btn active" onclick="setAlign('body', 'center')">وسط</button>
                            <button class="align-btn" onclick="setAlign('body', 'justify')">تراز</button>
                            <button class="align-btn" onclick="setAlign('body', 'left')">چپ</button>
                        </div>
                    </div>
                </div>

                <!-- Tab: Divider -->
                <div id="tab-divider" class="tab-content">
                    
                    <!-- Horizontal Divider -->
                    <div class="control-group">
                        <div class="control-title">
                            <div class="flex items-center gap-2">
                                <input type="checkbox" id="dividerEnabled" style="width:16px;height:16px;" checked>
                                <span class="bullet-point"></span>
                                <span>خط جداکننده افقی</span>
                            </div>
                        </div>
                        
                        <div class="grid-3 mb-4">
                            <div class="text-center">
                                <label class="form-label">شروع</label>
                                <input type="color" id="divCol1" class="form-color" style="height:25px;" value="#000000">
                                <input type="range" id="divOp1" class="w-full mt-2" min="0" max="100" value="0">
                            </div>
                            <div class="text-center">
                                <label class="form-label">وسط</label>
                                <input type="color" id="divCol2" class="form-color" style="height:25px;" value="#7a0c00">
                                <input type="range" id="divOp2" class="w-full mt-2" min="0" max="100" value="100">
                            </div>
                            <div class="text-center">
                                <label class="form-label">پایان</label>
                                <input type="color" id="divCol3" class="form-color" style="height:25px;" value="#0d0d0d">
                                <input type="range" id="divOp3" class="w-full mt-2" min="0" max="100" value="0">
                            </div>
                        </div>

                        <div class="range-wrap mb-2">
                            <span class="range-val" style="width:60px;">ضخامت</span>
                            <input type="range" id="divThickness" min="1" max="20" value="13">
                            <span class="range-val" id="divThicknessVal">13px</span>
                        </div>
                        <div class="range-wrap mb-2">
                            <span class="range-val" style="width:60px;">عرض</span>
                            <input type="range" id="divWidth" min="10" max="100" value="56">
                            <span class="range-val" id="divWidthVal">56%</span>
                        </div>
                        <div class="range-wrap mb-2">
                            <span class="range-val" style="width:60px;">فاصله بالا</span>
                            <input type="range" id="divMarginTop" min="0" max="150" value="0">
                            <span class="range-val" id="divMarginTopVal">0px</span>
                        </div>
                        <div class="range-wrap">
                            <span class="range-val" style="width:60px;">فاصله پایین</span>
                            <input type="range" id="divMarginBottom" min="0" max="150" value="34">
                            <span class="range-val" id="divMarginBottomVal">34px</span>
                        </div>
                    </div>

                    <!-- Vertical Divider -->
                    <div class="control-group" style="background: #232323;">
                        <div class="control-title" style="color: #c4b5fd;">
                            <div class="flex items-center gap-2">
                                <input type="checkbox" id="vDividerEnabled" style="width:16px;height:16px;" checked>
                                <span class="bullet-point" style="background-color: #8b5cf6;"></span>
                                <span>خط جداکننده عمودی</span>
                            </div>
                        </div>

                        <div class="grid-3 mb-4">
                            <div class="text-center">
                                <label class="form-label">بالا</label>
                                <input type="color" id="vDivCol1" class="form-color" style="height:25px;" value="#000000">
                                <input type="range" id="vDivOp1" class="w-full mt-2" min="0" max="100" value="0">
                            </div>
                            <div class="text-center">
                                <label class="form-label">وسط</label>
                                <input type="color" id="vDivCol2" class="form-color" style="height:25px;" value="#6d28d9">
                                <input type="range" id="vDivOp2" class="w-full mt-2" min="0" max="100" value="100">
                            </div>
                            <div class="text-center">
                                <label class="form-label">پایین</label>
                                <input type="color" id="vDivCol3" class="form-color" style="height:25px;" value="#1a2a45">
                                <input type="range" id="vDivOp3" class="w-full mt-2" min="0" max="100" value="0">
                            </div>
                        </div>

                        <div class="range-wrap mb-2">
                            <span class="range-val" style="width:70px;">ضخامت</span>
                            <input type="range" id="vDivThickness" min="1" max="20" value="7">
                            <span class="range-val" id="vDivThicknessVal">7px</span>
                        </div>
                        <div class="range-wrap mb-2">
                            <span class="range-val" style="width:70px;">ارتفاع</span>
                            <input type="range" id="vDivHeight" min="10" max="120" value="80">
                            <span class="range-val" id="vDivHeightVal">80%</span>
                        </div>
                        <div class="range-wrap mb-2">
                            <span class="range-val" style="width:70px;">فاصله لوگو</span>
                            <input type="range" id="vDivLogoDist" min="0" max="100" value="20">
                            <span class="range-val" id="vDivLogoDistVal">20px</span>
                        </div>
                        <div class="range-wrap">
                            <span class="range-val" style="width:70px;">فاصله متن</span>
                            <input type="range" id="vDivTextDist" min="0" max="100" value="20">
                            <span class="range-val" id="vDivTextDistVal">20px</span>
                        </div>
                    </div>
                </div>

                <!-- Tab: Border -->
                <div id="tab-border" class="tab-content">
                    <div class="control-group">
                        <div class="control-title">
                            <div class="flex items-center gap-2">
                                <input type="checkbox" id="borderEnabled" style="width:16px;height:16px;">
                                <span class="bullet-point" style="background-color: #ef4444;"></span>
                                <span>کادر دور تصویر</span>
                            </div>
                        </div>

                        <div class="grid-2 mb-3">
                            <div>
                                <label class="form-label">رنگ شروع</label>
                                <input type="color" id="borderCol1" class="form-color h-8" value="#0c4355">
                            </div>
                            <div>
                                <label class="form-label">رنگ پایان</label>
                                <input type="color" id="borderCol2" class="form-color h-8" value="#e0e0e0">
                            </div>
                        </div>
                        
                        <div class="range-wrap mb-3">
                            <span class="range-val" style="width:60px;">شفافیت</span>
                            <input type="range" id="borderOpacity" min="0" max="100" value="100">
                            <span class="range-val" id="borderOpacityVal">100%</span>
                        </div>

                        <div class="mb-3">
                             <div class="flex items-center gap-2">
                                <input type="checkbox" id="borderRandom" style="width:14px;height:14px;">
                                <label for="borderRandom" class="form-label" style="margin:0;">رندومایز (دست‌نویس)</label>
                            </div>
                        </div>

                        <div class="range-wrap mb-2">
                            <span class="range-val" style="width:60px;">ضخامت</span>
                            <input type="range" id="borderThickness" min="1" max="50" value="5">
                            <span class="range-val" id="borderThicknessVal">5px</span>
                        </div>
                        <div class="range-wrap mb-2">
                            <span class="range-val" style="width:60px;">طول خط</span>
                            <input type="range" id="borderDash" min="1" max="100" value="20">
                            <span class="range-val" id="borderDashVal">20</span>
                        </div>
                        <div class="range-wrap mb-2">
                            <span class="range-val" style="width:60px;">فاصله خالی</span>
                            <input type="range" id="borderGap" min="0" max="100" value="10">
                            <span class="range-val" id="borderGapVal">10</span>
                        </div>
                        <div class="range-wrap mb-2">
                            <span class="range-val" style="width:60px; color:#8b5cf6;">حاشیه</span>
                            <input type="range" id="borderMargin" min="0" max="200" value="43">
                            <span class="range-val" id="borderMarginVal">43px</span>
                        </div>
                        <div class="range-wrap mb-4">
                            <span class="range-val" style="width:60px; color:#8b5cf6;">گردی</span>
                            <input type="range" id="borderRadius" min="0" max="100" value="38">
                            <span class="range-val" id="borderRadiusVal">38px</span>
                        </div>
                    </div>
                </div>

                <!-- Tab: Extra Icon -->
                <div id="tab-extra" class="tab-content">
                    <div class="control-group">
                        <div class="control-title"><span class="bullet-point"></span>افزودن آیکون PNG</div>
                        <label class="custom-file-upload mb-4">
                            <svg class="upload-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                            <span id="iconImgLabel">انتخاب فایل</span>
                            <input type="file" id="iconLoader" accept="image/png" />
                        </label>
                        
                        <div class="range-wrap">
                            <span class="range-val" style="width:50px;">اندازه</span>
                            <input type="range" id="iconSize" min="10" max="400" value="100">
                            <span class="range-val" id="iconSizeVal">100</span>
                        </div>
                        <div class="range-wrap">
                            <span class="range-val" style="width:50px;">افقی</span>
                            <input type="range" id="iconX" min="-1500" max="1500" value="0">
                            <span class="range-val" id="iconXVal">0</span>
                        </div>
                        <div class="range-wrap">
                            <span class="range-val" style="width:50px;">عمودی</span>
                            <input type="range" id="iconY" min="-1500" max="1500" value="0">
                            <span class="range-val" id="iconYVal">0</span>
                        </div>
                        <div class="range-wrap">
                            <span class="range-val" style="width:50px;">شفافیت</span>
                            <input type="range" id="iconOpacity" min="0" max="100" value="90">
                            <span class="range-val" id="iconOpacityVal">90%</span>
                        </div>
                    </div>
                </div>

                <!-- Tab: Settings & Export -->
                <div id="tab-settings" class="tab-content">
                    <div class="control-group">
                        <div class="control-title"><span class="bullet-point"></span>موقعیت و زمینه</div>
                        
                        <div class="checkbox-box">
                            <div>
                                <div class="flex items-center gap-2">
                                    <input type="checkbox" id="fixedWidth" style="width:16px;height:16px;cursor:pointer;">
                                    <label for="fixedWidth" class="checkbox-label">عرض ثابت بلوک متن</label>
                                </div>
                                <p class="checkbox-desc">جلوگیری از پرش متن هنگام تغییر خط (مناسب برای وسط‌چین)</p>
                            </div>
                        </div>

                        <label class="form-label">موقعیت بلوک متن</label>
                        <select id="blockPosition" class="form-select mb-4">
                            <option value="bottom_right" selected>پایین راست</option>
                            <option value="bottom_left">پایین چپ</option>
                            <option value="top_right">بالا راست</option>
                            <option value="top_left">بالا چپ</option>
                            <option value="bottom_center">پایین وسط</option>
                            <option value="top_center">بالا وسط</option>
                        </select>
                        
                        <div class="range-wrap mb-4">
                            <span class="range-val" style="width:70px;">حاشیه صفحه</span>
                            <input type="range" id="padding" min="0" max="200" value="40">
                            <span class="range-val" id="paddingVal">40</span>
                        </div>
                        
                        <!-- NEW: Text Padding Slider -->
                        <div class="range-wrap mb-4">
                             <span class="range-val" style="width:70px; color:#fbbf24;">حاشیه متن</span>
                             <input type="range" id="textBlockPadding" min="0" max="100" value="20">
                             <span class="range-val" id="textBlockPaddingVal">20px</span>
                        </div>

                        <div class="range-wrap mb-4">
                            <span class="range-val" style="width:70px;">شفافیت متن</span>
                            <input type="range" id="globalOpacity" min="10" max="100" value="100">
                            <span class="range-val" id="globalOpacityVal">100%</span>
                        </div>
                    </div>

                    <div class="control-group">
                        <div class="control-title"><span class="bullet-point"></span>گرادیانت محو زمینه</div>
                        <div class="grid-2 mb-3">
                            <input type="color" id="gradStart" class="form-color" value="#132444">
                            <input type="color" id="gradEnd" class="form-color" value="#132444">
                        </div>
                        <div class="range-wrap mb-3">
                            <span class="range-val" style="width:80px;">ارتفاع زمینه</span>
                            <input type="range" id="gradHeight" min="0" max="100" value="53">
                            <span class="range-val" id="gradHeightVal">53%</span>
                        </div>
                        <div class="range-wrap mb-3">
                            <span class="range-val" style="width:80px;">شروع محو</span>
                            <input type="range" id="gradSolid" min="0" max="100" value="26">
                            <span class="range-val" id="gradSolidVal">26%</span>
                        </div>
                        <div class="range-wrap mb-3">
                            <span class="range-val" style="width:80px;">نقطه میانی</span>
                            <input type="range" id="gradMid" min="0" max="100" value="50">
                            <span class="range-val" id="gradMidVal">50%</span>
                        </div>
                        <div class="range-wrap">
                            <span class="range-val" style="width:80px;">غلظت رنگ</span>
                            <input type="range" id="gradOpacity" min="0" max="100" value="87">
                            <span class="range-val" id="gradOpacityVal">87%</span>
                        </div>
                    </div>

                    <div class="mt-6">
                        <button onclick="downloadImage()" class="btn-primary mb-3">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                            دانلود تصویر نهایی (PNG)
                        </button>
                        
                        <div class="grid-2 mb-3">
                            <button onclick="downloadJSON()" class="btn-secondary">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                                ذخیره (JSON)
                            </button>
                            <label class="btn-secondary" style="cursor:pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                بارگذاری (JSON)
                                <input type="file" id="jsonLoader" accept=".json" class="file-upload-input" onchange="loadJSON(this)"/>
                            </label>
                        </div>
                        
                        <button onclick="resetSettings()" class="btn-danger">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                            بازنشانی به تنظیمات اولیه
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- RIGHT: Preview Panel -->
    <div class="preview-panel-wrapper">
         <div class="card preview-area">
            <p id="placeholder" class="text-center" style="font-weight:700; font-size:1.1rem; color:#6b7280;">
                <svg style="width:4rem; height:4rem; margin: 0 auto 1rem auto; opacity:0.5;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                برای شروع، یک تصویر بارگذاری کنید
            </p>
            <canvas id="canvas" class="hidden"></canvas>
        </div>
    </div>

</div>

<footer>
    طراحی شده برای روابط عمومی | نسخه 27.0 | کلیه حقوق مادی و معنوی این اپلیکشن متعلق به وزارت ارتباطات جمهوری اسلامی است
</footer>

<!-- Mobile FAB -->
<div class="fab-preview" onclick="toggleMobileModal(true)">
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
</div>

<!-- Mobile Modal -->
<div class="mobile-modal" id="mobileModal">
    <button class="modal-close" onclick="toggleMobileModal(false)">بستن ✕</button>
    <img id="mobilePreviewImg" style="max-width:100%; max-height:80vh; border-radius:0.5rem; background:white; box-shadow:0 10px 25px rgba(0,0,0,0.5);" alt="Preview">
    <button onclick="downloadImage()" class="btn-primary mt-6" style="width:auto; min-width:200px;">دانلود</button>
</div>

<script>
    const DEFAULTS = {
      "imgScale": "100", "imgPanX": "0", "imgPanY": "0", "logoSize": "12", "syncAlign": true,
      "rotitrText": "دور زدن ممنوع! اینجا روابط عمومی است", "rotitrColor": "#ffffff", "rotitrHighlightColor": "#f59e0b", "rotitrSize": "45", "rotitrFont": "Vazirmatn",
      "titleText": "", "titleColor": "#e0e7ff", "titleHighlightColor": "#ef4444", "titleSize": "35", "titleFont": "Vazirmatn",
      "bodyText": "این نسخه جدید دارای قابلیت‌های پیشرفته است. برای هایلایت کردن کلمات آنها را در {آکولاد} قرار دهید و برای **بولد کردن** از دو ستاره استفاده کنید.",
      "bodyColor": "#ffffff", "bodyHighlightColor": "#8b5cf6", "bodySize": "30", "bodyLineHeight": "160", "bodyFont": "Vazirmatn",
      "dividerEnabled": true, "divCol1": "#000000", "divOp1": "0", "divCol2": "#7a0c00", "divOp2": "100", "divCol3": "#0d0d0d", "divOp3": "0",
      "divThickness": "13", "divWidth": "56", "divMarginTop": "0", "divMarginBottom": "34",
      "vDividerEnabled": true, "vDivCol1": "#000000", "vDivOp1": "0", "vDivCol2": "#6d28d9", "vDivOp2": "100", "vDivCol3": "#1a2a45", "vDivOp3": "0",
      "vDivThickness": "7", "vDivHeight": "80", "vDivLogoDist": "20", "vDivTextDist": "20",
      "iconSize": "100", "iconX": "0", "iconY": "0", "iconOpacity": "90",
      "blockPosition": "bottom_right", "padding": "40", "globalOpacity": "100",
      "gradStart": "#132444", "gradEnd": "#132444", "gradHeight": "53", "gradSolid": "26", "gradMid": "50", "gradOpacity": "87",
      "alignments": { "rotitr": "center", "title": "center", "body": "center" },
      "borderEnabled": true, "borderThickness": 5, "borderDash": 20, "borderGap": 10, "borderRandom": false, 
      "borderCol1": "#0c4355", "borderCol2": "#e0e0e0", "borderOpacity": 100,
      "borderMargin": 43, "borderRadius": 38, "fixedWidth": true, "logoMargin": 0, "textBlockPadding": 20,
      "aspectMode": "original" 
    };

    let CONFIG = {
        virtualHeight: 1400,
        alignments: { ...DEFAULTS.alignments },
        fonts: { normal: 'Vazirmatn', bold: 'Vazirmatn' },
        aspectMode: 'original' 
    };
    
    let images = { main: null, logo: null, icon: null };
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    // Optimization flag
    let isRestoring = false;

    function switchTab(tabId) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
        document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
        document.getElementById(tabId).classList.add('active');
        
        const btns = Array.from(document.querySelectorAll('.tab-btn'));
        const index = ['tab-images', 'tab-text', 'tab-divider', 'tab-border', 'tab-extra', 'tab-settings'].indexOf(tabId);
        if(index >= 0 && btns[index]) btns[index].classList.add('active');
    }

    function setAlign(targetId, align) {
        const sync = document.getElementById('syncAlign').checked;
        if (sync) {
            ['rotitr', 'title', 'body'].forEach(id => {
                CONFIG.alignments[id] = align;
                updateAlignUI(id, align);
            });
        } else {
            CONFIG.alignments[targetId] = align;
            updateAlignUI(targetId, align);
        }
        render();
    }

    function setAspect(mode) {
        CONFIG.aspectMode = mode;
        document.querySelectorAll('.aspect-btn').forEach(btn => btn.classList.remove('active'));
        const btns = document.querySelectorAll('.aspect-btn');
        if(mode === 'original') btns[0].classList.add('active');
        if(mode === 'square') btns[1].classList.add('active');
        if(mode === 'story') btns[2].classList.add('active');

        const controls = document.getElementById('imgTransformControls');
        if(mode === 'original') controls.style.display = 'none';
        else controls.style.display = 'block';

        render();
    }

    function updateAlignUI(targetId, align) {
        const group = document.getElementById(`align-group-${targetId}`);
        if (!group) return;
        const btns = group.querySelectorAll('button');
        btns.forEach(btn => {
            btn.classList.remove('active');
            if (btn.innerText === (align === 'justify' ? 'تراز' : align === 'right' ? 'راست' : align === 'center' ? 'وسط' : 'چپ')) {
                btn.classList.add('active');
            }
        });
    }

    function hexToRgba(hex, alphaPercent) {
        let r=0, g=0, b=0;
        if(hex.length === 7) {
            r = parseInt(hex.slice(1,3), 16);
            g = parseInt(hex.slice(3,5), 16);
            b = parseInt(hex.slice(5,7), 16);
        }
        return `rgba(${r}, ${g}, ${b}, ${alphaPercent/100})`;
    }

    function ui(id) { 
        const el = document.getElementById(id);
        return el ? el.value : ''; 
    }

    function parseStyledText(text) {
        const regex = /(\*\*.*?\*\*)|(\{.*?\})/g;
        const parts = text.split(regex).filter(p => p); 
        let tokens = [];
        parts.forEach(part => {
            let style = 'normal';
            let cleanText = part;
            if (part.startsWith('**') && part.endsWith('**')) { style = 'bold'; cleanText = part.slice(2, -2); }
            else if (part.startsWith('{') && part.endsWith('}')) { style = 'highlight'; cleanText = part.slice(1, -1); }
            const words = cleanText.split(' ');
            words.forEach((w, i) => {
                if (w.length > 0) tokens.push({ text: w, style: style });
                if (i < words.length - 1) tokens.push({ text: ' ', style: style }); 
            });
        });
        return tokens;
    }

    function wrapStyledText(ctx, tokens, maxWidth, baseSize, fontFamily) {
        const lines = [];
        let currentLine = [];
        let currentLineWidth = 0;

        const pushLine = () => {
            if (currentLine.length === 0) return;
            let visibleWidth = currentLineWidth;
            for (let i = currentLine.length - 1; i >= 0; i--) {
                if (currentLine[i].text === ' ') visibleWidth -= currentLine[i].width;
                else break; 
            }
            lines.push({ tokens: currentLine, width: visibleWidth });
            currentLine = [];
            currentLineWidth = 0;
        };

        tokens.forEach(token => {
            const isBold = token.style === 'bold';
            const size = isBold ? baseSize * 1.1 : baseSize;
            ctx.font = `${isBold ? 'bold' : ''} ${size}px "${fontFamily}"`;
            const tokenWidth = ctx.measureText(token.text).width;
            const tokenObj = { ...token, width: tokenWidth, size: size };

            if (currentLineWidth + tokenWidth <= maxWidth || currentLine.length === 0) {
                currentLine.push(tokenObj);
                currentLineWidth += tokenWidth;
            } else {
                pushLine();
                if (token.text !== ' ') {
                    currentLine = [tokenObj];
                    currentLineWidth = tokenWidth;
                }
            }
        });
        pushLine();
        return lines;
    }

    function render() {
        if (!images.main || isRestoring) return;

        if (CONFIG.aspectMode === 'original') {
            canvas.width = images.main.width;
            canvas.height = images.main.height;
            ctx.drawImage(images.main, 0, 0);
        } else {
            const BASE_W = 1080;
            canvas.width = BASE_W;
            canvas.height = (CONFIG.aspectMode === 'square') ? 1080 : 1920;
            ctx.fillStyle = '#121212'; 
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            const scale = parseInt(ui('imgScale')) / 100;
            const panX = parseInt(ui('imgPanX')); 
            const panY = parseInt(ui('imgPanY'));
            ctx.save();
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.translate((panX / 100) * canvas.width, (panY / 100) * canvas.height);
            ctx.scale(scale, scale);
            ctx.drawImage(images.main, -images.main.width / 2, -images.main.height / 2);
            ctx.restore();
        }

        const s = canvas.height / CONFIG.virtualHeight; 
        const basePad = parseInt(ui('padding')) * s;
        const borderEnabled = document.getElementById('borderEnabled').checked;
        
        let effectivePad = basePad;
        if (borderEnabled) {
            const bMargin = parseInt(ui('borderMargin')) * s;
            const bThick = parseInt(ui('borderThickness')) * s;
            const requiredPad = bMargin + bThick + (10 * s); 
            effectivePad = Math.max(basePad, requiredPad);
        }
        
        const pad = effectivePad;
        const pos = ui('blockPosition');
        const isLeftPos = pos.includes('left');
        const isCenterPos = pos.includes('center');
        const logoMargin = parseInt(ui('logoMargin')) * s;
        
        let logoW = 0, logoH = 0;
        if(images.logo) {
            logoH = canvas.height * (parseInt(ui('logoSize')) / 100);
            logoW = images.logo.width * (logoH / images.logo.height);
        }

        const vDivEnabled = document.getElementById('vDividerEnabled').checked && images.logo;
        const vDivThick = parseInt(ui('vDivThickness')) * s;
        const vDivLogoDist = parseInt(ui('vDivLogoDist')) * s;
        const vDivTextDist = parseInt(ui('vDivTextDist')) * s;
        
        const extraSpaceForLogo = logoW > 0 
            ? logoW + (logoMargin * 2) + (vDivEnabled ? (vDivLogoDist + vDivThick + vDivTextDist) : (20*s)) 
            : 0;

        const textPad = parseInt(ui('textBlockPadding')) * s;
        const maxTextW = Math.max(100, canvas.width - (pad * 2) - extraSpaceForLogo - (textPad * 2));
        
        const blocks = [
            { id: 'rotitr', text: ui('rotitrText'), color: ui('rotitrColor'), hl: ui('rotitrHighlightColor'), size: parseInt(ui('rotitrSize')) * s, lh: 1.4, font: ui('rotitrFont') },
            { id: 'title', text: ui('titleText'), color: ui('titleColor'), hl: ui('titleHighlightColor'), size: parseInt(ui('titleSize')) * s, lh: 1.4, font: ui('titleFont') },
            { id: 'body', text: ui('bodyText'), color: ui('bodyColor'), hl: ui('bodyHighlightColor'), size: parseInt(ui('bodySize')) * s, lh: parseInt(ui('bodyLineHeight')) / 100, font: ui('bodyFont') }
        ];

        let totalTextH = 0;
        const processedBlocks = [];
        
        blocks.forEach(b => {
            if(!b.text.trim()) return;
            const tokens = parseStyledText(b.text);
            const lines = wrapStyledText(ctx, tokens, maxTextW, b.size, b.font);
            const blockH = lines.length * (b.size * b.lh);
            processedBlocks.push({ ...b, lines, height: blockH });
            totalTextH += blockH;
        });

        const hasTitle = processedBlocks.some(b => b.id === 'title' || b.id === 'rotitr');
        const hasBody = processedBlocks.some(b => b.id === 'body');
        const showHDivider = document.getElementById('dividerEnabled').checked && hasTitle && hasBody;
        const hDivTop = parseInt(ui('divMarginTop')) * s;
        const hDivBot = parseInt(ui('divMarginBottom')) * s;
        const hDivThick = parseInt(ui('divThickness')) * s;
        
        if (showHDivider) totalTextH += hDivTop + hDivBot + hDivThick;
        totalTextH += (processedBlocks.length - 1) * (15 * s); 

        let blockW = processedBlocks.length > 0 
            ? Math.ceil(Math.max(...processedBlocks.map(b => Math.max(...b.lines.map(l => l.width))))) 
            : 0;
        
        if (document.getElementById('fixedWidth').checked) {
            blockW = maxTextW;
        }

        const contentBoxW = blockW + (textPad * 2);
        const contentBoxH = totalTextH + (textPad * 2);
        
        let fullBlockW, fullBlockH;
        const logoTotalW = logoW + (logoMargin * 2);
        
        if (isCenterPos) {
             fullBlockW = contentBoxW;
             fullBlockH = Math.max(contentBoxH, logoH);
        } else {
             fullBlockW = Math.ceil(contentBoxW + extraSpaceForLogo);
             fullBlockH = Math.ceil(Math.max(contentBoxH, logoH));
        }

        let startX, startY;
        
        if (isCenterPos) {
            startX = Math.floor((canvas.width - contentBoxW) / 2);
            if (pos.startsWith('top')) startY = pad;
            else startY = canvas.height - pad - fullBlockH;
        } else {
            if (pos === 'bottom_right') { startX = canvas.width - pad - fullBlockW; startY = canvas.height - pad - fullBlockH; }
            else if (pos === 'bottom_left') { startX = pad; startY = canvas.height - pad - fullBlockH; }
            else if (pos === 'top_right') { startX = canvas.width - pad - fullBlockW; startY = pad; }
            else { startX = pad; startY = pad; }
        }
        
        startX = Math.floor(startX);
        startY = Math.floor(startY);

        const gradH = canvas.height * (parseInt(ui('gradHeight')) / 100);
        if (gradH > 0) {
            ctx.save();
            const gOp = parseInt(ui('gradOpacity')) / 100;
            const gSolid = parseInt(ui('gradSolid')) / 100;
            const gMid = parseInt(ui('gradMid')) / 100;
            const gStart = hexToRgba(ui('gradStart'), gOp*100);
            const gEnd = hexToRgba(ui('gradEnd'), 0);
            
            let grd = ctx.createLinearGradient(0, pos.startsWith('top') ? 0 : canvas.height - gradH, 0, pos.startsWith('top') ? gradH : canvas.height);
            const gMidColor = hexToRgba(ui('gradStart'), (gOp*100)/2);

            if (pos.startsWith('top')) {
                const fadeLen = 1.0 - gSolid;
                const midPos = gSolid + (fadeLen * gMid);
                grd.addColorStop(0, gStart);
                grd.addColorStop(gSolid, gStart); 
                grd.addColorStop(midPos, gMidColor);
                grd.addColorStop(1, gEnd);
            } else {
                const fadeEnd = 1.0 - gSolid; 
                const midPos = fadeEnd * (1.0 - gMid); 
                grd.addColorStop(0, gEnd); 
                grd.addColorStop(midPos, gMidColor);
                grd.addColorStop(fadeEnd, gStart); 
                grd.addColorStop(1, gStart); 
            }

            ctx.fillStyle = grd;
            ctx.fillRect(0, pos.startsWith('top') ? 0 : canvas.height - gradH, canvas.width, gradH);
            ctx.restore();
        }

        ctx.globalAlpha = parseInt(ui('globalOpacity')) / 100;
        
        let logoDrawX, textBlockStartX;
        const gapSpace = vDivEnabled ? (vDivLogoDist + vDivThick + vDivTextDist) : (20*s);

        if (isLeftPos) {
            logoDrawX = startX + logoMargin; 
            textBlockStartX = startX + logoTotalW + gapSpace;
        } else if (isCenterPos) {
            textBlockStartX = startX;
            logoDrawX = startX + contentBoxW + gapSpace + logoMargin;
        } else {
            textBlockStartX = startX; 
            logoDrawX = startX + contentBoxW + gapSpace + logoMargin;
        }

        if (images.logo) {
            const logoY = startY + (fullBlockH - logoH) / 2;
            ctx.drawImage(images.logo, logoDrawX, logoY, logoW, logoH);
            
            if (vDivEnabled) {
                let vDivX;
                if (isLeftPos) {
                    const logoRightEdge = logoDrawX + logoW + logoMargin; 
                    vDivX = logoRightEdge + vDivLogoDist + (vDivThick/2);
                } else {
                    const logoLeftEdge = logoDrawX - logoMargin;
                    vDivX = logoLeftEdge - vDivLogoDist - (vDivThick/2);
                }
                
                const vH = fullBlockH * (parseInt(ui('vDivHeight'))/100);
                const vY = startY + (fullBlockH - vH)/2;
                
                const grad = ctx.createLinearGradient(0, vY, 0, vY + vH);
                grad.addColorStop(0, hexToRgba(ui('vDivCol1'), parseInt(ui('vDivOp1'))));
                grad.addColorStop(0.5, hexToRgba(ui('vDivCol2'), parseInt(ui('vDivOp2'))));
                grad.addColorStop(1, hexToRgba(ui('vDivCol3'), parseInt(ui('vDivOp3'))));
                
                ctx.strokeStyle = grad;
                ctx.lineWidth = vDivThick;
                ctx.lineCap = 'round';
                ctx.beginPath(); ctx.moveTo(vDivX, vY); ctx.lineTo(vDivX, vY+vH); ctx.stroke();
            }
        }

        let currentY = startY + (fullBlockH - contentBoxH) / 2 + textPad;
        let hDivDrawn = false;
        
        const textAreaRightX = textBlockStartX + blockW + textPad;
        const textAreaLeftX = textBlockStartX + textPad;
        
        processedBlocks.forEach(block => {
            const align = CONFIG.alignments[block.id];

            if (showHDivider && !hDivDrawn && block.id === 'body') {
                currentY += hDivTop;
                const hDivW = blockW * (parseInt(ui('divWidth'))/100);
                const hDivX = textAreaLeftX + (blockW - hDivW)/2; 
                
                const grad = ctx.createLinearGradient(hDivX, 0, hDivX + hDivW, 0);
                grad.addColorStop(0, hexToRgba(ui('divCol1'), parseInt(ui('divOp1'))));
                grad.addColorStop(0.5, hexToRgba(ui('divCol2'), parseInt(ui('divOp2'))));
                grad.addColorStop(1, hexToRgba(ui('divCol3'), parseInt(ui('divOp3'))));
                
                ctx.strokeStyle = grad; ctx.lineWidth = hDivThick;
                ctx.beginPath(); ctx.moveTo(hDivX, currentY); ctx.lineTo(hDivX+hDivW, currentY); ctx.stroke();
                
                currentY += hDivThick + hDivBot;
                hDivDrawn = true;
            }

            block.lines.forEach((line, i) => {
                let lineX; 
                if (align === 'right') lineX = textAreaRightX;
                else if (align === 'left') lineX = textAreaLeftX + line.width;
                else if (align === 'center') lineX = textAreaLeftX + (blockW/2) + (line.width/2);
                else lineX = textAreaRightX; 

                let extraSpace = 0;
                if (align === 'justify' && line.width < blockW) {
                     const isLastLine = i === block.lines.length - 1;
                     if (!isLastLine) {
                         const gaps = line.tokens.filter(t=>t.text !== ' ').length - 1;
                         if (gaps > 0) {
                             extraSpace = (blockW - line.width) / gaps;
                             lineX = textAreaRightX; 
                         }
                     }
                }

                let currentX = lineX;
                line.tokens.forEach(token => {
                    ctx.font = `${token.style==='bold'?'bold':''} ${token.size}px "${block.font}"`;
                    ctx.textBaseline = 'top'; ctx.textAlign = 'right';
                    
                    if (token.style === 'highlight') ctx.fillStyle = block.hl;
                    else ctx.fillStyle = block.color;
                    
                    ctx.fillText(token.text, currentX, currentY);
                    currentX -= token.width;
                    if (token.text !== ' ' && extraSpace > 0) currentX -= extraSpace;
                });
                currentY += (block.size * block.lh);
            });
            currentY += 15 * s;
        });

        if (images.icon) {
            const iSize = parseInt(ui('iconSize')) * s;
            const iX = parseInt(ui('iconX')) * s;
            const iY = parseInt(ui('iconY')) * s;
            ctx.save(); ctx.globalAlpha = parseInt(ui('iconOpacity')) / 100;
            const cX = canvas.width / 2;
            const cY = canvas.height / 2;
            ctx.drawImage(images.icon, cX + iX - (iSize/2), cY + iY - (iSize/2), iSize, iSize);
            ctx.restore();
        }

        ctx.globalAlpha = 1.0;

        if (borderEnabled) {
            ctx.save();
            const bMargin = parseInt(ui('borderMargin')) * s;
            const bThick = parseInt(ui('borderThickness')) * s;
            const bDash = parseInt(ui('borderDash')) * s;
            const bGap = parseInt(ui('borderGap')) * s;
            const bRad = parseInt(ui('borderRadius')) * s;
            const isRand = document.getElementById('borderRandom').checked;
            
            const bX = bMargin;
            const bY = bMargin;
            const bW = canvas.width - (bMargin * 2);
            const bH = canvas.height - (bMargin * 2);
            
            if (isRand) {
                ctx.setLineDash([bDash, bGap, bDash*0.5, bGap*1.5, bDash*2, bGap]); 
            } else {
                ctx.setLineDash([bDash, bGap]);
            }
            
            const bOp = parseInt(ui('borderOpacity'))/100;
            const grad = ctx.createLinearGradient(bX, bY, bX + bW, bY + bH);
            grad.addColorStop(0, hexToRgba(ui('borderCol1'), bOp*100));
            grad.addColorStop(1, hexToRgba(ui('borderCol2'), bOp*100));
            
            ctx.strokeStyle = grad;
            ctx.lineWidth = bThick;
            ctx.lineCap = 'round';
            
            ctx.beginPath();
            if (ctx.roundRect) {
                ctx.roundRect(bX, bY, bW, bH, bRad);
            } else {
                ctx.rect(bX, bY, bW, bH);
            }
            ctx.stroke();
            ctx.restore();
        }

        document.getElementById('mobilePreviewImg').src = canvas.toDataURL();
    }

    function setupListeners() {
        document.querySelectorAll('input, textarea, select').forEach(el => {
            el.addEventListener('input', (e) => {
                updateSpan(e.target);
                render();
            });
            if(el.type === 'range') updateSpan(el);
        });

        const setLoader = (id, key, lblId) => {
            document.getElementById(id).addEventListener('change', (e) => {
                if(e.target.files && e.target.files[0]) {
                    const reader = new FileReader();
                    reader.onload = (evt) => {
                        const img = new Image();
                        img.onload = () => { 
                            images[key] = img; 
                            if(key==='main') {
                                document.getElementById('placeholder').classList.add('hidden');
                                document.getElementById('canvas').classList.remove('hidden');
                                render();
                            }
                            render(); 
                        };
                        img.src = evt.target.result;
                    };
                    reader.readAsDataURL(e.target.files[0]);
                    document.getElementById(lblId).innerText = e.target.files[0].name;
                }
            });
        };
        setLoader('imageLoader', 'main', 'mainImgLabel');
        setLoader('logoLoader', 'logo', 'logoImgLabel');
        setLoader('iconLoader', 'icon', 'iconImgLabel');
        
        document.querySelectorAll('input[type=range]').forEach(updateSpan);
        resetSettings(false);
    }

    function updateSpan(target) {
        if(target.type !== 'range') return;
        const span = document.getElementById(target.id + 'Val');
        if(span) {
            let v = target.value;
            if(target.id.includes('Size') && !target.id.includes('icon') && !target.id.includes('logo') && !target.id.includes('Scale')) v = (v/10).toFixed(1)+'%';
            else if(target.id.includes('LineHeight')) v = (v/100).toFixed(1);
            else if(target.id.includes('iconX') || target.id.includes('iconY') || target.id.includes('imgPan')) v = v; 
            else if(target.id.includes('Op') || target.id.includes('Height') || target.id.includes('Width') || target.id.includes('Size') || target.id.includes('Solid') || target.id.includes('Scale') || target.id.includes('Mid')) v+='%';
            else v+='px';
            span.innerText = v;
        }
    }

    function downloadImage() {
        if(!images.main) return alert('لطفا ابتدا تصویر را انتخاب کنید');
        const link = document.createElement('a');
        link.download = `phototitr-${Date.now()}.png`;
        link.href = canvas.toDataURL('image/png');
        link.click();
    }

    function downloadJSON() {
        const data = {};
        document.querySelectorAll('input, textarea, select').forEach(el => {
            if(el.id && !el.id.includes('Loader')) {
                if(el.type === 'checkbox') data[el.id] = el.checked;
                else data[el.id] = el.value;
            }
        });
        data.alignments = CONFIG.alignments;
        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
        const downloadAnchorNode = document.createElement('a');
        downloadAnchorNode.setAttribute("href", dataStr);
        downloadAnchorNode.setAttribute("download", `phototitr_settings_${Date.now()}.json`);
        document.body.appendChild(downloadAnchorNode);
        downloadAnchorNode.click();
        downloadAnchorNode.remove();
    }

    function loadJSON(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = (e) => {
                applySettings(JSON.parse(e.target.result));
            };
            reader.readAsText(input.files[0]);
        }
    }

    function resetSettings(confirmReset = true) {
        if(!confirmReset || confirm('آیا مطمئن هستید که می‌خواهید تمام تنظیمات را به حالت پیش‌فرض بازگردانید؟')) {
            const defaultsCopy = JSON.parse(JSON.stringify(DEFAULTS));
            isRestoring = true;
            applySettings(defaultsCopy);
            isRestoring = false;
            render();
        }
    }

    function applySettings(data) {
        try {
            if (data.aspectMode) {
                setAspect(data.aspectMode);
            }

            for (const key in data) {
                if (key === 'alignments') {
                    CONFIG.alignments = JSON.parse(JSON.stringify(data[key]));
                    ['rotitr', 'title', 'body'].forEach(id => updateAlignUI(id, CONFIG.alignments[id]));
                } else if (key !== 'aspectMode') {
                    const el = document.getElementById(key);
                    if (el) {
                        if (el.type === 'checkbox') el.checked = data[key];
                        else el.value = data[key];
                        el.dispatchEvent(new Event('input'));
                    }
                }
            }
            if(!isRestoring) render();
        } catch (err) {
            console.error('Error applying settings:', err);
        }
    }
    
    function toggleMobileModal(show) {
        const m = document.getElementById('mobileModal');
        if(show) { render(); m.classList.add('open'); } else m.classList.remove('open');
    }

    window.onload = setupListeners;
</script>
</body>
</html>