update

src/renderer/components/dashboard/MetricsGrid.tsx

@@ -30,19 +30,27 @@ export function MetricCard({
     accent: "bg-[color:var(--accent-soft)]",
   };
 
+  const borderMap = {
+    default: "border-l-transparent",
+    success: "border-l-[color:var(--success)]",
+    warn: "border-l-[color:var(--warn)]",
+    danger: "border-l-[color:var(--danger)]",
+    accent: "border-l-[color:var(--accent)]",
+  };
+
   return (
     <button
       type="button"
       onClick={onClick}
-      className="focus-ring flex items-center gap-3.5 rounded-[10px] border border-[color:var(--line)] bg-[color:var(--panel)] px-4 py-3.5 text-left transition duration-150 hover:border-[color:var(--line-strong)] hover:shadow-sm"
+      className={`focus-ring flex items-center gap-4 rounded-[8px] border border-l-[3px] border-[color:var(--line)] bg-[color:var(--panel)] px-4 py-4 text-left transition duration-150 hover:border-[color:var(--line-strong)] hover:shadow-sm ${borderMap[tone]}`}
     >
-      <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-[8px] ${bgMap[tone]}`}>
-        <Icon size={20} weight="fill" className={toneMap[tone]} />
+      <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-[8px] ${bgMap[tone]}`}>
+        <Icon size={24} weight="fill" className={toneMap[tone]} />
       </div>
       <div className="min-w-0 flex-1">
-        <div className="text-[11px] font-medium uppercase tracking-[0.06em] text-[color:var(--muted)]">{label}</div>
-        <div className={`text-[20px] font-bold tracking-[-0.02em] leading-tight ${toneMap[tone]}`}>{value}</div>
-        {subtitle ? <div className="mt-0.5 truncate text-[11px] text-[color:var(--muted)]">{subtitle}</div> : null}
+        <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">{label}</div>
+        <div className={`text-[28px] font-bold tracking-[-0.02em] leading-none ${toneMap[tone]}`} style={{ fontVariantNumeric: "tabular-nums" }}>{value}</div>
+        {subtitle ? <div className="mt-1.5 truncate text-[11px] font-medium text-[color:var(--muted)]">{subtitle}</div> : null}
       </div>
     </button>
   );