Update style.css

style.css

@@ -1,69 +1,40 @@
 :root{
-  --bg:#f6f7fb;
-  --card:#ffffff;
-  --ink:#101828;
-  --muted:#667085;
-  --primary:#4137A8;
-  --primary-600:#3b3299;
-  --success:#1b9c85;
-  --info:#0ea5e9;
-  --danger:#ef4444;
-  --border:#e5e7eb;
-  --table-head:#302a86;
-  --table-alt:#f5f8ff;
-  --radius:16px;
-  --shadow:0 4px 20px rgba(0,0,0,.06);
+  --bg:#f6f7fb; --card:#ffffff; --ink:#101828; --muted:#667085;
+  --primary:#4137A8; --primary-600:#3b3299; --success:#1b9c85; --info:#0ea5e9; --danger:#ef4444;
+  --border:#e5e7eb; --table-head:#302a86; --table-alt:#f5f8ff; --radius:16px; --shadow:0 4px 20px rgba(0,0,0,.06);
 }
 body.dark{
-  --bg:#0f172a;
-  --card:#111827;
-  --ink:#e5e7eb;
-  --muted:#94a3b8;
-  --border:#1f2937;
-  --table-head:#1f2565;
-  --table-alt:#0b1326;
-  --shadow:0 4px 20px rgba(0,0,0,.35);
+  --bg:#0f172a; --card:#111827; --ink:#e5e7eb; --muted:#94a3b8; --border:#1f2937;
+  --table-head:#1f2565; --table-alt:#0b1326; --shadow:0 4px 20px rgba(0,0,0,.35);
 }
 *{box-sizing:border-box}
 html,body{height:100%}
-body{
-  margin:0; font-family:"Cairo",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
-  color:var(--ink); background:var(--bg); line-height:1.7;
-}
+body{margin:0; font-family:"Cairo",system-ui,-apple-system,Segoe UI,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.7; text-align:center}
 .container{max-width:1100px; margin:24px auto; padding:0 16px}
 .hero{margin-bottom:16px}
 .hero-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
-.hero h1{margin:4px 0 6px; font-size:28px; font-weight:700; color:var(--primary)}
+.hero h1{margin:4px 0 6px; font-size:28px; font-weight:700; color:var(--primary); width:100%}
 .actions-inline{display:flex; gap:8px; align-items:center}
-.signature{
-  display:inline-flex; gap:8px; align-items:center; justify-content:center;
-  background:var(--card); padding:6px 12px; border-radius:999px; border:1px solid var(--border);
-  color:var(--muted); font-weight:600; box-shadow:var(--shadow);
-}
-.signature .role{color:var(--primary)}
-.signature .name{color:var(--ink)}
-.card{
-  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
-  padding:18px; border:1px solid var(--border);
-}
+.signature{display:inline-flex; gap:8px; align-items:center; justify-content:center; background:var(--card); padding:6px 12px; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-weight:600; box-shadow:var(--shadow)}
+.signature .role{color:var(--primary)} .signature .name{color:var(--ink)}
+.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; border:1px solid var(--border)}
 .label{display:block; font-weight:600; margin-bottom:8px; color:var(--muted)}
-.paste{
-  width:100%; min-height:160px; resize:vertical; padding:12px 14px; border-radius:12px;
-  border:1px solid var(--border); outline:none; background:var(--card); color:var(--ink);
-}
+.paste-wrap{position:relative}
+.paste{width:100%; min-height:180px; resize:vertical; padding:12px 14px; border-radius:12px; border:1px solid var(--border); outline:none; background:var(--card); color:var(--ink); text-align:center}
 .paste:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(65,55,168,.12)}
-.filters{display:flex; gap:10px; margin:12px 0}
-.control{
-  flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
-  outline:none; background:var(--card); color:var(--ink);
-}
+.sample-overlay{position:absolute; inset:8px; border-radius:12px; border:1px dashed var(--border); background:rgba(0,0,0,.03); color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; cursor:pointer}
+.sample-title{font-weight:800; margin-bottom:6px}
+.sample-body{margin:0; white-space:pre-wrap; direction:rtl; text-align:center; color:#6b7280}
+.sample-hint{margin-top:6px; font-size:12px; color:#94a3b8}
+.filters{display:flex; gap:10px; margin:14px 0; justify-content:center}
+.field{min-width:260px}
+.mini-label{font-weight:700; color:var(--muted); margin-bottom:6px}
+.center-input{text-align:center}
+.control{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); outline:none; background:var(--card); color:var(--ink)}
 .control:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(65,55,168,.08)}
 .hint{color:var(--muted); font-size:14px; margin:8px 0 10px}
-.btn-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px}
-.btn{
-  padding:10px 14px; border:none; border-radius:12px; cursor:pointer; font-weight:700;
-  background:#ddd; color:#111; transition:transform .04s ease, box-shadow .2s ease;
-}
+.btn-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin-bottom:10px}
+.btn{padding:10px 14px; border:none; border-radius:12px; cursor:pointer; font-weight:700; background:#ddd; color:#111; transition:transform .04s ease, box-shadow .2s ease}
 body.dark .btn{color:#eee}
 .btn.small{padding:6px 10px; font-weight:600}
 .btn:disabled{opacity:.5; cursor:not-allowed}
@@ -75,17 +46,13 @@ body.dark .btn{color:#eee}
 .btn-danger{background:var(--danger); color:#fff}
 .btn-light{background:#eef2ff; color:#2b2b2b}
 body.dark .btn-light{background:#1f2937; color:#e5e7eb}
-.badge{
-  background:#fff; color:var(--primary); border-radius:999px; padding:2px 8px; margin-right:6px; font-size:12px;
-}
+.num{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background:#fff; color:var(--primary); border:1px solid var(--border); margin-inline-end:6px; font-weight:800; font-size:12px}
+.badge{background:#fff; color:var(--primary); border-radius:999px; padding:2px 8px; margin-inline-start:6px; font-size:12px}
+.warn{margin:8px auto 12px; padding:8px 12px; border-radius:10px; border:1px solid #f59e0b; color:#92400e; background:#fffbeb; max-width:900px}
 .table-wrap{overflow:auto; border-radius:14px; border:1px solid var(--border)}
-.table{width:100%; border-collapse:separate; border-spacing:0}
-.table thead th{
-  background:var(--table-head); color:#fff; font-weight:700; padding:12px; position:sticky; top:0;
-}
-.table tbody td{
-  padding:10px 12px; background:var(--card); border-top:1px solid var(--border); color:var(--ink);
-}
+.table{width:100%; border-collapse:separate; border-spacing:0; text-align:center}
+.table thead th{background:var(--table-head); color:#fff; font-weight:700; padding:12px; position:sticky; top:0}
+.table tbody td{padding:10px 12px; background:var(--card); border-top:1px solid var(--border); color:var(--ink)}
 .table tbody tr:nth-child(even) td{background:var(--table-alt)}
 .table td[contenteditable="true"]{outline:none}
 .table td.invalid{background:#fff3f3}
@@ -100,13 +67,9 @@ body.dark .table td.invalid{background:#3b1d1d}
 body.dark .cat.default{background:#111827; color:#e5e7eb; border-color:#334155}
 .footer{text-align:center; margin:18px 0 6px; color:var(--muted)}
 .footer .signature{box-shadow:none; background:transparent; border-color:transparent; gap:6px; padding:0; font-weight:600}
-.toast{
-  position:fixed; bottom:20px; inset-inline-start:20px; background:#111827; color:#fff;
-  padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); opacity:0; transform:translateY(8px);
-  transition:.25s ease; pointer-events:none; font-weight:600;
-}
+.toast{position:fixed; bottom:20px; inset-inline-start:20px; background:#111827; color:#fff; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:.25s ease; pointer-events:none; font-weight:600}
 .toast.show{opacity:1; transform:translateY(0)}
 @media (max-width:640px){
-  .filters{flex-direction:column}
+  .filters{flex-direction:column; align-items:center}
   .btn-row{gap:6px}
 }