Update style.css

style.css

@@ -1,13 +1,14 @@
 :root {
-  --bg-dark: #020817;
-  --accent: #2563eb;
-  --accent-soft: rgba(37, 99, 235, 0.16);
+  --bg: #f3f6fb;
+  --primary: #2563eb;
+  --primary-soft: rgba(37, 99, 235, 0.08);
+  --primary-soft2: rgba(37, 99, 235, 0.16);
   --card-bg: #ffffff;
   --text-main: #111827;
   --text-muted: #6b7280;
   --radius-xl: 22px;
   --radius-md: 14px;
-  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.25);
+  --shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.09);
   --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --transition: 0.18s ease;
 }
@@ -22,96 +23,94 @@ body {
   margin: 0;
   font-family: var(--font);
   background:
-    radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 60%),
-    radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 55%),
-    var(--bg-dark);
+    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%),
+    var(--bg);
   color: var(--text-main);
 }
 
 .page {
   min-height: 100vh;
-  max-width: 1120px;
+  max-width: 980px;
   margin: 0 auto;
-  padding: 26px 18px 20px;
+  padding: 26px 18px 26px;
   display: flex;
   flex-direction: column;
   gap: 18px;
 }
 
-/* شريط علوي */
+/* الهيدر */
 
 .topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: 14px;
   padding: 12px 18px;
-  background: rgba(7, 11, 23, 0.98);
-  border-radius: 999px;
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  color: #e5e7eb;
-  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.75);
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 18px;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+  border: 1px solid rgba(226, 232, 240, 0.9);
 }
 
-.brand {
+.top-left {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 10px;
 }
 
-.logo-circle {
-  width: 30px;
-  height: 30px;
-  border-radius: 999px;
-  background: linear-gradient(135deg, #2563eb, #38bdf8);
+.logo-mark {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #2563eb, #60a5fa);
   color: #ffffff;
   font-weight: 700;
-  font-size: 18px;
+  font-size: 15px;
+  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
 }
 
 .brand-text {
   display: flex;
   flex-direction: column;
-  line-height: 1.2;
+  line-height: 1.3;
 }
 
 .brand-title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
+  color: #111827;
 }
 
 .brand-sub {
-  font-size: 10px;
-  color: #9ca3af;
+  font-size: 11px;
+  color: #6b7280;
 }
 
-.nav {
+.top-right {
   display: flex;
-  gap: 8px;
-  font-size: 10px;
+  align-items: center;
 }
 
-.nav-link {
-  padding: 5px 10px;
+.credit {
+  font-size: 11px;
+  color: #4b5563;
+  padding: 4px 10px;
   border-radius: 999px;
-  color: #9ca3af;
-  transition: all var(--transition);
+  background-color: #eef2ff;
+  border: 1px solid rgba(129, 140, 248, 0.5);
 }
 
-.nav-link.active {
-  background: rgba(37, 99, 235, 0.32);
-  color: #eff6ff;
-}
+/* روابط بسيطة (شكل فقط) */
 
-.nav-link.muted {
-  opacity: 0.7;
+.nav {
+  display: none;
 }
 
-/* المحتوى */
+/* المحتوى الرئيسي */
 
 .main {
   display: flex;
@@ -119,33 +118,35 @@ body {
   gap: 12px;
 }
 
+/* هيرو */
+
 .hero {
-  background:
-    radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent),
-    rgba(7, 11, 23, 0.98);
+  background: radial-gradient(circle at right top, var(--primary-soft), transparent),
+              #ffffff;
   padding: 18px 18px 14px;
   border-radius: var(--radius-xl);
-  color: #e5e7eb;
   box-shadow: var(--shadow-soft);
+  border: 1px solid rgba(226, 232, 240, 0.9);
 }
 
 .hero h1 {
   margin: 0 0 6px;
-  font-size: 21px;
+  font-size: 22px;
   font-weight: 600;
+  color: #111827;
 }
 
 .hero p {
   margin: 0;
-  font-size: 12px;
-  color: #9ca3af;
+  font-size: 13px;
+  color: var(--text-muted);
 }
 
 /* خطوات */
 
 .steps {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 8px;
 }
 
@@ -155,35 +156,35 @@ body {
   gap: 8px;
   padding: 8px 10px;
   border-radius: 16px;
-  background: rgba(7, 11, 23, 0.98);
-  border: 1px solid rgba(148, 163, 253, 0.18);
-  color: #e5e7eb;
+  background: #ffffff;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba(229, 231, 235, 0.9);
 }
 
 .step-number {
   width: 20px;
   height: 20px;
   border-radius: 999px;
-  background: #2563eb;
+  background: var(--primary);
+  color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   font-weight: 600;
-  color: #fff;
 }
 
 .step-text {
-  font-size: 10px;
-  color: #cbd5f5;
+  font-size: 10.5px;
+  color: #4b5563;
 }
 
-/* الكرت الرئيسي */
+/* الكارد الرئيسي */
 
 .card {
   background: var(--card-bg);
   border-radius: var(--radius-xl);
-  padding: 16px 14px 14px;
+  padding: 16px 16px 14px;
   box-shadow: var(--shadow-soft);
   border: 1px solid rgba(226, 232, 240, 0.98);
 }
@@ -191,67 +192,62 @@ body {
 .main-card {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .card-row {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 6px;
 }
 
 .card-row.inline {
   flex-direction: row;
   align-items: center;
   gap: 10px;
-  margin-top: 2px;
 }
 
 .card-title {
-  margin: 0;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
-  color: var(--text-main);
-}
-
-.card-title.small {
-  font-size: 11px;
+  margin: 0;
+  color: #111827;
 }
 
 .hint {
   margin: 0;
-  font-size: 10px;
+  font-size: 10.5px;
   color: var(--text-muted);
 }
 
-/* زر اختيار الملفات */
+/* اختيار الملفات */
 
 .file-picker {
-  margin-top: 6px;
+  margin-top: 4px;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
   padding: 9px 14px;
   border-radius: 999px;
-  border: 1px solid #e5e7eb;
-  background: #f9fafb;
-  font-size: 11px;
-  color: var(--text-main);
+  border: 1px solid rgba(209, 213, 219, 1);
+  background-color: #f9fafb;
   cursor: pointer;
-  gap: 8px;
   transition: all var(--transition);
 }
 
 .file-picker:hover {
-  background: #eef2ff;
-  border-color: var(--accent);
-  box-shadow: 0 8px 22px rgba(148, 163, 253, 0.35);
-  color: #111827;
+  background-color: #eef2ff;
+  border-color: var(--primary);
+  box-shadow: 0 8px 20px rgba(148, 163, 253, 0.3);
 }
 
-.file-picker-label::before {
-  content: "📂";
-  margin-left: 4px;
+.file-picker-icon {
+  font-size: 15px;
+}
+
+.file-picker-text {
+  font-size: 11.5px;
+  color: #111827;
 }
 
 .file-picker input {
@@ -264,8 +260,8 @@ body {
   margin-top: 4px;
   padding: 8px 8px;
   border-radius: 14px;
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+  border: 1px solid rgba(229, 231, 235, 1);
   max-height: 170px;
   overflow-y: auto;
   transition: box-shadow var(--transition);
@@ -276,15 +272,15 @@ body {
 }
 
 .file-list:hover {
-  box-shadow: inset 0 0 10px rgba(148, 163, 253, 0.14);
+  box-shadow: inset 0 0 10px rgba(148, 163, 253, 0.15);
 }
 
 .file-list-header {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  font-size: 10px;
-  color: var(--text-main);
+  font-size: 10.5px;
+  color: #111827;
   margin-bottom: 4px;
 }
 
@@ -307,4 +303,140 @@ body {
   grid-template-columns: 18px minmax(0, 1fr) auto;
   align-items: center;
   gap: 6px;
-  padding
+  padding: 3px 4px;
+  border-radius: 7px;
+  font-size: 9.5px;
+}
+
+.file-list-ul li:nth-child(odd) {
+  background: #eef2ff;
+}
+
+.index {
+  text-align: center;
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #111827;
+}
+
+.size {
+  color: var(--text-muted);
+  font-size: 8.5px;
+}
+
+/* حقل اسم الإخراج */
+
+.card-label {
+  font-size: 10.5px;
+  color: #4b5563;
+}
+
+.output-input {
+  flex: 1;
+  padding: 7px 10px;
+  font-size: 10.5px;
+  border-radius: 999px;
+  border: 1px solid rgba(209, 213, 219, 1);
+  outline: none;
+  transition: all var(--transition);
+}
+
+.output-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-soft2);
+}
+
+/* زر الدمج */
+
+.actions {
+  margin-top: 2px;
+}
+
+.btn-main {
+  width: 100%;
+  padding: 9px 0;
+  font-size: 13px;
+  font-weight: 600;
+  border: none;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #2563eb, #60a5fa);
+  color: #ffffff;
+  cursor: pointer;
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
+  transition: all var(--transition);
+}
+
+.btn-main:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.45);
+}
+
+.btn-main:active {
+  transform: translateY(1px);
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.4);
+}
+
+.btn-main.disabled,
+.btn-main:disabled {
+  opacity: 0.45;
+  cursor: default;
+  box-shadow: none;
+}
+
+/* حالة الرسائل */
+
+.status {
+  margin-top: 6px;
+  padding: 6px 9px;
+  font-size: 10px;
+  border-radius: 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status.ok {
+  background: #ecfdf5;
+  color: #15803d;
+  border: 1px solid #bbf7d0;
+}
+
+.status.error {
+  background: #fef2f2;
+  color: #b91c1c;
+  border: 1px solid #fecaca;
+}
+
+.status.loading {
+  background: #eff6ff;
+  color: #1d4ed8;
+  border: 1px solid #bfdbfe;
+}
+
+/* تجاوب */
+
+@media (max-width: 640px) {
+  .page {
+    padding: 18px 12px 22px;
+  }
+
+  .topbar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .credit {
+    font-size: 10px;
+  }
+
+  .hero h1 {
+    font-size: 18px;
+  }
+}