Update src/App.scss

src/App.scss

@@ -1,4 +1,4 @@
-// src/App.scss (نسخه نهایی و کامل با همه اصلاحات)
+// src/App.scss (نسخه نهایی با اصلاح مرکزچین کردن نام گویندگان)
 
 // 1. Import Tailwind's base, components, and utilities
 @import 'tailwindcss/base';
@@ -165,15 +165,31 @@
   grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
   gap: 12px; padding: 4px 8px 8px;
 }
+
+// ✅ تغییر اصلی اینجاست
 .voice-card {
-  cursor: pointer; text-align: center;
+  cursor: pointer;
+  // text-align: center; // این دیگر لازم نیست
+  // استفاده از Flexbox برای کنترل دقیق چینش
+  display: flex;
+  flex-direction: column;
+  align-items: center; // این خط همه چیز را در مرکز افقی قرار می‌دهد
+
   img {
     width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
     border: 3px solid transparent; transition: border-color 0.2s, transform 0.2s;
     &:hover { transform: scale(1.05); }
   }
   &.active img { border-color: #0a84ff; transform: scale(1.05); }
-  .voice-name { font-size: 0.75rem; margin-top: 4px; color: theme('colors.custom-foreground'); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .voice-name {
+    font-size: 0.75rem;
+    margin-top: 4px;
+    color: theme('colors.custom-foreground');
+    opacity: 0.8;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 @keyframes pulse-glow {
@@ -182,32 +198,7 @@
   100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); }
 }
 
-/* استایل پیغام تایید (Toast) */
-.confirmation-toast {
-  position: fixed;
-  bottom: 110px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: rgba(44, 44, 46, 0.9);
-  color: #fff;
-  padding: 12px 24px;
-  border-radius: 999px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  z-index: 1001;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-  backdrop-filter: blur(5px);
-  animation: fade-in-out 3s ease-in-out forwards;
-}
-
-@keyframes fade-in-out {
-  0% { opacity: 0; transform: translate(-50%, 20px); }
-  15% { opacity: 1; transform: translate(-50%, 0); }
-  85% { opacity: 1; transform: translate(-50%, 0); }
-  100% { opacity: 0; transform: translate(-50%, 20px); }
-}
-
-/* استایل ویدیو و کنترل‌ها */
+/* ویدیو و کنترل‌ها */
 .media-area {
     position: absolute; top: 0; left: 0; width: 100%; height: 100%;
     z-index: 1; overflow: hidden;