Stabilize homepage focus card

frontend/components/dashboard/Dashboard.module.css

@@ -679,31 +679,50 @@
 
 .root :global(.home-risk-badge) {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
   border-radius: 999px;
-  padding: 7px 10px;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  background: rgba(15, 23, 42, 0.58);
-  color: var(--text-secondary);
-  font-size: 11px;
+  padding: 5px 10px 5px 8px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(8, 15, 30, 0.52);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 8px 18px rgba(2, 6, 23, 0.14);
+  color: rgba(226, 232, 240, 0.9);
+  font-size: 10px;
   font-weight: 800;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.root :global(.home-risk-badge::before) {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.92;
+  box-shadow: 0 0 12px color-mix(in srgb, currentColor 28%, transparent);
 }
 
 .root :global(.home-risk-badge.high) {
-  border-color: rgba(248, 113, 113, 0.32);
-  color: #fecaca;
-  background: rgba(127, 29, 29, 0.22);
+  border-color: rgba(248, 113, 113, 0.22);
+  color: #fca5a5;
+  background: rgba(69, 10, 10, 0.34);
 }
 
 .root :global(.home-risk-badge.medium) {
-  border-color: rgba(251, 191, 36, 0.32);
-  color: #fde68a;
-  background: rgba(120, 53, 15, 0.22);
+  border-color: rgba(251, 191, 36, 0.2);
+  color: #fbbf24;
+  background: rgba(67, 36, 6, 0.34);
 }
 
 .root :global(.home-risk-badge.low) {
-  border-color: rgba(52, 211, 153, 0.3);
-  color: #bbf7d0;
-  background: rgba(20, 83, 45, 0.18);
+  border-color: rgba(52, 211, 153, 0.22);
+  color: #34d399;
+  background: rgba(7, 47, 35, 0.34);
 }
 
 .root :global(.home-panel-subtitle) {