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;position:relative}
.table td.invalid::after{
  content:"⚠";position:absolute;inset-inline-end:6px;inset-block-start:6px;font-size:14px;color:#ef4444;opacity:.95;pointer-events:none
}
.table td.invalid[title]{cursor:help}
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)}
.lock{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
  backdrop-filter:blur(6px);z-index:9999
}
.lock-card{
  background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
  padding:22px;min-width:320px;display:flex;flex-direction:column;gap:10px
}
.lock-title{font-weight:800;color:var(--primary);font-size:22px}
.lock-btn{width:100%}
.lock-msg{color:#ef4444;font-weight:700}
@media (max-width:640px){
  .filters{flex-direction:column}
  .btn-row{gap:6px}
  .lock-card{min-width:260px}
}