refine: Reminder Manager — align to premium design

Replace SaaS-generic KPI icon boxes with flat inline layout.
Replace MUI color-prop status chips with design-system colors
matching the rest of the supply workspace.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/supply/ReminderKpiBar.tsx

@@ -21,41 +21,26 @@ function KpiCard({ icon, label, value, color, active, onClick }: KpiCardProps) {
       onClick={onClick}
       sx={{
         flex: 1,
-        p: 1.5,
+        px: 1.5,
+        py: 1.125,
         display: 'flex',
         alignItems: 'center',
-        gap: 1.5,
-        border: active ? `2px solid ${color}` : '1px solid #e2e8f0',
+        gap: 1,
+        border: active ? `1.5px solid ${color}` : '1px solid #e8e7e4',
         borderRadius: 1.5,
-        bgcolor: active ? `${color}10` : 'white',
+        bgcolor: active ? `${color}08` : 'white',
         cursor: 'pointer',
-        transition: 'all 0.15s',
+        transition: 'border-color 0.15s, background 0.15s',
         minWidth: 0,
-        '&:hover': {
-          bgcolor: `${color}0d`,
-          borderColor: color,
-        },
+        '&:hover': { bgcolor: `${color}06`, borderColor: color },
       }}
     >
-      <Box
-        sx={{
-          width: 34,
-          height: 34,
-          borderRadius: 1,
-          bgcolor: `${color}18`,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexShrink: 0,
-        }}
-      >
-        {icon}
-      </Box>
+      <Box sx={{ opacity: active ? 1 : 0.55, flexShrink: 0 }}>{icon}</Box>
       <Box sx={{ minWidth: 0 }}>
-        <Typography variant="h6" sx={{ fontWeight: 700, color, lineHeight: 1.2, fontSize: '1.25rem' }}>
+        <Typography sx={{ fontWeight: 700, color, lineHeight: 1.1, fontSize: '1.1rem' }}>
           {value}
         </Typography>
-        <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap', fontSize: '0.7rem' }}>
+        <Typography variant="caption" sx={{ color: '#64748b', whiteSpace: 'nowrap', fontSize: '0.68rem' }}>
           {label}
         </Typography>
       </Box>