Update style.css

style.css

@@ -44,258 +44,83 @@ body{
   padding:0 16px;
 }
 
-.hero{
-  position:relative;
-  margin-bottom: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);
+  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);
-}
-
+.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);
+  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);
-}
+.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;
+  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;
+  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: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;
-}
+.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}
 
-.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}
 
-.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-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;
+.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.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}
+.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);
+  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}