From c8761e9332883d655f1686fc808a0a1d4f19a11c Mon Sep 17 00:00:00 2001
From: Rene Fichtmueller <renefichtmueller@MacStudio-von-Rene-8.local>
Date: Thu, 9 Apr 2026 20:51:26 +0200
Subject: [PATCH] =?UTF-8?q?ui:=20fix=20score=20breakdown=20card=20?=
 =?UTF-8?q?=E2=80=94=20match=20newspaper=20design=20(no=20blue=20tint,=20s?=
 =?UTF-8?q?harp=20corners,=20correct=20border=20colors)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index 478921f..3e78853 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3187,9 +3187,9 @@ function renderHealthReport(d) {
   h += '</div></div></div>';
 
   // === DATA ACCURACY SECTION ===
-  h += '<div style="margin:1.5rem 0;padding:1rem;background:rgba(122,162,247,.06);border:1px solid rgba(122,162,247,.15);border-radius:10px">';
-  h += '<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#7aa2f7" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>';
-  h += '<span style="font-size:.85rem;font-weight:600;color:#7aa2f7">Score Breakdown — Why ' + score + '/100?</span></div>';
+  h += '<div style="margin:1.5rem 0;padding:1rem;background:transparent;border:1px solid var(--border);border-radius:0">';
+  h += '<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="var(--blue)" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>';
+  h += '<span style="font-size:.85rem;font-weight:600;color:var(--blue)">Score Breakdown — Why ' + score + '/100?</span></div>';
 
   // Score calculation table
   h += '<table style="width:100%;font-size:.78rem;border-collapse:collapse">';
@@ -3216,7 +3216,7 @@ function renderHealthReport(d) {
       totalE += earned;
     }
     var statusIcon = v.status === 'pass' ? '✅' : v.status === 'warning' ? '⚠️' : v.status === 'fail' ? '❌' : 'ℹ️';
-    h += '<tr style="border-bottom:1px solid rgba(255,255,255,.03)"><td style="padding:.35rem .5rem">' + statusIcon + ' ' + info.label + '</td>';
+    h += '<tr style="border-bottom:1px solid var(--border)"><td style="padding:.35rem .5rem">' + statusIcon + ' ' + info.label + '</td>';
     h += '<td style="text-align:center;padding:.35rem;color:var(--muted)">' + (v.status === 'info' ? '—' : w) + '</td>';
     h += '<td style="text-align:center;padding:.35rem;font-weight:600;color:' + (earned === w ? 'var(--green)' : earned > 0 ? 'var(--orange)' : v.status === 'info' ? 'var(--muted)' : 'var(--red)') + '">' + (v.status === 'info' ? '—' : earned) + '</td>';
     h += '<td style="padding:.35rem .5rem;font-size:.72rem">' + reason + '</td></tr>';
@@ -3230,7 +3230,7 @@ function renderHealthReport(d) {
   h += '</table>';
 
   // Data source note
-  h += '<div style="margin-top:.75rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.05);font-size:.72rem;color:var(--muted)">';
+  h += '<div style="margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--border);font-size:.72rem;color:var(--muted)">';
   h += '<strong>Data Sources:</strong> PeeringDB (profile, IX, facilities), RIPE Stat (prefixes, neighbours, visibility, RPKI), ';
   h += 'RIPE Atlas (probes), Cloudflare RPKI (ROA + ASPA), MANRS Observatory, RIPE DB (IRR objects).<br>';
   h += '<strong>Scoring:</strong> Each check has a weight reflecting its importance to routing security. ';