Update style.css

style.css

@@ -8,8 +8,8 @@
   --text-main: #111827;
   --text-muted: #6b7280;
   --radius-xl: 22px;
-  --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
-  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.05);
+  --font: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --transition: 0.18s ease;
 }
 
@@ -23,14 +23,12 @@ body {
   margin: 0;
   font-family: var(--font);
   background:
-    radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 55%),
+    radial-gradient(circle at top left, rgba(96, 165, 250, 0.16), 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;
@@ -52,7 +50,6 @@ body {
   border-radius: 999px;
   box-shadow: var(--shadow-soft);
   border: 1px solid rgba(226, 232, 240, 0.96);
-  animation: fadeUp 0.5s ease-out;
 }
 
 .credit {
@@ -60,7 +57,7 @@ body {
   color: #374151;
   padding: 4px 14px;
   border-radius: 999px;
-  background: #eef2ff;
+  background-color: #eef2ff;
   border: 1px solid rgba(129, 140, 248, 0.45);
 }
 
@@ -89,7 +86,6 @@ body {
   align-items: center;
   gap: 8px;
   width: 100%;
-  animation: fadeUp 0.6s ease-out;
 }
 
 .hero .logo-mark {
@@ -110,7 +106,6 @@ body {
   margin: 0;
   font-size: 20px;
   font-weight: 600;
-  color: #111827;
 }
 
 .hero p {
@@ -136,11 +131,10 @@ body {
   padding: 8px 10px;
   border-radius: 16px;
   background: #ffffff;
-  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
+  box-shadow: 0 4px 10px 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 {
@@ -174,11 +168,9 @@ body {
 .main-card {
   display: flex;
   flex-direction: column;
-  gap: 0;
   width: 100%;
   max-width: 960px;
   margin: 0 auto;
-  animation: fadeUp 0.7s ease-out;
 }
 
 /* أقسام داخل الكارد */
@@ -191,15 +183,7 @@ body {
   border-top: 1px solid rgba(229, 231, 235, 0.9);
 }
 
-.card-select {
-  padding-bottom: 12px;
-}
-
-.card-output {
-  padding-top: 10px;
-}
-
-/* عنوان وإرشاد */
+/* نصوص */
 
 .card-row {
   display: flex;
@@ -217,7 +201,6 @@ body {
   font-size: 14px;
   font-weight: 600;
   margin: 0 0 2px;
-  color: #111827;
   text-align: center;
 }
 
@@ -257,7 +240,6 @@ body {
 
 .file-picker-text {
   font-size: 11.5px;
-  color: #111827;
 }
 
 .file-picker input {
@@ -281,16 +263,11 @@ body {
   display: none;
 }
 
-.file-list:hover {
-  box-shadow: inset 0 0 10px rgba(148, 163, 253, 0.11);
-}
-
 .file-list-header {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   font-size: 10.5px;
-  color: #111827;
   margin-bottom: 3px;
 }
 
@@ -328,12 +305,21 @@ body {
   padding: 3px 4px;
   border-radius: 7px;
   font-size: 9.5px;
+  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
 }
 
 .file-list-ul li:nth-child(odd) {
   background: #eef2ff;
 }
 
+/* تفاعل القائمة */
+.file-list-ul li:hover {
+  background: #dbeafe;
+  box-shadow: 0 2px 6px rgba(148, 163, 253, 0.35);
+  transform: translateY(-1px);
+  cursor: pointer;
+}
+
 .index {
   text-align: center;
   color: var(--primary);
@@ -344,7 +330,6 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #111827;
 }
 
 .size {
@@ -453,7 +438,7 @@ body {
   padding: 9px 16px;
   font-size: 11px;
   border-radius: 999px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #d1d5db;
   background-color: #ffffff;
   color: #6b7280;
   cursor: pointer;
@@ -461,9 +446,9 @@ body {
 }
 
 .btn-secondary:hover {
-  background-color: #fef2f2;
-  color: #b91c1c;
-  border-color: #fecaca;
+  background-color: #eff6ff;
+  color: #1d4ed8;
+  border-color: #93c5fd;
 }
 
 /* حالة الرسائل */
@@ -535,19 +520,6 @@ body {
   transition: width 0.18s ease;
 }
 
-/* حركات خفيفة */
-
-@keyframes fadeUp {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 /* تجاوب */
 
 @media (max-width: 640px) {