Update style.css

style.css

@@ -42,9 +42,8 @@ body {
 
 .topbar {
   display: flex;
+  justify-content: center;
   align-items: center;
-  justify-content: space-between;
-  gap: 14px;
   padding: 10px 18px;
   background: #ffffff;
   border-radius: 18px;
@@ -52,52 +51,10 @@ body {
   border: 1px solid rgba(226, 232, 240, 0.96);
 }
 
-.top-left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.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: 15px;
-  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
-}
-
-.brand-text {
-  display: flex;
-  flex-direction: column;
-  line-height: 1.3;
-}
-
-.brand-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: #111827;
-}
-
-.brand-sub {
-  font-size: 11px;
-  color: #6b7280;
-}
-
-.top-right {
-  display: flex;
-  align-items: center;
-}
-
 .credit {
   font-size: 10.5px;
   color: #374151;
-  padding: 4px 10px;
+  padding: 4px 14px;
   border-radius: 999px;
   background-color: #eef2ff;
   border: 1px solid rgba(129, 140, 248, 0.45);
@@ -109,22 +66,43 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  align-items: center;
 }
 
 /* هيرو */
 
 .hero {
+  text-align: center;
   background:
     radial-gradient(circle at right top, var(--primary-soft), transparent),
     #ffffff;
-  padding: 16px 16px 12px;
+  padding: 18px 18px 14px;
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-soft);
   border: 1px solid rgba(226, 232, 240, 0.96);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.hero .logo-mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #2563eb, #60a5fa);
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 16px;
+  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4);
 }
 
 .hero h1 {
-  margin: 0 0 6px;
+  margin: 0;
   font-size: 20px;
   font-weight: 600;
   color: #111827;
@@ -134,14 +112,16 @@ body {
   margin: 0;
   font-size: 12.5px;
   color: var(--text-muted);
+  max-width: 640px;
 }
 
 /* خطوات */
 
 .steps {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 8px;
+  width: 100%;
 }
 
 .step {
@@ -153,6 +133,8 @@ body {
   background: #ffffff;
   box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
   border: 1px solid rgba(229, 231, 235, 0.96);
+  justify-content: center;
+  text-align: center;
 }
 
 .step-number {
@@ -187,6 +169,9 @@ body {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
 }
 
 .card-row {
@@ -206,12 +191,14 @@ body {
   font-weight: 600;
   margin: 0;
   color: #111827;
+  text-align: center;
 }
 
 .hint {
   margin: 0;
   font-size: 10.5px;
   color: var(--text-muted);
+  text-align: center;
 }
 
 /* اختيار الملفات */
@@ -227,6 +214,7 @@ body {
   background-color: #f9fafb;
   cursor: pointer;
   transition: all var(--transition);
+  align-self: center;
 }
 
 .file-picker:hover {
@@ -394,11 +382,13 @@ body {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
+  justify-content: center;
 }
 
 .btn-main {
   flex: 1;
   padding: 9px 0;
+  max-width: 420px;
   font-size: 12.5px;
   font-weight: 600;
   border: none;
@@ -429,7 +419,7 @@ body {
 }
 
 .btn-secondary {
-  padding: 9px 14px;
+  padding: 9px 16px;
   font-size: 11px;
   border-radius: 999px;
   border: 1px solid #e5e7eb;
@@ -521,16 +511,6 @@ body {
     padding: 18px 10px 22px;
   }
 
-  .topbar {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-  }
-
-  .hero h1 {
-    font-size: 18px;
-  }
-
   .actions {
     flex-direction: column;
   }
@@ -538,5 +518,6 @@ body {
   .btn-main,
   .btn-secondary {
     width: 100%;
+    max-width: none;
   }
 }