Update static/css/style.css

static/css/style.css

@@ -1,4 +1,5 @@
 :root { --bg: #0f0f0f; --surface: #1e1e1e; --primary: #7C4DFF; --text: #fff; --highlight: #2a2a2a; --panel-bg: #151515; --static-color: #A020F0; --accent-orange: #FF7043; --danger-red: #ff5252; --chip-bg: #2c2c2c; --input-bg: #2a2a2a; }
+
 * { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
 
 body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Vazirmatn'; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 50px;}
@@ -9,9 +10,9 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Vazir
 
 .projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-bottom: 80px; }
 
-.project-card { 
-    background: #252525; border-radius: 20px; overflow: hidden; position: relative; 
-    box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: 0.2s; cursor: pointer; aspect-ratio: 1 / 1.1; display: flex; flex-direction: column;
+.project-card {
+background: #252525; border-radius: 20px; overflow: hidden; position: relative;
+box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: 0.2s; cursor: pointer; aspect-ratio: 1 / 1.1; display: flex; flex-direction: column;
 }
 .project-card:active { transform: scale(0.97); }
 
@@ -56,31 +57,29 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Vazir
 .modal-btn { flex: 1; padding: 12px; border-radius: 12px; border: none; font-family: inherit; font-weight: bold; cursor: pointer; transition: 0.2s; }
 .btn-confirm { background: var(--primary); color: #fff; }
 .btn-cancel { background: #333; color: #fff; }
-.btn-confirm-action.split { background: #00C853; } 
-.btn-confirm-action.delete { background: #d32f2f; } 
+.btn-confirm-action.split { background: #00C853; }
+.btn-confirm-action.delete { background: #d32f2f; }
 
 #editorScreen { display: none; width: 100%; flex-direction: column; min-height: 100vh; }
 .top-bar { position: sticky; top: 0; height: 60px; background: rgba(30,30,30,0.95); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 100; border-bottom: 1px solid #333; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
 .btn-home { background: transparent; color: #ccc; border: none; font-size: 1.2rem; cursor: pointer; padding: 10px; }
 
-/* اصلاح شده برای وسط‌چین کردن دقیق ویدیو */
-#workspace { 
-    width: 100%; 
-    display: flex; 
-    justify-content: center; 
-    align-items: center; /* مرکز در محور عمودی */
-    background: #000; 
-    padding: 20px 0; 
-    min-height: 300px; 
-    flex-shrink: 0; 
-    overflow: hidden; /* جلوگیری از اسکرول اضافه */
-}
-#scaler { 
-    transform-origin: center center; /* بزرگ‌نمایی از مرکز */
-    transition: transform 0.1s ease-out; 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+#workspace {
+width: 100%;
+display: flex;
+justify-content: center;
+align-items: center;
+background: #000;
+padding: 20px 0;
+min-height: 300px;
+flex-shrink: 0;
+overflow: hidden; 
+}
+#scaler {
+transition: transform 0.1s ease-out;
+display: flex;
+justify-content: center;
+align-items: center;
 }
 #videoContainer { position: relative; background: #000; overflow: hidden; cursor: pointer; box-shadow: 0 0 30px rgba(124, 77, 255, 0.1); border-radius: 8px;}
 video { width: 100%; height: 100%; object-fit: contain; display: block; }
@@ -116,22 +115,46 @@ video { width: 100%; height: 100%; object-fit: contain; display: block; }
 label { display: block; margin-bottom: 8px; color: #ccc; font-size: 0.9rem; }
 textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; padding: 15px; border-radius: 12px; font-family: inherit; font-size: 1rem; margin-bottom: 15px; resize: vertical; min-height: 80px; }
 
-.style-grid { display: flex; flex-direction: column; gap: 15px; width: 100%; }
+/* --- تغییرات اصلی این بخش: گرید و ابعاد کارت --- */
+.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
+
 .style-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-.style-card { background: #333; border: 2px solid transparent; border-radius: 15px; padding: 15px 20px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 110px; width: 100%; position: relative; transition: all 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
-.style-grid-2col .style-card { min-height: 100px; height: auto; gap: 8px; padding: 10px; }
+
+.style-card { 
+    background: #333; 
+    border: 2px solid transparent; 
+    border-radius: 15px; 
+    padding: 5px; 
+    cursor: pointer; 
+    display: flex; 
+    flex-direction: column; 
+    align-items: center; 
+    justify-content: center; 
+    min-height: 0; /* تغییر: حذف حداقل ارتفاع */
+    width: 100%; 
+    position: relative; 
+    transition: all 0.2s; 
+    box-shadow: 0 4px 6px rgba(0,0,0,0.2); 
+    aspect-ratio: 1.4 / 1; /* تغییر: اضافه شدن نسبت ابعاد */
+}
+
+.style-grid-2col .style-card { min-height: 100px; height: auto; gap: 8px; padding: 10px; aspect-ratio: auto; } /* ریست کردن aspect ratio برای بخش بالایی */
+
 .style-card:active { transform: scale(0.98); }
 .style-card.selected { border-color: var(--primary); background: #2a2a2a; }
-.style-card.selected::after { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 10px; left: 10px; font-size: 0.8rem; color: #fff; background: var(--primary); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
-
-.card-info { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); }
-.card-title-style { font-weight: bold; font-size: 1rem; color: #fff; white-space: nowrap; }
-.card-desc { color: #aaa; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.anim-box { font-family: 'Lalezar'; font-size: 1.3rem; direction: rtl; display: flex; gap: 5px; margin-bottom: 5px; } 
-.anim-word { color: white; transition: 0.2s; padding: 0 3px; border-radius: 4px;}
-.anim-word.active { color: #fff; background-color: #A020F0; transform: scale(1.05); padding: 0 6px; }
+.style-card.selected::after { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 8px; left: 8px; font-size: 0.7rem; color: #fff; background: var(--primary); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
+
+.card-info { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; margin-top: 6px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; }
+.card-title-style { font-weight: bold; font-size: 0.8rem; color: #fff; white-space: nowrap; }
+.card-desc { color: #aaa; font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.anim-box { font-family: 'Lalezar'; font-size: 0.9rem; direction: rtl; display: flex; gap: 3px; margin-bottom: 5px; }
+.anim-word { color: white; transition: 0.2s; padding: 0 2px; border-radius: 4px;}
+.anim-word.active { color: #fff; background-color: #A020F0; transform: scale(1.05); padding: 0 4px; }
 .static-anim.active { background-color: var(--static-color) !important; color: #fff; }
-.card-settings { position: absolute; bottom: 10px; left: 10px; width: 35px; height: 35px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; transition: 0.2s; z-index: 5; border: 1px solid rgba(255,255,255,0.1); }
+
+.card-settings { position: absolute; bottom: 5px; left: 5px; width: 25px; height: 25px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; transition: 0.2s; z-index: 5; border: 1px solid rgba(255,255,255,0.1); }
+
 .mode-btn { flex: 1; padding: 12px; border-radius: 8px; background: #333; color: #aaa; border: 2px solid transparent; cursor: pointer; }
 .mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
 .font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@@ -152,16 +175,16 @@ textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; p
 .text-editor-ui { display: flex; flex-direction: column; width: 100%; height: 100%; background-color: var(--surface); padding-bottom: 10px; }
 
 .toolbar-area {
-    height: 60px; display: flex; align-items: center; justify-content: center; gap: 20px;
-    opacity: 0; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-    pointer-events: none; margin-top: 10px;
+height: 60px; display: flex; align-items: center; justify-content: center; gap: 20px;
+opacity: 0; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+pointer-events: none; margin-top: 10px;
 }
 .toolbar-area.show { opacity: 1; transform: translateY(0); pointer-events: all; }
 
 .tool-circle {
-    width: 45px; height: 45px; border-radius: 50%; background: #252525;
-    border: 1px solid #444; color: #ccc; display: flex; align-items: center; justify-content: center;
-    font-size: 1.1rem; cursor: pointer; transition: 0.2s;
+width: 45px; height: 45px; border-radius: 50%; background: #252525;
+border: 1px solid #444; color: #ccc; display: flex; align-items: center; justify-content: center;
+font-size: 1.1rem; cursor: pointer; transition: 0.2s;
 }
 .tool-circle:active { transform: scale(0.9); border-color: var(--primary); color: var(--primary); }
 .tool-circle.active-state { background: rgba(124, 77, 255, 0.15); border-color: var(--primary); color: var(--primary); }
@@ -170,17 +193,17 @@ textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; p
 .global-time-text { color: #888; font-size: 0.8rem; font-family: monospace; direction: ltr; }
 
 .timeline-scroll-area {
-    flex: 1; width: 100%; overflow-x: auto; white-space: nowrap; padding: 15px 0;
-    display: flex; align-items: center; scrollbar-width: none;
+flex: 1; width: 100%; overflow-x: auto; white-space: nowrap; padding: 15px 0;
+display: flex; align-items: center; scrollbar-width: none;
 }
 .timeline-scroll-area::-webkit-scrollbar { display: none; }
 .spacer { min-width: 50vw; }
 
 .word-chip {
-    background-color: var(--chip-bg); color: #aaa; padding: 8px 18px;
-    border-radius: 12px; margin: 0 4px; font-size: 0.95rem; cursor: pointer;
-    transition: 0.2s; display: inline-flex; align-items: center; justify-content: center;
-    border: 1px solid transparent;
+background-color: var(--chip-bg); color: #aaa; padding: 8px 18px;
+border-radius: 12px; margin: 0 4px; font-size: 0.95rem; cursor: pointer;
+transition: 0.2s; display: inline-flex; align-items: center; justify-content: center;
+border: 1px solid transparent;
 }
 .word-chip.active { background-color: var(--primary); color: #fff; font-weight: bold; transform: scale(1.1); }
 .newline-indicator { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: #555; margin: 0 10px; }
@@ -189,11 +212,11 @@ textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; p
 .bottom-sheet-overlay.show { display: flex; }
 
 .bottom-sheet {
-    width: 100%; background: var(--surface); border-top-left-radius: 30px; border-top-right-radius: 30px;
-    padding: 25px 25px 80px 25px; transform: translateY(100%);
-    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
-    display: none; flex-direction: column; gap: 20px;
-    box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
+width: 100%; background: var(--surface); border-top-left-radius: 30px; border-top-right-radius: 30px;
+padding: 25px 25px 80px 25px; transform: translateY(100%);
+transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+display: none; flex-direction: column; gap: 20px;
+box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
 }
 .bottom-sheet.active { display: flex; transform: translateY(0); }
 
@@ -224,307 +247,307 @@ textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; p
 .highlight-word { color: var(--primary); font-weight: bold; padding: 0 5px; }
 
 /* --- استایل‌های لودینگ نئونی جدید --- */
-/* تنظیمات متغیرها برای لودر */
 #loader {
-    --color-1: #b000ff;
-    --color-2: #0077ff;
-    --color-3: #00eeff;
-    --bg-dark: #090909;
-    --bg-light: #1a1a2e;
-    
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 6000;
-    display: none; /* توسط JS کنترل می‌شود */
-    justify-content: center;
-    align-items: center;
-    background: radial-gradient(circle at center, var(--bg-light) 0%, var(--bg-dark) 100%);
-    font-family: 'Tahoma', sans-serif;
-    overflow: hidden;
-}
-
-/* استایل صفحه نتیجه را جدا کردیم چون لودر عوض شد */
+--color-1: #b000ff;
+--color-2: #0077ff;
+--color-3: #00eeff;
+--bg-dark: #090909;
+--bg-light: #1a1a2e;
+
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+z-index: 6000;
+display: none;
+justify-content: center;
+align-items: center;
+background: radial-gradient(circle at center, var(--bg-light) 0%, var(--bg-dark) 100%);
+font-family: 'Tahoma', sans-serif;
+overflow: hidden;
+
+}
+
+/* استایل صفحه نتیجه */
 #resultScreen {
-    position: fixed; top:0; left:0; width:100%; height:100%; background: var(--bg); z-index: 6000; display: none; flex-direction: column; justify-content: center; align-items: center;
+position: fixed; top:0; left:0; width:100%; height:100%; background: var(--bg); z-index: 6000; display: none; flex-direction: column; justify-content: center; align-items: center;
 }
 
 .loader-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
+display: flex;
+flex-direction: column;
+align-items: center;
+position: relative;
 }
 
 /* هاله نور پشت کل لودر */
 .loader-wrapper::before {
-    content: '';
-    position: absolute;
-    top: 20%;
-    width: 300px;
-    height: 300px;
-    background: radial-gradient(circle, rgba(124, 77, 255, 0.15) 0%, transparent 70%);
-    border-radius: 50%;
-    z-index: -1;
-    filter: blur(20px);
+content: '';
+position: absolute;
+top: 20%;
+width: 300px;
+height: 300px;
+background: radial-gradient(circle, rgba(124, 77, 255, 0.15) 0%, transparent 70%);
+border-radius: 50%;
+z-index: -1;
+filter: blur(20px);
 }
 
 .modern-loader {
-    position: relative;
-    width: 160px;
-    height: 160px;
-    margin-bottom: 50px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+position: relative;
+width: 160px;
+height: 160px;
+margin-bottom: 50px;
+display: flex;
+justify-content: center;
+align-items: center;
 }
 
 .loader-ring {
-    position: absolute;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: var(--ring-color);
-    animation: spin var(--dur) cubic-bezier(0.5, 0, 0.5, 1) infinite;
+position: absolute;
+border-radius: 50%;
+border: 3px solid transparent;
+border-top-color: var(--ring-color);
+animation: spin var(--dur) cubic-bezier(0.5, 0, 0.5, 1) infinite;
 }
 
 /* اضافه کردن نقطه نورانی به سر حلقه‌ها */
 .loader-ring::before {
-    content: '';
-    position: absolute;
-    border-radius: 50%;
-    width: 8px;
-    height: 8px;
-    background: var(--ring-color);
-    box-shadow: 0 0 15px 2px var(--ring-color);
-    top: -5px; 
-    right: 50%;
-    transform: translateX(50%);
+content: '';
+position: absolute;
+border-radius: 50%;
+width: 8px;
+height: 8px;
+background: var(--ring-color);
+box-shadow: 0 0 15px 2px var(--ring-color);
+top: -5px;
+right: 50%;
+transform: translateX(50%);
 }
 
 /* حلقه اول */
 .loader-ring:nth-child(1) {
-    width: 100%;
-    height: 100%;
-    --ring-color: var(--color-1);
-    --dur: 2.5s;
-    filter: drop-shadow(0 0 10px rgba(176, 0, 255, 0.5));
+width: 100%;
+height: 100%;
+--ring-color: var(--color-1);
+--dur: 2.5s;
+filter: drop-shadow(0 0 10px rgba(176, 0, 255, 0.5));
 }
 
 /* حلقه دوم */
 .loader-ring:nth-child(2) {
-    width: 75%;
-    height: 75%;
-    --ring-color: var(--color-2);
-    --dur: 2s;
-    animation-direction: reverse;
-    filter: drop-shadow(0 0 10px rgba(0, 119, 255, 0.5));
+width: 75%;
+height: 75%;
+--ring-color: var(--color-2);
+--dur: 2s;
+animation-direction: reverse;
+filter: drop-shadow(0 0 10px rgba(0, 119, 255, 0.5));
 }
 
 /* حلقه سوم */
 .loader-ring:nth-child(3) {
-    width: 50%;
-    height: 50%;
-    --ring-color: var(--color-3);
-    --dur: 1.5s;
-    filter: drop-shadow(0 0 10px rgba(0, 238, 255, 0.5));
+width: 50%;
+height: 50%;
+--ring-color: var(--color-3);
+--dur: 1.5s;
+filter: drop-shadow(0 0 10px rgba(0, 238, 255, 0.5));
 }
 
 .loader-icon {
-    font-size: 3rem;
-    color: #fff;
-    animation: float-pulse 3s ease-in-out infinite;
-    filter: drop-shadow(0 0 20px var(--color-1));
-    z-index: 10;
+font-size: 3rem;
+color: #fff;
+animation: float-pulse 3s ease-in-out infinite;
+filter: drop-shadow(0 0 20px var(--color-1));
+z-index: 10;
 }
 
 .text-container {
-    text-align: center;
-    position: relative;
-    z-index: 2;
+text-align: center;
+position: relative;
+z-index: 2;
 }
 
 .loading-title {
-    font-size: 1.5rem;
-    font-weight: 800;
-    margin-bottom: 12px;
-    letter-spacing: -0.5px;
-    background: linear-gradient(135deg, #fff 30%, var(--color-2), var(--color-1));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    text-shadow: 0 0 30px rgba(124, 77, 255, 0.3);
-    animation: text-glow 3s ease-in-out infinite alternate;
+font-size: 1.5rem;
+font-weight: 800;
+margin-bottom: 12px;
+letter-spacing: -0.5px;
+background: linear-gradient(135deg, #fff 30%, var(--color-2), var(--color-1));
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+text-shadow: 0 0 30px rgba(124, 77, 255, 0.3);
+animation: text-glow 3s ease-in-out infinite alternate;
 }
 
 .loading-sub {
-    font-size: 1rem;
-    color: #a0a0a0;
-    font-weight: 300;
-    letter-spacing: 1px;
-    opacity: 0.8;
-    animation: fade-text 2s infinite alternate;
+font-size: 1rem;
+color: #a0a0a0;
+font-weight: 300;
+letter-spacing: 1px;
+opacity: 0.8;
+animation: fade-text 2s infinite alternate;
 }
 
 /* انیمیشن‌ها */
-@keyframes spin { 
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+@keyframes spin {
+0% { transform: rotate(0deg); }
+100% { transform: rotate(360deg); }
 }
 
 @keyframes float-pulse {
-    0%, 100% { 
-        transform: scale(1) translateY(0); 
-        opacity: 0.8; 
-        filter: drop-shadow(0 0 10px var(--color-1));
-    }
-    50% { 
-        transform: scale(1.1) translateY(-5px); 
-        opacity: 1; 
-        filter: drop-shadow(0 0 25px var(--color-3));
-    }
+0%, 100% {
+transform: scale(1) translateY(0);
+opacity: 0.8;
+filter: drop-shadow(0 0 10px var(--color-1));
+}
+50% {
+transform: scale(1.1) translateY(-5px);
+opacity: 1;
+filter: drop-shadow(0 0 25px var(--color-3));
+}
 }
 
 @keyframes text-glow {
-    from { text-shadow: 0 0 10px rgba(124, 77, 255, 0.2); }
-    to { text-shadow: 0 0 20px rgba(124, 77, 255, 0.6); }
+from { text-shadow: 0 0 10px rgba(124, 77, 255, 0.2); }
+to { text-shadow: 0 0 20px rgba(124, 77, 255, 0.6); }
 }
 
 @keyframes fade-text {
-    from { opacity: 0.5; }
-    to { opacity: 1; }
+from { opacity: 0.5; }
+to { opacity: 1; }
 }
 
 /* ========================================= */
 /* === استایل‌های بخش ظاهر (نئونی) === */
 /* ========================================= */
 #section-appearance {
-    --track-off: #27272a;
-    --neon-primary: #8b5cf6;
-    --neon-secondary: #ec4899;
+--track-off: #27272a;
+--neon-primary: #8b5cf6;
+--neon-secondary: #ec4899;
 }
 
 .controls-panel {
-    width: 100%;
-    background: #18181b; 
-    border-radius: 24px;
-    padding: 25px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-    border: 1px solid #333;
-    margin-top: 10px;
+width: 100%;
+background: #18181b;
+border-radius: 24px;
+padding: 25px;
+box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+border: 1px solid #333;
+margin-top: 10px;
 }
 
 .control-group {
-    margin-bottom: 30px;
+margin-bottom: 30px;
 }
 .control-group:last-child { margin-bottom: 0; }
 
 .header-neon {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 15px;
+display: flex;
+justify-content: space-between;
+align-items: center;
+margin-bottom: 15px;
 }
 
 .title-neon {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-weight: 700;
-    font-size: 0.95rem;
-    color: #e4e4e7;
+display: flex;
+align-items: center;
+gap: 10px;
+font-weight: 700;
+font-size: 0.95rem;
+color: #e4e4e7;
 }
 
 .title-neon i {
-    color: var(--neon-primary);
-    font-size: 1.1rem;
-    text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
+color: var(--neon-primary);
+font-size: 1.1rem;
+text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
 }
 
 .percent-badge {
-    font-family: monospace;
-    font-size: 1rem;
-    font-weight: bold;
-    color: #fff;
-    background: rgba(139, 92, 246, 0.15);
-    padding: 4px 12px;
-    border-radius: 8px;
-    border: 1px solid rgba(139, 92, 246, 0.3);
-    min-width: 60px;
-    text-align: center;
+font-family: monospace;
+font-size: 1rem;
+font-weight: bold;
+color: #fff;
+background: rgba(139, 92, 246, 0.15);
+padding: 4px 12px;
+border-radius: 8px;
+border: 1px solid rgba(139, 92, 246, 0.3);
+min-width: 60px;
+text-align: center;
 }
 
 .range-container {
-    position: relative;
-    width: 100%;
-    height: 30px;
-    display: flex;
-    align-items: center;
+position: relative;
+width: 100%;
+height: 30px;
+display: flex;
+align-items: center;
 }
 
 .range-container input[type=range] {
-    -webkit-appearance: none;
-    width: 100%;
-    background: transparent;
-    cursor: pointer;
-    z-index: 2;
-    margin: 0;
+-webkit-appearance: none;
+width: 100%;
+background: transparent;
+cursor: pointer;
+z-index: 2;
+margin: 0;
 }
 
 .range-container input[type=range]::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 8px;
-    background: var(--track-off);
-    border-radius: 20px;
-    border: none;
-    background-image: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
-    background-size: 0% 100%;
-    background-repeat: no-repeat;
+width: 100%;
+height: 8px;
+background: var(--track-off);
+border-radius: 20px;
+border: none;
+background-image: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
+background-size: 0% 100%;
+background-repeat: no-repeat;
 }
 
 .range-container input[type=range]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    height: 24px;
-    width: 24px;
-    border-radius: 50%;
-    background: #fff;
-    margin-top: -8px;
-    border: 4px solid #18181b; 
-    box-shadow: 0 0 0 2px var(--neon-primary), 0 0 15px rgba(139, 92, 246, 0.8);
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+-webkit-appearance: none;
+height: 24px;
+width: 24px;
+border-radius: 50%;
+background: #fff;
+margin-top: -8px;
+border: 4px solid #18181b;
+box-shadow: 0 0 0 2px var(--neon-primary), 0 0 15px rgba(139, 92, 246, 0.8);
+transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .range-container input[type=range]:active::-webkit-slider-thumb {
-    transform: scale(1.3);
-    background: var(--neon-primary);
-    border-color: #fff;
-    box-shadow: 0 0 0 0 transparent, 0 0 25px rgba(236, 72, 153, 0.9);
+transform: scale(1.3);
+background: var(--neon-primary);
+border-color: #fff;
+box-shadow: 0 0 0 0 transparent, 0 0 25px rgba(236, 72, 153, 0.9);
 }
 
 .center-marker {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 2px;
-    height: 12px;
-    background: rgba(255,255,255,0.2);
-    z-index: 1;
-    pointer-events: none;
+position: absolute;
+left: 50%;
+top: 50%;
+transform: translate(-50%, -50%);
+width: 2px;
+height: 12px;
+background: rgba(255,255,255,0.2);
+z-index: 1;
+pointer-events: none;
 }
 
 /* ========================================= */
 /* === PRO COLOR PICKER STYLES (iOS/Luxury) === */
 /* ========================================= */
 :root {
-    --glass: rgba(28,28,30,.72);
-    --glass2: rgba(44,44,46,.80);
-    --stroke: rgba(255,255,255,.10);
-    --shadow-lg: 0 22px 60px rgba(0,0,0,.62);
-    --shadow-md: 0 12px 30px rgba(0,0,0,.46);
-    --shadow-sm: 0 8px 18px rgba(0,0,0,.36);
-    --separator: rgba(84,84,88,.38);
-    --ok: #34C759;
+--glass: rgba(28,28,30,.72);
+--glass2: rgba(44,44,46,.80);
+--stroke: rgba(255,255,255,.10);
+--shadow-lg: 0 22px 60px rgba(0,0,0,.62);
+--shadow-md: 0 12px 30px rgba(0,0,0,.46);
+--shadow-sm: 0 8px 18px rgba(0,0,0,.36);
+--separator: rgba(84,84,88,.38);
+--ok: #34C759;
 }
 
 .toast-notification{ position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(-18px); background: rgba(28,28,30,.78); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-md); color: #fff; padding: 12px 18px; border-radius: 999px; z-index: 20000; font-size: .9rem; font-weight: 900; opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; display:flex; align-items:center; gap: 10px; pointer-events:none; }
@@ -592,34 +615,34 @@ textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; p
 
 /* FIX: Photoshop Checkered Pattern for Alpha Container & Preview */
 .alpha-checkered {
-    width: 100%; 
-    height: 42px; 
-    border-radius: 16px;
-    background-image: conic-gradient(#dedede 0.25turn, #ffffff 0.25turn 0.5turn, #dedede 0.5turn 0.75turn, #ffffff 0.75turn);
-    background-size: 14px 14px;
-    background-position: top left;
-    overflow: hidden; 
-    display: flex; 
-    align-items: center; 
-    padding: 0 12px; 
-    border: 1px solid rgba(255,255,255,.10); 
+width: 100%;
+height: 42px;
+border-radius: 16px;
+background-image: conic-gradient(#dedede 0.25turn, #ffffff 0.25turn 0.5turn, #dedede 0.5turn 0.75turn, #ffffff 0.75turn);
+background-size: 14px 14px;
+background-position: top left;
+overflow: hidden;
+display: flex;
+align-items: center;
+padding: 0 12px;
+border: 1px solid rgba(255,255,255,.10);
 }
 
 /* Footer & Large Preview Fix */
 .picker-footer{ margin-top: auto; padding: 12px 16px 0 16px; display:flex; align-items:center; justify-content:space-between; gap: 12px; border-top: 1px solid var(--separator); flex-shrink: 0; background: transparent; }
 
 /* FIX: Photoshop Checkered Pattern for Large Preview */
-.large-preview { 
-    width: 64px; 
-    height: 64px; 
-    border-radius: 18px; 
-    border: 1px solid rgba(255,255,255,.12); 
-    box-shadow: 0 14px 24px rgba(0,0,0,.24); 
-    flex-shrink: 0;
-    /* الگوی شطرنجی دقیق فتوشاپ */
-    background-image: conic-gradient(#dedede 0.25turn, #ffffff 0.25turn 0.5turn, #dedede 0.5turn 0.75turn, #ffffff 0.75turn);
-    background-size: 16px 16px;
-    background-position: center;
+.large-preview {
+width: 64px;
+height: 64px;
+border-radius: 18px;
+border: 1px solid rgba(255,255,255,.12);
+box-shadow: 0 14px 24px rgba(0,0,0,.24);
+flex-shrink: 0;
+/* الگوی شطرنجی دقیق فتوشاپ */
+background-image: conic-gradient(#dedede 0.25turn, #ffffff 0.25turn 0.5turn, #dedede 0.5turn 0.75turn, #ffffff 0.75turn);
+background-size: 16px 16px;
+background-position: center;
 }
 
 .saved-colors-container{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; flex:1; justify-content:flex-end; max-height: 90px; overflow-y:auto; padding-right: 4px; }
@@ -657,47 +680,47 @@ textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; p
 /* === استایل‌های جدید برای بخش ظاهر (Appearance) === */
 /* ================================================== */
 #section-appearance .controls-panel {
-    padding: 15px; /* کاهش پدینگ کلی برای جای دادن پنل‌های داخلی */
+padding: 15px; 
 }
 
 /* پنل‌های داخلی برای گروه‌بندی کنترل‌ها */
 .control-group-panel {
-    background-color: #1f1f23; /* کمی روشن‌تر از پس‌زمینه اصلی پنل */
-    border: 1px solid #3a3a3e;
-    border-radius: 18px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+background-color: #1f1f23;
+border: 1px solid #3a3a3e;
+border-radius: 18px;
+padding: 20px;
+margin-bottom: 20px;
+box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 .control-group-panel:last-child {
-    margin-bottom: 0;
+margin-bottom: 0;
 }
 
 /* بخش پیش‌نمایش زنده برای کادر */
 .box-preview-area {
-    width: 100%;
-    min-height: 90px;
-    margin-bottom: 25px;
-    padding: 15px;
-    /* --- تغییر اصلی اینجاست --- */
-    background-image: conic-gradient(#444 0.25turn, #333 0.25turn 0.5turn, #444 0.5turn 0.75turn, #333 0.75turn);
-    background-size: 20px 20px;
-    /* -------------------------- */
-    border-radius: 12px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #555; /* کمی روشن‌تر برای دیده شدن روی پترن */
+width: 100%;
+min-height: 90px;
+margin-bottom: 25px;
+padding: 15px;
+/* --- تغییر اصلی اینجاست --- */
+background-image: conic-gradient(#444 0.25turn, #333 0.25turn 0.5turn, #444 0.5turn 0.75turn, #333 0.75turn);
+background-size: 20px 20px;
+/* -------------------------- */
+border-radius: 12px;
+display: flex;
+justify-content: center;
+align-items: center;
+border: 1px solid #555;
 }
 
 .box-preview-element {
-    color: #fff;
-    font-size: 1.2rem;
-    font-weight: bold;
-    display: inline-block;
-    white-space: nowrap;
-    /* اینجا line-height وجود نداشت */
-    transition: all 0.15s ease-out;
+color: #fff;
+font-size: 1.2rem;
+font-weight: bold;
+display: inline-block;
+white-space: nowrap;
+/* اینجا line-height وجود نداشت */
+transition: all 0.15s ease-out;
 }
 
 /* ======================================== */
@@ -705,45 +728,45 @@ textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; p
 /* ======================================== */
 
 .sheet-spinner-ring {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    border: 4px solid #333;
-    border-top-color: var(--primary);
-    border-right-color: var(--primary);
-    animation: ringSpin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+width: 60px;
+height: 60px;
+border-radius: 50%;
+border: 4px solid #333;
+border-top-color: var(--primary);
+border-right-color: var(--primary);
+animation: ringSpin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 }
 
 @keyframes ringSpin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+0% { transform: rotate(0deg); }
+100% { transform: rotate(360deg); }
 }
 
 .success-checkmark-anim {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    background: rgba(0, 230, 118, 0.15);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    animation: successPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+width: 80px;
+height: 80px;
+border-radius: 50%;
+background: rgba(0, 230, 118, 0.15);
+display: flex;
+align-items: center;
+justify-content: center;
+animation: successPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .success-checkmark-anim i {
-    font-size: 3rem;
-    color: #00e676;
-    animation: checkScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
+font-size: 3rem;
+color: #00e676;
+animation: checkScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
 }
 
 @keyframes successPop {
-    from { transform: scale(0); opacity: 0; }
-    to { transform: scale(1); opacity: 1; }
+from { transform: scale(0); opacity: 0; }
+to { transform: scale(1); opacity: 1; }
 }
 
 @keyframes checkScale {
-    from { transform: scale(0); }
-    to { transform: scale(1); }
+from { transform: scale(0); }
+to { transform: scale(1); }
 }
 
 /* ======================================== */
@@ -751,39 +774,39 @@ textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; p
 /* ======================================== */
 
 .word-count-grid {
-    display: flex;
-    overflow-x: auto;
-    padding: 10px 0;
-    gap: 10px;
-    width: 100%;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    justify-content: space-between;
+display: flex;
+overflow-x: auto;
+padding: 10px 0;
+gap: 10px;
+width: 100%;
+scrollbar-width: none;
+-ms-overflow-style: none;
+justify-content: space-between;
 }
 .word-count-grid::-webkit-scrollbar {
-    display: none;
+display: none;
 }
 
 .wc-btn {
-    flex: 0 0 auto;
-    width: 50px;
-    height: 50px;
-    border-radius: 14px;
-    background: #333;
-    color: #fff;
-    border: 1px solid #444;
-    font-size: 1.2rem;
-    font-weight: bold;
-    cursor: pointer;
-    transition: 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+flex: 0 0 auto;
+width: 50px;
+height: 50px;
+border-radius: 14px;
+background: #333;
+color: #fff;
+border: 1px solid #444;
+font-size: 1.2rem;
+font-weight: bold;
+cursor: pointer;
+transition: 0.2s;
+display: flex;
+align-items: center;
+justify-content: center;
 }
 .wc-btn:active {
-    background: var(--primary);
-    border-color: var(--primary);
-    transform: scale(0.9);
+background: var(--primary);
+border-color: var(--primary);
+transform: scale(0.9);
 }
 
 /* ======================================== */
@@ -791,139 +814,139 @@ textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; p
 /* ======================================== */
 
 .trimmer-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    margin-bottom: 25px;
-    width: 100%;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+gap: 10px;
+margin-bottom: 25px;
+width: 100%;
 }
 
 .trimmer-play-btn {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    border: 2px solid var(--accent-orange);
-    background: transparent;
-    color: var(--accent-orange);
-    font-size: 1.4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: transform 0.2s;
+width: 50px;
+height: 50px;
+border-radius: 50%;
+border: 2px solid var(--accent-orange);
+background: transparent;
+color: var(--accent-orange);
+font-size: 1.4rem;
+display: flex;
+align-items: center;
+justify-content: center;
+cursor: pointer;
+transition: transform 0.2s;
 }
 .trimmer-play-btn:active {
-    transform: scale(0.9);
+transform: scale(0.9);
 }
 
 .trimmer-time-display {
-    font-family: monospace;
-    font-size: 1.2rem;
-    color: #fff;
-    font-weight: bold;
-    direction: ltr;
+font-family: monospace;
+font-size: 1.2rem;
+color: #fff;
+font-weight: bold;
+direction: ltr;
 }
 
 .trimmer-body {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    gap: 10px;
-    margin-bottom: 20px;
+display: flex;
+align-items: center;
+justify-content: space-between;
+width: 100%;
+gap: 10px;
+margin-bottom: 20px;
 }
 
 .word-preview-side {
-    width: 60px;
-    height: 60px;
-    background: #222;
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #777;
-    font-size: 0.9rem;
-    font-weight: bold;
-    text-align: center;
-    flex-shrink: 0;
+width: 60px;
+height: 60px;
+background: #222;
+border-radius: 12px;
+display: flex;
+align-items: center;
+justify-content: center;
+color: #777;
+font-size: 0.9rem;
+font-weight: bold;
+text-align: center;
+flex-shrink: 0;
 }
 
 .trimmer-container {
-    flex: 1;
-    position: relative;
-    height: 60px;
-    background: #000;
-    border-radius: 10px;
-    overflow: hidden; 
-    /* اگر بخواهیم هندل‌ها بیرون نزنند */
+flex: 1;
+position: relative;
+height: 60px;
+background: #000;
+border-radius: 10px;
+overflow: hidden;
+/* اگر بخواهیم هندل‌ها بیرون نزنند */
 }
 
 /* نوار کلی (ترک) */
 .timeline-strip {
-    position: absolute;
-    top: 50%;
-    left: 10px; /* مارجین برای هندل‌ها */
-    right: 10px;
-    height: 40px;
-    transform: translateY(-50%);
-    background: linear-gradient(90deg, #333 0%, #444 50%, #333 100%);
-    background-size: 20px 100%;
-    border-radius: 4px;
+position: absolute;
+top: 50%;
+left: 10px; /* مارجین برای هندل‌ها */
+right: 10px;
+height: 40px;
+transform: translateY(-50%);
+background: linear-gradient(90deg, #333 0%, #444 50%, #333 100%);
+background-size: 20px 100%;
+border-radius: 4px;
 }
 
 /* بخش فعال (بین دو هندل) */
 .trim-track-active {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.15);
-    border-top: 2px solid #FDD835;
-    border-bottom: 2px solid #FDD835;
-    left: 0;   /* این مقادیر با JS تغییر میکنن */
-    right: 0;  /* این مقادیر با JS تغییر میکنن */
+position: absolute;
+top: 0;
+bottom: 0;
+background: rgba(255, 255, 255, 0.15);
+border-top: 2px solid #FDD835;
+border-bottom: 2px solid #FDD835;
+left: 0;   /* این مقادیر با JS تغییر میکنن */
+right: 0;  /* این مقادیر با JS تغییر میکنن */
 }
 
 /* هندل‌های زرد رنگ */
 .trim-handle {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 20px;
-    background: #FDD835;
-    cursor: col-resize;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #000;
-    font-size: 0.8rem;
-    z-index: 10;
-    border-radius: 4px;
+position: absolute;
+top: 0;
+bottom: 0;
+width: 20px;
+background: #FDD835;
+cursor: col-resize;
+display: flex;
+align-items: center;
+justify-content: center;
+color: #000;
+font-size: 0.8rem;
+z-index: 10;
+border-radius: 4px;
 }
 
 .trim-handle.left {
-    left: 0; /* JS کنترل میکنه */
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
+left: 0; /* JS کنترل میکنه */
+border-top-left-radius: 8px;
+border-bottom-left-radius: 8px;
 }
 
 .trim-handle.right {
-    right: 0; /* JS کنترل میکنه (right: 0 یعنی چسبیده به ته) */
-    /* اما برای پوزیشن ابسولوت نسبت به پرنت، ما از style.left استفاده میکنیم */
-    border-top-right-radius: 8px;
-    border-bottom-right-radius: 8px;
+right: 0; /* JS کنترل میکنه (right: 0 یعنی چسبیده به ته) */
+/* اما برای پوزیشن ابسولوت نسبت به پرنت، ما از style.left استفاده میکنیم */
+border-top-right-radius: 8px;
+border-bottom-right-radius: 8px;
 }
 
 .trimmer-current-word {
-    text-align: center;
-    background: #333;
-    padding: 10px 20px;
-    border-radius: 16px;
-    color: #fff;
-    font-size: 1.1rem;
-    font-weight: bold;
-    align-self: center;
-    margin-bottom: 10px;
-    min-width: 100px;
+text-align: center;
+background: #333;
+padding: 10px 20px;
+border-radius: 16px;
+color: #fff;
+font-size: 1.1rem;
+font-weight: bold;
+align-self: center;
+margin-bottom: 10px;
+min-width: 100px;
 }