Update style.css

style.css

@@ -1,35 +1,76 @@
 :root{
+  /* لوحتك */
   --primary:#4137A8; --primary2:#1CADE4; --success:#00B050;
   --success2:#42BA97; --gray1:#5C6E88; --violet:#7030A0;
   --turq:#27CED7; --yellow:#FFC000; --danger:#F5554A;
+
   --bg:#F6F8FB; --card:#FFFFFF; --text:#1B2559; --muted:#667085; --border:#E5E7EB;
 }
 *{box-sizing:border-box}
 html,body{margin:0;height:100%}
-body{font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}
-.container{max-width:1100px;margin:0 auto;padding:16px;text-align:center}
+body{
+  direction:rtl;
+  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;
+  background:var(--bg); color:var(--text); text-align:center;
+}
+.container{max-width:1100px;margin:0 auto;padding:16px}
+.center{text-align:center}
+
 .hero{
   border:1px solid var(--border); border-radius:16px; padding:22px;
-  background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:0 8px 26px rgba(16,24,40,.06); margin:10px 0 18px
+  background:linear-gradient(180deg,#fff,#fbfdff);
+  box-shadow:0 8px 26px rgba(16,24,40,.06);
+  margin:10px 0 18px;
 }
-.hero h1{margin:0 0 6px;font-size:clamp(22px,3vw,32px);color:var(--primary)}
+.hero h1{margin:0 0 6px;font-size:clamp(22px,3vw,32px);color:var(--primary);font-weight:700}
 .sub{margin:0;color:var(--gray1)} .sub b{color:var(--violet)}
+
 .card{
   background:var(--card); border:1px solid var(--border); border-radius:14px;
-  padding:18px; box-shadow:0 6px 18px rgba(16,24,40,.05)
+  padding:18px; box-shadow:0 6px 18px rgba(16,24,40,.05);
 }
-.lead{margin:0 0 10px;font-size:15px}
-.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 14px}
-.step{
-  background:#f9fbff;border:1px dashed var(--border);border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center;justify-content:center
+.label{font-weight:700;display:block;margin-bottom:6px}
+.paste{
+  width:100%; min-height:clamp(160px,40vh,420px); line-height:1.8;
+  border:1px solid var(--border); border-radius:12px; padding:12px;
+  text-align:right; resize:vertical;
 }
-.num{width:30px;height:30px;border-radius:50%;background:var(--primary2);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
-.step:nth-child(2) .num{background:var(--success)}
-.step:nth-child(3) .num{background:var(--yellow);color:#111}
+.hint{color:var(--muted); font-size:13px; margin:8px 0 12px}
+
+.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:6px 0 10px}
 .btn{
-  display:inline-block;padding:12px 18px;border:none;border-radius:12px;text-decoration:none;font-weight:700;cursor:pointer
+  border:none;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer;position:relative
 }
 .btn-primary{color:#fff;background:linear-gradient(90deg,var(--primary),var(--primary2));box-shadow:0 8px 18px rgba(65,55,168,.18)}
-.mini{margin-top:10px;color:var(--muted);font-size:13px}
-.footer{color:var(--muted);margin-top:24px}
-@media (max-width:768px){ .steps{grid-template-columns:1fr} }
+.btn-secondary{background:#f8fafc;color:var(--text);border:1px solid var(--border)}
+.btn-light{background:#fff;color:var(--text);border:1px dashed var(--border)}
+/* أرقام الخطوات */
+#btn-parse::before,#btn-export::before,#btn-clear::before{
+  content:attr(data-step); position:absolute; top:-8px; inset-inline-start:-8px;
+  background:var(--primary2); color:#fff; width:22px; height:22px; border-radius:50%;
+  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
+  box-shadow:0 2px 8px rgba(0,0,0,.15);
+}
+
+.fname{
+  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
+  min-width:140px; outline:none;
+}
+
+/* الجدول */
+.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:12px}
+.table{border-collapse:collapse; width:100%}
+.table thead th{
+  background:var(--primary); color:#fff; position:sticky; top:0; z-index:1;
+  padding:10px; border-bottom:1px solid var(--border); text-align:center
+}
+.table td{padding:10px; border-top:1px solid var(--border); text-align:center}
+.table td[contenteditable="true"]{background:#fffaf2}
+.table tr:nth-child(even) td{background:#fafcff}
+
+/* موبايل */
+@media (max-width:768px){
+  .container{padding:12px}
+  .paste{min-height:clamp(140px,34vh,360px)}
+  .steps{grid-template-columns:1fr}
+}