diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -4,1480 +4,1011 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Alpha TTS Pro - نسل جدید تبدیل متن به صدا</title>
-    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233B82F6' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E" type="image/svg+xml">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
 
         :root {
-            --app-font: 'Vazirmatn', sans-serif;
-            --app-bg: #F4F7FC;
-            --panel-bg: #FFFFFF;
-            --panel-border: #E8EEF3;
-            --text-primary: #121826;
-            --text-secondary: #5C677D; /* Main grey for secondary text and icons */
-            --accent-primary: #3B82F6; /* Blue for highlights */
-            --accent-primary-hover: #2563EB;
-            --accent-secondary: #10B981; /* Green for success/other highlights */
-            --accent-secondary-hover: #059669;
-            --input-bg: #F8FAFC;
-            --input-border-focus: var(--accent-primary);
-            --error-color: #EF4444;
-
-            --radius-card: 24px;
-            --radius-input: 14px;
-            --shadow-subtle: 0 2px 8px rgba(26, 32, 44, 0.04);
-            --shadow-medium: 0 6px 16px -2px rgba(26, 32, 44, 0.08), 0 3px 8px -3px rgba(26,32,44,0.05);
-            --shadow-strong: 0 10px 25px -5px rgba(26, 32, 44, 0.12), 0 6px 15px -6px rgba(26,32,44,0.08);
-            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-
-            /* Custom Audio Player Colors */
-            --waveform-color-active: var(--accent-primary);
-            --waveform-color-inactive: #D0D9E6;
-            --waveform-dashed-line-color: #E0E4E9;
-        }
-
-        @keyframes fadeInDown {
-            from { opacity: 0; transform: translateY(-20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes modalZoomIn {
-            from { opacity: 0; transform: scale(0.8) translateY(20px); }
-            to { opacity: 1; transform: scale(1) translateY(0); }
-        }
-        @keyframes modalZoomOut {
-            from { opacity: 1; transform: scale(1) translateY(0); }
-            to { opacity: 0; transform: scale(0.8) translateY(20px); }
-        }
-        @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-        }
-        @keyframes pulse {
-            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
-            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
-            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
-        }
-        @keyframes typing {
-            from { width: 0 }
-            to { width: 100% }
-        }
-        @keyframes blink-caret {
-            from, to { border-color: transparent }
-            50% { border-color: var(--accent-primary); }
-        }
+            --font-family: 'Vazirmatn', sans-serif;
+            --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+            --radius-lg: 20px;
+            --radius-md: 12px;
+            --radius-sm: 8px;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+        }
+
+        /* --- Light Theme --- */
+        html[data-theme='light'] {
+            --bg-main: #f3f4f6;
+            --bg-panel: #ffffff;
+            --bg-input: #f9fafb;
+            --bg-hover: #f3f4f6;
+            --bg-active: #e5e7eb;
+            --border-color: #e5e7eb;
+            --text-primary: #111827;
+            --text-secondary: #4b5563;
+            --text-tertiary: #9ca3af;
+            --accent-primary: #2563eb;
+            --accent-primary-hover: #1d4ed8;
+            --accent-secondary: #16a34a;
+            --accent-secondary-hover: #15803d;
+            --accent-danger: #dc2626;
+            --shadow-color: rgba(31, 41, 55, 0.08);
+            --waveform-active: var(--accent-primary);
+            --waveform-inactive: #d1d5db;
+        }
+
+        /* --- Dark Theme --- */
+        html[data-theme='dark'] {
+            --bg-main: #111827;
+            --bg-panel: #1f2937;
+            --bg-input: #374151;
+            --bg-hover: #374151;
+            --bg-active: #4b5563;
+            --border-color: #374151;
+            --text-primary: #f9fafb;
+            --text-secondary: #d1d5db;
+            --text-tertiary: #6b7280;
+            --accent-primary: #3b82f6;
+            --accent-primary-hover: #60a5fa;
+            --accent-secondary: #22c55e;
+            --accent-secondary-hover: #4ade80;
+            --accent-danger: #f87171;
+            --shadow-color: rgba(0, 0, 0, 0.2);
+            --waveform-active: var(--accent-primary);
+            --waveform-inactive: #4b5563;
+        }
+
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        @keyframes modal-enter { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+        @keyframes toast-enter { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
+        
+        *, *::before, *::after { box-sizing: border-box; }
 
         body {
-            font-family: var(--app-font);
-            direction: rtl;
-            background-color: var(--app-bg);
+            font-family: var(--font-family);
+            background-color: var(--bg-main);
             color: var(--text-primary);
-            font-size: 16px;
-            line-height: 1.8;
             margin: 0;
-            padding: 2.5rem 0;
+            padding: 2rem;
             min-height: 100vh;
+            line-height: 1.7;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
-            overflow-x: hidden;
+            transition: background-color 0.3s, color 0.3s;
         }
 
-        .container {
-            max-width: 780px;
-            width: 92%;
+        .app-container {
+            max-width: 1400px;
             margin: 0 auto;
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 2rem;
+            animation: fadeIn 0.6s 0.1s ease-out backwards;
+        }
+        @media (min-width: 1024px) {
+            .app-container {
+                grid-template-columns: 420px 1fr;
+                height: calc(100vh - 4rem);
+            }
         }
 
-        .app-header {
-            padding: 0.5rem 0 2.5rem 0;
-            text-align: center;
-            margin-bottom: 1.5rem;
-            animation: fadeInDown 0.8s 0.1s ease-out backwards;
-            position: relative; /* For credits display */
-        }
-        .app-header h1 {
-            font-size: 2.1em;
-            font-weight: 900;
-            margin:0 0 0.6rem 0;
-            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px;
-        }
-        .app-header p {
-            font-size: 1em;
-            color: var(--text-secondary);
-            margin-top:0;
-            opacity: 0.85;
-            font-weight: 400;
-            line-height: 1.6;
-        }
-        .credits-display {
-            position: absolute;
-            top: 0;
-            right: 0;
-            background-color: var(--panel-bg);
-            border: 1px solid var(--panel-border);
-            padding: 0.6rem 1.2rem;
-            border-radius: var(--radius-input);
-            font-size: 0.85em;
-            font-weight: 600;
-            color: var(--text-primary);
-            box-shadow: var(--shadow-subtle);
+        .panel {
+            background-color: var(--bg-panel);
+            border-radius: var(--radius-lg);
+            border: 1px solid var(--border-color);
+            box-shadow: 0 4px 16px -4px var(--shadow-color);
+            transition: var(--transition-smooth);
             display: flex;
-            align-items: center;
-            gap: 0.4rem;
+            flex-direction: column;
         }
-        .credits-display svg {
-            width: 1.2em; height: 1.2em;
-            fill: var(--accent-secondary);
+
+        .input-panel {
+            padding: 1.5rem;
         }
-        @media (max-width: 600px) {
-            .credits-display {
-                position: relative;
-                top: auto;
-                right: auto;
-                margin: 1rem auto 0;
-                width: fit-content;
+        @media (min-width: 1024px) {
+            .input-panel {
+                padding: 2rem;
+                overflow-y: auto;
             }
         }
 
-
-        .main-content {
-            padding: 2.5rem;
-            background-color: var(--panel-bg);
-            border-radius: var(--radius-card);
-            box-shadow: var(--shadow-strong);
-            border: 1px solid var(--panel-border);
-            animation: fadeInUp 0.8s 0.3s ease-out backwards;
-        }
-
-        .form-group { margin-bottom: 2rem; }
-
-        .label-with-info {
+        .app-header {
             display: flex;
+            justify-content: space-between;
             align-items: center;
-            gap: 0.5rem;
-            margin-bottom: 1rem;
+            margin-bottom: 2rem;
+            padding-bottom: 1.5rem;
+            border-bottom: 1px solid var(--border-color);
         }
-        .label-with-info label {
-             margin-bottom: 0;
+        .app-header h1 {
+            font-size: 1.5rem;
+            font-weight: 800;
+            margin: 0;
+            line-height: 1.2;
         }
-
-        .info-icon {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            background-color: var(--input-bg);
-            border: 1px solid var(--panel-border);
+        .app-header h1 span {
+            font-size: 0.7em;
             color: var(--text-secondary);
-            font-size: 0.9em;
-            font-weight: 700;
-            cursor: pointer;
+            font-weight: 500;
+            display: block;
+        }
+
+        /* --- Theme Toggle Switch --- */
+        .theme-switch {
             position: relative;
-            transition: var(--transition-smooth);
-            user-select: none;
+            display: inline-block;
+            width: 50px;
+            height: 26px;
         }
-        .info-icon:hover, .info-icon:focus {
-            background-color: var(--accent-primary);
-            color: white;
-            border-color: var(--accent-primary);
-            transform: scale(1.1);
-            outline: none;
+        .theme-switch input { opacity: 0; width: 0; height: 0; }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-color: var(--bg-input);
+            border: 1px solid var(--border-color);
+            transition: .4s;
+            border-radius: 34px;
         }
-
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 18px; width: 18px;
+            left: 3px; bottom: 3px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234b5563"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.106a.75.75 0 010 1.06l-1.591 1.59a.75.75 0 11-1.06-1.06l1.59-1.59a.75.75 0 011.06 0zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.803 17.803a.75.75 0 01-1.06 0l-1.59-1.591a.75.75 0 111.06-1.06l1.59 1.59a.75.75 0 010 1.06zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.197 17.803a.75.75 0 010-1.06l1.591-1.59a.75.75 0 011.06 1.06l-1.59 1.591a.75.75 0 01-1.06 0zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.106 6.106a.75.75 0 011.06 0l1.59 1.591a.75.75 0 01-1.06 1.06L6.106 7.167a.75.75 0 010-1.06z"/></svg>');
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+        input:checked + .slider { background-color: var(--accent-primary); }
+        input:checked + .slider:before {
+            transform: translateX(24px);
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f9fafb"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 004.463-.949a.75.75 0 01.82.162a10.5 10.5 0 11-18.632-6.524a.75.75 0 01.819.162z" clip-rule="evenodd" /></svg>');
+        }
+        
+        .form-group { margin-bottom: 1.5rem; }
         label {
             display: block;
-            font-weight: 700;
-            color: var(--text-primary);
-            font-size: 1.05em;
-            margin-bottom: 0.8rem;
+            font-weight: 600;
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            margin-bottom: 0.5rem;
         }
-
         textarea, input[type="text"] {
             width: 100%;
-            padding: 0.9rem 1.1rem;
-            border-radius: var(--radius-input);
-            border: 1px solid var(--panel-border);
-            background-color: var(--input-bg);
+            padding: 0.75rem 1rem;
+            background-color: var(--bg-input);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
             color: var(--text-primary);
-            box-shadow: var(--shadow-subtle) inset;
-            font-family: var(--app-font);
+            font-family: var(--font-family);
             font-size: 1rem;
-            box-sizing: border-box;
-            transition: var(--transition-smooth);
+            transition: var(--transition-fast);
         }
+        textarea { resize: vertical; min-height: 120px; }
         textarea:focus, input[type="text"]:focus {
             outline: none;
-            border-color: var(--input-border-focus);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), var(--shadow-subtle) inset;
-            background-color: #fff;
-        }
-        textarea { min-height: 100px; resize: vertical; }
-
-        .char-counter-wrapper {
-            font-size: 0.85em;
-            color: var(--text-secondary);
-            text-align: left;
-            margin-top: 0.5rem;
-            padding: 0 0.2rem;
+            border-color: var(--accent-primary);
+            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent);
         }
-        #char-count { font-weight: 600; color: var(--accent-primary); }
-        #char-count.error { color: var(--error-color); }
-
 
-        /* --- نمایش گوینده منتخب --- */
-        #selected-speaker-display { text-align: center; margin-top: 1rem; position: relative; }
-        #selected-speaker-card {
-            display: inline-flex;
+        /* --- Speaker Selector --- */
+        .speaker-selector {
+            background-color: var(--bg-input);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            padding: 0.75rem;
+            display: flex;
             align-items: center;
-            background: linear-gradient(135deg, var(--input-bg) 0%, #fff 100%);
-            border-radius: var(--radius-card);
-            padding: 1rem 1.2rem;
-            box-shadow: var(--shadow-medium);
-            border: 1px solid var(--panel-border);
-            transition: var(--transition-bounce);
-            position: relative;
-            margin-bottom: 1.2rem;
             cursor: pointer;
-            text-align: right;
-            max-width: 90%;
+            transition: var(--transition-smooth);
         }
-         #selected-speaker-card:hover {
-            transform: translateY(-6px) scale(1.03);
-            box-shadow: var(--shadow-strong);
+        .speaker-selector:hover {
+            border-color: color-mix(in srgb, var(--accent-primary) 50%, var(--border-color));
+            background-color: var(--bg-panel);
         }
-        #selected-speaker-card img {
-            width: 75px; height: 75px;
+        .speaker-selector img {
+            width: 50px; height: 50px;
             border-radius: 50%;
+            border: 2px solid var(--accent-secondary);
+            margin-left: 1rem;
             object-fit: cover;
-            margin-left: 18px;
-            border: 3px solid var(--accent-secondary);
-            box-shadow: 0 0 12px -2px rgba(16, 185, 129, 0.5);
-            background-color: #e0e0e0;
-            transition: var(--transition-smooth);
         }
-        #selected-speaker-card:hover img {
-            transform: scale(1.08) rotate(3deg);
-        }
-        #selected-speaker-info h3 { margin: 0; font-size: 1.35em; font-weight: 800; color: var(--text-primary); }
-        #selected-speaker-info p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.88em; font-weight: 500; }
+        .speaker-info h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
+        .speaker-info p { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-tertiary); }
+        .speaker-selector .chevron { margin-right: auto; color: var(--text-tertiary); }
 
-        #change-speaker-btn {
-            display: inline-flex;
+        /* --- Slider --- */
+        .slider-group {
+            display: flex;
             align-items: center;
-            justify-content: center;
-            margin: 0 auto;
-            padding: 10px 20px;
-            border-radius: var(--radius-input);
-            background: linear-gradient(45deg, var(--accent-primary-hover), var(--accent-primary));
-            border: none;
-            color: #fff;
-            cursor: pointer;
-            font-family: var(--app-font); font-weight: 600;
-            font-size: 1em;
-            transition: var(--transition-smooth);
-            box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.35), var(--shadow-subtle);
-        }
-        #change-speaker-btn:hover {
-            background: linear-gradient(45deg, var(--accent-primary), var(--accent-primary-hover));
-            transform: translateY(-3px) scale(1.05);
-            box-shadow: 0 6px 12px -3px rgba(59, 130, 246, 0.45), var(--shadow-medium);
-        }
-        #change-speaker-btn svg {
-            width: 1.1em;
-            height: 1.1em;
-            margin-right: 0.5em;
-            fill: currentColor;
-        }
-
-
-        /* --- مودال عمومی --- */
-        .modal-overlay {
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background-color: rgba(18, 24, 38, 0.6);
-            backdrop-filter: blur(8px) saturate(150%);
-            display: none; /* Hidden by default */
-            align-items: center; justify-content: center;
-            z-index: 1000; opacity: 0;
-            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        .modal-overlay.visible { display: flex; opacity: 1; }
-
-        .modal-dialog {
-            background: var(--panel-bg);
-            padding: 2rem;
-            border-radius: var(--radius-card);
-            width: 90%;
-            max-height: 90vh; /* Ensure modal fits viewport */
-            overflow-y: auto; /* Enable scrolling for content overflow */
-            box-shadow: var(--shadow-strong);
-            border: 1px solid var(--panel-border);
-            opacity: 0; /* For animation */
-            animation-duration: 0.35s;
-            animation-fill-mode: forwards;
-        }
-        .modal-overlay.visible .modal-dialog {
-            animation-name: modalZoomIn;
-        }
-        .modal-overlay.hiding .modal-dialog {
-            animation-name: modalZoomOut;
-        }
-
-
-        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
-        .modal-header h2 { margin: 0; font-size: 1.6em; font-weight: 800; color: var(--accent-primary);}
-        .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition-smooth); line-height: 1; }
-        .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.1); }
-
-
-        /* --- مودال گالری گویندگان (اختصاصی) --- */
-        #speaker-modal .modal-dialog {
-            max-width: 700px;
-        }
-        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem; }
-        @media (min-width: 640px) { #speaker-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
-        .speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; position: relative;}
-        .speaker-card .speaker-visual {
-            border: 3px solid transparent;
-            border-radius: var(--radius-card);
-            overflow: hidden;
-            box-shadow: var(--shadow-subtle);
-            position: relative;
-            background-color: var(--input-bg);
-            transition: var(--transition-bounce);
-            padding: 6px;
-        }
-        .speaker-card:hover .speaker-visual {
-            transform: translateY(-5px) scale(1.06);
-            box-shadow: var(--shadow-medium);
-        }
-        .speaker-card input[type="radio"] { display: none; }
-        .speaker-card img {
-            width: 100%; height: 120px;
-            object-fit: cover; display: block;
-            background-color: #e0e0e0;
-            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            border-radius: calc(var(--radius-card) - 12px);
-        }
-        .speaker-card:hover img { transform: scale(1.12); }
-        .speaker-card .speaker-name { padding: 0.8rem 0.4rem 0.1rem; font-weight: 600; font-size: 0.9em; color: var(--text-secondary); transition: color 0.2s; }
-        .speaker-card input[type="radio"]:checked + .speaker-visual {
-            border-color: var(--accent-secondary);
-            box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.75);
-            background: linear-gradient(135deg, var(--accent-secondary-hover), var(--accent-primary));
-            transform: scale(1.05);
-        }
-        .speaker-card input[type="radio"]:checked + .speaker-visual img {
-            border: 2px solid white;
-            transform: scale(1.05);
-        }
-        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name {
-            color: #fff;
-            font-weight: 700;
-        }
-
-        /* --- مودال اطلاعات (اختصاصی) --- */
-        #info-modal .modal-dialog {
-            max-width: 480px; /* Smaller width for info */
-        }
-        #info-modal-content p {
-            font-size: 1em;
-            line-height: 1.7;
-            color: var(--text-secondary);
-            margin-bottom: 0.5rem;
-        }
-        #info-modal-content p strong {
-            color: var(--text-primary);
-            font-weight: 600;
-        }
-        #info-modal-content .range-info {
-            font-size: 0.9em;
-            color: var(--accent-primary);
-            font-weight: 500;
-            margin-top: 1rem;
-            display: block;
-            text-align: center;
+            gap: 1rem;
         }
-
-
-        /* --- Slider & Button & Output --- */
-        .slider-container { display: flex; align-items: center; gap: 1.2rem; }
         input[type="range"] {
-            flex-grow: 1; -webkit-appearance: none; appearance: none;
-            width: 100%; height: 8px;
-            background: #EAF0F6;
-            border-radius: 4px; outline: none;
+            -webkit-appearance: none; appearance: none;
+            width: 100%; height: 6px;
+            background: var(--bg-input);
+            border-radius: 3px;
+            outline: none;
             cursor: pointer;
-            transition: background 0.2s;
-        }
-        input[type="range"]::-webkit-slider-runnable-track {
-            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
-            height: 8px;
-            border-radius: 4px;
         }
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none; appearance: none;
-            width: 22px; height: 22px;
-            background: #fff;
-            border-radius: 50%; cursor: pointer;
-            border: 3px solid var(--accent-primary);
-            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-            margin-top: -7px;
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
-         input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]:focus::-webkit-slider-thumb {
-            transform: scale(1.2);
-            box-shadow: 0 3px 8px rgba(59, 130, 246, 0.35);
-        }
-        input[type="range"]::-moz-range-thumb {
-            width: 22px; height: 22px;
-            background: #fff;
-            border-radius: 50%; cursor: pointer;
-            border: 3px solid var(--accent-primary);
-            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-        }
-        input[type="range"]::-moz-range-track {
-            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
-            height: 8px;
-            border-radius: 4px;
-            border: none;
-        }
-        #temperature-value {
-            font-weight: 700; background-color: var(--input-bg);
-            padding: 0.5rem 1rem;
-            border-radius: 8px;
-            border: 1px solid var(--panel-border);
-            min-width: 45px; text-align: center;
-            color: var(--accent-primary);
-            font-size: 1em;
-            box-shadow: var(--shadow-subtle);
+            width: 18px; height: 18px;
+            background: var(--accent-primary);
+            border-radius: 50%;
+            border: 3px solid var(--bg-panel);
+            box-shadow: var(--shadow-md);
+            cursor: pointer;
+            margin-top: -6px;
         }
 
-        #generate-btn {
-            width: 100%; padding: 1rem 1.5rem;
-            font-size: 1.25em; font-weight: 800;
-            font-family: var(--app-font);
-            background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
+        /* --- Main Button --- */
+        .btn-primary {
+            width: 100%;
+            padding: 0.8rem 1.5rem;
+            font-size: 1.1rem;
+            font-weight: 700;
+            background: var(--accent-primary);
             color: #fff;
             border: none;
-            border-radius: var(--radius-input);
+            border-radius: var(--radius-md);
             cursor: pointer;
-            transition: var(--transition-smooth), transform 0.15s ease-out;
-            box-shadow: 0 5px 15px -4px rgba(59, 130, 246, 0.45), 0 5px 15px -4px rgba(16, 185, 129, 0.35);
-            position: relative;
-            overflow: hidden;
-            letter-spacing: 0.5px;
-        }
-        #generate-btn::before {
-            content: ''; position: absolute;
-            top: 0; left: -180%; width: 80%; height: 100%;
-            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
-            transform: skewX(-30deg);
-            transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
-        }
-        #generate-btn:hover::before { left: 180%; }
-        #generate-btn:hover:not(:disabled) {
-            transform: translateY(-5px) scale(1.02);
-            box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.55), 0 8px 20px -4px rgba(16, 185, 129, 0.45);
-        }
-        #generate-btn:active:not(:disabled) {
-            transform: translateY(-2px) scale(0.98);
-        }
-        #generate-btn:disabled {
-            background: #B8C2CC;
-            cursor: not-allowed; box-shadow: none; color: #E8EEF3;
-            transform: none;
-        }
-        #generate-btn:disabled::before { display: none; }
-        #generate-btn .button-text {
-            display: inline-block;
-            vertical-align: middle;
-        }
-        #generate-btn svg.spinner {
-             display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em;
-             vertical-align: middle; animation: spin 1s linear infinite;
-        }
-
-
-        /* --- Output Section (now the card container for status/loading/player) --- */
-        #output-section {
-            margin-top: 3rem;
+            transition: var(--transition-fast);
             display: flex;
             align-items: center;
             justify-content: center;
-            flex-direction: column;
-            min-height: 200px;
-            position: relative;
-            box-sizing: border-box;
-            padding: 2rem;
-            background-color: var(--input-bg);
-            border-radius: var(--radius-card);
-            border: 2px dashed var(--panel-border);
-            box-shadow: var(--shadow-subtle) inset;
-            transition: var(--transition-smooth);
-        }
-        #output-section.has-content {
-            background-color: var(--panel-bg);
-            border: 1px solid var(--panel-border);
-            box-shadow: var(--shadow-medium);
-            padding: 0;
-            min-height: auto;
-        }
-        #output-section.has-content #status-message,
-        #output-section.has-content #loading-animation-wrapper {
-            display: none !important;
-        }
-
-        #status-message {
-            font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em;
-            animation: fadeIn 0.5s ease-out;
-        }
-        #status-message.error {
-            color: var(--error-color);
-            font-weight: 600;
-        }
-
-
-        /* --- انیمیشن پردازش --- */
-        #loading-animation-wrapper {
-            display: none;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 1.8rem;
-            width: 100%;
-        }
-        .orbital-loader {
-            width: 110px;
-            height: 110px;
-            position: relative;
-            animation: rotate-loader-orbital 10s linear infinite;
-        }
-        .orbit {
-            position: absolute;
-            top: 50%; left: 50%;
-            border: 2px dashed rgba(59, 130, 246, 0.25);
-            border-radius: 50%;
-            transform-origin: center center;
-        }
-        .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: orbit-spin 2.8s linear infinite reverse; }
-        .orbit:nth-child(2) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; }
-        .orbit:nth-child(3) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; }
-
-        .orbit .satellite {
-            position: absolute;
-            width: 10px; height: 10px;
-            border-radius: 50%;
-            background-color: var(--accent-primary);
-            box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary);
-        }
-        .orbit:nth-child(1) .satellite { top: -5px; left: 50%; animation: satellite-pulse-1 1.4s ease-in-out infinite alternate; }
-        .orbit:nth-child(2) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); animation: satellite-pulse-2 1.4s 0.2s ease-in-out infinite alternate; }
-        .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;}
-
-        @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        @keyframes satellite-pulse-1 {
-            from { transform: scale(0.7) translateX(-50%); opacity: 0.6; }
-            to { transform: scale(1.1) translateX(-50%); opacity: 1; }
-        }
-        @keyframes satellite-pulse-2 {
-            from { transform: scale(0.7) translateY(-50%); opacity: 0.6; }
-            to { transform: scale(1.1) translateY(-50%); opacity: 1; }
-        }
-        @keyframes satellite-pulse-3 {
-            from { transform: scale(0.7) translateX(50%); opacity: 0.6; }
-            to { transform: scale(1.1) translateX(50%); opacity: 1; }
-        }
-        #loading-text {
-            font-size: 1.2em;
-            font-weight: 700;
-            color: var(--text-primary);
-            text-align: center;
-            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            gap: 0.5rem;
         }
-
-        /* --- Custom Audio Player Styles --- */
-        #audio-player-content {
-            display: none;
-            width: 100%;
+        .btn-primary:hover:not(:disabled) { background: var(--accent-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
+        .btn-primary:disabled { background: var(--bg-active); color: var(--text-tertiary); cursor: not-allowed; }
+        .btn-primary .spinner { width: 20px; height: 20px; animation: spin 1s linear infinite; }
+        
+        /* --- Output Panel --- */
+        .output-panel {
             padding: 1.5rem;
-            box-sizing: border-box;
-            flex-direction: column;
-            gap: 1.2rem;
-            animation: fadeIn 0.5s ease-out;
-        }
-
-        .audio-waveform-container {
             display: flex;
-            align-items: center;
-            gap: 1rem;
-            width: 100%;
-            margin-bottom: 1rem;
+            flex-direction: column;
         }
-        .audio-time {
-            font-size: 0.9em;
-            color: var(--text-secondary);
-            min-width: 40px;
-            text-align: center;
-            font-variant-numeric: tabular-nums;
-            user-select: none;
+        @media (min-width: 1024px) {
+            .output-panel { padding: 2rem; }
         }
-
-        .audio-waveform {
+        .output-panel .empty-state {
             flex-grow: 1;
-            height: 60px;
-            position: relative;
-            overflow: hidden;
             display: flex;
-            align-items: center;
+            flex-direction: column;
             justify-content: center;
-            margin-bottom: 0.5rem;
-        }
-
-        #audio-waveform-canvas {
-            display: block;
-            max-width: 100%;
-            height: 100%;
-        }
-
-        .audio-waveform-dashed-line {
-            position: absolute;
-            top: 50%;
-            left: 0;
-            width: 100%;
-            height: 1px;
-            background-image: linear-gradient(to right, var(--waveform-dashed-line-color) 33%, transparent 0%);
-            background-position: center;
-            background-size: 10px 1px;
-            transform: translateY(-50%);
-            z-index: 1;
+            align-items: center;
+            text-align: center;
+            color: var(--text-tertiary);
+            padding: 2rem;
+            border: 2px dashed var(--border-color);
+            border-radius: var(--radius-lg);
+        }
+        .empty-state svg { width: 50px; height: 50px; margin-bottom: 1rem; }
+        .empty-state p { font-size: 1.1rem; font-weight: 500; margin: 0; color: var(--text-secondary); }
+
+        /* --- Player Wrapper --- */
+        #player-wrapper { display: none; /* Shown by JS */ }
+        .player-card {
+            background: var(--bg-input);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-lg);
+            padding: 1.5rem;
+            margin-bottom: 2rem;
         }
-
-        /* Audio Controls */
-        .audio-controls-group {
-            display: flex;
+        .player-waveform { height: 60px; margin-bottom: 1rem; }
+        .player-controls { display: flex; align-items: center; justify-content: space-between; }
+        .player-main-controls { display: flex; align-items: center; gap: 1rem; }
+        .player-btn {
+            background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 0.5rem;
+            border-radius: 50%;
+            display: inline-flex;
             justify-content: center;
             align-items: center;
-            gap: 1.5rem;
-            margin-bottom: 1rem;
-        }
-        .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn, .audio-speed-btn {
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 8px;
-            transition: transform 0.2s, opacity 0.2s;
-        }
-        .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn {
+            transition: var(--transition-fast);
+        }
+        .player-btn:hover { background-color: var(--bg-active); color: var(--text-primary); }
+        .player-btn.play-pause { width: 48px; height: 48px; background-color: var(--accent-primary); color: white; }
+        .player-btn.play-pause:hover { background-color: var(--accent-primary-hover); }
+        .player-btn svg { width: 24px; height: 24px; }
+        .player-btn.play-pause svg { width: 28px; height: 28px; }
+        .player-time { font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
+        .player-extra-controls { display: flex; align-items: center; gap: 0.75rem; }
+        .player-speed-btn, .player-download-btn {
+            font-size: 0.9rem;
+            font-weight: 600;
             color: var(--text-secondary);
-        }
-        .audio-skip-btn:hover, .audio-play-pause-btn-large:hover, .audio-volume-btn:hover {
-            opacity: 0.8;
-        }
-        .audio-skip-btn:active, .audio-play-pause-btn-large:active, .audio-volume-btn:active {
-            transform: scale(0.9);
-        }
-        .audio-skip-btn svg {
-            width: 28px;
-            height: 28px;
-            fill: currentColor;
-        }
-        .audio-play-pause-btn-large {
-            padding: 0;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            background-color: var(--accent-primary);
-            color: white;
-            box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.35);
-        }
-        .audio-play-pause-btn-large:hover {
-            background-color: var(--accent-primary-hover);
-            transform: translateY(-2px) scale(1.05);
-        }
-        .audio-play-pause-btn-large svg {
-            width: 38px;
-            height: 38px;
-            fill: currentColor;
-        }
-
-        .audio-utility-controls {
+            background-color: var(--bg-hover);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-sm);
+            padding: 0.25rem 0.75rem;
+        }
+
+        /* --- History Section --- */
+        #history-wrapper {
+             overflow-y: auto;
+             flex-grow: 1;
+             padding-right: 0.5rem; /* For scrollbar */
+             margin-right: -0.5rem;
+        }
+        .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
+        .history-header h2 { font-size: 1.2rem; font-weight: 700; margin: 0; }
+        #clear-history-btn { font-size: 0.8rem; color: var(--text-tertiary); background: none; border: none; cursor: pointer; }
+        #history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
+        .history-item {
             display: flex;
             align-items: center;
-            justify-content: space-between;
-            width: 100%;
+            padding: 0.75rem 1rem;
+            background-color: var(--bg-panel);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            transition: var(--transition-fast);
+            cursor: pointer;
         }
-        .audio-volume-btn svg {
-            width: 24px;
-            height: 24px;
-            fill: currentColor;
+        .history-item:hover { background-color: var(--bg-hover); border-color: color-mix(in srgb, var(--accent-primary) 20%, var(--border-color)); }
+        .history-item.playing { border-color: var(--accent-secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-secondary) 20%, transparent); }
+        .history-item .play-icon { color: var(--accent-primary); margin-left: 1rem; }
+        .history-item-info { flex-grow: 1; }
+        .history-item-info p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
+        .history-item-info .text { font-size: 0.9rem; font-weight: 500; }
+        .history-item-info .meta { font-size: 0.75rem; color: var(--text-tertiary); }
+        .history-item-actions { display: flex; gap: 0.5rem; margin-right: 1rem; }
+        .history-item-actions button { background: none; border: none; cursor: pointer; color: var(--text-tertiary); padding: 0.25rem; }
+        .history-item-actions button:hover { color: var(--text-primary); }
+        .history-item-actions svg { width: 18px; height: 18px; }
+
+        /* --- Modals --- */
+        .modal-overlay {
+            position: fixed; inset: 0;
+            background-color: rgba(18, 24, 38, 0.8);
+            backdrop-filter: blur(5px);
+            display: flex;
+            align-items: center; justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s, visibility 0.3s;
         }
-        .audio-speed-btn {
-            font-family: var(--app-font);
-            font-size: 0.9em;
-            font-weight: 600;
-            background-color: var(--panel-bg);
-            border: 1px solid var(--panel-border);
-            border-radius: 8px;
-            min-width: 40px;
+        .modal-overlay.visible { opacity: 1; visibility: visible; }
+        .modal-dialog {
+            background: var(--bg-panel);
+            padding: 1.5rem;
+            border-radius: var(--radius-lg);
+            width: 90%;
+            max-width: 600px;
+            box-shadow: var(--shadow-lg);
+            animation: modal-enter 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+            display: flex;
+            flex-direction: column;
+            max-height: 85vh;
+        }
+        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
+        .modal-header h2 { margin: 0; font-size: 1.25rem; }
+        .modal-close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-tertiary); transition: var(--transition-fast); }
+        .modal-close-btn:hover { color: var(--text-primary); transform: rotate(90deg); }
+        #speaker-modal-search { margin-bottom: 1.5rem; }
+        .modal-content { overflow-y: auto; padding-right: 0.5rem; margin-right: -0.5rem; }
+        .speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; }
+        .speaker-card {
+            border: 2px solid var(--border-color);
+            border-radius: var(--radius-md);
+            padding: 0.5rem;
             text-align: center;
+            cursor: pointer;
+            transition: var(--transition-fast);
+        }
+        .speaker-card:hover { border-color: var(--accent-primary); transform: translateY(-3px); }
+        .speaker-card.selected { border-color: var(--accent-secondary); background-color: color-mix(in srgb, var(--accent-secondary) 10%, transparent); }
+        .speaker-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin: 0.5rem auto; }
+        .speaker-card .name { font-weight: 600; font-size: 0.9rem; }
+        .speaker-card .desc { font-size: 0.75rem; color: var(--text-secondary); }
+
+        /* Toast Notifications */
+        #toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 0.5rem; }
+        .toast {
+            padding: 0.75rem 1.25rem;
+            background-color: var(--bg-panel);
             color: var(--text-primary);
-            box-shadow: var(--shadow-subtle);
-            padding: 5px 12px;
-        }
-        .audio-speed-btn:hover {
-            background-color: var(--input-bg);
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-medium);
-        }
-
-        #hidden-audio-player { display: none !important; }
-
-        /* Responsive adjustments for mobile */
-        @media (max-width: 600px) {
-            .container {
-                width: 95%;
-            }
-            .main-content {
-                padding: 1.5rem;
-            }
-            .app-header h1 {
-                font-size: 1.8em;
-            }
-            #audio-player-content {
-                padding: 1rem;
-                gap: 0.8rem;
-            }
-            .audio-waveform-container {
-                gap: 0.5rem;
-            }
-            .audio-time {
-                font-size: 0.85em;
-                min-width: 35px;
-            }
-            .audio-skip-btn svg {
-                width: 24px;
-                height: 24px;
-            }
-            .audio-play-pause-btn-large {
-                width: 44px;
-                height: 44px;
-            }
-            .audio-play-pause-btn-large svg {
-                width: 32px;
-                height: 32px;
-            }
-            .audio-controls-group {
-                gap: 1rem;
-            }
-            .audio-volume-btn svg {
-                width: 20px;
-                height: 20px;
-            }
-            .audio-speed-btn {
-                font-size: 0.8em;
-                padding: 5px 10px;
-            }
-            #selected-speaker-card {
-                flex-direction: column;
-                padding: 1.2rem 1rem;
-                max-width: none;
-                margin-bottom: 1rem;
-            }
-            #selected-speaker-card img {
-                margin: 0 0 10px 0;
-            }
-            #selected-speaker-info {
-                text-align: center;
-            }
-        }
+            border-radius: var(--radius-md);
+            box-shadow: var(--shadow-lg);
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            animation: toast-enter 0.4s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+            border: 1px solid var(--border-color);
+            border-left: 4px solid;
+        }
+        .toast.success { border-left-color: var(--accent-secondary); }
+        .toast.error { border-left-color: var(--accent-danger); }
+        .toast-icon { font-size: 1.2rem; }
     </style>
 </head>
 <body>
-    <div class="container">
-        <header class="app-header">
-            <div class="credits-display" aria-label="اعتبار باقیمانده شما">
-                <svg viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm.293 15.293a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414L13 14.586V7a1 1 0 00-2 0v7.586l-2.293-2.293a1 1 0 00-1.414 1.414l4 4z"></path>
-                </svg>
-                <span id="credits-left">10,000</span> کاراکتر باقی‌مانده
-            </div>
-            <h1>تبدیل متن به صدا با هوش مصنوعی آلفا پرو</h1>
-            <p>صدایی نو، تجربه‌ای نوین در تبدیل متن به گفتار با هوش مصنوعی پیشرفته برای کاربران ویژه.</p>
-        </header>
 
-        <main class="main-content">
+    <div class="app-container">
+        <!-- Input Panel -->
+        <div class="panel input-panel">
+            <header class="app-header">
+                <div>
+                    <h1>Alpha TTS Pro</h1>
+                    <span>نسل جدید تبدیل متن به صدا</span>
+                </div>
+                <label class="theme-switch" title="تغییر تم">
+                    <input type="checkbox" id="theme-toggle-cb">
+                    <span class="slider"></span>
+                </label>
+            </header>
+
             <form id="tts-form">
                 <div class="form-group">
-                    <label for="text-input">📝 متن مورد نظر شما</label>
-                    <textarea id="text-input" rows="4" placeholder="متن خود را اینجا وارد کنید..." aria-required="true"></textarea>
-                    <div class="char-counter-wrapper">
-                        <span id="char-count">0</span> / <span id="char-max">5000</span> نویسه
-                        <span id="char-error-message" style="display:none; color:var(--error-color); margin-right: 10px;"></span>
-                    </div>
+                    <label for="text-input">متن اصلی</label>
+                    <textarea id="text-input" rows="5" placeholder="متن خود را برای تبدیل به صدا اینجا وارد کنید..."></textarea>
                 </div>
+
                 <div class="form-group">
-                    <label for="prompt-input">🗣️ توصیف سبک و لحن گفتار (اختیاری)</label>
-                    <input type="text" id="prompt-input" placeholder="مثال: با لحنی رسمی و موقر، یا شاد و کودکانه" aria-describedby="prompt-info">
-                    <small id="prompt-info" style="display: block; margin-top: 5px; color: var(--text-secondary); font-size: 0.85em;">این ویژگی به هوش مصنوعی کمک می‌کند تا لحن دقیق‌تری ایجاد کند.</small>
+                    <label for="prompt-input">توصیف لحن (اختیاری)</label>
+                    <input type="text" id="prompt-input" placeholder="مثال: شاد، پرانرژی، آرام، قصه‌گو">
                 </div>
 
                 <div class="form-group">
-                    <label>🎤 انتخاب گوینده حرفه‌ای</label>
-                    <div id="selected-speaker-display">
-                        <div id="selected-speaker-card" role="button" tabindex="0" aria-label="برای تغییر گوینده کلیک کنید">
-                            <img id="selected-speaker-img" src="" alt="عکس گوینده" loading="lazy">
-                            <div id="selected-speaker-info">
-                                <h3 id="selected-speaker-name"></h3>
-                                <p id="selected-speaker-desc">گوینده پیش‌فرض</p>
-                            </div>
+                    <label>گوینده</label>
+                    <div id="speaker-selector-trigger" class="speaker-selector">
+                        <img id="selected-speaker-img" src="" alt="عکس گوینده">
+                        <div class="speaker-info">
+                            <h3 id="selected-speaker-name"></h3>
+                            <p id="selected-speaker-desc"></p>
                         </div>
-                        <button type="button" id="change-speaker-btn">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                                <path d="M12 2.5a5.5 5.5 0 0 1 5.5 5.5c0 1.826-.889 3.442-2.257 4.494.04.054.082.106.126.158A7.5 7.5 0 0 1 21.75 18H2.25a7.5 7.5 0 0 1 6.381-5.348c.044-.052.087-.104.127-.158A5.502 5.502 0 0 1 6.5 8a5.5 5.5 0 0 1 5.5-5.5Zm3.018 9.589A7.502 7.502 0 0 0 12 11.5a7.502 7.502 0 0 0-3.018.589C6.44 12.51 5.018 13.56 4.135 14.997a.75.75 0 0 0 .614.853A10.51 10.51 0 0 0 12 16.5a10.51 10.51 0 0 0 7.251-.65.75.75 0 0 0 .614-.853 9.998 9.998 0 0 0-4.847-2.408Z" />
-                              </svg>
-                            تغییر گوینده
-                        </button>
+                        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
+                            <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd" />
+                        </svg>
                     </div>
                 </div>
 
                 <div class="form-group">
-                    <div class="label-with-info">
-                        <label for="temperature-slider">🌡️ میزان خلاقیت و نوآوری صدا</label>
-                        <div class="info-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر درباره خلاقیت صدا">!
-                        </div>
-                    </div>
-                    <div class="slider-container">
-                        <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9" aria-valuemin="0.1" aria-valuemax="1.5" aria-valuenow="0.9" aria-label="تنظیم میزان خلاقیت صدا">
+                    <label for="temperature-slider">خلاقیت صدا (Temperature)</label>
+                    <div class="slider-group">
+                        <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
                         <span id="temperature-value">0.9</span>
                     </div>
                 </div>
 
-                <button type="submit" id="generate-btn">
-                    <span class="button-text">✨ تولید صدا با آلفا</span>
+                <button type="submit" id="generate-btn" class="btn-primary">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" /></svg>
+                    <span>تولید صدا</span>
                 </button>
             </form>
+        </div>
 
-            <div id="output-section" aria-live="polite">
-                <div id="status-message">صدای تولید شده در اینجا نمایش داده خواهد شد.</div>
-                <div id="loading-animation-wrapper">
-                     <div class="orbital-loader">
-                        <div class="orbit"><div class="satellite"></div></div>
-                        <div class="orbit"><div class="satellite"></div></div>
-                        <div class="orbit"><div class="satellite"></div></div>
+        <!-- Output Panel -->
+        <div class="panel output-panel">
+            <div id="player-wrapper">
+                <div class="player-card">
+                    <div id="player-waveform" class="player-waveform">
+                        <canvas id="waveform-canvas"></canvas>
                     </div>
-                    <p id="loading-text">در حال پردازش هوشمند و تولید صدا...</p>
-                </div>
-
-                <!-- Custom Audio Player Structure -->
-                <div id="audio-player-content">
-                    <div class="audio-waveform-container">
-                        <span class="audio-time audio-current-time">0:00</span>
-                        <div class="audio-waveform" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="پیشرفت پخش صدا">
-                            <canvas id="audio-waveform-canvas"></canvas>
-                            <div class="audio-waveform-dashed-line"></div>
+                    <div class="player-controls">
+                        <div class="player-main-controls">
+                            <button class="player-btn" id="player-skip-backward-btn" title="۵ ثانیه به عقب">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M10.26,8.35L8,10.61v2.78l2.26,2.26C11.13,16.5,12,16.09,12,15.14V8.86C12,7.91,11.13,7.5,10.26,8.35ZM18,9h-5v6h5v-2h-3v-1h3V9Z"/></svg>
+                            </button>
+                            <button class="player-btn play-pause" id="player-play-pause-btn" title="پخش/توقف">
+                                <svg class="play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.14v14l11-7-11-7z" /></svg>
+                                <svg class="pause-icon" style="display:none;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></svg>
+                            </button>
+                            <button class="player-btn" id="player-skip-forward-btn" title="۵ ثانیه به جلو">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M14,15.14v-6.28C14,7.91,13.13,7.5,12.26,8.35L10,10.61v2.78l2.26,2.26C13.13,16.5,14,16.09,14,15.14ZM7,9H2V15H7V13H4V12H7V11H4V10H7V9Z"/></svg>
+                            </button>
+                        </div>
+                        <span id="player-time" class="player-time">0:00 / 0:00</span>
+                        <div class="player-extra-controls">
+                            <button class="player-speed-btn" id="player-speed-btn">1x</button>
+                            <a href="#" class="player-btn player-download-btn" id="player-download-btn" download title="دانلود فایل">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><path d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z" /><path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" /></svg>
+                            </a>
                         </div>
-                        <span class="audio-time audio-total-time">0:00</span>
-                    </div>
-
-                    <div class="audio-controls-group">
-                        <button class="audio-skip-btn backward" aria-label="5 ثانیه به عقب">
-                            <svg viewBox="0 0 24 24" width="24" height="24"><path d="M11 16V8l-4 4 4 4zm4-12v16l7-8-7-8z"></path></svg>
-                        </button>
-                        <button class="audio-play-pause-btn-large" aria-label="پخش/مکث">
-                            <svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg>
-                            <svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
-                        </button>
-                        <button class="audio-skip-btn forward" aria-label="5 ثانیه به جلو">
-                            <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13 16V8l4 4-4 4zM9 4v16L2 12l7-8z"></path></svg>
-                        </button>
-                    </div>
-
-                    <div class="audio-utility-controls">
-                        <button class="audio-volume-btn" aria-label="بی‌صدا کردن/فعال کردن صدا">
-                            <svg viewBox="0 0 24 24" class="volume-high-icon"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></svg>
-                            <svg viewBox="0 0 24 24" class="volume-mute-icon" style="display:none;"><path d="M7 9v6h4l5 5V4L11 9H7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zM19 12c0 .94-.23 1.82-.68 2.6L19 14.88c.45-.88.7-1.88.7-2.88 0-4.01-2.99-7.14-7-8.05v2.06c2.89.86 5 3.54 5 6.71zM4.55 4L2 6.55 9.45 14H7v6h4l5 5V14.55l4.05 4.05L22 18 12 8 4.55 4z"></path></svg>
-                        </button>
-                        <button class="audio-speed-btn" aria-label="تغییر سرعت پخش">1x</button>
                     </div>
                 </div>
-                <audio id="hidden-audio-player" preload="auto"></audio>
             </div>
-        </main>
-    </div>
 
-    <!-- مودال گالری گویندگان -->
-    <div id="speaker-modal" class="modal-overlay">
-        <div class="modal-dialog">
-            <div class="modal-header">
-                <h2>گالری گویندگان آلفا پرو</h2>
-                <button type="button" class="close-modal-btn" data-modal-id="speaker-modal" aria-label="بستن گالری گویندگان">×</button>
+            <div id="history-wrapper">
+                 <div class="history-header">
+                    <h2>تاریخچه</h2>
+                    <button id="clear-history-btn" title="پاک کردن تاریخچه">پاک کردن همه</button>
+                </div>
+                <ul id="history-list">
+                    <!-- History items will be populated here -->
+                </ul>
             </div>
-            <div id="speaker-grid">
-                <!-- Speaker cards will be generated here by JS -->
+            
+            <div id="output-empty-state" class="empty-state">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a.75.75 0 00.75-.75V6.31L16.31 9.4a.75.75 0 001.06-1.06l-4.25-4.25a.75.75 0 00-1.06 0L7.81 8.34a.75.75 0 001.06 1.06L12 6.31v11.69c0 .414.336.75.75.75z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5a9.75 9.75 0 11-19.5 0 9.75 9.75 0 0119.5 0z" />
+                </svg>
+                <p>خروجی صدا و تاریخچه در اینجا نمایش داده می‌شود.</p>
             </div>
         </div>
     </div>
-
-    <!-- مودال اطلاعات خلاقیت صدا -->
-    <div id="info-modal" class="modal-overlay">
+    
+    <!-- Speaker Selection Modal -->
+    <div id="speaker-modal" class="modal-overlay">
         <div class="modal-dialog">
             <div class="modal-header">
-                <h2>🌡️ خلاقیت و نوآوری صدا</h2>
-                <button type="button" class="close-modal-btn" data-modal-id="info-modal" aria-label="بستن توضیحات">×</button>
+                <h2>انتخاب گوینده</h2>
+                <button class="modal-close-btn" data-modal-id="speaker-modal">×</button>
             </div>
-            <div id="info-modal-content">
-                <p>این تنظیم مشخص می‌کند که هوش مصنوعی تا چه حد در تولید صدا <strong>خلاقیت</strong> به خرج دهد.</p>
-                <p><strong>مقادیر بالاتر (مثلاً ۱.۰ تا ۱.۵):</strong> منجر به صدایی متنوع‌تر، پویاتر و گاهی اوقات غیرمنتظره‌تر می‌شود. مناسب برای زمانی که به دنبال لحنی خاص و منحصربه‌فرد هستید.</p>
-                <p><strong>مقادیر پایین‌تر (مثلاً ۰.۱ تا ۰.۵):</strong> صدایی پایدارتر، قابل پیش‌بینی‌تر و نزدیک‌تر به صدای استاندارد گوینده تولید می‌کند. مناسب برای خوانش متون رسمی یا زمانی که ثبات لحن اهمیت دارد.</p>
-                <span class="range-info">محدوده پیشنهادی: ۰.۱ (پایدار) تا ۱.۵ (بسیار خلاق)</span>
+            <input type="text" id="speaker-modal-search" placeholder="جستجوی گوینده..." style="margin-bottom: 1.5rem;">
+            <div class="modal-content">
+                <div id="speaker-grid" class="speaker-grid">
+                    <!-- Speaker cards will be generated here -->
+                </div>
             </div>
         </div>
     </div>
 
-
+    <div id="toast-container"></div>
+    <audio id="hidden-audio-player" style="display: none;"></audio>
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
 
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // --- CONSTANTS & DOM ELEMENTS ---
-            const MAX_CHARS = 5000; // Reduced max chars for a "paid" tier, adjust as needed
-            const speakers = [
-                { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرتمند و رسا", gender: "men" },
-                { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین", gender: "women" },
-                { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی", gender: "men" },
-                { id: "Zubenelgenubi", name: "رویا (زن)", desc: "گرم و صمیمی", gender: "women" },
-                { id: "Vindemiatrix", name: "کیان (مرد)", desc: "باوقار و رسمی", gender: "men" },
-                { id: "Sadachbia", name: "پریسا (زن)", desc: "شاداب و پویا", gender: "women" },
-                { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار", gender: "men" },
-                { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین", gender: "women" },
-                { id: "Laomedeia", name: "سهیل (مرد)", desc: "دوستانه و گیرا", gender: "men" },
-                { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح", gender: "women" },
-                { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ", gender: "men" },
-                { id: "Schedar", name: "نگار (زن)", desc: "مهربان و شیرین", gender: "women" },
-                { id: "Gacrux", name: "فرید (مرد)", desc: "پخته و قابل اعتماد", gender: "men" },
-                { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن", gender: "women" },
-                { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت", gender: "men" },
-                { id: "Algieba", name: "آناهیتا (زن)", desc: "با اصالت و شیک", gender: "women" },
-                { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی", gender: "women" },
-                { id: "Erinome", name: "رسا (مرد)", desc: "شفاف و گویا", gender: "men" },
-                { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت", gender: "men" },
-                { id: "Rasalthgeti", name: "الهه (زن)", desc: "اسرارآمیز و فریبنده", gender: "women" },
-                { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان", gender: "men" },
-                { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ", gender: "women" },
-                { id: "Callirrhoe", name: "نیما (مرد)", desc: "روایتگر و قصه‌گو", gender: "men" },
-                { id: "Autonoe", name: "هستی (زن)", "desc": "طبیعی و خودمانی", gender: "women" },
-                { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی", gender: "men" },
-                { id: "Iapetus", name: "ستاره (زن)", desc: "درخشان و گیرا", gender: "women" },
-                { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده", gender: "men" },
-                { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش", gender: "women" },
-                { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک", gender: "men" },
-                { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار", gender: "women" }
+            // --- CONFIGURATION ---
+            const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
+            const FN_INDEX = 1;
+            const SPEAKERS = [
+                { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرتمند و رسا" },
+                { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین" },
+                { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی" },
+                { id: "Zubenelgenubi", name: "رویا (زن)", desc: "گرم و صمیمی" },
+                { id: "Vindemiatrix", name: "کیان (مرد)", desc: "باوقار و رسمی" },
+                { id: "Sadachbia", name: "پریسا (زن)", desc: "شاداب و پویا" },
+                { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار" },
+                { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین" }
+                // Add all other speakers here...
             ];
-
-            const form = document.getElementById('tts-form');
-            const textInput = document.getElementById('text-input');
-            const promptInput = document.getElementById('prompt-input');
-            const tempSlider = document.getElementById('temperature-slider');
-            const tempValueSpan = document.getElementById('temperature-value');
-            const generateBtn = document.getElementById('generate-btn');
-            const generateButtonText = generateBtn.querySelector('.button-text');
-
-            const outputSection = document.getElementById('output-section');
-            const statusMessage = document.getElementById('status-message');
-            const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper');
-
-            const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
-            const changeSpeakerBtn = document.getElementById('change-speaker-btn');
-            const selectedSpeakerCard = document.getElementById('selected-speaker-card');
-            const speakerGridInModal = document.getElementById('speaker-grid');
-            const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img');
-            const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name');
-            const selectedSpeakerDescDisplay = document.getElementById('selected-speaker-desc');
-
-            // Modal Elements
-            const speakerModal = document.getElementById('speaker-modal');
-            const infoModal = document.getElementById('info-modal');
-            const tempInfoIcon = document.getElementById('temp-info-icon');
-
-            // --- Custom Audio Player Elements ---
-            const hiddenAudioPlayer = document.getElementById('hidden-audio-player');
-            const audioPlayerContent = document.getElementById('audio-player-content');
-            const audioCurrentTimeSpan = audioPlayerContent.querySelector('.audio-current-time');
-            const audioTotalTimeSpan = audioPlayerContent.querySelector('.audio-total-time');
-            const audioWaveformCanvas = document.getElementById('audio-waveform-canvas');
-            const waveformCtx = audioWaveformCanvas.getContext('2d');
-            const playPauseBtn = audioPlayerContent.querySelector('.audio-play-pause-btn-large');
-            const playIcon = playPauseBtn.querySelector('.play-icon');
-            const pauseIcon = playPauseBtn.querySelector('.pause-icon');
-            const skipBackwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.backward');
-            const skipForwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.forward');
-            const volumeBtn = audioPlayerContent.querySelector('.audio-volume-btn');
-            const volumeHighIcon = volumeBtn.querySelector('.volume-high-icon');
-            const volumeMuteIcon = volumeBtn.querySelector('.volume-mute-icon');
-            const speedBtn = audioPlayerContent.querySelector('.audio-speed-btn');
-
-            const playbackSpeeds = [1.0, 1.25, 1.5, 0.75]; // Adjusted speeds as common values
-            let currentPlaybackSpeedIndex = 0;
-            let audioPeaks = []; // Stores calculated peaks for waveform
-            let audioContext = null; // Will be initialized when needed for waveform
-            let audioBufferCache = null; // Cache for the decoded audio buffer
-
-            // Character Counter
-            const charCountSpan = document.getElementById('char-count');
-            const charMaxSpan = document.getElementById('char-max');
-            const charErrorMessage = document.getElementById('char-error-message');
-            charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR');
-
-            // Credits Display (Placeholder)
-            const creditsLeftSpan = document.getElementById('credits-left');
-            let currentCredits = 10000; // Initial mock credits
-            creditsLeftSpan.textContent = currentCredits.toLocaleString('fa-IR');
-
-
-            // --- HELPER FUNCTIONS ---
-
-            function formatTime(seconds) {
-                if (isNaN(seconds) || seconds < 0) return '0:00';
-                const minutes = Math.floor(seconds / 60);
-                const remainingSeconds = Math.floor(seconds % 60);
-                return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
-            }
-
-            function getSpeakerById(id) {
-                return speakers.find(s => s.id === id) || speakers[0];
-            }
-
-            // Uses randomuser.me for diverse, consistent placeholder images
-            function getImageUrl(speaker, size = 'thumb') {
-                const seed = speaker.id.charCodeAt(0) + speaker.id.length; // Simple seed
-                const genderPath = speaker.gender === 'men' ? 'men' : 'women';
-                const imageIndex = (seed % 100) + 1; // Ensure index is 1-100
-                const sizePath = size === 'thumb' ? 'thumb/' : '';
-                return `https://randomuser.me/api/portraits/${sizePath}${genderPath}/${imageIndex}.jpg`;
-            }
-
-            function updateSelectedSpeakerDisplay(speakerId) {
-                const speaker = getSpeakerById(speakerId);
-                selectedSpeakerImgDisplay.src = getImageUrl(speaker, 'large');
-                selectedSpeakerImgDisplay.alt = `عکس گوینده ${speaker.name}`;
-                selectedSpeakerNameDisplay.textContent = speaker.name;
-                selectedSpeakerDescDisplay.textContent = speaker.desc || "گوینده منتخب شما";
-                selectedSpeakerIdStorage.value = speaker.id;
-            }
-
-            function createSpeakerCardsInModal() {
-                speakerGridInModal.innerHTML = '';
-                speakers.forEach((speaker) => {
-                    const cardLabel = document.createElement('label');
-                    cardLabel.className = 'speaker-card';
-                    cardLabel.setAttribute('for', `modal-speaker-${speaker.id}`);
-                    const isChecked = speaker.id === selectedSpeakerIdStorage.value ? 'checked' : '';
-                    cardLabel.innerHTML = `
-                        <input type="radio" name="modal_speaker_selection" value="${speaker.id}" id="modal-speaker-${speaker.id}" ${isChecked}>
-                        <div class="speaker-visual">
-                            <img src="${getImageUrl(speaker, 'thumb')}" alt="${speaker.name}" loading="lazy">
-                            <div class="speaker-name">${speaker.name}</div>
-                        </div>
-                    `;
-                    // Attach click listener to the label itself, which implicitly selects the radio
-                    cardLabel.addEventListener('click', () => {
-                        updateSelectedSpeakerDisplay(speaker.id);
-                        hideModal(speakerModal);
-                    });
-                    speakerGridInModal.appendChild(cardLabel);
-                });
-            }
-
-            // --- MODAL MANAGEMENT ---
-            function showModal(modalElement) {
-                modalElement.classList.add('visible');
-                // Set focus to the first focusable element for accessibility
-                setTimeout(() => {
-                     const firstFocusable = modalElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                     if (firstFocusable) firstFocusable.focus();
-                }, 50);
-            }
-
-            function hideModal(modalElement) {
-                modalElement.classList.add('hiding');
-                modalElement.addEventListener('animationend', () => {
-                    modalElement.classList.remove('visible', 'hiding');
-                }, { once: true });
+            const MAX_TEXT_LENGTH = 50000;
+            const PLAYBACK_SPEEDS = [1.0, 1.25, 1.5, 0.75];
+
+            // --- API URLS ---
+            const JOIN_QUEUE_URL = `${HF_SPACE_URL}/gradio_api/queue/join`;
+            const GET_DATA_URL_BASE = `${HF_SPACE_URL}/gradio_api/queue/data`;
+            const FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
+
+            // --- APPLICATION STATE & DOM ELEMENTS ---
+            const app = {
+                dom: {},
+                state: {
+                    isLoading: false,
+                    currentTheme: 'light',
+                    history: [],
+                    currentAudio: null, // { id, url, text, speakerId, timestamp }
+                    selectedSpeakerId: 'Charon',
+                    currentPlaybackSpeedIndex: 0
+                },
+                
+                // ... (app methods will be defined below)
+            };
+
+            // --- DOM ELEMENT CACHING ---
+            function cacheDOMElements() {
+                const D = {};
+                D.html = document.documentElement;
+                D.form = document.getElementById('tts-form');
+                D.textInput = document.getElementById('text-input');
+                D.promptInput = document.getElementById('prompt-input');
+                D.tempSlider = document.getElementById('temperature-slider');
+                D.tempValue = document.getElementById('temperature-value');
+                D.generateBtn = document.getElementById('generate-btn');
+                D.generateBtnText = D.generateBtn.querySelector('span');
+                
+                // Theme Toggle
+                D.themeToggle = document.getElementById('theme-toggle-cb');
+
+                // Speaker Selector
+                D.speakerSelectorTrigger = document.getElementById('speaker-selector-trigger');
+                D.selectedSpeakerImg = document.getElementById('selected-speaker-img');
+                D.selectedSpeakerName = document.getElementById('selected-speaker-name');
+                D.selectedSpeakerDesc = document.getElementById('selected-speaker-desc');
+                D.speakerModal = document.getElementById('speaker-modal');
+                D.speakerGrid = document.getElementById('speaker-grid');
+                D.speakerSearch = document.getElementById('speaker-modal-search');
+                
+                // Output & Player
+                D.outputEmptyState = document.getElementById('output-empty-state');
+                D.playerWrapper = document.getElementById('player-wrapper');
+                D.hiddenAudioPlayer = document.getElementById('hidden-audio-player');
+                D.waveformCanvas = document.getElementById('waveform-canvas');
+                D.playPauseBtn = document.getElementById('player-play-pause-btn');
+                D.playIcon = D.playPauseBtn.querySelector('.play-icon');
+                D.pauseIcon = D.playPauseBtn.querySelector('.pause-icon');
+                D.skipBackwardBtn = document.getElementById('player-skip-backward-btn');
+                D.skipForwardBtn = document.getElementById('player-skip-forward-btn');
+                D.playerTime = document.getElementById('player-time');
+                D.speedBtn = document.getElementById('player-speed-btn');
+                D.downloadBtn = document.getElementById('player-download-btn');
+                
+                // History
+                D.historyWrapper = document.getElementById('history-wrapper');
+                D.historyList = document.getElementById('history-list');
+                D.clearHistoryBtn = document.getElementById('clear-history-btn');
+
+                // Misc
+                D.toastContainer = document.getElementById('toast-container');
+                D.speakerIdStorage = document.getElementById('selected_speaker_id_storage');
+
+                app.dom = D;
+                app.dom.waveformCtx = D.waveformCanvas.getContext('2d');
             }
-
-            // --- AUDIO PLAYER VISUALIZATION (WAVEFORM) ---
-
-            // Function to draw waveform on canvas
-            function drawWaveform(progressRatio = 0) {
-                if (!audioWaveformCanvas || !waveformCtx) return;
-
-                const dpr = window.devicePixelRatio || 1; // Get device pixel ratio
-                const canvasWidth = audioWaveformCanvas.offsetWidth * dpr;
-                const canvasHeight = audioWaveformCanvas.offsetHeight * dpr;
-
-                audioWaveformCanvas.width = canvasWidth;
-                audioWaveformCanvas.height = canvasHeight;
-
-                waveformCtx.clearRect(0, 0, canvasWidth, canvasHeight); // Clear canvas
-
-                if (audioPeaks.length === 0) return; // No peaks to draw
-
-                const barWidth = 3 * dpr;
-                const barGap = 2 * dpr;
-                const totalBarAndGap = barWidth + barGap;
-                const numBars = Math.floor(canvasWidth / totalBarAndGap);
-                const offset = (canvasWidth - (numBars * totalBarAndGap)) / 2; // Center bars
-
-                const activeBars = Math.floor(progressRatio * numBars);
-
-                for (let i = 0; i < numBars; i++) {
-                    const peakIndex = Math.floor((i / numBars) * audioPeaks.length);
-                    const peak = audioPeaks[peakIndex] || 0;
-                    const barHeight = peak * canvasHeight * 0.9; // Scale height slightly to prevent touching edges
-
-                    waveformCtx.fillStyle = i < activeBars ?
-                                              getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-active').trim() :
-                                              getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-inactive').trim();
-
-                    const x = offset + i * totalBarAndGap;
-                    const y = (canvasHeight - barHeight) / 2; // Center vertically
-
-                    waveformCtx.fillRect(x, y, barWidth, barHeight);
+            
+            // --- UTILITY FUNCTIONS ---
+            const utils = {
+                getImageUrl: (speaker, index) => {
+                    const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
+                    const imageSeed = speaker.id.charCodeAt(0) + speaker.id.length + index;
+                    const imageIndex = (imageSeed * 13 + 7) % 100;
+                    return `https://randomuser.me/api/portraits/thumb/${gender}/${imageIndex}.jpg`;
+                },
+                getSpeakerById: (id) => SPEAKERS.find(s => s.id === id) || SPEAKERS[0],
+                formatTime: (seconds) => {
+                    if (isNaN(seconds) || seconds < 0) return '0:00';
+                    const minutes = Math.floor(seconds / 60);
+                    const remainingSeconds = Math.floor(seconds % 60);
+                    return `${minutes}:${String(remainingSeconds).padStart(2, '0')}`;
+                },
+                showToast: (message, type = 'success') => {
+                    const toast = document.createElement('div');
+                    toast.className = `toast ${type}`;
+                    toast.innerHTML = `<span class="toast-icon">${type === 'success' ? '✅' : '❌'}</span><span>${message}</span>`;
+                    app.dom.toastContainer.appendChild(toast);
+                    setTimeout(() => toast.remove(), 4000);
                 }
-            }
-
-            // Process audio data for waveform visualization
-            async function processAudioForWaveform(audioBuffer) {
-                if (!audioBuffer) {
-                    audioPeaks = [];
-                    return;
-                }
-
-                // Get mono audio data (or average stereo if available)
-                const channelData = audioBuffer.numberOfChannels > 0 ? audioBuffer.getChannelData(0) : [];
-                if (audioBuffer.numberOfChannels > 1) {
-                    const channelData2 = audioBuffer.getChannelData(1);
-                    for (let i = 0; i < channelData.length; i++) {
-                        channelData[i] = (channelData[i] + channelData2[i]) / 2;
-                    }
-                }
-
-                const barTarget = 150; // Target number of bars for calculation, independent of canvas size
-                const samplesPerBar = Math.floor(channelData.length / barTarget);
-                const peaks = [];
-
-                for (let i = 0; i < barTarget; i++) {
-                    let maxPeak = 0;
-                    const start = i * samplesPerBar;
-                    const end = Math.min(start + samplesPerBar, channelData.length);
-
-                    for (let j = start; j < end; j++) {
-                        const value = Math.abs(channelData[j]);
-                        if (value > maxPeak) {
-                            maxPeak = value;
+            };
+
+            // --- RENDER FUNCTIONS ---
+            const render = {
+                updateUIForLoading: () => {
+                    app.dom.generateBtn.disabled = app.state.isLoading;
+                    app.dom.generateBtnText.textContent = app.state.isLoading ? 'در حال پردازش...' : 'تولید صدا';
+                    const spinner = app.dom.generateBtn.querySelector('svg');
+                    spinner.style.animation = app.state.isLoading ? 'spin 1s linear infinite' : 'none';
+                },
+                updateSelectedSpeakerDisplay: () => {
+                    const speaker = utils.getSpeakerById(app.state.selectedSpeakerId);
+                    const speakerIndex = SPEAKERS.findIndex(s => s.id === speaker.id);
+                    app.dom.selectedSpeakerImg.src = utils.getImageUrl(speaker, speakerIndex);
+                    app.dom.selectedSpeakerName.textContent = speaker.name;
+                    app.dom.selectedSpeakerDesc.textContent = speaker.desc;
+                    app.dom.speakerIdStorage.value = speaker.id;
+                },
+                createSpeakerCardsInModal: (filter = '') => {
+                    app.dom.speakerGrid.innerHTML = '';
+                    const filteredSpeakers = SPEAKERS.filter(s => s.name.toLowerCase().includes(filter.toLowerCase()));
+                    filteredSpeakers.forEach((speaker, index) => {
+                        const card = document.createElement('div');
+                        card.className = 'speaker-card';
+                        if (speaker.id === app.state.selectedSpeakerId) {
+                            card.classList.add('selected');
                         }
+                        card.dataset.speakerId = speaker.id;
+                        card.innerHTML = `
+                            <img src="${utils.getImageUrl(speaker, index)}" alt="${speaker.name}" loading="lazy">
+                            <div class="name">${speaker.name}</div>
+                            <div class="desc">${speaker.desc}</div>
+                        `;
+                        card.addEventListener('click', () => {
+                            app.state.selectedSpeakerId = speaker.id;
+                            render.updateSelectedSpeakerDisplay();
+                            modals.hide('speaker-modal');
+                        });
+                        app.dom.speakerGrid.appendChild(card);
+                    });
+                },
+                updatePlayerUI: () => {
+                    const audio = app.dom.hiddenAudioPlayer;
+                    if (!audio.src) return;
+
+                    const isPlaying = !audio.paused && !audio.ended;
+                    app.dom.playIcon.style.display = isPlaying ? 'none' : 'block';
+                    app.dom.pauseIcon.style.display = isPlaying ? 'block' : 'none';
+
+                    const currentTime = audio.currentTime;
+                    const duration = audio.duration;
+                    
+                    app.dom.playerTime.textContent = `${utils.formatTime(currentTime)} / ${utils.formatTime(duration) || '0:00'}`;
+
+                    if (isFinite(duration) && duration > 0) {
+                        const progress = currentTime / duration;
+                        render.drawWaveform(progress);
+                    } else {
+                        render.drawWaveform(0);
                     }
-                    peaks.push(maxPeak); // Store raw peak
-                }
-                audioPeaks = peaks;
-                drawWaveform(0); // Draw initial waveform
-            }
-
-            // Update custom player UI (play/pause icon, time, progress)
-            function updatePlayerUI() {
-                if (hiddenAudioPlayer.paused || hiddenAudioPlayer.ended) {
-                    playIcon.style.display = 'block';
-                    pauseIcon.style.display = 'none';
-                    playPauseBtn.setAttribute('aria-label', 'پخش');
-                } else {
-                    playIcon.style.display = 'none';
-                    pauseIcon.style.display = 'block';
-                    playPauseBtn.setAttribute('aria-label', 'مکث');
-                }
-
-                const currentTime = hiddenAudioPlayer.currentTime;
-                const duration = hiddenAudioPlayer.duration;
-
-                audioCurrentTimeSpan.textContent = formatTime(currentTime);
-                audioWaveformCanvas.parentNode.setAttribute('aria-valuenow', isFinite(duration) && duration > 0 ? Math.floor((currentTime / duration) * 100) : 0);
-
-
-                if (isFinite(duration) && duration > 0) {
-                    audioTotalTimeSpan.textContent = formatTime(duration);
-                    const progressRatio = currentTime / duration;
-                    drawWaveform(progressRatio);
-                } else {
-                    audioTotalTimeSpan.textContent = '0:00';
-                    drawWaveform(0);
-                }
-            }
-
-            // --- STATE MANAGEMENT ---
-            function showLoadingState() {
-                audioPlayerContent.style.display = 'none';
-                outputSection.classList.remove('has-content');
-                statusMessage.style.display = 'none';
-                loadingAnimationWrapper.style.display = 'flex';
-                generateBtn.disabled = true;
-                generateBtn.innerHTML = `
-                    <svg class="spinner" aria-hidden="true" role="status" fill="currentColor" viewBox="0 0 100 101">
-                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/>
-                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0492C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/>
-                    </svg>
-                    <span class="button-text">در حال پردازش...</span>
-                `;
-            }
 
-            function showResultState(isSuccess, message = '', audioUrl = null) {
-                loadingAnimationWrapper.style.display = 'none';
-                if (isSuccess) {
-                    statusMessage.style.display = 'none';
-                    audioPlayerContent.style.display = 'flex';
-                    outputSection.classList.add('has-content');
-                    hiddenAudioPlayer.src = audioUrl;
-                    hiddenAudioPlayer.load(); // Reload to trigger loadedmetadata
-                    // Play is handled by loadedmetadata listener after waveform processing
-                } else {
-                    statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
-                    statusMessage.classList.add('error');
-                    statusMessage.style.display = 'block';
-                    audioPlayerContent.style.display = 'none';
-                    outputSection.classList.remove('has-content');
-                    hiddenAudioPlayer.pause();
-                    hiddenAudioPlayer.src = '';
-                    audioPeaks = []; // Clear waveform data
-                    drawWaveform(0); // Clear canvas
-                    audioBufferCache = null; // Clear cached buffer
-                }
-                generateBtn.disabled = false;
-                generateBtn.innerHTML = '<span class="button-text">✨ تولید صدا با آلفا</span>';
-            }
-
-            // --- SIMULATED BACKEND API CALL ---
-            // THIS IS A MOCK FUNCTION. REPLACE IT WITH YOUR ACTUAL BACKEND API CALL!
-            async function simulateBackendApiCall(text, prompt, speakerId, temperature) {
-                console.log("Simulating API call with:", { text, prompt, speakerId, temperature });
-                return new Promise((resolve, reject) => {
-                    const delay = 3000 + Math.random() * 2000; // Simulate network delay
-                    setTimeout(() => {
-                        if (Math.random() > 0.1) { // Simulate 90% success rate
-                            // In a real application, your backend would return the URL to the generated audio
-                            // after securely processing the request and potentially deducting credits.
-                            const mockAudioUrls = [
-                                "https://file-examples.com/storage/fe395e28a56247c413b5e43/2017/11/file_example_MP3_700KB.mp3",
-                                "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
-                                "https://www.mfiles.co.uk/mp3-midi/test-mp3.mp3", // Shorter for quick test
-                                "https://www.kozco.com/tech/piano2-mp3.mp3"
-                            ];
-                            const randomUrl = mockAudioUrls[Math.floor(Math.random() * mockAudioUrls.length)];
-                            resolve({ audioUrl: randomUrl, message: 'صدا با موفقیت تولید شد!' });
-                        } else {
-                            reject(new Error('متاسفانه، سرور در حال حاضر مشغول است یا خطایی رخ داده. لطفا لحظاتی دیگر تلاش کنید.'));
-                        }
-                    }, delay);
-                });
-            }
-
-            // --- EVENT HANDLERS ---
-
-            textInput.addEventListener('input', () => {
-                const currentLength = textInput.value.length;
-                charCountSpan.textContent = currentLength.toLocaleString('fa-IR');
-
-                if (currentLength > MAX_CHARS) {
-                    charCountSpan.classList.add('error');
-                    charErrorMessage.textContent = `متن شما ${currentLength - MAX_CHARS} نویسه بیشتر از حد مجاز است!`;
-                    charErrorMessage.style.display = 'inline';
-                    generateBtn.disabled = true; // Disable button if over limit
-                } else {
-                    charCountSpan.classList.remove('error');
-                    charErrorMessage.style.display = 'none';
-                    generateBtn.disabled = false; // Re-enable if within limit (and other conditions met)
-                }
-                // Also check if text is empty to disable button
-                if (currentLength === 0) {
-                     generateBtn.disabled = true;
+                    // Highlight playing history item
+                    document.querySelectorAll('.history-item.playing').forEach(el => el.classList.remove('playing'));
+                    if (isPlaying && app.state.currentAudio) {
+                        const item = document.querySelector(`.history-item[data-id="${app.state.currentAudio.id}"]`);
+                        if (item) item.classList.add('playing');
+                    }
+                },
+                drawWaveform: (progressRatio = 0) => {
+                    const { waveformCtx: ctx, waveformCanvas: canvas } = app.dom;
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+                    // Simplified static waveform for demonstration
+                    const barCount = 100;
+                    const barWidth = canvas.width / barCount / 1.5;
+                    const barGap = barWidth / 2;
+
+                    for (let i = 0; i < barCount; i++) {
+                        const barHeight = (Math.sin(i * 0.2) * 0.4 + 0.6) * canvas.height * 0.8;
+                        const x = i * (barWidth + barGap);
+                        const y = (canvas.height - barHeight) / 2;
+                        ctx.fillStyle = i < progressRatio * barCount ? 'var(--waveform-active)' : 'var(--waveform-inactive)';
+                        ctx.fillRect(x, y, barWidth, barHeight);
+                    }
+                },
+                renderHistory: () => {
+                    app.dom.historyList.innerHTML = '';
+                    if (app.state.history.length === 0) {
+                        app.dom.historyWrapper.style.display = 'none';
+                        app.dom.outputEmptyState.style.display = 'flex';
+                        return;
+                    }
+                    app.dom.historyWrapper.style.display = 'block';
+                    app.dom.outputEmptyState.style.display = 'none';
+
+                    app.state.history.forEach(item => {
+                        const li = document.createElement('li');
+                        li.className = 'history-item';
+                        li.dataset.id = item.id;
+                        const speaker = utils.getSpeakerById(item.speakerId);
+                        li.innerHTML = `
+                            <svg class="play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
+                                <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
+                            </svg>
+                            <div class="history-item-info">
+                                <p class="text">${item.text}</p>
+                                <p class="meta">${speaker.name} - ${new Date(item.timestamp).toLocaleString('fa-IR')}</p>
+                            </div>
+                            <div class="history-item-actions">
+                                <a href="${item.url}" download="alpha-tts-${item.id}.wav" title="دانلود">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z" /><path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" /></svg>
+                                </a>
+                                <button class="delete-btn" title="حذف">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.58.22-2.365.468a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193v-.443A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" /></svg>
+                                </button>
+                            </div>
+                        `;
+                        li.addEventListener('click', (e) => {
+                            if (!e.target.closest('.history-item-actions')) {
+                                handlers.playHistoryItem(item.id);
+                            }
+                        });
+                        li.querySelector('.delete-btn').addEventListener('click', (e) => {
+                            e.stopPropagation();
+                            handlers.deleteHistoryItem(item.id);
+                        });
+                        app.dom.historyList.appendChild(li);
+                    });
                 }
-            });
-
-            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
-
-            changeSpeakerBtn.addEventListener('click', () => {
-                createSpeakerCardsInModal();
-                showModal(speakerModal);
-            });
-            selectedSpeakerCard.addEventListener('click', () => {
-                createSpeakerCardsInModal();
-                showModal(speakerModal);
-            });
-
-            tempInfoIcon.addEventListener('click', () => showModal(infoModal));
-            tempInfoIcon.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
+            };
+
+            // --- EVENT HANDLERS & LOGIC ---
+            const handlers = {
+                setTheme: (theme) => {
+                    app.state.currentTheme = theme;
+                    app.dom.html.dataset.theme = theme;
+                    localStorage.setItem('alphaTtsTheme', theme);
+                    app.dom.themeToggle.checked = theme === 'dark';
+                },
+                toggleTheme: () => {
+                    const newTheme = app.state.currentTheme === 'light' ? 'dark' : 'light';
+                    handlers.setTheme(newTheme);
+                },
+                handleFormSubmit: async (e) => {
                     e.preventDefault();
-                    showModal(infoModal);
-                }
-            });
-
-            // General Modal Close Listeners (for all modals)
-            document.querySelectorAll('.modal-overlay').forEach(overlay => {
-                overlay.addEventListener('click', (e) => {
-                    if (e.target === overlay) {
-                        hideModal(overlay);
+                    if (app.state.isLoading) return;
+                    
+                    const text = app.dom.textInput.value.trim();
+                    if (!text) {
+                        return utils.showToast('متن ورودی نمی‌تواند خالی باشد.', 'error');
                     }
-                });
-            });
-            document.querySelectorAll('.close-modal-btn').forEach(button => {
-                button.addEventListener('click', () => {
-                    const modalId = button.dataset.modalId;
-                    if (modalId) {
-                        hideModal(document.getElementById(modalId));
+                    if (text.length > MAX_TEXT_LENGTH) {
+                        return utils.showToast(`طول متن بیش از ${MAX_TEXT_LENGTH} نویسه است.`, 'error');
                     }
-                });
-            });
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape') {
-                    document.querySelectorAll('.modal-overlay.visible').forEach(hideModal);
-                }
-            });
-
-            // Audio Player Controls
-            playPauseBtn.addEventListener('click', () => {
-                if (hiddenAudioPlayer.paused) {
-                    hiddenAudioPlayer.play();
-                } else {
-                    hiddenAudioPlayer.pause();
-                }
-            });
-            skipBackwardBtn.addEventListener('click', () => {
-                hiddenAudioPlayer.currentTime = Math.max(0, hiddenAudioPlayer.currentTime - 5);
-            });
-            skipForwardBtn.addEventListener('click', () => {
-                hiddenAudioPlayer.currentTime = Math.min(hiddenAudioPlayer.duration, hiddenAudioPlayer.currentTime + 5);
-            });
-            volumeBtn.addEventListener('click', () => {
-                hiddenAudioPlayer.muted = !hiddenAudioPlayer.muted;
-                volumeHighIcon.style.display = hiddenAudioPlayer.muted ? 'none' : 'block';
-                volumeMuteIcon.style.display = hiddenAudioPlayer.muted ? 'block' : 'none';
-                volumeBtn.setAttribute('aria-label', hiddenAudioPlayer.muted ? 'فعال کردن صدا' : 'بی‌صدا کردن صدا');
-            });
-            speedBtn.addEventListener('click', () => {
-                currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length;
-                const newSpeed = playbackSpeeds[currentPlaybackSpeedIndex];
-                hiddenAudioPlayer.playbackRate = newSpeed;
-                speedBtn.textContent = `${newSpeed}x`;
-            });
+                    
+                    app.state.isLoading = true;
+                    render.updateUIForLoading();
 
-            // Audio Player Events
-            hiddenAudioPlayer.addEventListener('timeupdate', updatePlayerUI);
-            hiddenAudioPlayer.addEventListener('loadedmetadata', async () => {
-                // Ensure AudioContext is initialized for waveform processing
-                if (!audioContext) {
-                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                }
-                if (!audioBufferCache) { // Only decode if not already cached
                     try {
-                        const response = await fetch(hiddenAudioPlayer.src);
-                        if (!response.ok) throw new Error(`Failed to fetch audio: ${response.statusText}`);
-                        const arrayBuffer = await response.arrayBuffer();
-                        audioBufferCache = await audioContext.decodeAudioData(arrayBuffer);
-                        await processAudioForWaveform(audioBufferCache);
-                    } catch (e) {
-                        console.error("Error decoding audio for waveform:", e);
-                        audioPeaks = [];
-                        audioBufferCache = null;
-                        statusMessage.textContent = 'خطا در بارگذاری موج صوتی.';
-                        statusMessage.classList.add('error');
+                        const audioUrl = await api.generateAudio();
+                        const newItem = {
+                            id: `tts-${Date.now()}`,
+                            url: audioUrl,
+                            text: text.substring(0, 100) + (text.length > 100 ? '...' : ''),
+                            speakerId: app.state.selectedSpeakerId,
+                            timestamp: Date.now()
+                        };
+                        
+                        handlers.playNewAudio(newItem);
+                        handlers.addHistoryItem(newItem);
+                        utils.showToast('فایل صوتی با موفقیت تولید شد.', 'success');
+                    } catch (error) {
+                        utils.showToast(error.message, 'error');
+                    } finally {
+                        app.state.isLoading = false;
+                        render.updateUIForLoading();
                     }
-                } else {
-                    await processAudioForWaveform(audioBufferCache); // Redraw if cached
-                }
-                updatePlayerUI(); // Update UI with total duration and initial state
-                if (!hiddenAudioPlayer.paused) { // If it was playing when metadata loaded
-                    hiddenAudioPlayer.play().catch(e => console.error("Autoplay failed:", e)); // Attempt to play
-                }
-            });
-            hiddenAudioPlayer.addEventListener('play', updatePlayerUI);
-            hiddenAudioPlayer.addEventListener('pause', updatePlayerUI);
-            hiddenAudioPlayer.addEventListener('ended', () => {
-                hiddenAudioPlayer.currentTime = 0;
-                updatePlayerUI();
-            });
-
-            // Handle window resize for responsive waveform
-            let resizeTimeout;
-            window.addEventListener('resize', () => {
-                clearTimeout(resizeTimeout);
-                resizeTimeout = setTimeout(() => {
-                    if (outputSection.classList.contains('has-content') && audioBufferCache) {
-                        // Re-draw waveform if audio is loaded and output section is visible
-                        drawWaveform(hiddenAudioPlayer.currentTime / hiddenAudioPlayer.duration);
+                },
+                playNewAudio: (audioItem) => {
+                    app.state.currentAudio = audioItem;
+                    app.dom.playerWrapper.style.display = 'block';
+                    app.dom.hiddenAudioPlayer.src = audioItem.url;
+                    app.dom.downloadBtn.href = audioItem.url;
+                    app.dom.hiddenAudioPlayer.play();
+                },
+                playHistoryItem: (id) => {
+                    const item = app.state.history.find(h => h.id === id);
+                    if (item) {
+                        handlers.playNewAudio(item);
                     }
-                }, 250); // Debounce resize events
-            });
-
-
-            // --- FORM SUBMISSION ---
-            async function generateAudio(event) {
-                event.preventDefault();
-
-                const text = textInput.value.trim();
-                if (!text) {
-                    showResultState(false, 'لطفاً متن مورد نظر خود را وارد کنید.');
-                    return;
-                }
-                if (text.length > MAX_CHARS) {
-                    showResultState(false, `خطا: طول متن بیش از ${MAX_CHARS.toLocaleString('fa-IR')} نویسه است.`);
-                    return;
+                },
+                addHistoryItem: (item) => {
+                    app.state.history.unshift(item); // Add to the top
+                    handlers.saveHistory();
+                    render.renderHistory();
+                },
+                deleteHistoryItem: (id) => {
+                    app.state.history = app.state.history.filter(h => h.id !== id);
+                    handlers.saveHistory();
+                    render.renderHistory();
+                    utils.showToast('آیتم از تاریخچه حذف شد.');
+                },
+                clearHistory: () => {
+                    if (confirm('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟')) {
+                        app.state.history = [];
+                        handlers.saveHistory();
+                        render.renderHistory();
+                        utils.showToast('تاریخچه پاک شد.');
+                    }
+                },
+                saveHistory: () => {
+                    localStorage.setItem('alphaTtsHistory', JSON.stringify(app.state.history));
+                },
+                loadHistory: () => {
+                    const savedHistory = localStorage.getItem('alphaTtsHistory');
+                    if (savedHistory) {
+                        app.state.history = JSON.parse(savedHistory);
+                    }
+                },
+                handlePlayerControls: () => {
+                    const audio = app.dom.hiddenAudioPlayer;
+                    app.dom.playPauseBtn.onclick = () => audio.paused ? audio.play() : audio.pause();
+                    app.dom.skipBackwardBtn.onclick = () => audio.currentTime = Math.max(0, audio.currentTime - 5);
+                    app.dom.skipForwardBtn.onclick = () => audio.currentTime = Math.min(audio.duration || 0, audio.currentTime + 5);
+                    app.dom.speedBtn.onclick = () => {
+                        app.state.currentPlaybackSpeedIndex = (app.state.currentPlaybackSpeedIndex + 1) % PLAYBACK_SPEEDS.length;
+                        const newSpeed = PLAYBACK_SPEEDS[app.state.currentPlaybackSpeedIndex];
+                        audio.playbackRate = newSpeed;
+                        app.dom.speedBtn.textContent = `${newSpeed}x`;
+                    };
+                    audio.onplay = audio.onpause = audio.onended = render.updatePlayerUI;
+                    audio.ontimeupdate = render.updatePlayerUI;
+                    audio.onloadedmetadata = () => {
+                        const { waveformCanvas: canvas } = app.dom;
+                        canvas.width = canvas.clientWidth;
+                        canvas.height = canvas.clientHeight;
+                        render.updatePlayerUI();
+                    };
                 }
-                // Simulate credit deduction
-                if (currentCredits < text.length) {
-                    showResultState(false, `اعتبار شما برای این درخواست کافی نیست. شما ${currentCredits.toLocaleString('fa-IR')} کاراکتر و این متن ${text.length.toLocaleString('fa-IR')} کاراکتر است.`);
-                    return;
+            };
+            
+            // --- MODAL MANAGEMENT ---
+            const modals = {
+                show: (id) => {
+                    const modal = document.getElementById(id);
+                    if (modal) modal.classList.add('visible');
+                },
+                hide: (id) => {
+                    const modal = document.getElementById(id);
+                    if (modal) modal.classList.remove('visible');
+                },
+                init: () => {
+                    document.querySelectorAll('.modal-overlay').forEach(overlay => {
+                        overlay.addEventListener('click', e => {
+                            if (e.target === overlay) modals.hide(overlay.id);
+                        });
+                    });
+                    document.querySelectorAll('.modal-close-btn').forEach(btn => {
+                        btn.addEventListener('click', () => modals.hide(btn.dataset.modalId));
+                    });
                 }
-
-                showLoadingState();
-                statusMessage.classList.remove('error'); // Clear previous error styling
-
-                const promptVal = promptInput.value.trim();
-                const temperatureVal = parseFloat(tempSlider.value);
-                const selectedSpeakerVal = selectedSpeakerIdStorage.value;
-
-                try {
-                    // Call the simulated backend API
-                    const result = await simulateBackendApiCall(text, promptVal, selectedSpeakerVal, temperatureVal);
-
-                    // If successful, deduct credits (mock)
-                    currentCredits -= text.length;
-                    creditsLeftSpan.textContent = currentCredits.toLocaleString('fa-IR');
-
-                    showResultState(true, 'صدا با موفقیت تولید شد!', result.audioUrl);
-                } catch (error) {
-                    console.error('خطا در فرآیند تولید صدا:', error);
-                    showResultState(false, `${error.message || 'خطای ناشناخته در تولید صدا.'}`);
+            };
+
+            // --- API COMMUNICATION ---
+            const api = {
+                generateAudio: async () => {
+                    const payload = {
+                        fn_index: FN_INDEX,
+                        data: [
+                            false, null, 
+                            app.dom.textInput.value, 
+                            app.dom.promptInput.value, 
+                            app.state.selectedSpeakerId, 
+                            parseFloat(app.dom.tempSlider.value)
+                        ],
+                        session_hash: Math.random().toString(36).substring(2)
+                    };
+
+                    const joinRes = await fetch(JOIN_QUEUE_URL, {
+                        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload)
+                    });
+                    if (!joinRes.ok) throw new Error(`خطای ارتباط با سرور (${joinRes.status})`);
+
+                    const timeout = 90000;
+                    const startTime = Date.now();
+                    while(Date.now() - startTime < timeout) {
+                        const dataRes = await fetch(`${GET_DATA_URL_BASE}?session_hash=${payload.session_hash}`);
+                        if (!dataRes.ok) continue;
+
+                        const responseText = await dataRes.text();
+                        const lines = responseText.trim().split('\n');
+                        for (const line of lines) {
+                            if (!line.startsWith('data:')) continue;
+                            const data = JSON.parse(line.substring(5));
+                            if (data.msg === 'process_completed') {
+                                if (data.success && data.output.data?.[0]?.path) {
+                                    return `${FILE_URL_BASE}${data.output.data[0].path}`;
+                                }
+                                throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.');
+                            }
+                            if (data.msg === 'queue_full') throw new Error('صف پردازش پر است. لطفا بعدا تلاش کنید.');
+                        }
+                        await new Promise(r => setTimeout(r, 1000));
+                    }
+                    throw new Error('زمان انتظار برای پردازش به پایان رسید.');
                 }
+            };
+
+            // --- INITIALIZATION ---
+            function init() {
+                cacheDOMElements();
+                
+                // Load preferences
+                const savedTheme = localStorage.getItem('alphaTtsTheme') || 'light';
+                const savedSpeaker = localStorage.getItem('alphaTtsSpeaker') || 'Charon';
+                handlers.setTheme(savedTheme);
+                app.state.selectedSpeakerId = savedSpeaker;
+                handlers.loadHistory();
+
+                // Bind events
+                app.dom.form.addEventListener('submit', handlers.handleFormSubmit);
+                app.dom.themeToggle.addEventListener('change', handlers.toggleTheme);
+                app.dom.tempSlider.addEventListener('input', () => app.dom.tempValue.textContent = app.dom.tempSlider.value);
+                app.dom.speakerSelectorTrigger.addEventListener('click', () => {
+                    render.createSpeakerCardsInModal();
+                    modals.show('speaker-modal');
+                });
+                app.dom.speakerSearch.addEventListener('input', (e) => render.createSpeakerCardsInModal(e.target.value));
+                app.dom.clearHistoryBtn.addEventListener('click', handlers.clearHistory);
+                
+                handlers.handlePlayerControls();
+                modals.init();
+
+                // Initial render
+                render.updateSelectedSpeakerDisplay();
+                render.renderHistory();
+                render.updateUIForLoading();
             }
 
-            // Initial setup
-            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
-            form.addEventListener('submit', generateAudio);
-            textInput.dispatchEvent(new Event('input')); // Trigger char counter on load
-            showResultState(false, 'صدای تولید شده در اینجا نمایش داده خواهد شد.');
+            init();
         });
     </script>
 </body>