diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -8,182 +8,214 @@
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
 
         :root {
+            /* --- Light Theme Palette --- */
+            --theme-bg: #F8F9FC;
+            --theme-panel-bg: #FFFFFF;
+            --theme-panel-border: #EAEFF7;
+            --theme-input-bg: #F6F8FB;
+            --theme-input-border: #E1E7EF;
+            --theme-text-primary: #1A202C;
+            --theme-text-secondary: #626F86;
+            --theme-text-tertiary: #8A94A6;
+            --theme-accent-primary: #4A6CFA;
+            --theme-accent-primary-hover: #3553D6;
+            --theme-accent-primary-glow: rgba(74, 108, 250, 0.25);
+            --theme-accent-secondary: #0FD4A8;
+            --theme-accent-secondary-hover: #0DA986;
+            --theme-accent-secondary-glow: rgba(15, 212, 168, 0.2);
+            --theme-waveform-active: var(--theme-accent-primary);
+            --theme-waveform-inactive: #D0D9E6;
+            --theme-shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
+            --theme-shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
+            --theme-shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
+            --theme-shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
+            --theme-toggle-bg: #EAEFF7;
+            --theme-toggle-icon: var(--theme-text-secondary);
+            
+            /* --- General Variables --- */
             --app-font: 'Vazirmatn', sans-serif;
-            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --radius-card: 24px;
+            --radius-btn: 14px;
+            --radius-input: 12px;
+            --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);
             --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+        }
 
-            /* --- Light Mode Palette --- */
-            --app-bg-light: #F7F9FC;
-            --panel-bg-light: #FFFFFF;
-            --panel-border-light: #E9EEF5;
-            --text-primary-light: #1A202C;
-            --text-secondary-light: #5A677D;
-            --input-bg-light: #F8FAFC;
-            --accent-primary-light: #3B82F6;
-            --accent-primary-hover-light: #2563EB;
-            --accent-secondary-light: #10B981;
-            --accent-secondary-hover-light: #059669;
-            --shadow-color-light: rgba(26, 32, 44, 0.08);
-
-            /* --- Dark Mode Palette --- */
-            --app-bg-dark: #121826;
-            --panel-bg-dark: #1A2233;
-            --panel-border-dark: #2C3649;
-            --text-primary-dark: #E2E8F0;
-            --text-secondary-dark: #94A3B8;
-            --input-bg-dark: #161D2B;
-            --accent-primary-dark: #60A5FA;
-            --accent-primary-hover-dark: #93C5FD;
-            --accent-secondary-dark: #34D399;
-            --accent-secondary-hover-dark: #6EE7B7;
-            --shadow-color-dark: rgba(0, 0, 0, 0.25);
-        }
-
-        /* --- Apply Theme --- */
-        body {
-            --app-bg: var(--app-bg-light);
-            --panel-bg: var(--panel-bg-light);
-            --panel-border: var(--panel-border-light);
-            --text-primary: var(--text-primary-light);
-            --text-secondary: var(--text-secondary-light);
-            --input-bg: var(--input-bg-light);
-            --accent-primary: var(--accent-primary-light);
-            --accent-primary-hover: var(--accent-primary-hover-light);
-            --accent-secondary: var(--accent-secondary-light);
-            --accent-secondary-hover: var(--accent-secondary-hover-light);
-            --shadow-color: var(--shadow-color-light);
-
-            --shadow-subtle: 0 2px 8px var(--shadow-color);
-            --shadow-medium: 0 6px 16px -2px var(--shadow-color), 0 3px 8px -3px var(--shadow-color);
-            --shadow-strong: 0 10px 25px -5px var(--shadow-color), 0 6px 15px -6px var(--shadow-color);
-        }
-
-        body.dark-mode {
-            --app-bg: var(--app-bg-dark);
-            --panel-bg: var(--panel-bg-dark);
-            --panel-border: var(--panel-border-dark);
-            --text-primary: var(--text-primary-dark);
-            --text-secondary: var(--text-secondary-dark);
-            --input-bg: var(--input-bg-dark);
-            --accent-primary: var(--accent-primary-dark);
-            --accent-primary-hover: var(--accent-primary-hover-dark);
-            --accent-secondary: var(--accent-secondary-dark);
-            --accent-secondary-hover: var(--accent-secondary-hover-dark);
-            --shadow-color: var(--shadow-color-dark);
-        }
-
-        @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); } }
+        html.dark-mode {
+            /* --- Dark Theme Palette --- */
+            --theme-bg: #121826;
+            --theme-panel-bg: #1A2130;
+            --theme-panel-border: #2A3346;
+            --theme-input-bg: #171E2B;
+            --theme-input-border: #2A3346;
+            --theme-text-primary: #F0F4F9;
+            --theme-text-secondary: #90A0B7;
+            --theme-text-tertiary: #626F86;
+            --theme-accent-primary: #5F80FF;
+            --theme-accent-primary-hover: #7D99FF;
+            --theme-accent-primary-glow: rgba(95, 128, 255, 0.25);
+            --theme-accent-secondary: #17E0BB;
+            --theme-accent-secondary-hover: #4CFAD8;
+            --theme-accent-secondary-glow: rgba(23, 224, 187, 0.2);
+            --theme-waveform-active: var(--theme-accent-primary);
+            --theme-waveform-inactive: #434E68;
+            --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+            --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+            --theme-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            --theme-toggle-bg: #2A3346;
+            --theme-toggle-icon: var(--theme-text-secondary);
+        }
 
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(15px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes modalZoomIn {
+            from { opacity: 0; transform: scale(0.9) translateY(20px); }
+            to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+        @keyframes pulse-wave {
+            0% { transform: scale(0.6); opacity: 0.5; }
+            50% { opacity: 1; }
+            100% { transform: scale(1.4); opacity: 0; }
+        }
+
+        /* --- Base Styles --- */
         body {
             font-family: var(--app-font);
             direction: rtl;
-            background-color: var(--app-bg);
-            color: var(--text-primary);
+            background-color: var(--theme-bg);
+            color: var(--theme-text-primary);
             font-size: 16px;
             line-height: 1.8;
             margin: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
+            padding: 2.5rem 0;
             min-height: 100vh;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
-            transition: background-color 0.3s, color 0.3s;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            overflow-x: hidden;
+            transition: background-color var(--transition-smooth), color var(--transition-smooth);
+            background-image: radial-gradient(var(--theme-text-tertiary) 0.5px, transparent 0.5px);
+            background-size: 20px 20px;
+            background-position: -10px -10px;
         }
 
-        .container {
-            max-width: 780px;
-            width: 92%;
-            margin: 2.5rem auto;
-            flex-grow: 1;
-        }
-        
-        .page-header {
+        .container { max-width: 820px; width: 92%; margin: 0 auto; }
+
+        /* --- Theme Toggle Switch --- */
+        .theme-switch-wrapper {
             display: flex;
-            justify-content: space-between;
             align-items: center;
-            margin-bottom: 1rem;
+            justify-content: center;
+            margin-bottom: 2rem;
+            animation: fadeIn 0.8s 0.1s ease-out backwards;
         }
-
-        .theme-switcher {
-            background: var(--panel-bg);
-            border: 1px solid var(--panel-border);
+        .theme-switch {
+            display: inline-block;
+            height: 34px;
+            position: relative;
+            width: 60px;
+        }
+        .theme-switch input { display: none; }
+        .slider {
+            background-color: var(--theme-toggle-bg);
+            bottom: 0;
+            cursor: pointer;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            transition: var(--transition-smooth);
+            border-radius: 34px;
+        }
+        .slider:before {
+            background-color: #fff;
+            bottom: 4px;
+            content: "";
+            height: 26px;
+            left: 4px;
+            position: absolute;
+            transition: var(--transition-smooth);
+            width: 26px;
             border-radius: 50%;
-            width: 44px;
-            height: 44px;
             display: flex;
             align-items: center;
             justify-content: center;
-            cursor: pointer;
-            color: var(--text-secondary);
-            box-shadow: var(--shadow-subtle);
-            transition: var(--transition-smooth);
+            color: var(--theme-toggle-icon);
         }
-        .theme-switcher:hover {
-            color: var(--accent-primary);
-            transform: scale(1.1) rotate(15deg);
-            box-shadow: var(--shadow-medium);
+        input:checked + .slider { background-color: var(--theme-accent-primary); }
+        input:checked + .slider:before { transform: translateX(26px); }
+        .slider-icon {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--theme-toggle-icon);
+            font-size: 14px;
+            transition: var(--transition-smooth);
         }
-        .theme-switcher svg { width: 24px; height: 24px; }
-        .theme-switcher .moon-icon { display: none; }
-        body.dark-mode .theme-switcher .sun-icon { display: none; }
-        body.dark-mode .theme-switcher .moon-icon { display: block; }
+        .sun-icon { right: 8px; opacity: 1; }
+        .moon-icon { left: 8px; opacity: 0; }
+        html.dark-mode .sun-icon { opacity: 0; }
+        html.dark-mode .moon-icon { opacity: 1; }
 
+        /* --- App Header --- */
         .app-header {
-            padding: 0.5rem 0 2rem 0;
+            padding: 0.5rem 0 2.5rem 0;
             text-align: center;
-            animation: fadeInDown 0.8s 0.1s ease-out backwards;
+            margin-bottom: 1.5rem;
+            animation: fadeIn 0.8s 0.2s ease-out backwards;
         }
         .app-header h1 {
-            font-size: 2.3em;
+            font-size: 2.5em;
             font-weight: 900;
-            margin: 0 0 0.6rem 0;
-            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+            margin: 0 0 0.8rem 0;
+            background: linear-gradient(90deg, var(--theme-accent-primary), var(--theme-accent-secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px;
+            letter-spacing: -1px;
         }
         .app-header p {
-            font-size: 1em;
-            color: var(--text-secondary);
-            margin: 0;
+            font-size: 1.05em;
+            color: var(--theme-text-secondary);
+            margin-top: 0;
+            opacity: 0.9;
             font-weight: 400;
-            line-height: 1.6;
+            line-height: 1.7;
         }
 
+        /* --- Main Content Panel --- */
         .main-content {
-            padding: 2.5rem;
-            background-color: var(--panel-bg);
-            border-radius: 24px;
-            box-shadow: var(--shadow-strong);
-            border: 1px solid var(--panel-border);
-            animation: fadeInUp 0.8s 0.3s ease-out backwards;
-            transition: background-color 0.3s, border-color 0.3s;
+            padding: 3rem;
+            background-color: var(--theme-panel-bg);
+            border-radius: var(--radius-card);
+            box-shadow: var(--theme-shadow-xl);
+            border: 1px solid var(--theme-panel-border);
+            animation: fadeIn 0.8s 0.4s ease-out backwards;
+            transition: background-color var(--transition-smooth), border-color var(--transition-smooth);
         }
-
-        .form-group { margin-bottom: 2rem; }
-
+        .form-group { margin-bottom: 2.2rem; }
         label {
             display: block;
             font-weight: 700;
-            color: var(--text-primary);
-            font-size: 1.05em;
-            margin-bottom: 0.8rem;
-            transition: color 0.3s;
+            color: var(--theme-text-primary);
+            font-size: 1.1em;
+            margin-bottom: 1rem;
         }
 
+        /* --- Inputs & Textarea --- */
         textarea, input[type="text"] {
             width: 100%;
-            padding: 0.9rem 1.1rem;
-            border-radius: 14px;
-            border: 1px solid var(--panel-border);
-            background-color: var(--input-bg);
-            color: var(--text-primary);
-            box-shadow: var(--shadow-subtle) inset;
+            padding: 1rem 1.2rem;
+            border-radius: var(--radius-input);
+            border: 1px solid var(--theme-input-border);
+            background-color: var(--theme-input-bg);
+            color: var(--theme-text-primary);
+            box-shadow: var(--theme-shadow-sm) inset;
             font-family: var(--app-font);
             font-size: 1rem;
             box-sizing: border-box;
@@ -191,816 +223,807 @@
         }
         textarea:focus, input[type="text"]:focus {
             outline: none;
-            border-color: var(--accent-primary);
-            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 25%, transparent), var(--shadow-subtle) inset;
-            background-color: var(--panel-bg);
+            border-color: var(--theme-accent-primary);
+            box-shadow: 0 0 0 3px var(--theme-accent-primary-glow), var(--theme-shadow-sm) inset;
+            background-color: var(--theme-panel-bg);
         }
         textarea { min-height: 120px; resize: vertical; }
 
         .char-counter-wrapper {
             font-size: 0.85em;
-            color: var(--text-secondary);
+            color: var(--theme-text-tertiary);
             text-align: left;
-            margin-top: 0.5rem;
+            margin-top: 0.75rem;
             padding: 0 0.2rem;
         }
-        #char-count { font-weight: 600; color: var(--accent-primary); }
+        #char-count { font-weight: 600; color: var(--theme-accent-primary); }
 
+        /* --- Speaker Selection Display --- */
+        #selected-speaker-display { text-align: center; margin-top: 1.5rem; }
         #selected-speaker-card {
-            display: flex;
+            display: inline-flex;
             align-items: center;
-            background: linear-gradient(135deg, var(--input-bg) 0%, color-mix(in srgb, var(--panel-bg) 50%, transparent) 100%);
-            border-radius: 24px;
-            padding: 1rem 1.2rem;
-            box-shadow: var(--shadow-medium);
-            border: 1px solid var(--panel-border);
+            background: linear-gradient(135deg, var(--theme-input-bg) 0%, var(--theme-panel-bg) 100%);
+            border-radius: 50px;
+            padding: 0.75rem 0.75rem 0.75rem 1.5rem;
+            box-shadow: var(--theme-shadow-md);
+            border: 1px solid var(--theme-panel-border);
             transition: var(--transition-bounce);
             cursor: pointer;
-            position: relative;
+            margin-bottom: 1.5rem;
         }
         #selected-speaker-card:hover {
             transform: translateY(-6px) scale(1.03);
-            box-shadow: var(--shadow-strong);
-        }
-        #selected-speaker-card::after {
-            content: 'تغییر';
-            position: absolute;
-            left: 1.2rem; top: 50%;
-            transform: translateY(-50%);
-            font-size: 0.85em; font-weight: 600;
-            background: var(--accent-primary);
-            color: white;
-            padding: 4px 12px;
-            border-radius: 10px;
-            opacity: 0;
-            transition: var(--transition-smooth);
-        }
-        #selected-speaker-card:hover::after {
-            opacity: 1;
-            transform: translateY(-50%) scale(1.1);
+            box-shadow: var(--theme-shadow-lg);
+            border-color: var(--theme-accent-primary);
         }
         #selected-speaker-card img {
-            width: 75px; height: 75px;
+            width: 60px; height: 60px;
             border-radius: 50%;
             object-fit: cover;
-            margin-left: 18px;
-            border: 3px solid var(--accent-secondary);
-            box-shadow: 0 0 12px -2px color-mix(in srgb, var(--accent-secondary) 50%, transparent);
+            margin-left: 1rem;
+            border: 3px solid var(--theme-accent-secondary);
+            box-shadow: 0 0 15px -3px var(--theme-accent-secondary-glow);
             transition: var(--transition-smooth);
         }
-        #selected-speaker-card:hover img {
-            transform: scale(1.08) rotate(3deg);
+        #selected-speaker-info { text-align: right; }
+        #selected-speaker-info h3 { margin: 0; font-size: 1.25em; font-weight: 800; }
+        #selected-speaker-info p { margin: 2px 0 0; color: var(--theme-text-secondary); font-size: 0.85em; font-weight: 500; }
+
+        #change-speaker-btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 12px 24px;
+            border-radius: var(--radius-btn);
+            background: var(--theme-panel-bg);
+            border: 1px solid var(--theme-input-border);
+            color: var(--theme-text-primary);
+            cursor: pointer;
+            font-family: var(--app-font); font-weight: 600; font-size: 1em;
+            transition: var(--transition-smooth);
+            box-shadow: var(--theme-shadow-md);
+        }
+        #change-speaker-btn:hover {
+            background: var(--theme-input-bg);
+            border-color: var(--theme-accent-primary);
+            color: var(--theme-accent-primary);
+            transform: translateY(-3px) scale(1.05);
+            box-shadow: var(--theme-shadow-lg);
         }
-        #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; }
 
-        .slider-container { display: flex; align-items: center; gap: 1.2rem; }
+        /* --- Modals --- */
+        .modal-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background-color: rgba(18, 24, 38, 0.6);
+            backdrop-filter: blur(10px) saturate(150%);
+            display: none; align-items: center; justify-content: center;
+            z-index: 1000; opacity: 0;
+            transition: opacity var(--transition-smooth);
+        }
+        .modal-overlay.visible { display: flex; opacity: 1; }
+        .modal-dialog {
+            background: var(--theme-panel-bg);
+            padding: 2.5rem;
+            border-radius: var(--radius-card);
+            width: 90%;
+            box-shadow: var(--theme-shadow-xl);
+            border: 1px solid var(--theme-panel-border);
+            opacity: 0;
+            animation: modalZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        }
+        .modal-header {
+            display: flex; justify-content: space-between; align-items: center;
+            margin-bottom: 2rem; padding-bottom: 1.5rem;
+            border-bottom: 1px solid var(--theme-panel-border);
+        }
+        .modal-header h2 {
+            margin: 0; font-size: 1.8em; font-weight: 800;
+            color: var(--theme-accent-primary);
+        }
+        .close-modal-btn {
+            background: none; border: none; font-size: 2.5rem; cursor: pointer;
+            color: var(--theme-text-tertiary); transition: var(--transition-smooth); line-height: 1;
+        }
+        .close-modal-btn:hover {
+            color: var(--theme-accent-primary); transform: rotate(90deg) scale(1.1);
+        }
+
+        #speaker-modal .modal-dialog { max-width: 750px; max-height: 85vh; overflow-y: auto; }
+        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.5rem; }
+        .speaker-card {
+            cursor: pointer; transition: var(--transition-smooth); text-align: center;
+            position: relative; border-radius: var(--radius-card); padding: 0.5rem;
+        }
+        .speaker-card:hover { transform: translateY(-8px); }
+        .speaker-card input[type="radio"] { display: none; }
+        .speaker-card .speaker-visual {
+            border: 3px solid transparent; border-radius: 18px;
+            overflow: hidden; box-shadow: var(--theme-shadow-md);
+            position: relative; background-color: var(--theme-input-bg);
+            transition: var(--transition-bounce);
+        }
+        .speaker-card:hover .speaker-visual { box-shadow: var(--theme-shadow-lg); }
+        .speaker-card img {
+            width: 100%; height: 130px; object-fit: cover; display: block;
+            background-color: #e0e0e0; border-radius: 14px;
+            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+        .speaker-card:hover img { transform: scale(1.1); }
+        .speaker-card .speaker-name {
+            padding: 0.8rem 0.4rem 0.2rem; font-weight: 600; font-size: 0.95em;
+            color: var(--theme-text-secondary); transition: color 0.2s;
+        }
+        .speaker-card input[type="radio"]:checked + .speaker-visual {
+            border-color: var(--theme-accent-secondary);
+            box-shadow: 0 0 25px -5px var(--theme-accent-secondary-glow);
+            transform: scale(1.05);
+        }
+
+        /* --- Slider --- */
+        .label-with-info { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem; }
+        .info-icon {
+            display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
+            border-radius: 50%; background-color: var(--theme-input-bg); border: 1px solid var(--theme-input-border);
+            color: var(--theme-text-secondary); font-size: 0.9em; font-weight: 700; cursor: pointer;
+            transition: var(--transition-smooth); user-select: none;
+        }
+        .info-icon:hover {
+            background-color: var(--theme-accent-primary); color: white; border-color: var(--theme-accent-primary);
+            transform: scale(1.1); box-shadow: 0 0 10px var(--theme-accent-primary-glow);
+        }
+        .slider-container { display: flex; align-items: center; gap: 1.5rem; }
         input[type="range"] {
-            flex-grow: 1; -webkit-appearance: none; appearance: none;
-            width: 100%; height: 8px;
-            background: color-mix(in srgb, var(--panel-border) 50%, transparent);
-            border-radius: 4px; outline: none;
-            cursor: pointer;
-            transition: background 0.2s;
+            flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
+            background: var(--theme-input-border); border-radius: 3px; outline: none; cursor: pointer;
         }
         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;
+            background: linear-gradient(to right, var(--theme-accent-secondary) 0%, var(--theme-accent-primary) 100%);
+            height: 6px; border-radius: 3px;
         }
         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 var(--shadow-color);
-            margin-top: -7px;
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
-        input[type="range"]:focus::-webkit-slider-thumb {
-            box-shadow: 0 3px 8px color-mix(in srgb, var(--accent-primary) 35%, transparent);
+            -webkit-appearance: none; appearance: none; width: 24px; height: 24px;
+            background: #fff; border-radius: 50%; cursor: pointer;
+            border: 4px solid var(--theme-accent-primary); box-shadow: var(--theme-shadow-md);
+            margin-top: -9px; transition: var(--transition-fast);
+        }
+        input[type="range"]:hover::-webkit-slider-thumb {
+             transform: scale(1.15); box-shadow: 0 0 0 8px var(--theme-accent-primary-glow);
         }
         #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);
+            font-weight: 700; background-color: var(--theme-input-bg);
+            padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--theme-input-border);
+            min-width: 45px; text-align: center; color: var(--theme-accent-primary);
+            font-size: 1em; box-shadow: var(--theme-shadow-sm);
         }
 
+        /* --- Generate Button --- */
         #generate-btn {
-            width: 100%; padding: 1rem 1.5rem;
-            font-size: 1.25em; font-weight: 800;
+            width: 100%; padding: 1.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%);
-            color: #fff;
-            border: none;
-            border-radius: 14px;
-            cursor: pointer;
+            background: linear-gradient(95deg, var(--theme-accent-secondary) 0%, var(--theme-accent-primary) 100%);
+            color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer;
             transition: var(--transition-smooth), transform 0.15s ease-out;
-            box-shadow: 0 5px 15px -4px color-mix(in srgb, var(--accent-primary) 45%, transparent), 0 5px 15px -4px color-mix(in srgb, var(--accent-secondary) 35%, transparent);
-            position: relative;
-            overflow: hidden;
-            letter-spacing: 0.5px;
+            box-shadow: 0 6px 12px -3px var(--theme-accent-primary-glow), 0 6px 12px -3px var(--theme-accent-secondary-glow);
+            position: relative; overflow: hidden; letter-spacing: 0.5px;
         }
         #generate-btn:hover:not(:disabled) {
             transform: translateY(-5px) scale(1.02);
-            box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--accent-primary) 55%, transparent), 0 8px 20px -4px color-mix(in srgb, var(--accent-secondary) 45%, transparent);
+            box-shadow: 0 8px 20px -4px var(--theme-accent-primary-glow), 0 8px 20px -4px var(--theme-accent-secondary-glow);
         }
         #generate-btn:disabled {
-            background: var(--text-secondary);
-            cursor: not-allowed; box-shadow: none; color: var(--panel-bg);
-            opacity: 0.7; transform: none;
+            background: var(--theme-text-tertiary); cursor: not-allowed;
+            box-shadow: none; color: var(--theme-text-secondary);
         }
 
+        /* --- Output Section & New Loader --- */
         #output-section {
-            margin-top: 3rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-height: 200px;
-            position: relative;
-            box-sizing: border-box;
-            padding: 2rem;
-            background-color: var(--input-bg);
-            border-radius: 24px;
-            border: 2px dashed var(--panel-border);
-            box-shadow: var(--shadow-subtle) inset;
-            transition: var(--transition-smooth);
+            margin-top: 3rem; display: flex; align-items: center; justify-content: center;
+            flex-direction: column; min-height: 220px; position: relative;
+            box-sizing: border-box; padding: 2rem; background-color: var(--theme-input-bg);
+            border-radius: var(--radius-card); border: 2px dashed var(--theme-input-border);
+            box-shadow: var(--theme-shadow-sm) 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;
+            background-color: var(--theme-panel-bg); border: 1px solid var(--theme-panel-border);
+            box-shadow: var(--theme-shadow-lg); padding: 0; min-height: auto;
+        }
+        #status-message {
+            font-weight: 500; color: var(--theme-text-secondary); text-align: center;
+            font-size: 1.1em;
+        }
+        #loading-animation-wrapper {
+            display: none; flex-direction: column; align-items: center;
+            justify-content: center; gap: 2rem; width: 100%;
+        }
+        .pulse-loader {
+            width: 120px; height: 120px; position: relative;
+            display: flex; align-items: center; justify-content: center;
+        }
+        .pulse-loader .pulse-wave {
+            width: 100%; height: 100%; border-radius: 50%;
+            border: 2px solid var(--theme-accent-primary);
+            position: absolute; animation: pulse-wave 2s ease-out infinite;
+        }
+        .pulse-loader .pulse-wave:nth-child(2) { animation-delay: -0.5s; border-color: var(--theme-accent-secondary); }
+        .pulse-loader .pulse-wave:nth-child(3) { animation-delay: -1.0s; }
+        .pulse-loader .pulse-icon {
+            font-size: 48px; color: var(--theme-accent-primary);
         }
-        #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; }
-        
-        #loading-animation-wrapper { display: none; flex-direction: column; align-items: center; gap: 1.8rem; }
-        .orbital-loader { width: 110px; height: 110px; position: relative; animation: spin 10s linear infinite; }
-        .orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed color-mix(in srgb, var(--accent-primary) 25%, transparent); border-radius: 50%; transform-origin: center center; }
-        .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: spin 2.8s linear infinite reverse; }
-        .orbit:nth-child(2) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: spin 3.8s linear infinite; }
-        .orbit:nth-child(3) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: 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%; transform: translateX(-50%); }
-        .orbit:nth-child(2) .satellite { top: 50%; left: -5px; transform: translateY(-50%); background-color: var(--accent-secondary); }
-        .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; transform: translateX(50%); }
-        #loading-text { font-size: 1.2em; font-weight: 700; background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-
-        /* --- Audio Player --- */
+        #loading-text {
+            font-size: 1.2em; font-weight: 700; color: var(--theme-text-primary); text-align: center;
+            background: linear-gradient(90deg, var(--theme-accent-primary), var(--theme-accent-secondary));
+            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+        }
+
+        /* --- Professional Audio Player --- */
         #audio-player-content {
-            display: none;
-            width: 100%;
-            padding: 2rem;
-            box-sizing: border-box;
-            flex-direction: column;
-            gap: 1.2rem;
+            display: none; width: 100%; padding: 2rem; box-sizing: border-box;
+            flex-direction: column; gap: 1.5rem;
         }
         .audio-waveform-container {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            width: 100%;
+            display: flex; align-items: center; gap: 1rem; width: 100%;
         }
         .audio-time {
-            font-size: 0.9em;
-            color: var(--text-secondary);
-            min-width: 45px;
-            text-align: center;
-            font-variant-numeric: tabular-nums;
-            user-select: none;
+            font-size: 0.9em; color: var(--theme-text-secondary); min-width: 45px;
+            text-align: center; font-variant-numeric: tabular-nums; user-select: none;
         }
-        #audio-waveform {
-            flex-grow: 1;
-            height: 70px;
-            cursor: pointer;
+        .audio-waveform {
+            flex-grow: 1; height: 70px; position: relative;
+            display: flex; align-items: center; justify-content: center;
+        }
+        #audio-waveform-canvas {
+            display: block; max-width: 100%; height: 100%;
         }
         .audio-controls-group {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 1rem;
+            display: flex; justify-content: center; align-items: center; gap: 1rem;
         }
-        .audio-utility-controls { flex-grow: 1; display: flex; justify-content: flex-end; }
-        .audio-player-btn {
-            background: none; border: none; cursor: pointer;
-            color: var(--text-secondary);
-            transition: var(--transition-smooth);
+        .audio-utility-controls {
+            display: flex; align-items: center; justify-content: space-between;
+            width: 100%; padding: 0 1rem;
+        }
+        .audio-btn {
+            background: none; border: none; cursor: pointer; color: var(--theme-text-secondary);
             display: flex; align-items: center; justify-content: center;
-            padding: 8px;
-            border-radius: 50%;
+            border-radius: 50%; transition: var(--transition-fast);
         }
-        .audio-player-btn:hover { color: var(--accent-primary); background-color: var(--input-bg); }
-        .audio-player-btn:active { transform: scale(0.9); }
-        .audio-player-btn svg { width: 24px; height: 24px; fill: currentColor; }
+        .audio-btn:hover { color: var(--theme-accent-primary); background-color: var(--theme-accent-primary-glow); }
+        .audio-btn:active { transform: scale(0.92); }
+        .audio-skip-btn { width: 44px; height: 44px; }
+        .audio-skip-btn svg { width: 26px; height: 26px; fill: currentColor; }
         .audio-play-pause-btn-large {
-            width: 60px; height: 60px;
-            background-color: var(--accent-primary);
-            color: white;
-            box-shadow: var(--shadow-medium);
+            width: 64px; height: 64px; color: #fff;
+            background-color: var(--theme-accent-primary); box-shadow: var(--theme-shadow-md);
         }
         .audio-play-pause-btn-large:hover {
-            background-color: var(--accent-primary-hover);
-            transform: scale(1.05);
+             background-color: var(--theme-accent-primary-hover);
+             transform: scale(1.05); color: #fff;
         }
-        .audio-play-pause-btn-large svg { width: 32px; height: 32px; }
+        .audio-play-pause-btn-large svg { width: 32px; height: 32px; fill: currentColor; }
+        .audio-volume-btn { width: 40px; height: 40px; }
+        .audio-volume-btn svg { width: 22px; height: 22px; fill: currentColor; }
         .audio-speed-btn {
             font-family: var(--app-font); font-size: 0.9em; font-weight: 600;
-            background-color: transparent; border: 1px solid var(--panel-border);
-            border-radius: 12px;
-            min-width: 50px; text-align: center;
-            padding: 6px 10px; color: var(--text-primary);
+            background-color: var(--theme-input-bg); border: 1px solid var(--theme-input-border);
+            border-radius: 10px; min-width: 45px; text-align: center;
+            color: var(--theme-text-primary); box-shadow: var(--theme-shadow-sm);
+            padding: 8px 12px;
         }
-        .audio-speed-btn:hover { background-color: var(--input-bg); border-color: var(--accent-primary); }
+        .audio-speed-btn:hover { background-color: var(--theme-panel-bg); border-color: var(--theme-accent-primary); }
 
-        /* --- Modals --- */
-        .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; align-items: center; justify-content: center;
-            z-index: 1000; opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        .modal-overlay.visible { display: flex; opacity: 1; }
-        .modal-dialog {
-            background: var(--panel-bg); padding: 2rem; border-radius: 24px;
-            width: 90%; box-shadow: var(--shadow-strong);
-            border: 1px solid var(--panel-border);
-            opacity: 0; 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; max-height: 85vh; overflow-y: auto; }
-        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.5rem; }
-        .speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; position: relative; }
-        .speaker-card .speaker-visual { border: 3px solid transparent; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-subtle); 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 ease; border-radius: 18px; }
-        .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 color-mix(in srgb, var(--accent-secondary) 75%, transparent); 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-name { color: var(--text-primary); font-weight: 700; }
-        
-        #hidden-audio-player { display: none; }
-
-        .app-footer {
-            padding: 1.5rem 0;
-            text-align: center;
-            font-size: 0.9em;
-            color: var(--text-secondary);
-        }
-        .app-footer a {
-            color: var(--accent-primary);
-            text-decoration: none;
-            font-weight: 600;
-        }
+        #hidden-audio-player { display: none !important; }
 
         @media (max-width: 600px) {
-            .container { width: 95%; margin: 1.5rem auto; }
-            .main-content, .modal-dialog { padding: 1.5rem; }
-            .app-header h1 { font-size: 1.8em; }
-            .audio-controls-group { flex-wrap: wrap; }
-            .audio-utility-controls { justify-content: center; gap: 1rem; margin-top: 1rem;}
+            body { padding: 1.5rem 0; }
+            .main-content { padding: 1.5rem; }
+            .app-header h1 { font-size: 2em; }
+            #selected-speaker-card { flex-direction: column; padding: 1rem; border-radius: var(--radius-card); }
+            #selected-speaker-card img { margin-left: 0; margin-bottom: 1rem; }
+            #audio-player-content { padding: 1.5rem 1rem; gap: 1rem; }
+            .audio-waveform { height: 60px; }
         }
-
     </style>
 </head>
 <body>
+
     <div class="container">
-        <header class="page-header">
-            <div></div> <!-- Spacer -->
-            <button class="theme-switcher" id="theme-switcher" aria-label="تغییر تم">
-                <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Zm12.44 4.28a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM12 19.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM4.28 19.94a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5h2.25a.75.75 0 0 1 .75.75ZM4.28 4.06a.75.75 0 0 0-1.06 1.06l1.59 1.591a.75.75 0 0 0 1.06-1.06L4.28 4.061ZM18.364 5.636a.75.75 0 0 1 .75-.75h.001a.75.75 0 0 1 .75.75v.001a.75.75 0 0 1-.75.75h-.001a.75.75 0 0 1-.75-.75V5.636Z"/></svg>
-                <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.981A10.503 10.503 0 0 1 18 19.5a10.5 10.5 0 1 1-8.472-17.782Z" clip-rule="evenodd" /></svg>
-            </button>
-        </header>
         <header class="app-header">
-            <h1>آلفا TTS</h1>
-            <p>صدایی نو، تجربه‌ای نوین در تبدیل متن به گفتار با هوش مصنوعی پیشرفته</p>
+            <div class="theme-switch-wrapper">
+                <label class="theme-switch" for="theme-toggle">
+                    <input type="checkbox" id="theme-toggle" />
+                    <div class="slider">
+                        <span class="sun-icon">☀️</span>
+                        <span class="moon-icon">🌙</span>
+                    </div>
+                </label>
+            </div>
+            <h1>مولد صدای هوشمند آلفا</h1>
+            <p>کیفیت استودیو، قدرت هوش مصنوعی. صدایی فراتر از انتظار خلق کنید.</p>
         </header>
 
         <main class="main-content">
             <form id="tts-form">
                 <div class="form-group">
-                    <label for="text-input">📝 متن مورد نظر</label>
-                    <textarea id="text-input" rows="5" placeholder="متن خود را اینجا وارد کنید..."></textarea>
+                    <label for="text-input">📝 متن اصلی</label>
+                    <textarea id="text-input" rows="5" placeholder="متن خود را برای تبدیل به گفتار اینجا وارد کنید..."></textarea>
                     <div class="char-counter-wrapper">
-                        <span id="char-count">0</span> / <span id="char-max">50,000</span>
+                        <span id="char-count">0</span> / <span id="char-max">50000</span> نویسه
                     </div>
                 </div>
-                
+
+                <div class="form-group">
+                    <label for="prompt-input">🗣️ توصیف لحن و احساس (اختیاری)</label>
+                    <input type="text" id="prompt-input" placeholder="مثال: با لحنی آرام و قصه‌گو، یا صدای یک گوینده خبر حرفه‌ای">
+                </div>
+
                 <div class="form-group">
-                    <label for="selected-speaker-card">🎤 گوینده</label>
-                    <div id="selected-speaker-card" title="برای تغییر گوینده کلیک کنید">
-                        <img id="selected-speaker-img" src="" alt="عکس گوینده">
-                        <div id="selected-speaker-info">
-                            <h3 id="selected-speaker-name"></h3>
-                            <p id="selected-speaker-desc"></p>
+                    <label>🎤 گوینده منتخب</label>
+                    <div id="selected-speaker-display">
+                        <div id="selected-speaker-card" title="برای تغییر گوینده کلیک کنید">
+                            <img id="selected-speaker-img" src="" alt="عکس گوینده">
+                            <div id="selected-speaker-info">
+                                <h3 id="selected-speaker-name"></h3>
+                                <p id="selected-speaker-desc"></p>
+                            </div>
                         </div>
+                        <button type="button" id="change-speaker-btn">تغییر گوینده</button>
                     </div>
                 </div>
-                
+
                 <div class="form-group">
-                    <label for="temperature-slider">🌡️ خلاقیت صدا (Temperature)</label>
+                    <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">
                         <span id="temperature-value">0.9</span>
                     </div>
                 </div>
 
-                <button type="submit" id="generate-btn">✨ تولید صدا</button>
+                <button type="submit" id="generate-btn">✨ خلق صدا با آلفا</button>
             </form>
 
             <div id="output-section">
-                <div id="status-message">صدای تولید شده در اینجا نمایش داده خواهد شد.</div>
+                <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>
-                     </div>
-                     <p id="loading-text">در حال پردازش هوشمند...</p>
+                    <div class="pulse-loader">
+                        <div class="pulse-icon">🔊</div>
+                        <div class="pulse-wave"></div>
+                        <div class="pulse-wave"></div>
+                        <div class="pulse-wave"></div>
+                    </div>
+                    <p id="loading-text">در حال پردازش هوشمند و ساخت صدا...</p>
                 </div>
-
+                
                 <div id="audio-player-content">
                     <div class="audio-waveform-container">
                         <span class="audio-time audio-current-time">0:00</span>
-                        <canvas id="audio-waveform"></canvas>
+                        <div class="audio-waveform">
+                            <canvas id="audio-waveform-canvas"></canvas>
+                        </div>
                         <span class="audio-time audio-total-time">0:00</span>
                     </div>
-                     <div class="audio-controls-group">
-                        <button class="audio-player-btn" id="download-btn" title="دانلود فایل صوتی">
-                            <svg viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zm14-9h-4V3H9v8H5l7 7 7-7z"></path></svg>
+
+                    <div class="audio-controls-group">
+                        <button class="audio-btn audio-skip-btn backward" title="۵ ثانیه به عقب">
+                            <svg viewBox="0 0 24 24"><path d="M11 16V8l-4 4 4 4zm4-12v16l7-8-7-8z"></path></svg>
+                        </button>
+                        <button class="audio-btn audio-play-pause-btn-large">
+                            <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-btn audio-skip-btn forward" title="۵ ثانیه به جلو">
+                            <svg viewBox="0 0 24 24"><path d="M13 16V8l4 4-4 4zM9 4v16L2 12l7-8z"></path></svg>
+                        </button>
+                    </div>
+
+                    <div class="audio-utility-controls">
+                        <button class="audio-btn audio-volume-btn" title="قطع/وصل صدا">
+                            <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-player-btn" id="skip-backward-btn" title="۵ ثانیه به عقب">
-                             <svg viewBox="0 0 24 24"><path d="M11 18V6l-5 6 5 6zm-7 6V6l-5 6 5 6z"></path></svg>
-                         </button>
-                         <button class="audio-player-btn audio-play-pause-btn-large" id="play-pause-btn">
-                             <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
-                             <svg class="pause-icon" style="display:none;" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
-                         </button>
-                         <button class="audio-player-btn" id="skip-forward-btn" title="۵ ثانیه به جلو">
-                             <svg viewBox="0 0 24 24"><path d="M13 18V6l5 6-5 6zm7-12v12l5-6-5-6z"></path></svg>
-                         </button>
-                         <div class="audio-utility-controls">
-                            <button class="audio-player-btn audio-speed-btn" id="speed-btn">1x</button>
-                         </div>
-                     </div>
+                        <button class="audio-speed-btn" title="تغییر سرعت پخش">1x</button>
+                    </div>
                 </div>
-                <audio id="hidden-audio-player"></audio>
+                <audio id="hidden-audio-player" style="display: none;"></audio>
             </div>
         </main>
     </div>
 
-    <footer class="app-footer">
-        <p>طراحی و توسعه با ❤️ توسط <a href="https://your-website.com" target="_blank">تیم آلفا</a> © 2024</p>
-    </footer>
-
-    <!-- مودال گالری گویندگان -->
+    <!-- Modals -->
     <div id="speaker-modal" class="modal-overlay">
         <div class="modal-dialog">
             <div class="modal-header">
-                <h2>گالری گویندگان</h2>
+                <h2>گالری گویندگان آلفا</h2>
                 <button type="button" class="close-modal-btn" data-modal-id="speaker-modal">×</button>
             </div>
             <div id="speaker-grid"></div>
         </div>
     </div>
-    
+    <div id="info-modal" class="modal-overlay">
+        <div class="modal-dialog" style="max-width: 520px;">
+            <div class="modal-header">
+                <h2>🌡️ خلاقیت و پویایی صدا</h2>
+                <button type="button" class="close-modal-btn" data-modal-id="info-modal">×</button>
+            </div>
+            <div>
+                 <p style="color: var(--theme-text-secondary); line-height: 1.9;">این پارامتر، میزان "غیرقابل پیش‌بینی بودن" و تنوع در صدای خروجی را کنترل می‌کند.</p>
+                 <p><strong>مقادیر بالاتر (نزدیک به ۱.۵):</strong> صدایی بسیار متنوع، احساسی و پویا ایجاد می‌کند. ایده‌آل برای محتوای خلاقانه و هنری.</p>
+                 <p><strong>مقادیر پایین‌تر (نزدیک به ۰.۱):</strong> صدایی پایدار، یکنواخت و قابل پیش‌بینی‌تر تولید می‌کند. مناسب برای خوانش متون رسمی و خبری.</p>
+            </div>
+        </div>
+    </div>
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
 
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            // --- API Configuration ---
-            const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
-            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=`;
-            const FN_INDEX = 1;
-
-            // --- Data ---
-            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: "آرام و متین" }, { id: "Laomedeia", name: "سهیل (مرد)", desc: "دوستانه و گیرا" }, { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح" }, { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ" }, { id: "Schedar", name: "نگار (زن)", desc: "مهربان و شیرین" }, { id: "Gacrux", name: "فرید (مرد)", desc: "پخته و قابل اعتماد" }, { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن" }, { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت" }, { id: "Algieba", name: "آناهیتا (زن)", desc: "با اصالت و شیک" }, { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی" }, { id: "Erinome", name: "رسا (مرد)", desc: "شفاف و گویا" }, { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت" }, { id: "Rasalthgeti", name: "الهه (زن)", desc: "اسرارآمیز و فریبنده" }, { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان" }, { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ" }, { id: "Callirrhoe", name: "نیما (مرد)", desc: "روایتگر و قصه‌گو" }, { id: "Autonoe", name: "هستی (زن)", "desc": "طبیعی و خودمانی" }, { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی" }, { id: "Iapetus", name: "ستاره (زن)", desc: "درخشان و گیرا" }, { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده" }, { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش" }, { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک" }, { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار" }
-            ];
-            const playbackSpeeds = [1.0, 1.25, 1.5, 0.75];
-            
-            // --- DOM Elements ---
-            const form = document.getElementById('tts-form');
-            const textInput = document.getElementById('text-input');
-            const tempSlider = document.getElementById('temperature-slider');
-            const tempValueSpan = document.getElementById('temperature-value');
-            const generateBtn = document.getElementById('generate-btn');
-            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 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');
-            const speakerModal = document.getElementById('speaker-modal');
-            const charCountSpan = document.getElementById('char-count');
-            const themeSwitcher = document.getElementById('theme-switcher');
-
-            // 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 waveformCanvas = document.getElementById('audio-waveform');
-            const waveformCtx = waveformCanvas.getContext('2d');
-            const playPauseBtn = document.getElementById('play-pause-btn');
-            const skipBackwardBtn = document.getElementById('skip-backward-btn');
-            const skipForwardBtn = document.getElementById('skip-forward-btn');
-            const speedBtn = document.getElementById('speed-btn');
-            const downloadBtn = document.getElementById('download-btn');
-
-            // --- State Variables ---
-            let currentPlaybackSpeedIndex = 0;
-            let audioContext;
-            let decodedAudioBuffer; // Store decoded audio data to prevent re-fetching
-            let animationFrameId;
-
-            // --- Initial Setup ---
-            const init = () => {
-                setupEventListeners();
-                initTheme();
-                updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
-                resetUI();
-            };
-
-            // --- UI & State Management ---
-            const setupEventListeners = () => {
-                form.addEventListener('submit', generateAudio);
-                textInput.addEventListener('input', updateCharCounter);
-                tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
-                themeSwitcher.addEventListener('click', toggleTheme);
-                selectedSpeakerCard.addEventListener('click', () => {
-                    createSpeakerCardsInModal();
-                    showModal(speakerModal);
-                });
-                document.querySelectorAll('.modal-overlay').forEach(o => o.addEventListener('click', e => e.target === o && hideModal(o)));
-                document.querySelectorAll('.close-modal-btn').forEach(b => b.addEventListener('click', () => hideModal(document.getElementById(b.dataset.modalId))));
-                document.addEventListener('keydown', e => e.key === 'Escape' && document.querySelectorAll('.modal-overlay.visible').forEach(hideModal));
-                setupAudioPlayerListeners();
-            };
-            
-            const resetUI = () => {
-                statusMessage.style.display = 'block';
-                loadingAnimationWrapper.style.display = 'none';
-                audioPlayerContent.style.display = 'none';
-                outputSection.classList.remove('has-content');
-                generateBtn.disabled = false;
-                generateBtn.innerHTML = '✨ تولید صدا';
-            };
+    document.addEventListener('DOMContentLoaded', () => {
+        const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
+        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=`;
+        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: "آرام و متین" }, { id: "Laomedeia", name: "سهیل (مرد)", desc: "دوستانه و گیرا" }, { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح" }, { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ" }, { id: "Schedar", name: "نگار (زن)", desc: "مهربان و شیرین" }, { id: "Gacrux", name: "فرید (مرد)", desc: "پخته و قابل اعتماد" }, { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن" }, { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت" }, { id: "Algieba", name: "آناهیتا (زن)", desc: "با اصالت و شیک" }, { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی" }, { id: "Erinome", name: "رسا (مرد)", desc: "شفاف و گویا" }, { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت" }, { id: "Rasalthgeti", name: "الهه (زن)", desc: "اسرارآمیز و فریبنده" }, { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان" }, { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ" }, { id: "Callirrhoe", name: "نیما (مرد)", desc: "روایتگر و قصه‌گو" }, { id: "Autonoe", name: "هستی (زن)", "desc": "طبیعی و خودمانی" }, { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی" }, { id: "Iapetus", name: "ستاره (زن)", desc: "درخشان و گیرا" }, { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده" }, { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش" }, { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک" }, { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار" }
+        ];
+
+        // --- DOM Elements ---
+        const themeToggle = document.getElementById('theme-toggle');
+        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 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');
+        const speakerModal = document.getElementById('speaker-modal');
+        const infoModal = document.getElementById('info-modal');
+        const tempInfoIcon = document.getElementById('temp-info-icon');
+        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');
+
+        let currentPlaybackSpeedIndex = 0;
+        const playbackSpeeds = [1.0, 1.25, 1.5, 0.75];
+        let audioPeaks = [];
+        let audioContext = null;
+        let audioBufferCache = null;
+
+        // --- Theme Management ---
+        const applyTheme = (theme) => {
+            if (theme === 'dark') {
+                document.documentElement.classList.add('dark-mode');
+                themeToggle.checked = true;
+            } else {
+                document.documentElement.classList.remove('dark-mode');
+                themeToggle.checked = false;
+            }
+        };
+        themeToggle.addEventListener('change', () => {
+            const newTheme = themeToggle.checked ? 'dark' : 'light';
+            localStorage.setItem('alpha-tts-theme', newTheme);
+            applyTheme(newTheme);
+            // Redraw waveform with new theme colors if audio is loaded
+            if (audioBufferCache) {
+                updatePlayerUI();
+            }
+        });
+        const savedTheme = localStorage.getItem('alpha-tts-theme') || 'light';
+        applyTheme(savedTheme);
+
+
+        // --- Character Counter ---
+        const charCountSpan = document.getElementById('char-count');
+        const charMaxSpan = document.getElementById('char-max');
+        const MAX_CHARS = 50000;
+        charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR');
+        textInput.addEventListener('input', () => {
+            const currentLength = textInput.value.length;
+            charCountSpan.textContent = currentLength.toLocaleString('fa-IR');
+            charCountSpan.style.color = currentLength > MAX_CHARS ? 'red' : 'var(--theme-accent-primary)';
+        });
 
-            const showLoadingState = () => {
-                outputSection.classList.remove('has-content');
-                statusMessage.style.display = 'none';
-                loadingAnimationWrapper.style.display = 'flex';
-                audioPlayerContent.style.display = 'none';
-                generateBtn.disabled = true;
-                generateBtn.innerHTML = `
-                    <svg style="animation: spin 1s linear infinite; width:1.2em; height:1.2em; margin-left: 0.5em;" fill="currentColor" viewBox="0 0 20 20"><path d="M10 3a7 7 0 100 14A7 7 0 0010 3zM8 12a4 4 0 118 0 4 4 0 01-8 0z"/></svg>
-                    در حال پردازش...
+        // --- Speaker Logic ---
+        const getSpeakerById = (id) => speakers.find(s => s.id === id) || speakers[0];
+        const getImageUrl = (speaker, index, size = 'thumb') => {
+            const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
+            const imageIndex = (speaker.id.charCodeAt(0) + index) % 100;
+            return `https://randomuser.me/api/portraits/${size === 'large' ? '' : 'med/'}${gender}/${imageIndex}.jpg`;
+        };
+        const updateSelectedSpeakerDisplay = (speakerId) => {
+            const speaker = getSpeakerById(speakerId);
+            const speakerIndex = speakers.findIndex(s => s.id === speaker.id);
+            selectedSpeakerImgDisplay.src = getImageUrl(speaker, speakerIndex, 'large');
+            selectedSpeakerNameDisplay.textContent = speaker.name;
+            selectedSpeakerDescDisplay.textContent = speaker.desc;
+            selectedSpeakerIdStorage.value = speaker.id;
+        };
+        const createSpeakerCardsInModal = () => {
+            speakerGridInModal.innerHTML = '';
+            speakers.forEach((speaker, index) => {
+                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, index, 'thumb')}" alt="${speaker.name}" loading="lazy">
+                    </div>
+                    <div class="speaker-name">${speaker.name}</div>
                 `;
-            };
-
-            const showResultState = (isSuccess, message = '') => {
-                loadingAnimationWrapper.style.display = 'none';
-                if (isSuccess) {
-                    audioPlayerContent.style.display = 'flex';
-                    outputSection.classList.add('has-content');
-                } else {
-                    statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
-                    statusMessage.style.display = 'block';
-                    outputSection.classList.remove('has-content');
-                    hiddenAudioPlayer.src = '';
-                    decodedAudioBuffer = null;
-                }
-                generateBtn.disabled = false;
-                generateBtn.innerHTML = '✨ تولید صدا';
-            };
-            
-            // --- Theme Management ---
-            const initTheme = () => {
-                const savedTheme = localStorage.getItem('alpha-tts-theme') || 'light';
-                document.body.classList.toggle('dark-mode', savedTheme === 'dark');
-            };
-
-            const toggleTheme = () => {
-                const isDark = document.body.classList.toggle('dark-mode');
-                localStorage.setItem('alpha-tts-theme', isDark ? 'dark' : 'light');
-            };
-
-            // --- Speaker Selection ---
-            const getImageUrl = (speaker, index) => `https://i.pravatar.cc/150?u=${speaker.id}`;
-            const getSpeakerById = id => speakers.find(s => s.id === id) || speakers[0];
-
-            const updateSelectedSpeakerDisplay = (speakerId) => {
-                const speaker = getSpeakerById(speakerId);
-                selectedSpeakerImgDisplay.src = getImageUrl(speaker);
-                selectedSpeakerNameDisplay.textContent = speaker.name;
-                selectedSpeakerDescDisplay.textContent = speaker.desc;
-                selectedSpeakerIdStorage.value = speaker.id;
-            };
-
-            const createSpeakerCardsInModal = () => {
-                speakerGridInModal.innerHTML = speakers.map((speaker, index) => {
-                    const isChecked = speaker.id === selectedSpeakerIdStorage.value;
-                    return `
-                        <label class="speaker-card" for="modal-speaker-${speaker.id}">
-                            <input type="radio" name="modal_speaker_selection" value="${speaker.id}" id="modal-speaker-${speaker.id}" ${isChecked ? 'checked' : ''}>
-                            <div class="speaker-visual">
-                                <img src="${getImageUrl(speaker, index)}" alt="${speaker.name}" loading="lazy">
-                            </div>
-                            <span class="speaker-name">${speaker.name}</span>
-                        </label>`;
-                }).join('');
-
-                speakerGridInModal.querySelectorAll('.speaker-card').forEach(card => {
-                    card.addEventListener('click', () => {
-                        const radio = card.querySelector('input');
-                        if (radio) {
-                            updateSelectedSpeakerDisplay(radio.value);
-                            hideModal(speakerModal);
-                        }
-                    });
-                });
-            };
-
-            // --- Modal Management ---
-            const showModal = (modal) => modal.classList.add('visible');
-            const hideModal = (modal) => {
-                modal.classList.add('hiding');
-                modal.addEventListener('animationend', () => modal.classList.remove('visible', 'hiding'), { once: true });
-            };
-
-            // --- Form Helpers ---
-            const updateCharCounter = () => {
-                charCountSpan.textContent = textInput.value.length.toLocaleString('fa-IR');
-            };
-
-            // --- Audio Player ---
-            const setupAudioPlayerListeners = () => {
-                playPauseBtn.addEventListener('click', togglePlayPause);
-                skipBackwardBtn.addEventListener('click', () => hiddenAudioPlayer.currentTime = Math.max(0, hiddenAudioPlayer.currentTime - 5));
-                skipForwardBtn.addEventListener('click', () => hiddenAudioPlayer.currentTime = Math.min(hiddenAudioPlayer.duration, hiddenAudioPlayer.currentTime + 5));
-                speedBtn.addEventListener('click', cyclePlaybackSpeed);
-                downloadBtn.addEventListener('click', downloadAudio);
-
-                waveformCanvas.addEventListener('click', (e) => {
-                    const rect = waveformCanvas.getBoundingClientRect();
-                    const clickPosition = (e.clientX - rect.left) / rect.width;
-                    hiddenAudioPlayer.currentTime = hiddenAudioPlayer.duration * clickPosition;
+                cardLabel.addEventListener('click', () => {
+                    updateSelectedSpeakerDisplay(speaker.id);
+                    hideModal(speakerModal);
                 });
+                speakerGridInModal.appendChild(cardLabel);
+            });
+        };
+
+        // --- Modal Management ---
+        const showModal = (modalElement) => {
+            modalElement.classList.add('visible');
+            setTimeout(() => modalElement.querySelector('button')?.focus(), 50);
+        };
+        const hideModal = (modalElement) => modalElement.classList.remove('visible');
+        changeSpeakerBtn.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); });
+        selectedSpeakerCard.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); });
+        tempInfoIcon.addEventListener('click', () => showModal(infoModal));
+        document.querySelectorAll('.modal-overlay').forEach(o => o.addEventListener('click', (e) => (e.target === o) && hideModal(o)));
+        document.querySelectorAll('.close-modal-btn').forEach(b => b.addEventListener('click', () => hideModal(document.getElementById(b.dataset.modalId))));
+        document.addEventListener('keydown', (e) => (e.key === 'Escape') && document.querySelectorAll('.modal-overlay.visible').forEach(hideModal));
+        tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
+
+        // --- Professional Audio Player Logic ---
+        const 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}`;
+        };
+
+        const drawWaveform = (progressRatio = 0) => {
+            const dpr = window.devicePixelRatio || 1;
+            audioWaveformCanvas.width = audioWaveformCanvas.offsetWidth * dpr;
+            audioWaveformCanvas.height = audioWaveformCanvas.offsetHeight * dpr;
+            waveformCtx.scale(dpr, dpr);
+
+            const width = audioWaveformCanvas.offsetWidth;
+            const height = audioWaveformCanvas.offsetHeight;
+            const centerY = height / 2;
+            const barWidth = 2;
+            const barGap = 2;
+            const numBars = Math.floor(width / (barWidth + barGap));
+            const activeBars = Math.floor(progressRatio * numBars);
+
+            const activeColor = getComputedStyle(document.documentElement).getPropertyValue('--theme-waveform-active').trim();
+            const inactiveColor = getComputedStyle(document.documentElement).getPropertyValue('--theme-waveform-inactive').trim();
+
+            waveformCtx.clearRect(0, 0, width, height);
+            waveformCtx.lineWidth = barWidth;
+
+            for (let i = 0; i < numBars; i++) {
+                const peak = audioPeaks[i] || 0;
+                const barHeight = peak * height * 0.8; // Use 80% of height for better visual
+                const x = i * (barWidth + barGap);
                 
-                hiddenAudioPlayer.addEventListener('loadedmetadata', handleAudioLoaded);
-                hiddenAudioPlayer.addEventListener('play', () => updatePlayPauseIcon(false));
-                hiddenAudioPlayer.addEventListener('pause', () => updatePlayPauseIcon(true));
-                hiddenAudioPlayer.addEventListener('ended', () => {
-                    updatePlayPauseIcon(true);
-                    hiddenAudioPlayer.currentTime = 0;
-                });
-                hiddenAudioPlayer.addEventListener('timeupdate', () => {
-                    if(!animationFrameId) {
-                        animationFrameId = requestAnimationFrame(updatePlayerUI);
-                    }
-                });
-                window.addEventListener('resize', () => {
-                    if (decodedAudioBuffer) {
-                        resizeCanvas();
-                        drawWaveform(hiddenAudioPlayer.currentTime / hiddenAudioPlayer.duration);
-                    }
-                });
-            };
-
-            const togglePlayPause = () => {
-                if (hiddenAudioPlayer.paused) {
-                    hiddenAudioPlayer.play().catch(e => console.error("Play failed:", e));
-                } else {
-                    hiddenAudioPlayer.pause();
-                }
-            };
-            
-            const updatePlayPauseIcon = (isPaused) => {
-                playPauseBtn.querySelector('.play-icon').style.display = isPaused ? 'block' : 'none';
-                playPauseBtn.querySelector('.pause-icon').style.display = isPaused ? 'none' : 'block';
-            };
-            
-            const cyclePlaybackSpeed = () => {
-                currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length;
-                const newSpeed = playbackSpeeds[currentPlaybackSpeedIndex];
-                hiddenAudioPlayer.playbackRate = newSpeed;
-                speedBtn.textContent = `${newSpeed}x`;
-            };
-
-            const formatTime = (seconds) => {
-                if (isNaN(seconds) || seconds < 0) return '0:00';
-                const min = Math.floor(seconds / 60);
-                const sec = Math.floor(seconds % 60);
-                return `${min}:${sec < 10 ? '0' : ''}${sec}`;
-            };
-            
-            const updatePlayerUI = () => {
-                const currentTime = hiddenAudioPlayer.currentTime;
-                const duration = hiddenAudioPlayer.duration;
-                audioCurrentTimeSpan.textContent = formatTime(currentTime);
-
-                if (isFinite(duration) && duration > 0) {
-                    drawWaveform(currentTime / duration);
-                }
-                animationFrameId = null;
-            };
-
-            const resizeCanvas = () => {
-                waveformCanvas.width = waveformCanvas.offsetWidth * window.devicePixelRatio;
-                waveformCanvas.height = waveformCanvas.offsetHeight * window.devicePixelRatio;
-            };
-            
-            const handleAudioLoaded = async () => {
-                if (!audioContext) {
-                    try {
-                        audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                    } catch (e) {
-                        console.error("AudioContext not supported.", e);
-                        return;
-                    }
-                }
-                audioTotalTimeSpan.textContent = formatTime(hiddenAudioPlayer.duration);
-                resizeCanvas();
-                
-                // Fetch and process audio only if we don't have it already
-                if (!decodedAudioBuffer || hiddenAudioPlayer.src !== (decodedAudioBuffer.src || '')) {
-                    try {
-                        const response = await fetch(hiddenAudioPlayer.src);
-                        const arrayBuffer = await response.arrayBuffer();
-                        decodedAudioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-                        decodedAudioBuffer.src = hiddenAudioPlayer.src; // Tag the buffer with its source
-                    } catch (e) {
-                        console.error("Error decoding audio data:", e);
-                        decodedAudioBuffer = null;
-                        drawEmptyWaveform();
-                        return;
-                    }
-                }
+                waveformCtx.strokeStyle = i < activeBars ? activeColor : inactiveColor;
+                waveformCtx.beginPath();
+                waveformCtx.moveTo(x, centerY - barHeight / 2);
+                waveformCtx.lineTo(x, centerY + barHeight / 2);
+                waveformCtx.stroke();
+            }
+        };
+
+        const updatePlayerUI = () => {
+            playIcon.style.display = hiddenAudioPlayer.paused ? 'block' : 'none';
+            pauseIcon.style.display = !hiddenAudioPlayer.paused ? 'block' : 'none';
+
+            const currentTime = hiddenAudioPlayer.currentTime;
+            const duration = hiddenAudioPlayer.duration;
+            audioCurrentTimeSpan.textContent = formatTime(currentTime);
+
+            if (isFinite(duration) && duration > 0) {
+                audioTotalTimeSpan.textContent = formatTime(duration);
+                drawWaveform(currentTime / duration);
+            } else {
+                audioTotalTimeSpan.textContent = '0:00';
                 drawWaveform(0);
-            };
-
-            const drawWaveform = (progressRatio) => {
-                if (!decodedAudioBuffer) return drawEmptyWaveform();
-                
-                const peaks = getPeaks(decodedAudioBuffer);
-                const dpr = window.devicePixelRatio || 1;
-                const width = waveformCanvas.width;
-                const height = waveformCanvas.height;
-                const centerY = height / 2;
-
-                waveformCtx.clearRect(0, 0, width, height);
-
-                const activeColor = getComputedStyle(document.documentElement).getPropertyValue('--accent-primary').trim();
-                const inactiveColor = getComputedStyle(document.documentElement).getPropertyValue('--panel-border').trim();
-
-                const progressPoint = Math.floor(peaks.length * progressRatio);
-                
-                for (let i = 0; i < peaks.length; i++) {
-                    const x = (i / peaks.length) * width;
-                    const h = peaks[i] * height;
-
-                    waveformCtx.fillStyle = i < progressPoint ? activeColor : inactiveColor;
-                    waveformCtx.fillRect(x, centerY - h / 2, 2 * dpr, h);
+            }
+        };
+
+        const processAudioForWaveform = async (audioBuffer) => {
+            if (!audioBuffer) { audioPeaks = []; return; }
+            audioBufferCache = audioBuffer; // Cache the buffer
+            const channelData = audioBuffer.getChannelData(0);
+            const numBars = Math.floor(audioWaveformCanvas.offsetWidth / 4); // 4 = barWidth+barGap
+            const samplesPerBar = Math.floor(channelData.length / numBars);
+            const peaks = [];
+
+            for (let i = 0; i < numBars; i++) {
+                let maxPeak = 0;
+                const start = i * samplesPerBar;
+                for (let j = 0; j < samplesPerBar; j++) {
+                    const value = Math.abs(channelData[start + j]);
+                    if (value > maxPeak) maxPeak = value;
                 }
-            };
+                peaks.push(Math.min(1, Math.max(0, maxPeak * 1.5))); // Amplify for better visuals
+            }
+            audioPeaks = peaks;
+            drawWaveform(0);
+        };
+        
+        playPauseBtn.addEventListener('click', () => hiddenAudioPlayer.paused ? hiddenAudioPlayer.play() : 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';
+        });
+        speedBtn.addEventListener('click', () => {
+            currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length;
+            const newSpeed = playbackSpeeds[currentPlaybackSpeedIndex];
+            hiddenAudioPlayer.playbackRate = newSpeed;
+            speedBtn.textContent = `${newSpeed}x`;
+        });
 
-            const drawEmptyWaveform = () => {
-                const width = waveformCanvas.width;
-                const height = waveformCanvas.height;
-                waveformCtx.clearRect(0, 0, width, height);
-            };
+        hiddenAudioPlayer.addEventListener('timeupdate', updatePlayerUI);
+        hiddenAudioPlayer.addEventListener('play', updatePlayerUI);
+        hiddenAudioPlayer.addEventListener('pause', updatePlayerUI);
+        hiddenAudioPlayer.addEventListener('ended', () => { hiddenAudioPlayer.currentTime = 0; updatePlayerUI(); });
+        hiddenAudioPlayer.addEventListener('loadedmetadata', async () => {
+            if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            try {
+                const response = await fetch(hiddenAudioPlayer.src);
+                const arrayBuffer = await response.arrayBuffer();
+                const decodedBuffer = await audioContext.decodeAudioData(arrayBuffer);
+                await processAudioForWaveform(decodedBuffer);
+            } catch (e) {
+                console.error("Error decoding audio for waveform:", e);
+                audioPeaks = [];
+            }
+            updatePlayerUI();
+        });
 
-            const getPeaks = (buffer) => {
-                const width = waveformCanvas.offsetWidth;
-                const channelData = buffer.getChannelData(0);
-                const step = Math.ceil(channelData.length / width);
-                const peaks = [];
-                for (let i = 0; i < width; i++) {
-                    let min = 1.0;
-                    let max = -1.0;
-                    for (let j = 0; j < step; j++) {
-                        const datum = channelData[(i * step) + j];
-                        if (datum < min) min = datum;
-                        if (datum > max) max = datum;
-                    }
-                    peaks.push(Math.max(0.01, (max - min) * 0.5));
+        let resizeTimeout;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                if (outputSection.classList.contains('has-content') && audioBufferCache) {
+                    processAudioForWaveform(audioBufferCache).then(updatePlayerUI);
                 }
-                return peaks;
-            };
+            }, 250);
+        });
 
-            const downloadAudio = async () => {
-                if (!hiddenAudioPlayer.src) return;
-                try {
-                    const response = await fetch(hiddenAudioPlayer.src);
-                    const blob = await response.blob();
-                    const url = window.URL.createObjectURL(blob);
-                    const a = document.createElement('a');
-                    a.style.display = 'none';
-                    a.href = url;
-                    a.download = `AlphaTTS-${getSpeakerById(selectedSpeakerIdStorage.value).name}-${Date.now()}.mp3`;
-                    document.body.appendChild(a);
-                    a.click();
-                    window.URL.revokeObjectURL(url);
-                    a.remove();
-                } catch (e) {
-                    console.error('Download failed:', e);
-                    alert('خطا در دانلود فایل.');
-                }
+        // --- State Management ---
+        const showLoadingState = () => {
+            audioPlayerContent.style.display = 'none';
+            outputSection.classList.remove('has-content');
+            statusMessage.style.display = 'none';
+            loadingAnimationWrapper.style.display = 'flex';
+            generateBtn.disabled = true;
+            generateBtn.textContent = 'در حال پردازش...';
+        };
+
+        const showResultState = (isSuccess, message = '') => {
+            loadingAnimationWrapper.style.display = 'none';
+            if (isSuccess) {
+                statusMessage.style.display = 'none';
+                audioPlayerContent.style.display = 'flex';
+                outputSection.classList.add('has-content');
+            } else {
+                statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
+                statusMessage.style.display = 'block';
+                audioPlayerContent.style.display = 'none';
+                outputSection.classList.remove('has-content');
+                hiddenAudioPlayer.src = '';
+                audioPeaks = [];
+                audioBufferCache = null;
+                drawWaveform(0);
+            }
+            generateBtn.disabled = false;
+            generateBtn.innerHTML = '✨ خلق صدا با آلفا';
+        };
+
+        // --- API Call ---
+        const generateAudio = async (event) => {
+            event.preventDefault();
+            showLoadingState();
+
+            const text = textInput.value;
+            if (!text.trim()) {
+                showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
+                return;
+            }
+            if (text.length > MAX_CHARS) {
+                showResultState(false, `خطا: طول متن بیش از ${MAX_CHARS.toLocaleString('fa-IR')} نویسه است.`);
+                return;
+            }
+
+            const payload = {
+                fn_index: FN_INDEX,
+                data: [false, null, text, promptInput.value, selectedSpeakerIdStorage.value, parseFloat(tempSlider.value)],
+                event_data: null,
+                session_hash: Math.random().toString(36).substring(2)
             };
-            
-            // --- API Call ---
-            const generateAudio = async (event) => {
-                event.preventDefault();
-                showLoadingState();
-                decodedAudioBuffer = null; // Clear previous audio buffer
-
-                const text = textInput.value;
-                if (!text.trim()) {
-                    return showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
-                }
 
-                const payload = {
-                    fn_index: FN_INDEX,
-                    data: [false, null, text, "", selectedSpeakerIdStorage.value, parseFloat(tempSlider.value)],
-                    session_hash: Math.random().toString(36).substring(2)
-                };
-
-                try {
-                    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 pollData = async () => {
-                        const dataRes = await fetch(`${GET_DATA_URL_BASE}?session_hash=${payload.session_hash}`);
-                        if (!dataRes.ok) throw new Error(`خطا در دریافت داده (${dataRes.status})`);
-                        
-                        const text = await dataRes.text();
-                        const lines = text.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 || 'پردازش با خطا مواجه شد.');
-                            } else if (data.msg === 'queue_full') {
-                                throw new Error('صف پردازش پر است، لطفا لحظاتی دیگر تلاش کنید.');
+            try {
+                const joinResponse = await fetch(JOIN_QUEUE_URL, {
+                    method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload)
+                });
+                if (!joinResponse.ok) throw new Error(`خطا در اتصال به سرویس (${joinResponse.status}).`);
+
+                let finalFilePath = null;
+                const startTime = Date.now();
+                const timeout = 90000;
+
+                while (Date.now() - startTime < timeout) {
+                    const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${payload.session_hash}`);
+                    if (!dataResponse.ok) throw new Error(`خطا در دریافت داده (${dataResponse.status})`);
+
+                    const lines = (await dataResponse.text()).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]?.name) {
+                                finalFilePath = data.output.data[0].name;
+                            } else {
+                                throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.');
                             }
+                            break;
+                        } else if (data.msg === 'queue_full') {
+                            throw new Error('صف پردازش پر است. لطفا کمی بعد تلاش کنید.');
                         }
-                        return null; // Not finished yet
-                    };
-
-                    let finalFilePath = null;
-                    const startTime = Date.now();
-                    while (Date.now() - startTime < 90000) { // 90s timeout
-                        finalFilePath = await pollData();
-                        if (finalFilePath) break;
-                        await new Promise(resolve => setTimeout(resolve, 1000));
-                    }
-
-                    if (finalFilePath) {
-                        hiddenAudioPlayer.src = finalFilePath;
-                        showResultState(true);
-                    } else {
-                        throw new Error('پردازش بیش از حد طول کشید.');
                     }
-                } catch (error) {
-                    console.error('Audio generation failed:', error);
-                    showResultState(false, error.message);
+                    if (finalFilePath) break;
+                    await new Promise(resolve => setTimeout(resolve, 1000));
                 }
-            };
 
-            // Let's go!
-            init();
-        });
+                if (finalFilePath) {
+                    hiddenAudioPlayer.src = `${FILE_URL_BASE}${finalFilePath}`;
+                    showResultState(true);
+                } else {
+                    throw new Error(Date.now() - startTime >= timeout ? 'پردازش بیش از حد طول کشید.' : 'فایل صوتی دریافت نشد.');
+                }
+            } catch (error) {
+                console.error('خطا در فرآیند تولید صدا:', error);
+                showResultState(false, error.message);
+            }
+        };
+
+        // --- Initial Setup ---
+        updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
+        form.addEventListener('submit', generateAudio);
+        statusMessage.style.display = 'block';
+        loadingAnimationWrapper.style.display = 'none';
+        audioPlayerContent.style.display = 'none';
+        outputSection.classList.remove('has-content');
+    });
     </script>
 </body>
 </html>
\ No newline at end of file