Update style.css

style.css

@@ -1,13 +1,14 @@
 :root {
-  --bg: #f3f6fb;
+  --bg: #f4f6fb;
   --primary: #2563eb;
-  --primary-soft: rgba(37, 99, 235, 0.08);
-  --primary-soft2: rgba(37, 99, 235, 0.18);
+  --primary2: #60a5fa;
+  --primary-soft: rgba(37, 99, 235, 0.06);
+  --primary-soft2: rgba(37, 99, 235, 0.14);
   --card-bg: #ffffff;
   --text-main: #111827;
   --text-muted: #6b7280;
   --radius-xl: 22px;
-  --shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.09);
+  --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
   --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --transition: 0.18s ease;
 }
@@ -22,20 +23,22 @@ body {
   margin: 0;
   font-family: var(--font);
   background:
-    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 55%),
-    radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 60%),
+    radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 55%),
+    radial-gradient(circle at top right, rgba(129, 140, 248, 0.12), transparent 60%),
     var(--bg);
   color: var(--text-main);
 }
 
+/* صفحة */
+
 .page {
   min-height: 100vh;
   max-width: 980px;
   margin: 0 auto;
-  padding: 24px 16px 26px;
+  padding: 22px 16px 26px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 14px;
 }
 
 /* الهيدر */
@@ -44,11 +47,12 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px 18px;
+  padding: 9px 18px;
   background: #ffffff;
-  border-radius: 18px;
-  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
+  border-radius: 999px;
+  box-shadow: var(--shadow-soft);
   border: 1px solid rgba(226, 232, 240, 0.96);
+  animation: fadeUp 0.5s ease-out;
 }
 
 .credit {
@@ -56,7 +60,7 @@ body {
   color: #374151;
   padding: 4px 14px;
   border-radius: 999px;
-  background-color: #eef2ff;
+  background: #eef2ff;
   border: 1px solid rgba(129, 140, 248, 0.45);
 }
 
@@ -74,7 +78,7 @@ body {
 .hero {
   text-align: center;
   background:
-    radial-gradient(circle at right top, var(--primary-soft), transparent),
+    radial-gradient(circle at right top, rgba(96, 165, 250, 0.16), transparent),
     #ffffff;
   padding: 18px 18px 14px;
   border-radius: var(--radius-xl);
@@ -85,6 +89,7 @@ body {
   align-items: center;
   gap: 8px;
   width: 100%;
+  animation: fadeUp 0.6s ease-out;
 }
 
 .hero .logo-mark {
@@ -93,12 +98,12 @@ body {
   justify-content: center;
   width: 44px;
   height: 44px;
-  border-radius: 18px;
-  background: linear-gradient(135deg, #2563eb, #60a5fa);
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--primary), var(--primary2));
   color: #ffffff;
   font-weight: 700;
   font-size: 16px;
-  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4);
+  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38);
 }
 
 .hero h1 {
@@ -131,10 +136,11 @@ body {
   padding: 8px 10px;
   border-radius: 16px;
   background: #ffffff;
-  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
-  border: 1px solid rgba(229, 231, 235, 0.96);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
+  border: 1px solid rgba(229, 231, 235, 0.98);
   justify-content: center;
   text-align: center;
+  animation: fadeUp 0.6s ease-out;
 }
 
 .step-number {
@@ -168,12 +174,33 @@ body {
 .main-card {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0;
   width: 100%;
   max-width: 960px;
   margin: 0 auto;
+  animation: fadeUp 0.7s ease-out;
+}
+
+/* أقسام داخل الكارد */
+
+.card-section {
+  padding: 10px 6px;
+}
+
+.card-section + .card-section {
+  border-top: 1px solid rgba(229, 231, 235, 0.9);
+}
+
+.card-select {
+  padding-bottom: 12px;
+}
+
+.card-output {
+  padding-top: 10px;
 }
 
+/* عنوان وإرشاد */
+
 .card-row {
   display: flex;
   flex-direction: column;
@@ -189,7 +216,7 @@ body {
 .card-title {
   font-size: 14px;
   font-weight: 600;
-  margin: 0;
+  margin: 0 0 2px;
   color: #111827;
   text-align: center;
 }
@@ -204,23 +231,24 @@ body {
 /* اختيار الملفات */
 
 .file-picker {
-  margin-top: 4px;
+  margin-top: 6px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding: 9px 14px;
+  padding: 9px 16px;
   border-radius: 999px;
   border: 1px solid rgba(209, 213, 219, 1);
-  background-color: #f9fafb;
+  background: linear-gradient(to right, #f9fafb, #eef2ff);
   cursor: pointer;
   transition: all var(--transition);
   align-self: center;
 }
 
 .file-picker:hover {
-  background-color: #eef2ff;
+  background: linear-gradient(to right, #eef2ff, #e0f2fe);
   border-color: var(--primary);
-  box-shadow: 0 8px 20px rgba(148, 163, 253, 0.3);
+  box-shadow: 0 8px 18px rgba(148, 163, 253, 0.25);
+  transform: translateY(-1px);
 }
 
 .file-picker-icon {
@@ -239,14 +267,14 @@ body {
 /* قائمة الملفات */
 
 .file-list {
-  margin-top: 4px;
+  margin-top: 2px;
   padding: 8px 8px;
   border-radius: 14px;
   background-color: #f9fafb;
   border: 1px solid rgba(229, 231, 235, 1);
   max-height: 220px;
   overflow-y: auto;
-  transition: box-shadow var(--transition);
+  transition: box-shadow var(--transition), transform var(--transition);
 }
 
 .file-list.hidden {
@@ -254,7 +282,7 @@ body {
 }
 
 .file-list:hover {
-  box-shadow: inset 0 0 10px rgba(148, 163, 253, 0.15);
+  box-shadow: inset 0 0 10px rgba(148, 163, 253, 0.11);
 }
 
 .file-list-header {
@@ -263,7 +291,7 @@ body {
   align-items: baseline;
   font-size: 10.5px;
   color: #111827;
-  margin-bottom: 4px;
+  margin-bottom: 3px;
 }
 
 .file-note {
@@ -276,7 +304,7 @@ body {
   color: #1d4ed8;
   background-color: #eff6ff;
   border-radius: 999px;
-  padding: 4px 8px;
+  padding: 3px 8px;
   display: inline-block;
   margin: 0 0 4px;
 }
@@ -324,6 +352,8 @@ body {
   font-size: 8.5px;
 }
 
+/* أزرار الصف */
+
 .row-actions {
   display: flex;
   align-items: center;
@@ -332,25 +362,26 @@ body {
 
 .move-btn,
 .delete-btn {
-  background: none;
+  background: transparent;
   border: none;
   cursor: pointer;
-  font-size: 11px;
-  padding: 0 3px;
-  transition: color 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
-  border-radius: 4px;
+  font-size: 10px;
+  padding: 1px 4px;
+  border-radius: 6px;
+  transition: all var(--transition);
+  color: #6b7280;
 }
 
 .move-btn:hover {
-  color: #2563eb;
-  background-color: #e5e7ff;
+  color: var(--primary);
+  background-color: rgba(219, 234, 254, 0.9);
   transform: translateY(-1px);
 }
 
 .delete-btn:hover {
   color: #b91c1c;
   background-color: #fee2e2;
-  transform: scale(1.1);
+  transform: scale(1.05);
 }
 
 /* حقل اسم الإخراج */
@@ -371,14 +402,14 @@ body {
 }
 
 .output-input:focus {
-  border-color: #2563eb;
+  border-color: var(--primary);
   box-shadow: 0 0 0 3px var(--primary-soft2);
 }
 
 /* الأزرار */
 
 .actions {
-  margin-top: 4px;
+  margin-top: 6px;
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
@@ -393,22 +424,22 @@ body {
   font-weight: 600;
   border: none;
   border-radius: 999px;
-  background: linear-gradient(90deg, #2563eb, #60a5fa);
+  background: linear-gradient(90deg, var(--primary), var(--primary2));
   color: #ffffff;
   cursor: pointer;
-  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
+  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.34);
   transition: all var(--transition);
   text-align: center;
 }
 
 .btn-main:hover {
   transform: translateY(-1px);
-  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.45);
+  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.42);
 }
 
 .btn-main:active {
   transform: translateY(1px);
-  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.34);
 }
 
 .btn-main.disabled,
@@ -430,7 +461,7 @@ body {
 }
 
 .btn-secondary:hover {
-  background-color: #fee2e2;
+  background-color: #fef2f2;
   color: #b91c1c;
   border-color: #fecaca;
 }
@@ -438,7 +469,7 @@ body {
 /* حالة الرسائل */
 
 .status {
-  margin-top: 6px;
+  margin-top: 4px;
   padding: 6px 9px;
   font-size: 10px;
   border-radius: 11px;
@@ -500,15 +531,28 @@ body {
 .progress-fill {
   height: 100%;
   width: 0%;
-  background: linear-gradient(90deg, #2563eb, #60a5fa);
+  background: linear-gradient(90deg, var(--primary), var(--primary2));
   transition: width 0.18s ease;
 }
 
+/* حركات خفيفة */
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* تجاوب */
 
 @media (max-width: 640px) {
   .page {
-    padding: 18px 10px 22px;
+    padding: 16px 10px 20px;
   }
 
   .actions {