Update src/components/ReportCard.jsx

src/components/ReportCard.jsx

@@ -1,43 +1,43 @@
 export default function ReportCard({ data }) {
   if (!data) return null;
   return (
-    <div className="glass-card mt-6 overflow-hidden" style={{ animation: "fadeUp 0.6s ease both" }}>
-      {/* توهج خلفي ملون يعكس لون التخصص */}
+    <div className="glass-card overflow-hidden" style={{ animation: "fadeUp 0.5s ease both" }}>
+      {/* هالة التوهج الديناميكية المرتبطة بالتخصص */}
       <div 
-        className="absolute -top-20 -right-20 w-48 h-48 rounded-full blur-[70px] opacity-20 pointer-events-none" 
+        className="absolute -top-24 -right-24 w-52 h-52 rounded-full blur-[80px] opacity-20 pointer-events-none" 
         style={{ background: data.color }} 
       />
 
       <div className="relative z-10">
-        <div className="flex justify-between items-start mb-6 pb-6 border-b border-white/5">
+        <div className="flex justify-between items-start mb-6 pb-5 border-b border-white/5">
           <div>
-            <h2 className="text-[10px] uppercase tracking-widest text-muted font-mono mb-1">Final_Report</h2>
+            <h2 className="text-[10px] font-mono uppercase tracking-widest text-neutral-500 mb-1">ANALYSIS_METRICS</h2>
             <h1 className="text-2xl font-bold" style={{ color: data.color }}>{data.title}</h1>
           </div>
-          <div className="text-4xl font-black opacity-[0.03] -rotate-6 font-mono select-none text-white absolute top-0 left-0">
+          <div className="text-4xl font-mono font-black opacity-[0.03] select-none text-white absolute top-0 left-0">
             {data.stamp}
           </div>
         </div>
 
-        <div className="space-y-3 mb-8">
+        <div className="space-y-3 mb-6">
           {data.findings.map((f, i) => (
-            <div key={i} className="flex gap-3 text-sm text-slate-300 bg-white/5 p-3 rounded-lg border border-white/5 items-center">
-              <div className="w-1.5 h-1.5 rounded-full" style={{ background: data.color }} />
-              <span>{f}</span>
+            <div key={i} className="flex gap-3 text-sm text-neutral-200 bg-white/[0.02] p-3.5 rounded-xl border border-white/5 items-center">
+              <div className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ background: data.color }} />
+              <span className="leading-relaxed">{f}</span>
             </div>
           ))}
         </div>
 
-        <div className="p-4 rounded-xl bg-black/40 border border-white/5">
-          <div className="flex justify-between text-xs font-mono text-muted mb-2">
-            <span>Confidence</span>
-            <span style={{ color: data.color }}>{data.confidence}%</span>
+        <div className="p-4 rounded-xl bg-black/30 border border-white/5">
+          <div className="flex justify-between text-xs font-mono text-neutral-500 mb-2">
+            <span>مؤشر اليقين الرقمي</span>
+            <span style={{ color: data.color }} className="font-bold">{data.confidence}%</span>
           </div>
-          <div className="w-full h-1.5 bg-white/10 rounded-full overflow-hidden mb-4">
-            <div className="h-full transition-all duration-1000" style={{ width: `${data.confidence}%`, background: data.color }} />
+          <div className="w-full h-1 bg-white/5 rounded-full overflow-hidden mb-4">
+            <div className="h-full transition-all duration-1000 ease-out" style={{ width: `${data.confidence}%`, background: data.color }} />
           </div>
-          <div className="text-[10px] text-muted mb-1 font-mono">VERDICT:</div>
-          <div className="text-sm font-medium text-white">"{data.verdict}"</div>
+          <div className="text-[10px] font-mono text-neutral-500 mb-1.5 uppercase tracking-wider">الخلاصة الميدانية:</div>
+          <div className="text-sm font-medium text-white leading-relaxed">"{data.verdict}"</div>
         </div>
       </div>
     </div>