style.css

: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);
}

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{
  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: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}

.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}
body.dark .cat.default{background:#111827; color:#e5e7eb; border-color:#334155}

.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}
  .btn-row{gap:6px}
}