Update style.css

style.css

@@ -15,6 +15,18 @@
   --shadow:0 4px 20px rgba(0,0,0,.06);
 }
 
+/* Dark mode */
+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);
+}
+
 *{box-sizing:border-box}
 html,body{height:100%}
 body{
@@ -25,15 +37,16 @@ body{
 .container{max-width:1100px; margin:24px auto; padding:0 16px}
 
 .center{display:block}
-.hero{
-  text-align:center; margin-bottom: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);
 }
+.actions-inline{display:flex; gap:8px; align-items:center}
+
 .signature{
   display:inline-flex; gap:8px; align-items:center; justify-content:center;
-  background:#fff; padding:6px 12px; border-radius:999px; border:1px solid var(--border);
+  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)}
@@ -47,14 +60,14 @@ body{
 .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:#fff; font-family:inherit;
+  border:1px solid var(--border); outline:none; background:var(--card); color:var(--ink);
 }
 .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:#fff;
+  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)}
 
@@ -65,6 +78,8 @@ body{
   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-primary{background:var(--primary); color:#fff}
@@ -73,6 +88,7 @@ body{
 .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}
 
 .badge{
   background:#fff; color:var(--primary); border-radius:999px; padding:2px 8px; margin-right:6px; font-size:12px;
@@ -84,11 +100,24 @@ body{
   background:var(--table-head); color:#fff; font-weight:700; padding:12px; position:sticky; top:0;
 }
 .table tbody td{
-  padding:10px 12px; background:#fff; border-top:1px solid var(--border);
+  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}
+body.dark .cat.default{background:#111827; color:#e5e7eb; border-color:#334155}
 
 .footer{
   text-align:center; margin:18px 0 6px; color:var(--muted);
@@ -104,6 +133,7 @@ body{
   transition:.25s ease; pointer-events:none; font-weight:600;
 }
 .toast.show{opacity:1; transform:translateY(0)}
+
 @media (max-width:640px){
   .filters{flex-direction:column}
   .btn-row{gap:6px}