Update style.css

style.css

@@ -1,75 +1,303 @@
 :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; 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); 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)}
-.label{display:block; font-weight:600; margin-bottom:8px; color:var(--muted)}
-.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)}
-.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; 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{
+  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{
+  position:relative;
+  margin-bottom:16px;
+}
+
+.theme-toggle{
+  position:absolute;
+  top:0;
+  inset-inline-start:0;   /* لا يؤثر على توسيط العنوان */
+  padding:8px 12px;
+  border-radius:999px;
+  border:1px solid var(--border);
+  background:var(--card);
+  color:var(--ink);
+  font-weight:700;
+  cursor:pointer;
+  box-shadow:var(--shadow);
+}
+
+.title{
+  margin:0 0 6px;
+  font-size:28px;
+  font-weight:800;
+  color:var(--primary);
+}
+
+.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: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::placeholder{
+  color:#9aa3af;
+  white-space:pre-line;
+}
+
+.paste:focus{
+  border-color:var(--primary);
+  box-shadow:0 0 0 3px rgba(65,55,168,.12);
+}
+
+.filters{
+  display:flex;
+  gap:10px;
+  margin:14px 0;
+  justify-content:center;
+  flex-wrap:wrap;
+}
+
+.center-input{
+  text-align:center;
+}
+
+.control{
+  width:320px;
+  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);
+}
+
+.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}
-.btn:hover:not(:disabled){transform:translateY(-1px)}
+
+.btn:disabled{
+  opacity:.5;
+  cursor:not-allowed;
+}
+
+.btn:hover:not(:disabled){
+  transform:translateY(-1px);
+}
+
 .btn-primary{background:var(--primary); color:#fff}
 .btn-primary:hover{background:var(--primary-600)}
 .btn-success{background:var(--success); color:#fff}
 .btn-info{background:var(--info); color:#fff}
 .btn-danger{background:var(--danger); color:#fff}
-.btn-light{background:#eef2ff; color:#2b2b2b}
-body.dark .btn-light{background:#1f2937; color:#e5e7eb}
-.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; 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)}
+
+.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;
+  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}
 body.dark .table td.invalid{background:#3b1d1d}
-.cat{display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700}
-.cat.login{background:#fff1; color:#fff; border:1px solid #fff3}
-.cat.device{background:#0ea5e922; color:#0ea5e9; border:1px solid #0ea5e955}
-.cat.form{background:#fef3c7; color:#a16207; border:1px solid #f59e0b}
-.cat.network{background:#dcfce7; color:#166534; border:1px solid #22c55e}
-.cat.update{background:#e0e7ff; color:#3730a3; border:1px solid #6366f1}
-.cat.default{background:#f1f5f9; color:#0f172a; border:1px solid #cbd5e1}
+
+.cat{
+  display:inline-block;
+  padding:4px 8px;
+  border-radius:999px;
+  font-size:12px;
+  font-weight:700;
+}
+
+.cat.login   {background:#fff1;   color:#fff;     border:1px solid #fff3}
+.cat.device  {background:#0ea5e922; color:#0ea5e9; border:1px solid #0ea5e955}
+.cat.form    {background:#fef3c7; color:#a16207;  border:1px solid #f59e0b}
+.cat.network {background:#dcfce7; color:#166534;  border:1px solid #22c55e}
+.cat.update  {background:#e0e7ff; color:#3730a3;  border:1px solid #6366f1}
+.cat.default {background:#f1f5f9; color:#0f172a;  border:1px solid #cbd5e1}
 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.show{opacity:1; transform:translateY(0)}
+
+.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; align-items:center}
+  .filters{flex-direction:column}
   .btn-row{gap:6px}
 }