Update style.css

style.css

@@ -2,7 +2,7 @@
   --bg: #f3f6fb;
   --primary: #2563eb;
   --primary-soft: rgba(37, 99, 235, 0.08);
-  --primary-soft2: rgba(37, 99, 235, 0.16);
+  --primary-soft2: rgba(37, 99, 235, 0.18);
   --card-bg: #ffffff;
   --text-main: #111827;
   --text-muted: #6b7280;
@@ -23,8 +23,8 @@ body {
   margin: 0;
   font-family: var(--font);
   background:
-    radial-gradient(circle at top left, rgba(37, 99, 235, 0.15), transparent 55%),
-    radial-gradient(circle at top right, rgba(14, 165, 233, 0.11), transparent 60%),
+    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%),
     var(--bg);
   color: var(--text-main);
 }
@@ -33,10 +33,10 @@ body {
   min-height: 100vh;
   max-width: 980px;
   margin: 0 auto;
-  padding: 26px 18px 26px;
+  padding: 24px 16px 26px;
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 16px;
 }
 
 /* الهيدر */
@@ -46,11 +46,11 @@ body {
   align-items: center;
   justify-content: space-between;
   gap: 14px;
-  padding: 12px 18px;
-  background: rgba(255, 255, 255, 0.98);
+  padding: 10px 18px;
+  background: #ffffff;
   border-radius: 18px;
-  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
-  border: 1px solid rgba(226, 232, 240, 0.9);
+  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
+  border: 1px solid rgba(226, 232, 240, 0.96);
 }
 
 .top-left {
@@ -96,49 +96,44 @@ body {
 }
 
 .credit {
-  font-size: 11px;
-  color: #4b5563;
+  font-size: 10.5px;
+  color: #374151;
   padding: 4px 10px;
   border-radius: 999px;
   background-color: #eef2ff;
-  border: 1px solid rgba(129, 140, 248, 0.5);
+  border: 1px solid rgba(129, 140, 248, 0.45);
 }
 
-/* روابط بسيطة (شكل فقط) */
-
-.nav {
-  display: none;
-}
-
-/* المحتوى الرئيسي */
+/* المحتوى */
 
 .main {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 
 /* هيرو */
 
 .hero {
-  background: radial-gradient(circle at right top, var(--primary-soft), transparent),
-              #ffffff;
-  padding: 18px 18px 14px;
+  background:
+    radial-gradient(circle at right top, var(--primary-soft), transparent),
+    #ffffff;
+  padding: 16px 16px 12px;
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-soft);
-  border: 1px solid rgba(226, 232, 240, 0.9);
+  border: 1px solid rgba(226, 232, 240, 0.96);
 }
 
 .hero h1 {
   margin: 0 0 6px;
-  font-size: 22px;
+  font-size: 20px;
   font-weight: 600;
   color: #111827;
 }
 
 .hero p {
   margin: 0;
-  font-size: 13px;
+  font-size: 12.5px;
   color: var(--text-muted);
 }
 
@@ -146,7 +141,7 @@ body {
 
 .steps {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
   gap: 8px;
 }
 
@@ -157,8 +152,8 @@ body {
   padding: 8px 10px;
   border-radius: 16px;
   background: #ffffff;
-  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
-  border: 1px solid rgba(229, 231, 235, 0.9);
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba(229, 231, 235, 0.96);
 }
 
 .step-number {
@@ -184,7 +179,7 @@ body {
 .card {
   background: var(--card-bg);
   border-radius: var(--radius-xl);
-  padding: 16px 16px 14px;
+  padding: 14px 14px 12px;
   box-shadow: var(--shadow-soft);
   border: 1px solid rgba(226, 232, 240, 0.98);
 }
@@ -192,13 +187,13 @@ body {
 .main-card {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 
 .card-row {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
 }
 
 .card-row.inline {
@@ -262,7 +257,7 @@ body {
   border-radius: 14px;
   background-color: #f9fafb;
   border: 1px solid rgba(229, 231, 235, 1);
-  max-height: 170px;
+  max-height: 180px;
   overflow-y: auto;
   transition: box-shadow var(--transition);
 }
@@ -300,7 +295,7 @@ body {
 
 .file-list-ul li {
   display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) auto;
+  grid-template-columns: 18px minmax(0, 1fr) auto auto;
   align-items: center;
   gap: 6px;
   padding: 3px 4px;
@@ -330,6 +325,22 @@ body {
   font-size: 8.5px;
 }
 
+/* زر حذف ملف */
+
+.delete-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 0 3px;
+  transition: color 0.18s ease, transform 0.18s ease;
+}
+
+.delete-btn:hover {
+  color: #b91c1c;
+  transform: scale(1.1);
+}
+
 /* حقل اسم الإخراج */
 
 .card-label {
@@ -352,16 +363,19 @@ body {
   box-shadow: 0 0 0 3px var(--primary-soft2);
 }
 
-/* زر الدمج */
+/* الأزرار */
 
 .actions {
-  margin-top: 2px;
+  margin-top: 4px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 
 .btn-main {
-  width: 100%;
+  flex: 1;
   padding: 9px 0;
-  font-size: 13px;
+  font-size: 12.5px;
   font-weight: 600;
   border: none;
   border-radius: 999px;
@@ -370,6 +384,7 @@ body {
   cursor: pointer;
   box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
   transition: all var(--transition);
+  text-align: center;
 }
 
 .btn-main:hover {
@@ -379,7 +394,7 @@ body {
 
 .btn-main:active {
   transform: translateY(1px);
-  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.4);
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
 }
 
 .btn-main.disabled,
@@ -389,6 +404,23 @@ body {
   box-shadow: none;
 }
 
+.btn-secondary {
+  padding: 9px 14px;
+  font-size: 11px;
+  border-radius: 999px;
+  border: 1px solid #e5e7eb;
+  background-color: #ffffff;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.btn-secondary:hover {
+  background-color: #fee2e2;
+  color: #b91c1c;
+  border-color: #fecaca;
+}
+
 /* حالة الرسائل */
 
 .status {
@@ -423,17 +455,13 @@ body {
 
 @media (max-width: 640px) {
   .page {
-    padding: 18px 12px 22px;
+    padding: 18px 10px 22px;
   }
 
   .topbar {
     flex-direction: column;
     align-items: flex-start;
-    gap: 8px;
-  }
-
-  .credit {
-    font-size: 10px;
+    gap: 6px;
   }
 
   .hero h1 {