Update style.css

style.css

@@ -1,113 +1,110 @@
 :root{
-  --bg:#F4F6FA;
-  --card:#FFFFFF;
-  --text:#1F2937;
-  --muted:#6B7280;
+  --bg:#f6f7fb;
+  --card:#ffffff;
+  --ink:#101828;
+  --muted:#667085;
   --primary:#4137A8;
-  --accent:#1CADE4;
-  --success:#42BA97;
-  --secondary:#5C6E88;
-  --violet:#7030A0;
-  --cyan:#27CED7;
-  --warning:#FFC000;
-  --danger:#F5554A;
-  --border:#E5E7EB;
-  --rowAlt:#F5F8FF;
+  --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);
 }
 
-*{ box-sizing:border-box }
-html,body{ height:100% }
+*{box-sizing:border-box}
+html,body{height:100%}
 body{
-  margin:0; padding:24px; background:var(--bg); color:var(--text);
-  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+  margin:0; font-family:"Cairo", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
+  color:var(--ink); background:var(--bg); line-height:1.7;
 }
 
-.container{ max-width:1100px; margin:0 auto; }
-.center{ text-align:center }
+.container{max-width:1100px; margin:24px auto; padding:0 16px}
 
-.hero h1{ margin:0 0 4px; font-weight:800; font-size:clamp(22px,4vw,34px); color:var(--primary) }
-.hero .sub{ margin:0; color:var(--muted); font-size:14px }
-.hero .sep{ margin:0 .5rem }
+.center{display:block}
+.hero{
+  text-align:center; margin-bottom:16px;
+}
+.hero h1{
+  margin:4px 0 6px; font-size:28px; font-weight:700; color:var(--primary);
+}
+.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);
+  color:var(--muted); font-weight:600; box-shadow:var(--shadow);
+}
+.signature .role{color:var(--primary)}
+.signature .name{color:var(--ink)}
 
 .card{
-  margin:18px auto 28px; background:var(--card); border:1px solid var(--border);
-  border-radius:16px; box-shadow:0 6px 24px rgba(0,0,0,.05); padding:18px;
+  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
+  padding:18px; border:1px solid var(--border);
 }
 
-.label{ display:block; text-align:right; font-weight:700; margin:4px 4px 8px }
+.label{display:block; font-weight:600; margin-bottom:8px; color:var(--muted)}
 .paste{
-  width:100%; min-height:180px; resize:vertical; border:1px solid var(--border); border-radius:12px;
-  padding:12px 14px; line-height:1.7; font-size:15px; background:#fff;
+  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;
 }
-.paste:focus{ outline:2px solid var(--accent) }
+.paste:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(65,55,168,.12)}
 
-.filters{ display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; justify-content:center }
+.filters{display:flex; gap:10px; margin:12px 0}
 .control{
-  border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:#fff;
-  min-width:260px; font-size:14px;
+  flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
+  outline:none; background:#fff;
 }
+.control:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(65,55,168,.08)}
 
-.hint{ margin:12px 0 8px; color:var(--muted); font-size:13px }
+.hint{color:var(--muted); font-size:14px; margin:8px 0 10px}
 
-.btn-row{
-  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin:8px 0 16px;
-}
+.btn-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px}
 .btn{
-  border:0; border-radius:999px; padding:10px 14px; font-weight:700; cursor:pointer;
-  box-shadow:0 4px 12px rgba(0,0,0,.08); transition:transform .05s ease;
-}
-.btn:active{ transform:translateY(1px) }
-.btn[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none }
-
-.btn-primary{ background:var(--primary); color:#fff }
-.btn-success{ background:var(--success); color:#fff }
-.btn-info{ background:var(--accent); color:#fff }
-.btn-danger{ background:var(--danger); color:#fff }
-.btn-light{ background:#EEF2FF; color:var(--primary) }
-
-.btn[data-step]{ position:relative; padding-inline-start:36px }
-.btn[data-step]::before{
-  content:attr(data-step); position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%);
-  width:20px; height:20px; border-radius:999px; background:#fff; color:var(--primary);
-  font-weight:800; font-size:12px; display:grid; place-items:center;
+  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;
 }
+.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}
 
 .badge{
-  display:inline-flex; align-items:center; justify-content:center;
-  min-width:22px; height:22px; padding:0 6px; background:#fff; color:var(--primary);
-  border-radius:999px; font-weight:800; font-size:12px; margin-inline-start:8px;
-  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
+  background:#fff; color:var(--primary); border-radius:999px; padding:2px 8px; margin-right:6px; font-size:12px;
 }
 
-.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:12px }
-.table{ width:100%; border-collapse:collapse; min-width:900px }
+.table-wrap{overflow:auto; border-radius:14px; border:1px solid var(--border)}
+.table{width:100%; border-collapse:separate; border-spacing:0}
 .table thead th{
-  background:var(--primary); color:#fff; padding:10px; font-weight:800; position:sticky; top:0; text-align:center;
+  background:var(--table-head); color:#fff; font-weight:700; padding:12px; position:sticky; top:0;
 }
-.table td{ padding:10px; border:1px solid var(--border); text-align:center; background:#fff }
-.table tbody tr:nth-child(even) td{ background:var(--rowAlt) }
-.invalid{ background:#FFF2F2 !important; outline:2px solid var(--danger) }
-
-.footer{ margin:18px 0; text-align:center; color:var(--muted); font-size:13px }
-
-.toast{
-  position:fixed; left:50%; transform:translateX(-50%); bottom:22px;
-  background:#111827; color:#fff; padding:10px 14px; border-radius:10px; font-weight:700; opacity:0;
+.table tbody td{
+  padding:10px 12px; background:#fff; border-top:1px solid var(--border);
 }
-.toast.show{ opacity:1; transition:opacity .2s ease }
+.table tbody tr:nth-child(even) td{background:var(--table-alt)}
+.table td[contenteditable="true"]{outline:none}
+.table td.invalid{background:#fff3f3}
 
-.modal{
-  position:fixed; inset:0; background:rgba(0,0,0,.35); display:grid; place-items:center; padding:16px;
+.footer{
+  text-align:center; margin:18px 0 6px; color:var(--muted);
 }
-.modal[hidden]{ display:none }
-.modal-card{
-  width:min(720px,95vw); background:#fff; border-radius:14px; border:1px solid var(--border);
-  box-shadow:0 10px 40px rgba(0,0,0,.2); padding:14px;
+.footer .signature{
+  box-shadow:none; background:transparent; border-color:transparent;
+  gap:6px; padding:0; font-weight:600;
 }
-.modal-head{ font-weight:800; color:var(--primary); margin-bottom:8px; text-align:right }
-.modal-textarea{ min-height:180px }
 
+.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){
-  body{ padding:16px }
-  .table{ min-width:760px }
+  .filters{flex-direction:column}
+  .btn-row{gap:6px}
 }